/* ── Variables: design system lavanda Material You (Stitch) ── */
    :root {
      --bg-primary:   #131313;  /* surface / background */
      --bg-secondary: #0e0e0e;  /* surface-container-lowest: sidebar, topbar, status */
      --bg-tertiary:  #202020;  /* surface-container: inputs, hover */
      --border:       #48454f;  /* outline-variant */
      --text:         #e5e2e1;  /* on-surface */
      --text-muted:   #c9c5d0;  /* on-surface-variant */
      --text-faint:   #928f9a;  /* outline */
      --accent:       #c8bfff;  /* primary */
      --accent-hover: #d6cfff;
      --green:        #4caf50;
      --red:          #ffb4ab;  /* error */
      --yellow:       #f8e289;  /* tertiary */
      --font:         'Inter', system-ui, -apple-system, sans-serif;
      --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
      --sidebar-w:    260px;
      --topbar-h:     38px;
      --sidebar-font-size: 13px; /* tamaño de tipografía del sidebar (ajustable en Preferencias) */
    }

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

    body {
      font-family: var(--font);
      background: var(--bg-primary);
      color: var(--text);
      height: 100dvh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      font-size: 14px;
    }

    /* ── Topbar ── */
    #topbar {
      min-height: calc(var(--topbar-h) + env(safe-area-inset-top));
      height: auto;
      padding-top: env(safe-area-inset-top); /* iOS PWA: empuja contenido bajo el notch */
      padding-bottom: 8px;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: flex-end; /* botones en zona navegable, no en el notch */
      padding-left: 12px;
      padding-right: 12px;
      gap: 8px;
      flex-shrink: 0;
      -webkit-app-region: drag;
    }

    #topbar button { -webkit-app-region: no-drag; }

    .topbar-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      flex: 1;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .topbar-btn {
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.1s, color 0.1s;
    }
    .topbar-btn:hover { background: var(--bg-tertiary); color: var(--text); }
    .topbar-btn.accent { color: var(--accent); }
    .topbar-btn.accent:hover { background: rgba(200,191,255,0.15); }
    .topbar-btn.danger { color: var(--red); }
    .topbar-btn.active { color: var(--accent); background: rgba(200,191,255,0.15); }

    #save-btn { display: none; }
    #save-btn.visible { display: flex; }
    #save-btn.saving { opacity: 0.6; pointer-events: none; }

    /* ── Layout principal ── */
    #app {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    /* ── Sidebar ── */
    #sidebar {
      width: var(--sidebar-w);
      background: var(--bg-secondary);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      overflow: hidden;
      transition: width 0.2s ease;
      position: relative;
    }

    #sidebar.collapsed { width: 0; }
    #sidebar.resizing { transition: none; } /* sin lag mientras se arrastra */

    /* Handle para ajustar ancho de la barra: solo visible en modo edición */
    #sidebar-resizer {
      position: absolute; top: 0; right: 0; width: 6px; height: 100%;
      cursor: col-resize; z-index: 50; display: none;
    }
    body.edit-mode #sidebar-resizer { display: block; }
    #sidebar-resizer:hover { background: var(--accent); opacity: 0.5; }

    .material-symbols-outlined {
      font-size: 18px;
      line-height: 1;
      font-variation-settings: 'wght' 300;
      flex-shrink: 0;
    }

    /* Marca del vault */
    #sidebar-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 14px 10px;
    }
    #vault-brand { display: flex; align-items: center; gap: 10px; }
    #vault-brand .brand-icon { font-size: 22px; color: var(--accent); }
    .brand-name { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--text); }
    .brand-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 1px; }
    #new-note-btn {
      display: flex; align-items: center; gap: 4px;
      background: var(--accent); color: var(--bg-primary);
      border: none; border-radius: 6px;
      padding: 5px 10px; font-size: 12px; font-weight: 600;
      font-family: var(--font); cursor: pointer;
      transition: opacity 0.12s;
    }
    #new-note-btn:hover { opacity: 0.88; }
    #new-note-btn .material-symbols-outlined { font-size: 16px; }

    /* Navegación */
    #sidebar-nav { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 2px; }
    .nav-item {
      display: flex; align-items: center; gap: 10px;
      padding: 6px 10px; border-radius: 6px;
      font-size: var(--sidebar-font-size); color: var(--text-muted); cursor: pointer;
      border-left: 2px solid transparent;
      user-select: none;
    }
    .nav-item .material-symbols-outlined { font-size: 19px; color: var(--text-faint); }
    .nav-item:hover { background: var(--bg-tertiary); color: var(--text); }
    .nav-item.active {
      background: var(--bg-tertiary);
      color: var(--accent);
      border-left-color: var(--accent);
    }
    .nav-item.active .material-symbols-outlined { color: var(--accent); }

    .sidebar-section-label {
      padding: 10px 14px 4px;
      font-family: var(--font-mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-faint);
      border-top: 1px solid var(--border);
      margin-top: 4px;
    }

    #sidebar-footer {
      border-top: 1px solid var(--border);
      padding: 6px 8px;
      display: flex; flex-direction: column; gap: 2px;
    }

    #search-input {
      margin: 4px 8px 6px;
      padding: 5px 10px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: var(--sidebar-font-size);
      width: calc(100% - 16px);
      outline: none;
      font-family: var(--font);
    }
    #search-input:focus { border-color: var(--accent); }
    #search-input::placeholder { color: var(--text-faint); }

    #file-tree {
      flex: 1;
      overflow-y: auto;
      padding: 4px 0;
    }

    #file-tree::-webkit-scrollbar { width: 4px; }
    #file-tree::-webkit-scrollbar-track { background: transparent; }
    #file-tree::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    .tree-folder {
      user-select: none;
    }

    .tree-folder-label {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 3px 12px;
      cursor: pointer;
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 500;
    }
    .tree-folder-label:hover { background: var(--bg-tertiary); color: var(--text); }

    .tree-folder-label .arrow {
      width: 12px;
      font-size: 9px;
      transition: transform 0.15s;
      display: inline-block;
    }
    .tree-folder.open > .tree-folder-label .arrow { transform: rotate(90deg); }

    .tree-folder-children { display: none; padding-left: 12px; }
    .tree-folder.open > .tree-folder-children { display: block; }

    .tree-file {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 3px 12px;
      cursor: pointer;
      color: var(--text-muted);
      font-size: 12px;
      border-radius: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tree-file:hover { background: var(--bg-tertiary); color: var(--text); }
    .tree-rename {
      flex: 1; min-width: 0; font: inherit; font-size: 12px;
      background: var(--bg-primary); color: var(--text);
      border: 1px solid var(--accent); border-radius: 4px; padding: 1px 4px; outline: none;
    }
    .tree-file.active {
      background: rgba(200,191,255,0.18);
      color: var(--accent);
    }
    .tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .tree-more {
      font-size: 16px !important; color: var(--text-faint); flex-shrink: 0;
      opacity: 0; border-radius: 3px; line-height: 1;
      transition: opacity 0.1s;
      min-width: 28px; min-height: 28px; display: flex; align-items: center; justify-content: center;
    }
    .tree-file:hover .tree-more,
    .tree-folder-label:hover .tree-more { opacity: 0.7; }
    .tree-more:hover { opacity: 1 !important; background: var(--bg-secondary); }
    @media (hover: none) { .tree-more { opacity: 0.8; } }

    /* ── Panel principal ── */
    #main {
      flex: 1;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      background: var(--bg-primary);
    }
    #content-pane {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0;
    }
    /* Panel de grafo (split): oculto salvo body.graph-split */
    #graph-pane {
      flex: 1;
      display: none;
      flex-direction: column;
      position: relative;
      border-left: 1px solid var(--border);
      min-width: 0;
    }
    body.graph-split #graph-pane { display: flex; }
    /* Sin nota abierta, el grafo toma la ventana completa (móvil y desktop) */
    body.graph-split.graph-full #content-pane { display: none; }
    body.graph-split.graph-full #graph-pane { flex: 1 1 100%; border-left: none; border-top: none; }
    body.graph-split.graph-full #graph-divider { display: none; }
    #graph-divider {
      width: 5px; flex-shrink: 0; cursor: col-resize; background: transparent; display: none;
    }
    body.graph-split #graph-divider { display: block; }
    #graph-divider:hover { background: var(--accent); opacity: 0.4; }
    #graph-pane-header {
      display: flex; align-items: center; gap: 8px; height: var(--topbar-h); flex-shrink: 0;
      padding: 0 8px 0 14px; border-bottom: 1px solid var(--border); background: var(--bg-secondary);
    }
    #graph-pane-title { flex: 1; font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .graph-pane-actions { display: flex; gap: 2px; }
    .gp-btn {
      background: none; border: none; color: var(--text-faint); cursor: pointer;
      padding: 4px; border-radius: 6px; display: flex; align-items: center;
    }
    .gp-btn:hover { background: var(--bg-tertiary); color: var(--text); }
    .gp-btn.active { color: var(--accent); }
    .gp-btn .material-symbols-outlined { font-size: 18px !important; }

    /* Panel de ajustes del grafo (flotante sobre el graph-pane) */
    #graph-settings-panel {
      position: absolute; top: calc(var(--topbar-h) + 8px); right: 8px; width: 260px;
      max-height: calc(100% - var(--topbar-h) - 16px); overflow-y: auto; z-index: 20;
      background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5); font-size: 13px;
    }
    #graph-settings-panel.hidden { display: none; }
    .gs-titlebar { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-weight: 600; }
    .gs-x { cursor: pointer; color: var(--text-faint); }
    .gs-x:hover { color: var(--text); }
    .gs-section { border-top: 1px solid var(--border); }
    .gs-head { display: flex; align-items: center; gap: 6px; padding: 8px 12px; cursor: pointer; color: var(--text-muted); font-weight: 600; }
    .gs-head .arrow { font-size: 9px; transition: transform 0.15s; transform: rotate(90deg); display: inline-block; }
    .gs-section.collapsed .arrow { transform: rotate(0deg); }
    .gs-section.collapsed .gs-body { display: none; }
    .gs-body { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
    .gs-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
    .gs-toggle input { accent-color: var(--accent); }
    .gs-slider { display: flex; flex-direction: column; gap: 3px; color: var(--text-muted); font-size: 12px; }
    .gs-slider input[type="range"] { width: 100%; accent-color: var(--accent); }
    .gs-row { display: flex; align-items: center; gap: 8px; }
    .gs-row input[type="range"] { flex: 1; }
    .gs-num {
      width: 52px; flex-shrink: 0; text-align: right;
      background: var(--bg-primary); color: var(--text);
      border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px;
      font: inherit; font-size: 11px; outline: none;
    }
    .gs-num:focus { border-color: var(--accent); }
    .gs-search, .gs-q {
      background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 6px;
      padding: 6px 8px; color: var(--text); font-family: var(--font); outline: none; width: 100%;
    }
    .gs-search:focus, .gs-q:focus { border-color: var(--accent); }
    .gs-groups { display: flex; flex-direction: column; gap: 6px; }
    .gs-group { display: flex; align-items: center; gap: 6px; }
    .gs-group .gs-q { flex: 1; min-width: 0; font-size: 12px; }
    .gs-group .gs-c { width: 26px; height: 26px; border: none; background: none; padding: 0; cursor: pointer; }
    .gs-group .gs-del { cursor: pointer; color: var(--text-faint); font-size: 12px; }
    .gs-group .gs-del:hover { color: var(--red); }
    .gs-newgroup, .gs-animate {
      background: var(--accent); color: #1a1a1a; border: none; border-radius: 6px; padding: 7px;
      cursor: pointer; font-family: var(--font); font-weight: 600; font-size: 12px;
    }
    .gs-newgroup:hover, .gs-animate:hover { opacity: 0.9; }

    /* ── Tabs ── */
    #tabs {
      display: flex;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border);
      overflow-x: auto;
      flex-shrink: 0;
    }
    #tabs::-webkit-scrollbar { height: 3px; }
    #tabs::-webkit-scrollbar-thumb { background: var(--border); }

    .tab {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      font-size: 12px;
      color: var(--text-muted);
      cursor: pointer;
      border-right: 1px solid var(--border);
      white-space: nowrap;
      min-width: 0;
      max-width: 180px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .tab:hover { background: var(--bg-tertiary); color: var(--text); }
    .tab.active { background: var(--bg-primary); color: var(--text); }
    .tab .tab-name { overflow: hidden; text-overflow: ellipsis; }
    .tab .tab-close {
      font-size: 14px;
      line-height: 1;
      color: var(--text-faint);
      flex-shrink: 0;
    }
    .tab .tab-close:hover { color: var(--red); }
    .tab.dirty .tab-name::after { content: " ●"; color: var(--accent); }

    /* ── Editor area ── */
    #editor-wrap {
      flex: 1;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    #editor-pane {
      flex: 1;
      overflow: auto;
    }

    /* CodeMirror overrides */
    .cm-editor {
      height: 100%;
      font-family: var(--font-mono) !important;
      font-size: 13px;
      background: var(--bg-primary) !important;
    }
    .cm-editor.cm-focused { outline: none; }
    .cm-scroller { padding: 24px 48px; max-width: 760px; margin: 0 auto; }
    .cm-content { min-height: calc(100vh - var(--topbar-h) - 80px); }
    .cm-line { color: var(--text); line-height: 1.7; }
    .cm-gutters { display: none !important; }
    .cm-cursor { border-left-color: var(--accent) !important; }
    .cm-selectionBackground, .cm-content ::selection { background: rgba(200,191,255,0.25) !important; }
    .cm-activeLine { background: rgba(200,191,255,0.05) !important; }
    .cm-wikilink { color: var(--accent); }

    /* ── Reader (modo lectura) ── */
    #reader-pane {
      flex: 1;
      overflow: auto;
      padding: 24px 48px;
    }
    .reader-content {
      max-width: 760px;
      margin: 0 auto;
      color: var(--text);
      line-height: 1.7;
      font-family: var(--reader-font-family, var(--font));
      font-size: var(--reader-font-size, 16px);
    }
    .reader-content h1 { font-size: 1.9em; font-weight: 700; margin: 0.6em 0 0.4em; }
    .reader-content h2 { font-size: 1.5em; font-weight: 600; margin: 1em 0 0.4em; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; }
    .reader-content h3 { font-size: 1.25em; font-weight: 600; margin: 0.9em 0 0.3em; }
    .reader-content h4, .reader-content h5, .reader-content h6 { font-weight: 600; margin: 0.8em 0 0.3em; }
    .reader-content p { margin: 0.6em 0; }
    .reader-content ul, .reader-content ol { margin: 0.6em 0; padding-left: 1.5em; }
    .reader-content li { margin: 0.2em 0; }
    .reader-content a { color: var(--accent); text-decoration: none; }
    .reader-content a:hover { text-decoration: underline; }
    .reader-content a.wikilink { border-bottom: 1px dashed rgba(200,191,255,0.5); }
    .reader-content code {
      font-family: var(--font-mono);
      font-size: 0.85em;
      background: var(--bg-tertiary);
      padding: 0.15em 0.4em;
      border-radius: 4px;
      color: var(--yellow);
    }
    .reader-content pre {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 16px;
      overflow-x: auto;
      margin: 0.8em 0;
    }
    .reader-content pre code { background: none; padding: 0; color: var(--text); }
    .reader-content blockquote {
      border-left: 2px solid var(--accent);
      background: var(--bg-tertiary);
      margin: 0.8em 0;
      padding: 0.4em 1em;
      color: var(--text-muted);
    }
    .reader-content img { max-width: 100%; border-radius: 8px; }
    .reader-content video { max-width: 100%; max-height: 70vh; border-radius: 8px; }
    .reader-content .geo-link {
      text-decoration: none;
      font-style: normal;
      font-size: 12px;
      background: rgba(200, 191, 255, 0.12);
      border-radius: 999px;
      padding: 1px 8px;
      cursor: copy;
    }
    .reader-content .geo-link:hover { background: rgba(200, 191, 255, 0.22); }
    .reader-content hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
    .reader-content table { border-collapse: collapse; margin: 0.8em 0; }
    .reader-content th, .reader-content td { border: 1px solid var(--border); padding: 6px 12px; }
    .reader-content th { background: var(--bg-tertiary); }
    .reader-content code, .reader-content pre { font-family: var(--font-mono); } /* el código no hereda la fuente de lectura */

    /* ── Iconos del árbol ── */
    .tree-icon { font-size: 16px !important; color: var(--text-faint); }
    .tree-file:hover .tree-icon, .tree-file.active .tree-icon { color: inherit; }

    /* ── Menú de iconos (click derecho) ── */
    #icon-menu {
      position: fixed; z-index: 200;
      background: var(--bg-tertiary); border: 1px solid var(--border);
      border-radius: 8px; padding: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    }
    #icon-menu .icon-grid {
      display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; max-width: 240px;
    }
    #icon-menu .icon-opt {
      font-size: 20px; padding: 6px; border-radius: 6px; cursor: pointer;
      color: var(--text-muted); text-align: center;
    }
    #icon-menu .icon-opt:hover { background: var(--bg-primary); color: var(--text); }
    #icon-menu .icon-opt.sel { color: var(--accent); background: rgba(200,191,255,0.15); }
    #icon-menu .icon-clear {
      margin-top: 6px; padding: 6px 8px; font-size: 12px; color: var(--text-faint);
      cursor: pointer; border-top: 1px solid var(--border); text-align: center;
    }
    #icon-menu .icon-clear:hover { color: var(--red); }
    #icon-menu .color-row {
      display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
      margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
    }
    #icon-menu .color-swatch {
      width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
      border: 2px solid transparent;
    }
    #icon-menu .color-swatch.sel { border-color: var(--text); }
    #icon-menu .color-custom-wrap {
      position: relative; width: 22px; height: 22px; display: inline-flex;
      align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted);
    }
    #icon-menu .color-custom-wrap .material-symbols-outlined { font-size: 18px !important; }
    #icon-menu .color-custom { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
    #icon-menu .color-clear { cursor: pointer; color: var(--text-faint); font-size: 16px; padding: 0 4px; }
    #icon-menu .color-clear:hover { color: var(--text); }
    #icon-menu .ctx-sep { height: 1px; background: var(--border); margin: 8px 0; }
    #icon-menu .ctx-item {
      display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px;
      cursor: pointer; color: var(--text-muted); font-size: 13px;
    }
    #icon-menu .ctx-item:hover { background: var(--bg-primary); color: var(--text); }
    #icon-menu .ctx-item.danger:hover { color: var(--red); }
    #icon-menu .ctx-item .material-symbols-outlined { font-size: 17px !important; }
    #icon-menu .node-head { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px 4px; }
    #icon-menu .node-head b { color: var(--text); font-size: 14px; }
    #icon-menu .node-type { font-size: 11px; color: var(--accent); }
    #icon-menu .node-path { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); padding: 0 4px; word-break: break-all; }
    #icon-menu .node-meta { font-size: 11px; color: var(--text-muted); padding: 4px; }
    #icon-menu .node-neigh-label { font-size: 11px; color: var(--text-faint); padding: 2px 4px; }
    #icon-menu .ctx-item.nb { font-size: 12px; color: var(--text-muted); }
    #icon-menu .ctx-item.nb:hover { color: var(--accent); }
    /* ancho cómodo para el menú de nodo */
    #icon-menu { min-width: 200px; max-width: 280px; }

    /* botón Restablecer del panel de grafo */
    .gs-reset-wrap { padding: 10px 12px; }
    .gs-reset {
      width: 100%; background: var(--bg-tertiary); border: 1px solid var(--border);
      border-radius: 6px; padding: 7px; color: var(--text-muted); cursor: pointer;
      font-family: var(--font); font-size: 12px;
    }
    .gs-reset:hover { color: var(--text); border-color: var(--accent); }

    /* Items ocultos del árbol (visibles sólo con "mostrar ocultos") */
    .hidden-item { opacity: 0.45; }
    .hidden-item .tree-icon { color: var(--text-faint); }

    /* Toggle de preferencias */
    .prefs-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 14px; color: var(--text); }
    .prefs-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }

    /* ── Panel de Propiedades (modo lectura) ── */
    .props-panel {
      max-width: 760px; margin: 0 auto 1.2em; border-bottom: 1px solid var(--border);
      padding-bottom: 0.6em;
    }
    .props-head {
      display: flex; align-items: center; gap: 6px; cursor: pointer;
      color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 4px 0;
    }
    .props-head .arrow { font-size: 9px; transition: transform 0.15s; transform: rotate(90deg); display: inline-block; }
    .props-ro { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--text-faint); font-style: italic; }
    .props-panel.collapsed .arrow { transform: rotate(0deg); }
    .props-panel.collapsed .props-rows { display: none; }
    .prop-row {
      display: grid; grid-template-columns: 180px 1fr; align-items: start;
      gap: 8px; padding: 3px 0; font-size: 14px;
    }
    .prop-keywrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .prop-row .prop-ico { font-size: 16px !important; color: var(--text-faint); flex-shrink: 0; }
    .prop-key { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .prop-val { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--text); min-width: 0; }
    .prop-chip {
      display: inline-flex; align-items: center; gap: 3px;
      background: rgba(200,191,255,0.15); color: var(--accent);
      border-radius: 6px; padding: 2px 8px; font-size: 13px;
    }
    .prop-chip.clickable .chip-label { cursor: pointer; }
    .prop-chip.clickable .chip-label:hover { text-decoration: underline; }
    .prop-chip .chip-x { font-size: 14px !important; cursor: pointer; color: var(--text-faint); }
    .prop-chip .chip-x:hover { color: var(--red); }
    .prop-add {
      background: none; border: none; color: var(--text); width: 60px; font-size: 13px;
      font-family: var(--font); outline: none;
    }
    .prop-scalar { outline: none; border-radius: 4px; padding: 1px 4px; }
    .prop-scalar:focus { background: var(--bg-tertiary); }
    .prop-addrow {
      display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
      color: var(--text-faint); font-size: 13px; margin-top: 6px;
    }
    .prop-addrow:hover { color: var(--text); }
    .prop-addrow .material-symbols-outlined { font-size: 16px !important; }

    /* ── Callouts ── */
    .reader-content .callout {
      border: none; border-left: 3px solid var(--accent); background: var(--bg-tertiary);
      border-radius: 6px; margin: 0.8em 0; padding: 0.6em 1em; color: var(--text);
    }
    .reader-content .callout-title {
      display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent);
    }
    .reader-content .callout-title .material-symbols-outlined { font-size: 18px !important; }
    .reader-content .callout-body { color: var(--text-muted); }
    .reader-content .callout-body > :first-child { margin-top: 0.3em; }
    .callout-warning, .callout-danger, .callout-error { border-left-color: var(--red); }
    .callout-warning .callout-title, .callout-danger .callout-title, .callout-error .callout-title { color: var(--red); }
    .callout-success, .callout-tip { border-left-color: var(--green); }
    .callout-success .callout-title, .callout-tip .callout-title { color: var(--green); }

    /* ── Imágenes inline en el editor ── */
    .cm-inline-img { max-width: 100%; max-height: 60vh; border-radius: 8px; display: block; margin: 4px 0; }

    /* ── Overlay de tags / preferencias ── */
    .tag-overlay {
      position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.45);
      display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
    }
    .tag-box {
      width: 420px; max-width: 92vw; max-height: 70vh; overflow-y: auto;
      background: var(--bg-secondary); border: 1px solid var(--border);
      border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.55);
    }
    .tag-head {
      display: flex; align-items: center; gap: 8px; padding: 14px 16px;
      font-weight: 600; border-bottom: 1px solid var(--border); color: var(--text);
    }
    .tag-head .material-symbols-outlined { color: var(--accent); }
    .tag-list { padding: 6px; }
    .tag-item {
      display: flex; align-items: center; gap: 8px; padding: 8px 10px;
      border-radius: 6px; cursor: pointer; color: var(--text); font-size: 14px;
    }
    .tag-item:hover { background: var(--bg-tertiary); }
    .tag-item .material-symbols-outlined { font-size: 18px !important; color: var(--text-faint); }
    .tag-item .tag-count { margin-left: auto; color: var(--text-faint); font-size: 12px; font-family: var(--font-mono); }
    .tag-empty { padding: 16px; text-align: center; color: var(--text-faint); font-size: 13px; }

    /* ── Preferencias ── */
    .prefs-box { width: 460px; }
    .prefs-section { padding: 14px 16px; border-bottom: 1px solid var(--border); }
    .prefs-label { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
    .prefs-current { font-size: 13px; color: var(--text-faint); margin-bottom: 8px; }
    .prefs-row { display: flex; gap: 8px; margin-bottom: 8px; }
    .prefs-row input[type="text"] {
      flex: 1; background: var(--bg-tertiary); border: 1px solid var(--border);
      border-radius: 6px; padding: 7px 10px; color: var(--text); font-family: var(--font); outline: none;
    }
    .prefs-row input[type="text"]:focus { border-color: var(--accent); }
    .prefs-row button, .prefs-reset, .prefs-upload {
      background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 6px;
      padding: 7px 12px; color: var(--text); cursor: pointer; font-size: 13px; font-family: var(--font);
    }
    .prefs-row button:hover, .prefs-reset:hover, .prefs-upload:hover { background: var(--bg-primary); border-color: var(--accent); }
    .prefs-upload { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
    .prefs-upload .material-symbols-outlined { font-size: 18px !important; }
    .prefs-reset { display: block; width: 100%; color: var(--text-faint); }
    .prefs-section input[type="range"] { width: 100%; accent-color: var(--accent); }

    /* ── Backlinks panel ── */
    #backlinks {
      border-top: 1px solid var(--border);
      background: var(--bg-secondary);
      flex-shrink: 0;
      max-height: 200px;
      overflow-y: auto;
    }
    #backlinks-header {
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-faint);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    #backlinks-header:hover { color: var(--text-muted); }
    #backlinks-list { padding: 0 12px 8px; }
    .backlink-item {
      font-size: 12px;
      color: var(--accent);
      cursor: pointer;
      padding: 2px 0;
    }
    .backlink-item:hover { text-decoration: underline; }
    .no-backlinks { font-size: 12px; color: var(--text-faint); padding: 2px 0; }

    /* ── Empty state ── */
    #empty {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--text-faint);
      gap: 8px;
    }
    #empty svg { opacity: 0.3; }
    #empty p { font-size: 13px; }

    /* ── Login screen ── */
    #login-screen {
      position: fixed;
      inset: 0;
      background: var(--bg-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }
    #login-screen.hidden { display: none; }

    .login-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 2.5rem 3rem;
      text-align: center;
      min-width: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .login-card h1 { font-size: 1.2rem; font-weight: 600; }
    .login-card p { font-size: 13px; color: var(--text-muted); }
    .btn-primary {
      background: var(--accent);
      color: white;
      border: none;
      border-radius: 6px;
      padding: 0.6rem 1.4rem;
      font-size: 14px;
      cursor: pointer;
      font-family: var(--font);
      transition: opacity 0.15s;
    }
    .btn-primary:hover { opacity: 0.88; }
    .login-icon {
      width: 56px; height: 56px; border-radius: 14px;
      background: rgba(200,191,255,0.15); display: flex; align-items: center; justify-content: center;
    }
    .login-icon .material-symbols-outlined { font-size: 30px !important; color: var(--accent); }
    .login-gh { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; }
    .login-access { font-size: 12px; color: var(--text-faint); display: flex; flex-direction: column; gap: 3px; }
    .login-access a { color: var(--accent); text-decoration: none; }
    .login-access a:hover { text-decoration: underline; }
    .login-footer {
      display: flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: 0.04em;
      color: var(--text-faint); font-family: var(--font-mono); margin-top: 4px;
    }
    .login-footer .material-symbols-outlined { font-size: 13px !important; }
    .login-footer .login-dot { margin: 0 2px; }

    /* ── Conflict dialog ── */
    #conflict-dialog {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 200;
    }
    #conflict-dialog.hidden { display: none; }
    .dialog-box {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 1.5rem;
      max-width: 420px;
      width: 90%;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .dialog-box h3 { font-size: 14px; font-weight: 600; color: var(--yellow); }
    .dialog-box p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
    .dialog-box textarea {
      width: 100%;
      height: 120px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      font-size: 11px;
      padding: 8px;
      resize: none;
      outline: none;
    }
    .dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }
    .btn-secondary {
      background: none;
      border: 1px solid var(--border);
      color: var(--text-muted);
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 12px;
      cursor: pointer;
      font-family: var(--font);
    }
    .btn-secondary:hover { background: var(--bg-tertiary); color: var(--text); }

    /* ── Breadcrumb ── */
    #breadcrumb {
      display: none;
      align-items: center;
      gap: 6px;
      padding: 8px 48px 0;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-faint);
      flex-shrink: 0;
    }
    #breadcrumb .crumb-sep { opacity: 0.5; }
    #breadcrumb .crumb-last { color: var(--text-muted); }

    /* ── Barra de herramientas del editor (sólo en modo edición) ── */
    #editor-toolbar {
      display: none;
      align-items: center;
      gap: 2px;
      padding: 6px 48px;
      flex-shrink: 0;
    }
    #editor-toolbar .tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 6px; }
    .tb-btn {
      display: flex; align-items: center; justify-content: center;
      width: 30px; height: 30px; border-radius: 6px;
      background: none; border: none; cursor: pointer; color: var(--text-muted);
    }
    .tb-btn:hover { background: var(--bg-tertiary); color: var(--text); }
    .tb-btn .material-symbols-outlined { font-size: 19px !important; }
    .tb-img {
      display: flex; align-items: center; gap: 6px;
      height: 30px; padding: 0 12px; border-radius: 6px;
      background: var(--bg-tertiary); border: none; cursor: pointer;
      color: var(--text); font-family: var(--font); font-size: 13px;
    }
    .tb-img:hover { background: var(--border); }
    .tb-img .material-symbols-outlined { font-size: 18px !important; color: var(--accent); }
    #tb-img-list { width: 24px; }
    #tb-img-list .material-symbols-outlined { font-size: 18px !important; }
    #tb-img-pop {
      position: fixed; z-index: 200; max-height: 320px; overflow: auto;
      min-width: 220px; max-width: 320px;
      background: var(--bg-tertiary); border: 1px solid var(--border);
      border-radius: 8px; padding: 6px; box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    }
    #tb-img-pop .tb-img-item {
      display: flex; align-items: center; gap: 8px; padding: 5px 6px;
      border-radius: 6px; cursor: pointer; color: var(--text-muted); font-size: 12px;
    }
    #tb-img-pop .tb-img-item:hover { background: var(--bg-primary); color: var(--text); }
    #tb-img-pop .tb-img-item img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
    #tb-img-pop .tb-img-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #tb-img-pop .tb-img-empty { padding: 10px; font-size: 12px; color: var(--text-faint); }
    #tb-link-pop {
      position: fixed; z-index: 200; width: 260px;
      background: var(--bg-tertiary); border: 1px solid var(--border);
      border-radius: 8px; padding: 6px; box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    }
    #tb-link-pop .tb-link-search {
      width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 5px 8px;
      background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px;
      color: var(--text); font: inherit; font-size: 12px; outline: none;
    }
    #tb-link-pop .tb-link-list { max-height: 280px; overflow: auto; }
    #tb-link-pop .tb-link-item {
      display: flex; align-items: center; gap: 8px; padding: 5px 6px;
      border-radius: 6px; cursor: pointer; color: var(--text-muted); font-size: 12px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #tb-link-pop .tb-link-item:hover { background: var(--bg-primary); color: var(--text); }
    #tb-link-pop .tb-link-item.new { color: var(--accent); }
    #tb-link-pop .tb-link-item .material-symbols-outlined { font-size: 16px !important; }

    /* ── Status bar ── */
    #statusbar {
      min-height: 24px;
      height: auto;
      flex-shrink: 0;
      background: var(--bg-secondary);
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px env(safe-area-inset-bottom);
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-faint);
    }
    #statusbar.hidden { display: none; }
    .status-left { display: flex; align-items: center; gap: 7px; }
    .status-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 6px var(--green);
    }
    .status-right { display: flex; align-items: center; gap: 18px; }
    #status-mode { color: var(--text-muted); }

    /* ── Command palette ── */
    #palette {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(2px);
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding-top: 120px;
      z-index: 250;
    }
    #palette.hidden { display: none; }
    .palette-box {
      width: 640px;
      max-width: 92vw;
      background: var(--bg-tertiary);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      max-height: 60vh;
    }
    .palette-search {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      color: var(--text-faint);
    }
    #palette-input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      color: var(--text);
      font-family: var(--font);
      font-size: 15px;
    }
    #palette-input::placeholder { color: var(--text-faint); }
    .kbd {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-muted);
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 2px 8px;
    }
    #palette-list { overflow-y: auto; padding: 6px 0; }
    .palette-section {
      font-family: var(--font-mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-faint);
      padding: 8px 16px 4px;
    }
    .palette-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 16px;
      cursor: pointer;
      border-left: 2px solid transparent;
      color: var(--text-muted);
      font-size: 13px;
    }
    .palette-item .pi-icon { width: 16px; text-align: center; color: var(--text-faint); flex-shrink: 0; }
    .palette-item .pi-name { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .palette-item .pi-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
    .palette-item.active {
      background: var(--bg-secondary);
      border-left-color: var(--accent);
    }
    .palette-empty { padding: 16px; text-align: center; color: var(--text-faint); font-size: 13px; }
    .palette-footer {
      display: flex;
      gap: 18px;
      padding: 8px 16px;
      border-top: 1px solid var(--border);
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-faint);
    }

    /* ── Toast ── */
    #toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 16px;
      font-size: 12px;
      color: var(--text);
      z-index: 300;
      transition: opacity 0.3s;
      pointer-events: none;
    }
    #toast.hidden { opacity: 0; }
    #toast.ok { border-color: var(--green); color: var(--green); }
    #toast.err { border-color: var(--red); color: var(--red); }

    /* ── Spinner ── */
    .spin {
      display: inline-block;
      width: 14px; height: 14px;
      border: 2px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Mobile: sidebar overlay ── */
    @media (max-width: 640px) {
      #sidebar {
        position: fixed;
        inset: calc(var(--topbar-h) + env(safe-area-inset-top)) auto 0 0;
        z-index: 50;
        width: 80vw;
        max-width: 300px;
        box-shadow: 4px 0 20px rgba(0,0,0,0.4);
      }
      #sidebar.collapsed { width: 0; box-shadow: none; }
      .cm-scroller { padding: 16px 20px; }
      /* En mobile el split apila nota (50%) + grafo (50%) en columna */
      body.graph-split #main { flex-direction: column; }
      body.graph-split #content-pane { display: flex; flex: 1 1 50%; min-height: 0; }
      body.graph-split #graph-pane { flex: 1 1 50%; min-height: 0; border-left: none; border-top: 1px solid var(--border); }
      #graph-divider { display: none !important; }
    }

    /* ── Vista de grafo ── */
    #graph-view {
      flex: 1;
      position: relative;
      background: var(--bg-primary);
      overflow: hidden;
    }
    /* Touch: sin selección de texto ni lupa/callout de iOS en tap sostenido */
    #graph-pane, #graph-view {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }
    /* Toggle flotante "Nombres" (etiquetas de todos los nodos) */
    #graph-labels-btn {
      position: absolute;
      left: 10px;
      bottom: 8px;
      z-index: 5;
      background: rgba(20, 18, 30, 0.7);
      color: var(--text-muted);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 4px 12px;
      font-size: 11px;
      font-family: inherit;
      cursor: pointer;
    }
    #graph-labels-btn.active {
      background: var(--accent);
      border-color: transparent;
      color: #16141f;
    }
    #graph-view .graph-loading {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: 12px;
      gap: 8px;
    }