.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s-lg) var(--s-xxl);}


.topbar{
  position:sticky;top:0;z-index:20;
  background:#131313;border-bottom:1px solid var(--c-hairline);
}
.topbar-inner{
  max-width:var(--container);margin:0 auto;padding:0 var(--s-lg);
  min-height:var(--nav-h);display:flex;align-items:center;gap:var(--s-md);flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:var(--s-xs);
  font-family:var(--font-display);font-weight:400;letter-spacing:1px;
  font-size:20px;text-transform:uppercase;color:var(--c-ink);
}
.brand .mark{width:14px;height:14px;border-radius:50%;
  background:var(--c-primary);box-shadow:0 0 0 3px rgba(60,255,208,0.18);}
.topbar .spacer{flex:1;}


.online-pill{
  display:inline-flex;align-items:center;gap:var(--s-xxs);
  padding:6px 12px;border:1px solid var(--c-hairline);border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:12px;line-height:1;
  text-transform:uppercase;letter-spacing:0.5px;color:var(--c-ink-subtle);white-space:nowrap;
}
.online-pill .online-dot{
  width:8px;height:8px;border-radius:50%;background:var(--c-success);
  box-shadow:0 0 0 3px rgba(60,255,208,0.18);animation:online-pulse 2.4s ease-in-out infinite;
}
.online-pill .online-num{color:var(--c-ink);font-weight:700;font-size:13px;}
@keyframes online-pulse{0%,100%{opacity:1;}50%{opacity:0.45;}}


.intro{padding:var(--s-xl) 0 var(--s-md);}
.intro h1{margin:6px 0 10px;}
.intro .lead{color:var(--c-ink-muted);font-size:15px;max-width:780px;line-height:1.6;}
.badges{display:flex;gap:var(--s-xs);flex-wrap:wrap;margin-top:var(--s-md);}


.tabs{display:flex;gap:var(--s-lg);margin:var(--s-md) 0 var(--s-lg);
  border-bottom:1px solid var(--c-hairline);}
.tab{
  background:none;border:none;cursor:pointer;padding:10px 2px;
  font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:1.2px;
  color:var(--c-ink-subtle);border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;margin-bottom:-1px;
}
.tab:hover{color:var(--c-ink);}
.tab.active{color:var(--c-primary);border-bottom-color:var(--c-primary);}  


.panel{
  position:relative;background:var(--c-surface-1);
  border:1px solid var(--c-hairline);border-radius:var(--r-card);
  padding:var(--s-lg);margin-bottom:var(--s-md);
}
.panel.xl{border-radius:var(--r-feature);}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);
  margin-bottom:var(--s-sm);}


.row{display:flex;gap:var(--s-md);flex-wrap:wrap;}
.col{flex:1;min-width:300px;}


.footer{border-top:1px solid var(--c-hairline);margin-top:var(--s-xl);
  padding:var(--s-xl) 0;color:var(--c-ink-subtle);font-size:12px;line-height:1.7;}
.footer a{color:var(--c-ink-muted);}
.footer a:hover{color:var(--c-link-hover);}

.footer-links{display:flex;flex-wrap:wrap;gap:var(--s-xs) var(--s-lg);align-items:baseline;}
.footer-item{display:inline-flex;align-items:baseline;gap:var(--s-xs);}
.footer-label{font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--c-ink-tertiary);}
.footer-note{margin-top:var(--s-sm);color:var(--c-ink-tertiary);}

@media (max-width:780px){
  .col{min-width:100%;}
  .intro{padding-top:var(--s-lg);}
}


@media (max-width:560px){
  .wrap{padding-left:var(--s-sm);padding-right:var(--s-sm);}
  .topbar-inner{padding-left:var(--s-sm);padding-right:var(--s-sm);}
}