/* ============================================================
   OLIVE DEFENCE — Lexicon Laboratory
   vocab.css — dashboard-matched nav + mobile-first layout
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --vnavy:#1a2744;--vnpale:#e8ecf5;--vnmid:#b0bcd8;
  --vgold:#c9a227;--vglt:#f0c84a;--vgpale:#fdf6e0;
  --volive:#1e2d14;--vsub:#5a6580;
  --vgreen:#22a74a;--vred:#dc3545;
  --vwhite:#fff;--vbg:#f0f2f8;
  --primary:#1a4d44;--primary-mid:#22635a;--primary-lt:#e1f5ee;
  --secondary:#e0b354;--secondary-lt:#faeeda;--secondary-fg:#412402;
  --vsh:0 4px 18px rgba(26,39,68,.10);
}
html{overflow-x:hidden}
body{font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif;background:var(--vbg);color:var(--vnavy);font-size:16px;line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}

/* ══ NAV — matches dashboard exactly ════════════════════════ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(30,60,50,.12);
  padding:0 20px;height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo-wrap{
  width:42px;height:42px;border-radius:12px;
  background:var(--primary);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:0 2px 8px rgba(26,77,68,.25);
}
.nav-logo-wrap img{width:42px;height:42px;object-fit:cover}
.nav-brand-text{display:flex;flex-direction:column;line-height:1.15}
.nav-brand-name{font-weight:800;font-size:15px;color:var(--vnavy);letter-spacing:-.01em}
.nav-brand-sub{font-size:12px;font-weight:600;color:var(--primary)}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-welcome{font-size:13px;color:var(--vsub);font-weight:500;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-link{
  font-size:13px;font-weight:600;padding:7px 16px;
  border-radius:100px;text-decoration:none;color:var(--vnavy);
  border:1px solid rgba(30,60,50,.22);transition:all .15s;white-space:nowrap;
}
.nav-link:hover{background:var(--vbg);border-color:var(--primary);color:var(--primary)}
.nav-link-cta{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:700}
.nav-link-cta:hover{background:var(--primary-mid);color:#fff}
@media(max-width:440px){
  .nav-welcome{display:none}
  .nav-brand-sub{display:none}
}

/* ══ HERO ════════════════════════════════════════════════════ */
.v-hero{background:var(--primary);position:relative;overflow:hidden}
.v-hero-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.07;
  background-image:linear-gradient(var(--vgold) 1px,transparent 1px),
                   linear-gradient(90deg,var(--vgold) 1px,transparent 1px);
  background-size:48px 48px;
}
.v-hero-blob{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.05)}
.v-hero-blob.b1{width:280px;height:280px;top:-70px;right:-50px}
.v-hero-blob.b2{width:180px;height:180px;bottom:-50px;left:10px}
.v-hero-inner{max-width:700px;margin:0 auto;padding:32px 24px 28px;position:relative;z-index:1;text-align:center}
.v-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(180,220,130,.8);margin-bottom:10px}
.v-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,8vw,58px);color:var(--vwhite);letter-spacing:.05em;line-height:1;margin-bottom:10px}
.v-title span{color:var(--vglt)}
.v-subtitle{font-size:15px;color:rgba(255,255,255,.6);margin-bottom:18px}
.v-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.v-tag{background:var(--vwhite);color:var(--volive);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:1px solid #ffdf80;padding:5px 14px;border-radius:24px;box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* Ticker */
.v-ticker-wrap{background:rgba(0,0,0,.22);border-top:1px solid rgba(255,255,255,.1);overflow:hidden}
.v-ticker{display:flex;width:max-content;animation:vScroll 32s linear infinite}
.v-ticker:hover{animation-play-state:paused}
@keyframes vScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.v-tick-seg{display:inline-flex;align-items:center;padding:9px 20px;font-size:12px;font-weight:600;color:rgba(176,210,255,.85);white-space:nowrap}
.v-tick-div{display:inline-flex;align-items:center;padding:0 6px;color:rgba(90,140,40,.5);font-size:16px}

/* ══ META ROW (stats + exam filter) ═════════════════════════ */
.v-meta-row{
  background:var(--vwhite);
  border-bottom:1.5px solid var(--vnpale);
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;
  gap:0;
}
.v-stats-pair{
  display:flex;align-items:center;
  padding:12px 16px;gap:0;flex-shrink:0;
  border-right:1.5px solid var(--vnpale);
}
.v-stat{text-align:center;padding:0 14px}
.v-stat-divider{width:1px;height:36px;background:var(--vnpale)}
.v-stat-n{font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--vnavy);line-height:1}
.v-stat-l{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--vsub);margin-top:2px}
.v-filter-block{flex:1;padding:10px 16px;min-width:0}
.v-filter-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vsub);margin-bottom:6px}
.v-tabs{display:flex;gap:6px;flex-wrap:wrap}
.v-tab{
  background:var(--vwhite);color:var(--volive);font-size:12px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;border:1px solid #ffdf80;
  padding:4px 12px;border-radius:24px;cursor:pointer;user-select:none;
  opacity:.55;transition:all .15s;
}
.v-tab.active{opacity:1;background:#ffdf80}
.v-tab:hover{opacity:.85}
@media(max-width:400px){
  .v-meta-row{flex-direction:column;align-items:stretch}
  .v-stats-pair{border-right:none;border-bottom:1.5px solid var(--vnpale);justify-content:center}
}

/* ══ WORD OF THE DAY ═════════════════════════════════════════ */
.v-wotd{
  background:var(--vnavy);
  max-width:960px;margin:20px auto 0;
  border-radius:16px;padding:20px 24px 18px;
  box-shadow:var(--vsh);
}
.v-wotd-label{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:12px;
}
/* Two-column body: big word left, syn+ant+def right */
.v-wotd-body{
  display:flex;align-items:flex-start;gap:20px;
}
.v-wotd-word{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,9vw,72px);
  color:var(--vglt);letter-spacing:.04em;line-height:.95;
  flex-shrink:0;
}
.v-wotd-right{
  flex:1;display:flex;flex-direction:column;gap:6px;padding-top:4px;
}
.v-wotd-synant{
  display:flex;align-items:baseline;gap:8px;
}
.v-wotd-sa-label{
  font-size:10px;font-weight:800;letter-spacing:.1em;
  color:var(--vgold);background:rgba(201,162,39,.18);
  padding:2px 7px;border-radius:4px;flex-shrink:0;
}
.v-wotd-sa-label.ant{
  color:rgba(176,210,255,.9);background:rgba(100,160,255,.15);
}
.v-wotd-sa-word{
  font-size:16px;font-weight:700;color:#fff;line-height:1.3;
}
.v-wotd-def{
  font-size:13px;color:rgba(255,255,255,.55);line-height:1.6;margin-top:2px;
}
/* On very small screens, stack */
@media(max-width:400px){
  .v-wotd-body{flex-direction:column;gap:10px}
  .v-wotd-word{font-size:clamp(42px,12vw,60px)}
}

