/* ========================================
   MORPHIK — Design System
   Soft, Gentle, Romantic Dark Theme
   ======================================== */

/* Fonts stay local so CSP remains strict and the UI never waits on a CDN. */

/* ── Reset ── */
[hidden]{display:none!important}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ── Colors ── */
  --bg-deep: #0c0a14;
  --bg-primary: #12101f;
  --bg-surface: #1a1730;
  --bg-card: #211e3a;
  --bg-card-hover: #2a2645;
  --bg-glass: rgba(26, 23, 48, 0.65);
  --bg-input: rgba(26, 23, 48, 0.8);

  --text-primary: #f0eef5;
  --text-secondary: #9e99b5;
  --text-muted: #6b6580;
  --text-narrative: #c8c3d8;

  --accent-violet: #a78bfa;
  --accent-violet-dim: rgba(167, 139, 250, 0.15);
  --accent-pink: #f0abfc;
  --accent-pink-dim: rgba(240, 171, 252, 0.15);
  --accent-lavender: #c4b5fd;
  --accent-rose: #fb7185;
  --accent-gold: #fcd34d;
  --accent-gold-dim: rgba(252, 211, 77, 0.15);
  --accent-emerald: #6ee7b7;

  --border-subtle: rgba(167, 139, 250, 0.12);
  --border-active: rgba(167, 139, 250, 0.3);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px rgba(167, 139, 250, 0.15);
  --shadow-glow-pink: 0 0 20px rgba(240, 171, 252, 0.15);

  /* ── Character Colors ── */
  --char-astarion: #ef4444;
  --char-kai: #818cf8;
  --char-damian: #60a5fa;
  --char-ren: #fbbf24;
  --char-alex: #a78bfa;

  /* ── Typography ── */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-narrative: 'Cormorant Garamond', Georgia, serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;
  --fs-hero: clamp(2.5rem, 5vw, 4.5rem);

  /* ── Spacing ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ── Radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-primary);
  background-color: var(--bg-deep);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; }
ul, ol { list-style: none; }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; color: var(--text-primary); }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
p { color: var(--text-secondary); line-height: 1.7; }
a { color: var(--accent-violet); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--accent-pink); }

/* ── Layout ── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }
.container-wide { max-width: 1400px; }
.container-narrow { max-width: 720px; }
.section { padding: var(--space-4xl) 0; }
.text-center { text-align: center; }

.text-gradient {
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  max-width: 600px;
  margin: var(--space-md) auto 0;
}

/* ── Glass ── */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xl);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  border: none; border-radius: var(--radius-md); cursor: pointer;
  transition: all var(--transition-base); text-decoration: none; line-height: 1.5; white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-pink));
  color: white; box-shadow: 0 4px 15px rgba(167, 139, 250, 0.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(167, 139, 250, 0.45); color: white; }
.btn-secondary { background: transparent; color: var(--accent-violet); border: 1px solid var(--border-active); }
.btn-secondary:hover { background: var(--accent-violet-dim); transform: translateY(-1px); color: var(--accent-violet); }
.btn-ghost { background: transparent; color: var(--text-secondary); padding: var(--space-xs) var(--space-md); }
.btn-ghost:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.btn-lg { padding: var(--space-md) var(--space-2xl); font-size: var(--fs-base); border-radius: var(--radius-lg); }
.btn-sm { padding: var(--space-xs) var(--space-md); font-size: var(--fs-xs); }

/* ── Cards ── */
.card {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-xl); transition: all var(--transition-base);
}
.card:hover { background: var(--bg-card-hover); border-color: var(--border-active); transform: translateY(-4px); box-shadow: var(--shadow-glow); }

/* ── Tags ── */
.tag {
  display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-sm);
  font-size: var(--fs-xs); font-weight: 500; border-radius: var(--radius-full);
  background: var(--accent-violet-dim); color: var(--accent-violet); border: 1px solid rgba(167,139,250,0.2);
}

/* ── Forms ── */
.form-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.form-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); }
.input {
  width: 100%; padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body); font-size: var(--fs-base); color: var(--text-primary);
  background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus { border-color: var(--accent-violet); box-shadow: 0 0 0 3px rgba(167,139,250,0.15); }
