/* Веб-кабінет initask (hub.initask.com): стиль CRM 4B2B (правило №1-И), світла тема (№1-Г).
   Ті самі блоки, що в застосунку: малюються за типом, текст лише підписує графіку. */
:root{
  --bg:#FAFAFA; --card:#FFFFFF; --line:#E5E7EB; --line2:#D1D5DB;
  --text:#111827; --dim:#374151; --muted:#4B5563; --muted2:#6B7280;
  --brand:#4F46E5; --brand2:#6366F1; --brandt:#4338CA; --brandbg:#EEF2FF;
  --nav:#ECFEFF; --navbar:#06B6D4;
  --good:#047857; --goodbg:#ECFDF5; --warn:#B45309; --warnbg:#FFFBEB; --bad:#B91C1C; --badbg:#FEF2F2;
  --info:#2563EB; --infobg:#EFF6FF; --mutedbg:#F3F4F6;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.08);
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--brandt);text-decoration:none}
.boot{display:grid;place-items:center;height:100vh;font-weight:800;font-size:28px;letter-spacing:-.02em;color:var(--brand)}
.app{min-height:100vh}
.shell{max-width:1120px;margin:0 auto;padding:16px 16px 96px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em}
.brand img{width:30px;height:30px}
.tabs{display:flex;gap:6px}
.nb{display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:9px 14px;border-radius:10px;font-weight:600;color:var(--muted);cursor:pointer}
.nb svg{width:18px;height:18px}
.nb.on{background:var(--nav);color:#0E7490;box-shadow:inset 3px 0 0 var(--navbar)}
@media (max-width:760px){
  .tabs{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);justify-content:space-around;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:10}
  .nb{flex-direction:column;gap:2px;font-size:11px;padding:6px 8px}
  .nb.on{box-shadow:none}
}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.col12{grid-column:span 12}.col6{grid-column:span 6}.col4{grid-column:span 4}.col8{grid-column:span 8}
@media (max-width:900px){.col6,.col4,.col8{grid-column:span 12}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
.card h3{margin:0 0 12px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.card .hrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px}
.card .hrow h3{margin:0}
.link{border:0;background:none;color:var(--brandt);font-weight:700;cursor:pointer;padding:0;font-size:14px}
.hero{border-color:#C7D2FE;box-shadow:inset 3px 0 0 var(--brand),var(--shadow)}
.hero h1{margin:0;font-size:28px;font-weight:800;letter-spacing:-.02em}
.hero .sub{color:var(--muted);margin:4px 0 10px;font-weight:600}
.section{grid-column:span 12;display:flex;justify-content:space-between;align-items:end;margin-top:10px}
.section h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.section .sub{color:var(--muted2);font-size:13px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:700;background:var(--mutedbg);color:var(--dim);white-space:nowrap}
.t-good{background:var(--goodbg);color:var(--good)}.t-warn{background:var(--warnbg);color:var(--warn)}.t-bad{background:var(--badbg);color:var(--bad)}
.t-info{background:var(--infobg);color:var(--info)}.t-brand{background:var(--brandbg);color:var(--brandt)}.t-muted{background:var(--mutedbg);color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:760px){.kpis{grid-template-columns:repeat(2,1fr)}.kpi .v{font-size:23px;white-space:nowrap}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px}
.kpi .v{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.kpi .l{color:var(--muted);font-size:13px;font-weight:600;margin-top:4px}
.kpi.bad .v{color:var(--bad)}.kpi.good .v{color:var(--good)}
.bars .row{display:grid;grid-template-columns:120px 1fr 92px;align-items:center;gap:10px;margin:8px 0}
.bars .lbl{font-weight:600;font-size:13.5px;color:var(--dim)}
.bars .track{height:14px;background:var(--mutedbg);border-radius:8px;overflow:hidden}
.bars .fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));border-radius:8px;transform-origin:left;animation:grow .6s ease-out both}
.bars .num{text-align:right;font-weight:700;font-size:13px}
.bars .num small{display:block;color:var(--muted2);font-weight:600}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.bars .fill,.ring circle{animation:none!important;transition:none!important}}
.ringwrap{display:flex;align-items:center;gap:18px}
.ring{width:132px;height:132px;flex:none}
.ring .cv{font-size:24px;font-weight:800;letter-spacing:-.02em}
.ring .cl{font-size:11px;font-weight:600;fill:var(--muted)}
.legend{display:flex;flex-direction:column;gap:8px}
.legend .it{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.people .p{display:grid;grid-template-columns:1fr 64px;gap:4px 12px;padding:10px 0;border-top:1px solid var(--line)}
.people .p:first-child{border-top:0}
.people .n{font-weight:700}
.people .m{color:var(--muted2);font-size:12.5px;font-weight:600}
.people .pct{grid-row:span 2;align-self:center;text-align:right;font-weight:800;font-size:20px}
.people .bar{grid-column:1/-1;height:6px;background:var(--mutedbg);border-radius:4px;overflow:hidden}
.people .bar i{display:block;height:100%;border-radius:4px}
.people .chips{grid-column:1/-1}
.gaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gap{border-radius:10px;padding:10px 12px}
.gap b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em}
.gap span{font-size:12.5px;font-weight:700}
.steps{display:flex;align-items:end;gap:8px;height:120px;padding-top:8px}
.steps .s{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:end}
.steps .col{width:100%;background:linear-gradient(180deg,var(--brand2),var(--brand));border-radius:6px 6px 2px 2px;min-height:3px}
.steps .s b{font-size:13px}.steps .s small{font-size:11px;color:var(--muted2);font-weight:700}
.list .li{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.list .li:first-child{border-top:0}
.list .li .dot{margin-top:6px}
.list .ti{font-weight:700}.list .su{color:var(--muted);font-size:13px;margin-top:2px}
.list .me{text-align:right;font-weight:700;font-size:13px;white-space:nowrap}.list .me small{display:block;color:var(--muted2);font-weight:600}
.notice{display:flex;justify-content:space-between;align-items:center;gap:12px}
.notice .ti{font-weight:800}.notice .tx{color:var(--dim);font-size:14px;margin-top:2px}
.notice.t-warn{border-color:#FCD34D}.notice.t-bad{border-color:#FCA5A5}.notice.t-brand{border-color:#C7D2FE}
.btn{border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer;background:var(--brand);color:#fff;white-space:nowrap}
.btn:hover{background:var(--brandt)}
.btn.ghost{background:#fff;color:var(--brandt);border:1px solid #C7D2FE}
.btn.sm{padding:7px 12px;font-size:13px}
.btn:disabled{opacity:.6;cursor:default}
.tasks .tk{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.tasks .tk:first-child{border-top:0}
.check{width:24px;height:24px;border-radius:7px;border:2px solid var(--line2);background:#fff;cursor:pointer;display:grid;place-items:center}
.check.on{background:var(--good);border-color:var(--good);color:#fff}
.check.doing{border-color:var(--info);box-shadow:inset 0 0 0 4px #fff;background:var(--info)}
.tk .ti{font-weight:700}.tk .no{color:var(--muted);font-size:13px;margin-top:2px}
.tk.done .ti{color:var(--muted2);text-decoration:line-through}
.agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.ag{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff;cursor:pointer;text-align:left}
.ag:hover{border-color:#C7D2FE}
.ag .r{font-weight:700;font-size:14px;margin-bottom:6px}
.ag .d{color:var(--muted2);font-size:12px;font-weight:600;margin-bottom:8px}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.field label{font-size:13px;font-weight:700;color:var(--muted)}
.input{border:1px solid var(--line2);border-radius:10px;padding:11px 12px;background:#fff;width:100%}
.input:focus{outline:2px solid #C7D2FE;border-color:var(--brand)}
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login .card{width:100%;max-width:400px;padding:24px}
.login h1{margin:8px 0 4px;font-size:26px;font-weight:800;letter-spacing:-.02em}
.login p{color:var(--muted);margin:0 0 12px}
.err{color:var(--bad);font-weight:700;font-size:13px;min-height:18px}
.sheet{position:fixed;inset:0;background:rgba(17,24,39,.4);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet .card{width:100%;max-width:560px;max-height:88vh;overflow:auto;border-radius:16px 16px 0 0;padding:20px}
@media (min-width:761px){.sheet{align-items:center}.sheet .card{border-radius:16px}}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0}
.flow .st{background:var(--brandbg);color:var(--brandt);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:700}
.flow .ar{color:var(--muted2)}
.money{display:flex;gap:10px;margin:12px 0}
.money div{flex:1;background:var(--mutedbg);border-radius:10px;padding:10px}
.money b{display:block;font-size:20px;font-weight:800}.money span{font-size:12px;font-weight:700;color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:24px 8px;font-weight:600}
.dept{margin:18px 0 8px;font-weight:800;font-size:15px}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}