/* Tailr UI system — semantic tokens + primitives (2026-10-09).
   One vocabulary for the product app (/app), the admin console (/admin) and
   the site, written in the shape of shadcn/ui (background / foreground / card /
   muted / border / input / ring / primary / destructive …) as plain CSS so it
   needs no build step. Light values are the existing palette; dark values apply
   with the system setting unless data-theme="light", and always with
   data-theme="dark" (saved as tailr_theme), the same selectors as theme.css.
   Tokens are namespaced --ui-* because the app, admin and site already own
   unprefixed names with other meanings (the app's "muted" is a text colour).
   Rules: literal colours live ONLY in the three token blocks below; every
   primitive reads tokens (tests/uiSystem.test.js). Keep this file additive —
   page styles may override, nothing here uses !important. */

:root{color-scheme:light dark;--ui-background:#f5f4f1;--ui-foreground:#1b1b1d;--ui-foreground-2:#34343a;--ui-card:#ffffff;--ui-card-foreground:#1b1b1d;--ui-popover:#ffffff;--ui-muted:#f0efea;--ui-muted-foreground:#5c5c64;--ui-faint-foreground:#6b6b73;--ui-subtle:#f6f5f1;--ui-border:#e9e8e3;--ui-border-strong:#c9c7bf;--ui-input:#e9e8e3;--ui-ring:#2a6ad6;--ui-primary:#2a6ad6;--ui-primary-foreground:#ffffff;--ui-primary-strong:#2256b0;--ui-primary-soft:#e9f1fd;--ui-primary-text:#2256b0;--ui-secondary:#f0efea;--ui-secondary-foreground:#1b1b1d;--ui-destructive:#dc2626;--ui-destructive-foreground:#ffffff;--ui-destructive-bg:#fef2f2;--ui-destructive-border:#fecaca;--ui-success:#15803d;--ui-success-bg:#dcfce7;--ui-success-border:#bbf7d0;--ui-warning:#b45309;--ui-warning-bg:#fef3c7;--ui-warning-border:#fde9c8;--ui-info:#2a6ad6;--ui-info-bg:#eef4ff;--ui-info-border:#cfe0fb;--ui-inverse:#1b1b1d;--ui-inverse-foreground:#ffffff;--ui-scrim:rgba(20,20,30,.5);--ui-glass:rgba(245,244,241,.86);--ui-shadow-xs:0 1px 2px rgba(20,20,30,.04);--ui-shadow-sm:0 1px 2px rgba(20,20,30,.04),0 14px 34px -22px rgba(20,20,30,.18);--ui-shadow-md:0 18px 44px -18px rgba(20,20,30,.32);--ui-shadow-lg:0 30px 80px -28px rgba(20,20,30,.5);--ui-radius-sm:8px;--ui-radius-md:10px;--ui-radius-lg:16px;--ui-radius-xl:20px;--ui-radius-pill:999px;--ui-font-sans:'Instrument Sans',system-ui,sans-serif;--ui-font-display:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;--ui-font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--ui-text-xs:11.5px;--ui-text-sm:13px;--ui-text-md:14px;--ui-text-base:15px;--ui-text-lg:17px;--ui-text-xl:20px;--ui-text-2xl:24px;--ui-text-3xl:30px;--ui-ease:cubic-bezier(.16,1,.3,1);--ui-dur-fast:.14s;--ui-dur-normal:.22s;--ui-control-h:40px;--ui-control-h-sm:32px;--ui-control-h-lg:46px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--ui-background:#141416;--ui-foreground:#ededf0;--ui-foreground-2:#c9c9cf;--ui-card:#1c1c1f;--ui-card-foreground:#ededf0;--ui-popover:#1c1c1f;--ui-muted:#232326;--ui-muted-foreground:#a9a9b2;--ui-faint-foreground:#a2a2aa;--ui-subtle:#202024;--ui-border:#33333a;--ui-border-strong:#4a4a52;--ui-input:#33333a;--ui-ring:#8ab4ff;--ui-primary:#2a6ad6;--ui-primary-foreground:#ffffff;--ui-primary-strong:#3b7be0;--ui-primary-soft:rgba(42,106,214,.22);--ui-primary-text:#8ab4ff;--ui-secondary:#26262b;--ui-secondary-foreground:#ededf0;--ui-destructive:#f87171;--ui-destructive-foreground:#141416;--ui-destructive-bg:#311919;--ui-destructive-border:#532929;--ui-success:#86efac;--ui-success-bg:#192b1f;--ui-success-border:#32583f;--ui-warning:#f0c7a8;--ui-warning-bg:#38331c;--ui-warning-border:#54442a;--ui-info:#8ab4ff;--ui-info-bg:#1f2a3c;--ui-info-border:#2a364c;--ui-inverse:#ededf0;--ui-inverse-foreground:#141416;--ui-scrim:rgba(0,0,0,.6);--ui-glass:rgba(20,20,22,.86);--ui-shadow-xs:0 1px 2px rgba(0,0,0,.4);--ui-shadow-sm:0 1px 2px rgba(0,0,0,.4),0 14px 34px -22px rgba(0,0,0,.6);--ui-shadow-md:0 18px 44px -18px rgba(0,0,0,.7);--ui-shadow-lg:0 30px 80px -28px rgba(0,0,0,.8)}}
:root[data-theme="dark"]{color-scheme:dark;--ui-background:#141416;--ui-foreground:#ededf0;--ui-foreground-2:#c9c9cf;--ui-card:#1c1c1f;--ui-card-foreground:#ededf0;--ui-popover:#1c1c1f;--ui-muted:#232326;--ui-muted-foreground:#a9a9b2;--ui-faint-foreground:#a2a2aa;--ui-subtle:#202024;--ui-border:#33333a;--ui-border-strong:#4a4a52;--ui-input:#33333a;--ui-ring:#8ab4ff;--ui-primary:#2a6ad6;--ui-primary-foreground:#ffffff;--ui-primary-strong:#3b7be0;--ui-primary-soft:rgba(42,106,214,.22);--ui-primary-text:#8ab4ff;--ui-secondary:#26262b;--ui-secondary-foreground:#ededf0;--ui-destructive:#f87171;--ui-destructive-foreground:#141416;--ui-destructive-bg:#311919;--ui-destructive-border:#532929;--ui-success:#86efac;--ui-success-bg:#192b1f;--ui-success-border:#32583f;--ui-warning:#f0c7a8;--ui-warning-bg:#38331c;--ui-warning-border:#54442a;--ui-info:#8ab4ff;--ui-info-bg:#1f2a3c;--ui-info-border:#2a364c;--ui-inverse:#ededf0;--ui-inverse-foreground:#141416;--ui-scrim:rgba(0,0,0,.6);--ui-glass:rgba(20,20,22,.86);--ui-shadow-xs:0 1px 2px rgba(0,0,0,.4);--ui-shadow-sm:0 1px 2px rgba(0,0,0,.4),0 14px 34px -22px rgba(0,0,0,.6);--ui-shadow-md:0 18px 44px -18px rgba(0,0,0,.7);--ui-shadow-lg:0 30px 80px -28px rgba(0,0,0,.8)}
:root[data-theme="light"]{color-scheme:light}

/* ---- focus: one visible ring everywhere, keyboard only ---- */
.ui-btn:focus-visible,.ui-input:focus-visible,.ui-textarea:focus-visible,.ui-select:focus-visible,.ui-seg-btn:focus-visible,.ui-chip:focus-visible,.ui-menu-item:focus-visible,.ui-dialog-close:focus-visible,.ui-section-nav button:focus-visible,.ui-nav-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-background),0 0 0 4px var(--ui-ring)}

