@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  --s0: #040405;
  --s1: #08080a;
  --s2: #0d0d10;
  --s3: #141418;
  --s4: #1b1b20;
  --s5: #24242b;

  --glass:       rgba(8,8,10,.9);
  --glass-solid: rgba(11,11,14,.98);
  --glass-light: rgba(13,13,16,.7);

  --brand:       #059669;
  --brand-mid:   #10b981;
  --brand-light: #34d399;
  --brand-pale:  #a7f3d0;

  --accent:       #34d399;
  --accent-dim:   rgba(52,211,153,.04);
  --accent-mid:   rgba(52,211,153,.1);
  --accent-line:  rgba(52,211,153,.07);
  --accent-bright:rgba(52,211,153,.35);

  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;

  --t0: #f5f5f5;
  --t1: #d4d4d8;
  --t2: #a1a1aa;
  --t3: #71717a;
  --t4: #3f3f46;

  --f-display: 'Sora', system-ui, sans-serif;
  --f-body:    'Instrument Sans', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;
  --r-xl: 18px;
  --r-full: 999px;

  --sh-s:     0 1px 2px rgba(0,0,0,.6);
  --sh-m:     0 4px 16px rgba(0,0,0,.7);
  --sh-l:     0 12px 40px rgba(0,0,0,.8);
  --sh-brand: 0 4px 20px rgba(16,185,129,.1);
  --sh-glow:  0 0 50px rgba(52,211,153,.04);

  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-out:    cubic-bezier(0,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-f: 80ms;
  --dur-b: 180ms;
  --dur-s: 320ms;

  --header-h: 54px;
  --sidebar-w: 272px;
  --page-max: 1200px;
  --pad-x: clamp(.85rem, 3vw, 2.25rem);
  --pad-y: clamp(.85rem, 2.5vw, 2rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  max-width:100vw;
  overflow-x:clip;
  min-height:100dvh;
  background:var(--s0);
  color:var(--t0);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body::before{
  content:'';position:fixed;inset:0;z-index:-4;
  background:var(--s0);
}

body::after{
  content:'';position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(ellipse 50% 40% at 5% 5%,rgba(16,185,129,.04),transparent 50%),
    radial-gradient(ellipse 30% 30% at 95% 95%,rgba(52,211,153,.02),transparent 50%);
  will-change:opacity;
  animation:glowPulse 30s ease-in-out infinite alternate;
}

@keyframes glowPulse{
  0%{opacity:1}50%{opacity:.5}100%{opacity:.8}
}

.grid-overlay{
  position:fixed;inset:0;z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse 55% 55% at 50% 50%,#000 5%,transparent 50%);
  -webkit-mask-image:radial-gradient(ellipse 55% 55% at 50% 50%,#000 5%,transparent 50%);
  pointer-events:none;
}

::selection{background:rgba(52,211,153,.15);color:#fff}

::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--s4);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--s5)}

:focus-visible{outline:1px solid var(--accent);outline-offset:2px;border-radius:var(--r-s)}

header{
  position:sticky;top:0;z-index:200;
  min-height:var(--header-h);
  padding:clamp(.55rem,1.4vw,.75rem) var(--pad-x);
  background:var(--glass-solid);
  backdrop-filter:blur(32px) saturate(140%);
  -webkit-backdrop-filter:blur(32px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.04);
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
  gap:.4rem .6rem;
  flex-shrink:0;
}

.header-scanner{
  position:absolute;top:0;left:0;
  width:100%;height:1px;
  background:linear-gradient(90deg,transparent 42%,rgba(52,211,153,.15) 48%,rgba(52,211,153,.35) 50%,rgba(52,211,153,.15) 52%,transparent 58%);
  animation:scan 24s linear infinite;
  pointer-events:none;
}

@keyframes scan{to{transform:translateX(70%)}}

.header-bottom-glow{
  position:absolute;bottom:-1px;left:25%;right:25%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(52,211,153,.12),transparent);
  pointer-events:none;
}

.brand{
  display:flex;flex-direction:column;gap:0;
  flex-shrink:0;
  min-width:0;
}

