:root{
  --bg:#070a0f; --bg2:#0b1020; --txt:#e5e7eb; --muted:#9aa4b2; --border:rgba(148,163,184,.14);
  --card:rgba(14,20,32,.78); --radius:18px;
  --acc:#22c55e; --acc2:#22d3ee; --warn:#f59e0b; --bad:#ef4444;
  --shadow: 0 18px 46px rgba(2, 6, 23, .55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1100px 520px at 15% 10%, rgba(34,211,238,.14), transparent 55%),
    radial-gradient(1000px 520px at 80% 15%, rgba(34,197,94,.10), transparent 55%),
    radial-gradient(900px 520px at 40% 90%, rgba(59,130,246,.10), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color:var(--txt);
}
a{color:inherit;text-decoration:none}
.container{width:min(1120px, 92vw); margin:0 auto}
.topbar{position:sticky;top:0;z-index:20;backdrop-filter: blur(12px); background: rgba(7,10,15,.72); border-bottom:1px solid var(--border)}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; gap:12px; align-items:center}
.brand__logo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;
  background: linear-gradient(135deg, rgba(34,197,94,.20), rgba(34,211,238,.20));
  border:1px solid rgba(34,211,238,.28);
}
.brand__name{font-weight:800}
.brand__tag{font-size:12px;color:var(--muted)}
.nav{display:flex; gap:16px}
.nav a{font-size:14px;color:var(--muted);padding:8px 10px;border-radius:12px}
.nav a:hover{background:rgba(148,163,184,.08); color:var(--txt)}
@media (max-width: 920px){ .nav{display:none} }
.card{border:1px solid var(--border); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow)}
.section{padding:34px 0}
.hero{padding:46px 0 24px}
.grid2{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px}
@media (max-width: 920px){ .grid2{grid-template-columns:1fr} }
h1{margin:0 0 12px; font-size:40px; line-height:1.06}
h2{margin:0 0 8px}
.lead{color:var(--muted); line-height:1.6; margin:0 0 12px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 14px; border-radius:14px; border:1px solid var(--border);
  background: rgba(148,163,184,.06); font-weight:800}
.btn:hover{transform: translateY(-1px); transition:.16s ease; background: rgba(148,163,184,.10)}
.btn--primary{border-color: rgba(34,197,94,.35); background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(34,211,238,.10))}
.btn--danger{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12)}
.pill{display:inline-flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); padding:7px 10px; border-radius:999px;
  border:1px solid rgba(148,163,184,.18); background: rgba(148,163,184,.05)}
.grid3{display:grid; gap:12px; grid-template-columns: repeat(3, 1fr)}
@media (max-width: 920px){ .grid3{grid-template-columns:1fr} }
.tile{padding:16px; border-radius: var(--radius); border:1px solid var(--border); background: rgba(14,20,32,.62)}
.tile:hover{transform: translateY(-2px); transition:.16s ease; border-color: rgba(34,211,238,.24)}
.tile__title{font-weight:800; margin-top:10px}
.tile__desc{color:var(--muted); margin-top:6px; line-height:1.45}
.form{display:grid; gap:12px}
.form__row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
@media (max-width: 720px){ .form__row{grid-template-columns:1fr} }
label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
input, textarea, select{
  width:100%; padding:12px 12px; border-radius:14px; border:1px solid rgba(148,163,184,.18);
  background: rgba(7,10,15,.30); color:var(--txt); outline:none
}
input:focus, textarea:focus, select:focus{border-color: rgba(34,211,238,.35); box-shadow: 0 0 0 4px rgba(34,211,238,.10)}
.footer{padding:26px 0 34px; border-top:1px solid var(--border); color:var(--muted); font-size:13px}
.flash{padding:12px 14px;border-radius:14px;border:1px solid var(--border); margin:10px 0}
.flash.success{border-color: rgba(34,197,94,.30); background: rgba(34,197,94,.10)}
.flash.warning{border-color: rgba(245,158,11,.30); background: rgba(245,158,11,.10)}
.flash.danger{border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.10)}
.flash.info{border-color: rgba(34,211,238,.30); background: rgba(34,211,238,.08)}
.table{width:100%; border-collapse: collapse; overflow:hidden; border-radius:16px; border:1px solid var(--border)}
.table th, .table td{padding:12px; border-bottom:1px solid var(--border); text-align:left; font-size:14px}
.table th{color:var(--muted); font-weight:800}
.table tr:hover td{background: rgba(148,163,184,.05)}
.actions{display:flex; gap:8px; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--border); color:var(--muted)}
.badge.on{border-color: rgba(34,197,94,.30); background: rgba(34,197,94,.10); color: rgba(229,231,235,.92)}
.badge.off{border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.08); color: rgba(229,231,235,.92)}
.sep{height:1px; background: var(--border); margin:18px 0}
.muted{color:var(--muted)}
code{background: rgba(148,163,184,.10); padding:2px 6px; border-radius:8px; border:1px solid rgba(148,163,184,.12)}