:root { color-scheme: dark; --bg:#07111f; --card:#101c2e; --muted:#9ca3af; --text:#e5e7eb; --line:#263447; --accent:#38bdf8; --ok:#34d399; --warn:#fbbf24; --bad:#fb7185; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background: radial-gradient(circle at top, #172554 0, var(--bg) 42rem); color:var(--text); }
.shell { width:min(960px, 100%); margin:0 auto; padding:14px 18px 18px; }
.card { background:rgba(16,28,46,.86); border:1px solid var(--line); border-radius:24px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.25); backdrop-filter: blur(12px); }
.hero h1 { margin:.25rem 0 .5rem; font-size:clamp(2rem, 9vw, 4.25rem); letter-spacing:-.06em; }
.hero p, .hint { color:var(--muted); line-height:1.45; }
.eyebrow { color:var(--accent); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.75rem; }
.notice { margin-top:14px; }
.tracks { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tracks span { border:1px solid var(--line); border-radius:999px; padding:8px 11px; color:#dbeafe; background:#0b1626; }
.grid { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; margin-top:14px; }
.compact-start { margin-top:0; }
.camera-wrap { position:relative; aspect-ratio:3/4; min-height:420px; border-radius:22px; overflow:hidden; background:#000; border:1px solid var(--line); }
video, canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.camera-wrap.camera-off video, .camera-wrap.camera-off #overlay { display:none; }
.camera-wrap.review-mode video, .camera-wrap.review-mode #overlay { display:none; }
.capture-preview { z-index:2; background:#000; }
.camera-start-overlay { position:absolute; inset:50% auto auto 50%; transform:translate(-50%, -50%); z-index:3; min-width:170px; box-shadow:0 18px 45px rgba(56,189,248,.25); }
.capture-feedback { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:4; padding:10px 14px; border-radius:999px; background:rgba(52,211,153,.94); color:#031321; font-weight:850; box-shadow:0 16px 38px rgba(52,211,153,.22); }
.capture-feedback.hidden { display:none; }
.mode-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:10px 12px; border:1px solid var(--line); border-radius:16px; background:#0b1626; }
.mode-row label { color:#cbd5e1; font-weight:750; }
select { width:min(260px, 55%); border:1px solid var(--line); border-radius:999px; padding:10px 12px; background:#111827; color:var(--text); font-weight:750; }
details { margin-top:10px; }
summary { cursor:pointer; color:#bae6fd; font-weight:750; }
pre { overflow:auto; max-height:320px; padding:12px; border-radius:14px; background:#020617; border:1px solid var(--line); color:#d1d5db; }
.controls { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
button, .button-like { border:0; border-radius:999px; padding:12px 16px; font-weight:750; color:#031321; background:var(--accent); cursor:pointer; text-decoration:none; display:inline-block; }
button:disabled { opacity:.45; cursor:not-allowed; }
.secondary { background:#a7f3d0; }
.ghost { background:#1f2937; color:var(--text); border:1px solid var(--line); }
input[type=file] { display:none; }
h2 { margin:0 0 12px; font-size:1.1rem; }
.metric-list { display:grid; gap:10px; }
.metric { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.metric strong { color:#f8fafc; }
.metric span { color:#cbd5e1; text-align:right; }
.report-card { margin-top:14px; }
.report { line-height:1.5; }
.report ul { padding-left:1.1rem; }
.muted { color:var(--muted); }
.badge { display:inline-block; border-radius:999px; padding:4px 8px; font-size:.78rem; font-weight:800; }
.ok { color:var(--ok); } .warn { color:var(--warn); } .bad { color:var(--bad); }
@media (max-width: 760px) { .grid { grid-template-columns:1fr; } .camera-wrap { min-height:360px; } }
.capture-feedback.warn { background:rgba(251,191,36,.96); }
.protocol-card { margin-top:14px; }
.protocol-card h2 { margin-bottom:6px; }
.compact-hint { margin:.25rem 0 .75rem; }
.protocol-layout { display:grid; grid-template-columns:1fr auto; align-items:end; gap:14px; margin:12px 0; }
.field-label { display:block; margin-bottom:6px; color:#cbd5e1; font-weight:800; }
.summary-box { padding:12px 14px; border-radius:16px; border:1px solid var(--line); background:#07111f; color:#e0f2fe; font-weight:850; white-space:nowrap; }
.finger-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.finger-card { border:1px solid var(--line); border-radius:18px; padding:12px; background:#0b1626; }
.finger-card.captured { border-color:rgba(52,211,153,.55); }
.finger-head { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:10px; }
.finger-title { font-weight:850; color:#f8fafc; }
.finger-status { font-size:.76rem; color:#a7f3d0; font-weight:850; }
.finger-fields { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.finger-fields label { display:grid; gap:4px; color:#9ca3af; font-size:.76rem; font-weight:750; }
.finger-fields select, .finger-fields input { width:100%; border:1px solid var(--line); border-radius:12px; padding:8px; background:#111827; color:var(--text); font-weight:750; }
.finger-fields input:disabled { opacity:.45; }
.protocol-note { color:#9ca3af; font-size:.82rem; margin-top:8px; }
@media (max-width: 760px) { .protocol-layout { grid-template-columns:1fr; } .summary-box { white-space:normal; } .finger-grid { grid-template-columns:1fr; } }
.thyroid-target-card { margin-top:14px; }
.thyroid-matrix { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.target-group { border:1px solid var(--line); border-radius:18px; padding:12px; background:#0b1626; }
.target-group h3 { margin:0 0 10px; font-size:1rem; color:#e0f2fe; }
.target-item { display:grid; gap:4px; padding:10px 0; border-top:1px solid var(--line); }
.target-item:first-of-type { border-top:0; }
.target-item strong { color:#f8fafc; }
.target-item span { color:#cbd5e1; }
.target-item small { color:#94a3b8; line-height:1.35; }
.target-status { display:inline-flex; align-items:center; width:max-content; border-radius:999px; padding:3px 8px; font-size:.72rem; font-weight:850; }
.target-status.ready { color:#052e1b; background:#86efac; }
.target-status.pending { color:#422006; background:#fde68a; }
@media (max-width:760px) { .thyroid-matrix { grid-template-columns:1fr; } }
.early-alert-card { margin-top:14px; }
.early-alert-panel { display:grid; gap:12px; }
.alert-banner { border:1px solid var(--line); border-radius:18px; padding:12px; background:#07111f; color:#e0f2fe; font-weight:850; }
.alert-groups { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.alert-group { border:1px solid var(--line); border-radius:18px; padding:12px; background:#0b1626; }
.alert-group h3 { margin:0 0 8px; font-size:.98rem; color:#f8fafc; }
.alert-item { display:grid; gap:5px; padding:9px 0; border-top:1px solid var(--line); }
.alert-item:first-of-type { border-top:0; }
.alert-item strong { color:#e5e7eb; }
.alert-item small { color:#94a3b8; line-height:1.35; }
.alert-level { width:max-content; border-radius:999px; padding:3px 8px; font-size:.72rem; font-weight:850; }
.alert-level.signal { background:#fb7185; color:#450a0a; }
.alert-level.watch { background:#fbbf24; color:#422006; }
.alert-level.neutral { background:#86efac; color:#052e1b; }
.alert-level.pending, .alert-level.baseline_needed { background:#dbeafe; color:#172554; }
@media (max-width:760px) { .alert-groups { grid-template-columns:1fr; } }
.sequence-status { margin:10px 0 12px; padding:12px 14px; border-radius:16px; border:1px solid rgba(56,189,248,.45); background:#071827; color:#dbeafe; font-weight:850; }
.finger-card.active { outline:2px solid var(--accent); box-shadow:0 0 0 4px rgba(56,189,248,.12); }
.finger-card.critical { border-color:rgba(251,191,36,.65); }
.finger-title small { display:block; color:#fbbf24; font-size:.72rem; margin-top:2px; }
.hidden-section { display:none !important; }
.board-card h1 { margin:0 0 8px; font-size:clamp(1.8rem, 7vw, 3.2rem); letter-spacing:-.04em; }
.board-card { min-height:calc(100vh - 28px); display:flex; flex-direction:column; gap:12px; }
.board-card.capture-active { min-height:auto; }
.board-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.board-grid .finger-card { min-height:118px; display:flex; flex-direction:column; justify-content:space-between; transition:border-color .16s ease, background .16s ease; }
.board-grid .finger-card:active { transform:none; }
.board-grid .finger-card.captured { background:linear-gradient(135deg, rgba(6,78,59,.95), rgba(11,22,38,.95)); border-color:rgba(52,211,153,.75); }
.board-grid .finger-card.excluded { background:linear-gradient(135deg, rgba(120,53,15,.95), rgba(11,22,38,.95)); border-color:rgba(251,191,36,.82); }
.board-grid .finger-card.pending-next, .board-grid .finger-card.active { border-color:rgba(56,189,248,.95); box-shadow:0 0 0 4px rgba(56,189,248,.14); }
.board-grid .finger-head { margin-bottom:0; }
.board-grid .finger-title { font-size:1.05rem; }
.board-grid .finger-status { align-self:flex-start; border-radius:999px; padding:4px 8px; background:#111827; color:#bfdbfe; }
.board-grid .finger-card.captured .finger-status { background:#bbf7d0; color:#052e1b; }
.board-grid .finger-card.excluded .finger-status { background:#fde68a; color:#422006; }
.board-grid .protocol-note { margin-top:8px; }
.profile-actions { display:grid; gap:8px; padding:12px; border:1px solid rgba(56,189,248,.38); border-radius:18px; background:#071827; }
.profile-actions button { width:100%; }
.camera-card { margin-top:14px; }
.camera-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.camera-header strong { display:block; color:#f8fafc; font-size:1.05rem; }
.camera-controls { justify-content:center; }
@media (min-width:760px) { .board-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .board-grid .finger-card { min-height:150px; } }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.final-result { border:1px solid rgba(148,163,184,.45); border-radius:20px; padding:14px; background:linear-gradient(135deg, rgba(30,41,59,.92), rgba(7,17,31,.92)); color:#e5e7eb; }
.final-result strong { display:block; font-size:1.05rem; color:#f0fdf4; margin-bottom:4px; }
.final-result p { margin:0; color:#bbf7d0; line-height:1.35; }
.risk-list { display:grid; gap:10px; margin-top:12px; }
.risk-item { border:1px solid rgba(148,163,184,.28); border-radius:16px; padding:11px; background:rgba(2,6,23,.30); }
.risk-item b { display:block; color:#f8fafc; margin:4px 0; }
.risk-item small { display:block; color:#cbd5e1; line-height:1.35; }
.risk-level { display:inline-flex; width:max-content; border-radius:999px; padding:3px 8px; font-size:.72rem; font-weight:900; background:#dbeafe; color:#172554; }
.risk-item.signal .risk-level { background:#fb7185; color:#450a0a; }
.risk-item.watch .risk-level { background:#fbbf24; color:#422006; }
.risk-item.low .risk-level { background:#86efac; color:#052e1b; }
.risk-item.neutral .risk-level { background:#e5e7eb; color:#111827; }
.risk-disclaimer { margin-top:10px !important; color:#a7f3d0 !important; font-size:.86rem; }
.risk-meaning { display:block; color:#f8fafc; line-height:1.38; margin-bottom:5px; }
.essential-evidence { display:grid; gap:10px; margin-top:12px; }
.essential-finger, .essential-final { display:grid; gap:5px; border:1px solid rgba(148,163,184,.28); border-radius:16px; padding:11px; background:rgba(2,6,23,.30); }
.essential-finger b, .essential-final b { color:#f8fafc; }
.essential-finger span { color:#dbeafe; }
#useSampleBtn { background:#86efac; color:#052e1b; }
#repeatCaptureBtn { border-color:rgba(251,191,36,.55); color:#fde68a; }

.finger-preview { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; border:1px solid rgba(148,163,184,.35); margin:9px 0 2px; background:#020617; }
.analysis-progress { margin-top:10px; padding:10px 12px; border-radius:14px; border:1px solid rgba(56,189,248,.45); background:rgba(2,6,23,.35); color:#bfdbfe; font-weight:850; }
.board-controls { margin:0 0 4px; justify-content:flex-start; }