/* Compact reading density; controls keep their 44px touch targets. */
:root{--ui-arrow-inset:18px;--ui-arrow-space:48px}
html:root #appView #mainNav span.pwa-count[hidden]{display:none!important}
:root #appView #ordersPage .orders-sheet select.inline-select{padding-right:44px!important;background-position:right 18px center!important}
html:root #appView #ordersPage>#filters select,html:root #appView #ordersPage>#filters .shop-multi-toggle{padding-right:48px!important;--ui-arrow-inset:18px}
form select:not([multiple]):not([size]):not(.inline-select),form select[size="1"]:not(.inline-select){appearance:none!important;padding-right:48px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 18px center!important;background-size:16px 16px!important}
form .shop-multi-toggle{padding-right:52px!important}form .shop-multi-toggle>i{right:18px!important}
@media(min-width:901px){
  html:root #appView>.topbar{height:auto!important;min-height:52px!important;padding:0 12px!important;gap:8px!important}
  html:root #appView>.topbar #mainNav{height:auto!important;min-width:0!important;padding-block:4px!important}
  html:root #appView>.topbar #mainNav>button{height:44px!important;min-height:44px!important;padding:6px 9px!important;font-size:13px!important;gap:6px!important}
  html:root #appView>.topbar :is(.logo,#userMenu){height:44px!important;min-height:44px!important}
  #appView>.topbar .brand-logo{width:28px!important;height:28px!important}
  #ordersPage{row-gap:6px!important}
  #ordersPage .greeting-band{min-height:0!important;margin:0!important;padding:2px 0!important}
  #ordersPage .daily-greeting{min-height:0!important;margin:0!important;padding:0!important;font-size:12px!important;line-height:1.5!important}
  #ordersPage .metric{min-height:48px!important;padding:6px 9px!important}
  #ordersPage #filters{gap:6px!important;padding-block:7px!important}
  #ordersPage>.quick-filters{padding-block:4px!important;margin-block:0!important}
  #ordersPage .orders-sheet>thead>tr>th{padding-block:7px!important}
  #ordersPage .orders-sheet>tbody>tr:not(.after-sales-row)>td{padding-block:6px!important;height:auto!important}
  #appView #ordersPage .orders-sheet #ordersBody :is(.row-image-editor,.product-image-frame){width:min(90px,100%)!important;height:auto!important;aspect-ratio:1/1}
  #appView #ordersPage .orders-sheet #ordersBody :is(.row-image-editor,.product-image-frame) .product-img{width:100%!important;height:100%!important;object-fit:contain!important;transform:none!important}
  html:not(.phone-desktop-layout) #appView #ordersPage .orders-sheet select.inline-select{padding-right:44px!important;background-position:right 18px center!important}
  html:not(.phone-desktop-layout) #appView #ordersPage .orders-sheet{min-width:2092px!important}
  html:not(.phone-desktop-layout) #appView #ordersPage .orders-sheet :is(thead tr,tbody tr:not(.after-sales-row))>:nth-child(3){--order-column-width:144px}
  html:not(.phone-desktop-layout) #appView #ordersPage .orders-sheet :is(thead tr,tbody tr:not(.after-sales-row))>:nth-child(5){--order-column-width:76px;padding-inline:4px!important}
  html:not(.phone-desktop-layout) #appView #ordersPage .orders-sheet :is(thead tr,tbody tr:not(.after-sales-row))>:nth-child(7){--order-column-width:108px}
  html:not(.phone-desktop-layout) #appView #ordersPage .orders-sheet :is(thead tr,tbody tr:not(.after-sales-row))>:nth-child(13){--order-column-width:96px}
  html:not(.phone-desktop-layout) #appView #ordersPage .orders-sheet :is(thead tr,tbody tr:not(.after-sales-row))>:nth-child(15){--order-column-width:152px}
  #appView #ordersPage>.order-overview-row{display:flex!important;flex:0 0 auto!important;flex-direction:column!important;gap:4px!important;height:auto!important;min-height:0!important;max-height:none!important}
  #ordersPage>.order-overview-row .orders-heading{display:flex!important;flex-direction:column!important;gap:4px!important;width:100%!important;height:auto!important;min-height:0!important}
  #ordersPage>.order-overview-row :is(.greeting-band,.metrics){flex:0 0 auto!important;position:static!important}
  #appView #ordersPage .order-overview-row .greeting-band::before,#appView #ordersPage .order-overview-row .greeting-band::after{display:none!important}
  #appView #ordersPage #ordersBody>tr:not(.row-editing) .address-copy-wrap{height:auto!important;min-height:0!important}
  #appView #ordersPage #ordersBody>tr:not(.row-editing) .address-copy-wrap .row-display{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding-block:5px!important;line-height:1.35!important}
  #appView #ordersPage #ordersBody>tr:not(.after-sales-row):not(.row-editing),#appView #ordersPage #ordersBody>tr:not(.after-sales-row):not(.row-editing)>td{height:auto!important;min-height:0!important;max-height:none!important}
  #appView #ordersPage #ordersBody>tr:not(.after-sales-row):not(.row-editing)>td{padding-block:6px!important}
  #appView #ordersPage .order-overview-row .greeting-band{width:100%!important;min-width:0!important;height:auto!important;min-height:0!important}
  #appView #ordersPage #dailyGreeting{display:flex!important;align-items:center!important;justify-content:space-between!important;height:24px!important;min-height:24px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
  #appView #ordersPage .order-overview-row .greeting-band .greeting-main{display:flex!important;align-items:center!important;height:24px!important;min-height:0!important;padding:0!important;background:transparent!important}
  #appView #ordersPage .order-overview-row .greeting-band .greeting-main::after{display:none!important}
  #appView #ordersPage .order-overview-row .greeting-band .greeting-smile{display:none!important}
  #appView #ordersPage .order-overview-row .greeting-band .greeting-copy{display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px!important;min-width:0!important}
  #appView #ordersPage .order-overview-row .greeting-band .greeting-copy :is(b,small){margin:0!important;font-size:12px!important;line-height:1.5!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  #appView #ordersPage .order-overview-row .greeting-band .greeting-datetime{display:flex!important;align-items:center!important;gap:8px!important;width:auto!important;height:24px!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important}
  #appView #ordersPage .order-overview-row .greeting-band .greeting-datetime strong{font-size:13px!important;line-height:1.5!important}
  #appView #ordersPage .order-overview-row .greeting-band .greeting-datetime span{font-size:11px!important;white-space:nowrap!important}
  #appView #ordersPage #metrics{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-template-rows:auto!important;width:100%!important;height:auto!important;min-height:0!important}
  #appView #ordersPage #metrics .metric{width:100%!important;height:auto!important;min-height:48px!important;min-width:0!important;padding:6px 10px!important;gap:0!important}
  #appView #ordersPage #metrics .metric-icon{display:none!important}
  #appView #ordersPage #metrics .metric-copy{min-width:0!important;max-width:100%!important}
  #appView #ordersPage #metrics .metric-copy b{font-size:14px!important;line-height:1.35!important;overflow-wrap:anywhere}
  #appView #ordersPage #metrics .metric-copy>span{font-size:11px!important;line-height:1.4!important}
  #ordersPage>#filters{display:flex!important;flex-wrap:wrap!important;gap:6px!important;grid-template-areas:none!important;grid-template-columns:none!important}
  #ordersPage>#filters>input,#ordersPage>#filters>select,#ordersPage>#filters>.shop-multi-filter{grid-area:auto!important;grid-column:auto!important;width:auto!important;min-width:128px!important;flex:1 1 140px!important;min-height:38px!important}
  #ordersPage>#filters>input[name=keyword]{flex-basis:240px!important}
  #ordersPage>#filters>.filter-actions{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:6px!important;grid-column:auto!important;order:20!important;min-width:0!important;margin:0!important}
  #ordersPage>#filters>.filter-actions>button{flex:0 0 auto!important;width:auto!important;min-width:0!important;min-height:38px!important;padding:6px 10px!important}
}
@media(min-width:1200px){
  #appView #ordersPage #metrics{grid-template-columns:repeat(10,minmax(0,1fr))!important}
  #appView #ordersPage #metrics .metric{border-top:0!important}
  #ordersPage>#filters{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;align-items:center!important}
  #ordersPage>#filters>input[name=from]{grid-row:1!important;grid-column:1/span 2!important}
  #ordersPage>#filters>input[name=to]{grid-row:1!important;grid-column:3/span 2!important}
  #ordersPage>#filters>input[name=keyword]{grid-row:1!important;grid-column:5/span 5!important}
  #ordersPage>#filters>.shop-multi-filter{grid-row:1!important;grid-column:10/span 3!important}
  #ordersPage>#filters>select[name=source]{grid-row:2!important;grid-column:1/span 2!important}
  #ordersPage>#filters>select[name=status]{grid-row:2!important;grid-column:3/span 2!important}
  #ordersPage>#filters>select[name=afterSalesType]{grid-row:2!important;grid-column:5/span 2!important}
  #ordersPage>#filters>.filter-actions{grid-row:2!important;grid-column:7/-1!important;justify-content:flex-end!important}
}
@media(max-width:900px){
  html.mobile-order-reader body{overflow:visible!important}
  html.mobile-order-reader:has(dialog[open]),html.mobile-order-reader body:has(dialog[open]){overflow:hidden!important}
  html.mobile-order-reader #appView>.topbar{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-rows:auto!important;grid-template-areas:none!important;grid-auto-rows:auto!important;align-items:start!important;gap:6px!important;padding:calc(4px + env(safe-area-inset-top)) 8px 4px!important;height:auto!important;min-height:52px!important;max-height:none!important}
  html.mobile-order-reader #appView>.topbar>.logo{grid-column:1!important;grid-row:1!important;height:44px!important;min-height:44px!important;align-self:start!important;gap:6px!important;margin:0!important}
  html.mobile-order-reader #appView>.topbar>.nav-label{display:none!important}
  html.mobile-order-reader #appView>.topbar #mainNav{grid-column:2!important;grid-row:1!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:44px!important;gap:6px!important;margin:0!important;padding:0!important;min-width:0!important}
  html.mobile-order-reader #appView>.topbar #mainNav>button{height:44px!important;min-height:44px!important;padding:4px!important;gap:3px!important;font-size:12px!important;line-height:1.3!important}
  html.mobile-order-reader #appView>.topbar #mainNav>button>span{min-width:0!important;white-space:normal!important;overflow-wrap:normal!important}
  html.mobile-order-reader #appView>.topbar #mainNav>button>svg{flex-shrink:0;width:12px!important;height:12px!important}
  html.mobile-order-reader #appView>.topbar #mainNav>#mobileReaderNavMore{position:relative!important;padding-left:6px!important;padding-right:44px!important;justify-content:flex-start!important}
  html.mobile-order-reader #appView>.topbar #mainNav>#mobileReaderNavMore>svg{position:absolute!important;right:18px!important;top:calc(50% - 7px)!important;width:14px!important;height:14px!important;margin:0!important}
  html.mobile-order-reader #appView>.topbar #mainNav .pwa-count{display:none!important}
  html.mobile-order-reader #appView>.topbar #userMenu{grid-column:3!important;grid-row:1!important;min-width:44px!important;height:44px!important;min-height:44px!important;margin:0!important;padding:5px!important;align-self:start!important}
  html.mobile-order-reader #ordersPage{padding-top:6px!important}
  html.mobile-order-reader #ordersPage .mobile-reader-heading{gap:6px!important;margin-bottom:6px!important}
  html.mobile-order-reader .mobile-reader-heading>div{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
  html.mobile-order-reader .mobile-reader-heading h1{margin:0!important;font-size:16px!important;line-height:1.3!important}
  html.mobile-order-reader .mobile-reader-heading p{margin:0!important;font-size:12px!important;line-height:1.4!important}
  html.mobile-order-reader .mobile-reader-heading>div>span{flex-basis:100%;font-size:12px!important;line-height:1.4!important}
  html.mobile-order-reader #ordersPage :is(.mobile-reader-heading,.mobile-reader-search) button{padding:6px!important;font-size:13px!important}
  html.mobile-order-reader #ordersPage #mobileReaderSearch{gap:6px!important;margin-bottom:6px!important}
  html.mobile-order-reader #ordersPage .quick-filters{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:5px!important;margin:0 -5px 5px!important;scroll-padding-inline:5px;scrollbar-width:thin;overscroll-behavior-inline:contain}
  html.mobile-order-reader #ordersPage .quick-filters>button{flex:0 0 auto!important;min-width:64px!important;min-height:44px!important;padding:6px 8px!important}
  html.mobile-order-reader #ordersPage .quick-filters.reader-quick-open{flex-wrap:wrap!important;overflow:visible!important}
  html.mobile-order-reader #ordersPage #ordersBody>tr.mobile-reader-row{margin-bottom:8px!important}
  html.mobile-order-reader .reader-card{padding:9px 10px;font-size:14px;line-height:1.4}
  html.mobile-order-reader .reader-card-head{gap:8px;align-items:center}
  html.mobile-order-reader .reader-shop .shop-identity{gap:6px!important;min-height:26px!important}
  html.mobile-order-reader .reader-shop .shop-identity :is(img,.shop-logo){width:26px!important;height:26px!important;min-width:26px!important;border-radius:6px!important}
  html.mobile-order-reader #ordersPage .reader-card .shop-identity .shop-name{font-size:13px!important;line-height:1.3!important}
  html.mobile-order-reader .reader-card-head>.row-status{width:auto!important;min-width:0!important;max-width:52%;padding:3px 7px!important;font-size:12px!important;line-height:1.4!important}
  html.mobile-order-reader .reader-date-line{gap:2px 8px;margin:4px 0 6px;font-size:12px;line-height:1.4}
  html.mobile-order-reader .reader-date-line>.order-date-cell{gap:2px 6px}
  html.mobile-order-reader .reader-product{gap:8px;margin-bottom:6px}
  html.mobile-order-reader #ordersPage .reader-card .reader-product-preview{width:56px!important;height:56px!important;min-width:56px!important}
  html.mobile-order-reader #ordersPage .reader-card .reader-product-preview .product-img{width:54px!important;height:54px!important}
  html.mobile-order-reader .reader-no-image{width:56px;height:56px}
  html.mobile-order-reader .reader-spec{margin-bottom:4px;font-size:14px;line-height:1.4}
  html.mobile-order-reader .reader-product-meta{gap:4px 10px;font-size:12px;line-height:1.4}
  html.mobile-order-reader .reader-group-badge{margin-top:4px;font-size:11px}
  html.mobile-order-reader .reader-copy-line{min-height:44px;gap:6px;padding:0;box-sizing:border-box}
  html.mobile-order-reader .reader-label{font-size:12px;line-height:1.4}
  html.mobile-order-reader .reader-copy-line>[data-copy-value]{font-size:14px;line-height:1.4}
  html.mobile-order-reader #ordersPage .reader-card button,html.mobile-order-reader #ordersPage .reader-card a.reader-open-source{min-height:44px;min-width:44px;padding:6px;gap:6px;font-size:13px}
  html.mobile-order-reader .reader-source{gap:6px;min-height:44px;padding:0;box-sizing:border-box}
  html.mobile-order-reader .reader-source>b,html.mobile-order-reader .reader-source-contact{font-size:13px}
  html.mobile-order-reader .reader-finance{gap:4px 8px;margin:5px 0 7px;font-size:12px;line-height:1.5}
  html.mobile-order-reader .reader-finance b{font-size:13px}
  html.mobile-order-reader .reader-actions,html.mobile-order-reader .reader-secondary-actions{gap:6px}
  html.mobile-order-reader .reader-more{margin-top:7px;padding-top:7px}
  html.mobile-order-reader .reader-more .reader-copy-line{padding-block:3px;row-gap:2px;align-items:start}
  html.mobile-order-reader .reader-detail-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;margin:8px 0}
  html.mobile-order-reader .reader-detail-fields>div{grid-column:auto!important}
  html.mobile-order-reader .reader-detail-fields>div.reader-detail-wide{grid-column:1/-1!important}
  html.mobile-order-reader .reader-detail-fields dt{margin-bottom:2px;font-size:12px;line-height:1.4}
  html.mobile-order-reader .reader-detail-fields dd{font-size:13px;line-height:1.45}
  html.mobile-order-reader .reader-refund-image{gap:5px;margin-bottom:8px}
  html.mobile-order-reader .mobile-expanded .reader-actions{position:sticky;top:var(--order-compact-sticky-top,0px);z-index:3;padding-block:6px;background:var(--surface,#fff);box-shadow:0 2px 0 var(--surface,#fff)}
  html.mobile-order-reader .pwa-install-banner{gap:6px 10px;margin-bottom:8px;padding:10px;grid-template-columns:28px minmax(0,1fr) 44px}
  html.mobile-order-reader .pwa-install-banner>img{width:28px;height:28px;border-radius:7px}
  html.mobile-order-reader .pwa-install-banner h2{font-size:14px}
  html.mobile-order-reader .pwa-install-banner p{font-size:12px}
  html.mobile-order-reader .pwa-banner-action{padding:6px 12px!important;min-height:44px!important}
}
@media(max-width:600px){
  html.mobile-order-reader #appView>.topbar{grid-template-columns:44px minmax(0,1fr) 44px!important}
  html.mobile-order-reader #appView>.topbar #mainNav{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 88px!important}
  html.mobile-order-reader #appView>.topbar #mainNav>#mobileReaderNavMore>span{max-width:28px!important}
  html.mobile-order-reader #appView>.topbar>.logo{width:44px!important;min-width:44px!important;justify-content:center!important;padding:0!important}
  html.mobile-order-reader #appView>.topbar>.logo>span{display:none!important}
  html.mobile-order-reader #appView>.topbar .brand-logo{width:28px!important;height:28px!important}
  html.mobile-order-reader #appView>.topbar #userMenu{width:44px!important;max-width:44px!important}
  html.mobile-order-reader #appView>.topbar #userMenu>span:not(.avatar),html.mobile-order-reader #appView>.topbar #userMenu>em{display:none!important}
  html.mobile-order-reader .mobile-reader-heading h1{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){html.mobile-order-reader .quick-filters{scroll-behavior:auto!important}}