/* ---- buttons ---- */
.ui-btn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--ui-control-h);padding:0 18px;margin:0;border:1px solid transparent;border-radius:var(--ui-radius-md);background:var(--ui-secondary);color:var(--ui-secondary-foreground);font-family:var(--ui-font-sans);font-size:var(--ui-text-md);font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background var(--ui-dur-fast) var(--ui-ease),border-color var(--ui-dur-fast) var(--ui-ease),color var(--ui-dur-fast) var(--ui-ease),transform var(--ui-dur-fast) var(--ui-ease),box-shadow var(--ui-dur-fast) var(--ui-ease)}
.ui-btn svg{flex-shrink:0;width:15px;height:15px}
.ui-btn:hover{background:var(--ui-muted)}
.ui-btn:not(:disabled):active{transform:translateY(.5px) scale(.985)}
.ui-btn:disabled,.ui-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.ui-btn--primary{background:var(--ui-primary);color:var(--ui-primary-foreground);box-shadow:0 10px 22px -12px var(--ui-primary)}
.ui-btn--primary:hover{background:var(--ui-primary-strong)}
.ui-btn--outline{background:var(--ui-card);color:var(--ui-foreground-2);border-color:var(--ui-border)}
.ui-btn--outline:hover{background:var(--ui-subtle);border-color:var(--ui-border-strong);color:var(--ui-foreground)}
.ui-btn--ghost{background:transparent;color:var(--ui-foreground-2)}
.ui-btn--ghost:hover{background:var(--ui-muted);color:var(--ui-foreground)}
.ui-btn--accent{background:var(--ui-card);color:var(--ui-primary-text);border-color:var(--ui-info-border)}
.ui-btn--accent:hover{background:var(--ui-primary-soft)}
.ui-btn--destructive{background:var(--ui-destructive);color:var(--ui-destructive-foreground)}
.ui-btn--destructive:hover{filter:brightness(.94)}
.ui-btn--link{background:none;color:var(--ui-primary-text);padding:0;height:auto;border-radius:var(--ui-radius-sm)}
.ui-btn--link:hover{text-decoration:underline;text-underline-offset:3px;background:none}
.ui-btn--sm{height:var(--ui-control-h-sm);padding:0 12px;font-size:var(--ui-text-sm);gap:6px}
.ui-btn--sm svg{width:13px;height:13px}
.ui-btn--lg{height:var(--ui-control-h-lg);padding:0 24px;font-size:var(--ui-text-base)}
.ui-btn--icon{width:var(--ui-control-h);padding:0}
.ui-btn--icon.ui-btn--sm{width:var(--ui-control-h-sm)}
.ui-btn--block{width:100%}
.ui-btn[aria-pressed="true"]{background:var(--ui-primary-soft);color:var(--ui-primary-text);border-color:var(--ui-primary)}

