/* Shared visual identity, scoped to the independent service frontend. */
:root { --bg:#0a0e15; --surface:#101722; --surface-2:#17202e; --line:rgba(212,181,127,.16); --line-strong:rgba(212,181,127,.3); --text:#f1eee7; --muted:#a3abba; --cyan:#d4b57f; --cyan-dark:#3e3425; --amber:#e1c79c; --font-sans: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
html[data-theme="light"] { --bg:#f5f3ef; --surface:#fff; --surface-2:#ece8e0; --text:#273344; --muted:#687285; --cyan:#9a7239; --cyan-dark:#eee1cd; }
body { background: #0a0e14; color: #dce0e6; }
.topbar,.simple-header { border-color: #29303b; background: #0d121b; }
.brand-mark { background: #c7a675; color: #111722; }
.brand strong { color: #f4efe5; }
.brand small { color: #a3aaba; }
.runtime-notice { grid-column: 1/-1; padding: 14px 20px; margin: 0 0 24px; border: 1px solid #66563b; border-radius: 10px; background: #282318; color: #e4cd9e; font-size: 13px; }
.account-sidebar { align-self: start; }
.account-sidebar,.stat-grid article,.dashboard-panel,.user-menu-dropdown,.key-row { background:var(--surface); }
.account-sidebar > nav a { color:var(--muted); }
.account-sidebar > nav a.active,.stat-grid article.accent-stat { border-color:var(--line-strong); background:var(--surface-2); }
.button.primary,.brand-mark { box-shadow:none; }
html[data-theme="light"] body { background: #f5f3ef; color: #273344; }
html[data-theme="light"] .topbar,html[data-theme="light"] .simple-header { background: #fff; }
html[data-theme="light"] .brand strong { color: #172132; }

/* One-time API credentials must remain legible in both themes. */
.new-key-banner { background:var(--surface-2); border-color:var(--cyan); }
.new-key-banner > div { max-width:100%; }
.new-key-banner span,.new-key-banner p { color:var(--text); font-size:12px; }
.new-key-banner code { padding:14px 16px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--text); font:500 14px/1.7 var(--mono); white-space:normal; overflow-wrap:anywhere; user-select:all; }
.new-key-banner code::selection { color:#101722; background:#e8cb98; }
.new-key-banner .button.primary { color:#17130d; background:#d4b57f; flex-shrink:0; }
html[data-theme="light"] .new-key-banner .button.primary { color:#fff; background:#76501b; }
.key-primary code,.key-facts strong { color:var(--text); }
.key-primary > div > span,.key-primary small,.key-facts span { color:var(--muted); }