/* ═══════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  overscroll-behavior: none;
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
  -webkit-font-smoothing: antialiased;
}

input, button { font-family: inherit; }

::-webkit-scrollbar { width: 0; }

/* ═══════════════════════════════════════════════════
   DARK THEME (default)
═══════════════════════════════════════════════════ */
body.dark {
  --bg:       #060d1f;
  --surface:  #0d1a35;
  --surface2: #132040;
  --surface3: #0a1428;
  --border:   #1a2d54;
  --border2:  #253d64;
  --text:     #e2e8f0;
  --sub:      #7c8fad;
  --muted:    #3d5070;
  --blue:     #1e5ddc;
  --blue2:    #4f46e5;
  --green:    #059669;
  --greenL:   #10b981;
  --green-bg: rgba(5,150,105,.09);
  --green-br: rgba(5,150,105,.35);
  --red:      #e11d48;
  --redL:     #f43f5e;
  --red-bg:   rgba(225,29,72,.09);
  --red-br:   rgba(225,29,72,.35);
  --gold:     #f59e0b;
  --goldL:    #fbbf24;
  --purple:   #7c3aed;
  --amber:    #d97706;
  --formula-bg: linear-gradient(135deg,#0a1a40,#112070,#1a1060);
  --formula-br: rgba(30,93,220,.3);
  --shadow:   none;
  --mode-btn-bg: rgba(255,255,255,.08);
  --mode-btn-color: #e2e8f0;
  --track-bg: rgba(255,255,255,.07);
  --disclaimer-bg: rgba(255,255,255,.04);
  --disclaimer-br: rgba(255,255,255,.07);
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME
═══════════════════════════════════════════════════ */
body.light {
  --bg:       #f0f4ff;
  --surface:  #ffffff;
  --surface2: #f4f7ff;
  --surface3: #eef2ff;
  --border:   #dde4f0;
  --border2:  #c8d4e8;
  --text:     #0f172a;
  --sub:      #64748b;
  --muted:    #94a3b8;
  --blue:     #1e5ddc;
  --blue2:    #4f46e5;
  --green:    #059669;
  --greenL:   #047857;
  --green-bg: rgba(5,150,105,.07);
  --green-br: rgba(5,150,105,.3);
  --red:      #e11d48;
  --redL:     #be123c;
  --red-bg:   rgba(225,29,72,.06);
  --red-br:   rgba(225,29,72,.28);
  --gold:     #b45309;
  --goldL:    #92400e;
  --purple:   #6d28d9;
  --amber:    #b45309;
  --formula-bg: linear-gradient(135deg,#1e3a8a,#1e5ddc,#4f46e5);
  --formula-br: rgba(30,93,220,.2);
  --shadow:   0 2px 12px rgba(30,93,220,.07);
  --mode-btn-bg: rgba(0,0,0,.06);
  --mode-btn-color: #334155;
  --track-bg: #dde4f0;
  --disclaimer-bg: #f4f7ff;
  --disclaimer-br: #dde4f0;
}

/* ═══════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════ */
@keyframes fadeUp   { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn   { from { opacity:0 } to { opacity:1 } }
@keyframes pop      { 0%{opacity:0;transform:scale(.88)} 60%{transform:scale(1.04)} 100%{opacity:1;transform:scale(1)} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes slideDown { from{opacity:0;max-height:0} to{opacity:1;max-height:2000px} }
@keyframes checkPop { 0%{transform:scale(0)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }
@keyframes pulseGreen { 0%,100%{box-shadow:0 0 0 0 rgba(5,150,105,.4)} 70%{box-shadow:0 0 0 14px rgba(5,150,105,0)} }
@keyframes pulseRed   { 0%,100%{box-shadow:0 0 0 0 rgba(225,29,72,.4)}  70%{box-shadow:0 0 0 14px rgba(225,29,72,0)} }
@keyframes numberTick { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }
@keyframes spin     { to { transform:rotate(360deg) } }

/* ═══════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════ */
body { background: var(--bg); }

.main {
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 16px 50px;
}

/* ═══════════════════════════════════════════════════
   TOP BAR
═══════════════════════════════════════════════════ */
.top-bar {
  background: var(--surface);
  border-bottom: 1.5px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  transition: background .3s, border-color .3s;
}

.top-bar-inner {
  max-width: 520px;
  margin: 0 auto;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-icon {
  width: 42px; height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  display: flex; align-items: center; justify-content: center;
  font-size: 21px;
  box-shadow: 0 4px 14px rgba(30,93,220,.44);
  flex-shrink: 0;
}

.app-title-group { flex: 1; }
.app-title { font-size: 16px; font-weight: 800; color: var(--text); }
.app-sub   { font-size: 10px; color: var(--sub); margin-top: 1px; letter-spacing: .3px; }

.top-bar-actions { display: flex; gap: 8px; align-items: center; }

.mode-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--mode-btn-bg);
  cursor: pointer; color: var(--mode-btn-color);
  font-size: 12px; font-weight: 600;
  transition: all .2s;
}
.mode-btn:active { transform: scale(.95); }

.reset-btn {
  padding: 7px 12px; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--sub); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.reset-btn:active { transform: scale(.95); }

/* ═══════════════════════════════════════════════════
   FORMULA CARD
═══════════════════════════════════════════════════ */
.formula-card {
  background: var(--formula-bg);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--formula-br);
  position: relative; overflow: hidden;
}

.formula-card::after {
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(30,93,220,.08);
  filter: blur(40px);
}

.formula-badge {
  color: rgba(255,255,255,.42);
  font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 6px;
}

.formula-title {
  color: #fff;
  font-family: 'DM Serif Display', serif;
  font-weight: 900; font-size: 24px;
  margin-bottom: 14px;
}

.formula-grid { display: flex; gap: 8px; }

.formula-item {
  flex: 1;
  background: rgba(255,255,255,.09);
  border-radius: 14px; padding: 10px 6px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.1);
}

.fi-key { font-weight: 800; font-size: 15px; }
.fi-val { color: #fff; font-size: 11px; font-weight: 700; margin-top: 2px; }
.fi-desc { color: rgba(255,255,255,.38); font-size: 9px; margin-top: 2px; }

.formula-item.green .fi-key { color: #10b981; }
.formula-item.gold  .fi-key { color: #fbbf24; }
.formula-item.red   .fi-key { color: #f87171; }

/* ═══════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border-radius: 22px;
  padding: 18px 16px;
  margin-bottom: 14px;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow);
  transition: background .3s, border-color .3s;
}

/* ═══════════════════════════════════════════════════
   STEP HEADERS
═══════════════════════════════════════════════════ */
.step-header {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 14px;
}

.step-badge {
  width: 28px; height: 28px; border-radius: 10px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  color: var(--sub);
  transition: all .3s;
}

.step-badge[data-done="true"] { animation: checkPop .3s ease; }
.step-badge.done-gold   { background: var(--gold);  border-color: var(--gold);  color: #fff; }
.step-badge.done-red    { background: var(--red);   border-color: var(--red);   color: #fff; }
.step-badge.done-green  { background: var(--green); border-color: var(--green); color: #fff; }
.step-badge.green       { background: var(--green); border-color: var(--green); color: #fff; }

.step-info { flex: 1; }
.step-title  { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; }
.step-hint   { font-size: 10px; color: var(--sub); margin-top: 2px; }

.step-title.gold  { color: var(--gold); }
.step-title.red   { color: var(--redL); }
.step-title.green { color: var(--greenL); }

/* ═══════════════════════════════════════════════════
   CHIPS
═══════════════════════════════════════════════════ */
.chip-row { display: flex; gap: 8px; margin-bottom: 12px; }

.chip {
  flex: 1; padding: 13px 8px;
  border-radius: 16px; text-align: center;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  transition: all .22s cubic-bezier(.4,0,.2,1);
  user-select: none;
}
.chip:active { transform: scale(.95); }

.chip-label { font-size: 17px; font-weight: 800; color: var(--text); }
.chip-sub   { font-size: 10px; color: var(--sub); margin-top: 3px; line-height: 1.3; }
.chip-dot   { display: none; width: 6px; height: 6px; border-radius: 50%; margin: 6px auto 0; }

.chip.active .chip-dot { display: block; }

.chip.gold.active {
  border-color: rgba(245,158,11,.5);
  background: rgba(245,158,11,.13);
  box-shadow: 0 4px 16px rgba(245,158,11,.2);
}
.chip.gold.active .chip-label { color: var(--gold); }
.chip.gold.active .chip-sub   { color: rgba(245,158,11,.8); }
.chip.gold.active .chip-dot   { background: var(--gold); }

.chip.red.active {
  border-color: rgba(225,29,72,.5);
  background: rgba(225,29,72,.13);
  box-shadow: 0 4px 16px rgba(225,29,72,.2);
}
.chip.red.active .chip-label { color: var(--red); }
.chip.red.active .chip-sub   { color: rgba(225,29,72,.8); }
.chip.red.active .chip-dot   { background: var(--red); }

/* ═══════════════════════════════════════════════════
   INFO BOX
═══════════════════════════════════════════════════ */
.info-box {
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: background .3s;
}

.info-label {
  font-size: 10px; font-weight: 800;
  color: var(--sub); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 5px;
}

.info-text { font-size: 11px; color: var(--sub); line-height: 1.7; }
.info-text strong { color: var(--text); }

/* ═══════════════════════════════════════════════════
   CA-125 INPUT
═══════════════════════════════════════════════════ */
.input-wrap {
  position: relative;
  margin-bottom: 10px;
}

.input-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px; pointer-events: none;
}

.input-unit {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--sub); font-weight: 700; font-size: 13px;
}

#ca125Input {
  width: 100%;
  padding: 15px 64px 15px 46px;
  border-radius: 16px;
  border: 2px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 18px; font-weight: 700;
  outline: none;
  transition: border .2s, background .3s;
  -moz-appearance: textfield;
}
#ca125Input::-webkit-inner-spin-button,
#ca125Input::-webkit-outer-spin-button { -webkit-appearance: none; }
#ca125Input.has-value { border-color: rgba(225,29,72,.45); }
#ca125Input:focus { border-color: var(--blue); }

.input-warn {
  font-size: 11px; color: var(--gold);
  display: flex; gap: 5px; align-items: center;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════
   US SCORE DISPLAY
═══════════════════════════════════════════════════ */
.u-score-box {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: 16px;
  margin-bottom: 14px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  transition: all .3s;
}

.u-score-box.state-none  { background: var(--surface2);           border-color: var(--border); }
.u-score-box.state-one   { background: rgba(245,158,11,.08);      border-color: rgba(245,158,11,.4); }
.u-score-box.state-multi { background: rgba(225,29,72,.08);       border-color: rgba(225,29,72,.4); }

.u-score-info { flex: 1; }
.u-score-label { font-size: 10px; color: var(--sub); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 3px; }
.u-score-row   { display: flex; align-items: baseline; gap: 8px; }
.u-score-num   { font-size: 26px; font-weight: 900; font-family: 'DM Serif Display', serif; transition: color .3s; }
.u-score-sub   { font-size: 11px; color: var(--sub); }

.u-score-num.c-green { color: var(--green); }
.u-score-num.c-gold  { color: var(--gold); }
.u-score-num.c-red   { color: var(--red); }
.u-score-emoji       { font-size: 28px; transition: all .3s; }

/* ═══════════════════════════════════════════════════
   SCORE LEGEND
═══════════════════════════════════════════════════ */
.score-legend { display: flex; gap: 6px; margin-bottom: 14px; }

.sl-item {
  flex: 1;
  background: var(--surface2);
  border-radius: 11px; padding: 8px 5px;
  text-align: center;
  border: 1px solid var(--border);
  transition: background .3s;
}

.sl-key { font-size: 12px; font-weight: 800; }
.sl-val { font-size: 9px; color: var(--sub); margin-top: 2px; }

.sl-item.green .sl-key { color: var(--green); }
.sl-item.gold  .sl-key { color: var(--gold); }
.sl-item.red   .sl-key { color: var(--red); }

/* ═══════════════════════════════════════════════════
   FEATURE LIST
═══════════════════════════════════════════════════ */
.feat-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px;
  background: var(--surface2);
  border-radius: 14px 14px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  transition: background .3s;
}

.feat-header-text { flex: 1; }
.feat-header-title { font-size: 12px; font-weight: 800; color: var(--text); }
.feat-header-sub   { font-size: 10px; color: var(--sub); margin-top: 1px; }

.feat-count-badge {
  background: rgba(245,158,11,.18);
  color: var(--gold); font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: 20px; flex-shrink: 0;
}

.feat-list {
  background: var(--surface3);
  border-radius: 0 0 14px 14px;
  padding: 10px 10px 4px;
  border: 1px solid var(--border);
  border-top: none;
  transition: background .3s;
}

/* ─── Individual Feature Card ─── */
.feat-card {
  border-radius: 15px; overflow: hidden;
  margin-bottom: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  transition: border .2s, background .2s, box-shadow .2s;
}

.feat-card.selected {
  border-color: rgba(245,158,11,.5);
  background: rgba(245,158,11,.07);
  box-shadow: 0 3px 12px rgba(245,158,11,.13);
}

.feat-main {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
}

.feat-checkbox {
  width: 26px; height: 26px; border-radius: 9px;
  flex-shrink: 0; border: 2px solid var(--border2);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s;
  user-select: none;
}

.feat-checkbox.checked {
  background: var(--gold); border-color: var(--gold);
}

.feat-checkbox.checked::after {
  content: '✓'; color: #fff; font-size: 12px; font-weight: 900;
}

.feat-content { flex: 1; cursor: pointer; }

.feat-row-top { display: flex; align-items: center; gap: 7px; }
.feat-emoji   { font-size: 17px; }
.feat-name    { font-size: 13.5px; font-weight: 700; color: var(--text); transition: color .2s; }
.feat-card.selected .feat-name { color: var(--goldL); }
.feat-detail  { font-size: 11px; color: var(--sub); margin-top: 3px; line-height: 1.4; }

.feat-expand-btn {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  background: var(--surface3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--sub); cursor: pointer;
  transition: transform .2s, background .3s;
}
.feat-expand-btn.open { transform: rotate(180deg); }

.feat-expanded {
  padding: 0 13px 13px;
  border-top: 1px solid var(--border);
  animation: fadeIn .2s ease;
}

.feat-expanded-inner { padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }

.feat-box {
  background: var(--surface3);
  border-radius: 12px; padding: 10px 12px;
  border: 1px solid var(--border);
  transition: background .3s;
}

.feat-box-label {
  font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 4px;
}

.feat-box-label.purple { color: var(--purple); }
.feat-box-label.gold   { color: var(--gold); }

.feat-box-text { font-size: 12px; color: var(--text); line-height: 1.6; }

.feat-ref-row { display: flex; align-items: flex-start; gap: 6px; padding: 6px 2px; }
.feat-ref-text { font-size: 10px; color: var(--sub); font-style: italic; line-height: 1.5; }

.clear-btn {
  width: 100%; margin-top: 8px; padding: 8px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 11px; color: var(--sub);
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: all .2s;
}
.clear-btn:active { transform: scale(.97); }

/* ═══════════════════════════════════════════════════
   RESULT
═══════════════════════════════════════════════════ */
.result-card {
  border-radius: 26px; padding: 26px 22px;
  text-align: center;
  margin-bottom: 18px;
  animation: pop .35s cubic-bezier(.4,0,.2,1);
  transition: background .3s, border .3s;
}

.result-card.low  { background: var(--green-bg); border: 2px solid var(--green-br); }
.result-card.high { background: var(--red-bg);   border: 2px solid var(--red-br); }

.result-icon { font-size: 44px; margin-bottom: 10px; animation: float 3s ease-in-out infinite; }

.result-score-label {
  font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 5px;
}
.result-card.low  .result-score-label { color: rgba(5,150,105,.65); }
.result-card.high .result-score-label { color: rgba(225,29,72,.65); }

.result-score {
  font-size: 68px; font-weight: 900; line-height: 1;
  font-family: 'DM Serif Display', serif;
  animation: numberTick .4s ease;
}
.result-card.low  .result-score { color: var(--green); }
.result-card.high .result-score { color: var(--red); }

.result-very-high {
  font-size: 11px; margin-top: 4px; font-style: italic;
  color: rgba(225,29,72,.65);
}

.result-bar-wrap { margin: 14px 0 18px; }
.result-bar-track {
  height: 7px; border-radius: 8px;
  background: var(--track-bg); overflow: hidden;
}
.result-bar-fill {
  height: 100%; border-radius: 8px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}
.result-card.low  .result-bar-fill { background: linear-gradient(90deg, var(--green), var(--greenL)); }
.result-card.high .result-bar-fill { background: linear-gradient(90deg, var(--red),   var(--redL)); }

.result-outcome {
  border-radius: 18px; padding: 16px 18px;
  margin-bottom: 14px;
}
.result-card.low  .result-outcome { background: rgba(5,150,105,.14);  border: 1.5px solid rgba(5,150,105,.45);  animation: pulseGreen 2s ease-in-out infinite; }
.result-card.high .result-outcome { background: rgba(225,29,72,.14);  border: 1.5px solid rgba(225,29,72,.45);  animation: pulseRed   2s ease-in-out infinite; }

.result-label { font-size: 20px; font-weight: 900; margin-bottom: 5px; }
.result-card.low  .result-label { color: var(--green); }
.result-card.high .result-label { color: var(--red); }

.result-subtext { font-size: 14px; color: var(--text); line-height: 1.55; font-weight: 500; }

.result-breakdown {
  background: var(--surface2); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 14px;
  border: 1px solid var(--border);
  transition: background .3s;
}
.rb-label { font-size: 10px; color: var(--sub); text-transform: uppercase; letter-spacing: 1px; font-weight: 800; margin-bottom: 8px; }
.rb-chips { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.rb-chip {
  font-size: 13px; font-weight: 800;
  padding: 3px 10px; border-radius: 20px;
}
.rb-chip.c-green  { color: var(--green); background: rgba(5,150,105,.12); }
.rb-chip.c-gold   { color: var(--gold);  background: rgba(245,158,11,.12); }
.rb-chip.c-red    { color: var(--red);   background: rgba(225,29,72,.12); }
.rb-chip.c-rmi-low  { color: var(--green); background: rgba(5,150,105,.12); }
.rb-chip.c-rmi-high { color: var(--red);   background: rgba(225,29,72,.12); }
.rb-chip.c-muted  { color: var(--muted); font-size: 11px; font-weight: 500; }
.rb-features { margin-top: 8px; font-size: 10px; color: var(--sub); }

.result-disclaimer {
  padding: 10px 14px;
  background: var(--disclaimer-bg);
  border: 1px solid var(--disclaimer-br);
  border-radius: 14px;
  font-size: 10.5px; color: var(--sub);
  line-height: 1.65; font-style: italic;
}

/* ═══════════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════════ */
.empty-card {
  background: var(--surface);
  border-radius: 26px; padding: 28px 20px;
  text-align: center;
  border: 1.5px dashed var(--border);
  margin-bottom: 18px;
  box-shadow: var(--shadow);
  transition: background .3s;
}

.empty-icon  { font-size: 44px; animation: float 2.5s ease-in-out infinite; margin-bottom: 12px; }
.empty-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.empty-sub   { font-size: 12px; color: var(--sub); line-height: 1.6; }

.progress-chips { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.prog-chip {
  padding: 5px 11px; border-radius: 20px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  font-size: 10px; font-weight: 700; color: var(--sub);
  transition: all .3s;
}
.prog-chip.active {
  background: rgba(30,93,220,.15);
  border-color: var(--blue); color: var(--blue);
}

/* ═══════════════════════════════════════════════════
   RISK SCALE
═══════════════════════════════════════════════════ */
.section-title {
  font-size: 12px; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}

.risk-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px; border-radius: 15px;
  border: 1.5px solid;
  margin-bottom: 10px;
}
.risk-row:last-of-type { margin-bottom: 0; }

.green-risk { background: var(--green-bg); border-color: rgba(5,150,105,.25); }
.red-risk   { background: var(--red-bg);   border-color: rgba(225,29,72,.25); }

.risk-bar-vert {
  width: 5px; height: 44px; border-radius: 4px; flex-shrink: 0;
}
.risk-bar-vert.green { background: var(--green); }
.risk-bar-vert.red   { background: var(--red); }

.risk-row-inner { flex: 1; }
.risk-top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; flex-wrap: wrap; }
.risk-range { font-size: 14px; font-weight: 800; }
.risk-range.green { color: var(--green); }
.risk-range.red   { color: var(--red); }
.risk-badge {
  font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 20px;
}
.risk-badge.green { background: rgba(5,150,105,.15);  color: var(--green); }
.risk-badge.red   { background: rgba(225,29,72,.15);  color: var(--red); }
.risk-desc { font-size: 11px; color: var(--sub); }
.risk-icon { font-size: 22px; }

.amber-note {
  margin-top: 12px; padding: 10px 12px;
  background: rgba(217,119,6,.08);
  border-radius: 12px; border: 1px solid rgba(217,119,6,.25);
  font-size: 11px; color: var(--amber); line-height: 1.65;
}

.perf-box {
  margin-top: 10px; padding: 12px;
  background: var(--surface2); border-radius: 13px;
  border: 1px solid var(--border);
  transition: background .3s;
}
.perf-label { font-size: 10px; font-weight: 800; color: var(--sub); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 7px; }
.perf-grid  { display: flex; gap: 8px; }
.perf-item  { flex: 1; text-align: center; background: var(--surface); border-radius: 10px; padding: 8px 4px; transition: background .3s; }
.perf-val   { font-size: 15px; font-weight: 800; color: var(--blue); }
.perf-desc  { font-size: 9px; color: var(--sub); margin-top: 2px; }

/* ═══════════════════════════════════════════════════
   REFERENCES
═══════════════════════════════════════════════════ */
.refs-card { padding: 0; overflow: hidden; }

.refs-toggle {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 15px 16px;
  background: transparent; border: none; cursor: pointer;
  text-align: left; transition: background .15s;
}
.refs-toggle:hover { background: rgba(255,255,255,.02); }
.refs-toggle:active { transform: scale(.98); }

.refs-toggle-icon  { font-size: 20px; }
.refs-toggle-text  { flex: 1; }
.refs-toggle-title { font-size: 13px; font-weight: 800; color: var(--text); }
.refs-toggle-sub   { font-size: 10px; color: var(--sub); margin-top: 1px; }
.refs-arrow        { font-size: 13px; color: var(--sub); transition: transform .25s; }
.refs-arrow.open   { transform: rotate(180deg); }

.refs-body {
  padding: 0 14px 16px;
  border-top: 1px solid var(--border);
  animation: slideDown .3s ease;
}

.refs-tip {
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--surface2); border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 11px; color: var(--sub); line-height: 1.6;
  transition: background .3s;
}

/* ─── Ref Card ─── */
.ref-card {
  border-radius: 18px; overflow: hidden;
  margin-bottom: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  box-shadow: var(--shadow);
  transition: background .3s, border .3s;
}

.ref-toggle {
  display: flex; gap: 12px; padding: 14px;
  cursor: pointer; transition: background .15s;
  border: none; background: transparent; width: 100%; text-align: left;
}
.ref-toggle:active { transform: scale(.98); }

.ref-icon-box {
  width: 44px; height: 44px; border-radius: 14px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}

.ref-text { flex: 1; min-width: 0; }
.ref-title   { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.ref-full    { font-size: 11px; color: var(--sub); margin-top: 3px; line-height: 1.4; }
.ref-badge   {
  display: inline-block; margin-top: 5px;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}
.ref-arrow { font-size: 12px; color: var(--sub); transition: transform .2s; flex-shrink: 0; align-self: flex-start; margin-top: 4px; }
.ref-arrow.open { transform: rotate(180deg); }

.ref-body {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  animation: fadeIn .22s ease;
}

.ref-authors-label, .ref-note-label {
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: var(--sub); margin-bottom: 3px;
}
.ref-authors { font-size: 11px; color: var(--sub); line-height: 1.6; margin-bottom: 10px; }

.ref-note-box {
  border-radius: 12px; padding: 10px 12px;
  margin-bottom: 12px; font-size: 12px; line-height: 1.6;
  transition: background .3s;
}

.ref-links { display: flex; flex-direction: column; gap: 8px; }

.ref-link-btn {
  width: 100%; padding: 12px 16px;
  border-radius: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; transition: opacity .15s, transform .12s;
  border: none;
}
.ref-link-btn:active { transform: scale(.97); opacity: .85; }
.ref-link-btn.primary { color: #fff; }
.ref-link-btn.secondary {
  background: var(--surface3);
  border: 1.5px solid var(--border);
}

.ref-link-label { flex: 1; text-align: left; }
.ref-link-title { font-weight: 700; font-size: 13px; }
.ref-link-btn.primary   .ref-link-title { color: #fff; }
.ref-link-btn.secondary .ref-link-title { color: var(--text); }
.ref-link-url   { font-size: 10px; margin-top: 1px; word-break: break-all; }
.ref-link-btn.primary   .ref-link-url { color: rgba(255,255,255,.55); }
.ref-link-btn.secondary .ref-link-url { color: var(--sub); }
.ref-link-arrow { font-size: 18px; flex-shrink: 0; }
.ref-link-btn.primary   .ref-link-arrow { color: rgba(255,255,255,.65); }
.ref-link-btn.secondary .ref-link-arrow { color: var(--sub); }

.formula-note {
  margin-top: 10px; padding: 12px 14px;
  background: var(--surface2); border-radius: 14px;
  border: 1px solid var(--border);
  transition: background .3s;
}
.formula-note-label { font-size: 10px; font-weight: 800; color: var(--sub); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 7px; }
.formula-note-text  { font-size: 11px; color: var(--sub); line-height: 1.8; }
.formula-note-text strong { color: var(--text); }

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
.footer {
  margin-top: 16px; padding: 14px 16px;
  background: var(--surface);
  border-radius: 18px; border: 1px solid var(--border);
  text-align: center; box-shadow: var(--shadow);
  transition: background .3s;
}

.footer-name { font-size: 12px; font-weight: 700; color: var(--sub); margin-bottom: 4px; }
.footer-sub  { font-size: 10px; color: var(--muted); line-height: 1.8; }
.footer-copy { font-size: 9px; color: var(--border); margin-top: 4px; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .formula-title { font-size: 20px; }
  .result-score  { font-size: 56px; }
  .chip-row      { gap: 6px; }
  .chip          { padding: 11px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}