:root{
  --bg:#0b1220; --card:#0f172a; --text:#e5e7eb; --muted:#9ca3af;
  --line:#1f2937; --accent:#38bdf8; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  --glass: rgba(15,23,42,.86);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(56,189,248,.14), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(180deg,#070b14,var(--bg));
  color:var(--text)
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:16px}
.card{
  background:var(--glass);
  border:1px solid rgba(31,41,55,.85);
  border-radius:16px;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
.header{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:14px 14px;border-bottom:1px solid rgba(31,41,55,.85);flex-wrap:wrap
}
.brand{display:flex;gap:10px;align-items:center;min-width:240px}
.logo{
  width:36px;height:36px;border-radius:12px;
  background:radial-gradient(circle at 30% 30%,#7dd3fc,#0284c7);
  box-shadow:0 0 0 3px rgba(56,189,248,.15), 0 10px 25px rgba(56,189,248,.18)
}
.h1{font-size:18px;font-weight:900;letter-spacing:.2px}
.sub{font-size:12px;color:var(--muted)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  border:1px solid rgba(56,189,248,.35);
  background:rgba(56,189,248,.12);
  color:var(--text);
  padding:10px 12px;border-radius:12px;
  font-weight:800;font-size:13px;cursor:pointer;
  transition:transform .08s ease, background .12s ease;
  display:inline-block;
}
.btn:hover{background:rgba(56,189,248,.18)}
.btn:active{transform:translateY(1px)}
.btn.red{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.12)}
.btn.gray{border-color:rgba(156,163,175,.25);background:rgba(156,163,175,.10)}
.grid{display:grid;grid-template-columns:1fr;gap:14px;padding:14px}
@media(min-width:980px){.grid{grid-template-columns:1.6fr .9fr}}
.input,select,textarea{
  width:100%;padding:12px;border-radius:12px;
  border:1px solid rgba(31,41,55,.9);
  background:rgba(2,6,23,.55);
  color:var(--text);outline:none
}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
.row{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:700px){.row{grid-template-columns:1fr 1fr}}
.tablewrap{overflow:auto;border-radius:14px;border:1px solid rgba(31,41,55,.85)}
table{width:100%;border-collapse:collapse;background:rgba(2,6,23,.35)}
th,td{padding:12px;border-bottom:1px solid rgba(31,41,55,.85);text-align:left;white-space:nowrap}
th{color:#bae6fd;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900;
  border:1px solid rgba(31,41,55,.9)
}
.b-ok{background:rgba(34,197,94,.12);color:#bbf7d0;border-color:rgba(34,197,94,.35)}
.b-bad{background:rgba(239,68,68,.12);color:#fecaca;border-color:rgba(239,68,68,.35)}
.b-warn{background:rgba(245,158,11,.12);color:#fde68a;border-color:rgba(245,158,11,.35)}
.notice{padding:12px 14px;border-radius:12px;border:1px solid rgba(56,189,248,.25);background:rgba(56,189,248,.08);color:#e0f2fe}
.err{padding:12px 14px;border-radius:12px;border:1px solid rgba(239,68,68,.25);background:rgba(239,68,68,.08);color:#fee2e2}
.small{font-size:12px;color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.4}
.logbox{
  height:360px; overflow:auto;
  background:rgba(2,6,23,.6);
  border:1px solid rgba(31,41,55,.85);
  border-radius:14px;
  padding:12px;
  white-space:pre-wrap;
}