/* ═══════════════════════════════════════════════════════════
   GHOST@SYSTEM — v6 CSS
   Terminal / Phosphor / Zero-Trust Aesthetic
   Dark + Light mode support
   ═══════════════════════════════════════════════════════════ */

/* ── Dark mode (default) ─────────────────────────────────── */
:root,[data-theme="dark"] {
  --bg:      #060608;
  --bg2:     #0c0d10;
  --bg3:     #111318;
  --bg4:     #161920;
  --border:  #1e2028;
  --border2: #252830;
  --border3: #363a48;
  --amber:   #ffb000;
  --amber-d: #c87800;
  --amber-g: rgba(255,176,0,.12);
  --amber-g2:rgba(255,176,0,.05);
  --green:   #39ff14;
  --green-d: #1a9900;
  --red:     #ff2244;
  --blue:    #4da6ff;
  --cyan:    #00e5ff;
  --dim:     #3a3f4e;
  --muted:   #5c6270;
  --text:    #a8b0c0;
  --white:   #e8eaf0;
  --scan-line: rgba(255,176,0,.03);
  --grid-line: rgba(255,176,0,.025);
  --font:    'Share Tech Mono','Courier New',monospace;
  --font-vt: 'VT323',monospace;
  --font-h:  'Orbitron',monospace;
  --shadow-amber: 0 0 20px rgba(255,176,0,.25);
  --shadow-green: 0 0 20px rgba(57,255,20,.25);
  --topbar-bg: rgba(6,6,8,.97);
  --boot-bg: #060608;
}

/* ── Light mode ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg:      #f0f1f4;
  --bg2:     #e4e6ea;
  --bg3:     #d8dae0;
  --bg4:     #cdd0d8;
  --border:  #b8bcc8;
  --border2: #a0a5b5;
  --border3: #8890a4;
  --amber:   #b86000;
  --amber-d: #903c00;
  --amber-g: rgba(184,96,0,.10);
  --amber-g2:rgba(184,96,0,.05);
  --green:   #007a00;
  --green-d: #005500;
  --red:     #cc0022;
  --blue:    #0055cc;
  --cyan:    #006688;
  --dim:     #8890a4;
  --muted:   #5a6075;
  --text:    #2c3040;
  --white:   #0e1018;
  --scan-line: rgba(184,96,0,.015);
  --grid-line: rgba(184,96,0,.04);
  --shadow-amber: 0 0 20px rgba(184,96,0,.12);
  --shadow-green: 0 0 20px rgba(0,122,0,.12);
  --topbar-bg: rgba(224,226,232,.97);
  --boot-bg: #f0f1f4;
}


/* -- warm theme ------------------*/
 
/* ── WARM THEME ─────────────────────────────────────────────── */
[data-theme="warm"] {
  --bg:      #f2ece0;
  --bg2:     #ede5d6;
  --bg3:     #e6dcc8;
  --bg4:     #ddd2bc;
  --black2:  #d4c8b0;
  --black3:  #c8bba0;
  --white:   #2c1a08;
  --text:    #3d2810;
  --muted:   #7a5c38;
  --dim:     #9e7d58;
  --amber:   #b06a10;
  --amber-d: #8a5008;
  --green:   #3a6e20;
  --red:     #b03020;
  --border:  rgba(100,65,20,.15);
  --border2: rgba(100,65,20,.22);
  --border3: rgba(100,65,20,.08);
}
[data-theme="warm"] body {
  background: #f2ece0;
  color: #3d2810;
}
[data-theme="warm"] .topbar {
  background: rgba(230,218,195,.95);
  border-bottom-color: rgba(100,65,20,.2);
}
[data-theme="warm"] .page-banner {
  background: linear-gradient(135deg,#e8dfc8,#ddd0b5);
  border-bottom: 1px solid rgba(100,65,20,.15);
}
[data-theme="warm"] .panel,
[data-theme="warm"] .post-card,
[data-theme="warm"] .proj-card,
[data-theme="warm"] .book-card,
[data-theme="warm"] .cert-card,
[data-theme="warm"] .ach-card,
[data-theme="warm"] .spk-card,
[data-theme="warm"] .mnt-card,
[data-theme="warm"] .tl-card,
[data-theme="warm"] .adm-content {
  background: var(--bg3);
  border-color: var(--border2);
}
[data-theme="warm"] .adm-sidebar {
  background: #e0d5be;
  border-right-color: rgba(100,65,20,.2);
}
[data-theme="warm"] .field__input {
  background: var(--bg2);
  border-color: var(--border2);
  color: var(--text);
}
[data-theme="warm"] .field__input:focus {
  border-color: var(--amber);
}
[data-theme="warm"] .filter-row {
  border-color: rgba(100,65,20,.15);
}
[data-theme="warm"] .filter-btn,
[data-theme="warm"] .theme-toggle,
[data-theme="warm"] .tbl-btn {
  border-color: rgba(100,65,20,.25);
  color: var(--muted);
  background: transparent;
}
[data-theme="warm"] .filter-btn:hover,
[data-theme="warm"] .filter-btn.active,
[data-theme="warm"] .theme-toggle:hover,
[data-theme="warm"] .tbl-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
}
[data-theme="warm"] .mob-drawer {
  background: #e8dfc8;
}
[data-theme="warm"] .data-table th {
  background: var(--bg4);
  color: var(--amber);
}
[data-theme="warm"] .data-table tr:hover td {
  background: rgba(100,65,20,.05);
}
[data-theme="warm"] .nav-link { color: var(--muted); }
[data-theme="warm"] .nav-link:hover,
[data-theme="warm"] .nav-link.active { color: var(--amber); }
[data-theme="warm"] .cta-btn {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
}
[data-theme="warm"] .footer {
  border-top-color: rgba(100,65,20,.15);
  color: var(--muted);
}

