/* ══════════════════════════════════════════
   THEME TOKENS
══════════════════════════════════════════ */
:root {
  --transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}

/* AUTO — systémové preferované téma (přebito data-theme pokud uživatel vybral ručně) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#f4f5f8;--bg2:#eaecf2;--surface:#ffffff;--border:#d8dce8;--border2:#bcc2d8;
    --ink:#1a1d2e;--ink2:#4a5070;--ink3:#8890b0;
    --primary:#4f5fd5;--primary-text:#ffffff;--primary-dim:#eef0ff;--primary-border:#8890e0;
    --ok:#1a8a50;--ok-bg:#e8f8ef;--ok-border:#5ac888;
    --err:#c03030;--err-bg:#fce8e8;--err-border:#e08080;
    --blue:#2070c0;--blue-bg:#e8f0fc;--blue-border:#80b0e8;
    --shadow:0 2px 12px rgba(0,0,0,.10);--shadow-lg:0 8px 36px rgba(0,0,0,.15);
    --login-bg-from:#e8ecf8;--login-bg-to:#f4f5f8;
  }
}

/* DARK */
[data-theme="dark"] {
  --bg:       #111318;
  --bg2:      #181c26;
  --surface:  #1e2232;
  --border:   #2d3348;
  --border2:  #3d4560;
  --ink:      #e8eaf4;
  --ink2:     #9098b8;
  --ink3:     #5a6280;
  --primary:      #6c7dff;
  --primary-text: #ffffff;
  --primary-dim:  #12143a;
  --primary-border:#3a3d8a;
  --ok:       #34c47a;
  --ok-bg:    #091a12;
  --ok-border:#1a5435;
  --err:      #e05555;
  --err-bg:   #1a0808;
  --err-border:#6a2020;
  --warn:     #e8a820;
  --warn-bg:  #1a1200;
  --warn-border:#7a5800;
  --blue:     #5aabf0;
  --blue-bg:  #071524;
  --blue-border:#1a3d5a;
  --shadow:   0 2px 12px rgba(0,0,0,.45);
  --shadow-lg:0 8px 36px rgba(0,0,0,.6);
}

/* LIGHT */
  --login-bg-from:#0a0d18;
  --login-bg-to:  #111318;
}/* LIGHT */
[data-theme="light"] {
  --bg:       #f4f5f8;
  --bg2:      #eaecf2;
  --surface:  #ffffff;
  --border:   #d8dce8;
  --border2:  #bcc2d8;
  --ink:      #1a1d2e;
  --ink2:     #4a5070;
  --ink3:     #8890b0;
  --primary:      #4f5fd5;
  --primary-text: #ffffff;
  --primary-dim:  #eef0ff;
  --primary-border:#8890e0;
  --ok:       #1a8a50;
  --ok-bg:    #e8f8ef;
  --ok-border:#5ac888;
  --err:      #c03030;
  --err-bg:   #fce8e8;
  --err-border:#e08080;
  --warn:     #9a6800;
  --warn-bg:  #fef8e0;
  --warn-border:#d4a020;
  --blue:     #2070c0;
  --blue-bg:  #e8f0fc;
  --blue-border:#80b0e8;
  --shadow:   0 2px 12px rgba(0,0,0,.10);
  --shadow-lg:0 8px 36px rgba(0,0,0,.15);
  --login-bg-from:#e8ecf8;
  --login-bg-to:  #f4f5f8;
}

