/* ─── RESET & BASE ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:#f5f7fb;color:#1e293b;display:flex;min-height:100vh;line-height:1.6;overflow-x:hidden}

.global-toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  z-index: 1200;
  max-width: min(92vw, 560px);
  padding: .7rem .9rem;
  border-radius: 10px;
  background: #111827;
  color: #f8fafc;
  font-size: .86rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
body.theme-dark .global-toast {
  background: #0b1220;
  color: #e2e8f0;
  border: 1px solid #334155;
}

/* ─── APP SHELL ─── */
#sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 220px;
  background: linear-gradient(175deg, #0f2544 0%, #1a3560 60%, #1e3a5f 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform .3s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

.sb-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.3rem 1.2rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.sb-logo-text {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}
.sb-logo-accent { color: #60a5fa; }

.sb-nav {
  list-style: none;
  padding: .6rem 0;
  margin: 0;
  flex-shrink: 0;
}
.sb-nav-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem 1.1rem;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all .17s;
  position: relative;
}
.sb-nav-item:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}
.sb-nav-item.active {
  background: rgba(255,255,255,.11);
  color: #fff;
  border-left-color: #60a5fa;
  font-weight: 600;
}
.sb-nav-icon { font-size: 1rem; flex-shrink: 0; width: 1.1rem; text-align: center; }
.sb-nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Chapter sub-nav items (appended dynamically by app.js) */
.nav-chapter {
  display: block;
  padding: .5rem 1.1rem .15rem;
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.35);
  font-weight: 700;
  margin-top: .4rem;
  flex: 1;
  text-align: left;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .38rem 1.1rem;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  font-size: .79rem;
  border-left: 3px solid transparent;
  transition: all .17s;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}
.nav-link:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); }
.nav-link.active {
  background: rgba(255,255,255,.09);
  color: #fff;
  border-left-color: #60a5fa;
  font-weight: 600;
}

/* ── Collapsible chapter groups ── */
.sb-chapter-group { list-style: none; }
.sb-chapter-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.sb-chapter-toggle:hover .nav-chapter { color: rgba(255,255,255,.55); }
.sb-chapter-arrow {
  font-size: .65rem;
  color: rgba(255,255,255,.3);
  padding-right: 1.1rem;
  flex-shrink: 0;
  transition: transform .22s ease;
  line-height: 1;
}
.sb-chapter-arrow::before { content: '▾'; }
.sb-chapter-group.collapsed .sb-chapter-arrow { transform: rotate(-90deg); }
.sb-chapter-links {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}
.sb-chapter-links.open { max-height: 800px; }

/* Spacer */
.sb-spacer { flex: 1; min-height: .5rem; }

/* Upgrade card */
.sb-upgrade-card {
  margin: .6rem .7rem;
  padding: .9rem .85rem;
  background: rgba(59,130,246,.18);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 10px;
  text-align: center;
  flex-shrink: 0;
}
.sb-upgrade-icon { font-size: 1.3rem; margin-bottom: .25rem; }
.sb-upgrade-text {
  font-size: .74rem;
  color: rgba(255,255,255,.75);
  margin: 0 0 .55rem;
  line-height: 1.4;
}
.sb-upgrade-btn {
  display: block;
  width: 100%;
  padding: .42rem .5rem;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: .79rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}
.sb-upgrade-btn:hover { opacity: .85; }

/* User section at bottom */
.sb-user {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem .9rem;
  border-top: 1px solid rgba(255,255,255,.09);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.sidebar-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sidebar-avatar-placeholder {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.sidebar-user-details { flex: 1; min-width: 0; }
.sidebar-user-name {
  display: block; font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-logout {
  display: block;
  width: 100%;
  background: none; border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.6); font-size: .69rem;
  padding: .18rem .5rem; border-radius: 4px; cursor: pointer; transition: all .2s;
  margin-top: .3rem; text-align: center;
}
.sidebar-logout:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-manage {
  display: block; width: 100%;
  background: none; border: 1px solid rgba(59,130,246,.35);
  color: rgba(255,255,255,.75); font-size: .69rem;
  padding: .18rem .5rem; border-radius: 4px; cursor: pointer; transition: all .2s;
  margin-top: .2rem; text-align: center;
}
.sidebar-manage:hover { background: rgba(59,130,246,.15); color: #fff; }
.sidebar-delete-account {
  display: block; width: 100%; margin-top: .4rem; padding: .45rem .75rem;
  background: rgba(239,68,68,.1); color: #ef4444; border: 1px solid rgba(239,68,68,.3);
  border-radius: 8px; font-size: .78rem; font-weight: 600; cursor: pointer; text-align: center;
  transition: background .2s;
}
.sidebar-delete-account:hover { background: rgba(239,68,68,.25); }

/* Review badge */
.review-badge {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: #ef4444; color: #fff;
  font-size: .6rem; font-weight: 800;
  width: 18px; height: 18px;
  border-radius: 50%; margin-left: auto;
  line-height: 18px;
  padding: 0;
  text-align: center;
}

/* ─── MAIN CONTENT (beside sidebar) ─── */
#content {
  margin-left: 220px;
  flex: 1;
  min-width: 0;
}

/* Non-dashboard pages get standard padding — top accounts for fixed trial banner (~36px) */
#home, #lesson-page, #review-page, #study-plan-page, #progress-page {
  padding: 5.5rem 2.5rem 4rem;
  max-width: 960px;
}

/* ─── MENU TOGGLE (mobile only) ─── */
#menu-toggle {
  display: none;
  position: fixed; top: 0; left: 0;
  z-index: 200; background: #1e3a5f; color: #fff;
  border: none; border-radius: 0 0 8px 0;
  font-size: 1.1rem; padding: .55rem .75rem; cursor: pointer;
  line-height: 1;
}

/* ─── MOBILE ─── */
@media(max-width: 900px) {
  #sidebar { transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); }
  #content { margin-left: 0; }
  #menu-toggle { display: block; }
  /* trial banner: leave room for toggle on the left */
  .trial-banner { padding-left: 3.5rem; }
  #home, #lesson-page, #review-page, #study-plan-page, #progress-page {
    padding: 4.5rem 1.2rem 3rem;
  }
}
@media(max-width: 768px) {
  .sort-columns { flex-direction: column !important; }
  .auth-container { margin: 0 1rem !important; }
  .lp-hero-inner { grid-template-columns: 1fr !important; text-align: center; }
  .lp-hero-sub { margin-left: auto; margin-right: auto; }
  .lp-hero-cta { justify-content: center; }
  .lp-hero-proof { justify-content: center; }
  .lp-hero-mockup { display: none; }
  .lp-pain-inner { grid-template-columns: 1fr !important; }
  .lp-bento-grid { grid-template-columns: 1fr !important; }
  .lp-bento-large,.lp-bento-wide { grid-column: span 1 !important; }
  .lp-steps { flex-direction: column; align-items: center; }
  .lp-step-connector { display: none !important; }
  .lp-pricing-grid { flex-direction: column; align-items: center; }
  .lp-pricing-card { width: 100%; max-width: 340px; }

  /* iPhone-safe navbar layout */
  .lp-navbar {
    width: 100%;
    max-width: 100%;
    padding: .8rem max(.8rem, env(safe-area-inset-right)) .8rem max(.8rem, env(safe-area-inset-left));
    overflow: hidden;
  }
  .lp-navbar-logo { font-size: 1rem; flex-shrink: 0; }
  .lp-navbar-actions { gap: .4rem; min-width: 0; }
  .lp-navbar-actions a[href="/blog/"],
  .lp-navbar-actions a[href="/free-exercises.html"] { display: none; }
  .lp-navbar-actions .lp-btn-signin,
  .lp-navbar-actions .lp-btn-trial {
    padding: .4rem .7rem;
    font-size: .78rem;
    white-space: nowrap;
  }

  .lp-sticky-cta { flex-direction: column; gap: .4rem; text-align: center; padding: .8rem 1rem; }
  .onboarding-container { padding: 2rem 1rem !important; }
  .trial-banner { left: 0; }
}
@media(max-width: 480px) {
  .lp-hero { padding: 6rem 1rem 3rem; }
  .lp-hero-h1 { font-size: 2.2rem; }
  .lp-bento-grid { grid-template-columns: 1fr !important; }
  .lp-section-title { font-size: 1.5rem; }
  .lp-faq-inner { max-width: 100%; }
  .lp-proof-bar-grid { gap: .5rem; }
  .lp-proof-stat { padding: 0 .8rem; }
  .lp-proof-divider { display: none; }
  .auth-modal { margin: .5rem; }
}

