/* ═══════════════════════════════════════════════════════════
   CEDUIX UI  v1.0.0  —  The LLM-First Component Framework
   One attribute. Every component. Zero imports. Zero JS.
   Part of CEDUIX (~/dev/ceduix/)  ·  MIT License
   ═══════════════════════════════════════════════════════════
   USAGE:  <div ui="card elevated">...</div>
   VOCAB:  79 tokens  ·  max 4 per ui attribute
   ═══════════════════════════════════════════════════════════

   @ceduix-vocab
   primitives: page stack cluster grid center sidebar cover section contain
     card panel sheet overlay heading subheading eyebrow body caption code
     prose button input badge alert stat nav divider grow truncate shrink-0
     nav-spacer shell main tab tab-panel tab-badge timer chip table dialog
     skeleton toast toast-container dot separator avatar progress kbd empty
     toolbar label spinner accordion tooltip toggle checkbox radio
   modifiers: sm md lg xl elevated raised accent muted ghost outline glass
     success warning danger animate reveal d1 d2 d3 d4 d5 d6 d7 d8
     from-left from-right from-down fade toast-out compact interactive
     striped flush disabled loading selected
   max-tokens: 4
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  --s-1:.25rem;  --s-2:.5rem;   --s-3:.75rem;  --s-4:1rem;
  --s-5:1.25rem; --s-6:1.5rem;  --s-8:2rem;    --s-10:2.5rem;
  --s-12:3rem;   --s-16:4rem;   --s-20:5rem;   --s-24:6rem;

  --bg-0:#f5f3ee; --bg-1:#ffffff; --bg-2:#eae7e0;
  --bg-3:#e0ddd5; --bg-4:#d5d2ca;

  --bdr-0:rgba(27,58,92,.05); --bdr-1:rgba(27,58,92,.10);
  --bdr-2:rgba(27,58,92,.18); --bdr-3:rgba(27,58,92,.25);

  --tx-0:#0f2a45; --tx-1:#2c4460; --tx-2:#556879; --tx-3:#8494a3;

  --ac:#9a7b3c;  --ac-hi:#c4a265; --ac-lo:#6b5220;
  --ac-bg:rgba(154,123,60,.10);   --ac-gl:rgba(154,123,60,.16);

  --nav-bg:#0a1628; --nav-tx:#e8e4dd; --nav-bdr:rgba(196,162,101,.12);

  --ok:#2db88a;  --ok-bg:rgba(45,184,138,.10);
  --wr:#e8a020;  --wr-bg:rgba(232,160,32,.10);
  --er:#e84040;  --er-bg:rgba(232,64,64,.10);
  --in:#2a5a8c;  --in-bg:rgba(42,90,140,.10);

  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:18px; --r-full:9999px;

  --f-ui:'Inter',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',monospace;
  --f-disp:'Inter',system-ui,sans-serif;

  --sh-xs:0 1px 2px rgba(27,58,92,.06);
  --sh-sm:0 1px 3px rgba(27,58,92,.08);
  --sh-md:0 4px 16px rgba(27,58,92,.10),0 2px 6px rgba(27,58,92,.06);
  --sh-lg:0 12px 48px rgba(27,58,92,.12),0 4px 12px rgba(27,58,92,.08);
  --sh-ac:0 0 0 1px var(--ac-lo),0 4px 24px var(--ac-gl);
  --sh-ring:0 0 0 3px var(--ac-bg);

  --ease:cubic-bezier(0.16,1,0.3,1);
  --t-fast:.12s; --t-mid:.22s; --t-slow:.4s;
}

/* ── THEME: DARK ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-0:#060d1a; --bg-1:#0a1628; --bg-2:#0d1a2e;
  --bg-3:#111f36; --bg-4:#162844;

  --bdr-0:rgba(196,162,101,.06); --bdr-1:rgba(196,162,101,.12);
  --bdr-2:rgba(196,162,101,.20); --bdr-3:rgba(196,162,101,.30);

  --tx-0:#e8e4dd; --tx-1:rgba(255,255,255,.75); --tx-2:rgba(255,255,255,.58); --tx-3:rgba(255,255,255,.35);

  --ac:#c4a265;  --ac-hi:#dbb97a; --ac-lo:#8c6430;
  --ac-bg:rgba(196,162,101,.10);  --ac-gl:rgba(196,162,101,.18);

  --ok:#2db88a;  --ok-bg:rgba(45,184,138,.10);
  --wr:#e8a020;  --wr-bg:rgba(232,160,32,.10);
  --er:#e84040;  --er-bg:rgba(232,64,64,.10);
  --in:#4a8ff0;  --in-bg:rgba(74,143,240,.10);

  --sh-xs:0 1px 2px rgba(0,0,0,.3);
  --sh-sm:0 1px 3px rgba(0,0,0,.4);
  --sh-md:0 4px 16px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
  --sh-lg:0 12px 48px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.3);
  --sh-ac:0 0 0 1px var(--ac-lo),0 4px 24px var(--ac-gl);

  --glass-bg:rgba(6,13,26,.75);
  --glass-bdr:rgba(196,162,101,.08);
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font:inherit}
input,select,textarea{font:inherit}

/* ── PAGE ─────────────────────────────────────────────────── */
[ui~="page"]{
  font-family:var(--f-ui);font-size:1rem;line-height:1.6;
  color:var(--tx-0);background:var(--bg-0);min-height:100vh;
  font-synthesis-weight:none;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* ── LAYOUT ───────────────────────────────────────────────── */
[ui~="stack"]   {display:flex;flex-direction:column}
[ui~="cluster"] {display:flex;flex-wrap:wrap;align-items:center}
[ui~="grid"]    {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
[ui~="center"]  {display:grid;place-items:center;text-align:center}
[ui~="sidebar"] {display:grid;grid-template-columns:auto 1fr;align-items:start}
[ui~="cover"]   {display:flex;flex-direction:column;min-height:100vh}
[ui~="section"] {padding:var(--s-16) clamp(var(--s-6),5vw,var(--s-16))}
[ui~="contain"] {max-width:72rem;margin-inline:auto;width:100%}

/* Gap modifiers */
[ui~="sm"] {gap:var(--s-2)}
[ui~="md"] {gap:var(--s-4)}
[ui~="lg"] {gap:var(--s-8)}
[ui~="xl"] {gap:var(--s-12)}

/* ── SURFACES ─────────────────────────────────────────────── */
[ui~="card"] {
  background:var(--bg-1);border:1px solid var(--bdr-1);
  border-radius:var(--r-lg);padding:var(--s-6);
  transition:border-color var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease);
}
[ui~="card"]:hover{border-color:var(--bdr-2)}
[ui~="card"] hr{border:none;height:1px;background:var(--bdr-1);margin:var(--s-4) calc(var(--s-6) * -1)}
[ui~="panel"] {
  background:var(--bg-1);border:1px solid var(--bdr-1);
  border-radius:var(--r-xl);padding:var(--s-8);
}
[ui~="sheet"] {
  background:var(--bg-3);border-radius:var(--r-md);padding:var(--s-4);
}
[ui~="overlay"] {
  background:rgba(9,8,13,.85);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--bdr-2);border-radius:var(--r-xl);
}

