/* ============================================================
   Benetastic — Bio.  Ported 1:1 from the design component.
   CSS variables --acc / --acc2 / --bg / --gl / --gr / --sl are
   set on :root by app.js from the content model.
   ============================================================ */

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg,#07070A);color:#E9EAEE;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  font-weight:400;-webkit-tap-highlight-color:transparent;text-wrap:pretty;
}
a{color:#E9EAEE;text-decoration:none}
a:hover{color:var(--acc,#C8FF00)}
::selection{background:var(--acc,#C8FF00);color:#07070A}
input,textarea,button,select{font:inherit;color:inherit;border-radius:0}
input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:1px solid var(--acc,#C8FF00);outline-offset:2px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#0A0B0F}
::-webkit-scrollbar-thumb{background:#23262F}

@keyframes rise{from{opacity:0;clip-path:inset(0 0 62% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes wipe{from{opacity:.2;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}
@keyframes glitch{0%,86%,100%{transform:translate3d(0,0,0);text-shadow:none}88%{transform:translate3d(calc(var(--gl,1)*-4px),0,0) skewX(-1.5deg);text-shadow:calc(var(--gl,1)*4px) 0 var(--acc2,#FF2D6B),calc(var(--gl,1)*-4px) 0 #00E5FF}90%{transform:translate3d(calc(var(--gl,1)*3px),0,0);text-shadow:calc(var(--gl,1)*-3px) 0 var(--acc2,#FF2D6B),calc(var(--gl,1)*3px) 0 #00E5FF}92%{transform:translate3d(0,0,0);text-shadow:none}95%{transform:translate3d(calc(var(--gl,1)*2px),0,0);text-shadow:calc(var(--gl,1)*2px) 0 #00E5FF}}
@keyframes pop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes sheet{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bootout{0%,62%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}

/* Motion kill-switch (design toggle). */
body.no-motion *{animation:none !important;transition:none !important}

/* ── Interactive hover / active / focus states (were style-hover in DC) ── */
.h-cta-primary{transition:filter .16s,transform .16s,letter-spacing .16s}
.h-cta-primary:hover{filter:brightness(1.12);letter-spacing:.2em}
.h-cta-primary:active{transform:translateY(2px)}

.h-cta-ghost{transition:border-color .16s,background .16s,transform .16s}
.h-cta-ghost:hover{border-color:var(--acc,#C8FF00);background:#0E1015}
.h-cta-ghost:active{transform:translateY(2px);background:var(--acc,#C8FF00);color:#07070A}

.h-live-off{transition:border-color .18s,background .18s}
.h-live-off:hover{border-color:#2A2E39;background:#0E1015}

.link-row{transition:background .18s ease,padding-left .18s ease,text-shadow .12s ease,color .12s ease;--ax:0px}
.link-row:hover{background:#0D0F14;padding-left:28px;text-shadow:2px 0 var(--acc2,#FF2D6B),-2px 0 #00E5FF;--ax:9px}
.link-row:active{background:var(--acc,#C8FF00);color:#07070A;text-shadow:none}
.link-arrow{transform:translateX(var(--ax,0px));transition:transform .18s ease}

.h-sys-toggle-acc{transition:border-color .16s,background .16s}
.h-sys-toggle-acc:hover{border-color:var(--acc,#C8FF00);background:#0E1015}
.h-sys-toggle-cyan{transition:border-color .16s,background .16s}
.h-sys-toggle-cyan:hover{border-color:#00E5FF;background:#0E1015}

.h-cta-solid{transition:filter .16s}
.h-cta-solid:hover{filter:brightness(1.12)}
.h-cta-outline-cyan{transition:background .16s,color .16s}
.h-cta-outline-cyan:hover{background:#00E5FF;color:#07070A}
.h-cta-outline{transition:border-color .16s,background .16s}
.h-cta-outline:hover{border-color:var(--acc,#C8FF00);background:#0E1015}
.h-cta-outline:active{background:var(--acc,#C8FF00);color:#07070A}

.h-svc{transition:background .2s ease}
.h-svc:hover{background:#0E1015}

.h-chan{transition:background .16s,color .16s,text-shadow .12s}
.h-chan:hover{background:var(--acc,#C8FF00);color:#07070A}

.h-contact-card{transition:background .18s,text-shadow .12s}
.h-contact-card:hover{background:#0E1015;text-shadow:1.5px 0 var(--acc2,#FF2D6B),-1.5px 0 #00E5FF}

.h-admin-btn{transition:color .16s,border-color .16s}
.h-admin-btn:hover{color:var(--acc,#C8FF00);border-color:var(--acc,#C8FF00)}

.h-bar-discord{transition:filter .16s}
.h-bar-discord:hover{filter:brightness(1.12)}
.h-bar-discord:active{transform:translateY(2px)}

.h-search{transition:border-color .16s}
.h-search:focus{border-color:var(--acc,#C8FF00)}

.h-copy{transition:border-color .16s,background .16s}
.h-copy:hover{border-color:var(--acc,#C8FF00);background:#0E1015}

/* ── Inline editing (admin only) ── */
[data-edit]{outline:0}
body.editing [data-edit]{
  cursor:text;border-radius:2px;
  box-shadow:0 0 0 1px rgba(200,255,0,.22);
  transition:box-shadow .15s;
}
body.editing [data-edit]:hover{box-shadow:0 0 0 1px rgba(200,255,0,.55)}
body.editing [data-edit]:focus{box-shadow:0 0 0 1px var(--acc,#C8FF00);background:rgba(200,255,0,.05)}
.edit-badge{
  position:fixed;left:50%;bottom:86px;transform:translateX(-50%);
  z-index:120;display:none;align-items:center;gap:9px;
  padding:9px 15px;background:#0A0B10;border:1px solid var(--acc,#C8FF00);
  font-size:10.5px;letter-spacing:.16em;color:var(--acc,#C8FF00);white-space:nowrap;
}
body.editing .edit-badge{display:flex}
.edit-badge b{color:#07070A;background:var(--acc,#C8FF00);padding:2px 6px;font-weight:700}

/* Toast for save feedback / login result. */
.toast{
  position:fixed;left:50%;top:16px;transform:translateX(-50%) translateY(-140%);
  z-index:210;padding:11px 18px;background:#0A0B10;border:1px solid #2A2E39;
  font-size:11px;letter-spacing:.12em;color:#E9EAEE;white-space:nowrap;
  transition:transform .3s cubic-bezier(.2,.75,.2,1);max-width:92vw;overflow:hidden;text-overflow:ellipsis;
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:var(--acc,#C8FF00)}
.toast.err{border-color:var(--acc2,#FF2D6B);color:#FF9DBB}

/* Admin drawer generic controls. */
.drawer-tab{flex:1 0 auto;background:transparent;border:0;border-right:1px solid #1B1E27;color:#6C7181;font-size:10px;letter-spacing:.16em;padding:13px 14px;cursor:pointer;white-space:nowrap;transition:background .16s,color .16s}
.drawer-tab.active{background:#12141A;color:var(--acc,#C8FF00)}
.mini-btn{background:transparent;border:1px solid #262A34;color:#8E93A2;font-size:10px;padding:5px 8px;cursor:pointer;transition:border-color .16s,color .16s}
.mini-btn:hover{border-color:var(--acc,#C8FF00);color:var(--acc,#C8FF00)}
.mini-btn.danger:hover{border-color:var(--acc2,#FF2D6B);color:var(--acc2,#FF2D6B)}
.swatch{width:46px;height:46px;cursor:pointer;transition:transform .14s}
.swatch:hover{transform:translateY(-3px)}
.field{background:#08090D;border:0;padding:11px;font-size:11px;min-width:0;width:100%;color:#E9EAEE}
.hidden{display:none !important}