/* BYD Service Portal — shared design tokens */
:root{
  --bg:#07090d;
  --bg-2:#0b0e14;
  --panel:#0f131a;
  --panel-2:#141a23;
  --panel-3:#1a212c;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --text:#eef2f7;
  --text-2:#b9c3d0;
  --muted:#7f8b9c;
  --brand:#e3313b;
  --brand-2:#ff5a4f;
  --wd:#f6b73c;
  --wsm:#4b8dff;
  --dsm:#25c59b;
  --ok:#25c59b;
  --err:#ff6b6b;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 20px 60px -20px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.35);
  --font:"Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Code",ui-monospace,SFMono-Regular,Consolas,monospace;
  /* theme-dependent extras */
  --line-3:rgba(255,255,255,.2);
  --tint:rgba(255,255,255,.05);
  --text-strong:#fff;
  --topbar-bg:rgba(7,9,13,.75);
  --panel-fade:rgba(15,19,26,.95);
  --brand-soft:rgba(227,49,59,.16);
  --brand-glow:rgba(227,49,59,.85);
  --brand-grad:linear-gradient(145deg,#ff4b4b,#b3141d);
  --btn-grad:linear-gradient(180deg,#f0414a,#c51f29);
  --glow-a:rgba(58,111,247,.10);
  --glow-b:rgba(227,49,59,.08);
  color-scheme:dark;
}

/* ---------- Themes (html[data-theme]) ---------- */
:root[data-theme="light"]{
  --bg:#f4f5f8; --bg-2:#eceef2; --panel:#ffffff; --panel-2:#f7f8fa; --panel-3:#eef0f4;
  --line:rgba(15,23,42,.09); --line-2:rgba(15,23,42,.14); --line-3:rgba(15,23,42,.24);
  --tint:rgba(15,23,42,.045); --text:#111827; --text-2:#374151; --muted:#6b7280; --text-strong:#0b1220;
  --topbar-bg:rgba(255,255,255,.8); --panel-fade:rgba(255,255,255,.96);
  --brand:#d92a34; --brand-2:#e3313b; --brand-soft:rgba(217,42,52,.12); --brand-glow:rgba(217,42,52,.45);
  --wd:#c98a07; --wsm:#2563eb; --dsm:#059669; --ok:#059669; --err:#dc2626;
  --glow-a:rgba(37,99,235,.08); --glow-b:rgba(217,42,52,.06);
  --shadow:0 20px 50px -24px rgba(15,23,42,.35), 0 2px 6px rgba(15,23,42,.08);
  color-scheme:light;
}
:root[data-theme="gemini"]{
  --bg:#131314; --bg-2:#18191a; --panel:#1e1f20; --panel-2:#232426; --panel-3:#2a2b2e;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.13); --line-3:rgba(255,255,255,.22);
  --text:#e3e3e3; --text-2:#c4c7c5; --muted:#8e918f; --text-strong:#fff;
  --topbar-bg:rgba(19,19,20,.8); --panel-fade:rgba(30,31,32,.96);
  --brand:#8ab4f8; --brand-2:#a8c7fa; --brand-soft:rgba(138,180,248,.16); --brand-glow:rgba(155,114,203,.55);
  --brand-grad:linear-gradient(135deg,#4285f4 0%,#9b72cb 55%,#d96570 100%);
  --btn-grad:linear-gradient(90deg,#4285f4 0%,#9b72cb 60%,#d96570 100%);
  --wd:#fdd663; --wsm:#8ab4f8; --dsm:#81c995; --ok:#81c995; --err:#f28b82;
  --glow-a:rgba(66,133,244,.14); --glow-b:rgba(155,114,203,.12);
  --radius:20px;
  --font:"Google Sans","Google Sans Text","Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
}
:root[data-theme="gemini-light"]{
  --bg:#ffffff; --bg-2:#f0f4f9; --panel:#f8fafd; --panel-2:#f0f4f9; --panel-3:#e9eef6;
  --line:rgba(31,31,31,.08); --line-2:rgba(31,31,31,.13); --line-3:rgba(31,31,31,.22);
  --tint:rgba(11,87,208,.05); --text:#1f1f1f; --text-2:#444746; --muted:#747775; --text-strong:#0b0b0b;
  --topbar-bg:rgba(255,255,255,.82); --panel-fade:rgba(248,250,253,.97);
  --brand:#0b57d0; --brand-2:#1a73e8; --brand-soft:rgba(11,87,208,.12); --brand-glow:rgba(66,133,244,.4);
  --brand-grad:linear-gradient(135deg,#4285f4 0%,#9b72cb 55%,#d96570 100%);
  --btn-grad:linear-gradient(90deg,#4285f4 0%,#9b72cb 60%,#d96570 100%);
  --wd:#b06000; --wsm:#0b57d0; --dsm:#146c2e; --ok:#146c2e; --err:#b3261e;
  --glow-a:rgba(66,133,244,.10); --glow-b:rgba(217,101,112,.07);
  --shadow:0 18px 44px -22px rgba(60,64,67,.35), 0 1px 3px rgba(60,64,67,.12);
  --radius:20px;
  --font:"Google Sans","Google Sans Text","Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
  color-scheme:light;
}
/* Gemini: gradient headline text */
:root[data-theme^="gemini"] .grad-text,:root[data-theme^="gemini"] .page-head h1,:root[data-theme^="gemini"] .vhero h1{
  background:linear-gradient(90deg,#4285f4,#9b72cb,#d96570);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Theme picker (shared) */
.theme-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 4px 2px}
.theme-opt{display:flex!important;flex-direction:column;align-items:flex-start!important;gap:6px!important;padding:8px!important;border:1px solid var(--line)!important;border-radius:10px!important;font-size:12.5px!important}
.theme-opt.on{border-color:var(--brand)!important;box-shadow:0 0 0 2px var(--brand-soft)}
.theme-sw{display:flex;width:100%;height:22px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.theme-sw i{flex:1}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font:15px/1.5 var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--brand-soft)}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:8px}

/* Wordmark */
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.02em}
.brand-mark{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--brand-grad);
  box-shadow:0 8px 24px -8px var(--brand-glow), inset 0 1px 0 var(--line-3);
  font-size:13px;letter-spacing:.06em;color:#fff;
}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text b{font-size:15px}
.brand-text small{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--panel-2);cursor:pointer;font-weight:600;font-size:14px;
  transition:background .15s,border-color .15s,transform .15s;
}
.btn:hover{background:var(--panel-3);border-color:var(--line-3)}
.btn:active{transform:translateY(1px)}
.btn-primary{
  border:0;color:#fff;
  background:var(--btn-grad);
  box-shadow:0 10px 30px -10px var(--brand-glow), inset 0 1px 0 var(--line-3);
}
.btn-primary:hover{background:var(--btn-grad);filter:brightness(1.08)}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--tint);border-color:var(--line)}
.btn-icon{width:40px;height:40px;padding:0;border-radius:11px}
.btn svg{width:18px;height:18px;flex:none}

.pill{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.02em;
  background:var(--tint);border:1px solid var(--line);color:var(--text-2);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}