.hidden { display:none !important; }

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

:root {
    --bg: #191919;
    --bg2: #202020;
    --side: #1e1e1e;
    --hov: #2a2a2a;
    --act: #333;
    --txt: #e5e5e5;
    --txt2: #9b9a97;
    --ph: #5a5a5a;
    --brd: #2e2e2e;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-light: rgba(59,130,246,0.12);
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --selection: rgba(59,130,246,0.3);
    --code-bg: #1a1a1a;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 24px rgba(0,0,0,0.5);
    --radius: 6px;
    --radius-lg: 6px;
    --sidebar-width: 260px;
    --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
}

body {
    font-family:var(--font); background:var(--bg); color:var(--txt);
    height:100vh; overflow:hidden;
}

::selection { background:var(--selection); }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#3a3a3a; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#4a4a4a; }

#app { display:flex; height:100vh; }

#app.sidebar-hidden #sidebar { width:0 !important; min-width:0 !important; overflow:hidden; border-right-width:0; opacity:0; pointer-events:none; }
#app.sidebar-hidden #editor { flex:1; }

.sidebar-toggle {
    position:fixed; top:10px; left:10px; z-index:35;
    width:32px; height:32px; border-radius:6px;
    border:1px solid var(--brd); background:var(--bg2); color:var(--txt2);
    display:none; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:var(--shadow);
}
.sidebar-toggle:hover { background:var(--hov); color:var(--txt); border-color:var(--accent); }
.sidebar-toggle.is-close { left: calc(var(--sidebar-width) + 8px); }
#app.sidebar-hidden .sidebar-toggle.is-close { left:10px; }

/* Inline collapse button lives inside tabs-bar — never overlaps tabs. */
.sidebar-toggle-inline {
    width:28px; height:28px; border-radius:6px; flex-shrink:0;
    border:1px solid var(--brd); background:var(--bg2); color:var(--txt2);
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:12px; margin-right:8px; align-self:center;
}
.sidebar-toggle-inline:hover { background:var(--hov); color:var(--txt); border-color:var(--accent); }

.sidebar-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:30;
}
.sidebar-overlay.hidden { display:none !important; }

#sidebar {
    width:var(--sidebar-width); min-width:var(--sidebar-width);
    background:var(--side); border-right:1px solid var(--brd);
    display:flex; flex-direction:column; overflow:hidden;
    transition: width .22s ease, min-width .22s ease, transform .22s ease, opacity .18s ease;
}

.sidebar-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; border-bottom:1px solid var(--brd);
}
.sidebar-logo { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--txt); }
.sidebar-logo i { color:var(--accent); font-size:15px; }

.new-note-btn {
    width:28px; height:28px; border-radius:var(--radius);
    border:none; background:transparent; color:var(--txt2);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:13px;
}
.new-note-btn:hover { background:var(--hov); color:var(--txt); }
.new-note-btn + .new-note-btn { margin-left:8px; }
.sidebar-header-actions { display:flex; align-items:center; }

.sidebar-search {
    display:flex; align-items:center; gap:8px;
    padding:6px 10px; margin:8px 12px;
    background:var(--bg); border:1px solid var(--brd);
    border-radius:var(--radius);
}
.sidebar-search:focus-within { border-color:var(--accent); }
.sidebar-search i { color:var(--txt2); font-size:12px; }
.sidebar-search input {
    border:none; outline:none; background:transparent;
    font-size:13px; color:var(--txt); width:100%; font-family:var(--font);
}
.sidebar-search input::placeholder { color:var(--ph); }

.sidebar-actions { padding:2px 12px; }
.back-link {
    display:flex; align-items:center; gap:8px;
    padding:6px 10px; border-radius:var(--radius);
    color:var(--txt2); text-decoration:none; font-size:13px;
}
.back-link:hover { background:var(--hov); color:var(--txt); }

.notes-list { flex:1; overflow-y:auto; padding:4px 6px; }

.note-item {
    display:flex; align-items:center; gap:8px;
    padding:6px 10px; border-radius:var(--radius);
    cursor:pointer; position:relative;
}
.note-item:hover { background:var(--hov); }
.note-item.active { background:var(--accent-light); }
.note-item-icon { font-size:13px; flex-shrink:0; color:var(--txt2); width:18px; text-align:center; }
.note-item-info { flex:1; min-width:0; }
.note-item-title { font-size:13px; font-weight:500; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note-item-date { font-size:11px; color:var(--txt2); white-space:nowrap; flex-shrink:0; }
.note-item .note-delete-btn {
    opacity:0; width:20px; height:20px; border-radius:4px;
    border:none; background:transparent; color:var(--txt2);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:10px; flex-shrink:0;
}
.note-item:hover .note-delete-btn { opacity:1; }
.note-item .note-delete-btn:hover { color:var(--danger); background:rgba(239,68,68,0.1); }

.sidebar-footer { padding:8px 16px; border-top:1px solid var(--brd); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.note-count { font-size:11px; color:var(--txt2); }
.trash-btn { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; border:1px solid var(--brd); background:transparent; color:var(--txt2); font-size:11px; cursor:pointer; }
.trash-btn:hover { background:var(--hov); color:var(--txt); border-color:var(--brd); }

#editor { flex:1; display:flex; flex-direction:column; background:var(--bg); overflow:hidden; position:relative; }

.empty-state {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding:40px; text-align:center;
}
.empty-icon {
    width:52px; height:52px; border-radius:6px;
    background:var(--bg2); display:flex; align-items:center; justify-content:center;
    font-size:22px; color:var(--txt2); margin-bottom:18px; border:1px solid var(--brd);
}
.empty-state h2 { font-size:15px; font-weight:600; color:var(--txt); margin-bottom:4px; }
.empty-state p { font-size:13px; color:var(--txt2); margin-bottom:20px; }
.empty-new-btn {
    padding:8px 16px; border:none; border-radius:var(--radius);
    background:var(--accent); color:#fff; font-size:13px; font-weight:500;
    cursor:pointer; display:flex; align-items:center; gap:8px;
    font-family:var(--font);
}
.empty-new-btn:hover { background:var(--accent-hover); }

.tabs-bar {
    display:flex; align-items:center;
    padding:10px 20px 0 16px;
}
.tabs-container {
    display:flex; align-items:flex-end; gap:4px;
    overflow-x:auto; padding-bottom:6px; width:100%;
}
.tab {
    display:flex; align-items:center; gap:8px;
    padding:5px 8px 5px 12px; border-radius:6px 6px 0 0;
    background:var(--bg2); border:1px solid var(--brd); border-bottom:none;
    cursor:pointer; font-size:12px; color:var(--txt2);
    max-width:180px; min-width:80px; flex-shrink:0;
    user-select:none;
}
.tab:hover { color:var(--txt); }
.tab.active { background:var(--bg); color:var(--txt); }
.tab-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.tab-close {
    width:18px; height:18px; border-radius:4px;
    border:none; background:transparent; color:var(--txt2);
    cursor:pointer; font-size:10px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.tab-close:hover { background:var(--hov); color:var(--txt); }

.editor-content {
    flex:1; overflow-y:auto;
    max-width:var(--editor-width, 1000px); width:100%; margin:0 auto; padding:0 24px 120px;
}

#editor-resize-handle {
    position:absolute; right:0; top:0; bottom:0;
    width:10px; cursor:col-resize; z-index:10;
    background:linear-gradient(to left, rgba(255,255,255,0.06), transparent);
    border-left:1px solid rgba(255,255,255,0.04);
    transition:background 0.15s;
}
#editor-resize-handle:hover, #editor-resize-handle.dragging {
    background:var(--accent);
    border-left-color:var(--accent);
    opacity:0.55;
}

.icon-area { position:relative; padding:20px 0 0; }
.note-icon-wrapper {
    display:inline-flex; align-items:center; gap:6px;
    position:relative;
}
.note-icon {
    font-size:32px; line-height:1; width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    border-radius:6px; cursor:pointer;
}
.note-icon:hover { background:var(--hov); }
.icon-picker-btn {
    width:20px; height:20px; border-radius:4px;
    border:1px dashed var(--brd); background:transparent;
    color:var(--txt2); cursor:pointer; font-size:9px;
    display:flex; align-items:center; justify-content:center;
}
.icon-picker-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }

.icon-picker {
    position:absolute; top:100%; left:0; z-index:50;
    width:220px; background:var(--bg2); border:1px solid var(--brd);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
    padding:8px; margin-top:6px;
}
.icon-picker-header {
    font-size:10px; font-weight:600; text-transform:uppercase;
    letter-spacing:0.04em; color:var(--txt2); padding:0 4px 6px;
}
.icon-picker-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.icon-option {
    width:100%; aspect-ratio:1; border-radius:var(--radius);
    border:none; background:transparent; color:var(--txt2);
    cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center;
}
.icon-option:hover { background:var(--hov); color:var(--txt); }

.title-area { padding:6px 0 6px; }
.note-title {
    font-size:30px; font-weight:700; line-height:1.3;
    color:var(--txt); outline:none; cursor:text;
    min-height:1.3em; word-wrap:break-word; margin-bottom:4px;
}
.note-title:empty::before { content:attr(data-placeholder); color:var(--ph); }
.title-meta {
    display:flex; align-items:center; gap:16px;
    font-size:12px; color:var(--txt2);
    margin-bottom:16px; padding-bottom:10px;
    border-bottom:1px solid var(--brd);
}

.blocks-container { min-height:80px; }

.block {
    display:flex; align-items:flex-start; gap:2px;
    padding:1px 0; position:relative;
    margin-left:-24px; padding-left:24px;
    border-radius:3px;
}
.block:hover { background:var(--hov); }

.block-content {
    flex:1; min-width:0; position:relative;
    outline:none; cursor:text;
}
.block-content:empty::before {
    content:attr(data-placeholder); color:var(--ph); pointer-events:none;
}

