:root {
  color-scheme: dark;
  --bg: #08111f;
  --panel: rgba(12, 22, 38, 0.82);
  --panel-strong: rgba(18, 35, 58, 0.94);
  --text: #f5f8ff;
  --muted: #aebbd2;
  --accent: #78d1ff;
  --accent-2: #f4c56a;
  --good: #3fd186;
  --bad: #ff6b7a;
  --line: rgba(255,255,255,.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { overflow-x: hidden; overscroll-behavior-x: none; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background:
    radial-gradient(circle at 18% 8%, rgba(80, 150, 255, .26), transparent 32rem),
    radial-gradient(circle at 82% 0%, rgba(255, 198, 92, .20), transparent 28rem),
    linear-gradient(160deg, #07101d 0%, #0c1930 48%, #080d18 100%);
  color: var(--text);
}
button, select { font: inherit; }
button { cursor: pointer; }
.app-header, main, footer { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(18px);
}
.brand { display: flex; gap: 12px; align-items: center; color: var(--text); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--accent); color: #06111d; font-weight: 950; font-size: 1.7rem; }
.brand strong, .brand small { display: block; }
.brand small { color: var(--muted); }
.top-nav { display: flex; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,.18); }
.top-nav a { color: var(--muted); text-decoration: none; padding: 10px 15px; border-radius: 999px; font-weight: 850; }
.top-nav a.active, .top-nav a:hover { color: #06111d; background: var(--accent); }
.view { padding: 28px 0 42px; }
.learn-view { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; min-height: calc(100vh - 145px); }
.tinder-learn-view { width: min(680px, 100%); margin: 0 auto; padding-top: 18px; }
.eyebrow { margin: 0 0 10px; color: var(--accent-2); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
h1 { font-size: clamp(2.4rem, 7vw, 5.4rem); line-height: .92; letter-spacing: -.055em; margin: 0; }
.learn-copy p:not(.eyebrow), .page-heading + p { color: var(--muted); font-size: 1.14rem; line-height: 1.7; }
.learn-shell, .page-view { background: var(--panel); border: 1px solid var(--line); border-radius: 30px; padding: 22px; box-shadow: 0 28px 80px rgba(0,0,0,.34); backdrop-filter: blur(14px); }
.tinder-learn-view .learn-shell { background: transparent; border: 0; box-shadow: none; padding: 0; }
.learn-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 16px; }
label { color: var(--muted); display: grid; gap: 8px; font-weight: 800; }
select { appearance: none; border: 1px solid var(--line); background: rgba(0,0,0,.24); color: var(--text); border-radius: 15px; padding: 13px 42px 13px 16px; outline: none; }
.mini-stats { text-align: right; color: var(--muted); }
.mini-stats strong { display: block; color: var(--accent); font-size: 2rem; line-height: 1; }
.swipe-stage { position: relative; perspective: 1200px; }
.swipe-label {
  position: absolute;
  top: 34px;
  z-index: 0;
  opacity: .24;
  border: 3px solid currentColor;
  border-radius: 16px;
  padding: 8px 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
  transform: rotate(-14deg);
}
.swipe-left { left: 22px; color: var(--bad); }
.swipe-right { right: 22px; color: var(--good); transform: rotate(14deg); }
.flashcard {
  width: 100%;
  min-height: min(68vh, 590px);
  display: grid;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 30px;
  padding: 58px 28px 32px;
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    radial-gradient(circle at top left, rgba(120,209,255,.24), transparent 18rem),
    rgba(6, 13, 25, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 22px 58px rgba(0,0,0,.25);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  touch-action: none;
  user-select: none;
}
.flashcard:hover { transform: translateY(-2px); border-color: rgba(120,209,255,.5); }
.flashcard.is-dragging { transition: none; cursor: grabbing; }
.flashcard.swiping-right { border-color: rgba(63,209,134,.78); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 22px 70px rgba(63,209,134,.28); }
.flashcard.swiping-left { border-color: rgba(255,107,122,.78); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 22px 70px rgba(255,107,122,.25); }
.flashcard.fly-right { transform: translateX(120vw) rotate(24deg) !important; opacity: 0; }
.flashcard.fly-left { transform: translateX(-120vw) rotate(-24deg) !important; opacity: 0; }
.flashcard.is-flipped { background:
    linear-gradient(145deg, rgba(244,197,106,.13), rgba(255,255,255,.02)),
    radial-gradient(circle at top right, rgba(244,197,106,.24), transparent 18rem),
    rgba(6, 13, 25, .72); }
.card-chip { position: absolute; top: 20px; left: 22px; padding: 7px 12px; border-radius: 999px; background: rgba(120,209,255,.16); color: var(--accent); font-weight: 950; }
.card-chip.secondary { left: auto; right: 22px; color: var(--muted); background: rgba(255,255,255,.08); }
.card-side { display: grid; place-items: center; gap: 16px; text-align: center; }
.russian { font-size: clamp(4.5rem, 15vw, 9rem); font-weight: 950; letter-spacing: -.055em; line-height: .9; }
.transcription { font-size: clamp(1.5rem, 5vw, 2.6rem); color: var(--accent-2); font-weight: 900; }
.solution-label { color: var(--accent-2); font-weight: 950; text-transform: uppercase; letter-spacing: .12em; }
.german-word { font-size: clamp(3.5rem, 10vw, 6.8rem); font-weight: 950; letter-spacing: -.05em; }
.example-text { max-width: 620px; color: var(--muted); font-size: 1.12rem; line-height: 1.55; }
.tap-hint { color: var(--muted); font-size: .98rem; }
.tts-status { color: var(--muted); font-size: .92rem; min-height: 1.2em; }
.speak-btn::before { content: '🔊 '; }
button:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }
.self-grade, .learn-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.learn-actions { margin-top: 12px; }
.self-grade button, .learn-actions button, .danger { border: 0; border-radius: 18px; padding: 15px 18px; font-weight: 950; color: var(--text); }
.correct-btn { background: linear-gradient(135deg, var(--good), #1b9c64); color: #04130c !important; }
.wrong-btn, .danger { background: linear-gradient(135deg, var(--bad), #b83d50); }
.secondary { background: rgba(255,255,255,.1); border: 1px solid var(--line) !important; }
.page-view { min-height: 620px; }
.page-heading { margin-bottom: 22px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.stats-grid article { padding: 24px; border-radius: 24px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.stats-grid strong { display: block; font-size: 2.6rem; line-height: 1; }
.stats-grid span { color: var(--muted); }
.word-list { display: grid; gap: 10px; }
.word-row { display: grid; grid-template-columns: 1fr 1fr .7fr auto; gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.045); align-items: center; }
.word-main strong { display: block; font-size: 1.55rem; }
.word-main span, .word-row small, .word-category { color: var(--muted); }
.word-meaning { font-weight: 850; }
footer { color: var(--muted); padding: 0 0 36px; }
@media (max-width: 860px) {
  .app-header { position: static; align-items: stretch; flex-direction: column; }
  .top-nav { width: 100%; justify-content: space-between; }
  .learn-view { grid-template-columns: 1fr; min-height: auto; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .word-row { grid-template-columns: 1fr; }
  .learn-actions { grid-template-columns: 1fr; }
  .flashcard { min-height: 360px; }
}
@media (max-width: 520px) {
  .stats-grid, .self-grade, .learn-actions { grid-template-columns: 1fr; }
  h1 { font-size: 2.6rem; }
}