* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; font-family: Arial, sans-serif; color: #f5f5f5; background: transparent; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 3px solid transparent; border-radius: 12px; background: #222222; padding: 16px 22px; text-align: left; }
button:focus { outline: none; border-color: #efbd50; box-shadow: 0 0 0 3px #0f0f0f; }
button:disabled { opacity: .38; cursor: default; }
button.selected { background: #363636; }
button.primary { background: #515151; }
button.danger { color: #ffb5aa; }
#app-shell { height: 100vh; background: #0d0d0d; padding: 44px 72px 28px; display: flex; flex-direction: column; font-size: 25px; }
header { display: flex; align-items: center; justify-content: space-between; min-height: 64px; margin-bottom: 32px; }
.brand { letter-spacing: 3px; font-size: 31px; font-weight: bold; }
.brand-mark { display: inline-block; color: #efbd50; margin-right: 12px; }
.brand small { font-size: 16px; color: #a8a8a8; border: 1px solid #454545; padding: 7px; margin-left: 8px; }
#platform { color: #a8a8a8; font-size: 20px; }
main { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
footer { display: flex; justify-content: space-between; font-size: 19px; color: #a8a8a8; padding-top: 22px; }
h1 { font-size: 48px; margin: 12px 0 22px; line-height: 1.1; }
h2 { font-size: 34px; margin: 10px 0 22px; }
p { line-height: 1.45; }
.eyebrow { color: #efbd50; font-size: 19px; letter-spacing: 3px; text-transform: uppercase; }
.muted, .hint { color: #b3b3b3; }
.hint { font-size: 20px; }
.intro { max-width: 1100px; }
.source-layout { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 38px; margin-top: 24px; }
.panel { background: #111111; border: 1px solid #2e2e2e; border-radius: 18px; padding: 32px; }
.tabs, .actions { display: flex; flex-wrap: wrap; margin: -5px; }
.tabs button, .actions button { margin: 5px; }
.field { display: block; width: 100%; margin: 16px 0; padding: 16px 22px; min-height: 85px; }
.field span { display: block; color: #b3b3b3; font-size: 19px; margin-bottom: 9px; }
.field strong { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 24px; }
.notice { border-left: 3px solid #efbd50; padding: 12px 20px; background: #1e1e1e; font-size: 22px; }
.error { color: #ffd5ce; border-color: #ff9383; background: #301d24; }
.library-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.library-head h1 { margin: 8px 0; }
.library-body { display: grid; grid-template-columns: 300px 1fr; grid-gap: 24px; }
.categories { max-height: 600px; overflow-y: auto; padding: 5px; }
.categories button { display: block; width: 100%; margin-bottom: 8px; font-size: 22px; }
.catalog { min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 16px; padding: 5px; }
.card { background: #111111; border-color: #2e2e2e; min-height: 120px; overflow: hidden; }
.card strong { display: block; font-size: 24px; overflow: hidden; text-overflow: ellipsis; }
.card small { display: block; font-size: 18px; color: #b3b3b3; margin-top: 12px; }
.pagination { display: flex; align-items: center; justify-content: center; margin-top: 20px; }
.pagination span { margin: 0 20px; color: #b3b3b3; }
.empty { padding: 30px; color: #b3b3b3; }
#av-player, #browser-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
#browser-player { display: none; background: #000; }
#app-shell, #playback { position: relative; z-index: 1; }
#playback { height: 100vh; font-size: 24px; }
.playback-top { position: absolute; left: 0; right: 0; top: 0; padding: 40px 72px 65px; background: linear-gradient(#0d0d0dee, transparent); }
.playback-top h1 { font-size: 36px; }
#playback-status { display: inline-block; background: #111111cc; padding: 8px 16px; border-radius: 8px; }
.playback-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 72px; background: linear-gradient(transparent, #0d0d0d 35%); }
.playback-bottom button { font-size: 20px; padding: 12px 16px; }
.time-row { display: flex; justify-content: space-between; }
progress { width: 100%; height: 8px; margin: 15px 0 24px; accent-color: #efbd50; }
#subtitle { position: absolute; bottom: 260px; left: 15%; right: 15%; white-space: pre-line; text-align: center; font-size: 32px; text-shadow: 2px 2px 3px #000; }
#playback.clean .playback-top, #playback.clean .playback-bottom { display: none; }
#playback.clean #subtitle { bottom: 60px; }
/* Tizen 6.0 (Chromium 76): use physical offsets; inset requires Chromium 87. */
#modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; background: #0a0a0af2; padding: 60px 180px; overflow: auto; font-size: 26px; }
.keyboard-display { font-family: monospace; padding: 20px; border: 1px solid #4f4f4f; background: #111111; white-space: pre-wrap; word-break: break-all; max-height: 135px; overflow: auto; }
.keyboard-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 8px; margin: 22px 0; }
.keyboard-grid button { text-align: center; padding: 12px; }
.track-list button { display: block; width: 100%; margin-bottom: 12px; }
.pairing-code { font-size: 110px; letter-spacing: 12px; color: #efbd50; margin: 45px 0; }

/* Player TV 0.5 — cinema escuro, destaque azul; compatível com Chromium 76. */
button { background: #1c1c1c; border-radius: 9px; transition: background-color .12s, border-color .12s; }
button:focus { border-color: #efbd50; background-color: #323232; box-shadow: 0 0 0 2px #0a0a0a; }
button.selected { background: #292929; color: #efbd50; }
button.primary { background: #efbd50; color: #fff; }
button.primary:focus { background: #efbd50; border-color: #d7d7d7; }
#app-shell { padding: 26px 44px 20px; background: radial-gradient(ellipse at 85% 0%, #222222 0%, #0c0c0c 42%, #070707 80%); }
header { min-height: 52px; margin-bottom: 14px; }
.brand { font-size: 28px; letter-spacing: 4px; }
.brand-mark, .eyebrow, .pairing-code { color: #efbd50; }
#platform { font-size: 18px; color: #919191; }
main { padding: 8px 20px; }
footer { font-size: 17px; padding-top: 14px; color: #8f8f8f; }
h1 { font-size: 52px; letter-spacing: -1px; }
.intro { color: #b3b3b3; font-size: 25px; }
.source-layout { max-width: 1660px; grid-template-columns: 1.1fr 1fr; grid-gap: 36px; }
.panel { border-color: #303030; background: linear-gradient(140deg, #1c1c1c, #101010); border-radius: 20px; padding: 34px; }
.field { background: #1b1b1b; border-color: #333333; }
.field span { color: #adadad; }
.tabs button { padding: 14px 24px; }
.notice { border-color: #efbd50; background: #1f1f1f; }
.error { border-color: #f18d80; background: #301d24; }
.library-view { padding: 0; overflow: hidden; }
.library-frame { display: flex; height: 100%; min-height: 0; }
.side-rail { flex: 0 0 114px; padding: 32px 12px 16px 0; border-right: 1px solid #242424; display: flex; flex-direction: column; }
.rail-button { position: relative; padding: 12px 4px; margin-bottom: 12px; width: 96px; min-height: 82px; background: transparent; text-align: center; border-radius: 8px; }
.rail-button:last-child { margin-top: auto; }
.rail-button.selected { background: linear-gradient(90deg, #323232, #1c1c1c); }
.rail-button.selected::before { content: ''; position: absolute; width: 3px; height: 34px; top: 21px; left: -4px; background: #efbd50; border-radius: 4px; }
.nav-icon { display: block; width: 27px; height: 27px; margin: 0 auto 8px; }
.nav-icon svg { display: block; width: 100%; height: 100%; }
.rail-label { display: block; font-size: 15px; font-weight: normal; color: #b9b9b9; line-height: 1.25; }
.library-stage { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 20px 28px 32px; }
.library-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 84px; margin-bottom: 12px; }
.library-toolbar .eyebrow { font-size: 14px; letter-spacing: 3px; }
.library-toolbar h1 { font-size: 32px; margin: 5px 0 0; letter-spacing: 0; }
.library-tools { display: flex; align-items: center; max-width: 65%; }
.library-tools button { margin-left: 12px; font-size: 20px; padding: 12px 18px; }
.category-select { max-width: 470px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-color: #343434; background: #171717; }
.category-select::after { content: ' ▾'; color: #efbd50; }
.quiet-button { background: transparent; color: #b6b6b6; border-color: #2f2f2f; }
.content-hero { position: relative; overflow: hidden; min-height: 325px; border-radius: 18px; background: radial-gradient(ellipse at 80% 30%, #3b3b3b, #131313 58%, #0c0c0c); margin-bottom: 8px; }
.hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; background: linear-gradient(130deg, transparent, #3e3e3e44); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero-art::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, #131313, #13131333 65%), linear-gradient(0deg, #0c0c0cdd, transparent 65%); }
.hero-copy { position: relative; z-index: 1; width: 65%; padding: 28px 34px 24px; }
.hero-copy .eyebrow { font-size: 15px; letter-spacing: 3px; }
.hero-copy h2 { font-size: 44px; line-height: 1.07; letter-spacing: -1px; margin: 10px 0 12px; max-height: 100px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hero-meta { font-size: 18px; color: #b1b1b1; margin: 8px 0; }
.hero-detail { color: #c7c7c7; font-size: 20px; margin: 10px 0 16px; }
.hero-play { padding: 12px 26px; font-size: 21px; min-width: 190px; }
.hero-play::before { content: '▶'; font-size: 16px; margin-right: 13px; }
.catalog-count { color: #949494; font-size: 17px; margin: 13px 0 8px; }
.shelf { margin-bottom: 12px; }
.shelf-title { font-size: 25px; margin: 10px 0 2px; letter-spacing: -.3px; }
.poster-row { display: flex; overflow-x: auto; overflow-y: hidden; padding: 12px 6px 18px; scroll-behavior: auto; }
.card { flex: 0 0 202px; width: 202px; padding: 0 0 8px; margin-right: 18px; border: 3px solid transparent; border-radius: 10px; background: transparent; min-height: 0; overflow: hidden; }
.card:focus { background: #282828; border-color: #efbd50; box-shadow: 0 0 0 2px #070707, 0 0 18px #efbd5044; }
.poster { position: relative; height: 248px; background: linear-gradient(150deg, #3e3e3e, #161616); overflow: hidden; border-radius: 5px; }
.poster-tone-1 { background: linear-gradient(150deg, #454545, #1b1b1b); }
.poster-tone-2 { background: linear-gradient(150deg, #3f3f3f, #151515); }
.poster-tone-3 { background: linear-gradient(150deg, #4b4b4b, #171717); }
.poster-tone-4 { background: linear-gradient(150deg, #4d4d4d, #171717); }
.poster::before { content: ''; position: absolute; width: 240px; height: 240px; border: 1px solid #ffffff19; border-radius: 50%; top: 80px; left: 30px; }
.poster-label { position: absolute; left: 15px; top: 17px; font-size: 12px; letter-spacing: 3px; color: #c6c6c6; }
.poster-fallback { position: absolute; left: 15px; right: 15px; bottom: 25px; font-size: 26px; line-height: 1.1; font-weight: bold; overflow: hidden; max-height: 150px; }
.poster img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background: #131313; }
.card strong { font-size: 19px; padding: 10px 10px 0; white-space: nowrap; text-overflow: ellipsis; }
.card small { font-size: 15px; padding: 0 10px; margin-top: 5px; color: #a2a2a2; }
.channel-card { flex-basis: 252px; width: 252px; }
.channel-card .poster { height: 164px; }
.channel-card .poster img { object-fit: contain; padding: 22px; }
.channel-card .poster-fallback { font-size: 22px; bottom: 24px; max-height: 90px; }
.category-picker { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 12px; margin: 25px 0; }
.category-picker button { min-height: 74px; font-size: 22px; }
.pagination { margin-top: 14px; }
.pagination button { font-size: 20px; padding: 12px 24px; }
#modal { background: #0b0b0bfa; padding: 55px 110px; }
#modal > button { margin: 10px 14px 10px 0; }
.playback-top { background: linear-gradient(#060606f5, transparent); }
.playback-bottom { background: linear-gradient(transparent, #0b0b0bf5 38%); }
.playback-bottom button { background: #222222; }
.playback-bottom button:focus { background: #efbd50; }
progress { accent-color: #efbd50; }
progress::-webkit-progress-bar { background: #323232; border-radius: 4px; }
progress::-webkit-progress-value { background: #efbd50; border-radius: 4px; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #393939; border-radius: 6px; }

/* Ao vivo 0.6.0: três colunas fixas, sem banners, capas ou requisições de imagens. */
.live-stage { display: flex; flex-direction: column; overflow: hidden; }
.live-stage .library-toolbar { flex-shrink: 0; margin-bottom: 22px; }
.live-stage > .notice { flex-shrink: 0; margin: 0 0 16px; max-height: 92px; overflow-y: auto; }
.live-layout { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(420px, 1.4fr) minmax(300px, 1fr); grid-gap: 26px; flex: 1; min-height: 0; }
.live-groups, .live-channels { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.live-column-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 0 10px 17px; border-bottom: 1px solid #303030; }
.live-column-heading h2 { font-size: 25px; font-weight: normal; margin: 0; }
.live-column-heading > span { font-size: 17px; color: #979797; }
.live-group-list, .live-channel-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 5px; }
.live-group { display: block; width: 100%; margin-bottom: 5px; padding: 15px 15px; background: transparent; font-size: 21px; line-height: 1.25; border-radius: 7px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.live-group.selected { background: #373737; color: #ededed; }
.live-group:focus { background: #efbd50; border-color: #efbd50; }
.live-channel-row { display: flex; align-items: center; width: 100%; min-height: 73px; margin: 0 0 4px; padding: 12px 14px; border: 2px solid transparent; border-bottom-color: #292929; border-radius: 7px; background: transparent; text-align: left; }
.live-channel-row.current { background: #212121; }
.live-channel-row:focus { background: #efbd50; border-color: #efbd50; box-shadow: none; }
.live-channel-row strong { flex: 1; min-width: 0; font-size: 23px; font-weight: normal; white-space: normal; line-height: 1.2; padding: 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 56px; }
.live-channel-number { flex: 0 0 35px; font-size: 17px; color: #969696; }
.live-channel-play { color: #efbd50; font-size: 13px; opacity: 0; }
.live-channel-row:focus .live-channel-play { opacity: 1; }
.live-info { border-left: 1px solid #303030; padding: 4px 0 12px 28px; overflow-y: auto; min-width: 0; }
.live-info .eyebrow { font-size: 14px; letter-spacing: 2px; }
.live-emblem { width: 48px; height: 48px; color: #efbd50; margin: 35px 0 23px; }
.live-channel-title { font-size: 34px; line-height: 1.12; margin-bottom: 15px; overflow-wrap: break-word; }
.live-channel-group { font-size: 20px; color: #a7a7a7; }
.live-watch { display: block; width: 100%; margin: 26px 0 34px; font-size: 22px; text-align: center; }
.live-guide { border-top: 1px solid #303030; padding-top: 20px; }
.live-guide h3 { font-size: 21px; margin: 0 0 12px; font-weight: normal; }
.live-guide p { font-size: 19px; color: #979797; line-height: 1.55; }
.live-controls { margin-top: 30px; color: #929292; font-size: 17px; white-space: pre-line; line-height: 1.8; }
.live-pagination { flex-shrink: 0; margin: 0; padding: 12px 0 0; justify-content: space-between; border-top: 1px solid #303030; }
.live-pagination button { padding: 10px 14px; font-size: 18px; }
.live-pagination span { font-size: 17px; margin: 0 8px; }
.live-group-pages { display: flex; flex-shrink: 0; }
.live-group-pages button { flex: 1; font-size: 17px; padding: 10px 6px; text-align: center; margin: 8px 3px 0; }

/* Biblioteca 0.6.0: menu sobreposto e grade estável com seis capas por linha. */
.library-frame { position: relative; padding-left: 88px; }
.side-rail { position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: 80px; padding: 12px 6px; overflow: hidden; background: #0e0e0e; border-right: 1px solid #2a2a2a; }
.side-rail:focus-within { width: 270px; background: #131313; box-shadow: 20px 0 35px #00000066; }
.rail-button { display: flex; align-items: center; width: 100%; min-height: 65px; padding: 14px 16px; margin: 0 0 14px; text-align: left; white-space: nowrap; }
.rail-button .nav-icon { flex: 0 0 27px; margin: 0; }
.rail-label { display: none; margin-left: 20px; font-size: 21px; color: #d6d6d6; }
.side-rail:focus-within .rail-label { display: inline; }
.rail-button.selected::before { left: 0; top: 14px; }
.rail-button:focus { background: #373737; border-color: #efbd50; box-shadow: none; }
.catalog-search { display: flex; align-items: center; flex-shrink: 0; width: 100%; min-height: 59px; padding: 12px 20px; font-size: 22px; color: #b7b7b7; background: #1c1c1c; border-radius: 12px; }
.catalog-search .nav-icon { order: -1; margin: 0 16px 0 0; width: 23px; height: 23px; }
.media-stage { display: flex; flex-direction: column; overflow: hidden; }
.media-stage .library-toolbar, .live-stage .library-toolbar { min-height: 68px; margin-bottom: 14px; flex-shrink: 0; }
.library-toolbar .eyebrow { display: none; }
.library-toolbar h1 { font-size: 28px; }
.media-stage > .notice { flex-shrink: 0; max-height: 80px; overflow-y: auto; margin: 0 0 12px; }
.media-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-gap: 30px; flex: 1; min-height: 0; }
.media-content { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.media-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 0 5px 17px; }
.media-heading h2 { font-size: 25px; margin: 0; padding-left: 13px; border-left: 4px solid #efbd50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-heading > span { flex-shrink: 0; font-size: 17px; color: #979797; margin-left: 18px; }
.media-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-gap: 20px 14px; align-content: start; flex: 1; min-height: 0; overflow-y: auto; padding: 5px 7px 12px; }
.media-card { width: 100%; margin: 0; padding: 0 0 7px; border-radius: 7px; }
.media-card .poster { height: 0; padding-top: 150%; border-radius: 3px; }
.media-card strong { font-size: 18px; font-weight: normal; padding: 9px 6px 0; }
.media-card:focus { border-color: #efbd50; background: #373737; box-shadow: none; }
.media-card .poster-fallback { font-size: 23px; }
.media-grid > .empty { grid-column: 1 / -1; }

/* 0.7: fixed poster height, bounded scroll windows, no pagination controls. */
.media-grid { display: block; position: relative; padding: 0; overflow-y: auto; overflow-anchor: none; }
.live-group-list, .live-channel-list { position: relative; padding: 0; overflow-anchor: none; }
.scroll-space { position: relative; width: 100%; }
.scroll-window { position: absolute; left: 0; right: 0; display: grid; grid-column-gap: 14px; align-items: start; }
.media-card { min-height: 318px; height: 318px; align-self: start; }
.media-card .poster { height: 280px; min-height: 280px; padding-top: 0; }
.media-card strong { line-height: 23px; }
.live-group { min-height: 64px; margin: 0; }
.live-channel-row { margin: 0; min-height: 78px; }
.media-grid::-webkit-scrollbar, .live-group-list::-webkit-scrollbar, .live-channel-list::-webkit-scrollbar { width: 0; height: 0; }
.library-stage { position: relative; }
.browse-status { position: absolute; right: 24px; top: 64px; max-width: 65%; margin: 0; font-size: 18px; color: #b9b9b9; background: #1b1b1b; padding: 6px 12px; border-radius: 5px; }
.scroll-retry { position: sticky; bottom: 8px; width: 100%; font-size: 19px; padding: 12px; background: #383838; }

/* 0.8: information fades by state after 10 seconds; subtitles remain independent. */
.screen-stats { position: absolute; top: 42px; right: 64px; z-index: 2; text-align: right; color: #f5f5f5; text-shadow: 0 2px 5px #000; }
.screen-clock { display: flex; justify-content: flex-end; align-items: center; }
.screen-clock { font-size: 36px; font-variant-numeric: tabular-nums; }
#video-resolution { display: inline-block; margin-top: 10px; font-size: 21px; font-variant-numeric: tabular-nums; }
.screen-stats .nav-icon { margin: 0 12px 0 0; width: 26px; height: 26px; }
#playback.clean .screen-stats { display: none; }
#playback.live-playback .playback-top { display: none; }
#playback.live-playback .playback-bottom { padding: 72px 72px 40px; background: linear-gradient(transparent, #090909d9 40%, #090909f5); }
.live-osd-channel { display: flex; align-items: center; margin-bottom: 23px; }
.live-osd-channel .eyebrow { font-size: 19px; margin-right: 24px; }
.live-osd-channel h1 { font-size: 36px; margin: 0; font-weight: normal; }
.live-osd-row { display: flex; align-items: center; }
.live-program { flex: 1; min-width: 0; margin-right: 30px; }
#live-program-title { display: block; font-size: 34px; line-height: 1.3; font-weight: normal; max-height: 90px; overflow: hidden; }
#live-no-guide { font-size: 25px; color: #b8b8b8; }
#live-program-time { display: flex; align-items: center; font-size: 31px; font-variant-numeric: tabular-nums; }
#live-progress { width: 275px; height: 8px; margin: 0 24px; }
#favorite-playback { flex: 0 0 70px; height: 70px; padding: 15px; margin-left: 36px; border-radius: 50%; background: #262626; }
#favorite-playback .nav-icon { width: 32px; height: 32px; margin: 0; }
#favorite-playback[aria-pressed="true"] { color: #efbd50; }
#favorite-playback[aria-pressed="true"] svg { fill: currentColor; }
#favorite-playback:focus { border-color: #efbd50; box-shadow: none; }
#live-status { margin: 16px 0 0; font-size: 23px; max-width: 1500px; }
#live-help { margin: 17px 0 0; color: #adadad; font-size: 18px; }
.favorite-category { flex-shrink: 0; margin: 8px 0; font-size: 22px; padding: 13px 18px; color: #cacaca; }
#movie-details { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; overflow-y: auto; background: #101010; color: #f4f4f4; padding: 100px 85px 90px; }
#detail-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.detail-shade { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, #0f0f0ff2, #0f0f0f99), linear-gradient(0deg, #0f0f0f, transparent 80%); }
.detail-layout { position: relative; display: grid; grid-template-columns: 290px minmax(0, 1fr) minmax(0, 1fr); grid-gap: 48px; }
.detail-poster { position: relative; min-height: 435px; max-height: 435px; overflow: hidden; background: #2f2f2f; border-radius: 12px; }
.detail-poster > span { position: absolute; left: 24px; right: 24px; bottom: 28px; font-size: 28px; }
#detail-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.detail-info h1 { font-size: 43px; line-height: 1.2; margin: 12px 0 24px; }
#detail-meta { font-size: 23px; line-height: 1.55; white-space: pre-line; color: #cccccc; }
.detail-actions { display: flex; flex-direction: column; max-width: 430px; margin-top: 30px; }
.detail-actions button { margin-bottom: 15px; font-size: 25px; padding: 18px 24px; }
.detail-story h2 { font-size: 27px; color: #b3b3b3; }
#detail-plot { font-size: 26px; line-height: 1.65; white-space: pre-line; }
#detail-status { font-size: 20px; color: #c6c6c6; }
.detail-back-hint { position: relative; margin-top: 55px; color: #ababab; font-size: 22px; }
#detail-plot { max-height: 590px; overflow-y: auto; padding: 0 10px 10px; border: 2px solid transparent; border-radius: 6px; }
#detail-plot:focus { outline: none; border-color: #efbd50; }
#playback:not(.live-playback) .playback-top { padding-right: 480px; }

/* 0.9: compact channel list with a 16:9 preview on the same video instance. */
.live-layout { grid-template-columns: 300px 420px minmax(0, 1fr); grid-gap: 24px; }
.live-stage { padding-bottom: 4px; }
.live-stage .library-toolbar { min-height: 50px; margin-bottom: 16px; }
.live-info { padding: 0 0 0 24px; overflow: hidden; }
.live-preview { display: block; position: relative; width: 100%; height: 0; padding: 0 0 56.25%; border: 0; border-radius: 0; background: #060606; }
.live-preview:focus { outline: 3px solid #efbd50; outline-offset: 3px; box-shadow: none; }
.preview-placeholder { position: absolute; left: 0; top: 40%; width: 100%; text-align: center; font-size: 45px; color: #efbd50; }
.live-info .live-channel-title { margin: 24px 0 8px; font-size: 30px; }
.live-info .live-channel-group { margin: 0 0 12px; font-size: 21px; color: #ababab; }
.preview-status { font-size: 20px; line-height: 1.45; color: #c9c9c9; margin: 12px 0; }
.preview-status:empty { display: none; }
.live-info .live-guide { white-space: pre-line; font-size: 23px; line-height: 1.5; margin-top: 24px; }
#app-shell.preview-active .live-preview.playing { background: transparent; }
#browser-player { object-fit: contain; }

/* 0.10: global navigation, brand inside the rail and balanced live columns. */
#app-shell { padding: 32px 36px 24px 166px; }
.library-frame { padding-left: 0; }
.library-stage { padding: 0 0 0 12px; }
#side-navigation { position: fixed; top: 0; bottom: 0; left: 0; width: 132px; padding: 24px 14px; z-index: 3; background: #0e0e0e; border-right: 1px solid #323232; overflow: hidden; }
#side-navigation:focus-within { width: 316px; background: #141414; box-shadow: 18px 0 30px #00000050; }
.rail-brand { display: flex; align-items: center; flex: 0 0 90px; padding: 0 24px; margin-bottom: 28px; white-space: nowrap; color: #f2f2f2; }
.rail-brand .nav-icon { flex: 0 0 38px; width: 38px; height: 38px; margin: 0; color: #efbd50; }
.rail-brand-name { display: none; margin-left: 20px; font-size: 25px; font-weight: bold; letter-spacing: 2px; }
#side-navigation:focus-within .rail-brand-name { display: inline; }
#side-navigation .rail-button { flex-shrink: 0; min-height: 76px; height: 76px; margin: 0 0 10px; padding: 16px 28px; border-radius: 12px; }
#side-navigation .rail-button .nav-icon { flex: 0 0 32px; width: 32px; height: 32px; color: #cbcbcb; }
#side-navigation .rail-button.selected .nav-icon, #side-navigation .rail-button:focus .nav-icon { color: #efbd50; }
#side-navigation .rail-label { margin-left: 24px; font-size: 23px; }
#side-navigation .rail-settings { margin-top: auto; }
#side-navigation .rail-button:last-child:not(.rail-settings) { margin-top: 0; }
#side-navigation .rail-button.selected::before { top: 22px; height: 28px; width: 4px; border-radius: 2px; }
.live-layout { grid-template-columns: 320px minmax(0, 1fr) 530px; grid-gap: 26px; }
.live-info { padding-left: 20px; }
.live-info .live-channel-title { font-size: 28px; line-height: 1.3; }
.live-channel-row strong { font-size: 23px; line-height: 1.25; max-height: 60px; }
.live-channel-row { padding-left: 8px; padding-right: 8px; }
.live-channel-number { flex-basis: 29px; }
.live-info .live-guide { font-size: 22px; }
.live-stage .library-toolbar { margin-bottom: 18px; }
#movie-details { padding-left: 182px; padding-top: 65px; }
.settings-version { font-size: 20px; color: #959595; margin-top: 36px; }


/* 0.11: direct video layer above the catalog, below navigation and dialogs. */
#av-player, #browser-player { pointer-events: none; }
#av-player { display: none; }
#modal { z-index: 6; }
#app-shell { background: linear-gradient(115deg, #0b0b0b, #141414 68%, #1d1d1d); }
.live-layout { grid-template-columns: 310px minmax(0, 1fr) 670px; grid-gap: 26px; }
.live-info { padding-left: 20px; border-left-color: #ffffff0a; }
.live-preview { background: #080808; }
.live-channel-row { border-bottom-color: #ffffff0b; border-radius: 4px; }
.live-channel-row.current { background: #242424; }
.live-channel-row:focus { background: #373737; border-color: #efbd50; }
.live-column-heading { border-bottom-color: #ffffff14; }
.live-group.selected { background: #262626; color: #e8e8e8; }
.live-group:focus { background: #323232; }
#side-navigation { z-index: 5; width: 132px; border: 0; background: linear-gradient(90deg, #070707 60%, #0b0b0b); }
#side-navigation:focus-within { width: 330px; background: linear-gradient(90deg, #070707fc 80%, #0d0d0df2); box-shadow: none; }
#side-navigation .rail-brand { padding-left: 20px; margin-bottom: 34px; }
#side-navigation .rail-brand .nav-icon { width: 46px; height: 46px; flex-basis: 46px; color: #efbd50; }
#side-navigation .rail-brand-name { font-size: 26px; letter-spacing: 2px; margin-left: 18px; }
#side-navigation .rail-button { background: transparent; border: 0; border-radius: 0; padding: 16px 30px; transition: none; box-shadow: none; }
#side-navigation .rail-button .nav-icon { width: 34px; height: 34px; flex-basis: 34px; color: #989898; }
#side-navigation .rail-button.selected { background: transparent; }
#side-navigation .rail-button.selected .nav-icon { color: #efbd50; }
#side-navigation .rail-button.selected::before { left: 3px; top: 26px; height: 24px; width: 3px; background: #efbd50; }
#side-navigation .rail-button:focus { background: linear-gradient(90deg, #31313199, #21212100); outline: none; }
#side-navigation .rail-button:focus .nav-icon { color: #ffffff; }
#side-navigation .rail-button:focus::after { content: ''; position: absolute; left: 2px; top: 23px; bottom: 23px; width: 3px; background: #efbd50; border-radius: 2px; }
#side-navigation .rail-label { font-size: 22px; font-weight: normal; letter-spacing: .3px; color: #b9b9b9; }
#side-navigation .rail-button:focus .rail-label, #side-navigation .rail-button.selected .rail-label { color: #f6f6f6; }

/* 0.12: centered login inspired by the supplied reference; blue, no animation. */
#app-shell.entry-shell { padding: 50px 0; background: radial-gradient(ellipse at 50% 85%, #212121 0%, #0e0e0e 50%, #090909 100%); }
.entry-view { padding: 0; overflow-y: auto; display: flex; justify-content: center; align-items: center; }
.entry-layout { width: 820px; padding: 56px 100px 34px; border: 1px solid #333333; border-radius: 24px; background: #111111; }
.entry-brand { display: flex; justify-content: center; align-items: center; font-size: 34px; letter-spacing: 4px; font-weight: bold; margin: 0 0 50px; color: #f4f4f4; }
.entry-brand .nav-icon { width: 48px; height: 48px; color: #efbd50; margin-right: 16px; }
.entry-form { padding: 36px 42px 32px; background: #1e1e1e; border: 1px solid #363636; border-radius: 18px; }
.entry-form .field { position: relative; display: block; width: 100%; min-height: 104px; margin: 0 0 22px; padding: 0; border: 0; background: transparent; border-radius: 0; box-shadow: none; }
.entry-form .field span { display: block; color: #e6e6e6; font-size: 23px; margin: 0 0 12px; }
.entry-form .field strong { display: block; padding: 18px 20px; min-height: 68px; border: 2px solid #424242; border-radius: 9px; background: #292929; font-size: 24px; font-weight: normal; color: #b9b9b9; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.entry-form .field:focus { outline: none; background: transparent; box-shadow: none; }
.entry-form .field:focus strong { border-color: #efbd50; background: #323232; color: #f6f6f6; box-shadow: 0 0 0 3px #efbd5044; }
.entry-connect { display: block; width: 100%; margin: 8px 0 0; padding: 19px; border-radius: 9px; background: linear-gradient(100deg, #efbd50, #efbd50); color: #fff; font-size: 26px; border: 2px solid transparent; }
.entry-connect:focus { border-color: #e9e9e9; background: #efbd50; box-shadow: 0 0 0 3px #efbd5044; }
.entry-test { display: block; margin: 20px auto 0; padding: 10px 18px; background: transparent; font-size: 19px; color: #a2a2a2; }
.entry-test:focus { border-color: #efbd50; background: #272727; }
.entry-form .notice { font-size: 20px; margin: 18px 0 0; max-height: 90px; overflow-y: auto; }
.pairing-view { max-width: 1320px; margin: 0 auto; width: 100%; }
.pairing-view .entry-brand { justify-content: flex-start; margin-bottom: 44px; }

/* Transparent library ancestors let the full-screen native plane remain visible. */
#app-shell.preview-active,
#app-shell.preview-active #main,
#app-shell.preview-active .library-frame,
#app-shell.preview-active .library-stage,
#app-shell.preview-active .live-layout,
#app-shell.preview-active .live-info,
#app-shell.preview-active .live-preview.playing { background: transparent; }
#av-player { background: transparent; }
.live-preview { overflow: hidden; }
.preview-spinner { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 5px solid #efbd5033; border-top-color: #efbd50; border-radius: 50%; pointer-events: none; animation: preview-spin .8s linear infinite; }
@keyframes preview-spin { to { transform: rotate(360deg); } }
.preview-spinner[hidden] { display: none; animation: none; }
/* Current channel and remote focus have independent highlights. */
.live-group { border-radius: 30px; padding-left: 20px; padding-right: 20px; transition: none; }
.live-group.selected, .live-channel-row.current { background: #efbd50; color: #f6f6f6; }
.live-channel-row { border-radius: 20px; border-bottom-color: transparent; background: transparent; transition: none; }
.live-channel-row:focus, .live-group:focus { background: transparent; border-color: #efbd50; box-shadow: none; }
.live-channel-row.current:focus, .live-group.selected:focus { background: #efbd50; }
.live-channel-row.current .live-channel-number { color: #e0e0e0; }

/* Lume Player 0.14: one full-screen video surface; only the web overlay toggles. */
#app-shell { background: #101011; }
#app-shell.entry-shell { background: #0d0d0e; }
.entry-layout { background: #131314; border-color: #303033; }
.entry-form { background: #1c1c1f; border-color: #353537; }
.entry-form .field strong { background: #242426; border-color: #414144; color: #d2d2d5; }
.entry-form .field:focus strong { background: #302a1c; border-color: #f3c358; color: #fff; box-shadow: none; }
button.primary, .entry-connect, .entry-connect:focus { background: #efbd50; color: #17130a; box-shadow: none; }
button.primary:focus, .entry-connect:focus { background: #ffd779; border-color: #fff0c6; }
#side-navigation { background: #0b0b0ded; }
#side-navigation:focus-within { background: #101012fa; }
#side-navigation .rail-button { border-radius: 14px; }
#side-navigation .rail-button:focus { background: #efbd501a; }
#side-navigation .rail-button.selected .nav-icon,
#side-navigation .rail-brand .nav-icon, .entry-brand .nav-icon { color: #efbd50; }
.live-group.selected, .live-channel-row.current,
.live-channel-row.current:focus, .live-group.selected:focus { background: #efbd502e; color: #fff3d3; }
.live-channel-row.current .live-channel-number { color: #f3c358; }
.live-channel-row:focus, .live-group:focus { border-color: #f3c358; }
.favorite-category { border-radius: 30px; }
#app-shell.preview-active { background: linear-gradient(90deg, rgba(12,12,14,.94) 0%, rgba(12,12,14,.88) 50%, rgba(12,12,14,.48) 72%, rgba(12,12,14,.25) 100%); }
.live-info { border-left: 0; }
.live-preview, #app-shell.preview-active .live-preview.playing { background: transparent; border-radius: 18px; }
.live-preview:focus { outline-color: #f3c358; }
#app-shell.preview-active .live-channel-title,
#app-shell.preview-active .live-channel-group,
#app-shell.preview-active .live-guide { text-shadow: 0 2px 3px #000; }
.preview-spinner { border-color: #efbd5033; border-top-color: #f3c358; }
button { transition: none; }

/* 0.15: Categories | Channels | EPG; spinner belongs to the full-screen video. */
#app-shell.preview-active { background: linear-gradient(90deg, rgba(12,12,14,.96) 0%, rgba(12,12,14,.92) 50%, rgba(12,12,14,.62) 72%, rgba(12,12,14,.42) 100%); }
.live-info { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0 0 0 16px; }
.live-info .live-column-heading { flex-shrink: 0; }
.live-info .live-channel-title { flex-shrink: 0; font-size: 22px; color: #d3d3d6; margin: 16px 4px 12px; }
.live-info .live-guide { flex: 1; min-height: 0; margin: 0; padding: 4px; border: 2px solid transparent; border-radius: 16px; overflow-y: auto; white-space: normal; }
.live-guide:focus { outline: none; border-color: #f3c358; }
.live-guide::-webkit-scrollbar { width: 0; height: 0; }
.live-info .epg-entry { padding: 18px; border-radius: 16px; margin-bottom: 12px; background: #11111399; }
.live-info .epg-entry.current { background: #efbd5026; border-left: 3px solid #efbd50; }
.epg-time { display: flex; align-items: center; justify-content: space-between; font-size: 20px; color: #c6c6ce; }
.epg-now { color: #f3c358; font-size: 17px; margin-left: 14px; }
.live-info .epg-entry h3 { margin: 12px 0 0; font-size: 25px; line-height: 1.35; overflow-wrap: break-word; }
.live-info .epg-empty { color: #bdbdc5; font-size: 22px; line-height: 1.5; margin: 16px; }
.channel-spinner { position: fixed; z-index: 0; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 5px solid #efbd5044; border-top-color: #ffdb83; border-radius: 50%; pointer-events: none; animation: preview-spin .8s linear infinite; }
.channel-spinner[hidden] { display: none; animation: none; }

/* Original square Lume Player artwork, supplied locally as assets/logo.png. */
.brand-logo-full { display: block; object-fit: contain; }
.brand-logo-mark { display: none; position: relative; overflow: hidden; width: 72px; height: 65px; flex: 0 0 72px; }
.brand-logo-mark img { position: absolute; width: 120px; height: 120px; max-width: none; left: -24px; top: -14px; }
.has-logo > .nav-icon, .has-logo > .brand-fallback,
#side-navigation .has-logo > .rail-brand-name { display: none; }
.entry-brand.has-logo { margin-bottom: 20px; }
.entry-brand .brand-logo-full { width: 240px; height: 200px; }
#side-navigation .rail-brand.has-logo { padding: 0; justify-content: center; flex-basis: 118px; margin-bottom: 20px; }
#side-navigation .brand-logo-full { display: none; width: 200px; height: 118px; }
#side-navigation .has-logo .brand-logo-mark { display: block; }
#side-navigation:focus-within .has-logo .brand-logo-mark { display: none; }
#side-navigation:focus-within .has-logo .brand-logo-full { display: block; }

/* 0.16: dedicated symbol, larger navigation and a fading right edge. */
.brand-logo-mark { width: 76px; height: 76px; flex-basis: 76px; overflow: visible; }
.brand-logo-mark img { position: static; width: 76px; height: 76px; object-fit: contain; }
.brand-logo-mark .nav-icon { width: 60px; height: 60px; }
.entry-brand .brand-logo-full { width: 440px; height: 135px; }
#side-navigation { width: 148px; padding: 20px 12px; background: linear-gradient(90deg, rgba(11,11,13,.97) 0%, rgba(11,11,13,.92) 60%, rgba(11,11,13,.45) 82%, rgba(11,11,13,0) 100%); }
#side-navigation:focus-within { width: 420px; background: linear-gradient(90deg, rgba(11,11,13,.98) 0%, rgba(11,11,13,.95) 64%, rgba(11,11,13,.72) 79%, rgba(11,11,13,0) 100%); box-shadow: none; }
#side-navigation .rail-brand.has-logo { justify-content: flex-start; padding-left: 14px; flex-basis: 100px; margin-bottom: 22px; }
#side-navigation .brand-logo-full { width: 280px; height: 100px; }
#side-navigation .rail-button { min-height: 88px; height: 88px; margin-bottom: 7px; padding: 16px 24px; }
#side-navigation .rail-button .nav-icon { width: 46px; height: 46px; flex-basis: 46px; }
#side-navigation .rail-label { font-size: 28px; margin-left: 22px; }
#side-navigation:focus-within .rail-button { width: 350px; }
#side-navigation .rail-button:focus { background: linear-gradient(90deg, #efbd5026 55%, #efbd5000 100%); }
#side-navigation .rail-settings { margin-top: auto; }

/* Focus belongs to one program card, never to the entire EPG column. */
.live-info .live-guide { border: 0; padding: 4px; }
.live-info .epg-entry { border: 2px solid transparent; }
.live-info .epg-entry.current { border-left: 2px solid #efbd50; }
.live-info .epg-entry:focus { outline: none; border-color: #f3c358; background: #efbd5038; }

/* Bounded category-only channel list over the same full-screen video surface. */
#quick-channels { position: absolute; z-index: 3; right: 0; top: 0; bottom: 0; width: 580px; padding: 42px 30px 28px 46px; background: linear-gradient(90deg, #10101200, #101012ed 8%, #101012f7 35%); display: flex; flex-direction: column; }
#quick-channel-title { margin: 16px 0 4px; font-size: 30px; max-height: 80px; overflow: hidden; }
.quick-hint { color: #bbb; font-size: 19px; }
#quick-channel-status { font-size: 20px; color: #f3c358; }
#quick-channel-list { flex: 1; min-height: 0; overflow-y: auto; position: relative; overflow-anchor: none; }
#quick-channel-list::-webkit-scrollbar { width: 0; }
.quick-channel-row { display: flex; align-items: center; width: 100%; padding: 12px; background: transparent; border-radius: 14px; }
.quick-channel-row strong { font-size: 24px; font-weight: normal; overflow: hidden; max-height: 60px; line-height: 1.25; }
.quick-channel-number { color: #b9b9bf; flex: 0 0 38px; font-size: 19px; }
.quick-channel-row.current { background: #efbd5026; color: #fff0c6; }
.quick-channel-row:focus { border-color: #f3c358; box-shadow: none; background: #efbd5038; }
#playback.channels-open .playback-bottom, #playback.channels-open .screen-stats { display: none; }

/* Series landing page: hero, seasons and horizontal episode artwork. */
.series-detail-view { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.series-hero { position: relative; flex: 0 0 410px; overflow: hidden; background: #171719; }
.series-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.series-shade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #101011f5 0%, #101011b3 45%, #10101122 85%), linear-gradient(0deg, #101011, #10101100 45%); }
.series-summary { position: relative; padding: 26px 30px; max-width: 1000px; }
.series-summary h1 { font-size: 44px; margin: 14px 0; line-height: 1.15; max-height: 102px; overflow: hidden; }
.series-meta { color: #d4d4da; font-size: 21px; margin: 12px 0; }
.series-synopsis { margin: 12px 0 20px; font-size: 23px; line-height: 1.4; max-height: 96px; overflow: hidden; }
.series-actions { display: flex; }
.series-actions button { font-size: 24px; padding: 16px 24px; margin-right: 18px; }
.series-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 22px 12px; }
.series-tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid #ffffff16; padding: 4px 0; }
.series-tab { background: transparent; margin-right: 22px; font-size: 24px; padding: 12px 18px; border-radius: 6px; }
.series-tab.selected { background: transparent; border-bottom-color: #efbd50; }
.series-seasons { display: flex; align-items: center; overflow-x: auto; flex-shrink: 0; padding: 16px 4px; }
.series-seasons > span { font-size: 24px; margin-right: 22px; }
.series-season { min-width: 54px; height: 54px; padding: 6px 12px; border-radius: 28px; text-align: center; margin-right: 12px; font-size: 24px; flex-shrink: 0; }
.series-season.selected { background: #efbd50; color: #17130a; }
.series-season:focus { border-color: #fff3d3; }
.episode-grid { flex: 1; min-height: 0; position: relative; overflow-y: auto; overflow-anchor: none; }
.episode-grid::-webkit-scrollbar { width: 0; }
.episode-card { display: block; width: 100%; overflow: hidden; padding: 6px; background: transparent; border-radius: 10px; }
.episode-card:focus { border-color: #efbd50; background: #efbd5012; box-shadow: none; }
.episode-art { position: relative; width: 100%; height: 170px; overflow: hidden; background: #242427; border-radius: 6px; }
.episode-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.episode-play { position: absolute; left: 45%; top: 38%; font-size: 30px; color: #efbd50; }
.episode-card strong { display: block; font-size: 23px; line-height: 1.3; max-height: 60px; overflow: hidden; margin: 12px 0 8px; }
.episode-duration { display: block; font-size: 18px; color: #bbb; }
.episode-plot { font-size: 20px; line-height: 1.3; max-height: 78px; overflow: hidden; margin: 8px 0; color: #ccc; }
.series-information { overflow-y: auto; font-size: 25px; line-height: 1.6; padding: 16px; border: 2px solid transparent; }
.series-information:focus { outline: none; border-color: #efbd50; }
.series-summary { height: 100%; display: flex; flex-direction: column; }
.series-summary > .eyebrow, .series-summary h1, .series-meta, .series-actions { flex-shrink: 0; }
.series-synopsis { flex: 1; min-height: 0; }

/* First visit to an uncached movie/series folder; no invented progress value. */
.media-content { position: relative; }
.media-loading { position: absolute; left: 0; right: 0; top: 70px; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #101011; pointer-events: none; }
.media-loading p { font-size: 24px; color: #e4e4e8; margin: 0 0 20px; }
.media-loading-track { width: 330px; height: 4px; border-radius: 4px; background: #ffffff24; overflow: hidden; }
.media-loading-track span { display: block; width: 110px; height: 4px; background: #efbd50; border-radius: 4px; animation: media-loading-slide 1.4s ease-in-out infinite alternate; }
@keyframes media-loading-slide { from { transform: translateX(0); } to { transform: translateX(220px); } }
.media-load-retry { position: absolute; top: 45%; left: 35%; }

/* A real home destination, using only artwork and metadata from the source. */
.home-view { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.home-hero { position: relative; flex: 0 0 380px; overflow: hidden; background: #101011; }
.home-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.home-shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, #101011fa 0%, #101011b3 45%, #10101122 85%), linear-gradient(0deg, #101011, #10101100 55%); }
.home-copy { position: relative; width: 940px; height: 100%; padding: 24px 30px; display: flex; flex-direction: column; }
.home-copy h1 { font-size: 48px; line-height: 1.1; margin: 14px 0; max-height: 106px; overflow: hidden; flex-shrink: 0; }
.home-copy > .eyebrow, .home-meta, .home-actions { flex-shrink: 0; }
.home-meta { font-size: 22px; color: #e1d3ad; margin: 0 0 10px; }
.home-meta:empty { display: none; }
.home-plot { font-size: 24px; line-height: 1.4; margin: 4px 0 18px; overflow: hidden; max-height: 100px; flex: 1; min-height: 0; }
.home-actions { display: flex; }
.home-actions button { font-size: 23px; margin-right: 18px; padding: 14px 22px; }
.home-rows { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 20px; }
.home-section { margin: 0 0 22px; }
.home-section h2 { margin: 10px 8px 14px; font-size: 30px; }
.home-strip { display: flex; overflow-x: auto; padding: 6px; }
.home-card { flex: 0 0 188px; width: 188px; min-width: 0; padding: 4px; margin-right: 14px; background: transparent; border-radius: 8px; }
.home-card:focus { border-color: #efbd50; background: #efbd5018; box-shadow: none; }
.home-poster { position: relative; height: 248px; overflow: hidden; border-radius: 5px; background: #232325; }
.home-poster-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.home-poster-fallback { position: absolute; left: 14px; right: 14px; bottom: 20px; font-size: 23px; }
.home-card strong { display: block; font-size: 18px; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 10px 4px 4px; }
.home-strip::-webkit-scrollbar, .home-rows::-webkit-scrollbar { width: 0; height: 0; }
.home-loading { color: #efbd50; font-size: 24px; padding: 40px 20px; }
.series-status { color: #efbd50; font-size: 20px; margin: 6px 0; }
/* Room for Playlists while keeping all navigation actions reachable. */
#side-navigation .rail-button { min-height: 84px; height: 84px; margin-bottom: 5px; }

#modal.exit-overlay { display: flex; justify-content: center; align-items: center; padding: 50px; background: #050507a6; }
.exit-dialog { width: 650px; padding: 42px 48px; border-radius: 20px; background: #1c1c20; border: 1px solid #ffffff24; text-align: center; }
.exit-dialog h1 { font-size: 36px; margin: 0 0 18px; }
.exit-dialog p { font-size: 28px; margin: 0 0 36px; color: #d1d1d7; }
.exit-actions { display: flex; justify-content: center; }
.exit-actions button { width: 220px; text-align: center; font-size: 28px; margin: 0 10px; padding: 14px; }
.exit-actions button:focus { border-color: #fff0c6; box-shadow: none; }

/* Provider account expiration appears exclusively on Home. */
.home-expiry { position: absolute; right: 24px; top: 18px; display: flex; align-items: center; padding: 13px 18px; max-width: 390px; background: #141416dc; border: 1px solid #ffffff20; border-radius: 12px; }
.home-expiry .nav-icon { width: 30px; height: 30px; flex: 0 0 30px; color: #efbd50; margin-right: 14px; }
.home-expiry span { display: block; font-size: 18px; color: #d3d3da; }
.home-expiry strong { display: block; font-size: 23px; margin-top: 5px; color: #fff1cd; }
.home-expiry .home-trial { margin-top: 9px; color: #efbd50; }

/* 0.16.1: page-wide artwork, independent from the hero content rectangle. */
#side-navigation .rail-brand,
#side-navigation .rail-brand.has-logo { margin-bottom: 58px; }
.home-view, .series-detail-view { overflow: hidden; }
.home-backdrop, .series-backdrop { position: fixed; z-index: 0; top: 0; left: 0; width: 100vw; height: 78vh; object-fit: cover; object-position: center 25%; pointer-events: none; }
.home-shade, .series-shade { position: fixed; z-index: 0; top: 0; left: 0; right: 0; bottom: auto; width: 100vw; height: 78vh; pointer-events: none; background: linear-gradient(90deg, #101011f5 0%, #101011d9 22%, #1010118c 47%, #10101118 78%, #10101108 100%), linear-gradient(0deg, #101011 0%, #101011e6 13%, #10101180 34%, #10101100 66%); }
.home-hero, .series-hero { position: relative; z-index: 1; overflow: visible; background: transparent; }
.home-rows, .series-body { position: relative; z-index: 1; background: transparent; }
.home-copy, .series-summary { background: transparent; }
.home-rows { overflow-x: hidden; overflow-anchor: none; }
.home-strip { overflow-y: hidden; padding: 10px; flex-shrink: 0; }
.home-section { flex-shrink: 0; }
.home-card { flex-shrink: 0; }
.home-hero { flex-basis: 410px; }
.home-copy { padding-top: 24px; }
/* Prevent half-lines from appearing underneath the action buttons. */
.home-plot, .series-synopsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 32px; max-height: 96px; }

/* Source-backed movie suggestions with independent horizontal remote navigation. */
#movie-details { padding-top: 50px; padding-bottom: 30px; }
.detail-layout { grid-template-columns: 250px minmax(0,1fr) minmax(0,1fr); grid-gap: 36px; }
.detail-poster { min-height: 375px; max-height: 375px; }
.detail-info h1 { font-size: 38px; max-height: 138px; overflow: hidden; margin: 10px 0 18px; }
#detail-meta { font-size: 21px; line-height: 1.4; max-height: 160px; overflow: auto; }
.detail-actions { margin-top: 20px; }
.detail-actions button { font-size: 23px; padding: 14px 20px; margin-bottom: 12px; }
#detail-plot { max-height: 325px; font-size: 24px; line-height: 1.5; }
#detail-recommendations { position: relative; margin-top: 28px; }
#detail-recommendations h2 { margin: 0 0 14px 8px; font-size: 28px; }
.related-strip { display: flex; overflow-x: auto; overflow-y: hidden; padding: 8px; }
.related-strip::-webkit-scrollbar { height: 0; }
.related-card { flex: 0 0 142px; width: 142px; min-width: 0; padding: 4px; margin-right: 14px; background: transparent; border-radius: 8px; }
.related-card:focus { border-color: #efbd50; box-shadow: none; }
.related-poster { position: relative; height: 184px; overflow: hidden; border-radius: 4px; background: #242426; }
.related-fallback { position: absolute; left: 8px; right: 8px; bottom: 14px; font-size: 18px; }
.related-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.related-card strong { display: block; margin: 8px 2px 2px; font-size: 17px; line-height: 22px; max-height: 44px; overflow: hidden; }
.detail-back-hint { margin-top: 20px; font-size: 20px; }

/* Episode stills preserve the entire image, even when the source is 4:3 or portrait. */
.episode-art { height: 0; padding-top: 56.25%; background: #171719; }
.episode-image { object-fit: contain; object-position: center; }
.episode-card { min-height: 420px; }

/* 0.16.2: Lume Player keyboard docked below the form, dark with gold focus. */
.entry-connect { text-align: center; }
.field-secret { position: relative; }
.entry-form .field-secret .field strong { padding-right: 76px; }
.password-eye { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 10px; color: #efbd50; background: transparent; }
.password-eye .nav-icon { width: 30px; height: 30px; margin: 0; }
.field-secret > .password-eye { position: absolute; right: 5px; bottom: 5px; }
.entry-form .field.editing strong { border-color: #efbd50; color: #fff; }
#modal.keyboard-overlay { top: auto; height: 55vh; padding: 1.5vh 10vw; overflow: hidden; background: #141416; border-top: 2px solid #b68a39; box-shadow: 0 -12px 40px #0006; }
#modal.keyboard-overlay h1 { font-size: 2.5vh; line-height: 1.1; margin: 0 0 .6vh; color: #efbd50; }
.keyboard-value-row { display: flex; align-items: center; }
.keyboard-overlay .keyboard-display { flex: 1; min-width: 0; height: 5vh; max-height: none; padding: .8vh 16px; font-size: 2.2vh; line-height: 1.4; white-space: nowrap; overflow: hidden; border-radius: 7px; background: #202022; }
.keyboard-value-row .password-eye { width: 5vh; height: 5vh; margin-left: 12px; }
.keyboard-overlay .hint { font-size: 1.7vh; line-height: 1.3; margin: .7vh 0; }
.keyboard-overlay .keyboard-grid { height: 31vh; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); grid-gap: .65vh; margin: .8vh 0; }
.keyboard-overlay .keyboard-grid button { min-width: 0; padding: 0; font-size: 2.2vh; background: #252527; border: 2px solid #444446; }
.keyboard-overlay .actions { flex-wrap: nowrap; margin: 0; }
.keyboard-overlay .actions button { flex: 1; min-width: 0; height: 5vh; margin: 0 0 0 8px; padding: 0 6px; font-size: 1.8vh; text-align: center; }
.keyboard-overlay .actions button:first-child { margin-left: 0; }
.keyboard-overlay button:focus { background: #efbd50; color: #17130b; border-color: #fff0c9; box-shadow: none; }
.keyboard-overlay .primary { background: #d9aa43; color: #17130b; }
#app-shell.entry-shell.keyboard-open { height: 45vh; padding: 1vh 0; }
.keyboard-open .entry-layout { padding: 1.2vh 42px; }
.keyboard-open .entry-brand { height: 6vh; margin: 0 0 1vh; }
.keyboard-open .entry-brand .brand-logo-full { width: 280px; height: 6vh; }
.keyboard-open .entry-form { padding: 1.1vh 26px; }
.keyboard-open .entry-form .field { min-height: 0; margin: 0 0 .6vh; }
.keyboard-open .entry-form .field span { font-size: 1.7vh; line-height: 1.2; margin: 0 0 .4vh; }
.keyboard-open .entry-form .field strong { min-height: 4.6vh; height: 4.6vh; padding: .65vh 14px; font-size: 1.9vh; line-height: 1.4; }
.keyboard-open .entry-form .field-secret .field strong { padding-right: 60px; }
.keyboard-open .field-secret > .password-eye { width: 4.2vh; height: 4.2vh; bottom: .2vh; }
.keyboard-open .field-secret > .password-eye .nav-icon { width: 2.6vh; height: 2.6vh; }
.keyboard-open .entry-connect { min-height: 4.5vh; padding: .6vh; margin: .6vh 0 0; font-size: 2vh; }
.keyboard-open .entry-form .notice, .keyboard-open .entry-test { display: none; }
#modal.resume-overlay { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #080809d9; padding: 70px; }
.resume-overlay > h1 { font-size: 42px; color: #efbd50; }
.resume-dialog { width: 1100px; max-width: 100%; padding: 34px; border: 1px solid #4a4230; border-radius: 18px; background: #1c1c1f; text-align: center; }
.resume-dialog h2 { font-size: 30px; }
.resume-dialog .actions { justify-content: center; }
.resume-dialog button { font-size: 24px; }
.resume-dialog .primary { color: #19140a; }
.entry-form .field-secret { margin-bottom: 22px; }
.entry-form .field-secret .field { margin-bottom: 0; }
.keyboard-open .entry-form .field-secret { margin-bottom: .6vh; }
.keyboard-open .entry-form .field-secret .field { margin-bottom: 0; }

/* 0.16.3: compact episode cards with intact foreground and soft edge fill. */
.episode-art { height: 170px; padding-top: 0; background: #202022; }
.episode-fill { position: absolute; left: -4%; top: -8%; width: 108%; height: 116%; object-fit: cover; filter: blur(12px); opacity: .45; }
.episode-image { object-fit: contain; object-position: center; }
.episode-card { min-height: 330px; }
.entry-identity { position: fixed; right: 44px; bottom: 26px; padding: 12px 18px; border-radius: 8px; background: #1c1c1fe6; color: #e8d6ae; font-size: 21px; line-height: 1.35; text-align: right; }
.entry-identity p { margin: 2px 0; }
.keyboard-open .entry-identity { bottom: 57vh; font-size: 1.65vh; }
.activation-layout { width: 1100px; padding: 35px 65px; }
.activation-layout .entry-brand { margin-bottom: 20px; }
.activation-layout h1 { font-size: 40px; }
.activation-layout button { margin-right: 14px; }
.activation-id { color: #f0ca79; font-size: 25px; }
.activation-recovery { font: 20px monospace; overflow-wrap: break-word; padding: 16px; background: #202022; }

#modal.playlists-screen { padding:0; background:#0d0d0f; font-size:2.4vh; overflow:hidden; }
.playlists-layout { display:flex; height:100%; min-height:0; }
.playlists-left { display:flex; flex-direction:column; flex:1; min-width:0; padding:4.5vh 3.8vw 3vh; }
.playlists-heading { display:flex; justify-content:flex-start; align-items:center; flex-shrink:0; min-height:0; margin:0 0 3vh; }
.playlists-logo { width:7.5vh; height:7.5vh; object-fit:contain; margin-right:1.5vw; }
#modal.playlists-screen h1 { margin:0; font-size:3.8vh; color:#f6e4b3; }
.playlists-status { margin:0 0 2vh; font-size:2.1vh; }
.playlists-status:focus { outline:none; }
.device-playlists { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(16vh,max-content); align-content:start; gap:2vh 1.5vw; flex:1; min-height:0; overflow:auto; padding:5px; margin:-5px; }
.playlist-choice { margin:0; width:100%; min-width:0; min-height:16vh; text-align:left; background:#19191c; border:2px solid #343438; border-radius:10px; padding:2.2vh 1.5vw; color:#fff; }
.playlist-choice strong,.playlist-choice small,.playlist-choice-status { display:block; white-space:normal; overflow-wrap:break-word; }
.playlist-choice strong { font-size:2.8vh; line-height:1.35; }
.playlist-choice small { font-size:1.8vh; color:#b8b8bd; margin-top:1vh; }
.playlist-choice-status { font-size:2vh; color:#b8b8bd; margin-top:1.3vh; }
.playlist-current .playlist-choice-status { display:inline-block; background:#30291b; color:#f0cf8b; padding:.3vh .6vw; border-radius:6px; }
.playlist-choice:focus { outline:3px solid #f4d48d; background:rgba(223,195,127,.24); transform:none; }
.playlists-footer { flex-shrink:0; text-align:center; font-size:2vh; line-height:1.5; color:#b8b8bd; margin:4vh 1vw 0; }
.playlists-access { display:flex; flex-direction:column; justify-content:center; align-items:center; flex:0 0 29%; min-width:0; height:100%; border-left:1px solid #303033; padding:4vh 2.2vw; text-align:center; }
.playlists-access p { margin:.8vh 0; line-height:1.4; }
.playlists-access .hint { font-size:2vh; color:#b8b8bd; }
.playlists-qr { display:block; flex-shrink:0; width:24vh; height:24vh; background:white; margin:0 auto 2vh; padding:7px; }
.playlists-url { font-size:2.1vh; overflow-wrap:break-word; color:#efcf8b; }
.playlists-identity { font-size:3vh; letter-spacing:1px; }
.playlists-license { color:#cfbf98; }


.entry-identity .entry-access-details { display: block; margin: 8px 0 0 auto; padding: 7px 12px; font-size: 18px; }
.keyboard-open .entry-access-details { display: none; }

/* Access panel outside the original login form: title, QR, MAC, Key, site. */
.entry-identity { right: 26px; bottom: 26px; width: 310px; padding: 16px 12px; text-align: center; font-size: 20px; }
.entry-portal-qr { display: block; width: 172px; height: 172px; margin: 12px auto; background: #fff; }
.entry-identity .entry-portal-title { color: #efbd50; font-size: 22px; font-weight: bold; }
.entry-identity .entry-portal-url { font-size: 16px; margin-top: 10px; overflow-wrap: break-word; color: #efbd50; }
.keyboard-open .entry-identity { display: none; }

/* 0.18.2: suggestions, favorites and VOD transport. */
#movie-details { display: flex; flex-direction: column; padding-bottom: 32px; }
#movie-details[hidden] { display: none; }
.detail-layout { flex-shrink: 0; }
#detail-recommendations { margin-top: auto; padding-top: 44px; flex-shrink: 0; }
.related-card { flex-basis: 162px; width: 162px; }
.related-poster { height: 228px; }
.related-card strong { font-size: 19px; line-height: 25px; max-height: 50px; }
.detail-back-hint { margin-bottom: 0; }
.episode-image { object-fit: cover; object-position: center; }
.series-favorite { min-width: 72px; display: flex; align-items: center; justify-content: center; }
.series-favorite .nav-icon { width: 30px; height: 30px; }
.series-favorite[aria-pressed="true"] svg, .channel-heart svg { fill: currentColor; }
.series-favorite[aria-pressed="true"], .channel-heart { color: #efbd50; }
.live-channel-row, .quick-channel-row { position: relative; padding-right: 62px; }
.channel-heart { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; }
.channel-heart[hidden] { display: none; }
.channel-heart .nav-icon { width: 28px; height: 28px; }
#vod-controls .actions { align-items: center; }
#vod-controls .actions button { width: 64px; height: 60px; display: flex; align-items: center; justify-content: center; padding: 14px; border-radius: 50%; background: transparent; }
#vod-controls .actions button:focus { background: #efbd50; color: #171719; }
#vod-controls .actions .nav-icon { width: 30px; height: 30px; }
#playback-progress { display: block; width: 100%; height: 24px; margin: 10px 0 20px; padding: 0; background: transparent; -webkit-appearance: none; cursor: pointer; border: 0; }
#playback-progress::-webkit-slider-runnable-track { height: 7px; border-radius: 6px; background: #ffffff66; }
#playback-progress::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #efbd50; margin-top: -6px; }
#playback-progress:focus { outline: 2px solid #efbd50; outline-offset: 8px; border-radius: 5px; }
#playback-progress:disabled { opacity: .4; }
#next-episode { position: absolute; z-index: 4; bottom: 270px; right: 72px; display: flex; align-items: center; padding: 20px 28px; border-radius: 36px; background: #f5f5f5; color: #171719; box-shadow: 0 8px 30px #0008; font-size: 25px; }
#next-episode .nav-icon { width: 27px; height: 27px; margin-left: 18px; }
#next-episode:focus { background: #efbd50; }
#next-episode[hidden] { display: none; }
#playback.clean #next-episode { bottom: 70px; }

#playback-progress { background-repeat: no-repeat; background-position: center; background-size: 100% 7px; }
#playback-progress::-webkit-slider-runnable-track { background: transparent; }

/* 0.18.3 — compact metadata, unified icons and collection views. */
#detail-meta { max-height: none; overflow: visible; font-size: 20px; line-height: 1.5; margin: 12px 0; }
#detail-more { padding: 6px 0; background: transparent; color: #efbd50; font-size: 20px; }
.detail-info h1 { font-size: 36px; margin-bottom: 12px; }
.detail-actions { margin-top: 12px; }
.detail-actions button, .series-watch, .favorite-category { display: flex; align-items: center; }
.icon-label { margin-left: 12px; }
.detail-actions .nav-icon, .favorite-category .nav-icon, .episode-play .nav-icon { width: 26px; height: 26px; flex-shrink: 0; }
.series-watch .nav-icon { width: 26px; height: 26px; flex-shrink: 0; }
#detail-favorite[aria-pressed="true"] svg { fill: currentColor; }
#detail-favorite, .series-favorite { color: #f2f0ea; }
#detail-favorite[aria-pressed="true"], .series-favorite[aria-pressed="true"] { color: #efbd50; }
.movie-info-dialog { display: flex; flex-direction: column; justify-content: center; }
.movie-info-body { max-height: 620px; overflow-y: auto; line-height: 1.6; }
#vod-controls .actions { justify-content: center; }
#vod-controls .hint { text-align: center; }
#vod-controls .actions button { width: 72px; height: 68px; margin: 0 12px; }
#vod-controls .actions .nav-icon { width: 32px; height: 32px; }
#playback-progress:focus { outline: none; border: 0; box-shadow: none; }
#playback-progress::-webkit-slider-thumb { transition: transform .12s, box-shadow .12s; }
#playback-progress:focus::-webkit-slider-thumb { transform: scale(1.4) translateY(-1px); box-shadow: 0 0 0 6px #efbd5026; }
.collection-view { overflow-y: auto; padding: 12px 16px 40px; }
.collection-view > h1 { font-size: 38px; }
.collection-section { margin: 25px 0 34px; }
.collection-section h2 { font-size: 28px; }
.collection-grid { height: 320px; overflow-y: auto; position: relative; }
.collection-card { width: 100%; padding: 6px; background: transparent; }
.collection-poster { height: 235px; position: relative; background: #25262b; overflow: hidden; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.collection-poster > .nav-icon { width: 64px; height: 64px; color: #bbb; }
.collection-image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; }
.collection-card strong { font-size: 21px; line-height: 27px; margin-top: 9px; white-space: normal; max-height: 54px; }
.collection-grid::-webkit-scrollbar { width: 0; }
#side-navigation .rail-button { min-height: 68px; height: 68px; margin-bottom: 6px; }

.channel-spinner { z-index: 3; }

/* 0.18.4 — compact icon/text alignment and one focus ring on TV engines. */
.detail-actions button, .favorite-category, .series-watch { justify-content: flex-start; text-align: left; }
.detail-actions .nav-icon, .favorite-category .nav-icon, .series-watch .nav-icon,
.home-actions .nav-icon, .episode-play .nav-icon { margin: 0; flex: 0 0 26px; }
.icon-label { margin: 0 0 0 12px; }
.detail-actions button { min-height: 58px; border-radius: 10px; }
.series-favorite .nav-icon, #vod-controls .actions .nav-icon { margin: 0 auto; }
.playlist-choice:focus { outline: none; border-color: #efbd50; box-shadow: 0 0 0 1px #efbd50; border-radius: 12px; }
.collection-grid { overflow-x: auto; overflow-y: hidden; padding: 4px; height: 350px; }
.collection-grid::-webkit-scrollbar { width: 0; height: 0; }
.collection-card:focus { outline: none; border-color: #efbd50; box-shadow: none; }
.home-actions button { display: inline-flex; align-items: center; }

/* 0.18.6: synopsis without an inner scrollbar; full text uses pages. */
#detail-plot { max-height: none; overflow: visible; border: 0; padding: 0; font-size: 24px; line-height: 1.45; }
#detail-plot:focus { border: 0; }
.movie-info-body { max-height: none; overflow: visible; white-space: pre-line; font-size: 25px; line-height: 1.5; }
.keyboard-grid.pin-grid { grid-template-columns: repeat(3,1fr); max-width: 520px; }

/* Dedicated PIN dialog: compact and legible from the sofa. */
#modal.pin-overlay { position: fixed; inset: 0; top: 0; bottom: 0; left: 0; right: 0; z-index: 20; padding: 24px; background: rgba(5,9,20,.9); border: 0; display: flex; justify-content: center; align-items: center; overflow: auto; }
.pin-dialog { width: 540px; padding: 28px 42px 24px; background: linear-gradient(145deg,#202638,#111624); border: 1px solid #ffffff26; border-radius: 28px; box-shadow: 0 24px 80px #0009; text-align: center; }
.pin-emblem { width: 52px; height: 52px; padding: 12px; margin: 0 auto 14px; border-radius: 16px; background: #efbd501a; color: #efbd50; }
.pin-emblem .nav-icon { width: 28px; height: 28px; margin: 0; }
#modal .pin-dialog h1 { font-size: 29px; line-height: 1.2; margin: 0 0 10px; }
.pin-subtitle { font-size: 18px; line-height: 1.4; color: #aeb8cc; margin: 0 0 18px; }
.pin-digits { display: flex; justify-content: center; }
.pin-slot { display: flex; justify-content: center; align-items: center; width: 64px; height: 66px; margin: 0 6px; border: 2px solid #ffffff1f; border-radius: 13px; color: #fff; background: #090f1b; font-size: 40px; }
.pin-slot.next { border-color: #efbd5080; }
.pin-slot.filled { border-color: #efbd50; background: #efbd5012; }
.pin-message { min-height: 26px; font-size: 18px; line-height: 26px; color: #ffb5a3; margin: 8px 0 10px; }
.pin-keypad { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-gap: 10px; margin: 0 0 18px; }
.pin-keypad button { height: 68px; padding: 0; text-align: center; border: 2px solid transparent; border-radius: 13px; background: #ffffff0d; }
.pin-number { font-size: 30px; }
.pin-keypad .pin-utility { color: #bac4d8; font-size: 17px; background: transparent; }
.pin-keypad .nav-icon { width: 27px; height: 27px; margin: 0 auto; }
.pin-confirm, .pin-cancel { display: block; width: 100%; text-align: center; border: 2px solid transparent; border-radius: 13px; font-size: 22px; padding: 13px; }
.pin-confirm { background: #efbd50; color: #171b24; font-weight: bold; }
.pin-cancel { margin-top: 8px; background: transparent; color: #b7c1d4; }
.pin-dialog button:focus { outline: none; border-color: #fff2be; background: #fff2be; color: #141925; box-shadow: 0 0 0 3px #efbd5026; }
.pin-dialog .pin-confirm:focus { box-shadow: 0 0 0 4px #efbd5080; }

.collection-empty-view { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.collection-empty-view > h1 { display: none; }
.favorites-empty { width: 760px; max-width: 90%; padding: 60px 46px; text-align: center; border: 1px solid #ffffff1c; border-radius: 30px; background: linear-gradient(145deg,#ffffff09,#111a2b55); }
.favorites-empty-emblem { width: 106px; height: 106px; padding: 26px; margin: 0 auto 28px; border-radius: 32px; background: #efbd5012; color: #efbd50; border: 1px solid #efbd5033; }
.favorites-empty-emblem .nav-icon { width: 54px; height: 54px; margin: 0; }
.favorites-empty h2 { margin: 0 0 20px; font-size: 38px; font-weight: 600; }
.favorites-empty-copy { font-size: 25px; line-height: 1.5; color: #d9e0ed; margin: 0 0 14px; }
.favorites-empty-help { font-size: 21px; line-height: 1.55; color: #9daac0; margin: 0 auto 32px; max-width: 540px; }
.favorites-explore { padding: 17px 34px; font-size: 25px; border: 2px solid #efbd5066; background: #efbd5014; color: #f4d99d; border-radius: 14px; text-align: center; }
.favorites-explore:focus { outline: none; border-color: #ffe6a0; background: #ffe6a0; color: #171d2b; box-shadow: 0 0 0 5px #efbd5020; }

/* 0.18.8 — settings and keyboard, keeping Lume Player's dark/gold palette. */
#modal.settings-overlay { padding: 5vh 7vw; background: #0d0d0f; overflow: auto; }
.settings-panel { max-width: 1660px; margin: 0 auto; }
.settings-panel h1 { font-size: 4.1vh; margin: .8vh 0 3vh; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-gap:0 4vw; }
.setting-tile { display:flex; align-items:center; min-height:8.7vh; padding:1.2vh 1.3vw; margin:0; border:2px solid transparent; border-bottom-color:#29292c; border-radius:5px; background:transparent; text-align:left; }
.setting-tile > .nav-icon { flex:0 0 28px; width:28px; height:28px; margin:0 1.3vw 0 0; color:#d4bd85; }
.setting-copy { min-width:0; flex:1; }
.setting-copy strong { display:block; font-size:2.25vh; font-weight:500; line-height:1.25; white-space:normal; }
.setting-copy small { display:block; margin-top:.55vh; color:#a9a9ae; font-size:1.6vh; line-height:1.25; }
.setting-tile:after { content:'›'; margin-left:1vw; color:#8f8f96; font-size:3vh; }
.setting-tile:focus { outline:none; border-color:#e9c779; background:#27231b; box-shadow:none; transform:none; }
.setting-tile:focus:after { color:#e9c779; }
.settings-footer { margin-top: 4vh; display: flex; align-items: center; justify-content: space-between; color: #a9b4c9; font-size: 1.9vh; }
.settings-description { color: #c3cada; margin-bottom: 3vh; font-size: 2.3vh; }
.hidden-categories { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-gap: 14px; }
.hidden-category { display:flex; align-items:center; padding: 20px; margin:0; text-align:left; border-radius:12px; }
.hidden-category .nav-icon { flex:0 0 28px; width:28px; margin:0 16px 0 0; }
.hidden-category[aria-pressed="true"] { color:#edcb80; background:#333042; }
.hidden-categories .actions { grid-column:1 / -1; }
.parental-settings { max-width:720px; padding:3vh 3vw; border:1px solid #3c4353; border-radius:24px; background:#141d2d; }
.parental-settings h1 { margin-bottom:2vh; }
.pin-field { display:flex; align-items:center; justify-content:space-between; width:100%; padding:20px 22px; margin:14px 0; border-radius:12px; border:2px solid #394256; background:#1d283a; }
.pin-field span { font-size:23px; }.pin-field strong { letter-spacing:6px; color:#f2d594; }
.subtitle-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-gap:18px; }.subtitle-option{margin:0;padding:28px;border-radius:14px;}
.subtitle-sample { text-align:center; margin:5vh auto; padding:18px; text-shadow:2px 2px 4px #000; }
#modal.keyboard-overlay { height:45vh; padding:2vh 9vw; border-top:1px solid #8c754c; border-radius:22px 22px 0 0; background:linear-gradient(140deg,#1b2233,#101625); }
.keyboard-overlay .keyboard-grid { height:18vh; grid-template-rows:repeat(3,minmax(0,1fr)); grid-gap:.8vh; margin:1.2vh 0; }
.keyboard-overlay .keyboard-grid button { border:1px solid #47516a; border-radius:10px; background:#293247; font-size:2.5vh; }
.keyboard-overlay .actions button { height:5.4vh; border-radius:10px; background:#222c40; border:1px solid transparent; font-size:1.65vh; }
.keyboard-overlay .actions .primary { background:#e5bd68; color:#17130b; }
.keyboard-overlay button:focus { background:#f9e6b0; border-color:#fff2ce; color:#1c2230; outline:none; box-shadow:none; }
#modal.search-keyboard { height:35vh; }
.search-keyboard > h1, .search-keyboard .keyboard-value-row { display:none; }
.search-keyboard .hint { margin:0 0 1vh; color:#b2bfd5; }
.resume-track { height:5px; border-radius:4px; margin:8px 0 4px; background:#444956; overflow:hidden; }.resume-track span { display:block; height:100%; background:#f0c66b; }.resume-time{display:block;font-size:15px;color:#d1c4aa;}
.continue-category .nav-icon { margin:0 10px 0 0; }
.media-card.resume-card .poster { height:240px; min-height:240px; }
.resume-card .resume-track { margin-left:6px; margin-right:6px; }
.resume-card .resume-time { padding:0 6px; }

/* 0.18.9 — clean Settings and centered connection states. */
#modal.settings-overlay { display:flex; align-items:center; justify-content:center; padding:5vh 7vw; }
.settings-panel { width:100%; }
.settings-panel.parental-settings { width:720px; max-width:90vw; }
main.loading-view { position:absolute; top:0; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; padding:6vh 12vw; text-align:center; }
.loading-panel { width:100%; max-width:900px; padding:40px; }
.loading-panel h1 { font-size:42px; margin:24px 0 16px; }
.loading-panel .muted { font-size:24px; margin:0 0 30px; }
.loading-panel button { min-width:200px; text-align:center; border-radius:12px; }
.loading-spinner { width:58px; height:58px; border:4px solid rgba(255,255,255,.16); border-top-color:#efbd50; border-radius:50%; margin:0 auto; animation:loading-turn 1s linear infinite; }
@keyframes loading-turn { to { transform:rotate(360deg); } }

/* 0.19.0 — episode drawer and now/next television guide. */
#playback.episodes-open .playback-top { display:none; }
#playback.episodes-open #quick-channels { width:660px; padding:48px 32px 28px 48px; background:linear-gradient(90deg,rgba(8,12,22,.72),rgba(8,12,22,.97) 12%); }
.quick-episode-row { width:100%; height:92px; display:flex; align-items:center; margin:0; padding:12px 16px; border:2px solid transparent; border-radius:12px; background:transparent; }
.quick-episode-code { flex:0 0 104px; color:#e8c878; font-size:23px; font-variant-numeric:tabular-nums; }
.quick-episode-copy { flex:1; min-width:0; }
.quick-episode-copy strong { display:block; font-size:23px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
.quick-episode-copy small { display:block; margin-top:8px; font-size:18px; color:#aebace; }
.quick-episode-row.current { background:rgba(239,189,80,.12); }
.quick-episode-row > .nav-icon { width:22px; height:22px; margin:0 0 0 14px; color:#e8c878; }
.quick-episode-row:focus { border-color:#f1d58f; background:#303a4f; box-shadow:none; }
#playback.live-playback .playback-bottom { padding:70px 4vw 32px; background:linear-gradient(to bottom,rgba(4,8,16,0) 0%,rgba(4,8,16,.45) 28%,rgba(4,8,16,.80) 58%,rgba(4,8,16,.94) 100%); }
#live-osd { border:0; border-radius:0; padding:23px 31px 25px; background:transparent; box-shadow:none; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.live-osd-channel { margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid rgba(185,199,220,.15); }
#live-channel-logo { width:64px; height:64px; object-fit:contain; border-radius:12px; padding:5px; margin-right:20px; background:rgba(255,255,255,.06); }
.live-channel-copy { display:flex; align-items:center; flex:1; min-width:0; }
.live-badge { display:inline-flex; align-items:center; flex:0 0 auto; font-size:16px; font-weight:700; letter-spacing:1.8px; color:#f7dc9c; margin-right:22px; }
.live-badge::before { content:''; width:8px; height:8px; border-radius:50%; background:#f1c96e; margin-right:10px; }
.live-osd-channel h1 { font-size:29px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#favorite-playback { width:52px; flex:0 0 52px; height:52px; padding:10px; margin-left:24px; background:rgba(255,255,255,.06); border:2px solid rgba(236,218,166,.35); }
#favorite-playback .nav-icon { width:26px; height:26px; }
#favorite-playback:focus { border-color:#f3d590; background:rgba(239,189,80,.2); }
.live-osd-row { align-items:stretch; }
.live-program { flex:1.35; margin-right:34px; padding-right:34px; border-right:1px solid rgba(185,199,220,.18); }
.live-guide-label { display:block; font-size:16px; font-weight:700; letter-spacing:2px; color:#eaca85; margin-bottom:9px; }
#live-program-title { font-size:29px; font-weight:600; line-height:1.25; max-height:72px; }
#live-program-time { margin-top:15px; font-size:20px; }
#live-progress { flex:1; min-width:80px; width:auto; height:5px; margin:0 16px; border:0; border-radius:5px; overflow:hidden; background:rgba(255,255,255,.18); }
#live-progress::-webkit-progress-bar { background:rgba(255,255,255,.18); }
#live-progress::-webkit-progress-value { background:#edc777; }
#live-remaining { display:block; color:#a8b5c8; font-size:17px; margin-top:8px; }
.live-next { flex:1; min-width:0; }
#live-next-title { display:block; font-size:26px; font-weight:500; line-height:1.3; max-height:70px; overflow:hidden; }
#live-next-time { display:block; color:#bdc9da; font-size:20px; margin-top:15px; }
#live-next-empty,#live-no-guide { font-size:22px; color:#a6b3c6; }
#live-next-title:empty,#live-next-time:empty,#live-remaining:empty { display:none; }

/* 0.19.2 — browse the day's guide without obscuring the broadcast. */
#live-now-open,#live-next-open { display:block; text-align:left; color:inherit; font:inherit; background:transparent; border:0; border-radius:8px; padding:8px 10px; margin-top:-8px; margin-bottom:-8px; text-shadow:inherit; box-shadow:none; }
#live-now-open { margin-left:-10px; margin-right:34px; padding-right:34px; border-right:1px solid rgba(185,199,220,.18); border-radius:8px 0 0 8px; }
#live-next-open { margin-right:-10px; }
#live-now-open:disabled,#live-next-open:disabled { opacity:1; }
#live-now-open:focus,#live-next-open:focus { outline:none; background:transparent; box-shadow:none; }
#live-now-open:focus .live-guide-label,#live-next-open:focus .live-guide-label { color:#ffda91; text-shadow:0 0 10px rgba(239,202,126,.3); }
#live-now-open:focus #live-program-title,#live-next-open:focus #live-next-title { color:#ffe7ba; }
#live-next-open:focus .live-next-navigation,#live-next-open:focus #live-next-position { color:#ffda91; }
.live-next-navigation { display:flex; align-items:center; height:25px; margin-top:8px; color:#eaca85; font-size:26px; }
#live-next-position { font-size:16px; color:#b8c6d7; margin:0 12px; }
.epg-entry { display:block; width:100%; text-align:left; font:inherit; }
#modal.epg-dialog { display:flex; justify-content:center; align-items:center; padding:6vh 12vw; background:rgba(3,7,15,.7); overflow:hidden; }
.epg-dialog-card { width:100%; max-width:1060px; padding:38px 44px; background:linear-gradient(140deg,#192438,#0e1726); border:1px solid #536078; border-radius:22px; box-shadow:0 16px 65px rgba(0,0,0,.5); }
.epg-dialog-channel { color:#eaca85; font-size:20px; margin:0 0 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.epg-dialog-card h2 { font-size:34px; line-height:1.2; margin:0 0 18px; overflow-wrap:break-word; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.epg-dialog-time { color:#c8d4e6; font-size:23px; margin:0 0 14px; }
.epg-dialog-rating { color:#eaca85; font-size:20px; }
.epg-dialog-description { font-size:24px; line-height:1.45; white-space:pre-line; overflow-wrap:break-word; }
.epg-dialog-card .actions { margin:24px 0 0; justify-content:flex-end; }

/* Programme status comes from the EPG, independently of the live channel badge. */
.program-title-line { display:flex; flex-wrap:wrap; align-items:center; }
.program-heading-text { min-width:0; overflow-wrap:break-word; }
.program-badge { display:inline-block; flex:0 0 auto; vertical-align:middle; padding:4px 9px; margin:3px 0 3px 12px; border:1px solid rgba(255,255,255,.24); border-radius:5px; font-size:14px; line-height:1.2; font-weight:700; letter-spacing:.6px; white-space:nowrap; text-shadow:none; }
.program-badge-live { background:#982f3a; color:#fff3f3; border-color:#da6d76; }
.program-badge-replay { background:#263c53; color:#e2eaf4; border-color:#7890aa; }
.epg-dialog-card > .program-badge { margin:0 0 14px; font-size:16px; }
.program-title-line > strong { min-width:0; max-width:100%; overflow-wrap:break-word; }

#live-exit,#stop-playback { position:absolute; top:36px; left:52px; z-index:2; display:flex; align-items:center; justify-content:center; width:62px; height:62px; padding:14px; margin:0; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:rgba(8,14,24,.5); color:#f4f6fa; box-shadow:0 3px 14px rgba(0,0,0,.2); }
#live-exit .nav-icon,#stop-playback .nav-icon { width:32px; height:32px; margin:0; }
#live-exit:focus,#stop-playback:focus { color:#ffdf9f; background:rgba(24,31,44,.88); border-color:#f1ce86; outline:none; box-shadow:0 0 0 2px rgba(241,206,134,.35); }
#playback.clean #live-exit, #playback.channels-open #live-exit, #playback.clean #stop-playback, #playback.episodes-open #stop-playback { display:none; }

#playback:not(.live-playback) .playback-top { padding-left:140px; }

.episode-watched { display:inline-block; font-size:17px; line-height:1.3; padding:4px 9px; border-radius:6px; background:#1d5142; color:#d6f8e5; margin-top:6px; }
.quick-episode-row .episode-watched { flex-shrink:0; margin:0 10px; font-size:16px; }
.episode-card { position:relative; }
.episode-card > .episode-watched { position:absolute; top:14px; right:14px; margin:0; box-shadow:0 2px 8px #0008; }

/* 0.21.8 — TV menus: opaque charcoal, quiet rows and gold focus. */
#modal.settings-overlay .settings-panel { max-width:1440px; }
#modal.settings-overlay .settings-menu { max-width:1520px; }
#modal.settings-overlay .image-settings { max-width:1040px; }
.image-settings h2 { margin:3vh 0 1.5vh; font-size:2.2vh; font-weight:400; color:#a9a9ae; }
.image-options { display:flex; flex-direction:column; }
.image-start-option { display:flex; align-items:center; justify-content:space-between; width:100%; margin:0; padding:2vh 1.7vw; min-height:10vh; border:2px solid transparent; border-bottom-color:#303034; border-radius:5px; background:transparent; color:#eee; }
.image-option-copy { min-width:0; }
.image-option-copy strong { display:block; font-size:2.7vh; font-weight:500; }
.image-option-copy small { display:block; margin-top:.7vh; font-size:1.9vh; color:#ababaf; }
.image-option-check { flex-shrink:0; margin-left:2vw; color:#edcb80; font-size:3vh; }
.image-start-option:focus,.image-info-option:focus { outline:none; border-color:#edcb80; background:#27231b; box-shadow:none; color:#fff; }
.image-start-option.selected strong { color:#edcb80; }
.image-info-option { display:block; width:100%; margin:3vh 0 0; padding:2vh 1.7vw; min-height:8vh; background:transparent; color:#eee; border:2px solid transparent; border-bottom-color:#303034; border-radius:5px; font-size:2.4vh; }
.image-settings > .hint { margin:2vh 1.7vw 0; font-size:1.8vh; line-height:1.5; color:#ababaf; }
#modal.settings-overlay .settings-description { color:#b9b9bd; }
#modal.settings-overlay .parental-settings { background:#19191c; border-color:#39393d; }
#modal.settings-overlay .pin-field { background:#222225; border-color:#39393d; }

.episode-progress { position:absolute; left:0; right:0; bottom:0; height:5px; background:#ffffff40; z-index:2; }
.episode-progress > span { display:block; height:100%; background:#efc66f; }
#seek-feedback { position:absolute; top:43%; z-index:5; padding:18px 26px; min-width:120px; border:1px solid #c4aa6d66; border-radius:10px; background:#111111dc; color:#f4d48d; font-size:34px; text-align:center; pointer-events:none; }
#seek-feedback.seek-back { left:23%; }
#seek-feedback.seek-ahead { right:23%; }

/* Channel logos keep their proportions and a stable slot if unavailable. */
.channel-art { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 48px; width:48px; height:48px; margin:0 12px 0 5px; }
.channel-art > .nav-icon { width:30px; height:30px; opacity:.45; }
.channel-art-image { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain; }
.quick-channel-row strong { flex:1; min-width:0; }

/* 0.22.1 — restrained provider ratings, shared by films and series. */
.rating-display { display:inline-flex; align-items:center; vertical-align:middle; flex-shrink:0; line-height:1.2; }
.rating-stars { position:relative; display:inline-block; white-space:nowrap; font-family:Arial,sans-serif; font-size:17px; letter-spacing:1px; line-height:1.2; }
.rating-stars-base { color:#ffffff36; }
.rating-stars-fill { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:#c6aa70; }
.rating-number { margin-left:9px; font-size:17px; font-weight:400; color:#bcbcc2; }
#detail-rating { margin:9px 0 5px; }
.series-summary > .rating-display { align-self:flex-start; margin:4px 0 7px; }
.home-meta > .rating-display { margin-left:16px; }

/* Separate annual app activation from the provider list expiry. */
.home-expiry .home-app-expiry { margin-top:12px; padding-top:10px; border-top:1px solid #ffffff20; }

/* 0.22.3 — compact expiry rows with aligned labels and dates. */
.home-expiry { padding:11px 15px; max-width:420px; border-radius:9px; border-color:#ffffff12; background:#141416d9; }
.home-expiry .nav-icon { width:23px; height:23px; flex-basis:23px; margin-right:12px; }
.home-expiry > div { min-width:0; }
.home-expiry .home-list-expiry, .home-expiry .home-app-expiry { display:flex; align-items:baseline; justify-content:space-between; margin:0; padding:0; border:0; }
.home-expiry .home-app-expiry { margin-top:7px; }
.home-expiry .home-list-expiry > span, .home-expiry .home-app-expiry > span { font-size:17px; color:#aaaab2; margin-right:18px; white-space:nowrap; }
.home-expiry strong { margin:0; font-size:19px; font-weight:500; color:#e5e5e9; max-width:205px; text-align:right; }
.home-expiry .home-trial { margin-top:7px; font-size:17px; }

/* 0.23.0: shared Roku/Samsung entry layout and compact bottom keyboard. */
#app-shell.entry-shell { padding:3vh 0; }
.entry-view { align-items:center; }
.entry-layout { width:668px; max-width:90vw; padding:0; border:0; border-radius:0; background:transparent; }
.entry-brand { height:124px; margin:0 0 34px; }
.entry-brand .brand-logo-full { width:400px; height:124px; object-fit:contain; }
.entry-card { padding:30px 40px; border:1px solid #353536; border-radius:22px; background:#141416; }
.entry-tabs { display:flex; margin-bottom:24px; }
.entry-tab { width:50%; min-height:58px; margin:0; padding:12px; text-align:center; border:1px solid #38383b; border-radius:10px; background:#202022; color:#b7b7bd; font-size:24px; }
.entry-tab + .entry-tab { margin-left:12px; }
.entry-tab.selected { background:#c3a25122; border-color:#a68b4d; color:#efd18d; }
.entry-tab:focus { background:#efbd50; border-color:#fff0c6; color:#17130a; outline:none; }
.entry-form, .entry-mac { padding:0; border:0; background:transparent; }
.entry-title { margin:0 0 10px; font-size:32px; font-weight:600; line-height:1.2; text-align:center; }
.entry-help { margin:0 0 26px; color:#aaaab0; font-size:20px; line-height:1.4; text-align:center; }
.entry-form .field { min-height:88px; height:88px; padding:13px 20px; margin:0 0 16px; border:2px solid #38383c; border-radius:12px; background:#202022; text-align:left; }
.entry-form .field span { margin:0 0 9px; color:#b8b8be; font-size:19px; line-height:1.2; }
.entry-form .field strong { min-height:0; height:auto; padding:0; border:0; border-radius:0; background:transparent; color:#dddde1; font-size:23px; line-height:1.2; font-weight:400; }
.entry-form .field:focus, .entry-form .field.editing { border-color:#efbd50; background:#2a251a; }
.entry-form .field:focus strong, .entry-form .field.editing strong { background:transparent; box-shadow:none; }
.entry-form .field-secret { margin:0 0 16px; }
.entry-form .field-secret .field { margin-bottom:0; }
.entry-form .field-secret .field strong { padding-right:50px; }
.entry-form .field-secret > .password-eye { right:8px; bottom:14px; }
.entry-connect { margin:20px 0 0; min-height:64px; padding:14px; font-size:25px; }
.entry-form .notice, .entry-mac .notice { text-align:center; font-size:19px; line-height:1.35; margin:20px 0 0; }
.entry-mac .entry-identity { width:100%; position:static; margin:0; padding:0; border:0; border-radius:0; background:transparent; text-align:center; font-size:25px; color:#e3e3e8; }
.entry-mac .entry-portal-qr { display:block; width:228px; height:228px; padding:8px; margin:22px auto 28px; background:white; }
.entry-mac .entry-identity p { margin:14px 0; }
.entry-mac .entry-identity .entry-portal-url { font-size:20px; color:#efbd50; overflow-wrap:break-word; }
.entry-disclaimer { margin:22px -120px 0; text-align:center; color:#96969e; font-size:19px; line-height:1.4; }
#modal.keyboard-overlay:not(.search-keyboard) { height:36vh; padding:1vh 10vw; }
.keyboard-overlay:not(.search-keyboard) .keyboard-grid { height:15vh; grid-template-rows:repeat(3,minmax(0,1fr)); }
.keyboard-overlay:not(.search-keyboard) h1 { font-size:2vh; }
.keyboard-overlay:not(.search-keyboard) .keyboard-display { height:4vh; font-size:2vh; padding:.5vh 12px; }
.keyboard-overlay:not(.search-keyboard) .hint { margin:.4vh 0; font-size:1.5vh; }
.keyboard-overlay:not(.search-keyboard) .actions button { height:4.6vh; font-size:1.7vh; margin-left:6px; }
#app-shell.entry-shell.keyboard-open { height:64vh; padding:1vh 0; }
.entry-shell.keyboard-open .entry-layout { padding:0; }
.entry-shell.keyboard-open .entry-brand { height:6vh; margin:0 0 1vh; }
.entry-shell.keyboard-open .entry-brand .brand-logo-full { width:230px; height:6vh; }
.entry-shell.keyboard-open .entry-card { padding:1.2vh 26px; }
.entry-shell.keyboard-open .entry-tabs { margin-bottom:1vh; }
.entry-shell.keyboard-open .entry-tab { min-height:4vh; height:4vh; padding:.5vh; font-size:1.9vh; }
.entry-shell.keyboard-open .entry-title { font-size:2.2vh; margin-bottom:.4vh; }
.entry-shell.keyboard-open .entry-help { font-size:1.5vh; margin-bottom:1vh; }
.entry-shell.keyboard-open .entry-form { padding:0; }
.entry-shell.keyboard-open .entry-form .field { height:7.2vh; padding:.8vh 14px; margin-bottom:.8vh; }
.entry-shell.keyboard-open .entry-form .field span { font-size:1.6vh; margin-bottom:.5vh; }
.entry-shell.keyboard-open .entry-form .field strong { height:auto; min-height:0; padding:0; font-size:1.9vh; }
.entry-shell.keyboard-open .entry-form .field-secret { margin-bottom:.8vh; }
.entry-shell.keyboard-open .entry-form .field-secret .field { margin-bottom:0; }
.entry-shell.keyboard-open .field-secret > .password-eye { bottom:1vh; right:8px; }
.entry-shell.keyboard-open .entry-disclaimer { font-size:1.3vh; margin-top:1vh; }
@media (max-height:800px) {
 .entry-layout { width:46vw; }
 .entry-brand { height:10vh; margin-bottom:2vh; }
 .entry-brand .brand-logo-full { height:10vh; width:30vw; }
 .entry-card { padding:2.5vh 3vw; }
 .entry-tab { min-height:5.4vh; padding:1vh; font-size:2.2vh; }
 .entry-tabs { margin-bottom:2vh; }
 .entry-title { font-size:3vh; }
 .entry-help { font-size:1.9vh; margin-bottom:2vh; }
 .entry-form .field { height:8.2vh; min-height:8.2vh; padding:1.1vh 1.3vw; margin-bottom:1.4vh; }
 .entry-form .field span { font-size:1.8vh; margin-bottom:.7vh; }
 .entry-form .field strong { font-size:2.1vh; }
 .entry-form .field-secret { margin-bottom:1.4vh; }
 .entry-connect { min-height:6vh; padding:1vh; margin-top:1.6vh; font-size:2.3vh; }
 .entry-mac .entry-portal-qr { width:21vh; height:21vh; margin:2vh auto; }
 .entry-mac .entry-identity { font-size:2.3vh; }
 .entry-mac .entry-identity .entry-portal-url { font-size:1.9vh; }
 .entry-disclaimer { font-size:1.7vh; margin-top:2vh; }
}
#modal.keyboard-overlay:not(.search-keyboard) { background:#141416; border-color:#8c754c; }
.keyboard-overlay:not(.search-keyboard) .keyboard-grid button { background:#252527; border-color:#444446; }
.keyboard-overlay:not(.search-keyboard) .actions button { background:#252527; }
.keyboard-overlay:not(.search-keyboard) .actions .primary { background:#e5bd68; }
.keyboard-overlay:not(.search-keyboard) button:focus { background:#efbd50; border-color:#fff0c9; color:#17130b; }
.keyboard-overlay .keyboard-display, .entry-form .field strong { white-space:pre; }
.keyboard-overlay .keyboard-display { position:relative; }
.keyboard-caret { color:#efbd50; }

/* 0.23.3: the registration field is the keyboard's only text display. */
#modal.keyboard-overlay.keyboard-inline { height:30vh; }
#app-shell.entry-shell.keyboard-open.inline-keyboard { height:70vh; }
.field.editing strong { display:block; position:relative; overflow:hidden; white-space:pre; }
.entry-form .field.editing strong span { display:inline; margin:0; font:inherit; color:inherit; }
.entry-form .field.editing strong .keyboard-caret { color:#efbd50; }
.keyboard-inline .actions .password-eye { position:static; flex:0 0 4vh; height:4.6vh; padding:.7vh; }

/* Startup consultation begins immediately; the logo disappears as soon as ready. */
#main.startup-view { display: flex; align-items: center; justify-content: center; padding: 0; }
.startup-brand { width: 460px; max-width: 70vw; animation: startup-pulse 1.8s ease-in-out infinite; }
@keyframes startup-pulse { 0%, 100% { opacity: .78; transform: scale(.985); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .startup-brand { animation: none; } }