.brand-title{
  font-family:var(--f-display);
  font-size:clamp(.9rem,2.2vw,1.1rem);
  font-weight:700;letter-spacing:-.04em;
  color:var(--t0);
  display:flex;align-items:center;gap:.5rem;
  line-height:1.2;white-space:nowrap;
}

.brand-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 8px rgba(52,211,153,.4);
  animation:dotBlink 4s ease-in-out infinite;
  flex-shrink:0;
}

@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.2}}

.brand-sub{
  font-family:var(--f-mono);
  font-size:clamp(.5rem,1.1vw,.6rem);
  color:var(--t3);letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;
  display:flex;align-items:center;gap:.4rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

#uptimeLabel{
  font-family:var(--f-mono);
  font-size:clamp(.5rem,1vw,.58rem);
  color:var(--ok);font-weight:600;letter-spacing:.03em;
}

.header-footer{
  font-size:clamp(.5rem,1vw,.58rem);
  color:var(--t4);line-height:1.5;
  width:100%;order:99;
  font-family:var(--f-mono);
  padding-top:.1rem;
}

.header-footer a{color:var(--t3);text-decoration:none;transition:color var(--dur-b) var(--ease)}
.header-footer a:hover{color:var(--accent)}

.header-actions{
  display:flex;align-items:center;gap:.35rem;
  flex-shrink:0;
}

.btn-outline{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:clamp(.35rem,.9vw,.48rem) clamp(.6rem,1.6vw,.9rem);
  border-radius:var(--r-m);
  text-decoration:none;
  font-family:var(--f-body);
  font-size:clamp(.68rem,1.3vw,.75rem);
  font-weight:600;letter-spacing:.01em;
  white-space:nowrap;cursor:pointer;
  color:var(--t3);
  background:transparent;
  border:1px solid rgba(255,255,255,.06);
  position:relative;overflow:hidden;
  transition:
    color var(--dur-b) var(--ease),
    background var(--dur-b) var(--ease),
    border-color var(--dur-b) var(--ease),
    transform var(--dur-f) var(--ease);
  -webkit-tap-highlight-color:transparent;
}

.btn-outline:active{transform:scale(.97)}

.btn-outline:hover{
  color:var(--t0);
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.1);
}

.btn-paypal{
  color:var(--brand-light);
  border-color:rgba(16,185,129,.1);
  background:rgba(16,185,129,.03);
}

.btn-paypal:hover{
  color:var(--brand-pale);
  border-color:rgba(16,185,129,.2);
  background:rgba(16,185,129,.06);
}

.menu-toggle{
  position:fixed;
  top:calc(var(--header-h) + .7rem);
  left:clamp(.6rem,2vw,1rem);
  z-index:1100;
  width:40px;height:40px;
  border-radius:var(--r-m);
  background:var(--s2);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:var(--sh-m);
  cursor:pointer;
  display:grid;place-items:center;
  transition:
    background var(--dur-b) var(--ease),
    border-color var(--dur-b) var(--ease),
    box-shadow var(--dur-b) var(--ease),
    transform var(--dur-f) var(--ease),
    top var(--dur-s) var(--ease);
}

.menu-toggle:hover{
  border-color:rgba(255,255,255,.1);
  background:var(--s3);
  transform:scale(1.05);
}

.menu-toggle:active{transform:scale(.93)}
.menu-toggle.scrolled{top:.7rem}

.menu-toggle svg{
  width:16px;height:16px;
  stroke:var(--t3);stroke-width:2;fill:none;
  transition:transform var(--dur-b) var(--ease),stroke var(--dur-b);
}

.menu-toggle:hover svg{stroke:var(--t1)}
.menu-toggle.active svg{transform:rotate(90deg);stroke:var(--accent)}

.sidebar-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:998;
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-s) var(--ease);
}

.sidebar-overlay.active{opacity:1;pointer-events:auto}

.sidebar{
  position:fixed;top:0;left:0;
  width:var(--sidebar-w);max-width:85vw;
  height:100dvh;
  background:var(--s1);
  border-right:1px solid rgba(255,255,255,.04);
  z-index:999;
  transform:translateX(-100%);
  transition:transform var(--dur-s) var(--ease);
  overflow-y:auto;overflow-x:hidden;
  box-shadow:4px 0 40px rgba(0,0,0,.8);
  display:flex;flex-direction:column;
}

