/* Lumio TV Web – 10-foot UI, D-pad only.
   All sizes are in rem; the root size follows the screen width and the "Prikaz" setting
   (Standard / Veliko / Extra veliko) so text stays readable on every TV. */
:root { --ui: .78; --blue: #1f6fff; --blue2: #1557d6; --panel: #0d1522; --panel2: #111a2c; --line: #1c2942;
  --text: #f3f6fb; --muted: #9fb0c8; --track: #263550; }
/* Scale to the screen: limited by width AND height, so 16:9 TVs, 21:9 phones and 4:3 tablets all fit. */
html { --vw: 1vw; --vh: 1vh; font-size: calc(var(--ui) * 1vw); font-size: calc(var(--ui) * min(var(--vw), 1.7778 * var(--vh))); }
html.size-standard { --ui: .70; }
html.size-large { --ui: .78; }
html.size-xlarge { --ui: .88; }
/* Phones are held close but the screen is tiny: bigger UI */
html.phone.size-standard { --ui: 1.0; }
html.phone.size-large { --ui: 1.15; }
html.phone.size-xlarge { --ui: 1.3; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #05080f; color: var(--text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; cursor: none; }
body { font-size: 1.3rem; }
#app { width: 100%; height: 100%; position: relative; }
/* Forced landscape: while a phone/tablet is held upright the whole app is rotated 90° */
html.rotate { --vw: 1vh; --vh: 1vw; }
html.rotate #app { position: fixed; top: 0; left: 100vw; width: 100vh; height: 100vw; transform-origin: 0 0; transform: rotate(90deg); }
/* Notch / rounded corners (landscape) */
html.phone:not(.rotate) .view { left: env(safe-area-inset-left, 0); right: env(safe-area-inset-right, 0); }

/* Touch screens */
html.touch, html.touch body { cursor: auto; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html.touch input { -webkit-user-select: text; user-select: text; }
html.touch .list, html.touch .scroller, html.touch .chips { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
html.touch .focusable:active { filter: brightness(1.25); }
html.touch .legend, html.touch .ov-legend, html.touch .infobar .hint, html.touch .vodbar .l2 .muted { display: none; }
.tbtn { display: none; }
html.touch .tbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 4.4rem; height: 4.4rem; padding: 0 1.2rem;
  border-radius: 2.2rem; background: rgba(20,32,54,.92); border: 1px solid var(--line); font-size: 1.7rem; font-weight: 700; color: #fff; }
html.touch .tbtn:active { background: var(--blue); }
html.touch .ov-title .tbtn { margin-right: 1rem; color: #fff; font-size: 1.9rem; }
html.touch .ov-tabs .tab, html.touch .ov-tabs .arr { padding: .6rem .3rem; }
html.touch .ov-tabs { max-width: 70%; }
.touchbar { position: absolute; top: 1.6rem; left: 1.6rem; right: 9rem; display: none; gap: 1rem; z-index: 4; }
html.touch .osd-on .touchbar { display: flex; }
html.touch .topbar .tbtn { height: 3.4rem; min-width: 3.4rem; font-size: 1.5rem; margin-right: 1rem; }
html.touch .ovrow { height: 4.6rem; }
html.touch .menu-item { height: 4.4rem; }

/* TVs: remote only - no cursor, no hover/click targets, no text selection */
html.no-mouse, html.no-mouse * { cursor: none !important; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
html.no-mouse body { pointer-events: none; }
html.no-mouse input { -webkit-user-select: text; user-select: text; }
.view { display: none; position: absolute; inset: 0; }
.view.active { display: flex; }
.muted { color: var(--muted); }
.error { color: #ff6b7d; margin-top: 1rem; min-height: 1.4em; }
svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Focus: blue fill + white ring (the only "cursor") */
.focusable { outline: none; }
.focused { background: linear-gradient(180deg, var(--blue), var(--blue2)) !important; color: #fff !important;
  box-shadow: 0 0 0 .18rem rgba(255,255,255,.85), 0 .6rem 1.6rem rgba(31,111,255,.35); }
.focused .muted, .focused .sub, .focused .desc, .focused .time { color: #e6eeff !important; }
.focused .bar { background: rgba(255,255,255,.35); }
.focused .bar > i { background: #fff; }

/* Login */
#view-login { align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, #16274a, #070c16 70%); }
.login-card { width: 34rem; padding: 2.6rem; border-radius: 1rem; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; }
.brand { font-size: 2.6rem; font-weight: 800; letter-spacing: .1rem; }
.login-card label { margin: 1.2rem 0 .4rem; font-size: 1rem; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.login-card input { height: 3.4rem; border-radius: .6rem; border: 1px solid var(--line); background: #0a1220; color: #fff; padding: 0 1rem; font-size: 1.3rem; }
.login-origins { flex-wrap: wrap; }
.login-origins .btn { flex: 1 1 8rem; margin: 0; }
.btn-primary { margin-top: 1.8rem; height: 3.6rem; border: 0; border-radius: .6rem; font-size: 1.35rem; font-weight: 800; background: #24324d; color: #fff; }

/* Main frame */
#view-main, .zap {
  background: linear-gradient(135deg, rgba(5,8,15,0.92) 0%, rgba(5,8,15,0.80) 50%, rgba(5,8,15,0.65) 100%),
              url('bridge.jpg') center/cover no-repeat !important;
}
#view-main.home-page { background:
  linear-gradient(180deg, rgba(2,8,24,.24) 0%, rgba(3,10,28,.08) 46%, rgba(2,8,24,.46) 100%),
  url('assets/background.jpg') center/cover no-repeat !important; }
#view-main.home-page .frame { position: relative; display: block; width: 100%; height: 100%; background: transparent; border: 0;
  border-radius: 0; backdrop-filter: none; overflow: hidden; }
.frame { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: .8rem; background: rgba(8,13,23,0.85); backdrop-filter: blur(8px); overflow: hidden; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.6rem; border-bottom: 1px solid var(--line); font-size: 1.3rem; background: transparent; }
#view-main.home-page .topbar { position: absolute; z-index: 4; top: 0; left: 0; width: 100%; height: 6.2%; min-height: 42px;
  padding: 0 2.5%; border-color: rgba(181,208,255,.22); background: rgba(2,11,35,.43);
  font-size: clamp(14px, min(1.15vw, 2.1vh), 23px); }
.topbar .sep { margin: 0 .8rem; color: #45577a; }
.brand-small { font-weight: 800; letter-spacing: .08rem; }
#page { flex: 1; position: relative; overflow: hidden; }
.legend { display: flex; gap: 3.2rem; padding: .9rem 1.6rem; border-top: 1px solid var(--line); font-size: 1.1rem; color: #d7deea; background: transparent; }
#view-main.home-page .legend { position: absolute; z-index: 4; bottom: 0; left: 0; width: 100%; height: 6.7%; min-height: 40px;
  gap: 2.2%; padding: 0 2.4%; border-color: rgba(190,210,255,.2); background: rgba(2,10,31,.64);
  font-size: clamp(11px, min(.95vw, 1.75vh), 18px); }
.legend span { display: flex; align-items: center; }
.dot { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  margin-right: .7rem; font-size: .6rem; font-weight: 800; font-style: normal; color: #fff; }
.dot.red { background: #e5383b; } .dot.green { background: #2fb34a; } .dot.yellow { background: #f4b400; } .dot.blue { background: #1f6fff; }

.scroller { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 1.6rem; }
#view-main.home-page #page { position: absolute; inset: 0; overflow: hidden; }
#view-main.home-page .scroller { position: absolute; inset: 0; overflow: hidden; padding: 0; }
.scroller::-webkit-scrollbar, .list::-webkit-scrollbar, .row::-webkit-scrollbar { display: none; }

/* 01 HOME */
.home-top { position: absolute; z-index: 1; top: 22%; left: 2.7%; right: 2.7%; display: flex; align-items: stretch; margin: 0; min-height: 0; }
.greet { flex: 1; display: flex; flex-direction: column; justify-content: center; z-index: 2; }
#view-main.home-page .greet h1 { margin: 0 0 12px; font-size: clamp(29px, min(2.5vw, 4.65vh), 49px); font-weight: 800;
  text-shadow: 0 2px 15px rgba(0,0,0,.45); }
#view-main.home-page .greet p { margin: 8px 0; color: #f7f9ff; font-size: clamp(16px, min(1.5vw, 2.8vh), 28px); }
#view-main.home-page .greet .subscription-expiry { color: #f7f9ff; }
#view-main.home-page .tiles { position: absolute; z-index: 2; top: 44.8%; left: 2.6%; width: 94.8%; height: 16.3%;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75%; margin: 0; }
#view-main.home-page .tile { min-width: 0; height: 100%; border-radius: 14px; background: rgba(4,23,61,.60);
  border: 1.5px solid rgba(181,208,255,.46); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  font-size: clamp(15px, min(1.25vw, 2.35vh), 25px); font-weight: 700;
  box-shadow: 0 5px 16px rgba(0,0,0,.16); transition: background .2s, transform .2s, border .2s, box-shadow .2s; }
#view-main.home-page .tile.focused, #view-main.home-page .tile:focus-visible { background: rgba(0,85,245,.78) !important;
  border: 2px solid #fff; box-shadow: 0 0 30px rgba(0,90,255,.35), inset 0 0 16px rgba(80,160,255,.24); }
#view-main.home-page .tile .ic { width: clamp(27px, min(2.4vw, 4.2vh), 45px); height: clamp(27px, min(2.4vw, 4.2vh), 45px); }
#view-main.home-page .home-controls { position: absolute; z-index: 2; top: 67%; left: 2.6%; width: 94.8%; height: 19%; min-height: 150px;
  display: grid; grid-template-columns: 12% 1fr; align-items: center; gap: 0; margin: 0; padding: 15px 1.3%;
  border: 1.5px solid rgba(108,159,255,.58); border-radius: 14px; background: rgba(2,18,48,.72);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.tile .ic { width: 3.2rem; height: 3.2rem; }
.tile .ic svg { filter: drop-shadow(0 0 .35rem rgba(130,192,255,.45)); }
.home-controls { display: flex; align-items: center; gap: 2rem; margin-top: 3rem; padding: 1.8rem 2rem;
  min-height: 16rem; border: 1px solid rgba(59,127,255,.82); border-radius: .9rem;
  background: linear-gradient(110deg, rgba(3,14,39,.84), rgba(6,18,51,.74)); backdrop-filter: blur(12px);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.24), inset 0 0 2.8rem rgba(31,111,255,.08); }
.control-pad { flex: 0 0 10rem; width: 10rem; height: 10rem; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  align-items: center; justify-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(135,174,225,.24), rgba(59,95,153,.48));
  box-shadow: inset 0 0 1rem rgba(213,230,255,.24); }
.pad-key { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; font-weight: 800; }
.pad-up { grid-area: 1 / 2; } .pad-left { grid-area: 2 / 1; } .pad-center { grid-area: 2 / 2; width: 3.1rem; height: 3.1rem;
  border: .25rem solid #d6e5ff; border-radius: 50%; box-shadow: 0 0 .6rem rgba(255,255,255,.22); }
.pad-right { grid-area: 2 / 3; } .pad-down { grid-area: 3 / 2; }
.control-content { flex: 1; min-width: 0; }
#view-main.home-page .control-content h2 { margin-bottom: 16px; font-size: clamp(20px, min(1.75vw, 3.15vh), 34px); font-weight: 800; }
#view-main.home-page .control-columns { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
#view-main.home-page .control-group { display: flex; flex-direction: column; gap: 8px; padding: 0 2.5%; }
#view-main.home-page .control-group + .control-group { border-left: 1px solid rgba(170,205,255,.28); padding-left: 5%; }
#view-main.home-page .control-row { display: flex; align-items: center; gap: 12px; min-width: 0; color: #f7f9ff;
  font-size: clamp(15px, min(1.25vw, 2.35vh), 25px); line-height: 1.3; }
.control-keys { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
#view-main.home-page .control-key { display: inline-flex; min-width: 2.8rem; height: 2.8rem; padding: 0 .5rem; align-items: center; justify-content: center;
  border: 1.6px solid #cbd8ff; border-radius: 7px; color: #fff; font-size: clamp(13px, min(1vw, 1.85vh), 20px); font-weight: 800;
  background: rgba(3,18,50,.65); box-shadow: inset 0 0 12px rgba(140,180,255,.12); }
.control-key-separator { color: rgba(222,235,255,.5); }
.control-description { min-width: 0; }
@media (max-width: 850px) {
  #view-main.home-page .control-columns { grid-template-columns: 1fr; }
  #view-main.home-page .control-group { gap: 5px; padding: 0 1%; }
  #view-main.home-page .control-group + .control-group { display: none; }
  #view-main.home-page .control-pad { display: none; }
  #view-main.home-page .home-controls { grid-template-columns: 1fr; }
  #view-main.home-page .home-controls .control-content h2 { margin-bottom: 8px; }
  #view-main.home-page .home-controls .control-row { gap: 6px; }
  #view-main.home-page .legend { gap: 1%; }
}

/* Logos */
.logo { background: center/contain no-repeat; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; color: #cfd8e6; text-align: center; overflow: hidden; }
.bar { height: .35rem; border-radius: .2rem; background: var(--track); overflow: hidden; width: 100%; }
.bar > i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: .2rem; }

/* 02 LIVE TV: categories | channel cards */
.split { position: absolute; inset: 0; display: flex; gap: 1rem; padding: 1rem; }
.cats { width: 30%; display: flex; flex-direction: column; }
.cats h3, .col h3 { font-size: 1.35rem; font-weight: 600; padding: .6rem .8rem .8rem; }
.list { flex: 1; overflow-y: auto; }
.cat { display: flex; align-items: center; gap: 1rem; height: 3.6rem; padding: 0 1rem; border-radius: .5rem; margin-bottom: .35rem;
  background: var(--panel2); font-size: 1.35rem; }
.cat .ic { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; }
.cat .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat .chev { opacity: 0; font-size: 1.6rem; }
.cat.current { background: linear-gradient(180deg, var(--blue), var(--blue2)); color: #fff; }
.cat.current .chev, .cat.focused .chev { opacity: 1; }
.col { flex: 1; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: .6rem; overflow: hidden; }
.col > .list > .muted, .listcol .list > .muted { padding: 1.4rem; }
.chcard { display: flex; gap: 1.4rem; align-items: center; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); }
.chcard .logo { width: 7.5rem; height: 3.6rem; }
.chcard .num { width: 2.2rem; font-size: 1.4rem; color: #cfd8e6; align-self: flex-start; padding-top: .1rem; }
.chcard .body { flex: 1; min-width: 0; }
.chcard .l1 { display: flex; gap: 1.2rem; align-items: baseline; }
.chcard .name { font-size: 1.55rem; font-weight: 700; white-space: nowrap; }
.chcard .sub { font-size: 1.25rem; color: #cfd8e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chcard .l2 { display: flex; gap: 1.6rem; align-items: center; margin: .5rem 0; }
.chcard .time { font-size: 1.1rem; color: var(--muted); white-space: nowrap; }
.chcard .l2 .bar { max-width: 14rem; }
.chcard .desc { font-size: 1.1rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* PREGLED KANALA (channel overview, inside the player; the video is moved into .ov-preview) */
.zap { position: absolute; inset: 0; display: none; flex-direction: column; z-index: 5;
  background: #05080f; }
.zap.show { display: flex; }
.ov-head { display: flex; justify-content: space-between; align-items: center; padding: .9rem 2rem; border-bottom: 1px solid var(--line); }
.ov-title { display: flex; align-items: center; gap: .8rem; font-size: 1.9rem; font-weight: 600; color: #5fb0ff; }
.ov-title .ic { width: 2.5rem; height: 2.5rem; color: #dfe8f5; margin-right: .9rem; }
.ov-clock { display: flex; align-items: center; gap: 1.4rem; font-size: 1.3rem; color: #cfd8e6; }
.ov-clock b { font-size: 2.5rem; color: #fff; font-weight: 600; }
.ov-clock .sep { color: #45577a; font-size: 2.2rem; }
.ov-body { flex: 1; display: flex; gap: 1.2rem; padding: 1.1rem 1.6rem; min-height: 0; }
.ov-left { width: 59%; display: flex; flex-direction: column; gap: 1.1rem; min-height: 0; }
.ov-right { flex: 1; display: flex; flex-direction: column; gap: 1.1rem; min-height: 0; }
.ov-panel { background: rgba(15,24,40,.94); border: 1px solid var(--line); border-radius: .6rem; }
.ov-list { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ov-list .list { position: relative; }
.ov-list .empty { padding: 1.6rem; }
.ov-lh { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); }
.ov-cat { font-size: 1.55rem; font-weight: 700; letter-spacing: .04rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-tabs { display: flex; align-items: center; gap: .9rem; font-size: 1.1rem; color: #cfd8e6; white-space: nowrap; overflow: hidden; max-width: 62%; }
.ov-tabs .tab { overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }
.ov-tabs .tab.cur { color: #5fb0ff; font-weight: 700; }
.ov-tabs .sep { color: #45577a; }
.ovrow { display: flex; align-items: center; gap: 1.2rem; height: 4rem; padding: 0 1.4rem; border-bottom: 1px solid var(--line); font-size: 1.25rem; }
.ovrow .num { width: 2.2rem; color: #cfd8e6; flex: 0 0 auto; }
.ovrow .logo { width: 5.5rem; height: 2.5rem; }
.ovrow .name { width: 12rem; flex: 0 0 auto; font-weight: 700; font-size: 1.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovrow .prog { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #dfe6f0; }
.ovrow .time { width: 7.6rem; flex: 0 0 auto; font-size: 1.05rem; color: #cfd8e6; text-align: right; white-space: nowrap; }
.ovrow .bar { width: 4.6rem; flex: 0 0 auto; }
.ovrow .hd { width: 2.8rem; flex: 0 0 auto; text-align: center; }
.ovrow.playing .name::after { content: "  ●"; color: #ff4d57; font-size: .9rem; }
.ovrow.focused { box-shadow: inset 0 0 0 .12rem rgba(255,255,255,.55); }
.hd { display: inline-block; border: 1px solid #c9d3e2; border-radius: .25rem; font-size: .85rem; font-weight: 700; padding: .05rem .35rem; color: #e6ecf5; line-height: 1.3; }
.star { font-size: 1.5rem; color: #cfd8e6; width: 1.6rem; text-align: center; flex: 0 0 auto; }
.star.on { color: #4f9dff; }
.focused .star, .focused .star.on { color: #fff; }
.ov-detail { height: 13rem; flex: 0 0 auto; display: flex; padding: 1.2rem 1.4rem; gap: 1.4rem; }
.dmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .7rem; }
.dtop { display: flex; align-items: center; gap: 1.4rem; }
.logo.big { width: 9rem; height: 3.8rem; font-size: 1.3rem; }
.dtt { flex: 1; min-width: 0; }
.dtitle { font-size: 1.75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtime { font-size: 1.2rem; color: #cfd8e6; margin-top: .25rem; white-space: pre; }
.dbadges { display: flex; gap: .9rem; align-items: center; align-self: flex-start; }
.dbar { height: .4rem; }
.dbar > i { background: linear-gradient(90deg, #2f80ff, #63b3ff); }
.ddesc { font-size: 1.1rem; color: #cfd8e6; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dside { width: 11rem; flex: 0 0 auto; border-left: 1px solid var(--line); padding-left: 1.4rem; display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.dside .eyebrow { color: #5fb0ff; font-size: 1.1rem; }
.dside .ntime { font-size: 1.15rem; }
.dside .ntitle { font-size: 1.15rem; color: #cfd8e6; }
.ov-preview { width: 100%; aspect-ratio: 16 / 9; flex: 0 0 auto; border-radius: .6rem; background: #000; border: 1px solid var(--line); }
.pv-over { position: absolute; display: none; z-index: 7; pointer-events: none; }
.pv-over.show { display: block; }
.live-badge { position: absolute; left: 1rem; top: 1rem; background: #e5383b; color: #fff; font-weight: 800; padding: .25rem .65rem; border-radius: .25rem; font-size: 1.05rem; letter-spacing: .05rem; }
.pv-over .plogo { position: absolute; right: 1rem; top: 1rem; }
.pv-over .logo { width: 6.5rem; height: 2.6rem; filter: drop-shadow(0 0 .3rem rgba(0,0,0,.8)); }
.ov-now { flex: 1; display: flex; flex-direction: column; padding: 1rem 1.4rem; min-height: 0; overflow: hidden; }
.nhead { color: #5fb0ff; font-size: 1.3rem; font-weight: 700; padding-bottom: .8rem; border-bottom: 1px solid var(--line); margin-bottom: .9rem; }
.nl1 { display: flex; align-items: center; gap: 1rem; font-size: 1.4rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.nl1 .sep { color: #45577a; }
.nl1 .ntl { overflow: hidden; text-overflow: ellipsis; }
.nl1 .hd { margin-left: auto; }
.nmid { display: flex; gap: 1rem; margin-top: .9rem; min-height: 0; }
.nthumb { width: 11rem; height: 6.2rem; flex: 0 0 auto; border-radius: .4rem; background: linear-gradient(135deg, #1b2c4f, #0b1426); display: flex; align-items: center; justify-content: center; }
.nthumb .logo { width: 70%; height: 60%; }
.ndesc { font-size: 1.1rem; color: #cfd8e6; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.nnext { margin-top: auto; border-top: 1px solid var(--line); padding-top: .7rem; font-size: 1.15rem; }
.nxrow { display: flex; gap: 1.6rem; margin-top: .3rem; }
.ov-legend, .legend { display: flex; align-items: center; gap: 2.4rem; padding: .9rem 2rem; border-top: 1px solid var(--line); font-size: 1.1rem; color: #d7deea; }
.ov-legend span, .legend span { display: flex; align-items: center; white-space: nowrap; }
.ov-legend .gap, .legend .gap { flex: 1; }
.key { font-style: normal; border: 1px solid #c9d3e2; border-radius: .3rem; padding: .1rem .45rem; font-size: .85rem; font-weight: 700; margin-right: .6rem; }
.ov-picker { position: absolute; left: 2.6rem; top: 6.5rem; width: 30rem; max-height: 72%; display: flex; flex-direction: column; background: #0f1828;
  border: 1px solid var(--line); border-radius: .6rem; padding: .8rem; z-index: 9; box-shadow: 0 1rem 3rem rgba(0,0,0,.7); }
.ov-picker h3 { font-size: 1.35rem; padding: .4rem .6rem .8rem; }

/* Options menu (hold OK) */
.menu-pop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30rem; max-height: 88vh; overflow-y: auto; z-index: 50;
  background: #0f1828; border: 1px solid var(--line); border-radius: .7rem; padding: 1rem; box-shadow: 0 1.2rem 4rem rgba(0,0,0,.75); }
.menu-pop h3 { font-size: 1.4rem; padding: .3rem .6rem .9rem; border-bottom: 1px solid var(--line); margin-bottom: .6rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item { height: 3.5rem; display: flex; align-items: center; padding: 0 1.1rem; border-radius: .5rem; font-size: 1.35rem; margin-bottom: .3rem; }
.menu-hint { font-size: 1rem; color: var(--muted); padding: .6rem .6rem 0; }
.infocol .next .t { color: var(--muted); margin-bottom: .3rem; }

/* 04 FULLSCREEN */
#view-player { background: #000; }
#video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; object-fit: contain; z-index: 0; }
.clock-badge { position: absolute; top: 2rem; right: 2rem; padding: .5rem .9rem; border-radius: .4rem; background: rgba(10,16,28,.85);
  font-size: 1.4rem; font-weight: 700; display: none; z-index: 2; }
.infobar { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; display: none; align-items: center; gap: 1.6rem;
  padding: 1.2rem 1.6rem; border-radius: .6rem; background: rgba(10,16,28,.9); border: 1px solid var(--line); z-index: 2; }
.osd-on .clock-badge { display: block; }
.osd-on .infobar { display: flex; }
.infobar .num { font-size: 1.6rem; color: #cfd8e6; }
.infobar .logo { width: 7rem; height: 3.2rem; }
.infobar .body { flex: 1; min-width: 0; }
.infobar .title { font-size: 1.6rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.infobar .l2 { display: flex; align-items: center; gap: 1.4rem; margin-top: .4rem; }
.infobar .time { font-size: 1.15rem; color: #cfd8e6; white-space: nowrap; }
.infobar .right { text-align: right; font-size: 1.15rem; min-width: 16rem; }
.infobar .live { font-weight: 800; letter-spacing: .06rem; margin-bottom: .5rem; }
.infobar .hint { font-size: 1rem; color: var(--muted); margin-top: .4rem; }
.player-msg { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); max-width: 50rem; text-align: center;
  background: rgba(10,16,28,.94); padding: 1.6rem 2rem; border-radius: .7rem; font-size: 1.4rem; display: none; z-index: 3; }
.player-msg.show { display: block; }

/* Movies / series (same visual language) */
h2.page-title { font-size: 2rem; margin-bottom: 1rem; }
.chips { display: flex; gap: .7rem; overflow-x: auto; padding: .4rem .2rem 1rem; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; height: 3rem; padding: 0 1.3rem; border-radius: .5rem; background: var(--panel2); display: flex; align-items: center; font-size: 1.2rem; white-space: nowrap; }
.chip.current { background: #24324d; box-shadow: inset 0 -.2rem 0 var(--blue); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1.2rem; padding: .3rem; }
.card { border-radius: .6rem; background: var(--panel2); overflow: hidden; }
.card .poster { width: 100%; aspect-ratio: 2 / 3; background: #1a2740 center/cover no-repeat; }
.card .name { padding: .6rem .7rem .8rem; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.details { display: flex; gap: 2rem; margin-bottom: 1.4rem; }
.details .poster { width: 15rem; aspect-ratio: 2 / 3; border-radius: .6rem; background: #1a2740 center/cover no-repeat; flex: 0 0 auto; }
.details h1 { font-size: 2.3rem; margin-bottom: .6rem; }
.details p { color: #cfd8e6; line-height: 1.45; max-width: 60rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 3.4rem; padding: 0 1.6rem; border-radius: .5rem;
  background: #24324d; color: #fff; font-weight: 700; font-size: 1.25rem; border: 0; margin-right: .8rem; }
.ep { display: flex; gap: 1rem; align-items: center; padding: .9rem 1.2rem; border-radius: .5rem; background: var(--panel2); margin-bottom: .5rem; }
.ep .num { width: 3.5rem; color: var(--muted); font-weight: 700; }
.ep .t { flex: 1; min-width: 0; }
.ep .t div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep .t .desc { color: var(--muted); font-size: 1.05rem; margin-top: .2rem; }

/* VOD on-screen display */
.vodbar { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; padding: 1.2rem 1.6rem; border-radius: .6rem; background: rgba(10,16,28,.9);
  border: 1px solid var(--line); display: none; z-index: 2; }
.osd-on .vodbar { display: block; }
.vodbar .title { font-size: 1.6rem; font-weight: 700; margin-bottom: .6rem; }
.vodbar .l2 { display: flex; gap: 1.4rem; align-items: center; font-size: 1.15rem; color: #cfd8e6; }

/* Settings */
.set-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: .5rem; background: var(--panel2); margin-bottom: .6rem; font-size: 1.3rem; }
.set-row .k { width: 18rem; color: var(--muted); }
.seg { display: flex; gap: .6rem; }
.seg .btn { margin: 0; }
.seg .btn.current { box-shadow: inset 0 0 0 .15rem var(--blue); }

/* Loader / toast / spinner */
#loader { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(7,12,22,.55); z-index: 100; }
#loader.show { display: flex; }
.spinner { width: 4rem; height: 4rem; border: .4rem solid rgba(255,255,255,.2); border-top-color: var(--blue); border-radius: 50%; animation: spin 1s linear infinite; }
#buffering { position: absolute; left: 50%; top: 50%; margin: -2rem 0 0 -2rem; display: none; z-index: 3; }
#buffering.show { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
#toast { position: fixed; left: 50%; bottom: 5rem; transform: translateX(-50%); background: rgba(10,16,28,.96); padding: 1rem 1.8rem;
  border-radius: .6rem; font-size: 1.3rem; opacity: 0; transition: opacity .3s; z-index: 200; border: 1px solid var(--line); }
#toast.show { opacity: 1; }