.block-text .block-content { font-size:14px; line-height:1.7; padding:2px 0; min-height:1.7em; }

.block-heading1 .block-content { font-size:26px; font-weight:700; line-height:1.3; padding:5px 0; min-height:1.3em; }
.block-heading2 .block-content { font-size:20px; font-weight:600; line-height:1.3; padding:4px 0; min-height:1.3em; }
.block-heading3 .block-content { font-size:16px; font-weight:600; line-height:1.4; padding:3px 0; min-height:1.5em; }

.block-bullet { padding-left:2px; }
.block-bullet .block-bullet-marker {
    display:flex; align-items:flex-start; padding:7px 10px 0 6px; flex-shrink:0;
}
.block-bullet .block-bullet-marker::before {
    content:''; width:5px; height:5px; border-radius:50%; background:var(--txt2); margin-top:7px;
}
.block-bullet .block-content { font-size:14px; line-height:1.7; padding:2px 0; min-height:1.7em; }

.block-todo { padding-left:0; gap:6px; }
.block-todo-checkbox {
    width:16px; height:16px; min-width:16px;
    border:2px solid var(--txt2); border-radius:3px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0; margin-top:6px;
    background:transparent; padding:0;
}
.block-todo-checkbox:hover { border-color:var(--accent); }
.block-todo-checkbox.checked { background:var(--accent); border-color:var(--accent); }
.block-todo-checkbox.checked::after {
    content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900;
    font-size:9px; color:#fff;
}
.block-todo .block-content { font-size:14px; line-height:1.7; padding:2px 0; min-height:1.7em; }
.block-todo .block-content.checked { text-decoration:line-through; color:var(--txt2); }

