@font-face {
  font-family: "Pretendard Variable";
  src: url("/assets/fonts/PretendardVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
}

/* Light tool design: shared colors also cover detailed settings and score evidence. */
:root  { 
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --line: #dde5ee;
  --line-strong: #b8c7da;
  --text: #162238;
  --muted: #5b6c84;
  --faint: #63748a;
  --accent: #3569df;
  --accent-dark: #eaf0fe;
  --blue: #3569df;
  --blue-hover: #285acb;
  --blue-soft: #edf3ff;
  --blue-border: #c3d3f7;
  --green: #008762;
  --green-soft: #effbf7;
  --green-border: #bce9da;
  --amber: #976310;
  --amber-soft: #fffbef;
  --amber-border: #ecd7a4;
  --red: #bd4646;
  --red-soft: #fff4f3;
  --red-border: #ecc9c6;
  --radius: 10px;
  font-family: "Pretendard Variable", "Malgun Gothic", "Segoe UI", sans-serif;
  font-size: 14px;
}


* { box-sizing:border-box}
body { margin:0;background:radial-gradient(ellipse at 75% 0%,var(--panel-soft) 0%,transparent 40%),var(--bg);color:var(--text);line-height:1.65}
button,input,select { font:inherit}
button,a,input,select,label.upload-button { -webkit-tap-highlight-color:transparent}
button { cursor:pointer}
button:disabled { cursor:wait;opacity:.5}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.upload-button:focus-within { outline:2px solid var(--accent);outline-offset:3px}
a { color:inherit;text-decoration:none}
[hidden] { display:none!important}
.site-header { height:84px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1440px)/2));background:var(--bg)}
.brand { display:flex;align-items:center;gap:12px;font-size:16px;letter-spacing:-.4px}
.brand b { font-weight:700}
.brand-mark { color:var(--accent);font-size:28px;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--blue-border);border-radius:10px;background:linear-gradient(150deg,var(--amber-soft),var(--blue-soft))}
.header-actions { display:flex;gap:24px;align-items:center}
.local-badge { font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}
.local-badge i { background:var(--green);width:6px;height:6px;border-radius:50%;box-shadow:0 0 12px #0087621a}
main { max-width:1504px;margin:auto;padding:42px 32px 0}
.intro { display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;gap:24px}
.eyebrow { font-size:10px;font-weight:700;letter-spacing:2px;color:var(--accent);margin-bottom:8px}
.intro h1 { font-size:32px;line-height:1.4;letter-spacing:-1.3px;margin:0 0 8px;font-weight:700}
.intro p { margin:0;color:var(--muted);font-size:14px}
.source-summary { border-left:1px solid var(--line);padding-left:24px;min-width:188px}
.source-summary strong { display:block;font-size:13px;margin-bottom:4px}
.source-summary span { display:block;color:var(--muted);font-size:12px}
.workspace-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.panel { border:1px solid var(--line);background:linear-gradient(135deg,var(--panel),var(--panel));border-radius:var(--radius);padding:26px}
.section-heading { display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:22px}
.section-heading .eyebrow { margin-bottom:4px}
h2 { font-size:19px;letter-spacing:-.6px;margin:0;line-height:1.5}
.button { display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:9px 16px;border:1px solid transparent;border-radius:8px;font-weight:600;font-size:12px;line-height:1.5;transition:background .15s,border-color .15s,transform .15s}
.button:active:not(:disabled) { transform:translateY(1px)}
.button-secondary { color:var(--text);background:var(--panel-soft);border-color:var(--line)}
.button-secondary:hover:not(:disabled) { background:var(--blue-soft);border-color:var(--line-strong)}
.button-quiet { color:var(--muted);background:transparent;border-color:var(--line)}
.button-quiet:hover:not(:disabled) { background:var(--blue-soft);color:var(--text)}
.button-primary { background:var(--accent);color:var(--text);border-color:var(--accent);font-size:14px}
.button-primary:hover:not(:disabled) { background:var(--blue-hover)}
.text-button { font-size:12px;color:var(--accent);background:none;border:0;padding:3px 0}
.text-button:hover { color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.icon-button { font-size:25px;width:32px;height:32px;line-height:1;border:0;border-radius:6px;background:var(--blue-soft);color:var(--muted)}
.capture-area { background:var(--panel-soft);border:1px dashed var(--line);border-radius:10px;padding:16px;margin-bottom:26px}
.capture-controls { display:flex;gap:10px;flex-wrap:wrap}
.capture-controls .button { flex:1;white-space:nowrap}
.capture-controls .button span { font-size:17px;line-height:1}
.upload-button { cursor:pointer}
.field-help { font-size:11px;color:var(--muted);margin:8px 0 0;line-height:1.7}
.capture-status { font-size:12px;color:var(--blue);white-space:pre-line}
.capture-status:not(:empty) { margin-top:10px}
.capture-status.error { color:var(--red)}
.image-preview { margin-top:16px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.crop-stage { position:relative;display:flex;align-items:center;justify-content:center;min-height:120px;max-height:320px;overflow:hidden;background:repeating-conic-gradient(var(--panel-soft) 0% 25%,var(--panel-soft) 0% 50%) 50% /20px 20px;user-select:none}
.crop-stage img { max-width:100%;max-height:320px;width:auto;height:auto;object-fit:contain;display:block;user-select:none}
.crop-stage.cropping { cursor:crosshair;touch-action:none}
.crop-selection { position:absolute;border:2px solid var(--accent);background:#3569df0d;pointer-events:none;box-shadow:0 0 0 1000px #16223866}
.image-toolbar { display:flex;justify-content:space-between;align-items:center;padding:8px 10px;gap:12px;font-size:10px;color:var(--muted);background:var(--panel-soft)}
.image-toolbar>div { display:flex;gap:12px;flex-wrap:wrap}
.image-toolbar .text-button { font-size:10px}
details { color:var(--muted);font-size:11px;margin-top:10px}
summary { cursor:pointer}
pre { white-space:pre-wrap;max-height:180px;overflow:auto;background:var(--panel-soft);padding:12px;border-radius:6px;font-family:inherit;line-height:1.6}
.form-divider { display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;margin-bottom:16px}
.form-divider>span:first-child { font-weight:700}
.form-divider>span:last-child { font-size:10px;color:var(--faint)}
.form-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}
label,.field-label { font-size:12px;font-weight:500;display:block;color:var(--text)}
input:not([type=checkbox]),select { display:block;width:100%;border:1px solid var(--line);border-radius:7px;background:var(--panel-soft);color:var(--text);height:41px;padding:8px 10px;margin-top:6px;min-width:0;transition:border-color .15s}
input::placeholder { color:var(--faint);font-size:11px}
input:hover,select:hover { border-color:var(--line-strong)}
select { padding-right:24px;cursor:pointer}
input[type=number] { font-variant-numeric:tabular-nums}
input[type=checkbox] { accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.optional { font-size:10px;color:var(--faint);margin-left:3px}
.mainstat-row { display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:20px;padding:16px;background:var(--panel-soft);border:1px solid var(--line);border-radius:9px}
.mainstat-row>label:first-child { color:var(--accent)}
.substats-heading { display:flex;align-items:center;justify-content:space-between;margin:24px 0 8px}
.substats-heading>span { color:var(--faint);font-size:10px}
.substats { display:grid;gap:8px}
.substat-row { display:grid;grid-template-columns:24px 1.4fr 1fr;align-items:center;gap:10px}
.substat-row .substat-index { font-size:10px;display:grid;place-items:center;color:var(--faint);height:24px;width:24px;border:1px solid var(--line);border-radius:6px}
.substat-row select,.substat-row input { margin:0}
.protection-row { display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:22px}
.checkbox-label { display:flex;align-items:center;gap:7px;font-size:11px;cursor:pointer}
.checkbox-label input { margin:0;flex-shrink:0}
.reforge-inputs { display:flex;flex-wrap:wrap;gap:8px 16px;margin:10px 0 14px;color:var(--muted) }
.reforge-inputs > .field-help { flex-basis:100%;margin:0 }
.reforge-stat-changes { margin-top:8px;font-size:11px;line-height:1.6 }
.reforge-stat-changes summary { color:var(--blue);cursor:pointer }
.protection-row>span { font-size:10px;color:var(--faint);flex-basis:100%;margin-top:-6px}
.ocr-review { border:1px solid var(--amber-border);background:var(--amber-soft);padding:13px;border-radius:8px;margin-top:18px}
.ocr-review .checkbox-label { color:var(--amber);line-height:1.8;align-items:flex-start}
.ocr-review input { margin-top:4px}
.ocr-review p { font-size:10px;color:var(--amber);margin:5px 0 0 22px}
.form-error { color:var(--red);background:var(--red-soft);border:1px solid var(--red-border);font-size:12px;padding:12px;border-radius:8px;margin-top:16px;white-space:pre-line}
.evaluate-button { display:flex;justify-content:space-between;width:100%;margin-top:24px;padding:14px 18px;min-height:49px}
.evaluate-button>span:last-child { font-size:21px;line-height:1}
.results-column { display:grid;gap:24px}
.result-tag,.count-pill { font-size:10px;color:var(--muted);border:1px solid var(--line);background:var(--panel-soft);border-radius:30px;padding:4px 10px;white-space:nowrap}
.empty-result { min-height:288px;text-align:center;padding:28px 0 18px}
.empty-glyph { font-size:40px;line-height:1.3;color:var(--blue);border:1px solid var(--blue-border);border-radius:14px;width:72px;height:72px;display:grid;place-items:center;margin:0 auto 22px;background:linear-gradient(135deg,var(--blue-soft),var(--panel-soft));box-shadow:0 0 50px #3569df0d}
.empty-result h3 { font-size:17px;margin:0 0 8px;letter-spacing:-.5px}
.empty-result p { font-size:12px;color:var(--muted);margin:0;line-height:1.8}
.analysis-steps { display:flex;justify-content:center;gap:16px;margin-top:26px;color:var(--faint);font-size:10px}
.analysis-steps i { font-style:normal;font-size:9px;color:var(--accent);margin-right:4px}
.decision-banner { background:linear-gradient(110deg,var(--green-soft),var(--green-soft));border:1px solid var(--green-border);border-radius:10px;padding:20px}
.decision-banner.hold { background:linear-gradient(110deg,var(--amber-soft),var(--amber-soft));border-color:var(--amber-border)}
.decision-banner.sell { background:linear-gradient(110deg,var(--red-soft),var(--red-soft));border-color:var(--red-border)}
.decision-banner.invalid { background:var(--amber-soft);border-color:var(--line)}
.decision-top { display:flex;gap:14px;align-items:center}
.decision-top>span { width:44px;height:44px;font-size:26px;color:var(--green);border:1px solid var(--green-border);border-radius:10px;display:grid;place-items:center;background:var(--green-soft)}
.hold .decision-top>span { color:var(--accent);border-color:var(--amber-border)}
.sell .decision-top>span { color:var(--red);border-color:var(--red-border)}
.invalid .decision-top>span { color:var(--muted);border-color:var(--line)}
.decision-label { font-size:10px;color:var(--muted);margin-bottom:2px}
.decision-top h3 { font-size:23px;letter-spacing:-.7px;margin:0}
.item-summary { font-size:11px;color:var(--muted);margin-top:15px;padding-top:12px;border-top:1px solid var(--line)}
.decision-reasons { padding:0;list-style:none;margin:20px 0;display:grid;gap:11px}
.decision-reasons li { font-size:12px;color:var(--text);line-height:1.8;position:relative;padding-left:19px}
.decision-reasons li::before { content:"·";font-size:22px;color:var(--accent);position:absolute;left:2px;top:-5px}
.notice { display:flex;gap:10px;border:1px solid var(--line);background:var(--panel-soft);border-radius:8px;padding:12px 13px;font-size:11px;color:var(--muted);margin-top:10px;line-height:1.8}
.notice>span { flex-shrink:0;color:var(--blue);font-size:15px}
.notice p { margin:0}
.notice.warning { background:var(--amber-soft);border-color:var(--amber-border);color:var(--amber)}
.notice.warning>span { color:var(--accent)}
.result-footer { display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.result-footer>span { font-size:10px;color:var(--faint)}
.count-pill { color:var(--accent);min-width:30px;text-align:center}
.recommendation-caption { font-size:11px;color:var(--muted);margin:-10px 0 18px}
.small-empty { padding:22px 14px;text-align:center;color:var(--faint);font-size:12px;border:1px dashed var(--line);border-radius:9px}
.recommendation-list { display:grid;gap:12px}
.hero-card { padding:17px;border:1px solid var(--line);background:var(--panel-soft);border-radius:10px}
.hero-top { display:flex;justify-content:space-between;align-items:start;gap:12px}
.hero-name { font-size:15px;font-weight:700;margin:0;letter-spacing:-.4px}
.hero-build { font-size:10px;color:var(--muted);margin-top:2px}
.fit-score { font-variant-numeric:tabular-nums;color:var(--accent);font-size:20px;font-weight:700;line-height:1.3;text-align:right;white-space:nowrap}
.fit-score small { display:block;font-weight:400;font-size:9px;color:var(--faint);margin-top:2px}
.hero-badges { display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.hero-badge { font-size:9px;border:1px solid var(--line);background:var(--panel-soft);color:var(--muted);border-radius:4px;padding:2px 6px}
.hero-badge.main { background:var(--green-soft);border-color:var(--green-border);color:var(--green)}
.hero-reason { font-size:11px;color:var(--muted);line-height:1.8;margin:12px 0 0}
.weights-row { display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.weight-pill { font-size:9px;color:var(--muted);background:var(--panel-soft);border:1px solid var(--line);border-radius:20px;padding:2px 7px}
.weight-pill b { font-weight:600;color:var(--blue);margin-left:5px}
.show-more { width:100%;margin-top:14px}
.history-panel { margin-top:24px}
.history-panel .section-heading { margin-bottom:18px}
.history-list { display:grid;gap:8px}
.history-row { display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--panel-soft);border:1px solid var(--line);border-radius:8px}
.history-gear { flex:1;min-width:0;font-size:12px;font-weight:600}
.history-gear small { display:block;color:var(--faint);font-size:10px;font-weight:400;margin-top:2px}
.history-decision { color:var(--accent);font-size:11px;flex-shrink:0}
.history-row .text-button { flex-shrink:0}
.site-footer { padding:25px 0 30px;display:flex;justify-content:space-between;gap:15px;font-size:10px;color:var(--faint)}
.settings-panel { padding:25px;margin-bottom:24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.settings-grid { display:grid;grid-template-columns:1.1fr 1fr;gap:30px}
.owned-section>.field-label { display:flex;justify-content:space-between;gap:12px}
.subtle { font-size:10px;color:var(--accent);font-weight:400}
.hero-tools { display:flex;gap:15px;margin:8px 0}
.owned-heroes { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-height:250px;overflow:auto;gap:8px;padding:12px;border:1px solid var(--line);background:var(--panel-soft);border-radius:8px}
.owned-heroes .checkbox-label { font-size:10px;align-items:flex-start;word-break:keep-all}
.owned-heroes input { width:12px;height:12px;margin-top:3px}
.threshold-settings { display:grid;gap:12px;margin-top:10px}
.threshold-row { display:grid;grid-template-columns:1fr 90px;align-items:center;gap:18px}
.threshold-row input { margin-top:0}
.threshold-row label { font-size:11px}
.threshold-row p { margin:2px 0 0;color:var(--faint);font-size:10px;line-height:1.7}
.settings-panel .notice { margin:16px 0}
.toast { position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--text);border:1px solid var(--line-strong);border-radius:10px;padding:12px 20px;box-shadow:0 8px 40px #16223814;color:var(--text);font-size:12px;max-width:calc(100% - 40px);z-index:100}
.busy { opacity:.7}
::selection { background:#3569df29;color:#ffffff}
::-webkit-scrollbar { width:7px;height:7px}
::-webkit-scrollbar-thumb { background:var(--line-strong);border-radius:5px}
::-webkit-scrollbar-track { background:var(--panel-soft)}

@media(min-width:1500px) { .workspace-grid { grid-template-columns:650px minmax(0,1fr)}
}

@media(max-width:1100px) { main { padding:32px 24px 0}
.site-header { padding:0 24px}
.panel { padding:22px}
.intro h1 { font-size:29px}
.source-summary { min-width:150px}
.capture-controls { gap:8px}
.capture-controls .button { font-size:11px;padding:9px 10px}
.form-grid { gap:14px 10px}
.protection-row { gap:11px}
.owned-heroes { grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:820px) { .workspace-grid { grid-template-columns:1fr}
.intro { align-items:flex-start}
.source-summary { padding-left:18px}
.settings-grid { grid-template-columns:1fr}
.owned-heroes { grid-template-columns:repeat(3,minmax(0,1fr))}
.empty-result { min-height:240px}
.results-column { gap:20px}
.site-footer { flex-direction:column;gap:4px}
.header-actions { gap:12px}
.local-badge { display:none}
.history-panel { margin-top:20px}
}

@media(max-width:520px) { main { padding:25px 14px 0}
.site-header { height:68px;padding:0 14px}
.brand { font-size:13px;gap:8px}
.brand-mark { width:32px;height:32px;font-size:23px}
.header-actions .button { font-size:10px;padding:8px;min-height:34px}
.intro { display:block;margin-bottom:24px}
.intro h1 { font-size:25px}
.intro p { font-size:12px;line-height:1.8}
.source-summary { margin-top:16px;border-left:0;padding-left:0;display:flex;align-items:center;gap:10px}
.source-summary strong { margin-bottom:0;font-size:11px}
.source-summary span { font-size:10px}
.panel { padding:19px 16px}
.section-heading { margin-bottom:20px}
.section-heading .text-button { font-size:10px}
.eyebrow { font-size:9px;letter-spacing:1.7px}
h2 { font-size:17px}
.capture-area { padding:12px}
.capture-controls { flex-direction:column}
.capture-controls .button { font-size:12px}
.form-grid { grid-template-columns:repeat(2,minmax(0,1fr))}
.form-divider { align-items:flex-start}
.form-divider>span:last-child { max-width:140px;text-align:right;line-height:1.7}
.mainstat-row { padding:12px;grid-template-columns:1.3fr 1fr}
.substat-row { grid-template-columns:20px 1.4fr 1fr;gap:7px}
.substat-row .substat-index { width:20px;height:20px}
.substats-heading>span { font-size:9px}
.decision-top h3 { font-size:21px}
.decision-banner { padding:16px}
.settings-panel { padding:20px 16px}
.owned-heroes { grid-template-columns:repeat(2,minmax(0,1fr))}
.history-row { gap:9px;padding:11px 10px}
.history-gear { font-size:11px}
.history-decision { font-size:10px}
.history-row .text-button { font-size:10px}
.image-toolbar { flex-direction:column;align-items:flex-start}
.analysis-steps { gap:12px}
}

.speed-grid { display:grid;grid-template-columns:56px repeat(6,minmax(0,1fr));gap:5px;margin-top:12px;align-items:center}
.speed-grid input { height:32px;padding:5px 3px;margin:0;font-size:10px;text-align:center}
.speed-label { font-size:9px;color:var(--muted);text-align:center}
.speed-settings summary { color:var(--accent)}
.capture-area.dragging { border-color:var(--accent);background:var(--blue-soft)}

.weight-legend { display:flex;gap:12px;align-items:center;color:var(--faint);font-size:9px;margin:-5px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.weight-legend b { font-weight:500;color:var(--accent)}

.capture-area:focus-visible { outline:2px solid var(--accent);outline-offset:3px}
.paste-help { display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 12px;color:var(--accent);font-size:12px}
.paste-help strong { font-weight:600}
.paste-help>span { white-space:nowrap;color:var(--muted);font-size:11px}
.paste-help kbd { font-family:inherit;font-size:11px;padding:3px 6px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;background:var(--panel-soft);color:var(--text)}

.site-footer { align-items:center}
.site-footer .button { font-size:10px;min-height:32px;padding:6px 12px;white-space:nowrap}
.spinner { display:inline-block;width:12px;height:12px;border:2px solid #cdd8e680;border-top-color:var(--accent);border-radius:50%;animation:spinner-turn .8s linear infinite}
@keyframes spinner-turn { to { transform:rotate(360deg)}
}
@media(prefers-reduced-motion:reduce) { .spinner { animation:none}
}

.equipment-panel .form-grid { grid-template-columns:repeat(2,minmax(0,1fr))}
.speed-projection { margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft)}
.projection-top { display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
.projection-value { font-size:28px;font-weight:700;line-height:1.2;color:var(--accent)}
.speed-projection.low .projection-value { color:var(--amber)}
.projection-formula { margin:8px 0;font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}
.projection-status { font-size:12px;color:var(--accent)}
.speed-projection.low .projection-status { color:var(--amber)}
.projection-alternative { font-size:12px;line-height:1.6;color:var(--text);margin:8px 0}
.speed-projection .field-help { margin:8px 0 0}

.decision-use { display:grid;gap:2px;margin-top:14px;padding:12px 14px;border-left:3px solid var(--green);background:var(--green-soft);border-radius:5px}
.decision-use.speed-trial { border-color:var(--accent);background:var(--amber-soft)}
.decision-use .field-help { margin:0}
.decision-use strong { font-size:12px}
.rule-notes { display:grid;gap:8px;margin-top:14px}
.rule-note { padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:var(--panel-soft)}
.rule-note strong { font-size:11px;color:var(--text)}
.rule-note p { font-size:11px;color:var(--muted);line-height:1.8;margin:4px 0 0}
.rule-note.candidate { border-color:var(--amber-border);background:var(--amber-soft)}
.rule-note.candidate strong { color:var(--accent)}
.meta-note { font-size:10px;color:var(--faint);line-height:1.8;margin:-6px 0 16px}
.hero-card.decision-driver { border-color:var(--green-border);background:var(--green-soft)}
.hero-card.comparison-only { border-style:dashed}
.hero-badge.comparison { color:var(--muted);background:var(--panel-soft);border-color:var(--line)}
.hero-badge.meta { color:var(--amber);background:var(--amber-soft);border-color:var(--amber-border)}
.hero-badge.critical-missing { color:var(--amber);background:var(--amber-soft);border-color:var(--amber-border)}
.critical-fit { padding:10px 12px;margin-top:12px;border:1px solid var(--line);border-radius:6px;background:var(--panel-soft)}
.critical-fit.missing { border-color:var(--amber-border);background:var(--amber-soft)}
.critical-fit strong { font-size:11px;color:var(--blue)}
.critical-fit p { font-size:11px;color:var(--muted);line-height:1.8;margin:4px 0 0}
.priority-distribution { font-size:10px;color:var(--blue);margin:10px 0 0;line-height:1.8}
.weights-label { font-size:9px;color:var(--faint);align-self:center}
.priority-source { font-size:9px;color:var(--faint);margin:5px 0 0;line-height:1.7}

.hero-meta { font-size:10px;padding-top:9px;border-top:1px solid var(--line)}
.hero-meta summary { color:var(--blue)}
.hero-meta p { margin:6px 0 0;color:var(--muted);font-variant-numeric:tabular-nums}
.hero-meta a { display:inline-block;margin-top:7px;color:var(--blue);text-decoration:underline;text-underline-offset:3px}

.score-legend { font-size:10px;color:var(--faint);line-height:1.7;margin:-6px 0 17px;padding-bottom:12px;border-bottom:1px solid var(--line)}

.score-card { padding:18px}
.score-card .hero-build { line-height:1.8;margin-top:5px}
.score-card .fit-score { font-size:32px;line-height:1.05;color:var(--text)}
.score-card .fit-score small { font-size:9px;margin-top:7px;color:var(--muted)}

.hero-score-summary { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;padding:10px 12px;border-radius:6px;background:var(--amber-soft);border:1px solid var(--amber-border)}
.hero-score-summary.keep { background:var(--green-soft);border-color:var(--green-border)}
.hero-score-summary.stop { background:var(--red-soft);border-color:var(--red-border)}
.score-action { font-size:12px;color:var(--accent);white-space:nowrap}
.keep .score-action { color:var(--green)}
.stop .score-action { color:var(--red)}
.score-comparison { font-size:10px;color:var(--muted);line-height:1.6;font-variant-numeric:tabular-nums;text-align:right}
.score-reason { font-size:11px;color:var(--text);margin:10px 0 0;line-height:1.7}
.hero-score-summary.compact { padding:8px 10px;margin-top:10px}

.stage-thresholds { margin-top:16px}
.thresholds-title { display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted);margin-bottom:8px}
.thresholds-title>span:last-child { font-size:9px;color:var(--faint)}
.threshold-chips { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.threshold-chip { text-align:center;padding:7px 3px;background:var(--panel-soft);border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:9px;font-variant-numeric:tabular-nums}
.threshold-chip strong { display:block;margin-top:4px;color:var(--text);font-size:11px;font-weight:600;white-space:nowrap}
.threshold-chip.current { background:var(--blue-soft);border-color:var(--blue-border);color:var(--accent)}
.threshold-chip.current strong { color:var(--accent)}

.score-evidence { border-top:1px solid var(--line);margin-top:16px;padding-top:11px;font-size:11px}
.score-evidence>summary { color:var(--muted);line-height:1.6}
.score-evidence[open]>summary { margin-bottom:14px;color:var(--accent)}
.evidence-title { font-size:11px;color:var(--text);margin:15px 0 7px;font-weight:600}
.evidence-note { font-size:10px;line-height:1.8;color:var(--muted);margin:7px 0 0}
.evidence-list { font-size:10px;line-height:1.8;color:var(--muted);padding-left:18px;margin:7px 0}
.stat-score-table { border-collapse:collapse;width:100%;font-size:10px;font-variant-numeric:tabular-nums}
.stat-score-table th,.stat-score-table td { padding:7px 4px;text-align:left;border-bottom:1px solid var(--line)}
.stat-score-table th { color:var(--faint);font-weight:400}
.stat-score-table td { color:var(--muted)}
.stat-score-table td:last-child,.stat-score-table th:last-child { text-align:right}
.stat-score-table td:last-child { color:var(--accent)}
.alternative-build { margin-top:10px;padding:12px;border:1px solid var(--line);background:var(--panel-soft);border-radius:7px}
.alternative-build-top { display:flex;justify-content:space-between;gap:12px;color:var(--text);font-size:11px}
.alternative-build-top>span { color:var(--accent);font-variant-numeric:tabular-nums}
.alternative-build-summary { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}

.decision-score-top { display:flex;justify-content:space-between;align-items:center;gap:14px}
.decision-score-top>div { display:grid;gap:3px}
.decision-score strong.decision-score-value { font-size:24px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.decision-score .score-reason { margin-top:8px}
.decision-score:has(.hero-score-summary.stop) { border-left-color:var(--red);background:var(--red-soft)}
.decision-score:has(.hero-score-summary.hold) { border-left-color:var(--accent);background:var(--amber-soft)}
.result-details { margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.result-details>summary { font-size:11px;color:var(--muted)}
.result-brief { font-size:12px;line-height:1.7;color:var(--red);margin:14px 0 0}
.meta-note>summary { color:var(--faint)}
.meta-note p { margin:7px 0 0}

.score-settings { padding:13px;background:var(--panel-soft);border:1px solid var(--line);border-radius:8px}
.score-settings>.evidence-title { display:block;margin:0 0 10px}
.score-setting-grid { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.score-setting-grid label { font-size:10px;text-align:center;color:var(--muted)}
.score-setting-grid input { margin-top:5px;padding:6px 3px;height:34px;text-align:center;font-size:11px}
.advanced-settings { border-top:1px solid var(--line);padding-top:12px}
.advanced-settings>summary { color:var(--accent);font-size:11px}
.advanced-settings>.threshold-row { margin-top:15px}
.advanced-settings .critical-settings,.advanced-settings .speed-settings { margin-top:20px}
.advanced-settings .evidence-title { display:block}

@media(max-width:520px) { .score-card { padding:15px}
.score-card .fit-score { font-size:29px}
.hero-score-summary { flex-wrap:wrap;padding:9px 10px}
.score-comparison { text-align:left}
.threshold-chips { gap:3px}
.threshold-chip { padding:7px 1px}
.threshold-chip strong { font-size:10px}
.thresholds-title { font-size:9px;gap:5px}
.thresholds-title>span:last-child { font-size:8px}
.score-setting-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 6px}
.score-settings { padding:12px}
.decision-score-top { align-items:flex-start}
.decision-score strong.decision-score-value { font-size:22px}
}

.gear-score-overview { margin-top:14px;padding:15px;border:1px solid var(--line);border-radius:9px;background:var(--panel-soft)}
.gear-score-values { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gear-score-metric { display:grid;gap:5px;font-size:10px;color:var(--muted)}
.gear-score-metric strong { font-size:25px;line-height:1.2;color:var(--accent);font-variant-numeric:tabular-nums}
.gear-score-metric.game { border-left:1px solid var(--line);padding-left:16px}
.gear-score-metric.game strong { color:var(--text)}
.completed-score-review { display:grid;gap:3px;border-top:1px solid var(--line);padding-top:11px;margin-top:13px}
.completed-score-review strong { font-size:12px;color:var(--muted)}
.completed-score-review.applied strong { color:var(--accent)}
.completed-score-review span,.completed-score-review p { font-size:10px;color:var(--muted);line-height:1.7;margin:0}
.common-score-evidence { font-size:10px;margin-top:11px}
.common-score-evidence>summary { color:var(--faint)}
.common-score-evidence[open]>summary { margin-bottom:9px}
.threshold-note { font-size:9px;color:var(--faint);line-height:1.7;margin:6px 0 0}

.score-caution { font-size:10px;color:var(--accent);line-height:1.7;margin:8px 0 0;padding-left:10px;border-left:2px solid var(--blue-border)}

.opener-speed-inputs { margin-top:20px;padding:13px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel-soft)}
.opener-speed-inputs>summary { font-size:12px;color:var(--text);font-weight:500}
.opener-speed-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.opener-speed-goal { font-size:11px;line-height:1.7;color:var(--accent);margin:11px 0 0}
.opener-speed-inputs .field-help { line-height:1.8}
.opener-speed-inputs input::placeholder { font-size:10px}

.score-point-comparison { font-size:10px;color:var(--muted);line-height:1.7;margin:7px 0 0;font-variant-numeric:tabular-nums}

.contribution-summary { display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 0;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums;line-height:1.7}
.contribution-summary.compact { margin-top:6px}
.score-components { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 }
.score-component { display:grid;gap:5px;padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:var(--panel-soft) }
.score-component span { color:var(--muted);font-size:11px;line-height:1.6;word-break:keep-all }
.score-component strong { color:var(--text);font-size:17px;font-variant-numeric:tabular-nums }
.score-component.excluded strong { color:var(--faint) }
.score-components.compact { margin:8px 0 }
.speed-fit-summary { margin-top:12px;padding:10px 12px;border-left:2px solid var(--blue-border);background:var(--blue-soft);border-radius:4px }
.speed-fit-summary>strong { color:var(--blue);font-size:11px }
.speed-fit-summary p { margin:5px 0 0;font-size:11px;line-height:1.7 }
.speed-fit-note,.hero-scope-note { color:var(--muted);font-size:11px;line-height:1.7 }
.hero-scope-note { margin:8px 0 0 }
.scope-notice .equipment-use-candidates { margin-top:6px;color:var(--text);font-weight:600 }
.critical-chance-comparison { font-size:10px;color:var(--blue);line-height:1.7;margin:6px 0 0;font-variant-numeric:tabular-nums}
.decision-contribution-value { display:grid;justify-items:end;gap:3px}
.decision-contribution-value .field-help { font-size:9px;text-align:right}
.stat-kind { display:block;font-size:9px;color:var(--faint);margin-bottom:2px}
.stat-conversion-note { display:block;font-size:9px;color:var(--faint);line-height:1.6;margin-top:3px}
.contribution-table td { vertical-align:top}
.critical-chance-context { margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.critical-chance-context>strong { font-size:11px;color:var(--text);font-weight:500}
.critical-chance-context .opener-speed-grid { margin-top:8px}
.critical-chance-context .optional { display:block;margin:2px 0 0}
.critical-chance-context input:disabled { opacity:.5;cursor:not-allowed}

.speed-budget-preview { margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:7px;background:var(--panel-soft)}
.speed-budget-preview-top { display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:var(--text)}
.speed-budget-preview-top strong { font-size:24px;line-height:1.2;color:var(--accent);font-variant-numeric:tabular-nums}
.speed-budget-formula { font-size:10px;color:var(--muted);line-height:1.7;margin:8px 0 0;font-variant-numeric:tabular-nums}
.speed-total-label { margin-top:14px}
.speed-score-breakdown { font-size:10px;color:var(--muted);line-height:1.7;margin:8px 0 0;font-variant-numeric:tabular-nums}
.speed-budget-comparison { font-size:11px;color:var(--blue);line-height:1.7;margin:8px 0 0;font-variant-numeric:tabular-nums}
.speed-budget-comparison.below { color:var(--amber)}

.hero-target-reference { margin-top:14px;padding:11px 12px;border:1px solid var(--line);border-radius:7px;background:var(--panel-soft);font-size:11px}
.hero-target-reference>summary { color:var(--blue);line-height:1.6}
.hero-target-reference[open]>summary { margin-bottom:10px}
.hero-target-reference.unavailable>summary { color:var(--muted)}
.hero-target-context { color:var(--text);line-height:1.7;margin:0 0 8px;font-size:10px}
.hero-target-note { color:var(--faint);font-size:9px;line-height:1.8;margin:8px 0 0}
.hero-target-table { width:100%;border-collapse:collapse;font-size:10px;font-variant-numeric:tabular-nums}
.hero-target-table th,.hero-target-table td { padding:6px 3px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.hero-target-table th { font-weight:400;color:var(--faint)}
.hero-target-table td { color:var(--muted)}
.hero-target-table th:first-child,.hero-target-table td:first-child { text-align:left}
.hero-target-table td:nth-child(3) { color:var(--text)}
.hero-target-source { display:inline-block;color:var(--blue);font-size:10px;line-height:1.7;margin-top:9px;text-decoration:underline;text-underline-offset:3px}
.alternative-build .hero-target-reference { padding:9px 10px}
.opener-speed-inputs .hero-target-reference { background:var(--panel-soft)}

@media(max-width:520px) { .hero-target-reference { padding:10px}
.hero-target-table th,.hero-target-table td { padding:6px 2px;font-size:9px}
}

@media(max-width:520px) { .opener-speed-inputs { padding:12px}
.opener-speed-grid { grid-template-columns:1fr;gap:10px}
}

@media(max-width:520px) { .gear-score-overview { padding:12px}
.gear-score-values { gap:12px}
.gear-score-metric strong { font-size:23px}
.gear-score-metric.game { padding-left:12px}
.stat-score-table th,.stat-score-table td { padding:7px 2px;font-size:9px}
}

.hero-spec-panel { margin-bottom:24px;border-color:var(--line);background:linear-gradient(120deg,var(--panel),var(--panel))}
.hero-spec-panel .section-heading { margin-bottom:10px}
.hero-spec-intro { font-size:12px;color:var(--muted);margin:0 0 10px}
.hero-spec-status { font-size:11px;color:var(--blue);margin-bottom:18px;line-height:1.7}
.hero-spec-selection { display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hero-spec-sets { padding:15px 0 0;margin:20px 0 0;border:0;border-top:1px solid var(--line);min-width:0}
.hero-spec-sets legend { padding:0 12px 0 0;color:var(--text);font-size:12px;font-weight:600}
.hero-spec-set-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hero-spec-stats-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 12px;font-size:12px}
.hero-spec-stats-heading>span { font-size:10px;color:var(--faint)}
.hero-spec-stat-cards { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hero-spec-stat-card { padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft);min-width:0}
.hero-spec-stat-top { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.hero-spec-stat-top>strong { font-size:13px;font-weight:600}
.hero-spec-stat-value { font-size:13px;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-spec-target-label { font-size:10px;color:var(--faint)}
.hero-spec-target-controls { display:grid;grid-template-columns:minmax(0,1fr) 86px;align-items:center;gap:10px}
.hero-spec-target-controls input[type=number] { height:35px;padding:6px 8px;margin-top:0;font-size:12px}
.hero-spec-target-controls .hero-spec-clear { grid-column:2;justify-self:end;font-size:10px;margin-top:-8px}
.hero-spec-stat-card input[type=range],.hero-spec-condition-card input[type=range] { appearance:auto;display:block;width:100%;height:28px;margin:0;padding:0;border:0;background:transparent;accent-color:var(--accent);cursor:pointer}
.hero-spec-stat-card input[type=range].unset,.hero-spec-condition-card input[type=range].unset { opacity:.5}
.hero-spec-stat-card input[type=range]:disabled,.hero-spec-condition-card input[type=range]:disabled { opacity:.3;cursor:not-allowed}
.hero-spec-mode-label { display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;margin-top:10px;color:var(--faint)}
.hero-spec-mode-label select { width:120px;margin:0;height:33px;font-size:11px;padding:5px 8px}
.hero-spec-priority-label { display:flex;align-items:center;justify-content:space-between;margin-top:6px;font-size:10px;color:var(--muted)}
.hero-spec-priority-value { font-size:11px;color:var(--blue);font-weight:600}
.hero-spec-priority-scale { display:flex;justify-content:space-between;font-size:9px;color:var(--faint);margin-top:-2px}
.hero-spec-stat-notes { margin-top:11px;border-top:1px solid var(--line);padding-top:7px;font-size:10px}
.hero-spec-stat-notes summary { color:var(--faint)}
.hero-spec-stat-notes label { font-size:10px;margin-top:7px}
.hero-spec-stat-notes input { height:33px;font-size:11px}
.hero-spec-notes { padding-top:12px;margin-top:20px;border-top:1px solid var(--line)}
.hero-spec-notes>summary { font-size:11px;color:var(--blue)}
.hero-spec-notes label { margin-top:12px;font-size:11px}
.hero-spec-notes textarea { width:100%;display:block;resize:vertical;min-height:90px;max-height:400px;margin-top:7px;padding:10px;border:1px solid var(--line);border-radius:7px;background:var(--panel-soft);color:var(--text);font:inherit;font-size:12px}
.hero-spec-notes textarea:focus-visible { outline:2px solid var(--accent);outline-offset:3px}
.hero-spec-source-note { font-size:11px;color:var(--muted);white-space:pre-wrap;line-height:1.8;margin:10px 0 0}
.hero-spec-footer { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.hero-spec-footer>span { font-size:11px;color:var(--muted)}
.hero-spec-footer>div { display:flex;align-items:center;gap:10px}

/* A destructive setting action always names its saved hero and set. */
.hero-spec-footer>div { flex-wrap: wrap; }
.button.button-delete { color: var(--red); border: 1px solid var(--line); background: var(--panel); }
.hero-spec-footer .button-delete { margin-right: auto; }
.button.button-delete:hover { border-color: var(--red); background: var(--red-soft); }
.button.button-danger { background: var(--red); border-color: var(--red); color: #fff; }
.hero-spec-delete-confirm { margin-top: 16px; padding: 18px; border: 1px solid var(--red); border-radius: 10px; background: var(--red-soft); }
.hero-spec-delete-confirm h3 { margin: 0 0 8px; font-size: 16px; color: var(--text); }
.hero-spec-delete-confirm strong { display: block; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.hero-spec-delete-confirm p { margin: 8px 0 14px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.hero-spec-delete-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.hero-spec-navigation { padding:13px;border:1px solid var(--blue-border);border-radius:8px;background:var(--amber-soft);margin-bottom:18px}
.hero-spec-navigation p { font-size:12px;color:var(--accent);margin:0 0 10px}
.hero-spec-navigation>div { display:flex;gap:8px;flex-wrap:wrap}
.hero-spec-stat-card input:disabled,.hero-spec-stat-card select:disabled,.hero-spec-condition-card input:disabled,.hero-spec-condition-card select:disabled { opacity:.45}
.user-hero-spec-reference { margin-top:14px;padding:11px 12px;border:1px solid var(--amber-border);border-radius:7px;background:var(--amber-soft);font-size:11px}
.user-hero-spec-reference>summary { color:var(--accent)}
.user-hero-spec-reference .hero-target-table { margin-top:10px}
.user-hero-spec-reference .hero-target-table td:nth-child(3) { color:var(--blue)}

@media(max-width:1200px) { .hero-spec-stat-cards { grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-spec-target-controls { grid-template-columns:minmax(0,1fr) 100px}
}

@media(max-width:700px) { .hero-spec-selection { grid-template-columns:1fr;gap:12px}
.hero-spec-set-grid { grid-template-columns:1fr;gap:10px}
.hero-spec-stats-heading { align-items:flex-start}
.hero-spec-stats-heading>span { text-align:right}
.hero-spec-footer { align-items:flex-start;flex-direction:column;gap:12px}
.hero-spec-footer>div { width:100%;justify-content:flex-end}
.hero-spec-stat-cards { grid-template-columns:1fr 1fr;gap:10px}
.hero-spec-stat-card { padding:13px}
.hero-spec-target-controls { grid-template-columns:1fr;gap:3px}
.hero-spec-target-controls .hero-spec-clear { grid-column:1;margin-top:0}
.hero-spec-mode-label { align-items:flex-start;flex-direction:column;gap:5px}
.hero-spec-mode-label select { width:100%}
.hero-spec-stat-top { gap:5px;flex-direction:column;align-items:flex-start;margin-bottom:10px}
.hero-spec-stat-value { font-size:12px}
.hero-spec-stat-top>strong { font-size:12px}
}

@media(max-width:400px) { .site-header { height:auto;min-height:75px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:8px}
.header-actions { margin-left:auto}
.hero-spec-stat-cards { grid-template-columns:1fr}
.hero-spec-stat-top { flex-direction:row;align-items:center}
.hero-spec-target-controls { grid-template-columns:minmax(0,1fr) 90px}
.hero-spec-target-controls .hero-spec-clear { grid-column:2}
.hero-spec-mode-label { flex-direction:row;align-items:center}
.hero-spec-mode-label select { width:130px}
}

.hero-spec-conditions { margin-top:22px;padding-top:1px;border-top:1px solid var(--line)}
.hero-spec-conditions>.hero-spec-stats-heading { margin-top:18px;margin-bottom:0}
.hero-spec-condition-cards { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.hero-spec-condition-card { min-width:0;padding:15px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft)}
.hero-spec-condition-card>strong { display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:10px}
.hero-spec-condition-card .hero-spec-target-label { margin-bottom:6px}
.hero-spec-condition-card .hero-spec-target-controls { grid-template-columns:minmax(0,1fr) 100px}
.hero-spec-condition-card .field-help { font-size:10px;line-height:1.8;margin-top:12px}
.hero-spec-condition-card .hero-spec-stat-top { margin-bottom:12px}
.hero-spec-condition-card .hero-spec-stat-value { font-size:20px}
.hero-spec-condition-card .hero-spec-mode-label select { width:140px}

@media(max-width:700px) { .hero-spec-condition-cards { grid-template-columns:1fr}
.hero-spec-condition-card { padding:13px}
.hero-spec-condition-card .hero-spec-mode-label { flex-direction:row;align-items:center}
.hero-spec-condition-card .hero-spec-mode-label select { width:140px}
.hero-spec-condition-card .hero-spec-target-controls { grid-template-columns:minmax(0,1fr) 100px;gap:10px}
.hero-spec-condition-card .hero-spec-target-controls .hero-spec-clear { grid-column:2;margin-top:-8px}
}

.hero-spec-alternative-values { display:flex;align-items:center;gap:12px;margin:5px 0 8px;font-size:10px;color:var(--faint)}
.hero-spec-alternative-values button { font-size:11px;border:1px solid var(--amber-border);border-radius:5px;padding:2px 7px;background:var(--amber-soft)}

.hero-spec-panel.read-only .hero-spec-stat-card input:disabled,.hero-spec-panel.read-only .hero-spec-stat-card select:disabled,.hero-spec-panel.read-only .hero-spec-condition-card input:disabled,.hero-spec-panel.read-only .hero-spec-condition-card select:disabled,.hero-spec-panel.read-only .hero-spec-set-grid select:disabled,.hero-spec-panel.read-only .hero-spec-notes textarea:disabled { opacity:1;cursor:default}
.hero-spec-panel.read-only .hero-spec-stat-card input[type=range]:disabled,.hero-spec-panel.read-only .hero-spec-condition-card input[type=range]:disabled { opacity:.7}
.hero-spec-panel.read-only .hero-spec-clear { visibility:hidden}
.hero-spec-panel.read-only .hero-spec-alternative-values button:disabled { opacity:1;cursor:default}


.searchable-select { display:block;position:relative;width:100%;min-width:0;margin-top:6px}
.searchable-select .searchable-input { width:100%;height:41px;margin:0;padding:8px 38px 8px 10px;font-size:12px;background:var(--panel-soft);color:var(--text)}
.searchable-select .searchable-input[aria-expanded=true] { border-color:var(--blue-border)}
.searchable-toggle { position:absolute;right:1px;top:1px;display:grid;place-items:center;width:34px;height:39px;padding:0;border:0;border-radius:0 6px 6px 0;background:transparent;color:var(--muted);font-size:12px;line-height:1;cursor:pointer}
.searchable-toggle:hover:not(:disabled) { background:var(--blue-soft);color:var(--text)}
.searchable-toggle:focus-visible { outline-offset:-4px}
.searchable-options { position:absolute;left:0;top:calc(100% + 5px);width:100%;min-width:100%;max-height:240px;overflow:auto;overscroll-behavior:contain;padding:5px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel-soft);box-shadow:0 12px 28px #16223814;z-index:120}
.searchable-option { display:block;width:100%;margin:0;padding:9px 10px;border:0;border-radius:5px;background:transparent;color:var(--text);text-align:left;font:inherit;font-size:12px;line-height:1.55;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.searchable-option:hover,.searchable-option.active,.searchable-option[aria-current=true] { background:var(--blue-soft);color:var(--text)}
.searchable-option.selected,.searchable-option[aria-selected=true] { background:var(--blue-soft);color:var(--accent)}
.searchable-option.selected:hover,.searchable-option[aria-selected=true]:hover,.searchable-option.selected.active,.searchable-option[aria-selected=true].active { background:var(--blue-soft);color:var(--blue)}
.searchable-empty { padding:11px 10px;color:var(--faint);font-size:11px;line-height:1.7}
.searchable-select .searchable-input:disabled { opacity:.5;cursor:not-allowed}
.searchable-toggle:disabled,.searchable-option:disabled { cursor:not-allowed;opacity:.5}
.searchable-select.disabled .searchable-input { opacity:.5;cursor:not-allowed}
.searchable-select.disabled .searchable-toggle { cursor:not-allowed;opacity:.5}
.substat-row .searchable-select { margin-top:0}
.substat-row .searchable-input { margin:0}
.hero-spec-panel.read-only .hero-spec-set-grid .searchable-input:disabled { opacity:1;cursor:default}
.hero-spec-panel.read-only .hero-spec-set-grid .searchable-toggle:disabled { opacity:.6;cursor:default}

@media(max-width:520px) { .searchable-select .searchable-input,.searchable-option { font-size:11px}
.searchable-option { padding:10px 8px}
}

/* Selected light design: layout and primary workflow. */
body {
  background: var(--bg);
  line-height: 1.6;
}
button, input, select, textarea { font: inherit; }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, textarea:focus-visible {
  outline: 3px solid #3569df66;
  outline-offset: 3px;
}
.site-header {
  min-height: 72px;
  height: 72px;
  padding: 0 max(28px, calc((100vw - 1384px) / 2));
  background: var(--panel);
  box-shadow: 0 1px 8px #16223803;
}
.brand { gap: 12px; font-size: 20px; font-weight: 700; letter-spacing: -.8px; }
.brand-mark {
  width: 42px;
  height: 42px;
  border-color: var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  color: #b68c49;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-mark img { width: 58px; height: 58px; display: block; object-fit: contain; flex-shrink: 0; }
.header-actions { gap: 20px; height: 100%; }
.header-nav { display: flex; align-items: stretch; gap: 24px; height: 100%; }
.site-header>.header-nav { margin-left: auto; margin-right: 24px; }
.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.nav-button:hover, .nav-button.active, .nav-button[aria-expanded=true] { color: var(--blue); }
.nav-button.active { border-bottom-color: var(--blue); }
.header-divider { height: 24px; border-left: 1px solid var(--line); }
.header-settings { width: 40px; padding: 7px; border: 0; font-size: 22px; color: var(--muted); background: transparent; }
.header-settings:hover { color: var(--blue); background: var(--blue-soft); }
.site-header .icon-button { background: transparent; width: 40px; height: 40px; display: grid; place-items: center; }
.site-header .icon-button:hover { background: var(--blue-soft); }
.local-badge { font-size: 11px; }
main { max-width: 1440px; padding: 28px 28px 0; }
.intro { align-items: flex-end; margin-bottom: 24px; }
.intro h1 { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.3; margin-bottom: 8px; letter-spacing: -1.8px; }
.intro p { font-size: 15px; line-height: 1.75; }
.eyebrow { display: none; }
.source-summary { min-width: auto; border: 0; padding: 0 0 3px; text-align: right; }
.source-summary strong { font-size: 13px; color: var(--muted); font-weight: 500; }
.source-summary span { font-size: 11px; }
.workspace-grid { grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); gap: 24px; }
.panel { padding: 24px; background: var(--panel); border-color: #e6edf5; box-shadow: 0 3px 18px #16223803; }
.section-heading { margin-bottom: 20px; }
h2 { font-size: 25px; letter-spacing: -.8px; }
.button { font-size: 13px; border-radius: 7px; }
.button-primary { background: var(--blue); border-color: var(--blue); color: #ffffff; }
.button-primary:hover:not(:disabled) { background: var(--blue-hover); border-color: var(--blue-hover); }
.button-secondary { background: var(--panel); border-color: var(--blue-border); color: var(--blue); }
.button-secondary:hover:not(:disabled) { background: var(--blue-soft); border-color: var(--blue); }
.button-quiet { color: var(--muted); }
.button-quiet:hover:not(:disabled) { background: var(--panel-soft); color: var(--text); }
.text-button { color: var(--blue); font-size: 12px; font-weight: 500; }
.text-button:hover { color: var(--blue-hover); }
.icon-button { background: var(--panel-soft); color: var(--muted); }
.capture-area { padding: 16px; margin-bottom: 18px; border-color: var(--line-strong); background: var(--panel-soft); }
.capture-area.dragging { background: var(--blue-soft); border-color: var(--blue); }
.paste-help { color: var(--text); font-size: 13px; }
.paste-help>span { font-size: 12px; }
.paste-help kbd { font-size: 12px; padding: 4px 7px; background: var(--panel); border-color: var(--line); }
.capture-controls { gap: 8px; }
.capture-controls .button { min-height: 40px; padding: 8px 10px; font-size: 12px; }
.capture-controls .button span { font-size: 16px; }
.capture-status { font-size: 12px; }
.field-help { font-size: 11px; line-height: 1.7; }
.image-preview { margin-top: 12px; border-color: var(--line); background: var(--panel); }
.crop-stage { background: repeating-conic-gradient(#eef2f6 0% 25%, #f8fafc 0% 50%) 50% / 16px 16px; min-height: 100px; max-height: 190px; }
.crop-stage img { max-height: 190px; }
.crop-stage.cropping { max-height: 520px; min-height: 160px; }
.crop-stage.cropping img { max-height: 520px; }
.crop-selection { background: #3569df1a; }
.image-toolbar { background: var(--panel); font-size: 11px; }
.image-toolbar .text-button { font-size: 11px; }
.capture-area:has(.image-preview:not([hidden])) {
  display: grid;
  grid-template-columns: minmax(0, .38fr) minmax(0, .62fr);
  gap: 8px 14px;
  align-items: start;
}
.capture-area:has(.image-preview:not([hidden]))>.paste-help { grid-column: 2; grid-row: 1; flex-wrap: wrap; margin: 0; }
.capture-area:has(.image-preview:not([hidden]))>.capture-controls { grid-column: 2; grid-row: 2; flex-direction: column; }
.capture-area:has(.image-preview:not([hidden]))>#capture-help { grid-column: 2; grid-row: 3; margin: 0; font-size: 10px; }
.capture-area:has(.image-preview:not([hidden]))>.image-preview { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
.capture-area:has(.image-preview:not([hidden]))>.image-preview .image-toolbar { flex-direction: column; align-items: flex-start; gap: 6px; padding: 7px; }
.capture-area:has(.image-preview:not([hidden]))>.image-preview .image-toolbar>span { display: none; }
.capture-area:has(.image-preview:not([hidden]))>.image-preview .image-toolbar>div { gap: 5px 9px; }
.capture-area:has(.image-preview:not([hidden]))>details,
.capture-area:has(.image-preview:not([hidden]))>.capture-status { grid-column: 1 / -1; }
.capture-area:has(.crop-stage.cropping) { display: block; }
.capture-area:has(.crop-stage.cropping)>.paste-help { margin-bottom: 12px; }
.capture-area:has(.crop-stage.cropping)>.capture-controls { flex-direction: row; }
.capture-area:has(.crop-stage.cropping)>#capture-help { margin-top: 8px; }
.capture-area:has(.crop-stage.cropping)>.image-preview { margin-top: 14px; }
.capture-area:has(.crop-stage.cropping)>.image-preview .image-toolbar { flex-direction: row; align-items: center; }
.capture-area:has(.crop-stage.cropping)>.image-preview .image-toolbar>span { display: block; }
details { font-size: 12px; }
summary { padding: 2px 0; }
pre { font-size: 12px; background: var(--panel-soft); border: 1px solid var(--line); }
.form-divider { margin-bottom: 12px; font-size: 13px; }
.form-divider>span:last-child { font-size: 11px; }
label, .field-label { color: var(--muted); font-size: 13px; }
.form-grid { gap: 12px 16px; }
input:not([type=checkbox]), select { height: 42px; background: var(--panel-soft); border-color: var(--line); padding: 8px 11px; color: var(--text); font-size: 14px; }
input::placeholder { color: var(--faint); font-size: 12px; }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:disabled, select:disabled, textarea:disabled { background: #f1f4f8; }
.optional { font-size: 11px; }
.field-icon { width: 20px; height: 20px; margin-right: 5px; vertical-align: middle; object-fit: contain; }
.icon-field { position: relative; }
.icon-field .field-icon { position: absolute; left: 11px; top: 36px; margin: 0; z-index: 2; pointer-events: none; }
.icon-field:has(.field-icon:not([hidden])) .searchable-input,
.icon-field:has(.field-icon:not([hidden]))>select { padding-left: 40px; }
.asset-icon { width: 22px; height: 22px; object-fit: contain; display: inline-block; vertical-align: middle; }
.ui-icon { width: 22px; height: 22px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.button-primary .ui-icon, .decision-top>span .ui-icon { filter: brightness(0) invert(1); }
.button .ui-icon { width: 19px; height: 19px; }
.evaluate-button .ui-icon { width: 21px; height: 21px; }
img[src^="/assets/slots/"], img[src^="/assets/stats/"] { filter: brightness(0); opacity: .7; }
.mainstat-row { padding: 0; margin-top: 14px; border: 0; background: transparent; gap: 16px; }
.mainstat-row>label:first-child { color: var(--muted); }
.substats-heading { margin: 16px 0 9px; }
.substats-heading>span { font-size: 11px; }
.substats { gap: 7px; }
.substat-row { grid-template-columns: 20px minmax(0, 1.35fr) minmax(0, .85fr); gap: 7px; }
.substat-row .substat-index { border: 0; width: 20px; background: var(--panel-soft); }
.input-score-summary { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.input-score-summary strong { color: var(--text); font-size: 20px; font-variant-numeric: tabular-nums; }
.evaluate-button { justify-content: center; gap: 10px; margin-top: 16px; min-height: 46px; padding: 11px 16px; font-size: 15px; }
.evaluate-button>span:last-child { font-size: 20px; }
.form-error { background: var(--red-soft); color: var(--red); border-color: var(--red-border); }
.results-column { gap: 20px; }
.result-tag, .count-pill { font-size: 12px; padding: 5px 11px; color: var(--muted); border: 0; background: var(--panel-soft); }
.result-tag.complete, .result-tag.completed, .result-tag[data-state=complete] { background: #dcf7ee; color: var(--green); }
.empty-result { min-height: 265px; }
.empty-glyph { color: var(--blue); border-color: var(--blue-border); background: var(--blue-soft); box-shadow: none; }
.empty-result h3 { font-size: 18px; }
.empty-result p { font-size: 13px; }
.analysis-steps { font-size: 12px; }
.decision-banner { padding: 20px; border-color: var(--green-border); background: linear-gradient(115deg, #effbf7, #f5fcfa); }
.decision-banner.hold { border-color: var(--amber-border); background: var(--amber-soft); }
.decision-banner.sell { border-color: var(--red-border); background: var(--red-soft); }
.decision-banner.invalid { border-color: var(--line); background: var(--panel-soft); }
.decision-top { gap: 15px; }
.decision-top>span { width: 60px; height: 60px; border: 0; border-radius: 50%; font-size: 33px; color: #ffffff; background: linear-gradient(135deg, #20bd96, #009c78); flex-shrink: 0; }
.hold .decision-top>span { color: #ffffff; background: #c89230; }
.sell .decision-top>span { color: #ffffff; background: #ce6464; }
.invalid .decision-top>span { color: var(--muted); background: var(--line); }
.decision-label { font-size: 11px; }
.decision-top h3 { font-size: 25px; letter-spacing: -.8px; }
.item-summary { color: var(--muted); font-size: 13px; border: 0; margin-top: 4px; padding-top: 0; }
.hold .item-summary { border-color: var(--amber-border); }
.sell .item-summary { border-color: var(--red-border); }
.decision-summary { margin: 8px 0 0 75px; font-size: 13px; color: var(--text); }
.decision-caution { display: flex; align-items: center; gap: 7px; color: var(--amber); font-size: 12px; line-height: 1.7; margin: 10px 0 0; }
.decision-caution .ui-icon { width: 18px; height: 18px; }
.decision-featured { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--green-border); }
.decision-featured[hidden] { display: none; }
.enhancement-routes { margin-top:16px; }
.enhancement-routes-table { width:100%;border-collapse:collapse;font-size:12px;line-height:1.65; }
.enhancement-routes-table+table { margin-top:14px; }
.enhancement-routes-table caption { text-align:left;font-size:13px;font-weight:700;padding:0 0 6px;color:var(--text); }
.enhancement-routes-table th { text-align:left;font-weight:400;font-size:10px;color:var(--muted);padding:0 5px 6px; }
.enhancement-routes-table td { border-top:1px solid var(--line);padding:8px 5px;vertical-align:top;word-break:keep-all;overflow-wrap:anywhere; }
.enhancement-route-stage { width:44px;white-space:nowrap;color:var(--muted);font-size:11px; }
.enhancement-route-goal { font-weight:600; }
.enhancement-route-heroes { width:108px;font-size:11px;color:var(--muted); }
.enhancement-route-relation,.enhancement-route-condition { display:block;font-size:10px;font-weight:400;color:var(--muted); }
.enhancement-routes-more { display:block;margin-top:9px;font-size:11px; }
.decision-featured:has(.decision-hero[hidden]):has(.decision-metrics[hidden]) { display: none; }
.hold .decision-featured { border-top-color: var(--amber-border); }
.sell .decision-featured { border-top-color: var(--red-border); }
.decision-hero, .recommended-hero { display: flex; align-items: center; gap: 12px; min-width: 0; }
.decision-hero { flex: 1.15; }
.hero-avatar { width: 52px; height: 52px; object-fit: cover; object-position: center; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); flex-shrink: 0; }
.decision-hero .hero-avatar { width: 68px; height: 68px; }
.decision-hero strong { display: block; font-size: 15px; line-height: 1.6; }
.decision-hero small { display: block; font-size: 12px; color: var(--muted); line-height: 1.6; }
.recommended-hero-copy { min-width: 0; }
.recommended-hero-copy>span { display: block; font-size: 11px; color: var(--muted); }
.recommended-hero-copy>strong { display: block; color: var(--text); font-size: 15px; line-height: 1.5; }
.recommended-hero-copy .hero-build { color: var(--muted); font-size: 12px; }
.decision-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; flex: 1.7; min-width: 0; }
.decision-metric { display: grid; gap: 8px; padding-left: 14px; border-left: 1px solid var(--green-border); min-width: 0; }
.decision-metric>span, .decision-metric>small { font-size: 11px; color: var(--muted); line-height: 1.6; }
.decision-metric strong { font-size: 26px; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.decision-metric:first-child strong { color: var(--blue); }
.decision-reasons li { color: var(--muted); font-size: 12px; }
.result-details { font-size: 12px; }
.result-details>summary { font-size: 12px; }
.result-footer { margin-top: 18px; padding-top: 14px; }
.result-footer>span { font-size: 11px; }
.notice { color: var(--muted); background: var(--blue-soft); border-color: var(--blue-border); font-size: 12px; }
.notice.warning { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-border); }
.decision-use { background: var(--green-soft); }
.decision-use.speed-trial { background: var(--amber-soft); border-left-color: var(--amber); }
.decision-use strong { font-size: 13px; }
.speed-projection, .rule-note, .gear-score-overview, .alternative-build, .opener-speed-inputs, .hero-target-reference, .speed-budget-preview, .critical-fit { background: var(--panel-soft); border-color: var(--line); }
.projection-value, .gear-score-metric strong { color: var(--blue); }
.gear-score-metric.game strong { color: var(--text); }
.rule-note strong, .hero-target-context, .evidence-title { color: var(--text); }
.decision-score:has(.hero-score-summary.stop) { background: var(--red-soft); }
.decision-score:has(.hero-score-summary.hold) { background: var(--amber-soft); }
.recommendation-caption { font-size: 12px; margin: -7px 0 12px; }
.score-legend { font-size: 11px; line-height: 1.75; margin: 0 0 14px; }
.recommendation-list { gap: 0; }
.recommendation-table-heading { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, .85fr) 18px; gap: 12px; padding: 0 0 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.recommendation-columns { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, .85fr) 18px; gap: 12px; padding: 0 0 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.score-guide { margin: 0 0 18px; padding: 10px 12px; background: var(--panel-soft); border-radius: 6px; }
.score-guide>summary { color: var(--muted); font-size: 12px; }
.score-guide .score-legend { margin: 10px 0 0; padding: 0; border: 0; }
.score-guide .meta-note { margin: 10px 0 0; }
.recommendation-row { border-bottom: 1px solid var(--line); background: var(--panel); }
.recommendation-row:last-child { border-bottom: 0; }
.recommendation-row.decision-driver { background: var(--panel); border-color: var(--line); }
.recommendation-toggle { margin: 0; color: var(--text); }
.recommendation-summary { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, .85fr) 18px; gap: 12px; align-items: center; padding: 16px 0; min-height: 88px; list-style: none; font-size: 13px; border-radius: 6px; }
.recommendation-summary::-webkit-details-marker { display: none; }
.recommendation-summary:hover { background: var(--panel-soft); }
.recommendation-summary .hero-name { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.recommendation-summary .hero-build { font-size: 11px; line-height: 1.6; }
.recommendation-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.recommendation-name { min-width: 0; }
.recommendation-summary .fit-score { color: var(--blue); font-size: 26px; line-height: 1.15; text-align: left; }
.recommendation-summary .fit-score small { font-size: 10px; line-height: 1.6; color: var(--muted); margin-top: 3px; }
.recommendation-set, .recommended-set { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.recommendation-sets { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; line-height: 1.6; }
.recommendation-sets .asset-icon { width: 20px; height: 20px; margin-right: 3px; }
.recommendation-set .asset-icon, .recommended-set .asset-icon { width: 20px; height: 20px; margin-right: 3px; }
.recommendation-verdict, .recommendation-action { font-size: 11px; line-height: 1.5; font-weight: 600; padding: 7px 9px; background: var(--amber-soft); color: var(--amber); border-radius: 7px; text-align: center; }
.recommendation-verdict.keep, .recommendation-action.keep { color: var(--green); background: #dcf7ee; }
.recommendation-verdict.stop, .recommendation-action.stop { color: var(--red); background: var(--red-soft); }
.recommendation-status { font-size: 11px; line-height: 1.5; font-weight: 600; padding: 7px 9px; background: var(--amber-soft); color: var(--amber); border-radius: 7px; text-align: center; }
.recommendation-status.keep { color: var(--green); background: #dcf7ee; }
.recommendation-status.stop { color: var(--red); background: var(--red-soft); }
.recommendation-status .ui-icon { width: 15px; height: 15px; margin-right: 4px; }
.recommendation-status>span, .alternative-build-status>span { word-break:keep-all;overflow-wrap:anywhere;white-space:normal; }
.recommendation-chevron { width: 18px; color: var(--muted); text-align: center; font-size: 16px; transition: transform .15s; }
.recommendation-toggle[open] .recommendation-chevron { transform: rotate(180deg); }
.recommendation-details { padding: 2px 0 20px; color: var(--muted); }
.recommendation-details .hero-score-summary { margin-top: 0; }
.recommendation-details .score-evidence { font-size: 12px; }
.hero-card { border-color: var(--line); background: var(--panel); margin-bottom: 12px; }
.hero-card.decision-driver { background: var(--green-soft); border-color: var(--green-border); }
.score-card .fit-score { color: var(--blue); }
.hero-score-summary { background: var(--amber-soft); border-color: var(--amber-border); }
.hero-score-summary.keep { background: var(--green-soft); border-color: var(--green-border); }
.hero-score-summary.stop { background: var(--red-soft); border-color: var(--red-border); }
.score-action { color: var(--amber); }
.keep .score-action { color: var(--green); }
.stop .score-action { color: var(--red); }
.score-comparison, .score-reason { color: var(--muted); }
.threshold-chip { background: var(--panel-soft); border-color: var(--line); font-size: 10px; }
.threshold-chip strong { color: var(--text); font-size: 12px; }
.threshold-chip.current { background: var(--blue-soft); border-color: var(--blue-border); color: var(--blue); }
.threshold-chip.current strong { color: var(--blue); }
.stat-score-table, .hero-target-table { font-size: 11px; }
.stat-score-table td { color: var(--text); }
.hero-badge, .weight-pill { background: var(--panel-soft); border-color: var(--line); color: var(--muted); }
.hero-badge.main { background: var(--green-soft); border-color: var(--green-border); color: var(--green); }
.history-panel { margin-top: 24px; }
.history-row { background: var(--panel-soft); border-color: var(--line); }
.history-decision { color: var(--blue); font-size: 12px; }
.history-gear { font-size: 13px; }
.history-gear small { font-size: 11px; }
.small-empty { font-size: 13px; border-color: var(--line); }
.site-footer { color: var(--faint); font-size: 11px; }
.site-footer .button { font-size: 11px; }
.settings-panel, .hero-spec-panel { background: var(--panel); border-color: var(--line); }
.settings-panel { padding: 24px; }
.settings-grid { gap: 24px; }
.owned-heroes { background: var(--panel-soft); }
.owned-heroes .checkbox-label { font-size: 12px; }
.threshold-row label { font-size: 12px; }
.threshold-row p { font-size: 11px; }
.score-settings { background: var(--panel-soft); border-color: var(--line); }
.score-setting-grid label { font-size: 11px; }
.toast { background: var(--panel); border-color: var(--line-strong); color: var(--text); box-shadow: 0 8px 30px #1622381a; font-size: 13px; }
::selection { background: #3569df29; color: var(--text); }
::-webkit-scrollbar-thumb { background: var(--line-strong); }
::-webkit-scrollbar-track { background: var(--panel-soft); }

/* Hero defaults use the same light surfaces and readable weights. */
.hero-spec-intro { font-size: 13px; }
.hero-spec-status { font-size: 12px; }
.hero-spec-sets legend { color: var(--text); font-size: 13px; }
.hero-spec-stats-heading { font-size: 13px; }
.hero-spec-stats-heading>span { font-size: 11px; }
.hero-spec-stat-card, .hero-spec-condition-card { background: var(--panel-soft); border-color: var(--line); padding: 16px; }
.hero-spec-stat-top>strong { font-size: 14px; }
.hero-spec-stat-value { color: var(--blue); }
.hero-spec-priority-label { font-size: 12px; }
.hero-spec-priority-value { font-size: 12px; color: var(--blue); }
.hero-spec-priority-scale { font-size: 11px; margin-top: 2px; }
.hero-spec-condition-card>strong { color: var(--text); font-size: 14px; }
.hero-spec-target-label, .hero-spec-mode-label, .hero-spec-condition-card .field-help { font-size: 12px; }
.hero-spec-navigation { background: var(--amber-soft); border-color: var(--amber-border); }
.hero-spec-navigation p { color: var(--amber); }
.hero-spec-notes textarea { background: var(--panel-soft); border-color: var(--line); font-size: 13px; }
.hero-spec-stat-notes { font-size: 11px; }
.hero-spec-source-note { font-size: 12px; }
.hero-spec-footer>span { font-size: 12px; }
.user-hero-spec-reference { background: var(--blue-soft); border-color: var(--blue-border); }
.hero-spec-alternative-values { font-size: 11px; }
.hero-spec-alternative-values button { background: var(--blue-soft); border-color: var(--blue-border); color: var(--blue); }
.hero-spec-target-controls input[type=number] { background: var(--panel); }

/* Search stays editable and keeps the real select element as its backing control. */
.searchable-select .searchable-input { background: var(--panel-soft); color: var(--text); font-size: 14px; height: 42px; padding-left: 11px; }
.searchable-select .searchable-input[aria-expanded=true] { border-color: var(--blue); background: var(--panel); }
.searchable-toggle { height: 40px; }
.searchable-toggle:hover:not(:disabled) { background: var(--blue-soft); color: var(--blue); }
.searchable-options { background: var(--panel); border-color: var(--line-strong); box-shadow: 0 10px 28px #1622381a; }
.searchable-option { font-size: 13px; padding: 9px 10px; color: var(--text); }
.searchable-option:hover, .searchable-option.active, .searchable-option[aria-current=true] { background: var(--panel-soft); color: var(--text); }
.searchable-option.selected, .searchable-option[aria-selected=true] { background: var(--blue-soft); color: var(--blue); }
.searchable-option.selected:hover, .searchable-option[aria-selected=true]:hover,
.searchable-option.selected.active, .searchable-option[aria-selected=true].active { background: #dce8ff; color: var(--blue-hover); }
.searchable-empty { font-size: 12px; }

@media (min-width: 1500px) {
  .workspace-grid { grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); }
}
@media (max-width: 1200px) {
  .decision-featured { flex-wrap: wrap; gap: 16px; }
  .decision-hero { flex-basis: 100%; }
  .decision-metrics { flex-basis: 100%; }
  .decision-metric:first-child { border-left: 0; padding-left: 0; }
  .recommendation-summary, .recommendation-table-heading { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .6fr) minmax(0, .85fr) 16px; gap: 9px; }
  .recommendation-columns { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .6fr) minmax(0, .85fr) 16px; gap: 9px; }
  .recommendation-summary .hero-avatar { width: 42px; height: 42px; }
  .recommendation-summary .hero-name { font-size: 13px; }
  .recommendation-summary .fit-score { font-size: 23px; }
}
@media (max-width: 1100px) {
  main { padding: 24px 22px 0; }
  .site-header { padding: 0 22px; }
  .brand { font-size: 18px; }
  .panel { padding: 20px; }
  .workspace-grid { gap: 20px; }
  .intro h1 { font-size: 34px; }
  .intro p { font-size: 14px; }
  .header-nav { gap: 18px; }
  .capture-area:has(.image-preview:not([hidden])) { display: block; }
  .capture-area:has(.image-preview:not([hidden]))>.paste-help { margin-bottom: 10px; }
  .capture-area:has(.image-preview:not([hidden]))>.capture-controls { flex-direction: row; }
  .capture-area:has(.image-preview:not([hidden]))>#capture-help { margin-top: 8px; font-size: 11px; }
  .capture-area:has(.image-preview:not([hidden]))>.image-preview { margin-top: 12px; }
  .capture-area:has(.image-preview:not([hidden]))>.image-preview .image-toolbar { flex-direction: row; }
  .capture-area:has(.image-preview:not([hidden]))>.image-preview .image-toolbar>span { display: block; }
}
@media (max-width: 820px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .site-header { gap: 14px; height: auto; min-height: 72px; flex-wrap: wrap; }
  .header-actions { gap: 12px; min-height: 52px; }
  .header-nav { min-height: 52px; }
  .site-header>.header-nav { margin-right: 12px; gap: 14px; }
  .nav-button { font-size: 13px; }
  .source-summary { text-align: right; padding-left: 0; }
  .intro { gap: 16px; }
  .intro h1 { font-size: 32px; }
  .decision-featured { flex-wrap: nowrap; }
  .decision-hero { flex-basis: auto; }
  .decision-metrics { flex-basis: auto; }
  .decision-metric:first-child { border-left: 1px solid var(--green-border); padding-left: 14px; }
  .recommendation-summary .hero-avatar { width: 52px; height: 52px; }
  .recommendation-summary .hero-name { font-size: 14px; }
  .recommendation-summary .fit-score { font-size: 26px; }
  .capture-area:has(.image-preview:not([hidden])) { display: grid; }
  .capture-area:has(.image-preview:not([hidden]))>.paste-help { margin-bottom: 0; }
  .capture-area:has(.image-preview:not([hidden]))>.capture-controls { flex-direction: column; }
  .capture-area:has(.image-preview:not([hidden]))>#capture-help { margin: 0; }
  .capture-area:has(.image-preview:not([hidden]))>.image-preview { margin: 0; }
  .capture-area:has(.image-preview:not([hidden]))>.image-preview .image-toolbar { flex-direction: column; }
  .capture-area:has(.image-preview:not([hidden]))>.image-preview .image-toolbar>span { display: none; }
  .capture-area:has(.crop-stage.cropping) { display: block; }
  .capture-area:has(.crop-stage.cropping)>.image-preview { margin-top: 12px; }
  .capture-area:has(.crop-stage.cropping)>.capture-controls { flex-direction: row; }
  .capture-area:has(.crop-stage.cropping)>.image-preview .image-toolbar { flex-direction: row; }
  .capture-area:has(.crop-stage.cropping)>.image-preview .image-toolbar>span { display: block; }
  .site-footer { align-items: flex-start; }
}
@media (max-width: 620px) {
  .brand { font-size: 17px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-mark img { width: 52px; height: 52px; }
  .brand { order: 1; }
  .header-actions { width: auto; height: auto; order: 2; margin-left: auto; }
  .header-nav { flex: 1; gap: 18px; overflow-x: auto; min-width: 0; }
  .site-header>.header-nav { order: 3; width: 100%; flex-basis: 100%; justify-content: space-between; margin: 0; }
  .header-divider { display: none; }
  .intro { display: block; }
  .source-summary { margin-top: 13px; text-align: left; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  .source-summary strong { margin: 0; }
  .decision-featured { flex-wrap: wrap; }
  .decision-hero, .decision-metrics { flex-basis: 100%; }
  .decision-metric:first-child { border-left: 0; padding-left: 0; }
  .recommendation-table-heading { display: none; }
  .recommendation-columns { display: none; }
  .recommendation-summary { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 10px; }
  .recommendation-hero, .recommended-hero { grid-column: 1; grid-row: 1 / span 2; }
  .recommendation-identity { grid-column: 1; grid-row: 1 / span 2; }
  .recommendation-summary .fit-score { grid-column: 2; grid-row: 1; text-align: right; }
  .recommendation-verdict, .recommendation-action { grid-column: 2; grid-row: 2; padding: 5px 8px; }
  .recommendation-status { grid-column: 2; grid-row: 2; padding: 5px 8px; }
  .recommendation-chevron { grid-column: 3; grid-row: 1 / span 2; }
  .recommendation-set, .recommended-set { grid-column: 1 / -1; grid-row: 3; padding-left: 64px; }
  .recommendation-sets { grid-column: 1 / -1; grid-row: 3; padding-left: 64px; }
}
@media (max-width: 520px) {
  main { padding: 22px 14px 0; }
  .site-header { padding: 12px 14px 0; }
  .header-actions { min-height: 48px; }
  .header-nav { min-height: 48px; }
  .nav-button { min-height: 44px; font-size: 12px; }
  .intro { margin-bottom: 20px; }
  .intro h1 { font-size: 29px; letter-spacing: -1.2px; }
  .intro p { font-size: 13px; }
  .panel, .settings-panel { padding: 18px 16px; }
  h2 { font-size: 22px; }
  .section-heading { margin-bottom: 17px; }
  .section-heading .text-button { font-size: 11px; }
  .capture-area { padding: 12px; }
  .capture-area:has(.image-preview:not([hidden])) { display: block; }
  .capture-area:has(.image-preview:not([hidden]))>.paste-help { margin-bottom: 10px; }
  .capture-area:has(.image-preview:not([hidden]))>.capture-controls { flex-direction: column; }
  .capture-area:has(.image-preview:not([hidden]))>#capture-help { margin-top: 8px; font-size: 11px; }
  .capture-area:has(.image-preview:not([hidden]))>.image-preview { margin-top: 12px; }
  .crop-stage, .crop-stage img { max-height: 170px; }
  .crop-stage.cropping, .crop-stage.cropping img { max-height: 420px; }
  .capture-area:has(.crop-stage.cropping)>.capture-controls { flex-direction: column; }
  .capture-area:has(.crop-stage.cropping)>.image-preview .image-toolbar { flex-direction: column; align-items: flex-start; }
  .form-grid { gap: 12px; }
  .mainstat-row { gap: 12px; }
  .form-divider>span:last-child { font-size: 10px; }
  .searchable-select .searchable-input { font-size: 13px; }
  .searchable-option { font-size: 13px; }
  .substat-row { grid-template-columns: 16px minmax(0, 1.3fr) minmax(0, .85fr); gap: 6px; }
  .substat-row .substat-index { width: 16px; }
  .substats-heading>span { font-size: 10px; }
  .decision-banner { padding: 16px; }
  .decision-top { gap: 12px; }
  .decision-top>span { width: 48px; height: 48px; font-size: 28px; }
  .decision-top h3 { font-size: 22px; }
  .decision-summary { margin-left: 60px; }
  .decision-featured { margin-top: 16px; padding-top: 16px; }
  .decision-metrics { gap: 10px; }
  .decision-metric { padding-left: 10px; }
  .decision-metric strong { font-size: 25px; }
  .decision-metric>span, .decision-metric>small { font-size: 10px; }
  .hero-spec-stat-cards { gap: 10px; }
  .hero-spec-stat-card { padding: 13px; }
  .hero-spec-priority-value, .hero-spec-priority-label { font-size: 11px; }
  .hero-spec-priority-scale { font-size: 10px; }
  .hero-spec-stats-heading>span { font-size: 10px; }
  .owned-heroes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-score-table th, .stat-score-table td { font-size: 10px; }
  .hero-target-table th, .hero-target-table td { font-size: 10px; }
  .threshold-chip strong { font-size: 11px; }
  .threshold-note { font-size: 10px; }
  .history-row { flex-wrap: wrap; }
  .history-gear { min-width: 55%; }
  .result-footer { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .hero-spec-stat-cards { grid-template-columns: 1fr; }
  .decision-metric strong { font-size: 22px; }
  .recommendation-summary .hero-avatar { width: 44px; height: 44px; }
  .recommendation-summary .hero-name { font-size: 13px; }
  .recommendation-set, .recommended-set { padding-left: 56px; }
  .recommendation-sets { padding-left: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; }
}

/* Reference-size typography and a compact import-to-judge path. */
.brand { font-size: 24px; }
.nav-button { font-size: 16px; }
main { max-width: 1504px; padding-top: 26px; }
.intro { margin-bottom: 22px; }
.intro h1 { font-size: 52px; line-height: 1.16; margin-bottom: 8px; }
.intro p { font-size: 18px; line-height: 1.45; }
.source-summary strong { font-size: 14px; }
.source-summary span { font-size: 12px; }
h2 { font-size: 28px; line-height: 1.3; }
.section-heading { margin-bottom: 18px; }
.section-heading .text-button { font-size: 13px; }
.equipment-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 14px; }
label, .field-label { font-size: 14px; line-height: 1.4; }
input:not([type=checkbox]), select { font-size: 16px; height: 40px; margin-top: 5px; }
.searchable-select { margin-top: 5px; }
.searchable-select .searchable-input { font-size: 16px; height: 40px; }
.searchable-toggle { height: 38px; }
.searchable-option { font-size: 14px; }
.field-help { font-size: 12px; }
.form-grid { gap: 10px 16px; }
.equipment-panel .form-divider { display: none; }
.icon-field .field-icon { top: 34px; }
.mainstat-row { margin-top: 12px; }
.substats-heading { margin: 13px 0 7px; }
.substat-row { gap: 7px; }
.substats { gap: 6px; }
.substat-row input, .substat-row .searchable-input { margin: 0; }
.input-score-summary { margin-top: 8px; padding-top: 8px; line-height: 1.3; }
.input-score-summary strong { line-height: 1.2; }
.evaluate-button { margin-top: 11px; font-size: 16px; min-height: 44px; padding: 8px 14px; }
.capture-area { padding: 12px 14px; margin-bottom: 14px; }
.paste-help { font-size: 14px; }
.capture-controls .button { min-height: 36px; font-size: 13px; }
.capture-controls #capture-button { min-height: 30px; padding: 5px 8px; font-size: 12px; }
.capture-area:has(.image-preview:not([hidden])) { grid-template-rows: auto auto auto; gap: 7px 14px; }
.capture-area:has(.image-preview:not([hidden]))>.image-preview { grid-row: 1 / span 2; }
.capture-area:has(.image-preview:not([hidden]))>.paste-help { grid-row: 1; }
.capture-area:has(.image-preview:not([hidden]))>.capture-controls { grid-row: 2; align-self: start; }
.capture-details { grid-column: 1 / -1; grid-row: 3; font-size: 12px; margin: 0; padding-top: 1px; }
.capture-details>summary { color: var(--muted); font-size: 12px; padding: 0; }
.capture-details[open] { padding-top: 6px; }
.capture-details[open]>summary { margin-bottom: 7px; }
.capture-details #capture-help { margin: 0; font-size: 12px; }
.capture-details #ocr-details { margin-top: 8px; }
.capture-details .capture-status { font-size: 12px; margin-top: 8px; }
.capture-feedback { font-size: 12px; line-height: 1.5; color: var(--green); margin: -6px 0 12px; }
.capture-feedback.error { color: var(--red); }
.image-toolbar { padding: 5px 7px; }
.image-toolbar .text-button { font-size: 10px; }
.crop-stage:not(.cropping) { min-height: 130px; height: 130px; max-height: 130px; }
.crop-stage:not(.cropping) img { width: 100%; height: 130px; max-height: 130px; object-fit: cover; object-position: top center; }
.crop-stage.cropping { height: auto; max-height: 520px; }
.crop-stage.cropping img { width: auto; height: auto; max-height: 520px; object-fit: contain; }
.capture-area:has(.crop-stage.cropping) { display: block; }
.capture-area:has(.crop-stage.cropping)>.capture-details { margin-top: 8px; }
.decision-top h3 { font-size: 29px; line-height: 1.3; }
.decision-summary { font-size: 14px; }
.item-summary { font-size: 14px; }
.decision-featured { gap: 16px; padding-top: 16px; margin-top: 16px; }
.decision-hero .hero-avatar { width: 80px; height: 80px; }
.recommended-hero-copy>strong { font-size: 18px; line-height: 1.4; }
.recommended-hero-copy>span { font-size: 12px; }
.recommended-hero-copy .hero-build { font-size: 13px; }
.decision-metric { gap: 7px; }
.decision-metric>span, .decision-metric>small { font-size: 12px; }
.decision-metric strong { font-size: 36px; }
.result-details { margin-top: 10px; padding-top: 8px; }
.result-details>summary { font-size: 12px; padding: 0; }
.result-footer { margin-top: 9px; padding-top: 9px; gap: 12px; }
.result-footer .button { min-height: 34px; padding: 6px 12px; }
.result-footer>span { font-size: 10px; line-height: 1.5; }
.recommendation-caption { margin: -5px 0 9px; font-size: 12px; }
.score-guide { display: block; margin: 0 0 10px; padding: 0; background: transparent; }
.score-guide>summary { font-size: 11px; padding: 0; color: var(--faint); }
.score-guide[open] { background: var(--panel-soft); padding: 10px 12px; }
.recommendation-columns { padding-bottom: 10px; font-size: 12px; }
.recommendation-summary { padding: 10px 0; min-height: 70px; }
.recommendation-summary .hero-avatar { width: 48px; height: 48px; }
.recommendation-summary .hero-name { font-size: 15px; }
.recommendation-summary .fit-score { font-size: 30px; }
.recommendation-sets { font-size: 13px; }
.recommendation-status { font-size: 12px; padding: 6px 9px; }
.recommendation-list { max-height: 460px; overflow-y: auto; scrollbar-gutter: stable; }
.recommendation-list:has(.recommendation-toggle[open]) { max-height: none; overflow-y: visible; }

@media (max-width: 1200px) {
  .brand { font-size: 21px; }
  .nav-button { font-size: 14px; }
  .intro h1 { font-size: 46px; }
  .intro p { font-size: 16px; }
  .decision-metric strong { font-size: 33px; }
  .decision-metric>span, .decision-metric>small { font-size: 12px; }
  .recommendation-summary .hero-name { font-size: 14px; }
  .recommendation-summary .fit-score { font-size: 28px; }
}
@media (max-width: 1100px) and (min-width: 821px) {
  .capture-area:has(.image-preview:not([hidden])) { display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); }
  .capture-area:has(.image-preview:not([hidden]))>.image-preview { margin: 0; }
  .capture-area:has(.image-preview:not([hidden]))>.paste-help { margin: 0; font-size: 12px; }
  .capture-area:has(.image-preview:not([hidden]))>.capture-controls { flex-direction: column; }
  .capture-area:has(.image-preview:not([hidden]))>.image-preview .image-toolbar { flex-direction: column; }
  .capture-area:has(.image-preview:not([hidden]))>.image-preview .image-toolbar>span { display: none; }
  .capture-controls .button { font-size: 12px; }
  .capture-area:has(.crop-stage.cropping) { display: block; }
  .capture-area:has(.crop-stage.cropping)>.image-preview { margin-top: 12px; }
}
@media (max-width: 820px) {
  .brand { font-size: 20px; }
  .intro h1 { font-size: 40px; }
  .intro p { font-size: 15px; }
  h2 { font-size: 26px; }
  .recommendation-list { max-height: 420px; }
}
@media (max-width: 620px) {
  .brand { font-size: 20px; }
  .nav-button { font-size: 13px; }
  .decision-metric strong { font-size: 32px; }
  .recommendation-summary { min-height: 80px; }
  .recommendation-summary .hero-name { font-size: 14px; }
}
@media (max-width: 520px) {
  .intro h1 { font-size: 33px; }
  .intro p { font-size: 14px; }
  h2 { font-size: 24px; }
  label, .field-label { font-size: 13px; }
  input:not([type=checkbox]), select, .searchable-select .searchable-input { font-size: 14px; }
  .icon-field .field-icon { top: 32px; }
  .capture-area:has(.image-preview:not([hidden])) { display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); gap: 7px 10px; }
  .capture-area:has(.image-preview:not([hidden]))>.paste-help { margin: 0; font-size: 12px; }
  .capture-area:has(.image-preview:not([hidden]))>.paste-help>span { font-size: 10px; }
  .capture-area:has(.image-preview:not([hidden]))>.paste-help kbd { font-size: 10px; padding: 2px 4px; }
  .capture-area:has(.image-preview:not([hidden]))>.image-preview { margin: 0; }
  .capture-controls .button { font-size: 12px; }
  .capture-controls #capture-button { font-size: 11px; }
  .crop-stage:not(.cropping), .crop-stage:not(.cropping) img { height: 115px; min-height: 115px; max-height: 115px; }
  .capture-area:has(.crop-stage.cropping) { display: block; }
  .capture-area:has(.crop-stage.cropping)>.image-preview { margin-top: 12px; }
  .crop-stage.cropping, .crop-stage.cropping img { max-height: 420px; }
  .decision-top h3 { font-size: 24px; }
  .decision-hero .hero-avatar { width: 72px; height: 72px; }
  .recommended-hero-copy>strong { font-size: 17px; }
  .decision-metric strong { font-size: 30px; }
  .decision-metric>span, .decision-metric>small { font-size: 11px; }
  .recommendation-summary .fit-score { font-size: 28px; }
  .recommendation-list { max-height: 420px; }
}
@media (max-width: 360px) {
  .capture-area:has(.image-preview:not([hidden])) { display: block; }
  .capture-area:has(.image-preview:not([hidden]))>.paste-help { margin-bottom: 8px; }
  .capture-area:has(.image-preview:not([hidden]))>.image-preview { margin-top: 10px; }
  .capture-details { margin-top: 8px; }
  .decision-metric strong { font-size: 25px; }
}

/* Final QA: compact source preview and shared result actions below hero scores. */
.crop-stage:not(.cropping), .crop-stage:not(.cropping) img {
  height: 110px;
  min-height: 110px;
  max-height: 110px;
}
.hero-name, .hero-build { display: block; }
.recommendation-chevron .ui-icon { width: 16px; height: 16px; }
.decision-metric>span { word-break: keep-all; overflow-wrap: normal; }
.recommendation-name>.hero-build { margin-top: 3px; font-size: 12px; line-height: 1.4; }
#result-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
#result-actions>.result-details {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  align-self: start;
}
#result-actions>.result-details>summary { padding: 7px 0; line-height: 1.5; }
#result-actions>.result-footer { display: contents; }
#result-actions .result-footer>.button { grid-column: 2; grid-row: 1; align-self: start; }
#result-actions .result-footer>span { grid-column: 1 / -1; grid-row: 2; font-size: 11px; line-height: 1.5; }
#result-actions>.result-details[open] { padding-bottom: 5px; }
@media (min-width: 1321px) {
  .equipment-panel .form-grid { row-gap: 8px; }
  .equipment-panel .substats { gap: 4px; }
  .equipment-panel .capture-feedback { margin-bottom: 8px; }
  .recommendation-list { max-height: 156px; }
  #show-more { min-height: 26px; margin-top: 6px; padding: 3px 12px; font-size: 12px; }
  #result-actions { margin-top: 8px; padding-top: 8px; }
  .decision-hero { flex: .9; }
  .decision-metrics { flex: 2; grid-template-columns: minmax(174px, 1.4fr) minmax(110px, 1fr) minmax(120px, 1fr); gap: 12px; }
  .decision-metric>span, .decision-metric>small { white-space: nowrap; }
}
@media (max-width: 1320px) {
  .decision-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .decision-metric>span, .decision-metric>small { white-space: normal; }
}
@media (max-width: 520px) {
  #result-actions { gap: 8px 10px; }
  #result-actions>.result-details>summary { font-size: 11px; }
  #result-actions .result-footer>.button { font-size: 12px; padding: 6px 10px; }
}
@media (max-width: 360px) {
  #result-actions { grid-template-columns: 1fr; }
  #result-actions .result-footer>.button { grid-column: 1; grid-row: 2; justify-self: end; }
  #result-actions .result-footer>span { grid-row: 3; }
}


/* Show reference attainment first, with observed options below it. */
.recommendation-summary .fit-score.option-assessment,
.alternative-build-top .option-assessment { display: block; min-width: 0; white-space: normal; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.option-assessment-title { display: block; font-size: 15px; line-height: 1.5; font-weight: 700; word-break: keep-all; }
.option-assessment-title.option-assessment-score { font-size: 24px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.recommendation-summary .option-assessment small,
.alternative-build-top .option-assessment small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.6; font-weight: 400; color: var(--muted); }
.recommendation-summary .option-assessment .option-assessment-count,
.alternative-build-top .option-assessment .option-assessment-count { color: var(--text); font-weight: 500; }
.recommendation-summary .option-assessment .option-assessment-supplemental,
.alternative-build-top .option-assessment .option-assessment-supplemental,
.recommendation-summary .option-assessment .option-assessment-secondary-count,
.alternative-build-top .option-assessment .option-assessment-secondary-count { color: var(--faint); }
.assessment-reference { margin: 10px 0 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; }
.assessment-reference>summary { color: var(--muted); cursor: pointer; }
.assessment-reference .evidence-note { margin: 6px 0 0; }
@media (max-width: 820px) {
  .recommendation-summary:has(.option-assessment) .recommendation-identity { grid-column: 1 / 3; grid-row: 1; }
  .recommendation-summary:has(.option-assessment) .recommendation-chevron { grid-column: 3; grid-row: 1; }
  .recommendation-summary .fit-score.option-assessment { grid-column: 1 / 4; grid-row: 2; max-width: none; text-align: left; }
  .recommendation-summary:has(.option-assessment) .recommendation-sets { grid-column: 1; grid-row: 3; }
  .recommendation-summary:has(.option-assessment) .recommendation-status { grid-column: 2 / 4; grid-row: 3; max-width: 165px; }
}
@media (min-width: 821px) {
  .recommendation-columns, .recommendation-summary { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr) minmax(0, 1.2fr) minmax(0, .95fr) 18px; }
}
@media (max-width: 820px) {
  .option-assessment-title { font-size: 14px; }
  .option-assessment-title.option-assessment-score { font-size: 22px; }
}

/* Storage value and whole-loadout conditions are separate. */
.loadout-advice { margin: 10px 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.loadout-advice-title { color: var(--amber); }
.loadout-advice .evidence-note { margin: 5px 0; }
.loadout-notice { margin: 5px 0 0; color: var(--muted); }
.recommendation-summary .option-assessment .option-assessment-loadout,
.alternative-build-top .option-assessment .option-assessment-loadout { color: var(--amber); }

.boots-mainstat-mismatch .loadout-advice-title, .mainstat-mismatch .loadout-advice-title { color: var(--red); }

/* Goal planning is isolated from the single-equipment assessment form. */
.gear-planner-panel { margin-bottom: 24px; scroll-margin-top: 22px; }
.gear-planner-panel .section-heading { margin-bottom: 10px; }
.planner-intro { margin: 0; color: var(--text); font-size: 14px; line-height: 1.7; }
.planner-status { color: var(--muted); font-size: 12px; margin: 8px 0 20px; }
.planner-status.error { color: var(--red); }
.planner-form { display: grid; gap: 22px; }
.planner-form h3, .planner-result h3 { margin: 0; font-size: 16px; letter-spacing: -.3px; }
.planner-hero-row { display: grid; grid-template-columns: minmax(200px, 340px) 1fr; align-items: end; gap: 20px; }
.planner-hero-row>.field-help { margin: 0 0 6px; max-width: 680px; font-size: 12px; }
.planner-targets { border: 1px solid var(--blue-border); border-radius: 10px; margin: 0; padding: 16px 18px 18px; background: var(--blue-soft); min-width: 0; }
.planner-targets legend { padding: 0 7px; color: var(--text); font-size: 15px; font-weight: 700; }
.planner-targets>.field-help { margin: 0 0 12px; }
.planner-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.planner-stats-grid input { background: var(--panel); }
.planner-gear-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.planner-gear-heading .subtle { display: block; margin-top: 4px; font-size: 12px; }
.planner-gear-heading+.field-help { margin-top: -16px; }
.planner-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.planner-slot { min-width: 0; margin: 0; padding: 16px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 12px; }
.planner-slot legend { font-size: 15px; font-weight: 700; color: var(--text); padding: 0 6px; }
.planner-slot-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.planner-mode { font-size: 12px; }
.planner-slot-tag { font-size: 10px; color: var(--muted); border-radius: 30px; background: var(--panel); border: 1px solid var(--line); padding: 3px 7px; }
.planner-slot:has(.planner-mode input:checked) { border-color: var(--blue-border); background: #f7faff; }
.planner-slot input:not([type=checkbox]), .planner-slot select { background: var(--panel); font-size: 12px; }
.planner-main-grid, .planner-substat-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; }
.planner-substats { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.planner-substat-row label { font-size: 11px; }
.planner-slot>.field-help { margin: 0; }
.planner-ocr { display: grid; gap: 8px; min-width: 0; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.planner-ocr-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.planner-ocr-tools .button { width: 100%; min-width: 0; min-height: 36px; padding: 7px 10px; font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
.planner-ocr-dropzone { display: grid; place-items: center; min-width: 0; min-height: 56px; padding: 9px 10px; border: 1px dashed var(--line-strong); border-radius: 6px; background: var(--panel-soft); color: var(--muted); font-size: 11px; line-height: 1.7; text-align: center; overflow-wrap: anywhere; cursor: pointer; transition: background .15s, border-color .15s; }
.planner-ocr-dropzone:hover, .planner-ocr-dropzone.dragging { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.planner-ocr-dropzone:focus { outline: 3px solid #3569df66; outline-offset: 2px; border-color: var(--blue); }
.planner-ocr[aria-busy=true] { border-color: var(--blue-border); }
.planner-ocr[aria-busy=true] .planner-ocr-dropzone { cursor: progress; color: var(--blue); background: var(--blue-soft); }
.planner-ocr-preview { position: relative; display: grid; place-items: center; min-width: 0; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); overflow: hidden; }
.planner-ocr-preview img { display: block; width: 100%; max-width: 100%; height: auto; max-height: 170px; object-fit: contain; }
.planner-ocr-preview button { position: absolute; top: 6px; right: 6px; min-width: 30px; min-height: 30px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 11px; line-height: 1.5; box-shadow: 0 1px 4px #16223814; }
.planner-ocr-preview button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.planner-ocr-status { margin: 0; color: var(--blue); font-size: 11px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.planner-ocr-status.error { color: var(--red); }
.planner-ocr-warnings { margin: 0; padding: 8px 10px 8px 25px; border: 1px solid var(--amber-border); border-radius: 6px; background: var(--amber-soft); color: var(--amber); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.planner-ocr-status:empty, .planner-ocr-warnings:empty { display: none; }
.planner-advanced { padding: 14px 16px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 9px; margin: 0; }
.planner-advanced>summary { font-size: 13px; font-weight: 600; color: var(--muted); }
.planner-advanced>h3 { margin-top: 20px; font-size: 14px; }
.planner-advanced>.field-help { margin-bottom: 10px; }
.planner-footer, .planner-result-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.planner-footer>.field-help { margin: 0; }
.planner-footer>div { display: flex; gap: 8px; flex-wrap: wrap; }
.planner-footer .button-primary { color: #fff; }
.planner-error { margin: 0; }
.planner-error ul { margin: 0; padding-left: 18px; }
.planner-result { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 22px; }
.planner-set-summary { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0; font-size: 12px; color: var(--muted); }
.planner-set-summary p { margin: 0; }
.planner-set-active { color: var(--green); }
.planner-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.planner-table { width: 100%; min-width: 790px; border-collapse: collapse; font-size: 12px; text-align: left; font-variant-numeric: tabular-nums; }
.planner-table caption { text-align: left; font-size: 11px; color: var(--muted); padding: 10px 12px; background: var(--panel-soft); }
.planner-table th, .planner-table td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.planner-table thead th { color: var(--muted); background: var(--panel-soft); font-weight: 500; white-space: nowrap; }
.planner-table tbody th { white-space: nowrap; font-weight: 600; }
.planner-table td small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.planner-gap { color: var(--amber); font-weight: 600; }
.planner-met { color: var(--green); }
.planner-warnings { padding: 12px 14px 12px 30px; background: var(--amber-soft); border: 1px solid var(--amber-border); border-radius: 8px; font-size: 12px; color: var(--amber); line-height: 1.8; }
.planner-disclaimer { color: var(--muted); font-size: 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--panel-soft); line-height: 1.8; }
@media (max-width: 1150px) { .planner-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .planner-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planner-hero-row { grid-template-columns: 1fr; gap: 8px; }
  .planner-gear-heading { align-items: flex-start; }
  .planner-gear-heading .button { font-size: 11px; }
}
@media (max-width: 620px) {
  .planner-slots { grid-template-columns: 1fr; }
  .planner-gear-heading { flex-direction: column; }
  .planner-targets { padding: 12px; }
  .planner-footer>div { width: 100%; display: grid; grid-template-columns: 1fr; }
  .planner-footer>div>.button-primary { grid-row: 1; }
  .planner-result-heading { align-items: flex-start; }
  .planner-slot { padding: 12px; }
}

/* The main option value follows its level and enhancement automatically. */
.mainstat-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.mainstat-row > .field-help { margin: 0; }

/* Equipment judging keeps its target grade independent of planner goals. */
.judge-grade-settings { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 14px; margin:0 0 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel-soft); }
.judge-grade-settings > label { flex:0 0 180px; }
.judge-grade-settings > .field-help { flex:1 1 200px; margin:0; }