*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

:root {
  /* ═══ BACKGROUND ═══ */
  --bg-start: #141416;
  --bg-mid: #18181C;
  --bg-end: #111114;
  --bg-angle: 180deg;
  --pattern-color: 255, 255, 255;
  --pattern-opacity: 0.025;
  --pattern-size: 16px;
  --pattern-dot-size: 1px;
  --glow-1-color: 20, 184, 166;
  --glow-1-opacity: 0.08;
  --glow-1-x: 50%;
  --glow-1-y: 35%;
  --glow-1-size-x: 60%;
  --glow-1-size-y: 40%;
  --glow-2-color: 20, 184, 166;
  --glow-2-opacity: 0.04;
  --glow-2-x: 30%;
  --glow-2-y: 80%;
  --glow-2-size-x: 80%;
  --glow-2-size-y: 50%;

  /* ═══ SAFE AREA (stub) ═══ */
  --safe-area-top: 54px;
  --safe-area-bottom: 34px;

  /* ═══ HEADER ═══ */
  --hdr-padding-top: 16px;
  --hdr-padding-h: 20px;
  --hdr-gap: 16px;

  /* ═══ TAB BAR STUB ═══ */
  --tab-bar-height: 64px;
  --tab-bar-margin-bottom: 14px;
  --tab-bar-margin-h: 18px;
  --tab-bar-bg: rgba(28, 28, 32, 0.72);
  --tab-bar-border: rgba(255, 255, 255, 0.1);
  --tab-bar-radius: 99px;
  --tab-bar-blur: 24px;

  /* ═══ PROGRESS BAR ═══ */
  --prog-height: 6px;
  --prog-bg-color: rgba(255, 255, 255, 0.04);
  --prog-bg-inset-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  --prog-fill-1: #0891B2;
  --prog-fill-2: #06B6D4;
  --prog-fill-3: #14B8A6;
  --prog-fill-4: #5EEAD4;
  --prog-fill-5: #A5F3FC;
  --prog-fill-glow-1-radius: 10px;
  --prog-fill-glow-1-color: rgba(94, 234, 212, 0.8);
  --prog-fill-glow-2-radius: 24px;
  --prog-fill-glow-2-color: rgba(20, 184, 166, 0.4);
  --prog-shimmer-duration: 4s;
  --prog-tip-color: #A5F3FC;
  --prog-tip-glow-color: #5EEAD4;
  --prog-tip-width: 3px;

  /* ═══ COUNTER ═══ */
  --count-cur-size: 15px;
  --count-cur-weight: 800;
  --count-cur-color: #5EEAD4;
  --count-cur-glow-1: 10px;
  --count-cur-glow-2: 20px;
  --count-cur-glow-alpha: 0.7;
  --count-sep-size: 13px;
  --count-sep-color: rgba(255, 255, 255, 0.25);
  --count-total-size: 13px;
  --count-total-weight: 600;
  --count-total-color: rgba(255, 255, 255, 0.45);
  --count-gap: 3px;

  /* ═══ TOGGLE AREA ═══ */
  --tog-area-padding-top: 24px;

  /* ═══ TOGGLE CONTAINER ═══ */
  --tog-bg: rgba(255, 255, 255, 0.04);
  --tog-border-color: transparent;
  --tog-border-width: 0px;
  --tog-radius: 99px;
  --tog-min-width: 220px;
  --tog-backdrop-blur: 5px;

  /* ═══ TOGGLE BUTTON ═══ */
  --tog-btn-pad-v: 8px;
  --tog-btn-pad-h: 20px;
  --tog-btn-size: 13px;
  --tog-btn-weight: 600;
  --tog-btn-letter: -0.1px;
  --tog-btn-color-inactive: rgba(255, 255, 255, 0.45);
  --tog-btn-color-active: #ffffff;

  /* ═══ TOGGLE PILL ═══ */
  --tog-pill-color: #14B8A6;
  --tog-pill-inset: 3px;
  --tog-pill-glow-1-radius: 24px;
  --tog-pill-glow-1-color: #14B8A6;
  --tog-pill-glow-2-radius: 48px;
  --tog-pill-glow-2-color: rgba(20, 184, 166, 0.5);
  --tog-pill-duration: 400ms;
  --tog-pill-easing: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ═══ CARD ZONE ═══ */
  --card-zone-padding-top: 0;
  --card-zone-padding-h: 16px;
  --stack-wrap-margin-top: 48px;
  --stack-wrap-max-width: 420px;
  --stack-wrap-padding-h: 24px;

  /* ═══ CARD (FRONT FACE) ═══ */
  --card-max-width: 360px;
  --card-max-height: 460px;
  --card-aspect-ratio: 0.72;
  --card-radius: 24px;
  --card-bg-start: #1C2028;
  --card-bg-end: #14181F;
  --card-bg-angle: 155deg;
  --card-border-color: rgba(255, 255, 255, 0.08);
  --card-border-width: 1px;
  --card-padding-v: 32px;
  --card-padding-h: 24px;
  --card-shadow-y: 20px;
  --card-shadow-blur: 60px;
  --card-shadow-color: rgba(0, 0, 0, 0.5);
  --card-shadow-2-y: 8px;
  --card-shadow-2-blur: 24px;
  --card-shadow-2-color: rgba(0, 0, 0, 0.35);
  --card-inset-top: rgba(255, 255, 255, 0.1);
  --card-inset-bottom: rgba(0, 0, 0, 0.25);

  /* ═══ CARD BACK FACE ═══ */
  --card-back-bg-start: #1E2430;
  --card-back-bg-end: #161B24;

  /* ═══ CARD TEXT ═══ */
  --word-size: 42px;
  --word-weight: 700;
  --word-color: #ffffff;
  --word-letter: -0.8px;
  --word-line-height: 1.15;
  --word-text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  --word-back-size: 32px;
  --word-back-weight: 600;
  --word-back-color: rgba(255, 255, 255, 0.95);
  --card-hint-size: 12px;
  --card-hint-weight: 500;
  --card-hint-color: rgba(255, 255, 255, 0.4);
  --card-hint-letter: 1.5px;
  --card-hint-margin-top: 24px;

  /* ═══ BEHIND CARD ═══ */
  --behind-scale-base: 0.94;
  --behind-translate-y: 10px;
  --behind-text-blur: 18px;
  --behind-text-opacity: 0.6;

  /* ═══ SKIP/KNOW HINTS ═══ */
  --hint-size: 11px;
  --hint-weight: 700;
  --hint-letter: 2.5px;
  --hint-color-know: #5EEAD4;
  --hint-color-skip: #FF0033;
  --hint-base-color: rgba(255, 255, 255, 0.22);
  --hint-idle-opacity: 1;
  --hint-fade-distance: 40px;
  --hint-translate-max: 10px;

  /* ═══ SKIP/KNOW GLOW — 5 LAYERS ═══ */
  --glow-intensity: 1;
  --glow-opacity: 1;
  --glow-base-radius: 20px;
  --glow-base-alpha: 1;
  --glow-l1-base: 60px;
  --glow-l1-max: 200px;
  --glow-l1-alpha-base: 0.9;
  --glow-l1-alpha-max: 1;
  --glow-l2-base: 140px;
  --glow-l2-max: 400px;
  --glow-l2-alpha-base: 0.8;
  --glow-l2-alpha-max: 1;
  --glow-l3-base: 280px;
  --glow-l3-max: 800px;
  --glow-l3-alpha-base: 0.7;
  --glow-l3-alpha-max: 1;
  --glow-l4-base: 500px;
  --glow-l4-max: 1500px;
  --glow-l4-alpha-base: 0.5;
  --glow-l4-alpha-max: 1;

  /* ═══ CARD SWIPE OVERLAY ═══ */
  --over-color-know: 20, 184, 166;
  --over-color-skip: 255, 50, 80;
  --over-max-opacity: 0.9;
  --over-gradient-stop: 65%;
  --over-base-alpha: 0.45;

  /* ═══ DRAG PHYSICS ═══ */
  --drag-rotation-max: 15deg;
  --swipe-threshold-pct: 0.28;
  --swipe-velocity-threshold: 0.4;

  /* ═══ DISMISS ANIMATION ═══ */
  --dismiss-duration: 350ms;
  --dismiss-easing: cubic-bezier(0.2, 0.6, 0.35, 1);
  --dismiss-rotation: 22deg;

  /* ═══ SNAP-BACK ═══ */
  --snapback-duration: 500ms;
  --snapback-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ═══ FLIP ANIMATION ═══ */
  --flip-phase-duration: 220ms;
  --flip-easing: ease-in-out;
  --flip-scale-min: 0;

  /* ═══ UNBLUR (card appearance) ═══ */
  --unblur-duration: 500ms;
  --unblur-initial-blur: 16px;
  --unblur-initial-opacity: 0.3;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0a0a;
  color: #F5F5F5;
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* ═══════════════════════ STUDY SCREEN ═══════════════════════ */

.app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--bg-angle), var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%);
  z-index: 0;
}

