/* Private Quake Live server: the password box (public/assets/js/qlpass.js). Theme tokens only. */
.qlp { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 1px solid var(--line); background: var(--bg-2); color: var(--text);
  box-shadow: 6px 6px 0 var(--dim); }
.qlp::backdrop { background: rgba(var(--bg-rgb), .78); backdrop-filter: blur(2px); }
.qlp[open] { animation: qlp-in .14s ease-out; }
@keyframes qlp-in { from { opacity: 0; transform: translateY(6px); } }
.qlp-f { display: flex; flex-direction: column; padding: 28px 30px 24px; }
.qlp-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.qlp-k { font-size: 12px; letter-spacing: .22em; color: var(--text-5); }
.qlp-x { width: 32px; height: 32px; margin: -8px -10px 0 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--text-4); cursor: pointer; }
.qlp-x svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.qlp-x:hover, .qlp-x:focus-visible { color: var(--accent); }
.qlp-t { margin: 8px 0 0; font-weight: 600; font-size: 34px; letter-spacing: .05em; line-height: 1.05; color: var(--qk-name, var(--title)); text-transform: uppercase; }
.qlp-p { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.qlp-l { margin-top: 24px; font-size: 11px; letter-spacing: .22em; color: var(--text-4); }
.qlp-row { display: flex; margin-top: 10px; }
.qlp-row input { flex: 1; min-width: 0; min-height: 48px; padding: 13px 14px; border: 1px solid var(--line); border-right: 0; border-radius: 0; background: var(--bg-3); color: var(--qk-connect, var(--text));
  font: inherit; font-size: 16px; letter-spacing: .08em; }
.qlp-row input:focus { outline: none; border-color: var(--accent); }
.qlp-row input:focus + .qlp-show { border-left-color: var(--accent); }
.qlp-show { flex: none; min-width: 76px; padding: 0 14px; border: 1px solid var(--line); background: var(--bg-3); color: var(--text-4); font: inherit; font-size: 11px; letter-spacing: .2em; cursor: pointer; }
.qlp-show:hover, .qlp-show:focus-visible, .qlp-show[aria-pressed="true"] { color: var(--accent); }
.qlp-rem { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--text-3); cursor: pointer; width: fit-content; }
.qlp-rem input { appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--line); background: var(--bg-3); display: grid; place-content: center; cursor: pointer; }
.qlp-rem input::after { content: ""; width: 8px; height: 8px; background: var(--accent); transform: scale(0); transition: transform .1s; }
.qlp-rem input:checked { border-color: var(--accent); }
.qlp-rem input:checked::after { transform: scale(1); }
.qlp-rem input:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.qlp-act { display: flex; align-items: center; gap: 22px; margin-top: 26px; }
.qlp-go { min-width: 180px; justify-content: center; }
.qlp-cancel { padding: 8px 0; border: 0; background: none; color: var(--text-4); font: inherit; font-size: 13px; letter-spacing: .2em; cursor: pointer; }
.qlp-cancel:hover, .qlp-cancel:focus-visible { color: var(--accent); }
.qlp-note { margin: 22px 0 0; padding-top: 16px; border-top: 1px dashed var(--line-2, var(--line)); font-size: 12px; line-height: 1.8; color: var(--text-4); }
.qlp-note span { color: var(--text-5); }
@media (max-width: 480px) { .qlp-f { padding: 22px 20px 20px; } .qlp-t { font-size: 28px; } .qlp-go { flex: 1; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .qlp[open] { animation: none; } }