.input::placeholder { color: var(--text-muted); }

/* ── Navbar ── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky);
  padding: var(--space-md) 0; transition: all var(--transition-base);
}
.navbar.scrolled {
  background: rgba(12, 10, 20, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
.navbar .container { display: flex; align-items: center; justify-content: space-between; }
.navbar-logo {
  font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: 700;
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  text-decoration: none; letter-spacing: -0.5px;
}
.navbar-links { display: flex; align-items: center; gap: var(--space-xl); }
.navbar-links a { color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500; transition: color var(--transition-fast); text-decoration: none; }
.navbar-links a:hover, .navbar-links a.active { color: var(--text-primary); }
.navbar-actions { display: flex; align-items: center; gap: var(--space-md); }
.nav-session{position:relative;display:flex;align-items:center;gap:8px}.nav-session-balance{padding:6px 11px;border-radius:99px;background:rgba(110,231,183,.08);color:var(--accent-emerald);font-size:12px;font-weight:700;text-decoration:none;cursor:pointer;transition:background .2s ease,transform .2s ease}.nav-session-balance:hover{background:rgba(110,231,183,.16);transform:translateY(-1px)}.nav-session-user{padding:7px 12px;color:var(--text-primary);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:99px;cursor:pointer}.nav-session-menu{display:none;position:absolute;top:calc(100% + 9px);right:0;min-width:190px;padding:6px;background:var(--bg-card);border:1px solid var(--border-active);border-radius:13px;box-shadow:var(--shadow-lg)}.nav-session.open .nav-session-menu{display:grid}.nav-session-menu a,.nav-session-menu button{padding:9px 11px;text-align:left;color:var(--text-secondary);background:transparent;border:0;border-radius:8px;font:inherit;font-size:13px;cursor:pointer}.nav-session-menu a:hover,.nav-session-menu button:hover{color:white;background:var(--accent-violet-dim)}

.lang-toggle { display: flex; gap: 2px; background: var(--bg-surface); border-radius: var(--radius-full); padding: 2px; border: 1px solid var(--border-subtle); }
.lang-toggle button {
  padding: var(--space-xs) var(--space-sm); font-size: var(--fs-xs); font-weight: 600;
  border: none; border-radius: var(--radius-full); background: transparent; color: var(--text-muted);
  cursor: pointer; transition: all var(--transition-fast); font-family: var(--font-body);
}
.lang-toggle button.active { background: var(--accent-violet); color: white; }

.navbar-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: var(--space-xs); }
.navbar-burger span { display: block; width: 24px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: all var(--transition-base); }

/* ── Footer ── */
.footer { padding: var(--space-3xl) 0 var(--space-xl); border-top: 1px solid var(--border-subtle); background: var(--bg-primary); }
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-lg); }
.footer-logo { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg); }
.footer-links a { color: var(--text-muted); font-size: var(--fs-sm); }
.footer-links a:hover { color: var(--accent-violet); }
.footer-copy { width: 100%; text-align: center; margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: var(--fs-xs); }

/* ── Scroll Animations ── */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in-left.visible { opacity: 1; transform: translateX(0); }
.fade-in-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in-right.visible { opacity: 1; transform: translateX(0); }
.scale-in { opacity: 0; transform: scale(0.9); transition: opacity 0.5s ease, transform 0.5s ease; }
.scale-in.visible { opacity: 1; transform: scale(1); }