.app-pat {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--pattern-color), var(--pattern-opacity)) var(--pattern-dot-size), transparent var(--pattern-dot-size));
  background-size: var(--pattern-size) var(--pattern-size);
  z-index: 0;
  pointer-events: none;
}

.app-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse var(--glow-1-size-x) var(--glow-1-size-y) at var(--glow-1-x) var(--glow-1-y), rgba(var(--glow-1-color), var(--glow-1-opacity)), transparent 70%),
    radial-gradient(ellipse var(--glow-2-size-x) var(--glow-2-size-y) at var(--glow-2-x) var(--glow-2-y), rgba(var(--glow-2-color), var(--glow-2-opacity)), transparent 60%);
  z-index: 0;
  pointer-events: none;
}

.hdr {
  position: relative;
  z-index: 10;
  padding: calc(var(--safe-area-top) + var(--hdr-padding-top)) var(--hdr-padding-h) 0;
  display: flex;
  align-items: center;
  gap: var(--hdr-gap);
}

.hdr-prog {
  flex: 1;
  height: var(--prog-height);
  background: var(--prog-bg-color);
  border-radius: 99px;
  position: relative;
  box-shadow: var(--prog-bg-inset-shadow);
}

.hdr-prog-track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.hdr-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--prog-fill-1) 0%, var(--prog-fill-2) 25%, var(--prog-fill-3) 55%, var(--prog-fill-4) 85%, var(--prog-fill-5) 100%);
  background-size: 200% 100%;
  border-radius: inherit;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 0 var(--prog-fill-glow-1-radius) var(--prog-fill-glow-1-color),
    0 0 var(--prog-fill-glow-2-radius) var(--prog-fill-glow-2-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  position: relative;
  animation: progShimmer var(--prog-shimmer-duration) linear infinite;
  min-width: var(--prog-height);
}

