/* Sign-in screens and the invite code, in the app's Material look. */
.gate{position:fixed;inset:0;z-index:60;background:var(--surface);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));overflow:auto}
.gate-card{width:100%;max-width:420px;background:var(--surface-low);border-radius:24px;padding:28px 24px 24px;box-shadow:var(--elev1)}
.gate-card .brand{font-size:24px;margin-bottom:24px}
.gate-card h2{font-size:26px;line-height:34px;font-weight:900;margin:0 0 4px}
.gate-card .muted{margin:0 0 4px}
.gate-card .linkish{margin-top:8px;display:inline-block}
.gate-form{display:grid;gap:12px;margin-top:16px}
.gate-form .btn{height:50px;border-radius:25px;font-size:16px}
.gate-card form.field{display:grid;gap:12px}
.invite{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-high);border-radius:12px;padding:12px 16px}
.invite b{font-size:24px;font-weight:500;letter-spacing:.2em}
.pair-code{margin:18px 0 14px;font-size:56px;line-height:1;font-weight:900;letter-spacing:10px;text-align:center;color:var(--primary);font-variant-numeric:tabular-nums;background:var(--surface-c);border-radius:20px;padding:22px 8px}
@media (min-width:700px){.gate-card:has(.pair-code){max-width:560px}.pair-code{font-size:88px}}
.power{display:flex;flex-direction:column;gap:10px;padding:12px 14px;margin:0 0 8px;background:var(--surface-c);border-radius:16px}
.power label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--on-surface-variant)}
.power select{font:inherit;font-size:15px;font-weight:600;color:var(--on-surface);background:var(--surface-low);border:1px solid var(--outline-variant);border-radius:12px;padding:10px 12px}
.power-est{margin:0;font-size:13px}
.power-slot{list-style:none;padding:0}