/* ---- form controls ---- */
.ui-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ui-label{font-size:var(--ui-text-sm);font-weight:700;color:var(--ui-foreground-2)}
.ui-hint{font-size:12.5px;color:var(--ui-faint-foreground);line-height:1.5}
.ui-error{font-size:12.5px;font-weight:600;color:var(--ui-destructive)}
.ui-input,.ui-textarea,.ui-select{width:100%;min-width:0;box-sizing:border-box;height:var(--ui-control-h);padding:0 12px;border:1px solid var(--ui-input);border-radius:var(--ui-radius-md);background:var(--ui-card);color:var(--ui-foreground);font-family:var(--ui-font-sans);font-size:var(--ui-text-md);line-height:1.4;transition:border-color var(--ui-dur-fast) var(--ui-ease),box-shadow var(--ui-dur-fast) var(--ui-ease)}
.ui-input::placeholder,.ui-textarea::placeholder{color:var(--ui-faint-foreground);opacity:1}
.ui-input:hover,.ui-textarea:hover,.ui-select:hover{border-color:var(--ui-border-strong)}
.ui-input:focus,.ui-textarea:focus,.ui-select:focus{outline:none;border-color:var(--ui-ring);box-shadow:0 0 0 3px var(--ui-primary-soft)}
.ui-input[aria-invalid="true"],.ui-textarea[aria-invalid="true"]{border-color:var(--ui-destructive)}
.ui-textarea{height:auto;min-height:96px;padding:10px 12px;resize:vertical}
.ui-input--lg{height:var(--ui-control-h-lg);font-size:var(--ui-text-base)}