/* ── Base reset ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:20px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.65;overflow-x:hidden;cursor:crosshair;transition:background .3s,color .3s}
a{color:var(--amber);text-decoration:none;transition:color .15s}
a:hover{color:var(--white)}
::selection{background:var(--amber);color:var(--bg)}
::-webkit-scrollbar{width:5px;background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--amber-d)}
img{max-width:100%;display:block}
ul{list-style:none}

/* ── Utilities ───────────────────────────────────────────── */
.hidden{display:none!important}
.amber{color:var(--amber)} .green{color:var(--green)} .red{color:var(--red)}
.dim{color:var(--dim)} .muted{color:var(--muted)}
.prompt{color:var(--amber)}
.blink{animation:blink 1s step-end infinite}
.blink-cursor{animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:none}
.fade-out{opacity:0;pointer-events:none;transition:opacity .6s ease}

/* ── Theme toggle ────────────────────────────────────────── */
.theme-toggle{background:none;border:1px solid var(--border2);color:var(--muted);font-family:var(--font);font-size:.6rem;padding:.26rem .55rem;cursor:crosshair;letter-spacing:.04em;transition:all .15s;white-space:nowrap}
.theme-toggle:hover{border-color:var(--amber);color:var(--amber)}

/* ── Topbar ──────────────────────────────────────────────── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;height:44px;background:var(--topbar-bg);border-bottom:1px solid var(--border2);backdrop-filter:blur(12px);gap:1rem;transition:background .3s,border-color .3s}
.topbar__left{font-size:.8rem;white-space:nowrap;flex-shrink:0}
.topbar__prompt{color:var(--amber);font-weight:700}
.topbar__at,.topbar__sep{color:var(--muted)}
.topbar__host{color:var(--white)}
.topbar__path{color:var(--amber-d)}
.topbar__dollar{color:var(--text);margin-left:.2em}
.topbar__nav {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex: 1;
  justify-content: center;
  overflow: hidden;
}
.nav-link{font-size:.7rem;color:var(--muted);letter-spacing:.05em;position:relative;transition:color .15s}
.nav-link::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--amber);transform:scaleX(0);transition:transform .2s}
.nav-link:hover,.nav-link.active{color:var(--amber)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.topbar__right{display:flex;align-items:center;gap:.6rem;font-size:.65rem;flex-shrink:0}
.topbar__clock{color:var(--dim);font-family:var(--font-vt);font-size:.95rem}
.status-online{color:var(--green)}

/* ── Mobile drawer ───────────────────────────────────────── */
.mob-btn{display:none;background:none;border:1px solid var(--border2);color:var(--muted);font-family:var(--font);font-size:.75rem;padding:.3rem .6rem;cursor:crosshair;transition:all .15s}
.mob-btn:hover{border-color:var(--amber);color:var(--amber)}
.mob-drawer{display:none;position:fixed;top:0;right:0;bottom:0;width:260px;z-index:500;background:var(--bg3);border-left:1px solid var(--border2);flex-direction:column;transform:translateX(100%);transition:transform .25s ease}
.mob-drawer.open{transform:translateX(0)}
.mob-overlay{display:none;position:fixed;inset:0;z-index:499;background:rgba(0,0,0,.7)}
.mob-overlay.open{display:block}
.mob-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.2rem;border-bottom:1px solid var(--border);font-size:.65rem;color:var(--amber)}
.mob-drawer__close{background:none;border:1px solid var(--border2);color:var(--muted);font-family:var(--font);font-size:.7rem;padding:.2rem .45rem;cursor:crosshair}
.mob-drawer__links{display:flex;flex-direction:column;padding:1.2rem;gap:.4rem}
.mob-drawer__links a{font-size:.8rem;color:var(--muted);padding:.45rem .3rem;border-bottom:1px solid var(--border);transition:color .15s}
.mob-drawer__links a:hover{color:var(--amber)}

/* ── Boot screen ─────────────────────────────────────────── */
.boot{position:fixed;inset:0;z-index:9999;background:var(--boot-bg);display:flex;align-items:center;justify-content:center;transition:opacity .6s ease}
.boot__inner{width:min(680px,90vw)}
.boot__ascii{font-family:var(--font);font-size:clamp(.38rem,1.1vw,.7rem);line-height:1.2;color:var(--amber);text-shadow:0 0 18px var(--amber);margin-bottom:1.2rem;white-space:pre}
.boot__subtitle{font-size:.72rem;color:var(--muted);letter-spacing:.15em;margin-bottom:2rem}
.boot__log{font-size:.72rem;color:var(--text);height:120px;overflow:hidden;margin-bottom:1.2rem;line-height:1.6}
.boot__log .ok{color:var(--green)}.boot__log .warn{color:var(--amber)}.boot__log .err{color:var(--red)}
.boot__bar-wrap{height:3px;background:var(--border2);margin-bottom:.6rem;overflow:hidden}
.boot__bar{height:100%;width:0%;background:var(--amber);box-shadow:0 0 10px var(--amber);transition:width .1s linear}
.boot__status{font-size:.7rem;color:var(--amber);letter-spacing:.1em;animation:blink .8s step-end infinite}
.boot__skip{font-size:.58rem;color:var(--dim);margin-top:1rem;letter-spacing:.1em}

/* ── HERO — fixed, no empty space ───────────────────────── */
.hero{display:grid;grid-template-columns:256px 1fr;min-height:calc(100vh - 44px);border-bottom:1px solid var(--border2);margin-top:44px}
.hero__hex-panel{background:var(--bg2);border-right:1px solid var(--border2);display:flex;flex-direction:column;overflow:hidden;position:sticky;top:44px;height:calc(100vh - 44px)}
.hex-header{padding:.55rem .9rem;font-size:.6rem;color:var(--dim);background:var(--bg3);border-bottom:1px solid var(--border);letter-spacing:.1em;display:flex;justify-content:space-between;align-items:center}
.hex-content{flex:1;padding:.55rem .8rem;font-size:.56rem;line-height:1.8;color:var(--dim);overflow:hidden;font-family:var(--font)}

.hero__main{display:flex;flex-direction:column;justify-content:center;padding:3rem 2.5rem;position:relative;background:radial-gradient(ellipse 60% 50% at 55% 40%,var(--amber-g2) 0%,transparent 65%),var(--bg);min-height:calc(100vh - 44px)}
.hero__main::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:28px 28px}

