/* ---- Cyber neon theme ---- */

:root{
  --bg-0:#0a0c14; --bg-1:#0f1422; --grid:rgba(0,255,255,0.07);
  --text:#d9e1ff; --muted:#8fa2c9;
  --cy:#00e5ff; --mg:#ff3fd4; --yl:#ffe56b;
  --card:rgba(16,22,40,0.65); --glass:rgba(10,12,20,0.35);
  --br:18px;
  --shadow:0 0 24px rgba(0,229,255,.25),0 0 32px rgba(255,63,212,.15);
}

body{
  margin:0; color:var(--text);
  background:linear-gradient(180deg,#0b0f1c 0%,#090b14 100%);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  min-height:100vh; overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;
  background-image:linear-gradient(transparent 31px,var(--grid) 32px),
                   linear-gradient(90deg,transparent 31px,var(--grid) 32px);
  background-size:32px 32px;opacity:.35;pointer-events:none;
  animation:scan 12s linear infinite;
}
@keyframes scan{0%{transform:translateY(0)}100%{transform:translateY(32px)}}

.container{ max-width:1100px; margin:0 auto; padding:32px 20px; }
header h2{ font-family:Orbitron,Inter,sans-serif; letter-spacing:.04em; font-weight:600; margin:0; }
header h2::after{ content:""; flex:1; height:2px; background:linear-gradient(90deg,var(--mg),transparent 50%); opacity:.7; display:inline-block; }

a[role="button"], button{
  background:linear-gradient(90deg,rgba(0,229,255,.15),rgba(255,63,212,.15));
  border:1px solid rgba(255,255,255,.08);
  color:var(--text); padding:10px 14px; border-radius:12px;
  backdrop-filter:blur(6px); box-shadow:var(--shadow);
}
button.secondary{ background:linear-gradient(90deg,rgba(255,63,212,.12),rgba(0,229,255,.12)); }

article{
  background:var(--card); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--br); padding:18px; box-shadow:var(--shadow); backdrop-filter:blur(8px);
}

.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:880px){ .grid-2{ grid-template-columns:1fr; } }

label{ color:var(--muted); font-size:.95rem; }
input{
  width:100%; padding:10px 12px; margin-top:6px;
  background:var(--glass); border:1px solid rgba(255,255,255,.12);
  color:var(--text); border-radius:12px; outline:none;
  height:42px; line-height:42px; box-sizing:border-box;
  overflow:hidden; clip-path:inset(0 round 12px);
}
input:focus{ border-color:var(--cy); box-shadow:0 0 0 3px rgba(0,229,255,.15); }

table{ width:100%; border-collapse:collapse; }
th,td{ padding:10px 8px; border-bottom:1px solid rgba(255,255,255,.07); }
thead th{ color:var(--yl); font-weight:600; font-family:Orbitron,Inter,sans-serif; }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrap table{ min-width:760px; }
@media(max-width:520px){ .sm-hide{ display:none; } table{ font-size:.95rem; } }

canvas{
  width:100%!important; height:300px!important;
  background:linear-gradient(180deg,rgba(0,229,255,.06),rgba(255,63,212,.06));
  border:1px solid rgba(255,255,255,.08); border-radius:16px;
}
@media(max-width:720px){ canvas{ height:240px!important; } }
@media(max-width:520px){ canvas{ height:200px!important; } }

@media(max-width:720px){
  .container{ padding:22px 14px; }
  header h2{ font-size:clamp(1.1rem,4vw,1.4rem); }
}