/* ============================================================
   VIVA UI DNA - trích 1:1 từ mnml.ai/dashboard (05/11/2026)
   Nguồn: CSS custom properties :root/.dark/.usr-shell + rule component
   Font: Inter (UI/body), Aspekta (heading); fallback system-ui
   Dùng: <html class="light"> hoặc <html class="dark">, body.usr-shell
   ============================================================ */

/* ---------- 1. PRIMITIVE TOKENS (:root) ---------- */
:root{
  /* palette */
  --blue-50:#eff6ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-300:#93c5fd;--blue-400:#60a5fa;
  --blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--blue-900:#1e3a8a;--blue-950:#172554;
  --upgrade-purple:#9333ea;
  --lavender-50:#eeedfe;--lavender-100:#e2e0fc;--lavender-200:#cecbf6;--lavender-400:#7f77dd;--lavender-600:#534ab7;--lavender-800:#3c3489;--lavender-900:#2e2966;
  --blue-fill-dark:#2563eb;
  --neutral-50:#fafafa;--neutral-100:#f5f5f5;--neutral-200:#e5e5e5;--neutral-300:#d4d4d4;--neutral-400:#a3a3a3;
  --neutral-500:#737373;--neutral-600:#525252;--neutral-700:#404040;--neutral-800:#262626;--neutral-900:#171717;--neutral-950:#0a0a0a;

  /* ink / fill / stroke (alpha trên nền) */
  --ink-light:#0a0a0a;--ink-2-light:#0a0a0ad6;--ink-3-light:#0a0a0ab8;--ink-4-light:#0a0a0a7d;
  --fill-1-light:#0a0a0a0d;--fill-2-light:#0a0a0a14;--fill-3-light:#0a0a0a24;
  --stroke-1-light:#0a0a0a17;--stroke-2-light:#0a0a0a29;
  --ink-dark:#fafafa;--ink-2-dark:#fafafaa8;--ink-3-dark:#fafafa8a;--ink-4-dark:#fafafa61;
  --fill-1-dark:#ffffff0b;--fill-2-dark:#ffffff14;--fill-3-dark:#ffffff21;
  --stroke-1-dark:#ffffff12;--stroke-2-dark:#ffffff1f;
  --control-edge-light:var(--neutral-300);--control-edge-strong-light:var(--neutral-400);
  --control-edge-dark:var(--neutral-400);--control-edge-strong-dark:var(--neutral-300);

  /* semantic status */
  --ok-light:#065f46;--warn-light:#8a5b00;--danger-light:#b93030;
  --ok-dark:#34d399;--warn-dark:#f5b54a;--danger-dark:#f07a72;
  --danger-fill:#cd4335;--ok-fill:#059669;--ok-fill-strong:#047857;--ok-fill-strong-ink:#fff;
  --sale-light:#b23b0a;--sale-dark:#fb923c;--fav-star:#f5a623;--sticky-light:#fbe58e;--sticky-dark:#6d5a1e;
  --animate-text-light:#086a59;--animate-text-dark:#5cc4ae;--brick-light:#a81e16;--brick-dark:#c93a31;

  /* surfaces */
  --surface-page-light:#fafafa;--surface-page-dark:#0a0a0a;
  --surface-canvas-light:#e5e5e5;--surface-canvas-dark:#000;
  --surface-panel-light:#fff;--surface-panel-dark:#171717;
  --surface-card-light:#fff;--surface-card-dark:#262626;
  --surface-field-light:var(--neutral-100);--surface-field-dark:var(--surface-canvas-dark);
  --tip-bg-light:#262626;--tip-ink-light:#fafafa;--tip-bg-dark:#404040;--tip-ink-dark:#fafafa;
  --warm-surface-light:#f4ecdc;--warm-surface-2-light:#eee3cf;--warm-ink-light:#3b2a1e;
  --warm-surface-dark:#241c16;--warm-surface-2-dark:#2a211a;--warm-ink-dark:#f5ebe0;

  /* scrim / shadow */
  --shadow-ink:23,23,23;--scrim-ink:10,10,10;
  --scrim:rgba(var(--scrim-ink),.55);--scrim-overlay:rgba(var(--scrim-ink),.5);--scrim-lightbox:rgba(var(--scrim-ink),.9);--scrim-blur:6px;
  --media-pill:#ffffffeb;--media-pill-ink:var(--neutral-800);
  --chip-on-ink-light:#fff;--chip-on-ink-dark:#0a0a0a;
  --glass-border-light:rgba(var(--shadow-ink),.06);--glass-border-dark:#ffffff16;
  --glass-shadow-light:0 0 0 .5px rgba(var(--shadow-ink),.055),0 1px 2px rgba(var(--shadow-ink),.05),0 8px 24px -6px rgba(var(--shadow-ink),.1),0 28px 70px -16px rgba(var(--shadow-ink),.16),inset 0 1px 0 #fff;
  --glass-shadow-dark:0 0 0 .5px #0000008c,0 24px 60px -12px #0009,0 4px 16px -4px #00000073,inset 0 1px 0 #ffffff0e;
  --seg-on-shadow-light:0 1px 2px rgba(var(--shadow-ink),.1),0 2px 8px rgba(var(--shadow-ink),.08),0 0 0 1px rgba(var(--shadow-ink),.06);
  --seg-on-shadow-dark:0 1px 4px #0000002e,0 0 0 1px #ffffff12;
  --btn-glow-geo:0 6px 18px -7px;--btn-glow-geo-hover:0 8px 22px -7px;--btn-glow-geo-active:0 2px 8px -4px;
  --btn-glow-mix:55%;--btn-glow-mix-hover:68%;--btn-glow-mix-active:38%;
  --focus-halo-geo:0 0 0 3.5px;--focus-halo-mix:15%;
  --field-shadow:0 1px 2px rgba(var(--shadow-ink),.05);
  --select-chevron:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* control heights */
  --control-h-xs:24px;--control-h-chip:28px;--control-h-sm:32px;--control-h-md:36px;--control-h-lg:40px;--control-h-xl:48px;--control-h-touch:44px;
  /* radius */
  --r-xs:7px;--r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:22px;--r-full:999px;
  /* type scale */
  --fs-micro:10px;--fs-caption:11px;--fs-hint:12px;--fs-body:13px;--fs-body-lg:14px;--fs-title:15px;
  --fs-h4:16px;--fs-h3:18px;--fs-h2:20px;--fs-h1:24px;--fs-display:28px;--fs-hero:26px;--fs-numeral:46px;
  --fw-medium:500;--fw-strong:560;--fw-semibold:620;--fw-bold:680;
  --lh-display:1.15;--lh-body:1.45;--lh-relaxed:1.55;
  --ls-display:-.02em;--ls-title:-.01em;--ls-mono:.02em;--ls-overline:.08em;--ls-overline-wide:.13em;
  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);--dur-1:.12s;--dur-2:.16s;--dur-3:.24s;--dur-4:.32s;
  /* z */
  --z-sticky:40;--z-drawer:60;--z-tip:100;--z-modal:120;--z-toast:200;
  /* product gradients */
  --product-studio-grad:radial-gradient(at 12% 18%,var(--blue-400) 0,transparent 55%),radial-gradient(at 88% 12%,#22d3ee 0,transparent 48%),radial-gradient(at 85% 92%,#4f46e5 0,transparent 58%),radial-gradient(at 8% 96%,var(--blue-800) 0,transparent 60%),var(--blue-600);
  --product-flow-grad:radial-gradient(at 12% 18%,#a78bfa 0,transparent 55%),radial-gradient(at 88% 10%,#f472b6 0,transparent 50%),radial-gradient(at 90% 95%,#fb923c 0,transparent 52%),radial-gradient(at 6% 96%,#5b21b6 0,transparent 60%),#7c3aed;
  /* brand */
  --brand-primary:var(--blue-700);--primary:var(--blue-700);--ring:var(--blue-700);--background:#fff;--foreground:#0a0a0a;
  --font-fallback:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-inter:Inter,system-ui,arial;--font-aspekta:aspekta,"Inter",system-ui,arial;
  --font-mono-stack:var(--font-inter),var(--font-fallback);
  --control-edge:var(--control-edge-light);--control-edge-strong:var(--control-edge-strong-light);--field-bg:var(--surface-field-light);
}
.dark{--brand-primary:var(--blue-600);--primary:var(--blue-fill-dark);--ring:var(--blue-600);--background:#0a0a0a;--foreground:#fafafa;
  --field-bg:var(--surface-field-dark);--control-edge:var(--control-edge-dark);--control-edge-strong:var(--control-edge-strong-dark)}

/* ---------- 2. SHELL SEMANTIC TOKENS (.usr-shell) ---------- */
.usr-shell{
  --font-ui:var(--font-inter),system-ui,-apple-system,sans-serif;--font-mono:var(--font-mono-stack);
  --accent:var(--blue-700);--accent-ink:#fff;--accent-text:var(--blue-700);--upgrade-a:var(--blue-700);--upgrade-b:var(--upgrade-purple);
  --canvas-bg:var(--surface-page-light);--page-bg:var(--surface-page-light);--glass-bg-solid:var(--surface-panel-light);
  --glass-border:var(--glass-border-light);--glass-shadow:var(--glass-shadow-light);--seg-on-shadow:var(--seg-on-shadow-light);
  --btn-glow:var(--btn-glow-geo) color-mix(in oklch,var(--accent) var(--btn-glow-mix),transparent);
  --btn-glow-hover:var(--btn-glow-geo-hover) color-mix(in oklch,var(--accent) var(--btn-glow-mix-hover),transparent);
  --btn-glow-active:var(--btn-glow-geo-active) color-mix(in oklch,var(--accent) var(--btn-glow-mix-active),transparent);
  --focus-halo:var(--focus-halo-geo) color-mix(in oklch,var(--accent) var(--focus-halo-mix),transparent);
  --ink:var(--ink-light);--ink-2:var(--ink-2-light);--ink-3:var(--ink-3-light);--ink-4:var(--ink-4-light);
  --fill-1:var(--fill-1-light);--fill-2:var(--fill-2-light);--fill-3:var(--fill-3-light);--stroke-1:var(--stroke-1-light);--stroke-2:var(--stroke-2-light);
  --chip-on-bg:var(--ink-light);--chip-on-ink:var(--chip-on-ink-light);--chip-rest-bg:var(--fill-1);--chip-rest-stroke:var(--stroke-1);
  --tab-on-bg:var(--chip-on-bg);--tab-on-ink:var(--chip-on-ink);--sel-bg:var(--ink);--sel-ink:#fff;
  --ok:var(--ok-light);--warn:var(--warn-light);--danger:var(--danger-light);--sale:var(--sale-light);
  --tip-bg:var(--tip-bg-light);--tip-ink:var(--tip-ink-light);--scrim:#f0f1f38c;
  --frame-max:1240px;--frame-max-narrow:780px;--frame-gutter:40px;--frame-top:24px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;-webkit-tap-highlight-color:transparent;
  background:var(--page-bg);height:100dvh;color:var(--ink);font-family:var(--font-ui);font-size:var(--fs-body-lg);
  display:grid;grid-template-columns:236px 1fr;transition:background .4s var(--ease),grid-template-columns .22s var(--ease);
}
.dark .usr-shell{--canvas-bg:var(--surface-page-dark);--page-bg:var(--surface-page-dark);--glass-bg-solid:var(--surface-panel-dark);
  --glass-border:var(--glass-border-dark);--glass-shadow:var(--glass-shadow-dark);--seg-on-shadow:var(--seg-on-shadow-dark);
  --ink:var(--ink-dark);--ink-2:var(--ink-2-dark);--ink-3:var(--ink-3-dark);--ink-4:var(--ink-4-dark);
  --accent:var(--blue-fill-dark);--accent-text:var(--blue-300);--upgrade-a:var(--blue-fill-dark);
  --fill-1:var(--fill-1-dark);--fill-2:var(--fill-2-dark);--fill-3:var(--fill-3-dark);--stroke-1:var(--stroke-1-dark);--stroke-2:var(--stroke-2-dark);
  --chip-on-bg:var(--ink-dark);--chip-on-ink:var(--chip-on-ink-dark);--sel-bg:var(--blue-fill-dark);
  --ok:var(--ok-dark);--warn:var(--warn-dark);--danger:var(--danger-dark);--sale:var(--sale-dark);
  --tip-bg:var(--tip-bg-dark);--tip-ink:var(--tip-ink-dark);--scrim:rgba(var(--scrim-ink),.5)}
.usr-shell *,.usr-shell ::before,.usr-shell ::after{box-sizing:border-box}
.usr-shell[data-sidebar="collapsed"]{grid-template-columns:52px 1fr}
@media (max-width:1023px){.usr-shell{grid-template-columns:1fr;--frame-gutter:24px}.side:not(.mobile-open){display:none!important}}
@media (max-width:599px){.usr-shell{--frame-gutter:14px;--frame-top:14px}}
.usr-shell :is(button,a,input,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.usr-shell :is(.chip,.icon-btn,.tool-card,.nav-item):active{transform:scale(.97)}
.usr-shell :is(.nav-item,.create-main,.chip,.icon-btn,.credits-pill,.topup-chip,.tool-card){user-select:none}
h1,h2,h3,h4{font-family:var(--font-aspekta);margin:0}

/* ---------- 3. SIDEBAR ---------- */
.side{background:var(--glass-bg-solid);border-inline-end:1px solid var(--stroke-1);scrollbar-width:thin;scrollbar-color:var(--fill-3) transparent;
  flex-direction:column;padding:12px 13px 14px;display:flex;overflow:hidden auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.side.mobile-open{position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:var(--z-drawer);width:280px;padding:18px 12px 14px;overflow-y:auto}
.ws-head{display:flex;align-items:center;gap:8px;padding:2px 4px 10px}
.ws-head img{height:16px}
.side-collapse-btn{margin-inline-start:auto}
.create-wrap{display:flex;padding:4px 0 12px}
.create-main{width:100%;flex:1;transition:background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.create-main:hover{box-shadow:var(--btn-glow-hover)}
.side-nav{flex-direction:column;flex:1;gap:3px;display:flex}
.nav-section{font-family:var(--font-mono);letter-spacing:var(--ls-overline-wide);text-transform:uppercase;color:var(--ink-3);flex:none;padding:8px 12px 6px;font-size:9px}
.nav-item{width:100%;height:var(--control-h-md);border-radius:var(--r-xs);color:var(--ink);font-family:var(--font-ui);font-size:var(--fs-body-lg);font-weight:var(--fw-medium);
  cursor:pointer;transition:background .14s var(--ease),color .14s var(--ease);text-align:start;white-space:nowrap;background:0 0;border:none;flex:none;
  align-items:center;gap:11px;padding:0 11px;text-decoration:none;display:flex;position:relative;overflow:hidden}
.nav-item:hover{background:var(--fill-1);color:var(--ink)}
.nav-item.active{background:var(--fill-2);color:var(--ink)}
.nav-item svg{width:16px;height:16px;stroke-width:1.7;color:var(--ink-2);transition:color .14s var(--ease),transform .16s var(--ease);flex:none}
.nav-item:hover svg{color:var(--ink);transform:translate(1px)}
.nav-item.active svg{color:var(--ink)}
.nav-item.soon{opacity:.45;cursor:not-allowed;pointer-events:none}
.nav-item.ent{font-weight:var(--fw-strong)}
.nav-badge{font-size:var(--fs-micro);font-weight:var(--fw-bold);font-family:var(--font-mono);background:var(--fill-2);color:var(--ink-3);border-radius:var(--r-full);text-align:center;font-variant-numeric:tabular-nums;min-width:20px;flex:none;margin-inline-start:auto;padding:2px 8px;transition:background .14s var(--ease),color .14s var(--ease)}
.nav-item.active .nav-badge{background:var(--fill-3);color:var(--ink)}
.account-card{margin-top:auto;border-radius:var(--r-sm);border:1px solid var(--stroke-1);background:var(--fill-1);padding:7px 9px}
.acct-trigger{cursor:pointer;text-align:start;background:0 0;border:none;align-items:center;gap:9px;width:100%;padding:0;display:flex;color:var(--ink)}
.acct-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.acct-id{min-width:0;flex:1}
.acct-name{font-size:var(--fs-body);font-weight:var(--fw-semibold);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.acct-sub{font-size:var(--fs-micro);color:var(--ink-3);margin-top:1px}
.acct-chev{color:var(--ink-3);flex:none}
/* collapsed */
.side.collapsed{padding:12px 2px 14px;overflow:visible}
.side.collapsed .nav-section{padding:7px 8px 9px;font-size:0}
.side.collapsed .nav-section::after{content:"";background:var(--stroke-1);height:1px;display:block}
.side.collapsed .nav-item{height:var(--control-h-touch);text-align:center;flex-direction:column;justify-content:center;gap:2px;padding:0 2px}
.side.collapsed .nav-item svg{width:20px;height:20px}
.side.collapsed .nav-label{font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:var(--ls-title);line-height:var(--lh-display);max-width:100%;text-overflow:ellipsis;overflow:hidden;pointer-events:none}
.side.collapsed .nav-badge,.side.collapsed .acct-id,.side.collapsed .acct-chev{display:none}
.side.collapsed .create-main{width:var(--control-h-chip);height:var(--control-h-chip);gap:0;padding:0}
.side.collapsed .create-main .nav-label{display:none}

/* ---------- 4. MAIN + TOPBAR + FRAME ---------- */
.usr-main{min-width:0;overflow-y:auto;overscroll-behavior:contain}
.main-top{z-index:var(--z-sticky);background:color-mix(in oklch,var(--glass-bg-solid) 86%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--stroke-1);transition:box-shadow .25s var(--ease);--chip-rest-bg:var(--fill-1);--chip-rest-stroke:transparent;padding-block:14px 12px;position:sticky;top:0}
.usr-shell[data-scrolled="true"] .main-top{box-shadow:0 8px 24px -16px rgba(var(--shadow-ink),.22)}
.main-top-inner{max-width:var(--frame-max);margin:0 auto;padding:0 var(--frame-gutter);display:flex;align-items:center;gap:8px;min-height:var(--control-h-lg)}
.top-spacer{flex:1}
.main-top .icon-btn{background:var(--chip-rest-bg);border:1px solid var(--chip-rest-stroke);width:36px;height:var(--control-h-md);border-radius:var(--r-xs);color:var(--ink-2)}
.main-top .icon-btn:hover{background:var(--fill-2);color:var(--ink)}
.main-top .top-account{border-radius:var(--r-full);background:0 0;border-color:transparent;padding:0}
.main-top .top-account .acct-avatar{width:100%;height:100%;transition:box-shadow var(--dur-1) var(--ease)}
.main-top .top-account:hover .acct-avatar{box-shadow:0 0 0 2px var(--stroke-2)}
.main-top .chip{height:var(--control-h-md);padding:0 14px}
.credits-pill{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-body);flex:none}
.credits-pill svg{color:var(--ink-3)}
.main-inner{max-width:var(--frame-max);padding:var(--frame-top) var(--frame-gutter) 64px;margin:0 auto}
.main-inner.narrow{max-width:var(--frame-max-narrow)}
.page-fade{animation:pageRise .32s var(--ease) both}
@keyframes pageRise{0%{opacity:0;transform:translateY(8px)}}
.kbd{background:var(--fill-2);border:1px solid var(--stroke-1);min-width:17px;height:17px;color:var(--ink-3);font-family:var(--font-mono);font-size:var(--fs-micro);border-radius:4px;justify-content:center;align-items:center;padding:0 4px;display:inline-flex}

/* ---------- 5. HEADINGS / SECTION / GROUP LABEL ---------- */
.page-head{align-items:flex-end;gap:14px;margin:0 0 4px;display:flex}
.page-head h1,.ph-title{font-size:var(--fs-h1);font-weight:var(--fw-bold);letter-spacing:var(--ls-display);line-height:var(--lh-display)}
.page-head .ph-sub{color:var(--ink-3);font-size:var(--fs-body);margin-top:2px;display:block}
.page-head .ph-actions{align-items:center;gap:8px;margin-inline-start:auto;display:flex}
.section-head{align-items:center;gap:12px;margin:30px 0 6px;display:flex}
.section-head h2{font-size:var(--fs-h3);font-weight:var(--fw-semibold);letter-spacing:var(--ls-title)}
.dash-home .section-head h2{font-size:var(--fs-h2)}
.section-head .sub{color:var(--ink-3);font-size:var(--fs-body)}
.section-head.has-controls{flex-wrap:wrap;row-gap:8px;margin-bottom:16px}
.section-head .head-cta{height:var(--control-h-sm);margin-inline-start:4px}
.section-head .head-right{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.dash-stack>section+section>.section-head{margin-block-start:56px}
.group-label{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-overline-wide);text-transform:uppercase;color:var(--ink-2);white-space:nowrap;align-items:center;gap:12px;margin:30px 0 14px;display:flex}
.group-label::after{content:"";background:var(--stroke-1);flex:1;height:1px}
.group-label .gl-n{color:var(--ink-3)}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-overline-wide);text-transform:uppercase;color:var(--ink-3);align-items:center;gap:6px;display:inline-flex}
.eyebrow::before{content:"";background:var(--ink-3);border-radius:1px;width:14px;height:1.5px}
.page-head,.section-head,.filter-row{--chip-rest-bg:var(--glass-bg-solid);--chip-rest-stroke:var(--stroke-2);--tab-track-fill:var(--glass-bg-solid);--tab-track-stroke:var(--stroke-2)}
.filter-row{flex-wrap:wrap;align-items:center;gap:12px;margin:18px 0 14px;display:flex}
.filter-row .spacer{flex:1}
.breadcrumb{font-size:var(--fs-hint);color:var(--ink-3);display:flex;gap:6px;margin-bottom:6px}
.breadcrumb a{color:inherit;text-decoration:none}.breadcrumb a:hover{color:var(--ink)}

/* ---------- 6. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;font-family:var(--font-ui);font-weight:var(--fw-strong);letter-spacing:var(--ls-title);
  touch-action:manipulation;transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
  border-radius:var(--r-xs);border:0;cursor:pointer;height:var(--control-h-lg);gap:8px;padding:0 16px;font-size:var(--fs-body-lg)}
.btn svg{pointer-events:none;flex:none;width:15px;height:15px}
.btn:disabled{pointer-events:none;opacity:.5}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--blue-800)}.dark .btn-primary:hover{background:var(--blue-500)}
.btn-primary.glow{box-shadow:var(--btn-glow)}.btn-primary.glow:hover{box-shadow:var(--btn-glow-hover)}
.btn-secondary{background:var(--fill-2);color:var(--ink)}
.btn-secondary:hover{background:var(--fill-3)}
.btn-outline{background:0 0;color:var(--ink-2);border:1px solid var(--stroke-2)}
.btn-outline:hover{background:var(--fill-1);color:var(--ink)}
.btn-ghost{background:0 0;color:var(--ink-2)}.btn-ghost:hover{background:var(--fill-2);color:var(--ink)}
.btn-danger{background:var(--danger-fill);color:#fff}.btn-danger:hover{filter:brightness(.92)}
.btn-dark{background:var(--chip-on-bg);color:var(--chip-on-ink)}
.btn-md{height:var(--control-h-md);gap:7px;padding:0 14px}
.btn-sm{height:var(--control-h-sm);gap:6px;padding:0 12px;font-size:var(--fs-body)}
.btn-sm svg{width:14px;height:14px}
.btn-xs{height:26px;gap:5px;padding:0 11px;font-size:var(--fs-hint)}
.btn-block{width:100%}
.upgrade-chip{background:linear-gradient(100deg,var(--upgrade-a) 0%,var(--upgrade-a) 36%,var(--upgrade-b) 64%,var(--upgrade-b) 100%);background-size:300% 100%;color:#fff;box-shadow:none;transition:filter .16s var(--ease);animation:3.2s ease-in-out infinite alternate upgradeShimmer}
@keyframes upgradeShimmer{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.upgrade-chip{animation:none}}
.icon-btn{width:32px;height:var(--control-h-sm);border-radius:var(--r-xs);color:var(--ink-2);cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),transform .1s var(--ease);background:0 0;border:none;flex:none;justify-content:center;align-items:center;display:inline-flex}
.icon-btn:hover{background:var(--fill-2);color:var(--ink)}
.icon-btn:active{transform:scale(.94)}
.icon-btn.on{background:var(--chip-on-bg);color:var(--chip-on-ink)}
.icon-btn svg{width:16px;height:16px}
.chip{height:var(--control-h-chip);border-radius:var(--r-xs);border:1px solid var(--chip-rest-stroke);background:var(--chip-rest-bg);color:var(--ink-2);font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-medium);
  cursor:pointer;white-space:nowrap;transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);align-items:center;gap:6px;padding:0 11px;text-decoration:none;display:inline-flex}
.chip:hover{background:var(--fill-2);color:var(--ink);border-color:var(--stroke-2)}
.chip.on,.chip.active{background:var(--chip-on-bg);color:var(--chip-on-ink);border-color:transparent}
.chip svg{width:13px;height:13px}

/* ---------- 7. TAB PILLS (segmented) ---------- */
.ui-tab-pills{border-radius:var(--r-sm);background:var(--tab-track-fill,var(--fill-1));border:1px solid var(--tab-track-stroke,var(--stroke-1));gap:4px;padding:4px;display:inline-flex;position:relative;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ui-tab-pills::-webkit-scrollbar{display:none}
.ui-tab-pills button{z-index:1;border-radius:var(--r-xs);height:32px;font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-strong);color:var(--tab-ink-3,var(--ink-3));cursor:pointer;white-space:nowrap;
  transition:color .16s var(--ease),opacity .16s var(--ease);background:0 0;border:none;align-items:center;gap:6px;padding:0 16px;display:inline-flex;position:relative}
.ui-tab-pills button:hover{color:var(--ink)}
.ui-tab-pills button.on{color:var(--tab-on-ink)}
.ui-tab-pills:not([data-thumb]) button.on{background:var(--tab-on-bg);box-shadow:var(--seg-on-shadow)}
.ui-tab-pills button svg{opacity:.65;width:14px;height:14px;transition:opacity .16s var(--ease)}
.ui-tab-pills button.on svg{opacity:1}
.ui-tab-pills-thumb{z-index:0;border-radius:var(--r-xs);background:var(--tab-on-bg);box-shadow:var(--seg-on-shadow);transition:transform .24s var(--ease),width .24s var(--ease);pointer-events:none;position:absolute;top:4px;bottom:4px;left:0}
.ui-tab-pills.pill button,.ui-tab-pills.pill .ui-tab-pills-thumb{border-radius:var(--r-full)}
.seg button{font-size:var(--fs-hint);height:24px;font-weight:var(--fw-medium);padding:0 12px}

/* ---------- 8. FIELDS ---------- */
.search-field{max-width:420px;height:var(--control-h-lg);border-radius:var(--r-xs);border:1px solid var(--control-edge);background:var(--field-bg);color:var(--ink-3);font-family:var(--font-ui);font-size:var(--fs-body-lg);cursor:text;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease);flex:1;align-items:center;gap:9px;padding:0 13px;display:flex}
.search-field:hover:not(:focus-within){border-color:var(--control-edge-strong)}
.search-field:focus-within{border-color:var(--accent);box-shadow:var(--focus-halo)}
.search-field input{color:var(--ink);font-family:var(--font-ui);font-size:var(--fs-body-lg);background:0 0;border:none;outline:none;flex:1;min-width:0}
.search-field input::placeholder{color:var(--ink-3);opacity:1}
.search-field svg{width:14px;height:14px;flex:none}
.search-field.sm{height:var(--control-h-sm);border-radius:var(--r-sm);padding:0 12px;gap:7px;max-width:220px}
.text-input,.input,.textarea,.select{height:var(--control-h-lg);border-radius:var(--r-xs);border:1px solid var(--control-edge);background:var(--field-bg);box-shadow:none;color:var(--ink);font-family:var(--font-ui);font-size:var(--fs-body-lg);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease);outline:none;padding:0 14px;width:100%;max-width:480px}
.textarea{height:auto;min-height:96px;padding:10px 14px;line-height:var(--lh-body);resize:vertical}
.select{appearance:none;background-image:var(--select-chevron);background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
.text-input::placeholder,.textarea::placeholder{color:var(--ink-3);opacity:1}
:is(.text-input,.input,.textarea,.select):hover:not(:disabled):not(:focus){border-color:var(--control-edge-strong)}
:is(.text-input,.input,.textarea,.select):focus{border-color:var(--accent);box-shadow:var(--focus-halo)}
:is(.text-input,.input,.textarea,.select)[aria-invalid="true"]{border-color:color-mix(in oklch,var(--danger) 55%,transparent)}
:is(.text-input,.input,.textarea,.select)[aria-invalid="true"]:focus{box-shadow:var(--focus-halo-geo) color-mix(in oklch,var(--danger) var(--focus-halo-mix),transparent)}
:is(.text-input,.input,.textarea,.select):disabled{opacity:.6;cursor:not-allowed}
.input-affix{width:100%;max-width:480px;height:var(--control-h-lg);border-radius:var(--r-xs);border:1px solid var(--control-edge);background:var(--field-bg);transition:border-color .15s var(--ease),box-shadow .15s var(--ease);align-items:center;display:flex;overflow:hidden}
.input-affix:hover:not(:focus-within){border-color:var(--control-edge-strong)}
.input-affix:focus-within{border-color:var(--accent);box-shadow:var(--focus-halo)}
.input-affix .prefix,.input-affix .suffix{color:var(--ink-3);font-size:var(--fs-body-lg);user-select:none;pointer-events:none;flex:none;padding-inline:13px 0}
.input-affix .suffix{padding-inline:0 13px}
.input-affix input{min-width:0;height:100%;color:var(--ink);font-family:var(--font-ui);font-size:var(--fs-body-lg);background:0 0;border:none;outline:none;flex:1;padding-inline:7px 13px}
.field{border-bottom:1px solid var(--stroke-1);flex-direction:column;gap:7px;padding:15px 0;display:flex}
.field:last-child{border-bottom:none;padding-bottom:2px}
.field-head{justify-content:space-between;align-items:center;gap:10px;display:flex}
.field-label{font-size:var(--fs-title);font-weight:var(--fw-strong);color:var(--ink)}
.field-hint{font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--ink-3)}
.field-hint .hint-ok{color:var(--ok);font-weight:var(--fw-strong)}.field-hint .hint-err{color:var(--danger);font-weight:var(--fw-strong)}
.modal-label,.form-label{font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-strong);line-height:var(--lh-body);color:var(--ink);margin:16px 0 8px;display:block}
.modal-label:first-child,.form-label:first-child{margin-top:0}
/* switch (theo DNA control: track fill-3, thumb trắng, on = accent) */
.switch{appearance:none;width:34px;height:20px;border-radius:var(--r-full);background:var(--fill-3);border:1px solid var(--stroke-1);position:relative;cursor:pointer;transition:background var(--dur-2) var(--ease);flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(var(--shadow-ink),.25);transition:transform var(--dur-2) var(--ease)}
.switch:checked{background:var(--accent);border-color:transparent}.switch:checked::after{transform:translateX(14px)}
.checkbox{appearance:none;width:16px;height:16px;border-radius:4px;border:1.5px solid var(--control-edge-strong);background:var(--glass-bg-solid);cursor:pointer;display:inline-grid;place-items:center;transition:all var(--dur-1) var(--ease)}
.checkbox:checked{background:var(--accent);border-color:var(--accent)}
.checkbox:checked::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.range{appearance:none;width:100%;height:4px;border-radius:var(--r-full);background:var(--fill-3);outline:none}
.range::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid var(--stroke-2);box-shadow:0 1px 3px rgba(var(--shadow-ink),.2);cursor:pointer}