/* Surface modifiers */
[ui~="elevated"] {box-shadow:var(--sh-md)}
[ui~="raised"]   {box-shadow:var(--sh-lg)}
[ui~="card"][ui~="accent"],[ui~="panel"][ui~="accent"],[ui~="sheet"][ui~="accent"] {border-color:var(--ac-lo)!important;box-shadow:var(--sh-ac)}
[ui~="muted"]    {background:var(--bg-1);border-color:var(--bdr-0)}
[ui~="ghost"]    {background:transparent;border-color:transparent}
[ui~="outline"]  {background:transparent;border:1px solid var(--bdr-2)}
[ui~="glass"]    {background:var(--nav-bg);color:var(--nav-tx);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--nav-bdr);box-shadow:0 4px 24px -2px rgba(0,0,0,.15)}

/* Flush + Compact modifiers */
[ui~="flush"]   {padding:0}
[ui~="compact"] {padding:var(--s-3)}

/* Interactive modifier */
[ui~="card"][ui~="interactive"]{cursor:pointer}
[ui~="card"][ui~="interactive"]:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
[ui~="card"][ui~="interactive"]:active{transform:translateY(0)}

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
[ui~="heading"] {
  font-family:var(--f-ui);font-size:clamp(1.5rem,3vw,2.25rem);
  font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--tx-0);
}
[ui~="heading"][ui~="sm"] {font-size:1.1rem}
[ui~="heading"][ui~="lg"] {font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.03em}
[ui~="heading"][ui~="xl"] {font-size:clamp(2.5rem,7vw,5rem);letter-spacing:-.04em}

