/* Dardania IPTV. Nuk përdor grid, gap ose inset, që të punojë edhe në TV më të vjetër. */
:root {
  --top: 12vh;
  --preview-left: 56.6vw;
  --preview-width: 42.4vw;
  --preview-height: 23.85vw;
  --bg: #0a2372;
  --panel: #1643ad;
  --panel-2: #1c50c6;
  --line: rgba(255,255,255,0.16);
  --text: #ffffff;
  --muted: #cfdcff;
  --red: #d8141c;
  --gold: #e3b94f;
  --ink: #0a0a0c;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: "LG Smart UI", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
main { outline: 0; }
svg { display: block; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; background: var(--panel-2); color: var(--text); font-weight: 600; }
.btn svg { width: 18px; height: 18px; margin-right: 8px; }
.btn.primary { border-color: var(--red); background: var(--red); color: #fff; }
.btn.subtle { min-height: 34px; padding: 0 10px; font-size: 13px; }
.btn.wide { display: flex; width: 100%; margin-top: 10px; }
.btn:focus, .btn:hover { outline: 0; border-color: var(--gold); background: var(--gold); color: var(--ink); }

.tone-sky { background: #1594d1; }
.tone-blue { background: #2c63e6; }
.tone-red { background: #c9363d; }
.tone-green { background: #4f9a3a; }
.tone-gold { background: #e8ad10; }
.tone-orange { background: #ed850d; }

/* Kreu */
.home { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); color: var(--text); }
.home-bar { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 20px; background: var(--panel); color: var(--muted); font-size: 13px; }
.home-bar strong { color: var(--text); font-size: 13px; }
.home-center { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; padding: 28px 18px 16px; text-align: center; }
.home-word { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.home-word img { width: 148px; height: 148px; margin-bottom: 14px; }
.home-word h1 { margin: 0; color: var(--text); font-size: 32px; font-weight: 800; }
.home-word h1 span { color: var(--gold); }
.home-center p { max-width: 460px; margin: 12px 0 22px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.home-time { display: flex; align-items: center; padding: 14px 24px; border-top: 1px solid var(--line); color: var(--muted); }
.home-time strong { margin-right: 18px; padding-right: 18px; border-right: 1px solid var(--line); color: var(--text); font-size: 38px; font-weight: 300; }
.home-time p { margin: 0 0 3px; font-size: 14px; }
.home-time span { font-size: 11px; }
.home-launcher { display: flex; align-items: flex-end; justify-content: space-around; padding: 10px 8px 16px; background: var(--panel); }
.home-tile { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; max-width: 170px; min-width: 0; margin: 0 4px; padding: 10px 2px; border: 0; border-radius: 14px; background: rgba(0,0,0,0); color: var(--text); font-size: 13px; }
.home-tile .circle { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 9px; border-radius: 50%; background: var(--panel-2); color: var(--text); }
.home-tile .circle svg { width: 25px; height: 25px; }
.home-tile.main .circle { background: var(--red); color: #fff; }
.home-tile:hover, .home-tile:focus { outline: 0; background: var(--gold); color: var(--ink); }

/* Kreu në TV: gjithçka me vh, që të duket njësoj në çdo rezolucion. */
.tv-home { position: fixed; top: 0; left: 0; display: flex; flex-direction: column; width: 100vw; height: 100vh; padding: 5vh 5vw 5.5vh; background: var(--bg); background: linear-gradient(135deg, #0a2372 0%, #0f329c 100%); color: var(--text); }
.tv-head { display: flex; flex: none; align-items: center; justify-content: space-between; }
.tv-brand { display: flex; align-items: center; font-size: 5vh; font-weight: 800; }
.tv-brand img { width: 15vh; height: 15vh; margin-right: 2.6vh; }
.tv-time { text-align: right; }
.tv-time strong { display: block; font-size: 8.6vh; font-weight: 300; line-height: 1; }
.tv-time span { display: block; margin-top: 1vh; color: var(--muted); font-size: 2.7vh; }
.tv-cards { display: flex; flex: 1 1 auto; min-height: 0; margin-top: 3.6vh; }
.tv-card { position: relative; display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-end; min-width: 0; margin-right: 2.2vh; padding: 2vh 3vh 3vh; overflow: hidden; border-radius: 2.2vh; background: #000; color: var(--text); transition: flex-grow .16s ease-out; }
.tv-card:last-child { margin-right: 0; }
.tv-card.main { flex-grow: 1.5; }
.tv-art { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-card:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.94)); }
.tv-card strong, .tv-card small { position: relative; z-index: 1; }
.tv-card strong { overflow: hidden; font-size: 5.2vh; font-weight: 800; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.tv-card small { margin-top: .8vh; color: #e4e3e8; font-size: 2.7vh; white-space: nowrap; }
.tv-card:focus { outline: 0; flex-grow: 1.35; }
.tv-card:focus:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; border: .9vh solid var(--gold); border-radius: 2.2vh; }
.tv-card:focus strong { color: var(--gold); }
.tv-card.main:focus { flex-grow: 1.85; }
.tv-foot { display: flex; flex: none; align-items: center; margin-top: 3.4vh; }
.tv-action { display: flex; flex: 0 1 auto; align-items: center; min-width: 0; max-width: 28vw; height: 7.4vh; margin-right: 1.8vh; padding: 0 3.4vh; border: 0; border-radius: 3.7vh; background: var(--panel); color: var(--text); font-size: 2.8vh; font-weight: 600; }
.tv-action svg { flex: none; width: 3.5vh; height: 3.5vh; margin-right: 1.4vh; }
.tv-action span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-action:focus { outline: 0; background: var(--gold); color: var(--ink); }
.tv-time .tv-status { margin-top: .5vh; font-size: 2.4vh; }
.tv-connect { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; min-height: 0; }
.tv-connect h2 { margin: 0; font-size: 5.4vh; font-weight: 800; }
.tv-connect strong { margin: 2.4vh 0 2vh; color: var(--gold); font-size: 17vh; font-weight: 800; line-height: 1; letter-spacing: .05em; }
.tv-connect p { max-width: 80vh; margin: 0; color: var(--muted); font-size: 3vh; line-height: 1.4; }

/* Në TV videoja del nga një shtresë nën faqe dhe faqja i hap një vrimë.
   Cepat e rrumbullakët me overflow e mbyllin vrimën dhe parapamja mbetet e zezë. */
html[data-platform="lg"] #player.embed, html[data-platform="samsung"] #player.embed { overflow: visible; border-radius: 0; }
/* Pjesët me madhësi në px rriten për ekranin 1920x1080 të TV-së. */
html[data-platform="lg"] dialog.sheet { zoom: 1.5; max-height: 61vh; }
html[data-platform="lg"] #toast { zoom: 1.5; }
html[data-platform="lg"] #player.full .player-layer { zoom: 1.5; }

/* Menuja */
body.guide-active { overflow: hidden; }
.guide { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; color: var(--text); background: var(--bg); background: linear-gradient(135deg, #0a2372 0%, #0f329c 100%); font-size: 2vh; line-height: 1.2; }
.guide a:focus, .guide button:focus { outline: 0; }
.guide-head { position: absolute; top: 0; left: 0; right: 0; height: var(--top); }
.brand { position: absolute; left: .9vw; top: 1.6vh; display: flex; align-items: center; height: 9vh; }
.brand img { width: 8.6vh; height: 8.6vh; margin-right: .9vw; }
.brand span { font-size: 3vh; font-weight: 700; white-space: nowrap; }
.brand b, .slot-brand b, .logo-brand b { font-weight: inherit; }
.title { position: absolute; left: 27.4vw; top: 1.6vh; display: flex; align-items: center; height: 9vh; }
.title img { flex: none; width: 8.6vh; height: 8.6vh; margin-right: .9vw; border-radius: 1.2vh; object-fit: cover; }
.title-text { display: block; min-width: 0; }
.title em { display: block; color: var(--muted); font-size: 2vh; font-style: normal; }
.title strong { display: block; max-width: 22vw; margin-top: .4vh; overflow: hidden; font-size: 3.4vh; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.clock { position: absolute; right: 1.6vw; top: 1.6vh; font-size: 5vh; font-weight: 300; line-height: 1; }
.version { position: absolute; right: 1.6vw; top: 7.2vh; max-width: 40vw; overflow: hidden; color: var(--muted); font-size: 1.9vh; white-space: nowrap; text-overflow: ellipsis; }
.rail { position: absolute; top: var(--top); bottom: 1vh; left: .7vw; width: 4.4vw; display: flex; flex-direction: column; align-items: center; }
.rail .rail-btn { display: flex; align-items: center; justify-content: center; width: 6.4vh; height: 6.4vh; margin-bottom: .9vh; padding: 0; border: 0; border-radius: 50%; color: #d9d8de; background: rgba(0,0,0,0); }
.rail-btn svg { width: 3.2vh; height: 3.2vh; }
.rail .rail-btn[aria-current="page"] { color: #fff; background: var(--red); }
.rail .rail-btn:hover, .rail .rail-btn:focus { color: var(--ink); background: var(--gold); }
.scroll { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { width: 0; height: 0; }
.cats { position: absolute; top: var(--top); bottom: 0; left: 5.6vw; width: 21.2vw; padding: .4vh .5vw 2vh; }
.cat { display: block; width: 100%; height: 7.6vh; margin: 0 0 .6vh; padding: 0 1vw; border: 0; border-radius: .8vh; text-align: left; color: var(--text); background: var(--panel); }
.cat-text { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.cat-text strong { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 3vh; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.cat-text small { flex: none; margin-left: .8vw; color: var(--muted); font-size: 2.4vh; }
.cat-symbol { flex: none; width: 2.8vh; height: 2.8vh; margin-left: .6vw; color: var(--red); }
.cat-symbol svg { width: 100%; height: 100%; }
.cat:hover { background: var(--panel-2); }
.cat.is-selected { background: var(--panel-2); box-shadow: inset .6vh 0 0 var(--gold); }
.cat:focus { color: var(--ink); background: var(--gold); box-shadow: none; }
.cat:focus small, .cat:focus .cat-symbol { color: var(--ink); }
.guide-live .main { position: absolute; top: var(--top); bottom: 0; left: 27vw; width: 29vw; padding: .4vh .4vw 2vh; }
.rowline { display: flex; align-items: stretch; width: 100%; height: 7.6vh; margin: 0 0 .6vh; }
.rowline .row { flex: 1 1 auto; width: auto; min-width: 0; height: 100%; margin: 0; }
.heart.row-fav { flex: 0 0 auto; width: 6vh; height: 100%; margin: 0 0 0 .4vw; padding: 1.9vh 1.4vh; border-radius: .8vh; color: var(--muted); background: var(--panel); }
.heart.row-fav.saved { color: var(--red); }
.heart.row-fav:focus, .heart.row-fav:hover { color: var(--ink); background: var(--gold); }
.row, .sep { display: flex; align-items: center; width: 100%; height: 7.6vh; margin: 0 0 .6vh; padding: 0 1vw 0 0; border: 0; border-radius: .8vh; text-align: left; color: var(--text); background: var(--panel); }
.sep { padding-left: 1vw; color: var(--gold); font-size: 2.4vh; font-weight: 700; background: rgba(0,0,0,0); }
.sep span { display: none; }
.row-no { flex: 0 0 4.8vw; width: 4.8vw; color: var(--muted); font-size: 2.6vh; font-weight: 600; text-align: center; }
.row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 3.1vh; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.row:hover { background: var(--panel-2); }
.row.is-playing { background: var(--panel-2); box-shadow: inset .6vh 0 0 var(--gold); }
.row:focus { color: var(--ink); background: var(--gold); box-shadow: none; }
.row:focus .row-no { color: var(--ink); }
.thumb, .now-thumb, .art { position: relative; display: block; overflow: hidden; }
.now-thumb { flex: 0 0 auto; width: 4.6vw; height: 7vh; margin-right: .6vw; border-radius: .6vh; background: #fff; }
.now-thumb.no-img { display: none; }
.now-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.art.no-img:after { content: attr(data-initials); position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.35); font-size: 7vh; font-weight: 800; }
.list-row .btn + .btn { margin-left: 6px; }
.preview { position: absolute; top: var(--top); bottom: 2vh; left: var(--preview-left); width: var(--preview-width); }
.slot { position: relative; height: var(--preview-height); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: .8vh; background: #071a58; text-align: center; }
.slot p { margin: 0; color: var(--muted); font-size: 2.2vh; }
.slot-brand { display: none; }
.logo-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.now { position: relative; display: none; align-items: center; min-height: 10vh; margin-top: 1.2vh; padding: 0 .2vw; }
.now.has-item { display: flex; }
.now-text { flex: 1 1 auto; min-width: 0; margin: 0 1vw 0 .4vw; }
.now-text strong, .now-text small, .now-text em { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.now-text strong { font-size: 3.2vh; }
.now-text small { margin-top: .4vh; color: var(--muted); font-size: 2vh; }
.now-text em { margin-top: .5vh; color: var(--gold); font-size: 1.8vh; font-style: normal; }
.now.is-failed .now-text em { display: none; }
.now-meta { flex: 0 0 auto; color: var(--muted); font-size: 1.8vh; text-align: right; }
.now-meta b { display: block; margin-bottom: .4vh; color: var(--text); font-size: 2.8vh; }
.now-meta span { display: block; margin-top: .2vh; }
.logo { position: absolute; top: calc(var(--preview-height) + 11.5vh); bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; }
body.radio-on .logo { visibility: hidden; }
.logo-brand img { width: 23vh; height: 23vh; margin-bottom: 1vh; }
.logo-brand span { color: var(--muted); font-size: 2.6vh; white-space: nowrap; }
.heart { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 4.6vh; height: 4.6vh; margin: 0; padding: .8vh; border: 0; border-radius: 50%; color: var(--text); background: rgba(0,0,0,0); }
.heart svg { width: 100%; height: 100%; }
.heart.saved { color: var(--red); }
.heart:hover, .heart:focus { color: var(--ink); background: var(--gold); }
.now-heart { margin-left: .2vw; }
.guide-posters .main { position: absolute; top: var(--top); bottom: 0; left: 27vw; right: 0; padding: .6vh .4vw 2vh .8vw; }
.grid { display: flex; flex-wrap: wrap; align-items: flex-start; }
.poster { position: relative; width: 13.4vw; height: 36vh; margin: 0 1.1vw 2vh 0; }
.poster-main { position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 1vh; color: var(--text); background: var(--panel); }
.art { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--panel); background: linear-gradient(160deg, #1c50c6 0%, #0a2372 100%); }
.art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.poster-title { position: absolute; left: 0; right: 0; bottom: 0; min-height: 7vh; padding: 3vh .7vw 1vh; color: var(--text); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.9)); font-size: 2vh; font-weight: 700; line-height: 1.2; text-align: left; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: .6vh; background: rgba(255,255,255,0.2); }
.progress span { display: block; height: 100%; background: var(--red); }
.poster .heart { position: absolute; top: .6vh; right: .5vw; background: rgba(0,0,0,0.5); }
.poster-main:hover, .poster-main:focus { box-shadow: 0 0 0 .55vh var(--gold); }
.poster-main:focus .poster-title { padding-top: 1vh; color: var(--ink); background: var(--gold); }
.more { display: block; width: 100%; height: 6vh; margin: .6vh 0 0; border: 0; border-radius: .8vh; color: var(--text); background: var(--panel); font-weight: 700; }
.more:focus { color: var(--ink); background: var(--gold); }
.none { margin: 3vh 1vw; color: var(--muted); font-size: 2.4vh; }
.empty { position: absolute; top: 16vh; left: 8vw; right: 3vw; display: flex; flex-direction: column; align-items: center; text-align: center; }
.empty img { width: 24vh; height: 24vh; }
.empty h2 { margin: 3vh 0 1vh; font-size: 3.6vh; }
.empty p { max-width: 720px; margin: 0 0 3vh; color: var(--muted); font-size: 2.2vh; line-height: 1.5; }

#num-entry { position: fixed; top: 1.4vh; right: 1.2vw; z-index: 9000; min-width: 32vh; max-width: 50vw; padding: 2vh 3vh; border: .3vh solid var(--gold); border-radius: 1.6vh; background: rgba(7,21,56,0.95); color: var(--text); text-align: right; }
#num-digits { display: block; color: var(--gold); font-size: 10vh; font-weight: 800; line-height: 1; }
#num-name { display: block; margin-top: 1vh; overflow: hidden; font-size: 2.8vh; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
#num-name:empty { display: none; }

/* Player */
#player { background: #000; color: #fff; }
#player.embed { position: fixed; top: var(--top); left: var(--preview-left); z-index: 40; width: var(--preview-width); height: var(--preview-height); overflow: hidden; border-radius: .6vh; }
#player.full { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 60; width: 100vw; height: 100vh; overflow: hidden; }
#stage { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; cursor: pointer; }
#stage video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background: #000; outline: 0; }
.software-player { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; overflow: hidden; background: #000; outline: 0; }
.software-player video, .software-player canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.player-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; text-align: center; }
#player-loading { pointer-events: none; color: var(--text); background: rgba(0,0,0,0.25); font-size: 15px; }
.spinner { width: 34px; height: 34px; margin-bottom: 10px; border: 3px solid rgba(255,255,255,0.27); border-top-color: #fff; border-radius: 50%; -webkit-animation: spin .9s linear infinite; animation: spin .9s linear infinite; }
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
#player-error { background: rgba(7,21,56,0.96); }
#radio-art { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: none; align-items: center; justify-content: center; background: var(--bg); }
#radio-art img { height: 76%; }
#player.is-radio #radio-art { display: flex; }
#player-error h3 { margin: 0 0 8px; font-size: 20px; }
#player-error p { max-width: 640px; margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.4; }
#player-error small { display: block; margin-bottom: 12px; color: var(--muted); font-size: 11px; }
#player-blocked { background: rgba(0,0,0,0.67); }
#player.embed #player-error { padding: 1vh 1vw; }
#player.embed #player-error h3 { margin: 0 0 .6vh; font-size: 2.2vh; }
#player.embed #player-error p { margin: 0 0 1vh; font-size: 1.5vh; line-height: 1.3; }
#player.embed .btn { min-height: 0; height: 4.5vh; font-size: 1.6vh; }
#player.embed #player-loading { font-size: 2vh; }

/* Dritaret */
dialog.sheet { width: calc(100vw - 24px); max-width: 560px; max-height: 92vh; padding: 0; overflow-y: auto; border: 0; border-radius: 16px; color: var(--text); background: var(--panel); }
dialog.sheet::backdrop { background: rgba(4,16,71,0.75); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; }
.sheet-head h2 { margin: 0; font-size: 19px; }
.sheet-close { width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--panel-2); color: var(--text); font-size: 24px; line-height: 1; }
.sheet-close:focus { outline: 0; color: var(--ink); background: var(--gold); }
.tab:focus, .field input:focus, .field textarea:focus, .field select:focus { outline: 0; box-shadow: 0 0 0 3px var(--gold); }
.tabs { display: flex; margin: 0 18px 12px; padding: 3px; border-radius: 10px; background: var(--panel-2); }
.tab { flex: 1 1 0; min-height: 36px; border: 0; border-radius: 8px; color: var(--muted); background: rgba(0,0,0,0); font-weight: 600; }
.tab.active { color: #fff; background: var(--red); }
#import-form, #settings-body, #paywall-body { padding: 0 18px 18px; }
.field { display: block; margin-bottom: 12px; }
.field span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 13px; font-weight: 600; }
.field input, .field textarea, .field select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid rgba(255,255,255,0.35); border-radius: 9px; color: var(--text); background: #0a2372; }
.form-error { margin: 0 0 10px; padding: 9px 11px; border-radius: 9px; color: #fff; background: #a50b12; }
.sheet-note { margin: 11px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.block { padding: 14px 0; border-top: 1px solid var(--line); }
.block:first-child { border-top: 0; padding-top: 2px; }
.block h3 { margin: 0 0 8px; font-size: 15px; }
.block p { margin: 0 0 8px; color: var(--muted); line-height: 1.45; }
.block.two { display: flex; flex-wrap: wrap; }
.block.two .field { flex: 1 1 200px; margin: 0 6px 6px 0; }
.device-state strong { color: var(--text); }
.pair { margin: 10px 0 0; padding: 14px; border-radius: 12px; text-align: center; background: var(--panel-2); }
.pair small { display: block; color: var(--muted); }
.pair strong { display: block; margin: 5px 0; color: var(--gold); font-size: 26px; letter-spacing: .12em; word-break: break-all; }
.list-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.list-row strong { display: block; }
.list-row small { color: var(--muted); }

#toast { position: fixed; left: 50%; bottom: 24px; z-index: 9999; max-width: 90vw; padding: 11px 18px; border-radius: 11px; color: #fff; background: var(--panel-2); box-shadow: 0 8px 26px rgba(0,0,0,0.47); font-weight: 600; text-align: center; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

/* Telefoni dhe ekranet e vogla */
body.phone #toast { bottom: 76px; }
body.phone .guide { position: static; display: flex; flex-direction: column; width: 100%; height: auto; min-height: 100vh; padding-bottom: 66px; font-size: 14px; }
body.phone.guide-active { overflow: auto; }
body.phone .guide-head { position: relative; display: flex; align-items: center; height: auto; min-height: 54px; padding: 8px 12px; }
body.phone .clock, body.phone .version { display: none; }
body.phone .title { top: auto; display: block; height: auto; }
body.phone .title img { display: none; }
body.phone .title em { font-size: 11px; }
body.phone .brand { position: static; height: auto; flex: 0 0 auto; }
body.phone .brand img { width: 30px; height: 30px; margin-right: 8px; }
body.phone .brand span { font-size: 19px; }
body.phone .title { position: static; flex: 1 1 auto; min-width: 0; margin-left: 12px; text-align: right; }
body.phone .title strong { max-width: none; margin-top: 3px; font-size: 13px; }
body.phone .rail { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 35; flex-direction: row; justify-content: space-around; width: 100%; padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); background: var(--panel); }
body.phone .rail .rail-btn { width: 40px; height: 40px; margin: 0; }
body.phone .rail-btn svg { width: 21px; height: 21px; }
body.phone .cats { position: static; display: flex; flex: 0 0 auto; width: 100%; padding: 2px 10px 10px; overflow-x: auto; overflow-y: hidden; }
body.phone .cat { flex: 0 0 auto; width: auto; max-width: 62vw; height: 42px; margin: 0 8px 0 0; padding: 0 12px; background: var(--panel); }
body.phone .cat-text strong { font-size: 13px; }
body.phone .cat-text small { font-size: 12px; }
body.phone .cat-symbol { display: none; }
body.phone .main { position: static !important; width: 100% !important; padding: 0 10px 10px; overflow: visible; }
body.phone .rowline { height: 50px; margin-bottom: 2px; }
body.phone .rowline .row { height: 100%; margin: 0; padding: 0 10px 0 0; border-radius: 9px; }
body.phone .heart.row-fav { width: 46px; height: 100%; margin-left: 4px; padding: 14px 12px; border-radius: 9px; }
body.phone .sep { height: 50px; margin-bottom: 2px; padding: 0 10px 0 0; border-radius: 9px; }
body.phone .sep { padding-left: 12px; font-size: 13px; }
body.phone .sep span { margin-right: 8px; }
body.phone .row-name { font-size: 14px; }
body.phone .row-no { flex: 0 0 46px; width: 46px; font-size: 13px; }
body.phone .preview { position: static; order: -1; width: 100%; }
body.phone .slot, body.phone .logo { display: none; }
body.phone .now { height: 62px; margin: 0; padding: 0 10px; border-bottom-width: 3px; border-radius: 0; }
body.phone .now-thumb { width: 54px; height: 42px; border-radius: 6px; font-size: 13px; }
body.phone .now-text { margin: 0 8px 0 4px; }
body.phone .now-text strong { font-size: 15px; }
body.phone .now-text small { margin-top: 2px; font-size: 11px; }
body.phone .now-text em { margin-top: 2px; font-size: 10px; }
body.phone .now-meta { font-size: 10px; }
body.phone .now-meta b { font-size: 13px; }
body.phone .heart { width: 34px; height: 34px; padding: 7px; }
body.phone.player-embed .guide { padding-top: 56.25vw; }
body.phone #player.embed { top: 0; left: 0; width: 100vw; height: 56.25vw; border-radius: 0; }
body.phone #player.embed #player-error h3 { font-size: 16px; margin-bottom: 5px; }
body.phone #player.embed #player-error p { font-size: 12px; margin-bottom: 7px; }
body.phone #player.embed .btn { height: 34px; font-size: 13px; }
body.phone #player.embed #player-loading { font-size: 14px; }
body.phone .grid { justify-content: space-between; }
body.phone .poster { width: calc(50% - 5px); height: 62vw; margin: 0 0 10px; }
body.phone .poster-main { border-width: 1px; border-radius: 9px; }
body.phone .art.no-img:after { font-size: 30px; }
body.phone .poster-title { min-height: 42px; padding: 6px; font-size: 12px; }
body.phone .poster .heart { top: 5px; right: 5px; }
body.phone .more { height: 46px; margin-top: 2px; border-radius: 9px; }
body.phone .none { margin: 24px 10px; font-size: 15px; }
body.phone .empty { position: static; padding: 30px 18px; }
body.phone .empty img { width: 72px; height: 72px; }
body.phone .empty h2 { margin: 18px 0 8px; font-size: 21px; }
body.phone .empty p { margin-bottom: 18px; font-size: 14px; }
@media (max-width: 520px) {
  .home-word img { width: 110px; height: 110px; margin-bottom: 10px; }
  .home-word h1 { font-size: 27px; }
  .home-center p { font-size: 14px; }
  .home-tile { margin: 0 1px; padding: 8px 0; font-size: 11px; }
  .home-tile .circle { width: 38px; height: 38px; }
  .home-tile .circle svg { width: 21px; height: 21px; }
  .home-bar { padding: 0 12px; font-size: 11px; }
}

/* Aplikacioni Android: videoja del nga VLC, nën faqe, prandaj faqja lihet e tejdukshme. Ngjyra blu vjen nga aplikacioni. */
html.native-video, html.native-video body, html.native-video .home, html.native-video .tv-home, html.native-video .guide { background: transparent; }
html.native-video #player, html.native-video #stage { background: transparent; }
html.native-video #stage video { display: none; }
html.native-video body.player-full #content { visibility: hidden; }
html.native-video body.player-embed .slot { visibility: hidden; }

/* Zgjedhja e listës: secila listë veç. */
#lists-body { padding: 4px 18px 18px; }
.list-choice { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; margin: 0 0 8px; padding: 10px 14px; border: 0; border-radius: 10px; color: var(--text); background: var(--panel-2); text-align: left; font-size: 17px; }
.list-choice small { margin-left: 12px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.list-choice.is-current { box-shadow: inset 5px 0 0 var(--gold); }
.list-choice:focus { outline: 0; color: var(--ink); background: var(--gold); box-shadow: none; }
.list-choice:focus small { color: var(--ink); }
.cat.list-switch { background: #071a58; box-shadow: inset 0 0 0 2px var(--gold); }
.cat.list-switch .cat-text strong { color: var(--gold); }
.cat.list-switch:focus { background: var(--gold); }
.cat.list-switch:focus .cat-text strong { color: var(--ink); }

/* Lista e gjatë vizatohet me pjesë: shfletuesi nuk duhet ta lëvizë vetë kur shtohen rreshtat. */
.main.scroll { overflow-anchor: none; }
.vlist { display: block; width: 100%; }

/* Menyja në ekran të plotë: butonat e rrumbullakët majtas dhe shiriti poshtë. */
#player-side, #player-bottom { position: absolute; z-index: 3; opacity: 0; pointer-events: none; transition: opacity .15s; }
#player.full.chrome #player-side, #player.full.chrome #player-bottom { opacity: 1; pointer-events: auto; }
#player.embed #player-side, #player.embed #player-bottom, #player.embed #player-diagnostics { display: none; }
#player-side { top: 50%; left: 2.4vw; display: flex; flex-direction: column; margin-top: -9vmin; }
.round { position: relative; width: 7.4vmin; height: 7.4vmin; margin: 0 0 1.4vmin; padding: 1.7vmin; border: .35vmin solid rgba(255,255,255,0.9); border-radius: 50%; color: #0a2372; background: rgba(226,236,255,0.94); }
.round svg { display: block; width: 100%; height: 100%; }
#player-favorite { color: var(--ink); background: var(--gold); }
#player-favorite.saved { color: var(--red); }
.round:focus, .round:hover { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 .5vmin var(--gold); }
.round:focus::after, .round:hover::after { content: attr(data-label); position: absolute; top: 50%; left: 100%; margin: -2.3vmin 0 0 1.4vmin; padding: .7vmin 1.3vmin; border-radius: .8vmin; color: #fff; background: rgba(0,0,0,0.8); font-size: 2.3vmin; font-weight: 700; line-height: 3.2vmin; white-space: nowrap; }
#player-bottom { left: 2.4vw; right: 2.4vw; bottom: 3.4vh; display: flex; align-items: center; padding: 1.2vmin 1.8vw 1.2vmin 1.2vmin; border-radius: 1vmin; color: #fff; background: rgba(7,12,30,0.85); }
#player-thumb { flex: 0 0 auto; width: 13vmin; height: 8.4vmin; margin-right: 1.4vw; overflow: hidden; border-radius: .6vmin; background: var(--panel); }
#player-thumb .now-thumb { display: block; width: 100%; height: 100%; }
#player-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
#player-info { flex: 1 1 auto; min-width: 0; }
#player-info h2 { display: flex; align-items: center; margin: 0 0 .5vmin; overflow: hidden; font-size: 3vmin; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
#player-mark { flex: 0 0 auto; width: 2.7vmin; height: 2.7vmin; margin-right: .8vmin; }
#player-mark svg { display: block; width: 100%; height: 100%; }
#player-title { overflow: hidden; text-overflow: ellipsis; }
#player-group { display: block; overflow: hidden; color: var(--muted); font-size: 2.2vmin; white-space: nowrap; text-overflow: ellipsis; }
#player-movie { flex: 0 0 auto; display: flex; align-items: center; margin: 0 1.2vw; }
#player-movie[hidden] { display: none; }
#player-movie .btn { margin: 0 .3vw; border-color: rgba(255,255,255,0.4); color: #fff; background: rgba(0,0,0,0.6); }
#player-movie .btn:focus { border-color: var(--gold); color: var(--ink); background: var(--gold); }
#seek-time { margin: 0 .6vw; color: #fff; font-size: 2.3vmin; font-weight: 600; white-space: nowrap; }
#player-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; margin-left: 1.6vw; color: #fff; font-size: 1.9vmin; line-height: 1.35; text-transform: uppercase; }
#player-no { font-size: 2.7vmin; }