@import url('/auth-theme.css');
@import url('/auth-weboryn.css');
.login-screen{display:contents}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
html.remote-document{height:100%;overflow:hidden;overscroll-behavior:none}
body.remote-mode{height:100vh;height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none;margin:0;background:var(--ground);padding:0;display:block}
.remote-mode #remote{height:100%;width:min(100%,600px);margin:0 auto;display:grid;grid-template-rows:minmax(44px,1fr) minmax(0,4fr) minmax(48px,1fr) minmax(48px,1fr);gap:clamp(8px,2dvh,20px);padding:max(16px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));align-items:center}
.remote-mode button{border:0;min-height:44px;padding:0;display:grid;place-items:center;background:rgba(255,255,255,.55);color:#1c2021;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background .15s,transform .12s}
.remote-mode button:hover{background:#fff;transform:none}.remote-mode button:active{transform:scale(.94)}
.remote-mode svg{width:clamp(24px,3.5dvh,34px);height:clamp(24px,3.5dvh,34px);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.remote-mode .power-row{display:flex;justify-content:flex-end;width:100%}
.remote-mode button.power{width:clamp(48px,7dvh,64px);height:clamp(48px,7dvh,64px);border-radius:50%;background:#1c2021;color:#fff}
.remote-mode .dpad{width:min(100%,46dvh);aspect-ratio:1;max-height:100%;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(5px,1.1dvh,10px)}
.remote-mode .dpad button{min-height:0;border-radius:28%}
.remote-mode .dpad button[data-key=up]{grid-area:1/2}.remote-mode .dpad button[data-key=left]{grid-area:2/1}.remote-mode .dpad button[data-key=right]{grid-area:2/3}.remote-mode .dpad button[data-key=down]{grid-area:3/2}
.remote-mode .dpad button.ok{grid-area:2/2;background:#1c2021;color:#fff;border-radius:50%;font-size:clamp(20px,3dvh,30px);font-weight:800}
.remote-mode .navigation,.remote-mode .media{display:flex;align-items:center;justify-content:space-between;width:100%;gap:clamp(10px,3vw,28px)}
.remote-mode .navigation{justify-content:space-around}
.remote-mode .navigation button,.remote-mode .media>button{width:clamp(52px,8dvh,76px);height:clamp(52px,8dvh,76px);border-radius:50%;flex-shrink:0}
.remote-mode .volume{display:flex;align-items:center;justify-content:space-between;flex:1;gap:8px;border-radius:999px;background:rgba(255,255,255,.55)}
.remote-mode .volume button{width:50%;height:clamp(52px,8dvh,76px);border-radius:999px;background:transparent}
@media(max-height:420px) and (orientation:landscape){.remote-mode #remote{width:100%;max-width:1000px;grid-template-columns:1fr 1.5fr 1fr;grid-template-rows:1fr 1fr;gap:14px}.remote-mode .power-row{grid-area:1/1;justify-content:center}.remote-mode .dpad{grid-area:1/2/3/3;width:min(100%,80dvh)}.remote-mode .navigation{grid-area:2/1;gap:8px;flex-wrap:wrap}.remote-mode .media{grid-area:1/3/3/4;flex-wrap:wrap;justify-content:center}.remote-mode .volume{flex-basis:100%}}

/* Shared controls keep their positions when changing remote modes. */
.remote-mode #remote{grid-template-columns:1fr;grid-template-rows:clamp(44px,6dvh,56px) clamp(170px,30dvh,270px) clamp(44px,6dvh,56px) minmax(0,1fr) 44px;gap:clamp(7px,1.2dvh,12px);padding-block:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-bottom))}
.remote-mode .power-row{justify-content:space-between;grid-area:auto}
.remote-mode .power-row>button{width:clamp(44px,6dvh,56px);height:clamp(44px,6dvh,56px);border-radius:50%}
.remote-mode .dpad{grid-area:auto;width:auto;height:100%;max-width:100%;aspect-ratio:1;justify-self:center;margin:0}
.remote-mode .navigation{grid-area:auto;justify-content:center;gap:clamp(32px,14vw,90px)}
.remote-mode .navigation button{height:clamp(44px,6dvh,56px);width:clamp(44px,6dvh,56px)}
.remote-mode .lower-controls{min-height:0;align-self:stretch;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:3px 0 6px}
.remote-mode .lower-controls::-webkit-scrollbar{display:none}
.remote-mode .media{grid-area:auto;flex-wrap:nowrap;gap:12px;justify-content:space-between;margin:0}
.remote-mode .media>button,.remote-mode .volume button{width:clamp(46px,6.5dvh,58px);height:clamp(46px,6.5dvh,58px)}
.remote-mode .volume{flex-basis:auto}
.remote-mode .volume button{width:50%}
.remote-mode #tv-controls{display:grid;gap:10px;margin-top:12px}
.remote-mode .channel-row{display:flex;gap:12px}
.remote-mode .channel-rocker{flex:1;display:flex;align-items:center;justify-content:space-between;border-radius:999px;background:#ffffff80}
.remote-mode .channel-rocker button{width:40%;background:transparent;border-radius:999px;font-size:25px}
.remote-mode .channel-rocker span{font-size:11px;letter-spacing:.08em;color:#66717c}
.remote-mode .channel-row>button{width:58px;font-size:13px}
.remote-mode .tv-shortcuts{display:grid;grid-template-columns:1.3fr 1fr 52px;gap:8px}
.remote-mode .tv-shortcuts button{font-size:12px;min-width:0;white-space:normal}
.remote-mode .number-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.remote-mode .number-pad button{height:44px;min-height:44px;border-radius:18px;font-size:22px;font-weight:600}
.remote-mode .number-pad svg{width:22px;height:22px}
.remote-mode .color-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.remote-mode .color-keys button{min-height:44px;background:transparent;padding:8px 0}
.remote-mode .color{display:block;width:100%;height:18px;border-radius:999px}.remote-mode .red{background:#ca4a50}.remote-mode .green{background:#4d916b}.remote-mode .yellow{background:#d5ad39}.remote-mode .blue{background:#4d83bd}
.remote-mode button.mode-toggle{height:44px;min-height:44px;width:100%;background:transparent;display:flex;gap:10px;font-size:12px;font-weight:600;color:#59646f}
.remote-mode .mode-toggle svg{height:22px;width:22px}
.remote-mode .mode-toggle>span{font-size:12px}
.remote-mode button:disabled{opacity:.38;cursor:default;transform:none}
.remote-mode dialog{border:0;border-radius:30px;background:#eaf0f6;color:var(--ink);padding:22px;width:min(90vw,400px);max-height:85dvh;box-shadow:0 30px 100px #0003}
.remote-mode dialog::backdrop{background:#20283066;backdrop-filter:blur(8px)}
.remote-mode .extras-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px;font-size:16px;font-weight:700}
.remote-mode .extras-head button{width:44px;height:44px;border-radius:50%}
.remote-mode .extras-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.remote-mode .extras-grid button{min-height:64px;font-size:14px;border-radius:20px}
@media(max-height:420px) and (orientation:landscape){.remote-mode #remote{max-width:1000px;width:100%;grid-template-columns:1fr 1.4fr 1.2fr;grid-template-rows:48px minmax(0,1fr) 44px;gap:10px}.remote-mode .power-row{grid-area:1/1}.remote-mode .dpad{grid-area:1/2/4/3;height:auto;width:min(100%,75dvh);align-self:center}.remote-mode .navigation{grid-area:2/1;gap:12px}.remote-mode .lower-controls{grid-area:1/3/4/4}.remote-mode .mode-toggle{grid-area:3/1}.remote-mode .media{gap:6px}.remote-mode .media>button{width:44px;height:44px}.remote-mode .volume button{height:44px}.remote-mode .tv-shortcuts{grid-template-columns:1fr 1fr}.remote-mode .tv-shortcuts>button:last-child{grid-column:1/3}}

.remote-mode .power-row>#logout{width:auto;min-width:0;height:44px;padding:0 14px;background:transparent;border-radius:999px;font-size:12px;font-weight:600;color:#59646f}

.session-check #login-view{visibility:hidden}

#session-loading{display:none}
.session-check #session-loading{display:block;position:fixed;inset:0;z-index:20;margin:0;padding:24px;display:grid;place-items:center;background:var(--ground);font-size:13px;color:var(--muted)}
.session-check #remote{visibility:hidden}