/* 个人知识库 —— 深色为主，支持明暗切换，移动端可用 */
:root{
  --bg:#0f1115; --bg-2:#161a21; --bg-3:#1d222b; --line:#2a313c;
  --fg:#e6e9ef; --fg-dim:#9aa4b2; --accent:#4c8dff; --accent-2:#2f6fe0;
  --danger:#ff5f56; --ok:#3ddc97; --code-bg:#11151b; --radius:10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}
body.theme-light{
  --bg:#f6f7f9; --bg-2:#ffffff; --bg-3:#eef1f5; --line:#dfe4ea;
  --fg:#1b1f27; --fg-dim:#5b6472; --code-bg:#f0f2f5;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--font);
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
.muted{color:var(--fg-dim)}
.small{font-size:12.5px}
kbd{background:var(--bg-3); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-family:var(--mono); font-size:12px}

/* ---------------- 登录 ---------------- */
.login-wrap{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg); z-index:50}
.login-card{
  width:min(380px,92vw); background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding:32px 28px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-logo{font-size:40px; line-height:1}
.login-card h1{font-size:19px; margin:10px 0 4px; font-weight:600}
.login-card input{
  width:100%; margin:18px 0 12px; padding:11px 13px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--bg-3); color:var(--fg); font-size:15px;
}
.login-card input:focus{outline:none; border-color:var(--accent)}
.error-text{color:var(--danger); font-size:13px; min-height:18px; margin-top:8px}

/* ---------------- 布局 ---------------- */
.app{display:flex; height:100vh; overflow:hidden}
.sidebar{
  width:300px; flex:0 0 300px; background:var(--bg-2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.side-head{display:flex; align-items:center; justify-content:space-between; padding:14px 14px 8px}
.brand{font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.search-wrap{padding:0 12px 10px}
.search-wrap input{
  width:100%; padding:9px 12px; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--bg-3); color:var(--fg); font-size:14px;
}
.search-wrap input:focus{outline:none; border-color:var(--accent)}
.tags{display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 10px; max-height:96px; overflow:auto}
.tag{
  font-size:12px; padding:2px 9px; border-radius:999px; background:var(--bg-3);
  border:1px solid var(--line); color:var(--fg-dim); cursor:pointer; user-select:none;
}
.tag:hover{color:var(--fg); border-color:var(--accent)}
.tag.active{background:var(--accent); border-color:var(--accent); color:#fff}
.note-list{flex:1; overflow:auto; padding:0 8px 8px}
.note-item{
  padding:9px 10px; border-radius:var(--radius); cursor:pointer; margin-bottom:3px; border:1px solid transparent;
}
.note-item:hover{background:var(--bg-3)}
.note-item.active{background:var(--bg-3); border-color:var(--accent)}
.note-item .ni-title{font-weight:550; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.note-item .ni-sum{color:var(--fg-dim); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.note-item .ni-meta{color:var(--fg-dim); font-size:11.5px; margin-top:3px; display:flex; gap:8px}
.side-foot{display:flex; gap:4px; padding:8px 10px; border-top:1px solid var(--line); justify-content:space-around}

.icon-btn{
  background:transparent; border:1px solid transparent; color:var(--fg-dim); font-size:16px;
  width:34px; height:32px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.icon-btn:hover{background:var(--bg-3); color:var(--fg)}
.icon-btn.danger:hover{color:var(--danger)}
.btn{
  background:var(--bg-3); color:var(--fg); border:1px solid var(--line); border-radius:8px;
  padding:7px 14px; font-size:14px; cursor:pointer; font-family:inherit;
}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-2)}
.btn.full{width:100%}
.only-mobile{display:none}

.main{flex:1; min-width:0; overflow:auto; background:var(--bg)}
.empty-state{display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--fg-dim); gap:6px}
.empty-icon{font-size:44px}

/* ---------------- 笔记视图 ---------------- */
.viewer,.editor{padding:26px clamp(16px,5vw,64px) 60px; max-width:900px; margin:0 auto}
.note-head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.note-head h1{font-size:24px; margin:0; flex:1; word-break:break-word}
.note-actions{display:flex; gap:2px; flex:0 0 auto}
.note-meta{color:var(--fg-dim); font-size:12.5px; margin-bottom:20px; display:flex; gap:12px; flex-wrap:wrap}
.note-meta .chip{background:var(--bg-3); border-radius:999px; padding:1px 9px; cursor:pointer}
.note-meta .chip:hover{color:var(--accent)}

/* ---------------- Markdown ---------------- */
.markdown{font-size:15.5px}
.markdown h1,.markdown h2,.markdown h3,.markdown h4{margin:1.4em 0 .5em; line-height:1.3}
.markdown h1{font-size:1.6em; border-bottom:1px solid var(--line); padding-bottom:.3em}
.markdown h2{font-size:1.32em; border-bottom:1px solid var(--line); padding-bottom:.25em}
.markdown h3{font-size:1.15em}
.markdown p{margin:.7em 0}
.markdown a{color:var(--accent); text-decoration:none}
.markdown a:hover{text-decoration:underline}
.markdown code{background:var(--code-bg); padding:.15em .4em; border-radius:5px; font-family:var(--mono); font-size:.9em}
.markdown pre{background:var(--code-bg); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; overflow:auto}
.markdown pre code{background:none; padding:0; font-size:13px; line-height:1.55}
.markdown blockquote{margin:.8em 0; padding:.2em 0 .2em 14px; border-left:3px solid var(--accent); color:var(--fg-dim)}
.markdown ul,.markdown ol{padding-left:1.5em; margin:.6em 0}
.markdown li{margin:.25em 0}
.markdown table{border-collapse:collapse; margin:1em 0; width:100%; font-size:14px}
.markdown th,.markdown td{border:1px solid var(--line); padding:6px 10px; text-align:left}
.markdown th{background:var(--bg-3)}
.markdown hr{border:none; border-top:1px solid var(--line); margin:1.6em 0}
.markdown img{max-width:100%; border-radius:var(--radius); border:1px solid var(--line)}
.markdown .task{list-style:none; margin-left:-1.2em}
.markdown .task input{margin-right:6px}

/* ---------------- 编辑器 ---------------- */
.title-input{
  flex:1; background:transparent; border:none; color:var(--fg); font-size:22px; font-weight:600;
  padding:4px 0; font-family:inherit; min-width:0;
}
.title-input:focus{outline:none; border-bottom:1px solid var(--accent)}
.edit-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 12px}
.meta-input{
  background:var(--bg-3); border:1px solid var(--line); color:var(--fg); border-radius:8px;
  padding:6px 10px; font-size:13px; font-family:inherit; flex:1; min-width:120px;
}
.meta-input:focus{outline:none; border-color:var(--accent)}
.attach-label{cursor:pointer; font-size:13px; color:var(--fg-dim); border:1px dashed var(--line); padding:6px 10px; border-radius:8px}
.attach-label:hover{color:var(--accent); border-color:var(--accent)}
.editor-area{
  width:100%; min-height:min(62vh,720px); resize:vertical; background:var(--bg-2); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;
  font-family:var(--mono); font-size:14px; line-height:1.7;
}
.editor-area:focus{outline:none; border-color:var(--accent)}
.edit-foot{display:flex; justify-content:space-between; margin-top:8px}

/* ---------------- 提示 / 弹窗 ---------------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:var(--bg-3); border:1px solid var(--line); color:var(--fg);
  padding:9px 18px; border-radius:999px; font-size:14px; z-index:80; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.modal-wrap{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:90; padding:16px}
.modal{background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:22px; width:min(520px,94vw); max-height:86vh; overflow:auto}
.modal h2{margin:0 0 12px; font-size:17px}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px}
.modal input{width:100%; padding:9px 12px; border-radius:8px; border:1px solid var(--line); background:var(--bg-3); color:var(--fg); margin:6px 0; font-family:inherit}
.modal .kv{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line)}
.modal .kv:last-child{border-bottom:none}

@media (max-width:820px){
  .sidebar{position:fixed; inset:0 auto 0 0; z-index:40; transform:translateX(-100%); transition:transform .2s ease; box-shadow:6px 0 30px rgba(0,0,0,.4)}
  .sidebar.open{transform:translateX(0)}
  .only-mobile{display:inline-flex}
  .viewer,.editor{padding:18px 16px 60px}
  .note-head h1{font-size:20px}
}

/* ---------------- v2：设置菜单 / 用户管理 / 分享 ---------------- */
.side-foot{display:flex; align-items:center; gap:8px; padding:8px 10px; border-top:1px solid var(--line); justify-content:space-between}
.foot-btn{
  background:var(--bg-3); border:1px solid var(--line); color:var(--fg-dim); border-radius:8px;
  padding:6px 12px; font-size:13px; cursor:pointer; font-family:inherit;
}
.foot-btn:hover{color:var(--fg); border-color:var(--accent)}
.whoami{font-size:12px; color:var(--fg-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.modal-head h2{margin:0; font-size:17px}

.menu{display:flex; flex-direction:column; gap:2px}
.menu-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:1px solid transparent; color:var(--fg);
  padding:10px 12px; border-radius:9px; font-size:14.5px; cursor:pointer; font-family:inherit;
}
.menu-item:hover{background:var(--bg-3); border-color:var(--line)}
.mi-icon{width:20px; text-align:center}
.mi-arrow{margin-left:auto; color:var(--fg-dim)}

.tbl{width:100%; border-collapse:collapse; font-size:13.5px; margin:6px 0}
.tbl th,.tbl td{border-bottom:1px solid var(--line); padding:7px 6px; text-align:left; vertical-align:middle}
.tbl th{color:var(--fg-dim); font-weight:500; font-size:12.5px}
.row-actions{white-space:nowrap; text-align:right}
.mini{
  background:var(--bg-3); border:1px solid var(--line); color:var(--fg-dim); border-radius:6px;
  padding:3px 8px; font-size:12px; cursor:pointer; font-family:inherit; margin-left:4px;
}
.mini:hover{color:var(--fg); border-color:var(--accent)}
.mini.danger:hover{color:var(--danger); border-color:var(--danger)}
.divider{height:1px; background:var(--line); margin:14px 0}

.link-box{display:flex; gap:6px; align-items:center; margin:8px 0}
.link-box input{
  flex:1; min-width:0; background:var(--bg-3); border:1px solid var(--line); color:var(--fg);
  border-radius:8px; padding:7px 10px; font-size:12.5px; font-family:var(--mono);
}
.share-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.modal select{
  width:100%; padding:9px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg-3); color:var(--fg); margin:6px 0; font-family:inherit; font-size:14px;
}
.shared-badge{color:var(--ok)}

/* ---------------- v2：公开只读分享页 ---------------- */
.share-wrap{min-height:100vh; display:flex; flex-direction:column; background:var(--bg)}
.share-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px clamp(16px,4vw,40px); border-bottom:1px solid var(--line); background:var(--bg-2);
  position:sticky; top:0; z-index:5;
}
.share-brand{font-weight:600}
.badge-readonly{
  font-size:12px; color:var(--fg-dim); border:1px solid var(--line); border-radius:999px; padding:2px 10px;
}
.share-body{flex:1; display:flex; min-height:0; align-items:flex-start}
.share-side{
  width:280px; flex:0 0 280px; padding:14px 8px; border-right:1px solid var(--line);
  position:sticky; top:57px; max-height:calc(100vh - 57px); overflow:auto;
}
.share-side input{
  width:calc(100% - 16px); margin:0 8px 10px; padding:8px 10px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg-3); color:var(--fg); font-size:13px;
}
.share-main{flex:1; min-width:0; padding:26px clamp(16px,5vw,64px) 60px; max-width:900px; margin:0 auto}
.share-loading,.share-error{padding:40px 0; color:var(--fg-dim); text-align:center}
.share-error{color:var(--danger)}
.share-footer{border-top:1px solid var(--line); padding:12px clamp(16px,4vw,40px); background:var(--bg-2)}
@media (max-width:820px){
  .share-body{flex-direction:column}
  .share-side{position:static; width:auto; flex:none; border-right:none; border-bottom:1px solid var(--line); max-height:none}
}