.hdr-prog-fill::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  bottom: -1px;
  width: var(--prog-tip-width);
  background: var(--prog-tip-color);
  border-radius: 99px;
  box-shadow:
    0 0 8px var(--prog-tip-glow-color),
    0 0 16px var(--prog-tip-glow-color),
    0 0 24px rgba(94, 234, 212, 0.6);
}

@keyframes progShimmer {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

.hdr-count {
  display: inline-flex;
  align-items: center;
  gap: var(--count-gap);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 52px;
  justify-content: flex-end;
  letter-spacing: -0.3px;
  line-height: 1;
}

.hdr-count-cur {
  font-size: var(--count-cur-size);
  font-weight: var(--count-cur-weight);
  color: var(--count-cur-color);
  text-shadow:
    0 0 var(--count-cur-glow-1) rgba(94, 234, 212, var(--count-cur-glow-alpha)),
    0 0 var(--count-cur-glow-2) rgba(94, 234, 212, calc(var(--count-cur-glow-alpha) * 0.5));
  min-width: 16px;
  text-align: right;
  line-height: 1;
}

.hdr-count-sep {
  font-size: var(--count-sep-size);
  color: var(--count-sep-color);
  font-weight: 500;
  line-height: 1;
}

.hdr-count-total {
  font-size: var(--count-total-size);
  font-weight: var(--count-total-weight);
  color: var(--count-total-color);
  line-height: 1;
}

.tog-area {
  display: flex;
  justify-content: center;
  padding: var(--tog-area-padding-top) 16px 0;
  position: relative;
  z-index: 10;
}

.toggle {
  display: flex;
  background: var(--tog-bg);
  border: var(--tog-border-width) solid var(--tog-border-color);
  border-radius: var(--tog-radius);
  position: relative;
  min-width: var(--tog-min-width);
  backdrop-filter: blur(var(--tog-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--tog-backdrop-blur));
}

.tog-pill {
  position: absolute;
  top: var(--tog-pill-inset);
  bottom: var(--tog-pill-inset);
  left: var(--tog-pill-inset);
  width: calc(50% - (var(--tog-pill-inset) * 2));
  border-radius: 99px;
  background: var(--tog-pill-color);
  box-shadow:
    0 0 var(--tog-pill-glow-1-radius) var(--tog-pill-glow-1-color),
    0 0 var(--tog-pill-glow-2-radius) var(--tog-pill-glow-2-color);
  transition: left var(--tog-pill-duration) var(--tog-pill-easing);
  pointer-events: none;
  z-index: 0;
}

.toggle[data-active="produce"] .tog-pill {
  left: calc(50% + var(--tog-pill-inset));
}

.tog-btn {
  flex: 1;
  padding: var(--tog-btn-pad-v) var(--tog-btn-pad-h);
  font-size: var(--tog-btn-size);
  font-weight: var(--tog-btn-weight);
  color: var(--tog-btn-color-inactive);
  border-radius: 99px;
  transition: color 0.35s;
  position: relative;
  z-index: 1;
  letter-spacing: var(--tog-btn-letter);
  font-family: inherit;
  white-space: nowrap;
}

.tog-btn.on {
  color: var(--tog-btn-color-active);
}

.card-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: 5;
  padding: var(--card-zone-padding-top) var(--card-zone-padding-h) 0;
}

