.access-locked { overflow:hidden; }
#directory-preview { pointer-events:none; user-select:none; }
.access-scrim { position:fixed; inset:0; z-index:10000; background:rgba(17,25,53,.13); backdrop-filter:blur(1.5px); -webkit-backdrop-filter:blur(1.5px); }
.access-panel { box-sizing:border-box; position:fixed; inset:0 0 0 auto; z-index:10001; width:min(470px,100%); padding:32px 38px; overflow-y:auto; color:#182449; background:rgba(255,255,255,.86); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border-left:1px solid rgba(255,255,255,.9); box-shadow:-20px 0 80px rgba(14,27,61,.16); font:15px/1.6 'Manrope',system-ui,sans-serif; animation:access-enter .55s cubic-bezier(.16,1,.3,1) both; }
.access-brand { font-size:11px; font-weight:800; letter-spacing:.12em; }
.access-brand span { display:block; font-size:9px; letter-spacing:.22em; color:#7b6a93; margin-top:2px; }
.access-lock { width:42px; height:42px; display:grid; place-items:center; border:1px solid #e0d6f6; border-radius:14px; background:linear-gradient(135deg,#f4eafb,#eae5ff); color:#6b2bf5; font:26px system-ui; margin:25px 0 17px; }
.access-eyebrow { margin:0 0 10px; color:#7435c1; font-size:9px; letter-spacing:.12em; font-weight:800; }
.access-panel h1,.access-panel h2 { margin:0 0 14px; color:#0e1b3d; font:750 clamp(30px,4vw,38px)/1.16 'Sora',system-ui,sans-serif; letter-spacing:-1.2px; }
.access-copy { color:#5b6b8c; font-size:13px; line-height:1.65; margin:0 0 20px; }
.access-qr { width:160px; height:160px; padding:6px; box-sizing:border-box; border-radius:14px; background:white; border:1px solid #e5e0f2; margin:0 auto; box-shadow:0 8px 25px #16254708; }
.access-qr svg { display:block; width:100%; height:100%; }
.access-caption { font-size:11px; color:#5b6b8c; text-align:center; margin:8px 0 18px; }
.access-steps { margin:0 0 20px; padding-left:20px; font-size:12px; color:#4e5c79; }
.access-steps li { padding:3px 0 3px 3px; }
.access-steps li::marker { color:#7c3bd1; font-weight:800; }
.access-divider { display:flex; align-items:center; gap:12px; color:#8a8fa1; font-size:10px; margin:16px 0; }
.access-divider::before,.access-divider::after { content:''; flex:1; height:1px; background:#e4e3ee; }
.access-button { box-sizing:border-box; width:100%; border:0; border-radius:10px; padding:13px 14px; background:linear-gradient(115deg,#ad26ce,#6b2bf5); color:white; font:700 12px 'Manrope',system-ui,sans-serif; cursor:pointer; min-height:44px; }
.access-button:disabled { opacity:.55; cursor:default; }
.access-button:focus-visible,.access-panel input:focus-visible,.access-back:focus-visible { outline:3px solid #bb95f7; outline-offset:3px; }
.access-form { margin-top:17px; }
.access-form[hidden] { display:none; }
.access-form label { display:block; font-size:11px; color:#4e5c79; margin-bottom:7px; }
.access-code-row { display:flex; gap:8px; }
.access-code-row input { box-sizing:border-box; width:60%; min-width:0; border:1px solid #d9dcec; border-radius:10px; font:22px/1.3 monospace; letter-spacing:5px; padding:10px 12px; color:#182449; background:#fff; }
.access-code-row .access-button { width:40%; }
#access-status { margin:12px 0 0; font-size:12px; color:#296a54; }
#access-status.access-error { color:#ad3249; }
.access-note { font-size:10px; color:#737e96; line-height:1.8; margin:17px 0 0; text-align:center; }
.access-session { position:fixed; right:18px; bottom:18px; z-index:10001; display:flex; gap:15px; align-items:center; border:1px solid #ded9ee; border-radius:12px; background:#fff; box-shadow:0 8px 24px #0e1b3d18; padding:10px 14px; font:12px system-ui; color:#386651; }
.access-session button { background:#f1ecfc; color:#6631b4; border:0; padding:9px 12px; border-radius:8px; cursor:pointer; }
.access-mobile { margin:0; min-height:100vh; background:radial-gradient(at 0% 0%,#f2ddf6,transparent 65%),linear-gradient(160deg,#f9f8ff,#e9edfa); padding:24px; font-family:system-ui,sans-serif; }
.access-phone { position:relative; inset:auto; margin:5vh auto; width:min(430px,100%); border:1px solid white; border-radius:24px; padding:32px; }
.access-phone .access-copy { margin-bottom:25px; }
.access-back { display:block; text-align:center; margin-top:22px; color:#6b2bf5; font-size:12px; }
@keyframes access-enter { from { opacity:0; transform:translateX(60px); } to { opacity:1; transform:translateX(0); } }
@media(max-height:800px) and (min-width:601px) { .access-panel { padding-top:22px; padding-bottom:22px; } .access-lock { margin-top:15px; margin-bottom:12px; } .access-qr { width:140px; height:140px; } .access-panel h2 { font-size:32px; } }
@media(max-width:600px) { .access-panel:not(.access-phone) { inset:12px; width:auto; max-height:calc(100dvh - 24px); border:1px solid #fff; border-radius:22px; padding:25px; background:rgba(255,255,255,.90); } .access-panel h2 { font-size:32px; } .access-mobile { padding:14px; } .access-phone { margin:2vh auto; padding:26px; } }
@media(prefers-reduced-motion:reduce) { .access-panel { animation:none; } }