/* ══════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{transition:var(--transition);}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Lexend',sans-serif;min-height:100vh;
  font-size:15px;-webkit-font-smoothing:antialiased;
  transition:var(--transition);
}

/* ══════════════════════════════════════════
   VIEWS
══════════════════════════════════════════ */
.view{display:none !important;}
#loginView.active{display:flex !important;}
#appView.active{display:block !important;}
#loginView.active{
  display:flex !important;align-items:center;justify-content:center;
  min-height:100vh;padding:20px;
  background:linear-gradient(135deg, var(--login-bg-from,#0a0d18) 0%, var(--login-bg-to,#111318) 100%);
  transition:background .3s;
}
#appView.active{display:block;}

/* ══════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════ */
.login-card{
  background:var(--surface);border:1.5px solid var(--border2);
  border-radius:20px;padding:36px 32px;width:100%;max-width:400px;
  box-shadow:var(--shadow-lg);
  transition:var(--transition);
}
.login-logo{
  font-family:'Lexend Deca',sans-serif;font-size:1.7rem;font-weight:800;
  text-align:center;margin-bottom:4px;
}
.login-logo em{color:var(--primary);font-style:italic;}
.login-tagline{text-align:center;font-size:.8rem;color:var(--ink3);margin-bottom:28px;}
.login-tabs{
  display:flex;background:var(--bg2);border-radius:12px;
  padding:4px;gap:4px;margin-bottom:24px;border:1px solid var(--border);
}
.login-tab{
  flex:1;padding:9px;border-radius:9px;border:none;background:transparent;
  font-family:'Lexend',sans-serif;font-size:.82rem;font-weight:500;
  color:var(--ink2);cursor:pointer;transition:all .18s;
}
.login-tab.active{
  background:var(--surface);color:var(--ink);
  border:1px solid var(--border2);font-weight:600;
  box-shadow:var(--shadow);
}
.login-tab:hover:not(.active){color:var(--ink);}
.form-group{margin-bottom:14px;}
.form-label{
  display:block;font-size:.72rem;font-weight:600;
  color:var(--ink2);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;
}
.form-input{
  width:100%;background:var(--bg2);border:1.5px solid var(--border);
  border-radius:10px;padding:12px 14px;color:var(--ink);
  font-family:'Lexend',sans-serif;font-size:.9rem;outline:none;
  transition:border-color .18s;
}
.form-input:focus{border-color:var(--primary);}
.form-input::placeholder{color:var(--ink3);}
.btn-submit{
  width:100%;padding:13px;border-radius:11px;border:none;
  background:var(--primary);color:var(--primary-text);
  font-family:'Lexend',sans-serif;font-size:.9rem;font-weight:700;
  cursor:pointer;transition:all .18s;margin-top:4px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-submit:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:var(--shadow-lg);}
.btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.login-or{
  display:flex;align-items:center;gap:10px;
  margin:16px 0;font-size:.75rem;color:var(--ink3);
}
.login-or::before,.login-or::after{content:'';flex:1;height:1px;background:var(--border);}

.login-msg{
  padding:10px 14px;border-radius:9px;font-size:.82rem;
  font-weight:500;margin-bottom:14px;display:none;
}
.login-msg.err{background:var(--err-bg);border:1.5px solid var(--err-border);color:var(--err);display:block;}
.login-msg.ok{background:var(--ok-bg);border:1.5px solid var(--ok-border);color:var(--ok);display:block;}
.login-divider{
  display:flex;align-items:center;gap:10px;margin:16px 0 12px;
  color:var(--ink3);font-size:.78rem;
}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--border);}
.btn-guest{
  width:100%;padding:11px;border-radius:10px;border:1.5px dashed var(--border2);
  background:transparent;color:var(--ink2);font-size:.88rem;font-family:inherit;
  cursor:pointer;transition:border-color .2s,color .2s,background .2s;
}
.btn-guest:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-dim);}
.login-features{
  display:flex;flex-direction:column;gap:7px;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--border);
}
.login-feat{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--ink3);}
.spinner{
  width:16px;height:16px;border:2px solid rgba(0,0,0,.2);
  border-top-color:var(--primary-text);border-radius:50%;
  animation:spin .7s linear infinite;display:none;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════
   APP LAYOUT
══════════════════════════════════════════ */
#app-wrap{max-width:680px;margin:0 auto;padding:16px;}

/* ── TOPBAR ── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0 18px;
}
.app-logo{
  font-family:'Lexend Deca',sans-serif;font-size:1.3rem;
  font-weight:800;letter-spacing:-.3px;
}
.app-logo em{color:var(--primary);font-style:italic;}
.topbar-right{display:flex;align-items:center;gap:8px;}
.streak-pill{
  background:var(--primary-dim);border:1px solid var(--primary-border);
  border-radius:50px;padding:5px 12px;
  font-size:.75rem;color:var(--primary);font-weight:600;
  display:flex;align-items:center;gap:5px;
}

/* ── USER MENU ── */
.user-btn{
  width:34px;height:34px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--border2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:.85rem;position:relative;transition:border-color .18s;
}
.user-btn:hover{border-color:var(--primary);}
.user-menu{
  position:absolute;top:42px;right:0;
  background:var(--surface);border:1.5px solid var(--border2);
  border-radius:14px;padding:6px;min-width:210px;
  box-shadow:var(--shadow-lg);display:none;z-index:200;
}
.user-menu.open{display:block;}
.user-info{padding:10px 12px 10px;border-bottom:1px solid var(--border);}
.user-name{font-size:.85rem;font-weight:600;color:var(--ink);}
.user-email{font-size:.72rem;color:var(--ink3);margin-top:2px;}
.menu-item{
  display:flex;align-items:center;gap:9px;padding:9px 12px;
  border-radius:9px;cursor:pointer;font-size:.82rem;color:var(--ink2);
  transition:all .15s;margin-top:2px;border:none;background:transparent;
  width:100%;text-align:left;font-family:'Lexend',sans-serif;
}
.menu-item:hover{background:var(--bg2);color:var(--ink);}
.menu-item.danger{color:var(--err);}
.menu-item.danger:hover{background:var(--err-bg);}

/* ── SYNC ── */
.sync-bar{
  font-size:.68rem;color:var(--ink3);
  display:flex;align-items:center;justify-content:flex-end;
  margin-bottom:8px;gap:5px;
}
.sync-dot{
  width:6px;height:6px;border-radius:50%;background:var(--ok);
  display:inline-block;flex-shrink:0;
}
.sync-dot.syncing{background:var(--primary);animation:pulse 1s infinite;}
.sync-dot.error{background:var(--err);}
.sync-dot.guest{background:var(--ink3);}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── STATS ── */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;}
.stat-box{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:14px;padding:14px 10px;text-align:center;
  box-shadow:var(--shadow);
}
.stat-num{
  font-family:'Lexend Deca',sans-serif;font-size:1.7rem;font-weight:800;
  line-height:1;margin-bottom:4px;
}
.stat-lbl{font-size:.67rem;color:var(--ink3);text-transform:uppercase;letter-spacing:1px;}