/* ── Modal ── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); z-index: var(--z-modal-backdrop); opacity: 0; pointer-events: none; transition: opacity var(--transition-base); }
.modal-backdrop.active { opacity: 1; pointer-events: all; }
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.95); z-index: var(--z-modal); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-2xl); max-width: 500px; width: 90%; opacity: 0; pointer-events: none; transition: all var(--transition-base); }
.modal.active { opacity: 1; pointer-events: all; transform: translate(-50%,-50%) scale(1); }

/* ── Toast ── */
.toast { position: fixed; bottom: var(--space-xl); right: var(--space-xl); z-index: var(--z-toast); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 500; transform: translateY(100px); opacity: 0; transition: all var(--transition-spring); }
.toast.show { transform: translateY(0); opacity: 1; }
.toast-success { background: rgba(110,231,183,0.15); border: 1px solid rgba(110,231,183,0.3); color: #6ee7b7; }
.toast-error { background: rgba(252,165,165,0.15); border: 1px solid rgba(252,165,165,0.3); color: #fca5a5; }

/* ── Typing Indicator ── */
.typing-indicator { display: inline-flex; gap: 4px; padding: var(--space-sm) var(--space-md); background: var(--bg-surface); border-radius: var(--radius-lg); align-items: center; }
.typing-indicator span { width: 6px; height: 6px; background: var(--text-muted); border-radius: 50%; animation: typingBounce 1.4s ease-in-out infinite; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-6px); opacity: 1; } }

