*{box-sizing:border-box}body{margin:0;background:#0f1728;color:#eef3ff;font:16px system-ui,sans-serif}main{max-width:1120px;margin:auto;padding:24px}header{border-bottom:1px solid #34425b;margin-bottom:22px}h1{font-size:32px}h1 small{color:#90caff;font-size:18px}p,footer{color:#c3cde0}section{max-width:460px;background:#1c2941;padding:20px;border-radius:12px}label{display:block;margin:12px 0}input{display:block;width:100%;padding:12px;margin-top:6px;border:1px solid #667793;border-radius:6px;background:#101a2c;color:white}button{background:#77bfff;color:#081729;border:0;padding:12px 18px;border-radius:7px;font-weight:700;cursor:pointer}#message{margin:18px 0;color:#ffe1a5}.shelf{margin:24px 0}.shelf h2{font-size:21px}.posters{display:flex;gap:14px;overflow-x:auto;padding:8px 0 18px}.poster{width:135px;flex:none}.poster img{display:block;width:135px;height:190px;object-fit:cover;background:#28354c;border-radius:7px}.poster span{display:block;margin-top:8px;font-size:13px;overflow-wrap:anywhere}footer{margin-top:36px;font-size:13px}
/* ZunnerTV-style live categories and 6-hour EPG */
#live-panel{max-width:none;padding:18px;background:#14243a}
#player{max-width:850px}
.live-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#guide-status{color:#ffe282;font-size:14px}
.search-label{max-width:480px}
.category-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.category-btn{background:#194373;color:#f5f8ff;text-align:left;border:1px solid #376a9d}
.category-btn:hover,.category-btn:focus-visible{background:#2564a5}
.guide-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.guide-actions strong{flex:1;min-width:170px;color:#ffdf87}
.guide-tip{font-size:13px}
.guide-viewport{overflow:auto;max-height:65vh;border:1px solid #335577;background:#0c1b30;overscroll-behavior:contain}
.guide-grid{width:calc(var(--channel-width) + var(--timeline-width));min-width:100%}
.guide-row{display:flex;width:100%;min-height:58px;border-bottom:1px solid #274363}
.guide-header{position:sticky;top:0;z-index:4;min-height:44px}
.guide-channel{width:var(--channel-width);min-width:var(--channel-width);display:flex;align-items:center;gap:4px;padding:4px;background:#123354;border-right:2px solid #4c7298;position:sticky;left:0;z-index:2}
.guide-corner{z-index:5;background:#184373;color:#ffdf87;font-weight:700;padding:12px}
.guide-times,.guide-programs{display:flex;width:var(--timeline-width);min-width:var(--timeline-width)}
.guide-time{width:175px;min-width:175px;padding:12px 8px;background:#1e3958;color:#ffdf87;border-right:1px solid #4a6380;font-size:13px}
.channel-name{background:transparent;color:#f4f8ff;flex:1;min-width:0;text-align:left;padding:7px 3px;overflow-wrap:anywhere;font-size:13px}
.favorite-btn{background:transparent;color:#ffdf87;padding:6px;font-size:22px}
.program{flex:none;background:#213e5c;color:#f4f8ff;border-radius:0;border-right:2px solid #112a45;border-bottom:1px solid #152a40;text-align:left;padding:8px 10px;font-size:13px;white-space:normal;overflow:hidden}
.program.empty{color:#9baec2;background:#152b43}
.program.on-now{background:#2b6088;box-shadow:inset 0 0 0 2px #ffd37a}
.program:hover,.program:focus-visible{background:#3479ac}
#tabs{display:flex;gap:8px;margin:15px 0}
@media(max-width:600px){main{padding:10px}#live-panel{padding:10px}.guide-viewport{max-height:65vh}.guide-actions button{padding:9px 11px}.category-list{grid-template-columns:repeat(2,minmax(0,1fr))}.category-btn{font-size:13px;padding:12px 7px}}

/* StreamNest 1.6 — full-width Firestick-style scrolling home shelves */
#catalog{width:100%;min-width:0}
#catalog .shelf{max-width:none;width:100%;min-width:0;padding:20px 22px;overflow:hidden}
#catalog .shelf-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
#catalog .shelf-heading h2{margin:0}
#catalog .shelf-controls{display:flex;gap:8px;flex-shrink:0}
#catalog .shelf-arrow{min-width:40px;min-height:40px;padding:4px 12px;font-size:29px;line-height:1}
#catalog .shelf-arrow:disabled{opacity:.28;cursor:default}
#catalog .posters{width:100%;max-width:100%;display:flex;flex-wrap:nowrap;gap:15px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x proximity;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;padding:8px 2px 18px;scrollbar-width:thin}
#catalog .poster{flex:0 0 145px;width:145px;scroll-snap-align:start;cursor:pointer}
#catalog .poster img{width:145px;height:205px}
#catalog .poster:focus-visible{outline:3px solid #ffd37a;outline-offset:4px}
@media(max-width:600px){
 #catalog .shelf{padding:14px 12px}
 #catalog .poster{flex-basis:120px;width:120px}
 #catalog .poster img{width:120px;height:170px}
 #catalog .shelf-arrow{min-width:36px;min-height:36px;padding:2px 10px}
}


/* StreamNest 1.7: phone-only compact EPG. Desktop rules above remain unchanged.
   The timeline and channel widths are also matched in app.js at the same breakpoint. */
@media (max-width: 600px) {
  #live-panel .guide-tip { display: none; }
  #live-panel .guide-viewport { max-height: 68dvh; }
  #live-panel .guide-row { min-height: 44px; }
  #live-panel .guide-header { min-height: 32px; }
  #live-panel .guide-channel {
    width: 126px;
    min-width: 126px;
    padding: 2px 3px;
    gap: 1px;
    border-right-width: 1px;
  }
  #live-panel .guide-corner {
    padding: 7px 4px;
    font-size: 11px;
    letter-spacing: 0;
  }
  #live-panel .guide-time {
    width: 112px;
    min-width: 112px;
    padding: 7px 4px;
    font-size: 11px;
  }
  #live-panel .channel-name {
    font-size: 11px;
    line-height: 1.18;
    padding: 4px 1px;
    overflow-wrap: anywhere;
  }
  #live-panel .favorite-btn {
    font-size: 17px;
    line-height: 1;
    padding: 4px 1px;
    min-width: 24px;
  }
  #live-panel .program {
    font-size: 11px;
    line-height: 1.2;
    padding: 5px 5px;
    border-right-width: 1px;
    overflow-wrap: anywhere;
  }
  #live-panel .program.empty {
    font-size: 10px;
    color: #a4b4c7;
  }
  #live-panel .guide-actions { gap: 5px; }
  #live-panel .guide-actions button { padding: 7px 8px; font-size: 12px; }
  #live-panel .guide-actions strong { font-size: 12px; }
  #live-panel .guide-viewport { margin-top: 6px; }
}


/* StreamNest 1.8 — further phone-only guide refinements */
@media (max-width: 600px) {
  #live-panel .guide-channel {
    width: 108px;
    min-width: 108px;
    padding: 2px 2px;
  }
  #live-panel .guide-corner { font-size: 10px; padding: 6px 2px; }
  #live-panel .channel-name { font-size: 10px; line-height: 1.2; }
  #live-panel .favorite-btn { font-size: 16px; min-width: 20px; padding: 3px 0; }
  #live-panel .guide-time { width: 128px; min-width: 128px; font-size: 11px; }
  #live-panel .program { font-size: 11px; line-height: 1.25; padding: 5px 6px; }
  #live-panel .program.empty { color: transparent; }
  #live-panel .guide-tip { display: none !important; }
}

/* StreamNest 1.9 — phone-only EPG readability.
   No desktop/Mac styles or playback logic changed. */
@media screen and (max-width: 600px) {
  #live-panel .guide-channel {
    width: 96px;
    min-width: 96px;
    padding: 2px 2px;
    gap: 1px;
  }
  #live-panel .guide-corner {
    font-size: 10px;
    padding: 5px 3px;
  }
  #live-panel .channel-name {
    font-size: 10px;
    line-height: 1.18;
    padding: 5px 1px;
    overflow-wrap: anywhere;
  }
  #live-panel .favorite-btn {
    font-size: 15px;
    min-width: 23px;
    min-height: 40px;
    padding: 3px 1px;
  }
  #live-panel .guide-time {
    font-size: 10px;
    padding: 6px 4px;
  }
  #live-panel .program {
    font-size: 10px;
    line-height: 1.22;
    padding: 5px 5px;
    overflow-wrap: anywhere;
  }
  #live-panel .program.empty {
    color: transparent;
  }
  #live-panel .guide-row {
    min-height: 48px;
  }
}

