.pass-code-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    background: rgba(248, 249, 249, 0.82);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 220ms ease;
}

.pass-code-overlay[hidden] { display: none; }
.pass-code-overlay.visible { opacity: 1; }

.pass-code-panel {
    width: min(410px, calc(100vw - 40px));
    padding: 38px 40px 32px;
    border: 1px solid rgba(20, 25, 26, 0.24);
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 22px 70px rgba(14, 19, 20, 0.16);
    text-align: center;
    color: #171b1c;
}

.pass-code-kicker,
.pass-code-room,
.pass-code-message,
.pass-code-cancel,
.pass-code-panel button,
.pass-code-panel input {
    font-family: inherit;
    letter-spacing: 0.18em;
}

.pass-code-kicker { margin: 0 0 12px; font-size: 10px; opacity: 0.55; }
.pass-code-panel h2 { margin: 0; font-size: 25px; font-weight: 400; letter-spacing: 0.28em; }
.pass-code-room { margin: 12px 0 28px; font-size: 11px; opacity: 0.62; }

#pass-code-form { display: grid; gap: 14px; }
.pass-code-panel input {
    width: 100%;
    box-sizing: border-box;
    height: 58px;
    border: 1px solid rgba(20, 25, 26, 0.36);
    background: rgba(255,255,255,0.76);
    color: #111;
    text-align: center;
    font-size: 24px;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.pass-code-panel input:focus { border-color: #111; box-shadow: 0 0 0 3px rgba(20,25,26,0.08); }
.pass-code-panel button {
    min-height: 44px;
    border: 1px solid #181d1e;
    background: #181d1e;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
}
.pass-code-message { min-height: 30px; margin: 18px 0 4px; font-size: 9px; line-height: 1.55; opacity: 0.7; }
.pass-code-cancel { background: transparent !important; color: #181d1e !important; border-color: transparent !important; min-height: 32px !important; opacity: 0.55; }
.pass-code-error { animation: pass-code-shake 280ms ease; }
@keyframes pass-code-shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }