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

/* Design tokens */
:root{
  --bg:#1a1a1a;--fg:#d4d4d4;--muted:#888;--accent:#4a9eff;
  --border:#333;--hover:#242424;--selected:#1e3a5f;--unread:#e8e8e8;
  --sidebar-w:220px;--items-w:340px;--focused-border:#4a9eff;
  --danger:#f87171;
}

/* Base */
body{background:var(--bg);color:var(--fg)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
kbd{background:#2a2a2a;border:1px solid var(--border);border-radius:3px;padding:1px 6px;font:12px ui-monospace,monospace;color:var(--fg);white-space:nowrap}

/* Page chrome: admin, settings, sync, help */
header{padding:12px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px}
header h1{font-size:14px;font-weight:700;flex:1}

/* Cards */
.card{background:#242424;border:1px solid var(--border);border-radius:6px;padding:20px 24px}
.card label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;margin-top:12px}
.card label:first-of-type{margin-top:0}
.card input[type=text],.card input[type=password],.card input[type=email],.card input[type=url],.card input[type=file],.card textarea{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--fg);padding:6px 9px;font:13px ui-monospace,monospace;border-radius:4px}
.card textarea{resize:vertical}
.card input:focus,.card textarea:focus{outline:none;border-color:var(--accent)}
.card button[type=submit]{margin-top:16px;background:var(--accent);border:none;color:#fff;padding:7px 16px;cursor:pointer;border-radius:4px;font:13px ui-monospace,monospace}

/* Page sections and banners */
.section{margin-bottom:40px}
.ok{color:#4ade80;font-size:12px;margin-bottom:14px;padding:6px 10px;border:1px solid #4ade80;border-radius:4px;display:inline-block}
.note{font-size:12px;color:var(--muted);margin-top:8px}

/* Tables (admin, help) */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:6px 10px;border-bottom:2px solid var(--border);color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
td{padding:8px 10px;border-bottom:1px solid var(--border);color:var(--muted);vertical-align:middle}
tr:last-child td{border-bottom:none}

/* Section nav (index, articles, notes) */
#section-nav{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.section-btn{flex:1;padding:8px 4px;text-align:center;font:11px/1 ui-monospace,monospace;color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:none;display:block}
.section-btn:hover{color:var(--fg);background:var(--hover)}
.section-btn.active{color:var(--accent);border-bottom:2px solid var(--accent)}

/* Sidebar (index, articles, notes) */
#sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
#sidebar-header{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}
#sidebar-header h1{font-size:13px;font-weight:700;color:var(--fg);flex:1}
#sidebar-footer{padding:10px 12px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);flex-shrink:0;flex-wrap:wrap}
#sidebar-footer a{color:var(--muted);text-decoration:none}
#sidebar-footer a:hover{color:var(--accent)}
#sidebar-footer button{background:none;border:none;color:var(--muted);cursor:pointer;font:11px ui-monospace,monospace;padding:0}
#sidebar-footer button:hover{color:var(--accent)}
.footer-user{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Main list column (index, articles, notes) */
#main{width:var(--items-w);min-width:var(--items-w);display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}
#pagination{padding:8px 14px;border-top:1px solid var(--border);display:flex;gap:10px;font-size:12px;color:var(--muted)}
#pagination a{color:var(--accent)}

/* Status toast (index, articles, notes) */
#status{position:fixed;bottom:10px;right:14px;background:#2a2a2a;border:1px solid var(--border);padding:4px 10px;border-radius:4px;font-size:12px;color:var(--fg);display:none}

/* Label list sidebar (articles, notes) */
#label-list{overflow-y:auto;flex:1}
.label-row{padding:7px 12px;border-bottom:1px solid var(--border);cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px;text-decoration:none;color:var(--fg)}
.label-row:hover{background:var(--hover)}
.label-row.active{background:var(--selected)}
.label-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.label-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.label-del{opacity:0;background:none;border:none;color:var(--muted);cursor:pointer;padding:0 2px;font-size:13px;line-height:1}
.label-row:hover .label-del{opacity:1}
.label-del:hover{color:#f87171}
#add-label-btn{width:100%;padding:8px 12px;border-top:1px solid var(--border);border-left:none;border-right:none;border-bottom:none;background:none;color:var(--accent);cursor:pointer;font:13px ui-monospace,monospace;text-align:left;flex-shrink:0}
#add-label-btn:hover{background:var(--hover)}

/* Label inline form (articles, notes) */
#label-form{display:none;padding:8px 12px;border-top:1px solid var(--border);gap:6px;flex-shrink:0}
#label-form.open{display:flex}
#label-name-input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--fg);padding:4px 8px;font:12px ui-monospace,monospace;border-radius:3px}
#label-name-input:focus{outline:none;border-color:var(--accent)}
#label-color-input{width:32px;height:28px;border:1px solid var(--border);border-radius:3px;cursor:pointer;padding:0;background:none}
#label-save-btn{background:var(--accent);border:none;color:#fff;padding:4px 10px;cursor:pointer;border-radius:3px;font:12px ui-monospace,monospace}
#label-cancel-btn{background:none;border:1px solid var(--border);color:var(--muted);padding:4px 8px;cursor:pointer;border-radius:3px;font:12px ui-monospace,monospace}

/* Label assign panel (articles, notes) */
#label-assign-panel{display:none;position:absolute;right:14px;top:37px;background:#242424;border:1px solid var(--border);border-radius:6px;padding:8px;z-index:100;min-width:160px;max-height:200px;overflow-y:auto}
#label-assign-panel.open{display:block}
.label-assign-row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:3px;cursor:pointer;font-size:12px}
.label-assign-row:hover{background:var(--hover)}
.label-assign-check{width:13px;height:13px;border:1px solid var(--border);border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px}
.label-assign-check.checked{background:var(--accent);border-color:var(--accent);color:#fff}

/* Rendered markdown content (articles, notes, write preview) */
.md-content{font:14px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e8e8e8}
.md-content h1,.md-content h2,.md-content h3,.md-content h4{margin:1.2em 0 .5em;color:#fff}
.md-content h1{font-size:1.5em}
.md-content h2{font-size:1.25em}
.md-content h3{font-size:1.1em}
.md-content p{margin:.7em 0}
.md-content ul,.md-content ol{margin:.7em 0;padding-left:1.5em}
.md-content li{margin:.2em 0}
.md-content blockquote{border-left:3px solid var(--accent);margin:.7em 0;padding:.3em .8em;color:var(--muted)}
.md-content code{background:#2a2a2a;padding:1px 5px;border-radius:3px;font:12px monospace}
.md-content pre{background:#2a2a2a;padding:12px;border-radius:4px;overflow-x:auto;margin:.7em 0}
.md-content pre code{background:none;padding:0}
.md-content a{color:var(--accent)}
.md-content hr{border:none;border-top:1px solid var(--border);margin:1.2em 0}
.md-content img{max-width:100%}

/* Global search modal (index, articles, notes) */
#search-modal{display:none;position:fixed;inset:0;background:#0009;z-index:800;align-items:flex-start;justify-content:center;padding-top:80px}
.search-box{background:#242424;border:1px solid var(--border);border-radius:8px;width:90vw;max-width:580px;display:flex;flex-direction:column;max-height:70vh}
.search-box-header{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.search-box-header .search-icon{color:var(--muted);font-size:14px}
.search-box-header input{flex:1;background:none;border:none;color:var(--fg);font:14px ui-monospace,monospace;outline:none}
.search-box-header kbd{font-size:10px;color:var(--muted)}
#search-results{overflow-y:auto;flex:1;padding:4px 0}