/* ═══════════════════════════════════════════════════════════════
   TECTONIAN — MIND MAPPER PRO
   Consolidated stylesheet — all styles in one place.
   No <style> injection or inline styles needed.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   CUSTOM PROPERTIES
   ─────────────────────────────────────────────────────────────── */
:root {
    /* Base palette */
    --bg-deep:       #0a0a0f;
    --bg-surface:    #12121a;
    --bg-elevated:   #1a1a24;
    --bg-node:       #1e2230;
    --border:        #2a2a3a;
    --border-light:  #3a3a4a;
    --text-primary:  #f0f2f5;
    --text-secondary:#8a8f9d;
    --text-muted:    #5a5f6d;
    --accent:        #4a9eff;
    --accent-bright: #6ab0ff;
    --accent-dim:    rgba(74, 158, 255, 0.15);
    --accent-glow:   rgba(74, 158, 255, 0.35);
    --success:       #34d399;
    --success-dim:   rgba(52, 211, 153, 0.15);
    --danger:        #ef4444;
    --danger-dim:    rgba(239, 68, 68, 0.15);
    --warning:       #f59e0b;

    /* Dynamic theme — set by JS via setProperty() */
    --pc:            #4a9eff;
    --pc-hover:      #5db0ff;
    --pc-glow:       rgba(74, 158, 255, 0.35);
    --pc-dim:        rgba(74, 158, 255, 0.15);
    --pc-text:       #4a9eff;
    --pc-button:     #4a9eff;
    --pc-button-fill:#1a1a24;
    --pc-node-glow:  rgba(74, 158, 255, 0.4);
    --pc-core-bg:    #12121a;
    --pc-branch-bg:  #12121a;
    --pc-bg:         #0a0a0f;
    --pc-toolbar:    #12121a;
    --pc-tabbar:     #12121a;
    --pc-sidebar:    #12121a;
    --pc-toolbar-text: var(--text-primary);
    --pc-tabbar-text:  var(--text-primary);
    --pc-sidebar-text: var(--text-primary);
    --pc-bg-text:      var(--text-primary);
    --pc-controls-text: var(--text-secondary);
    --pc-controls-text-hover: var(--text-primary);
    --accent-active-text: var(--accent);
    --pc-label:      #bb99dd;
    --pc-connection: var(--pc);
    --pc-lines:      var(--border-light);
    --pc-core-text:  #ffffff;
    --pc-branch-text:#ffffff;
    --accent-text:   #ffffff;

    /* Fonts (user-configurable) */
    --font-ui:    'Outfit', sans-serif;
    --font-node:  'Outfit', sans-serif;
    --font-mono:  'JetBrains Mono', monospace;

    /* Glow (user-configurable) */
    --glow-spread:    20px;
    --glow-intensity: 0.4;

    /* Font sizes (user-configurable) */
    --ui-font-size:   14px;
    --node-font-size: 13px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Transitions */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.25s ease;
}


/* ───────────────────────────────────────────────────────────────
   RESET & BASE
   ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-ui, 'Outfit'), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--ui-font-size);
    background: var(--pc-bg, var(--bg-deep));
    color: var(--text-primary);
    line-height: 1.5;
    overflow: hidden;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
* { scrollbar-width: thin; scrollbar-color: var(--bg-elevated) var(--bg-deep); }


/* ═══════════════════════════════════════════════════════════════
   APP LAYOUT
   ═══════════════════════════════════════════════════════════════ */
#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}


/* ═══════════════════════════════════════════════════════════════
   TAB BAR
   ═══════════════════════════════════════════════════════════════ */
#tab-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--pc-tabbar, var(--bg-surface));
    color: var(--pc-tabbar-text, var(--text-primary));
    border-bottom: 1px solid var(--border);
    height: 48px;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

.tab-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.app-logo .logo-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    flex-shrink: 0;
    color: var(--accent-text, #fff);
}
.app-logo .logo-icon svg { width: 100%; height: 100%; }

#tabs-container {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 4px 0;
}
#tabs-container::-webkit-scrollbar { height: 0; }

.tab {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--pc-tabbar-text, var(--text-muted));
    opacity: 0.6;
    font-size: 13px;
    font-weight: 500;
    cursor: grab;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.tab:hover            { background: rgba(255,255,255,0.06); opacity: 0.8; }
.tab.active           { background: rgba(255,255,255,0.08); opacity: 1; box-shadow: inset 0 -2px 0 var(--accent); }
.tab .tab-name        { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.tab.tab-dragging     { opacity: 0.4; cursor: grabbing; }
.tab.drag-over-left   { border-left: 2px solid var(--accent); }
.tab.drag-over-right  { border-right: 2px solid var(--accent); }

/* Tab name editing */
.tab-name[contenteditable="true"] {
    outline: none;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    padding: 0 4px;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}
.tab-name[contenteditable="false"] {
    cursor: default;
    user-select: none;
}

.tab .tab-close {
    width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 3px; font-size: 12px;
    color: var(--pc-tabbar-text, var(--text-muted));
    opacity: 0.4;
    background: transparent; border: none;
    transition: all var(--transition-fast);
    cursor: pointer; padding: 0; line-height: 1;
}
.tab .tab-close:hover { background: var(--danger-dim); color: var(--danger); opacity: 1; }

#add-tab-btn { flex-shrink: 0; margin-left: 4px; }

.tab-bar-right, #user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: 12px;
}


/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    white-space: nowrap;
    background: var(--bg-elevated);
    color: var(--pc-controls-text, var(--text-secondary));
}
button:hover { background: var(--bg-node); color: var(--pc-controls-text-hover, var(--text-primary)); }

.btn-primary       { background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); box-shadow: 0 4px 12px var(--accent-glow); color: var(--accent-text, #fff); }

.btn-toolbar       { background: var(--bg-elevated); color: var(--pc-controls-text, var(--text-secondary)); border-color: var(--border); }
.btn-toolbar:hover { background: var(--bg-node); color: var(--pc-controls-text-hover, var(--text-primary)); border-color: var(--border-light); }

.btn-ghost       { background: transparent; color: var(--pc-toolbar-text, var(--text-secondary)); border-color: transparent; opacity: 0.7; }
.btn-ghost:hover { background: var(--bg-elevated); color: var(--pc-controls-text-hover, var(--text-primary)); opacity: 1; }

.btn-secondary       { background: var(--bg-elevated); color: var(--pc-controls-text, var(--text-secondary)); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-node); color: var(--pc-controls-text-hover, var(--text-primary)); border-color: var(--border-light); }

.btn-success       { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { background: #2fc78a; box-shadow: 0 4px 12px rgba(52,211,153,0.3); }

.btn-danger       { background: var(--danger-dim); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }

.btn-sm                { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-lg, .btn-large    { height: 40px; padding: 0 20px; font-size: 14px; }
.btn-square            { width: 32px; padding: 0; }
.btn-square.btn-sm     { width: 28px; }

.btn-icon {
    width: 32px; height: 32px; padding: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--pc-controls-text, var(--text-secondary));
    border-radius: var(--radius-sm);
    font-size: 14px;
}
.btn-icon:hover    { background: var(--accent-dim); border-color: var(--accent-active-text, var(--accent)); color: var(--accent-active-text, var(--accent)); }
.btn-icon.btn-sm   { width: 28px; height: 28px; font-size: 12px; }


/* ═══════════════════════════════════════════════════════════════
   TOOLBAR
   ═══════════════════════════════════════════════════════════════ */
#toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--pc-toolbar, var(--bg-deep));
    color: var(--pc-toolbar-text, var(--text-primary));
    border-bottom: 1px solid var(--border);
    min-height: 48px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
#toolbar > button, #toolbar .btn-toolbar { height: 32px; }
#toolbar .btn-toolbar-icon { width: 34px; padding: 0; font-size: 16px; display: flex; align-items: center; justify-content: center; }
#toolbar #add-core-node { padding: 0 14px; }

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-light);
    flex-shrink: 0;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--pc-controls-text, var(--text-secondary));
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.toolbar-toggle:hover                 { background: var(--bg-node); color: var(--pc-controls-text-hover, var(--text-primary)); }
.toolbar-toggle:has(input:checked)    { background: var(--accent-dim); border-color: var(--accent-active-text, var(--accent)); color: var(--accent-active-text, var(--accent)); }
.toolbar-toggle input[type="checkbox"]{ display: none; }

/* Toolbar active state (focus-mode etc.) */
#toolbar button.active,
#toolbar .btn-toolbar.active {
    background: var(--accent-dim);
    border-color: var(--accent-active-text, var(--accent));
    color: var(--accent-active-text, var(--accent));
}

/* Zoom */
.zoom-group {
    display: flex;
    align-items: center;
    height: 32px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.zoom-group button                    { height: 30px; border: none; border-radius: 0; background: transparent; color: var(--pc-controls-text-hover, var(--text-primary)); }
.zoom-group button:hover              { background: var(--bg-node); color: var(--pc-controls-text-hover, var(--text-primary)); }
.zoom-group #zoom-out,
.zoom-group #zoom-in                  { width: 30px; padding: 0; font-size: 16px; font-weight: 600; }
.zoom-group #zoom-reset               { padding: 0 10px; font-size: 11px; border-left: 1px solid var(--border); }
.zoom-group #zoom-level, #zoom-level  { min-width: 48px; text-align: center; font-size: 12px; font-weight: 600; color: var(--accent-active-text, var(--accent)); font-family: 'JetBrains Mono', monospace; }

/* Toolbar auth row */
.toolbar-auth-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Undo/redo */
.undo-redo-bar         { display: flex; gap: 4px; }
.undo-redo-bar button  { width: 32px; height: 32px; padding: 0; font-size: 16px; }
.undo-redo-bar button:disabled { opacity: 0.4; cursor: not-allowed; }


/* ═══════════════════════════════════════════════════════════════
   SEARCH BAR
   ═══════════════════════════════════════════════════════════════ */
.search-group {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}
.search-group input[type="text"] {
    width: 180px;
    height: 32px;
    padding: 0 28px 0 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--pc-controls-text-hover, var(--text-primary));
    font-size: 12px;
    font-family: inherit;
    transition: border-color var(--transition-fast), width var(--transition-normal);
}
.search-group input[type="text"]:focus     { outline: none; border-color: var(--accent); max-width: 220px; }
.search-group input[type="text"]::placeholder { color: var(--pc-controls-text, var(--text-muted)); }

.search-count {
    position: absolute;
    right: 36px;
    font-size: 10px;
    color: var(--pc-controls-text, var(--text-muted));
    font-family: 'JetBrains Mono', monospace;
    pointer-events: none;
}
.search-count:empty { display: none; }

/* Search share toggle (team mode) */
.search-share-toggle { margin-left: 2px; }

/* Search highlight on nodes */
.node.search-match {
    box-shadow: 0 0 0 2px var(--accent), 0 0 16px var(--accent-glow);
    z-index: 10;
}
mark.search-hl {
    background: rgba(74, 158, 255, 0.3);
    color: var(--accent-bright);
    padding: 0 2px;
    border-radius: 2px;
    font-style: normal;
}


/* ═══════════════════════════════════════════════════════════════
   FILTER DROPDOWN
   ═══════════════════════════════════════════════════════════════ */