.sidebar.open{transform:translateX(0)}

.sidebar::after{
  content:'';position:absolute;
  top:0;right:-1px;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,rgba(52,211,153,.08) 30%,rgba(52,211,153,.08) 70%,transparent);
  pointer-events:none;
}

.sidebar-header{
  padding:clamp(1rem,2.8vw,1.4rem) clamp(.9rem,2.8vw,1.2rem) clamp(.9rem,2.2vw,1.1rem);
  border-bottom:1px solid rgba(255,255,255,.04);
  position:relative;flex-shrink:0;
}

.sidebar-header-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 0% 0%,rgba(16,185,129,.03),transparent 50%);
  pointer-events:none;
}

.sidebar-header h2{
  font-family:var(--f-display);
  font-size:clamp(.85rem,1.8vw,.95rem);
  font-weight:700;letter-spacing:-.03em;
  color:var(--t0);position:relative;
}

.sidebar-version{
  font-family:var(--f-mono);
  font-size:.55rem;color:var(--t4);
  letter-spacing:.12em;text-transform:uppercase;
  margin-top:.25rem;position:relative;
}

.sidebar-nav{flex:1;padding:.4rem 0;overflow-y:auto}

.nav-section-label{
  font-size:.52rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--t4);
  padding:clamp(.7rem,1.8vw,.9rem) clamp(.9rem,2.8vw,1.2rem) .3rem;
  font-family:var(--f-mono);
}

.nav-item{
  margin:1px clamp(.35rem,1.3vw,.6rem);
  padding:clamp(.5rem,1.3vw,.6rem) clamp(.6rem,1.8vw,.8rem);
  border-radius:var(--r-m);
  cursor:pointer;
  border:1px solid transparent;
  display:flex;align-items:center;gap:.65rem;
  position:relative;overflow:hidden;
  transition:
    background var(--dur-b) var(--ease),
    border-color var(--dur-b) var(--ease);
  -webkit-tap-highlight-color:transparent;
}

.nav-item::before{
  content:'';position:absolute;
  left:10px;top:50%;
  width:4px;height:4px;
  border-radius:50%;
  background:var(--accent);
  transform:translateY(-50%) scale(0);
  transition:transform var(--dur-b) var(--ease-out);
  z-index:2;
}

.nav-item::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(52,211,153,.03),transparent 50%);
  opacity:0;
  transition:opacity var(--dur-b) var(--ease);
  pointer-events:none;
}

.nav-item:hover::after,
.nav-item.active::after{opacity:1}

.nav-item:hover,
.nav-item.active{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.04);
}

.nav-item:hover::before,
.nav-item.active::before{transform:translateY(-50%) scale(1)}

.nav-item:active{background:rgba(255,255,255,.04)}

.nav-item.active{
  background:rgba(52,211,153,.03);
  border-color:rgba(52,211,153,.06);
}

.nav-icon{
  font-size:clamp(.85rem,1.8vw,.95rem);
  min-width:18px;text-align:center;
  color:var(--t3);
  transition:color var(--dur-f);
}

.nav-item:hover .nav-icon{color:var(--accent)}
.nav-item.active .nav-icon{color:var(--accent)}

.nav-content{flex:1;min-width:0}

.nav-title{
  font-weight:600;
  font-size:clamp(.74rem,1.5vw,.8rem);
  color:var(--t1);letter-spacing:-.01em;
  line-height:1.2;
  transition:color var(--dur-f);
}

.nav-item:hover .nav-title,
.nav-item.active .nav-title{color:var(--t0)}

.nav-desc{
  font-size:clamp(.54rem,1.1vw,.6rem);
  color:var(--t4);font-family:var(--f-mono);
  line-height:1.3;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.nav-item-shine{display:none}

.stats-section{
  padding:var(--pad-y) var(--pad-x);
  max-width:var(--page-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(.6rem,1.5vw,1rem);
}

.stats-box{
  background:var(--glass);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:var(--r-xl);
  padding:clamp(.8rem,2.2vw,1.2rem);
  border:1px solid rgba(255,255,255,.04);
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(12px);
  transition:
    opacity var(--dur-s) var(--ease),
    transform var(--dur-s) var(--ease),
    border-color var(--dur-b) var(--ease),
    box-shadow var(--dur-b) var(--ease);
}

.stats-box.visible{opacity:1;transform:translateY(0)}

.stats-box::before{
  content:'';position:absolute;
  top:0;left:25%;right:25%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  transition:left var(--dur-b) var(--ease),right var(--dur-b) var(--ease);
}

.stats-box::after{
  content:'';position:absolute;
  top:-40px;right:-20px;
  width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle,rgba(52,211,153,.02),transparent 70%);
  pointer-events:none;
}

.stats-box:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.07);
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}

