/* ══════════════════════════════════════
   DESIGN TOKENS — exact match main.html
══════════════════════════════════════ */
:root{
  --bg:#E7DFD2;
  --card:#FBF8F1;
  --card2:#F4EEE3;
  --border:#D8CDB8;
  --border2:#C9BEA9;
  --ink:#1C1A18;
  --caution:#8C7B52;
  --danger:#B33A3A;
  --success:#4C6B4C;
  --text:#1C1A18;
  --text-dim:#6B6459;
  --text-muted:#948A76;
  --fh:'Playfair Display',serif;
  --fb:'Inter',sans-serif;
  --fm:'JetBrains Mono',monospace;
  --r:8px;
  --r-lg:14px;
  --sb:270px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:var(--fb);font-size:14px;line-height:1.6;background:var(--bg);color:var(--text);overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
::selection{background:var(--ink);color:var(--card);}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
::-webkit-scrollbar-track{background:var(--bg);}

/* ══════════════════════════════════════
   LOADER
══════════════════════════════════════ */
#loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  transition:opacity .6s ease,transform .6s ease;
  /* Failsafe: force this off-screen after 7s even if JS never runs
     (e.g. a slow/blocked external resource stalls window 'load'). */
  animation:forceHideLoader 0s linear 7s forwards;
}
#loader.hide{opacity:0;transform:scale(1.03);pointer-events:none;}
@keyframes forceHideLoader{to{opacity:0;visibility:hidden;pointer-events:none;}}

/* Spinner rings — warm palette */
.loader-rings{
  position:relative;width:96px;height:96px;
  display:flex;align-items:center;justify-content:center;
}
.loader-ring{
  position:absolute;border-radius:50%;border:2.5px solid transparent;
  animation:ringRotate linear infinite;
}
.loader-ring:nth-child(1){
  width:96px;height:96px;
  border-top-color:var(--ink);border-right-color:var(--ink);
  animation-duration:1.5s;
}
.loader-ring:nth-child(2){
  width:72px;height:72px;
  border-bottom-color:var(--caution);border-left-color:var(--caution);
  animation-duration:1.1s;animation-direction:reverse;
}
.loader-ring:nth-child(3){
  width:48px;height:48px;
  border-top-color:var(--border2);border-right-color:var(--border2);
  animation-duration:0.75s;
}
@keyframes ringRotate{to{transform:rotate(360deg);}}

/* PX core inside spinner */
.loader-core{
  position:relative;z-index:2;
  font-family:var(--fh);font-weight:800;font-size:14px;
  color:var(--ink);letter-spacing:1px;
  animation:corePulse 1.5s ease-in-out infinite;
}
@keyframes corePulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.6;transform:scale(.92);}}

.loader-title{
  font-family:var(--fh);font-weight:800;font-size:26px;
  color:var(--ink);letter-spacing:2px;text-align:center;line-height:1.3;
}
.loader-sub{
  font-family:var(--fm);font-size:10px;color:var(--text-muted);
  letter-spacing:3px;text-transform:uppercase;text-align:center;margin-top:6px;
}
.loader-bar-wrap{width:200px;height:2px;background:var(--border);border-radius:2px;overflow:hidden;}
.loader-bar{
  height:100%;width:0;background:var(--ink);
  border-radius:2px;animation:loadFill 5s ease-out forwards;
}
@keyframes loadFill{0%{width:0;}30%{width:35%;}60%{width:65%;}85%{width:88%;}100%{width:100%;}}
.loader-pct{
  font-family:var(--fm);font-size:9.5px;color:var(--text-muted);
  letter-spacing:2px;text-align:center;
}
.loader-dots{display:flex;gap:7px;justify-content:center;}
.loader-dot{
  width:6px;height:6px;border-radius:50%;background:var(--border2);
  animation:dotBlink 1.4s ease-in-out infinite;
}
.loader-dot:nth-child(1){background:var(--ink);animation-delay:0s;}
.loader-dot:nth-child(2){background:var(--caution);animation-delay:.2s;}
.loader-dot:nth-child(3){background:var(--border2);animation-delay:.4s;}
.loader-dot:nth-child(4){animation-delay:.6s;}
.loader-dot:nth-child(5){animation-delay:.8s;}
@keyframes dotBlink{0%,80%,100%{transform:scale(1);opacity:.4;}40%{transform:scale(1.6);opacity:1;}}

.powered{
  position:absolute;bottom:22px;
  font-family:var(--fm);font-size:9.5px;letter-spacing:1.5px;
  color:var(--text-muted);text-align:center;text-transform:uppercase;
}
.powered b{color:var(--caution);font-weight:500;}

/* ══════════════════════════════════════
   (popup removed)
══════════════════════════════════════ */
/* corner brackets — reused across cards */
.corner{position:absolute;width:14px;height:14px;}
.corner-tl{top:10px;left:10px;border-top:2px solid var(--caution);border-left:2px solid var(--caution);}
.corner-tr{top:10px;right:10px;border-top:2px solid var(--caution);border-right:2px solid var(--caution);}
.corner-bl{bottom:10px;left:10px;border-bottom:2px solid var(--border2);border-left:2px solid var(--border2);}
.corner-br{bottom:10px;right:10px;border-bottom:2px solid var(--border2);border-right:2px solid var(--border2);}

/* ══════════════════════════════════════
   APP
   Rendered immediately (never display:none) so a slow/blocked external
   resource (fonts, Twitter widget, etc.) can never leave the page blank —
   the loader below is just an overlay sitting on top of it.
══════════════════════════════════════ */
#app{display:block;min-height:100vh;}

/* ── TOPBAR — glass, elevated, professional ── */
.topbar{
  position:fixed;top:0;left:0;right:0;height:60px;
  background:rgba(251,248,241,0.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border2);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;z-index:600;
  box-shadow:0 8px 24px -18px rgba(28,26,24,0.35);
}
.topbar-left{display:flex;align-items:center;gap:14px;}
.hamburger{
  width:22px;height:15px;display:flex;flex-direction:column;
  justify-content:space-between;cursor:pointer;flex-shrink:0;
}
.hamburger span{display:block;height:1.5px;background:var(--ink);border-radius:2px;transition:.3s;}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.topbar-brand{display:flex;align-items:center;gap:11px;text-decoration:none;cursor:pointer;background:none;border:none;padding:0;}
.topbar-logo{
  width:34px;height:34px;border-radius:9px;position:relative;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,var(--ink) 0%,#3a352e 100%);
  color:var(--card);display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-weight:800;font-size:12.5px;letter-spacing:.5px;
  box-shadow:0 2px 8px rgba(28,26,24,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.topbar-logo::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(140,123,82,0.4),transparent 60%);}
.topbar-title-wrap{display:flex;flex-direction:column;line-height:1.18;text-align:left;}
.topbar-title{font-family:var(--fh);font-weight:800;font-size:16px;letter-spacing:.3px;color:var(--ink);}
.topbar-tagline{font-family:var(--fm);font-size:8.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);}
.topbar-nav{display:flex;align-items:center;gap:2px;}
.topbar-nav a{
  position:relative;font-family:var(--fm);font-size:11px;letter-spacing:.6px;
  text-decoration:none;color:var(--text-dim);padding:9px 14px;border-radius:8px;
  transition:color .18s,background .18s;
}
.topbar-nav a::after{
  content:'';position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
  background:var(--caution);transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
}
.topbar-nav a:hover{color:var(--ink);background:var(--card2);}
.topbar-nav a.active{color:var(--ink);font-weight:700;}
.topbar-nav a.active::after{transform:scaleX(1);}
@media(max-width:680px){.topbar-nav{display:none;}}

/* ── SIDEBAR OVERLAY ── */
.sb-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(28,26,24,.35);z-index:690;
  transition:opacity .2s;
}
.sb-overlay.show{display:block;}

/* ── SIDEBAR — exact from main.html ── */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sb);max-width:82vw;
  background:var(--card);border-right:1px solid var(--border2);
  z-index:700;transform:translateX(-100%);transition:transform .25s ease;
  display:flex;flex-direction:column;overflow-y:auto;
}
.sidebar.open{transform:translateX(0);}
.sidebar-head{
  padding:20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.sidebar-head-text{text-align:left;}
.sidebar-close{margin-left:auto;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;font-size:16px;flex-shrink:0;transition:.15s;}
.sidebar-close:hover{background:var(--card2);color:var(--ink);}
.sidebar-brand{font-family:var(--fh);font-weight:800;font-size:18px;margin-bottom:4px;}
.sidebar-sub{font-family:var(--fm);font-size:10px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;}
.sidebar-nav{flex:1;padding:12px;display:flex;flex-direction:column;gap:4px;}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:9px;background:none;border:none;
  font-family:var(--fb);font-size:14px;font-weight:600;color:var(--ink);
  cursor:pointer;text-align:left;width:100%;transition:.15s;
}
a.nav-item{text-decoration:none;}
.nav-item i{width:18px;text-align:center;color:var(--caution);}
.nav-item:hover{background:var(--card2);}
.nav-item.active{background:var(--ink);color:var(--card);}
.nav-item.active i{color:var(--card);}
.nav-num{margin-left:auto;font-family:var(--fm);font-size:9.5px;color:var(--text-muted);transition:.15s;}
.nav-item.active .nav-num{color:rgba(251,248,241,.5);}
.nav-item-game{margin-top:8px;border-top:1px dashed var(--border);padding-top:16px;}

