:root{
  --bg:#f5f7f7; --card:#ffffff; --ink:#0f1f1d; --muted:#5b6b69; --line:#e2e8e7;
  --brand:#0f766e; --brand-2:#14b8a6; --brand-ink:#ffffff;
  --won:#15803d; --won-bg:#dcfce7; --lost:#b42318; --lost-bg:#fee4e2; --act:#1d4ed8; --act-bg:#dbeafe; --wait:#8a6100; --wait-bg:#fef3c7;
  --bar-won:#16a34a; --bar-lost:#dc2626; --bar-other:#94a3b8; --bar-sum:#0f766e;
  --radius:12px; --shadow:0 1px 2px rgba(15,31,29,.06),0 4px 16px rgba(15,31,29,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1312; --card:#111c1b; --ink:#e6efee; --muted:#93a4a2; --line:#1f2e2c;
    --brand:#2dd4bf; --brand-2:#14b8a6; --brand-ink:#04201d;
    --won:#4ade80; --won-bg:#0f2e1c; --lost:#f87171; --lost-bg:#3a1414; --act:#93c5fd; --act-bg:#132440; --wait:#fbbf24; --wait-bg:#33260a;
    --bar-won:#22c55e; --bar-lost:#ef4444; --bar-other:#475569; --bar-sum:#2dd4bf;
    --shadow:none;
  }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--brand)}
button,input,select{font:inherit;color:inherit}
.muted,.hint{color:var(--muted)}
.hint{font-size:12px;margin:2px 0 8px}

/* шапка */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--card);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;min-width:max-content}
.brand b{display:block;letter-spacing:.3px}
.brand small{display:block;color:var(--muted);font-size:12px}
.logo{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--brand);color:var(--brand-ink);font-weight:700}
.tabs{display:flex;gap:4px;overflow-x:auto;flex:1}
.tabs button{border:0;background:none;padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--muted);white-space:nowrap}
.tabs button.on{background:var(--bg);color:var(--ink);font-weight:600}
.user{display:flex;align-items:center;gap:8px;color:var(--muted);white-space:nowrap}
.user form{margin:0}
.link{border:0;background:none;color:var(--brand);cursor:pointer;padding:4px}

/* панель фильтров */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 20px}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:6px 10px;border-radius:7px;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--brand);color:var(--brand-ink)}
select,input[type=search]{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:7px 10px}
input[type=search]{min-width:260px;flex:1;max-width:420px}
.fresh{margin-left:auto;color:var(--muted);font-size:12px}

