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

:root {
  --bg:          #0a0a0a;
  --surface:     #111;
  --border:      #252525;
  --border-hi:   #383838;
  --text:        #d8d8d8;
  --dim:         #585858;
  --muted:       #8a8a8a;
  --accent:      #999;
  --accent-dim:  #404040;
  --font:        'Courier New', 'Lucida Console', monospace;
  --prose-font:  system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hex-empty:    #1c1c1c;
  --hex-stroke:   #2e2e2e;
  --hex-x:        #c8c8c8;
  --hex-o-stroke: #888888;
  --hex-o-bg:     #202020;
  --hex-o-stripe: #909090;
  --hex-dot:      #3a3a3a;
  --hex-label-x:  #1a1a1a;
  --hex-label-o:  #a0a0a0;
  --hex-hover:    #262626;
  --board-bg:     #070707;
  --header-h:    44px;
  --toolbar-h:   42px;
  --footer-h:    28px;
  --lib-side-w:  180px;
  --note-w:      260px;
}

html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:var(--font); font-size:13px; letter-spacing:.04em; }

input[type="number"], input[type="text"], textarea { background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:var(--font); font-size:13px; }
input[type="number"] { width:48px; appearance:textfield; padding:3px 6px; }
input[type="number"]::-webkit-inner-spin-button { display:none; }
input[type="text"] { padding:3px 6px; }
input:focus, textarea:focus { outline:none; border-color:var(--accent-dim); }

