/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Light theme */
  --bg:          var(--tg-theme-bg-color, #F8FAFC);
  --surface:     var(--tg-theme-secondary-bg-color, #FFFFFF);
  --text:        var(--tg-theme-text-color, #0F172A);
  --text-2:      var(--tg-theme-hint-color, #64748B);
  --border:      rgba(0,0,0,0.07);

  --primary:      #4F46E5;
  --primary-dark: #4338CA;
  --primary-glow: rgba(79,70,229,0.25);

  --rose:   #F43F5E;
  --green:  #10B981;
  --amber:  #F59E0B;
  --blue:   #3B82F6;
  --purple: #8B5CF6;

  --radius-sm:  16px;
  --radius-md:  24px;
  --radius-lg:  32px;
  --radius-xl:  40px;
  --radius-2xl: 48px;
}

html, body {
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Screens ──────────────────────────────────────────────────────────────── */
.screen {
  display: none;
  flex-direction: column;
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  animation: fadeUp 0.28s ease both;
}

.screen.active { display: flex; }

.screen--dark {
  background: #020617;
  color: #FFFFFF;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hidden { display: none !important; }

/* ── Loading ──────────────────────────────────────────────────────────────── */
.loading-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Login ────────────────────────────────────────────────────────────────── */
.login-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 28px;
  max-width: 380px;
  margin: auto;
  width: 100%;
}

.login-logo { font-size: 64px; line-height: 1; }
.login-logo-img { width: 220px; height: auto; object-fit: contain; }
.header-logo-img { height: 40px; width: auto; object-fit: contain; }
.login-title { font-size: 28px; font-weight: 900; letter-spacing: -0.5px; }
.login-hint  { color: var(--text-2); font-size: 14px; font-weight: 600; }

/* ── Empty ────────────────────────────────────────────────────────────────── */
.empty-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 28px;
  text-align: center;
}

.empty-icon  { font-size: 56px; }
.empty-title { font-size: 22px; font-weight: 800; }
.empty-sub   { color: var(--text-2); font-size: 14px; max-width: 240px; }

/* ── Page header (decks) ──────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 56px 24px 20px;
}

.page-title { font-size: 32px; font-weight: 900; letter-spacing: -1px; }
.page-sub   { color: var(--text-2); font-size: 13px; font-weight: 700; margin-top: 2px; }

/* ── Decks list ───────────────────────────────────────────────────────────── */
.decks-list {
  padding: 0 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deck-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 20px 20px 18px;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
  text-align: left;
  width: 100%;
}

.deck-card:active { transform: scale(0.97); opacity: 0.85; }

.deck-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.deck-card__name  { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.deck-card__count {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 4px;
}

.deck-card__arrow {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(79,70,229,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.deck-card__progress {
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.deck-card__fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  transition: width 0.8s ease;
}

/* ── Deck detail ──────────────────────────────────────────────────────────── */
.nav-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 8px;
}

.nav-title {
  font-size: 18px;
  font-weight: 800;
}

.detail-header {
  padding: 8px 24px 20px;
}

.detail-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.detail-sub {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-top: 4px;
}

/* ── Stat grid ────────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 4px;
}

.stat-card {
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-card--green  { background: rgba(16,185,129,0.1); }
.stat-card--rose   { background: rgba(244,63,94,0.1); }
.stat-card--blue   { background: rgba(59,130,246,0.1); }
.stat-card--amber  { background: rgba(245,158,11,0.1); }

.stat-card__label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  opacity: 0.55;
}

.stat-card__value {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
}

.stat-card--green .stat-card__value  { color: var(--green); }
.stat-card--rose  .stat-card__value  { color: var(--rose); }
.stat-card--blue  .stat-card__value  { color: var(--blue); }
.stat-card--amber .stat-card__value  { color: var(--amber); }

/* ── Section ──────────────────────────────────────────────────────────────── */
.section {
  padding: 16px 16px 4px;
}

.section--last { padding-bottom: 40px; }

.section-label {
  font-size: 10px;
  font-weight: 900;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 0 4px;
  margin-bottom: 10px;
}

/* ── Action rows ──────────────────────────────────────────────────────────── */
.action-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: #F8FAFC;
  border: none;
  border-radius: var(--radius-xl);
  padding: 20px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease;
}

.action-row:active { transform: scale(0.97); }

.action-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-icon--indigo { color: var(--primary); }
.action-icon--purple { color: var(--purple); }

.action-info  { flex: 1; }
.action-title { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; }
.action-desc  { font-size: 12px; color: var(--text-2); font-weight: 600; margin-top: 2px; }
.action-arrow { color: var(--border); flex-shrink: 0; }

/* ── Export chips ─────────────────────────────────────────────────────────── */
.export-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.export-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 12px;
  border-radius: var(--radius-lg);
  border: 1.5px solid transparent;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.12s ease;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.export-chip:active { transform: scale(0.95); }

.export-chip__icon { font-size: 16px; }

.export-chip--rose  { background: rgba(244,63,94,0.08);  color: #E11D48; border-color: rgba(244,63,94,0.15); }
.export-chip--amber { background: rgba(245,158,11,0.08); color: #B45309; border-color: rgba(245,158,11,0.15); }
.export-chip--green { background: rgba(16,185,129,0.08); color: #047857; border-color: rgba(16,185,129,0.15); }
.export-chip--blue  { background: rgba(59,130,246,0.08); color: #1D4ED8; border-color: rgba(59,130,246,0.15); }

/* ── Import form ──────────────────────────────────────────────────────────── */
.import-form {
  padding: 8px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.import-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field-group { display: flex; flex-direction: column; gap: 8px; }

.field-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-left: 4px;
}

.field-hint {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

.field-input, .field-textarea {
  width: 100%;
  padding: 18px 22px;
  background: #F8FAFC;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.field-input:focus, .field-textarea:focus {
  border-color: var(--primary);
  background: var(--surface);
}

.field-textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
  font-family: monospace;
  font-size: 14px;
}

.divider-text {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.file-upload { cursor: pointer; }

.file-upload__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: border-color 0.2s, color 0.2s;
}

.file-upload:hover .file-upload__inner {
  border-color: var(--primary);
  color: var(--primary);
}

.file-name {
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
  font-weight: 600;
}

/* ── Study screen ─────────────────────────────────────────────────────────── */
.study-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
}

.study-counter {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 99px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.1em;
}

.study-progress {
  padding: 0 20px 8px;
}

.study-progress__bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
}

.study-progress__fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* ── Card stack ───────────────────────────────────────────────────────────── */
.card-stack {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 16px 24px;
}

.card-shadow {
  position: absolute;
  width: calc(100% - 80px);
  max-width: 300px;
  aspect-ratio: 3/4;
  border-radius: var(--radius-2xl);
  pointer-events: none;
}

.card-shadow--3 {
  background: rgba(55,48,195,0.15);
  transform: translateY(16px) scale(0.88);
  filter: blur(1px);
}

.card-shadow--2 {
  background: rgba(79,70,229,0.25);
  transform: translateY(8px) scale(0.94);
}

.card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3/4;
  border-radius: var(--radius-2xl);
  cursor: pointer;
  user-select: none;
  touch-action: none;
  transform-origin: center bottom;
  transition: transform 0.05s linear;
  will-change: transform;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--radius-2xl);
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

.card-face--front {
  background: linear-gradient(145deg, #5B4FFF, #3730C4);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 32px 64px rgba(79,70,229,0.35), 0 8px 16px rgba(0,0,0,0.2);
}

.card-face--back {
  background: #FFFFFF;
  transform: rotateY(180deg);
  box-shadow: 0 32px 64px rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.12);
}

.card-word {
  font-size: 36px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  line-height: 1.2;
  font-style: italic;
}

.card-tap-hint {
  position: absolute;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
}

.card-translation {
  font-size: 36px;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

/* ── Swipe overlays ───────────────────────────────────────────────────────── */
.swipe-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 20;
  pointer-events: none;
  transition: opacity 0.1s ease;
  border: 4px solid transparent;
}

.swipe-overlay--known {
  background: rgba(16,185,129,0.2);
  border-color: #10B981;
  color: #10B981;
}

.swipe-overlay--unknown {
  background: rgba(244,63,94,0.2);
  border-color: #F43F5E;
  color: #F43F5E;
}

/* ── Answer buttons ───────────────────────────────────────────────────────── */
.answer-buttons {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 20px 40px 8px;
}

.answer-btn {
  width: 96px;
  height: 96px;
  border-radius: 32px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.answer-btn:active { transform: scale(0.88); }

.answer-btn--unknown {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  color: #F43F5E;
}

.answer-btn--known {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 16px 40px rgba(79,70,229,0.5);
}

.answer-btn--known:active { background: var(--primary-dark); }

.swipe-hint {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.3px;
  padding: 8px 24px 48px;
}

/* ── Done screen ──────────────────────────────────────────────────────────── */
.done-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 28px;
  max-width: 380px;
  margin: auto;
  width: 100%;
}

.done-emoji { font-size: 64px; line-height: 1; }
.done-title { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; color: #fff; }

.done-stats {
  display: flex;
  gap: 14px;
  margin: 8px 0;
}

.done-stat {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}

.done-stat__num  { font-size: 36px; font-weight: 900; letter-spacing: -1px; }
.done-stat__label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5); margin-top: 4px; }

.done-stat--known .done-stat__num   { color: #10B981; }
.done-stat--unknown .done-stat__num { color: #F43F5E; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-md);
  padding: 16px 24px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
  letter-spacing: -0.2px;
}

.btn-primary:active { transform: scale(0.96); background: var(--primary-dark); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.btn-secondary:active { transform: scale(0.96); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.btn-ghost:active { transform: scale(0.96); }

.btn-full { width: 100%; }

.btn-circle {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.btn-back-circle {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  transition: transform 0.12s ease;
}

.btn-back-circle:active { transform: scale(0.9); }

.btn-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: transform 0.12s ease;
}

.btn-close:active { transform: scale(0.9); }

/* ── Status messages ──────────────────────────────────────────────────────── */
.status-msg {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
}

.status-msg--loading { color: var(--text-2); }
.status-msg--success { color: #047857; background: rgba(16,185,129,0.1); }
.status-msg--error   { color: #BE123C; background: rgba(244,63,94,0.1); }

.error-msg {
  font-size: 13px;
  font-weight: 700;
  color: var(--rose);
}