/* ══ MODULE CARDS ════════════════════════════════════════════ */
.v-section-label{text-align:center;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vsub);margin:24px auto 12px;max-width:960px;padding:0 16px}

.v-grid{
  max-width:1100px;margin:0 auto;
  padding:0 12px 28px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
@media(min-width:640px){
  .v-grid{grid-template-columns:repeat(3,1fr);gap:16px;padding:0 20px 36px}
}
@media(min-width:900px){
  .v-grid{grid-template-columns:repeat(4,1fr);gap:20px;padding:0 32px 40px}
}
.v-card-sprint{grid-column:span 2}
@media(min-width:640px){.v-card-sprint{grid-column:span 3}}
@media(min-width:900px){.v-card-sprint{grid-column:span 2}}

.v-card{
  background:var(--vwhite);border-radius:16px;border:1.5px solid var(--vnpale);
  box-shadow:var(--vsh);display:flex;flex-direction:column;align-items:center;
  padding:20px 12px 18px;gap:8px;cursor:pointer;
  transition:transform .18s,box-shadow .18s,border-color .18s;text-align:center;
}
.v-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(26,39,68,.16);border-color:var(--vgold)}
.v-card-featured{border-color:rgba(201,162,39,.5)}
.v-card-sprint{flex-direction:row;justify-content:center;gap:14px;padding:20px 24px}