.hero__sys-line{font-size:.6rem;color:var(--amber-d);letter-spacing:.12em;margin-bottom:1rem;padding:.28rem .6rem;border:1px solid var(--border2);display:inline-block;background:var(--amber-g2);max-width:max-content}
.hero__name{font-family:var(--font-h);font-size:clamp(2rem,5vw,4rem);font-weight:900;color:var(--white);letter-spacing:-.02em;line-height:1.05;margin-bottom:1rem;text-shadow:var(--shadow-amber)}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;font-family:inherit;font-size:inherit;font-weight:inherit}
.glitch::before{color:var(--red);animation:g1 4.5s infinite;clip-path:polygon(0 25%,100% 25%,100% 45%,0 45%)}
.glitch::after{color:var(--cyan);animation:g2 4.5s infinite;clip-path:polygon(0 60%,100% 60%,100% 78%,0 78%)}
@keyframes g1{0%,88%,100%{transform:translate(0);opacity:0}90%{transform:translate(-3px,1px);opacity:.7}93%{transform:translate(3px,-1px);opacity:.4}96%{transform:translate(0);opacity:0}}
@keyframes g2{0%,89%,100%{transform:translate(0);opacity:0}91%{transform:translate(3px,1px);opacity:.6}94%{transform:translate(-2px);opacity:.35}97%{transform:translate(0);opacity:0}}

.hero__roles{font-size:.85rem;color:var(--amber);margin-bottom:1.2rem;min-height:1.6em}
.role-line::after{content:'█';animation:blink 1s step-end infinite;margin-left:2px}
.hero__matrix-line{font-size:.68rem;color:var(--muted);margin-bottom:1rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding-left:.8rem;border-left:2px solid var(--border2)}

/* ── Visitor counts ──────────────────────────────────────── */
.visitor-counts{display:flex;gap:1.5rem;font-size:.63rem;color:var(--muted);margin-bottom:1.1rem;flex-wrap:wrap}
.vc-item{display:flex;align-items:center;gap:.4rem}
.vc-num{font-family:var(--font-h);font-size:.88rem;color:var(--amber)}
.vc-num.green{color:var(--green)}

/* ── Visitor trace ───────────────────────────────────────── */
.visitor-trace{border:1px solid var(--border2);background:var(--bg2);font-size:.6rem;overflow:hidden;max-width:460px;margin-bottom:1.1rem;animation:traceIn .4s ease}
@keyframes traceIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vt-head{display:flex;align-items:center;justify-content:space-between;padding:.28rem .65rem;background:var(--amber-g2);border-bottom:1px solid var(--border)}
.vt-head__label{color:var(--amber);letter-spacing:.1em;font-size:.56rem}
.vt-head__dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:var(--shadow-green);animation:blink .9s step-end infinite}
.vt-grid{display:grid;grid-template-columns:1fr 1fr}
.vt-row{display:flex;align-items:baseline;gap:.3rem;padding:.2rem .65rem;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.vt-row:nth-child(even){border-right:none}
.vt-row:nth-last-child(-n+2){border-bottom:none}
.vt-key{color:var(--dim);white-space:nowrap;flex-shrink:0;font-size:.53rem;letter-spacing:.04em;min-width:64px}
.vt-val{color:var(--amber);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;font-size:.56rem}
.vt-val.loading{color:var(--dim);animation:blink 1s step-end infinite}
.vt-val.dim{color:var(--text)} .vt-warn{color:var(--red)!important}

/* ── CTA buttons ─────────────────────────────────────────── */
.hero__ctas{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.2rem}
.cta-btn{display:inline-flex;align-items:center;padding:.48rem .95rem;border:1px solid var(--amber);color:var(--amber);font-family:var(--font);font-size:.75rem;letter-spacing:.05em;cursor:crosshair;transition:background .15s,box-shadow .15s,color .15s;position:relative;overflow:hidden}
.cta-btn::before{content:'';position:absolute;inset:0;background:var(--amber);transform:translateX(-101%);transition:transform .2s ease}
.cta-btn:hover::before{transform:translateX(0)}
.cta-btn:hover{color:var(--bg);box-shadow:var(--shadow-amber)}
.cta-btn span,.cta-btn{position:relative}
.cta-btn span{z-index:1;position:relative}
.cta-btn--ghost{border-color:var(--border2);color:var(--muted)}
.cta-btn--ghost::before{background:var(--border3)}
.cta-btn--ghost:hover{color:var(--white);box-shadow:none}
.hero__scroll-hint{font-size:.57rem;color:var(--dim);letter-spacing:.14em;margin-top:.5rem;animation:float 2.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ── Sections ────────────────────────────────────────────── */
.section{padding:3rem 0;border-bottom:1px solid var(--border)}
.section--alt{background:var(--bg2)}
.section__cmd{font-size:.7rem;color:var(--muted);padding:.5rem 2.5rem;border-bottom:1px solid var(--border);background:var(--bg3);display:flex;align-items:center;gap:.5rem}
.section__cmd::before{content:'▶';color:var(--amber);font-size:.6rem}
.section__body{padding:1.8rem 2.5rem}

/* ── Panel ───────────────────────────────────────────────── */
.panel{border:1px solid var(--border2);background:var(--bg3);transition:border-color .2s}
.panel:hover{border-color:var(--border3)}
.panel__head{display:flex;align-items:center;justify-content:space-between;padding:.4rem .85rem;background:var(--bg2);border-bottom:1px solid var(--border);font-size:.58rem;letter-spacing:.1em}
.panel__id{color:var(--amber)}
.panel__body{padding:1rem}
.panel__text{font-size:.78rem;color:var(--text);line-height:1.7;margin-bottom:.7rem}

/* ── Stats ───────────────────────────────────────────────── */
.divider{color:var(--dim);font-size:.62rem;margin:.4rem 0}
.stat-row{display:flex;gap:1.5rem;margin-top:.4rem}
.stat{display:flex;flex-direction:column;gap:.1rem}
.stat__n{font-family:var(--font-h);font-size:1.1rem}
.stat__l{font-size:.53rem;color:var(--muted);letter-spacing:.1em}

/* ── Flags ───────────────────────────────────────────────── */
.flags-grid{display:flex;flex-wrap:wrap;gap:.35rem}
.flag{font-size:.63rem;padding:.17rem .48rem;border:1px solid var(--border2);color:var(--muted);cursor:default;transition:border-color .15s,color .15s}
.flag:hover{border-color:var(--amber);color:var(--amber)}

/* ── Contact links ───────────────────────────────────────── */
.contact-link{display:flex;align-items:center;gap:.7rem;font-size:.75rem;color:var(--muted);padding:.4rem .5rem;border:1px solid transparent;transition:border-color .15s,color .15s;margin-bottom:.4rem;overflow:hidden;min-width:0}
.contact-link:hover{border-color:var(--amber);color:var(--amber)}
.contact-link__icon{width:26px;height:20px;background:var(--border2);display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--amber);flex-shrink:0}
.contact-link span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ── Stack matrix ────────────────────────────────────────── */
.stack-matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:.5rem}
.stack-cell{border:1px solid var(--border);padding:.58rem .4rem;text-align:center;font-size:.65rem;color:var(--muted);cursor:default;position:relative;overflow:hidden;transition:border-color .15s,color .15s,transform .15s}
.stack-cell::before{content:'';position:absolute;inset:0;background:var(--amber-g2);opacity:0;transition:opacity .15s}
.stack-cell:hover{border-color:var(--amber);color:var(--white);transform:translateY(-2px)}
.stack-cell:hover::before{opacity:1}
.stack-cell__icon{font-size:1.1rem;display:block;margin-bottom:.2rem}
.stack-cell__label{display:block;font-size:.62rem}
.stack-cell__cat{display:block;font-size:.5rem;color:var(--dim);margin-top:.15rem;letter-spacing:.06em}

