:root {
  color-scheme: dark;
  --bg: #171725;
  --panel: #242338;
  --line: rgba(226, 218, 239, .18);
  --text: #fffaf6;
  --muted: #bbb6ca;
  --mint: #a8e6cf;
  --sky: #bde0fe;
  --ink: #17382e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: radial-gradient(circle at 18% 8%, rgba(205,180,219,.2), transparent 35%), radial-gradient(circle at 88% 92%, rgba(189,224,254,.14), transparent 32%), var(--bg);
}
.shell {
  display: grid;
  place-items: center;
  padding: 20px;
}
.panel {
  width: min(100%, 330px);
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
}
.query-panel {
  width: min(100%, 480px);
  padding: 10px;
  border-radius: 28px;
}
form { display: grid; gap: 12px; }
.query-form {
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 8px;
}
input,
button {
  width: 100%;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
}
input {
  padding: 0 13px;
  outline: none;
  color: var(--text);
  background: transparent;
}
input::placeholder { color: var(--muted); }
.v2 {
  -webkit-text-security: disc;
  text-security: disc;
}
.v2:placeholder-shown {
  -webkit-text-security: none;
  text-security: none;
}
input:focus {
  border-color: rgba(255, 255, 255, .4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05);
}
button {
  cursor: pointer;
  color: var(--ink);
  background: linear-gradient(135deg, var(--mint), var(--sky));
  font-size: 20px;
}
button:focus-visible { outline: 3px solid rgba(189,224,254,.58); outline-offset: 2px; }
.query-form input,
.query-form button {
  margin: 0;
  border-radius: 20px;
}
.query-form button { padding: 0; }
.key-box {
  display: grid;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 12px;
}
.key-box code {
  color: var(--text);
  overflow-wrap: anywhere;
}
.login-stream {
  min-height: 46px;
}
.login-stream-pulse {
  display: block;
  width: 8px;
  height: 8px;
  margin: 19px auto;
  border-radius: 50%;
  background: var(--muted);
  animation: login-stream-pulse 1s ease-in-out infinite alternate;
}
@keyframes login-stream-pulse { to { opacity: .22; } }
.sr,
.trap {
  position: fixed !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #faf6fb;
    --panel: #fffafd;
    --line: rgba(89, 74, 112, .18);
    --text: #373044;
    --muted: #716b80;
  }
  .panel { box-shadow: 0 24px 70px rgba(84, 67, 105, .14); }
}