/* ── while sidebar is open: lock background scroll, hide the topbar ── */
body.sb-open{overflow:hidden;}
body.sb-open .topbar{opacity:0;pointer-events:none;}
.topbar{transition:opacity .15s ease;}

/* ── MAIN ── */
.main{margin-top:60px;margin-left:auto;margin-right:auto;padding:24px 18px 80px;width:100%;max-width:680px;}
@media(min-width:700px){.main{padding:28px 32px 80px;}}
@media(min-width:1024px){.main{padding:32px 40px 80px;}}
.section{display:none;}
.section.active{display:block;animation:secReveal .4s ease;}
@keyframes secReveal{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* ── BREADCRUMB ── */
.breadcrumb{
  display:flex;align-items:center;gap:6px;margin-bottom:14px;
  font-family:var(--fm);font-size:10px;color:var(--text-muted);
  letter-spacing:.5px;flex-wrap:wrap;
}
.breadcrumb a{color:var(--text-muted);cursor:pointer;transition:.15s;}
.breadcrumb a:hover{color:var(--caution);}
.breadcrumb .sep{font-size:9px;}
.breadcrumb .current{color:var(--caution);font-weight:600;}

/* ── SECTION LABEL — exact from main.html view-sub ── */
.sec-eyebrow{
  font-family:var(--fm);font-size:10px;color:var(--text-muted);
  letter-spacing:2.5px;text-transform:uppercase;margin-bottom:6px;
  display:flex;align-items:center;gap:8px;
}
.sec-eyebrow::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── HEADINGS — Playfair Display like main.html ── */
h2.section-title{
  font-family:var(--fh);font-weight:800;font-size:24px;
  color:var(--ink);margin-bottom:6px;line-height:1.15;
}
@media(min-width:600px){h2.section-title{font-size:28px;}}
.section-sub{color:var(--text-dim);font-size:13.5px;margin-bottom:22px;line-height:1.65;}

/* ── CARD — matches main.html lb-row / modal-card style ── */
.hub-card{
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:18px;
  box-shadow:0 2px 0 var(--border);
}
.hub-card-bd{padding:20px 22px;}
.hub-card-bd p{font-size:14px;line-height:1.82;color:var(--text-dim);}
/* top accent line on card */
.hub-card-accent{height:3px;background:repeating-linear-gradient(135deg,var(--ink) 0 10px,var(--card) 10px 20px);opacity:.08;}

/* ── DASHBOARD CARDS ── */
.cards-grid{display:grid;grid-template-columns:1fr;gap:12px;}
@media(min-width:480px){.cards-grid{grid-template-columns:1fr 1fr;}}

.dash-card{
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  transition:.18s;box-shadow:0 2px 0 var(--border);
}
a.dash-card{display:block;text-decoration:none;}
.dash-card:hover{
  transform:translateY(-3px);border-color:var(--ink);
  box-shadow:0 5px 0 var(--border);
}
.dc-hd{
  background:var(--card2);border-bottom:1px solid var(--border);
  padding:14px 18px 12px;position:relative;
}
.dc-hd .corner{position:absolute;width:10px;height:10px;}
.dc-hd .corner-tl{top:7px;left:7px;border-top:1.5px solid var(--caution);border-left:1.5px solid var(--caution);}
.dc-hd .corner-tr{top:7px;right:7px;border-top:1.5px solid var(--caution);border-right:1.5px solid var(--caution);}
.card-idx{font-family:var(--fm);font-size:9px;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:3px;}
.dash-card h3{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--ink);}
.dc-bd{padding:13px 18px 14px;}
.dash-card p{font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:10px;}
.card-arr{
  font-family:var(--fm);font-size:10px;color:var(--caution);
  letter-spacing:1px;display:flex;align-items:center;gap:6px;
}
.dash-card:hover .card-arr{color:var(--ink);}
.dash-card h3 i{margin-right:6px;color:var(--ink);}
.dash-card-game .card-arr{color:var(--ink);}

