/* style.css — دلال · shared design system (tokens + fonts + base + generic kit).
   Page-specific classes (lp-*, dl-*, mk-*, adm-*, api-*) live in each page's own CSS.
   Base rules use :where() (zero specificity) so page styles always win. */

/* ---------- fonts: IBM Plex Sans Arabic (self-hosted) ---------- */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/kit/fonts/plex-arabic-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FDFC-FDFD,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/kit/fonts/plex-arabic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/kit/fonts/plex-arabic-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FDFC-FDFD,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/kit/fonts/plex-arabic-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/kit/fonts/plex-arabic-600-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FDFC-FDFD,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/kit/fonts/plex-arabic-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/kit/fonts/plex-arabic-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FDFC-FDFD,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/kit/fonts/plex-arabic-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

/* ---------- tokens — identity v3 «مِش نرم» (source: /brand/v3/tokens.css) ----------
   Palette: #ECFFB6 cream-lime · #D6FB00 electric lime · #00545F deep teal.
   Teal = ink/action · lime = "opportunity" only (never text on light) · cream = soft light.
   ONE deliberate deviation from tokens.css: dark --s-gold/--s-gold-bg (see DESIGN.md) —
   --s-gold is used as text/bar-fill on dark surfaces across pages, so at night it must be light. */