.v-card-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;transition:transform .2s}
.v-card:hover .v-card-icon{transform:scale(1.08)}
.v-card-name{font-size:15px;font-weight:700;color:var(--vnavy);line-height:1.3}
.v-card-count{font-family:'Bebas Neue',sans-serif;font-size:15px;color:var(--vsub)}

/* ══ FAQ STRIP ═══════════════════════════════════════════════ */
.v-faq{background:var(--secondary-lt);border-top:1px solid rgba(224,179,84,.3);border-bottom:1px solid rgba(224,179,84,.3);padding:18px 20px;margin-top:auto}
.v-faq-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.v-faq-text{display:flex;align-items:center;gap:12px}
.v-faq-title{font-size:15px;font-weight:800;color:#1a2130}
.v-faq-sub{font-size:12px;color:var(--vsub);margin-top:2px}
.v-faq-btn{background:var(--primary);color:var(--vwhite);font-size:13px;font-weight:700;padding:10px 22px;border-radius:100px;text-decoration:none;white-space:nowrap;transition:background .15s;flex-shrink:0}
.v-faq-btn:hover{background:var(--primary-mid)}

/* ══ FOOTER ══════════════════════════════════════════════════ */
.v-footer{text-align:center;padding:20px 16px 24px;background:var(--primary);border-top:3px solid var(--vgold)}
.v-footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px}
.v-footer-links a{color:rgba(255,255,255,.55);font-size:12px;font-weight:600;text-decoration:none;transition:color .15s}
.v-footer-links a:hover{color:var(--vglt)}
.v-footer-copy{color:rgba(255,255,255,.3);font-size:11px}