.filter-dropdown { position: relative; }

.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: var(--bg-node);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    color: var(--pc-controls-text, var(--text-muted));
    margin-left: 6px;
}
.filter-count.active { background: var(--accent); color: var(--accent-text, #fff); }

.filter-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 240px;
    background: var(--pc-filter-panel, var(--pc-sidebar, var(--bg-surface)));
    color: var(--pc-filter-panel-text, var(--pc-sidebar-text, var(--text-primary)));
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 1000;
    display: none;
    overflow: hidden;
}
.filter-panel.open { display: block; }

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--pc-controls-text-hover, var(--text-secondary));
}
.filter-header button         { height: 24px; padding: 0 8px; font-size: 11px; background: transparent; border: 1px solid var(--border); color: var(--pc-controls-text, var(--text-muted)); }
.filter-header button:hover   { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); }

.filter-options { padding: 4px 0; }

.filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--pc-sidebar-text, var(--text-secondary));
    opacity: 0.8;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--border);
}
.filter-option:last-child            { border-bottom: none; }
.filter-option:hover                 { background: var(--bg-elevated); color: var(--pc-controls-text-hover, var(--text-primary)); opacity: 1; }
.filter-option input                 { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.filter-option:has(input:checked)    { color: var(--accent-active-text, var(--accent)); background: var(--accent-dim); opacity: 1; }

/* Filter row (legacy compat) */
.filter-row                          { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.filter-row:last-child               { border-bottom: none; }
.filter-row input[type="checkbox"]   { width: 16px; height: 16px; accent-color: var(--accent); }
.filter-row label                    { font-size: 13px; color: var(--pc-sidebar-text, var(--text-secondary)); opacity: 0.8; cursor: pointer; }

/* Tag filter section */
.tag-filter-section     { border-top: 1px solid var(--border); background: var(--bg-elevated); }

.tag-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.tag-filter-header strong   { font-size: 11px; font-weight: 600; color: var(--pc-controls-text, var(--text-muted)); text-transform: uppercase; letter-spacing: 0.5px; }
.tag-filter-header button   { height: 22px; padding: 0 8px; font-size: 11px; background: var(--bg-surface); border: 1px solid var(--border); color: var(--pc-sidebar-text, var(--text-secondary)); opacity: 0.7; }
.tag-filter-header button:hover { background: var(--accent-dim); border-color: var(--accent-active-text, var(--accent)); color: var(--accent-active-text, var(--accent)); opacity: 1; }

#tag-filter-rows { padding: 4px 0; }

.tag-filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.tag-filter-row:last-child        { border-bottom: none; }
.tag-filter-row select            { height: 26px; padding: 0 6px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--pc-sidebar-text, var(--text-primary)); font-size: 11px; min-width: 60px; }
.tag-filter-row input[type="text"]{ flex: 1; min-width: 60px; height: 26px; padding: 0 8px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--pc-sidebar-text, var(--text-primary)); font-size: 12px; }
.tag-filter-row button            { width: 24px; height: 24px; padding: 0; font-size: 12px; background: transparent; border: 1px solid var(--border); color: var(--pc-sidebar-text, var(--text-muted)); opacity: 0.5; }
.tag-filter-row button:hover      { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); opacity: 1; }


/* ═══════════════════════════════════════════════════════════════
   MAIN CONTAINER & CANVAS
   ═══════════════════════════════════════════════════════════════ */
#main-container {
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
    background: var(--pc-bg, var(--bg-deep));
}

#canvas-container {
    flex: 1;
    overflow: auto;
    position: relative;
    background: var(--pc-bg, var(--bg-deep));
}
#canvas-container.panning { cursor: grabbing; }

#nodes-container {
    position: relative;
    min-width: 20000px;
    min-height: 20000px;
}

#connections-layer,
#level-lines-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}

#conn-btns-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 3;
}

/* Grid overlay */
.canvas-grid-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 20000px; height: 20000px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-normal);
    z-index: 0;
}
.canvas-grid-overlay.visible {
    opacity: 1;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Level sidebars */
.level-sidebar {
    position: absolute;
    left: 0; top: 0;
    width: 60px; height: 100%;
    background: var(--pc-level-sidebar, var(--pc-sidebar, var(--bg-deep)));
    color: var(--pc-level-sidebar-text, var(--pc-sidebar-text, var(--text-primary)));
    border-right: 1px solid var(--border);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    overflow: hidden;
}
.level-sidebar.visible { opacity: 1; visibility: visible; }

.level-topbar {
    position: absolute;
    top: 0; left: 0;
    height: 36px; width: 100%;
    background: var(--pc-sidebar, var(--bg-deep));
    border-bottom: 1px solid var(--border);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    overflow: hidden;
}
.level-topbar.visible { opacity: 1; visibility: visible; }

.level-item {
    gap: 4px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--pc-sidebar-text, var(--text-secondary));
    opacity: 0.7;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border-bottom: 1px solid var(--pc-lines, var(--border));
    transition: top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.2s ease, color 0.15s ease;
    will-change: top, left;
}
.level-sidebar .level-item { margin: 4px; width: calc(100% - 8px); }
.level-topbar  .level-item { top: 4px; height: calc(100% - 8px); }
.level-item:hover          { color: var(--accent-active-text, var(--accent)); }
.level-item.inactive       { opacity: 0.5; }
.level-item .core-add      { font-size: 10px; color: var(--text-muted); margin-left: 2px; }
.level-item .core-add:hover{ color: var(--accent-active-text, var(--accent)); }

/* Level group — wraps indicator + core button, stacked */
.level-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.level-group.inactive { opacity: 0.45; }

.level-indicator {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    letter-spacing: 0.02em;
}
.level-indicator:hover { color: var(--accent); background: var(--accent-dim); }
.level-indicator.inactive { color: var(--text-muted); }

.level-core-btn {
    font-size: 10px;
    font-weight: 600;
    color: var(--accent);
    background: none;
    border: none;
    padding: 1px 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    line-height: 1;
}
.level-group:hover .level-core-btn { opacity: 1; }
.level-core-btn:hover { color: var(--success); }


/* ═══════════════════════════════════════════════════════════════
   NODES
   ═══════════════════════════════════════════════════════════════ */
.node {
    position: absolute;
    background: var(--pc-branch-bg, var(--bg-node));
    color: var(--pc-branch-text, var(--text-primary));
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    cursor: move;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    min-height: 80px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.node:hover {
    box-shadow:
        0 0 var(--glow-spread) var(--pc-node-glow),
        0 0 calc(var(--glow-spread) * 2) var(--pc-node-glow);
    transform: translateY(-2px);
    z-index: 2;
}

.node.selected {
    box-shadow:
        0 0 var(--glow-spread) var(--pc-node-glow),
        0 0 calc(var(--glow-spread) * 2) var(--pc-node-glow),
        inset 0 0 0 2px var(--pc);
    z-index: 3;
}

.node.last-clicked {
    box-shadow: 0 0 0 3px #f5c542, 0 8px 32px rgba(0,0,0,0.3);
    z-index: 4;
}

.node.dragging {
    opacity: 0.85;
    transform: scale(1.02);
    z-index: 100;
    box-shadow:
        0 0 calc(var(--glow-spread) * 1.5) var(--pc-node-glow),
        0 0 calc(var(--glow-spread) * 3) var(--pc-node-glow);
}

.node.core-node {
    background: var(--pc-core-bg, var(--bg-surface));
    color: var(--pc-core-text, var(--text-primary));
}

.node.branching-node {
    background: var(--pc-branch-bg, var(--bg-node));
    color: var(--pc-branch-text, var(--text-primary));
}

.node.inactive         { opacity: 0.45; filter: grayscale(30%); }
.node.locked           { border-style: dashed; }
.node.connection-hidden{ opacity: 0.6; }
.node.hidden-by-focus  { display: none !important; }
.node.auto-sized       { height: auto !important; min-height: 80px; }

/* Node title & description inherit color from node */
.node .node-title,
.node .node-description { color: inherit; }

/* Node content */
.node-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
    gap: var(--space-sm);
    padding-top: 4px;
    position: relative;
}

.node-body-area {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.node-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding-top: 18px;
    position: relative;
}

.node-icon {
    width: 24px; height: 24px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.node-title {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
    margin-top: 0;
}

.node-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.node:hover > .node-content .node-actions,
.node.selected > .node-content .node-actions,
.node.last-clicked > .node-content .node-actions {
    opacity: 1;
    pointer-events: auto;
}

.node-btn         { padding: 4px 8px; font-size: 11px; height: auto; }
.node-btn.edit-btn{ padding: 4px 8px; font-size: 12px; }

/* Edit button with icon+text layout */
.edit-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
}

.edit-text {
    font-size: 11px;
    font-weight: 500;
}

.node-description {
    font-size: var(--node-font-size, 13px);
    color: var(--text-secondary);
    line-height: 1.5;
    overflow: auto;
}

/* Description list/task styles */
.node-description ul,
.node-description ol { padding-left: 24px; margin: 6px 0; list-style-position: outside; }
.node-description li { margin: 3px 0; padding-left: 4px; }
.node-description ul { list-style-type: disc; }
.node-description ol { list-style-type: decimal; }
.node-description input[type="checkbox"] { margin-right: 8px; vertical-align: middle; }

.node-description .task-item,
.task-item { display: flex; align-items: flex-start; margin: 4px 0; }
.node-description .task-item input[type="checkbox"],
.task-item input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; margin-right: 8px; }
.task-item span  { flex: 1; min-height: 1em; }
.task-item input[type="text"] {
    flex: 1; background: transparent; border: none; border-bottom: 1px solid #444;
    color: inherit; font-size: inherit; padding: 4px 0; outline: none; font-family: inherit;
}
.task-item input[type="text"]:focus       { border-bottom-color: var(--pc); }
.task-item input[type="text"]::placeholder{ color: #666; font-style: italic; }

.node-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
}

.node-tag {
    padding: 2px 8px;
    background: var(--accent-dim);
    color: var(--pc-label, #bb99dd);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
}

.unlock-criteria {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--warning);
    cursor: pointer;
}

.add-child-btn {
    margin-top: auto;
    padding: var(--space-sm);
    background: var(--bg-elevated);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--pc-controls-text, var(--text-muted));
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.add-child-btn:hover {
    background: var(--accent-dim);
    border-color: var(--accent-active-text, var(--accent));
    color: var(--accent-active-text, var(--accent));
}

/* Node card image */
.node-card-image-wrap {
    margin: calc(var(--space-md) * -1);
    margin-bottom: var(--space-md);
    overflow: hidden;
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* When card is NOT the first child (header is above), don't bleed to top edge */
.node-card-image-wrap:not(:first-child) {
    margin-top: var(--space-sm);
    border-radius: var(--radius-sm);
}
.node-card-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Connection handles */
.connection-handle {
    position: absolute;
    width: 12px; height: 12px;
    background: var(--accent);
    border: 2px solid var(--bg-surface);
    border-radius: 50%;
    cursor: crosshair;
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: 5;
}
.node:hover .connection-handle { opacity: 1; }
.connection-handle:hover       { transform: scale(1.3); }
.left-handle                   { left: -6px; top: 50%; transform: translateY(-50%); }
.right-handle                  { right: -6px; top: 50%; transform: translateY(-50%); }
.connection-handle.connecting  { opacity: 1; background: var(--success); }

/* Resize handle */
.resize-handle {
    position: absolute;
    bottom: 0; right: 0;
    width: 20px; height: 20px;
    cursor: nwse-resize;
    z-index: 5;
    background: transparent;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.resize-handle::before {
    content: '';
    position: absolute;
    bottom: 4px; right: 4px;
    width: 10px; height: 10px;
    border-right: 2px solid rgba(255,255,255,0.25);
    border-bottom: 2px solid rgba(255,255,255,0.25);
}
.resize-handle::after {
    content: '';
    position: absolute;
    bottom: 7px; right: 7px;
    width: 5px; height: 5px;
    border-right: 2px solid rgba(255,255,255,0.25);
    border-bottom: 2px solid rgba(255,255,255,0.25);
}
.node:hover .resize-handle                         { opacity: 1; }
.node:hover .resize-handle::before,
.node:hover .resize-handle::after                  { border-color: rgba(255,255,255,0.45); }

/* Badges */
.node-id-badge {
    position: absolute;
    top: 4px; right: 8px;
    font-size: 9px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted);
    opacity: 0.5;
}

.level-badge {
    position: absolute;
    top: 4px; left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    padding: 2px 6px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    color: #888;
    z-index: 2;
    pointer-events: none;
    margin: 0;
}

/* Area select */
.area-select-rect {
    position: absolute;
    border: 2px dashed var(--accent);
    background: var(--accent-dim);
    pointer-events: none;
    z-index: 1000;
}

/* Node media container */
.node-media-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.node-media-item {
    border-radius: 6px;
    overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   CONNECTIONS
   ═══════════════════════════════════════════════════════════════ */
.connection-line         { stroke-width: 2.5; fill: none; }
.level-line              { stroke: var(--pc-lines, var(--border-light)); stroke-width: 1; stroke-dasharray: 8 4; }
.lateral-connection-path { stroke-dasharray: 8 5; fill: none; }

.conn-add-btn-wrap {
    position: absolute;
    width: 22px; height: 22px;
    pointer-events: auto;
    cursor: pointer;
    z-index: 5;
}

.conn-circle {
    width: 22px; height: 22px;
    background: var(--bg-surface);
    border: 2px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    transition: all var(--transition-fast);
    opacity: 0;
}
.conn-add-btn-wrap:hover .conn-circle {
    opacity: 1;
    background: var(--accent);
    color: #fff;
    transform: scale(1.1);
}

.connection-label {
    position: absolute;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-surface);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════
   MODALS (base)
   ═══════════════════════════════════════════════════════════════ */
.modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}
.modal.hidden { display: none; }

.modal-content {
    background: var(--pc-sidebar, var(--bg-surface));
    color: var(--pc-sidebar-text, var(--text-primary));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    max-width: 520px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modal-content h2 {
    margin: 0 0 var(--space-lg) 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-content .close {
    position: absolute;
    top: var(--space-md); right: var(--space-md);
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--pc-controls-text, var(--text-muted));
    font-size: 20px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.modal-content .close:hover { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); }

.modal-content label {
    display: block;
    font-size: 12px;
    color: var(--pc-sidebar-text, var(--text-secondary));
    opacity: 0.7;
    margin-bottom: var(--space-xs);
    margin-top: var(--space-md);
}

.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content input[type="password"],
.modal-content select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--pc-controls-text-hover, var(--text-primary));
    font-size: 14px;
}
.modal-content input:focus,
.modal-content select:focus { outline: none; border-color: var(--accent); }

.modal-content textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-elevated);
    border: none;
    color: var(--pc-controls-text-hover, var(--text-primary));
    font-size: 14px;
    font-family: 'JetBrains Mono', monospace;
    resize: vertical;
}
.modal-content textarea:focus { outline: none; }

.modal-actions     { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-xl); }
.modal-actions-row { display: flex; gap: var(--space-sm); }
.modal-actions-row > button { flex: 1; }

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
}
.checkbox-label input { width: 16px; height: 16px; accent-color: var(--accent); }

/* Rich editor toolbar */
.rich-editor              { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.editor-toolbar           { display: flex; gap: 2px; padding: var(--space-sm); background: var(--bg-elevated); border-bottom: 1px solid var(--border); align-items: center; }
.editor-btn               { width: 28px; height: 28px; padding: 0; font-size: 13px; }

/* Progress bars */
.progress-bar, .progress-bar-large  { height: 8px; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; margin-top: var(--space-sm); }
.progress-bar-large                  { height: 24px; position: relative; }
.progress-fill, .progress-fill-large { height: 100%; background: var(--accent); border-radius: 4px; transition: width var(--transition-normal); }
.progress-text                       { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 12px; font-weight: 600; color: var(--text-primary); }

/* Upload grid - 2x2 layout for file uploads */
/* Works with BOTH old .icon-upload and new .upload-grid HTML */
#edit-form .upload-grid,
#edit-form .upload-grid-migrated {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
    background: rgba(0,0,0,0.15);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.upload-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#edit-form .upload-grid .upload-cell > label,
#edit-form .upload-grid-migrated .upload-cell > label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 2px 0;
    display: block;
}

/* Styled file input wrapper */
.file-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.file-input-wrap input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    width: 100%;
    height: 100%;
    font-size: 0;
}
.file-input-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-elevated);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.file-input-wrap:hover .file-input-btn {
    border-color: var(--accent-active-text, var(--accent));
    color: var(--accent-active-text, var(--accent));
    background: var(--accent-dim);
}

/* Legacy .icon-upload — hide once migration runs, 
   but style decently as fallback */
.icon-upload {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.icon-upload input[type="file"] {
    font-size: 12px;
    color: var(--text-muted);
}
.icon-upload input[type="file"]::file-selector-button {
    padding: 5px 12px;
    background: var(--bg-elevated);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.icon-upload input[type="file"]::file-selector-button:hover {
    border-color: var(--accent-active-text, var(--accent));
    color: var(--accent-active-text, var(--accent));
    background: var(--accent-dim);
}
.upload-preview {
    min-height: 20px;
}
.upload-preview img {
    max-width: 48px;
    max-height: 48px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--border);
}

/* Media upload - spans full width */
.upload-cell--wide {
    grid-column: 1 / -1;
}

/* Size presets bar */
.size-presets-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}
.size-presets-bar button  { min-width: 32px; }
.size-scope-select {
    margin-left: auto;
    padding: 4px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 11px;
}

/* Edit modal color section */
#edit-color-section {
    width: 100%;
    margin: 16px 0;
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}
#edit-color-section .color-section-title { font-size: 13px; font-weight: 600; color: #ccc; margin-bottom: 12px; }
#edit-color-section .color-grid          { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-bottom: 12px; }
#edit-color-section .color-field         { display: flex; align-items: center; gap: 10px; }
#edit-color-section .color-field label   { font-size: 12px; color: #aaa; min-width: 70px; margin: 0; }
#edit-color-section .color-field input[type="color"] { width: 50px; height: 28px; border: 1px solid #444; border-radius: 4px; cursor: pointer; padding: 2px; flex-shrink: 0; }
#edit-color-section .color-toggle        { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #333; }
#edit-color-section .color-toggle input  { width: 16px; height: 16px; }
#edit-color-section .color-toggle label  { font-size: 12px; color: #bbb; margin: 0; }
#edit-color-section .color-note          { font-size: 10px; color: #666; margin-top: 8px; font-style: italic; }

/* Edit relations section */
#edit-relations-section {
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    margin: 8px 0;
}
#edit-relations-section h4 { margin: 0 0 10px; font-size: 13px; color: #ccc; }
#edit-relations-list       { font-size: 12px; color: var(--pc-sidebar-text, #999); opacity: 0.7; }

.relation-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.relation-item:last-child { border-bottom: none; }
.rel-type { font-size: 11px; color: var(--text-muted); min-width: 56px; font-weight: 600; }
.rel-type--lateral { color: var(--accent); }
.rel-name { flex: 1; font-size: 12px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relation-item input { width: 80px !important; padding: 4px 6px !important; font-size: 11px !important; }
.rel-goto            { width: 24px !important; height: 24px; padding: 0 !important; font-size: 12px; flex-shrink: 0; }

/* Per-connection disconnect/remove button */
.rel-disconnect {
    width: 24px !important;
    height: 24px;
    padding: 0 !important;
    font-size: 12px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.rel-disconnect:hover {
    background: var(--danger-dim);
    border-color: var(--danger);
    color: var(--danger);
}
/* When connection is hidden, show reconnect style */
.rel-disconnect.is-hidden {
    color: var(--success);
    border-color: transparent;
}
.rel-disconnect.is-hidden:hover {
    background: rgba(52, 211, 153, 0.12);
    border-color: var(--success);
    color: var(--success);
}

/* Connection hidden indicator */
.relation-item.conn-hidden { opacity: 0.45; }
.relation-item.conn-hidden .rel-name { text-decoration: line-through; }

/* No connections empty state */
.relations-empty {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    padding: 8px 0;
}

/* Modal bottom section layout */
#edit-form .modal-bottom-actions {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8px;
    margin-top: var(--space-sm);
}
#edit-form .modal-bottom-actions button {
    width: 100%;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
}

