/* ================== THEME TOKENS ================== */
:root, html[data-theme="dark"] {
  --bg:#050508; --app:#0d0d15; --topbar:rgba(13,13,21,.72); --nav:rgba(13,13,21,.92);
  --card1:#181826; --card2:#10101a; --cardback1:#1f1f33; --cardback2:#141424;
  --text:#fff; --muted:#8a8a9e; --border:rgba(255,255,255,.12);
  --word1:#00cec9; --word2:#81ecec; --pink:#fd79a8; --accent:#6c5ce7; --accent2:#a29bfe;
  --mnem-bg:rgba(0,0,0,.30); --audio-bg:rgba(255,255,255,.08); --audio-border:rgba(255,255,255,.18);
  --shadow:0 25px 50px -12px rgba(0,0,0,.7); --nav-inactive:#6b6b80;
  --surface:rgba(255,255,255,.04); --green:#00d68f; --amber:#ffb020;
}
html[data-theme="light"] {
  --bg:#e7eaf2; --app:#f5f6fb; --topbar:rgba(245,246,251,.82); --nav:rgba(255,255,255,.94);
  --card1:#fff; --card2:#eef1f9; --cardback1:#fff; --cardback2:#e9f0fb;
  --text:#14142b; --muted:#6b6b85; --border:rgba(20,20,45,.10);
  --word1:#009c98; --word2:#0bb0bd; --pink:#e84393; --accent:#6c5ce7; --accent2:#8f83f0;
  --mnem-bg:rgba(108,92,231,.07); --audio-bg:rgba(108,92,231,.10); --audio-border:rgba(108,92,231,.25);
  --shadow:0 20px 45px -15px rgba(60,60,120,.35); --nav-inactive:#a6a6b8;
  --surface:rgba(20,20,45,.03); --green:#00a86b; --amber:#e08a00;
}
* { box-sizing:border-box; margin:0; padding:0; user-select:none; -webkit-tap-highlight-color:transparent; }
html, body { overscroll-behavior:none; }
body {
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden; height:100vh; height:100dvh; height:var(--tg-vh, 100dvh); width:100vw;
  display:flex; justify-content:center; align-items:center; transition:background-color .35s ease;
}
.app-container {
  width:100%; max-width:430px; height:100vh; height:100dvh; height:var(--tg-vh, 100dvh); position:relative; overflow:hidden;
  background:var(--app); display:flex; flex-direction:column; transition:background-color .35s ease;
}
.view { position:absolute; inset:0; display:none; flex-direction:column; }
.view.active { display:flex; }

/* ================== TOP BAR (Read) ================== */
.top-bar {
  position:absolute; top:0; left:0; right:0; height:58px; padding-top:var(--tg-safe-top, env(safe-area-inset-top));
  background:var(--topbar); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:space-between; padding-left:16px; padding-right:20px;
  z-index:50; border-bottom:1px solid var(--border);
}
.day-badge {
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; font-weight:700;
  font-size:.85rem; padding:7px 12px 7px 14px; border-radius:20px; letter-spacing:.5px;
  box-shadow:0 4px 12px rgba(108,92,231,.3); border:none; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; gap:6px;
}
.day-badge:active { transform:scale(.95); }
.day-badge .caret { font-size:.7rem; opacity:.9; }
.progress-text { color:var(--muted); font-size:.85rem; font-weight:600; }

