:root{--navy:#1F3864;--blue:#D9E2F3;--bg:#f4f6fa;--red:#c0392b;--redbg:#fdecea;--amber:#b7791f;--ambbg:#fff4d6;--green:#1e7e34;--grnbg:#e6f4ea;--mut:#6b7280;--rad:12px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:#1b1f27;padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--navy)}
.hidden{display:none!important}
.muted{color:var(--mut)}
.top{position:sticky;top:0;z-index:20;background:var(--navy);color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top))}
.top .brand{color:#fff;font-weight:700;text-decoration:none;font-size:18px}
.top nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.top nav a{color:#dbe5f7;text-decoration:none;padding:6px 10px;border-radius:8px}
.top nav a.on,.top nav a:hover{background:rgba(255,255,255,.16);color:#fff}
.top form{margin:0}
.top .out{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.top .who{margin-left:auto;color:#dbe5f7;font-size:14px;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .outlink{color:#dbe5f7;text-decoration:none;padding:6px 10px;border-radius:8px}
.top .outlink:hover{background:rgba(255,255,255,.16);color:#fff}
main{max-width:1100px;margin:0 auto;padding:14px;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
/* нижнее меню */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:30;background:#fff;border-top:1px solid #dde2ea;display:flex;
 padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 10px rgba(20,30,60,.06)}
.tabbar a{flex:1;text-align:center;padding:7px 2px 9px;text-decoration:none;color:var(--mut);font-size:12px;line-height:1.15}
.tabbar a .ic{display:block;font-size:19px;line-height:1.25}
.tabbar a.on{color:var(--navy);font-weight:700}
.tabbar a.on .ic{transform:scale(1.08)}
@media(min-width:900px){
 .tabbar{max-width:1100px;left:50%;transform:translateX(-50%);border:1px solid #dde2ea;border-radius:14px 14px 0 0}
}
h1{font-size:22px;margin:6px 0 12px}h2{font-size:18px;margin:18px 0 8px}h3{font-size:16px;margin:0 0 4px}
.card{background:#fff;border:1px solid #e3e7ee;border-radius:var(--rad);padding:12px;margin-bottom:12px}
.card.done{border-left:5px solid var(--green)}
.card.attn,.card.srv{border-left:5px solid var(--red)}
.btn{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:10px;padding:12px 18px;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;text-align:center}
.btn.big{display:block;width:100%;padding:16px;font-size:18px}
.btn.sec{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.btn.danger{background:var(--red)}
.btn[disabled]{opacity:.5}
.grid{display:grid;gap:12px}
@media(min-width:760px){.grid.two{grid-template-columns:1fr 1fr}}
.flash{padding:10px 12px;border-radius:10px;margin-bottom:10px}
.flash.ok{background:var(--grnbg);color:var(--green)}.flash.err{background:var(--redbg);color:var(--red)}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:13px;font-weight:600;white-space:nowrap}
.b-order{background:var(--redbg);color:var(--red)}.b-soon{background:var(--ambbg);color:var(--amber)}.b-ok{background:var(--grnbg);color:var(--green)}.b-nousage,.b-nodata{background:#eceff3;color:var(--mut)}
.b-flag{background:var(--ambbg);color:var(--amber)}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:8px 10px;border-bottom:1px solid #e9edf3;text-align:left;vertical-align:top}
th{background:var(--blue);color:var(--navy);font-size:13px;position:sticky;top:0}
td.n,th.n{text-align:right;white-space:nowrap}
.wrap{overflow-x:auto;border-radius:var(--rad);border:1px solid #e3e7ee}
tr.void td{color:#999;text-decoration:line-through}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #eef1f5}
.list li:last-child{border:0}
/* форма */
form.stack{display:grid;gap:12px;max-width:420px}
label.fld{display:grid;gap:4px;font-size:14px;color:var(--mut)}
input,select,textarea{font:inherit;padding:12px;border:1px solid #c5ccd8;border-radius:10px;width:100%;background:#fff;color:#1b1f27}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);border-color:var(--navy)}
.fact{font-size:22px;font-weight:700;text-align:center}
.head-card{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.row{border-top:1px dashed #dde2ea;padding-top:10px;margin-top:8px;display:grid;gap:8px}
.row:first-child{border-top:0;margin-top:0;padding-top:0}
.row.bad .fact{border-color:var(--red);background:var(--redbg)}
.row.dev .fact{border-color:var(--amber);background:var(--ambbg)}
.row.reason .fact{border-color:var(--amber)}
.row.srv .fact{border-color:var(--red);background:var(--redbg)}
.meta{font-size:13px;color:var(--mut);margin-bottom:6px}
.range{font-size:13px;color:var(--mut);text-align:center;min-height:1em}
.msg{font-size:13px;color:var(--red)}
.row.dev .msg,.row.reason .msg{color:var(--amber)}
.toggles{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:#eef2f9;color:var(--navy);border:1px solid #cfd8e8;border-radius:99px;padding:6px 12px;font-size:14px;cursor:pointer}
.sub{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pill{background:var(--blue);padding:10px 12px;border-radius:10px;color:var(--navy)}
.link{background:none;border:0;color:var(--navy);text-decoration:underline;padding:6px 0;font:inherit;cursor:pointer}
.link.danger{color:var(--red)}
.pbar{position:sticky;top:56px;z-index:10;background:var(--bg);padding:6px 0}
.pbar progress{width:100%;height:10px}
.sticky-go{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);padding:14px 0 calc(14px + env(safe-area-inset-bottom))}
#errbox{background:var(--redbg);border:1px solid var(--red);color:#7b1d14;border-radius:var(--rad);padding:12px;margin:10px 0}
#errbox ul{margin:6px 0 0;padding-left:20px}#errbox li.click{cursor:pointer;text-decoration:underline}
#draftbar{background:var(--ambbg);border-radius:10px;padding:8px 12px;margin-bottom:10px;display:flex;gap:10px;justify-content:space-between;align-items:center}
dialog{border:0;border-radius:var(--rad);padding:18px;max-width:520px;width:calc(100% - 28px)}
dialog::backdrop{background:rgba(0,0,0,.45)}
.confirm{display:flex;gap:10px;align-items:flex-start;background:var(--ambbg);padding:10px;border-radius:10px;margin:8px 0}
.confirm input{width:22px;height:22px;flex:none;margin-top:2px}
.dlgbtns{display:flex;gap:10px;margin-top:14px}.dlgbtns .btn{flex:1}
.chart{width:100%;height:auto;background:#fff;border:1px solid #e3e7ee;border-radius:var(--rad)}
.login{max-width:380px;margin:12vh auto}
.kpi{display:flex;gap:10px;flex-wrap:wrap}.kpi .card{flex:1;min-width:130px;margin:0;text-align:center}.kpi b{font-size:26px;display:block}
.inl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.inl input,.inl select{width:auto;padding:6px 8px}
.small{font-size:13px}