:root{
  --bg:#0a0f14; --panel:#0f1720; --panel-2:#0c141e; --border:#1d2a3a;
  --text:#e7edf5; --muted:#a7b5c6; --link:#7db3ff; --accent:#3a8cff;
  --ok:#40c463; --warn:#f5a623; --bad:#ff5e57;
  --radius:14px; --radius-sm:10px; --shadow:0 8px 24px rgba(0,0,0,.35);
  --maxw:1140px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;
  color:var(--text);
  background:
    radial-gradient(1000px 500px at 80% -10%, #0c1622 0%, rgba(10,15,20,0.9) 60%),
    radial-gradient(800px 400px at -10% 120%, #0b1624 0%, rgba(10,15,20,0.8) 60%),
    #0a0f14;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw); margin:0 auto; padding:24px}
.header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(6px); background:rgba(12,19,30,.7); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; position:relative}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px; position:relative}
.brand .dot{width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 18px var(--accent)}
.brand .glitch{position:relative; display:inline-block}
.brand .glitch::before,.brand .glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0; clip-path:inset(0 0 0 0);
  opacity:.7; mix-blend-mode:screen; filter:blur(.3px);
}
.brand .glitch::before{transform:translate(1px,0); color:#ff4d77}
.brand .glitch::after{transform:translate(-1px,0); color:#54ffb0}
.brand a { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; }
.brand a:hover { text-decoration:none; opacity:.9 }
.navlinks{display:flex; gap:10px; flex-wrap:wrap}
.navlinks a{padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2)}
.navlinks a:hover{background:#101c2a}
.menu-toggle{ display:none; border:1px solid var(--border); background:var(--panel-2); color:var(--text); border-radius:999px; padding:6px 12px; }
.mobile{display:none}
.hero{padding:40px 0 8px}
.hero h1{font-size:36px; margin:0 0 8px 0; letter-spacing:.4px}
.hero p{color:var(--muted); margin:0}
.grid{display:grid; gap:16px; grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 12; background:linear-gradient(180deg, rgba(18,28,40,0.92), rgba(12,18,26,0.96));
  border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.card h3{margin:0 0 10px 0}
.tools{grid-column:span 12; display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.tool{grid-column:span 6; display:block; padding:18px; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--border); transition:transform .08s ease, background .2s, box-shadow .2s}
.tool:hover{transform:translateY(-1px); background:#101a26; box-shadow:0 0 0 1px rgba(61,132,255,.2), 0 8px 28px rgba(0,0,0,.3)}
.tool h4{margin:0 0 6px 0}
.kv{display:grid; grid-template-columns:220px 1fr; gap:8px}
input[type=text],input[type=url],textarea,select{
  width:100%; padding:12px 12px; border:1px solid var(--border); background:#0a131d;
  color:var(--text); border-radius:var(--radius-sm); outline:none
}
button{
  padding:12px 16px; border:1px solid var(--border); background:#0e1a2a; color:#dbe9ff;
  border-radius:var(--radius-sm); font-weight:700; cursor:pointer
}
button:hover{background:#132236}
.btn{display:inline-flex; align-items:center; gap:8px}
.row{display:flex; gap:10px; flex-wrap:wrap}
.result{
  white-space:pre-wrap; background:#0a131d; border:1px dashed var(--border);
  border-radius:var(--radius-sm); padding:12px; margin:12px 0;
  max-height:42vh; overflow:auto;
}
.result.expanded{max-height:80vh}
.controls{display:flex; gap:8px; align-items:center; margin:8px 0}
.two{display:grid; grid-template-columns:1.1fr 1fr; gap:16px; align-items:start}
.footer{border-top:1px solid var(--border); color:#a7b5c6; padding:24px 0; margin-top:36px}
.notice{padding:10px;border-left:3px solid #445; background:#0b1220; border-radius:8px}
small.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;color:#9fb3c8}
hr{border:0;border-top:1px solid var(--border);margin:18px 0}
body.haxor{ --accent:#00ff88; --link:#56ffa5; background:#050d07; color:#dfffef; }
body.haxor .scanlines::before{ content:''; position:fixed; inset:0; pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.02) 50%, rgba(0,0,0,0) 50%);
  background-size:100% 4px; mix-blend-mode:overlay; opacity:.35; }
body.haxor .brand .glitch::before, body.haxor .brand .glitch::after{ color:#00ffaa }

@media (max-width: 900px){
  .kv{grid-template-columns:1fr}
  .navlinks{ display:none }
  .menu-toggle{ display:inline-flex }
  .navlinks.open{ display:flex; position:absolute; right:16px; top:60px; background:var(--panel-2);
    border:1px solid var(--border); border-radius:14px; padding:10px; flex-direction:column; gap:8px; z-index:60; }
  .navlinks.open a{ display:block; }
  .mobile{display:block}
  .hero h1{font-size:28px}
  .two{grid-template-columns:1fr}
}