/* ================= Afoli — modern refresh =================
   Loaded after app.css. Calm, product-grade look (think Linear / Vercel / Notion):
   neutral greys, one accent, flat opaque surfaces with hairline borders, small radii, monochrome icons,
   no aurora / glow / glass blur / gradient buttons. Tokens first, then the shared components.
   Module stylesheets load later; the few global rules that must win use :root:root for specificity. */

:root {
  --bg: #0a0a0c;
  --bg2: #0f0f12;
  --surface: #131316;
  --surface-2: #19191d;
  --glass: var(--surface);
  --glass-2: var(--surface-2);
  --line: rgba(255, 255, 255, 0.075);
  --line-2: rgba(255, 255, 255, 0.13);
  --text: #ededef;
  --muted: #a1a1aa;
  --dim: #71717a;
  --accent: #7c7cff;
  --accent-2: #8b9bff;
  --accent-solid: #5b5bd6;
  --pink: #f472b6;
  --ok: #3ecf8e;
  --grad: linear-gradient(var(--accent-solid), var(--accent-solid));
  --r: 12px;
  --r-sm: 8px;
  /* buttons: every module uses these (primary = accent fill, secondary = surface + hairline border) */
  --btn-r: 8px;
  --btn-h: 36px;
  --btn-h-sm: 30px;
  --btn-px: 14px;
  --btn-fs: 13.5px;
  --btn-fw: 600;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -16px rgba(0, 0, 0, 0.6);
  --blur: none;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --field: #0e0e11;
  --soft: rgba(255, 255, 255, 0.035);
  --soft-2: rgba(255, 255, 255, 0.06);
  --soft-3: rgba(255, 255, 255, 0.1);
  --strong: #fafafa;
  --panel: #141417;
  --panel-2: #17171b;
  --t-lav: #c4c4ff;
}
:root[data-theme="light"] {
  --bg: #fbfbfc;
  --bg2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f7f8;
  --line: rgba(9, 9, 11, 0.08);
  --line-2: rgba(9, 9, 11, 0.14);
  --text: #18181b;
  --muted: #52525b;
  --dim: #8b8b94;
  --accent: #4f46e5;
  --accent-2: #4f46e5;
  --accent-solid: #4f46e5;
  --ok: #16a34a;
  --pink: #db2777;
  --shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 8px 24px -16px rgba(9, 9, 11, 0.12);
  --field: #ffffff;
  --soft: rgba(9, 9, 11, 0.025);
  --soft-2: rgba(9, 9, 11, 0.05);
  --soft-3: rgba(9, 9, 11, 0.08);
  --strong: #09090b;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --t-lav: #4338ca;
}

/* ---------- canvas ---------- */
body, :root[data-theme="light"] body { background: var(--bg); font-size: 14.5px; letter-spacing: -0.006em; }
.aurora { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
h1, h2, h3 { letter-spacing: -0.02em; }

/* flat surfaces everywhere (module CSS loads later, hence :root:root) */
:root:root .glass { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--line); box-shadow: var(--shadow); }
:root:root .spot::after { display: none; }

/* ---------- sidebar: flush to the edge, quiet, monochrome icons ---------- */
#rail { left: 0; top: 0; bottom: 0; border-radius: 0; border: 0; border-right: 1px solid var(--line); background: var(--bg2); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 12px 10px; }
#view { margin-left: var(--side); }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; box-shadow: none; background: var(--text); color: var(--bg); }
.brand-name { font-weight: 650; letter-spacing: -0.01em; }
.sb-search { background: var(--soft); border-color: var(--line); border-radius: 8px; padding: 7px 10px; }
.sb-item { border-radius: 7px; padding: 5px 8px; color: var(--muted); font-size: 14px; }
.sb-item:hover { background: var(--soft-2); color: var(--text); }
.sb-item.active { background: var(--soft-3); color: var(--text); font-weight: 550; }
.sb-item.active::before { display: none; }
.sb-ic { width: 20px; height: 20px; border-radius: 0; background: none !important; color: var(--dim) !important; }
.sb-item:hover .sb-ic, .sb-item.active .sb-ic { color: var(--text) !important; }
.sb-ic .ico svg { width: 17px; height: 17px; }
.sb-gh { font-size: 11px; letter-spacing: .06em; padding: 10px 8px 4px; }
.sb-gh.static b { color: var(--dim); }
.sb-group { margin-top: 2px; }
.sb-collapse, .sb-close, .sb-tool { border-radius: 7px; background: transparent; border: 1px solid var(--line); }
.sb-tool { height: 30px; }
.sb-me { border-radius: 8px; }
.sb-me .me-av { width: 28px; height: 28px; font-size: 15px; }
.sb-links a.sb-admin { color: var(--text); }

/* ---------- pages ---------- */
.page { padding: 28px 36px calc(40px + var(--player)); }
.page.enter { transform: none; }

/* ---------- dashboard ---------- */
.dx-head h1 { font-size: 26px; font-weight: 650; letter-spacing: -0.025em; }
.dx-btn { border-radius: 8px; background: var(--surface); padding: 7px 12px; font-size: 13.5px; box-shadow: none; }
.dx-btn.primary { background: var(--accent-solid); border-color: transparent; color: #fff; }
.dx-search { border-radius: 10px; background: var(--surface); padding: 11px 14px; box-shadow: none; }
.dx-search:hover { box-shadow: none; border-color: var(--line-2); }
.dx-cta, .dx-w { border-radius: 12px; }
.dx-w > header > b, .dv-card-h > b, .section-title { font-size: 12px; letter-spacing: .04em; text-transform: none; font-weight: 600; color: var(--muted); }
.dx-tiles { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.dx-tile { flex-direction: row; justify-content: flex-start; align-items: center; text-align: start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: transparent; border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; }
.dx-tile:hover { transform: none; background: var(--soft-2); border-color: var(--line-2); }
.dx-tile-ic { width: 30px; height: 30px; border-radius: 7px; background: var(--soft-2); color: var(--text); }
@media (max-width: 560px) { .dx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .dx-tile { padding: 8px 10px; gap: 8px; font-size: 13px; } .dx-tile > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.dx-tile-ic .ico svg { width: 17px; height: 17px; }
.dx-tile.add { border-style: dashed; }
.dx-time, .dx-big { font-weight: 650; }
.dx-more { color: var(--accent); }
.dx-fx div { border-radius: 7px; }

/* ---------- home hero (signed-out landing) ---------- */
.hero-title { font-weight: 700; letter-spacing: -0.04em; }
.hero-title em, :root[data-theme="light"] .hero-title em { animation: none; background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--accent); }
.hero-badge { color: var(--muted); background: var(--soft); border-color: var(--line); }
.hero-search { border-radius: 10px; background: var(--surface); }
.hero-search:hover { box-shadow: none; border-color: var(--line-2); }
.hero-auth-btn { border-radius: 8px; padding: 9px 16px; font-size: 14px; }
.hero-auth-btn:hover { transform: none; }
.hero-auth-btn.primary { background: var(--accent-solid); box-shadow: none; }
.feature { border-radius: 14px; }

/* ---------- shared tool kit (tools/_shared/devkit.css) ---------- */
:root:root .dv-head h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
:root:root .dv-head h1 .ico { color: var(--muted); }
:root:root .dv-tabs { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; gap: 2px; box-shadow: none; }
:root:root .dv-tab { border-radius: 0; padding: 8px 12px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; box-shadow: none; background: none; }
:root:root .dv-tab:hover { color: var(--text); }
:root:root .dv-tab.on { color: var(--text); background: none; box-shadow: none; border-bottom-color: var(--text); }
:root:root .dv-card, :root:root .dv-opts { border-radius: 12px; }
:root:root .dv-input, :root:root .dv-select { border-radius: 8px; background: var(--field); }
:root:root .dv-input:focus, :root:root .dv-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
:root:root .dv-btn { border-radius: var(--btn-r); min-height: var(--btn-h); padding: 0 var(--btn-px); font-size: var(--btn-fs); font-weight: var(--btn-fw); background: var(--accent-solid); color: #fff; box-shadow: none; }
:root:root .dv-btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); }
:root:root .dv-btn.danger { background: #dc2626; }
:root:root .dv-mini { border-radius: 6px; }
:root:root .dv-seg { border-radius: 8px; }
:root:root .dv-seg button { border-radius: 6px; }

/* ---------- overlays ---------- */
.pal-box { border-radius: var(--r-lg); }
.pal-item { border-radius: 8px; }
.pal-item .ico { color: var(--muted); }
.pal-backdrop { backdrop-filter: none; background: rgba(0, 0, 0, .45); }
.toast { border-radius: 10px; }
.playerbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
#modbar { border-radius: 10px; }
#modbar button { border-radius: 7px; background: var(--accent-solid); }
#sitebar { border-radius: 10px; }
.pill { border-radius: 6px; }
.chip { border-radius: 7px; }
kbd { border-radius: 5px; }
.spinner { border-color: var(--soft-3); border-top-color: var(--text); }

/* ---------- mobile tab bar ---------- */
@media (max-width: 760px) {
  #rail { border-right: 0; }
  #view { margin-left: 0; }
  .page { padding: 18px 16px calc(96px + var(--player)); }
  #tabbar { border-radius: 14px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); border: 1px solid var(--line); }
}

/* ---------- one accent for every module (modules used to set their own bright --c) ----------
   Modules drew text on their bright --c in a hard-coded ink (#fff or a dark tint). With --c forced to the
   site accent that ink is unreadable in one of the themes (#fff on #7c7cff is 3.4:1, dark ink on #4f46e5
   is 2.8:1), so text on a var(--c) fill uses --c-ink, the ink that contrasts with the accent in the current theme. */
:root { --accent-ink: #0c0c1e; }                    /* on #7c7cff: 6.1:1 */
:root[data-theme="light"] { --accent-ink: #fff; }  /* on #4f46e5: 6.3:1 */
:root:root .page.tool-page, :root:root .page.tool-page * { --c: var(--accent); --c-ink: var(--accent-ink); }

/* ---------- calculator ---------- */
:root:root .cx-display { background: var(--field); border-radius: 12px; }
:root:root .cx-display::after { display: none; }
:root:root .cx-key { border-radius: 10px; background: var(--surface-2); border-color: var(--line); font-weight: 500; }
:root:root .cx-key:hover { background: var(--soft-3); }
:root:root .cx-key.fn { color: var(--muted); background: var(--soft); }
:root:root .cx-key.fn:hover { background: var(--soft-2); color: var(--text); }
:root:root .cx-key.op { color: var(--accent); background: var(--soft-2); border-color: var(--line); }
:root:root .cx-key.equals { background: var(--accent-solid); color: #fff; box-shadow: none; border-color: transparent; }
:root:root .cx-key.clr { color: var(--text); background: var(--soft-3); }
:root:root .cx-key.mod { color: var(--accent); }
:root:root .cx-hint { color: var(--dim); }
:root:root .cx-tag { background: var(--soft-2); color: var(--muted); border-color: var(--line); }

/* ---------- calmer module heroes: no coloured glows / blobs ---------- */
:root:root :is(.acd-hero, .acd-hero.in, .as-hero, .ct-hero, .dc-hero, .dm-hero, .ft-hero, .md-hero, .md-hero.drug, .md-hero.dis, .trv-form, .cfd-searchbar, .sc-intro, .sc-locked, .wl-head) {
  background: var(--surface); border-radius: 14px;
}
:root:root :is(.cv-card::before, .dts-card::before, .ck-hero::after) { display: none; }
:root:root :is(.radio, .tvtool) { background: none; }
:root:root .ch-main { background: var(--bg); }

/* games: neutral cards, the piece/emoji is the only colour */
:root:root .gm-card { border-radius: 14px; }
:root:root .gm-card:hover { transform: none; box-shadow: var(--shadow); border-color: var(--line-2); }
:root:root .gm-art { height: 112px; font-size: 56px; background: var(--surface-2); border-bottom: 1px solid var(--line); }

/* module-specific tab / chip rows → the same quiet style */
:root:root .page.tool-page :is([class$="-tab"], [class*="-tab "], [class$="-chip"], [class*="-chip "], [class$="-cat"], [class*="-cat "]):is(.on, .active) {
  background: var(--soft-3); color: var(--text); box-shadow: none; border-color: var(--line-2);
}
:root:root .page.tool-page :is([class$="-tabs"], [class*="-tabs "]) { border-radius: 10px; background: var(--surface); }

/* accent fills always carry white text (some modules were written for bright accents with dark text) */
:root:root .dv-seg button.on, :root:root .nw-topic.on, :root:root .ty-caps, :root:root .gm-btn.primary { color: #fff; background: var(--accent-solid); border-color: transparent; }
:root:root :is(.nt-tag.on, .nt-mode, .ln-seg button.on, .dm-go, .dm-tld.on, .whs-go, .ft-btn.primary, .wf-here, .wf-kind.on, .fdb-btn.primary, .seo-go) { color: #fff; background: var(--accent-solid); border-color: transparent; }
/* modules with their own full-page layout used to rely on the old floating-sidebar gap */
.page.tool-page:not(.devtool):not(.radio):not(.tvtool) { padding: 14px 24px 0; }
@media (max-width: 760px) { .page.tool-page:not(.devtool):not(.radio):not(.tvtool) { padding-left: 12px; padding-right: 12px; } }

/* "Related modules" row at the end of every module page (families in registry.js) */
.related { margin: 28px auto 0; padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); max-width: 1180px; border-top: 1px solid var(--line); }
.related > small { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.related-list { display: flex; flex-wrap: wrap; gap: 6px; }
.related-item { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 13px; background: var(--soft); }
.related-item:hover { background: var(--soft-2); border-color: var(--line-2); }
.related-item svg { color: var(--muted); }
body.pane .related { display: none; }
@media (max-width: 760px) { .related { padding-bottom: 96px; } }

/* ================= shell consistency pass: shared tokens for overlays, focus, danger, contrast ================= */
:root { --r-lg: 14px; --danger: #e5484d; --focus: color-mix(in srgb, var(--accent) 80%, transparent); }
:root[data-theme="light"] { --danger: #dc2626; --dim: #71717a; } /* #8b8b94 was 3.4:1 on white — below AA for the small hints it is used for */

/* one visible keyboard focus ring everywhere (zero specificity: components with their own focus style keep it) */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"]):where(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
:where(input:focus-visible, textarea:focus-visible, select:focus-visible) { outline-offset: 0; }
.lm-item:focus-visible, .pal-item:focus-visible, .sb-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
:root:root :is(.dv-ta, .dv-input, .dv-select):focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pwg-in:focus, .pay-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
:is(#cookie-bar, #cookie-dlg) .ck-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* text areas match .dv-input; native <option> lists stay readable in both themes (they were black text on the dark popup) */
:root:root .dv-ta { border-radius: 8px; }
:root:root :is(.dv-select, select) :is(option, optgroup) { color: var(--text); background: var(--panel-2); }
:root:root .dv-drop { border-radius: 12px; }
:root:root .dv-btn.danger { background: var(--danger); }

/* floating panels and dialogs share one radius, and their buttons use the button tokens */
:is(#cookie-bar, #langmenu, #nf-panel, #i18n-offer, .pwg-dlg, .pay-sheet), #cookie-dlg .ck-box { border-radius: var(--r-lg); }
#sitebar { border-radius: var(--r); }
/* unknown route notice (app.js route()) — same shape as the announcement bar */
.page-notice { max-width: 1280px; margin: 0 auto 14px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-size: 14px; }
.page-notice > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.page-notice button { flex: none; min-height: var(--btn-h); padding: 0 12px; border-radius: var(--btn-r); border: 1px solid var(--line-2); background: var(--soft-2); font-size: var(--btn-fs); font-weight: var(--btn-fw); }
.page-notice button:hover { background: var(--soft-3); }
.pwg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h); padding: 0 var(--btn-px); border-radius: var(--btn-r); font-size: var(--btn-fs); font-weight: var(--btn-fw); }
@media (max-width: 420px) { .pwg-btns .pwg-btn { flex: 1 1 auto; } }
#modbar button, .sb-none button { border-radius: var(--btn-r); }
#i18n-offer .btn, .sb-add:hover { background: var(--accent-solid); color: #fff; }
.toast { max-width: min(560px, calc(100vw - 24px)); overflow-wrap: anywhere; }
.toast.error { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.sb-links a.sb-admin { color: var(--danger); }

/* command palette: the input may shrink (its intrinsic width pushed the box content off the left edge on phones) */
.pal-input { min-width: 0; color: var(--text); }
.pal-item small { flex: none; white-space: nowrap; }
.pal-item > span:not(.ico) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .palette { padding-top: 8vh; } .pal-head { padding: 14px; } .pal-head kbd { display: none; } }

/* module catalogue (#/apps): cards could not shrink below 300px (sideways scroll at 320px); same radii and monochrome
   icons as the dashboard tiles and sidebar */
.ap-head h1 { gap: 10px; }
.ap-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
@media (max-width: 760px) { .ap-grid { grid-template-columns: minmax(0, 1fr); } }
.ap-card { min-width: 0; border-radius: var(--r); background: var(--surface); }
.ap-card.on { border-color: var(--line-2); }
.ap-ic { width: 40px; height: 40px; border-radius: var(--r-sm); color: var(--text); background: var(--soft-2); }
.ap-switch input:checked + i { background: var(--accent-solid); }
.ap-switch input:focus-visible + i { outline-color: var(--focus); }
.ap-sbox { border-radius: 10px; background: var(--surface); }
.ap-seg, .ap-stats { border-radius: var(--r-sm); background: var(--surface); }
.ap-seg button { border-radius: 6px; }
.ap-bulk { min-height: var(--btn-h-sm); border-radius: var(--btn-r); }
.ap-chips small { font-size: 11.5px; }

/* first-run module picker (dashboard.js onboarding): the icon took flex:1 like the label, so labels sat off-centre */
.dx-modal { border-radius: var(--r-lg); }
.dx-preset { border-radius: var(--r); }
.dx-cat { border-radius: var(--r-sm); }
.dx-cat > .ico { flex: none; }
.dx-cat > span:not(.ico) { flex: 1; min-width: 0; text-align: start; }
.dx-cat.on { border-color: var(--accent); }

@media (max-width: 760px) { .ap-bulk { min-height: var(--btn-h); } }

/* language menu: every row follows the UI direction (name at the start, code at the end), whatever its own dir */
:root:not([dir="rtl"]) .lm-item[dir="rtl"], :root[dir="rtl"] .lm-item[dir="ltr"] { flex-direction: row-reverse; }
:root:not([dir="rtl"]) .lm-item[dir="rtl"] b { text-align: left; }
:root[dir="rtl"] .lm-item[dir="ltr"] b { text-align: right; }

/* dashboard tiles on narrow phones: up to two lines instead of "Kalkulya…" */
@media (max-width: 420px) {
  .dx-tile { padding: 7px; gap: 6px; font-size: 12.5px; line-height: 1.25; }
  .dx-tile-ic { width: 24px; height: 24px; }
  .dx-tile > span:last-child { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: break-word; }
  .dx-tile-ic .ico svg { width: 15px; height: 15px; }
}
@media (max-width: 360px) { .dx-tile { padding: 6px; gap: 5px; font-size: 12px; } }

/* right-to-left: the sidebar is flush to the right edge (mirror of the LTR layout above) */
[dir="rtl"] #rail { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] #view { margin-left: 0; margin-right: var(--side); }
[dir="rtl"] .sb-group:not(.open) .sb-chev { transform: rotate(90deg); } /* collapsed group arrow points to the start side */
[dir="rtl"] :is(#cookie-bar, #cookie-dlg) .ck-switch::after { left: auto; right: 3px; }
[dir="rtl"] :is(#cookie-bar, #cookie-dlg) .ck-switch:checked::after { transform: translateX(-18px); }
@media (max-width: 760px) { [dir="rtl"] #rail { border-left: 0; } [dir="rtl"] #view { margin-right: 0; } }

/* "more contrast" preference: stronger hairlines and secondary text */
@media (prefers-contrast: more) {
  :root { --line: rgba(255, 255, 255, 0.26); --line-2: rgba(255, 255, 255, 0.4); --muted: #d4d4d8; --dim: #a1a1aa; }
  :root[data-theme="light"] { --line: rgba(9, 9, 11, 0.3); --line-2: rgba(9, 9, 11, 0.5); --muted: #3f3f46; --dim: #52525b; }
}

/* ================= sidebar «Messages · Mail · Notifications» row (assets/js/app.js commsRow; badges: core/unread.js) ================= */
.sb-comms { display: flex; gap: 4px; padding: 2px 0; }
.sb-comm { position: relative; flex: 1 1 0; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px;
  border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; background: var(--soft); border: 1px solid var(--line); transition: background .15s, color .15s; }
.sb-comm:hover { color: var(--text); background: var(--soft-2); border-color: var(--line-2); }
.sb-comm:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sb-comm.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
:root[data-theme="light"] .sb-comm.active { color: var(--accent-solid, var(--accent)); }
.sb-comm-ic { position: relative; display: grid; place-items: center; height: 20px; }
.sb-comm-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.ur-badge { position: absolute; top: -7px; right: -11px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: #e5484d; color: #fff;
  font: 700 10.5px/17px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--surface, var(--bg)); pointer-events: none; }
.ur-badge[hidden] { display: none; }
[dir="rtl"] .ur-badge { right: auto; left: -11px; }
body.side-mini .sb-comms { flex-direction: column; }
body.side-mini .sb-comm { min-height: 38px; flex: none; }
/* mini rail: icons + badges only; the name stays for screen readers (the link's tooltip shows it) */
body.side-mini .sb-comm-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) { .sb-comms { display: none; } }

/* ================= cascading menu (sidebar ▦ «Menu» → categories + one mega-menu panel per category; assets/js/navmenu.js) ================= */
/* icons follow the sidebar rows: monochrome line icons in currentColor, no tiles; only the open module is accent-coloured */
.sb-cmenu { flex: none; width: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--soft); border: 1px solid var(--line); color: var(--muted); }
.sb-cmenu:hover, .sb-cmenu[aria-expanded="true"] { color: var(--text); border-color: var(--line-2); }
.sb-cmenu[aria-expanded="true"] { background: var(--soft-3); }
body.side-mini .sb-cmenu { width: auto; height: 34px; }
@media (max-width: 760px) { .sb-cmenu, #casmenu { display: none !important; } }
#casmenu { position: fixed; z-index: 700; /* above module overlays inside #view (e.g. map legends at 500–600) */ top: var(--cas-top, 12px); display: flex; align-items: flex-start; gap: 6px; pointer-events: none; }
#casmenu :is(.cas-col, .cas-panel) { pointer-events: auto; max-height: calc(100vh - var(--cas-top, 12px) - 12px); display: flex; flex-direction: column;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); animation: casIn .14s ease-out; }
#casmenu .cas-col { width: 236px; }
@keyframes casIn { from { opacity: 0; transform: translateX(-6px); } }
#casmenu[dir="rtl"] :is(.cas-col, .cas-panel) { animation-name: casInR; } @keyframes casInR { from { opacity: 0; transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { #casmenu :is(.cas-col, .cas-panel) { animation: none; } }
.cas-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 6px; display: flex; flex-direction: column; gap: 0; }
.cas-list > * { flex-shrink: 0; }
.cas-chips { display: flex; gap: 4px; padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.cas-chip { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--muted); background: var(--soft); border: 1px solid var(--line); outline: none; }
.cas-chip:hover, .cas-chip:focus-visible { color: var(--text); background: var(--soft-2); } .cas-chip:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.cas-chip.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cas-fdot { position: absolute; top: -3px; inset-inline-end: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); box-shadow: 0 0 0 2px var(--panel-2); }
.cas-item { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 0 8px; border-radius: 8px; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 500; text-align: start; text-decoration: none; }
.cas-item:hover, .cas-item:focus-visible, .cas-item.on { background: var(--soft-2); color: var(--text); outline: none; }
.cas-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.cas-item.here .cas-label { color: var(--text); font-weight: 600; }
.cas-item.apps { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.cas-ic { display: grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--dim); }
.cas-item:is(:hover, :focus-visible, .on) .cas-ic { color: var(--text); }
.cas-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cas-n { color: var(--dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cas-chev { font-style: normal; color: var(--dim); font-size: 15px; line-height: 1; width: 10px; text-align: center; }
/* the category panel: sub-categories side by side */
#casmenu .cas-panel { width: calc(var(--cas-cols, 3) * 196px + (var(--cas-cols, 3) - 1) * 8px + 20px); max-width: calc(100vw - 24px); }
.cas-ph { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px 4px; }
.cas-ph b { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cas-all { flex: none; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; border-radius: 6px; padding: 2px 4px; }
.cas-all:hover, .cas-all:focus-visible { color: var(--text); text-decoration: underline; outline: none; }
.cas-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(var(--cas-cols, 3), minmax(0, 1fr)); gap: 0 8px; padding: 0 10px 8px; }
.cas-gcol { min-width: 0; display: flex; flex-direction: column; }
.cas-sub { display: flex; flex-direction: column; padding-top: 6px; }
.cas-sh { display: flex; align-items: center; gap: 6px; padding: 6px 8px 3px; color: var(--dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cas-sh small { font-weight: 600; letter-spacing: 0; opacity: .8; }
.cas-mod { position: relative; display: flex; align-items: center; border-radius: 8px; }
.cas-mod .cas-item { min-height: 30px; font-size: 13.5px; padding-inline-end: 4px; }
.cas-mod:hover .cas-item { background: var(--soft-2); color: var(--text); }
.cas-mod.active .cas-item, .cas-mod.active .cas-ic { color: var(--accent); }
.cas-mod.active .cas-item { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.cas-mod.off .cas-item { opacity: .55; }
.cas-acts { position: absolute; inset-inline-end: 3px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; }
.cas-mod:hover .cas-acts, .cas-mod:focus-within .cas-acts { display: flex; }
.cas-mod.fav .cas-acts { display: flex; } .cas-mod.fav:not(:hover):not(:focus-within) .cas-act:not(.cas-fav) { display: none; }
.cas-act { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--dim); font-size: 12px; background: var(--panel-2); }
.cas-act:hover { background: var(--soft-3); color: var(--text); }
.cas-fav { font-size: 14px; } .cas-fav.on { color: var(--text); }
.cas-act.add { font-weight: 700; color: var(--text); }

/* ================= mobile bottom nav (≤ 760px; assets/js/mobnav.js): bar with 4 modules + «☰ All» sheet ================= */
@media (max-width: 760px) {
  :root { --tabbar: calc(62px + env(safe-area-inset-bottom, 0px)); }
  #rail, #casmenu { display: none !important; }
  #tabbar { display: flex; position: fixed; z-index: 88; left: 0; right: 0; bottom: 0; height: var(--tabbar); box-sizing: border-box; margin: 0; gap: 2px; align-items: stretch; justify-content: stretch;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .mnav-i { flex: 1 1 0; min-width: 0; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 2px;
    border-radius: 10px; color: var(--muted); font: inherit; font-size: 11px; font-weight: 600; text-decoration: none; background: none; }
  .mnav-i[aria-current="page"], .mnav-i.all[aria-expanded="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
  :root[data-theme="light"] .mnav-i[aria-current="page"] { color: var(--accent-solid); }
  .mnav-ic { position: relative; display: grid; place-items: center; height: 24px; }
  .mnav-ic .nf-badge { top: -5px; right: -12px; }
  [dir="rtl"] .mnav-ic .nf-badge { right: auto; left: -12px; }
  .mnav-burger { font-size: 20px; line-height: 1; font-weight: 400; }
  .mnav-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* nothing sits under the bar */
  .page { padding-bottom: calc(var(--tabbar) + 24px + var(--player)); }
  .page.tool-page { height: calc(100dvh - var(--tabbar)); }
  :root body.has-wtabs .page.tool-page { height: calc(100dvh - var(--tabbar) - var(--wt)); }
  :root body.split .page.tool-page { height: calc(100dvh - var(--tabbar) - var(--wt) - var(--sp-h)); }
  :root #split-pane { bottom: var(--tabbar); }
  .playerbar { bottom: calc(var(--tabbar) + 8px); }
  #modbar { bottom: calc(var(--tabbar) + 10px); }
  #omnia-call.min { bottom: calc(var(--tabbar) + 10px); }
  #i18n-offer, #cookie-bar { bottom: calc(var(--tabbar) + 10px); }
  .human-box { bottom: calc(var(--tabbar) + 20px); }
  .related { padding-bottom: calc(var(--tabbar) + 24px); }
  /* dialogs, overlays and the sheet hide the bar (as Yuva does with :has(.overlay)) */
  body:has([aria-modal="true"]:not([hidden]), dialog[open], #palette:not([hidden]), body > :is([class*="-modal"], .overlay, .ch-modal-bg, .ch-pop-bg.dim, .tx-sheet, .jb-shade.on), #omnia-call:not(.min)) #tabbar { display: none; }
  body.mnav-lock { overflow: hidden; }
}
.mnav-bg { position: fixed; inset: 0; z-index: 700; display: flex; align-items: flex-end; background: rgba(5, 8, 20, .5); animation: mnavFade .15s ease-out; }
.mnav-card { width: 100%; max-height: 80vh; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border-radius: 18px 18px 0 0; border-top: 1px solid var(--line-2);
  box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, .6); padding-bottom: env(safe-area-inset-bottom, 0px); outline: none; animation: mnavUp .2s ease-out; }
@keyframes mnavFade { from { opacity: 0; } } @keyframes mnavUp { from { transform: translateY(24px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .mnav-bg, .mnav-card { animation: none; } }
.mnav-grab { width: 38px; height: 4px; margin: 8px auto 2px; border-radius: 4px; background: var(--line-2); flex: none; }
.mnav-h { display: flex; align-items: center; gap: 6px; padding: 4px 8px 8px 16px; flex: none; }
[dir="rtl"] .mnav-h { padding: 4px 16px 8px 8px; }
.mnav-title { flex: 1; min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnav-x, .mnav-back { min-width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); background: var(--soft); font: inherit; font-weight: 600; text-decoration: none; }
.mnav-back { display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; color: var(--text); font-size: 14px; }
.mnav-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 16px; }
.mnav-search { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; margin-bottom: 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--dim); }
.mnav-search:focus-within { border-color: var(--accent); }
.mnav-q { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 16px; padding: 10px 0; }
/* line icons in currentColor everywhere (the sidebar's style); accent only for the open module */
.mnav-favs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 12px; padding: 0 12px; }
.mnav-favs::-webkit-scrollbar { display: none; }
.mnav-fav { flex: none; width: 76px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px 4px; border-radius: 12px;
  border: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 500; text-decoration: none; text-align: center; }
.mnav-fav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.mnav-fav.cur, .mnav-fav.cur span { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.mnav-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mnav-cat { min-width: 0; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--soft); color: var(--muted); font: inherit; text-align: center; }
.mnav-cat:active { background: var(--soft-2); }
.mnav-cn { max-width: 100%; color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.mnav-cat small { color: var(--dim); font-size: 11.5px; }
.mnav-cat.cur { border-color: var(--line-2); background: var(--soft-2); }
.mnav-list { display: flex; flex-direction: column; }
.mnav-row, .mnav-set { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 4px 8px; border-radius: 10px; color: var(--muted); font: inherit; text-align: start; text-decoration: none; background: none; }
.mnav-row:active, .mnav-set:active { background: var(--soft-2); }
.mnav-ric { position: relative; display: grid; place-items: center; width: 24px; height: 24px; flex: none; color: var(--muted); }
.mnav-ric .nf-badge { top: -6px; right: -10px; }
.mnav-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mnav-rt b { color: var(--text); font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnav-rt small { color: var(--dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnav-val { flex: none; max-width: 40%; color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnav-row.cur .mnav-ric, .mnav-row.cur .mnav-rt b { color: var(--accent); }
.mnav-row.cur { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.mnav-row.off { opacity: .6; }
.mnav-add { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--soft-2); color: var(--text); font-weight: 700; font-size: 15px; }
.mnav-set { margin-top: 14px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 8px; }
.mnav-chev { font-style: normal; font-size: 20px; line-height: 1; color: var(--dim); width: 20px; text-align: center; flex: none; }
.mnav-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; background: var(--soft-2); }
.mnav-star { font-size: 18px; line-height: 1; font-weight: 400; }
.mnav-sub + .mnav-sub { margin-top: 6px; }
.mnav-sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 2px; padding: 0 8px; color: var(--dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.mnav-sh small { font-weight: 600; letter-spacing: 0; }
.mnav-none { padding: 24px 8px; text-align: center; color: var(--dim); }
.mnav-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; padding: 10px 8px 4px; border-top: 1px solid var(--line); font-size: 13px; }
.mnav-links a { color: var(--dim); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; } .mnav-links a.sb-admin { color: #e5484d; font-weight: 700; }
.mnav-allcat { display: block; margin: 14px 8px 4px; color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; min-height: 40px; line-height: 40px; }
.mnav-hint { margin: 0 4px 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.mnav-cl { display: flex; flex-direction: column; gap: 4px; }
.mnav-cr { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 6px; border-radius: 12px; border: 1px solid transparent; }
.mnav-cr.on { border-color: var(--line-2); background: var(--soft); }
.mnav-crn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.mnav-pin, .mnav-mv { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; color: var(--muted); background: var(--soft); }
.mnav-pin:disabled, .mnav-mv:disabled { opacity: .35; }
.mnav-sh + .mnav-hint { margin-top: -2px; }
.mnav-sw { flex: none; position: relative; width: 44px; height: 40px; display: grid; place-items: center; cursor: pointer; }
.mnav-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mnav-sw i { pointer-events: none; width: 36px; height: 22px; border-radius: 11px; background: var(--soft-3, var(--soft-2)); position: relative; transition: background .15s; }
.mnav-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0005; transition: transform .15s; }
.mnav-sw input:checked + i { background: var(--accent-solid, var(--accent)); }
.mnav-sw input:checked + i::after { transform: translateX(14px); }
[dir="rtl"] .mnav-sw input:checked + i::after { transform: translateX(-14px); } [dir="rtl"] .mnav-sw i::after { left: auto; right: 3px; }
.mnav-sw input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mnav-sw i, .mnav-sw i::after, .sb-comm { transition: none; } }
.mnav-acts { position: sticky; bottom: -16px; display: flex; gap: 8px; align-items: center; margin: 12px -12px -16px; padding: 10px 12px 12px; background: var(--surface); border-top: 1px solid var(--line); }
.mnav-grow { flex: 1; }
.mnav-btn { min-height: 42px; padding: 0 14px; border-radius: 12px; background: var(--soft-2); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; }
.mnav-btn.pri { background: var(--accent-solid); color: #fff; }
@media (min-width: 761px) { .mnav-bg { display: none; } }

.toast { transform: translateY(8px); } .toast.in { transform: none; }
/* Toasts never cover the page head: bottom-right on desktop, above the bottom bar (and player) on phones */
.toasts { z-index: 455; top: auto; bottom: calc(20px + var(--player, 0px)); left: auto; right: 20px; transform: none; align-items: flex-end; }
@media (max-width: 760px) {
  .toasts { right: 12px; left: 12px; align-items: stretch; bottom: calc(max(86px, var(--player, 0px) + 16px) + env(safe-area-inset-bottom, 0px)); }
  .toast { max-width: none; font-size: 13.5px; }
}