/* SCREENS */
  .screen { display: none; }
  .screen.active { display: block; animation: fadeUp 0.3s ease; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

  /* STEP BAR */
  .step-bar { display: flex; gap: 3px; margin-bottom: 44px; }
  .step-seg { height: 5px; flex: 1; background: var(--border); transition: background 0.4s, box-shadow 0.4s; border-radius: 3px; }
  .step-seg.active { background: var(--accent); box-shadow: 0 0 8px rgba(87,187,70,0.5); }
  .step-seg.done { background: var(--accent2); }

  /* TYPOGRAPHY */
  .screen-title { font-family: 'Sabre Shark','Barlow Condensed', sans-serif; font-size: 56px; font-weight: 800; letter-spacing: 2px; line-height: 0.95; margin-bottom: 8px; text-transform: uppercase; }
  .screen-sub { color: var(--muted); font-size: 13px; font-family: 'DM Mono', monospace; letter-spacing: 1px; margin-bottom: 40px; }

  /* FORM */
  .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
  .field-group { display: flex; flex-direction: column; gap: 8px; }
  .field-group label { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; }
  .field-group select, .field-group input {
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    font-family: 'Barlow', sans-serif; font-size: 15px; font-weight: 500;
    padding: 12px 16px; outline: none; transition: border-color 0.2s; -webkit-appearance: none; width: 100%; border-radius: 2px;
  }
  .field-group select:focus, .field-group input:focus { border-color: var(--accent); }

  /* BUTTONS */
  .btn-primary {
    background: var(--accent); color: #0d2448; border: none;
    font-family: 'Gotham','Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700;
    letter-spacing: 3px; padding: 13px 38px; cursor: pointer;
    transition: background 0.2s, transform 0.1s; text-transform: uppercase; border-radius: 2px;
  }
  .btn-primary:hover { background: var(--accent-light); transform: translateY(-1px); }
  .btn-primary:active { transform: translateY(0); }
  .btn-secondary {
    background: transparent; color: var(--muted); border: 1px solid var(--border);
    font-family: 'Gotham','Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
    letter-spacing: 2px; padding: 11px 22px; cursor: pointer;
    transition: border-color 0.2s, color 0.2s; text-transform: uppercase; border-radius: 2px;
  }
  .btn-secondary:hover { border-color: var(--muted); color: var(--text); }
  .btn-sm {
    font-size: 13px; letter-spacing: 2px; padding: 6px 11px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  }
  .btn-sm .material-icons { font-size: 18px; line-height: 1; }
  .btn-danger {
    background: transparent; color: var(--red); border: 1px solid var(--red);
    font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
    letter-spacing: 1px; padding: 8px 16px; cursor: pointer;
    transition: background 0.2s, color 0.2s; text-transform: uppercase; border-radius: 2px;
  }
  .btn-danger:hover { background: var(--red); color: #fff; }

  /* SECTION LABEL */
  .section-label {
    font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
    letter-spacing: 4px; color: var(--accent); margin-bottom: 4px; margin-top: 32px;
    display: flex; align-items: center; gap: 12px; text-transform: uppercase;
  }
  .section-label-hint {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
    margin-top: 0;
    opacity: 0.75;
    line-height: 1.5;
  }
  .section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

  /* TEST CARDS */
  .test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 8px; }
  .test-card { background: var(--surface); border: 1px solid var(--border); padding: 18px 20px; transition: border-color 0.3s, background 0.3s, border-width 0.2s; border-radius: 3px; }
  .test-card:focus-within { border-color: var(--accent); }
  .test-card.card-high { border: 2px solid rgba(87,187,70,0.7); background: rgba(87,187,70,0.04); padding: 17px 19px; }
  .test-card.card-mid  { border: 2px solid rgba(255,204,71,0.6); background: rgba(255,204,71,0.03); padding: 17px 19px; }
  .test-card.card-low  { border: 2px solid rgba(255,144,71,0.6); background: rgba(255,144,71,0.03); padding: 17px 19px; }
  .test-card-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
  .test-card-header:hover .card-expand-icon { border-color: var(--accent); color: var(--accent); background: rgba(87,187,70,0.06); }
  .card-expand-icon { font-family:'DM Mono',monospace; font-size:7px; letter-spacing:2px; color:rgba(184,200,208,0.35); border:0.5px solid rgba(184,200,208,0.15); border-radius:2px; padding:3px 9px; background:transparent; transition:color 0.15s, border-color 0.15s, background 0.15s; white-space:nowrap; text-transform:uppercase; }
  .test-card.card-open .card-expand-icon { color: var(--accent); border-color: rgba(87,187,70,0.4); background: rgba(87,187,70,0.05); }
  .test-card-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.22,1,0.36,1); }
  .test-card-body > * { overflow: hidden; min-height: 0; }
  .test-just { display: block !important; opacity: 1 !important; margin-top: 8px; }
  .test-name { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; color: rgba(240,244,240,0.75); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
  .test-input-row { display: flex; gap: 8px; align-items: center; }
  .test-input-row input {
    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
    font-family: 'DM Mono', monospace; font-size: 18px; padding: 8px 10px;
    outline: none; width: 70px; text-align: center; transition: border-color 0.2s; border-radius: 2px;
  }
  .test-input-row input:focus { border-color: var(--accent); }
  .test-sep { color: var(--muted2); font-family: 'DM Mono', monospace; font-size: 18px; }
  .test-unit { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 1px; text-transform: uppercase; }
  .test-anchors { display: none; }
  .score-bar-wrap { margin-top: 10px; height: 10px; background: var(--border); overflow: visible; border-radius: 5px; position: relative; margin-bottom: 18px; }
  .score-bar-fill { height: 100%; background: var(--accent); transition: width 0.4s ease, background 0.4s ease; width: 0%; border-radius: 5px; }
  .bar-tick { position: absolute; top: -2px; width: 1px; height: 14px; background: var(--bg); opacity: 0.6; pointer-events: none; z-index: 2; }
  .bar-tick-label { position: absolute; top: 14px; font-family: 'DM Mono', monospace; font-size: 9px; color: var(--muted2); transform: translateX(-50%); pointer-events: none; letter-spacing: 0.5px; }
  .score-bar-fill.bar-high { background: #57bb46; box-shadow: 0 0 6px rgba(87,187,70,0.4); }
  .score-bar-fill.bar-mid  { background: #0098D0; }
  .score-bar-fill.bar-low  { background: #1050D8; }
  .bw-ratio { margin-top: 6px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted2); letter-spacing: 1px; min-height: 16px; }
  .bw-ratio.has-val { color: var(--accent-light); }
  .durability-note { font-family: 'Barlow', sans-serif; font-size: 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 12px 16px; margin-bottom: 20px; border-radius: 3px; }

  /* NAV ROW */
  .nav-row { display: flex; gap: 12px; margin-top: 32px; align-items: center; flex-wrap: wrap; }

  /* RESULTS */
  .results-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  .final-score-block { background: var(--surface); border: 1px solid var(--border); padding: 36px; text-align: center; position: relative; overflow: hidden; border-radius: 3px; }
  .final-score-block::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(87,187,70,0.08) 0%, transparent 65%); pointer-events: none; }
  .score-number { font-family: 'Barlow Condensed', sans-serif; font-size: 120px; font-weight: 800; line-height: 1; color: var(--accent); letter-spacing: -2px; }
  .score-number.score-pop { animation: scorePop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; }
  @keyframes scorePop { 0%{transform:scale(0.5);opacity:0} 100%{transform:scale(1);opacity:1} }
  .score-label { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 4px; color: var(--muted); text-transform: uppercase; margin-bottom: 16px; }
  .level-badge { display: inline-block; background: var(--accent); color: #0d2448; font-family: 'Sabre Shark','Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 4px; padding: 8px 28px; margin-top: 12px; border-radius: 3px; text-transform: uppercase; transition: background 0.3s, box-shadow 0.3s; }
  .level-badge.badge-pop { animation: badgePop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
  @keyframes badgePop { 0%{transform:scale(0.7);opacity:0} 100%{transform:scale(1);opacity:1} }
  .breakdown-list { display: flex; flex-direction: column; gap: 6px; }
  .breakdown-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; }
  .breakdown-name { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 1px; width: 130px; flex-shrink: 0; text-transform: uppercase; }
  .breakdown-bar-wrap { flex: 1; height: 6px; background: var(--border); border-radius: 3px; }
  .breakdown-bar-fill { height: 100%; transition: width 0.6s ease; border-radius: 3px; }
  .breakdown-score { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; color: var(--text); width: 36px; text-align: right; }
  .breakdown-raw { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.5px; text-align: right; white-space: nowrap; }
  .breakdown-flag { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.5px; padding: 7px 14px 7px 28px; line-height: 1.5; border-left: 2px solid; margin: 0; }
  .breakdown-flag-red   { color: #ff8080; border-color: #ff4040; background: rgba(255,64,64,0.06); }
  .breakdown-flag-amber { color: #ffcc47; border-color: #ffcc47; background: rgba(255,204,71,0.06); }
  #radarWrap { border: 1px solid var(--border2); padding: 24px; border-radius: 6px; box-shadow: inset 0 0 40px rgba(0,0,0,0.2); }
  #insightBlock { background: rgba(87,187,70,0.07); border: 1px solid rgba(87,187,70,0.25); border-radius: 5px; padding: 14px 16px; }
  .srt-flag { background: rgba(255,80,80,0.10); border: 1px solid rgba(255,80,80,0.45); border-left: 3px solid #ff4040; border-radius: 5px; padding: 14px 16px; margin-top: 12px; }
  .srt-flag-title { font-family: 'DM Mono', monospace; font-size: 10px; color: #ff6060; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
  .srt-flag-text { font-family: 'Barlow', sans-serif; font-size: 13px; color: var(--text); line-height: 1.6; }
  .srt-flag-text strong { color: #ff8080; }
  .srt-live-warn { display:none; font-family:'DM Mono',monospace; font-size:12px; color:#ff6060; margin-top:6px; letter-spacing:0; line-height:1.6; }
  .srt-live-warn.visible { display:block; }
  .srt-live-amber { display:none; font-family:'DM Mono',monospace; font-size:12px; color:#0098D0; margin-top:6px; letter-spacing:0; line-height:1.6; }
  .srt-live-amber.visible { display:block; }
  .srt-live-pass { display:none; font-family:'DM Mono',monospace; font-size:12px; color:#57bb46; margin-top:6px; letter-spacing:0; }
  .srt-live-pass.visible { display:block; }
  .srt-score-input { width:70px; font-family:'Barlow',sans-serif; font-size:22px; font-weight:700; text-align:center; }
  .srt-score-display { font-family:'Barlow Condensed',sans-serif; font-size:13px; color:var(--muted); letter-spacing:1px; margin-top:6px; }
    .balance-flag { background: rgba(255,80,80,0.10); border: 1px solid rgba(255,80,80,0.45); border-left: 3px solid #ff4040; border-radius: 5px; padding: 14px 16px; margin-top: 12px; }
  .balance-flag-title { font-family: 'DM Mono', monospace; font-size: 10px; color: #ff6060; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
  .balance-flag-text { font-family: 'Barlow', sans-serif; font-size: 13px; color: var(--text); line-height: 1.6; }
  .balance-flag-text strong { color: #ff8080; }
  .slb-live-warn { display:none; font-family:'DM Mono',monospace; font-size:12px; color:#ff6060; margin-top:6px; letter-spacing:0; line-height:1.6; }
  .slb-live-warn.visible { display:block; }
  .slb-live-pass { display:none; font-family:'DM Mono',monospace; font-size:12px; color:#57bb46; margin-top:6px; letter-spacing:0; }
  .slb-live-pass.visible { display:block; }
  .test-just { display:none; font-family:'DM Mono',monospace; font-size:13px; color:var(--muted); margin-top:8px; line-height:1.65; opacity:0; transition: opacity 0.2s ease; }
  .test-just.visible { display:block; opacity:1; }
  .test-just { display:none; font-family:'DM Mono',monospace; font-size:13px; color:var(--muted); margin-top:6px; line-height:1.65; opacity:0; transition: opacity 0.2s ease; }
  .test-card-section { margin-top:14px; padding-top:14px; border-top:1px solid rgba(184,200,208,0.07); }
  .test-card-section-label { font-family:'DM Mono',monospace; font-size:8px; color:var(--accent); letter-spacing:2.5px; text-transform:uppercase; margin-bottom:8px; opacity:0.75; display:flex; align-items:center; gap:8px; }
  .test-card-section-label::after { content:''; flex:1; height:0.5px; background:linear-gradient(90deg,rgba(87,187,70,0.2),transparent); display:block; }
  .test-card-section-text { font-family:'Barlow',sans-serif; font-size:13px; color:rgba(184,200,208,0.65); line-height:1.8; padding:10px 12px; background:rgba(184,200,208,0.025); border-left:2px solid rgba(184,200,208,0.12); border-radius:0 3px 3px 0; }
  .test-card.card-open .test-card-body { grid-template-rows: 1fr; }
  .test-just.visible { display:block; opacity:1; }
  #insightBlock .insight-label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
  #insightBlock .insight-text { font-family: 'Barlow', sans-serif; font-size: 14px; color: var(--text); line-height: 1.6; }
  #insightBlock .insight-text strong { color: var(--accent); font-weight: 600; }
  #radarWrap canvas { width: 100% !important; height: auto !important; }

  /* SAVE BANNER */
  .save-banner {
    background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
    padding: 18px 24px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-radius: 3px;
  }
  .save-banner-text { font-family: 'Barlow', sans-serif; font-size: 14px; color: var(--muted); }
  .save-banner-text strong { color: var(--accent-light); font-weight: 600; }

  /* HOME SCREEN */
  .home-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
  /* LANDING HERO */
  /* ── HERO ── */
  /* ── HERO / LANDING ────────────────────────────────────────────── */