/* =============================================================================
   VoltageLab Quiz — stylesheet

   Ported from the <style> block that the WordPress plugin inlines into
   templates/quiz-page.php, tracking plugin v5.0.1 (template header "v5.1").

   Two groups of rules are dropped, both WordPress-specific:
     - the `.entry-content, .site-main, .hentry { max-width:100% !important }`
       overrides that fought the theme for full-bleed width
     - the @import of the Google Fonts stylesheet, now a <link> in layout.php
       so it does not block the rest of the CSS from parsing

   Everything from "DESIGN TOKENS" down is the plugin's, unchanged. The site
   chrome above it replaces what the WordPress theme used to draw and is tuned
   to the same tokens.

   Note on --vl-amber: the plugin kept the variable name through its v5 re-skin
   but the value is the blue #1D6FEB. The name is left alone so this file can be
   diffed against the plugin line for line.
   ========================================================================== */

/* ── DESIGN TOKENS ── */
:root{
    --vl-amber:#1D6FEB;
    --vl-amber-d:#1558D6;
    --vl-amber-xl:rgba(29,111,235,.07);
    --vl-amber-sm:rgba(29,111,235,.12);
    --vl-amber-md:rgba(29,111,235,.25);
    --vl-navy:#0f1b2d;
    --vl-navy-mid:#14253d;
    --vl-navy-lt:#1a2d47;
    --vl-body:#1a2332;
    --vl-slate:#475569;
    --vl-muted:#64748b;
    --vl-subtle:#94a3b8;
    --vl-border:#e2e8f0;
    --vl-border-lt:#eff2f7;
    --vl-bg:#f8fafc;
    --vl-white:#ffffff;
    --vl-green:#16a34a;
    --vl-green-bg:#f0fdf4;
    --vl-green-b:#bbf7d0;
    --vl-red:#dc2626;
    --vl-red-bg:#fef2f2;
    --vl-red-b:#fecaca;
    --vl-radius:14px;
    --vl-radius-sm:10px;
    --vl-shadow-sm:0 1px 3px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);
    --vl-shadow:0 4px 20px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
    --vl-shadow-lg:0 8px 40px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
    --vl-ease:cubic-bezier(.4,0,.2,1);
    --vl-trans:all .22s cubic-bezier(.4,0,.2,1);
}

/* ── Site chrome — replaces what the WordPress theme used to draw ─────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--vl-body);
    line-height: 1.6;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
.container { max-width: 1320px; margin: 0 auto; padding: 0 28px; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--vl-navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.site-header { border-bottom: 1px solid var(--vl-border-lt); background: #fff; }
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; min-height: 68px; flex-wrap: wrap;
}
.site-logo {
    font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 20px;
    color: var(--vl-navy); text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
    letter-spacing: -.02em;
}
.logo-badge {
    font-family: 'Open Sans', sans-serif; font-size: 11px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    background: var(--vl-amber); color: #fff; padding: 3px 8px; border-radius: 6px;
}
/* The category links come from the catalog, so the count is not fixed and the
   longest name is not known at design time: scroll rather than wrap, which
   would push the header to two rows on a phone. */
.header-nav {
    display: flex; gap: 22px; align-items: center;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    max-width: 100%; padding: 2px 0;
}
.header-nav::-webkit-scrollbar { display: none; }
.header-nav a {
    color: var(--vl-slate); text-decoration: none; font-size: 14px; font-weight: 600;
    white-space: nowrap;
}
.header-nav a:hover { color: var(--vl-amber); }
.header-nav a[aria-current="page"] { color: var(--vl-amber); }

.site-footer {
    margin-top: 64px; padding: 32px 0; border-top: 1px solid var(--vl-border-lt);
    background: var(--vl-bg); font-size: 14px; color: var(--vl-muted);
}
.footer-brand { margin: 0 0 8px; }
.footer-brand a { color: var(--vl-navy); font-weight: 700; text-decoration: none; }
.footer-bottom { margin: 0; font-size: 13px; }

/* ── PAGE WRAPPER ── */
.vl-page{
    padding:24px 0 80px;
    font-family:'Open Sans',-apple-system,sans-serif;
    color:var(--vl-body);line-height:1.6;
}

/* ── BREADCRUMB ── */
.vl-bc{
    display:flex;align-items:center;gap:8px;
    margin-bottom:16px;font-size:13px;color:var(--vl-subtle);
    flex-wrap:wrap;
}
.vl-bc a{
    color:var(--vl-muted);font-weight:600;text-decoration:none;
    transition:color .15s;border-bottom:1px solid transparent;
    padding-bottom:1px;
}
.vl-bc a:hover{color:var(--vl-amber);border-bottom-color:var(--vl-amber);}
.vl-bc-sep{color:var(--vl-border);font-size:16px;user-select:none;}
.vl-bc-cur{color:var(--vl-body);font-weight:700;}

/* ── PAGE HEADER (non-home views) ── */
.vl-page-hdr{margin-bottom:20px;}
.vl-page-hdr h1{
    font-family:'Roboto',sans-serif;
    font-size:clamp(22px,3vw,34px);
    font-weight:800;color:var(--vl-navy);
    margin:0 0 6px;line-height:1.12;
    letter-spacing:-.02em;
}
.vl-page-hdr p{font-size:14px;color:var(--vl-muted);margin:0;}

