@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --bg:#f4f6fb;
  --bg-panel:#ffffff;
  --ink:#1b2140;
  --ink-soft:#667085;
  --line:#e3e7f4;

  /* primary accent — indigo/blue, matches bastlrk.com's #4C6EF5 */
  --brass:#4C6EF5;
  --brass-dark:#3b56d9;

  /* secondary accent — deep navy, used for secondary buttons / cta band */
  --steel:#1f2a55;
  --steel-soft:#eef1fc;

  --success:#2f9e44;
  --success-soft:#e7f6ec;
  --danger:#e03131;
  --danger-soft:#fdecec;

  --radius:12px;
  --font-display:'Poppins','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);line-height:1.6;
  text-align:justify;text-justify:inter-word;
}
p,li,blockquote,td,dd,.founder-quote,.hero p.lead{text-align:justify;text-justify:inter-word}
a{color:var(--brass)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;margin:0 0 .5em;line-height:1.2}
p{margin:0 0 1em}
img{max-width:100%}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

.container{max-width:1080px;margin:0 auto;padding:0 1.25rem}
.narrow{max-width:640px}

/* ── small recurring dot marker ── */
.bump{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brass);margin-right:.5em;position:relative;top:-2px}

/* ── Header / nav ───────────────────────────────────────────── */
.site-header{background:var(--steel);color:#f2f4fb;position:sticky;top:0;z-index:50;border-bottom:3px solid var(--brass)}
@media (max-width:900px){.site-header{position:static}}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:.85rem;padding-bottom:.85rem;flex-wrap:wrap;gap:.6rem}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:#fff;text-decoration:none;display:flex;align-items:center;gap:.6rem}
.brand .keycap-mini{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:var(--brass);color:#fff;border-radius:50%;font-family:var(--font-display);font-weight:700;font-size:.9rem;box-shadow:0 0 0 3px rgba(76,110,245,.25)}
.nav-links{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-links a{color:#cdd3ec;text-decoration:none;font-size:.95rem;font-weight:500}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff;font-weight:600}
.nav-links li{position:relative}
.nav-links li.has-dropdown > a::after{content:' \25BE';font-size:.7em}
.dropdown-menu{
  display:none;position:absolute;top:100%;left:0;min-width:200px;
  background:var(--bg-panel);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 12px 30px rgba(27,33,64,.15);padding:.4rem;margin-top:.6rem;z-index:60
}
.nav-links li.has-dropdown:hover .dropdown-menu,
.nav-links li.has-dropdown:focus-within .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:.5rem .7rem;border-radius:6px;color:var(--ink) !important;font-size:.9rem}
.dropdown-menu a:hover{background:var(--steel-soft);color:var(--brass-dark) !important}
@media (max-width:900px){
  .dropdown-menu{position:static;display:block;box-shadow:none;border:none;background:transparent;margin:.2rem 0 .2rem 1rem;padding:0}
  .nav-links li.has-dropdown > a::after{display:none}
}
/* ── Top nav (icon links, active underline, dropdown, mobile panel) ── */
.header-inner{display:flex;align-items:center;gap:1rem;padding:.6rem 0;flex-wrap:wrap;position:relative}
.hamburger-btn{background:transparent;border:none;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;padding:.2rem .5rem;display:none;order:2}
.top-nav{display:flex;align-items:center;gap:.15rem;flex:1;flex-wrap:wrap;order:3}
.top-nav .side-link{display:flex;align-items:center;gap:.4rem;color:#cdd3ec;text-decoration:none;padding:.5rem .7rem;border-radius:8px;font-size:.9rem;font-weight:500;position:relative;white-space:nowrap}
.top-nav .side-link .ic{font-size:1rem}
.top-nav .side-link:hover{background:rgba(255,255,255,.08);color:#fff}
.top-nav .side-link.active{color:#fff;font-weight:600}
.top-nav .side-link.active::after{content:'';position:absolute;left:.7rem;right:.7rem;bottom:1px;height:3px;background:var(--brass);border-radius:3px}
.has-dropdown{position:relative}
.has-dropdown > .side-link::before{content:' \25BE';font-size:.7em;margin-left:-.1rem}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu{display:block}
.header-actions{display:flex;align-items:center;gap:.6rem;margin-left:auto;order:4}
.staff-login-link{color:#cdd3ec;text-decoration:none;font-size:.8rem;font-weight:600;white-space:nowrap;padding-left:.6rem;border-left:1px solid rgba(255,255,255,.15)}
.staff-login-link:hover{color:#fff}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(10,13,30,.4);z-index:45}
.nav-backdrop.show{display:block}

@media (max-width:960px){
  .hamburger-btn{display:inline-flex;align-items:center}
  .top-nav{
    display:none;flex-direction:column;align-items:stretch;width:100%;order:5;
    background:var(--steel);border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 16px 34px rgba(0,0,0,.35);padding:.5rem;margin-top:.5rem;
    position:absolute;top:100%;left:0;z-index:50
  }
  .top-nav.open{display:flex}
  .top-nav .side-link.active::after{display:none}
  .top-nav .side-link.active{background:rgba(76,110,245,.18)}
  .has-dropdown .dropdown-menu{position:static;display:block;box-shadow:none;border:none;background:transparent;margin:.2rem 0 .2rem 1.2rem;padding:0}
  .header-actions .site-search{display:none}
}

/* ── Top utility bar (contact + search), sits above the main nav ──── */
.site-topbar{background:#141a35;color:#aab0d6;font-size:.8rem;padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.topbar-contact{display:flex;gap:1.2rem;flex-wrap:wrap}
.topbar-contact a{color:#aab0d6;text-decoration:none}
.topbar-contact a:hover{color:#fff}
@media (max-width:700px){.topbar-contact{display:none}}

.site-search{display:flex;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:8px;overflow:hidden}
.site-search input{background:transparent;border:none;color:#fff;padding:.35rem .7rem;font-size:.8rem;width:200px;font-family:var(--font-body)}
.site-search input::placeholder{color:#8f97c4}
.site-search input:focus{outline:none}
.site-search button{background:transparent;border:none;color:#cdd3ec;padding:.35rem .6rem;cursor:pointer;font-size:.9rem}
.site-search button:hover{color:#fff}
@media (max-width:520px){.site-search input{width:120px}}

.topbar-staff-link{color:#cdd3ec;text-decoration:none;font-size:.8rem;font-weight:600;white-space:nowrap;padding-left:.4rem;border-left:1px solid rgba(255,255,255,.15)}
.topbar-staff-link:hover{color:#fff}
.topbar-auth{display:flex;gap:.5rem;align-items:center;padding-left:.6rem;border-left:1px solid rgba(255,255,255,.15)}
@media (max-width:700px){.topbar-staff-link{border-left:none;padding-left:0}.topbar-auth{border-left:none;padding-left:0}}

.nav-actions{display:flex;gap:.6rem;align-items:center}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:.95rem;padding:.68rem 1.35rem;border-radius:8px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .08s ease, box-shadow .08s ease, background .15s ease}
.btn:active{transform:translateY(1px)}
.btn-brass{background:var(--brass);color:#fff;box-shadow:0 3px 0 var(--brass-dark)}
.btn-brass:hover{background:var(--brass-dark)}
.btn-brass:active{box-shadow:0 1px 0 var(--brass-dark)}
.btn-steel{background:var(--steel);color:#fff;box-shadow:0 3px 0 #101630}
.btn-steel:active{box-shadow:0 1px 0 #101630}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:.38rem .85rem;font-size:.82rem;border-radius:6px}
.btn-block{display:block;width:100%;text-align:center}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{background:linear-gradient(160deg,#141a35,#1b2140 55%,#26306b);color:#f2f4fb;padding:4rem 0 3.5rem;overflow:hidden}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center}
.hero h1{font-size:2.6rem;color:#fff}
.hero h1 span{color:#8fa3ff}
.hero p.lead{font-size:1.1rem;color:#c3c9e6;max-width:44ch}
.hero-ctas{display:flex;gap:.8rem;margin-top:1.6rem;flex-wrap:wrap}

.keyrow{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.key{
  width:44px;height:44px;border-radius:7px;background:#232a52;border-bottom:3px solid #12162e;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;color:#9aa3d6;
  animation:press 2.4s ease-in-out infinite;
}
.key-wrap{position:relative}
.key .dot{position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;background:var(--brass)}
@keyframes press{
  0%,72%,100%{transform:translateY(0);background:#232a52;color:#9aa3d6;border-bottom-color:#12162e}
  78%{transform:translateY(3px);background:var(--brass);color:#fff;border-bottom-color:var(--brass-dark)}
  88%{transform:translateY(0);background:#232a52;color:#9aa3d6;border-bottom-color:#12162e}
}
.hero-keyboard{background:#10132b;border-radius:16px;padding:1.6rem 1.2rem;border:1px solid #262d57}
.hero-keyboard .caption{text-align:center;color:#7d84ab;font-family:var(--font-mono);font-size:.78rem;margin-top:1rem;letter-spacing:.04em}

/* ── Sections / cards ───────────────────────────────────────── */
.section{padding:3.2rem 0}
.section-head{max-width:640px;margin-bottom:2rem}
.section-head .eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--brass-dark)}
.eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--brass-dark);display:inline-block;margin-bottom:.4em}
.grid{display:grid;gap:1.2rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.grid-3,.grid-2{grid-template-columns:1fr}.hero .container{grid-template-columns:1fr}.hero h1{font-size:2.1rem}}

.card{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:0 1px 2px rgba(27,33,64,.04)}
.card h3{font-size:1.12rem}
.feature-num{font-family:var(--font-mono);color:var(--brass-dark);font-weight:600;font-size:.85rem;margin-bottom:.4rem;display:block}

.cta-band{background:var(--brass);color:#fff;padding:2.6rem 0;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:#e4e9ff}

/* ── Forms ──────────────────────────────────────────────────── */
.auth-wrap{max-width:420px;margin:3rem auto;background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;box-shadow:0 1px 2px rgba(27,33,64,.04)}
.auth-wrap h1{font-size:1.6rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.35rem}
.field input,.field textarea,.field select{
  width:100%;padding:.65rem .75rem;border:1px solid var(--line);border-radius:8px;font-size:.95rem;font-family:var(--font-body);background:#fbfcff;color:var(--ink)
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brass);background:#fff}
.field textarea{resize:vertical}
.field small{color:var(--ink-soft);display:block;margin-top:.3rem;font-size:.82rem}
.alert{padding:.8rem 1rem;border-radius:8px;margin-bottom:1.2rem;font-size:.92rem}
.alert-error{background:var(--danger-soft);color:var(--danger);border:1px solid #f3cccc}
.alert-success{background:var(--success-soft);color:var(--success);border:1px solid #bfe6c9}
.alert-info{background:var(--steel-soft);color:var(--brass-dark);border:1px solid #cfd8fb}
.form-foot{margin-top:1rem;font-size:.9rem;color:var(--ink-soft);text-align:center}

/* ── Message / status pages ────────────────────────────────── */
.status-wrap{max-width:520px;margin:4rem auto;text-align:center;background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:2.4rem}

/* ── Dashboard / sidebar ────────────────────────────────────── */
.app-layout{display:grid;grid-template-columns:260px 1fr;gap:1.5rem;padding:2rem 0}
@media (max-width:860px){.app-layout{grid-template-columns:1fr}}
.sidebar{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;align-self:start}
.sidebar h4{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:.7rem}
.signup-count{font-family:var(--font-mono);font-size:2rem;font-weight:600;color:var(--brass-dark)}
.lesson-list{list-style:none;margin:0;padding:0}
.lesson-list li{padding:.55rem .4rem;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.55rem;font-size:.92rem}
.lesson-list li:last-child{border-bottom:none}
.lesson-list .tick{color:var(--success);font-weight:700}
.lesson-list .lock{color:var(--ink-soft)}
.lesson-list a{text-decoration:none;color:var(--ink)}
.lesson-list a:hover{color:var(--brass)}

.progress-bar{background:#e5e9f7;border-radius:99px;height:10px;overflow:hidden;margin:.5rem 0 1.2rem}
.progress-bar > div{background:var(--brass);height:100%}

/* ── Ad slot ────────────────────────────────────────────────── */
.ad-slot{
  background:repeating-linear-gradient(45deg,#eef1fc,#eef1fc 10px,#e3e7f7 10px,#e3e7f7 20px);
  border:1px dashed var(--line);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);font-size:.78rem;font-family:var(--font-mono);
  min-height:90px;margin:1.4rem 0;text-align:center;padding:.5rem
}

/* ── Lesson typing UI ───────────────────────────────────────── */
.lesson-panel{background:var(--bg-panel);border:1px solid var(--line);border-radius:14px;padding:1.4rem}
.lesson-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem}
.stat-row{display:flex;gap:1.6rem;font-family:var(--font-mono);font-size:.85rem;color:var(--ink-soft);margin-bottom:1rem}
.stat-row b{color:var(--ink);font-size:1.05rem}
.type-target{font-family:var(--font-mono);font-size:1.5rem;letter-spacing:.02em;padding:1rem 1.1rem;background:#f8f9fe;border:1px solid var(--line);border-radius:8px;margin-bottom:.9rem;word-break:break-all}
.type-target .ch{padding:1px 0}
.type-target .ch.correct{color:var(--success);background:var(--success-soft)}
.type-target .ch.wrong{color:#fff;background:var(--danger)}
.type-target .ch.current{border-bottom:2px solid var(--brass)}
.type-input{width:100%;font-family:var(--font-mono);font-size:1.2rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:8px;margin-bottom:1rem}

.keyboard-section{margin-top:1.2rem}
.finger-legend{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:.7rem;font-size:.75rem;color:var(--ink-soft)}
.fl-item{display:flex;align-items:center;gap:.3rem}
.fl-dot{width:10px;height:10px;border-radius:50%}
.kb-row{display:flex;gap:5px;margin-bottom:5px;justify-content:center}
.k{min-width:34px;height:34px;border-radius:6px;background:#eef1fc;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-family:var(--font-mono);border-bottom:2px solid #d7ddf5;color:var(--ink)}
.k.wide{min-width:52px}.k.wider{min-width:64px}.k.widest{min-width:80px}.k.space{min-width:220px}
.k.active-key{background:var(--brass);color:#fff;border-bottom-color:var(--brass-dark)}
.k.home-dot{position:relative}
.k.home-dot::after{content:'';position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:#9aa3d6}
.hands-row{display:flex;justify-content:space-between;margin-top:.4rem;font-size:.75rem;color:var(--ink-soft);font-family:var(--font-mono)}

.video-slot{margin:1.2rem 0}
.video-slot iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:8px}
.video-slot .no-video{background:#f8f9fe;border:1px dashed var(--line);border-radius:8px;padding:1.5rem;text-align:center;color:var(--ink-soft);font-size:.88rem}

/* ── Certificate (legacy fallback block, certificate.php now uses its own inline styles) ── */
.certificate{background:#fffef9;border:10px solid var(--brass);border-radius:4px;padding:3rem 2rem;text-align:center;max-width:760px;margin:2rem auto}
.certificate .cert-title{font-family:var(--font-display);font-size:2rem;color:var(--brass-dark);letter-spacing:.03em}
.certificate .cert-name{font-size:1.9rem;font-family:var(--font-display);margin:1rem 0;border-bottom:2px solid var(--line);display:inline-block;padding-bottom:.3rem}

/* ── Tables (admin) ─────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table.admin{width:100%;border-collapse:collapse;font-size:.88rem;background:var(--bg-panel)}
table.admin th,table.admin td{padding:.55rem .7rem;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
table.admin th{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.badge{display:inline-block;padding:.15rem .5rem;border-radius:99px;font-size:.72rem;font-weight:600}
.badge-green{background:var(--success-soft);color:var(--success)}
.badge-gray{background:#eceef7;color:var(--ink-soft)}
.badge-red{background:var(--danger-soft);color:var(--danger)}
.tabs{display:flex;gap:.4rem;margin-bottom:1.2rem;flex-wrap:wrap}
.tab-btn{padding:.5rem 1rem;border-radius:8px;background:var(--bg-panel);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:.88rem;font-weight:600}
.admin-section{margin-bottom:2.4rem}
form.inline{display:inline}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer{background:var(--steel);color:#c3c9e6;padding:2.6rem 0 1.6rem;margin-top:3rem;font-size:.88rem}
.site-footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.6rem}
.site-footer a{color:#e4e7f7;text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-col h5{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;color:#8f97c4;margin-bottom:.7rem}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:1.8rem;padding-top:1.2rem;text-align:center;font-size:.8rem;color:#8f97c4}

/* ── Spam honeypot field — hidden from real users, bots often still fill it ── */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0}

/* ── Advocate verification badge + star ratings ───────────────────── */
.verified-badge{display:inline-flex;align-items:center;gap:.25rem;background:var(--success-soft);color:var(--success);font-size:.72rem;font-weight:700;padding:.15rem .5rem;border-radius:99px}
.star-rating{color:#f0ad00;letter-spacing:1px;font-size:.95rem}
.star-rating .star-empty{color:#dcdfec}
.rating-count{color:var(--ink-soft);font-size:.8rem}
.review-card{border-bottom:1px solid var(--line);padding:.9rem 0}
.review-card:last-child{border-bottom:none}
.review-stars{color:#f0ad00;font-size:.85rem}

/* ── Subscription status badge (dashboard top-right) ─────────────── */
.sub-badge{display:inline-block;padding:.35rem .8rem;border-radius:99px;font-size:.78rem;font-weight:700;background:var(--success-soft);color:var(--success);text-decoration:none;white-space:nowrap}
.sub-badge-warn{background:#fff3d6;color:#a56a00}
.sub-badge-overdue{background:var(--danger-soft);color:var(--danger)}
.sub-badge-unlimited{background:var(--steel-soft);color:var(--brass-dark)}

/* ── YouTube click-to-play facade ─────────────────────────────────── */
.yt-facade{position:relative;cursor:pointer;border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:#000}
.yt-facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.yt-facade:hover img{opacity:1}
.yt-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;background:rgba(20,20,20,.75);border-radius:14px;display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.yt-facade:hover .yt-play-btn{background:#ff0000}
.yt-play-btn::after{content:'';border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff;margin-left:4px}
.yt-facade iframe{width:100%;height:100%;border:0;display:block}

/* ── Admin panel: sidebar shell ─────────────────────────────── */
.admin-body{background:var(--bg)}
.admin-topbar{background:#141a35;color:#fff;padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:60;border-bottom:3px solid var(--brass)}
.admin-brand{color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.1rem;display:flex;align-items:center;gap:.6rem}
.admin-brand-tag{background:var(--brass);color:#fff;font-size:.7rem;font-weight:600;padding:.15rem .5rem;border-radius:5px;letter-spacing:.03em}

.admin-shell{display:flex;align-items:flex-start;min-height:calc(100vh - 58px)}
.admin-sidebar{
  width:230px;flex-shrink:0;background:#1b2140;min-height:calc(100vh - 58px);
  position:sticky;top:58px;padding:1.2rem 0;display:flex;flex-direction:column;gap:.15rem
}
.admin-sidebar a{
  color:#c3c9e6;text-decoration:none;font-size:.88rem;font-weight:500;
  padding:.65rem 1.3rem;display:flex;align-items:center;gap:.55rem;justify-content:space-between;
  border-left:3px solid transparent
}
.admin-sidebar a:hover{background:rgba(255,255,255,.06);color:#fff}
.side-count{background:rgba(255,255,255,.12);color:#dfe2f5;font-size:.72rem;font-weight:700;padding:.05rem .45rem;border-radius:99px;margin-left:auto}
.side-count-alert{background:var(--brass);color:#fff}

.admin-content{flex:1;min-width:0;padding:2rem 2.2rem}
@media (max-width:900px){
  .admin-shell{flex-direction:column}
  .admin-sidebar{width:100%;position:static;flex-direction:row;flex-wrap:wrap;min-height:auto;padding:.6rem}
  .admin-sidebar a{border-left:none;border-radius:6px;padding:.45rem .7rem}
  .admin-content{padding:1.3rem}
}

.admin-section{margin-bottom:2.6rem;scroll-margin-top:75px}
.admin-section h2{border-bottom:2px solid var(--line);padding-bottom:.5rem;margin-bottom:1.2rem}

/* ── Homepage: large full-width photo slider (one photo at a time) ── */
.hero-slider{position:relative;width:100%;height:440px;overflow:hidden;background:#0e1230}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.hero-slide.active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block;background:#0e1230}
.hero-slide-caption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);color:#fff;font-size:1.15rem;font-weight:700;padding:2.2rem 1.5rem 1.1rem}
.hero-slider-dots{position:absolute;bottom:14px;right:20px;display:flex;gap:.4rem;z-index:2}
.hero-dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;padding:0}
.hero-dot.active{background:#fff}
@media (max-width:700px){.hero-slider{height:230px}.hero-slide-caption{font-size:.92rem;padding:1.6rem 1rem .8rem}}

/* ── Homepage: scrolling news ticker (TV-channel style, left to right) ── */
.news-ticker{background:var(--brass);color:#fff;display:flex;align-items:center;overflow:hidden}
.news-ticker-label{flex:0 0 auto;background:var(--brass-dark);padding:.55rem 1rem;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;display:flex;align-items:center;gap:.4rem}
.news-ticker-viewport{flex:1;overflow:hidden;position:relative;height:2.1rem}
.news-ticker-track{position:absolute;top:0;white-space:nowrap;display:inline-block;animation:jlh-ticker 22s linear infinite;transform:translateX(-100%)}
.news-ticker-track a{color:#fff;text-decoration:none;font-size:.88rem;font-weight:600;padding:.55rem 0;display:inline-block}
.news-ticker-track a:hover{text-decoration:underline}
.news-ticker:hover .news-ticker-track{animation-play-state:paused}
@keyframes jlh-ticker{from{transform:translateX(-100%)}to{transform:translateX(100vw)}}

/* ── Advocate photo gallery ───────────────────────────────────────── */
.photo-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.9rem}
.photo-gallery-item{position:relative;display:block;border-radius:10px;overflow:hidden;aspect-ratio:1/1;text-decoration:none}
.photo-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.photo-gallery-item:hover img{transform:scale(1.06)}
.photo-gallery-caption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);color:#fff;font-size:.8rem;font-weight:600;padding:1.6rem .6rem .5rem;text-align:center}

/* ── Homepage: quick-access tiles, connected directly under the slider, one row ── */
.quick-access{display:flex;gap:1rem;margin-top:-2.6rem;position:relative;z-index:3;flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem}
.quick-access .qa-tile{flex:1 1 0;min-width:120px}
@media (max-width:900px){.quick-access{flex-wrap:wrap;overflow-x:visible;margin-top:1.4rem}.quick-access .qa-tile{flex:1 1 calc(33.33% - 1rem)}}
@media (max-width:520px){.quick-access .qa-tile{flex:1 1 calc(50% - 1rem)}}
.qa-tile{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1rem;text-align:center;text-decoration:none;color:var(--ink);box-shadow:0 10px 30px rgba(27,33,64,.08);display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:transform .12s ease, box-shadow .12s ease}
.qa-tile:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(27,33,64,.14);border-color:var(--brass)}
.qa-icon{font-size:1.6rem;width:52px;height:52px;border-radius:50%;background:var(--steel-soft);display:flex;align-items:center;justify-content:center;color:var(--brass)}
.qa-label{font-size:.85rem;font-weight:600}

/* ── Homepage: stat counters ────────────────────────────────── */
.stats-row{display:flex;justify-content:space-around;flex-wrap:wrap;gap:1.5rem;background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;margin-top:-3.2rem;position:relative;z-index:2;box-shadow:0 10px 30px rgba(27,33,64,.1)}
.stat-item{text-align:center;min-width:110px}
.stat-num{font-family:var(--font-display);font-size:2.1rem;font-weight:700;color:var(--brass)}
.stat-lbl{font-size:.76rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem}
@media (max-width:700px){.stats-row{margin-top:1.5rem}}

/* ── Homepage: About photo fallback ─────────────────────────── */
.about-photo-fallback{width:100%;aspect-ratio:4/3;border-radius:var(--radius);background:linear-gradient(155deg,var(--brass),var(--brass-dark));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-size:1.3rem;font-weight:700;text-align:center;padding:1.5rem}

/* ── Homepage: Founder's message ─────────────────────────────── */
.founder-block{display:grid;grid-template-columns:200px 1fr;gap:2rem;align-items:center;background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:2rem}
@media (max-width:700px){.founder-block{grid-template-columns:1fr;text-align:center}}
.founder-photo{width:170px;height:170px;border-radius:50%;object-fit:cover;margin:0 auto;display:block;border:4px solid var(--steel-soft)}
.founder-photo-fallback{width:170px;height:170px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;background:var(--steel-soft);color:var(--brass-dark);font-family:var(--font-display);font-weight:700;font-size:2.8rem}
.founder-quote{font-size:1.05rem;line-height:1.75;color:var(--ink);position:relative;padding-left:1.2rem;border-left:3px solid var(--brass)}
.founder-name{margin-top:1rem;font-weight:700}
.founder-title{color:var(--ink-soft);font-size:.86rem}

/* ── Homepage: Downloads ─────────────────────────────────────── */
.downloads-list{list-style:none;margin:0;padding:0}
.downloads-list li{display:flex;justify-content:space-between;align-items:center;padding:.7rem .9rem;border-bottom:1px solid var(--line);font-size:.92rem;gap:1rem}
.downloads-list li:last-child{border-bottom:none}
.downloads-locked{color:var(--ink-soft)}

/* ── Split-panel auth pages (login / signup) ─────────────────── */
.authpage{margin:0;min-height:100vh;background:var(--steel)}
.split-auth{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
@media (max-width:900px){.split-auth{grid-template-columns:1fr}}

.split-auth-brand{
  background:linear-gradient(155deg,var(--brass) 0%,var(--brass-dark) 55%,#1b2140 100%);
  color:#fff;display:flex;align-items:center;padding:3rem;position:relative;overflow:hidden
}
.split-auth-brand-inner{max-width:420px;position:relative;z-index:1}
.split-auth-brand .brand{margin-bottom:1.6rem}
.split-auth-brand .keycap-mini{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);color:#fff;box-shadow:none}
.split-auth-brand h1{color:#fff;font-size:2.1rem;margin-top:0}
.split-auth-brand p{color:rgba(255,255,255,.86);font-size:1rem}
.split-auth-points{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem;font-size:.92rem;color:#fff}
.split-auth-points .bump{background:#fff}

.split-auth-form{background:var(--bg-panel);display:flex;align-items:center;justify-content:center;padding:2.5rem 1.5rem}
.split-auth-form-inner{max-width:380px;width:100%}
.back-link{display:inline-block;font-size:.85rem;color:var(--ink-soft);text-decoration:none;margin-bottom:1.8rem}
.back-link:hover{color:var(--brass)}
.split-auth-form-inner h2{font-size:1.7rem;margin-bottom:.2rem}
.split-auth-sub{color:var(--ink-soft);margin-bottom:1.6rem}
@media (max-width:900px){.split-auth-brand{padding:2.2rem 1.5rem;min-height:240px}}

/* ── Homepage: top utility bar ─────────────────────────────────── */
.topbar{background:#10132b;color:#8f97c4;font-size:.78rem;padding:.45rem 0}
.topbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem}
.topbar a{color:#c3c9e6;text-decoration:none}
.topbar a:hover{color:#fff}

/* ── Homepage: stats bar under the hero ────────────────────────── */
.stats-bar{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 30px rgba(27,33,64,.08);margin:-2.6rem auto 0;max-width:960px;position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding:1.4rem 1rem}
.stats-bar .stat{padding:.4rem}
.stats-bar .stat b{display:block;font-family:var(--font-display);font-size:1.9rem;color:var(--brass)}
.stats-bar .stat span{font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
@media (max-width:700px){.stats-bar{grid-template-columns:repeat(2,1fr);gap:1.2rem 0}}

/* ── Homepage: photo marquee ("photos running") ────────────────── */
.avatar-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.avatar-marquee-track{display:flex;gap:1.4rem;width:max-content;animation:marquee 28s linear infinite;padding:.5rem 0}
.avatar-marquee-track:hover{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.avatar-chip{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:104px;text-align:center;flex:0 0 auto}
.avatar-chip img,.avatar-chip .avatar-fallback{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid var(--steel-soft)}
.avatar-chip .avatar-fallback{display:flex;align-items:center;justify-content:center;background:var(--steel-soft);color:var(--brass-dark);font-weight:700;font-family:var(--font-display);font-size:1.3rem}
.avatar-chip span{font-size:.76rem;color:var(--ink-soft);line-height:1.3}
.avatar-chip strong{font-size:.82rem;color:var(--ink);display:block}

/* ── Homepage: About split ─────────────────────────────────────── */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center}
@media (max-width:820px){.about-split{grid-template-columns:1fr}}
.about-visual{background:linear-gradient(155deg,var(--brass),var(--brass-dark) 60%,#1b2140);border-radius:16px;min-height:260px;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:2rem}
.about-visual .keycap-mini{width:56px;height:56px;font-size:1.6rem;margin:0 auto 1rem;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4)}

/* ── Homepage: founder / leadership quote ──────────────────────── */
.quote-block{display:grid;grid-template-columns:220px 1fr;gap:2rem;align-items:center;background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:2rem}
@media (max-width:700px){.quote-block{grid-template-columns:1fr;text-align:center}}
.quote-photo img,.quote-photo .avatar-fallback{width:170px;height:170px;border-radius:50%;object-fit:cover;border:4px solid var(--steel-soft);margin:0 auto;display:block}
.quote-photo .avatar-fallback{display:flex;align-items:center;justify-content:center;background:var(--steel-soft);color:var(--brass-dark);font-weight:700;font-family:var(--font-display);font-size:2.6rem}
.quote-mark{font-family:var(--font-display);font-size:2.6rem;color:var(--brass);line-height:1;display:block;margin-bottom:.2rem}
.quote-block blockquote{margin:0 0 1rem;font-size:1.05rem;color:var(--ink);font-style:italic}
.quote-sign strong{display:block;font-family:var(--font-display)}
.quote-sign span{font-size:.85rem;color:var(--ink-soft)}

/* ── Homepage: mission & vision ─────────────────────────────────── */
.mv-card{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem}
.mv-card .feature-num{margin-bottom:.6rem}

/* ── Homepage: drafts / downloads list ─────────────────────────── */
.drafts-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.drafts-list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--bg-panel);border:1px solid var(--line);border-radius:10px;padding:.9rem 1.1rem;flex-wrap:wrap}
.drafts-list .draft-title{font-weight:600}
.drafts-list .draft-desc{color:var(--ink-soft);font-size:.85rem;margin-top:.15rem}