:root{
  --bg:#F6FAEA;            /* soft cream paper */
  --surface:#FFFFFF;
  --surface-2:#ECF4D6;     /* cream-lime, second surface */
  --line:#DCE6C5;          /* decorative only */
  --line-strong:#6E8378;   /* form/filter borders · ≥3:1 on bg & surface */
  --text:#072A30;          /* deep teal ink */
  --muted:#4B6A6E;
  --primary:#00545F;       /* brand teal — the only action colour */
  --primary-ink:#ECFFB6;   /* cream on teal */
  --accent:#D6FB00;        /* lime — "opportunity" only, fill never text */
  --accent-ink:#072A30;    /* the only colour allowed on --accent */
  --danger:#B23A2A;
  --ok:#1F6B3F;
  --warn:#8F5A00;
  --radius:22px;
  --radius-sm:12px;
  --shadow:0 1px 0 rgba(0,84,95,.05),0 14px 40px rgba(0,84,95,.10);
  --font:'IBM Plex Sans Arabic',system-ui,sans-serif;
  /* score scale — text / tint (gold = lime, day & night) */
  --s-gold:#1E3200;  --s-gold-bg:#D6FB00;
  --s-good:#0B4F58;  --s-good-bg:#D5EFEA;
  --s-fair:#3F5559;  --s-fair-bg:#E6ECE3;
  --s-high:#8A2E1E;  --s-high-bg:#F9DDD4;
  --s-sus:#5A2860;   --s-sus-bg:#EBDCEE;
  /* signature — hero / intro card / OG only, never behind dense UI */
  --mesh:radial-gradient(70% 55% at 18% 8%,#ECFFB6 0%,rgba(236,255,182,0) 62%),radial-gradient(55% 50% at 82% 30%,rgba(214,251,0,.92) 0%,rgba(214,251,0,0) 64%),radial-gradient(75% 60% at 55% 102%,#00545F 0%,rgba(0,84,95,0) 66%),linear-gradient(180deg,#ECFFB6 0%,#D6FB00 46%,#00545F 100%);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  /* helpers (derived; kept from v1/v2 + softening layer) */
  --radius-lg:28px;        /* sheets, hero cards */
  --pill:999px;            /* buttons, chips, tabs */
  --shadow-sm:0 1px 2px rgba(0,84,95,.06),0 4px 14px rgba(0,84,95,.06);
  --shadow-lg:0 2px 6px rgba(0,84,95,.07),0 24px 60px rgba(0,84,95,.16);
  --shadow-cta:0 6px 18px color-mix(in srgb,var(--primary) 26%,transparent);
  --ring:0 0 0 4px color-mix(in srgb,var(--primary) 20%,transparent);
  --scrim:rgba(7,42,48,.42);
  --glass:rgba(7,42,48,.55);
  --ease:cubic-bezier(.2,.8,.2,1);
  --maxw:1180px; --gutter:16px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#052228;            /* teal night */
    --surface:#0A333A;
    --surface-2:#10414A;
    --line:#1C4D55;
    --line-strong:#4F8089;
    --text:#ECFFB6;          /* cream */
    --muted:#A6C2B9;
    --primary:#D6FB00;       /* lime = action at night */
    --primary-ink:#072A30;
    --accent:#D6FB00;
    --accent-ink:#072A30;
    --danger:#FF9C88;
    --ok:#8FE3B0;
    --warn:#FFC466;
    --shadow:0 1px 0 rgba(0,0,0,.35),0 14px 40px rgba(0,0,0,.45);
    /* deviation: tokens.css has #1E3200/#D6FB00 here, which makes every
       `color:var(--s-gold)` / bar fill invisible on the night surface.
       Gold CHIPS still render lime fill + teal ink via --accent/--accent-ink. */
    --s-gold:#D6FB00;  --s-gold-bg:#1F4A2A;   /* lime on deep lime-teal · 8.5:1 */
    --s-good:#A5E4DB;  --s-good-bg:#0E4148;
    --s-fair:#C5D3CD;  --s-fair-bg:#17393F;
    --s-high:#FFB4A0;  --s-high-bg:#4A2119;
    --s-sus:#E3B8E8;   --s-sus-bg:#3A1F40;
    --mesh:radial-gradient(65% 50% at 20% 5%,rgba(236,255,182,.85) 0%,rgba(236,255,182,0) 60%),radial-gradient(50% 45% at 80% 28%,rgba(214,251,0,.8) 0%,rgba(214,251,0,0) 62%),radial-gradient(80% 65% at 55% 105%,#031B20 0%,rgba(3,27,32,0) 70%),linear-gradient(180deg,#ECFFB6 0%,#9FC800 38%,#00545F 76%,#052228 100%);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
    --shadow-lg:0 2px 6px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.5);
    --shadow-cta:0 6px 20px color-mix(in srgb,var(--primary) 18%,transparent);
    --scrim:rgba(1,12,14,.62);
    color-scheme:dark;
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{direction:rtl;-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(body){margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.9;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
:where(h1,h2,h3,h4,h5,h6){margin:0 0 .5em;line-height:1.35;font-weight:700;letter-spacing:0;text-wrap:balance}
:where(h1){font-size:clamp(1.6rem,4.5vw,2.4rem)}
:where(h2){font-size:clamp(1.3rem,3.4vw,1.75rem)}
:where(h3){font-size:1.15rem}
:where(p){margin:0 0 1em}
:where(a){color:var(--primary);text-decoration:none}
:where(a:hover){text-decoration:underline;text-underline-offset:3px}
:where(img,svg,video,canvas,picture){display:block;max-width:100%}
:where(img){height:auto}
:where(button,input,select,textarea){font:inherit;color:inherit}
:where(button){cursor:pointer}
:where(table){border-collapse:collapse;width:100%}
:where(hr){border:0;border-top:1px solid var(--line);margin:24px 0}
:where(code,kbd,samp){font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;direction:ltr;unicode-bidi:isolate}
[hidden]{display:none !important}
:where(.num,.price,.kpi__v,.score,time,td,th,[data-num]){font-variant-numeric:tabular-nums}
:where(body){font-variant-numeric:tabular-nums}
/* focus ring: teal by day, lime by night (both = --primary) */
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
::selection{background:color-mix(in srgb,var(--accent) 70%,transparent);color:var(--accent-ink)}
.sr-only,.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:48px}
@media (min-width:768px){.section{padding-block:72px}}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-sm{display:flex;flex-direction:column;gap:8px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.row--between,.between{justify-content:space-between}
.grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.grid-2,.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid-3,.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid-3,.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid-4,.grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.center{text-align:center}
.nowrap{white-space:nowrap}
.ltr{direction:ltr;unicode-bidi:isolate}

/* ---------- signature surfaces: mesh + grain (hero / intro card / OG ONLY) ----------
   <section class="mesh grain"> <i class="orb orb--lime" style="…"></i> … <div class="glass">…</div></section>
   .grain paints the film noise on its own ::after (z-index:-1 inside an isolated group),
   so it sits above the mesh + orbs and below content. Don't combine with your own ::after. */
.mesh{position:relative;isolation:isolate;overflow:hidden;background:var(--mesh);color:#072A30}
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.4;mix-blend-mode:soft-light;pointer-events:none;border-radius:inherit}
.orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(28px);pointer-events:none}
.orb--cream{background:rgba(236,255,182,.7)}
.orb--lime{background:rgba(214,251,0,.5)}
.orb--teal{background:rgba(0,84,95,.6)}
/* text on the teal half of the mesh → cream inside a glass frame */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#ECFFB6;border-radius:var(--radius);padding:14px 18px}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.card--flat{box-shadow:none}
.divider{height:1px;background:var(--line);border:0;margin:16px 0}

/* ---------- buttons (pill, gentle lift) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:var(--pill);
  border:1px solid var(--line);background:var(--surface);color:var(--text);font-weight:600;font-size:.95rem;line-height:1.2;box-shadow:var(--shadow-sm);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.btn:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line));box-shadow:var(--shadow);transform:translateY(-1px);text-decoration:none}
.btn:active{transform:translateY(0) scale(.98);box-shadow:var(--shadow-sm);transition-duration:.08s}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary,.btn--primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink);box-shadow:var(--shadow-cta)}
.btn-primary:hover,.btn--primary:hover{background:color-mix(in srgb,var(--primary) 88%,var(--bg));border-color:transparent;box-shadow:var(--shadow-cta),var(--shadow)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-accent:hover{background:color-mix(in srgb,var(--accent) 88%,var(--surface))}
.btn-ghost,.btn--ghost{background:transparent;border-color:transparent;color:var(--primary);box-shadow:none}
.btn-ghost:hover,.btn--ghost:hover{background:var(--surface-2);box-shadow:none}
.btn-outline{background:transparent;border:1.5px solid var(--line-strong);color:var(--primary);box-shadow:none}
.btn-outline:hover{border-color:var(--primary)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:var(--bg)}
.btn-lg,.btn--lg{min-height:54px;padding:0 28px;font-size:1.05rem;border-radius:var(--pill)}
.btn-sm,.btn--sm{min-height:36px;padding:0 14px;font-size:.85rem;border-radius:var(--pill)}
.btn-block,.btn--block{display:flex;width:100%}
.link{background:none;border:0;padding:0;color:var(--primary);font-weight:600;cursor:pointer}
.link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- form ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.label,.field>label{font-size:.85rem;font-weight:600;color:var(--muted)}
.hint{font-size:.8rem;color:var(--muted)}
.input,.select,.textarea{width:100%;min-height:48px;padding:10px 16px;border-radius:14px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--text);font-size:16px;line-height:1.5;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);-webkit-appearance:none;appearance:none}
.textarea{min-height:110px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--muted);opacity:.75}
.input:hover,.select:hover,.textarea:hover{border-color:color-mix(in srgb,var(--primary) 55%,var(--line-strong))}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.select{padding-inline-start:38px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:16px 50%,21px 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.input.is-invalid,.input[aria-invalid="true"]{border-color:var(--danger)}
.error-text{color:var(--danger);font-size:.85rem}

/* ---------- chips / badges ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 15px;border-radius:var(--pill);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--text);font-size:.9rem;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .15s var(--ease)}
.chip:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--surface))}
.chip:active{transform:scale(.97)}
.chip.is-active,.chip.active,.chip[aria-pressed="true"],.chip[aria-checked="true"]{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:var(--pill);background:var(--surface-2);color:var(--muted);font-size:.78rem;font-weight:600;line-height:1.7;white-space:nowrap}
.badge-ok,.badge--ok{background:var(--s-gold-bg);color:var(--s-gold)}
.badge-warn,.badge--warn{background:var(--s-sus-bg);color:var(--s-sus)}
.badge-danger,.badge--danger{background:var(--s-high-bg);color:var(--s-high)}
.badge-primary,.badge--primary{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}

/* ---------- score chip (scale) — always carries a non-colour glyph in markup: ◆ ▾ — ▴ ! ---------- */
.score{display:inline-flex;align-items:center;gap:6px;padding:3px 12px 3px 12px;border-radius:var(--pill);font-size:.82rem;font-weight:700;line-height:1.6;
  background:var(--s-fair-bg);color:var(--s-fair);white-space:nowrap;border:1px solid color-mix(in srgb,currentColor 30%,transparent)}
.score b,.score strong,.score .score__n{font-size:1rem;font-weight:700}
/* gold = lime fill + teal ink, day and night */
.score.gold,.score--gold{background:var(--accent);color:var(--accent-ink)}
.score.good,.score--good{background:var(--s-good-bg);color:var(--s-good)}
.score.fair,.score--fair{background:var(--s-fair-bg);color:var(--s-fair)}
.score.high,.score--high{background:var(--s-high-bg);color:var(--s-high)}
.score.sus,.score--sus{background-color:var(--s-sus-bg);color:var(--s-sus);
  background-image:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,currentColor 10%,transparent) 6px 8px)}
/* gold appears with a short "stamp" (micro-interaction only) */
.stamp{animation:stamp .7s var(--ease) both}
@keyframes stamp{0%{transform:scale(1.35);opacity:0}55%{transform:scale(.96);opacity:1}100%{transform:scale(1)}}

/* ---------- listing card (generic) ---------- */
.listing{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.listing:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--primary) 25%,var(--line))}
.listing__img{aspect-ratio:16/10;background:var(--surface-2);overflow:hidden;border-bottom:5px solid var(--primary)}
.listing__img img{width:100%;height:100%;object-fit:cover}
.listing__body{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px}
.listing__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.listing__price{font-size:1.35rem;font-weight:700;line-height:1.3}
.listing__meta{color:var(--muted);font-size:.9rem}
.listing__ppm{font-size:.85rem;color:var(--muted)}
.listing__link{margin-top:6px;font-weight:600;font-size:.9rem}
.bar{position:relative;height:8px;border-radius:var(--pill);background:var(--surface-2);overflow:hidden}
.bar>span,.bar__fill{position:absolute;inset-block:0;inset-inline-start:0;border-radius:inherit;background:var(--primary)}
.bar--ok>span{background:var(--ok)} .bar--danger>span{background:var(--danger)} .bar--warn>span{background:var(--warn)}

