/* ===== Memória Babita — design system ===== */
:root{
  --acc:#7c6cff; --acc-2:#9a8bff; --acc-ink:#ffffff;
  --grad:linear-gradient(135deg,#8b78ff,#6c8bff);
  --green:#3fb950; --danger:#f0635a; --link:#6ea8fe; --amber:#f0b45a;
  --r-sm:7px; --r-md:10px; --r-lg:14px;
  --sp:8px;
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:.13s var(--ease); --t:.2s var(--ease);
  --font:"Inter",-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
[data-theme="dark"]{
  --bg:#141417; --bg2:#1a1a1f; --bg3:#232329; --bg4:#2e2e36; --bord:#2f2f38; --bord-2:#3a3a45;
  --fg:#e8e8ee; --fg2:#9b9ba8; --fg3:#6c6c79;
  --shadow:0 10px 34px -8px rgba(0,0,0,.55); --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --tag:#2b2745; --tag-fg:#b9adff; --sel:rgba(124,108,255,.16);
}
[data-theme="light"]{
  --bg:#f7f8fc; --bg2:#ffffff; --bg3:#eff1f7; --bg4:#e4e7f1; --bord:#e3e6ef; --bord-2:#d5d9e6;
  --fg:#1d1e26; --fg2:#646878; --fg3:#9aa0b0;
  --shadow:0 12px 34px -10px rgba(40,44,90,.18); --shadow-sm:0 2px 8px rgba(40,44,90,.08);
  --tag:#ece9fc; --tag-fg:#6a57e0; --sel:rgba(124,108,255,.12);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--fg);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.hidden{display:none!important}
#app{display:flex;height:100vh;overflow:hidden}

/* Icons */
.ic{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ===== Rail ===== */
#rail{width:60px;min-width:60px;background:var(--bg2);border-right:1px solid var(--bord);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:12px 0}
.rail-top,.rail-bottom{display:flex;flex-direction:column;gap:7px;align-items:center}
.rail-logo{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--grad);color:#fff;margin-bottom:8px;box-shadow:0 6px 16px -4px var(--acc)}
.rail-logo .logo-svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail-btn{position:relative;width:42px;height:42px;display:grid;place-items:center;border:none;background:transparent;border-radius:11px;cursor:pointer;color:var(--fg2);transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.rail-btn:hover{background:var(--bg3);color:var(--fg)}
.rail-btn:active{transform:scale(.92)}
.rail-btn.active{color:var(--acc-ink);background:var(--grad);box-shadow:0 6px 16px -5px var(--acc)}
.rail-btn.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:20px;border-radius:0 4px 4px 0;background:var(--acc);animation:railIn .25s var(--ease)}
@keyframes railIn{from{height:0;opacity:0}to{height:20px;opacity:1}}

/* ===== Sidebar ===== */
#sidebar{width:308px;min-width:308px;background:var(--bg2);border-right:1px solid var(--bord);display:flex;flex-direction:column}
.side-head{padding:14px 14px 10px}
#vaultSelect{width:100%;background:var(--bg3);color:var(--fg);border:1px solid var(--bord);border-radius:var(--r-md);padding:10px 12px;font-weight:600;font-size:13.5px;cursor:pointer;transition:border-color var(--t-fast)}
#vaultSelect:hover{border-color:var(--bord-2)}
.side-body{flex:1;overflow:auto;padding:0 10px 14px}
.side-panel{height:100%;animation:fade .25s var(--ease)}
.side-tools{display:flex;gap:7px;margin-bottom:10px}
.side-tools input{flex:1;background:var(--bg3);border:1px solid var(--bord);color:var(--fg);border-radius:var(--r-md);padding:9px 11px;transition:border-color var(--t-fast)}
.side-tools input:focus{border-color:var(--acc)}
.side-tools button{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--bord);color:var(--fg);border-radius:var(--r-md);padding:0 12px;cursor:pointer;font-weight:600;transition:var(--t-fast)}
.side-tools button:hover{border-color:var(--acc);color:var(--acc)}
.side-tools .wide{flex:1;justify-content:center;padding:9px}
.side-tools .ic{width:18px;height:18px}

/* Tree */
.tree{font-size:13px}
.tree .row{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background var(--t-fast)}
.tree .row:hover{background:var(--bg3)}
.tree .dir>.row{font-weight:600}
.tree .file.active>.row{background:var(--sel);color:var(--acc);font-weight:600}
.tree .children{margin-left:12px;border-left:1px solid var(--bord);padding-left:6px}
.tree .caret{display:inline-block;width:11px;color:var(--fg3);transition:transform var(--t-fast)}
.tree .collapsed>.children{display:none}
.tree .collapsed>.row .caret{transform:rotate(-90deg)}

/* Search / lists */
#searchInput{width:100%;background:var(--bg3);border:1px solid var(--bord);color:var(--fg);border-radius:var(--r-md);padding:10px 12px;margin-bottom:12px;transition:border-color var(--t-fast)}
#searchInput:focus{border-color:var(--acc)}
.search-results .res{padding:9px 11px;border-radius:var(--r-md);cursor:pointer;border:1px solid transparent;margin-bottom:4px;transition:var(--t-fast)}
.search-results .res:hover{background:var(--bg3);border-color:var(--bord)}
.search-results .res .t{font-weight:600}
.search-results .res .v{font-size:11px;color:var(--acc-2);margin-top:1px}
.search-results .res .s{font-size:12px;color:var(--fg2);margin-top:4px;line-height:1.45}

/* Tags */
.tag-list{display:flex;flex-wrap:wrap;gap:7px}
.tag{background:var(--tag);color:var(--tag-fg);border-radius:20px;padding:5px 12px;font-size:12px;cursor:pointer;border:1px solid transparent;transition:var(--t-fast);font-weight:500}
.tag:hover{border-color:var(--acc);transform:translateY(-1px)}
.tag .c{opacity:.55;margin-left:5px}

/* ===== Main ===== */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.view{flex:1;display:flex;flex-direction:column;overflow:hidden;animation:fade .28s var(--ease)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 20px;border-bottom:1px solid var(--bord);background:color-mix(in srgb,var(--bg2) 80%,transparent);backdrop-filter:blur(8px)}
.crumbs{color:var(--fg2);font-size:13px;display:flex;align-items:center;gap:8px}
.crumbs b{color:var(--fg);font-weight:600}
.crumb-ic{width:17px;height:17px;color:var(--acc)}
.nav-btn,.crumbs #calToday{background:var(--bg3);border:1px solid var(--bord);color:var(--fg);border-radius:var(--r-sm);padding:5px 9px;cursor:pointer;display:inline-grid;place-items:center;transition:var(--t-fast)}
.nav-btn .ic{width:18px;height:18px}.nav-btn.flip{transform:rotate(180deg)}
.nav-btn:hover,.crumbs #calToday:hover{border-color:var(--acc);color:var(--acc)}
.top-actions{display:flex;gap:8px;align-items:center}
.top-actions button{display:inline-flex;align-items:center;gap:7px;background:var(--bg3);color:var(--fg);border:1px solid var(--bord);border-radius:var(--r-md);padding:8px 14px;cursor:pointer;font-weight:600;transition:var(--t-fast)}
.top-actions button:hover{border-color:var(--acc);color:var(--acc)}
.top-actions .ic{width:17px;height:17px}
.top-actions .icon-only{padding:8px}
.primary{background:var(--grad)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 6px 16px -6px var(--acc)}
.primary:hover{filter:brightness(1.06);color:#fff!important}
.danger:hover{border-color:var(--danger)!important;color:var(--danger)!important}
.field{position:relative;display:flex;align-items:center}
.field-ic{position:absolute;left:10px;width:16px;height:16px;color:var(--fg3)}
.field input{background:var(--bg3);border:1px solid var(--bord);color:var(--fg);border-radius:var(--r-md);padding:8px 12px 8px 32px;transition:border-color var(--t-fast)}
.field input:focus{border-color:var(--acc)}
.save-state{font-size:12px;color:var(--green);font-weight:500}
.hint{color:var(--fg2);font-size:12px}
.view-body{flex:1;overflow:auto;position:relative}

/* Markdown */
#viewer{padding:38px 60px;max-width:880px;margin:0 auto}
#editor{width:100%;height:100%;background:var(--bg);color:var(--fg);border:none;outline:none;padding:30px 60px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;line-height:1.75;resize:none}
.markdown-body{line-height:1.75}
.markdown-body h1,.markdown-body h2,.markdown-body h3{font-weight:700;letter-spacing:-.01em;margin-top:1.5em}
.markdown-body h2,.markdown-body h3{border-bottom:1px solid var(--bord);padding-bottom:6px}
.markdown-body h1{font-size:2em}.markdown-body h2{font-size:1.45em}
.markdown-body a{color:var(--link);text-decoration:none}
.markdown-body a:hover{text-decoration:underline}
.markdown-body a.wikilink{color:var(--tag-fg);background:var(--tag);padding:1px 7px;border-radius:5px;transition:var(--t-fast)}
.markdown-body a.wikilink:hover{text-decoration:none;filter:brightness(1.1)}
.markdown-body a.wikilink.missing{color:var(--danger);background:none;border:1px dashed var(--danger)}
.markdown-body code{background:var(--bg3);padding:2px 6px;border-radius:5px;font-family:ui-monospace,Consolas,monospace;font-size:.9em}
.markdown-body pre{background:var(--bg3);padding:16px 18px;border-radius:var(--r-md);overflow:auto;border:1px solid var(--bord)}
.markdown-body pre code{background:none;padding:0}
.markdown-body table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.95em;border-radius:var(--r-md);overflow:hidden}
.markdown-body th,.markdown-body td{border:1px solid var(--bord);padding:8px 12px;text-align:left}
.markdown-body th{background:var(--bg3);font-weight:600}
.markdown-body tr:hover td{background:var(--bg3)}
.markdown-body blockquote{border-left:3px solid var(--acc);margin:1em 0;padding:6px 18px;color:var(--fg2);background:var(--bg2);border-radius:0 var(--r-sm) var(--r-sm) 0}
.markdown-body img{max-width:100%;border-radius:var(--r-md)}
.markdown-body hr{border:none;border-top:1px solid var(--bord);margin:1.6em 0}
.backlinks{border-top:1px solid var(--bord);background:var(--bg2);padding:12px 60px;max-height:150px;overflow:auto}
.backlinks h4{margin:0 0 8px;font-size:11px;color:var(--fg2);text-transform:uppercase;letter-spacing:.7px}
.backlinks a{display:inline-block;color:var(--link);cursor:pointer;padding:4px 10px;margin:3px;background:var(--bg3);border-radius:var(--r-sm);transition:var(--t-fast)}
.backlinks a:hover{background:var(--bg4)}

/* Graph */
.graph-wrap{background:radial-gradient(circle at 50% 38%,var(--bg2),var(--bg))}
#graphCanvas{width:100%;height:100%;display:block;cursor:grab}
#graphCanvas:active{cursor:grabbing}
#graphControls .grp{margin-bottom:16px;border-bottom:1px solid var(--bord);padding-bottom:14px}
#graphControls h5{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--fg2)}
.ctl{display:flex;align-items:center;justify-content:space-between;margin:8px 0;font-size:13px;gap:8px}
.ctl select{background:var(--bg3);border:1px solid var(--bord);color:var(--fg);border-radius:var(--r-sm);padding:4px 8px}
input[type=range]{-webkit-appearance:none;appearance:none;height:5px;border-radius:5px;background:var(--bg4);width:100%;margin:6px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--acc);cursor:pointer;box-shadow:0 2px 6px -1px var(--acc)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:var(--acc);cursor:pointer}
.switch{position:relative;width:38px;height:21px;flex:0 0 auto}
.switch input{display:none}
.switch span{position:absolute;inset:0;background:var(--bg4);border-radius:20px;transition:var(--t)}
.switch span:before{content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;background:#fff;border-radius:50%;transition:var(--t);box-shadow:var(--shadow-sm)}
.switch input:checked+span{background:var(--acc)}
.switch input:checked+span:before{transform:translateX(17px)}
.legend{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.legend span{font-size:11px;display:flex;align-items:center;gap:5px;color:var(--fg2)}
.legend i{width:10px;height:10px;border-radius:50%;display:inline-block}

/* Canvas */
.canvas-board{position:absolute;inset:0;overflow:hidden;background-color:var(--bg);
  background-image:radial-gradient(var(--bord) 1.1px,transparent 1.1px);background-size:24px 24px;cursor:grab}
.canvas-board:active{cursor:grabbing}
#canvasSvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#canvasNodes{position:absolute;inset:0;transform-origin:0 0}
.cnode{position:absolute;min-width:120px;background:var(--bg2);border:2px solid var(--acc);border-radius:var(--r-md);box-shadow:var(--shadow);padding:9px 11px;cursor:move;font-size:13px;transition:box-shadow var(--t-fast)}
.cnode .cn-text{outline:none;min-height:20px;white-space:pre-wrap;word-break:break-word;line-height:1.45}
.cnode .cn-port{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--acc);right:-7px;top:50%;transform:translateY(-50%);cursor:crosshair;border:2px solid var(--bg2);transition:transform var(--t-fast)}
.cnode .cn-port:hover{transform:translateY(-50%) scale(1.3)}
.cnode .cn-del{position:absolute;top:-9px;right:-9px;width:19px;height:19px;border-radius:50%;background:var(--danger);color:#fff;border:none;cursor:pointer;font-size:11px;line-height:1;display:none}
.cnode:hover .cn-del{display:block}
.cnode .cn-resize{position:absolute;right:1px;bottom:1px;width:13px;height:13px;cursor:nwse-resize;border-right:2px solid var(--fg3);border-bottom:2px solid var(--fg3);border-radius:0 0 5px 0}
.cnode.sel{box-shadow:0 0 0 3px var(--acc-2),var(--shadow)}
.canvas-tools{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.canvas-tools button{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--bord);color:var(--fg);border-radius:var(--r-md);padding:9px 11px;cursor:pointer;text-align:left;transition:var(--t-fast)}
.canvas-tools button:hover{border-color:var(--acc);color:var(--acc)}
.swatches{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0}
.swatches i{width:24px;height:24px;border-radius:7px;cursor:pointer;border:2px solid transparent;transition:transform var(--t-fast)}
.swatches i:hover{transform:scale(1.12)}

/* Calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;padding:20px}
.cal-dow{font-size:11px;color:var(--fg2);text-transform:uppercase;text-align:center;letter-spacing:.6px;font-weight:600}
.cal-cell{min-height:100px;background:var(--bg2);border:1px solid var(--bord);border-radius:var(--r-md);padding:8px;cursor:pointer;transition:var(--t-fast);display:flex;flex-direction:column;gap:4px}
.cal-cell:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.cal-cell.other{opacity:.4}
.cal-cell.today{border-color:var(--acc)}
.cal-cell.today .d{background:var(--grad);color:#fff;width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.cal-cell .d{font-weight:600;font-size:12px}
.cal-cell .note{font-size:11px;background:var(--tag);color:var(--tag-fg);border-radius:5px;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-cell .more{font-size:10px;color:var(--fg2)}
#calSidebar .tag{margin:3px 4px 0 0}

/* Overlay / dialog */
.overlay{position:fixed;inset:0;background:rgba(8,8,12,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fade .2s var(--ease)}
.dialog{background:var(--bg2);border:1px solid var(--bord);border-radius:var(--r-lg);padding:26px;width:368px;box-shadow:var(--shadow);animation:pop .24s var(--ease)}
.dialog-ic{width:46px;height:46px;border-radius:13px;background:var(--grad);display:grid;place-items:center;color:#fff;margin-bottom:14px}
.dialog-ic .ic{width:24px;height:24px}
.dialog h3{margin:0 0 6px;font-size:18px}
.dialog input{width:100%;background:var(--bg3);border:1px solid var(--bord);color:var(--fg);border-radius:var(--r-md);padding:11px 12px;margin-top:11px;transition:border-color var(--t-fast)}
.dialog input:focus{border-color:var(--acc)}
.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.dialog-actions button{background:var(--bg3);border:1px solid var(--bord);border-radius:var(--r-md);padding:9px 16px;cursor:pointer;font-weight:600;transition:var(--t-fast)}
.dialog-actions button:hover{border-color:var(--acc)}
.err{color:var(--danger);font-size:12px;margin-top:10px;min-height:14px}

/* Toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--bg4);color:var(--fg);padding:11px 20px;border-radius:var(--r-md);box-shadow:var(--shadow);z-index:200;border:1px solid var(--bord);animation:toastIn .3s var(--ease);font-weight:500}

@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:6px;border:2px solid var(--bg2)}
::-webkit-scrollbar-thumb:hover{background:var(--bord-2)}
::-webkit-scrollbar-track{background:transparent}

.rail-btn.muted{opacity:.55}

/* ===== Editor estilo Notion ===== */
.editor-bar{display:flex;align-items:center;gap:8px;padding:8px 60px;border-bottom:1px solid var(--bord);background:var(--bg2)}
.editor-bar .eb-hint{font-size:12px;color:var(--fg2)}
.editor-bar .eb-spacer{flex:1}
.editor-bar kbd{background:var(--bg4);border:1px solid var(--bord);border-radius:4px;padding:0 5px;font-size:11px;font-family:inherit}
.editor-bar button{display:inline-grid;place-items:center;width:34px;height:34px;background:var(--bg3);border:1px solid var(--bord);border-radius:9px;color:var(--fg);cursor:pointer;transition:var(--t-fast)}
.editor-bar button:hover{border-color:var(--acc);color:var(--acc)}
.editor-bar .ic{width:19px;height:19px}

.slash-menu{position:fixed;z-index:300;width:262px;max-height:340px;overflow:auto;background:var(--bg2);border:1px solid var(--bord-2);border-radius:var(--r-md);box-shadow:var(--shadow);padding:6px;animation:pop .14s var(--ease)}
.slash-item{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer}
.slash-item b{font-size:13px;font-weight:600}
.slash-item span{font-size:11px;color:var(--fg2)}
.slash-item.on{background:var(--sel)}
.slash-item.on b{color:var(--acc)}

/* mídia no viewer */
.markdown-body audio{display:block;width:100%;max-width:460px;margin:12px 0;filter:saturate(.9)}
.markdown-body a[target=_blank]:not(.wikilink){background:var(--bg3);border:1px solid var(--bord);padding:3px 9px;border-radius:6px}

/* breadcrumb navegável */
.crumb-link{color:var(--fg2);cursor:pointer;text-decoration:none;border-radius:5px;padding:1px 5px;transition:var(--t-fast)}
.crumb-link:hover{color:var(--acc);background:var(--sel)}

/* preview de link (hover) */
.link-preview{position:fixed;z-index:320;width:330px;max-height:240px;overflow:hidden;background:var(--bg2);border:1px solid var(--bord-2);border-radius:var(--r-md);box-shadow:var(--shadow);padding:12px 14px;animation:fade .12s var(--ease)}
.link-preview .lp-title{font-weight:600;font-size:13.5px}
.link-preview .lp-sub{font-size:11px;color:var(--fg2);margin:2px 0 6px}
.link-preview .lp-body{font-size:12px;color:var(--fg2);line-height:1.5}

/* ===== Canvas v2 ===== */
.cnode{overflow:visible;display:flex;flex-direction:column;justify-content:center}
.cnode .cn-text{width:100%;outline:none;word-break:break-word;line-height:1.4}
.t-box,.t-ellipse{align-items:center;text-align:center}
.t-box .cn-text,.t-ellipse .cn-text{text-align:center}
.t-ellipse{border-radius:50%!important}
.t-image{padding:0!important;overflow:hidden;background:var(--bg2)}
.t-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}
.t-note{cursor:pointer}
.cn-mini{font-size:10px;color:var(--fg2);margin-top:3px}
.cv-dot{width:16px;height:12px;border:2px solid currentColor;border-radius:50%;display:inline-block}
.canvas-tools button{display:flex;align-items:center;gap:8px;font-size:13px}
.canvas-tools .ic{width:17px;height:17px;flex:0 0 auto}
#canvasSvg{pointer-events:none}
#canvasSvg .edge-hit{pointer-events:stroke;cursor:pointer}

/* =====================================================================
   IDENTIDADE VISUAL BABITA (editorial/couture) — sobrescreve tokens
   paleta nude/paper + preto Babita, cantos retos, Montserrat/Ubuntu
   ===================================================================== */
:root{
  --acc:#2C2A2A; --acc-2:#0A0A0A; --acc-ink:#FAF8F5;
  --grad:linear-gradient(135deg,#2C2A2A,#0A0A0A);
  --green:#4F6B47; --danger:#8E2F2F; --link:#4F6B47; --amber:#B9975B;
  --r-sm:2px; --r-md:3px; --r-lg:5px;
  --font:'Ubuntu',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Montserrat','Ubuntu',sans-serif;
}
[data-theme="light"]{
  --bg:#FAF8F5; --bg2:#FFFFFF; --bg3:#F3EFE8; --bg4:#EFE9DD; --bord:#E7E1D6; --bord-2:#DCD3C0;
  --fg:#0A0A0A; --fg2:#6C6C6C; --fg3:#A8A39C;
  --shadow:0 12px 30px -14px rgba(40,36,32,.20); --shadow-sm:0 1px 4px rgba(40,36,32,.08);
  --tag:#EFE9DD; --tag-fg:#2C2A2A; --sel:rgba(44,42,42,.08);
}
[data-theme="dark"]{
  --bg:#1A1818; --bg2:#211F1F; --bg3:#2A2727; --bg4:#383434; --bord:#332F2F; --bord-2:#443F3F;
  --fg:#F2EEE8; --fg2:#A8A39C; --fg3:#6C6C6C;
  --shadow:0 14px 36px -14px rgba(0,0,0,.62); --shadow-sm:0 2px 8px rgba(0,0,0,.4);
  --tag:#2A2727; --tag-fg:#DCD3C0; --sel:rgba(220,211,192,.1);
  /* primary couture: claro sobre escuro */
  --acc:#DCD3C0; --acc-2:#EFE9DD; --acc-ink:#1A1818; --grad:linear-gradient(135deg,#E2D8C4,#C9BFA8); --link:#9CB38F;
}
body{font-family:var(--font)}
.markdown-body h1,.markdown-body h2,.markdown-body h3,.dialog h3,.brand,.rail-logo{font-family:var(--font-display);letter-spacing:-.01em}
.primary{color:var(--acc-ink)!important}
.rail-logo{color:var(--acc-ink)}
.rail-logo .logo-svg{stroke:var(--acc-ink)}
.rail-btn.active{color:var(--acc-ink)}
.markdown-body a.wikilink{border-radius:var(--r-sm)}

/* =====================================================================
   RESPONSIVO / MOBILE
   ===================================================================== */
.nav-toggle{display:none;position:fixed;top:10px;left:10px;z-index:80;width:42px;height:42px;border:1px solid var(--bord);background:var(--bg2);color:var(--fg);border-radius:var(--r-md);box-shadow:var(--shadow-sm);place-items:center;cursor:pointer}
.nav-toggle .ic{width:22px;height:22px}

@media (max-width:860px){
  #app{flex-direction:column}
  .nav-toggle{display:grid}

  /* rail vira barra inferior */
  #rail{position:fixed;left:0;right:0;bottom:0;width:auto;min-width:0;height:58px;flex-direction:row;justify-content:space-between;align-items:center;border-right:none;border-top:1px solid var(--bord);padding:0 8px;z-index:70;background:var(--bg2)}
  .rail-top,.rail-bottom{flex-direction:row;gap:2px}
  .rail-logo{display:none}
  .rail-btn{width:40px;height:40px}
  .rail-btn.active::before{display:none}
  .rail-btn.active{border-radius:var(--r-md)}

  /* sidebar vira gaveta */
  #sidebar{position:fixed;top:0;left:0;bottom:58px;width:86vw;max-width:330px;min-width:0;transform:translateX(-101%);transition:transform .26s var(--ease);z-index:75;box-shadow:var(--shadow)}
  body.nav-open #sidebar{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:0 0 58px 0;background:rgba(10,10,10,.45);z-index:72}

  /* main ocupa a tela menos a barra inferior */
  #main{height:calc(100vh - 58px);height:calc(100dvh - 58px)}
  #viewer{padding:18px 18px 30px}
  #editor{padding:16px 18px}
  .editor-bar{padding:8px 14px;flex-wrap:wrap;gap:6px}
  .editor-bar .eb-hint{flex-basis:100%;order:2}
  .backlinks{padding:10px 18px;max-height:120px}
  .topbar{padding:10px 12px 10px 60px;gap:8px;flex-wrap:wrap}
  .crumbs{font-size:12px}
  .top-actions{gap:6px}
  .top-actions button{padding:8px 11px}
  .top-actions #editBtn span,.top-actions #saveBtn span{display:none}
  .field input{width:130px}

  /* calendário compacto */
  .cal-grid{gap:5px;padding:12px}
  .cal-cell{min-height:62px;padding:5px;border-radius:var(--r-sm)}
  .cal-cell .note{font-size:10px}

  /* diálogos quase tela cheia */
  .overlay .dialog{width:92vw}
  .slash-menu{width:78vw;max-width:300px}
  .link-preview{width:80vw;max-width:320px}

  /* grafo / canvas usam a área toda */
  .graph-wrap,.canvas-board{touch-action:none}
}

@media (max-width:420px){
  .top-actions .save-state{display:none}
  #viewer{padding:14px 14px 28px}
  .cal-dow{font-size:9px}
  .cal-cell{min-height:54px}
}

/* ===== correções de layout (evita itens sumindo / scroll da página) ===== */
html,body{overflow:hidden}
#main{min-height:0;min-width:0}
.view{min-height:0}
.view-body{min-height:0}
.topbar,.backlinks,.editor-bar{flex:0 0 auto}
#sidebar{min-height:0}
.side-head{flex:0 0 auto}
.side-body{min-height:0}
#rail{overflow-y:auto;overflow-x:hidden}
.crumbs{min-width:0;overflow:hidden}
.crumbs b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
.top-actions{flex:0 0 auto}

/* ===== mobile: bottombar essencial + gaveta com abas Menus/Tela ===== */
.side-switch{display:none}
.side-settings{display:none}
#graphCanvas{touch-action:none}
@media (max-width:860px){
  /* bottombar só com os modos essenciais */
  #rail{justify-content:center;padding-bottom:calc(2px + env(safe-area-inset-bottom))}
  #rail .rail-top{flex:1;width:100%;justify-content:space-around}
  .rail-bottom{display:none}
  .rail-btn[data-mode="tags"]{display:none}

  /* abas da gaveta */
  .side-switch{display:flex;gap:8px;padding:10px 12px 2px}
  .side-switch button{flex:1;background:var(--bg3);border:1px solid var(--bord);color:var(--fg2);border-radius:var(--r-md);padding:9px;cursor:pointer;font-weight:600;font-size:13px}
  .side-switch button.on{background:var(--sel);color:var(--acc);border-color:var(--acc)}
  body.show-tela .side-body{display:none}
  .side-settings{display:none;flex-direction:column;gap:9px;padding:12px}
  body.show-tela .side-settings{display:flex}
  .side-settings .ss-title{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--fg2);margin-bottom:2px}
  .side-settings button{display:flex;align-items:center;gap:11px;background:var(--bg3);border:1px solid var(--bord);color:var(--fg);border-radius:var(--r-md);padding:13px;cursor:pointer;font-size:14px;text-align:left}
  .side-settings button:hover{border-color:var(--acc)}
  .side-settings .ic{width:20px;height:20px;flex:0 0 auto;color:var(--acc-2)}
}

/* =====================================================================
   REFINO DE DESIGN — markdown rico, callouts, componentes, empty state
   ===================================================================== */

/* --- markdown: leitura editorial --- */
#viewer{font-size:15px}
.markdown-body > p:first-of-type{font-size:1.05em;color:var(--fg)}
.markdown-body h1{font-size:2em;line-height:1.15;margin:.2em 0 .6em}
.markdown-body h2{position:relative;padding-left:0}
.markdown-body h2::before{content:"";position:absolute;left:-14px;top:.22em;bottom:.22em;width:3px;border-radius:3px;background:var(--acc-2);opacity:.5}
.markdown-body h3{color:var(--fg)}
.markdown-body .h-emo{display:inline-grid;place-items:center;width:1.5em;height:1.5em;margin-right:.4em;border-radius:var(--r-md);background:var(--tag);vertical-align:-.28em;font-size:.78em;line-height:1}
.markdown-body ul,.markdown-body ol{padding-left:1.3em}
.markdown-body li{margin:.25em 0}
.markdown-body hr{border:none;border-top:1px solid var(--bord);margin:1.8em 0}
.markdown-body blockquote{border-left:3px solid var(--bord-2);background:var(--bg2);color:var(--fg2);border-radius:0 var(--r-md) var(--r-md) 0;padding:8px 16px}

/* --- task lists --- */
.markdown-body li:has(> input[type=checkbox]){list-style:none;margin-left:-1.25em}
.markdown-body input[type=checkbox]{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.6px solid var(--bord-2);border-radius:4px;vertical-align:-3px;margin-right:8px;position:relative;cursor:default;background:var(--bg2)}
.markdown-body input[type=checkbox]:checked{background:var(--green);border-color:var(--green)}
.markdown-body input[type=checkbox]:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* --- callouts (admonitions) --- */
.markdown-body .callout{border-left:3px solid var(--cc);background:color-mix(in srgb, var(--cc) 12%, var(--bg2));color:var(--fg);border-radius:0 var(--r-md) var(--r-md) 0;padding:11px 15px;margin:1.1em 0}
.markdown-body .callout-info{--cc:#5B6E8A}
.markdown-body .callout-warn{--cc:#8E2F2F}
.markdown-body .callout-tip{--cc:#B9975B}
.markdown-body .callout-ok{--cc:#4F6B47}
.markdown-body .callout-head{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--cc);margin-bottom:5px;font-size:13px}
.markdown-body .callout-head .ic{width:17px;height:17px}
.markdown-body .callout p{margin:.3em 0}
.markdown-body .callout p:last-child{margin-bottom:0}

/* --- code --- */
.markdown-body pre{position:relative;background:var(--bg3);border:1px solid var(--bord)}
[data-theme="dark"] .markdown-body pre{background:#1b1919}

/* --- empty state --- */
#viewer:empty{height:100%}
#viewer:empty::before{
  content:"Selecione uma nota ao lado para começar — ou use 🔍 para buscar, 🕸️ para o grafo, 🎨 para o canvas.";
  display:block;max-width:420px;margin:22vh auto 0;text-align:center;color:var(--fg2);font-size:14px;line-height:1.7
}

/* --- sidebar refino --- */
#vaultSelect{background-image:linear-gradient(var(--bg3),var(--bg3));font-family:var(--font-display)}
.tree .row{padding:6px 8px}
.tree .file .row span:last-child,.tree .dir .row span:last-child{overflow:hidden;text-overflow:ellipsis}
.search-results .res{transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.search-results .res:hover{transform:translateX(2px)}

/* --- topbar / breadcrumb chips --- */
.crumbs .crumb-link{padding:2px 7px;border-radius:var(--r-sm)}
.topbar{box-shadow:0 1px 0 var(--bord)}

/* --- fundo sutil (grid Babita) --- */
.view-body{background-image:radial-gradient(color-mix(in srgb,var(--fg) 4%,transparent) 1px, transparent 1px);background-size:30px 30px;background-position:-1px -1px}
#viewer,.backlinks,.editor-bar,#editor{background-color:var(--bg)}

/* --- inputs/botões coerentes --- */
input,select,textarea,button{font-family:inherit}
.side-tools input:focus,#searchInput:focus,.field input:focus,.dialog input:focus{box-shadow:0 0 0 3px var(--sel)}

@media (max-width:860px){
  #viewer{font-size:15px;padding:18px 16px 30px}
  .markdown-body h2::before{left:-8px}
  #viewer:empty::before{margin-top:14vh}
}

/* ===== formas do fluxograma (SVG) ===== */
.cnode.t-shape{border:none!important;background:none!important;padding:0;box-shadow:none}
.cnode.t-shape .cn-shape{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cnode.t-shape .shape-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;line-height:1.3;word-break:break-word}
.cnode.sh-diamond .shape-text,.cnode.sh-hexagon .shape-text{padding:16px}
.cnode.t-shape.sel .cn-shape g{stroke-width:3.5}
.canvas-tools .cv-mini{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;color:var(--acc-2)}