/* CommerceOS v0.15 theme system
   Light palette: evergreen, terracotta, ochre, mauve.
   Dark palette: copper, mint, lavender, chartreuse.
   The two modes intentionally use different accent families. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f6f1;
  --sidebar: #ffffff;
  --panel: #ffffff;
  --panel-2: #f7f8f4;
  --panel-3: #edf0e8;
  --line: #dfe4da;
  --line-soft: rgba(44, 58, 43, .12);
  --text: #252c25;
  --muted: #687468;
  --subtle: #8a9488;
  --accent-1: #46744d;
  --accent-2: #c56f50;
  --accent-3: #bd963b;
  --accent-4: #8067a6;
  --blue: var(--accent-1);
  --blue-bright: #315e3a;
  --cyan: var(--accent-2);
  --green: #347a52;
  --amber: #a77d2d;
  --red: #b84646;
  --purple: var(--accent-4);
  --radius: 16px;
  --shadow: 0 16px 44px rgba(38, 50, 35, .10);
  --surface-elevated: rgba(255,255,255,.98);
  --surface-glass: rgba(255,255,255,.88);
  --border-highlight: rgba(70,116,77,.24);
  --shadow-soft: 0 10px 30px rgba(38,50,35,.07);
  --shadow-lift: 0 18px 45px rgba(38,50,35,.11);
  --button-text: #ffffff;
  --on-primary: #ffffff;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12110f;
  --sidebar: #171512;
  --panel: #1d1a16;
  --panel-2: #25211c;
  --panel-3: #302920;
  --line: #40372d;
  --line-soft: rgba(229,211,185,.12);
  --text: #f4eee5;
  --muted: #b9ad9d;
  --subtle: #897b69;
  --accent-1: #df9366;
  --accent-2: #7bd4b1;
  --accent-3: #c7a5ed;
  --accent-4: #d5df78;
  --blue: var(--accent-1);
  --blue-bright: #f0b086;
  --cyan: var(--accent-2);
  --green: #83d4a9;
  --amber: var(--accent-4);
  --red: #ff8d82;
  --purple: var(--accent-3);
  --radius: 16px;
  --shadow: 0 20px 70px rgba(0,0,0,.32);
  --surface-elevated: rgba(34,30,25,.96);
  --surface-glass: rgba(24,21,18,.86);
  --border-highlight: rgba(223,147,102,.23);
  --shadow-soft: 0 14px 38px rgba(0,0,0,.20);
  --shadow-lift: 0 24px 54px rgba(0,0,0,.30);
  --button-text: #20150f;
  --on-primary: #20150f;
}

html[data-theme] { background: var(--bg); }
html[data-theme] body {
  background: var(--bg) !important;
  color: var(--text) !important;
  color-scheme: inherit;
  transition: background-color .18s ease, color .18s ease;
}
html[data-theme] .app-shell { background: var(--bg); }
html[data-theme] .sidebar {
  background: var(--sidebar) !important;
  color: var(--text);
  border-right: 1px solid var(--line) !important;
  box-shadow: none;
}
html[data-theme] .brand-mark {
  background: linear-gradient(135deg,var(--accent-1),var(--accent-2) 45%,var(--accent-4)) !important;
  box-shadow: 0 5px 17px color-mix(in srgb,var(--accent-1) 18%,transparent) !important;
}
html[data-theme] .brand-name span { color: var(--accent-1) !important; }
html[data-theme] .brand-sub,
html[data-theme] .nav-label { color: var(--subtle) !important; }
html[data-theme] .workspace-switcher {
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
  color: var(--text);
}
html[data-theme] .workspace-logo { background: var(--accent-3); color: #fff; }
html[data-theme] .workspace-copy span,
html[data-theme] .profile-copy span { color: var(--muted) !important; }
html[data-theme] .nav-item { color: var(--muted) !important; }
html[data-theme] .nav-item:hover {
  background: color-mix(in srgb,var(--accent-1) 8%,var(--panel)) !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb,var(--accent-1) 18%,var(--line)) !important;
}
html[data-theme] .nav-item.active {
  color: var(--accent-1) !important;
  background: color-mix(in srgb,var(--accent-1) 11%,var(--panel)) !important;
  border-color: color-mix(in srgb,var(--accent-1) 22%,var(--line)) !important;
}
html[data-theme] .nav-ico,
html[data-theme] .nav-item.active .nav-ico { color: var(--accent-1) !important; }
html[data-theme] .nav-tag { background: color-mix(in srgb,var(--accent-4) 14%,var(--panel)); color: var(--accent-4); }
html[data-theme] .nav-count { background: var(--panel-3); color: var(--muted); }
html[data-theme] .nav-dot { background: var(--accent-2); box-shadow: 0 0 8px color-mix(in srgb,var(--accent-2) 40%,transparent); }
html[data-theme] .health-card {
  border-color: var(--line) !important;
  background: linear-gradient(145deg,color-mix(in srgb,var(--accent-3) 7%,var(--panel)),var(--panel-2)) !important;
}
html[data-theme] .health-card p { color: var(--muted) !important; }
html[data-theme] .health-link { color: var(--accent-1) !important; }
html[data-theme] .profile-row { border-color: var(--line) !important; }
html[data-theme] .avatar,
html[data-theme] .top-avatar {
  background: linear-gradient(135deg,var(--accent-1),var(--accent-4)) !important;
  border-color: color-mix(in srgb,var(--accent-1) 40%,var(--line)) !important;
  color: #fff !important;
}
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .top-avatar { color: #1f1712 !important; }
html[data-theme] .topbar {
  background: color-mix(in srgb,var(--sidebar) 90%,transparent) !important;
  border-bottom-color: var(--line) !important;
}
html[data-theme] .breadcrumbs strong { color: var(--text) !important; }
html[data-theme] .breadcrumbs,
html[data-theme] .crumb-slash { color: var(--muted) !important; }
html[data-theme] .store-status { border-color: var(--line) !important; color: var(--muted) !important; }
html[data-theme] .icon-button {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--muted) !important;
}
html[data-theme] .icon-button:hover {
  background: var(--panel-3) !important;
  color: var(--text) !important;
  border-color: var(--accent-1) !important;
}
html[data-theme] .prototype-banner {
  background: color-mix(in srgb,var(--accent-3) 9%,var(--panel)) !important;
  border-color: color-mix(in srgb,var(--accent-3) 30%,var(--line)) !important;
  color: var(--muted) !important;
  box-shadow: none;
}
html[data-theme] .prototype-banner strong { color: var(--text) !important; }
html[data-theme] .banner-icon { border-color: var(--accent-3) !important; color: var(--accent-3) !important; }
html[data-theme] .prototype-banner button { color: var(--muted) !important; }
html[data-theme] .app-footer { border-top-color: var(--line) !important; color: var(--subtle) !important; }
html[data-theme] .footer-dot { color: var(--accent-2) !important; }
html[data-theme] .view-content { color: var(--text); }
html[data-theme] .eyebrow { color: var(--accent-1) !important; }
html[data-theme] .page-heading h1 { color: var(--text) !important; }
html[data-theme] .page-heading p { color: var(--muted) !important; }
html[data-theme] .panel,
html[data-theme] .metric-card,
html[data-theme] .integration-card,
html[data-theme] .chart-panel,
html[data-theme] .preview-shell {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-soft) !important;
}
html[data-theme] .panel-head { border-color: var(--line) !important; }
html[data-theme] .panel-title,
html[data-theme] .metric-value,
html[data-theme] .integration-card h3 { color: var(--text) !important; }
html[data-theme] .panel-subtitle,
html[data-theme] .metric-label,
html[data-theme] .metric-foot,
html[data-theme] .integration-card p { color: var(--muted) !important; }
html[data-theme] .metric-card:before { background: radial-gradient(circle,color-mix(in srgb,var(--accent-1) 14%,transparent),transparent 70%) !important; }
html[data-theme] .metric-icon { border: 1px solid var(--line) !important; }
html[data-theme] .metric-card:nth-child(4n+1) .metric-icon,
html[data-theme] .stat-box:nth-child(4n+1) .list-avatar { background: color-mix(in srgb,var(--accent-1) 13%,var(--panel)) !important; color: var(--accent-1) !important; }
html[data-theme] .metric-card:nth-child(4n+2) .metric-icon { background: color-mix(in srgb,var(--accent-2) 13%,var(--panel)) !important; color: var(--accent-2) !important; }
html[data-theme] .metric-card:nth-child(4n+3) .metric-icon { background: color-mix(in srgb,var(--accent-3) 14%,var(--panel)) !important; color: var(--accent-3) !important; }
html[data-theme] .metric-card:nth-child(4n+4) .metric-icon { background: color-mix(in srgb,var(--accent-4) 13%,var(--panel)) !important; color: var(--accent-4) !important; }
html[data-theme] .button {
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme] .button:hover { background: var(--panel-3) !important; border-color: var(--accent-1) !important; }
html[data-theme] .button.primary,
html[data-theme] .support-send-button,
html[data-theme] .mobile-quick-add {
  background: linear-gradient(135deg,var(--accent-1),color-mix(in srgb,var(--accent-1) 80%,var(--accent-2))) !important;
  color: var(--button-text) !important;
  border-color: var(--accent-1) !important;
  box-shadow: 0 8px 20px color-mix(in srgb,var(--accent-1) 16%,transparent) !important;
}
html[data-theme] .button.ghost { background: transparent !important; }
html[data-theme] .button.danger { color: var(--red) !important; border-color: color-mix(in srgb,var(--red) 36%,var(--line)) !important; background: color-mix(in srgb,var(--red) 7%,var(--panel)) !important; }
html[data-theme] .text-link { color: var(--accent-1) !important; }
html[data-theme] .divider { background: var(--line) !important; }
html[data-theme] .pill,
html[data-theme] .bundle-pill { border-color: var(--line) !important; }
html[data-theme] .pill.info { background: color-mix(in srgb,var(--accent-4) 12%,var(--panel)); color: var(--accent-4); }
html[data-theme] .pill.success,
html[data-theme] .bundle-pill.live { background: color-mix(in srgb,var(--accent-1) 12%,var(--panel)); color: var(--accent-1); }
html[data-theme] .pill.warning { background: color-mix(in srgb,var(--accent-3) 13%,var(--panel)); color: var(--accent-3); }
html[data-theme] .pill.danger { background: color-mix(in srgb,var(--red) 10%,var(--panel)); color: var(--red); }
html[data-theme] .pill.neutral { background: var(--panel-2); color: var(--muted); }
html[data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-theme] select,
html[data-theme] textarea,
html[data-theme] .filter-select,
html[data-theme] .field-search,
html[data-theme] .input {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder { color: var(--subtle) !important; }
html[data-theme] input:focus,
html[data-theme] select:focus,
html[data-theme] textarea:focus { outline-color: var(--accent-2) !important; border-color: var(--accent-1) !important; }
html[data-theme] .form-hint,
html[data-theme] .label,
html[data-theme] label { color: var(--muted); }
html[data-theme] .table-scroll table { border-color: var(--line); }
html[data-theme] th { background: var(--panel-2) !important; color: var(--muted) !important; border-color: var(--line) !important; }
html[data-theme] td { color: var(--text); border-color: var(--line-soft) !important; }
html[data-theme] tr:hover td { background: color-mix(in srgb,var(--accent-1) 4%,var(--panel)) !important; }
html[data-theme] .stat-box,
html[data-theme] .summary-chip,
html[data-theme] .quick-action,
html[data-theme] .channel-row,
html[data-theme] .simple-list-row,
html[data-theme] .feature-row,
html[data-theme] .block-row,
html[data-theme] .flow-node {
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
html[data-theme] .stat-box span,
html[data-theme] .simple-list-row span,
html[data-theme] .list-main span,
html[data-theme] .feature-row p,
html[data-theme] .flow-node span { color: var(--muted) !important; }
html[data-theme] .list-avatar,
html[data-theme] .feature-symbol,
html[data-theme] .integration-icon { background: color-mix(in srgb,var(--accent-1) 10%,var(--panel)) !important; color: var(--accent-1) !important; border-color: var(--line) !important; }
html[data-theme] .channel-icon { color: var(--accent-2) !important; }
html[data-theme] .bar-fill { background: linear-gradient(90deg,var(--accent-1),var(--accent-2)) !important; }
html[data-theme] .chart-grid { stroke: var(--line) !important; }
html[data-theme] .legend-dot { background: var(--accent-1) !important; }
html[data-theme] .command-dialog,
html[data-theme] .modal { background: var(--panel) !important; border-color: var(--line) !important; color: var(--text) !important; }
html[data-theme] .command-search-row,
html[data-theme] .command-footer,
html[data-theme] .modal-head,
html[data-theme] .modal-foot { border-color: var(--line) !important; }
html[data-theme] .command-result { color: var(--text) !important; }
html[data-theme] .command-result:hover,
html[data-theme] .command-result.selected { background: color-mix(in srgb,var(--accent-1) 9%,var(--panel)) !important; border-color: color-mix(in srgb,var(--accent-1) 25%,var(--line)) !important; }
html[data-theme] .command-result-icon { background: color-mix(in srgb,var(--accent-4) 12%,var(--panel)); color: var(--accent-4); }
html[data-theme] .command-result-copy small,
html[data-theme] .command-empty,
html[data-theme] .command-empty strong { color: var(--muted) !important; }
html[data-theme] .modal-backdrop { background: color-mix(in srgb,var(--text) 28%,transparent) !important; }
html[data-theme] .modal-foot { background: var(--panel) !important; }
html[data-theme] .tab-row { background: var(--panel-2) !important; border-color: var(--line) !important; }
html[data-theme] .tab-button { color: var(--muted) !important; }
html[data-theme] .tab-button.active { background: color-mix(in srgb,var(--accent-1) 14%,var(--panel)) !important; color: var(--accent-1) !important; }
html[data-theme] .warning-note { border-color: color-mix(in srgb,var(--accent-3) 28%,var(--line)) !important; background: color-mix(in srgb,var(--accent-3) 7%,var(--panel)) !important; color: var(--muted) !important; }
html[data-theme] .warning-note strong { color: var(--accent-3) !important; }
html[data-theme] .hero-mini { background: radial-gradient(circle at top right,color-mix(in srgb,var(--accent-1) 16%,transparent),transparent 58%),var(--panel-2) !important; border-color: var(--line) !important; }
html[data-theme] .hero-mini .hero-label { color: var(--accent-1) !important; }
html[data-theme] .hero-mini p { color: var(--muted) !important; }
html[data-theme] .product-box { background: linear-gradient(140deg,var(--accent-2),var(--accent-1) 58%,var(--accent-4)) !important; border-color: color-mix(in srgb,var(--accent-2) 32%,white) !important; }
html[data-theme] .product-bag { background: linear-gradient(145deg,var(--accent-3),var(--accent-2)) !important; }
html[data-theme] .product-sphere { background: radial-gradient(circle at 30% 25%,var(--accent-4),var(--accent-1) 68%,var(--panel-3)) !important; }
html[data-theme] .chip-sales { background: color-mix(in srgb,var(--accent-1) 14%,var(--panel)) !important; color: var(--accent-1) !important; border-color: var(--line) !important; }
html[data-theme] .chip-orders { background: color-mix(in srgb,var(--accent-2) 13%,var(--panel)) !important; color: var(--accent-2) !important; border-color: var(--line) !important; }
html[data-theme] .support-hero { background: radial-gradient(circle at 85% 20%,color-mix(in srgb,var(--accent-4) 19%,transparent),transparent 35%),linear-gradient(125deg,var(--panel),var(--panel-2)) !important; border-color: var(--line) !important; }
html[data-theme] .support-hero h2,
html[data-theme] .support-agent-copy strong,
html[data-theme] .support-guardrail-card strong { color: var(--text) !important; }
html[data-theme] .support-hero p,
html[data-theme] .support-agent-copy span,
html[data-theme] .support-message-meta { color: var(--muted) !important; }
html[data-theme] .support-chat-shell,
html[data-theme] .support-chat-head,
html[data-theme] .support-suggest-area,
html[data-theme] .support-chat-composer,
html[data-theme] .support-guardrail-card { background: var(--panel-2) !important; border-color: var(--line) !important; }
html[data-theme] .support-chat-context { background: color-mix(in srgb,var(--accent-1) 6%,var(--panel)) !important; border-color: var(--line) !important; color: var(--muted) !important; }
html[data-theme] .support-message-avatar { background: color-mix(in srgb,var(--accent-1) 10%,var(--panel)); border-color: var(--line); color: var(--accent-1); }
html[data-theme] .support-bubble { background: var(--panel) !important; color: var(--text) !important; border-color: var(--line) !important; }
html[data-theme] .from-customer .support-bubble { background: color-mix(in srgb,var(--accent-1) 14%,var(--panel)) !important; color: var(--text) !important; }
html[data-theme] .support-suggestion { background: var(--panel) !important; border-color: var(--line) !important; color: var(--text) !important; }
html[data-theme] .support-suggestion span,
html[data-theme] .support-chat-context span { color: var(--accent-2) !important; }
html[data-theme] .support-head-tag { background: var(--panel-3) !important; border-color: var(--line) !important; color: var(--accent-4) !important; }
html[data-theme] .support-config-note { color: var(--muted) !important; }
html[data-theme] .support-guardrail-card p,
html[data-theme] .support-chat-foot,
html[data-theme] .support-preview-actions>span { color: var(--muted) !important; }
html[data-theme] .pricing-hero-result,
html[data-theme] .pricing-results,
html[data-theme] .pricing-explainer,
html[data-theme] .pricing-note,
html[data-theme] .pricing-meter { background-color: var(--panel-2) !important; border-color: var(--line) !important; }
html[data-theme] .pricing-hero-result strong,
html[data-theme] .pricing-metric strong { color: var(--text) !important; }
html[data-theme] .pricing-metric span,
html[data-theme] .pricing-explainer p,
html[data-theme] .pricing-note { color: var(--muted) !important; }
html[data-theme] .toast { background: var(--panel); border-color: var(--line); color: var(--text); }
html[data-theme] .mobile-bottom-nav { background: color-mix(in srgb,var(--sidebar) 94%,transparent) !important; border-color: var(--line) !important; }
html[data-theme] .mobile-nav-item { color: var(--muted) !important; }
html[data-theme] .mobile-nav-item.active { background: color-mix(in srgb,var(--accent-1) 12%,var(--panel)) !important; color: var(--accent-1) !important; border-color: color-mix(in srgb,var(--accent-1) 24%,var(--line)) !important; }

/* Account, sign-in, registration and authenticated workspace portal */
html[data-theme] .account-wrap { color: var(--text) !important; }
html[data-theme] .account-top { gap: 12px; flex-wrap: wrap; }
html[data-theme] .account-top-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:wrap; }
html[data-theme] .account-workspace-heading { flex:1; min-width:0; }
html[data-theme] .account-user-identity p { font-size:12px; }
html[data-theme] .account-top a { color: var(--accent-1) !important; }
html[data-theme] .account-card {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-soft) !important;
}
html[data-theme] .account-card h2 { color: var(--text) !important; }
html[data-theme] .account-card p,
html[data-theme] .account-card .muted,
html[data-theme] .bundle-muted { color: var(--muted) !important; }
html[data-theme] .account-card label { color: var(--muted) !important; }
html[data-theme] .account-card input:not([type="checkbox"]):not([type="color"]),
html[data-theme] .account-card select,
html[data-theme] .account-card textarea {
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
html[data-theme] .account-card input:focus,
html[data-theme] .account-card select:focus,
html[data-theme] .account-card textarea:focus { outline-color: var(--accent-2) !important; }
html[data-theme] .account-card button:not(.secondary),
html[data-theme] .action-link {
  background: linear-gradient(135deg,var(--accent-1),color-mix(in srgb,var(--accent-1) 80%,var(--accent-2))) !important;
  color: var(--button-text) !important;
  border: 1px solid var(--accent-1) !important;
}
html[data-theme] .account-card button.secondary {
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}
html[data-theme] .status { background: var(--panel-2) !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
html[data-theme] .workspace-row,
html[data-theme] .product-row { border-color: var(--line) !important; }
html[data-theme] .product-row small { color: var(--muted) !important; }
html[data-theme] .bundle-panel { border-top-color: var(--line) !important; }
html[data-theme] .bundle-stat,
html[data-theme] .bundle-offer-card,
html[data-theme] .bundle-tier-row,
html[data-theme] .bundle-quote,
html[data-theme] .bundle-empty {
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
html[data-theme] .bundle-stat span,
html[data-theme] .bundle-offer-meta { color: var(--muted) !important; }
html[data-theme] .bundle-stat strong { color: var(--text) !important; }
html[data-theme] .bundle-pill { background: var(--panel-3) !important; color: var(--muted) !important; }
html[data-theme] .bundle-pill.live { background: color-mix(in srgb,var(--accent-1) 13%,var(--panel)) !important; color: var(--accent-1) !important; }
html[data-theme] .bundle-panel hr,
html[data-theme] .account-card hr { border-color: var(--line) !important; }
html[data-theme] .account-user-identity { display:flex; align-items:center; gap:12px; padding:12px; margin:0 0 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
html[data-theme] .account-avatar { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(135deg,var(--accent-1),var(--accent-4)); color:var(--on-primary); font-size:13px; font-weight:800; }
html[data-theme="dark"] .account-avatar { color:#211710; }
html[data-theme] .account-user-identity strong { display:block; color:var(--text); font-size:12px; }
html[data-theme] .account-user-identity p { margin:2px 0 0; color:var(--muted); overflow-wrap:anywhere; }
html[data-theme] .account-user-identity small { display:block; color:var(--subtle); font-size:10px; margin-top:2px; }
html[data-theme] .auth-mode-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; margin:17px 0 8px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
html[data-theme] .account-card .auth-mode-tabs button { width:auto; margin:0; padding:10px; background:transparent !important; color:var(--muted) !important; border:1px solid transparent !important; box-shadow:none; }
html[data-theme] .account-card .auth-mode-tabs button.active { background:var(--panel) !important; color:var(--accent-1) !important; border-color:var(--line) !important; box-shadow:0 2px 8px rgba(0,0,0,.06); }
html[data-theme] .auth-footnote { font-size:11px !important; color:var(--muted) !important; margin-top:10px !important; }

.theme-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font: 700 10px/1 Manrope,Inter,system-ui,sans-serif;
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
}
.theme-toggle:hover { border-color: var(--accent-1); background: var(--panel-2); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.theme-toggle-icon { display:inline-grid; place-items:center; width:17px; height:17px; color:var(--accent-2); font-size:17px; line-height:1; }
.theme-toggle-label { color: var(--muted); }

@media (max-width: 760px) {
  html[data-theme] .sidebar { z-index: 45 !important; flex-shrink: 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  html[data-theme] .sidebar.open { z-index: 45 !important; }
  html[data-theme] .mobile-overlay.show { z-index: 40 !important; }
  html[data-theme] .sidebar .brand-lockup,
  html[data-theme] .sidebar .workspace-switcher,
  html[data-theme] .sidebar .nav-label,
  html[data-theme] .sidebar .main-nav,
  html[data-theme] .sidebar .sidebar-bottom { flex-shrink: 0; }
  html[data-theme] .sidebar .sidebar-bottom { margin-top: 20px; }
  html[data-theme] .theme-toggle { min-width: 36px; width:36px; min-height:34px; padding:7px; }
  html[data-theme] .theme-toggle-label { display:none; }
  html[data-theme] .topbar-actions { flex: 0 0 auto; min-width:0; }
  html[data-theme] .mobile-menu { flex-shrink:0; }
  html[data-theme] .prototype-banner { gap:8px; line-height:1.55; }
}
@media (max-width: 520px) {
  html[data-theme] .account-entry { display:none !important; }
  html[data-theme] .top-action,
  html[data-theme] .top-avatar { display:none !important; }
  html[data-theme] .topbar { gap:7px; padding-left:11px; padding-right:11px; }
  html[data-theme] .topbar-actions { gap:2px; }
}
@media (max-width: 390px) {
  html[data-theme] .mobile-brand { font-size:11px; gap:6px; }
  html[data-theme] .theme-toggle { margin-left:1px; }
  html[data-theme] .account-wrap { padding-left:10px; padding-right:10px; }
  html[data-theme] .account-card { padding:17px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body { transition:none; }
}

/* v0.16 account/navigation repair and visible local Ask AI workspace */
html[data-theme] .brand-home-link,
html[data-theme] .mobile-home-link {
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer;
}
html[data-theme] .brand-home-link { border-radius: 10px; }
html[data-theme] .brand-home-link:focus-visible,
html[data-theme] .mobile-home-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; }
html[data-theme] .brand-home-link:hover .brand-name,
html[data-theme] .mobile-home-link:hover strong { color: var(--accent-1) !important; }
html[data-theme] .mobile-home-link { min-width: 0; flex: 0 1 auto; }
html[data-theme] .mobile-home-link strong { color: var(--text); }
.ask-ai-hero {
  display:flex; align-items:center; gap:18px; padding:22px 24px; margin-bottom:14px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent-1) 9%,var(--panel)),var(--panel));
  border:1px solid var(--line); border-radius:var(--radius);
}
.ask-ai-mark { flex:0 0 58px; height:58px; display:grid; place-items:center; border-radius:19px;
  color:var(--accent-1); font-size:29px; background:color-mix(in srgb,var(--accent-1) 12%,var(--panel));
  border:1px solid color-mix(in srgb,var(--accent-1) 23%,var(--line));
}
.ask-ai-kicker { display:flex; align-items:center; gap:7px; color:var(--accent-1); font:800 9px/1.3 'DM Mono',monospace; letter-spacing:1.2px; }
.ask-ai-dot { width:7px; height:7px; border-radius:50%; background:var(--accent-1); }
.ask-ai-hero h2 { font-size:clamp(19px,2.3vw,26px); margin:7px 0 4px; letter-spacing:-.6px; }
.ask-ai-hero p { margin:0; color:var(--muted); font-size:11px; max-width:720px; }
.ask-ai-chat-panel { overflow:hidden; }
.ask-ai-chat-head { display:flex; align-items:center; gap:11px; padding:16px 19px; border-bottom:1px solid var(--line-soft); }
.ask-ai-avatar { flex:0 0 36px; height:36px; display:grid; place-items:center; border-radius:12px; color:var(--accent-1); background:color-mix(in srgb,var(--accent-1) 10%,var(--panel)); border:1px solid var(--line); font-size:17px; }
.ask-ai-chat-head strong { display:block; font-size:12px; }
.ask-ai-chat-head span:not(.ask-ai-status) { display:block; margin-top:3px; font-size:10px; color:var(--muted); }
.ask-ai-status { margin-left:auto; border-radius:99px; padding:5px 8px; border:1px solid var(--line); color:var(--accent-1); font:800 8px 'DM Mono',monospace; }
.ask-ai-transcript { display:grid; gap:13px; padding:19px; min-height:175px; max-height:430px; overflow:auto; scroll-behavior:smooth; }
.ask-ai-message { display:grid; gap:5px; max-width:min(720px,92%); }
.ask-ai-message.from-user { justify-self:end; justify-items:end; }
.ask-ai-message.from-assistant { justify-self:start; }
.ask-ai-message-role { color:var(--subtle); font:800 8px 'DM Mono',monospace; letter-spacing:1px; }
.ask-ai-bubble { padding:11px 13px; border:1px solid var(--line); border-radius:5px 14px 14px 14px; background:var(--panel-2); color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.65; }
.ask-ai-message.from-user .ask-ai-bubble { border-radius:14px 5px 14px 14px; background:color-mix(in srgb,var(--accent-1) 11%,var(--panel)); }
.ask-ai-prompts { display:flex; gap:7px; flex-wrap:wrap; padding:0 19px 15px; }
.ask-ai-prompt { max-width:100%; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--text); padding:8px 11px; font-size:10px; text-align:left; }
.ask-ai-prompt:hover { border-color:var(--accent-1); background:var(--panel-2); }
.ask-ai-prompt span { color:var(--accent-1); margin-left:5px; }
.ask-ai-composer { display:flex; align-items:flex-end; gap:10px; margin:0 19px; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); }
.ask-ai-composer textarea { flex:1; min-width:0; min-height:42px; max-height:130px; resize:vertical; padding:11px; border:1px solid transparent; outline:0; border-radius:9px; background:var(--panel); color:var(--text); font:inherit; font-size:12px; }
.ask-ai-composer textarea:focus { border-color:var(--accent-2); }
.ask-ai-composer .button { min-height:42px; }
.ask-ai-note { padding:12px 20px 16px; color:var(--muted); font-size:9px; line-height:1.6; }
@media(max-width:760px) {
  html[data-theme] .sidebar { overflow-y:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  html[data-theme] body.mobile-drawer-open { overflow:hidden; }
  html[data-theme] .sidebar .brand-home-link { margin-bottom:18px; }
  html[data-theme] .sidebar .sidebar-bottom { margin-top:18px !important; }
  .ask-ai-hero { align-items:flex-start; padding:16px; gap:12px; }
  .ask-ai-mark { flex-basis:42px; height:42px; border-radius:13px; font-size:22px; }
  .ask-ai-hero h2 { font-size:19px; }
  .ask-ai-hero p { font-size:10px; }
  .ask-ai-chat-head { padding:13px; }
  .ask-ai-transcript { padding:13px; min-height:150px; }
  .ask-ai-prompts { padding:0 13px 13px; }
  .ask-ai-composer { margin:0 12px; padding:7px; gap:6px; }
  .ask-ai-composer textarea { font-size:16px; }
  .ask-ai-composer .button { padding:8px 10px; }
  .ask-ai-note { padding:11px 13px 14px; }
}

/* v0.16 account actions stay usable on narrow screens */
html[data-theme] .auth-secondary-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
html[data-theme] .auth-secondary-actions .secondary { min-width:0; flex:1 1 160px; }
html[data-theme] .auth-footnote { line-height:1.65; }
@media(max-width:420px){ html[data-theme] .auth-secondary-actions { display:grid; grid-template-columns:1fr; } }

html[data-theme] .status.status-error { color:var(--red) !important; border-color:color-mix(in srgb,var(--red) 35%,var(--line)) !important; background:color-mix(in srgb,var(--red) 7%,var(--panel-2)) !important; }