@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  --font-sans: 'Lora', Georgia, serif;
  --font-heading: 'Lora', Georgia, serif;
  --bg-primary: #f8fafc;        /* Slate 50 */
  --text-primary: #0f172a;      /* Slate 900 */
  --text-secondary: #475569;    /* Slate 600 */
  --border-color: #e2e8f0;      /* Slate 200 */
  --card-bg: #ffffff;
  --card-border-hover: #cbd5e1; /* Slate 300 */
  --accent: #2563eb;            /* Azure 600 */
  --accent-strong: #1d4ed8;     /* Azure 700 */
  --accent-soft: rgba(37, 99, 235, 0.10);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(226, 232, 240, 0.9);
  --shadow-tint: rgba(15, 23, 42, 0.12);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.dark {
  --bg-primary: #0b1220;        /* Deep slate */
  --text-primary: #f1f5f9;      /* Slate 100 */
  --text-secondary: #94a3b8;    /* Slate 400 */
  --border-color: #1e293b;      /* Slate 800 */
  --card-bg: #0f172a;           /* Slate 900 */
  --card-border-hover: #334155; /* Slate 700 */
  --accent: #3b82f6;            /* Azure 500 */
  --accent-strong: #2563eb;     /* Azure 600 */
  --accent-soft: rgba(59, 130, 246, 0.14);
  --glass-bg: rgba(11, 18, 32, 0.7);
  --glass-border: rgba(30, 41, 59, 0.7);
  --shadow-tint: rgba(0, 0, 0, 0.5);
}

* { -webkit-tap-highlight-color: transparent; }

/* Root font size: ~17px base so every rem-based size scales up a touch */
html { scroll-behavior: smooth; font-size: 106.25%; }

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

.font-heading { font-family: var(--font-heading); }

/* ============================================================
   AMBIENT AURORA BACKGROUND
   ============================================================ */
.bg-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-aurora::before,
.bg-aurora::after {
  content: "";
  position: absolute;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
  will-change: transform;
}
.bg-aurora::before {
  top: -20vw;
  left: -12vw;
  background: radial-gradient(circle at 30% 30%, rgba(191, 219, 254, 0.7), transparent 70%);
  animation: auroraFloatA 24s var(--ease) infinite alternate;
}
.bg-aurora::after {
  top: -14vw;
  right: -16vw;
  background: radial-gradient(circle at 70% 30%, rgba(199, 210, 254, 0.55), transparent 70%);
  animation: auroraFloatB 28s var(--ease) infinite alternate;
}
.dark .bg-aurora::before {
  opacity: 0.3;
  background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.4), transparent 70%);
}
.dark .bg-aurora::after {
  opacity: 0.24;
  background: radial-gradient(circle at 70% 30%, rgba(59, 130, 246, 0.34), transparent 70%);
}
@keyframes auroraFloatA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, 5vw, 0) scale(1.15); }
}
@keyframes auroraFloatB {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-5vw, 4vw, 0) scale(0.95); }
}

/* ============================================================
   FIXED TOP CONTROLS (theme + language) — always visible
   ============================================================ */
.top-controls {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
  max-width: calc(100vw - 2.5rem);
}

/* ============================================================
   VIEW STATE MACHINE
   ============================================================ */
#path-nav,
main.app-main { display: none; }

body:not(.view-intro) #intro-gate { display: none; }
body:not(.view-intro) #path-nav { display: block; }
body:not(.view-intro) main.app-main { display: block; }
body.view-intro #intro-gate { display: flex; }
body.view-intro footer { display: none; }

/* ============================================================
   INTRO GATE
   ============================================================ */
.intro-gate {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 4rem;
}
.intro-inner {
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-photo {
  position: relative;
  width: clamp(150px, 36vw, 208px);
  aspect-ratio: 1 / 1;
  border-radius: 1.5rem;
  margin-bottom: 1.85rem;
}
.intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.5rem;
  border: 1px solid var(--border-color);
  box-shadow: 0 22px 45px -20px var(--shadow-tint);
  position: relative;
  z-index: 2;
}
/* Thin azure accent frame, slightly offset — restrained but designed */
.intro-photo-ring {
  position: absolute;
  inset: -8px;
  border-radius: 1.9rem;
  border: 1.5px solid var(--accent);
  opacity: 0.28;
  z-index: 1;
}

