:root {
  color-scheme: dark;
  --bg: #09090c;
  --bg-2: #0f0f14;
  --surface: #15151b;
  --surface-2: #1c1c24;
  --line: #262631;
  --line-2: #363644;
  --text: #f2f2f5;
  --muted: #9696a5;
  --accent: #e5383b;
  --accent-hi: #ef5053;
  --accent-fg: #ffffff;
  --ok: #4cc38a;
  --danger: #ef5b5b;
  --r: 12px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
svg.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.i.fill { fill: currentColor; stroke: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
  font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover { background: #262632; border-color: #46465a; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn-danger { color: #ff8f8f; }
.btn-danger:hover { background: #2a1517; border-color: #5a2a2d; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line); }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }

.field { display: grid; gap: 6px; }
.field > span { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.input, select.input {
  width: 100%; min-height: 46px; padding: 0 14px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line-2); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #5f5f6e; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #e5383b26; }
select.input { appearance: none; padding-right: 36px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; flex: none; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 3px #4cc38a2b; }
.error { color: #ff8f8f; font-size: 14px; margin: 0; }
.error:empty { display: none; }
.muted { color: var(--muted); }

.toasts { position: absolute; left: 0; right: 0; top: max(14px, env(safe-area-inset-top)); display: grid; justify-items: center; gap: 8px; pointer-events: none; z-index: 5; padding: 0 16px; }
.toast {
  background: #15151bf2; border: 1px solid var(--line-2); border-radius: 12px;
  padding: 10px 16px; font-weight: 600; box-shadow: 0 8px 30px #0008;
  animation: toast-in .18s ease-out;
}
.toast.out { opacity: 0; transform: translateY(-6px); transition: .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}