/* --- assets\css\app.css --- */
:root{--acc:#4f6ef7;--acc-l:#eef0fe;--acc-d:#3451d1;--grn:#16a34a;--grn-l:#dcfce7;--sur:#fff;--bg:#f5f5f7;--txt:#1a1a2e;--mut:#6b7280;--bdr:#e5e7eb;--app-max:1180px}
html[data-theme="dark"]{--sur:#1e293b;--bg:#0f172a;--txt:#f1f5f9;--mut:#94a3b8;--bdr:#334155;--acc-l:#1e293b}
html[data-theme="dark"] .hdr{background:linear-gradient(130deg,#0f172a 0%,#1e293b 45%,#312e81 100%)}
html[data-theme="dark"] .day-card,html[data-theme="dark"] .bg-white{background:var(--sur)!important;color:var(--txt)}
html[data-theme="dark"] .text-gray-900,html[data-theme="dark"] .text-gray-800,html[data-theme="dark"] .text-gray-700{color:var(--txt)!important}
html[data-theme="dark"] .text-gray-500,html[data-theme="dark"] .text-gray-400,html[data-theme="dark"] .text-gray-600{color:var(--mut)!important}
html[data-theme="dark"] .tab-btn{background:var(--sur);color:var(--mut);border-color:var(--bdr)}
html[data-theme="dark"] .profile-menu{background:var(--sur);border-color:var(--bdr);box-shadow:0 20px 50px rgba(0,0,0,.45)}
html[data-theme="dark"] .profile-menu-kicker{color:var(--mut);border-color:var(--bdr)}
html[data-theme="dark"] .profile-menu-section+.profile-menu-section{border-color:var(--bdr)}
html[data-theme="dark"] .profile-menu-section-label{color:var(--mut)}
html[data-theme="dark"] .profile-item{color:var(--txt)}
html[data-theme="dark"] .profile-item:hover{background:#334155}
html[data-theme="dark"] .profile-meta-pill{background:#334155;color:var(--mut)}
html[data-theme="dark"] .profile-item-muted:hover{background:#450a0a;color:#fca5a5}
.dash-nav{display:flex;flex-wrap:wrap;gap:8px}
.dash-nav-btn{padding:8px 14px;border-radius:999px;border:1px solid var(--bdr);background:var(--sur);font-size:13px;font-weight:600;color:var(--mut);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s}
.dash-nav-btn:hover{border-color:#c7d0fc;color:var(--acc-d)}
.dash-nav-btn.active{background:var(--acc);color:#fff;border-color:var(--acc)}
.dash-vocab-tab.active{background:var(--acc);color:#fff;border-color:var(--acc)}
.dash-lv-roadmap{display:flex;gap:6px;align-items:flex-end;height:3rem}
.dash-lv-roadmap-seg{position:relative;flex:1;min-width:0;height:100%;border-radius:10px;background:#f1f5f9;border:1px solid #e5e7eb;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.dash-lv-roadmap-seg.active{border-color:var(--lv-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--lv-color) 35%,transparent)}
.dash-lv-roadmap-seg.done .dash-lv-roadmap-fill{background:var(--lv-color)!important;opacity:1}
.dash-lv-roadmap-fill{position:absolute;left:0;right:0;bottom:0;width:100%;min-height:0;background:var(--lv-color);opacity:.35;transform-origin:bottom;transition:height .4s ease}
.dash-lv-roadmap-seg.active .dash-lv-roadmap-fill{opacity:.55}
.dash-lv-roadmap-lbl{position:relative;z-index:1;font-size:11px;font-weight:700;text-align:center;padding:4px;color:#64748b}
.dash-lv-card{border:1px solid var(--bdr);border-radius:14px;padding:14px 16px;background:#fff}
.dash-lv-card-active{border:2px solid var(--lv-color);background:var(--lv-bg)}
.dash-lv-card-locked{opacity:.72}
.dash-lv-card-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.dash-lv-card-icon{font-size:1.35rem;line-height:1;flex-shrink:0}
.dash-lv-card-title{color:var(--lv-color)}
.dash-lv-pct{font-size:1.125rem;font-weight:700;flex-shrink:0}
.dash-lv-progress{padding-top:2px;border-top:1px solid #f1f5f9}
.dash-lv-prog-track{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.dash-lv-prog-fill{height:100%;border-radius:999px;background:var(--lv-color)!important;transition:width .45s ease}
html[data-theme="dark"] .dash-lv-card{background:var(--sur);border-color:var(--bdr)}
html[data-theme="dark"] .dash-lv-progress{border-color:var(--bdr)}
html[data-theme="dark"] .dash-lv-prog-track{background:#334155}
html[data-theme="dark"] .dash-lv-roadmap-seg{background:#1e293b;border-color:var(--bdr)}
*{box-sizing:border-box}
html{overflow-x:hidden;overflow-y:auto;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--txt);min-height:100vh;margin:0;width:100%;max-width:100%;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img,svg,video,canvas{max-width:100%;height:auto}
.app-shell{width:100%;max-width:min(var(--app-max),100%);margin-inline:auto;padding-inline:clamp(12px,3vw,20px);box-sizing:border-box}
.app-main{width:100%;max-width:min(var(--app-max),100%);margin-inline:auto;padding-inline:clamp(12px,3vw,16px);padding-bottom:max(3.5rem,env(safe-area-inset-bottom));box-sizing:border-box}
#q-question,#pdf-q-question,.pron-target,.pron-ar-title,.quiz-opt,.pron-example-main{overflow-wrap:anywhere;word-break:break-word}
.arabic{font-family:'Noto Sans Arabic',sans-serif;direction:rtl}
.mono{font-family:'DM Mono',monospace}
.hdr{position:relative;background:linear-gradient(130deg,#111827 0%,#1f2a58 45%,#3b4fd1 100%);overflow-x:clip;overflow-y:visible;z-index:20;width:100%}
.hdr::before{content:'';position:absolute;right:0;bottom:-40px;width:min(280px,55vw);height:min(280px,55vw);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);pointer-events:none;z-index:0}
.hdr::after{content:'';position:absolute;left:0;top:0;width:min(220px,45vw);height:min(220px,45vw);border-radius:50%;background:radial-gradient(circle,rgba(79,110,247,.3),rgba(79,110,247,0) 68%);pointer-events:none;z-index:0}
.hdr-inner{position:relative;z-index:2}
.app-breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:13px;line-height:1.4}
.app-breadcrumbs .bc-link{background:none;border:none;padding:0;color:rgba(255,255,255,.75);cursor:pointer;font:inherit;text-decoration:none;transition:color .15s}
.app-breadcrumbs .bc-link:hover{color:#fff;text-decoration:underline}
.app-breadcrumbs .bc-sep{color:rgba(255,255,255,.35);user-select:none;padding:0 2px}
.app-breadcrumbs .bc-current{color:#fff;font-weight:600}
.app-breadcrumbs .bc-home{font-weight:600}
.brand-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:12px;flex-shrink:0}
.brand-name{font-weight:600;letter-spacing:.01em}
.hdr-brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;width:100%}
.hdr-brand{
  display:flex;align-items:center;gap:10px;
  min-width:0;flex:1;
  border:none;background:transparent;padding:0;
  cursor:pointer;color:inherit;font-family:'DM Sans',sans-serif;
  text-align:left;-webkit-tap-highlight-color:transparent;
  transition:opacity .15s ease;
}
.hdr-brand:hover{opacity:.92}
.hdr-brand-mark{
  flex-shrink:0;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:13px;
  background:linear-gradient(145deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.08) 100%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 4px 14px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.25);
  font-size:11px;font-weight:800;letter-spacing:-.05em;
  color:#fff;
}
.hdr-brand-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.hdr-brand-name{display:block;font-size:17px;font-weight:800;letter-spacing:-.03em;line-height:1.12;color:#fff}
.hdr-brand-tagline{display:block;font-size:10px;font-weight:500;color:rgba(255,255,255,.56);line-height:1.25;letter-spacing:.02em;text-transform:uppercase}
.profile-wrap{position:relative;z-index:80;flex-shrink:0;margin-inline-start:auto}
.stat-pill{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  padding:8px 14px;
  text-align:center;
}
.stat-pill--action{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.stat-pill--action:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.32)}
.stat-pill--action:active{transform:scale(.97)}
.stat-pill--action:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:2px}
.stat-pill__icon{display:none}
.stat-pill__body{min-width:0}
.hdr-title-block{min-width:0}
.hdr-stats-wrap{min-width:0}
.prog-track{height:5px;background:#e5e7eb;border-radius:3px;overflow:hidden}
.prog-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--acc),#7c3aed);transition:width .4s}
.hdr .prog-track{background:rgba(255,255,255,.22);border-radius:999px}
.hdr .prog-fill{border-radius:999px;background:linear-gradient(90deg,#fff,rgba(255,255,255,.78))}
.profile-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:11.5rem;max-width:min(15rem,calc(100vw - 24px));background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 20px 50px rgba(15,23,42,.16),0 0 0 1px rgba(255,255,255,.6) inset;padding:10px;display:none;z-index:9999}
.profile-menu.open{display:block}
.profile-menu-kicker{margin:0 0 8px;padding:0 10px 6px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9ca3af;border-bottom:1px solid #f1f5f9}
.profile-menu-section{padding:4px 0}
.profile-menu-section+.profile-menu-section{border-top:1px solid #f1f5f9;margin-top:4px;padding-top:8px}
.profile-menu-section-last{padding-bottom:2px}
.profile-menu-section-label{margin:0 0 4px;padding:0 10px;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#a1a1aa;line-height:1.2}
.profile-item{width:100%;text-align:left;border:none;background:transparent;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:500;color:#1f2937;cursor:pointer;display:flex;align-items:center;gap:10px;white-space:nowrap;line-height:1.25;font-family:'DM Sans',sans-serif;transition:background .12s,color .12s}
.profile-item:hover{background:#f3f4f6}
.profile-item:active{background:#eef0fe}
.profile-item-icon{flex-shrink:0;width:1.35rem;text-align:center;font-size:15px;line-height:1}
.profile-item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.profile-item-meta .profile-item-label{flex:0 1 auto}
.profile-meta-pill{flex-shrink:0;margin-left:auto;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;background:#f1f5f9;color:#64748b;line-height:1}
.profile-item-muted{color:#6b7280}
.profile-item-muted:hover{color:#dc2626;background:#fef2f2}
.profile-btn{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:6px 10px;cursor:pointer;transition:all .16s;font-family:'DM Sans',sans-serif;color:inherit}
.profile-btn:hover{background:rgba(255,255,255,.18)}
.avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffffff;color:#1f2a58;font-weight:700;font-size:12px}
.tab-btn{padding:8px 16px;border-radius:999px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--bdr);background:#fff;color:var(--mut);transition:all .15s;white-space:nowrap;font-family:'DM Sans',sans-serif}
.tab-btn.active{background:var(--acc);color:#fff;border-color:var(--acc)}
.tab-card__icon,.tab-card__label{display:inline}
.tab-card__icon{line-height:1}
.main-tabs .tab-btn{display:inline-flex;align-items:center;gap:5px}
.path-hero-card{position:relative;overflow:hidden;box-shadow:0 12px 40px rgba(26,26,46,.18)}
.path-hero-card::before{content:'';position:absolute;top:-30%;right:-8%;width:min(240px,50vw);height:min(240px,50vw);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 68%);pointer-events:none}
.path-hero-card__intro{display:flex;align-items:flex-start;gap:14px;padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid rgba(255,255,255,.14)}
.path-hero-card__icon{font-size:2.75rem;line-height:1;flex-shrink:0}
.path-hero-card__titles{flex:1;min-width:0;text-align:center}
.path-hero-card__title{margin:0 0 4px;font-size:clamp(1.05rem,2.5vw,1.25rem);font-weight:700;line-height:1.25}
.path-hero-card__tagline{margin:0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.72)}
.path-hero-card__body{position:relative;z-index:1}
.path-lv-status{
  padding:14px;border-radius:16px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
}
.path-lv-status__head{
  margin-bottom:12px;
}
.path-lv-status__kicker{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.path-lv-status__row{display:flex;align-items:flex-start;gap:12px}
.path-lv-status__emoji{
  flex-shrink:0;width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.path-lv-status__copy{flex:1;min-width:0}
.path-lv-status__label{
  margin:0;font-size:clamp(17px,4.5vw,20px);font-weight:700;line-height:1.25;
  letter-spacing:-.02em;color:#fff;
}
.path-lv-status__desc{
  margin:5px 0 0;font-size:12px;line-height:1.45;color:rgba(255,255,255,.72);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.path-lv-status__stats{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;
}
.path-lv-stat{
  padding:10px 12px;border-radius:12px;text-align:center;
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.1);
}
.path-lv-stat--ring{border-color:color-mix(in srgb,var(--path-lv-color,#4f6ef7) 45%,rgba(255,255,255,.15))}
.path-lv-stat__val{
  display:block;font-size:18px;font-weight:700;line-height:1.1;color:#fff;
  font-variant-numeric:tabular-nums;
}
.path-lv-stat--ring .path-lv-stat__val{color:color-mix(in srgb,var(--path-lv-color,#86efac) 70%,#fff)}
.path-lv-stat__lbl{
  display:block;margin-top:3px;font-size:10px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.path-hero-card__progress{margin-top:1rem}
.path-hero-card__milestones{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.02em}
@media(min-width:520px){
  .path-hero-card__intro{align-items:center}
  .path-hero-card__titles{text-align:left}
  .path-hero-card__icon{font-size:3rem}
}
.play-btn{width:34px;height:34px;border-radius:50%;background:var(--acc-l);color:var(--acc);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.play-btn:hover{background:var(--acc);color:#fff;transform:scale(1.08)}
.play-btn.playing{background:var(--acc);color:#fff;animation:pulse 1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,110,247,.4)}70%{box-shadow:0 0 0 7px rgba(79,110,247,0)}100%{box-shadow:0 0 0 0 rgba(79,110,247,0)}}
.learn-btn{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--bdr);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.learn-btn.done{background:var(--grn-l);border-color:#86efac;color:var(--grn)}
.p-row{display:flex;align-items:flex-start;gap:12px;padding:0;border-bottom:none}
.p-row:last-child{border-bottom:none}
#daily-list{display:flex;flex-direction:column;gap:10px}
.day-body{display:none;padding:0 12px 12px}
.day-body.open{display:flex;flex-direction:column;gap:8px}
.p-row-toggle{
  cursor:pointer;border-radius:14px;margin:0;
  padding:12px 12px 12px 10px;
  border:1.5px solid #e5e7eb;
  background:#fff;
  transition:background .15s,border-color .15s,box-shadow .15s;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.p-row-toggle:hover{background:#f8fafc;border-color:#d1d5db}
.p-row-learned{background:#f0fdf4;border-color:#86efac}
.p-row-learned:hover{background:#ecfdf5;border-color:#4ade80}
.p-row-toggle:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.p-row-toggle .learn-btn{pointer-events:none}
.p-row__play{flex-shrink:0;margin-top:2px;width:38px;height:38px}
.p-row__body{flex:1;min-width:0}
.p-row__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.p-row__text{flex:1;min-width:0}
.phrase-en{
  margin:0;font-size:15px;font-weight:700;line-height:1.35;
  color:#111827;letter-spacing:-.01em;
}
.phrase-ar{
  margin:6px 0 0;font-size:15px;font-weight:500;line-height:1.45;
  color:#374151;
}
.phrase-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;
}
.phrase-cat{
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--cat-color,#4f6ef7) 14%,#fff);
  color:var(--cat-color,#4f6ef7);
  border:1px solid color-mix(in srgb,var(--cat-color,#4f6ef7) 28%,transparent);
}
.phrase-learned-badge{
  font-size:12px;font-weight:700;color:#15803d;
}
.phrase-tap-hint{
  font-size:11px;font-weight:600;color:var(--mut);
}
.phrase-tip{
  margin:10px 0 0;font-size:12px;line-height:1.45;color:#4b5563;
  background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;
  padding:8px 10px;
}
.p-row-learned .phrase-tip{background:#ecfdf5;border-color:#bbf7d0}
.tip{font-size:12px;color:var(--mut);border-left:3px solid #c7d0fc;padding-left:8px;margin-top:5px}
.search-box{background:#fff;border:1px solid var(--bdr);border-radius:10px;padding:9px 14px 9px 38px;font-size:13px;font-family:'DM Sans',sans-serif;width:100%;outline:none;transition:border-color .15s}
.search-box:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(79,110,247,.1)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s;white-space:nowrap}
.chip.off{background:#fff;border-color:var(--bdr);color:var(--mut)}
.chip.off:hover{border-color:#c7d0fc;color:var(--acc)}
.chip.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.spd{padding:4px 9px;border-radius:6px;font-size:12px;font-family:'DM Mono',monospace;border:1px solid var(--bdr);background:#fff;cursor:pointer;transition:all .12s;color:var(--mut)}
.spd.active{background:var(--acc-l);border-color:#c7d0fc;color:var(--acc);font-weight:600}
.chips-scroll::-webkit-scrollbar{height:3px}
.chips-scroll::-webkit-scrollbar-track{background:transparent}
.chips-scroll::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
.chips-scroll{-ms-overflow-style:auto;scrollbar-width:thin;scroll-behavior:smooth;max-width:100%;-webkit-overflow-scrolling:touch}
.tabs-scroll-outer{width:100%;max-width:100%;margin-bottom:1.25rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.tabs-row{display:inline-flex;gap:8px;flex-wrap:nowrap;padding:2px 4px 8px;min-width:min-content}
.tab-btn{flex-shrink:0;scroll-snap-align:center}
.tabs-scroll-outer .tabs-row{margin-inline:auto}
@media(max-width:768px){
  .tabs-scroll-outer{display:flex;justify-content:center;padding-inline:clamp(8px,3vw,16px)}
  .tabs-row{scroll-snap-type:x proximity}
}
.cat-wrap{position:relative}
.cat-wrap::after{content:'';position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(to right,transparent,var(--bg));pointer-events:none;border-radius:0 8px 8px 0}
.cat-wrap.at-end::after{display:none}
.day-card{background:#fff;border:1px solid var(--bdr);border-radius:14px;overflow:hidden;transition:all .18s;animation:fadeUp .22s ease both}
.day-card.today{border-color:#4f6ef7;box-shadow:0 0 0 3px rgba(79,110,247,.1)}
.day-card.done{border-color:#86efac;background:#f0fdf4}
.day-card.locked{opacity:.55}
.day-header{padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:12px;user-select:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── FLASHCARD ── */
/* Flashcards */
.flash-toolbar{
  display:flex;align-items:flex-start;gap:8px;
  margin-bottom:10px;
  border-radius:16px;
  background:#fff;border:1px solid var(--bdr);
  box-shadow:0 2px 12px rgba(15,23,42,.05);
  padding:10px 10px 10px 12px;
}
.flash-toolbar__details{flex:1;min-width:0;border:none;margin:0}
.flash-toolbar__details > summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.flash-toolbar__details > summary::-webkit-details-marker{display:none}
.flash-toolbar__summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:2px 0;
}
.flash-toolbar__summary-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.flash-toolbar__summary-title{
  display:block;font-size:15px;font-weight:700;color:var(--txt);
  line-height:1.25;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.flash-toolbar__summary-meta{font-size:11px;color:var(--mut)}
.flash-toolbar__summary-hint{
  flex-shrink:0;font-size:11px;font-weight:600;color:var(--acc);
  padding:6px 10px;border-radius:999px;background:var(--acc-l);
}
.flash-toolbar__details[open] .flash-toolbar__summary-hint{color:var(--mut);background:var(--bg)}
.flash-toolbar__panel{padding-top:12px;display:flex;flex-direction:column;gap:10px}
.flash-side-note{margin:0;font-size:11px;color:var(--mut);padding:0 2px}
.flash-toolbar__shuffle{
  flex-shrink:0;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--bdr);background:var(--bg);color:var(--mut);
  cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent;
  margin-top:2px;
}
.flash-toolbar__shuffle:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-l)}
.flash-toolbar__shuffle:active{transform:scale(.96)}
.flash-filter-block{display:flex;flex-direction:column;gap:6px}
.flash-filter-label{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);padding-left:2px;
}
.flash-chips-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
}
.flash-chips-wrap::-webkit-scrollbar{display:none}
.flash-chips{display:flex;gap:8px;padding-bottom:2px}
.flash-chip{
  flex-shrink:0;padding:9px 15px;border-radius:999px;
  font-size:12px;font-weight:600;border:1.5px solid var(--bdr);
  background:#fff;color:var(--mut);cursor:pointer;
  transition:all .15s ease;font-family:'DM Sans',sans-serif;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  min-height:36px;
}
.flash-chip.active{
  background:var(--acc);color:#fff;border-color:var(--acc);
  box-shadow:0 3px 10px rgba(79,110,247,.24);
}
.flash-chip__count{font-weight:500;opacity:.75}
.path-lv-pick{outline:none;-webkit-tap-highlight-color:transparent}
.path-lv-pick.is-current{font-weight:700}
.flash-toolbar__controls{
  display:flex;flex-direction:column;gap:10px;
  padding:0;
}
.flash-speech-panel{
  display:grid;grid-template-columns:1fr;gap:10px;
  padding:12px;border-radius:14px;
  background:var(--bg);border:1px solid var(--bdr);
}
.flash-control-group{display:flex;flex-direction:column;gap:6px;min-width:0}
.flash-control-group--voice{min-width:0}
.flash-voice-wrap{display:flex;flex-direction:column;gap:6px;width:100%}
.flash-voice-select{width:100%}
.flash-speed-group{width:100%;display:flex}
.flash-speed-group .spd{flex:1;min-width:0;padding:8px 10px}
.flash-control-label{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.flash-session{display:flex;flex-direction:column;gap:6px;min-width:0}
.flash-session__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.flash-session__lbl{font-size:11px;font-weight:600;color:var(--acc)}
.flash-prog{height:6px;margin:0}
.flash-stage{display:flex;align-items:center;padding:4px 0 10px}
.fc-scene{
  perspective:1000px;width:100%;max-width:480px;
  height:min(52vh,340px);min-height:248px;
  margin:0 auto;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  --fc-cat-color:#4f6ef7;
}
.fc-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.fc-card.flipped{transform:rotateY(180deg)}
.fc-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:56px 22px 22px;text-align:center;overflow:hidden;
}
.fc-front{
  background:linear-gradient(145deg,#1a1a2e 0%,#2d2f6b 55%,color-mix(in srgb,var(--fc-cat-color) 38%,#2d2f6b) 100%);
  color:#fff;
  box-shadow:0 16px 40px rgba(26,26,46,.32),inset 0 1px 0 rgba(255,255,255,.12);
}
.fc-front::before{
  content:'';position:absolute;top:-25%;right:-12%;width:55%;height:55%;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 68%);
  pointer-events:none;
}
.fc-back{
  background:#fff;border:2px solid var(--acc);
  transform:rotateY(180deg);
  box-shadow:0 12px 32px rgba(79,110,247,.12);
  padding-top:48px;
}
.fc-front__top{
  position:absolute;top:14px;left:14px;right:14px;
  display:flex;align-items:center;justify-content:space-between;z-index:2;
}
.fc-cat-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.88);max-width:calc(100% - 52px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fc-cat-pill::before{
  content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;
  background:var(--fc-cat-color);box-shadow:0 0 8px var(--fc-cat-color);
}
.fc-cat-pill--light{background:var(--acc-l);border-color:rgba(79,110,247,.2);color:var(--acc);margin-bottom:10px}
.fc-audio-fab{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .15s,background .15s;-webkit-tap-highlight-color:transparent;
}
.fc-audio-fab:hover{background:rgba(255,255,255,.22)}
.fc-audio-fab:active{transform:scale(.92)}
.fc-visual{
  width:100px;height:72px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.fc-visual-emoji{font-size:32px;line-height:1}
.fc-visual-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-top:4px}
.fc-front-text{
  margin:0;font-size:clamp(18px,5vw,22px);font-weight:700;line-height:1.35;
  letter-spacing:-.02em;max-width:100%;word-break:break-word;
}
.fc-front-text--ar{font-family:'Noto Sans Arabic',sans-serif;font-size:clamp(20px,5.5vw,24px)}
.fc-hint{
  font-size:11px;opacity:.55;margin:14px 0 0;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.fc-hint__icon{font-size:13px;line-height:1}
.fc-back-main{
  margin:0;font-size:clamp(17px,4.5vw,20px);font-weight:700;color:var(--txt);
  line-height:1.35;letter-spacing:-.02em;max-width:100%;word-break:break-word;
}
.fc-back-ar{margin:8px 0 0;font-size:15px;color:var(--mut)}
.fc-back-tip{margin:12px 0 0;font-size:11px;color:var(--mut);font-style:italic;line-height:1.45;padding:0 8px}
.flash-actions{
  display:flex;gap:8px;align-items:stretch;margin-top:2px;padding-bottom:2px;
}
.flash-know-row{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.fc-nav-btn{
  width:48px;min-height:48px;border-radius:14px;
  background:#fff;border:1px solid var(--bdr);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;color:var(--txt);
}
.fc-nav-btn:hover{border-color:#c7d0fc;background:var(--acc-l);color:var(--acc)}
.fc-nav-btn:active{transform:scale(.96)}
.fc-nav-btn:disabled{opacity:.35;cursor:default;transform:none}
.fc-know-btn{
  min-height:48px;padding:10px 8px;border-radius:14px;
  font-size:12px;font-weight:700;cursor:pointer;border:none;
  transition:all .15s ease;font-family:'DM Sans',sans-serif;
  display:flex;align-items:center;justify-content:center;gap:4px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.fc-know-btn.yes{background:linear-gradient(180deg,#ecfdf5,#bbf7d0);color:#15803d;box-shadow:0 2px 8px rgba(22,163,74,.12)}
.fc-know-btn.yes:active{transform:scale(.98)}
.fc-know-btn.no{background:linear-gradient(180deg,#fef2f2,#fee2e2);color:#dc2626;box-shadow:0 2px 8px rgba(220,38,38,.08)}
.fc-know-btn.no:active{transform:scale(.98)}

/* ── QUIZ ── */
.quiz-opt{width:100%;text-align:left;padding:13px 16px;border-radius:12px;border:1.5px solid var(--bdr);background:#fff;font-size:14px;cursor:pointer;transition:all .15s;font-family:'DM Sans',sans-serif}
.quiz-opt:hover:not(:disabled){border-color:#c7d0fc;background:var(--acc-l)}
.quiz-opt.correct{border-color:#86efac!important;background:#f0fdf4!important;color:var(--grn)!important;font-weight:500}
.quiz-opt.wrong{border-color:#fca5a5!important;background:#fef2f2!important;color:#dc2626!important}
.quiz-opt.pt-picked{border-color:#4f6ef7!important;background:#eef0fe!important;color:#3451d1!important;font-weight:600}
.quiz-opt.reveal{border-color:#86efac;background:#f0fdf4;color:var(--grn)}
.q-type-btn{padding:6px 14px;border-radius:999px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--bdr);background:#fff;color:var(--mut);transition:all .15s;white-space:nowrap}
.q-type-btn.active{background:var(--acc);color:#fff;border-color:var(--acc)}
@keyframes mic-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(79,110,247,.5)}50%{transform:scale(1.06);box-shadow:0 0 0 14px rgba(79,110,247,0)}}
.mic-listening{animation:mic-pulse 1.2s ease-in-out infinite!important}
@keyframes ping{0%{transform:scale(1);opacity:1}75%,100%{transform:scale(2);opacity:0}}
.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}
.word-ok{color:#16a34a;font-weight:500}
.word-bad{color:#dc2626;text-decoration:line-through}
.word-miss{color:#9333ea;font-style:italic}
/* ── Responsive layout ── */
@media(max-width:900px){
  .hdr h1{font-size:20px}
  .hdr-badge{display:none}
}
.placement-cta{display:block;width:100%;position:relative;border:none;padding:0;cursor:pointer;font-family:'DM Sans',sans-serif;-webkit-tap-highlight-color:transparent;border-radius:20px;overflow:hidden;transition:transform .15s ease,box-shadow .2s ease}
.placement-cta:active{transform:scale(.98)}
.placement-cta__glow{position:absolute;inset:0;background:linear-gradient(135deg,#7c3aed 0%,#4f6ef7 50%,#6366f1 100%);opacity:1}
.placement-cta__glow::after{content:'';position:absolute;top:-40%;right:-20%;width:55%;height:140%;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 68%);pointer-events:none}
.placement-cta__inner{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:16px 18px;text-align:left;color:#fff}
.placement-cta__icon-wrap{flex-shrink:0;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.placement-cta__svg{width:22px;height:22px;stroke:currentColor}
.placement-cta__copy{flex:1;min-width:0}
.placement-cta__title{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.placement-cta__sub{display:block;margin-top:3px;font-size:12px;font-weight:500;opacity:.82;line-height:1.35}
.placement-cta__arrow{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);font-size:18px;font-weight:600;line-height:1}
.placement-cta:hover{box-shadow:0 12px 32px rgba(79,110,247,.35)}
.path-hint{margin:0;text-align:center;font-size:11px;line-height:1.45}
.path-hint--note{color:#6b7280;padding:0 4px}
.path-hint--muted{color:#9ca3af;padding:0 4px;margin-bottom:8px}

/* Header title block */
.hdr-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hdr-page-title{margin:0;font-size:1.35rem;font-weight:700;letter-spacing:-.03em;line-height:1.2;color:#fff}
.hdr-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.02em;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.92);white-space:nowrap}
.hdr-level-chip{margin:8px 0 0;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.3;color:rgba(255,255,255,.92);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.hdr-sub-line{margin:0 0 12px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.62)}
.stat-count{font-variant-numeric:tabular-nums}

/* Daily toolbar + week calendar */
.daily-toolbar{
  display:flex;flex-direction:column;gap:14px;
  padding:0;margin-bottom:14px;
  border-radius:20px;overflow:hidden;
  background:#fff;border:1px solid var(--bdr);
  box-shadow:0 4px 20px rgba(15,23,42,.06);
}
.daily-toolbar__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 16px 0;
  background:linear-gradient(180deg,rgba(79,110,247,.07) 0%,transparent 100%);
}
.daily-toolbar__info{flex:1;min-width:0}
.daily-toolbar__badge{
  flex-shrink:0;width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;
  background:var(--acc-l);border:1px solid rgba(79,110,247,.15);
}
.daily-toolbar__kicker{margin:0 0 4px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--acc)}
.daily-toolbar__title{margin:0;font-size:16px;font-weight:700;color:var(--txt);line-height:1.3;letter-spacing:-.02em}
.daily-toolbar__meta{margin:5px 0 0;font-size:11px;color:var(--mut);line-height:1.35}
.daily-toolbar__controls{
  display:grid;grid-template-columns:1fr;gap:10px;
  padding:0 14px 14px;
}
.daily-control-group{display:flex;flex-direction:column;gap:6px;min-width:0}
.daily-control-group--voice{grid-column:1/-1}
.daily-control-label{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.daily-speed-group{display:inline-flex;padding:3px;border-radius:12px;background:var(--bg);border:1px solid var(--bdr);gap:2px;width:fit-content}
.daily-speed-group .spd{border:none;background:transparent;padding:8px 14px;border-radius:9px;font-size:12px;min-width:52px}
.daily-speed-group .spd.active{background:#fff;box-shadow:0 1px 4px rgba(15,23,42,.08);border:1px solid var(--bdr);color:var(--acc);font-weight:600}
.daily-voice-wrap{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%}
.daily-voice-label{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.daily-voice-select{width:100%;font-size:13px;border:1px solid var(--bdr);border-radius:12px;padding:10px 12px;background:#fff;color:var(--txt);outline:none;font-family:'DM Sans',sans-serif}
.daily-voice-select:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(79,110,247,.12)}
.daily-audio-details{border:none;margin:0}
.daily-audio-details > summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.daily-audio-details > summary::-webkit-details-marker{display:none}
.daily-audio-summary{
  font-size:12px;font-weight:600;color:var(--acc);
  padding:8px 12px;border-radius:12px;
  background:var(--acc-l);border:1px solid rgba(79,110,247,.15);
  text-align:center;
}
.daily-audio-panel{display:grid;grid-template-columns:1fr;gap:10px;padding-top:10px}
.daily-cal{margin-bottom:14px;padding:14px;border-radius:18px;background:#fff;border:1px solid var(--bdr);box-shadow:0 2px 12px rgba(15,23,42,.04)}
.daily-cal__nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.daily-cal__head{text-align:center;min-width:0;flex:1}
.daily-cal__week{display:block;font-size:14px;font-weight:700;color:var(--txt);line-height:1.2}
.daily-cal__week-of{font-weight:500;color:var(--mut);font-size:12px}
.daily-cal__range{display:block;font-size:11px;color:var(--mut);margin-top:2px}
.daily-cal__week-dots{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.daily-cal__week-dot{width:8px;height:8px;border-radius:999px;border:none;padding:0;background:var(--bdr);cursor:pointer;transition:transform .15s,background .15s,width .15s}
.daily-cal__week-dot.is-active{width:22px;background:var(--acc)}
.daily-cal__week-dot:hover:not(.is-active){background:#c7d0fc}
.daily-cal__arrow{width:40px;height:40px;border-radius:14px;border:1px solid var(--bdr);background:var(--bg);color:var(--txt);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,transform .15s;flex-shrink:0}
.daily-cal__arrow:hover:not(:disabled){background:#fff;border-color:var(--acc);color:var(--acc);transform:scale(1.04)}
.daily-cal__arrow:disabled{opacity:.3;cursor:default}
.daily-cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.daily-cal__cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;padding:6px 2px;border-radius:14px;border:1.5px solid var(--bdr);background:var(--bg);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s ease;-webkit-tap-highlight-color:transparent}
.daily-cal__cell:not(.daily-cal__cell--empty):not(:disabled):hover{border-color:#c7d0fc;background:#fff}
.daily-cal__cell.is-selected{border-color:var(--acc);background:var(--acc-l);box-shadow:0 0 0 2px rgba(79,110,247,.15)}
.daily-cal__cell.is-today:not(.is-selected){border-color:#93c5fd;background:#eff6ff}
.daily-cal__cell.is-done:not(.is-selected){border-color:#86efac;background:#f0fdf4}
.daily-cal__cell.is-locked{opacity:.45;cursor:not-allowed}
.daily-cal__cell--empty{visibility:hidden;pointer-events:none;border:none;background:transparent}
.daily-cal__dow{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);line-height:1}
.daily-cal__num{font-size:15px;font-weight:700;color:var(--txt);line-height:1.1}
.daily-cal__dot{width:5px;height:5px;border-radius:50%;background:var(--acc);margin-top:2px;opacity:0}
.daily-cal__cell.is-done .daily-cal__dot,.daily-cal__cell.is-today .daily-cal__dot{opacity:1}
.daily-cal__cell.is-done .daily-cal__dot{background:#16a34a}
.daily-locked-msg{padding:24px 16px;border-radius:18px;text-align:center;background:#fff;border:1px dashed var(--bdr);color:var(--mut)}
.daily-locked-msg__icon{font-size:28px;display:block;margin-bottom:8px}
.daily-locked-msg__title{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--txt)}
.daily-locked-msg__sub{margin:0;font-size:12px;line-height:1.45}
.daily-detail .day-card{margin:0}
.daily-detail .day-body{display:flex!important}

/* Daily routine checklist */
.daily-routine{
  margin-bottom:12px;padding:14px;
  border-radius:18px;background:#fff;border:1px solid var(--bdr);
  box-shadow:0 2px 12px rgba(15,23,42,.04);
}
.daily-routine__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.daily-routine__kicker{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--acc)}
.daily-routine__meta{margin:0;font-size:13px;font-weight:600;color:var(--txt);line-height:1.4}
.daily-routine__ring{
  flex-shrink:0;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--acc) calc(var(--ring-pct,0)*1%),var(--bg) 0);
  position:relative;font-size:11px;font-weight:700;color:var(--txt);
}
.daily-routine__ring::before{
  content:'';position:absolute;inset:5px;border-radius:50%;background:#fff;
}
.daily-routine__ring span{position:relative;z-index:1}
.daily-routine__ring.is-complete{background:conic-gradient(#16a34a 100%,#16a34a 0);color:#15803d}
.daily-routine__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.daily-routine__step{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:14px;border:1.5px solid var(--bdr);background:var(--bg);
  transition:background .15s,border-color .15s;
}
.daily-routine__step.is-done{background:#ecfdf5;border-color:#86efac}
.daily-routine__step.is-locked{opacity:.55}
.daily-routine__icon{
  flex-shrink:0;width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;background:var(--sur);border:1px solid var(--bdr);
}
.daily-routine__step.is-done .daily-routine__icon{background:#dcfce7;border-color:#86efac}
.daily-routine__copy{flex:1;min-width:0}
.daily-routine__label{
  margin:0;font-size:14px;font-weight:700;color:var(--txt);line-height:1.35;
  letter-spacing:-.01em;
}
.daily-routine__sub{
  margin:4px 0 0;font-size:12px;font-weight:500;color:var(--mut);line-height:1.45;
}
.daily-routine__step.is-done .daily-routine__label{color:#14532d}
.daily-routine__step.is-done .daily-routine__sub{color:#166534}
.daily-routine__go{
  flex-shrink:0;padding:8px 16px;border-radius:999px;border:none;
  background:var(--acc);color:#fff;font-size:12px;font-weight:700;
  cursor:pointer;font-family:'DM Sans',sans-serif;-webkit-tap-highlight-color:transparent;
  min-height:36px;
}
.daily-routine__go:active{transform:scale(.96)}
.daily-routine__done-mark{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#16a34a;color:#fff;font-size:14px;font-weight:700;
}

/* Quiz feedback */
.quiz-feedback{margin-top:16px;padding:18px 16px;border-radius:18px;text-align:center;border:1px solid transparent;animation:quizFbIn .28s ease both}
.quiz-feedback--ok{background:linear-gradient(180deg,#ecfdf5 0%,#f0fdf4 100%);border-color:#86efac}
.quiz-feedback--bad{background:linear-gradient(180deg,#fef2f2 0%,#fff1f2 100%);border-color:#fca5a5}
.quiz-feedback__icon{font-size:28px;line-height:1;margin-bottom:6px}
.quiz-feedback__title{margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em}
.quiz-feedback--ok .quiz-feedback__title{color:#15803d}
.quiz-feedback--bad .quiz-feedback__title{color:#dc2626}
.quiz-feedback__sub{margin:6px 0 0;font-size:13px;line-height:1.45;color:#4b5563}
.quiz-feedback__answer{font-weight:600;color:#111827}
.quiz-feedback__hint{color:#6b7280}
.quiz-feedback__ar{color:#6b7280;font-size:12px}
.quiz-feedback__auto{margin:10px 0 0;font-size:11px;font-weight:600;color:#16a34a;letter-spacing:.02em}
.quiz-feedback__btn{margin-top:12px;padding:11px 22px;border-radius:12px;font-size:14px;font-weight:600;color:#fff;background:var(--acc);border:none;cursor:pointer;font-family:'DM Sans',sans-serif;transition:opacity .15s,transform .15s}
.quiz-feedback__btn:hover{opacity:.92}
.quiz-feedback__btn:active{transform:scale(.98)}
@keyframes quizFbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Quiz game header */
.quiz-game__top{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:16px;
  position:relative;z-index:12;
}
.quiz-game__stats{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.quiz-game__counter{margin:0;font-size:14px;color:var(--mut);font-weight:600}
.quiz-game__score{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.quiz-game__score-item--ok{color:#16a34a}
.quiz-game__score-item--bad{color:#dc2626}
.quiz-end-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:46px;
  padding:11px 16px;
  border-radius:14px;
  border:1.5px solid #fecaca;
  background:linear-gradient(180deg,#fff5f5 0%,#fef2f2 100%);
  color:#dc2626;
  font-size:14px;font-weight:700;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease;
  box-shadow:0 1px 3px rgba(220,38,38,.08);
}
.quiz-end-btn:hover{border-color:#f87171;background:#fff1f2;box-shadow:0 4px 12px rgba(220,38,38,.12)}
.quiz-end-btn:active{transform:scale(.98)}
.quiz-end-btn:focus-visible{outline:2px solid #f87171;outline-offset:2px}
#quiz-game{position:relative;z-index:1}
#q-feedback{position:relative;z-index:2}

html[data-theme="dark"] .quiz-end-btn{background:#450a0a;border-color:#7f1d1d;color:#fca5a5}
html[data-theme="dark"] .quiz-end-btn:hover{background:#581c1c}
html[data-theme="dark"] .daily-toolbar,html[data-theme="dark"] .daily-cal{background:var(--sur);border-color:var(--bdr)}
html[data-theme="dark"] .daily-routine{background:var(--sur);border-color:var(--bdr)}
html[data-theme="dark"] .daily-routine__ring::before{background:var(--sur)}
html[data-theme="dark"] .flash-toolbar{background:var(--sur);border-color:var(--bdr)}
html[data-theme="dark"] .flash-speech-panel{background:var(--bg);border-color:var(--bdr)}
html[data-theme="dark"] .flash-chip{background:var(--bg);border-color:var(--bdr);color:var(--mut)}
html[data-theme="dark"] .flash-toolbar__shuffle{background:var(--bg);border-color:var(--bdr)}
html[data-theme="dark"] .fc-back{background:var(--sur);border-color:var(--acc)}
html[data-theme="dark"] .fc-nav-btn{background:var(--sur);border-color:var(--bdr)}
html[data-theme="dark"] .daily-speed-group .spd.active{background:#334155;border-color:var(--bdr)}
html[data-theme="dark"] .daily-voice-select{background:var(--sur);border-color:var(--bdr);color:var(--txt)}
html[data-theme="dark"] .stat-pill--action:hover{background:rgba(255,255,255,.14)}

/* ── Mobile bottom navigation ── */
@media(min-width:641px){
  .daily-audio-details > summary{display:none}
  .daily-audio-details .daily-audio-panel{display:grid}
  .flash-toolbar__summary-hint{display:none}
  .flash-toolbar__details > summary{pointer-events:none;cursor:default}
}
.mobile-nav{display:none}
.mobile-nav-sheet{display:none}
@media(max-width:640px){
  .tabs-scroll-outer{display:none!important}
  .flash-chip__count{display:none}
  .hdr-mobile-hide{display:none!important}
  .hdr-brand-tagline{display:none}
  .hdr-brand-row{margin-bottom:8px}
  .hdr-title-block{
    background:transparent!important;
    border:none!important;
    padding:0!important;
    margin-bottom:2px!important;
  }
  .hdr-page-title{font-size:17px;line-height:1.2}
  .hdr-mobile-stats{
    background:transparent!important;
    border:none!important;
    padding:0!important;
    margin-bottom:6px!important;
  }
  .stat-pill--action{
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    gap:2px!important;
    padding:7px 4px!important;
    border-radius:12px!important;
  }
  .stat-pill__icon{display:none!important}
  .stat-pill .text-lg{font-size:15px!important}
  .stat-pill .text-xs{font-size:9px!important;margin-top:0!important}
  .path-hint--note{display:none}
  .daily-audio-details > summary{display:block}
  .flash-toolbar__summary-hint{display:inline-block}
  .app-main{padding-bottom:calc(5.75rem + env(safe-area-inset-bottom,0px))}
  .mobile-nav{
    display:block;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:9000;
    padding:0 12px calc(10px + env(safe-area-inset-bottom,0px));
    pointer-events:none;
    background:transparent;
    border:none;
    box-shadow:none;
  }
  .mobile-nav.hidden{display:none!important}
  .mobile-nav__dock{
    pointer-events:auto;
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:2px;
    padding:7px 8px;
    border-radius:22px;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(20px) saturate(1.2);
    -webkit-backdrop-filter:blur(20px) saturate(1.2);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 28px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.85);
  }
  .mobile-nav__item{
    position:relative;
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:5px 2px 4px;
    border:none;
    border-radius:14px;
    background:transparent;
    color:#94a3b8;
    cursor:pointer;
    font-family:'DM Sans',sans-serif;
    -webkit-tap-highlight-color:transparent;
    transition:color .2s ease,background .2s ease,transform .15s ease;
  }
  .mobile-nav__item:active{transform:scale(.96)}
  .mobile-nav__icon-wrap{
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    border-radius:11px;
    background:transparent;
    color:inherit;
    transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease;
  }
  .mobile-nav__svg{
    width:19px;height:19px;
    stroke:currentColor;fill:none;
    stroke-width:1.85;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .mobile-nav__label{
    font-size:10px;font-weight:600;
    letter-spacing:.02em;line-height:1;
    max-width:100%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    transition:color .2s ease,font-weight .2s ease;
  }
  .mobile-nav__item.active{
    color:var(--acc);
    background:linear-gradient(180deg,rgba(79,110,247,.12) 0%,rgba(79,110,247,.04) 100%);
  }
  .mobile-nav__item.active .mobile-nav__icon-wrap{
    background:linear-gradient(145deg,var(--acc) 0%,#6366f1 100%);
    color:#fff;
    box-shadow:0 4px 14px rgba(79,110,247,.38);
    transform:translateY(-1px);
  }
  .mobile-nav__item.active .mobile-nav__label{font-weight:700}
  .mobile-nav__item--more.is-open,
  .mobile-nav__item--more.active{
    color:var(--acc);
    background:linear-gradient(180deg,rgba(79,110,247,.12) 0%,rgba(79,110,247,.04) 100%);
  }
  .mobile-nav__item--more.is-open .mobile-nav__icon-wrap,
  .mobile-nav__item--more.active .mobile-nav__icon-wrap{
    background:linear-gradient(145deg,var(--acc) 0%,#6366f1 100%);
    color:#fff;
    box-shadow:0 4px 14px rgba(79,110,247,.38);
  }
  html[data-theme="dark"] .mobile-nav__dock{
    background:rgba(15,23,42,.88);
    border-color:rgba(51,65,85,.8);
    box-shadow:0 1px 2px rgba(0,0,0,.2),0 12px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  }
  html[data-theme="dark"] .mobile-nav__item{color:#64748b}
  html[data-theme="dark"] .mobile-nav__item.active{color:#a5b4fc}
  html[data-theme="dark"] .mobile-nav__item.active .mobile-nav__icon-wrap{box-shadow:0 4px 16px rgba(99,102,241,.45)}

  .mobile-nav-sheet{
    display:block;
    position:fixed;
    inset:0;
    z-index:9500;
    pointer-events:none;
    visibility:hidden;
    transition:visibility .28s;
  }
  .mobile-nav-sheet.open{pointer-events:auto;visibility:visible}
  .mobile-nav-sheet__backdrop{
    position:absolute;inset:0;
    border:none;
    background:rgba(15,23,42,.5);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    opacity:0;
    transition:opacity .28s ease;
    cursor:pointer;
  }
  .mobile-nav-sheet.open .mobile-nav-sheet__backdrop{opacity:1}
  .mobile-nav-sheet__panel{
    position:absolute;
    left:10px;right:10px;bottom:0;
    padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px));
    background:var(--sur);
    border-radius:24px 24px 0 0;
    border:1px solid var(--bdr);
    border-bottom:none;
    box-shadow:0 -12px 48px rgba(15,23,42,.18);
    transform:translateY(105%);
    transition:transform .34s cubic-bezier(.32,.72,.24,1);
  }
  .mobile-nav-sheet.open .mobile-nav-sheet__panel{transform:translateY(0)}
  .mobile-nav-sheet__handle{width:40px;height:4px;border-radius:999px;background:var(--bdr);margin:0 auto 14px;opacity:.85}
  .mobile-nav-sheet__title{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--txt);letter-spacing:-.01em}
  .mobile-nav-sheet__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .mobile-nav-sheet__item{
    display:flex;flex-direction:row;align-items:center;gap:12px;
    min-height:64px;padding:14px 16px;
    border:1px solid var(--bdr);border-radius:16px;
    background:var(--bg);color:var(--txt);
    cursor:pointer;font-family:'DM Sans',sans-serif;
    text-align:left;
    box-shadow:0 1px 3px rgba(15,23,42,.04);
    transition:border-color .18s,box-shadow .18s,background .18s,transform .15s;
  }
  .mobile-nav-sheet__item:active{transform:scale(.98)}
  .mobile-nav-sheet__item.active{
    border-color:var(--acc);
    background:var(--acc-l);
    box-shadow:0 4px 16px rgba(79,110,247,.14);
  }
  .mobile-nav-sheet__icon{
    flex-shrink:0;
    width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    border-radius:12px;
    background:var(--sur);
    font-size:1.25rem;line-height:1;
    box-shadow:inset 0 0 0 1px var(--bdr);
  }
  .mobile-nav-sheet__item.active .mobile-nav-sheet__icon{background:#fff;box-shadow:0 2px 8px rgba(79,110,247,.15)}
  .mobile-nav-sheet__label{font-size:13px;font-weight:600;line-height:1.25;color:var(--txt)}
  .mobile-nav-sheet__item.active .mobile-nav-sheet__label{color:var(--acc-d)}
  body.mobile-nav-sheet-open{overflow:hidden}

  #xp-toast{bottom:calc(84px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 24px);white-space:normal;text-align:center}
  .pwa-install-bar{bottom:calc(88px + env(safe-area-inset-bottom,0px))}

  .hdr{
    padding:max(12px,env(safe-area-inset-top,0px)) 0 14px;
    margin-bottom:8px;
    border-radius:0 0 26px 26px;
    box-shadow:0 10px 32px rgba(15,23,42,.18);
  }
  .hdr-inner{padding-inline:14px}
  .hdr-brand-row{margin-bottom:14px;gap:10px}
  .hdr-brand-mark{width:38px;height:38px;border-radius:12px;font-size:12px}
  .hdr-brand-name{font-size:16px}
  .hdr-brand-tagline{font-size:10px;color:rgba(255,255,255,.58)}
  .profile-btn .name{display:none}
  .profile-btn__chev{display:none}
  .profile-btn--compact{
    padding:0;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.32);
    background:rgba(255,255,255,.1);
    box-shadow:0 4px 12px rgba(0,0,0,.12);
  }
  .profile-btn--compact .avatar{width:36px;height:36px;font-size:13px}
  .profile-menu{left:auto;right:0;min-width:11rem}
  .app-breadcrumbs{
    font-size:11px;
    margin-bottom:8px;
    overflow-x:auto;
    flex-wrap:nowrap;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .app-breadcrumbs::-webkit-scrollbar{display:none}
  .hdr-title-block{
    padding:12px 14px 10px;
    border-radius:16px;
    background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.04) 100%);
    border:1px solid rgba(255,255,255,.14);
    margin-bottom:8px;
  }
  .hdr-page-title{font-size:18px}
  .hdr-badge{font-size:9px;padding:3px 8px}
  .hdr-level-chip{font-size:11px;margin-top:8px;max-width:100%}
  .hdr-sub-line{
    font-size:11px;
    margin-bottom:10px!important;
    padding:0 2px;
    color:rgba(255,255,255,.55)!important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .hdr-title-block .flex{margin-bottom:0!important}
  #app-level-line{font-size:12px!important}
  .hdr-stats-wrap{
    padding:10px;
    border-radius:16px;
    background:rgba(0,0,0,.14);
    border:1px solid rgba(255,255,255,.1);
    margin-bottom:10px;
  }
  #stat-grid,.hdr-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:0!important}
  .stat-pill--action{
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    text-align:left;
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.14);
  }
  .stat-pill--action:active{transform:scale(.98)}
  .stat-pill__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:34px;height:34px;
    border-radius:10px;
    background:rgba(255,255,255,.12);
    font-size:15px;line-height:1;
  }
  .stat-pill__body{flex:1;min-width:0}
  .stat-pill .text-lg{font-size:17px;line-height:1.1;font-weight:700}
  .stat-pill .text-xs{font-size:10px;margin-top:2px!important;opacity:.85}
  .hdr .flex.items-center.gap-2.mb-2{
    padding:0 2px;
    margin-bottom:0!important;
  }
  #s-level-lbl,#s-level-next{font-size:10px;color:rgba(255,255,255,.55)!important}
  .hdr .prog-track{height:6px;background:rgba(255,255,255,.18)}
  .fc-scene{height:min(48vh,300px);min-height:220px;max-width:100%}
  .fc-face{padding:52px 18px 18px}
  .fc-back{padding-top:44px}
  .fc-visual{width:88px;height:64px;margin-bottom:10px;border-radius:16px}
  .fc-visual-emoji{font-size:28px}
  .fc-front-text{font-size:17px}
  .fc-know-btn{font-size:11px;padding:10px 6px}
  .flash-actions{gap:6px}
  .fc-nav-btn{width:44px;min-height:44px;border-radius:12px}
  .flash-toolbar__controls{gap:10px}
  .flash-speech-panel{padding:10px}
  @media(min-width:380px){
    .flash-speech-panel{grid-template-columns:auto 1fr;align-items:end}
    .flash-control-group--voice{grid-column:2}
  }
  .flash-know-row{grid-template-columns:1fr 1fr}
  .quiz-opt{padding:11px 12px;font-size:13px}
  .fc-scene{height:min(50vh,320px);min-height:230px}
  .day-header{padding:10px 12px;gap:8px}
  .speak-mic-btn-wrap{margin-top:12px}
  #speak-mic-btn{width:68px;height:68px}
  .p-row{gap:10px}
  .p-row-toggle{padding:11px 10px 11px 8px}
  .phrase-en{font-size:14px}
  .phrase-ar{font-size:14px}
  .daily-routine__label{font-size:13px}
  .daily-routine__sub{font-size:11px}
  #speak-success{top:10px;left:12px;right:12px;transform:none;width:auto;max-width:none}
  #speak-success.show{transform:none}
  .success-card{min-width:0;width:100%;max-width:100%}
  #view-pron .grid.grid-cols-3{grid-template-columns:repeat(1,1fr)}
  .pron-example{flex-direction:column;align-items:stretch}
  .pron-example-actions{justify-content:flex-start}
  .pron-target{font-size:22px}
  .pron-actions-bar{flex-direction:column;align-items:stretch}
  .pron-actions-bar .pron-btn,.pron-actions-bar .pron-btn.main{width:100%;justify-content:center}
}
@media(max-width:400px){
  .stat-pill .text-lg{font-size:13px}
  #stat-grid,.grid.grid-cols-4{grid-template-columns:repeat(2,1fr)!important}
}
/* ── Large screens: wider + larger content ── */
@media(min-width:1280px){
  :root{--app-max:1320px}
  html{font-size:17px}
  .app-main,.app-shell{padding-inline:clamp(20px,3vw,40px)}
  .hdr h1,.hdr-page-title{font-size:1.75rem}
  .hdr-sub,.hdr-sub-line{font-size:.9375rem}
  .tab-btn{padding:10px 18px;font-size:.875rem}
  .quiz-opt{padding:15px 18px;font-size:.9375rem}
  .q-type-btn{padding:8px 16px;font-size:.8125rem}
  .day-header{padding:16px 18px}
  .day-card{border-radius:16px}
  .rel-chunk{border-radius:18px}
  .rel-pair{padding:14px}
  .fc-scene{max-width:520px;height:280px}
  .pron-target{font-size:2rem}
}
@media(min-width:1536px){
  :root{--app-max:1480px}
  html{font-size:18px}
  .fc-scene{max-width:560px;height:300px}
  .stat-pill{padding:10px 16px}
}
@media(min-width:1920px){
  :root{--app-max:min(1680px,92vw)}
  html{font-size:19px}
  .fc-scene{max-width:600px;height:320px}
}
/* ── Success notification (minimal) ── */
#speak-success{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:10000;pointer-events:none;opacity:0;transition:opacity .22s,transform .22s;width:min(360px,calc(100% - 24px));max-width:calc(100% - 24px)}
#speak-success.show{opacity:1;transform:translateX(-50%) translateY(0)}
.success-card{background:#fff;border:1px solid var(--bdr);border-radius:12px;padding:10px 14px;text-align:left;box-shadow:0 12px 30px rgba(0,0,0,.12);min-width:0;width:100%;max-width:100%}
.speak-meta{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px}
.save-hard-btn{padding:8px 12px;border-radius:10px;border:1px solid #c7d2fe;background:#eef2ff;color:#3730a3;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.save-hard-btn:hover{background:#e0e7ff}
.pron-card{background:#fff;border:1px solid var(--bdr);border-radius:16px;padding:18px}
.pron-card{position:relative;overflow:hidden}
.pron-card::before{content:'';position:absolute;left:0;top:0;width:min(180px,50%);height:min(180px,50%);border-radius:50%;background:radial-gradient(circle,rgba(79,110,247,.12),rgba(79,110,247,0) 68%);pointer-events:none}
.pron-card::after{content:'';position:absolute;right:0;bottom:0;width:min(200px,55%);height:min(200px,55%);border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.1),rgba(124,58,237,0) 68%);pointer-events:none}
.pron-card > *{position:relative;z-index:1}
.pron-ar-title{font-family:'Noto Sans Arabic',sans-serif;direction:rtl;text-align:right;line-height:1.9;font-size:15px;font-weight:600;color:#111827}
.pron-ar-note{font-family:'Noto Sans Arabic',sans-serif;direction:rtl;text-align:right;line-height:1.9;font-size:13px;color:#4b5563}
.pron-target{font-size:28px;font-weight:700;letter-spacing:.02em;color:#111827}
.pron-sub{font-size:12px;color:#6b7280}
.pron-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;border:1px solid var(--bdr);background:#fff;color:#4b5563}
.pron-pill.active{background:var(--acc);color:#fff;border-color:var(--acc)}
.pron-btn{padding:10px 14px;border-radius:10px;border:1px solid #c7d2fe;background:#eef2ff;color:#3730a3;font-size:13px;font-weight:600;cursor:pointer}
.pron-btn.main{background:linear-gradient(135deg,#4f6ef7,#7c3aed);color:#fff;border:none}
.pron-res{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:12px}
.pron-kpi{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px}
.pron-kpi-value{font-size:18px;font-weight:700;color:#111827;line-height:1}
.pron-kpi-label{font-size:11px;color:#6b7280;margin-top:3px}
.pron-progress{height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.pron-progress-fill{height:100%;background:linear-gradient(90deg,#4f6ef7,#7c3aed);border-radius:999px;transition:width .35s}
.pron-motivate{font-size:13px;font-weight:600;color:#4338ca;background:#eef2ff;border:1px solid #c7d2fe;border-radius:10px;padding:8px 10px}
.pron-example{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid #e5e7eb;background:#fff;border-radius:10px}
.pron-example.active{border-color:#93c5fd;background:#eff6ff}
.pron-example-main{display:flex;align-items:center;gap:10px;min-width:0}
.pron-example-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pron-mini-btn{padding:6px 9px;border-radius:8px;border:1px solid #c7d2fe;background:#eef2ff;color:#3730a3;font-size:12px;font-weight:600;cursor:pointer}
.pron-mini-btn.speak{background:linear-gradient(135deg,#4f6ef7,#7c3aed);color:#fff;border:none}
.pron-example-judge{font-size:11px;font-weight:700;padding:3px 7px;border-radius:999px}
.pron-example-judge.ok{background:#dcfce7;color:#166534}
.pron-example-judge.bad{background:#fee2e2;color:#991b1b}
.pron-syl-hint{font-size:11px;color:#6b7280;margin-top:6px}
.pron-syl-chip{display:inline-block;padding:3px 8px;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:11px;font-weight:600;margin-inline-end:6px}
.pron-judge{display:inline-flex;align-items:center;justify-content:center;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:700}
.pron-judge.ok{background:#dcfce7;color:#166534}
.pron-judge.bad{background:#fee2e2;color:#991b1b}
.pron-actions-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.pron-status-box{padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#f9fafb}
.pron-status-box.ok{background:#f0fdf4;border-color:#86efac}
.pron-status-box.bad{background:#fef2f2;border-color:#fecaca}
.pron-status-box.live{background:#eff6ff;border-color:#bfdbfe}
/* XP toast */
#xp-toast{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(80px);background:#1a1a2e;color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;z-index:9999;pointer-events:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s;opacity:0;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.25);max-width:calc(100% - 24px)}
#xp-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
/* floating +xp */
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-60px) scale(1.3)}}
.xp-float{position:fixed;font-size:15px;font-weight:700;color:#4f6ef7;pointer-events:none;animation:floatUp .9s ease-out forwards;z-index:9999}
/* level badge */
.level-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600}
/* streak flame */
@keyframes flame{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
/* word relations chunks */
.rel-chunk{background:#fff;border:1px solid var(--bdr);border-radius:16px;overflow:hidden;margin-bottom:12px}
.rel-chunk-hdr{padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:10px;user-select:none}
.rel-chunk-body{display:none;padding:0 14px 14px}
.rel-chunk-body.open{display:block}
.rel-pair{border:1px solid #f1f5f9;border-radius:12px;padding:12px;margin-bottom:10px;background:#fafafa}
.rel-pair:last-child{margin-bottom:0}
.rel-pair.done{background:#f0fdf4;border-color:#bbf7d0}
.rel-words{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.rel-word-pill{padding:6px 10px;border-radius:10px;font-size:13px;font-weight:600;background:#fff;border:1px solid #e5e7eb}
.rel-word-pill.main{background:var(--acc-l);border-color:#c7d0fc;color:var(--acc-d)}
.rel-vs{font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase}
.rel-ant .rel-vs{color:#dc2626}
.rel-syn .rel-vs{color:#2563eb}
.rel-sentence{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px}
/* placement test bottom controls */
#path-screen-test{padding-bottom:7rem}
.pt-controls-bar{position:sticky;bottom:0;left:0;right:0;z-index:40;margin:1rem -0.25rem 0;padding:12px 0 max(12px,env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,transparent)}
.pt-controls-inner{max-width:min(var(--app-max),100%);margin-inline:auto;padding:12px 14px;background:#fff;border:1px solid var(--bdr);border-radius:16px;box-shadow:0 -4px 24px rgba(0,0,0,.06);display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pt-controls-timer{flex-shrink:0;min-width:64px}
.pt-controls-actions{display:flex;flex:1;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.pt-controls-actions-full{flex:1;justify-content:center;width:100%}
.pt-nav-actions{flex:1;justify-content:space-between;width:100%;gap:8px}
.pt-nav-actions .pt-ctrl-btn{flex:1;min-width:0;justify-content:center}
.pt-nav-actions .pt-ctrl-btn-finish{flex:0.85;background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.pt-nav-actions .pt-ctrl-btn-finish:hover{background:#fee2e2;border-color:#f87171;color:#991b1b}
.pt-question-nav-outer{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.pt-question-nav-outer.hidden{display:none}
.pt-question-nav{display:inline-flex;flex-wrap:nowrap;gap:6px;padding:12px 14px;background:#fff;border:1px solid var(--bdr);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.04);min-width:min-content;margin-inline:auto;scroll-snap-type:x proximity}
.pt-q-pill{flex-shrink:0;scroll-snap-align:center}
@media(max-width:768px){
  .pt-question-nav-outer{display:flex;justify-content:center;padding-inline:clamp(8px,3vw,12px)}
}
.pt-q-pill{min-width:2.25rem;height:2.25rem;padding:0 6px;border-radius:10px;border:2px solid #e5e7eb;background:#f9fafb;color:#6b7280;font-size:12px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;line-height:1}
.pt-q-pill:hover:not(:disabled){border-color:#c7d0fc;background:var(--acc-l);color:var(--acc-d)}
.pt-q-pill.unanswered{background:#fef2f2;border-color:#f87171;color:#dc2626}
.pt-q-pill.unanswered:hover{background:#fee2e2;border-color:#ef4444;color:#b91c1c}
.pt-q-pill.answered{background:#eef0fe;border-color:#93a3f8;color:#3451d1}
.pt-q-pill.answered:hover{background:#e0e4ff;border-color:#4f6ef7;color:#2d3a8c}
.pt-q-pill.correct{background:#f0fdf4;border-color:#4ade80;color:#15803d}
.pt-q-pill.wrong{background:#fff7ed;border-color:#fdba74;color:#c2410c}
.pt-q-pill.current{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--acc);z-index:1}
.pt-q-pill:disabled{cursor:default;opacity:.85}
@media(max-width:520px){
  .pt-nav-actions{flex-wrap:wrap}
  .pt-nav-actions .pt-ctrl-btn{flex:1 1 calc(50% - 4px)}
  .pt-q-pill{min-width:2rem;height:2rem;font-size:11px}
  .pt-question-nav{padding:10px 12px;gap:5px}
}
.pt-review-item{border:1px solid #f1f5f9;border-radius:12px;padding:12px;background:#fafafa}
.pt-review-item.ok{border-color:#bbf7d0;background:#f0fdf4}
.pt-review-item.bad{border-color:#fecaca;background:#fef2f2}
.pt-review-item .quiz-opt{margin-bottom:6px;cursor:default}
.pt-review-item .quiz-opt:last-child{margin-bottom:0}
#pt-start-btn.hidden{display:none}
.pt-timer-box{min-width:5.5rem}
.pt-timer-label{display:block;font-size:11px;font-weight:600;color:#6b7280;letter-spacing:.02em;margin-bottom:2px}
.pt-timer-display{display:block;font-size:2rem;font-weight:700;letter-spacing:.08em;color:#1e40af;line-height:1.1;font-variant-numeric:tabular-nums}
.pt-timer-display.pt-timer-warn{color:#b45309}
.pt-timer-display.pt-timer-critical{color:#dc2626}
@keyframes pt-timer-blink{50%{opacity:.45}}
.pt-timer-display.pt-timer-critical{animation:pt-timer-blink 1s ease-in-out infinite}
.pt-ctrl-btn{padding:10px 14px;border-radius:12px;border:1px solid var(--bdr);background:#fff;font-size:13px;font-weight:600;color:#374151;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s;font-family:'DM Sans',sans-serif}
.pt-ctrl-btn:hover{border-color:#c7d0fc;background:var(--acc-l);color:var(--acc-d)}
.pt-ctrl-btn-primary{background:var(--acc);color:#fff;border-color:var(--acc)}
.pt-ctrl-btn-primary:hover{background:var(--acc-d);color:#fff}
.pt-ctrl-btn-highlight{box-shadow:0 0 0 3px rgba(79,110,247,.35)}
#pt-audio-btn.playing{background:var(--acc);color:#fff}
.pwa-install-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:10000;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:#1a1a2e;color:#fff;box-shadow:0 16px 40px rgba(15,23,42,.35);border:1px solid rgba(139,115,99,.45);max-width:var(--app-max);margin:0 auto}
.pwa-install-bar.hidden{display:none}
.pwa-install-logo{border-radius:10px;flex-shrink:0;background:#000}
.pwa-install-text{flex:1;margin:0;font-size:13px;line-height:1.35;font-weight:500}
.pwa-install-btn{flex-shrink:0;padding:8px 14px;border:none;border-radius:10px;background:#8B7363;color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif}
.pwa-install-btn:hover{filter:brightness(1.08)}
.pwa-install-dismiss{flex-shrink:0;width:32px;height:32px;border:none;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;font-size:20px;line-height:1;cursor:pointer}
html[data-theme="dark"] .pwa-install-bar{background:#0f172a;border-color:#334155}

/* --- assets\css\enhancements.css --- */
/* ═══════════════════════════════════════════════════════════════════
   SPEAKPATH ENHANCEMENTS — UX/UI Upgrades
   All additions are non-breaking and additive to app.css
   ═══════════════════════════════════════════════════════════════════ */

/* ── SKELETON LOADING ────────────────────────────────────────────── */
@keyframes skeletonPulse {
  0%,100%{opacity:.45} 50%{opacity:.9}
}
.skel {
  background: linear-gradient(90deg,var(--bdr) 25%,rgba(229,231,235,.7) 50%,var(--bdr) 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.4s ease-in-out infinite;
  border-radius: 8px;
}
html[data-theme=dark] .skel {
  background: linear-gradient(90deg,rgba(51,65,85,.6) 25%,rgba(71,85,105,.7) 50%,rgba(51,65,85,.6) 75%);
}
.skel-line  { height:14px; margin-bottom:10px; }
.skel-line.short { width:55% }
.skel-line.med   { width:80% }
.skel-line.full  { width:100% }
.skel-card  { height:80px; border-radius:16px; margin-bottom:12px; }
.skel-circle{ border-radius:50% !important; width:44px; height:44px; flex-shrink:0; }
.skel-wrap  { padding:16px; }

/* ── ONBOARDING TOUR ─────────────────────────────────────────────── */
#tour-overlay {
  position: fixed; inset: 0; z-index: 8000;
  pointer-events: none;
  transition: opacity .3s ease;
}
#tour-overlay.hidden { opacity:0; pointer-events:none; }

.tour-spotlight {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.62);
  transition: all .35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 8001;
}

.tour-bubble {
  position: fixed;
  z-index: 8002;
  background: #fff;
  border-radius: 18px;
  padding: 18px 20px 16px;
  max-width: min(300px, calc(100vw - 32px));
  box-shadow: 0 20px 60px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.08);
  transition: all .35s cubic-bezier(.4,0,.2,1);
  pointer-events: auto;
}
html[data-theme=dark] .tour-bubble { background:#1e293b; box-shadow:0 20px 60px rgba(0,0,0,.5); }

.tour-bubble__step {
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--acc); margin-bottom:6px;
}
.tour-bubble__title {
  font-size:16px; font-weight:700; color:#111827; margin-bottom:6px; line-height:1.3;
}
html[data-theme=dark] .tour-bubble__title { color:#f1f5f9; }
.tour-bubble__body {
  font-size:13px; color:#4b5563; line-height:1.55; margin-bottom:14px;
}
html[data-theme=dark] .tour-bubble__body { color:#94a3b8; }
.tour-bubble__actions { display:flex; gap:8px; align-items:center; justify-content:flex-end; }

.tour-btn-skip {
  background:none; border:none; font-size:13px; color:#9ca3af;
  cursor:pointer; font-family:'DM Sans',sans-serif; padding:6px 10px;
  border-radius:8px; transition:color .15s;
}
.tour-btn-skip:hover { color:#6b7280; }

.tour-btn-next {
  background:linear-gradient(135deg,#4f6ef7,#7c3aed);
  color:#fff; border:none; border-radius:10px;
  padding:8px 18px; font-size:13px; font-weight:600;
  font-family:'DM Sans',sans-serif; cursor:pointer;
  transition:opacity .15s, transform .15s;
  box-shadow:0 4px 12px rgba(79,110,247,.35);
}
.tour-btn-next:hover { opacity:.9; }
.tour-btn-next:active { transform:scale(.97); }

.tour-dots { display:flex; gap:5px; flex:1; }
.tour-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(79,110,247,.25);
  transition:all .2s ease;
}
.tour-dot.active { background:var(--acc); width:16px; border-radius:3px; }

/* ── ACHIEVEMENT BADGES ──────────────────────────────────────────── */
#achievement-popup {
  position: fixed;
  bottom: max(calc(env(safe-area-inset-bottom,0px) + 80px), 90px);
  left: 50%;
  transform: translateX(-50%) translateY(30px) scale(.9);
  z-index: 7500;
  background: #fff;
  border-radius: 20px;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
  min-width: 280px; max-width: calc(100vw - 32px);
  opacity: 0; pointer-events:none;
  transition: all .4s cubic-bezier(.34,1.56,.64,1);
}
html[data-theme=dark] #achievement-popup {
  background: #1e293b;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
#achievement-popup.show {
  opacity: 1; pointer-events:auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.ach-badge-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items:center; justify-content:center;
  font-size: 26px; flex-shrink:0;
  background: linear-gradient(135deg,rgba(79,110,247,.15),rgba(124,58,237,.15));
  border: 1.5px solid rgba(79,110,247,.25);
}
.ach-badge-body { flex:1; min-width:0; }
.ach-badge-kicker {
  font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--acc); margin-bottom:3px;
}
.ach-badge-title {
  font-size:15px; font-weight:700; color:#111827; line-height:1.2;
}
html[data-theme=dark] .ach-badge-title { color:#f1f5f9; }
.ach-badge-desc {
  font-size:12px; color:#6b7280; margin-top:2px;
}
html[data-theme=dark] .ach-badge-desc { color:#94a3b8; }
/* sparkle burst */
.ach-sparkle {
  position:absolute; pointer-events:none;
  font-size:18px; opacity:0;
  animation: sparkleOut .8s ease forwards;
}
@keyframes sparkleOut {
  0%  { transform:translate(0,0) scale(1); opacity:1; }
  100%{ transform:translate(var(--tx),var(--ty)) scale(0); opacity:0; }
}

/* ── QUIZ MICRO-ANIMATIONS ───────────────────────────────────────── */
/* Larger tap targets on mobile */
@media(max-width:640px){
  .quiz-opt {
    padding: 16px 18px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    min-height: 58px;
  }
}

/* Correct answer pop */
@keyframes answerCorrect {
  0%  { transform:scale(1); }
  35% { transform:scale(1.04); }
  70% { transform:scale(.98); }
  100%{ transform:scale(1); }
}
@keyframes answerWrong {
  0%,100%{ transform:translateX(0); }
  20%    { transform:translateX(-7px); }
  40%    { transform:translateX(7px); }
  60%    { transform:translateX(-4px); }
  80%    { transform:translateX(4px); }
}
.quiz-opt.correct {
  animation: answerCorrect .4s cubic-bezier(.34,1.56,.64,1) forwards;
  background:#dcfce7 !important; border-color:#16a34a !important; color:#166534 !important;
}
.quiz-opt.wrong {
  animation: answerWrong .4s ease forwards;
  background:#fef2f2 !important; border-color:#ef4444 !important; color:#991b1b !important;
}

/* Feedback bar entrance */
@keyframes feedbackSlide {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
.quiz-feedback:not(.hidden) {
  animation: feedbackSlide .3s ease;
}

/* Confetti on perfect score */
.confetti-piece {
  position:fixed; width:8px; height:8px; border-radius:2px;
  pointer-events:none; z-index:9000;
  animation: confettiFall var(--dur) ease forwards;
}
@keyframes confettiFall {
  0%  { transform:translateY(-20px) rotate(0deg); opacity:1; }
  100%{ transform:translateY(100vh) rotate(720deg); opacity:0; }
}

/* ── FLASHCARD SWIPE ─────────────────────────────────────────────── */
.fc-scene {
  touch-action: pan-y !important;
  user-select: none;
}
.fc-scene.swipe-left  { transition:transform .25s ease, opacity .25s ease !important; transform:translateX(-80px) rotate(-6deg) !important; opacity:.5; }
.fc-scene.swipe-right { transition:transform .25s ease, opacity .25s ease !important; transform:translateX(80px) rotate(6deg) !important; opacity:.5; }

/* Swipe hint indicators */
.fc-swipe-hint {
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:28px; opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:10;
}
.fc-swipe-hint.left  { right:16px; }
.fc-swipe-hint.right { left:16px; }
.fc-swipe-hint.show  { opacity:.7; }

/* Swipe label bar */
.fc-swipe-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:0 4px; margin-bottom:10px;
}
.fc-swipe-bar__label {
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  display:flex; align-items:center; gap:5px;
}
.fc-swipe-bar__label.left  { color:#ef4444; }
.fc-swipe-bar__label.right { color:#16a34a; }
.fc-swipe-bar__label svg   { flex-shrink:0; }

/* ── DARK MODE TOGGLE BUTTON (header) ───────────────────────────── */
#hdr-theme-btn {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  cursor:pointer; color:#fff; font-size:16px;
  transition:background .15s, transform .2s;
  flex-shrink:0;
}
#hdr-theme-btn:hover { background:rgba(255,255,255,.2); }
#hdr-theme-btn:active { transform:scale(.9) rotate(20deg); }

/* ── EMPTY STATES ────────────────────────────────────────────────── */
.empty-state {
  text-align:center;
  padding: 48px 24px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.empty-state__icon {
  width:72px; height:72px; border-radius:20px;
  background:rgba(79,110,247,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:32px;
  margin-bottom:4px;
}
.empty-state__title {
  font-size:17px; font-weight:700; color:#111827;
}
html[data-theme=dark] .empty-state__title { color:#f1f5f9; }
.empty-state__sub {
  font-size:13px; color:#6b7280; line-height:1.55; max-width:240px;
}
.empty-state__action {
  margin-top:8px;
  background:var(--acc); color:#fff; border:none;
  border-radius:12px; padding:10px 22px;
  font-size:14px; font-weight:600; cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:opacity .15s, transform .15s;
}
.empty-state__action:hover { opacity:.9; }
.empty-state__action:active { transform:scale(.97); }

/* ── ROAD MAP ────────────────────────────────────────────────────── */
#view-roadmap { }
.roadmap-shell { padding-bottom:24px; }
.roadmap-header {
  background:linear-gradient(130deg,#111827 0%,#1f2a58 50%,#3b4fd1 100%);
  border-radius:20px; padding:22px 20px; margin-bottom:20px; position:relative; overflow:hidden;
}
.roadmap-header::before {
  content:''; position:absolute; right:-20px; bottom:-20px;
  width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);
  pointer-events:none;
}
.roadmap-header__title {
  font-size:20px; font-weight:800; color:#fff; letter-spacing:-.03em; margin-bottom:4px;
}
.roadmap-header__sub {
  font-size:13px; color:rgba(255,255,255,.6);
}
.roadmap-header__stats {
  display:flex; gap:12px; margin-top:14px;
}
.roadmap-header__stat {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px; padding:8px 14px; text-align:center;
}
.roadmap-header__stat-val {
  font-size:18px; font-weight:800; color:#fff; line-height:1;
}
.roadmap-header__stat-lbl {
  font-size:10px; color:rgba(255,255,255,.5);
  font-weight:500; letter-spacing:.04em; text-transform:uppercase; margin-top:2px;
}

/* Level sections */
.roadmap-level-section { margin-bottom:8px; }
.roadmap-level-header {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  background:var(--sur);
  border-radius:14px; margin-bottom:10px;
  border:1px solid var(--bdr);
  cursor:pointer;
  transition:background .15s;
}
.roadmap-level-header:hover { background:var(--acc-l); }
.roadmap-level-badge {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.roadmap-level-info { flex:1; min-width:0; }
.roadmap-level-name { font-size:14px; font-weight:700; color:var(--txt); }
.roadmap-level-progress { font-size:12px; color:var(--mut); }
.roadmap-level-pct {
  font-size:15px; font-weight:800; color:var(--txt);
  flex-shrink:0;
}

/* The vertical spine */
.roadmap-spine {
  position:relative;
  padding-left:36px;
}
.roadmap-spine::before {
  content:'';
  position:absolute; left:15px; top:0; bottom:0;
  width:3px;
  background:linear-gradient(to bottom, var(--bdr) 0%, var(--bdr) 100%);
  border-radius:2px;
}

/* Each node */
.roadmap-node {
  position:relative;
  margin-bottom:12px;
  transition: opacity .2s ease;
}
.roadmap-node__dot {
  position:absolute;
  left:-28px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  border:3px solid var(--bdr);
  background:var(--sur);
  transition:all .25s ease;
  z-index:1;
  display:flex; align-items:center; justify-content:center;
}
.roadmap-node.is-done .roadmap-node__dot {
  background:#16a34a; border-color:#16a34a;
}
.roadmap-node.is-current .roadmap-node__dot {
  background:var(--acc); border-color:var(--acc);
  box-shadow:0 0 0 4px rgba(79,110,247,.2);
  animation:nodePulse 2s ease-in-out infinite;
}
.roadmap-node.is-locked .roadmap-node__dot {
  background:var(--bdr); border-color:var(--bdr);
}
@keyframes nodePulse {
  0%,100%{ box-shadow:0 0 0 3px rgba(79,110,247,.2); }
  50%    { box-shadow:0 0 0 7px rgba(79,110,247,.08); }
}

.roadmap-node__card {
  background:var(--sur);
  border:1.5px solid var(--bdr);
  border-radius:14px;
  padding:14px 16px;
  cursor:pointer;
  transition:all .2s ease;
  position:relative; overflow:hidden;
}
.roadmap-node.is-done .roadmap-node__card  { border-color:rgba(22,163,74,.3); background:rgba(22,163,74,.04); }
.roadmap-node.is-current .roadmap-node__card {
  border-color:rgba(79,110,247,.45);
  background:rgba(79,110,247,.04);
  box-shadow:0 4px 16px rgba(79,110,247,.12);
}
.roadmap-node.is-locked .roadmap-node__card { opacity:.55; cursor:not-allowed; }
.roadmap-node__card:hover:not(.locked) { transform:translateX(2px); }

.roadmap-node__top {
  display:flex; align-items:flex-start; gap:12px;
}
.roadmap-node__icon {
  width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.roadmap-node__meta { flex:1; min-width:0; }
.roadmap-node__label {
  font-size:14px; font-weight:700; color:var(--txt);
  line-height:1.25; margin-bottom:3px;
}
.roadmap-node__sub {
  font-size:12px; color:var(--mut); line-height:1.4;
}
.roadmap-node__status {
  flex-shrink:0;
  font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:99px;
  letter-spacing:.02em;
}
.roadmap-node.is-done    .roadmap-node__status { background:#dcfce7; color:#166534; }
.roadmap-node.is-current .roadmap-node__status { background:#eef0fe; color:#3451d1; }
.roadmap-node.is-locked  .roadmap-node__status { background:var(--bdr); color:var(--mut); }

.roadmap-node__progress {
  margin-top:10px;
}
.roadmap-node__prog-track {
  height:5px; background:var(--bdr); border-radius:99px; overflow:hidden;
}
.roadmap-node__prog-fill {
  height:100%; border-radius:99px;
  transition:width .6s ease;
}
.roadmap-node__prog-lbl {
  display:flex; justify-content:space-between;
  font-size:11px; color:var(--mut); margin-top:4px;
}

/* Current node CTA */
.roadmap-node__cta {
  margin-top:12px;
  background:linear-gradient(135deg,#4f6ef7,#7c3aed);
  color:#fff; border:none;
  border-radius:10px; padding:10px 18px;
  font-size:13px; font-weight:700;
  font-family:'DM Sans',sans-serif;
  cursor:pointer; width:100%;
  transition:opacity .15s, transform .15s;
}
.roadmap-node__cta:hover { opacity:.9; }
.roadmap-node__cta:active { transform:scale(.98); }

/* ── PATH VISUAL PROGRESS ────────────────────────────────────────── */
.path-visual-prog {
  display:flex; gap:3px; margin:8px 0;
}
.path-visual-prog__seg {
  flex:1; height:4px; border-radius:99px;
  background:rgba(79,110,247,.15);
  transition:background .4s ease;
}
.path-visual-prog__seg.done { background:var(--acc); }
.path-visual-prog__seg.current { background:rgba(79,110,247,.5); }

/* ── HAPTIC FEEDBACK VISUAL ──────────────────────────────────────── */
@keyframes wrongShake {
  0%,100%{ transform:translateX(0); }
  18%    { transform:translateX(-8px); }
  36%    { transform:translateX(8px); }
  54%    { transform:translateX(-5px); }
  72%    { transform:translateX(5px); }
}
@keyframes correctBounce {
  0%  { transform:scale(1); }
  35% { transform:scale(1.06); }
  65% { transform:scale(.97); }
  100%{ transform:scale(1); }
}
.anim-shake  { animation:wrongShake .4s ease !important; }
.anim-bounce { animation:correctBounce .35s cubic-bezier(.34,1.56,.64,1) !important; }

/* ── DAILY — clearer start point ────────────────────────────────── */
.daily-start-banner {
  background:linear-gradient(135deg,#4f6ef7,#7c3aed);
  border-radius:16px; padding:16px 18px;
  display:flex; align-items:center; gap:14px;
  margin-bottom:16px; color:#fff; cursor:pointer;
  transition:opacity .15s, transform .15s;
}
.daily-start-banner:hover { opacity:.92; transform:translateY(-1px); }
.daily-start-banner:active { transform:scale(.98); }
.daily-start-banner__icon { font-size:28px; flex-shrink:0; }
.daily-start-banner__body { flex:1; min-width:0; }
.daily-start-banner__title { font-size:16px; font-weight:700; line-height:1.2; }
.daily-start-banner__sub   { font-size:12px; color:rgba(255,255,255,.7); margin-top:2px; }
.daily-start-banner__arrow { font-size:20px; flex-shrink:0; }

/* ── ROAD MAP TAB ─────────────────────────────────────────────────── */
#tab-roadmap { }

/* ── MORE SHEET — highlighted new items ─────────────────────────── */
.mobile-nav-sheet__item--highlight {
  position: relative;
  border: 1.5px solid rgba(79,110,247,.35) !important;
  background: rgba(79,110,247,.07) !important;
}
.mobile-nav-sheet__item--highlight .mobile-nav-sheet__icon {
  filter: drop-shadow(0 0 6px rgba(79,110,247,.4));
}
.mobile-nav-sheet__item--highlight .mobile-nav-sheet__label {
  color: #4f6ef7 !important;
  font-weight: 700 !important;
}
.mobile-nav-sheet__item--highlight::after {
  content: 'NEW';
  position: absolute; top: 5px; right: 6px;
  font-size: 8px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: #4f6ef7;
  padding: 1px 5px; border-radius: 99px;
}

/* ════════════════════════════════════════════════════════════════
   FLASHCARD REDESIGN — matches the screenshot style
   ════════════════════════════════════════════════════════════════ */

/* Override scene size — taller card */
.fc-scene {
  height: min(58vh, 380px) !important;
  min-height: 280px !important;
  max-width: 100% !important;
}

/* Front card — deeper dark gradient */
.fc-front {
  background: linear-gradient(160deg, #0f172a 0%, #1e2a5e 45%, #312e81 100%) !important;
  box-shadow: 0 24px 56px rgba(15,23,42,.45), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

/* Bigger emoji visual */
.fc-visual {
  width: 88px !important; height: 88px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  margin-bottom: 16px !important;
}
.fc-visual-emoji { font-size: 38px !important; }

/* Bigger front text */
.fc-front-text {
  font-size: clamp(20px, 5.5vw, 26px) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}

/* Hint pulse */
.fc-hint {
  font-size: 12px !important; opacity: .7 !important;
  animation: hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse { 0%,100%{opacity:.5} 50%{opacity:.9} }

/* Back card */
.fc-back {
  background: #fff !important;
  border: none !important;
  box-shadow: 0 24px 56px rgba(79,110,247,.15) !important;
  justify-content: center !important;
  gap: 0 !important;
}
html[data-theme=dark] .fc-back {
  background: #1e293b !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.4) !important;
}
.fc-back-main {
  font-size: clamp(18px, 5vw, 24px) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  text-align: center !important;
}
html[data-theme=dark] .fc-back-main { color: #f1f5f9 !important; }
.fc-back-ar {
  font-size: 17px !important;
  color: #475569 !important;
  margin-top: 10px !important;
  text-align: center !important;
}

/* Know buttons — big pill style like screenshot */
.flash-know-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.fc-know-btn {
  min-height: 56px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}
.fc-know-btn.no {
  background: linear-gradient(160deg, #fef2f2, #fee2e2) !important;
  color: #dc2626 !important;
  border: 1.5px solid rgba(220,38,38,.2) !important;
  box-shadow: 0 4px 16px rgba(220,38,38,.12) !important;
}
.fc-know-btn.yes {
  background: linear-gradient(160deg, #ecfdf5, #bbf7d0) !important;
  color: #15803d !important;
  border: 1.5px solid rgba(22,163,74,.2) !important;
  box-shadow: 0 4px 16px rgba(22,163,74,.12) !important;
}
.fc-know-btn.no:active  { transform: scale(.96) !important; }
.fc-know-btn.yes:active { transform: scale(.96) !important; }

/* Nav buttons */
.fc-nav-btn {
  width: 52px !important; min-height: 56px !important;
  border-radius: 16px !important;
  background: var(--sur) !important;
  border: 1.5px solid var(--bdr) !important;
}

/* Swipe hint labels (from enhancements.js) */
.fc-swipe-bar {
  margin-bottom: 12px !important;
}
.fc-swipe-bar__label.left  { color: #dc2626 !important; font-weight: 700; font-size: 12px; }
.fc-swipe-bar__label.right { color: #16a34a !important; font-weight: 700; font-size: 12px; }

/* Counter badge */
.flash-toolbar__summary-meta {
  background: rgba(79,110,247,.1) !important;
  color: var(--acc) !important;
  border-radius: 99px !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
}


/* --- assets\css\tour.css --- */
/* ═══════════════════════════════════════════════════════════════════
   SPEAKPATH — PROFESSIONAL TOUR CSS
   ═══════════════════════════════════════════════════════════════════ */

#sp-tour-root {
  position: fixed;
  inset: 0;
  z-index: 9500;
  pointer-events: none;
}

/* Curtains */
.sp-tour-curtain-dim {
  position: fixed;
  inset: 0;
  pointer-events: auto;
  background: transparent;
}
.sp-tour-curtain-full {
  position: fixed;
  inset: 0;
  pointer-events: auto;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Spotlight */
#sp-tour-spotlight {
  position: fixed;
  z-index: 9501;
  pointer-events: none;
  border-radius: 14px;
  transition: top .35s cubic-bezier(.4,0,.2,1),
              left .35s cubic-bezier(.4,0,.2,1),
              width .35s cubic-bezier(.4,0,.2,1),
              height .35s cubic-bezier(.4,0,.2,1);
}

/* Bubble shared */
#sp-tour-bubble {
  position: fixed;
  z-index: 9502;
  pointer-events: auto;
  transition: left .35s cubic-bezier(.4,0,.2,1),
              top  .35s cubic-bezier(.4,0,.2,1);
}

/* Centered card (welcome / finish) */
.sp-tour-bubble-center {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  width: min(360px, calc(100vw - 32px)) !important;
}

/* Positioned tooltip */
.sp-tour-bubble-positioned {
  /* left/top set via JS */
}

/* Inner card */
#sp-tour-bubble-inner {
  background: #fff;
  border-radius: 22px;
  padding: 24px 22px 20px;
  box-shadow:
    0 32px 80px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
  position: relative;
  overflow: hidden;
}
html[data-theme=dark] #sp-tour-bubble-inner {
  background: #1e293b;
  box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
}
/* Gradient top stripe */
#sp-tour-bubble-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,#4f6ef7,#7c3aed);
  border-radius: 22px 22px 0 0;
}

/* Emoji */
#sp-tour-emoji {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 12px;
  animation: tourEmojiPop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes tourEmojiPop {
  from { transform: scale(.3) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Kicker */
#sp-tour-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4f6ef7;
  margin-bottom: 5px;
}

/* Title */
#sp-tour-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin-bottom: 8px;
}
html[data-theme=dark] #sp-tour-title { color: #f1f5f9; }

/* Body */
#sp-tour-body {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 10px;
}
html[data-theme=dark] #sp-tour-body { color: #94a3b8; }

/* Tip */
.sp-tour-tip {
  font-size: 12px;
  color: #7c3aed;
  background: rgba(124,58,237,.08);
  border-radius: 8px;
  padding: 7px 11px;
  margin-bottom: 10px;
  font-weight: 500;
}
.sp-tour-tip.hidden { display: none; }

/* Footer */
#sp-tour-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

/* Dots */
#sp-tour-dots {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.sp-tour-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e2e8f0;
  transition: all .25s ease;
  display: inline-block;
}
.sp-tour-dot.active {
  background: #4f6ef7;
  width: 18px;
  border-radius: 3px;
}
.sp-tour-dot.done {
  background: rgba(79,110,247,.4);
}

/* Actions row */
#sp-tour-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Skip button */
#sp-tour-skip {
  background: none;
  border: none;
  font-size: 13px;
  color: #94a3b8;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  padding: 8px 10px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: color .15s;
}
#sp-tour-skip:hover { color: #64748b; }
#sp-tour-skip.hidden { display: none; }

/* Secondary CTA */
#sp-tour-secondary {
  flex: 1;
  background: rgba(79,110,247,.1);
  border: 1.5px solid rgba(79,110,247,.25);
  color: #4f6ef7;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all .15s;
}
#sp-tour-secondary:hover { background: rgba(79,110,247,.16); }
#sp-tour-secondary.hidden { display: none; }

/* Primary CTA */
#sp-tour-cta {
  flex: 1;
  background: linear-gradient(135deg, #4f6ef7, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(79,110,247,.35);
  transition: opacity .15s, transform .15s;
  letter-spacing: -.01em;
}
#sp-tour-cta:hover  { opacity: .92; }
#sp-tour-cta:active { transform: scale(.97); }

/* Entrance animation */
@keyframes tourBubbleEnter {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sp-tour-enter {
  animation: tourBubbleEnter .3s cubic-bezier(.4,0,.2,1) forwards;
}
.sp-tour-bubble-center.sp-tour-enter {
  animation: tourBubbleEnter .4s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Full overlay for center bubbles — pointer events on root */
#sp-tour-root:has(.sp-tour-curtain-full) {
  pointer-events: auto;
}


/* --- assets\css\stories.css --- */
/* ═══════════════════════════════════════════════════════════════════
   SPEAKPATH STORIES v3 CSS
   ═══════════════════════════════════════════════════════════════════ */

/* ── LIST ────────────────────────────────────────────────────────── */
.sv-list { padding-bottom: 32px; }
.sv-hdr {
  background: linear-gradient(135deg,#0f172a 0%,#1e3a8a 55%,#4338ca 100%);
  border-radius: 20px; padding: 20px 18px 16px; margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.sv-hdr::after { content:'📖'; position:absolute; right:16px; top:12px; font-size:50px; opacity:.1; pointer-events:none; }
.sv-hdr__title { font-size:22px; font-weight:800; color:#fff; letter-spacing:-.03em; margin-bottom:4px; }
.sv-hdr__sub   { font-size:13px; color:rgba(255,255,255,.65); margin-bottom:10px; }
.sv-hdr__pills { display:flex; flex-wrap:wrap; gap:6px; }
.sv-hdr__pills span {
  font-size:11px; color:rgba(255,255,255,.6); font-weight:500;
  background:rgba(255,255,255,.1); border-radius:8px; padding:4px 9px;
}
.sv-lvl-row { display:flex; gap:8px; margin-bottom:12px; }
.sv-lvl-btn {
  flex:1; padding:9px 6px; border:1.5px solid var(--bdr); border-radius:12px;
  background:var(--sur); color:var(--txt); font-family:'DM Sans',sans-serif;
  font-size:13px; font-weight:600; cursor:pointer; transition:all .18s;
}
.sv-lvl-btn.active[data-lv=A1]{background:rgba(22,163,74,.1);border-color:#16a34a;color:#16a34a}
.sv-lvl-btn.active[data-lv=A2]{background:rgba(37,99,235,.1);border-color:#2563eb;color:#2563eb}
.sv-lvl-btn.active[data-lv=B1]{background:rgba(124,58,237,.1);border-color:#7c3aed;color:#7c3aed}

/* Story card (list) */
.sv-card {
  display:flex; align-items:center; gap:14px;
  background:var(--sur); border:1.5px solid var(--bdr);
  border-radius:16px; padding:14px 16px; margin-bottom:10px;
  cursor:pointer; transition:all .18s;
}
.sv-card:hover  { transform:translateX(2px); box-shadow:0 6px 20px rgba(0,0,0,.08); }
.sv-card:active { transform:scale(.98); }
.sv-card.is-done { border-color:rgba(22,163,74,.3); }
.sv-card__emoji { font-size:32px; flex-shrink:0; }
.sv-card__info  { flex:1; min-width:0; }
.sv-card__tags  { display:flex; gap:4px; margin-bottom:4px; }
.sv-card__tags span { font-size:10px; color:var(--mut); background:var(--bdr); border-radius:99px; padding:2px 6px; }
.sv-card__title { font-size:14px; font-weight:700; color:var(--txt); margin-bottom:4px; line-height:1.3; }
.sv-card__meta  { display:flex; flex-wrap:wrap; gap:6px; font-size:11px; color:var(--mut); margin-bottom:6px; }
.sv-card__done  { color:#16a34a !important; font-weight:700; }
.sv-card__prog-wrap { height:3px; background:var(--bdr); border-radius:99px; overflow:hidden; margin-bottom:3px; }
.sv-card__prog  { height:100%; border-radius:99px; transition:width .4s ease; }
.sv-card__prog-lbl { font-size:10px; color:var(--mut); }
.sv-card__arrow { font-size:18px; color:var(--mut); flex-shrink:0; }

/* ── BACK BUTTON ─────────────────────────────────────────────────── */
.sv-back {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--sur); border:1px solid var(--bdr);
  border-radius:10px; padding:8px 14px; margin-bottom:14px;
  font-size:13px; font-weight:600; color:var(--txt);
  font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .15s;
}
.sv-back:hover { background:rgba(79,110,247,.08); border-color:var(--acc); color:var(--acc); }

/* ── STORY OVERVIEW ──────────────────────────────────────────────── */
.sv-overview { padding-bottom: 32px; }

.sv-book-hero {
  background:linear-gradient(135deg,#0f172a,#1e3a8a 60%,color-mix(in srgb,var(--sv-color,#4f6ef7) 30%,#1e3a8a));
  border-radius:20px; padding:20px; margin-bottom:16px;
  display:flex; align-items:center; gap:16px; overflow:hidden; position:relative;
}
.sv-book-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent 40%,rgba(0,0,0,.2)); pointer-events:none; }
.sv-book-hero__emoji { font-size:52px; flex-shrink:0; z-index:1; }
.sv-book-hero__info  { flex:1; z-index:1; }
.sv-book-hero__level { font-size:10px; font-weight:700; color:#fff; padding:3px 9px; border-radius:99px; display:inline-block; margin-bottom:6px; }
.sv-book-hero__title { font-size:18px; font-weight:800; color:#fff; letter-spacing:-.03em; margin-bottom:6px; }
.sv-book-hero__meta  { display:flex; flex-wrap:wrap; gap:6px; font-size:11px; color:rgba(255,255,255,.65); }
.sv-book-hero__meta span { background:rgba(255,255,255,.12); border-radius:99px; padding:2px 8px; }

/* Chapter list */
.sv-chapters { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.sv-chap {
  display:flex; align-items:center; gap:14px;
  background:var(--sur); border:1.5px solid var(--bdr);
  border-radius:16px; padding:14px 16px; cursor:pointer;
  transition:all .18s;
}
.sv-chap:hover:not(.is-locked)   { transform:translateX(2px); box-shadow:0 4px 16px rgba(0,0,0,.08); }
.sv-chap:active:not(.is-locked)  { transform:scale(.98); }
.sv-chap.is-done    { border-color:rgba(22,163,74,.3); background:rgba(22,163,74,.03); }
.sv-chap.is-locked  { opacity:.55; cursor:not-allowed; }

.sv-chap__icon {
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-size:18px; color:#fff; transition:background .2s;
}
.sv-chap__body { flex:1; min-width:0; }
.sv-chap__title { font-size:14px; font-weight:700; color:var(--txt); margin-bottom:2px; }
.sv-chap__meta  { font-size:12px; color:var(--mut); }

.sv-chap__cta {
  color:#fff; border:none; border-radius:10px;
  padding:8px 16px; font-size:12px; font-weight:700;
  font-family:'DM Sans',sans-serif; cursor:pointer; flex-shrink:0;
  transition:opacity .15s;
}
.sv-chap__cta:hover { opacity:.85; }

/* Action row */
.sv-actions-row {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;
}
.sv-action-btn {
  padding:14px; border-radius:14px; font-family:'DM Sans',sans-serif;
  font-size:14px; font-weight:700; cursor:pointer; border:1.5px solid var(--bdr);
  transition:all .15s;
}
.sv-action-btn--vocab { background:var(--sur); color:var(--txt); }
.sv-action-btn--vocab:hover { background:rgba(79,110,247,.06); border-color:var(--acc); color:var(--acc); }
.sv-action-btn--quiz  { background:linear-gradient(135deg,#4f6ef7,#7c3aed); color:#fff; border-color:transparent; }
.sv-action-btn--quiz:hover { opacity:.9; }

/* ── CHAPTER READER ──────────────────────────────────────────────── */
.sv-reader { padding-bottom: 32px; }
.sv-reader__bar {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.sv-reader__bar .sv-back { margin-bottom:0; }
.sv-reader__bar-btns { display:flex; gap:6px; }
.sv-reader__btn {
  width:36px; height:36px; background:var(--sur); border:1px solid var(--bdr);
  border-radius:10px; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.sv-reader__btn:hover { background:rgba(79,110,247,.08); border-color:var(--acc); }

.sv-reader__hint {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  font-size:11px; color:var(--mut); margin-bottom:12px;
  background:rgba(79,110,247,.06); border:1px solid rgba(79,110,247,.12);
  border-radius:10px; padding:8px 12px; font-weight:500;
}

/* ── THE STORY CARD ──────────────────────────────────────────────── */
.sv-story-card {
  background:var(--sur);
  border:1px solid var(--bdr);
  border-radius:20px;
  overflow:hidden;
  margin-bottom:14px;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.sv-story-card__header {
  padding:14px 18px;
  display:flex; flex-direction:column; gap:2px;
}
.sv-story-card__chap {
  font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
}
.sv-story-card__sub {
  font-size:17px; font-weight:800; color:#fff; letter-spacing:-.02em;
}
.sv-story-card__body {
  padding:4px 0;
}

/* Each sentence */
.sv-sent {
  display:flex; align-items:flex-start;
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--bdr);
  position:relative;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease, background .2s ease;
}
.sv-sent:last-child  { border-bottom:none; }
.sv-sent.visible     { opacity:1; transform:translateY(0); }
.sv-sent.is-active   { background:rgba(79,110,247,.07); }
.sv-sent.is-past     { opacity:.5; }

.sv-sent__bar {
  width:3px; min-height:100%; flex-shrink:0;
  background:transparent; margin-left:14px; margin-right:14px;
  border-radius:2px; align-self:stretch;
  transition:background .2s ease;
}
.sv-sent.is-active .sv-sent__bar { background:var(--acc); }
.sv-sent.is-past   .sv-sent__bar { background:rgba(79,110,247,.2); }

.sv-sent__text {
  flex:1; min-width:0;
  font-size:17px; font-weight:400; line-height:1.8;
  color:var(--txt); margin:0;
  font-family:'Georgia','DM Sans',serif;
  -webkit-user-select:text; user-select:text;
}
html[data-theme=dark] .sv-sent__text { font-family:'DM Sans',sans-serif; }

.sv-sent__play {
  width:26px; height:26px; flex-shrink:0;
  border:1px solid var(--bdr); border-radius:7px;
  background:var(--sur); color:var(--mut);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  margin-top:6px; margin-right:14px;
  transition:all .15s; opacity:.45;
}
.sv-sent__play:hover { opacity:1; background:rgba(79,110,247,.08); border-color:var(--acc); color:var(--acc); }
.sv-sent.is-active .sv-sent__play { opacity:1; background:rgba(79,110,247,.1); border-color:var(--acc); color:var(--acc); }

/* Tokens */
.sv-tok  { display:inline; cursor:default; }
.sv-sp   { display:inline; }
.sv-tok.has-m {
  cursor:pointer; border-bottom:1.5px dotted rgba(79,110,247,.5);
  transition:background .12s; border-radius:2px;
}
.sv-tok.has-m:hover { background:rgba(79,110,247,.1); color:#3451d1; }
.sv-tok.tapped { background:rgba(79,110,247,.15); color:#3451d1; border-bottom-color:var(--acc); }

/* Chapter nav */
.sv-chap-nav {
  display:flex; gap:8px; margin-bottom:20px;
}
.sv-chap-nav__btn {
  flex:1; padding:13px; border-radius:12px;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700;
  cursor:pointer; border:1.5px solid var(--bdr);
  background:var(--sur); color:var(--txt); transition:all .15s;
}
.sv-chap-nav__btn:hover { border-color:var(--acc); color:var(--acc); }
.sv-chap-nav__btn--next { background:var(--acc); color:#fff; border-color:var(--acc); }
.sv-chap-nav__btn--next:hover { opacity:.9; color:#fff; }
.sv-chap-nav__btn--done { background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff; border-color:transparent; }
.sv-chap-nav__btn--done:hover { opacity:.9; color:#fff; }
.sv-chap-nav__btn--prev { order:-1; }

/* ── VOCABULARY ──────────────────────────────────────────────────── */
.sv-vocab-view { padding-bottom:32px; }
.sv-vocab-view__title { font-size:18px; font-weight:800; color:var(--txt); margin-bottom:4px; }
.sv-vocab-view__count { font-size:13px; color:var(--mut); margin-bottom:16px; }
.sv-vocab-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.sv-vocab-card {
  display:flex; align-items:center; gap:6px;
  background:var(--sur); border:1px solid var(--bdr);
  border-radius:12px; padding:10px 12px; cursor:pointer; transition:all .15s;
}
.sv-vocab-card:hover { background:rgba(79,110,247,.06); border-color:rgba(79,110,247,.2); }
.sv-vocab-card:active { transform:scale(.97); }
.sv-vocab-card__en  { font-size:12px; font-weight:700; color:var(--txt); flex-shrink:0; }
.sv-vocab-card__arrow { font-size:10px; color:var(--mut); }
.sv-vocab-card__ar  { font-size:12px; color:var(--mut); flex:1; text-align:right; font-family:'Noto Sans Arabic',sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sv-vocab-card__play { font-size:12px; opacity:.4; }

/* ── QUIZ SETUP ──────────────────────────────────────────────────── */
.sv-quiz-setup { padding-bottom:32px; }
.sv-quiz-setup__card {
  background:var(--sur); border:1px solid var(--bdr);
  border-radius:20px; padding:24px 20px; text-align:center;
}
.sv-quiz-setup__emoji { font-size:52px; margin-bottom:12px; }
.sv-quiz-setup__title { font-size:20px; font-weight:800; color:var(--txt); margin-bottom:4px; }
.sv-quiz-setup__sub   { font-size:13px; color:var(--mut); margin-bottom:8px; }
.sv-quiz-setup__desc  { font-size:13px; color:var(--mut); line-height:1.5; margin-bottom:18px; }
.sv-quiz-setup__label { font-size:12px; font-weight:600; color:var(--mut); letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; text-align:left; }
.sv-quiz-type-row { display:flex; gap:8px; margin-bottom:20px; }
.sv-qt-btn {
  flex:1; padding:10px 8px; border:1.5px solid var(--bdr);
  border-radius:12px; background:var(--sur); color:var(--txt);
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s;
}
.sv-qt-btn.active { background:rgba(79,110,247,.1); border-color:var(--acc); color:var(--acc); }
.sv-quiz-start-btn {
  width:100%; padding:15px;
  background:linear-gradient(135deg,#4f6ef7,#7c3aed);
  color:#fff; border:none; border-radius:14px;
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:700;
  cursor:pointer; box-shadow:0 6px 18px rgba(79,110,247,.35); transition:opacity .15s;
}
.sv-quiz-start-btn:hover { opacity:.9; }

/* ── QUIZ GAME ───────────────────────────────────────────────────── */
.sv-quiz-game { padding-bottom:32px; }
.sv-quiz-prog {
  height:4px; background:var(--bdr); border-radius:99px; overflow:hidden; margin-bottom:12px;
}
.sv-quiz-prog__bar { height:100%; background:var(--acc); border-radius:99px; transition:width .3s ease; }
.sv-quiz-stats { display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:13px; font-weight:600; }
.sv-qs-num   { color:var(--mut); flex:1; }
.sv-qs-score { font-size:14px; }

.sv-q-card {
  background:var(--sur); border:1px solid var(--bdr);
  border-radius:20px; padding:20px; margin-bottom:14px;
}
.sv-q-type  { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); margin-bottom:10px; }
.sv-q-word  { font-size:22px; font-weight:800; color:var(--txt); letter-spacing:-.03em; margin-bottom:18px; }
.sv-q-opts  { display:flex; flex-direction:column; gap:9px; }
.sv-q-opt {
  padding:14px 16px; border-radius:14px; text-align:center;
  border:1.5px solid var(--bdr); background:var(--sur); color:var(--txt);
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:600;
  cursor:pointer; transition:all .15s;
  font-family:'Noto Sans Arabic',sans-serif; direction:rtl;
}
.sv-q-opt:hover:not(:disabled) { background:rgba(79,110,247,.06); border-color:var(--acc); }
.sv-q-opt.sq-correct { background:#dcfce7 !important; border-color:#16a34a !important; color:#166534 !important; }
.sv-q-opt.sq-wrong   { background:#fef2f2 !important; border-color:#ef4444 !important; color:#991b1b !important; }
.sv-q-opt--tf { direction:ltr; font-family:'DM Sans',sans-serif; }
.sv-q-tf-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sv-q-shown  { font-size:16px; color:var(--txt); margin-bottom:14px; font-weight:600; direction:rtl; text-align:right; font-family:'Noto Sans Arabic',sans-serif; }
.sv-q-fill {
  width:100%; padding:14px; border:1.5px solid var(--bdr);
  border-radius:12px; font-size:16px; font-family:'Noto Sans Arabic',sans-serif;
  background:var(--sur); color:var(--txt); direction:rtl; text-align:right;
  margin-bottom:10px; outline:none; transition:border-color .15s;
}
.sv-q-fill:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(79,110,247,.1); }
.sv-q-submit {
  width:100%; padding:13px; background:var(--acc); color:#fff; border:none;
  border-radius:12px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700;
  cursor:pointer; transition:opacity .15s;
}
.sv-q-fb {
  margin-top:12px; padding:12px 16px; border-radius:12px;
  font-size:14px; font-weight:600; text-align:center;
  font-family:'Noto Sans Arabic',sans-serif;
}
.sv-q-fb.hidden { display:none; }
.sv-q-fb.ok  { background:#dcfce7; color:#166534; }
.sv-q-fb.bad { background:#fef2f2; color:#991b1b; }

/* ── QUIZ RESULTS ────────────────────────────────────────────────── */
.sv-quiz-results {
  text-align:center; padding:32px 20px;
  background:var(--sur); border:1px solid var(--bdr); border-radius:20px;
}
.sv-qr-emoji { font-size:56px; margin-bottom:12px; }
.sv-qr-score { font-size:28px; font-weight:800; color:var(--txt); margin-bottom:4px; }
.sv-qr-pct   { font-size:20px; font-weight:700; color:var(--acc); margin-bottom:8px; }
.sv-qr-msg   { font-size:15px; color:var(--mut); margin-bottom:24px; }
.sv-qr-btns  { display:flex; gap:10px; flex-direction:column; }
.sv-qr-btn   { padding:14px; border-radius:14px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; border:1.5px solid var(--bdr); background:var(--sur); color:var(--txt); transition:all .15s; }
.sv-qr-btn--retry { background:linear-gradient(135deg,#4f6ef7,#7c3aed); color:#fff; border-color:transparent; }
.sv-qr-btn--back  { background:var(--sur); }

/* ── TOOLTIP ─────────────────────────────────────────────────────── */
#sv-tip {
  position:absolute; z-index:8500;
  background:#1e293b; color:#f1f5f9;
  border-radius:14px; padding:12px 16px;
  min-width:155px; max-width:220px;
  box-shadow:0 12px 32px rgba(0,0,0,.3);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  transform:translateY(-4px);
  display:flex; flex-direction:column; gap:5px;
}
#sv-tip.show   { opacity:1; pointer-events:auto; transform:translateY(0); }
#sv-tip.below  { transform:translateY(4px); }
#sv-tip.below.show { transform:translateY(0); }
.sv-tip__word    { font-size:13px; font-weight:700; color:#7dd3fc; }
.sv-tip__meaning { font-size:15px; color:#f1f5f9; direction:rtl; font-family:'Noto Sans Arabic',sans-serif; line-height:1.4; }
.sv-tip__listen  { align-self:flex-start; background:rgba(255,255,255,.1); border:none; border-radius:6px; padding:3px 8px; font-size:13px; cursor:pointer; color:#fff; margin-top:3px; transition:background .12s; }
.sv-tip__listen:hover { background:rgba(255,255,255,.2); }

/* ── SELECTION BAR ───────────────────────────────────────────────── */
#sv-sel-bar {
  position:fixed;
  bottom:max(calc(env(safe-area-inset-bottom,0px) + 80px),90px);
  left:50%; transform:translateX(-50%) translateY(20px);
  z-index:7800; width:min(380px,calc(100vw - 24px));
  background:#fff; border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06);
  opacity:0; pointer-events:none;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
html[data-theme=dark] #sv-sel-bar { background:#1e293b; box-shadow:0 20px 60px rgba(0,0,0,.45); }
#sv-sel-bar.show { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.sv-sel__inner { padding:16px 18px; }
.sv-sel__lbl   { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#94a3b8; margin-bottom:3px; }
.sv-sel__text  { font-size:14px; font-weight:600; color:#0f172a; line-height:1.45; margin-bottom:8px; }
html[data-theme=dark] .sv-sel__text { color:#f1f5f9; }
.sv-sel__hr    { border:none; border-top:1px solid #f1f5f9; margin:8px 0; }
html[data-theme=dark] .sv-sel__hr { border-color:rgba(255,255,255,.08); }
.sv-sel__ar    { font-size:16px; color:#1e293b; line-height:1.6; direction:rtl; text-align:right; font-family:'Noto Sans Arabic',sans-serif; font-weight:500; margin-bottom:12px; }
html[data-theme=dark] .sv-sel__ar { color:#e2e8f0; }
.sv-sel__btns  { display:flex; gap:8px; }
.sv-sel__btns button { flex:1; padding:9px; border-radius:10px; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; border:1px solid #e2e8f0; background:#f8fafc; color:#334155; transition:all .15s; }
.sv-sel__btns button:last-child { background:#fff1f2; border-color:#fecaca; color:#ef4444; }
html[data-theme=dark] .sv-sel__btns button { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); color:#e2e8f0; }


/* --- assets\css\library.css --- */
/* ═══════════════════════════════════════════════════════════════════
   SPEAKPATH LIBRARY — Full-featured book library page
   ═══════════════════════════════════════════════════════════════════ */

/* ── SHELL ───────────────────────────────────────────────────────── */
.lib-shell { padding-bottom: 40px; }

/* ── HERO ────────────────────────────────────────────────────────── */
.lib-hero {
  background: linear-gradient(145deg, #0a0e1a 0%, #1a1150 40%, #2d1b69 70%, #1e3a8a 100%);
  border-radius: 24px;
  padding: 22px 20px 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.lib-hero::before {
  content: '';
  position: absolute; top: -40px; right: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.35), transparent 70%);
  pointer-events: none;
}
.lib-hero::after {
  content: '📚';
  position: absolute; bottom: 10px; right: 18px;
  font-size: 60px; opacity: .12; pointer-events: none;
  transform: rotate(-8deg);
}
.lib-hero__eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(167,139,250,.9);
  margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.lib-hero__eyebrow::before {
  content: ''; width: 20px; height: 2px;
  background: rgba(167,139,250,.7); border-radius: 2px;
}
.lib-hero__title {
  font-size: 26px; font-weight: 900; color: #fff;
  letter-spacing: -.04em; line-height: 1.15; margin-bottom: 8px;
}
.lib-hero__sub {
  font-size: 13px; color: rgba(255,255,255,.6);
  line-height: 1.5; margin-bottom: 16px; max-width: 280px;
}
.lib-hero__stats {
  display: flex; gap: 10px;
}
.lib-hero__stat {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px; padding: 9px 14px; text-align: center;
}
.lib-hero__stat-val {
  font-size: 20px; font-weight: 900; color: #fff;
  letter-spacing: -.03em; line-height: 1; display: block;
}
.lib-hero__stat-lbl {
  font-size: 10px; color: rgba(255,255,255,.5);
  font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  margin-top: 3px; display: block;
}

/* ── SEARCH ──────────────────────────────────────────────────────── */
.lib-search-wrap {
  position: relative; margin-bottom: 16px;
}
.lib-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 16px; pointer-events: none; color: var(--mut);
}
.lib-search {
  width: 100%; padding: 13px 14px 13px 42px;
  background: var(--sur); border: 1.5px solid var(--bdr);
  border-radius: 14px; font-family: 'DM Sans', sans-serif;
  font-size: 14px; color: var(--txt);
  outline: none; transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.lib-search::placeholder { color: var(--mut); }
.lib-search:focus {
  border-color: rgba(79,110,247,.6);
  box-shadow: 0 0 0 3px rgba(79,110,247,.1);
}

/* ── FILTER CHIPS (Category filter) ─────────────────────────────── */
.lib-filter-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; margin-bottom: 20px;
  display: flex; gap: 7px; padding-bottom: 4px;
}
.lib-filter-scroll::-webkit-scrollbar { display: none; }
.lib-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--bdr);
  background: var(--sur); color: var(--txt);
  font-family: 'DM Sans', sans-serif;
  cursor: pointer; white-space: nowrap;
  transition: all .15s;
}
.lib-chip:hover { border-color: rgba(79,110,247,.4); color: var(--acc); }
.lib-chip.active {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  box-shadow: 0 4px 12px rgba(79,110,247,.3);
}

/* ── SECTION HEADER ──────────────────────────────────────────────── */
.lib-section { margin-bottom: 28px; }
.lib-section__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding: 0 2px;
}
.lib-section__left {
  display: flex; align-items: center; gap: 9px;
}
.lib-section__icon {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.lib-section__title {
  font-size: 16px; font-weight: 800; color: var(--txt);
  letter-spacing: -.02em;
}
.lib-section__count {
  font-size: 11px; color: var(--mut); font-weight: 500;
}
.lib-section__see-all {
  font-size: 12px; font-weight: 700; color: var(--acc);
  background: none; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; padding: 4px 8px;
  border-radius: 8px; transition: background .15s;
}
.lib-section__see-all:hover { background: rgba(79,110,247,.08); }

/* ── CAROUSEL ────────────────────────────────────────────────────── */
.lib-carousel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex; gap: 12px;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}
.lib-carousel::-webkit-scrollbar { display: none; }

/* ── BOOK CARD ───────────────────────────────────────────────────── */
.lib-book {
  flex-shrink: 0;
  width: 140px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform .18s ease;
}
.lib-book:active { transform: scale(.95); }

.lib-book__cover {
  width: 140px; height: 196px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 2px 2px 0 rgba(0,0,0,.08);
  margin-bottom: 10px;
  transition: box-shadow .2s ease;
}
.lib-book:hover .lib-book__cover {
  box-shadow: 0 14px 36px rgba(0,0,0,.25);
  transform: translateY(-2px);
}
/* Book spine shadow */
.lib-book__cover::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,.25), transparent);
}

.lib-book__emoji { font-size: 36px; z-index: 1; }
.lib-book__level-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 9px; font-weight: 800; color: #fff;
  padding: 3px 8px; border-radius: 99px;
  letter-spacing: .04em; z-index: 2;
  background: rgba(0,0,0,.35); backdrop-filter: blur(4px);
}
.lib-book__done-badge {
  position: absolute; top: 10px; left: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #22c55e;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; z-index: 2;
  box-shadow: 0 2px 8px rgba(34,197,94,.4);
}
.lib-book__fav {
  position: absolute; bottom: 10px; right: 10px;
  font-size: 18px; z-index: 2; cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.lib-book__fav:active { transform: scale(1.4); }

/* Progress bar on book */
.lib-book__prog-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px; background: rgba(255,255,255,.2);
}
.lib-book__prog-fill {
  height: 100%; border-radius: 0;
  background: rgba(255,255,255,.9);
  transition: width .4s ease;
}

.lib-book__title {
  font-size: 12px; font-weight: 700; color: var(--txt);
  line-height: 1.3; max-width: 140px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  margin-bottom: 3px;
}
.lib-book__meta {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--mut);
}
.lib-book__tag {
  background: var(--bdr); border-radius: 99px;
  padding: 2px 6px; font-size: 9px; font-weight: 600;
}

/* ── WIDE CARD (Featured) ────────────────────────────────────────── */
.lib-featured-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; display: flex; gap: 12px;
  padding-bottom: 8px; scroll-snap-type: x mandatory;
}
.lib-featured-scroll::-webkit-scrollbar { display: none; }

.lib-featured-card {
  flex-shrink: 0; width: min(320px, 85vw);
  border-radius: 20px; overflow: hidden;
  cursor: pointer; scroll-snap-align: start;
  position: relative; height: 180px;
  transition: transform .18s ease;
}
.lib-featured-card:active { transform: scale(.97); }
.lib-featured-card__bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 80px; opacity: .25;
}
.lib-featured-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.5) 0%, transparent 60%);
}
.lib-featured-card__body {
  position: relative; z-index: 2;
  padding: 18px; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.lib-featured-card__tag {
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,.75);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px;
}
.lib-featured-card__title {
  font-size: 18px; font-weight: 800; color: #fff;
  letter-spacing: -.03em; line-height: 1.2; margin-bottom: 6px;
}
.lib-featured-card__meta {
  display: flex; gap: 8px; font-size: 11px; color: rgba(255,255,255,.7);
  align-items: center;
}
.lib-featured-card__level {
  background: rgba(255,255,255,.2); backdrop-filter: blur(4px);
  border-radius: 99px; padding: 2px 8px;
  font-size: 10px; font-weight: 700; color: #fff;
}
.lib-featured-card__cta {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  background: rgba(255,255,255,.2); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.3); border-radius: 10px;
  padding: 7px 13px; font-size: 12px; font-weight: 700; color: #fff;
  font-family: 'DM Sans', sans-serif; cursor: pointer; transition: background .15s;
}
.lib-featured-card__cta:hover { background: rgba(255,255,255,.3); }

/* ── FAVORITES SECTION ───────────────────────────────────────────── */
.lib-fav-empty {
  text-align: center; padding: 24px 16px;
  background: var(--sur); border: 1.5px dashed var(--bdr);
  border-radius: 16px;
}
.lib-fav-empty__icon  { font-size: 36px; margin-bottom: 8px; }
.lib-fav-empty__title { font-size: 14px; font-weight: 700; color: var(--txt); margin-bottom: 4px; }
.lib-fav-empty__sub   { font-size: 12px; color: var(--mut); }

/* ── CONTINUE READING BANNER ─────────────────────────────────────── */
.lib-continue {
  background: linear-gradient(135deg, #4f6ef7, #7c3aed);
  border-radius: 18px; padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.lib-continue:hover  { opacity: .95; transform: translateY(-1px); }
.lib-continue:active { transform: scale(.98); }
.lib-continue__emoji { font-size: 32px; flex-shrink: 0; }
.lib-continue__body  { flex: 1; min-width: 0; }
.lib-continue__label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.65); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 3px; }
.lib-continue__title { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-continue__meta  { font-size: 12px; color: rgba(255,255,255,.65); }
.lib-continue__arrow { font-size: 22px; color: #fff; flex-shrink: 0; }
.lib-continue__prog  { height: 3px; background: rgba(255,255,255,.25); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.lib-continue__prog-fill { height: 100%; background: rgba(255,255,255,.9); border-radius: 99px; }

/* ── BOOK DETAIL SHEET ───────────────────────────────────────────── */
.lib-sheet-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.lib-sheet-backdrop.show { opacity: 1; pointer-events: auto; }

.lib-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 9001;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  padding: 0 0 max(env(safe-area-inset-bottom,0px),20px);
  max-height: 90vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.lib-sheet.show { transform: translateY(0); }

.lib-sheet__handle {
  width: 40px; height: 4px; border-radius: 99px;
  background: var(--bdr); margin: 12px auto 0;
}
.lib-sheet__hero {
  margin: 14px 20px 0;
  border-radius: 20px; overflow: hidden; height: 200px;
  display: flex; align-items: center; justify-content: center;
  font-size: 80px; position: relative;
}
.lib-sheet__hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent 50%);
}
.lib-sheet__hero-title {
  position: absolute; bottom: 14px; left: 16px; right: 16px;
  font-size: 20px; font-weight: 900; color: #fff;
  letter-spacing: -.03em; line-height: 1.2; z-index: 2;
}
.lib-sheet__hero-level {
  position: absolute; top: 12px; left: 12px;
  font-size: 10px; font-weight: 800; color: #fff;
  padding: 4px 10px; border-radius: 99px; z-index: 2;
}

.lib-sheet__body { padding: 18px 20px; }
.lib-sheet__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.lib-sheet__tag  {
  font-size: 11px; font-weight: 600; color: var(--mut);
  background: var(--bdr); border-radius: 99px; padding: 4px 10px;
}
.lib-sheet__desc {
  font-size: 14px; color: var(--txt); line-height: 1.6; margin-bottom: 18px;
}
.lib-sheet__stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; margin-bottom: 18px;
}
.lib-sheet__stat {
  background: var(--sur); border: 1px solid var(--bdr);
  border-radius: 12px; padding: 10px; text-align: center;
}
.lib-sheet__stat-val { font-size: 16px; font-weight: 800; color: var(--txt); display: block; }
.lib-sheet__stat-lbl { font-size: 10px; color: var(--mut); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }

.lib-sheet__chapters { margin-bottom: 18px; }
.lib-sheet__chap-title { font-size: 13px; font-weight: 700; color: var(--txt); margin-bottom: 8px; }
.lib-sheet__chap-list  { display: flex; flex-direction: column; gap: 6px; }
.lib-sheet__chap {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--sur);
  border: 1px solid var(--bdr); border-radius: 12px;
}
.lib-sheet__chap-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.lib-sheet__chap-name { font-size: 13px; font-weight: 600; color: var(--txt); flex: 1; }
.lib-sheet__chap-sub  { font-size: 11px; color: var(--mut); }

.lib-sheet__actions { display: flex; gap: 10px; }
.lib-sheet__btn-primary {
  flex: 1; padding: 15px;
  background: linear-gradient(135deg, #4f6ef7, #7c3aed);
  color: #fff; border: none; border-radius: 14px;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700;
  cursor: pointer; box-shadow: 0 6px 18px rgba(79,110,247,.35);
  transition: opacity .15s;
}
.lib-sheet__btn-primary:hover { opacity: .9; }
.lib-sheet__btn-fav {
  width: 52px; padding: 15px;
  background: var(--sur); border: 1.5px solid var(--bdr);
  border-radius: 14px; font-size: 20px;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.lib-sheet__btn-fav.is-fav { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); }
.lib-sheet__btn-fav:active { transform: scale(.9); }

/* ── ANIMATIONS ──────────────────────────────────────────────────── */
@keyframes libFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lib-section { animation: libFadeUp .35s ease forwards; }
.lib-section:nth-child(2) { animation-delay: .05s; }
.lib-section:nth-child(3) { animation-delay: .1s; }
.lib-section:nth-child(4) { animation-delay: .15s; }
.lib-section:nth-child(5) { animation-delay: .2s; }