/* ---- segmented control (one choice among a few) ---- */
.ui-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-pill);background:var(--ui-muted);max-width:100%}
.ui-seg-btn{appearance:none;border:0;background:transparent;color:var(--ui-muted-foreground);font-family:var(--ui-font-sans);font-size:var(--ui-text-sm);font-weight:700;height:32px;padding:0 14px;border-radius:var(--ui-radius-pill);cursor:pointer;white-space:nowrap;transition:background var(--ui-dur-fast) var(--ui-ease),color var(--ui-dur-fast) var(--ui-ease)}
.ui-seg-btn:hover{color:var(--ui-foreground)}
.ui-seg-btn[aria-pressed="true"],.ui-seg-btn[aria-checked="true"]{background:var(--ui-card);color:var(--ui-foreground);box-shadow:var(--ui-shadow-xs)}
.ui-seg--block{display:flex}
.ui-seg--block .ui-seg-btn{flex:1}

/* ---- chips (toggleable filters) ---- */
.ui-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-pill);background:var(--ui-card);color:var(--ui-foreground-2);font-family:var(--ui-font-sans);font-size:var(--ui-text-sm);font-weight:700;cursor:pointer;white-space:nowrap;transition:background var(--ui-dur-fast) var(--ui-ease),border-color var(--ui-dur-fast) var(--ui-ease),color var(--ui-dur-fast) var(--ui-ease)}
.ui-chip:hover{border-color:var(--ui-border-strong)}
.ui-chip[aria-pressed="true"]{background:var(--ui-primary-soft);border-color:var(--ui-primary);color:var(--ui-primary-text)}

/* ---- badges ---- */
.ui-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--ui-radius-pill);font-family:var(--ui-font-sans);font-size:var(--ui-text-xs);font-weight:700;line-height:1.5;background:var(--ui-muted);color:var(--ui-muted-foreground);white-space:nowrap}
.ui-badge--primary{background:var(--ui-primary-soft);color:var(--ui-primary-text)}
.ui-badge--success{background:var(--ui-success-bg);color:var(--ui-success)}
.ui-badge--warning{background:var(--ui-warning-bg);color:var(--ui-warning)}
.ui-badge--destructive{background:var(--ui-destructive-bg);color:var(--ui-destructive)}
.ui-badge--outline{background:transparent;border:1px solid var(--ui-border);color:var(--ui-foreground-2)}

/* ---- cards ---- */
.ui-card{background:var(--ui-card);color:var(--ui-card-foreground);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-sm)}
.ui-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 22px 0}
.ui-card-title{font-family:var(--ui-font-sans);font-size:var(--ui-text-lg);font-weight:700;letter-spacing:-.01em;color:var(--ui-foreground);margin:0}
.ui-card-desc{font-size:var(--ui-text-sm);color:var(--ui-muted-foreground);line-height:1.55;margin:3px 0 0}
.ui-card-body{padding:18px 22px 22px}
.ui-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid var(--ui-border)}
.ui-card--flat{box-shadow:none}

/* ---- page header (every full-page view in the app shell) ---- */
.ui-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 22px}
.ui-page-title{font-family:var(--ui-font-display);font-size:var(--ui-text-3xl);font-weight:600;letter-spacing:-.022em;line-height:1.1;color:var(--ui-foreground);margin:0}
.ui-page-desc{font-size:var(--ui-text-md);color:var(--ui-muted-foreground);line-height:1.55;margin:6px 0 0;max-width:62ch}
.ui-page-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ui-page-head>div:first-child{min-width:0;flex:1 1 320px}

/* ---- section nav (jump links inside a long settings page) ---- */
.ui-section-nav{display:flex;gap:4px;flex-wrap:wrap;position:sticky;top:76px;z-index:4;padding:6px;margin:0 0 16px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-card);box-shadow:var(--ui-shadow-xs)}
.ui-section-nav button{appearance:none;border:0;background:transparent;color:var(--ui-muted-foreground);font-family:var(--ui-font-sans);font-size:var(--ui-text-sm);font-weight:700;height:32px;padding:0 12px;border-radius:var(--ui-radius-pill);cursor:pointer;white-space:nowrap;transition:background var(--ui-dur-fast) var(--ui-ease),color var(--ui-dur-fast) var(--ui-ease)}
.ui-section-nav button:hover{background:var(--ui-muted);color:var(--ui-foreground)}
.ui-section-nav button[aria-current="true"]{background:var(--ui-primary-soft);color:var(--ui-primary-text)}

