:root { color-scheme: dark; --bg:#080a0f; --panel:#121620e8; --line:#ffffff18; --text:#f4f6fb; --muted:#8f98aa; --accent:#7c5cff; --good:#4ade80; --bad:#fb7185; --warn:#fbbf24; font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif; }
* { box-sizing: border-box; } body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at top,#20263a 0,#080a0f 45%); }
.glow { position:fixed; pointer-events:none; filter:blur(80px); opacity:.16; border-radius:50%; } .glow-a{width:300px;height:300px;background:var(--accent);right:-120px;top:80px}.glow-b{width:260px;height:260px;background:#26d9d0;left:-130px;bottom:40px}
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid var(--line); background:#080a0fcc; backdrop-filter:blur(14px); position:sticky; top:0; z-index:5; }
.brand { display:flex; gap:12px; align-items:center; color:inherit; text-decoration:none; } .mark { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#7c5cff,#34d399); font-weight:800; } .brand strong{display:block}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.18em;margin-top:2px}
.actions { display:flex; gap:8px; align-items:center; } .status { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; padding:9px 12px; border:1px solid var(--line); border-radius:999px; } .status i{width:7px;height:7px;border-radius:50%;background:#fbbf24}.status.online i{background:var(--good)}.status.offline i{background:var(--bad)}
input, textarea, button { font:inherit; } input { width:160px; height:38px; color:var(--text); background:#0d1119; border:1px solid var(--line); border-radius:10px; padding:0 10px; } button { height:38px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:#171c29; cursor:pointer; padding:0 14px; transition:background .15s; } button:hover{background:#1f2640} button.primary,.btn-primary{background:var(--accent);border-color:transparent}.btn-primary:hover{background:#6b4ce8}
.btn-sm { height:30px; padding:0 10px; font-size:12px; border-radius:8px; } .btn-danger { color:var(--bad); border-color:var(--bad); background:transparent; } .btn-danger:hover { background:var(--bad); color:#0a0a0a; }
.inline-input { width:auto; height:30px; border-radius:8px; font-size:12px; }
main { width:min(1200px, calc(100% - 40px)); margin:0 auto; padding:44px 0; } .hero { margin-bottom:26px; } .hero p { margin:0 0 8px; color:#9d8cff; font-weight:750; font-size:11px; letter-spacing:.17em; } .hero h1 { margin:0; font-size:clamp(34px,5vw,58px); letter-spacing:-.055em; } .hero span { color:var(--muted); }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px; } article, .panel { border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:0 24px 70px #0005; } .metrics article { min-height:130px; padding:20px; display:flex; flex-direction:column; justify-content:space-between; } .metrics span, small { color:var(--muted); font-size:12px; } .metrics strong { font-size:28px; line-height:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grid { display:grid; grid-template-columns:1fr 1.3fr; gap:12px; } .panel { padding:22px; min-width:0; } .span { grid-column:1 / -1; } h2 { margin:0 0 16px; font-size:18px; } .panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.session-list { display:grid; gap:10px; margin-top:14px; } .session-card { border:1px solid var(--line); border-radius:14px; padding:14px; background:#0d1119; transition:border-color .15s; } .session-card.disabled { opacity:.5; }
.session-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; } .session-info { display:flex; align-items:center; gap:9px; } .session-info b { font-size:14px; } .session-info small { font-size:11px; color:var(--muted); }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; } .dot-ok { background:var(--good); } .dot-cd { background:var(--warn); } .dot-off { background:var(--muted); }
.session-actions { display:flex; gap:6px; } .session-stats { margin-top:10px; display:flex; gap:16px; font-size:12px; color:var(--muted); flex-wrap:wrap; } .session-stats .err { color:var(--bad); }
.empty-state { min-height:100px; display:grid; place-items:center; color:var(--muted); border:1px dashed var(--line); border-radius:12px; }
.table { max-height:330px; overflow:auto; } table { width:100%; border-collapse:collapse; font-size:13px; } th,td { text-align:left; padding:11px; border-bottom:1px solid var(--line); } th { color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; } td:nth-child(2){color:#9d8cff}
.lab { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; } textarea, pre { min-height:330px; margin:0; padding:16px; background:#090c12; color:#dbe3ef; border:0; outline:0; font:12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; resize:vertical; white-space:pre-wrap; overflow:auto; } textarea { border-right:1px solid var(--line); }
.login-wrap { min-height:100vh; display:grid; place-items:center; } .login-card { width:340px; padding:36px; border:1px solid var(--line); border-radius:20px; background:var(--panel); box-shadow:0 24px 70px #0005; text-align:center; } .login-card h1 { margin:0 0 4px; font-size:28px; } .login-card p { margin:0 0 24px; color:var(--muted); font-size:13px; } .login-card label { display:block; text-align:left; font-size:12px; color:var(--muted); margin-bottom:6px; } .login-card input { width:100%; margin-bottom:16px; } .login-card button { width:100%; }
@media (max-width:900px){.metrics{grid-template-columns:1fr 1fr}.grid,.lab{grid-template-columns:1fr}.span{grid-column:auto}textarea{border-right:0;border-bottom:1px solid var(--line)}.topbar{height:auto;padding:14px;align-items:flex-start}.actions{flex-wrap:wrap;justify-content:flex-end}.status{display:none}} @media (max-width:520px){main{width:calc(100% - 24px)}.metrics{grid-template-columns:1fr}.brand small{display:none}input{width:110px}}