/* Шрифт берём только системный. Раньше здесь был @import шрифта Inter с Google Fonts — а это
   блокирующий запрос к чужому серверу ПЕРЕД первой отрисовкой страницы: браузер должен скачать
   этот css, разобрать его, только потом пойти за шрифтом, и лишь тогда показать текст. На iPhone
   и MacBook шрифт при этом даже не использовался (стек начинается с -apple-system), но всё равно
   качался. Segoe UI (Windows) и Roboto (Android) уже есть на устройстве — ноль запросов, ноль
   ожидания, и сайт полностью работает без интернета. */
:root{--bg:#000000;--s1:#1c1c1e;--s2:#2c2c2e;--bd:rgba(255,255,255,.11);--ac:#0a84ff;--ac2:#409cff;--grn:#30d158;--red:#ff453a;--gld:#ff9f0a;--pk:#ff375f;--tx:#f5f5f7;--tx2:rgba(235,235,245,.6);--tx3:rgba(235,235,245,.36);--tx-strong:rgba(245,245,247,.88);--sbthumb:#48484a;--sbthumb-h:#5a5a5c;--tabon:#48484a;--bhover:#3a3a3c;--bhoverbd:rgba(255,255,255,.18);--sphoverbg:#333335;--cpring:#fff;--cidot:rgba(255,255,255,.09);--cistroke:rgba(235,235,245,.42);--aliveb:#0f2418;--avring:rgba(255,255,255,.15);--noavbg:rgba(255,255,255,.05);--noavbd:rgba(255,255,255,.1);--noavfg:rgba(255,255,255,.28);--zchoverbd:rgba(255,255,255,.2);--uslihoverbg:#3a3a3c;--uslideadbg:rgba(255,255,255,.08);--dotc:rgba(255,255,255,.08);--glow1:rgba(10,132,255,.08);--glow2:rgba(191,90,242,.06);--topbg:rgba(28,28,30,.85)}
[data-theme="light"]{--bg:#f2f2f7;--s1:#ffffff;--s2:#ffffff;--bd:rgba(0,0,0,.12);--ac:#0a84ff;--ac2:#0068d6;--grn:#248a3d;--red:#d70015;--gld:#b25000;--pk:#d70048;--tx:#1c1c1e;--tx2:rgba(60,60,67,.6);--tx3:rgba(60,60,67,.4);--tx-strong:#1c1c1e;--sbthumb:#c7c7cc;--sbthumb-h:#aeaeb2;--tabon:#e5e5ea;--bhover:#e5e5ea;--bhoverbd:rgba(0,0,0,.18);--sphoverbg:#e5e5ea;--cpring:#000;--cidot:rgba(0,0,0,.06);--cistroke:rgba(60,60,67,.38);--aliveb:#e7f7ec;--avring:rgba(0,0,0,.12);--noavbg:rgba(0,0,0,.04);--noavbd:rgba(0,0,0,.1);--noavfg:rgba(0,0,0,.28);--zchoverbd:rgba(0,0,0,.2);--uslihoverbg:#e5e5ea;--uslideadbg:rgba(0,0,0,.06);--dotc:rgba(0,0,0,.05);--glow1:rgba(10,132,255,.06);--glow2:rgba(191,90,242,.05);--topbg:rgba(255,255,255,.85)}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark;font-size:100%}
html[data-theme="light"]{color-scheme:light}
html[data-scale="lg"]{font-size:115%}
html[data-scale="xl"]{font-size:130%}
*{scrollbar-color:var(--sbthumb) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sbthumb);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--sbthumb-h);background-clip:padding-box}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,system-ui,sans-serif;color:var(--tx);height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle,var(--dotc) 1.4px,transparent 1.4px) 0 0/28px 28px,
    radial-gradient(ellipse 900px 620px at 12% -8%,var(--glow1),transparent 60%),
    radial-gradient(ellipse 900px 700px at 100% 108%,var(--glow2),transparent 60%),
    var(--bg);
  background-attachment:fixed}
