:root{--navy:#0a2f5a;--blue:#147df5;--green:#18c866;--text:#102541;--muted:#65748b;--line:#e3ebf5;--bg:#f5f9ff;--white:#fff;--danger:#e54857}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}button,input,select{font:inherit}
.app-shell{min-height:100vh;display:grid;grid-template-columns:230px 1fr}
.sidebar{position:sticky;top:0;height:100vh;background:#082b54;color:#d9e9f9;padding:20px 16px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;margin-bottom:28px}.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,#1683ff,#1ac976);display:grid;place-items:center;font-weight:900;font-size:22px}.brand span:last-child{display:flex;flex-direction:column}.brand strong{font-size:16px}.brand small{font-size:9px;color:#9fc2e4;text-transform:uppercase;letter-spacing:.08em}
.sidebar nav{display:flex;flex-direction:column;gap:7px}.sidebar nav a,.sidebar-foot a{color:#cfe3f6;text-decoration:none;padding:10px 11px;border-radius:9px;font-size:13px;font-weight:700}.sidebar nav a.active,.sidebar nav a:hover{background:#147df5;color:#fff}.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:4px}
.main{min-width:0}.topbar{height:86px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:10}.topbar h1{font-size:22px;margin:0}.topbar p{margin:3px 0 0;color:#7a889b;font-size:12px}.user-chip{margin-left:auto;background:#f3f7fb;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;display:flex;align-items:center;gap:7px}.dot{width:8px;height:8px;border-radius:50%;background:#19c968}.menu-btn{display:none;background:none;border:0;font-size:22px}
.content{padding:24px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 10px 28px rgba(20,60,110,.05)}.stat-card span{color:#738196;font-size:12px}.stat-card strong{display:block;font-size:24px;margin:7px 0}.stat-card small{color:#8a97a8;font-size:10px}.stat-card.warning strong{color:#e68a1e}
.panel{background:#fff;border:1px solid var(--line);border-radius:17px;padding:18px;box-shadow:0 10px 28px rgba(20,60,110,.05)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.panel-head h2{font-size:17px;margin:0}.panel-head p{font-size:11px;color:#8794a6;margin:3px 0 0}.panel-head>span{font-size:10px;background:#edf5ff;color:#147df5;padding:6px 8px;border-radius:999px}.dash-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:16px}.chart-box{height:260px;background:linear-gradient(#fff,#f7fbff);border-radius:12px;border:1px solid #edf2f7}.chart-box svg{width:100%;height:100%}
.recent-list{display:flex;flex-direction:column}.recent-list>div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #eef2f7}.recent-list>div:last-child{border-bottom:0}.recent-list span{display:flex;flex-direction:column}.recent-list b{font-size:12px}.recent-list small{font-size:10px;color:#8a97a8;margin-top:3px}.recent-list strong{font-size:12px}.empty{padding:18px;color:#8a97a8;text-align:center}
.two-col{display:grid;grid-template-columns:.72fr 1.28fr;gap:16px}.two-col.narrow-left{grid-template-columns:.55fr 1.45fr}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid.one{grid-template-columns:1fr}.form-grid label,.cart-panel label{font-size:11px;font-weight:800;color:#50627a}.form-grid input,.form-grid select,.cart-panel input,.cart-panel select,.search{width:100%;margin-top:5px;border:1px solid #dce5ef;border-radius:9px;padding:10px 11px;background:#fff}.full{grid-column:1/-1}.primary{border:0;background:#147df5;color:#fff;border-radius:9px;padding:11px 14px;font-weight:900;cursor:pointer}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:11px 9px;border-bottom:1px solid #eef2f7;font-size:12px;white-space:nowrap}th{color:#708096;font-size:10px;text-transform:uppercase;letter-spacing:.04em}td small{display:block;color:#8c99aa;margin-top:2px}.stock{display:inline-block;background:#eaf9ef;color:#158149;padding:4px 7px;border-radius:999px;font-weight:800}.stock.low{background:#fff0e3;color:#c56a14}.link-danger{border:0;background:none;color:var(--danger);font-weight:800;font-size:11px;cursor:pointer}
.pos-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:16px}.search{max-width:230px;margin:0}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.product-card{text-align:left;border:1px solid #e5ecf5;background:#fff;border-radius:13px;padding:14px;cursor:pointer;transition:.2s}.product-card:hover{border-color:#9bc8ff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(20,80,150,.07)}.product-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#eff6ff;margin-bottom:9px}.product-card b,.product-card small,.product-card strong{display:block}.product-card b{font-size:13px}.product-card small{font-size:10px;color:#8a97a8;margin:4px 0}.product-card strong{font-size:12px;color:#147df5}.cart-items{min-height:180px}.cart-line{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid #eef2f7}.cart-line small{display:block;color:#8b98aa;font-size:10px}.qty-controls{display:flex;align-items:center;gap:6px}.qty-controls button{width:27px;height:27px;border:1px solid #dce5ef;background:#fff;border-radius:7px;cursor:pointer}.cart-total{display:flex;align-items:center;justify-content:space-between;padding:15px 0;font-size:14px}.cart-total strong{font-size:20px}.notice{margin-bottom:15px;background:#eaf9ef;border:1px solid #ccefd9;color:#176e43;padding:12px 14px;border-radius:11px;font-size:12px}.report-stats{grid-template-columns:1fr 1fr}
.login-body{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 80% 20%,#1989ff33,transparent 25%),linear-gradient(135deg,#062b63,#0b5eae)}.login-card{width:min(430px,100%);background:#fff;border-radius:22px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.login-logo{width:60px;height:60px;border-radius:17px;background:linear-gradient(145deg,#147df5,#18c866);display:grid;place-items:center;color:#fff;font-weight:900;font-size:28px}.login-card h1{margin:15px 0 5px}.login-card p{margin:0 0 20px;color:#64748b}.login-card label{display:block;font-size:11px;font-weight:800;margin-top:12px}.login-card input{width:100%;padding:12px;margin-top:5px;border:1px solid #dce5ef;border-radius:9px}.login-card button{width:100%;margin-top:16px;padding:12px;border:0;border-radius:9px;background:#147df5;color:#fff;font-weight:900}.demo-cred{margin-top:14px;background:#f4f8fc;padding:10px;border-radius:9px;font-size:10px;color:#5b6e86}.login-back{display:block;text-align:center;margin-top:15px;color:#147df5;font-size:11px;font-weight:800}.alert{background:#fff0f1;color:#a92938;padding:10px;border-radius:9px;font-size:11px}
@media(max-width:1000px){.stats-grid{grid-template-columns:repeat(2,1fr)}.dash-grid,.two-col,.two-col.narrow-left,.pos-grid{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-250px;z-index:50;width:230px;transition:.2s}.sidebar.open{left:0}.menu-btn{display:block}.topbar{padding:0 15px}.content{padding:15px}.user-chip{font-size:0;padding:8px}.stats-grid{grid-template-columns:1fr 1fr}.product-grid{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}}
@media(max-width:500px){.stats-grid,.report-stats{grid-template-columns:1fr}.product-grid{grid-template-columns:1fr}.panel-head{align-items:flex-start}.search{max-width:150px}.topbar h1{font-size:18px}}

/* v2 additions */
.secondary-btn{display:flex;align-items:center;justify-content:center;text-decoration:none;background:#eef5ff;color:#147df5;border-radius:9px;padding:11px 14px;font-weight:900}.action-row{display:flex;align-items:center;gap:9px}.edit-link,.text-link,.invoice-link{color:#147df5;text-decoration:none;font-weight:800;font-size:11px}.movement-panel{margin-top:16px}.neg{color:#d94858}.pos{color:#16a05c}.recent-link{display:flex!important;text-decoration:none;color:inherit}.notice.danger{background:#fff0f1;border-color:#ffd5d9;color:#a92534}
.pos-head{align-items:flex-start}.pos-tools{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.scan-btn{border:1px solid #cfe1f7;background:#edf6ff;color:#147df5;border-radius:9px;padding:10px 12px;font-size:11px;font-weight:900;cursor:pointer}.barcode-text{color:#4c6786!important}.scan-box{position:relative;background:#09111d;border-radius:14px;padding:10px;margin-bottom:14px;overflow:hidden}.scan-box video{display:block;width:100%;max-height:360px;object-fit:cover;border-radius:10px}.scan-overlay{position:absolute;left:15%;right:15%;top:35%;height:30%;border:2px solid #22df75;border-radius:10px;box-shadow:0 0 0 9999px rgba(0,0,0,.2)}.scan-box button{position:absolute;right:18px;top:18px;z-index:2;border:0;background:#fff;color:#102541;border-radius:8px;padding:8px 10px;font-weight:800;cursor:pointer}
.real-chart{height:300px;position:relative}.real-chart svg{width:100%;height:260px}.chart-labels{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;color:#8090a4;font-size:9px;text-align:center}.demo-tools{margin-top:16px}.tool-row{display:flex;align-items:center;justify-content:space-between;gap:20px}.tool-row>div{display:flex;flex-direction:column}.tool-row b{font-size:13px}.tool-row small{margin-top:4px;color:#7d8b9d}.danger-btn{border:0;background:#e54857;color:#fff;border-radius:9px;padding:10px 13px;font-weight:900;cursor:pointer}
@media(max-width:760px){.pos-tools{width:100%;justify-content:stretch}.pos-tools .search,.scan-btn{max-width:none;flex:1 1 140px}.tool-row{align-items:flex-start;flex-direction:column}.danger-btn{width:100%}}


/* Product action buttons refinement v2.1 */
.action-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
}
.action-row form{
  margin:0 !important;
}
.action-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  height:34px !important;
  padding:0 10px !important;
  border-radius:9px !important;
  border:1px solid transparent !important;
  font-size:11px !important;
  font-weight:850 !important;
  line-height:1 !important;
  text-decoration:none !important;
  cursor:pointer !important;
  transition:.18s ease !important;
  white-space:nowrap !important;
}
.action-btn svg{
  width:14px !important;
  height:14px !important;
  flex:0 0 14px !important;
}
.edit-btn{
  color:#147df5 !important;
  background:#eef6ff !important;
  border-color:#d6e8ff !important;
}
.edit-btn:hover{
  background:#147df5 !important;
  color:#fff !important;
  border-color:#147df5 !important;
  transform:translateY(-1px) !important;
}
.delete-btn{
  color:#d84555 !important;
  background:#fff1f3 !important;
  border-color:#ffd9de !important;
}
.delete-btn:hover{
  background:#e54857 !important;
  color:#fff !important;
  border-color:#e54857 !important;
  transform:translateY(-1px) !important;
}
@media(max-width:760px){
  .action-row{
    gap:6px !important;
  }
  .action-btn{
    width:34px !important;
    padding:0 !important;
  }
  .action-btn span{
    display:none !important;
  }
}


/* Product actions hard-fix v2.2 */
.action-cell{
  width:160px !important;
}
.product-actions{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  flex-wrap:nowrap !important;
}
.product-actions form{
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}
.product-action{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:64px !important;
  height:32px !important;
  margin:0 !important;
  padding:0 10px !important;
  border-radius:8px !important;
  border:1px solid transparent !important;
  font-family:inherit !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
.product-edit{
  color:#147df5 !important;
  background:#edf6ff !important;
  border-color:#d3e7ff !important;
}
.product-edit:hover{
  color:#fff !important;
  background:#147df5 !important;
  border-color:#147df5 !important;
}
.product-delete{
  color:#d84555 !important;
  background:#fff0f2 !important;
  border-color:#ffd5da !important;
}
.product-delete:hover{
  color:#fff !important;
  background:#e54857 !important;
  border-color:#e54857 !important;
}
@media(max-width:760px){
  .action-cell{
    width:120px !important;
  }
  .product-actions{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .product-action{
    width:100% !important;
    min-width:0 !important;
  }
}


/* POS checkout + scanner refinement v2.3 */
.pay-print-btn{
  width:100% !important;
  min-height:48px !important;
  font-size:14px !important;
}
.scan-btn{
  min-height:42px !important;
  padding:0 14px !important;
  border-radius:10px !important;
  background:#147df5 !important;
  color:#fff !important;
  border:1px solid #147df5 !important;
}
.scan-btn:hover{
  background:#0e6de0 !important;
}
.scan-status{
  position:absolute !important;
  left:50% !important;
  bottom:18px !important;
  transform:translateX(-50%) !important;
  z-index:3 !important;
  background:rgba(0,0,0,.72) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:8px 12px !important;
  font-size:11px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}
.cart-panel form{
  margin-top:8px !important;
}


/* POS refinement v2.4 */
.cart-panel form label{
  display:block !important;
  margin-bottom:14px !important;
}
.pay-print-btn{
  width:100% !important;
  min-height:50px !important;
  display:block !important;
  margin-top:14px !important;
  font-size:14px !important;
}
.scan-btn{
  min-height:44px !important;
  padding:0 16px !important;
  border-radius:10px !important;
  background:#147df5 !important;
  color:#fff !important;
  border:1px solid #147df5 !important;
  font-weight:800 !important;
  cursor:pointer !important;
}
.scan-btn:hover{
  background:#0e6de0 !important;
}
.barcode-reader{
  width:100% !important;
  max-width:520px !important;
  margin:0 auto !important;
  overflow:hidden !important;
  border-radius:14px !important;
  background:#000 !important;
}
#barcodeReader video{
  border-radius:14px !important;
}
.scan-status{
  position:absolute !important;
  left:50% !important;
  bottom:18px !important;
  transform:translateX(-50%) !important;
  z-index:3 !important;
  background:rgba(0,0,0,.72) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:8px 12px !important;
  font-size:11px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}


/* UX polish v2.5 */
.product-card.scan-hit{
  border-color:#1ac96b !important;
  box-shadow:0 0 0 3px rgba(26,201,107,.14),0 14px 30px rgba(20,90,120,.10) !important;
  transform:translateY(-2px) scale(1.01) !important;
}
.customer-stats{
  grid-template-columns:repeat(3,1fr) !important;
}
.customer-layout{
  display:grid !important;
  grid-template-columns:.52fr 1.48fr !important;
  gap:16px !important;
}
.customer-form-panel{
  align-self:start !important;
}
.customer-save{
  margin-top:4px !important;
}
.customer-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}
.customer-card{
  display:flex !important;
  gap:12px !important;
  padding:14px !important;
  border:1px solid #e5ecf5 !important;
  border-radius:14px !important;
  background:linear-gradient(145deg,#fff,#f9fbfe) !important;
}
.customer-avatar{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
  border-radius:12px !important;
  display:grid !important;
  place-items:center !important;
  background:#eaf4ff !important;
  color:#147df5 !important;
  font-weight:900 !important;
  font-size:18px !important;
}
.customer-main h3{
  margin:0 0 3px !important;
  font-size:14px !important;
}
.customer-main p{
  margin:0 !important;
  color:#7a889a !important;
  font-size:11px !important;
}
.customer-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-top:9px !important;
}
.customer-meta span{
  background:#f0f5fb !important;
  color:#506780 !important;
  border-radius:999px !important;
  padding:5px 7px !important;
  font-size:9px !important;
  font-weight:800 !important;
}
.customer-main small{
  display:block !important;
  margin-top:7px !important;
  color:#8a97a8 !important;
  font-size:9px !important;
}

.report-stats-v2{
  grid-template-columns:repeat(4,1fr) !important;
}
.report-grid{
  display:grid !important;
  grid-template-columns:1.45fr .55fr !important;
  gap:16px !important;
}
.report-table table{
  min-width:760px !important;
}
.invoice-pill{
  display:inline-flex !important;
  align-items:center !important;
  padding:6px 8px !important;
  border-radius:8px !important;
  background:#eef6ff !important;
  color:#147df5 !important;
  text-decoration:none !important;
  font-weight:900 !important;
  font-size:10px !important;
}
.top-products{
  display:flex !important;
  flex-direction:column !important;
}
.top-product{
  display:grid !important;
  grid-template-columns:32px 1fr auto !important;
  gap:10px !important;
  align-items:center !important;
  padding:12px 0 !important;
  border-bottom:1px solid #eef2f7 !important;
}
.top-product:last-child{
  border-bottom:0 !important;
}
.rank{
  width:30px !important;
  height:30px !important;
  border-radius:9px !important;
  display:grid !important;
  place-items:center !important;
  background:#eef6ff !important;
  color:#147df5 !important;
  font-size:11px !important;
  font-weight:900 !important;
}
.top-product div{
  display:flex !important;
  flex-direction:column !important;
}
.top-product b{
  font-size:12px !important;
}
.top-product small{
  color:#8794a6 !important;
  margin-top:2px !important;
  font-size:9px !important;
}
.top-product strong{
  font-size:11px !important;
}

@media(max-width:1100px){
  .customer-layout,.report-grid{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:760px){
  .customer-stats,.report-stats-v2{
    grid-template-columns:1fr 1fr !important;
  }
  .customer-grid{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:500px){
  .customer-stats,.report-stats-v2{
    grid-template-columns:1fr !important;
  }
}


/* Unknown barcode modal v2.6 */
.barcode-modal[hidden]{display:none !important}
.barcode-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  background:rgba(5,20,40,.58) !important;
  display:grid !important;
  place-items:center !important;
  padding:20px !important;
  backdrop-filter:blur(3px) !important;
}
.barcode-modal-card{
  position:relative !important;
  width:min(420px,100%) !important;
  background:#fff !important;
  border-radius:20px !important;
  padding:28px !important;
  box-shadow:0 28px 80px rgba(0,0,0,.28) !important;
  text-align:center !important;
}
.barcode-modal-close{
  position:absolute !important;
  right:14px !important;
  top:12px !important;
  border:0 !important;
  background:#f1f5f9 !important;
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  font-size:20px !important;
  cursor:pointer !important;
}
.barcode-modal-icon{
  width:58px !important;
  height:58px !important;
  border-radius:16px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 auto 14px !important;
  background:#eef6ff !important;
  color:#147df5 !important;
  font-size:26px !important;
  font-weight:900 !important;
}
.barcode-modal-card h3{
  margin:0 0 8px !important;
  font-size:21px !important;
}
.barcode-modal-card p{
  margin:0 !important;
  color:#6a7a8f !important;
  font-size:13px !important;
  line-height:1.6 !important;
}
.barcode-code{
  margin:16px 0 !important;
  padding:12px !important;
  border-radius:10px !important;
  background:#f6f9fc !important;
  border:1px solid #e1e9f2 !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
}
.barcode-modal-actions{
  display:grid !important;
  grid-template-columns:1fr 1.3fr !important;
  gap:9px !important;
}
.barcode-modal-actions .secondary-action,
.barcode-modal-actions .primary-action{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  border-radius:10px !important;
  font-weight:900 !important;
  font-size:12px !important;
  text-decoration:none !important;
  cursor:pointer !important;
}
.secondary-action{
  border:1px solid #dce5ef !important;
  background:#fff !important;
  color:#4f6279 !important;
}
.primary-action{
  border:1px solid #147df5 !important;
  background:#147df5 !important;
  color:#fff !important;
}
@media(max-width:500px){
  .barcode-modal-actions{
    grid-template-columns:1fr !important;
  }
}


/* Barcode scan tuning v2.7 */
.scan-box{
  min-height:360px !important;
}
#barcodeReader{
  min-height:330px !important;
}
#barcodeReader video{
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;
}
#barcodeReader__scan_region{
  background:#08111c !important;
}
#barcodeReader__dashboard{
  display:none !important;
}
.scan-overlay{
  pointer-events:none !important;
  border-color:#18df79 !important;
  box-shadow:0 0 0 9999px rgba(0,0,0,.12) !important;
}


/* Mobile polish v2.8 */
@media(max-width:760px){
  body{
    background:#f6f9fd !important;
  }
  .app-shell{
    display:block !important;
  }
  .sidebar{
    width:245px !important;
    left:-265px !important;
    padding:18px 14px !important;
    box-shadow:0 0 0 rgba(0,0,0,0) !important;
  }
  .sidebar.open{
    left:0 !important;
    box-shadow:14px 0 45px rgba(4,28,60,.22) !important;
  }
  .brand{
    margin-bottom:20px !important;
  }
  .sidebar nav a,
  .sidebar-foot a{
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    padding:10px 12px !important;
    border-radius:10px !important;
    font-size:13px !important;
  }

  .topbar{
    height:70px !important;
    padding:0 14px !important;
    gap:10px !important;
  }
  .menu-btn{
    width:38px !important;
    height:38px !important;
    border-radius:10px !important;
    display:grid !important;
    place-items:center !important;
    background:#eef5ff !important;
    color:#147df5 !important;
    font-size:20px !important;
  }
  .topbar h1{
    font-size:18px !important;
  }
  .topbar p{
    font-size:10px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:210px !important;
  }
  .user-chip{
    width:34px !important;
    height:34px !important;
    padding:0 !important;
    justify-content:center !important;
    border-radius:50% !important;
  }

  .content{
    padding:14px !important;
  }
  .panel{
    border-radius:15px !important;
    padding:15px !important;
  }

  .stats-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .stat-card{
    min-height:112px !important;
    padding:14px !important;
  }
  .stat-card strong{
    font-size:20px !important;
  }

  .panel-head{
    gap:10px !important;
    margin-bottom:12px !important;
  }
  .panel-head h2{
    font-size:15px !important;
  }
  .panel-head p{
    font-size:10px !important;
  }

  .pos-grid,
  .dash-grid,
  .two-col,
  .two-col.narrow-left,
  .customer-layout,
  .report-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .pos-tools{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    width:100% !important;
  }
  .pos-tools .search{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }
  #barcodeInput{
    grid-column:1 / -1 !important;
  }
  .scan-btn{
    width:100% !important;
    min-height:42px !important;
  }
  #searchProduct{
    width:100% !important;
  }

  .product-grid{
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
  }
  .product-card{
    min-height:145px !important;
    padding:12px !important;
    border-radius:12px !important;
  }
  .product-card b{
    font-size:12px !important;
  }
  .product-card small{
    font-size:9px !important;
  }
  .product-card strong{
    margin-top:6px !important;
    font-size:12px !important;
  }

  .cart-panel{
    position:relative !important;
  }
  .cart-items{
    min-height:110px !important;
  }
  .cart-total{
    position:sticky !important;
    bottom:0 !important;
    background:#fff !important;
    border-top:1px solid #eef2f7 !important;
    margin:0 -15px !important;
    padding:14px 15px !important;
    z-index:2 !important;
  }
  .pay-print-btn{
    min-height:50px !important;
    border-radius:11px !important;
  }

  .scan-box{
    min-height:280px !important;
    margin-bottom:12px !important;
    border-radius:14px !important;
  }
  #barcodeReader{
    min-height:260px !important;
  }
  .scan-status{
    bottom:12px !important;
    max-width:calc(100% - 24px) !important;
    white-space:normal !important;
    text-align:center !important;
  }

  .customer-stats,
  .report-stats-v2{
    grid-template-columns:1fr 1fr !important;
  }
  .customer-grid{
    grid-template-columns:1fr !important;
  }

  .table-wrap{
    margin:0 -4px !important;
    padding-bottom:4px !important;
  }
  table{
    min-width:720px !important;
  }

  .real-chart{
    height:240px !important;
  }
  .real-chart svg{
    height:205px !important;
  }
  .chart-labels{
    font-size:8px !important;
  }

  .barcode-modal-card{
    padding:24px 18px !important;
    border-radius:18px !important;
  }
}

@media(max-width:520px){
  .stats-grid,
  .customer-stats,
  .report-stats-v2{
    grid-template-columns:1fr 1fr !important;
  }
  .stat-card{
    min-height:104px !important;
  }
  .stat-card span{
    font-size:10px !important;
  }
  .stat-card strong{
    font-size:18px !important;
  }
  .product-grid{
    grid-template-columns:1fr !important;
  }
  .product-card{
    min-height:auto !important;
  }
  .pos-tools{
    grid-template-columns:1fr !important;
  }
  #barcodeInput{
    grid-column:auto !important;
  }
}