* { box-sizing: border-box; }
:root {
  --bg: #f7f5f1;
  --panel: #ffffff;
  --ink: #2b2a28;
  --muted: #8a857d;
  --line: #e6e1d8;
  --accent: #b85c38;
  --perf: #d8862b;
  --scene: #3a7bd5;
  --sub: #7a63d8;
}
html, body { margin: 0; height: 100%; }
body {
  display: flex;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* ── 侧栏 ── */
#sidebar {
  width: 300px;
  flex: none;
  height: 100vh;
  overflow-y: auto;
  padding: 16px;
  background: var(--panel);
  border-right: 1px solid var(--line);
}
#sidebar h1 { font-size: 18px; margin: 0 0 12px; color: var(--accent); }
#sidebar section { margin-bottom: 20px; }
#sidebar h2 { font-size: 13px; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
#sidebar input[type="text"], #sidebar input[type="password"], #sidebar select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 13px; background: #fcfbf9;
}
#sidebar label.hint { display: block; margin: 8px 0 3px; }
.btn-row { display: flex; gap: 6px; margin-top: 6px; }
button {
  padding: 7px 12px; border: none; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 13px; background: var(--accent); color: #fff;
}
button.secondary { background: #6b675f; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button.link { background: none; color: var(--muted); padding: 0 4px; font-size: 14px; }
button:disabled { opacity: 0.5; cursor: default; }
.hint { font-size: 12px; color: var(--muted); margin: 6px 0; line-height: 1.5; }
.status { font-size: 12px; padding: 8px; border-radius: 6px; background: #fdf0e7; color: #9a4a1f; }
.bookmarklet {
  display: inline-block; padding: 7px 12px; border-radius: 6px;
  background: #eee9df; color: var(--ink); text-decoration: none; font-size: 13px;
  border: 1px dashed #c9c2b4; cursor: grab;
}

#script-list { list-style: none; margin: 0; padding: 0; }
#script-list li {
  padding: 8px; border-radius: 6px; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; gap: 6px;
}
#script-list li:hover { background: #f3efe7; }
#script-list li.active { background: #f0e4d8; }
#script-list li .meta { color: var(--muted); font-size: 11px; }
#script-list li .grow { flex: 1; min-width: 0; }
#script-list li .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#script-list li .del { color: var(--muted); background: none; padding: 2px 6px; }
#script-list li .del:hover { color: #c0392b; }
#script-list .empty { color: var(--muted); cursor: default; }

.badge {
  font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #e8f2e8; color: #2f6b2f;
  white-space: nowrap;
}
.badge.warn { background: #fbeee0; color: #a05c1c; }

/* ── 阅读区 ── */
#main { flex: 1; height: 100vh; overflow-y: auto; padding: 24px 32px 80px; }
#reader-header { max-width: 800px; margin: 0 auto 16px; }
.title-row { display: flex; align-items: center; gap: 10px; }
#reader-header h2 { margin: 0; font-size: 22px; }
.desc { color: var(--muted); font-size: 13px; margin: 6px 0; }
.roles-row { display: flex; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
#role-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.role-chip {
  padding: 3px 12px; border-radius: 14px; font-size: 13px; cursor: pointer;
  border: 2px solid transparent; background: #eee; user-select: none;
}
.role-chip.mine { border-color: currentColor; font-weight: 600; }
#ann-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
#ann-controls label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 3px; cursor: pointer; }

#content { display: flex; gap: 20px; justify-content: center; align-items: flex-start; }
#reader { flex: 0 1 800px; min-width: 0; order: 1; background: var(--panel); border-radius: 10px; padding: 32px 36px; border: 1px solid var(--line); }
.empty-state { color: var(--muted); text-align: center; padding: 60px 0; }

/* ── 剧本分析侧栏 ── */
#analysis-panel {
  order: 2; flex: none; width: 280px;
  position: sticky; top: 16px;
  max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px;
}
#analysis-panel > h3 { margin: 0 0 10px; font-size: 15px; color: var(--accent); }
#analysis-panel h4 { margin: 0 0 4px; font-size: 13px; }
#analysis-panel p { margin: 0; font-size: 12.5px; line-height: 1.7; color: #55524c; }
.analysis-overview { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.char-card { margin-bottom: 12px; }

.para { margin: 0 0 10px; line-height: 1.8; }
.narration { color: #6b675f; }
.narration.center { text-align: center; }
.heading { text-align: center; font-weight: 600; margin: 18px 0 10px; }
.prelude {
  text-align: center; font-weight: 600; color: var(--accent);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 8px 0; margin: 24px 0 16px; letter-spacing: 2px;
}
.lyrics { color: #7a756c; font-style: italic; white-space: pre-line; padding-left: 16px; border-left: 3px solid var(--line); }
.boundary { border: none; border-top: 1px dashed var(--line); margin: 20px 0; }
.pill {
  display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 10px;
  background: #f0ece3; color: #7a756c;
}
.pill.bgm { background: #e7eef7; color: #3a6ea8; }
.announce { background: #f8f3e7; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #8a6f3c; }
.script-img { max-width: 100%; border-radius: 8px; }

.dialogue { display: flex; gap: 10px; align-items: baseline; padding: 4px 8px; margin: 0 -8px 2px; border-radius: 6px; border-left: 3px solid transparent; }
.dialogue .role { flex: none; font-weight: 600; white-space: nowrap; }
.dialogue .text { white-space: pre-line; }
.dialogue .voice-tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.dialogue.mine { background: #fdf6ec; border-left-color: currentColor; font-size: 1.06em; }
body.has-mine .dialogue:not(.mine) { opacity: 0.72; }
body.has-mine .dialogue.mine { opacity: 1; }

/* ── 标注 ── */
.ann-bar { margin: 0 0 12px 14px; padding-left: 10px; border-left: 2px solid var(--line); font-size: 12.5px; line-height: 1.7; }
.ann-bar div { color: #6b675f; }
.tag {
  display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 4px; color: #fff; font-size: 11px; margin-right: 6px;
}
.tag-perf { background: var(--perf); }
.tag-scene { background: var(--scene); }
.tag-sub { background: var(--sub); }
body.hide-performance .ann-performance,
body.hide-scene .ann-scene,
body.hide-subtext .ann-subtext { display: none; }
body.ann-collapsed .ann-bar { display: none; }
body.ann-collapsed .dialogue.has-ann .text::after { content: " ◦"; color: var(--accent); cursor: pointer; }
body.ann-collapsed .ann-bar.pinned { display: block; }

/* ── 登录门 ── */
#login-gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
/* 必须显式声明:作者样式的 display:flex 会压过 hidden 属性的 UA 规则 */
#login-gate[hidden] { display: none; }
.login-card {
  width: min(90vw, 340px); text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 32px 28px;
}
.login-card h1 { font-size: 20px; color: var(--accent); margin: 0 0 6px; }
.login-card input {
  width: 100%; padding: 9px 11px; margin: 14px 0 10px;
  border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fcfbf9;
  text-align: center;
}
.login-card button { width: 100%; padding: 9px; }
.login-error { color: #b3392b; font-size: 12px; min-height: 16px; margin: 10px 0 0; }

/* ── 移动端:侧栏变悬浮抽屉 ── */
#sidebar-toggle {
  display: none;
  position: fixed; left: 14px; bottom: 14px; z-index: 35;
  width: 48px; height: 48px; border-radius: 50%;
  font-size: 20px; line-height: 1; padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
#sidebar-mask { display: none; }

@media (max-width: 768px) {
  body { display: block; }
  #sidebar-toggle { display: block; }
  #sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 30;
    width: min(85vw, 320px); height: 100vh;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
  }
  body.sidebar-open #sidebar { transform: none; }
  body.sidebar-open #sidebar-mask {
    display: block; position: fixed; inset: 0; z-index: 25;
    background: rgba(0, 0, 0, 0.35);
  }
  #main { height: auto; min-height: 100vh; padding: 14px 12px 90px; }
  #content { display: block; }
  #analysis-panel { position: static; width: auto; max-height: none; margin-bottom: 14px; }
  #reader { padding: 20px 14px; }
  #ann-controls { gap: 8px; }
}

/* ── 导出 PDF(浏览器打印) ── */
@page { margin: 14mm; }
@media print {
  body { display: block; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #sidebar, #ann-controls, #source-badge, .status, #sidebar-toggle, #sidebar-mask { display: none !important; }
  #main { height: auto; overflow: visible; padding: 0; }
  /* 分析面板(若已生成)作为首页内容印在剧本前 */
  #content { display: block; }
  #analysis-panel { position: static; width: auto; max-height: none; overflow: visible; border: none; padding: 0; margin-bottom: 18px; break-inside: avoid; }
  #reader-header { max-width: none; margin: 0 0 12px; }
  #reader-header h2 { font-size: 20px; }
  .roles-row .hint { display: none; }
  .role-chip { border: 1px solid currentColor; background: transparent !important; }
  #reader { max-width: none; border: none; border-radius: 0; padding: 0; }
  /* 台词与其标注永不跨页拆开 */
  .line-block, .para, .announce, .prelude { break-inside: avoid; }
  /* 打印不降透明度(浅字打出来看不清),保留"我的角色"底色与色条 */
  body.has-mine .dialogue:not(.mine) { opacity: 1; }
  .script-img { max-height: 120mm; }
}