.block-quote { padding-left:12px; border-left:3px solid var(--accent); margin:3px 0; }
.block-quote .block-content { font-size:14px; line-height:1.7; padding:4px 0; color:#b0b0b4; font-style:italic; }

.block-code { margin:3px 0; }
.block-code .block-content {
    display:block; font-family:'SF Mono','Fira Code','Consolas',monospace;
    font-size:13px; line-height:1.5; padding:10px 14px;
    background:var(--code-bg); border-radius:var(--radius);
    white-space:pre-wrap; word-break:break-word; tab-size:2;
    border:1px solid var(--brd); min-height:40px;
}

.block-divider { padding:5px 0; cursor:default; }
.block-divider-line { height:1px; background:var(--brd); width:100%; }

.block-add-btn {
    position:absolute; right:100%; top:0; bottom:0;
    width:22px; display:flex; align-items:center; justify-content:center;
    opacity:0; border:none; background:transparent;
    color:var(--txt2); cursor:pointer; font-size:12px;
}
.block:hover .block-add-btn { opacity:1; }
.block-add-btn:hover { color:var(--accent); }

/* Stack (mixed) block - contains heading+text+todos together */
.block-stack { flex-direction:column; align-items:stretch; background:var(--bg2); border:1px solid var(--brd); border-radius:6px; padding:10px 12px; margin:6px 0; gap:0; }
.block-stack:hover { background:var(--bg2); }
.block-stack .stack-header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 0 8px; border-bottom:1px dashed var(--brd); margin-bottom:6px; }
.block-stack .stack-title { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--txt2); display:flex; align-items:center; gap:6px; }
.block-stack .stack-title i { color:var(--acc-base, var(--accent)); }
.block-stack .stack-actions { display:flex; gap:4px; }
.stack-actions .stack-add-btn { width:22px; height:22px; border-radius:6px; border:1px solid var(--brd); background:transparent; color:var(--txt2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:10px; }
.stack-actions .stack-add-btn:hover, .stack-actions .stack-icon-btn:hover { border-color:var(--acc-edge, var(--accent)); color:var(--acc-base, var(--accent)); background:var(--acc-soft, var(--accent-light)); }
.stack-children { display:flex; flex-direction:column; gap:1px; }
.stack-child { display:flex; align-items:flex-start; gap:6px; padding:2px 0; position:relative; border-radius:4px; }
.stack-child:hover { background:rgba(255,255,255,.03); }
.stack-child .stack-child-content { flex:1; min-width:0; outline:none; cursor:text; }
.stack-child .stack-child-content:empty::before { content:attr(data-placeholder); color:var(--ph); pointer-events:none; }
.stack-child.child-heading1 .stack-child-content { font-size:22px; font-weight:700; line-height:1.3; padding:4px 0; }
.stack-child.child-heading2 .stack-child-content { font-size:18px; font-weight:600; line-height:1.3; padding:3px 0; }
.stack-child.child-heading3 .stack-child-content { font-size:15px; font-weight:600; line-height:1.4; padding:2px 0; }
.stack-child.child-text .stack-child-content { font-size:14px; line-height:1.7; padding:2px 0; }
.stack-child.child-bullet { padding-left:2px; }
.stack-child.child-bullet .stack-bullet-marker { display:flex; align-items:flex-start; padding:7px 8px 0 4px; flex-shrink:0; }
.stack-child.child-bullet .stack-bullet-marker::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--txt2); margin-top:7px; }
.stack-child.child-todo .stack-todo-checkbox { width:15px; height:15px; min-width:15px; border:2px solid var(--txt2); border-radius:3px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; margin-top:6px; background:transparent; padding:0; }
.stack-child.child-todo .stack-todo-checkbox.checked { background:var(--acc-base, var(--accent)); border-color:var(--acc-base, var(--accent)); }
.stack-child.child-todo .stack-todo-checkbox.checked::after { content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:8px; color:#fff; }
.stack-child.child-todo .stack-child-content.checked { text-decoration:line-through; color:var(--txt2); }
.stack-child.child-quote { border-left:3px solid var(--acc-base, var(--accent)); padding-left:10px; margin:2px 0; }
.stack-child.child-quote .stack-child-content { font-size:14px; line-height:1.7; padding:4px 0; color:#b0b0b4; font-style:italic; }
.stack-child.child-code .stack-child-content { display:block; font-family:'SF Mono','Fira Code','Consolas',monospace; font-size:13px; line-height:1.5; padding:8px 10px; background:var(--code-bg); border-radius:6px; white-space:pre-wrap; word-break:break-word; border:1px solid var(--brd); min-height:32px; }
.stack-child.child-divider { padding:6px 0; }
.stack-child.child-divider .stack-divider-line { height:1px; background:var(--brd); width:100%; }
.stack-child .stack-child-del { opacity:0; width:18px; height:18px; border-radius:4px; border:none; background:transparent; color:var(--txt2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; margin-top:4px; }
.stack-child:hover .stack-child-del { opacity:1; }
.stack-child .stack-child-del:hover { background:rgba(239,68,68,.12); color:var(--danger); }

.block-menu {
    position:fixed; z-index:100; width:264px; max-width:calc(100vw - 16px);
    max-height:min(70vh, 480px); overflow-y:auto;
    background:var(--bg2); border:1px solid var(--brd);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
    padding:5px;
}
.field-preset-pop { position:fixed; z-index:450; width:248px; max-width:calc(100vw - 16px); max-height:min(60vh, 320px); overflow-y:auto; background:var(--bg2); border:1px solid var(--brd); border-radius:6px; box-shadow:0 16px 48px rgba(0,0,0,.5); padding:6px; touch-action:pan-y; }
.field-preset-head { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--txt2); padding:4px 8px 6px; }
.field-preset-item { display:flex; align-items:center; gap:8px; width:100%; padding:9px 10px; border-radius:6px; border:none; background:transparent; color:var(--txt); font-size:13px; cursor:pointer; font-family:var(--font); text-align:left; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
.field-preset-item:hover, .field-preset-item.is-active { background:var(--hov); }
.field-preset-item i { margin-left:auto; font-size:10px; color:var(--txt2); }
.field-preset-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.field-preset-empty { padding:8px; font-size:11px; color:var(--txt2); }
.block-menu-header {
    font-size:10px; font-weight:600; text-transform:uppercase;
    letter-spacing:0.04em; color:var(--txt2); padding:5px 8px 4px;
}
.block-menu-items { display:flex; flex-direction:column; gap:2px; }
.block-menu-item {
    display:flex; align-items:center; gap:8px;
    padding:6px 8px; border-radius:var(--radius);
    border:none; background:transparent; color:var(--txt);
    font-size:12px; cursor:pointer; font-family:var(--font); width:100%; text-align:left;
}
.block-menu-item:hover { background:var(--hov); }
.block-menu-item.menu-item-active { background:var(--accent-light); }
.block-menu-item i { width:16px; text-align:center; color:var(--txt2); font-size:11px; }

.context-menu {
    position:fixed; z-index:250; min-width:160px;
    background:var(--bg2); border:1px solid var(--brd);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
    padding:5px;
}
.ctx-item {
    display:flex; align-items:center; gap:8px;
    padding:6px 8px; border-radius:var(--radius);
    border:none; background:transparent; color:var(--txt);
    font-size:12px; cursor:pointer; font-family:var(--font); width:100%; text-align:left;
}
.ctx-item:hover { background:var(--hov); }
.ctx-item i { width:16px; text-align:center; font-size:11px; }
.ctx-item.ctx-danger { color:var(--danger); }
.ctx-item.ctx-danger:hover { background:rgba(239,68,68,0.12); }
.ctx-item.ctx-danger i { color:var(--danger); }

.save-indicator { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; color:var(--txt2); padding:2px 8px; border-radius:999px; background:var(--bg2); border:1px solid var(--brd); transition:all .18s; }
.save-indicator i { font-size:7px; }
.save-indicator.saving { color:#eab308; border-color:rgba(234,179,8,.3); background:rgba(234,179,8,.1); }
.save-indicator.saving i { animation: savePulse 1s infinite; }
.save-indicator.saved { color:#22c55e; border-color:rgba(34,197,94,.3); background:rgba(34,197,94,.1); }
.save-indicator.error { color:#ef4444; border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.12); }
@keyframes savePulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.sync-banner { display:flex; align-items:center; gap:10px; margin:10px 0 8px; padding:8px 12px; border-radius:6px; background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.3); color:#93c5fd; font-size:12px; }
.sync-banner i.fa-arrows-rotate { animation: spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg) } }
.sync-reload-btn { margin-left:auto; padding:4px 10px; border-radius:6px; border:none; background:var(--accent); color:#fff; font-size:11px; font-weight:600; cursor:pointer; }
.sync-reload-btn:hover { background:var(--accent-hover); }
.sync-dismiss-btn { width:22px; height:22px; border-radius:4px; border:none; background:transparent; color:var(--txt2); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sync-dismiss-btn:hover { background:var(--hov); color:var(--txt); }
.sonar-toast { position:fixed; right:12px; top:12px; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:6px; background:#17212b; color:#e2e8f0; font-size:12px; font-weight:600; border:1px solid rgba(255,255,255,.08); border-left:3px solid rgba(34,197,94,.8); box-shadow:0 12px 32px rgba(0,0,0,.45); z-index:300; opacity:0; pointer-events:none; transform:translateX(16px); transition:all .22s; max-width:min(360px,calc(100vw - 24px)); }
.sonar-toast.show { opacity:1; transform:translateX(0); }
.sonar-toast i { color:#22c55e; }
.sonar-ring { position:fixed; right:36px; top:28px; width:12px; height:12px; border-radius:50%; border:2px solid rgba(34,197,94,.9); pointer-events:none; z-index:299; animation: sonarRing 650ms ease-out forwards; }
@keyframes sonarRing { 0%{ transform:scale(1); opacity:.95 } 100%{ transform:scale(7); opacity:0 } }

.modal-overlay { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); padding:16px; }
.modal-overlay.hidden { display:none !important; }
.modal-card { width:520px; max-width:100%; background:var(--bg2); border:1px solid var(--brd); border-radius:6px; box-shadow:var(--shadow-lg); padding:16px; display:flex; flex-direction:column; gap:12px; }
.modal-card-wide { width:640px; max-height:80vh; }
.modal-card-header { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--txt); }
.modal-card-header h3 { flex:1; font-size:14px; }
.modal-x { width:28px; height:28px; border-radius:6px; border:none; background:transparent; color:var(--txt2); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.modal-x:hover { background:var(--hov); color:var(--txt); }
.modal-card-desc { font-size:12px; line-height:1.5; color:var(--txt2); }
.modal-card-hint { font-size:11px; color:var(--txt2); }
.modal-card-input { width:100%; padding:8px 10px; border-radius:6px; border:1px solid var(--brd); background:var(--bg); color:var(--txt); font-size:13px; outline:none; }
.modal-card-input:focus { border-color:var(--accent); }
.modal-card-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:4px; }
.modal-btn { padding:7px 12px; border-radius:6px; border:1px solid var(--brd); background:var(--bg); color:var(--txt); font-size:12px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.modal-btn:disabled { opacity:.45; cursor:not-allowed; }
.modal-btn-ghost:hover { background:var(--hov); }
.modal-btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.modal-btn-danger:hover:not(:disabled) { background:var(--danger-hover); }
.trash-list { flex:1; overflow-y:auto; max-height:50vh; display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--brd); padding-top:10px; }
.trash-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; border:1px solid var(--brd); background:var(--bg); }
.trash-item:hover { background:var(--hov); }
.trash-item-info { flex:1; min-width:0; }
.trash-item-title { font-size:13px; font-weight:500; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trash-item-date { font-size:11px; color:var(--txt2); }
.trash-item-actions { display:flex; gap:6px; }
.trash-item-actions button { padding:5px 8px; border-radius:6px; border:1px solid var(--brd); background:transparent; font-size:11px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.trash-item-actions .restore-btn { color:#22c55e; border-color:rgba(34,197,94,.3); }
.trash-item-actions .restore-btn:hover { background:rgba(34,197,94,.12); }
.trash-item-actions .perm-del-btn { color:var(--danger); border-color:rgba(239,68,68,.3); }
.trash-item-actions .perm-del-btn:hover { background:rgba(239,68,68,.12); }
.trash-undo-bar { position:fixed; right:12px; top:12px; z-index:210; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:6px; background:#17212b; color:#e2e8f0; border:1px solid rgba(255,255,255,.08); box-shadow:0 12px 32px rgba(0,0,0,.45); font-size:12px; max-width:min(360px,calc(100vw - 24px)); }
.trash-undo-bar.hidden { display:none !important; }
.trash-undo-btn { padding:5px 10px; border-radius:6px; border:none; background:var(--accent); color:#fff; font-size:11px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.trash-undo-btn:hover { background:var(--accent-hover); }
.trash-undo-btn.trash-undo-view { background:transparent; border:1px solid #334155; color:var(--txt); }
.trash-undo-btn.trash-undo-view:hover { background:var(--hov); }
.trash-undo-close { width:24px; height:24px; border-radius:6px; border:none; background:transparent; color:var(--txt2); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.trash-undo-close:hover { background:var(--hov); color:var(--txt); }

.editor-footer { padding:20px 0 8px; margin-top:32px; }
.footer-info { font-size:12px; color:var(--txt2); }
.footer-hints { margin-top:6px; font-size:11px; line-height:1.6; color:var(--txt2); opacity:.75; }
.footer-hints b { font-weight:600; color:var(--txt); background:var(--bg2); border:1px solid var(--brd); border-radius:4px; padding:0 4px; }

/* ---- Stack v2: mixed block card ---- */
.block-stack { border-radius:6px; padding:8px 10px 10px; box-shadow:0 4px 18px rgba(0,0,0,.28); }
.block-stack .stack-header { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 0 8px; border-bottom:1px dashed var(--brd); margin-bottom:6px; }
.block-stack .stack-title { flex:1 1 auto; min-width:0; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--txt2); display:flex; align-items:center; gap:8px; }
.block-stack .stack-title i { color:var(--acc-base, var(--accent)); }
.stack-summary-pill { font-size:10px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--txt2); background:rgba(255,255,255,.05); border:1px solid var(--brd); border-radius:999px; padding:1px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%; }
.block-stack.is-collapsed .stack-summary-pill { display:none; }
.stack-summary { display:none; flex:1 1 100%; font-size:12px; color:var(--txt2); padding:2px 0 0 30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.block-stack.is-collapsed .stack-summary { display:block; }
.block-stack.is-collapsed .stack-children { display:none; }
.block-stack.is-collapsed .stack-header { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.stack-icon-btn { width:24px; height:24px; border-radius:6px; border:1px solid var(--brd); background:transparent; color:var(--txt2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.stack-icon-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.stack-chev i { transition:transform .18s; }
.block-stack.is-collapsed .stack-chev i { transform:rotate(-90deg); }
.stack-icon-btn.stack-del-btn:hover { border-color:var(--danger); color:var(--danger); background:rgba(239,68,68,.12); }
.stack-child:focus-within { background:rgba(255,255,255,.045); box-shadow:inset 2px 0 0 var(--accent); }
.stack-drag { opacity:0; cursor:grab; color:var(--txt2); font-size:10px; padding:6px 2px; flex-shrink:0; display:flex; align-items:center; }
.stack-child:hover .stack-drag { opacity:.8; }
.stack-drag:active { cursor:grabbing; }
.stack-child.dragging { opacity:.35; }
.stack-child.drop-before { box-shadow:0 -2px 0 0 var(--accent); border-radius:0; }
.stack-child.drop-after { box-shadow:0 2px 0 0 var(--accent); border-radius:0; }
.stack-child.child-heading1::after, .stack-child.child-heading2::after,
.stack-child.child-heading3::after, .stack-child.child-quote::after,
.stack-child.child-code::after { display:none; position:absolute; right:26px; top:6px; font-size:9px; font-weight:700; letter-spacing:.05em; color:var(--accent); background:var(--accent-light); border:1px solid var(--brd); border-radius:4px; padding:0 5px; pointer-events:none; }
.stack-child.child-heading1::after { content:'H1'; }
.stack-child.child-heading2::after { content:'H2'; }
.stack-child.child-heading3::after { content:'H3'; }
.stack-child.child-quote::after { content:'QUOTE'; }
.stack-child.child-code::after { content:'CODE'; }
.stack-child:hover::after, .stack-child:focus-within::after { display:block; }
@media (pointer:coarse) { .stack-drag { display:none; } }

/* ---- Credential field rows: label + value + copy ---- */
.stack-child.child-field { align-items:center; gap:8px; background:rgba(255,255,255,.03); border:1px solid var(--brd); border-radius:6px; padding:6px 8px; margin:3px 0; }
.stack-child.child-field:hover { background:rgba(255,255,255,.05); }
.stack-field-label { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--acc-ink, var(--accent)); background:var(--acc-soft, var(--accent-light)); border:1px solid var(--brd); padding:3px 9px; border-radius:999px; outline:none; white-space:nowrap; overflow:hidden; max-width:38%; flex-shrink:0; cursor:text; }
.stack-field-label:empty::before { content:attr(data-placeholder); color:var(--ph); pointer-events:none; }
.stack-field-value { flex:1; min-width:0; outline:none; cursor:text; font-size:13px; line-height:1.6; font-family:ui-monospace,'SF Mono','Fira Code','Consolas',monospace; word-break:break-all; }
.stack-field-value:empty::before { content:attr(data-placeholder); color:var(--ph); pointer-events:none; font-family:var(--font); }
.stack-field-value.is-masked { -webkit-text-security:disc; }
.stack-field-btn { opacity:.55; width:24px; height:24px; border-radius:6px; border:1px solid transparent; background:transparent; color:var(--txt2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.stack-child:hover .stack-field-btn { opacity:1; }
.stack-field-btn:hover { color:var(--txt); background:var(--hov); border-color:var(--brd); }
.stack-field-btn.is-on { opacity:1; color:var(--acc-base, var(--accent)); border-color:var(--brd); }
.history-btn { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; border:1px solid var(--brd); background:var(--bg2); color:var(--txt2); cursor:pointer; font-size:11px; }
.history-btn:hover:not(:disabled) { color:var(--txt); background:var(--hov); }
.history-btn:disabled { opacity:.35; cursor:default; }
.block-undo-offset { top:64px; }

@media (max-width:768px) {
    .sidebar-toggle { display:flex; }
    #sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar-width); min-width:var(--sidebar-width); max-width:85vw; z-index:31; transform:translateX(0); border-right:1px solid var(--brd); border-bottom:none; max-height:none; }
    #app.sidebar-hidden #sidebar { transform:translateX(-100%); width:var(--sidebar-width) !important; min-width:var(--sidebar-width) !important; opacity:1; pointer-events:auto; }
    #app { flex-direction:column; }
    #editor { min-height:100vh; }
    .editor-content { max-width:100%; padding:0 16px 80px; padding-top:44px; }
    .note-title { font-size:24px; }
    .block { margin-left:-16px; padding-left:16px; }
    #editor-resize-handle { display:none; }
}
@media (min-width:769px) {
    .sidebar-toggle { display:flex; }
}
/* ---- Compact credential card: one named, collapsible container ---- */
.block-card { flex-direction:column; align-items:stretch; background:linear-gradient(180deg, var(--bg2), var(--bg)); border:1px solid var(--brd); border-left:3px solid var(--acc-base, var(--accent)); border-radius:6px; padding:8px 10px 10px; margin:8px 0; gap:0; box-shadow:0 4px 18px rgba(0,0,0,.28); }
.card-header { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 0 8px; border-bottom:1px dashed var(--brd); margin-bottom:6px; }
.card-title { flex:1 1 auto; min-width:60px; font-size:14px; font-weight:700; color:var(--txt); outline:none; cursor:text; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-title:empty::before { content:attr(data-placeholder); color:var(--ph); pointer-events:none; font-weight:500; }
.card-summary { display:none; flex:1 1 100%; font-size:12px; color:var(--txt2); padding:2px 0 0 32px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.block-card.is-collapsed .card-summary { display:block; }
.block-card.is-collapsed .stack-children { display:none; }
.block-card.is-collapsed .card-header { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.block-card.is-collapsed .card-chev i { transform:rotate(-90deg); }
.card-chev i { transition:transform .18s; }
.card-rows { gap:2px; }
.block-card .stack-child.child-field { margin:2px 0; }

/* ---- Sidebar: groups, rich rows, pins, sort ---- */
.sidebar-sort { display:flex; align-items:center; gap:8px; padding:0 16px 8px; font-size:11px; color:var(--txt2); }
.sidebar-sort label { text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.sidebar-sort select { flex:1; min-width:0; background:var(--bg2); color:var(--txt); border:1px solid var(--brd); border-radius:6px; font-size:11px; padding:3px 6px; outline:none; font-family:var(--font); }
.notes-group-label { display:flex; align-items:center; gap:6px; padding:10px 10px 4px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--txt2); }
.notes-group-label i { font-size:9px; color:var(--accent); }
.notes-empty { padding:18px 12px; text-align:center; font-size:12px; color:var(--txt2); }
.note-item-info { display:flex; flex-direction:column; min-width:0; }
.note-item-snippet { font-size:11px; color:var(--txt2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note-item-side { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; }
.note-item-hover-btns { display:flex; align-items:center; gap:2px; }
.note-item-badge { color:var(--accent); font-size:10px; }
.note-cloud-badge { color:#22c55e; }
.note-pin-btn { opacity:0; width:20px; height:20px; border-radius:4px; border:none; background:transparent; color:var(--txt2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.note-item:hover .note-pin-btn { opacity:1; }
.note-pin-btn:hover { color:var(--accent); background:var(--accent-light); }
.note-pin-btn.is-pinned { opacity:1; color:var(--accent); }
.note-item .note-delete-btn { opacity:0; }
.note-item:hover .note-delete-btn { opacity:1; }
.trash-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--danger); color:#fff; font-size:10px; font-weight:700; }

/* ---- Tabs: dirty dot + two-tap close ---- */
.tab-dirty { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.tabs-empty { font-size:11px; color:var(--ph); padding:6px 4px; white-space:nowrap; }
.tab-close.is-armed { background:rgba(239,68,68,.35) !important; color:#fff !important; animation:armPulse 1s infinite; }

/* ---- Shared accent palette popover ---- */
.color-popover { position:fixed; z-index:400; width:196px; background:var(--bg2); border:1px solid var(--brd); border-radius:6px; box-shadow:0 16px 48px rgba(0,0,0,.5); padding:10px; }
.color-pop-title { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--txt2); padding:0 2px 8px; }
.color-pop-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; }
.color-swatch { width:100%; aspect-ratio:1; border-radius:6px; border:2px solid transparent; cursor:pointer; padding:0; }
.color-swatch:hover { transform:scale(1.12); }
.color-swatch.is-active { border-color:#fff; box-shadow:0 0 0 2px var(--bg); }
.color-pop-clear { margin-top:8px; width:100%; padding:5px; border-radius:6px; border:1px solid var(--brd); background:transparent; color:var(--txt2); font-size:11px; cursor:pointer; font-family:var(--font); }
.color-pop-clear:hover { color:var(--txt); background:var(--hov); }

/* ---- Selection color toolbar ---- */
.sel-color-bar { position:fixed; z-index:500; display:flex; align-items:center; gap:5px; background:var(--bg2); border:1px solid var(--brd); border-radius:6px; box-shadow:0 16px 48px rgba(0,0,0,.5); padding:7px 8px; max-width:calc(100vw - 16px); flex-wrap:wrap; }
.sel-color-swatch { width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.18); cursor:pointer; padding:0; flex-shrink:0; }
.sel-color-swatch:hover { transform:scale(1.2); border-color:#fff; }
.sel-color-clear { width:24px; height:24px; border-radius:6px; border:1px solid var(--brd); background:transparent; color:var(--txt2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.sel-color-clear:hover { color:var(--txt); background:var(--hov); }

/* ---- Two-tap delete confirm ---- */
@keyframes armPulse {
    0%, 100% { transform:scale(1); }
    50% { transform:scale(1.18); }
}
.del-confirm-btn.is-armed { background:rgba(239,68,68,.35) !important; color:#fff !important; border-color:rgba(239,68,68,.65) !important; animation:armPulse 1s infinite; }
.ctx-item.del-confirm-btn.is-armed { background:rgba(239,68,68,.22) !important; color:#fecaca !important; }
.stack-child-del.del-confirm-btn.is-armed { opacity:1; }

/* ---- End-of-note adder: always a way out, even for single-stack notes ---- */
.blocks-end-adder { display:flex; align-items:center; gap:8px; width:100%; margin:10px 0 4px; padding:9px 12px; border-radius:6px; border:1px dashed var(--brd); background:transparent; color:var(--txt2); font-size:12px; cursor:pointer; font-family:var(--font); opacity:.65; }
.blocks-end-adder:hover { opacity:1; color:var(--txt); border-color:var(--accent); background:var(--accent-light); }
.blocks-end-adder i { font-size:11px; }
/* Touch screens have no hover: keep per-block + buttons discoverable */
@media (pointer:coarse) {
  .block-add-btn { opacity:.9; }
  .stack-child-del { opacity:.9; }
}

/* ==========================================================================
   AMOLED theme — true black for Notes. Opt-in via <html data-theme="amoled">.
   Mirrors the chat app so both surfaces match.
   ========================================================================== */
:root[data-theme="amoled"] {
    --bg: #000000;
    --bg2: #000000;
    --side: #000000;
    --hov: #141414;
    --act: #1c1c1c;
    --txt: #f2f2f2;
    --txt2: #9aa0a6;
    --ph: #4d4d4d;
    --brd: #1a1a1a;
    --accent: #4f9dff;
    --accent-hover: #3b8bef;
    --accent-light: rgba(79,157,255,0.14);
    --code-bg: #050505;
    --selection: rgba(79,157,255,0.32);
    --shadow: 0 1px 3px rgba(0,0,0,0.9);
    --shadow-lg: 0 4px 24px rgba(0,0,0,0.95);
}

:root[data-theme="amoled"] body { background:#000; }

/* Popovers/menus/toasts that hardcode a dark slate panel. */
:root[data-theme="amoled"] .field-preset-pop,
:root[data-theme="amoled"] .color-popover,
:root[data-theme="amoled"] .block-menu,
:root[data-theme="amoled"] .sonar-toast,
:root[data-theme="amoled"] .trash-undo-bar,
:root[data-theme="amoled"] .modal-card,
:root[data-theme="amoled"] .ctx-menu { background:#000; }

/* Delete-undo alerts keep their red accent edge but sit on black. */
:root[data-theme="amoled"] .delete-undo-item,
:root[data-theme="amoled"] #delete-undo-bar > div { background:#000; }

/* Sidebar / editor surfaces that use literal hexes. */
:root[data-theme="amoled"] .sidebar { background:#000; border-right-color:#1a1a1a; }
:root[data-theme="amoled"] .editor-header,
:root[data-theme="amoled"] .editor-footer,
:root[data-theme="amoled"] .tabs-bar,
:root[data-theme="amoled"] .sidebar-header,
:root[data-theme="amoled"] .sidebar-search { background:#000; }
:root[data-theme="amoled"] .tab.active { background:#0d0d0d; }

/* Theme toggle button in the notes sidebar. */
:root[data-theme="amoled"] #theme-toggle-btn { color:var(--accent); }