/* ── PROGRESS ── */
.prog-wrap{margin-bottom:18px;}
.prog-meta{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:7px;font-size:.78rem;
}
.prog-meta span{color:var(--ink3);}
.prog-meta b{color:var(--ok);font-family:'Lexend Deca',sans-serif;}
.prog-track{
  height:7px;background:var(--bg2);border-radius:99px;
  overflow:hidden;border:1px solid var(--border);
}
.prog-fill{
  height:100%;background:linear-gradient(90deg,var(--primary),#2ec4a0);
  border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1);
}

/* ── QUICK BUTTONS ── */
.quick-row{display:flex;gap:8px;margin-bottom:22px;}
.q-btn{
  flex:1;padding:12px 6px;border-radius:12px;
  border:1.5px solid var(--border2);background:var(--surface);
  font-family:'Lexend',sans-serif;font-size:.78rem;font-weight:500;
  color:var(--ink);cursor:pointer;transition:all .18s;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  box-shadow:var(--shadow);
}
.q-btn:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow-lg);}
.q-btn-ico{font-size:1.2rem;}
.q-btn.primary{
  background:var(--primary);border-color:var(--primary);
  color:var(--primary-text);flex:2;font-weight:700;
}
.q-btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px);}

/* ── SECTION LIST ── */
.sec-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.sec-title{font-size:.7rem;text-transform:uppercase;letter-spacing:2px;color:var(--ink3);}
.sec-list{display:flex;flex-direction:column;gap:7px;}
.sec-row{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:13px;padding:12px 14px;
  display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:all .18s;box-shadow:var(--shadow);
}
.sec-row:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow-lg);}
.sec-dot{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Lexend Deca',sans-serif;font-weight:800;font-size:.8rem;color:#fff;
}
.sec-info{flex:1;min-width:0;}
.sec-name{
  font-size:.83rem;font-weight:600;color:var(--ink);
  margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sec-bar{height:4px;background:var(--bg2);border-radius:99px;overflow:hidden;}
.sec-bar-fill{height:100%;border-radius:99px;transition:width .5s;}
.sec-ct{font-size:.73rem;color:var(--ink3);flex-shrink:0;font-variant-numeric:tabular-nums;}

/* ══════════════════════════════════════════
   SCREENS
══════════════════════════════════════════ */
.screen{display:none;}
.screen.active{display:block;animation:fadeUp .22s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── LEARN TOPBAR ── */
.learn-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.back-btn{
  width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--border2);background:var(--surface);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;line-height:1;flex-shrink:0;transition:all .18s;color:var(--ink);
  padding:0;padding-bottom:1px;
}
.back-btn:hover{border-color:var(--primary);color:var(--primary);}
.sess-track{
  flex:1;height:6px;background:var(--bg2);border-radius:99px;
  overflow:hidden;border:1px solid var(--border);
}
.sess-fill{height:100%;background:var(--primary);border-radius:99px;transition:width .4s;}
.sess-ct{font-size:.73rem;color:var(--ink3);flex-shrink:0;font-variant-numeric:tabular-nums;}

/* ── MODE TABS ── */
.mode-tabs{
  display:flex;background:var(--bg2);border-radius:12px;
  padding:4px;gap:4px;margin-bottom:18px;border:1px solid var(--border);
}
.mode-tab{
  flex:1;text-align:center;padding:8px 4px;border-radius:9px;
  font-size:.73rem;font-family:'Lexend',sans-serif;font-weight:500;
  cursor:pointer;transition:all .18s;color:var(--ink2);
  border:1px solid transparent;background:transparent;
}
.mode-tab span{display:block;font-size:.95rem;margin-bottom:2px;}
.mode-tab.active{
  background:var(--surface);color:var(--ink);font-weight:600;
  border-color:var(--border2);box-shadow:var(--shadow);
}
.mode-tab:hover:not(.active){color:var(--ink);}

/* ── SESSION INFO BADGE ── */
.sess-info{
  background:var(--primary-dim);border:1px solid var(--primary-border);
  border-radius:9px;padding:8px 14px;margin-bottom:14px;
  font-size:.78rem;color:var(--primary);display:flex;align-items:center;gap:7px;
}

/* ── FLASHCARD ── */
.card-wrap{
  perspective:1200px;height:290px;margin-bottom:14px;
  cursor:pointer;user-select:none;
}
.card-inner{
  width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .48s cubic-bezier(.4,0,.2,1);position:relative;
}
.card-inner.flipped{transform:rotateY(180deg);}
.card-face{
  position:absolute;inset:0;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:18px;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px;overflow:hidden;box-shadow:var(--shadow-lg);
}
.card-back{transform:rotateY(180deg);}
.card-face::after{
  content:'';position:absolute;top:-50px;right:-50px;
  width:160px;height:160px;border-radius:50%;
  background:var(--c,var(--primary));opacity:.07;pointer-events:none;
}
.card-tag{
  position:absolute;top:12px;right:12px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:50px;padding:3px 9px;
  font-size:.65rem;color:var(--ink3);text-transform:uppercase;letter-spacing:1px;
}
.card-hint{
  position:absolute;bottom:12px;
  font-size:.68rem;color:var(--ink3);
}
.card-lang{
  font-size:.63rem;text-transform:uppercase;letter-spacing:2.5px;
  color:var(--ink3);margin-bottom:12px;
}
.card-word{
  font-family:'Lexend Deca',sans-serif;font-size:2rem;font-weight:800;
  text-align:center;line-height:1.2;margin-bottom:9px;
}
.card-pron{font-size:.82rem;color:var(--ink2);font-style:italic;}

/* ── CARD ACTIONS ── */
.card-acts{display:flex;gap:10px;margin-bottom:14px;}
.act-btn{
  flex:1;padding:12px;border-radius:11px;border:1.5px solid;
  font-family:'Lexend',sans-serif;font-size:.85rem;font-weight:600;
  cursor:pointer;transition:all .18s;display:flex;align-items:center;
  justify-content:center;gap:6px;
}
.act-ok{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok);}
.act-ok:hover{filter:brightness(1.15);transform:translateY(-1px);}
.act-no{background:var(--err-bg);border-color:var(--err-border);color:var(--err);}
.act-no:hover{filter:brightness(1.15);transform:translateY(-1px);}
.nav-row{display:flex;gap:8px;align-items:center;justify-content:center;margin-bottom:14px;}
.nav-btn{
  width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border2);
  background:var(--surface);cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:1.4rem;line-height:1;
  transition:all .18s;color:var(--ink);padding:0;padding-bottom:1px;
}
.nav-btn:hover{border-color:var(--primary);color:var(--primary);}
.nav-ct{font-size:.75rem;color:var(--ink3);min-width:60px;text-align:center;}

/* ── EXAMPLE ── */
.ex-box{
  background:var(--blue-bg);border:1.5px solid var(--blue-border);
  border-radius:11px;padding:12px 14px;margin-bottom:14px;display:none;
}
.ex-box.show{display:block;}
.ex-lbl{font-size:.63rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--blue);margin-bottom:6px;font-weight:600;}
.ex-en{font-size:.87rem;color:var(--ink);margin-bottom:3px;line-height:1.5;}
.ex-en b{color:var(--primary);}
.ex-cz{font-size:.77rem;color:var(--ink2);font-style:italic;}

/* ── QUIZ ── */
.quiz-q{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:18px;padding:32px 24px;text-align:center;
  margin-bottom:14px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.quiz-q::after{
  content:'';position:absolute;top:-60px;right:-60px;
  width:180px;height:180px;border-radius:50%;
  background:var(--c,var(--primary));opacity:.06;pointer-events:none;
}
.quiz-lbl{font-size:.63rem;text-transform:uppercase;letter-spacing:2px;color:var(--ink3);margin-bottom:10px;}
.quiz-word{font-family:'Lexend Deca',sans-serif;font-size:1.8rem;font-weight:800;color:var(--ink);line-height:1.2;}
.quiz-pron{font-size:.78rem;color:var(--ink2);font-style:italic;margin-top:7px;}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.quiz-opt{
  background:var(--surface);border:1.5px solid var(--border2);
  border-radius:11px;padding:13px 8px;text-align:center;
  cursor:pointer;transition:all .18s;font-size:.83rem;
  font-family:'Lexend',sans-serif;color:var(--ink);
  font-weight:500;
}
.quiz-opt:hover:not(.disabled){border-color:var(--primary);color:var(--primary);transform:translateY(-1px);}
.quiz-opt.correct{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok);}
.quiz-opt.wrong{background:var(--err-bg);border-color:var(--err-border);color:var(--err);}
.quiz-opt.disabled{cursor:default;}

