/*!
 * VNSO unified design tokens + theme picker styles.
 * Shared by license.vnso.vn, vmsclient.vnso.vn, vmsclient.vnso.vn/app
 * and docs-vmsclient.vnso.vn.
 */
:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: Sora, Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --bg-elev: #ffffff;
  --fg: #0b1220;
  --muted: #475569;
  --line: rgba(15,23,42,.08);
  --brand: #2563eb;
  --brand-2: #7c3aed;
  --accent: #06b6d4;
  --ok: #10b981;
  --warn: #d97706;
  --danger: #dc2626;
  --shadow: 0 24px 60px -28px rgba(37,99,235,.35);
  --code-bg: #f1f5f9;
  --code-fg: #1e293b;
}

html[data-theme] {
  --background: var(--bg, #f1f5f9);
  --foreground: var(--fg, var(--text, #0f172a));
}

html[data-theme="v0"],
html[data-theme="aurora"],
html[data-theme="terminal"],
html[data-theme="oceanic"],
html[data-theme="sakura"],
html[data-theme="stripe"],
html[data-theme="supabase"],
html[data-theme="discord"],
html[data-theme="linear"],
html[data-theme="notion"],
html[data-theme="figma"],
html[data-theme="raycast"],
html[data-theme="railway"],
html[data-theme="solarized"],
html[data-theme="monokai"],
html[data-theme="forest"],
html[data-theme="ocean-deep"],
html[data-theme="sunset"],
html[data-theme="paper"],
html[data-theme="minimal-dark"],
html[data-theme="minimal-light"],
html[data-theme="monochrome"],
html[data-theme="high-contrast-dark"],
html[data-theme="cyberpunk"],
html[data-theme="matrix"],
html[data-theme="vaporwave"],
html[data-theme="synthwave"] {
  --fg: var(--text, #e2e8f0);
  --muted: var(--text-muted, #94a3b8);
  --bg-soft: var(--bg-secondary, var(--bg-card, var(--card-bg, #111827)));
  --bg-elev: var(--card-bg, var(--bg-card, var(--bg-secondary, #111827)));
  --line: var(--border, rgba(148,163,184,.16));
  --brand: var(--primary, #3b82f6);
  --brand-2: var(--primary-light, var(--accent, #7c3aed));
  --shadow: var(--shadow-card, 0 28px 80px -38px rgba(37,99,235,.28));
  --background: var(--bg, #0f172a);
  --foreground: var(--text, #e2e8f0);
}

html[data-theme="dark"] {
  --bg: #05070d;
  --bg-soft: #0b0f1a;
  --bg-elev: #11172a;
  --fg: #e2e8f0;
  --muted: #94a3b8;
  --line: rgba(148,163,184,.14);
  --brand: #60a5fa;
  --brand-2: #a78bfa;
  --accent: #22d3ee;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --shadow: 0 30px 80px -30px rgba(96,165,250,.55);
  --code-bg: rgba(15,23,42,.72);
  --code-fg: #bae6fd;
}

html[data-theme="anthropic"] {
  --bg: #faf7f2;
  --bg-soft: #f3ede4;
  --bg-elev: #ffffff;
  --fg: #201d1a;
  --muted: #6b6257;
  --line: rgba(96,73,47,.12);
  --brand: #c2410c;
  --brand-2: #b45309;
  --accent: #d97706;
  --ok: #84cc16;
  --warn: #f59e0b;
  --danger: #f97316;
  --shadow: 0 30px 90px -40px rgba(180,83,9,.22);
  --code-bg: #f8efe3;
  --code-fg: #4a3421;
}

html[data-theme="anthropic-light"] {
  --bg: #faf7f2;
  --bg-soft: #f3ede4;
  --bg-elev: #ffffff;
  --fg: #201d1a;
  --muted: #6b6257;
  --line: rgba(96,73,47,.12);
  --brand: #c2410c;
  --brand-2: #b45309;
  --accent: #d97706;
  --ok: #15803d;
  --warn: #b45309;
  --danger: #c2410c;
  --shadow: 0 24px 70px -36px rgba(194,65,12,.24);
  --code-bg: #f3ede4;
  --code-fg: #4a3423;
}

html[data-theme="github-light"] {
  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --bg-elev: #ffffff;
  --fg: #1f2328;
  --muted: #57606a;
  --line: rgba(31,35,40,.12);
  --brand: #0969da;
  --brand-2: #1f6feb;
  --accent: #2da44e;
  --ok: #1a7f37;
  --warn: #9a6700;
  --danger: #cf222e;
  --shadow: 0 20px 56px -30px rgba(9,105,218,.22);
  --code-bg: #f6f8fa;
  --code-fg: #24292f;
}

html[data-theme="github-dim"] {
  --bg: #22272e;
  --bg-soft: #2d333b;
  --bg-elev: #2d333b;
  --fg: #adbac7;
  --muted: #909dab;
  --line: rgba(173,186,199,.16);
  --brand: #539bf5;
  --brand-2: #6cb6ff;
  --accent: #57ab5a;
  --ok: #57ab5a;
  --warn: #c69026;
  --danger: #e5534b;
  --shadow: 0 26px 72px -34px rgba(83,155,245,.32);
  --code-bg: rgba(13,17,23,.42);
  --code-fg: #cdd9e5;
}

html[data-theme="vercel-light"] {
  --bg: #ffffff;
  --bg-soft: #f5f5f5;
  --bg-elev: #ffffff;
  --fg: #09090b;
  --muted: #52525b;
  --line: rgba(9,9,11,.1);
  --brand: #111111;
  --brand-2: #404040;
  --accent: #2563eb;
  --ok: #16a34a;
  --warn: #ca8a04;
  --danger: #dc2626;
  --shadow: 0 20px 56px -34px rgba(0,0,0,.18);
  --code-bg: #fafafa;
  --code-fg: #111111;
}

html[data-theme="cursor"] {
  --bg: #0a0d12;
  --bg-soft: #10151d;
  --bg-elev: #121923;
  --fg: #e5edf6;
  --muted: #8aa0b8;
  --line: rgba(88,166,255,.16);
  --brand: #58a6ff;
  --brand-2: #7ee787;
  --accent: #7ee787;
  --ok: #7ee787;
  --warn: #e3b341;
  --danger: #ff7b72;
  --shadow: 0 28px 84px -40px rgba(88,166,255,.34);
  --code-bg: rgba(2,6,23,.52);
  --code-fg: #dbeafe;
}

html[data-theme="perplexity"] {
  --bg: #191a1a;
  --bg-soft: #202424;
  --bg-elev: #232828;
  --fg: #f4f7f7;
  --muted: #a9b6b6;
  --line: rgba(32,184,205,.14);
  --brand: #20b8cd;
  --brand-2: #14b8a6;
  --accent: #60a5fa;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #fb7185;
  --shadow: 0 28px 80px -40px rgba(32,184,205,.32);
  --code-bg: rgba(255,255,255,.06);
  --code-fg: #d5fbff;
}

html[data-theme="dracula"] {
  --bg: #282a36;
  --bg-soft: #313446;
  --bg-elev: #313446;
  --fg: #f8f8f2;
  --muted: #bd93f9;
  --line: rgba(189,147,249,.16);
  --brand: #ff79c6;
  --brand-2: #8be9fd;
  --accent: #50fa7b;
  --ok: #50fa7b;
  --warn: #f1fa8c;
  --danger: #ff5555;
  --shadow: 0 28px 80px -38px rgba(255,121,198,.34);
  --code-bg: rgba(255,255,255,.06);
  --code-fg: #f8f8f2;
}

html[data-theme="nord"] {
  --bg: #2e3440;
  --bg-soft: #3b4252;
  --bg-elev: #3b4252;
  --fg: #eceff4;
  --muted: #d8dee9;
  --line: rgba(216,222,233,.14);
  --brand: #88c0d0;
  --brand-2: #81a1c1;
  --accent: #a3be8c;
  --ok: #a3be8c;
  --warn: #ebcb8b;
  --danger: #bf616a;
  --shadow: 0 28px 80px -38px rgba(136,192,208,.28);
  --code-bg: rgba(255,255,255,.06);
  --code-fg: #eceff4;
}

html[data-theme="tokyo-night"] {
  --bg: #1a1b26;
  --bg-soft: #24283b;
  --bg-elev: #24283b;
  --fg: #c0caf5;
  --muted: #a9b1d6;
  --line: rgba(122,162,247,.16);
  --brand: #7aa2f7;
  --brand-2: #bb9af7;
  --accent: #7dcfff;
  --ok: #9ece6a;
  --warn: #e0af68;
  --danger: #f7768e;
  --shadow: 0 28px 80px -38px rgba(122,162,247,.3);
  --code-bg: rgba(255,255,255,.05);
  --code-fg: #c0caf5;
}

html[data-theme="catppuccin"] {
  --bg: #1e1e2e;
  --bg-soft: #313244;
  --bg-elev: #313244;
  --fg: #cdd6f4;
  --muted: #bac2de;
  --line: rgba(245,194,231,.16);
  --brand: #f5c2e7;
  --brand-2: #cba6f7;
  --accent: #94e2d5;
  --ok: #a6e3a1;
  --warn: #f9e2af;
  --danger: #f38ba8;
  --shadow: 0 28px 80px -38px rgba(245,194,231,.28);
  --code-bg: rgba(255,255,255,.05);
  --code-fg: #cdd6f4;
}

html[data-theme="gruvbox"] {
  --bg: #282828;
  --bg-soft: #32302f;
  --bg-elev: #32302f;
  --fg: #ebdbb2;
  --muted: #d5c4a1;
  --line: rgba(254,128,25,.14);
  --brand: #fe8019;
  --brand-2: #fabd2f;
  --accent: #b8bb26;
  --ok: #b8bb26;
  --warn: #fabd2f;
  --danger: #fb4934;
  --shadow: 0 28px 80px -38px rgba(254,128,25,.28);
  --code-bg: rgba(255,255,255,.05);
  --code-fg: #ebdbb2;
}

html[data-theme="rosepine"] {
  --bg: #191724;
  --bg-soft: #232136;
  --bg-elev: #232136;
  --fg: #e0def4;
  --muted: #908caa;
  --line: rgba(235,111,146,.16);
  --brand: #eb6f92;
  --brand-2: #9ccfd8;
  --accent: #f6c177;
  --ok: #31748f;
  --warn: #f6c177;
  --danger: #eb6f92;
  --shadow: 0 28px 80px -38px rgba(235,111,146,.28);
  --code-bg: rgba(255,255,255,.05);
  --code-fg: #e0def4;
}

html[data-theme="sepia"] {
  --bg: #f5ecd9;
  --bg-soft: #efe1c3;
  --bg-elev: #fffaf0;
  --fg: #3a2a18;
  --muted: #6b5a42;
  --line: rgba(58,42,24,.12);
  --brand: #8b4513;
  --brand-2: #b45309;
  --accent: #c2410c;
  --ok: #15803d;
  --warn: #b45309;
  --danger: #b91c1c;
  --shadow: 0 24px 70px -38px rgba(139,69,19,.24);
  --code-bg: #efe1c3;
  --code-fg: #4a311b;
}

.vnso-th-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vnso-th-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line, rgba(148,163,184,.18));
  background: color-mix(in srgb, var(--bg-elev, #fff) 82%, transparent);
  color: var(--fg, inherit);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(12px);
}
.vnso-th-btn:hover { border-color: var(--brand, #3b82f6); }
.vnso-th-btn:active { transform: translateY(1px); }
.vnso-th-btn svg { flex: none; }
.vnso-th-label { line-height: 1; }

.vnso-th-mode {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 38px;
  padding: 4px;
  border: 1px solid var(--line, rgba(148,163,184,.18));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-elev, #fff) 78%, transparent);
  backdrop-filter: blur(12px);
}
.vnso-th-mode button {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #64748b);
  cursor: pointer;
}
.vnso-th-mode button:hover,
.vnso-th-mode button[aria-checked="true"] {
  background: color-mix(in srgb, var(--brand, #3b82f6) 14%, transparent);
  color: var(--brand, #3b82f6);
}

.vnso-th-preview {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 0 1px rgba(15,23,42,.08);
  flex: none;
}

.vnso-th-menu {
  position: absolute;
  z-index: 9999;
  width: min(340px, calc(100vw - 24px));
  max-height: min(72vh, 520px);
  overflow: auto;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--line, rgba(148,163,184,.18));
  background: color-mix(in srgb, var(--bg-elev, #11172a) 94%, transparent);
  color: var(--fg, inherit);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 24px 60px -28px rgba(2,6,23,.8),
    0 8px 24px -12px rgba(2,6,23,.5);
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transition: opacity .14s ease, transform .14s ease;
  font: 13px/1.4 var(--font-sans);
  backdrop-filter: blur(16px);
}
.vnso-th-menu.open { opacity: 1; transform: translateY(0) scale(1); }
.vnso-th-group {
  padding: 8px 6px 6px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}
.vnso-th-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.vnso-th-item {
  display: grid;
  grid-template-columns: 18px 18px 1fr 16px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.vnso-th-item:hover {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border-color: color-mix(in srgb, var(--brand) 24%, transparent);
}
.vnso-th-item[aria-checked="true"] {
  color: var(--brand, #3b82f6);
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.vnso-th-item .vnso-th-c { opacity: 0; color: var(--brand, #3b82f6); }
.vnso-th-item[aria-checked="true"] .vnso-th-c { opacity: 1; }
.vnso-th-item .vnso-th-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 720px) {
  .vnso-th-label { display: none; }
  .vnso-th-menu { width: min(320px, calc(100vw - 20px)); }
  .vnso-th-grid { grid-template-columns: 1fr; }
}