* {
        box-sizing: border-box;
      }

      html,
      body {
        height: 100%;
        margin: 0;
        background: #0f0f0f;
        color: #fcf4ef;
        font-family: 'Roboto', system-ui, -apple-system, sans-serif;
        overflow: hidden;
      }

      .app-container {
        height: 100vh;
        display: flex;
        flex-direction: column;
        background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 25%, #262626 75%, #1a1a1a 100%);
      }

      @keyframes backgroundShift {
        0%, 100% { background-position: 0% 50%; }
        25% { background-position: 100% 25%; }
        50% { background-position: 100% 75%; }
        75% { background-position: 0% 100%; }
      }

      .nav-bar {
        height: 64px;
        background: rgba(15, 15, 15, 0.98);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(178, 127, 63, 0.25);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32px;
        position: relative;
        z-index: 100;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700;
        font-size: 20px;
        color: #fcf4ef;
      }

      .brand-logo {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .nav-controls {
        display: flex;
        align-items: center;
        gap: 16px;
        height: 100%;
      }

      .status-chip,
      .rating-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        height: auto;
        min-height: 32px;
      }

      .status-chip {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        background: linear-gradient(135deg, #ff4757 0%, #ff3838 100%);
        color: #fff;
        box-shadow: 0 4px 16px rgba(255, 71, 87, 0.3);
        animation: liveGlow 2s ease-in-out infinite alternate;
      }

      .status-chip.offline {
        background: rgba(252, 244, 239, 0.1);
        color: #fcf4ef;
        border: 1px solid rgba(252, 244, 239, 0.2);
        box-shadow: none;
        animation: none;
      }

      .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
        animation: pulse 1.5s ease-in-out infinite;
      }

      .rating-badge {
        background: linear-gradient(135deg, #b27f3f 0%, #d4941f 100%);
        color: #fcf4ef;
        box-shadow: 0 2px 8px rgba(178, 127, 63, 0.3);
        font-weight: 700;
      }

      .video-container {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: linear-gradient(135deg, #0a0a0b 0%, #1a1a1f 25%, #2a1f1a 75%, #0f0f11 100%);
        background-size: 400% 400%;
        animation: backgroundShift 12s ease-in-out infinite;
      }

      .video-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
      }

      video {
        width: 100% !important;
        height: 100% !important;
        background: transparent;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }

      video.offline-mode {
        opacity: 0;
        pointer-events: none;
      }

      .offline-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2;
        opacity: 0;
        pointer-events: none;
        transform: scale(0.95);
      }

      .offline-overlay.show {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
      }

      .offline-content {
        text-align: center;
        animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .stream-logo {
        width: clamp(100px, 15vw, 200px);
        height: auto;
        margin: 0 auto 20px auto;
        display: block;
        opacity: 0.95;
        filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
        transition: transform 0.3s ease;
      }

      .stream-logo img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }

      .stream-logo:hover {
        transform: scale(1.05);
      }

      .offline-title {
        font-size: clamp(22px, 4vw, 32px);
        font-weight: 700;
        margin: 0 0 8px 0;
        color: #fcf4ef;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
        line-height: 1.2;
      }

      .offline-subtitle {
        color: #a1a1aa;
        font-size: clamp(14px, 2.5vw, 16px);
        font-weight: 400;
        opacity: 0.9;
        margin: 0;
        line-height: 1.4;
      }

      @keyframes liveGlow {
        0% { box-shadow: 0 4px 16px rgba(255, 71, 87, 0.3); }
        100% { box-shadow: 0 8px 32px rgba(255, 71, 87, 0.5); }
      }

      @keyframes pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.7; transform: scale(1.2); }
      }

      @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @media (max-width: 1024px) {
        .nav-bar {
          padding: 0 20px;
        }
      }

      @media (max-width: 768px) {
        .nav-bar {
          height: 56px;
          padding: 0 16px;
        }

        .brand {
          font-size: 18px;
        }

        .brand-logo {
          width: 36px;
          height: 36px;
        }
      }