/* ---- empty state ---- */
.ui-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:40px 24px;border:1px dashed var(--ui-border-strong);border-radius:var(--ui-radius-lg);background:var(--ui-subtle)}
.ui-empty-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ui-primary-soft);color:var(--ui-primary-text);margin-bottom:6px}
.ui-empty-icon svg{width:20px;height:20px}
.ui-empty-title{font-size:var(--ui-text-base);font-weight:700;color:var(--ui-foreground)}
.ui-empty-desc{font-size:var(--ui-text-sm);color:var(--ui-muted-foreground);line-height:1.55;max-width:46ch;margin:0}
.ui-empty-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.ui-empty--compact{padding:26px 20px}

/* ---- alerts (inline status) ---- */
.ui-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-subtle);color:var(--ui-foreground-2);font-size:var(--ui-text-sm);line-height:1.55}
.ui-alert svg{flex-shrink:0;width:16px;height:16px;margin-top:1px}
.ui-alert strong{color:var(--ui-foreground)}
.ui-alert--info{background:var(--ui-info-bg);border-color:var(--ui-info-border);color:var(--ui-info)}
.ui-alert--success{background:var(--ui-success-bg);border-color:var(--ui-success-border);color:var(--ui-success)}
.ui-alert--warning{background:var(--ui-warning-bg);border-color:var(--ui-warning-border);color:var(--ui-warning)}
.ui-alert--destructive{background:var(--ui-destructive-bg);border-color:var(--ui-destructive-border);color:var(--ui-destructive)}

/* ---- skeleton ---- */
.ui-skeleton{display:block;border-radius:var(--ui-radius-sm);background:linear-gradient(90deg,var(--ui-muted) 0%,var(--ui-subtle) 50%,var(--ui-muted) 100%);background-size:200% 100%;animation:uiShimmer 1.3s linear infinite}
@keyframes uiShimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---- tables ---- */
.ui-table{border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);overflow:hidden;background:var(--ui-card)}
.ui-table-head{display:grid;gap:10px;padding:10px 14px;background:var(--ui-subtle);border-bottom:1px solid var(--ui-border);font-size:10.5px;font-weight:700;color:var(--ui-faint-foreground);text-transform:uppercase;letter-spacing:.05em}
.ui-table-row{display:grid;gap:10px;padding:12px 14px;border-bottom:1px solid var(--ui-border);font-size:var(--ui-text-sm);align-items:center}
.ui-table-row:last-child{border-bottom:0}
.ui-table-group{padding:8px 14px;background:var(--ui-subtle);font-size:11px;font-weight:700;color:var(--ui-primary-text);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--ui-border)}

/* ---- dialog ---- */
.ui-dialog-scrim{position:fixed;inset:0;z-index:120;background:var(--ui-scrim);display:flex;align-items:center;justify-content:center;padding:20px}
.ui-dialog{background:var(--ui-card);color:var(--ui-card-foreground);border-radius:var(--ui-radius-xl);box-shadow:var(--ui-shadow-lg);width:100%;max-width:480px;max-height:calc(100dvh - 40px);overflow:auto}
.ui-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px 0}
.ui-dialog-title{font-family:var(--ui-font-sans);font-size:var(--ui-text-xl);font-weight:700;letter-spacing:-.01em;color:var(--ui-foreground);margin:0}
.ui-dialog-desc{font-size:var(--ui-text-sm);color:var(--ui-muted-foreground);line-height:1.55;margin:3px 0 0}
.ui-dialog-body{padding:16px 24px 0;font-size:var(--ui-text-md);color:var(--ui-foreground-2);line-height:1.6}
.ui-dialog-foot{display:flex;justify-content:flex-end;gap:10px;padding:20px 24px 22px}
.ui-dialog-close{appearance:none;flex-shrink:0;width:34px;height:34px;border:0;border-radius:var(--ui-radius-sm);background:var(--ui-muted);color:var(--ui-faint-foreground);cursor:pointer;display:grid;place-items:center}
.ui-dialog-close:hover{background:var(--ui-secondary);color:var(--ui-foreground)}
.ui-dialog--wide{max-width:720px}

