/* =====================================================================
 * 沐森看板 · 横屏左导航 + 杂志排版（浅绿色系）
 * 署名：筑筑 · 2026-07-28
 * 布局/交互=第一版 · 风格/字体=杂志版 · 配色=浅绿（蓝为图表辅色）
 * ===================================================================== */
:root{
  --bg:#e6efe9;             /* 最外背景 浅薄荷绿 */
  --sidebar:#d7e8dc;        /* 侧边栏底 浅绿 */
  --sidebar-2:#c8dccd;      /* 侧边栏 hover */
  --surface:#f5faf6;        /* 主区纸面 极浅绿白 */
  --surface-2:#eef5f0;      /* 次纸面 */
  --ink:#16302a;            /* 深绿黑主文字 */
  --ink-2:#3a5a4c;          /* 正文 */
  --muted:#6f8c7c;          /* 次文字 */
  --faint:#a6bfae;          /* 淡 */
  --rule:#c5d8ca;           /* 细线 */
  --rule-2:#d8e6db;
  --green:#2d7a5a;          /* 主强调（浅一档的绿，活泼）*/
  --green-deep:#1f5e44;
  --green-soft:#e0efe4;     /* 浅绿高亮底 */
  --blue:#2c6f9e;           /* 蓝（图表辅色）*/
  --gold:#8a6d17;           /* 赭金点缀 */
  --red:#9b3a3a;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",STSong,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"SF Mono",Consolas,"JetBrains Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--serif); background:var(--bg); color:var(--ink);
  font-size:15.5px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--green);color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--faint);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 横屏骨架 ---------- */
.app{display:flex;min-height:100vh}

/* ===== 左侧导航 ===== */
.sidebar{
  width:252px; flex-shrink:0; background:var(--sidebar);
  border-right:1px solid var(--rule); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow:hidden;
}
.brand{padding:22px 22px 16px;border-bottom:1px solid var(--rule-2)}
.brand-name{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink);letter-spacing:.04em}
.brand-sub{font-size:10px;color:var(--muted);letter-spacing:.14em;margin-top:4px;font-style:italic}
.nav-main{padding:12px 0 6px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:10px 22px;
  font-family:var(--serif);font-size:14.5px;color:var(--ink-2);cursor:pointer;
  border-left:3px solid transparent;transition:.12s;
}
.nav-item:hover{background:var(--sidebar-2)}
.nav-item.active{background:var(--green-soft);color:var(--green-deep);border-left-color:var(--green);font-weight:700}
.nav-item .nav-ic{width:18px;text-align:center;color:var(--green);font-size:14px}
.nav-label{padding:16px 22px 8px;font-size:10px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;border-top:1px solid var(--rule-2);margin-top:6px}
.nav-sections{flex:1;overflow-y:auto;padding-bottom:8px}
.sec-item{
  display:flex;align-items:center;gap:9px;padding:8px 22px;
  font-family:var(--serif);font-size:13px;color:var(--ink-2);cursor:pointer;transition:.1s;
}
.sec-item:hover{background:var(--sidebar-2);color:var(--green-deep)}
.sec-item .sec-ic{font-size:13px;width:18px;text-align:center;opacity:.9}
.sec-item .sec-code{font-family:var(--mono);font-size:10px;color:var(--faint);min-width:16px}
.sec-item .sec-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-item .sec-count{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.sec-item.empty .sec-name{color:var(--faint)}
.sec-item.active{background:var(--green-soft);color:var(--green-deep);font-weight:600;box-shadow:inset 3px 0 0 var(--green)}
.side-foot{padding:12px 22px;border-top:1px solid var(--rule-2)}
.quit{font-size:12px;color:var(--muted);cursor:pointer;font-family:var(--serif)}
.quit:hover{color:var(--red)}

/* ===== 右侧主区 ===== */
.main{flex:1;min-width:0;background:var(--surface);display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 40px 12px}
.greet{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink)}
.issue{font-family:var(--serif);font-size:12px;color:var(--muted);font-style:italic;margin-left:14px;letter-spacing:.04em}
.top-right{display:flex;align-items:center;gap:16px}
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:5px;color:var(--faint);pointer-events:none}
.search input{
  border:none;border-bottom:1px solid var(--rule);background:var(--surface-2);
  padding:5px 8px 5px 24px;font-size:12.5px;font-family:var(--serif);outline:none;
  width:160px;color:var(--ink);border-radius:3px 3px 0 0;transition:.15s;
}
.search input:focus{border-bottom-color:var(--green);width:200px;background:#fff}
.search input::placeholder{color:var(--faint);font-style:italic}
.date-pill{font-family:var(--serif);font-size:12px;color:var(--muted);letter-spacing:.03em}

.rule-double{border:none;border-top:1px solid var(--green);border-bottom:1px solid var(--green);height:4px;margin:0 40px}
.rule-thin{border:none;border-top:1px solid var(--rule);margin:0 40px}

/* ---------- 正文区 ---------- */
.view{flex:1;padding:26px 40px 40px;max-width:1200px;width:100%;margin:0 auto}
.loading{padding:80px 0;text-align:center;color:var(--faint);font-style:italic}

/* ---------- 大刊名 ---------- */
.display-title{
  font-family:var(--serif);font-size:48px;font-weight:700;line-height:1.15;
  letter-spacing:.12em;text-align:center;margin:10px 0 4px;color:var(--ink);
}
.dek{text-align:center;color:var(--muted);font-size:14px;font-style:italic;margin-bottom:8px}

/* ---------- 章节标题 ▎ ---------- */
.kicker{display:flex;align-items:center;gap:11px;margin:34px 0 16px}
.kicker::before{content:"";width:3px;height:18px;background:var(--green);flex-shrink:0}
.kicker-text{font-family:var(--serif);font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--ink);white-space:nowrap}
.kicker-line{flex:1;height:1px;background:var(--rule)}
.kicker-meta{font-family:var(--serif);font-size:11px;color:var(--faint);font-style:italic;white-space:nowrap;letter-spacing:.03em}