/* ── NESTED BUTTONS — like pick-card from main.html ── */
.nested-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:16px 0;}
@media(min-width:500px){.nested-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:780px){.nested-grid{grid-template-columns:repeat(3,1fr);}}

.nested-btn{
  background:var(--card);border:2px solid var(--border2);color:var(--ink);
  padding:13px 8px;border-radius:var(--r-lg);cursor:pointer;
  font-family:var(--fm);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;
  text-align:center;transition:.15s;
}
.nested-btn:hover{border-color:var(--caution);background:var(--card2);}
.nested-btn.active{border-color:var(--ink);background:var(--ink);color:var(--card);}

/* ── NESTED DETAIL (inline, topbar stays) ── */
#whatis-overview.hidden{display:none;}
.nested-detail{display:none;}
.nested-detail.show{display:block;animation:secReveal .35s ease;}

/* back button — .btn.ghost style from main.html */
.nd-back{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;
  background:transparent;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:var(--r);
  font-family:var(--fh);font-size:12px;font-weight:700;
  letter-spacing:1px;cursor:pointer;margin-bottom:20px;transition:.15s;
}
.nd-back:hover{background:var(--ink);color:var(--card);}

.nd-eyebrow{
  font-family:var(--fm);font-size:9.5px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;
}
.nd-title{
  font-family:var(--fh);font-weight:800;font-size:22px;
  color:var(--ink);margin-bottom:0;line-height:1.2;
}
@media(min-width:600px){.nd-title{font-size:26px;}}
.nd-rule{
  width:100%;height:1px;background:var(--border);margin:16px 0;
}
.nd-body{font-size:14px;line-height:1.85;color:var(--text-dim);}
.nd-body p{margin-bottom:16px;}
.nd-body p:last-child{margin-bottom:0;}
.nd-body h4{
  font-family:var(--fh);font-weight:800;font-size:15px;
  color:var(--ink);margin:22px 0 10px;line-height:1.3;
}
.nd-body h4:first-child{margin-top:0;}
.nd-note{
  background:var(--card2);border:1px solid var(--border2);
  border-left:3px solid var(--caution);border-radius:var(--r);
  padding:13px 15px;margin-top:18px;font-size:13.5px;line-height:1.7;
}
.nd-note strong{color:var(--ink);}
.nd-video{
  position:relative;width:100%;padding-top:56.25%;
  margin:18px 0;border-radius:var(--r-lg);overflow:hidden;background:#000;
}
.nd-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}

/* ── EVENTS ── */
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.tab-btn{
  padding:8px 16px;border-radius:20px;
  border:1.5px solid var(--border2);background:var(--card);
  color:var(--text-dim);cursor:pointer;font-size:11px;
  font-family:var(--fm);letter-spacing:1px;text-transform:uppercase;transition:.15s;
}
.tab-btn.active{background:var(--ink);color:var(--card);border-color:var(--ink);}
.tab-btn:hover:not(.active){border-color:var(--ink);color:var(--ink);}
.tab-content{display:none;}
.tab-content.active{display:block;animation:secReveal .3s ease;}

.event-card{
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--r-lg);padding:16px 18px;margin-bottom:10px;
  border-left:3px solid var(--border2);transition:.15s;
  box-shadow:0 1px 0 var(--border);
}
.event-card:hover{border-left-color:var(--caution);box-shadow:0 3px 0 var(--border);}
.event-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:4px;}
.event-top h4{font-family:var(--fh);color:var(--ink);font-size:15px;font-weight:700;padding-top:7px;margin-bottom:0;}
.event-card h4{font-family:var(--fh);color:var(--ink);font-size:15px;margin-bottom:4px;font-weight:700;}
.event-date{font-family:var(--fm);font-size:10px;color:var(--caution);margin-bottom:8px;letter-spacing:1px;}
.event-card p{font-size:13.5px;color:var(--text-dim);line-height:1.7;}
.event-img{width:100%;max-height:220px;object-fit:cover;border-radius:var(--r);margin-bottom:12px;display:block;}
.empty-note{color:var(--text-muted);font-size:11px;padding:12px 0;font-family:var(--fm);}