.stack-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--stack-wrap-max-width);
  padding: 0 var(--stack-wrap-padding-h);
  margin-top: var(--stack-wrap-margin-top);
}

.card-stack {
  position: relative;
  width: 100%;
  max-width: var(--card-max-width);
  aspect-ratio: var(--card-aspect-ratio);
  max-height: var(--card-max-height);
}

.swipe-hint {
  position: absolute;
  top: 50%;
  font-size: var(--hint-size);
  font-weight: var(--hint-weight);
  pointer-events: none;
  writing-mode: vertical-lr;
  letter-spacing: var(--hint-letter);
  z-index: 4;
  text-transform: uppercase;
  opacity: var(--hint-idle-opacity);
  color: var(--hint-base-color);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, color 0.25s ease-out;
}

.swipe-hint-l {
  left: 0;
  transform: translateY(-50%) rotate(180deg);
}

.swipe-hint-r {
  right: 0;
  transform: translateY(-50%);
}

.card {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  user-select: none;
  touch-action: none;
  will-change: transform;
}

.card[data-d="0"] {
  z-index: 3;
  cursor: grab;
}

.card[data-d="0"]:active {
  cursor: grabbing;
}

.card[data-d="1"] {
  z-index: 2;
  transform: translateY(var(--behind-translate-y)) scale(var(--behind-scale-base));
  pointer-events: none;
}

.card[data-d="1"] .card-word,
.card[data-d="1"] .card-hint {
  filter: blur(var(--behind-text-blur));
  opacity: var(--behind-text-opacity);
}

.card-in {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: inherit;
  transition: transform var(--flip-phase-duration) var(--flip-easing);
  will-change: transform;
}

.card.flipping-out .card-in {
  transform: scaleX(var(--flip-scale-min));
}

.card-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--card-padding-v) var(--card-padding-h);
  background: linear-gradient(var(--card-bg-angle), var(--card-bg-start) 0%, var(--card-bg-end) 100%);
  border: var(--card-border-width) solid var(--card-border-color);
  transition: box-shadow 0.35s ease-out;
}

.card[data-d="0"] .card-face {
  box-shadow:
    0 var(--card-shadow-y) var(--card-shadow-blur) var(--card-shadow-color),
    0 var(--card-shadow-2-y) var(--card-shadow-2-blur) var(--card-shadow-2-color),
    inset 0 1px 0 var(--card-inset-top),
    inset 0 -1px 0 var(--card-inset-bottom);
}

