/* Custom global styles */
body { background-color: #f0f0f0; }

    #tvapp {
      display: flex;
      flex-direction: column;
      height: 100%;
      max-height: 100vh;
      overflow: hidden;
      font-family: sans-serif;
    }

    #tvapp #player {
      position: relative;
      background: black;
      height: 50vh;
    }

    #tvapp video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: black;
    }

    #tvapp #guide {
      flex-grow: 1;
      overflow-y: auto;
      background: #f0f0f0;
      padding: 1em;
    }

    #tvapp .channel {
      padding: 0.5em;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
    }

    #tvapp .channel:hover {
      background: #ddd;
    }

    #tvapp #debug {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      color: white;
      background: rgba(0, 0, 0, 0.8);
      font-size: 0.85em;
      padding: 0.5em;
      z-index: 1001;
    }

    #tvapp #debug pre {
      white-space: pre-wrap;
      margin: 0;
    }

    @media (max-width: 768px) {
      #tvapp #player {
        height: 40vh;
      }
    }