:root{
  --brand:#5427c9; --brand-d:#2f0f86; --brand-l:#efe9ff;
  --or:#ff8a1d; --te:#1fbfae; --pk:#e0367a; --gr:#22a565;
  --bg:#f4f1fb; --card:#fff; --ink:#1d1340; --ink2:#4a4170; --mut:#8a83a8; --line:#e8e2f6;
  --ok:#14966a; --bad:#e0434f; --warn:#e07a00;
  --r:18px; --sh:0 1px 2px rgba(47,15,134,.06),0 8px 24px rgba(47,15,134,.07);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.noscroll{overflow:hidden}
h1,h2,h3,h4{font-family:Unbounded,Onest,sans-serif;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* login */
#login{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(120% 90% at 20% 10%,#6a37e6 0,#4b1fbf 45%,#2a0b7a 100%);overflow:auto}
.lg-card{width:min(380px,100%);text-align:center;color:#fff;display:flex;flex-direction:column;gap:10px}
.lg-card img{width:160px;margin:0 auto;border-radius:24px;box-shadow:0 20px 60px rgba(10,0,40,.45)}
.lg-card h1{font-size:24px;margin:14px 0 0}
.lg-card p{margin:0 0 10px;color:#dcd2ff}
.lg-card .inp{padding:13px 14px;border:0}
.lg-card .btn{padding:13px}
.lg-err{min-height:20px;color:#ffd0d6;font-size:14px}
.btn.tg{background:#fff;color:#1d1340;padding:13px;text-decoration:none}
.btn.tg svg{color:#29a8e8;width:20px;height:20px}
.lg-or{font-size:13px;color:#c9bdf5;margin:4px 0}
.roles{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.rl{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;font-weight:600;cursor:pointer}
.rl:has(input:checked){border-color:var(--brand);background:var(--brand-l)}
.rl input{width:18px;height:18px;accent-color:var(--brand)}
.rl small{display:block;font-weight:500;color:var(--mut);font-size:12px}
.linkbox{display:flex;gap:8px;margin-top:10px}
.linkbox .inp{font-size:13px}
.tgn{font-size:12.5px;color:var(--mut)}

/* layout */
#app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;padding:22px 14px;background:linear-gradient(180deg,var(--brand) 0,#3d14a8 60%,var(--brand-d) 100%);color:#fff;display:flex;flex-direction:column;gap:4px}
.side .logo{display:flex;align-items:center;gap:12px;padding:0 6px 18px}
.side .logo img{width:54px;height:54px;border-radius:14px}
.side .logo b{font-family:Unbounded;font-size:15px;display:block}
.side .logo span{font-size:12px;color:#cdbfff}
.nav{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:12px;background:transparent;color:#e6ddff;font-weight:600;text-align:left}
.nav svg{width:20px;height:20px;flex:none}
.nav:hover{background:rgba(255,255,255,.08)}
.nav.on{background:#fff;color:var(--brand-d)}
.nav .cnt{margin-left:auto;font-size:12px;background:var(--or);color:#fff;border-radius:999px;padding:1px 8px}
.side .sp{flex:1}
.side .me{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:rgba(255,255,255,.1);font-size:13px}
.lnk{border:0;background:none;color:inherit;opacity:.8;padding:0;text-decoration:underline;font-size:13px}
main{min-width:0;padding:0 26px 60px}
.top{display:flex;align-items:center;gap:12px;padding:22px 0 16px;flex-wrap:wrap}
.top h2{margin:0;font-size:23px}
.top .sub{color:var(--mut);font-size:14px}
.top .grow{flex:1;min-width:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:10px 15px;font-weight:600;background:var(--brand);color:#fff;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:default}
.btn.or{background:var(--or)}
.btn.gh{background:var(--brand-l);color:var(--brand)}
.btn.ln{background:#fff;color:var(--ink2);border:1px solid var(--line)}
.btn.bad{background:#fff;color:var(--bad);border:1px solid #f5c9cd}
.btn.ok{background:var(--ok)}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:10px}
.btn svg{width:18px;height:18px}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:18px}
.card h3{margin:0 0 12px;font-size:16px}
.card h3 small,.sec h4 small{font-family:Onest;font-weight:500;color:var(--mut);font-size:13px;margin-left:6px}
.mt{margin-top:16px}
.inp,.sel{border:1px solid var(--line);background:#fff;border-radius:11px;padding:9px 11px;min-width:0;width:100%}
.inp:focus,.sel:focus{outline:2px solid #c9b8ff;border-color:#b9a4ff}
textarea.inp{resize:vertical;min-height:42px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;background:#f3f0fb;color:var(--ink2);white-space:nowrap}
.tag i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.tag.bad{background:#fff0f1;color:var(--bad)}
.tag.ok{background:#e5fbf3;color:var(--ok)}
.tag.warn{background:#fff3e2;color:var(--warn)}
.mutd{color:var(--mut)}
.pos{color:var(--ok);font-weight:700}
.neg{color:var(--bad);font-weight:700}
.empty{color:var(--mut);font-size:14px;padding:12px 4px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters .inp,.filters .sel{width:auto}
.fchip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--ink2)}
.fchip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.legend{display:flex;gap:6px;flex-wrap:wrap}

/* tables */
table.t{width:100%;border-collapse:collapse;font-size:14px}
.t th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.t tr.click{cursor:pointer}
.t tr.click:hover td{background:#faf8ff}
.t .r{text-align:right;white-space:nowrap}
.t tr.off td{opacity:.5}
.t td .inp{padding:6px 8px}

/* calendar */
.calhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.calhead h3{margin:0;font-size:19px;min-width:180px}
.icb{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:#fff;display:grid;place-items:center}
.icb svg{width:18px;height:18px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .wd{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;padding:0 6px}
.day{min-height:112px;background:#fff;border-radius:12px;padding:6px;border:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0;cursor:pointer}
.day:hover{border-color:#cbbcf5}
.day.x{background:transparent;border:1px dashed #e2dcf2;cursor:default}
.day.td .dn b{background:var(--brand);color:#fff;border-radius:8px;padding:1px 7px}
.day.sel{outline:2px solid var(--brand);outline-offset:-1px}
.day.past{background:#fbfaff}
.dn{font-size:13px;font-weight:700;color:var(--ink2)}
.chip{display:block;width:100%;text-align:left;border:0;border-radius:7px;padding:3px 6px;font-size:12px;line-height:1.3;background:color-mix(in srgb,var(--c) 14%,#fff);border-left:3px solid var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.cx{text-decoration:line-through;opacity:.5}
.dots{display:none;gap:3px;flex-wrap:wrap;justify-content:center}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.erow{display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 6px;border-radius:12px;cursor:pointer}
.erow+.erow{border-top:1px solid var(--line)}
.erow:hover{background:#faf8ff}
.erow .tm{font-weight:700;font-size:14px}
.erow .tm small{display:block;color:var(--mut);font-weight:500}

/* drawer */
.ov{position:fixed;inset:0;background:rgba(24,8,64,.45);z-index:30;opacity:0;pointer-events:none;transition:opacity .2s}
.ov.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(1140px,100%);background:var(--bg);z-index:31;transform:translateX(102%);transition:transform .26s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.dr-head{display:flex;align-items:center;gap:12px;padding:14px 22px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dr-head h2{margin:0;font-size:18px}
.dr-head .grow{flex:1;min-width:160px}
.dr-head .sub{font-size:13px;color:var(--mut)}
.dr-body{flex:1;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;padding:18px 22px 30px;align-items:start}
.dr-body>div{min-width:0}
.sec{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px}
.sec+.sec{margin-top:12px}
.sec h4{margin:0 0 12px;font-size:14.5px;display:flex;align-items:center;gap:10px}
.sec h4 .n{width:24px;height:24px;border-radius:8px;background:var(--brand-l);color:var(--brand);display:grid;place-items:center;font-size:12px}
.sec h4 small{margin-left:auto}
.fg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fg .w2{grid-column:span 2}
.fg .w4{grid-column:1/-1}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--mut)}
label.f .inp,label.f .sel{color:var(--ink);font-weight:500;font-size:14.5px}
.progs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pg{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:10px 12px;text-align:left;font-weight:700;border-left:5px solid var(--c)}
.pg.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 30%,transparent)}
.lvls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.lv{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:8px 12px;text-align:left}
.lv b{display:block;font-size:14px}
.lv span{font-size:12.5px;color:var(--mut)}
.lv.on{border-color:var(--brand);background:var(--brand-l)}
.progname{margin-top:10px;font-size:13px;color:var(--ink2);background:#faf8ff;border-radius:10px;padding:8px 12px}
.it{display:grid;gap:8px;align-items:center;padding:8px 0;border-top:1px dashed var(--line);grid-template-columns:minmax(0,1.6fr) 64px 110px 110px minmax(0,1fr) 32px}
.it.noint{grid-template-columns:minmax(0,1.6fr) 64px 110px minmax(0,1fr) 32px}
.it-h{display:grid;gap:8px;font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;padding-bottom:4px}
.it .inp,.it .sel{padding:7px 9px;font-size:14px}
.it .base{font-size:11.5px;color:var(--warn);font-weight:600}
.grp{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin:14px 0 2px;display:flex;align-items:center;gap:8px}
.grp:first-child{margin-top:0}
.grp button{margin-left:auto}
.x{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--mut);display:grid;place-items:center;font-size:18px;line-height:1;padding:0}
.x:hover{color:var(--bad);border-color:#f5c9cd}
.hint{font-size:12.5px;color:var(--mut);margin-top:8px}
.note{background:#fff8e6;border:1px solid #ffe2a3;border-radius:14px;padding:11px 13px;font-size:13.5px;color:#6a4a00}
.note.v{background:var(--brand-l);border-color:#ddd0ff;color:var(--brand-d)}
.note.bad{background:#fff0f1;border-color:#f7cfd3;color:#8a1d26}
.sum{position:sticky;top:0;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px}
.sum h4{margin:0 0 8px;font-size:14.5px}
.sum .g{font-size:11.5px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin:12px 0 2px}
.fl{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:14px}
.fl>span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.fl.tot{border-bottom:0;border-top:2px solid var(--ink);margin-top:4px;padding-top:9px;font-weight:700;font-size:15.5px}
.profit{margin-top:12px;border-radius:14px;padding:12px 14px;background:linear-gradient(135deg,#e5fbf3,#eefcf8);border:1px solid #c6f0df}
.profit.neg{background:#fff0f1;border-color:#f7cfd3}
.profit span{font-size:12px;font-weight:700;color:var(--ok);text-transform:uppercase}
.profit b{display:block;font-family:Unbounded;font-size:22px;margin-top:2px}
.dr-foot{display:flex;gap:10px;align-items:center;padding:12px 22px;background:#fff;border-top:1px solid var(--line);flex-wrap:wrap}
.dr-foot .grow{flex:1}

/* modal & toast */
.modal{position:fixed;inset:0;z-index:40;display:none;place-items:center;padding:16px;background:rgba(24,8,64,.5)}
.modal.on{display:grid}
.mbox{background:#fff;border-radius:20px;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.3);padding:20px}
.mbox h3{margin:0 0 12px;font-size:17px}
.mbox .row{display:flex;gap:8px;margin-top:14px;justify-content:flex-end;flex-wrap:wrap}
.mbox label.f{margin-top:10px}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;margin-top:10px}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:#1d1340;color:#fff;border-radius:14px;padding:11px 18px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:calc(100% - 32px);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.err{background:var(--bad)}
.perm{display:grid;grid-template-columns:1fr repeat(3,90px);gap:0;font-size:13.5px}
.perm div{padding:8px 6px;border-bottom:1px solid var(--line)}
.perm .h{font-weight:700;font-size:12px;color:var(--mut);text-transform:uppercase}
.perm .c{text-align:center}

.tabbar,.mtop{display:none}
@media (max-width:1180px){.dr-body{grid-template-columns:minmax(0,1fr)}.sum{position:static}}
@media (max-width:980px){
  #app{grid-template-columns:1fr}
  .side{display:none}
  main{padding:0 14px 90px}
  .mtop{display:flex;align-items:center;gap:10px;margin:0 -14px;padding:10px 14px;background:linear-gradient(90deg,var(--brand),#3d14a8);color:#fff;position:sticky;top:0;z-index:20}
  .mtop img{width:36px;height:36px;border-radius:10px}
  .mtop b{font-family:Unbounded;font-size:14px}
  .mtop .grow{flex:1}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));overflow-x:auto}
  .tabbar button{flex:1;min-width:64px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--mut);padding:4px 0}
  .tabbar svg{width:21px;height:21px}
  .tabbar button.on{color:var(--brand)}
  .progs{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .cal{gap:3px}
  .cal .wd{font-size:10.5px;text-align:center;padding:0}
  .day{min-height:52px;padding:4px;align-items:center}
  .day .chip{display:none}
  .dots{display:flex}
  .fg{grid-template-columns:1fr 1fr}
  .fg .w2{grid-column:1/-1}
  .it,.it.noint{grid-template-columns:1fr 1fr 32px}
  .it .nm{grid-column:1/-1}
  .it-h{display:none}
  .erow{grid-template-columns:88px minmax(0,1fr)}
  .erow>div:last-child{grid-column:2}
  .dr-head,.dr-foot{padding:10px 12px}
  .dr-body{padding:12px 10px 24px}
  .sec{padding:14px 12px}
  table.t.resp thead{display:none}
  table.t.resp,table.t.resp tbody,table.t.resp tr,table.t.resp td{display:block;width:100%}
  table.t.resp tr{padding:10px 2px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:2px 10px}
  table.t.resp td{border:0;padding:0}
  table.t.resp td.hm{display:none}
  .perm{grid-template-columns:1fr repeat(3,56px);font-size:12.5px}
}