:root{color-scheme:light}
html{overflow-x:hidden}
body{min-width:0;overflow-x:hidden}
img{max-width:100%}
@media(min-width:701px){
  body:has(#app:not(.hide)){background:#f7f8fc}
  .app{grid-template-columns:250px 1fr!important;align-items:start}
  .app>.side{background:#fff!important;color:#293047!important;border-right:1px solid #e9eaf2;padding:22px 14px!important}
  .app>.side{position:fixed;z-index:5;left:0;top:0;bottom:0;width:250px;height:100vh;max-height:100vh;overflow:hidden}
  .app>.main{grid-column:2;min-width:0}
  .app>.side .brand{color:#39246d!important;padding:4px 14px 14px!important}
  .app>.side .brand b{color:#7037d3!important}
  .app>.side .nav-heading{color:#9a9daf!important;font-size:10px!important}
  .app>.side .nav{color:#5e6070!important;border-radius:10px!important;padding:7px 13px!important;font-size:13px!important}
  .app>.side .nav:hover,.app>.side .nav.active{background:#f2eaff!important;color:#7134d3!important}
  .app>.side .subnav{border-color:#e8ddfa!important}
  .app>.side .subnav-link{color:#747587!important}
  .app>.side .subnav-link:hover,.app>.side .subnav-link.active{background:#f7f1ff!important;color:#7134d3!important}
  .app>.side .nav-group{margin-top:7px!important}
  .app>.side .nav-heading{padding:3px 10px!important}
  .app>.side .subnav-link{padding:4px 10px!important;font-size:12px!important}
  .app>.main{padding:0 34px 40px!important;max-width:none!important}
  .app>.main>.admin-topbar{height:76px;margin:0 -34px 30px;padding:0 34px;display:flex;align-items:center;justify-content:flex-end;background:#fff;border-bottom:1px solid #ececf2}
  .header-actions{display:flex;align-items:center;gap:10px}
  .header-alert{position:relative;border:1px solid #ecebf4!important;background:#fff!important;color:#55586a!important;border-radius:10px!important;padding:10px 14px!important;font-weight:700!important}
  .header-alert:hover{border-color:#7134d3!important;color:#7134d3!important}
  #dash>h1{font-size:28px;margin-bottom:4px}
  #dash>h1:after{content:'Live figures from your store';display:block;margin-top:8px;color:#9698a5;font:500 13px 'Noto Sans Myanmar'}
  #dash>.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:26px}
  #dash>.cards .card{min-height:138px;display:flex;flex-direction:column;justify-content:center;border:1px solid #ecebf4!important;border-radius:16px!important;box-shadow:0 7px 22px #5b547d12!important;position:relative;overflow:hidden}
  #dash>.cards .card:before{content:'◈';display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#f0e7ff;color:#7037d3;font-size:19px;margin-bottom:10px}
  #dash>.cards .card:nth-child(2):before{content:'₭';background:#e7f1ff;color:#3676ce}
  #dash>.cards .card:nth-child(3):before{content:'▣';background:#fff0e5;color:#ef923f}
  #dash>.cards .card:nth-child(4):before{content:'↗';background:#e9f8eb;color:#39a45b}
  #dash>.grid{gap:18px!important}
  #dash>.grid .tablebox{border-radius:16px!important;box-shadow:0 7px 22px #5b547d12!important}
}
@media(max-width:700px){
  header{height:auto;min-height:64px;padding:10px 14px;gap:7px;flex-wrap:wrap}
  header .brand{margin-right:auto;min-width:0}
  header .location{order:3;margin-left:0;width:100%;text-align:center}
  header .admin-login{padding:8px 9px;font-size:11px}
  header .cart-btn{padding:8px 10px;font-size:12px}
  .hero,.page{padding:32px 16px}
  .hero{min-height:calc(100vh - 64px);padding-top:48px}
  .products{grid-template-columns:1fr 1fr;gap:10px}
  .product-body{padding:11px}
  .product button,.primary{padding:11px 8px;font-size:13px}
  .cart-line{gap:8px;padding:13px 0}
  .page-title{display:block;margin-bottom:18px}
  .page-title .link-btn{padding-left:0}
  form{padding:16px}
  .payment-info{margin-left:-2px;margin-right:-2px}
  footer{padding:22px 16px}
}
@media(max-width:380px){
  .products{grid-template-columns:1fr}
  header .admin-login{font-size:10px;padding:7px}
}
.mobile-home{display:none}
.product-qty{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.product-qty button{width:34px;height:34px;padding:0!important;font-size:20px;line-height:1}
.product-qty strong{min-width:24px;text-align:center}
.payment-info{margin:12px 0 16px;padding:14px;border:1px solid #eadffc;border-radius:12px;background:#fbf9ff}
.payment-info img{display:block;max-width:180px;max-height:180px;margin:10px auto;object-fit:contain}
.payment-copy-row{display:flex;align-items:center;gap:8px}
.payment-copy-row p{flex:1;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.payment-copy-row button{white-space:nowrap}
@media(max-width:700px){
  .app{display:block;min-height:100vh;background:#f5f5f7}
  .app>.side{display:none}
  .app>.main{padding:0 14px 88px;max-width:none}
  .app>.main>.admin-topbar{display:none}
  .mobile-home{display:block;margin:0 -14px;padding:18px 14px 0;background:linear-gradient(155deg,#ff4a12,#ff1e00 52%,#f5f5f7 52.2%);min-height:550px}
  .mobile-home-head{display:flex;align-items:center;justify-content:space-between;color:#fff;padding:0 3px 15px}
  .mobile-home-head small,.mobile-home-head strong{display:block}
  .mobile-home-head small{font-size:12px;opacity:.9}
  .mobile-home-head strong{font-size:19px}
  .mobile-home-actions{display:flex;align-items:center;gap:5px}
  .mobile-alert{position:relative;border:0!important;background:transparent!important;color:#fff!important;padding:8px!important;font-size:19px}
  .mobile-count{position:absolute;right:0;top:0;min-width:16px;height:16px;border-radius:99px;background:#fff;color:#e52d14;font:700 10px Arial;text-align:center;padding-top:2px}
  .mobile-profile{width:46px;height:46px;border-radius:14px;background:#fff!important;border:0!important;font-size:24px;padding:0!important}
  .mobile-date{display:flex;align-items:center;gap:14px;background:#f7f7f8;border-radius:12px;padding:14px;margin-bottom:34px;color:#333;font-weight:600;box-shadow:0 3px 8px #0002}
  .mobile-banner{height:96px;border-radius:12px;background:linear-gradient(120deg,#d7b17d,#fff0c8 42%,#8c6b47);display:flex;align-items:flex-end;padding:12px;color:#fff;font-weight:700;margin-bottom:36px;box-shadow:0 3px 8px #0002}
  .mobile-module-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .mobile-module-grid button{min-height:90px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:#f8f8f9!important;border:1px solid #e6e6e8!important;border-radius:12px!important;color:#25252a!important;font-size:27px;padding:10px!important;box-shadow:0 2px 6px #0000000d}
  .mobile-module-grid button b{font-size:13px}
  .mobile-bottom-nav{position:fixed;z-index:10;bottom:8px;left:5px;right:5px;height:58px;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:30px;box-shadow:0 0 10px #0002;padding:4px}
  .mobile-bottom-nav button{border:0!important;background:transparent!important;color:#555!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:2px!important;font-size:20px}
  .mobile-bottom-nav button.active{color:#ff3d16!important}
  .mobile-bottom-nav small{font-size:10px;font-weight:700}
  .mobile-menu-drawer{display:none;position:fixed;z-index:12;left:8px;right:8px;bottom:74px;max-height:calc(100vh - 100px);overflow:auto;background:#fff;border-radius:18px;padding:16px;box-shadow:0 10px 35px #1719233d}
  .mobile-menu-drawer.open{display:block;animation:mobile-menu-in .18s ease-out}
  .mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #eee}
  .mobile-menu-head strong{font-size:18px}
  .mobile-menu-head button{border:0!important;background:transparent!important;font-size:25px;padding:0!important}
  .mobile-menu-section{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  .mobile-menu-section small{grid-column:1/-1;color:#8b8d99;font-weight:700;font-size:11px}
  .mobile-menu-section button{min-height:44px!important;text-align:left;background:#f8f8fa!important;border:1px solid #ececf0!important;border-radius:9px!important;padding:8px!important;color:#30313a!important;font-size:12px}
  @keyframes mobile-menu-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  #mobileHome~.view{margin-top:20px}
  .sales-table{overflow:visible!important}
  .sales-table table{min-width:0!important;width:100%}
  .sales-table thead{display:none}
  .sales-table tbody,.sales-table tr,.sales-table td{display:block;width:100%}
  .sales-table tr{margin:0 0 12px;padding:10px;border:1px solid #ececf2;border-radius:12px;background:#fff}
  .sales-table td{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px;padding:7px 4px;word-break:break-word}
  .sales-table td:before{content:attr(data-label);font-weight:700;color:#858694}
  .sales-table td:last-child{display:block;padding-top:10px}
  .sales-table td:last-child:before{display:block;margin-bottom:4px}
}