/* ── WRITE ── */
.write-q{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:18px;padding:32px 24px;text-align:center;
  margin-bottom:12px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.write-q::after{
  content:'';position:absolute;top:-60px;left:-60px;
  width:180px;height:180px;border-radius:50%;
  background:var(--primary);opacity:.05;pointer-events:none;
}
.write-lbl{font-size:.63rem;text-transform:uppercase;letter-spacing:2px;color:var(--ink3);margin-bottom:10px;}
.write-sub{font-size:.73rem;color:var(--ink3);margin-top:7px;}
.write-input{
  width:100%;background:var(--surface);border:1.5px solid var(--border2);
  border-radius:11px;padding:13px 15px;color:var(--ink);
  font-family:'Lexend',sans-serif;font-size:.95rem;
  outline:none;transition:all .18s;margin-bottom:9px;
}
.write-input:focus{border-color:var(--primary);}
.write-input::placeholder{color:var(--ink3);}
.write-input.ok{border-color:var(--ok-border);background:var(--ok-bg);}
.write-input.err{border-color:var(--err-border);background:var(--err-bg);}
.write-input.warn{border-color:var(--warn-border);background:var(--warn-bg);}
.write-fb{
  padding:10px 13px;border-radius:9px;font-size:.82rem;
  font-weight:500;margin-bottom:12px;display:none;
}
.write-fb.ok{background:var(--ok-bg);border:1.5px solid var(--ok-border);color:var(--ok);display:block;}
.write-fb.err{background:var(--err-bg);border:1.5px solid var(--err-border);color:var(--err);display:block;}
.write-fb.warn{background:var(--warn-bg);border:1.5px solid var(--warn-border);color:var(--warn);display:block;}

/* ── BUTTONS ── */
.btn{
  padding:12px 18px;border-radius:11px;border:1.5px solid;
  font-family:'Lexend',sans-serif;font-size:.87rem;font-weight:600;
  cursor:pointer;transition:all .18s;display:inline-flex;
  align-items:center;justify-content:center;gap:6px;
}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-text);}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn-ghost{background:var(--surface);border-color:var(--border2);color:var(--ink);}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);}
.btn-full{width:100%;}
.btn-row{display:flex;gap:8px;}

