:root { --bg:#0b0b0d; --card:#15151a; --line:#26262e; --fg:#f2f2f4; --muted:#9a9aa6; --red:#e0162b; --ok:#2e9e5b; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); min-height:100vh; display:flex; flex-direction:column; }
a { color:#ff6b7a; }
.top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:800; font-size:18px; display:flex; align-items:center; gap:8px; }
.brand small { color:var(--muted); font-weight:500; }
.logo { background:var(--red); color:#fff; width:28px; height:28px; border-radius:7px; display:grid; place-items:center; }
.env { display:flex; gap:12px; align-items:center; color:var(--muted); font-size:14px; }
main { padding:16px; max-width:1200px; width:100%; margin:0 auto; flex:1; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px; overflow-x:auto; }
.narrow { max-width:460px; margin:40px auto; }
h1 { font-size:22px; margin:0 0 12px; } h3 { margin:0 0 12px; font-size:16px; }
label { display:block; margin:10px 0; font-size:14px; color:var(--muted); }
input, select { width:100%; margin-top:4px; padding:10px; border-radius:8px; border:1px solid var(--line); background:#0f0f13; color:var(--fg); font-size:15px; }
.row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .row input, .row select { flex:1; min-width:140px; width:auto; margin:0; }
button { background:var(--red); color:#fff; border:0; border-radius:8px; padding:10px 16px; font-weight:600; cursor:pointer; }
button.ghost { background:transparent; border:1px solid var(--line); }
.err { color:#ff6b7a; min-height:1em; } .muted { color:var(--muted); } .small { font-size:12px; word-break:break-all; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.tabs button { background:transparent; border:1px solid var(--line); color:var(--muted); }
.tabs button.active { background:var(--red); color:#fff; border-color:var(--red); }
.kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; }
.kpi b { display:block; font-size:26px; } .kpi span { color:var(--muted); font-size:13px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.bar { display:grid; grid-template-columns:110px 1fr 50px; gap:8px; align-items:center; margin:6px 0; font-size:13px; }
.bar i { display:block; height:10px; background:var(--red); border-radius:5px; }
table { width:100%; border-collapse:collapse; font-size:13px; } th, td { text-align:left; padding:8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; font-size:13px; } .kv dt { color:var(--muted); } .kv dd { margin:0; word-break:break-all; }
pre { background:#0f0f13; padding:12px; border-radius:8px; overflow:auto; }
code { background:#0f0f13; padding:2px 6px; border-radius:4px; }
.pill { font-size:12px; padding:2px 8px; border-radius:999px; margin-left:8px; } .pill.ok { background:var(--ok); } .pill.bad { background:var(--red); }
.toast { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:var(--red); padding:10px 16px; border-radius:8px; }
footer { color:var(--muted); font-size:12px; text-align:center; padding:16px; }
@media (max-width:600px) { .bar { grid-template-columns:80px 1fr 40px; } }