:root{
  /* AutrePerso DS 桥接 — Writer（Light）· 模块副色紫
     本块将 Writer 局部变量映射到设计系统令牌；
     与 DS 重名的令牌（--bg、--text、--border、--shadow 与 --radius 系列）不再本地定义，直接沿用 DS */
  --module-accent:var(--module-writer);
  --primary:var(--brand);--primary-light:var(--brand-hover);--primary-dark:var(--brand-active);
  --primary-50:var(--brand-soft);--primary-100:var(--brand-soft-strong);--primary-200:#C9D2FD;
  --accent:var(--module-writer);--accent-light:#A78BFA;--accent-dark:#7C3AED;
  --gray:var(--text-2);--gray-light:var(--text-3);--light:var(--surface-2);
  --border-light:var(--surface-2);
  --bg-card:var(--surface-card);--bg-hover:var(--surface-hover);
  --text-soft:var(--text-2);--text-mute:var(--text-3);

  /* z-index 分级体系：替代原先散落的 1/5/10/50/60/100/999/1000/1001/9999/10000/99999 */
  --z-base:1;      --z-raised:5;   --z-content:10;
  --z-sticky:50;   --z-float:60;   --z-header:100;
  --z-dropdown:999;--z-overlay:1000;--z-modal:1001;
  --z-toast:9999;  --z-debug:10000; --z-max:99999;
  --shadow:var(--shadow-sm);
  --shadow-xl:0 20px 50px -12px rgba(11,13,16,.1);
  --radius:var(--radius-md);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
*::-webkit-scrollbar{display:none}
*{-ms-overflow-style:none;scrollbar-width:none}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  background-image:
    radial-gradient(at 0% 0%,color-mix(in srgb,var(--module-accent) 5%,transparent) 0,transparent 50%),
    radial-gradient(at 100% 100%,color-mix(in srgb,var(--module-accent) 4%,transparent) 0,transparent 50%);
  background-attachment:fixed;
  color:var(--text);font-size:var(--text-base);line-height:var(--leading);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;letter-spacing:.01em;
}

