:root {
          --bg: #0f172a;
          /* slate-900 */
          --panel: #111827;
          /* gray-900 */
          --muted: #94a3b8;
          /* slate-400 */
          --fg: #e5e7eb;
          /* gray-200 */
          --accent: #22c55e;
          /* green-500 */
          --error: #ef4444;
          /* red-500 */
          --scrollbar: #111827;
          /* gray-900 */
          --scrollbar-thumb-color: #6b7280;
          /* gray-600 */
        }

        * {
          box-sizing: border-box
        }

        body {
          margin: 0;
          background: var(--bg);
          color: var(--fg);
          font: 14px/1.4 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif
        }

        header {
          display: flex;
          gap: 16px;
          align-items: center;
          padding: 12px 16px;
          border-bottom: 1px solid #1f2937;
          background: #0b1222;
          position: sticky;
          top: 0;
          z-index: 5
        }

        header img {
          height: 40px;
          width: auto;
          border-radius: 6px;
          object-fit: cover
        }

        header h1 {
          font-size: 16px;
          margin: 0 8px 0 0;
          font-weight: 600
        }

        /* tightened layout: no overflow */
        .wrap {
          display: grid;
          grid-template-columns: minmax(0, 1fr) 600px;
          gap: 16px;
          padding: 16px;
          min-height: calc(100dvh - 66px)
        }

        .panel {
          background: var(--panel);
          border: 1px solid #1f2937;
          border-radius: 12px;
          box-shadow: 0 0 0 1px #0003
        }

        .controls {
          display: flex;
          gap: 8px;
          padding: 12px;
          border-bottom: 1px solid #1f2937;
          flex-wrap: wrap
        }

        .controls input[type=url] {
          flex: 1;
          min-width: 260px;
          background: #0b1222;
          border: 1px solid #243044;
          color: var(--fg);
          padding: 10px 12px;
          border-radius: 10px
        }

        .controls button {
          background: var(--accent);
          color: #062b15;
          border: 0;
          padding: 10px 16px;
          border-radius: 10px;
          font-weight: 700;
          cursor: pointer
        }

        .controls small {
          color: var(--muted)
        }

        .player-area {
          padding: 12px;
          box-shadow: 0 0 20px #ffffff62; 
        }

        #player {
          width: 100%;
          max-width: 100%;
          aspect-ratio: 16/9;
          background: #0b1222;
          border-radius: 10px;          
          overflow: hidden;
          max-height: calc(100vh - 220px)
        }

        #fallbackVideo {
          width: 100%;
          aspect-ratio: 16/9;
          background: #0b1222;
          border-radius: 10px;
          max-height: calc(100vh - 220px);
          object-fit: contain
        }

        .sidebar {
          display: flex;
          flex-direction: column
        }

        .list {
          padding: 12px;
          max-height: calc(100dvh - 66px - 48px);
          overflow: auto
        }

        .log-row {
          display: grid;
          grid-template-columns: 60px 130px 1fr;
          gap: 8px;
          align-items: center;
          padding: 8px 10px;
          border-bottom: 1px dashed #1f2937
        }

        .log-row time {
          color: var(--muted);
          font-size: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis
        }

        .status {
          font-size: 12px;
          font-weight: 700;
          padding: 4px 8px;
          border-radius: 9999px;
          justify-self: start
        }

        /* Good streams: light grey background */
        .status.ok {
          background: rgb(0, 180, 0);
          color: #333;
          border-radius: 3px;
          padding: 2px 6px;
        }

        /* Bad streams: red background and white text */
        .status.unreachable {
          background: #e53935;
          color: #fff;
          border-radius: 3px;
          padding: 2px 6px;
        }

        .status.rejected {
          background: #ff9800;
          color: #fff;
          border-radius: 3px;
          padding: 2px 6px;
        }

        .status.badformat {
          background: #9e9e9e;
          color: #fff;
          border-radius: 3px;
          padding: 2px 6px;
        }

        a {
          color: var(--accent);
          text-decoration: none;
        }

        a:hover {
          text-decoration: underline;
        }

        .log-url {
          color: inherit;
          text-decoration: none;
          cursor: pointer;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .alert {
          padding: 10px 12px;
          margin: 0 12px 12px;
          border-radius: 10px
        }

        .alert.error {
          background: #3a0b11;
          color: #fecaca;
          border: 1px solid #7f1d1d
        }

        .alert.notice {
          background: #06381f;
          color: #a7f3d0;
          border: 1px solid #064e3b
        }

        footer {
          padding: 10px 16px;
          color: var(--muted)
        }

        @media (max-width: 980px) {
          .wrap {
            grid-template-columns: 1fr
          }

          .list {
            max-height: unset
          }
        }


        .tips {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid #1f2937;
          border-radius: 12px;
          padding: 10px 12px;
          color: var(--muted);
        }

        .tips summary {
          cursor: pointer;
          color: var(--fg)
        }

        /* Footer */
        .site-footer {
          padding: 14px 16px;
          color: #7b8aa5
        }

        /* Scrollbar styling - match theme */
        * {
          scrollbar-width: thin;
          scrollbar-color: var(--accent) #0a1324;
          /* Firefox */
        }

        /* WebKit */
        *::-webkit-scrollbar {
          width: 10px;
          height: 10px
        }

        *::-webkit-scrollbar-track {
          background: #0a1324;
          border-radius: 10px
        }

        *::-webkit-scrollbar-thumb {
          background: linear-gradient(180deg, var(--accent), #16a34a);
          border-radius: 10px;
          border: 2px solid #0a1324;
        }

        *::-webkit-scrollbar-thumb:hover {
          filter: brightness(1.05)
        }