/* TV PRO - TV Style (Tizen / WebOS / Browser) - optimizuar për 1920x1080 */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; }
body {
  background:#0b1020; color:#fff;
  font-family:'Segoe UI', Arial, sans-serif;
  font-size:22px; user-select:none; -webkit-user-select:none;
}
.screen { position:fixed; inset:0; display:none; flex-direction:column; }
.screen.active { display:flex; }

/* ---------- Splash ---------- */
#screen-splash { align-items:center; justify-content:center; background:radial-gradient(circle at 50% 30%, #1c2a52, #0b1020 70%); }
.logo-big { font-size:90px; font-weight:800; letter-spacing:2px; }
.logo-big span { color:#f5b301; }
.splash-sub { font-size:28px; color:#9fb2d8; margin-top:10px; }
.loader { margin-top:40px; width:320px; height:10px; background:#222c4a; border-radius:6px; overflow:hidden; }
.loader div { height:100%; width:30%; background:#f5b301; border-radius:6px; animation:load 1.2s infinite ease-in-out; }
@keyframes load { 0%{margin-left:-30%} 100%{margin-left:100%} }
.splash-ver { position:absolute; bottom:30px; color:#5c6c94; font-size:20px; }

/* ---------- Auth ---------- */
#screen-auth { flex-direction:row; }
.auth-left { flex:1; display:flex; flex-direction:column; justify-content:center; padding:0 80px; background:linear-gradient(135deg,#131c3a,#0b1020); }
.auth-left h1 { font-size:72px; } .auth-left h1 span{color:#f5b301;}
.auth-left p { color:#9fb2d8; font-size:26px; margin:18px 0; line-height:1.5; }
.auth-feats { margin-top:20px; color:#cdd8f3; font-size:24px; line-height:2; }
.auth-right { width:640px; background:#101736; display:flex; flex-direction:column; justify-content:center; padding:60px; }
.tabs { display:flex; gap:16px; margin-bottom:30px; }
.tab { padding:14px 34px; border-radius:12px; background:#1a2347; color:#9fb2d8; font-size:24px; }
.tab.selected { background:#f5b301; color:#111; font-weight:700; }
.field label { display:block; color:#9fb2d8; font-size:20px; margin:16px 0 8px; }
.field input { width:100%; padding:18px 20px; font-size:24px; border-radius:12px; border:2px solid #2a3563; background:#0c1230; color:#fff; outline:none; }
.auth-msg { min-height:34px; margin-top:14px; font-size:21px; color:#ff8080; }
.auth-hint { margin-top:10px; color:#5c6c94; font-size:19px; line-height:1.6; }
.devline { margin-top:18px; color:#5c6c94; font-size:19px; }
.devline b { color:#9fb2d8; }

/* ---------- Buttons / focus ---------- */
.btn { display:inline-block; padding:18px 40px; font-size:24px; font-weight:700; border-radius:14px; border:none; background:#1a2347; color:#fff; margin-top:18px; margin-right:14px; }
.btn.primary { background:#f5b301; color:#111; }
.btn.danger { background:#a02323; }
.focusable { outline:none; border:3px solid transparent; }
.focusable.focused { border-color:#f5b301 !important; box-shadow:0 0 0 3px #f5b301, 0 0 25px rgba(245,179,1,.5); transform:scale(1.03); z-index:5; }
input.focusable.focused { background:#131b3f; }

/* ---------- Topbar + layout ---------- */
.topbar { height:96px; display:flex; align-items:center; padding:0 36px; background:#0e1430; border-bottom:1px solid #1e2750; gap:24px; }
.topbar .logo { font-size:36px; font-weight:800; } .topbar .logo span{color:#f5b301;}
.topbar .spacer { flex:1; }
.pill { background:#1a2347; padding:10px 22px; border-radius:30px; font-size:20px; color:#cdd8f3; }
.pill.gold { background:#f5b301; color:#111; font-weight:700; }
.pill.red { background:#a02323; color:#fff; font-weight:700; }
.main-body { flex:1; display:flex; min-height:0; }
.content { flex:1; padding:28px 36px; overflow:hidden; display:flex; flex-direction:column; }
.content h2 { font-size:34px; margin-bottom:6px; }
.content .sub { color:#9fb2d8; font-size:21px; margin-bottom:18px; }

/* categories */
.cat-row { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.cat { padding:12px 26px; border-radius:30px; background:#1a2347; font-size:21px; color:#cdd8f3; white-space:nowrap; }
.cat.selected { background:#f5b301; color:#111; font-weight:700; }

/* grids */
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; overflow-y:auto; padding:10px 4px 40px; }
.grid.live-grid { grid-template-columns:repeat(3, 1fr); }
.card { background:#141c3d; border-radius:18px; padding:22px; min-height:150px; display:flex; gap:18px; align-items:center; }
.card .logo-ch { font-size:64px; width:90px; text-align:center; }
.card .nm { font-size:25px; font-weight:700; }
.card .ct { color:#9fb2d8; font-size:20px; margin-top:6px; }
.card .now { color:#7ee2a8; font-size:19px; margin-top:8px; }
.card .fav-star { color:#f5b301; font-size:24px; }
.card.poster-card { flex-direction:column; align-items:stretch; padding:0; overflow:hidden; min-height:380px; }
.poster { height:260px; background:linear-gradient(135deg,#2a3a6e,#141c3d); display:flex; align-items:center; justify-content:center; font-size:80px; background-size:cover; background-position:center; }
.poster-card .info { padding:16px 18px; }
.poster-card .t { font-size:24px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.poster-card .m { color:#9fb2d8; font-size:19px; margin-top:6px; }

/* EPG */
.epg-layout { display:flex; gap:26px; flex:1; min-height:0; }
.epg-channels { width:380px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding-right:6px; }
.epg-ch { padding:16px 20px; background:#141c3d; border-radius:12px; font-size:23px; }
.epg-ch.selected { background:#1f2a55; }
.epg-programs { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.epg-p { padding:16px 22px; background:#141c3d; border-radius:12px; font-size:22px; display:flex; gap:18px; align-items:center; }
.epg-p .time { color:#f5b301; font-weight:700; min-width:150px; }
.epg-p.live-now { background:#1d3a2a; }
.epg-p .live-tag { background:#e33; color:#fff; font-size:17px; padding:4px 14px; border-radius:20px; font-weight:700; }

/* details modal */
#modal { position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:50; }
#modal.active { display:flex; }
.modal-box { width:1100px; max-height:86vh; overflow-y:auto; background:#101736; border-radius:24px; padding:44px; display:flex; gap:34px; }
.modal-poster { width:320px; min-height:420px; border-radius:18px; background:linear-gradient(135deg,#2a3a6e,#141c3d); display:flex; align-items:center; justify-content:center; font-size:120px; background-size:cover; background-position:center; }
.modal-info { flex:1; }
.modal-info h2 { font-size:44px; }
.modal-info .meta { color:#f5b301; font-size:22px; margin:12px 0; }
.modal-info .desc { color:#cdd8f3; font-size:22px; line-height:1.6; margin-bottom:10px; }
.season-row { margin-top:16px; }
.season-row h4 { font-size:24px; margin-bottom:10px; color:#9fb2d8; }
.ep { padding:14px 20px; background:#1a2347; border-radius:12px; margin-bottom:10px; font-size:22px; }

/* player */
#screen-player { background:#000; }
#video { flex:1; width:100%; background:#000; }
.osd { position:absolute; left:0; right:0; bottom:0; padding:30px 50px 40px; background:linear-gradient(transparent, rgba(0,0,0,.9)); display:none; }
.osd.active { display:block; }
.osd .t { font-size:34px; font-weight:700; }
.osd .s { color:#9fb2d8; font-size:22px; margin-top:6px; }
.osd .bar { height:8px; background:#333; border-radius:5px; margin-top:18px; }
.osd .bar div { height:100%; background:#f5b301; border-radius:5px; width:0%; }
.osd .keys { color:#5c6c94; font-size:19px; margin-top:14px; }
.player-loading { position:absolute; top:40%; width:100%; text-align:center; font-size:30px; color:#9fb2d8; }

/* license screen */
#screen-license { align-items:center; justify-content:center; text-align:center; }
#screen-license h1 { font-size:56px; color:#ff8080; }
#screen-license p { color:#cdd8f3; font-size:25px; margin:18px 0; line-height:1.7; }

/* settings */
.set-row { display:flex; gap:20px; align-items:center; background:#141c3d; border-radius:14px; padding:18px 24px; margin-bottom:14px; max-width:1100px; }
.set-row label { width:340px; color:#9fb2d8; font-size:22px; }
.set-row input { flex:1; padding:16px 18px; font-size:22px; border-radius:10px; border:2px solid #2a3563; background:#0c1230; color:#fff; outline:none; }
.set-row .val { flex:1; font-size:22px; }
.scroll { overflow-y:auto; flex:1; padding-bottom:40px; }

/* pin modal */
#pin-box { text-align:center; }
#pin-dots { font-size:60px; letter-spacing:20px; margin:20px 0; color:#f5b301; min-height:80px; }
.toast { position:fixed; top:40px; left:50%; transform:translateX(-50%); background:#1a2347; border:2px solid #f5b301; padding:18px 40px; border-radius:14px; font-size:23px; display:none; z-index:99; }
.toast.active { display:block; }
::-webkit-scrollbar { width:12px; } ::-webkit-scrollbar-thumb { background:#2a3563; border-radius:6px; }

/* ===== v4: MAC + udhezime majtas, kategorite djathtas ===== */
.leftpanel { width:460px; flex-shrink:0; background:#0e1430; padding:26px 22px; display:flex; flex-direction:column; gap:20px; border-right:1px solid #1e2750; overflow-y:auto; }
.mac-box { background:#141c3d; border-radius:16px; padding:20px 22px; }
.mac-label { color:#9fb2d8; font-size:20px; }
.mac-val { color:#f5b301; font-size:32px; font-weight:800; letter-spacing:1px; margin-top:6px; word-break:break-all; }
.mac-plan { color:#7ee2a8; font-size:19px; margin-top:6px; }
.guide { background:#141c3d; border-radius:16px; padding:16px 22px; }
.guide-title { font-size:22px; font-weight:700; margin-bottom:10px; }
.guide-row { display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid #1e2750; font-size:21px; }
.guide-row span:first-child { color:#f5b301; font-weight:700; }
.guide-row span:last-child { color:#cdd8f3; }
.minimenu { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mini-item { padding:16px 10px; font-size:22px; text-align:center; border-radius:12px; background:#1a2347; color:#cdd8f3; }
.mini-item.selected { background:#2a3768; color:#fff; }
.mini-item.focused { background:#f5b301; color:#111; font-weight:700; }
.rightpanel { flex:1; padding:26px 34px; overflow:hidden; display:flex; flex-direction:column; min-width:0; }
.rightpanel h2 { font-size:32px; margin-bottom:4px; }
.rightpanel .sub { color:#9fb2d8; font-size:20px; margin-bottom:16px; }
.rows { display:flex; flex-direction:column; gap:12px; overflow-y:auto; padding:6px 4px 40px; }
.row-item { display:flex; align-items:center; gap:18px; background:#141c3d; border-radius:14px; padding:18px 24px; font-size:25px; }
.row-item .logo-ch { font-size:52px; width:76px; text-align:center; flex-shrink:0; }
.row-item .grow { flex:1; min-width:0; }
.row-item .nm { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-item .ct { color:#9fb2d8; font-size:20px; margin-top:4px; }
.row-item .now { color:#7ee2a8; font-size:19px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.count-badge { background:#f5b301; color:#111; font-weight:800; font-size:20px; padding:6px 20px; border-radius:24px; flex-shrink:0; }
.back-row { background:#1a2347; color:#f5b301; font-weight:700; }
.grid { grid-template-columns:repeat(3, 1fr); }