:root{
  --bg:#f4f5f7;--panel:#fff;--line:#e3e5ea;--text:#1d2330;--muted:#7a8194;
  --accent:#2563eb;--accent-soft:#e8efff;--danger:#d92d3a;--ok:#1f9d55;
  --out:#dcebff;--in:#f0f1f4;--note:#fff6d6;--warn:#b45309;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#14171d;--panel:#1c2028;--line:#2c313c;--text:#e6e9f0;--muted:#8b93a7;
    --accent:#5b8def;--accent-soft:#223056;--out:#23365e;--in:#272c37;--note:#4a4020;--warn:#d4a017;}
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
textarea{resize:vertical}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:8px 12px}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.danger{color:var(--danger)}
button.success{background:var(--ok);border-color:var(--ok);color:#fff}
button.warn{background:var(--warn);border-color:var(--warn);color:#fff}
button:disabled{opacity:.5;cursor:default}
a{color:var(--accent)}
#app{height:100%;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:4px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.top .logo{font-weight:700;margin-right:12px}
.top .nav{border:0;background:none;padding:8px 12px;border-radius:8px;color:var(--muted);position:relative}
.top .nav.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.badge{background:var(--danger);color:#fff;border-radius:10px;font-size:11px;padding:1px 6px;margin-left:4px}
.top .spacer{flex:1}
.who{color:var(--muted);margin-right:8px}
.view{flex:1;min-height:0}
.page{padding:18px;max-width:1200px;margin:0 auto;overflow:auto;height:100%}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row>*{flex:0 0 auto}
.row .grow{flex:1 1 160px}
.muted{color:var(--muted)}
.small{font-size:12px}
.err{color:var(--danger)}
h2{margin:0 0 12px;font-size:18px}
h3{margin:0 0 8px;font-size:15px}
label.field{display:block;margin-bottom:8px}
label.field>span{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.tag{font-size:11px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:1px 8px;color:var(--muted)}
.tag.acc{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.tag.ok{background:var(--ok);color:#fff;border-color:transparent}
.tag.no{background:var(--danger);color:#fff;border-color:transparent}
.tag.warn{background:var(--warn);color:#fff;border-color:transparent}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:6px}
.login{max-width:340px;margin:12vh auto}
table{width:100%;border-collapse:collapse}
td,th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.inbox{display:grid;grid-template-columns:340px 1fr 300px;height:100%}
.col{background:var(--panel);border-right:1px solid var(--line);min-height:0;display:flex;flex-direction:column}
.col:last-child{border-right:0}
.filters{padding:10px;border-bottom:1px solid var(--line);display:grid;gap:6px}
.filters .row2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.list{overflow:auto;flex:1}
.item{padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.item:hover{background:var(--bg)}
.item.on{background:var(--accent-soft)}
.item .t{display:flex;justify-content:space-between;gap:8px}
.item .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .when{color:var(--muted);font-size:12px;white-space:nowrap}
.item .txt{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:2px 0}
.item.unread .name,.item.unread .txt{color:var(--text);font-weight:700}
.tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chat{display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.chat-head{padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:6px}
.bubble{max-width:75%;padding:8px 11px;border-radius:12px;white-space:pre-wrap;word-break:break-word}
.bubble.in{background:var(--in);align-self:flex-start;border-bottom-left-radius:3px}
.bubble.out{background:var(--out);align-self:flex-end;border-bottom-right-radius:3px}
.bubble.note{background:var(--note);align-self:center;max-width:90%;font-size:13px}
.bubble .meta{font-size:11px;color:var(--muted);margin-top:3px}
.sys{align-self:center;font-size:12px;color:var(--muted)}
.composer{padding:10px;background:var(--panel);border-top:1px solid var(--line);display:grid;gap:6px}
.composer textarea{min-height:62px}
.empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted)}
.side{padding:12px;overflow:auto}
.back{display:none}
.board{display:flex;gap:10px;padding:12px;overflow-x:auto;height:100%;align-items:flex-start}
.bcol{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:250px;flex:0 0 250px;max-height:100%;display:flex;flex-direction:column}
.bcol.over{outline:2px dashed var(--accent)}
.bcol .hd{padding:10px 12px;font-weight:600;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}
.bcol .body{padding:8px;overflow:auto;display:grid;gap:8px}
.bcard{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg);cursor:grab}
.bcard .name{font-weight:600}
.calc-wrap{display:grid;grid-template-columns:1fr 380px;gap:14px;padding:14px;height:100%;overflow:auto}
.calc-form{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.calc-out{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;height:fit-content;position:sticky;top:14px}
.calc-out .big{font-size:32px;font-weight:800;color:var(--accent);text-align:center;margin:10px 0}
.calc-out .row-out{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--line);font-size:13px}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.opt-item{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:var(--bg);border-radius:6px;font-size:12px;gap:6px}
.opt-item .counter{display:flex;align-items:center;gap:4px;flex-shrink:0}
.opt-item button{width:22px;height:22px;padding:0;font-weight:700}
.opt-item .count{min-width:16px;text-align:center;font-weight:600}
.chk-row{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:6px;background:var(--bg);padding:10px 14px;border-radius:8px;border:1px solid var(--line)}
.chk-row label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px}
.chk-row input[type=radio],.chk-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
.blueprint-preview{max-width:200px;max-height:200px;border:1px solid var(--line);border-radius:8px;margin-top:6px;display:block}

/* графики */
.chart-wrap{padding:14px 0 0 0}
.bars{display:flex;align-items:flex-end;gap:6px;height:200px;padding:8px 0;border-bottom:1px solid var(--line);overflow-x:auto}
.bar-col{flex:0 0 auto;min-width:44px;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.bar-stack{width:32px;display:flex;flex-direction:column-reverse;align-items:stretch;gap:1px;height:100%;justify-content:flex-end}
.bar-seg{border-radius:2px;min-height:0}
.bar-label{font-size:10px;color:var(--muted);white-space:nowrap}
.bar-total{font-size:10px;font-weight:600;color:var(--text);white-space:nowrap}
.bar-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;margin-top:8px;color:var(--muted)}
.chart-holder{position:relative;height:280px;width:100%}
.chart-holder.small{height:220px}
.bar-legend .sw{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle;margin-right:4px}

.tabs{display:flex;gap:4px;margin-bottom:14px}
.tabs button{flex:0 0 auto}
.tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}

@media (max-width:900px){
  .calc-wrap{grid-template-columns:1fr}
  .inbox{grid-template-columns:1fr}
  .inbox .col,.inbox .chat{display:none}
  .inbox[data-m="list"] .col.l{display:flex}
  .inbox[data-m="chat"] .chat{display:flex}
  .inbox[data-m="info"] .col.r{display:flex}
  .back{display:inline-block}
}

.calc-frame-wrap{display:flex;flex-direction:column;height:100%}
.calc-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.calc-frame-wrap iframe{flex:1;width:100%;border:0;background:#f0f4f8;min-height:0}
.chart-holder{height:auto !important}