.intro-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
}
.intro-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.intro-role {
  font-weight: 300;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 620px;
  margin-bottom: 2.5rem;
}
.intro-hint {
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.intro-hint::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Choice cards */
.intro-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  width: 100%;
  max-width: 720px;
}
.choice-card {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: 1.6rem 1.6rem 1.5rem;
  border-radius: 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 168px;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.choice-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-soft), transparent 60%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.choice-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 22px 45px -18px rgba(37, 99, 235, 0.2);
}
.dark .choice-card:hover {
  box-shadow: 0 22px 45px -18px rgba(0, 0, 0, 0.6);
}
.choice-card:hover::before { opacity: 1; }
.choice-sub {
  position: relative;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.choice-title {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.15;
}
.choice-desc {
  position: relative;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}
.choice-go {
  position: absolute;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1rem;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.choice-card:hover .choice-go {
  transform: translateX(4px);
  background: var(--accent);
  color: #fff;
}

/* Cabinet entry chip (top-right corner) */
.cabinet-entry {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.cabinet-entry svg { width: 16px; height: 16px; }
.cabinet-entry:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
/* Cabinet chip is only relevant on the intro gate */
body:not(.view-intro) .intro-only { display: none; }

/* ============================================================
   PATH NAV (sticky glass bar)
   ============================================================ */
.path-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  animation: navDrop 0.6s var(--ease);
}
@keyframes navDrop {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.path-nav-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.path-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
}
.path-spacer { width: 148px; flex-shrink: 0; }
.path-home {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.path-home img { height: 36px; width: auto; object-fit: contain; }
.path-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0 auto;
  padding: 0.25rem;
  background: var(--accent-soft);
  border-radius: 999px;
}
.path-tab {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.path-tab:hover { color: var(--text-primary); }
.path-tab.active {
  background: var(--card-bg);
  color: var(--accent);
  box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.18);
}
.path-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.path-back:hover { color: var(--accent); }

/* ============================================================
   PREMIUM CARDS
   ============================================================ */
.premium-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
  transition: all 0.4s var(--ease);
}
.premium-card:hover {
  transform: translateY(-2px);
  border-color: var(--card-border-hover);
  box-shadow: 0 16px 30px -12px rgba(37, 99, 235, 0.12);
}
.dark .premium-card:hover {
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.45);
}

.logo-grad-text {
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 50%, #1e3a8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   CONTENT SECTION TRANSITIONS
   ============================================================ */
.content-section {
  display: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.content-section.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   STUDENT CABINET (demo)
   ============================================================ */
.cabinet-login {
  max-width: 420px;
  margin: 1rem auto 0;
}
.cabinet-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 1.75rem;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 20px 50px -20px var(--shadow-tint);
}
.cabinet-badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.1rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  box-shadow: 0 12px 26px -10px rgba(37, 99, 235, 0.5);
}
.cabinet-badge svg { width: 26px; height: 26px; }
.cabinet-field {
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.8rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cabinet-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cabinet-submit {
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.85rem;
  border-radius: 0.85rem;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 12px 26px -10px rgba(37, 99, 235, 0.5);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cabinet-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(37, 99, 235, 0.6); }

/* Dashboard */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}
.dash-card {
  grid-column: span 12;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 1.5rem;
  padding: 1.5rem;
  transition: all 0.4s var(--ease);
}
.dash-card:hover { transform: translateY(-3px); border-color: var(--card-border-hover); }
@media (min-width: 768px) {
  .dash-card.col-4 { grid-column: span 4; }
  .dash-card.col-5 { grid-column: span 5; }
  .dash-card.col-6 { grid-column: span 6; }
  .dash-card.col-7 { grid-column: span 7; }
  .dash-card.col-8 { grid-column: span 8; }
}
.dash-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #1e293b, #0b1220);
  border: none;
}
.dash-hero::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.45), transparent 70%);
}
.dash-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.schedule-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--border-color);
}
.schedule-item:first-of-type { border-top: none; }
.schedule-day {
  flex-shrink: 0;
  width: 52px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--accent);
}
.hw-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0;
}
.hw-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 6px;
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.hw-item.done .hw-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.hw-item.done .hw-label { text-decoration: line-through; opacity: 0.5; }
.progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  width: 0;
  transition: width 1.1s var(--ease);
}
.vocab-chip {
  display: inline-block;
  margin: 0.2rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid transparent;
  cursor: default;
  transition: all 0.25s var(--ease);
}
.vocab-chip:hover { border-color: var(--accent); transform: translateY(-2px); }

/* ============================================================
   ENTRY ANIMATIONS
   ============================================================ */
