:root {
  --bg: #0b0b10;
  --panel: #14141c;
  --panel-2: #1b1b26;
  --line: #2a2a38;
  --text: #f2f2f7;
  --muted: #9a9aae;
  --faint: #5f5f73;
  --accent: #ff4f6d;
  --accent-2: #ff8a5c;
  --live: #ff3b4e;
  --ok: #34d399;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: var(--panel-2); border-radius: 10px;
  padding: 9px 14px; font-weight: 600; font-size: 14px; transition: background .15s, transform .08s, border-color .15s;
  white-space: nowrap;
}
.btn:hover { background: #242433; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.btn.danger { color: #ff8a9a; }
.btn.on { background: var(--live); border-color: var(--live); color: #fff; }
.btn:disabled { opacity: .4; pointer-events: none; }
.input {
  width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: #101018; outline: none;
}
.input:focus { border-color: var(--accent); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.logo { font-weight: 800; letter-spacing: -.02em; }
.logo b { background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; flex: none; }
.dot.online { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot.connecting { background: #fbbf24; }
.dot.offline { background: var(--live); }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: #26263a; border: 1px solid var(--line); padding: 10px 16px; border-radius: 999px; font-size: 14px;
  transition: opacity .2s, transform .2s; z-index: 1000; max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 500; padding: 16px; }
.modal-back.open { display: flex; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; width: min(460px, 100%); max-height: 90vh; overflow: auto; }
.modal h2 { margin: 0 0 6px; font-size: 20px; }
.modal .row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

[hidden] { display: none !important; }