#orders .orders-source-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:0 0 12px;
  padding:10px;
  border:1px solid #e5e7ef;
  border-radius:16px;
  background:linear-gradient(135deg,#fff,#faf9ff);
}
#orders .orders-source-strip>span{
  min-width:0;
  padding:9px 11px;
  border:1px solid #ececf3;
  border-radius:11px;
  background:rgba(255,255,255,.9);
}
#orders .orders-source-strip small,
#orders .orders-source-strip strong{display:block}
#orders .orders-source-strip small{color:#8b91a0;font-size:10px;font-weight:750;letter-spacing:.055em;text-transform:uppercase}
#orders .orders-source-strip strong{margin-top:4px;color:#363b48;font-size:11px;line-height:1.4;overflow-wrap:anywhere}
#orders .orders-source-strip[data-state="ready"]{border-color:#cfe9dd;background:linear-gradient(135deg,#fff,#f3fbf7)}
#orders .orders-source-strip[data-state="stale"]{border-color:#edd8ad;background:linear-gradient(135deg,#fff,#fff9ee)}
#orders .orders-source-strip[data-state="error"]{border-color:#efcdd1;background:linear-gradient(135deg,#fff,#fff6f6)}
#orders .orders-live-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
#orders .unit-metrics-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
#orders .orders-live-table .table-wrap{scrollbar-gutter:stable;overscroll-behavior-inline:contain}
#orders .orders-live-table table{min-width:980px}
#orders .orders-live-table .table-wrap:focus-visible{outline:3px solid rgba(124,92,250,.22);outline-offset:-3px}
#orders .orders-inline-state{display:grid;min-height:220px;place-content:center;gap:5px;padding:24px;text-align:center}
#orders .orders-inline-state strong{color:#343946;font-size:14px}
#orders .orders-inline-state small{max-width:520px;color:#818896;font-size:11px;line-height:1.5}

@media(max-width:1100px){
  #orders .orders-source-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  #orders .unit-metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:760px){
  #orders .orders-source-strip{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:9px;
    scroll-padding-inline:9px;
    scroll-snap-type:x proximity;
  }
  #orders .orders-source-strip>span{flex:0 0 210px;scroll-snap-align:start}
  #orders .orders-live-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  #orders .orders-live-metrics .metric-card{min-height:120px;padding:14px}
  #orders .unit-metrics-grid{
    display:flex;
    gap:9px;
    overflow-x:auto;
    padding:1px 1px 6px;
    scroll-padding-inline:1px;
    scroll-snap-type:x proximity;
  }
  #orders .unit-metrics-grid .metric-card{flex:0 0 190px;min-height:118px;padding:14px;scroll-snap-align:start}
  #orders .order-trend-panel{padding:14px!important}
  #orders .order-chart{overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-inline:contain}
  #orders .order-chart svg{width:660px!important;min-width:660px!important;max-width:none!important}
  #orders .order-chart-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  #orders .orders-live-table .table-wrap::after{
    content:"Проведите вправо, чтобы увидеть все поля";
    position:sticky;
    left:12px;
    display:block;
    width:max-content;
    margin:7px 0 10px;
    color:#8b91a0;
    font-size:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  #orders .orders-source-strip,
  #orders .unit-metrics-grid,
  #orders .orders-live-table .table-wrap{scroll-behavior:auto!important}
}
