:root{--bg:#050404;--card:rgba(0,0,0,.45);--stroke:rgba(255,140,0,.22);--txt:#f6f2ef;--mut:rgba(255,255,255,.72);--a1:#ff3b2f;--a2:#ff8a00;--r:22px}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;color:var(--txt);
background:radial-gradient(1100px 600px at 15% 10%, rgba(255,138,0,.18), transparent 55%),
radial-gradient(900px 520px at 85% 12%, rgba(255,60,60,.14), transparent 55%),
linear-gradient(180deg,#0b0707,var(--bg));}
a{color:var(--a2);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:26px 18px 120px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--stroke);border-radius:999px;background:rgba(0,0,0,.35);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:12px}.brand img{width:44px;height:44px;border-radius:12px}
.brand .t1{font-weight:800;font-size:20px;line-height:1}.brand .t2{font-size:12px;color:var(--mut)}
.navlinks{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
.pill{padding:10px 14px;border-radius:999px;border:1px solid var(--stroke);background:rgba(0,0,0,.35);color:var(--txt);transition:.18s}
.pill:hover{transform:translateY(-2px);border-color:rgba(255,140,0,.45);box-shadow:0 0 0 3px rgba(255,138,0,.12)}
.pill.primary{border:none;background:linear-gradient(90deg,var(--a1),var(--a2));font-weight:900}
.hero{margin-top:22px;padding:34px 30px;border:1px solid var(--stroke);border-radius:var(--r);
background:linear-gradient(135deg, rgba(255,80,40,.10), rgba(255,138,0,.06));}
.h1{font-size:44px;margin:0 0 8px;font-weight:900} .lead{margin:0 0 18px;color:var(--mut);max-width:72ch}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.card{padding:16px;border:1px solid var(--stroke);border-radius:var(--r);background:var(--card);backdrop-filter:blur(10px);transition:.18s}
.card:hover{transform:translateY(-3px);border-color:rgba(255,138,0,.45);box-shadow:0 20px 70px rgba(0,0,0,.55)}
.card h3{margin:0 0 6px;font-size:18px} .card p{margin:0;color:var(--mut);font-size:13.5px;line-height:1.4}
.flash{margin-top:14px;padding:12px 14px;border-radius:14px;border:1px solid var(--stroke);background:rgba(0,0,0,.35)}
.flash.good{border-color:rgba(0,255,140,.25)} .flash.warn{border-color:rgba(255,180,0,.25)} .flash.bad{border-color:rgba(255,80,80,.25)}
.form{max-width:460px;margin:26px auto;padding:20px;border-radius:var(--r);border:1px solid var(--stroke);background:rgba(0,0,0,.35)}
.form h2{margin:0 0 6px;font-size:28px} .form .sub{margin:0 0 16px;color:var(--mut)}
.inp{width:100%;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.40);color:var(--txt);outline:none}
.inp:focus{border-color:rgba(255,138,0,.45);box-shadow:0 0 0 3px rgba(255,138,0,.12)}
.row{display:flex;gap:10px} .row>*{flex:1}
.btn{width:100%;padding:12px 14px;border-radius:14px;border:none;background:linear-gradient(90deg,var(--a1),var(--a2));color:#fff;font-weight:900;cursor:pointer;transition:.18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,70,30,.22)}
.smalllinks{display:flex;justify-content:space-between;margin-top:12px;font-size:13px;color:var(--mut)}
.footer{margin-top:38px;color:rgba(255,255,255,.55);font-size:12px;text-align:center}
.widget{position:fixed;right:18px;bottom:18px;width:min(380px,calc(100vw - 36px));border-radius:18px;border:1px solid var(--stroke);background:rgba(0,0,0,.55);backdrop-filter:blur(10px);overflow:hidden}
.widget header{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.widget .body{padding:10px 12px}
.wrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0}
.dot{width:10px;height:10px;border-radius:999px;background:#999}
.dot.on{background:#2cff9a} .dot.off{background:#ff4b4b}
.wname{display:flex;align-items:center;gap:10px;min-width:0}
.wname span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wmeta{font-size:12px;color:rgba(255,255,255,.70);white-space:nowrap}
.widget .toggle{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:6px 10px;cursor:pointer}
@media(max-width:860px){.grid{grid-template-columns:1fr}.h1{font-size:34px}}


/* responsive */

@media (max-width: 900px){
  .container{padding:18px 14px 14px}
  .hero{padding:26px 20px}
  .hero h1{font-size:44px}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .nav{flex-direction:column;align-items:stretch;border-radius:22px;padding:12px}
  .navlinks{justify-content:flex-start}
  .pill{padding:10px 12px}
  .hero{padding:22px 16px}
  .hero h1{font-size:34px;line-height:1.08}
  .grid{grid-template-columns:1fr}
  .card{padding:16px}
  .status-widget{right:12px;left:12px;bottom:12px;max-width:none}
  .table-wrap{overflow:auto}
}
@media (max-width: 420px){
  .brand .t1{font-size:18px}
  .brand img{width:38px;height:38px}
  .hero h1{font-size:30px}
}