[ui~="subheading"] {
  font-size:clamp(1.1rem,2vw,1.4rem);font-weight:500;
  line-height:1.3;letter-spacing:-.015em;color:var(--tx-0);
}
[ui~="eyebrow"] {
  font-family:var(--f-ui);font-size:.8rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-1);
}
[ui~="body"]    {font-size:.9rem;line-height:1.7;color:var(--tx-1);font-weight:300}
[ui~="caption"] {font-size:.75rem;line-height:1.5;color:var(--tx-2);letter-spacing:.02em}
[ui~="code"] {
  font-family:var(--f-mono);font-size:.82em;
  background:var(--bg-3);border:1px solid var(--bdr-1);
  border-radius:var(--r-sm);padding:.1em .4em;color:var(--ac-hi);
}
pre[ui~="code"] {
  padding:var(--s-5);font-size:.8rem;overflow-x:auto;
  border-radius:var(--r-lg);line-height:1.7;color:var(--tx-1);
}

/* ── LABEL ───────────────────────────────────────────────── */
[ui~="label"] {
  font-size:.85rem;font-weight:500;color:var(--tx-1);line-height:1;
  cursor:default;user-select:none;
}

/* ── BUTTON ──────────────────────────────────────────────── */
[ui~="button"] {
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--f-ui);font-size:.875rem;font-weight:500;
  padding:.55em 1.2em;border-radius:var(--r-md);
  background:var(--ac);color:var(--bg-0);border:1px solid transparent;
  transition:color var(--t-fast),background var(--t-fast),
             transform var(--t-fast) var(--ease),box-shadow var(--t-fast);
  white-space:nowrap;user-select:none;letter-spacing:.01em;outline:none;
}
[ui~="button"]:hover  {background:var(--ac-hi);transform:translateY(-1px);box-shadow:0 4px 16px var(--ac-gl)}
[ui~="button"]:active {transform:scale(.98);box-shadow:none}
[ui~="button"]:focus-visible{box-shadow:var(--sh-ring)}

[ui~="button"][ui~="outline"] {background:transparent;color:var(--tx-0);border-color:var(--bdr-2);box-shadow:var(--sh-xs)}
[ui~="button"][ui~="outline"]:hover {border-color:var(--bdr-3);background:var(--bg-2)}
[ui~="button"][ui~="ghost"]   {background:transparent;color:var(--tx-1);border-color:transparent}
[ui~="button"][ui~="ghost"]:hover {background:var(--bg-2);color:var(--tx-0)}
[ui~="button"][ui~="muted"]   {background:var(--bg-3);color:var(--tx-1);border-color:var(--bdr-1)}
[ui~="button"][ui~="muted"]:hover {background:var(--bg-4);color:var(--tx-0)}
[ui~="button"][ui~="danger"]  {background:var(--er);color:#fff}
[ui~="button"][ui~="danger"]:hover {background:#ff5050}

[ui~="button"][ui~="sm"] {font-size:.78rem;padding:.4em .9em;border-radius:var(--r-sm)}
[ui~="button"][ui~="lg"] {font-size:1rem;padding:.7em 1.6em;border-radius:var(--r-lg)}

/* Disabled state */
[ui~="button"][ui~="disabled"],
[ui~="button"]:disabled{opacity:.5;pointer-events:none;cursor:not-allowed}

/* Loading state */
[ui~="button"][ui~="loading"]{pointer-events:none;position:relative;color:transparent}
[ui~="button"][ui~="loading"]::after{
  content:'';position:absolute;width:1em;height:1em;
  border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:cx-spin .6s linear infinite;
  color:var(--bg-0);
}

/* ── INPUT ────────────────────────────────────────────────── */
[ui~="input"] {
  display:block;width:100%;font-family:var(--f-ui);font-size:.875rem;
  padding:.55em .9em;background:var(--bg-1);color:var(--tx-0);
  border:1px solid var(--bdr-2);border-radius:var(--r-md);outline:none;
  box-shadow:var(--sh-xs);
  transition:color var(--t-fast),box-shadow var(--t-fast);
}
[ui~="input"]:focus {border-color:var(--ac-lo);box-shadow:var(--sh-xs),var(--sh-ring)}
[ui~="input"]::placeholder {color:var(--tx-3)}
[ui~="input"]:disabled{opacity:.5;pointer-events:none;cursor:not-allowed}

/* Select — same as input + custom arrow */
select[ui~="input"] {
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23556879' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75em center;padding-right:2.25em;
}

/* Textarea */
textarea[ui~="input"] {resize:vertical;min-height:5rem}

/* ── TOGGLE SWITCH (CSS-only) ────────────────────────────── */
[ui~="toggle"] {
  display:inline-flex;align-items:center;gap:var(--s-2);
  cursor:pointer;font-size:.875rem;color:var(--tx-1);user-select:none;
}
[ui~="toggle"] input[type="checkbox"]{
  appearance:none;width:2.5rem;height:1.375rem;flex-shrink:0;
  background:var(--bg-3);border-radius:var(--r-full);border:1px solid var(--bdr-2);
  position:relative;cursor:pointer;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast);
}
[ui~="toggle"] input::after{
  content:'';position:absolute;top:2px;left:2px;
  width:calc(1.375rem - 6px);height:calc(1.375rem - 6px);border-radius:50%;
  background:#fff;box-shadow:var(--sh-xs);
  transition:transform var(--t-fast) var(--ease);
}
[ui~="toggle"] input:checked{background:var(--ac);border-color:var(--ac)}
[ui~="toggle"] input:checked::after{transform:translateX(calc(2.5rem - 1.375rem))}
[ui~="toggle"] input:focus-visible{box-shadow:var(--sh-ring)}

/* ── CHECKBOX (CSS-only) ─────────────────────────────────── */
[ui~="checkbox"] {
  display:inline-flex;align-items:center;gap:var(--s-2);
  cursor:pointer;font-size:.875rem;color:var(--tx-1);user-select:none;
}
[ui~="checkbox"] input[type="checkbox"]{
  appearance:none;width:1.125rem;height:1.125rem;flex-shrink:0;
  border:1.5px solid var(--bdr-3);border-radius:var(--r-sm);
  background:var(--bg-1);cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast);
}
[ui~="checkbox"] input:checked{
  background:var(--ac);border-color:var(--ac);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  background-size:14px;background-position:center;background-repeat:no-repeat;
}
[ui~="checkbox"] input:focus-visible{box-shadow:var(--sh-ring)}