/* ---- menu (account / overflow) ---- */
.ui-menu{background:var(--ui-popover);border:1px solid var(--ui-border);border-radius:14px;box-shadow:var(--ui-shadow-md);padding:6px;min-width:218px}
.ui-menu-label{padding:9px 11px;border-bottom:1px solid var(--ui-border);margin-bottom:4px}
.ui-menu-label>strong{display:block;font-size:var(--ui-text-sm);font-weight:700;color:var(--ui-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-menu-label>span{display:block;font-size:var(--ui-text-xs);color:var(--ui-faint-foreground)}
.ui-menu-item{appearance:none;display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;border:0;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-foreground-2);font-family:var(--ui-font-sans);font-size:13.5px;font-weight:600;cursor:pointer}
.ui-menu-item svg{flex-shrink:0;width:16px;height:16px;color:var(--ui-faint-foreground)}
.ui-menu-item:hover{background:var(--ui-muted);color:var(--ui-foreground)}
.ui-menu-item--accent{color:var(--ui-primary-text);font-weight:700}
.ui-menu-item--accent svg{color:var(--ui-primary-text)}
.ui-menu-item--danger{color:var(--ui-destructive)}
.ui-menu-item--danger svg{color:var(--ui-destructive)}
.ui-menu-item--danger:hover{background:var(--ui-destructive-bg);color:var(--ui-destructive)}
.ui-menu-sep{height:1px;background:var(--ui-border);margin:4px 0}

/* ---- app-shell navigation (sidebar, settings nav; bottom tabs share the tint) ---- */
.ui-nav-item{display:flex;align-items:center;gap:11px;width:100%;padding:7px 9px;border:0;border-radius:10px;background:transparent;color:var(--ui-foreground-2);font-family:var(--ui-font-sans);font-size:var(--ui-text-md);font-weight:600;white-space:nowrap;overflow:hidden;cursor:pointer;text-align:left;text-decoration:none;transition:background var(--ui-dur-fast) var(--ui-ease),color var(--ui-dur-fast) var(--ui-ease)}
.ui-nav-ico{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:10px;background:transparent;color:var(--ui-muted-foreground);transition:background var(--ui-dur-normal) var(--ui-ease),color var(--ui-dur-normal) var(--ui-ease),transform var(--ui-dur-normal) var(--ui-ease)}
.ui-nav-ico svg{width:18px;height:18px}
.ui-nav-item:hover{background:var(--ui-muted);color:var(--ui-foreground)}
.ui-nav-item:hover .ui-nav-ico{background:var(--ui-primary-soft);color:var(--ui-primary-text);transform:translateY(-1px) scale(1.08)}
.ui-nav-item[aria-current="page"]{background:var(--ui-subtle);color:var(--ui-foreground);font-weight:700}
.ui-nav-item[aria-current="page"] .ui-nav-ico{background:var(--ui-primary);color:var(--ui-primary-foreground)}
.ui-nav-item--collapsed{justify-content:center;padding:7px 0}
.ui-nav-item--danger{color:var(--ui-destructive)}
.ui-nav-item--danger .ui-nav-ico{color:var(--ui-destructive)}
.ui-nav-item--danger:hover{background:var(--ui-destructive-bg);color:var(--ui-destructive)}
.ui-nav-item--danger:hover .ui-nav-ico{background:var(--ui-destructive-bg);color:var(--ui-destructive);transform:none}

/* ---- refer & earn card (sidebar foot) ---- */
.ui-refer{display:block;width:100%;text-align:left;border:1px solid var(--ui-border);border-radius:12px;padding:11px 12px;background:var(--ui-card);color:var(--ui-foreground);font-family:var(--ui-font-sans);cursor:pointer;transition:transform var(--ui-dur-normal) var(--ui-ease),box-shadow var(--ui-dur-normal) var(--ui-ease),border-color var(--ui-dur-normal) var(--ui-ease)}
.ui-refer:hover{transform:translateY(-1px);box-shadow:var(--ui-shadow-sm);border-color:var(--ui-primary)}
.ui-refer:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-background),0 0 0 4px var(--ui-ring)}
.ui-refer-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700}
.ui-refer-head svg{width:16px;height:16px;color:var(--ui-primary-text);flex-shrink:0}
.ui-refer-head .chev{margin-left:auto;color:var(--ui-faint-foreground);transition:transform var(--ui-dur-normal) var(--ui-ease)}
.ui-refer:hover .chev{transform:translateX(2px)}
.ui-refer-desc{display:block;font-size:11.5px;line-height:1.4;color:var(--ui-faint-foreground);margin-top:4px;white-space:normal}