.day-banner {
  position:absolute; top:68px; left:50%; transform:translateX(-50%) translateY(-20px);
  background:var(--pink); color:#fff; padding:10px 20px; border-radius:30px; font-size:.9rem; font-weight:700;
  box-shadow:0 10px 25px rgba(253,121,168,.4); z-index:100; opacity:0; pointer-events:none; white-space:nowrap;
  transition:all .4s cubic-bezier(.175,.885,.32,1.275);
}
.day-banner.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ================== REELS ================== */
.reel-viewport { position:absolute; inset:0; overflow:hidden; touch-action:none; }
.card-stage {
  position:absolute; top:calc(64px + var(--tg-safe-top, env(safe-area-inset-top))); left:16px; right:16px;
  bottom:calc(78px + var(--tg-safe-bottom, env(safe-area-inset-bottom)));
}
.card-slot {
  position:absolute; inset:0; perspective:1200px;
  transition:transform .42s cubic-bezier(.22,.61,.36,1), opacity .42s ease; will-change:transform,opacity;
}
.card-slot.no-anim { transition:none !important; }
.card-slot.center { transform:translateY(0); opacity:1; z-index:2; }
.card-slot.below  { transform:translateY(112%) scale(.94); opacity:0; z-index:1; }
.card-slot.above  { transform:translateY(-112%) scale(.94); opacity:0; z-index:1; }
.card { width:100%; height:100%; position:relative; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.2,.2,1); cursor:pointer; }
.card.flipped { transform:rotateY(180deg); }
.card-front, .card-back {
  position:absolute; width:100%; height:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:28px; padding:35px 25px; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; border:1px solid var(--border); box-shadow:var(--shadow);
}
.card-front { background:linear-gradient(145deg,var(--card1),var(--card2)); color:var(--text); }
.word-main {
  font-size:2.6rem; font-weight:800; letter-spacing:.5px;
  background:linear-gradient(45deg,var(--word1),var(--word2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:8px; word-break:break-word; line-height:1.15;
}
.word-phonetic { font-size:1.25rem; color:var(--muted); font-weight:500; }
.front-hint { position:absolute; bottom:22px; right:24px; font-size:.72rem; color:var(--muted); opacity:.7; font-weight:600; }
.audio-btn {
  position:absolute; bottom:22px; left:22px; width:54px; height:54px; background:var(--audio-bg);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-radius:50%; display:flex;
  justify-content:center; align-items:center; border:1px solid var(--audio-border);
  transition:transform .15s ease; z-index:10; cursor:pointer;
}
.audio-btn:active { transform:scale(.88); }
.audio-btn svg { width:26px; height:26px; fill:var(--word1); }
.card-back { background:linear-gradient(145deg,var(--cardback1),var(--cardback2)); color:var(--text); transform:rotateY(180deg); justify-content:space-between; }
.tap-hint { font-size:.75rem; color:var(--accent); text-transform:uppercase; letter-spacing:1px; font-weight:700; }
.back-body { width:100%; }
.word-translation { font-size:1.6rem; font-weight:700; color:var(--pink); margin-top:10px; margin-bottom:20px;
  border-bottom:1px solid var(--border); padding-bottom:12px; width:100%; }
.mnemonics-box { font-size:1.1rem; line-height:1.6; color:var(--text); background:var(--mnem-bg);
  padding:18px; border-radius:18px; border-left:4px solid var(--word1); text-align:left; width:100%; }
.flip-hint { font-size:.72rem; color:var(--muted); font-weight:600; }

/* ================== HOME ================== */
.home-header {
  padding:calc(20px + var(--tg-safe-top, env(safe-area-inset-top))) 20px 14px; border-bottom:1px solid var(--border);
  background:var(--topbar); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.home-header .hi { font-size:1.35rem; font-weight:800; }
.home-header .date { color:var(--muted); font-size:.86rem; font-weight:600; margin-top:2px; }
.home-body { flex:1; overflow-y:auto; padding:16px 16px calc(90px + var(--tg-safe-bottom, env(safe-area-inset-bottom))); }

.section-title { font-size:.82rem; text-transform:uppercase; letter-spacing:.8px; color:var(--muted);
  font-weight:700; margin:18px 4px 10px; display:flex; align-items:center; gap:8px; }
.rule-badge { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;
  font-size:.66rem; padding:3px 8px; border-radius:10px; letter-spacing:.5px; }

.hero-card {
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-radius:24px;
  padding:20px; box-shadow:0 12px 30px -8px rgba(108,92,231,.5); position:relative; overflow:hidden;
}
.hero-card::after { content:""; position:absolute; right:-30px; top:-30px; width:130px; height:130px;
  background:rgba(255,255,255,.12); border-radius:50%; }
.hero-card .lbl { font-size:.78rem; opacity:.85; font-weight:600; letter-spacing:.5px; }
.hero-card .big { font-size:1.5rem; font-weight:800; margin:4px 0 2px; }
.hero-card .sub { font-size:.85rem; opacity:.9; }
.hero-card .go { margin-top:14px; background:#fff; color:var(--accent); border:none; font-weight:800;
  font-size:.95rem; padding:11px 20px; border-radius:14px; cursor:pointer; font-family:inherit; }
.hero-card .go:active { transform:scale(.97); }
.hero-bar { height:6px; background:rgba(255,255,255,.25); border-radius:6px; margin-top:14px; overflow:hidden; position:relative; z-index:1; }
.hero-bar > span { display:block; height:100%; background:#fff; border-radius:6px; }

.task-card {
  display:flex; align-items:center; gap:14px; background:linear-gradient(145deg,var(--card1),var(--card2));
  border:1px solid var(--border); border-radius:18px; padding:14px 16px; margin-bottom:10px; cursor:pointer;
  transition:transform .12s ease;
}
.task-card:active { transform:scale(.98); }
.task-card .badge-num {
  width:46px; height:46px; flex-shrink:0; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.05rem; color:#fff;
}
.task-card.review .badge-num { background:linear-gradient(135deg,var(--amber),#ff7b54); }
.task-card.newl .badge-num { background:linear-gradient(135deg,var(--word1),var(--word2)); }
.task-card .info { flex:1; min-width:0; }
.task-card .info b { font-size:1rem; font-weight:700; display:block; }
.task-card .info span { font-size:.82rem; color:var(--muted); }
.task-card .chev { color:var(--muted); font-size:1.2rem; }
.task-card .over { color:var(--amber); font-weight:700; }

.empty-note { color:var(--muted); font-size:.9rem; text-align:center; padding:18px; line-height:1.5;
  background:var(--surface); border:1px dashed var(--border); border-radius:16px; }

.stat-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:6px; }
.stat-card { background:linear-gradient(145deg,var(--card1),var(--card2)); border:1px solid var(--border);
  border-radius:16px; padding:14px 8px; text-align:center; }
.stat-card .num { font-size:1.5rem; font-weight:800;
  background:linear-gradient(45deg,var(--word1),var(--word2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-card .lbl { font-size:.72rem; color:var(--muted); font-weight:600; margin-top:2px; }

.day-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }
.day-chip {
  aspect-ratio:1; border-radius:14px; border:1px solid var(--border);
  background:linear-gradient(145deg,var(--card1),var(--card2)); color:var(--text);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  cursor:pointer; font-family:inherit; position:relative; transition:transform .12s ease;
}
.day-chip:active { transform:scale(.93); }
.day-chip .dn { font-size:1.05rem; font-weight:800; }
.day-chip .st { font-size:.62rem; color:var(--muted); font-weight:600; }
.day-chip.learned { border-color:var(--green); }
.day-chip.learned .st { color:var(--green); }
.day-chip.due { border-color:var(--amber); box-shadow:0 0 0 1px var(--amber) inset; }
.day-chip.due .st { color:var(--amber); }
.day-chip.current { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-color:transparent; }
.day-chip.current .st { color:rgba(255,255,255,.85); }
.day-chip .dot { position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%; }
.day-chip.due .dot { background:var(--amber); }

/* ================== PERSON ================== */
.settings-header { height:calc(58px + var(--tg-safe-top, env(safe-area-inset-top))); padding-top:var(--tg-safe-top, env(safe-area-inset-top));
  display:flex; align-items:center; padding-left:22px; font-size:1.15rem; font-weight:800;
  border-bottom:1px solid var(--border); background:var(--topbar); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.settings-body { flex:1; overflow-y:auto; padding:20px 18px calc(90px + var(--tg-safe-bottom, env(safe-area-inset-bottom))); }
.profile-card { display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px 16px 22px; text-align:center; }
.avatar { width:88px; height:88px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center;
  font-size:2.1rem; font-weight:800; color:#fff; box-shadow:0 10px 24px -8px rgba(108,92,231,.55); }
.avatar img { width:100%; height:100%; object-fit:cover; }
.pname { font-size:1.2rem; font-weight:800; }
.puser { font-size:.86rem; color:var(--muted); font-weight:600; }
.setting-row { display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(145deg,var(--card1),var(--card2)); border:1px solid var(--border);
  border-radius:18px; padding:16px 18px; margin-bottom:12px; }
.setting-label { display:flex; align-items:center; gap:12px; }
.setting-label .ic { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--mnem-bg); font-size:1.2rem; }
.setting-label .txt b { font-size:.98rem; font-weight:700; display:block; }
.setting-label .txt span { font-size:.8rem; color:var(--muted); }
.switch { position:relative; width:56px; height:32px; flex-shrink:0; cursor:pointer; }
.switch input { display:none; }
.switch .track { position:absolute; inset:0; background:var(--border); border-radius:20px; transition:background .3s ease; border:1px solid var(--border); }
.switch input:checked + .track { background:linear-gradient(135deg,var(--accent),var(--accent2)); }
.switch .thumb { position:absolute; top:3px; left:3px; width:26px; height:26px; background:#fff; border-radius:50%;
  transition:transform .3s cubic-bezier(.4,.2,.2,1); box-shadow:0 2px 6px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.switch input:checked ~ .thumb { transform:translateX(24px); }
.reset-btn { width:100%; background:transparent; border:1px solid var(--border); color:var(--pink);
  font-weight:700; font-size:.9rem; padding:14px; border-radius:16px; cursor:pointer; font-family:inherit; }
.reset-btn:active { background:var(--mnem-bg); }
.settings-section-title { font-size:.78rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:700; margin:8px 6px 10px; }

/* ================== BOTTOM NAV ================== */
.bottom-nav { position:absolute; bottom:0; left:0; right:0; height:calc(66px + var(--tg-safe-bottom, env(safe-area-inset-bottom)));
  padding-bottom:var(--tg-safe-bottom, env(safe-area-inset-bottom)); background:var(--nav); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-top:1px solid var(--border); display:flex; align-items:stretch; z-index:200; }
.nav-item { flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; color:var(--nav-inactive); cursor:pointer; position:relative; transition:color .2s ease; font-family:inherit; }
.nav-item svg { width:25px; height:25px; fill:currentColor; transition:transform .2s ease; }
.nav-item span { font-size:.68rem; font-weight:700; letter-spacing:.3px; }
.nav-item.active { color:var(--accent2); }
.nav-item.active svg { transform:translateY(-1px) scale(1.08); }
.nav-item.active::before { content:""; position:absolute; top:0; width:26px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.nav-item:active svg { transform:scale(.9); }
.nav-badge { position:absolute; top:8px; right:calc(50% - 22px); min-width:16px; height:16px; padding:0 4px;
  background:var(--amber); color:#000; font-size:.62rem; font-weight:800; border-radius:8px; display:none;
  align-items:center; justify-content:center; }
.nav-badge.show { display:flex; }

/* ================== MODAL ================== */
.modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,.55); z-index:300; display:none;
  align-items:flex-end; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.modal-overlay.show { display:flex; }
.modal { width:100%; background:var(--app); border-radius:24px 24px 0 0; border-top:1px solid var(--border);
  padding:18px 16px calc(24px + var(--tg-safe-bottom, env(safe-area-inset-bottom))); max-height:80%; overflow-y:auto;
  animation:slideUp .28s cubic-bezier(.22,.61,.36,1); }
@keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modal-head b { font-size:1.1rem; font-weight:800; }
.modal-head button { background:var(--mnem-bg); border:none; color:var(--text); width:34px; height:34px;
  border-radius:12px; font-size:1rem; cursor:pointer; }
.legend { display:flex; gap:14px; justify-content:center; margin-top:14px; font-size:.72rem; color:var(--muted); }
.legend i { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:4px; vertical-align:middle; }

/* ================== CONFIRM MODAL ================== */
.confirm-modal { text-align:center; padding-top:30px; }
.confirm-icon { font-size:2.4rem; margin-bottom:10px; }
.confirm-title { font-size:1.15rem; font-weight:800; margin-bottom:10px; }
.confirm-text { font-size:.9rem; color:var(--muted); line-height:1.55; margin-bottom:22px; }
.confirm-actions { display:flex; gap:10px; }
.confirm-btn { flex:1; padding:14px; border-radius:16px; border:none; font-weight:700; font-size:.92rem; font-family:inherit; cursor:pointer; }
.confirm-btn.cancel { background:var(--surface); color:var(--text); border:1px solid var(--border); }
.confirm-btn.danger { background:linear-gradient(135deg,var(--pink),#e84393); color:#fff; }
.confirm-btn:active { transform:scale(.96); }

/* ================== RESET SUCCESS ANIMATION ================== */
.reset-success { position:absolute; inset:0; z-index:400; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:rgba(5,5,8,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .25s ease; }
.reset-success.show { opacity:1; pointer-events:auto; }
.reset-success-circle svg { width:96px; height:96px; overflow:visible; }
.rs-circle { stroke:var(--green); stroke-width:3; stroke-dasharray:151; stroke-dashoffset:151; transform-origin:26px 26px; transform:rotate(-90deg); }
.reset-success.show .rs-circle { animation:rsCircle .5s ease-out forwards; }
.rs-check { stroke:var(--green); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:36; stroke-dashoffset:36; }
.reset-success.show .rs-check { animation:rsCheck .35s ease-out .45s forwards; }
.reset-success-text { color:#fff; font-weight:800; font-size:1.05rem; opacity:0; }
.reset-success.show .reset-success-text { animation:rsText .3s ease-out .55s forwards; }
@keyframes rsCircle { to { stroke-dashoffset:0; } }
@keyframes rsCheck { to { stroke-dashoffset:0; } }
@keyframes rsText { to { opacity:1; } }

/* ================== TOAST ================== */
.toast { position:absolute; bottom:calc(84px + var(--tg-safe-bottom, env(safe-area-inset-bottom))); left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--green); color:#fff; padding:10px 18px; border-radius:24px; font-size:.86rem; font-weight:700;
  z-index:250; opacity:0; pointer-events:none; transition:all .35s cubic-bezier(.175,.885,.32,1.275); white-space:nowrap;
  box-shadow:0 10px 25px rgba(0,0,0,.3); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ================== REVIEW SESSION (mashqlar) ================== */
.review-overlay { position:absolute; inset:0; z-index:500; display:none; background:var(--app); }
.review-overlay.show { display:block; }
.review-screen { position:absolute; inset:0; display:none; flex-direction:column;
  padding:calc(20px + var(--tg-safe-top, env(safe-area-inset-top))) 20px calc(20px + var(--tg-safe-bottom, env(safe-area-inset-bottom))); }
.review-screen.active { display:flex; }
.review-close { position:absolute; top:calc(16px + var(--tg-safe-top, env(safe-area-inset-top))); right:16px;
  width:36px; height:36px; border-radius:12px; border:none; background:var(--surface); color:var(--text);
  font-size:1rem; cursor:pointer; z-index:5; }

#reviewScreen-intro { align-items:center; justify-content:center; text-align:center; gap:6px; }
.review-intro-icon { font-size:3rem; margin-bottom:6px; }
.review-intro-title { font-size:1.35rem; font-weight:800; }
.review-intro-sub { color:var(--muted); font-size:.92rem; font-weight:600; margin-bottom:10px; }
.review-intro-hint { color:var(--muted); font-size:.85rem; line-height:1.5; max-width:300px; margin-bottom:22px; }
.review-start-btn { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border:none;
  font-weight:800; font-size:1rem; padding:15px 34px; border-radius:16px; cursor:pointer; font-family:inherit;
  box-shadow:0 10px 24px -8px rgba(108,92,231,.5); }
.review-start-btn:active { transform:scale(.97); }

.review-quiz-header { display:flex; align-items:center; gap:12px; margin-bottom:24px; padding-right:44px; }
.review-progress-track { flex:1; height:8px; background:var(--surface); border-radius:8px; overflow:hidden; }
.review-progress-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:8px; transition:width .3s ease; }
.review-progress-text { font-size:.8rem; color:var(--muted); font-weight:700; white-space:nowrap; }
.review-area { flex:1; display:flex; flex-direction:column; overflow-y:auto; }

.quiz-word-card { background:linear-gradient(145deg,var(--card1),var(--card2)); border:1px solid var(--border);
  border-radius:22px; padding:30px 20px; text-align:center; margin-bottom:22px; }
.quiz-word { font-size:2.2rem; font-weight:800; background:linear-gradient(45deg,var(--word1),var(--word2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.quiz-phonetic { color:var(--muted); font-size:1.05rem; margin-top:6px; }
.quiz-options { display:flex; flex-direction:column; gap:10px; }
.quiz-option { background:linear-gradient(145deg,var(--card1),var(--card2)); border:1px solid var(--border);
  color:var(--text); font-size:.98rem; font-weight:600; padding:15px 16px; border-radius:16px; text-align:left;
  cursor:pointer; font-family:inherit; transition:transform .1s ease; }
.quiz-option:active { transform:scale(.98); }
.quiz-option.correct { background:var(--green); border-color:var(--green); color:#fff; }
.quiz-option.wrong { background:var(--pink); border-color:var(--pink); color:#fff; }

.match-hint { color:var(--muted); font-size:.85rem; font-weight:600; text-align:center; margin-bottom:16px; }
.match-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; flex:1; }
.match-col { display:flex; flex-direction:column; gap:10px; }
.match-item { background:linear-gradient(145deg,var(--card1),var(--card2)); border:1px solid var(--border);
  color:var(--text); font-size:.88rem; font-weight:700; padding:14px 10px; border-radius:14px; cursor:pointer;
  font-family:inherit; text-align:center; transition:transform .1s ease; word-break:break-word; }
.match-item:active { transform:scale(.96); }
.match-item.selected { border-color:var(--accent2); box-shadow:0 0 0 2px var(--accent2) inset; }
.match-item.matched { background:var(--green); border-color:var(--green); color:#fff; opacity:.65; cursor:default; }
.match-item.shake { animation:matchShake .4s ease; border-color:var(--pink); }
@keyframes matchShake { 10%,90% { transform:translateX(-2px); } 20%,80% { transform:translateX(4px); } 30%,50%,70% { transform:translateX(-8px); } 40%,60% { transform:translateX(8px); } }

#reviewScreen-result { align-items:center; justify-content:center; text-align:center; gap:6px; }
.review-result-icon { font-size:3rem; margin-bottom:6px; }
.review-result-title { font-size:1.3rem; font-weight:800; margin-bottom:20px; }
.result-stats { display:flex; gap:14px; margin-bottom:28px; }
.result-stat { background:linear-gradient(145deg,var(--card1),var(--card2)); border:1px solid var(--border);
  border-radius:18px; padding:18px 26px; min-width:110px; }
.result-stat .rn { font-size:1.8rem; font-weight:800; }
.result-stat .rl { font-size:.78rem; color:var(--muted); font-weight:600; margin-top:2px; }
.result-stat.correct .rn { color:var(--green); }
.result-stat.wrong .rn { color:var(--pink); }

@media (prefers-reduced-motion:reduce) {
  .card-slot,.card,.day-banner,.switch .thumb,.modal { transition-duration:.001s !important; animation-duration:.001s !important; }
}