/* ---------- 9. CARDS ---------- */
.hero{border-radius:var(--r-xl);background:radial-gradient(120% 160% at 0% 0%,color-mix(in oklch,var(--accent) 6%,transparent),transparent 60%),var(--glass-bg-solid);box-shadow:inset 0 0 0 1px var(--stroke-1);padding:40px 44px 36px;position:relative}
.hero h1{font-size:var(--fs-hero);font-weight:var(--fw-bold);letter-spacing:var(--ls-display);line-height:var(--lh-display);margin-bottom:4px}
.hero p{color:var(--ink-3);font-size:var(--fs-title);margin:0}
.hero .hero-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.hero-toggle{top:14px;border-radius:var(--r-xs);border:1px solid var(--stroke-1);width:28px;height:28px;color:var(--ink-3);cursor:pointer;background:0 0;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-inline-end:14px;transition:color .15s var(--ease),background .15s var(--ease)}
.hero-toggle:hover{color:var(--ink);background:var(--fill-1)}
.hero.hero-min{align-items:center;gap:12px;padding-block:14px;padding-inline:28px 20px;display:flex}
.hero.hero-min h1{font-size:var(--fs-h3);margin-bottom:0}
@media (max-width:1023px){.hero{padding:28px 28px 26px}.hero h1{font-size:var(--fs-h1)}}
@media (max-width:599px){.hero{border-radius:var(--r-lg);padding:18px 16px}.hero h1{font-size:var(--fs-h2)}.hero p{font-size:var(--fs-body-lg)}}

