:root{
  --bg:#000;
  --tile:#0a0a0a;
  --tile-2:#141414;
  --line:#262626;
  --line-bright:#4d4d4d;
  --white:#f5f5f5;
  --dim:#8c8c8c;
  --dimmer:#525252;
  --mono:'JetBrains Mono',monospace;
  --arabic:'IBM Plex Sans Arabic',sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--white); font-family:var(--mono);
  font-size:15px; line-height:1.6; overflow-x:hidden; min-height:100svh;
  display:flex; flex-direction:column;
}
[data-lang="ar"] .prose{ font-family:var(--arabic); }
::selection{ background:var(--white); color:var(--bg); }
a{ color:inherit; text-decoration:none; }
.ltr{ direction:ltr; text-align:left; unicode-bidi:isolate; }
main{ flex:1; }

.noise{
  position:fixed; inset:0; pointer-events:none; z-index:999; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.topbar{ border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:100; }
.topbar-inner{ max-width:1080px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.logo{ font-weight:800; font-size:18px; letter-spacing:-.02em; }
.navlinks{ display:flex; align-items:center; gap:0; font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
.navlinks a{ padding:8px 14px; border:1px solid transparent; transition:background .15s ease,color .15s ease; }
.navlinks a:hover{ color:var(--white); }
.navlinks a.active{ background:var(--white); color:var(--bg); font-weight:700; }
.navlinks .sep{ color:var(--line-bright); }
.topright{ display:flex; align-items:center; gap:10px; }
.clock{ font-size:11px; color:var(--dimmer); }
#langToggle{
  height:30px; padding:0 14px; border:1px solid var(--line); background:transparent; color:var(--white);
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; cursor:pointer;
}
#langToggle:hover{ background:var(--white); color:var(--bg); }

.wrap{ max-width:1080px; margin:0 auto; padding:32px 24px 60px; }

.glitch{ position:relative; display:inline-block; }
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; inset:0; overflow:hidden; opacity:0;
}
.glitch:hover::before{
  opacity:.7; transform:translate(3px,0); clip-path:polygon(0 10%,100% 10%,100% 30%,0 30%);
  animation:glitchTop .6s steps(2,end) infinite;
}
.glitch:hover::after{
  opacity:.7; transform:translate(-3px,0); clip-path:polygon(0 60%,100% 60%,100% 80%,0 80%);
  animation:glitchBottom .5s steps(2,end) infinite;
}
@keyframes glitchTop{ 0%{ transform:translate(3px,0);} 50%{ transform:translate(-3px,0);} 100%{ transform:translate(3px,0);} }
@keyframes glitchBottom{ 0%{ transform:translate(-3px,0);} 50%{ transform:translate(3px,0);} 100%{ transform:translate(-3px,0);} }

.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.tile{ background:var(--tile); padding:24px; display:flex; flex-direction:column; justify-content:center; transition:background .2s ease; }
.tile:hover{ background:var(--tile-2); }
.tile-label{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dimmer); margin-bottom:10px; }
.tile-hero{ grid-column:span 8; grid-row:span 2; padding:40px; justify-content:flex-end; }
.tile-status{ grid-column:span 4; grid-row:span 2; }
.tile-stat{ grid-column:span 3; }
.tile-wide{ grid-column:span 6; }
.tile-full{ grid-column:span 12; }
.tile-nav{ grid-column:span 3; }

.hero-title{ font-size:clamp(38px,7vw,72px); font-weight:800; letter-spacing:-.03em; line-height:.95; }
.hero-sub{ margin-top:16px; font-size:14px; color:var(--dim); max-width:440px; }

.stat-value{ font-size:34px; font-weight:800; letter-spacing:-.02em; }
.stat-sub{ font-size:11px; color:var(--dimmer); margin-top:4px; }

.status-card{ display:flex; align-items:center; gap:14px; }
.status-avatar-wrap{ position:relative; flex-shrink:0; }
.status-avatar{ width:52px; height:52px; border:1px solid var(--line-bright); background:var(--tile-2); object-fit:cover; filter:grayscale(1); }
.status-dot{ position:absolute; bottom:-2px; right:-2px; width:15px; height:15px; background:var(--bg); border:2px solid var(--bg); display:flex; align-items:center; justify-content:center; }
.status-dot::after{ content:""; width:6px; height:6px; }
.status-dot.online::after{ background:var(--white); border-radius:50%; }
.status-dot.idle::after{ border:1px dashed var(--white); width:7px; height:7px; border-radius:50%; }
.status-dot.dnd::after{ background:var(--white); width:7px; height:2px; }
.status-dot.offline::after{ border:1px solid var(--dimmer); border-radius:50%; }
.status-text .name{ font-weight:700; font-size:14px; }
.status-text .state,.status-text .activity{ font-size:12px; color:var(--dim); margin-top:4px; }
.status-fallback{ font-size:12.5px; color:var(--dim); }
.status-fallback a{ color:var(--white); border-bottom:1px dotted var(--dim); }

.nc-num{ font-size:11px; color:var(--dimmer); }
.nc-title{ font-size:16px; font-weight:700; margin-top:8px; }
.nc-desc{ font-size:12px; color:var(--dim); margin-top:4px; }

.marquee-row{ overflow:hidden; white-space:nowrap; }
.marquee-row + .marquee-row{ margin-top:1px; }
.marquee-track{ display:inline-flex; gap:1px; will-change:transform; }
.marquee-track.dir-ltr{ animation:marqLtr 22s linear infinite; }
.marquee-track.dir-rtl{ animation:marqRtl 22s linear infinite; }
@keyframes marqLtr{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes marqRtl{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.lang-chip{ flex-shrink:0; background:var(--tile-2); border:1px solid var(--line); padding:10px 20px; font-size:13px; font-weight:700; }

.page-head{ margin-bottom:1px; }
.page-title{ font-size:clamp(28px,5vw,44px); font-weight:800; letter-spacing:-.02em; }

pre.code{ font-family:var(--mono); font-size:12px; color:#c9c9c7; white-space:pre-wrap; line-height:1.7; }

.gh-repo{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line); font-size:13px; }
.gh-repo:last-child{ border-bottom:none; }
.gh-repo .r-name{ color:var(--white); }
.gh-repo .r-name:hover{ text-decoration:underline; }
.gh-repo .r-meta{ color:var(--dimmer); font-size:11px; }

.empty-state{ padding:60px 20px; text-align:center; color:var(--dim); font-size:14px; }
.empty-state .glyph{ font-size:26px; color:var(--dimmer); margin-bottom:14px; }

.gb-form{ display:flex; flex-direction:column; gap:10px; }
.gb-form input,.gb-form textarea{
  background:var(--tile-2); border:1px solid var(--line); color:var(--white);
  font-family:var(--mono); font-size:13px; padding:12px 14px; width:100%; resize:vertical;
}
.gb-form input:focus,.gb-form textarea:focus{ outline:none; border-color:var(--line-bright); }
.gb-form button{
  align-self:flex-start; background:var(--white); color:var(--bg); border:none;
  font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 22px; cursor:pointer;
}
.gb-form button:hover{ background:#d0d0d0; }
.gb-entry{ padding:16px 0; border-bottom:1px solid var(--line); }
.gb-entry:last-child{ border-bottom:none; }
.gb-entry .gb-name{ font-weight:700; font-size:13px; }
.gb-entry .gb-time{ font-size:10px; color:var(--dimmer); margin-inline-start:8px; }
.gb-entry .gb-msg{ font-size:13.5px; color:#d8d8d6; margin-top:6px; }

.connections{ display:flex; flex-direction:column; }
.connection{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); transition:opacity .15s ease; }
.connection:last-child{ border-bottom:none; }
.connection:hover{ opacity:.7; }
.con-icon{ width:34px; height:34px; background:var(--tile-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.con-name{ font-size:13px; font-weight:700; }
.con-meta{ font-size:11px; color:var(--dimmer); display:block; }

footer{ padding:24px; text-align:center; font-size:11px; color:var(--dimmer); border-top:1px solid var(--line); }
.footer-links{ margin-top:8px; display:flex; gap:16px; justify-content:center; }
.footer-links a:hover{ color:var(--white); }

@media (max-width:820px){
  .tile-hero{ grid-column:span 12; padding:28px; }
  .tile-status{ grid-column:span 12; }
  .tile-stat{ grid-column:span 6; }
  .tile-wide{ grid-column:span 12; }
  .tile-nav{ grid-column:span 6; }
  .navlinks{ order:3; width:100%; justify-content:flex-start; overflow-x:auto; }
}
@media (max-width:520px){
  .tile-stat,.tile-nav{ grid-column:span 12; }
}