:root{
  --bg:#0a0f1f;
  --bg-soft:#0f172a;
  --panel:rgba(15,23,42,.78);
  --panel-strong:rgba(15,23,42,.92);
  --panel-2:rgba(30,41,59,.62);
  --line:rgba(148,163,184,.16);
  --line-strong:rgba(148,163,184,.24);
  --text:#e5eefb;
  --muted:#94a3b8;
  --link:#7dd3fc;
  --accent:#60a5fa;
  --accent-2:#22c55e;
  --danger:#f87171;
  --warn:#fbbf24;
  --shadow:0 24px 80px rgba(2,6,23,.45);
  --radius:18px;
  --radius-sm:14px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(34,197,94,.12), transparent 55%),
    linear-gradient(180deg, #07101f 0%, #0a1020 100%);
  color:var(--text);
  min-height:100vh;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:none;color:#bae6fd}
.container{max-width:1380px;margin:0 auto;padding:24px 20px 48px}
.header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 22px; margin:16px 20px 0;
  border:1px solid var(--line); border-radius:20px;
  background:rgba(7,16,31,.72); backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
}
.title{font-size:18px;font-weight:800;letter-spacing:.01em}
.header .nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge,.status-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid var(--line);
  border-radius:999px;background:rgba(148,163,184,.08);
  color:var(--muted);font-size:13px
}
.badge b,.status-pill b{color:var(--text)}
.card{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.72));
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px; margin:0 0 16px;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(125,211,252,.55), transparent);
  opacity:.65;
}
.app-shell{display:grid;grid-template-columns:290px minmax(0,1fr);gap:20px;align-items:start}
.sidebar{
  position:sticky; top:96px;
  border:1px solid var(--line); border-radius:22px;
  background:linear-gradient(180deg, rgba(7,16,31,.94), rgba(15,23,42,.88));
  box-shadow:var(--shadow); padding:18px;
}
.sidebar-brand{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.sidebar-brand .title-sm{font-size:15px;font-weight:800}
.sidebar-brand .caption{font-size:13px;color:var(--muted);line-height:1.5}
.side-nav{display:flex;flex-direction:column;gap:8px}
.side-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:14px;border:1px solid transparent;
  color:var(--text);background:rgba(148,163,184,.03);
  transition:.18s ease;
}
.side-link:hover{background:rgba(96,165,250,.09);border-color:rgba(125,211,252,.18);transform:translateX(2px);color:#eff6ff}
.side-link.active{background:linear-gradient(180deg, rgba(96,165,250,.18), rgba(96,165,250,.1));border-color:rgba(125,211,252,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.side-link small{color:var(--muted);font-size:12px}
.sidebar-meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:10px}
.content-area{min-width:0}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.page-head h1,.page-head h2{margin:0;font-size:30px;line-height:1.1}
.page-head p{margin:6px 0 0;color:var(--muted)}
h1,h2,h3{margin:0 0 12px}
h2{font-size:24px} h3{font-size:17px;color:#f8fbff}
.small,.muted{color:var(--muted);font-size:13px;line-height:1.6}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}
input,select,textarea,button{font:inherit}
input,select,textarea{
  width:100%; max-width:100%; padding:12px 14px; border-radius:14px;
  border:1px solid rgba(148,163,184,.18); background:rgba(2,6,23,.5); color:var(--text); outline:none;
}
input::placeholder,textarea::placeholder{color:#6b7c97}
input:focus,select:focus,textarea:focus{border-color:rgba(125,211,252,.45);box-shadow:0 0 0 4px rgba(96,165,250,.12)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}.row>.field{min-width:220px;flex:0 0 auto}.row>.grow{flex:1 1 360px;min-width:260px}
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:14px;border:1px solid rgba(125,211,252,.18);
  background:linear-gradient(180deg, rgba(96,165,250,.22), rgba(96,165,250,.12)); color:var(--text); cursor:pointer;
  text-decoration:none; user-select:none; transition:.18s ease;
}
button:hover,.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
button:active,.btn:active{transform:translateY(0)} button[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn-green{border-color:rgba(74,222,128,.25);background:linear-gradient(180deg, rgba(34,197,94,.32), rgba(34,197,94,.16))}
.btn-danger{border-color:rgba(248,113,113,.26);background:linear-gradient(180deg, rgba(239,68,68,.3), rgba(239,68,68,.14))}
.btn-ghost{background:rgba(148,163,184,.05);border-color:rgba(148,163,184,.14);color:#dbeafe}
.notice,.ok,.err{
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(2,6,23,.45);margin:0 0 14px;
}
.notice.ok,.ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.notice.err,.err{border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.08)}
.notice.warn{border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.08)}
table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:rgba(2,6,23,.36)}
th,td{padding:11px 10px;border-bottom:1px solid rgba(148,163,184,.08);font-size:13px;vertical-align:top}
th{text-align:left;color:#f8fbff;background:rgba(15,23,42,.9);font-weight:700}tr:hover td{background:rgba(96,165,250,.06)}tr.bad td{background:rgba(248,113,113,.08)}
code,pre{font-family:var(--mono)} pre{background:rgba(2,6,23,.62);border:1px solid rgba(148,163,184,.14);border-radius:16px;padding:14px;overflow:auto;color:var(--text)}
.footer{margin-top:18px;color:var(--muted);font-size:12px;text-align:center}.big-btn{display:block;width:100%;padding:15px;text-align:center;border-radius:16px;text-decoration:none}
.list-clean{list-style:none;padding:0;margin:0;display:grid;gap:10px}.list-clean li{padding:12px 14px;border-radius:14px;background:rgba(148,163,184,.04);border:1px solid rgba(148,163,184,.08)}
.inline-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width: 1080px){.app-shell{grid-template-columns:1fr}.sidebar{position:static;top:auto}.header{margin:12px 12px 0}.container{padding:18px 12px 40px}}
@media (max-width: 640px){.header{padding:14px 16px}.page-head h1,.page-head h2{font-size:24px}.card{padding:16px}th,td{padding:9px 8px;font-size:12px}}