.card[data-d="1"] .card-face {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.card-back {
  opacity: 0;
  background: linear-gradient(var(--card-bg-angle), var(--card-back-bg-start) 0%, var(--card-back-bg-end) 100%);
}

.card.flip .card-front { opacity: 0; }
.card.flip .card-back { opacity: 1; }

.card-word {
  font-size: var(--word-size);
  font-weight: var(--word-weight);
  color: var(--word-color);
  text-align: center;
  line-height: var(--word-line-height);
  letter-spacing: var(--word-letter);
  word-break: break-word;
  position: relative;
  z-index: 1;
  text-shadow: var(--word-text-shadow);
}

.card-hint {
  font-size: var(--card-hint-size);
  font-weight: var(--card-hint-weight);
  color: var(--card-hint-color);
  margin-top: var(--card-hint-margin-top);
  text-transform: uppercase;
  letter-spacing: var(--card-hint-letter);
  position: relative;
  z-index: 1;
}

.card-back .card-word {
  font-size: var(--word-back-size);
  font-weight: var(--word-back-weight);
  color: var(--word-back-color);
}

.swipe-hint-glow {
  color: transparent;
  opacity: 0;
  transition: opacity 0.12s linear, transform 0.25s ease-out;
  will-change: opacity;
}

.swipe-hint-l.swipe-hint-glow {
  --layer-color: color-mix(in srgb, var(--hint-color-skip) calc(var(--glow-opacity) * 100%), transparent);
  text-shadow:
    0 0 calc(var(--glow-base-radius) * var(--glow-intensity)) var(--layer-color),
    0 0 calc(var(--glow-l1-max) * var(--glow-intensity)) var(--layer-color),
    0 0 calc(var(--glow-l2-max) * var(--glow-intensity)) var(--layer-color),
    0 0 calc(var(--glow-l3-max) * var(--glow-intensity)) var(--layer-color),
    0 0 calc(var(--glow-l4-max) * var(--glow-intensity)) var(--layer-color);
}

.swipe-hint-r.swipe-hint-glow {
  --layer-color: color-mix(in srgb, var(--hint-color-know) calc(var(--glow-opacity) * 100%), transparent);
  text-shadow:
    0 0 calc(var(--glow-base-radius) * var(--glow-intensity)) var(--layer-color),
    0 0 calc(var(--glow-l1-max) * var(--glow-intensity)) var(--layer-color),
    0 0 calc(var(--glow-l2-max) * var(--glow-intensity)) var(--layer-color),
    0 0 calc(var(--glow-l3-max) * var(--glow-intensity)) var(--layer-color),
    0 0 calc(var(--glow-l4-max) * var(--glow-intensity)) var(--layer-color);
}

@keyframes unblurText {
  from {
    filter: blur(var(--unblur-initial-blur));
    opacity: var(--unblur-initial-opacity);
  }
  to {
    filter: blur(0);
    opacity: 1;
  }
}

.card[data-d="0"]:not(.flip) .card-front .card-word,
.card[data-d="0"]:not(.flip) .card-front .card-hint {
  animation: unblurText var(--unblur-duration) ease-out both;
}

.tab-bar-stub {
  position: absolute;
  left: var(--tab-bar-margin-h);
  right: calc(var(--tab-bar-margin-h) + var(--tab-bar-height) + 12px);
  bottom: calc(var(--safe-area-bottom) + var(--tab-bar-margin-bottom));
  height: var(--tab-bar-height);
  background: var(--tab-bar-bg);
  border: 1px solid var(--tab-bar-border);
  border-radius: var(--tab-bar-radius);
  backdrop-filter: blur(var(--tab-bar-blur));
  -webkit-backdrop-filter: blur(var(--tab-bar-blur));
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 16px;
  z-index: 50;
  pointer-events: none;
}

.tab-bar-search {
  position: absolute;
  right: var(--tab-bar-margin-h);
  bottom: calc(var(--safe-area-bottom) + var(--tab-bar-margin-bottom));
  width: var(--tab-bar-height);
  height: var(--tab-bar-height);
  background: var(--tab-bar-bg);
  border: 1px solid var(--tab-bar-border);
  border-radius: 50%;
  backdrop-filter: blur(var(--tab-bar-blur));
  -webkit-backdrop-filter: blur(var(--tab-bar-blur));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
}

.tab-stub-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  opacity: 0.55;
}

.tab-stub-item.active {
  opacity: 1;
}

.tab-stub-icon {
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
}

.tab-stub-item.active .tab-stub-icon {
  background: #5EEAD4;
  box-shadow: 0 0 6px rgba(94, 234, 212, 0.5);
}

.tab-bar-search .tab-stub-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: none;
  position: relative;
}

.tab-bar-search .tab-stub-icon::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 8px;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
  transform: rotate(45deg);
  border-radius: 2px;
}

.tab-stub-label {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -0.1px;
}

.tab-stub-item.active .tab-stub-label {
  color: #5EEAD4;
}