/* Dusk colour modes: the signed-in workspace in the palette of the AI-learning
   shot - near-black plum surfaces, a magenta-to-violet gradient for actions, an electric
   accent kept for highlights and a mauve page wash. Six modes share one structure and
   differ only in hue; the day/night switch still decides paper or ink. Printed records
   (.rs, .cp) stay white paper in every mode. The public landing page is not part of this
   palette - it keeps its own green and white scheme in landing.css. */

/* ---------- structure: dark is the resting state ---------- */
:root{
  --pink:#f06bd8;--violet:#8b3bd6;
  --tx:#f5eff7;--mu:#b3a6ba;--bd:rgba(255,255,255,.10);--pri:#b34ae4;--pt:#fff;--ac:#cbb2ff;
  --ok:#93e7b7;--okb:rgba(74,222,128,.14);--wn:#ffd47d;--wnb:rgba(255,200,90,.14);--er:#ff9db6;--erb:rgba(255,90,130,.15);--in:#bdc9ff;--inb:rgba(130,150,255,.15);
  --sb:#0c0910;color-scheme:dark;
  --bg:var(--page-base);--sf:var(--sf-dark);
  --glass:color-mix(in srgb,var(--sf) 82%,transparent);
  --card-sheen:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  --field:rgba(255,255,255,.05);--row-hover:rgba(255,255,255,.045);--th-bg:rgba(255,255,255,.04);
  --card-shadow:0 22px 48px rgba(0,0,0,.36);
  --login-card:linear-gradient(180deg,color-mix(in srgb,var(--sf) 88%,transparent),color-mix(in srgb,var(--bg) 92%,transparent));
  --page-bg:radial-gradient(920px 640px at 90% -12%,var(--glow-a),transparent 62%),radial-gradient(780px 560px at -6% 10%,var(--glow-b),transparent 58%),var(--page-base);
  --page-bg-l:radial-gradient(920px 640px at 90% -12%,var(--glow-a-l),transparent 62%),radial-gradient(780px 560px at -6% 10%,var(--glow-b-l),transparent 58%),var(--page-base-l);
  --login-bg:radial-gradient(900px 620px at 12% -12%,var(--glow-a),transparent 58%),radial-gradient(760px 600px at 102% 110%,var(--glow-b),transparent 56%),linear-gradient(160deg,var(--page-base),var(--band-b) 58%,var(--side-bottom));
  --login-bg-l:radial-gradient(900px 620px at 12% -12%,var(--glow-a-l),transparent 58%),radial-gradient(760px 600px at 102% 110%,var(--glow-b-l),transparent 56%),linear-gradient(160deg,var(--page-base-l),#fff 58%,var(--page-base-l))
}

/* ---------- the modes; plum is the resting default ----------
   The bare :root carries plum, so a page that never picked a mode wears it. An explicit
   pick still wins: [data-mode=x] out-ranks :root on specificity, not on load order. */
:root[data-mode=violet]{
  --grad-brand:linear-gradient(120deg,#7a5cf0 0%,#5b3ce0 50%,#3f26b8 100%);
  --grad-text:linear-gradient(100deg,#c4b5ff 0%,#9b7cff 52%,#67e8f9 100%);
  --grad-text-brand:linear-gradient(100deg,#c4b5ff 0%,#9b7cff 52%,#67e8f9 100%);
  --grad-text-l:linear-gradient(100deg,#4f46c8 0%,#6d28d9 54%,#0e7490 100%);
  --on-grad:#fff;
  --accent:#d9f24c;--accent-l:#4d7c0f;--on-accent:#17121c;--on-accent-brand:#17121c;--accent-brand:#d9f24c;
  --glow-a:rgba(120,90,255,.22);--glow-b:rgba(70,40,220,.20);
  --glow-a-l:rgba(120,90,255,.20);--glow-b-l:rgba(70,40,220,.14);
  --page-base:#0b0a16;--page-base-l:#eeedfb;
  --sf-dark:#131126;--sf-light:#fdfcff;
  --side-top:#121026;--side-bottom:#0a0914;
  --side-top-l:#fbfaff;--side-bottom-l:#f0eefc;
  --band-a:#130f26;--band-b:#19123a;--band-c:#0b0a16;
  --brand-shadow:rgba(90,60,220,.34);--brand-shadow-strong:rgba(120,90,255,.46)
}
:root,:root[data-mode=plum]{
  --grad-brand:linear-gradient(120deg,#c44bd4 0%,#ac32c0 48%,#8e2ea3 100%);
  --grad-text:linear-gradient(100deg,#e07beb 0%,#d96beb 52%,#f2ef6b 100%);
  --grad-text-brand:linear-gradient(100deg,#e07beb 0%,#d96beb 52%,#f2ef6b 100%);
  --grad-text-l:linear-gradient(100deg,#ac32c0 0%,#8e2ea3 54%,#7d8a10 100%);
  --on-grad:#fff;
  --accent:#f2ef6b;--accent-l:#7d8a10;--on-accent:#221926;--on-accent-brand:#221926;--accent-brand:#f2ef6b;
  --glow-a:rgba(172,50,192,.18);--glow-b:rgba(142,46,163,.20);
  --glow-a-l:rgba(172,50,192,.14);--glow-b-l:rgba(142,46,163,.12);
  --page-base:#151019;--page-base-l:#f3eef3;
  --sf-dark:#1d1622;--sf-light:#fff;
  --side-top:#1d1424;--side-bottom:#100b14;
  --side-top-l:#fdfbff;--side-bottom-l:#ece4ed;
  --band-a:#171020;--band-b:#241a2c;--band-c:#120c17;
  --brand-shadow:rgba(142,46,163,.30);--brand-shadow-strong:rgba(142,46,163,.42)
}
:root[data-mode=rose]{
  --grad-brand:linear-gradient(120deg,#e0459b 0%,#c02fb0 50%,#8a2bc9 100%);
  --grad-text:linear-gradient(100deg,#ffa6d2 0%,#f472c8 52%,#d9f24c 100%);
  --grad-text-brand:linear-gradient(100deg,#ffa6d2 0%,#f472c8 52%,#d9f24c 100%);
  --grad-text-l:linear-gradient(100deg,#b51e73 0%,#8a2bc9 54%,#4d7c0f 100%);
  --on-grad:#fff;
  --accent:#d9f24c;--accent-l:#4d7c0f;--on-accent:#17121c;--on-accent-brand:#17121c;--accent-brand:#d9f24c;
  --glow-a:rgba(240,70,160,.20);--glow-b:rgba(160,40,140,.18);
  --glow-a-l:rgba(240,70,160,.18);--glow-b-l:rgba(160,40,140,.12);
  --page-base:#130a10;--page-base-l:#fbebf3;
  --sf-dark:#1b1119;--sf-light:#fffbfc;
  --side-top:#1a0f16;--side-bottom:#0f080d;
  --side-top-l:#fffafc;--side-bottom-l:#fbeaf3;
  --band-a:#1f0f1a;--band-b:#2a1024;--band-c:#12090f;
  --brand-shadow:rgba(200,50,150,.32);--brand-shadow-strong:rgba(220,70,170,.44)
}
/* the lime mode flips the polarity: lime is the action, pink is the accent, and the
   gradient carries ink rather than white so a bright button stays readable */
:root[data-mode=lime]{
  --grad-brand:linear-gradient(120deg,#d9f24c 0%,#b6e832 50%,#7ed33e 100%);
  --grad-text:linear-gradient(100deg,#eaff8a 0%,#c9f24c 52%,#7ee7b0 100%);
  --grad-text-brand:linear-gradient(100deg,#eaff8a 0%,#c9f24c 52%,#7ee7b0 100%);
  --grad-text-l:linear-gradient(100deg,#3f6212 0%,#4d7c0f 54%,#0e7490 100%);
  --on-grad:#141a0e;
  --accent:#f06bd8;--accent-l:#b0268f;--on-accent:#17121c;--on-accent-brand:#17121c;--accent-brand:#f06bd8;
  --glow-a:rgba(217,242,76,.16);--glow-b:rgba(126,211,62,.16);
  --glow-a-l:rgba(150,200,60,.20);--glow-b-l:rgba(126,211,62,.14);
  --page-base:#0b0f08;--page-base-l:#f2f6e7;
  --sf-dark:#141a0f;--sf-light:#fdfef8;
  --side-top:#131a0f;--side-bottom:#080b06;
  --side-top-l:#fcfdf6;--side-bottom-l:#f1f5e6;
  --band-a:#121a0d;--band-b:#1a2410;--band-c:#0a0f08;
  --brand-shadow:rgba(150,190,50,.30);--brand-shadow-strong:rgba(180,220,70,.42)
}

/* Meadow and Clay come from the CozyPaws pet-shop shot: a forest green with an
   orange accent, and its warm clay side (#5E3118, #B04C23, #C8935F, #C1BD9F). */
:root[data-mode=meadow]{
  --grad-brand:linear-gradient(120deg,#14a35c 0%,#0f7a44 50%,#0a4627 100%);
  --grad-text:linear-gradient(100deg,#c9f8c0 0%,#7ce38b 52%,#ffb877 100%);
  --grad-text-brand:linear-gradient(100deg,#c9f8c0 0%,#7ce38b 52%,#ffb877 100%);
  --grad-text-l:linear-gradient(100deg,#14622f 0%,#2f8f4a 54%,#a4471c 100%);
  --on-grad:#f3fff2;
  --accent:#ff9a4d;--accent-l:#a4471c;--on-accent:#1b1207;--on-accent-brand:#1b1207;--accent-brand:#ff9a4d;
  --glow-a:rgba(98,205,111,.18);--glow-b:rgba(31,122,58,.22);
  --glow-a-l:rgba(98,205,111,.20);--glow-b-l:rgba(31,122,58,.12);
  --page-base:#06120b;--page-base-l:#eef9ec;
  --sf-dark:#0d1d13;--sf-light:#ffffff;
  --side-top:#0b1c12;--side-bottom:#050e08;
  --side-top-l:#f7fdf5;--side-bottom-l:#e8f6e4;
  --band-a:#0a1a10;--band-b:#0f2416;--band-c:#07140b;
  --brand-shadow:rgba(40,150,80,.32);--brand-shadow-strong:rgba(70,190,105,.45)
}
:root[data-mode=clay]{
  --grad-brand:linear-gradient(120deg,#c0653a 0%,#b04c23 50%,#6b3517 100%);
  --grad-text:linear-gradient(100deg,#f0d7b8 0%,#ffb27a 52%,#d9d3b5 100%);
  --grad-text-brand:linear-gradient(100deg,#f0d7b8 0%,#ffb27a 52%,#d9d3b5 100%);
  --grad-text-l:linear-gradient(100deg,#8a3f1c 0%,#b04c23 54%,#5f6b42 100%);
  --on-grad:#fff8f2;
  --accent:#d9d2b4;--accent-l:#6b6644;--on-accent:#1d1409;--on-accent-brand:#1d1409;--accent-brand:#d9d2b4;
  --glow-a:rgba(200,130,70,.16);--glow-b:rgba(150,80,40,.20);
  --glow-a-l:rgba(200,130,70,.18);--glow-b-l:rgba(150,80,40,.12);
  --page-base:#130c07;--page-base-l:#f8f2e8;
  --sf-dark:#1e140c;--sf-light:#fffdfa;
  --side-top:#1a100a;--side-bottom:#0d0704;
  --side-top-l:#fdf8f1;--side-bottom-l:#f2e7d7;
  --band-a:#1a1009;--band-b:#24160d;--band-c:#120b06;
  --brand-shadow:rgba(170,90,40,.32);--brand-shadow-strong:rgba(200,120,60,.45)
}

/* ---------- the explicit theme blocks out-rank the older token sheets ---------- */
:root[data-theme=dark]{
  --bg:var(--page-base);--sf:var(--sf-dark);--tx:#f5eff7;--mu:#b3a6ba;--bd:rgba(255,255,255,.10);--pri:#b34ae4;--pt:#fff;--ac:#cbb2ff;
  --ok:#93e7b7;--okb:rgba(74,222,128,.14);--wn:#ffd47d;--wnb:rgba(255,200,90,.14);--er:#ff9db6;--erb:rgba(255,90,130,.15);--in:#bdc9ff;--inb:rgba(130,150,255,.15);
  --sb:#0c0910;color-scheme:dark
}
:root[data-theme=light]{
  --bg:var(--page-base-l);--sf:var(--sf-light);--tx:#231726;--mu:#6f6076;--bd:#e6d9e9;--pri:#8b3bd6;--pt:#fff;--ac:#7a35c9;
  --ok:#1c7c4b;--okb:#ddf4e6;--wn:#8a5a00;--wnb:#fdf0cf;--er:#b02543;--erb:#fbe3e9;--in:#3a4bd0;--inb:#e8ebff;
  --sb:#120e16;
  --accent:var(--accent-l);--on-accent:#fff;--grad-text:var(--grad-text-l);
  --glass:color-mix(in srgb,var(--sf) 84%,transparent);
  --card-sheen:linear-gradient(165deg,#fff,#fcf7fd);
  --field:#faf5fb;--row-hover:rgba(139,59,214,.05);--th-bg:#f7f0f8;
  --card-shadow:0 16px 36px rgba(74,36,90,.09);
  --login-card:linear-gradient(180deg,#fffdfe,#fbf4fc);
  --page-bg:var(--page-bg-l);--login-bg:var(--login-bg-l);
  color-scheme:light
}
/* paper ink follows the mode, so mint and clay pages carry no plum shadow */
:root[data-theme=light][data-mode=meadow]{
  --tx:#16241a;--mu:#5b6e60;--bd:#d9e8d4;--pri:#1f7a3a;--ac:#176b34;
  --field:#f4fbf2;--row-hover:rgba(31,122,58,.06);--th-bg:#eef8ec;--sb:#0b1c12
}
:root[data-theme=light][data-mode=clay]{
  --tx:#241a12;--mu:#736153;--bd:#e9ddcf;--pri:#a4471f;--ac:#8a3f1c;
  --field:#fdf8f2;--row-hover:rgba(176,76,35,.05);--th-bg:#f7efe4;--sb:#1a100a
}
:root[data-theme=dark][data-mode=meadow]{--tx:#eaf6ee;--mu:#a9c0b0}
:root[data-theme=dark][data-mode=clay]{--tx:#f9f0e7;--mu:#c2b0a0}

::selection{background:var(--accent);color:var(--on-accent)}

body{background:var(--page-bg);background-attachment:fixed;color:var(--tx)}

/* ---------- the rail ---------- */
/* 08-theme-dark.css scopes its shell rules to :root[data-theme=dark]; the :root[data-theme]
   prefix keeps every override here at the same weight and later in the cascade. */
:root[data-theme] .side{width:232px;background:linear-gradient(180deg,var(--side-top),var(--side-bottom));border-right:1px solid rgba(255,255,255,.07);padding:18px 12px 16px;color:#eae1ee;box-shadow:inset -1px 0 0 rgba(255,255,255,.03)}
.brand{padding:6px 10px 18px;font-size:15px;font-weight:800;letter-spacing:-.01em;color:#fff}
:root[data-theme] .brand small{color:var(--accent-brand);opacity:1;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-top:3px}
:root[data-theme] .side .cat{color:rgba(255,255,255,.4);font-size:9.5px;letter-spacing:.17em;margin:18px 12px 6px}
:root[data-theme] .side button{color:rgba(240,235,246,.72);border-radius:12px;padding:10px 12px;font-size:13.5px;transition:background .16s,color .16s,box-shadow .2s}
:root[data-theme] .side button:hover{background:rgba(255,255,255,.06);color:#fff}
:root[data-theme] .side button[aria-current=page]{background:var(--grad-brand);color:var(--on-grad);font-weight:700;box-shadow:0 12px 26px var(--brand-shadow)}
:root[data-theme] .side button[aria-current=page]:before{background:var(--accent-brand);width:3px;box-shadow:0 0 10px color-mix(in srgb,var(--accent) 55%,transparent)}
:root[data-theme] .side .sub{border-left-color:rgba(255,255,255,.12)}
:root[data-theme] .side .sub button{padding:7px 10px;font-size:12.5px}
:root[data-theme] .side .grp{color:rgba(240,235,246,.82);font-weight:600}
:root[data-theme] .side .grp[data-has]{background:color-mix(in srgb,var(--accent) 12%,transparent);color:#fff}
:root[data-theme] .side .ail{background:var(--grad-brand);color:var(--on-grad);border-radius:12px;padding:10px 12px;font-weight:700;box-shadow:0 10px 24px var(--brand-shadow)}
:root[data-theme] .side .ail:hover{filter:brightness(1.1)}
:root[data-theme] .side button[data-go=cats]:not([aria-current=page]):before{background:var(--accent)}
@media (max-width:800px){:root[data-theme] .side{width:auto;flex:none;background:linear-gradient(180deg,var(--side-top),var(--side-bottom));border-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding:10px 12px}
:root[data-theme] .side::-webkit-scrollbar{height:3px}
:root[data-theme] .side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-radius:99px}
:root[data-theme] .side::-webkit-scrollbar-track{background:transparent}.brand{padding:0 8px}.brand{flex:none;white-space:nowrap}:root[data-theme] .brand small{margin-top:2px}}

/* ---------- the rail on paper: pale, so daytime belongs to the page ---------- */
:root[data-theme=light] .side{background:linear-gradient(180deg,var(--side-top-l),var(--side-bottom-l));border-right-color:var(--bd);color:var(--tx);box-shadow:inset -1px 0 0 rgba(90,60,220,.05)}
:root[data-theme=light] .brand{color:var(--tx)}
:root[data-theme=light] .side .brand small{color:var(--accent)}
:root[data-theme=light] .side .cat{color:var(--mu)}
:root[data-theme=light] .side button{color:color-mix(in srgb,var(--tx) 74%,transparent)}
:root[data-theme=light] .side button:hover{background:color-mix(in srgb,var(--pri) 7%,transparent);color:var(--tx)}
:root[data-theme=light] .side .sub{border-left-color:var(--bd)}
:root[data-theme=light] .side .grp{color:color-mix(in srgb,var(--tx) 82%,transparent)}
:root[data-theme=light] .side .grp[data-has]{background:color-mix(in srgb,var(--accent) 26%,transparent);color:var(--tx)}
:root[data-theme=light] .side::-webkit-scrollbar-thumb{background:rgba(35,23,38,.22)}
@media (max-width:800px){:root[data-theme=light] .side{border-bottom-color:var(--bd)}}

/* ---------- the top bar ---------- */
.top{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);border-bottom:1px solid var(--bd);padding:12px 20px;min-height:61px}
.top .sch{font-weight:700;letter-spacing:-.01em;color:var(--tx)}
.slogo{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.92);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.top .crumb{color:var(--mu)}
.thm{width:36px;height:36px;border-radius:50%;background:var(--field);border:1px solid var(--bd);color:var(--accent)}
.thm:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}
.thm:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}
.ail-top{background:var(--grad-brand);color:var(--on-grad);box-shadow:0 8px 20px var(--brand-shadow)}
.ail-top:hover{filter:brightness(1.08)}
.ail-top:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}

/* the colour-mode switch sits beside the day/night switch, with the same weight */
.mode{all:unset;position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--bd);background:var(--field);color:var(--tx);box-sizing:border-box}
.mode:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.mode:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}
.mode i{position:absolute;right:5px;bottom:5px;width:9px;height:9px;border-radius:50%;background:var(--grad-brand);border:1.5px solid var(--sf);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
#login>.mode{position:fixed;top:14px;right:58px;z-index:41}
#login .mode{color:var(--accent)}
.mode-pop{position:fixed;top:64px;right:18px;z-index:70;width:238px;padding:10px;background:var(--card-sheen),var(--sf);border:1px solid var(--bd);border-radius:20px;box-shadow:0 30px 70px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.mode-pop[hidden]{display:none}
.mode-pop b{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);padding:6px 10px 8px}
.mode-pop button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:12px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--tx)}
.mode-pop button:hover{background:var(--row-hover)}
.mode-pop button[aria-checked=true]{background:color-mix(in srgb,var(--accent) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
.mode-pop button:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:1px}
.mode-pop .sw{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.mode-pop .sw-plum{background:linear-gradient(140deg,#c44bd4,#8e2ea3)}
.mode-pop .sw-rose{background:linear-gradient(140deg,#ff8bc8,#c02fb0)}
.mode-pop .sw-violet{background:linear-gradient(140deg,#a08bff,#3f26b8)}
.mode-pop .sw-lime{background:linear-gradient(140deg,#e9ff8a,#7ed33e)}
.mode-pop .sw-meadow{background:linear-gradient(140deg,#8ceb8f,#0f7a44)}
.mode-pop .sw-clay{background:linear-gradient(140deg,#e0b184,#b04c23)}
.mode-pop .tick{margin-left:auto;color:var(--accent);opacity:0}
.mode-pop [aria-checked=true] .tick{opacity:1}
@media (max-width:560px){.mode-pop{top:auto;left:12px;right:12px;bottom:14px;width:auto;border-radius:22px}}

/* ---------- the page ---------- */
.page{padding:26px 28px 48px;max-width:1180px}
@media (max-width:800px){.page{padding:18px 14px 40px}}
h1{font-size:clamp(19px,1.7vw,22px);font-weight:750;letter-spacing:-.022em;margin-bottom:4px;color:var(--tx)}
.crumb{color:var(--mu);font-size:12.5px;line-height:1.5}
.h2{color:var(--tx);font-weight:750;letter-spacing:-.02em}

/* ---------- tiles ---------- */
.cards{gap:14px;margin:18px 0 20px}
:root[data-theme] .card{position:relative;background:var(--card-sheen),var(--sf);border:1px solid var(--bd);border-radius:20px;padding:18px 20px;box-shadow:var(--card-shadow);overflow:hidden}
.cards .card{transition:transform .2s,border-color .2s,box-shadow .2s}
.cards .card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 30%,var(--bd));box-shadow:0 26px 54px rgba(0,0,0,.42)}
.cards .card:before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:0 0 2px 2px;background:var(--grad-brand);opacity:.65}
.cards>.card>b{display:block;font-size:clamp(24px,2.6vw,31px);font-weight:800;letter-spacing:-.045em;line-height:1.12;color:var(--tx)}
.card span{display:block;margin-top:4px;color:var(--mu);font-size:12px;font-weight:600;letter-spacing:.01em}
/* that rule is for the stat tiles; a status pill inside a card's table is a label of its
   own row, not a caption, so it keeps its inline shape */
.card .bd{display:inline-block;margin-top:0}
.card.empty{background:var(--card-sheen),var(--sf);border-style:dashed;box-shadow:none;padding:34px 20px;color:var(--mu);text-align:center}
:root[data-theme=light] .cards .card:hover{box-shadow:0 22px 44px rgba(74,36,90,.14)}

/* ---------- prose cards ---------- */
/* Help and the notes cards are read, not scanned. The topic sits in a heading a step below the page
   title, and the cards fall into two columns so a line stops around 60 characters instead of running
   132 across the screen; one column until 430px will no longer fit. */
#pg:has(.doccard){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:14px}
#pg:has(.doccard)>h1,#pg:has(.doccard)>.crumb{grid-column:1/-1}
.doccard{display:flex;flex-direction:column;gap:3px;max-width:min(100%,72ch);justify-self:center}
.doccard h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.012em;color:var(--ac)}
.doccard p{margin:0;font-size:14px;line-height:1.62;color:var(--tx)}
.doccard p b{font-weight:700}

/* ---------- tables ---------- */
:root[data-theme] .tw{border-radius:20px;background:var(--sf);border:1px solid var(--bd);box-shadow:var(--card-shadow);overflow-x:auto}
th{background:var(--th-bg);color:var(--mu);font-size:10.5px;font-weight:800;letter-spacing:.1em;padding:12px 14px;border-bottom:1px solid var(--bd)}
td{padding:12px 14px;border-bottom:1px solid var(--bd);font-size:13.5px}
tbody tr{transition:background .14s}
tbody tr:hover td{background:var(--row-hover)}
tr:last-child td{border-bottom:0}
:root[data-theme=light] tbody tr:hover td{background:var(--row-hover)}

/* ---------- buttons, pills, notices ---------- */
.btn{border:0;border-radius:999px;background:var(--grad-brand);color:var(--on-grad);font-weight:700;font-size:13px;letter-spacing:.01em;padding:9px 17px;box-shadow:0 10px 24px var(--brand-shadow);transition:transform .15s,filter .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 14px 30px var(--brand-shadow-strong)}
.btn:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}
.btn.alt{background:var(--field);border:1px solid var(--bd);color:var(--tx);box-shadow:none}
.btn.alt:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 36%,transparent);filter:none;box-shadow:none}
.btn.dg{background:linear-gradient(120deg,#e8457a,#a71f45);color:#fff}
.btn.dg:hover{box-shadow:0 14px 30px rgba(231,69,122,.35)}
.btn[disabled]{box-shadow:none;filter:none;transform:none}
.btn.sm{padding:6px 13px;font-size:12.5px}
a.btn{display:inline-block;text-decoration:none}
.bd{border:1px solid transparent;padding:3px 10px;font-size:11.5px;font-weight:700;letter-spacing:.01em}
.bd.ok{background:var(--okb);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 26%,transparent)}
.bd.wn{background:var(--wnb);color:var(--wn);border-color:color-mix(in srgb,var(--wn) 28%,transparent)}
.bd.er{background:var(--erb);color:var(--er);border-color:color-mix(in srgb,var(--er) 28%,transparent)}
.bd.in{background:var(--inb);color:var(--in);border-color:color-mix(in srgb,var(--in) 28%,transparent)}
.bd.xnew{background:var(--accent);color:var(--on-accent);border-color:transparent}
.note{background:linear-gradient(100deg,color-mix(in srgb,var(--pink) 16%,transparent),color-mix(in srgb,var(--violet) 12%,transparent));border:1px solid color-mix(in srgb,var(--pink) 28%,transparent);color:var(--tx);border-radius:14px;padding:12px 15px;line-height:1.55}
:root[data-theme=light] .note{background:linear-gradient(100deg,#fbeafc,#f2e9fd);border-color:#ecd0ef;color:#3a2440}
.note-d{display:flex;align-items:flex-start;gap:10px}
.note-d .notetx{flex:1;min-width:0}
.note-x{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 24%,transparent);background:transparent;color:inherit;font-size:13px;line-height:1;cursor:pointer;opacity:.72;transition:opacity .15s,background .15s}
.note-x:hover{opacity:1;background:color-mix(in srgb,currentColor 10%,transparent)}

/* ---------- fields ---------- */
input[type=number],input[type=text],input[type=email],input[type=password],input[type=search],select,.tx,textarea{background:var(--field);border:1px solid var(--bd);border-radius:12px;color:var(--tx);padding:9px 12px;transition:border-color .18s,box-shadow .18s}
input[type=number]{max-width:90px}
input:focus,select:focus,.tx:focus,textarea:focus{outline:0;border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
select option{background:var(--sf);color:var(--tx)}
::placeholder{color:var(--mu);opacity:.75}
.err{color:var(--er)}
.seg{background:var(--field);border:1px solid var(--bd);border-radius:999px;padding:4px}
.seg button{border-radius:999px;color:var(--mu)}
.seg button[aria-pressed=true]{background:var(--grad-brand);color:var(--on-grad);box-shadow:0 6px 16px var(--brand-shadow)}

/* ---------- dialogs and toasts ---------- */
:root[data-theme] .ov{background:rgba(6,4,9,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-theme] .dlg{background:var(--card-sheen),var(--sf);border:1px solid var(--bd);border-radius:24px;padding:24px;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.dlg h2{color:var(--tx);letter-spacing:-.02em}
:root[data-theme] .dlg.cvd{background:#241d2b}
.dlg .otp input{background:var(--field);border-color:var(--bd);color:var(--tx)}
#toast .t{background:var(--grad-brand);color:var(--on-grad);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
#toast .t.e{background:linear-gradient(120deg,#e8457a,#a71f45);color:#fff}

/* ---------- quick actions ---------- */
:root[data-theme] .qacard{--pu1:var(--accent);--pu3:#cfc2d4;--pu-ink:var(--tx);--pu-soft:var(--field);--pu-line:var(--bd);border-radius:24px;padding:20px}
.qacard:before{display:none}
.qh{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);margin-bottom:12px}
.qa button{border-radius:16px;border:1px solid var(--bd);border-left:1px solid var(--bd);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01)),var(--sf);color:var(--tx);font-weight:700;font-size:13px;padding:16px 10px;box-shadow:none;transition:transform .18s,background .18s,box-shadow .18s,border-color .18s,color .18s}
.qa button span{font-size:24px}
.qa button:hover{background:var(--grad-brand);color:var(--on-grad);border-color:transparent;transform:translateY(-3px);box-shadow:0 18px 36px var(--brand-shadow-strong)}
.qa button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}
.lsearch{border-top:1px dashed var(--bd);margin-top:18px;padding-top:16px}
.lsearch label{color:var(--mu);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.lsearch input{background:var(--field);border-color:var(--bd);color:var(--tx);border-radius:12px}
.lsearch input:focus{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}

/* ---------- exam chips, subject rows, icon buttons ---------- */
.xchip{background:var(--field);border:1px solid var(--bd);border-radius:14px;color:var(--tx)}
.xchip:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.xchip.sel{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.xchip small{color:var(--mu)}
.sj-dbtn,.sj-pn{background:var(--sf);border-color:var(--bd);border-radius:14px;color:var(--tx)}
.sj-opt:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.sj-bn{background:var(--grad-brand);color:var(--on-grad)}
.sj-chip{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--tx)}
.sj-no{color:var(--ac)}
.ibk{background:var(--field);border-color:var(--bd);color:var(--tx);box-shadow:none}
.ibk:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.ibk:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}
.pvbar{background:var(--glass);border-color:var(--bd);border-radius:14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* ---------- learning-area pages ---------- */
.cxc{background:var(--card-sheen),var(--sf)}
.cxc:before{background:linear-gradient(90deg,var(--pink) 0 34%,var(--violet) 34% 70%,var(--accent) 70%)}
.cxt{color:var(--tx)}
.cxm span{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--tx)}
.cxc table th{background:var(--th-bg);color:var(--mu)}
.cxc tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--pink) 4%,transparent)}
.cxs{background:var(--sf);border-color:var(--bd);border-left-color:var(--accent)}
.cxs i{color:var(--mu)}
.cxsum{background:var(--sf);border-color:var(--bd)}
.cxsum>div{border-right-color:var(--bd)}
.cxbar{border-color:var(--bd)}
.cxlg i{border-radius:4px}

/* ---------- sign in ---------- */
#login,:root[data-theme=dark] #login,:root[data-theme=light] #login{background:var(--login-bg)}
#login .lc{background:var(--login-card);border:1px solid rgba(255,255,255,.1);border-radius:26px;box-shadow:0 40px 100px rgba(0,0,0,.5);color:var(--tx);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
:root[data-theme=light] #login .lc{border-color:#ecdff0;box-shadow:0 30px 80px rgba(74,36,90,.16)}
/* The field behind the panel is the school's own line-art: a dark green into navy wash with the icons
   pushed into the outer thirds and the bar-chart skyline along the bottom edge, which leaves the middle
   of the drawing as the one quiet part of it - measured, the block x640-1280 by y309-771 has a local
   contrast of 1.8 against 4-6 anywhere with art in it. So the panel stays centred and the vignette only
   has to hold the corners down, not carve a hole. It is a pseudo-element because the SVG is opaque: a
   second layer in the background stack would never be seen. */
#login,:root[data-theme=dark] #login,:root[data-theme=light] #login{background:#07130E url(/img/login-bg-soft.svg) center/cover no-repeat}
#login::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(1150px 720px at 50% 46%,rgba(4,14,10,.2),rgba(4,14,10,.34) 58%,rgba(4,14,10,.66))}
#login>.lc{position:relative;z-index:1}
/* The green glass belongs to the dark theme only. The light theme's card is an opaque white slab with
   dark labels, and putting this wash behind them measured 1.09:1 - unreadable - while its own card over
   the artwork reads 16.97:1. */
:root:not([data-theme=light]) #login .lc{background:rgba(7,19,14,.74);border-color:rgba(255,255,255,.12)}
#login .lc h1{color:var(--tx);letter-spacing:-.03em;font-weight:800}
#login .lc label{color:var(--tx)}
#login .lc .crumb{color:var(--mu)}
#login .lc input{background:var(--field);border:1px solid var(--bd);border-radius:13px;color:var(--tx)}
#login .lc input:focus{outline:0;border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
#login #lb{background:var(--grad-brand);border:1px solid transparent;color:var(--on-grad);border-radius:999px;min-height:48px;font-weight:700;letter-spacing:.01em;box-shadow:0 16px 34px var(--brand-shadow-strong)}
#login #lb:hover{filter:brightness(1.07);box-shadow:0 20px 40px var(--brand-shadow-strong)}
#login #lb:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:3px}
#login .lc .lk,#login .lp-help a{color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
#login .lc .lk:hover,#login .lp-help a:hover{color:color-mix(in srgb,var(--accent) 70%,#fff)}
:root[data-theme=light] #login .lc .lk:hover,:root[data-theme=light] #login .lp-help a:hover{color:color-mix(in srgb,var(--accent) 75%,#000)}
#login .lc .pw-eye{color:var(--accent)!important}
#login .lc .back,#login .lbrand small{color:var(--mu)}
#login .lbrand b{color:var(--tx);letter-spacing:-.01em}
#login .lbrand svg{border-radius:16px;box-shadow:0 12px 30px var(--brand-shadow)}
#login .okm{color:var(--ok)}
#login .dnote{background:var(--inb);color:var(--in)}
:root[data-theme=light] #login .dnote{background:#ece7fd;color:#4a2a8a}

/* ---------- the assistant panel (its stylesheet loads after this one) ---------- */
/* alama-ai.css paints itself from its own --cl-* set and marks the header with !important;
   remapping those tokens is steadier than re-styling each of its surfaces. */
:root[data-theme] #bnaiP{--cl-bg:var(--sf);--cl-sf:var(--field);--cl-ink:var(--tx);--cl-mu:var(--mu);--cl-bd:var(--bd);--cl-user:color-mix(in srgb,var(--tx) 6%,var(--sf));--cl-acc:var(--accent);background:var(--sf);color:var(--tx);border-left-color:var(--bd);box-shadow:-12px 0 40px rgba(0,0,0,.45)}
:root[data-theme] #bnaiP header{background:var(--grad-brand)!important;color:var(--on-grad)!important;border-bottom-color:transparent!important}
:root[data-theme] #bnaiP header small{color:inherit!important;opacity:.82;font-weight:500}
:root[data-theme] #bnaiP header .btn{background:transparent;color:var(--on-grad)!important;border:1px solid color-mix(in srgb,var(--on-grad) 38%,transparent)}
:root[data-theme] #bnaiP .btn:not(.alt):not(.bnplus):not(.bnsend){background:var(--grad-brand);color:var(--on-grad)!important;border-color:transparent}
:root[data-theme] #bnaiP .bnsend{background:var(--grad-brand);color:var(--on-grad)!important}
:root[data-theme] #bnaiP .bnerr{color:var(--er);background:color-mix(in srgb,var(--er) 14%,transparent)}
:root[data-theme] #bnaiP .bnbd{background:var(--sf)}

/* the printed pages keep their own paper, whatever the screen theme */
@media print{body{background:#fff!important}}