/* Background upload */
.bg-upload-label {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.bg-upload-label:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.remove-bg-btn         { font-size: 12px; padding: var(--space-sm) var(--space-md); }
.remove-bg-btn.disabled{ opacity: 0.4; pointer-events: none; }

/* ═══ Unlock Requirements Card ═══ */
.unlock-modal-content { text-align: left; max-width: 480px; padding: 24px 28px; }
.unlock-top-bar { display: flex; align-items: center; margin-bottom: 12px; }
.unlock-top-btn { background: none; border: 1px solid var(--border-light, #333); color: var(--text-muted, #888); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.unlock-top-btn:hover { border-color: var(--accent, #4a9eff); color: var(--accent, #4a9eff); }
.unlock-top-btn:disabled { opacity: 0.3; cursor: default; }
.unlock-top-btn:disabled:hover { border-color: var(--border-light, #333); color: var(--text-muted, #888); }
.unlock-top-spacer { flex: 1; }
.unlock-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.unlock-icon { font-size: 36px; flex-shrink: 0; }
.unlock-header h2 { margin: 0; font-size: 17px; font-weight: 600; }
.unlock-subtitle { margin: 3px 0 0; font-size: 12px; color: var(--text-muted, #888); }
.unlock-ready-text { color: #4ade80 !important; font-weight: 500; }
.unlock-progress-section { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.unlock-progress-bar { flex: 1; height: 6px; background: var(--bg-elevated, #1a1a2e); border-radius: 3px; overflow: hidden; }
.unlock-progress-fill { height: 100%; background: var(--accent, #4a9eff); border-radius: 3px; transition: width 0.4s ease, background 0.3s; width: 0%; }
.unlock-progress-label { font-size: 12px; font-weight: 600; color: var(--text-muted, #888); min-width: 32px; text-align: right; }
.unlock-section { margin-bottom: 14px; }
.unlock-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.unlock-section-label { font-size: 11px; font-weight: 600; color: var(--text-muted, #888); text-transform: uppercase; letter-spacing: 0.5px; margin: 0; }
.unlock-section-remove { background: none; border: none; color: var(--text-muted, #555); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 4px; }
.unlock-section-remove:hover { color: #ef4444; }
.unlock-input { width: 100%; padding: 9px 12px; background: var(--bg-elevated, #1a1a2e); border: 1px solid var(--border-light, #333); border-radius: 8px; color: var(--text-primary, #eee); font-size: 13px; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.unlock-input:focus { border-color: var(--accent, #4a9eff); }
/* Tasks */
.unlock-tasks-list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.unlock-task-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--bg-elevated, #1a1a2e); border-radius: 6px; border: 1px solid transparent; transition: border-color 0.2s; }
.unlock-task-row:hover { border-color: var(--border-light, #333); }
.unlock-task-cb { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; accent-color: var(--accent, #4a9eff); }
.unlock-task-cb:checked + .unlock-task-input { text-decoration: line-through; opacity: 0.45; }
.unlock-task-input { flex: 1; background: transparent; border: none; color: var(--text-primary, #eee); font-size: 13px; outline: none; padding: 3px 0; }
.unlock-task-input::placeholder { color: var(--text-muted, #555); }
.unlock-task-remove { background: none; border: none; color: var(--text-muted, #555); cursor: pointer; font-size: 13px; padding: 2px 5px; opacity: 0; transition: opacity 0.15s; }
.unlock-task-row:hover .unlock-task-remove { opacity: 1; }
.unlock-task-remove:hover { color: #ef4444; }
.unlock-add-task-btn { width: 100%; padding: 6px; margin-top: 4px; background: transparent; border: 1px dashed var(--border-light, #333); border-radius: 6px; color: var(--text-muted, #888); font-size: 12px; cursor: pointer; transition: all 0.2s; }
.unlock-add-task-btn:hover { border-color: var(--accent, #4a9eff); color: var(--accent, #4a9eff); }
/* Setup add section buttons */
.unlock-setup-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.unlock-setup-add-btn { flex: 1; padding: 10px; background: transparent; border: 1px dashed var(--border-light, #333); border-radius: 8px; color: var(--text-muted, #777); font-size: 13px; cursor: pointer; transition: all 0.2s; }
.unlock-setup-add-btn:hover { border-color: var(--accent, #4a9eff); color: var(--accent, #4a9eff); background: rgba(74, 158, 255, 0.05); }
/* Goal label */
.unlock-goal-label-row { margin-bottom: 8px; }
.unlock-goal-label-input { font-size: 12px !important; padding: 7px 10px !important; }
/* Goal */
.unlock-goal-tracker { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0; }
.unlock-goal-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border-light, #333); background: var(--bg-elevated, #1a1a2e); color: var(--text-primary, #eee); font-size: 18px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; user-select: none; }
.unlock-goal-btn:hover { transform: scale(1.1); }
.unlock-goal-btn:active { transform: scale(0.95); }
.unlock-goal-minus:hover { border-color: #f87171; background: rgba(248, 113, 113, 0.1); }
.unlock-goal-plus:hover { border-color: #4ade80; background: rgba(74, 222, 128, 0.1); }
.unlock-goal-display { display: flex; align-items: baseline; gap: 3px; font-size: 26px; font-weight: 700; min-width: 90px; justify-content: center; }
.unlock-goal-current { color: var(--accent, #4a9eff); font-variant-numeric: tabular-nums; }
.unlock-goal-sep { color: var(--text-muted, #555); font-weight: 300; }
.unlock-goal-target-input { width: 55px; background: transparent; border: none; border-bottom: 2px solid var(--border-light, #333); color: var(--text-primary, #eee); font-size: 26px; font-weight: 700; text-align: center; outline: none; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.unlock-goal-target-input::-webkit-inner-spin-button, .unlock-goal-target-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.unlock-goal-target-input:focus { border-bottom-color: var(--accent, #4a9eff); }
/* Actions */
.unlock-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-light, #222); }
.unlock-action-btn { flex: 1; padding: 9px 14px; border: 1px solid var(--border-light, #333); border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all 0.2s; background: var(--bg-elevated, #1a1a2e); color: var(--text-primary, #eee); }
.unlock-action-btn:disabled { opacity: 0.35; cursor: default; }
.unlock-btn-lock { border-color: var(--warning, #f59e0b); color: var(--warning, #f59e0b); }
.unlock-btn-lock:hover { background: rgba(245, 158, 11, 0.15); }
.unlock-btn-unlock { border-color: #4ade80; color: #4ade80; }
.unlock-btn-unlock:hover:not(:disabled) { background: rgba(74, 222, 128, 0.15); }
.unlock-btn-save:hover { border-color: var(--accent, #4a9eff); background: rgba(74, 158, 255, 0.1); }
.unlock-btn-delete { flex: 0; padding: 9px 12px; border-color: #ef4444; color: #ef4444; }
.unlock-btn-delete:hover { background: rgba(239, 68, 68, 0.15); }
.unlock-btn-icon { font-size: 14px; }
.unlock-pulse { animation: unlockPulse 1.5s ease-in-out infinite; border-color: #4ade80 !important; background: rgba(74, 222, 128, 0.15) !important; }
@keyframes unlockPulse { 0%, 100% { box-shadow: 0 0 6px rgba(74, 222, 128, 0.2); } 50% { box-shadow: 0 0 16px rgba(74, 222, 128, 0.5); } }

/* ═══ Locked Node on Canvas ═══ */
.node.locked { border-style: dashed; border-color: var(--warning, #f59e0b); }
.node.inactive { opacity: 0.4; filter: grayscale(50%); }
.node.lock-ready { opacity: 0.7 !important; filter: grayscale(0%) !important; border-color: #4ade80 !important; animation: lockReadyGlow 2s ease-in-out infinite; }
@keyframes lockReadyGlow { 0%, 100% { box-shadow: 0 0 6px rgba(74, 222, 128, 0.3); } 50% { box-shadow: 0 0 16px rgba(74, 222, 128, 0.5); } }
/* Requirements summary on node */
.unlock-requirements-summary { margin-top: 6px; padding: 6px 8px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: 6px; font-size: 11px; }
.unlock-req-title { color: var(--warning, #f59e0b); margin-bottom: 3px; font-weight: 500; }
.unlock-req-progress-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; margin-bottom: 3px; }
.unlock-req-progress-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.unlock-req-detail { color: var(--text-muted, #888); font-size: 10px; }
.unlock-req-ready { color: #4ade80; font-weight: 600; font-size: 11px; margin-top: 2px; }
/* Canvas +/- buttons for numerical goal */
.unlock-canvas-goal { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.unlock-canvas-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: var(--text-primary, #ccc); font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; line-height: 1; }
.unlock-canvas-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); transform: scale(1.15); }
.unlock-canvas-minus:hover { border-color: #f87171; color: #f87171; }
.unlock-canvas-plus:hover { border-color: #4ade80; color: #4ade80; }
.unlock-canvas-count { font-size: 11px; font-weight: 600; color: var(--accent, #4a9eff); font-variant-numeric: tabular-nums; }

/* ═══ Requirements Overview Panel ═══ */
.req-panel {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 340px;
    background: var(--bg-primary, #0e0e1a);
    border-right: 1px solid var(--border-light, #222);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.4);
}
.req-panel:not(.hidden) { transform: translateX(0); }
.req-panel.hidden { pointer-events: none; }
.req-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border-light, #222);
}
.req-panel-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.req-panel-controls { display: flex; align-items: center; gap: 8px; }
.req-filter-select {
    background: var(--bg-elevated, #1a1a2e);
    border: 1px solid var(--border-light, #333);
    color: var(--text-primary, #eee);
    border-radius: 6px; padding: 4px 8px; font-size: 11px; outline: none;
}
.req-panel-close-btn {
    background: none; border: none; color: var(--text-muted, #888);
    font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 4px;
    transition: color 0.15s;
}
.req-panel-close-btn:hover { color: var(--text-primary, #eee); }
.req-panel-summary {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-light, #1a1a2e);
    font-size: 12px; color: var(--text-muted, #888);
    display: flex; align-items: center; gap: 10px;
}
.req-summary-bar { flex: 1; height: 6px; background: var(--bg-elevated, #1a1a2e); border-radius: 3px; overflow: hidden; }
.req-summary-fill { height: 100%; background: var(--accent, #4a9eff); border-radius: 3px; transition: width 0.3s; }
.req-panel-list {
    flex: 1; overflow-y: auto; padding: 8px 12px;
}
.req-panel-empty {
    flex: 1; display: flex; align-items: center; justify-content: center;
    color: var(--text-muted, #555); font-size: 13px;
}
/* Individual requirement card */
.req-card {
    background: var(--bg-elevated, #1a1a2e);
    border: 1px solid var(--border-light, #222);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.req-card:hover { border-color: var(--border-light, #333); }
.req-card.req-ready { border-color: rgba(74, 222, 128, 0.3); }
.req-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; cursor: pointer;
}
.req-card-header:hover { background: rgba(255,255,255,0.02); }
.req-card-color {
    width: 4px; height: 32px; border-radius: 2px; flex-shrink: 0;
}
.req-card-info { flex: 1; min-width: 0; }
.req-card-title {
    font-size: 13px; font-weight: 600; color: var(--text-primary, #eee);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.req-card-path {
    font-size: 10px; color: var(--text-muted, #666); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.req-card-pct {
    font-size: 12px; font-weight: 600; color: var(--text-muted, #888);
    flex-shrink: 0;
}
.req-card-pct.ready { color: #4ade80; }
.req-card-progress {
    height: 3px; background: rgba(255,255,255,0.04); margin: 0 12px;
}
.req-card-progress-fill {
    height: 100%; border-radius: 2px; transition: width 0.3s;
}
.req-card-nav {
    flex-shrink: 0; background: none; border: none;
    color: var(--text-muted, #555); cursor: pointer; font-size: 16px;
    padding: 4px 6px; border-radius: 4px; transition: color 0.15s;
}
.req-card-nav:hover { color: var(--accent, #4a9eff); }
.req-card-unlock {
    flex-shrink: 0; background: none; border: 1px solid #4ade80;
    color: #4ade80; cursor: pointer; font-size: 13px;
    padding: 3px 8px; border-radius: 6px; transition: all 0.2s;
    animation: unlockPulse 1.5s ease-in-out infinite;
}
.req-card-unlock:hover { background: rgba(74, 222, 128, 0.15); transform: scale(1.05); }
/* Expandable body */
.req-card-body {
    padding: 0 12px 10px;
    display: none;
}
.req-card.expanded .req-card-body { display: block; }
.req-card-desc {
    font-size: 11px; color: var(--text-muted, #888);
    margin-bottom: 6px; padding: 4px 0;
}
.req-card-tasks { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.req-task-row {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 6px; border-radius: 4px;
    font-size: 12px; color: var(--text-primary, #ccc);
}
.req-task-row:hover { background: rgba(255,255,255,0.03); }
.req-task-cb { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent, #4a9eff); flex-shrink: 0; }
.req-task-text { flex: 1; }
.req-task-text.checked { text-decoration: line-through; opacity: 0.45; }
.req-card-goal {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 6px 0;
}
.req-goal-btn {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--border-light, #333);
    background: var(--bg-primary, #0e0e1a);
    color: var(--text-primary, #ccc); font-size: 14px; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.req-goal-btn:hover { transform: scale(1.1); }
.req-goal-minus:hover { border-color: #f87171; color: #f87171; }
.req-goal-plus:hover { border-color: #4ade80; color: #4ade80; }
.req-goal-display {
    font-size: 18px; font-weight: 700; min-width: 70px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.req-goal-current { color: var(--accent, #4a9eff); }
.req-goal-sep { color: var(--text-muted, #555); font-weight: 300; }
.req-goal-label {
    font-size: 10px; color: var(--text-muted, #666); text-align: center;
    margin-top: 2px;
}

/* ═══ Node Navigation Bar ═══ */
.nav-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-primary, #0e0e1a);
    border: 1px solid var(--border-light, #333);
    border-radius: 12px;
    padding: 6px 8px;
    z-index: 10002;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    transition: opacity 0.2s, transform 0.2s;
}
.nav-bar.hidden { display: none; }
.nav-bar-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-light, #333);
    background: var(--bg-elevated, #1a1a2e);
    color: var(--text-primary, #eee);
    font-size: 14px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
    user-select: none;
}
.nav-bar-btn:hover {
    border-color: var(--accent, #4a9eff);
    background: rgba(74, 158, 255, 0.1);
    transform: scale(1.05);
}
.nav-bar-btn:active { transform: scale(0.95); }
.nav-bar-btn:disabled { opacity: 0.3; cursor: default; transform: none; }
.nav-bar-btn:disabled:hover { border-color: var(--border-light, #333); background: var(--bg-elevated, #1a1a2e); transform: none; }
.nav-bar-list { font-size: 16px; }
.nav-bar-info {
    display: flex; flex-direction: column; align-items: center;
    padding: 0 12px; min-width: 120px;
}
.nav-bar-title {
    font-size: 13px; font-weight: 600; color: var(--text-primary, #eee);
    max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-bar-pos {
    font-size: 10px; color: var(--text-muted, #888);
    font-variant-numeric: tabular-nums;
}
/* Active state for toolbar button */
#nav-mode-btn.active {
    background: rgba(74, 158, 255, 0.2);
    border-color: var(--accent, #4a9eff);
    color: var(--accent, #4a9eff);
}

/* ═══ Nav Order Panel ═══ */
.nav-order-panel {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    max-height: 400px;
    background: var(--bg-primary, #0e0e1a);
    border: 1px solid var(--border-light, #333);
    border-radius: 12px;
    z-index: 10003;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
}
.nav-order-panel.hidden { display: none; }
.nav-order-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px 8px;
}
.nav-order-header h4 { margin: 0; font-size: 14px; font-weight: 600; }
.nav-order-close-btn {
    background: none; border: none; color: var(--text-muted, #888);
    font-size: 16px; cursor: pointer; padding: 2px 6px;
}
.nav-order-close-btn:hover { color: var(--text-primary, #eee); }
.nav-order-hint {
    margin: 0; padding: 0 16px 8px; font-size: 11px; color: var(--text-muted, #666);
}
.nav-order-list {
    flex: 1; overflow-y: auto; padding: 0 8px 8px;
    display: flex; flex-direction: column; gap: 2px;
}
.nav-order-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 6px;
    background: var(--bg-elevated, #1a1a2e);
    border: 1px solid transparent;
    cursor: grab; user-select: none;
    transition: border-color 0.15s, background 0.15s;
}
.nav-order-item:hover { border-color: var(--border-light, #333); }
.nav-order-item.dragging {
    opacity: 0.5; border-color: var(--accent, #4a9eff);
    background: rgba(74, 158, 255, 0.1);
}
.nav-order-item.drag-over { border-top: 2px solid var(--accent, #4a9eff); }
.nav-order-num {
    font-size: 10px; font-weight: 600; color: var(--text-muted, #666);
    min-width: 18px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.nav-order-color {
    width: 4px; height: 20px; border-radius: 2px; flex-shrink: 0;
}
.nav-order-name {
    flex: 1; font-size: 12px; color: var(--text-primary, #eee);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-order-depth {
    font-size: 10px; color: var(--text-muted, #555);
}
.nav-order-actions {
    padding: 8px 12px; border-top: 1px solid var(--border-light, #222);
}
.nav-order-action-btn {
    width: 100%; padding: 7px; background: transparent;
    border: 1px solid var(--border-light, #333); border-radius: 6px;
    color: var(--text-muted, #888); font-size: 11px; cursor: pointer;
    transition: all 0.15s;
}
.nav-order-action-btn:hover {
    border-color: var(--accent, #4a9eff); color: var(--accent, #4a9eff);
}

/* Adjust nav bar position when sidebar is open */
#main-container.ns-shifted ~ .nav-bar,
.ns-shifted .nav-bar {
    /* Shift nav bar left to account for sidebar */
}
/* Nav mode highlighted node */
.node.nav-highlighted {
    box-shadow: 0 0 16px rgba(74, 158, 255, 0.5), 0 0 32px rgba(74, 158, 255, 0.25) !important;
    z-index: 100 !important;
}

/* ═══ Backlinks ═══ */
.ns-backlinks-toggle {
    cursor: pointer;
    margin-left: 12px;
    font-size: 12px;
    color: var(--accent, #4a9eff);
    opacity: 0.7;
    transition: opacity 0.15s;
    user-select: none;
}
.ns-backlinks-toggle:hover { opacity: 1; }
.ns-backlinks-panel {
    padding: 10px 16px 12px;
    background: rgba(74, 158, 255, 0.04);
    border-bottom: 1px solid rgba(74, 158, 255, 0.1);
    min-height: 50vh;
    max-height: 60vh;
    overflow-y: auto;
    flex-shrink: 0;
}
.ns-backlinks-header {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #888);
    margin-bottom: 4px;
}
.ns-backlinks-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ns-ref-graph {
    margin-bottom: 8px;
    border: 1px solid rgba(74, 158, 255, 0.1);
    border-radius: 8px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.15);
}
.ns-ref-graph-svg {
    width: 100%;
    height: auto;
    display: block;
}
.ns-backlink-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 12px;
}
.ns-backlink-item:hover {
    background: rgba(74, 158, 255, 0.1);
}
.ns-backlink-icon {
    color: var(--accent, #4a9eff);
    font-size: 10px;
    flex-shrink: 0;
}
.ns-backlink-title {
    flex: 1;
    color: var(--text-primary, #ddd);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ns-backlink-depth {
    font-size: 10px;
    color: var(--text-muted, #666);
    flex-shrink: 0;
}

/* ═══ Link Dropdown ═══ */
.note-link-dropdown {
    position: fixed;
    width: 300px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--bg-surface, #16161e);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 10010;
    padding: 4px;
    font-family: 'Outfit', system-ui, sans-serif;
}
.note-link-dropdown.hidden { display: none; }
.note-link-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 13px;
}
.note-link-option:hover,
.note-link-option.active {
    background: rgba(74, 158, 255, 0.1);
}
.note-link-type {
    font-size: 11px;
    color: var(--accent, #4a9eff);
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
.note-link-title {
    flex: 1;
    color: var(--text-primary, #eee);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.note-link-title mark {
    background: rgba(74, 158, 255, 0.25);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}
.note-link-depth {
    font-size: 10px;
    color: var(--text-muted, #666);
    flex-shrink: 0;
}
.note-link-sep {
    height: 1px;
    background: var(--border-light, #222);
    margin: 4px 8px;
}
.note-link-create .note-link-type { color: var(--success, #22c55e); }
.note-link-create .note-link-title { color: var(--text-muted, #aaa); font-style: italic; }
.note-link-picker-header {
    padding: 8px 10px 4px;
    font-size: 11px;
    color: var(--text-muted, #888);
    font-weight: 600;
}
.note-link-create-header {
    padding: 6px 10px 2px;
    font-size: 11px;
    color: var(--text-muted, #666);
}
/* Node link span in editor */
.note-node-link {
    color: var(--accent, #4a9eff);
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: pointer;
    border-radius: 2px;
    padding: 0 2px;
}
.note-node-link:hover {
    background: rgba(74, 158, 255, 0.1);
    text-decoration-style: solid;
}
/* FSN backlinks sidebar items */
.note-backlink-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 13px;
}
.note-backlink-item:hover { background: rgba(74, 158, 255, 0.1); }
.note-backlink-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary, #ddd);
}
.note-backlinks-empty {
    font-size: 12px;
    color: var(--text-muted, #666);
    padding: 4px 0;
    font-style: italic;
}

/* ═══ Focus Mode Modal ═══ */
.focus-modal-content { text-align: left; max-width: 440px; padding: 24px 28px; }
.focus-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.focus-header-icon { font-size: 32px; }
.focus-header h2 { margin: 0; font-size: 17px; font-weight: 600; }
.focus-subtitle { margin: 3px 0 0; font-size: 12px; color: var(--text-muted, #888); }
.focus-section { margin-bottom: 18px; }
.focus-section-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted, #888); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.focus-target-options { display: flex; flex-direction: column; gap: 2px; }
.focus-option { display: flex; align-items: center; gap: 16px; padding: 5px 16px; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
.focus-option:hover { background: rgba(255,255,255,0.03); }
.focus-option input[type="radio"] { accent-color: var(--accent, #4a9eff); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; margin: 0; padding: 0; }
.focus-option-label { font-size: 14px; color: var(--text-primary, #eee); line-height: 1; }
.focus-toggles { display: flex; flex-direction: column; gap: 2px; }
.focus-toggle { display: flex; align-items: center; gap: 16px; padding: 5px 16px; border-radius: 8px; cursor: pointer; transition: background 0.15s; font-size: 14px; color: var(--text-primary, #ddd); line-height: 1; }
.focus-toggle:hover { background: rgba(255,255,255,0.03); }
.focus-toggle input[type="checkbox"] { accent-color: var(--accent, #4a9eff); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; margin: 0; padding: 0; }
.focus-actions { display: flex; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border-light, #222); }
.focus-action-btn { flex: 1; padding: 10px 16px; border: 1px solid var(--border-light, #333); border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; text-align: center; transition: all 0.2s; background: var(--bg-elevated, #1a1a2e); color: var(--text-primary, #eee); }
.focus-btn-apply { border-color: var(--accent, #4a9eff); color: var(--accent, #4a9eff); }
.focus-btn-apply:hover { background: rgba(74, 158, 255, 0.15); }
.focus-btn-exit { color: var(--text-muted, #888); }
.focus-btn-exit:hover { border-color: var(--text-muted, #666); background: rgba(255,255,255,0.03); }
.focus-btn-reroll { flex: 0; padding: 10px 14px; font-size: 16px; }
.focus-btn-reroll:hover { border-color: var(--accent, #4a9eff); color: var(--accent, #4a9eff); }

/* ═══ Focus Mode Active State ═══ */
body.focus-active #toolbar { display: none; }
body.focus-hide-tabs #tab-bar { display: none !important; }
body.focus-hide-levels .level-sidebar,
body.focus-hide-levels #level-sidebar,
body.focus-hide-levels .level-topbar,
body.focus-hide-levels #level-topbar { display: none !important; }
body.focus-hide-grid #grid-overlay { display: none !important; }
body.focus-active .focus-exit-bar {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 36px;
    background: var(--bg-deep, #0a0a14);
    border-bottom: 1px solid rgba(74, 158, 255, 0.2);
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s;
}
body.focus-active .focus-exit-bar:hover { opacity: 1; }
body.focus-active:hover .focus-exit-bar { opacity: 0.5; }
body.focus-active .focus-exit-bar:hover { opacity: 1 !important; }
.focus-exit-bar { display: none; }
.focus-exit-bar span { font-size: 11px; color: var(--text-muted, #666); }
.focus-exit-bar button { background: none; border: 1px solid var(--border-light, #333); color: var(--text-muted, #888); padding: 4px 12px; border-radius: 6px; font-size: 11px; cursor: pointer; transition: all 0.15s; }
.focus-exit-bar button:hover { border-color: var(--accent, #4a9eff); color: var(--accent, #4a9eff); }
.focus-exit-reroll { font-size: 12px !important; }

/* Dimmed nodes in focus mode */
.node.dimmed-by-focus {
    opacity: 0.12 !important;
    filter: grayscale(80%) !important;
    pointer-events: none;
    transition: opacity 0.4s ease, filter 0.4s ease;
}
.node.hidden-by-focus { display: none !important; }
.node.focus-target {
    box-shadow: 0 0 12px rgba(74, 158, 255, 0.3);
    z-index: 50;
}
body.focus-active .connection-line { opacity: 0.3; }
body.focus-active .connection-line.focus-visible { opacity: 1; }
body.focus-dim-lines #connections-layer path,
body.focus-dim-lines #connections-layer line { opacity: 0.12 !important; }
body.focus-dim-lines #conn-btns-layer { opacity: 0.12; }

/* Criteria fields */
#criteria-fields       { margin-top: var(--space-md); }
.progress-input        { position: relative; }
.progress-input .progress-bar { margin-top: 6px; }

/* Edit modal form styling */
#edit-modal .modal-content { max-width: 520px; width: 95%; }
#edit-form { display: flex; flex-direction: column; gap: 16px; }
#edit-form button[type="submit"] {
    width: 100%; padding: 12px 20px;
    background: var(--accent); border: none;
    border-radius: var(--radius-sm);
    color: #fff; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background 0.2s, transform 0.1s;
}
#edit-form button[type="submit"]:hover { background: var(--accent-bright); transform: translateY(-1px); }

#unlock-node-btn-edit {
    width: 100%; padding: 10px 16px;
    background: var(--success-dim);
    border: 1px solid var(--success);
    border-radius: var(--radius-sm);
    color: var(--success);
    font-size: 13px;
    cursor: pointer;
}
#unlock-node-btn-edit:hover { background: rgba(52, 211, 153, 0.25); }

#delete-node {
    width: 100%; padding: 10px 16px;
    background: var(--danger-dim);
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    color: var(--danger); font-size: 13px; cursor: pointer;
}
#delete-node:hover { background: rgba(231, 76, 60, 0.2); }

/* #node-description contenteditable */
#node-description {
    min-height: 100px;
    max-height: 200px;
    overflow-y: auto;
    padding: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}
#node-description:focus { outline: none; border-color: var(--accent); }

/* Edit form inputs */
#edit-form input[type="text"],
#edit-form input[type="number"],
#edit-form select,
#edit-form textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid #333;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
}
#edit-form input:focus,
#edit-form select:focus,
#edit-form textarea:focus { border-color: var(--pc, var(--accent)); outline: none; }

#edit-form .modal-actions { padding-top: 0; border-top: none; }


/* ═══════════════════════════════════════════════════════════════
   JS-CREATED OVERLAY MODALS
   (auth wall, passphrase, limit, confirm dialogs)
   Replaces inline style="" on dynamically created elements
   ═══════════════════════════════════════════════════════════════ */
.overlay-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
    backdrop-filter: blur(4px);
}

.overlay-modal-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    width: 400px;
    max-width: 95%;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    text-align: center;
}

.overlay-modal-card.wide { width: 440px; }

.overlay-modal-icon     { font-size: 40px; margin-bottom: 12px; }
.overlay-modal-title    { margin: 0 0 8px; font-size: 18px; color: var(--text-primary); font-weight: 600; }
.overlay-modal-subtitle { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.overlay-modal-actions  { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }

.overlay-modal-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.overlay-modal-btn:hover { transform: translateY(-1px); }
.overlay-modal-btn.primary   { background: var(--accent); color: #fff; }
.overlay-modal-btn.primary:hover { background: var(--accent-bright); }
.overlay-modal-btn.danger    { background: var(--danger); color: #fff; }
.overlay-modal-btn.danger:hover  { background: #dc2626; }
.overlay-modal-btn.secondary { padding: 12px 24px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); font-size: 14px; cursor: pointer; }

/* Auth wall specific */
#auth-wall {
    position: fixed; inset: 0;
    background: rgba(6,6,10,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    backdrop-filter: blur(8px);
}

.auth-wall-inner { text-align: center; max-width: 440px; padding: 40px; }

.auth-wall-logo {
    margin-bottom: 24px;
}
.auth-wall-logo svg {
    width: 48px; height: 48px;
    margin-bottom: 16px;
}
.auth-wall-logo h1 {
    margin: 0; font-size: 28px;
    color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
}
.auth-wall-logo p {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
}

.auth-wall-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 300px;
    margin: 0 auto;
}

.auth-google-btn {
    padding: 14px 24px;
    background: var(--accent);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.2s, transform 0.1s;
    height: auto;
}
.auth-google-btn:hover {
    background: var(--accent-bright);
    transform: translateY(-1px);
}

.auth-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* Vault / passphrase modal */
.vault-modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vault-modal-form input[type="password"] {
    padding: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition-fast);
}
.vault-modal-form input[type="password"]:focus { border-color: var(--accent); }

.vault-submit-btn {
    padding: 12px;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    height: auto;
    transition: background 0.2s;
}
.vault-submit-btn:hover  { background: var(--accent-bright); }
.vault-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.vault-skip-btn {
    padding: 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    height: auto;
}

.vault-error {
    display: none;
    color: var(--danger);
    font-size: 12px;
    padding: 8px 12px;
    background: var(--danger-dim);
    border-radius: 6px;
}
.vault-error.visible { display: block; }

.vault-strength {
    font-size: 11px;
    color: var(--text-muted);
    padding: 0 4px;
    min-height: 16px;
}

/* Toast */
#toast-msg {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-elevated);
    border: 1px solid var(--accent);
    color: var(--accent-bright);
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 99999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: opacity 0.3s;
    pointer-events: none;
}

/* Tab toast */
#tab-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 99999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: opacity 0.3s;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   SETTINGS PANEL
   ═══════════════════════════════════════════════════════════════ */
.settings-panel {
    position: fixed;
    right: 0; top: 0;
    width: 340px;
    height: 100vh;
    background: var(--pc-settings-panel, var(--pc-sidebar, var(--bg-surface)));
    color: var(--pc-settings-panel-text, var(--pc-sidebar-text, var(--text-primary)));
    border-left: 1px solid var(--border);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.3);
    padding: 0;
    max-width: 90vw;
}
.settings-panel.open { transform: translateX(0); }

/* Safeguard: buttons inside panels always have visible separation from panel bg */
.settings-panel button,
.settings-panel select,
.settings-panel input[type="number"],
.level-sidebar button,
.filter-panel button,
.filter-panel select {
    box-shadow: inset 0 0 0 1px rgba(128,128,128,0.15);
}
.settings-panel button:hover,
.settings-panel .settings-full-btn:hover,
.level-sidebar button:hover {
    box-shadow: inset 0 0 0 1px rgba(128,128,128,0.25);
}

/* Header (sticky) */
.settings-header-fixed {
    position: sticky;
    top: 0;
    background: var(--pc-sidebar, var(--bg-surface));
    z-index: 10;
    padding: 16px 20px 12px 24px;
    border-bottom: 1px solid var(--border);
}
.settings-header-fixed h3 { margin: 0; font-size: 16px; color: var(--pc-sidebar-text, var(--text-primary)); }

/* Close button */
.settings-header-fixed .close-settings,
.settings-panel .close-settings,
.settings-panel #close-settings {
    position: absolute;
    top: 12px; right: 12px;
    width: 28px; height: 28px;
    min-width: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--pc-sidebar-text, var(--text-muted));
    opacity: 0.6;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    z-index: 100;
}
.settings-panel .close-settings:hover,
.settings-panel #close-settings:hover {
    background: var(--danger-dim);
    border-color: var(--danger);
    color: var(--danger);
}

/* Scrollable content */
.settings-scroll-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 20px 24px;
}

/* Section groups */
.settings-panel .sg {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.settings-panel .sg:last-child { border-bottom: none; }

.settings-panel .sg h4 {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 600;
    color: var(--pc-sidebar-text, var(--text-muted));
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.6;
}

/* Settings rows */
.settings-row {
    display: flex; align-items: center;
    gap: 12px; margin-bottom: 10px;
}
.settings-row label {
    font-size: 12px; color: var(--pc-sidebar-text, #999);
    min-width: 80px; flex-shrink: 0;
    margin: 0; opacity: 0.7;
}
.settings-row input[type="color"] {
    width: 36px; height: 26px;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer; padding: 0;
    background: none;
}
.settings-row input[type="range"] {
    flex: 1; min-width: 80px; height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    -webkit-appearance: none;
}
.settings-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
}
.settings-row span {
    font-size: 11px; color: var(--pc-sidebar-text, #777);
    min-width: 40px; text-align: right; opacity: 0.6;
}
.settings-row select {
    flex: 1; padding: 6px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--pc-controls-text-hover, var(--text-primary));
    font-size: 12px;
}
.settings-row select option,
.settings-panel select option {
    background: var(--bg-elevated);
    color: var(--pc-controls-text-hover, var(--text-primary));
}

.settings-panel input[type="number"] {
    width: 60px; padding: 4px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--pc-controls-text-hover, var(--text-primary));
    font-size: 12px;
    -moz-appearance: textfield;
}
.settings-panel input[type="number"]::-webkit-inner-spin-button,
.settings-panel input[type="number"]::-webkit-outer-spin-button { opacity: 0; width: 0; }
.settings-panel input[type="number"]:hover::-webkit-inner-spin-button,
.settings-panel input[type="number"]:hover::-webkit-outer-spin-button { opacity: 1; width: auto; }

/* Toggle rows */
.settings-panel .toggle-row {
    display: flex; align-items: center;
    gap: 8px; margin-bottom: 8px;
}
.settings-panel .toggle-row input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--accent);
}
.settings-panel .toggle-row label {
    margin: 0; font-size: 13px;
    color: var(--pc-sidebar-text, var(--text-secondary));
    cursor: pointer; opacity: 0.8;
}

/* Size inputs (core/branch W×H) */
.size-inputs {
    display: flex; align-items: center; gap: 6px;
}
.size-inputs input[type="number"] {
    width: 60px; padding: 6px 8px;
}
.size-inputs span { color: #666; min-width: auto; }

/* Movement mode */
.movement-mode-select       { display: flex; gap: 4px; margin-bottom: 8px; }
.movement-mode-select button{ flex: 1; height: 28px; font-size: 11px; background: var(--bg-elevated); border: 1px solid var(--border); }
.movement-mode-select button.active { background: var(--accent-dim); border-color: var(--accent-active-text, var(--accent)); color: var(--accent-active-text, var(--accent)); }
.movement-mode-desc         { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

.settings-subsection        { margin-bottom: 12px; }
.settings-subsection > label{ font-size: 12px; color: var(--pc-sidebar-text, #999); opacity: 0.7; display: block; margin-bottom: 6px; }

/* Primary color grid */
.primary-color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.primary-slot {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    transition: opacity 0.2s ease;
}
.primary-slot input[type="color"] {
    width: 100%; height: 32px;
    border: none; border-radius: 4px;
    cursor: pointer; margin-bottom: 8px;
}
.slot-role { display: flex; }
.slot-role-select {
    width: 100%;
    height: 28px;
    padding: 0 6px;
    background: var(--bg-node, #2a2a3a);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary, #aaa);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
}
.slot-role-select:focus { outline: none; border-color: var(--accent); }
.slot-role-select option { background: var(--bg-elevated); color: var(--text-primary); }
.slot-role-select option:disabled { color: #555; }

/* Color palette editor */
.color-pair {
    display: flex; align-items: center;
    gap: 6px; padding: 6px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    border: 1px solid transparent;
}
.color-pair.dragging   { opacity: 0.5; }
.color-pair.drag-over  { border: 1px dashed var(--accent); }
.color-pair span       { font-size: 11px; color: var(--text-muted); }
.color-pair input[type="color"] { width: 28px; height: 24px; }

.palette-actions         { display: flex; gap: 8px; margin-top: 10px; }
.palette-actions button  { flex: 1; padding: 8px 12px; font-size: 12px; border: 1px solid #444; border-radius: 4px; background: var(--bg-elevated); color: #ddd; cursor: pointer; }
.palette-actions button.primary { border-color: var(--accent); background: rgba(74,158,255,0.15); }
.palette-actions button:hover   { background: var(--bg-node); }

.hint { font-size: 10px; color: var(--pc-sidebar-text, #555); opacity: 0.5; margin-top: 8px; margin-bottom: 0; }

/* Preset editor */
.preset-edit-row {
    display: flex; align-items: center;
    gap: 6px; margin-bottom: 6px;
}
.preset-label { min-width: 24px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.preset-edit-row input { width: 50px !important; }
.preset-edit-row input[type="number"] {
    width: 60px; padding: 4px 4px 4px 8px;
    -moz-appearance: textfield;
}
.preset-edit-row input[type="number"]::-webkit-inner-spin-button,
.preset-edit-row input[type="number"]::-webkit-outer-spin-button { opacity: 0; width: 0; }
.preset-edit-row input[type="number"]:hover::-webkit-inner-spin-button,
.preset-edit-row input[type="number"]:hover::-webkit-outer-spin-button { opacity: 1; width: auto; }

/* Level space editor */
.level-space-editor {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.level-space-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.level-space-label {
    min-width: 28px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.level-space-input {
    width: 70px !important;
    padding: 4px 6px;
    text-align: center;
}
.level-space-unit {
    font-size: 11px;
    color: var(--text-muted);
}
.level-space-remove {
    background: none !important;
    border: none !important;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px !important;
    height: auto !important;
}
.level-space-remove:hover { color: var(--danger); }
.level-space-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.level-band-all-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.level-band-all-row.hidden { display: none; }
.level-band-all-row label {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}
.level-band-all-row input[type="number"] {
    width: 70px !important;
    text-align: center;
}

/* Level color editor */
.level-color-editor {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.level-color-editor.hidden { display: none; }
.level-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.level-color-row input[type="color"] {
    width: 36px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* Setting description text */
.setting-description {
    display: block;
    font-size: 11px;
    color: var(--pc-sidebar-text, var(--text-muted));
    opacity: 0.5;
    margin-top: 2px;
}
.setting-item {
    margin-bottom: 10px;
}
.setting-item label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; cursor: pointer; margin: 0;
    color: var(--pc-sidebar-text, var(--text-secondary));
    opacity: 0.8;
}
.setting-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }

/* Vault status in settings */
.vault-status { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; color: var(--pc-sidebar-text, var(--text-secondary)); opacity: 0.7; }

/* Settings panel security/subscription (from CSP-safe injection) */
.settings-security-note { font-size: 12px; color: var(--pc-sidebar-text, var(--text-muted)); opacity: 0.6; line-height: 1.5; margin-bottom: 12px; }
.settings-full-btn { width: 100%; padding: 10px 16px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--pc-controls-text, var(--text-secondary)); font-size: 13px; cursor: pointer; transition: all var(--transition-fast); margin-bottom: 8px; }
.settings-full-btn:hover { background: var(--accent-dim); border-color: var(--accent-active-text, var(--accent)); color: var(--accent-active-text, var(--accent)); }
.settings-tier-info { font-size: 13px; color: var(--pc-sidebar-text, var(--text-secondary)); opacity: 0.7; margin-bottom: 10px; padding: 8px 12px; background: var(--bg-elevated); border-radius: var(--radius-sm); }


/* ═══════════════════════════════════════════════════════════════
   TEAM PANEL (reusable classes for team.js inline styles)
   ═══════════════════════════════════════════════════════════════ */
#team-panel {
    background: var(--pc-teams-panel, var(--pc-sidebar, var(--bg-surface))) !important;
    color: var(--pc-teams-panel-text, var(--pc-sidebar-text, var(--text-primary))) !important;
}
#team-panel > div,
#team-panel .modal-content {
    background: var(--pc-teams-panel, var(--pc-sidebar, var(--bg-surface))) !important;
    color: var(--pc-teams-panel-text, var(--pc-sidebar-text, var(--text-primary))) !important;
}
#team-panel h2,
#team-panel h3,
#team-panel h4,
#team-panel label,
#team-panel span,
#team-panel p {
    color: inherit !important;
}
#team-panel input[type="text"],
#team-panel input[type="email"],
#team-panel select,
#team-panel textarea {
    background: var(--bg-elevated) !important;
    color: var(--pc-controls-text-hover, var(--text-primary)) !important;
    border-color: var(--border) !important;
}
#team-panel button:not(.btn-primary) {
    background: var(--bg-elevated) !important;
    color: var(--pc-controls-text, var(--text-secondary)) !important;
    border-color: var(--border) !important;
}
#team-panel button.btn-primary {
    background: var(--accent) !important;
    color: var(--accent-text, #fff) !important;
}
#team-panel .close-btn,
#team-panel [class*="close"] {
    color: var(--pc-sidebar-text, var(--text-muted)) !important;
    opacity: 0.5;
}
.team-option-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.team-option-label:hover { background: rgba(128,128,128,0.06); }

.team-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--pc-sidebar-text, var(--text-primary));
}
.team-member-row:last-child { border-bottom: none; }

.team-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.team-badge.owner  { background: rgba(245,158,11,0.15); color: var(--warning); }
.team-badge.admin  { background: var(--accent-dim); color: var(--accent-active-text, var(--accent)); }
.team-badge.editor { background: var(--success-dim); color: var(--success); }
.team-badge.viewer { background: rgba(138,143,157,0.15); color: var(--pc-sidebar-text, var(--text-secondary)); opacity: 0.7; }

.team-section-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--pc-sidebar-text, var(--text-muted));
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px 6px;
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
body.light-mode {
    /* Base vars are set by the theme system via JS.
       Only keep property-less marker class for CSS selectors. */
}

body.light-mode .settings-panel       { background: var(--pc-settings-panel, var(--pc-sidebar, #fff)); }
body.light-mode .settings-header-fixed{ background: var(--bg-elevated); border-color: var(--border); }
body.light-mode .settings-scroll-content { background: var(--pc-settings-panel, var(--pc-sidebar, #fff)); }
body.light-mode .settings-panel .sg   { border-color: var(--border); }
body.light-mode .settings-panel .sg h4{ color: var(--pc-sidebar-text, #333); opacity: 0.6; }
body.light-mode .settings-row label   { color: var(--pc-sidebar-text, #555); opacity: 0.7; }
body.light-mode .settings-row span    { color: var(--pc-sidebar-text, #666); opacity: 0.6; }
body.light-mode .toggle-row label     { color: var(--pc-sidebar-text, #444); opacity: 0.8; }
body.light-mode .primary-slot         { background: var(--bg-elevated); border-color: var(--border); }
body.light-mode .slot-role-select     { background: var(--bg-surface); border-color: var(--border); color: var(--pc-controls-text-hover, #333); }
body.light-mode .slot-role-select option:disabled { color: var(--text-muted); }
body.light-mode .size-inputs input,
body.light-mode .settings-row select,
body.light-mode .palette-actions button { background: var(--bg-surface); border-color: var(--border); color: var(--pc-controls-text-hover, #333); }
body.light-mode .modal-content   { background: var(--pc-sidebar, #fff); color: var(--pc-sidebar-text, #1a1a1a); }
body.light-mode input,
body.light-mode select,
body.light-mode textarea { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border); }
body.light-mode .tab              { color: var(--pc-tabbar-text, #666); opacity: 0.6; }
body.light-mode .tab:hover        { background: rgba(0,0,0,0.04); color: var(--pc-tabbar-text, #333); opacity: 0.8; }
body.light-mode .tab.active       { background: rgba(0,0,0,0.06); border-color: var(--border); color: var(--pc-tabbar-text, #1a1a1a); opacity: 1; }
body.light-mode .node             { color: var(--text-primary); }
body.light-mode .node.core-node   { background: var(--pc-core-bg); }
body.light-mode .node.branching-node { background: var(--pc-branch-bg); }
body.light-mode #canvas-container { background: var(--pc-bg); }
body.light-mode #toolbar          { background: var(--pc-toolbar); border-color: var(--border); }
body.light-mode .level-sidebar,
body.light-mode .level-topbar     { background: var(--pc-level-sidebar, var(--pc-sidebar)); }

body.light-mode .canvas-grid-overlay.visible {
    background-image:
        linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px);
}

body.light-mode .resize-handle::before,
body.light-mode .resize-handle::after { border-color: rgba(0,0,0,0.2); }
body.light-mode .node:hover .resize-handle::before,
body.light-mode .node:hover .resize-handle::after { border-color: rgba(0,0,0,0.4); }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #toolbar           { flex-wrap: wrap; height: auto; padding: 8px; gap: 6px; }
    .toolbar-divider   { display: none; }
    .settings-panel    { width: 100%; }
    .modal-content     { width: 95%; padding: 16px; }
    .filter-panel      { width: 280px; right: -20px; }
}

/* ═══════════════════════════════════════════════════════════════
   MERGED FROM ADDITIONAL_STYLES.css
   ═══════════════════════════════════════════════════════════════ */

/* Resize Handle - Only show on hover */
.resize-handle {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 12px;
    height: 12px;
    background: #666;
    cursor: se-resize;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 2px;
    z-index: 5;
}
.node:hover .resize-handle { opacity: 1; }
.resize-handle:hover { background: #888; }

/* Edit Button with Text */
.edit-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
}
.edit-text {
    font-size: 11px;
    font-weight: 500;
}

/* Background Upload Label */
label[for="background-upload"] {
    display: inline-block;
    margin-right: 8px;
    font-weight: 500;
    font-size: 13px;
}

/* Node Width/Height inputs in Edit Modal */
#node-width,
#node-height {
    width: 80px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}

/* Prevent nodes from going offscreen */
#canvas-container {
    overflow: auto;
    position: relative;
}
#nodes-container {
    min-width: 2000px;
    min-height: 2000px;
    position: relative;
}

/* Connection handles - better visibility */
/* Improved node appearance */
.node {
    transition: transform 0.1s, box-shadow 0.2s;
}
.node:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}
.node.dragging {
    opacity: 0.8;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    transform: scale(1.02);
}
/* Node locked/inactive — see Unlock Requirements Card section */


/* ═══════════════════════════════════════════════════════════════
   CSP-SAFE MODAL SYSTEM — replaces inline styles on dynamic modals
   ═══════════════════════════════════════════════════════════════ */

/* Generic utility */
.hidden { display: none !important; }

/* Modal overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
    backdrop-filter: blur(4px);
}
.modal-overlay--heavy {
    background: rgba(6, 6, 10, 0.95);
    backdrop-filter: blur(8px);
    z-index: 100000;
}

/* Modal card */
.modal-card {
    background: var(--bg-surface, #12121a);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 12px;
    padding: 32px;
    width: 420px;
    max-width: 95%;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.modal-card--centered {
    text-align: center;
    margin-bottom: 20px;
}

/* Modal content atoms */
.modal-emoji {
    font-size: 40px;
    margin-bottom: 12px;
}
.modal-title {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--text-primary, #f0f2f5);
}
.modal-subtitle {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-muted, #5a5f6d);
    line-height: 1.5;
}
.modal-body-text {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--text-muted, #5a5f6d);
    line-height: 1.6;
}
.modal-hint-text {
    margin: 0 0 24px;
    font-size: 12px;
    color: var(--pc-sidebar-text, #555);
    opacity: 0.6;
    line-height: 1.5;
}
.modal-actions-row {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.modal-form-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Text color helpers */
.text-primary { color: var(--text-primary, #f0f2f5); }
.text-accent { color: var(--pc, #4a9eff); }
.text-danger { color: var(--danger, #ef4444); }

/* ═══════════════════════════════════════════════════════════════
   MODAL BUTTONS — replaces inline button styles
   ═══════════════════════════════════════════════════════════════ */

.btn-modal-primary {
    padding: 12px 24px;
    background: var(--accent, #4a9eff);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.btn-modal-primary:hover {
    background: var(--accent-bright, #6ab0ff);
    transform: translateY(-1px);
}

.btn-modal-ghost {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
}
.btn-modal-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
}

.btn-modal-danger {
    padding: 10px 20px;
    background: #ef4444;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.btn-modal-danger:hover {
    background: #dc2626;
}

.btn-modal-skip {
    padding: 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
}
.btn-modal-skip:hover {
    background: rgba(255, 255, 255, 0.05);
}


/* ═══════════════════════════════════════════════════════════════
   VAULT / AUTH INPUTS — replaces inline input styles + onfocus/onblur
   ═══════════════════════════════════════════════════════════════ */

.vault-input {
    padding: 12px;
    background: var(--bg-elevated, #1a1a24);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 8px;
    color: var(--text-primary, #f0f2f5);
    font-size: 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.vault-input:focus {
    border-color: var(--accent, #4a9eff);
}

.vault-error {
    display: none;
    color: var(--danger, #ef4444);
    font-size: 12px;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 6px;
}
.vault-error.visible {
    display: block;
}

.vault-strength-hint {
    font-size: 11px;
    color: var(--text-muted);
    padding: 0 4px;
}


/* ═══════════════════════════════════════════════════════════════
   AUTH WALL — replaces inline styles on login screen
   ═══════════════════════════════════════════════════════════════ */

.auth-wall-content {
    text-align: center;
    max-width: 440px;
    padding: 40px;
}
.auth-wall-logo {
    margin-bottom: 24px;
}
.auth-wall-logo-svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
}
.auth-wall-title {
    margin: 0;
    font-size: 28px;
    color: #f0f2f5;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
}
.auth-wall-subtitle {
    margin: 8px 0 0;
    font-size: 15px;
    color: #5a5f6d;
    line-height: 1.6;
}
.auth-wall-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 300px;
    margin: 0 auto;
}
.auth-login-btn {
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.auth-wall-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: #3a3f4d;
}


/* ═══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS — replaces inline styles on toasts
   ═══════════════════════════════════════════════════════════════ */

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a24;
    border: 1px solid var(--accent);
    color: var(--accent-bright);
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 99999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   MEDIA ITEMS IN NODES — replaces inline styles on media elements
   ═══════════════════════════════════════════════════════════════ */

.node-media-item {
    margin: 4px 0;
    border-radius: 6px;
    overflow: hidden;
}
.node-media-item video {
    width: 100%;
    max-height: 200px;
    border-radius: 6px;
}
.node-media-item audio {
    width: 100%;
}
.node-media-item img {
    width: 100%;
    border-radius: 6px;
}

.media-pdf-card {
    background: #2a2a2a;
    padding: 10px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.media-pdf-icon { font-size: 22px; }
.media-pdf-name { color: #ccc; font-size: 12px; flex: 1; }
.media-pdf-btn {
    background: #4a9eff;
    color: #fff;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
}
.media-pdf-btn:hover { background: #6ab0ff; }

.media-file-card {
    background: #2a2a2a;
    padding: 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.media-file-icon { font-size: 20px; }
.media-file-name { color: #ccc; font-size: 12px; }


/* ═══════════════════════════════════════════════════════════════
   PREVIEW THUMBS & REMOVE BUTTONS — replaces inline onclick buttons
   ═══════════════════════════════════════════════════════════════ */

.preview-thumb-wrap {
    position: relative;
    display: inline-block;
}
.preview-thumb-img {
    max-width: 100px;
    max-height: 60px;
    border-radius: 4px;
    border: 1px solid #444;
}

.inline-remove-btn {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e74c3c;
    border: none;
    color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.inline-remove-btn:hover { background: #c0392b; }

.inline-remove-text {
    background: none;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    font-size: 14px;
}
.inline-remove-text:hover { color: #c0392b; }

.media-preview-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #2a2a2a;
    border-radius: 4px;
    margin: 2px 0;
}
.media-preview-name {
    flex: 1;
    font-size: 12px;
}


/* ═══════════════════════════════════════════════════════════════
   MISC SMALL CLASSES — replaces inline one-offs
   ═══════════════════════════════════════════════════════════════ */

/* Conn buttons layer */
#conn-btns-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

/* Settings button in toolbar */
.btn-settings {
    font-size: 14px;
}

/* Tag filter helpers */
.tag-filter-spacer {
    width: 42px;
    display: inline-block;
}
.tag-filter-label {
    color: #aaa;
}

/* Presets label */
.presets-label {
    font-size: 12px;
    color: #aaa;
}

/* Drag handle in color palette */
.drag-handle {
    cursor: grab;
    color: #666;
    margin-right: 4px;
}

/* Editor toolbar hint text */
.editor-hint {
    font-size: 11px;
    color: #888;
    padding: 0 8px;
}

/* Dimensions row in edit modal */
.dimensions-row {
    display: flex;
    gap: 8px;
}

/* Criteria fields visibility (toggled by JS) */
.criteria-fields.hidden {
    display: none;
}
/* Note expand button on nodes */
.note-expand-btn {
    opacity: 0;
    transition: opacity 0.15s;
}
.node:hover .note-expand-btn {
    opacity: 1;
}

/* Expand to note button in edit modal */
.expand-to-note-btn {
    display: block;
    width: 100%;
    padding: 8px 16px;
    margin-bottom: 12px;
    background: var(--bg-elevated, #1a1a24);
    border: 1px dashed var(--border, #2a2a3a);
    border-radius: var(--radius-sm, 6px);
    color: var(--accent, #4a9eff);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: center;
}
.expand-to-note-btn:hover {
    background: var(--accent-dim, rgba(74, 158, 255, 0.1));
    border-color: var(--accent, #4a9eff);
}

/* Smooth zoom — GPU compositing hints */
#nodes-container,
#connections-layer,
#level-lines-layer,
#grid-overlay,
#conn-btns-layer {
    will-change: transform;
}

/* ─── Hover tree highlight ─── */
.node.tree-dimmed {
    opacity: 0.15 !important;
    filter: grayscale(60%) !important;
    transition: opacity 0.1s ease, filter 0.1s ease;
}
.node.tree-highlighted {
    opacity: 1 !important;
    filter: none !important;
    transition: opacity 0.1s ease, filter 0.1s ease;
}
/* Dim connection lines when tree highlighting is active */
.tree-highlight-active ~ #connections-layer .connection-line {
    opacity: 0.08 !important;
    transition: opacity 0.1s ease;
}
.node-icon-emoji {
    width: auto; height: auto;
    font-size: 18px; line-height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
}
/* ═══════════════════════════════════════════════════════════════
   ZOOM LOD (Level of Detail) — progressive simplification
   ═══════════════════════════════════════════════════════════════ */

/* ── LOD REDUCED: 30%-60% zoom — title + add branch only ── */
.zoom-lod-reduced .node .node-description,
.zoom-lod-reduced .node .node-tags,
.zoom-lod-reduced .node .node-card-image-wrap,
.zoom-lod-reduced .node .node-media-container,
.zoom-lod-reduced .node .unlock-criteria,
.zoom-lod-reduced .node .node-actions,
.zoom-lod-reduced .node .node-id-badge,
.zoom-lod-reduced .node .level-badge,
.zoom-lod-reduced .node .resize-handle,
.zoom-lod-reduced .node .connection-handle,
.zoom-lod-reduced .node .node-icon {
    display: none !important;
}
.zoom-lod-reduced .node .node-title {
    font-size: 18px !important;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zoom-lod-reduced .node .node-body-area {
    padding: 4px 8px;
}
.zoom-lod-reduced .node {
    min-height: 40px !important;
    padding: 4px !important;
    overflow: hidden;
}

/* ── LOD MINIMAL: <30% zoom — shape only, no text, no border, no buttons ── */
.zoom-lod-minimal .node .node-content {
    visibility: hidden !important;
}
.zoom-lod-minimal .node .add-child-btn {
    display: none !important;
}
.zoom-lod-minimal .node {
    border: none !important;
    box-shadow: none !important;
    min-height: 40px !important;
    min-width: 80px !important;
    padding: 0 !important;
    overflow: hidden;
}
/* Keep the node visible as a filled shape */
.zoom-lod-minimal .node.core-node {
    background: var(--pc-core-bg, var(--accent)) !important;
    opacity: 0.85;
}
.zoom-lod-minimal .node.branch-node {
    background: var(--pc-branch-bg, var(--bg-node)) !important;
    opacity: 0.75;
}
/* Hide connection handles and SVG extras at minimal LOD */
.zoom-lod-minimal #conn-btns-layer {
    display: none;
}