/* ── HOME HERO ── */
.vl-hero{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:28px;
    align-items:center;
    padding:20px 0 24px;
    position:relative;
}
.vl-hero-glow{display:none;}
.vl-hero-inner{min-width:0;}
.vl-hero-tag{
    display:inline-flex;align-items:center;gap:7px;
    padding:4px 12px 4px 8px;
    background:var(--vl-amber-sm);
    border:1px solid var(--vl-amber-md);
    border-radius:20px;
    font-size:11px;font-weight:800;color:#1047b4;
    letter-spacing:.5px;text-transform:uppercase;
    margin-bottom:12px;
}
.vl-hero-tag-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--vl-amber);
    animation:vlDot 2.2s ease-in-out infinite;
}
@keyframes vlDot{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(.7);opacity:.5;}}
.vl-hero h1{
    font-family:'Roboto',sans-serif;
    font-size:clamp(26px,3.8vw,44px);
    font-weight:900;color:var(--vl-navy);
    margin:0 0 10px;line-height:1.1;
    letter-spacing:-.02em;
}
.vl-hero h1 em{
    font-style:normal;
    background:linear-gradient(120deg,#1D6FEB 20%,#1558D6 80%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}
.vl-hero-sub{
    font-size:15px;color:var(--vl-muted);
    margin:0 0 18px;line-height:1.65;
}
.vl-hero-stats{
    display:flex;gap:0;flex-wrap:wrap;
    margin:0;padding:0;border:none;
}
.vl-stat{
    display:flex;flex-direction:column;gap:1px;
    padding:12px 20px 12px 0;
    margin-right:20px;
    border-right:1px solid var(--vl-border-lt);
}
.vl-stat:last-child{border-right:none;margin-right:0;}
.vl-stat-n{
    font-family:'Roboto',sans-serif;font-size:20px;
    font-weight:800;color:var(--vl-navy);line-height:1;
}
.vl-stat-l{font-size:11px;color:var(--vl-muted);font-weight:600;letter-spacing:.2px;margin-top:3px;}

/* Right side stat card */
.vl-hero-card{
    background:linear-gradient(145deg,var(--vl-navy) 0%,#0d1f38 100%);
    border-radius:16px;
    padding:24px 22px;
    position:relative;overflow:hidden;
    box-shadow:var(--vl-shadow-lg);
}
.vl-hero-card::before{
    content:'';position:absolute;
    top:-40px;right:-40px;
    width:160px;height:160px;
    background:radial-gradient(circle,rgba(29,111,235,.2),transparent 65%);
    pointer-events:none;
}
.vl-hero-card-label{
    font-size:10px;font-weight:700;letter-spacing:1px;
    text-transform:uppercase;color:rgba(255,255,255,.4);
    margin-bottom:14px;display:block;
}
.vl-hero-card-stats{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;}
.vl-hero-card-stat{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 14px;
    background:rgba(255,255,255,.06);
    border-radius:10px;
    border:1px solid rgba(255,255,255,.08);
}
.vl-hero-card-stat-label{font-size:13px;color:rgba(255,255,255,.65);font-weight:500;}
.vl-hero-card-stat-val{
    font-family:'Roboto',sans-serif;
    font-size:16px;font-weight:800;color:var(--vl-amber);
}
.vl-hero-card-cta{
    display:flex;gap:8px;margin-top:14px;position:relative;z-index:1;
}
.vl-hero-card-cta a{
    flex:1;text-align:center;padding:9px 10px;border-radius:9px;
    font-size:12px;font-weight:700;text-decoration:none!important;
    transition:var(--vl-trans);
}
.vl-hero-card-cta .ios{background:#fff;color:var(--vl-navy)!important;}
.vl-hero-card-cta .ios:hover{background:#f1f5f9;}
.vl-hero-card-cta .and{background:var(--vl-amber);color:#fff!important;}
.vl-hero-card-cta .and:hover{background:var(--vl-amber-d);}

/* ── HERO SEARCH ROW ── */
.vl-hdr-row{
    display:flex;align-items:center;
    justify-content:space-between;
    gap:16px;flex-wrap:wrap;
}
mark.vl-hl{
    background:rgba(29,111,235,.22);border-radius:2px;
    padding:0 2px;color:inherit;
}

/* ── CATEGORY TABS ── */
.vl-tabs-wrap{
    overflow-x:auto;scrollbar-width:none;
    -ms-overflow-style:none;
    margin-bottom:20px;
}
.vl-tabs-wrap::-webkit-scrollbar{display:none;}
.vl-tabs{
    display:flex;gap:0;
    border-bottom:2px solid var(--vl-border-lt);
    min-width:max-content;width:100%;
}
.vl-tab{
    display:inline-flex;align-items:center;gap:9px;
    padding:11px 18px;border:none;
    border-bottom:3px solid transparent;
    margin-bottom:-2px;background:none;
    color:var(--vl-muted);font-size:14px;font-weight:700;
    font-family:'Open Sans',sans-serif;
    cursor:pointer;transition:var(--vl-trans);
    white-space:nowrap;text-decoration:none!important;
    letter-spacing:.1px;
}
.vl-tab:hover{color:var(--vl-body);background:rgba(15,27,45,.03);}
.vl-tab.active{
    color:var(--vl-amber)!important;
    border-bottom-color:var(--vl-amber);font-weight:800;
}
.vl-tn{
    font-size:11px;font-weight:700;
    background:var(--vl-bg);color:var(--vl-muted);
    border-radius:20px;padding:2px 9px;line-height:1.6;
}
.vl-tab.active .vl-tn{background:var(--vl-amber-sm);color:#1047b4;}

/* ── SECTION HEADER ── */
.vl-sec-hdr{
    display:flex;align-items:baseline;gap:10px;
    margin:36px 0 18px;
}
/* The home grid shows only the substantial topics in a category; this is the
   way through to the rest of them. */
.vl-sec-all{
    margin-left:auto;flex-shrink:0;
    font-family:'Open Sans',sans-serif;font-size:13px;font-weight:700;
    color:var(--vl-amber);text-decoration:none;white-space:nowrap;
}
.vl-sec-all:hover{color:var(--vl-amber-d);text-decoration:underline;}
.vl-sec-hdr h2{
    font-family:'Roboto',sans-serif;font-size:19px;
    font-weight:800;color:var(--vl-navy);margin:0;
    display:flex;align-items:center;gap:10px;
}
.vl-sec-hdr h2::before{
    content:'';display:inline-block;
    width:4px;height:20px;
    background:linear-gradient(180deg,var(--vl-amber),var(--vl-amber-d));
    border-radius:2px;flex-shrink:0;
}

/* ── CARD GRID ── */
.vl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}

/* ── SUBCATEGORY CARD ── */
.vl-sc2{
    background:var(--vl-white);
    border:1.5px solid var(--vl-border-lt);
    border-radius:var(--vl-radius);
    padding:24px 20px 20px;
    cursor:pointer;transition:var(--vl-trans);
    position:relative;overflow:hidden;
    text-decoration:none!important;display:block;
    color:inherit;box-shadow:var(--vl-shadow-sm);
}
.vl-sc2::before{
    content:'';position:absolute;
    top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--vl-amber),var(--vl-amber-d));
    transform:scaleX(0);transform-origin:left;
    transition:transform .26s var(--vl-ease);
}
.vl-sc2:hover{
    border-color:rgba(29,111,235,.3);
    box-shadow:var(--vl-shadow);
    transform:translateY(-3px);
}
.vl-sc2:hover::before{transform:scaleX(1);}
.vl-sc2-name{
    font-size:16px;font-weight:800;color:var(--vl-navy);
    margin:0 0 6px;line-height:1.35;
    font-family:'Open Sans',sans-serif;
    transition:color .18s;
}
.vl-sc2:hover .vl-sc2-name{color:var(--vl-amber-d);}
.vl-sc2-n{font-size:13px;color:var(--vl-muted);font-weight:500;margin:0 0 18px;}
.vl-sc2-go{
    display:inline-flex;align-items:center;gap:5px;
    font-size:13px;font-weight:700;color:var(--vl-amber);
    transition:gap .2s;
}
.vl-sc2:hover .vl-sc2-go{gap:9px;}

/* ── QUIZ CARD ── */
.vl-card{
    background:var(--vl-white);
    border:1.5px solid var(--vl-border-lt);
    border-radius:var(--vl-radius);
    padding:20px 20px 18px;
    display:flex;flex-direction:column;
    cursor:pointer;transition:var(--vl-trans);
    position:relative;overflow:hidden;
    text-decoration:none!important;color:inherit;
    box-shadow:var(--vl-shadow-sm);
}
.vl-card::after{
    content:'';position:absolute;
    left:0;top:0;bottom:0;width:3px;
    background:linear-gradient(180deg,var(--vl-amber),var(--vl-amber-d));
    transform:scaleY(0);transform-origin:top;
    transition:transform .26s var(--vl-ease);
}
.vl-card:hover{
    border-color:rgba(29,111,235,.35);
    box-shadow:var(--vl-shadow);
    transform:translateY(-3px);
}
.vl-card:hover::after{transform:scaleY(1);}
.vl-cm{
    display:flex;align-items:center;gap:5px;
    margin-bottom:10px;flex-wrap:wrap;
}
.vl-cc{
    font-size:10px;font-weight:700;
    letter-spacing:.8px;text-transform:uppercase;
    color:var(--vl-subtle);
}
.vl-cdot{
    width:3px;height:3px;border-radius:50%;
    background:var(--vl-border);flex-shrink:0;display:inline-block;
}
.vl-cs{font-size:10px;color:var(--vl-subtle);font-weight:500;}
.vl-ct{
    font-size:15px;font-weight:700;color:var(--vl-navy);
    line-height:1.5;margin:0 0 16px;flex:1;
    transition:color .18s;
}
.vl-card:hover .vl-ct{color:var(--vl-amber-d);}
.vl-cf{
    display:flex;align-items:center;
    justify-content:space-between;gap:8px;
    padding-top:13px;
    border-top:1px solid var(--vl-border-lt);
    margin-top:auto;
}
/* Difficulty badges */
.vl-d{
    display:inline-block;padding:4px 10px;
    border-radius:20px;font-size:10px;font-weight:800;
    text-transform:uppercase;letter-spacing:.5px;line-height:1.6;
}
.vl-de{background:var(--vl-green-bg);color:var(--vl-green);border:1px solid var(--vl-green-b);}
.vl-dm{background:var(--vl-amber-sm);color:#1047b4;border:1px solid var(--vl-amber-md);}
.vl-dh{background:var(--vl-red-bg);color:var(--vl-red);border:1px solid var(--vl-red-b);}
.vl-dx{background:var(--vl-bg);color:var(--vl-slate);border:1px solid var(--vl-border);}
.vl-qc{font-size:12px;color:var(--vl-subtle);font-weight:600;}
/* Start CTA on cards */
.vl-start-btn{
    display:inline-flex;align-items:center;gap:5px;
    padding:8px 15px;
    background:var(--vl-amber);
    color:#fff!important;
    border-radius:8px;font-size:13px;font-weight:700;
    text-decoration:none!important;
    white-space:nowrap;flex-shrink:0;
    transition:var(--vl-trans);
    font-family:'Open Sans',sans-serif;
    line-height:1;
}
.vl-start-btn:hover{
    background:var(--vl-amber-d);
    box-shadow:0 3px 10px rgba(29,111,235,.35);
    transform:translateY(-1px);
}
/* Legacy alias used by existing JS */
.vl-cta-link{
    display:inline-flex;align-items:center;gap:5px;
    padding:8px 15px;
    background:var(--vl-amber);
    color:#fff!important;
    border-radius:8px;font-size:13px;font-weight:700;
    text-decoration:none!important;
    white-space:nowrap;flex-shrink:0;
    transition:var(--vl-trans);
    font-family:'Open Sans',sans-serif;
}
.vl-cta-link:hover{background:var(--vl-amber-d);}

/* Card entrance animation */
.vl-card,.vl-sc2{animation:vlFadeUp .32s var(--vl-ease) both;}
@keyframes vlFadeUp{
    from{opacity:0;transform:translateY(12px);}
    to{opacity:1;transform:translateY(0);}
}
.vl-grid>*:nth-child(1){animation-delay:.04s;}
.vl-grid>*:nth-child(2){animation-delay:.09s;}
.vl-grid>*:nth-child(3){animation-delay:.14s;}
.vl-grid>*:nth-child(4){animation-delay:.19s;}
.vl-grid>*:nth-child(5){animation-delay:.24s;}
.vl-grid>*:nth-child(6){animation-delay:.29s;}
.vl-grid>*:nth-child(7){animation-delay:.34s;}
.vl-grid>*:nth-child(8){animation-delay:.39s;}

/* ═══════════════ QUIZ PLAYER ═══════════════ */
.vl-player-wrap{max-width:820px;margin:0 auto;}

/* Quiz header card */
.vl-quiz-header{background:linear-gradient(135deg,var(--vl-navy) 0%,#0e2240 100%);border-radius:18px;padding:28px 32px 24px;margin-bottom:28px;position:relative;overflow:hidden;}
.vl-quiz-header::before{content:'';position:absolute;top:-50px;right:-50px;width:220px;height:220px;background:radial-gradient(circle,rgba(29,111,235,.16),transparent 68%);pointer-events:none;}
.vl-quiz-header-nav{display:flex;align-items:center;gap:6px;margin-bottom:16px;position:relative;z-index:1;flex-wrap:wrap;}
.vl-quiz-header-nav a{color:rgba(255,255,255,.45);font-size:12px;font-weight:600;text-decoration:none!important;transition:color .15s;}
.vl-quiz-header-nav a:hover{color:var(--vl-amber);}
.vl-quiz-header-nav .vl-bc-sep{color:rgba(255,255,255,.2);font-size:13px;}
.vl-quiz-header-nav .vl-bc-cur{color:rgba(255,255,255,.7);font-size:12px;font-weight:600;}
.vl-quiz-header-body{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;position:relative;z-index:1;flex-wrap:wrap;}
.vl-quiz-header-left{flex:1;min-width:0;}
.vl-ptit{font-family:'Roboto',sans-serif;font-size:clamp(20px,2.8vw,28px);font-weight:900;color:#fff;margin:0 0 14px;line-height:1.15;letter-spacing:-.01em;}
.vl-quiz-badges{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.vl-diff-badge{display:inline-block;padding:5px 13px;border-radius:20px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;}
.vl-diff-badge.dm,.vl-diff-badge.vl-dm{background:rgba(29,111,235,.18);color:var(--vl-amber);border:1px solid rgba(29,111,235,.35);}
.vl-diff-badge.de,.vl-diff-badge.vl-de{background:rgba(22,163,74,.18);color:#4ade80;border:1px solid rgba(22,163,74,.35);}
.vl-diff-badge.dh,.vl-diff-badge.vl-dh{background:rgba(220,38,38,.18);color:#f87171;border:1px solid rgba(220,38,38,.35);}
.vl-diff-badge.vl-dx{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.18);}
.vl-qcb{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:rgba(255,255,255,.5);font-weight:600;}
.vl-qcb-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.25);display:inline-block;}
.vl-bk{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9px;color:rgba(255,255,255,.65);font-size:13px;font-weight:700;font-family:'Open Sans',sans-serif;cursor:pointer;transition:var(--vl-trans);white-space:nowrap;flex-shrink:0;text-decoration:none!important;}
.vl-bk:hover{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.28);}

/* Next button pulse after answering */
.vl-next-ready{animation:vlNextPulse 1.1s ease-in-out 2;}
@keyframes vlNextPulse{0%{box-shadow:0 0 0 0 rgba(29,111,235,.55);transform:scale(1);}50%{box-shadow:0 0 0 10px rgba(29,111,235,0);transform:scale(1.04);}100%{box-shadow:0 0 0 0 rgba(29,111,235,0);transform:scale(1);}}

/* Progress bar */
.vl-pb{
    height:5px;background:var(--vl-border-lt);
    border-radius:5px;margin-bottom:32px;overflow:hidden;
}
.vl-pf{
    height:100%;
    background:linear-gradient(90deg,var(--vl-amber),var(--vl-amber-d));
    border-radius:5px;
    transition:width .5s var(--vl-ease);
}

/* Question block */
.vl-qblock{
    background:var(--vl-white);
    border:1.5px solid var(--vl-border-lt);
    border-radius:16px;padding:32px 34px;
    margin-bottom:20px;
    box-shadow:var(--vl-shadow-sm);
    transition:border-color .2s;
}
.vl-qnum{
    font-size:11px;font-weight:700;
    letter-spacing:1px;text-transform:uppercase;
    color:var(--vl-subtle);margin-bottom:16px;
    display:flex;align-items:center;gap:10px;
}
.vl-qnum::after{
    content:'';flex:1;height:1px;background:var(--vl-border-lt);
}
.vl-qtext{
    font-size:18px;font-weight:700;line-height:1.65;
    color:var(--vl-navy);margin:0 0 24px;
    padding:0;border:none;background:none;
    font-family:'Open Sans',sans-serif;
}
.vl-opts{
    display:flex;flex-direction:column;gap:10px;
    list-style:none;padding:0;margin:0;
}
.vl-opt{
    display:flex;align-items:center;gap:14px;width:100%;
    padding:14px 18px;
    background:var(--vl-bg);
    border:1.5px solid var(--vl-border);
    border-radius:10px;cursor:pointer;
    transition:var(--vl-trans);
    font-size:15px;color:var(--vl-body);
    text-align:left;
    font-family:'Open Sans',sans-serif;
    font-weight:500;line-height:1.5;
}
.vl-opt:hover:not(.lk){
    border-color:var(--vl-amber);
    background:var(--vl-white);
    box-shadow:0 2px 10px rgba(29,111,235,.12);
}
.vl-opt-key{
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:8px;
    background:var(--vl-white);border:1.5px solid var(--vl-border);
    color:var(--vl-slate);font-size:13px;font-weight:800;
    flex-shrink:0;transition:var(--vl-trans);
    font-family:'Open Sans',sans-serif;
}
.vl-opt:hover:not(.lk) .vl-opt-key{
    background:var(--vl-amber-sm);
    border-color:var(--vl-amber-md);color:#1047b4;
}
.vl-opt-text{flex:1;}
.vl-opt.ok{
    border-color:var(--vl-green)!important;
    background:var(--vl-green-bg)!important;
    color:#15803d!important;
    animation:vlCorrect .35s var(--vl-ease);
}
.vl-opt.ok .vl-opt-key{
    background:var(--vl-green)!important;
    border-color:var(--vl-green)!important;
    color:#fff!important;
}
.vl-opt.no{
    border-color:var(--vl-red)!important;
    background:var(--vl-red-bg)!important;
    color:#b91c1c!important;
    animation:vlWrong .4s var(--vl-ease);
}
.vl-opt.no .vl-opt-key{
    background:var(--vl-red)!important;
    border-color:var(--vl-red)!important;
    color:#fff!important;
}
.vl-opt.lk{pointer-events:none!important;}
/* The player disables the buttons as well as locking them; keep the answered
   states legible rather than letting the UA grey them out. */
.vl-opt[disabled]{opacity:1;}

@keyframes vlCorrect{
    0%{transform:scale(1);}
    45%{transform:scale(1.015);}
    100%{transform:scale(1);}
}
@keyframes vlWrong{
    0%,100%{transform:translateX(0);}
    20%{transform:translateX(-5px);}
    40%{transform:translateX(5px);}
    60%{transform:translateX(-4px);}
    80%{transform:translateX(4px);}
}

/* Hint feedback */
.vl-hint{
    display:none;margin-top:16px;
    padding:16px 20px;border-radius:10px;
    font-size:15px;line-height:1.65;
    font-family:'Open Sans',sans-serif;
}
.vl-hint.sh{
    display:flex!important;align-items:flex-start;gap:14px;
    animation:vlFadeUp .28s var(--vl-ease);
}
.vl-hint.ok{background:var(--vl-green-bg);border:1.5px solid var(--vl-green-b);}
.vl-hint.no{background:var(--vl-red-bg);border:1.5px solid var(--vl-red-b);}
.vl-hint-icon svg{width:26px;height:26px;flex-shrink:0;display:block;}
.vl-hint-content{flex:1;}
.vl-hint-label{display:block;font-size:15px;font-weight:800;margin-bottom:4px;}
.ok-label{color:#15803d;}.no-label{color:#b91c1c;}
.vl-hint-ans{font-size:14px;color:var(--vl-red);margin:4px 0 0;padding:0;}
.vl-hint-exp{
    font-size:14px;color:var(--vl-slate);
    margin:8px 0 0;padding:0;font-style:italic;line-height:1.7;
}

/* Navigation */
.vl-player-foot{
    display:flex;align-items:center;
    justify-content:space-between;
    margin-top:28px;padding-top:22px;
    border-top:1px solid var(--vl-border-lt);
    flex-wrap:wrap;gap:12px;
}

.vl-q-nav{
    display:flex;align-items:center;justify-content:space-between;
    gap:14px;flex-wrap:wrap;
    position:fixed;bottom:0;left:0;right:0;z-index:9999;
    padding:14px 28px;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--vl-border-lt);
    box-shadow:0 -4px 24px rgba(15,28,55,.1);
}
/* Add space below quiz content so the fixed bar doesn't overlap the last option */
#vl-quiz-player{padding-bottom:80px;}
.vl-q-nav-left{display:flex;align-items:center;gap:10px;}
.vl-q-nav-dots{display:flex;gap:6px;flex-wrap:wrap;max-width:400px;}
.vl-q-dot{
    width:10px;height:10px;border-radius:50%;
    background:var(--vl-border);transition:all .2s;cursor:pointer;
}
.vl-q-dot.answered-ok{background:var(--vl-green);}
.vl-q-dot.answered-no{background:var(--vl-red);}
.vl-q-dot.current{
    background:var(--vl-amber);transform:scale(1.35);
    box-shadow:0 0 0 3px rgba(29,111,235,.22);
}
.vl-nav-btn{
    display:inline-flex;align-items:center;gap:7px;
    padding:10px 20px;border:1.5px solid var(--vl-border);
    border-radius:var(--vl-radius-sm);
    background:var(--vl-white);color:var(--vl-slate);
    font-size:14px;font-weight:700;
    font-family:'Open Sans',sans-serif;
    cursor:pointer;transition:var(--vl-trans);
}
.vl-nav-btn:hover:not([disabled]){
    border-color:var(--vl-amber);color:var(--vl-navy);
    background:var(--vl-amber-xl);
}
.vl-nav-btn[disabled]{opacity:.35;cursor:not-allowed;}
.vl-nav-btn.next-btn{
    background:var(--vl-amber);color:#fff;
    border-color:var(--vl-amber);
}
.vl-nav-btn.next-btn:hover:not([disabled]){
    background:var(--vl-amber-d);border-color:var(--vl-amber-d);
    box-shadow:0 3px 12px rgba(29,111,235,.3);
}
.vl-q-counter{font-size:13px;color:var(--vl-muted);font-weight:600;white-space:nowrap;}
.vl-prog-lbl{font-size:13px;color:var(--vl-muted);font-weight:500;}

/* Buttons */
.vl-bp{
    padding:12px 26px;border:none;border-radius:var(--vl-radius-sm);
    font-size:15px;font-weight:700;
    font-family:'Open Sans',sans-serif;
    cursor:pointer;background:var(--vl-amber);color:#fff;
    transition:var(--vl-trans);display:inline-block;
    line-height:1.4;text-decoration:none!important;
}
.vl-bp:hover{
    background:var(--vl-amber-d);
    transform:translateY(-1px);
    box-shadow:0 4px 16px rgba(29,111,235,.35);
}
.vl-bp[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
.vl-bo{
    padding:11px 22px;
    border:1.5px solid var(--vl-border);
    border-radius:var(--vl-radius-sm);
    font-size:15px;font-weight:700;
    font-family:'Open Sans',sans-serif;
    cursor:pointer;background:var(--vl-white);color:var(--vl-slate);
    transition:var(--vl-trans);display:inline-block;
    line-height:1.4;text-decoration:none!important;
}
.vl-bo:hover{border-color:var(--vl-amber);color:var(--vl-navy);background:var(--vl-amber-xl);}

/* Single-question mode */
.vl-q-single{display:none;}
.vl-q-single.active{display:block!important;}

/* Loader */
#vl-loader{display:none;text-align:center;padding:60px 20px;}
#vl-loader.show{display:block;}
.vl-spin{
    display:block;width:40px;height:40px;
    border:3px solid var(--vl-border);
    border-top-color:var(--vl-amber);border-radius:50%;
    animation:vlsp .8s linear infinite;margin:0 auto 14px;
}
@keyframes vlsp{to{transform:rotate(360deg);}}
.vl-toast{
    position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
    background:var(--vl-navy);color:#fff;
    padding:14px 22px;border-radius:10px;font-size:15px;font-weight:500;
    box-shadow:var(--vl-shadow-lg);z-index:99999;max-width:90vw;display:none;
}
.vl-toast.show{display:block;}
.vl-seo-hidden{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* ═══════════════ RESULTS SCREEN ═══════════════ */
.vl-results-wrap{max-width:820px;margin:0 auto;}
.vl-score-hero{
    text-align:center;margin-bottom:44px;
    padding:48px 36px;
    background:linear-gradient(145deg,var(--vl-navy) 0%,var(--vl-navy-lt) 100%);
    border-radius:20px;box-shadow:var(--vl-shadow-lg);
    position:relative;overflow:hidden;
}
.vl-score-hero::before{
    content:'';position:absolute;top:-60px;right:-60px;
    width:250px;height:250px;
    background:radial-gradient(circle,rgba(29,111,235,.18),transparent 70%);
    pointer-events:none;
}
.vl-score-hero::after{
    content:'';position:absolute;bottom:-50px;left:-40px;
    width:200px;height:200px;
    background:radial-gradient(circle,rgba(29,111,235,.08),transparent 70%);
    pointer-events:none;
}
.vl-results-title{
    font-family:'Roboto',sans-serif;font-size:30px;font-weight:800;
    color:#fff;margin:0 0 28px;padding:0;border:none;background:none;
    position:relative;z-index:1;letter-spacing:-.02em;
}
.vl-score-ring{
    position:relative;width:140px;height:140px;
    margin:0 auto 22px;z-index:1;
}
.vl-score-ring svg{display:block;width:140px;height:140px;}
.vl-score-inner{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
}
.vl-score-num{
    font-family:'Roboto',sans-serif;font-size:40px;
    font-weight:800;line-height:1;color:#fff;
}
.vl-score-den{font-size:15px;color:rgba(255,255,255,.45);font-weight:600;margin-top:3px;}
.vl-score-msg{
    font-size:17px;color:rgba(255,255,255,.78);
    margin:0;font-weight:500;
    position:relative;z-index:1;
}
.vl-results-section-title{
    font-family:'Roboto',sans-serif;font-size:19px;font-weight:800;
    color:var(--vl-navy);margin:0 0 18px;
    display:flex;align-items:center;gap:10px;
}
.vl-results-section-title::before{
    content:'';display:inline-block;width:4px;height:20px;
    background:linear-gradient(180deg,var(--vl-amber),var(--vl-amber-d));
    border-radius:2px;flex-shrink:0;
}
.vl-fb-item{
    margin-bottom:14px;border-radius:14px;
    background:var(--vl-white);
    border:1.5px solid var(--vl-border-lt);
    overflow:hidden;box-shadow:var(--vl-shadow-sm);
}
.vl-fb-item.ok{border-color:var(--vl-green-b);}
.vl-fb-item.no{border-color:var(--vl-red-b);}
.vl-fb-header{
    display:flex;align-items:center;gap:14px;
    padding:14px 20px;border-bottom:1px solid var(--vl-border-lt);
}
.vl-fb-item.ok .vl-fb-header{background:var(--vl-green-bg);border-bottom-color:var(--vl-green-b);}
.vl-fb-item.no .vl-fb-header{background:var(--vl-red-bg);border-bottom-color:var(--vl-red-b);}
.vl-fb-icon svg{width:26px;height:26px;display:block;flex-shrink:0;}
.vl-fb-header-text{display:flex;align-items:center;gap:10px;}
.vl-fb-qnum{font-size:14px;font-weight:700;color:var(--vl-navy);}
.vl-fb-status{font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;}
.vl-fb-status.ok{background:#dcfce7;color:#15803d;}
.vl-fb-status.no{background:#fee2e2;color:#b91c1c;}
.vl-fb-qtxt{
    font-size:15px;font-weight:600;color:var(--vl-navy);
    line-height:1.6;padding:16px 20px 12px;margin:0;
    border:none;background:none;
}
.vl-fb-answers{padding:0 20px 16px;display:flex;flex-direction:column;gap:8px;}
.vl-fb-ans-row{
    display:flex;align-items:center;gap:12px;
    padding:11px 14px;border-radius:9px;font-size:14px;
}
.vl-fb-ans-row.ok,.vl-fb-ans-row.correct{background:var(--vl-green-bg);border:1.5px solid var(--vl-green-b);}
.vl-fb-ans-row.no{background:var(--vl-red-bg);border:1.5px solid var(--vl-red-b);}
.vl-fb-ans-row.skip{background:var(--vl-bg);border:1.5px solid var(--vl-border);}
.vl-fb-ans-label{
    font-size:11px;font-weight:700;text-transform:uppercase;
    letter-spacing:.7px;color:var(--vl-subtle);
    white-space:nowrap;min-width:110px;
}
.vl-fb-ans-val{font-size:14px;color:var(--vl-body);font-weight:500;}
.vl-fb-ans-row.no .vl-fb-ans-val{color:var(--vl-red);}
.vl-fb-ans-row.ok .vl-fb-ans-val,.vl-fb-ans-row.correct .vl-fb-ans-val{color:var(--vl-green);}
.vl-fb-exp{
    margin:0 20px 16px;padding:13px 16px;
    background:#eff6ff;border-radius:9px;border-left:4px solid #2563eb;
}
.vl-fb-exp-label{
    display:block;font-size:11px;font-weight:700;
    color:#1d4ed8;margin-bottom:6px;
    text-transform:uppercase;letter-spacing:.5px;
}
.vl-fb-exp p{font-size:13px;color:#1e40af;margin:0;line-height:1.65;}
.vl-results-actions{
    display:flex;gap:14px;justify-content:center;
    margin-top:32px;flex-wrap:wrap;
}

/* ═══════════════ APP CTAs ═══════════════ */

/* Post-quiz CTA block */
.vl-app-cta{
    display:flex;align-items:center;gap:22px;
    margin-top:32px;padding:28px 30px;
    background:linear-gradient(140deg,var(--vl-navy) 0%,var(--vl-navy-lt) 100%);
    border-radius:16px;flex-wrap:wrap;
    box-shadow:var(--vl-shadow);
    position:relative;overflow:hidden;
}
.vl-app-cta::before{
    content:'';position:absolute;top:-40px;right:-40px;
    width:180px;height:180px;
    background:radial-gradient(circle,rgba(29,111,235,.18),transparent 70%);
    pointer-events:none;
}
.vl-app-cta-icon{
    width:52px;height:52px;flex-shrink:0;
    background:var(--vl-amber);border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 16px rgba(29,111,235,.4);
    position:relative;z-index:1;
}
.vl-app-cta-text{flex:1;min-width:180px;position:relative;z-index:1;}
.vl-app-cta-text strong{
    display:block;font-size:16px;font-weight:800;
    color:#fff;margin-bottom:5px;
    font-family:'Roboto',sans-serif;
}
.vl-app-cta-text p{font-size:13px;color:rgba(255,255,255,.6);margin:0;line-height:1.65;}
.vl-app-cta-btns{
    display:flex;gap:10px;flex-wrap:wrap;
    position:relative;z-index:1;
}
.vl-store-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 18px;border-radius:9px;
    font-size:13px;font-weight:700;
    font-family:'Open Sans',sans-serif;
    text-decoration:none!important;
    transition:var(--vl-trans);white-space:nowrap;
}
.vl-store-ios{background:#fff;color:var(--vl-navy)!important;}
.vl-store-ios:hover{background:#f1f5f9;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.12);}
.vl-store-android{background:var(--vl-amber);color:#fff!important;}
.vl-store-android:hover{background:var(--vl-amber-d);transform:translateY(-1px);box-shadow:0 4px 14px rgba(29,111,235,.4);}

/* Rotating promo card — quiz player foot. One of three apps, chosen per quiz. */
.vl-app-promo{
    display:flex;gap:18px;align-items:flex-start;
    margin:28px 0 8px;padding:20px 22px;
    background:#fff;border:1px solid var(--vl-border-lt);
    border-radius:16px;box-shadow:0 2px 10px rgba(15,27,45,.05);
}
.vl-app-promo-icon{
    width:56px;height:56px;flex-shrink:0;
    border-radius:13px;background:var(--vl-amber-xl);
}
.vl-app-promo-body{min-width:0;}
.vl-app-promo-eyebrow{
    display:block;
    font-family:'Open Sans',sans-serif;font-size:11px;font-weight:800;
    letter-spacing:.07em;text-transform:uppercase;color:var(--vl-amber);
    margin-bottom:5px;
}
.vl-app-promo-head{
    display:block;
    font-family:'Roboto',sans-serif;font-size:17px;font-weight:800;
    color:var(--vl-navy);line-height:1.3;
}
.vl-app-promo-pitch{
    margin:6px 0 14px;font-size:14px;line-height:1.55;color:var(--vl-muted);
}
.vl-app-promo-links{display:flex;gap:10px;flex-wrap:wrap;}
/* The card sits on white, so the light iOS button needs an edge to read as one. */
.vl-app-promo-links .vl-store-ios{
    background:#fff;border:1px solid var(--vl-border);
}
.vl-app-promo-links .vl-store-ios:hover{background:#f8fafc;}

/* Quiz-list strip */
.vl-app-strip{
    display:flex;align-items:center;gap:14px;
    padding:14px 20px;
    background:rgba(29,111,235,.07);
    border:1.5px solid rgba(29,111,235,.2);
    border-radius:12px;margin-bottom:28px;flex-wrap:wrap;
}
.vl-app-strip-badge{
    display:inline-block;padding:3px 10px;
    background:var(--vl-amber);color:#fff;
    border-radius:20px;font-size:10px;font-weight:800;
    letter-spacing:.7px;text-transform:uppercase;
    white-space:nowrap;flex-shrink:0;
}
.vl-app-strip-text{
    flex:1;font-size:13px;color:var(--vl-slate);
    font-weight:500;min-width:180px;line-height:1.55;
}
.vl-app-strip-links{display:flex;gap:8px;}
.vl-app-strip-links a{
    padding:7px 14px;border-radius:7px;
    font-size:12px;font-weight:700;
    text-decoration:none!important;
    background:var(--vl-navy);color:#fff!important;
    transition:background .15s;
}
.vl-app-strip-links a:hover{background:var(--vl-navy-lt);}

/* Home hero app banner */
.vl-app-hero{
    display:block;
    margin-top:56px;padding:58px 44px;
    background:linear-gradient(145deg,var(--vl-navy) 0%,#0c2040 100%);
    border-radius:20px;text-align:center;
    position:relative;overflow:hidden;
    box-shadow:var(--vl-shadow-lg);
}
.vl-app-hero::before{
    content:'';position:absolute;inset:0;
    background:
        radial-gradient(ellipse at 75% 5%,rgba(29,111,235,.18),transparent 55%),
        radial-gradient(ellipse at 15% 95%,rgba(29,111,235,.09),transparent 45%);
    pointer-events:none;
}
.vl-app-hero-inner{position:relative;z-index:1;max-width:580px;margin:0 auto;}
.vl-app-hero-badge{
    display:inline-flex;align-items:center;gap:7px;
    padding:5px 14px 5px 10px;
    background:rgba(29,111,235,.14);
    border:1px solid rgba(29,111,235,.28);
    border-radius:20px;font-size:11px;font-weight:800;
    color:var(--vl-amber);letter-spacing:.4px;text-transform:uppercase;
    margin-bottom:20px;
}
.vl-app-hero h2{
    font-family:'Roboto',sans-serif;
    font-size:clamp(22px,3vw,34px);
    font-weight:800;color:#fff;
    margin:0 0 14px;letter-spacing:-.02em;line-height:1.14;
}
.vl-app-hero p{
    font-size:16px;color:rgba(255,255,255,.65);
    margin:0 0 32px;line-height:1.75;
}
.vl-app-hero-btns{
    display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}
.vl-app-hero-btns .vl-store-btn{padding:13px 24px;font-size:14px;}
.vl-app-hero-feats{
    display:flex;gap:22px;justify-content:center;
    margin-top:26px;flex-wrap:wrap;
}
.vl-app-feat{
    display:flex;align-items:center;gap:6px;
    font-size:12px;color:rgba(255,255,255,.5);font-weight:600;
}

/* ── Additions ────────────────────────────────────────────────────────────────
   Classes the plugin styled inline, plus the few this port introduces: the
   home search box (the plugin dropped its own in v5, this app keeps it) and
   the empty/offline states the plugin had no equivalent for.
   ------------------------------------------------------------------------- */

/* Search bar */
.vl-sw{position:relative;width:300px;flex-shrink:0;}
.vl-sw input{width:100%;padding:12px 38px 12px 42px;border:1.5px solid var(--vl-border);border-radius:10px;background:var(--vl-bg);color:var(--vl-body);font-size:15px;font-family:'Open Sans',sans-serif;outline:none;transition:var(--vl-trans);box-shadow:none;}
.vl-sw input::placeholder{color:var(--vl-subtle);}
.vl-sw input:focus{border-color:var(--vl-amber);background:#fff;box-shadow:0 0 0 3px var(--vl-amber-sm);}
.vl-sw-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);display:flex;pointer-events:none;}
.vl-sw-clr{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--vl-subtle);font-size:13px;padding:4px;line-height:1;display:none;}
.vl-sw-clr:hover{color:var(--vl-body);}

/* Search results overlay */
.vl-search-results{display:none;margin-top:20px;}
.vl-search-results.show{display:block;}
.vl-search-info{font-size:13px;color:var(--vl-subtle);margin-bottom:16px;}

/* Content wrapper on the listing views. */
.vl-content{padding:8px 0 0;}

/* Shown when the catalog is empty because the upstream API is unreachable and
   no cache has been written yet. */
.vl-empty{padding:48px 0;text-align:center;color:var(--vl-subtle);font-size:16px;}

.vl-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ═══════════════ RESPONSIVE — ALL SCREENS ═══════════════ */

/* Large tablets (≤ 1100px) */
@media(max-width:1100px){
    .vl-grid{grid-template-columns:repeat(3,1fr);}
    .vl-hero h1{font-size:clamp(28px,4vw,44px);}
}

/* Tablet / large phone (≤ 780px) */
@media(max-width:780px){
    .container{padding:0 16px;}
    .vl-page{padding:24px 0 60px;}
    .vl-grid{grid-template-columns:repeat(2,1fr);}

    /* Hero */
    .vl-hero{grid-template-columns:1fr;padding:16px 0 0;}
    .vl-hero-card{display:none;}
    .vl-hero h1{font-size:clamp(24px,6vw,34px);}
    .vl-hero-sub{font-size:14px;margin-bottom:14px;}
    .vl-stat-n{font-size:18px;}

    /* Search */
    .vl-hdr-row{flex-direction:column;align-items:flex-start;}
    .vl-sw{width:100%;}

    /* Tabs scroll */
    .vl-tabs-wrap{margin-bottom:24px;}

    /* Cards */
    .vl-sc2,.vl-card{border-radius:12px;}
    .vl-ct{font-size:14px;}
    .vl-sc2-name{font-size:15px;}

    /* Player */
    .vl-quiz-header{padding:22px 20px 18px;border-radius:14px;}
    .vl-quiz-header-body{flex-direction:column;align-items:flex-start;gap:14px;}
    .vl-ptit{font-size:18px;}
    .vl-qblock{padding:20px 16px;border-radius:12px;}
    .vl-qtext{font-size:16px;margin-bottom:20px;}
    .vl-opt{padding:12px 14px;font-size:14px;min-height:48px;}
    .vl-opt-key{width:30px;height:30px;font-size:12px;border-radius:7px;}

    /* Nav — single row on mobile */
    .vl-q-nav{flex-direction:row;gap:8px;padding:10px 16px;align-items:center;}
    .vl-q-nav-left{flex:1;min-width:0;gap:8px;}
    .vl-q-nav-dots{max-width:none;flex:1;justify-content:center;}
    .vl-q-counter{display:none;}
    .vl-prog-lbl{display:none;}
    .vl-nav-btn{padding:10px 16px;font-size:14px;}
    .vl-nav-btn.next-btn{padding:10px 20px;white-space:nowrap;}
    #vl-btn-submit{min-width:0;padding:10px 16px;font-size:14px;}
    #vl-quiz-player{padding-bottom:80px;}

    /* Results */
    .vl-score-hero{padding:28px 16px;border-radius:16px;}
    .vl-results-title{font-size:24px;}
    .vl-score-num{font-size:34px;}
    .vl-results-actions{flex-direction:column;align-items:stretch;}
    .vl-results-actions .vl-bo,.vl-results-actions .vl-bp{text-align:center;}
    .vl-fb-ans-label{min-width:90px;}

    /* App CTAs */
    .vl-app-cta{flex-direction:column;padding:20px 18px;border-radius:14px;}
    .vl-app-cta-btns{width:100%;}
    .vl-app-cta-btns .vl-store-btn{flex:1;justify-content:center;}
    .vl-app-hero{padding:32px 18px;border-radius:16px;}
    .vl-app-hero h2{font-size:clamp(20px,5vw,28px);}
    .vl-app-hero p{font-size:15px;}
    .vl-app-hero-feats{gap:14px;}
    .vl-app-strip{flex-direction:column;align-items:flex-start;gap:12px;}
    .vl-app-strip-links{width:100%;gap:8px;}
    .vl-app-strip-links a{flex:1;text-align:center;padding:9px 10px;}

    /* Section headers */
    .vl-sec-hdr{margin:28px 0 14px;}
    .vl-sec-hdr h2{font-size:17px;}
}

/* Phone (≤ 480px) */
@media(max-width:560px){
    .vl-app-promo{flex-direction:column;gap:12px;padding:18px;}
    .vl-app-promo-links .vl-store-btn{flex:1;justify-content:center;}
    .vl-sec-hdr{flex-wrap:wrap;}
    .vl-sec-all{margin-left:0;width:100%;}
}

@media(max-width:480px){
    .container{padding:0 14px;}
    .vl-page{padding:20px 0 50px;}
    .vl-grid{grid-template-columns:1fr;}
    .vl-hero h1{font-size:clamp(24px,7vw,32px);}
    .vl-hero-stats{flex-wrap:wrap;gap:16px 24px;}

    /* Tabs compact */
    .vl-tab{padding:11px 13px;font-size:13px;gap:6px;}
    .vl-tn{padding:2px 7px;font-size:10px;}

    /* Cards */
    .vl-card{padding:16px 16px 14px;}
    .vl-sc2{padding:18px 16px 16px;}
    .vl-start-btn{padding:8px 12px;font-size:12px;}

    /* Player */
    .vl-qblock{padding:16px 13px;}
    .vl-qtext{font-size:15px;margin-bottom:18px;}
    .vl-opt{padding:11px 12px;gap:10px;font-size:14px;}
    .vl-opt-key{width:28px;height:28px;font-size:11px;border-radius:6px;}
    .vl-qnum{font-size:10px;}
    .vl-quiz-header{padding:18px 16px 16px;}
    .vl-ptit{font-size:17px;}

    /* Nav */
    .vl-q-nav{padding:10px 12px;}
    .vl-q-dot{width:8px;height:8px;}
    .vl-nav-btn{padding:9px 13px;font-size:13px;}
    .vl-nav-btn.next-btn{padding:9px 16px;}
    #vl-btn-submit{padding:9px 13px;font-size:13px;}

    /* Buttons full-width */
    .vl-bp,.vl-bo{width:100%;text-align:center;padding:14px 16px;font-size:15px;}
    .vl-results-actions{gap:10px;}

    /* Score ring */
    .vl-score-ring{width:120px;height:120px;}
    .vl-score-ring svg{width:120px;height:120px;}
    .vl-score-num{font-size:30px;}

    /* App CTA */
    .vl-app-cta-icon{width:44px;height:44px;border-radius:11px;}
    .vl-app-cta-text strong{font-size:15px;}
    .vl-app-hero-btns{flex-direction:column;gap:10px;}
    .vl-app-hero-btns .vl-store-btn{width:100%;justify-content:center;padding:14px 20px;}
    .vl-store-btn{font-size:13px;}

    /* Review items */
    .vl-fb-qtxt{padding:13px 16px 10px;font-size:14px;}
    .vl-fb-answers{padding:0 16px 14px;}
    .vl-fb-ans-label{min-width:80px;font-size:10px;}
    .vl-fb-ans-val{font-size:13px;}
    .vl-fb-exp{margin:0 16px 14px;}
    .vl-fb-header{padding:12px 16px;}
    .vl-bc{font-size:12px;}
}

/* Very small phones (≤ 360px) */
@media(max-width:360px){
    .container{padding:0 12px;}
    .vl-page{padding:16px 0 44px;}
    .vl-hero h1{font-size:22px;}
    .vl-tab{padding:10px 11px;font-size:12px;}
    .vl-qtext{font-size:14px;}
}