:root{
  --bg:#020617;
  --panel:rgba(15,23,42,.74);
  --line:#1e2a44;
  --green:#22c55e;
  --cyan:#22d3ee;
  --red:#ef4444;
  --amber:#fbbf24;
  --fg:#e6f2ff;
  --muted:#7c8db5;
  --mono:"JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace;
  --display:"Orbitron", var(--mono);
  --radius:18px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:clamp(12px,3vw,32px);
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
#rain{
  position:fixed; inset:0; z-index:0;
  opacity:.42; pointer-events:none;
}
.scanlines{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode:overlay; opacity:.7;
  animation:scanDrift 8s linear infinite;
}
.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,.78) 100%);
}
.alert-flash{
  position:fixed; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(circle at 50% 30%, rgba(239,68,68,.55), rgba(239,68,68,0) 70%);
  opacity:0;
  animation:alertPulse 6.5s ease-in-out infinite;
  transition:opacity .25s ease;
}
.alert-flash.hit{ opacity:.5; }

.console{
  position:relative; z-index:5;
  width:min(940px, 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px rgba(34,197,94,.08), 0 0 60px rgba(34,197,94,.10), 0 30px 90px rgba(0,0,0,.6);
  overflow:hidden;
  animation:consoleIn .5s cubic-bezier(.2,.8,.25,1) both;
}
.console::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(34,197,94,.06), rgba(0,0,0,0) 30%);
}
.bar{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(2,6,23,.72);
  font-size:11.5px; color:var(--muted);
}
.dots{ display:inline-flex; gap:6px; flex:0 0 auto; }
.dots i{ width:10px; height:10px; border-radius:50%; display:block; }
.dots i:nth-child(1){ background:#ef4444; }
.dots i:nth-child(2){ background:#fbbf24; }
.dots i:nth-child(3){ background:#22c55e; }
.path{
  flex:1; min-width:0;
  color:#8df0b0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  direction:ltr; text-align:left;
}
.rec{ display:inline-flex; align-items:center; gap:6px; color:#ff9a9a; letter-spacing:.2em; flex:0 0 auto; }
.rec b{ width:8px; height:8px; border-radius:50%; background:var(--red); animation:blink 1.1s steps(1,end) infinite; }
.log{
  padding:16px 18px 6px;
  font-size:12.5px; line-height:1.85;
  min-height:150px;
  direction:ltr; text-align:left;
  word-break:break-word;
}
.log .line{ display:flex; gap:8px; animation:lineIn .18s ease both; }
.log .tag{ flex:0 0 auto; font-weight:700; }
.log .cmd{ color:#7fe3ff; }
.log .ok .tag{ color:var(--green); }
.log .warn .tag{ color:var(--amber); }
.log .bad{ color:#ffd7d7; }
.log .bad .tag{ color:var(--red); }
.log .line::after{ content:""; }
.log .line.typing .txt::after{
  content:"▊"; margin-left:2px; color:var(--green);
  animation:blink .8s steps(1,end) infinite;
}

.hero{
  padding:8px 20px 26px;
  text-align:center;
  border-bottom:1px solid rgba(30,42,68,.6);
}
.kicker{
  margin:0 0 10px; font-size:10.5px; letter-spacing:.42em;
  color:#ff8f8f; text-transform:uppercase;
  animation:pulseSoft 2.4s ease-in-out infinite;
}
.glitch{
  position:relative;
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(34px, 10.5vw, 78px);
  letter-spacing:.05em;
  color:#fff;
  text-shadow:0 0 26px rgba(239,68,68,.55), 0 0 60px rgba(239,68,68,.28);
  animation:heroIn .7s .7s cubic-bezier(.2,.8,.25,1) both;
}
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
  -webkit-clip-path:inset(0 0 52% 0); clip-path:inset(0 0 52% 0);
}
.glitch::before{ color:#22d3ee; text-shadow:none; animation:glitchA 3.6s steps(2,end) infinite; }
.glitch::after{ color:#ef4444; text-shadow:none; -webkit-clip-path:inset(48% 0 0 0); clip-path:inset(48% 0 0 0); animation:glitchB 4.1s steps(2,end) infinite; }
.name{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
  gap:6px 20px;
  margin:14px 0 6px;
  font-family:var(--display); font-weight:900;
  font-size:clamp(28px, 8vw, 58px);
  color:#d7ffe6;
  text-shadow:0 0 20px rgba(34,197,94,.65), 0 0 60px rgba(34,197,94,.3);
  animation:heroIn .8s 1.05s cubic-bezier(.2,.8,.25,1) both;
}
.name .ar{
  font-family:"Noto Naskh Arabic", "Segoe UI", Tahoma, serif;
  font-size:.82em; color:#a8f0ff;
  text-shadow:0 0 22px rgba(34,211,238,.55);
}
.ar-sub{
  margin:2px 0 0;
  font-family:"Noto Naskh Arabic", "Segoe UI", Tahoma, serif;
  font-size:clamp(14px, 4vw, 19px);
  color:#ff9f9f; letter-spacing:.02em;
  animation:heroIn .8s 1.3s cubic-bezier(.2,.8,.25,1) both;
}

.meters{ padding:20px 20px 6px; }
.meter + .meter{ margin-top:12px; }
.meter-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:10.5px; letter-spacing:.16em; color:var(--muted);
  direction:ltr;
}
.meter-top .pct{ color:#9ff7c0; font-weight:700; }
.track{
  margin-top:6px; height:9px; border-radius:99px;
  background:#081020; border:1px solid var(--line); overflow:hidden;
}
.track i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, #15803d, var(--green), var(--cyan));
  box-shadow:0 0 14px rgba(34,197,94,.6);
  transition:width 1.15s cubic-bezier(.25,.8,.3,1);
}
.grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(158px, 1fr));
  padding:22px 20px;
}
.stat{
  border:1px solid var(--line); border-radius:12px;
  background:rgba(2,6,23,.62);
  padding:12px 14px;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.stat:hover{ transform:translateY(-2px); border-color:rgba(34,197,94,.45); box-shadow:0 10px 26px rgba(0,0,0,.45); }
.stat .k{ display:block; font-size:9.5px; letter-spacing:.18em; color:var(--muted); }
.stat .v{
  display:block; margin-top:7px;
  font-family:var(--display); font-weight:700; font-size:17px; color:#eaf4ff;
}
.stat .v.green{ color:#8df0b0; }
.stat .v.red{ color:#ff8f8f; }
.foot{
  padding:18px 20px 20px;
  border-top:1px dashed rgba(30,42,68,.85);
  text-align:center;
}
#jokeBtn{
  font-family:inherit; font-size:13px; cursor:pointer;
  padding:11px 20px; border-radius:11px;
  color:#c9ffdd;
  border:1px solid rgba(34,197,94,.5);
  background:rgba(34,197,94,.12);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
#jokeBtn:hover{ background:rgba(34,197,94,.24); transform:translateY(-2px); box-shadow:0 12px 30px rgba(34,197,94,.22); }
#jokeBtn:focus-visible, .modal-card button:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.disclaimer{
  margin:12px 0 0; font-size:10.5px; line-height:1.7;
  color:#55628a; letter-spacing:.03em;
}

.modal{
  position:fixed; inset:0; z-index:20;
  display:grid; place-items:center;
  padding:20px;
  background:rgba(2,6,23,.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.modal[hidden]{ display:none; }
.modal-card{
  width:min(520px, 100%);
  border:1px solid rgba(34,197,94,.45); border-radius:16px;
  background:#0b1222;
  padding:26px 24px;
  text-align:center;
  box-shadow:0 0 50px rgba(34,197,94,.18), 0 30px 80px rgba(0,0,0,.6);
  animation:popIn .32s cubic-bezier(.2,.9,.3,1.1) both;
}
.modal-card h3{
  margin:0 0 12px; font-family:var(--display); font-weight:900;
  font-size:clamp(19px, 5vw, 25px); color:#8df0b0; letter-spacing:.1em;
}
.modal-card p{ margin:0 0 12px; font-size:13.5px; color:#c3d2ec; }
.modal-card .m-ar{
  font-family:"Noto Naskh Arabic", "Segoe UI", Tahoma, serif;
  font-size:15px; line-height:1.9; color:#9de7ff;
}
.modal-card button{
  margin-top:6px; font-family:inherit; font-size:13px; cursor:pointer;
  padding:11px 22px; border-radius:11px; color:#04140b;
  border:none; background:linear-gradient(90deg, #22c55e, #22d3ee);
  transition:transform .16s ease, filter .16s ease;
}
.modal-card button:hover{ transform:translateY(-2px); filter:brightness(1.08); }

.console.shake{ animation:shake .5s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes consoleIn{ from{ opacity:0; transform:translateY(18px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes heroIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes lineIn{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
@keyframes popIn{ from{ opacity:0; transform:scale(.94) translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes blink{ 50%{ opacity:0; } }
@keyframes scanDrift{ from{ transform:translateY(0); } to{ transform:translateY(3px); } }
@keyframes pulseSoft{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
@keyframes alertPulse{ 0%,84%,100%{ opacity:0; } 87%,92%{ opacity:.22; } }
@keyframes shake{
  10%,90%{ transform:translateX(-2px); }
  20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-7px); }
  40%,60%{ transform:translateX(7px); }
}
@keyframes glitchA{
  0%,72%,100%{ transform:translate(0,0); opacity:0; }
  74%{ transform:translate(-4px,-3px); opacity:.9; }
  78%{ transform:translate(3px,2px); opacity:.7; }
  82%{ transform:translate(-2px,1px); opacity:.5; }
  86%{ transform:translate(0,0); opacity:0; }
}
@keyframes glitchB{
  0%,70%,100%{ transform:translate(0,0); opacity:0; }
  73%{ transform:translate(4px,3px); opacity:.85; }
  77%{ transform:translate(-3px,-2px); opacity:.65; }
  81%{ transform:translate(3px,-1px); opacity:.45; }
  85%{ transform:translate(0,0); opacity:0; }
}
@media (max-width:520px){
  .log{ font-size:11.5px; padding:14px 14px 4px; min-height:132px; }
  .hero{ padding:4px 14px 20px; }
  .meters{ padding:16px 14px 4px; }
  .grid{ padding:18px 14px; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .stat{ padding:10px; }
  .stat .v{ font-size:15px; }
  .foot{ padding:16px 14px; }
  .path{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .glitch::before,.glitch::after{ display:none; }
  .scanlines{ opacity:.35; }
  .alert-flash{ opacity:.08; }
}