/* =========================================================================
   BoardUI tokens — ported from styles/theme.css (light) + .dark overrides
   ========================================================================= */
:root{
  /* color primitives (Tailwind v4 OKLCH defaults as hex; the four BoardUI
     intentional overrides from @theme) */
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-300:#93c5fd;
  --blue-400:#3392ff; --blue-500:#2563eb; --blue-600:#1d4ed8; --blue-700:#1e40af;
  --blue-800:#1e3a8a; --blue-900:#172554; --blue-950:#0a0f2c;
  --neutral-50:#fafafa; --neutral-100:#f7f7f7; --neutral-200:#ebebeb;
  --neutral-300:#d4d4d4; --neutral-400:#a3a3a3; --neutral-500:#737373;
  --neutral-600:#525252; --neutral-700:#404040; --neutral-800:#262626;
  --neutral-900:#171717; --neutral-925:#121212; --neutral-950:#0a0a0a;
  --red-300:#fca5a5; --red-400:#f87171; --red-500:#ef4444; --red-600:#dc2626;

  /* accent ramp = blue */
  --accent-50:var(--blue-50); --accent-100:var(--blue-100); --accent-200:var(--blue-200);
  --accent-300:var(--blue-300); --accent-400:var(--blue-400); --accent-500:var(--blue-500);
  --accent-600:var(--blue-600); --accent-700:var(--blue-700); --accent-800:var(--blue-800);
  --accent-900:var(--blue-900); --accent-950:var(--blue-950);

  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --radius-md:6px; --radius-lg:8px; --radius-2lg:10px; --radius-xl:12px;
  --radius-2-5xl:20px; --radius-3xl:24px;

  --shadow-xs:0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.06),0 1px 3px 0 rgb(0 0 0 / 0.10);
  --shadow-card:0 1px 1px 0 rgb(0 0 0 / 0.05);
  --shadow-sidebar:0 1px 0 0 rgb(0 0 0 / 0.0196),0 1px 12px 0 rgb(0 0 0 / 0.0588),0 0 1px 0 rgb(0 0 0 / 0.3216);
  --shadow-dropdown:0 1px 1px 0 rgb(0 0 0 / 0.04),0 4px 4px 0 rgb(0 0 0 / 0.02);
  --shadow-nav-selected:0 0 0 1px var(--accent-500),inset 0 1px 0 0 rgb(255 255 255 / 0.251);

  /* semantic tokens — light */
  --bg-full:var(--neutral-50);
  --bg-primary:var(--neutral-50);
  --bg-primary-hover:var(--neutral-100);
  --bg-primary-active:var(--neutral-200);
  --bg-secondary:var(--neutral-100);
  --bg-secondary-hover:var(--neutral-200);
  --bg-tertiary:var(--neutral-200);
  --bg-tertiary-hover:var(--neutral-300);
  --text-primary:var(--neutral-950);
  --text-secondary:var(--neutral-500);
  --text-tertiary:var(--neutral-400);
  --text-error:var(--red-500);
  --icon-primary:var(--neutral-950);
  --icon-secondary:var(--neutral-500);
  --icon-tertiary:var(--neutral-400);
  --border-button:var(--neutral-200);
  --border-button-hover:var(--neutral-300);
  --border-button-active:var(--neutral-400);
  --separator:var(--neutral-200);
  --focus-ring:var(--accent-500);
  --composer-add-bg:var(--neutral-100);
  --composer-add-hover:var(--neutral-200);
  --theme-toggle-bg:var(--neutral-200);
  --theme-toggle-sel:var(--neutral-50);
  --kbd-bg:var(--neutral-300);
  --kbd-fg:var(--neutral-500);
  --badge-neutral-bg:var(--neutral-200);
  --grad-primary:linear-gradient(180deg,var(--accent-500) 0%,var(--accent-600) 100%);
  --grad-primary-hover:linear-gradient(180deg,var(--accent-400) 0%,var(--accent-500) 100%);

  /* chart + status tokens (light, from theme.css) */
  --chart-track:var(--neutral-200);
  --chart-cursor:var(--neutral-300);
  --chart-neutral:var(--neutral-300);
  --chart-2-active:#84cc16;   /* lime-500 (revenue: this year) */
  --chart-9-active:#6366f1;   /* indigo-500 (orders: this year) */
  --bg-inner:var(--neutral-50);
  --border-table:var(--neutral-200);
  --stat-icon-bg:var(--neutral-50);
  --status-lime-bg:#d9f99d;   --status-lime-tx:#3f6212;
  --status-yellow-bg:#fef08a; --status-yellow-tx:#854d0e;
  --status-rose-bg:#fecdd3;   --status-rose-tx:#9f1239;
  --status-cyan-bg:#a5f3fc;   --status-cyan-tx:#155e75;
  --status-gray-bg:var(--neutral-200); --status-gray-tx:var(--neutral-600);
  --tile-blue:linear-gradient(180deg,#3b82f6,#2563eb);
  --tile-orange:linear-gradient(180deg,#fb923c,#f97316);
  --tile-purple:linear-gradient(180deg,#a855f7,#9333ea);
  --tile-pink:linear-gradient(180deg,#ec4899,#db2777);
  --tile-sky:linear-gradient(180deg,#38bdf8,#0ea5e9);
  --tile-emerald:linear-gradient(180deg,#10b981,#059669);

  color-scheme:light;
}
.dark{
  --bg-full:var(--neutral-925);
  --bg-primary:var(--neutral-800);
  --bg-primary-hover:color-mix(in srgb,var(--neutral-700) 60%,transparent);
  --bg-primary-active:var(--neutral-800);
  --bg-secondary:var(--neutral-900);
  --bg-secondary-hover:var(--neutral-800);
  --bg-tertiary:var(--neutral-800);
  --bg-tertiary-hover:var(--neutral-700);
  --text-primary:var(--neutral-50);
  --text-secondary:var(--neutral-500);
  --text-tertiary:var(--neutral-600);
  --text-error:var(--red-400);
  --icon-primary:var(--neutral-50);
  --icon-secondary:var(--neutral-500);
  --icon-tertiary:var(--neutral-600);
  --border-button:var(--neutral-700);
  --border-button-hover:var(--neutral-500);
  --border-button-active:var(--neutral-600);
  --separator:var(--neutral-800);
  --composer-add-bg:var(--neutral-700);
  --composer-add-hover:var(--neutral-600);
  --theme-toggle-bg:var(--neutral-800);
  --theme-toggle-sel:var(--neutral-700);
  --kbd-bg:var(--neutral-700);
  --kbd-fg:var(--neutral-400);
  --badge-neutral-bg:var(--neutral-800);
  --grad-primary:linear-gradient(180deg,var(--accent-500) 0%,var(--accent-600) 100%);
  --grad-primary-hover:linear-gradient(180deg,var(--accent-400) 0%,var(--accent-500) 100%);
  --shadow-card:0 1px 1px 0 rgb(0 0 0 / 0.14);
  --shadow-sidebar:0 1px 0 0 rgb(0 0 0 / 0.10),0 1px 12px 0 rgb(0 0 0 / 0.16),0 0 1px 0 rgb(0 0 0 / 0.42);
  --shadow-dropdown:0 1px 1px 0 rgb(0 0 0 / 0.14),0 4px 4px 0 rgb(0 0 0 / 0.10);
  /* dark chart + status tokens */
  --chart-track:var(--neutral-800);
  --chart-cursor:var(--neutral-700);
  --chart-neutral:var(--neutral-800);
  --bg-inner:color-mix(in srgb,var(--neutral-800) 60%,transparent);
  --border-table:var(--neutral-800);
  --stat-icon-bg:var(--neutral-800);
  --status-lime-bg:color-mix(in srgb,#365314 55%,transparent); --status-lime-tx:#a3e635;
  --status-yellow-bg:color-mix(in srgb,#422006 55%,transparent); --status-yellow-tx:#facc15;
  --status-rose-bg:color-mix(in srgb,#4c0519 55%,transparent); --status-rose-tx:#fb7185;
  --status-cyan-bg:color-mix(in srgb,#083344 55%,transparent); --status-cyan-tx:#22d3ee;
  --status-gray-bg:var(--neutral-800); --status-gray-tx:var(--neutral-400);
  color-scheme:dark;
}

/* type scale (port of styles/typography.css) */
.t-title2{font-size:1.25rem;line-height:1.625rem;font-weight:500;letter-spacing:0;}
.t-title1{font-size:1.5rem;line-height:2rem;font-weight:500;letter-spacing:0;}
.t-display4{font-size:2rem;line-height:2.5rem;font-weight:500;letter-spacing:-.02em;}
.t-headline{font-size:1rem;line-height:1.375rem;font-weight:500;letter-spacing:0;}
.t-body{font-size:.875rem;line-height:1.25rem;font-weight:400;}
.t-body-medium{font-size:.875rem;line-height:1.25rem;font-weight:500;}
.t-body2{font-size:.8125rem;line-height:1.125rem;font-weight:400;}
.t-body2-medium{font-size:.8125rem;line-height:1.125rem;font-weight:500;}
.t-caption{font-size:.75rem;line-height:1rem;font-weight:400;letter-spacing:.15px;}
.t-caption1{font-size:.6875rem;line-height:.875rem;font-weight:400;letter-spacing:.1px;}
.tabular{font-variant-numeric:tabular-nums;}

/* =========================================================================
   base
   ========================================================================= */
*{box-sizing:border-box;}
html,body{height:100%;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;background:var(--bg-full);}
body{
  margin:0;font-family:var(--font-sans);background:var(--bg-full);color:var(--text-primary);
  font-variant-ligatures:contextual;
}
button{font-family:inherit;}
input,textarea{font-family:inherit;}
::selection{background:color-mix(in srgb,var(--accent-500) 25%,transparent);}
svg{display:block;}
.icon{width:1.25rem;height:1.25rem;flex:none;}
.icon-sm{width:1rem;height:1rem;flex:none;}
.icon-xs{width:.875rem;height:.875rem;flex:none;}

/* view-transition theme reveal (from theme-toggle.tsx) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;}
::view-transition-old(root){z-index:1;}
::view-transition-new(root){z-index:2;}
.theme-transitioning,.theme-transitioning *{transition:none !important;}

/* shimmer (from globals.css .agent-progress-loading-text / .bui-agent-thinking-label) */
@keyframes ai-chat-text-shimmer{from{background-position:200% center;}to{background-position:-100% center;}}
.shimmer-label{
  color:transparent;
  background-image:linear-gradient(100deg,var(--text-secondary) 16%,var(--text-secondary) 38%,var(--text-primary) 50%,var(--text-secondary) 62%,var(--text-secondary) 84%);
  background-position:200% center;background-size:300% 100%;
  background-clip:text;-webkit-background-clip:text;
  animation:ai-chat-text-shimmer 3.4s linear infinite;
}
@media (prefers-reduced-motion:reduce){.shimmer-label{color:var(--text-secondary);background-image:none;animation:none;}}

/* scrollbars (the rails use [scrollbar-width:none]) */
.no-scrollbar{scrollbar-width:none;}
.no-scrollbar::-webkit-scrollbar{display:none;}

/* =========================================================================
   app frame: 12px page frame, 16px gap (from agent-chat.tsx)
   ========================================================================= */
.app{
  position:relative;display:flex;width:100%;gap:1rem;overflow:hidden;
  background:var(--bg-full);padding:.75rem;height:100dvh;
}

/* ----- floating sidebar panel (DashboardSidebar) ----- */
.sidebar{
  display:flex;height:100%;flex:none;flex-direction:column;justify-content:space-between;
  overflow:hidden;flex-direction:column;
  border:1px solid #fff;background:var(--bg-secondary);
  border-radius:var(--radius-3xl);box-shadow:var(--shadow-sidebar);
  transition:width .3s ease-in-out;width:260px;padding:.75rem;
}
.dark .sidebar{border-color:var(--neutral-700);}
.sidebar.collapsed{width:60px;padding:.6875rem .6875rem;}
.sidebar-scroll{
  margin:-.5rem;width:calc(100% + 16px);display:flex;min-height:0;flex-direction:column;gap:.75rem;
  overflow-y:auto;padding:.5rem;
}
.sidebar-bottom{display:flex;width:100%;flex:none;flex-direction:column;gap:.75rem;}

.ws-row{display:flex;width:100%;align-items:center;justify-content:space-between;transition:gap .3s ease-in-out;}
.ws-row.expanded{flex-direction:row;}
.ws-row.collapsed{flex-direction:column-reverse;align-items:center;justify-content:center;gap:.625rem;}

/* workspace switcher trigger */
.ws-trigger{
  display:flex;min-width:0;align-items:center;gap:.5rem;padding:.375rem;
  border-radius:var(--radius-2lg);cursor:pointer;transition:background-color .15s ease;
  color:var(--text-primary);
}
.ws-trigger:hover{background:var(--bg-secondary-hover);}
.ws-avatar{
  width:2rem;height:2rem;border-radius:9999px;flex:none;display:grid;place-items:center;
  background:var(--bg-tertiary);color:var(--text-secondary);font-size:.8125rem;font-weight:600;
  background-image:linear-gradient(135deg,var(--accent-400),var(--accent-600));color:#fff;
}
.ws-name{min-width:0;flex:1;overflow:hidden;}
.ws-name .n1{font-size:.8125rem;font-weight:500;line-height:1.125rem;color:var(--text-primary);}
.ws-name .n2{font-size:.75rem;color:var(--text-tertiary);}
.ws-chev{color:var(--icon-secondary);transition:transform .2s ease;}

/* collapse button */
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;
  cursor:pointer;color:var(--icon-secondary);border-radius:var(--radius-2lg);
  transition:background-color .15s ease,color .15s ease,transform .3s ease-in-out;
}
.iconbtn:hover{background:var(--bg-secondary-hover);color:var(--icon-primary);}
.iconbtn.size-9{width:2.25rem;height:2.25rem;}
.iconbtn.size-7{width:1.75rem;height:1.75rem;}
.iconbtn.focusable:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus-ring);}

/* quick search */
.search-trigger{
  display:flex;cursor:pointer;align-items:center;gap:.5rem;padding:.5rem;
  width:100%;border-radius:9999px;background:var(--bg-tertiary);
  transition:background-color .15s ease;color:var(--text-secondary);
}
.search-trigger:hover{background:var(--bg-tertiary-hover);}
.sidebar.collapsed .search-trigger{width:2.25rem;justify-content:center;padding:0;}
.collapsible{display:inline-flex;min-width:0;align-items:center;overflow:hidden;transition:max-width .3s ease,opacity .3s ease,filter .3s ease;}
.sidebar.collapsed .collapsible{max-width:0;opacity:0;filter:blur(3px);}
.sidebar:not(.collapsed) .collapsible{max-width:100%;opacity:1;filter:blur(0);}
.kbd{
  display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;
  padding:0 .25rem;border-radius:var(--radius-md);background:var(--kbd-bg);color:var(--kbd-fg);
  font-size:.6875rem;font-weight:500;font-family:var(--font-mono);
}

/* nav */
.nav{display:flex;width:100%;flex-direction:column;gap:.25rem;}
.nav:not(.collapsed-nav){padding:0 .125rem;}
.nav-item{
  display:flex;align-items:center;justify-content:space-between;overflow:hidden;
  border-radius:var(--radius-2lg);padding:.5rem;text-decoration:none;
  transition:background-color .15s ease,width .3s ease-in-out;width:100%;
}
.sidebar.collapsed .nav-item{width:2.25rem;justify-content:center;padding:0;}
.nav-item:hover{background:var(--bg-secondary-hover);}
.nav-item.selected{background-image:linear-gradient(180deg,var(--accent-500),var(--accent-600));box-shadow:var(--shadow-nav-selected);}
.nav-item .lead{display:flex;min-width:0;align-items:center;gap:.5rem;}
.nav-item .label{font-size:.875rem;font-weight:500;white-space:nowrap;color:var(--text-secondary);}
.nav-item.selected .label,.nav-item.selected .icon{color:#fff;}
.nav-item .icon{color:var(--icon-secondary);}
.nav-item:hover .icon{color:var(--icon-primary);}
.badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;
  padding:0 .3125rem;border-radius:9999px;background:var(--badge-neutral-bg);color:var(--text-secondary);
  font-size:.6875rem;font-weight:500;
}
.nav-item.selected .badge{background:color-mix(in srgb,#fff 22%,transparent);color:#fff;}

/* theme toggle (sidebar-segmented) */
.theme-toggle{
  position:relative;display:inline-flex;width:100%;align-items:center;gap:.25rem;border-radius:9999px;
  padding:.25rem;background:var(--theme-toggle-bg);
}
.theme-toggle .knob{
  position:absolute;top:.25rem;left:.25rem;width:2rem;height:2rem;border-radius:9999px;
  background:var(--theme-toggle-sel);box-shadow:var(--shadow-xs);
  transition:transform .2s ease;
}
.theme-toggle.dark .knob{transform:translateX(calc(100% + .25rem));}
.theme-toggle button{
  position:relative;z-index:1;display:grid;place-items:center;width:2rem;height:2rem;border:0;
  background:transparent;cursor:pointer;border-radius:9999px;color:var(--icon-secondary);
  transition:color .15s ease;flex:1;
}
.theme-toggle button[aria-pressed="true"]{color:var(--icon-primary);}

/* team card */
.team-card{
  display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:var(--radius-2lg);
  background:var(--bg-primary);border:1px solid var(--border-button);
}
.team-card .team-dot{width:.5rem;height:.5rem;border-radius:9999px;background:#22c55e;flex:none;}
.team-card .team-name{flex:1;min-width:0;font-size:.8125rem;font-weight:500;color:var(--text-primary);}
.team-card .team-meta{font-size:.75rem;color:var(--text-tertiary);}
.sidebar.collapsed .team-card{justify-content:center;padding:.5rem;}
.sidebar.collapsed .team-card .collapsible{display:none;}

/* =========================================================================
   workspace (chat card + history rail)
   ========================================================================= */
.workspace{position:relative;display:flex;min-height:0;min-width:0;flex:1;gap:.75rem;overflow:hidden;}
.chat-card{
  position:relative;display:flex;height:100%;min-width:0;flex:1;flex-direction:column;overflow:hidden;
  border-radius:var(--radius-3xl);background:var(--bg-secondary);
}
.chat-header{
  position:absolute;inset-inline:0;top:0;z-index:10;display:flex;height:3rem;align-items:center;gap:.5rem;
  padding:0 1rem;padding-top:7px;border-bottom:1px solid transparent;transition:background-color .2s ease,border-color .2s ease;
}
.chat-header.frosted{
  border-color:var(--separator);background:color-mix(in srgb,#fff 20%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.dark .chat-header.frosted{background:color-mix(in srgb,#000 20%,transparent);}
.chat-title{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-actions{display:flex;flex:none;align-items:center;gap:.125rem;margin-inline-start:auto;}
.menu-btn{display:none;}
@media (max-width:1023px){.menu-btn{display:inline-flex;}}

/* transcript */
.transcript{min-height:0;flex:1;overflow-y:auto;scroll-behavior:smooth;}
.transcript-inner{
  margin:0 auto;display:flex;width:100%;max-width:48rem;flex-direction:column;gap:1.25rem;
  padding:4.5rem 1rem 1.5rem;
}
.transcript-inner.empty{min-height:100%;justify-content:center;align-items:center;text-align:center;}

/* empty state */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;}
.empty-state h2{margin:0;font-size:1.25rem;line-height:1.625rem;font-weight:500;color:var(--text-primary);}
.empty-state p{margin:0;font-size:.875rem;color:var(--text-secondary);max-width:30rem;}
.suggestions{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;}
.suggestion{
  border:0;cursor:pointer;border-radius:9999px;background:var(--bg-primary);padding:.5rem .875rem;
  font-size:.875rem;color:var(--text-secondary);box-shadow:var(--shadow-xs);transition:background-color .15s ease;
}
.suggestion:hover{background:var(--bg-primary-hover);}

/* messages */
.msg-user{
  margin-inline-start:auto;display:flex;width:fit-content;max-width:75%;flex-direction:column;
  border-radius:var(--radius-3xl);background:var(--bg-primary);padding:.6875rem .75rem;
  text-align:start;font-size:.875rem;line-height:1.25rem;color:var(--text-primary);
  white-space:pre-wrap;word-break:break-word;box-shadow:var(--shadow-card);
}
.msg-assistant{display:flex;flex-direction:column;gap:.25rem;padding:0 .25rem;}
.msg-assistant .streamed{display:flex;flex-direction:column;gap:.75rem;}
.msg-assistant .streamed p{margin:0;font-size:.875rem;line-height:1.25rem;color:var(--text-primary);word-break:break-word;}
.msg-assistant .streamed p.entering{opacity:0;filter:blur(5px);transform:translateY(4px);animation:line-in .42s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes line-in{to{opacity:1;filter:blur(0);transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.msg-assistant .streamed p.entering{animation:none;opacity:1;filter:none;transform:none;}}

.msg-actions{display:flex;align-items:center;gap:.25rem;transition:opacity .15s ease;opacity:0;}
.msg-assistant:hover .msg-actions,.msg-actions:focus-within{opacity:1;}
.msg-actions.hidden{pointer-events:none;opacity:0;}
.msg-actions .age{margin-inline-start:.25rem;font-size:.75rem;color:var(--text-tertiary);}
.act-btn{
  display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:0;background:transparent;
  cursor:pointer;border-radius:var(--radius-md);color:var(--icon-tertiary);transition:background-color .15s ease,color .15s ease;
}
.act-btn:hover{background:var(--bg-primary);color:var(--icon-secondary);}
.act-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus-ring);}

/* thinking indicator (AgentThinking wave) */
.thinking{display:flex;align-items:center;gap:.625rem;padding:0 .25rem;color:var(--text-secondary);}
.thinking .dots{display:grid;grid-template-columns:repeat(3,4px);gap:2px;flex:none;}
.thinking .dots span{width:4px;height:4px;border-radius:1px;background:currentColor;transition:opacity .22s ease;}
.thinking .label{font-size:.875rem;font-weight:500;}
.thinking .timer{font-family:var(--font-mono);font-size:.75rem;color:var(--text-tertiary);font-variant-numeric:tabular-nums;}

/* error */
.chat-error{padding:0 .25rem;font-size:.875rem;color:var(--text-tertiary);}

/* =========================================================================
   composer
   ========================================================================= */
.composer-wrap{flex:none;padding:0 .75rem .75rem;}
.composer-inner{margin:0 auto;width:100%;max-width:48rem;display:flex;flex-direction:column;gap:.625rem;}
.composer-loader{position:relative;border-radius:9999px;}
.composer-loader.active::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from 0deg,#5eead4,#46baec,#e633a4,#00faa7,#5eead4);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:composer-spin 2.4s linear infinite;opacity:.9;
}
@keyframes composer-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.composer-loader.active::before{animation:none;}}
.composer-form{
  display:flex;height:52px;width:100%;align-items:center;gap:.625rem;border-radius:9999px;padding:.5rem;
  background:var(--bg-primary);box-shadow:var(--shadow-xs);position:relative;
}
.composer-loader.active .composer-form{background:var(--bg-primary);}
.add-btn{
  display:flex;width:2.25rem;height:2.25rem;flex:none;align-items:center;justify-content:center;border:0;
  cursor:pointer;border-radius:9999px;background:var(--composer-add-bg);color:var(--icon-primary);
  transition:background-color .15s ease;
}
.add-btn:hover{background:var(--composer-add-hover);}
.composer-input{
  height:1.25rem;min-width:0;flex:1;border:0;background:transparent;font-size:.875rem;color:var(--text-primary);
  caret-color:var(--text-primary);outline:none;
}
.composer-input::placeholder{color:var(--text-tertiary);}
.model-chip{
  display:flex;height:2rem;flex:none;align-items:center;gap:.25rem;border-radius:var(--radius-xl);
  padding:.375rem .5rem;font-size:.8125rem;font-weight:500;color:var(--text-secondary);
}
.model-chip .icon{color:var(--icon-secondary);width:1rem;height:1rem;}
.model-chip .mname{display:inline-block;max-width:13ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:639px){.model-chip .mname{display:none;}}
.send-cell{display:flex;flex:none;align-items:center;gap:.5rem;padding-inline-start:.375rem;}
.send-btn{
  display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;border:0;cursor:pointer;
  border-radius:9999px;background-image:var(--grad-primary);color:#fff;transition:opacity .15s ease;
}
.send-btn:hover{background-image:var(--grad-primary-hover);}
.send-btn:disabled{cursor:not-allowed;opacity:.4;}
.stop-btn{
  display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;border:0;cursor:pointer;
  border-radius:9999px;background:var(--bg-secondary);color:var(--icon-secondary);transition:background-color .15s ease;
}
.stop-btn:hover{background:var(--bg-secondary-hover);}

/* status row */
.status-row{display:flex;height:26px;width:100%;align-items:center;justify-content:space-between;}
.status-item{display:flex;align-items:center;gap:.25rem;}
.status-item .icon{width:1rem;height:1rem;color:var(--icon-secondary);}
.status-item .lbl{white-space:nowrap;font-size:.8125rem;font-weight:500;color:var(--text-secondary);}

/* =========================================================================
   history rail (AgentChatHistory)
   ========================================================================= */
.history-rail{
  display:flex;height:100%;width:260px;flex:none;flex-direction:column;gap:1.5rem;overflow:hidden;
  border-radius:var(--radius-3xl);background:var(--bg-secondary);padding:.75rem;
}
.new-chat{
  display:flex;width:100%;align-items:center;gap:.5rem;border:0;cursor:pointer;border-radius:var(--radius-2lg);
  padding:.5rem .5rem;font-size:.875rem;font-weight:500;color:var(--text-primary);background:transparent;
  transition:background-color .15s ease;
}
.new-chat:hover{background:var(--bg-secondary-hover);}
.new-chat:disabled{cursor:not-allowed;opacity:.5;}
.new-chat .icon{color:var(--icon-secondary);}
.thread-list{display:flex;min-height:0;flex:1;flex-direction:column;gap:.25rem;overflow-y:auto;}
.thread-list .section{padding:0 .5rem .25rem;font-size:.8125rem;font-weight:500;color:var(--text-tertiary);}
.thread-list .empty-note{padding:0 .5rem;font-size:.8125rem;color:var(--text-tertiary);}
.thread-row{position:relative;display:flex;align-items:center;border-radius:var(--radius-2lg);transition:background-color .15s ease;}
.thread-row:hover,.thread-row.active,.thread-row.menu-open{background:var(--bg-secondary-hover);}
.thread-row .sel{
  display:flex;min-width:0;flex:1;align-items:center;gap:.375rem;padding:.375rem .5rem;border:0;background:transparent;
  cursor:pointer;text-align:start;border-radius:var(--radius-2lg);
}
.thread-row .sel:disabled{cursor:not-allowed;opacity:.5;}
.thread-row .unread-dot{width:.375rem;height:.375rem;border-radius:9999px;background:var(--accent-500);flex:none;}
.thread-row .ttitle{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;color:var(--text-secondary);}
.thread-row.unread .ttitle{color:var(--text-primary);}
.thread-row .age-slot{position:relative;display:flex;width:1.75rem;height:1.75rem;flex:none;align-items:center;justify-content:center;padding-inline-end:.25rem;}
.thread-row .age{font-size:.75rem;color:var(--text-tertiary);transition:opacity .15s ease;}
.thread-row .more-btn{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;background:transparent;
  cursor:pointer;border-radius:var(--radius-md);color:var(--icon-secondary);opacity:0;transition:opacity .15s ease,background-color .15s ease,color .15s ease;
}
.thread-row:hover .age,.thread-row.menu-open .age{opacity:0;}
.thread-row:hover .more-btn,.thread-row.menu-open .more-btn{opacity:1;}
.thread-row .more-btn:hover{background:var(--bg-tertiary);color:var(--icon-primary);}
.thread-row .rename-input{
  width:100%;border:0;background:transparent;font-size:.8125rem;color:var(--text-primary);outline:none;
}

/* rail footer */
.rail-footer{margin-top:auto;display:flex;align-items:center;gap:.25rem;border-top:1px solid var(--separator);padding-top:.75rem;padding-inline-end:.25rem;}
.account-trigger{
  display:flex;min-width:0;flex:1;align-items:center;gap:.5rem;border:0;background:transparent;cursor:pointer;
  border-radius:var(--radius-2lg);padding:.25rem;text-align:start;transition:background-color .15s ease;
}
.account-trigger:hover,.account-trigger[aria-expanded="true"]{background:var(--bg-secondary-hover);}
.account-trigger .av{
  width:1.5rem;height:1.5rem;border-radius:9999px;flex:none;display:grid;place-items:center;
  background-image:linear-gradient(135deg,var(--accent-400),var(--accent-600));color:#fff;font-size:.75rem;font-weight:600;
}
.account-trigger .aname{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;font-weight:500;color:var(--text-primary);}
.export-btn{
  display:flex;width:1.5rem;height:1.5rem;flex:none;align-items:center;justify-content:center;border:0;cursor:pointer;
  border-radius:9999px;background-image:var(--grad-primary);color:#fff;transition:opacity .15s ease;
}
.export-btn:hover{opacity:.9;}
.export-btn:disabled{cursor:not-allowed;opacity:.4;}

/* =========================================================================
   dropdowns (port of components/base/dropdown)
   ========================================================================= */
.popover{
  position:absolute;z-index:60;min-width:8rem;border-radius:var(--radius-2lg);background:var(--bg-primary);
  border:1px solid var(--border-button);box-shadow:var(--shadow-dropdown);padding:.5rem;
  transform-origin:top right;animation:pop-in .14s ease;
}
@keyframes pop-in{from{opacity:0;transform:scale(.97) translateY(-4px);}to{opacity:1;transform:none;}}
.popover.bottom-end{right:0;top:calc(100% + 6px);}
.popover.top-start{left:0;bottom:calc(100% + 6px);transform-origin:bottom left;}
.popover.bottom-start{left:0;top:calc(100% + 6px);transform-origin:top left;}
.popover-item{
  display:flex;width:100%;align-items:center;gap:.5rem;border:0;background:transparent;cursor:pointer;
  border-radius:var(--radius-2lg);padding:.375rem .5rem;font-size:.875rem;color:var(--text-primary);
  white-space:nowrap;transition:background-color .15s ease;text-align:start;
}
.popover-item:hover{background:var(--bg-secondary-hover);}
.popover-item.danger{color:var(--text-error);}
.popover-item .icon{width:1.125rem;height:1.125rem;color:var(--icon-secondary);flex:none;}
.popover-divider{height:1px;background:var(--separator);margin:.375rem .25rem;}
.popover-group{display:flex;flex-direction:column;gap:.125rem;}
.usage-row{display:flex;align-items:center;gap:.5rem;padding:.125rem .5rem .125rem 2.25rem;}
.usage-row .ul{flex:1;min-width:0;font-size:.8125rem;font-weight:500;color:var(--text-primary);}
.usage-row .uv{flex:none;font-size:.8125rem;color:var(--text-secondary);}
.usage-row .up{width:2.25rem;flex:none;text-align:end;font-size:.8125rem;color:var(--text-tertiary);}
.usage-meter{height:4px;border-radius:9999px;background:var(--bg-tertiary);overflow:hidden;margin:.125rem .5rem .375rem 2.25rem;}
.usage-meter > i{display:block;height:100%;background-image:var(--grad-primary);}

/* =========================================================================
   mobile drawer
   ========================================================================= */
.drawer-overlay{position:fixed;inset:0;z-index:50;display:none;}
.drawer-overlay.open{display:flex;}
@media (min-width:1024px){.drawer-overlay{display:none !important;}}
.drawer-overlay .scrim{position:absolute;inset:0;background:rgb(0 0 0 / .4);cursor:pointer;}
.drawer-overlay .panel{position:relative;display:flex;height:100%;padding:.75rem;}

/* responsive rails */
@media (max-width:1023px){.sidebar{display:none;}}
@media (max-width:1279px){.history-rail{display:none;}}

/* auth layout: hide sidebar + drawer, center the page */
.app.auth-layout{padding:0;gap:0;}
.app.auth-layout .sidebar,.app.auth-layout .drawer-overlay{display:none;}

/* router target */
#main{position:relative;display:flex;min-height:0;min-width:0;flex:1;overflow:hidden;}
.app.auth-layout #main{display:flex;align-items:center;justify-content:center;padding:1.5rem;overflow:auto;}

/* utility */
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.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;}
[hidden]{display:none !important;}
@media (max-width:639px){input,select,textarea{font-size:16px;}}

/* =========================================================================
   app-shell layout (dashboard / components pages)
   ========================================================================= */
.shell-main{
  position:relative;display:flex;min-height:0;min-width:0;flex:1;justify-center;overflow-x:hidden;overflow-y:auto;
  padding:.75rem .75rem 0;
}
.shell-column{display:flex;width:100%;max-width:1300px;flex-direction:column;gap:.625rem;}
.shell-column.narrow{max-width:964px;}
.shell-header{display:flex;width:100%;flex-direction:column;gap:.5rem;}
.breadcrumb{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap;}
.breadcrumb-item{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;color:var(--text-secondary);text-decoration:none;}
.breadcrumb-item.current{color:var(--text-primary);font-weight:500;}
.breadcrumb-sep{color:var(--text-tertiary);}
.breadcrumb-item .av{width:1.25rem;height:1.25rem;border-radius:9999px;display:grid;place-items:center;font-size:.625rem;font-weight:600;flex:none;}
.breadcrumb-item .av.blue{background:var(--accent-500);color:#fff;}
.breadcrumb-item .av.neutral{background:var(--neutral-300);color:var(--neutral-700);}
.dark .breadcrumb-item .av.neutral{background:var(--neutral-700);color:var(--neutral-300);}
.breadcrumb-item .bic{color:var(--text-secondary);}
.shell-heading-row{display:flex;width:100%;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem;}
.shell-heading-row h1{margin:0;padding:0 .25rem;font-size:1.25rem;line-height:1.625rem;font-weight:500;white-space:nowrap;color:var(--text-primary);}
.shell-heading-row .menu-btn{display:none;}
@media (max-width:1023px){.shell-heading-row .menu-btn{display:inline-flex;}}
.shell-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.625rem;}
.shell-content{display:flex;width:100%;flex-direction:column;gap:1rem;padding-bottom:1rem;}

/* shared button (port of components/base/buttons/button) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.375rem;border:0;cursor:pointer;
  border-radius:var(--radius-2lg);padding:.5rem .875rem;font-size:.875rem;font-weight:500;
  transition:background-color .15s ease,box-shadow .15s ease,opacity .15s ease;text-decoration:none;white-space:nowrap;
}
.btn:disabled{cursor:not-allowed;opacity:.5;}
.btn.medium{height:2.25rem;padding:0 .875rem;}
.btn.primary{background-image:var(--grad-primary);color:#fff;box-shadow:var(--shadow-xs);}
.btn.primary:hover{background-image:var(--grad-primary-hover);}
.btn.secondary{background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-button);box-shadow:var(--shadow-xs);}
.btn.secondary:hover{background:var(--bg-primary-hover);border-color:var(--border-button-hover);}
.btn.ghost{background:transparent;color:var(--text-secondary);}
.btn.ghost:hover{background:var(--bg-secondary-hover);color:var(--text-primary);}
.btn .icon{width:1.125rem;height:1.125rem;}

/* =========================================================================
   stat cards (StatCards footer variant)
   ========================================================================= */
.stat-grid{display:grid;width:100%;gap:1rem;grid-template-columns:1fr;}
@media (min-width:640px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1280px){.stat-grid{grid-template-columns:repeat(4,1fr);}}
.stat-card{
  display:flex;min-width:0;flex-direction:column;border-radius:var(--radius-xl);
  background:var(--bg-secondary);padding:.5rem;
}
.stat-card-top{display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:.625rem;padding:.5rem;}
.stat-tile{
  display:flex;width:2.5rem;height:2.5rem;flex:none;align-items:center;justify-content:center;border-radius:var(--radius-2lg);
}
.stat-tile .icon{color:#fff;}
.stat-tile.blue{background:var(--tile-blue);}
.stat-tile.orange{background:var(--tile-orange);}
.stat-tile.purple{background:var(--tile-purple);}
.stat-tile.pink{background:var(--tile-pink);}
.stat-tile.sky{background:var(--tile-sky);}
.stat-tile.emerald{background:var(--tile-emerald);}
.stat-info{display:flex;flex-direction:column;gap:.125rem;padding:.5rem .5rem .875rem;}
.stat-info .sl{font-size:.875rem;color:var(--text-secondary);}
.stat-info .sv{font-size:2rem;line-height:2.5rem;font-weight:500;letter-spacing:-.02em;white-space:nowrap;color:var(--text-primary);font-variant-numeric:tabular-nums;}
.stat-footer{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto;
  border-radius:var(--radius-2lg);background:var(--bg-inner);padding:.375rem .625rem;box-shadow:var(--shadow-card);
}
.stat-footer .sc{font-size:.875rem;color:var(--text-secondary);}
.delta-pill{display:flex;flex:none;align-items:center;gap:.25rem;border-radius:9999px;padding:.125rem .5rem .125rem .25rem;font-size:.875rem;font-weight:500;font-variant-numeric:tabular-nums;}
.delta-pill .icon{width:1rem;height:1rem;}
.delta-pill.lime{background:var(--status-lime-bg);color:var(--status-lime-tx);}
.delta-pill.rose{background:var(--status-rose-bg);color:var(--status-rose-tx);}
.delta-pill.neutral{background:var(--bg-secondary);color:var(--text-secondary);}
.stat-hint{display:flex;width:1.25rem;height:1.25rem;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;color:var(--icon-secondary);border-radius:9999px;}
.stat-hint:hover{color:var(--icon-primary);}

/* =========================================================================
   chart cards (RevenueChartCard / OrdersChartCard)
   ========================================================================= */
.chart-row{display:flex;width:100%;align-items:stretch;gap:1rem;flex-direction:column;}
@media (min-width:1280px){.chart-row{flex-direction:row;}}
.chart-card{
  display:flex;min-width:0;flex:1;flex-direction:column;gap:1.5rem;border-radius:var(--radius-xl);
  background:var(--bg-secondary);padding:1rem 1rem .75rem;height:344px;
}
.chart-header{display:flex;width:100%;flex-direction:column;gap:.75rem;}
@media (min-width:640px){.chart-header{flex-direction:row;align-items:flex-start;justify-content:space-between;}}
.chart-headline{display:flex;min-width:0;flex-direction:column;gap:.125rem;}
.chart-headline .cl{font-size:.875rem;color:var(--text-secondary);}
.chart-headline .cv{display:flex;align-items:center;gap:.5rem;}
.chart-headline .cv .num{font-size:1.5rem;line-height:2rem;font-weight:500;white-space:nowrap;color:var(--text-primary);font-variant-numeric:tabular-nums;}
.chart-headline .cmp{font-size:.8125rem;color:var(--text-tertiary);font-variant-numeric:tabular-nums;}
.chart-legend{display:flex;flex:none;align-items:center;gap:1rem;font-size:.8125rem;color:var(--text-secondary);}
.chart-legend .li{display:flex;align-items:center;gap:.375rem;}
.chart-legend .dot{width:.5rem;height:.5rem;border-radius:9999px;flex:none;}
.chart-legend .dot.rev{background:var(--chart-2-active);}
.chart-legend .dot.ord{background:var(--chart-9-active);}
.chart-legend .dot.neutral{background:var(--chart-neutral);}
.chart-canvas{min-height:0;width:100%;flex:1;position:relative;}
.chart-canvas svg{width:100%;height:100%;display:block;}
.chart-tooltip{
  position:absolute;z-index:5;pointer-events:none;border-radius:var(--radius-2lg);background:var(--bg-primary);
  border:1px solid var(--border-button);box-shadow:var(--shadow-dropdown);padding:.5rem .625rem;font-size:.75rem;
  transform:translate(-50%,-100%);white-space:nowrap;
}
.chart-tooltip .tt-title{font-weight:500;color:var(--text-primary);margin-bottom:.125rem;}
.chart-tooltip .tt-row{display:flex;align-items:center;gap:.375rem;color:var(--text-secondary);}
.chart-tooltip .tt-row .sw{width:.5rem;height:.5rem;border-radius:9999px;}

/* chip (port of components/base/badges/chip) */
.chip{
  display:inline-flex;align-items:center;gap:.25rem;border-radius:9999px;padding:.125rem .5rem;
  font-size:.75rem;font-weight:500;white-space:nowrap;line-height:1.125rem;
}
.chip.bold{font-weight:600;}
.chip.bold.lime{background:var(--status-lime-bg);color:var(--status-lime-tx);}
.chip.bold.rose{background:var(--status-rose-bg);color:var(--status-rose-tx);}
.chip.bold.yellow{background:var(--status-yellow-bg);color:var(--status-yellow-tx);}
.chip.bold.cyan{background:var(--status-cyan-bg);color:var(--status-cyan-tx);}
.chip.bold.neutral,.chip.subtle.gray{background:var(--status-gray-bg);color:var(--status-gray-tx);}

/* =========================================================================
   data table (DataTableExample)
   ========================================================================= */
.dt-section{display:flex;width:100%;flex-direction:column;border:1px solid var(--border-table);border-radius:var(--radius-xl);padding-top:.5rem;}
.dt-toolbar{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:.75rem;padding:.25rem .75rem;}
@media (min-width:640px){.dt-toolbar{flex-direction:row;align-items:center;justify-content:space-between;}}
.dt-total{display:flex;flex-direction:column;}
.dt-total .tl{font-size:.875rem;color:var(--text-tertiary);white-space:nowrap;}
.dt-total .tv{font-size:.875rem;color:var(--text-primary);white-space:nowrap;}
.dt-filters{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap;}
.dt-select{
  display:flex;align-items:center;gap:.375rem;height:2.25rem;border-radius:var(--radius-2lg);background:var(--bg-primary);
  border:1px solid var(--border-button);box-shadow:var(--shadow-xs);padding:0 .625rem;font-size:.875rem;color:var(--text-primary);
  cursor:pointer;transition:border-color .15s ease;
}
.dt-select:hover{border-color:var(--border-button-hover);}
.dt-select .icon{width:1rem;height:1rem;color:var(--icon-secondary);}
.dt-select .sv{flex:1;}
.dt-search{
  display:flex;align-items:center;gap:.375rem;min-width:153px;height:2.25rem;border-radius:9999px;background:var(--bg-secondary);
  padding:0 .625rem;
}
.dt-search input{border:0;background:transparent;outline:none;font-size:.875rem;color:var(--text-primary);min-width:0;flex:1;}
.dt-search .icon{width:1rem;height:1rem;color:var(--icon-secondary);}

.dt-scroll{overflow-x:auto;margin-top:.5rem;}
.dt-table{width:100%;min-width:1000px;border-collapse:separate;border-spacing:0;}
.dt-table th,.dt-table td{text-align:start;vertical-align:middle;padding:.625rem .75rem;}
.dt-table thead th{font-size:.8125rem;font-weight:500;color:var(--text-secondary);border-bottom:1px solid var(--separator);white-space:nowrap;}
.dt-table tbody td{border-bottom:1px solid var(--separator);font-size:.875rem;color:var(--text-primary);}
.dt-table tbody tr:last-child td{border-bottom:0;}
.dt-table tbody tr.selected{background:var(--bg-secondary);}
.dt-table tbody tr:hover{background:var(--bg-secondary-hover);}
.dt-th-sort{display:flex;align-items:center;gap:.125rem;cursor:pointer;border:0;background:transparent;font:inherit;color:inherit;padding:0;}
.dt-th-sort .icon{width:1.25rem;height:1.25rem;color:var(--text-tertiary);transition:transform .15s ease,color .15s ease;}
.dt-th-sort.asc .icon,.dt-th-sort.desc .icon{color:var(--text-secondary);}
.dt-th-sort.asc .icon{transform:rotate(180deg);}
.dt-customer{display:flex;min-width:0;align-items:center;gap:.5rem;}
.dt-checkbox{
  display:flex;width:1.125rem;height:1.125rem;flex:none;align-items:center;justify-content:center;border-radius:var(--radius-md);
  border:1.5px solid var(--border-button-active);background:transparent;cursor:pointer;transition:background-color .15s ease,border-color .15s ease;
}
.dt-checkbox:hover{border-color:var(--accent-500);}
.dt-checkbox.checked{background:var(--accent-500);border-color:var(--accent-500);}
.dt-checkbox.indeterminate{background:var(--accent-500);border-color:var(--accent-500);}
.dt-checkbox .icon{width:.75rem;height:.75rem;color:#fff;}
.dt-avatar{width:1.75rem;height:1.75rem;border-radius:9999px;flex:none;display:grid;place-items:center;font-size:.625rem;font-weight:600;overflow:hidden;}
.dt-avatar.blue{background:var(--accent-100);color:var(--accent-700);}
.dt-avatar.neutral{background:var(--neutral-200);color:var(--neutral-700);}
.dark .dt-avatar.blue{background:color-mix(in srgb,var(--accent-500) 25%,transparent);color:var(--accent-300);}
.dark .dt-avatar.neutral{background:var(--neutral-800);color:var(--neutral-300);}
.dt-avatar img{width:100%;height:100%;object-fit:cover;}
.dt-name{font-size:.875rem;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dt-actions{display:flex;align-items:center;justify-content:flex-end;gap:.625rem;}
.dt-act{display:flex;width:2rem;height:2rem;align-items:center;justify-content:center;border-radius:var(--radius-2lg);background:var(--bg-primary);border:1px solid var(--border-button);box-shadow:var(--shadow-xs);cursor:pointer;color:var(--icon-primary);transition:border-color .15s ease,background-color .15s ease;}
.dt-act:hover{background:var(--bg-primary-hover);border-color:var(--border-button-hover);}
.dt-act .icon{width:1rem;height:1rem;}
.dt-empty{display:flex;height:10rem;align-items:center;justify-content:center;font-size:.875rem;color:var(--text-tertiary);}

.dt-footer{display:flex;align-items:center;justify-content:space-between;gap:.625rem;border-top:1px solid var(--separator);padding:.75rem;flex-wrap:wrap;}
.dt-pager{display:flex;align-items:center;gap:.25rem;}
.dt-page{display:flex;width:2rem;height:2rem;align-items:center;justify-content:center;border-radius:var(--radius-md);border:0;background:transparent;cursor:pointer;font-size:.8125rem;color:var(--text-secondary);transition:background-color .15s ease;}
.dt-page:hover{background:var(--bg-secondary-hover);}
.dt-page.active{background:var(--bg-primary);color:var(--text-primary);font-weight:500;box-shadow:var(--shadow-xs);}
.dt-page:disabled{cursor:not-allowed;opacity:.4;}
.dt-page.ellipsis{cursor:default;opacity:.4;}
.dt-page.ellipsis:hover{background:transparent;}
.dt-density{display:flex;align-items:center;gap:.25rem;background:var(--bg-secondary);border-radius:9999px;padding:.125rem;}
.dt-density button{border:0;background:transparent;cursor:pointer;border-radius:9999px;padding:.25rem .75rem;font-size:.8125rem;font-weight:500;color:var(--text-secondary);transition:background-color .15s ease,color .15s ease;}
.dt-density button.active{background:var(--bg-primary);color:var(--text-primary);box-shadow:var(--shadow-xs);}

/* segmented control (shared) */
.segmented{display:inline-flex;align-items:center;gap:.25rem;background:var(--bg-secondary);border-radius:9999px;padding:.125rem;}
.segmented button{border:0;background:transparent;cursor:pointer;border-radius:9999px;padding:.25rem .75rem;font-size:.8125rem;font-weight:500;color:var(--text-secondary);transition:background-color .15s ease,color .15s ease;}
.segmented button.active{background:var(--bg-primary);color:var(--text-primary);box-shadow:var(--shadow-xs);}

/* =========================================================================
   components catalogue
   ========================================================================= */
.catalog-intro{max-width:42rem;font-size:.875rem;color:var(--text-secondary);}
.catalog-section{display:flex;flex-direction:column;gap:1rem;}
.catalog-section-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;}
.catalog-section-head h2{margin:0;font-size:1.25rem;font-weight:500;color:var(--text-primary);}
.catalog-section-head .count{font-size:.875rem;color:var(--text-tertiary);}
.catalog-section-head .blurb{font-size:.875rem;color:var(--text-tertiary);}
.catalog-grid{display:grid;width:100%;grid-template-columns:1fr;gap:.75rem;}
@media (min-width:640px){.catalog-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem;}}
@media (min-width:1280px){.catalog-grid.three{grid-template-columns:repeat(3,1fr);}}
.showcase-card{display:flex;flex-direction:column;border-radius:var(--radius-xl);background:var(--bg-secondary);overflow:hidden;border:1px solid var(--border-table);}
.showcase-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:1.5rem;min-height:180px;}
.showcase-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem .875rem;border-top:1px solid var(--separator);}
.showcase-meta .nm{font-size:.875rem;font-weight:500;color:var(--text-primary);}
.showcase-meta .tier{font-size:.6875rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;}
.showcase-meta .tier.free{color:var(--status-lime-tx);}

/* form inputs (port of components/base/input) */
.field{display:flex;flex-direction:column;gap:.375rem;}
.field label{font-size:.875rem;font-weight:500;color:var(--text-primary);}
.field .hint{font-size:.75rem;color:var(--text-tertiary);}
.input{
  height:2.5rem;border-radius:var(--radius-2lg);background:var(--bg-primary);border:1px solid var(--border-button);
  padding:0 .75rem;font-size:.875rem;color:var(--text-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease;width:100%;
}
.input:focus{border-color:var(--accent-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-500) 20%,transparent);}
.input::placeholder{color:var(--text-tertiary);}

/* =========================================================================
   auth card (AuthCard)
   ========================================================================= */
.auth-card{
  display:flex;width:100%;max-width:400px;flex-direction:column;border-radius:var(--radius-3xl);
  background:var(--bg-primary);border:1px solid var(--border-button);box-shadow:var(--shadow-xs);padding:1.5rem;
}
@media (min-width:640px){.auth-card{padding:2rem;}}
.dark .auth-card{background:var(--bg-secondary);}
.auth-mark{display:flex;margin-bottom:1.25rem;}
.auth-mark .logo{width:2rem;height:2rem;border-radius:var(--radius-2lg);background-image:var(--grad-primary);display:grid;place-items:center;color:#fff;}
.auth-title{font-size:1.25rem;line-height:1.625rem;font-weight:500;color:var(--text-primary);margin:0;}
.auth-desc{font-size:.875rem;color:var(--text-secondary);margin:.25rem 0 0;}
.auth-form{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem;}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.auth-link{background:transparent;border:0;cursor:pointer;font-size:.875rem;font-weight:500;color:var(--accent-500);padding:0;text-decoration:none;}
.auth-link:hover{text-decoration:underline;}
.auth-terms{font-size:.6875rem;color:var(--text-tertiary);margin:0;}
.auth-divider{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0;color:var(--text-tertiary);font-size:.8125rem;}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:var(--separator);}
.auth-social{display:flex;flex-direction:column;gap:.625rem;}
.social-btn{
  display:flex;width:100%;height:2.5rem;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-2lg);
  background:#fff;border:1px solid var(--border-button);box-shadow:var(--shadow-xs);cursor:pointer;font-size:.875rem;font-weight:500;color:var(--neutral-900);
  transition:background-color .15s ease,border-color .15s ease;
}
.social-btn:hover{background:var(--neutral-50);border-color:var(--border-button-hover);}
.social-btn .si{width:1.125rem;height:1.125rem;flex:none;}
.auth-switch{margin-top:1.5rem;text-align:center;font-size:.875rem;color:var(--text-secondary);}
.checkbox-row{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.8125rem;color:var(--text-secondary);}
.checkbox-row .cb{
  display:flex;width:1rem;height:1rem;flex:none;align-items:center;justify-content:center;border-radius:var(--radius-md);
  border:1.5px solid var(--border-button-active);background:transparent;transition:background-color .15s ease,border-color .15s ease;
}
.checkbox-row input{display:none;}
.checkbox-row input:checked + .cb{background:var(--accent-500);border-color:var(--accent-500);}
.checkbox-row input:checked + .cb .icon{opacity:1;}
.checkbox-row .cb .icon{width:.75rem;height:.75rem;color:#fff;opacity:0;}

/* components showcase demos */
.demo-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center;}
.demo-col{display:flex;flex-direction:column;gap:.5rem;align-items:center;}
.badge-demo{display:inline-flex;align-items:center;gap:.25rem;border-radius:9999px;padding:.125rem .5rem;font-size:.75rem;font-weight:500;}
.toggle{position:relative;display:inline-flex;width:2.25rem;height:1.25rem;flex:none;}
.toggle input{display:none;}
.toggle .track{position:absolute;inset:0;border-radius:9999px;background:var(--neutral-300);transition:background-color .15s ease;cursor:pointer;}
.dark .toggle .track{background:var(--neutral-700);}
.toggle input:checked + .track{background:var(--accent-500);}
.toggle .thumb{position:absolute;top:.125rem;left:.125rem;width:1rem;height:1rem;border-radius:9999px;background:#fff;box-shadow:var(--shadow-xs);transition:transform .15s ease;}
.toggle input:checked + .track .thumb{transform:translateX(1rem);}
.tab-demo{display:flex;gap:.25rem;background:var(--bg-secondary);border-radius:9999px;padding:.125rem;}
.tab-demo button{border:0;background:transparent;cursor:pointer;border-radius:9999px;padding:.25rem .75rem;font-size:.8125rem;font-weight:500;color:var(--text-secondary);}
.tab-demo button.active{background:var(--bg-primary);color:var(--text-primary);box-shadow:var(--shadow-xs);}
.slider-demo{width:160px;height:1.25rem;display:flex;align-items:center;}
.slider-demo input[type=range]{width:100%;accent-color:var(--accent-500);}
.avatar-stack{display:flex;}
.avatar-stack .av{width:2rem;height:2rem;border-radius:9999px;border:2px solid var(--bg-secondary);margin-inline-start:-.5rem;background:var(--accent-500);display:grid;place-items:center;color:#fff;font-size:.625rem;font-weight:600;}
.avatar-stack .av:first-child{margin-inline-start:0;}
.avatar-stack .av:nth-child(2){background:var(--tile-purple);}
.avatar-stack .av:nth-child(3){background:var(--tile-orange);}
.avatar-stack .av.more{background:var(--neutral-300);color:var(--neutral-700);}
.dark .avatar-stack .av.more{background:var(--neutral-700);color:var(--neutral-300);}
.progress-demo{width:160px;height:.375rem;border-radius:9999px;background:var(--bg-tertiary);overflow:hidden;}
.progress-demo > i{display:block;height:100%;background-image:var(--grad-primary);}
.alert-demo{display:flex;align-items:flex-start;gap:.5rem;border-radius:var(--radius-2lg);padding:.625rem .75rem;font-size:.8125rem;width:100%;}
.alert-demo.info{background:var(--status-cyan-bg);color:var(--status-cyan-tx);}
.alert-demo.success{background:var(--status-lime-bg);color:var(--status-lime-tx);}
.alert-demo .icon{width:1rem;height:1rem;flex:none;margin-top:.0625rem;}
.kbd-demo{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 .375rem;border-radius:var(--radius-md);background:var(--kbd-bg);color:var(--kbd-fg);font-size:.75rem;font-family:var(--font-mono);font-weight:500;}
.tooltip-demo{position:relative;}
.tooltip-demo .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--neutral-900);color:var(--neutral-50);font-size:.75rem;padding:.25rem .5rem;border-radius:var(--radius-md);white-space:nowrap;}
.dark .tooltip-demo .tip{background:var(--neutral-700);color:var(--neutral-50);}