.stats-box.visible:hover{transform:translateY(-1px)}
.stats-box:hover::before{left:15%;right:15%}

.stats-box-header{
  display:flex;align-items:center;
  justify-content:space-between;
  margin-bottom:clamp(.6rem,1.5vw,.8rem);
  position:relative;z-index:1;
}

.stats-box h3{
  font-family:var(--f-display);
  font-size:clamp(.74rem,1.5vw,.84rem);
  font-weight:700;letter-spacing:-.02em;
  color:var(--t0);
  display:flex;align-items:center;gap:.35rem;
}

.stats-badge{
  font-family:var(--f-mono);
  font-size:.52rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);
  background:rgba(52,211,153,.06);
  border:1px solid rgba(52,211,153,.1);
  padding:.12rem .4rem;border-radius:var(--r-s);
  flex-shrink:0;
}

.stats-box ul{
  list-style:none;
  display:flex;flex-direction:column;
  gap:clamp(.2rem,.7vw,.3rem);
  position:relative;z-index:1;
}

.stats-box li{
  display:flex;align-items:center;gap:.4rem;
  padding:clamp(.4rem,1.1vw,.5rem) clamp(.5rem,1.3vw,.65rem);
  border-radius:var(--r-m);
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.02);
  font-size:clamp(.68rem,1.3vw,.76rem);
  color:var(--t2);
  position:relative;overflow:hidden;
  transition:
    background var(--dur-f) var(--ease),
    border-color var(--dur-f) var(--ease),
    color var(--dur-f) var(--ease);
  cursor:default;
  font-family:var(--f-body);
}

.stats-box li::before{
  content:'';position:absolute;
  left:0;top:0;bottom:0;width:2px;
  background:var(--accent);
  opacity:0;transition:opacity var(--dur-f);
  border-radius:0 1px 1px 0;
}

.stats-box li:hover{
  background:rgba(52,211,153,.03);
  border-color:rgba(52,211,153,.06);
  color:var(--t0);
}

.stats-box li:hover::before{opacity:1}

.stats-box li .rank{
  font-family:var(--f-mono);
  font-size:clamp(.48rem,.9vw,.54rem);
  color:var(--t4);min-width:16px;font-weight:600;
}

.stats-box li .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.stats-box li .count{
  font-family:var(--f-mono);
  font-size:clamp(.6rem,1.1vw,.68rem);
  font-weight:700;color:var(--accent);
  background:rgba(52,211,153,.06);
  border:1px solid rgba(52,211,153,.08);
  padding:.08rem .35rem;border-radius:var(--r-s);
  white-space:nowrap;flex-shrink:0;
  transition:background var(--dur-f),border-color var(--dur-f);
}

.stats-box li:hover .count{
  background:rgba(52,211,153,.1);
  border-color:rgba(52,211,153,.15);
}

.stats-box li.skeleton{
  background:linear-gradient(90deg,rgba(255,255,255,.01) 25%,rgba(255,255,255,.025) 50%,rgba(255,255,255,.01) 75%);
  background-size:200% 100%;
  animation:shimmer 1.8s linear infinite;
  border-color:transparent;pointer-events:none;
}

@keyframes shimmer{to{background-position:-200% 0}}

#content{
  margin:0 var(--pad-x) clamp(2rem,4.5vw,4rem);
  padding:clamp(.9rem,2.8vw,1.8rem);
  max-width:var(--page-max);
  margin-left:auto;margin-right:auto;
  background:var(--s1);
  border:1px solid rgba(255,255,255,.04);
  border-radius:var(--r-xl);
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(10px);
  animation:contentIn var(--dur-s) var(--ease) .1s forwards;
}