/* ============== 按钮 ============== */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 20px;border-radius:var(--radius);border:1px solid var(--border);
  background:var(--bg-card);font-size:13px;font-weight:500;cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);font-family:inherit;color:var(--text-soft);
}
.btn:hover{border-color:var(--primary-light);color:var(--primary);background:var(--primary-50);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:var(--primary);
  color:var(--brand-on);border-color:transparent;
  box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 30%,transparent);
}
.btn-primary:hover{
  background:var(--brand-hover);
  color:var(--brand-on);box-shadow:0 6px 20px color-mix(in srgb,var(--primary) 40%,transparent);
}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:10px}
.btn-lg{padding:12px 24px;font-size:14px;border-radius:var(--radius-md)}
.btn-danger{color:#ef4444;border-color:#fecaca;background:var(--bg-card)}
.btn-danger:hover{background:#fef2f2;border-color:#ef4444;color:#dc2626}
.btn-ghost{border:none;background:transparent;padding:7px 12px;color:var(--text-soft)}
.btn-ghost:hover{background:var(--light);color:var(--text);transform:none;box-shadow:none}
.btn-ai{
  background:var(--module-accent);
  color:#fff;border-color:transparent;
  box-shadow:0 4px 14px color-mix(in srgb,var(--module-accent) 30%,transparent);
}
.btn-ai:hover{
  background:var(--accent-dark);
  color:#fff;box-shadow:0 6px 20px color-mix(in srgb,var(--module-accent) 40%,transparent);
}
.btn-icon{
  width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:none;background:transparent;color:var(--text-soft);
  cursor:pointer;transition:all .15s;font-size:14px;
}
.btn-icon:hover{background:var(--bg-hover);color:var(--text)}

/* ============== 顶部导航 ============== */
.top-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;height:64px;
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(226,232,240,.6);
  position:sticky;top:0;z-index:var(--z-header);
}
.top-nav .brand{
  display:flex;align-items:center;gap:12px;
  font-weight:700;font-size:17px;
  color:var(--text);
  letter-spacing:.02em;
}
/* 品牌标统一用黑白矢量标（brand.css），不再使用带模块色的方块 */
.top-nav-actions{display:flex;gap:8px;align-items:center}

/* ============== 主布局（双栏布局） ============== */
.app-layout{
  display:flex;
  height:calc(100vh - 64px);
  gap:0;
  width:100%;
}

/* 编辑器容器（左侧） */
.editor-container{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
  width:100%;
}

/* ============== 侧栏 ============== */
.sidebar{
  width:290px;background:rgba(255,255,255,.75);
  backdrop-filter:blur(12px);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;
}
.sidebar-header{padding:22px 22px 14px}

/* ============== 侧边栏折叠按钮 ============== */
.sidebar-collapse-btn{
  position:relative;
  flex-shrink:0;
  width:28px;
  min-width:28px;
  height:72px;
  margin-top:calc(50vh - 64px - 36px);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-left:none;
  border-radius:0 14px 14px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:var(--z-sticky);
  transition:all .28s ease;
  box-shadow:2px 4px 12px rgba(0,0,0,.06);
  color:var(--text-mute);
  align-self:flex-start;
}
.sidebar-collapse-btn:hover{
  box-shadow:2px 6px 16px rgba(0,0,0,.1);
  color:var(--primary);
  border-color:var(--primary-light);
}
.sidebar-collapse-btn:active{
  transform:scale(.96);
}
.sidebar-collapse-btn svg{
  transition:transform .28s ease;
  display:block;
}
/* 侧边栏收起时按钮右移（贴在正文左边缘） */
.app-layout.sidebar-collapsed .sidebar-collapse-btn{
  margin-left:0;
  border-radius:0 14px 14px 0;
  box-shadow:2px 4px 12px rgba(0,0,0,.08);
}
.app-layout.sidebar-collapsed .sidebar-collapse-btn svg{
  transform:rotate(180deg);
}
/* 侧边栏收起动画 */
.app-layout .sidebar{
  transition:width .28s ease, min-width .28s ease, padding .28s ease, opacity .28s ease;
  overflow:hidden;
  white-space:nowrap;
}
.app-layout.sidebar-collapsed .sidebar{
  width:0 !important;
  min-width:0 !important;
  padding:0 !important;
  opacity:0;
  border-right-color:transparent;
}
.app-layout.sidebar-collapsed .sidebar *{
  overflow:hidden;
  visibility:hidden;
}
/* 响应式：窗口小于1400px时自动折叠 */
@media(max-width:1400px){
  .app-layout:not(.sidebar-manual-expand) .sidebar{
    width:0 !important;
    min-width:0 !important;
    padding:0 !important;
    opacity:0;
    border-right-color:transparent;
  }
  .app-layout:not(.sidebar-manual-expand) .sidebar *{
    overflow:hidden;
    visibility:hidden;
  }
  .app-layout:not(.sidebar-manual-expand) .sidebar-collapse-btn svg{
    transform:rotate(180deg);
  }
}
.sidebar-header h2{font-size:11px;font-weight:600;color:var(--text-mute);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}

/* ============== 左侧 Explorer（作品资源浏览器） ============== */
.sidebar-explorer{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
}
.explorer-tabs{
  display:flex;
  gap:2px;
  padding:8px 10px 4px;
  flex-wrap:wrap;
}
.sidebar-explorer-tab-btn{
  flex:1;
  min-width:0;
  padding:4px 4px;
  border:none;
  background:transparent;
  border-radius:6px;
  font-size:11px;
  font-weight:500;
  color:var(--text-mute);
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  font-family:inherit;
}
.sidebar-explorer-tab-btn:hover{
  color:var(--text-soft);
  background:var(--bg-hover);
}
.sidebar-explorer-tab-btn.active{
  background:var(--primary-50);
  color:var(--primary);
  font-weight:600;
}
.explorer-content{
  flex:1;
  overflow-y:auto;
  padding:4px 8px 8px;
}
.explorer-loading{
  padding:20px;
  text-align:center;
  color:var(--text-mute);
  font-size:12px;
}
.explorer-empty{
  padding:20px;
  text-align:center;
  color:var(--text-mute);
  font-size:12px;
}
.explorer-group{
  margin-bottom:4px;
}
.explorer-group-title{
  font-size:11px;
  font-weight:600;
  color:var(--text-mute);
  padding:6px 8px 4px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.explorer-item{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:6px;
  cursor:pointer;
  transition:all .12s;
  font-size:13px;
  color:var(--text-soft);
  position:relative;
}
.explorer-item:hover{
  background:var(--bg-hover);
  color:var(--text);
}
.explorer-item.active{
  background:var(--primary-50);
  color:var(--primary);
  font-weight:500;
}
.explorer-item.active::before{
  content:'';
  position:absolute;
  left:0;
  top:4px;
  bottom:4px;
  width:2px;
  background:var(--primary);
  border-radius:0 2px 2px 0;
}
.explorer-item-seq{
  width:18px;
  text-align:right;
  font-size:11px;
  color:var(--text-mute);
  flex-shrink:0;
  font-weight:500;
}
.explorer-item-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:0;
}
.explorer-item-icon{
  font-size:12px;
  flex-shrink:0;
  width:18px;
  text-align:center;
}
.explorer-item-tag{
  font-size:10px;
  padding:1px 6px;
  border-radius:4px;
  background:var(--primary-50);
  color:var(--primary);
  flex-shrink:0;
  white-space:nowrap;
}

/* ============== Explorer 手风琴 ============== */
.explorer-accordion{
  margin-bottom:2px;
}
.explorer-accordion-header{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:6px;
  cursor:pointer;
  transition:all .12s;
  font-size:13px;
  color:var(--text-soft);
  user-select:none;
}
.explorer-accordion-header:hover{
  background:var(--bg-hover);
  color:var(--text);
}
.explorer-accordion-icon{
  font-size:12px;
  flex-shrink:0;
  width:18px;
  text-align:center;
}
.explorer-accordion-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:0;
  font-size:13px;
}
.explorer-accordion-arrow{
  font-size:10px;
  color:var(--text-mute);
  flex-shrink:0;
  transition:transform .2s;
  width:16px;
  text-align:center;
}
.explorer-accordion-body{
  overflow:hidden;
  max-height:0;
  transition:max-height .25s ease;
  padding:0 8px 0 26px;
}
.explorer-accordion-view{
  padding:4px 0;
}
.explorer-accordion-text{
  font-size:12px;
  color:var(--text-soft);
  line-height:1.6;
  white-space:pre-wrap;
  word-break:break-word;
  max-height:200px;
  overflow-y:auto;
  padding:4px 0;
}
.explorer-accordion-edit-hint{
  display:inline-block;
  font-size:11px;
  color:var(--text-mute);
  cursor:pointer;
  padding:2px 6px;
  border-radius:4px;
  margin-top:6px;
  transition:all .12s;
}
.explorer-accordion-edit-hint:hover{
  color:var(--primary);
  background:var(--primary-50);
}
.explorer-accordion-editor{
  padding:4px 0 8px;
}
.explorer-accordion-input{
  width:100%;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:13px;
  font-weight:500;
  outline:none;
  font-family:inherit;
  margin-bottom:6px;
  color:var(--text);
  transition:border .15s;
}
.explorer-accordion-input:focus{
  border-color:var(--primary-light);
  box-shadow:0 0 0 2px rgba(129,140,248,.1);
}
.explorer-accordion-textarea{
  width:100%;
  min-height:80px;
  max-height:200px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:12px;
  line-height:1.6;
  outline:none;
  resize:vertical;
  font-family:inherit;
  color:var(--text);
  transition:border .15s;
}
.explorer-accordion-textarea:focus{
  border-color:var(--primary-light);
  box-shadow:0 0 0 2px rgba(129,140,248,.1);
}
.explorer-accordion-editor-actions{
  display:flex;
  gap:4px;
  margin-top:6px;
}
.explorer-accordion-save-btn{
  padding:4px 12px;
  border:none;
  border-radius:5px;
  background:var(--primary);
  color:#fff;
  font-size:11px;
  font-weight:500;
  cursor:pointer;
  font-family:inherit;
  transition:all .12s;
}
.explorer-accordion-save-btn:hover{
  background:var(--primary-dark);
}
.explorer-accordion-cancel-btn{
  padding:4px 12px;
  border:1px solid var(--border);
  border-radius:5px;
  background:transparent;
  color:var(--text-mute);
  font-size:11px;
  font-weight:500;
  cursor:pointer;
  font-family:inherit;
  transition:all .12s;
}
.explorer-accordion-cancel-btn:hover{
  background:var(--bg-hover);
  color:var(--text);
}

