/*
  Elevise light brand skin.
  This intentionally overrides the older cosmos/dark Tailwind palette while
  leaving the page structure and all JavaScript behaviour untouched.
*/

:root {
  color-scheme: light;
  --ev-bg: #ffffff;
  --ev-bg-soft: #f5efff;
  --ev-surface: rgba(255, 255, 255, 0.86);
  --ev-surface-solid: #ffffff;
  --ev-surface-muted: #f1f4f9;
  --ev-text: #171717;
  --ev-muted: #647084;
  --ev-line: rgba(15, 23, 42, 0.11);
  --ev-line-strong: rgba(15, 23, 42, 0.18);
  --ev-brand: #1f2937;
  --ev-purple: #6d28d9;
  --ev-purple-strong: #4c1d95;
  --ev-purple-soft: #f0e7ff;
  --ev-success: #7c3aed;
  --ev-danger: #dc2626;
}

html,
body {
  font-family: "Google Sans", "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: #ffffff !important;
  color: var(--ev-text) !important;
}

body::before {
  content: none !important;
}

body > .fixed.inset-0.pointer-events-none,
body > .fixed.top-0.left-0.w-full.h-full.pointer-events-none,
section .absolute.inset-0.z-0,
.absolute[class*="blur-"][class*="rounded-full"],
.absolute[class*="blur-"][class*="bg-primary"],
.absolute[class*="blur-"][class*="bg-secondary"],
.absolute[class*="blur-"][class*="bg-tertiary"] {
  display: none !important;
}

.font-code,
.font-body-md,
.font-body-lg,
.font-label-md,
.font-h1,
.font-h2,
.font-h3 {
  font-family: "Google Sans", "DM Sans", system-ui, sans-serif !important;
}

.tracking-tighter,
.tracking-tight,
.text-h1,
.text-h2,
.text-h3,
.text-label-md {
  letter-spacing: 0 !important;
}

.text-h1 {
  font-size: 42px !important;
  line-height: 1.08 !important;
}

.text-h2 {
  font-size: 30px !important;
  line-height: 1.15 !important;
}

.text-h3 {
  font-size: 22px !important;
  line-height: 1.25 !important;
}

@media (max-width: 640px) {
  .text-h1 {
    font-size: 34px !important;
  }

  .text-h2 {
    font-size: 26px !important;
  }

  .text-h3 {
    font-size: 20px !important;
  }
}

.elevise-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.elevise-logo {
  width: 172px;
  height: 42px;
  object-fit: cover;
  object-position: center;
  display: block;
  mix-blend-mode: multiply;
}

footer .elevise-logo,
.elevise-logo-sm {
  width: 136px;
  height: 34px;
}

/* Semantic palette overrides */
.bg-background,
.bg-surface,
.bg-surface-container-lowest,
.bg-surface-container-lowest\/80,
.bg-surface-container-lowest\/95 {
  background: transparent !important;
}

.bg-surface-container,
.bg-surface-container\/20,
.bg-surface-container\/30,
.bg-surface-container\/40,
.bg-surface-container\/50,
.bg-surface-container\/60,
.bg-surface-container\/80,
.bg-surface-container\/95,
.bg-surface-container-low,
.bg-surface-container-high,
.bg-surface-container-highest,
.bg-surface-bright,
.bg-surface-variant,
.bg-surface-variant\/30,
.bg-surface-variant\/50,
.bg-surface-dim,
.bg-white\/5,
.bg-white\/10 {
  background-color: var(--ev-surface) !important;
}

.bg-surface-container-highest,
input,
textarea,
select {
  background-color: var(--ev-surface-solid) !important;
}

.bg-black\/20,
[class~="bg-white/[0.03]"] {
  background-color: var(--ev-surface) !important;
}

.text-on-surface,
.text-on-background,
.text-inverse-on-surface {
  color: var(--ev-text) !important;
}

.text-on-surface-variant,
.text-on-surface-variant\/50,
.text-outline {
  color: var(--ev-muted) !important;
}

.text-primary,
.text-secondary,
.text-tertiary,
.text-primary-fixed-dim,
.text-on-primary-fixed,
.group:hover .group-hover\:text-primary {
  color: var(--ev-purple) !important;
}

.text-error {
  color: var(--ev-danger) !important;
}

.text-on-primary,
.text-on-primary-container,
.text-white {
  color: #ffffff !important;
}

.border-white\/5,
.border-white\/10,
.border-white\/20,
.border-primary\/20,
.border-primary\/30,
.border-primary\/40,
.border-primary\/50,
.border-tertiary\/20,
.border-tertiary\/30,
.border-transparent {
  border-color: var(--ev-line) !important;
}

.hover\:border-white\/20:hover,
.hover\:border-white\/30:hover,
.hover\:border-primary\/30:hover,
.hover\:border-primary\/40:hover,
.hover\:border-primary\/50:hover,
.group:hover .group-hover\:border-primary\/40 {
  border-color: var(--ev-line-strong) !important;
}

.bg-primary,
.bg-primary-container,
.bg-primary-container\/10,
.bg-primary-container\/20,
.bg-primary-container\/30,
.bg-primary-container\/40,
.bg-tertiary,
.bg-tertiary-fixed-dim,
.hover\:bg-primary-container\/40:hover {
  background-color: var(--ev-purple) !important;
}

.bg-primary\/5,
.bg-primary\/10,
.bg-primary\/20,
.hover\:bg-primary\/10:hover,
.hover\:bg-primary\/20:hover,
.hover\:bg-tertiary-container\/40:hover {
  background-color: var(--ev-purple-soft) !important;
}

.bg-secondary-container,
.bg-secondary-container\/10,
.bg-secondary-container\/20,
.bg-tertiary-container,
.bg-tertiary-container\/5,
.bg-tertiary-container\/10,
.bg-tertiary-container\/20 {
  background-color: var(--ev-purple-soft) !important;
}

.bg-gradient-to-r,
.bg-gradient-to-b,
.bg-gradient-to-br,
.bg-gradient-to-bl,
.bg-gradient-to-t,
.bg-gradient-to-l {
  background-image: none !important;
  background-color: var(--ev-purple) !important;
}

.from-primary-container,
.via-secondary-container,
.via-tertiary,
.to-secondary-container,
.to-primary-container,
.from-primary,
.to-tertiary,
.from-transparent,
.to-transparent {
  --tw-gradient-from: var(--ev-purple) var(--tw-gradient-from-position) !important;
  --tw-gradient-via: var(--ev-purple) var(--tw-gradient-via-position) !important;
  --tw-gradient-to: var(--ev-purple) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--ev-purple), var(--ev-purple) !important;
}

.text-transparent.bg-clip-text {
  color: var(--ev-purple) !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* Only the app sidebar gets this skin — landing/pricing/schools inner <nav>s
   should stay transparent so the header's blur/colour comes through cleanly. */
nav#sidebar {
  background-color: rgba(255, 255, 255, 0.88) !important;
  border-color: var(--ev-line) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

header {
  background-color: transparent !important;
  border-color: var(--ev-line) !important;
}

[class*="backdrop-blur"] {
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}

[class*="shadow-"] {
  box-shadow: 0 18px 52px rgba(15, 23, 42, 0.08) !important;
}

button,
a,
input,
textarea,
select,
.rounded-lg,
.rounded-xl,
.rounded-2xl {
  border-radius: 18px !important;
}

button,
a[href] {
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease !important;
}

button:hover,
a[href]:hover {
  transform: translateY(-1px);
}

input,
textarea,
select {
  color: var(--ev-text) !important;
  border-color: var(--ev-line) !important;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ev-purple) !important;
  box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.12) !important;
}

.material-symbols-outlined {
  color: currentColor;
}

.prose-chat strong,
.prose-chat h1,
.prose-chat h2,
.prose-chat h3 {
  color: var(--ev-text) !important;
}

.drag-over {
  border-color: var(--ev-purple) !important;
  background: var(--ev-purple-soft) !important;
}

.prose-chat code,
.prose-chat pre {
  background: #f3f5f9 !important;
  border-color: var(--ev-line) !important;
  color: var(--ev-text) !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18) !important;
}

@media (max-width: 768px) {
  .elevise-logo {
    width: 140px;
    height: 34px;
  }
  /* Mobile top bar — taller + properly-sized logo. Original was crammed
     into ~44px which fought the brand against a 24px hamburger icon. */
  header.md\:hidden {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  header.md\:hidden .elevise-brand img,
  header.md\:hidden img.h-7 {
    width: 175px !important;
    height: 42px !important;
    max-width: 50vw !important;
    object-fit: contain !important;
    mix-blend-mode: normal !important;
    filter: brightness(1.5) saturate(1.1);
  }
  /* Bump the main top padding to match the now-taller mobile header */
  main.pt-16 { padding-top: 72px !important; }

  /* ── Sidebar polish on mobile ───────────────────────────────────────────
     Hamburger-triggered slide-in. Make it feel like a proper mobile sheet:
     a bit wider, more contrast against the page, larger touch targets. */
  nav#sidebar {
    width: 86vw !important;
    max-width: 320px !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 0 60px rgba(0,0,0,0.45) !important;
  }
  /* Header block of sidebar — tighter so nav items land near the thumb */
  nav#sidebar > div:first-child {
    padding: 20px 20px 16px !important;
  }
  /* Nav links: larger touch target, slightly larger type, more breathing room */
  nav#sidebar a.flex,
  nav#sidebar button.flex {
    padding: 14px 20px !important;
    gap: 16px !important;
    border-radius: 0 !important;
  }
  nav#sidebar a.flex .material-symbols-outlined,
  nav#sidebar button.flex .material-symbols-outlined {
    font-size: 22px !important;
  }
  nav#sidebar a.flex span:not(.material-symbols-outlined),
  nav#sidebar button.flex span:not(.material-symbols-outlined) {
    font-size: 15px !important;
  }
  /* Active page indicator — chunkier bar on mobile */
  nav#sidebar a.border-r-4, nav#sidebar a.border-primary {
    border-right-width: 4px !important;
  }
  /* Footer — same touch-friendly sizing */
  nav#sidebar > div:last-child {
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom)) !important;
  }
  nav#sidebar > div:last-child button {
    padding: 12px 14px !important;
  }

  /* Mobile overlay — slightly darker so the page underneath recedes */
  #mobile-overlay { background: rgba(0,0,0,0.7) !important; }

  /* ── Sitewide page polish on mobile ─────────────────────────────────────
     Original desktop styling preserved, just scaled and tightened so
     content doesn't feel cramped against the screen edges. */

  /* Generic main: consistent edge padding */
  main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* H1 — desktop sizes can be too large on a phone */
  .text-h1, h1.text-h1, h1.font-code { font-size: 28px !important; line-height: 1.15 !important; }
  .text-h2, h2.text-h2, h2.font-code { font-size: 22px !important; line-height: 1.2 !important; }
  .text-h3, h3.text-h3, h3.font-code { font-size: 18px !important; line-height: 1.3 !important; }

  /* Card containers — slightly less padding so more content fits */
  .rounded-xl.p-lg, .rounded-2xl.p-lg, .rounded-xl.p-xl, .rounded-2xl.p-xl {
    padding: 18px !important;
  }

  /* Grid layouts that try to fit too many columns on mobile */
  .grid.grid-cols-2.sm\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid.grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .md\:col-span-8, .md\:col-span-6, .md\:col-span-4 { grid-column: span 1 !important; }

  /* Buttons — bigger thumb-friendly hit area */
  button:not(.material-symbols-outlined):not(.cycle-pill):not(.bubble-actions button):not(.theme-toggle),
  .primary-cta, .cta {
    min-height: 44px;
  }

  /* Pages with a header.flex justify-between — let it wrap instead of squishing */
  main > header.flex.items-start,
  main > header.flex.items-end {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  main > header.flex > div:last-child {
    align-self: stretch;
  }

  /* Table-heavy pages (leaderboard, etc.) — let them scroll horizontally
     rather than overflow the viewport */
  .overflow-x-auto, .grid.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* Modals — fill more of the screen, no chunky margins */
  .fixed.inset-0 > div:not(.absolute):not(.material-symbols-outlined) {
    margin: 12px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
  }
}

/* ── Dark Mode ──────────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  --ev-bg: #1e1e1e;
  --ev-bg-soft: #252525;
  --ev-surface: rgba(42, 42, 42, 0.88);
  --ev-surface-solid: #2a2a2a;
  --ev-surface-muted: #333333;
  --ev-text: #f0f0f0;
  --ev-muted: #9a9a9a;
  --ev-line: rgba(255, 255, 255, 0.1);
  --ev-line-strong: rgba(255, 255, 255, 0.18);
  --ev-purple-soft: rgba(109, 40, 217, 0.25);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #0b0e14 !important;
  color: #e1e2eb !important;
}

html[data-theme="dark"] nav#sidebar {
  background-color: rgba(18, 21, 28, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] header {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Mobile header on small screens still needs a backdrop */
html[data-theme="dark"] header.fixed.top-0 {
  background-color: rgba(18, 21, 28, 0.85) !important;
}

/* Landing page shell */
html[data-theme="dark"] .landing-shell {
  background: transparent !important;
  color: #e1e2eb !important;
}

html[data-theme="dark"] .landing-nav {
  background-color: rgba(16, 19, 26, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
}

/* Landing inner panels — let the body bluish-grey show through */
html[data-theme="dark"] .feature-panel,
html[data-theme="dark"] .preview-card,
html[data-theme="dark"] .app-preview-shell,
html[data-theme="dark"] .tablet-screen {
  background: rgba(29, 32, 38, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e1e2eb !important;
}

html[data-theme="dark"] .subject-pill {
  background: rgba(29, 32, 38, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e1e2eb !important;
}

/* Landing footer */
html[data-theme="dark"] footer.bg-white,
html[data-theme="dark"] body > footer {
  background-color: rgba(16, 19, 26, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
}

html[data-theme="dark"] footer .text-\[\#242424\] {
  color: #cfd2d9 !important;
}

/* Landing hero typography contrast */
html[data-theme="dark"] .hero-title { color: #f5f6fa !important; }
html[data-theme="dark"] .hero-copy { color: #b6bac6 !important; }
html[data-theme="dark"] .feature-panel h3 { color: #f5f6fa !important; }
html[data-theme="dark"] .feature-panel p,
html[data-theme="dark"] .feature-panel .text-\[\#333\] { color: #c3c7d2 !important; }
html[data-theme="dark"] .secondary-cta { color: #e1e2eb !important; }

/* Tablet/preview tones in dark mode */
html[data-theme="dark"] .tablet-frame { background: #15171c !important; border-color: #15171c !important; }
html[data-theme="dark"] .preview-line { background: rgba(255,255,255,0.08) !important; }
html[data-theme="dark"] .progress-line { background: rgba(255,255,255,0.08) !important; }
html[data-theme="dark"] .mini-sidebar { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.06) !important; }

/* ── Landing smooth animations ─────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

.hero-title {
  background-image: linear-gradient(110deg, currentColor 30%, #a78bfa 50%, currentColor 70%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroShimmer 8s ease-in-out infinite;
}
html[data-theme="dark"] .hero-title {
  background-image: linear-gradient(110deg, #f5f6fa 30%, #c4b5fd 50%, #f5f6fa 70%) !important;
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes heroShimmer {
  0%, 100% { background-position: 100% 50%; }
  50%      { background-position: 0% 50%; }
}

.tablet-tilt,
.app-preview-shell {
  animation: floatY 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-10px) rotate(-0.4deg); }
}

.feature-panel,
.preview-card {
  transition: transform 400ms cubic-bezier(0.22,1,0.36,1), box-shadow 400ms ease, border-color 400ms ease;
}
.feature-panel:hover {
  transform: translateY(-4px);
}
html[data-theme="dark"] .feature-panel:hover {
  border-color: rgba(167, 139, 250, 0.4) !important;
  box-shadow: 0 18px 40px rgba(109, 40, 217, 0.18) !important;
}

.primary-cta {
  position: relative;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.primary-cta:hover { transform: translateY(-2px) scale(1.02); }
.primary-cta::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 700ms ease;
}
.primary-cta:hover::after { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-up.in-view { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-title, .tablet-tilt, .app-preview-shell { animation: none !important; }
}

html[data-theme="dark"] .hero-title {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .hero-copy {
  color: #b8b8b8 !important;
}

html[data-theme="dark"] .soft-tag {
  background: #2a1f45;
  color: #c4a8ff;
  border-color: #3d2e6e;
}

html[data-theme="dark"] .subject-pill {
  background: #2a2a2a;
  border-color: #3a3a3a;
  color: #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .secondary-cta {
  color: #f0f0f0;
}

html[data-theme="dark"] .tablet-screen {
  background: #2a2a2a;
  color: #f0f0f0;
}

html[data-theme="dark"] .app-preview-shell {
  background: #252525;
  border-color: #3a3a3a;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .mini-sidebar {
  background: #202020;
  border-color: #3a3a3a;
}

html[data-theme="dark"] .preview-line {
  background: #3a3a3a;
}

html[data-theme="dark"] .preview-card {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #f0f0f0;
}

html[data-theme="dark"] .feature-panel {
  background: #252525;
  border-color: #3a3a3a;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25);
  color: #f0f0f0;
}

html[data-theme="dark"] .progress-line {
  background: #3a3a3a;
}

html[data-theme="dark"] footer {
  background: #1e1e1e !important;
  border-color: #3a3a3a !important;
}

html[data-theme="dark"] .prose-chat code,
html[data-theme="dark"] .prose-chat pre {
  background: #2a2a2a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f0f0f0 !important;
}

/* Logo: multiply blend makes it invisible on dark bg — switch to normal */
html[data-theme="dark"] img[alt="Elevise"] {
  mix-blend-mode: normal;
  filter: brightness(0) invert(1);
}

/* Hardcoded Tailwind JIT colour overrides */
html[data-theme="dark"] .text-\[\#111\],
html[data-theme="dark"] .text-\[\#222\],
html[data-theme="dark"] .text-\[\#1f1f1f\],
html[data-theme="dark"] .text-\[\#242424\],
html[data-theme="dark"] .text-\[\#27272a\] {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .text-\[\#333\],
html[data-theme="dark"] .text-\[\#555\],
html[data-theme="dark"] .text-\[\#666\] {
  color: #aaaaaa !important;
}

html[data-theme="dark"] .bg-white {
  background-color: #2a2a2a !important;
}

html[data-theme="dark"] .bg-\[\#fafafa\] {
  background-color: #252525 !important;
}

html[data-theme="dark"] .border-\[\#ededed\],
html[data-theme="dark"] .border-\[\#e6e6e6\],
html[data-theme="dark"] .border-\[\#e5e5e5\],
html[data-theme="dark"] .border-\[\#eee\] {
  border-color: #3a3a3a !important;
}

html[data-theme="dark"] .bg-\[\#f0e7ff\] {
  background-color: #2d1e50 !important;
}

/* Dark mode scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* ── Toast notifications ─────────────────────────────────────────────────────── */
#ev-toast-container {
  position: fixed;
  top: 72px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}

.ev-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  pointer-events: auto;
  animation: ev-toast-in 0.2s ease forwards;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid;
}

.ev-toast-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.ev-toast-success {
  background: var(--ev-purple-soft);
  border-color: rgba(109, 40, 217, 0.25);
  color: var(--ev-purple);
}

.ev-toast-info {
  background: var(--ev-surface-solid);
  border-color: var(--ev-line);
  color: var(--ev-text);
}

html[data-theme="dark"] .ev-toast-error {
  background: #2d1515;
  border-color: rgba(220, 38, 38, 0.3);
  color: #fca5a5;
}

html[data-theme="dark"] .ev-toast-success {
  background: rgba(109, 40, 217, 0.2);
  border-color: rgba(109, 40, 217, 0.35);
  color: #c4a8ff;
}

html[data-theme="dark"] .ev-toast-info {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.1);
  color: #f0f0f0;
}

.ev-toast-out {
  animation: ev-toast-out 0.2s ease forwards !important;
}

@keyframes ev-toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ev-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(16px); }
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ev-line);
  background: transparent;
  color: var(--ev-text);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--ev-purple-soft);
  border-color: var(--ev-purple);
  color: var(--ev-purple);
  transform: none;
}

html[data-theme="dark"] .theme-toggle:hover {
  background: rgba(109, 40, 217, 0.2);
  border-color: #6d28d9;
  color: #c4a8ff;
}

/* ── Dark mode overrides ──────────────────────────────────────────────────── */
html[data-theme="dark"],
html.dark:not([data-theme="light"]) {
  --ev-bg: #0b0e14;
  --ev-surface: rgba(29, 32, 38, 0.72);
  --ev-surface-solid: #1d2026;
  --ev-surface-muted: #191c22;
  --ev-text: #e1e2eb;
  --ev-muted: #9a92a6;
  --ev-line: rgba(255, 255, 255, 0.08);
  --ev-line-strong: rgba(255, 255, 255, 0.16);
  --ev-purple-soft: rgba(109, 40, 217, 0.15);
}

html[data-theme="dark"] html,
html[data-theme="dark"] body,
html.dark:not([data-theme="light"]) body {
  background: #0b0e14 !important;
  color: #e1e2eb !important;
}

html[data-theme="dark"] nav#sidebar,
html.dark:not([data-theme="light"]) nav#sidebar {
  background-color: rgba(18, 21, 28, 0.88) !important;
}

html[data-theme="dark"] .text-on-surface,
html.dark:not([data-theme="light"]) .text-on-surface {
  color: #e1e2eb !important;
}

html[data-theme="dark"] .text-on-surface-variant,
html.dark:not([data-theme="light"]) .text-on-surface-variant {
  color: #9a92a6 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html.dark:not([data-theme="light"]) input,
html.dark:not([data-theme="light"]) textarea,
html.dark:not([data-theme="light"]) select {
  background-color: rgba(29, 32, 38, 0.9) !important;
  color: #e1e2eb !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html.dark:not([data-theme="light"]) input:focus,
html.dark:not([data-theme="light"]) textarea:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18) !important;
}