.proj-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;display:grid}
@media (max-width:599px){.proj-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}}
.proj-card{--proj-lift:3px;border-radius:var(--r-lg);border:1px solid var(--stroke-1);background:var(--glass-bg-solid);cursor:pointer;box-shadow:0 1px 2px rgba(var(--shadow-ink),.04);position:relative;overflow:hidden;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.proj-card:hover{transform:translateY(calc(-1 * var(--proj-lift)));border-color:var(--stroke-2);box-shadow:0 1px 2px rgba(var(--shadow-ink),.05),0 18px 44px -14px rgba(var(--shadow-ink),.2),0 0 0 1px var(--stroke-2)}
.proj-media{aspect-ratio:16/10.5;border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;position:relative;overflow:hidden;background:var(--fill-2)}
.proj-media img,.proj-media video{object-fit:cover;width:100%;height:100%;display:block;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.proj-card:hover .proj-media img{transform:scale(1.035)}
.proj-media::after{content:"";inset-inline:0;background:linear-gradient(transparent,rgba(var(--scrim-ink),.32));opacity:0;height:44%;transition:opacity .22s var(--ease);pointer-events:none;position:absolute;bottom:0}
.proj-card:hover .proj-media::after{opacity:1}
.proj-placeholder{background-color:var(--fill-2);background-image:radial-gradient(circle,color-mix(in oklch,var(--ink-3) 32%,transparent) 1px,transparent 1.5px);background-size:16px 16px;width:100%;height:100%;display:block}
.proj-type{top:10px;border-radius:var(--r-full);height:22px;font-size:var(--fs-caption);font-weight:var(--fw-strong);color:#fff;background:rgba(var(--scrim-ink),.4);letter-spacing:var(--ls-mono);align-items:center;gap:5px;padding:0 9px;display:inline-flex;position:absolute;inset-inline-start:10px;text-transform:uppercase}
.proj-body{grid-template-columns:minmax(0,1fr) auto;row-gap:7px;align-items:center;gap:10px;padding:13px 15px 14px;display:grid;overflow:hidden}
.proj-title{font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);color:var(--ink);letter-spacing:var(--ls-title);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.proj-meta{font-size:var(--fs-hint);color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums;align-items:center;gap:6px;margin-top:2px;display:flex;overflow:hidden}
.proj-open{border-radius:var(--r-xs);border:1px solid var(--stroke-2);height:26px;color:var(--ink-2);font-family:var(--font-ui);font-size:var(--fs-hint);font-weight:var(--fw-strong);cursor:pointer;white-space:nowrap;background:0 0;align-items:center;gap:5px;padding:0 11px;display:inline-flex;margin-inline-start:auto;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.proj-card:hover .proj-open{background:var(--chip-on-bg);color:var(--chip-on-ink);border-color:transparent}
.proj-menu-btn{width:var(--control-h-chip);height:var(--control-h-chip);border-radius:var(--r-xs);color:#fff;background:rgba(var(--scrim-ink),.45);cursor:pointer;opacity:0;border:none;display:inline-flex;align-items:center;justify-content:center;position:absolute;top:10px;inset-inline-end:10px;z-index:4;transition:opacity .15s var(--ease),background .15s var(--ease)}
.proj-card:hover .proj-menu-btn{opacity:1}.proj-menu-btn:hover{background:rgba(var(--scrim-ink),.65)}

.wf-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px;display:grid}
.wf-card{border-radius:var(--r-lg);border:1px solid var(--stroke-1);background:var(--glass-bg-solid);flex-direction:column;padding:14px;display:flex;position:relative;transition:border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease)}
.wf-card:hover{border-color:var(--stroke-2);box-shadow:0 1px 2px rgba(var(--shadow-ink),.05),0 18px 40px -14px rgba(var(--shadow-ink),.2);transform:translateY(-3px)}
.wf-thumb{aspect-ratio:16/8;border-radius:var(--r-sm);background:var(--fill-2);position:relative;overflow:hidden}
.wf-thumb img{object-fit:cover;width:100%;height:100%;display:block;transition:transform .5s var(--ease)}
.wf-card:hover .wf-thumb img{transform:scale(1.04)}
.wf-icon{border-radius:var(--r-sm);background:var(--fill-1);width:38px;height:38px;box-shadow:inset 0 0 0 1px var(--stroke-1);color:var(--ink-2);flex:none;justify-content:center;align-items:center;display:flex}
.wf-name{font-size:var(--fs-title);font-weight:var(--fw-semibold);letter-spacing:var(--ls-title);color:var(--ink);margin-top:12px}
.wf-sub{font-size:var(--fs-hint);line-height:var(--lh-relaxed);color:var(--ink-3);-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:3em;margin-top:5px;display:-webkit-box;overflow:hidden}
.wf-steps{flex-wrap:wrap;align-items:center;gap:6px;margin-top:13px;display:flex}
.wf-step{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--ink-3);background:var(--fill-1);border:1px solid var(--stroke-1);border-radius:var(--r-xs);white-space:nowrap;padding:4px 9px}
.wf-arrow{color:var(--ink-4);display:flex;align-items:center}
.wf-foot{align-items:center;gap:8px;margin-top:auto;padding-top:16px;display:flex}
.wf-meta{font-size:var(--fs-caption);color:var(--ink-3);font-variant-numeric:tabular-nums}
.wf-run{height:var(--control-h-sm);border-radius:var(--r-xs);border:1px solid var(--stroke-2);color:var(--ink-2);font-family:var(--font-ui);font-size:var(--fs-hint);font-weight:var(--fw-semibold);cursor:pointer;background:0 0;align-items:center;gap:6px;margin-inline-start:auto;padding:0 14px;display:inline-flex;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.wf-card:hover .wf-run{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.wf-badge{border-radius:var(--r-full);height:24px;font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:var(--ls-title);white-space:nowrap;color:var(--ok-fill-strong-ink);background:var(--ok-fill-strong);align-items:center;gap:5px;padding-inline:7px 10px;display:inline-flex}
.wf-vis,.wf-uses,.media-pill{border-radius:var(--r-full);background:rgba(var(--scrim-ink),.55);backdrop-filter:blur(8px);color:#fff;height:21px;font-size:var(--fs-micro);font-weight:var(--fw-semibold);align-items:center;gap:5px;padding:0 9px;display:inline-flex;position:absolute;top:8px;inset-inline-start:8px;z-index:2}
.wf-new,.dashed-new{border:1.5px dashed var(--stroke-2);border-radius:var(--r-lg);min-height:150px;color:var(--ink-3);cursor:pointer;font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-strong);background:0 0;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease)}
.wf-new:hover,.dashed-new:hover{border-color:color-mix(in oklch,var(--accent) 45%,transparent);color:var(--accent-text);background:color-mix(in oklch,var(--accent) 4%,transparent)}

.tool-card{border-radius:var(--r-md);background:color-mix(in oklch,var(--glass-bg-solid) 72%,transparent);backdrop-filter:blur(8px);cursor:pointer;font-family:var(--font-ui);text-align:start;box-shadow:0 1px 2px rgba(var(--shadow-ink),.04);border:1px solid transparent;align-items:center;gap:12px;padding:10px 12px;display:flex;position:relative;transition:background .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease)}
.tool-card:hover{background:var(--glass-bg-solid);box-shadow:0 10px 28px -10px rgba(var(--shadow-ink),.16),0 0 0 1px var(--stroke-1);transform:translateY(-2px)}
.tool-card .tc-thumb{border-radius:var(--r-sm);object-fit:cover;border:1px solid var(--stroke-1);flex:none;width:46px;height:46px}
.tool-card .tc-name{font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);color:var(--ink);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.tool-card .tc-sub{font-size:var(--fs-caption);color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;overflow:hidden}

.folder-card{border-radius:var(--r-md);border:1px solid var(--stroke-1);background:var(--glass-bg-solid);cursor:pointer;font-family:var(--font-ui);text-align:start;min-width:0;align-items:center;gap:11px;padding:11px 13px;display:flex;transition:border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease)}
.folder-card:hover{border-color:var(--stroke-2);box-shadow:0 10px 26px -10px rgba(var(--shadow-ink),.16);transform:translateY(-2px)}
.folder-card .fc-icon{border-radius:var(--r-sm);background:var(--fill-1);width:36px;height:36px;box-shadow:inset 0 0 0 1px var(--stroke-1);color:var(--ink-2);flex:none;justify-content:center;align-items:center;display:flex}
.folder-card .fc-name{font-size:var(--fs-body);font-weight:var(--fw-semibold);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.folder-card .fc-meta{font-size:var(--fs-caption);color:var(--ink-3);font-family:var(--font-mono);margin-top:2px}
.folder-card.new{border-style:dashed;border-color:var(--stroke-2);color:var(--ink-3);font-size:var(--fs-body);font-weight:var(--fw-strong);background:0 0;justify-content:center}
.folder-card.new:hover{border-color:color-mix(in oklch,var(--accent) 45%,transparent);color:var(--accent-text);background:color-mix(in oklch,var(--accent) 4%,transparent);box-shadow:none}
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}

.ren-grid{columns:3 220px;column-gap:14px}
.ren-tile{break-inside:avoid;border-radius:var(--r-md);border:1px solid var(--stroke-1);background:var(--fill-2);cursor:pointer;margin-bottom:14px;display:block;position:relative;overflow:hidden}
.ren-tile img{width:100%;display:block}
.ren-tile .rt-scrim{background:linear-gradient(transparent 45%,rgba(var(--scrim-ink),.66));opacity:0;transition:opacity .2s var(--ease);pointer-events:none;position:absolute;inset:0}
.ren-tile:hover .rt-scrim,.ren-tile.sel .rt-scrim{opacity:1}
.ren-tile .rt-meta{inset-inline:12px;color:#fff;opacity:0;transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none;position:absolute;bottom:10px;transform:translateY(4px)}
.ren-tile:hover .rt-meta{opacity:1;transform:none}
.ren-tile .rt-name{font-size:var(--fs-hint);font-weight:var(--fw-semibold);white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}
.ren-tile .rt-proj{font-size:var(--fs-caption);opacity:.75;display:block;margin-top:1px}
.ren-tile .rt-actions{top:9px;opacity:0;transition:opacity .18s var(--ease),transform .18s var(--ease);gap:4px;display:flex;position:absolute;inset-inline-end:9px;transform:translateY(-3px)}
.ren-tile:hover .rt-actions{opacity:1;transform:none}
.ren-tile .rt-actions button{width:var(--control-h-chip);height:var(--control-h-chip);border-radius:var(--r-xs);background:rgba(var(--scrim-ink),.55);backdrop-filter:blur(8px);color:#fff;cursor:pointer;border:none;justify-content:center;align-items:center;display:flex;transition:background .15s var(--ease)}
.ren-tile .rt-actions button:hover{background:rgba(var(--scrim-ink),.85)}
.ren-tile .rt-check{top:9px;inset-inline-start:9px;border-radius:var(--r-xs);background:rgba(var(--scrim-ink),.35);backdrop-filter:blur(6px);color:#fff;cursor:pointer;opacity:0;width:22px;height:22px;border:1.5px solid #ffffffd9;justify-content:center;align-items:center;display:flex;position:absolute;transition:opacity .18s var(--ease),background .18s var(--ease)}
.ren-tile:hover .rt-check{opacity:1}
.ren-tile.sel .rt-check{opacity:1;background:var(--accent);border-color:var(--accent)}
.ren-tile.sel{outline:2px solid var(--accent);outline-offset:2px}

.set-card{border-radius:var(--r-lg);border:1px solid var(--stroke-1);background:var(--glass-bg-solid);padding:28px}
.set-card h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold);letter-spacing:var(--ls-title);color:var(--ink)}
.set-card .sc-sub{font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--ink-3);margin:6px 0 0}
.set-card.danger{border-color:color-mix(in oklch,var(--danger) 25%,transparent)}
.set-card.compact{padding:18px 20px}
.stat-label{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--ink-3)}
.stat-num{font-family:var(--font-aspekta);font-size:var(--fs-h2);font-weight:var(--fw-bold);letter-spacing:var(--ls-display);font-variant-numeric:tabular-nums;margin-top:6px}
.stat-num small{font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--ink-3);margin-left:4px}
.stat-row{display:flex;justify-content:space-between;font-size:var(--fs-body);color:var(--ink-2);padding:9px 0;border-top:1px solid var(--stroke-1)}
.stat-row b{color:var(--ink);font-weight:var(--fw-strong);font-variant-numeric:tabular-nums}