/* 侧栏章节上下文（编辑章节时显示） */
.sidebar-context{
  padding:0 18px 16px;
  border-bottom:1px solid var(--border-light);
  margin-bottom:10px;
  animation:contextSlideIn .25s ease;
}
@keyframes contextSlideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.context-back-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 12px;margin-bottom:12px;
  background:var(--primary-50);
  border:1px solid var(--primary-100);
  border-radius:10px;
  color:var(--primary);
  font-size:12px;font-weight:500;
  cursor:pointer;transition:all .15s;font-family:inherit;
}
.context-back-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.context-back-btn svg{transition:transform .15s}
.context-back-btn:hover svg{transform:translateX(-2px)}
.context-work{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--text-mute);
  margin-bottom:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.context-work .dot{
  display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:var(--primary);flex-shrink:0;
}
.context-work .name{color:var(--text-soft);font-weight:500}
.context-volume{
  display:flex;align-items:center;gap:8px;
  font-size:14px;color:var(--text);
  font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-left:14px;
}
.context-volume-icon{font-size:13px;flex-shrink:0;opacity:.6}
.sidebar-search{position:relative;padding:0 22px 14px}
.sidebar-search input{
  width:100%;padding:10px 14px 10px 38px;
  border:1px solid var(--border);border-radius:var(--radius);
  font-size:13px;outline:none;font-family:inherit;
  background:var(--bg);transition:all .15s;
}
.sidebar-search input:focus{border-color:var(--primary-light);background:var(--bg-card);box-shadow:0 0 0 3px rgba(129,140,248,.08)}
.sidebar-search-icon{
  position:absolute;left:32px;top:50%;transform:translateY(-50%);
  color:var(--text-mute);font-size:14px;pointer-events:none;
  opacity:.6;
}
.work-list{flex:1;overflow-y:auto;padding:4px 14px 14px}
.work-item{
  padding:12px 14px;border-radius:var(--radius);cursor:pointer;
  transition:background .15s;display:flex;align-items:center;gap:12px;
  position:relative;
}
.work-item:hover{background:var(--bg-hover)}
.work-item.active{
  background:linear-gradient(135deg,rgba(129,140,248,.1) 0%,rgba(129,140,248,.06) 100%);
  box-shadow:inset 0 0 0 1px rgba(129,140,248,.15);
}
.work-item.active::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:20px;background:linear-gradient(180deg,var(--primary),var(--primary-dark));
  border-radius:0 3px 3px 0;
}
.work-item-icon{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary-50) 0%,var(--primary-100) 100%);
  color:var(--primary);font-size:15px;font-weight:600;
}
.work-item.active .work-item-icon{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  color:#fff;
}
.work-item .info{flex:1;min-width:0}
.work-item .title{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.work-item .count{font-size:12px;color:var(--text-mute);margin-top:3px}
.work-item .del-btn{
  display:none;width:26px;height:26px;border-radius:8px;border:none;
  background:transparent;color:var(--text-mute);cursor:pointer;font-size:14px;
  transition:all .15s;align-items:center;justify-content:center;
}
.work-item:hover .del-btn{display:inline-flex}
.work-item .del-btn:hover{background:#fee2e2;color:#dc2626}
.sidebar-footer{
  padding:16px 18px;border-top:1px solid var(--border);
  background:linear-gradient(180deg,rgba(248,250,252,.5) 0%,rgba(241,245,249,.7) 100%);
}
.sidebar-footer .btn{width:100%;justify-content:center}

/* ============== 主内容 ============== */
.main-content{flex:1;overflow-y:auto;padding:32px 40px;background:transparent}
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;color:var(--text-mute);gap:20px;padding:40px;
}
.empty-state .icon{
  font-size:64px;opacity:.7;
  width:120px;height:120px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(59,130,246,.08) 0%,rgba(59,130,246,.06) 100%);
  margin-bottom:8px;
}
.empty-state h3{font-size:20px;font-weight:600;color:var(--text)}
.empty-state p{font-size:14px;color:var(--text-mute);text-align:center;max-width:380px;line-height:1.7}
.empty-state .actions{margin-top:8px}

