.auth-gate {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow: hidden;
  background: rgba(244, 248, 255, .92);
  backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease;
}
.auth-gate.open { opacity: 1; pointer-events: auto; }
.auth-gate-halo {
  position: absolute;
  width: min(96vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 130deg, #58dcc7, #7673ff, #2e9ce6, #58dcc7);
  filter: blur(48px);
  opacity: .24;
  animation: auth-orbit 7s linear infinite;
}
.auth-gate-card {
  position: relative;
  width: min(100%, 402px);
  padding: 38px 30px 28px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(243,250,255,.78));
  box-shadow: 0 24px 70px rgba(34, 57, 104, .18), inset 0 1px 0 white;
}
.auth-gate-mark { display:grid; place-items:center; width:54px; height:54px; margin-bottom:25px; border-radius:18px; color:#fff; font:800 30px/1 system-ui; background:linear-gradient(145deg,#295e95,#0d978f); box-shadow:0 10px 22px rgba(26,128,144,.3); }
.auth-gate .eyebrow { display:block; margin-bottom:10px; color:#7d8ca6; font-size:11px; letter-spacing:.17em; font-weight:800; }
.auth-gate h1 { margin:0; color:#17253e; font-size:29px; letter-spacing:-.04em; }
.auth-gate p { margin:12px 0 25px; color:#71809a; line-height:1.65; font-size:14px; }
.auth-gate label { display:block; margin:0 0 8px; color:#485977; font-size:13px; font-weight:700; }
.auth-gate input { box-sizing:border-box; width:100%; height:51px; padding:0 15px; border:1px solid #dce5f1; border-radius:15px; outline:none; background:rgba(255,255,255,.8); color:#182640; font:600 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace; transition:border-color .2s,box-shadow .2s; }
.auth-gate input:focus { border-color:#5e86f3; box-shadow:0 0 0 4px rgba(94,134,243,.13); }
.auth-gate button { display:flex; align-items:center; justify-content:space-between; width:100%; height:54px; margin-top:14px; padding:0 17px 0 20px; border:0; border-radius:16px; color:#fff; background:linear-gradient(110deg,#5b4ee9,#7d45e5 58%,#c150d6); box-shadow:0 12px 24px rgba(111,75,221,.28); font:750 15px/1 system-ui; }
.auth-gate button i { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:rgba(255,255,255,.18); font-style:normal; font-size:19px; transition:transform .2s; }
.auth-gate button:active i { transform:translateX(3px); }
.auth-gate button[disabled] { opacity:.62; }
.auth-gate small { display:block; margin-top:16px; color:#8996ab; text-align:center; font-size:12px; }
@keyframes auth-orbit { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-gate-halo { animation:none; } }
.device-admin { margin:20px 0 6px; padding:22px; border-radius:24px; background:linear-gradient(135deg,#132b4a,#1d5966); color:#f5fbff; box-shadow:0 16px 36px rgba(23,57,83,.18); }
.device-admin h3 { margin:4px 0 0; font-size:21px; }.device-admin .eyebrow { color:#84dcd2; font-size:10px; letter-spacing:.15em; font-weight:800; }.device-admin>p { margin:9px 0 16px; color:#c4dce4; font-size:13px; line-height:1.55; }
.device-invite { display:flex; gap:8px; }.device-invite input { min-width:0; flex:1; height:40px; padding:0 11px; border:0; border-radius:11px; background:rgba(255,255,255,.14); color:#fff; }.device-invite input::placeholder { color:#b8ccd3; }.device-invite button { border:0; border-radius:11px; padding:0 12px; background:#76e2cf; color:#12364a; font-weight:800; }
.latest-invite { margin-top:13px; padding:12px; border-radius:13px; background:rgba(255,255,255,.1); }.latest-invite small { display:block; color:#a9c9d0; margin-bottom:4px; }.latest-invite code { display:block; overflow-wrap:anywhere; color:#fff; font-size:12px; }
.device-list { display:grid; gap:8px; margin-top:14px; }.device-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid rgba(255,255,255,.12); }.device-row span { display:grid; place-items:center; width:29px; height:29px; flex:none; border-radius:9px; background:rgba(118,226,207,.16); color:#92eadb; }.device-row div { min-width:0; flex:1; }.device-row strong,.device-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.device-row small { margin-top:2px; color:#adc9d2; font-size:11px; }.device-row button { border:1px solid rgba(255,255,255,.26); border-radius:9px; padding:7px 9px; background:transparent; color:#fff; font-size:12px; }
.drawer-admin-entry .profile-monogram { background:linear-gradient(145deg,#163c56,#209d8e); color:#a6f7e8; font-size:23px; }
.drawer-admin-entry[hidden] { display:none !important; }
/* Keep every device reachable when the sheet exceeds the viewport. */
.admin-settings-panel.sheet-panel {
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  scrollbar-width:thin;
  scrollbar-color:var(--muted, #77746d) transparent;
  scrollbar-gutter:stable;
}
.admin-settings-panel.sheet-panel::-webkit-scrollbar { display:block; width:8px; }
.admin-settings-panel.sheet-panel::-webkit-scrollbar-track { background:transparent; }
.admin-settings-panel.sheet-panel::-webkit-scrollbar-thumb {
  border:2px solid transparent;
  border-radius:8px;
  background:var(--muted, #77746d);
  background-clip:padding-box;
}
.admin-settings-panel .device-admin { position:relative; margin:16px 0 2px; min-height:270px; background:radial-gradient(circle at 90% 0%,rgba(88,221,196,.26),transparent 36%),linear-gradient(135deg,#102742,#17606b); }
.admin-settings-panel .device-admin::after { content:""; position:absolute; inset:-60% 38% auto -25%; height:90%; border-radius:50%; border:1px solid rgba(132,239,218,.23); box-shadow:0 0 38px rgba(98,224,200,.13); animation:device-beacon 5s ease-in-out infinite; pointer-events:none; }
.device-admin header { position:relative; z-index:1; display:flex; align-items:center; gap:9px; }.device-admin header h3 { flex:1; }.device-admin header i { color:#82ead6; font-style:normal; font-size:10px; animation:device-pulse 1.8s ease-in-out infinite; }
@keyframes device-beacon { 50% { transform:translate(10px,9px) scale(1.06); opacity:.55; } }
@keyframes device-pulse { 50% { opacity:.32; transform:scale(.7); } }
@media (prefers-reduced-motion: reduce) { .admin-settings-panel .device-admin::after,.device-admin header i { animation:none; } }