/* TOPBAR */
.top{background:var(--topbg);backdrop-filter:none;border-bottom:1px solid var(--bd);padding:12px 20px;display:flex;align-items:center;gap:14px;flex-shrink:0;z-index:50}
.top h1{font-size:1em;font-weight:600;color:var(--tx);letter-spacing:-.01em}
.tabs{display:flex;gap:4px;margin-left:16px;background:var(--s2);padding:3px;border-radius:9px;position:relative}
.tab-thumb{position:absolute;top:3px;left:0;bottom:3px;background:var(--tabon);border-radius:7px;transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);z-index:0}
.tab{padding:6px 16px;border-radius:7px;cursor:pointer;font-size:.82em;font-weight:500;color:var(--tx2);background:none;border:none;transition:color .2s ease;position:relative;z-index:1}
.tab:hover{color:var(--tx)}
.tab.on{color:var(--tx)}
.top .acts{margin-left:auto;display:flex;gap:8px}
.b{min-height:32px;padding:6px 14px;border-radius:8px;cursor:pointer;font-size:.8em;font-weight:500;border:1px solid var(--bd);background:var(--s2);color:var(--tx);transition:.2s ease;box-sizing:border-box;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.top .acts>*{flex-shrink:0}
.b:hover{background:var(--bhover);border-color:var(--bhoverbd)}
.b.p{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:600}
.b.p:hover{background:var(--ac2);border-color:var(--ac2)}
.b.d{border-color:transparent;color:var(--red);background:transparent}.b.d:hover{background:rgba(255,69,58,.12)}
/* Индикатор синхронизации с сервером. Раньше о неудачной отправке узнавала только консоль
   разработчика: человек продолжал работать в уверенности, что всё сохранено, а правки лежали
   только в его браузере. Теперь состояние всегда на виду, а по нажатию можно отправить сейчас
   или повторить после ошибки. */
.sync-badge{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:6px 12px;border-radius:8px;border:1px solid var(--bd);background:var(--s2);color:var(--tx2);font-size:.78em;font-weight:500;font-family:inherit;cursor:pointer;transition:.2s ease;flex-shrink:0;box-sizing:border-box}
.sync-badge:hover{background:var(--bhover);border-color:var(--bhoverbd)}
.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--grn);flex-shrink:0;transition:background .2s}
.sync-badge.pending .sync-dot,.sync-badge.saving .sync-dot{background:var(--gld);animation:syncPulse 1.1s ease-in-out infinite}
.sync-badge.error{border-color:var(--red);color:var(--red);background:rgba(255,69,58,.1)}
.sync-badge.error .sync-dot{background:var(--red);animation:none}
@keyframes syncPulse{0%,100%{opacity:1}50%{opacity:.25}}
/* MAIN */
.mn{flex:1;display:flex;overflow:hidden}
.pv{display:none;flex:1;overflow:hidden}.pv.on{display:flex}
/* LIST */
.plist{width:var(--plist-w,280px);border-right:1px solid var(--bd);overflow-y:auto;background:var(--s1);flex-shrink:0}
.plist-resizer{width:5px;margin-left:-3px;flex-shrink:0;cursor:col-resize;position:relative;z-index:5}
.plist-resizer::after{content:'';position:absolute;top:0;bottom:0;left:2px;width:1px;background:transparent;transition:background .15s}
.plist-resizer:hover::after,.plist-resizer.active::after{background:var(--ac)}
.lh{padding:14px 14px 10px}
.lh input{width:100%;padding:8px 12px;border-radius:9px;border:1px solid transparent;background:var(--s2);color:var(--tx);font-size:.82em;outline:none;transition:.2s}
.lh input:focus{border-color:var(--ac)}
.li{padding:10px 14px;cursor:pointer;border-radius:10px;margin:2px 8px;display:flex;align-items:center;gap:10px;transition:.15s ease}
.li:hover{background:var(--s2)}.li.sel{background:var(--ac)}
.la{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--s2);display:flex;align-items:center;justify-content:center;border:1px solid var(--bd)}
.la img{width:100%;height:100%;object-fit:cover}
.la span{font-size:.7em;color:var(--tx3);font-weight:600}
.ln{font-size:.84em;font-weight:500;letter-spacing:-.005em}.lr{font-size:.72em;color:var(--tx3);margin-top:1px}
.li.sel .ln{color:#fff}.li.sel .lr{color:rgba(255,255,255,.75)}
/* DETAIL */
.det{flex:1;overflow-y:auto;padding:32px 40px}
#eF{max-width:600px;margin:0 auto}
.de{display:flex;align-items:center;justify-content:center;height:100%;color:var(--tx3);font-size:.9em}
.sc{margin-bottom:28px}
.st{font-size:.7em;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.st svg,.tab svg,.b svg{flex-shrink:0;vertical-align:-2px}
.f{margin-bottom:12px}
.f label{display:block;font-size:.76em;font-weight:500;color:var(--tx2);margin-bottom:5px}
.f input,.f select,.f textarea{width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--bd);background:var(--s2);color:var(--tx);font-size:.85em;font-family:inherit;outline:none;transition:border-color .2s}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ac)}
.f input[readonly]{color:var(--tx2);background:var(--s1)}
.f textarea{resize:vertical;min-height:60px;line-height:1.5}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.dr{display:grid;grid-template-columns:65px 100px 80px;gap:6px}
.dq{width:140px;letter-spacing:.04em}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--s1);color:var(--tx);border:1px solid var(--bd);border-radius:10px;padding:10px 18px;font-size:.82em;box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:300}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:var(--red);color:var(--red)}
.mic-btn{margin-left:auto;cursor:pointer;color:var(--tx3);display:inline-flex;align-items:center;padding:2px 4px;border-radius:6px;transition:.15s}
.mic-btn:hover{color:var(--ac2);background:var(--s2)}
.mic-btn.rec{color:var(--red)}
.mic-btn.rec svg{animation:micPulse 1s ease-in-out infinite}
@keyframes micPulse{0%,100%{opacity:1}50%{opacity:.35}}
.dr select,.dr input{padding:7px 5px;font-size:.8em}
.dn{font-size:1.3em;font-weight:600;color:var(--tx);margin-bottom:20px;display:flex;align-items:center;gap:9px;letter-spacing:-.015em}
.save-btn{border:none;border-radius:8px;padding:6px 13px;font-size:.62em;font-weight:600;background:var(--s2);color:var(--tx3);cursor:default;transition:.2s;flex-shrink:0;letter-spacing:0}
.save-btn.dirty{background:var(--ac);color:#fff;cursor:pointer}
.save-btn.dirty:hover{background:var(--ac2)}
.save-btn.saved-flash{background:var(--grn)!important;color:#fff}
/* Held invisible for the first fraction of a second: the data usually arrives faster than anyone
   could read a spinner, and flashing one up for 100ms just looks like a glitch. If loading really
   does take a while it fades in as before. Hiding it (display:none) cancels the animation, so a
   quick load never shows it at all. */
.loadm{display:flex;position:fixed;z-index:400;inset:0;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--tx3);font-size:.86em;
  opacity:0;animation:loadAppear .25s ease-out .28s forwards}
@keyframes loadAppear{to{opacity:1}}
.loadm-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--bd);border-top-color:var(--ac);animation:loadSpin .8s linear infinite}
@keyframes loadSpin{to{transform:rotate(360deg)}}
.loginm{display:none;position:fixed;z-index:300;inset:0;background:var(--bg);align-items:center;justify-content:center;padding:20px}
.loginm-card{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--tx3)}
.loginm-card h2{color:var(--tx);font-size:1.3em;font-weight:600;letter-spacing:-.015em;margin-top:4px}
.loginm-card p{font-size:.86em;margin-bottom:6px}
.loginm-card input{width:100%;padding:10px 13px;border-radius:10px;border:1px solid var(--bd);background:var(--s2);color:var(--tx);font-size:.9em;outline:none;text-align:center}
.loginm-card input:focus{border-color:var(--ac)}
.loginm-err{color:var(--red);font-size:.78em;min-height:1.3em}
.dd{width:11px;height:11px;border-radius:50%}
/* PHOTO */
.pa{text-align:center;margin-bottom:16px}
.pc{width:192px;height:192px;border-radius:50%;margin:0 auto 8px;overflow:hidden;border:1px solid var(--bd);background:var(--s2);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.pc:hover{border-color:var(--ac)}.pc.has{cursor:zoom-in}
.pc img{width:100%;height:100%;object-fit:cover}
.pp{color:var(--tx3)}.pp svg{width:52px;height:52px}
.po{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s;color:#fff;font-size:.7em;font-weight:600}
.po svg{width:26px;height:26px}
.pc:hover .po{opacity:1}
.pb{display:flex;gap:12px;justify-content:center;font-size:.72em}
.pb span{cursor:pointer;opacity:.65;transition:.2s}.pb span:hover{opacity:1}
.pb .u{color:var(--ac2)}.pb .x{color:var(--red)}
/* SPOILER */
.spoiler{border:1px solid var(--bd);border-radius:11px;overflow:hidden;margin-bottom:10px}
.sp-head{padding:11px 13px;cursor:pointer;display:flex;align-items:center;gap:9px;font-size:.82em;font-weight:500;background:var(--s2);transition:.2s}
.sp-head:hover{background:var(--sphoverbg)}
.sp-head .arr{transition:transform .2s;font-size:.7em;color:var(--tx3)}
.spoiler.open .sp-head .arr{transform:rotate(90deg)}
.sp-body{display:none;padding:13px}
.spoiler.open .sp-body{display:block}
.sp-inactive{color:var(--tx3)}.sp-active{color:var(--tx-strong)}
.sp-head svg{flex-shrink:0}
.sp-comment{font-size:.72em;color:var(--tx3);margin-top:4px}
/* JOB/EDU ENTRY */
.entry{background:var(--s2);border-radius:10px;padding:11px;margin-bottom:8px;position:relative}
.entry-del{position:absolute;top:8px;right:10px;cursor:pointer;color:var(--tx3);opacity:.7;font-size:.8em;transition:.2s}
.soc-row{display:flex;align-items:center;gap:5px;background:var(--s2);border:1px solid var(--bd);border-radius:10px;padding:4px 6px;margin-top:6px}
.soc-ic{color:var(--tx2);display:flex;flex-shrink:0;padding-left:2px}
.f .soc-row select{width:auto;flex-shrink:0;max-width:118px;padding:5px 8px 5px 4px;font-size:.76em;background:var(--s2);border:none;border-right:1px solid var(--bd);border-radius:0;color:var(--tx)}
.f .soc-row input{flex:1;min-width:80px;padding:5px 4px;font-size:.8em;background:var(--s2);border:none}
.f .soc-row select:focus,.f .soc-row input:focus{border:none;outline:none}
.soc-open,.soc-del{color:var(--tx3);cursor:pointer;flex-shrink:0;display:flex;align-items:center;padding:4px;border-radius:6px;transition:.15s}
.soc-open:hover{color:var(--ac2);background:var(--bhover)}
.soc-del:hover{color:var(--red);background:var(--bhover)}
.entry-del:hover{opacity:1;color:var(--red)}
.entry .f{margin-bottom:7px}
.entry .dr{grid-template-columns:90px 70px 10px 90px 70px;align-items:center}
.entry .dr .sep{text-align:center;color:var(--tx3);font-size:.8em}
.add-entry{font-size:.78em;color:var(--ac2);cursor:pointer;opacity:.85;margin-top:4px;display:inline-block;transition:.2s}
.add-entry:hover{opacity:1}
/* RELS */
.ri{display:flex;align-items:center;gap:8px;padding:8px 11px;background:var(--s2);border-radius:9px;font-size:.8em;margin-bottom:6px}
.rt{color:var(--ac2);font-weight:600;min-width:70px}
.rn{flex:1}.rx{cursor:pointer;color:var(--tx3);opacity:.7;transition:.2s}.rx:hover{opacity:1;color:var(--red)}
.ar{display:flex;gap:6px;margin-top:8px}
.ar select{flex:1;padding:7px 9px;border-radius:9px;border:1px solid var(--bd);background:var(--s2);color:var(--tx);font-size:.78em}
/* COLORS */
.cr{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.cp{width:24px;height:24px;border-radius:7px;cursor:pointer;border:2px solid transparent;transition:.2s}
.cp:hover{transform:scale(1.08)}.cp.on{border-color:var(--cpring)}
/* DOCS */
.di{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--s2);border-radius:9px;font-size:.8em;margin-bottom:6px}
.di-i{font-size:1.1em;flex-shrink:0}
.di-n{flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.di-s{font-size:.68em;color:var(--tx3);margin-left:4px}
.di-a{display:flex;gap:8px}.di-a span{cursor:pointer;opacity:.65;transition:.2s}.di-a span:hover{opacity:1}
.du{border:1.5px dashed var(--bd);border-radius:10px;padding:14px;text-align:center;cursor:pointer;font-size:.8em;color:var(--tx3);margin-top:6px;transition:.2s}
.du:hover{border-color:var(--ac);color:var(--ac2)}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.gal-item{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--s2);cursor:zoom-in}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block}
.gal-del{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.85;transition:.15s}
.gal-del:hover{opacity:1;background:rgba(255,69,58,.85)}
.gal-del svg{width:11px;height:11px}
.gal-add{aspect-ratio:1;border-radius:10px;border:1.5px dashed var(--bd);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx3);transition:.2s}
.gal-add:hover{border-color:var(--ac);color:var(--ac2)}
.gal-add svg{width:22px;height:22px}
/* Locked cards used to dim + block pointer-events on the WHOLE body — looked exactly like the
   "deceased" card styling elsewhere, which nobody wants to be reminded of while just protecting
   someone's data from being edited by mistake. Now only the actual fields are disabled (native
   :disabled styling on input/select/textarea, set in JS below) and only the specific controls
   that mutate/delete something get muted — viewing photos, the gallery, documents and links all
   stay fully normal and clickable.*/