.btn { background:transparent; border:1px solid var(--border); color:var(--muted); font-family:var(--font); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:5px 12px; cursor:pointer; transition:border-color .1s,color .1s; white-space:nowrap; }
.btn:hover:not(:disabled) { border-color:var(--border-hi); color:var(--text); }
.btn.active  { border-color:var(--accent-dim); color:var(--accent); background:rgba(140,140,140,.07); }
.btn.save    { border-color:var(--accent-dim); color:var(--accent); }
.btn.save:hover:not(:disabled) { background:var(--accent); color:#000; }
.btn:disabled { opacity:.3; cursor:default; }
.size-btn { padding:5px 8px; }

.title { font-size:13px; font-weight:bold; letter-spacing:.16em; color:var(--accent); }
.sep   { color:var(--border-hi); }

.shared-header { position:absolute; top:0; left:0; right:0; height:var(--header-h); display:flex; align-items:center; gap:10px; padding:0 16px; background:var(--surface); border-bottom:1px solid var(--border); z-index:10; }
.tab-strip { margin-left:auto; display:flex; gap:4px; }

#view-editor, #view-browser, #view-data { position:fixed; inset:0; }

.editor-toolbar { position:absolute; top:var(--header-h); left:0; right:0; height:var(--toolbar-h); display:flex; align-items:center; gap:8px; padding:0 14px; background:var(--surface); border-bottom:1px solid var(--border); }
.toolbar-label { color:var(--dim); font-size:10px; letter-spacing:.1em; }
.toolbar-hint  { margin-left:8px; color:var(--dim); font-size:10px; }

#board-area { position:absolute; top:calc(var(--header-h) + var(--toolbar-h)); left:0; right:0; bottom:var(--footer-h); display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:crosshair; transition:right .18s; }
#board-svg  { display:block; user-select:none; }

#note-panel { position:absolute; top:calc(var(--header-h) + var(--toolbar-h)); right:0; width:var(--note-w); bottom:var(--footer-h); background:var(--surface); border-left:1px solid var(--border); display:none; flex-direction:column; z-index:5; }
#note-area  { flex:1; overflow:hidden; display:flex; flex-direction:column; padding:14px; gap:10px; }

.note-field-label { font-size:9px; color:var(--dim); letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; }
#title-text { width:100%; background:transparent; border:none; border-bottom:1px solid var(--border); color:var(--text); font-family:var(--font); font-size:14px; padding:4px 0; outline:none; }
#title-text::placeholder { color:var(--dim); font-size:12px; }
#note-text  { flex:1; width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:var(--font); font-size:12px; padding:8px; resize:none; outline:none; line-height:1.5; }
#note-text::placeholder { color:var(--dim); }

.editor-footer { position:absolute; bottom:0; left:0; right:0; height:var(--footer-h); display:flex; align-items:center; gap:16px; padding:0 16px; background:var(--surface); border-top:1px solid var(--border); font-size:10px; color:var(--dim); overflow:hidden; }
#footer-stones { color:var(--muted); flex-shrink:0; }
#footer-hash   { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.footer-mode   { color:var(--dim); font-size:9px; flex-shrink:0; }

.lib-sidebar { position:absolute; top:var(--header-h); left:0; width:var(--lib-side-w); bottom:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow-y:auto; }
.sidebar-head { padding:10px 12px; font-size:10px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid var(--border); flex-shrink:0; }

.lib-nav-item { padding:8px 12px; font-size:12px; color:var(--muted); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lib-nav-item:hover  { color:var(--text); background:rgba(255,255,255,.02); }
.lib-nav-item.active { color:var(--text); background:rgba(255,255,255,.04); }
.lib-nav-item.dim    { color:var(--dim); }
.lib-nav-sec  { padding:5px 12px; font-size:11px; color:var(--dim); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lib-nav-sec:hover { color:var(--muted); }

.browser-main { position:absolute; top:var(--header-h); left:var(--lib-side-w); right:0; bottom:0; overflow-y:auto; }
#browser-doc  { padding:32px 48px; max-width:1600px; }
.browser-empty { color:var(--dim); font-size:11px; padding:24px 0; }

.doc-node { position:relative; margin-bottom:4px; }
.doc-node.dragging { opacity:.3; }
.doc-node.drag-over { outline:1px solid var(--accent); }

.doc-s { border:1px solid transparent; margin-bottom:12px; transition:border-color .15s; }
.browser-editable .doc-s:hover { border-color:var(--border); }
.doc-sec-hdr { display:flex; align-items:center; gap:8px; padding:8px 12px; background:transparent; border-bottom:1px solid transparent; cursor:pointer; transition:background .15s, border-color .15s; }
.browser-editable .doc-s:hover .doc-sec-hdr { background:rgba(255,255,255,.02); border-bottom-color:var(--border); }
.doc-sec-hdr .collapse-btn { cursor:pointer; color:var(--muted); font-size:12px; flex-shrink:0; }
.doc-sec-hdr .collapse-btn:hover { color:var(--text); }
.sec-title { font-size:13px; color:var(--text); font-weight:bold; letter-spacing:.06em; flex:1; outline:none; }
.sec-title[contenteditable="true"]:hover { background:rgba(255,255,255,.03); }
.sec-actions { display:flex; gap:4px; margin-left:auto; }
.sec-actions .btn { padding:2px 7px; font-size:9px; opacity:0; }
.doc-sec-hdr:hover .sec-actions .btn { opacity:1; }
.doc-sec-body { padding:8px 16px 8px 20px; margin-left:14px; border-left:1px solid var(--border-hi); }

.drag-handle { color:var(--dim); cursor:grab; font-size:14px; flex-shrink:0; }
.drag-handle:hover { color:var(--muted); }

.doc-t { position:relative; padding-left:18px; }
.doc-t .drag-handle { position:absolute; left:0; top:8px; opacity:0; transition:opacity .15s; }
.doc-t:hover .drag-handle { opacity:1; }
.md-body { padding:10px 16px 10px 0; color:var(--text); font-size:17px; line-height:1.9; cursor:text; min-height:32px; font-family:var(--prose-font); letter-spacing:.01em; }
.md-body:hover { background:rgba(255,255,255,.01); }
.md-placeholder { color:var(--dim); font-style:italic; }
.md-body h1 { font-size:20px; color:var(--text); margin-bottom:10px; letter-spacing:.01em; font-weight:700; }
.md-body h2 { font-size:16px; color:var(--text); margin-bottom:8px; letter-spacing:.01em; border-bottom:1px solid var(--border); padding-bottom:5px; font-weight:600; }
.md-body h3 { font-size:14px; color:var(--accent); margin-bottom:4px; letter-spacing:.01em; font-weight:600; }
.md-body p  { margin-bottom:10px; color:var(--muted); }
.md-body strong { color:var(--text); font-weight:bold; }
.md-body em     { color:var(--muted); font-style:italic; }
.md-body code   { background:#1a1a1a; color:var(--accent); padding:1px 5px; font-size:11px; }
.md-body ul     { padding-left:16px; margin-bottom:8px; }
.md-body ul ul  { padding-left:18px; margin-top:4px; margin-bottom:4px; }
.md-body li     { color:var(--muted); margin-bottom:2px; }
.doc-text-ta    { width:100%; min-height:80px; background:var(--bg); border:1px solid var(--accent-dim); color:var(--text); font-family:var(--prose-font); font-size:14px; padding:10px; resize:none; outline:none; line-height:1.75; overflow-wrap:break-word; overflow:hidden; }
.node-del-btn   { position:absolute; top:4px; right:0; opacity:0; padding:2px 7px; font-size:9px; }
.doc-t:hover .node-del-btn { opacity:1; }

.doc-p { display:flex; gap:0; border:1px solid transparent; transition:border-color .1s; cursor:pointer; }
.browser-editable .doc-p { border-color:var(--border); }
.doc-p:hover { border-color:var(--border-hi) !important; }
.doc-p .drag-handle { display:flex; align-items:center; padding:0 6px; opacity:0; transition:opacity .15s; cursor:grab; flex-shrink:0; }
.doc-p:hover .drag-handle { opacity:1; }
.doc-p:hover { border-color:var(--border-hi); }
.doc-p .card-board { width:220px; height:180px; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--board-bg); }
.doc-p .card-board svg { display:block; }
.doc-p .card-meta  { padding:14px 16px; display:flex; flex-direction:column; gap:5px; flex:1; font-family:var(--prose-font); }
.doc-p .card-title { font-size:15px; color:var(--text); font-weight:bold; letter-spacing:.01em; }
.doc-p .card-note  { font-size:13px; color:var(--muted); line-height:1.6; }
.doc-p .card-stats { font-size:10px; color:var(--dim); letter-spacing:.06em; margin-top:auto; font-family:var(--font); }
.doc-p .card-actions { display:flex; margin-top:4px; }
.doc-p .card-actions .btn { font-size:9px; padding:2px 7px; opacity:0; }
.doc-p:hover .card-actions .btn { opacity:1; }

.doc-add-bar { display:flex; gap:6px; padding:2px 0; opacity:0; transition:opacity .2s; min-height:16px; }
.doc-add-bar:hover, .doc-add-bar.always-visible { opacity:1; }
.doc-add-bar .btn { padding:1px 7px; font-size:9px; }

.data-body { position:absolute; top:var(--header-h); left:0; right:0; bottom:0; display:flex; flex-direction:column; overflow:hidden; }
.lib-panel { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.lib-panel-head { padding:8px 16px; font-size:10px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid var(--border); flex-shrink:0; }
#lib-mgmt-list { flex:1; overflow-y:auto; }

.lib-mgmt-row { display:flex; align-items:center; gap:8px; padding:8px 16px; border-bottom:1px solid var(--border); font-size:11px; }
.lib-toggle-btn { background:transparent; border:none; font-size:14px; cursor:pointer; color:var(--dim); padding:0 2px; line-height:1; }
.lib-toggle-btn:hover  { color:var(--muted); }
.lib-toggle-btn.active { color:var(--accent); }
.lib-mgmt-name { color:var(--text); flex-shrink:0; min-width:100px; max-width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid transparent; }
.lib-mgmt-name[contenteditable="true"]:hover { border-bottom-color:var(--border); cursor:text; }
.lib-mgmt-name[contenteditable="true"]:focus { outline:none; border-bottom-color:var(--accent-dim); }
.lib-mgmt-url   { flex:1; color:var(--dim); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lib-mgmt-count { color:var(--dim); font-size:10px; flex-shrink:0; letter-spacing:.06em; }
.lib-mgmt-actions { display:flex; gap:4px; flex-shrink:0; margin-left:auto; }
.lib-mgmt-actions .btn { padding:3px 8px; font-size:9px; }

.lib-add-row { display:flex; gap:6px; padding:10px 16px; border-top:1px solid var(--border); flex-shrink:0; }
.lib-add-row input[type="text"] { font-size:11px; }
#lib-add-name { width:110px; flex-shrink:0; }
#lib-add-url  { flex:1; }

.toast { position:fixed; bottom:44px; left:50%; transform:translateX(-50%) translateY(8px); background:var(--surface); border:1px solid var(--border-hi); color:var(--text); font-family:var(--font); font-size:11px; letter-spacing:.08em; padding:8px 18px; opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; z-index:300; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
/* ── Panel toggle buttons ────────────────────────────────────────────────── */
#panel-toggles { position:absolute; top:calc(var(--header-h) + var(--toolbar-h) + 14px); right:0; z-index:20; display:flex; flex-direction:column; gap:0; }
#note-toggle-btn, #notation-toggle-btn { background:var(--surface); border:1px solid var(--border); border-right:none; color:var(--muted); font-family:var(--font); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:5px 8px; cursor:pointer; writing-mode:vertical-lr; transform:rotate(180deg); transition:color .1s, border-color .1s; }
#note-toggle-btn:hover, #notation-toggle-btn:hover { color:var(--text); }
#note-toggle-btn.active, #notation-toggle-btn.active { color:var(--accent); border-color:var(--accent-dim); }

/* ── Panel resize handles ────────────────────────────────────────────────── */
.panel-resize { position:absolute; left:0; top:0; bottom:0; width:4px; cursor:col-resize; z-index:30; }
.panel-resize:hover, .panel-resize:active { background:var(--accent-dim); }
.sidebar-resize { position:absolute; right:0; top:0; bottom:0; width:4px; cursor:col-resize; z-index:30; }
.sidebar-resize:hover, .sidebar-resize:active { background:var(--accent-dim); }

/* ── Notation panel ──────────────────────────────────────────────────────── */
#notation-panel { position:absolute; top:calc(var(--header-h) + var(--toolbar-h)); right:0; width:300px; bottom:var(--footer-h); background:var(--surface); border-left:1px solid var(--border); display:none; flex-direction:column; overflow:hidden; }
.notation-inner { flex:1; overflow-y:auto; display:flex; flex-direction:column; }
.nf-section { border-bottom:1px solid var(--border); padding:10px 12px; display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.nf-hdr { display:flex; align-items:center; gap:6px; }
.nf-label { font-size:10px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; flex:1; }
.nf-copy { padding:2px 7px; font-size:9px; }
.nf-load { padding:2px 7px; font-size:9px; margin-top:2px; align-self:flex-start; }
.nf-out { background:var(--bg); border:1px solid var(--border); color:var(--muted); font-family:var(--font); font-size:11px; padding:6px 10px; resize:vertical; outline:none; line-height:1.6; width:100%; min-height:52px; max-height:160px; }
.nf-out:focus { border-color:var(--accent-dim); color:var(--text); }
.nf-footer { padding:8px 12px; font-size:9px; color:var(--dim); text-align:center; flex-shrink:0; }

/* ── Converter panel (data view) ─────────────────────────────────────────── */
.conv-panel { flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.conv-panel-inner { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.conv-section { display:flex; flex-direction:column; border-bottom:1px solid var(--border); flex:1; min-height:0; }
.conv-section:last-child { border-bottom:none; }
.conv-sec-hdr { display:flex; align-items:center; gap:8px; padding:8px 16px; border-bottom:1px solid var(--border); flex-shrink:0; font-size:10px; color:var(--muted); letter-spacing:.08em; background:var(--surface); }
.conv-body { display:flex; flex:1; overflow:hidden; gap:0; }
.conv-side { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.conv-fmt-row { display:flex; align-items:center; gap:6px; padding:6px 12px; border-bottom:1px solid var(--border); flex-shrink:0; font-size:10px; color:var(--muted); }
.conv-lbl { font-size:10px; color:var(--dim); letter-spacing:.06em; }
.conv-select { background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:var(--font); font-size:10px; padding:2px 4px; outline:none; cursor:pointer; }
.conv-select:focus { border-color:var(--accent-dim); }
#conv-input, #conv-output { flex:1; background:var(--bg); border:none; border-right:1px solid var(--border); color:var(--muted); font-family:var(--font); font-size:11px; padding:10px 14px; resize:none; outline:none; line-height:1.5; }
#conv-output { color:var(--dim); border-right:none; }
.conv-mid { display:flex; align-items:center; justify-content:center; padding:0 8px; flex-shrink:0; border-right:1px solid var(--border); }
.conv-mid .btn { padding:4px 8px; }
#htn-text { flex:1; background:var(--bg); border:none; color:var(--muted); font-family:var(--font); font-size:11px; padding:12px 16px; resize:none; outline:none; line-height:1.5; }
#htn-text::placeholder { color:var(--dim); }

/* ── Tooltip (data-tip) ──────────────────────────────────────────────────── */
.tip { display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border:1px solid var(--dim); border-radius:50%; color:var(--dim); font-size:9px; cursor:help; position:relative; flex-shrink:0; vertical-align:middle; }
.tip:hover::after { opacity:1; }

#view-convert { position:fixed; inset:0; }
.cv-body { position:absolute; top:var(--header-h); left:0; right:0; bottom:0; display:flex; overflow:hidden; }
.cv-side { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.cv-hdr { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); flex-shrink:0; background:var(--surface); }
.cv-side:last-child .cv-hdr { border-right:none; }
.cv-lbl { font-size:10px; color:var(--dim); letter-spacing:.06em; }
.cv-batch { font-size:10px; color:var(--muted); display:flex; align-items:center; gap:4px; margin-left:8px; }
.conv-select { background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:var(--font); font-size:10px; padding:2px 4px; outline:none; cursor:pointer; }
.conv-select:focus { border-color:var(--accent-dim); }
#conv-input  { flex:1; background:var(--bg); border:none; border-right:1px solid var(--border); color:var(--muted); font-family:var(--font); font-size:11px; padding:12px 14px; resize:none; outline:none; line-height:1.6; }
#conv-output { flex:1; background:var(--bg); border:none; color:var(--dim); font-family:var(--font); font-size:11px; padding:12px 14px; resize:none; outline:none; line-height:1.6; }
.cv-mid { display:flex; align-items:center; justify-content:center; padding:0 10px; border-right:1px solid var(--border); flex-shrink:0; background:var(--surface); }

.data-body .lib-panel-head { padding:8px 16px; font-size:10px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid var(--border); flex-shrink:0; }

#tooltip { position:fixed; z-index:1000; background:var(--surface); border:1px solid var(--border-hi); color:var(--text); font-family:var(--font); font-size:10px; letter-spacing:.02em; padding:4px 9px; pointer-events:none; max-width:220px; line-height:1.4; }
.hdr-dim { color:var(--dim); font-size:10px; }
.lib-mgmt-footer { padding:8px 16px; border-top:1px solid var(--border); flex-shrink:0; }
.lib-mgmt-footer .btn { color:var(--dim); border-color:transparent; font-size:9px; }
.lib-mgmt-footer .btn:hover { color:var(--text); border-color:var(--border); }

.mono-toggle { position:absolute; top:6px; right:20px; background:transparent; border:1px solid transparent; color:var(--dim); font-family:var(--font); font-size:9px; padding:1px 5px; cursor:pointer; opacity:0; transition:opacity .15s; letter-spacing:.06em; }
.doc-t:hover .mono-toggle { opacity:1; }
.mono-toggle:hover { border-color:var(--border); color:var(--muted); }
.mono-toggle.active { color:var(--accent); border-color:var(--accent-dim); opacity:1; }
.md-raw { font-family:var(--font); font-size:12px; color:var(--muted); line-height:1.65; padding:10px 16px 10px 0; white-space:pre-wrap; word-break:break-word; cursor:text; }
.md-body a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.md-body a:hover { color:var(--text); }

html.light {
  --bg:         #e8e5df;
  --surface:    #f0ede8;
  --border:     #ccc8c0;
  --border-hi:  #aaa69e;
  --text:       #28241f;
  --dim:        #888480;
  --muted:      #4a4640;
  --accent:     #5a5650;
  --accent-dim: #ccc8c0;
  color-scheme: light;
  --hex-empty:    #c8c4bc;
  --hex-stroke:   #aaa69e;
  --hex-x:        #201e1c;
  --hex-o-stroke: #5a5650;
  --hex-o-bg:     #dedad4;
  --hex-o-stripe: #7a7670;
  --hex-dot:      #9e9a96;
  --hex-label-x:  #ece8e2;
  --hex-label-o:  #28241f;
  --hex-hover:    #b4b0a8;
  --board-bg:     #c8c4bc;
}
html.light #board-area { background: var(--bg); }

.browser-toolbar { position:absolute; top:var(--header-h); left:var(--lib-side-w); right:0; height:38px; display:flex; align-items:center; gap:8px; padding:0 14px; background:var(--surface); border-bottom:1px solid var(--border); z-index:5; }
.browser-toolbar-right { margin-left:auto; display:flex; gap:4px; }
.lib-sidebar { top:calc(var(--header-h) + 38px); }
.browser-main { top:calc(var(--header-h) + 38px); }

.search-wrap { display:flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--border); padding:0 8px; flex:1; max-width:360px; }
.search-icon { color:var(--dim); font-size:14px; }
#browser-search { background:transparent; border:none; outline:none; color:var(--text); font-family:var(--font); font-size:12px; width:100%; padding:4px 0; }
#browser-search::placeholder { color:var(--dim); }
#btn-search-clear { background:transparent; border:none; color:var(--dim); cursor:pointer; padding:0 2px; font-size:12px; }
#btn-search-clear:hover { color:var(--text); }

.browser-crumb { padding:6px 12px 2px; font-size:11px; color:var(--accent); font-family:var(--prose-font); border-bottom:1px solid var(--border); letter-spacing:.01em; }

.btn-theme { padding:5px 9px; font-size:13px; border:none; }

.btn.save.dirty::after { content:'·'; font-size:18px; line-height:0; vertical-align:middle; margin-left:3px; color:var(--accent); }

.sec-link-btn { background:transparent; border:none; color:var(--dim); font-size:11px; cursor:pointer; padding:0 4px; opacity:0; transition:opacity .15s; margin-left:4px; }
.doc-sec-hdr:hover .sec-link-btn { opacity:1; }
.sec-link-btn:hover { color:var(--text); }

.browser-compact .doc-sec-body:not([hidden]),
.browser-compact #browser-doc { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; align-items:start; padding:20px 28px; }
.browser-compact #browser-doc { padding:20px 28px; }
.browser-compact .doc-sec-body:not([hidden]) { padding:8px 12px; }
.browser-compact .doc-sec-body > .doc-s,
.browser-compact .doc-sec-body > .doc-t,
.browser-compact .doc-sec-body > .doc-add-bar,
.browser-compact #browser-doc > .doc-s,
.browser-compact #browser-doc > .doc-t,
.browser-compact #browser-doc > .doc-add-bar { grid-column:1 / -1; }
.browser-compact .doc-p { flex-direction:column; width:100%; }
.browser-compact .doc-p .card-board { width:100%; height:140px; }
.browser-compact .doc-p .card-note { display:none; }
.browser-compact .doc-p .drag-handle { display:none; }

#btn-back-to-top { position:fixed; bottom:24px; right:24px; z-index:50; background:var(--surface); border:1px solid var(--border-hi); color:var(--muted); font-family:var(--font); font-size:14px; width:36px; height:36px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color .1s, border-color .1s; }
#btn-back-to-top:hover { color:var(--text); border-color:var(--accent-dim); }

.lib-nav-sec.active { color:var(--accent); }