:root {
        color-scheme: dark;
      }

      html {
        min-width: 480px;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
        background-color: #000;
        color: #f5f6f7;
      }

      header {
        padding: .5rem .5rem .75rem;
        background: linear-gradient(135deg, #4934e6ee, #1c0fa5 55%, #17067a);
        color: #ffffff;
        text-align: center;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
      }

      header h1 {
        margin: 0 0 0.5rem;
        font-size: clamp(2rem, 3vw, 2.75rem);
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      header p {
        margin: 0;
        font-size: clamp(1rem, 2.2vw, 1.15rem);
        opacity: 0.9;
      }

      header .header-logo {  
        max-width: 80px !important;
        width: 80px !important;
        height: 60px !important;
        display: block !important;
        margin: 0 !important;
        object-fit: contain !important;
        box-sizing: border-box !important;
        transform: scale(1) !important;
        overflow: hidden !important;
      }

      /* Additional fallback for any img in header */
      header img {
        max-width: 80px !important;
        width: 80px !important;
        height: 60px !important;
        display: block !important;
        margin: 0 !important;
      }

      main {
        padding: 1rem clamp(1rem, 3vw, 3rem) 3rem;
        max-width: 1400px;
        margin: 0 auto;
      }

      .player-section {
        position: relative;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        padding: .2rem;
        backdrop-filter: blur(6px);
        box-shadow: 0 24px 55px rgba(0, 0, 0, 0.35);
        display: flex;
        flex-direction: column;
      }

      .now-playing {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1rem;
        font-weight: 600;
        color: #f5f6f7;
        margin-bottom: 0.6rem;
        min-height: 1.5rem;
      }

      .now-playing-label {
        /* Label stays on the left */
        flex-shrink: 0;
      }

      .now-playing-value {
        /* Value aligns to the right */
        text-align: right;
        flex: 1;
        padding-left: 1rem;
      }

      .player-wrapper {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        border-radius: 12px;
        overflow: visible;
        background: #0b0b10;
      }

      .player-actions {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: nowrap;
        margin-top: 1rem;
      }

      .custom-controls {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin-top: 0;
      }

      .custom-controls button {
        padding: 0.45rem;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.08);
        color: #f5f6f7;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        height: 2.5rem;
        font-size: 0;
        line-height: 0;
        position: relative;
      }

      .custom-controls button svg {
        width: 1.25rem;
        height: 1.25rem;
        fill: currentColor;
        display: block;
        flex-shrink: 0;
      }

      .custom-controls button svg[style*="display: none"] {
        display: none !important;
      }

      .custom-controls button:hover,
      .custom-controls button:focus-visible {
        background: rgba(255, 255, 255, 0.16);
      }

      .epg-zoom-controls {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        margin-left: 0.25rem;
      }

      .epg-zoom-controls button {
        padding: 0.3rem;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.08);
        color: #f5f6f7;
        cursor: pointer;
        width: 2rem;
        height: 2rem;
        font-size: 0.95rem;
        line-height: 1;
      }

      .epg-zoom-controls button:hover,
      .epg-zoom-controls button:focus-visible {
        background: rgba(255, 255, 255, 0.16);
      }

      .custom-controls input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 101px; /* 3/4 of 135px (which was 3/4 of original 180px) */
        height: 6px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 999px;
        outline: none;
      }

      .custom-controls input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #ff5166;
        cursor: pointer;
      }

      .custom-controls input[type="range"]::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border: none;
        border-radius: 50%;
        background: #ff5166;
        cursor: pointer;
      }

      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .go-live-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.45rem 0.9rem;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.08);
        color: #f5f6f7;
        cursor: pointer;
        height: 2.5rem;
      }

      .cast-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.45rem 0.9rem;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.08);
        color: #f5f6f7;
        cursor: pointer;
        height: 2.5rem;
        min-width: 0;
        margin-left: 0.5rem;
        gap: 0.35rem;
      }

      .icon-cast {
        width: 1rem;
        height: 1rem;
        fill: currentColor;
      }

      /* Push the Go to Live button to the right within the action bar */
      .player-actions .go-live-btn {
        margin-left: 1px;
      }


      .go-live-btn:hover,
      .go-live-btn:focus-visible {
        background: rgba(255, 255, 255, 0.16);
      }

      .go-live-btn svg {
        width: 1rem;
        height: 1rem;
        fill: currentColor;
      }

      #bitmovin-player {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }

      /* Show pointer cursor over the video area */
      #bitmovin-player video {
        cursor: pointer;
      }

      /* Show Bitmovin UI controls on hover */
      #bitmovin-player .bmpui-ui-container {
        opacity: 0;
        transition: opacity 0.2s ease;
      }
      .player-wrapper:hover #bitmovin-player .bmpui-ui-container,
      #bitmovin-player:focus-within .bmpui-ui-container {
        opacity: 1;
      }

      .guide-section {
        margin-top: 0.5rem;
        display: flex;
        flex-direction: column;
      }

      @media (max-width: 799px) {
        .guide-section {
          flex: 1; /* Fill remaining space in main */
          display: flex;
          flex-direction: column;
          min-height: 0; /* Allow flex child to shrink */
        }
      }

      .guide-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
      }

      .guide-header h3 {
        margin: 0;
        font-size: clamp(1.15rem, 1.5vw, 1.55rem);
        font-weight: 600;
      }

      .guide-status {
        font-size: 0.95rem;
        color: rgba(245, 246, 247, 0.8);
      }

      .channel-art-container {
        display: none; /* Hidden in horizontal mode */
      }

      .guide-scroll {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
      }

      .guide-scroll::-webkit-scrollbar {
        height: 8px;
      }

      .guide-scroll::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.35);
        border-radius: 4px;
      }

      .guide-track {
        position: relative;
        min-height: auto;
        background: 
          /* Channel artwork area - transparent */
          linear-gradient(
            90deg,
            transparent 0,
            transparent 140px
          ),
          /* Gradient pattern starting after channel artwork - each column = 1/4 hour (15 min = 67.5px) */
          repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.06) 67.5px,
            rgba(255, 255, 255, 0.03) 67.5px,
            rgba(255, 255, 255, 0.03) 135px
          );
        background-position: 0 0, 140px 0;
        background-size: 140px 100%, 135px 100%;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
        padding: 0 1.5rem 0 0;
      }

      .timeline-labels {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-width: 100%;
        height: 24px;
        background: #000;
        z-index: 2;
        margin-top: 10px;
        /* Timeline labels extend to full length of guide-track */
      }

      .timeline-label {
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        font-size: 0.85rem;
        color: rgba(245, 246, 247, 0.75);
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.85);
      }

      .timeline-hour-line {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        border-left: 1px dotted rgba(255, 255, 255, 0.2);
        pointer-events: none;
        z-index: 1; /* Lines appear behind content in horizontal mode */
      }

      @media (max-width: 799px) {
        .epg-zoom-controls {
          display: none;
        }

        .timeline-hour-line {
          bottom: auto;
          left: 1rem; /* Match program card left position */
          right: auto;
          width: calc(100% - 2rem); /* Match program card width exactly */
          height: 1px;
          border-left: none;
          border-top: 1px dotted rgba(255, 255, 255, 0.4);
          z-index: 10000; /* Ensure lines appear above all other elements */
          pointer-events: none;
        }
        
        /* Timeline labels column lines - span full width of timeline labels column */
        .timeline-labels-line {
          left: 0;
          right: 0;
          width: 100%; /* Full width of timeline-labels column */
        }
      }

      .channel-label {
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 0.75rem;
        color: rgba(255, 255, 255, 0.9);
      }

      .program-row {
        position: relative;
        min-height: 125px;
      }

      .epg-row {
        position: relative;
        display: flex;
        align-items: stretch;
        gap: 0; /* no gap so artwork can overlay content if needed */
      }

      .channel-art {
        position: sticky;
        top: 24px; /* below sticky timeline labels */
        left: 0;
        width: 140px;
        min-height: 125px; /* match program-row (120px cards + 5px) */
        background: #000 url('zypelogo_mini.png') center center / contain no-repeat;
        /* border-radius: 8px; */
        border-right: 2px solid rgba(255, 255, 255, 0.25);
        box-shadow: 6px 0 18px rgba(0, 0, 0, 0.55);
        flex: 0 0 140px; /* reserve artwork width so it's visible */
        z-index: 5;
        cursor: pointer;
      }

      /* Program row starts after channel artwork - flex layout naturally positions it */
      .epg-row .program-row {
        flex: 1;
        margin-left: 0;
        position: relative;
      }

      @media (min-width: 800px) {
        .program-card {
          height: 120px !important;
          max-height: 120px !important;
        }
      }      

      .program-card {
        position: absolute;
        top: 0;
        min-height: 120px;
        border-radius: 12px;
        padding: 1rem 1.1rem;
        background: rgba(48, 56, 72, 0.55);
        color: #f6f7fb;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 12px 24px rgba(6, 9, 15, 0.25);
        transition: transform 0.2s ease, box-shadow 0.2s ease,
          background 0.2s ease, border-color 0.2s ease;
        overflow: hidden;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.35rem;
        white-space: normal;
        filter: saturate(0.7);
        -webkit-mask-image: linear-gradient(
          to right,
          transparent 0%,
          black 8%,
          black 92%,
          transparent 100%
        );
        mask-image: linear-gradient(
          to right,
          transparent 0%,
          black 8%,
          black 92%,
          transparent 100%
        );
      }

      .program-card:hover {
        transform: none;
        background: rgba(55, 66, 84, 0.6);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 12px 24px rgba(6, 9, 15, 0.25);
      }

      .program-card.selected {
        background: rgba(34, 44, 63, 0.75);
        border-color: rgba(255, 255, 255, 0.05);
        box-shadow: 0 16px 32px rgba(6, 9, 15, 0.45);
        filter: none;
        cursor: pointer;
      }

      .program-card.selected:hover {
        /*transform: translateY(-4px); */
        background: rgba(45, 58, 82, 0.88);
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow: 0 24px 45px rgba(0, 0, 0, 0.55);
      }
      
      /* Preserve white borders on hover when playing */
      .program-card--playing:hover {
        border-top: 2px solid #ffffff !important;
        border-bottom: 2px solid #ffffff !important;
      }
      
      .program-card.selected.program-card--playing:hover,
      .program-card--live.program-card--playing:hover {
        border-top: 2px solid #ffffff !important;
        border-bottom: 2px solid #ffffff !important;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
      }

      .program-card--live {
        background: rgba(34, 44, 63, 0.75);
        border-color: rgba(255, 255, 255, 0.05);
        box-shadow: 0 16px 32px rgba(6, 9, 15, 0.45);
        cursor: pointer;
        filter: none;
      }

      /* Currently playing episode - white borders on top and bottom (horizontal mode) */
      .program-card--playing {
        border-top: 2px solid #ffffff !important;
        border-bottom: 2px solid #ffffff !important;
      }
      
      /* Ensure white borders override selected and live styles */
      .program-card.selected.program-card--playing,
      .program-card--live.program-card--playing {
        border-top: 2px solid #ffffff !important;
        border-bottom: 2px solid #ffffff !important;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
      }

      .program-card--live:hover {
        /*transform: translateY(-4px); */
        background: rgba(45, 58, 82, 0.88);
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow: 0 24px 45px rgba(0, 0, 0, 0.55);
      }

      .program-card--future {
        background: rgba(34, 44, 63, 0.75);
        border-color: rgba(255, 255, 255, 0.05);
        box-shadow: 0 16px 32px rgba(6, 9, 15, 0.45);
        cursor: default;
        filter: none;
      }

      .program-card--future:hover {
        /*transform: translateY(-4px); */
        background: rgba(45, 58, 82, 0.88);
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow: 0 24px 45px rgba(0, 0, 0, 0.55);
      }

      .program-card--too-old {
        background: rgba(34, 34, 34, 0.6);
        border-color: rgba(255, 255, 255, 0.05);
        cursor: not-allowed;
        opacity: 0.6;
        filter: grayscale(30%);
      }

      .program-card--too-old:hover {
        background: rgba(34, 34, 34, 0.6);
        border-color: rgba(255, 255, 255, 0.05);
        cursor: not-allowed;
        transform: none;
      }

      .program-title {
        font-size: 1.05rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .program-meta {
        font-size: 0.9rem;
        color: rgba(230, 232, 235, 0.85);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .program-duration {
        font-size: 0.8rem;
        color: rgba(230, 232, 235, 0.65);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .program-episode {
        font-size: 0.8rem;
        color: rgba(230, 232, 235, 0.65);
      }

      .program-card::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 50%;
        bottom: 100%;
        transform: translate(-50%, 10px);
        background: rgba(14, 16, 24, 0.92);
        color: #f5f6f7;
        padding: 0.65rem 0.8rem;
        border-radius: 8px;
        font-size: 0.85rem;
        line-height: 1.3;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
        white-space: normal;
        min-width: 200px;
        max-width: 320px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 10;
      }

      .program-card:hover::after {
        opacity: 1;
        transform: translate(-50%, -4px);
      }

      .epg-thumbnail {
        position: absolute;
        width: 240px;
        height: 135px;
        background: rgba(0, 0, 0, 0.9);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.2);
        z-index: 9999;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        bottom: 2rem;
        right: 2rem;
        top: auto;
        left: auto;
      }
      
      /* Ensure thumbnail is positioned within player wrapper's visual area */
      .player-wrapper .epg-thumbnail {
        position: absolute;
        top: auto;
        left: auto;
        bottom: 1rem;
        right: 1rem;
      }

      .epg-thumbnail.active {
        opacity: 1;
      }

      .epg-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .epg-thumbnail::after {
        content: attr(data-title);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.5rem;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
        color: #fff;
        font-size: 0.85rem;
        font-weight: 500;
        text-align: center;
      }

      .current-time-indicator {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(180deg, rgba(255, 81, 102, 0.2), #ff5166);
        box-shadow: 0 0 12px rgba(255, 81, 102, 0.45);
        z-index: 999; /* ensure visible above overlays */
        pointer-events: none;
      }

      .current-time-indicator::before {
        content: "Live";
        position: absolute;
        top: -26px;
        left: 50%;
        transform: translateX(-50%);
        background: #ff5166;
        color: #fff;
        font-size: 0.7rem;
        padding: 0.3rem 0.4rem;
        border-radius: 5px;  
        letter-spacing: 0.08em;
        margin-top: 18px; /* move label down slightly */
      }

      .empty-state {
        padding: 1.5rem;
        border-radius: 12px;
        border: 1px dashed rgba(255, 255, 255, 0.2);
        background: rgba(16, 19, 28, 0.75);
        text-align: center;
        font-size: 0.95rem;
        color: rgba(245, 246, 247, 0.75);
      }


      @media (max-width: 799px) {
        /* Vertical EPG Layout */
        
        html,
        body {
          overflow-x: hidden;
          overflow-y: hidden; /* Remove page scroll bar */
          height: 100vh; /* Full viewport height */
        }
        
        main {
          overflow-x: hidden;
          overflow-y: hidden;
          height: 100vh; /* Full viewport height */
          display: flex;
          flex-direction: column;
          padding: 1rem clamp(1rem, 3vw, 3rem) 0; /* Remove bottom padding */
        }
        
        .player-section {
          flex-shrink: 0; /* Don't shrink player section */
        }
        
        /* Hide "Go Live" text and make button same size as other controls in vertical mode */
        .go-live-btn {
          padding: 0.45rem;
          min-width: 2.5rem;
          height: 2.5rem;
          font-size: 0;
          line-height: 0;
          gap: 0;
        }
        
        .go-live-btn svg {
          width: 1.25rem;
          height: 1.25rem;
        }
        
        /* Channel artwork container - shown only in vertical mode */
        .channel-art-container {
          display: flex !important;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 80px;
          min-height: 80px;
          background-color: #000;
          background-image: url('zypelogo_mini.png');
          background-position: center center;
          background-size: contain;
          background-repeat: no-repeat;
          border-bottom: 2px solid rgba(255, 255, 255, 0.25);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
          cursor: pointer;
          margin-top: 1rem;
        }
        
        .guide-scroll {
          overflow-x: hidden;
          overflow-y: auto;
          flex: 1; /* Fill remaining space in guide-section */
          min-height: 0; /* Allow flex child to shrink */
        }

        .guide-track {
          position: relative;
          padding: 0;
          min-width: auto;
          min-height: auto;
          width: 100%;
          max-width: 100%;
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          box-sizing: border-box;
          background: #000;
        }

        .timeline-labels {
          position: sticky;
          left: 0;
          top: auto;
          width: 80px;
          height: auto;
          min-width: 80px;
          flex-shrink: 0;
          background: #000;
          z-index: 2;
          display: flex;
          flex-direction: column;
          padding: 1rem 0.5rem;
          padding-top: 1rem; /* Removed channel artwork offset */
          margin-top: 0;
          /* Sticky positioning works as containing block for absolutely positioned lines */
        }

        .timeline-label {
          position: absolute;
          top: auto;
          left: auto;
          transform: none;
          writing-mode: horizontal-tb;
          text-orientation: mixed;
          margin-bottom: 0;
          padding: 0.25rem 0.5rem;
          font-size: 0.85rem;
          color: rgba(245, 246, 247, 0.75);
          text-shadow: 0 0 8px rgba(0, 0, 0, 0.85);
          white-space: nowrap;
          text-align: center;
        }

        .epg-row {
          flex-direction: column;
          position: relative;
          flex: 1;
          min-width: 0;
          width: 100%; /* Full width since channel art is hidden */
          box-sizing: border-box;
        }

        /* Hide channel artwork in vertical mode */
        .channel-art {
          display: none;
        }

        .epg-row .program-row {
          margin-left: 0;
          margin-top: 1rem; /* Match timeline labels padding-top */
        }

        .program-row {
          position: relative;
          min-height: auto;
          width: 100%;
          box-sizing: border-box;
          overflow: visible; /* Ensure timeline lines are not clipped */
          /* Program row starts after channel artwork in vertical mode */
        }

        .program-card {
          position: absolute;
          left: 1rem !important;
          top: auto;
          width: calc(100% - 2rem) !important;
          z-index: 1; /* Lower than timeline lines to ensure lines are visible */
          box-sizing: border-box;
          padding: 1rem 1.1rem;
          margin: 0;
          background: rgba(48, 56, 72, 0.55);
          border: 1px solid rgba(255, 255, 255, 0.08);
          box-shadow: 0 12px 24px rgba(6, 9, 15, 0.25);
          cursor: pointer;
          filter: saturate(0.7);
          -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 5%,
            black 95%,
            transparent 100%
          );
          mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 5%,
            black 95%,
            transparent 100%
          );
        }

        .program-card:hover {
          transform: none;
          background: rgba(55, 66, 84, 0.6);
          border-color: rgba(255, 255, 255, 0.12);
          box-shadow: 0 12px 24px rgba(6, 9, 15, 0.25);
        }

        .program-card.selected {
          background: rgba(34, 44, 63, 0.75);
          border-color: rgba(255, 255, 255, 0.05);
          box-shadow: 0 16px 32px rgba(6, 9, 15, 0.45);
          filter: none;
          cursor: pointer;
        }

        .program-card.selected:hover {
          background: rgba(45, 58, 82, 0.88);
          border-color: rgba(255, 255, 255, 0.15);
          box-shadow: 0 24px 45px rgba(0, 0, 0, 0.55);
        }
        
        /* Preserve white borders on hover when playing (vertical mode) */
        .program-card--playing:hover {
          border-top: none !important;
          border-bottom: none !important;
          border-left: 2px solid #ffffff !important;
          border-right: 2px solid #ffffff !important;
        }
        
        .program-card.selected.program-card--playing:hover,
        .program-card--live.program-card--playing:hover {
          border-top: none !important;
          border-bottom: none !important;
          border-left: 2px solid #ffffff !important;
          border-right: 2px solid #ffffff !important;
        }

        .program-card--live {
          background: rgba(34, 44, 63, 0.75);
          border-color: rgba(255, 255, 255, 0.05);
          box-shadow: 0 16px 32px rgba(6, 9, 15, 0.45);
          cursor: pointer;
          filter: none;
        }

        .program-card--live:hover {
          background: rgba(45, 58, 82, 0.88);
          border-color: rgba(255, 255, 255, 0.15);
          box-shadow: 0 24px 45px rgba(0, 0, 0, 0.55);
        }

        /* Currently playing episode - white borders on left and right (vertical mode) */
        .program-card--playing {
          border-top: none !important;
          border-bottom: none !important;
          border-left: 2px solid #ffffff !important;
          border-right: 2px solid #ffffff !important;
        }
        
        /* Ensure white borders override selected and live styles in vertical mode */
        .program-card.selected.program-card--playing,
        .program-card--live.program-card--playing {
          border-top: none !important;
          border-bottom: none !important;
          border-left: 2px solid #ffffff !important;
          border-right: 2px solid #ffffff !important;
        }

        .program-card--future {
          background: rgba(34, 44, 63, 0.75);
          border-color: rgba(255, 255, 255, 0.05);
          box-shadow: 0 16px 32px rgba(6, 9, 15, 0.45);
          cursor: default;
          filter: none;
        }

        .program-card--future:hover {
          background: rgba(45, 58, 82, 0.88);
          border-color: rgba(255, 255, 255, 0.15);
          box-shadow: 0 24px 45px rgba(0, 0, 0, 0.55);
        }

        .program-card--too-old {
          background: rgba(34, 34, 34, 0.6);
          border-color: rgba(255, 255, 255, 0.05);
          cursor: not-allowed;
          opacity: 0.6;
          filter: grayscale(30%);
        }

        .program-card--too-old:hover {
          background: rgba(34, 34, 34, 0.6);
          border-color: rgba(255, 255, 255, 0.05);
          cursor: not-allowed;
          transform: none;
        }

        .current-time-indicator {
          position: absolute;
          left: 1rem;
          right: 1rem;
          top: 0;
          bottom: auto;
          width: auto;
          height: 2px;
          background: linear-gradient(90deg, rgba(255, 81, 102, 0.2), #ff5166);
          box-shadow: 0 0 12px rgba(255, 81, 102, 0.45);
          z-index: 999;
        }

        .current-time-indicator::before {
          content: "Live";
          position: absolute;
          top: -26px;
          left: 95%;
          transform: none;
          background: #ff5166;
          color: #fff;
          font-size: 0.7rem;
          padding: 0.3rem 0.4rem;
          border-radius: 5px;  
          letter-spacing: 0.08em;
          white-space: nowrap;
        }
      }

      @media (max-width: 799px) {
        header {
          padding: 2rem 1.25rem 1.25rem;
        }

        main {
          padding: 1.5rem 1rem 2.5rem;
        }

        .guide-track {
          padding: 0 0 0 1.1rem;
        }

        .program-card {
          min-height: 100px;
          padding: 0.85rem;
        }

        .program-card::after {
          display: none;
        }
      }
      @media (max-width: 640px) {
        /* Vertical EPG Layout */
        .current-time-indicator::before {
          left: 93%;
        }
      }
      @media (max-width: 520px) {
        /* Vertical EPG Layout */
        .current-time-indicator::before {
          left: 90%;
        }
      }