:root { --bg:#f6f7f9; --card:#fff; --text:#16181d; --muted:#667085; --line:#e4e7ec; --brand:#0f766e; --ok:#067647; --bad:#b42318; --wait:#b54708; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1115; --card:#171a21; --text:#e7e9ee; --muted:#98a2b3; --line:#2a2f3a; } }
* { box-sizing: border-box; } body { margin:0; font:15px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--text); }
header { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:var(--text); text-decoration:none; } .brand small { color:var(--brand); }
nav { display:flex; flex-wrap:wrap; gap:14px; align-items:center; } nav a { color:var(--text); } .who { color:var(--muted); }
main { max-width:1100px; margin:0 auto; padding:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin:0 0 16px; }
.grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.split { display:grid; gap:16px; grid-template-columns:1fr 1fr; } @media (max-width:800px) { .split { grid-template-columns:1fr; } }
label { display:block; margin:8px 0; font-size:.9rem; } input, select, textarea { width:100%; padding:8px; margin-top:4px; font:inherit; color:inherit; background:transparent; border:1px solid var(--line); border-radius:6px; }
textarea { min-height:80px; font-family:ui-monospace, monospace; font-size:.85rem; } input[type=checkbox] { width:auto; margin-right:6px; }
button, .button { display:inline-block; padding:8px 14px; border:0; border-radius:6px; background:var(--brand); color:#fff; font:inherit; cursor:pointer; text-decoration:none; }
button.ghost, .button.ghost { background:transparent; color:var(--brand); border:1px solid var(--brand); } button.link { background:none; color:var(--muted); padding:0; text-decoration:underline; }
.inline { display:inline; } .actions { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; font-size:.9rem; }
.table { overflow-x:auto; } pre { white-space:pre-wrap; word-break:break-all; background:var(--bg); padding:10px; border-radius:6px; font-size:.8rem; }
.badge { padding:2px 8px; border-radius:99px; font-size:.8rem; font-weight:600; } .badge.ok { color:var(--ok); border:1px solid var(--ok); }
.badge.bad { color:var(--bad); border:1px solid var(--bad); } .badge.wait { color:var(--wait); border:1px solid var(--wait); }
.muted { color:var(--muted); } .notice { padding:10px 12px; border-left:4px solid var(--wait); background:var(--card); } .error { color:var(--bad); }
.account { font-size:1.4rem; font-weight:700; letter-spacing:.04em; } iframe { width:100%; min-height:640px; border:1px solid var(--line); border-radius:10px; background:#fff; }