/* ============== 作品详情 ============== */
.work-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:24px;gap:20px;padding:28px 32px;
  background:linear-gradient(135deg,rgba(255,255,255,.9) 0%,rgba(248,250,252,.6) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.work-header::before{
  content:"";position:absolute;top:0;right:0;width:200px;height:200px;
  background:radial-gradient(circle,rgba(59,130,246,.08) 0%,transparent 70%);
  pointer-events:none;
}
.work-title-group{flex:1;min-width:0;position:relative;z-index:var(--z-base)}
.work-title-group h1{font-size:26px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:-.02em;line-height:1.3}
.work-title-group .description{font-size:13px;color:var(--text-soft);line-height:1.6}
.work-stats{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.work-stat{
  font-size:14px;color:var(--text-soft);
}
.work-stat strong{
  color:var(--text);font-weight:700;
  font-variant-numeric:tabular-nums;
}
.work-header-actions{display:flex;gap:8px;flex-shrink:0}
.work-actions{flex-shrink:0;position:relative;z-index:var(--z-base)}
.btn-group{display:flex;gap:6px}

/* ============== Tab 导航 ============== */
.tabs{
  display:flex;gap:6px;padding:4px;
  background:var(--light);border-radius:10px;
  margin-bottom:24px;width:fit-content;
}
.tab{
  padding:8px 18px;border:none;background:transparent;
  font-size:13px;font-weight:500;color:var(--text-soft);
  cursor:pointer;border-radius:8px;
  transition:all .18s;font-family:inherit;
}
.tab:hover{color:var(--text)}
.tab.active{
  color:#fff;
  background:var(--primary);
  font-weight:600;
}

/* ============== 列表视图 ============== */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-header h3{font-size:16px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.section-header .count-badge{
  font-size:11px;padding:2px 8px;border-radius:10px;
  background:rgba(59,130,246,.1);color:var(--primary);font-weight:600;
}

/* ============== 章节列表（树形） ============== */
.volume-block{
  margin-bottom:24px;
  animation:volumeFadeIn .35s ease;
}
@keyframes volumeFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.volume-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-radius:12px;
  background:linear-gradient(135deg,rgba(59,130,246,.06) 0%,rgba(59,130,246,.04) 100%);
  border:1px solid var(--border-light);
  margin-bottom:10px;
}
.volume-title{
  font-size:14px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;
}
.volume-title .vol-icon{
  width:26px;height:26px;border-radius:7px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  color:#fff;font-size:12px;font-weight:700;
  box-shadow:0 2px 6px rgba(99,102,241,.35);
}
.volume-title .vol-seq{
  color:var(--primary-dark);font-weight:700;
}
.volume-title-text{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.volume-title .vol-count{
  font-size:11px;color:var(--text-mute);font-weight:500;
  padding:2px 8px;border-radius:8px;
  background:rgba(255,255,255,.6);
}
.volume-actions{display:flex;gap:4px;flex-shrink:0}
.volume-actions .btn-icon{
  width:28px;height:28px;
  font-size:14px;
}
.volume-actions .btn-icon:hover{
  background:var(--bg-card);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.volume-children{padding-left:14px;border-left:2px dashed var(--border-light);margin-left:18px}
.chapter-card{
  padding:14px 18px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:12px;
  margin-bottom:8px;display:flex;align-items:center;gap:14px;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  cursor:grab;position:relative;
  overflow:hidden;
}
.chapter-card:active{cursor:grabbing}
.chapter-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--primary),var(--primary-dark));
  transform:scaleY(0);transform-origin:center;
  transition:transform .2s ease;
}
.chapter-card:hover{
  border-color:var(--primary-light);
  box-shadow:0 6px 20px rgba(129,140,248,.1);
  transform:translateX(3px);
}
.chapter-card:hover::before{transform:scaleY(1)}
.chapter-card.dragging{
  opacity:.5;
  box-shadow:0 10px 40px rgba(0,0,0,.2);
  transform:scale(1.02) rotate(1deg);
  pointer-events:none;
}
.chapter-card-drag-ghost{
  position:fixed;
  z-index:var(--z-max);
  pointer-events:none;
  opacity:.5;
  transform:translate(-50%,-50%) scale(1.02) rotate(1deg);
  box-shadow:0 10px 40px rgba(0,0,0,.2);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  transition:none;
}
.chapter-card-drag-ghost .chapter-drag-handle,
.chapter-card-drag-ghost .actions{display:none}
.chapter-drag-handle{
  position:absolute;left:2px;top:50%;transform:translateY(-50%);
  color:var(--text-mute);font-size:12px;line-height:1;
  opacity:0;transition:opacity .15s;
  cursor:grab;user-select:none;
}
.chapter-card:hover .chapter-drag-handle{opacity:.5}
.chapter-drag-handle:hover{opacity:1!important}
.chapter-card .seq-badge{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary-50) 0%,var(--primary-100) 100%);
  color:var(--primary);font-weight:700;
  transition:all .2s;
}
.chapter-card:hover .seq-badge{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  color:#fff;
}
.chapter-card .seq-badge .num{font-size:14px;line-height:1.1}
.chapter-card .seq-badge .label{font-size:8px;opacity:.7;text-transform:uppercase;letter-spacing:.05em;margin-top:1px}
.chapter-card .info{flex:1;min-width:0}
.chapter-card .info .name{
  font-size:14px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-bottom:5px;
}
.chapter-card .info .meta{
  font-size:12px;color:var(--text-mute);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.chapter-card .info .meta .word-count{
  display:inline-flex;align-items:center;gap:3px;
  color:var(--primary);font-weight:500;
  padding:2px 8px;border-radius:6px;
  background:rgba(129,140,248,.08);
}
.chapter-card .info .meta .update-info{
  display:inline-flex;align-items:center;gap:3px;
  color:var(--text-mute);
}
.chapter-card .actions{display:flex;gap:4px;flex-shrink:0;opacity:0;transition:opacity .15s}
.chapter-card:hover .actions{opacity:1}

.volume-children.drop-target{
  background:rgba(129,140,248,.05);
  border-radius:8px;
  box-shadow:inset 0 0 0 2px rgba(129,140,248,.3);
}
.chapter-drop-indicator{
  height:3px;
  background:linear-gradient(90deg,var(--primary),var(--primary-light));
  border-radius:2px;
  margin:3px 6px;
  box-shadow:0 0 10px rgba(129,140,248,.6);
  animation:dropIndicatorPulse 1s ease-in-out infinite;
  pointer-events:none;
}
@keyframes dropIndicatorPulse{
  0%,100%{opacity:1;transform:scaleX(1)}
  50%{opacity:.5;transform:scaleX(.95)}
}
.empty-chapter-hint{
  padding:20px 18px;text-align:center;
  color:var(--text-mute);font-size:13px;
  background:rgba(248,250,252,.5);
  border-radius:10px;
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.volume-children:empty{
  min-height:80px;
}
.volume-block-empty .volume-children{
  min-height:80px;
}

/* ============== 编辑器（铺满式无干扰写作） ============== */
.editor-area{
  max-width:1100px;margin:0 auto;
  padding:24px 0 120px;
  animation:editorFadeIn .3s ease;
}
@keyframes editorFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

#editorBackBar{
  max-width:1100px;margin:0 auto 12px;
}

/* 返回章节列表按钮 */
.editor-back-chapters-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  margin:0;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-soft);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  border-radius:8px;
  transition:all .15s;
  font-family:inherit;
  width:fit-content;
  white-space:nowrap;
}
.editor-back-chapters-btn:hover{
  color:var(--primary);
  background:var(--primary-50);
}
.editor-back-chapters-btn svg{
  flex-shrink:0;
}

