/* ═══════════════════════════════════════════
   🔴 共享文件 · 修改前必须告知 OP-01
      详见 /COLLABORATION.md
   ═══════════════════════════════════════════
   extend-script.css — 剧本站双栏布局扩展
   仅剧本站引入
   加载顺序：global.css → style.css → extend-base.css → extend-script.css
   ═══════════════════════════════════════════ */

/* ── Tab 切换（剧本站覆盖：带圆角顶部） ── */
.script-site .tab-bar { gap: 6px; }
.script-site .tab-btn {
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-accent);
  white-space: nowrap;
}
.script-site .tab-btn:hover { background: var(--bg-card); }
.script-site .tab-btn.active {
  background: var(--bg-card);
  border-color: var(--border-accent);
  border-bottom: 2px solid var(--bg-card);
  margin-bottom: -2px;
  position: relative;
  z-index: 1;
}

/* ── 折叠面板（剧本站覆盖：动画展开） ── */
.script-site .collapse-body {
  overflow: hidden;
  transition: max-height .3s ease;
  padding: 0 4px;
}
.script-site .collapse-body.shut {
  max-height: 0 !important;
  padding: 0 4px;
}

/* ── 架构卡片网格 ── */
.arch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: var(--space-md);
}
@media (max-width: 768px) { .arch-grid { grid-template-columns: repeat(2, 1fr); } }
.arch-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
  transition: all .2s;
}
.arch-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.arch-card .big { font-size: 2em; font-weight: 900; color: var(--text-header); line-height: 1.1; }
.arch-card .unit { font-size: .36em; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.arch-card .label { font-size: .68em; font-weight: 700; color: var(--text-header); margin-top: 4px; }
.arch-card .desc { font-size: .58em; color: var(--text-muted); margin-top: 2px; }
.arch-card .prog { height: 4px; background: var(--bg-accent); border-radius: 2px; margin-top: var(--space-sm); overflow: hidden; }
.arch-card .prog .fill { height: 100%; border-radius: 2px; transition: width .4s; }

/* ── 仪表盘卡片网格 ── */
.grid6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 20px;
}
@media (max-width: 768px) { .grid6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid6 { grid-template-columns: 1fr; } }
.db-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 16px;
  transition: all .2s;
}
.db-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.db-card .ch { font-size: .72em; font-weight: 800; color: var(--text-header); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; }
.db-card .big { font-size: 2.2em; font-weight: 900; color: var(--text-header); line-height: 1.1; margin-bottom: 8px; }
.db-card .big .unit { font-size: .38em; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.db-card .prog { height: 6px; border-radius: 3px; background: var(--bg-accent); overflow: hidden; margin-bottom: 12px; }
.db-card .prog .fill { height: 100%; border-radius: 3px; transition: width .4s; }
.db-card .prog .fill.done { background: var(--accent-green); background-image: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%); background-size: 200% 100%; animation: barShine 3s ease-in-out infinite; }
.db-card .prog .fill.warn { background: var(--accent-gold); }
.db-card .prog .fill.red { background: var(--accent-red); }
.db-card .sub { font-size: .62em; color: var(--text-muted); line-height: 1.8; }
.db-card .sub .line { display: block; margin: 2px 0; }
.db-card .sub .line.dim { opacity: .7; }
@keyframes barShine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ── 章节卡片 ── */
.chapter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 600px) { .chapter-grid { grid-template-columns: 1fr; } }
.chapter-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: all .2s;
}
.chapter-card:hover { border-color: var(--border-accent); transform: translateX(3px); box-shadow: var(--shadow-sm); }
.ch-num { font-size: 1.2em; font-weight: 900; color: var(--accent-red); min-width: 48px; text-align: center; }
.ch-info { flex: 1; min-width: 0; }
.ch-title { font-weight: 700; font-size: .78em; color: var(--text-header); }
.ch-sub { font-size: .62em; color: var(--text-muted); margin-top: 2px; }
.ch-status { padding: 2px 8px; border-radius: 10px; font-size: .6em; font-weight: 700; flex-shrink: 0; background: rgba(39,174,96,.1); color: var(--accent-green); border: 1px solid rgba(39,174,96,.2); }

/* ── 待办卡片 ── */
.todo-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.todo-cat-title { font-size: .68em; font-weight: 800; color: var(--text-header); margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); letter-spacing: .5px; }
.todo-cat-title:first-child { margin-top: 0; }
.todo-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: .64em; color: var(--text); line-height: 1.6; }
.todo-item.done { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border); }
.todo-mark { flex-shrink: 0; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 3px; font-size: .8em; color: var(--text-muted); background: var(--bg-accent); margin-top: 2px; }
.todo-item.done .todo-mark { color: var(--accent-green); border-color: var(--accent-green); background: rgba(39,174,96,.08); }

/* ── 会话日志 ── */
.log-controls { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.log-controls button { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-accent); color: var(--text); font-size: .62em; cursor: pointer; transition: all .15s; }
.log-controls button:hover { border-color: var(--border-accent); color: var(--text-header); }
.log-list { display: flex; flex-direction: column; gap: 6px; }
.log-item { display: flex; gap: 8px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; font-size: .64em; transition: border-color .2s; align-items: center; }
.log-item:hover { border-color: var(--border-accent); }
.log-item .idx { color: var(--text-muted); font-weight: 700; min-width: 24px; }
.log-item .date { color: var(--accent-gold); font-weight: 700; min-width: 42px; }
.log-item .title { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-item .tag { padding: 1px 6px; border-radius: 8px; font-size: .85em; background: var(--bg-accent); color: var(--text-muted); border: 1px solid var(--border); flex-shrink: 0; }
@media (max-width: 768px) { .log-item { flex-wrap: wrap; } .log-item .title { flex-basis: 100%; order: 2; } }

/* ── D区 · 目录导航（剧本站版） ── */
.script-site .page-toc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
@media (max-width: 768px) { .script-site .page-toc { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .script-site .page-toc { grid-template-columns: 1fr; } }
.toc-item { display: block; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); transition: all .2s; cursor: pointer; }
.toc-item:hover { border-color: var(--border-accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.toc-num { font-weight: 900; color: var(--accent-red); font-size: .85em; }
.toc-title { font-weight: 700; font-size: .78em; color: var(--text-header); margin-left: 4px; }
.toc-desc { font-size: .62em; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

/* ── 移动端优化 ── */
@media (max-width: 600px) {
  .script-site .tab-btn { padding: 8px 12px; font-size: .65em; }
}

/* ═══ B区 · page-hero-actions 常驻渲染规则 ═══ */
.script-site .page-hero-actions {
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 24px 16px 20px;
  margin: 0;
  text-align: center;
  font-size: .62em;
}
.script-site .page-hero-actions h1 {
  width: 100%;
  margin: 0 0 8px;
}
.script-site .page-hero-actions .sub {
  width: 100%;
  margin: 2px 0;
}
/* 防止任何隐藏类覆盖 B区 */
.script-site .page-hero-actions[data-zone="B区"] {
  visibility: visible !important;
  opacity: 1 !important;
}