@keyframes introRise {
  from { opacity: 0; transform: translateY(26px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.intro-anim {
  opacity: 0;
  animation: introRise 0.85s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal-card-2 {
  opacity: 0;
  animation: slideUpFade 1s var(--ease) forwards;
  animation-delay: 0.2s;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablets & small laptops */
@media (max-width: 1024px) {
  .intro-gate { padding: 5.5rem 1.5rem 3.5rem; }
  .path-nav-inner { padding: 0.7rem 1.25rem; }
}

/* Tablet portrait */
@media (max-width: 768px) {
  .intro-gate { padding: 5rem 1.25rem 3rem; }
  .intro-role { margin-bottom: 2rem; }
  .intro-choices { gap: 1rem; }
  .choice-card { min-height: 150px; padding: 1.35rem; }
  .dash-card { padding: 1.35rem; }
  .top-controls { top: 1rem; right: 1rem; }
}

/* Phones */
@media (max-width: 560px) {
  .intro-gate {
    padding: 4.5rem 1.1rem 2.5rem;
    min-height: 100svh;            /* avoid mobile URL-bar jump */
    justify-content: flex-start;
    padding-top: 5rem;
  }
  .intro-photo { margin-bottom: 1.5rem; }
  .intro-role { font-size: 0.92rem; margin-bottom: 1.75rem; }
  .intro-hint { letter-spacing: 0.16em; margin-bottom: 0.9rem; }
  .intro-choices { grid-template-columns: 1fr; gap: 0.85rem; }
  .choice-card { min-height: 0; padding: 1.25rem 1.3rem; }
  .choice-go { right: 1.1rem; bottom: 1.1rem; width: 30px; height: 30px; }
  .choice-title { font-size: 1.2rem; }
  .cabinet-entry { margin-top: 1.5rem; }

  .top-controls { top: 0.8rem; right: 0.8rem; gap: 0.4rem; }

  /* Two-row nav: logo on row 1 (controls float top-right), tabs on row 2 */
  .path-nav-inner { padding: 0.55rem 0.9rem; gap: 0.4rem; flex-wrap: wrap; }
  .path-left { gap: 0.45rem; order: 0; }
  .path-spacer { order: 1; flex: 1 1 auto; width: auto; min-width: 0; }
  .path-tabs { order: 2; flex-basis: 100%; margin: 0.35rem auto 0; gap: 0; padding: 0.2rem; justify-content: center; }
  .path-tab { padding: 0.42rem 0.9rem; font-size: 0.78rem; }
  .path-back span { display: none; }
  .path-home img { height: 28px; }

  .cabinet-card { padding: 2rem 1.4rem; }
  .dash-card { padding: 1.2rem; border-radius: 1.25rem; }
}

/* ============================================================
   DEVELOPER CABINET (in-page content editor)
   ============================================================ */
.dt-edit-on .dt-editable {
  outline: 1.5px dashed rgba(37, 99, 235, 0.55);
  outline-offset: 3px;
  border-radius: 3px;
  cursor: text;
  transition: outline-color 0.2s var(--ease), background 0.2s var(--ease);
}
.dt-edit-on .dt-editable:hover {
  outline-color: var(--accent);
  background: var(--accent-soft);
}
.dt-edit-on .dt-editable:focus {
  outline: 2px solid var(--accent);
  background: var(--accent-soft);
}

.dt-toolbar {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: calc(100vw - 1.5rem);
  padding: 0.7rem 0.7rem 0.7rem 1.15rem;
  border-radius: 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px -18px var(--shadow-tint);
  font-size: 0.8rem;
}
.dt-tb-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dt-tb-info strong { font-family: var(--font-heading); font-size: 0.86rem; }
.dt-tb-lang { font-weight: 600; color: var(--accent); font-size: 0.75rem; }
.dt-tb-hint {
  color: var(--text-secondary);
  font-size: 0.7rem;
  max-width: 32ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-tb-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.dt-tb-actions button {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.76rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.7rem;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s var(--ease);
}
.dt-tb-actions button:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.dt-tb-actions button[data-act="exit"] {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-color: transparent;
  color: #fff;
}
.dt-tb-actions button[data-act="exit"]:hover { color: #fff; box-shadow: 0 10px 22px -8px rgba(37, 99, 235, 0.6); }
.dt-tb-actions button.dt-tb-danger:hover { border-color: #ef4444; color: #ef4444; }
.dt-tb-saved {
  position: absolute;
  top: -2.1rem;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.dt-toolbar.show-saved .dt-tb-saved { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
  .dt-toolbar { flex-direction: column; align-items: stretch; gap: 0.6rem; bottom: 0.6rem; }
  .dt-tb-hint { white-space: normal; max-width: none; }
  .dt-tb-actions { justify-content: space-between; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .intro-anim { opacity: 1; }
}