.dbody.locked input:disabled,.dbody.locked select:disabled,.dbody.locked textarea:disabled{cursor:not-allowed;opacity:.7}
.dbody.locked .entry-del,.dbody.locked .add-entry,.dbody.locked .rx,.dbody.locked .cp,
.dbody.locked .gal-del,.dbody.locked .gal-add,.dbody.locked .du,
.dbody.locked .pb .u,.dbody.locked .pb .x,.dbody.locked .di-del,
.dbody.locked .b.d,.dbody.locked .ar button{
  pointer-events:none;opacity:.35;cursor:not-allowed}
.du.drag-over,.gal-grid.drag-over{border-color:var(--ac);background:rgba(10,132,255,.08)}
.gal-grid.drag-over{outline:1.5px dashed var(--ac);outline-offset:4px;border-radius:10px}
/* CANVAS */
.cw{flex:1;overflow:hidden;position:relative;cursor:grab;
  background:
    radial-gradient(ellipse 900px 620px at 12% -8%,rgba(10,132,255,.07),transparent 60%),
    radial-gradient(ellipse 900px 700px at 100% 108%,rgba(191,90,242,.05),transparent 60%),
    var(--bg)}
.cw.pan{cursor:grabbing}
.ci{position:absolute;top:0;left:0;transform-origin:0 0}
.cg{position:fixed;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--cidot) 1.4px,transparent 1.4px);
  background-size:28px 28px}
