:root{--bg:#F4F5F3;--surface:#FFFFFF;--ink:#1B2026;--ink2:#5B6470;--line:#E2E5E1;
  --amber:#E8930C;--amber-d:#B9740A;--steel:#2D6CA8;--green:#2E7D4F;--rust:#C2410C;--slate:#1C2128;--slate2:#2A323B;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:#0E1216;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.45;}
button{font-family:inherit;}
#phone{max-width:430px;margin:0 auto;background:var(--bg);display:flex;flex-direction:column;height:100vh;position:relative;overflow:hidden;}
#phone.wide{max-width:1000px;}
@media(min-width:480px){#phone{height:100vh;}}
@media(min-width:768px){
  body{background:#E7EAE5;}
  #phone{max-width:780px;box-shadow:0 0 50px rgba(0,0,0,.10);}
  #phone.wide{max-width:1120px;}
  main{padding:24px 30px;}
  header.bar{padding:18px 30px 16px;}
  .seg button{font-size:15px;}
  .dchip{width:46px;height:50px;font-size:16px;}
  .brow{padding:13px 4px;}
  .vsel{min-width:120px;font-size:16px;}
  .kpi .k{padding:18px;}
  nav.tabs{padding:8px 8px;}
  nav.tabs button{padding:11px 4px 9px;font-size:13px;}
  nav.tabs button .ic{font-size:23px;}
}
@media(min-width:1100px){
  #phone.wide{max-width:1180px;}
}
header.bar{background:var(--slate);color:#fff;padding:14px 16px 12px;flex:0 0 auto;}
.bar .row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.bar .who{font-weight:600;font-size:16px;} .bar .who small{display:block;font-weight:400;font-size:12.5px;color:#9AA4AE;margin-top:1px;}
.bar .brand{display:none;align-items:center;gap:11px;}
.bar .brand .hlg{width:34px;height:34px;border-radius:9px;background:var(--amber);display:flex;align-items:center;justify-content:center;font-size:18px;}
.bar .brand .hbr b{display:block;font-size:15px;font-weight:600;color:#fff;line-height:1.1;}
.bar .brand .hbr small{font-size:11px;color:#7E8893;letter-spacing:.06em;}
.iconbtn{background:var(--slate2);color:#cfd6dd;border:0;border-radius:9px;padding:8px 11px;font-size:13.5px;font-weight:600;cursor:pointer;} .iconbtn:active{transform:translateY(1px);}
.sync{margin-top:11px;display:flex;align-items:center;gap:9px;border-radius:10px;padding:9px 11px;font-size:13.5px;font-weight:600;cursor:pointer;}
.sync.on{background:#15351F;color:#7FD79B;} .sync.off{background:#3A1E0C;color:#F4A861;}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;} .sync.on .dot{background:#34C759;} .sync.off .dot{background:#F2A20C;}
.sync .grow{flex:1;} .sync .act{font-size:12px;font-weight:600;opacity:.85;text-decoration:underline;}
.netpill{font-size:12.5px;font-weight:600;text-align:center;padding:7px 10px;margin-top:10px;border-radius:9px;}
.netpill.off{background:#3A1E0C;color:#F4A861;} .netpill.pending{background:#15351F;color:#7FD79B;}
main{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px 24px;}
h2.scr{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin:18px 2px 12px;font-weight:700;} h2.scr:first-child{margin-top:2px;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:14px;}
label.fl{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px 2px;}
.field{width:100%;padding:13px;border:1.5px solid var(--line);border-radius:11px;font-size:17px;background:#fff;color:var(--ink);margin-bottom:13px;appearance:none;}
.field:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(45,108,168,.15);}
select.field{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 5l4 4 4-4' fill='none' stroke='%235B6470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;}
.btn{display:block;width:100%;border:0;border-radius:12px;padding:15px;font-size:17px;font-weight:700;cursor:pointer;text-align:center;} .btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.6;cursor:default;} .btn:disabled:active{transform:none;}
.btn.amber{background:var(--amber);color:#231505;} .btn.steel{background:var(--steel);color:#fff;} .btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);} .btn.sm{padding:11px;font-size:15px;} .btn.green{background:var(--green);color:#fff;} .btn.rust{background:var(--rust);color:#fff;} .btn.row2{margin-bottom:10px;}
.empty{text-align:center;color:var(--ink2);padding:24px 14px;font-size:15px;} .empty b{color:var(--ink);display:block;margin-bottom:4px;font-size:16px;}
.legend{font-size:12px;color:var(--ink2);margin:2px 2px 12px;line-height:1.6;}
.xbtn{background:none;border:0;color:#C0453A;font-size:22px;line-height:1;padding:4px 8px;cursor:pointer;}
.seg{display:flex;gap:8px;margin-bottom:13px;}
.seg button{flex:1;padding:12px 8px;border:1.5px solid var(--line);background:#fff;border-radius:11px;font-size:14px;font-weight:700;cursor:pointer;color:var(--ink2);line-height:1.25;}
.seg button.sel{border-color:var(--amber);background:#FFF3DF;color:var(--amber-d);} .seg button small{display:block;font-weight:600;font-size:11px;color:var(--ink2);margin-top:1px;}
.dl{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#FFF7EB;border:1px solid #F3D9A8;border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:13.5px;}
.dl.ok{background:#F0F6F1;border-color:#CDE6D3;} .dl.late{background:#FBE9E3;border-color:#F0C3B4;} .dl b{font-size:14.5px;display:block;}
.pill{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap;}
.pill.sub{background:#E2F0E6;color:var(--green);} .pill.no{background:#FBE3DD;color:#B23B1C;} .pill.wip{background:#FDF0DB;color:var(--amber-d);} .pill.acc{background:#E7EEF6;color:#28557F;}
.dchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px;}
.dchip{width:40px;height:44px;border:1.5px solid var(--line);border-radius:9px;background:#fff;font-weight:700;font-size:15px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);position:relative;}
.dchip small{font-size:9px;font-weight:600;color:var(--ink2);}
.dchip.sel{border-color:var(--steel);box-shadow:0 0 0 3px rgba(45,108,168,.15);}
.dchip.filled::after{content:"";position:absolute;top:4px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--green);}
.dchip.wknd{background:#F6F2EC;}
.brow{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);} .brow:last-child{border-bottom:0;}
.brow .nm{flex:1;min-width:0;} .brow .nm b{font-size:14.5px;font-weight:600;display:block;} .brow .nm small{color:var(--ink2);font-size:11.5px;}
.vsel{padding:9px 6px;border:1.5px solid var(--line);border-radius:9px;font-size:15px;background:#fff;min-width:86px;} .vsel.code{border-color:var(--amber);background:#FFF7EB;color:var(--amber-d);font-weight:700;}
.sres{border:1px solid var(--line);border-radius:11px;margin-bottom:13px;max-height:250px;overflow:auto;background:#fff;}
.sres .it{padding:11px 12px;border-bottom:1px solid var(--line);cursor:pointer;} .sres .it:last-child{border-bottom:0;} .sres .it:active{background:#F0F1EE;}
.sres .it b{font-size:15px;} .sres .it small{display:block;color:var(--ink2);font-size:12px;margin-top:1px;}
.lineitem{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px;} .lineitem .field{margin-bottom:0;} .lineitem .mat{flex:1;} .lineitem .qty{width:72px;} .lineitem .un{width:88px;}
.photo{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1.5px dashed #C9CEC8;border-radius:11px;background:#fff;font-size:14.5px;font-weight:600;color:var(--ink2);cursor:pointer;margin-bottom:13px;}
.req{border:1px solid var(--line);border-radius:13px;padding:13px;margin-bottom:12px;background:#fff;}
.req .top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px;} .req .obj{font-weight:700;font-size:15.5px;} .req .sub{font-size:12.5px;color:var(--ink2);margin-bottom:6px;}
.badge{font-size:11px;font-weight:800;padding:4px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;}
.b-new{background:#E7EEF6;color:#28557F;} .b-work{background:#EDE6F6;color:#5A3E96;} .b-buy{background:#FDF0DB;color:var(--amber-d);} .b-ship{background:#E2EEF7;color:#1C6FA8;} .b-done{background:#DCE9DC;color:#2E7D4F;} .b-issue{background:#FBE3DD;color:#B23B1C;}
.req .it{font-size:14.5px;padding:2px 0;} .req .meta{font-size:12.5px;color:var(--ink2);margin-top:7px;display:flex;gap:12px;flex-wrap:wrap;} .req .urgent,.req .overdue{color:var(--rust);font-weight:700;}
.thread{margin-top:11px;border-top:1px dashed var(--line);padding-top:10px;} .msg{font-size:13.5px;margin-bottom:7px;} .msg .a{font-weight:700;font-size:11.5px;color:var(--ink2);}
.msg .b{background:#F1F3F0;border-radius:9px;padding:7px 10px;display:inline-block;margin-top:2px;max-width:90%;} .msg.me .b{background:#FDF0DB;}
.tinput{display:flex;gap:8px;margin-top:8px;} .tinput input{flex:1;margin:0;}
.actrow{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap;} .actrow .btn{flex:1;min-width:120px;}
nav.tabs{flex:0 0 auto;display:flex;background:#fff;border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));}
nav.tabs button{flex:1;background:none;border:0;padding:9px 4px 7px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink2);font-size:11.5px;font-weight:700;} nav.tabs button .ic{font-size:21px;line-height:1;} nav.tabs button.on{color:var(--amber-d);}
.emprow{display:flex;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:14px;} .emprow:last-child{border-bottom:0;} .emprow small{color:var(--ink2);font-size:12px;}
.fcard{border:1px solid var(--line);border-radius:13px;padding:13px;margin-bottom:12px;background:#fff;} .fcard .fh{display:flex;align-items:center;justify-content:space-between;gap:8px;} .fcard .fh b{font-size:16px;} .lgbadge{display:inline-block;background:#EAF0F6;color:#28557F;font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:6px;}
.ec-tools{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center;} .ec-tools .field{margin-bottom:0;flex:1;min-width:150px;}
.grid-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff;}
table.grid{border-collapse:separate;border-spacing:0;font-size:13px;}
.grid th,.grid td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;} .grid th{background:#F1F3F0;font-size:11px;color:var(--ink2);text-transform:uppercase;text-align:right;}
.grid td.l,.grid th.l{text-align:left;} .grid .zp{font-weight:800;color:var(--green);} .grid .flag{color:var(--rust);font-weight:800;text-align:center;}
.grid tfoot td{background:#ECEFEA;font-weight:800;border-top:2px solid var(--line);}
.ec-note{font-size:12.5px;color:var(--ink2);margin:12px 2px 0;line-height:1.55;}
.kpi{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;} .kpi .k{flex:1;min-width:120px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px;} .kpi .k .n{font-size:26px;font-weight:800;line-height:1;} .kpi .k .l{font-size:12px;color:var(--ink2);margin-top:5px;} .kpi .k.warn .n{color:var(--rust);} .kpi .k.good .n{color:var(--green);}
.dlist .drow{display:flex;justify-content:space-between;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:14px;align-items:center;} .dlist .drow:last-child{border-bottom:0;}
.ok{color:var(--green);font-weight:700;} .no{color:var(--rust);font-weight:700;}
.barlist .b{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:13.5px;} .barlist .b .lab{flex:0 0 150px;} .barlist .b .track{flex:1;background:#EEF0EC;border-radius:6px;height:14px;overflow:hidden;} .barlist .b .fill{height:100%;background:var(--steel);} .barlist .b .val{flex:0 0 64px;text-align:right;font-weight:700;}
#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(10px);bottom:80px;background:var(--slate);color:#fff;padding:13px 15px;border-radius:12px;font-size:14.5px;font-weight:600;text-align:center;opacity:0;transition:.25s;pointer-events:none;z-index:50;max-width:402px;width:calc(100% - 32px);} #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media(prefers-reduced-motion:reduce){*{transition:none!important;}}
.login{flex:1;display:flex;flex-direction:column;justify-content:center;padding:30px 24px;background:var(--bg);}
.login .brand{color:var(--ink);text-align:center;margin-bottom:22px;} .login .brand .lg{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;background:var(--amber);border-radius:17px;font-size:30px;margin-bottom:14px;}
.login .brand h1{font-size:23px;margin:0 0 4px;color:var(--ink);letter-spacing:-.01em;} .login .brand p{margin:0;color:var(--ink2);font-size:14px;}
.login .box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px;box-shadow:0 8px 28px rgba(0,0,0,.07);max-width:380px;width:100%;margin:0 auto;}
.login .foot{text-align:center;margin:18px auto 0;font-size:12px;color:#A6ADB5;letter-spacing:.08em;}
.loading{text-align:center;color:var(--ink2);padding:30px;font-size:15px;}

/* ===== Десктоп: полноценная веб-вёрстка. Мобильная версия (<900px) не меняется. ===== */
@media(min-width:900px){
  body{background:#E7EAE5;}
  #phone{max-width:920px;height:100vh;box-shadow:0 0 60px rgba(0,0,0,.10);}
  #phone.wide{max-width:1180px;}
  header.bar{order:0;padding:14px 30px;}
  .bar .brand{display:flex;}
  .bar .who{margin-left:auto;text-align:right;}
  nav.tabs{order:1;border-top:0;border-bottom:1px solid var(--line);justify-content:flex-start;gap:4px;padding:0 30px;}
  nav.tabs button{flex:0 0 auto;flex-direction:row;gap:8px;padding:14px 16px;font-size:14px;border-radius:0;border-bottom:2px solid transparent;}
  nav.tabs button.on{color:var(--amber-d);border-bottom-color:var(--amber);}
  nav.tabs button .ic{font-size:18px;}
  main{order:2;padding:26px 34px 40px;}
  table.grid{min-width:100%;}
}