/* ── TOAST ── */
.toast{
  position:fixed;bottom:20px;left:50%;
  transform:translateX(-50%) translateY(80px);
  background:var(--surface);color:var(--ink);
  border:1.5px solid var(--border2);border-radius:50px;
  padding:9px 20px;font-size:.8rem;font-weight:500;
  transition:transform .26s cubic-bezier(.4,0,.2,1);
  z-index:9000;white-space:nowrap;box-shadow:var(--shadow-lg);
}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-border);}
.toast.err{background:var(--err-bg);color:var(--err);border-color:var(--err-border);}
.toast.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-border);}

/* ── WORD LIST SCREEN ── */
.wl-header{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;
}
.wl-title{
  font-family:'Lexend Deca',sans-serif;font-size:1rem;font-weight:800;
  color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wl-filters{
  display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;
}
.wl-filter{
  padding:5px 12px;border-radius:50px;border:1.5px solid var(--border2);
  background:var(--surface);font-family:'Lexend',sans-serif;font-size:.73rem;
  font-weight:500;color:var(--ink2);cursor:pointer;transition:all .15s;
}
.wl-filter.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.wl-filter:hover:not(.active){border-color:var(--primary);color:var(--primary);}
.wl-stats{
  display:flex;gap:10px;margin-bottom:14px;
}
.wl-stat{
  flex:1;background:var(--surface);border:1.5px solid var(--border);
  border-radius:11px;padding:10px;text-align:center;
}
.wl-stat-num{
  font-family:'Lexend Deca',sans-serif;font-size:1.3rem;font-weight:800;line-height:1;
}
.wl-stat-lbl{font-size:.65rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.8px;margin-top:3px;}
.wl-list{display:flex;flex-direction:column;gap:6px;margin-bottom:80px;}
.wl-item{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:11px;padding:11px 14px;
  display:flex;align-items:center;gap:12px;
  transition:border-color .15s;
}
.wl-item.known{border-color:var(--ok-border);}
.wl-item.unknown{border-color:var(--border);}
.wl-status{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;
}
.wl-status.ok{background:var(--ok-bg);color:var(--ok);}
.wl-status.no{background:var(--bg2);color:var(--ink3);border:1.5px solid var(--border2);}
.wl-words{flex:1;min-width:0;}
.wl-en{font-size:.88rem;font-weight:600;color:var(--ink);margin-bottom:2px;}
.wl-cz{font-size:.78rem;color:var(--ink2);}
.wl-pron{font-size:.7rem;color:var(--ink3);font-style:italic;margin-top:1px;}
.wl-toggle{
  width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border2);
  background:transparent;cursor:pointer;font-size:.75rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;color:var(--ink3);
}
.wl-toggle:hover{border-color:var(--primary);color:var(--primary);}
.wl-bottom-bar{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--surface);border-top:1.5px solid var(--border);
  padding:12px 16px;display:flex;gap:8px;z-index:100;
  box-shadow:0 -4px 20px rgba(0,0,0,.2);
}
@media(min-width:700px){
  .wl-bottom-bar{left:50%;right:auto;transform:translateX(-50%);width:680px;border-radius:16px 16px 0 0;}
}