/* ── Filter buttons ──────────────────────────────────────── */
.filter-row{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem}
.filter-btn{font-family:var(--font);font-size:.6rem;background:none;border:1px solid var(--border2);color:var(--muted);padding:.22rem .6rem;cursor:crosshair;letter-spacing:.06em;transition:all .15s}
.filter-btn:hover,.filter-btn.active{border-color:var(--amber);color:var(--amber);background:var(--amber-g2)}

/* ── Ops/timeline ────────────────────────────────────────── */
.ops-item{display:grid;grid-template-columns:140px 1fr;gap:1.5rem;padding:1.2rem 0;border-bottom:1px solid var(--border)}
.ops-item:last-child{border-bottom:none}
.ops-item__meta{display:flex;flex-direction:column;gap:.4rem}
.ops-item__date{font-size:.63rem;color:var(--muted);letter-spacing:.06em}
.ops-item__title{font-size:.88rem;color:var(--white);margin-bottom:.2rem}
.ops-item__org{font-size:.63rem;color:var(--amber-d);letter-spacing:.1em;margin-bottom:.4rem}
.ops-item__desc{font-size:.74rem;color:var(--text);line-height:1.65}

/* ── Log list (blog) ─────────────────────────────────────── */
.log-list{display:flex;flex-direction:column}
.log-item{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--border);color:inherit;transition:padding .15s,border .15s}
.log-item:last-child{border-bottom:none}
.log-item:hover{border-left:2px solid var(--amber);padding-left:.8rem}
.log-item__left{display:flex;gap:1rem;align-items:flex-start;flex:1}
.log-item__num{font-family:var(--font-vt);font-size:1.4rem;color:var(--dim);flex-shrink:0;width:28px}
.log-item__title{font-size:.82rem;color:var(--white);margin-bottom:.25rem}
.log-item__excerpt{font-size:.7rem;color:var(--muted);line-height:1.5}
.log-item__right{flex-shrink:0;text-align:right}
.log-item__date{display:block;font-size:.62rem;color:var(--dim);margin-bottom:.3rem}
.log-item__tag{font-size:.58rem;padding:.1rem .38rem;background:var(--amber-g2);border:1px solid rgba(255,176,0,.18);color:var(--amber-d);letter-spacing:.07em}

/* ── Footer ──────────────────────────────────────────────── */
.footer{background:var(--bg2);border-top:1px solid var(--border2);padding:1.8rem 2.5rem;display:flex;flex-direction:column;gap:.4rem;font-size:.68rem}
.footer__line{display:flex;gap:2rem}

/* ── Page banner ─────────────────────────────────────────── */
.page-banner{background:var(--bg2);border-bottom:1px solid var(--border2);padding:3.5rem 2.5rem 2rem;position:relative;overflow:hidden}
.page-banner::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.page-banner__cmd{font-size:.63rem;color:var(--muted);margin-bottom:.8rem}
.page-banner__title{font-family:var(--font-h);font-size:clamp(1.4rem,4vw,2.5rem);font-weight:900;color:var(--white);margin-bottom:.4rem;text-shadow:var(--shadow-amber)}
.page-banner__sub{font-size:.7rem;color:var(--muted);letter-spacing:.05em}

/* ── Badge ───────────────────────────────────────────────── */
.badge{display:inline-block;font-size:.56rem;padding:.1rem .38rem;letter-spacing:.06em}
.badge--green{background:rgba(57,255,20,.08);color:var(--green);border:1px solid rgba(57,255,20,.2)}
.badge--amber{background:var(--amber-g);color:var(--amber);border:1px solid rgba(255,176,0,.22)}
.badge--red{background:rgba(255,34,68,.08);color:var(--red);border:1px solid rgba(255,34,68,.2)}
.badge--dim{background:rgba(128,128,128,.06);color:var(--muted);border:1px solid var(--border2)}

/* ── Form fields ─────────────────────────────────────────── */
.field{margin-bottom:1rem}
.field__label{display:block;font-size:.62rem;color:var(--muted);letter-spacing:.08em;margin-bottom:.28rem}
.field__input{width:100%;background:var(--bg2);border:1px solid var(--border2);color:var(--text);font-family:var(--font);font-size:.8rem;padding:.52rem .82rem;outline:none;transition:border-color .15s;cursor:text}
.field__input:focus{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber-g)}
.field__textarea{min-height:120px;resize:vertical}
select.field__input option{background:var(--bg3)}