/* 顶部面包屑 */
.editor-breadcrumb{
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--text-soft);
  margin-bottom:0;flex-wrap:wrap;
  padding:10px 16px 0;
  background:var(--light);
  border-radius:10px 10px 0 0;
}
.editor-breadcrumb .crumb{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--text-soft);font-weight:500;
}
.editor-breadcrumb .sep{opacity:.4;color:var(--text-mute)}
.editor-breadcrumb .back-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 0;color:var(--text-mute);
  font-size:12px;cursor:pointer;transition:color .15s;
  margin-right:4px;background:transparent;border:none;
}
.editor-breadcrumb .back-btn:hover{color:var(--text)}

/* 工具栏 */
.editor-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding:10px 16px 12px;
  margin-bottom:16px;
  background:var(--light);
  border-radius:0 0 10px 10px;
}
.editor-toolbar-section{display:flex;align-items:center;gap:8px}
.editor-toolbar .save-status{
  font-size:12px;color:var(--text-mute);
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:6px;
  background:rgba(248,250,252,.7);
}
.editor-toolbar .save-status.dirty{color:#f59e0b}
.editor-toolbar .save-status.saved{color:#10b981}
.editor-toolbar .save-status .dot{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;display:inline-block;
}
.editor-toolbar .save-status.dirty .dot{animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.editor-stats{
  font-size:12px;color:var(--text-mute);
  display:flex;align-items:center;gap:14px;
}
.editor-stats .stat{display:inline-flex;align-items:center;gap:4px}
.editor-stats .stat strong{color:var(--text);font-weight:600}

/* 标题输入 - 大而醒目，浅灰信纸底 */
.editor-title-input{
  width:100%;padding:24px 32px 20px;
  border:none;
  background:var(--bg-hover);
  border-radius:12px 12px 0 0;
  font-size:32px;font-weight:700;color:var(--text);
  outline:none;font-family:inherit;margin-bottom:0;
  letter-spacing:-.02em;line-height:1.3;
  transition:background .2s;
}
.editor-title-input:focus{background:var(--bg-hover)}
.editor-title-input::placeholder{
  color:var(--text-mute);font-weight:600;opacity:.4;
}

/* 元信息栏 */
.editor-meta{
  display:flex;align-items:center;gap:14px;
  font-size:12px;color:var(--text-mute);
  margin-bottom:8px;
}
.editor-meta .meta-item{
  display:inline-flex;align-items:center;gap:4px;
}

/* 内容区 - 纯净写作空间，浅灰信纸底续接标题 */
.editor-content{
  width:100%;min-height:70vh;padding:28px 32px;
  border:none;
  background:var(--light);
  border-radius:0 0 12px 12px;
  font-size:17px;line-height:2;
  outline:none;resize:none;font-family:inherit;
  color:var(--text);letter-spacing:.01em;
  transition:background .2s;
}
.editor-content:focus{background:var(--bg-hover)}
.editor-content::placeholder{
  color:var(--text-mute);opacity:.4;
}
.editor-content:focus::placeholder{opacity:.25}

/* 沉浸全屏写作 */
.editor-area.fullscreen{
  position:fixed;inset:0;z-index:var(--z-toast);
  background:var(--bg);padding:0;max-width:none;margin:0;
  display:flex;flex-direction:column;animation:fsFadeIn .2s ease;
}
@keyframes fsFadeIn{from{opacity:0}to{opacity:1}}
.editor-area.fullscreen .editor-toolbar{
  padding:12px 40px;margin-bottom:0;flex-shrink:0;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border-light);
  position:sticky;top:0;z-index:var(--z-content);
}
.editor-area.fullscreen .editor-title-input{
  border-radius:0;padding:32px 40px 16px;
  background:transparent;font-size:36px;flex-shrink:0;
}
.editor-area.fullscreen .editor-title-input:focus{background:var(--bg-card)}
.editor-area.fullscreen .editor-content{
  border-radius:0;min-height:0;flex:1;
  padding:20px 40px 120px;font-size:18px;line-height:2.1;
  background:transparent;
}
.editor-area.fullscreen .editor-content:focus{background:var(--bg-card)}
.editor-area.fullscreen .editor-meta{display:none}
.editor-area.fullscreen .editor-breadcrumb{display:none}
.editor-area.fullscreen .editor-save-bar{bottom:40px}
.editor-area.fs-exit{animation:fsFadeOut .15s ease}
@keyframes fsFadeOut{from{opacity:1}to{opacity:0}}

/* 章节信息浮动栏（侧边栏内，进入编辑时常驻显示） */
.editor-float-bar{
  display:none;
  padding:10px 16px 12px;
  background:var(--bg-card);
  border-bottom:1px solid var(--border-light);
  flex-direction:column;
  gap:8px;
  animation:floatSlideIn .25s ease;
}
.editor-float-bar.show{display:flex}
@keyframes floatSlideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.editor-float-bar .float-title{
  font-size:13px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  line-height:1.3;
}
.editor-float-bar .float-sub{
  font-size:11px;color:var(--text-mute);
}
.editor-float-bar .float-actions{
  display:flex;gap:6px;flex-wrap:wrap;
}
.editor-float-bar .float-actions .btn{
  flex:1;justify-content:center;
}
.editor-float-bar .float-stat{
  font-size:11px;color:var(--text-mute);
  text-align:center;
  padding-top:6px;
  border-top:1px dashed var(--border-light);
}
/* 底部自动保存提示 */
.editor-save-bar{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  padding:10px 20px;border-radius:999px;
  background:rgba(15,23,42,.9);color:#fff;
  font-size:12px;font-weight:500;
  display:none;align-items:center;gap:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  z-index:var(--z-float);animation:slideUp .3s ease;
}
.editor-save-bar.show{display:inline-flex}
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ============== 大纲/角色/设定 ============== */
.item-card{
  padding:16px 20px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:12px;
  margin-bottom:8px;display:flex;align-items:flex-start;gap:14px;
  transition:all .18s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
}
.item-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--primary),var(--blue-dark));
  transform:scaleY(0);transform-origin:center;
  transition:transform .2s;
}
.item-card:hover{
  border-color:var(--primary-light);
  box-shadow:0 4px 16px rgba(59,130,246,.08);
  transform:translateY(-2px);
}
.item-card:hover::before{transform:scaleY(1)}
.item-card .item-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.item-card .item-icon.outline{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);color:#d97706}
.item-card .item-icon.character{background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);color:#2563eb}
.item-card .item-icon.setting{background:linear-gradient(135deg,#e0e7ff 0%,#c7d2fe 100%);color:#4f46e5}
.item-card .info{flex:1;min-width:0}
.item-card .info .name{font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px}
.item-card .info .meta{font-size:12px;color:var(--text-mute);line-height:1.5}
.item-card .actions{display:flex;gap:4px;flex-shrink:0;opacity:0;transition:opacity .15s;align-items:flex-start}
.item-card:hover .actions{opacity:1}

/* ============== Modal 弹窗 ============== */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(15,23,42,.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;
  z-index:var(--z-debug);
  animation:fadeIn .2s ease;
}
.modal-overlay.show{display:flex}
.modal-box{
  background:var(--bg-card);border-radius:20px;padding:32px;
  width:92%;max-width:680px;max-height:88vh;overflow-y:auto;
  box-shadow:var(--shadow-xl);
  animation:modalSlideIn .25s cubic-bezier(.4,0,.2,1);
}
.modal-box::-webkit-scrollbar{width:0;display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-box h2{font-size:18px;font-weight:700;margin-bottom:20px;color:var(--text);display:flex;align-items:center;gap:8px}
.modal-box label{
  display:block;font-size:11px;font-weight:600;margin-bottom:6px;
  color:var(--text-soft);text-transform:uppercase;letter-spacing:.06em;
}
.modal-box input,.modal-box textarea,.modal-box select{
  width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:10px;
  font-size:14px;outline:none;font-family:inherit;margin-bottom:14px;
  transition:all .15s;background:var(--bg-card);color:var(--text);
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
}
.modal-box select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 12px center;
  background-size:16px;padding-right:38px;
}
.modal-box input:focus,.modal-box textarea:focus,.modal-box select:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.1);
  background-color:#fff;
}
.modal-box textarea{min-height:80px;resize:vertical;line-height:1.6}
.modal-actions{
  display:flex;gap:8px;justify-content:flex-end;
  margin-top:8px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--border-light);
}
.confirm-box{padding:4px 0}
.confirm-msg{margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--text)}
.confirm-actions{display:flex;gap:10px;justify-content:flex-end}

