/* ============================================================
   全局主题变量（深色主题，想改配色改这里即可）
   ============================================================ */
:root{
  --bg:#1e1e1e;            /* 全局背景 */
  --panel:#252526;         /* 面板背景 */
  --panel-hover:#2d2d30;   /* 列表项悬停 */
  --panel-active:#37373d;  /* 列表项选中 */
  --border:#3c3c3c;        /* 边框 */
  --text:#d4d4d4;          /* 正文文字 */
  --dim:#8a8a8a;           /* 次要文字 */
  --accent:#0e639c;        /* 主按钮 */
  --accent-hover:#1177bb;
  --danger:#7a2e2e;        /* 危险按钮 */
  --danger-hover:#a13a3a;
  --line-num:#6e7681;      /* 行号颜色 */
  --btn-ghost:#3a3d41;     /* 幽灵按钮背景（主题切换时动态计算） */
  --btn-ghost-hover:#4a4d52;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{font-family:"Segoe UI","Microsoft YaHei",sans-serif;font-size:14px;background:var(--bg);color:var(--text);display:flex;flex-direction:column;overflow:hidden;}

/* ---------- 顶部工具栏 ---------- */
header{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0;}
header h1{font-size:16px;color:var(--text);margin-right:8px;white-space:nowrap;font-weight:600;}
.btn{background:var(--accent);color:#fff;border:none;padding:6px 14px;border-radius:4px;font-size:13px;cursor:pointer;white-space:nowrap;}
.btn:hover{background:var(--accent-hover);}
.btn.ghost{background:var(--btn-ghost);}
.btn.ghost:hover{background:var(--btn-ghost-hover);}
.btn.danger{background:var(--danger);}
.btn.danger:hover{background:var(--danger-hover);}
.spacer{flex:1;}

/* ---------- 主体左右分栏 ---------- */
main{flex:1;display:flex;min-height:0;}

/* 左侧片段列表 */
#listPanel{width:280px;min-width:180px;max-width:70vw;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;}
.list-toolbar{padding:10px;border-bottom:1px solid var(--border);}
#searchInput{width:100%;padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:13px;outline:none;}
#searchInput:focus{border-color:var(--accent-hover);}
#listCount{font-size:12px;color:var(--dim);margin-top:6px;}
#snippetList{flex:1;overflow-y:auto;}

.snippet-item{padding:10px 12px;border-bottom:1px solid var(--panel-hover);cursor:pointer;border-left:3px solid transparent;}
.snippet-item:hover{background:var(--panel-hover);}
.snippet-item.active{background:var(--panel-active);border-left-color:var(--accent-hover);}
.si-top{display:flex;align-items:center;gap:6px;}
.si-title{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.badge{font-size:10px;padding:1px 6px;border-radius:3px;flex-shrink:0;}
.badge.tmp{background:var(--btn-ghost);color:var(--dim);}
.badge.important{background:#7a5b12;color:#ffd866;}
.si-preview{font-size:12px;color:var(--dim);font-family:Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px;}
.si-time{font-size:11px;color:var(--line-num);margin-top:4px;}
.list-empty{padding:30px 10px;text-align:center;color:var(--dim);font-size:13px;}

/* 分栏拖动条 */
#splitter{width:5px;cursor:col-resize;flex-shrink:0;background:transparent;}
#splitter:hover,#splitter.dragging{background:var(--accent-hover);}

/* 右侧编辑区 */
#editorPanel{flex:1;display:flex;flex-direction:column;min-width:0;}
#editorBar{display:flex;gap:8px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--border);align-items:center;flex-wrap:wrap;}
#titleInput{flex:1;min-width:120px;padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:13px;outline:none;}
#titleInput:focus{border-color:var(--accent-hover);}
select{padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:13px;outline:none;cursor:pointer;}
#toolBar{display:flex;gap:8px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--border);align-items:center;flex-wrap:wrap;}
.tool-btn{background:var(--btn-ghost);color:var(--text);border:none;padding:5px 12px;border-radius:4px;font-size:12px;cursor:pointer;}
.tool-btn:hover{background:var(--btn-ghost-hover);}
.tool-btn.danger{background:var(--danger);color:#fff;}
.tool-btn.danger:hover{background:var(--danger-hover);}
label.toggle{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none;}

/* ============================================================
   代码编辑器：底层高亮渲染层 + 顶层透明输入框叠加
   两层必须使用完全相同的字体/行高/内边距才能对齐
   ============================================================ */
#editorWrap{flex:1;position:relative;min-height:0;}
#highlightLayer,#codeInput{position:absolute;top:0;bottom:0;left:0;right:0;font-family:Consolas,"Courier New",monospace;font-size:14px;line-height:21px;}
#highlightLayer{overflow:hidden;pointer-events:none;padding:8px 0 60px 0;color:var(--text);}
#codeInput{background:transparent;border:none;outline:none;resize:none;color:transparent;caret-color:var(--text);padding:8px 12px 60px 56px;overflow:auto;tab-size:4;}
#codeInput::placeholder{color:var(--dim);opacity:1;}
#codeInput::selection{background:rgba(255,255,255,.18);}
html.light #codeInput::selection{background:rgba(0,0,0,.14);}

/* 代码行与行号：行号用 ::before 定位，自动换行时仍对齐行首 */
.line{position:relative;padding:0 12px 0 56px;min-height:21px;white-space:pre-wrap;overflow-wrap:break-word;}
.no-wrap .line{white-space:pre;}
.line::before{content:attr(data-n);position:absolute;left:8px;top:0;width:38px;text-align:right;color:var(--line-num);user-select:none;}

/* 语法高亮配色 */
.tk-comment{color:#6a9955;}
.tk-string{color:#ce9178;}
.tk-number{color:#b5cea8;}
.tk-keyword{color:#569cd6;}
.tk-literal{color:#569cd6;}
.tk-builtin{color:#4ec9b0;}
.tk-func{color:#dcdcaa;}
.tk-operator{color:#c8c8c8;}
.tk-decorator{color:#d7ba7d;}
.tk-preproc{color:#c586c0;}
.tk-doctype{color:#808080;}
.tk-tag{color:#569cd6;}
.tk-attr{color:#9cdcfe;}
.tk-punc{color:#808080;}

/* 空状态遮罩 */
#emptyState{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--dim);background:var(--bg);z-index:5;}
#emptyState .big{font-size:36px;font-weight:700;color:var(--btn-ghost-hover);}
[hidden]{display:none !important;}

/* 底部使用说明 */
footer{flex-shrink:0;background:var(--panel);border-top:1px solid var(--border);padding:8px 16px;font-size:12px;color:var(--dim);line-height:1.8;max-height:96px;overflow-y:auto;}

/* 复制成功等提示气泡 */
#toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%) translateY(16px);background:#2ea043;color:#fff;padding:8px 18px;border-radius:4px;font-size:13px;opacity:0;transition:all .25s;pointer-events:none;z-index:99;}
#toast.show{opacity:1;transform:translateX(-50%);}

/* 列表右键菜单 */
#ctxMenu{position:fixed;display:none;min-width:150px;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:4px;z-index:80;box-shadow:0 6px 20px rgba(0,0,0,.4);font-size:13px;}
#ctxMenu.show{display:block;}
.ctx-item{padding:7px 12px;border-radius:4px;cursor:pointer;color:var(--text);white-space:nowrap;user-select:none;}
.ctx-item:hover{background:var(--panel-active);}
.ctx-item.danger{color:#ff7676;}
.ctx-item.danger:hover{background:var(--danger);color:#fff;}

/* 滚动条美化（PC浏览器） */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--btn-ghost);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:var(--btn-ghost-hover);}
::-webkit-scrollbar-track{background:transparent;}

/* ============================================================
   主题设置：浅色背景下的语法高亮配色（html.light 时启用）
   ============================================================ */
html.light .tk-comment{color:#008000;}
html.light .tk-string{color:#a31515;}
html.light .tk-number{color:#098658;}
html.light .tk-keyword,html.light .tk-literal{color:#0000ff;}
html.light .tk-builtin{color:#267f99;}
html.light .tk-func{color:#795e26;}
html.light .tk-operator{color:#333333;}
html.light .tk-decorator{color:#af00db;}
html.light .tk-preproc{color:#9b2c9b;}
html.light .tk-doctype{color:#71717a;}
html.light .tk-tag{color:#0451a5;}
html.light .tk-attr{color:#e50000;}
html.light .tk-punc{color:#71717a;}
html.light .badge.important{background:#fff3c4;color:#7a5b12;}

/* ============================================================
   主题设置弹出面板
   ============================================================ */
#themePanel{position:fixed;top:54px;right:16px;width:272px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:14px;z-index:60;box-shadow:0 8px 28px rgba(0,0,0,.35);display:none;}
#themePanel.open{display:block;}
.tp-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:12px;}
.tp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:12px;color:var(--dim);}
.tp-label{white-space:nowrap;}
.tp-presets{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.preset{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0;}
.preset:hover{border-color:var(--accent-hover);}
input[type=color]{width:48px;height:26px;border:1px solid var(--border);border-radius:4px;background:var(--bg);padding:2px;cursor:pointer;}
.tp-actions{margin-bottom:0;justify-content:flex-start;}
.tp-hint{font-size:11px;color:var(--dim);}