:root{--bg:#0f1115;--bg-alt:#141820;--panel:#161a23;--text:#e6e6e6;--muted:#9aa0aa;--border:#242a36;--accent:#a78bfa;--accent-2:#7c3aed;--good:#22c55e;--warn:#f59e0b;--fail:#ef4444;--chip:#1f2532}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.5}
img{max-width:100%;height:auto}
a{color:var(--accent)}
.container{max-width:1200px;margin:0 auto;padding:16px}
.topbar{position:sticky;top:0;z-index:10;background:rgba(15,17,21,.9);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
.brand{display:flex;gap:10px;align-items:center}
.app-name{font-weight:700}
.actions .btn{margin-left:8px}

.split{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
@media (max-width: 900px){.split{grid-template-columns:1fr}}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}
.panel h2{margin:0 0 12px;font-size:20px}
.panel h3{margin:16px 0 8px;font-size:16px;color:var(--muted)}

.field{margin-bottom:12px}
.field label{display:block;margin-bottom:6px;color:#ccd2dc}
.field input[type=text],.field input[type=url],.field select,.field textarea{width:100%;padding:10px 12px;background:#0d1016;border:1px solid var(--border);border-radius:10px;color:var(--text);outline:none}
.field textarea{min-height:88px;resize:vertical}
.field input[readonly]{opacity:.9}
.field .copy-row{display:flex;gap:8px}
.field .copy-row input{flex:1}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 700px){.grid{grid-template-columns:1fr}}

.toggles{border:1px dashed var(--border);border-radius:10px;padding:10px;margin:10px 0}
.toggles legend{color:var(--muted);padding:0 6px}
.switch{display:inline-flex;align-items:center;gap:8px;margin-right:12px;color:#ccd2dc}

.btn{background:#1b2231;border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer;transition:all .15s ease}
.btn:hover{border-color:#2b3447;background:#1e2637}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#0a0a0b}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border-color:var(--border)}
.btn.small{padding:6px 10px;border-radius:8px}
.actions-row{display:flex;gap:10px;margin-top:10px}

.alert{border-radius:10px;padding:10px 12px;border:1px solid}
.alert.error{background:#2b1b1f;border-color:#5b2b33;color:#fda4af}
.alert.notice{background:#1a2332;border-color:#263449;color:#c7d2fe}

.card{border:1px solid var(--border);background:#111621;border-radius:12px;padding:12px;margin-bottom:12px}
.row{display:flex;justify-content:space-between;align-items:center}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#101522}
.badge.ok{border-color:#224b35;color:#86efac;background:#0f1a14}
.badge.warn{border-color:#4a3a1d;color:#fde68a;background:#1c1609}
.badge.fail{border-color:#5b2525;color:#fecaca;background:#1c0f0f}
.badge.tiny{font-size:12px;padding:2px 6px}

.labels{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{background:var(--chip);border:1px solid var(--border);padding:6px 8px;border-radius:999px;color:#d6d9e0}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

.history{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.history li{display:flex;align-items:center;gap:8px}
.history .time{color:var(--muted);font-size:12px}

.footer{max-width:1200px;margin:20px auto;padding:12px;color:var(--muted);text-align:center}