/* ==========================================
   🎨 1. 主题色彩调度中心 (Variables Switchboard)
   ========================================== */
:root {
    /* ☀️ 默认状态 (亮色模式) */
    --bg-body: #ffffff;
    --bg-sidebar: #f7f9fa;
    --bg-panel: #f6f8fa;
    --bg-hover: #eef1f2;
    --bg-input: #ffffff;
    --bg-mobile-sidebar: rgba(255, 255, 255, 0.95);

    --border-light: #eef1f2;
    --border-medium: #dcdfe6;
    --border-dark: #d0d7de;

    --text-main: #1a1a1a;
    --text-secondary: #303133;
    --text-muted: #8b949e;
    --text-placeholder: #e4e7ed;
    
    --color-accent: #1f6feb; /* 极客蓝 */
}

[data-theme="dark"] {
    /* 🌙 暗黑模式 (极简黑客风) */
    --bg-body: #0d1117;       
    --bg-sidebar: #161b22;    
    --bg-panel: #21262d;      
    --bg-hover: #30363d;      
    --bg-input: #0d1117;
    --bg-mobile-sidebar: rgba(22, 27, 34, 0.95); 

    --border-light: #30363d;
    --border-medium: #30363d;
    --border-dark: #484f58;

    --text-main: #c9d1d9;     
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --text-placeholder: #484f58;
    
    --color-accent: #58a6ff;  
}

/* ==========================================
   🏗️ 2. 全局重置与基础骨架 (Global Reset)
   ========================================== */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    background: var(--bg-body); 
    color: var(--text-main); 
    padding: 0; margin: 0; 
    display: flex; height: 100dvh; overflow: hidden; 
    transition: background 0.3s, color 0.3s; 
}

/* ==========================================
   🧭 3. 侧边栏与导航引擎 (Sidebar & Nav)
   ========================================== */
#sidebar { 
    width: 15px; background: transparent; border-right: 1px solid transparent; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    display: flex; flex-direction: column; position: relative; z-index: 100; 
    overflow: hidden; white-space: nowrap; 
}
.sidebar-content { 
    padding: 20px; opacity: 0; transition: opacity 0.2s; 
    display: flex; flex-direction: column; height: 100%; box-sizing: border-box; 
    overflow-y: auto; pointer-events: none;
}
#sidebar.pinned { 
    width: clamp(240px, 20vw, 280px); background: var(--bg-sidebar); 
    border-right: 1px solid var(--border-light); box-shadow: 4px 0 15px rgba(0,0,0,0.03); 
}
#sidebar.pinned .sidebar-content { 
    opacity: 1; pointer-events: auto; transition-delay: 0.1s; 
}
@media (hover: hover) and (pointer: fine) {
    #sidebar:hover { 
        width: clamp(240px, 20vw, 280px); background: var(--bg-sidebar); 
        border-right: 1px solid var(--border-light); box-shadow: 4px 0 15px rgba(0,0,0,0.03); 
    }
    #sidebar:hover .sidebar-content { 
        opacity: 1; pointer-events: auto; transition-delay: 0.1s; 
    }
}

/* 交互小组件 */
.hamburger-pin { 
    color: var(--text-placeholder); font-size: 20px; cursor: pointer; 
    user-select: none; transition: 0.2s; display: inline-block; 
    padding: 4px; border-radius: 4px;
}
.hamburger-pin:hover { color: var(--text-muted); background: var(--bg-hover);}
#sidebar.pinned .hamburger-pin { color: var(--text-main); font-weight: bold; background: var(--border-medium);}

.theme-toggle-btn { 
    cursor: pointer; font-size: 16px; opacity: 0.6; transition: 0.2s; 
    user-select: none; padding: 4px; border-radius: 4px; 
    display: flex; align-items: center; justify-content: center;
}
.theme-toggle-btn:hover { opacity: 1; background: var(--bg-hover); }

/* ==========================================
   📂 4. 笔记列表与极客标签 (File List & Tags)
   ========================================== */
.sidebar-title { 
    font-size: 12px; font-weight: 600; color: var(--text-muted); 
    margin-bottom: 10px; margin-top: 20px; letter-spacing: 1px; 
    display: flex; justify-content: space-between; align-items: center; 
}