/* StreamNest 2.0: consistent EPG geometry on iPhone portrait AND landscape.
   Desktop/laptop pointer devices are excluded from this override. */
@media screen and (max-width: 600px),
       screen and (max-width: 950px) and (pointer: coarse) and (hover: none) {
  #live-panel .guide-row:not(.guide-header) {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    overflow: hidden;
    align-items: stretch;
  }
  #live-panel .guide-row:not(.guide-header) > .guide-channel,
  #live-panel .guide-row:not(.guide-header) > .guide-programs {
    height: 58px;
    min-height: 0;
    max-height: 58px;
    overflow: hidden;
  }
  #live-panel .guide-channel {
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    padding: 2px 2px;
    gap: 1px;
  }
  #live-panel .guide-corner { font-size: 10px; }
  #live-panel .channel-name {
    font-size: 10px !important;
    line-height: 1.16 !important;
    max-height: 56px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    align-self: center;
  }
  #live-panel .favorite-btn {
    font-size: 15px !important;
    line-height: 1 !important;
    min-width: 23px;
    min-height: 40px;
    flex-shrink: 0;
  }
  #live-panel .guide-time { font-size: 10px !important; }
  #live-panel .program {
    height: 58px;
    min-height: 0;
    max-height: 58px;
    font-size: 10px !important;
    line-height: 1.2 !important;
    padding: 5px !important;
    overflow: hidden !important;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }
  #live-panel .program.empty { color: transparent !important; }
}