.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.style-card{cursor:pointer;border-radius:var(--r-sm);aspect-ratio:1/1.05;outline:1.5px solid var(--stroke-1);outline-offset:-1.5px;background:0 0;border:none;padding:0;position:relative;overflow:hidden;transition:outline-color .15s var(--ease),transform .15s var(--ease)}
.style-card img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;border-radius:var(--r-sm)}
.style-card .style-name{font-family:var(--font-ui);font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:var(--ls-mono);color:#fff;text-align:start;background:linear-gradient(transparent,rgba(var(--scrim-ink),.72));inset-inline:0;padding:14px 7px 5px;position:absolute;bottom:0}
.style-card:hover{outline-color:var(--stroke-2);transform:translateY(-1px)}
.style-card.on{outline:2px solid var(--accent);outline-offset:-2px}
.style-card .style-check{background:var(--accent);color:#fff;opacity:0;width:17px;height:17px;top:5px;inset-inline-end:5px;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;transform:scale(.6);transition:all .18s var(--ease)}
.style-card.on .style-check{opacity:1;transform:scale(1)}

/* ---------- 10. TABLE / EMPTY / SKELETON ---------- */
.tbl{border-collapse:collapse;width:100%;min-width:480px}
.tbl th{text-align:start;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-overline);text-transform:uppercase;font-weight:var(--fw-medium);color:var(--ink-3);border-bottom:1px solid var(--stroke-1);padding:0 12px 9px}
.tbl td{font-size:var(--fs-body);color:var(--ink-2);border-bottom:1px solid var(--stroke-1);font-variant-numeric:tabular-nums;padding:11px 12px}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .12s var(--ease)}.tbl tbody tr:hover{background:var(--fill-1)}
.tbl .td-strong{color:var(--ink);font-weight:var(--fw-strong)}
.tbl .tbl-dl{color:var(--accent-text);font-size:var(--fs-hint);font-weight:var(--fw-semibold);cursor:pointer;background:0 0;border:none;display:inline-flex;gap:5px;align-items:center;padding:0}
.tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--stroke-1);background:var(--glass-bg-solid);padding:14px 10px 4px}
.empty{text-align:center;padding:56px 20px;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty .empty-ic{width:40px;height:40px;border-radius:var(--r-sm);background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--stroke-1);display:grid;place-items:center;color:var(--ink-2);margin-bottom:6px}
.empty h3{font-size:var(--fs-title);font-weight:var(--fw-semibold)}
.empty p{font-size:var(--fs-body);color:var(--ink-3);max-width:34ch;line-height:var(--lh-relaxed);margin:0}
.empty .btn{margin-top:8px}
.skel{background:var(--fill-2);animation:pulse 1.4s var(--ease) infinite;border-radius:6px}
@keyframes pulse{50%{opacity:.5}}
.proj-skel-card{border-radius:var(--r-lg);border:1px solid var(--stroke-1);background:var(--glass-bg-solid);overflow:hidden}
.proj-skel-media{aspect-ratio:16/10.5;background:var(--fill-2);animation:pulse 1.4s var(--ease) infinite}

/* ---------- 11. PILLS / BADGES / STATUS ---------- */
.status-pill{border-radius:var(--r-full);height:22px;font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:#fff;background:rgba(var(--scrim-ink),.72);backdrop-filter:blur(8px);align-items:center;gap:6px;padding:0 10px;display:inline-flex}
.proj-media .status-pill{position:absolute;top:10px;inset-inline-start:10px;z-index:3}
.status-pill .pulse{background:var(--blue-200);border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite statusPulse}
@keyframes statusPulse{50%{opacity:.4;transform:scale(.8)}}
.badge{border-radius:var(--r-full);height:20px;font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:var(--ls-title);align-items:center;gap:4px;padding:0 8px;display:inline-flex;background:var(--fill-2);color:var(--ink-2)}
.badge.new{background:var(--blue-100);color:var(--blue-800)}
.badge.ok{background:color-mix(in oklch,var(--ok) 12%,transparent);color:var(--ok)}
.badge.warn{background:color-mix(in oklch,var(--warn) 14%,transparent);color:var(--warn)}
.badge.danger{background:color-mix(in oklch,var(--danger) 11%,transparent);color:var(--danger)}
.badge.beta{background:var(--fill-1);border:1px solid var(--stroke-1);color:var(--ink-3);font-family:var(--font-mono);letter-spacing:var(--ls-overline);text-transform:uppercase}

/* ---------- 12. TOOLTIP / TOAST / MODAL / MENU ---------- */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);top:calc(100% + 6px);left:50%;transform:translate(-50%,-3px);z-index:var(--z-tip);border-radius:var(--r-xs);background:var(--tip-bg);color:var(--tip-ink);font-family:var(--font-ui);font-size:var(--fs-caption);font-weight:var(--fw-semibold);line-height:var(--lh-body);white-space:nowrap;box-shadow:0 6px 18px -6px rgba(var(--scrim-ink),.5);opacity:0;padding:5px 9px;position:absolute;pointer-events:none;transition:opacity .13s var(--ease),transform .13s var(--ease)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0);transition-delay:.15s}
.toast-host{z-index:var(--z-toast);pointer-events:none;flex-direction:column-reverse;align-items:center;gap:8px;max-width:min(440px,100vw - 24px);padding:0 16px;display:flex;position:fixed;bottom:24px;left:50%;transform:translateX(-50%)}
.toast{pointer-events:auto;background:var(--tip-bg-light);min-height:38px;color:var(--tip-ink-light);font-family:var(--font-aspekta);font-size:12.5px;font-weight:var(--fw-strong);box-shadow:0 10px 30px -8px rgba(var(--scrim-ink),.45),0 0 0 1px #ffffff0f;animation:appToastIn .22s var(--ease);border-radius:12px;align-items:center;gap:9px;padding:8px 8px 8px 12px;line-height:1.45;display:flex}
@keyframes appToastIn{0%{opacity:0;transform:translateY(8px) scale(.98)}}
.toast-ic{color:#fff;background:var(--ok-fill);border-radius:50%;flex:none;place-items:center;width:17px;height:17px;display:grid}
.toast--error .toast-ic{background:var(--danger-fill)}
.toast-x{border-radius:var(--r-xs);width:22px;height:22px;color:color-mix(in srgb,var(--tip-ink-light) 55%,transparent);cursor:pointer;background:0 0;border:none;display:grid;place-items:center;transition:background .14s,color .14s}
.toast-x:hover{color:var(--tip-ink-light);background:rgba(255,255,255,.1)}
.modal-scrim{z-index:var(--z-modal);background:var(--scrim-overlay);backdrop-filter:blur(var(--scrim-blur));animation:scrimIn .18s var(--ease);justify-content:center;align-items:flex-start;padding:12vh 20px 20px;display:flex;position:fixed;inset:0}
@keyframes scrimIn{0%{opacity:0}}
.modal{border-radius:var(--r-lg);border:1px solid var(--stroke-1);background:var(--glass-bg-solid);width:540px;max-width:100%;box-shadow:0 40px 90px -30px var(--scrim);animation:modalIn .22s var(--ease);overscroll-behavior:contain;overflow:hidden}
@keyframes modalIn{0%{opacity:0;transform:translateY(10px) scale(.985)}}
.modal-head{align-items:center;gap:10px;padding:18px 22px 0;display:flex}
.modal-head h3{font-size:var(--fs-title);font-weight:var(--fw-bold);letter-spacing:var(--ls-display)}
.modal-head .mh-sub{font-size:var(--fs-hint);color:var(--ink-3);margin-top:2px}
.modal-head .icon-btn{margin-inline-start:auto}
.modal-body{padding:16px 22px 4px}
.modal-foot{align-items:center;gap:10px;padding:16px 22px 20px;display:flex;justify-content:flex-end}
.modal-confirm-hero{text-align:center;flex-direction:column;align-items:center;padding:28px 26px 0;display:flex}
.modal-confirm-icon{border-radius:var(--r-full);width:48px;height:48px;color:var(--danger);background:color-mix(in oklch,var(--danger) 11%,transparent);place-items:center;display:grid}
.modal-confirm-hero h3{font-size:var(--fs-title);font-weight:var(--fw-bold);letter-spacing:var(--ls-display);margin-top:14px}
.modal-confirm-hero p{max-width:44ch;font-size:var(--fs-body);color:var(--ink-2);margin-top:8px;line-height:1.55}
.modal-foot-center{padding-top:22px}.modal-foot-center>*{flex:1 1 0}
.media-modal{width:min(760px,100%);border-radius:var(--r-xl);padding:0}
.media-modal .mm-media{aspect-ratio:16/9;background:var(--fill-2);position:relative;overflow:hidden;border-radius:var(--r-xl) var(--r-xl) 0 0}
.media-modal .mm-body{padding:18px 22px 22px}
.media-modal .mm-eyebrow{font-size:var(--fs-hint);font-weight:var(--fw-semibold);color:var(--accent-text);margin-bottom:6px}
.media-modal h3{font-size:var(--fs-h3);font-weight:var(--fw-bold);letter-spacing:var(--ls-display)}
.media-modal p{font-size:var(--fs-body);color:var(--ink-3);margin:6px 0 16px;line-height:var(--lh-relaxed)}
.media-modal .mm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.menu{min-width:200px;border-radius:var(--r-md);border:1px solid var(--glass-border);background:var(--glass-bg-solid);box-shadow:var(--glass-shadow);padding:5px;animation:roleMenuIn .16s var(--ease)}
@keyframes roleMenuIn{0%{opacity:0;transform:translateY(-5px)}}
.menu-item{height:var(--control-h-sm);border-radius:var(--r-xs);padding:0 10px;font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--ink);display:flex;align-items:center;gap:9px;cursor:pointer;background:0 0;border:none;width:100%;text-align:start}
.menu-item:hover{background:var(--fill-1)}
.menu-item svg{width:14px;height:14px;color:var(--ink-2)}
.menu-item.danger{color:var(--danger)}
.menu-sep{height:1px;background:var(--stroke-1);margin:4px 0}


/* Studio shell dùng chung token semantic với usr-shell */
.studio-shell{--font-ui:var(--font-inter),system-ui,-apple-system,sans-serif;--font-mono:var(--font-mono-stack);
  --accent:var(--blue-700);--accent-ink:#fff;--accent-text:var(--blue-700);--upgrade-a:var(--blue-700);--upgrade-b:var(--upgrade-purple);
  --canvas-bg:var(--surface-page-light);--page-bg:var(--surface-page-light);--glass-bg-solid:var(--surface-panel-light);
  --glass-border:var(--glass-border-light);--glass-shadow:var(--glass-shadow-light);--seg-on-shadow:var(--seg-on-shadow-light);
  --btn-glow:var(--btn-glow-geo) color-mix(in oklch,var(--accent) var(--btn-glow-mix),transparent);
  --btn-glow-hover:var(--btn-glow-geo-hover) color-mix(in oklch,var(--accent) var(--btn-glow-mix-hover),transparent);
  --btn-glow-active:var(--btn-glow-geo-active) color-mix(in oklch,var(--accent) var(--btn-glow-mix-active),transparent);
  --focus-halo:var(--focus-halo-geo) color-mix(in oklch,var(--accent) var(--focus-halo-mix),transparent);
  --ink:var(--ink-light);--ink-2:var(--ink-2-light);--ink-3:var(--ink-3-light);--ink-4:var(--ink-4-light);
  --fill-1:var(--fill-1-light);--fill-2:var(--fill-2-light);--fill-3:var(--fill-3-light);--stroke-1:var(--stroke-1-light);--stroke-2:var(--stroke-2-light);
  --chip-on-bg:var(--ink-light);--chip-on-ink:var(--chip-on-ink-light);--chip-rest-bg:var(--fill-1);--chip-rest-stroke:var(--stroke-1);
  --tab-on-bg:var(--chip-on-bg);--tab-on-ink:var(--chip-on-ink);--sel-bg:var(--ink);--sel-ink:#fff;
  --ok:var(--ok-light);--warn:var(--warn-light);--danger:var(--danger-light);--sale:var(--sale-light);
  --tip-bg:var(--tip-bg-light);--tip-ink:var(--tip-ink-light);--scrim:#f0f1f38c;
  --frame-max:1240px;--frame-max-narrow:780px;--frame-gutter:40px;--frame-top:24px;}
.dark .studio-shell{--canvas-bg:var(--surface-page-dark);--page-bg:var(--surface-page-dark);--glass-bg-solid:var(--surface-panel-dark);
  --glass-border:var(--glass-border-dark);--glass-shadow:var(--glass-shadow-dark);--seg-on-shadow:var(--seg-on-shadow-dark);
  --ink:var(--ink-dark);--ink-2:var(--ink-2-dark);--ink-3:var(--ink-3-dark);--ink-4:var(--ink-4-dark);
  --accent:var(--blue-fill-dark);--accent-text:var(--blue-300);--upgrade-a:var(--blue-fill-dark);
  --fill-1:var(--fill-1-dark);--fill-2:var(--fill-2-dark);--fill-3:var(--fill-3-dark);--stroke-1:var(--stroke-1-dark);--stroke-2:var(--stroke-2-dark);
  --chip-on-bg:var(--ink-dark);--chip-on-ink:var(--chip-on-ink-dark);--sel-bg:var(--blue-fill-dark);
  --ok:var(--ok-dark);--warn:var(--warn-dark);--danger:var(--danger-dark);--sale:var(--sale-dark);
  --tip-bg:var(--tip-bg-dark);--tip-ink:var(--tip-ink-dark);--scrim:rgba(var(--scrim-ink),.5)}
/* ---------- 13. STUDIO SHELL (canvas + glass panels) ---------- */
.studio-shell{position:fixed;inset:0;background:var(--surface-canvas-light);color:var(--ink);font-family:var(--font-ui);font-size:var(--fs-body)}
.dark .studio-shell{background:var(--surface-canvas-dark)}
.studio-shell .canvas-dots{background-image:radial-gradient(circle,rgba(var(--shadow-ink),.1) 1px,transparent 1.5px);background-size:18px 18px}
.glass{background:color-mix(in oklch,var(--glass-bg-solid) 92%,transparent);backdrop-filter:blur(14px) saturate(1.4);border:1px solid var(--glass-border);border-radius:var(--r-md);box-shadow:var(--glass-shadow)}
.studio-shell .top-bar{position:absolute;top:16px;inset-inline:16px;height:42px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.studio-shell .settings-panel{position:absolute;top:76px;inset-inline-start:16px;bottom:16px;width:300px;overflow:hidden;display:flex;flex-direction:column}
.studio-shell .settings-head{height:40px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--stroke-1);font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.studio-shell .settings-body{overflow-y:auto;flex:1}
.settings-section{border-bottom:1px solid var(--stroke-1);padding:16px 16px 18px}
.settings-section:last-child{border-bottom:none}
.ss-label{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.studio-shell .dock{position:absolute;top:76px;inset-inline-end:16px;width:48px;padding:5px;display:flex;flex-direction:column;gap:4px}
.studio-shell .dock .icon-btn{width:38px;height:38px}
.studio-shell .hist-side{position:absolute;top:76px;inset-inline-end:72px;bottom:16px;width:128px;padding:8px;overflow-y:auto}
.studio-shell .prompt-bar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:min(577px,calc(100% - 360px))}
.studio-shell .prompt-box{border-radius:var(--r-lg);padding:12px 12px 10px;display:flex;flex-direction:column;gap:10px}
.studio-shell .prompt-box textarea{border:none;background:0 0;resize:none;min-height:48px;font-family:var(--font-ui);font-size:var(--fs-body-lg);color:var(--ink);outline:none;width:100%}
.studio-shell .prompt-foot{display:flex;align-items:center;gap:6px}
.studio-shell .zoom-hud{position:absolute;bottom:16px;inset-inline-end:16px;height:44px;display:flex;align-items:center;gap:4px;padding:0 6px}
.engine-chip{height:var(--control-h-chip);border-radius:var(--r-xs);border:1px solid var(--stroke-1);background:var(--fill-1);font-size:var(--fs-hint);font-weight:var(--fw-strong);color:var(--ink-2);padding:0 10px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.engine-chip.on{background:var(--chip-on-bg);color:var(--chip-on-ink);border-color:transparent}
.engine-chip.blocked{opacity:.4;cursor:not-allowed}
.upload-slot{position:relative;aspect-ratio:4/3;border-radius:var(--r-sm);border:1.5px dashed var(--stroke-2);background:var(--fill-1);overflow:hidden;display:grid;place-items:center;cursor:pointer}
.upload-slot--filled{border-style:solid;border-color:var(--stroke-1)}
.upload-slot__img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}
.upload-slot__empty{color:var(--ink-3);flex-direction:column;align-items:center;gap:4px;font-size:9px;display:flex}
.upload-slot__badge{font-size:9px;font-weight:var(--fw-bold);color:#ffffffd9;inset-inline-start:4px;background:#0000008c;border-radius:3px;padding:1px 5px;position:absolute;bottom:4px}
.upload-slot__clear{color:#ffffffd9;cursor:pointer;opacity:0;top:3px;inset-inline-end:3px;background:#0000008c;border:none;border-radius:50%;width:18px;height:18px;display:grid;place-items:center;position:absolute;transition:opacity .15s}
.upload-slot:hover .upload-slot__clear{opacity:1}
.upload-slot__spinner{border:2px solid var(--stroke-2);border-top-color:var(--accent);border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 14. PRODUCT HERO CARDS (Explore) ---------- */
.product-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:860px){.product-pair{grid-template-columns:1fr}}
.product-card{border-radius:var(--r-lg);border:1px solid var(--stroke-1);background:var(--glass-bg-solid);padding:8px;display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:stretch}
.product-card .pc-art{border-radius:var(--r-md);min-height:150px;display:grid;place-items:center;color:#fff;font-family:var(--font-aspekta);font-size:30px;font-weight:var(--fw-bold);letter-spacing:var(--ls-display)}
.product-card .pc-art.studio{background:var(--product-studio-grad)}
.product-card .pc-art.flow{background:var(--product-flow-grad)}
.product-card .pc-body{padding:8px 10px 10px 0;display:flex;flex-direction:column;gap:6px}
.product-card h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold);letter-spacing:var(--ls-title);display:flex;align-items:center;gap:8px}
.product-card p{font-size:var(--fs-body);color:var(--ink-3);line-height:var(--lh-relaxed);margin:0}
.product-card ul{list-style:none;padding:0;margin:4px 0;display:flex;flex-direction:column;gap:3px}
.product-card li{font-size:var(--fs-hint);color:var(--ink-2);display:flex;gap:7px;align-items:center}
.product-card li::before{content:"✓";color:var(--ok);font-weight:var(--fw-bold)}
.product-card .btn{align-self:flex-start;margin-top:auto}
.tc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.tc-big{border-radius:var(--r-lg);border:1px solid var(--stroke-1);background:var(--glass-bg-solid);overflow:hidden;display:flex;flex-direction:column}
.tc-big img{aspect-ratio:16/10;object-fit:cover;width:100%;display:block}
.tc-big .tcb-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.tc-big h4{font-size:var(--fs-body-lg);font-weight:var(--fw-semibold)}
.tc-big p{font-size:var(--fs-hint);color:var(--ink-3);line-height:var(--lh-relaxed);margin:0;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
.tc-big .btn{align-self:flex-start;margin-top:8px}

/* ---------- 15. MOBILE TAB BAR ---------- */
.mtab-bar{display:none;position:fixed;bottom:0;inset-inline:0;z-index:var(--z-sticky);background:color-mix(in oklch,var(--glass-bg-solid) 92%,transparent);backdrop-filter:blur(14px) saturate(1.4);border-top:1px solid var(--stroke-1);padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px));grid-template-columns:repeat(5,1fr)}
@media (max-width:1023px){.mtab-bar{display:grid}.main-inner{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}}
.mtab{border-radius:var(--r-xs);min-height:48px;color:var(--ink-3);font-family:var(--font-ui);font-size:var(--fs-micro);font-weight:var(--fw-strong);letter-spacing:var(--ls-mono);cursor:pointer;background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:3px;text-decoration:none;display:flex;transition:color .14s var(--ease)}
.mtab.active{color:var(--ink)}
.mtab svg{width:20px;height:20px;transition:transform .12s var(--ease)}.mtab:active svg{transform:scale(.88)}

/* ---------- 16. TOUCH / COARSE ---------- */
@media (pointer:coarse){.usr-shell .nav-item{min-height:44px}.usr-shell .icon-btn,.usr-shell .main-top .icon-btn{width:var(--control-h-touch);height:var(--control-h-touch)}.usr-shell .chip{min-height:var(--control-h-touch)}.usr-shell .main-top .search-field{height:var(--control-h-touch)}.ui-tab-pills button{min-height:44px}.usr-shell .text-input,.usr-shell .input-affix{min-height:var(--control-h-touch);font-size:16px}}