@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;700&family=DM+Sans:wght@300;400;700&family=Space+Mono:wght@400;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --a1:#1a1200;--a2:#2e2000;--a3:#4a3400;--a4:#6b4c00;--a5:#8c6500;--a6:#b38200;--a7:#d4a000;--a8:#f0be00;--a9:#ffe066;
  --bg:#000;--surf:#0d0d0d;--bdr:#1e1e1e;--txt:#e8e8f0;--muted:#9a9ab8;
  --mono:'Space Mono',monospace;--disp:'Bebas Neue',sans-serif;--cond:'Barlow Condensed',sans-serif;--body:'DM Sans',sans-serif;
}

/* ── Backgrounds ──────────────────────────────── */
body.bg-black   { --bg:#000000; --surf:#0d0d0d; --bdr:#1e1e1e; }
body.bg-grey    { --bg:#0f0f0f; --surf:#1a1a1a; --bdr:#2a2a2a; }
body.bg-navy    { --bg:#050810; --surf:#0c1020; --bdr:#1a2035; }
body.bg-forest  { --bg:#040a05; --surf:#0b130c; --bdr:#182019; }
body.bg-plum    { --bg:#08050d; --surf:#120b18; --bdr:#201525; }
body.bg-pink    { --bg:#150610; --surf:#200d18; --bdr:#341525; }
body.bg-white   { --bg:#f5f5f5; --surf:#ffffff; --bdr:#ddd; --txt:#111111; --muted:#555577; }

/* ── Accent palettes ──────────────────────────── */
body.accent-amber  { --a1:#1a1200;--a2:#2e2000;--a3:#4a3400;--a4:#6b4c00;--a5:#8c6500;--a6:#b38200;--a7:#d4a000;--a8:#f0be00;--a9:#ffe066; }
body.accent-pink   { --a1:#1a0810;--a2:#2e1020;--a3:#4a1a35;--a4:#6b2550;--a5:#8c3570;--a6:#b35090;--a7:#d470b0;--a8:#f090cc;--a9:#ffbfe6; }
body.accent-blue   { --a1:#000d1a;--a2:#001830;--a3:#00284d;--a4:#003d73;--a5:#005299;--a6:#0070cc;--a7:#1a90f0;--a8:#50b0ff;--a9:#9dd4ff; }
body.accent-green  { --a1:#001a07;--a2:#002e0f;--a3:#004a1a;--a4:#006b28;--a5:#008c37;--a6:#00b34d;--a7:#00d460;--a8:#20f07a;--a9:#80ff9a; }
body.accent-purple { --a1:#0f0020;--a2:#1a0035;--a3:#2a0054;--a4:#3d007a;--a5:#5200a0;--a6:#6e00cc;--a7:#8e20f0;--a8:#ae50ff;--a9:#cc90ff; }
body.accent-red    { --a1:#1a0000;--a2:#2e0000;--a3:#4a0800;--a4:#6b1000;--a5:#8c1800;--a6:#b32500;--a7:#d43800;--a8:#f05500;--a9:#ff8040; }
body.accent-mono   { --a1:#111;--a2:#1e1e1e;--a3:#2e2e2e;--a4:#444;--a5:#5c5c5c;--a6:#777;--a7:#999;--a8:#bbb;--a9:#e0e0e0; }
}
html{background:var(--bg);min-height:100vh;}
body{background:var(--bg);color:var(--txt);font-family:var(--body);min-height:100vh;overflow-x:hidden;transition:background .2s;}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");pointer-events:none;z-index:0;}

/* VIEW SYSTEM */
.view{display:none;position:relative;z-index:1;}
.view.active{display:block;}

/* HOME */
.home-page{width:100%;padding:24px 16px 60px;display:flex;flex-direction:column;align-items:center;gap:20px;box-sizing:border-box;}
.header{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;}
.title{font-family:var(--disp);font-size:3.2rem;letter-spacing:.12em;color:var(--a9);line-height:1;text-shadow:0 0 40px rgba(255,224,102,.2);}
.tagline{font-size:.8rem;color:var(--muted);text-align:center;max-width:280px;line-height:1.5;}
.hive-wrap{position:relative;width:100%;margin:0 auto;}
.hive-wrap svg{display:block;width:100%;height:auto;}
.hex-lbl{position:absolute;font-family:var(--disp);font-size:13px;letter-spacing:.1em;color:white;white-space:nowrap;transform-origin:center;pointer-events:none;line-height:1;text-align:center;text-shadow:0 0 4px #000,0 0 10px #000;}
.hex-lbl .sc{display:block;font-family:var(--cond);font-size:20px;font-weight:700;color:var(--a9);margin-top:2px;text-shadow:0 0 8px rgba(255,224,102,.5);}
.hex-lbl .sb{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:rgba(255,255,255,.4);margin-top:2px;}
.prog-sec{width:100%;display:flex;flex-direction:column;gap:8px;}
.prog-lbl{display:flex;justify-content:space-between;}
.prog-title{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;color:var(--muted);text-transform:uppercase;}
.prog-ct{font-family:var(--mono);font-size:.7rem;color:var(--a7);}
.prog-track{width:100%;height:3px;background:#1a1a1a;border-radius:2px;overflow:hidden;}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--a6),var(--a9));border-radius:2px;transition:width .6s ease;}
.roster{width:100%;display:flex;flex-direction:column;gap:6px;}
.r-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surf);border:1px solid var(--bdr);border-radius:6px;cursor:pointer;transition:border-color .15s,background .15s;}
.r-item:hover{border-color:#333;background:#111;}
.r-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.r-name{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.1em;flex:1;text-transform:uppercase;}
.r-desc{font-size:.75rem;color:var(--muted);flex:2;line-height:1.3;}
.r-status{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;padding:3px 8px;border-radius:3px;flex-shrink:0;text-transform:uppercase;}
.r-status.done{background:rgba(212,160,0,.15);color:var(--a7);border:1px solid rgba(212,160,0,.3);}
.r-status.empty{background:transparent;color:#333;border:1px solid #1e1e1e;}
.r-status.open{background:rgba(107,107,138,.1);color:var(--muted);border:1px solid rgba(107,107,138,.2);font-style:italic;}
.foot{font-family:var(--mono);font-size:.6rem;color:#2a2a3a;letter-spacing:.1em;text-align:center;line-height:1.8;text-transform:uppercase;}

/* SUB-HIVE PANEL */
.panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:200;pointer-events:none;transition:background .3s ease;}
.panel-overlay.open{background:rgba(0,0,0,.7);pointer-events:all;}
.panel{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:520px;background:#050505;border-top:1px solid #2a2a2a;border-radius:20px 20px 0 0;z-index:201;transition:transform .35s cubic-bezier(.32,.72,0,1);max-height:90vh;overflow-y:auto;padding:0 0 40px;}
.panel.open{transform:translateX(-50%) translateY(0);}
.panel-handle{width:40px;height:4px;background:#2a2a2a;border-radius:2px;margin:12px auto 0;}
.panel-head{padding:16px 20px 12px;border-bottom:1px solid #1a1a1a;display:flex;justify-content:space-between;align-items:flex-start;}
.panel-title{font-family:var(--disp);font-size:1.8rem;letter-spacing:.1em;color:var(--a9);}
.panel-sub{font-family:var(--mono);font-size:.65rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:2px;}
.panel-close{background:#1a1a1a;border:none;color:#888;font-size:1rem;width:30px;height:30px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.panel-close:hover{background:#2a2a2a;color:white;}
.panel-body{padding:16px 20px;}
.panel-action{display:block;width:100%;background:var(--a7);border:none;color:#000;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;padding:13px;border-radius:4px;cursor:pointer;text-transform:uppercase;font-weight:700;transition:background .15s;margin-top:8px;}
.panel-action:hover{background:var(--a9);}

/* HEX PAGE */
.hex-page{max-width:440px;margin:0 auto;padding:20px 16px 60px;display:flex;flex-direction:column;align-items:center;gap:16px;}
.top-bar{display:flex;justify-content:space-between;align-items:center;width:100%;}
.back-btn{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--muted);background:transparent;border:1px solid #222;padding:6px 12px;border-radius:4px;cursor:pointer;text-transform:uppercase;}
.back-btn:hover{border-color:#444;color:var(--txt);}
.page-name{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;}
.hex-wrap-sm{position:relative;width:320px;height:320px;flex-shrink:0;}
.hex-wrap-sm svg{position:absolute;top:0;left:0;}
.sm-lbl{position:absolute;font-family:var(--disp);font-size:14px;color:white;letter-spacing:.08em;white-space:nowrap;transform-origin:center;pointer-events:none;line-height:1;text-shadow:0 0 4px #000,0 0 8px #000;}
.legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.leg-item{display:flex;align-items:center;gap:4px;font-size:.7rem;color:var(--muted);}
.leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.controls{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ctrl{background:#111;border:1px solid #222;border-left-width:3px;border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;}
.ctrl-head{display:flex;justify-content:space-between;align-items:center;}
.ctrl-label{font-size:.78rem;font-weight:700;}
.ctrl-right{display:flex;align-items:center;gap:6px;}
.ctrl-val{font-family:var(--mono);font-size:.82rem;font-weight:700;}
.syw-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;border:1px solid #2a2a2a;padding:2px 5px;border-radius:3px;cursor:pointer;}
.syw-tag:hover{border-color:var(--a7);color:var(--a7);}
input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:#333;outline:none;cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:white;cursor:pointer;border:2px solid #000;}
.action-row{display:flex;gap:8px;width:100%;}
.action-btn{flex:1;background:transparent;border:1px solid #333;color:#888;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;padding:10px 8px;border-radius:4px;cursor:pointer;text-transform:uppercase;transition:all .2s;}
.action-btn.primary{border-color:var(--a7);color:var(--a7);}
.action-btn.primary:hover{background:var(--a7);color:#000;}
.guidance{width:100%;padding:12px 14px;border:1px solid #222;border-radius:6px;background:#0d0d0d;}
.guidance-text{font-size:.78rem;color:#999;line-height:1.6;font-family:var(--mono);}
.guidance-text strong{color:#888;}
.tests-list{width:100%;display:flex;flex-direction:column;gap:6px;}
.test-row{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--surf);border:1px solid var(--bdr);border-radius:6px;cursor:pointer;transition:border-color .15s,background .15s;min-width:0;}
.test-row:hover{border-color:#333;background:#111;}
.test-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.test-name{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.1em;flex:1;text-transform:uppercase;}
.test-tool{font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;flex-shrink:0;}
.test-score{font-family:var(--cond);font-size:1.2rem;font-weight:700;flex-shrink:0;width:28px;text-align:right;}
.lanes{width:100%;display:flex;flex-direction:column;gap:6px;}
.lane-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#0d0d0d;border:1px solid #1a1a1a;border-left:3px solid #333;border-radius:6px;}
.lane-name{font-family:var(--mono);font-size:.82rem;font-weight:700;width:90px;flex-shrink:0;letter-spacing:.08em;}
.lane-desc{font-size:.72rem;color:#888;flex:1;line-height:1.4;}
.lane-score{font-family:var(--cond);font-size:1.2rem;font-weight:700;flex-shrink:0;width:28px;text-align:right;}
.note{width:100%;padding:12px 14px;border:1px dashed #222;border-radius:6px;background:#050505;}
.note-text{font-size:.72rem;color:#777;line-height:1.6;font-family:var(--mono);}
.note-text strong{color:#999;}
.test-badge{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;padding:3px 7px;border-radius:3px;flex-shrink:0;text-transform:uppercase;}
.test-badge.coming{background:#1a1a1a;color:#888;border:1px solid #444;}

/* MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.97);z-index:300;overflow-y:auto;padding:20px 16px 40px;}
.modal-overlay.open{display:block;}
.modal{max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.modal-header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid #222;}
.modal-title{font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;color:var(--txt);text-transform:uppercase;}
.modal-close{background:#222;border:none;color:#888;font-size:1rem;width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.modal-close:hover{background:#333;color:white;}
.modal-intro{font-size:.78rem;color:#aaa;line-height:1.6;}
.seg-block{background:#111;border:1px solid #222;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px;}
.seg-title{font-size:.9rem;font-weight:700;letter-spacing:.06em;}
.seg-desc{font-size:.75rem;color:#aaa;line-height:1.5;}
.q-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;background:#0d0d0d;border-radius:6px;border:1px solid #1a1a1a;}
.q-text{font-size:.7rem;color:#ccc;line-height:1.4;flex:1;}
.likert-btns{display:flex;gap:4px;flex-shrink:0;}
.l-btn{width:28px;height:28px;border-radius:4px;border:1px solid #2a2a2a;background:#0a0a0a;color:#555;font-size:.6rem;font-weight:700;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;font-family:var(--mono);}
.l-btn:hover{border-color:#555;color:#ccc;}
.l-btn.active{border-color:transparent;}
.likert-header{display:flex;justify-content:flex-end;gap:0;padding:0 0 4px;}
.likert-col{font-family:var(--mono);font-size:.76rem;color:#555;text-align:center;width:36px;flex-shrink:0;line-height:1.2;}
.modal-apply{background:var(--a7);border:none;color:#000;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;padding:14px;border-radius:4px;cursor:pointer;text-transform:uppercase;width:100%;font-weight:700;}
.modal-apply:hover{background:var(--a9);}
.prog-bar{width:100%;height:3px;background:#1a1a1a;border-radius:2px;}
.prog-fill-m{height:100%;background:var(--a7);border-radius:2px;transition:width .3s;}
.prog-label{font-family:var(--mono);font-size:.65rem;color:#444;text-align:right;}
.q-block{display:flex;flex-direction:column;gap:10px;}
.q-num{font-family:var(--mono);font-size:.65rem;color:#444;letter-spacing:.12em;}
.q-text-big{font-size:.88rem;color:var(--txt);line-height:1.6;font-weight:700;}
.q-opts{display:flex;flex-direction:column;gap:6px;}
.q-opt{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:5px;padding:10px 14px;cursor:pointer;font-size:.7rem;color:#aaa;text-align:left;transition:all .15s;line-height:1.5;}
.q-opt:hover{border-color:#555;color:#ccc;}
.q-opt.selected{border-color:var(--a7);color:var(--a7);background:#1a1200;}
.q-nav{display:flex;gap:8px;margin-top:4px;}
.q-nav-btn{flex:1;padding:12px;border-radius:4px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;cursor:pointer;text-transform:uppercase;font-weight:700;border:1px solid #333;background:transparent;color:#666;}
.q-nav-btn:hover{border-color:#888;color:#ccc;}
.q-nav-btn.next{background:var(--a7);border-color:var(--a7);color:#000;}
.q-nav-btn.next:hover{background:var(--a9);}
.q-nav-btn:disabled{opacity:.3;cursor:not-allowed;}
.disc-icon{font-size:1.8rem;text-align:center;}
.disc-title{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;color:var(--a7);text-transform:uppercase;text-align:center;}
.disc-body{font-size:.78rem;color:#bbb;line-height:1.7;}
.disc-source{font-family:var(--mono);font-size:.6rem;color:#555;padding:8px 12px;background:#0a0a0a;border:1px solid #1a1a1a;border-radius:4px;}
.disc-btn{background:var(--a7);border:none;color:#000;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;padding:13px;border-radius:4px;cursor:pointer;text-transform:uppercase;font-weight:700;width:100%;}
.disc-btn:hover{background:var(--a9);}
.disc-btn-sec{background:transparent;border:1px solid #333;color:#666;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;padding:13px;border-radius:4px;cursor:pointer;text-transform:uppercase;width:100%;}
.gate-icon{font-size:1.8rem;text-align:center;}
.gate-title{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;color:var(--a7);text-transform:uppercase;text-align:center;}
.gate-body{font-size:.78rem;color:#bbb;line-height:1.7;text-align:center;}
.gate-btns{display:flex;gap:8px;}
.gate-btn{flex:1;padding:12px 8px;border-radius:4px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;cursor:pointer;text-transform:uppercase;font-weight:700;}
.gate-btn.continue{background:transparent;border:1px solid #555;color:#888;}
.gate-btn.continue:hover{border-color:#888;color:#ccc;}
.gate-btn.later{background:var(--a7);border:none;color:#000;}
.gate-btn.later:hover{background:var(--a9);}
.result-lane{padding:14px;border-radius:6px;background:#0d0d0d;border:1px solid #222;}
.result-lane.primary{border-color:var(--a7);}
.result-tier{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:#555;text-transform:uppercase;}
.result-lane-name{font-size:1.1rem;font-weight:700;letter-spacing:.05em;}
.result-lane-desc{font-size:.75rem;color:#bbb;line-height:1.6;}
.result-apply{background:var(--a7);border:none;color:#000;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;padding:14px;border-radius:4px;cursor:pointer;text-transform:uppercase;width:100%;font-weight:700;}
.result-apply:hover{background:var(--a9);}
.syw-score{font-family:var(--cond);font-size:3rem;font-weight:700;text-align:center;margin:8px 0;}
.syw-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-align:center;text-transform:uppercase;color:var(--muted);}
.syw-block{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:6px;padding:12px 14px;margin-top:8px;}
.syw-section{font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;color:var(--muted);text-transform:uppercase;margin-bottom:6px;}
.syw-text{font-size:.78rem;color:#ccc;line-height:1.6;}
.syw-bar-track{width:100%;height:6px;background:#1a1a1a;border-radius:3px;overflow:hidden;margin-top:8px;}
.syw-bar-fill{height:100%;border-radius:3px;}
.coming-soon{display:flex;flex-direction:column;gap:14px;padding:20px 0;text-align:center;}
.cs-icon{font-size:2.5rem;}
.cs-title{font-family:var(--disp);font-size:1.8rem;letter-spacing:.1em;color:var(--a9);}
.cs-body{font-size:.78rem;color:#bbb;line-height:1.7;}
.cs-detail{font-family:var(--mono);font-size:.6rem;color:#555;padding:10px 14px;background:#0a0a0a;border:1px solid #1a1a1a;border-radius:4px;text-align:left;line-height:1.8;}
.cs-btn{background:transparent;border:1px solid #333;color:#666;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;padding:13px;border-radius:4px;cursor:pointer;text-transform:uppercase;width:100%;}
.cs-btn:hover{border-color:#555;color:#aaa;}
.result-screen{display:flex;flex-direction:column;gap:14px;}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:#1a1200;border:1px solid var(--a7);color:var(--txt);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;padding:10px 20px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:400;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.home-page>*{animation:fadeUp .4s ease both;}
.home-page>*:nth-child(1){animation-delay:.05s}.home-page>*:nth-child(2){animation-delay:.1s}
.home-page>*:nth-child(3){animation-delay:.15s}.home-page>*:nth-child(4){animation-delay:.2s}

/* SETTINGS */
.settings-page{max-width:520px;margin:0 auto;padding:20px 16px 60px;display:flex;flex-direction:column;gap:16px;}
.settings-section{display:flex;flex-direction:column;gap:8px;}
.settings-label{font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;padding:0 2px;}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--surf);border:1px solid var(--bdr);border-radius:6px;}
.settings-row-label{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--txt);}
.settings-row-sub{font-size:.7rem;color:var(--muted);margin-top:2px;line-height:1.4;}
.settings-input{background:var(--surf);border:1px solid var(--bdr);border-radius:4px;color:var(--txt);font-family:var(--mono);font-size:.78rem;padding:8px 10px;width:100%;outline:none;letter-spacing:.05em;}
.settings-input:focus{border-color:var(--a7);}
.settings-input::placeholder{color:var(--muted);opacity:.5;}
.settings-divider{height:1px;background:#1a1a1a;margin:4px 0;}
.toggle{position:relative;width:36px;height:20px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:#222;border-radius:10px;cursor:pointer;transition:.2s;}
.toggle-slider:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#555;border-radius:50%;transition:.2s;}
.toggle input:checked+.toggle-slider{background:var(--a6);}
.toggle input:checked+.toggle-slider:before{transform:translateX(16px);background:#000;}
.api-key-wrap{position:relative;}
.api-key-wrap .settings-input{padding-right:60px;}
.api-show-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--muted);font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;cursor:pointer;text-transform:uppercase;}
.api-show-btn:hover{color:var(--txt);}

/* PROFILE PAGE */
.profile-page{max-width:520px;margin:0 auto;padding:20px 16px 60px;display:flex;flex-direction:column;gap:20px;}
.profile-mode-bar{display:flex;gap:6px;width:100%;}
.profile-mode-btn{flex:1;padding:10px;border-radius:4px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;cursor:pointer;text-transform:uppercase;font-weight:700;border:1px solid #333;background:transparent;color:#666;transition:all .15s;}
.profile-mode-btn.active{border-color:var(--a7);color:var(--a7);background:#1a1200;}
.profile-section{background:var(--surf);border:1px solid var(--bdr);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:10px;}
.profile-section-title{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;}
.profile-hex-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #111;}
.profile-hex-row:last-child{border-bottom:none;}
.profile-hex-color{width:12px;height:12px;border-radius:3px;flex-shrink:0;}
.profile-hex-name{font-family:var(--mono);font-size:.82rem;font-weight:700;letter-spacing:.1em;width:100px;flex-shrink:0;}
.profile-hex-score{font-family:var(--cond);font-size:1.1rem;font-weight:700;width:24px;flex-shrink:0;}
.profile-hex-desc{font-size:.90rem;color:#999;flex:1;line-height:1.4;}
.profile-summary{font-size:.88rem;color:#ccc;line-height:1.8;}
.profile-guidance{font-size:.7rem;color:#bbb;line-height:1.7;padding:10px 0;}
.profile-guidance strong{color:var(--a8);}
.role-select{background:#0a0a0a;border:1px solid #333;border-radius:4px;color:var(--txt);font-family:var(--mono);font-size:.90rem;padding:10px 12px;width:100%;outline:none;cursor:pointer;}
.role-select:focus{border-color:var(--a7);}
.role-guidance{display:flex;flex-direction:column;gap:8px;}
.role-guidance-item{padding:12px 14px;background:#0a0a0a;border:1px solid #1a1a1a;border-left:3px solid var(--a6);border-radius:4px;}
.role-guidance-hex{font-family:var(--mono);font-size:.94rem;letter-spacing:.15em;color:var(--a7);text-transform:uppercase;margin-bottom:4px;}
.role-guidance-text{font-size:.94rem;color:#bbb;line-height:1.6;}
.profile-qr-box{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;background:#050505;border:1px dashed #2a2a2a;border-radius:8px;}
.profile-qr-label{font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;color:var(--muted);text-transform:uppercase;}

/* CHARACTER SHEET PROFILE */
.cs-sheet{padding:12px;display:flex;flex-direction:column;gap:10px;}
.cs-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#0d0d0d;border-radius:6px;border:1px solid #222;}
.cs-header-title{font-family:var(--disp);font-size:1.6rem;letter-spacing:.1em;color:var(--a9);}
.cs-header-sub{font-family:var(--mono);font-size:.65rem;color:var(--muted);}
.cs-complete{font-family:var(--mono);font-size:.58rem;padding:3px 10px;background:rgba(180,180,0,.1);color:var(--a7);border:1px solid rgba(180,180,0,.25);border-radius:3px;}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.cs-card{background:#0d0d0d;border:1px solid #222;border-left:3px solid #6b4c00;border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;}
.cs-card.dim{border-left-color:#2a2a2a;opacity:0.6;}
.cs-card.full{grid-column:1/-1;}
.cs-card-name{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.12em;color:var(--txt);text-transform:uppercase;}
.cs-score-row{display:flex;align-items:center;gap:8px;}
.cs-avg{font-family:var(--cond);font-size:1.4rem;font-weight:700;}
.cs-bar{flex:1;height:3px;background:#1a1a1a;border-radius:2px;overflow:hidden;}
.cs-bar-fill{height:100%;border-radius:2px;}
.cs-pips{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;}
.cs-pip{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px;background:#111;border-radius:4px;}
.cs-pip-score{font-family:var(--cond);font-size:.9rem;font-weight:700;}
.cs-pip-name{font-family:var(--mono);font-size:.48rem;color:#666;text-transform:uppercase;letter-spacing:.06em;text-align:center;line-height:1.2;}
.cs-pip.dim .cs-pip-score{color:#333;}
.cs-chips{display:flex;gap:5px;flex-wrap:wrap;}
.cs-chip{font-family:var(--mono);font-size:.58rem;padding:3px 8px;border-radius:3px;background:#111;color:#555;border:1px solid #1e1e1e;}
.cs-chip.active{background:#1a1200;border-color:#6b4c00;}
.cs-ai-btn{width:100%;padding:8px;background:transparent;border:1px solid #2a2a2a;border-radius:4px;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:#666;cursor:pointer;text-transform:uppercase;margin-top:4px;transition:all .15s;}
.cs-ai-btn:hover{border-color:var(--a7);color:var(--a7);}
.cs-divider{height:1px;background:#1a1a1a;}
.cs-full-ai{width:100%;padding:10px;background:transparent;border:1px solid var(--a7);border-radius:4px;font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;color:var(--a7);cursor:pointer;text-transform:uppercase;font-weight:700;}
.cs-full-ai:hover{background:var(--a7);color:#000;}
.role-select{background:#0a0a0a;border:1px solid #333;border-radius:4px;color:var(--txt);font-family:var(--mono);font-size:.72rem;padding:10px 12px;width:100%;outline:none;cursor:pointer;}
.role-select:focus{border-color:var(--a7);}



/* SOS BUTTON */

/* CRISIS SCREEN */
@keyframes hexPulse{0%,100%{opacity:.7}50%{opacity:.85}}
.hex-center-pulse{animation:hexPulse 8s ease-in-out infinite;cursor:pointer;}

.value-chip{font-family:var(--mono);font-size:.62rem;padding:5px 10px;border-radius:3px;background:#0a0a0a;border:1px solid #2a2a2a;color:#666;cursor:pointer;transition:all .15s;display:inline-block;}
.value-chip.selected{background:var(--a1);border-color:var(--a6);color:var(--a7);}
.value-chip:hover{border-color:#444;color:#aaa;}

/* PROFILE SUPPORT COLUMN */
.profile-hex-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid #111;flex-wrap:wrap;}
.profile-hex-row:last-child{border-bottom:none;}
.profile-hex-color{width:10px;height:10px;border-radius:2px;flex-shrink:0;margin-top:3px;}
.profile-hex-name{font-family:var(--mono);font-size:.65rem;font-weight:700;width:90px;flex-shrink:0;}
.profile-hex-score{font-family:var(--cond);font-size:1rem;font-weight:700;width:20px;flex-shrink:0;text-align:center;}
.profile-hex-desc{font-size:.65rem;color:#888;flex:1;min-width:120px;line-height:1.5;}
.profile-support-cell{width:100%;margin-top:4px;}
.profile-support-btn{background:transparent;border:1px solid #2a2a2a;color:#666;font-family:var(--mono);font-size:.58rem;padding:5px 10px;border-radius:3px;cursor:pointer;letter-spacing:.08em;text-transform:uppercase;transition:all .15s;}
.profile-support-btn:hover{border-color:var(--a6);color:var(--a7);}
.profile-support-resp{font-size:.7rem;color:#bbb;line-height:1.7;margin-top:6px;display:none;}
.profile-support-resp.show{display:block;}

/* ── Theme Swatches ───────────────────────────── */
.theme-swatch{
  display:flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:20px;
  border:1px solid #333;background:transparent;
  color:var(--txt);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.08em;cursor:pointer;text-transform:uppercase;
  transition:border-color .15s;
}
.theme-swatch::before{
  content:'';display:block;width:12px;height:12px;
  border-radius:50%;background:var(--sw);flex-shrink:0;
}
.theme-swatch.active{border-color:var(--a7);color:var(--a7);}
.theme-swatch:hover{border-color:var(--a6);}