@keyframes contentIn{to{opacity:1;transform:translateY(0)}}

#content::before{
  content:'';position:absolute;
  top:0;left:20%;right:20%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(52,211,153,.1),transparent);
  pointer-events:none;
}

.support-fab{
  position:fixed;
  bottom:clamp(.8rem,2.5vw,1.4rem);
  right:clamp(.8rem,2.5vw,1.4rem);
  z-index:50;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:clamp(.55rem,1.6vw,.7rem) clamp(.8rem,2vw,1.1rem);
  border-radius:var(--r-full);
  background:var(--brand);
  color:#fff;text-decoration:none;
  font-family:var(--f-body);
  font-size:clamp(.72rem,1.4vw,.78rem);
  font-weight:600;
  border:1px solid rgba(52,211,153,.15);
  box-shadow:var(--sh-m),var(--sh-brand);
  opacity:0;transform:scale(.7) translateY(12px);
  transition:
    opacity var(--dur-s) var(--ease-spring),
    transform var(--dur-s) var(--ease-spring),
    box-shadow var(--dur-b) var(--ease),
    border-color var(--dur-b) var(--ease),
    padding var(--dur-b) var(--ease),
    border-radius var(--dur-b) var(--ease),
    width var(--dur-b) var(--ease),
    height var(--dur-b) var(--ease);
}

.support-fab.show{opacity:1;transform:scale(1) translateY(0)}

.support-fab:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 8px 28px rgba(16,185,129,.2);
  border-color:rgba(52,211,153,.25);
}

.support-fab.show:hover{transform:translateY(-1px) scale(1.03)}
.support-fab:active{transform:translateY(0) scale(.96)!important}
.support-fab svg{width:15px;height:15px;flex-shrink:0}

.doc-pre{
  background:rgba(0,0,0,.4);
  padding:clamp(.7rem,1.8vw,1.1rem);
  border-radius:var(--r-l);
  color:var(--t1);
  border:1px solid rgba(255,255,255,.04);
  overflow-x:auto;white-space:pre;
  font-size:clamp(.64rem,1.2vw,.74rem);
  font-family:var(--f-mono);
  line-height:1.8;tab-size:2;
}

.doc-pre::-webkit-scrollbar{height:2px}
.doc-pre::-webkit-scrollbar-thumb{background:var(--s4)}

.card{
  background:rgba(255,255,255,.015);
  border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r-xl);
  padding:clamp(.85rem,2.2vw,1.3rem);
  transition:border-color var(--dur-b) var(--ease),box-shadow var(--dur-b) var(--ease);
  position:relative;overflow:hidden;
}

.card:hover{
  border-color:rgba(255,255,255,.08);
  box-shadow:0 4px 24px rgba(0,0,0,.3);
}

.table{
  width:100%;border-collapse:collapse;
  font-size:clamp(.68rem,1.3vw,.76rem);
}

.table th{
  color:var(--t3);text-align:left;
  padding:clamp(.45rem,1.1vw,.55rem) clamp(.55rem,1.3vw,.7rem);
  border-bottom:1px solid rgba(255,255,255,.05);
  font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;font-size:.68em;
  white-space:nowrap;font-family:var(--f-mono);
}

.table td{
  padding:clamp(.45rem,1.1vw,.55rem) clamp(.55rem,1.3vw,.7rem);
  color:var(--t2);
  border-bottom:1px solid rgba(255,255,255,.02);
  transition:color var(--dur-f);
  font-family:var(--f-body);
}

.table tr:hover td{color:var(--t0)}
.table tr:last-child td{border-bottom:none}

input,select,textarea{
  font-family:var(--f-body)!important;
  background:rgba(0,0,0,.4)!important;
  color:var(--t0)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:var(--r-m)!important;
  padding:clamp(.5rem,1.1vw,.58rem) clamp(.65rem,1.4vw,.85rem)!important;
  font-size:clamp(.74rem,1.3vw,.82rem)!important;
  transition:border-color var(--dur-b),box-shadow var(--dur-b)!important;
  width:100%;outline:none;
}

input:focus,select:focus,textarea:focus{
  border-color:rgba(52,211,153,.2)!important;
  box-shadow:0 0 0 2px rgba(52,211,153,.04)!important;
}

input::placeholder{color:var(--t4)!important}
select option{background:var(--s2);color:var(--t0)}

button{
  font-family:var(--f-body);font-weight:600;
  letter-spacing:.02em;cursor:pointer;
  transition:transform var(--dur-f) var(--ease),opacity var(--dur-f);
}

button:disabled{opacity:.3;cursor:not-allowed;transform:none!important}

.text-cyan{color:var(--accent)}
.text-muted{color:var(--t2)}
.font-mono{font-family:var(--f-mono)}

.toast-container{
  position:fixed;
  top:calc(var(--header-h) + .7rem);
  right:clamp(.5rem,2vw,.7rem);
  z-index:3000;
  display:flex;flex-direction:column;gap:.4rem;
  pointer-events:none;
}

.toast{
  pointer-events:auto;
  background:var(--s2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-m);
  padding:clamp(.5rem,1.3vw,.65rem) clamp(.65rem,1.8vw,1rem);
  font-size:clamp(.68rem,1.3vw,.76rem);
  color:var(--t1);
  display:flex;align-items:center;gap:.45rem;
  box-shadow:var(--sh-l);
  transform:translateX(120%);
  transition:transform var(--dur-s) var(--ease-spring),opacity var(--dur-b);
  max-width:min(340px,85vw);
}

.toast.in{transform:translateX(0)}
.toast.out{opacity:0;transform:translateX(60%)}

@media(min-width:640px){
  .stats-section{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(min-width:1024px){
  .stats-section{
    grid-template-columns:repeat(3,1fr);
    gap:1.1rem;
  }
}

@media(min-width:1340px){
  .stats-section{
    grid-template-columns:repeat(4,1fr);
  }
}

@media(max-width:639px){
  header{
    min-height:auto;
    padding:.5rem .7rem;
    gap:.35rem;
  }

  .brand-dot{width:5px;height:5px}

  .btn-outline span{display:none}
  .btn-outline{
    padding:.4rem;border-radius:var(--r-m);
  }

  .btn-outline svg,
  .btn-outline i{font-size:.85rem}

  #content{
    margin:0 .6rem 4rem;
    padding:.75rem;
    border-radius:var(--r-l);
  }

  .support-fab span{display:none}
  .support-fab{
    padding:0;
    width:44px;height:44px;
    border-radius:50%;
    justify-content:center;
  }
  .support-fab svg{width:18px;height:18px}

  .menu-toggle{
    width:36px;height:36px;
    top:calc(var(--header-h) + .5rem);
    left:.6rem;
  }
  .menu-toggle.scrolled{top:.6rem}
  .menu-toggle svg{width:14px;height:14px}
}

@media(max-width:380px){
  header{padding:.45rem .55rem}

  .brand-title{font-size:.82rem;gap:.35rem}
  .brand-dot{width:4px;height:4px}
  .brand-sub{font-size:.48rem}

  .header-actions{gap:.25rem}
  .btn-outline{padding:.35rem;border-radius:var(--r-s)}

  #content{
    margin:0 .45rem 3.5rem;
    padding:.65rem;
  }

  .stats-box{padding:.7rem}
  .stats-box li{padding:.35rem .5rem;gap:.25rem}
  .stats-box li .rank{min-width:12px;font-size:.44rem}
  .stats-box li .count{font-size:.56rem;padding:.06rem .25rem}

  .nav-item{padding:.45rem .6rem;gap:.5rem;margin:1px .45rem}
  .nav-title{font-size:.72rem}
  .nav-desc{font-size:.5rem}
  .nav-icon{font-size:.8rem}

  .support-fab{width:40px;height:40px;bottom:.6rem;right:.6rem}
  .menu-toggle{width:34px;height:34px}
}

@media(min-width:1600px){
  :root{--page-max:1360px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

@media print{
  .sidebar,.menu-toggle,.sidebar-overlay,.support-fab,
  .grid-overlay,.header-scanner,.toast-container{display:none!important}
  body{background:#fff;color:#000}
  .stats-box,#content{
    background:#fff;border:1px solid #ddd;
    backdrop-filter:none;opacity:1;transform:none;
  }
}