.mobile-home,.mobile-nav,.mobile-back{display:none}

@media(max-width:720px){
  body{background:#f7f8fa;padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .topbar{display:none}
  main{max-width:640px;padding:14px 14px 18px}
  .mobile-home{display:block}
  .mobile-home-heading{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 15px}
  .mobile-home-heading strong{display:block;color:#202939;font-size:24px;line-height:1.2}
  .mobile-home-heading span{display:block;margin-top:4px;color:#667085;font-size:14px}
  .mobile-home-heading button{min-height:36px;border:0;border-radius:18px;background:#eaf2ff;color:#175cd3;padding:0 14px;font:inherit;font-size:14px}
  .mobile-search{position:relative;margin:0 0 14px;color:#667085;font-size:0}
  .mobile-search span{display:none}
  .mobile-search input{height:48px;margin:0;border:0;border-radius:24px;background:#fff;padding:10px 16px 10px 44px;box-shadow:0 1px 5px #10182812;font-size:16px}
  .mobile-search::before{position:absolute;z-index:1;left:17px;top:14px;width:14px;height:14px;border:2px solid #98a2b3;border-radius:50%;content:""}
  .mobile-search::after{position:absolute;left:30px;top:29px;width:8px;border-top:2px solid #98a2b3;transform:rotate(45deg);content:""}
  .mobile-shortcuts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-bottom:26px}
  .mobile-shortcut{min-height:104px;border:0;border-radius:8px;padding:15px 12px;text-align:left;color:#fff;box-shadow:inset 0 -22px 34px #10182812;font:inherit;cursor:pointer}
  .mobile-shortcut span{display:block;font-size:22px;font-weight:700;line-height:1.2}
  .mobile-shortcut small{display:block;margin-top:9px;color:#ffffffd9;font-size:12px;line-height:1.35}
  .mobile-shortcut-sale,.mobile-shortcut-documents{grid-column:span 3;min-height:122px}
  .mobile-shortcut-stock,.mobile-shortcut-ledger,.mobile-shortcut-purchase{grid-column:span 2}
  .mobile-shortcut-sale{background:#ef8b49}
  .mobile-shortcut-documents{background:#38a8dc}
  .mobile-shortcut-stock{background:#f0b429}
  .mobile-shortcut-ledger{background:#8e82df}
  .mobile-shortcut-purchase{background:#5fa98a}
  .backup-bar,.stats{display:none}
  .grid{display:block;margin:0}
  .panel{margin:0;border:0;border-radius:0;background:transparent;padding:0}
  .mobile-view-panel .panel-title{margin-bottom:12px}
  .mobile-back{display:none;min-height:36px;border:0;border-radius:18px;background:#edf2f7;color:#344054;padding:0 12px;font:inherit;font-size:14px;white-space:nowrap}
  #inventory-panel .inventory-title h2{font-size:22px}
  #inventory-panel .inventory-title h2::before{content:"热门商品"}
  #inventory-panel .inventory-title h2{font-size:0}
  #inventory-panel .inventory-title h2::before{font-size:22px}
  #inventory-panel .inventory-actions{display:none}
  #inventory-panel .product-grid{gap:10px}
  #inventory-panel .product-card{border:0;border-radius:7px;background:#fff;box-shadow:0 1px 5px #10182812}
  #inventory-panel .product-image-wrap{height:190px}
  #inventory-panel .product-card-body{padding:10px}
  #inventory-panel .product-card h3{font-size:17px}
  #inventory-panel .product-spec{font-size:12px}
  #inventory-panel .product-card-bottom{font-size:13px}
  #inventory-panel .product-card-bottom strong{font-size:14px}
  #inventory-panel .pagination{margin:16px 0 4px}
  .mobile-nav{position:fixed;z-index:10;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(5,1fr);min-height:calc(68px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-top:1px solid #e4e7ec;background:#fff;box-shadow:0 -1px 5px #1018280d}
  .mobile-nav button{border:0;background:transparent;color:#667085;padding:11px 3px 8px;font:inherit;font-size:13px;line-height:1.2}
  .mobile-nav button::before{display:block;width:19px;height:19px;margin:0 auto 4px;border:2px solid currentColor;border-radius:5px;content:""}
  .mobile-nav button[data-mobile-nav="home"]::before{border-radius:8px 8px 4px 4px;transform:rotate(45deg) scale(.75)}
  .mobile-nav button[data-mobile-nav="transaction"]::before{border-radius:50%}
  .mobile-nav button[data-mobile-nav="documents"]::before{border-radius:2px}
  .mobile-nav button.active{color:#e8702a;font-weight:700}
  body[data-mobile-view="home"] .mobile-nav [data-mobile-nav="home"],body[data-mobile-view="inventory"] .mobile-nav [data-mobile-nav="inventory"],body[data-mobile-view="transaction"] .mobile-nav [data-mobile-nav="transaction"],body[data-mobile-view="documents"] .mobile-nav [data-mobile-nav="documents"]{color:#e8702a;font-weight:700}
  body[data-mobile-view="home"] #transaction-panel,body[data-mobile-view="home"] #recent-documents{display:none}
  body[data-mobile-view="transaction"] .mobile-home,body[data-mobile-view="transaction"] #inventory-panel,body[data-mobile-view="transaction"] #recent-documents,body[data-mobile-view="documents"] .mobile-home,body[data-mobile-view="documents"] .grid,body[data-mobile-view="inventory"] .mobile-home,body[data-mobile-view="inventory"] #transaction-panel,body[data-mobile-view="inventory"] #recent-documents{display:none}
  body[data-mobile-view="transaction"] #transaction-panel,body[data-mobile-view="inventory"] #inventory-panel,body[data-mobile-view="documents"] #recent-documents{display:block}
  body[data-mobile-view="transaction"] .mobile-back,body[data-mobile-view="inventory"] .mobile-back,body[data-mobile-view="documents"] .mobile-back{display:inline-block}
  body[data-mobile-view="inventory"] #inventory-panel .inventory-actions{display:flex}
  body[data-mobile-view="inventory"] #inventory-panel .inventory-title h2{font-size:22px}
  body[data-mobile-view="inventory"] #inventory-panel .inventory-title h2::before{display:none}
  body[data-mobile-view="inventory"] #inventory-panel .variant-list{display:grid}
  body[data-mobile-view="inventory"] #inventory-panel .product-image-wrap{height:170px}
  body[data-mobile-view="transaction"] .panel-title,body[data-mobile-view="documents"] .panel-title,body[data-mobile-view="inventory"] .inventory-title{align-items:center}
  body[data-mobile-view="transaction"] .panel-title h2,body[data-mobile-view="documents"] .panel-title h2{font-size:21px}
  body[data-mobile-view="documents"] #recent-documents{background:transparent}
  body[data-mobile-view="documents"] .document-filters{padding:12px;border-radius:8px;background:#fff}
  body[data-mobile-view="documents"] .table-wrap{margin-top:12px;border-radius:8px;background:#fff}
}

@media(max-width:390px){
  .mobile-shortcut{padding:13px 10px}
  .mobile-shortcut span{font-size:20px}
  .mobile-shortcut small{font-size:11px}
  #inventory-panel .product-image-wrap{height:165px}
}