* { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      color: #fff;
      background:
        radial-gradient(circle at 15% 10%, rgba(68, 160, 255, .45), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(92, 80, 255, .35), transparent 30%),
        linear-gradient(135deg, #06152f 0%, #082b63 45%, #061429 100%);
      overflow-x: hidden;
    }

 

    .page {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
      padding: 24px;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 28px;
    }

    .hero {
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
      margin-bottom: 22px;
      
    }


    .hero-head {
      padding: 4px;
      position: relative;
    }

    .hero-head::after {
      content: "";
      position: absolute;
      width: 360px;
      height: 360px;
      right: -120px;
      top: -180px;
      background: radial-gradient(circle, rgba(83,185,255,.55), transparent 65%);
      pointer-events: none;
    }

    h1 {
      margin: 0;
      font-size: clamp(28px, 2.8vw, 40px);
      letter-spacing: -.5px;
      font-weight: 700;
    }

    .player-shell {
      padding: 4px;
      position: relative;
    }

    .player-shell::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 5px;
      background: linear-gradient(135deg, rgba(72,176,255,.65), rgba(255,255,255,.05), rgba(95,82,255,.45));
      z-index: -1;
      filter: blur(.2px);
    }

    #player-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #000;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    }

    #live-label {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 30;
      background: linear-gradient(135deg, #ff174d, #ff5c7a);
      color: white;
      padding: 7px 13px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .5px;
      box-shadow: 0 10px 24px rgba(255,23,77,.35);
    }

    #veplayer {
      width: 100%;
      height: 100%;
      background: #000;
      position: relative;
      z-index: 1;
    }

    #veplayer video {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    #ios-native-fullscreen-btn {
      display: none;
      position: absolute;
      right: 12px;
      bottom: 12px;
      z-index: 35;
      height: 36px;
      padding: 0 13px;
      border: 0;
      border-radius: 7px;
      background: rgba(0,0,0,.72);
      color: #fff;
      font-size: 14px;
      line-height: 36px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    #offline-overlay {
      position: absolute;
      inset: 0;
      display: none;
      z-index: 20;
      background: #000;
      cursor: pointer;
    }

    #offline-overlay img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      opacity: .85;
    }

    #offline-text {
      position: absolute;
      left: 50%;
      bottom: 26px;
      transform: translateX(-50%);
      color: white;
      background: rgba(0,0,0,.58);
      border: 1px solid rgba(255,255,255,.22);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 10px 18px;
      border-radius: 999px;
      white-space: nowrap;
      font-size: 15px;
    }

    .section-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .panel {
      padding: 4px;
    }

    .section-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      font-size: 20px;
      font-weight: 900;
    }

    .section-title::before {
      content: "";
      width: 8px;
      height: 22px;
      border-radius: 999px;
      background: linear-gradient(#7dd3fc, #2563eb);
      box-shadow: 0 0 22px rgba(125,211,252,.65);
    }

    .notice-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 12px;
      color: rgba(255,255,255,.78);
      line-height: 1.7;
    }

    .notice-list li {
      padding: 14px 16px;
      border-radius: 5px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
    }

    .timeline {
      display: grid;
      gap: 12px;
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 78px 1fr;
      gap: 14px;
      align-items: center;
      padding: 14px;
      border-radius: 5px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
    }

    .time {
      color: #93c5fd;
      font-weight: 900;
    }

    .event {
      color: rgba(255,255,255,.86);
      font-weight: 650;
    }

    .message-form {
      display: grid;
      grid-template-columns: 180px 1fr auto;
      gap: 10px;
      margin-bottom: 18px;
    }

    .live-time-row {
      margin-top: 18px;
      display: none;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .live-time-label {
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(255,184,77,.12);
      border: 1px solid rgba(255,184,77,.35);
      color: #ffcc73;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .5px;
    }

    .live-time-text {
      color: rgba(255,255,255,.88);
      font-size: 15px;
      font-weight: 600;
    }

    input, textarea {
      width: 100%;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.1);
      color: white;
      border-radius: 5px;
      padding: 13px 14px;
      outline: none;
      font: inherit;
    }

    textarea {
      height: 52px;
      min-height: 52px;
      resize: vertical;
      line-height: 24px;
    }

    input::placeholder, textarea::placeholder {
      color: rgba(255,255,255,.48);
    }

    input:focus, textarea:focus {
      border-color: rgba(125,211,252,.8);
      box-shadow: 0 0 0 4px rgba(125,211,252,.12);
    }

    button {
      border: none;
      border-radius: 5px;
      padding: 0 22px;
      background: linear-gradient(135deg, #38bdf8, #2563eb);
      color: white;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 16px 30px rgba(37,99,235,.35);
    }

    .tip {
      color: rgba(255,255,255,.55);
      font-size: 13px;
      margin-bottom: 16px;
    }

    .qa {
      display: grid;
      gap: 12px;
    }

    .question {
      padding: 16px;
      border-radius: 5px;
      line-height: 1.75;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.13);
    }

    .answer {
      margin-top: 10px;
      padding: 14px;
      border-radius: 5px;
      line-height: 1.75;
      background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(37,99,235,.13));
      border: 1px solid rgba(125,211,252,.28);
    }

    .name {
      color: #93c5fd;
      font-weight: 900;
      margin-bottom: 6px;
    }

    .empty {
      color: rgba(255,255,255,.55);
      padding: 14px;
      border-radius: 5px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
    }

    .footer {
      text-align: center;
      color: rgba(255,255,255,.48);
      padding: 26px 0 8px;
      font-size: 13px;
    }

    .title-row {
      display: flex;
      align-items: center;
      gap: 18px;
      width: 100%;
    }

    .logo-box {
      width: 72px;
      height: 72px;
      flex-shrink: 0;
    }

    .logo-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }




 #photo-carousel {
                  position: absolute;
                  inset: 0;
                  width: 100%;
                  height: 100%;
                  overflow: hidden;
                  display: flex;
                }
                
                .carousel-img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  position: absolute;
                  top: 0;
                  left: 0;
                  opacity: 0;
                  transition: opacity 1s ease-in-out;
                }
                
                .carousel-img.active {
                  opacity: 1;
                }    


                .tab-nav {
                  display: grid;
                  grid-template-columns: repeat(3, 1fr);
                  gap: 10px;
                  margin-bottom: 16px;
                }
                
                .tab-btn {
                  height: 44px;
                  padding: 0 10px;
                  border-radius: 999px;
                  background: rgba(255,255,255,.1);
                  color: #fff;
                  box-shadow: none;
                  font-size: 15px;
                }
                
                .tab-btn.active {
                  background: linear-gradient(135deg, #38bdf8, #2563eb);
                }
                
                .tab-panel {
                  display: none;
                }
                
                .tab-panel.active {
                  display: block;
                }
                
 .program-table {
  width: 100%;
  border-collapse: collapse;
}

.program-table th,
.program-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  text-align: left;
  font-size: 14px;
}

.program-table th {
  color: #93c5fd;
  font-weight: 900;
}

.program-card-list {
  display: none;
}

@media (max-width: 760px) {
  .program-table {
    display: none;
  }

  .program-card-list {
    display: grid;
    gap: 12px;
  }

  .program-card {
    padding: 14px;
    border-radius: 5px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
  }

  .program-card-title {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .program-no {
    color: #93c5fd;
    font-weight: 900;
    min-width: 30px;
  }

  .program-name {
    color: #fff;
    font-weight: 900;
    line-height: 1.5;
    font-size: 14px;
  }

  .program-info {
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.8;
  }
}               
                
                
                
                
                
                
                
                
                
                
                
                
                
                

@media (max-width: 760px) {
  .tab-nav {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .tab-btn {
    height: 40px;
    font-size: 14px;
    padding: 0 6px;
  }


  /* 页面边距 */
    .page {
      padding: 0px;
      height: 90vh;
      overflow: hidden;
    }

  /* 主标题 */
  h1 {
    font-size: 20px;
    line-height: 1.3;
  }

  /* 直播时间 */
  .live-time-label {
    font-size: 11px;
    padding: 5px 12px;
  }
  .live-time-text {
    font-size: 14px;
  }

  /* 模块标题 */
  .section-title {
    font-size: 17px;
    margin-bottom: 14px;
  }
  .section-title::before {
    width: 6px;
    height: 18px;
  }

  /* 活动通知 */
  .notice-list li {
    font-size: 14px;
    line-height: 1.7;
    padding: 12px 14px;
  }

  /* 节目单 */
  .timeline-item {
    grid-template-columns: 60px 1fr;
 
    gap: 10px;
    padding: 12px;
  }
  .time { font-size: 14px; }
  .event { font-size: 14px; }

  /* 留言 */
  .question { font-size: 14px; line-height: 1.8; padding: 14px; }
  .answer { font-size: 14px; }

  /* 输入框 */
  input, textarea { font-size: 14px; }

  /* logo */
  .logo-box { width: 52px; height: 52px; }
  .title-row { gap: 12px; }

  .message-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .message-form input, .message-form textarea, .message-form button { width: 100%; }
  .message-form button { height: 52px; font-size: 15px; border-radius: 14px; }
  .message-form textarea { min-height: 88px; }

  #live-label {
    top: 10px;
    right: 10px;
    padding: 4px 9px;
    font-size: 14px;
    font-weight: 800;
    border-radius: 999px;
    letter-spacing: .8px;
  }

  .player-shell {
    padding: 0;
    margin-left: -14px;
    margin-right: -14px;
  }
  .player-shell::before { display: none; }
  #player-wrapper, #veplayer { border-radius: 0; box-shadow: none; }

  /* 禁止 body 滚动 */
    html, body {
      overflow-x: hidden;
      min-height: 100%;
    }
  

  /* hero 固定 */
  .hero { position: relative; z-index: 50; margin-bottom: 8px; }

  /* tab 内容滚动 */
    .tab-content-scroll {
      height: calc(100dvh - 335px);
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 80px;
    }
  /* tab-nav 固定并可左右滑动 */
  .tab-nav {
    position: sticky;
    top: 0;
    z-index: 51;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    
    padding: 8px 0;
    margin-bottom: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab-btn { flex: 0 0 auto; }
}
   
   .tab-panel {
  padding-bottom: 80px;
}     
    
    
  body {
  overscroll-behavior-y: auto;
}  
    

  .tab-content-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tab-content-scroll::-webkit-scrollbar {
    display: none;
  }

 
    
 .tab-nav {
    background:
      radial-gradient(circle at 15% 10%, rgba(68,160,255,.35), transparent 30%),
      linear-gradient(135deg, rgba(6,21,47,.96), rgba(8,43,99,.96));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .tab-nav::before {
    background:
      radial-gradient(circle at 15% 10%, rgba(68,160,255,.35), transparent 30%),
      linear-gradient(135deg, rgba(6,21,47,.96), rgba(8,43,99,.96));
  }
 
    
  .tab-panel {
  padding-top: 0px;
}  
    
    .empty {
    font-size: 14px;
  }

/* 当前直播观看人数 */
#viewer-live-count {
  display: none;
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 30;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .58);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

#viewer-live-count.is-visible {
  display: block;
}

@media (max-width: 760px) {
  #viewer-live-count {
    left: 10px;
    bottom: 10px;
    padding: 5px 9px;
    font-size: 12px;
  }
}