/* Modal 内部：编号输入分组（第N卷/章） */
.seq-input-group{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(59,130,246,.04) 0%,rgba(59,130,246,.02) 100%);
  border:1px solid var(--border-light);border-radius:12px;
}
.seq-input-group .seq-prefix,
.seq-input-group .seq-suffix{
  font-size:14px;font-weight:600;color:var(--text-soft);
  white-space:nowrap;
}
.seq-input-group input[type="number"]{
  width:60px;padding:8px 6px;
  border:1px solid var(--border);border-radius:8px;
  font-size:16px;font-weight:600;color:var(--primary);
  text-align:center;outline:none;font-family:inherit;
  background:var(--bg-card);transition:all .15s;
  -moz-appearance:textfield;
}
.seq-input-group input[type="number"]::-webkit-outer-spin-button,
.seq-input-group input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.seq-input-group input[type="number"]:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(59,130,246,.1);
}
.seq-input-group .seq-name{
  flex:1;padding:8px 12px;
  border:1px solid var(--border);border-radius:8px;
  font-size:14px;outline:none;font-family:inherit;
  background:var(--bg-card);transition:all .15s;
}
.seq-input-group .seq-name:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(59,130,246,.1);
}

/* Modal：新建卷美化 */
.volume-create-header{
  text-align:center;margin-bottom:28px;
}
.volume-create-icon{
  font-size:48px;margin-bottom:12px;
  filter:drop-shadow(0 4px 12px rgba(99,102,241,.2));
}
.volume-create-header h2{
  justify-content:center;margin-bottom:6px;
}
.volume-create-subtitle{
  font-size:13px;color:var(--text-mute);
}
.volume-create-body{
  display:flex;flex-direction:column;gap:20px;margin-bottom:8px;
}
.volume-field-label{
  display:block;font-size:12px;font-weight:600;
  color:var(--text-soft);margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.05em;
}
.volume-seq-picker{
  background:linear-gradient(135deg,rgba(99,102,241,.04) 0%,rgba(99,102,241,.02) 100%);
  border:1px solid var(--border-light);
  border-radius:14px;padding:16px 20px;
}
.volume-seq-control{
  display:flex;align-items:center;justify-content:center;gap:16px;
}
.volume-seq-btn{
  width:36px;height:36px;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-card);
  font-size:20px;font-weight:600;color:var(--text-soft);
  cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;
}
.volume-seq-btn:hover{
  border-color:var(--primary);color:var(--primary);
  background:var(--primary-50);
  transform:translateY(-1px);box-shadow:var(--shadow-sm);
}
.volume-seq-btn:active{transform:translateY(0)}
.volume-seq-display{
  display:flex;align-items:center;gap:8px;
  padding:8px 20px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;
  min-width:180px;justify-content:center;
}
.volume-seq-prefix,.volume-seq-suffix{
  font-size:14px;font-weight:600;color:var(--text-soft);
}
.volume-seq-display input[type="number"]{
  width:70px;border:none;outline:none;
  font-size:22px;font-weight:700;color:var(--primary);
  text-align:center;background:transparent;
  font-family:inherit;-moz-appearance:textfield;
}
.volume-seq-display input[type="number"]::-webkit-outer-spin-button,
.volume-seq-display input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.volume-name-field{
  display:flex;flex-direction:column;
}
.volume-name-input{
  width:100%;padding:12px 16px;
  border:1px solid var(--border);border-radius:12px;
  font-size:15px;outline:none;font-family:inherit;
  background:var(--bg-card);transition:all .15s;
}
.volume-name-input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(99,102,241,.1);
}
.volume-name-hint{
  font-size:12px;color:var(--text-mute);
  margin-top:6px;
}

