/* ════════════════════════════════════════════════════════════════
   SpinCP — SpinLab control panel (v121)  © 2026 MRISpin
   Same design language as the app: Instrument Sans + JetBrains Mono,
   calm surfaces, one green accent, light & dark.
   ════════════════════════════════════════════════════════════════ */
@font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../assets/fonts/instrument-sans-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(../assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); }

:root, [data-theme="dark"] {
  --bg:#0F1722; --bg2:#151F2C; --bg3:#1B2737; --bg4:#223044;
  --border:#263447; --border2:#34455C;
  --text:#E7EDF5; --text2:#A3B1C2; --text3:#7F8EA3;
  --accent:#00C896; --accent2:#00A57C; --accent3:rgba(0,200,150,.14); --on-accent:#03140F;
  --blue:#6AA9FF; --amber:#E8B34A; --red:#FF6B6B; --green:#4CC38A; --violet:#B39DFF;
  --blue-bg:rgba(106,169,255,.13); --amber-bg:rgba(232,179,74,.14); --red-bg:rgba(255,107,107,.13); --green-bg:rgba(76,195,138,.14);
  --shadow:0 1px 2px rgba(0,0,0,.25); --shadow-pop:0 18px 48px rgba(3,8,15,.5);
  color-scheme:dark;
}
[data-theme="light"] {
  --bg:#F4F6F9; --bg2:#FFFFFF; --bg3:#EEF2F6; --bg4:#E3E9F0;
  --border:#D7DFE8; --border2:#BCC7D3;
  --text:#172130; --text2:#475569; --text3:#5F6F85;
  --accent:#00875F; --accent2:#006F4E; --accent3:rgba(0,135,95,.10); --on-accent:#FFFFFF;
  --blue:#1F6FD1; --amber:#A86A00; --red:#C93838; --green:#1E8A55; --violet:#6B4FD1;
  --blue-bg:rgba(31,111,209,.09); --amber-bg:rgba(168,106,0,.10); --red-bg:rgba(201,56,56,.09); --green-bg:rgba(30,138,85,.10);
  --shadow:0 1px 2px rgba(23,33,48,.06); --shadow-pop:0 18px 48px rgba(23,33,48,.18);
  color-scheme:light;
}
:root { --font:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono:'JetBrains Mono', ui-monospace, Menlo, monospace; --r:12px; --rs:8px; --side:248px; }