/* ── Skill bars ──────────────────────────────────────────── */
.skill-row{display:grid;grid-template-columns:150px 1fr 42px;align-items:center;gap:.8rem;font-size:.72rem;margin-bottom:.85rem}
.skill-row__name{color:var(--text)}
.skill-row__track{height:3px;background:var(--border2);overflow:hidden}
.skill-row__fill{height:100%;width:0;background:linear-gradient(90deg,var(--amber-d),var(--amber));box-shadow:0 0 8px rgba(255,176,0,.3);transition:width 1.2s cubic-bezier(.17,.67,.3,1)}
.skill-row__pct{color:var(--amber-d);text-align:right;font-size:.65rem}

/* ── Contact/ping ────────────────────────────────────────── */
.contact-split{display:grid;grid-template-columns:1fr 1.5fr;gap:1.5rem}
.ping-channel{border:1px solid var(--border2);background:var(--bg3);padding:.8rem 1rem;display:flex;align-items:center;gap:.9rem;transition:border-color .15s;color:inherit;margin-bottom:.5rem}
.ping-channel:hover{border-color:var(--amber)}
.ping-channel__code{font-family:var(--font-h);font-size:.88rem;color:var(--amber);width:34px;flex-shrink:0;text-align:center}
.ping-channel__label{font-size:.58rem;color:var(--dim);letter-spacing:.08em}
.ping-channel__val{font-size:.74rem;color:var(--text)}

/* ── Blog post cards ─────────────────────────────────────── */
.post-card{border:1px solid var(--border2);background:var(--bg3);margin-bottom:.6rem;transition:border-color .2s,transform .15s;display:block;color:inherit}
.post-card:hover{border-color:var(--amber);transform:translateX(4px)}
.post-card__head{display:flex;justify-content:space-between;align-items:center;padding:.38rem 1rem;background:var(--bg2);border-bottom:1px solid var(--border);font-size:.58rem;color:var(--dim)}
.post-card__body{padding:.85rem 1.2rem}
.post-card__title{font-size:.87rem;color:var(--white);margin-bottom:.22rem;font-weight:600;line-height:1.3}
.post-card__excerpt{font-size:.72rem;color:var(--muted);line-height:1.6}
.post-card__foot{display:flex;align-items:center;justify-content:space-between;padding:.42rem 1.2rem;border-top:1px solid var(--border);font-size:.62rem;color:var(--dim)}
.post-card__meta{display:flex;gap:.8rem}
.read-more{color:var(--amber)}

/* ── Post content ────────────────────────────────────────── */
.post-content{line-height:1.85;color:var(--text);font-size:.87rem}
.post-content h1,.post-content h2,.post-content h3{font-family:var(--font-h);color:var(--white);margin:1.8rem 0 .6rem}
.post-content h2{font-size:1rem;border-left:3px solid var(--amber);padding-left:.7rem;font-family:var(--font)}
.post-content h3{font-size:.87rem;color:var(--amber-d);font-family:var(--font)}
.post-content p{margin-bottom:1rem}
.post-content code{font-family:var(--font);background:var(--bg2);color:var(--amber);padding:.1rem .4rem;font-size:.82em}
.post-content pre{background:var(--bg2);border:1px solid var(--border2);padding:1rem 1.2rem;overflow-x:auto;margin:1rem 0;border-left:3px solid var(--amber)}
.post-content pre code{background:none;padding:0;color:var(--text)}
.post-content blockquote{border-left:3px solid var(--amber);padding:.5rem 1rem;background:var(--amber-g2);margin:1rem 0;color:var(--muted)}
.post-content a{color:var(--amber)} .post-content ul,.post-content ol{padding-left:1.5rem;margin-bottom:1rem}
.post-content li{margin-bottom:.3rem} .post-content strong{color:var(--white)}
.post-content hr{border:none;border-top:1px solid var(--border2);margin:1.5rem 0}

/* ── Comments ────────────────────────────────────────────── */
.comment-item{border:1px solid var(--border);background:var(--bg2);padding:.8rem 1rem;margin-bottom:.5rem}
.comment-header{display:flex;justify-content:space-between;margin-bottom:.4rem;font-size:.65rem}
.comment-author{color:var(--amber)} .comment-date{color:var(--dim)}
.comment-text{font-size:.77rem;color:var(--text);line-height:1.65;white-space:pre-wrap;word-break:break-word}

/* ── Auth page ───────────────────────────────────────────── */
.auth-wrap{width:min(460px,94vw)}
.auth-tab{flex:1;padding:.5rem;font-family:var(--font);font-size:.7rem;background:var(--bg2);border:1px solid var(--border2);color:var(--muted);cursor:crosshair;letter-spacing:.08em;transition:all .15s}
.auth-tab.active{background:var(--amber-g);border-color:var(--amber);color:var(--amber)}
.auth-panel{background:var(--bg3);border:1px solid var(--border2);padding:1.8rem;display:none}
.auth-panel.active{display:block}
.auth-msg{font-size:.7rem;padding:.48rem .75rem;margin-bottom:.8rem;display:none}
.auth-msg.err{background:rgba(255,34,68,.08);border:1px solid rgba(255,34,68,.3);color:var(--red)}
.auth-msg.ok{background:rgba(57,255,20,.08);border:1px solid rgba(57,255,20,.2);color:var(--green)}

