html.device-mobile,html.device-mobile body{width:100%;max-width:100%;min-width:0;overflow-x:hidden}html.device-mobile body{margin:0}html.device-mobile .shell{display:flex;width:100%;max-width:100%;min-width:0;overflow-x:hidden}html.device-mobile main{width:100%!important;max-width:100%;min-width:0;flex:1 1 100%}html.device-mobile header{width:100%;max-width:100%;height:76px;padding:12px max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left));overflow:hidden}html.device-mobile header>div{min-width:0;margin-right:11px;margin-left:auto}html.device-mobile header h1{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html.device-mobile .mobile-menu{display:block;flex:0 0 39px}html.device-mobile .side{position:fixed;z-index:25;right:-270px;top:0;height:100dvh;transition:.25s;box-shadow:-8px 0 25px #0003}html.device-mobile .side.open{right:0}html.device-mobile #app{width:100%;max-width:100%;min-width:0;margin:0;padding:20px max(14px,env(safe-area-inset-right)) 118px max(14px,env(safe-area-inset-left));overflow-x:hidden}html.device-mobile #app .head{align-items:flex-start;gap:11px;flex-direction:column}html.device-mobile #app .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;width:100%;max-width:100%}html.device-mobile #app .stat{min-width:0;padding:13px;overflow:hidden}html.device-mobile #app .stat b,html.device-mobile #app .stat small,html.device-mobile #app .stat em{max-width:100%;overflow-wrap:anywhere}html.device-mobile #auth-screen{width:100%;max-width:100%;overflow-x:hidden;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}html.device-mobile #auth-screen .auth-card{width:100%;max-width:410px;min-width:0}
@media (max-width:700px){
  html,body,.shell,main,#app{width:100%;max-width:100%;min-width:0;overflow-x:hidden}
  .shell{display:flex}
  header,#app,.card,.card.form,.stats,.grid,.products{min-width:0;max-width:100%}
  #auth-screen{width:100%;max-width:100%;overflow-x:hidden;padding-left:12px;padding-right:12px}
  #auth-screen .auth-card{width:100%;max-width:410px;min-width:0}
  #app .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  html,body{width:100%;max-width:100%;overflow-x:hidden}main,#app,.card,.card.form{min-width:0;max-width:100%}
  #app .items .item{grid-template-columns:1fr!important;min-width:0}
  #app .items .category{display:grid!important}
  #app .items .item .field,#app .items .item input,#app .items .item select{min-width:0;width:100%}
  body{overflow-x:hidden}#app{padding:14px 3.5% 118px;max-width:100%;overflow-x:hidden}#app .card.form{padding:14px;border-radius:10px}#app .card.form .grid{grid-template-columns:1fr;gap:11px}#app .items .item{grid-template-columns:1fr;gap:9px;padding:12px 10px;margin-bottom:10px;border:1px solid var(--line);border-radius:9px;background:#fff;align-items:stretch}#app .items .item .field{width:100%}#app .items .item .field.category{display:grid}#app .items .item input,#app .items .item select,#app #payment-method,#app #op,#app #when,#app #invoice-discount,#app #notes{min-height:44px;font-size:16px;padding:10px 11px}#app .items .item .line{background:var(--soft);font-weight:bold}#app .items .item .remove{width:100%;height:42px}#app .card.form:has(#items)>[data-a="add"]{width:100%;min-height:44px;font-size:15px}#app .card.form:has(#items) .summary{position:sticky;bottom:67px;z-index:8;max-width:none;margin:14px 0 0;padding:12px;background:#edf5eff2;box-shadow:0 -5px 18px #183d3014;backdrop-filter:blur(4px)}#app .card.form:has(#items) .actions{position:sticky;bottom:0;z-index:9;margin:0 -14px -14px;padding:10px 14px;background:#fff;box-shadow:0 -5px 18px #183d3014}#app .card.form:has(#items) .actions .btn{flex:1;min-height:46px;padding:10px 8px;font-size:14px}#app .card.form:has(#items) .section-label{margin-top:16px}}
@media (max-width:360px){#app{padding-left:10px;padding-right:10px}#app .card.form{padding:11px}#app .actions{margin-left:-11px;margin-right:-11px;padding-left:11px;padding-right:11px}.summary{font-size:12px}}