/* Auth */
.app[data-mode="auth"] #main { min-height: 100vh; display: grid; place-items: center; align-content: center; padding: 24px 16px; max-width: none; }
.auth-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; }
.auth-card { width: 400px; max-width: 100%; padding: 28px; box-shadow: var(--shadow-2); }
.auth-brand { display: flex; gap: 12px; align-items: center; }
.auth-brand .brand-mark { width: 36px; height: 36px; border-radius: 9px; }
.auth-brand h1 { font-size: 20px; }
.auth-alt { margin-top: 16px; color: var(--text-2); text-align: center; }
/* Setup steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: none; }
.steps-v { grid-template-columns: 1fr; gap: 12px; }
.step { display: flex; gap: 10px; align-items: flex-start; position: relative; }
.step-dot { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--border-strong); color: var(--text-3); background: var(--surface); }
.step-text { display: grid; gap: 1px; font-size: 13px; }
.step-text .muted { font-size: 12.5px; }
.step-done .step-dot { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.step-current .step-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.step-current .step-text strong { color: var(--accent-text); }
.step-error .step-dot { background: var(--danger-bg); border-color: transparent; color: var(--danger); }
.step-todo .step-text strong { color: var(--text-2); }
.steps:not(.steps-v) .step-text .muted { display: none; }
@media (max-width: 640px) { .steps:not(.steps-v) { grid-template-columns: 1fr 1fr; } }
/* Proxy toggle: the one distinctive control */
.proxy-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proxy { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 9px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--text-2); font-weight: 600; font-size: 12.5px; cursor: pointer; transition: background var(--dur), color var(--dur), border-color var(--dur); }
.proxy-knob { width: 18px; height: 18px; border-radius: 50%; background: var(--text-3); order: 2; margin-left: 4px; transition: background var(--dur), transform var(--dur); }
.proxy-on { background: var(--proxy-soft); border-color: var(--proxy); color: var(--proxy); }
.proxy-on .proxy-knob { background: var(--proxy); }
.proxy:disabled { opacity: .6; cursor: progress; }
.proxy-state { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.proxy-fail { background: none; border: 0; padding: 2px 4px; color: var(--danger); cursor: pointer; font-weight: 600; }
.danger-zone { border-color: var(--danger); }
.card > .card-body + .card-body { border-top: 1px solid var(--border); }
.callout ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
@media (max-width: 899px) { .toasts { top: 56px; } .drawer .dialog { width: 100%; } .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; } }