/* ── BRAND KIT ── */
.bk-card{
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 2px 0 var(--border);
}
.bk-top-stripe{height:3px;background:repeating-linear-gradient(135deg,var(--ink) 0 10px,var(--card) 10px 20px);opacity:.1;}
.bk-inner{padding:0 22px;}
.bk-block{border-bottom:1px solid var(--border);padding:22px 0;}
.bk-block:last-child{border-bottom:none;padding-bottom:26px;}
.bk-num{font-family:var(--fm);font-size:9px;letter-spacing:2.5px;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;}
.bk-heading{
  font-family:var(--fh);font-size:17px;font-weight:800;
  color:var(--ink);margin-bottom:11px;line-height:1.25;
}
@media(min-width:600px){.bk-heading{font-size:19px;}}
.bk-rule{width:28px;height:2px;background:var(--caution);margin-bottom:13px;}
.bk-body{font-size:14px;line-height:1.88;color:var(--text-dim);}
.bk-body p{margin-bottom:13px;}
.bk-body p:last-child{margin-bottom:0;}
.bk-body strong{color:var(--ink);font-weight:600;}
.bk-quote{
  border-left:3px solid var(--caution);padding:13px 18px;margin:14px 0;
  background:var(--card2);border-radius:0 var(--r) var(--r) 0;
  font-family:var(--fh);font-size:15px;color:var(--ink);
  font-weight:700;line-height:1.5;
}
@media(min-width:600px){.bk-quote{font-size:17px;}}
.bk-list{list-style:none;margin:0 0 13px 0;padding:0;}
.bk-list li{display:flex;align-items:center;gap:4px;padding:5px 0;border-bottom:1px dashed var(--border);}
.bk-list li:last-child{border-bottom:none;}
.bk-swatch{display:inline-block;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border2);margin-right:8px;flex-shrink:0;}

/* btn-shell style — exact from main.html */
.btn-shell{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;background:var(--ink);color:var(--card);
  border:none;border-radius:var(--r);
  font-family:var(--fh);font-size:11px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  cursor:pointer;box-shadow:0 3px 0 #000;
  margin-top:10px;transition:.15s;
}
.btn-shell:hover{transform:translateY(-1px);box-shadow:0 4px 0 #000;}
.btn-shell:active{transform:translateY(2px);box-shadow:0 1px 0 #000;}

/* ── CONTRIBUTIONS ── */
.contrib-card{
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--r-lg);padding:18px 20px;margin-bottom:14px;
  box-shadow:0 2px 0 var(--border);transition:.15s;
}
.contrib-card:hover{box-shadow:0 4px 0 var(--border);transform:translateY(-2px);}
.contrib-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px;}
.serial-badge{
  font-family:var(--fh);color:var(--ink);font-size:14px;font-weight:800;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1.5px solid var(--ink);margin-top:2px;
}
.contrib-top h4{font-family:var(--fh);color:var(--ink);font-size:15px;font-weight:700;padding-top:7px;}
.contrib-sub{font-size:13px;color:var(--text-dim);margin-bottom:12px;line-height:1.65;}
/* btn-shell ghost variant */
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;background:transparent;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:var(--r);
  font-family:var(--fh);font-size:10.5px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  cursor:pointer;transition:.15s;
}
.btn-ghost:hover{background:var(--ink);color:var(--card);}

@media(max-width:360px){
  .loader-title{font-size:20px;}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}}
.site-footer{position:relative;z-index:1;margin-top:8px;border-top:1px solid var(--border);background:var(--card);}
.sf-inner{max-width:920px;margin:0 auto;padding:28px 24px 20px;}
.sf-top{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--border);}
.sf-brand{display:flex;align-items:center;gap:10px;}
.sf-logo{width:34px;height:34px;border-radius:8px;background:var(--ink);color:var(--card);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:800;font-size:13px;flex-shrink:0;}
.sf-brand-name{font-family:var(--fh);font-weight:800;font-size:14px;color:var(--ink);letter-spacing:.5px;}
.sf-brand-sub{font-family:var(--fm);font-size:9px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;}
.sf-links{display:flex;flex-wrap:wrap;gap:8px 20px;}
.sf-links a{font-family:var(--fm);font-size:11px;letter-spacing:.5px;color:var(--text-dim);text-decoration:none;transition:color .15s;}
.sf-links a:hover{color:var(--caution);}
.sf-bottom{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;padding-top:14px;font-family:var(--fm);font-size:9.5px;color:var(--text-muted);letter-spacing:.5px;}
.sf-dev b{color:var(--caution);font-weight:600;}
@media(max-width:640px){.sf-top,.sf-bottom{flex-direction:column;align-items:flex-start;}}