/* 笔记列表区 */
.file-list { flex: 1; overflow-y: auto; margin-bottom: 20px; }
.file-item-container { 
    display: flex; align-items: center; justify-content: space-between; 
    border-radius: 6px; transition: 0.1s; padding-right: 8px;
}
.file-item-container:hover { background: var(--bg-hover); }
.file-item { 
    padding: 8px 4px 8px 12px; cursor: pointer; color: var(--text-secondary); 
    font-size: 14px; flex: 1; overflow: hidden; text-overflow: ellipsis;
}
.file-item:hover { color: var(--color-accent); font-weight: bold;}
.delete-btn { color: #f85149; font-size: 12px; cursor: pointer; opacity: 0; padding: 4px; border-radius: 4px;}
.delete-btn:hover { background: #ffdce0; }
.file-item-container:hover .delete-btn { opacity: 1; }

/* 侧边栏标签过滤器 */
.tag-header { display: flex; justify-content: space-between; align-items: baseline; margin-top: 15px; margin-bottom: 10px;}
.tag-search { 
    border: none; background: transparent; border-bottom: 1px dashed var(--border-medium); 
    outline: none; width: 80px; font-size: 12px; color: var(--text-muted); 
    padding-bottom: 2px; transition: 0.2s;
}
.tag-search:focus { border-bottom-color: var(--color-accent); width: 100px; }
.tag-item { 
    padding: 6px 12px; border-radius: 6px; color: var(--text-muted); font-size: 13px; 
    display: flex; align-items: center; gap: 8px; cursor: pointer; transition: 0.1s;
}
.tag-item:hover { background: var(--bg-hover); color: var(--text-main); }
.tag-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ==========================================
   ⚙️ 5. 底部账号连接区 (System Config)
   ========================================== */
.system-config { 
    border-top: 1px solid var(--border-light); padding-top: 15px; 
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px;
    flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom);
}
.config-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;}
.system-config input { 
    background: var(--bg-input); border: 1px solid var(--border-medium); 
    padding: 8px; border-radius: 6px; font-size: 12px; outline: none; color: var(--text-main); 
}
.system-config input:focus { border-color: var(--color-accent); }
.btn-mini-sync { 
    background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); 
    padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; transition: 0.2s;
}
.btn-mini-sync:hover { background: var(--color-accent); color: white; }

/* ==========================================
   📝 6. 主画布与元数据属性面板 (Main Canvas & Meta)
   ========================================== */
#main-canvas { 
    flex: 1; display: flex; flex-direction: column; align-items: center; 
    overflow-y: auto; padding: clamp(20px, 5vh, 60px) clamp(15px, 5vw, 20px); 
    background: var(--bg-body); transition: 0.3s; width: 100%; box-sizing: border-box;
}
.editor-width-limiter { width: 100%; max-width: 740px; display: flex; flex-direction: column; flex: 1; }