/* ══ PRACTICE OVERLAY ════════════════════════════════════════ */
.practice-overlay{position:fixed;inset:0;background:rgba(10,20,40,.72);z-index:500;display:flex;align-items:center;justify-content:center;padding:12px;overflow-y:auto}
.quiz-box{background:var(--vwhite);border-radius:18px;width:100%;max-width:700px;max-height:96vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.3);overflow:hidden;margin:auto}
.po-nav{background:var(--vnavy);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;border-bottom:3px solid var(--vgold)}
.po-back{background:rgba(255,255,255,.1);border:none;color:var(--vwhite);border-radius:7px;padding:7px 14px;cursor:pointer;font-size:14px;font-weight:700;white-space:nowrap;flex-shrink:0;font-family:'Plus Jakarta Sans','DM Sans',sans-serif}
.po-back:hover{background:rgba(255,255,255,.18)}
.po-title{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--vwhite);letter-spacing:.05em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.po-next-btn{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:.07em;padding:7px 18px;border-radius:8px;border:none;background:var(--vgold);color:var(--volive);cursor:pointer;flex-shrink:0;font-weight:700}
.po-next-btn:hover{background:var(--vglt)}
.po-progbar{background:var(--vnpale);height:4px;flex-shrink:0}
.po-progfill{height:100%;background:var(--vgold);transition:width .3s}
.po-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 18px 10px}
.po-foot{background:var(--vwhite);border-top:1px solid var(--vnpale);padding:9px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.po-foot-info{font-size:13px;font-weight:700;color:var(--vsub);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}
.po-qcount-foot{font-size:13px;font-weight:700;color:var(--vsub)}

/* Type banner */
/* ── Question type header ── */
.q-type-header{
  display:flex;flex-direction:column;gap:3px;
  margin-bottom:14px;padding-bottom:10px;
  border-bottom:2px solid var(--vnpale);
}
.q-type-label{
  font-size:15px;font-weight:800;
  color:#c62828;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.2;
}
.q-type-hint{
  font-size:13px;color:var(--vsub);
  font-weight:500;line-height:1.4;
}

/* Question */
.q-card{margin-bottom:4px}
.badge{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:10px;border:1px solid}
.b-easy{background:#e8f5e9;border-color:#a5d6a7;color:#2e7d32}
.b-medium{background:#fff3e0;border-color:#ffcc80;color:#e65100}
.b-hard{background:#fce4ec;border-color:#f48fb1;color:#880e4f}
/* ── Word (synonym/antonym) ── */
.q-word{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(38px,9vw,54px);
  color:var(--vnavy);letter-spacing:.04em;
  line-height:1;text-align:center;
  padding:10px 0 6px;margin-bottom:10px;
}

/* ── Sentence / definition card — used by ALL types ── */
.q-sentence-card{
  font-size:17px;color:var(--vnavy);
  line-height:1.75;
  padding:14px 16px 14px 20px;
  background:var(--vnpale);
  border-radius:10px;
  border-left:4px solid var(--vnavy);
  margin-bottom:12px;
  font-weight:400;
}
.q-sentence-card strong{
  font-weight:800;color:var(--vnavy);
  text-decoration:underline;text-underline-offset:3px;
}

/* Idiom — italic and slightly larger */
.q-idiom-card{
  font-style:italic;
  font-size:19px;
  font-weight:600;
  letter-spacing:.01em;
  color:#1a2744;
}

/* OWS — definition style, slightly different left border */
.q-ows-card{
  border-left-color:#2e7d32;
  background:#f1f8f2;
  font-size:17px;
}

/* Conjunctive — two-clause layout */
.q-conj-card{
  display:flex;flex-direction:column;gap:10px;
}
.q-conj-a{
  padding-bottom:10px;
  border-bottom:1px dashed rgba(26,39,68,.2);
}
.q-conj-b{ padding-top:2px; }

/* Single blank line — used by confusable and conjunctive */
.q-blank{
  display:inline-block;
  min-width:90px;
  border-bottom:2.5px solid var(--vnavy);
  text-align:center;
  color:transparent;
  margin:0 4px;
  vertical-align:bottom;
  line-height:1.8;
}
.conj-clause{font-size:16px;color:var(--vnavy);line-height:1.65;padding-left:10px}
.clause-a{border-left:3px solid var(--vnavy)}
.clause-b{border-left:3px solid var(--vgold)}

.attempt-wrap{display:flex;align-items:center;gap:8px;margin:10px 0 6px}
.att-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--vsub)}
.att-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:1px}
.att-wrong{background:var(--vred)}
.att-right{background:var(--vgreen)}
.opts-list{display:flex;flex-direction:column;gap:9px;margin-bottom:10px}
.opt-text{flex:1;line-height:1.5;}
.opt-btn{width:100%;padding:13px 14px;border-radius:10px;border:1.5px solid var(--vnpale);background:var(--vwhite);font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif;font-size:16px;color:var(--vnavy);cursor:pointer;text-align:left;display:flex;align-items:flex-start;gap:12px;line-height:1.5;transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent;user-select:none}
.opt-btn:hover{border-color:var(--vnavy);background:var(--vnpale)}
.opt-letter{font-family:'Bebas Neue',sans-serif;font-size:18px;color:var(--vsub);width:22px;flex-shrink:0;line-height:1.25;text-align:center}
.opt-btn.state-wrong{border-color:var(--vred);background:#fef0f0;color:#7a1a1a;animation:vShake .3s}
.opt-btn.state-wrong .opt-letter{color:var(--vred)}
.opt-btn.state-correct{border-color:var(--vgreen);background:#e8f5e9;color:#1a5e2e;font-weight:600}
.opt-btn.state-correct .opt-letter{color:var(--vgreen)}
.opt-btn.state-faded{opacity:.35;pointer-events:none}
.explain-box{background:#e8f5e9;border:1.5px solid rgba(34,167,74,.3);border-radius:10px;padding:13px 15px;font-size:15px;color:#1a5e2e;line-height:1.65;margin-top:6px;display:none}
.explain-box.visible{display:block}
.flag-wrap{margin-top:8px;display:flex;align-items:center;gap:10px}
.flag-btn{background:none;border:none;color:var(--vsub);font-size:12px;font-weight:600;cursor:pointer;padding:3px 0;opacity:.5;font-family:'Plus Jakarta Sans','DM Sans',sans-serif}
.flag-btn:hover{opacity:1;color:var(--vred)}
.flag-thanks{font-size:12px;font-weight:600;color:var(--vgreen)}

/* Summary */
.summary-wrap{display:flex;flex-direction:column;gap:12px;padding-bottom:20px}
.sum-hero{background:var(--vnavy);border-radius:14px;padding:22px 18px;text-align:center;color:var(--vwhite)}
.sum-pct{font-family:'Bebas Neue',sans-serif;font-size:76px;color:var(--vglt);letter-spacing:.03em;line-height:1}
.sum-label{font-size:15px;color:rgba(255,255,255,.6);margin-bottom:2px}
.sum-sublabel{font-size:13px;color:rgba(255,255,255,.4)}
.sum-grade{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.05em;margin-top:8px}
.sum-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.ss-cell{background:var(--vwhite);border-radius:10px;padding:13px 8px;text-align:center;border:1.5px solid var(--vnpale)}
.ss-num{font-family:'Bebas Neue',sans-serif;font-size:30px;line-height:1;letter-spacing:.03em}
.ss-num.c-green{color:var(--vgreen)}.ss-num.c-red{color:var(--vred)}.ss-num.c-navy{color:var(--vnavy)}
.ss-lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vsub);margin-top:3px}
.sum-section-title{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--vsub);padding:2px}
.word-review-list{display:flex;flex-direction:column;gap:8px}
.wr-item{background:var(--vwhite);border-radius:10px;border:1.5px solid var(--vnpale);padding:12px 14px}
.wr-item.wr-ok{border-color:rgba(34,167,74,.3);background:#f8fff9}
.wr-item.wr-fail{border-color:rgba(220,53,69,.15)}
.wr-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.wr-word{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--vnavy);letter-spacing:.03em;flex:1}
.wr-result{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;flex-shrink:0}
.wr-result.ok{background:#e8f5e9;color:#2e7d32}
.wr-result.fail{background:#fce4ec;color:#880e4f}
.wr-dots{display:flex;gap:4px;margin-bottom:5px}
.wr-exp{font-size:14px;color:var(--vsub);line-height:1.55}
/* sum-btn moved to bottom — see below */

/* Paywall */
.paywall-wrap{text-align:center;padding:22px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.pw-opt-btn{width:100%;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1.5px solid var(--vnpale);background:var(--vwhite);cursor:pointer;text-align:left;transition:border-color .15s,background .15s;font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif}
.pw-opt-btn:hover{border-color:var(--vgold);background:var(--vgpale)}
.pw-opt-new{border-color:var(--vgold);background:var(--vgpale)}
.pw-opt-icon{font-size:24px;flex-shrink:0}
.pw-opt-body{flex:1;text-align:left}
.pw-opt-title{font-size:16px;font-weight:600;color:var(--vnavy);line-height:1.3}
.pw-opt-sub{font-size:13px;color:var(--vsub);margin-top:3px}
.pw-opt-arrow{font-size:22px;color:var(--vgold);flex-shrink:0}
.pw-score-box{background:var(--vnavy);border-radius:14px;padding:15px 17px;width:100%;text-align:left}
.pw-score-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.pw-score-label{font-size:11px;color:rgba(255,255,255,.5);font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.pw-score-val{font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--vglt);letter-spacing:.03em}
.pw-pitch{font-size:14px;color:rgba(255,255,255,.72);line-height:1.65;margin-top:4px}
.pw-stats{display:flex;background:rgba(255,255,255,.07);border-radius:8px;overflow:hidden;width:100%;margin-top:10px}
.pw-stat{flex:1;padding:10px 6px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.pw-stat:last-child{border-right:none}
.pw-stat strong{display:block;font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--vglt);line-height:1}
.pw-stat span{display:block;font-size:10px;font-weight:700;color:rgba(255,255,255,.45);margin-top:2px;text-transform:uppercase;letter-spacing:.06em}
.pw-btn-primary{display:block;width:100%;padding:14px;border-radius:10px;background:var(--vgold);color:var(--volive);font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:.08em;text-decoration:none;text-align:center;font-weight:700}
.pw-btn-primary:hover{background:var(--vglt)}
.pw-btn-secondary{display:block;font-size:14px;font-weight:600;color:var(--vsub);text-decoration:none;padding:4px;background:none;border:none;cursor:pointer;font-family:'Plus Jakarta Sans','DM Sans',sans-serif}

/* Loading */
.po-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 20px;gap:14px}
.spinner{width:32px;height:32px;border:3px solid var(--vnpale);border-top-color:var(--vnavy);border-radius:50%;animation:vSpin .7s linear infinite}
.spinner-txt{font-size:15px;font-weight:600;color:var(--vsub)}
.empty-state{text-align:center;padding:40px 20px;color:var(--vsub)}
.empty-emoji{font-size:42px;margin-bottom:12px}
.empty-state p{font-size:15px;line-height:1.6}

/* Animations */
@keyframes vShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes vSpin{to{transform:rotate(360deg)}}

/* ══ MOBILE FINE-TUNING ══════════════════════════════════════ */
@media(max-width:500px){
  .quiz-box{border-radius:12px;max-height:100vh}
  .po-body{padding:12px 14px 8px}
  .q-word{font-size:clamp(32px,10vw,44px)}
  .q-type-label{font-size:16px}
  .q-type-hint{font-size:14px}
  .q-sentence-card{font-size:16px;padding:13px 14px 13px 16px}
  .q-idiom-card{font-size:18px}
  .opt-btn{font-size:16px;padding:13px 13px}
  .opt-text{font-size:16px}
  .v-wotd-word{font-size:clamp(32px,9vw,44px)}
  .v-card-name{font-size:13px}
  .v-card-icon{width:44px;height:44px;font-size:20px}
  .v-wotd{margin:12px 10px 0}
  .v-grid{padding:0 10px 24px;gap:8px}
}

/* ============================================================
   PAYWALL — elegant score ring + soft login + quiet offer
   ============================================================ */
.pw-wrap{
  display:flex;flex-direction:column;gap:16px;
  padding:18px 16px 16px;width:100%;
  background:var(--vnavy);
  /* Escape the po-body padding so dark bg fills edge to edge */
  margin:-16px -18px;
  width:calc(100% + 36px);
  min-height:calc(100% + 26px);
  box-sizing:border-box;
}
@media(max-width:500px){
  .pw-wrap{margin:-12px -14px;width:calc(100% + 28px);}
}

/* Score row — big ring left, content right */
.pw-score-row{
  display:flex;align-items:center;gap:16px;
}
.pw-ring-wrap{ flex-shrink:0; }
.pw-ring{ width:110px;height:110px;display:block; }

.pw-score-body{ flex:1;min-width:0; }
.pw-top-msg{
  font-size:17px;font-weight:700;color:var(--vwhite);
  margin-bottom:3px;line-height:1.2;
}
.pw-top-sub{
  font-size:12px;color:rgba(255,255,255,.45);
  line-height:1.5;margin-bottom:10px;
}

/* Scoring explanation */
.pw-key{
  font-size:13px;color:rgba(255,255,255,.55);
  font-weight:500;line-height:1.6;margin-bottom:10px;
}

/* 3 scoring cards — equal width */
.pw-chips{
  display:flex;gap:8px;margin-bottom:4px;
}
.pw-chip{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:10px 6px;border-radius:10px;
  border:1px solid transparent;
}
.pw-chip-w{
  font-size:12px;font-weight:800;letter-spacing:.04em;
  line-height:1.3;text-align:center;margin-bottom:4px;
}
.pw-chip-s{
  font-family:'Bebas Neue',sans-serif;font-size:22px;
  color:#fff;letter-spacing:.03em;line-height:1;
}

/* Divider with text */
.pw-divider{
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.25);
}
.pw-divider::before,.pw-divider::after{
  content:'';flex:1;height:1px;background:rgba(255,255,255,.08);
}

/* Login section — quiet */
.pw-continue{
  display:flex;flex-direction:column;gap:8px;
}
.pw-continue-label{
  font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.35);
  margin-bottom:2px;
}
.pw-field-row{display:flex;gap:8px;}
.pw-field{
  flex:1;padding:10px 12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;color:#fff;
  font-family:'Plus Jakarta Sans','DM Sans',sans-serif;
  font-size:13px;outline:none;
  transition:border-color .15s,background .15s;
  min-width:0;
}
.pw-field::placeholder{color:rgba(255,255,255,.3);}
.pw-field:focus{
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);
}
.pw-login-err{
  font-size:12px;font-weight:600;
  color:#ef9a9a;padding:2px 0;
}
.pw-continue-btn{
  width:100%;padding:12px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;color:#fff;
  font-family:'Plus Jakarta Sans','DM Sans',sans-serif;
  font-size:14px;font-weight:700;
  cursor:pointer;transition:background .15s,transform .1s;
  letter-spacing:-.01em;
}
.pw-continue-btn:hover{background:rgba(255,255,255,.18);}
.pw-continue-btn:active{transform:scale(.98);}
.pw-continue-btn:disabled{opacity:.5;cursor:not-allowed;}

/* Offer line — one quiet line */
.pw-offer-line{
  text-align:center;
  font-size:13px;color:rgba(255,255,255,.4);
  padding:2px 0;
}
.pw-offer-link{
  text-decoration:none;color:rgba(255,255,255,.7);
  font-weight:600;transition:color .15s;
}
.pw-offer-link:hover{color:#fff;}
.pw-offer-old{
  font-size:12px;color:rgba(255,255,255,.3);
  text-decoration:line-through;font-style:normal;
}
.pw-offer-price{
  font-size:16px;color:#4dd0e1;font-weight:800;
}
.pw-offer-tag{
  font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;
  background:rgba(77,208,225,.2);color:#4dd0e1;
  padding:2px 7px;border-radius:4px;
  vertical-align:middle;margin-left:2px;
}

/* Back link */
.pw-back-link{
  display:block;text-align:center;
  font-size:12px;font-weight:600;color:rgba(255,255,255,.25);
  background:none;border:none;cursor:pointer;
  font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif;
  padding:2px;width:100%;transition:color .15s;
}
.pw-back-link:hover{color:rgba(255,255,255,.5);}

/* ============================================================
   PAYWALL — clean, professional, single column, mobile-first
   ============================================================ */
.pw-wrap{
  display:flex;flex-direction:column;align-items:stretch;
  gap:20px;padding:24px 20px 20px;
  background:#f0f4f8;
  margin:-16px -18px;
  width:calc(100% + 36px);
  min-height:calc(100% + 32px);
  box-sizing:border-box;
}
@media(max-width:500px){
  .pw-wrap{margin:-12px -14px;width:calc(100% + 28px);padding:20px 16px 18px;}
}

/* Score — centered ring, light bg */
.pw-score-center{
  display:flex;flex-direction:column;
  align-items:center;gap:14px;text-align:center;
  background:#fff;border-radius:16px;
  padding:28px 20px 22px;
  box-shadow:0 2px 12px rgba(26,39,68,.08);
}
.pw-ring{ width:140px;height:140px;display:block; }

/* Score message — dark on light */
.pw-top-msg{
  font-size:24px;font-weight:800;
  color:#1a2744;line-height:1.2;
  text-align:center;
}

/* Yellow rule — dark for contrast on light bg */
.pw-score-rule{
  font-size:15px;font-weight:600;
  color:#b07d00;
  text-align:center;
  line-height:1.5;
}

/* 3 scoring chips — light cards */
.pw-chips{
  display:flex;gap:10px;
}
.pw-chip{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:14px 8px;border-radius:12px;
  border:2px solid transparent;
  background:#fff;
  box-shadow:0 1px 6px rgba(26,39,68,.08);
}
.pw-chip-w{
  font-size:13px;font-weight:700;letter-spacing:.03em;
  line-height:1.3;text-align:center;margin-bottom:6px;
}
.pw-chip-s{
  font-family:'Bebas Neue',sans-serif;font-size:28px;
  letter-spacing:.03em;line-height:1;
}

/* Two action cards */
.pw-action-row{
  display:flex;gap:12px;
}
.pw-action-card{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:10px;padding:22px 10px;
  border-radius:14px;
  text-decoration:none;
  cursor:pointer;border:none;
  transition:transform .15s,opacity .15s;
  text-align:center;
  font-family:'Plus Jakarta Sans','DM Sans',sans-serif;
  box-shadow:0 3px 12px rgba(0,0,0,.15);
}
.pw-action-card:active{transform:scale(.97);}

/* Repeat Test — teal/green */
.pw-action-retry{
  background:linear-gradient(135deg,#1a6b5a,#22a078);
}
/* New Test — indigo/blue */
.pw-action-new{
  background:linear-gradient(135deg,#2c3e8c,#4a6cf7);
}
.pw-ac-icon{font-size:28px;line-height:1;}
.pw-ac-label{
  font-size:18px;font-weight:800;
  color:#fff;letter-spacing:.01em;
}

/* Back button */
.pw-back-prominent{
  display:block;width:100%;
  padding:14px;
  background:#fff;
  border:1.5px solid #d0d5e0;
  border-radius:12px;
  color:#5a6580;
  font-size:16px;font-weight:600;
  cursor:pointer;text-align:center;
  font-family:'Plus Jakarta Sans','DM Sans',sans-serif;
}
.pw-back-prominent:hover{color:#1a2744;border-color:#1a2744;}

/* Mobile — bigger fonts */
@media(max-width:520px){
  .pw-top-msg{font-size:26px;}
  .pw-score-rule{font-size:16px;}
  .pw-chip-w{font-size:14px;}
  .pw-chip-s{font-size:30px;}
  .pw-ac-label{font-size:19px;}
  .pw-ac-icon{font-size:30px;}
  .pw-ring{width:130px;height:130px;}
}

/* Retry button on paywall */
.pw-retry-btn{
  display:none; /* replaced by pw-action-card */
}

/* Login link btn */
.pw-login-link-btn{
  display:none; /* removed from paywall */
}

/* New words btn */
.pw-new-words-btn{
  display:none; /* replaced by pw-action-card */
}
/* ── Floating Next Button ────────────────────────────────── */
.float-next-btn{
  position:fixed;
  bottom:160px;right:20px;
  width:56px;height:56px;
  border-radius:50%;
  background:var(--vgold);
  color:var(--volive);
  border:none;cursor:pointer;
  font-family:'Bebas Neue',sans-serif;
  font-size:26px;letter-spacing:.04em;
  display:none;
  align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(201,162,39,.5);
  z-index:550;
  transition:transform .15s,box-shadow .15s;
}
.float-next-btn:hover{transform:scale(1.08);}
.float-next-btn:active{transform:scale(.95);}
@media(max-width:500px){
  .float-next-btn{width:58px;height:58px;font-size:26px;bottom:140px;right:14px;}
}

/* ── Summary screen ──────────────────────────────────────── */
.sum-actions{display:flex;flex-direction:column;gap:10px;padding:0 4px 8px}

.sum-btn{
  width:100%;padding:14px;border-radius:11px;
  font-family:'Plus Jakarta Sans','DM Sans',sans-serif;
  font-size:15px;font-weight:700;border:none;cursor:pointer;
  text-align:center;text-decoration:none;display:block;
  transition:opacity .15s,transform .1s;
}
.sum-btn:active{transform:scale(.98)}
.sum-btn-primary{background:var(--vnavy);color:var(--vglt)}
.sum-btn-secondary{
  background:transparent;color:var(--vsub);
  border:1.5px solid var(--vnpale);font-size:13px;
}
.sum-btn-retry{
  background:linear-gradient(135deg,#1a4d44,#22635a);
  color:#fff;font-size:16px;border:none;
  box-shadow:0 3px 12px rgba(26,77,68,.3);
}
.sum-btn-retry:hover{opacity:.92}
.sum-btn-new-guest{
  background:linear-gradient(135deg,#1565c0,#0d47a1);
  color:#fff;font-size:14px;border:none;
  box-shadow:0 3px 12px rgba(13,71,161,.3);
}

/* Teacher's note */
.sum-teachers-note{
  background:linear-gradient(135deg,#fff8e1,#fff3cd);
  border:1.5px solid rgba(201,162,39,.4);
  border-left:4px solid #c9a227;
  border-radius:12px;padding:14px 16px;margin-bottom:4px;
}
.sum-tn-head{
  font-size:13px;font-weight:800;color:#7a5500;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px;
}
.sum-tn-body{
  font-size:14px;color:#5a3e00;
  line-height:1.6;font-weight:500;font-style:italic;
}
@media(max-width:520px){
  .sum-tn-body{font-size:15px;}
  .sum-btn-retry{font-size:17px;padding:15px;}
}

/* pw-score-msg-block */
.pw-score-msg-block{
  display:flex;flex-direction:column;
}

/* === NEW SECTION v4 === */
.v-section-label-2 { margin-top: 8px; }

.q-grammar-card { font-size: 17px; line-height: 1.7; color: var(--ink); }
.q-grammar-card u.q-grammar-target {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  font-weight: 700;
  color: var(--navy);
  background: rgba(240,200,74,0.10);
  padding: 0 2px;
  border-radius: 3px;
}

.q-subtype-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #283593;
  background: #e8eaf6;
  border: 1px solid #c5cae9;
  border-radius: 20px;
  padding: 3px 11px;
  margin-bottom: 10px;
}