/* ── CATEGORY SWITCHER ── */
.cat-btn{
  flex:1;padding:9px 12px;border-radius:10px;
  border:1.5px solid var(--border2);background:var(--surface);
  font-family:'Lexend',sans-serif;font-size:.82rem;font-weight:600;
  color:var(--ink2);cursor:pointer;transition:all .18s;
}
.cat-btn.active{
  background:var(--primary);border-color:var(--primary);
  color:#fff;
}
.cat-btn:hover:not(.active){border-color:var(--primary);color:var(--primary);}

/* ── REVIEW SECTION ── */
.review-card{
  background:var(--surface);border:1.5px solid var(--err-border);
  border-radius:14px;padding:16px 18px;margin-bottom:22px;
  display:flex;align-items:center;gap:14px;cursor:pointer;
  transition:all .18s;box-shadow:var(--shadow);
}
.review-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);border-color:var(--err);}
.review-ico{
  width:42px;height:42px;border-radius:50%;background:var(--err-bg);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;
}
.review-info{flex:1;}
.review-title{font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:3px;}
.review-sub{font-size:.76rem;color:var(--ink2);}
.review-ct{
  font-family:'Lexend Deca',sans-serif;font-size:1.3rem;font-weight:800;
  color:var(--err);flex-shrink:0;
}

/* ── FINISH SCREEN ── */
.finish-screen{
  text-align:center;padding:32px 20px;
}
.finish-emoji{font-size:3.5rem;margin-bottom:16px;display:block;}
.finish-title{
  font-family:'Lexend Deca',sans-serif;font-size:1.5rem;font-weight:800;
  color:var(--ink);margin-bottom:8px;
}
.finish-sub{font-size:.88rem;color:var(--ink2);margin-bottom:28px;line-height:1.6;}
.finish-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-bottom:28px;
}
.finish-stat{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:13px;padding:14px 10px;
}
.finish-stat-num{
  font-family:'Lexend Deca',sans-serif;font-size:1.8rem;font-weight:800;
  line-height:1;margin-bottom:4px;
}
.finish-stat-lbl{font-size:.68rem;color:var(--ink3);text-transform:uppercase;letter-spacing:1px;}
.finish-btns{display:flex;flex-direction:column;gap:10px;}

/* ── LOADING ── */
#loadScreen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:60vh;gap:16px;
}
.load-spinner{
  width:30px;height:30px;border:3px solid var(--border2);
  border-top-color:var(--primary);border-radius:50%;
  animation:spin .8s linear infinite;
}

/* ── RESPONSIVE ── */
@media(max-width:480px){
  .card-word{font-size:1.6rem;}
  .quiz-word,.write-q .card-word{font-size:1.4rem;}
  .quiz-opts{grid-template-columns:1fr;}
  .card-wrap{height:260px;}
  .stats-row .stat-num{font-size:1.4rem;}
  #app-wrap{padding:12px;}
}

/* ── FOOTER ── */
.app-footer{
  background:var(--bg2);border-top:1px solid var(--border);
  padding:16px 0;text-align:center;
  margin-top:32px;
}
.footer-content{
  padding:0 20px;
}