/* ── RADIO (CSS-only) ────────────────────────────────────── */
[ui~="radio"] {
  display:inline-flex;align-items:center;gap:var(--s-2);
  cursor:pointer;font-size:.875rem;color:var(--tx-1);user-select:none;
}
[ui~="radio"] input[type="radio"]{
  appearance:none;width:1.125rem;height:1.125rem;flex-shrink:0;
  border:1.5px solid var(--bdr-3);border-radius:50%;
  background:var(--bg-1);cursor:pointer;
  transition:border var(--t-fast);
}
[ui~="radio"] input:checked{border:5px solid var(--ac)}
[ui~="radio"] input:focus-visible{box-shadow:var(--sh-ring)}

/* ── BADGE ───────────────────────────────────────────────── */
[ui~="badge"] {
  display:inline-flex;align-items:center;gap:var(--s-1);
  font-family:var(--f-mono);font-size:.65rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.25em .65em;border-radius:var(--r-full);
  background:var(--bg-3);color:var(--tx-1);border:1px solid var(--bdr-1);
  white-space:nowrap;
}
[ui~="badge"][ui~="accent"]  {background:var(--ac-lo);color:#fff;border-color:var(--ac-lo)}
[ui~="badge"][ui~="success"] {background:var(--ok-bg);color:var(--ok);border-color:rgba(45,184,138,.25)}
[ui~="badge"][ui~="danger"]  {background:var(--er-bg);color:var(--er);border-color:rgba(232,64,64,.25)}
[ui~="badge"][ui~="warning"] {background:var(--wr-bg);color:var(--wr);border-color:rgba(232,160,32,.25)}
[ui~="badge"][ui~="outline"] {background:transparent;border-color:var(--bdr-2);color:var(--tx-1)}

/* ── ALERT ───────────────────────────────────────────────── */
[ui~="alert"] {
  padding:var(--s-4) var(--s-5);border-radius:var(--r-lg);
  font-size:.875rem;line-height:1.6;
  background:var(--in-bg);color:var(--tx-1);border:1px solid rgba(74,143,240,.2);
  display:flex;gap:var(--s-3);align-items:flex-start;
}
[ui~="alert"][ui~="success"] {background:var(--ok-bg);border-color:rgba(45,184,138,.2)}
[ui~="alert"][ui~="warning"] {background:var(--wr-bg);border-color:rgba(232,160,32,.2)}
[ui~="alert"][ui~="danger"]  {background:var(--er-bg);border-color:rgba(232,64,64,.2)}

/* ── STAT ────────────────────────────────────────────────── */
[ui~="stat"] {
  font-family:var(--f-disp);font-size:clamp(2rem,4vw,2.75rem);
  font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--tx-0);
}
[ui~="stat"][ui~="accent"]  {color:var(--ac)}
[ui~="stat"][ui~="success"] {color:var(--ok)}
[ui~="stat"][ui~="warning"] {color:var(--wr)}
[ui~="stat"][ui~="danger"]  {color:var(--er)}

/* ── NAV ─────────────────────────────────────────────────── */
[ui~="nav"] {
  display:flex;align-items:center;gap:var(--s-8);
  padding:var(--s-4) clamp(var(--s-6),5vw,var(--s-16));
  border-bottom:1px solid var(--bdr-1);
  position:sticky;top:0;z-index:100;
  background:var(--nav-bg);color:var(--nav-tx);backdrop-filter:blur(20px) saturate(1.5);
}
[ui~="nav-spacer"]{flex:1}

/* ── TABLE (premium) ─────────────────────────────────────── */
[ui~="table"]{width:100%;border-collapse:collapse;font-size:.875rem}
[ui~="table"] thead{border-bottom:1px solid var(--bdr-2)}
[ui~="table"] th{
  height:2.5rem;padding:.5rem 1rem;text-align:left;vertical-align:middle;
  font-weight:500;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tx-3);white-space:nowrap;
}
[ui~="table"] td{padding:.75rem 1rem;vertical-align:middle}
[ui~="table"] tbody tr{
  border-bottom:1px solid var(--bdr-0);
  transition:background var(--t-fast) var(--ease);
}
[ui~="table"] tbody tr:last-child{border-bottom:none}
[ui~="table"] tbody tr:hover{background:var(--bg-2)}

/* Table modifiers */
[ui~="table"][ui~="compact"] th{padding:.35rem .65rem;height:2rem}
[ui~="table"][ui~="compact"] td{padding:.35rem .65rem}
[ui~="table"][ui~="interactive"] tbody tr{cursor:pointer}
[ui~="table"][ui~="interactive"] tbody tr:hover{background:rgba(154,123,60,.06)}
[ui~="table"][ui~="striped"] tbody tr:nth-child(even){background:var(--bg-0)}
[ui~="table"][ui~="striped"] tbody tr:nth-child(even):hover{background:var(--bg-2)}

/* Table data attributes */
[ui~="table"] tr[data-unread] td{font-weight:500}
[ui~="table"] tr[data-selected]{background:var(--ac-bg)}

/* ── SEPARATOR ───────────────────────────────────────────── */
[ui~="separator"]{height:1px;width:100%;background:var(--bdr-1);border:none;margin:var(--s-4) 0}

/* ── DIVIDER (gradient) ──────────────────────────────────── */
[ui~="divider"] {
  height:1px;width:100%;
  background:linear-gradient(to right,transparent,var(--bdr-2) 30%,var(--bdr-2) 70%,transparent);
}

/* ── AVATAR ──────────────────────────────────────────────── */
[ui~="avatar"]{
  width:2rem;height:2rem;border-radius:50%;overflow:hidden;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ac-bg);color:var(--ac);font-weight:600;font-size:.75rem;
  letter-spacing:.02em;text-transform:uppercase;
}
[ui~="avatar"][ui~="sm"]{width:1.5rem;height:1.5rem;font-size:.6rem}
[ui~="avatar"][ui~="lg"]{width:3rem;height:3rem;font-size:1rem}
[ui~="avatar"] img{width:100%;height:100%;object-fit:cover}

/* ── PROGRESS ────────────────────────────────────────────── */
[ui~="progress"]{
  height:6px;border-radius:var(--r-full);background:var(--bg-3);overflow:hidden;
}
[ui~="progress"]::after{
  content:'';display:block;height:100%;border-radius:var(--r-full);
  background:var(--ac);width:var(--val,0%);
  transition:width var(--t-mid) var(--ease);
}
[ui~="progress"][ui~="success"]::after{background:var(--ok)}
[ui~="progress"][ui~="danger"]::after{background:var(--er)}

