:root { --ink:#17211b; --muted:#6c776f; --line:#dce4dd; --paper:#f5f7f2; --panel:#fff; --green:#1e6b4d; --green-dark:#124933; --red:#a7443e; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:radial-gradient(circle at 10% 0%,#e7f1d0 0,transparent 30%),var(--paper); color:var(--ink); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.shell { width:min(1180px,calc(100% - 40px)); margin:auto; padding:48px 0 72px; }
.hero,.panel-title { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.hero { margin-bottom:34px; }
.auth-actions { display:flex; align-items:center; gap:10px; }
.eyebrow { margin:0 0 6px; color:var(--green); font-size:11px; font-weight:800; letter-spacing:.16em; }
h1,h2 { margin:0; letter-spacing:-.035em; line-height:1.08; } h1 { font-size:clamp(32px,5vw,58px); } h2 { font-size:24px; }
.subtitle { margin:12px 0 0; color:var(--muted); }
.status { padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); white-space:nowrap; } .status:before { content:""; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:#a7443e; } .status.online:before { background:#40a566; }
.panel { margin-top:18px; padding:26px; border:1px solid var(--line); background:var(--panel); box-shadow:0 18px 50px rgba(30,58,40,.07); } .panel-title { align-items:center; margin-bottom:22px; }
.form-grid { display:grid; grid-template-columns:1.3fr 1fr 1.3fr auto; align-items:end; gap:14px; } label { display:grid; gap:7px; color:var(--muted); font-size:12px; font-weight:700; } input:not([type=checkbox]) { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:7px; background:#fbfcfa; color:var(--ink); font:inherit; } input:focus { outline:3px solid #d9ed72; border-color:var(--green); }
.check { display:flex; align-items:center; height:44px; gap:8px; white-space:nowrap; } .check input { accent-color:var(--green); }
.button { display:inline-flex; align-items:center; justify-content:center; padding:11px 14px; border:1px solid transparent; border-radius:6px; cursor:pointer; font:700 13px inherit; text-decoration:none; } .button.primary { background:var(--green); color:#fff; } .button.ghost { border-color:var(--line); background:#fff; color:var(--ink); } .button.danger { border-color:#edc9c5; background:#fff; color:var(--red); } .button.small { padding:7px 9px; font-size:12px; }
.table-wrap { overflow-x:auto; } table { width:100%; min-width:780px; border-collapse:collapse; } th { color:var(--muted); font-size:11px; text-align:left; text-transform:uppercase; letter-spacing:.08em; } th,td { padding:14px 10px; border-bottom:1px solid var(--line); vertical-align:middle; } td { color:#4d5a51; } td strong { color:var(--ink); }
.actions { display:flex; flex-wrap:wrap; gap:6px; } .pill { display:inline-block; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:800; } .pill.active { background:#e1f2d9; color:#287145; } .pill.paused { background:#f3e8d8; color:#92601c; }
.message { margin:14px 0; padding:13px 16px; border-left:4px solid var(--green); background:#edf5e9; } .message.error { border-color:var(--red); background:#fff0ed; } .empty { padding:34px 0 14px; color:var(--muted); text-align:center; }
@media (max-width:850px) { .hero { display:block; } .auth-actions { width:max-content; margin-top:18px; flex-wrap:wrap; } .form-grid { grid-template-columns:1fr; } .shell { width:calc(100% - 24px); padding-top:28px; } .panel { padding:18px; } }