/* ---------- 分栏数字 ---------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);margin:6px 0 4px}
.stat-col{padding:16px 20px 14px;border-right:1px solid var(--rule)}
.stat-col:last-child{border-right:none}
.stat-lbl{font-size:10.5px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase}
.stat-num{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1.1;margin-top:5px;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.01em}
.stat-num .unit{font-size:13px;color:var(--muted);font-weight:500;margin-left:1px}
.stat-delta{font-size:11px;margin-top:3px;color:var(--green);font-variant-numeric:tabular-nums}
.stat-delta.down{color:var(--red)}
.stat-spark{margin-top:6px}

/* ---------- 点线目录 ---------- */
.leader-list{margin:4px 0}
.leader{display:flex;align-items:baseline;gap:10px;padding:12px 2px;border-bottom:1px solid var(--rule);cursor:pointer;transition:.1s;text-decoration:none;color:var(--ink)}
.leader:hover{background:var(--green-soft)}
.leader:hover .l-title{color:var(--green-deep)}
.leader .l-ic{font-size:14px;width:20px;text-align:center;opacity:.9}
.leader .l-title{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.leader .l-code{font-family:var(--mono);font-size:11px;color:var(--faint);margin-right:6px}
.leader .l-dots{flex:1;border-bottom:1px dotted var(--faint);transform:translateY(-4px);min-width:30px}
.leader .l-meta{font-family:var(--serif);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.leader.empty{cursor:default;color:var(--faint)}
.leader.empty:hover{background:none}
.leader.empty .l-title{color:var(--faint);font-style:italic;font-weight:400}

/* ---------- 图表块 ---------- */
.fig{padding:6px 0 4px}
.fig-caption{font-size:11.5px;color:var(--faint);text-align:center;margin-top:6px;font-style:italic}
.fig-insight{text-align:center;margin-top:12px;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--surface-2);border-radius:2px}
.fig-insight .ins-main{font-family:var(--serif);font-size:17px;color:var(--green-deep);font-weight:700;letter-spacing:.04em}
.fig-insight .ins-sub{font-size:12px;color:var(--muted);margin-top:3px;font-style:italic}

/* ---------- 平台（单列纵向，一行一个不漏）---------- */
.plat-row{display:block}
.plat{display:flex;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule);gap:12px}
.plat-name{font-family:var(--serif);font-weight:600;font-size:14.5px;min-width:64px}
.plat-spark{margin-left:auto;width:64px}
.plat-val{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:64px;text-align:right}

