/* ── Home page — page-specific styles ─────────────────────────────────────────
   Shared visual system (tokens, app frame, appbar, nav-cards, nc-ico colours,
   skeletons, empty states, toasts) comes from /css/design.css — the same
   stylesheet every mock page uses. This file adds the home-only pieces.   */

/* Room for the floating dock */
.exam-page-container{
    padding-bottom:calc(96px + env(safe-area-inset-bottom));
}

/* ── Boot splash — body stays hidden until home-config paints ──────────────
   A reload never flashes the empty frame: header shows instantly, the area
   below shows this branded loader until home-engine.js homeReady() fires
   (config painted from cache or fresh, or the error card). */
.boot-splash{
    display:none;
    flex:1;
    flex-direction:column; align-items:center; justify-content:center; gap:10px;
    background:var(--bg);
    padding:40px 20px calc(40px + env(safe-area-inset-bottom));
    text-align:center;
}
body.home-booting .boot-splash{ display:flex; }
body.home-booting .screen-scroll{ display:none; }
body.home-booting .ex-dock,
body.home-booting .fab-container{ display:none; }
.bs-mark{
    width:64px; height:64px; border-radius:18px;
    background:var(--grad-primary); color:#fff;
    display:grid; place-items:center;
    box-shadow:0 10px 26px rgba(61,90,254,.35);
    animation:bs-pulse 1.1s ease-in-out infinite;
}
.bs-mark svg{ width:32px; height:32px; }
.bs-title{ margin-top:6px; font-size:17px; font-weight:800; letter-spacing:-.2px; color:var(--text); }
.bs-spin{
    width:22px; height:22px; margin-top:8px; border-radius:50%;
    border:2.5px solid var(--border-strong); border-top-color:var(--primary);
    animation:bs-spin .8s linear infinite;
}
.bs-text{ font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--text-3); }
@keyframes bs-spin{ to{ transform:rotate(360deg); } }
@keyframes bs-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
/* dark users: html.dark-mode is set by the anti-flash head script before
   first paint (body.dark-mode only lands at DOMContentLoaded) */
