.xgz-qcmp { min-height: 520px; }
.xgz-qcmp-top { display: flex; align-items: center; justify-content: space-between; gap: var(--xgz-s3, 12px); flex-wrap: wrap; padding: var(--xgz-s4, 16px) var(--xgz-s6, 24px); background: var(--t-surface-2); border-bottom: 1px solid var(--t-line); }
.xgz-qcmp-tabs { gap: 6px; }
.xgz-qcmp-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 14px; border: 1px solid var(--t-line); border-radius: var(--t-btn-r); background: var(--t-surface); color: var(--t-ink); font-size: var(--xgz-fs-sm, 0.8125rem); font-weight: 600; cursor: pointer; }
.xgz-qcmp-tab small { padding: 1px 7px; border-radius: 999px; background: var(--t-brand-tint); color: var(--t-brand-text); font-size: 11px; font-weight: 700; }
.xgz-qcmp-tab.is-on { background: var(--t-deep); border-color: var(--t-deep); color: #fff; }
.xgz-qcmp-tab.is-on small { background: rgba(255, 255, 255, .18); color: #fff; }
.xgz-qcmp-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--xgz-s4, 16px); padding: var(--xgz-s5, 20px) var(--xgz-s6, 24px) var(--xgz-s6, 24px); }
.xgz-qcmp-wrap { overflow-x: auto; border: 1px solid var(--t-line); border-radius: var(--t-r); }
.xgz-scope .xgz-tool .xgz-qcmp-t, .xgz-qcmp-t { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: var(--xgz-fs-sm, 0.8125rem); }
.xgz-scope .xgz-tool .xgz-qcmp-t th, .xgz-scope .xgz-tool .xgz-qcmp-t td { padding: 7px 10px; border-bottom: 1px solid var(--t-line); vertical-align: middle; text-align: left; background: var(--t-surface); }
.xgz-scope .xgz-tool .xgz-qcmp-t thead th { position: sticky; top: 0; z-index: 2; background: var(--t-deep); color: #fff; font-size: var(--xgz-fs-xxs, 0.6875rem); letter-spacing: .06em; text-transform: uppercase; }
.xgz-scope .xgz-tool .xgz-qcmp-t tbody th { color: var(--t-ink); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: var(--xgz-fs-sm, 0.8125rem); }
.xgz-scope .xgz-tool .xgz-qcmp-t .xgz-qcmp-item { position: sticky; left: 0; z-index: 1; width: 34%; min-width: 180px; }
.xgz-scope .xgz-tool .xgz-qcmp-t thead .xgz-qcmp-item { z-index: 3; }
.xgz-scope .xgz-tool .xgz-qcmp-g th { background: var(--t-surface-2); color: var(--t-ink-3); font-size: var(--xgz-fs-xxs, 0.6875rem); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding-top: 10px; }
.xgz-scope .xgz-tool .xgz-qcmp-t tr.is-diff > * { background: #fff7f9; }
.xgz-scope .xgz-tool .xgz-qcmp-t tr.is-diff > th.xgz-qcmp-item { box-shadow: inset 3px 0 0 var(--t-brand); }
.xgz-scope .xgz-tool .xgz-qcmp-t tr:last-child > * { border-bottom: 0; }
.xgz-qcmp-sup { display: flex; align-items: center; gap: 4px; }
.xgz-scope .xgz-tool .xgz-qcmp-sup input { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); color: #fff; padding: 5px 8px; font-size: var(--xgz-fs-sm, 0.8125rem); font-weight: 700; text-transform: none; letter-spacing: 0; }
.xgz-qcmp-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.xgz-qcmp-x:hover { background: var(--t-brand); }
.xgz-qcmp-add { width: 120px; }
.xgz-scope .xgz-tool .xgz-qcmp-t thead .xgz-qcmp-add .xgz-tool-btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); white-space: nowrap; }
.xgz-qcmp-s { font-weight: 600; }
.xgz-qcmp-s.is-in { border-color: #9fc5ad; background: #f1f8f3; }
.xgz-qcmp-s.is-opt { border-color: #9fcbe6; background: var(--t-accent-tint); }
.xgz-qcmp-s.is-out { border-color: #c9ced6; background: var(--t-surface-2); color: var(--t-ink-3); }
.xgz-qcmp-s.is-na { border-color: #f2a7bd; background: #fff4f7; color: var(--t-brand-text); }
.xgz-qcmp-t input[type="text"] { min-width: 120px; }
.xgz-qcmp-t--check .xgz-qcmp-item { width: 42%; }
.xgz-qcmp-cn { display: block; font-weight: 700; }
.xgz-qcmp-cg { display: block; margin-top: 2px; font-weight: 400; font-size: var(--xgz-fs-xs, 0.75rem); color: var(--t-ink-3); line-height: 1.45; }
.xgz-qcmp-w { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; font-size: var(--xgz-fs-xs, 0.75rem); color: var(--t-ink-2); }
.xgz-scope .xgz-tool .xgz-qcmp-w select { width: auto; padding: 3px 6px; font-size: var(--xgz-fs-xs, 0.75rem); }
.xgz-qcmp-next { display: flex; justify-content: flex-end; }
.xgz-qcmp-pick { display: none; align-items: center; gap: 6px; font-size: var(--xgz-fs-xs, 0.75rem); color: var(--t-ink-3); }
.xgz-qcmp-pick button { min-width: 38px; min-height: 34px; border: 1px solid var(--t-line); border-radius: var(--t-btn-r); background: var(--t-surface); font-weight: 700; color: var(--t-ink); cursor: pointer; }
.xgz-qcmp-pick button.is-on { background: var(--t-deep); border-color: var(--t-deep); color: #fff; }
.xgz-qcmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--xgz-s3, 12px); }
.xgz-qcmp-card { display: grid; gap: var(--xgz-s2, 8px); align-content: start; padding: var(--xgz-s4, 16px); border: 1px solid var(--t-line); border-radius: var(--t-r); }
.xgz-scope .xgz-tool .xgz-qcmp-card h4 { font-size: var(--xgz-fs-lg, 1.0625rem); }
.xgz-qcmp-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--t-line); gap: 2px; }
.xgz-qcmp-bar span.is-in, .xgz-qcmp-cnt i.is-in { background: #2c7a4b; }
.xgz-qcmp-bar span.is-opt, .xgz-qcmp-cnt i.is-opt { background: var(--t-accent); }
.xgz-qcmp-bar span.is-out, .xgz-qcmp-cnt i.is-out { background: #9aa3ae; }
.xgz-qcmp-bar span.is-na, .xgz-qcmp-cnt i.is-na { background: var(--t-brand); }
.xgz-qcmp-cnt { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: var(--xgz-fs-xs, 0.75rem); color: var(--t-ink-2); }
.xgz-qcmp-cnt i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.xgz-qcmp-cnt b { color: var(--t-ink); }
.xgz-qcmp-score { margin: 0; font-size: var(--xgz-fs-sm, 0.8125rem); color: var(--t-ink-2); }
.xgz-qcmp-score b { font-size: var(--xgz-fs-xl, 1.25rem); color: var(--t-ink); }
.xgz-qcmp-score small { color: var(--t-ink-3); }
.xgz-qcmp-meter { height: 6px; background: var(--t-line); border-radius: 999px; overflow: hidden; }
.xgz-qcmp-meter span { display: block; height: 100%; background: var(--t-deep); }
.xgz-qcmp-warn, .xgz-qcmp-ask { margin: 0; font-size: var(--xgz-fs-xs, 0.75rem); color: var(--t-brand-text); }
.xgz-qcmp-ask { color: var(--t-ink-2); }
.xgz-qcmp-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.xgz-qcmp-pill.is-in { background: #e6f2ea; color: #1f5c38; }
.xgz-qcmp-pill.is-opt { background: var(--t-accent-tint); color: var(--t-accent-text); }
.xgz-qcmp-pill.is-out { background: var(--t-surface-2); color: var(--t-ink-3); }
.xgz-qcmp-pill.is-na { background: var(--t-brand-tint); color: var(--t-brand-text); }
.xgz-qcmp-t--res { min-width: 420px; }
@media (max-width: 600px) {
  .xgz-qcmp-top, .xgz-qcmp-panel { padding-left: var(--xgz-s4, 16px); padding-right: var(--xgz-s4, 16px); }
  .xgz-qcmp-tab { flex: 1 1 45%; justify-content: center; }
  .xgz-qcmp-pick { display: flex; }
  .xgz-qcmp-wrap[data-col] .xgz-qcmp-t { min-width: 0; }
  .xgz-qcmp-wrap[data-col] .xgz-qcmp-add { display: none; }
  .xgz-qcmp-wrap[data-col="0"] .xgz-qcmp-c:not([data-c="0"]), .xgz-qcmp-wrap[data-col="1"] .xgz-qcmp-c:not([data-c="1"]),
  .xgz-qcmp-wrap[data-col="2"] .xgz-qcmp-c:not([data-c="2"]), .xgz-qcmp-wrap[data-col="3"] .xgz-qcmp-c:not([data-c="3"]) { display: none; }
  .xgz-scope .xgz-tool .xgz-qcmp-t .xgz-qcmp-item { position: static; width: 55%; min-width: 0; }
  .xgz-qcmp-next .xgz-tool-btn { width: 100%; }
}
@media print {
  .xgz-qcmp-top, .xgz-qcmp-pick, .xgz-qcmp-next, .xgz-qcmp-card .xgz-tool-btns { display: none !important; }
  .xgz-qcmp-wrap { overflow: visible; }
}