/* ---------- 热门 ---------- */
.hot-list{margin:4px 0}
.hot{display:flex;align-items:baseline;gap:11px;padding:12px 2px;border-bottom:1px solid var(--rule)}
.hot-rank{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums;min-width:14px}
.hot-rank.r1{color:var(--gold)} .hot-rank.r2{color:var(--ink-2)} .hot-rank.r3{color:var(--muted)}
.hot-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hot-dots{flex:1;border-bottom:1px dotted var(--faint);transform:translateY(-4px);min-width:20px}
.hot-meta{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.hot-meta small{color:var(--faint);margin-left:4px}

/* ---------- 返回 / 文章 ---------- */
.back{display:inline-flex;align-items:center;gap:5px;font-family:var(--serif);font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:18px;font-style:italic}
.back:hover{color:var(--green)}
.article-meta{font-size:11.5px;color:var(--faint);letter-spacing:.08em;margin-bottom:4px}
.article-title{font-family:var(--serif);font-size:32px;font-weight:700;line-height:1.25;letter-spacing:.02em;margin-bottom:4px}
.article-byline{font-size:12px;color:var(--muted);font-style:italic;margin-bottom:8px}

/* ---------- prose（首字下沉）---------- */
.prose{margin-top:22px;padding-top:22px;border-top:1px solid var(--rule);font-size:16px;line-height:1.9;color:var(--ink-2);max-width:780px}
.prose>p:first-of-type::first-letter{font-family:var(--serif);font-size:56px;float:left;line-height:.82;padding:6px 10px 0 0;color:var(--green-deep);font-weight:700}
.prose h1{font-family:var(--serif);font-size:24px;margin:0 0 6px;color:var(--ink)}
.prose h2{font-family:var(--serif);font-size:19px;margin:32px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--rule);color:var(--ink)}
.prose h3{font-family:var(--serif);font-size:16px;margin:24px 0 8px;color:var(--ink)}
.prose h4{font-family:var(--serif);font-size:14px;margin:18px 0 6px;color:var(--gold)}
.prose p{margin:13px 0}
.prose strong{color:var(--ink);font-weight:700}
.prose ul,.prose ol{margin:13px 0;padding-left:24px}
.prose li{margin:7px 0}
.prose li::marker{color:var(--green)}
.prose blockquote{margin:18px 0;padding:6px 0 6px 18px;border-left:3px solid var(--green);color:var(--muted);font-style:italic;font-size:15px}
.prose blockquote p{margin:5px 0;color:var(--muted)}
.prose code{font-family:var(--mono);font-size:13px;background:var(--green-soft);padding:1px 5px;border-radius:2px;color:var(--green-deep)}
.prose pre{background:#1c2a24;color:#e7e5e4;padding:16px 19px;border-radius:2px;overflow-x:auto;margin:18px 0;font-size:13px;line-height:1.65;border:1px solid #34473f}
.prose pre code{background:none;color:#a8e6cf;padding:0;font-size:inherit}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.prose th{text-align:left;padding:9px 13px;border-bottom:1px solid var(--ink);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.prose td{padding:9px 13px;border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:top}
.prose tr:last-child td{border-bottom:none}
.prose hr{border:none;text-align:center;margin:30px 0;color:var(--gold);font-size:16px}
.prose hr::before{content:"❦   ❦   ❦";letter-spacing:.3em}

/* ---------- 分组标签（创作流程 / 资料库）---------- */
.nav-group{
  padding:14px 22px 6px;font-size:10px;color:var(--muted);
  letter-spacing:.18em;text-transform:uppercase;font-family:var(--serif);
}
.nav-group:first-child{padding-top:8px}

/* ---------- 总览 · 流程卡（待拍/待剪/已发）---------- */
.flow-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:6px 0}
.flow-card{
  --c:var(--green);display:block;cursor:pointer;text-decoration:none;color:var(--ink);
  padding:18px 20px;background:var(--surface-2);border:1px solid var(--rule);
  border-top:3px solid var(--c);border-radius:2px;transition:.15s;position:relative;
}
.flow-card:hover{background:#fff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(22,48,42,.08)}
.flow-card .fc-stage{font-size:11px;color:var(--c);letter-spacing:.12em;font-weight:700}
.flow-card .fc-name{font-family:var(--serif);font-size:17px;font-weight:700;margin-top:6px}
.flow-card .fc-count{font-family:var(--serif);font-size:34px;font-weight:700;margin-top:10px;color:var(--c);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.flow-card .fc-count small{font-size:13px;color:var(--muted);font-weight:400;margin-left:3px}
.flow-card .fc-go{position:absolute;right:18px;bottom:16px;font-size:12px;color:var(--muted);font-style:italic}
.flow-card:hover .fc-go{color:var(--green)}

/* ---------- 脚本流程行（带时间戳 + 状态按钮）---------- */
.leader.script{flex-wrap:nowrap;align-items:center;gap:14px}
.leader.script .l-title{flex-shrink:0;max-width:46%;cursor:pointer}
.leader.script .l-title:hover{color:var(--green-deep);text-decoration:underline}
.leader.script .ts{
  font-family:var(--serif);font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;
}
.script-action{
  flex-shrink:0;cursor:pointer;font-family:var(--serif);font-size:12.5px;
  color:var(--green-deep);background:var(--green-soft);border:1px solid var(--green);
  padding:4px 13px;border-radius:2px;letter-spacing:.04em;transition:.12s;white-space:nowrap;
}
.script-action:hover{background:var(--green);color:#fff;border-color:var(--green-deep)}
.script-action.revert{background:transparent;color:var(--muted);border-color:var(--rule);font-size:11.5px;padding:3px 10px}
.script-action.revert:hover{background:var(--surface-2);color:var(--ink-2);border-color:var(--muted)}

/* ---------- 密码门 ---------- */
.gate{
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(135deg,#cfe6d6,#e6efe9);
  display:flex;align-items:center;justify-content:center;
}
.gate-card{
  width:320px;padding:42px 34px 34px;background:var(--surface);
  border:1px solid var(--rule);border-top:3px solid var(--green);
  box-shadow:0 12px 44px rgba(22,48,42,.14);text-align:center;border-radius:2px;
}
.gate-brand{font-family:var(--serif);font-size:27px;font-weight:700;color:var(--ink);letter-spacing:.08em}
.gate-sub{font-size:11.5px;color:var(--muted);margin:6px 0 22px;letter-spacing:.06em;font-style:italic}
.gate-input{
  width:100%;padding:12px 14px;font-size:15px;font-family:var(--serif);
  border:1px solid var(--rule);background:#fff;border-radius:2px;outline:none;text-align:center;letter-spacing:.2em;
}
.gate-input:focus{border-color:var(--green)}
.gate-err{font-size:12px;color:var(--red);min-height:18px;margin-top:9px}
.gate-btn{
  width:100%;margin-top:14px;padding:12px;font-family:var(--serif);font-size:15px;
  background:var(--green);color:#fff;border:none;border-radius:2px;cursor:pointer;letter-spacing:.12em;transition:.12s;
}
.gate-btn:hover{background:var(--green-deep)}
.flow-help{
  margin-top:18px;padding:12px 16px;background:var(--surface-2);
  border-left:3px solid var(--green);font-size:12.5px;color:var(--muted);
  font-style:italic;line-height:1.6;border-radius:0 2px 2px 0;
}

/* ---------- 空状态 ---------- */
.empty-state{text-align:center;padding:70px 20px;color:var(--faint)}
.empty-state .big{font-family:var(--serif);font-size:48px;margin-bottom:14px;color:var(--faint)}
.empty-state .em-text{font-style:italic;font-size:14px}

/* ---------- SVG ---------- */
.spark-svg{display:block}
.chart-svg{width:100%;height:240px;display:block;max-width:900px;margin:0 auto}
.orbit-svg{width:200px;height:160px;display:block;margin:0 auto}

/* ---------- 版权页脚 ---------- */
.colophon{margin-top:30px}
.colo-text{text-align:center;font-family:var(--serif);font-size:11px;color:var(--faint);letter-spacing:.12em;padding:10px 0;font-style:italic}

/* ---------- 响应式 ---------- */
@media(max-width:1000px){
  .sidebar{width:210px}
  .view{padding:22px 28px 36px}
  .topbar{padding:14px 28px 10px}
  .rule-double,.rule-thin{margin:0 28px}
}
@media(max-width:760px){
  .app{flex-direction:column}
  .sidebar{width:100%;height:auto;position:relative;flex-direction:row;flex-wrap:wrap;overflow:visible}
  .brand{width:100%;border-bottom:1px solid var(--rule-2)}
  .nav-main{display:flex;width:100%;padding:6px}
  .nav-item{padding:8px 14px;border-left:none;border-bottom:3px solid transparent}
  .nav-item.active{border-left:none;border-bottom-color:var(--green)}
  .nav-label,.nav-sections,.side-foot{display:none}
  .display-title{font-size:32px}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .stat-col:nth-child(2){border-right:none}
  .stat-col:nth-child(1),.stat-col:nth-child(2){border-bottom:1px solid var(--rule)}
  .plat-row{grid-template-columns:1fr}
  .flow-cards{grid-template-columns:1fr}
  .leader.script{flex-wrap:wrap}
  .leader.script .l-title{max-width:100%}
  .article-title{font-size:24px}
}