:root { color-scheme: dark; --bg:#0b0d12; --card:#141824; --card2:#10131c; --text:#f5f7fb; --muted:#99a3b7; --line:#242b3b; --accent:#8b5cf6; --ok:#22c55e; --danger:#ef4444; --warn:#f59e0b; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 20% 0%, rgba(139,92,246,.18), transparent 34%), radial-gradient(circle at 90% 20%, rgba(34,197,94,.10), transparent 25%), var(--bg); color:var(--text); }
.app { width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:32px 0 56px; }
.hero { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:24px; }
.eyebrow { color:var(--accent); text-transform:uppercase; font-size:12px; letter-spacing:.14em; font-weight:800; }
h1 { margin:.1em 0; font-size: clamp(32px, 5vw, 56px); letter-spacing:-.05em; line-height:.95; }
h2 { margin:0 0 16px; font-size:20px; letter-spacing:-.02em; }
.muted, .hint { color:var(--muted); line-height:1.5; }
.hint { font-size:13px; }
.grid { display:grid; gap:16px; margin-bottom:16px; }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card, .statusCard { background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--card); border:1px solid var(--line); border-radius:24px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.25); margin-bottom:16px; }
.statusCard { min-width:280px; display:flex; gap:12px; align-items:center; margin-bottom:0; }
.dot { width:14px; height:14px; border-radius:999px; background:var(--warn); box-shadow:0 0 0 6px rgba(245,158,11,.12); }
.dot.on { background:var(--ok); box-shadow:0 0 0 6px rgba(34,197,94,.14); }
.dot.off { background:#64748b; box-shadow:0 0 0 6px rgba(100,116,139,.14); }
.statusCard span { display:block; color:var(--muted); font-size:13px; margin-top:3px; }
.formGrid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; }
label { display:block; color:#cbd5e1; font-size:13px; font-weight:700; margin-bottom:12px; }
input, textarea { width:100%; margin-top:7px; background:#0c1019; color:var(--text); border:1px solid #2a3142; border-radius:14px; padding:13px 14px; outline:none; font:inherit; }
textarea { resize:vertical; }
input:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(139,92,246,.14); }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; }
button, .button { appearance:none; border:1px solid #31384b; color:var(--text); background:#1a2030; padding:12px 16px; border-radius:14px; font-weight:800; cursor:pointer; text-decoration:none; font-size:14px; }
button:hover, .button:hover { transform: translateY(-1px); border-color:#46516a; }
.primary { background:linear-gradient(135deg, #7c3aed, #a855f7); border-color:#a855f7; }
.danger { background:linear-gradient(135deg, #dc2626, #ef4444); border-color:#ef4444; }
.secondary { background:#101521; }
.critical { border-color: rgba(239,68,68,.35); }
code, pre { background:#080b11; border:1px solid #232a3a; border-radius:16px; padding:14px; color:#dbeafe; overflow:auto; }
code { display:block; font-size:15px; }
pre { min-height:120px; white-space:pre-wrap; }
.smallLog { min-height:40px; font-size:13px; }
.log { min-height:240px; max-height:460px; }
@media (max-width: 820px) { .hero, .two, .formGrid { grid-template-columns:1fr; display:grid; } .hero { align-items:stretch; } .statusCard { min-width:0; } }