*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { background:var(--bg); color:var(--text); font:15px/1.55 var(--font); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
button, input, select, textarea { font:inherit; color:inherit; }
code, .mono { font-family:var(--mono); font-size:.92em; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }

/* ── Sign-in ─────────────────────────────────────────────── */
.login { min-height:100%; display:grid; place-items:center; padding:24px 16px;
  background:radial-gradient(1200px 600px at 80% -10%, var(--accent3), transparent 60%), var(--bg); }
.login-card { width:100%; max-width:400px; background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:32px 28px 26px; box-shadow:var(--shadow-pop); }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { width:40px; height:40px; object-fit:contain; }
.brand-name { font-size:18px; font-weight:700; letter-spacing:-.01em; line-height:1.15; }
.brand-sub { font-size:12.5px; color:var(--text3); }
.login h1 { font-size:22px; margin:26px 0 4px; letter-spacing:-.01em; }
.login p.lead { margin:0 0 20px; color:var(--text2); font-size:14px; }
.login .err { min-height:20px; color:var(--red); font-size:13px; margin:8px 0 0; }
.login-foot { margin-top:18px; font-size:12px; color:var(--text3); display:flex; justify-content:space-between; }

/* ── Form controls ───────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field > label, .lbl { font-size:13px; font-weight:600; color:var(--text2); }
.hint { font-size:12.5px; color:var(--text3); line-height:1.45; }
.inp, select.inp, textarea.inp { width:100%; min-height:40px; padding:8px 12px; background:var(--bg); border:1px solid var(--border); border-radius:var(--rs); outline:none; transition:border-color .12s, box-shadow .12s; }
textarea.inp { min-height:90px; resize:vertical; line-height:1.5; }
.inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent3); }
.inp.mono { font-family:var(--mono); font-size:13px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pw-wrap { position:relative; }
.pw-wrap .inp { padding-right:42px; }
.pw-eye { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; background:transparent; color:var(--text3); cursor:pointer; border-radius:6px; }
.pw-eye:hover { color:var(--text); background:var(--bg3); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:0 15px; border-radius:var(--rs); border:1px solid var(--border); background:var(--bg2); color:var(--text); font-weight:600; font-size:14px; cursor:pointer; white-space:nowrap; transition:background .12s, border-color .12s, color .12s; }
.btn:hover { background:var(--bg3); border-color:var(--border2); text-decoration:none; }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.primary:hover { background:var(--accent2); border-color:var(--accent2); }
.btn.danger { color:var(--red); border-color:color-mix(in srgb, var(--red) 40%, var(--border)); }
.btn.danger:hover { background:var(--red-bg); }
.btn.danger.solid { background:var(--red); border-color:var(--red); color:#fff; }
.btn.ghost { background:transparent; border-color:transparent; color:var(--text2); }
.btn.ghost:hover { background:var(--bg3); color:var(--text); }
.btn.sm { min-height:32px; padding:0 11px; font-size:13px; }
.btn.icon { width:38px; padding:0; }
.btn.sm.icon { width:32px; }
.btn.block { width:100%; }
.btns { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* switch */
.sw { position:relative; display:inline-block; width:42px; height:24px; flex:0 0 auto; }
.sw input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.sw span { position:absolute; inset:0; border-radius:24px; background:var(--bg4); border:1px solid var(--border2); transition:background .18s, border-color .18s; }
.sw span::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s; }
.sw input:checked + span { background:var(--accent); border-color:var(--accent); }
.sw input:checked + span::after { transform:translateX(18px); }
.sw input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--border); }
.toggle-row:last-child { border-bottom:0; }
.toggle-row .t { font-weight:600; font-size:14px; }
.toggle-row .d { font-size:12.5px; color:var(--text3); margin-top:2px; }

