@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600&family=Source+Code+Pro:wght@400;500&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#F8F8F6;
  --sidebar-bg:#F7F7F5;
  --border:#e5e3de;
  --border-light:#eceae5;
  --text:#1a1a1a;
  --text2:#666;
  --text3:#999;
  --text4:#b0aca4;
  --link:#4183c4;
  --code-bg:#f0eeea;
  --pre-bg:#f5f4f1;
  --quote-border:#d4d1ca;
  --btn-bg:#1a1a1a;
  --table-head:#f0efeb;
  --table-border:#e0ddd8;
  --hover-bg:rgba(0,0,0,.04);
  --active-bg:rgba(0,0,0,.07);
  --sidebar-w:260px;
  --radius:10px;
  --transition:0.2s cubic-bezier(0.165,0.85,0.45,1);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;
  font-size:15px;
}

/* ========== 侧边栏 ========== */
.sidebar{
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  height:100vh;
  display:flex;
  flex-direction:column;
  position:fixed;
  left:0;top:0;
  z-index:50;
  transition:transform .25s var(--transition), opacity .25s;
}
.sidebar.collapsed{
  transform:translateX(-100%);
  opacity:0;
  pointer-events:none;
}

.sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px 10px;
  gap:8px;
}
.sidebar-header .title{
  font-weight:600;font-size:14px;color:var(--text);
  display:flex;align-items:center;gap:6px;
  letter-spacing:-0.01em;
}

/* 侧边栏按钮通用 */
.sb-btn{
  background:none;border:none;cursor:pointer;
  padding:6px;border-radius:8px;
  color:var(--text3);transition:all .15s;
  display:flex;align-items:center;justify-content:center;
}
.sb-btn:hover{ background:var(--hover-bg);color:var(--text) }
.sb-btn svg{ width:20px;height:20px }

.sidebar-actions{ display:flex;gap:2px }

/* 侧边栏切换按钮 */
.sidebar-toggle{
  position:fixed;
  left:12px;top:12px;z-index:60;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
  opacity:0;pointer-events:none;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.sidebar-toggle:hover{ background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.1) }
.sidebar-toggle svg{ width:20px;height:20px;color:var(--text2) }
.sidebar-toggle.show{ opacity:1;pointer-events:auto }

.tree-container{
  flex:1;overflow-y:auto;padding:4px 8px;
}
.tree-container::-webkit-scrollbar{ width:4px }
.tree-container::-webkit-scrollbar-thumb{ background:var(--border);border-radius:4px }

/* 文件树节点 */
.tree-item{
  display:flex;align-items:center;
  padding:6px 10px 6px calc(10px + var(--depth,0) * 16px);
  cursor:pointer;font-size:13px;
  color:var(--text2);transition:all .1s;
  user-select:none;gap:6px;
  border-radius:8px;
  margin:1px 0;
}
.tree-item:hover{ background:var(--hover-bg);color:var(--text) }
.tree-item.active{ background:var(--active-bg);color:var(--text);font-weight:500 }
.tree-item .icon{ font-size:16px;flex-shrink:0;width:20px;text-align:center;opacity:.7 }
.tree-item .name{
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tree-item .arrow{
  font-size:9px;flex-shrink:0;width:12px;text-align:center;
  transition:transform .15s;color:var(--text4);
}
.tree-item .arrow.open{ transform:rotate(90deg) }
.tree-children{ display:none }
.tree-children.open{ display:block }

/* ========== 主内容区 ========== */
.main{
  flex:1;
  margin-left:var(--sidebar-w);
  min-height:100vh;
  transition:margin-left .25s var(--transition);
}
.main.expanded{ margin-left:0 }

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 32px;
  border-bottom:1px solid var(--border-light);
  position:sticky;top:0;
  background:var(--bg);z-index:10;
  min-height:48px;
}
.topbar .breadcrumb{
  font-size:13px;color:var(--text3);font-weight:500;
}
.topbar .actions{ display:flex;gap:6px }