/* ---------- KPI ---------- */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm)}
.kpi__label,.kpi__k{font-size:.85rem;color:var(--muted)}
.kpi__value,.kpi__v{font-size:1.7rem;font-weight:700;line-height:1.3}
.kpi__sub{font-size:.8rem;color:var(--muted)}

/* ---------- tabs (pill track) ---------- */
.tabs{display:flex;gap:4px;padding:4px;background:var(--surface-2);border-radius:var(--pill);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;min-height:38px;padding:0 16px;border:0;border-radius:var(--pill);background:transparent;color:var(--muted);font-weight:600;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.tab:hover{color:var(--text)}
.tab.is-active,.tab.active,.tab[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th,.table td{padding:11px 16px;text-align:start;border-bottom:1px solid var(--line);white-space:nowrap}
.table th{font-weight:600;color:var(--muted);font-size:.8rem;background:var(--surface-2)}
.table tr:last-child td{border-bottom:0}

/* ---------- sheet / modal ---------- */
.sheet-backdrop{position:fixed;inset:0;background:var(--scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:80}
.sheet{position:fixed;inset-inline:0;bottom:0;z-index:81;max-height:88vh;overflow-y:auto;background:var(--surface);color:var(--text);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-lg);padding:22px var(--gutter) calc(22px + env(safe-area-inset-bottom))}
@media (min-width:768px){.sheet{inset-inline:auto;left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(560px,92vw);border-radius:var(--radius-lg)}}

/* ---------- toast ---------- */
.toast{position:fixed;inset-inline:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;margin-inline:auto;max-width:420px;
  padding:12px 18px;border-radius:20px;background:var(--text);color:var(--bg);box-shadow:var(--shadow-lg);font-size:.92rem}
.toast--ok{background:var(--ok);color:var(--bg)} .toast--err{background:var(--danger);color:var(--bg)}

/* ---------- loading ---------- */
.skeleton{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--radius-sm);color:transparent !important}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 70%,transparent),transparent);animation:sk 1.3s infinite}
@keyframes sk{to{transform:translateX(-100%)}}
.spinner{display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:currentColor;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- states ---------- */
.empty{text-align:center;padding:48px 20px;color:var(--muted);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius)}
.empty h3,.empty strong{display:block;color:var(--text);margin-bottom:6px}
.alert{padding:12px 16px;border-radius:16px;background:var(--surface-2);font-size:.92rem}
.alert--err,.alert-danger{background:var(--s-high-bg);color:var(--s-high)}
.alert--ok,.alert-ok{background:var(--s-gold-bg);color:var(--s-gold)}
.alert--warn,.alert-warn{background:var(--s-sus-bg);color:var(--s-sus)}

/* ---------- brand ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:700;font-size:1.25rem;text-decoration:none}
.brand img{width:32px;height:32px;border-radius:9px}
.brand:hover{text-decoration:none}