/* ── Stat cards ──────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem;margin-bottom:1.2rem}
.stat-card{background:var(--bg3);border:1px solid var(--border2);padding:.9rem;transition:border-color .15s}
.stat-card:hover{border-color:var(--amber)}
.stat-card__label{font-size:.55rem;color:var(--muted);letter-spacing:.1em;margin-bottom:.3rem}
.stat-card__val{font-family:var(--font-h);font-size:1.6rem;color:var(--amber);line-height:1}
.stat-card__sub{font-size:.57rem;color:var(--dim);margin-top:.2rem}
.stat-card--green .stat-card__val{color:var(--green)}
.stat-card--red .stat-card__val{color:var(--red)}
.stat-card--blue .stat-card__val{color:var(--blue)}

/* ── Data table ──────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;font-size:.68rem}
.data-table th{text-align:left;padding:.38rem .62rem;background:var(--bg2);color:var(--amber);border-bottom:1px solid var(--border);font-weight:400;letter-spacing:.07em;font-size:.57rem;white-space:nowrap}
.data-table td{padding:.42rem .62rem;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--amber-g2)}
.tbl-btn{background:none;border:1px solid var(--border2);color:var(--muted);font-family:var(--font);font-size:.55rem;padding:.15rem .4rem;cursor:crosshair;transition:all .15s;margin-right:.2rem;white-space:nowrap}
.tbl-btn:hover{border-color:var(--amber);color:var(--amber)}
.tbl-btn.danger:hover{border-color:var(--red);color:var(--red)}
.tbl-btn.success:hover{border-color:var(--green);color:var(--green)}

/* ── Toast ───────────────────────────────────────────────── */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;background:var(--bg3);border:1px solid var(--amber);padding:.62rem 1.1rem;font-size:.68rem;color:var(--amber);display:none;animation:toastIn .2s ease;max-width:300px}
.toast.err{border-color:var(--red);color:var(--red)}
@keyframes toastIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ── Pagination ──────────────────────────────────────────── */
.pagination{display:flex;gap:.42rem;margin-top:1.4rem;justify-content:center;flex-wrap:wrap}
.page-btn{font-family:var(--font);font-size:.65rem;background:none;border:1px solid var(--border2);color:var(--muted);padding:.26rem .68rem;cursor:crosshair;transition:all .15s}
.page-btn:hover,.page-btn.active{border-color:var(--amber);color:var(--amber)}

/* ── ADMIN PANEL ─────────────────────────────────────────── */
.adm-sidebar{width:220px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border2);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:100;overflow-y:auto;transition:background .3s}
.adm-main{margin-left:220px;flex:1;display:flex;flex-direction:column;min-width:0}
.adm-content{padding:1.4rem;flex:1}
.adm-sidebar__brand{padding:1rem 1.1rem;border-bottom:1px solid var(--border)}
.adm-sidebar__title{font-family:var(--font-h);font-size:.72rem;color:var(--amber);letter-spacing:.12em}
.adm-sidebar__sub{font-size:.57rem;color:var(--dim);margin-top:.2rem}
.adm-nav{padding:.5rem 0}
.adm-nav-item{display:flex;align-items:center;gap:.65rem;padding:.55rem 1.1rem;font-size:.68rem;color:var(--muted);cursor:crosshair;transition:all .15s;letter-spacing:.04em;border-left:2px solid transparent}
.adm-nav-item:hover{color:var(--amber);background:var(--amber-g2)}
.adm-nav-item.active{color:var(--amber);background:var(--amber-g2);border-left-color:var(--amber)}
.adm-nav-item__icon{font-size:.82rem;flex-shrink:0}
.adm-sidebar__footer{margin-top:auto;padding:.9rem 1.1rem;border-top:1px solid var(--border)}
.adm-topbar{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1.4rem;background:var(--bg2);border-bottom:1px solid var(--border2);font-size:.68rem;position:sticky;top:0;z-index:50;transition:background .3s}
.adm-topbar__title{color:var(--amber);letter-spacing:.1em}
.adm-user{color:var(--amber);font-size:.63rem;margin-bottom:.22rem}
.adm-logout{font-size:.6rem;color:var(--dim);cursor:pointer;transition:color .15s}
.adm-logout:hover{color:var(--red)}
.charts-row{display:grid;grid-template-columns:2fr 1fr;gap:1rem;margin-bottom:1rem}
.charts-row-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.editor-grid{display:grid;grid-template-columns:1fr 300px;gap:1rem}
.editor-grid textarea.field__input{min-height:380px;font-size:.75rem}
.toggle-pub{display:flex;align-items:center;gap:.6rem;font-size:.7rem;padding:.5rem 0;color:var(--text);cursor:pointer}
.toggle-pub input{accent-color:var(--amber);width:14px;height:14px}
.preview-box{background:var(--bg2);border:1px solid var(--border);padding:1rem;max-height:260px;overflow-y:auto;font-size:.74rem;line-height:1.7;display:none}
.preview-box h2{color:var(--white);font-size:.86rem;margin:.8rem 0 .3rem;font-family:var(--font);border-left:2px solid var(--amber);padding-left:.5rem}
.preview-box code{background:var(--bg);color:var(--amber);padding:.1em .3em;font-size:.85em}
.preview-box blockquote{border-left:2px solid var(--amber);padding:.3rem .7rem;color:var(--muted);margin:.5rem 0}
#visitorMap{height:260px}
.empty-row{text-align:center;color:var(--dim);padding:2rem;font-size:.73rem}

/* ── Stack admin section ─────────────────────────────────── */
.stack-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:.45rem;margin-bottom:1rem}
.stack-admin-cell{border:1px solid var(--border2);padding:.55rem .4rem;text-align:center;font-size:.63rem;color:var(--muted);position:relative;background:var(--bg3)}
.stack-admin-cell__icon{font-size:1rem;display:block;margin-bottom:.18rem}
.stack-admin-cell__label{display:block;color:var(--text)}
.stack-admin-cell__cat{display:block;font-size:.5rem;color:var(--dim);margin-top:.12rem}
.stack-admin-cell__remove{position:absolute;top:.18rem;right:.18rem;background:none;border:none;color:var(--dim);cursor:pointer;font-size:.7rem;padding:.08rem .22rem;line-height:1;font-family:var(--font);transition:color .15s}
.stack-admin-cell__remove:hover{color:var(--red)}

