*{box-sizing:border-box;margin:0;padding:0}
  :root{
    --bg1:#070b16; --bg2:#0e1730;
    --panel:rgba(13,20,38,.78);
    --border:rgba(255,255,255,.10);
    --text:#e8eefc; --muted:#93a2c4;
    --accent:#ffd166; --male:#5b8def; --female:#ef7fa8;
    --soft:rgba(255,255,255,.05); --hover:rgba(255,255,255,.10);
    --hover-b:rgba(255,255,255,.22); --scroll:rgba(255,255,255,.14);
    --acc-1:rgba(255,209,102,.16); --acc-2:rgba(255,209,102,.28);
    --acc-b:rgba(255,209,102,.45); --acc-text:#ffe6ab;
    --shadow:rgba(0,0,0,.45);
    --logo:linear-gradient(140deg,#ffd166,#ef7fa8 55%,#5b8def);
    --logo-glow:rgba(255,209,102,.35);
  }
  /* ---------- темы оформления ---------- */
  [data-theme=light]{
    --bg1:#eef1f7; --bg2:#ffffff;
    --panel:rgba(255,255,255,.88);
    --border:rgba(20,32,64,.15);
    --text:#17203a; --muted:#5d6a86;
    --accent:#c07a00; --male:#3f6fd0; --female:#d45a80;
    --soft:rgba(20,32,64,.05); --hover:rgba(20,32,64,.08);
    --hover-b:rgba(20,32,64,.20); --scroll:rgba(20,32,64,.20);
    --acc-1:rgba(255,180,40,.18); --acc-2:rgba(255,180,40,.32);
    --acc-b:rgba(190,130,10,.50); --acc-text:#7a4b00;
    --shadow:rgba(30,50,100,.16);
    --logo:linear-gradient(140deg,#ffb703,#f472b6 55%,#4f8ef7);
    --logo-glow:rgba(255,183,3,.35);
  }
  [data-theme=neon]{
    --bg1:#0a0014; --bg2:#1a0030;
    --panel:rgba(12,2,28,.82);
    --border:rgba(0,255,170,.22);
    --text:#eafff6; --muted:#7de0b4;
    --accent:#00ffa8; --male:#00c2ff; --female:#ff4fd8;
    --acc-1:rgba(0,255,170,.16); --acc-2:rgba(0,255,170,.30);
    --acc-b:rgba(0,255,170,.50); --acc-text:#9dffd8;
    --logo:linear-gradient(140deg,#00ffa8,#00c2ff 55%,#ff4fd8);
    --logo-glow:rgba(0,255,168,.45);
  }
  [data-theme=ocean]{
    --bg1:#062a45; --bg2:#0a4066;
    --panel:rgba(6,30,48,.82);
    --border:rgba(120,220,255,.18);
    --text:#e6f7ff; --muted:#9ed4ea;
    --accent:#4fd8ff; --male:#4f9fe0; --female:#f08fb0;
    --acc-1:rgba(79,216,255,.16); --acc-2:rgba(79,216,255,.30);
    --acc-b:rgba(79,216,255,.50); --acc-text:#bdefff;
    --logo:linear-gradient(140deg,#4fd8ff,#5fd0a8 55%,#3f7fe0);
    --logo-glow:rgba(79,216,255,.40);
  }
  [data-theme=forest]{
    --bg1:#050f08; --bg2:#0c2113;
    --panel:rgba(8,26,15,.80);
    --border:rgba(160,230,140,.15);
    --text:#eaf7e6; --muted:#93b396;
    --accent:#b6e070; --male:#6aa84f; --female:#e79ac0;
    --acc-1:rgba(182,224,112,.14); --acc-2:rgba(182,224,112,.26);
    --acc-b:rgba(182,224,112,.45); --acc-text:#dcf5b4;
    --logo:linear-gradient(140deg,#b6e070,#7ad86a 55%,#4f9f6a);
    --logo-glow:rgba(182,224,112,.38);
  }
  [data-theme=sakura]{
    --bg1:#2a1020; --bg2:#4a1830;
    --panel:rgba(36,14,28,.84);
    --border:rgba(255,180,210,.20);
    --text:#ffeef6; --muted:#e0b0c8;
    --accent:#ff9ec7; --male:#8f9fe8; --female:#ff7fb0;
    --acc-1:rgba(255,158,199,.18); --acc-2:rgba(255,158,199,.32);
    --acc-b:rgba(255,158,199,.50); --acc-text:#ffd9ea;
    --logo:linear-gradient(140deg,#ff9ec7,#ff7fb0 55%,#b08fe8);
    --logo-glow:rgba(255,158,199,.42);
  }
  [data-theme=arctic]{
    --bg1:#e6f3fb; --bg2:#ffffff;
    --panel:rgba(255,255,255,.88);
    --border:rgba(24,80,120,.16);
    --text:#0f2733; --muted:#527486;
    --accent:#0a84b8; --male:#2f7fbf; --female:#e0709a;
    --soft:rgba(24,80,120,.05); --hover:rgba(24,80,120,.09);
    --hover-b:rgba(24,80,120,.24); --scroll:rgba(24,80,120,.22);
    --acc-1:rgba(60,170,220,.16); --acc-2:rgba(60,170,220,.30);
    --acc-b:rgba(10,132,184,.50); --acc-text:#065f80;
    --shadow:rgba(20,60,100,.16);
    --logo:linear-gradient(140deg,#7fd8ff,#c6efff 55%,#3f9fd0);
    --logo-glow:rgba(127,216,255,.42);
  }
  [data-theme=desert]{
    --bg1:#f6edda; --bg2:#fffbf1;
    --panel:rgba(255,251,242,.90);
    --border:rgba(120,84,40,.18);
    --text:#2c2114; --muted:#7a6a52;
    --accent:#b5762a; --male:#a06a3a; --female:#c96a7a;
    --soft:rgba(120,84,40,.06); --hover:rgba(120,84,40,.10);
    --hover-b:rgba(120,84,40,.26); --scroll:rgba(120,84,40,.24);
    --acc-1:rgba(200,140,50,.18); --acc-2:rgba(200,140,50,.32);
    --acc-b:rgba(150,100,30,.50); --acc-text:#7a4b00;
    --shadow:rgba(90,60,20,.16);
    --logo:linear-gradient(140deg,#e8b060,#d88a5a 55%,#b5762a);
    --logo-glow:rgba(232,176,96,.40);
  }
  [data-theme=retro]{
    --bg1:#17110a; --bg2:#2a1f11;
    --panel:rgba(30,22,12,.82);
    --border:rgba(230,190,130,.18);
    --text:#f3e6cf; --muted:#bda583;
    --accent:#e0b060; --male:#b08a5a; --female:#d88a8a;
    --soft:rgba(230,190,130,.07); --hover:rgba(230,190,130,.12);
    --hover-b:rgba(230,190,130,.28); --scroll:rgba(230,190,130,.26);
    --acc-1:rgba(224,176,96,.16); --acc-2:rgba(224,176,96,.30);
    --acc-b:rgba(224,176,96,.48); --acc-text:#f5d9a0;
    --shadow:rgba(0,0,0,.45);
    --logo:linear-gradient(140deg,#e0b060,#c98a5a 55%,#8a6a3a);
    --logo-glow:rgba(224,176,96,.38);
  }
  [data-theme=sunset]{
    --bg1:#3a1020; --bg2:#6a2030;
    --panel:rgba(42,14,28,.84);
    --border:rgba(255,150,120,.22);
    --text:#ffeee6; --muted:#e8b0a8;
    --accent:#ff9a5c; --male:#7a6ae0; --female:#ff6f9f;
    --acc-1:rgba(255,154,92,.18); --acc-2:rgba(255,154,92,.32);
    --acc-b:rgba(255,154,92,.50); --acc-text:#ffd0b0;
    --shadow:rgba(0,0,0,.45);
    --logo:linear-gradient(140deg,#ffb066,#ff6f9f 55%,#8a6ae0);
    --logo-glow:rgba(255,176,102,.42);
  }
  [data-theme=mono]{
    --bg1:#0c0c0e; --bg2:#1c1c20;
    --panel:rgba(24,24,28,.84);
    --border:rgba(255,255,255,.14);
    --text:#f2f2f4; --muted:#9a9aa4;
    --accent:#ffffff; --male:#8fa8d8; --female:#d8a0c0;
    --soft:rgba(255,255,255,.06); --hover:rgba(255,255,255,.12);
    --hover-b:rgba(255,255,255,.30); --scroll:rgba(255,255,255,.24);
    --acc-1:rgba(255,255,255,.12); --acc-2:rgba(255,255,255,.22);
    --acc-b:rgba(255,255,255,.45); --acc-text:#ffffff;
    --shadow:rgba(0,0,0,.5);
    --logo:linear-gradient(140deg,#ffffff,#b8b8c0 55%,#6a6a74);
    --logo-glow:rgba(255,255,255,.32);
  }
  [data-theme=ru]{
    --bg1:#0c1a34; --bg2:#16305a;
    --panel:rgba(10,22,44,.84); --border:rgba(120,160,255,.20);
    --text:#eaf0ff; --muted:#9db4d8;
    --accent:#6f9fff; --male:#5b8def; --female:#ef7fa8;
    --soft:rgba(120,160,255,.07); --hover:rgba(120,160,255,.13);
    --hover-b:rgba(120,160,255,.28); --scroll:rgba(120,160,255,.24);
    --acc-1:rgba(111,159,255,.16); --acc-2:rgba(111,159,255,.30);
    --acc-b:rgba(111,159,255,.50); --acc-text:#c8daff;
    --shadow:rgba(0,0,0,.45);
    --logo:linear-gradient(140deg,#ffffff,#0039a6 55%,#d52b1e);
    --logo-glow:rgba(90,130,255,.40);
  }
  [data-theme=fr]{
    --bg1:#0a1430; --bg2:#142450;
    --panel:rgba(8,16,38,.84); --border:rgba(110,150,240,.20);
    --text:#eaf0ff; --muted:#9daac8;
    --accent:#7f9dff; --male:#5b8def; --female:#e85a70;
    --soft:rgba(110,150,240,.07); --hover:rgba(110,150,240,.13);
    --hover-b:rgba(110,150,240,.28); --scroll:rgba(110,150,240,.24);
    --acc-1:rgba(127,157,255,.16); --acc-2:rgba(127,157,255,.30);
    --acc-b:rgba(127,157,255,.50); --acc-text:#ccdbff;
    --shadow:rgba(0,0,0,.45);
    --logo:linear-gradient(140deg,#002395,#ffffff 55%,#ed2939);
    --logo-glow:rgba(90,120,240,.38);
  }
  [data-theme=it]{
    --bg1:#0a2014; --bg2:#143420;
    --panel:rgba(8,26,16,.84); --border:rgba(140,220,160,.18);
    --text:#eefaf0; --muted:#9ac8a4;
    --accent:#5ad07a; --male:#4f9f6a; --female:#e0707a;
    --soft:rgba(140,220,160,.06); --hover:rgba(140,220,160,.12);
    --hover-b:rgba(140,220,160,.26); --scroll:rgba(140,220,160,.22);
    --acc-1:rgba(90,208,122,.14); --acc-2:rgba(90,208,122,.26);
    --acc-b:rgba(90,208,122,.45); --acc-text:#c8f2d4;
    --shadow:rgba(0,0,0,.45);
    --logo:linear-gradient(140deg,#009246,#ffffff 55%,#ce2b37);
    --logo-glow:rgba(90,208,122,.38);
  }
  [data-theme=de]{
    --bg1:#141418; --bg2:#232328;
    --panel:rgba(20,20,24,.85); --border:rgba(232,185,58,.18);
    --text:#f4f2ee; --muted:#b0aa98;
    --accent:#e8b93a; --male:#8fa8d8; --female:#d8a0b8;
    --soft:rgba(232,185,58,.06); --hover:rgba(232,185,58,.12);
    --hover-b:rgba(232,185,58,.26); --scroll:rgba(232,185,58,.22);
    --acc-1:rgba(232,185,58,.14); --acc-2:rgba(232,185,58,.26);
    --acc-b:rgba(232,185,58,.48); --acc-text:#ffe6a8;
    --shadow:rgba(0,0,0,.5);
    --logo:linear-gradient(140deg,#000000,#dd0000 55%,#ffce00);
    --logo-glow:rgba(232,185,58,.36);
  }
  [data-theme=jp]{
    --bg1:#f4f0ee; --bg2:#ffffff;
    --panel:rgba(255,255,255,.90); --border:rgba(180,60,70,.18);
    --text:#241a1c; --muted:#7a6064;
    --accent:#d83a4a; --male:#4a6fb5; --female:#d8557a;
    --soft:rgba(180,60,70,.05); --hover:rgba(180,60,70,.09);
    --hover-b:rgba(180,60,70,.22); --scroll:rgba(180,60,70,.20);
    --acc-1:rgba(216,58,74,.12); --acc-2:rgba(216,58,74,.24);
    --acc-b:rgba(216,58,74,.45); --acc-text:#8f1f2c;
    --shadow:rgba(60,20,30,.16);
    --logo:linear-gradient(140deg,#ffffff,#f0d0d4 55%,#d83a4a);
    --logo-glow:rgba(216,58,74,.35);
  }
  [data-theme=gb]{
    --bg1:#0c1424; --bg2:#182438;
    --panel:rgba(10,16,30,.85); --border:rgba(206,51,80,.20);
    --text:#eef2fa; --muted:#9aa8bc;
    --accent:#ff6b7a; --male:#5b7fd0; --female:#e88aa8;
    --soft:rgba(206,51,80,.06); --hover:rgba(206,51,80,.12);
    --hover-b:rgba(206,51,80,.26); --scroll:rgba(206,51,80,.22);
    --acc-1:rgba(255,107,122,.14); --acc-2:rgba(255,107,122,.26);
    --acc-b:rgba(255,107,122,.48); --acc-text:#ffc8ce;
    --shadow:rgba(0,0,0,.45);
    --logo:linear-gradient(140deg,#012169,#ffffff 55%,#C8102E);
    --logo-glow:rgba(206,51,80,.38);
  }
  [data-theme=us]{
    --bg1:#0c1830; --bg2:#162848;
    --panel:rgba(8,18,40,.84); --border:rgba(120,150,230,.20);
    --text:#eaf0ff; --muted:#9daac8;
    --accent:#7fa8ff; --male:#5b8def; --female:#e86a7a;
    --soft:rgba(120,150,230,.07); --hover:rgba(120,150,230,.13);
    --hover-b:rgba(120,150,230,.28); --scroll:rgba(120,150,230,.24);
    --acc-1:rgba(127,168,255,.16); --acc-2:rgba(127,168,255,.30);
    --acc-b:rgba(127,168,255,.50); --acc-text:#ccddff;
    --shadow:rgba(0,0,0,.45);
    --logo:linear-gradient(140deg,#B22234,#ffffff 55%,#3C3B6E);
    --logo-glow:rgba(100,130,230,.38);
  }
  .tSep{
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
    padding:9px 10px 5px;border-top:1px solid var(--border);margin-top:5px;
  }
  html,body{height:100%;overflow:hidden}
  body{
    font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
    background:radial-gradient(1200px 800px at 50% 30%,var(--bg2),var(--bg1) 70%);
    color:var(--text);
  }
  #scene{position:fixed;inset:0;display:block}
  .glass{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 10px 40px var(--shadow);
  }
  /* ---------- top bar ---------- */
  #topbar{
    position:fixed;top:12px;left:12px;right:12px;height:54px;
    display:flex;align-items:center;gap:12px;padding:0 14px;z-index:20;
  }
  #brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
  #brand .logo{
    width:30px;height:30px;border-radius:9px;
    background:var(--logo);
    box-shadow:0 0 18px var(--logo-glow);
  }
  #brand b{font-size:15px;letter-spacing:.2px}
  #brand span{display:block;font-size:11px;color:var(--muted)}
  .btn{
    border:1px solid var(--border);background:var(--soft);
    color:var(--text);padding:8px 12px;border-radius:10px;font-size:13px;
    cursor:pointer;transition:.18s;white-space:nowrap;font-family:inherit;
  }
  .btn:hover{background:var(--hover);border-color:var(--hover-b)}
  .btn:disabled{opacity:.35;cursor:default}
  .btn.accent{background:var(--acc-1);border-color:var(--acc-b);color:var(--acc-text)}
  .btn.accent:hover{background:var(--acc-2)}
  .icon{font-size:15px;line-height:1}
  #searchWrap{position:relative;flex:1;max-width:330px;margin-left:auto}
  #search{
    width:100%;padding:9px 12px 9px 34px;border-radius:10px;font-size:13px;
    background:var(--soft);border:1px solid var(--border);color:var(--text);
    outline:none;font-family:inherit;
  }
  #search:focus{border-color:var(--acc-b);background:var(--hover)}
  #search::placeholder{color:var(--muted)}
  #searchWrap .si{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px}
  #results{
    position:absolute;top:44px;left:0;right:0;max-height:320px;overflow:auto;
    display:none;padding:6px;z-index:40;
  }
  #results.open{display:block}
  .res{
    padding:9px 11px;border-radius:9px;cursor:pointer;font-size:13px;
    display:flex;justify-content:space-between;gap:10px;
  }
  .res:hover{background:var(--acc-1)}
  .res i{font-style:normal;color:var(--muted);font-size:12px}
  .res .st{color:#ffd166;margin-right:6px}
  .resHead{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7f8fb5;padding:7px 11px 3px}
  /* ---------- меню тем ---------- */
  /* ---------- блочное меню (Файл / Действие / Настройки / Справка) ---------- */
  #menus{display:flex;align-items:center;gap:8px}
  .menu{position:relative}
  .mBtn{font-weight:600}
  .mPop{
    position:absolute;top:calc(100% + 9px);left:0;display:none;
    padding:6px;min-width:258px;z-index:70;
  }
  .menu.open .mPop{display:block}
  .mHead{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px}
  .mItem{
    display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;
    cursor:pointer;font-size:13px;color:var(--text);transition:.15s;
  }
  .mItem:hover{background:var(--hover)}
  .mItem.danger{color:#ff8f9b}
  .mItem.danger:hover{background:rgba(255,90,110,.12)}
  .mTag{
    margin-left:auto;font-size:10.5px;color:var(--muted);border:1px solid var(--border);
    border-radius:6px;padding:1px 6px;flex:0 0 auto;
  }
  .mArrow{margin-left:auto;color:var(--muted);font-size:12px}
  .mSep{height:1px;background:var(--border);margin:5px 6px}
  #themeMenu{
    position:absolute;top:4px;left:calc(100% + 6px);display:none;padding:6px;z-index:80;min-width:178px;
    max-height:calc(100vh - 90px);overflow-y:auto;
  }
  #themeMenu::-webkit-scrollbar{width:8px}
  #themeMenu::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px}
  #themeMenu.open{display:block}
  .tItem{
    display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
    cursor:pointer;font-size:13px;color:var(--text);transition:.15s;
  }
  .tItem:hover{background:var(--hover)}
  .tItem.on{background:var(--acc-1);color:var(--acc-text);font-weight:600}
  .tSw{width:17px;height:17px;border-radius:6px;flex:0 0 auto;border:1px solid var(--border)}
  /* ---------- side panel ---------- */
  #panel{
    position:fixed;top:78px;right:12px;width:308px;bottom:96px;z-index:15;
    padding:16px;overflow-y:auto;
  }
  #panel.hidden{display:none}
  #panel::-webkit-scrollbar{width:8px}
  #panel::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px}
  .phead{display:flex;gap:12px;align-items:center;margin-bottom:14px}
  .favBtn{
    margin-left:auto;align-self:flex-start;background:none;border:none;cursor:pointer;
    font-size:19px;line-height:1;color:#7f8fb5;padding:2px 4px;border-radius:8px;
  }
  .favBtn:hover{background:var(--hover)}
  .favBtn.on{color:#ffd166}
  .avatar{
    width:52px;height:52px;border-radius:50%;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px;color:#0b1020;
  }
  .avatar.m{background:linear-gradient(150deg,#8fb6ff,var(--male))}
  .avatar.f{background:linear-gradient(150deg,#ffb3cd,var(--female))}
  .phead h2{font-size:16px;line-height:1.25}
  .phead p{font-size:12px;color:var(--muted);margin-top:3px}
  .badge{display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:20px;margin-top:5px;
    background:var(--soft);border:1px solid var(--border);color:var(--muted)}
  .badge.dead{color:#c8d2ea;background:rgba(120,140,190,.14)}
  .sec{margin-top:13px}
  .sec h3{
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7f8fb5;margin-bottom:7px;
  }
  .chips{display:flex;flex-wrap:wrap;gap:6px}
  .chip{
    border:1px solid var(--border);background:var(--soft);color:var(--text);
    padding:6px 10px;border-radius:9px;font-size:12.5px;cursor:pointer;transition:.15s;font-family:inherit;
  }
  .chip:hover{background:rgba(91,141,239,.25);border-color:rgba(91,141,239,.55)}
  .chip.f:hover{background:rgba(239,127,168,.22);border-color:rgba(239,127,168,.5)}
  .none{font-size:12.5px;color:var(--muted);font-style:italic}
  .stats{display:flex;gap:8px;margin-top:12px}
  .stat{flex:1;background:var(--soft);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
  .stat b{display:block;font-size:16px}
  .stat span{font-size:10.5px;color:var(--muted)}
  .pactions{display:flex;gap:8px;margin-top:14px}
  .pactions .btn{flex:1;text-align:center}
  /* ---------- фото ---------- */
  .avatar{overflow:hidden;padding:0}
  .avatar img{width:100%;height:100%;object-fit:cover;display:block}
  .phRow{display:flex;gap:12px;align-items:center}
  .phImg{
    width:74px;height:74px;border-radius:50%;flex:0 0 auto;overflow:hidden;
    border:2px solid var(--hover-b);background:var(--soft);
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-size:10.5px;color:var(--muted);line-height:1.3;
  }
  .phImg img{width:100%;height:100%;object-fit:cover;display:block}
  .phBtns{display:flex;flex-direction:column;gap:6px;flex:1}
  .phBtns .btn{text-align:center;padding:7px 10px;font-size:12.5px}
  .eraLine{margin-top:8px;font-size:12px;color:var(--muted)}
  .eraLine b{color:var(--accent);font-weight:600}
  #toast{
    position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:75;
    background:var(--panel);border:1px solid var(--acc-b);color:var(--acc-text);
    padding:9px 18px;border-radius:11px;font-size:13px;opacity:0;transition:.3s;pointer-events:none;
    box-shadow:0 8px 30px var(--shadow);
  }
  #toast.show{opacity:1}
  /* ---------- legend / hint ---------- */
  #legend{position:fixed;left:12px;bottom:12px;z-index:15;padding:11px 14px;font-size:12px}
  #legend div{display:flex;align-items:center;gap:8px;margin:4px 0;color:var(--muted)}
  .dot{width:11px;height:11px;border-radius:50%;display:inline-block}
  #hint{
    position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:15;
    padding:9px 16px;font-size:12px;color:var(--muted);white-space:nowrap;
  }
  #hint b{color:#cfdaf5;font-weight:600}
  /* ---------- виньетка ---------- */
  #vignette{
    position:fixed;inset:0;pointer-events:none;z-index:5;
    background:radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 52%, rgba(4,8,18,.20) 82%, rgba(4,8,18,.38) 100%);
  }
  /* ---------- minimap ---------- */
  #minimap{
    position:fixed;right:330px;bottom:64px;z-index:15;padding:8px 8px 6px;
    cursor:crosshair;user-select:none;
  }
  #minimap.hidden{display:none}
  #minimap .mmT{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7f8fb5;margin:0 0 5px 2px}
  #mmCanvas{display:block;border-radius:10px;background:rgba(10,16,28,.42)}
  /* ---------- навигатор поколений ---------- */
  #genNav{
    position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:15;
    display:flex;flex-direction:column;gap:5px;padding:9px;
  }
  #genNav button{
    width:42px;height:26px;border-radius:8px;border:1px solid var(--border);
    background:rgba(10,16,28,.42);color:#cfdaf5;font-size:11px;cursor:pointer;
  }
  #genNav button:hover{background:rgba(120,160,255,.22)}
  #genNav button.on{background:var(--accent);color:#fff;border-color:transparent}
  @media(max-width:820px){#minimap{right:262px;bottom:12px}}
  /* ---------- modal ---------- */
  #modal{
    position:fixed;inset:0;background:rgba(3,6,14,.72);z-index:60;
    display:none;align-items:center;justify-content:center;padding:20px;
  }
  #modal.open{display:flex}
  #modalBox{width:min(760px,96vw);max-height:90vh;display:flex;flex-direction:column;padding:18px}
  #modalBox h2{font-size:16px;margin-bottom:4px}
  #modalBox p{font-size:12.5px;color:var(--muted);margin-bottom:12px;line-height:1.5}
  #json{
    width:100%;height:46vh;resize:none;border-radius:11px;padding:12px;font-size:12.5px;
    background:rgba(0,0,0,.35);border:1px solid var(--border);color:#d7e1f7;outline:none;
    font-family:Consolas,"Courier New",monospace;line-height:1.45;
  }
  #json:focus{border-color:var(--acc-b)}
  #modalErr{color:#ff9aa8;font-size:12px;min-height:16px;margin-top:6px}
  #modalBtns{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}
  .modalBtns{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}
  /* ---------- информационная модалка (справка, версия, автор, вход) ---------- */
  #infoModal{
    position:fixed;inset:0;background:rgba(3,6,14,.72);z-index:65;
    display:none;align-items:center;justify-content:center;padding:20px;
  }
  #infoModal.open{display:flex}
  #infoBox{width:min(560px,96vw);max-height:86vh;overflow-y:auto;padding:18px}
  #infoBox h2{font-size:16px;margin-bottom:10px}
  #infoBody{font-size:13px;line-height:1.62;color:var(--text)}
  #infoBody b{color:#cfdaf5}
  #infoBody ul{margin:8px 0;padding-left:18px}
  #infoBody li{margin:5px 0}
  #infoBody .kv{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--border);padding:7px 0;font-size:12.5px}
  #infoBody .kv span:last-child{color:var(--muted)}
  #infoBody .joke{color:var(--muted);font-style:italic;margin:6px 0}
  #infoBody .warn{color:#ff9aa8}
  /* ---------- person editor ---------- */
  .btn.danger{color:#ff9aa8;border-color:rgba(255,120,140,.35)}
  .btn.danger:hover{background:rgba(255,90,110,.14);border-color:rgba(255,120,140,.6)}
  .sec h3{display:flex;align-items:center;gap:6px}
  .miniAdd{
    border:1px solid var(--border);background:var(--soft);color:var(--accent);
    min-width:18px;height:18px;border-radius:6px;font-size:11px;line-height:1;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;padding:0 4px;font-family:inherit;
  }
  .miniAdd:hover{background:rgba(91,141,239,.25);border-color:rgba(91,141,239,.55)}
  #personModal{
    position:fixed;inset:0;background:rgba(3,6,14,.72);z-index:66;
    display:none;align-items:center;justify-content:center;padding:20px;
  }
  #personModal.open{display:flex}
  #personBox{width:min(640px,96vw);max-height:90vh;overflow-y:auto;padding:18px}
  #personBox h2{font-size:16px;margin-bottom:12px}
  .formGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
  .field{display:flex;flex-direction:column;gap:5px;font-size:10.5px;letter-spacing:.09em;
    text-transform:uppercase;color:#7f8fb5}
  .field.full{grid-column:1 / -1}
  .field input,.field select{
    width:100%;border-radius:9px;padding:8px 10px;font-size:13px;font-family:inherit;
    background:rgba(0,0,0,.30);border:1px solid var(--border);color:var(--text);outline:none;
  }
  .field input:focus,.field select:focus{border-color:var(--acc-b)}
  .field select option{background:#111a30;color:var(--text)}
  .relBox{display:flex;flex-wrap:wrap;gap:6px;max-height:118px;overflow-y:auto;
    padding:9px;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,.22);
    text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--text)}
  .relChip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:20px;
    background:var(--soft);border:1px solid var(--border);cursor:pointer;font-size:12.5px}
  .relChip:hover{border-color:var(--acc-b)}
  .relChip input{accent-color:var(--accent);margin:0}
  #personErr{color:#ff9aa8;font-size:12px;min-height:16px;margin-top:8px}
  /* ---------- list of people ---------- */
  #listModal{
    position:fixed;inset:0;background:rgba(3,6,14,.72);z-index:64;
    display:none;align-items:center;justify-content:center;padding:20px;
  }
  #listModal.open{display:flex}
  #listBox{width:min(820px,96vw);max-height:88vh;display:flex;flex-direction:column;padding:18px}
  #listBox h2{font-size:16px;margin-bottom:10px}
  #listSearch{
    width:100%;border-radius:9px;padding:8px 12px;font-size:13px;font-family:inherit;
    background:rgba(0,0,0,.30);border:1px solid var(--border);color:var(--text);outline:none;margin-bottom:10px;
  }
  #listSearch:focus{border-color:var(--acc-b)}
  /* ---------- карта мира ---------- */
  #mapModal{
    position:fixed;inset:0;background:rgba(3,6,14,.72);z-index:64;
    display:none;align-items:center;justify-content:center;padding:20px;
  }
  #mapModal.open{display:flex}
  #mapBox{width:min(1560px,96vw);max-height:94vh;display:flex;flex-direction:column;padding:18px}
  #mapBox h2{font-size:16px;margin-bottom:10px}
  #mapFilters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;align-items:center}
  #mapStats{font-size:11.5px;color:var(--muted);margin-bottom:8px}
  #worldMap{
    display:block;margin:0 auto;max-width:100%;max-height:calc(90vh - 245px);
    border-radius:10px;cursor:pointer;flex:0 1 auto;
  }
  /* поиск города на карте/глобусе */
  #mapSearchWrap,#globeSearchWrap{position:relative;flex:0 1 270px;min-width:200px}
  #mapCity,#globeCity{
    width:100%;padding:8px 10px 8px 30px;border-radius:10px;font-size:13px;font-family:inherit;
    background:var(--soft);border:1px solid var(--border);color:var(--text);outline:none;
  }
  #mapCity:focus,#globeCity:focus{border-color:var(--acc-b);background:var(--hover)}
  #mapCity::placeholder,#globeCity::placeholder{color:var(--muted)}
  #mapSearchWrap .si,#globeSearchWrap .si{
    position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);
    font-size:13px;pointer-events:none;
  }
  #mapCityRes,#globeCityRes{
    position:absolute;top:42px;left:0;right:0;max-height:270px;overflow:auto;
    display:none;padding:5px;z-index:30;
  }
  #mapCityRes.open,#globeCityRes.open{display:block}
  #globeTools{display:flex;align-items:center;gap:10px;margin-bottom:9px}
  #globeTools .gHint{font-size:11.5px;color:var(--muted)}
  /* ---------- глобус ---------- */
  #globeModal{
    position:fixed;inset:0;background:rgba(3,6,14,.72);z-index:64;
    display:none;align-items:center;justify-content:center;padding:20px;
  }
  #globeModal.open{display:flex}
  #globeBox{width:min(1340px,96vw);max-height:94vh;display:flex;flex-direction:column;padding:18px}
  #globeBox h2{font-size:16px;margin-bottom:10px}
  #globeStage{position:relative;width:100%;height:min(70vh,660px)}
  #globeCanvas{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;display:block;background:#04070f;cursor:grab}
  #globeOv{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;pointer-events:none;display:block}
  /* ---------- регистрация / запросы доступа ---------- */
  #regModal, #reqModal, #loginModal, #delModal, #admLoginModal, #admModal, #admEditModal, #admLogModal, #regWayModal, #regMailModal, #passRecModal{
    position:fixed;inset:0;background:rgba(3,6,14,.72);z-index:66;
    display:none;align-items:center;justify-content:center;padding:20px;
  }
  #regModal.open, #reqModal.open, #loginModal.open, #delModal.open, #admLoginModal.open, #admModal.open, #admEditModal.open, #admLogModal.open, #regWayModal.open, #regMailModal.open, #passRecModal.open{display:flex}
  #regBox, #reqBox, #loginBox, #delBox, #admLoginBox, #admBox, #admEditBox, #admLogBox, #regWayBox, #regMailBox, #passRecBox{width:min(620px,96vw);max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;padding:18px}
  #admBox{width:min(760px,96vw)}
  #admBox h3{margin:12px 0 6px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
  #admBadge{display:none;align-self:center;padding:3px 9px;border-radius:9px;background:rgba(214,69,69,.88);color:#fff;font-size:10px;font-weight:700;letter-spacing:.7px;cursor:pointer;user-select:none}
  #admBadge.on{display:inline-block}
  #regBox h2, #reqBox h2, #loginBox h2{font-size:16px;margin-bottom:12px}
  #regErr, #loginErr{color:#ff8a8a;font-size:12px;min-height:16px;margin:6px 2px}
  .reqRow{
    display:flex;align-items:center;gap:10px;justify-content:space-between;
    padding:9px 10px;border-bottom:1px dashed var(--border);font-size:12.5px;
  }
  .reqRow .rqT{color:var(--muted);font-size:11px}
  .reqTag{font-size:10.5px;padding:2px 8px;border-radius:999px;background:var(--acc-1);color:var(--acc-text);white-space:nowrap}
  .reqTag.wait{background:rgba(217,164,65,.22);color:#e8c27a}
  .reqTag.ok{background:rgba(88,214,141,.2);color:#7fe0a8}
  .reqTag.no{background:rgba(255,106,106,.18);color:#ff9a9a}
  #listStats{font-size:11.5px;color:var(--muted);margin:-4px 0 8px}
  #personErr.warnline{color:#ffcf8a}
  /* ---------- context menu ---------- */
  #ctxMenu{position:fixed;z-index:70;display:none;min-width:188px;padding:6px;border-radius:12px}
  #ctxMenu.open{display:block}
  .ctxHead{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7f8fb5;padding:6px 10px 4px}
  .ctxItem{padding:8px 10px;border-radius:9px;font-size:12.5px;cursor:pointer;color:var(--text)}
  .ctxItem:hover{background:var(--hover)}
  #listBody{overflow-y:auto;flex:1}
  #listBody::-webkit-scrollbar{width:8px}
  #listBody::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px}
  .pTable{width:100%;border-collapse:collapse;font-size:12.5px}
  .pTable th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#7f8fb5;
    padding:6px 8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel)}
  .pTable td{padding:7px 8px;border-bottom:1px dashed var(--border);color:var(--text);vertical-align:middle}
  .pTable tr:hover td{background:rgba(91,141,239,.08)}
  .pTable .pSex{font-size:11.5px;color:var(--muted)}
  .pTable .pYears{color:var(--muted);white-space:nowrap}
  .pTable .pRel{color:var(--muted);font-size:11.5px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pTable .pAct{white-space:nowrap;text-align:right}
  .pTable .pAct .btn{padding:4px 9px;font-size:11.5px;margin-left:4px}
  /* ---------- loading ---------- */
  #loading{
    position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:14px;
    background:radial-gradient(900px 600px at 50% 40%,#0e1730,#070b16);
    font-size:13.5px;color:var(--muted);text-align:center;padding:20px;
  }
  .spin{
    width:38px;height:38px;border-radius:50%;
    border:3px solid var(--hover);border-top-color:var(--accent);
    animation:sp 1s linear infinite;
  }
  @keyframes sp{to{transform:rotate(360deg)}}
  #dbgout{
    position:fixed;top:74px;left:12px;z-index:70;display:none;margin:0;padding:9px 11px;
    font:11.5px/1.5 Consolas,monospace;color:#9fe8b0;background:rgba(0,0,0,.72);
    border:1px solid var(--scroll);border-radius:9px;white-space:pre-wrap;max-width:520px;
  }
  @media (max-width:820px){
    #panel{width:250px;bottom:80px}
    #hint{display:none}
    #brand span{display:none}
  }