:root {
          --bg:#08080a; --bg2:#111116; --bg3:#1a1a22; --bg4:#222230;
          --border:#30363d; --border2:#555d68; --accent:#b388ff;
          --accent2:#d2a8ff; --accent3:#e8d4ff;
          --text:#e6edf3; --text2:#8b949e; --text3:#484f58;
          --danger:#ff7b72; --success:#3fb950; --info:#58a6ff;
          --card-bg:#0d1117; --card-border:#b388ff;
          --line-parent:#8b949e; --line-spouse:#ff7b72; --line-sibling:#58a6ff;
          --line-adopted:#3fb950; --line-step:#ffaa44; --line-other:#aaaaaa;
          --shadow:rgba(0,0,0,0.92); --overlay:rgba(0,0,0,0.88);
          --mono:'Courier New','Lucida Console',monospace;
          --bg-tree:#d9a55f;
          --topbar-h:50px;
        }
        /* PRESETS */
        body.preset-light {
          --bg:#f0f4f8; --bg2:#ffffff; --bg3:#eaeef2; --bg4:#dde3eb;
          --border:#c8d0da; --border2:#8a9ab0; --accent:#0969da;
          --accent2:#1a7fe8; --accent3:#4499ff;
          --text:#1c2431; --text2:#57606a; --text3:#8592a0;
          --danger:#cf222e; --success:#1a7f37; --info:#0550ae;
          --card-bg:#ffffff; --card-border:#0969da;
          --line-parent:#8a9ab0; --line-spouse:#cf222e; --line-sibling:#0550ae;
          --shadow:rgba(0,0,0,0.12); --overlay:rgba(240,244,248,0.9);
          --bg-tree:#3f86dc;
        }
        body.preset-matrix {
          --bg:#000500; --bg2:#000a00; --bg3:#001500; --bg4:#002000;
          --border:#006600; --border2:#009900; --accent:#00ff00;
          --accent2:#44ff44; --accent3:#88ff88;
          --text:#bbffbb; --text2:#66cc66; --text3:#339933;
          --danger:#ff3333; --success:#00ff00; --info:#00ffaa;
          --card-bg:#000800; --card-border:#00ff00;
          --line-parent:#006600; --line-spouse:#ff3333; --line-sibling:#00aaff;
          --shadow:rgba(0,0,0,0.95); --overlay:rgba(0,5,0,0.92);
          --bg-tree:#00a85a;
        }
        body.preset-sepia {
          --bg:#3a2c1e; --bg2:#4e3c28; --bg3:#5e4c38; --bg4:#6e5c48;
          --border:#9a7c54; --border2:#c09a70; --accent:#f0c070;
          --accent2:#f4d490; --accent3:#f8e8c0;
          --text:#f9f0de; --text2:#d8b888; --text3:#a88858;
          --danger:#e06040; --success:#78b050; --info:#70b8e0;
          --card-bg:#3c2e20; --card-border:#f0c070;
          --line-parent:#9a7c54; --line-spouse:#e06040; --line-sibling:#70b8e0;
          --shadow:rgba(0,0,0,0.7); --overlay:rgba(40,28,16,0.93);
          --bg-tree:#d09a52;
        }
        body.preset-navy {
          --bg:#010d1a; --bg2:#051828; --bg3:#082038; --bg4:#0c2a4a;
          --border:#1a4060; --border2:#2a6090; --accent:#58b8ff;
          --accent2:#80c8ff; --accent3:#b0dcff;
          --text:#d0e8ff; --text2:#7090b0; --text3:#304860;
          --danger:#ff5050; --success:#40c080; --info:#58b8ff;
          --card-bg:#040e1e; --card-border:#58b8ff;
          --line-parent:#2a6090; --line-spouse:#ff5050; --line-sibling:#40c080;
          --shadow:rgba(0,0,0,0.95); --overlay:rgba(1,8,20,0.92);
          --bg-tree:#52a5e8;
        }
        body.preset-crimson {
          --bg:#0e0406; --bg2:#180810; --bg3:#280a18; --bg4:#380c20;
          --border:#6a1838; --border2:#9a2858; --accent:#f060a0;
          --accent2:#f888bc; --accent3:#ffb8d8;
          --text:#ffeef6; --text2:#c08098; --text3:#804058;
          --danger:#ff4040; --success:#50c080; --info:#6080ff;
          --card-bg:#120608; --card-border:#f060a0;
          --line-parent:#6a1838; --line-spouse:#ff4040; --line-sibling:#6080ff;
          --shadow:rgba(0,0,0,0.95); --overlay:rgba(10,2,6,0.92);
          --bg-tree:#d16a9a;
        }
        body.preset-sepia-dark {
          --bg:#2c1e12; --bg2:#3d2c1a; --bg3:#4e3a24; --bg4:#5f4830;
          --border:#8a7048; --border2:#a88860; --accent:#e0a848;
          --accent2:#e8b858; --accent3:#f0c878;
          --text:#f0e4cc; --text2:#b89868; --text3:#8a7048;
          --danger:#cc6040; --success:#78a050; --info:#70a0c8;
          --card-bg:#2e1e12; --card-border:#e0a848;
          --line-parent:#8a7048; --line-spouse:#cc6040; --line-sibling:#70a0c8;
          --shadow:rgba(0,0,0,0.75); --overlay:rgba(30,20,8,0.95);
          --bg-tree:#c88a3c;
        }
        body.preset-sepia-light {
          --bg:#f5eedc; --bg2:#fbf7ee; --bg3:#ebe4d0; --bg4:#ded5be;
          --border:#c5af88; --border2:#a08a66; --accent:#8a6630;
          --accent2:#a07840; --accent3:#b89050;
          --text:#2a2212; --text2:#5e4c30; --text3:#8a7a60;
          --danger:#c04030; --success:#588830; --info:#5080a0;
          --card-bg:#fbf7ee; --card-border:#8a6630;
          --line-parent:#a08a66; --line-spouse:#c04030; --line-sibling:#5080a0;
          --shadow:rgba(80,50,20,0.12); --overlay:rgba(245,238,220,0.92);
          --bg-tree:#b89858;
        }

        * { box-sizing:border-box; margin:0; padding:0; }
        html,body { width:100vw; height:100vh; overflow:hidden; }
        body { background:var(--bg); color:var(--text); font-family:var(--mono); user-select:none; }
        ::-webkit-scrollbar { width:7px; height:7px; }
        ::-webkit-scrollbar-track { background:var(--bg2); }
        ::-webkit-scrollbar-thumb { background:var(--border2); }
        input,select,textarea,button { font-family:var(--mono); }

        /* ═══════════════════════════════ TOP BAR ═══════════════════════════════ */
        #topbar {
          position:fixed; top:0; left:0; right:0; z-index:100; height:var(--topbar-h); min-height:50px;
          background:var(--bg2); border-bottom:2px solid var(--border);
          display:flex; align-items:center; padding:0 10px; gap:5px;
          box-shadow:0 4px 20px var(--shadow); flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
          transition:transform .24s ease,opacity .24s ease;
        }
        .mobile-topbar-toggle{
          position:fixed; top:10px; right:10px; z-index:160; display:none;
          background:var(--bg2); border:1px solid var(--accent); color:var(--accent);
          font-size:11px; letter-spacing:.6px; padding:7px 12px; font-weight:bold;
          text-transform:uppercase; box-shadow:0 6px 20px var(--shadow);
        }
        .mobile-topbar-toggle:active{ transform:translateY(1px); }
        .tb-logo { font-size:13px; color:var(--accent); letter-spacing:1.5px; white-space:nowrap; flex-shrink:0; text-shadow:0 0 12px rgba(179,136,255,0.5); font-weight:bold; }
        .tb-sep { color:var(--border2); font-size:18px; flex-shrink:0; opacity:.5; }
        .tbtn {
          background:var(--bg3); border:1px solid var(--border); color:var(--text2);
          font-size:10px; padding:4px 8px; cursor:pointer; white-space:nowrap;
          transition:all .15s; letter-spacing:.5px; text-transform:uppercase; font-weight:bold; flex-shrink:0;
        }
        .tbtn:hover { background:var(--bg4); border-color:var(--accent); color:var(--accent); }
        .tbtn.primary { border-color:var(--accent); color:var(--accent); }
        .tbtn.primary:hover { background:var(--accent); color:var(--bg); box-shadow:0 0 12px var(--accent); }
        .tbtn:disabled { opacity:.3; pointer-events:none; }

        .show-all-wrap { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:11px; color:var(--text); font-weight:bold; text-transform:uppercase; margin-left:4px;}
        .show-all-wrap input { cursor:pointer; width:14px; height:14px; accent-color:var(--info); }
        .show-all-wrap:hover { color:var(--info); }

        .search-wrap { position:relative; width:200px; flex-shrink:0; }
        .search-inp {
          width:100%; background:var(--bg3); border:1px solid var(--border); color:var(--text);
          font-size:11px; padding:5px 9px; outline:none; transition:border-color .15s;
        }
        .search-inp:focus { border-color:var(--accent); }
        .search-results {
          position:absolute; top:100%; left:0; right:0; z-index:200;
          background:var(--bg2); border:1px solid var(--border); max-height:220px;
          overflow-y:auto; display:none;
        }
        .search-item { padding:8px 10px; cursor:pointer; font-size:11px; border-bottom:1px solid var(--bg3); }
        .search-item:hover { background:var(--bg3); color:var(--accent); }
        .tb-spacer { flex:1; min-width:2px; }
        .tb-zoom { font-size:11px; color:var(--text2); white-space:nowrap; flex-shrink:0; }

        /* ═══════════════════════════════ VIEWPORT ═══════════════════════════════ */
        #viewport { position:fixed; top:var(--topbar-h); left:0; right:0; bottom:0; overflow:hidden; cursor:grab; touch-action:none; overscroll-behavior:none; }
        #viewport.grabbing { cursor:grabbing; }

        /* Оптимизация видеокарты для холста и всех элементов, которые меняют позицию через JS */
        #canvas { position:absolute; top:0; left:0; transform-origin:0 0; will-change: transform; }
        #bg-svg { position:absolute; top:0; left:0; pointer-events:none; z-index:0; transition: opacity 0.3s; }
        #connections-svg { position:absolute; top:0; left:0; pointer-events:none; z-index:5; overflow:visible; }

        /* ═══════════════════════════════ PERSON CARD ═══════════════════════════════ */
        .person-card {
          position:absolute; cursor:pointer; z-index:10;
          transition:filter .2s, z-index 0s;
          min-width:290px;
          touch-action:none;
        }
        /* drop-shadow / grayscale filters are heavy on slow GPUs — replaced with cheaper box-shadow / opacity */
        .person-card:hover { box-shadow:0 8px 20px var(--accent); z-index:25; }
        .person-card.selected .card-inner { box-shadow:0 0 0 2px var(--success), 0 0 20px var(--success); }
        .person-card.highlighted .card-inner { box-shadow:0 0 0 2px var(--info), 0 0 16px var(--info); }
        .person-card.dim { opacity:.2; }

        /* Promote card to its own compositing layer; isolate layout/style/paint within it. */
        .person-card { contain: layout style paint; will-change: transform; }

        /* GPU-composite the canvas as a single layer during pan/zoom. */
        #canvas { will-change: transform; }
        #bg-svg, #connections-svg { contain: strict; pointer-events: none; }

        /* During pan/drag, the procedural background SVG (thousands of paths) is not
         * being redrawn — but a slow GPU still composites it every frame. Hide it. */
        body.panning #bg-svg { visibility: hidden; }
        body.panning .person-card { transition: none; }

        .card-top-pre,.card-bot-pre {
          display:block; font-size:9px; line-height:1; color:var(--card-border);
          white-space:pre; letter-spacing:0; pointer-events:none; padding:0;
          overflow:hidden; font-weight:bold; font-family:var(--mono); font-variant-ligatures:none;
        }
        .card-inner {
          background:var(--card-bg); border-left:8px solid var(--card-border);
          border-right:8px solid var(--card-border);
          padding:10px 14px; display:flex; flex-direction:column; gap:7px; width:100%;
          transition:box-shadow .15s;
        }
        .card-veteran .card-top-pre,.card-veteran .card-bot-pre,.card-veteran .card-inner { color:unset; border-left-color:#ffd700; border-right-color:#ffd700; }
        .card-veteran .card-top-pre,.card-veteran .card-bot-pre { color:#ffd700; }
        .card-medic .card-top-pre,.card-medic .card-bot-pre { color:#ff4444; }
        .card-medic .card-inner { border-left-color:#ff4444; border-right-color:#ff4444; }
        .card-science .card-top-pre,.card-science .card-bot-pre { color:#44aaff; }
        .card-science .card-inner { border-left-color:#44aaff; border-right-color:#44aaff; }
        .card-builder .card-top-pre,.card-builder .card-bot-pre { color:#ffaa00; }
        .card-builder .card-inner { border-left-color:#ffaa00; border-right-color:#ffaa00; }
        .card-teacher .card-top-pre,.card-teacher .card-bot-pre { color:#aaff44; }
        .card-teacher .card-inner { border-left-color:#aaff44; border-right-color:#aaff44; }
        .card-royal .card-top-pre,.card-royal .card-bot-pre { color:#ff88ff; }
        .card-royal .card-inner { border-left-color:#ff88ff; border-right-color:#ff88ff; }

        .card-header { display:flex; gap:12px; align-items:flex-start; border-bottom:1px dashed var(--border); padding-bottom:9px; }
        .card-photo { width:64px; height:78px; flex-shrink:0; border:1px solid var(--border2); background:var(--bg3); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:inset 0 0 10px rgba(0,0,0,.8); }
        .card-photo img { width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; -webkit-user-drag:none; }
        .card-photo-ascii { font-size:8px; line-height:1.15; color:var(--text3); text-align:center; white-space:pre; }
        .card-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; justify-content:center; }
        .card-surname { font-size:15px; color:var(--accent2); font-weight:bold; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:1px; }
        .card-name { font-size:12px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .card-years { font-size:10px; color:var(--text2); background:var(--bg); padding:3px 8px; border:1px dashed var(--border); width:fit-content; }
        .card-tags { display:flex; flex-wrap:wrap; gap:5px; }
        .card-tag { font-size:9px; padding:3px 7px; border:1px solid var(--border2); background:var(--bg3); color:var(--text2); text-transform:uppercase; letter-spacing:.5px; font-weight:bold; }
        .card-life { margin-top:4px; border:1px dashed var(--border); background:var(--bg2); padding:5px 7px 6px; }
        .card-life-head { display:flex; justify-content:space-between; font-size:9px; color:var(--text3); margin-bottom:4px; font-weight:bold; }
        .card-life-track { position:relative; height:8px; border:1px solid var(--border); background:linear-gradient(to right,var(--bg3),var(--bg)); overflow:visible; }
        .card-life-fill { position:absolute; left:0; top:0; bottom:0; width:100%; background:linear-gradient(90deg,var(--success),var(--accent)); opacity:.55; }
        .card-life-mark { position:absolute; top:-3px; width:2px; height:14px; background:var(--accent2); box-shadow:0 0 5px var(--accent2); }
        .tag-veteran { border-color:#ffd700!important; color:#ffd700!important; background:rgba(255,215,0,.08)!important; }
        .tag-veteran::before { content:'★ '; }
        .tag-medic { border-color:#ff4444!important; color:#ff4444!important; background:rgba(255,68,68,.08)!important; }
        .tag-medic::before { content:'✚ '; }
        .tag-science { border-color:#44aaff!important; color:#44aaff!important; background:rgba(68,170,255,.08)!important; }
        .tag-science::before { content:'⚛ '; }
        .tag-builder { border-color:#ffaa00!important; color:#ffaa00!important; background:rgba(255,170,0,.08)!important; }
        .tag-builder::before { content:'⚒ '; }
        .tag-teacher { border-color:#aaff44!important; color:#aaff44!important; background:rgba(170,255,68,.08)!important; }
        .tag-teacher::before { content:'✎ '; }
        .tag-royal { border-color:#ff88ff!important; color:#ff88ff!important; background:rgba(255,136,255,.08)!important; }
        .tag-royal::before { content:'♛ '; }
        .card-rel-badge { position:absolute; top:-22px; left:50%; transform:translateX(-50%); background:var(--info); color:#000; font-size:10px; padding:2px 12px; white-space:nowrap; z-index:30; font-weight:bold; letter-spacing:.5px; border:1px solid var(--info); text-transform:uppercase; }

        /* ═══════════════════════════════ CONNECTIONS ═══════════════════════════════ */
        .conn-label-bg { fill:var(--bg2); }
        .conn-label-text { font-family:'Courier New',monospace; font-size:11px; font-weight:bold; text-transform:uppercase; letter-spacing:.5px; }

        /* ═══════════════════════════════ MINIMAP ═══════════════════════════════ */
        #minimap { position:fixed; bottom:16px; right:16px; width:170px; height:110px; background:var(--bg2); border:1px solid var(--border2); z-index:90; cursor:crosshair; overflow:hidden; opacity:.75; transition:opacity .2s; }
        #minimap:hover { opacity:1; }
        #minimap-links { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
        .minimap-link { fill:none; stroke:var(--line-parent); stroke-width:1.1; stroke-opacity:.45; }
        .minimap-node { position:absolute; width:6px; height:6px; background:var(--accent); border-radius:50%; transform:translate(-50%,-50%); }
        .minimap-vp { position:absolute; border:1px solid var(--success); background:rgba(63,185,80,.12); pointer-events:none; will-change: transform; }

        /* ═══════════════════════════════ ZOOM CONTROLS (bottom-left) ═══════════════════════════════ */
        .zpbtn {
          position:fixed; bottom:12px; left:56px; z-index:100;
          background:var(--bg3); border:1px solid var(--border); color:var(--text2);
          font-size:16px; padding:6px 10px; cursor:pointer; transition:all .15s;
          font-family:var(--mono); min-width:36px; text-align:center;
        }
        .zpbtn:hover { background:var(--bg4); border-color:var(--accent); color:var(--accent); }
        .zpbtn:disabled { opacity:.3; pointer-events:none; }
        #zpbtn-undo { bottom:52px; left:56px; }
        #zpbtn-redo { bottom:12px; left:56px; }
        #zoom-c {
          position:fixed; bottom:92px; left:56px; z-index:100;
          display:flex; flex-direction:column; gap:4px;
        }
        .zbtn {
          background:var(--bg3); border:1px solid var(--border); color:var(--text2);
          font-size:16px; padding:5px 10px; cursor:pointer; transition:all .15s;
          font-family:var(--mono); min-width:36px; text-align:center;
        }
        .zbtn:hover { background:var(--bg4); border-color:var(--accent); color:var(--accent); }
        #zoom-label {
          position:fixed; bottom:94px; left:52px; z-index:100;
          font-size:10px; color:var(--text2); background:var(--bg3);
          border:1px solid var(--border); padding:3px 8px; min-width:40px; text-align:center;
        }

        /* ═══════════════════════════════ MODALS & UI ═══════════════════════════════ */
        /* backdrop-filter:blur(6px) was here — kills FPS on integrated GPUs. Solid overlay is enough. */
        .modal-overlay { position:fixed; inset:0; z-index:200; background:var(--overlay); display:none; align-items:center; justify-content:center; padding:16px; }
        .modal-overlay.active { display:flex; animation:fadein .18s ease; }
        @keyframes fadein { from{opacity:0;transform:scale(.98)} to{opacity:1;transform:scale(1)} }
        .modal-box { background:var(--bg); border:2px solid var(--border); width:100%; max-height:92vh; overflow-y:auto; box-shadow:0 20px 60px var(--shadow); position:relative; }
        .modal-hdr { padding:12px 18px; background:var(--bg2); border-bottom:2px solid var(--border); display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:10; gap:12px; }
        .modal-hdr-ascii { font-size:8.5px; color:var(--border2); white-space:pre; flex:1; overflow:hidden; min-width:0; line-height:1.08; }
        .modal-hdr-edit { justify-content:space-between; }
        .modal-title-edit { margin:0; letter-spacing:1.2px; font-size:13px; }
        .modal-title { font-size:14px; color:var(--accent); font-weight:bold; letter-spacing:2px; }
        .modal-close { background:none; border:none; color:var(--text2); font-size:26px; cursor:pointer; line-height:1; transition:color .15s; }
        .modal-close:hover { color:var(--danger); }
        .modal-content { padding:20px 22px; }

        .f-row { display:flex; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
        .f-group { flex:1; min-width:130px; display:flex; flex-direction:column; gap:6px; }
        .f-label { font-size:10px; color:var(--text2); letter-spacing:1px; text-transform:uppercase; font-weight:bold; }
        .f-input,.f-select,.f-textarea { background:var(--bg2); border:1px solid var(--border); color:var(--text); font-size:13px; padding:8px 12px; outline:none; transition:all .15s; width:100%; }
        .f-input:focus,.f-select:focus,.f-textarea:focus { border-color:var(--accent); box-shadow:0 0 8px rgba(179,136,255,.12); }
        .f-textarea { resize:vertical; min-height:90px; }
        .f-section { font-size:11px; color:var(--accent); font-weight:bold; letter-spacing:2px; text-transform:uppercase; margin:18px 0 10px; border-bottom:1px dashed var(--border); padding-bottom:4px; display:flex; align-items:center; gap:10px; }
        .f-section::after { content:''; flex:1; height:1px; background:linear-gradient(to right,var(--border),transparent); }

        .btn { background:var(--bg3); border:1px solid var(--border); color:var(--text2); font-size:11px; padding:7px 14px; cursor:pointer; transition:all .15s; letter-spacing:.5px; text-transform:uppercase; font-weight:bold; }
        .btn:hover { background:var(--bg4); border-color:var(--accent2); color:var(--accent2); }
        .btn.primary { border-color:var(--accent); color:var(--accent); }
        .btn.primary:hover { background:var(--accent); color:var(--bg); box-shadow:0 0 14px var(--accent); }
        .btn.danger { border-color:var(--danger); color:var(--danger); }
        .btn.danger:hover { background:var(--danger); color:#fff; }
        .btn.success { border-color:var(--success); color:var(--success); }
        .btn.success:hover { background:var(--success); color:#000; }
        .btn.info { border-color:var(--info); color:var(--info); }
        .btn.info:hover { background:var(--info); color:#000; }

        .drop-zone { border:2px dashed var(--border); padding:20px; text-align:center; cursor:pointer; transition:all .2s; background:var(--bg2); color:var(--text2); font-size:12px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; }
        .drop-zone:hover,.drop-zone.dragover { border-color:var(--accent); background:var(--bg3); color:var(--accent); }
        .previews-cont { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
        .preview-item { position:relative; width:82px; height:82px; border:1px solid var(--border); background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:10px; text-align:center; overflow:hidden; }
        .preview-item img { width:100%; height:100%; object-fit:cover; }
        .preview-del { position:absolute; top:2px; right:2px; background:var(--danger); color:#fff; border:none; width:18px; height:18px; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:bold; }
        .preview-avatar-btn {
          position:absolute; left:2px; top:2px; width:20px; height:18px; border:1px solid var(--border2);
          background:rgba(0,0,0,.55); color:#f3d08f; font-size:11px; font-weight:bold; cursor:pointer;
          display:flex; align-items:center; justify-content:center; line-height:1;
        }
        .preview-item.avatar-selected .preview-avatar-btn{ background:#f0c070; color:#20130a; border-color:#f0c070; }
        .preview-item.avatar-selected{ box-shadow:0 0 0 2px #f0c070 inset; }

        .tags-wrap { display:flex; flex-wrap:wrap; gap:6px; padding:7px; border:1px solid var(--border); background:var(--bg2); min-height:40px; height:auto; align-items:center; }
        .tag-chip { background:var(--bg3); border:1px solid var(--accent); color:var(--text); font-size:11px; padding:3px 9px; display:flex; align-items:center; gap:7px; font-weight:bold; }
        .tag-chip-del { cursor:pointer; color:var(--danger); font-size:15px; padding: 0 4px; }
        .tags-inp { background:none; border:none; color:var(--text); font-size:12px; outline:none; flex:1; min-width:100px; }

        .conn-list { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; max-height:180px; overflow-y:auto; }
        .conn-item { display:flex; justify-content:space-between; align-items:center; padding:9px 14px; background:var(--bg2); border:1px solid var(--border); }
        .conn-item-name { font-size:13px; color:var(--accent2); font-weight:bold; }
        .conn-item-type { font-size:10px; color:var(--text2); text-transform:uppercase; font-weight:bold; margin-top:3px; }
        .timeline-summary { margin-top:8px; font-size:11px; color:var(--text2); font-weight:bold; }
        .timeline-edit-list { display:flex; flex-direction:column; gap:8px; max-height:260px; overflow-y:auto; margin-top:10px; }
        .timeline-edit-item { display:grid; grid-template-columns:150px 1fr auto; gap:8px; background:var(--bg2); border:1px solid var(--border); padding:8px; align-items:center; }
        .timeline-empty { color:var(--text3); font-size:11px; padding:8px 2px; font-weight:bold; }

        /* PROFILE */
        .prof-grid { display:grid; grid-template-columns:260px 1fr; gap:22px; }
        @media(max-width:680px){ .prof-grid { grid-template-columns:1fr; } }
        .prof-photo-main { width:100%; height:300px; background:var(--bg2); border:2px solid var(--border); overflow:hidden; cursor:pointer; display:flex; align-items:center; justify-content:center; }
        .prof-photo-main img { width:100%; height:100%; object-fit:cover; }
        .prof-name { font-size:24px; color:var(--accent2); font-weight:bold; text-transform:uppercase; letter-spacing:2px; line-height:1.2; margin-bottom:6px; }
        .prof-years { font-size:14px; color:var(--text3); font-weight:bold; margin-bottom:16px; }
        .data-table { width:100%; border-collapse:collapse; font-size:12px; margin-bottom:16px; }
        .data-table td { padding:8px; border-bottom:1px dashed var(--bg3); }
        .data-table td:first-child { color:var(--text2); width:140px; text-transform:uppercase; font-weight:bold; }
        .doc-list { display:flex; flex-direction:column; gap:6px; }
        .doc-link { color:var(--accent); text-decoration:none; font-size:12px; display:inline-flex; align-items:center; gap:8px; background:var(--bg2); padding:8px 12px; border:1px solid var(--border); font-weight:bold; text-transform:uppercase; }
        .doc-link:hover { border-color:var(--accent); }

        /* ALBUM MODE */
        .album-shell { width:min(96vw,1420px); height:min(92vh,920px); background:linear-gradient(180deg,#2d1d11 0%, #20140d 100%); border:2px solid #8f6a44; box-shadow:0 24px 60px var(--shadow); display:flex; flex-direction:column; position:relative; }
        .album-hdr { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-bottom:1px solid #8f6a44; background:linear-gradient(180deg,#3a2617 0%, #27180f 100%); }
        .album-title { font-size:15px; letter-spacing:1.2px; color:#f2dec0; text-transform:uppercase; font-weight:bold; }
        .album-spread { position:relative; flex:1; margin:16px; background:linear-gradient(180deg,#f6ead0 0%,#ead8b4 100%); border:1px solid #b8996e; overflow:hidden; perspective:1600px; transform-style:preserve-3d; touch-action:none; }
        .album-spread::before { content:''; position:absolute; left:50%; top:10px; bottom:10px; width:6px; transform:translateX(-50%); background:linear-gradient(90deg,#c5a97f 0%,#eedfbe 50%,#c5a97f 100%); opacity:.9; }

        .album-spread.flip-next .album-canvas { animation:albumFlipNext .48s cubic-bezier(.25,.78,.28,1); }
        .album-spread.flip-prev .album-canvas { animation:albumFlipPrev .48s cubic-bezier(.25,.78,.28,1); }
        @keyframes albumFlipNext { from { transform:rotateY(0deg) translateX(0) scale(1); opacity:1; } 45% { transform:rotateY(-24deg) translateX(-26px) scale(.985); opacity:.7; } to { transform:rotateY(0deg) translateX(0) scale(1); opacity:1; } }
        @keyframes albumFlipPrev { from { transform:rotateY(0deg) translateX(0) scale(1); opacity:1; } 45% { transform:rotateY(24deg) translateX(26px) scale(.985); opacity:.7; } to { transform:rotateY(0deg) translateX(0) scale(1); opacity:1; } }

        .album-canvas { position:absolute; inset:0; }
        .album-spread.flip-next::after, .album-spread.flip-prev::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(64,38,16,.0) 0%,rgba(64,38,16,.22) 44%,rgba(255,240,214,.22) 51%,rgba(64,38,16,.22) 58%,rgba(64,38,16,.0) 100%); animation:albumFlipGlow .48s ease; }
        @keyframes albumFlipGlow{ from{ opacity:0; } 35%{ opacity:1; } to{ opacity:0; } }

        .album-item { position:absolute; display:flex; flex-direction:column; gap:8px; align-items:stretch; transform-origin:center; transition: filter .18s ease; cursor:grab; }
        .album-item:active { cursor:grabbing; }
        .album-photo-wrap { border:8px solid #fff; box-shadow:0 10px 20px rgba(0,0,0,.24); background:#fff; padding:0; width:100%; aspect-ratio:4 / 3; overflow:hidden; }
        .album-photo-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
        .album-caption { border:1px solid #b69063; background:rgba(255,246,228,.95); color:#50341c; font-size:12px; line-height:1.35; padding:6px 8px; text-align:center; font-weight:bold; white-space: normal; word-break: break-word; }

        .album-item:hover .album-photo-wrap, .album-item:hover .album-caption, .album-item.active .album-photo-wrap, .album-item.active .album-caption { border-color:#e5932f; box-shadow:0 0 0 2px rgba(229,147,47,.3),0 8px 18px rgba(0,0,0,.25); }
        .album-item.active { z-index: 50; }

        .album-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:20px; color:#6d4b2a; font-weight:bold; pointer-events:none;}
        .album-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px 14px; border-top:1px solid #8f6a44; }
        .album-page-info { color:#eacfa2; font-size:13px; letter-spacing:.8px; font-weight:bold; }
        .album-meta { color:#d8b782; font-size:11px; text-transform:uppercase; }

        #album-item-toolbar {
            position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
            background:rgba(42,26,16,0.95); border:1px solid #e5932f; border-radius:8px;
            padding:8px 16px; display:none; gap:10px; z-index:100; white-space:nowrap;
            box-shadow: 0 8px 24px rgba(0,0,0,0.5); align-items: center;
        }
        #album-item-toolbar .btn { min-height:30px; font-size:14px; font-weight:bold; padding:4px 12px; }

        .album-photo-view { width:min(96vw,1180px); max-height:94vh; background:#1c120b; border:2px solid #8f6a44; display:grid; grid-template-columns:minmax(360px,1.3fr) minmax(240px,.7fr); gap:14px; padding:16px; }
        .album-photo-view img { width:100%; max-height:80vh; object-fit:contain; border:2px solid #8f6a44; background:#0f0905; }
        .album-photo-info { border:1px solid #8f6a44; background:#2a1a10; padding:12px; overflow:auto; display:flex; flex-direction:column;}
        .album-photo-name { color:#f2dec0; font-size:18px; letter-spacing:.8px; font-weight:bold; margin-bottom:8px; line-height:1.4; }
        .album-photo-desc { color:#dfc399; font-size:13px; line-height:1.55; white-space:pre-wrap; flex:1;}

        .album-editor-grid{ display:grid; grid-template-columns:minmax(220px,1fr) minmax(260px,1.2fr); gap:14px; }
        .album-editor-preview{ min-height:280px; border:1px dashed var(--accent); background:var(--bg2); display:flex; align-items:center; justify-content:center; overflow:hidden; }
        .album-editor-preview img{ width:100%; height:100%; object-fit:contain; }
        .album-editor-note{ color:var(--text2); font-size:11px; line-height:1.5; }

        /* THEME PANEL */
        #theme-panel { position:fixed; top:var(--topbar-h); right:0; background:var(--bg2); border:1px solid var(--border); border-top:none; padding:16px; width:280px; z-index:95; display:none; box-shadow:-8px 8px 24px var(--shadow); max-height:calc(100vh - var(--topbar-h)); overflow-y:auto; }
        #theme-panel.active { display:block; }
        .theme-preset-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
        .theme-color-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:11px; font-weight:bold; text-transform:uppercase; }
        .theme-color-row input[type=color] { background:none; border:1px solid var(--border); cursor:pointer; height:26px; width:40px; padding:1px; }

        #toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--accent); color:var(--bg); font-size:13px; font-weight:bold; padding:10px 28px; z-index:1000; opacity:0; transition:all .3s; text-transform:uppercase; letter-spacing:1px; pointer-events: none; }
        #toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

        .stats-table { width:100%; border-collapse:collapse; font-size:13px; }
        .stats-table td { padding:10px 8px; border-bottom:1px dashed var(--border); }
        .stats-table td:first-child { color:var(--text2); font-weight:bold; text-transform:uppercase; }
        .stats-table td:last-child { color:var(--accent2); font-weight:bold; text-align:right; }
        .modal-actions { flex-wrap:nowrap; align-items:center; }

        .backup-item { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--bg3); border:1px solid var(--border); margin-bottom:6px; font-size: 12px;}
        .backup-item-time { color:var(--accent2); font-weight:bold; font-size: 13px;}

        @media (max-width:1100px){
          .mobile-topbar-toggle{ display:block; }
          body.mobile-topbar-hidden #topbar{ transform:translateY(calc(-100% - 8px)); opacity:0; pointer-events:none; }
          body.mobile-topbar-hidden #theme-panel{ display:none!important; }
          #topbar{ height:auto; min-height:50px; padding:8px; gap:6px; flex-wrap:wrap; overflow:visible; }
          .tb-logo{ font-size:11px; letter-spacing:1px; flex:1 1 100%; }
          .tb-sep{ display:none; }
          .search-wrap{ order:90; width:100%; flex:1 1 100%; }
          .tb-spacer{ display:none; }
          .tb-zoom{ margin-left:auto; font-size:10px; }
          .tbtn{ font-size:10px; padding:6px 8px; }
          #theme-panel{ top:var(--topbar-h); width:min(100vw,340px); max-height:calc(100vh - var(--topbar-h)); }
          .album-editor-grid{ grid-template-columns:1fr; }
        }

        @media (max-width:680px){
          .person-card{ min-width:260px; }
          .card-photo{ width:54px; height:68px; }
          .card-surname{ font-size:13px; letter-spacing:.7px; }
          .card-name{ font-size:11px; }
          .card-years{ font-size:9px; }
          .card-tag{ font-size:8px; padding:2px 6px; }
          .modal-overlay{ padding:8px; }
          .modal-box{ max-height:96vh; }
          .modal-title{ font-size:13px; letter-spacing:1px; }
          .modal-content{ padding:14px 12px; }
          .modal-hdr{ padding:10px 12px; }
          #edit-modal .modal-hdr-ascii{ display:none; }
          .f-row{ gap:10px; margin-bottom:12px; }
          .f-group{ min-width:100%; }
          .modal-actions{ flex-wrap:wrap; justify-content:flex-start !important; gap:8px; }
          .modal-actions .btn{ flex:1 1 140px; }
          #btn-delete{ margin-right:0 !important; }
          .btn { min-height: 40px; font-size: 12px; }
          .tbtn { min-height: 38px; font-size: 11px; }
          .f-input, .f-select, .f-textarea { padding: 12px; font-size: 14px; }
          .conn-item { padding: 12px; }

          #minimap{ display:none; }
          #zoom-panel{ bottom:8px; left:8px; }
          .zoom-btn{ width:40px; height:36px; font-size:16px; }
          .timeline-edit-item{ grid-template-columns:1fr; }
          .timeline-edit-item .btn{ width:100%; }
          .album-shell{ width:100vw; height:100svh; border:none; border-radius:0; }
          .album-spread{ margin:4px 6px; }
          .album-hdr{ padding:8px 10px; }
          .album-title{ font-size:12px; }
          .album-controls{ padding:8px 10px; gap:6px; flex-wrap:wrap; }
          .album-page-info{ font-size:11px; }
          .album-photo-view{ width:96vw; grid-template-columns:1fr; max-height:94svh; overflow-y:auto; }
          .album-editor-grid{ grid-template-columns:1fr !important; }
          #album-editor-modal .modal-box{ max-height:96svh; }
          #album-editor-modal .modal-hdr{ position:sticky; top:0; z-index:10; }

          #album-item-toolbar {
             width: 90%; flex-wrap: wrap; justify-content: center; bottom: 10px;
          }
        }

        /* ═══════ LASSO / MULTI-SELECT ═══════ */
        #lasso-rect {
          position:fixed; pointer-events:none; z-index:80;
          border:2px dashed var(--accent); background:rgba(179,136,255,.07);
          display:none;
        }
        body.lasso-mode #viewport { cursor:crosshair !important; }
        #left-panel {
          position:fixed; bottom:12px; left:12px; height:auto; width:auto;
          background:var(--bg2); border:1px solid var(--border); border-radius:2px; z-index:100;
          display:flex; flex-direction:row; align-items:center; padding:4px 8px; gap:6px;
        }
        .lp-btn {
          width:32px; height:32px; background:none; border:1px solid var(--border2); color:var(--accent);
          font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer;
          transition:all .15s; padding:0;
        }
        .lp-btn:hover { background:var(--bg4); border-color:var(--accent); }
        .lp-btn.active, body.lasso-mode #btn-lasso { border-color:var(--accent); color:var(--accent2); background:var(--bg4); }
        .lp-sep { width:1px; height:22px; background:var(--border); margin:0 2px; }

        body.lasso-mode #viewport { cursor:crosshair !important; }
        .person-card.multi-selected .card-inner {
          box-shadow:0 0 0 2px var(--accent2), 0 0 18px rgba(232,200,120,.45) !important;
        }
        .person-card.multi-selected .card-top-pre,
        .person-card.multi-selected .card-bot-pre { color:var(--accent2) !important; }
        #multi-drag-count {
          position:fixed; pointer-events:none; z-index:999;
          background:var(--accent); color:var(--bg); font-size:12px; font-weight:bold;
          padding:4px 12px; letter-spacing:.5px; display:none;
          border:1px solid var(--accent2);
        }
        /* ═══════ ZOOM BUTTONS PANEL ═══════ */
        #zoom-panel {
          position:fixed; bottom:16px; left:16px; z-index:90;
          display:flex; flex-direction:column; gap:4px;
        }
        .zoom-btn {
          width:38px; height:34px;
          background:var(--bg2); border:1px solid var(--border2); color:var(--accent);
          font-size:18px; font-weight:bold; cursor:pointer;
          display:flex; align-items:center; justify-content:center;
          font-family:var(--mono); transition:all .15s; user-select:none;
        }
        .zoom-btn:hover { background:var(--bg4); border-color:var(--accent); box-shadow:0 0 8px var(--accent); }
        .zoom-btn:active { transform:scale(.93); }
        .zoom-btn.fit-btn { font-size:13px; width:38px; height:28px; }
        .zoom-sep { height:1px; background:var(--border); margin:2px 0; }
        .zoom-btn.undo-btn,.zoom-btn.redo-btn { font-size:16px; }
        .zoom-btn:disabled { opacity:.3; pointer-events:none; }