/* ── 本地运行提示 Banner ── */
#local-run-banner {
  position:fixed; bottom:-160px; left:50%; transform:translateX(-50%);
  width:min(680px,94vw); background:#1e1810; color:#f3ead8;
  border-radius:12px; padding:18px 20px; display:flex; gap:14px; align-items:flex-start;
  box-shadow:0 8px 32px rgba(0,0,0,.45); z-index:9999;
  transition:bottom .35s cubic-bezier(.22,1,.36,1);
}
#local-run-banner.show { bottom:24px; }
#local-run-banner.flash { animation:lrb-flash .3s ease; }
@keyframes lrb-flash { 0%,100%{opacity:1} 50%{opacity:.4} }
.lrb-icon { font-size:28px; line-height:1; padding-top:2px; flex-shrink:0; }
.lrb-body { flex:1; min-width:0; }
.lrb-title { font-weight:700; font-size:14px; margin-bottom:4px; color:#f3ead8; }
.lrb-desc  { font-size:12px; color:#b8a88a; margin-bottom:8px; }
.lrb-code  {
  background:#0d0a07; border-radius:7px; padding:8px 12px;
  font-family:'Menlo','Courier New',monospace; font-size:12px; color:#88c97e;
  white-space:pre; overflow-x:auto; line-height:1.7;
}
.lrb-close {
  background:none; border:none; color:#8a7a62; cursor:pointer;
  font-size:16px; padding:2px 4px; flex-shrink:0; line-height:1;
  transition:color .15s;
}
.lrb-close:hover { color:#f3ead8; }

:root {
  --bg:      #f3ead8;
  --paper:   #faf6ee;
  --border:  #cfc0a0;
  --ink:     #1e1810;
  --muted:   #8a7a62;
  --accent:  #7a4e22;
  --hot:     #b86020;
  --sidebar: #ede3cf;
  --hover:   #e2d5bf;
  --danger:  #8b2020;
  --r: 5px;
  --shadow: 0 2px 16px rgba(50,25,5,.13);
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  background:var(--bg); color:var(--ink);
  height:100vh; display:flex; flex-direction:column; overflow:hidden;
  font-size:13px;
}

/* ── 顶栏 ── */
.topbar {
  height:48px; background:#211408;
  display:flex; align-items:center; padding:0 18px; gap:18px;
  flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.35); z-index:10;
}
.logo { color:#d4b07a; font-size:16px; font-weight:700; letter-spacing:.04em; white-space:nowrap; min-width:130px; }
.logo em { color:#e89030; font-style:normal; }
.tabs { display:flex; gap:2px; flex:1; }
.tab {
  background:transparent; border:none; color:rgba(212,176,122,.55);
  font-size:13px; padding:5px 14px; border-radius:var(--r);
  cursor:pointer; transition:all .15s; font-family:inherit;
}
.tab:hover  { background:rgba(255,255,255,.08); color:#d4b07a; }
.tab.active { background:rgba(255,255,255,.16); color:#fff; font-weight:500; }
.topbar-right { display:flex; align-items:center; gap:6px; color:rgba(212,176,122,.5); font-size:12px; margin-left:auto; }
.dot-on  { width:7px; height:7px; border-radius:50%; background:#5cb85c; box-shadow:0 0 5px #5cb85c; flex-shrink:0; }
.dot-off { width:7px; height:7px; border-radius:50%; background:#666; flex-shrink:0; }

/* ── 主体 ── */
.main { flex:1; overflow:hidden; }
.tab-panel { display:none; height:100%; }
.tab-panel.active { display:flex; }

/* ── 侧边栏 ── */
.sidebar { width:268px; flex-shrink:0; background:var(--sidebar); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
.sb-block { border-bottom:1px solid var(--border); display:flex; flex-direction:column; }
.sb-block.grow { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.sb-title {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); padding:8px 12px 6px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(0,0,0,.04); flex-shrink:0; border-bottom:1px solid var(--border);
}

/* ── 版式列表 ── */
.layout-list { padding:5px; overflow-y:auto; max-height:150px; }
.li {
  padding:7px 9px; border-radius:var(--r); cursor:pointer;
  border:1px solid transparent; transition:all .15s; margin-bottom:3px;
}
.li:hover { background:var(--hover); border-color:var(--border); }
.li.active { background:var(--hot); color:#fff; }
.li-id   { font-weight:600; font-size:13px; }
.li-meta { font-size:11px; opacity:.75; margin-top:1px; }

/* ── 参数分组 ── */
.param-groups { flex:1; overflow-y:auto; padding:5px 7px 14px; }
.pg { margin-bottom:5px; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.pg-head {
  background:rgba(0,0,0,.05); padding:6px 10px;
  font-size:11px; font-weight:700; color:var(--accent);
  cursor:pointer; display:flex; justify-content:space-between; user-select:none;
}
.pg-body { padding:8px 10px; background:var(--paper); }
.pg-body.closed { display:none; }
.pf { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.pf:last-child { margin-bottom:0; }
.pf label { width:80px; flex-shrink:0; font-size:11px; color:var(--muted); }
.pf input, .pf select {
  flex:1; min-width:0; background:var(--bg);
  border:1px solid var(--border); border-radius:4px;
  padding:4px 6px; font-size:12px; color:var(--ink); font-family:inherit;
}
.pf input:focus, .pf select:focus { outline:2px solid var(--hot); border-color:transparent; }
.pf input[type=color] { height:26px; padding:2px 3px; cursor:pointer; }
.pf-color { display:flex; gap:4px; flex:1; }
.pf-color input[type=text] { flex:1; }
.pf-color input[type=color] { width:34px; flex-shrink:0; }

/* ── 按钮 ── */
.mbtn {
  background:var(--hover); border:1px solid var(--border); border-radius:var(--r);
  padding:4px 10px; font-size:12px; cursor:pointer; font-family:inherit;
  color:var(--ink); transition:all .15s; white-space:nowrap;
}
.mbtn:hover { background:var(--border); }
.mbtn.primary { background:var(--hot); color:#fff; border-color:var(--hot); }
.mbtn.primary:hover { background:#9a4e15; }
.mbtn.danger  { background:transparent; color:var(--danger); border-color:var(--danger); }
.mbtn.danger:hover { background:var(--danger); color:#fff; }

/* ── 预览区域 ── */
.preview-wrap { flex:1; display:flex; flex-direction:column; overflow:hidden; background:#c8bfb0; min-width:0; }
.preview-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 14px; background:var(--sidebar); border-bottom:1px solid var(--border); flex-shrink:0;
}
.bar-label { font-size:12px; color:var(--muted); }
.bar-hint  { font-size:12px; color:var(--muted); }
.spinner {
  width:14px; height:14px; border:2px solid rgba(180,100,30,.3);
  border-top-color:var(--hot); border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.preview-body { flex:1; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:14px; align-items:center; }
.preview-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--muted); }
.empty-icon  { font-size:48px; margin-bottom:12px; opacity:.5; }
.empty-title { font-size:16px; font-weight:600; margin-bottom:6px; color:#6a5838; }
.empty-desc  { font-size:13px; text-align:center; line-height:1.7; max-width:340px; }

.page-card {
  background:#fff; box-shadow:var(--shadow), 0 0 0 1px rgba(0,0,0,.1);
  flex-shrink:0; position:relative;
}
.page-card img { display:block; max-width:100%; height:auto; }
.page-label { position:absolute; top:6px; left:8px; background:rgba(0,0,0,.45); color:#fff; font-size:11px; padding:2px 7px; border-radius:3px; }

.status-bar { padding:5px 14px; background:var(--sidebar); border-top:1px solid var(--border); font-size:11px; color:var(--muted); flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── 图片标注 ── */
.upload-zone {
  margin:8px; border:2px dashed var(--border);
  border-radius:var(--r); padding:18px; text-align:center; cursor:pointer;
  background:var(--paper); transition:all .18s;
}
.upload-zone:hover, .upload-zone.over { border-color:var(--hot); background:var(--hover); }
.anno-btn {
  background:var(--paper); border:1px solid var(--border); border-radius:var(--r);
  padding:6px 10px; font-size:12px; text-align:left; cursor:pointer;
  font-family:inherit; color:var(--ink); transition:all .15s;
}
.anno-btn:hover  { background:var(--hover); }
.anno-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.anno-tip {
  font-size:11px; color:var(--muted); padding:1px 10px 5px;
  line-height:1.5; border-bottom:1px dashed var(--border); margin-bottom:2px;
}
.dirty-dot { color:#c06020; font-size:13px; line-height:1; }
.anno-key { color:var(--hot); font-weight:600; }
#anno-body { flex:1; overflow:auto; padding:20px; display:flex; align-items:flex-start; justify-content:center; background:#c0b8ac; }

.image-gallery {
  flex:1; overflow-y:auto; overflow-x:hidden;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:6px;
  padding:8px; align-content:start;
}
.ig-item {
  position:relative; aspect-ratio:1; border:2px solid transparent;
  border-radius:var(--r); background:var(--paper);
  cursor:pointer; overflow:hidden; transition:all .15s;
}
.ig-item:hover { border-color:var(--border); }
.ig-item.selected { border-color:var(--hot); box-shadow:0 0 0 1px var(--hot); }
.ig-item.selected::after {
  content:"✓"; position:absolute; top:2px; right:2px;
  width:18px; height:18px; border-radius:50%; background:var(--hot);
  color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center;
}
.ig-item img { width:100%; height:100%; object-fit:cover; display:block; }
.ig-label {
  position:absolute; bottom:0; left:0; right:0; padding:3px 5px;
  background:rgba(30,24,16,.7); color:#fff; font-size:10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.empty-tip {
  grid-column:1 / -1; text-align:center; color:var(--muted);
  font-size:12px; padding:20px 10px; line-height:1.8;
}

.adv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; padding:10px 18px 24px; }
.adv-card { background:var(--paper); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.adv-card:hover { box-shadow:0 4px 24px rgba(50,25,5,.2); }
.adv-head { padding:9px 13px; background:var(--hover); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:13px; }
.adv-tag { font-size:11px; font-weight:400; background:var(--hot); color:#fff; padding:2px 8px; border-radius:10px; }
.adv-thumb { padding:10px; display:flex; justify-content:center; background:#c8bfb0; }
.adv-thumb canvas { max-width:100%; }
.adv-desc { padding:8px 12px; font-size:12px; color:var(--muted); line-height:1.7; border-top:1px solid var(--border); }
.adv-footer { padding:8px 12px; display:flex; gap:6px; border-top:1px solid var(--border); background:var(--sidebar); }

/* ── 弹窗 ── */
.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; z-index:200;
  display:none;  /* 默认隐藏 */
}
.overlay.show { display:flex; }
.modal { background:var(--paper); border-radius:var(--r); padding:22px; width:380px; box-shadow:0 8px 40px rgba(0,0,0,.3); }
.modal-title { font-size:15px; font-weight:700; margin-bottom:14px; }
.modal-field { margin-bottom:12px; }
.modal-field label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.modal-field input, .modal-field select { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:7px 9px; font-size:13px; font-family:inherit; color:var(--ink); }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* ── Toast ── */
#toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:#1e1408; color:#e8d4a8; padding:9px 22px; border-radius:var(--r); font-size:13px; z-index:999; box-shadow:0 4px 20px rgba(0,0,0,.3); pointer-events:none; opacity:0; transition:opacity .3s; }

/* ── 滚动条 ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }