/* Oraculum foundations. VK overrides semantic tokens instead of components. */
:root {
  color-scheme: dark;
  --bg: #101114;
  --surface: #1b1d22;
  --raised: #24272d;
  --text: #f5f5f7;
  --muted: #adb0b8;
  --accent: #d8be86;
  --on-accent: #101114;
  --border: #393d45;
  --success: #a8d4b8;
  --danger: #f0b0ad;
  --danger-bg: #302124;
  --shadow: 0 12px 32px rgb(0 0 0 / 14%);
  --radius: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.6; background: var(--bg); color: var(--text); overflow-wrap: anywhere; }
main { width: 100%; max-width: 680px; margin: 0 auto; padding: 48px 20px 64px; }
h1, h2, h3 { color: var(--text); line-height: 1.2; font-weight: 650; letter-spacing: -.035em; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 16px; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
p { overflow-wrap: anywhere; }
a { color: var(--accent); text-underline-offset: 4px; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden], .hidden { display: none !important; }
.panel, .composer, .limits-card, .usage-panel, .premium, .how__step { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.btn, .btn-primary, .btn-google, .btn-ghost, .premium__cta, .deepen-upsell__btn, .limit-panel__cta, .share-actions__btn, .share-about__cta, .admin-page button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; max-width: 100%; padding: 12px 20px; border: 1px solid transparent; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-size: 1rem; font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none; transition: background 200ms ease, transform 160ms ease, opacity 200ms ease;
}
.btn:hover:not(:disabled), .btn-primary:hover, .deepen-upsell__btn:hover, .limit-panel__cta:hover, .share-about__cta:hover, .admin-page button:hover:not(:disabled) { filter: brightness(1.08); }
button:active:not(:disabled), .btn-primary:active, .btn-google:active { transform: scale(.99); }
button:disabled { cursor: not-allowed; background: var(--raised); color: var(--muted); border-color: var(--border); }
.btn, .btn-primary, .btn-google, .premium__cta { width: 100%; }
.btn-ghost, .share-actions__btn, .admin-page button.secondary { background: var(--raised); border-color: var(--border); color: var(--text); }
.btn-google { background: #fff; color: #202124; }
.btn-google:hover { background: #f1f3f4; }
.btn-google svg { flex: 0 0 auto; }
textarea, input[type="text"], input[type="password"], input[type="number"], select { width: 100%; min-width: 0; min-height: 48px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font-size: 1rem; line-height: 1.5; }
textarea { resize: vertical; min-height: 144px; }
::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); vertical-align: middle; }
.field-label, .section-label, .section-heading, .panel__title, .usage-panel__title { display: block; margin: 0 0 16px; font-size: .8125rem; font-weight: 600; letter-spacing: .05em; color: var(--muted); }
.lede, .hero__lede, .auth-lede, .hint, .sub, .state, .usage-panel__text, .limits-card__text { color: var(--muted); }
.site-header { margin-bottom: 32px; }
.site-header .lede { margin: 0; max-width: 52ch; }
.state { padding: 16px 0; }
.state--err, .msg.err, .usage-panel__warn { color: var(--danger); }
.msg.ok, .share-actions__status, .premium-yes { color: var(--success); }
.back, .back-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.back:hover, .back-link:hover { color: var(--text); }
@media (max-width: 480px) { main { padding: 32px 16px 48px; } .panel, .composer, .limits-card, .usage-panel, .premium, .how__step { padding: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }