:root{
  --bg:#000; --panel:#0a0f14; --card:#0e1620; --text:#e6f7ff; --muted:#8ba3ad;
  --accent:#00ffff; --accent-2:#22d3ee; --radius:18px; --gap:14px;
  --ring:0 0 0 .25rem rgba(0,255,255,.25); --shadow:0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,rgba(0,255,255,.15),transparent 60%),var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-2)}
.container{max-width:1100px;margin:0 auto;padding:28px}
.header{position:sticky;top:0;z-index:30;backdrop-filter:blur(8px);background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,.4));border-bottom:1px solid rgba(0,255,255,.15)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 28px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.5px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent)}
.nav a,.nav button{color:var(--text);background:transparent;border:none;font-weight:600;padding:10px 14px;border-radius:12px}
.nav a.active{background:rgba(0,255,255,.12)} .btn{background:linear-gradient(180deg,rgba(0,255,255,.18),rgba(0,255,255,.08));border:1px solid rgba(0,255,255,.35);color:var(--text);border-radius:14px;padding:12px 16px;font-weight:700;box-shadow:var(--shadow);cursor:pointer}
.btn:hover{transform:translateY(-1px);border-color:rgba(0,255,255,.6)}
.grid{display:grid;gap:var(--gap)} .grid.cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid rgba(0,255,255,.12);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card .body{padding:16px}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;margin-top:28px}
.hero .panel{background:linear-gradient(180deg,rgba(0,255,255,.07),rgba(0,255,255,.03));border:1px solid rgba(0,255,255,.2);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.kicker{color:var(--accent-2);text-transform:uppercase;font-size:.8rem;letter-spacing:.18rem}
h1{margin:10px 0 8px;font-size:clamp(28px,2.8vw + 12px,44px)} .mono{color:var(--muted)}
.input,input,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(0,255,255,.2);background:#0a121a;color:var(--text);outline:none}
input:focus,select:focus{box-shadow:var(--ring);border-color:var(--accent)} .form{display:grid;gap:12px} .row{display:flex;gap:12px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(0,255,255,.12);border:1px solid rgba(0,255,255,.25)}
.feed-item{padding:14px 16px;border-bottom:1px dashed rgba(0,255,255,.12)}
#errbar{position:fixed;left:16px;bottom:16px;background:#1f2937;border:1px solid #ef4444;color:#fff;padding:10px 12px;border-radius:10px;display:none;z-index:50}