/* ============================================================
   公共 CSS
   ============================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { height:100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background:#eef2f7; color:#1a2b3d;
  padding:20px 14px 10px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
button:focus, button:focus-visible, input:focus, input:focus-visible,
.nav-tab:focus, .copy-btn:focus { outline:none !important; }

/* 容器 */
.container {
  max-width:820px;
  margin:0 auto;
  position:relative;
  width:100%;
  overflow-x:hidden;
  flex:1;
  display:flex;
  flex-direction:column;
}

/* 模式切换 */
#modeToggleBtn {
  position:absolute; top:14px; left:10px; z-index:999;
  width:56px; padding:6px 4px; border-radius:50px;
  border:1px solid #4a9eff; background:#fff; color:#4a9eff;
  font-size:.58rem; line-height:1.3; text-align:center; cursor:pointer;
}

/* 标题 */
.header-block { text-align:center; margin-bottom:16px; padding-top:14px; }
h1 { font-size:1.35rem; font-weight:700; color:#0a1a2b; }
h1 .header-logo {
  width:2rem; height:2rem; border-radius:50%; border:1px solid #4a9eff;
  object-fit:cover; vertical-align:-.5rem; margin-right:8px;
}
.header-divider { height:1px; background:#e4ebf3; margin:12px 0; }
.subtitle { font-size:.78rem; color:#7a8fa3; line-height:1.6; }

/* 搜索框 */
.search-box {
  width:100%; padding:10px 16px; border:1px solid #d4dbe5;
  border-radius:50px; font-size:.92rem; background:#fff; outline:none; -webkit-appearance:none;
}
body.simple-mode .search-box { margin-bottom:20px; }
body:not(.simple-mode) .search-box { margin-bottom:14px; }

/* 主卡片 */
.main-card {
  background:#fff; border-radius:8px; padding:20px 22px 18px;
  border:1px solid #d4dbe5;
  width:100%; overflow-x:hidden; flex:1;
}

/* 导航栏 */
.nav-tabs {
  display:flex; gap:6px; margin-bottom:14px;
  justify-content:center; flex-wrap:nowrap; overflow-x:auto;
  -webkit-overflow-scrolling:touch; padding:2px 0;
}
.nav-tabs::-webkit-scrollbar { display:none; }
.nav-tab {
  padding:5px 12px; border:1.5px solid #4a9eff; border-radius:30px;
  background:#fff; color:#4a9eff;
  font-size:.72rem; font-weight:500; cursor:pointer; white-space:nowrap; flex-shrink:0; line-height:1.2;
}
.nav-tab.active { background:#4a9eff; color:#fff; }
.nav-tab:active { transform:scale(.95); }

/* 面板 */
.tab-panel { display:none; width:100%; }
.tab-panel.active { display:block; }

/* ===== 点播列表 ===== */
.api-list { display:flex; flex-direction:column; width:100%; }
.api-item { padding:14px 0; border-bottom:1px solid #e4ebf3; }
.api-item:last-child { border-bottom:none; }
.api-item.hidden { display:none !important; }
.api-item-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.api-item-name { font-size:1rem; font-weight:700; color:#0a1a2b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.api-item-meta { display:flex; align-items:center; gap:8px; font-size:.72rem; white-space:nowrap; flex-shrink:0; }
.badge-new { color:#16a34a; font-weight:600; }
.badge-old { color:#ca8a04; font-weight:600; }
.api-item-urls { display:flex; flex-direction:column; gap:6px; }
.url-line {
  display:flex; align-items:center; gap:8px; padding:6px 14px;
  background:#f4f8fc; border:1px solid #e0e8f0; border-radius:50px; min-width:0;
}
.url-tag { font-size:.68rem; font-weight:600; color:#3a5a7a; background:#d8e8f8; padding:2px 14px; border-radius:50px; white-space:nowrap; flex-shrink:0; }
.url-text { font-size:.78rem; color:#2563eb; word-break:break-all; overflow-wrap:break-word; line-height:1.4; flex:1; min-width:0; }

/* 复制按钮 */
.copy-btn {
  flex-shrink:0; background:#4a9eff; color:#fff; border:none; border-radius:30px;
  padding:0 14px; font-size:.7rem; font-weight:500; cursor:pointer; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, transform .05s; white-space:nowrap; margin-left:auto;
  position:relative; z-index:2; touch-action:manipulation; -webkit-user-select:none; user-select:none;
}
.copy-btn:active { background:#2a7ed9; transform:scale(.96); }
.copy-btn.copied { background:#3b9b6c; }

.loading { text-align:center; color:#8fa3b8; padding:60px 0; font-size:.88rem; }
.error-msg { text-align:center; color:#dc2626; padding:16px 20px; font-size:.8rem; background:#fef2f2; border:1px solid #fecaca; border-radius:4px; margin:12px 0; word-break:break-all; }

.page-footer { text-align:center; padding:24px 0 10px; font-size:.7rem; color:#8fa3b8; line-height:1.8; margin-top:auto; }

/* 简洁模式 */
body.simple-mode .nav-tabs { display:none !important; }
body.simple-mode #live-panel,
body.simple-mode #download-panel,
body.simple-mode #video-panel,
body.simple-mode #about-panel { display:none !important; }
body.simple-mode #api-panel { display:block !important; }

/* ===== 直播面板 ===== */
#live-panel { overflow-x:hidden; width:100%; }
.live-top-aggregate {
  background:linear-gradient(135deg, #4a9eff 0%, #1e6fda 100%);
  border-radius:16px; padding:18px 20px; margin-bottom:18px; color:#fff;
  box-shadow:0 4px 12px rgba(74,158,255,.3); overflow-x:hidden;
}
.live-top-aggregate h3 { font-size:1.05rem; font-weight:700; margin-bottom:10px; }
.live-top-aggregate .domain-line {
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
  margin-top:10px; display:flex; align-items:center; gap:10px;
  padding:8px 16px; border-radius:50px; min-width:0;
}
.live-top-aggregate .domain-line span { flex:1; font-size:.74rem; font-weight:500; word-break:break-all; overflow-wrap:break-word; }
.live-top-aggregate .copy-btn {
  position:relative; z-index:2; background:rgba(255,255,255,.92); color:#1a4a7a;
  margin-left:0; border-radius:30px; cursor:pointer; touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
}
.live-top-aggregate .copy-btn:active { transform:scale(.96); background:rgba(255,255,255,1); }
.live-top-aggregate .copy-btn.copied { background:#d1f5e0; color:#0a6a3a; }
.live-top-aggregate .domain-line span { pointer-events:none; }
.live-list { display:flex; flex-direction:column; width:100%; }
.live-item { padding:14px 0; border-bottom:1px solid #e4ebf3; }
.live-item:last-child { border-bottom:none; }
.live-item.hidden { display:none !important; }
.live-item-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.live-item-name { font-size:1rem; font-weight:700; color:#0a1a2b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.live-item-meta { display:flex; align-items:center; gap:8px; font-size:.72rem; white-space:nowrap; flex-shrink:0; }
.live-badge-new { color:#16a34a; font-weight:600; }
.live-badge-old { color:#ca8a04; font-weight:600; }
.live-item-urls { display:flex; flex-direction:column; gap:6px; }
.live-url-line {
  background:#f4f8fc; border:1px solid #e0e8f0; border-radius:8px;
  padding:10px 14px; display:flex; flex-direction:column; gap:6px; width:100%; min-width:0;
}
.live-info-inline { display:flex; align-items:center; gap:6px; font-size:.65rem; color:#7a8fa3; line-height:1.4; flex-wrap:wrap; word-break:break-all; }
.live-info-inline .sep { color:#b8c8d8; }
.live-url-body { display:flex; align-items:center; gap:8px; min-width:0; }
.live-url-tag { font-size:.68rem; font-weight:600; color:#3a5a7a; background:#d8e8f8; padding:2px 14px; border-radius:50px; white-space:nowrap; flex-shrink:0; }
.live-url-text { font-size:.78rem; color:#2563eb; word-break:break-all; overflow-wrap:break-word; line-height:1.4; flex:1; min-width:0; }

/* ===== 下载面板 ===== */
#download-panel { overflow-x:hidden; width:100%; }
#downloads-content { width:100%; overflow-x:hidden; }
#downloads-content.has-sidebar {
  display:flex; flex-direction:row; gap:12px; align-items:flex-start;
}
.dl-sidebar {
  flex:0 0 auto; width:96px;
  display:flex; flex-direction:column; gap:8px;
  padding:4px 2px 4px 0;
  position:sticky; top:0; align-self:flex-start;
  max-height:72vh; overflow-y:auto;
}
.dl-side-btn {
  width:100%; padding:11px 6px;
  border:1.5px solid #4a9eff; border-radius:12px;
  background:#fff; color:#4a9eff;
  font-size:.76rem; font-weight:600; line-height:1.3;
  cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  word-break:break-word;
  transition:background .15s, color .15s, transform .05s;
}
.dl-side-btn .dl-side-icon { font-size:1.15rem; line-height:1; }
.dl-side-btn.active { background:#4a9eff; color:#fff; }
.dl-side-btn:active { transform:scale(.96); }
.dl-body { flex:1; min-width:0; }
.dl-group { display:none; width:100%; }
.dl-group.active { display:block; }
.dl-group-title { font-size:.95rem; font-weight:600; color:#0b1e33; margin-bottom:2px; }
.dl-group-desc { font-size:.7rem; color:#8b9eb0; margin-bottom:10px; }
/* 下载卡片列表 —— 与快链模块 .online-list 对齐 */
.dl-cards {
  display:flex; flex-direction:column;
  gap:10px; width:100%; max-width:100%; overflow:hidden;
}
.download-card {
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid #e4ebf3; border-radius:10px;
  padding:10px 12px; text-decoration:none; color:inherit;
  transition:border-color .15s, box-shadow .15s;
  min-width:0; width:100%;
}
.download-card:active {
  border-color:#4a9eff;
  box-shadow:0 2px 8px rgba(74,158,255,.15);
}
.download-card.hidden { display:none !important; }

/* 左侧图标 */
.dl-item-icon {
  flex-shrink:0; width:44px; height:44px; border-radius:10px;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:#f0f3f8;
}
.dl-item-icon img { width:100%; height:100%; object-fit:cover; border-radius:10px; }
.dl-item-icon .site-ph { font-size:1.2rem; font-weight:700; color:#4a9eff; }

/* 中间文字 */
.dl-item-info {
  flex:1; min-width:0;
  display:flex; flex-direction:column; justify-content:center;
}
.dl-item-name {
  font-size:.82rem; font-weight:600; color:#0a1a2b;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dl-item-desc {
  font-size:.68rem; color:#8b9eb0; margin-top:3px; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* 右侧下载按钮 */
.dl-item-btn {
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  gap:4px;
  height:32px; padding:0 14px;
  background:#4a9eff; color:#fff;
  border:none; border-radius:30px;
  font-size:.7rem; font-weight:500; line-height:1;
  cursor:pointer; white-space:nowrap;
  transition:background .15s, transform .05s;
}
.dl-item-btn:active { background:#2a7ed9; transform:scale(.96); }

/* 大屏：两列 */
@media (min-width:600px) {
  .dl-cards {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }
}

@media (max-width:600px) {
  #downloads-content.has-sidebar { gap:8px; }
  .dl-sidebar { width:72px; gap:6px; max-height:66vh; }
  .dl-side-btn { padding:9px 3px; font-size:.66rem; border-radius:10px; }
  .dl-side-btn .dl-side-icon { font-size:.95rem; }
  .dl-item-icon { width:40px; height:40px; }
  .dl-item-btn { height:30px; padding:0 12px; font-size:.66rem; }
}

/* ===== 更多面板（k.html 同步版） ===== */
#more-panel { overflow-x:hidden; width:100%; }
#more-content { width:100%; overflow-x:hidden; }
#more-content.has-sidebar {
  display:flex; flex-direction:row; gap:12px; align-items:flex-start;
}
.more-group { display:none; width:100%; }
.more-group.active { display:block; }

/* 快链 - 列表布局 */
.online-list {
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}

.online-item {
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid #e4ebf3;
  border-radius:10px;
  padding:12px 14px;
  text-decoration:none;
  color:inherit;
  transition:border-color .15s, box-shadow .15s;
  min-width:0;
  width:100%;
}

.online-item:active {
  border-color:#4a9eff;
  box-shadow:0 2px 8px rgba(74,158,255,.15);
}

.online-item-icon {
  flex-shrink:0;
  width:48px;
  height:48px;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f0f3f8;
}

.online-item-icon img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
}

.online-item-icon .site-ph {
  font-size:1.2rem;
  font-weight:700;
  color:#4a9eff;
}

.online-item-info {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.online-item-name {
  font-size:.82rem;
  font-weight:600;
  color:#0a1a2b;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.online-item-desc {
  font-size:.68rem;
  color:#8b9eb0;
  margin-top:3px;
  line-height:1.4;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 大屏：自适应多列 */
@media (min-width:600px) {
  .online-list {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:10px;
  }
}

/* 超大屏最多2列 */
@media (min-width:1100px) {
  .online-list {
    grid-template-columns:repeat(2, 1fr);
  }
}

/* ===== 快链面板 - 左侧按钮分组 ===== */
#video-content.has-sidebar {
  display:flex; flex-direction:row; gap:12px; align-items:flex-start;
}
.vd-sidebar {
  flex:0 0 auto; width:96px;
  display:flex; flex-direction:column; gap:8px;
  padding:4px 2px 4px 0;
  position:sticky; top:0; align-self:flex-start;
  max-height:72vh; overflow-y:auto;
}
.vd-side-btn {
  width:100%; padding:11px 6px;
  border:1.5px solid #4a9eff; border-radius:12px;
  background:#fff; color:#4a9eff;
  font-size:.76rem; font-weight:600; line-height:1.3;
  cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  word-break:break-word;
  transition:background .15s, color .15s, transform .05s;
}
.vd-side-btn .vd-side-icon { font-size:1.15rem; line-height:1; }
.vd-side-btn.active { background:#4a9eff; color:#fff; }
.vd-side-btn:active { transform:scale(.96); }
.vd-body { flex:1; min-width:0; }
.vd-group { display:none; width:100%; }
.vd-group.active { display:block; }
.vd-group-title { font-size:.95rem; font-weight:600; color:#0b1e33; margin-bottom:2px; }
.vd-group-desc { font-size:.7rem; color:#8b9eb0; margin-bottom:10px; }

/* 常用工具 - 紧凑网格 */
.tools-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:8px;
  width:100%;
}
.tool-chip {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 12px;
  background:#fff; border:1px solid #e4ebf3; border-radius:10px;
  text-decoration:none; color:#0a1a2b;
  font-size:.74rem; font-weight:500; line-height:1.3;
  text-align:center;
  transition:border-color .15s, box-shadow .15s, background .15s;
  min-width:0;
}
.tool-chip:active {
  border-color:#4a9eff;
  background:#f0f7ff;
  box-shadow:0 2px 8px rgba(74,158,255,.15);
}
.tool-chip .tool-icon { font-size:.9rem; flex-shrink:0; }

@media (max-width:600px) {
  #video-content.has-sidebar { gap:8px; }
  .vd-sidebar { width:72px; gap:6px; max-height:66vh; }
  .vd-side-btn { padding:9px 3px; font-size:.66rem; border-radius:10px; }
  .vd-side-btn .vd-side-icon { font-size:.95rem; }
  .tools-grid { grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:6px; }
  .tool-chip { padding:8px 8px; font-size:.68rem; }
}

/* ===== 关于面板 ===== */
#about-panel > div { background:#f8fafc !important; border-radius:8px !important; padding:16px 18px !important; margin-bottom:14px !important; border:1px solid #e4ebf3 !important; }
#about-panel h3 { font-size:.9rem !important; margin-bottom:10px !important; }
#about-panel p, #about-panel li { font-size:.75rem !important; line-height:1.7 !important; }
#about-panel > div > div:not(#about-domains-list) { background:#fff !important; border:1px solid #e4ebf3 !important; border-radius:50px !important; padding:8px 16px !important; margin-top:8px !important; }
#about-domains-list { background:transparent !important; padding:0 !important; border:none !important; border-radius:0 !important; margin-top:0 !important; }

/* ===== 合作共创 ===== */
.contributor-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:12px; }
@media (min-width:600px) { .contributor-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:960px) { .contributor-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); } }
.contributor-card {
  background:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.6);
  border-radius:12px;
  padding:12px 14px;
  min-width:0;
  width:100%;
}
.contributor-card.hidden { display:none !important; }

/* 透明无边框隐形卡片：固定创作者信息内部布局 */
.contributor-inner-card {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-width:0;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  box-sizing:border-box;
}

.contributor-avatar {
  width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0;
  background:linear-gradient(135deg,#4a9eff,#1e6fda); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.85rem;
}
.contributor-info { flex:1; min-width:0; }
.contributor-name {
  font-size:.82rem; font-weight:600; color:#0a1a2b;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.contributor-role {
  display:inline-block; margin-top:4px; font-size:.6rem; font-weight:500;
  color:#4a9eff; background:#e8f2ff; padding:2px 10px; border-radius:50px;
  max-width:100%; overflow-wrap:break-word; word-break:break-word;
}
.contributor-desc {
  margin-top:6px; font-size:.68rem; color:#7a8fa3; line-height:1.4;
  overflow-wrap:break-word; word-break:break-word;
}
.contributor-social {
  margin-top:6px; font-size:.68rem; color:#4a9eff;
  overflow-wrap:break-word; word-break:break-word;
}

/* ============================================================
   移动端（≤600px）
   ============================================================ */
@media (max-width: 600px) {
  body { padding: 14px 8px 6px; }
  #modeToggleBtn { top:10px; left:6px; width:48px; font-size:.52rem; padding:4px 2px; }
  .main-card { padding:14px 14px 12px; }
  .header-block { padding-top:10px; margin-bottom:12px; }
  h1 { font-size:1.15rem; }
  h1 .header-logo { width:1.7rem; height:1.7rem; vertical-align:-.4rem; }
  .nav-tabs { gap:4px; margin-bottom:10px; justify-content:space-between; flex-wrap:nowrap; }
  .nav-tab { flex:1; text-align:center; padding:4px 0; font-size:.95rem; border-radius:24px; white-space:nowrap; }
  .api-item, .live-item { padding:12px 0; }
  .api-item-name, .live-item-name { font-size:.92rem; }
  .url-line { padding:6px 10px; gap:6px; }
  .url-tag, .live-url-tag { font-size:.62rem; padding:2px 10px; }
  .url-text, .live-url-text { font-size:.72rem; }
  .copy-btn { font-size:.62rem; padding:0 10px; height:24px; }
  .live-top-aggregate { padding:14px 16px; }
  .live-url-line { padding:8px 10px; }
  .live-url-body .live-url-tag { font-size:.62rem; padding:2px 10px; }
  .live-url-body .live-url-text { font-size:.72rem; }
  .live-info-inline { font-size:.6rem; }
  .contributor-grid { grid-template-columns:repeat(2,1fr) !important; gap:8px; }
  .contributor-card { padding:8px 10px; }
  .contributor-inner-card { gap:8px; }
  .contributor-avatar { width:36px; height:36px; font-size:.75rem; }
  .contributor-name { font-size:.78rem; }
  .contributor-role { font-size:.58rem; padding:2px 8px; }
  .contributor-desc { font-size:.65rem; line-height:1.35; }
  #more-content.has-sidebar { gap:8px; }
  #more-content .dl-sidebar { width:72px; gap:6px; max-height:66vh; }
  #more-content .dl-side-btn { padding:9px 3px; font-size:.66rem; border-radius:10px; }
  #more-content .dl-side-btn .dl-side-icon { font-size:.95rem; }
}

/* ===== 移动端优化（触摸目标 >= 40px）===== */
@media (max-width: 640px) {
  .copy-btn, .dl-side-btn, .nav-tab, button, a.btn {
    min-height: 40px;
    min-width: 40px;
    padding: 10px 14px;
  }
  .live-item, .api-item, .more-group {
    margin-bottom: 12px;
  }
  .live-url-text, .api-url-text {
    word-break: break-all;
    overflow-wrap: anywhere;
  }
  /* 防止 iOS 输入框放大 */
  input, select, textarea { font-size: 16px; }
  /* 顶栏留出安全区 */
  body { padding-top: env(safe-area-inset-top); }
}

/* ===== 暗色模式（跟随系统）===== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1419; --card: #1a2028; --text: #e6edf3;
    --muted: #8b949e; --border: #2d333b; --accent: #4a9eff;
  }
  body { background: var(--bg); color: var(--text); }
  .main-card, .dl-sidebar, .dl-body, .live-item, .api-item,
  .more-group, .online-item {
    background: var(--card);
    border-color: var(--border);
  }
  .subtitle, .live-item-meta, .api-item-meta { color: var(--muted); }
  .live-url-text, .api-url-text, .online-item-name { color: var(--text); }
  input, select, textarea {
    background: var(--card); color: var(--text); border-color: var(--border);
  }
  a { color: var(--accent); }
  .loading, .error-msg { color: var(--muted); }
  /* 顶部渐变在暗色下压暗，避免刺眼 */
  .live-top-aggregate, .dl-top-aggregate { filter: brightness(.85); }
}