/* ── Shell ───────────────────────────────────────────────── */
.shell { display:flex; min-height:100%; }
.side { position:fixed; inset:0 auto 0 0; width:var(--side); background:var(--bg2); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:40; transition:transform .2s; }
.side .brand { padding:18px 18px 16px; border-bottom:1px solid var(--border); }
.side .brand img { width:34px; height:34px; }
.side .brand-name { font-size:16px; }
.side-nav { flex:1; overflow-y:auto; padding:12px 10px; }
.side-cat { font-size:12px; font-weight:600; color:var(--text3); padding:12px 12px 4px; }
.nav { display:flex; align-items:center; gap:11px; width:100%; min-height:38px; padding:0 12px; margin-bottom:2px; border:0; border-radius:9px; background:transparent; color:var(--text2); font-size:14px; font-weight:500; cursor:pointer; text-align:left; }
.nav i { width:18px; text-align:center; color:var(--text3); font-size:14px; }
.nav:hover { background:var(--bg3); color:var(--text); }
.nav.on { background:var(--accent3); color:var(--text); font-weight:600; }
.nav.on i { color:var(--accent); }
.nav .count { margin-left:auto; font-size:11.5px; color:var(--text3); font-variant-numeric:tabular-nums; }
.nav .dot { margin-left:auto; width:8px; height:8px; border-radius:50%; background:var(--amber); }
.side-foot { padding:14px 16px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--accent3); color:var(--accent); display:grid; place-items:center; font-weight:700; font-size:14px; flex:0 0 auto; }
.who { min-width:0; flex:1; }
.who b { display:block; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.who span { font-size:12px; color:var(--text3); }

.main { flex:1; margin-left:var(--side); min-width:0; display:flex; flex-direction:column; }
.top { position:sticky; top:0; z-index:30; height:64px; display:flex; align-items:center; gap:12px; padding:0 28px; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.top h2 { font-size:18px; margin:0; letter-spacing:-.01em; }
.top .sub { font-size:13px; color:var(--text3); margin-left:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top .spacer { flex:1; }
.menu-btn { display:none; }
.content { padding:24px 28px 60px; max-width:1320px; width:100%; }
.view { display:none; animation:fade .18s ease; }
.view.on { display:block; }
@keyframes fade { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }

/* ── Cards, KPIs ─────────────────────────────────────────── */
.grid { display:grid; gap:16px; }
.g2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.g-main { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); min-width:0; }
.card-h { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.card-h h3 { margin:0; font-size:15px; font-weight:650; }
.card-h .muted { font-size:12.5px; color:var(--text3); }
.card-h .right { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.card-b { padding:16px 18px; }
.card-b.flush { padding:0; }
.mb { margin-bottom:16px; }

.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.kpi { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.kpi .k-top { display:flex; align-items:center; gap:8px; color:var(--text3); font-size:12.5px; font-weight:600; }
.kpi .k-top i { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-size:12px; background:var(--accent3); color:var(--accent); }
.kpi .v { font-size:26px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15; }
.kpi .s { font-size:12px; color:var(--text3); }
.kpi.blue .k-top i { background:var(--blue-bg); color:var(--blue); }
.kpi.amber .k-top i { background:var(--amber-bg); color:var(--amber); }
.kpi.violet .k-top i { background:color-mix(in srgb, var(--violet) 14%, transparent); color:var(--violet); }

.welcome { display:flex; align-items:center; gap:16px; padding:18px 20px; margin-bottom:16px; border-radius:var(--r); border:1px solid var(--border);
  background:linear-gradient(110deg, var(--accent3), transparent 70%), var(--bg2); }
.welcome h1 { font-size:20px; margin:0 0 2px; letter-spacing:-.01em; }
.welcome p { margin:0; color:var(--text2); font-size:14px; }
.welcome .btns { margin-left:auto; }

/* chips / badges */
.chip { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap; background:var(--bg3); color:var(--text2); }
.chip.ok { background:var(--green-bg); color:var(--green); }
.chip.warn { background:var(--amber-bg); color:var(--amber); }
.chip.bad { background:var(--red-bg); color:var(--red); }
.chip.info { background:var(--blue-bg); color:var(--blue); }
.chip.acc { background:var(--accent3); color:var(--accent); }

/* segmented control */
.seg { display:inline-flex; background:var(--bg3); border:1px solid var(--border); border-radius:9px; padding:2px; }
.seg button { border:0; background:transparent; min-height:30px; padding:0 11px; border-radius:7px; font-size:13px; font-weight:600; color:var(--text2); cursor:pointer; }
.seg button.on { background:var(--bg2); color:var(--text); box-shadow:var(--shadow); }

/* ── Charts ──────────────────────────────────────────────── */
.chart { width:100%; height:200px; display:block; }
.chart .bar { fill:var(--accent); }
.chart .bar:hover { fill:var(--accent2); }
.chart .bar.err { fill:var(--red); }
.chart .axis { fill:var(--text3); font:11px var(--font); }
.chart .grid-l { stroke:var(--border); stroke-dasharray:2 4; }
.chart-tip { position:fixed; pointer-events:none; z-index:200; background:var(--text); color:var(--bg); padding:4px 9px; border-radius:6px; font-size:12px; font-weight:600; white-space:nowrap; transform:translate(-50%, -130%); }
.chart-sum { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:10px; font-size:13px; color:var(--text3); }
.chart-sum b { color:var(--text); font-size:16px; font-variant-numeric:tabular-nums; margin-right:4px; }

.hbars { display:flex; flex-direction:column; gap:9px; }
.hbar { display:grid; grid-template-columns:minmax(120px, 190px) 1fr 52px; gap:12px; align-items:center; font-size:13.5px; }
.hbar .n { display:flex; align-items:center; gap:8px; min-width:0; }
.hbar .n i { width:16px; color:var(--text3); text-align:center; }
.hbar .n span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hbar .track { height:8px; background:var(--bg3); border-radius:8px; overflow:hidden; }
.hbar .fill { height:100%; background:var(--accent); border-radius:8px; min-width:2px; }
.hbar .c { text-align:right; font-variant-numeric:tabular-nums; color:var(--text2); font-weight:600; }

/* ── Tables ──────────────────────────────────────────────── */
.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid var(--border); }
.search { position:relative; flex:1 1 240px; max-width:380px; }
.search i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:13px; }
.search .inp { padding-left:34px; min-height:36px; }
.toolbar select.inp { width:auto; min-height:36px; }
.tbl-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th { text-align:left; font-size:12px; font-weight:600; color:var(--text3); padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--bg2); position:sticky; top:0; }
.tbl th.sort { cursor:pointer; user-select:none; }
.tbl th.sort:hover { color:var(--text); }
.tbl th .arr { opacity:.5; margin-left:4px; font-size:10px; }
.tbl td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:0; }
.tbl tbody tr:hover td { background:color-mix(in srgb, var(--bg3) 55%, transparent); }
.tbl tr.sel td { background:var(--accent3); }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; }
.tbl .muted, .muted { color:var(--text3); }
.tbl .chk { width:36px; }
.tbl input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; vertical-align:middle; }
.ucell { display:flex; align-items:center; gap:10px; min-width:0; }
.ucell .avatar { width:30px; height:30px; font-size:12.5px; }
.ucell b { display:block; font-weight:600; }
.ucell span { font-size:12.5px; color:var(--text3); }
.empty { padding:42px 20px; text-align:center; color:var(--text3); }
.empty i { font-size:26px; display:block; margin-bottom:10px; opacity:.6; }
.bulkbar { display:none; align-items:center; gap:10px; padding:10px 18px; background:var(--accent3); border-bottom:1px solid var(--border); font-size:13.5px; font-weight:600; flex-wrap:wrap; }
.bulkbar.on { display:flex; }
.pager { display:flex; align-items:center; gap:10px; justify-content:flex-end; padding:12px 18px; border-top:1px solid var(--border); font-size:13px; color:var(--text3); }
.code-cell { font-family:var(--mono); font-size:12.5px; color:var(--text2); max-width:520px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* row menu */
.rmenu { position:relative; display:inline-block; }
.rmenu-pop { position:fixed; z-index:120; min-width:210px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-pop); padding:6px; }
.rmenu-pop button { display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:0 10px; border:0; background:transparent; border-radius:7px; font-size:13.5px; color:var(--text); cursor:pointer; text-align:left; }
.rmenu-pop button i { width:16px; color:var(--text3); text-align:center; }
.rmenu-pop button:hover { background:var(--bg3); }
.rmenu-pop button.danger { color:var(--red); }
.rmenu-pop button.danger i { color:var(--red); }
.rmenu-pop hr { border:0; border-top:1px solid var(--border); margin:5px 2px; }

/* ── Health list ─────────────────────────────────────────── */
.checks { list-style:none; margin:0; padding:0; }
.checks li { display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--border); }
.checks li:last-child { border-bottom:0; }
.checks .ic { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:11px; flex:0 0 auto; margin-top:1px; }
.checks .ok .ic { background:var(--green-bg); color:var(--green); }
.checks .warn .ic { background:var(--amber-bg); color:var(--amber); }
.checks .bad .ic { background:var(--red-bg); color:var(--red); }
.checks b { font-size:14px; font-weight:600; display:block; }
.checks span { font-size:12.5px; color:var(--text3); }
.kv { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:10px; }
.kv div { background:var(--bg3); border-radius:9px; padding:10px 12px; min-width:0; }
.kv span { display:block; font-size:12px; color:var(--text3); font-weight:600; }
.kv b { font-family:var(--mono); font-size:13px; font-weight:500; overflow-wrap:anywhere; }

/* ── Feed ────────────────────────────────────────────────── */
.feed { list-style:none; margin:0; padding:0; }
.feed li { display:flex; gap:12px; padding:10px 18px; border-bottom:1px solid var(--border); font-size:13.5px; align-items:flex-start; }
.feed li:last-child { border-bottom:0; }
.feed .fi { width:28px; height:28px; border-radius:8px; background:var(--bg3); color:var(--text3); display:grid; place-items:center; font-size:12px; flex:0 0 auto; }
.feed .ft { flex:1; min-width:0; }
.feed .ft b { font-weight:600; }
.feed .ft div { color:var(--text3); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feed time { font-size:12px; color:var(--text3); white-space:nowrap; }

/* ── Notice / banner ─────────────────────────────────────── */
.note { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:10px; font-size:13.5px; line-height:1.5; border:1px solid transparent; }
.note i { margin-top:3px; }
.note.info { background:var(--blue-bg); color:var(--text); border-color:color-mix(in srgb, var(--blue) 30%, transparent); }
.note.info i { color:var(--blue); }
.note.warning { background:var(--amber-bg); border-color:color-mix(in srgb, var(--amber) 30%, transparent); }
.note.warning i { color:var(--amber); }
.note.success { background:var(--green-bg); border-color:color-mix(in srgb, var(--green) 30%, transparent); }
.note.success i { color:var(--green); }
.note.danger { background:var(--red-bg); border-color:color-mix(in srgb, var(--red) 30%, transparent); }
.note.danger i { color:var(--red); }

.ai-hero { display:flex; gap:16px; align-items:center; padding:18px; }
.ai-orb { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:22px; flex:0 0 auto; background:var(--bg3); color:var(--text3); }
.ai-orb.on { background:var(--accent3); color:var(--accent); }
.ai-hero h3 { margin:0 0 2px; font-size:17px; }
.ai-hero p { margin:0; color:var(--text2); font-size:13.5px; }
.ai-answer { margin-top:12px; padding:12px 14px; border-radius:10px; background:var(--bg3); font-size:13.5px; white-space:pre-wrap; }

/* tools visibility grid */
.vis-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:8px; }
.vis { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--border); border-radius:9px; background:var(--bg); font-size:13.5px; }
.vis i { width:16px; text-align:center; color:var(--text3); }
.vis .vn { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vis.off { opacity:.55; }

/* ── Modal, drawer, toasts ───────────────────────────────── */
.scrim { position:fixed; inset:0; background:rgba(5,10,18,.55); z-index:100; display:none; align-items:center; justify-content:center; padding:16px; }
.scrim.on { display:flex; }
.modal { width:100%; max-width:480px; max-height:calc(100vh - 32px); overflow:auto; background:var(--bg2); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-pop); animation:pop .16s ease; }
.modal.wide { max-width:760px; }
@keyframes pop { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
.modal-h { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-h h3 { margin:0; font-size:16px; }
.modal-h .x { margin-left:auto; }
.modal-b { padding:18px 20px; }
.modal-f { display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--border); flex-wrap:wrap; }
.modal .msg { font-size:13px; color:var(--red); min-height:18px; }

.toasts { position:fixed; right:18px; bottom:18px; z-index:300; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.toast { display:flex; align-items:center; gap:10px; max-width:380px; padding:11px 14px; border-radius:10px; background:var(--text); color:var(--bg); font-size:13.5px; font-weight:600; box-shadow:var(--shadow-pop); animation:pop .16s ease; }
.toast.err { background:var(--red); color:#fff; }

.palette { max-width:540px; align-self:flex-start; margin-top:12vh; }
.palette .inp { border:0; border-bottom:1px solid var(--border); border-radius:14px 14px 0 0; min-height:52px; font-size:16px; box-shadow:none !important; }
.pal-list { max-height:50vh; overflow:auto; padding:6px; }
.pal-list button { display:flex; align-items:center; gap:12px; width:100%; min-height:40px; padding:0 12px; border:0; border-radius:8px; background:transparent; cursor:pointer; text-align:left; font-size:14px; }
.pal-list button i { width:18px; text-align:center; color:var(--text3); }
.pal-list button.on, .pal-list button:hover { background:var(--bg3); }
.kbd { font-family:var(--mono); font-size:11px; padding:1px 6px; border:1px solid var(--border2); border-bottom-width:2px; border-radius:5px; color:var(--text3); }

.skel { background:linear-gradient(90deg, var(--bg3), var(--bg4), var(--bg3)); background-size:200% 100%; animation:sk 1.2s infinite; border-radius:6px; min-height:14px; }
@keyframes sk { to { background-position:-200% 0; } }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1080px) { .g-main, .g3 { grid-template-columns:1fr; } }
@media (max-width: 860px) {
  .side { transform:translateX(-100%); box-shadow:var(--shadow-pop); }
  .side.open { transform:none; }
  .main { margin-left:0; }
  .menu-btn { display:inline-flex; }
  .top { padding:0 16px; }
  .top .sub { display:none; }
  .content { padding:16px 16px 60px; }
  .g2, .row2, .row3 { grid-template-columns:1fr; }
  .hbar { grid-template-columns:110px 1fr 44px; }
  .welcome { flex-direction:column; align-items:flex-start; }
  .welcome .btns { margin-left:0; }
  .hide-sm { display:none; }
}