/* Modal 危险操作分隔 */
.modal-danger-zone{
  margin-top:18px;padding-top:16px;
  border-top:1px dashed var(--border);
}
.modal-danger-zone .danger-hint{
  font-size:12px;color:var(--text-mute);
  margin-bottom:10px;line-height:1.5;
}
.modal-danger-zone .btn-danger{
  width:100%;justify-content:center;
}

/* ============== 回收站 ============== */
.trash-header{margin-bottom:18px}
.trash-title-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.trash-title-row h2{margin:0;font-size:20px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:9px}
.trash-title-row h2 .ic{color:var(--primary);width:19px;height:19px}
.trash-count-badge{
  font-size:12px;font-weight:600;color:var(--primary);
  background:rgba(59,130,246,.1);padding:3px 12px;border-radius:999px;
  margin-left:auto;
}
.trash-close-btn{
  width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:8px;background:var(--bg-card);color:var(--text-soft);
  cursor:pointer;font-size:16px;line-height:1;transition:all .15s;
}
.trash-close-btn:hover{background:var(--bg-hover);color:var(--text);border-color:var(--primary-light)}
.trash-desc{color:var(--text-mute);font-size:13px;line-height:1.6;margin:0 0 12px}
.trash-type-summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.trash-stat{
  display:flex;align-items:baseline;gap:7px;
  background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;
  padding:7px 14px;font-size:11px;color:var(--text-mute);
}
.trash-stat b{font-size:17px;font-weight:700;color:var(--text);line-height:1}
.trash-toolbar{
  display:flex;align-items:center;justify-content:flex-end;
  margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border);
}
.trash-list{display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow-y:auto;padding-right:2px}
.trash-list::-webkit-scrollbar{width:6px}
.trash-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.trash-list::-webkit-scrollbar-track{background:transparent}

.trash-item{
  padding:14px 16px;display:flex;align-items:center;gap:14px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:12px;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.trash-item:hover{
  box-shadow:var(--shadow-sm);
  border-color:var(--primary-light);
  transform:translateY(-1px);
}
.trash-item-icon{
  width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--primary);border-radius:11px;
  background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.15);
}
.trash-item-icon .ic{width:18px;height:18px}
.trash-item-body{flex:1;min-width:0}
.trash-item-name{
  font-size:14px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-bottom:5px;
}
.trash-item-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.trash-type-tag{
  font-size:10px;font-weight:600;color:var(--primary);
  padding:2px 8px;border-radius:5px;
  background:rgba(59,130,246,.08);
}
.trash-work-name{
  font-size:11px;color:var(--text-mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;
}
.trash-time{font-size:11px;color:var(--text-mute);display:inline-flex;align-items:center;gap:6px}
.trash-time::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--border)}
.trash-item-actions{display:flex;gap:8px;flex-shrink:0;align-items:center;opacity:0;transition:opacity .15s}
.trash-item:hover .trash-item-actions,.trash-item:focus-within .trash-item-actions{opacity:1}
.trash-item-actions .btn-sm{padding:6px 12px}

