:root {
            --primary-color: #2b6777;
            --secondary-color: #52ab98;
            --accent-color: #c8d8e4; 
            --text-color: #4a4a4a;
            --bg-color: #f0f4f7;
            --hover-color: #2a9d8f;
        }

        body {
            background-color: var(--bg-color);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 0;
            color: var(--text-color);
        }

        /* 全局链接样式 */
        a:link { text-decoration: none; color: inherit; }
        a:visited { color: inherit; }
        a:hover { color: red; }

        /* 头部、容器和分类按钮样式保持不变 */
        .header { background-color: var(--primary-color); color: white; padding: 20px 16px; text-align: center; border-radius: 8px 8px 0 0; }
        .header h1 { margin: 0; font-size: 2em; }
        .container { max-width: 1000px; margin: auto; padding: 16px; }
        .main-content { background-color: white; padding: 24px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-top: 10px; }
        .main-content h2 { text-align: center; color: var(--primary-color); margin-top: 0; margin-bottom: 24px; }
        .breadcrumb { padding: 10px 0; font-size: 0.9em; color: #666; }
        
        /* 分类按钮容器 */
        #category-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; padding: 10px 0; border-bottom: 1px solid var(--accent-color); }

        /* 播放源列表容器 (channelsDiv现在作为播放源列表) */
        #channels-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 8px;
            margin-top: 20px;
            padding: 10px 0;
            border-top: 1px solid var(--accent-color);
        }

        /* 按钮基础样式 */
        .category-btn, .channel-item {
            background-color: var(--accent-color);
            border: none;
            border-radius: 6px;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--primary-color);
            cursor: pointer;
            transition: background-color 0.2s, transform 0.2s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
            line-height: 1.2;
            padding: 10px 15px;
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .category-btn:hover, .channel-item:hover {
            background-color: var(--hover-color);
            color: white;
            transform: translateY(-2px);
        }

        .category-btn.active {
            background-color: var(--primary-color);
            color: white;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        }

        /* 播放源列表项 - 允许换行 */
        .channel-item {
            padding: 12px 5px; 
            height: auto;
            white-space: normal; 
            word-wrap: break-word; 
            text-align: center;
            font-size: 0.9em; 
            color: var(--primary-color); /* 保持原有颜色 */
        }

        .channel-item.playing {
            background-color: var(--secondary-color);
            color: white;
            font-weight: bold;
        }

        /* ========================================= */
        /* 核心修改：播放器弹出层样式 */
        /* ========================================= */

        /* 遮罩层/弹出容器：默认隐藏，全屏覆盖，居中对齐 */
        #player-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            display: none; 
            justify-content: center; 
            align-items: center; 
            z-index: 1000; 
            opacity: 0; 
            transition: opacity 0.3s ease;
            
            /* 【关键新增】添加内边距，强制留出屏幕边缘空间 */
            padding: 30px; 
            box-sizing: border-box; /* 确保 padding 不会增加 width/height */
        }
        
        /* 播放器主体容器 */
        #player-modal.visible {
            display: flex; /* 点击时显示 */
            opacity: 1;
        }

        /* 播放器和关闭按钮的包裹层 */
        #player-wrapper {
            position: relative;
            /* 调整 width：让它最大化利用 modal 提供的空间 */
            width: 100%; 
            max-width: 960px; /* 保持最大宽度不变 */
            aspect-ratio: 16 / 9;
            background-color: black;
            border-radius: 8px;
            /* 保持 overflow: visible 或直接删除，让关闭按钮显示 */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            transform: scale(0.8); 
            transition: transform 0.3s ease;
        }

        #player-modal.visible #player-wrapper {
            transform: scale(1); /* 弹出时放大到正常大小 */
        }

        /* Clappr 播放器自身的尺寸控制 */
        #player-container {
            width: 100% !important;
            height: 100% !important;
        }

        /* 关闭按钮 */
        #close-player {
            position: absolute;
            top: -8px; /* 调整位置，让按钮在播放器右上角外部 */
            right: -8px;
            background: #e74c3c; /* 红色背景 */
            color: white;
            border: 2px solid white;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            line-height: 26px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            z-index: 1001;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            transition: background 0.2s;
        }

        #close-player:hover {
            background: #c0392b;
        }

      /* 底部导航和版权信息 */
      .footer-nav {
          background-color: var(--bg-color);
          padding: 20px 0;
          text-align: center;
          border-top: 1px solid #ddd;
          margin-top: 24px;
      }

      .footer-nav a {
          margin: 0 10px;
          font-size: 0.9em;
          white-space: nowrap;
      }

      .copyright {
          background-color: var(--primary-color);
          color: white;
          padding: 20px 16px;
          text-align: center;
          margin-top: 16px;
      }

      .copyright p {
          margin: 5px 0;
          font-size: 0.9em;
          line-height: 1.5;
      }
        
        /* 响应式调整 */
        @media (max-width: 600px) {
            #category-buttons, #channels-list {
                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            }
            #player-wrapper {
                width: 95%; /* 移动端更宽一些 */
            }
        }