*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue','Microsoft YaHei',sans-serif;background:#000;color:#f5f5f7;min-height:100vh;-webkit-font-smoothing:antialiased}

.topbar{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:200;background:rgba(0,0,0,0.85);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,0.04)}
.topbar .back{font-size:14px;color:#7c4dff;text-decoration:none;cursor:pointer}
.topbar .title{font-size:14px;font-weight:600;color:#f5f5f7;position:absolute;left:50%;transform:translateX(-50%)}
.topbar .topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn-export-pdf{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:8px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(135deg,#7c4dff 0%,#5b8def 100%);border:none;cursor:pointer;font-family:inherit;transition:all .15s;box-shadow:0 1px 3px rgba(124, 77, 255,0.3)}
.btn-export-pdf:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 3px 8px rgba(124, 77, 255,0.4)}
.btn-export-pdf:disabled{opacity:0.55;cursor:wait;transform:none;filter:grayscale(0.3)}
.btn-export-pdf .btn-icon{font-size:14px;line-height:1}
@media(max-width:600px){.btn-export-pdf .btn-text{display:none}.btn-export-pdf{padding:0 10px}}

/* PDF 导出进度遮罩 */
.pdf-export-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.78);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}
.pdf-export-overlay .panel{background:#1d1d1f;border:1px solid #38383a;border-radius:16px;padding:32px 40px;min-width:280px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.6)}
.pdf-export-overlay .spinner{width:36px;height:36px;border:3px solid rgba(124, 77, 255,0.2);border-top-color:#7c4dff;border-radius:50%;margin:0 auto 16px;animation:spin 1s linear infinite}
.pdf-export-overlay .label{font-size:14px;color:#f5f5f7;margin-bottom:6px;font-weight:600}
.pdf-export-overlay .stage{font-size:12px;color:#86868b;line-height:1.6}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* 全屏双栏布局 */
.layout{display:flex;height:calc(100vh - 48px);margin-top:48px}
.sidebar{width:220px;flex-shrink:0;position:sticky;top:48px;height:calc(100vh - 48px);overflow-y:auto;background:#0a0a0c;border-right:1px solid rgba(255,255,255,0.04);padding:20px 0}
.sidebar::-webkit-scrollbar{width:0}
.sidebar .nav-title{font-size:11px;color:#48484a;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:8px 20px;margin-bottom:4px}
.sidebar .nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#86868b;cursor:pointer;transition:all .15s;text-decoration:none;border-left:2px solid transparent}
.sidebar .nav-item:hover{color:#d1d1d6;background:rgba(255,255,255,0.03)}
.sidebar .nav-item.active{color:#f5f5f7;background:rgba(124, 77, 255,0.06);border-left-color:#7c4dff}
.sidebar .nav-item .nav-num{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:rgba(255,255,255,0.04);color:#48484a;flex-shrink:0}
.sidebar .nav-item.active .nav-num{background:#7c4dff;color:#fff}
.sidebar .nav-back{display:flex;align-items:center;gap:6px;padding:12px 20px 16px;font-size:13px;color:#7c4dff;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.04);margin-bottom:8px}
.sidebar .nav-back:hover{color:#60a5fa}

.main-content{flex:1;overflow-y:auto;padding:32px 40px 80px;min-width:0}
.main-content::-webkit-scrollbar{width:6px}
.main-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:3px}
.main-content::-webkit-scrollbar-track{background:transparent}

.page-title{font-size:28px;font-weight:700;color:#f5f5f7;margin-bottom:8px;letter-spacing:-0.5px}
.page-sub{font-size:14px;color:#86868b;margin-bottom:36px}

@media(max-width:800px){
  .sidebar{display:none}
  .main-content{padding:24px 16px 80px}
}

/* Section card */
.section-card{background:#1d1d1f;border-radius:16px;padding:28px;margin-bottom:20px;border:1px solid #2d2d2f}
.section-card h2{font-size:20px;font-weight:600;color:#f5f5f7;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.section-card h2 .num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#7c4dff;color:#fff;font-size:13px;font-weight:700;flex-shrink:0}
.section-card p,.section-card li{font-size:14px;color:#c8c8cc;line-height:1.8}
.section-card ul{list-style:none;padding-left:0}
.section-card ul li{padding:4px 0;border-bottom:1px solid #1a1a1e}
.section-card ul li:last-child{border:none}

/* Tables */
.section-card table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
.section-card th{background:#111;color:#86868b;font-weight:600;padding:10px 12px;text-align:left;border-bottom:1px solid #2d2d2f;white-space:nowrap}
.section-card td{padding:10px 12px;border-bottom:1px solid #1a1a1e;color:#d1d1d6;vertical-align:top;line-height:1.6}
.section-card tr:last-child td{border:none}
.section-card tr:hover td{background:#111}

/* Relation graph */
.relation-graph{position:relative;width:100%;height:560px;margin:20px 0 24px;background:radial-gradient(ellipse at center,#0d1117 0%,#080b10 100%);border-radius:16px;overflow:hidden;cursor:default;border:1px solid rgba(255,255,255,0.04)}
.relation-graph canvas{display:block}
.relation-graph .graph-hint{position:absolute;bottom:12px;right:16px;font-size:11px;color:rgba(255,255,255,0.2)}

/* Highlight */
.highlight{color:#7c4dff;font-weight:500}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:6px;margin:2px 3px 2px 0}
.tag-main{background:#1a1530;color:#a78bfa}
.tag-support{background:#0c1a30;color:#60a5fa}
.tag-minor{background:#1a1505;color:#ffd60a}
.tag-emotion{background:#1a0515;color:#f472b6}

/* Arc */
.arc-item{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid #1a1a1e}
.arc-item:last-child{border:none}
.arc-phase{flex-shrink:0;width:80px;font-size:12px;font-weight:600;color:#86868b}
.arc-content{flex:1}
.arc-content .arc-tone{font-size:13px;color:#a78bfa;margin-bottom:4px}
.arc-content .arc-turn{font-size:12px;color:#ff9f0a}

/* Episode card grid */
.ep-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:700px){.ep-grid{grid-template-columns:1fr}}
.ep-card{background:#111;border-radius:12px;padding:16px;border:1px solid #1a1a1e}
.ep-card .ep-num{font-size:11px;color:#7c4dff;font-weight:700;margin-bottom:4px}
.ep-card .ep-title{font-size:14px;font-weight:600;color:#f5f5f7;margin-bottom:6px}
.ep-card .ep-summary{font-size:12px;color:#86868b;line-height:1.6;margin-bottom:8px}
.ep-card .ep-meta{display:flex;flex-wrap:wrap;gap:6px}
.ep-card .ep-meta span{font-size:11px;padding:2px 8px;border-radius:6px;background:#1d1d1f;color:#86868b}
.ep-card .ep-hook{font-size:12px;color:#ff9f0a;margin-top:6px}

/* Character arc */
.char-arc{padding:10px 0;border-bottom:1px solid #1a1a1e}
.char-arc:last-child{border:none}
.char-arc .char-name{font-size:14px;font-weight:600;color:#f5f5f7;margin-bottom:6px}
.char-arc .arc-flow{display:flex;align-items:center;gap:0;flex-wrap:wrap;font-size:12px}
.char-arc .arc-flow .arc-step{padding:4px 10px;background:#1a1a1e;border-radius:6px;color:#d1d1d6}
.char-arc .arc-flow .arc-arrow{color:#48484a;padding:0 4px}

.fuse-table{font-size:12px}
.fuse-status-open{color:#ffd60a}
.fuse-status-closed{color:#30d158}

.loading-page{text-align:center;padding:100px 0;color:#86868b;font-size:15px}