/* 按钮 */
.btn{
  font-family:inherit;font-size:13px;font-weight:500;
  padding:6px 14px;border-radius:8px;
  border:1px solid var(--border);cursor:pointer;
  transition:all .15s;background:#fff;color:var(--text2);
  display:inline-flex;align-items:center;gap:4px;
}
.btn:hover{ background:var(--hover-bg);color:var(--text);border-color:var(--text4) }
.btn.primary{
  background:var(--btn-bg);color:#fff;border-color:var(--btn-bg);
}
.btn.primary:hover{ background:#333 }
.btn.danger{ color:#c0392b;border-color:#e0c8c5 }
.btn.danger:hover{ background:#fdf0ef;color:#a93226 }

.content-area{
  max-width:760px;
  margin:0 auto;
  padding:36px 32px 120px;
}

/* ========== Markdown 渲染（Claude 风格） ========== */
#viewer{ padding:4px 0 }

#viewer h1{
  font-size:1.85em;font-weight:600;color:var(--text);
  margin:0 0 .7em;line-height:1.3;letter-spacing:-0.02em;
}
#viewer h2{
  font-size:1.4em;font-weight:600;color:var(--text);
  margin:1.6em 0 .5em;line-height:1.3;letter-spacing:-0.01em;
}
#viewer h3{
  font-size:1.15em;font-weight:600;color:var(--text);
  margin:1.3em 0 .4em;line-height:1.4;
}
#viewer h4{
  font-size:1em;font-weight:600;color:var(--text);
  margin:1em 0 .3em;line-height:1.4;
}
#viewer h5, #viewer h6{
  font-size:.95em;font-weight:600;color:var(--text2);
  margin:1em 0 .3em;line-height:1.4;
}
#viewer p{ margin:.6em 0;color:var(--text);line-height:1.7 }
#viewer a{
  color:var(--link);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .15s;
}
#viewer a:hover{ border-bottom-color:var(--link) }
#viewer strong{ font-weight:600;color:var(--text) }
#viewer em{ font-style:italic }
#viewer del{ color:var(--text3) }
#viewer code{
  font-family:'Source Code Pro','Menlo','Consolas',monospace;
  font-size:.85em;background:var(--code-bg);color:var(--text);
  padding:2px 6px;border-radius:4px;
}
#viewer pre{
  background:var(--pre-bg);border:1px solid var(--border-light);
  border-radius:var(--radius);padding:16px 18px;
  overflow-x:auto;margin:1em 0;line-height:1.6;
}
#viewer pre code{
  background:none;padding:0;font-size:.87em;border-radius:0;
}
#viewer blockquote{
  border-left:3px solid var(--quote-border);
  padding:2px 0 2px 16px;margin:1em 0;color:var(--text2);
}
#viewer blockquote p{ margin:.3em 0 }
#viewer hr{ border:none;border-top:1px solid var(--border);margin:1.8em 0 }
#viewer ul, #viewer ol{ padding-left:1.8em;margin:.6em 0 }
#viewer li{ margin:.3em 0;color:var(--text);line-height:1.7 }
#viewer li::marker{ color:var(--text4) }
#viewer li > ul, #viewer li > ol{ margin:.15em 0 }
#viewer input[type="checkbox"]{ margin-right:6px;transform:translateY(1px) }
#viewer table{
  width:100%;border-collapse:collapse;margin:1em 0;font-size:.93em;
}
#viewer thead th{
  background:var(--table-head);font-weight:600;text-align:left;
  padding:8px 12px;border:1px solid var(--table-border);
}
#viewer tbody td{ padding:8px 12px;border:1px solid var(--table-border) }
#viewer tbody tr:hover{ background:rgba(0,0,0,.015) }
#viewer img{ max-width:100%;border-radius:var(--radius);margin:.8em 0 }

/* ========== 编辑器 ========== */
#editor{
  width:100%;min-height:calc(100vh - 180px);resize:vertical;
  background:#fff;color:var(--text);
  font-family:'Source Code Pro','Menlo','Consolas',monospace;
  font-size:14px;line-height:1.7;
  border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;outline:none;transition:border-color .15s;
}
#editor:focus{ border-color:var(--text4) }

/* ========== 欢迎页 ========== */
.welcome{
  text-align:center;padding:140px 32px;color:var(--text3);
}
.welcome h2{
  font-size:1.3em;margin-bottom:8px;color:var(--text2);
  font-weight:600;letter-spacing:-0.01em;
}
.welcome p{ font-size:14px }

/* ========== 右键菜单 ========== */
.ctx-menu{
  position:fixed;z-index:300;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:4px;min-width:160px;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
  font-size:13px;display:none;
}
.ctx-menu.show{ display:block }
.ctx-menu .item{
  padding:7px 12px;cursor:pointer;color:var(--text2);
  transition:all .1s;border-radius:6px;
}
.ctx-menu .item:hover{ background:var(--hover-bg);color:var(--text) }
.ctx-menu .item.danger{ color:#c0392b }
.ctx-menu .item.danger:hover{ background:#fdf0ef }
.ctx-menu .sep{ height:1px;background:var(--border-light);margin:4px 0 }

/* ========== 弹窗 ========== */
.dialog-overlay{
  position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.2);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;
}
.dialog-overlay.show{ display:flex }
.dialog{
  background:#fff;border:1px solid var(--border);
  border-radius:14px;width:90%;max-width:380px;
  padding:24px;
  box-shadow:0 16px 48px rgba(0,0,0,.12);
  animation:scaleIn .2s ease;
}
.dialog h3{ font-size:15px;font-weight:600;margin-bottom:16px;letter-spacing:-0.01em }
.dialog input{
  width:100%;padding:9px 12px;font-size:14px;
  border:1px solid var(--border);border-radius:8px;
  font-family:inherit;
  outline:none;transition:border-color .15s;
  background:var(--bg);
}
.dialog input:focus{ border-color:var(--text4) }
.dialog .btns{
  display:flex;gap:8px;justify-content:flex-end;margin-top:18px;
}
.dialog .btns button{
  font-family:inherit;font-size:13px;font-weight:500;
  padding:7px 18px;border-radius:8px;
  border:1px solid var(--border);cursor:pointer;transition:all .15s;
}
.dialog .btns .btn-ok{ background:var(--btn-bg);color:#fff;border-color:var(--btn-bg) }
.dialog .btns .btn-ok:hover{ background:#333 }
.dialog .btns .btn-cancel{ background:#fff;color:var(--text2) }
.dialog .btns .btn-cancel:hover{ background:var(--hover-bg) }

@keyframes scaleIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* ========== 响应式 ========== */
@media(max-width:768px){
  .sidebar:not(.collapsed){ transform:translateX(0) }
  .sidebar{ transform:translateX(-100%);opacity:0;pointer-events:none }
  .sidebar.mobile-open{ transform:translateX(0);opacity:1;pointer-events:auto }
  .main{ margin-left:0 !important }
  .sidebar-toggle.show{ opacity:1;pointer-events:auto }
  .content-area{ padding:24px 18px 100px }
  .topbar{ padding:10px 18px }
}