/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  --bg:#F4FAFA; --bg2:#E8F5F5; --white:#FFFFFF;
  --ink:#0C2020; --ink2:#183030; --mid:#5A8080; --light:#A8CECE;
  --border:#C8E8E8; --border2:#DCF0F0;
  --turq:#0AA8A8; --turq2:#14C8C8; --turq3:#08D0D0;
  --turq-soft:#D0F5F5; --turq-mid:#8EEAEA; --turq-dark:#087878;
  --yell:#E8C008; --yell2:#F8D820; --yell-soft:#FFFCE4;
  --yell-mid:#FFF0A0; --yell-deep:#A08004;
  --coral:#E05838; --coral2:#F87050;
  --coral-soft:#FFF0EC; --coral-mid:#FFD0C4;
  --navy:#0C3878; --navy-soft:#EEF2FF; --navy-mid:#C8D8F8;
  --lime:#58A820; --lime-soft:#F0FAE8; --lime-mid:#CCF0A0;
  --s1:0 2px 8px rgba(12,32,32,.08); --s2:0 4px 18px rgba(12,32,32,.12);
}
/* ── DARK MODE ── */
body.dark {
  --bg:#0E1A1A; --bg2:#162222; --white:#1C2A2A;
  --ink:#E8F5F5; --ink2:#C0E0E0; --mid:#7AACAC; --light:#4A7878;
  --border:#2A4040; --border2:#1E3030;
  --turq-soft:#0E2828; --turq-mid:#1A4040;
  --yell-soft:#1C1800; --yell-mid:#2A2200; --yell-deep:#C8A800;
  --coral-soft:#1C0C08; --coral-mid:#2A1410;
  --navy-soft:#080E1C; --navy-mid:#0C1830;
  --lime-soft:#0A1400; --lime-mid:#142000;
  --s1:0 2px 8px rgba(0,0,0,.35); --s2:0 4px 18px rgba(0,0,0,.5);
}

/* ═══════════════════════════════════════
   LOADING STATES & ERROR HANDLING
═══════════════════════════════════════ */
.cz-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--turq);
  border-radius: 50%;
  animation: cz-spin 0.6s linear infinite;
}
@keyframes cz-spin {
  to { transform: rotate(360deg); }
}
.cz-btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}
.cz-btn-loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: cz-spin 0.6s linear infinite;
}
.cz-error-msg {
  background: var(--coral-soft);
  border: 1.5px solid var(--coral-mid);
  color: var(--coral);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cz-success-msg {
  background: var(--lime-soft);
  border: 1.5px solid var(--lime-mid);
  color: var(--lime);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;}
html,body{font-family:'Nunito',sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;background:var(--bg);color:var(--ink);}
#appShell{min-height:100vh;display:none;}
#appShell.running{display:block;}
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(circle,rgba(10,168,168,.05) 1px,transparent 1px);background-size:22px 22px;}

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
.app-header{
  background:var(--white);height:60px;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:200;
  border-bottom:2px solid var(--border);
  box-shadow:0 2px 12px rgba(10,168,168,.08);
}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;}
.logo-badge{
  width:36px;height:36px;
  background:linear-gradient(135deg,var(--turq2),var(--turq));
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(10,168,168,.35);flex-shrink:0;
}
.logo-badge span{font-family:'Fraunces',serif;font-size:.88rem;font-weight:700;color:#fff;letter-spacing:-.5px;}
.logo-text{display:flex;flex-direction:column;}
.logo-name{font-size:.92rem;font-weight:800;color:var(--ink);letter-spacing:-.2px;line-height:1.2;}
.logo-tag{font-size:.63rem;color:var(--mid);line-height:1;margin-top:1px;}
.hdr-right{display:flex;align-items:center;gap:8px;}
.xp-chip{background:var(--yell-soft);border:1.5px solid var(--yell-mid);border-radius:20px;padding:4px 10px;display:flex;align-items:center;gap:5px;}
.xp-val{font-family:'Fraunces',serif;font-size:.88rem;color:var(--yell-deep);font-weight:700;}
.xp-lbl{font-size:.58rem;color:var(--mid);}
.streak-chip{background:var(--coral-soft);border:1.5px solid var(--coral-mid);border-radius:20px;padding:4px 10px;display:flex;align-items:center;gap:4px;}
.streak-val{font-family:'Fraunces',serif;font-size:.88rem;color:var(--coral);font-weight:700;}
.icon-btn{
  width:34px;height:34px;background:var(--turq-soft);border:1.5px solid var(--turq-mid);
  border-radius:9px;font-size:1rem;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:all .18s;padding:0;border:none;
}
.icon-btn:hover{background:var(--turq-mid);}
.menu-btn{
  width:34px;height:34px;background:var(--turq-soft);border:1.5px solid var(--turq-mid);border-radius:9px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;transition:background .18s;
}
.menu-btn:hover{background:var(--turq-mid);}
.menu-btn span{display:block;width:15px;height:1.5px;background:var(--turq-dark);border-radius:2px;transition:all .25s;}
.menu-btn.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.menu-btn.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.menu-btn.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

/* ═══════════════════════════════════════
   SIDE MENU
═══════════════════════════════════════ */
.side-menu{
  position:fixed;top:60px;left:0;bottom:0;width:260px;
  background:var(--white);z-index:190;
  transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding:16px 0 80px;
  border-right:1.5px solid var(--border);
  box-shadow:4px 0 24px rgba(10,168,168,.07);
}
.side-menu.open{transform:translateX(0);}
.sm-section{padding:6px 16px 4px;font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);font-weight:700;margin-top:8px;}
.sm-item{display:flex;align-items:center;gap:11px;padding:11px 20px;cursor:pointer;color:var(--ink);font-size:.85rem;font-weight:600;transition:all .15s;border-left:3px solid transparent;}
.sm-item:hover{background:var(--turq-soft);color:var(--turq-dark);}
.sm-item.active{background:var(--turq-soft);color:var(--turq-dark);border-left-color:var(--turq);}
.sm-item .si-icon{font-size:1.1rem;width:22px;text-align:center;}
.sm-divider{height:1px;background:var(--border);margin:8px 0;}
.sm-fav-item.active{background:var(--coral-soft);color:var(--coral);border-left-color:var(--coral);}
.sm-trick-item.active{background:var(--yell-soft);color:var(--yell-deep);border-left-color:var(--yell);}
.sm-xp-box{margin:12px 16px;background:var(--yell-soft);border:1.5px solid var(--yell-mid);border-radius:10px;padding:12px 14px;}
.sm-xp-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.sm-xp-label{font-size:.7rem;color:var(--mid);}
.sm-xp-val{font-family:'Fraunces',serif;font-size:1rem;color:var(--yell-deep);font-weight:700;}
.sm-xp-bar{height:4px;background:var(--yell-mid);border-radius:2px;}
.sm-xp-fill{height:100%;background:linear-gradient(90deg,var(--turq),var(--yell));border-radius:2px;transition:width .4s;}
.overlay{position:fixed;inset:0;background:rgba(12,32,32,.35);z-index:185;opacity:0;pointer-events:none;transition:opacity .3s;top:60px;}
.overlay.open{opacity:1;pointer-events:all;}

/* ═══════════════════════════════════════
   SECTIONS
═══════════════════════════════════════ */
.sec{display:none;}
.sec.active{
  display:block;
  position:fixed;
  top:60px;
  left:0;
  right:0;
  bottom:64px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:var(--bg);
}
main{padding-bottom:0;padding-top:0;}

/* ═══════════════════════════════════════
   BOTTOM NAV
═══════════════════════════════════════ */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;height:64px;
  background:var(--white);border-top:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:space-around;z-index:150;padding:0 8px;
}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px;border-radius:12px;cursor:pointer;transition:all .18s;}
.bn-item:hover{background:var(--turq-soft);}
.bn-item.active{background:var(--turq-soft);}
.bn-icon{font-size:1.3rem;line-height:1;filter:grayscale(.4) opacity(.6);transition:filter .18s;}
.bn-item:hover .bn-icon,.bn-item.active .bn-icon{filter:none;}
.bn-label{font-size:.58rem;font-weight:800;color:var(--mid);letter-spacing:.3px;text-transform:uppercase;}
.bn-item.active .bn-label{color:var(--turq-dark);}

/* ═══════════════════════════════════════
   WELCOME PAGE
═══════════════════════════════════════ */
#welcome{
  position:fixed;inset:0;z-index:500;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0;overflow-y:auto;overflow-x:hidden;
}
body.on-welcome{overflow:hidden;height:100vh;}
#welcome::before{
  content:'';position:absolute;left:-120px;top:-120px;
  width:600px;height:600px;
  background:radial-gradient(circle at 30% 30%,rgba(20,200,200,.18),transparent 60%);
  pointer-events:none;
}
#welcome::after{
  content:'';position:absolute;right:-80px;bottom:-80px;
  width:420px;height:420px;
  background:radial-gradient(circle at 70% 70%,rgba(248,216,32,.15),transparent 60%);
  pointer-events:none;
}
.wl-dots{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(10,168,168,.08) 1.5px,transparent 1.5px);
  background-size:28px 28px;
}
.wl-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:20px 28px 32px;max-width:520px;width:100%;
}
.wl-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--turq-soft);border:1.5px solid var(--turq-mid);
  border-radius:30px;padding:6px 16px;
  font-size:.7rem;font-weight:800;color:var(--turq-dark);
  letter-spacing:.4px;text-transform:uppercase;
  margin-bottom:16px;
  animation:wlFadeUp .6s ease both;
}
.wl-badge-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--turq2);
  animation:pulse 2s ease-in-out infinite;
}
.wl-logo-badge{
  width:72px;height:72px;
  background:linear-gradient(135deg,var(--turq2),var(--turq));
  border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 32px rgba(10,168,168,.35);
  margin:0 auto 8px;
  animation:wlFadeUp .6s .1s ease both;
}
.wl-logo-badge span{font-family:'Fraunces',serif;font-size:2rem;font-weight:700;color:#fff;letter-spacing:-1px;}
.wl-app-name{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:700;color:var(--ink);margin-bottom:2px;animation:wlFadeUp .6s .15s ease both;}
.wl-tagline{font-size:.72rem;color:var(--mid);font-weight:600;margin-bottom:16px;animation:wlFadeUp .6s .2s ease both;}
.wl-heading{
  font-family:'Fraunces',serif;font-size:2.5rem;font-weight:700;
  color:var(--ink);line-height:1.15;margin-bottom:10px;
  animation:wlFadeUp .6s .25s ease both;
}
.wl-heading em{color:var(--turq);font-style:italic;}
.wl-wave{display:inline-block;animation:wave 2.5s ease-in-out infinite;}
@keyframes wave{0%,100%{transform:rotate(0deg);}25%{transform:rotate(20deg);}75%{transform:rotate(-8deg);}}
.wl-sub{
  font-size:.9rem;line-height:1.75;color:var(--mid);
  margin-bottom:18px;max-width:380px;
  animation:wlFadeUp .6s .3s ease both;
}
.wl-words{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-bottom:22px;
  animation:wlFadeUp .6s .4s ease both;
}
.wl-word{
  background:var(--white);border:1.5px solid var(--border);
  border-radius:30px;padding:8px 18px;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 2px 10px rgba(10,168,168,.1);
}
.wl-word-cz{font-family:'Fraunces',serif;font-size:1rem;color:var(--turq-dark);font-weight:700;}
.wl-word-sep{width:1px;height:14px;background:var(--border);}
.wl-word-en{font-size:.72rem;color:var(--mid);font-weight:600;}
.wl-word:nth-child(1){animation:floatW1 4s ease-in-out infinite;}
.wl-word:nth-child(2){animation:floatW2 4.3s .5s ease-in-out infinite;}
.wl-word:nth-child(3){animation:floatW3 3.8s 1s ease-in-out infinite;}
.wl-word:nth-child(4){animation:floatW1 4.5s 1.5s ease-in-out infinite;}
.wl-word:nth-child(5){animation:floatW2 4.1s .8s ease-in-out infinite;}
@keyframes floatW1{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes floatW2{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes floatW3{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.wl-cta{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  animation:wlFadeUp .6s .5s ease both;
}
.wl-btn{
  background:linear-gradient(135deg,var(--turq),var(--turq2));
  color:#fff;border:none;
  padding:16px 52px;border-radius:50px;
  font-family:'Nunito',sans-serif;font-size:1.05rem;font-weight:900;
  cursor:pointer;transition:all .25s;letter-spacing:.2px;
  box-shadow:0 6px 24px rgba(10,168,168,.45);
  position:relative;overflow:hidden;
}
.wl-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);border-radius:50px;}
.wl-btn:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(10,168,168,.55);}
.wl-btn:active{transform:translateY(0);}
.wl-btn-hint{font-size:.72rem;color:var(--mid);font-weight:600;}
.wl-btn-hint a{color:var(--turq-dark);font-weight:800;cursor:pointer;}
.wl-btn-hint a:hover{text-decoration:underline;}

/* ═══════════════════════════════════════
   HOME
═══════════════════════════════════════ */
.home-wrap{max-width:100%;margin:0 auto;padding:10px 10px 100px;position:relative;}

/* Daily goal */
.daily-goal-bar{background:linear-gradient(135deg,var(--yell-soft),var(--turq-soft));border:1.5px solid var(--yell-mid);border-radius:14px;padding:14px 16px;margin-bottom:8px;display:flex;align-items:center;gap:12px;}
.dg-icon{font-size:1.5rem;}
.dg-text{flex:1;}
.dg-title{font-family:'Fraunces',serif;font-size:.95rem;font-weight:700;color:var(--ink);}
.dg-sub{font-size:.7rem;color:var(--mid);margin-top:1px;}
.dg-bar{height:5px;background:var(--border);border-radius:3px;margin-top:6px;overflow:hidden;}
.dg-fill{height:100%;background:linear-gradient(90deg,var(--turq),var(--yell));border-radius:3px;transition:width .4s;}
.dg-pct{font-family:'Fraunces',serif;font-size:.9rem;font-weight:700;color:var(--turq-dark);white-space:nowrap;}

/* Level pills */
.level-scroll-wrap{margin:16px 0 8px;}
.level-scroll-label{font-size:.65rem;font-weight:800;color:var(--mid);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;}
.level-pills-row{display:flex;gap:8px;overflow-x:auto;padding:4px 0 4px 0;scrollbar-width:none;}
.level-pills-row::-webkit-scrollbar{display:none;}
.lp-pill{display:flex;flex-direction:column;align-items:center;padding:8px 14px;border-radius:12px;background:var(--white);border:1.5px solid var(--border);cursor:pointer;transition:all .18s;flex-shrink:0;}
.lp-pill:hover{border-color:var(--turq);background:var(--turq-soft);transform:translateY(-2px);}
.lp-pill.on{background:var(--turq);border-color:var(--turq-dark);}
.lp-code{font-family:'Fraunces',serif;font-size:.9rem;font-weight:700;color:var(--ink);line-height:1.1;}
.lp-name{font-size:.58rem;color:var(--mid);font-weight:700;}
.lp-pill.on .lp-code,.lp-pill.on .lp-name{color:#fff;}
.lp-test-pill{display:flex;align-items:center;gap:5px;padding:8px 12px;border-radius:12px;background:var(--navy-soft);border:1.5px solid var(--navy-mid);cursor:pointer;transition:all .18s;flex-shrink:0;}
.lp-test-pill:hover{border-color:var(--navy);background:var(--navy-soft);transform:translateY(-2px);}
.lp-test-txt{font-size:.7rem;font-weight:700;color:var(--navy);}

/* Path */
.path-section-label{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;color:var(--ink);margin:28px 0 12px;}
.path-spine{display:flex;flex-direction:column;gap:12px;position:relative;}
.path-spine::before{content:'';position:absolute;left:28px;top:0;bottom:0;width:2px;background:var(--border2);z-index:0;}
.path-row{display:flex;align-items:center;gap:0;position:relative;z-index:1;}
.path-node{width:58px;height:58px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem;cursor:pointer;transition:all .22s;border:3px solid transparent;box-shadow:var(--s1);z-index:2;position:relative;}
.path-node:hover{transform:scale(1.1);box-shadow:var(--s2);}
.pn-done{background:var(--turq);border-color:var(--turq-dark);}
.pn-active{background:var(--yell);border-color:var(--yell-deep);box-shadow:0 0 0 5px rgba(232,192,8,.2),var(--s2);animation:nodePulse 2s ease-in-out infinite;}
.pn-locked{background:var(--white);border-color:var(--border);filter:grayscale(.5) opacity(.7);cursor:not-allowed;}
.pn-locked:hover{transform:none;box-shadow:var(--s1);}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 5px rgba(232,192,8,.2),var(--s2);}50%{box-shadow:0 0 0 10px rgba(232,192,8,.1),var(--s2);}}
.node-check{position:absolute;bottom:-3px;right:-3px;width:18px;height:18px;background:var(--lime);border-radius:50%;border:2px solid var(--white);display:flex;align-items:center;justify-content:center;font-size:.55rem;color:#fff;}
.path-card{flex:1;background:var(--white);border-radius:14px;padding:14px 16px;border:1.5px solid var(--border);margin:0 10px;cursor:pointer;transition:all .2s;box-shadow:var(--s1);}
.path-card:hover{border-color:var(--turq);background:var(--turq-soft);box-shadow:var(--s2);transform:translateY(-2px);}
.active-card{border-color:var(--yell);box-shadow:0 4px 18px rgba(232,192,8,.2);}
.locked-card{opacity:.55;pointer-events:none;}
.pc-tag{font-size:.6rem;font-weight:800;color:var(--turq-dark);text-transform:uppercase;letter-spacing:.8px;margin-bottom:3px;}
.pc-title{font-family:'Fraunces',serif;font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:4px;line-height:1.2;}
.pc-sub{font-size:.7rem;color:var(--mid);margin-bottom:8px;}
.pc-prog{height:4px;background:var(--border2);border-radius:2px;overflow:hidden;}
.pc-prog-fill{height:100%;border-radius:2px;background:var(--turq);}
.active-card .pc-prog-fill{background:var(--yell);}
.start-btn{display:inline-block;margin-top:8px;background:var(--yell);color:var(--ink);border:none;padding:6px 14px;border-radius:8px;font-size:.76rem;font-weight:800;font-family:'Nunito',sans-serif;cursor:pointer;transition:all .18s;}
.start-btn:hover{background:var(--yell2);}
.start-btn.review{background:var(--turq-soft);color:var(--turq-dark);}
.start-btn.review:hover{background:var(--turq-mid);}
.path-milestone{display:flex;align-items:center;gap:12px;margin:8px 0 16px;padding:12px 18px;background:linear-gradient(135deg,var(--yell-soft),var(--turq-soft));border:1.5px solid var(--yell-mid);border-radius:14px;position:relative;z-index:1;}
.pm-icon{font-size:1.6rem;}.pm-title{font-family:'Fraunces',serif;font-size:.95rem;font-weight:700;color:var(--ink);}
.pm-sub{font-size:.72rem;color:var(--mid);}.pm-lock{margin-left:auto;font-size:.85rem;}

/* Modules strip */
.ms-label{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:12px;}
.ms-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;}
.ms-row::-webkit-scrollbar{display:none;}
.ms-card{flex-shrink:0;width:120px;border-radius:14px;padding:16px 14px;cursor:pointer;border:1.5px solid transparent;transition:all .2s;}
.ms-card:hover{transform:translateY(-2px);box-shadow:var(--s2);border-color:var(--turq);}
.ms-turq{background:var(--turq-soft);border-color:var(--turq-mid);}
.ms-yell{background:var(--yell-soft);border-color:var(--yell-mid);}
.ms-coral{background:var(--coral-soft);border-color:var(--coral-mid);}
.ms-navy{background:var(--navy-soft);border-color:var(--navy-mid);}
.ms-lime{background:var(--lime-soft);border-color:var(--lime-mid);}
.ms-icon{font-size:1.5rem;display:block;margin-bottom:8px;}
.ms-name{font-size:.72rem;font-weight:800;margin-bottom:2px;}
.ms-turq .ms-name{color:var(--turq-dark);}.ms-yell .ms-name{color:var(--yell-deep);}
.ms-coral .ms-name{color:var(--coral);}.ms-navy .ms-name{color:var(--navy);}
.ms-lime .ms-name{color:var(--lime);}
.ms-count{font-size:.65rem;color:var(--mid);}
.unit-header{background:linear-gradient(135deg,var(--turq),var(--turq-dark));border-radius:18px;padding:20px 22px;margin-bottom:12px;position:relative;overflow:hidden;box-shadow:var(--s2);}
.unit-header::after{content:'';position:absolute;right:-20px;top:-20px;width:120px;height:120px;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 65%);border-radius:50%;}
.uh-inner{position:relative;z-index:1;}
.uh-tag{font-size:.65rem;font-weight:800;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;}
.uh-title{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:8px;}
.uh-bar-row{display:flex;align-items:center;gap:10px;}
.uh-bar{flex:1;height:6px;background:rgba(255,255,255,.2);border-radius:3px;overflow:hidden;}
.uh-bar-fill{height:100%;background:var(--yell2);border-radius:3px;transition:width .5s;}
.uh-pct{font-size:.7rem;font-weight:800;color:rgba(255,255,255,.7);white-space:nowrap;}

/* ═══════════════════════════════════════
   PILLS / SHARED
═══════════════════════════════════════ */
.pill-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;}
.pill{background:var(--bg2);border:1.5px solid var(--border);border-radius:20px;padding:4px 12px;font-size:.76rem;font-weight:700;cursor:pointer;transition:all .18s;font-family:'Nunito',sans-serif;white-space:nowrap;}
.pill:hover{border-color:var(--turq);background:var(--turq-soft);transform:translateY(-1px);}
.pill.active{background:var(--turq);color:#fff;border-color:var(--turq);}
.back-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1.5px solid var(--border);border-radius:8px;padding:7px 14px;color:var(--mid);font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .18s;margin-bottom:16px;}
.back-btn:hover{border-color:var(--turq);color:var(--turq-dark);background:var(--turq-soft);transform:translateY(-1px);}

/* ═══════════════════════════════════════
   FLASHCARDS
═══════════════════════════════════════ */
.fc-wrap-outer{max-width:100%;margin:0 auto;padding:10px 10px 100px;}
.fc-cat-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 0;margin-bottom:14px;scrollbar-width:none;}
.fc-cat-scroll::-webkit-scrollbar{display:none;}
.fc-cat-scroll .pill-row{flex-wrap:nowrap;margin-bottom:0;}
.fc-mode-row{display:flex;gap:8px;margin-bottom:14px;}
.fc-mode-btn{padding:6px 14px;border-radius:20px;font-size:.75rem;font-weight:700;border:1.5px solid var(--border);background:var(--bg2);cursor:pointer;transition:all .18s;font-family:'Nunito',sans-serif;}
.fc-mode-btn.active{background:var(--turq);color:#fff;border-color:var(--turq);}
.fc-prog-bar{height:4px;background:var(--border2);border-radius:2px;overflow:hidden;margin-bottom:16px;}
.fc-prog-fill{height:100%;background:linear-gradient(90deg,var(--turq),var(--yell2));border-radius:2px;transition:width .3s;}
.srs-info{font-size:.72rem;color:var(--mid);text-align:center;margin:-8px 0 10px;padding:6px 12px;background:var(--bg2);border-radius:8px;}
/* Flip card */
.fc-scene{perspective:1200px;width:100%;height:240px;cursor:pointer;margin-bottom:14px;}
.fc{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.fc.flipped{transform:rotateY(180deg);}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;border:1.5px solid var(--border);box-shadow:var(--s2);}
.fc-front{background:var(--white);}
.fc-back{background:linear-gradient(135deg,var(--turq-dark),var(--turq));transform:rotateY(180deg);border-color:var(--turq-dark);}
.fc-lang{font-size:.58rem;letter-spacing:2.5px;text-transform:uppercase;opacity:.35;margin-bottom:12px;}
.fc-back .fc-lang{color:rgba(255,255,255,.7);opacity:1;}
.fc-word{font-family:'Fraunces',serif;font-size:2.1rem;font-weight:700;text-align:center;color:var(--ink);line-height:1.2;margin-bottom:4px;}
.fc-back .fc-word{color:#fff;}
.fc-hint{font-size:.78rem;color:var(--mid);font-style:italic;}
.fc-back .fc-hint{color:rgba(255,255,255,.55);}
.fc-pron{font-family:'Fraunces',serif;font-size:.95rem;font-style:italic;color:var(--yell2);margin-top:7px;text-align:center;}
.fc-speak{margin-top:10px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:5px 13px;color:#fff;font-size:.73rem;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:700;transition:all .18s;}
.fc-speak:hover{background:rgba(255,255,255,.28);}
.fc-flip-hint{text-align:center;font-size:.72rem;color:var(--mid);margin-bottom:10px;}
.card-actions{display:flex;gap:6px;justify-content:center;margin-top:10px;margin-bottom:14px;}
.ca-btn{background:var(--bg2);border:1.5px solid var(--border);border-radius:8px;padding:6px 14px;font-family:'Nunito',sans-serif;font-size:.76rem;font-weight:700;cursor:pointer;transition:all .18s;}
.ca-btn:hover{border-color:var(--turq);background:var(--turq-soft);transform:translateY(-1px);}
.ca-btn.on{background:var(--coral-soft);border-color:var(--coral-mid);color:var(--coral);}
.fc-btns{display:flex;gap:10px;align-items:center;justify-content:center;}
.fc-ctr{font-size:.78rem;color:var(--mid);font-weight:700;min-width:60px;text-align:center;}
.btn-skip{background:var(--coral-soft);border:1.5px solid var(--coral-mid);color:var(--coral);padding:8px 20px;border-radius:8px;cursor:pointer;font-family:'Nunito',sans-serif;font-size:.83rem;font-weight:800;transition:all .18s;}
.btn-skip:hover{background:var(--coral-mid);}
.btn-know{background:var(--lime-soft);border:1.5px solid var(--lime-mid);color:var(--lime);padding:8px 20px;border-radius:8px;cursor:pointer;font-family:'Nunito',sans-serif;font-size:.83rem;font-weight:800;transition:all .18s;}
.btn-know:hover{background:var(--lime-mid);}
/* Type mode */
.fc-type-wrap{display:none;flex-direction:column;align-items:center;gap:10px;padding:12px 0;}
.fc-type-wrap.active{display:flex;}
.fc-type-prompt{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;color:var(--ink);text-align:center;}
.fc-type-sub{font-size:.75rem;color:var(--mid);}
.fc-type-input{width:100%;max-width:320px;padding:12px 16px;border-radius:10px;border:2px solid var(--border);font-family:'Fraunces',serif;font-size:1.2rem;text-align:center;color:var(--ink);background:var(--bg);transition:border-color .2s;outline:none;}
.fc-type-input:focus{border-color:var(--turq);}
.fc-type-input.correct{border-color:var(--lime);background:var(--lime-soft);}
.fc-type-input.wrong{border-color:var(--coral);background:var(--coral-soft);}
.fc-type-submit{background:var(--turq);color:#fff;border:none;border-radius:10px;padding:10px 28px;font-family:'Nunito',sans-serif;font-size:.9rem;font-weight:800;cursor:pointer;transition:all .18s;}
.fc-type-submit:hover{background:var(--turq-dark);}
.fc-type-result{font-size:.88rem;font-weight:700;text-align:center;padding:6px 14px;border-radius:8px;}
.fc-type-result.correct{color:var(--lime);background:var(--lime-soft);}
.fc-type-result.wrong{color:var(--coral);background:var(--coral-soft);}
.fc-type-correct-ans{font-size:.82rem;color:var(--mid);text-align:center;font-style:italic;}
/* SRS badges */
.srs-badge{font-size:.58rem;font-weight:800;padding:2px 7px;border-radius:10px;display:inline-block;text-transform:uppercase;letter-spacing:.5px;}
.srs-new{background:var(--navy-soft);color:var(--navy);}
.srs-learning{background:var(--yell-soft);color:var(--yell-deep);}
.srs-review{background:var(--lime-soft);color:var(--lime);}
/* Wrong answer review */
.review-banner{background:var(--coral-soft);border:1.5px solid var(--coral-mid);border-radius:12px;padding:12px 16px;margin-top:16px;display:none;align-items:center;gap:10px;}
.review-banner.show{display:flex;}
.review-banner-text{flex:1;font-size:.82rem;color:var(--coral);font-weight:700;}
.review-start-btn{background:var(--coral);color:#fff;border:none;border-radius:8px;padding:7px 14px;font-family:'Nunito',sans-serif;font-size:.76rem;font-weight:800;cursor:pointer;white-space:nowrap;}

/* ═══════════════════════════════════════
   GRAMMAR
═══════════════════════════════════════ */
.gram-wrap{max-width:100%;margin:0 auto;padding:10px 10px 100px;}
.gram-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.gram-card{background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:all .18s;position:relative;overflow:hidden;}
.gram-card:hover{border-color:var(--turq);background:var(--turq-soft);box-shadow:var(--s1);transform:translateY(-2px);}
.gram-card.locked{opacity:.45;cursor:default;}
.gram-card.locked:hover{transform:none;border-color:var(--border);background:var(--white);}
.gram-num{font-size:.6rem;color:var(--mid);font-weight:700;margin-bottom:3px;}
.gram-tag{font-size:.6rem;color:var(--turq-dark);font-weight:700;letter-spacing:.3px;text-transform:uppercase;margin-bottom:4px;}
.gram-card h3{font-family:'Fraunces',serif;font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:4px;}
.gram-card p{font-size:.72rem;color:var(--mid);line-height:1.4;}
.gram-card.done{border-color:var(--turq-mid);background:var(--turq-soft);}
.gram-card.done::after{content:'✓';position:absolute;top:10px;left:12px;font-size:.75rem;color:var(--turq-dark);font-weight:800;}
.gram-detail{display:none;max-width:680px;margin:0 auto;padding-bottom:100px;}
.gram-detail.open{display:block;}
.lesson-wrap{background:var(--white);border:1.5px solid var(--border);border-top:3px solid var(--turq);border-radius:14px;padding:22px 20px;margin-bottom:14px;}
.lesson-script{font-size:.65rem;color:var(--mid);font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px;}
.lesson-wrap h2{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;color:var(--ink);margin-bottom:14px;}
.lesson-wrap h3{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:var(--turq-dark);margin:16px 0 8px;}
.lesson-wrap p{font-size:.84rem;line-height:1.75;color:var(--ink);margin-bottom:10px;}
.lesson-wrap table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.83rem;}
.lesson-wrap th{background:var(--turq-soft);color:var(--turq-dark);padding:8px 10px;text-align:left;font-weight:700;}
.lesson-wrap td{padding:7px 10px;border-bottom:1px solid var(--border);}
.lesson-wrap td.hl{color:var(--turq-dark);font-weight:700;}
.lesson-wrap .tip-box{background:var(--yell-soft);border-left:3px solid var(--yell);padding:10px 14px;border-radius:0 8px 8px 0;font-size:.8rem;margin:10px 0;}
/* Dialog styles in lessons */
.dialog-card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:16px;margin:12px 0;border-left:3px solid var(--turq);}
.dialog-title{font-size:.7rem;font-weight:800;color:var(--turq-dark);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}
.dialog-line{display:flex;gap:8px;margin-bottom:8px;align-items:flex-start;}
.dialog-speaker{font-size:.62rem;font-weight:800;color:var(--mid);min-width:28px;text-transform:uppercase;padding-top:3px;flex-shrink:0;}
.dialog-bubble{flex:1;}
.dialog-cz{font-family:'Fraunces',serif;font-size:.9rem;color:var(--ink);font-weight:600;line-height:1.3;}
.dialog-en{font-size:.72rem;color:var(--mid);margin-top:2px;}
.dialog-speak{background:none;border:none;cursor:pointer;font-size:.85rem;padding:2px 0;flex-shrink:0;}
/* Exercises */
.ex-wrap{margin-top:12px;}
.ex-item{background:var(--bg2);border-radius:12px;padding:14px 16px;margin-bottom:10px;}
.ex-q{font-size:.84rem;font-weight:700;color:var(--ink);margin-bottom:8px;}
.ex-display{font-family:'Fraunces',serif;font-size:1rem;color:var(--turq-dark);background:var(--turq-soft);border-radius:8px;padding:8px 12px;margin-bottom:10px;}
.ex-opts{display:flex;flex-wrap:wrap;gap:7px;}
.ex-opt{padding:7px 14px;border-radius:8px;border:1.5px solid var(--border);background:var(--white);cursor:pointer;font-size:.82rem;font-weight:600;transition:all .18s;}
.ex-opt:hover{border-color:var(--turq);background:var(--turq-soft);box-shadow:var(--s1);transform:translateY(-2px);}
.ex-opt.correct{background:var(--lime-soft);border-color:var(--lime);color:var(--lime);}
.ex-opt.wrong{background:var(--coral-soft);border-color:var(--coral);color:var(--coral);}
.ex-fill{width:100%;padding:9px 12px;border-radius:8px;border:1.5px solid var(--border);font-family:'Nunito',sans-serif;font-size:.88rem;color:var(--ink);background:var(--white);transition:border-color .18s;outline:none;}
.ex-fill:focus{border-color:var(--turq);}
.ex-fill.correct{border-color:var(--lime);background:var(--lime-soft);}
.ex-fill.wrong{border-color:var(--coral);background:var(--coral-soft);}
.ex-check-btn{margin-top:8px;padding:7px 18px;background:var(--turq);color:#fff;border:none;border-radius:8px;font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;}
.ex-fb{font-size:.78rem;margin-top:6px;font-weight:700;}
.ex-fb.ok{color:var(--lime);}
.ex-fb.no{color:var(--coral);}

/* ═══════════════════════════════════════
   VERB LIST
═══════════════════════════════════════ */
.verb-wrap{max-width:100%;margin:0 auto;padding:10px 10px 100px;}
.verb-search-row{margin-bottom:10px;}
.verb-search{width:100%;padding:10px 14px;border-radius:10px;border:1.5px solid var(--border);font-family:'Nunito',sans-serif;font-size:.88rem;color:var(--ink);background:var(--bg);outline:none;transition:border-color .18s;}
.verb-search:focus{border-color:var(--turq);}
.verb-cats{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;}
.verb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;}
.verb-card{background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:16px 16px 14px;cursor:pointer;transition:all .18s;}
.verb-card:hover{border-color:var(--turq);background:var(--turq-soft);box-shadow:var(--s1);transform:translateY(-2px);}
.verb-inf{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;color:var(--coral);margin-bottom:2px;}
.verb-en{font-size:.75rem;color:var(--mid);margin-bottom:10px;font-style:italic;}
.verb-cat-badge{font-size:.6rem;color:var(--coral);background:var(--coral-soft);border:1px solid var(--coral-mid);border-radius:20px;padding:2px 8px;display:inline-block;margin-bottom:8px;}
.verb-asp-badge{font-size:.6rem;color:var(--navy);background:var(--navy-soft);border:1px solid var(--navy-mid);border-radius:20px;padding:2px 8px;display:inline-block;margin-bottom:8px;margin-left:4px;}
.verb-present{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
.verb-col{display:flex;flex-direction:column;}
.verb-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border2);}
.verb-person{font-size:.68rem;color:var(--mid);}
.verb-form{font-size:.77rem;font-weight:700;color:var(--ink);}
/* Verb popup */
.vp-overlay{position:fixed;inset:0;background:rgba(12,32,32,.45);z-index:300;display:none;}
.vp-overlay.open{display:block;}
.vp-box{position:fixed;bottom:0;left:0;right:0;max-height:85vh;background:var(--white);border-radius:20px 20px 0 0;z-index:310;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:20px 20px 40px;}
.vp-box.open{transform:translateY(0);}
.vp-drag{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px;}
.vp-close{position:absolute;top:16px;right:16px;background:var(--bg2);border:1.5px solid var(--border);border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;}
.vp-inf{font-family:'Fraunces',serif;font-size:1.8rem;font-weight:700;color:var(--coral);margin-bottom:4px;}
.vp-meta{font-size:.8rem;color:var(--mid);}
.vp-speak{background:var(--coral-soft);border:1px solid var(--coral-mid);border-radius:8px;padding:5px 13px;font-family:'Nunito',sans-serif;font-size:.76rem;font-weight:700;color:var(--coral);cursor:pointer;margin:10px 0;}
.vp-tabs{display:flex;gap:0;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;margin:14px 0;}
.vp-tab{flex:1;padding:8px;text-align:center;font-size:.75rem;font-weight:700;cursor:pointer;transition:all .18s;background:var(--bg2);color:var(--mid);}
.vp-tab.active{background:var(--turq);color:#fff;}
.vp-conj-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.vp-conj-col{background:var(--bg2);border-radius:10px;overflow:hidden;}
.vp-conj-label{background:var(--turq-soft);color:var(--turq-dark);font-size:.65rem;font-weight:800;padding:6px 12px;text-transform:uppercase;letter-spacing:.5px;}
.vp-conj-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;user-select:none;}
.vp-conj-row:last-child{border-bottom:none;}
.vp-conj-row:hover{background:var(--turq-soft);}
.vp-conj-row:active{background:var(--turq-mid);}
.vp-person{font-size:.72rem;color:var(--mid);min-width:52px;}
.vp-form{font-size:.88rem;font-weight:700;color:var(--ink);flex:1;text-align:center;}
.vp-speak-icon{font-size:.75rem;opacity:0;transition:opacity .12s;color:var(--turq-dark);}
.vp-conj-row:hover .vp-speak-icon{opacity:1;}
.vp-conj-row.speaking{background:var(--turq-soft);}
.vp-conj-row.speaking .vp-speak-icon{opacity:1;animation:pulse .6s infinite;}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
body.dark .vp-conj-row:hover{background:#0a3030;}
body.dark .vp-form{color:#d0eaea;}
.vp-note{font-size:.78rem;color:var(--mid);background:var(--yell-soft);border-radius:8px;padding:8px 12px;margin-top:12px;}
/* Aspect pair */
.vp-aspect-pair{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap;}
.vp-pair-btn{background:var(--navy-soft);border:1px solid var(--navy-mid);color:var(--navy);border-radius:8px;padding:5px 12px;font-family:'Nunito',sans-serif;font-size:.76rem;font-weight:700;cursor:pointer;transition:all .18s;}
.vp-pair-btn:hover{background:var(--navy-mid);}

/* ═══════════════════════════════════════
   PRONUNCIATION
═══════════════════════════════════════ */
.pron-wrap{max-width:100%;margin:0 auto;padding:10px 10px 100px;}
.alpha-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;margin-bottom:20px;}
.alpha-card{background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:10px 8px;text-align:center;cursor:pointer;transition:all .18s;}
.alpha-card:hover{border-color:var(--turq);background:var(--turq-soft);box-shadow:var(--s1);transform:translateY(-2px);}
.alpha-char{font-family:'Fraunces',serif;font-size:1.4rem;font-weight:700;color:var(--turq-dark);}
.alpha-pron{font-size:.65rem;color:var(--mid);}
.rule-list{display:flex;flex-direction:column;gap:8px;}
.rule-item{background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;}
.rule-pattern{font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:var(--turq-dark);margin-bottom:3px;}
.rule-desc{font-size:.78rem;color:var(--mid);}

/* ═══════════════════════════════════════
   PHRASES
═══════════════════════════════════════ */
.phrase-wrap{max-width:100%;margin:0 auto;padding:10px 10px 100px;}
.phrase-cat-scroll{display:flex;gap:8px;overflow-x:auto;padding:4px 0;margin-bottom:14px;scrollbar-width:none;}
.phrase-cat-scroll::-webkit-scrollbar{display:none;}
.phrase-card{background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:12px 16px;cursor:pointer;transition:all .18s;display:flex;justify-content:space-between;align-items:center;}
.phrase-card:hover{border-color:var(--turq);background:var(--turq-soft);box-shadow:var(--s1);transform:translateY(-2px);}
.phrase-left{flex:1;}
.phrase-cz{font-family:'Fraunces',serif;font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:2px;}
.phrase-en{font-size:.75rem;color:var(--mid);}
.phrase-pron{font-size:.7rem;color:var(--turq-dark);font-style:italic;margin-top:2px;}
.phrase-actions{display:flex;gap:6px;flex-shrink:0;margin-left:auto;}
.phrase-act-btn{background:transparent;border:1px solid var(--border);border-radius:6px;width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:all .18s;}
.phrase-act-btn:hover{border-color:var(--turq);}
.phrase-act-btn.active-fav{background:var(--coral-soft);border-color:var(--coral-mid);}
.phrase-act-btn.active-trick{background:var(--yell-soft);border-color:var(--yell-mid);}
.phrase-speak-btn{background:var(--turq-soft);border:1px solid var(--turq-mid);border-radius:6px;width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;}
.phrase-grid{display:flex;flex-direction:column;gap:8px;}

/* ═══════════════════════════════════════
   QUIZ
═══════════════════════════════════════ */
.quiz-wrap{max-width:100%;margin:0 auto;padding:10px 10px 100px;}
.quiz-q-card{background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:20px;margin-bottom:16px;}
.quiz-prog{font-size:.72rem;color:var(--mid);margin-bottom:8px;}
.quiz-q{font-family:'Fraunces',serif;font-size:1.1rem;color:var(--ink);margin-bottom:6px;line-height:1.4;}
.quiz-display{font-size:.9rem;color:var(--turq-dark);background:var(--turq-soft);padding:10px 14px;border-radius:8px;margin-bottom:14px;font-style:italic;}
.quiz-opts{display:flex;flex-direction:column;gap:8px;}
.quiz-opt{padding:12px 16px;border-radius:10px;border:1.5px solid var(--border);background:var(--white);cursor:pointer;font-size:.88rem;font-weight:600;transition:all .18s;text-align:left;}
.quiz-opt:hover{border-color:var(--turq);background:var(--turq-soft);box-shadow:var(--s1);transform:translateY(-2px);}
.quiz-opt.correct{background:var(--lime-soft);border-color:var(--lime);color:var(--lime);}
.quiz-opt.wrong{background:var(--coral-soft);border-color:var(--coral);color:var(--coral);}
.quiz-next-btn{width:100%;padding:12px;background:var(--turq);color:#fff;border:none;border-radius:10px;font-family:'Nunito',sans-serif;font-size:.9rem;font-weight:800;cursor:pointer;margin-top:10px;}
.quiz-score{text-align:center;padding:30px 20px;}
.quiz-score-n{font-family:'Fraunces',serif;font-size:3rem;font-weight:700;color:var(--turq);}
/* Wrong answer review */
.quiz-review-banner{background:var(--coral-soft);border:1.5px solid var(--coral-mid);border-radius:12px;padding:14px 16px;margin-bottom:16px;display:none;}
.quiz-review-banner.show{display:block;}
.quiz-review-title{font-weight:800;color:var(--coral);font-size:.88rem;margin-bottom:6px;}
.quiz-review-list{font-size:.78rem;color:var(--mid);margin-bottom:10px;line-height:1.8;}
.quiz-review-btn{background:var(--coral);color:#fff;border:none;border-radius:8px;padding:8px 18px;font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:800;cursor:pointer;}

/* ═══════════════════════════════════════
   TOPIC QUIZ
═══════════════════════════════════════ */
.tq-wrap{max-width:100%;margin:0 auto;padding:10px 10px 100px;}

/* ═══════════════════════════════════════
   SENTENCE BUILDER
═══════════════════════════════════════ */
.sb-wrap{max-width:100%;margin:0 auto;padding:10px 10px 100px;}
.sb-score-bar{font-size:.75rem;color:var(--mid);text-align:right;margin-bottom:14px;}
.sb-card{background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:20px;margin-bottom:14px;}
.sb-label{font-size:.65rem;font-weight:800;color:var(--mid);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;}
.sb-english{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:700;color:var(--ink);margin-bottom:4px;}
.sb-note{font-size:.72rem;color:var(--mid);font-style:italic;margin-bottom:16px;}
.sb-drop-zone{min-height:52px;border:2px dashed var(--turq-mid);border-radius:12px;padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--turq-soft);margin-bottom:14px;transition:all .18s;}
.sb-placeholder{font-size:.78rem;color:var(--turq-dark);opacity:.6;font-style:italic;}
.sb-word-bank{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.sb-word{background:var(--white);border:1.5px solid var(--border);border-radius:8px;padding:8px 14px;font-family:'Fraunces',serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .18s;user-select:none;}
.sb-word:hover{border-color:var(--turq);background:var(--turq-soft);box-shadow:var(--s1);transform:translateY(-2px);}
.sb-word.placed{opacity:.3;pointer-events:none;}
.sb-zone-word{background:var(--turq);color:#fff;border:1.5px solid var(--turq-dark);border-radius:8px;padding:8px 14px;font-family:'Fraunces',serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .18s;}
.sb-zone-word:hover{background:var(--turq-dark);}
.sb-check-btn{width:100%;padding:12px;background:var(--turq);color:#fff;border:none;border-radius:10px;font-family:'Nunito',sans-serif;font-size:.9rem;font-weight:800;cursor:pointer;margin-bottom:10px;transition:all .18s;}
.sb-check-btn:hover{background:var(--turq-dark);}
.sb-result{text-align:center;font-size:.9rem;font-weight:700;padding:10px;border-radius:8px;margin-bottom:10px;display:none;}
.sb-result.correct{background:var(--lime-soft);color:var(--lime);display:block;}
.sb-result.wrong{background:var(--coral-soft);color:var(--coral);display:block;}
.sb-correct-ans{font-size:.8rem;color:var(--mid);text-align:center;font-style:italic;margin-bottom:10px;display:none;}
.sb-next-btn{width:100%;padding:10px;background:var(--yell);color:var(--ink);border:none;border-radius:10px;font-family:'Nunito',sans-serif;font-size:.88rem;font-weight:800;cursor:pointer;display:none;}
.sb-done-card{text-align:center;padding:40px 20px;background:var(--white);border-radius:16px;}
.sb-done-score{font-family:'Fraunces',serif;font-size:3rem;font-weight:700;color:var(--turq);}

/* ═══════════════════════════════════════
   PROGRESS
═══════════════════════════════════════ */
.progress-wrap{max-width:100%;margin:0 auto;padding:10px 10px 100px;}
.prog-summary{background:linear-gradient(135deg,var(--turq-soft),var(--yell-soft));border:1.5px solid var(--turq-mid);border-radius:16px;padding:18px;margin-bottom:20px;}
.prog-summary-title{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:12px;}
.prog-level-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.prog-level-badge{background:var(--turq);color:#fff;font-family:'Fraunces',serif;font-size:.9rem;font-weight:700;padding:4px 14px;border-radius:20px;}
.prog-level-desc{font-size:.82rem;color:var(--mid);}
.prog-bars{display:flex;flex-direction:column;gap:8px;}
.prog-bar-row{display:flex;align-items:center;gap:8px;}
.prog-bar-label{font-size:.7rem;color:var(--mid);width:90px;flex-shrink:0;}
.prog-bar-track{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.prog-bar-fill{height:100%;border-radius:3px;transition:width .5s;}
.prog-bar-val{font-size:.7rem;font-weight:700;color:var(--ink);width:36px;text-align:right;flex-shrink:0;}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px;}
.stat-card{background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:16px;text-align:center;}
.stat-n{font-family:'Fraunces',serif;font-size:1.8rem;font-weight:700;color:var(--turq);}
.stat-l{font-size:.72rem;color:var(--mid);margin-top:2px;}
.achieve-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.achieve{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--white);border:1.5px solid var(--border);border-radius:12px;opacity:.45;transition:all .2s;}
.achieve.unlocked{opacity:1;border-color:var(--yell-mid);background:var(--yell-soft);}
.achieve-icon{font-size:1.5rem;width:32px;text-align:center;}
.achieve-name{font-weight:800;font-size:.85rem;color:var(--ink);}
.achieve-desc{font-size:.72rem;color:var(--mid);}
.achieve.unlocked .achieve-name{color:var(--yell-deep);}

/* ═══════════════════════════════════════
   VOCABULARY
═══════════════════════════════════════ */
.vocab-wrap{max-width:100%;margin:0 auto;padding:10px 10px 100px;}
.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.vocab-cat-card{background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:14px;cursor:pointer;transition:all .18s;text-align:center;}
.vocab-cat-card:hover{border-color:var(--turq);background:var(--turq-soft);box-shadow:var(--s1);transform:translateY(-2px);}
.vocab-cat-icon{font-size:1.8rem;margin-bottom:6px;}
.vocab-cat-name{font-size:.8rem;font-weight:700;color:var(--ink);}
.vocab-cat-count{font-size:.65rem;color:var(--mid);}
.vocab-detail{display:none;padding-bottom:100px;}
.vocab-detail.open{display:block;}
.vocab-word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:12px;}
.vocab-word-card{background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer;transition:all .18s;position:relative;display:flex;flex-direction:column;gap:3px;}
.vocab-word-card:hover{border-color:var(--turq);background:var(--turq-soft);box-shadow:var(--s1);transform:translateY(-2px);}
.vocab-word-card:active{transform:scale(.97);}
.vwc-en{font-size:.72rem;font-weight:700;color:var(--turq-dark);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;}
.vwc-cz{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:var(--ink);}
.vwc-pron{font-size:.62rem;color:var(--mid);font-style:italic;}
/* Vocab word modal */
.vwm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9000;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .15s;}
.vwm-sheet{background:var(--white);border-radius:24px 24px 0 0;padding:28px 24px 40px;width:100%;max-width:480px;animation:slideUp .2s;}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.vwm-en{font-size:.75rem;font-weight:800;color:var(--turq-dark);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.vwm-cz{font-family:'Fraunces',serif;font-size:2rem;font-weight:700;color:var(--ink);margin-bottom:4px;}
.vwm-pron{font-size:.85rem;color:var(--mid);font-style:italic;margin-bottom:20px;}
.vwm-sent-label{font-size:.7rem;font-weight:700;text-transform:uppercase;color:var(--mid);letter-spacing:.4px;margin-bottom:6px;}
.vwm-sent-cz{font-size:1.05rem;font-weight:600;color:var(--ink);margin-bottom:4px;}
.vwm-sent-en{font-size:.88rem;color:var(--mid);margin-bottom:20px;font-style:italic;}
.vwm-btns{display:flex;gap:10px;}
.vwm-speak-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--turq);color:#fff;border:none;border-radius:14px;padding:14px;font-size:.95rem;font-weight:700;cursor:pointer;}
.vwm-speak-btn:active{opacity:.8;}
.vwm-close-btn{background:var(--bg);border:1.5px solid var(--border);border-radius:14px;padding:14px 18px;font-size:.9rem;cursor:pointer;color:var(--ink);}
body.dark .vwm-sheet{background:#0a2020;}
body.dark .vwm-cz{color:#d0eaea;}
body.dark .vwm-close-btn{background:#0a2828;color:#d0eaea;}

/* ═══════════════════════════════════════
   FAVS / TRICKS
═══════════════════════════════════════ */
.favs-wrap{max-width:100%;margin:0 auto;padding:10px 10px 100px;}
.favs-type-row{display:flex;gap:8px;margin-bottom:14px;}
.favs-cat-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;scrollbar-width:none;}
.favs-cat-tabs::-webkit-scrollbar{display:none;}

/* ═══════════════════════════════════════
   PLACEMENT TEST
═══════════════════════════════════════ */
.pt-wrap{max-width:100%;margin:0 auto;padding:10px 10px 100px;}
.pt-intro{font-size:.88rem;color:var(--mid);line-height:1.7;margin-bottom:20px;}
.pt-start-btn{background:var(--turq);color:#fff;border:none;border-radius:12px;padding:12px 28px;font-family:'Nunito',sans-serif;font-size:.95rem;font-weight:800;cursor:pointer;}

/* ═══════════════════════════════════════
   CASE TABLE (floating button + modal)
═══════════════════════════════════════ */

.ct-fab:hover{transform:scale(1.08);}
.ct-overlay{position:fixed;inset:0;background:rgba(12,32,32,.45);z-index:400;display:none;}
.ct-overlay.open{display:block;}
.ct-modal{position:fixed;bottom:0;left:0;right:0;max-height:88vh;background:var(--white);border-radius:20px 20px 0 0;z-index:410;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:20px 16px 48px;}
.ct-modal.open{transform:translateY(0);}
.ct-close{position:absolute;top:16px;right:16px;background:var(--bg2);border:1.5px solid var(--border);border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;}
.ct-modal h2{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:700;margin-bottom:4px;padding-right:40px;}
.ct-intro{font-size:.75rem;color:var(--mid);margin-bottom:16px;}
.ct-section{margin-bottom:22px;}
.ct-section h3{font-family:'Fraunces',serif;font-size:.9rem;color:var(--turq-dark);margin-bottom:8px;}
.ct-table{width:100%;border-collapse:collapse;font-size:.7rem;}
.ct-table th{background:var(--turq-soft);color:var(--turq-dark);padding:6px 8px;text-align:left;font-weight:800;}
.ct-table td{padding:6px 8px;border-bottom:1px solid var(--border2);}
.ct-table tr:last-child td{border-bottom:none;}
.ct-hl{color:var(--turq-dark);font-weight:700;}
.ct-drag{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px;}

/* ═══════════════════════════════════════
   LEVEL PICKER ONBOARDING
═══════════════════════════════════════ */
#levelPicker{
  position:fixed;inset:0;z-index:500;
  display:none;flex-direction:column;align-items:center;
  background:var(--bg);overflow-y:auto;overflow-x:hidden;
  padding:0 0 48px;
}
#levelPicker.active{ display:flex; }
#levelPicker::before{
  content:'';position:absolute;left:-120px;top:-80px;
  width:480px;height:480px;
  background:radial-gradient(circle at 30% 30%,rgba(20,200,200,.13),transparent 60%);
  pointer-events:none;z-index:0;
}
.lp-top{
  position:relative;z-index:1;
  width:100%;max-width:540px;padding:32px 24px 0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.lp-back{
  align-self:flex-start;background:none;border:none;
  font-size:.82rem;font-weight:700;color:var(--mid);cursor:pointer;
  padding:0;margin-bottom:20px;display:flex;align-items:center;gap:5px;
}
.lp-back:hover{color:var(--turq-dark);}
.lp-heading{
  font-family:'Fraunces',serif;font-size:2rem;font-weight:700;
  color:var(--ink);line-height:1.2;margin-bottom:8px;
}
.lp-heading em{color:var(--turq);font-style:italic;}
.lp-sub{font-size:.88rem;color:var(--mid);line-height:1.6;margin-bottom:24px;max-width:340px;}
.lp-cards{
  position:relative;z-index:1;
  width:100%;max-width:540px;padding:0 16px;
  display:flex;flex-direction:column;gap:10px;
}
.lp-card{
  background:var(--white);
  border:2px solid var(--border);
  border-radius:18px;padding:14px 16px;
  display:flex;align-items:center;gap:14px;
  cursor:pointer;transition:all .2s;
  position:relative;overflow:hidden;
  box-shadow:0 2px 8px rgba(10,168,168,.06);
}
.lp-card:hover{
  border-color:var(--turq);
  background:var(--turq-soft);
  box-shadow:var(--s1);
  transform:translateY(-2px);
}
.lp-card.selected{
  border-color:var(--turq);
  background:linear-gradient(135deg,var(--turq-soft),rgba(20,200,200,.06));
  box-shadow:0 6px 24px rgba(10,168,168,.22);
}
.lp-card.selected .lp-badge{
  box-shadow:0 4px 16px rgba(10,168,168,.45);
  transform:scale(1.06);
}
.lp-check{
  position:absolute;right:14px;top:50%;transform:translateY(-50%) scale(0);
  width:26px;height:26px;
  background:linear-gradient(135deg,var(--turq2),var(--turq));
  border-radius:50%;color:#fff;font-size:.82rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(10,168,168,.4);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.lp-card.selected .lp-check{ transform:translateY(-50%) scale(1); }
.lp-badge{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:#fff;
  letter-spacing:-.5px;transition:all .2s;
  background:linear-gradient(135deg,var(--turq2),var(--turq));
  box-shadow:0 3px 12px rgba(10,168,168,.3);
}
.lp-badge.a0{background:linear-gradient(135deg,#5DCFCF,#0AA8A8);box-shadow:0 3px 12px rgba(10,168,168,.25);}
.lp-badge.a1{background:linear-gradient(135deg,#14C8C8,#0AA8A8);box-shadow:0 3px 12px rgba(10,168,168,.3);}
.lp-badge.a2{background:linear-gradient(135deg,#0AA8A8,#087878);box-shadow:0 3px 12px rgba(10,168,168,.35);}
.lp-badge.b1{background:linear-gradient(135deg,#087878,#065858);box-shadow:0 3px 12px rgba(6,88,88,.4);}
.lp-badge.b2{background:linear-gradient(135deg,#065858,#043838);box-shadow:0 3px 12px rgba(4,56,56,.45);}
.lp-badge.c1{background:linear-gradient(135deg,#2D1B69,#1A0F3E);box-shadow:0 3px 12px rgba(45,27,105,.5);}
.lp-badge.c2{background:linear-gradient(135deg,#7B1FA2,#4A0072);box-shadow:0 3px 12px rgba(123,31,162,.55);}
.lp-card-text{flex:1;min-width:0;padding-right:28px;}
.lp-card-title{font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:2px;}
.lp-card-sub{font-size:.78rem;color:var(--mid);line-height:1.45;}
.lp-card-hours{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:5px;font-size:.68rem;font-weight:800;
  color:var(--turq-dark);background:var(--turq-soft);
  border:1px solid var(--turq-mid);border-radius:20px;padding:2px 9px;
}
.lp-divider{
  position:relative;z-index:1;
  width:100%;max-width:540px;padding:0 16px;
  display:flex;align-items:center;gap:12px;margin:10px 0 4px;
}
.lp-divider-line{flex:1;height:1px;background:var(--border);}
.lp-divider-text{
  font-size:.68rem;font-weight:800;white-space:nowrap;
  color:var(--yell);letter-spacing:.6px;
  background:var(--yell2);color:#6B4800;
  padding:3px 10px;border-radius:20px;
}
.lp-placement{
  position:relative;z-index:1;
  width:100%;max-width:540px;padding:0 16px;
}
.lp-placement-btn{
  width:100%;padding:14px 16px;border-radius:16px;
  border:2px dashed var(--turq-mid);
  background:linear-gradient(135deg,rgba(10,168,168,.04),transparent);
  font-family:'Nunito',sans-serif;font-size:.88rem;font-weight:800;
  color:var(--turq-dark);cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.lp-placement-btn:hover{
  border-color:var(--turq);
  background:linear-gradient(135deg,var(--turq-soft),rgba(20,200,200,.06));
  box-shadow:0 4px 16px rgba(10,168,168,.15);
  transform:translateY(-1px);
}
.lp-confirm{
  position:relative;z-index:1;
  width:100%;max-width:540px;padding:16px 16px 0;
}
.lp-confirm-btn{
  width:100%;padding:16px;border-radius:50px;border:none;
  background:linear-gradient(135deg,var(--turq),var(--turq2));
  color:#fff;font-family:'Nunito',sans-serif;font-size:1rem;font-weight:900;
  cursor:pointer;transition:all .22s;
  box-shadow:0 6px 22px rgba(10,168,168,.35);
  opacity:.35;pointer-events:none;
  position:relative;overflow:hidden;
}
.lp-confirm-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);}
.lp-confirm-btn.ready{opacity:1;pointer-events:auto;}
.lp-confirm-btn.ready:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(10,168,168,.48);}
/* Dark mode */
body.dark .lp-card{background:var(--white);border-color:var(--border);}
body.dark .lp-card.selected{background:rgba(10,168,168,.12);}

/* ── Level Confirmation Screen ── */
#levelConfirm{
  position:fixed;inset:0;z-index:500;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  background:var(--bg);overflow:hidden;padding:32px 24px;
  text-align:center;
}
#levelConfirm.active{display:flex;}
#levelConfirm::before{
  content:'';position:absolute;left:-120px;top:-120px;
  width:560px;height:560px;
  background:radial-gradient(circle at 30% 30%,rgba(20,200,200,.18),transparent 60%);
  pointer-events:none;
}
#levelConfirm::after{
  content:'';position:absolute;right:-80px;bottom:-80px;
  width:420px;height:420px;
  background:radial-gradient(circle at 70% 70%,rgba(248,216,32,.13),transparent 60%);
  pointer-events:none;
}
.lc-inner{position:relative;z-index:1;max-width:400px;width:100%;display:flex;flex-direction:column;align-items:center;}
.lc-badge{
  width:96px;height:96px;border-radius:24px;
  background:linear-gradient(135deg,var(--turq2),var(--turq));
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:2.2rem;font-weight:700;color:#fff;
  box-shadow:0 10px 36px rgba(10,168,168,.45);
  margin-bottom:24px;
  animation:lcPop .55s cubic-bezier(.34,1.56,.64,1) both;
  position:relative;
}
.lc-badge::after{
  content:'';position:absolute;inset:0;border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);
}
@keyframes lcPop{from{transform:scale(.4) rotate(-8deg);opacity:0;}to{transform:scale(1) rotate(0deg);opacity:1;}}
.lc-sparkle{
  position:absolute;top:-8px;right:-8px;
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--yell2),var(--yell));
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;
  box-shadow:0 3px 10px rgba(232,192,8,.5);
  animation:lcPop .55s .15s cubic-bezier(.34,1.56,.64,1) both;
}
.lc-welcome{
  font-size:.72rem;font-weight:800;
  color:#6B4800;background:var(--yell2);
  border:1.5px solid var(--yell);
  padding:4px 14px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.7px;
  margin-bottom:12px;
  animation:wlFadeUp .4s .2s ease both;
}
.lc-heading{
  font-family:'Fraunces',serif;font-size:2.1rem;font-weight:700;
  color:var(--ink);line-height:1.2;margin-bottom:10px;
  animation:wlFadeUp .4s .25s ease both;
}
.lc-heading em{color:var(--turq);font-style:italic;}
.lc-desc{
  font-size:.9rem;color:var(--mid);line-height:1.65;
  margin-bottom:18px;max-width:320px;
  animation:wlFadeUp .4s .3s ease both;
}
.lc-facts{
  display:flex;gap:10px;justify-content:center;margin-bottom:32px;
  animation:wlFadeUp .4s .35s ease both;
}
.lc-fact{
  background:var(--turq-soft);border:1.5px solid var(--turq-mid);
  border-radius:30px;padding:7px 16px;
  font-size:.73rem;font-weight:800;color:var(--turq-dark);
}
.lc-btn{
  width:100%;padding:17px;border-radius:50px;border:none;
  background:linear-gradient(135deg,var(--turq),var(--turq2));
  color:#fff;font-family:'Nunito',sans-serif;font-size:1.05rem;font-weight:900;
  cursor:pointer;transition:all .22s;
  box-shadow:0 6px 24px rgba(10,168,168,.4);
  position:relative;overflow:hidden;
  animation:wlFadeUp .4s .4s ease both;
}
.lc-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);}
.lc-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(10,168,168,.5);}
.lc-change{
  margin-top:16px;font-size:.76rem;color:var(--mid);font-weight:700;
  cursor:pointer;animation:wlFadeUp .4s .45s ease both;
}
.lc-change:hover{color:var(--turq-dark);text-decoration:underline;}

/* ── Lesson content (new GL format) ── */
.lesson-meta-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px;}
.lesson-meta-pill{background:var(--turq-soft);color:var(--turq-dark);padding:5px 12px;border-radius:20px;font-size:.82rem;font-weight:600;}
body.dark .lesson-meta-pill{background:#0a3535;color:var(--turq2);}
.lesson-content{line-height:1.75;color:var(--ink);}
body.dark .lesson-content{color:#d0eaea;}
.lesson-content h4{font-family:'Fraunces',serif;font-size:1.05rem;color:var(--turq-dark);margin:18px 0 8px;}
body.dark .lesson-content h4{color:var(--turq2);}
.lesson-content p{margin:6px 0 12px;}
.lesson-content ul{margin:6px 0 12px 18px;}
.lesson-content table,.gt,
.gram-table{width:100%;border-collapse:collapse;margin:10px 0 16px;font-size:.88rem;}
.lesson-content table th,.gram-table th{background:var(--turq);color:#fff;padding:7px 10px;text-align:left;}
.lesson-content table td,.gram-table td{padding:6px 10px;border-bottom:1px solid var(--turq-soft);}
body.dark .lesson-content table td,body.dark .gram-table td{border-color:#1a4040;}
body.dark .lesson-content table th,body.dark .gram-table th{background:var(--turq-dark);}
.lesson-content tr:nth-child(even) td,.gram-table tr:nth-child(even) td{background:rgba(10,168,168,.06);}

/* ── Grammar level switcher ── */
.gram-level-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.gl-pill{display:flex;flex-direction:column;align-items:center;padding:8px 14px;border-radius:12px;border:1.5px solid var(--border);cursor:pointer;transition:all .18s;background:var(--white);min-width:60px;flex-shrink:0;}
.gl-pill .lp-code{font-family:'Fraunces',serif;font-weight:700;font-size:.9rem;color:var(--ink);line-height:1.1;}
.gl-pill .lp-name{font-size:.58rem;color:var(--mid);font-weight:700;}
.gl-pill.on{background:var(--turq);border-color:var(--turq-dark);}
.gl-pill.on .lp-code{color:#fff;}
.gl-pill.on .lp-name{color:#fff;}
.gl-pill:hover:not(.on){border-color:var(--turq);background:var(--turq-soft);transform:translateY(-2px);}
body.dark .gl-pill{background:#0a2828;border-color:#1a4040;color:#d0eaea;}
body.dark .gl-pill.on{background:var(--turq-dark);border-color:var(--turq);}

/* Vocab modal save row */
.vwm-save-row{display:flex;gap:8px;margin-top:10px;}
.vwm-save-btn{flex:1;padding:11px;border-radius:12px;border:1.5px solid var(--border);background:var(--bg);font-size:.85rem;font-weight:700;cursor:pointer;color:var(--ink);transition:all .15s;}
.vwm-save-btn.on{background:#fff0f3;border-color:#f88;color:#c00;}
.vwm-save-btn.trick.on{background:#fff8e0;border-color:#e8c008;color:#7a5c00;}
.vwm-save-btn:active{transform:scale(.96);}
body.dark .vwm-save-btn{background:#0a2828;color:#d0eaea;}

/* ── Vocab mode tabs ── */
.vocab-mode-tabs{display:flex;gap:8px;margin-bottom:14px;}
.vmt{flex:1;padding:10px;border-radius:12px;border:2px solid var(--border);background:var(--white);font-size:.85rem;font-weight:700;cursor:pointer;color:var(--ink);transition:all .15s;}
.vmt.active{background:var(--turq);border-color:var(--turq);color:#fff;}
/* ── Vocab SRS Panel ── */
.vsrs-header{text-align:center;margin-bottom:16px;}
.vsrs-count-row{display:flex;gap:8px;justify-content:center;margin-bottom:16px;}
.vsrs-count-pill{padding:6px 14px;border-radius:20px;font-size:.78rem;font-weight:700;}
.vsrs-count-pill.due{background:#fff3e0;color:#e65100;}
.vsrs-count-pill.new{background:#e8f5e9;color:#2e7d32;}
.vsrs-count-pill.done{background:var(--turq-soft);color:var(--turq-dark);}
.vsrs-card{background:var(--white);border-radius:18px;padding:28px 20px;text-align:center;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--s1);margin-bottom:16px;cursor:pointer;transition:all .2s;}
.vsrs-card:active{transform:scale(.98);}
.vsrs-cz{font-family:'Fraunces',serif;font-size:2rem;font-weight:700;color:var(--ink);margin-bottom:6px;}
.vsrs-pron{font-size:.85rem;color:var(--mid);font-style:italic;margin-bottom:4px;}
.vsrs-tap{font-size:.75rem;color:var(--mid);margin-top:8px;}
.vsrs-answer{display:none;margin-top:10px;border-top:1px solid var(--border);padding-top:12px;width:100%;}
.vsrs-en{font-size:1rem;font-weight:700;color:var(--turq-dark);margin-bottom:8px;}
.vsrs-sent-cz{font-size:.9rem;color:var(--ink);margin-bottom:3px;}
.vsrs-sent-en{font-size:.8rem;color:var(--mid);font-style:italic;}
.vsrs-btns{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap;}
.vsrs-btn{padding:12px 6px;border-radius:12px;border:none;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s;}
.vsrs-btn.again{background:#ffebee;color:#c62828;}
.vsrs-btn.hard{background:#fff8e1;color:#e65100;}
.vsrs-btn.good{background:#e8f5e9;color:#2e7d32;}
.vsrs-btn.easy{background:#e3f2fd;color:#1565c0;}
.vsrs-speak-btn{margin-top:10px;background:var(--turq-soft);border:1.5px solid var(--turq);border-radius:8px;padding:6px 14px;color:var(--turq-dark);font-size:.8rem;font-weight:700;cursor:pointer;font-family:'Nunito',sans-serif;transition:all .18s;}
.vsrs-speak-btn:hover{background:var(--turq-mid);color:var(--white);}
.vsrs-reveal-hint{font-size:.75rem;color:var(--mid);margin-top:16px;display:flex;align-items:center;justify-content:center;}
.vsrs-done-screen{text-align:center;padding:32px 16px;}
.vsrs-done-screen h3{font-family:'Fraunces',serif;font-size:1.5rem;margin-bottom:8px;}
/* ── Study Calendar ── */
.cal-wrap{background:var(--white);border-radius:14px;padding:16px;border:1.5px solid var(--border);}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-nav-btn{background:none;border:1.5px solid var(--border);border-radius:8px;padding:5px 12px;cursor:pointer;font-size:.85rem;color:var(--ink);}
.cal-month-label{font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:var(--ink);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-day-label{font-size:.6rem;color:var(--mid);text-align:center;font-weight:700;padding-bottom:4px;}
.cal-day{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:600;color:var(--mid);background:var(--bg);}
.cal-day.today-cell{border:2px solid var(--turq);color:var(--turq-dark);}
.cal-day.studied{background:var(--turq);color:#fff;}
.cal-day.studied.low{background:var(--turq-mid);opacity:.7;}
.cal-day.studied.high{background:var(--turq-dark);}
.cal-day.other-month{opacity:.25;}
.cal-streak-info{display:flex;gap:12px;justify-content:center;margin-top:12px;flex-wrap:wrap;}
.cal-streak-stat{text-align:center;}
.cal-streak-stat .csn{font-family:'Fraunces',serif;font-size:1.4rem;font-weight:700;color:var(--turq-dark);}
.cal-streak-stat .csl{font-size:.68rem;color:var(--mid);text-transform:uppercase;letter-spacing:.3px;}
body.dark .cal-wrap{background:#0a2020;border-color:#1a4040;}
body.dark .vsrs-card{background:#0a2020;}
body.dark .vsrs-cz{color:#d0eaea;}

/* ── ONBOARDING ── */
#onboarding{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.ob-wrap{max-width:420px;width:100%;padding:32px 24px 24px;display:flex;flex-direction:column;align-items:center;gap:0;}
.ob-progress{display:flex;gap:8px;margin-bottom:32px;}
.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .3s;}
.ob-dot.active{width:24px;border-radius:4px;background:var(--turq);}
.ob-slide{display:none;flex-direction:column;align-items:center;text-align:center;gap:12px;width:100%;}
.ob-slide.active{display:flex;}
.ob-emoji{font-size:3.5rem;line-height:1;margin-bottom:4px;}
.ob-title{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700;color:var(--ink);line-height:1.2;margin:0;}
.ob-title em{color:var(--turq);font-style:normal;}
.ob-body{font-size:.92rem;color:var(--mid);line-height:1.55;max-width:340px;margin:0;}
.ob-feature-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px;}
.ob-feat{background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:8px 14px;font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:6px;color:var(--ink);}
.ob-btn-row{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:32px;}
.ob-skip{background:none;border:none;color:var(--mid);font-size:.88rem;cursor:pointer;padding:8px;}
.ob-next{background:var(--turq);color:#fff;border:none;border-radius:14px;padding:13px 28px;font-size:.95rem;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(10,168,168,.25);}
.ob-next:active{transform:scale(.97);}

/* ── WELCOME BACK SCREEN ── */
#welcomeBack{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;animation:wbFadeIn .3s;}
.wb-overlay{position:absolute;inset:0;background:rgba(12,32,32,.85);backdrop-filter:blur(8px);}
.wb-card{position:relative;z-index:1;background:var(--white);border-radius:24px;padding:32px 28px;max-width:420px;width:90%;box-shadow:0 12px 40px rgba(0,0,0,.2);border:2px solid var(--turq-mid);text-align:center;animation:wbSlideUp .4s cubic-bezier(0.34, 1.56, 0.64, 1);}
.wb-icon{font-size:3.5rem;margin-bottom:12px;animation:wbBounce .6s .2s both;}
.wb-title{font-family:'Fraunces',serif;font-size:1.8rem;font-weight:700;color:var(--ink);margin-bottom:4px;}
.wb-subtitle{font-size:.95rem;color:var(--turq-dark);font-weight:600;margin-bottom:16px;font-style:italic;}
.wb-level-badge{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--turq2),var(--turq));padding:10px 20px;border-radius:50px;margin-bottom:24px;box-shadow:0 4px 12px rgba(10,168,168,.25);animation:wbPulse 2s ease-in-out infinite;}
.wb-level-code{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:800;color:#fff;letter-spacing:.5px;}
.wb-level-name{font-size:.9rem;font-weight:700;color:rgba(255,255,255,.95);border-left:2px solid rgba(255,255,255,.4);padding-left:10px;}
@keyframes wbPulse{0%,100%{transform:scale(1);box-shadow:0 4px 12px rgba(10,168,168,.25);}50%{transform:scale(1.02);box-shadow:0 6px 16px rgba(10,168,168,.35);}}
.wb-stats{display:flex;gap:16px;justify-content:center;margin-bottom:24px;}
.wb-stat{display:flex;flex-direction:column;align-items:center;background:var(--turq-soft);border:1.5px solid var(--turq-mid);border-radius:16px;padding:16px 20px;min-width:100px;}
.wb-stat-icon{font-size:1.6rem;margin-bottom:4px;}
.wb-stat-value{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700;color:var(--turq-dark);line-height:1;}
.wb-stat-label{font-size:.7rem;color:var(--mid);font-weight:600;margin-top:4px;}
.wb-motivational{background:var(--yell-soft);border:1.5px solid var(--yell-mid);border-radius:12px;padding:16px;margin-bottom:20px;}
.wb-quote{font-family:'Fraunces',serif;font-size:1rem;font-weight:600;color:var(--ink);line-height:1.4;margin-bottom:6px;}
.wb-quote-en{font-size:.82rem;color:var(--mid);line-height:1.3;}
.wb-continue-btn{background:linear-gradient(135deg,var(--turq2),var(--turq));color:white;border:none;border-radius:14px;padding:14px 32px;font-size:1rem;font-weight:700;cursor:pointer;width:100%;font-family:'Nunito',sans-serif;box-shadow:0 4px 16px rgba(10,168,168,.3);transition:all .2s;}
.wb-continue-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(10,168,168,.4);}
.wb-continue-btn:active{transform:scale(.98);}
.wb-quick-actions{display:flex;gap:8px;margin-top:12px;}
.wb-quick-btn{flex:1;background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:10px;font-size:.82rem;font-weight:600;color:var(--ink);cursor:pointer;font-family:'Nunito',sans-serif;transition:all .18s;}
.wb-quick-btn:hover{border-color:var(--turq);background:var(--turq-soft);transform:translateY(-1px);}
@keyframes wbFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes wbFadeOut{from{opacity:1;}to{opacity:0;}}
@keyframes wbSlideUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
@keyframes wbBounce{0%,20%,50%,80%,100%{transform:translateY(0);}40%{transform:translateY(-10px);}60%{transform:translateY(-5px);}}

/* ── VOCAB SEARCH ── */
.vocab-search-row{display:flex;gap:8px;margin-bottom:14px;position:relative;}
.vocab-search-input{flex:1;padding:11px 42px 11px 14px;border-radius:12px;border:2px solid var(--border);font-size:.9rem;font-family:'Nunito',sans-serif;background:var(--white);color:var(--ink);outline:none;transition:border .15s;}
.vocab-search-input:focus{border-color:var(--turq);}
.vocab-search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--mid);font-size:1rem;cursor:pointer;padding:4px 6px;}
.vsearch-result-header{font-size:.72rem;color:var(--mid);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.vsearch-count{font-size:.78rem;color:var(--turq-dark);font-weight:700;margin-bottom:10px;}
/* ── VERB MODE TABS ── */
.verb-mode-tabs{display:flex;gap:8px;margin-bottom:14px;}
.vb-tab{flex:1;padding:10px;border-radius:12px;border:2px solid var(--border);background:var(--white);font-size:.85rem;font-weight:700;cursor:pointer;color:var(--ink);transition:all .15s;}
.vb-tab.active{background:var(--turq);border-color:var(--turq);color:#fff;}
/* ── VERB DRILL ── */
.vdrill-header{text-align:center;margin-bottom:16px;}
.vdrill-header h3{font-family:'Fraunces',serif;font-size:1.2rem;margin-bottom:4px;}
.vdrill-settings{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:16px;}
.vdrill-set-pill{padding:7px 14px;border-radius:20px;border:2px solid var(--border);background:var(--white);font-size:.78rem;font-weight:700;cursor:pointer;color:var(--ink);transition:all .15s;}
.vdrill-set-pill.on{background:var(--turq);border-color:var(--turq);color:#fff;}
.vdrill-card{background:var(--white);border-radius:18px;padding:24px 20px;box-shadow:var(--s1);margin-bottom:16px;}
.vdrill-prompt{text-align:center;margin-bottom:20px;}
.vdrill-inf{font-family:'Fraunces',serif;font-size:1.8rem;font-weight:700;color:var(--ink);}
.vdrill-en{font-size:.88rem;color:var(--mid);margin-top:4px;}
.vdrill-ask{margin-top:14px;font-size:.92rem;color:var(--turq-dark);font-weight:700;}
.vdrill-person{font-size:1.1rem;font-weight:700;color:var(--ink);font-family:'Fraunces',serif;}
.vdrill-input-row{display:flex;gap:8px;margin-top:12px;}
.vdrill-input{flex:1;padding:12px 14px;border-radius:12px;border:2px solid var(--border);font-size:1rem;font-family:'Nunito',sans-serif;color:var(--ink);background:var(--white);outline:none;transition:border .15s;}
.vdrill-input:focus{border-color:var(--turq);}
.vdrill-input.correct{border-color:#2e7d32;background:#f1f8e9;}
.vdrill-input.wrong{border-color:#c62828;background:#ffebee;}
.vdrill-check{padding:12px 20px;border-radius:12px;background:var(--turq);color:#fff;border:none;font-weight:700;font-size:.9rem;cursor:pointer;}
.vdrill-feedback{text-align:center;margin-top:10px;font-size:.9rem;font-weight:700;min-height:24px;}
.vdrill-feedback.ok{color:#2e7d32;}
.vdrill-feedback.bad{color:#c62828;}
.vdrill-next-btn{width:100%;margin-top:12px;padding:13px;border-radius:12px;background:var(--turq);color:#fff;border:none;font-weight:700;font-size:.95rem;cursor:pointer;display:none;}
.vdrill-score-row{display:flex;gap:12px;justify-content:center;margin-bottom:16px;}
.vdrill-score-pill{padding:6px 16px;border-radius:20px;font-size:.8rem;font-weight:700;}
.vdrill-score-pill.correct{background:#e8f5e9;color:#2e7d32;}
.vdrill-score-pill.wrong{background:#ffebee;color:#c62828;}
.vdrill-done{text-align:center;padding:32px 16px;}
.vdrill-done h3{font-family:'Fraunces',serif;font-size:1.5rem;margin-bottom:8px;}
/* ── VOCAB TYPING PRACTICE ── */
.vsrs-type-row{margin-top:12px;}
.vsrs-type-inp{width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--border);font-size:1rem;font-family:'Nunito',sans-serif;color:var(--ink);background:var(--white);outline:none;box-sizing:border-box;transition:border .15s;}
.vsrs-type-inp:focus{border-color:var(--turq);}
.vsrs-type-inp.correct{border-color:#2e7d32;background:#f1f8e9;}
.vsrs-type-inp.wrong{border-color:#c62828;background:#ffebee;}
.vsrs-mode-pills{display:flex;gap:6px;margin-bottom:12px;justify-content:center;}
.vsrs-mode-pill{padding:6px 14px;border-radius:20px;border:2px solid var(--border);background:var(--white);font-size:.75rem;font-weight:700;cursor:pointer;color:var(--ink);transition:all .15s;}
.vsrs-mode-pill.on{background:var(--turq);border-color:var(--turq);color:#fff;}
/* ── LISTENING MODE ── */
.vslisten-card{background:var(--white);border-radius:18px;padding:28px 20px;text-align:center;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--s1);margin-bottom:16px;}
.vslisten-icon{font-size:3rem;margin-bottom:8px;cursor:pointer;}
.vslisten-icon:hover{transform:scale(1.1);}
.vslisten-prompt{font-size:.85rem;color:var(--mid);margin-bottom:14px;}
.vslisten-inp{width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--border);font-size:1rem;font-family:'Nunito',sans-serif;color:var(--ink);background:var(--white);outline:none;box-sizing:border-box;text-align:center;}
.vslisten-inp:focus{border-color:var(--turq);}
.vslisten-inp.correct{border-color:#2e7d32;background:#f1f8e9;}
.vslisten-inp.wrong{border-color:#c62828;background:#ffebee;}
.vslisten-check-btn{margin-top:10px;padding:11px 24px;border-radius:12px;background:var(--turq);color:#fff;border:none;font-weight:700;font-size:.9rem;cursor:pointer;}
.vslisten-feedback{margin-top:8px;font-size:.88rem;font-weight:700;min-height:20px;}
.vslisten-feedback.ok{color:#2e7d32;}
.vslisten-feedback.bad{color:#c62828;}
body.dark .vdrill-card{background:#0a2020;}
body.dark .vdrill-input{background:#0a2020;color:#d0eaea;border-color:#1a4040;}
body.dark .vslisten-card{background:#0a2020;}
body.dark .vslisten-inp{background:#0a2020;color:#d0eaea;border-color:#1a4040;}
body.dark .vocab-search-input{background:#0a2020;color:#d0eaea;border-color:#1a4040;}
body.dark .vsrs-type-inp{background:#0a2020;color:#d0eaea;border-color:#1a4040;}
body.dark .ob-feat{background:#0a2020;border-color:#1a4040;}

/* ══ CASE TRAINER ══ */
.cases-wrap{padding:10px 10px 80px;}

/* ── Reading Practice ────────────────────────── */
.reading-wrap{max-width:100%;margin:0 auto;padding:10px 10px 100px;}
.reading-level-pills{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap;justify-content:center;}
.rl-pill{display:flex;flex-direction:column;align-items:center;padding:8px 14px;border-radius:12px;border:1.5px solid var(--border);cursor:pointer;transition:all .18s;background:var(--white);min-width:60px;flex-shrink:0;}
.rl-pill .rl-code{font-family:'Fraunces',serif;font-weight:700;font-size:.9rem;color:var(--ink);line-height:1.1;}
.rl-pill .rl-name{font-size:.58rem;color:var(--mid);font-weight:700;}
.rl-pill.active{background:var(--turq);border-color:var(--turq-dark);}
.rl-pill.active .rl-code{color:#fff;}
.rl-pill.active .rl-name{color:#fff;}
.rl-pill:hover:not(.active){border-color:var(--turq);background:var(--turq-soft);transform:translateY(-2px);}

.reading-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:16px;}
/* Updated to match grammar lesson card style */
.reading-card{background:var(--white);border-radius:18px;padding:12px;transition:all .18s;position:relative;display:flex;flex-direction:column;box-shadow:var(--s1);border:1.5px solid var(--border);cursor:pointer;}
.reading-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.12);transform:translateY(-2px);border-color:var(--turq);background:var(--turq-soft);}
.reading-card:active{transform:translateY(0) scale(.98);}
.reading-card.completed{border-color:var(--turq);}
/* Level badge at top like grammar lessons */
.reading-card-level{font-size:.65rem;font-weight:700;color:var(--turq);background:var(--turq-soft);padding:3px 7px;border-radius:5px;display:inline-block;margin-bottom:8px;}
.reading-card-icon{font-size:1.6rem;margin-bottom:6px;}
.reading-card-title{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:3px;font-family:'Fraunces',serif;}
.reading-card-subtitle{font-size:.78rem;color:var(--gray);margin-bottom:8px;}
.reading-card-meta{display:flex;gap:10px;margin-bottom:10px;font-size:.78rem;color:var(--mid);flex-wrap:wrap;}
.reading-card-meta span{display:flex;align-items:center;gap:3px;}
/* Progress bar at bottom like grammar lessons */
.reading-card-progress{margin-top:auto;padding-top:10px;border-top:1.5px solid var(--soft);}
.reading-progress-bar{height:5px;background:var(--soft);border-radius:10px;overflow:hidden;margin-bottom:5px;}
.reading-progress-fill{height:100%;background:linear-gradient(90deg, var(--turq) 0%, var(--turq-dark) 100%);border-radius:10px;transition:width .3s;}
.reading-progress-text{font-size:.68rem;color:var(--mid);font-weight:600;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.rp-badge{font-size:.65rem;padding:2px 6px;background:var(--turq-soft);color:var(--turq-dark);border-radius:5px;font-weight:600;}

/* Reading View */
.reading-view{display:none;}
.rv-header{margin-bottom:12px;}
.rv-back{background:var(--soft);border:none;padding:8px 12px;border-radius:10px;font-weight:600;color:var(--ink);cursor:pointer;font-size:0.88rem;transition:all .2s;}
.rv-back:hover{background:var(--line);transform:translateX(-3px);}

/* Title section in a card */
.rv-title-section{text-align:center;margin-bottom:14px;background:var(--white);border-radius:18px;padding:14px;box-shadow:var(--s1);border:1.5px solid var(--border);}
.rv-title{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:700;color:var(--ink);margin-bottom:3px;}
.rv-subtitle{font-size:0.85rem;color:var(--gray);margin-bottom:8px;}
.rv-meta{display:flex;gap:8px;justify-content:center;font-size:0.8rem;color:var(--mid);flex-wrap:wrap;}
.rv-meta span{display:flex;align-items:center;}

/* Mode tabs styled like grammar lesson tabs */
.rv-mode-tabs{display:flex;gap:6px;margin-bottom:14px;}
.rv-tab{flex:1;text-align:center;padding:9px;border-radius:8px;font-weight:600;color:var(--mid);cursor:pointer;transition:all .18s;font-size:0.88rem;background:var(--white);border:1.5px solid var(--border);}
.rv-tab:hover:not(.active){background:var(--turq-soft);border-color:var(--turq);color:var(--ink);}
.rv-tab.active{background:var(--turq);color:white;box-shadow:0 2px 8px rgba(10,168,168,.3);border-color:var(--turq);}

/* Content in card format */
.rv-content{background:var(--white);border-radius:18px;padding:16px;min-height:300px;box-shadow:var(--s1);border:1.5px solid var(--border);}

/* Read Mode */
.rm-controls{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.rm-play-btn, .rm-mark-btn{padding:9px 14px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .18s;border:1.5px solid var(--border);font-size:0.88rem;}
.rm-play-btn{background:var(--turq);color:white;flex:1;border-color:var(--turq);}
.rm-play-btn:hover{background:var(--turq-dark);border-color:var(--turq-dark);}
.rm-mark-btn{background:var(--white);color:var(--ink);flex:1;display:flex;align-items:center;justify-content:center;gap:6px;}
.rm-mark-btn:hover{background:var(--turq-soft);border-color:var(--turq);}
.rm-mark-btn.marked{background:linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);color:#155724;border-color:#28a745;}

.rm-text{line-height:1.65;font-size:0.95rem;color:var(--ink);}
.rm-text p{margin-bottom:16px;}
.rm-footer{margin-top:20px;padding-top:14px;border-top:1.5px solid var(--soft);}

/* Listen Mode */
.lm-info{text-align:center;padding:40px 20px;}
.lm-container{display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 0;}
.lm-play-circle{width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,var(--turq2),var(--turq));box-shadow:0 4px 20px rgba(10,168,168,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s;border:2px solid var(--turq);}
.lm-play-circle:hover{transform:scale(1.08);box-shadow:0 6px 25px rgba(10,168,168,.4);border-color:var(--turq-dark);}
.lm-play-circle:active{transform:scale(0.98);}
.lm-play-icon{font-size:2.2rem;color:white;}
.lm-progress-area{width:100%;max-width:400px;}
.lm-progress-bar{width:100%;height:6px;background:var(--border2);border-radius:10px;overflow:hidden;cursor:pointer;margin-bottom:8px;transition:all .2s;}
.lm-progress-bar:hover{height:8px;background:var(--turq-soft);}
.lm-progress-fill{height:100%;background:var(--turq);transition:width .1s linear;border-radius:10px;}
.lm-time{display:flex;justify-content:space-between;font-size:0.8rem;color:var(--mid);font-family:'Fraunces',serif;}
.lm-speed-controls{display:flex;gap:8px;margin-top:10px;}
.lm-speed-btn{padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--white);color:var(--mid);font-size:0.82rem;font-weight:600;cursor:pointer;transition:all .2s;}
.lm-speed-btn:hover{border-color:var(--turq);color:var(--turq);}
.lm-speed-btn.active{background:var(--turq);color:white;border-color:var(--turq);}
.lm-transcript-toggle{margin-top:20px;padding:10px 20px;border-radius:8px;border:1.5px solid var(--border);background:var(--white);color:var(--ink);font-weight:600;cursor:pointer;transition:all .18s;font-size:0.88rem;}
.lm-transcript-toggle:hover{background:var(--turq-soft);border-color:var(--turq);}
.lm-transcript-toggle.active{background:var(--turq);color:white;border-color:var(--turq);}
.lm-transcript{margin-top:20px;padding:16px;background:var(--turq-soft);border-radius:10px;border:1.5px solid var(--turq-mid);display:none;line-height:1.65;font-size:0.95rem;color:var(--ink);}
.lm-transcript.visible{display:block;animation:fadeIn .3s;}
.lm-transcript p{margin-bottom:12px;}
.lm-replay-btn{margin-top:15px;padding:10px 20px;border-radius:8px;background:var(--turq);color:white;font-weight:600;cursor:pointer;border:1.5px solid var(--turq);font-size:0.88rem;transition:all .18s;}
.lm-replay-btn:hover{background:var(--turq-dark);border-color:var(--turq-dark);}
@keyframes fadeIn{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:translateY(0);}}

/* Sentence Navigation */
.lm-sentence-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:25px;padding:14px;background:var(--white);border-radius:10px;border:1.5px solid var(--border);}
.lm-sent-btn{width:36px;height:36px;border-radius:8px;background:var(--turq-soft);border:1.5px solid var(--turq-mid);color:var(--turq-dark);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.lm-sent-btn:hover{background:var(--turq-mid);transform:scale(1.05);}
.lm-sent-btn:disabled{opacity:0.3;cursor:not-allowed;transform:none;}
.lm-sent-info{font-size:0.82rem;color:var(--mid);font-weight:600;min-width:90px;text-align:center;}
.lm-sent-play{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--turq2),var(--turq));color:white;font-size:1.3rem;cursor:pointer;border:2px solid var(--turq);display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 2px 10px rgba(10,168,168,.25);}
.lm-sent-play:hover{transform:scale(1.08);box-shadow:0 3px 15px rgba(10,168,168,.35);border-color:var(--turq-dark);}
.lm-current-sentence{margin-top:14px;padding:12px 16px;background:var(--yell-soft);border-radius:10px;border:1.5px solid var(--yell-mid);font-size:0.95rem;line-height:1.6;color:var(--ink);text-align:center;}

/* Sentence List */
.lm-sentence-list{margin-top:20px;display:none;flex-direction:column;gap:8px;}
.lm-sentence-list.visible{display:flex;}
.lm-sent-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--white);border-radius:8px;border:1.5px solid var(--border);transition:all .2s;}
.lm-sent-item:hover{border-color:var(--turq-mid);background:var(--turq-soft);}
.lm-sent-item.playing{border-color:var(--turq);background:var(--turq-soft);}
.lm-sent-num{min-width:24px;height:24px;border-radius:50%;background:var(--turq-soft);border:1.5px solid var(--turq-mid);color:var(--turq-dark);font-size:0.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.lm-sent-item.playing .lm-sent-num{background:var(--turq);color:white;border-color:var(--turq);}
.lm-sent-text{flex:1;font-size:0.88rem;line-height:1.5;color:var(--ink);}
.lm-sent-play-btn{width:32px;height:32px;border-radius:50%;background:var(--turq-soft);border:1.5px solid var(--turq-mid);color:var(--turq);font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
.lm-sent-play-btn:hover{background:var(--turq);color:white;border-color:var(--turq);}
.lm-sent-toggle{margin-top:15px;padding:10px 20px;border-radius:8px;border:1.5px solid var(--border);background:var(--white);color:var(--ink);font-weight:600;cursor:pointer;transition:all .18s;font-size:0.88rem;}
.lm-sent-toggle:hover{border-color:var(--turq);color:var(--turq);}
.lm-sent-toggle.active{background:var(--turq-soft);border-color:var(--turq);color:var(--turq-dark);}

/* Questions Mode */
.qm-question{max-width:600px;margin:0 auto;}
.qm-progress{text-align:center;font-size:0.78rem;color:var(--mid);margin-bottom:12px;font-weight:600;}
.qm-q-text{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:5px;text-align:center;}
.qm-q-en{font-size:0.85rem;color:var(--gray);margin-bottom:18px;text-align:center;}

/* Question options styled like quiz cards */
.qm-options{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.qm-opt{background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:11px;text-align:left;cursor:pointer;transition:all .18s;font-size:0.9rem;color:var(--ink);font-weight:500;box-shadow:var(--s1);}
.qm-opt:hover:not(:disabled){background:var(--turq-soft);border-color:var(--turq);transform:translateX(4px);}
.qm-opt:disabled{cursor:not-allowed;opacity:0.8;}
.qm-opt.correct{background:linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);border-color:#28a745;color:#155724;box-shadow:0 2px 12px rgba(40,167,69,.2);}
.qm-opt.wrong{background:linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);border-color:#dc3545;color:#721c24;box-shadow:0 2px 12px rgba(220,53,69,.2);}
.qm-opt-en{display:block;font-size:0.78rem;color:var(--gray);margin-top:4px;font-weight:400;}

/* Feedback in card format */
.qm-feedback{margin-top:14px;}
.qm-fb-correct, .qm-fb-wrong{background:var(--white);border-radius:12px;padding:14px;border-left:4px solid;box-shadow:var(--s1);}
.qm-fb-correct{border-color:#28a745;}
.qm-fb-wrong{border-color:#dc3545;}
.qm-fb-icon{font-size:1.6rem;margin-bottom:7px;}
.qm-fb-title{font-size:0.95rem;font-weight:700;margin-bottom:7px;}
.qm-fb-exp{font-size:0.88rem;color:var(--ink);margin-bottom:4px;line-height:1.6;}
.qm-fb-exp-en{font-size:0.78rem;color:var(--gray);margin-bottom:12px;line-height:1.5;}
.qm-next-btn{background:var(--turq);color:white;border:1.5px solid var(--turq);padding:9px 18px;border-radius:8px;font-weight:600;cursor:pointer;font-size:0.88rem;transition:all .18s;width:100%;}
.qm-next-btn:hover{background:var(--turq-dark);border-color:var(--turq-dark);transform:scale(1.02);}

/* Questions Results */
.qm-results{text-align:center;padding:24px 14px;}
.qm-score-circle{width:110px;height:110px;border-radius:50%;background:linear-gradient(135deg, var(--turq) 0%, var(--turq-dark) 100%);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 8px 24px rgba(10,168,168,.3);}
.qm-score-number{font-size:2rem;font-weight:700;font-family:'Fraunces',serif;}
.qm-score-label{font-size:0.8rem;font-weight:600;}
.qm-results h3{font-size:1.2rem;margin-bottom:18px;color:var(--ink);}
.qm-retry-btn, .qm-back-btn{padding:9px 18px;border-radius:10px;font-weight:600;cursor:pointer;font-size:0.88rem;transition:all .2s;border:2px solid transparent;margin:4px;}
.qm-retry-btn{background:var(--turq);color:white;border-color:var(--turq);}
.qm-retry-btn:hover{background:var(--turq-dark);border-color:var(--turq-dark);}
.qm-back-btn{background:var(--soft);color:var(--ink);}
.qm-back-btn:hover{background:var(--line);}

/* Word Translation Tooltip */
.translatable-word{
  cursor:pointer;
  padding:2px 0;
  border-bottom:1px dotted var(--turq-mid);
  transition:all .15s;
  color:var(--ink);
}
.translatable-word:hover{
  background:var(--turq-soft);
  border-bottom-color:var(--turq);
  color:var(--turq-dark);
  border-radius:3px;
  padding:2px 4px;
}
.word-tooltip{
  position:absolute;
  background:var(--white);
  border:1.5px solid var(--turq);
  border-radius:12px;
  padding:12px 36px 12px 14px;
  box-shadow:0 4px 20px rgba(10,168,168,.25);
  z-index:1000;
  min-width:220px;
  max-width:320px;
  opacity:0;
  transform:translateY(-5px);
  transition:all .2s;
}
.word-tooltip.visible{
  opacity:1;
  transform:translateY(0);
}
.word-tooltip::before{
  content:'';
  position:absolute;
  width:0;
  height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:8px solid var(--turq);
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
}
.wt-word{
  font-family:'Fraunces',serif;
  font-size:1.1rem;
  font-weight:700;
  color:var(--turq-dark);
  margin-bottom:8px;
  padding-bottom:8px;
  border-bottom:1.5px solid var(--border);
}
.wt-case{
  font-size:0.85rem;
  font-weight:600;
  color:var(--mid);
  font-family:'Nunito',sans-serif;
}
.wt-translation{
  font-size:0.9rem;
  color:var(--ink);
  line-height:1.4;
  margin-bottom:8px;
}
.wt-lemma{
  font-size:0.88rem;
  color:var(--turq-dark);
  margin-bottom:10px;
  font-weight:600;
  font-family:'Fraunces',serif;
}
.wt-nom{
  font-size:0.8rem;
  font-weight:600;
  color:var(--mid);
  font-family:'Nunito',sans-serif;
}
.wt-speak{
  background:var(--turq-soft);
  border:1.5px solid var(--turq-mid);
  color:var(--turq-dark);
  padding:6px 12px;
  border-radius:8px;
  font-size:0.82rem;
  font-weight:600;
  cursor:pointer;
  transition:all .18s;
  width:100%;
  font-family:'Nunito',sans-serif;
}
.wt-speak:hover{
  background:var(--turq);
  color:white;
  border-color:var(--turq);
}
.wt-close{
  position:absolute;
  top:8px;
  right:8px;
  background:transparent;
  border:none;
  color:var(--mid);
  font-size:1.1rem;
  cursor:pointer;
  padding:4px;
  line-height:1;
  transition:all .15s;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
}
.wt-close:hover{
  background:var(--coral-soft);
  color:var(--coral);
}

/* Sentence Translation Tooltip */
.translatable-sentence{
  cursor:help;
  position:relative;
  display:inline;
}
.sentence-tooltip{
  position:absolute;
  background:var(--white);
  border:1.5px solid var(--yell);
  border-radius:12px;
  padding:14px 40px 14px 16px;
  box-shadow:0 4px 20px rgba(232,192,8,.25);
  z-index:999;
  min-width:280px;
  max-width:500px;
  opacity:0;
  transform:translateY(-5px);
  transition:all .2s;
}
.sentence-tooltip.visible{
  opacity:1;
  transform:translateY(0);
}
.st-czech{
  font-family:'Fraunces',serif;
  font-size:0.95rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:8px;
  padding-bottom:8px;
  border-bottom:1.5px solid var(--border);
  line-height:1.5;
  padding-right:8px;
}
.st-english{
  font-size:0.88rem;
  color:var(--mid);
  line-height:1.5;
  padding-right:8px;
}
.st-close{
  position:absolute;
  top:8px;
  right:8px;
  background:transparent;
  border:none;
  color:var(--mid);
  font-size:1.1rem;
  cursor:pointer;
  padding:4px;
  line-height:1;
  transition:all .15s;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
}
.st-close:hover{
  background:var(--coral-soft);
  color:var(--coral);
}

.cases-hero{text-align:center;padding:20px 0 24px;position:relative;}
.cases-hero-icon{font-size:3rem;margin-bottom:8px;}
.cases-hero-title{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700;color:var(--ink);margin:0 0 8px;}
.cases-hero-title em{font-style:normal;color:var(--turq);}
.cases-hero-sub{font-size:.88rem;color:var(--mid);max-width:380px;margin:0 auto;line-height:1.5;}
.cases-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* Case card on overview */
.case-card{background:var(--white);border-radius:18px;padding:16px;box-shadow:var(--s1);cursor:pointer;border:2px solid transparent;transition:all .2s;position:relative;overflow:hidden;}
.case-card:active{transform:scale(.97);}
.case-card-color-bar{position:absolute;top:0;left:0;right:0;height:4px;border-radius:18px 18px 0 0;}
.case-card-emoji{font-size:1.6rem;margin-bottom:6px;}
.case-card-name{font-family:'Fraunces',serif;font-size:.95rem;font-weight:700;color:var(--ink);}
.case-card-cz{font-size:.7rem;color:var(--mid);margin-bottom:8px;}
.case-card-q{font-size:.75rem;font-weight:700;color:var(--turq-dark);background:var(--turq-soft);border-radius:6px;padding:3px 8px;display:inline-block;margin-bottom:10px;}
.case-card-prog{display:flex;align-items:center;gap:6px;}
.case-card-bar{flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.case-card-fill{height:100%;border-radius:3px;background:var(--turq);transition:width .4s;}
.case-card-pct{font-size:.68rem;font-weight:700;color:var(--mid);}
.case-card-stars{font-size:.75rem;}
.case-card-locked{opacity:.55;}
/* ── Case Detail ── */
.cd-header{margin-bottom:20px;}
.cd-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;font-size:.8rem;font-weight:700;color:#fff;margin-bottom:12px;}
.cd-title{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;color:var(--ink);margin:0 0 4px;}
.cd-cz{font-size:.82rem;color:var(--mid);margin-bottom:10px;}
.cd-q-pill{font-size:.85rem;font-weight:700;background:var(--turq-soft);color:var(--turq-dark);border-radius:8px;padding:5px 12px;display:inline-block;margin-bottom:16px;}
/* Tabs */
.cd-tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:2px solid var(--border);padding-bottom:0;}
.cd-tab{padding:9px 16px;font-size:.83rem;font-weight:700;cursor:pointer;border:none;background:none;color:var(--mid);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;}
.cd-tab.active{color:var(--turq);border-bottom-color:var(--turq);}
/* Explanation */
.cd-explanation{font-size:.88rem;color:var(--ink);line-height:1.65;}
.cd-explanation h3{font-family:'Fraunces',serif;font-size:1.1rem;color:var(--ink);margin:0 0 10px;}
.cd-explanation h4{font-size:.85rem;font-weight:700;color:var(--turq-dark);margin:16px 0 6px;}
.cd-explanation p{margin:0 0 10px;}
.tip-box{background:var(--turq-soft);border-left:4px solid var(--turq);border-radius:0 10px 10px 0;padding:12px 14px;margin:12px 0;font-size:.84rem;color:var(--ink);line-height:1.55;}
/* Declension table */
.cd-table-wrap{overflow-x:auto;margin-bottom:16px;}
.cd-table{width:100%;border-collapse:collapse;font-size:.75rem;}
.cd-table th{background:var(--turq);color:#fff;padding:8px 10px;text-align:left;font-weight:700;font-size:.7rem;}
.cd-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top;}
.cd-table tr:nth-child(even) td{background:var(--bg);}
.cd-patterns{margin-top:14px;}
.cd-pat-title{font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--mid);letter-spacing:.4px;margin-bottom:8px;}
.cd-pat-row{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:.8rem;}
.cd-pat-label{font-weight:700;color:var(--turq-dark);min-width:140px;flex-shrink:0;}
.cd-pat-val{color:var(--ink);}
/* Level progress */
.cd-levels{display:flex;flex-direction:column;gap:10px;}
.cd-level-row{background:var(--white);border-radius:14px;padding:14px 16px;box-shadow:var(--s1);display:flex;align-items:center;gap:12px;cursor:pointer;border:2px solid transparent;transition:all .15s;}
.cd-level-row:active{transform:scale(.98);}
.cd-level-row.unlocked{border-color:var(--turq);}
.cd-level-row.locked{opacity:.5;cursor:not-allowed;}
.cd-level-row.completed{background:#f0faf0;border-color:#2e7d32;}
.cd-lev-num{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0;}
.cd-lev-num.done{background:#2e7d32;color:#fff;}
.cd-lev-num.active{background:var(--turq);color:#fff;}
.cd-lev-num.locked{background:var(--border);color:var(--mid);}
.cd-lev-info{flex:1;}
.cd-lev-name{font-weight:700;font-size:.88rem;color:var(--ink);}
.cd-lev-desc{font-size:.75rem;color:var(--mid);margin-top:2px;}
.cd-lev-score{font-size:.78rem;font-weight:700;color:var(--turq-dark);}
/* Exercise UI */
.cex-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.cex-back{background:none;border:none;font-size:.85rem;color:var(--mid);cursor:pointer;padding:4px 8px;}
.cex-progress-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.cex-progress-fill{height:100%;background:var(--turq);border-radius:3px;transition:width .3s;}
.cex-counter{font-size:.78rem;font-weight:700;color:var(--mid);}
.cex-card{background:var(--white);border-radius:18px;padding:22px 18px;box-shadow:var(--s1);margin-bottom:14px;}
.cex-type-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--turq-dark);margin-bottom:8px;}
.cex-question{font-size:1rem;font-weight:700;color:var(--ink);line-height:1.4;margin-bottom:16px;}
.cex-opts{display:flex;flex-direction:column;gap:8px;}
.cex-opt{padding:13px 16px;border-radius:12px;border:2px solid var(--border);background:var(--white);font-size:.9rem;font-weight:600;cursor:pointer;text-align:left;transition:all .15s;color:var(--ink);}
.cex-opt:active{transform:scale(.98);}
.cex-opt.selected{border-color:var(--turq);background:var(--turq-soft);}
.cex-opt.correct{border-color:#2e7d32;background:#f1f8e9;color:#2e7d32;}
.cex-opt.wrong{border-color:#c62828;background:#ffebee;color:#c62828;}
.cex-fill-row{display:flex;gap:8px;}
.cex-fill-inp{flex:1;padding:13px 16px;border-radius:12px;border:2px solid var(--border);font-size:1rem;font-family:'Nunito',sans-serif;color:var(--ink);background:var(--white);outline:none;transition:border .15s;}
.cex-fill-inp:focus{border-color:var(--turq);}
.cex-fill-inp.correct{border-color:#2e7d32;background:#f1f8e9;}
.cex-fill-inp.wrong{border-color:#c62828;background:#ffebee;}
.cex-check-btn{padding:13px 20px;border-radius:12px;background:var(--turq);color:#fff;border:none;font-weight:700;cursor:pointer;font-size:.9rem;}
.cex-hint{background:var(--turq-soft);border-radius:10px;padding:10px 14px;font-size:.82rem;color:var(--ink);margin-top:8px;display:none;line-height:1.5;}
.cex-hint.show{display:block;}
.cex-feedback{text-align:center;padding:10px 0;font-size:.92rem;font-weight:700;min-height:28px;}
.cex-feedback.ok{color:#2e7d32;}
.cex-feedback.bad{color:#c62828;}
.cex-actions{display:flex;gap:8px;margin-top:4px;}
.cex-hint-btn{flex:1;padding:11px;border-radius:12px;border:2px solid var(--border);background:var(--white);font-size:.82rem;font-weight:700;cursor:pointer;color:var(--ink);}
.cex-next-btn{flex:2;padding:11px;border-radius:12px;background:var(--turq);color:#fff;border:none;font-weight:700;font-size:.9rem;cursor:pointer;display:none;}
/* Result screen */
.cex-result{text-align:center;padding:32px 16px;}
.cex-result h3{font-family:'Fraunces',serif;font-size:1.5rem;margin-bottom:8px;}
.cex-result-stars{font-size:2rem;margin-bottom:12px;}
.cex-result-score{font-size:1rem;color:var(--mid);margin-bottom:20px;}
.cex-result-pills{display:flex;gap:10px;justify-content:center;margin-bottom:24px;}
.cex-result-pill{padding:7px 18px;border-radius:20px;font-size:.82rem;font-weight:700;}
.cex-result-pill.ok{background:#e8f5e9;color:#2e7d32;}
.cex-result-pill.bad{background:#ffebee;color:#c62828;}
/* Dark mode */
body.dark .case-card{background:#0a2020;border-color:#1a4040;}
body.dark .cd-level-row{background:#0a2020;}
body.dark .cex-card{background:#0a2020;}
body.dark .cex-opt{background:#0a2020;border-color:#1a4040;color:#d0eaea;}
body.dark .cex-fill-inp{background:#0a2020;border-color:#1a4040;color:#d0eaea;}
body.dark .cd-table td{border-color:#1a4040;}
body.dark .cd-pat-row{border-color:#1a4040;}

/* ── Czech Mode pill ── */
.cz-mode-pill{margin-left:auto;padding:2px 8px;border-radius:8px;font-size:.7rem;font-weight:700;background:var(--turq-soft);color:var(--turq-dark);}
body.cz-mode .cz-mode-pill{background:var(--turq);color:#fff;}
/* ── Review Dashboard ── */
.rev-wrap{padding:10px 10px 80px;}
.rev-hero{text-align:center;padding:16px 0 20px;position:relative;}
.rev-hero-title{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;color:var(--ink);}
.rev-hero-sub{font-size:.85rem;color:var(--mid);margin-top:4px;}
.rev-section{margin-bottom:20px;}
.rev-section-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--mid);margin-bottom:10px;}
.rev-card{background:var(--white);border-radius:16px;padding:16px;box-shadow:var(--s1);margin-bottom:10px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .15s;border:2px solid transparent;}
.rev-card:active{transform:scale(.98);}
.rev-card.urgent{border-color:var(--yell);}
.rev-card-icon{font-size:1.8rem;flex-shrink:0;}
.rev-card-info{flex:1;}
.rev-card-title{font-weight:700;font-size:.92rem;color:var(--ink);}
.rev-card-sub{font-size:.78rem;color:var(--mid);margin-top:2px;}
.rev-card-badge{padding:4px 10px;border-radius:10px;font-size:.72rem;font-weight:700;background:var(--turq-soft);color:var(--turq-dark);flex-shrink:0;}
.rev-card-badge.red{background:#ffebee;color:#c62828;}
.rev-card-badge.green{background:#e8f5e9;color:#2e7d32;}
.rev-empty{text-align:center;padding:32px 16px;color:var(--mid);}
.rev-empty-icon{font-size:2.5rem;margin-bottom:8px;}
.rev-streak-banner{background:linear-gradient(135deg,var(--turq),var(--turq-dark));color:#fff;border-radius:16px;padding:16px 20px;margin-bottom:20px;display:flex;align-items:center;gap:14px;}
.rev-streak-num{font-family:'Fraunces',serif;font-size:2rem;font-weight:700;}
.rev-streak-label{font-size:.82rem;opacity:.85;}

/* ══════════════════════════════════════════════════════════════
   SPEAKER TRAINER
   ═══════════════════════════════════════════════════════════ */
.st-wrap{max-width:100%;margin:0 auto;padding:10px 10px 100px;}
.st-filters{margin-bottom:12px;}
.st-level-filters{margin-bottom:12px;}
.st-subcat-filters{margin-bottom:16px;}
.st-scroll-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 0;scrollbar-width:none;}
.st-scroll-wrap::-webkit-scrollbar{display:none;}
.st-scroll-wrap .pill-row{flex-wrap:nowrap;margin-bottom:0;display:flex;gap:7px;}

.st-card{background:var(--white);border-radius:18px;padding:20px;box-shadow:var(--s1);margin-bottom:20px;}
.st-item-display{text-align:center;padding:20px 0;margin-bottom:20px;border-bottom:1.5px solid var(--border);}
.st-czech-text{font-family:'Fraunces',serif;font-size:1.8rem;font-weight:700;color:var(--ink);margin-bottom:8px;line-height:1.2;}
.st-english-text{font-size:.92rem;color:var(--mid);font-style:italic;}

.st-controls{display:flex;gap:10px;margin-bottom:20px;}
.st-btn{flex:1;border:none;border-radius:12px;padding:14px 16px;font-family:'Nunito',sans-serif;font-weight:700;font-size:.88rem;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:8px;}
.st-btn:disabled{opacity:.4;cursor:not-allowed;}
.st-record-btn{background:var(--coral);color:#fff;}
.st-record-btn:hover:not(:disabled){background:var(--coral-dark);transform:translateY(-2px);box-shadow:var(--s1);}
.st-record-btn:active:not(:disabled){transform:scale(.95);}
.st-record-btn.recording{background:var(--coral-dark);animation:pulse 1.5s infinite;}
.st-play-btn{background:var(--turq-soft);color:var(--turq-dark);border:1.5px solid var(--turq);}
.st-play-btn:hover{background:var(--turq);color:#fff;transform:translateY(-2px);box-shadow:var(--s1);}
.st-btn-icon{font-size:1.1rem;}
.st-btn-text{font-size:.88rem;}

.st-results{padding-top:16px;border-top:1.5px solid var(--border);}
.st-result-header{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
.st-comparison-btns{display:flex;gap:10px;margin-bottom:16px;}
.st-comp-btn{flex:1;border:2px solid var(--border);background:var(--white);border-radius:12px;padding:12px 14px;font-family:'Nunito',sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:8px;}
.st-comp-btn:hover{background:var(--bg2);transform:translateY(-2px);box-shadow:var(--s1);}
.st-comp-btn:active{transform:scale(.95);}
.st-comp-correct{border-color:var(--turq);color:var(--turq-dark);}
.st-comp-correct:hover{background:var(--turq-soft);}
.st-comp-icon{font-size:1.1rem;}
.st-comp-text{font-size:.85rem;}
.st-accuracy-circle{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;border:4px solid var(--border);flex-shrink:0;}
.st-accuracy-circle.excellent{background:var(--lime-soft);border-color:var(--lime);color:var(--lime);}
.st-accuracy-circle.good{background:var(--turq-soft);border-color:var(--turq);color:var(--turq-dark);}
.st-accuracy-circle.fair{background:var(--yell-soft);border-color:var(--yell);color:var(--yell);}
.st-accuracy-circle.poor{background:var(--coral-soft);border-color:var(--coral);color:var(--coral);}
.st-accuracy-value{font-size:1.4rem;}
.st-result-info{flex:1;}
.st-result-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--mid);margin-bottom:4px;}
.st-recognized-text{font-size:.95rem;font-weight:600;color:var(--ink);}
.st-feedback{background:var(--bg2);border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:.85rem;color:var(--mid);line-height:1.5;}
.st-next-btn{width:100%;background:var(--turq);color:#fff;}
.st-next-btn:hover{background:var(--turq-dark);transform:translateY(-2px);box-shadow:var(--s1);}
.st-tricky-btn{width:100%;background:var(--yell-soft);color:var(--yell);border:2px solid var(--yell);}
.st-tricky-btn:hover{background:var(--yell);color:#fff;}

.st-recording-indicator{text-align:center;padding:20px;background:var(--coral-soft);border-radius:12px;margin-top:16px;}
.st-rec-waveform{display:flex;justify-content:center;align-items:center;gap:4px;height:60px;margin-bottom:12px;}
.st-wave-bar{width:6px;background:var(--coral);border-radius:3px;animation:wave 0.8s ease-in-out infinite;}
.st-wave-bar:nth-child(1){animation-delay:0s;height:20px;}
.st-wave-bar:nth-child(2){animation-delay:0.1s;height:35px;}
.st-wave-bar:nth-child(3){animation-delay:0.2s;height:50px;}
.st-wave-bar:nth-child(4){animation-delay:0.3s;height:35px;}
.st-wave-bar:nth-child(5){animation-delay:0.4s;height:20px;}
.st-rec-text{font-weight:700;color:var(--coral);font-size:.92rem;margin-bottom:6px;}
.st-rec-level{font-size:.8rem;color:var(--coral-dark);font-weight:600;}

@keyframes wave{
  0%, 100%{height:20px;}
  50%{height:55px;}
}

@keyframes goalPulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.05);}
  100%{transform:scale(1);}
}

@keyframes pulse{
  0%, 100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.1);opacity:.7;}
}

.st-stats{display:flex;gap:10px;justify-content:space-around;}
.st-stat-item{text-align:center;flex:1;background:var(--bg2);border-radius:12px;padding:14px 10px;}
.st-stat-value{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700;color:var(--turq-dark);margin-bottom:4px;}
.st-stat-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--mid);}

.st-daily-goal{background:linear-gradient(135deg,var(--turq-soft),var(--lime-soft));border-radius:12px;padding:16px;margin-top:16px;}
.st-goal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.st-goal-title{font-weight:700;font-size:.92rem;color:var(--ink);}
.st-goal-count{font-weight:700;font-size:.88rem;color:var(--turq-dark);}
.st-goal-bar{height:12px;background:var(--white);border-radius:6px;overflow:hidden;margin-bottom:8px;}
.st-goal-progress{height:100%;background:linear-gradient(90deg,var(--turq),var(--lime));border-radius:6px;transition:width .3s ease;}
.st-goal-message{font-size:.8rem;color:var(--mid);text-align:center;font-weight:600;}
.st-goal-complete{animation:goalPulse .5s ease;}

.st-history-btn{width:100%;margin-top:16px;padding:14px;border-radius:12px;border:2px dashed var(--border);background:transparent;font-family:'Nunito',sans-serif;font-weight:700;font-size:.88rem;color:var(--mid);cursor:pointer;transition:all .18s;}
.st-history-btn:hover{border-color:var(--turq);color:var(--turq-dark);background:var(--turq-soft);}

.st-history-panel{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;}
.st-history-card{background:var(--white);border-radius:16px;max-width:500px;width:100%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.2);}
.st-history-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1.5px solid var(--border);flex-shrink:0;}
.st-history-header h3{font-family:'Fraunces',serif;font-size:1.3rem;margin:0;color:var(--ink);}
.st-history-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--mid);padding:0;width:32px;height:32px;border-radius:8px;transition:all .15s;}
.st-history-close:hover{background:var(--bg2);color:var(--ink);}
.st-history-list{flex:1;overflow-y:auto;padding:16px 20px;}
.st-history-item{background:var(--bg2);border-radius:12px;padding:12px 14px;margin-bottom:10px;}
.st-history-text{font-weight:700;color:var(--ink);margin-bottom:4px;}
.st-history-meta{font-size:.75rem;color:var(--mid);display:flex;gap:12px;flex-wrap:wrap;}
.st-history-accuracy{font-weight:700;}
.st-history-accuracy.excellent{color:var(--lime);}
.st-history-accuracy.good{color:var(--turq-dark);}
.st-history-accuracy.fair{color:var(--yell);}
.st-history-accuracy.poor{color:var(--coral);}
.st-history-empty{text-align:center;padding:40px 20px;color:var(--mid);font-size:.88rem;}

/* Dark mode */
body.dark .st-card{background:#0d2020;border-color:#1a3535;}
body.dark .st-item-display{border-bottom-color:#1a3535;}
body.dark .st-results{border-top-color:#1a3535;}
body.dark .st-feedback{background:#0a1a1a;}
body.dark .st-stat-item{background:#0a1a1a;}
body.dark .st-comp-btn{background:#0d2020;border-color:#1a3535;}
body.dark .st-comp-btn:hover{background:#1a3535;}
body.dark .st-daily-goal{background:linear-gradient(135deg,#0a1a1a,#1a3535);}
body.dark .st-goal-bar{background:#0a1a1a;}
body.dark .st-history-panel{background:rgba(0,0,0,.8);}
body.dark .st-history-card{background:#0d2020;}
body.dark .st-history-header{border-bottom-color:#1a3535;}
body.dark .st-history-header h3{color:#fff;}
body.dark .st-history-item{background:#0a1a1a;}

/* ── Grammar case button ── */
.case-drill-btn{background:var(--turq-soft);color:var(--turq-dark);border:2px solid var(--turq);border-radius:10px;padding:10px 16px;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s;}
.case-drill-btn:active{background:var(--turq);color:#fff;}
body.dark .rev-card{background:#0a2020;}
body.dark .rev-streak-banner{background:linear-gradient(135deg,#087878,#065858);}

/* ── DARK MODE: additional component overrides ── */
body.dark .vsrs-count-pill.due{background:#2A1200;color:#FF8C42;}
body.dark .vsrs-count-pill.new{background:#0A2010;color:#66BB6A;}
body.dark .vsrs-btn.hard{background:#2A1800;color:#FF8C42;border-color:#4A2800;}
body.dark .vsrs-btn.easy{background:#0A1828;color:#64B5F6;border-color:#0A2840;}
body.dark .rev-card-badge.green{background:#0A2010;color:#66BB6A;border-color:#1A4020;}
body.dark .rev-card-badge.red{background:#2A0A0A;color:#EF5350;border-color:#4A1A1A;}
body.dark .cex-fill-inp.correct{border-color:#2e7d32;background:#0A2010;}
body.dark .cex-fill-inp.wrong{border-color:#c62828;background:#2A0A0A;}
body.dark .cd-level-row.completed{background:#0A2828;border-color:var(--turq-dark);}
body.dark .cons-card.special{background:#1A1400;border-color:var(--yell);}
body.dark .cons-card.warning{background:#1A0C00;border-color:#E85C08;}
body.dark .cons-badge.tricky{background:#2A1800;color:#FF8C42;}
body.dark .vwm-save-btn.on{background:#2A0A10;border-color:#f88;color:#f88;}
body.dark .vwm-save-btn.trick.on{background:#1A1200;border-color:var(--yell);color:var(--yell2);}
body.dark .vsrs-count-pill{background:#0a2828;color:var(--turq2);}
body.dark .lp-pill{background:#0a2828;border-color:#1a4040;color:#d0eaea;}
body.dark .lp-pill.on{background:var(--turq-dark);border-color:var(--turq);}
body.dark .pron-tab{background:#0a2828;color:#7AACAC;}
body.dark .pron-tab.on{background:var(--turq-dark);color:#fff;}
body.dark .alpha-card{background:#0a2020;border-color:#1a4040;}
body.dark .vowel-card{background:#0a2020;border-color:#1a4040;}
body.dark .cons-card{background:#0a2020;border-color:#1a4040;}
body.dark .rule-card{background:#0a2020;border-color:#1a4040;}
body.dark .rhythm-card{background:#0a2020;border-color:#1a4040;}
body.dark .decl-block{background:#0a2020;border-color:#1a4040;}
body.dark .decl-block-header:hover{background:#0c2828;}
body.dark .dc-tab{background:#0a2828;color:#7AACAC;}
body.dark .dc-tab.on{background:var(--turq-dark);color:#fff;}
body.dark .lp-card-sub{color:var(--mid);}
body.dark .lp-card-hours{color:var(--mid);}
body.dark .home-stat-val{color:var(--turq2);}
body.dark .fc-card{background:#0a2020;border-color:#1a4040;}
body.dark .fc-q{color:#d0eaea;}
body.dark .favs-wrap{background:#0a2020;}
body.dark .phrase-row{background:#0a2020;border-color:#1a4040;}
body.dark .phrase-cz{color:#d0eaea;}
body.dark .quiz-q-card{background:#0a2020;border-color:#1a4040;}
body.dark .quiz-opt{background:#0a2828;border-color:#1a4040;color:#d0eaea;}
body.dark .quiz-opt:hover{background:#0a3535;border-color:var(--turq);}
body.dark .sb-word{background:#0a2828;border-color:#1a4040;color:#d0eaea;}
body.dark .ex-fill{background:#0a2020;border-color:#1a4040;color:#d0eaea;}
body.dark .czKbd{background:#0a2020;border-top:2px solid #1a4040;}
body.dark .czKbd-btn{background:#0a2828;border-color:#1a4040;color:#d0eaea;}
body.dark .czKbd-btn:hover{background:#0a3535;}
body.dark .np-card{background:#0a2020;border-color:#1a4040;}
body.dark .np-pattern-name{color:var(--turq2);}
body.dark .gram-table th{background:var(--turq-dark);color:#fff;}
body.dark .gram-table td{color:#d0eaea;border-color:#1a4040;}
body.dark .search-bar{background:#0a2020;border-color:#1a4040;color:#d0eaea;}
body.dark input[type="text"],body.dark input[type="search"]{background:#0a2020;color:#d0eaea;border-color:#1a4040;}
body.dark .tab-bar{background:#0a1c1c;border-top:1.5px solid #1a4040;}
body.dark .tab-btn{color:#7AACAC;}
body.dark .tab-btn.on{color:var(--turq2);}
body.dark .lp-divider-line{background:linear-gradient(90deg,transparent,#1a4040,transparent);}
body.dark .sec-title{color:var(--turq2);}
body.dark .quiz-score{background:#0a2020;border-color:#1a4040;}
body.dark .quiz-score-n{color:var(--turq2);}
body.dark select{background:#0a2020;color:#d0eaea;border-color:#1a4040;}
body.dark .ckbd-toolbar{background:#0a2020;border-top:2px solid #1a4040;}



/* ── PRONUNCIATION SECTION ── */
.pron-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;}
.pron-tab{padding:7px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg2);color:var(--mid);font-size:.75rem;font-weight:700;cursor:pointer;transition:all .15s;}
.pron-tab.active{background:var(--turq);color:#fff;border-color:var(--turq);}
.pron-intro{font-size:.8rem;color:var(--mid);margin-bottom:12px;line-height:1.5;}
.pron-section{display:none;}
.pron-section.active{display:block;}
.vowel-pair{display:flex;gap:8px;margin-bottom:10px;align-items:stretch;}
.vowel-card{flex:1;background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;padding:12px;text-align:center;cursor:pointer;transition:all .15s;}
.vowel-card:active{background:var(--turq-soft);}
.vowel-card.long-card{border-color:var(--turq-mid);background:var(--turq-soft);}
.vowel-letter{font-family:'Fraunces',serif;font-size:2rem;font-weight:700;color:var(--ink);}
.vowel-ipa{font-size:.8rem;color:var(--turq-dark);font-weight:700;margin:2px 0;}
.vowel-desc{font-size:.7rem;color:var(--mid);}
.vowel-ex{font-size:.7rem;color:var(--ink);font-style:italic;margin-top:4px;}
.vowel-pair-label{font-size:.65rem;font-weight:800;color:var(--mid);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.cons-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;cursor:pointer;}
.cons-card.special{border-color:var(--yell);background:#FFFBEB;}
.cons-card.warning{border-color:#E85C08;background:#FFF3EE;}
.cons-header{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.cons-letter{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700;color:var(--ink);min-width:36px;}
.cons-ipa{font-size:.82rem;color:var(--turq-dark);font-weight:700;}
.cons-badge{font-size:.65rem;padding:2px 7px;border-radius:10px;font-weight:800;}
.cons-badge.unique{background:var(--yell2);color:var(--ink);}
.cons-badge.tricky{background:#FFD4C4;color:#8B2500;}
.cons-badge.voiced{background:#D0F5F5;color:var(--turq-dark);}
.cons-desc{font-size:.78rem;color:var(--ink);line-height:1.5;}
.cons-tips{margin-top:8px;}
.cons-tip{font-size:.73rem;color:var(--mid);display:flex;gap:6px;margin-bottom:3px;}
.cons-tip::before{content:'→';color:var(--turq);font-weight:700;flex-shrink:0;}
.cons-examples{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.cons-ex-pill{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:4px 9px;font-size:.72rem;cursor:pointer;}
.cons-ex-cz{font-weight:700;color:var(--ink);}
.cons-ex-en{color:var(--mid);}
.rhythm-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;}
.rhythm-title{font-family:'Fraunces',serif;font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:8px;}
.rhythm-rule{font-size:.8rem;color:var(--ink);line-height:1.6;margin-bottom:6px;}
.rhythm-ex{background:var(--turq-soft);border-radius:8px;padding:8px 10px;margin-top:8px;}
.rhythm-cz{font-size:.85rem;font-weight:700;color:var(--ink);}
.rhythm-stress{font-size:.72rem;color:var(--turq-dark);margin-top:2px;}
.rhythm-en{font-size:.72rem;color:var(--mid);margin-top:2px;}


/* ── DECLENSION CHARTS BUTTON & OVERLAY ── */
.decl-charts-btn{
  margin-top:14px;padding:10px 20px;
  background:var(--turq);color:#fff;border:none;border-radius:24px;
  font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 2px 10px rgba(10,168,168,.3);
  transition:all .15s;
}
.decl-charts-btn:active{background:var(--turq-dark);}

/* ── DECLENSION TABLES ── */
.decl-tabs{display:flex;gap:0;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:16px;}
.decl-tab{flex:1;padding:9px 6px;text-align:center;font-size:.75rem;font-weight:700;cursor:pointer;background:var(--bg2);color:var(--mid);transition:all .18s;}
.decl-tab.active{background:var(--turq);color:#fff;}
.decl-block{margin-bottom:20px;background:var(--white);border:2px solid var(--turq-mid);border-radius:14px;overflow:hidden;}
.decl-block-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;cursor:pointer;user-select:none;transition:background .2s;}
.decl-block-header:hover{background:var(--bg2);}
.decl-block-title{font-family:'Fraunces',serif;font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:0;flex:1;}
.decl-block-toggle{font-size:1rem;color:var(--turq-dark);transition:transform .2s;line-height:1;}
.decl-block.collapsed .decl-block-toggle{transform:rotate(-90deg);}
.decl-block-content{padding:0 16px 12px;max-height:2000px;overflow:hidden;transition:max-height .3s ease, padding .3s ease;}
.decl-block.collapsed .decl-block-content{max-height:0;padding:0 16px;}
.decl-note{font-size:.75rem;color:var(--mid);margin-bottom:10px;line-height:1.45;}
.decl-table{width:100%;border-collapse:collapse;font-size:.78rem;}
.decl-table th{background:var(--turq-soft);color:var(--turq-dark);font-weight:700;padding:7px 8px;text-align:left;font-size:.72rem;border-bottom:2px solid var(--turq-mid);}
.decl-table td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:top;}
.decl-table tr:nth-child(even) td{background:var(--bg2);}
.decl-case-cell{font-weight:700;color:var(--ink);font-size:.73rem;white-space:nowrap;min-width:70px;}
.decl-case-full{font-size:.62rem;color:var(--mid);font-weight:400;}
.decl-case-num{display:inline-block;background:var(--turq);color:#fff;border-radius:4px;width:16px;height:16px;text-align:center;line-height:16px;font-size:.65rem;margin-right:4px;font-weight:800;flex-shrink:0;}
.decl-form-cell{color:var(--ink);font-size:.78rem;}

/* ══════════════════════════════════════════
   WORD OF THE DAY
══════════════════════════════════════════ */
.wotd-card{background:linear-gradient(135deg,var(--turq-dark) 0%,#065858 100%);border-radius:18px;padding:18px 20px 16px;margin-bottom:10px;color:#fff;position:relative;overflow:hidden;}
.wotd-card::before{content:'';position:absolute;top:-20px;right:-20px;width:100px;height:100px;background:rgba(255,255,255,.06);border-radius:50%;pointer-events:none;}
.wotd-label{font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:8px;}
.wotd-word-row{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.wotd-word{font-family:'Fraunces',serif;font-size:2rem;font-weight:700;line-height:1.1;flex:1;}
.wotd-audio{background:rgba(255,255,255,.2);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;transition:all .18s;flex-shrink:0;position:relative;z-index:2;}
.wotd-audio:hover{background:rgba(255,255,255,.3);transform:scale(1.05);}
.wotd-audio:active{transform:scale(0.95);}
.wotd-pronun{font-size:.82rem;opacity:.75;margin-bottom:10px;font-style:italic;}
.wotd-meaning{font-size:.92rem;font-weight:600;margin-bottom:6px;}
.wotd-example{font-size:.8rem;opacity:.82;line-height:1.5;margin-bottom:12px;padding:8px 10px;background:rgba(255,255,255,.1);border-radius:8px;}
.wotd-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.wotd-badge{font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:20px;background:rgba(255,255,255,.18);}
.wotd-btn{font-size:.75rem;font-weight:700;padding:5px 12px;border-radius:20px;background:var(--yell2);color:var(--ink);border:none;cursor:pointer;margin-left:auto;}
.wotd-seen{font-size:.7rem;opacity:.6;margin-top:6px;}

/* ══════════════════════════════════════════
   TODAY HUB — WEAK SPOTS + SRS DUE
══════════════════════════════════════════ */
.today-hub{margin-bottom:8px;}
.today-hub-title{font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.srs-due-strip{background:var(--white);border-radius:14px;border:1.5px solid var(--border);padding:14px 16px;margin-bottom:10px;}
.srs-due-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.srs-due-count{font-size:1.3rem;font-weight:800;color:var(--turq-dark);}
.srs-due-label{font-size:.75rem;color:var(--mid);}
.srs-due-btn{font-size:.78rem;font-weight:700;padding:7px 16px;background:var(--turq);color:#fff;border:none;border-radius:10px;cursor:pointer;}
.srs-due-items{display:flex;flex-direction:column;gap:6px;}
.srs-due-item{display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--bg);border-radius:9px;border:1px solid var(--border);cursor:pointer;}
.srs-due-item:hover{border-color:var(--turq);background:var(--turq-soft);box-shadow:var(--s1);transform:translateY(-2px);}
.srs-due-level{font-size:.65rem;font-weight:800;padding:2px 6px;border-radius:10px;background:var(--turq-soft);color:var(--turq-dark);}
.srs-due-title{font-size:.8rem;font-weight:600;color:var(--ink);flex:1;}
.srs-due-interval{font-size:.7rem;color:var(--mid);}
.srs-forecast{display:flex;gap:4px;margin-top:10px;}
.srs-fc-day{flex:1;text-align:center;}
.srs-fc-bar-wrap{height:32px;display:flex;align-items:flex-end;justify-content:center;}
.srs-fc-bar{width:16px;background:var(--turq-mid);border-radius:3px 3px 0 0;min-height:3px;transition:height .3s;}
.srs-fc-day.today .srs-fc-bar{background:var(--turq);}
.srs-fc-label{font-size:.6rem;color:var(--mid);margin-top:2px;}
.srs-fc-n{font-size:.65rem;font-weight:700;color:var(--ink);}

/* Weak spots */
.weak-strip{background:var(--white);border-radius:14px;border:1.5px solid var(--border);padding:14px 16px;margin-bottom:10px;}
.weak-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.weak-title{font-size:.88rem;font-weight:700;color:var(--ink);}
.weak-see-all{font-size:.72rem;color:var(--turq-dark);cursor:pointer;font-weight:600;}
.weak-card{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg);border-radius:9px;border:1px solid var(--border);margin-bottom:6px;cursor:pointer;}
.weak-card:hover{border-color:var(--coral);background:var(--coral-soft);box-shadow:var(--s1);transform:translateY(-2px);}
.weak-icon{font-size:1.3rem;flex-shrink:0;}
.weak-info{flex:1;min-width:0;}
.weak-label{font-size:.8rem;font-weight:700;color:var(--ink);}
.weak-sublabel{font-size:.7rem;color:var(--mid);margin-top:1px;}
.weak-pct{font-size:.82rem;font-weight:800;color:var(--coral);}
.weak-bar-wrap{height:4px;background:var(--border);border-radius:2px;margin-top:4px;}
.weak-bar{height:4px;border-radius:2px;background:var(--coral);}
.weak-empty{font-size:.8rem;color:var(--mid);text-align:center;padding:12px 0;}

/* Lesson heatmap */
.heatmap-wrap{margin-top:14px;}
.heatmap-title{font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:8px;}
.heatmap-grid{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;}
.hm-cell{height:14px;border-radius:2px;background:var(--border);cursor:pointer;transition:transform .15s;}
.hm-cell:hover{transform:scale(1.3);}
.hm-cell.good{background:#2e7d32;}
.hm-cell.ok{background:#f9a825;}
.hm-cell.bad{background:#c62828;}
.hm-cell.untried{background:var(--border);}
.hm-cell.due{box-shadow:0 0 0 2px var(--turq);}
.heatmap-legend{display:flex;gap:10px;margin-top:6px;font-size:.65rem;color:var(--mid);align-items:center;}
.hm-lg{width:10px;height:10px;border-radius:2px;display:inline-block;}

/* ══════════════════════════════════════════
   SENTENCE BUILDER — IMPROVED
══════════════════════════════════════════ */
.sb-level-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.sb-lvl-tab{font-size:.72rem;font-weight:700;padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg);color:var(--mid);cursor:pointer;transition:all .15s;}
.sb-lvl-tab.on{background:var(--turq);color:#fff;border-color:var(--turq);}
.sb-card{background:var(--white);border-radius:16px;border:1.5px solid var(--border);padding:18px 16px;margin-bottom:12px;}
.sb-label{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--turq-dark);margin-bottom:6px;}
.sb-english{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:8px;line-height:1.3;}
.sb-note{font-size:.75rem;color:var(--mid);background:var(--yell-soft);border:1px solid var(--yell-mid);border-radius:8px;padding:6px 10px;margin-bottom:12px;}
.sb-hint-btn{font-size:.72rem;color:var(--turq-dark);cursor:pointer;text-decoration:underline;margin-bottom:8px;display:inline-block;}
.sb-grammar-hint{font-size:.75rem;color:var(--mid);background:var(--turq-soft);border:1px solid var(--turq-mid);border-radius:8px;padding:7px 10px;margin-bottom:10px;display:none;}
.sb-drop-zone{min-height:48px;background:var(--bg);border:2px dashed var(--border);border-radius:12px;padding:8px 10px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;transition:border-color .2s;}
.sb-drop-zone.has-words{border-color:var(--turq-mid);border-style:solid;}
.sb-placeholder{font-size:.78rem;color:var(--mid);font-style:italic;}
.sb-zone-word{background:var(--turq);color:#fff;padding:6px 12px;border-radius:20px;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .15s;}
.sb-zone-word:hover{background:var(--turq-dark);}
.sb-zone-word.
.sb-word-bank{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.sb-word{background:var(--white);border:1.5px solid var(--border);color:var(--ink);padding:8px 14px;border-radius:20px;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .15s;user-select:none;}
.sb-word:hover{border-color:var(--turq);color:var(--turq-dark);}
.sb-word.placed{opacity:.4;pointer-events:none;}


.sb-check-btn{background:var(--turq);color:#fff;border:none;border-radius:12px;padding:11px 24px;font-size:.9rem;font-weight:700;cursor:pointer;width:100%;transition:all .15s;}
.sb-check-btn:hover{background:var(--turq-dark);}
.sb-result{font-size:.92rem;font-weight:700;text-align:center;padding:10px;border-radius:10px;margin-top:10px;display:none;}
.sb-result.correct{background:#e8f5e9;color:#2e7d32;}
.sb-result.wrong{background:#ffebee;color:#c62828;}
.sb-correct-ans{font-size:.82rem;color:var(--mid);text-align:center;margin-top:6px;display:none;}
.sb-why{font-size:.78rem;background:var(--turq-soft);border:1px solid var(--turq-mid);border-radius:8px;padding:8px 12px;margin-top:8px;color:var(--ink);display:none;line-height:1.5;}
.sb-next-btn{background:var(--white);border:1.5px solid var(--turq);color:var(--turq-dark);border-radius:12px;padding:10px 24px;font-size:.88rem;font-weight:700;cursor:pointer;width:100%;margin-top:10px;display:none;transition:all .15s;}
.sb-next-btn:hover{background:var(--turq-soft);}
.sb-score-bar{background:var(--turq-soft);border-radius:10px;padding:8px 14px;font-size:.82rem;font-weight:700;color:var(--turq-dark);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
.sb-streak{font-size:.78rem;color:var(--yell-deep,#7A6000);}
.sb-done-card{text-align:center;padding:24px 16px;background:var(--white);border-radius:16px;border:1.5px solid var(--border);}
.sb-done-score{font-family:'Fraunces',serif;font-size:2.5rem;font-weight:700;color:var(--turq-dark);}
.sb-progress-info{font-size:.8rem;color:var(--mid);margin:8px 0 16px;}
.sb-audio-btn{font-size:.75rem;padding:5px 12px;background:var(--turq-soft);color:var(--turq-dark);border:1px solid var(--turq-mid);border-radius:20px;cursor:pointer;margin-top:8px;}

/* ══════════════════════════════════════════
   SRS LESSON REVIEW SESSION
══════════════════════════════════════════ */
.srs-session-wrap{padding:16px;}
.srs-session-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.srs-session-title{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;}
.srs-session-prog{font-size:.78rem;color:var(--mid);}
.srs-rating-row{display:flex;gap:8px;margin-top:12px;}
.srs-rating-btn{flex:1;padding:10px 6px;border-radius:12px;border:none;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s;}
.srs-rating-btn.again{background:#ffebee;color:#c62828;}
.srs-rating-btn.hard{background:#fff3e0;color:#e65100;}
.srs-rating-btn.good{background:#e8f5e9;color:#2e7d32;}
.srs-rating-btn.easy{background:#e3f2fd;color:#1565c0;}
body.dark .srs-rating-btn.again{background:#2A0A0A;color:#EF5350;}
body.dark .srs-rating-btn.hard{background:#2A1200;color:#FF8C42;}
body.dark .srs-rating-btn.good{background:#0A2010;color:#66BB6A;}
body.dark .srs-rating-btn.easy{background:#0A1828;color:#64B5F6;}
body.dark .sb-result.correct{background:#0A2010;color:#66BB6A;}
body.dark .sb-result.wrong{background:#2A0A0A;color:#EF5350;}
body.dark .sb-word{background:var(--white);border-color:var(--border);color:var(--ink);}
body.dark .sb-card{background:var(--white);border-color:var(--border);}
body.dark .sb-drop-zone{background:var(--bg);}
body.dark .srs-due-item{background:var(--bg);}
body.dark .weak-card{background:var(--bg);}
body.dark .wotd-card{background:linear-gradient(135deg,#0a3535 0%,#052020 100%);}
body.dark .hm-cell.good{background:#2e7d32;}
body.dark .hm-cell.bad{background:#c62828;}

/* ── CZECH KEYBOARD TOOLBAR ── */
.cz-kbd{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:var(--white);border-top:2px solid var(--turq-mid);
  padding:8px 6px 10px;z-index:9000;
  flex-wrap:wrap;gap:5px;justify-content:center;
  box-shadow:0 -4px 20px rgba(10,168,168,.15);
}
.cz-kbd.active{ display:flex; }
.cz-key{
  min-width:38px;height:40px;padding:0 6px;
  background:var(--bg2);border:1.5px solid var(--border);
  border-radius:8px;font-size:1rem;font-weight:700;
  color:var(--ink);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:all .12s;
  font-family:'Nunito',sans-serif;
}
.cz-key:active{background:var(--turq-soft);border-color:var(--turq);}
.cz-key.cz-key-action{
  background:var(--turq-soft);border-color:var(--turq-mid);
  color:var(--turq-dark);font-size:.75rem;min-width:52px;
}
.cz-key.cz-key-close{
  background:#f5f5f5;border-color:#ddd;color:#888;font-size:.75rem;min-width:44px;
}

/* ── TOAST NOTIFICATION ── */
#czToast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#0AA8A8;color:#fff;padding:10px 20px;border-radius:24px;font-size:.82rem;
  font-weight:700;box-shadow:0 4px 16px rgba(0,0,0,.25);opacity:0;pointer-events:none;
  transition:all .3s;z-index:9999;white-space:nowrap;}
#czToast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── LESSON EXERCISE MODAL ── */
#lessonExModal{position:fixed;inset:0;z-index:8500;background:rgba(12,32,32,.7);
  backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;}
#lessonExModal.open{display:flex;}
.lex-sheet{background:var(--white);border-radius:20px;width:92%;max-width:560px;
  max-height:88vh;overflow-y:auto;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,.35);}
.lex-header{padding:16px 18px 12px;border-bottom:1.5px solid var(--border);position:sticky;top:0;
  background:var(--white);z-index:1;display:flex;align-items:center;gap:10px;}
.lex-title{font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:var(--ink);flex:1;}
.lex-prog-wrap{flex:1;height:7px;background:var(--border);border-radius:4px;overflow:hidden;}
.lex-prog-fill{height:100%;background:var(--turq);border-radius:4px;transition:width .4s;}
.lex-prog-label{font-size:.72rem;color:var(--mid);white-space:nowrap;}
.lex-close{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--mid);padding:4px;}
.lex-body{padding:16px 18px;flex:1;}
.lex-q-card{background:var(--bg);border-radius:14px;border:1.5px solid var(--border);padding:16px;margin-bottom:12px;}
.lex-q-num{font-size:.68rem;font-weight:800;color:var(--turq-dark);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.lex-q-text{font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:12px;line-height:1.4;}
.lex-opts{display:flex;flex-direction:column;gap:7px;}
.lex-opt{background:var(--white);border:1.5px solid var(--border);color:var(--ink);border-radius:10px;
  padding:10px 14px;font-size:.88rem;font-weight:600;cursor:pointer;text-align:left;transition:all .15s;}
.lex-opt:hover{border-color:var(--turq);background:var(--turq-soft);box-shadow:var(--s1);transform:translateY(-2px);}
.lex-opt.correct{background:#e8f5e9;border-color:#2e7d32;color:#2e7d32;}
.lex-opt.wrong{background:#ffebee;border-color:#c62828;color:#c62828;}
.lex-inp{width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid var(--border);
  background:var(--white);color:var(--ink);font-size:.9rem;font-family:'Nunito',sans-serif;}
.lex-inp.correct{border-color:#2e7d32;background:#e8f5e9;}
.lex-inp.wrong{border-color:#c62828;background:#ffebee;}
.lex-feedback{font-size:.82rem;font-weight:700;margin-top:8px;padding:6px 10px;border-radius:8px;}
.lex-feedback.ok{background:#e8f5e9;color:#2e7d32;}
.lex-feedback.no{background:#ffebee;color:#c62828;}
.lex-check-btn{background:var(--turq);color:#fff;border:none;border-radius:12px;
  padding:11px 24px;font-size:.9rem;font-weight:700;cursor:pointer;width:100%;margin-top:12px;}
.lex-next-btn{background:var(--white);border:1.5px solid var(--turq);color:var(--turq-dark);
  border-radius:12px;padding:10px 24px;font-size:.88rem;font-weight:700;cursor:pointer;
  width:100%;margin-top:8px;display:none;}
.lex-done-card{text-align:center;padding:28px 16px;}
.lex-done-emoji{font-size:3rem;margin-bottom:10px;}
.lex-done-score{font-family:'Fraunces',serif;font-size:2.2rem;font-weight:700;color:var(--turq-dark);}
.lex-done-msg{font-size:.9rem;color:var(--mid);margin:8px 0 20px;}
.lex-done-btn{background:var(--turq);color:#fff;border:none;border-radius:12px;
  padding:13px 28px;font-size:.95rem;font-weight:700;cursor:pointer;width:100%;}
.lex-done-next{background:var(--white);border:1.5px solid var(--turq);color:var(--turq-dark);
  border-radius:12px;padding:11px 24px;font-size:.9rem;font-weight:700;cursor:pointer;
  width:100%;margin-top:8px;}
body.dark .lex-sheet{background:var(--white);border-color:var(--border);}
body.dark .lex-header{background:var(--white);}
body.dark .lex-q-card{background:var(--bg);}
body.dark .lex-opt{background:var(--bg);border-color:var(--border);color:var(--ink);}
body.dark .lex-inp{background:var(--bg);color:var(--ink);border-color:var(--border);}
body.dark .lex-opt.correct{background:#0A2010;border-color:#2e7d32;color:#66BB6A;}
body.dark .lex-opt.wrong{background:#2A0A0A;border-color:#c62828;color:#EF5350;}
body.dark .lex-inp.correct{background:#0A2010;border-color:#2e7d32;}
body.dark .lex-inp.wrong{background:#2A0A0A;border-color:#c62828;}
body.dark .lex-feedback.ok{background:#0A2010;color:#66BB6A;}
body.dark .lex-feedback.no{background:#2A0A0A;color:#EF5350;}

/* Start exercises button on lesson */
.lex-start-btn{background:linear-gradient(135deg,var(--turq),var(--turq-dark));color:#fff;
  border:none;border-radius:14px;padding:14px 24px;font-size:.95rem;font-weight:700;
  cursor:pointer;width:100%;margin-top:16px;display:flex;align-items:center;
  justify-content:center;gap:8px;box-shadow:0 4px 16px rgba(10,168,168,.3);}
.lex-start-btn:hover{opacity:.92;}
.lex-start-btn.completed{background:var(--white);color:var(--turq-dark);
  border:2px solid var(--turq);box-shadow:none;}
.lex-start-btn.completed:hover{background:var(--turq-soft);}

/* ══════════════════════════════════════════
   APP TOUR / ONBOARDING WALKTHROUGH — Card-Based Visual Tour
══════════════════════════════════════════ */
#newTourOverlay{
  position:fixed;
  inset:0;
  background:rgba(12,32,32,0.96);
  backdrop-filter:blur(8px);
  z-index:9500;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:tourFadeIn 0.4s ease;
}
#newTourOverlay.active{ display:flex; }

@keyframes tourFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

.tour-card{
  background:var(--white);
  border-radius:24px;
  max-width:680px;
  width:100%;
  height:85vh;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:tourSlideUp 0.5s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
}

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

.tour-card-inner{
  padding:32px 36px 24px;
  text-align:center;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}

.tour-icon{
  font-size:3rem;
  line-height:1;
  margin-bottom:16px;
  animation:tourIconBounce 0.6s ease 0.2s;
  flex-shrink:0;
}

@keyframes tourIconBounce{
  0%{ transform:scale(0); }
  50%{ transform:scale(1.1); }
  100%{ transform:scale(1); }
}

.tour-step-badge{
  display:inline-block;
  font-size:0.65rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--turq-dark);
  background:var(--turq-soft);
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:12px;
  flex-shrink:0;
}

.tour-card-title{
  font-family:'Fraunces',serif;
  font-size:1.5rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:12px;
  line-height:1.2;
  flex-shrink:0;
}

.tour-card-body{
  font-size:0.82rem;
  color:var(--mid);
  line-height:1.55;
  margin-bottom:20px;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
  flex-shrink:0;
}

.tour-card-body strong{
  color:var(--ink);
  font-weight:700;
}

.tour-card-body em{
  color:var(--turq);
  font-style:normal;
  font-weight:600;
}

/* Visual mockup elements */
.tour-visual{
  margin:16px auto;
  max-width:450px;
  flex-shrink:0;
}

.tour-mockup-levels{
  display:flex;
  gap:6px;
  justify-content:center;
  flex-wrap:wrap;
  margin:16px 0;
}

.tour-level-pill{
  background:linear-gradient(135deg,var(--turq2),var(--turq));
  color:white;
  padding:7px 12px;
  border-radius:10px;
  font-weight:700;
  font-size:0.8rem;
  box-shadow:0 4px 12px rgba(10,168,168,0.25);
  transition:transform 0.2s;
}

.tour-level-pill:hover{
  transform:translateY(-2px);
}

.tour-mockup-card{
  background:var(--bg);
  border:2px solid var(--border);
  border-radius:14px;
  padding:14px;
  margin:12px auto;
  max-width:380px;
  text-align:left;
}

.tour-mockup-title{
  font-weight:700;
  color:var(--ink);
  margin-bottom:6px;
  font-size:0.9rem;
}

.tour-mockup-text{
  color:var(--mid);
  font-size:0.8rem;
  line-height:1.5;
}

.tour-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:16px 0;
}

.tour-feature-item{
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:12px 10px;
  text-align:center;
}

.tour-feature-icon{
  font-size:1.6rem;
  margin-bottom:4px;
}

.tour-feature-label{
  font-size:0.72rem;
  font-weight:600;
  color:var(--ink);
}

/* Navigation */
.tour-nav{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px 36px 24px;
  border-top:1.5px solid var(--border2);
  flex-shrink:0;
  background:var(--white);
}

.tour-nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.tour-skip-btn{
  background:none;
  border:none;
  color:var(--mid);
  font-size:0.8rem;
  cursor:pointer;
  text-decoration:underline;
  padding:6px 0;
  transition:color 0.2s;
}

.tour-skip-btn:hover{
  color:var(--ink);
}

.tour-nav-buttons{
  display:flex;
  gap:10px;
  align-items:center;
}

.tour-btn-prev{
  background:var(--bg);
  border:1.5px solid var(--border);
  color:var(--ink);
  padding:8px 16px;
  border-radius:12px;
  font-size:0.82rem;
  font-weight:700;
  cursor:pointer;
  transition:all 0.2s;
}

.tour-btn-prev:hover{
  background:var(--bg2);
  transform:translateX(-2px);
}

.tour-btn-next{
  background:linear-gradient(135deg,var(--turq2),var(--turq));
  border:none;
  color:white;
  padding:8px 20px;
  border-radius:12px;
  font-size:0.82rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(10,168,168,0.3);
  transition:all 0.2s;
}

.tour-btn-next:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(10,168,168,0.4);
}

.tour-dots{
  display:flex;
  gap:6px;
  justify-content:center;
}

.tour-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--border);
  transition:all 0.3s;
  cursor:pointer;
}

.tour-dot.active{
  background:var(--turq);
  width:22px;
  border-radius:4px;
}

/* Mobile responsive */
@media(max-width:640px){
  .tour-card{
    height:88vh;
  }
  
  .tour-card-inner{
    padding:24px 20px 20px;
  }
  
  .tour-card-title{
    font-size:1.3rem;
    margin-bottom:10px;
  }
  
  .tour-card-body{
    font-size:0.8rem;
    line-height:1.5;
    margin-bottom:16px;
  }
  
  .tour-icon{
    font-size:2.5rem;
    margin-bottom:12px;
  }
  
  .tour-step-badge{
    font-size:0.6rem;
    margin-bottom:10px;
  }
  
  .tour-mockup-levels{
    gap:5px;
    margin:12px 0;
  }
  
  .tour-level-pill{
    padding:6px 10px;
    font-size:0.72rem;
  }
  
  .tour-feature-grid{
    gap:8px;
    margin:12px 0;
  }
  
  .tour-feature-item{
    padding:10px 8px;
  }
  
  .tour-feature-icon{
    font-size:1.4rem;
  }
  
  .tour-feature-label{
    font-size:0.68rem;
  }
  
  .tour-mockup-card{
    padding:12px;
    margin:10px auto;
  }
  
  .tour-mockup-title{
    font-size:0.85rem;
  }
  
  .tour-mockup-text{
    font-size:0.75rem;
  }
  
  .tour-nav{
    gap:12px;
    padding:14px 20px 20px;
  }
  
  .tour-nav-row{
    flex-direction:column;
    gap:10px;
    width:100%;
  }
  
  .tour-skip-btn{
    order:2;
    width:100%;
    text-align:center;
    font-size:0.75rem;
  }
  
  .tour-nav-buttons{
    order:1;
    width:100%;
    justify-content:space-between;
  }
  
  .tour-btn-prev,
  .tour-btn-next{
    font-size:0.78rem;
    padding:7px 14px;
  }
  
  .tour-visual{
    margin:12px auto;
  }
}

/* Dark mode */
body.dark #newTourOverlay{
  background:rgba(14,26,26,0.96);
}

body.dark .tour-card{
  background:var(--white);
  border:1.5px solid var(--border);
}

  .spk{cursor:pointer;color:var(--turq-dark)}.gt{width:100%;border-collapse:collapse;margin:10px 0;font-size:.86rem}

/* ── Full-screen mode ─────────────────────────────── */









/* ── Settings panel in side menu ─────────────────── */
.sm-settings-btn{display:flex;align-items:center;gap:11px;padding:11px 20px;
  cursor:pointer;color:var(--ink);font-size:.85rem;font-weight:700;
  background:none;border:none;width:100%;text-align:left;
  font-family:'Nunito',sans-serif;transition:background .15s;}
.sm-settings-btn:hover{background:var(--turq-soft);}
.sm-chevron{margin-left:auto;font-size:.75rem;color:var(--mid);
  transition:transform .2s;display:inline-block;}
.sm-settings-panel{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.sm-settings-panel.open{max-height:360px;}
.sm-toggle-row{display:flex;align-items:center;gap:11px;padding:9px 20px 9px 20px;
  cursor:pointer;font-size:.84rem;font-weight:600;color:var(--ink);
  transition:background .15s;}
.sm-toggle-row:hover{background:var(--turq-soft);}
.sm-toggle-label{flex:1;}
.sm-sw{width:36px;height:20px;border-radius:20px;background:var(--border);
  position:relative;flex-shrink:0;transition:background .2s;}
.sm-sw.on{background:var(--turq);}
.sm-sw-thumb{position:absolute;left:3px;top:3px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);}
.sm-sw.on .sm-sw-thumb{transform:translateX(16px);}

/* ── Landing Page (Pre-Password) ──────────────────────── */
#landingPage{
  position:fixed;inset:0;z-index:100000;
  background:linear-gradient(135deg, #F4FAFA 0%, #E8F5F5 100%);
  display:flex;align-items:center;justify-content:center;
  overflow-y:auto;padding:20px 20px;
}
.land-dots{
  position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(circle, rgba(10,168,168,.08) 1px, transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
}
.land-inner{
  position:relative;z-index:1;
  max-width:600px;width:100%;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.land-badge-wrap{margin-bottom:20px;}
.land-logo-badge{
  width:64px;height:64px;border-radius:16px;
  background:linear-gradient(135deg,var(--turq2),var(--turq));
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:1.8rem;font-weight:700;color:#fff;
  margin-bottom:12px;
  box-shadow:0 6px 24px rgba(10,168,168,.3);
  animation:landBounce 1s ease-in-out;
}
@keyframes landBounce{
  0%,20%,50%,80%,100%{transform:translateY(0);}
  40%{transform:translateY(-10px);}
  60%{transform:translateY(-5px);}
}
.land-app-name{
  font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700;
  color:var(--ink);margin-bottom:4px;
}
.land-tagline{
  font-size:.88rem;color:var(--mid);font-weight:500;
  font-style:italic;
}
.land-status-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(10,168,168,.08);
  border:1.5px solid rgba(10,168,168,.2);
  border-radius:50px;padding:5px 14px;
  margin-bottom:20px;
}
@keyframes landPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.02);}
}
.land-status-icon{font-size:.85rem;}
.land-status-text{
  font-size:.72rem;font-weight:600;
  color:var(--turq-dark);letter-spacing:.3px;
  opacity:.8;
}
.land-heading{
  font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;
  color:var(--ink);line-height:1.3;margin:0 0 16px;
}
.land-heading em{
  color:var(--turq);font-style:italic;
}
.land-description{
  font-size:.88rem;color:var(--mid);line-height:1.5;
  margin:0 0 24px;max-width:520px;
}
.land-features{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:10px;width:100%;margin-bottom:28px;
}
.land-feature{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--white);border:2px solid var(--border);
  border-radius:12px;padding:12px;text-align:left;
  transition:all .2s;
  cursor:pointer;
}
.land-feature:hover{
  border-color:var(--turq);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(10,168,168,.15);
}
.land-feature-icon{
  font-size:1.5rem;flex-shrink:0;
}
.land-feature-text{flex:1;}
.land-feature-title{
  font-family:'Fraunces',serif;font-size:.88rem;font-weight:700;
  color:var(--ink);margin-bottom:2px;
}
.land-feature-desc{
  font-size:.74rem;color:var(--mid);line-height:1.3;
}
.land-cta{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}
.land-btn-primary{
  background:linear-gradient(135deg,var(--turq2),var(--turq));
  color:#fff;border:none;border-radius:14px;
  padding:14px 36px;font-size:1rem;font-weight:700;
  cursor:pointer;font-family:'Nunito',sans-serif;
  box-shadow:0 4px 20px rgba(10,168,168,.35);
  transition:all .2s;
  max-width:360px;width:100%;
}
.land-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(10,168,168,.45);
}
.land-btn-primary:active{transform:scale(.98);}
.land-contact-text{
  font-size:.8rem;color:var(--mid);margin:0;
  line-height:1.4;
}
.land-email{
  color:var(--turq);font-weight:700;text-decoration:none;
  transition:color .15s;
}
.land-email:hover{
  color:var(--turq-dark);text-decoration:underline;
}
@media(max-width:640px){
  .land-heading{font-size:1.3rem;}
  .land-app-name{font-size:1.4rem;}
  .land-features{grid-template-columns:1fr;}
  .land-description{font-size:.84rem;}
}

/* ── Feature Detail Modal ──────────────────────────────── */
#featureModal{
  position:fixed;inset:0;z-index:100001;
  display:none;align-items:center;justify-content:center;
  background:rgba(12,32,32,.85);backdrop-filter:blur(8px);
  animation:fmFadeIn .25s;
}
#featureModal.show{display:flex;}
@keyframes fmFadeIn{from{opacity:0;}to{opacity:1;}}
.fm-card{
  position:relative;background:var(--white);
  border-radius:20px;padding:28px 24px;
  max-width:500px;width:90%;max-height:85vh;
  overflow-y:auto;
  box-shadow:0 12px 48px rgba(0,0,0,.25);
  border:2px solid var(--turq-mid);
  animation:fmSlideUp .3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes fmSlideUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
.fm-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border-radius:50%;
  border:none;background:var(--bg2);
  color:var(--mid);font-size:1.2rem;font-weight:700;
  cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.fm-close:hover{background:var(--turq);color:#fff;transform:rotate(90deg);}
.fm-icon{font-size:2.5rem;text-align:center;margin-bottom:12px;}
.fm-title{
  font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;
  color:var(--ink);text-align:center;margin-bottom:16px;
}
.fm-body{font-size:.88rem;color:var(--ink2);line-height:1.6;}
.fm-body p{margin:0 0 12px;}
.fm-body p:last-child{margin-bottom:0;}
.fm-highlights{
  background:var(--turq-soft);border:1.5px solid var(--turq-mid);
  border-radius:12px;padding:14px 16px;margin-top:16px;
}
.fm-highlights-title{
  font-size:.75rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;color:var(--turq-dark);margin-bottom:10px;
}
.fm-highlight{
  display:flex;align-items:flex-start;gap:8px;
  font-size:.84rem;color:var(--ink2);line-height:1.4;
  margin-bottom:8px;
}
.fm-highlight:last-child{margin-bottom:0;}
.fm-highlight-icon{
  flex-shrink:0;color:var(--turq);font-weight:700;
  font-size:.95rem;margin-top:1px;
}

/* ── Password Gate ───────────────────────────────────── */
#pwGate{
  position:fixed;inset:0;z-index:99999;
  background:var(--bg,#F4FAFA);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 24px;
}
#pwGate .pw-badge{
  width:72px;height:72px;border-radius:18px;
  background:var(--turq,#0AA8A8);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:2rem;font-weight:700;color:#fff;
  margin-bottom:24px;box-shadow:0 8px 32px rgba(10,168,168,.25);
}
#pwGate h1{
  font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700;
  color:var(--ink,#0C2020);margin:0 0 6px;text-align:center;
}
#pwGate p{
  font-size:.88rem;color:var(--mid,#4a7070);margin:0 0 28px;text-align:center;
}
#pwGate .pw-input-wrap{
  width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px;
}
#pwInput{
  width:100%;padding:14px 48px 14px 18px;border-radius:14px;
  border:2px solid var(--border,#d0e8e8);
  font-family:'Nunito',sans-serif;font-size:1rem;
  background:var(--white,#fff);color:var(--ink,#0C2020);
  outline:none;box-sizing:border-box;transition:border-color .2s;
}
#pwInput:focus{border-color:var(--turq,#0AA8A8);}
#pwInput.wrong{border-color:#e05838;animation:pwShake .3s ease;}
@keyframes pwShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-8px)}
  75%{transform:translateX(8px)}
}
#pwEye{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  border:none;background:none;cursor:pointer;
  font-family:'Nunito',sans-serif;font-size:.72rem;font-weight:700;
  color:var(--mid,#4a7070);padding:0;line-height:1;letter-spacing:.3px;
}
#pwSubmit{
  width:100%;padding:14px;border-radius:14px;border:none;
  background:var(--turq,#0AA8A8);color:#fff;
  font-family:'Nunito',sans-serif;font-size:1rem;font-weight:800;
  cursor:pointer;transition:all .2s;
}
#pwSubmit:active{transform:scale(.97);}
#pwError{
  font-size:.82rem;color:#e05838;text-align:center;min-height:18px;
}

/* ════════════════════════════════════════════════════
   DESKTOP LAYOUT ≥ 768px
   Pure CSS only — no HTML or JS changes
   ════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── Scale up slightly ── */
  html { font-size: 17px; }

  /* ── App shell becomes a grid ── */
  #appShell, #appShell.running {
    display: grid !important;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 60px 1fr;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
  }

  /* ── Header: row 1, spans both columns ── */
  .app-header {
    grid-column: 1 / 3;
    grid-row: 1;
    position: relative !important;
    top: auto !important;
    z-index: 200;
    display: flex !important;
  }

  /* ── Sidebar: row 2, col 1 ── */
  /* Override the slide-out behaviour — pin it in place */
  .side-menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    transition: none !important;
    grid-column: 1;
    grid-row: 2;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: auto !important;
    box-shadow: none !important;
    border-right: 1.5px solid var(--border);
    display: flex !important;
    flex-direction: column;
    padding: 8px 0 40px !important;
  }

  /* ── Main content: row 2, col 2 ── */
  main {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    overflow: hidden;
    height: 100%;
  }

  /* ── Sections fill the content area ── */
  .sec.active {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    height: auto !important;
  }

  /* ── Hide mobile-only chrome ── */
  .bottom-nav       { display: none !important; }
  #menuBtn          { display: none !important; }
  .overlay          { display: none !important; }
  

  /* ── Content max-width on desktop ── */
  .home-wrap, .gram-wrap, .fc-wrap-outer, .lesson-wrap,
  .pt-wrap, .quiz-wrap, .progress-wrap, .vocab-wrap,
  .pron-wrap, .phrase-wrap, .sb-wrap, .favs-wrap,
  .tq-wrap, .verb-wrap, .ex-wrap, .cases-wrap, .rev-wrap, .st-wrap, .reading-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ── Slightly larger lesson grid ── */
  .gram-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
  }

  /* ── Quiz options 2-col ── */
  .quiz-opts, .lex-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* ── PWA banner centred ── */
  #pwaIOS {
    max-width: 480px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
  }

  /* ── Settings panel: override max-height constraint on desktop ── */
  .sm-settings-panel {
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
  }
  /* When closed, hide it */
  .sm-settings-panel:not(.open) {
    display: none !important;
  }
  /* ── Conversation panel: constrained width on desktop ── */
  .conv-panel {
    left: auto !important;
    right: 0 !important;
    width: 580px;
    border-radius: 22px 0 0 0;
    border-left: 1.5px solid var(--border);
  }

  /* ── Verb panel: centred with max-width on desktop ── */
  .vp-box {
    left: 280px !important;
    right: 0 !important;
    max-width: 560px;
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
  }
  .vp-overlay {
    left: 280px;
  }

}

@media (min-width: 1100px) {
  #appShell, #appShell.running {
    grid-template-columns: 280px 1fr;
  }
  .home-wrap, .gram-wrap, .fc-wrap-outer, .lesson-wrap,
  .pt-wrap, .quiz-wrap, .progress-wrap, .vocab-wrap,
  .pron-wrap, .phrase-wrap, .sb-wrap, .favs-wrap,
  .tq-wrap, .verb-wrap, .ex-wrap, .cases-wrap, .rev-wrap, .st-wrap, .reading-wrap {
    max-width: 860px;
  }
}

/* ── Global Search (header) ──────────────────────────── */
.hdr-search-wrap{
  position:relative;display:flex;align-items:center;
  margin:0 6px;
}
.hdr-search-input{
  width:150px;padding:6px 10px 6px 48px;border-radius:20px;
  border:1.5px solid var(--border);background:var(--bg2);
  font-family:'Nunito',sans-serif;font-size:16px;color:var(--ink);
  outline:none;box-sizing:border-box;transition:width .2s, border-color .2s;
}
.hdr-search-input:focus{
  border-color:var(--turq);width:320px;
}
.hdr-search-icon{
  position:absolute;left:9px;font-size:.76rem;pointer-events:none;opacity:.5;
  z-index:1;
}
.sm-search-results{
  position:fixed;right:12px;top:62px;z-index:400;
  width:320px;
  background:var(--white);border:1.5px solid var(--border);
  border-top:3px solid var(--turq);
  border-radius:0 0 12px 12px;
  box-shadow:0 4px 16px rgba(10,168,168,.15);
  max-height:320px;overflow-y:auto;display:none;
}
.sm-search-results.open{display:block;}
.sm-search-item{
  padding:9px 14px;cursor:pointer;border-bottom:1px solid var(--border);
  transition:background .12s;
}
.sm-search-item:last-child{border-bottom:none;}
.sm-search-item:hover{background:var(--turq-soft);transform:translateX(2px);}
.sm-search-label{font-size:.84rem;font-weight:700;color:var(--ink);}
.sm-search-sub{font-size:.72rem;color:var(--mid);margin-top:1px;}
.sm-search-empty{padding:12px 14px;font-size:.82rem;color:var(--mid);text-align:center;}

/* ── Continue where you left off ────────────────────── */
.continue-card{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,var(--turq),var(--turq-dark));
  border-radius:16px;padding:14px 16px;margin-bottom:14px;
  cursor:pointer;transition:transform .15s, box-shadow .15s;
  box-shadow:0 4px 16px rgba(10,168,168,.25);
}
.continue-card:active{transform:scale(.98);}
.continue-icon{font-size:1.6rem;flex-shrink:0;}
.continue-text{flex:1;min-width:0;}
.continue-label{font-size:.68rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.8px;color:rgba(255,255,255,.75);margin-bottom:2px;}
.continue-title{font-size:.92rem;font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.continue-tag{font-size:.72rem;color:rgba(255,255,255,.7);margin-top:2px;}
.continue-arrow{font-size:1.2rem;color:rgba(255,255,255,.8);flex-shrink:0;}

/* ── Search visibility by screen size ───────────────── */
/* Mobile: hide header search, show menu search */
.hdr-search-wrap { display: none !important; }
.sm-search-wrap  { display: block; }

/* Desktop: show header search, hide menu search */
@media (min-width: 768px) {
  .hdr-search-wrap { display: flex !important; }
  .sm-search-wrap  { display: none !important; }
}

/* ── Side menu search ────────────────────────────────── */
.sm-search-wrap{padding:8px 12px;position:relative;}
.sm-search-input{
  width:100%;padding:8px 12px 8px 56px;border-radius:10px;
  border:1.5px solid var(--border);background:var(--bg2);
  font-family:'Nunito',sans-serif;font-size:16px;color:var(--ink);
  outline:none;box-sizing:border-box;transition:border-color .2s;
}
.sm-search-input:focus{border-color:var(--turq);}
.sm-search-icon{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  font-size:.82rem;pointer-events:none;opacity:.5;
}

/* ── Mobile search results (side menu) ──────────────── */
#smSearchResultsMobile{
  position:static !important;
  top:auto !important;
  right:auto !important;
  width:100% !important;
  border-radius:10px !important;
  border-top:1.5px solid var(--border) !important;
  margin-top:6px;
  max-height:260px;
}

/* ── Mobile search input row (keeps icon anchored to input) ── */
.sm-search-input-row{position:relative;display:flex;align-items:center;}

/* ── Font size control ───────────────────────────────── */
.font-size-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 20px;
}
.font-size-label{flex:1;font-size:.84rem;font-weight:600;color:var(--ink);}
.font-size-icon{font-size:.8rem;}
.font-size-btn{
  width:30px;height:30px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--bg2);color:var(--ink);font-size:.9rem;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s, border-color .15s;line-height:1;
  font-family:'Nunito',sans-serif;
}
.font-size-btn:hover{background:var(--turq-soft);border-color:var(--turq);transform:translateY(-1px);}
.font-size-val{
  font-size:.8rem;font-weight:700;color:var(--turq);
  min-width:32px;text-align:center;
}

/* ── Daily goal task card ────────────────────────────── */
.dg-task-label{
  font-size:.68rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.7px;color:var(--mid);margin-bottom:3px;
}
.dg-task-title{
  font-family:'Fraunces',serif;font-size:.95rem;font-weight:700;
  color:var(--ink);
}
.dg-task-done .dg-task-title{
  text-decoration:line-through;color:var(--mid);
}
.dg-diff-row{
  display:flex;align-items:center;gap:6px;padding:8px 20px;
}
.dg-diff-label{font-size:.84rem;font-weight:600;color:var(--ink);flex:1;}
.dg-diff-btn{
  padding:4px 10px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--bg2);color:var(--mid);font-size:.72rem;font-weight:700;
  cursor:pointer;transition:all .15s;font-family:'Nunito',sans-serif;
}
.dg-diff-btn.active{background:var(--turq);border-color:var(--turq);color:#fff;}
.dg-diff-btn:hover:not(.active){background:var(--turq-soft);border-color:var(--turq);transform:translateY(-1px);}

/* ── AI Conversation Partner ─────────────────────────── */
.conv-btn{
  width:34px;height:34px;border-radius:50%;border:none;
  background:var(--turq);color:#fff;font-size:1rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  margin-right:6px;flex-shrink:0;transition:transform .15s, box-shadow .15s;
  box-shadow:0 2px 8px rgba(10,168,168,.3);
}
.conv-btn:active{transform:scale(.92);}
.conv-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(12,32,32,.5);z-index:600;
  backdrop-filter:blur(2px);
}
.conv-overlay.open{display:block;}
.conv-panel{
  display:none;position:fixed;
  bottom:0;left:0;right:0;
  height:88vh;z-index:601;
  background:var(--bg);
  border-radius:22px 22px 0 0;
  box-shadow:0 -4px 32px rgba(10,168,168,.15);
  flex-direction:column;
  overflow:hidden;
}
.conv-panel.open{display:flex;}
@media(min-width:768px){
  .conv-panel{
    left:280px;right:0;
    height:85vh;
    border-radius:22px 22px 0 0;
  }
}
.conv-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 12px;
  border-bottom:1.5px solid var(--border);
  background:var(--white);flex-shrink:0;
}
.conv-header-left{display:flex;align-items:center;gap:12px;}
.conv-avatar{
  width:40px;height:40px;border-radius:12px;
  background:var(--turq);color:#fff;
  font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.conv-title{font-family:'Fraunces',serif;font-size:.95rem;font-weight:700;color:var(--ink);}
.conv-level-tag{font-size:.72rem;color:var(--turq);font-weight:700;margin-top:1px;}
.conv-close{
  border:none;background:none;font-size:1.1rem;
  color:var(--mid);cursor:pointer;padding:4px;
}
.conv-scenarios{
  padding:10px 14px 6px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;background:var(--white);
}
.conv-scenarios-label{font-size:.72rem;color:var(--mid);margin-bottom:6px;font-weight:600;}
.conv-scenario-chips{display:flex;gap:6px;flex-wrap:wrap;}
.conv-chip{
  padding:5px 12px;border-radius:20px;
  border:1.5px solid var(--border);background:var(--bg2);
  font-size:.75rem;font-weight:700;color:var(--ink);
  cursor:pointer;transition:all .15s;white-space:nowrap;
}
.conv-chip:hover{background:var(--turq-soft);border-color:var(--turq);box-shadow:var(--s1);transform:translateY(-2px);}
.conv-messages{
  flex:1;overflow-y:auto;
  padding:14px 14px 8px;
  display:flex;flex-direction:column;gap:10px;
  -webkit-overflow-scrolling:touch;
}
.conv-msg{
  display:flex;flex-direction:column;
  max-width:82%;
}
.conv-msg.user{align-self:flex-end;align-items:flex-end;}
.conv-msg.ai{align-self:flex-start;align-items:flex-start;}
.conv-bubble{
  padding:10px 14px;border-radius:16px;
  font-size:.88rem;line-height:1.55;
}
.conv-msg.user .conv-bubble{
  background:var(--turq);color:#fff;
  border-bottom-right-radius:4px;
}
.conv-msg.ai .conv-bubble{
  background:var(--white);color:var(--ink);
  border:1.5px solid var(--border);
  border-bottom-left-radius:4px;
}
.conv-msg-time{font-size:.65rem;color:var(--mid);margin-top:3px;padding:0 4px;}
.conv-correction{
  margin-top:4px;padding:6px 10px;
  background:var(--yell-soft);border-radius:8px;
  font-size:.78rem;color:var(--ink);border:1px solid var(--yell-mid);
}
.conv-correction-label{font-weight:800;color:var(--yell-deep,#b8900a);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;}
.conv-thinking{
  display:flex;gap:4px;padding:12px 14px;
  background:var(--white);border-radius:16px;
  border:1.5px solid var(--border);align-self:flex-start;
}
.conv-thinking span{
  width:7px;height:7px;border-radius:50%;
  background:var(--turq);opacity:.4;
  animation:convBounce 1.2s infinite;
}
.conv-thinking span:nth-child(2){animation-delay:.2s;}
.conv-thinking span:nth-child(3){animation-delay:.4s;}
@keyframes convBounce{
  0%,80%,100%{transform:translateY(0);opacity:.4;}
  40%{transform:translateY(-6px);opacity:1;}
}
.conv-input-row{
  display:flex;gap:8px;padding:10px 12px;
  border-top:1.5px solid var(--border);
  background:var(--white);flex-shrink:0;
}
.conv-input{
  flex:1;padding:10px 14px;border-radius:22px;
  border:1.5px solid var(--border);background:var(--bg2);
  font-family:'Nunito',sans-serif;font-size:16px;color:var(--ink);
  outline:none;transition:border-color .2s;
}
.conv-input:focus{border-color:var(--turq);}
.conv-send{
  width:40px;height:40px;border-radius:50%;border:none;
  background:var(--turq);color:#fff;font-size:1.1rem;font-weight:700;
  cursor:pointer;flex-shrink:0;transition:transform .15s;
  display:flex;align-items:center;justify-content:center;
}
.conv-send:active{transform:scale(.92);}
.conv-empty{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  color:var(--mid);font-size:.88rem;text-align:center;
  padding:20px;gap:8px;
}
.conv-empty-icon{font-size:2.5rem;}

/* ── Prevent iOS zoom on input focus (requires font-size >= 16px) ── */
@media (max-width: 767px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* verb status */
.verb-status-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:8px;font-size:.7rem;font-weight:700;border:1.5px solid var(--border);background:var(--bg2);color:var(--mid);cursor:pointer;transition:all .15s;font-family:'Nunito',sans-serif;margin-top:4px;margin-right:4px;}
.verb-status-btn:hover{border-color:var(--turq);color:var(--turq);transform:translateY(-1px);}
.verb-status-btn.learning{background:var(--yell-soft);border-color:#b8900a;color:#b8900a;}
.verb-status-btn.known{background:#e8f5e9;border-color:#2e7d32;color:#2e7d32;}
.vdrill-filter-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px;}
.vdrill-filter-btn{padding:5px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg2);color:var(--mid);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .15s;font-family:'Nunito',sans-serif;}
.vdrill-filter-btn.active{background:var(--turq);border-color:var(--turq);color:#fff;}

.speed-row{display:flex;align-items:center;gap:6px;padding:8px 20px;}
.speed-label{font-size:.84rem;font-weight:600;color:var(--ink);flex:1;}
.speed-btn{padding:4px 10px;border-radius:8px;border:1.5px solid var(--border);background:var(--bg2);color:var(--mid);font-size:.72rem;font-weight:700;cursor:pointer;transition:all .15s;font-family:'Nunito',sans-serif;}
.speed-btn.active{background:var(--turq);border-color:var(--turq);color:#fff;}
.speed-btn:hover:not(.active){background:var(--turq-soft);border-color:var(--turq);transform:translateY(-1px);}

/* ── Study time summary ──────────────────────────────── */
.study-time-row{
  display:flex;gap:10px;margin-bottom:14px;
}
.study-time-card{
  flex:1;background:var(--white);border:1.5px solid var(--border);
  border-radius:12px;padding:12px;text-align:center;
}
.study-time-n{
  font-family:'Fraunces',serif;font-size:1.3rem;font-weight:700;
  color:var(--turq);
}
.study-time-l{font-size:.7rem;color:var(--mid);margin-top:2px;}

/* ── Lesson accuracy badge ──────────────────────────── */
.gram-acc{display:inline-block;padding:2px 7px;border-radius:6px;font-size:.68rem;font-weight:800;margin-top:4px;}
.gram-acc.good{background:#e8f5e9;color:#2e7d32;}
.gram-acc.ok{background:#fff8e1;color:#b8900a;}
.gram-acc.weak{background:#ffebee;color:#c62828;}
.gram-acc.untried{background:var(--bg2);color:var(--mid);}

/* ── Keyboard shortcut hints ─────────────────────────── */
.kbd-hint{
  display:inline-block;margin-left:6px;padding:1px 5px;
  border-radius:4px;border:1px solid var(--border);
  background:var(--bg2);color:var(--mid);
  font-size:.62rem;font-family:monospace;font-weight:600;
  vertical-align:middle;opacity:.7;
}
@media(max-width:767px){ .kbd-hint{display:none!important;} }

.search-nav-active{background:var(--turq-soft)!important;}

.lc-first-lesson{
  margin:16px 0 24px;
  padding:12px 16px;
  background:var(--turq-soft);
  border:1.5px solid var(--turq-mid);
  border-radius:12px;
  font-size:.82rem;
  color:var(--turq-dark);
  text-align:left;
  line-height:1.5;
}
.lc-first-lesson strong{
  display:block;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:800;
  margin-bottom:3px;
  opacity:.7;
}

/* ── Enhanced Quiz ───────────────────────────────────── */
.quiz-setup{padding:4px 0 8px;}
.quiz-setup-label{font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.6px;color:var(--mid);margin:12px 0 6px;}
.quiz-level-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px;}
.quiz-lv-btn{padding:4px 10px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--bg2);color:var(--mid);font-size:.75rem;font-weight:700;
  cursor:pointer;transition:all .15s;font-family:'Nunito',sans-serif;}
.quiz-lv-btn.active{background:var(--turq);border-color:var(--turq);color:#fff;}
.quiz-type-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px;}
.quiz-type-btn{padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);
  background:var(--bg2);color:var(--mid);font-size:.75rem;font-weight:700;
  cursor:pointer;transition:all .15s;font-family:'Nunito',sans-serif;}
.quiz-type-btn.active{background:var(--turq);border-color:var(--turq);color:#fff;}
.quiz-size-row{display:flex;gap:6px;margin-bottom:14px;}
.quiz-size-btn{padding:5px 14px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--bg2);color:var(--mid);font-size:.78rem;font-weight:700;
  cursor:pointer;transition:all .15s;font-family:'Nunito',sans-serif;}
.quiz-size-btn.active{background:var(--turq);border-color:var(--turq);color:#fff;}
.quiz-start-btn{width:100%;padding:14px;border-radius:14px;border:none;
  background:var(--turq);color:#fff;font-family:'Fraunces',serif;
  font-size:1rem;font-weight:700;cursor:pointer;transition:all .15s;}
.quiz-start-btn:active{transform:scale(.98);}
.quiz-type-tag{display:inline-block;padding:2px 7px;border-radius:6px;
  font-size:.65rem;font-weight:800;margin-bottom:6px;
  background:var(--turq-soft);color:var(--turq-dark);}

.gram-fav-btn{
  background:none;border:none;font-size:1rem;
  cursor:pointer;padding:2px;line-height:1;
  opacity:.5;transition:opacity .15s;
  flex-shrink:0;
}
.gram-fav-btn:hover,.gram-fav-btn.active{opacity:1;}
.gram-card{position:relative;}

.gram-card-btns{
  position:absolute;top:8px;right:8px;
  display:flex;gap:4px;
}

/* ── FALSE FRIENDS ─────────────────────────────────────────── */
.ff-filter-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.ff-filter-btn{background:var(--white);border:1.5px solid var(--border);border-radius:20px;padding:5px 13px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s;}
.ff-filter-btn.on{background:var(--turq);color:#fff;border-color:var(--turq);}
.ff-card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:10px;transition:border-color .18s;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.ff-card{cursor:pointer;} .ff-card:hover{border-color:var(--turq);background:var(--turq-soft);box-shadow:var(--s1);transform:translateY(-2px);}
.ff-card-top{display:flex;align-items:center;gap:6px;margin-bottom:5px;}
.ff-word-en{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:var(--ink);}
.ff-arrow{color:var(--mid);font-size:.9rem;margin:0 1px;}
.ff-word-cz{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:var(--coral);}
.ff-level-badge{background:var(--turq-soft);color:var(--turq-dark);border-radius:8px;padding:2px 8px;font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.ff-card-btns{display:flex;gap:2px;margin-left:auto;}
.ff-icon-btn{background:none;border:none;font-size:.95rem;cursor:pointer;padding:2px 5px;border-radius:6px;transition:background .15s;color:var(--mid);}
.ff-icon-btn:hover{background:var(--turq-soft);}
.ff-fav-on{color:var(--coral)!important;}
.ff-trick-on{color:#f59e0b!important;}
.ff-meaning{font-size:.8rem;color:var(--mid);font-style:italic;margin-bottom:7px;}
.ff-danger{font-size:.82rem;color:#b45309;margin-bottom:5px;line-height:1.5;}
.ff-correct{font-size:.82rem;color:#166534;margin-bottom:5px;line-height:1.5;}
.ff-example{font-size:.79rem;color:var(--mid);font-style:italic;padding-top:3px;border-top:1px solid var(--border);margin-top:4px;}

/* ── SECTION HERO BANNERS ──────────────────────────────────── */
.sec-hero{
  background:linear-gradient(135deg,var(--hero-a),var(--hero-b));
  border-radius:16px;
  padding:18px 20px 16px;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:16px;
  box-shadow:0 3px 14px rgba(0,0,0,.08);
}
.sec-hero-icon{
  font-size:2.2rem;
  line-height:1;
  flex-shrink:0;
  background:rgba(255,255,255,.25);
  border-radius:12px;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
}
.sec-hero-text{flex:1;min-width:0;}
.sec-hero-title{
  font-family:'Fraunces',serif;
  font-size:1.25rem;
  font-weight:700;
  color:#fff;
  margin:0 0 3px;
  line-height:1.2;
  text-shadow:0 1px 3px rgba(0,0,0,.15);
}
.sec-hero-sub{
  font-size:.78rem;
  color:rgba(255,255,255,.88);
  margin:0;
  line-height:1.4;
}

/* ── IDIOMS ────────────────────────────────────────────────── */
.idiom-filter-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.idiom-filter-btn{background:var(--white);border:1.5px solid var(--border);border-radius:20px;padding:5px 13px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s;}
.idiom-filter-btn.on{background:var(--turq);color:#fff;border-color:var(--turq);}
.idiom-card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s,transform .18s;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.idiom-card:hover{border-color:var(--turq);background:var(--turq-soft);box-shadow:var(--s1);transform:translateY(-2px);}
.idiom-card-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px;}
.idiom-cz{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:var(--ink);}
.idiom-en{font-size:.85rem;font-weight:600;color:var(--turq-dark);margin-bottom:4px;}
.idiom-level-badge{background:var(--turq-soft);color:var(--turq-dark);border-radius:8px;padding:2px 8px;font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.idiom-card-btns{display:flex;gap:2px;margin-left:4px;}
.idiom-icon-btn{background:none;border:none;font-size:.95rem;cursor:pointer;padding:2px 5px;border-radius:6px;transition:background .15s;color:var(--mid);}
.idiom-icon-btn:hover{background:var(--turq-soft);}
.idiom-fav-on{color:var(--coral)!important;}
.idiom-trick-on{color:#f59e0b!important;}
.idiom-literal{font-size:.79rem;color:var(--mid);font-style:italic;margin-bottom:5px;}
.idiom-usage{font-size:.81rem;color:var(--ink2);line-height:1.5;padding-top:4px;border-top:1px solid var(--border);}

/* ── INFO BUTTON & SHEET ───────────────────────────────────── */
.info-btn{
  position:absolute;top:10px;right:10px;
  width:28px;height:28px;
  background:rgba(255,255,255,.28);
  border:1.5px solid rgba(255,255,255,.5);
  border-radius:50%;
  color:#fff;font-size:.85rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .18s;
  flex-shrink:0;
  line-height:1;
}
.info-btn:hover{background:rgba(255,255,255,.45);}
.sec-hero{position:relative;}
.info-overlay{
  position:fixed;inset:0;
  background:rgba(12,32,32,.45);
  z-index:300;
  display:flex;align-items:flex-end;
  justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.info-overlay.open{opacity:1;pointer-events:all;}
.info-sheet{
  background:var(--white);
  border-radius:22px 22px 0 0;
  width:100%;max-width:600px;
  margin:0 auto;
  max-height:82vh;
  overflow-y:auto;
  padding:0 0 40px;
  transform:translateY(40px);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  -webkit-overflow-scrolling:touch;
}
.info-overlay.open .info-sheet{transform:translateY(0);}
.info-sheet-handle{
  width:36px;height:4px;
  background:var(--border);border-radius:2px;
  margin:12px auto 0;
}
.info-sheet-header{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px 12px;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--white);z-index:1;
}
.info-sheet-icon{font-size:1.6rem;line-height:1;}
.info-sheet-title{
  font-family:'Fraunces',serif;
  font-size:1.1rem;font-weight:700;
  color:var(--ink);flex:1;
}
.info-sheet-close{
  background:var(--border);border:none;
  border-radius:50%;width:30px;height:30px;
  font-size:.85rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--mid);
}
.info-sheet-body{padding:16px 20px 0;}
.info-section-label{
  font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;
  color:var(--turq-dark);margin:14px 0 6px;
}
.info-section-label:first-child{margin-top:0;}
.info-body-text{
  font-size:.84rem;color:var(--ink2);
  line-height:1.6;margin-bottom:8px;
}
.info-tip{
  display:flex;gap:8px;align-items:flex-start;
  font-size:.82rem;color:var(--ink2);
  line-height:1.5;margin-bottom:6px;
}
.info-tip-bullet{
  flex-shrink:0;
  width:20px;height:20px;
  background:var(--turq-soft);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:var(--turq-dark);font-weight:700;
  margin-top:1px;
}
/* Keyboard shortcut key styling */
kbd{
  display:inline-block;
  padding:3px 7px;
  font-family:'Nunito',sans-serif;
  font-size:.75rem;
  font-weight:700;
  line-height:1;
  color:var(--ink);
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:4px;
  box-shadow:0 2px 0 var(--border);
  white-space:nowrap;
}

.home-info-btn,.rev-info-btn{
  background:var(--turq-soft)!important;
  border-color:var(--border)!important;
  color:var(--turq-dark)!important;
}
.home-info-btn:hover,.rev-info-btn:hover{
  background:var(--turq)!important;
  color:#fff!important;
}

/* ══════════════════════════════════════════════════════════════
   SIDE MENU FOOTER
   ═══════════════════════════════════════════════════════════ */
.sm-footer{
  padding:16px 20px 18px;
  margin-top:auto;
  text-align:center;
  border-top:1px solid var(--border);
}
.sm-footer-app{
  font-family:'Fraunces',serif;
  font-size:.95rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:6px;
}
.sm-footer-version{
  font-size:.68rem;
  color:var(--mid);
  font-weight:600;
  margin-bottom:3px;
}
.sm-footer-copy{
  font-size:.7rem;
  color:var(--mid);
  margin-bottom:10px;
}
.sm-footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
}
.sm-footer-link{
  font-size:.72rem;
  color:var(--turq-dark);
  text-decoration:none;
  font-weight:600;
  transition:color .18s;
}
.sm-footer-link:hover{
  color:var(--turq);
  text-decoration:underline;
}
.sm-footer-dot{
  color:var(--border);
  font-size:.8rem;
}

/* Dark mode side menu footer */
body.dark .sm-footer{
  border-top-color:#1a3535;
}
body.dark .sm-footer-app{
  color:#d0eaea;
}
body.dark .sm-footer-link{
  color:var(--turq);
}
body.dark .sm-footer-link:hover{
  color:#5dd4d4;
}