:root{
  --navy:#173a8f;--navy2:#10285f;--blue:#2f6fed;--sky:#eaf2ff;--bg:#f4f7fb;
  --card:#fff;--text:#10203d;--muted:#667085;--line:#dce5f2;--good:#0f8a67;--bad:#b54738;
  --shadow:0 12px 32px rgba(22,45,91,.08);--radius:20px;
}
*{box-sizing:border-box} html{background:var(--bg)}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
button,input{font:inherit}.app-shell{max-width:760px;margin:0 auto;min-height:100vh;padding-bottom:94px}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(244,247,251,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(220,229,242,.8)}
.brand{display:flex;gap:10px;align-items:center}.brand img{width:42px;height:42px;border-radius:12px}.brand-title{font-weight:800;font-size:15px}.brand-subtitle{font-size:12px;color:var(--muted)}
main{padding:16px}.screen{display:none}.screen.active{display:block}
.hero-card{background:linear-gradient(145deg,var(--navy2),var(--blue));color:white;border-radius:24px;padding:24px;margin:4px 0 16px;box-shadow:var(--shadow)}
.hero-card.compact{padding:22px}.hero-card h1{margin:7px 0 8px;font-size:28px;line-height:1.08}.hero-card p{margin:0;color:#e4ecff;line-height:1.5;font-size:14px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:800;color:#bfd1ff}
.panel,.result-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 6px 20px rgba(22,45,91,.04);margin-bottom:16px}
.field-label{display:block;font-weight:700;font-size:13px;margin-bottom:9px}.field-block{margin-bottom:18px}
.segmented{display:grid;grid-template-columns:1fr 1fr;background:#edf2f8;border-radius:14px;padding:4px}.segmented input{display:none}.segmented label{text-align:center;padding:10px;border-radius:11px;color:var(--muted);font-weight:700;cursor:pointer}.segmented input:checked+label{background:white;color:var(--navy);box-shadow:0 2px 8px rgba(30,58,138,.12)}
.slider-block{margin:0 0 16px}.slider-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.slider-head label{font-weight:700;font-size:13px}.slider-value{font-variant-numeric:tabular-nums;color:var(--navy);font-weight:800;background:var(--sky);padding:3px 8px;border-radius:999px;font-size:12px}
input[type=range]{width:100%;accent-color:var(--blue)}
.primary-btn,.ghost-btn{border:0;border-radius:14px;font-weight:800;cursor:pointer}.primary-btn{width:100%;padding:14px 18px;background:linear-gradient(135deg,var(--navy),var(--blue));color:white;display:flex;justify-content:center;gap:10px;align-items:center}.primary-btn:disabled{opacity:.65;cursor:not-allowed}.ghost-btn{background:white;color:var(--navy);padding:9px 12px;border:1px solid var(--line)}
.status-text{text-align:center;color:var(--muted);font-size:12px;margin-top:9px}.hidden{display:none!important}.result-card{text-align:center;border-color:#cfe0ff}.result-label{font-size:13px;color:var(--muted)}.probability{font-size:52px;font-weight:850;color:var(--navy);letter-spacing:-.04em;margin:4px 0 12px}.result-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-row>div{background:#f8faff;padding:12px;border-radius:14px}.mini-label{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}.interpretation{color:var(--muted);font-size:12px;line-height:1.45;margin:14px 0 0}
.metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}.metric{background:white;border:1px solid var(--line);border-radius:16px;padding:14px}.metric span{display:block;color:var(--muted);font-size:12px}.metric strong{font-size:24px;color:var(--navy)}
.panel h2{font-size:16px;margin:0 0 12px}.matrix{width:100%;border-collapse:collapse;font-size:13px}.matrix th,.matrix td{border:1px solid var(--line);padding:10px;text-align:center}.matrix thead th{background:#eef4ff}.matrix tbody th{background:#f8faff}.prose p{color:var(--muted);line-height:1.55;font-size:14px}.prose h2:not(:first-child){margin-top:20px}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(760px,100%);display:grid;grid-template-columns:repeat(3,1fr);background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:8px 14px calc(8px + env(safe-area-inset-bottom));z-index:30}.nav-btn{border:0;background:transparent;color:#8290a9;padding:6px 0;border-radius:12px;font-weight:700}.nav-btn span{display:block;font-size:20px;line-height:1}.nav-btn small{display:block;font-size:11px;margin-top:3px}.nav-btn.active{color:var(--navy);background:#eff4ff}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:700px){main{padding:22px}.metrics-grid{grid-template-columns:repeat(3,1fr)}.hero-card h1{font-size:34px}}