/* ─── PAGES ─── */
.page{display:none}
.page.active{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ─── TYPOGRAPHY ─── */
h1{font-size:1.8rem;margin-bottom:.4rem;color:#1e3a5f}
h2{font-size:1.2rem;margin:1.8rem 0 .6rem;color:#334155;border-bottom:2px solid #e2e8f0;padding-bottom:.3rem}
h3{font-size:1.05rem;margin:.5rem 0;color:#334155}
.subtitle{font-size:1rem;color:#64748b;margin-bottom:1.5rem}
.question-word{font-size:1.05rem;background:#eef4ff;display:inline-block;padding:.4rem .9rem;border-radius:8px;margin-bottom:1rem;color:#1e3a5f;font-weight:600}
.case-tag{display:inline-block;background:#1e3a5f;color:#fff;padding:.2rem .7rem;border-radius:20px;font-size:.8rem;font-weight:600;margin-bottom:.5rem}

/* ─── INFO TABLES (explanations) ─── */
.info-table{width:100%;border-collapse:collapse;margin:.6rem 0 1.2rem;font-size:.88rem}
.info-table th{background:#1e3a5f;color:#fff;padding:.5rem .7rem;text-align:left}
.info-table td{padding:.45rem .7rem;border-bottom:1px solid #e2e8f0}
.info-table tr:nth-child(even) td{background:#f8fafc}

/* ─── TIP BOX ─── */
.tip-box,.tip{background:#fff8e1;border-left:4px solid #f9a825;padding:.8rem 1rem;border-radius:8px;margin:1rem 0;font-size:.9rem;color:#5d4037}

/* ─── UNIT GRID (home) ─── */
.chapter-grid{display:grid;grid-template-columns:1fr;gap:.8rem;margin:1.5rem 0}
.unit-card{border-radius:16px;padding:1.4rem 1.2rem;color:#fff;position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.12);cursor:pointer;transition:transform .2s,box-shadow .2s}
.unit-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.unit-card h3{color:#fff;font-size:1.05rem;margin:0 0 .2rem}
.unit-card p{color:rgba(255,255,255,.85);font-size:.85rem;margin:0}
.unit-card--locked{background:#e2e8f0!important;cursor:default;opacity:.6;padding-left:2.4rem}
.unit-card--locked:hover{transform:none;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.unit-card--locked h3{color:#94a3b8!important}
.unit-card--locked p{color:#94a3b8!important}
.unit-card-number{position:absolute;top:.8rem;right:.8rem;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff}
.unit-card--locked .unit-card-number{background:rgba(148,163,184,.3);color:#94a3b8}
.unit-lock-icon{position:absolute;top:50%;left:.8rem;transform:translateY(-50%);font-size:1.2rem;opacity:.5}
.section-count{display:inline-block;background:rgba(255,255,255,.25);color:#fff;padding:.15rem .5rem;border-radius:12px;font-size:.75rem;font-weight:600;margin-top:.4rem}
.unit-card--locked .section-count{background:rgba(148,163,184,.3);color:#94a3b8}
.unit-progress-wrap{margin-top:.6rem}
.unit-progress-bar{height:6px;background:rgba(255,255,255,.25);border-radius:99px;overflow:hidden}
.unit-progress-fill{height:100%;background:rgba(255,255,255,.85);border-radius:99px;transition:width .4s ease;min-width:0}
.unit-progress-label{font-size:.7rem;color:rgba(255,255,255,.75);margin-top:.25rem;text-align:right}
.unit-card--locked .unit-progress-bar{background:rgba(148,163,184,.25)}
.unit-card--locked .unit-progress-fill{background:rgba(148,163,184,.4)}
.unit-card--locked .unit-progress-label{color:#94a3b8}

/* ─── EXERCISE BLOCKS ─── */
.exercises-heading{font-size:1.3rem;margin:2.5rem 0 1rem;color:#1e3a5f}
.exercise-block{background:#fff;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ex-type-label{font-size:1rem;color:#1e3a5f;margin-bottom:.3rem}
.ex-instruction{font-size:.92rem;color:#475569;margin-bottom:1rem}
.ex-example{background:#f0f7ff;border-left:3px solid #64b5f6;padding:.6rem 1rem;border-radius:6px;margin-bottom:1rem;font-size:.9rem}

/* ─── FILL-IN-BLANK ─── */
.fb-item{margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px solid #f1f5f9}
.fb-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.fb-prompt{font-size:1rem;margin-bottom:.4rem}
.blank-slot{display:inline-block;width:120px;border-bottom:2px dashed #94a3b8;margin:0 .2rem}
.fb-input-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.fb-input{padding:.45rem .7rem;border:2px solid #cbd5e1;border-radius:8px;font-size:.9rem;width:220px;transition:border-color .2s}
.fb-input:focus{outline:none;border-color:#64b5f6}
.input-correct{border-color:#22c55e!important;background:#dcfce7!important}
.input-wrong{border-color:#ef4444!important;background:#fee2e2!important}
.btn-check,.btn-check-all,.btn-show-answers{padding:.45rem 1rem;border:none;border-radius:8px;font-size:.85rem;cursor:pointer;transition:background .2s}
.btn-check{background:#1e3a5f;color:#fff}
.btn-check:hover{background:#2d5f8a}
.btn-check:disabled{opacity:.5;cursor:default}

/* ─── MULTIPLE CHOICE ─── */
.mc-item{margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px solid #f1f5f9}
.mc-sentence{font-size:1rem;margin-bottom:.5rem}
.mc-options{display:flex;gap:.5rem;flex-wrap:wrap}
.mc-btn{padding:.45rem 1rem;border:2px solid #cbd5e1;border-radius:8px;background:#fff;font-size:.9rem;cursor:pointer;transition:all .2s}
.mc-btn:hover{border-color:#64b5f6;background:#f0f7ff}
.mc-btn.correct{border-color:#22c55e;background:#dcfce7;color:#166534;font-weight:600}
.mc-btn.wrong{border-color:#ef4444;background:#fee2e2;color:#991b1b}
.mc-btn:disabled{opacity:.6;cursor:default}

/* ─── SORTING ─── */
.sort-wrapper{margin-top:.5rem}
.sort-columns{display:flex;gap:.8rem;margin-bottom:1rem;flex-wrap:wrap}
.sort-column{flex:1;min-width:150px;background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;padding:.6rem;cursor:pointer;transition:border-color .2s}
.sort-column.selected{border-color:#1e3a5f;box-shadow:0 0 0 2px rgba(30,58,95,.2)}
.sort-column h4{font-size:.8rem;text-align:center;color:#1e3a5f;margin-bottom:.4rem}
.sort-dropzone{min-height:40px}
.sort-dropzone .sort-chip{margin:.2rem;font-size:.78rem;cursor:default}
.sort-bank{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem 0}
.sort-chip{padding:.35rem .7rem;border:2px solid #cbd5e1;border-radius:8px;background:#fff;font-size:.85rem;cursor:pointer;transition:all .2s}
.sort-chip:hover{border-color:#64b5f6;background:#f0f7ff}
.sort-correct{border-color:#22c55e!important;background:#dcfce7!important;color:#166534}
.sort-wrong{border-color:#ef4444!important;background:#fee2e2!important;animation:shake .3s}
.sort-chip.placed{cursor:default}
.sort-hint{font-size:.8rem;color:#94a3b8;margin:.5rem 0}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ─── GAP-FILL STORY ─── */
.gapfill-story{font-size:.95rem;line-height:1.8;background:#fafbfc;padding:1rem;border-radius:8px;margin-bottom:.8rem}
.gf-input{width:100px;padding:.2rem .4rem;border:none;border-bottom:2px solid #94a3b8;background:transparent;font-size:.9rem;text-align:center;transition:border-color .2s}
.gf-input:focus{outline:none;border-bottom-color:#1e3a5f}
.gf-input.input-correct{border-bottom-color:#22c55e;background:rgba(34,197,94,.1)}
.gf-input.input-wrong{border-bottom-color:#ef4444;background:rgba(239,68,68,.1)}
.gf-btns{display:flex;gap:.5rem;margin-top:.5rem}
.btn-check-all{background:#1e3a5f;color:#fff}
.btn-check-all:hover{background:#2d5f8a}
.btn-show-answers{background:#e2e8f0;color:#334155}
.btn-show-answers:hover{background:#cbd5e1}

/* ─── WORD REORDERING ─── */
.reorder-item{margin-bottom:1.5rem;padding-bottom:1.2rem;border-bottom:1px solid #f1f5f9}
.reorder-bank{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem}
.reorder-word{padding:.4rem .8rem;border:2px solid #cbd5e1;border-radius:8px;background:#fff;font-size:.9rem;cursor:pointer;transition:all .2s}
.reorder-word:hover{border-color:#64b5f6;background:#f0f7ff}
.reorder-word.used{opacity:.3;border-style:dashed}
.reorder-result{min-height:40px;padding:.5rem .8rem;background:#f8fafc;border:2px dashed #e2e8f0;border-radius:8px;margin-bottom:.5rem;font-size:.95rem}
.reorder-placeholder{color:#94a3b8;font-size:.85rem}
.reorder-placed{display:inline-block;margin-right:.3rem}
.reorder-btns{display:flex;gap:.5rem}
.btn-undo{padding:.4rem .8rem;border:2px solid #cbd5e1;border-radius:8px;background:#fff;font-size:.85rem;cursor:pointer}
.btn-undo:hover{background:#f1f5f9}

/* ─── ERROR CORRECTION ─── */
.ec-item{margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px solid #f1f5f9}
.ec-sentence{font-size:1rem;font-style:italic;margin-bottom:.5rem;color:#334155}
.ec-btns{display:flex;gap:.5rem;margin-bottom:.5rem}
.ec-ok,.ec-fix{padding:.4rem .9rem;border:2px solid #cbd5e1;border-radius:8px;background:#fff;font-size:.85rem;cursor:pointer;transition:all .2s}
.ec-ok:hover{border-color:#22c55e;background:#dcfce7}
.ec-fix:hover{border-color:#ef4444;background:#fee2e2}
.ec-ok:disabled,.ec-fix:disabled{opacity:.5;cursor:default}
.ec-input-row{display:flex;gap:.5rem;align-items:center;margin-bottom:.3rem;flex-wrap:wrap}

/* ─── FEEDBACK ─── */
.feedback{font-size:.85rem;margin-top:.3rem;min-height:1.2em}
.correct-fb{color:#16a34a}
.wrong-fb{color:#dc2626}

/* ─── NAV BUTTONS ─── */
.nav-buttons{display:flex;justify-content:space-between;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #e2e8f0}
.btn-prev,.btn-next{padding:.55rem 1.3rem;border:none;border-radius:8px;font-size:.9rem;cursor:pointer;transition:background .2s}
.btn-prev{background:#e2e8f0;color:#334155}
.btn-prev:hover{background:#cbd5e1}
.btn-next{background:#1e3a5f;color:#fff}
.btn-next:hover{background:#2d5f8a}

/* ─── STUDY PLAN PAGE ─── */
.study-plan-container{max-width:900px;margin:0 auto;padding:1rem 0}
.plan-intro{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:1.5rem 2rem;border-radius:12px;margin-bottom:1.5rem}
.plan-intro h1{margin:0 0 .75rem;font-size:1.6rem}
.plan-intro p{margin:.3rem 0;opacity:.95;font-size:.95rem}
.sp-principles{background:#fff5f5;border-left:4px solid #f56565;padding:1.2rem 1.5rem;margin:0 0 1.5rem;border-radius:4px}
.sp-principles h3{margin:0 0 .5rem;color:#c53030;font-size:1.1rem}
.sp-principles ul{list-style:none;padding:0;margin:0}
.sp-principles li{padding:.35rem 0;font-size:.9rem}
.sp-principles li::before{content:"\2713";color:#f56565;font-weight:700;margin-right:.5rem}
.week-card{background:#fff;border:2px solid #e2e8f0;border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1rem;transition:all .2s}
.week-card:hover{border-color:#667eea;box-shadow:0 4px 12px rgba(102,126,234,.12)}
.week-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.week-number{font-size:1.15rem;font-weight:700;color:#2d3748}
.week-badge{padding:.2rem .6rem;border-radius:20px;font-size:.78rem;font-weight:600;color:#fff}
.badge-new{background:#667eea}
.badge-review{background:#ed8936}
.badge-mixed{background:#9f7aea}
.sp-section-title{font-weight:600;color:#4a5568;font-size:.9rem;margin:.5rem 0 .25rem}
.sp-items{margin-left:1.2rem;margin-bottom:.5rem}
.sp-item{padding:.25rem 0;color:#2d3748;font-size:.88rem}
.sp-item::before{content:"\2192";margin-right:.4rem;color:#667eea}
.sp-allocation{font-size:.82rem;color:#64748b;padding:.5rem .75rem;background:#f8fafc;border-radius:6px;margin-top:.5rem}
.sp-pct{font-weight:700;color:#667eea}
@media(max-width:640px){.week-header{flex-direction:column;align-items:flex-start;gap:.4rem}}

/* ─── PROGRESS PAGE ─── */
.progress-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin:1.5rem 0}
.progress-card{background:#fff;border-radius:12px;padding:1rem;box-shadow:0 2px 8px rgba(0,0,0,.06);cursor:pointer;transition:transform .2s}
.progress-card:hover{transform:translateY(-2px)}
.progress-card h4{font-size:.95rem;color:#1e3a5f;margin-bottom:.2rem}
.progress-subtitle{font-size:.78rem;color:#94a3b8;margin-bottom:.5rem}
.progress-bar{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:99px;transition:width .4s ease}
.progress-text{font-size:.8rem;color:#64748b;margin-top:.3rem}
.total-progress{text-align:center;margin-top:2rem;padding:1.5rem;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.total-progress h2{color:#1e3a5f;margin-bottom:.8rem}
.progress-bar.total{height:12px;max-width:500px;margin:0 auto}
.btn-reset{margin-top:1rem;padding:.5rem 1.3rem;border:2px solid #ef4444;background:#fff;color:#ef4444;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:600;transition:all .2s}
.btn-reset:hover{background:#fee2e2}
.btn-reset-exercises{display:inline-block;margin-top:.5rem;padding:.35rem 1rem;border:1.5px solid #94a3b8;background:#fff;color:#64748b;border-radius:6px;cursor:pointer;font-size:.78rem;font-weight:500;transition:all .2s}
.btn-reset-exercises:hover{background:#f1f5f9;color:#334155;border-color:#64748b}

/* ═══════════════════════════════════════════════════
   LANDING / AUTH PAGE
   ═══════════════════════════════════════════════════ */

.auth-page{display:none;flex-direction:column;background:#f5f7fb;min-height:100vh;width:100%}
.auth-page.active{display:flex}

/* ── Utilities ── */
.lp-text-center{text-align:center}
.lp-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.lp-reveal.visible,.lp-reveal.is-visible{opacity:1;transform:none}

/* ── Sticky CTA bar ── */
.lp-sticky-cta{position:fixed;top:0;left:0;right:0;z-index:300;background:#1e3a5f;color:#fff;display:flex;align-items:center;justify-content:center;gap:1rem;padding:.6rem 1.5rem;transform:translateY(-100%);transition:transform .35s ease;pointer-events:none}
.lp-sticky-cta.visible{transform:translateY(0);pointer-events:auto}
.lp-sticky-cta-text{font-size:.88rem;color:rgba(255,255,255,.85)}
.lp-sticky-cta-btn{padding:.4rem 1rem;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .2s}
.lp-sticky-cta-btn:hover{opacity:.85}

/* ── Navbar ── */
.lp-navbar{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:.8rem 2rem;background:rgba(30,58,95,.95);backdrop-filter:blur(8px);transition:box-shadow .3s}
.lp-navbar.scrolled{box-shadow:0 2px 16px rgba(0,0,0,.25)}
.lp-navbar-logo{font-size:1.1rem;font-weight:700;color:#fff;text-decoration:none;letter-spacing:-.02em}
.lp-navbar-logo span{color:#60a5fa}
.lp-navbar-actions{display:flex;gap:.6rem;align-items:center}

/* ── CTA buttons ── */
.lp-btn-signin{padding:.45rem 1.1rem;border:2px solid rgba(255,255,255,.4);border-radius:8px;background:transparent;color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s}
.lp-btn-signin:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.lp-btn-trial{padding:.45rem 1.1rem;border:none;border-radius:8px;background:#3b82f6;color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:opacity .2s;display:inline-flex;flex-direction:column;align-items:center;line-height:1.2}
.lp-btn-trial:hover{opacity:.9}
.lp-btn-trial-lg{padding:.9rem 2rem;font-size:1rem;border-radius:12px}
.lp-btn-signin-lg{padding:.9rem 1.6rem;font-size:.95rem;border-radius:12px}
.lp-btn-sub{font-size:.72rem;font-weight:400;opacity:.75;margin-top:.15rem}

/* ── Hero ── */
.lp-hero{width:100%;background:linear-gradient(135deg,#1e3a5f 0%,#2d5f8a 50%,#3b82f6 100%);color:#fff;padding:7rem 2rem 5rem;position:relative;overflow:hidden}
.lp-hero::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:60px;background:linear-gradient(to top,#f5f7fb,transparent)}
.lp-hero-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25;pointer-events:none}
.lp-hero-blob-1{width:500px;height:500px;background:#60a5fa;top:-100px;right:-120px}
.lp-hero-blob-2{width:350px;height:350px;background:#818cf8;bottom:-80px;left:-60px}
.lp-hero-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;position:relative;z-index:1}
.lp-hero-eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#93c5fd;background:rgba(255,255,255,.08);padding:.3rem .8rem;border-radius:20px;margin-bottom:1rem}
.lp-hero-h1{font-size:3rem;font-weight:800;color:#fff;line-height:1.12;margin-bottom:1rem;border:none;padding:0;background:none}
.lp-hero-highlight{color:#60a5fa}
.lp-hero-sub{font-size:1.05rem;color:rgba(255,255,255,.8);margin-bottom:1.6rem;max-width:480px;line-height:1.65}
.lp-hero-proof{display:flex;align-items:center;gap:.8rem;margin-bottom:1.6rem}
.lp-hero-proof-avatars{display:flex}
.lp-hero-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff;border:2px solid rgba(255,255,255,.6);margin-left:-8px}
.lp-hero-proof-avatars .lp-hero-avatar:first-child{margin-left:0}
.lp-hero-proof-text{font-size:.82rem;color:rgba(255,255,255,.7);max-width:200px;line-height:1.4}
.lp-hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;align-items:flex-start}

/* Hero mockup card */
.lp-hero-mockup{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:16px;overflow:hidden;backdrop-filter:blur(6px)}
.lp-mockup-chrome{display:flex;align-items:center;gap:.4rem;padding:.6rem 1rem;background:rgba(0,0,0,.2)}
.lp-mockup-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.lp-mockup-chrome-title{margin-left:.4rem;font-size:.75rem;color:rgba(255,255,255,.5);font-weight:500}
.lp-mockup-body{padding:1.5rem}
.lp-mockup-case-tag{display:inline-block;background:rgba(59,130,246,.4);color:#93c5fd;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.2rem .7rem;border-radius:20px;margin-bottom:.7rem}
.lp-mockup-header{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.5);margin-bottom:.8rem}
.lp-mockup-q{font-size:1rem;font-weight:600;margin-bottom:1rem;color:#fff}
.lp-mockup-opts{display:flex;flex-direction:column;gap:.4rem}
.lp-mockup-opt{padding:.5rem .9rem;border:2px solid rgba(255,255,255,.2);border-radius:8px;font-size:.88rem;color:rgba(255,255,255,.75);cursor:default}
.lp-mockup-opt-correct{border-color:#22c55e;background:rgba(34,197,94,.15);color:#fff}
.lp-mockup-opt-wrong{border-color:#ef4444;background:rgba(239,68,68,.1);color:rgba(255,255,255,.5);text-decoration:line-through}
.lp-mockup-feedback{display:flex;align-items:center;gap:.5rem;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:8px;padding:.6rem .9rem;margin-top:.8rem;font-size:.82rem;color:rgba(255,255,255,.85)}
.lp-mockup-feedback-icon{color:#22c55e;font-weight:700;font-size:1rem}
.lp-mockup-progress{display:flex;align-items:center;gap:.7rem;margin-top:1rem}
.lp-mockup-progress-bar{flex:1;height:5px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden}
.lp-mockup-progress-fill{height:100%;background:#3b82f6;border-radius:3px;transition:width .4s ease}
.lp-mockup-progress-text{font-size:.72rem;color:rgba(255,255,255,.45);white-space:nowrap}

/* ── Proof / Stats bar ── */
.lp-proof-bar{background:#fff;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;padding:2.5rem 2rem}
.lp-proof-bar-grid{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.lp-proof-stat{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:0 2rem;text-align:center}
.lp-proof-num{font-size:2.2rem;font-weight:800;color:#1e3a5f;line-height:1;display:inline}
.lp-proof-unit{font-size:1.5rem;font-weight:800;color:#3b82f6;line-height:1;display:inline}
.lp-proof-label{font-size:.8rem;color:#64748b;font-weight:500;margin-top:.1rem}
.lp-proof-divider{width:1px;height:40px;background:#e2e8f0;flex-shrink:0}

/* ── Pain section ── */
.lp-pain{padding:5rem 2rem;background:#f8fafc}
.lp-pain-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.lp-pain-text .lp-section-title{text-align:left;margin-bottom:.8rem}
.lp-pain-intro{font-size:.95rem;color:#64748b;line-height:1.7;margin-bottom:1.5rem}
.lp-pain-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}
.lp-pain-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:#334155;line-height:1.5}
.lp-pain-x{color:#ef4444;font-size:1rem;font-weight:700;flex-shrink:0;margin-top:.05rem}
.lp-pain-after{display:flex;flex-direction:column;gap:1rem}
.lp-pain-after-card{background:#fff;border:2px solid #22c55e;border-radius:16px;padding:2rem;box-shadow:0 4px 20px rgba(34,197,94,.1)}
.lp-pain-after-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#16a34a;margin-bottom:1rem}
.lp-pain-after-list{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;flex-direction:column;gap:.75rem}
.lp-pain-after-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:#334155;line-height:1.5}
.lp-pain-check{color:#22c55e;font-size:1rem;font-weight:700;flex-shrink:0;margin-top:.05rem}
.lp-pain-cta{width:100%;padding:.8rem;background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;border:none;border-radius:10px;font-size:.95rem;font-weight:700;cursor:pointer;transition:opacity .2s}
.lp-pain-cta:hover{opacity:.88}

/* ── Section headings ── */
.lp-section-eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#3b82f6;background:#eff6ff;padding:.3rem .8rem;border-radius:20px;margin-bottom:.8rem}
.lp-section-inner{max-width:1100px;margin:0 auto}
.lp-section-title{font-size:2rem;font-weight:700;color:#1e3a5f;margin-bottom:.5rem;border:none;padding:0;background:none}
.lp-section-title-left{text-align:left}
.lp-section-subtitle{font-size:1.05rem;color:#64748b;margin-bottom:3rem}

/* ── Features / Bento Grid ── */
.lp-features{padding:5rem 2rem;background:#f5f7fb}
.lp-bento-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.5rem}
.lp-bento-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:1.8rem;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;gap:.6rem}
.lp-bento-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.07)}
.lp-bento-large{grid-column:span 2}
.lp-bento-wide{grid-column:span 2}
.lp-bento-icon{font-size:1.8rem;line-height:1}
.lp-bento-card h3{font-size:1rem;font-weight:700;color:#1e3a5f;margin:0;border:none;padding:0}
.lp-bento-card p{font-size:.88rem;color:#64748b;line-height:1.6;margin:0}

/* SR demo widget */
.lp-bento-sr-demo{margin-top:.5rem;display:flex;flex-direction:column;gap:.5rem}
.lp-sr-bar{display:flex;align-items:center;gap:.6rem}
.lp-sr-label{font-size:.78rem;color:#334155;width:80px;flex-shrink:0}
.lp-sr-track{flex:1;height:7px;background:#f1f5f9;border-radius:4px;overflow:hidden}
.lp-sr-fill{height:100%;background:#22c55e;border-radius:4px}
.lp-sr-fill-med{background:#f59e0b}
.lp-sr-fill-low{background:#ef4444}
.lp-sr-pct{font-size:.72rem;color:#64748b;width:70px;flex-shrink:0;text-align:right}

/* Exercise type chips */
.lp-bento-ex-types{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.lp-ex-chip{font-size:.72rem;font-weight:600;background:#eff6ff;color:#1d4ed8;padding:.2rem .6rem;border-radius:20px;border:1px solid #bfdbfe}

/* Week pills */
.lp-bento-weeks{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.lp-week-pill{font-size:.75rem;font-weight:600;padding:.3rem .8rem;border-radius:20px;background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}
.lp-week-done{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.lp-week-active{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;font-weight:700}
.lp-week-review{background:#fff7ed;color:#c2410c;border-color:#fed7aa}

/* ── How It Works ── */
.lp-how{padding:5rem 2rem;background:#fff}
.lp-steps{display:flex;justify-content:center;gap:2rem;margin-top:2rem;position:relative;flex-wrap:wrap}
.lp-step{text-align:center;flex:1;max-width:280px;position:relative}
.lp-step-num{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#1e3a5f,#3b82f6);color:#fff;font-size:1.3rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto .8rem}
.lp-step h3{font-size:1.05rem;color:#1e3a5f;margin-bottom:.4rem;border:none;padding:0}
.lp-step p{font-size:.88rem;color:#64748b;line-height:1.5}
.lp-step-connector{position:absolute;top:28px;left:calc(50% + 40px);width:calc(100% - 80px);height:2px;background:#e2e8f0}
.lp-step:last-child .lp-step-connector{display:none}

/* ── Testimonials ── */
.lp-testimonials{padding:5rem 2rem;background:#f8fafc}
.lp-testimonials-single{display:flex;justify-content:center}
.lp-tcard{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:2.5rem;box-shadow:0 4px 16px rgba(0,0,0,.06);max-width:640px;width:100%}
.lp-tcard-single{max-width:640px}
.lp-tcard-stars{color:#f59e0b;font-size:1.1rem;letter-spacing:.1rem;margin-bottom:1rem}
.lp-tcard-quote{font-size:1.05rem;color:#334155;line-height:1.7;margin-bottom:1.5rem;font-style:italic}
.lp-tcard-author{display:flex;align-items:center;gap:.8rem}
.lp-tcard-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:#fff;flex-shrink:0}
.lp-tcard-author strong{display:block;font-size:.95rem;color:#1e3a5f}
.lp-tcard-author span{font-size:.8rem;color:#64748b}

/* ── Pricing ── */
.lp-pricing{padding:5rem 2rem;background:#f8fafc}
.lp-pricing-grid{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}
.lp-pricing-card{background:#fff;border:2px solid #e2e8f0;border-radius:16px;padding:2.5rem 2rem;text-align:center;width:280px;position:relative;transition:transform .2s,box-shadow .2s}
.lp-pricing-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.lp-pricing-card.popular{border-color:#3b82f6;box-shadow:0 4px 20px rgba(59,130,246,.15)}
.lp-pricing-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#3b82f6;color:#fff;font-size:.75rem;font-weight:700;padding:.3rem 1rem;border-radius:20px;white-space:nowrap}
.lp-pricing-badge-alt{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#16a34a;color:#fff;font-size:.75rem;font-weight:700;padding:.3rem 1rem;border-radius:20px;white-space:nowrap}
.lp-pricing-card h3{font-size:1rem;color:#64748b;margin-bottom:.5rem;font-weight:500;border:none;padding:0}
.lp-pricing-amount{font-size:2.5rem;font-weight:800;color:#1e3a5f;margin-bottom:.3rem}
.lp-pricing-amount span{font-size:.9rem;font-weight:400;color:#94a3b8}
.lp-pricing-save{font-size:.82rem;color:#16a34a;font-weight:600;margin-bottom:1.2rem;min-height:1.2em}
.lp-pricing-features{list-style:none;text-align:left;margin-bottom:1.5rem;padding:0}
.lp-pricing-features li{padding:.35rem 0;font-size:.88rem;color:#334155;border-bottom:1px solid #f1f5f9}
.lp-pricing-features li::before{content:'\2713';color:#22c55e;font-weight:700;margin-right:.5rem}
.lp-pricing-cta{display:block;width:100%;padding:.7rem;border:none;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.lp-pricing-cta.primary{background:linear-gradient(135deg,#1e3a5f,#3b82f6);color:#fff}
.lp-pricing-cta.primary:hover{opacity:.9}
.lp-pricing-cta.secondary{background:#f1f5f9;color:#1e3a5f;border:2px solid #e2e8f0}
.lp-pricing-cta.secondary:hover{border-color:#3b82f6;background:#f0f7ff}
.lp-pricing-footnote{text-align:center;font-size:.82rem;color:#94a3b8;margin-top:1.5rem}

/* ── FAQ ── */
.lp-faq{padding:5rem 2rem;background:#fff}
.lp-faq-inner{max-width:760px}
.lp-faq-list{display:flex;flex-direction:column;gap:.5rem;margin-top:2rem}
.lp-faq-item{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff}
.lp-faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.3rem;background:none;border:none;text-align:left;font-size:.97rem;font-weight:600;color:#1e3a5f;cursor:pointer;transition:background .2s;font-family:inherit}
.lp-faq-q:hover{background:#f8fafc}
.lp-faq-q[aria-expanded="true"]{background:#f8fafc}
.lp-faq-chevron{font-size:1.2rem;flex-shrink:0;color:#94a3b8;transition:transform .3s;display:inline-block}
.lp-faq-q[aria-expanded="true"] .lp-faq-chevron{transform:rotate(180deg)}
.lp-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.lp-faq-a.open{max-height:400px}
.lp-faq-a p{padding:.2rem 1.3rem 1.2rem;margin:0;font-size:.9rem;color:#64748b;line-height:1.7}

/* ── Footer ── */
.lp-footer{background:#1e293b;color:#fff;padding:4rem 2rem 2rem}
.lp-footer-inner{display:flex;flex-direction:column;gap:3rem}
.lp-footer-cta-block{text-align:center}
.lp-footer-cta-block h2{font-size:1.9rem;font-weight:700;color:#fff;margin-bottom:.6rem;border:none;padding:0}
.lp-footer-cta-block p{color:rgba(255,255,255,.6);margin-bottom:1.8rem;font-size:1rem;max-width:500px;margin-left:auto;margin-right:auto}
.lp-footer-trial-btn{background:#3b82f6;border:none}
.lp-footer-bottom{display:flex;flex-direction:column;align-items:center;gap:1rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1)}
.lp-footer-logo{font-size:1rem;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:-.01em}
.lp-footer-links{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}
.lp-footer-links a{font-size:.85rem;color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s}
.lp-footer-links a:hover{color:#fff}
.lp-footer-copy{font-size:.78rem;color:rgba(255,255,255,.25)}

/* ── Auth Modal ── */
.auth-modal-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(10,18,40,.72);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.auth-modal-overlay.open{opacity:1;visibility:visible}
.auth-modal{position:relative;transform:translateY(20px) scale(.97);transition:transform .35s cubic-bezier(.22,1,.36,1);max-height:90vh;overflow-y:auto;border-radius:24px;box-shadow:0 32px 80px rgba(0,0,0,.35)}
.auth-modal-overlay.open .auth-modal{transform:translateY(0) scale(1)}
.auth-modal-close{position:absolute;top:.9rem;right:.9rem;width:30px;height:30px;border:none;background:rgba(255,255,255,.15);border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s;z-index:2}
.auth-modal-close:hover{background:rgba(255,255,255,.25)}

/* Auth container */
.auth-container{
  background:#fff;border-radius:24px;
  max-width:380px;width:90vw;
  overflow:hidden;
  position:relative;
}
/* Branded header */
.auth-container::before{
  content:'';display:block;
  height:8px;
  background:linear-gradient(90deg,#1e3a5f,#3b82f6,#60a5fa);
}
.auth-container-inner{padding:2rem 2rem 1.8rem}
.auth-container h2{font-size:1.35rem;font-weight:800;text-align:center;color:#0f2544;margin-bottom:.3rem;border-bottom:none}
.auth-subtitle{text-align:center;color:#64748b;font-size:.88rem;margin-bottom:1.8rem}

/* Google button */
.auth-google-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:.75rem;
  padding:.85rem 1rem;
  border:1.5px solid #e2e8f0;border-radius:12px;
  background:#fff;font-size:.95rem;cursor:pointer;
  transition:all .2s;color:#1e293b;font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.auth-google-btn:hover{border-color:#3b82f6;background:#f8faff;box-shadow:0 4px 16px rgba(59,130,246,.15);transform:translateY(-1px)}
.auth-google-btn:active{transform:translateY(0)}

/* Error */
.auth-error{background:#fee2e2;color:#991b1b;padding:.6rem 1rem;border-radius:8px;font-size:.85rem;margin-top:1rem}

/* Note below Google button */
.auth-note{text-align:center;margin-top:1.1rem;font-size:.74rem;color:#b0bac6;line-height:1.55}

/* ═══════════════════════════════════════════════════
   PRICING SELECTION MODAL
   ═══════════════════════════════════════════════════ */

.plan-modal-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.65);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;padding:1rem}
.plan-modal-overlay.open{opacity:1;visibility:visible}
.plan-modal{background:#fff;border-radius:20px;padding:2.5rem 2rem 2rem;max-width:680px;width:100%;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.18);transform:translateY(20px) scale(.97);transition:transform .3s ease}
.plan-modal-overlay.open .plan-modal{transform:none}
.plan-modal-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border:none;background:rgba(0,0,0,.06);border-radius:50%;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#64748b;transition:background .2s;line-height:1}
.plan-modal-close:hover{background:rgba(0,0,0,.12);color:#1e293b}
.plan-modal-header{text-align:center;margin-bottom:2rem}
.plan-modal-header h2{font-size:1.5rem;font-weight:700;color:#1e3a5f;margin-bottom:.3rem;border:none;padding:0}
.plan-modal-header p{font-size:.9rem;color:#64748b}
.plan-modal-cards{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}
.plan-modal-cards .pricing-card{flex:1;min-width:160px;max-width:200px;padding:1.5rem 1rem}
.plan-modal-cards .pricing-price{font-size:1.8rem}
.plan-modal-note{text-align:center;font-size:.78rem;color:#94a3b8;margin-top:.5rem}

/* ── Checkout loading overlay ── */
.checkout-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(15,37,68,.72);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .25s,visibility .25s;
}
.checkout-overlay.active{opacity:1;visibility:visible;}
.checkout-overlay-box{
  background:#fff;border-radius:20px;
  padding:2.5rem 2.5rem 2rem;
  text-align:center;max-width:320px;width:90%;
  box-shadow:0 24px 64px rgba(0,0,0,.18);
}
.checkout-overlay-spinner{
  width:52px;height:52px;
  border:4px solid #e2e8f0;border-top-color:#3b82f6;
  border-radius:50%;
  animation:spin .75s linear infinite;
  margin:0 auto 1.4rem;
}
.checkout-overlay-title{
  font-size:1.05rem;font-weight:700;color:#1e3a5f;margin:0 0 .4rem;
}
.checkout-overlay-sub{
  font-size:.82rem;color:#94a3b8;margin:0;
}

@media(max-width:600px){
  .plan-modal{padding:2rem 1.2rem 1.5rem}
  .plan-modal-cards{flex-direction:column;align-items:center}
  .plan-modal-cards .pricing-card{max-width:100%;width:100%}
}

/* ═══════════════════════════════════════════════════
   TRIAL BANNER
   ═══════════════════════════════════════════════════ */

.trial-banner{position:fixed;top:0;left:220px;right:0;z-index:90;display:flex;align-items:center;justify-content:center;gap:1rem;padding:.5rem 1rem;background:linear-gradient(90deg,#3b82f6,#2563eb);color:#fff;font-size:.85rem;font-weight:500}
.trial-banner-urgent{background:linear-gradient(90deg,#f59e0b,#d97706)}
.trial-banner-btn{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3);padding:.25rem .8rem;border-radius:6px;font-size:.8rem;cursor:pointer;transition:background .2s}
.trial-banner-btn:hover{background:rgba(255,255,255,.3)}

@media(max-width:900px){
  .trial-banner{left:0}
}

/* ═══════════════════════════════════════════════════
   LOADING PAGE
   ═══════════════════════════════════════════════════ */

.loading-page{display:none;min-height:100vh;background:#f5f7fb;width:100%}
.loading-page.active{display:flex;align-items:center;justify-content:center}
.loading-container{text-align:center;padding:3rem}
.loading-container h2{color:#1e3a5f;margin-bottom:.5rem;font-size:1.3rem}
.loading-container p{color:#64748b;font-size:.95rem}
.loading-spinner{width:48px;height:48px;border:4px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 1.5rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════
   TRIAL EXPIRED PAGE
   ═══════════════════════════════════════════════════ */

.trial-expired-page{display:none;min-height:100vh;background:#f5f7fb;width:100%}
.trial-expired-page.active{display:flex;align-items:center;justify-content:center}
.trial-expired-container{text-align:center;max-width:480px;padding:3rem;background:#fff;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.1);margin:2rem}
.trial-expired-icon{font-size:3rem;margin-bottom:1rem}
.trial-expired-container h1{font-size:1.6rem;margin-bottom:.8rem}
.trial-expired-container>p{color:#64748b;font-size:.95rem;margin-bottom:1.5rem;line-height:1.5}
.trial-expired-features{text-align:left;margin-bottom:2rem}
.trial-expired-features div{padding:.4rem 0;font-size:.9rem;color:#334155}
/* Pricing cards */
.pricing-cards{display:flex;gap:.8rem;margin-bottom:1.5rem;flex-wrap:wrap;justify-content:center}
.pricing-card{flex:1;min-width:130px;max-width:170px;background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;padding:1.2rem .8rem;text-align:center;position:relative;transition:all .2s}
.pricing-card:hover{border-color:#3b82f6;transform:translateY(-2px)}
.pricing-card h3{font-size:.9rem;color:#334155;margin-bottom:.4rem}
.pricing-price{font-size:1.6rem;font-weight:800;color:#1e3a5f;margin-bottom:.2rem}
.pricing-price span{font-size:.8rem;font-weight:400;color:#64748b}
.pricing-savings{font-size:.75rem;color:#16a34a;font-weight:600;margin-bottom:.6rem}
.pricing-card-popular{border-color:#3b82f6;background:#eff6ff}
.pricing-badge{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);background:#3b82f6;color:#fff;font-size:.68rem;font-weight:700;padding:.15rem .6rem;border-radius:10px;white-space:nowrap}
.btn-subscribe{display:block;width:100%;padding:.6rem;background:linear-gradient(135deg,#1e3a5f,#3b82f6);color:#fff;border:none;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.btn-subscribe:hover{opacity:.9}
@media(max-width:768px){.pricing-cards{flex-direction:column;align-items:center}.pricing-card{max-width:100%;min-width:0;width:100%}}
.btn-logout-trial{display:block;width:100%;padding:.6rem;background:none;border:2px solid #e2e8f0;border-radius:10px;color:#64748b;font-size:.9rem;cursor:pointer;transition:all .2s}
.btn-logout-trial:hover{border-color:#cbd5e1;background:#f8fafc}

/* ═══════════════════════════════════════════════════
   TRIAL EXPIRED PAGE — REDESIGN (te-* prefix)
   ═══════════════════════════════════════════════════ */

/* Page shell */
.trial-expired-page {
    display: none;
    min-height: 100vh;
    width: 100%;
    background: #f0f4fa;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    position: relative;
    overflow: hidden;
}
.trial-expired-page.active {
    display: flex;
    align-items: stretch;
}

/* Decorative background blobs */
.te-blob {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.te-blob-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59,130,246,.18) 0%, transparent 70%);
    top: -200px;
    right: -180px;
}
.te-blob-2 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(30,58,95,.12) 0%, transparent 70%);
    bottom: -150px;
    left: -120px;
}

/* Two-column layout */
.te-layout {
    display: grid;
    grid-template-columns: 1fr 440px;
    min-height: 100vh;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    gap: 0;
    position: relative;
    z-index: 1;
    align-items: start;
}

/* ── LEFT COLUMN ── */
.te-left {
    padding: 3.5rem 3rem 3.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    min-height: 100vh;
    justify-content: center;
}

/* Brand wordmark */
.te-brand {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e3a5f;
    letter-spacing: -.02em;
    margin-bottom: -.4rem;
}
.te-brand span { color: #3b82f6; }

/* Status badge */
.te-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .75rem;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    padding: .3rem .85rem;
    border-radius: 99px;
    width: fit-content;
}
.te-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
    /* Slow pulse — draws attention without being annoying */
    animation: te-pulse 2.4s ease-in-out infinite;
}
@keyframes te-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .45; transform: scale(.75); }
}

/* Headline */
.te-headline {
    font-size: 2.8rem;
    font-weight: 800;
    color: #0f2544;
    line-height: 1.13;
    letter-spacing: -.03em;
    margin: 0;
    border: none;
    padding: 0;
}
.te-headline-accent {
    color: #3b82f6;
    /* Subtle underline using box-shadow — pure CSS, no extra element */
    text-decoration: underline;
    text-decoration-color: rgba(59,130,246,.3);
    text-underline-offset: 5px;
}

/* Sub-headline */
.te-subhead {
    font-size: .97rem;
    color: #475569;
    line-height: 1.7;
    max-width: 500px;
    margin: -.4rem 0 0;
}

/* Feature list */
.te-feature-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.te-feature-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}
.te-feature-icon {
    flex-shrink: 0;
    margin-top: .15rem;
    line-height: 0;
}
.te-feature-text {
    font-size: .88rem;
    color: #334155;
    line-height: 1.55;
}
.te-feature-text strong {
    color: #1e3a5f;
    font-weight: 600;
}

/* Testimonial */
.te-testimonial {
    margin: .4rem 0 0;
    padding: 1.25rem 1.4rem;
    background: #fff;
    border-left: 3px solid #3b82f6;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.te-testimonial-stars {
    color: #f59e0b;
    font-size: .85rem;
    letter-spacing: .05em;
    margin-bottom: .55rem;
}
.te-testimonial-quote {
    font-size: .88rem;
    color: #334155;
    line-height: 1.65;
    font-style: italic;
    margin: 0 0 .9rem;
}
.te-testimonial-author {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.te-testimonial-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.te-testimonial-name {
    font-size: .8rem;
    color: #64748b;
}
.te-testimonial-name strong {
    color: #1e3a5f;
}

/* ── RIGHT COLUMN ── */
.te-right {
    background: #fff;
    border-left: 1px solid #e2e8f0;
    min-height: 100vh;
    padding: 3.5rem 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.4rem;
    position: sticky;
    top: 0;
    /* Subtle inner shadow to lift it from the page */
    box-shadow: -4px 0 24px rgba(0,0,0,.04);
}

/* Pricing header */
.te-pricing-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #3b82f6;
    margin: 0;
}
.te-pricing-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f2544;
    margin: .3rem 0 .2rem;
    border: none;
    padding: 0;
    line-height: 1.2;
    letter-spacing: -.02em;
}
.te-pricing-subtitle {
    font-size: .82rem;
    color: #94a3b8;
    margin: 0;
}
.te-pricing-header {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Pricing cards stack */
.te-cards {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

/* Individual plan card */
.te-card {
    position: relative;
    border-radius: 14px;
    border: 2px solid #e2e8f0;
    background: #fafbfc;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    overflow: visible;
}
.te-card:hover {
    border-color: #93c5fd;
    transform: translateX(2px);
    box-shadow: 0 4px 18px rgba(59,130,246,.09);
}

/* Featured (6-month) card override */
.te-card-featured {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #eff6ff 0%, #f0f7ff 100%);
    box-shadow: 0 4px 20px rgba(59,130,246,.13);
}
.te-card-featured:hover {
    border-color: #2563eb;
    transform: translateX(2px);
    box-shadow: 0 8px 28px rgba(59,130,246,.18);
}

/* Badge */
.te-card-badge {
    position: absolute;
    top: -11px;
    left: 1.25rem;
    background: #3b82f6;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: 99px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.te-card-badge-green {
    background: #16a34a;
}

/* Card inner layout */
.te-card-inner {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.te-card-top {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.te-card-name {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #64748b;
}
.te-card-featured .te-card-name {
    color: #2563eb;
}
.te-card-price-row {
    display: flex;
    align-items: baseline;
    gap: .15rem;
}
.te-card-price {
    font-size: 1.9rem;
    font-weight: 800;
    color: #0f2544;
    line-height: 1;
    letter-spacing: -.03em;
}
.te-card-featured .te-card-price {
    color: #1d4ed8;
}
.te-card-period {
    font-size: .82rem;
    color: #94a3b8;
    font-weight: 400;
}
.te-card-save {
    font-size: .75rem;
    font-weight: 600;
    color: #16a34a;
    min-height: 1.1em;
}
.te-card-save-placeholder {
    visibility: hidden;
}

/* CTA button inside card */
.te-card-cta {
    display: block;
    width: 100%;
    padding: .65rem 1rem;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: opacity .2s, transform .15s, background .2s;
    text-align: center;
    line-height: 1.3;
}
.te-card-cta:hover {
    opacity: .88;
    transform: translateY(-1px);
}
.te-card-cta-primary {
    background: linear-gradient(135deg, #1e3a5f, #3b82f6);
    color: #fff;
    box-shadow: 0 4px 14px rgba(59,130,246,.35);
}
.te-card-cta-secondary {
    background: #f1f5f9;
    color: #1e3a5f;
    border: 1.5px solid #e2e8f0;
}
.te-card-cta-secondary:hover {
    background: #e8f0fe;
    border-color: #93c5fd;
}

/* Guarantee line */
.te-guarantee {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    color: #94a3b8;
    margin: -.2rem 0 0;
}
.te-guarantee-icon {
    flex-shrink: 0;
    color: #f59e0b;
}

/* Sign out */
.te-signout {
    display: block;
    width: 100%;
    padding: .55rem;
    background: none;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    color: #94a3b8;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
    text-align: center;
    font-family: inherit;
}
.te-signout:hover {
    border-color: #cbd5e1;
    color: #64748b;
    background: #f8fafc;
}

/* ── RESPONSIVE ── */

/* Tablet: narrow right column */
@media (max-width: 1024px) {
    .te-layout {
        grid-template-columns: 1fr 380px;
    }
    .te-left {
        padding: 3rem 2rem 3rem 2rem;
    }
    .te-headline {
        font-size: 2.4rem;
    }
}

/* Single column below 768px */
@media (max-width: 768px) {
    .trial-expired-page.active {
        display: block;
        overflow-y: auto;
    }
    .te-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .te-left {
        min-height: auto;
        padding: 2.5rem 1.5rem 1.5rem;
        gap: 1.25rem;
        justify-content: flex-start;
    }
    .te-headline {
        font-size: 2rem;
    }
    .te-right {
        min-height: auto;
        border-left: none;
        border-top: 1px solid #e2e8f0;
        box-shadow: none;
        position: static;
        padding: 2rem 1.5rem 3rem;
        gap: 1.2rem;
    }
    /* Stack cards vertically with more space on mobile */
    .te-card-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: .9rem;
    }
    .te-card-cta {
        width: 100%;
        padding: .75rem 1rem;
        font-size: .88rem;
        text-align: center;
    }
    .te-card-price {
        font-size: 2.1rem;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .te-left {
        padding: 2rem 1.2rem 1.2rem;
    }
    .te-headline {
        font-size: 1.75rem;
    }
    .te-right {
        padding: 1.75rem 1.2rem 2.5rem;
    }
    .te-blob-1, .te-blob-2 { display: none; }
}

/* ═══════════════════════════════════════════════════
   ONBOARDING PAGE
   ═══════════════════════════════════════════════════ */

.onboarding-page{display:none;min-height:100vh;background:#f5f7fb;width:100%}
.onboarding-page.active{display:flex;align-items:center;justify-content:center}
.onboarding-container{max-width:520px;width:100%;padding:3rem;background:#fff;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.1);margin:2rem}
.onboarding-container h1{font-size:1.5rem;text-align:center;margin-bottom:2rem}
.onboarding-step{margin-bottom:2rem}
.onboarding-step h2{font-size:1.05rem;border-bottom:none;margin:0 0 .8rem;color:#1e3a5f}
.onboarding-options{display:flex;flex-direction:column;gap:.5rem}
.onboarding-option{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border:2px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:all .2s;font-size:.9rem}
.onboarding-option:hover{border-color:#3b82f6;background:#f0f7ff}
.onboarding-option input[type="radio"]{accent-color:#3b82f6}
.onboarding-option input[type="radio"]:checked+span{font-weight:600;color:#1e3a5f}
.onboarding-submit{width:100%;margin-top:1rem}

/* ═══════════════════════════════════════════════════
   DASHBOARD — REDESIGN
   ═══════════════════════════════════════════════════ */

/* ── Two-column shell ── */
.dash-shell {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.5rem;
  padding: 3.5rem 2rem 3rem;
  align-items: start;
}
.dash-col-main {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  min-width: 0;
}
.dash-col-right {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: sticky;
  top: 1.8rem;
}

/* ── Header ── */
.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.dash-header-text { flex: 1; min-width: 0; }
.dash-greeting {
  font-size: 1.7rem;
  font-weight: 800;
  color: #0f2544;
  margin: 0 0 .2rem;
  border-bottom: none;
  padding: 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.dash-subheading { font-size: .9rem; color: #64748b; margin: 0; }
.dash-header-right {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
  padding-top: .3rem;
}
/* Language toggle */
.dash-lang-toggle {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: .3rem .5rem;
  display: flex; align-items: center; gap: .25rem;
  cursor: pointer; font-size: .78rem; font-weight: 600;
  transition: border-color .2s; flex-shrink: 0;
}
.dash-lang-toggle:hover { border-color: #94a3b8; }
.dash-lang-opt { color: #94a3b8; transition: color .2s; }
.dash-lang-opt.active { color: #1e3a5f; }
.dash-lang-sep { color: #e2e8f0; font-size: .7rem; }

/* Empty review state */
.dash-empty-review {
  background: #fff;
  border-radius: 14px;
  padding: 1.8rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  border: 1.5px dashed #e2e8f0;
}
.dash-empty-review-icon { font-size: 2rem; margin-bottom: .5rem; }
.dash-empty-review strong { display: block; font-size: 1rem; color: #1e293b; margin-bottom: .3rem; }
.dash-empty-review p { font-size: .84rem; color: #64748b; margin: 0; }
.dash-streak-pill {
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff;
  padding: .38rem 1rem;
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(239,68,68,.3);
}

/* ── Stats row ── */
.dash-stats-row-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.dash-stat-card-new {
  background: #fff;
  border-radius: 14px;
  padding: 1.1rem 1rem 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: .18rem;
  transition: transform .2s, box-shadow .2s;
}
.dash-stat-card-new:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.dash-stat-icon-new { font-size: 1.25rem; margin-bottom: .1rem; }
.dash-stat-value-new {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f2544;
  line-height: 1.1;
}
.dash-stat-value-new span {
  font-size: 1rem;
  font-weight: 500;
  color: #94a3b8;
}
.dash-stat-label-new {
  font-size: .72rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.dash-goal-bar-track {
  height: 5px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
  margin-top: .55rem;
}
.dash-goal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  border-radius: 99px;
  transition: width .4s ease;
}

/* ── Hero lesson card ── */
.dash-hero-card {
  background: linear-gradient(140deg, #0f2544 0%, #1a3a6b 55%, #1e4d82 100%);
  border-radius: 16px;
  padding: 1.6rem 1.8rem 1.5rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.dash-hero-card::before {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 160px; height: 160px;
  background: rgba(255,255,255,.03);
  border-radius: 50%;
}
.dash-hero-label {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: .65rem;
}
.dash-hero-icon {
  font-size: 2rem;
  position: absolute;
  top: 1.4rem; right: 1.8rem;
  opacity: .35;
}
.dash-hero-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .5rem;
  border-bottom: none;
  padding: 0;
  max-width: 72%;
  line-height: 1.3;
}
.dash-hero-desc {
  font-size: .85rem;
  color: rgba(255,255,255,.65);
  margin: 0 0 1rem;
  line-height: 1.5;
}
.dash-hero-meta {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 1.3rem;
}
.dash-hero-meta-item { font-size: .78rem; color: rgba(255,255,255,.55); }
.dash-hero-cta {
  display: inline-block;
  padding: .55rem 1.5rem;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .15s;
  box-shadow: 0 4px 14px rgba(59,130,246,.4);
}
.dash-hero-cta:hover { background: #2563eb; transform: translateY(-1px); }

/* ── Section titles ── */
.dash-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 .8rem;
  border-bottom: none;
  padding: 0;
}

/* ── Review section ── */
.dash-review-section {
  display: flex;
  flex-direction: column;
}
.dash-empty-state {
  font-size: .88rem;
  color: #94a3b8;
  padding: .4rem 0;
}

/* Mistake cards */
.dash-mistake-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; background: #fff; border-radius: 12px;
  padding: .9rem 1.1rem; margin-bottom: .5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  border-left: 4px solid #f87171;
  transition: transform .15s;
}
.dash-mistake-card:hover { transform: translateX(2px); }
.dash-mistake-info {
  display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0;
}
.dash-mistake-text { display: flex; flex-direction: column; min-width: 0; }
.dash-mistake-text strong {
  font-size: .88rem; color: #1e3a5f;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.dash-mistake-text span { font-size: .76rem; color: #94a3b8; margin-top: .1rem; }
.btn-retry {
  padding: .3rem .85rem; background: #fff0f0; color: #ef4444;
  border: 1px solid #fecaca; border-radius: 8px; font-size: .78rem;
  cursor: pointer; white-space: nowrap; transition: all .2s; flex-shrink: 0;
}
.btn-retry:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* ── Mistakes Page ── */
#mistakes-page {
  padding: 3.5rem 2.5rem 3rem;
  max-width: 960px;
}
#mistakes-page h1 { margin-bottom: .25rem; }
#mistakes-page .subtitle { margin-bottom: 1.5rem; color: #64748b; }

.mistakes-section-group {
  margin-bottom: 1.5rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.mistakes-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.25rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.mistakes-section-header h3 {
  color: #1e3a5f;
  font-size: 1rem;
  margin: 0;
}
.mistakes-section-count {
  font-size: .8rem;
  color: #64748b;
  margin-left: .5rem;
}
.btn-practice-mistakes {
  padding: .45rem 1rem;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.btn-practice-mistakes:hover { background: #2563eb; }

.mistake-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .7rem;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  min-height: 48px;
}
.mistake-item:last-child { border-bottom: none; }
.mistake-item-text {
  width: 100%;
  font-size: .92rem;
  color: #1e3a5f;
  word-break: break-word;
}
.mistake-item-answer {
  font-size: .82rem;
  color: #ef4444;
  font-weight: 500;
}
.mistake-item-correct {
  font-size: .82rem;
  color: #22c55e;
  font-weight: 500;
}
.btn-remove-mistake {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.1rem;
  cursor: pointer;
  padding: .2rem .4rem;
  border-radius: 6px;
  transition: all .2s;
  flex-shrink: 0;
}
.btn-remove-mistake:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* Practice mistakes — solved items fade */
#practice-mistakes-exercises .fb-item.solved,
#practice-mistakes-exercises .mc-item.solved { opacity: .5; transition: opacity .5s; }

/* ── Right column cards ── */
.dash-right-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.dash-right-card-title {
  font-size: .88rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem;
}

/* ── Progress ring ── */
.dash-ring-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.dash-ring-svg { display: block; overflow: visible; }
.dash-ring-track { fill: none; stroke: #e2e8f0; stroke-width: 10; }
.dash-ring-fill {
  fill: none;
  stroke: url(#dash-ring-grad);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset .6s ease;
}
.dash-ring-center-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1.2;
}
.dash-ring-pct {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f2544;
}
.dash-ring-sub {
  display: block;
  font-size: .65rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

/* Chapter progress bars */
.dash-chapter-bars { display: flex; flex-direction: column; gap: .4rem; }
.dash-ch-bar-row {
  display: flex; flex-direction: column; gap: .25rem; margin-bottom: .6rem;
}
.dash-ch-bar-label {
  font-size: .72rem; color: #475569; font-weight: 600;
  white-space: normal; overflow: hidden; text-overflow: ellipsis; width: 100%;
  line-height: 1.3;
}
.dash-ch-bar-bottom {
  display: flex; align-items: center; gap: .5rem;
}
.dash-ch-bar-track {
  flex: 1; height: 7px; background: #e2e8f0;
  border-radius: 99px; overflow: hidden;
}
.dash-ch-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 99px;
  transition: width .4s ease;
  min-width: 3px;
}
.dash-ch-bar-pct {
  font-size: .68rem; color: #94a3b8;
  width: 36px; text-align: right; flex-shrink: 0;
}

/* ── Activity bar chart ── */
.dash-activity-bars {
  display: flex;
  gap: .3rem;
  align-items: flex-end;
  height: 72px;
}
.dash-act-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.dash-act-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}
.dash-act-bar {
  width: 100%;
  background: linear-gradient(180deg, #3b82f6 0%, #6366f1 100%);
  border-radius: 3px 3px 0 0;
  min-height: 0;
  transition: height .35s ease;
}
.dash-act-label {
  font-size: .62rem; color: #94a3b8;
  margin-top: .25rem; flex-shrink: 0;
}

/* ── Tip card ── */
.dash-tip-card {
  background: linear-gradient(135deg, #eff6ff 0%, #f0f4ff 100%);
  border: 1px solid #bfdbfe;
}
.dash-tip-text {
  font-size: .84rem;
  color: #1e3a5f;
  line-height: 1.6;
  margin: 0 0 1rem;
}
.dash-tip-more-btn {
  background: none;
  border: 1.5px solid #3b82f6;
  color: #3b82f6;
  border-radius: 7px;
  padding: .35rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.dash-tip-more-btn:hover { background: #3b82f6; color: #fff; }

/* ── Responsive ── */
@media(max-width: 1024px) {
  .dash-shell { grid-template-columns: 1fr 250px; gap: 1.2rem; padding: 3.5rem 1.5rem 3rem; }
}
@media(max-width: 900px) {
  /* Extra top padding clears the fixed hamburger button */
  .dash-shell { grid-template-columns: 1fr; padding: 3.5rem 1rem 3rem; }
  .dash-col-right { position: static; flex-direction: row; flex-wrap: wrap; gap: 1rem; }
  .dash-right-card { flex: 1; min-width: 260px; }
  #dash-progress-card { flex: 2; min-width: 300px; }
}
@media(max-width: 600px) {
  .dash-greeting { font-size: 1.35rem; }
  .dash-col-right { flex-direction: column; }
  .dash-right-card { min-width: 0; }
  /* Move header-right below greeting on mobile to avoid trial-banner overlap */
  .dash-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .dash-header-right { align-self: flex-start; }
}
@media(max-width: 500px) {
  /* Jump straight to single column — avoids 3rd card stranded alone */
  .dash-stats-row-new { grid-template-columns: 1fr; }
  .dash-stat-card-new { flex-direction: row; align-items: center; gap: .8rem; padding: .7rem 1rem; }
  .dash-stat-icon-new { margin-bottom: 0; font-size: 1.5rem; }
  .dash-stat-value-new { font-size: 1.4rem; }
}
@media(max-width: 420px) {
  .dash-shell { padding: 1rem .8rem 2.5rem; }
}

/* ═══════════════════════════════════════════════════
   REVIEW PAGE
   ═══════════════════════════════════════════════════ */

.review-progress{margin-bottom:1.5rem}
.review-progress span{font-size:.85rem;color:#64748b}
.review-progress-bar{height:6px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin-top:.4rem}
.review-progress-fill{height:100%;background:linear-gradient(90deg,#8b5cf6,#6366f1);border-radius:99px;transition:width .3s}

.review-context{margin-bottom:1rem}
.review-section-title{font-size:.9rem;color:#64748b;margin-left:.4rem}

.review-empty{text-align:center;padding:3rem 1rem}
.review-empty-icon{font-size:3rem;color:#22c55e;margin-bottom:.5rem}
.review-empty h3{font-size:1.2rem;margin-bottom:.5rem;color:#1e3a5f}
.review-empty p{color:#64748b;margin-bottom:1.5rem;font-size:.95rem}

.review-next-btn{display:block;margin:1.5rem auto 0;padding:.6rem 2rem}

.review-fallback{text-align:center;padding:1.5rem}
.review-fallback p{color:#64748b;margin-bottom:1rem}

/* ═══════════════════════════════════════════════════
   ROAD PATH — Duolingo-style chapter view
   ═══════════════════════════════════════════════════ */

/* ── Road header ── */
/* ── Road header ── */
.road-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  background: #ffffff;
  color: #0f2544;
  border-radius: 16px;
  margin-bottom: .8rem;
  border: 1px solid #e2e8f0;
}
.road-back-btn {
  background: #f1f5f9;
  border: none;
  color: #0f2544;
  font-size: 1.3rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .15s;
}
.road-back-btn:hover { background: #e2e8f0; transform: scale(1.06); }
.road-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0f2544 !important;
  border-bottom: none !important;
  margin: 0;
  padding-bottom: 0;
  letter-spacing: .01em;
}

/* ── Road container ── */
.road-container {
  max-width: 440px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}
.road-top-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: .95rem 1rem;
  color: #334155;
  margin-bottom: 1rem;
}
.road-top-card-title { font-size: .95rem; font-weight: 700; color: #0f2544; }
.road-top-card-sub { margin-top: .25rem; font-size: .82rem; color: #64748b; }
.road-top-card-cta {
  margin-top: .7rem;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: .65rem .8rem;
  font-weight: 700;
  background: linear-gradient(180deg,#58cc02,#46a302);
  color: #fff;
  cursor: pointer;
}
.road-path-wrapper {
  position: relative;
  min-height: 200px;
}
.road-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Road nodes ── */
.road-nodes {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.5rem 0;
}
.road-node {
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform .2s;
  cursor: default;
}
.road-node--left { flex-direction: row; padding-left: 8%; }
.road-node--right { flex-direction: row-reverse; padding-right: 8%; justify-content: flex-end; padding-left: 42%; }
.road-node--right .road-node-label { text-align: right; }

.road-node:hover { transform: scale(1.05); }
.road-node--locked:hover { transform: none; }

/* ── Node circle — cleaner modern style ── */
.road-node-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all .2s;
  position: relative;
  border: 1px solid rgba(148,163,184,.35);
}
.road-node--trophy .road-node-circle,
.road-node--milestone .road-node-circle {
  width: 68px;
  height: 68px;
  font-size: 1.65rem;
}

/* ── State colors ── */
.road-node--locked .road-node-circle {
  background: #dfe5ed;
  color: #a0aec0;
  border-color: #c5cdd8;
  box-shadow: 0 0 0 3px #0b1220; /* masks connector behind circle in dark mode */
}
body:not(.theme-dark) .road-node--locked .road-node-circle {
  box-shadow: 0 0 0 3px #f7f7f7;
}
.road-node--locked { opacity: 1; cursor: default !important; }
.road-node--locked .road-node-label,
.road-node--locked .road-node-subtitle,
.road-node--locked .road-node-icon,
.road-node--locked .road-node-progress-text {
  opacity: .62;
}

.road-node--available .road-node-circle {
  background: linear-gradient(180deg, #58cc02 0%, #46a302 100%);
  color: #fff;
  border-color: #3a8a01;
  box-shadow: 0 0 0 4px rgba(88,204,2,.14);
}
.road-node--in_progress .road-node-circle {
  background: linear-gradient(180deg, #ffc800 0%, #f5a623 100%);
  color: #fff;
  border-color: #d48e1a;
  box-shadow: 0 0 0 4px rgba(255,200,0,.14);
}
.road-node--completed .road-node-circle {
  background: linear-gradient(180deg, #58cc02 0%, #46a302 100%);
  color: #fff;
  border-color: #3a8a01;
  box-shadow: 0 2px 8px rgba(88,204,2,.18);
}

/* ── Intro node ── */
.road-node--intro .road-node-circle {
  border-bottom: 5px solid rgba(0,0,0,.15);
}
.road-node--intro.road-node--available .road-node-circle {
  background: linear-gradient(180deg, #ce82ff 0%, #a855f7 100%);
  border-bottom-color: #8b3dd4;
  box-shadow: 0 4px 16px rgba(168,85,247,.35);
}
.road-node--intro.road-node--completed .road-node-circle {
  background: linear-gradient(180deg, #ce82ff 0%, #a855f7 100%);
  border-bottom-color: #8b3dd4;
  box-shadow: 0 2px 8px rgba(168,85,247,.2);
}

/* ── Trophy & milestone ── */
.road-node--trophy.road-node--completed .road-node-circle {
  background: linear-gradient(180deg, #ffd900 0%, #f5a623 100%);
  border-bottom-color: #d48e1a;
  box-shadow: 0 4px 16px rgba(255,217,0,.35);
}
.road-node--milestone.road-node--completed .road-node-circle {
  background: linear-gradient(180deg, #ffd900 0%, #f5a623 100%);
  border-bottom-color: #d48e1a;
  box-shadow: 0 4px 16px rgba(255,217,0,.35);
}

/* Active node: bounce + ring */
@keyframes road-bounce {
  0%, 100% { transform: translateY(0); box-shadow: 0 4px 16px rgba(88,204,2,.35); }
  50% { transform: translateY(-6px); box-shadow: 0 8px 24px rgba(88,204,2,.4); }
}

/* Pressed effect */
.road-node:active .road-node-circle {
  border-bottom-width: 2px;
  transform: translateY(3px);
}

/* ── Node label ── */
.road-node-label {
  flex: 1;
  min-width: 0;
}
.road-node-subtitle {
  font-size: .9rem;
  color: #94a3b8;
  font-weight: 600;
  letter-spacing: .01em;
}
.road-node--completed .road-node-subtitle { color: #94a3b8; }
.road-node--available .road-node-subtitle { color: #cbd5e1; font-weight: 700; }
.road-node--in_progress .road-node-subtitle { color: #facc15; font-weight: 700; }

.road-node-icon { font-size: 1.4rem; }
.road-node-progress-text { font-size: .8rem; font-weight: 800; }


/* ═══════════════════════════════════════════════════
   EXERCISE PAGE — Single item at a time
   ═══════════════════════════════════════════════════ */

/* ── Top bar ── */
.ep-top-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 50;
}
.ep-close-btn {
  background: #f1f5f9;
  border: none;
  font-size: 0;
  color: #94a3b8;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background .2s, color .2s;
  position: relative;
  flex-shrink: 0;
}
.ep-close-btn::before,
.ep-close-btn::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.ep-close-btn::before { transform: rotate(45deg); }
.ep-close-btn::after { transform: rotate(-45deg); }
.ep-close-btn:hover { background: #e2e8f0; color: #64748b; }
.ep-review-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #64748b;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .2s;
  padding: 0;
  line-height: 1;
}
.ep-review-btn:hover { background: #f1f5f9; }

.ep-lang-btn {
  background: none;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  font-size: .7rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1.3;
  letter-spacing: .5px;
  transition: all .15s;
  flex-shrink: 0;
}
.ep-lang-btn:hover { border-color: #94a3b8; color: #475569; }

/* Grammar review overlay */
.grammar-review-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.grammar-review-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.grammar-review-modal {
  background: #fff;
  max-width: 600px;
  width: calc(100% - 2rem);
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 2rem 1.5rem;
  position: relative;
  transform: translateY(20px);
  transition: transform .25s ease;
}
.grammar-review-overlay.open .grammar-review-modal {
  transform: translateY(0);
}
.grammar-review-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #64748b;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .2s;
}
.grammar-review-close:hover { background: #f1f5f9; }

.ep-progress-wrap { flex: 1; }
.ep-progress-bar {
  height: 10px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}
.ep-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 99px;
  transition: width .4s ease;
  min-width: 0;
}
.ep-counter {
  font-size: .85rem;
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Body ── */
.ep-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.2rem 1.25rem 6rem;
  min-height: 55vh;
}

/* ── Instruction ── */
.ep-instruction {
  font-size: .9rem;
  color: #64748b;
  margin-bottom: 1.5rem;
  font-style: italic;
}

/* ── Card (single item container) ── */
.ep-card {
  background: #fff;
  border-radius: 18px;
  padding: 1.4rem 1.2rem;
  box-shadow: 0 6px 22px rgba(15,23,42,.08);
  border: 1px solid #dbe3ee;
  transition: border-color .3s, transform .2s;
}
.ep-card--correct { border-color: #22c55e; }
.ep-card--wrong { border-color: #ef4444; }

/* ── Prompt ── */
.ep-prompt {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.ep-blank-slot {
  display: inline-block;
  min-width: 80px;
  border-bottom: 2px dashed #94a3b8;
  margin: 0 4px;
}
.ep-blank-slot--active {
  border-bottom-color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  border-radius: 4px;
}
.ep-gapfill-fallback {
  font-weight: 600;
}

/* ── Input ── */
.ep-input {
  width: 100%;
  padding: .8rem 1rem;
  font-size: 1.05rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
}
.ep-input:focus { border-color: #3b82f6; }
.ep-input:disabled { background: #f8fafc; }

/* ── Multiple choice options ── */
.ep-mc-options {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.ep-mc-btn {
  display: block;
  width: 100%;
  padding: .9rem 1.2rem;
  font-size: 1rem;
  text-align: left;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.ep-mc-btn:hover:not(:disabled) {
  border-color: #3b82f6;
  background: #eff6ff;
}
.ep-mc-correct {
  background: #dcfce7 !important;
  border-color: #22c55e !important;
  color: #166534;
}
.ep-mc-wrong {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #991b1b;
}

/* ── Sorting (single word) ── */
.ep-sort-word {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #1e3a5f;
  padding: 1.5rem;
  background: #f0f4ff;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}
.ep-sort-cats {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.ep-sort-cat-btn {
  display: block;
  width: 100%;
  padding: .9rem 1.2rem;
  font-size: .95rem;
  text-align: center;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.ep-sort-cat-btn:hover:not(:disabled) {
  border-color: #8b5cf6;
  background: #f5f3ff;
}

/* ── Reorder ── */
.ep-reorder-result {
  min-height: 50px;
  padding: 1rem;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.ep-reorder-placeholder {
  color: #94a3b8;
  font-style: italic;
}
.ep-reorder-placed {
  display: inline-block;
  padding: .3rem .6rem;
  background: #dbeafe;
  border-radius: 6px;
  font-weight: 500;
  color: #1e40af;
}
.ep-reorder-bank {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.ep-reorder-word {
  padding: .5rem .9rem;
  background: #fff;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  font-size: .95rem;
  transition: all .2s;
  font-family: inherit;
}
.ep-reorder-word:hover:not(:disabled) { border-color: #3b82f6; background: #eff6ff; }
.ep-reorder-word.used { opacity: .3; }
.ep-undo-btn {
  background: none;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: .4rem .8rem;
  font-size: .85rem;
  color: #64748b;
  cursor: pointer;
  transition: all .2s;
}
.ep-undo-btn:hover { background: #f1f5f9; }

/* ── Error correction ── */
.ep-ec-sentence {
  font-size: 1.15rem;
  font-weight: 500;
  color: #1e293b;
  background: #fefce8;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  border-left: 4px solid #f59e0b;
  margin-bottom: 1.2rem;
}
.ep-ec-btns {
  display: flex;
  gap: .8rem;
  margin-bottom: 1rem;
}
.ep-ec-ok, .ep-ec-fix {
  flex: 1;
  padding: .75rem;
  font-size: .95rem;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: all .2s;
  border: 2px solid;
  font-family: inherit;
}
.ep-ec-ok {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}
.ep-ec-ok:hover { background: #dcfce7; }
.ep-ec-fix {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
.ep-ec-fix:hover { background: #fee2e2; }
.ep-ec-input-row {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.ep-ec-submit {
  padding: .6rem 1rem;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  font-family: inherit;
}

/* ── Feedback strip ── */
.ep-feedback {
  margin-top: 1.2rem;
  padding: .8rem 1rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  animation: ep-feedback-in .3s ease;
}
.ep-feedback--correct {
  background: #dcfce7;
  color: #166534;
}
.ep-feedback--wrong {
  background: #fef2f2;
  color: #991b1b;
}
.ep-feedback-icon { font-size: 1.2rem; }

.ep-translation-details {
  margin-top: .6rem;
  border-top: 1px dashed #d7dee7;
  padding-top: .45rem;
}
.ep-translation-summary {
  font-size: .82rem;
  color: #64748b;
  cursor: pointer;
  user-select: none;
}
.ep-translation-text {
  margin-top: .4rem;
  font-size: .9rem;
  color: #334155;
}

.ep-vocab-details {
  margin-top: .75rem;
  border-top: 1px dashed #d7dee7;
  padding-top: .55rem;
}
.ep-vocab-summary {
  font-size: .84rem;
  color: #475569;
  font-weight: 600;
  cursor: pointer;
}
.ep-vocab-list { margin-top: .5rem; display: grid; gap: .35rem; }
.ep-vocab-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: .6rem;
  font-size: .87rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: .45rem .55rem;
  background: #f8fafc;
}
.ep-vocab-word { font-weight: 700; color: #1e293b; }
.ep-vocab-translation { color: #64748b; text-align: right; }
.ep-vocab-add-btn {
  border: 1px solid #3b82f6;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 8px;
  font-size: .74rem;
  font-weight: 700;
  padding: .28rem .5rem;
  cursor: pointer;
}
.ep-vocab-add-btn:disabled {
  opacity: .7;
  cursor: default;
}

@keyframes ep-feedback-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Bottom bar ── */
.ep-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.5rem;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  z-index: 50;
  display: flex;
  justify-content: center;
}
.ep-check-btn, .ep-continue-btn {
  width: 100%;
  max-width: 600px;
  padding: .9rem;
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.ep-check-btn {
  background: #e2e8f0;
  color: #94a3b8;
}
.ep-check-btn:not(:disabled) {
  background: #3b82f6;
  color: #fff;
}
.ep-check-btn:not(:disabled):hover {
  background: #2563eb;
}
.ep-continue-btn {
  background: #22c55e;
  color: #fff;
}
.ep-continue--correct { background: #22c55e; }
.ep-continue--correct:hover { background: #16a34a; }
.ep-continue--wrong { background: #ef4444; }
.ep-continue--wrong:hover { background: #dc2626; }

/* ── Intro page ── */
.ep-intro {
  max-width: 600px;
  margin: 0 auto;
}
.ep-intro-tag {
  display: inline-block;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  padding: .3rem .8rem;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .8rem;
}
.ep-intro-title {
  font-size: 1.4rem;
  color: #1e293b;
  margin-bottom: .4rem;
}
.ep-intro-subtitle {
  color: #64748b;
  margin-bottom: .3rem;
}
.ep-intro-question {
  color: #3b82f6;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}
.ep-intro-explanation {
  background: #fff;
  padding: 1.5rem;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  line-height: 1.7;
}
.ep-intro-explanation table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.ep-intro-explanation th, .ep-intro-explanation td {
  padding: .5rem .8rem;
  border: 1px solid #e2e8f0;
  text-align: left;
}
.ep-intro-explanation th {
  background: #f0f4ff;
  font-weight: 600;
}

/* ── Completion screen ── */
.ep-completion {
  text-align: center;
  padding: 3rem 1rem;
  position: relative;
  overflow: hidden;
}
.ep-completion-stars {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: ep-stars-in .6s ease;
}
@keyframes ep-stars-in {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
.ep-completion-title {
  font-size: 1.6rem;
  color: #1e293b;
  margin-bottom: 1.5rem;
}
.ep-completion-score {
  margin-bottom: 1.5rem;
}
.ep-completion-pct {
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #22c55e, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ep-completion-msg {
  font-size: 1.1rem;
  color: #64748b;
}

/* ── Confetti ── */
.ep-confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  top: -10px;
  animation: ep-confetti-fall 1.5s ease-out forwards;
  pointer-events: none;
}
@keyframes ep-confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(400px) rotate(720deg); opacity: 0; }
}

/* ── Mistakes practice buttons & summary ── */
.ep-mistakes-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
}
.ep-eliminate-btn {
  flex: 1;
  padding: .9rem 1.2rem;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  background: #22c55e;
  color: #fff;
  transition: background .15s;
}
.ep-eliminate-btn:hover { background: #16a34a; }
.ep-eliminate-btn:focus { outline: 3px solid rgba(34,197,94,.4); }
.ep-keep-btn {
  flex: 1;
  padding: .9rem 1.2rem;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: #64748b;
  transition: all .15s;
}
.ep-keep-btn:hover { border-color: #94a3b8; color: #475569; }
.ep-keep-btn:focus { outline: 3px solid rgba(148,163,184,.4); }

.ep-mistakes-summary {
  text-align: center;
  padding: 3rem 1rem;
  position: relative;
  overflow: hidden;
}
.ep-mistakes-summary h2 {
  font-size: 1.6rem;
  color: #1e293b;
  margin-bottom: 1.5rem;
}
.ep-mistakes-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.ep-mistakes-stat {
  text-align: center;
}
.ep-mistakes-stat-num {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
}
.ep-mistakes-stat-num--green { color: #22c55e; }
.ep-mistakes-stat-num--amber { color: #f59e0b; }
.ep-mistakes-stat-label {
  font-size: .85rem;
  color: #64748b;
  font-weight: 600;
}
.ep-mistakes-msg {
  font-size: 1.1rem;
  color: #64748b;
  margin-bottom: 1rem;
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
  .road-header { margin: 0 -.5rem .5rem; border-radius: 0; padding: .8rem 1rem; }
  .road-container { padding: 0 .5rem 2rem; }
  .road-node--left { padding-left: 4%; }
  .road-node--right { padding-left: 32%; padding-right: 4%; }
  .road-node-circle { width: 56px; height: 56px; font-size: 1.2rem; border-bottom-width: 4px; }
  .road-node--trophy .road-node-circle,
  .road-node--milestone .road-node-circle { width: 64px; height: 64px; }
  .ep-body { padding: 1.5rem 1rem 6rem; }
  .ep-card { padding: 1.5rem 1rem; }
  .ep-prompt { font-size: 1.05rem; }
  .ep-bottom-bar { padding: .8rem 1rem; }
}

/* ═══════════════════════════════════════════════════
   DUOLINGO-STYLE REDESIGN — Bottom Tab Bar + App Header
   ═══════════════════════════════════════════════════ */

/* ── Hide sidebar & menu toggle permanently ── */
#sidebar, #menu-toggle { display: none !important; }

/* ── Remove sidebar margin, add padding for header + tab bar ── */
#content {
  margin-left: 0 !important;
  padding-top: calc(60px + env(safe-area-inset-top, 0px));
  padding-bottom: 80px;
}

/* ── Center all pages ── */
#home, #lesson-page, #review-page, #flashcards-page, #study-plan-page, #progress-page,
#mistakes-page, #practice-mistakes-page, #profile-page {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem 1rem 2rem;
}

.flashcards-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}
.flashcards-title { margin: 0; font-size: 1.25rem; }
.flashcards-subtitle { margin: .2rem 0 0; color: #64748b; font-size: .9rem; }
.flashcards-header-actions { display:flex; gap:.5rem; align-items:center; }
.flashcards-start-btn {
  border: none;
  background: linear-gradient(180deg,#58cc02,#46a302);
  color: #fff;
  border-radius: 10px;
  padding: .65rem .95rem;
  font-weight: 700;
  cursor: pointer;
}
.flashcards-clear-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475569;
  border-radius: 10px;
  padding: .62rem .8rem;
  font-weight: 700;
  cursor: pointer;
}
.flashcards-notice {
  margin-bottom: .6rem;
  padding: .5rem .7rem;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: .82rem;
}
.flashcards-list { display: grid; gap: .6rem; }
.flashcard-row {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: .75rem .9rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.flashcard-polish { font-weight: 700; color: #1e293b; text-transform: lowercase; }
.flashcard-translation { color: #64748b; text-align: right; }

.flashcards-study { display: grid; gap: .9rem; margin-top: .6rem; }
.flashcards-study-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .7rem;
}
.flashcards-progress { font-weight: 700; color: #334155; font-size: .95rem; }
.flashcards-card {
  width: 100%;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 16px;
  min-height: 220px;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .85rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  transition: transform .16s ease, box-shadow .2s ease;
}
.flashcards-card:active { transform: scale(.99); }
.flashcards-card.is-flipped {
  background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
  border-color: #bfdbfe;
}
.flashcards-card-face {
  font-size: 1.6rem;
  line-height: 1.3;
  font-weight: 800;
  color: #0f172a;
}
.flashcards-card-back { color: #1d4ed8; }
.flashcards-card:not(.is-flipped) .flashcards-card-back { display: none; }
.flashcards-card.is-flipped .flashcards-card-front { display: none; }
.flashcards-card-hint { font-size: .82rem; color: #64748b; font-weight: 600; }
.flashcards-study-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.flashcards-ghost-btn,
.flashcards-solid-btn,
.flashcards-again-btn,
.flashcards-known-btn {
  border: none;
  border-radius: 12px;
  padding: .78rem .9rem;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
}
.flashcards-ghost-btn { background: #e2e8f0; color: #334155; }
.flashcards-solid-btn { background: #2563eb; color: #fff; }
.flashcards-again-btn { background: #fee2e2; color: #b91c1c; }
.flashcards-known-btn { background: #dcfce7; color: #166534; }

@media (min-width: 680px) {
  .flashcards-card { min-height: 250px; }
}


/* Road page */
#road-page {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  background: #f7f7f7;
  min-height: 100vh;
}

/* ── APP TOP HEADER ── */
#app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  display: none; /* shown via JS */
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 150;
}
#app-header.visible { display: flex; }

.ah-logo {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e3a5f;
  letter-spacing: -.02em;
}
.ah-logo-accent { color: #3b82f6; }

.ah-stats {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.ah-pill {
  display: flex;
  align-items: center;
  gap: .3rem;
  background: #f1f5f9;
  padding: .3rem .7rem;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  color: #334155;
}
.ah-pill-icon { font-size: .95rem; }

.ah-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid #e2e8f0;
  transition: border-color .2s;
}
.ah-avatar:hover { border-color: #3b82f6; }

.ah-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}

/* ── BOTTOM TAB BAR ── */
#tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  display: none; /* shown via JS */
  align-items: stretch;
  justify-content: space-around;
  z-index: 150;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
#tab-bar.visible { display: flex; }

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: .64rem;
  font-weight: 700;
  transition: color .2s;
  position: relative;
  padding: .25rem 0;
}
.tab-btn:hover { color: #64748b; }
.tab-btn.active {
  color: #2563eb;
}
.tab-btn.active .tab-btn-icon {
  background: rgba(37,99,235,.12);
  border-radius: 999px;
}
.tab-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.tab-btn-icon svg {
  width: 20px;
  height: 20px;
}
.tab-btn.active .tab-btn-icon svg {
  stroke-width: 2.5;
}
.tab-btn-label {
  font-size: .68rem;
  font-weight: 600;
}

/* Tab badge (notification dot) */
.tab-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 16px);
  min-width: 16px;
  height: 16px;
  background: #ef4444;
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 16px;
}
.tab-badge.show { display: flex; }

/* ── EXERCISE MODE: hide header + tab bar ── */
body.exercise-active #app-header,
body.exercise-active #tab-bar,
body.exercise-active #trial-banner {
  display: none !important;
}
body.exercise-active #content {
  padding-top: 0;
  padding-bottom: 0;
}
/* Critical: in exercise mode, trial banner spacing must never apply */
body.exercise-active.trial-active #content {
  padding-top: 0 !important;
}

/* ── TRIAL BANNER repositioned ── */
.trial-banner {
  left: 0 !important;
  top: calc(56px + env(safe-area-inset-top, 0px)) !important;
}

/* When trial banner is visible, push content down */
body.trial-active #content {
  /* Extra buffer for iPhone Safari notch/safe-area rendering quirks */
  padding-top: calc(112px + env(safe-area-inset-top, 0px));
}

/* ── COLORFUL CHAPTER CARDS ── */
/* Unit card styles are defined in the UNIT GRID section above — gradients applied via JS */

/* ── HOME page simplified ── */
#home h1 {
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: .2rem;
}
#home .subtitle {
  text-align: center;
  font-size: .88rem;
  margin-bottom: 1.2rem;
}

/* ── PROFILE PAGE ── */
#profile-page {
  padding-top: 1rem !important;
}

.prof-user-card {
  background: linear-gradient(135deg, #1e3a5f, #3b82f6);
  border-radius: 16px;
  padding: 1.5rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.prof-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.3);
}
.prof-avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  border: 3px solid rgba(255,255,255,.3);
}
.prof-user-info { flex: 1; }
.prof-user-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .15rem;
}
.prof-user-email {
  font-size: .78rem;
  opacity: .75;
}
.prof-user-status {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .15rem .5rem;
  border-radius: 10px;
  margin-top: .3rem;
}
.prof-status-active { background: rgba(34,197,94,.3); color: #dcfce7; }
.prof-status-trial { background: rgba(245,158,11,.3); color: #fef3c7; }
.prof-status-expired { background: rgba(239,68,68,.3); color: #fee2e2; }

/* Stats row */
.prof-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-bottom: 1rem;
}
.prof-stat-card {
  background: #fff;
  border-radius: 12px;
  padding: .8rem .6rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.prof-stat-icon { font-size: 1.3rem; margin-bottom: .2rem; }
.prof-stat-value { font-size: 1.2rem; font-weight: 700; color: #1e3a5f; }
.prof-stat-value span { font-size: .8rem; font-weight: 400; color: #94a3b8; }
.prof-stat-label { font-size: .68rem; color: #64748b; margin-top: .1rem; }

/* Daily goal card */
.prof-goal-card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  cursor: pointer;
}
.prof-goal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.prof-goal-title { font-size: .85rem; font-weight: 600; color: #1e3a5f; }
.prof-goal-count { font-size: .85rem; font-weight: 700; color: #3b82f6; }
.prof-goal-bar {
  height: 8px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}
.prof-goal-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 99px;
  transition: width .4s ease;
}

/* Progress ring card */
.prof-progress-card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.prof-progress-header {
  font-size: .85rem;
  font-weight: 600;
  color: #1e3a5f;
  margin-bottom: .8rem;
}
.prof-ring-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .8rem;
}
.prof-ring-svg { flex-shrink: 0; }
.prof-ring-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.prof-ring-pct { font-size: 1.6rem; font-weight: 700; color: #1e3a5f; }
.prof-ring-sub { font-size: .78rem; color: #64748b; }

/* Chapter bars in profile */
.prof-chapter-bars { display: flex; flex-direction: column; gap: .4rem; }

/* Activity card */
.prof-activity-card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.prof-activity-header {
  font-size: .85rem;
  font-weight: 600;
  color: #1e3a5f;
  margin-bottom: .5rem;
}

/* Links section */
.prof-links {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1rem;
}
.prof-link-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 500;
  color: #334155;
  transition: background .2s, border-color .2s;
  text-align: left;
  width: 100%;
}
.prof-link-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.prof-link-icon { font-size: 1.1rem; flex-shrink: 0; }
.prof-link-text { flex: 1; }
.prof-link-arrow { color: #94a3b8; font-size: .8rem; }

/* Install App button */
.prof-install-btn {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, #1e3a5f, #2563eb);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  color: #fff;
  text-align: left;
  width: 100%;
  margin-bottom: 1rem;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(37, 99, 235, .25);
}
.prof-install-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 99, 235, .35); }
.prof-install-icon { font-size: 1.8rem; flex-shrink: 0; }
.prof-install-text { display: flex; flex-direction: column; gap: .15rem; }
.prof-install-text strong { font-size: .95rem; font-weight: 700; }
.prof-install-text span { font-size: .78rem; opacity: .85; }

.prof-danger-zone {
  margin-top: 2.5rem;
  border: 1.5px solid #fecaca;
  border-radius: 14px;
  padding: 1rem;
  background: #fef2f2;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.prof-danger-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #dc2626;
}
.prof-link-btn--danger { color: #dc2626; border-color: #fca5a5; background: #fff; }
.prof-link-btn--danger:hover { background: #fff5f5; border-color: #dc2626; }

/* Logout button */
.prof-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1rem;
  background: none;
  border: 2px solid #fecaca;
  border-radius: 12px;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  color: #dc2626;
  transition: background .2s;
  width: 100%;
}
.prof-logout-btn:hover { background: #fef2f2; }

/* ── HIDE OLD DASHBOARD (replaced by profile + learn tabs) ── */
#dashboard-page { display: none !important; }

/* Upgrade card in profile */
.prof-upgrade-card {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
  padding: 1.2rem;
  color: #fff;
  text-align: center;
  margin-bottom: 1rem;
}
.prof-upgrade-text { font-size: .88rem; margin-bottom: .6rem; opacity: .9; }
.prof-upgrade-btn {
  display: inline-block;
  padding: .5rem 1.5rem;
  background: #fff;
  color: #764ba2;
  border: none;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
}
.prof-upgrade-btn:hover { opacity: .9; }

/* ── Global Dark Theme (user toggle / system auto) ── */
body.theme-dark {
  background: #0b1220;
  color: #e2e8f0;
}
body.theme-dark #content,
body.theme-dark .page {
  background: #0b1220;
  color: #e2e8f0;
}
body.theme-dark #app-header,
body.theme-dark #tab-bar,
body.theme-dark .trial-banner {
  border-color: #1f2937;
}
body.theme-dark #app-header,
body.theme-dark #tab-bar {
  background: #0f172a;
}
body.theme-dark .tab-btn { color: #94a3b8; }
body.theme-dark .tab-btn.active { color: #60a5fa; }

body.theme-dark .dash-card,
body.theme-dark .prof-user-card,
body.theme-dark .prof-stats-row,
body.theme-dark .prof-goal-card,
body.theme-dark .prof-progress-card,
body.theme-dark .prof-activity-card,
body.theme-dark .prof-links .prof-link-btn,
body.theme-dark .ep-card,
body.theme-dark .rev-card,
body.theme-dark .mistake-card,
body.theme-dark .note-card,
body.theme-dark .flash-card,
body.theme-dark .flash-list-item {
  background: #111827 !important;
  color: #e2e8f0 !important;
  border-color: #1f2937 !important;
}
body.theme-dark .subtitle,
body.theme-dark .dash-subheading,
body.theme-dark .prof-link-sub,
body.theme-dark .ep-translation-summary,
body.theme-dark .ep-translation-text {
  color: #94a3b8 !important;
}
body.theme-dark .prof-link-arrow { color: #64748b; }

/* Profile readability + card consistency in dark mode */
body.theme-dark .prof-stat-card,
body.theme-dark .prof-goal-card,
body.theme-dark .prof-progress-card,
body.theme-dark .prof-activity-card,
body.theme-dark .prof-link-btn {
  background: #111827;
  border-color: #1f2937;
}
body.theme-dark .prof-stat-value,
body.theme-dark .prof-goal-title,
body.theme-dark .prof-progress-header,
body.theme-dark .prof-activity-header,
body.theme-dark .prof-ring-pct {
  color: #e2e8f0;
}
body.theme-dark .prof-stat-value span,
body.theme-dark .prof-stat-label,
body.theme-dark .prof-ring-sub {
  color: #94a3b8;
}

/* Notes page readability in dark mode */
body.theme-dark .notes-page-title,
body.theme-dark .note-card-title,
body.theme-dark .notes-empty-title {
  color: #f1f5f9;
}
body.theme-dark .notes-page-sub,
body.theme-dark .note-card-preview,
body.theme-dark .notes-empty-sub {
  color: #94a3b8;
}
body.theme-dark .note-card-date { color: #cbd5e1; }
body.theme-dark .btn-add-note {
  background: #1d4ed8;
  color: #fff;
}
body.theme-dark .btn-add-note:hover { background: #2563eb; }

/* Empty states + flashcards study readability */
body.theme-dark .review-empty h3 { color: #f1f5f9; }
body.theme-dark .review-empty p { color: #94a3b8; }
body.theme-dark .flashcards-card-face { color: #f1f5f9; }

/* Road page should follow normal dark mode (no custom Duolingo-like backdrop) */
body.theme-dark #road-page { background: #0b1220; }
body.theme-dark .road-header {
  background: #111827;
  color: #e2e8f0;
  border-color: #1f2937;
}
body.theme-dark .road-title { color: #e2e8f0 !important; }
body.theme-dark .road-back-btn { background: #0f172a; color: #e2e8f0; }
body.theme-dark .road-back-btn:hover { background: #1e293b; }
body.theme-dark .road-top-card {
  background: #111827;
  color: #cbd5e1;
  border-color: #1f2937;
}
body.theme-dark .road-top-card-title { color: #f1f5f9; }
body.theme-dark .road-top-card-sub { color: #94a3b8; }

body.theme-dark input,
body.theme-dark textarea,
body.theme-dark select {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #334155;
}

/* Review page dark mode polish */
body.theme-dark .rev-title { color: #f1f5f9 !important; }
body.theme-dark .rev-subtitle,
body.theme-dark .review-section-title,
body.theme-dark #review-exercises .ex-instruction {
  color: #94a3b8 !important;
}
body.theme-dark .review-progress {
  background: #111827;
  border: 1px solid #1f2937;
  box-shadow: none;
}
body.theme-dark .review-progress span { color: #c4b5fd; }
body.theme-dark .review-progress-bar { background: #1f2937; }

body.theme-dark #review-exercises .exercise-block {
  background: #111827;
  border: 1px solid #1f2937;
  box-shadow: none;
}
body.theme-dark #review-exercises .ex-type-label {
  color: #e2e8f0 !important;
}

body.theme-dark #review-exercises .fb-input {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #334155;
}
body.theme-dark #review-exercises .fb-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139,92,246,.22);
}

body.theme-dark .review-next-btn,
body.theme-dark #review-exercises .fb-check-btn,
body.theme-dark #review-exercises .check-btn {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
}

/* Mistakes page dark mode polish */
body.theme-dark #mistakes-page h1 { color: #f1f5f9; }
body.theme-dark #mistakes-page .subtitle { color: #94a3b8; }

body.theme-dark .mistakes-section-group,
body.theme-dark #mistakes-sections .mistakes-section-card {
  background: #111827;
  border: 1px solid #1f2937;
  box-shadow: none;
}
body.theme-dark .mistakes-section-header {
  background: #0f172a;
  border-bottom-color: #1f2937;
}
body.theme-dark .mistakes-section-header h3 { color: #e2e8f0; }
body.theme-dark .mistakes-section-count { color: #94a3b8; }

body.theme-dark .mistake-item {
  border-bottom-color: #1f2937;
}
body.theme-dark .mistake-item-text { color: #e2e8f0; }
body.theme-dark .mistake-item-answer { color: #fda4af; }
body.theme-dark .mistake-item-correct { color: #86efac; }

body.theme-dark .btn-practice-mistakes,
body.theme-dark .mistakes-practice-btn {
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
}
body.theme-dark .btn-remove-mistake {
  color: #94a3b8;
}
body.theme-dark .btn-remove-mistake:hover {
  background: #3b1f26;
  color: #fda4af;
}

/* Exercise page dark mode polish */
body.theme-dark .ep-instruction { color: #94a3b8; }
body.theme-dark .ep-card {
  background: #111827;
  border-color: #1f2937;
  box-shadow: none;
}
body.theme-dark .ep-prompt,
body.theme-dark .ep-sort-word,
body.theme-dark .ep-ec-sentence,
body.theme-dark .ep-vocab-word,
body.theme-dark .ep-intro-title {
  color: #f1f5f9;
}
body.theme-dark .ep-blank-slot { border-bottom-color: #475569; }
body.theme-dark .ep-blank-slot--active { border-bottom-color: #60a5fa; background: rgba(96, 165, 250, 0.18); }
body.theme-dark .ep-input,
body.theme-dark .ep-reorder-result,
body.theme-dark .ep-reorder-word,
body.theme-dark .ep-mc-btn,
body.theme-dark .ep-sort-cat-btn {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #334155;
}
body.theme-dark .ep-mc-btn:hover:not(:disabled),
body.theme-dark .ep-reorder-word:hover:not(:disabled),
body.theme-dark .ep-sort-cat-btn:hover:not(:disabled) {
  background: #172033;
  border-color: #475569;
}
body.theme-dark .ep-reorder-placed { background: #1e3a8a; color: #dbeafe; }
body.theme-dark .ep-ec-sentence {
  background: #1f2937;
  border-left-color: #f59e0b;
}
body.theme-dark .ep-feedback--correct { background: #1b3a2d; color: #bbf7d0; }
body.theme-dark .ep-feedback--wrong { background: #3b1f26; color: #fecaca; }
body.theme-dark .ep-translation-details,
body.theme-dark .ep-vocab-details { border-top-color: #334155; }
body.theme-dark .ep-translation-summary,
body.theme-dark .ep-translation-text,
body.theme-dark .ep-vocab-summary,
body.theme-dark .ep-vocab-translation,
body.theme-dark .ep-card-hint {
  color: #94a3b8;
}

/* Intro modal should be fully dark in dark mode */
body.theme-dark .ep-intro {
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 16px;
  padding: 1.1rem;
}
body.theme-dark .ep-intro-title { color: #f1f5f9 !important; }
body.theme-dark .ep-intro-subtitle,
body.theme-dark .ep-intro-question { color: #cbd5e1 !important; }
body.theme-dark .ep-vocab-row {
  background: #0f172a;
  border-color: #334155;
}
body.theme-dark .ep-vocab-add-btn {
  background: #1e3a8a;
  border-color: #3b82f6;
  color: #dbeafe;
}

/* Intro modal/read page dark mode fixes */
body.theme-dark .ep-intro-explanation {
  background: #111827;
  color: #cbd5e1;
  border: 1px solid #1f2937;
  box-shadow: none;
}
body.theme-dark .ep-intro-explanation h3,
body.theme-dark .ep-intro-explanation strong,
body.theme-dark .ep-intro-explanation b {
  color: #f1f5f9;
}
body.theme-dark .ep-intro-explanation p,
body.theme-dark .ep-intro-explanation li,
body.theme-dark .ep-intro-explanation td {
  color: #cbd5e1;
}
body.theme-dark .ep-intro-explanation table {
  border-color: #334155;
}
body.theme-dark .ep-intro-explanation th,
body.theme-dark .ep-intro-explanation td {
  border-color: #334155;
}
body.theme-dark .ep-intro-explanation th {
  background: #1f2937;
  color: #e2e8f0;
}
body.theme-dark .ep-intro-explanation .tip {
  background: #0f172a;
  border-left: 3px solid #60a5fa;
  color: #cbd5e1;
}

body.theme-dark .ep-bottom-bar {
  background: #0f172a;
  border-top-color: #1f2937;
}
body.theme-dark .ep-check-btn {
  background: #334155;
  color: #94a3b8;
}
body.theme-dark .ep-check-btn:not(:disabled) {
  background: #2563eb;
  color: #fff;
}

/* Flashcards dark mode polish */
body.theme-dark #flashcards-page,
body.theme-dark .flashcards-shell,
body.theme-dark .flashcards-card-wrap {
  background: transparent;
}
body.theme-dark .flashcards-title { color: #f1f5f9; }
body.theme-dark .flashcards-subtitle { color: #94a3b8; }
body.theme-dark .flashcards-progress { color: #cbd5e1; }

body.theme-dark .flashcard-row {
  background: #111827;
  border: 1px solid #1f2937;
}
body.theme-dark .flashcard-polish { color: #f1f5f9; }
body.theme-dark .flashcard-translation { color: #94a3b8; }

body.theme-dark .flashcards-card {
  background: #111827;
  border: 1px solid #1f2937;
  color: #e2e8f0;
}
body.theme-dark .flashcards-card-back { color: #93c5fd; }
body.theme-dark .flashcards-card-hint { color: #94a3b8; }

body.theme-dark .flashcards-ghost-btn {
  background: #1f2937;
  color: #e2e8f0;
  border: 1px solid #334155;
}
body.theme-dark .flashcards-solid-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
}
body.theme-dark .flashcards-again-btn {
  background: #3b1f26;
  color: #fecaca;
  border: 1px solid #7f1d1d;
}
body.theme-dark .flashcards-known-btn {
  background: #1b3a2d;
  color: #bbf7d0;
  border: 1px solid #166534;
}
body.theme-dark .flashcards-clear-btn {
  background: #1f2937;
  border-color: #334155;
  color: #cbd5e1;
}
body.theme-dark .flashcards-notice {
  background: #3b2a1a;
  border-color: #92400e;
  color: #fed7aa;
}

/* Profile debug panel */
.prof-debug-panel {
  margin-top: .8rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: .6rem .8rem;
}
.prof-debug-panel summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .9rem;
  color: #334155;
}
.prof-debug-body {
  margin-top: .55rem;
  display: grid;
  gap: .5rem;
}
#dict-debug-stats {
  font-size: .8rem;
  line-height: 1.45;
  color: #475569;
  white-space: pre-line;
}
body.theme-dark .prof-debug-panel {
  background: #111827;
  border-color: #1f2937;
}
body.theme-dark .prof-debug-panel summary,
body.theme-dark #dict-debug-stats {
  color: #cbd5e1;
}

/* ── MOBILE RESPONSIVE for new layout ── */
@media (max-width: 768px) {
  #app-header { padding: 0 .8rem; }
  .ah-pill { font-size: .72rem; padding: .25rem .5rem; }

  #home, #lesson-page, #review-page, #study-plan-page, #progress-page,
  #mistakes-page, #practice-mistakes-page, #profile-page {
    padding: 1rem .8rem 2rem;
  }

  .prof-stats-row { gap: .4rem; }
  .prof-stat-card { padding: .6rem .4rem; }
  .prof-stat-value { font-size: 1rem; }
}

@media (max-width: 480px) {
  .ah-stats { gap: .4rem; }
  .ah-pill { font-size: .68rem; padding: .2rem .45rem; }
  .prof-user-card { padding: 1.2rem; }
}

/* ═══════════════════════════════════════════════════
   FIX BATCH — Tasks #6–#11
   ═══════════════════════════════════════════════════ */

/* ── Task #7: Road page header fix ── */
.road-header {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

/* ── Task #8: Empty states for Review / Mistakes ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  min-height: 40vh;
}
.empty-state-icon {
  font-size: 3rem;
  margin-bottom: .8rem;
  line-height: 1;
}
.empty-state-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e3a5f;
  margin-bottom: .4rem;
}
.empty-state-msg {
  font-size: .88rem;
  color: #64748b;
  max-width: 280px;
  line-height: 1.5;
  margin-bottom: 1.2rem;
}
.empty-state-cta {
  display: inline-block;
  padding: .6rem 1.5rem;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.empty-state-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,130,246,.35);
}

/* ── Task #9: Profile page bottom padding for tab bar ── */
#profile-page {
  padding-bottom: 7rem !important;
}

/* ── Task #10: Desktop layout — wider content, constrained tab bar ── */
@media (min-width: 769px) {
  #home, #lesson-page, #review-page, #study-plan-page, #progress-page,
  #mistakes-page, #practice-mistakes-page, #profile-page {
    max-width: 720px;
  }
  #road-page, .road-header {
    max-width: 720px;
  }
  #tab-bar {
    max-width: 480px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
  }
  #app-header {
    padding: 0 2rem;
  }
}

/* ── Task #11: Tab bar active indicator (top colored line) ── */
.tab-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 3px;
  background: transparent;
  border-radius: 0 0 3px 3px;
  transition: background .2s;
}
.tab-btn.active::before {
  background: #3b82f6;
}
.tab-btn.active .tab-btn-icon {
  transform: scale(1.1);
  transition: transform .2s;
}

/* ── Task #11: Chapter card progress bars ── */
/* Unit progress bar styles are in the UNIT GRID section above */

/* ── Task #11: FREE TRIAL badge contrast fix ── */
.prof-status-trial {
  background: rgba(245,158,11,.5);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* ── Ensure all pages have enough bottom padding for tab bar ── */
#review-page, #mistakes-page, #study-plan-page, #progress-page {
  padding-bottom: 5rem !important;
}

/* ═══════════════════════════════════════════════════
   REVIEW PAGE REDESIGN
   ═══════════════════════════════════════════════════ */

/* Review page header */
.rev-header {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.2rem;
}
.rev-header-icon {
  font-size: 2rem;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rev-title {
  font-size: 1.3rem !important;
  font-weight: 700;
  color: #1e3a5f !important;
  margin: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.rev-subtitle {
  font-size: .82rem;
  color: #64748b;
  margin: .1rem 0 0 0;
}

/* Progress bar — more colorful and prominent */
.review-progress {
  background: #fff;
  border-radius: 12px;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.review-progress span {
  font-size: .78rem;
  font-weight: 600;
  color: #8b5cf6;
}
.review-progress-bar {
  height: 8px;
  background: #ede9fe;
  border-radius: 99px;
  overflow: hidden;
  margin-top: .5rem;
}
.review-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
  border-radius: 99px;
  transition: width .4s ease;
}

/* Section context badge — more compact */
.review-context {
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.review-context .case-tag {
  font-size: .72rem;
  padding: .25rem .6rem;
  border-radius: 8px;
}
.review-section-title {
  font-size: .82rem;
  color: #64748b;
}

/* Exercise card — elevated and modern */
#review-exercises .exercise-block {
  background: #fff;
  border-radius: 16px;
  padding: 1.2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border: 1px solid #f1f5f9;
}
#review-exercises .ex-type-label {
  font-size: .95rem !important;
  font-weight: 700;
  color: #1e3a5f;
  margin: 0 0 .3rem 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
#review-exercises .ex-instruction {
  font-size: .85rem;
  color: #64748b;
  margin-bottom: .8rem;
}

/* Next button — wider and more prominent */
.review-next-btn {
  display: block;
  width: 100%;
  margin: 1rem 0 0 0;
  padding: .75rem 1.5rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.review-next-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(139,92,246,.35);
}

/* Input inside review cards */
#review-exercises .fb-input {
  border-radius: 10px;
  border: 2px solid #e2e8f0;
  padding: .6rem .8rem;
  font-size: .92rem;
  transition: border-color .2s;
}
#review-exercises .fb-input:focus {
  border-color: #8b5cf6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}

/* Check button inside review */
#review-exercises .fb-check-btn,
#review-exercises .check-btn {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border-radius: 10px;
  font-weight: 600;
  border: none;
  color: #fff;
  padding: .6rem 1.2rem;
  cursor: pointer;
  transition: transform .1s;
}
#review-exercises .fb-check-btn:hover,
#review-exercises .check-btn:hover {
  transform: scale(1.03);
}

/* Mistakes practice-all button */
.mistakes-practice-btn {
  display: block;
  width: 100%;
  padding: .75rem 1rem;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.mistakes-practice-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(244,63,94,.35);
}

/* Mistakes section cards */
#mistakes-sections .mistakes-section-card {
  background: #fff;
  border-radius: 12px;
  margin-bottom: .6rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  overflow: hidden;
}

/* ── Notes Page ───────────────────────────────── */
#notes-page { padding: 2rem 2.5rem; max-width: 960px; }

.notes-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.notes-page-title { font-size: 1.6rem; font-weight: 700; color: #1e293b; margin: 0 0 .25rem; }
.notes-page-sub   { color: #64748b; margin: 0; font-size: .92rem; }

.btn-add-note {
  padding: .6rem 1.4rem; background: #1e3a5f; color: #fff;
  border: none; border-radius: 10px; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: background .2s; white-space: nowrap; flex-shrink: 0;
}
.btn-add-note:hover { background: #2563eb; }

.notes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem;
}

.note-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 1.1rem 1.25rem; cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  border-left: 4px solid #1e3a5f;
}
.note-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); border-color: #3b82f6; }
.note-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; }
.note-card-title  { font-size: 1rem; font-weight: 700; color: #1e293b; margin: 0; flex: 1; }
.note-card-date   { font-size: .72rem; color: #94a3b8; white-space: nowrap; margin-top: .1rem; }
.note-card-preview{ font-size: .85rem; color: #64748b; line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

#notes-empty {
  text-align: center; padding: 4rem 2rem; display: none; flex-direction: column;
  align-items: center; gap: .75rem;
}
.notes-empty-icon  { font-size: 3rem; }
.notes-empty-title { font-size: 1.2rem; font-weight: 700; color: #1e293b; }
.notes-empty-sub   { color: #64748b; max-width: 320px; font-size: .9rem; margin: 0; }

/* ── Note Editor Overlay ──────────────────────── */
.note-editor-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(15,37,68,.6); display: flex; align-items: center; justify-content: center;
  padding: 1rem; backdrop-filter: blur(4px);
}
.note-editor-card {
  background: #fff; border-radius: 16px; width: 100%; max-width: 640px;
  display: flex; flex-direction: column; max-height: 90vh; box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.note-editor-header {
  display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}
.note-title-input {
  flex: 1; border: none; outline: none; font-size: 1.1rem; font-weight: 700;
  color: #1e293b; background: transparent; font-family: inherit;
}
.note-title-input::placeholder { color: #cbd5e1; }
.btn-close-editor {
  background: none; border: none; font-size: 1.2rem; color: #94a3b8; cursor: pointer; padding: .25rem .5rem;
  border-radius: 6px; transition: background .15s; line-height: 1;
}
.btn-close-editor:hover { background: #f1f5f9; color: #1e293b; }
.note-content-input {
  flex: 1; border: none; outline: none; resize: none; padding: 1rem 1.25rem;
  font-size: .95rem; color: #334155; line-height: 1.7; font-family: inherit;
  min-height: 240px;
}
.note-editor-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1.25rem; border-top: 1px solid #e2e8f0;
}
.note-save-status { font-size: .8rem; color: #94a3b8; }
.note-editor-actions { display: flex; gap: .5rem; }
.btn-delete-note {
  padding: .45rem 1rem; background: none; border: 1px solid #fca5a5; color: #ef4444;
  border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .2s;
}
.btn-delete-note:hover { background: #fef2f2; }
.btn-save-note {
  padding: .45rem 1.2rem; background: #1e3a5f; color: #fff;
  border: none; border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .2s;
}
.btn-save-note:hover { background: #2563eb; }