/* ── Add item form row ───────────────────────────────────── */
.add-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end;padding:1rem;border:1px solid var(--border2);background:var(--bg3);margin-bottom:1rem}
.add-row .field{margin-bottom:0;flex:1;min-width:80px}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:920px){
  .hero{grid-template-columns:1fr}
  .hero__hex-panel{display:none}
  .hero__main{padding:2.5rem 1.5rem;min-height:auto}
  .section__cmd,.section__body,.footer{padding-left:1.5rem;padding-right:1.5rem}
  .ops-item{grid-template-columns:1fr;gap:.5rem}
  .contact-split{grid-template-columns:1fr}
  .topbar__nav{display:none}
  .mob-btn{display:flex}
  .mob-drawer{display:flex}
}
@media(max-width:860px){
  .adm-sidebar{width:52px}
  .adm-main{margin-left:52px}
  .adm-sidebar__title,.adm-sidebar__sub,.adm-nav-item span,.adm-user,.adm-logout{display:none}
  .charts-row,.charts-row-2,.editor-grid{grid-template-columns:1fr}
}
@media(max-width:580px){
  .hero__name{font-size:2rem}
  .visitor-trace{max-width:100%}
  .stack-matrix{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
}

/* ═══════════════════════════════════════════════════════════
   v4 ADDITIONS — Parallax, Skills, Certs, Achievements, Books
   ═══════════════════════════════════════════════════════════ */

/* ── Parallax background layers ─────────────────────────── */
.parallax-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.parallax-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.28;
  will-change: transform;
  transition: transform 0.12s ease-out;
}
.parallax-layer-1 {
  width: 700px; height: 700px;
  top: -200px; left: -180px;
  background: radial-gradient(circle, rgba(255,176,0,1) 0%, transparent 70%);
}
.parallax-layer-2 {
  width: 600px; height: 600px;
  bottom: -150px; right: -150px;
  background: radial-gradient(circle, rgba(57,255,20,0.9) 0%, transparent 70%);
}
.parallax-layer-3 {
  width: 500px; height: 500px;
  top: 35%; left: 40%;
  background: radial-gradient(circle, rgba(77,166,255,0.8) 0%, transparent 70%);
  opacity: 0.18;
}
[data-theme="light"] .parallax-layer { opacity: 0.12; }

/* ── Parallax dot grid overlay ───────────────────────────── */
.parallax-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,176,0,0.22) 1px, transparent 1px);
  background-size: 28px 28px;
  will-change: transform;
  transition: transform 0.15s ease-out;
  opacity: 0.6;
}
[data-theme="light"] .parallax-grid {
  background-image:
    radial-gradient(circle, rgba(184,96,0,0.15) 1px, transparent 1px);
}

/* ── Page content above parallax ─────────────────────────── */
.page-content { position: relative; z-index: 1; }

/* ── Skill cards (public page) ───────────────────────────── */
.skill-card {
  background: var(--bg3);
  border: 1px solid var(--border2);
  padding: .9rem .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-align: center;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.skill-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--amber), var(--green));
  transform: scaleX(0);
  transition: transform .25s;
}
.skill-card:hover {
  border-color: var(--amber-d);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255,176,0,0.12);
}
.skill-card:hover::before { transform: scaleX(1); }
.skill-card__logo {
  width: 36px; height: 36px;
  object-fit: contain;
  border-radius: 4px;
}
.skill-card__icon { font-size: 1.6rem; line-height: 1; }
.skill-card__label { font-size: .72rem; font-weight: 600; color: var(--white); }
.skill-card__cat {
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Certification cards ─────────────────────────────────── */
.cert-card {
  background: var(--bg3);
  border: 1px solid var(--border2);
  padding: 1.25rem;
  transition: border-color .2s, box-shadow .2s;
}
.cert-card:hover {
  border-color: var(--amber-d);
  box-shadow: 0 4px 18px rgba(255,176,0,0.10);
}
.cert-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
}
.cert-card__vendor {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cert-card__status {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.cert-card__status.active { background: var(--green); box-shadow: 0 0 6px var(--green); }
.cert-card__status.expired { background: var(--red); }
.cert-card__logo-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.cert-card__logo {
  width: 48px; height: 48px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg2);
  padding: 4px;
}
.cert-card__logo-placeholder {
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: var(--bg2);
  border-radius: 6px;
}
.cert-card__name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.4;
}
.cert-card__id {
  font-size: .58rem;
  color: var(--muted);
  letter-spacing: .06em;
  margin: .25rem 0 .5rem;
}
.cert-card__desc {
  font-size: .78rem;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: .75rem;
}
.cert-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: .65rem;
  border-top: 1px solid var(--border);
  font-size: .65rem;
  color: var(--muted);
}
.cert-card__verify { color: var(--amber); transition: color .15s; }
.cert-card__verify:hover { color: var(--white); }

/* ── Achievement cards ───────────────────────────────────── */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.ach-card {
  background: var(--bg3);
  border: 1px solid var(--border2);
  padding: 1.25rem;
  transition: border-color .2s, transform .2s;
  position: relative;
  overflow: hidden;
}
.ach-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--amber), var(--green));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s;
}
.ach-card:hover { border-color: var(--amber-d); transform: translateX(4px); }
.ach-card:hover::after { transform: scaleY(1); }
.ach-card__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .65rem;
}
.ach-card__logo { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; }
.ach-card__icon { font-size: 1.5rem; }
.ach-card__cat {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .3rem;
}
.ach-card__title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .4rem;
}
.ach-card__desc {
  font-size: .76rem;
  line-height: 1.65;
  color: var(--text);
}
.ach-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .65rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
  font-size: .62rem;
  color: var(--muted);
}
.ach-card__link { color: var(--amber); transition: color .15s; }
.ach-card__link:hover { color: var(--white); }


.ach-card__banner {
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: var(--bg2);
  border-bottom: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ach-card__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ach-card__banner-placeholder {
  font-size: 3.5rem;
}
.ach-card__body {
  padding: .9rem 1rem;
}


/* ── Book cards ──────────────────────────────────────────── */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.book-card {
  background: var(--bg3);
  border: 1px solid var(--border2);
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s;
  overflow: hidden;
}
.book-card:hover {
  border-color: var(--amber-d);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255,176,0,0.12);
}
.book-card__cover-wrap {
  aspect-ratio: 2/3;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-height: 280px;
}
.book-card__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.book-card__cover-placeholder {
  font-size: 4rem;
  color: var(--border3);
}
.book-card__body { padding: 1rem; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.book-card__title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.4;
}
.book-card__subtitle {
  font-size: .76rem;
  color: var(--amber);
  font-style: italic;
}
.book-card__meta {
  font-size: .65rem;
  color: var(--muted);
  letter-spacing: .04em;
}
.book-card__desc {
  font-size: .76rem;
  line-height: 1.65;
  color: var(--text);
  flex: 1;
  margin-top: .25rem;
}
.book-card__actions {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px solid var(--border);
}
.book-btn {
  flex: 1;
  text-align: center;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  padding: .42rem .6rem;
  border: 1px solid var(--border2);
  color: var(--text);
  transition: all .15s;
  font-family: var(--font);
  cursor: pointer;
  background: var(--bg2);
}
.book-btn:hover { border-color: var(--amber); color: var(--amber); }
.book-btn--primary {
  background: var(--amber-g);
  border-color: var(--amber-d);
  color: var(--amber);
}
.book-btn--primary:hover { background: var(--amber); color: var(--bg); }

