/* Only the new application's authentication and service surfaces. */
body{--panel:var(--surface)}
.auth-page{max-width:1000px;margin:8vh auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:32px}.auth-art img{width:150px;filter:drop-shadow(0 0 28px #ffffff14)}.auth-art h1{font-size:clamp(32px,4vw,54px);letter-spacing:-.05em}.auth-art p{color:var(--muted)}.auth-card{border:1px solid var(--line);background:var(--panel);border-radius:22px;padding:36px;display:grid;gap:20px}.auth-card h2{font-size:25px;line-height:1.3}.auth-card label{display:grid;gap:10px;font-size:13px}.auth-card input{width:100%;min-height:48px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:10px;font:inherit}.auth-secondary{display:grid;gap:18px;justify-items:start}.auth-card #auth-status{font-size:13px;line-height:1.6}.pair-code{display:block;font-size:clamp(25px,6vw,48px);letter-spacing:.12em;text-align:center;padding:24px 0}.profile-summary{overflow-wrap:anywhere}.button-row{flex-wrap:wrap}.notice-list{max-height:42vh;overflow:auto;margin:20px 0}.notification-item{align-items:flex-start!important}.notification-item span{min-width:0}.notification-item b,.notification-item small,.notification-item time{display:block;overflow-wrap:anywhere}.notification-item small{margin:8px 0;line-height:1.5}.notification-item time{font-size:11px;color:var(--muted)}.notification-item.read{opacity:.65}#push-status{font-size:13px;line-height:1.6}.archive-transcript article{padding:18px 0;border-bottom:1px solid var(--line)}.archive-transcript p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.7}#unread-badge{position:absolute;right:0;top:0;font-size:9px;min-width:14px;border-radius:8px;background:var(--accent);color:var(--bg);padding:2px}.header-tools .icon-button{position:relative}#toast{top:calc(85px + env(safe-area-inset-top));bottom:auto!important;right:24px;left:auto!important;max-width:min(390px,calc(100vw - 32px));transform:translateX(120%)!important;transition:transform .28s,opacity .28s}#toast.show{transform:translateX(0)!important}.route-content{min-width:0}.signed-out #mobile-nav{display:none!important}html{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}body{touch-action:pan-x pan-y}.remote-canvas{touch-action:none}.auth-card input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:700px){.auth-page{grid-template-columns:1fr;gap:25px;margin:2vh auto;padding:20px}.auth-art{text-align:center}.auth-art img{width:72px}.auth-art h1{font-size:32px;margin:12px}.auth-card{padding:24px;gap:18px}.auth-card input{font-size:16px}.auth-art p{display:none}#toast{top:calc(75px + env(safe-area-inset-top));right:16px}.home-content .space-grid:empty{display:none}}
/* TV sign-in by phone: QR code + code on the TV, code entry in Settings → Television. */
.pair-dialog .pair-layout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}
.pair-qr svg{display:block;width:176px;height:176px;border-radius:12px;background:#fff}
.pair-qr:empty{display:none}
.pair-dialog .pair-code{text-align:left;padding:14px 0;white-space:nowrap;font-size:clamp(24px,3.4vw,38px)}
.pair-alt{font-size:13px;margin:6px 0 0}
@media(max-width:600px){.pair-dialog .pair-layout{grid-template-columns:minmax(0,1fr)}.pair-qr{justify-self:center}.pair-dialog .pair-code{text-align:center}}
.tv-link-form{display:flex;gap:10px;margin-top:12px}
.tv-link-form input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.12em}
.tv-link-confirm p{margin:14px 0 10px}
.tv-link-confirm .button-row{gap:10px}
.tv-link-error{margin:12px 0 0;color:#ff9b9b}
body[data-theme="light"] .tv-link-error{color:#b42318}
/* Visitors on Zeelmflix: one sign-in button next to the catalogue tools. */
.guest-login{min-height:36px;padding:8px 16px;white-space:nowrap}
/* Visitors: no account features (list, history), and a header that fits a phone. */
body.guest-flix .ondemand-sidebar .zf-side{display:none!important}
@media(max-width:640px){
 .guest-flix #header{gap:8px}
 .guest-flix #header .brand span{display:none}
 .guest-flix .header-tools{flex:1;min-width:0;justify-content:flex-end;gap:6px}
 .guest-flix #media-tools,.guest-flix .flix-controls{flex:1;min-width:0}
 .guest-flix .flix-search{flex:1;min-width:0;width:auto}
 .guest-flix .flix-search input{min-width:0;width:100%}
 .guest-flix .guest-login{min-height:32px;padding:6px 11px;font-size:12px}
}