/* ---- settings dialog: nav | content ---- */
.ui-settings{display:grid;grid-template-columns:212px minmax(0,1fr);min-height:440px}
.ui-settings-nav{display:flex;flex-direction:column;gap:2px;padding:14px 10px;border-right:1px solid var(--ui-border);background:var(--ui-subtle)}
.ui-settings-nav .ui-nav-item{font-size:13.5px}
.ui-settings-nav-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--ui-border);display:flex;flex-direction:column;gap:2px}
.ui-settings-body{padding:20px 24px 24px;min-width:0}
.ui-settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.ui-settings-title{font-family:var(--ui-font-display);font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--ui-foreground);margin:0}

/* ---- option rows (one choice among a few, with a radio dot) ---- */
.ui-option{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 13px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-card);color:var(--ui-foreground);font-family:var(--ui-font-sans);font-size:var(--ui-text-md);font-weight:600;cursor:pointer;transition:border-color var(--ui-dur-fast) var(--ui-ease),background var(--ui-dur-fast) var(--ui-ease)}
.ui-option::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--ui-border-strong);box-sizing:border-box;flex-shrink:0;transition:border var(--ui-dur-fast) var(--ui-ease)}
.ui-option:hover{border-color:var(--ui-border-strong);background:var(--ui-subtle)}
.ui-option[aria-pressed="true"]{border-color:var(--ui-primary);background:var(--ui-primary-soft)}
.ui-option[aria-pressed="true"]::before{border:5px solid var(--ui-primary);background:var(--ui-card)}
.ui-option:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-background),0 0 0 4px var(--ui-ring)}

/* ---- misc ---- */
.ui-separator{height:1px;background:var(--ui-border);margin:14px 0}
.ui-kbd{display:inline-block;padding:1px 6px;border:1px solid var(--ui-border);border-bottom-width:2px;border-radius:6px;background:var(--ui-subtle);font-family:var(--ui-font-mono);font-size:11px;color:var(--ui-muted-foreground)}
.ui-stat{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-card)}
.ui-stat-label{font-size:10.5px;font-weight:700;color:var(--ui-faint-foreground);text-transform:uppercase;letter-spacing:.06em}
.ui-stat-value{font-family:var(--ui-font-display);font-size:var(--ui-text-2xl);font-weight:600;letter-spacing:-.02em;color:var(--ui-foreground);line-height:1.1}
.ui-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ui-mono{font-family:var(--ui-font-mono)}

@media (max-width:720px){
  .ui-page-head{margin-bottom:16px}
  .ui-page-title{font-size:var(--ui-text-2xl)}
  .ui-section-nav{top:62px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .ui-section-nav::-webkit-scrollbar{display:none}
  .ui-dialog-scrim{padding:0;align-items:flex-end}
  .ui-dialog{border-radius:var(--ui-radius-xl) var(--ui-radius-xl) 0 0;max-height:calc(100dvh - 56px);padding-bottom:env(safe-area-inset-bottom)}
  .ui-btn,.ui-chip,.ui-seg-btn{min-height:44px}
  .ui-settings{grid-template-columns:1fr;min-height:0}
  .ui-settings-nav{flex-direction:row;overflow-x:auto;gap:4px;padding:10px;border-right:0;border-bottom:1px solid var(--ui-border);scrollbar-width:none}
  .ui-settings-nav::-webkit-scrollbar{display:none}
  .ui-settings-nav .ui-nav-item{width:auto;flex-shrink:0}
  .ui-settings-nav-foot{display:contents}
  .ui-settings-body{padding:16px}
  .ui-input,.ui-select,.ui-textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .ui-btn,.ui-chip,.ui-seg-btn,.ui-menu-item,.ui-nav-item,.ui-nav-ico,.ui-refer,.ui-refer .chev,.ui-option,.ui-input,.ui-textarea,.ui-select{transition:none}
  .ui-nav-item:hover .ui-nav-ico,.ui-refer:hover{transform:none}
  .ui-btn:not(:disabled):active{transform:none}
  .ui-skeleton{animation:none}
}