main{padding:0 20px 40px;max-width:1400px;margin:0 auto}
.pane{display:none}.pane.on{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.card h3{margin:0 0 2px;font-size:15px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.chk{display:flex;align-items:center;gap:6px;color:var(--muted)}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px}
.kpi .l{color:var(--muted);font-size:12px}
.kpi .v{font-size:26px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi .s{color:var(--muted);font-size:12px;margin-top:2px}
.kpi.won .v{color:var(--won)} .kpi.lost .v{color:var(--lost)}

/* таблицы */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:12px;white-space:nowrap;position:sticky;top:0;background:var(--card)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr:hover td{background:color-mix(in srgb,var(--bg) 70%,transparent)}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;white-space:nowrap}
.b-won{background:var(--won-bg);color:var(--won)} .b-lost{background:var(--lost-bg);color:var(--lost)}
.b-active{background:var(--act-bg);color:var(--act)} .b-wait,.b-cancelled{background:var(--wait-bg);color:var(--wait)}
.neg{color:var(--lost)} .pos{color:var(--won)}
.sub{display:block;color:var(--muted);font-size:12px}
.empty{color:var(--muted);padding:18px 4px}

/* графики */
.chart{width:100%;min-height:220px}
.chart svg{display:block;max-width:100%;height:auto}
.chart text{fill:var(--muted);font-size:11px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.lg-won{background:var(--bar-won)} .lg-lost{background:var(--bar-lost)} .lg-other{background:var(--bar-other)} .lg-sum{background:var(--bar-sum)}
.hbar{display:grid;grid-template-columns:110px 1fr 40px;align-items:center;gap:8px;margin:6px 0;font-size:13px}
.hbar .track{height:12px;background:var(--bg);border-radius:6px;overflow:hidden}
.hbar .fill{height:100%;background:var(--bar-lost);border-radius:6px}

/* последние итоги */
.res{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.res:last-child{border-bottom:0}

/* вход */
.login-body{display:grid;place-items:center;min-height:100vh;padding:16px}
.login-card{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:24px}
.login-card form{display:grid;gap:12px;margin:18px 0 10px}
.login-card label{display:grid;gap:4px;color:var(--muted);font-size:13px}
.login-card input{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:15px}
.login-card button{background:var(--brand);color:var(--brand-ink);border:0;border-radius:10px;padding:11px;font-weight:600;cursor:pointer}
.login-card .err{color:var(--lost);margin:0}
.login-card .muted{font-size:12px;margin:0}

@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .top{flex-wrap:wrap;padding:10px 16px}
  .tabs{order:3;flex-basis:100%}
  .bar,main{padding-left:16px;padding-right:16px}
  .fresh{margin-left:0;flex-basis:100%}
  input[type=search]{min-width:0;max-width:none}
}
.r-won{fill:var(--bar-won)} .r-lost{fill:var(--bar-lost)} .r-other{fill:var(--bar-other)} .r-sum{fill:var(--bar-sum)}
.gridline{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--muted)}
.nw{white-space:nowrap}
@media (max-width:600px){
  .res{grid-template-columns:auto 1fr}
  .res > .n{grid-column:1 / -1;text-align:left;color:var(--muted);font-size:13px}
  .kpi .v{font-size:22px}
}
.brand{text-decoration:none;color:inherit}
.home{color:var(--muted);text-decoration:none;padding:6px 10px;border:1px solid var(--line);border-radius:8px}
.home:hover{color:var(--ink);background:var(--bg)}

/* ── кнопки, окна, уведомления ── */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--brand);background:var(--brand);color:var(--brand-ink);border-radius:9px;padding:8px 14px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn.sm{padding:5px 10px;font-size:13px;font-weight:500}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--line)}
.btn.ghost:hover{background:var(--bg)}
.btn.danger{background:var(--lost);border-color:var(--lost);color:#fff}
.uname{color:var(--ink);font-weight:600}
.card-h{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:8px}
.card-h.wrap{flex-wrap:wrap;justify-content:flex-start}
.card-h h3{margin:0}
.row{display:flex;align-items:center;gap:10px}
.inl{display:flex;align-items:center;gap:6px;color:var(--muted)}
input.num{width:72px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.err{color:var(--lost)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;max-width:min(640px,calc(100vw - 32px));box-shadow:0 6px 24px rgba(0,0,0,.25)}
.toast.bad{background:var(--lost);color:#fff}
.dlg{border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);padding:20px;width:min(560px,calc(100vw - 32px));box-shadow:0 12px 48px rgba(0,0,0,.25)}
.dlg::backdrop{background:rgba(8,20,18,.45)}
.dlg h3{margin:0 0 12px}
.dlg form{display:grid;gap:10px;margin:0}
.dlg label{display:grid;gap:4px;color:var(--muted);font-size:13px}
.dlg label.chk{display:flex}
.dlg input:not([type=checkbox]),.dlg select{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:14px;color:var(--ink)}
.dlg input:disabled{opacity:.7}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.firms-set{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0}
.firms-set legend{color:var(--muted);font-size:12px;padding:0 4px}
.firms-set div{display:flex;flex-wrap:wrap;gap:6px 16px}
.dlg-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.tmp-pw{display:flex;align-items:center;gap:10px;margin:8px 0}
.tmp-pw code{font-size:22px;letter-spacing:1px;background:var(--bg);border:1px dashed var(--brand);border-radius:8px;padding:6px 12px;user-select:all}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.det{color:var(--muted);font-size:12px;word-break:break-word}

/* ── постановка ── */
.place-top .card{margin-bottom:16px}
.agent .ag-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px}
.agent .ag-sub{margin:6px 0 4px}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--bar-other)}
.dot.on{background:var(--bar-won);box-shadow:0 0 0 4px color-mix(in srgb,var(--bar-won) 22%,transparent)}
.dot.busy{background:#f59e0b;animation:pulse 1.2s infinite}
.dot.sign{background:#eab308;animation:pulse .8s infinite}
.dot.off{background:var(--bar-lost)}
@keyframes pulse{50%{opacity:.35}}
.auto{display:grid;gap:10px}
.auto-firms{display:flex;flex-wrap:wrap;gap:6px 16px}
#autoCard.is-on{border-color:var(--bar-won)}
#autoOn button:disabled{cursor:not-allowed}
table.plan td{vertical-align:middle}
table.plan td.prod{min-width:260px;max-width:380px}
table.plan td.c-reg{max-width:140px}
table.plan th,table.plan td{padding:7px 6px}
table.plan tr.sel td{background:color-mix(in srgb,var(--brand) 7%,transparent)}
table.plan tr.busy td{opacity:.55}
table.plan .badge{margin-left:6px;font-size:11px}
table.plan .why{cursor:help}
td.hot{color:var(--lost);font-weight:700}
td.warm{color:var(--wait);font-weight:600}
input.price{width:104px;text-align:right;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-variant-numeric:tabular-nums}
input.price:focus{outline:2px solid var(--brand);outline-offset:0}
input.price.bad{border-color:var(--lost);background:var(--lost-bg)}
.sub.pw{color:var(--muted)} .sub.pw.bad{color:var(--lost)}
.placebar{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border-top:1px solid var(--line);padding:12px 4px 4px;margin-top:8px}
.placebar #placeBtn{margin-left:auto}
details.cmd{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;padding:0 10px}
details.cmd summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;cursor:pointer}
details.cmd summary .btn{margin-left:auto}
details.cmd .cnts{color:var(--muted)}
table.cmd-t td{padding:5px 8px;font-size:13px}
table.cmd-t td.msg{color:var(--muted);max-width:420px}
table.cmd-t tr.st-fail td.msg{color:var(--lost)}
table.cmd-t tr.st-ok td.msg{color:var(--won)}
table.cmd-t tr.st-running td{background:var(--act-bg)}
#placeSum p{margin:6px 0}
@media (max-width:900px){
  .fgrid{grid-template-columns:1fr}
  .placebar #placeBtn{margin-left:0;width:100%;justify-content:center}
  table.plan td.prod{min-width:200px}
}
[hidden]{display:none !important}
.login-card h2.pw-h{margin:16px 0 4px;font-size:18px}
.login-card form + form{margin-top:0}
.login-card .link{background:none;color:var(--brand);padding:4px;font-weight:400}

/* план на телефоне: карточки вместо широкой таблицы */
@media (max-width:760px){
  table.plan thead{display:none}
  table.plan,table.plan tbody{display:block}
  table.plan tr{display:grid;grid-template-columns:30px 1fr 1fr 1fr;gap:4px 10px;padding:12px 2px;border-bottom:1px solid var(--line);
    grid-template-areas:"cb mins firm lot" "cb prod prod prod" ". reg reg pcp" ". amt start floor" ". price price sum"}
  table.plan td{display:block;border:0;padding:0;background:none !important;text-align:left}
  table.plan td.prod{min-width:0;max-width:none}
  table.plan tr.sel{background:color-mix(in srgb,var(--brand) 7%,transparent)}
  table.plan td[data-l]::before{content:attr(data-l);display:block;color:var(--muted);font-size:11px}
  .c-cb{grid-area:cb} .c-mins{grid-area:mins} .c-firm{grid-area:firm;overflow:hidden;text-overflow:ellipsis} .c-lot{grid-area:lot;font-size:12px;text-align:right !important}
  .c-prod{grid-area:prod} .c-reg{grid-area:reg;color:var(--muted)} .c-pcp{grid-area:pcp;text-align:right !important}
  .c-amt{grid-area:amt} .c-start{grid-area:start} .c-floor{grid-area:floor}
  .c-price{grid-area:price} .c-sum{grid-area:sum;text-align:right !important;align-self:end}
  table.plan td.c-pcp[data-l]::before{display:inline;margin-right:4px}
  input.price{width:100%;max-width:180px;font-size:16px;padding:8px 10px;text-align:left}
  table.plan .pname{font-weight:600}
}