:root{
  --sb:#1E1A3C;--sb2:#261F4A;--sbl:rgba(255,255,255,.07);
  --acc:#7B5EA7;--acc2:#9B7EC8;--acclt:#C9B8E8;--accbg:#F0EBF8;
  --bg:#F4F2F9;--bg2:#EAE6F4;--sur:#FFFFFF;
  --ink:#1E1A3C;--ink2:#5A5470;--ink3:#9B95B0;
  --line: var(--bg2);
  --green:#2E7D52;--gbg:#E8F5EE;
  --amber:#A0650A;--abg:#FDF3E0;
  --blue:#1A5FA0;--bbg:#E5EFF9;
  --red:#B83232;--rbg:#FDEAEA;
  --gray:#6B6880;--grbg:#EEEDF4;
  --violet:#6B4A9A;--vbg:#EDE4F5;
  --r:10px;--rl:16px;--font:'Onest','Segoe UI',sans-serif;--tr:0.17s ease;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
input,select,button,textarea{font-family:var(--font);font-size:14px}
button{cursor:pointer;border:none;background:none}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:var(--bg2);border-radius:3px}
#app{display:flex;height:100vh;overflow:hidden}
#sidebar{width:220px;min-width:220px;background:var(--sb);display:flex;flex-direction:column;transition:width var(--tr);overflow:hidden;flex-shrink:0}
#sidebar.col{width:56px;min-width:56px}
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#hdr{height:56px;background:var(--sur);border-bottom:1px solid var(--bg2);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0}
#content{flex:1;overflow:auto;padding:20px}
.sb-logo{padding:16px 14px;border-bottom:1px solid var(--sbl);display:flex;align-items:center;gap:10px;flex-shrink:0}
.sb-icon{width:32px;height:32px;min-width:32px;border-radius:9px;background:linear-gradient(135deg,#9B7EC8,#6B4A9A);display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:16px}
.sb-title{color:#fff;font-weight:700;font-size:15px;white-space:nowrap;transition:opacity var(--tr)}
#sidebar.col .sb-col-hide{opacity:0;pointer-events:none}
nav{flex:1;padding:10px 8px;overflow-y:auto}
.ni{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;margin-bottom:2px;cursor:pointer;transition:background var(--tr),color var(--tr);color:rgba(255,255,255,.4);white-space:nowrap}
.ni:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75)}
.ni.active{background:rgba(155,126,200,.2);color:var(--acclt)}
.ni svg{flex-shrink:0;width:17px;height:17px}
.ni-lbl{font-size:13px;font-weight:500;transition:opacity var(--tr)}
#sidebar.col .ni-lbl{opacity:0;pointer-events:none}
.sb-usr{padding:10px 8px;border-top:1px solid var(--sbl);flex-shrink:0}
.sb-usr-in{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.04)}
.sb-av{width:28px;height:28px;min-width:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.sb-usr-info{overflow:hidden;transition:opacity var(--tr)}
#sidebar.col .sb-usr-info{opacity:0;pointer-events:none}
.sb-usr-name{color:#fff;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-usr-role{color:var(--acclt);font-size:10px;opacity:.7}
.h-tog{padding:6px;border-radius:7px;color:var(--ink3);display:flex}
.h-tog:hover{background:var(--bg)}
.h-ttl{font-size:16px;font-weight:700;flex:1;color:var(--ink)}
.rbadge{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px}
.btn-out{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:8px;background:var(--bg);border:1px solid var(--bg2);color:var(--ink2);font-size:12px;font-weight:500}
.btn-out:hover{background:var(--bg2)}
.card{background:var(--sur);border-radius:var(--rl);border:1px solid var(--bg2)}
.sc{background:var(--sur);border-radius:var(--rl);border:1px solid var(--bg2);padding:18px 20px;flex:1 1 120px;min-width:110px}
.sc-lbl{color:var(--ink3);font-size:10px;font-weight:600;margin-bottom:7px;text-transform:uppercase;letter-spacing:.5px}
.sc-val{color:var(--ink);font-size:24px;font-weight:800;line-height:1}
.sc-sub{font-size:11px;margin-top:5px}
.stats-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.ch{padding:13px 18px;border-bottom:1px solid var(--bg2);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.ct{font-weight:700;font-size:14px;color:var(--ink)}
.csub{font-size:12px;color:var(--ink3)}
.toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center;background:var(--sur);border:1px solid var(--bg2);border-radius:var(--rl);padding:11px 14px}
.tbar-lbl{font-size:10px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.pbtn{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid var(--bg2);background:transparent;color:var(--ink2);transition:all var(--tr);cursor:pointer;white-space:nowrap}
.pbtn:hover{background:var(--bg)}
.pbtn.on{background:var(--acc);border-color:var(--acc);color:#fff}
.tsep{color:var(--ink3);font-size:12px}
.dinput{padding:5px 9px;border-radius:8px;border:1px solid var(--bg2);background:var(--bg);color:var(--ink);font-size:12px;font-family:var(--font)}
.dinput:focus{outline:none;border-color:var(--acc)}
.papply{padding:5px 12px;border-radius:8px;background:var(--acc);color:#fff;font-size:12px;font-weight:600;transition:background var(--tr)}
.papply:hover{background:#6a4d91}
.fsel{padding:5px 9px;border-radius:8px;border:1px solid var(--bg2);background:var(--sur);color:var(--ink2);font-size:12px;font-family:var(--font)}
.fsel:focus{outline:none;border-color:var(--acc)}
.fsel-multi{min-width:140px;min-height:88px;padding:6px;line-height:1.35}
.fsel-multi option{padding:2px 0}
.fsel-hint{font-size:10px;color:var(--ink3);max-width:220px;line-height:1.35}
.filter-dd{position:relative;z-index:3}
.filter-dd-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:8px;border:1px solid var(--bg2);background:var(--sur);color:var(--ink2);font-size:12px;font-weight:500;font-family:var(--font);cursor:pointer;white-space:nowrap;max-width:220px}
.filter-dd-btn:hover{background:var(--bg);border-color:var(--acc)}
.filter-dd-chev{font-size:10px;color:var(--ink3);margin-left:2px}
.filter-dd-cnt{font-size:11px;color:var(--acc);font-weight:600}
.filter-dd-panel{position:absolute;top:100%;left:0;margin-top:4px;min-width:220px;max-width:320px;max-height:280px;display:flex;flex-direction:column;background:var(--sur);border:1px solid var(--bg2);border-radius:10px;box-shadow:0 12px 32px rgba(30,26,60,.15);z-index:50}
.filter-dd-panel[hidden]{display:none!important}
.filter-dd-actions{padding:8px 10px;border-bottom:1px solid var(--bg2);flex-shrink:0}
.filter-dd-clear{background:none;border:none;color:var(--acc);font-size:11px;font-weight:600;cursor:pointer;padding:0;font-family:var(--font)}
.filter-dd-clear:hover{text-decoration:underline}
.filter-dd-list{padding:6px 4px;overflow-y:auto;flex:1;min-height:0}
.filter-dd-item{display:flex;align-items:flex-start;gap:8px;padding:6px 10px;cursor:pointer;border-radius:6px;font-size:12px;color:var(--ink2);line-height:1.3}
.filter-dd-item:hover{background:var(--bg)}
.filter-dd-item input{margin-top:2px;accent-color:var(--acc);flex-shrink:0}
.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
.th-sort:hover{color:var(--acc)}
.th-sort .sort-ind{font-weight:400;margin-left:2px;opacity:.6}
.td-vac-name{max-width:min(280px,28vw);vertical-align:top}
.vn-clamp{font-weight:600;font-size:13px;color:var(--ink);line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;word-break:break-word}
.status-overdue{display:inline-flex;margin-top:4px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;background:var(--rbg);color:var(--red);text-transform:uppercase;letter-spacing:.3px}
.btn-icon-pencil{display:inline-flex;align-items:center;justify-content:center;width:36px;height:32px;border-radius:8px;border:1px solid #d4c2eb;background:var(--accbg);color:var(--acc);transition:background var(--tr)}
.btn-icon-pencil:hover{background:#e4d8f5}
.btn-icon-pencil svg{display:block}
.fsearch{position:relative;flex:1 1 160px;min-width:120px}
.fsearch svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);pointer-events:none}
.fsearch input{width:100%;padding:5px 9px 5px 29px;border-radius:8px;border:1px solid var(--bg2);background:var(--sur);color:var(--ink);font-size:12px;font-family:var(--font)}
.fsearch input:focus{outline:none;border-color:var(--acc)}
.btn-primary{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;background:var(--acc);border-radius:var(--r);color:#fff;font-weight:600;font-size:13px;transition:background var(--tr)}
.btn-primary:hover{background:#6a4d91}
.btn-danger{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:7px;background:var(--rbg);border:1px solid #f5c6c2;color:var(--red);font-size:11px;font-weight:600;transition:background var(--tr)}
.btn-danger:hover{background:#fad5d5}
.btn-sm{padding:4px 11px;border-radius:7px;border:1px solid var(--bg2);font-size:11px;color:var(--ink2);font-weight:500;transition:background var(--tr)}
.btn-sm:hover{background:var(--bg)}
.btn-edit{padding:4px 10px;border-radius:7px;border:1px solid #d4c2eb;font-size:11px;color:var(--acc);font-weight:500;background:var(--accbg);transition:background var(--tr)}
.btn-edit:hover{background:#e4d8f5}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:560px}
thead tr{background:var(--bg)}
th{padding:8px 14px;text-align:left;font-size:10px;font-weight:700;color:var(--ink3);border-bottom:1px solid var(--bg2);white-space:nowrap;text-transform:uppercase;letter-spacing:.5px}
tbody tr{border-bottom:1px solid var(--bg);transition:background var(--tr)}
tbody tr:hover{background:var(--accbg)}
td{padding:10px 14px;vertical-align:middle}
.vn{font-weight:600;font-size:13px;color:var(--ink)}

.btag{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:2px 6px;border-radius:4px;margin-top:2px;background:var(--bbg);color:var(--blue)}
.dv{font-weight:700;font-size:13px}
.dn{font-size:11px;color:var(--ink3);margin-left:3px}
.dover{display:block;font-size:10px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
/* Статусы вакансий: В работе — синий, Закрыта — зелёный, Приостановлена — жёлтый, Отменена — красный, Передана — сиреневый */
.sw{background:var(--bbg);color:var(--blue)}
.sc2{background:var(--gbg);color:var(--green)}
.sp{background:var(--abg);color:var(--amber)}
.sca{background:var(--rbg);color:var(--red)}
.st{background:var(--vbg);color:var(--violet)}
.ass-ok{background:var(--gbg);color:var(--green)}
.ass-bad{background:var(--rbg);color:var(--red)}
.ass-mid{background:var(--abg);color:var(--amber)}
/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(30,26,60,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;backdrop-filter:blur(2px)}
.modal{background:var(--sur);border-radius:var(--rl);width:100%;max-width:680px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(30,26,60,.25)}
.modal-hdr{padding:18px 24px 14px;border-bottom:1px solid var(--bg2);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-ttl{font-size:17px;font-weight:700;color:var(--ink)}
.modal-close{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink3);transition:background var(--tr)}
.modal-close:hover{background:var(--bg)}
.modal-body{padding:20px 24px;overflow-y:auto;flex:1}
.modal-footer{padding:14px 24px;border-top:1px solid var(--bg2);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-shrink:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
.fg{display:flex;flex-direction:column;gap:4px}
.flbl{font-size:11px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.4px}
.flbl .req{color:var(--acc)}
.finp{padding:8px 12px;border-radius:var(--r);border:1px solid var(--bg2);background:var(--bg);color:var(--ink);font-size:13px;font-family:var(--font);transition:border-color var(--tr)}
.finp:focus{outline:none;border-color:var(--acc);background:var(--sur)}
.finp:disabled{opacity:.5;cursor:not-allowed}
select.finp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239B95B0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.form-sec{font-size:10px;font-weight:700;color:var(--acc);text-transform:uppercase;letter-spacing:.6px;padding-bottom:6px;border-bottom:1px solid var(--bg2);grid-column:1/-1;margin-top:8px}
.btn-cancel{padding:8px 18px;border-radius:var(--r);border:1px solid var(--bg2);color:var(--ink2);font-size:13px;font-weight:600;background:var(--bg);transition:background var(--tr)}
.btn-cancel:hover{background:var(--bg2)}
.btn-save{padding:8px 22px;border-radius:var(--r);background:var(--acc);color:#fff;font-size:13px;font-weight:700;transition:background var(--tr)}
.btn-save:hover{background:#6a4d91}
.btn-save:disabled{opacity:.5;cursor:not-allowed}
.field-note{font-size:11px;color:var(--ink3);margin-top:2px}
/* ANALYTICS */
.rec-row{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--bg)}
.rec-av{width:34px;height:34px;min-width:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;background:var(--acc)}
.rsv{font-weight:700;font-size:15px;color:var(--ink)}
.rsl{color:var(--ink3);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.3px}
.pbar{height:4px;background:var(--bg2);border-radius:2px;overflow:hidden;margin-top:3px;width:60px;margin-left:auto}
.pfill{height:100%;background:var(--acc);border-radius:2px;transition:width .5s}
/* LOGIN */
#ls{min-height:100vh;background:var(--sb);display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden}
#ls::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:rgba(123,94,167,.12);top:-200px;right:-200px;pointer-events:none}
#ls::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(155,126,200,.07);bottom:-150px;left:-100px;pointer-events:none}
.lb{width:100%;max-width:400px;position:relative;z-index:1}
.ll{text-align:center;margin-bottom:32px}
.ll-ico{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#9B7EC8,#6B4A9A);margin-bottom:14px;font-size:28px;font-weight:900;color:#fff;box-shadow:0 8px 32px rgba(107,74,154,.35)}
.ll h1{color:#fff;font-size:22px;font-weight:800;letter-spacing:-.5px}
.ll p{color:rgba(255,255,255,.3);font-size:13px;margin-top:5px}
.lf{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:28px}
.llbl{display:block;color:var(--acclt);font-size:11px;font-weight:600;margin-bottom:7px;text-transform:uppercase;letter-spacing:.5px;opacity:.8}
.linp{width:100%;padding:11px 14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);color:#fff;font-size:14px;margin-bottom:14px;font-family:var(--font);transition:border-color var(--tr)}
.linp:focus{outline:none;border-color:var(--acc)}
.linp::placeholder{color:rgba(255,255,255,.2)}
.lbtn{width:100%;padding:12px;background:var(--acc);border-radius:var(--r);color:#fff;font-weight:700;font-size:15px;transition:background var(--tr)}
.lbtn:hover{background:#6a4d91}
.lbtn:disabled{opacity:.5;cursor:not-allowed}
.lbtn.secondary{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.75)}
.lbtn.secondary:hover{background:rgba(255,255,255,.1)}
.lerr{background:rgba(184,50,50,.15);border:1px solid rgba(184,50,50,.3);border-radius:8px;padding:9px 13px;color:#fca5a5;font-size:13px;margin-bottom:14px}
.lhint{margin-top:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:12px 14px}
.lht{color:rgba(255,255,255,.25);font-size:10px;font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.du{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.06);border-radius:7px;padding:5px 10px;cursor:pointer;font-size:12px;color:rgba(255,255,255,.55);margin:2px;transition:background var(--tr)}
.du:hover{background:rgba(255,255,255,.1)}
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.spd{border-color:var(--bg2);border-top-color:var(--acc)}
.loading{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--ink3);gap:10px;font-size:13px}
.apibar{background:#FFF8E1;border-bottom:1px solid #FFE082;padding:7px 20px;font-size:12px;color:#7B5800;display:none;align-items:center;gap:8px}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;text-align:center}
.empty-ico{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.empty h3{font-size:17px;font-weight:700;margin-bottom:7px}
.empty p{color:var(--ink2);font-size:13px;max-width:300px;line-height:1.7}
.soon-badge{margin-top:16px;padding:5px 16px;border-radius:20px;font-size:12px;font-weight:600;display:inline-block;background:var(--accbg);color:var(--acc)}
.toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r);font-size:13px;font-weight:500;z-index:2000;transform:translateY(80px);transition:transform .25s ease;box-shadow:0 8px 24px rgba(30,26,60,.25)}
.toast.show{transform:translateY(0)}
.toast.ok{background:var(--green)}
.toast.err{background:var(--red)}
/* PLAN INPUT */
.plan-input{width:64px;padding:4px 8px;border-radius:6px;border:1px solid var(--bg2);font-size:13px;font-weight:600;text-align:center;background:var(--bg);color:var(--ink);font-family:var(--font)}
.plan-input:focus{outline:none;border-color:var(--acc)}
/* CHECKLIST */
.cl-opt-label{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:var(--r);border:1px solid var(--bg2);cursor:pointer;transition:all .15s;margin-bottom:8px}
.cl-opt-label.selected{background:var(--accbg);border-color:var(--acc2)}


/* API override block (login) */
.l-adv { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.l-adv-t { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55); margin-bottom: 8px; }
.api-url-row .api-url-row-inner { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.api-url-row input#api-url-ov { flex: 1 1 220px; min-width: 180px; margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   UI Enhancements — Этап 1
   ═══════════════════════════════════════════════════════════════ */

/* ── Тёмная тема ───────────────────────────────────────────── */
:root[data-theme="dark"]{
  --bg:#16162a;
  --bg2:#26263e;
  --sur:#1f1f33;
  --ink:#ebe9f5;
  --ink2:#a8a5c3;
  --ink3:#7c7896;
  --line:#2a2a44;
  --gbg:rgba(46,125,82,.20);
  --abg:rgba(160,101,10,.22);
  --bbg:rgba(26,95,160,.22);
  --rbg:rgba(184,50,50,.22);
  --grbg:rgba(120,117,150,.18);
  --vbg:rgba(155,126,200,.22);
  --accbg:rgba(123,94,167,.22);
  --green:#5cc28b;
  --amber:#e8b366;
  --blue:#76aef0;
  --red:#ed7878;
  --gray:#a0a0b8;
  --violet:#b89ce0;
  color-scheme: dark;
}
:root[data-theme="dark"] .toast{background:#0e0e1c;color:#fff;border:1px solid #303048}
:root[data-theme="dark"] .toast.ok{background:#1d4a35;color:#dcf3e6}
:root[data-theme="dark"] .toast.err{background:#4a1d1d;color:#f3dcdc}
:root[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.6)}
:root[data-theme="dark"] .modal{box-shadow:0 24px 64px rgba(0,0,0,.6)}
:root[data-theme="dark"] thead tr{background:var(--bg2)}
:root[data-theme="dark"] tbody tr:hover{background:rgba(123,94,167,.12)}
:root[data-theme="dark"] .btn-out{background:var(--bg2);border-color:#36365a;color:var(--ink2)}
:root[data-theme="dark"] .btn-out:hover{background:#33334e}
:root[data-theme="dark"] .filter-dd-panel{box-shadow:0 12px 32px rgba(0,0,0,.5)}
:root[data-theme="dark"] .apibar{background:#3a2a08;border-bottom-color:#6b4a0a;color:#ffd591}
/* Светлые градиентные подложки в карточках ценностей становятся не читаемы — затемняем фон */
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:#FFFFFF"],
:root[data-theme="dark"] [style*="background:#ffffff"]{background:var(--sur)!important}
:root[data-theme="dark"] [style*="background:#f7fafc"]{background:var(--bg2)!important}
:root[data-theme="dark"] [style*="background:#fafbfc"]{background:var(--bg2)!important}

/* Кнопка переключения темы в шапке */
.btn-theme{display:flex;align-items:center;justify-content:center;width:34px;height:32px;border-radius:8px;border:1px solid var(--bg2);background:var(--bg);color:var(--ink2);transition:all var(--tr);cursor:pointer}
.btn-theme:hover{background:var(--bg2);color:var(--ink)}
.btn-theme svg{width:16px;height:16px}

/* ── Skeleton loading ──────────────────────────────────────── */
@keyframes skel-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skel{background:linear-gradient(90deg,var(--bg2) 0%,var(--bg) 50%,var(--bg2) 100%);background-size:800px 100%;animation:skel-shimmer 1.4s linear infinite;border-radius:6px;display:block}
.skel-line{height:14px;margin-bottom:8px}
.skel-line.lg{height:20px}
.skel-line.sm{height:10px}
.skel-block{height:80px;border-radius:var(--rl)}
.skel-stats{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.skel-stat{flex:1 1 120px;min-width:110px;height:90px;border-radius:var(--rl)}
.skel-row{display:flex;gap:14px;padding:10px 14px;border-bottom:1px solid var(--bg)}
.skel-row .skel{flex:1}
.skel-row .skel.w-sm{flex:0 0 60px}
.skel-row .skel.w-md{flex:0 0 100px}

/* ── Fade-анимация перехода между страницами ───────────────── */
.page-fade-enter{opacity:0;transform:translateY(4px)}
.page-fade-active{opacity:1;transform:translateY(0);transition:opacity .15s ease,transform .15s ease}
.page-fade-exit{opacity:0;transition:opacity .12s ease}

/* ── Toast-стек ────────────────────────────────────────────── */
#toast-stack{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column-reverse;gap:8px;z-index:2000;pointer-events:none;max-width:380px}
.toast-item{background:var(--ink);color:#fff;padding:11px 14px;border-radius:var(--r);font-size:13px;font-weight:500;box-shadow:0 8px 24px rgba(30,26,60,.25);display:flex;align-items:center;gap:12px;transform:translateY(80px);opacity:0;transition:transform .25s ease,opacity .2s ease;pointer-events:auto}
.toast-item.show{transform:translateY(0);opacity:1}
.toast-item.hide{transform:translateY(40px);opacity:0}
.toast-item.ok{background:var(--green);color:#fff}
.toast-item.err{background:var(--red);color:#fff}
.toast-item .toast-msg{flex:1;line-height:1.4}
.toast-item .toast-undo{background:rgba(255,255,255,.18);color:#fff;border:none;padding:5px 11px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);flex-shrink:0;transition:background .15s}
.toast-item .toast-undo:hover{background:rgba(255,255,255,.28)}
.toast-item .toast-x{background:none;border:none;color:rgba(255,255,255,.7);font-size:16px;cursor:pointer;padding:0 0 0 4px;line-height:1;flex-shrink:0}
.toast-item .toast-x:hover{color:#fff}

/* ── Хлебные крошки ───────────────────────────────────────── */
.crumbs{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink3);flex-wrap:wrap;min-width:0}
.crumb{cursor:pointer;color:var(--ink2);transition:color var(--tr);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.crumb:hover{color:var(--acc)}
.crumb.last{color:var(--ink);font-weight:600;cursor:default}
.crumb.last:hover{color:var(--ink)}
.crumb-sep{color:var(--ink3);font-size:11px;opacity:.6}

/* ── Аватары (детерминированный цвет, можно с шиммером) ───── */
.av-letter{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;font-family:var(--font);user-select:none;flex-shrink:0;line-height:1;letter-spacing:.5px}
.av-shimmer{position:relative;overflow:hidden}
.av-shimmer::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-100%);animation:av-shine 3.5s ease-in-out infinite}
@keyframes av-shine{0%,40%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ── Горящие вакансии (просрочены > норматива и активны) ──── */
tbody tr.vac-hot{box-shadow:inset 3px 0 0 var(--red)}
tbody tr.vac-warn{box-shadow:inset 3px 0 0 var(--amber)}
tbody tr.vac-hot td:first-child,tbody tr.vac-warn td:first-child{padding-left:14px}

/* ── Командная палитра Ctrl+K ─────────────────────────────── */
.cmdk-overlay{position:fixed;inset:0;background:rgba(30,26,60,.45);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;z-index:3000;padding-top:12vh;padding-left:20px;padding-right:20px}
.cmdk{background:var(--sur);border-radius:14px;width:100%;max-width:560px;box-shadow:0 24px 64px rgba(30,26,60,.35);display:flex;flex-direction:column;max-height:70vh;overflow:hidden;border:1px solid var(--bg2)}
.cmdk-input-wrap{padding:14px 16px;border-bottom:1px solid var(--bg2);display:flex;align-items:center;gap:10px}
.cmdk-input-wrap svg{flex-shrink:0;color:var(--ink3)}
.cmdk-input{flex:1;border:none;background:none;font-size:15px;color:var(--ink);font-family:var(--font);outline:none}
.cmdk-input::placeholder{color:var(--ink3)}
.cmdk-hint{font-size:10px;color:var(--ink3);background:var(--bg);padding:3px 7px;border-radius:5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}
.cmdk-list{flex:1;overflow-y:auto;padding:6px}
.cmdk-empty{padding:32px 16px;text-align:center;color:var(--ink3);font-size:13px}
.cmdk-group{padding:8px 12px 4px;font-size:10px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.5px}
.cmdk-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;cursor:pointer;transition:background var(--tr)}
.cmdk-item:hover,.cmdk-item.cmdk-active{background:var(--accbg)}
.cmdk-item-ico{width:28px;height:28px;border-radius:7px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--ink2);flex-shrink:0;font-size:13px;font-weight:700}
.cmdk-item-main{flex:1;min-width:0}
.cmdk-item-ttl{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item-sub{font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.cmdk-item-tag{font-size:10px;color:var(--ink3);padding:2px 7px;border-radius:5px;background:var(--bg);font-weight:600;flex-shrink:0;text-transform:uppercase;letter-spacing:.4px}
.cmdk-foot{padding:8px 14px;border-top:1px solid var(--bg2);display:flex;gap:14px;font-size:10px;color:var(--ink3);font-weight:500}
.cmdk-foot kbd{background:var(--bg);padding:1px 5px;border-radius:4px;border:1px solid var(--bg2);font-family:var(--font);font-size:10px;font-weight:700;color:var(--ink2);margin-right:3px}

/* ── Hover-превью карточки вакансии ────────────────────────── */
.vac-preview{position:fixed;background:var(--sur);border:1px solid var(--bg2);border-radius:12px;box-shadow:0 16px 40px rgba(30,26,60,.20);padding:14px 16px;width:300px;z-index:1500;pointer-events:none;opacity:0;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease}
.vac-preview.show{opacity:1;transform:translateY(0)}
.vac-preview-ttl{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.3}
.vac-preview-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.vac-preview-row{font-size:11px;color:var(--ink2);margin-top:4px;display:flex;justify-content:space-between;gap:8px}
.vac-preview-row b{color:var(--ink);font-weight:600}
.vac-preview-cmt{font-size:11px;color:var(--ink3);margin-top:8px;padding-top:8px;border-top:1px solid var(--bg2);font-style:italic;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* ═══════════════════════════════════════════════════════════════
   UI Enhancements — Этап 2 (канбан, bulk, inline, дубликат)
   ═══════════════════════════════════════════════════════════════ */

/* ── Переключатель Таблица / Канбан ───────────────────────── */
.view-toggle{display:inline-flex;border:1px solid var(--bg2);border-radius:8px;overflow:hidden;margin-left:auto;background:var(--sur)}
.vt-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;font-size:12px;font-weight:600;color:var(--ink2);background:transparent;border:none;cursor:pointer;font-family:var(--font);transition:background var(--tr),color var(--tr)}
.vt-btn:hover{background:var(--bg)}
.vt-btn.on{background:var(--acc);color:#fff}
.vt-btn svg{flex-shrink:0}

/* ── Bulk action bar ──────────────────────────────────────── */
.bulk-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--accbg);border:1px solid var(--acc2);border-radius:var(--rl);margin-bottom:12px;flex-wrap:wrap;animation:bulk-in .2s ease}
@keyframes bulk-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.bulk-bar-info{font-size:13px;color:var(--ink);margin-right:8px}
.bulk-bar-info b{color:var(--acc);font-weight:800}
.bulk-bar .papply,.bulk-bar .btn-cancel,.bulk-bar .btn-danger{padding:5px 12px;font-size:12px}

/* ── Чекбоксы и подсветка выбранных строк ─────────────────── */
tbody tr.row-checked{background:rgba(123,94,167,.08)}
tbody tr.row-checked:hover{background:rgba(123,94,167,.14)}
:root[data-theme="dark"] tbody tr.row-checked{background:rgba(155,126,200,.14)}

/* ── Inline-редактирование ячейки ─────────────────────────── */
td .inline-status,td .inline-rec{min-width:120px;max-width:200px;font-family:var(--font);background:var(--sur)!important}
td.td-recruiter:hover{background:var(--bg)}
:root[data-theme="dark"] td.td-recruiter:hover{background:var(--bg2)}

/* ── Канбан-доска ─────────────────────────────────────────── */
.kanban-board{display:flex;gap:12px;padding:14px;overflow-x:auto;align-items:flex-start;min-height:60vh}
.kb-col{flex:0 0 240px;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--bg2);border-radius:12px;max-height:75vh;overflow:hidden;transition:border-color .15s,background .15s}
.kb-col.drop-active{border-color:var(--acc);background:var(--accbg);box-shadow:0 0 0 2px rgba(123,94,167,.15) inset}
.kb-col-hdr{padding:10px 12px;border-bottom:1px solid var(--bg2);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--sur);border-radius:12px 12px 0 0}
.kb-cnt{font-size:11px;font-weight:700;color:var(--ink3);background:var(--bg);padding:2px 8px;border-radius:12px}
.kb-col-body{padding:8px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.kb-empty{padding:20px;text-align:center;color:var(--ink3);font-size:11px;font-style:italic}
.kb-card{background:var(--sur);border:1px solid var(--bg2);border-radius:9px;padding:9px 11px;cursor:grab;transition:box-shadow .15s,transform .12s;user-select:none}
.kb-card:hover{box-shadow:0 4px 12px rgba(30,26,60,.10);transform:translateY(-1px)}
.kb-card.kb-dragging{opacity:.4;cursor:grabbing}
.kb-card.vac-hot{box-shadow:inset 3px 0 0 var(--red)}
.kb-card.vac-warn{box-shadow:inset 3px 0 0 var(--amber)}
.kb-card-ttl{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:6px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-word}
.kb-card-meta{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;align-items:center}
.kb-rec{font-size:10px;color:var(--ink2);background:var(--accbg);padding:1px 6px;border-radius:4px}
.kb-card-foot{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--ink3)}
.kb-days{font-weight:700;color:var(--ink2)}
.kb-date{color:var(--ink3)}
:root[data-theme="dark"] .kb-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.4)}

/* ═══════════════════════════════════════════════════════════════
   GROUP REPORT — фильтр и список выборки
   ═══════════════════════════════════════════════════════════════ */

/* Чипы (кнопки-переключатели фильтра) */
.gr-chips{display:flex;flex-wrap:wrap;gap:6px}
.gr-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:999px;
  border:1px solid var(--bg2);background:var(--sur);
  cursor:pointer;font-size:12px;color:var(--ink2);
  user-select:none;transition:background .12s,border-color .12s,color .12s;
}
.gr-chip input[type="checkbox"]{display:none}
.gr-chip:hover{background:var(--bg);border-color:var(--acc)}
.gr-chip:has(input:checked){
  background:var(--accbg);border-color:var(--acc);color:var(--acc);font-weight:600;
}

/* Строки сотрудников */
.gr-emp-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-bottom:1px solid var(--bg);
  cursor:pointer;user-select:none;transition:background .1s;
}
.gr-emp-row:last-child{border-bottom:none}
.gr-emp-row:hover{background:var(--bg)}
.gr-emp-row input[type="checkbox"]{
  width:15px;height:15px;flex-shrink:0;
  cursor:pointer;accent-color:var(--acc);
}

/* ═══════════════════════════════════════════════════════════════
   DPI — PUBLIC FORM
   ═══════════════════════════════════════════════════════════════ */
#dpi-form-pg{width:100%;padding:0 0 40px}
.dpi-form-wrap{max-width:780px;width:100%;margin:0 auto;padding:24px 16px}
.dpi-form-hdr{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #e5e7eb}
.dpi-form-logo-ico{width:48px;height:48px;border-radius:12px;background:#E35B6A;color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dpi-form-title{font-size:20px;font-weight:700;color:var(--ink,#1a1a2e);margin:0 0 4px}
.dpi-form-sub{font-size:14px;color:var(--ink2,#4b5563)}
.dpi-form-progress{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dpi-progress-bar{flex:1;height:6px;border-radius:3px;background:#e5e7eb;overflow:hidden}
.dpi-progress-fill{height:100%;border-radius:3px;background:#E35B6A;transition:width .3s}
.dpi-progress-cnt{font-size:12px;font-weight:600;color:var(--ink2,#4b5563);white-space:nowrap}
.dpi-scale-legend{font-size:11px;color:var(--ink3,#9ca3af);margin-bottom:20px;line-height:1.6}
.dpi-qcard{display:flex;gap:12px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:14px 16px;margin-bottom:8px;transition:border-color .2s}
.dpi-qcard--done{border-color:#2FAE7B;background:#f6fdf9}
.dpi-qnum{width:28px;height:28px;border-radius:50%;background:#f3f4f6;color:var(--ink2,#4b5563);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.dpi-qbody{flex:1;min-width:0}
.dpi-qtext{font-size:14px;color:var(--ink,#1a1a2e);margin-bottom:10px;line-height:1.5}
.dpi-opts{display:flex;flex-wrap:wrap;gap:6px}
.dpi-opt{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#f9fafb;cursor:pointer;font-size:12px;transition:all .15s;user-select:none}
.dpi-opt input[type="radio"]{display:none}
.dpi-opt:hover{border-color:#E35B6A;background:#fff5f5}
.dpi-opt--sel{border-color:#E35B6A;background:#ffe9ec;color:#E35B6A;font-weight:600}
.dpi-opt-num{font-weight:700;font-size:13px}
.dpi-opt-lbl{color:inherit}
.dpi-form-footer{margin-top:24px;text-align:center}
.dpi-sub-err{padding:10px 14px;border-radius:8px;background:#ffe9ec;color:#E35B6A;font-size:13px;margin-bottom:12px;border:1px solid #fca5a5}
.dpi-submit-btn{background:#E35B6A;color:#fff;border:none;border-radius:10px;padding:12px 32px;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s}
.dpi-submit-btn:hover{background:#c44;} .dpi-submit-btn:disabled{opacity:.6;cursor:not-allowed}
.dpi-pg-loading{display:flex;align-items:center;justify-content:center;min-height:40vh;font-size:16px;color:var(--ink2,#4b5563);gap:10px}
.dpi-pg-msg{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:40px 24px}
.dpi-pg-msg h2{font-size:22px;font-weight:700;margin:12px 0 8px}
.dpi-pg-msg p{color:var(--ink2,#4b5563);font-size:14px}
.dpi-pg-msg--ok .dpi-pg-ico{font-size:48px;color:#2FAE7B}
.dpi-pg-msg--err .dpi-pg-ico{font-size:48px;color:#E35B6A}

/* ═══════════════════════════════════════════════════════════════
   DPI — ADMIN RESULT VIEW
   ═══════════════════════════════════════════════════════════════ */
.dpi-res-hdr{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--bg2,#e5e7eb)}
.dpi-res-name{font-size:22px;font-weight:700;color:var(--ink)}
.dpi-res-meta{font-size:13px;color:var(--ink3);margin-top:4px}
.dpi-im-block{padding:14px 16px;border-radius:10px;margin-bottom:24px}
.dpi-im-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.dpi-im-label{font-size:13px;font-weight:600;color:var(--ink2)}
.dpi-im-score{font-size:18px;font-weight:800}
.dpi-im-barwrap{height:8px;border-radius:4px;background:rgba(0,0,0,.1);overflow:hidden;margin-bottom:6px}
.dpi-im-barfill{height:100%;border-radius:4px;transition:width .4s}
.dpi-im-lvl{font-size:12px;font-weight:600}
.dpi-section-ttl{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 12px;padding-top:4px}
.dpi-lvl{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.dpi-scales-tbl td{vertical-align:top;padding:8px 10px}
.dpi-scales-tbl th{font-size:11px}
.dpi-desc-expand{font-size:12px;color:var(--acc,#7B5EA7);cursor:pointer;white-space:nowrap;background:none;border:none;padding:0;font-family:var(--font)}
.dpi-desc-expand:hover{text-decoration:underline}
.dpi-desc-sec{font-size:12px;color:var(--ink2);margin-bottom:6px;line-height:1.5}
.dpi-desc-sec b{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════
   DPI — VISUALIZATION (bar chart grouped by cluster)
   ═══════════════════════════════════════════════════════════════ */
.dpi-viz-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:18px}
.dpi-viz-leg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink2)}
.dpi-viz-leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dpi-viz-cluster{border-radius:10px;overflow:hidden;border:1px solid var(--bg2,#e5e7eb);margin-bottom:12px;break-inside:avoid;page-break-inside:avoid}
.dpi-viz-cl-hdr{padding:9px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dpi-viz-cl-name{font-size:11px;font-weight:800;flex:1;text-transform:uppercase;letter-spacing:.3px}
.dpi-viz-cl-score{font-size:13px;font-weight:700}
.dpi-viz-row{display:flex;align-items:center;gap:10px;padding:5px 14px;border-top:1px solid rgba(0,0,0,.05);background:var(--sur,#fff);min-height:30px;break-inside:avoid;page-break-inside:avoid}
.dpi-viz-sc-name{font-size:12px;color:var(--ink);width:230px;flex-shrink:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpi-viz-track{flex:1;position:relative;height:10px;border-radius:5px;overflow:visible;background:linear-gradient(to right,#e6f9f2 30%,#fff6dd 30%,#fff6dd 53%,#fff0e0 53%,#fff0e0 73%,#ffe9ec 73%);border:1px solid rgba(0,0,0,.08)}
.dpi-viz-marker{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.28);transform:translate(-50%,-50%);z-index:2}
.dpi-viz-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:9px;font-weight:800;white-space:nowrap;pointer-events:none;line-height:1}
.dpi-viz-score{font-size:11px;font-weight:700;width:32px;text-align:right;flex-shrink:0}
.dpi-viz-icon{width:14px;text-align:center;flex-shrink:0;font-size:12px;line-height:1}
@media(max-width:560px){
  .dpi-viz-sc-name{width:140px;font-size:11px}
  .dpi-viz-tip{font-size:8px}
}

/* ═══════════════════════════════════════════════════════════════
   PRINT — window.print() вместо html2pdf
   Браузер реформатирует контент нативно: break-inside:avoid
   работает без гэпов (html2pdf резал bitmap — отсюда были пустоты).
   ═══════════════════════════════════════════════════════════════ */
.card{break-inside:auto;page-break-inside:auto}

@media print{
  /* Скрываем интерфейс приложения */
  #sidebar,#hdr,#apibar,#toast,
  [data-act="val-export"],[data-act="val-export-candidate"],[data-act="val-list"],
  [data-act="dpi-export"],[data-act="dpi-export-participant"],[data-act="dpi-list"],
  [data-act="dpi-new"],[data-act="dpi-view"],[data-act="dpi-del"],
  [data-act="pif-list"],[data-act="pif-export"],[data-act="pif-export-candidate"]{
    display:none!important;
  }
  /* Страница A4 */
  @page{size:A4 portrait;margin:12mm 10mm}
  /* КРИТИЧНО: сбрасываем высоту всей цепочки контейнеров.
     html/body/app/main имеют height:100vh и overflow:hidden —
     браузер видит только первый экран. Сбрасываем все ограничения. */
  html,body{
    height:auto!important;min-height:0!important;
    overflow:visible!important;background:#fff!important;
  }
  #app{
    display:block!important;
    height:auto!important;min-height:0!important;
    overflow:visible!important;
  }
  #main{
    display:block!important;
    height:auto!important;min-height:0!important;
    overflow:visible!important;
    width:100%!important;margin:0!important;padding:0!important;
  }
  #content{
    display:block!important;
    height:auto!important;min-height:0!important;
    overflow:visible!important;
    width:100%!important;max-width:none!important;
    padding:8px 0!important;margin:0!important;background:#fff!important;
  }
  /* Карточки — не разрезать (если умещаются на странице) */
  .card{break-inside:avoid;page-break-inside:avoid;box-shadow:none!important;margin-bottom:6px!important}
  /* Блоки ценностей — не разрезать */
  [data-vcard]{break-inside:avoid;page-break-inside:avoid}
  /* Canvas — не разрезать */
  canvas{break-inside:avoid;page-break-inside:avoid;max-width:100%!important}
  /* Таблицы — не обрезать ячейки */
  tr{break-inside:avoid;page-break-inside:avoid}
  /* Секция «Интерпретация» — большой контейнер, разрывы разрешены между карточками */
  [data-interp-section]{break-inside:auto!important;page-break-inside:auto!important}
  /* Секция взаимодействий внутри интерпретации — тоже крупная */
  [data-interp-section]>div{break-inside:auto!important;page-break-inside:auto!important}
  /* IM-блок и диаграммы — лучше начинать с чистой страницы, если не помещаются */
  [data-im-block]{break-inside:avoid;page-break-inside:avoid}
  /* Строки из renderRows — не разрезать по полчтроки */
  [data-vbehavior],[data-vrisk],[data-vmot],[data-vdem],[data-vatt],[data-vrec]{
    break-inside:avoid;page-break-inside:avoid
  }
}

/* ═══════════════════════════════════════════════════════════════
   Кандидатский PDF-режим: нейтральные цвета, без оценочных меток
   Активируется атрибутом body[data-pdf-mode="candidate"] во время
   выгрузки. После сохранения PDF атрибут снимается.
   Используем !important, потому что у элементов есть inline-style.
   ═══════════════════════════════════════════════════════════════ */
[data-pdf-mode="candidate"] [data-vcard]{
  background:#ffffff!important;
  border-color:#e2e8f0!important;
}
[data-pdf-mode="candidate"] [data-vbadge],
[data-pdf-mode="candidate"] [data-vscore]{
  background:#f7fafc!important;
  border-color:#e2e8f0!important;
  color:#2d3748!important;
}
[data-pdf-mode="candidate"] [data-vband]{display:none!important}
[data-pdf-mode="candidate"] [data-videal]{display:none!important}
[data-pdf-mode="candidate"] [data-vrisk]{display:none!important}
[data-pdf-mode="candidate"] [data-vatt]{display:none!important}
[data-pdf-mode="candidate"] [data-vrec]{display:none!important}
[data-pdf-mode="candidate"] [data-vdem]{display:none!important}
/* «Мотивирует» нейтрализуем по цвету, но оставляем — это полезно кандидату */
[data-pdf-mode="candidate"] [data-vmot]{color:#4a5568!important}
/* Итог соответствия профилю компании — скрыть для кандидата */
[data-pdf-mode="candidate"] [data-vprofile]{display:none!important}
/* Таблица «Обзор всех 19 ценностей» — скрыть для кандидата */
[data-pdf-mode="candidate"] [data-vgrid]{display:none!important}
/* Галочки ключевых ценностей и их легенда — скрыть для кандидата */
[data-pdf-mode="candidate"] [data-vkeymark]{display:none!important}
[data-pdf-mode="candidate"] [data-vkeylgd]{display:none!important}
/* Секция «Интерпретация ценностного профиля» — скрыть для кандидата */
[data-pdf-mode="candidate"] [data-interp-section]{display:none!important}

/* ═══════════════════════════════════════════════════════════════
   DPI PDF-режимы
   dpi-hr      — полный отчёт для HR (описания шкал видны)
   dpi-participant — упрощённый (описания скрыты)
   ═══════════════════════════════════════════════════════════════ */
/* В HR-режиме: показываем описания */
body[data-pdf-mode="dpi-hr"] .dpi-hr-only{display:table-cell!important}
body[data-pdf-mode="dpi-hr"] div.dpi-hr-only{display:block!important}
body[data-pdf-mode="dpi-hr"] .dpi-hr-block{display:block!important}
body[data-pdf-mode="dpi-hr"] .dpi-desc-expand{display:none!important}
body[data-pdf-mode="dpi-hr"] [id^="dpi-dexp-"]{display:table-cell!important}
/* В participant-режиме: скрываем описания и таблицу */
body[data-pdf-mode="dpi-participant"] .dpi-hr-only{display:none!important}
body[data-pdf-mode="dpi-participant"] .dpi-hr-block{display:none!important}
/* Общие правила для DPI при печати */
body[data-pdf-mode^="dpi"] #sidebar,
body[data-pdf-mode^="dpi"] #hdr,
body[data-pdf-mode^="dpi"] #apibar{display:none!important}
body[data-pdf-mode^="dpi"] #app{display:block!important;height:auto!important;overflow:visible!important}
body[data-pdf-mode^="dpi"] #main{display:block!important;height:auto!important;overflow:visible!important;width:100%!important;margin:0!important;padding:0!important}
body[data-pdf-mode^="dpi"] #content{display:block!important;height:auto!important;overflow:visible!important;width:100%!important;padding:8px 0!important}
body[data-pdf-mode^="dpi"] .tbl-wrap{overflow:visible!important}
body[data-pdf-mode^="dpi"] .dpi-desc-expand{display:none!important}
body[data-pdf-mode^="dpi"] #dpi-result-card{box-shadow:none!important;break-inside:auto!important;page-break-inside:auto!important}

/* ═══════════════════════════════════════════════════════════════
   DPI — TOP GRID (IM bar + cluster overview, Round 3)
   ═══════════════════════════════════════════════════════════════ */
.dpi-top-grid{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.dpi-im-card{flex:0 0 300px;padding:16px;border-radius:10px;border:1px solid;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.dpi-im-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.dpi-im-lbl{font-size:12px;font-weight:600;color:var(--ink2)}
.dpi-im-val{font-size:20px;font-weight:800}
.dpi-im-track{position:relative;height:12px;border-radius:6px;overflow:visible;margin-bottom:8px;background:linear-gradient(to right,#e6f9f2 30%,#fff6dd 30%,#fff6dd 57%,#ffe9ec 57%);border:1px solid rgba(0,0,0,.08);print-color-adjust:exact;-webkit-print-color-adjust:exact}
.dpi-im-lvl-txt{font-size:12px;font-weight:600}
.dpi-cls-overview{flex:1;min-width:260px;border:1px solid var(--bg2);border-radius:10px;overflow:hidden}
.dpi-cls-mini-hdr{padding:8px 14px;font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.3px;background:var(--bg);border-bottom:1px solid var(--bg2)}
.dpi-cls-mini-row{display:flex;align-items:center;gap:8px;padding:5px 12px;border-bottom:1px solid rgba(0,0,0,.04);background:var(--sur);print-color-adjust:exact;-webkit-print-color-adjust:exact}
.dpi-cls-mini-row:last-child{border-bottom:none}
.dpi-cls-mini-name{font-size:11px;font-weight:700;width:110px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpi-cls-mini-score{font-size:12px;font-weight:700;width:30px;text-align:right;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════════
   DPI — SECTION CARDS (visual separation, Round 3)
   ═══════════════════════════════════════════════════════════════ */
.dpi-sect-card{background:var(--bg,#f4f5f7);border-radius:12px;padding:18px;margin-bottom:16px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.dpi-sect-hdr{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.dpi-sect-hdr::before{content:'';width:3px;height:14px;border-radius:2px;background:var(--acc,#7B5EA7);display:block;flex-shrink:0;print-color-adjust:exact;-webkit-print-color-adjust:exact}

/* ═══════════════════════════════════════════════════════════════
   DPI — RISK HIGHLIGHT (Описания шкал, Round 3)
   ═══════════════════════════════════════════════════════════════ */
.dpi-desc-risk{border-left:3px solid #fca5a5;background:#fff9f9;padding:4px 8px;border-radius:0 4px 4px 0;margin-top:4px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.dpi-desc-risk b{color:var(--red,#B83232)!important}

/* ═══════════════════════════════════════════════════════════════
   DPI — PRINT COLOR ACCURACY
   Без этого браузер не печатает фоновые цвета/градиенты
   ═══════════════════════════════════════════════════════════════ */
.dpi-viz-track,.dpi-viz-marker,.dpi-viz-cl-hdr,.dpi-lvl{print-color-adjust:exact;-webkit-print-color-adjust:exact}
body[data-pdf-mode^="dpi"]{print-color-adjust:exact;-webkit-print-color-adjust:exact}
@media print{
  body[data-pdf-mode^="dpi"]{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .dpi-sect-card,.dpi-im-card,.dpi-im-track,.dpi-viz-track,.dpi-viz-marker,
  .dpi-viz-cl-hdr,.dpi-cls-mini-row,.dpi-lvl,.dpi-desc-risk{
    print-color-adjust:exact;-webkit-print-color-adjust:exact
  }
}

/* ═══════════════════════════════════════════════════════════════
   PiF-Q — ОЦЕНКА ПОТЕНЦИАЛА
   ═══════════════════════════════════════════════════════════════ */

/* ── Public form ─────────────────────────────────────────────── */
#pif-form-pg{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:0 0 40px;background:#f4f5f7}
.pif-form-wrap{max-width:780px;width:100%;margin:0 auto;padding:24px 16px}
.pif-form-hdr{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #e5e7eb}
.pif-form-logo-ico{width:48px;height:48px;border-radius:12px;background:#0E7490;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pif-form-title{font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 4px}
.pif-form-sub{font-size:14px;color:#4b5563;line-height:1.5}
.pif-form-progress{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pif-progress-bar{flex:1;height:6px;border-radius:3px;background:#e5e7eb;overflow:hidden}
.pif-progress-fill{height:100%;border-radius:3px;background:#0E7490;transition:width .3s}
.pif-progress-cnt{font-size:12px;font-weight:600;color:#4b5563;white-space:nowrap}
.pif-scale-legend{font-size:11px;color:#9ca3af;margin-bottom:20px;line-height:1.8}
.pif-qcard{display:flex;gap:12px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:14px 16px;margin-bottom:8px;transition:border-color .2s}
.pif-qcard--done{border-color:#0E7490;background:#f0fdfd}
.pif-qnum{width:28px;height:28px;border-radius:50%;background:#f3f4f6;color:#4b5563;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.pif-qbody{flex:1;min-width:0}
.pif-qtext{font-size:14px;color:#1a1a2e;margin-bottom:10px;line-height:1.5}
.pif-opts{display:flex;flex-wrap:wrap;gap:6px}
.pif-opt{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#f9fafb;cursor:pointer;font-size:12px;transition:all .15s;user-select:none}
.pif-opt input[type="radio"]{display:none}
.pif-opt:hover{border-color:#0E7490;background:#f0fdfd}
.pif-opt--sel{border-color:#0E7490;background:#CFFAFE;color:#0E7490;font-weight:600}
.pif-opt-num{font-weight:700;font-size:13px}
.pif-form-footer{margin-top:24px;text-align:center}
.pif-sub-err{padding:10px 14px;border-radius:8px;background:#FEE2E2;color:#DC2626;font-size:13px;margin-bottom:12px;border:1px solid #FECACA;text-align:left}
.pif-submit-btn{background:#0E7490;color:#fff;border:none;border-radius:10px;padding:13px 36px;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s;font-family:inherit}
.pif-submit-btn:hover{background:#0c6478}
.pif-submit-btn:disabled{opacity:.6;cursor:not-allowed}
.pif-pg-loading{display:flex;align-items:center;justify-content:center;min-height:60vh;font-size:16px;color:#4b5563;gap:12px}
.pif-pg-msg{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:40px 24px}
.pif-pg-msg h2{font-size:22px;font-weight:700;margin:12px 0 8px;color:#1a1a2e}
.pif-pg-msg p{color:#4b5563;font-size:14px;line-height:1.6}
.pif-pg-ico{font-size:52px;line-height:1}
.pif-pg-msg--ok .pif-pg-ico{color:#059669}
.pif-pg-msg--err .pif-pg-ico{color:#DC2626}
.pif-spin{display:inline-block;width:22px;height:22px;border:2.5px solid rgba(14,116,144,.2);border-top-color:#0E7490;border-radius:50%;animation:sp .7s linear infinite;vertical-align:middle;flex-shrink:0}

/* ── Result view ─────────────────────────────────────────────── */
.pif-res-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.pif-res-body{display:flex;flex-direction:column;gap:16px}

.pif-info-row{display:flex;flex-wrap:wrap;gap:8px;background:var(--sur);border:1px solid var(--bg2);border-radius:10px;padding:14px 16px}
.pif-info-field{flex:1;min-width:120px}
.pif-info-lbl{font-size:11px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.pif-info-val{font-size:13px;font-weight:600;color:var(--ink)}

/* Score card */
.pif-score-card{border:1px solid;border-radius:12px;padding:18px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.pif-score-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:8px}
.pif-score-lbl{font-size:14px;font-weight:700;color:var(--ink)}
.pif-score-sub{font-size:11px;color:var(--ink3);margin-top:2px}
.pif-score-val{font-size:36px;font-weight:800;line-height:1;flex-shrink:0}
.pif-score-track-wrap{position:relative}
.pif-score-track{position:relative;height:14px;border-radius:7px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.pif-score-zones{display:flex;height:100%;border-radius:7px;overflow:hidden}
.pif-zone{height:100%}
.pif-score-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2);z-index:2;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.pif-score-tip{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;white-space:nowrap}
.pif-score-ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--ink3);margin-top:4px;padding:0 2px}
.pif-lvl-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}

/* Block cards */
.pif-block-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:700px){.pif-block-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.pif-block-grid{grid-template-columns:1fr}}
.pif-block-card{border-radius:10px;padding:14px;background:var(--sur);print-color-adjust:exact;-webkit-print-color-adjust:exact}
.pif-block-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px}
.pif-block-val{font-size:24px;font-weight:800;line-height:1.1}
.pif-block-lvl{font-size:11px;font-weight:600;margin-top:2px}
.pif-mini-track{height:6px;border-radius:3px;background:rgba(0,0,0,.08);overflow:hidden}
.pif-mini-fill{height:100%;border-radius:3px;transition:width .3s;print-color-adjust:exact;-webkit-print-color-adjust:exact}

/* Legend */
.pif-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--ink3);margin-bottom:8px}
.pif-leg-item{display:flex;align-items:center;gap:5px}
.pif-leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;print-color-adjust:exact;-webkit-print-color-adjust:exact}

/* Section title */
.pif-sec-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px}

/* Section cards */
.pif-sect-card{background:var(--bg,#f4f5f7);border-radius:12px;padding:18px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.pif-sect-hdr{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.pif-sect-hdr::before{content:'';width:3px;height:14px;border-radius:2px;background:var(--pif-acc,#0E7490);display:block;flex-shrink:0}
.pif-sect-hdr--destr{color:#B91C1C}
.pif-sect-hdr--destr::before{background:#DC2626}
.pif-sect-block-badge{font-size:10px;font-weight:700;color:#fff;padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.4px}
.pif-sect-addl{border-left:3px solid #6B7280}
.pif-sect-destr{border-left:3px solid #DC2626;background:#FFF9F9}

/* Scale row */
.pif-viz-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid rgba(0,0,0,.05);min-height:30px;break-inside:avoid;page-break-inside:avoid}
.pif-viz-row--destr{background:rgba(220,38,38,.04);margin:0 -4px;padding-left:4px;padding-right:4px;border-radius:4px}
.pif-viz-code{font-size:11px;font-weight:700;width:42px;flex-shrink:0}
.pif-viz-name{font-size:12px;color:var(--ink);width:200px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pif-viz-track{flex:1;height:8px;border-radius:4px;overflow:visible;position:relative;background:rgba(0,0,0,.06)}
.pif-viz-track--destr{background:rgba(220,38,38,.1)}
.pif-viz-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2);z-index:1;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.pif-viz-tip{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;white-space:nowrap}
.pif-viz-score{font-size:12px;font-weight:700;width:34px;text-align:right;flex-shrink:0}
.pif-lvl-sm{display:inline-block;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:700;white-space:nowrap;flex-shrink:0;print-color-adjust:exact;-webkit-print-color-adjust:exact}

/* PDF — hide UI chrome */
body[data-pdf-mode^="pif"] #sidebar,
body[data-pdf-mode^="pif"] #hdr,
body[data-pdf-mode^="pif"] #apibar{display:none!important}
body[data-pdf-mode^="pif"] #app{display:block!important;height:auto!important;overflow:visible!important}
body[data-pdf-mode^="pif"] #main{display:block!important;height:auto!important;overflow:visible!important;width:100%!important;margin:0!important;padding:0!important}
body[data-pdf-mode^="pif"] #content{display:block!important;height:auto!important;overflow:visible!important;width:100%!important;padding:8px 0!important}
body[data-pdf-mode^="pif"] .tbl-wrap{overflow:visible!important}
body[data-pdf-mode^="pif"] .pif-res-hdr,
body[data-pdf-mode^="pif"] .btn-sm[data-act="pif-list"]{display:none!important}
/* кандидату: скрыть деструкторы */
body[data-pdf-mode="pif-candidate"] .pif-sect-destr{display:none!important}

body[data-pdf-mode^="pif"]{print-color-adjust:exact;-webkit-print-color-adjust:exact}
@media print{
  body[data-pdf-mode^="pif"]{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .pif-score-card,.pif-block-card,.pif-mini-fill,.pif-score-marker,.pif-score-zones,
  .pif-viz-marker,.pif-lvl-sm,.pif-lvl-badge,.pif-sect-card{
    print-color-adjust:exact;-webkit-print-color-adjust:exact
  }
}

/* Mobile adjustments */
@media(max-width:560px){
  .pif-viz-name{width:120px;font-size:11px}
  .pif-opts{flex-direction:column}
}