/* ── Admin additions for v4 panels ──────────────────────── */
.add-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.add-form-grid .field { margin: 0; }
.emoji-picker-btn {
  background: var(--bg4);
  border: 1px solid var(--border2);
  color: var(--white);
  cursor: pointer;
  padding: .3rem .55rem;
  font-size: 1.1rem;
  line-height: 1;
  transition: border-color .15s;
}
.emoji-picker-btn:hover { border-color: var(--amber); }
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  background: var(--bg4);
  border: 1px solid var(--border2);
  padding: .5rem;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.emoji-grid-item {
  font-size: 1.3rem;
  cursor: pointer;
  padding: .2rem;
  text-align: center;
  border-radius: 2px;
  transition: background .1s;
  line-height: 1.4;
}
.emoji-grid-item:hover { background: var(--amber-g); }
.emoji-picker-wrap { position: relative; display: inline-block; }
.stack-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: .6rem; }
.stack-admin-cell { background: var(--bg4); border: 1px solid var(--border); padding: .75rem .5rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; position: relative; }
.stack-admin-cell__remove { position: absolute; top: 3px; right: 4px; background: none; border: none; color: var(--muted); cursor: pointer; font-size: .65rem; padding: 2px 4px; transition: color .15s; }
.stack-admin-cell__remove:hover { color: var(--red); }
.stack-admin-cell__icon { font-size: 1.5rem; line-height: 1; }
.stack-admin-cell__logo { width: 28px; height: 28px; object-fit: contain; }
.stack-admin-cell__label { font-size: .68rem; color: var(--white); font-weight: 600; }
.stack-admin-cell__cat { font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.content-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media(max-width:760px) { .content-editor-grid { grid-template-columns: 1fr; } }


/* ── Certificate & Achievement card banner ───────────────── */
.card-banner {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: var(--bg2);
  border-bottom: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.card-banner img.card-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-banner__placeholder {
  font-size: 3.5rem;
}
.card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  background: #fff;
  object-fit: contain;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  z-index: 2;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
  cursor: zoom-in;
}
.card-badge:hover {
  transform: scale(1.6);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  z-index: 10;
}
.card-body {
  padding: .9rem 1rem;
}
/* ── MOBILE FIXES ───────────────────────────────────────────── */
@media(max-width:600px){

  /* Fix tiny text - boost base font */
  body { font-size: 14px; }

  /* Fix boot screen gap */
  .boot { min-height: 100dvh; }

  /* Hero section */
  .hero { padding: 1.5rem 1rem; }
  .hero__name { font-size: 2rem !important; }
  .hero__role { font-size: .8rem !important; }
  .hero__meta { flex-wrap: wrap; gap: .3rem; font-size: .7rem; }
  .hero__stats { flex-wrap: wrap; gap: .5rem; }
  .hero__actions { flex-wrap: wrap; gap: .5rem; }
  .hero__actions a, .hero__actions button { width: 100%; text-align: center; }

  /* Visitor trace table */
  .vtrace { font-size: .6rem; overflow-x: auto; }
  .vtrace table { min-width: 300px; }

  /* Whoami/about two-column → single */
  .whoami-grid,
  .about-grid,
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Stack/skills grid */
  .skill-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Page banners */
  .page-banner { padding: 1.5rem 1rem; }
  .page-banner__title { font-size: 2.5rem; }

  /* Cards */
  .cert-card, .ach-card, .spk-card, .mnt-card,
  .book-card, .proj-card, .tl-card, .judge-card {
    margin-bottom: .75rem;
  }

  /* Filter rows wrap better */
  .filter-row { gap: .3rem; padding: .5rem 1rem; }
  .filter-btn, .theme-toggle { font-size: .6rem !important; padding: .2rem .4rem; }

  /* Topbar */
  .topbar__nav { display: none; }
  .mob-btn { display: flex !important; }

  /* Ping/contact form */
  .ping-grid, .contact-grid {
    grid-template-columns: 1fr !important;
  }

  /* Timeline */
  .tl-event { grid-template-columns: 40px 1fr !important; }
  .tl-event__left:not(.tl-event__empty) { display: none; }
  .tl-event__card { max-width: 100% !important; }

  /* Footer */
  .footer { padding: 1rem; font-size: .65rem; }

  /* Overflow fix */
  img, table, pre { max-width: 100%; overflow-x: auto; }
  pre { white-space: pre-wrap; word-break: break-word; }
}

@media(max-width:400px){
  .hero__name { font-size: 1.6rem !important; }
  .page-banner__title { font-size: 2rem; }
  .skill-grid { grid-template-columns: 1fr !important; }
}

/* ── TOPBAR MOBILE FIX ──────────────────────────────────────── */
@media(max-width:768px){
  .topbar { padding: 0 .6rem; gap: .3rem; }

  /* Hide clock and online status on mobile */
  .topbar__clock { display: none !important; }
  .status-online { display: none !important; }
  span[style*="color:var(--green)"] { display: none !important; }

  /* Shrink logo text */
  .topbar__prompt { font-size: .65rem; }
  .topbar__at, .topbar__host { font-size: .65rem; }
  .topbar__sep, .topbar__path, .topbar__dollar { font-size: .65rem; }

  /* Shrink right side buttons */
  .topbar__right { gap: .3rem; }
  .theme-toggle { font-size: .58rem !important; padding: .2rem .35rem !important; }
  #authNav a, #authNav span { font-size: .55rem !important; }

  /* Hide main nav, show hamburger */
  .topbar__nav { display: none !important; }
  .mob-btn { display: flex !important; }
}

@media(max-width:480px){
  /* Even smaller - hide theme toggle too, keep only hamburger */
  .topbar__path { display: none; }
  .topbar__sep { display: none; }
}