.ci svg{position:absolute;top:0;left:0;pointer-events:none;overflow:visible}
.ci svg path{stroke:var(--cistroke);stroke-width:1.5;fill:none}
.ci svg line.m,.ci svg path.m{stroke:var(--pk);stroke-width:1.5;stroke-dasharray:5,4;opacity:.75}
.ci svg text{fill:var(--pk);font-size:12px}
.tn{position:absolute;width:175px;cursor:grab;z-index:2;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tn img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.tn:hover{z-index:5}.tn.drg{z-index:10;cursor:grabbing}
@keyframes cardJiggle{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(1.3deg)}}
.tn.armed .tb{animation:cardJiggle .22s ease-in-out infinite}
.tn.selected .tb{outline:2px solid var(--ac);outline-offset:2px}
.tb{border-radius:14px;padding:12px 10px;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.28);border:1px solid var(--bd);transition:box-shadow .2s,border-color .2s;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden}
.tb.alive{background:var(--aliveb);border-color:rgba(48,209,88,.4)}
.tb.deceased{background:var(--s1);border-color:var(--bd)}
.tb.unknown{background:var(--s2);border-color:var(--bd)}
.tp{width:44px;height:44px;border-radius:50%;overflow:hidden;margin:0 auto 6px;border:1px solid var(--avring);flex-shrink:0}
.tp img{width:100%;height:100%;object-fit:cover}
.tnp{width:44px;height:44px;border-radius:50%;margin:0 auto 6px;border:1px solid var(--noavbd);background:var(--noavbg);display:flex;align-items:center;justify-content:center;font-size:1em;color:var(--noavfg);flex-shrink:0}
.tnn{font-weight:600;font-size:.74em;line-height:1.25;margin-bottom:2px;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%}
.tnd{font-size:.64em;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tnr{font-size:.6em;color:var(--tx3);font-style:normal;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.zc{position:absolute;bottom:16px;right:16px;display:flex;gap:4px;z-index:20}
.zc button{width:32px;height:32px;border-radius:9px;border:1px solid var(--bd);background:var(--topbg);color:var(--tx);cursor:pointer;font-size:1em;transition:.2s}
.zc button:hover{background:var(--s2);border-color:var(--zchoverbd)}
.zi{position:absolute;bottom:16px;left:16px;font-size:.72em;color:var(--tx3);z-index:20}
/* LB */
.lb{display:none;position:fixed;z-index:200;inset:0;background:rgba(0,0,0,.92);align-items:center;justify-content:center;cursor:zoom-out;flex-direction:column;gap:12px}
.cropm{display:none;position:fixed;z-index:210;inset:0;background:rgba(0,0,0,.75);align-items:center;justify-content:center;padding:20px}
.cropm.op{display:flex}
.cropm-card{background:var(--s1);border:1px solid var(--bd);border-radius:16px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:92vw;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.cropm-title{font-size:.88em;font-weight:600;color:var(--tx)}
.cropm-vp{width:min(280px,72vw);height:min(280px,72vw);border-radius:50%;overflow:hidden;position:relative;background:var(--s2);cursor:grab;touch-action:none}
.cropm-vp.grabbing{cursor:grabbing}
.cropm-vp img{position:absolute;top:0;left:0;transform-origin:0 0;user-select:none;pointer-events:none;max-width:none}
.cropm-actions{display:flex;gap:10px}
#cropZoom{width:min(280px,72vw)}
.lb.op{display:flex}
.lb img{max-width:90vw;max-height:80vh;max-height:80dvh;border-radius:12px;object-fit:contain}
.lb-n{color:#fff;font-size:1em;font-weight:500}
.lb-x{position:absolute;top:20px;right:24px;color:#fff;font-size:1.5em;cursor:pointer;opacity:.7;transition:.2s}.lb-x:hover{opacity:1}
.lb-nav{display:none;position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:1.6em;line-height:1;cursor:pointer;align-items:center;justify-content:center;transition:.2s;z-index:2}
.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-prev{left:16px}
.lb-next{right:16px}
@media (max-width:640px){.lb-nav{width:38px;height:38px;font-size:1.3em}.lb-prev{left:6px}.lb-next{right:6px}}
/* MOD */
.mb{display:none;position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.55);align-items:center;justify-content:center}
.mb.op{display:flex}
.md{background:var(--s1);border:1px solid var(--bd);border-radius:16px;padding:26px;width:440px;max-height:80vh;max-height:80dvh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.md h3{font-size:1.05em;margin-bottom:16px;color:var(--tx);font-weight:600;letter-spacing:-.01em}
/* USER SELECT MODAL */
.usm{display:none;position:fixed;z-index:150;inset:0;background:rgba(0,0,0,.7);align-items:center;justify-content:center;padding:20px}
.usm.op{display:flex}
.usm-d{background:var(--s1);border:1px solid var(--bd);border-radius:18px;padding:32px;width:100%;max-width:480px;max-height:80vh;max-height:80dvh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.usm-d h2{font-size:1.3em;margin-bottom:6px;color:var(--tx);font-weight:600;letter-spacing:-.015em}
.usm-d p{font-size:.86em;color:var(--tx2);margin-bottom:22px}
.usl{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;max-height:50vh;max-height:50dvh;overflow-y:auto}
.usl-i{padding:11px 13px;border-radius:11px;border:1px solid transparent;cursor:pointer;transition:.18s ease;display:flex;align-items:center;gap:11px;font-size:.86em}
.usl-i.alive{background:var(--s2);color:var(--tx)}
.usl-i.alive:hover{background:var(--uslihoverbg)}
.usl-i.deceased{background:transparent;color:var(--tx3)}
.usl-i.deceased:hover{background:var(--s1);color:var(--tx2)}
.usl-i-a{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72em;font-weight:600;flex-shrink:0;background:var(--bd);overflow:hidden}
.usl-i.alive .usl-i-a{background:var(--grn);color:#04240f}
.usl-i.deceased .usl-i-a{background:var(--uslideadbg);color:var(--tx3)}
.usl-i-n{flex:1}
.tsr-item{padding:8px 12px;font-size:.8em;cursor:pointer;transition:.15s}
.tsr-item:hover{background:var(--s2)}
.tsr-item small{display:block;color:var(--tx3);font-size:.85em;margin-top:1px}
@keyframes flashCard{0%,100%{box-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.28)}50%{box-shadow:0 0 0 4px rgba(10,132,255,.6),0 8px 24px rgba(10,132,255,.4)}}
.tn.flash .tb{animation:flashCard .6s ease-in-out 3}
/* STATS MODAL */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.stat-tile{background:var(--s2);border-radius:12px;padding:14px}
.stat-tile .v{font-size:1.6em;font-weight:700;color:var(--tx)}
.stat-tile .l{font-size:.72em;color:var(--tx3);margin-top:2px}
.stat-list{font-size:.82em;color:var(--tx2);line-height:1.7}
.usmIdx-l{font-size:.62em;font-weight:600;color:var(--tx3);cursor:pointer;padding:1px 4px;border-radius:4px;line-height:1.5}
.usmIdx-l:hover{color:var(--ac2);background:var(--s2)}
.usm-add{font-size:.86em;padding:12px 13px;border:1.5px dashed var(--bd);border-radius:11px;cursor:pointer;text-align:center;color:var(--ac2);transition:.2s;margin-top:8px}
.usm-add:hover{border-color:var(--ac);background:rgba(10,132,255,.08)}
/* the detail card must never pan/scroll sideways — centered, vertical-only */
.det{overflow-x:hidden}
.lh-add{min-width:32px;height:32px;border-radius:8px;border:none;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.lh-add:hover{background:var(--ac2)}
.lh{display:flex;gap:8px;align-items:center}
.lh input{flex:1}
.cw-add{position:absolute;top:14px;right:14px;z-index:20}
.cw-add .b{box-shadow:0 4px 14px rgba(0,0,0,.35)}
/* Settings ("⋯") dropdown — one consistent row style instead of copy-pasted inline styles per
   button, grouped by whitespace/dividers only (no ALL-CAPS section labels), modelled after
   YouTube's account menu: uniform icon+text rows, a proper segmented control for text size. */
.mm-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;background:none;border-radius:8px;color:var(--tx);font-size:.85em;text-align:left;cursor:pointer;transition:background .15s}
.mm-item:hover{background:var(--bhover)}
.mm-item svg{flex-shrink:0;color:var(--tx2)}
.mm-item.danger{color:var(--red)}
.mm-item.danger svg{color:var(--red)}
.mm-sep{height:1px;background:var(--bd);margin:6px 4px}
.mm-scale-row{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;gap:10px}
.mm-scale-row>span{font-size:.85em;color:var(--tx)}
.mm-scale-seg{display:flex;background:var(--s2);border-radius:8px;padding:2px;gap:2px}
.mm-scale-seg button{border:none;background:none;border-radius:6px;padding:4px 8px;cursor:pointer;color:var(--tx2);line-height:1;transition:.15s}
.mm-scale-seg button.on{background:var(--s1);color:var(--tx)}
/* MOBILE — everything below only applies under this max-width, desktop is completely untouched */
.mob-back{display:none}
@media (max-width:860px){
  .top{padding:10px 12px;gap:8px;flex-wrap:nowrap}
  .top h1 span{display:none}
  .tabs{margin-left:4px;flex-shrink:0}
  .tab span{display:none}
  .tab{padding:6px 12px}
  .acts{gap:6px}
  .acts .b{padding:0 10px;font-size:.75em}
  /* В шапке телефона места нет — от значка остаётся только цветная точка, подпись живёт в title */
  .sync-badge .sync-label{display:none}
  .sync-badge{padding:0 9px}
  #curUserBtn .cub-name{display:none} /* keep just the avatar/letter on very tight widths */
  #settingsBtn .settings-label{display:none}
  .cw-add .cw-add-label{display:none}
  .cw-add .b{min-width:38px;justify-content:center}
  /* Master-detail: on mobile show ONLY the list OR ONLY the selected card, never both side by side */
  .plist{width:100%}
  .plist-resizer{display:none}
  .det{padding:18px 16px}
  #v-list.mob-detail .plist{display:none}
  #v-list:not(.mob-detail) .det{display:none}
  .mob-back{display:flex;align-items:center;gap:6px;margin-bottom:14px;color:var(--ac2);cursor:pointer;font-size:.85em;font-weight:500}
}