html.dark-mode .boot-splash{ background:#0a0f1e; }
html.dark-mode .bs-title{ color:#eef1fb; }
html.dark-mode .bs-text{ color:#6d7898; }
html.dark-mode .bs-spin{ border-color:#31406a; border-top-color:#5b74ff; }
@media (prefers-reduced-motion:reduce){
    .bs-mark{ animation:none; }
    .bs-spin{ animation-duration:1.6s; }
}

/* ── Header extras ──────────────────────────────────────────────────────── */
.brand-logo-img{
    width:100%; height:100%;
    object-fit:cover;
    border-radius:11px;
    display:block;
    background:var(--surface-2);
}
.avatar-chip{
    width:36px; height:36px;
    border-radius:12px;
    border:1.5px solid var(--primary);
    background:var(--primary-soft);
    color:var(--primary);
    font-size:14px; font-weight:800;
    display:grid; place-items:center;
    cursor:pointer; padding:0;
}
.avatar-chip:active{ transform:scale(.9); }
.login-chip{
    display:inline-flex; align-items:center;
    height:32px; padding:0 14px;
    border-radius:999px;
    background:var(--grad-primary);
    color:#fff; text-decoration:none;
    font-size:11px; font-weight:800; letter-spacing:.6px;
    box-shadow:0 5px 14px rgba(61,90,254,.32);
}
.login-chip:active{ transform:scale(.95); }
.notif-wrap{ position:relative; }
.notif-badge-dot{
    position:absolute; top:-3px; right:-4px;
    min-width:15px; height:15px;
    padding:0 3px;
    border-radius:999px;
    background:var(--red, #e11d48);
    color:#fff;
    font-size:8.5px; font-weight:800;
    display:none;
    align-items:center; justify-content:center;
    line-height:1;
}

/* ── Greeting ─────────────────────────────────────────────────────────────── */
.home-greeting{ margin:2px 2px 14px; }
.home-greeting .hg-title{
    font-size:19px; font-weight:800; letter-spacing:-.3px; color:var(--text);
}
.home-greeting .hg-title span{ color:var(--primary); }
.home-greeting .hg-sub{
    margin-top:2px;
    font-size:10px; font-weight:800; letter-spacing:1.1px;
    text-transform:uppercase; color:var(--text-3);
}

/* ── Hero — live stats board + Premium/Partner CTAs ─────────────────────────
   (Replaces the old banner carousel.)
   · Stats numbers come from home-config.json "stats" (static file today —
     point it at a live API later; markup/animation stays the same).
   · "Upgrade to Premium" renders only for FREE users (engine-gated).
   · Partner button is indigo→violet — deliberately NOT green.            */
.home-hero{ margin:0 2px 16px; }

.hero-board{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:12px; }
@media (min-width:768px){
    .hero-board{ grid-template-columns:repeat(4,1fr); }
}
.hero-tile{
    position:relative; overflow:hidden;
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; padding:12px;
    box-shadow:var(--shadow-card);
}
.hero-tile-live{
    position:absolute; top:11px; right:11px;
    width:7px; height:7px; border-radius:50%;
    background:#22c55e;
    animation:heroPulse 1.8s infinite;
}
@keyframes heroPulse{
    0%{ box-shadow:0 0 0 0 rgba(34,197,94,.45); }
    70%{ box-shadow:0 0 0 7px rgba(34,197,94,0); }
    100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
.hero-tile-ico{
    width:30px; height:30px; border-radius:9px;
    display:grid; place-items:center; margin-bottom:9px;
}
.hero-tile-ico svg{ width:15px; height:15px; }
.hero-tile.blue   .hero-tile-ico{ background:var(--primary-soft); color:var(--primary); }
.hero-tile.violet .hero-tile-ico{ background:var(--indigo-soft);  color:var(--indigo); }
.hero-tile.amber  .hero-tile-ico{ background:var(--amber-soft);   color:var(--amber-strong); }
.hero-tile.teal   .hero-tile-ico{ background:rgba(13,148,136,.12); color:#0d9488; }
.hero-tile.slate  .hero-tile-ico{ background:rgba(100,116,139,.14); color:#64748b; }
body.dark-mode .hero-tile.teal  .hero-tile-ico{ color:#2dd4bf; }
body.dark-mode .hero-tile.slate .hero-tile-ico{ color:#94a3b8; }
body.dark-mode .hero-tile.amber .hero-tile-ico{ color:#fbbf24; }
.hero-tile-num{
    display:block;
    font-size:21px; font-weight:800; line-height:1.1;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(90deg,var(--primary),#7c3aed);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-tile.amber .hero-tile-num{ background:linear-gradient(90deg,#f59e0b,#ea580c); -webkit-background-clip:text; background-clip:text; }
.hero-tile.teal  .hero-tile-num{ background:linear-gradient(90deg,#0d9488,#059669); -webkit-background-clip:text; background-clip:text; }
.hero-tile.slate .hero-tile-num{ background:linear-gradient(90deg,#64748b,#475569); -webkit-background-clip:text; background-clip:text; }
.hero-tile-lab{
    display:block; margin-top:3px;
    font-size:9px; font-weight:700; letter-spacing:.6px;
    text-transform:uppercase; color:var(--text-3);
}

.hero-ctas{ display:flex; flex-direction:column; gap:10px; }
.hero-cta{
    position:relative; overflow:hidden;
    display:flex; align-items:center; gap:12px;
    padding:14px 16px; border-radius:16px;
    text-decoration:none; color:#fff;
    transition:transform .15s ease;
}
.hero-cta:active{ transform:scale(.98); }
@media (hover:hover){
    .hero-cta:hover{ transform:translateY(-2px); }
}
.hero-cta-premium{
    background:linear-gradient(120deg,#fbbf24 0%,#f59e0b 40%,#ea580c 100%);
    box-shadow:0 10px 26px rgba(234,88,12,.35);
}
/* Partner — indigo→violet (NOT green, per design decision) */
.hero-cta-partner{
    background:linear-gradient(120deg,#6366f1 0%,#4f46e5 55%,#7c3aed 100%);
    box-shadow:0 10px 26px rgba(79,70,229,.35);
}
.hero-cta-ico{
    width:40px; height:40px; border-radius:13px;
    background:rgba(255,255,255,.2);
    display:grid; place-items:center; flex-shrink:0;
}
.hero-cta-ico svg{ width:20px; height:20px; }
.hero-cta-txt{ min-width:0; }
.hero-cta-title{ display:block; font-size:14.5px; font-weight:800; }
.hero-cta-sub{
    display:block; margin-top:2px;
    font-size:10.5px; font-weight:600; color:rgba(255,255,255,.88);
}
.hero-cta-go{ margin-left:auto; opacity:.9; flex-shrink:0; }
.hero-cta-go svg{ width:18px; height:18px; }
.hero-shine{
    position:absolute; top:0; left:-60%;
    width:45%; height:100%; pointer-events:none;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);
    transform:skewX(-20deg);
    animation:heroShine 4s ease-in-out infinite;
}
@keyframes heroShine{
    0%,55%{ left:-60%; }
    100%{ left:135%; }
}

/* SEO h1 — real heading for crawlers/screen readers, visually hidden */
.sr-only{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── What's New marquee ───────────────────────────────────────────────────── */
.whats-new-section{ margin:0 2px 16px; display:none; }
.whats-new-heading{
    display:flex; align-items:center; gap:7px;
    font-size:11px; font-weight:800; letter-spacing:1px;
    color:var(--primary); text-transform:uppercase;
    margin-bottom:8px;
}
.whats-new-heading svg{ width:14px; height:14px; }
.whats-new-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:4px 0;
    box-shadow:var(--shadow-card);
    overflow:hidden;
}
.whats-new-row{ overflow:hidden; padding:7px 14px; }
.whats-new-row + .whats-new-row{ border-top:1px solid var(--border); }
.whats-new-track{
    display:inline-flex; align-items:center; gap:8px;
    white-space:nowrap;
    will-change:transform;
}
@keyframes whatsNewMarquee{
    from{ transform:translateX(var(--wn-start, 100%)); }
    to  { transform:translateX(var(--wn-end, -100%)); }
}
.whats-new-link{
    color:var(--text); text-decoration:none;
    font-size:12px; font-weight:600;
}
.whats-new-date{
    font-size:10px; font-weight:700; color:var(--text-3);
    font-variant-numeric:tabular-nums;
}

/* ── Quick-action tiles (config buttons) ──────────────────────────────────── */
.action-container{ margin:0 0 18px; }
/* quick-action tiles: 1 per row on phones → 2 → 3 → 4 as screens grow */
.action-row{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}
@media (min-width:576px){  .action-row{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:992px){  .action-row{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1400px){ .action-row{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.home-tile{
    display:flex; align-items:center; gap:11px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:13px 12px;
    text-decoration:none; color:inherit;
    box-shadow:var(--shadow-card);
    transition:transform .12s ease, border-color .15s ease, box-shadow .15s ease;
    min-width:0;
}
.home-tile:active{ transform:scale(.97); border-color:var(--border-strong); }
@media (hover:hover){ .home-tile:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-pop); } }
.home-tile .nc-ico{ width:40px; height:40px; }
.ht-body{ flex:1; min-width:0; }
.ht-title{
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    font-size:12px; font-weight:700; letter-spacing:.1px;
    color:var(--text);
}
.home-tile .nc-chev svg{ width:16px; height:16px; }
.home-tile.skeleton-nav-card{ cursor:default; }

/* badge variants (design.css ships .new/.soon via exams pages; home adds .free) */
.nc-badge{
    display:inline-block;
    font-size:8.5px; font-weight:800; letter-spacing:.7px;
    text-transform:uppercase;
    padding:3px 7px; border-radius:999px; line-height:1; white-space:nowrap;
}
.nc-badge.new { background:var(--emerald-soft); color:var(--emerald-strong); }
.nc-badge.free{ background:var(--emerald-soft); color:var(--emerald-strong); }
body.dark-mode .nc-badge.new, body.dark-mode .nc-badge.free{ color:#34d399; }
@keyframes badgeBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.nc-badge.new{ animation:badgeBlink 1.6s ease-in-out infinite; }

/* ── Recommended series ───────────────────────────────────────────────────── */
.rec-section{ margin:0 2px 18px; }
.section-header{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:10px;
}
.section-header h3{
    margin:0;
    font-size:12px; font-weight:800; letter-spacing:1.1px;
    color:var(--text-2); text-transform:uppercase;
}
.view-all-btn{
    font-size:11px; font-weight:800; letter-spacing:.5px;
    color:var(--primary); text-decoration:none;
}
.rec-grid{ display:flex; flex-direction:column; }
@media (min-width:760px){
    .rec-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
    .rec-grid .nav-card{ margin-bottom:0; }
}
.rec-grid .nc-logo{
    width:100%; height:100%; object-fit:cover; border-radius:12px; display:block;
}

/* ── Tagline + footer ─────────────────────────────────────────────────────── */
.tagline{
    text-align:center;
    margin:22px 0 10px;
    font-size:10px; font-weight:800; letter-spacing:2.4px;
    color:var(--text-3); text-transform:uppercase;
}
.home-footer{
    border-top:1px solid var(--border);
    background:var(--surface);
    padding:18px 16px calc(14px + env(safe-area-inset-bottom));
    text-align:center;
}
.home-footer .hf-links{
    display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px;
    margin-bottom:8px;
}
.home-footer a{
    color:var(--primary); text-decoration:none;
    font-size:11.5px; font-weight:700;
}
.home-footer p{ margin:0; font-size:10.5px; font-weight:600; color:var(--text-3); }

/* ── Social FABs ──────────────────────────────────────────────────────────── */
.fab-container{
    position:fixed; right:14px;
    bottom:calc(96px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; gap:10px; z-index:1100;
}
.fab{
    width:46px; height:46px; border-radius:50%;
    display:grid; place-items:center;
    color:#fff; text-decoration:none;
    box-shadow:0 10px 24px rgba(2,6,23,.28);
}
.fab svg{ width:21px; height:21px; }
.fab-wa{ background:linear-gradient(135deg,#2fe274,#128c7e); }   /* WhatsApp brand */
.fab-tg{ background:linear-gradient(135deg,#2aabee,#229ed9); }   /* Telegram brand */
.fab:active{ transform:scale(.92); }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar-overlay{
    position:fixed; inset:0; z-index:1400;
    background:rgba(2,6,23,.5);
    display:none;
}
.sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:1500;
    width:min(82vw, 300px);
    background:var(--surface);
    border-right:1px solid var(--border);
    transform:translateX(-102%);
    transition:transform .26s cubic-bezier(.22,1,.36,1);
    display:flex; flex-direction:column;
    padding-top:env(safe-area-inset-top, 0px);
}
.sidebar.show{ transform:none; box-shadow:0 0 60px rgba(2,6,23,.35); }
.sidebar-header{
    display:flex; align-items:center; gap:12px;
    padding:18px 18px 14px;
    border-bottom:1px solid var(--border);
}
.user-avatar-circle{
    width:44px; height:44px; border-radius:50%;
    background:var(--grad-primary); color:#fff;
    display:grid; place-items:center; flex-shrink:0;
}
.user-avatar-circle svg{ width:20px; height:20px; }
.sidebar-header h6{ margin:0; font-size:14px; font-weight:800; color:var(--text); }
.plan-badge{
    display:inline-block; margin-top:4px;
    font-size:8.5px; font-weight:800; letter-spacing:.7px;
    padding:3px 8px; border-radius:999px;
}
.plan-badge.pro { background:var(--amber-soft); color:var(--amber-strong); }
.plan-badge.free{ background:var(--surface-2); color:var(--text-2); border:1px solid var(--border); }
.sidebar-scroll{ flex:1; overflow-y:auto; padding:10px 12px; }
.menu-item{
    display:flex; align-items:center; gap:12px;
    padding:11px 12px; margin-bottom:2px;
    border-radius:12px;
    color:var(--text-2); text-decoration:none;
    font-size:13px; font-weight:600;
}
.menu-item svg{ width:18px; height:18px; flex-shrink:0; color:var(--text-3); }
.menu-item:active{ background:var(--surface-2); }
/* hover / focus: soft light rounded box around the item (app feel) */
@media (hover:hover){
    .menu-item:hover{
        background:var(--surface-2);
        box-shadow:inset 0 0 0 1px var(--border);
    }
}
/* matching icon colours (same palette family as the tiles) */
.menu-item svg.c-blue  { color:var(--primary); }
.menu-item svg.c-violet{ color:var(--indigo, #4f46e5); }
.menu-item svg.c-rose  { color:var(--red, #e11d48); }
.menu-item svg.c-amber { color:var(--amber-strong); }
.menu-item svg.c-teal  { color:#0d9488; }
.menu-item svg.c-sky   { color:#0284c7; }
.menu-item svg.c-indigo{ color:#4f46e5; }
.menu-item svg.c-tg    { color:#0088cc; }
.menu-item svg.c-slate { color:#64748b; }
body.dark-mode .menu-item svg.c-blue  { color:var(--primary); }
body.dark-mode .menu-item svg.c-violet,
body.dark-mode .menu-item svg.c-indigo{ color:#818cf8; }
body.dark-mode .menu-item svg.c-rose  { color:#fb7185; }
body.dark-mode .menu-item svg.c-amber { color:#fbbf24; }
body.dark-mode .menu-item svg.c-teal  { color:#2dd4bf; }
body.dark-mode .menu-item svg.c-sky,
body.dark-mode .menu-item svg.c-tg    { color:#38bdf8; }
body.dark-mode .menu-item svg.c-slate { color:#94a3b8; }
.menu-item.pro-btn{ color:var(--amber-strong); }
.menu-item.pro-btn svg{ color:var(--amber-strong); }
.menu-item.admin-btn{ color:var(--red, #e11d48); }
.menu-item.admin-btn svg{ color:var(--red, #e11d48); }
.sidebar-divider{ height:1px; background:var(--border); margin:8px 4px; }
#sidebarInstallBtn{
    display:none;
    align-items:center; gap:10px;
    width:100%;
    margin:6px 0 2px;
    padding:11px 12px;
    border:1.5px dashed var(--primary);
    border-radius:12px;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:12.5px; font-weight:800;
    cursor:pointer;
}
#sidebarInstallBtn svg{ width:17px; height:17px; }
.sidebar .logout-btn{
    width:100%;
    border:1px solid var(--red, #e11d48);
    background:transparent; color:var(--red, #e11d48);
    font-size:12.5px; font-weight:800;
    padding:10px; border-radius:12px; cursor:pointer;
    margin-top:14px;
}

/* ── Modals (install / popups) ────────────────────────────────────────────── */
.install-modal, .sidebar-overlay.modal-center{
    position:fixed; inset:0; z-index:2000;
    display:none; align-items:center; justify-content:center;
    background:rgba(2,6,23,.55);
    padding:0 18px;
}
.install-modal{ flex-direction:column; }
.install-content{
    width:min(100%, 340px);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:24px 20px;
    text-align:center;
    box-shadow:var(--shadow-pop);
}
.install-app-icon{ width:64px; height:64px; border-radius:16px; margin-bottom:12px; }
.install-content h3{ margin:0 0 6px; font-size:17px; font-weight:800; color:var(--text); }
.install-content p{ margin:0 0 16px; font-size:12.5px; font-weight:500; color:var(--text-2); }
.install-actions{ display:grid; gap:8px; }
.btn-install-now{
    border:none; cursor:pointer;
    background:var(--grad-primary); color:#fff;
    font-size:13px; font-weight:800;
    padding:12px; border-radius:12px;
}
.btn-install-cancel{
    border:1px solid var(--border); cursor:pointer;
    background:transparent; color:var(--text-2);
    font-size:12.5px; font-weight:700;
    padding:10px; border-radius:12px;
}
.home-modal-box{
    width:min(100%, 350px);
    background:var(--surface);
    border:2px solid var(--primary);
    border-radius:20px;
    padding:24px 20px;
    text-align:center;
    box-shadow:var(--shadow-pop);
}
.home-modal-ico{
    width:56px; height:56px; margin:0 auto 12px;
    border-radius:16px;
    background:var(--primary-soft); color:var(--primary);
    display:grid; place-items:center;
}
.home-modal-ico svg{ width:26px; height:26px; }
.home-modal-box h5{ margin:0 0 6px; font-size:16px; font-weight:800; color:var(--text); }
.home-modal-box p{ margin:0 0 16px; font-size:12.5px; font-weight:500; color:var(--text-2); }
.home-modal-actions{ display:grid; gap:8px; }
.home-modal-btn{
    display:block; text-align:center; text-decoration:none;
    font-size:13px; font-weight:800;
    padding:11px; border-radius:12px; cursor:pointer;
}
.home-modal-btn.primary{ background:var(--grad-primary); color:#fff; }
.home-modal-btn.ghost{ border:1px solid var(--border); background:transparent; color:var(--text-2); }

/* ── Retry button (config error state) ────────────────────────────────────── */
.retry-btn{
    margin-top:14px;
    border:none; cursor:pointer;
    background:var(--grad-primary); color:#fff;
    font-size:12.5px; font-weight:700; letter-spacing:.2px;
    padding:10px 22px; border-radius:999px;
    box-shadow:0 6px 16px rgba(61,90,254,.32);
}
.retry-btn:active{ transform:scale(.96); }
.home-error{ grid-column:1 / -1; }

/* ── Android wrapper app-switch ───────────────────────────────────────────── */
.app-switch{
    display:flex; gap:8px;
    padding:8px 16px 10px;
    background:var(--surface);
}
.app-switch__btn{
    flex:1;
    display:flex; align-items:center; justify-content:center; gap:7px;
    border:1px solid var(--border); border-radius:10px;
    background:var(--surface-2); color:var(--text-2);
    font-size:11px; font-weight:800;
    padding:7px 6px; cursor:pointer;
}
.app-switch__btn img{ width:16px; height:16px; border-radius:4px; }
.app-switch__btn--active{ border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }

/* ── Bottom dock (identical to the exams page dock) ───────────────────────── */
.ex-dock{
    position:fixed;
    left:50%; transform:translateX(-50%);
    bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:1200;
    display:flex; align-items:stretch; justify-content:space-between;
    width:min(calc(100vw - 20px), 620px);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:26px;
    padding:8px 10px;
    box-shadow:0 18px 40px rgba(15,23,42,.16);
}
body.dark-mode .ex-dock{ box-shadow:0 18px 44px rgba(0,0,0,.5); }
.ex-dock-item{
    position:relative;
    flex:1; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
    gap:3px;
    padding:9px 2px 11px;
    border-radius:16px;
    color:var(--text-3); text-decoration:none;
    font-size:10px; font-weight:700; letter-spacing:.2px;
    transition:color .15s ease;
}
.ex-dock-item svg{ width:21px; height:21px; }
.ex-dock-item:active{ transform:scale(.94); }
.ex-dock-item.active{ color:var(--primary); }
.ex-dock-item.active::after{
    content:'';
    position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
    width:4px; height:4px; border-radius:50%;
    background:var(--primary);
}
.ex-dock-center{ flex:0 0 auto; justify-content:center; padding:0 8px; }
.ex-dock-fab{
    width:52px; height:52px; border-radius:50%;
    background:var(--grad-primary); color:#fff;
    display:grid; place-items:center;
    margin-top:-34px;
    box-shadow:0 0 0 5px var(--bg), 0 10px 26px rgba(61,90,254,.45);
    transition:transform .12s ease;
}
.ex-dock-fab svg{ width:22px; height:22px; }
.ex-dock-center:active .ex-dock-fab{ transform:scale(.93); }
.ex-dock-center.active .ex-dock-fab{
    box-shadow:0 0 0 5px var(--bg), 0 0 0 8px var(--primary-soft), 0 10px 26px rgba(61,90,254,.5);
}
.ex-dock-item .dock-badge{
    position:absolute; top:4px; right:calc(50% - 16px);
}
@media (max-width:379.98px){
    .ex-dock{ padding:7px 6px; border-radius:22px; }
    .ex-dock-item{ font-size:9px; padding:8px 1px 10px; }
    .ex-dock-item svg{ width:19px; height:19px; }
    .ex-dock-fab{ width:46px; height:46px; margin-top:-30px; }
    .ex-dock-fab svg{ width:20px; height:20px; }
}

/* ── Adaptive appbar — shrinks ONLY when the brand name / tagline would
   otherwise truncate ("strip") on tight screens. home-engine.js fitAppbar()
   measures real overflow and walks .appbar-fit-1…5. The header BOX never
   changes — same height, same 16px padding, same 38px icon buttons — only
   the INNER items shrink (text size/weight, icon glyphs, logo tile, chips,
   inner gaps), so the fitted state persists instead of bouncing back.
   Roomy screens: nothing applied, header exactly as designed. */
.appbar .brand-mark, .appbar .brand-title, .appbar .brand-sub,
.appbar .icon-btn, .appbar .avatar-chip, .appbar .login-chip{
    transition:width .15s ease, height .15s ease, font-size .15s ease;
}
/* While fitAppbar() measures, transitions are killed: mid-animation widths
   used to give false "it fits" reads and the fit bounced straight back. */
.appbar.appbar-measuring, .appbar.appbar-measuring *{ transition:none !important; }

/* Auto-fit ladder — the brand name / tagline are NEVER ellipsised on this
   page. fitAppbar() walks these steps (smaller size AND lighter weight)
   until the COMPLETE text fits; inner items shrink with it for extra room. */
.appbar .brand-title{ text-overflow:clip; }        /* no "…" — full text only */

/* Step 1 — text eases down + inner gaps tighten (all boxes untouched) */
.appbar.appbar-fit-1{ gap:9px; }
.appbar.appbar-fit-1 .brand{ gap:9px; }
.appbar.appbar-fit-1 .brand-title{ font-size:14.5px; }
.appbar.appbar-fit-1 .brand-sub{ font-size:9.5px; }

/* Step 2 — text steps down harder; icon GLYPHS + actions gap shrink inside
   their unchanged 38px buttons */
.appbar.appbar-fit-2{ gap:9px; }
.appbar.appbar-fit-2 .brand{ gap:9px; }
.appbar.appbar-fit-2 .icon-btn svg{ width:17px; height:17px; }
.appbar.appbar-fit-2 .appbar-actions{ gap:7px; }
.appbar.appbar-fit-2 .brand-title{ font-size:13.5px; font-weight:600; }
.appbar.appbar-fit-2 .brand-sub{ font-size:9px; font-weight:600; }

/* Step 3 — logo tile + chips join in (all still shorter than the 38px
   buttons, so the header height stays exactly the same) */
.appbar.appbar-fit-3{ gap:8px; }
.appbar.appbar-fit-3 .brand{ gap:8px; }
.appbar.appbar-fit-3 .brand-mark{ width:33px; height:33px; border-radius:10px; }
.appbar.appbar-fit-3 .brand-mark svg,
.appbar.appbar-fit-3 .brand-mark img{ width:17px; height:17px; }
.appbar.appbar-fit-3 .icon-btn svg{ width:16px; height:16px; }
.appbar.appbar-fit-3 .avatar-chip{ width:34px; height:34px; font-size:13px; }
.appbar.appbar-fit-3 .login-chip{ height:30px; padding:0 12px; font-size:10.5px; }
.appbar.appbar-fit-3 .brand-title{ font-size:12.5px; font-weight:600; letter-spacing:0; }
.appbar.appbar-fit-3 .brand-sub{ font-size:8.5px; font-weight:600; letter-spacing:.5px; }

/* Step 4 — second-deepest inner squeeze */
.appbar.appbar-fit-4{ gap:8px; }
.appbar.appbar-fit-4 .brand{ gap:8px; }
.appbar.appbar-fit-4 .brand-mark{ width:31px; height:31px; border-radius:10px; }
.appbar.appbar-fit-4 .brand-mark svg,
.appbar.appbar-fit-4 .brand-mark img{ width:16px; height:16px; }
.appbar.appbar-fit-4 .icon-btn svg{ width:15px; height:15px; }
.appbar.appbar-fit-4 .appbar-actions{ gap:6px; }
.appbar.appbar-fit-4 .avatar-chip{ width:32px; height:32px; border-radius:11px; font-size:12px; }
.appbar.appbar-fit-4 .login-chip{ height:29px; padding:0 11px; font-size:10px; }
.appbar.appbar-fit-4 .brand-title{ font-size:11.5px; font-weight:500; letter-spacing:0; }
.appbar.appbar-fit-4 .brand-sub{ font-size:8px; font-weight:500; letter-spacing:.4px; }

/* Step 5 — deepest inner squeeze on the tiniest screens */
.appbar.appbar-fit-5{ gap:7px; }
.appbar.appbar-fit-5 .brand{ gap:7px; }
.appbar.appbar-fit-5 .brand-mark{ width:29px; height:29px; border-radius:9px; }
.appbar.appbar-fit-5 .brand-mark svg,
.appbar.appbar-fit-5 .brand-mark img{ width:15px; height:15px; }
.appbar.appbar-fit-5 .icon-btn svg{ width:14px; height:14px; }
.appbar.appbar-fit-5 .appbar-actions{ gap:5px; }
.appbar.appbar-fit-5 .avatar-chip{ width:30px; height:30px; border-radius:10px; font-size:11px; }
.appbar.appbar-fit-5 .login-chip{ height:28px; padding:0 10px; font-size:9.5px; }
.appbar.appbar-fit-5 .brand-title{ font-size:10.5px; font-weight:500; letter-spacing:0; }
.appbar.appbar-fit-5 .brand-sub{ font-size:7.5px; font-weight:500; letter-spacing:.4px; }

/* absolute last resort (tiny screens): wrap instead of cutting — still no … */
.appbar.appbar-wrap .brand-title,
.appbar.appbar-wrap .brand-sub{ white-space:normal; text-overflow:clip; line-height:1.15; }

/* Shared entrance animation for the app-update and live-information surfaces. */
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popUp{
    from{ transform:translateY(18px) scale(.96); opacity:0; }
    to{ transform:none; opacity:1; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   SALE / INFORMATION POPUP — live-only, driven by /sale-information.json
   Markup is built by loadSaleInformation() in js/home-engine.js. The JSON
   supplies content plus the image box dimensions ONLY; every visual rule lives
   here, so the popup's look can never be broken from the server.
     phone    → bottom sheet that slides up from the bottom edge
     ≥768px   → centred modal
   ═══════════════════════════════════════════════════════════════════════════ */
.mmh-sale-overlay{
    position:fixed; inset:0; z-index:2900;
    display:flex; align-items:flex-end; justify-content:center;
    background:rgba(2,6,23,.58);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    opacity:0; visibility:hidden;
    transition:opacity .22s ease, visibility 0s linear .22s;
    overscroll-behavior:contain;
    touch-action:manipulation;
}
.mmh-sale-overlay.mmh-sale-open{
    opacity:1; visibility:visible;
    transition:opacity .22s ease, visibility 0s linear 0s;
}
.mmh-sale-card{
    position:relative;
    display:flex; flex-direction:column;
    box-sizing:border-box;
    width:100%;
    max-width:min(440px, 100vw);          /* always fits a narrow phone */
    max-height:min(88vh, 720px);          /* can never exceed the screen */
    margin:0;
    background:var(--surface);
    border:1px solid var(--border);
    border-bottom:none;                   /* flush with the bottom edge on phones */
    border-radius:20px 20px 0 0;
    box-shadow:var(--shadow-pop);
    overflow:hidden;
    padding-bottom:env(safe-area-inset-bottom, 0px);   /* Android/iOS gesture bar */
    transform:translateY(103%);
    transition:transform .34s cubic-bezier(.22,1,.36,1);
    will-change:transform;
}
.mmh-sale-overlay.mmh-sale-open .mmh-sale-card{ transform:translateY(0); }

/* native bottom-sheet affordance — phones only */
.mmh-sale-grab{
    flex:0 0 auto;
    width:38px; height:4px; margin:9px auto 0;
    border-radius:99px; background:var(--border-strong);
}

/* Image box: rendered ONLY when the JSON supplies a src. The picture is always
   scaled DOWN to fit (object-fit:contain) so it is never cropped or stretched,
   and min-height stops a wide banner collapsing into a thin sliver. */
.mmh-sale-imgbox{
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    box-sizing:border-box;
    width:100%; min-height:110px;
    padding:12px 14px 6px;
    overflow:hidden;
    background:var(--surface-2);
}
.mmh-sale-imgbox img{
    display:block;
    width:auto; height:auto;
    max-width:100%;
    max-height:190px;                     /* JSON maxHeight overrides inline */
    object-fit:contain;                   /* zoom down to fit — never crop */
    border-radius:12px;
}

/* Body scrolls on its own when the text is long, so the card can never overflow
   the screen and the buttons can never be pushed off it. */
.mmh-sale-body{
    flex:1 1 auto;
    min-height:0;                         /* required for scrolling in a flex column */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box;
    padding:14px 18px 6px;
    text-align:center;
}
.mmh-sale-title{
    margin:0 0 7px;
    font-size:17px; font-weight:800;
    letter-spacing:-.25px; line-height:1.26;
    color:var(--text);                    /* full strength — never the faded --text-3 */
    overflow-wrap:anywhere;
}
.mmh-sale-msg{
    margin:0;
    font-size:13.4px; font-weight:400;    /* thin + dense, full strength */
    letter-spacing:-.06px; line-height:1.42;
    color:#171e2e;
    overflow-wrap:anywhere;
}
/* Feature points — same look as the app-update "what's new" list */
.mmh-sale-points{
    margin:9px 0 0; padding:0;
    list-style:none; text-align:left;
}
.mmh-sale-points li{
    position:relative;
    margin:0 0 5px; padding-left:16px;
    font-size:13px; font-weight:400; line-height:1.42;
    color:#171e2e;
}
.mmh-sale-points li:last-child{ margin-bottom:0; }
.mmh-sale-points li::before{
    content:""; position:absolute; left:2px; top:7px;
    width:6px; height:6px; border-radius:50%;
    background:linear-gradient(135deg,#e8b64c,#c98a1b);
}

/* Two buttons, always present. The second one always hides the popup. */
.mmh-sale-actions{
    flex:0 0 auto;
    display:grid; grid-template-columns:1fr; gap:9px;
    box-sizing:border-box;
    padding:12px 16px 14px;
    border-top:1px solid var(--border);
    background:var(--surface);
}
.mmh-sale-btn{
    -webkit-appearance:none; appearance:none;
    display:flex; align-items:center; justify-content:center; gap:7px;
    box-sizing:border-box;
    width:100%; min-height:41px;           /* moderate, not chunky */
    margin:0; padding:9px 16px;
    border:1px solid transparent; border-radius:11px;
    font-family:inherit; font-size:13px; font-weight:700;
    letter-spacing:.2px; line-height:1.22; text-align:center; text-decoration:none;
    cursor:pointer; overflow-wrap:anywhere;
    transition:transform .14s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}
.mmh-sale-btn:active{ transform:scale(.975); }
.mmh-sale-btn-primary{
    background:linear-gradient(135deg,#f9d976 0%,#e9b64a 45%,#c98a1b 100%);
    color:#3a2a05;                          /* premium gold gradient, not blue */
    border-color:#b8860b;
    box-shadow:0 5px 14px rgba(201,138,27,.32), inset 0 1px 0 rgba(255,255,255,.45);
    text-shadow:0 1px 0 rgba(255,255,255,.28);
}
.mmh-sale-btn-ghost{
    background:var(--surface-2); color:var(--text);
    border-color:var(--border-strong);
}

/* ── Tablet / desktop: centred modal instead of a bottom sheet ─────────────── */
@media (min-width:768px){
    .mmh-sale-overlay{ align-items:center; padding:22px; }
    .mmh-sale-card{
        max-width:min(620px, 100%);        /* stays a bit big on desktop */
        border-bottom:1px solid var(--border);
        border-radius:20px;
        padding-bottom:0;
        opacity:0;
        transform:translateY(14px) scale(.965);
        transition:transform .26s cubic-bezier(.22,1,.36,1), opacity .22s ease;
    }
    .mmh-sale-overlay.mmh-sale-open .mmh-sale-card{ transform:none; opacity:1; }
    .mmh-sale-grab{ display:none; }
    .mmh-sale-imgbox{ min-height:120px; padding:18px 18px 4px; }
    .mmh-sale-imgbox img{ max-height:250px; }
    .mmh-sale-body{ padding:20px 22px 8px; }
    .mmh-sale-title{ font-size:19px; }
    .mmh-sale-msg{ font-size:13.8px; }
    .mmh-sale-actions{ grid-template-columns:1fr 1fr; padding:14px 22px 18px; }
}
@media (min-width:768px) and (hover:hover){
    .mmh-sale-btn-primary:hover{
        filter:brightness(1.06);
        box-shadow:0 9px 22px rgba(201,138,27,.40), inset 0 1px 0 rgba(255,255,255,.30);
    }
    .mmh-sale-btn-ghost:hover{ background:#eef1f9; }
}

/* ── Very small phones: shrink type and padding instead of overflowing ─────── */
@media (max-width:379.98px){
    .mmh-sale-imgbox{ min-height:96px; padding:10px 11px 4px; }
    .mmh-sale-body{ padding:12px 14px 4px; }
    .mmh-sale-title{ font-size:15.5px; }
    .mmh-sale-msg{ font-size:12.4px; }
    .mmh-sale-actions{ gap:8px; padding:11px 13px 12px; }
    .mmh-sale-btn{ min-height:38px; font-size:12.4px; letter-spacing:.2px; }
}

/* ── Dark mode (all other colours come from the redefined tokens) ──────────── */
body.dark-mode .mmh-sale-overlay{ background:rgba(2,6,23,.72); }
body.dark-mode .mmh-sale-msg{ color:#e6ebfa; }
body.dark-mode .mmh-sale-points li{ color:#e6ebfa; }
body.dark-mode .mmh-sale-btn-primary{
    color:#2c1f04;
    box-shadow:0 6px 18px rgba(201,138,27,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
@media (min-width:768px) and (hover:hover){
    body.dark-mode .mmh-sale-btn-ghost:hover{ background:#212c4a; }
}

/* ── Reduced motion: no slide, no fade ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
    .mmh-sale-overlay, .mmh-sale-card{ transition:none !important; }
    .mmh-sale-card{ transform:none !important; opacity:1 !important; }
}

/* background scroll lock while the popup is open */
body.mmh-sale-lock{ overflow:hidden; }