/* ── Spinner ── */
.spinner { width: 24px; height: 24px; border: 2px solid var(--border-subtle); border-top: 2px solid var(--accent-violet); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ── */
@media (max-width: 768px) {
  :root { --fs-hero: 2rem; --fs-4xl: 1.75rem; --fs-3xl: 1.5rem; }
  .container { padding: 0 var(--space-md); }
  .section { padding: var(--space-2xl) 0; }
  .navbar-links { display: none; }
  .navbar-burger { display: flex; }
  .navbar-links.mobile-open {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(12,10,20,0.95); backdrop-filter: blur(20px); padding: var(--space-lg); border-bottom: 1px solid var(--border-subtle);
  }
  .footer-content { flex-direction: column; text-align: center; }
  .footer-links { width: 100%; }
}

@media (max-width: 480px) {
  .btn-lg { width: 100%; }
}

html[data-density="compact"] { --space-xs: 5px; --space-sm: 8px; --space-md: 13px; --space-lg: 20px; --space-xl: 28px; }
html[data-density="spacious"] { --space-xs: 10px; --space-sm: 16px; --space-md: 24px; --space-lg: 36px; --space-xl: 52px; }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html[data-glass="off"] .navbar, html[data-glass="off"] [class*="glass"], html[data-glass="off"] .chat-header { backdrop-filter: none !important; }
html[data-chat-bg="nebula"] .chat-main { background: radial-gradient(circle at 15% 20%,rgba(124,58,237,.2),transparent 34%),radial-gradient(circle at 85% 75%,rgba(8,145,178,.14),transparent 38%),var(--bg-deep); }
html[data-chat-bg="noir"] .chat-main { background: linear-gradient(145deg,#1d1d26,#08080c 55%,#15151d); }
html[data-chat-bg="forest"] .chat-main { background: radial-gradient(circle at 65% 20%,rgba(22,101,52,.3),transparent 35%),linear-gradient(145deg,#071711,#101c17); }
html[data-chat-bg="sunset"] .chat-main { background: radial-gradient(circle at 75% 18%,rgba(251,113,133,.25),transparent 32%),linear-gradient(145deg,#28102c,#4b2513); }
html[data-chat-bg="ocean"] .chat-main { background: radial-gradient(circle at 20% 20%,rgba(14,165,233,.26),transparent 34%),linear-gradient(145deg,#06162b,#082f49); }
html[data-chat-bg="castle"] .chat-main { background: radial-gradient(circle at 75% 18%,rgba(167,139,250,.22),transparent 26%),linear-gradient(145deg,#100b1c,#281b37); }
html[data-chat-bg="cyber"] .chat-main { background: linear-gradient(115deg,transparent 48%,rgba(236,72,153,.13) 49%,transparent 50%),radial-gradient(circle at 18% 70%,rgba(6,182,212,.22),transparent 30%),#0e0719; }
html[data-chat-bg="library"] .chat-main { background: radial-gradient(circle at 72% 22%,rgba(217,119,6,.22),transparent 28%),linear-gradient(145deg,#160b07,#302015); }
html[data-chat-bg="moon"] .chat-main { background: radial-gradient(circle at 78% 16%,rgba(226,232,240,.2) 0 5%,transparent 6%),linear-gradient(155deg,#111936,#070a15); }
html[data-chat-bg="plain"] .chat-main { background: var(--bg-deep); }
html[data-chat-bg="custom"] .chat-main { background-image: linear-gradient(rgba(7,5,14,.38),rgba(7,5,14,.65)),var(--custom-chat-bg); background-size: cover; background-position: center; background-attachment: fixed; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--bg-card); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-violet-dim); }
::selection { background: rgba(167,139,250,0.3); color: white; }

/* ── Morphik Polished — cinematic product layer ── */
:root {
  --bg-deep: #080710;
  --bg-primary: #0d0b17;
  --bg-surface: #141120;
  --bg-card: #191527;
  --bg-card-hover: #201a31;
  --bg-glass: rgba(18, 15, 30, .76);
  --bg-input: rgba(10, 8, 18, .72);
  --text-primary: #f7f4ff;
  --text-secondary: #b8b1ca;
  --text-muted: #a19ab2;
  --accent-violet: #a98bff;
  --accent-pink: #ed8eea;
  --accent-lavender: #cabdff;
  --border-subtle: rgba(202, 189, 255, .11);
  --border-color: var(--border-subtle);
  --border-active: rgba(202, 189, 255, .28);
  --shadow-sm: 0 4px 12px rgba(0,0,0,.2);
  --shadow-md: 0 12px 30px rgba(0,0,0,.28);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.42);
  --shadow-glow: 0 18px 50px rgba(99, 60, 190, .16);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --transition-fast: 160ms cubic-bezier(.2,.8,.2,1);
  --transition-base: 240ms cubic-bezier(.2,.8,.2,1);
}

html { background: var(--bg-deep); }
body {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 8% 0%, rgba(116, 73, 205, .1), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(193, 76, 164, .065), transparent 32rem),
    var(--bg-deep);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom,black,transparent 78%);
}

h1,h2,h3 { letter-spacing: -.025em; text-wrap: balance; }
p { text-wrap: pretty; }
.legal-page,.legal-page * { min-width:0; }
.legal-header h1,.legal-card h2 { overflow-wrap:anywhere; }
.admin-shell h1,.admin-shell h2,.admin-shell h3,.assistant-page h1,.assistant-page h2,.assistant-page h3 { font-family: var(--font-body); letter-spacing: -.03em; }
button,input,textarea,select,a { touch-action: manipulation; }
button:disabled,.btn:disabled,[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none !important; }
:focus-visible { outline: 3px solid rgba(169,139,255,.68); outline-offset: 3px; }
input,textarea,select {
  min-height: 44px;
  color-scheme: dark;
  border-color: var(--border-subtle);
}
dialog {
  border: 1px solid var(--border-active) !important;
  box-shadow: var(--shadow-lg), 0 0 80px rgba(124,58,237,.12);
}
dialog::backdrop { background: rgba(4,3,9,.72) !important; backdrop-filter: blur(8px); }

.container { max-width: 1240px; padding-inline: clamp(18px,3vw,32px); }
.section { padding-block: clamp(64px,8vw,112px); }
.subtitle { color: var(--text-secondary); line-height: 1.65; }
.glass,.card {
  background: linear-gradient(145deg,rgba(31,26,48,.84),rgba(17,14,28,.88));
  border-color: var(--border-subtle);
  box-shadow: inset 0 1px rgba(255,255,255,.035),0 18px 50px rgba(0,0,0,.18);
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-active);
  box-shadow: inset 0 1px rgba(255,255,255,.05),var(--shadow-glow);
}

.btn {
  min-height: 44px;
  border-radius: var(--radius-md);
  letter-spacing: -.01em;
  transition: color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);
}
.btn-sm { min-height: 40px; padding-inline: 14px; }
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,#8b6cf0,#d57bda);
  box-shadow: 0 10px 30px rgba(129,83,218,.27),inset 0 1px rgba(255,255,255,.25);
}
.btn-primary::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.2),transparent 70%);
  transform:translateX(-130%);
  transition:transform .55s ease;
}
.btn-primary:hover::after { transform:translateX(130%); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(129,83,218,.34),inset 0 1px rgba(255,255,255,.25); }
.btn-primary:active,.btn-secondary:active,.btn-ghost:active { transform: scale(.98); }
.btn-secondary {
  color: var(--text-primary);
  background: rgba(255,255,255,.035);
  border-color: var(--border-active);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.btn-secondary:hover { color: white; background: rgba(169,139,255,.1); border-color: rgba(202,189,255,.42); }

.navbar {
  min-height: 72px;
  padding: 10px 0;
  background: linear-gradient(to bottom,rgba(8,7,16,.88),rgba(8,7,16,.5));
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.navbar.scrolled { background: rgba(8,7,16,.9); border-color: rgba(202,189,255,.1); }
.navbar-logo { font-size: 25px; filter: drop-shadow(0 5px 16px rgba(169,139,255,.18)); }
.navbar-links { gap: 6px; padding: 4px; border: 1px solid rgba(255,255,255,.035); border-radius: 999px; background: rgba(255,255,255,.018); }
.navbar-links a { display:block; padding:9px 14px; border-radius:999px; color:#a9a3b7; }
.navbar-links a:hover,.navbar-links a.active { color:white; background:rgba(255,255,255,.055); }
.nav-session-balance,.nav-session-user { min-height:40px; display:inline-flex; align-items:center; }
.nav-session-menu { top:calc(100% + 12px); padding:8px; border-radius:16px; background:rgba(20,16,33,.96); backdrop-filter:blur(18px); box-shadow:var(--shadow-lg); }
.nav-session-menu a,.nav-session-menu button { min-height:42px; display:flex; align-items:center; }

.footer {
  background: linear-gradient(to bottom,rgba(13,11,23,.72),#090711);
  border-color: rgba(202,189,255,.09);
}
.footer-logo { color:var(--text-primary); }
.footer-links a { color:var(--text-secondary); }

.fade-in,.fade-in-left,.fade-in-right,.scale-in { will-change:transform,opacity; }
.fade-in:not(.visible),.fade-in-left:not(.visible),.fade-in-right:not(.visible),.scale-in:not(.visible) { animation:polishFallback .65s .08s forwards cubic-bezier(.16,1,.3,1); }
@keyframes polishFallback { to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .fade-in,.fade-in-left,.fade-in-right,.scale-in { opacity:1 !important; transform:none !important; }
}

@media (max-width: 900px) {
  .navbar-links {
    border:0;
    border-radius:0;
    background:transparent;
  }
}

@media (max-width: 768px) {
  .navbar { min-height:64px; }
  .navbar-links.mobile-open {
    top:calc(100% + 4px);
    left:12px;
    right:12px;
    align-items:stretch;
    padding:12px;
    border:1px solid var(--border-active);
    border-radius:18px;
    background:rgba(14,11,24,.97);
    box-shadow:var(--shadow-lg);
  }
  .navbar-links.mobile-open a { min-height:44px; display:flex; align-items:center; padding-inline:14px; }
  .navbar-actions { margin-left:auto; }
  .navbar-burger { min-width:44px; min-height:44px; align-items:center; justify-content:center; }
  .lang-toggle { display:none; }
}

/* Unified account menu */
.nav-session{position:relative;display:flex;align-items:center;gap:8px;z-index:110}.nav-session-balance{min-height:40px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border:1px solid rgba(110,231,183,.11);border-radius:13px;background:rgba(110,231,183,.065);color:#6ee7b7;font-size:12px;font-weight:750;text-decoration:none;transition:.2s}.nav-session-balance svg{width:15px}.nav-session-balance:hover{background:rgba(110,231,183,.12);border-color:rgba(110,231,183,.22);transform:translateY(-1px)}.nav-session-user{min-height:42px;display:flex;align-items:center;gap:8px;padding:4px 9px 4px 5px;border:1px solid rgba(196,181,253,.12);border-radius:14px;background:rgba(255,255,255,.025);color:#f4f0ff;font:inherit;cursor:pointer;transition:.2s}.nav-session-user:hover,.nav-session.open .nav-session-user{background:rgba(167,139,250,.08);border-color:rgba(196,181,253,.22)}.nav-session-user>svg{width:15px;color:#827b92;transition:transform .2s}.nav-session.open .nav-session-user>svg{transform:rotate(180deg)}.nav-session-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:650}.nav-session-avatar{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#d946ef);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);color:#fff;font-size:12px;font-weight:800}.nav-session-avatar.large{width:40px;height:40px;border-radius:13px;font-size:14px}.nav-session-menu{display:none;position:absolute;right:0;top:calc(100% + 11px);width:248px;padding:9px;border:1px solid rgba(196,181,253,.14);border-radius:19px;background:rgba(17,13,29,.98);box-shadow:0 24px 70px rgba(0,0,0,.55);backdrop-filter:blur(24px);overflow:hidden}.nav-session.open .nav-session-menu{display:block;animation:navMenuIn .16s ease-out}.nav-session-summary{display:flex;align-items:center;gap:11px;padding:8px 8px 12px;border-bottom:1px solid rgba(255,255,255,.065)}.nav-session-summary>span:last-child{display:grid;min-width:0}.nav-session-summary strong{overflow:hidden;text-overflow:ellipsis;color:#f7f4ff;font-size:13px}.nav-session-summary small{color:#857e94;font-size:11px;margin-top:2px}.nav-session-items{display:grid;gap:3px;padding:7px 0}.nav-session-menu a,.nav-session-menu button{width:100%;min-height:40px;display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:9px;padding:8px 10px;border:0;border-radius:11px;background:transparent;color:#aaa3b8;text-align:left;text-decoration:none;font:inherit;font-size:12.5px;cursor:pointer}.nav-session-menu a svg,.nav-session-menu button svg{width:17px;color:#827b92}.nav-session-menu a:hover,.nav-session-menu button:hover{color:#fff;background:rgba(167,139,250,.085)}.nav-session-menu a:hover svg,.nav-session-menu button:hover svg{color:#c4b5fd}.nav-session-menu button small{color:#706a7c;font-size:10px}.nav-session-menu button.active small{color:#6ee7b7}.nav-session-logout{border-top:1px solid rgba(255,255,255,.065)!important;border-radius:0 0 11px 11px!important;color:#a49cab!important}.nav-session-logout:hover{color:#fda4af!important;background:rgba(225,29,72,.07)!important}.nav-session-logout:hover svg{color:#fda4af!important}@keyframes navMenuIn{from{opacity:0;transform:translateY(-5px) scale(.985)}}@media(max-width:600px){.nav-session-name{display:none}.nav-session-balance span{display:none}.nav-session-balance{width:40px;padding:0;justify-content:center}.nav-session-menu{position:fixed;top:68px;right:10px;width:min(270px,calc(100vw - 20px))}}
/* Consent and test-mode notices stay readable on desktop and mobile. */
.consent-inline{display:flex;align-items:flex-start;gap:10px;margin:10px 0;color:var(--text-secondary);font-size:12px;line-height:1.5}
.consent-inline input{flex:0 0 auto;margin-top:3px;accent-color:var(--accent-violet)}
.consent-inline a{color:var(--accent-lavender);text-decoration:underline;text-underline-offset:2px}
.ai-consent-status{display:block;width:100%;margin:8px 0;padding:8px 10px;border:1px solid rgba(110,231,183,.16);border-radius:8px;background:rgba(110,231,183,.06);color:var(--accent-emerald);font:inherit;font-size:12px;text-align:left;cursor:pointer}.ai-consent-status:hover{color:var(--text-primary);background:rgba(110,231,183,.1)}.ai-consent-status:disabled{opacity:.6;cursor:wait}
.legal-notice{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:12px 14px;border:1px solid rgba(110,231,183,.3);border-radius:12px;background:rgba(16,185,129,.08);color:#bbf7d0;font-size:12px;line-height:1.5}
.legal-notice svg{flex:0 0 17px;width:17px;color:var(--accent-emerald)}