/* StreamNest 2.3: Search and continue watching */
.wide-panel{max-width:none;margin:18px 0}
#search-panel{max-width:none}
.search-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:16px;margin-top:16px}
.search-card{display:flex;flex-direction:column;align-items:stretch;gap:8px;background:#203554;color:#f4f8ff;text-align:left;padding:9px;border:1px solid #416a95}
.search-card img{width:100%;aspect-ratio:2/3;object-fit:cover;background:#12223a;border-radius:5px}
.search-card span{font-size:13px;overflow-wrap:anywhere}
.continue-items{display:flex;gap:10px;flex-wrap:wrap}
.continue-button{background:#225180;color:white}
#resume-playback,#start-over{margin-left:8px}
#live-search-all{margin-bottom:14px}
@media(max-width:600px){.search-results{grid-template-columns:repeat(2,minmax(0,1fr))}#tabs{flex-wrap:wrap}}

/* Release candidate: artwork-based Continue Watching cards */
.continue-items{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:14px;padding:4px 2px 14px;scroll-snap-type:x proximity}
.continue-card{position:relative;display:flex;flex-direction:column;flex:0 0 155px;width:155px;min-width:0;overflow:hidden;border-radius:10px;border:1px solid #54749c;background:#172a48;color:#fff;padding:0;text-align:left;scroll-snap-align:start}
.continue-card:focus-visible{outline:3px solid #a4e7ff;outline-offset:3px}
.continue-poster{position:relative;width:100%;aspect-ratio:2/3;background:linear-gradient(145deg,#304e79,#101b32);display:grid;place-items:center}
.continue-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.continue-fallback{font-size:36px;opacity:.5}
.continue-poster img~.continue-fallback{display:none}
.continue-info{display:flex;flex-direction:column;gap:6px;flex:1;padding:10px 10px 15px}
.continue-title{font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.continue-time{font-size:12px;color:#c8d8ef}
.continue-resume{font-size:12px;font-weight:700;color:#92e2ff;margin-top:auto}
.continue-track{height:5px;background:#455671;width:100%}
.continue-track span{display:block;height:100%;background:#37c2ef}
@media(max-width:600px){.continue-card{flex-basis:132px;width:132px}.continue-items{gap:10px}}

/* v1.1: persistent EPG information and visible selected program */
.guide-info{position:sticky;top:0;z-index:5;background:#172a47;border:1px solid #47668a;
 border-radius:9px;padding:11px 14px;margin:10px 0;display:flex;flex-direction:column;gap:4px}
#guide-info-title{color:#ffde54;font-size:17px}
#guide-info-channel{color:#b9cbe0;font-size:12px}
#guide-info-description{color:#edf3fb;font-size:14px;margin:2px 0 0;line-height:1.4;max-height:4.2em;overflow:auto}
#guide-grid .guide-selected{outline:3px solid #ffe44c!important;outline-offset:-3px;z-index:2;position:relative;background-color:#315a83}
#guide-grid button:focus-visible{outline:3px solid #ffe44c!important;outline-offset:-3px}
@media(max-width:600px){.guide-info{padding:8px 10px;margin:6px 0}#guide-info-title{font-size:14px}
 #guide-info-description{font-size:12px;max-height:3.8em}}

/* Touchscreen EPG: tap selects a program; use the explicit Watch button to play. */
.guide-watch-channel{align-self:flex-start;border:1px solid #7dcaff;border-radius:7px;
 background:#1779b5;color:#fff;font-weight:700;padding:9px 16px;margin-top:7px;cursor:pointer}
.guide-watch-channel[hidden]{display:none!important}
@media (hover:none) and (pointer:coarse){
 .guide-info{position:sticky;top:0;z-index:10}
 #guide-grid .guide-selected{outline:3px solid #ffe44c!important;outline-offset:-3px}
}