/* ══════════════════════════════════════════════════════════════════
   LAN Control — the brand look
   From the Lankan Angel Network brand guidelines:
     navy #100069 · amber #FFA904 · red #FF0404 · maroon #840034 · white
     type: Montserrat
     motif: the rounded "bars" (navy / amber / red) and the swoosh
   Base tokens live in index.html (:root). This file adds the brand
   chrome (navy sidebar, logo, bars) and the two forced themes:
     data-skin="light" → always white     data-skin="black" → always black     data-skin="night" → always navy
   On a device set to dark, the default follows LAN Black.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. LAN Navy: forced dark, whatever the device says ─────────── */
/* Sidebar and chrome colours, per theme (default: navy sidebar, amber highlights) */
:root {
  --sb-bg:linear-gradient(180deg, #100069 0%, #0c0058 62%, #08003f 100%); --sb-border:0;
  --sb-hi:#ffa904; --sb-hi-2:#ff0404; --sb-on:rgba(255,255,255,.1); --sb-badge:#ffa904; --sb-badge-ink:#100069; --sb-top:#100069; --bar-1:var(--accent); --toast:#100069; --clock-i:#ffa904;
}

/* ── 1a. LAN Black: black, with LAN red and blue. The dark default. ─ */
@media (prefers-color-scheme: dark) { :root:not([data-skin]) {
  --bg:#08080a; --surface:#111114; --soft:#18181d; --hover:#202027; --ink:#f4f4f6; --ink-2:#c9c9d2; --muted:#8b8b98; --line:#222229; --line-2:#303039;
  --accent:#4535ff; --accent-ink:#ffffff; --accent-soft:#191540; --accent-text:#9b92ff; --accent-deep:#ff2a2a;
  --gold:#ff2a2a; --gold-2:#ff5c5c; --gold-soft:#2b0b0d; --gold-ink:#ff9a9a;
  --ok:#3fd49a; --ok-soft:#0c2419; --warn:#ffb13b; --warn-soft:#2a1d08; --bad:#ff4d4d; --bad-soft:#2e0d10;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -10px rgba(0,0,0,.75); --shadow-lg:0 24px 60px -18px rgba(0,0,0,.85);
  --strip:linear-gradient(90deg, var(--red) 0%, #4535ff 60%, transparent 100%);
  --sb-bg:linear-gradient(180deg, #0e0e11 0%, #09090b 60%, #050506 100%); --sb-border:1px solid #1d1d23;
  --sb-hi:#ff2a2a; --sb-hi-2:#4535ff; --sb-on:rgba(255,255,255,.07); --sb-badge:#ff2a2a; --sb-badge-ink:#ffffff; --sb-top:#0b0b0d; --bar-1:#ffffff; --toast:#16161b; --clock-i:#6f63ff;
  color-scheme: dark;
} }
:root[data-skin="black"] {
  --bg:#08080a; --surface:#111114; --soft:#18181d; --hover:#202027; --ink:#f4f4f6; --ink-2:#c9c9d2; --muted:#8b8b98; --line:#222229; --line-2:#303039;
  --accent:#4535ff; --accent-ink:#ffffff; --accent-soft:#191540; --accent-text:#9b92ff; --accent-deep:#ff2a2a;
  --gold:#ff2a2a; --gold-2:#ff5c5c; --gold-soft:#2b0b0d; --gold-ink:#ff9a9a;
  --ok:#3fd49a; --ok-soft:#0c2419; --warn:#ffb13b; --warn-soft:#2a1d08; --bad:#ff4d4d; --bad-soft:#2e0d10;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -10px rgba(0,0,0,.75); --shadow-lg:0 24px 60px -18px rgba(0,0,0,.85);
  --strip:linear-gradient(90deg, var(--red) 0%, #4535ff 60%, transparent 100%);
  --sb-bg:linear-gradient(180deg, #0e0e11 0%, #09090b 60%, #050506 100%); --sb-border:1px solid #1d1d23;
  --sb-hi:#ff2a2a; --sb-hi-2:#4535ff; --sb-on:rgba(255,255,255,.07); --sb-badge:#ff2a2a; --sb-badge-ink:#ffffff; --sb-top:#0b0b0d; --bar-1:#ffffff; --toast:#16161b; --clock-i:#6f63ff;
  color-scheme: dark;
}

/* ── 1b. LAN Navy: forced navy, whatever the device says ────────── */
:root[data-skin="night"] {
  --sb-bg:linear-gradient(180deg, #0d0556 0%, #0a0345 60%, #060130 100%); --sb-border:1px solid #1a1360; --sb-top:#100069; --toast:#1d165e; --bar-1:#b1a8ff;
  --bg:#07032a; --surface:#0f0a3d; --soft:#161050; --hover:#1d165e; --ink:#f2f1ff; --ink-2:#c9c6ec; --muted:#8f8bc0; --line:#221b5e; --line-2:#2e2672;
  --accent:#6f5cff; --accent-ink:#ffffff; --accent-soft:#1f1868; --accent-text:#b1a8ff; --accent-deep:#ff4d6d;
  --gold:#ffa904; --gold-2:#ffc24d; --gold-soft:#2f2208; --gold-ink:#ffd27a;
  --ok:#4fd6a0; --ok-soft:#0b2a26; --warn:#ffb938; --warn-soft:#2e2208; --bad:#ff5a5a; --bad-soft:#330b1a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -10px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -18px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* ── 2. The page ────────────────────────────────────────────────── */
body { letter-spacing:-.003em; }
::selection { background:color-mix(in srgb, var(--amber) 35%, transparent); }
* { scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-track { background:transparent; }
:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }

/* ── 3. Sidebar: always LAN navy, white logo ────────────────────── */
.sb {
  --ink:#ffffff; --ink-2:rgba(255,255,255,.80); --muted:rgba(255,255,255,.56);
  --hover:rgba(255,255,255,.08); --surface:rgba(255,255,255,.11); --soft:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.2);
  --accent:#ffa904; --accent-soft:rgba(255,169,4,.18); --accent-text:#ffc24d;
  background:var(--sb-bg);
  color:#fff; border-right:var(--sb-border); padding:16px 12px;
}
/* the swoosh, faint, behind the nav */
.sb::before {
  content:""; position:absolute; right:-70px; bottom:70px; width:260px; height:280px; pointer-events:none;
  background:url("/brand/mark-white.png") no-repeat center / contain; opacity:.045;
}
/* the right edge: a thin amber → red line, like the brand bars */
.sb::after { right:0; opacity:.9; background:linear-gradient(180deg, transparent 3%, var(--sb-hi) 28%, var(--sb-hi-2) 62%, transparent 96%); }
.sb > * { position:relative; }

.sb-brand { align-items:flex-start; gap:8px; padding:6px 4px 20px 8px; min-height:60px; }
.shell:not(.mini) .sb-brand .mark { display:none; }
.sb-t { display:flex; flex-direction:column; gap:8px; line-height:1; }
.sb-logo { display:block; width:100%; max-width:158px; height:auto; }
.sb-app { font-size:10px !important; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--sb-hi) !important; padding-left:2px; }
.sb-brand .icon-btn { color:rgba(255,255,255,.6); margin-top:-2px; }
.sb-brand .icon-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.shell.mini .sb-brand { padding-top:4px; }
.shell.mini .sb-brand .mark { width:40px; height:40px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }

.sb-label { color:var(--sb-hi); font-size:10.5px; font-weight:700; letter-spacing:.16em; padding:12px 12px 8px; }
.sb-i { height:40px; border-radius:10px; font-weight:500; color:var(--ink-2); }
.sb-i:hover { background:var(--hover); color:#fff; }
.sb-i.on { background:var(--sb-on); color:#fff; font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.sb-i.on svg.i { color:var(--sb-hi); }
.sb-i::before { left:-12px; top:9px; bottom:9px; width:4px; border-radius:0 4px 4px 0; background:linear-gradient(180deg, var(--sb-hi), var(--sb-hi-2)); }
.sb .bdg, .mnav .bdg { background:var(--sb-badge); color:var(--sb-badge-ink); font-weight:700; }
.sb-foot { border-image:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent) 1; }
.sb .ava { background:var(--sb-badge); color:var(--sb-badge-ink); box-shadow:0 0 0 2px rgba(255,255,255,.18); font-weight:700; }
.sb-user .u span { color:var(--muted); }
.sb .icon-btn { color:rgba(255,255,255,.62); }
.sb .icon-btn:hover { background:rgba(255,255,255,.1); color:#fff; }

/* ── 4. Top bar and phone header ────────────────────────────────── */
.topbar { border-image:linear-gradient(90deg, transparent, var(--line-2) 40%, var(--amber) 80%, var(--red)) 1; }
.wclock { border-color:var(--line-2); border-radius:9px; }
.wclock:hover { border-color:var(--amber); }
.wc-t, .wc-d { font-family:Montserrat, sans-serif; }
.wc-t { font-weight:700; }
.wc-t i { color:var(--clock-i); }
.wc-t .s { color:var(--red); }

@media (max-width: 820px) {
  .mtop {
    --ink:#fff; --muted:rgba(255,255,255,.6); --surface:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.2); --hover:rgba(255,255,255,.1); --accent-text:#fff;
    background:var(--sb-top); border-image:linear-gradient(90deg, var(--sb-hi), var(--sb-hi-2)) 1; color:#fff; backdrop-filter:none;
  }
  .mtop .mark { background:rgba(255,255,255,.1); box-shadow:none; }
  .mtop b { font-weight:700; letter-spacing:-.01em; }
  .mtop .ava { background:var(--sb-badge); color:var(--sb-badge-ink); box-shadow:none; }
  .mtop .icon-btn { color:rgba(255,255,255,.7); }
  .mnav a.on { color:var(--accent-text); font-weight:600; }
  .mnav a.on::before { height:3px; background:linear-gradient(90deg, var(--sb-hi), var(--sb-hi-2)); }
}

/* ── 5. Page headings: bold Montserrat and the brand bars ───────── */
.ph h1 { font-weight:700; letter-spacing:-.02em; }
.ph h1::after {
  width:58px; height:4px; margin-top:12px; border-radius:4px;
  background:linear-gradient(90deg, var(--bar-1) 0 42%, transparent 42% 50%, var(--sb-hi) 50% 74%, transparent 74% 82%, var(--sb-hi-2) 82% 100%);
}
.ph p { font-size:13px; }
.panel { border-radius:var(--r); }
.panel-h h2 { font-weight:700; font-size:14px; letter-spacing:-.005em; }
.panel-h h2::before { width:4px; height:16px; background:linear-gradient(180deg, var(--sb-hi), var(--sb-hi-2)); }
th { color:var(--ink-2); font-size:11px; letter-spacing:.07em; font-weight:700; }
.seg button.on { color:var(--accent-text); font-weight:600; box-shadow:var(--shadow-sm), 0 0 0 1px var(--line), inset 0 -2px 0 var(--sb-hi); }

/* ── 6. Buttons, inputs, pills ──────────────────────────────────── */
.btn { font-weight:600; border-radius:10px; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:0 1px 2px rgba(16,0,105,.25), 0 6px 16px -8px rgba(16,0,105,.55); }
.btn.primary:hover { background:color-mix(in srgb, var(--accent) 82%, #000); }
.btn.accent { background:var(--amber); border-color:var(--amber); color:#100069; }
input, select, textarea { border-radius:10px; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 28%, transparent); }
.pill { font-weight:600; }
.pill.ac { background:var(--accent-soft); color:var(--accent-text); }
.q { background:var(--accent); }
.composer { border-top:1px solid var(--line-2); }
.composer:focus-within { border-color:var(--accent); box-shadow:var(--shadow), 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); }
.chip:hover { border-color:var(--amber); }
#toast { background:var(--toast); color:#fff; border-left:4px solid var(--sb-hi); }

/* ── 7. Sign-in: LAN navy with the swoosh, white card, colour logo ─ */
.login {
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 520px at 85% 50%, rgba(40,20,220,.55), transparent 65%),
    linear-gradient(160deg, #100069 0%, #0b0052 55%, #07003a 100%) !important;
}
.login::before {             /* the swoosh, big, on the right — as on the brand cover */
  content:""; position:absolute; right:-6vw; top:50%; transform:translateY(-50%); width:min(58vw, 760px); aspect-ratio:1122/1183; pointer-events:none;
  background:url("/brand/mark-white.png") no-repeat center / contain; opacity:.1;
}
.login::after {              /* the bars */
  content:""; position:absolute; left:clamp(24px, 6vw, 90px); bottom:0; width:150px; height:130px; pointer-events:none; opacity:.95;
  background:
    linear-gradient(#fff,#fff) 0 60px / 16px 100% no-repeat,
    linear-gradient(var(--amber),var(--amber)) 22px 34px / 16px 100% no-repeat,
    linear-gradient(var(--red),var(--red)) 44px 14px / 16px 100% no-repeat,
    linear-gradient(#fff,#fff) 66px 0 / 16px 100% no-repeat,
    linear-gradient(var(--red),var(--red)) 88px 14px / 16px 100% no-repeat,
    linear-gradient(var(--amber),var(--amber)) 110px 34px / 16px 100% no-repeat,
    linear-gradient(#fff,#fff) 132px 60px / 16px 100% no-repeat;
  -webkit-mask:
    radial-gradient(circle 8px at 8px 68px, #000 99%, transparent) 0 0 no-repeat, linear-gradient(#000,#000) 0 68px / 16px 100% no-repeat,
    radial-gradient(circle 8px at 30px 42px, #000 99%, transparent) 0 0 no-repeat, linear-gradient(#000,#000) 22px 42px / 16px 100% no-repeat,
    radial-gradient(circle 8px at 52px 22px, #000 99%, transparent) 0 0 no-repeat, linear-gradient(#000,#000) 44px 22px / 16px 100% no-repeat,
    radial-gradient(circle 8px at 74px 8px, #000 99%, transparent) 0 0 no-repeat, linear-gradient(#000,#000) 66px 8px / 16px 100% no-repeat,
    radial-gradient(circle 8px at 96px 22px, #000 99%, transparent) 0 0 no-repeat, linear-gradient(#000,#000) 88px 22px / 16px 100% no-repeat,
    radial-gradient(circle 8px at 118px 42px, #000 99%, transparent) 0 0 no-repeat, linear-gradient(#000,#000) 110px 42px / 16px 100% no-repeat,
    radial-gradient(circle 8px at 140px 68px, #000 99%, transparent) 0 0 no-repeat, linear-gradient(#000,#000) 132px 68px / 16px 100% no-repeat;
          mask:
    radial-gradient(circle 8px at 8px 68px, #000 99%, transparent) 0 0 no-repeat, linear-gradient(#000,#000) 0 68px / 16px 100% no-repeat,
    radial-gradient(circle 8px at 30px 42px, #000 99%, transparent) 0 0 no-repeat, linear-gradient(#000,#000) 22px 42px / 16px 100% no-repeat,
    radial-gradient(circle 8px at 52px 22px, #000 99%, transparent) 0 0 no-repeat, linear-gradient(#000,#000) 44px 22px / 16px 100% no-repeat,
    radial-gradient(circle 8px at 74px 8px, #000 99%, transparent) 0 0 no-repeat, linear-gradient(#000,#000) 66px 8px / 16px 100% no-repeat,
    radial-gradient(circle 8px at 96px 22px, #000 99%, transparent) 0 0 no-repeat, linear-gradient(#000,#000) 88px 22px / 16px 100% no-repeat,
    radial-gradient(circle 8px at 118px 42px, #000 99%, transparent) 0 0 no-repeat, linear-gradient(#000,#000) 110px 42px / 16px 100% no-repeat,
    radial-gradient(circle 8px at 140px 68px, #000 99%, transparent) 0 0 no-repeat, linear-gradient(#000,#000) 132px 68px / 16px 100% no-repeat;
}
.login-card {
  /* always the white card: the main logo is only used on white */
  --surface:#ffffff; --soft:#eef0f8; --hover:#e8eaf6; --ink:#0e0a2e; --ink-2:#39355e; --muted:#6b6890; --line:#e3e5f1; --line-2:#d2d5e8;
  --accent:#100069; --accent-ink:#fff; --accent-text:#100069; --bad:#d10303;
  color-scheme:light; color:var(--ink); z-index:1;
  max-width:410px; border:0; border-radius:20px; padding:36px 34px 30px; box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
}
.login-card::before { height:5px; background:linear-gradient(90deg, #100069 0 40%, #ffa904 40% 70%, #ff0404 70% 100%); }
.login-logo { display:block; width:190px; height:auto; margin:4px 0 24px; }   /* breathing space around the logo, per the guidelines */
.login-card h1 { font-size:22px; letter-spacing:-.02em; }
.login-card .btn.primary { height:44px; font-size:14px; }

/* ── 8. Drive: LAN colours instead of Google's ──────────────────── */
.gd, .gd-layer {
  --g-bg:var(--bg); --g-surface:var(--surface); --g-card:var(--soft); --g-card-h:var(--hover); --g-search:var(--soft); --g-search-h:var(--hover);
  --g-ink:var(--ink); --g-ink2:var(--ink-2); --g-muted:var(--muted); --g-line:var(--line); --g-line2:var(--line-2); --g-outline:var(--line-2);
  --g-sel:var(--accent-soft); --g-sel-ink:var(--accent-text); --g-hover:color-mix(in srgb, var(--accent) 7%, transparent); --g-press:color-mix(in srgb, var(--accent) 12%, transparent);
  --g-blue:var(--accent); --g-blue-soft:var(--accent-soft); --g-menu:var(--surface); --g-folder:var(--ink-2);
  --g-snack:var(--toast); --g-snack-ink:#fff; --g-snack-act:var(--sb-hi);
  --g-green:var(--ok); --g-red:var(--bad); --g-drop:color-mix(in srgb, var(--amber) 10%, transparent);
  --g-shadow:var(--shadow); --g-shadow-lg:var(--shadow-lg);
  font-family:Montserrat, -apple-system, "Segoe UI", sans-serif;
}
:root[data-skin="night"] .gd-droptip { color:var(--accent-text); }

/* ── 9. Appearance picker (System → Overview) ───────────────────── */
.skin-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap:10px; }
.skin-opt {
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left;
  padding:13px 14px; cursor:pointer; font:inherit;
  border:1px solid var(--line-2); border-radius:12px; background:var(--surface); color:var(--ink);
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.skin-opt:hover { border-color:var(--amber); transform:translateY(-1px); }
.skin-opt.on { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent), 0 6px 16px -10px var(--accent); }
.skin-opt b { font-weight:700; font-size:13.5px; }
.skin-opt .skin-note { color:var(--muted); font-size:12px; line-height:1.45; }
.skin-sws { display:flex; gap:4px; margin-bottom:2px; }
.skin-sws i { width:22px; height:22px; border-radius:6px; display:block; box-shadow:inset 0 0 0 1px rgba(128,128,128,.25); }
.skin-hint, .skin-lock { margin:12px 0 0; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.skin-grid.locked .skin-opt { pointer-events:none; opacity:.6; }

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

/* ── 10. More themes (Settings → Theme). Each sets every token, so nothing leaks from the default. ── */
/* LAN Maroon: deep maroon with amber — the brand's other colour, all the way */
:root[data-skin="maroon"] {
  --bg:#1d0410; --surface:#2a0818; --soft:#33101f; --hover:#3d1527; --ink:#fff2f5; --ink-2:#e7c9d2; --muted:#b58a99; --line:#45182b; --line-2:#56203a;
  --accent:#ffa904; --accent-ink:#2a0818; --accent-soft:#4a2a12; --accent-text:#ffc24d; --accent-deep:#ff4d6d;
  --gold:#ffa904; --gold-2:#ffc24d; --gold-soft:#3a2a10; --gold-ink:#ffd27a;
  --ok:#4fd6a0; --ok-soft:#0b2a26; --warn:#ffb938; --warn-soft:#2e2208; --bad:#ff6b6b; --bad-soft:#3b0f1a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -10px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -18px rgba(0,0,0,.7);
  --strip:linear-gradient(90deg, var(--amber) 0%, #ff6b6b 60%, transparent 100%);
  --sb-bg:linear-gradient(180deg, #5e0025 0%, #47001c 60%, #2e0012 100%); --sb-border:1px solid #6b1233;
  --sb-hi:#ffa904; --sb-hi-2:#ff6b6b; --sb-on:rgba(255,255,255,.1); --sb-badge:#ffa904; --sb-badge-ink:#840034; --sb-top:#5e0025; --toast:#4a0f27; --bar-1:#ffc24d; --clock-i:#ffa904;
  color-scheme: dark;
}
/* Sunrise: warm cream paper, maroon sidebar, amber light */
:root[data-skin="sunrise"] {
  --bg:#fbf5ec; --surface:#fffdf8; --soft:#f5ebdc; --hover:#eee0cb; --ink:#2b1608; --ink-2:#5a3b22; --muted:#8f7358; --line:#eadcc7; --line-2:#dcc9ad;
  --accent:#840034; --accent-ink:#ffffff; --accent-soft:#f7e1e8; --accent-text:#840034; --accent-deep:#ff0404;
  --gold:#e08a00; --gold-2:#ffa904; --gold-soft:#fff0d4; --gold-ink:#6b4300;
  --ok:#12805c; --ok-soft:#e1f4ec; --warn:#a35f00; --warn-soft:#fff1d6; --bad:#c9002e; --bad-soft:#ffe3ea;
  --shadow-sm:0 1px 2px rgba(80,40,0,.06); --shadow:0 1px 2px rgba(80,40,0,.05), 0 8px 24px -8px rgba(80,40,0,.16); --shadow-lg:0 24px 60px -20px rgba(80,40,0,.3);
  --strip:linear-gradient(90deg, var(--maroon) 0%, var(--amber) 55%, transparent 100%);
  --sb-bg:linear-gradient(180deg, #840034 0%, #6a0029 62%, #4b001d 100%); --sb-border:0;
  --sb-hi:#ffa904; --sb-hi-2:#ffd27a; --sb-on:rgba(255,255,255,.12); --sb-badge:#ffa904; --sb-badge-ink:#840034; --sb-top:#840034; --toast:#840034; --bar-1:#840034; --clock-i:#840034;
  color-scheme: light;
}
/* Ceylon: tea-estate green with gold — calm and light */
:root[data-skin="ceylon"] {
  --bg:#f3f6f1; --surface:#ffffff; --soft:#e9efe6; --hover:#dfe8db; --ink:#10241a; --ink-2:#35503f; --muted:#6b8474; --line:#dbe4d8; --line-2:#c6d4c2;
  --accent:#14532d; --accent-ink:#ffffff; --accent-soft:#dcefe1; --accent-text:#14532d; --accent-deep:#840034;
  --gold:#d98f00; --gold-2:#ffa904; --gold-soft:#fff3d6; --gold-ink:#6b4300;
  --ok:#12805c; --ok-soft:#e1f4ec; --warn:#a35f00; --warn-soft:#fff1d6; --bad:#c81e1e; --bad-soft:#ffe5e5;
  --shadow-sm:0 1px 2px rgba(10,40,20,.06); --shadow:0 1px 2px rgba(10,40,20,.05), 0 8px 24px -8px rgba(10,40,20,.14); --shadow-lg:0 24px 60px -20px rgba(10,40,20,.3);
  --strip:linear-gradient(90deg, #14532d 0%, var(--amber) 55%, transparent 100%);
  --sb-bg:linear-gradient(180deg, #0f3d22 0%, #0b301b 62%, #072213 100%); --sb-border:0;
  --sb-hi:#ffa904; --sb-hi-2:#86efac; --sb-on:rgba(255,255,255,.1); --sb-badge:#ffa904; --sb-badge-ink:#0f3d22; --sb-top:#0f3d22; --toast:#0f3d22; --bar-1:#14532d; --clock-i:#14532d;
  color-scheme: light;
}
/* Slate: cool grey and steel blue — all business */
:root[data-skin="slate"] {
  --bg:#eef1f5; --surface:#ffffff; --soft:#e4e8ee; --hover:#d9dfe7; --ink:#121a26; --ink-2:#364354; --muted:#6b7889; --line:#dde2ea; --line-2:#c9d1dc;
  --accent:#1f4e8c; --accent-ink:#ffffff; --accent-soft:#e1eaf7; --accent-text:#1f4e8c; --accent-deep:#ff0404;
  --gold:#e08a00; --gold-2:#ffa904; --gold-soft:#fff0d4; --gold-ink:#6b4300;
  --ok:#12805c; --ok-soft:#e1f4ec; --warn:#a35f00; --warn-soft:#fff1d6; --bad:#d10303; --bad-soft:#ffe5e5;
  --shadow-sm:0 1px 2px rgba(10,20,40,.06); --shadow:0 1px 2px rgba(10,20,40,.05), 0 8px 24px -8px rgba(10,20,40,.14); --shadow-lg:0 24px 60px -20px rgba(10,20,40,.3);
  --strip:linear-gradient(90deg, #1f4e8c 0%, var(--amber) 55%, transparent 100%);
  --sb-bg:linear-gradient(180deg, #1c2733 0%, #151e27 62%, #0f161e 100%); --sb-border:0;
  --sb-hi:#ffa904; --sb-hi-2:#4aa3ff; --sb-on:rgba(255,255,255,.09); --sb-badge:#ffa904; --sb-badge-ink:#1c2733; --sb-top:#1c2733; --toast:#1c2733; --bar-1:#1f4e8c; --clock-i:#1f4e8c;
  color-scheme: light;
}
/* Indian Ocean: deep teal water, amber sun */
:root[data-skin="ocean"] {
  --bg:#041c22; --surface:#072a32; --soft:#0b353f; --hover:#0f414c; --ink:#eafcff; --ink-2:#bfe6ec; --muted:#7fb3bc; --line:#103f49; --line-2:#164f5b;
  --accent:#2dd4bf; --accent-ink:#04252b; --accent-soft:#0d3f3f; --accent-text:#7ee8dc; --accent-deep:#ffa904;
  --gold:#ffa904; --gold-2:#ffc24d; --gold-soft:#3a2a10; --gold-ink:#ffd27a;
  --ok:#4fd6a0; --ok-soft:#0b2a26; --warn:#ffb938; --warn-soft:#2e2208; --bad:#ff5a5a; --bad-soft:#330b1a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -10px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -18px rgba(0,0,0,.7);
  --strip:linear-gradient(90deg, var(--amber) 0%, #2dd4bf 60%, transparent 100%);
  --sb-bg:linear-gradient(180deg, #052a32 0%, #04222a 60%, #031a20 100%); --sb-border:1px solid #0d3a44;
  --sb-hi:#ffa904; --sb-hi-2:#2dd4bf; --sb-on:rgba(255,255,255,.08); --sb-badge:#ffa904; --sb-badge-ink:#052a32; --sb-top:#052a32; --toast:#072a32; --bar-1:#7ee8dc; --clock-i:#2dd4bf;
  color-scheme: dark;
}
/* After Hours: black with magenta and cyan — club lighting */
:root[data-skin="afterhours"] {
  --bg:#07060b; --surface:#0f0d17; --soft:#16131f; --hover:#1e1a2a; --ink:#f5f2ff; --ink-2:#cfc7e6; --muted:#8d84a8; --line:#231e33; --line-2:#302842;
  --accent:#ff2bd6; --accent-ink:#ffffff; --accent-soft:#33103a; --accent-text:#ff7ae6; --accent-deep:#00e5ff;
  --gold:#00e5ff; --gold-2:#6df3ff; --gold-soft:#062a30; --gold-ink:#9ff0ff;
  --ok:#3fd49a; --ok-soft:#0c2419; --warn:#ffb13b; --warn-soft:#2a1d08; --bad:#ff4d6d; --bad-soft:#330b1a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -10px rgba(0,0,0,.75); --shadow-lg:0 24px 60px -18px rgba(0,0,0,.85);
  --strip:linear-gradient(90deg, #ff2bd6 0%, #00e5ff 60%, transparent 100%);
  --sb-bg:linear-gradient(180deg, #0d0a16 0%, #09070f 60%, #06050b 100%); --sb-border:1px solid #231e33;
  --sb-hi:#ff2bd6; --sb-hi-2:#00e5ff; --sb-on:rgba(255,255,255,.07); --sb-badge:#00e5ff; --sb-badge-ink:#07060b; --sb-top:#0d0a16; --toast:#1a1426; --bar-1:#ffffff; --clock-i:#00e5ff;
  color-scheme: dark;
}
:root[data-skin="afterhours"] .sb::after { box-shadow:0 0 18px #ff2bd6; }
:root[data-skin="afterhours"] .mark { background:#1a1426; }
/* Phosphor: green on black, like the old terminals */
:root[data-skin="phosphor"] {
  --bg:#050807; --surface:#0a100d; --soft:#0f1713; --hover:#152019; --ink:#d8ffe6; --ink-2:#9fdcb6; --muted:#5f9a78; --line:#16261d; --line-2:#1f3629;
  --accent:#22c55e; --accent-ink:#04110a; --accent-soft:#0d2a1a; --accent-text:#4ade80; --accent-deep:#ffa904;
  --gold:#4ade80; --gold-2:#86efac; --gold-soft:#0d2a1a; --gold-ink:#a7f3c4;
  --ok:#4ade80; --ok-soft:#0d2a1a; --warn:#ffb13b; --warn-soft:#2a1d08; --bad:#ff4d4d; --bad-soft:#2e0d10;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -10px rgba(0,0,0,.75); --shadow-lg:0 24px 60px -18px rgba(0,0,0,.85);
  --strip:linear-gradient(90deg, #22c55e 0%, #86efac 60%, transparent 100%);
  --sb-bg:linear-gradient(180deg, #070c09 0%, #050907 60%, #040705 100%); --sb-border:1px solid #16261d;
  --sb-hi:#22c55e; --sb-hi-2:#86efac; --sb-on:rgba(255,255,255,.06); --sb-badge:#22c55e; --sb-badge-ink:#04110a; --sb-top:#070c09; --toast:#0f1713; --bar-1:#86efac; --clock-i:#22c55e;
  color-scheme: dark;
}
:root[data-skin="phosphor"] .mark { background:#0f1713; }
/* Amber and maroon in the shared chrome follow the theme's own accents */
:root[data-skin="afterhours"], :root[data-skin="phosphor"], :root[data-skin="ocean"] { --amber:var(--gold); --red:var(--accent-deep); }
:root[data-skin="afterhours"] .btn.accent, :root[data-skin="phosphor"] .btn.accent { color:var(--accent-ink); }

/* ── 11. The vibrant ones ───────────────────────────────────────── */
/* Violet Sky: deep violet with electric purple, gold and a teal edge */
:root[data-skin="violet"] {
  --bg:#12062b; --surface:#1c0c42; --soft:#25135a; --hover:#2f1a6c; --ink:#f7f2ff; --ink-2:#d9ccff; --muted:#a591d6; --line:#2f1d66; --line-2:#3f2a84;
  --accent:#a855f7; --accent-ink:#ffffff; --accent-soft:#3b1a6e; --accent-text:#d4a8ff; --accent-deep:#2de2c6;
  --gold:#ffb020; --gold-2:#ffd166; --gold-soft:#3a2a10; --gold-ink:#ffe08a;
  --ok:#2de2c6; --ok-soft:#0b3330; --warn:#ffb020; --warn-soft:#3a2a10; --bad:#ff5c8a; --bad-soft:#3d1030;
  --shadow-sm:0 1px 2px rgba(10,0,40,.5); --shadow:0 1px 2px rgba(10,0,40,.45), 0 10px 28px -10px rgba(120,60,255,.35); --shadow-lg:0 24px 60px -18px rgba(120,60,255,.5);
  --strip:linear-gradient(90deg, #a855f7 0%, #ffb020 50%, #2de2c6 80%, transparent 100%);
  --sb-bg:linear-gradient(170deg, #3b0f8f 0%, #5b1cc9 35%, #7a1fa0 70%, #1e0a52 100%); --sb-border:1px solid #4a2a9a;
  --sb-hi:#ffb020; --sb-hi-2:#2de2c6; --sb-on:rgba(255,255,255,.14); --sb-badge:#ffb020; --sb-badge-ink:#2a0a5e; --sb-top:#3b0f8f; --toast:#2a1160; --bar-1:#d4a8ff; --clock-i:#2de2c6;
  --amber:#ffb020; --red:#ff5c8a;
  color-scheme: dark;
}
:root[data-skin="violet"] .mark { background:#5b1cc9; box-shadow:0 3px 14px rgba(168,85,247,.5); }
:root[data-skin="violet"] .sb::after { box-shadow:0 0 16px #a855f7; }
/* Perahera: festival colours — magenta, saffron and green on warm white */
:root[data-skin="perahera"] {
  --bg:#fff7ef; --surface:#ffffff; --soft:#ffefe0; --hover:#ffe4cc; --ink:#2a0a1e; --ink-2:#5c2a45; --muted:#93627a; --line:#f2dccb; --line-2:#e8c6ad;
  --accent:#c2185b; --accent-ink:#ffffff; --accent-soft:#fde0ec; --accent-text:#b0134f; --accent-deep:#0f9d58;
  --gold:#f5a300; --gold-2:#ffc247; --gold-soft:#fff1cc; --gold-ink:#6b4300;
  --ok:#0f9d58; --ok-soft:#dcf5e8; --warn:#c96a00; --warn-soft:#ffe9d1; --bad:#d11a2a; --bad-soft:#ffe1e3;
  --shadow-sm:0 1px 2px rgba(120,20,60,.08); --shadow:0 1px 2px rgba(120,20,60,.06), 0 8px 24px -8px rgba(194,24,91,.22); --shadow-lg:0 24px 60px -20px rgba(194,24,91,.35);
  --strip:linear-gradient(90deg, #c2185b 0%, #f5a300 45%, #0f9d58 75%, transparent 100%);
  --sb-bg:linear-gradient(170deg, #b0134f 0%, #d8342e 45%, #f07c14 100%); --sb-border:0;
  --sb-hi:#ffd166; --sb-hi-2:#7cf2b0; --sb-on:rgba(255,255,255,.16); --sb-badge:#ffd166; --sb-badge-ink:#7a0b36; --sb-top:#b0134f; --toast:#8a0f3f; --bar-1:#c2185b; --clock-i:#c2185b;
  --amber:#f5a300; --red:#d11a2a;
  color-scheme: light;
}
:root[data-skin="perahera"] .mark { background:#c2185b; }
:root[data-skin="perahera"] .btn.accent { color:#3a1a00; }
/* Coral Reef: deep lagoon with coral, lime and turquoise */
:root[data-skin="reef"] {
  --bg:#03242b; --surface:#06333c; --soft:#0a404b; --hover:#0e4c58; --ink:#f0fdff; --ink-2:#bfeaf0; --muted:#7fbcc6; --line:#0f4a55; --line-2:#155c69;
  --accent:#ff6b6b; --accent-ink:#2a0a0a; --accent-soft:#4a1f2a; --accent-text:#ff9a9a; --accent-deep:#c6ff4d;
  --gold:#22e3c9; --gold-2:#7ff5e4; --gold-soft:#0a3a38; --gold-ink:#a8fff2;
  --ok:#c6ff4d; --ok-soft:#1f3a0a; --warn:#ffb020; --warn-soft:#3a2a10; --bad:#ff6b6b; --bad-soft:#4a1f2a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -10px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -18px rgba(0,0,0,.7);
  --strip:linear-gradient(90deg, #ff6b6b 0%, #22e3c9 50%, #c6ff4d 80%, transparent 100%);
  --sb-bg:linear-gradient(170deg, #075a66 0%, #0a7f8c 40%, #0b4f8f 100%); --sb-border:1px solid #0f6a78;
  --sb-hi:#ff6b6b; --sb-hi-2:#c6ff4d; --sb-on:rgba(255,255,255,.14); --sb-badge:#c6ff4d; --sb-badge-ink:#0a3a2a; --sb-top:#075a66; --toast:#06333c; --bar-1:#7ff5e4; --clock-i:#22e3c9;
  --amber:#22e3c9; --red:#ff6b6b;
  color-scheme: dark;
}
:root[data-skin="reef"] .mark { background:#0a7f8c; }
:root[data-skin="reef"] .btn.accent { color:#03242b; }
/* Sunset Drive: indigo dusk, hot pink, orange and a cyan horizon */
:root[data-skin="sunset"] {
  --bg:#150a2e; --surface:#211245; --soft:#2b1a58; --hover:#35226a; --ink:#fff4fa; --ink-2:#e8cfe4; --muted:#b08fb4; --line:#3a2470; --line-2:#4b3288;
  --accent:#ff5e8a; --accent-ink:#ffffff; --accent-soft:#4d1f3e; --accent-text:#ff9fbd; --accent-deep:#31d2ff;
  --gold:#ff9f1c; --gold-2:#ffc65c; --gold-soft:#3d2a10; --gold-ink:#ffd98a;
  --ok:#31d2ff; --ok-soft:#0d3340; --warn:#ff9f1c; --warn-soft:#3d2a10; --bad:#ff4d6d; --bad-soft:#40142a;
  --shadow-sm:0 1px 2px rgba(10,0,40,.5); --shadow:0 1px 2px rgba(10,0,40,.45), 0 10px 28px -10px rgba(255,94,138,.3); --shadow-lg:0 24px 60px -18px rgba(255,94,138,.45);
  --strip:linear-gradient(90deg, #ff5e8a 0%, #ff9f1c 50%, #31d2ff 80%, transparent 100%);
  --sb-bg:linear-gradient(180deg, #2a1266 0%, #7a1f8f 40%, #d63a6e 75%, #ff8a3d 100%); --sb-border:0;
  --sb-hi:#ffc65c; --sb-hi-2:#31d2ff; --sb-on:rgba(255,255,255,.16); --sb-badge:#ffc65c; --sb-badge-ink:#4a0f3a; --sb-top:#2a1266; --toast:#3a1a6e; --bar-1:#ff9fbd; --clock-i:#31d2ff;
  --amber:#ff9f1c; --red:#ff4d6d;
  color-scheme: dark;
}
:root[data-skin="sunset"] .mark { background:#7a1f8f; }
:root[data-skin="sunset"] .btn.accent { color:#3a1a00; }