/* Admin server picker for Plexa ID sign-in, in the Plexa brand kit palette:
   graphite #0F1016, panel #181A22, violet #7B5CFF, lavender #B9A8FF, text #ECEBFF. */
html.pid-locked, html.pid-locked body { overflow: hidden; }
.pid-overlay { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(110% 70% at 50% -10%, rgba(123, 92, 255, .16) 0%, rgba(15, 16, 22, 0) 60%), #0F1016; color: #ECEBFF;
  font-family: Sora, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.pid-card { width: 100%; max-width: 420px; padding: 32px 28px 26px; border-radius: 18px; background: #181A22;
  border: 1px solid #262935; box-shadow: 0 40px 90px -40px rgba(4, 4, 10, .9); }
.pid-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 30px; }
.pid-mark { width: 28px; height: 28px; flex: none; }
.pid-word { font-weight: 800; font-size: 21px; letter-spacing: -.06em; line-height: 1; }
.pid-tag { margin-left: 2px; padding: 3px 8px; border-radius: 999px; font: 500 10px/1.3 "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .14em; color: #B9A8FF; background: rgba(123, 92, 255, .12); border: 1px solid rgba(123, 92, 255, .3); }
.pid-title { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.pid-lede { margin: 0 0 22px; color: #C9C7DD; font-size: 14px; line-height: 1.6; }
.pid-servers { display: grid; gap: 10px; }
.pid-server { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 15px 16px;
  border-radius: 12px; border: 1px solid #262935; background: #15161E; color: inherit; font: inherit; cursor: pointer; text-align: left;
  transition: border-color .2s cubic-bezier(.16, 1, .3, 1), background .2s cubic-bezier(.16, 1, .3, 1), transform .1s ease; }
.pid-server:hover { border-color: #33364A; background: #1B1D27; }
.pid-server:focus-visible { outline: 2px solid #7B5CFF; outline-offset: 2px; }
.pid-server:active { transform: translateY(1px); }
.pid-server.on { border-color: rgba(123, 92, 255, .55); background: rgba(123, 92, 255, .08); }
.pid-server.busy { opacity: .6; pointer-events: none; }
.pid-server-name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.pid-server-sub { color: #8E8CA8; font: 500 11px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
.pid-foot { margin: 22px 0 0; color: #8E8CA8; font-size: 12.5px; line-height: 1.6; }
.pid-foot a { color: #B9A8FF; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pid-server { transition: none; } }

/* Plexa ID card on the panels' settings page; uses the panel's own .card and .btn, adds the mark and spacing. */
.pid-hide { display: none !important; }
.pid-native { border-color: rgba(123, 92, 255, .45) !important; }
.pid-native h3 { display: flex; align-items: center; gap: 8px; }
.pid-native h3 .pid-mark { width: 18px; height: 18px; }
.pid-native-body { padding: 4px 16px 16px; }
.pid-native-body p { margin: 0 0 14px; max-width: 64ch; line-height: 1.55; }
.pid-native-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pid-native-link { color: #B9A8FF; font-size: 14px; text-underline-offset: 2px; }