.top-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: clamp(15px, 3vh, 30px); }
#statusLog { color: #238636; font-size: 13px; font-weight: 500;}
.btn-save { background: #238636; color: white; border: none; padding: 8px 20px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px;}
.btn-save:hover { background: #2ea043; }

#note-title { 
    font-size: clamp(24px, 4vw + 10px, 38px); font-weight: 700; color: var(--text-main); 
    border: none; background: transparent; width: 100%; outline: none; padding-bottom: 5px; 
}
#note-title::placeholder { color: var(--text-placeholder); }

.meta-details { margin-bottom: 15px; }
.meta-details summary { 
    font-size: 13px; color: var(--text-muted); cursor: pointer; outline: none; 
    list-style: none; user-select: none; display: inline-flex; align-items: center; gap: 4px;
}
.meta-details summary::-webkit-details-marker { display: none; }
.meta-details summary::before { content: '▸'; font-size: 12px; transition: 0.2s; }
.meta-details[open] summary::before { transform: rotate(90deg); }

.meta-panel { 
    background: var(--bg-panel); border: 1px solid var(--border-dark); 
    border-radius: 6px; padding: 12px 15px; margin-top: 8px; 
    display: grid; grid-template-columns: 80px 1fr; gap: 8px 15px; 
    font-size: 13px; color: var(--text-muted); 
}
.meta-panel input { border: 1px solid transparent; background: transparent; color: var(--text-secondary); font-size: 13px; outline: none; width: 100%;}
.meta-panel input:hover { border-bottom: 1px dashed var(--border-dark); }
.meta-panel input:focus { border-bottom: 1px solid var(--color-accent); }
.meta-label { color: var(--text-muted); font-weight: 500;}

.divider { border-top: 1px solid var(--border-light); margin-bottom: 20px; flex-shrink: 0; }

/* 页面左上角与右上角：全局幽灵按钮 */
.mobile-menu-btn { position: fixed; top: 15px; left: 20px; font-size: 24px; color: var(--text-placeholder); cursor: pointer; z-index: 90; user-select: none; transition: 0.2s; line-height: 1; font-weight: 300;}
.mobile-menu-btn:hover { color: var(--text-main); }
.new-note-btn { position: fixed; top: 12px; right: 25px; font-size: 32px; font-weight: 300; color: var(--text-placeholder); cursor: pointer; z-index: 90; user-select: none; transition: 0.2s; line-height: 1; }
.new-note-btn:hover { color: var(--color-accent); }

/* ==========================================
   🏷️ 7. Tagify 极客胶囊引擎 UI (Tagify Custom)
   ========================================== */
.tagify {
    --tags-border-color: transparent;
    --tag-bg: var(--bg-panel);
    --tag-hover: var(--bg-hover);
    --tag-pad: 0.2em 0.6em;
    --tag-border-radius: 6px;
    border: none; padding: 0; display: flex; align-items: center;
}
.tagify__tag { margin: 2px 6px 2px 0; }
.tagify__input { margin: 0; color: var(--text-main); }

/* ==========================================
   ✒️ 8. Quill 编辑器深度定制 (Quill v2.0 UI)
   ========================================== */
#editor-container { flex: 1; font-size: 16px; line-height: 1.8; color: var(--text-secondary); min-height: 400px; cursor: text; }
.ql-editor { padding: 0 !important; overflow-y: visible !important; word-wrap: break-word; overflow-wrap: break-word;}
.ql-editor.ql-blank::before { color: var(--text-placeholder); font-style: normal; left: 0; }
.ql-editor h1 { font-size: 28px; margin-top: 20px; margin-bottom: 10px; }
.ql-editor h2 { font-size: 22px; margin-top: 15px; margin-bottom: 10px; }

/* 气泡 UI：固定为暗夜风格，无需跟随主题反转 */
.ql-bubble .ql-tooltip { background-color: #1e1e24 !important; border: 1px solid #33333b !important; border-radius: 10px !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2) !important; padding: 6px 12px !important; }
.ql-bubble .ql-tooltip-arrow { border-bottom-color: #1e1e24 !important; border-top-color: #1e1e24 !important; }
.ql-bubble .ql-tooltip button svg * { stroke: #a0a0a5 !important; }
.ql-bubble .ql-tooltip button:hover svg * { stroke: #ffffff !important; }
.ql-bubble .ql-tooltip button.ql-active svg * { stroke: #3498db !important; }
.ql-bubble .ql-tooltip .ql-picker { color: #a0a0a5 !important; }
.ql-bubble .ql-tooltip .ql-picker-options { background-color: #1e1e24 !important; border-color: #33333b !important; }

/* 优雅代码块：对接主题变量 */
.ql-editor .ql-code-block-container { 
    background-color: var(--bg-panel) !important; border: 1px solid var(--border-dark) !important; 
    border-radius: 8px !important; padding: 14px 16px !important; margin: 12px 0 !important; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02) !important; 
}
.ql-editor .ql-code-block { 
    background: transparent !important; border: none !important; padding: 0 !important; 
    margin: 0 !important; color: var(--text-secondary) !important; 
    font-family: 'Consolas', 'Monaco', monospace !important; line-height: 1.6 !important; 
}

/* ==========================================
   📱 9. 移动端自适应装甲 (Mobile Responsive)
   ========================================== */
@media (max-width: 768px) {
    #sidebar { 
        position: fixed; height: 100dvh; 
        background: var(--bg-mobile-sidebar); 
        backdrop-filter: blur(10px); 
    }
}