:root { --ink:#191714; --muted:#68645d; --line:rgba(25,23,20,.12); --paper:#f6f3ed; --deep:#050505; --mint:var(--sv-color-brand,#d7fc00); --green:#191714; --red:#a33f3f; --amber:#9d632d; }
* { box-sizing:border-box; }
html,body { height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family: var(--sv-font-sans); }
body.qcs-modal-open { overflow:hidden; }
.qcs-topbar { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:58px; padding:0 28px; border-bottom:1px solid var(--sv-color-border); color:var(--sv-color-text); background:var(--sv-color-canvas); }
.qcs-back { color:var(--sv-color-text); font-size:12px; text-decoration:none; }
.qcs-back:hover { color:var(--mint); }
.qcs-brand { display:flex; align-items:center; gap:11px; font-size:10px; letter-spacing:.1em; }
.qcs-brand b { color:var(--mint); }
.qcs-brand span { color:var(--sv-color-text-muted); }
.qcs-rule { justify-self:end; padding:6px 9px; border:1px solid rgba(169,233,196,.2); border-radius:999px; color:var(--sv-color-text-muted); font: 650 9px/1 var(--sv-font-mono); }
main { width:min(1560px,calc(100% - 44px)); margin:0 auto; padding:28px 0 60px; }
.qcs-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding:0 4px 22px; border-bottom:1px solid #d2d9d3; }
.qcs-hero > div:first-child > span { color:#52705d; font: 700 10px/1.2 var(--sv-font-mono); letter-spacing:.1em; }
.qcs-hero h1 { margin:9px 0 8px; font-size:clamp(28px,3.3vw,50px); line-height:1; letter-spacing:-.055em; }
.qcs-hero p { max-width:690px; margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
.qcs-hero-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.qcs-hero-actions .btn.primary { border:1px solid #173d2c; color:var(--sv-color-text); background:#173d2c; box-shadow:0 5px 14px rgba(23,61,44,.16); }
.qcs-hero-actions .btn.primary:hover:not(:disabled) { border-color:#245c43; background:#245c43; filter:none; }
.qcs-hero-actions .btn.primary:disabled { border-color:var(--sv-color-border-strong); color:var(--sv-color-text-muted); background:#e3e7e3; box-shadow:none; cursor:not-allowed; }
.qcs-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin:16px 0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--line); gap:1px; }
.qcs-metrics div { padding:16px 18px; background:#fff; }
.qcs-metrics span { display:block; color:var(--sv-color-text-muted); font-size:10px; }
.qcs-metrics strong { display:block; margin-top:6px; font: 700 20px/1.15 var(--sv-font-mono); }
.qcs-policy-bar { display:grid; grid-template-columns:minmax(240px,1.2fr) minmax(320px,1.4fr); gap:18px; align-items:end; margin:0 0 16px; padding:16px 18px; border:1px solid #cfe0d3; border-radius:12px; background:linear-gradient(180deg,#f7fbf7,#eef5f0); }
.qcs-policy-copy span { display:block; color:#3f6b54; font: 700 9px/1 var(--sv-font-mono); letter-spacing:.13em; }
.qcs-policy-copy strong { display:block; margin-top:7px; color:#173e2a; font-size:16px; }
.qcs-policy-copy p { margin:6px 0 0; color:var(--sv-color-text-faint); font-size:12px; line-height:1.5; }
.qcs-policy-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:end; justify-content:flex-end; }
.qcs-policy-controls label { display:grid; gap:6px; color:var(--sv-color-text-faint); font-size:11px; min-width:220px; }
.qcs-policy-controls select { min-height:36px; border:1px solid #c5d4c8; border-radius:8px; background:#fff; padding:0 12px; color:#1d2b24; font-size:13px; }
.qcs-policy-counts { display:flex; gap:10px; align-items:center; min-height:36px; padding:0 12px; border:1px dashed #b7cbbd; border-radius:8px; background:rgba(255,255,255,.72); color:#51665a; font-size:12px; }
.qcs-policy-counts b { color:#173e2a; font: 750 14px/1 var(--sv-font-mono); }
.qcs-evaluation { display:grid; grid-template-columns:minmax(240px,1.35fr) repeat(4,minmax(0,1fr)); margin:0 0 12px; overflow:hidden; border:1px solid #cfe0d3; border-radius:12px; background:#d8e6dc; gap:1px; }
.qcs-evaluation > div { min-width:0; padding:15px 17px; background:#f8fcf8; }
.qcs-evaluation .qcs-evaluation-head { background:#15261c; color:var(--sv-color-text); }
.qcs-evaluation-head span { display:block; color:var(--muted); font: 700 9px/1 var(--sv-font-mono); letter-spacing:.13em; }
.qcs-evaluation-head strong { display:block; margin-top:7px; font-size:15px; }
.qcs-evaluation-head p { margin:5px 0 0; color:var(--sv-color-text-muted); font-size:9px; line-height:1.45; }
.qcs-evaluation > div:not(.qcs-evaluation-head) > span { display:block; color:var(--sv-color-text-faint); font-size:9px; }
.qcs-evaluation > div:not(.qcs-evaluation-head) > strong { display:block; margin-top:7px; color:#173e2a; font: 750 20px/1 var(--sv-font-mono); }
.qcs-evaluation small { display:block; margin-top:6px; color:var(--sv-color-text-muted); font-size:8px; line-height:1.35; }
.qcs-learning { margin:0 0 16px; border:1px solid #d5dfd6; border-radius:12px; background:#fff; overflow:hidden; }
.qcs-learning.hidden { display:none; }
.qcs-learning-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:16px 18px; background:#15261c; color:var(--sv-color-text); }
.qcs-learning-head span { display:block; color:var(--muted); font: 700 9px/1 var(--sv-font-mono); letter-spacing:.13em; }
.qcs-learning-head strong { display:block; margin-top:7px; font-size:16px; }
.qcs-learning-head p { max-width:720px; margin:6px 0 0; color:var(--sv-color-text-muted); font-size:11px; line-height:1.5; }
/* Beat starvault-theme.html[data-app-rail] .btn.primary !important (lime + white = unreadable). */
.qcs-learning-head .btn,
html[data-app-rail] body.has-app-rail .qcs-learning-head .btn {
  flex:0 0 auto;
  min-height:38px;
  padding:0 14px;
  border-radius:8px;
  font-weight:700;
  white-space:nowrap;
}
.qcs-learning-head .btn.primary,
.qcs-learning-head .qcs-learn-apply,
html[data-app-rail] body.has-app-rail .qcs-learning-head .btn.primary,
html[data-app-rail] body.has-app-rail .qcs-learning-head .qcs-learn-apply {
  border:1px solid #9fd4b4 !important;
  color:#10261b !important;
  background:#e8f7ee !important;
  box-shadow:none !important;
}
.qcs-learning-head .btn.primary:hover:not(:disabled),
.qcs-learning-head .qcs-learn-apply:hover:not(:disabled),
html[data-app-rail] body.has-app-rail .qcs-learning-head .btn.primary:hover:not(:disabled),
html[data-app-rail] body.has-app-rail .qcs-learning-head .qcs-learn-apply:hover:not(:disabled) {
  border-color:var(--sv-color-border-strong) !important;
  color:#0b1c14 !important;
  background:#f3fcf6 !important;
  filter:none !important;
}
.qcs-learning-head .btn.primary:disabled,
.qcs-learning-head .qcs-learn-apply:disabled,
html[data-app-rail] body.has-app-rail .qcs-learning-head .btn.primary:disabled,
html[data-app-rail] body.has-app-rail .qcs-learning-head .qcs-learn-apply:disabled {
  border-color:#3a4a41 !important;
  color:var(--sv-color-text-muted) !important;
  background:var(--sv-color-surface-hover) !important;
  cursor:not-allowed;
}
.qcs-learning-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:#d8e6dc; border-top:1px solid #d8e6dc; }
.qcs-learning-stats > div { padding:14px 16px; background:#f8fcf8; }
.qcs-learning-stats span { display:block; color:var(--sv-color-text-faint); font-size:10px; }
.qcs-learning-stats strong { display:block; margin-top:6px; color:#173e2a; font: 750 18px/1.15 var(--sv-font-mono); }
.qcs-learning-reasons { margin:0; padding:12px 18px 14px; list-style:none; }
.qcs-learning-reasons li { position:relative; margin:0 0 8px; padding:0 0 0 14px; color:#405248; font-size:12px; line-height:1.5; }
.qcs-learning-reasons li::before { content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:#3d7a5c; }
.qcs-learning-preview { margin:0 18px 16px; padding:12px 14px; border:1px dashed #c5d4c8; border-radius:8px; background:#f4f8f5; color:#405248; font-size:12px; line-height:1.55; }
.qcs-learning-preview.hidden { display:none; }
.qcs-learning-preview b { color:#173e2a; }
.qcs-toolbar { position:sticky; top:58px; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; background:rgba(245,247,243,.92); backdrop-filter:blur(10px); }
.qcs-filters { display:flex; flex-wrap:wrap; gap:5px; }
.qcs-filters button { min-height:32px; padding:0 11px; border:1px solid #d8ded8; border-radius:7px; color:var(--sv-color-text-faint); background:#fff; font-size:11px; cursor:pointer; }
.qcs-filters button.active { border-color:#183d2c; color:var(--sv-color-text); background:#183d2c; }
.qcs-toolbar-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.qcs-toolbar label { display:flex; align-items:center; gap:8px; color:var(--sv-color-text-muted); font-size:10px; }
.qcs-toolbar select { min-height:32px; border:1px solid #d8ded8; border-radius:7px; background:#fff; padding:0 30px 0 10px; color:#2a332d; }
.qcs-select-all { min-height:32px; padding:0 12px; border:1px solid #d8ded8; border-radius:7px; color:#2f4f3e; background:#fff; font-size:11px; cursor:pointer; }
.qcs-select-all:hover:not(:disabled) { border-color:var(--sv-color-border); background:#f4f8f5; }
.qcs-select-all:disabled { color:var(--sv-color-text-muted); cursor:not-allowed; }
.qcs-notice { margin:2px 0 12px; padding:10px 13px; border:1px solid #d8e2da; border-radius:8px; color:#496353; background:#edf4ee; font-size:11px; }
.qcs-notice.error { border-color:var(--sv-color-border-strong); color:#843939; background:#fff0ef; }

.qcs-thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.qcs-thumb-card { position:relative; aspect-ratio:1; overflow:hidden; border:1px solid #dcddd7; border-radius:10px; padding:0; background:var(--sv-color-surface-strong); cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.qcs-thumb-card:hover { transform:translateY(-2px); border-color:var(--sv-color-border); box-shadow:0 8px 20px rgba(20,42,34,.1); }
.qcs-thumb-card img { display:block; width:100%; height:100%; object-fit:cover; }
.qcs-thumb-score { position:absolute; left:8px; top:8px; min-width:34px; padding:4px 7px; border-radius:999px; color:var(--sv-color-text); background:rgba(8,14,10,.74); font: 700 11px/1.2 var(--sv-font-mono); }
.qcs-thumb-rec { position:absolute; right:8px; bottom:8px; padding:4px 7px; border-radius:6px; color:var(--sv-color-text); background:rgba(8,14,10,.7); font: 650 9px/1 var(--sv-font-mono); }
.qcs-thumb-rec.keep { background:rgba(23,86,57,.9); }
.qcs-thumb-rec.reject { background:rgba(139,45,45,.91); }
.qcs-thumb-rec.backup,.qcs-thumb-rec.review { background:rgba(126,78,30,.91); }
.qcs-thumb-star { position:absolute; right:8px; top:8px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.9); background:rgba(0,0,0,.28); color:transparent; font-size:12px; }
.qcs-thumb-card.is-selected .qcs-thumb-star { color:var(--sv-color-text); background:#23815e; border-color:var(--sv-color-border-strong); }
.qcs-thumb-card.is-selected .qcs-thumb-star::before { content:"★"; }
.qcs-empty { display:grid; min-height:300px; place-items:center; border:1px dashed #ccd5cd; border-radius:12px; color:var(--sv-color-text-muted); text-align:center; grid-column:1/-1; }

.qcs-modal { position:fixed; inset:0; z-index:240; display:grid; place-items:center; padding:24px; }
.qcs-modal.hidden { display:none; }
.qcs-modal-backdrop { position:absolute; inset:0; border:0; background:rgba(3,8,6,.76); backdrop-filter:blur(8px); cursor:default; }
.qcs-modal-shell { position:relative; z-index:1; display:grid; grid-template-columns:minmax(520px,1fr) minmax(420px,520px); width:min(1580px,calc(100vw - 48px)); height:min(920px,calc(100vh - 48px)); overflow:hidden; border:1px solid #27312d; border-radius:12px; background:var(--sv-color-surface); box-shadow:0 32px 90px rgba(0,0,0,.52); }
.qcs-viewer,.qcs-analysis { min-height:0; height:100%; overflow:hidden; }
.qcs-viewer { display:flex; flex-direction:column; background:var(--sv-color-surface-elevated); color:var(--sv-color-text); }
.qcs-viewer-head { display:flex; min-height:48px; align-items:center; gap:12px; padding:0 14px; background:var(--sv-color-surface); color:var(--sv-color-text); border-bottom:1px solid #27312d; flex:0 0 auto; }
.qcs-viewer-title { overflow:hidden; margin-right:auto; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:800; color:var(--sv-color-text); }
.qcs-viewer-count { color:var(--sv-color-text-muted); font-size:12px; white-space:nowrap; }
.qcs-nav { display:flex; gap:3px; }
.qcs-nav button { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:5px; background:transparent; color:var(--sv-color-text); font-size:23px; cursor:pointer; }
.qcs-nav button:hover { background:var(--sv-color-surface-hover); }
.qcs-star-btn { min-height:30px; padding:0 10px; border:1px solid #39453f; border-radius:6px; background:var(--sv-color-surface-hover); color:var(--sv-color-text); font-size:12px; cursor:pointer; }
.qcs-star-btn.is-on { border-color:#57a988; color:var(--sv-color-text); background:#173d2c; }
.qcs-modal-close { display:grid; place-items:center; width:30px; height:30px; border:1px solid #39453f; border-radius:7px; background:var(--sv-color-surface-hover); color:var(--sv-color-text); font-size:20px; cursor:pointer; }
.qcs-preview-stage { position:relative; flex:1; min-height:0; overflow:hidden; background:radial-gradient(circle at 50% 45%,var(--sv-color-surface-hover),var(--sv-color-surface-strong) 64%); cursor:zoom-in; outline:none; }
.qcs-preview-stage.is-zoomed { cursor:zoom-out; }
.qcs-preview-stage:focus-visible { box-shadow:inset 0 0 0 3px #57a988; }
.qcs-preview { width:100%; height:100%; object-fit:contain; object-position:center; display:block; transition:transform .22s cubic-bezier(.2,.8,.2,1); transform-origin:var(--zoom-x,50%) var(--zoom-y,50%); }
.qcs-preview-stage.is-zoomed .qcs-preview { transform:scale(2.35); }
.qcs-preview-tip { position:absolute; right:14px; bottom:14px; border-radius:999px; padding:5px 9px; background:rgba(5,16,12,.66); color:var(--sv-color-text); font-size:12px; pointer-events:none; }
.qcs-preview-stage.is-zoomed .qcs-preview-tip { opacity:0; }

.qcs-analysis { display:flex; flex-direction:column; background:#fff; border-left:1px solid #e3e7e2; color:#202820; }
.qcs-analysis-scroll { flex:1; min-height:0; overflow:auto; padding:15px 16px 24px; }
.qcs-analysis-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.qcs-analysis-head h3 { margin:0; font-size:18px; }
.qcs-analysis-badge { padding:5px 9px; border-radius:999px; font-size:11px; font-weight:700; background:#eef3ef; color:#3d5448; }
.qcs-analysis-badge.keep { background:#e1f4e9; color:#176546; }
.qcs-analysis-badge.backup,.qcs-analysis-badge.review { background:#fff2d4; color:#8a6100; }
.qcs-analysis-badge.reject { background:#fee9e5; color:#a13624; }
.qcs-score-row { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.qcs-score-row strong { font: 750 34px/1 var(--sv-font-mono); color:#173e2a; }
.qcs-score-row span { color:var(--sv-color-text-faint); font-size:11px; line-height:1.45; }
.qcs-finding .qcs-deduct-formula { color:var(--sv-color-text-muted); font-style:normal; font-weight:500; font-size:10px; }
.qcs-reject-hint { margin:0 0 12px; padding:8px 10px; border-radius:8px; background:#f8ecec; color:#843939; font-size:11px; line-height:1.45; }
.qcs-score-formula { margin:8px 0 0; color:var(--sv-color-text-faint); font-size:10px; line-height:1.45; }
.qcs-section { margin-top:14px; padding-top:12px; border-top:1px solid #e2e7e2; }
.qcs-section h4 { margin:0 0 8px; font-size:12px; }
.qcs-finding { margin-bottom:8px; padding:9px 10px; border-left:3px solid #a74646; border-radius:0 7px 7px 0; background:#fafbf9; font-size:11px; line-height:1.5; }
.qcs-finding span { display:block; color:#8a4d4d; font: 700 9px/1.2 var(--sv-font-mono); }
.qcs-finding .qcs-deduct { color:#a33; font-weight:800; }
.qcs-finding.warn { border-left-color:#c48a2d; }
.qcs-finding.warn span { color:#8a6100; }
.qcs-finding.warn .qcs-deduct { color:#9a5b00; }
.qcs-finding.unknown { border-left-color:var(--sv-color-border); }
.qcs-finding.unknown span { color:var(--sv-color-text-faint); }
.qcs-analysis ul { margin:0; padding-left:16px; color:var(--sv-color-text-faint); font-size:11px; line-height:1.55; }
.qcs-analysis-footer { flex:0 0 auto; display:flex; gap:8px; padding:12px 14px; border-top:1px solid #e2e7e2; background:#f8faf7; }
.qcs-analysis-footer .btn { flex:1; min-height:36px; font-weight:700; }
.qcs-analysis-footer .btn.primary {
  border:1px solid #173d2c;
  color:var(--sv-color-text);
  background:#173d2c;
  box-shadow:0 4px 12px rgba(23,61,44,.14);
}
.qcs-analysis-footer .btn.primary:hover:not(:disabled) {
  border-color:#245c43;
  background:#245c43;
  filter:none;
}
.qcs-analysis-footer .btn.secondary {
  border:1px solid #c5cec7;
  color:#243029;
  background:#fff;
}
.qcs-retry { border:1px solid #e0c5c5 !important; color:#963f3f !important; background:#fff5f4 !important; }
.hidden { display:none!important; }

@media(max-width:1100px){
  .qcs-modal-shell { grid-template-columns:1fr; width:calc(100vw - 28px); height:calc(100vh - 28px); }
  .qcs-analysis { border-left:0; border-top:1px solid #e3e7e2; max-height:42%; }
}
@media(max-width:900px){
  .qcs-topbar{grid-template-columns:1fr auto}.qcs-brand{display:none}
  .qcs-hero{align-items:flex-start;flex-direction:column}
  .qcs-metrics{grid-template-columns:1fr 1fr}
  .qcs-policy-bar{grid-template-columns:1fr}
  .qcs-policy-controls{justify-content:flex-start}
  .qcs-evaluation{grid-template-columns:1fr 1fr}
  .qcs-evaluation-head{grid-column:1/-1}
  .qcs-learning-stats{grid-template-columns:1fr 1fr}
  .qcs-learning-head{flex-direction:column;align-items:stretch}
  .qcs-toolbar{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  main{width:calc(100% - 24px);padding-top:24px}
  .qcs-topbar{padding:0 14px}
  .qcs-rule{display:none}
  .qcs-metrics{grid-template-columns:1fr 1fr}
  .qcs-metrics div:last-child{grid-column:1/-1}
  .qcs-thumbs{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}