/* Professional, responsive, dark-first UI */
:root{
  --bg:#0a0f14; --fg:#e6eef8; --muted:#9bb0c5; --card:#111926; --line:#1c2a3a;
  --accent:#50d0e8; --good:#51cf66; --bad:#ff6b6b;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6fafc; --fg:#0c2033; --muted:#57738f; --card:#ffffff; --line:#d6e0ea; }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0d1520,#0a0f14)}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:36px;height:36px;border-radius:10px;background:#0e2a38;color:var(--accent);display:grid;place-items:center;font-weight:700}
.titles h1{font-size:18px;margin:0}
.titles .sub{margin:0;color:var(--muted);font-size:12px}
.right button{background:#123; color:var(--fg); border:1px solid var(--line); padding:8px 10px; border-radius:8px; cursor:pointer}
main{max-width:980px;margin:20px auto;padding:0 12px;display:grid;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 14px 10px 14px}
h2{margin:6px 0 12px 0;font-size:16px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0}
label{font-size:14px}
input[type="url"],input[type="text"],select,textarea{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#0c1522;color:var(--fg)}
textarea{min-height:140px;width:100%}
button{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#132538;color:var(--fg);cursor:pointer}
button:active{transform:translateY(1px)}
.small{font-size:12px}
.muted{color:var(--muted)}
.log{background:#08101a;border:1px solid var(--line);border-radius:8px;padding:10px;max-height:220px;overflow:auto}
.pill{border-radius:999px;background:#0e1d2b;border:1px solid var(--line)}
.pill.active{outline:2px solid var(--accent)}
.hidden{display:none}
.tablewrap{overflow:auto;max-height:420px;border:1px solid var(--line);border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
.switch{display:flex;align-items:center;gap:6px}
.foot{max-width:980px;margin:0 auto 30px auto;padding:0 12px}
code{background:rgba(127,127,127,.08);padding:2px 6px;border-radius:6px}