.trash-preview-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.trash-preview-head h3{margin:0;font-size:17px;font-weight:700;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trash-preview-content{
  max-height:62vh;overflow-y:auto;line-height:1.8;font-size:14px;color:var(--text);
  white-space:pre-wrap;word-break:break-word;
  background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;
  padding:16px 18px;
}
.trash-preview-empty{
  text-align:center;color:var(--text-mute);font-size:13px;padding:36px 0;
}

.trash-empty{
  padding:56px 20px;text-align:center;
}
.trash-empty-icon{font-size:44px;margin-bottom:14px;opacity:.7}
.trash-empty-text{font-size:15px;font-weight:600;color:var(--text-mute);margin:0 0 4px}
.trash-empty-sub{font-size:12px;color:var(--text-mute);margin:0}

/* ============== 内联编辑 ============== */
.inline-edit{display:flex;gap:8px;align-items:center}
.inline-edit input{
  flex:1;padding:6px 10px;border:1px solid var(--border);
  border-radius:6px;font-size:13px;outline:none;font-family:inherit;
}
.inline-edit input:focus{border-color:var(--primary)}

/* ============== 响应式 ============== */
@media(max-width:768px){
  .sidebar{width:220px}
  .main-content{padding:20px 16px}
  .work-header{flex-direction:column;align-items:flex-start}
  .top-nav{padding:0 16px}
  /* 功能 Tab：均分一行，两字标签不许竖排折行 */
  .tabs{width:100%;margin-bottom:16px}
  .tab{flex:1;padding:10px 4px;white-space:nowrap;text-align:center}
  /* 保存状态徽章不许折行 */
  .editor-toolbar .save-status{white-space:nowrap;flex:none}
  .editor-stats{white-space:nowrap;flex:none}
  .editor-meta{flex-wrap:wrap;gap:4px 12px}
}

/* ============== 双栏布局容器 ============== */
.writer-workspace{
  flex:1;
  display:flex;
  overflow:hidden;
}

/* ============== 可拖动分割线 ============== */
.panel-divider{
  width:12px;
  flex-shrink:0;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:col-resize;
  position:relative;
  z-index:var(--z-content);
}
.writer-workspace.dock-right .panel-divider{
  display:flex;
}
.divider-handle{
  width:4px;
  height:40px;
  background:var(--border);
  border-radius:4px;
  transition:background .2s, height .2s;
}
.panel-divider:hover .divider-handle{
  background:var(--primary);
  height:60px;
}
.panel-divider.dragging .divider-handle{
  background:var(--primary);
  height:80px;
}
@keyframes aiFadeIn{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes aiSpin{
  to{transform:rotate(360deg)}
}
@keyframes aiSpin{to{transform:rotate(360deg)}}

/* ============== 图片编辑器 ============== */
.image-editor-content{
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.image-gallery{
  flex:1;
  overflow-y:auto;
  padding:24px 32px;
}
.image-gallery-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.image-gallery-header h3{
  font-size:16px;
  font-weight:600;
  color:var(--text);
}
.image-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
}
.image-gallery-item{
  border-radius:12px;
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
  transition:all .2s;
  cursor:pointer;
  position:relative;
}
.image-gallery-item:hover{
  border-color:var(--primary-light);
  box-shadow:0 4px 16px rgba(0,0,0,0.08);
  transform:translateY(-2px);
}
.image-gallery-item img{
  width:100%;
  display:block;
  aspect-ratio:1;
  object-fit:cover;
}
.image-gallery-item .image-info{
  padding:10px 14px;
  font-size:12px;
  color:var(--text-mute);
  display:flex;
  justify-content:space-between;
}
.image-gallery-item .image-actions{
  position:absolute;
  top:8px;
  right:8px;
  display:flex;
  gap:4px;
  opacity:0;
  transition:opacity .15s;
}
.image-gallery-item:hover .image-actions{
  opacity:1;
}
.image-gallery-item .image-actions button{
  width:30px;
  height:30px;
  border:none;
  border-radius:8px;
  background:rgba(0,0,0,0.5);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  backdrop-filter:blur(4px);
}
.image-gallery-item .image-actions button:hover{
  background:rgba(0,0,0,0.7);
}


/* ============== 移动端适配（方案B：标准移动适配，断点对齐主站 1024/640） ============== */

/* —— 中屏 ≤1024：AI 停靠面板让位给悬浮球（弹出面板仍可用） —— */
/* —— 小屏 ≤640：单栏 + 侧栏抽屉 + 全屏 AI 弹出面板 —— */
@media (max-width: 640px) {
  .main-content{ padding:12px 12px 96px; }
  .top-nav{ padding:0 12px; }
  .work-header{ flex-direction:column; align-items:flex-start; gap:8px; }

  /* 侧栏 → 遮罩抽屉（复用 sidebar-manual-expand 机制） */
  .app-layout .sidebar{
    position:fixed;
    top:0; left:0; bottom:0;
    width:260px !important;
    min-width:260px !important;
    z-index:var(--z-modal);
    box-shadow:8px 0 32px rgba(15,23,42,.18);
  }
  .sidebar-collapse-btn{
    position:fixed;
    left:0; top:50%;
    margin-top:-28px;
    height:56px;
    width:32px; min-width:32px;
    z-index:var(--z-modal);
    border-radius:0 12px 12px 0;
  }
  .app-layout.sidebar-manual-expand .sidebar-collapse-btn{ left:260px; }
  .sidebar-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.4);
    z-index:var(--z-overlay);
  }
  .sidebar-backdrop.show{ display:block; }

  /* 编辑器：工具栏横滑不换行 */
  .editor-toolbar{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .editor-toolbar::-webkit-scrollbar{ display:none; }

  /* 防 iOS 聚焦自动放大：输入类字号 ≥16px */
  input, textarea, select{ font-size:16px !important; }

  /* 触控目标 ≥44px */
  .btn{ min-height:44px; }
  .btn-icon{ min-width:44px; min-height:44px; }
  .btn-xs{ min-height:36px; }

  /* 弹窗 → 底部贴边全宽 */
  .modal-overlay{ align-items:flex-end; }
  .modal-box{
    width:100%;
    max-width:100%;
    max-height:92vh;
    border-radius:16px 16px 0 0;
  }

  /* 图库网格小屏降密度 */
  .image-gallery-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}

/* ============== 暗色主题：writer 玻璃面覆盖（2026-09-08） ==============
   白玻璃写死的 9 处在暗色下的等价暗玻璃；令牌化前的过渡方案 */
[data-theme="dark"] .top-nav{
  background:rgba(10,10,12,.8);
  border-bottom-color:rgba(38,39,43,.6);
}
[data-theme="dark"] .sidebar{
  background:rgba(10,10,12,.75);
}
[data-theme="dark"] .sidebar-footer{
  background:linear-gradient(180deg,rgba(10,10,12,.5) 0%,rgba(6,6,8,.7) 100%);
}
[data-theme="dark"] .work-header{
  background:linear-gradient(135deg,rgba(17,17,20,.9) 0%,rgba(10,10,12,.6) 100%);
}
[data-theme="dark"] .volume-title .vol-count{
  background:rgba(255,255,255,.08);
}
[data-theme="dark"] .empty-chapter-hint{
  background:rgba(255,255,255,.04);
}
[data-theme="dark"] .editor-toolbar .save-status{
  background:rgba(255,255,255,.06);
}
[data-theme="dark"] .editor-area.fullscreen .editor-toolbar{
  background:rgba(17,17,20,.96);
}


/* ---- SVG 图标基础（emoji→SVG 清扫配套，2026-09-08） ---- */
.ic{width:1em;height:1em;vertical-align:-0.125em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;}
button .ic{margin-right:2px;}