/* ── KBD ─────────────────────────────────────────────────── */
[ui~="kbd"]{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;
  padding:.15em .45em;min-width:1.5em;
  border-radius:var(--r-sm);border:1px solid var(--bdr-2);
  background:var(--bg-2);color:var(--tx-2);
  box-shadow:0 1px 0 var(--bdr-1);
}

/* ── EMPTY STATE ─────────────────────────────────────────── */
[ui~="empty"]{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--s-12) var(--s-6);color:var(--tx-3);font-size:.875rem;
  text-align:center;gap:var(--s-2);
}

/* ── TOOLBAR ─────────────────────────────────────────────── */
[ui~="toolbar"]{
  display:flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-4);border-bottom:1px solid var(--bdr-1);
}

/* ── SPINNER ─────────────────────────────────────────────── */
[ui~="spinner"]{
  width:1.25rem;height:1.25rem;
  border:2px solid var(--bdr-2);border-top-color:var(--ac);
  border-radius:50%;animation:cx-spin .6s linear infinite;
}
[ui~="spinner"][ui~="sm"]{width:.875rem;height:.875rem;border-width:1.5px}
[ui~="spinner"][ui~="lg"]{width:2rem;height:2rem;border-width:3px}

/* ── ACCORDION (CSS-only via <details>) ──────────────────── */
[ui~="accordion"]{border-bottom:1px solid var(--bdr-1)}
[ui~="accordion"] summary{
  padding:var(--s-4) 0;cursor:pointer;font-weight:500;font-size:.875rem;
  color:var(--tx-0);display:flex;align-items:center;justify-content:space-between;
  list-style:none;transition:color var(--t-fast);
}
[ui~="accordion"] summary::-webkit-details-marker{display:none}
[ui~="accordion"] summary::after{
  content:'';width:.5rem;height:.5rem;flex-shrink:0;
  border-right:2px solid var(--tx-2);border-bottom:2px solid var(--tx-2);
  transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease);
}
[ui~="accordion"][open] summary::after{transform:rotate(45deg)}
[ui~="accordion"] > :not(summary){padding:0 0 var(--s-4);color:var(--tx-1);font-size:.875rem}

