:root{color-scheme:dark;font-family:Inter,Segoe UI,sans-serif;background:#0b0e16;color:#eef1fa}*{box-sizing:border-box}body{margin:0;display:flex;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid #2b3346;background:#192132;color:inherit;border-radius:10px;padding:12px 16px}button:hover{background:#293750}button:disabled{opacity:.5;cursor:wait}aside{width:250px;background:#101522;border-right:1px solid #222a3b;padding:32px 20px;position:fixed;height:100vh;display:flex;flex-direction:column;gap:25px}.brand{font-size:27px;font-weight:800;text-decoration:none;color:white}.brand span{color:#8effb4}.muted,.eyebrow{color:#8d99b0;font-size:13px;line-height:1.6}nav{display:grid;gap:12px}nav button{text-align:left;font-size:17px;background:transparent;border-color:transparent}nav button.active{background:#234037;color:#9dffc0}small{float:right;font-size:12px;opacity:.7}.aside-bottom{margin-top:auto;display:grid;gap:10px}.aside-bottom button{font-size:12px}.category-label{font-size:13px;color:#a6b0c4}main{margin-left:250px;padding:40px;width:calc(100% - 250px)}header{display:flex;justify-content:space-between;align-items:center;gap:25px}h1{font-size:36px;margin:5px 0 20px}.eyebrow{letter-spacing:3px;color:#8effb4}input,select,textarea{background:#111927;color:#eef1fa;border:1px solid #303b51;border-radius:9px;padding:13px;width:100%;margin-top:8px}header input{max-width:460px;margin:0}#status{color:#9aa8be;margin:15px 0 25px;line-height:1.5}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:22px}.card{background:#141b29;border:1px solid #242d40;border-radius:14px;overflow:hidden}.art{height:220px;background:linear-gradient(135deg,#263952,#192032);display:flex;align-items:center;justify-content:center;font-size:48px;color:#76a491}.art img{width:100%;height:100%;object-fit:cover;display:block}.card-body{padding:14px}.card h3{font-size:14px;line-height:1.45;margin:6px 0 12px;overflow-wrap:anywhere}.badge{font-size:10px;color:#8effb4;text-transform:uppercase;letter-spacing:1px}.card .actions{gap:6px}.card button{font-size:12px;padding:8px}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.primary{background:#8effb4;color:#102219;border:0;font-weight:700}.primary:hover{background:#b4ffcd}dialog{background:#141b29;color:#eef1fa;border:1px solid #36425b;border-radius:18px;padding:30px;width:min(550px,92vw);max-height:90vh}dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}dialog label{display:block;margin-top:18px;font-size:14px}dialog h2{margin-top:0;padding-right:20px}.close{position:absolute;right:12px;top:12px;padding:4px 12px;font-size:24px}#player{width:min(1100px,95vw)}video{width:100%;max-height:65vh;background:black}#details{width:min(780px,94vw)}.episode{padding:14px 0;border-bottom:1px solid #30394c;display:flex;align-items:center;justify-content:space-between;gap:15px}.episode .actions{margin:0;flex-shrink:0}#login-error,#play-status{color:#ffc28e}textarea{resize:vertical;overflow-wrap:anywhere}@media(max-width:750px){aside{width:175px;padding:20px 12px}.brand{font-size:21px}main{margin-left:175px;width:calc(100% - 175px);padding:20px}header{align-items:stretch;flex-direction:column}.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}.episode{align-items:start;flex-direction:column}}

.category-card{text-align:left;min-height:130px;padding:24px;background:linear-gradient(135deg,#1d302f,#172135);display:flex;flex-direction:column;justify-content:space-between;gap:18px}.category-card strong{font-size:17px;overflow-wrap:anywhere}.category-card span{font-size:13px;color:#91b4a4}#back-categories{margin-top:15px}

.track-controls{display:flex;align-items:end;gap:16px;flex-wrap:wrap}.track-controls label{flex:1;min-width:180px}.track-controls button{margin-bottom:1px}

#episodes .season-picker{display:block;margin:0 0 18px;font-weight:600}#episodes .season-picker select{max-width:260px}

.card .actions{flex-wrap:nowrap;justify-content:flex-start;gap:5px}.card-body{padding:12px 10px}.card .actions button{white-space:nowrap;font-size:11px;padding:8px 6px;flex:1}.card .actions .favorite-star{flex:0 0 30px;padding:5px 4px;font-size:23px}.card .favorite-star{font-size:23px;line-height:1;padding:5px 9px;color:#7d889b}.card .favorite-star.selected{color:#ffda6b;background:#3b3320;border-color:#8d7436}

.card{position:relative;display:flex;flex-direction:column;cursor:pointer;transform-origin:center;transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease}.card:hover,.card:focus-within{z-index:1;background:#223449;border-color:#6bac8b;box-shadow:0 0 14px #8effb445,0 8px 30px #8effb428}.card .art{position:relative;flex:none;width:100%;height:auto;min-height:0;aspect-ratio:2/3;padding:0;border:0;border-radius:0;overflow:hidden}.card .art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}.play-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:62px;height:62px;padding-left:4px;border-radius:50%;background:#0b161dd9;border:1px solid #b2ffd2;color:#b2ffd2;font-size:28px;opacity:0;transition:opacity .18s;pointer-events:none}.card:hover .play-overlay,.card:focus-within .play-overlay{opacity:1}.art:focus-visible{outline:3px solid #8effb4;outline-offset:-3px}@media(hover:none){.play-overlay{opacity:1}}

.card{align-self:start}.card .card-body{height:156px;display:flex;flex-direction:column}.card h3{line-height:20px;max-height:60px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.card .actions{margin-top:auto}

#playback-info{white-space:pre-wrap;overflow-wrap:anywhere;background:#0b0e16;padding:16px;border-radius:10px;font-size:13px;line-height:1.7}

#download-percent{font-size:clamp(64px,14vw,110px);font-weight:800;text-align:center;color:#8effb4;line-height:1.3;font-variant-numeric:tabular-nums}#download-progress{width:100%;height:16px;accent-color:#8effb4}#download-speed{text-align:center;font-size:23px;font-variant-numeric:tabular-nums}#download-title{overflow-wrap:anywhere}

#download-list-dialog{width:min(780px,94vw)}#download-list{display:grid;gap:10px}.download-entry{text-align:left;display:flex;flex-direction:column;gap:8px;width:100%}.download-entry strong{overflow-wrap:anywhere}.download-entry span{color:#8effb4;font-size:13px}

#download-spinner{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:#8effb4;line-height:0;vertical-align:middle;transform-origin:50% 50%;animation:download-spin 1s linear infinite}#download-spinner svg{display:block;flex:none;width:20px;height:20px}#download-spinner[hidden]{display:none}@keyframes download-spin{to{transform:rotate(-360deg)}}

#loading-dialog{width:260px;padding:32px;text-align:center;overflow:hidden}#loading-dialog::backdrop{background:#070b16b3;backdrop-filter:blur(3px)}.loading-ring{width:44px;height:44px;margin:0 auto 18px;border:3px solid #2b3b45;border-top-color:#8effb4;border-radius:50%;animation:download-spin .8s linear infinite}#loading-message{margin:0;color:#eef1fa;font-size:15px}

@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover,.card:focus-within{transform:none}}

.download-list-row{display:flex;align-items:center;gap:10px}.download-list-row .download-entry{flex:1;min-width:0}.shutdown-option{display:flex;align-items:center;gap:10px}.shutdown-option input{width:auto;margin:0;accent-color:#8effb4}

:root{--selected-artwork:none}
#details,#player{isolation:isolate}
#details::before,#player::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-image:var(--selected-artwork);background-position:center top;background-size:cover;background-repeat:no-repeat;opacity:.2;mask-image:linear-gradient(to bottom,#000 0%,transparent 100%);pointer-events:none}

/* Live broadcasts have no duration or seek timeline. Keep native sound/fullscreen controls. */
video.is-live::-webkit-media-controls-current-time-display,
video.is-live::-webkit-media-controls-time-remaining-display,
video.is-live::-webkit-media-controls-timeline { display:none !important; }
#live-indicator:not([hidden]) { display:inline-block; color:#ff6363; font-size:13px; font-weight:700; letter-spacing:1px; margin:0 0 10px; }

.track-controls [hidden]{display:none !important}

/* Crop the generous transparent padding through a fixed icon viewport. */
nav button{display:flex;align-items:center;gap:16px;padding:10px 12px}
nav button .nav-icon{position:relative;display:block;flex:0 0 32px;width:32px;height:32px;overflow:hidden}
nav button .nav-icon img{position:absolute;width:64px;height:64px;max-width:none;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:contain}
nav button .nav-label{flex:1;min-width:0;font-weight:700}
nav button small{float:none;flex:none}
@media(max-width:750px){nav button{gap:12px;padding:10px 6px;font-size:15px}nav button .nav-icon{flex-basis:28px;width:28px;height:28px}nav button .nav-icon img{width:56px;height:56px}}

.artwork-heading{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:start;gap:24px;margin-bottom:20px}
.artwork-column{display:flex;flex-direction:column;gap:12px;min-width:0}
.title-artwork{display:block;width:100%;height:auto;max-height:225px;object-fit:contain;object-position:top left;border-radius:10px}
.title-artwork[hidden],.artwork-column button[hidden]{display:none}
.artwork-column button{width:100%;font-size:13px;padding:10px;white-space:normal}
.artwork-heading h2{margin:0;overflow-wrap:anywhere;line-height:1.4}
.artwork-heading.without-artwork{display:block}
.artwork-heading.without-artwork .artwork-column{display:none}
@media(max-width:550px){.artwork-heading{grid-template-columns:110px minmax(0,1fr);gap:16px}.artwork-heading h2{font-size:19px}}

/* Episodes start below the title beside the poster. */
#details .series-content{min-width:0}
#details .artwork-heading{margin-bottom:0}
#details #detail-status{font-size:13px;margin:12px 0}
#details #episodes .season-picker{margin:0 0 16px}
#details #episodes .season-panel>h3{margin:0 0 12px}
#details .episode{align-items:flex-start;flex-wrap:wrap;gap:10px}
#details .episode>span{flex:1 1 180px;min-width:0;overflow-wrap:anywhere;font-size:13px;line-height:1.5}
#details .episode .actions{gap:8px}
#details .episode .actions button{padding:9px 12px;font-size:12px}

#details #episodes .season-picker{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:18px 0 22px}
#details #episodes .season-picker select{margin-top:0;flex:1;min-width:160px;max-width:260px}

.dialog-favorite{position:absolute;right:62px;top:12px;z-index:1}
.dialog-favorite .favorite-star{width:42px;height:42px;padding:0;font-size:28px;line-height:1;color:#a6b0c4}
.dialog-favorite .favorite-star.selected{color:#ffda6b;background:#3b3320;border-color:#8d7436}
#details .artwork-heading h2,#player .artwork-heading h2{padding-right:90px}

.close{display:grid;place-items:center;width:42px;height:42px;padding:0;line-height:1}

.close svg{display:block;flex:none;width:18px;height:18px}

.favorite-star{display:inline-grid;place-items:center}
.favorite-star svg{display:block;pointer-events:none}
.dialog-favorite .favorite-star svg{width:24px;height:24px}

#details{width:min(920px,94vw)}
#details .artwork-heading{grid-template-columns:190px minmax(0,1fr)}
#season-download button{white-space:nowrap;font-size:13px;padding:10px 12px}
@media(max-width:550px){#details .artwork-heading{grid-template-columns:165px minmax(0,1fr);gap:14px}#season-download button{font-size:12px;padding:10px 8px}}

#details .artwork-column .title-artwork{width:100%;height:auto;max-height:none;object-fit:contain}

#status:empty{display:none}

#show-playback-info + #download-video{margin-left:6px}

/* Artwork belongs to series details; the playback window stays clear. */
#player::before{display:none}

.video-stage{position:relative;width:100%;aspect-ratio:16/9;max-height:65vh;background:#000;overflow:hidden}
.video-stage #video{display:block;width:100%;height:100%;max-height:none;object-fit:contain;background:#000}
#video-loading:not([hidden]){position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;background:#0003}
#video-loading .loading-ring{display:block;margin:0;width:48px;height:48px;border-width:4px}

.playback-actions{display:flex;align-items:center;gap:10px}
.playback-actions .info-button{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;padding:0}
.info-button svg{display:block;pointer-events:none}

/* Use the colored Watch4K loading indicator instead of Chrome's central overlay. */
#video::-webkit-media-controls-overlay-enclosure{display:none !important}

/* Mobiele layout en aanraakbediening. */
:root {
  --mobile-rail: 172px;
  --touch-size: 44px;
}
body { min-height: 100dvh; }
button, input, select, textarea { font-size: 16px; }
button, input, select { min-height: var(--touch-size); touch-action: manipulation; }
button { -webkit-tap-highlight-color: #8effb433; }
button:active { border-color: #8effb4; background-color: #234037; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #8effb4;
  outline-offset: 3px;
}

/* Original wordmark, colored navigation artwork and green selection. */
aside {
  width: calc(var(--mobile-rail) + env(safe-area-inset-left));
  height: 100dvh;
  padding: 12px 10px 10px calc(10px + env(safe-area-inset-left));
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.brand { font-size: 25px; flex-shrink: 0; }
aside > .muted { display: block; font-size: 9px; letter-spacing: 1.5px; margin: 0; }
nav { gap: 5px; }
nav button {
  min-height: 46px;
  padding: 6px 8px;
  gap: 9px;
  font-size: 14px;
  border-radius: 10px;
}
nav button .nav-icon { width: 32px; height: 32px; flex-basis: 32px; }
nav button .nav-icon img { width: 64px; height: 64px; }
nav button small { font-size: 10px; }
nav button.active { border-color: #6bac8b; box-shadow: inset 3px 0 #8effb4; }
.aside-bottom { gap: 5px; padding-top: 6px; }
.aside-bottom button { min-height: 44px; padding: 6px 8px; font-size: 12px; }
main {
  margin-left: calc(var(--mobile-rail) + env(safe-area-inset-left));
  width: calc(100% - var(--mobile-rail) - env(safe-area-inset-left));
  padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) 16px;
}
header { flex-direction: row; align-items: center; gap: 16px; }
header > div { min-width: 0; }
h1 { font-size: 26px; margin: 4px 0 6px; overflow-wrap: anywhere; }
.eyebrow { font-size: 10px; letter-spacing: 2px; margin: 0; }
header input { width: 44%; max-width: 340px; flex-shrink: 0; padding: 10px 12px; }
#status { font-size: 12px; margin: 10px 0 16px; }
.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 135px), 1fr)); gap: 14px; }
.category-card { min-height: 110px; padding: 16px; border-color: #355247; }
.category-card strong { font-size: 15px; }
.category-card span { font-size: 12px; }
.card .card-body { height: 142px; padding: 12px; }
.card h3 { font-size: 13px; line-height: 18px; max-height: 54px; }
.card .actions .favorite-star { flex: 0 0 44px; min-width: 44px; min-height: 44px; padding: 8px; }
.play-overlay { width: 48px; height: 48px; font-size: 23px; opacity: 1; }

/* Dialogs keep their artwork, rounded panels and Watch4K buttons. */
dialog { max-height: 94dvh; padding: 22px; width: min(700px, 94vw); }
#details { width: min(920px, 94vw); }
#details .artwork-heading { grid-template-columns: clamp(100px, 20vw, 175px) minmax(0, 1fr); gap: 18px; }
#details .episode { flex-direction: row; align-items: center; gap: 10px; }
#details .episode .actions button { min-width: 70px; min-height: 44px; padding: 9px 16px; }
.close, .dialog-favorite .favorite-star { width: 44px; height: 44px; min-height: 44px; }
.close { z-index: 5; }
.dialog-favorite { right: 66px; }

/* A branded toolbar above the video keeps title, favorite and close reachable. */
#player {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #101522;
  overflow: auto;
}
#player-heading {
  display: flex;
  align-items: center;
  min-height: 56px;
  margin: 0;
  padding: 8px max(120px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid #2b3346;
}
#player #player-title { font-size: 15px; line-height: 20px; padding: 0; margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#player .artwork-column { display: none; }
#player .close { top: 6px; right: max(10px, env(safe-area-inset-right)); }
#player-favorite { display: block; top: 6px; right: calc(62px + env(safe-area-inset-right)); }
#player #live-indicator:not([hidden]) { position: absolute; top: 66px; left: max(12px, env(safe-area-inset-left)); z-index: 2; padding: 4px 7px; background: #000a; border-radius: 6px; font-size: 11px; pointer-events: none; }
#player .video-stage { height: calc(100dvh - 116px - env(safe-area-inset-bottom)); max-height: none; aspect-ratio: auto; margin: 0; }
#player video { height: 100%; max-height: none; object-fit: contain; }
#player #video::-webkit-media-controls-overlay-enclosure { display: flex !important; }
#player .track-controls { min-height: 60px; margin: 0; padding: 6px max(68px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); gap: 12px; flex-wrap: nowrap; }
#player .track-controls label { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; font-size: 12px; }
#player .track-controls select { min-width: 0; margin: 0; padding: 7px; }
#player .playback-actions { position: absolute; bottom: calc(8px + env(safe-area-inset-bottom)); right: max(10px, env(safe-area-inset-right)); }
#player .info-button { min-width: 44px; min-height: 44px; }
#player #track-status { display: none; }
#play-status { position: absolute; bottom: calc(60px + env(safe-area-inset-bottom)); left: 12px; right: 12px; font-size: 12px; background: #000b; margin: 0; }
#play-status:empty { display: none; }
#playback-info { margin: 0 12px 12px; }
#rotate-hint { display: none; }
.admin-page main { margin: 0 auto; width: min(700px, 100%); padding: 20px; }
.admin-page label { display: block; margin: 8px 0; }
.admin-page button { margin-top: 10px; }
[hidden] { display: none !important; }

/* Short landscape phones keep all navigation and account buttons accessible. */
@media (max-height: 440px) and (orientation: landscape) {
  :root { --mobile-rail: 160px; }
  aside { padding-top: 8px; gap: 4px; }
  .brand { font-size: 23px; }
  aside > .muted { font-size: 8px; }
  nav { gap: 2px; }
  nav button { min-height: 44px; padding: 4px 6px; }
  .aside-bottom { grid-template-columns: 1fr 1fr; gap: 4px; padding-top: 0; }
  .aside-bottom #refresh { grid-column: 1 / -1; }
  .aside-bottom button { font-size: 11px; padding: 4px; }
  main { padding-top: 10px; }
}
@media (orientation: portrait) {
  body:not(.admin-page) > #rotate-hint {
    display: grid; position: fixed; inset: 0; z-index: 99999;
    place-content: center; justify-items: center; gap: 20px;
    text-align: center; padding: 32px; background: #0b0e16; font-size: 20px;
  }
  #rotate-hint .brand { font-size: 32px; }
  #rotate-hint p { max-width: 300px; color: #8d99b0; line-height: 1.6; }
  body:not(.admin-page) { overflow: hidden; }
}

/* Reference layout: glass tiles on a deep blue background, with original Watch4K icons. */
body:not(.admin-page) {
  background: radial-gradient(ellipse at 60% 0%, #0b3651aa, transparent 75%), #030b18;
  isolation: isolate;
}
body:not(.admin-page)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(31deg, transparent 36%, #0a738334 36.2%, #05203455 43%, transparent 43.2%),
    linear-gradient(151deg, transparent 28%, #073b5044 28.2%, #0d607327 42%, transparent 42.3%),
    linear-gradient(24deg, transparent 55%, #12607824 55.2%, transparent 67%),
    radial-gradient(ellipse at 13% 105%, #39234d66, transparent 55%);
}
.app-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 68px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px max(22px, env(safe-area-inset-right)) 8px max(22px, env(safe-area-inset-left));
  background: #061426e6; border-bottom: 1px solid #6aa8be1c;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }
#app-clock { color: #b9cddd; font-size: 13px; font-variant-numeric: tabular-nums; white-space: pre; margin-right: 12px; }
.topbar-actions button { width: 44px; height: 44px; padding: 0; background: transparent; color: #bfd5e3; border-color: transparent; font-size: 26px; }
.topbar-actions button:active, .topbar-actions button:focus-visible { background: #234858; border-color: #79c7dd; }
body:not(.home-view):not(.admin-page) aside { top: 68px; height: calc(100dvh - 68px); background: #0a192ccc; }
body:not(.home-view):not(.admin-page) main { padding-top: 84px; }
.launch-tile .tile-description { display: none; }
.refresh-symbol { display: grid; place-items: center; width: 32px; flex: 0 0 32px; font-size: 28px; color: #a5dce8; }
body:not(.home-view) .tile-refresh .nav-label { font-size: 12px; white-space: normal; }

.home-view { display: block; }
.home-view .app-topbar { position: relative; height: 20dvh; min-height: 64px; max-height: 104px; background: transparent; border: 0; padding-inline: max(5vw, env(safe-area-inset-left)); }
.home-view .brand { font-size: clamp(23px, 3.3vw, 34px); }
.home-view #home { display: none; }
.home-view aside {
  position: relative; top: auto; width: 100%; height: auto; min-height: 0;
  padding: 0 max(5vw, env(safe-area-inset-right)) 16px max(5vw, env(safe-area-inset-left));
  background: transparent; border: 0; overflow: visible;
}
.home-view nav {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.04fr);
  grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 32px);
  height: min(66dvh, 430px); min-height: 206px;
}
.home-view nav .launch-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end; gap: 8px; padding: clamp(14px, 2.1vw, 28px);
  text-align: left; border-radius: 9px; border: 1px solid #7ebbd64d;
  color: #d3e3ef; overflow: hidden;
  background: linear-gradient(160deg, #18395866, #365c88a6);
  box-shadow: inset 0 1px #c9eeff0c, 0 8px 24px #0002;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.home-view .tile-live { grid-column: 1; grid-row: 1 / 3; }
.home-view nav .tile-movie { grid-column: 2; grid-row: 1 / 3; background: linear-gradient(155deg, #16405266, #367d91a1); }
.home-view nav .tile-series { grid-column: 3; grid-row: 1 / 3; background: linear-gradient(155deg, #202e5866, #514689ad); }
.home-view nav .tile-favorites { grid-column: 4; grid-row: 1; }
.home-view nav .tile-refresh { grid-column: 4; grid-row: 2; }
.home-view nav .nav-icon { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); width: clamp(60px, 9vw, 130px); height: clamp(60px, 9vw, 130px); flex: none; }
.home-view nav .nav-icon img { width: 200%; height: 200%; }
.home-view nav .nav-label { flex: none; font-size: clamp(16px, 2.2vw, 27px); font-weight: 650; line-height: 1.2; }
.home-view .tile-description { display: block; color: #99b7ca; font-size: clamp(11px, 1.45vw, 17px); line-height: 1.5; max-width: 18ch; }
.home-view nav small { position: absolute; right: 12px; top: 10px; padding: 3px 7px; border-radius: 20px; background: #05152855; font-size: 10px; }
.home-view nav .tile-favorites, .home-view nav .tile-refresh { align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 12px; }
.home-view nav .tile-favorites .nav-icon { position: relative; top: auto; left: auto; transform: none; width: clamp(40px, 5.5vw, 76px); height: clamp(40px, 5.5vw, 76px); }
.home-view nav .tile-favorites .nav-label, .home-view nav .tile-refresh .nav-label { font-size: clamp(12px, 1.65vw, 21px); font-weight: 500; }
.home-view .refresh-symbol { width: auto; height: 40px; flex: none; font-size: clamp(32px, 5vw, 56px); line-height: 1; }
.home-view .tile-refresh .tile-description { display: none; }
.home-view nav button:active, .home-view nav button:focus-visible { border-color: #a1e9f3; box-shadow: 0 0 20px #59c6dc44, inset 0 0 0 1px #9de9f188; filter: brightness(1.15); }
.home-view main { margin: 0; width: 100%; padding: 0 5vw 8px; text-align: center; }
.home-view main > header, .home-view #back-categories, .home-view #results { display: none; }
.home-view #status { margin: 0; color: #a9c3d5; }
@media (max-height: 360px) and (orientation: landscape) {
  .home-view .app-topbar { height: 60px; min-height: 60px; }
  .home-view nav { height: calc(100dvh - 85px); min-height: 190px; gap: 12px; }
  .home-view nav .nav-icon { top: 9%; width: 56px; height: 56px; }
  .home-view nav .launch-tile { padding: 12px; gap: 4px; }
  .home-view .tile-description { font-size: 10px; }
  .home-view nav .tile-favorites .nav-icon { width: 36px; height: 36px; }
  #app-clock { font-size: 11px; margin-right: 0; }
}
.topbar-actions .toolbar-link {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid transparent; border-radius: 10px;
  color: #bfd5e3; text-decoration: none; font-size: 26px;
  touch-action: manipulation;
}
.topbar-actions .toolbar-link:active, .topbar-actions .toolbar-link:focus-visible {
  background: #234858; border-color: #79c7dd;
}
.admin-entry { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; color: #8effb4; }
.admin-page #message { color: #a9c3d5; line-height: 1.6; }