/* ── SETTINGS PANEL ── */
.settings-panel { position:fixed; top:0; right:-390px; width:370px; height:100dvh; height:100vh; background:var(--bg-panel); border-left:1px solid var(--border-bright); z-index:300; transition:right .3s; box-shadow:-12px 0 50px rgba(0,0,0,.6),-4px 0 30px rgba(26,111,255,.08); display:flex; flex-direction:column; }
.settings-panel.open { right:0; }
.settings-head { padding:18px 22px; padding-top:calc(max(10px,env(safe-area-inset-top)) + 8px); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,rgba(26,111,255,.06),transparent); font-family:'Orbitron',sans-serif; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff; flex-shrink:0; }
.settings-body { padding:14px; padding-bottom:max(14px,env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; }

/* ── SETTINGS SECTIONS ── */
.s-section { margin-bottom:28px; }
.s-section-title { font-size:10px; text-transform:uppercase; letter-spacing:2.5px; color:var(--text-dim); margin-bottom:14px; }
.color-row { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.color-row label { flex:1; font-size:13px; color:var(--text); }
.s-card { background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:10px; }
.s-card-title { font-size:9px; text-transform:uppercase; letter-spacing:2.5px; color:var(--text-dim); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.s-card-title::before { content:''; display:inline-block; width:3px; height:11px; background:var(--accent); border-radius:2px; flex-shrink:0; }
.s-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.s-input { width:100%; background:rgba(255,255,255,.04); border:1px solid var(--border-bright); border-radius:7px; color:var(--text); font-family:'Exo 2',sans-serif; font-size:13px; padding:7px 10px; }
.s-label { display:block; font-size:9px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-dim); margin-bottom:5px; }
.s-toggle { display:flex; align-items:center; gap:10px; cursor:pointer; padding:9px 10px; background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:7px; margin-top:8px; }
.s-toggle span { font-size:12px; color:var(--text); line-height:1.4; }
.s-toggle input[type=checkbox] { width:15px; height:15px; accent-color:var(--success); cursor:pointer; flex-shrink:0; }
.s-collapse-btn { width:100%; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:8px; color:var(--text-dim); font-family:'Exo 2',sans-serif; font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; padding:9px 14px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; transition:all .15s; }
.s-collapse-btn:hover { background:rgba(26,111,255,.08); border-color:var(--accent); color:var(--text); }
.s-collapse-btn .s-arr { font-size:9px; transition:transform .2s; }
.s-collapse-btn.open .s-arr { transform:rotate(90deg); }
.s-collapse-body { display:none; padding-top:10px; }
.s-collapse-body.open { display:block; }

/* ── ONBOARDING ── */
.onboard-modal { background:var(--bg-card); border:1px solid var(--border-bright); border-radius:18px; padding:28px 24px; width:340px; max-width:92vw; box-shadow:0 24px 80px rgba(0,0,0,.9),0 0 40px var(--glow-a); }
.onboard-title { font-family:'Orbitron',sans-serif; font-size:16px; font-weight:700; letter-spacing:2px; color:#fff; margin-bottom:6px; text-align:center; }
.onboard-sub { font-size:12px; color:var(--text-dim); text-align:center; margin-bottom:20px; line-height:1.6; }
.onboard-field { margin-bottom:14px; }
.onboard-hint { font-size:11px; color:var(--text-muted); text-align:center; margin-top:16px; line-height:1.6; }

/* ── COLOR INPUTS ── */
input[type=color] { width:42px; height:30px; border:none; border-radius:6px; cursor:pointer; padding:2px; background:transparent; }
.hex-input { width:84px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:6px; padding:5px 9px; color:var(--text); font-family:'Exo 2',monospace; font-size:12px; }
.hex-input:focus { outline:none; border-color:var(--accent); }