/* ── TOOLTIP (CSS-only) ──────────────────────────────────── */
[ui~="tooltip"]{position:relative}
[ui~="tooltip"]::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);
  padding:.35em .7em;border-radius:var(--r-md);
  background:var(--tx-0);color:var(--bg-0);
  font-size:.75rem;white-space:nowrap;line-height:1.4;
  box-shadow:var(--sh-md);
  opacity:0;pointer-events:none;
  transition:opacity var(--t-fast),transform var(--t-fast) var(--ease);z-index:50;
}
[ui~="tooltip"]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── DIALOG (cinematic) ──────────────────────────────────── */
[ui~="dialog"]{
  background:var(--bg-1);border:1px solid var(--bdr-2);border-radius:var(--r-lg);
  color:var(--tx-0);padding:var(--s-6);max-width:480px;width:90vw;
  box-shadow:var(--sh-lg);outline:none;
}
[ui~="dialog"]::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
[ui~="dialog"][open]{animation:cx-dialog .2s var(--ease)}

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes ceduix-in {from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}
@keyframes cx-spin {to{transform:rotate(360deg)}}
@keyframes cx-dialog {from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes cx-shimmer {0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes cx-toast {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes cx-pulse {0%,100%{opacity:1}50%{opacity:.5}}

[ui~="animate"]{animation:ceduix-in .7s var(--ease) both}
[ui~="animate"][ui~="d1"]{animation-delay:.1s}
[ui~="animate"][ui~="d2"]{animation-delay:.2s}
[ui~="animate"][ui~="d3"]{animation-delay:.3s}
[ui~="animate"][ui~="d4"]{animation-delay:.4s}
[ui~="animate"][ui~="d5"]{animation-delay:.5s}
[ui~="animate"][ui~="d6"]{animation-delay:.6s}
[ui~="animate"][ui~="d7"]{animation-delay:.7s}
[ui~="animate"][ui~="d8"]{animation-delay:.8s}

[ui~="reveal"]{opacity:0;transform:translateY(2rem);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[ui~="reveal"][ui~="from-left"]{transform:translateX(-2rem)}
[ui~="reveal"][ui~="from-right"]{transform:translateX(2rem)}
[ui~="reveal"][ui~="from-down"]{transform:translateY(-2rem)}
[ui~="reveal"][ui~="fade"]{transform:none}
[ui~="reveal"].in-view{opacity:1;transform:none}
[ui~="reveal"][ui~="d1"].in-view{transition-delay:.1s}
[ui~="reveal"][ui~="d2"].in-view{transition-delay:.2s}
[ui~="reveal"][ui~="d3"].in-view{transition-delay:.3s}
[ui~="reveal"][ui~="d4"].in-view{transition-delay:.4s}
[ui~="reveal"][ui~="d5"].in-view{transition-delay:.5s}
[ui~="reveal"][ui~="d6"].in-view{transition-delay:.6s}

/* Loading modifier */
[ui~="loading"]{animation:cx-pulse 1.5s var(--ease) infinite}

/* Selected modifier */
[ui~="selected"]{background:var(--ac-bg)!important;border-color:var(--ac)!important}

/* Disabled modifier */
[ui~="disabled"]{opacity:.5;pointer-events:none;cursor:not-allowed}

/* ── PROSE (markdown article rendering) ──────────────────── */
[ui~="prose"]{font-family:var(--f-ui);font-size:1rem;line-height:1.75;color:var(--tx-1)}
[ui~="prose"] h1{font-size:2rem;font-weight:700;color:var(--tx-0);margin:2em 0 .5em;line-height:1.2}
[ui~="prose"] h2{font-size:1.5rem;font-weight:600;color:var(--tx-0);margin:1.75em 0 .5em;line-height:1.25}
[ui~="prose"] h3{font-size:1.25rem;font-weight:600;color:var(--tx-0);margin:1.5em 0 .5em;line-height:1.3}
[ui~="prose"] h4{font-size:1rem;font-weight:600;color:var(--tx-0);margin:1.25em 0 .5em}
[ui~="prose"] p{margin:.75em 0}
[ui~="prose"] a{color:var(--ac);text-decoration:underline;text-underline-offset:3px}
[ui~="prose"] a:hover{color:var(--ac-hi)}
[ui~="prose"] strong{color:var(--tx-0);font-weight:600}
[ui~="prose"] ul,[ui~="prose"] ol{margin:.75em 0;padding-left:1.5em}
[ui~="prose"] li{margin:.25em 0}
[ui~="prose"] li::marker{color:var(--tx-3)}
[ui~="prose"] blockquote{border-left:3px solid var(--ac-lo);padding:.5em 0 .5em 1.25em;margin:1em 0;color:var(--tx-2);font-style:italic}
[ui~="prose"] code{font-family:var(--f-mono);font-size:.875em;background:var(--bg-2);padding:.15em .35em;border-radius:var(--r-sm)}
[ui~="prose"] pre{background:var(--bg-1);border:1px solid var(--bdr-1);border-radius:var(--r-lg);padding:var(--s-4);overflow-x:auto;margin:1em 0}
[ui~="prose"] pre code{background:none;padding:0;font-size:.85em;line-height:1.6}
[ui~="prose"] hr{border:none;height:1px;background:var(--bdr-2);margin:2em 0}
[ui~="prose"] img{max-width:100%;height:auto;border-radius:var(--r-lg);margin:1.5em 0}
[ui~="prose"] table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.9em}
[ui~="prose"] th{text-align:left;font-weight:600;color:var(--tx-0);padding:.5em;border-bottom:2px solid var(--bdr-2)}
[ui~="prose"] td{padding:.5em;border-bottom:1px solid var(--bdr-1)}

/* ── UTILS ───────────────────────────────────────────────── */
[ui~="truncate"]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[ui~="grow"]    {flex:1}
[ui~="shrink-0"]{flex-shrink:0}

/* ── DASHBOARD: SHELL ────────────────────────────────────── */
[ui~="shell"]{display:grid;grid-template-rows:auto 1fr;min-height:100vh;background:var(--bg-0);color:var(--tx-0);font-family:var(--f-ui)}
[ui~="main"]{padding:var(--s-6) clamp(var(--s-6),5vw,var(--s-16));overflow-y:auto}

/* ── DASHBOARD: TABS ─────────────────────────────────────── */
[ui~="tab"]{
  padding:var(--s-2) var(--s-4);border-radius:var(--r-md);color:rgba(255,255,255,.6);
  font-size:.875rem;font-weight:500;position:relative;
  transition:color var(--t-fast),background var(--t-fast);cursor:pointer;outline:none;
}
[ui~="tab"]:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.08)}
[ui~="tab"].active{color:var(--ac-hi);background:rgba(196,162,101,.12)}
[ui~="tab"]:focus-visible{box-shadow:var(--sh-ring)}
[ui~="tab-badge"]{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;
  background:var(--er);color:#fff;font-size:.65rem;font-weight:700;
  border-radius:var(--r-full);display:none;line-height:16px;text-align:center;padding:0 3px}
[ui~="tab-panel"]{display:none}
[ui~="tab-panel"].active{display:block}

/* ── DASHBOARD: TIMER ────────────────────────────────────── */
[ui~="timer"]{font-family:var(--f-mono);font-size:.85rem;color:var(--ok);
  padding:var(--s-1) var(--s-2);border:1px solid var(--ok);border-radius:var(--r-full);display:none}
[ui~="timer"].active{display:inline-block}

/* ── DASHBOARD: CHIP ─────────────────────────────────────── */
[ui~="chip"]{
  padding:var(--s-1) var(--s-3);border-radius:var(--r-full);font-size:.75rem;
  color:var(--tx-2);border:1px solid var(--bdr-1);background:transparent;
  cursor:pointer;outline:none;
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
[ui~="chip"]:hover{border-color:var(--bdr-2);color:var(--tx-0)}
[ui~="chip"].active{background:var(--ac-bg);color:var(--ac);border-color:var(--ac)}
[ui~="chip"]:focus-visible{box-shadow:var(--sh-ring)}

/* ── DASHBOARD: SKELETON ─────────────────────────────────── */
[ui~="skeleton"]{height:1rem;background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-1) 50%,var(--bg-2) 75%);
  background-size:200% 100%;animation:cx-shimmer 1.5s infinite;border-radius:var(--r-sm);margin-bottom:var(--s-2)}

/* ── DASHBOARD: TOAST ────────────────────────────────────── */
[ui~="toast-container"]{position:fixed;bottom:var(--s-4);right:var(--s-4);z-index:9999;
  display:flex;flex-direction:column;gap:var(--s-2);pointer-events:none}
[ui~="toast"]{padding:var(--s-2) var(--s-4);border-radius:var(--r-md);font-size:.85rem;font-weight:500;
  pointer-events:auto;cursor:pointer;animation:cx-toast .3s var(--ease);box-shadow:var(--sh-md)}
[ui~="toast"][ui~="success"]{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok)}
[ui~="toast"][ui~="warning"]{background:var(--wr-bg);color:var(--wr);border:1px solid var(--wr)}
[ui~="toast"][ui~="danger"]{background:var(--er-bg);color:var(--er);border:1px solid var(--er)}
[ui~="toast-out"]{opacity:0;transform:translateX(100%);transition:all .3s var(--ease)}

/* ── DASHBOARD: STATUS DOT ───────────────────────────────── */
[ui~="dot"]{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
[ui~="dot"][ui~="success"]{background:var(--ok)}
[ui~="dot"][ui~="warning"]{background:var(--wr)}
[ui~="dot"][ui~="danger"]{background:var(--er)}
[ui~="dot"][ui~="accent"]{background:var(--ac)}

/* ── MOBILE NAV ──────────────────────────────────────────── */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:var(--s-2);color:var(--tx-2)}
.nav-toggle:hover{color:var(--tx-0)}
.nav-mobile{display:none;position:fixed;top:60px;right:var(--s-4);z-index:99;border-radius:var(--r-lg);padding:var(--s-2) 0;min-width:160px;opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.nav-mobile.open{display:block;opacity:1;transform:none;pointer-events:auto}
.nav-mobile a:hover{color:var(--tx-0);background:var(--ac-bg)}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:640px){
  .nav-desktop{display:none!important}
  .nav-toggle{display:block}
  [ui~="main"]{padding:var(--s-3)}
  [ui~="tab"]{padding:var(--s-1) var(--s-2);font-size:.8rem}
  [ui~="table"]{font-size:.8rem}
  [ui~="table"] th{padding:.35rem .5rem;height:auto}
  [ui~="table"] td{padding:.35rem .5rem}
}

/* ── GLOBAL POLISH ───────────────────────────────────────── */
::selection {background:var(--ac);color:var(--bg-0)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg-0)}
::-webkit-scrollbar-thumb{background:var(--ac-lo);border-radius:var(--r-full)}