* {
  box-sizing:border-box;
  margin:0;
  padding:0
}
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:13px;
  background:#f5f5f0;
  color:#1a1a1a;
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased
}
.hidden {
  display:none!important
}

.fmc-medicine-load-more {
  display:flex;
  width:min(100%, 360px);
  min-height:46px;
  margin:12px auto 2px;
  padding:8px 14px;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid rgba(29,158,117,.28);
  border-radius:14px;
  background:linear-gradient(135deg,#effaf5 0%,#e3f6ed 100%);
  color:#147a5a;
  box-shadow:0 9px 22px rgba(20,122,90,.1);
  cursor:pointer;
  font:inherit;
  text-align:left;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease
}
.fmc-medicine-load-more:hover,
.fmc-medicine-load-more:focus-visible {
  transform:translateY(-1px);
  border-color:rgba(29,158,117,.5);
  background:linear-gradient(135deg,#e5f8ef 0%,#d7f1e5 100%);
  box-shadow:0 12px 26px rgba(20,122,90,.15);
  outline:none
}
.fmc-medicine-load-more:active {transform:translateY(0)}
.fmc-medicine-load-more-icon {
  display:grid;
  width:28px;
  height:28px;
  flex:0 0 28px;
  place-items:center;
  border-radius:9px;
  background:#147a5a;
  color:#fff;
  font-size:15px;
  font-weight:900
}
.fmc-medicine-load-more-copy {display:grid;gap:1px;line-height:1.2}
.fmc-medicine-load-more-copy strong {font-size:12px;font-weight:850}
.fmc-medicine-load-more-copy small {color:#5f7a70;font-size:9px;font-weight:650}
@media(max-width:600px){
  .fmc-medicine-load-more {width:100%;min-height:43px;margin-top:9px;border-radius:12px}
}
/* ============ MODERN LOGIN ============ */
:root {
  --brand: #0ea572;
  --brand-dark: #0b7a54;
  --brand-glow: rgba(14,165,114,0.18);
  --sa-accent: #b45309;
  --sa-glow: rgba(180,83,9,0.18);
  --surface: #ffffff;
  --surface2: #f6f8fa;
  --border: #e5e8ed;
  --text: #0f1923;
  --muted: #6b7685;
  --error: #e53535;
}
#login-screen {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f1f2e 0%, #0d2b1e 50%, #1a1060 100%);
  padding: 40px 24px;
  position: relative;
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
#login-screen::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 700px 600px at 25% 50%, rgba(14,220,130,0.18) 0%, transparent 60%), radial-gradient(ellipse 500px 500px at 75% 20%, rgba(100,80,255,0.15) 0%, transparent 60%), radial-gradient(ellipse 400px 400px at 80% 80%, rgba(0,180,255,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.login-container {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 980px;
  min-height: 580px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
  position: relative;
  z-index: 1;
}
.login-left-pane {
  width: 380px;
  min-width: 380px;
  flex-shrink: 0;
  background: linear-gradient(150deg, #0f4c35 0%, #1a6b4a 25%, #0e3d5c 60%, #1a1060 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 40px 36px;
  position: relative;
  overflow: hidden;
}
.login-left-pane::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 400px 400px at 50% 25%, rgba(14,220,130,0.28) 0%, transparent 55%), radial-gradient(ellipse 350px 300px at 10% 85%, rgba(0,180,255,0.22) 0%, transparent 55%), radial-gradient(ellipse 300px 250px at 90% 10%, rgba(160,80,255,0.2) 0%, transparent 55%);
  pointer-events: none;
}
.login-left-pane::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.llp-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  text-align: center;
}
.llp-logo-icon {
  width: 82px;
  height: 82px;
  padding: 5px;
  background: linear-gradient(145deg, rgba(232,236,240,0.28), rgba(186,195,204,0.14));
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 42px rgba(7, 28, 30, 0.18), inset 0 1px 0 rgba(255,255,255,0.22);
  border: 1px solid rgba(220,228,235,0.24);
  overflow: hidden;
}
.llp-logo-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.llp-logo-text {
  color: #fff;
  text-align: center;
}
.llp-logo-text h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.llp-logo-text span {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.14em;
  text-transform: normal;
  font-weight: 600;
}
.llp-hero {
  position: relative;
  z-index: 1;
  margin: auto 0;
  padding: 20px 0;
}
.llp-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(14,165,114,0.18);
  border: 1px solid rgba(14,165,114,0.3);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  color: #4ecca3;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.llp-hero-label::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #0ea572;
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%,100% {
    opacity:1;
    transform:scale(1);
  }
  50% {
    opacity:0.5;
    transform:scale(0.8);
  }
}
.llp-hero h2 {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.llp-hero h2 em {
  color: #2edb96;
  font-style: normal;
}
.llp-hero p {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  max-width: 300px;
}
.llp-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
  margin-top: 28px;
}
.llp-stat {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 12px 14px;
  backdrop-filter: blur(10px);
}
.llp-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.llp-stat-lbl {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  margin-top: 2px;
}
.llp-footer {
  position: relative;
  z-index: 1;
}
.llp-footer p {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}
.login-right-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 40px;
  background: linear-gradient(180deg, #f8fffd 0%, #eef6ff 52%, #f7f1ff 100%);
  position: relative;
  overflow-y: auto;
}
.login-right-pane > .lf-card {
  margin: auto;
}
.login-right-pane::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -150px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,165,114,0.06), transparent 70%);
  pointer-events: none;
}
.lf-card {
  width: 100%;
  max-width: 380px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
  position: relative;
  z-index: 1;
}
.lf-card.sa-card {
  border-top: none;
}
.lf-card-header {
  margin-bottom: 28px;
}
.lf-card-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.lf-card-header p {
  font-size: 13px;
  color: var(--muted);
}
.sa-back-btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  background: linear-gradient(135deg,#fffaf3 0%,#fff7ed 52%,#ffedd5 100%);
  color: var(--sa-accent);
  box-shadow: 0 7px 18px rgba(180,83,9,.09);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 20px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sa-back-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(180,83,9,.32);
  background: linear-gradient(135deg,#fff7ed 0%,#ffedd5 52%,#fed7aa 100%);
  box-shadow: 0 10px 22px rgba(180,83,9,.13);
}
.sa-back-btn:active {
  transform: translateY(0);
}
.role-tabs {
  display: flex;
  gap: 6px;
  background: radial-gradient(circle at 20% 18%, rgba(46, 219, 150, 0.12) 0%, transparent 30%), radial-gradient(circle at 82% 22%, rgba(0, 180, 255, 0.11) 0%, transparent 32%), radial-gradient(circle at 50% 100%, rgba(124, 58, 237, 0.11) 0%, transparent 40%), linear-gradient(135deg, rgba(32, 136, 103, 0.84) 0%, rgba(33, 128, 150, 0.86) 52%, rgba(57, 63, 166, 0.88) 100%);
  border-radius: 16px;
  padding: 6px;
  margin-bottom: 20px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  flex-wrap: wrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 22px rgba(37, 99, 235, 0.14);
}
.rtab {
  flex: 1 1 120px;
  min-height: 44px;
  padding: 11px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 12px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(244, 249, 255, 0.84);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  line-height: 1.25;
  border: 1px solid transparent;
}
.rtab:hover {
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}
.rtab.on {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(226, 248, 238, 0.16) 42%, rgba(225, 236, 255, 0.18) 100%);
  color: #ffffff;
  border-color: rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(37, 99, 235, 0.14);
  transform: translateY(-1px);
}
.login-form {
  display: block;
}
.lf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.lf-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lf-field-wrap {
  position: relative;
}
.lf-field input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 13.5px;
  outline: none;
  background: var(--surface2);
  color: var(--text);
  transition: all 0.18s;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.lf-field input:focus {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.sa-mode-active .lf-field input:focus {
  border-color: var(--sa-accent);
  box-shadow: 0 0 0 3px var(--sa-glow);
}
.lf-pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  user-select: none;
  transition: color 0.15s;
}
.lf-pw-toggle:hover {
  color: var(--text);
}
.lf-field input[type=password], .lf-field input[type=text] {
  padding-right: 38px;
}
.demo-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 13px;
  margin-bottom: 14px;
  font-size: 11.5px;
  font-family: 'DM Mono', monospace;
  overflow-wrap: anywhere;
}
.demo-box b {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 11px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
}
.demo-box span {
  color: var(--muted);
  display: block;
  line-height: 1.9;
}
.demo-box strong {
  color: var(--text);
}
.demo-box.sa-demo {
  background: #f5f3ff;
  border-color: #ddd6fe;
}
.demo-box.sa-demo b {
  color: var(--sa-accent);
}
.err {
  color: var(--error);
  font-size: 12px;
  margin-bottom: 12px;
  display: none;
  line-height: 1.5;
  background: #fff0f0;
  border: 1px solid #ffc5c5;
  border-radius: 8px;
  padding: 8px 12px;
}
.err.show {
  display: block;
}
.btn-login {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #0ea572 0%, #0b8a5e 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: -0.01em;
  font-family: 'Plus Jakarta Sans', sans-serif;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(14,165,114,0.35);
}
.btn-login::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
}
.btn-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(14,165,114,0.45);
}
.btn-login:active {
  transform: translateY(0);
}
.btn-login.sa-btn {
  background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
  box-shadow: 0 4px 16px rgba(180,83,9,0.35);
}
.btn-login.sa-btn:hover {
  box-shadow: 0 6px 24px rgba(180,83,9,0.45);
}
.forgot-link {
  text-align: center;
  font-size: 12px;
  color: var(--brand);
  cursor: pointer;
  margin-top: 12px;
  font-weight: 600;
  transition: opacity 0.15s;
}
.forgot-link:hover {
  opacity: 0.75;
}
.back-link {
  text-align: center;
  font-size: 12px;
  color: var(--sa-accent);
  cursor: pointer;
  margin-top: 12px;
  font-weight: 600;
}
.sa-portal-btn {
  width: 100%;
  min-height: 58px;
  padding: 10px 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
  margin: 0 0 18px;
  text-align: left;
  flex-wrap: nowrap;
  box-shadow: 0 7px 18px rgba(180,83,9,.07);
}
.sa-portal-btn:hover {
  transform: translateY(-1px);
  background: #ffedd5;
  border-color: #fdba74;
  box-shadow: 0 10px 24px rgba(180,83,9,.11);
}
.sa-portal-btn:active {
  transform:translateY(0);
}
.sa-portal-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 55%, #fdba74 100%);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(180, 83, 9, 0.22);
}
.sa-portal-text-block {
  flex: 1;
}
.sa-portal-text-block .sa-sub {
  font-size: 10px;
  color: #92400e;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.sa-portal-text-block .sa-ttl {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
}
/* Login experience refinements */
#login-screen::after {
  content: '';
  position: fixed;
  width: 520px;
  height: 520px;
  left: 50%;
  bottom: -390px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 70px rgba(255,255,255,.018), 0 0 0 140px rgba(255,255,255,.012);
  pointer-events: none;
}
.login-left-pane {
  isolation: isolate;
}
.login-left-pane::after {
  opacity: .72;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
.llp-logo-icon {
  transition: transform .3s ease, box-shadow .3s ease;
}
.llp-logo-icon:hover {
  transform: translateY(-3px) rotate(-2deg);
  box-shadow: 0 24px 52px rgba(7,28,30,.3), inset 0 1px 0 rgba(255,255,255,.28);
}
.llp-hero-label {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.llp-stat {
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.llp-stat:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}
.login-right-pane {
  isolation: isolate;
}
.login-right-pane::after {
  content: '';
  position: absolute;
  left: -100px;
  bottom: -130px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180,83,9,.07), transparent 68%);
  pointer-events: none;
  z-index: -1;
}
.lf-card {
  padding: 4px;
}
.lf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 700;
  text-transform: normal;
}
.lf-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 5px var(--brand-glow);
}
.lf-card-header h2 {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
}
.login-role-hint {
  margin: 10px 0 0;
  color: #5b7a70 !important;
  font-size: 12px !important;
  line-height: 1.6;
}
.role-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rtab {
  appearance: none;
  border: 1px solid transparent;
  font-family: inherit;
  background: transparent;
}
.rtab:focus-visible, .btn-login:focus-visible, .sa-portal-btn:focus-visible, .forgot-link:focus-visible, .sa-back-btn:focus-visible, .lf-pw-toggle:focus-visible {
  outline: 3px solid rgba(14,165,114,.28);
  outline-offset: 2px;
}
.lf-field {
  gap: 8px;
  margin-bottom: 16px;
}
.lf-field label {
  color: #42534d;
  font-size: 10px;
}
.lf-field input {
  min-height: 44px;
  padding: 9px 15px;
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 2px rgba(15,25,35,.03);
}
.lf-field input::placeholder {
  color: #9aa5a1;
}
.lf-field-with-icon .lf-input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  color: #80938c;
  pointer-events: none;
  z-index: 2;
}
.lf-input-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.lf-field-with-icon input, .lf-field-with-icon input[type=password], .lf-field-with-icon input[type=text] {
  padding-left: 46px;
}
.lf-field-with-icon input[type=password], .lf-field-with-icon input[type=text] {
  padding-right: 46px;
}
.lf-field-with-icon:focus-within .lf-input-icon {
  color: var(--brand);
}
.lf-pw-toggle {
  width: 34px;
  height: 34px;
  right: 9px;
  display: grid;
  place-items: center;
  border-radius: 9px !important;
}
.lf-pw-toggle:hover {
  background: #edf7f2 !important;
}
.remember-me-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -1px 0 18px;
  color: #4b635b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.remember-me-row input {
  appearance: none;
  width: 18px;
  height: 18px;
  display: grid;
  place-content: center;
  border: 1.5px solid #b8c8c2;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
.remember-me-row input::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: scale(0);
  transition: transform .12s ease;
  background: #fff;
  clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 20%, 84% 6%, 39% 68%);
}
.remember-me-row input:checked {
  border-color: var(--brand);
  background: var(--brand);
}
.remember-me-row input:checked::before {
  transform: scale(1);
}
.btn-login {
  min-height: 52px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(14,165,114,.25);
}
.btn-login:disabled {
  transform: none;
}
.forgot-link {
  width: 100%;
  text-align: center !important;
  padding: 5px !important;
}
/* Forgot-access modal */
.forgot-help-modal {
  padding: clamp(14px,3vw,28px) !important;
  background: rgba(15,23,42,.48) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  letter-spacing: normal;
}
.forgot-help-dialog {
  width: min(580px,100%) !important;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: clamp(20px,3vw,28px) !important;
  border: 1px solid rgba(26,127,90,.14) !important;
  border-radius: 26px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.22) !important;
  scrollbar-width: thin;
}
.forgot-help-header {
  margin-bottom: 18px !important;
}
#forgot-help-title {
  font-size:24px !important;
  font-weight:700 !important;
  line-height:1.3;
  letter-spacing:normal !important;
  color:#102e25 !important;
}
#forgot-help-subtitle {
  max-width:440px;
  font-size:14px !important;
  font-weight:400 !important;
  line-height:1.55 !important;
  letter-spacing:normal !important;
  color:#587068 !important;
}
.forgot-help-close {
  flex:0 0 42px;
  width:42px !important;
  height:42px !important;
  border:1px solid rgba(26,127,90,.1) !important;
  border-radius:13px !important;
  transition:transform .18s ease,background .18s ease;
}
.forgot-help-close:hover {
  transform:rotate(4deg);
  background:#dff4e9 !important;
}
#forgot-help-search-box > div, #forgot-help-default-card, #forgot-help-details {
  padding:17px 20px !important;
  border:1px solid #cfe3d8 !important;
  border-radius:18px !important;
  background:#f3f8f5 !important;
  box-shadow:0 5px 16px rgba(20,78,59,.05);
}
#forgot-help-default-card {
  background:#edf6f1 !important;
}
#forgot-help-details {
  background:#f8fbf9 !important;
}
#forgot-help-wholesaler-trigger {
  min-height:42px;
  padding:5px 8px !important;
  border-radius:10px;
}
#forgot-help-search-input {
  height:46px !important;
  border-color:#d5e5dc !important;
  border-radius:12px !important;
  background:#fff;
  font-family:inherit;
  font-size:14px !important;
  transition:border-color .18s ease,box-shadow .18s ease;
}
#forgot-help-search-input:focus {
  border-color:#4eaf87 !important;
  box-shadow:0 0 0 4px rgba(29,158,117,.12);
}
#forgot-help-modal [style*="letter-spacing"] {
  letter-spacing:normal !important;
}
#forgot-help-modal [style*="font-weight:800"] {
  font-weight:600 !important;
}
#forgot-help-modal [style*="font-weight:700"] {
  font-weight:500 !important;
}
#forgot-help-wholesaler-name {
  font-size:18px !important;
  font-weight:600 !important;
  line-height:1.4;
  overflow-wrap:anywhere;
}
#forgot-help-wholesaler-trigger-label {
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  background:#eaf8f2;
  font-size:12px !important;
  font-weight:500 !important;
}
#forgot-help-details > div {
  gap:14px !important;
}
#forgot-help-business-name, #forgot-help-contact-name, #forgot-help-contact-phone {
  font-size:15px !important;
  font-weight:500 !important;
  overflow-wrap:anywhere;
}
#forgot-help-contact-address {
  font-size:14px !important;
  line-height:1.6 !important;
  overflow-wrap:anywhere;
}
#forgot-help-contact-call, #forgot-help-contact-copy, #forgot-help-contact-whatsapp {
  min-height:40px;
  gap:7px;
  padding:8px 14px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:11px !important;
  font-family:inherit;
  font-size:12px !important;
  font-weight:600 !important;
  box-shadow:0 4px 12px rgba(15,23,42,.05);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
#forgot-help-contact-call:hover, #forgot-help-contact-copy:hover, #forgot-help-contact-whatsapp:hover {
  transform:translateY(-1px);
  box-shadow:0 7px 16px rgba(15,23,42,.09);
}
.forgot-action-icon {
  display:inline-flex;
  width:22px;
  height:22px;
  flex:0 0 22px;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:rgba(255,255,255,.72);
  font-size:14px;
  font-weight:700;
  line-height:1;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.05);
}
.forgot-whatsapp-icon {
  color:#fff;
  background:#20a866;
  box-shadow:none;
  font-size:11px;
}
@media (max-width:768px) {
  .forgot-help-modal {
    align-items:center !important;
    padding:max(12px,env(safe-area-inset-top,0px)) 12px max(12px,env(safe-area-inset-bottom,0px)) !important;
  }
  .forgot-help-dialog {
    width:100% !important;
    max-height:calc(100dvh - 24px);
    padding:20px 18px !important;
    border-radius:24px !important;
  }
  .forgot-help-header {
    align-items:center !important;
    margin-bottom:15px !important;
  }
  #forgot-help-title {
    font-size:22px !important;
  }
  #forgot-help-subtitle {
    font-size:13px !important;
  }
  #forgot-help-search-box > div, #forgot-help-default-card, #forgot-help-details {
    padding:15px 17px !important;
    border-radius:16px !important;
  }
}
@media (max-width:480px) {
  .forgot-help-modal {
    padding:8px 8px max(8px,env(safe-area-inset-bottom,0px)) !important;
  }
  .forgot-help-dialog {
    max-height:calc(100dvh - 16px);
    padding:18px 14px !important;
    border-radius:20px !important;
  }
  #forgot-help-title {
    font-size:21px !important;
    font-weight:700 !important;
  }
  .forgot-help-close {
    flex-basis:40px;
    width:40px !important;
    height:40px !important;
  }
  #forgot-help-search-box > div, #forgot-help-default-card, #forgot-help-details {
    padding:14px 15px !important;
  }
  #forgot-help-wholesaler-trigger {
    align-items:center !important;
    padding:5px 6px !important;
  }
  #forgot-help-wholesaler-name {
    font-size:16px !important;
  }
  #forgot-help-wholesaler-trigger-label {
    font-size:11px !important;
  }
  #forgot-help-contact-call, #forgot-help-contact-copy, #forgot-help-contact-whatsapp {
    flex:1 1 calc(33.333% - 7px);
    min-width:92px;
    padding:8px 10px !important;
  }
}
/* Keep the desktop sign-in area compact without shrinking readable text. */
@media (min-width:1001px) {
  .login-right-pane {
    padding:32px 40px
  }
  .lf-card-header {
    margin-bottom:18px
  }
  .lf-card-header h2 {
    font-size:25px
  }
  .login-role-hint {
    margin-top:7px;
    line-height:1.45
  }
  .sa-portal-btn {
    margin-bottom:14px;
    padding:9px 12px
  }
  .role-tabs {
    margin-bottom:14px
  }
  .rtab {
    min-height:40px;
    padding:8px 10px
  }
  .lf-field {
    gap:6px;
    margin-bottom:12px
  }
  .lf-field input {
    min-height:44px;
    padding-top:9px;
    padding-bottom:9px
  }
  .remember-me-row {
    margin-bottom:13px
  }
  .btn-login {
    min-height:47px
  }
  .forgot-link {
    margin-top:8px
  }
}
/* Compact forgot-access experience with a clear destructive-tone trigger. */
.forgot-link {
  color:#c2413b!important;
  font-weight:700;
  text-decoration:none;
}
.forgot-link:hover {
  color:#9f2f2a!important;
  opacity:1;
  text-decoration:underline;
  text-underline-offset:3px;
}
.forgot-help-dialog {
  width:min(520px,100%)!important;
  max-height:min(720px,calc(100dvh - 32px));
  padding:20px!important;
  border-radius:20px!important;
}
.forgot-help-header {
  margin-bottom:12px!important;
}
#forgot-help-title {
  font-size:21px!important;
  line-height:1.25;
}
#forgot-help-subtitle {
  margin-top:4px!important;
  font-size:13px!important;
  line-height:1.45!important;
}
.forgot-help-close {
  width:36px!important;
  height:36px!important;
  flex-basis:36px;
  border-radius:10px!important;
}
#forgot-help-search-box {
  margin-bottom:10px!important;
}
#forgot-help-search-box > div,
#forgot-help-default-card,
#forgot-help-details {
  padding:13px 15px!important;
  border-radius:14px!important;
}
#forgot-help-search-box > div {
  font-size:13px!important;
  line-height:1.5!important;
}
#forgot-help-search-input {
  height:42px!important;
  font-size:13px!important;
}
#forgot-help-search-results {
  gap:7px!important;
}
#forgot-help-wholesaler-name {
  font-size:17px!important;
}
#forgot-help-wholesaler-trigger-label,
#forgot-help-search-status {
  font-size:12px!important;
}
#forgot-help-details > div {
  gap:9px!important;
}
#forgot-help-business-name,
#forgot-help-contact-name,
#forgot-help-contact-phone {
  font-size:14px!important;
}
#forgot-help-contact-address {
  font-size:13px!important;
  line-height:1.45!important;
}
#forgot-help-contact-call,
#forgot-help-contact-copy,
#forgot-help-contact-whatsapp {
  min-height:36px;
  padding:6px 11px!important;
  border-radius:9px!important;
  font-size:12px!important;
}
@media (max-width:600px) {
  .forgot-help-modal {
    padding:8px!important;
  }
  .forgot-help-dialog {
    max-height:calc(100dvh - 16px);
    padding:14px 12px!important;
    border-radius:16px!important;
  }
  .forgot-help-header {
    margin-bottom:10px!important;
  }
  #forgot-help-title {
    font-size:19px!important;
  }
  #forgot-help-subtitle {
    font-size:12px!important;
  }
  #forgot-help-search-box > div,
  #forgot-help-default-card,
  #forgot-help-details {
    padding:11px 12px!important;
    border-radius:12px!important;
  }
  #forgot-help-search-input {
    height:40px!important;
    font-size:13px!important;
  }
  #forgot-help-business-name,
  #forgot-help-contact-name,
  #forgot-help-contact-phone {
    font-size:13px!important;
  }
  #forgot-help-contact-call,
  #forgot-help-contact-copy,
  #forgot-help-contact-whatsapp {
    min-height:36px;
    padding:6px 9px!important;
    font-size:12px!important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* APP */
:root {
  --app-sidebar-width: 210px;
  --app-mobile-topbar-height: 58px;
  --app-shell-max-width: 1600px;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-touch-target: 44px;
  --app-page-pad-x: 24px;
  --app-page-pad-y: 20px;
  --app-page-pad-x-tablet: 18px;
  --app-page-pad-y-tablet: 18px;
  --app-page-pad-x-mobile: 14px;
  --app-page-pad-y-mobile: 14px;
  --app-radius-lg: 16px;
  --app-radius-md: 12px;
  --app-overlay: rgba(15, 23, 42, 0.42);
  --fmc-role-color: #1d9e75;
  --fmc-role-soft: #eaf8f2;
  --fmc-mobile-nav-height: 60px;
  --fmc-sticky-action-height: 72px;
  --fmc-space-1: 4px;
  --fmc-space-2: 8px;
  --fmc-space-3: 12px;
  --fmc-space-4: 16px;
  --fmc-space-5: 20px;
  --fmc-space-6: 24px;
  --fmc-radius-sm: 10px;
  --fmc-radius-md: 14px;
  --fmc-radius-lg: 18px;
  --fmc-radius-xl: 24px;
  --fmc-shadow-soft: 0 8px 22px rgba(15,23,42,.06);
  --fmc-shadow-card: 0 16px 38px rgba(15,23,42,.08);
  --fmc-text-xs: 10px;
  --fmc-text-sm: 12px;
  --fmc-text-md: 14px;
  --fmc-text-lg: 18px;
  --fmc-success: #147a5a;
  --fmc-success-soft: #eaf8f2;
  --fmc-warning: #9a5b12;
  --fmc-warning-soft: #fff6e8;
  --fmc-danger: #a63838;
  --fmc-danger-soft: #fff3f3;
  --fmc-info: #185fa5;
  --fmc-info-soft: #edf6ff;
}
html {
  width:100%;
  max-width:100%;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth
}
body {
  width:100%;
  max-width:100%;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch
}
body.app-shell-sidebar-open {
  overflow-x:hidden;
  overflow-y:auto;
  touch-action:pan-y
}
img,svg,video,canvas {
  max-width:100%;
  height:auto
}
button,input,select,textarea {
  max-width:100%;
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
:focus-visible {
  outline:3px solid rgba(29,158,117,.28);
  outline-offset:2px
}
#app-screen {
  display:flex;
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  max-width:100%;
  padding-left:var(--app-sidebar-width);
  overflow-x:clip
}
@view-transition {
  navigation:auto
}
::view-transition-old(app-sidebar),
::view-transition-new(app-sidebar) {
  animation:none;
  mix-blend-mode:normal
}
::view-transition-old(app-page) {
  animation:120ms ease-out both fmc-page-out
}
::view-transition-new(app-page) {
  animation:180ms ease-out both fmc-page-in
}
@keyframes fmc-page-out {
  to { opacity:.18;transform:translateY(3px) }
}
@keyframes fmc-page-in {
  from { opacity:.18;transform:translateY(4px) }
}
.sidebar {
  view-transition-name:app-sidebar;
  width:var(--app-sidebar-width);
  background:#fff;
  border-right:1px solid #e8e8e0;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  height:100vh;
  height:100dvh;
  position:fixed;
  inset:0 auto 0 0;
  z-index:1100;
  overflow:hidden
}
.sidebar + .main {
  view-transition-name:app-page;
  width:100%;
  margin-left:0
}
.sb-brand {
  padding:14px 16px;
  border-bottom:1px solid #e8e8e0;
  flex-shrink:0
}
.sb-brand h2 {
  font-size:14px;
  font-weight:700
}
.sb-brand p {
  font-size:10px;
  color:#999
}
.sb-user {
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 16px;
  border-bottom:1px solid #e8e8e0;
  flex-shrink:0
}
.ava {
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:11px;
  font-weight:700;
  flex-shrink:0
}
.sb-nav {
  padding:8px;
  flex:1;
  overflow-y:auto;
  overflow-x:hidden
}
.sb-nav::-webkit-scrollbar {
  width:3px
}
.sb-nav::-webkit-scrollbar-track {
  background:transparent
}
.sb-nav::-webkit-scrollbar-thumb {
  background:#e0e0d8;
  border-radius:3px
}
.sb-nav::-webkit-scrollbar-thumb:hover {
  background:#c0c0b8
}
.nl {
  font-size:10px;
  font-weight:600;
  color:#aaa;
  letter-spacing:.06em;
  padding:6px 8px 4px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  border-radius:6px;
  transition:background .12s;
  user-select:none
}
.nl:hover {
  background:#f5f5f0
}
.nl .nl-arrow {
  font-size:9px;
  color:#ccc;
  transition:transform .2s;
  font-style:normal
}
.nl[aria-expanded="true"] .nl-arrow {
  transform:rotate(0deg)
}
.nl[aria-expanded="false"] .nl-arrow {
  transform:rotate(0deg)
}
.nl-group {
  overflow:hidden;
  transition:max-height .25s ease
}
.nl-group.collapsed {
  max-height:0!important
}
.ni {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  color:#555;
  font-size:12px;
  margin-bottom:2px;
  transition:all .12s;
  font-weight:500
}
.ni:hover {
  background:#f5f5f0;
  color:#1a1a1a
}
.ni.on {
  background:#E1F5EE;
  color:#0F6E56;
  font-weight:600
}
.ni .ic {
  width:16px;
  text-align:center;
  font-style:normal;
  flex-shrink:0
}
.nb {
  margin-left:auto;
  background:#E24B4A;
  color:#fff;
  font-size:9px;
  padding:1px 5px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px
}
.sb-logout {
  padding:12px 16px;
  border-top:1px solid #e8e8e0;
  cursor:pointer;
  font-size:12px;
  color:#999;
  flex-shrink:0
}
.sb-logout:hover {
  color:#E24B4A
}
.main {
  flex:1;
  min-width:0;
  width:0;
  display:flex;
  flex-direction:column;
  max-width:100%
}
.topbar {
  background:linear-gradient(135deg,var(--fmc-role-soft) 0%,#fff 78%);
  border-bottom:1px solid color-mix(in srgb,var(--fmc-role-color) 18%,#e8e8e0);
  padding:0 20px;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
  max-width:100%
}
.topbar h1 {
  font-size:15px;
  font-weight:700;
  color:color-mix(in srgb,var(--fmc-role-color) 72%,#172033);
  letter-spacing:-0.01em;
  min-width:0;
  overflow-wrap:anywhere
}
.tb-right {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  min-width:0;
  max-width:100%
}
.tb-right>a:not([data-topbar-essential]), .tb-right>button:not([data-topbar-essential]) {
  display:none!important
}
.topbar-shell-actions {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  min-width:0;
  max-width:100%
}
.topbar-shell-btn {
  white-space:nowrap
}
.rbadge {
  font-size:10px;
  padding:3px 10px;
  border-radius:12px;
  font-weight:600
}
.topbar .rbadge, .topbar .notif-chip.role {
  display:none!important
}
.rb-w {
  background:#E1F5EE;
  color:#0F6E56
}
.rb-s {
  background:#E6F1FB;
  color:#185FA5
}
.rb-c {
  background:#EEEDFE;
  color:#534AB7
}
.rb-d {
  background:#FAEEDA;
  color:#854F0B
}
.fmc-shell-role-wholesaler {
  --fmc-role-color:#1d9e75;
  --fmc-role-soft:#eaf8f2
}
.fmc-shell-role-salesman {
  --fmc-role-color:#185fa5;
  --fmc-role-soft:#edf6ff
}
.fmc-shell-role-customer {
  --fmc-role-color:#534ab7;
  --fmc-role-soft:#f2efff
}
.fmc-shell-role-delivery {
  --fmc-role-color:#0e7490;
  --fmc-role-soft:#ecfeff
}
.fmc-shell-role-superadmin {
  --fmc-role-color:#b45309;
  --fmc-role-soft:#fff4e8
}
.content {
  padding:var(--app-page-pad-y) var(--app-page-pad-x);
  flex:1;
  min-width:0;
  width:100%;
  max-width:100%;
  overflow-wrap:anywhere
}
.main > .content, .main > .topbar {
  width:100%;
  max-width:100%
}
.content > * {
  min-width:0;
  max-width:100%
}
.content :where(.card,.stat,section,article,form,fieldset,table,div) {
  min-width:0
}
.mb-menu-btn {
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#fff;
  border:1px solid #e8e8e0;
  border-radius:10px;
  padding:8px 10px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.06)
}
.sb-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:var(--app-overlay);
  backdrop-filter:blur(2px);
  z-index:1190;
  opacity:0;
  transition:opacity .2s ease
}
.sb-overlay.on {
  display:block;
  opacity:1
}
.card {
  background:#fff;
  border:1px solid #e8e8e0;
  border-radius:12px;
  padding:18px 20px;
  margin-bottom:14px;
  overflow:hidden
}
.card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  flex-wrap:wrap;
  gap:6px
}
.card-head h3 {
  font-size:13px;
  font-weight:700;
  letter-spacing:-0.01em
}
.g4 {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:14px
}
.g2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.stat {
  background:#fff;
  border:1px solid #e8e8e0;
  border-radius:12px;
  padding:14px 16px;
  min-width:0
}
.stat .lbl {
  font-size:11px;
  color:#888;
  margin-bottom:6px
}
.stat .val {
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.1
}
.stat .chg {
  font-size:11px;
  color:#999;
  margin-top:6px
}
.stat .chg.up {
  color:#0F6E56
}
.stat .chg.dn {
  color:#E24B4A
}
.list {
  display:flex;
  flex-direction:column;
  gap:8px
}
.li {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid #ecece4;
  border-radius:10px;
  background:#fff;
  min-width:0
}
.li-main {
  min-width:0;
  flex:1
}
.li-title {
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.li-meta {
  font-size:10px;
  color:#999;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.li-amt {
  font-size:12px;
  font-weight:700;
  white-space:nowrap
}
.badge {
  font-size:10px;
  padding:3px 8px;
  border-radius:10px;
  background:#f0f0eb;
  color:#666;
  white-space:nowrap
}
.b-g {
  background:#E1F5EE;
  color:#0F6E56
}
.b-b {
  background:#E6F1FB;
  color:#185FA5
}
.b-r {
  background:#FDECEC;
  color:#E24B4A
}
.b-a {
  background:#FAF1D6;
  color:#9A6B00
}
.b-gr {
  background:#efefef;
  color:#666
}
.btn {
  padding:7px 12px;
  border:none;
  border-radius:8px;
  background:#1D9E75;
  color:#fff;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px
}
.btn.sec {
  background:#fff;
  color:#555;
  border:1px solid #e0e0d8
}
.btn.danger {
  background:#E24B4A
}
.fbar {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px
}
.fbar input.si,.fbar select.si,.fbar textarea.si {
  padding:8px 10px;
  border:1px solid #e0e0d8;
  border-radius:8px;
  background:#fff;
  font-size:12px;
  min-width:130px;
  max-width:100%
}
.tbl {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed
}
.tbl th,.tbl td {
  border-bottom:1px solid #f0f0eb;
  padding:9px 8px;
  text-align:left;
  font-size:12px;
  vertical-align:middle;
  word-break:break-word
}
.tbl th {
  font-size:10px;
  color:#888;
  text-transform:uppercase;
  letter-spacing:.05em
}
.pager {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
  gap:8px;
  flex-wrap:wrap
}
.muted {
  color:#999
}
.modal-bg {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:30px max(12px,var(--app-safe-right)) max(12px,var(--app-safe-bottom)) max(12px,var(--app-safe-left));
  z-index:999;
  overflow-y:auto;
  overscroll-behavior:contain
}
.modal {
  background:#fff;
  border-radius:14px;
  padding:24px;
  width:min(92%,520px);
  max-width:calc(100vw - 24px);
  max-height:min(85vh,calc(100dvh - 42px));
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid #e0e0d8
}
.modal h3 {
  font-size:15px;
  font-weight:700;
  margin-bottom:16px;
  letter-spacing:-0.01em
}
.ui-scroll-x {
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  scrollbar-gutter:stable;
  scroll-snap-type:x proximity
}
.ui-scroll-x > * {
  min-width:max-content
}
.ui-grid-auto-fit {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:14px
}
.ui-toolbar-wrap {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
  max-width:100%
}
.ui-card-stack {
  display:grid;
  gap:14px;
  min-width:0
}
.ui-page-shell {
  width:min(var(--app-shell-max-width),100%);
  margin:0 auto;
  min-width:0;
  max-width:100%
}
.ui-touch-target {
  min-width:var(--app-touch-target);
  min-height:var(--app-touch-target)
}
.ui-mobile-only {
  display:none!important
}
.ui-break-word {
  overflow-wrap:anywhere;
  word-break:break-word
}
.ui-no-page-overflow {
  min-width:0;
  max-width:100%;
  overflow-x:clip
}
/* PREMIUM CROSS-SYSTEM MOBILE EXPERIENCE */
.fmc-ui-live-region {
  position:fixed;
  inset:0;
  z-index:2200;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px
}
.fmc-toast {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:min(390px,calc(100vw - 32px));
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:16px;
  color:#fff;
  background:#147a5a;
  box-shadow:0 22px 54px rgba(15,23,42,.28);
  font-size:12px;
  font-weight:800;
  line-height:1.45;
  text-align:center;
  opacity:0;
  transform:translateY(10px) scale(.97);
  transition:opacity .2s ease,transform .2s ease;
  pointer-events:auto
}
.fmc-toast.is-visible {
  opacity:1;
  transform:translateY(0) scale(1)
}
.fmc-toast-error {
  background:#a63838
}
.fmc-toast-warning {
  background:#9a5b12
}
.fmc-toast-info {
  background:#185fa5
}
.fmc-toast-icon {
  display:inline-flex;
  width:24px;
  height:24px;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  border-radius:50%;
  background:rgba(255,255,255,.18)
}
.fmc-display-preferences {
  margin-bottom:7px
}
.fmc-display-preferences .fmc-haptic-toggle {
  margin-bottom:0
}
.fmc-install-onboarding,.fmc-update-ready {
  position:fixed;
  left:50%;
  bottom:max(14px,var(--app-safe-bottom));
  z-index:2150;
  display:flex;
  width:min(560px,calc(100vw - 24px));
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:11px 13px;
  border:1px solid #aed8c5;
  border-radius:15px;
  background:rgba(242,251,247,.98);
  color:#214c3b;
  box-shadow:0 18px 44px rgba(15,23,42,.2);
  font-size:11px;
  font-weight:800;
  transform:translateX(-50%)
}
.fmc-install-onboarding>div:first-child {
  min-width:0;
  flex:1
}
.fmc-install-onboarding strong,.fmc-install-onboarding span {
  display:block
}
.fmc-install-onboarding span {
  margin-top:2px;
  color:#60746b;
  font-size:9px;
  font-weight:600
}
.fmc-install-onboarding-actions {
  display:flex;
  gap:7px
}
.fmc-install-onboarding button,.fmc-update-ready button {
  min-height:34px;
  padding:6px 10px;
  border:1px solid #bfded0;
  border-radius:9px;
  background:#fff;
  color:#147a5a;
  font-size:10px;
  font-weight:900
}
.fmc-install-onboarding [data-install-now],.fmc-update-ready [data-fmc-update-now] {
  border-color:#147a5a;
  background:#147a5a;
  color:#fff
}
.fmc-update-ready span {
  min-width:0;
  flex:1
}
.fmc-empty-action {
  display:inline-flex;
  min-height:38px;
  margin:12px auto 0;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border:1px solid #cfe2d8;
  border-radius:11px;
  background:#fff;
  color:#147a5a;
  font-size:10px;
  font-weight:900;
  text-decoration:none
}
/* Role-themed sidebar Quick Search and App Settings. */
.fmc-shell-role-wholesaler .fmc-preference-panel,
.fmc-shell-role-wholesaler .fmc-global-search-trigger,
.fmc-shell-role-salesman .fmc-preference-panel,
.fmc-shell-role-salesman .fmc-global-search-trigger,
.fmc-shell-role-customer .fmc-preference-panel,
.fmc-shell-role-customer .fmc-global-search-trigger,
.fmc-shell-role-delivery .fmc-preference-panel,
.fmc-shell-role-delivery .fmc-global-search-trigger,
.fmc-shell-role-superadmin .fmc-preference-panel,
.fmc-shell-role-superadmin .fmc-global-search-trigger {
  border-color:color-mix(in srgb,var(--fmc-role-color) 24%,#dce4e0);
  background:linear-gradient(135deg,color-mix(in srgb,var(--fmc-role-soft) 92%,#fff),#fff);
  color:var(--fmc-role-color);
  box-shadow:0 6px 16px color-mix(in srgb,var(--fmc-role-color) 10%,transparent)
}
.fmc-shell-role-wholesaler .fmc-preference-panel>summary,
.fmc-shell-role-salesman .fmc-preference-panel>summary,
.fmc-shell-role-customer .fmc-preference-panel>summary,
.fmc-shell-role-delivery .fmc-preference-panel>summary,
.fmc-shell-role-superadmin .fmc-preference-panel>summary {
  color:var(--fmc-role-color)
}
.fmc-shell-role-wholesaler .fmc-preference-panel>summary>span:first-child>span,
.fmc-shell-role-salesman .fmc-preference-panel>summary>span:first-child>span,
.fmc-shell-role-customer .fmc-preference-panel>summary>span:first-child>span,
.fmc-shell-role-delivery .fmc-preference-panel>summary>span:first-child>span,
.fmc-shell-role-superadmin .fmc-preference-panel>summary>span:first-child>span {
  background:var(--fmc-role-soft);
  color:var(--fmc-role-color)
}
.fmc-shell-role-wholesaler .fmc-preference-panel-body,
.fmc-shell-role-salesman .fmc-preference-panel-body,
.fmc-shell-role-customer .fmc-preference-panel-body,
.fmc-shell-role-delivery .fmc-preference-panel-body,
.fmc-shell-role-superadmin .fmc-preference-panel-body {
  border-top-color:color-mix(in srgb,var(--fmc-role-color) 18%,#e5e7eb)
}
/* Compact sidebar App Settings group. */
.fmc-preference-panel {
  width:100%;
  margin:6px 0 8px;
  border:1px solid #cfe3d8;
  border-radius:12px;
  background:linear-gradient(180deg,#f7fcf9 0%,#edf7f2 100%);
  box-shadow:0 6px 16px rgba(20,122,90,.07);
  overflow:hidden
}
.fmc-preference-panel>summary {
  display:flex!important;
  width:100%;
  min-height:38px;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 10px;
  list-style:none!important;
  color:#285d4b;
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer
}
.fmc-preference-panel>summary::marker {
  content:''
}
.fmc-preference-panel>summary::-webkit-details-marker {
  display:none!important
}
.fmc-preference-panel>summary>span:first-child {
  display:inline-flex;
  align-items:center;
  gap:7px
}
.fmc-preference-panel>summary>span:first-child>span {
  display:inline-grid;
  width:24px;
  height:24px;
  margin:0;
  place-items:center;
  border-radius:8px;
  background:#dff4e9;
  color:#147a5a;
  font-size:15px;
  line-height:1
}
.fmc-preference-arrow {
  display:inline-grid;
  width:22px;
  height:22px;
  place-items:center;
  border-radius:7px;
  background:#fff;
  color:#668077;
  font-size:13px;
  transition:transform .18s ease
}
.fmc-preference-panel[open] .fmc-preference-arrow {
  transform:rotate(180deg)
}
.fmc-preference-panel-body {
  display:grid;
  gap:5px;
  padding:6px;
  border-top:1px solid #dce9e2;
  background:rgba(255,255,255,.52)
}
.fmc-preference-panel-body>.fmc-haptic-toggle,.fmc-preference-panel-body>.fmc-display-preferences .fmc-haptic-toggle,.fmc-preference-panel-body>.fmc-install-btn {
  min-height:34px;
  margin:0;
  padding:6px 9px;
  border:1px solid #dce9e2;
  border-radius:9px;
  background:#fff;
  box-shadow:none
}
.fmc-preference-panel-body>.fmc-install-btn {
  border-color:#c8bdf5;
  background:linear-gradient(135deg,#f1edff,#e8efff);
  color:#5146a8;
  box-shadow:0 5px 12px rgba(83,74,183,.11)
}
.fmc-preference-panel-body>.fmc-install-btn:hover {
  border-color:#a99bea;
  background:linear-gradient(135deg,#e8e1ff,#dce7ff);
  color:#40358f
}
.fmc-toast-action {
  min-height:32px;
  margin-left:auto;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:9px;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:10px;
  font-weight:900;
  cursor:pointer
}
.fmc-global-search-field input::-webkit-search-cancel-button {
  -webkit-appearance:none;
  appearance:none;
  display:none
}
.fmc-global-search-field input::-ms-clear {
  display:none;
  width:0;
  height:0
}
.fmc-global-search-reset {
  border:1px solid #efb8b8!important;
  background:#fff1f1!important;
  color:#bd3030!important
}
.fmc-global-search-reset:hover {
  border-color:#e49393!important;
  background:#ffe5e5!important;
  color:#a62626!important
}
.fmc-global-search-trigger {
  display:flex;
  width:calc(100% - 16px);
  min-height:40px;
  margin:8px 8px 10px;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  gap:7px;
  padding:7px 10px;
  border:1px solid color-mix(in srgb,var(--fmc-role-color) 22%,#dce4e0);
  border-radius:10px;
  background:linear-gradient(135deg,var(--fmc-role-soft),#fff);
  color:var(--fmc-role-color);
  font-size:10px;
  font-weight:700;
  cursor:pointer
}
.fmc-global-search-trigger-icon {
  display:inline-flex;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  flex:0 0 18px
}
.fmc-global-search-trigger-icon svg {
  display:block;
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round
}
.fmc-global-search {
  position:fixed;
  inset:0;
  z-index:1900;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(16px,var(--app-safe-top)) max(14px,var(--app-safe-right)) max(16px,var(--app-safe-bottom)) max(14px,var(--app-safe-left));
  background:rgba(15,23,42,.44);
  backdrop-filter:blur(5px)
}
.fmc-global-search-dialog {
  width:min(620px,100%);
  max-height:calc(100dvh - 32px);
  overflow:hidden;
  border:1px solid #dce9e2;
  border-radius:22px;
  background:#fff;
  box-shadow:0 28px 80px rgba(15,23,42,.24)
}
.fmc-global-search-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px;
  border-bottom:1px solid #e5eee9
}
.fmc-global-search-head strong {
  display:block;
  font-size:17px
}
.fmc-global-search-head small {
  display:block;
  margin-top:2px;
  color:#74827b;
  font-size:10px
}
.fmc-global-search-head button {
  width:38px;
  height:38px;
  border:1px solid #dce9e2;
  border-radius:11px;
  background:#f5faf7;
  color:#147a5a;
  font-size:20px
}
.fmc-global-search-field {
  position:relative;
  display:block;
  margin:14px;
  padding:0;
  border:1px solid #8ecfb7;
  border-radius:14px;
  background:#fff;
  box-shadow:0 0 0 4px rgba(29,158,117,.1)
}
.fmc-global-search-field::before {
  content:'';
  position:absolute;
  left:13px;
  top:50%;
  z-index:2;
  width:17px;
  height:17px;
  transform:translateY(-50%);
  pointer-events:none;
  background:no-repeat center/17px 17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e7c74' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E")
}
.fmc-global-search-field input {
  width:100%;
  min-height:46px;
  padding:0 76px 0 40px;
  border:0;
  border-radius:14px;
  background:transparent;
  outline:0;
  font-size:14px
}
.fmc-global-search-reset {
  position:absolute;
  top:50%;
  right:7px;
  z-index:3;
  display:inline-flex;
  min-height:30px;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  transform:translateY(-50%);
  border:0;
  border-radius:9px;
  background:#eef4f0;
  color:#64756c;
  font-size:9px;
  font-weight:900;
  cursor:pointer
}
.fmc-global-search-reset[hidden] {
  display:none!important
}
.fmc-global-search-results {
  display:grid;
  gap:7px;
  max-height:min(420px,58dvh);
  overflow-y:auto;
  padding:0 14px 16px
}
.fmc-global-search-results a {
  display:flex;
  min-height:44px;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border:1px solid #e0ebe5;
  border-radius:12px;
  background:#fff;
  color:#264c3d;
  text-decoration:none
}
.fmc-global-search-results a span {
  color:#147a5a
}
.fmc-global-search-results a strong {
  font-size:12px
}
.fmc-global-search-empty {
  padding:24px;
  text-align:center;
  color:#7a8981;
  font-size:12px
}
.fmc-global-search-field>span svg {
  display:block;
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round
}
.fmc-action-sheet-trigger {
  display:none;
  min-height:38px;
  padding:7px 12px;
  border:1px solid #dce9e2;
  border-radius:11px;
  background:#f5fbf8;
  color:#147a5a;
  font-size:10px;
  font-weight:900
}
.fmc-action-sheet-trigger>span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  letter-spacing:2px;
  color:#486fc2
}
.fmc-action-sheet-trigger>strong {
  font:inherit
}
.fmc-action-sheet-backdrop {
  position:fixed;
  inset:0;
  z-index:1850;
  display:flex;
  align-items:flex-end;
  padding:max(10px,var(--app-safe-top)) max(8px,var(--app-safe-right)) max(8px,var(--app-safe-bottom)) max(8px,var(--app-safe-left));
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(4px)
}
.fmc-action-sheet {
  position:relative;
  width:min(560px,100%);
  max-height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 20px);
  margin:0 auto;
  overflow:hidden;
  border:1px solid #dce9e2;
  border-radius:22px;
  background:#fff;
  box-shadow:0 -18px 50px rgba(15,23,42,.22)
}
.fmc-action-sheet-handle {
  width:42px;
  height:4px;
  margin:8px auto 0;
  border-radius:999px;
  background:#cad8d1
}
.fmc-action-sheet-head {
  display:flex;
  min-height:58px;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 14px 11px;
  border-bottom:1px solid #e4ece8
}
.fmc-action-sheet-head strong {
  display:block;
  font-size:15px
}
.fmc-action-sheet-head small {
  display:block;
  margin-top:3px;
  color:#73827b;
  font-size:10px;
  font-weight:700
}
.fmc-action-sheet-head button {
  width:38px;
  height:38px;
  border:0;
  border-radius:11px;
  background:#eef6f2;
  color:#147a5a;
  font-size:20px
}
.fmc-action-sheet-body {
  max-height:calc(100dvh - 120px);
  overflow-y:auto;
  padding:12px 12px calc(12px + var(--app-safe-bottom))
}
.fmc-action-sheet-body>.is-in-action-sheet {
  display:grid!important;
  grid-template-columns:1fr!important;
  width:100%!important;
  gap:8px!important
}
.fmc-action-sheet-body>.is-in-action-sheet>* {
  width:100%!important;
  min-width:0!important;
  margin:0!important
}
.fmc-action-sheet-body>.is-in-action-sheet :is(a,button) {
  width:100%!important;
  min-height:48px;
  justify-content:center;
  border-radius:13px;
  font-size:12px;
  font-weight:900
}
@media(max-width:768px) {
  .fmc-action-sheet-backdrop:has(.fmc-customer-action-sheet) {
    align-items:flex-end;
    padding:0 12px calc(var(--fmc-mobile-nav-height) + 16px + var(--app-safe-bottom));
    background:rgba(15,23,42,.2);
    backdrop-filter:blur(2px)
  }
  .fmc-customer-action-sheet {
    width:min(270px,calc(100vw - 32px));
    max-height:none;
    border-color:#c9e3d7;
    border-radius:16px;
    padding:7px;
    background:linear-gradient(180deg,#fff,#f6fcf9);
    box-shadow:0 14px 34px rgba(20,100,73,.18)
  }
  .fmc-customer-action-sheet .fmc-action-sheet-handle {
    display:none
  }
  .fmc-customer-action-sheet .fmc-action-sheet-head {
    min-height:42px;
    padding:5px 7px 8px;
    border-bottom:0;
    text-align:center
  }
  .fmc-customer-action-sheet .fmc-action-sheet-head>div {
    min-width:0;
    flex:1;
    padding-left:34px
  }
  .fmc-customer-action-sheet .fmc-action-sheet-head strong {
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#1c7257
  }
  .fmc-customer-action-sheet .fmc-action-sheet-head small {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9px;
    color:#6d8379
  }
  .fmc-customer-action-sheet .fmc-action-sheet-head button {
    width:30px;
    height:30px;
    min-height:30px;
    border-radius:9px;
    background:#eaf8f2;
    color:#147a5a;
    font-size:17px
  }
  .fmc-customer-action-sheet .fmc-action-sheet-body {
    max-height:none;
    padding:0
  }
  .fmc-customer-action-sheet .fmc-action-sheet-body>.is-in-action-sheet {
    gap:5px!important
  }
  .fmc-customer-action-sheet .fmc-action-sheet-body>.is-in-action-sheet :is(a,button) {
    min-height:42px!important;
    padding:7px 10px!important;
    border:1px solid #d5e9df!important;
    border-radius:10px!important;
    background:#f7fcf9!important;
    color:#1d6d53!important;
    font-size:11px!important;
    box-shadow:none!important
  }
  .fmc-customer-action-sheet .fmc-action-sheet-body>.is-in-action-sheet :is(a,button):active {
    background:#e8f7ef!important
  }
  .fmc-delivery-action-sheet {
    border-color:#ecd5b5;
    background:linear-gradient(180deg,#fff,#fff9f1);
    box-shadow:0 14px 34px rgba(139,87,12,.18)
  }
  .fmc-delivery-action-sheet .fmc-action-sheet-head strong {
    color:#9a610d
  }
  .fmc-delivery-action-sheet .fmc-action-sheet-head button {
    background:#fff0da;
    color:#a46000
  }
  .fmc-delivery-action-sheet .fmc-action-sheet-body>.delivery-actions.is-in-action-sheet :is(a,button) {
    border-color:#ecd8b9!important;
    background:#fffbf4!important;
    color:#8b570c!important
  }
  .fmc-salesman-action-sheet .fmc-action-sheet-body>.salesman-actions.is-in-action-sheet :is(a,button) {
    border-color:#cde6d9!important;
    background:#f7fcf9!important;
    color:#147a5a!important
  }
  .fmc-customer-action-sheet .fmc-action-sheet-body>.is-in-action-sheet form:last-child button {
    border-color:#efcaca!important;
    background:#fff2f2!important;
    color:#c0392b!important
  }
}
.fmc-pull-refresh {
  position:fixed;
  top:max(8px,var(--app-safe-top));
  left:50%;
  z-index:1800;
  display:flex;
  min-height:34px;
  align-items:center;
  justify-content:center;
  padding:7px 13px;
  border:1px solid #d8e7de;
  border-radius:999px;
  background:rgba(255,255,255,.97);
  color:#527064;
  box-shadow:0 10px 26px rgba(15,23,42,.16);
  font-size:10px;
  font-weight:900;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-55px);
  transition:opacity .16s ease,transform .16s ease
}
.fmc-pull-refresh.is-visible {
  opacity:1;
  transform:translate(-50%,0)
}
.fmc-pull-refresh.is-ready,.fmc-pull-refresh.is-refreshing {
  border-color:#8bceb2;
  background:#eaf8f2;
  color:#147a5a
}
.fmc-inline-feedback {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  margin-top:10px;
  padding:11px 13px;
  border:1px solid #d9e7df;
  border-radius:13px;
  background:#f5fbf8;
  color:#315e4d;
  font-size:12px;
  font-weight:700;
  text-align:center
}
.fmc-inline-error {
  border-color:#f0c5c5;
  background:#fff3f3;
  color:#a63838
}
.fmc-inline-warning {
  border-color:#efd9b8;
  background:#fff8ed;
  color:#8a5610
}
.fmc-inline-success {
  border-color:#bfe2d3;
  background:#edf9f3;
  color:#147a5a
}
.fmc-retry-btn {
  min-height:36px;
  padding:7px 12px;
  border:1px solid currentColor;
  border-radius:10px;
  background:#fff;
  color:inherit;
  font-weight:800;
  cursor:pointer
}
.fmc-is-busy {
  position:relative;
  cursor:wait!important;
  opacity:.78
}
.fmc-skeleton-list {
  display:grid;
  gap:10px;
  width:100%
}
.fmc-skeleton-card {
  display:grid;
  gap:9px;
  padding:14px;
  border:1px solid #e4ebe7;
  border-radius:16px;
  background:#fff
}
.fmc-skeleton-card span {
  display:block;
  height:11px;
  border-radius:999px;
  background:linear-gradient(90deg,#edf2ef 25%,#f8faf9 50%,#edf2ef 75%);
  background-size:200% 100%;
  animation:fmc-skeleton 1.2s linear infinite
}
.fmc-skeleton-card span:first-child {
  width:48%;
  height:14px
}
.fmc-skeleton-card span:last-child {
  width:68%
}
@keyframes fmc-skeleton {
  to {
    background-position:-200% 0
  }
}
.fmc-page-skeleton-overlay {
  position:absolute;
  inset:0;
  z-index:35;
  display:grid;
  align-content:start;
  gap:12px;
  padding:inherit;
  background:#f6fbf8;
  opacity:1;
  transition:opacity .2s ease;
  pointer-events:none
}
.fmc-page-skeleton-overlay.is-hidden {
  opacity:0
}
.main>.content {
  position:relative
}
.fmc-mobile-nav {
  display:none
}
.fmc-network-banner {
  position:fixed;
  top:max(8px,var(--app-safe-top));
  left:50%;
  z-index:2100;
  width:min(520px,calc(100vw - 24px));
  padding:10px 13px;
  border-radius:13px;
  transform:translateX(-50%);
  box-shadow:0 12px 30px rgba(15,23,42,.18);
  font-size:11px;
  font-weight:800;
  line-height:1.4;
  text-align:center
}
.fmc-network-banner.is-offline {
  background:#a63838;
  color:#fff
}
.fmc-network-banner.is-slow {
  background:#fff3dc;
  color:#7a4b08;
  border:1px solid #efd3a2
}
.fmc-sticky-action {
  display:none
}
.fmc-session-warning {
  position:fixed;
  inset:0;
  z-index:3000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(15,23,42,.52);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px)
}
.fmc-session-warning-card {
  width:min(430px,100%);
  padding:24px;
  border:1px solid rgba(29,158,117,.18);
  border-radius:24px;
  background:#fff;
  box-shadow:0 28px 80px rgba(15,23,42,.26);
  color:#17211c;
  text-align:center
}
.fmc-session-warning-icon {
  display:grid;
  width:54px;
  height:54px;
  margin:0 auto 12px;
  place-items:center;
  border-radius:17px;
  background:#fff4dd;
  color:#8a5b00;
  font-size:25px
}
.fmc-session-warning-card h2 {
  margin:0;
  font-size:22px;
  line-height:1.2
}
.fmc-session-warning-card p {
  margin:8px 0 0;
  color:#64776e;
  font-size:14px;
  line-height:1.55
}
.fmc-session-countdown {
  margin:16px 0;
  color:#147a5a;
  font-size:32px;
  font-weight:900;
  letter-spacing:-.03em
}
.fmc-session-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.fmc-session-actions .btn {
  min-height:46px;
  justify-content:center
}
.fmc-filter-sheet-trigger {
  display:none
}
.fmc-filter-sheet-backdrop {
  display:none
}
.fmc-surface {
  min-width:0;
  border:1px solid #dfe9e3;
  border-radius:var(--fmc-radius-lg);
  background:linear-gradient(180deg,#fff 0%,#fbfdfc 100%);
  box-shadow:var(--fmc-shadow-soft)
}
.fmc-card {
  padding:var(--fmc-space-4);
  border:1px solid #dfe9e3;
  border-radius:var(--fmc-radius-lg);
  background:#fff;
  box-shadow:var(--fmc-shadow-soft)
}
.fmc-card-title {
  font-size:var(--fmc-text-md);
  font-weight:900;
  line-height:1.3;
  color:#17211c
}
.fmc-card-copy {
  margin-top:var(--fmc-space-1);
  font-size:var(--fmc-text-sm);
  line-height:1.55;
  color:#708078
}
.fmc-btn {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 14px;
  border:1px solid transparent;
  border-radius:var(--fmc-radius-sm);
  background:var(--fmc-success);
  color:#fff;
  font-size:var(--fmc-text-sm);
  font-weight:800;
  text-decoration:none;
  cursor:pointer
}
.fmc-btn-secondary {
  border-color:#d8e5de;
  background:#fff;
  color:#426052
}
.fmc-btn-danger {
  background:var(--fmc-danger)
}
.fmc-input {
  width:100%;
  min-height:44px;
  padding:9px 12px;
  border:1px solid #d8e5de;
  border-radius:var(--fmc-radius-sm);
  background:#fff;
  color:#17211c;
  font-size:var(--fmc-text-md);
  outline:none
}
.fmc-input:focus {
  border-color:rgba(29,158,117,.52);
  box-shadow:0 0 0 4px rgba(29,158,117,.12)
}
.fmc-status {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 8px;
  border-radius:999px;
  font-size:var(--fmc-text-xs);
  font-weight:800
}
.fmc-status-success {
  background:var(--fmc-success-soft);
  color:var(--fmc-success)
}
.fmc-status-warning {
  background:var(--fmc-warning-soft);
  color:var(--fmc-warning)
}
.fmc-status-danger {
  background:var(--fmc-danger-soft);
  color:var(--fmc-danger)
}
.fmc-status-info {
  background:var(--fmc-info-soft);
  color:var(--fmc-info)
}
.fmc-modal-surface {
  width:min(100%,620px);
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  border-radius:var(--fmc-radius-xl);
  background:#fff;
  box-shadow:0 28px 80px rgba(15,23,42,.24)
}
#pos-picker-quantity,#ret-picker-quantity {
  appearance:textfield;
  -moz-appearance:textfield
}
#pos-picker-quantity::-webkit-outer-spin-button,#pos-picker-quantity::-webkit-inner-spin-button,#ret-picker-quantity::-webkit-outer-spin-button,#ret-picker-quantity::-webkit-inner-spin-button,.fmc-quantity-picker input::-webkit-outer-spin-button,.fmc-quantity-picker input::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0
}
.fmc-quantity-picker {
  position:fixed;
  inset:0;
  z-index:1700;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.36);
  backdrop-filter:blur(3px)
}
.fmc-quantity-picker-dialog {
  width:min(310px,100%);
  padding:14px;
  border:1px solid #dce9e2;
  border-radius:17px;
  background:#fff;
  box-shadow:0 20px 52px rgba(15,23,42,.22);
  text-align:center
}
.fmc-quantity-picker-dialog>strong {
  display:block;
  font-size:16px
}
.fmc-quantity-picker-dialog>small {
  display:block;
  margin-top:4px;
  color:#718078
}
.fmc-quantity-picker-control {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:12px
}
.fmc-quantity-picker-control button {
  width:38px;
  height:38px;
  border:1px solid #d7e7dd;
  border-radius:10px;
  background:#f8fcfa;
  color:#147a5a;
  font-size:17px;
  font-weight:900
}
.fmc-quantity-picker-control input {
  appearance:textfield;
  -moz-appearance:textfield;
  width:78px;
  height:40px;
  min-height:40px;
  border:1px solid #bcdccb;
  border-radius:10px;
  text-align:center;
  font-size:16px!important;
  font-weight:900
}
.fmc-quantity-picker-actions {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:7px;
  margin-top:12px
}
.fmc-quantity-picker-actions button {
  min-height:40px;
  border:0;
  border-radius:10px;
  font-size:11px;
  font-weight:900
}
.fmc-quantity-picker-actions [data-cancel] {
  background:#f0f4f2;
  color:#5f6e67
}
.fmc-quantity-picker-actions [data-confirm] {
  background:#147a5a;
  color:#fff
}
.fmc-medicine-memory {
  display:none;
  gap:7px;
  margin-top:8px;
  margin-bottom:8px;
  padding:8px;
  border:1px solid #dce9e2;
  border-radius:12px;
  background:#f8fcfa
}
.fmc-medicine-memory.is-visible {
  display:grid
}
.fmc-memory-row {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap
}
.fmc-memory-label {
  min-width:62px;
  color:#718078;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase
}
.fmc-memory-chip {
  min-height:30px;
  padding:5px 8px;
  border:1px solid #d8e7de;
  border-radius:10px;
  background:#fff;
  color:#245b47;
  font-size:9px;
  font-weight:800;
  cursor:pointer
}
.fmc-memory-chip.is-favorite {
  border-color:#efc86f;
  background:#fff9e9;
  color:#8a5a08
}
.fmc-memory-star {
  display:inline-flex;
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:transparent;
  color:#147a5a;
  font-size:14px;
  cursor:pointer;
  vertical-align:middle
}
.fmc-bookmark-list {
  display:flex;
  max-height:250px;
  overflow:auto;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:12px
}
.fmc-search-clear-wrap {
  position:relative;
  display:block;
  min-width:0;
  width:100%;
  flex:1 1 auto
}
.fmc-search-clear-wrap>input {
  width:100%!important;
  padding-right:64px!important
}
.fmc-search-clear-wrap.fmc-primary-medicine-search {
  grid-column:1/-1!important
}
.fmc-search-clear-wrap.fmc-company-medicine-search>input {
  padding-right:44px!important
}
.fmc-search-clear-wrap.fmc-company-medicine-search>input::-webkit-search-cancel-button,
.fmc-search-clear-wrap.fmc-company-medicine-search>input::-webkit-search-decoration {
  display:none;
  -webkit-appearance:none
}
.fmc-search-clear-wrap.fmc-company-medicine-search>.fmc-search-clear-btn {
  right:7px;
  width:28px;
  padding:0;
  border-color:#f3caca;
  background:#fff1f1;
  color:#b93838;
  font-size:18px
}
.fmc-search-clear-wrap.fmc-company-medicine-search>.fmc-search-clear-btn:hover {
  border-color:#e7b8b8;
  background:#ffe4e4;
  color:#9f2929
}
.fmc-search-clear-btn {
  position:absolute;
  top:50%;
  right:7px;
  z-index:3;
  display:inline-flex;
  width:auto;
  height:28px;
  min-height:28px;
  align-items:center;
  justify-content:center;
  padding:0 9px;
  transform:translateY(-50%);
  border:1px solid #dce7e1;
  border-radius:9px;
  background:#f3f7f5;
  color:#64756c;
  font-size:9px;
  font-weight:900;
  line-height:1;
  cursor:pointer
}
.fmc-search-clear-btn[hidden] {
  display:none!important
}
.fmc-search-clear-btn:hover {
  border-color:#e7b8b8;
  background:#fff3f3;
  color:#a63838
}
.fmc-voice-search-btn {
  position:absolute;
  top:50%;
  right:7px;
  z-index:4;
  display:inline-flex;
  width:30px;
  height:30px;
  min-height:30px;
  align-items:center;
  justify-content:center;
  padding:0;
  transform:translateY(-50%);
  border:1px solid #cfe4d8;
  border-radius:9px;
  background:#eaf8f2;
  color:#147a5a;
  font-size:13px;
  line-height:1;
  cursor:pointer
}
.fmc-voice-search-btn.is-listening {
  border-color:#e9aaaa;
  background:#fff1f1;
  color:#b43b3b;
  box-shadow:0 0 0 4px rgba(226,75,74,.12)
}
.pos-filter-bar:has(#medicine-query),.ret-search-controls:has(#ret-q),.customer-search-toolbar:has(#customer-medicine-query) {
  grid-template-columns:repeat(2,minmax(0,1fr))!important
}
.pos-filter-bar:has(#medicine-query)>:is(input,select),.ret-search-controls:has(#ret-q)>:is(input,select),.customer-search-toolbar:has(#customer-medicine-query)>:is(input,select) {
  min-height:44px;
  border:1px solid #d7e6de;
  border-radius:12px;
  background:#fff;
  padding:9px 12px;
  color:#263c32;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)
}
.pos-filter-bar:has(#medicine-query)>:is(input,select):focus,.ret-search-controls:has(#ret-q)>:is(input,select):focus,.customer-search-toolbar:has(#customer-medicine-query)>:is(input,select):focus {
  border-color:#62b995;
  box-shadow:0 0 0 3px rgba(29,158,117,.11);
  outline:none
}
#medicine-query+.fmc-search-clear-btn,#ret-q+.fmc-search-clear-btn,#customer-medicine-query+.fmc-search-clear-btn {
  display:inline-flex
}
.fmc-install-btn {
  display:flex;
  width:100%;
  min-height:38px;
  margin-bottom:8px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(29,158,117,.2);
  border-radius:10px;
  background:#eaf8f2;
  color:#147a5a;
  font-size:10px;
  font-weight:900;
  cursor:pointer
}
.fmc-haptic-toggle {
  display:flex;
  width:100%;
  min-height:38px;
  margin-bottom:7px;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 10px;
  border:1px solid rgba(29,158,117,.14);
  border-radius:10px;
  background:rgba(255,255,255,.72);
  color:#426052;
  font-size:10px;
  font-weight:800;
  cursor:pointer
}
.fmc-haptic-toggle strong {
  min-width:34px;
  padding:3px 7px;
  border-radius:999px;
  background:#eef4f0;
  color:#75837c;
  font-size:8px;
  text-align:center
}
.fmc-haptic-toggle[aria-pressed="true"] strong {
  background:#dff5ec;
  color:#147a5a
}
.fmc-haptic-toggle:disabled {
  cursor:not-allowed;
  opacity:.58
}
html.fmc-outdoor-contrast body {
  background:#fff;
  color:#101713
}
html.fmc-outdoor-contrast :is(.card,.stat,.fmc-card,.ret-panel,.ret-cart-shell,.pos-card,.pos-cart-card) {
  background:#fff!important;
  border-color:#9eb9aa!important;
  box-shadow:0 5px 16px rgba(15,23,42,.09)!important
}
html.fmc-outdoor-contrast :is(.muted,small,[class*="-copy"],[class*="-meta"],[class*="-subtitle"]) {
  color:#46544d!important
}
html.fmc-outdoor-contrast :is(input,select,textarea) {
  border-color:#92ad9e!important;
  background:#fff!important;
  color:#101713!important
}
/* Representative wholesaler surfaces consume the shared tokens without changing their behavior. */
.dash-hero,.pos-section,.pos-cart-card,.wdu-account-card,.wdu-highlight-card,.wdu-summary-card {
  --surface-radius:var(--fmc-radius-lg);
  --surface-shadow:var(--fmc-shadow-soft)
}
.pos-section,.pos-cart-card,.wdu-account-card,.wdu-highlight-card,.wdu-summary-card {
  box-shadow:var(--surface-shadow)
}
/* MOBILE RESPONSIVE */
@media(max-width:1000px) and (min-width:769px) {
  #login-screen {
    padding:24px 18px
  }
  .login-container {
    max-width:800px;
    min-height:500px;
    border-radius:24px
  }
  .login-left-pane {
    width:300px;
    min-width:300px;
    padding:28px 24px
  }
  .llp-logo {
    flex-direction:row;
    gap:11px;
    text-align:left
  }
  .llp-logo-icon {
    width:54px;
    height:54px;
    border-radius:17px
  }
  .llp-logo-text {
    text-align:left
  }
  .llp-logo-text h1 {
    font-size:20px
  }
  .llp-hero {
    padding:14px 0
  }
  .llp-hero-label {
    margin-bottom:14px
  }
  .llp-hero h2 {
    font-size:26px;
    margin-bottom:12px
  }
  .llp-hero p {
    font-size:13px;
    line-height:1.55
  }
  .llp-stats {
    gap:7px;
    margin-top:18px
  }
  .llp-stat {
    padding:9px 8px
  }
  .llp-stat-val {
    font-size:17px
  }
  .llp-stat-lbl {
    font-size:10px
  }
  .login-right-pane {
    padding:26px 28px
  }
  .lf-card-header {
    margin-bottom:20px;
    text-align:center
  }
  .sa-portal-btn,.role-tabs {
    margin-bottom:15px
  }
  .lf-field {
    margin-bottom:13px
  }
  .remember-me-row {
    margin-bottom:14px
  }
  .content {
    padding:var(--app-page-pad-y-tablet) var(--app-page-pad-x-tablet)
  }
  .g4 {
    grid-template-columns:1fr 1fr
  }
  .modal {
    max-width:500px
  }
  .stat .val {
    font-size:18px
  }
}
@media(max-width:768px) {
  #login-screen {
    padding:0;
    align-items:flex-start;
    background:#f6fbf9;
    overflow:visible
  }
  .login-container {
    flex-direction:column;
    max-width:100%;
    width:100%;
    min-height:100dvh;
    border-radius:0;
    box-shadow:none
  }
  .login-left-pane {
    width:100%;
    min-width:0;
    padding:16px 22px 18px;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border-radius:0 0 24px 24px
  }
  .llp-logo {
    flex-direction:row;
    align-items:center;
    gap:10px
  }
  .llp-logo-icon {
    width:46px;
    height:46px;
    border-radius:14px
  }
  .llp-logo-text {
    text-align:left
  }
  .llp-logo-text h1 {
    font-size:20px
  }
  .llp-logo-text span {
    font-size:10px
  }
  .llp-hero {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:14px 0 0;
    text-align:center
  }
  .llp-hero-label {
    margin-bottom:10px;
    font-size:11px
  }
  .llp-hero h2 {
    font-size:25px;
    max-width:500px;
    margin-bottom:9px;
    line-height:1.12
  }
  .llp-hero p {
    max-width:440px;
    font-size:13px;
    line-height:1.5
  }
  .llp-stats {
    width:100%;
    max-width:440px;
    gap:7px;
    margin-top:13px
  }
  .llp-stat {
    padding:8px 7px
  }
  .llp-stat-val {
    font-size:16px
  }
  .llp-stat-lbl {
    font-size:10px
  }
  .llp-footer {
    display:none
  }
  .login-right-pane {
    width:100%;
    padding:22px 22px calc(28px + env(safe-area-inset-bottom, 0px));
    display:block;
    background:#f6fbf9;
    overflow:visible
  }
  .lf-card {
    max-width:460px;
    margin:0 auto;
    padding:0
  }
  .lf-card-header {
    margin-bottom:18px;
    text-align:center
  }
  .lf-card-header h2 {
    font-size:24px
  }
  .sa-portal-btn {
    margin-bottom:14px
  }
  .role-tabs {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    padding:7px;
    margin-bottom:15px;
    border-radius:16px
  }
  .rtab {
    flex:1 1 auto;
    min-height:44px;
    font-size:12px
  }
  .lf-field {
    gap:6px;
    margin-bottom:12px
  }
  .lf-field label {
    font-size:11px
  }
  .remember-me-row {
    margin-bottom:14px;
    font-size:12px
  }
  .btn-login {
    min-height:48px
  }
  #app-screen {
    display:block;
    position:relative;
    padding-left:0;
    overflow-x:hidden;
    min-height:100dvh
  }
  .sidebar {
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:min(88vw,320px);
    max-width:320px;
    height:100vh;
    height:100dvh;
    padding-top:var(--app-safe-top);
    padding-bottom:var(--app-safe-bottom);
    z-index:1200;
    transform:translateX(-102%);
    transition:transform .25s ease;
    box-shadow:16px 0 40px rgba(15,23,42,.16);
    overflow:hidden;
    overscroll-behavior:contain
  }
  .sidebar.open {
    transform:translateX(0)
  }
  .main {
    width:100%;
    max-width:100%;
    min-width:0
  }
  .topbar {
    position:sticky;
    top:0;
    z-index:1080;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    padding:calc(10px + var(--app-safe-top)) max(14px,var(--app-safe-right)) 10px max(14px,var(--app-safe-left));
    min-height:calc(var(--app-mobile-topbar-height) + var(--app-safe-top));
    align-items:center;
    row-gap:8px;
    overflow:hidden;
    background:linear-gradient(135deg,color-mix(in srgb,var(--fmc-role-soft) 92%,#fff) 0%,#fff 100%);
    border-bottom:1px solid color-mix(in srgb,var(--fmc-role-color) 22%,transparent);
    box-shadow:0 7px 20px color-mix(in srgb,var(--fmc-role-color) 10%,transparent)
  }
  .topbar > div:first-child {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    max-width:100%;
    overflow:hidden
  }
  .topbar h1 {
    font-size:15px;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .tb-right {
    grid-column:1 / -1;
    display:flex;
    flex:1 1 100%;
    width:100%;
    max-width:100%;
    min-width:0;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    overflow:visible;
    flex-wrap:wrap;
    padding-bottom:2px
  }
  .topbar-shell-actions {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    flex:1 1 100%;
    order:2;
    width:100%;
    max-width:100%;
    gap:8px
  }
  .topbar-shell-btn {
    min-width:0;
    min-height:var(--app-touch-target);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .rbadge,.notif-chip.role {
    flex:0 0 auto;
    order:1;
    max-width:100%;
    margin-left:auto;
    white-space:nowrap
  }
  .sb-overlay.on {
    display:block
  }
  .mb-menu-btn {
    display:inline-flex!important;
    flex:0 0 auto;
    border:1px solid color-mix(in srgb,var(--fmc-role-color) 28%,transparent)!important;
    background:#fff!important;
    color:var(--fmc-role-color)!important;
    box-shadow:0 5px 14px color-mix(in srgb,var(--fmc-role-color) 12%,transparent);
    font-weight:800
  }
  .content {
    padding:var(--app-page-pad-y-mobile) max(var(--app-page-pad-x-mobile),var(--app-safe-right)) calc(var(--app-page-pad-y-mobile) + var(--app-safe-bottom) + var(--fmc-mobile-nav-height) + 16px) max(var(--app-page-pad-x-mobile),var(--app-safe-left));
    overflow-x:clip;
    overflow-y:visible
  }
  .fmc-has-sticky-action .content {
    padding-bottom:calc(var(--app-page-pad-y-mobile) + var(--app-safe-bottom) + var(--fmc-mobile-nav-height) + var(--fmc-sticky-action-height) + 34px)
  }
  .fmc-mobile-nav {
    position:fixed;
    left:max(10px,var(--app-safe-left));
    right:max(10px,var(--app-safe-right));
    bottom:max(7px,var(--app-safe-bottom));
    z-index:1150;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:var(--fmc-mobile-nav-height);
    padding:5px 6px;
    border:1px solid color-mix(in srgb,var(--fmc-role-color) 22%,transparent);
    border-radius:18px;
    background:linear-gradient(135deg,color-mix(in srgb,var(--fmc-role-soft) 94%,#fff) 0%,rgba(255,255,255,.98) 100%);
    box-shadow:0 15px 36px color-mix(in srgb,var(--fmc-role-color) 18%,transparent);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px)
  }
  .fmc-role-wholesaler.fmc-mobile-nav, .fmc-role-salesman.fmc-mobile-nav {
    grid-template-columns:repeat(5,minmax(0,1fr));
    max-width:620px;
    margin:0 auto
  }
  .fmc-mobile-nav-item {
    display:flex;
    min-width:0;
    min-height:48px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:2px;
    border-radius:13px;
    color:color-mix(in srgb,var(--fmc-role-color) 42%,#667085);
    text-decoration:none;
    font-size:11px;
    font-weight:800;
    line-height:1.1;
    text-align:center
  }
  .fmc-mobile-nav-icon {
    display:flex;
    width:24px;
    height:24px;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    font-size:15px;
    font-weight:900;
    line-height:1
  }
  .fmc-mobile-nav-item.is-global-search .fmc-mobile-nav-icon svg {
    display:block;
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round
  }
  .fmc-mobile-nav-item.is-active {
    color:var(--fmc-role-color);
    background:#fff;
    box-shadow:0 5px 14px rgba(15,23,42,.08)
  }
  .fmc-mobile-nav-item.is-primary .fmc-mobile-nav-icon {
    color:#fff;
    background:var(--fmc-role-color);
    box-shadow:0 8px 18px color-mix(in srgb,var(--fmc-role-color) 30%,transparent)
  }
  .fmc-role-wholesaler .fmc-mobile-nav-item.is-primary .fmc-mobile-nav-icon, .fmc-role-salesman .fmc-mobile-nav-item.is-primary .fmc-mobile-nav-icon {
    color:inherit;
    background:transparent;
    box-shadow:none
  }
  .fmc-role-salesman {
    --fmc-role-color:#185fa5;
    --fmc-role-soft:#edf6ff
  }
  .fmc-role-customer {
    --fmc-role-color:#534ab7;
    --fmc-role-soft:#f2efff
  }
  .fmc-role-delivery {
    --fmc-role-color:#0e7490;
    --fmc-role-soft:#ecfeff
  }
  .fmc-role-superadmin {
    --fmc-role-color:#b45309;
    --fmc-role-soft:#fff4e8
  }
  .fmc-keyboard-open .fmc-mobile-nav,.fmc-keyboard-open .fmc-sticky-action {
    display:none!important
  }
  .fmc-keyboard-open .content {
    padding-bottom:var(--app-page-pad-y-mobile)
  }
  .fmc-keyboard-open :is(.ret-modal-backdrop,.desk-due-modal-backdrop,.customer-modal,.salesman-modal,.delivery-modal,.edit-modal,.admin-modal-bg,.platform-modal-bg,.discount-local-company-modal,.discount-customer-modal,.rcd-modal-backdrop,.pl-modal-overlay,.sn-modal,.notif-modal,.modal-bg) {
    bottom:0!important;
    max-height:100dvh!important
  }
  .fmc-keyboard-open :is(.ret-modal-card,.desk-due-modal,.customer-modal-panel,.salesman-modal-panel,.delivery-modal-panel,.edit-modal-card,.admin-modal,.platform-modal,.discount-local-company-modal-card,.discount-customer-modal-card,.rcd-modal,.pl-modal,.sn-modal-card,.notif-modal-surface,.modal) {
    max-height:calc(100dvh - var(--app-safe-top) - 12px)!important;
    scroll-padding-bottom:28px
  }
  .fmc-sticky-action {
    position:fixed;
    left:max(10px,var(--app-safe-left));
    right:max(10px,var(--app-safe-right));
    bottom:calc(var(--fmc-mobile-nav-height) + 16px + var(--app-safe-bottom));
    z-index:1140;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:var(--fmc-sticky-action-height);
    padding:10px 12px;
    border:1px solid rgba(29,158,117,.18);
    border-radius:18px;
    background:rgba(255,255,255,.97);
    box-shadow:0 16px 38px rgba(15,23,42,.16);
    backdrop-filter:blur(14px)
  }
  .fmc-modal-open .fmc-sticky-action {
    display:none!important
  }
  .fmc-sticky-action-copy {
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    flex:1
  }
  .fmc-sticky-action-label {
    font-size:11px;
    font-weight:700;
    color:#738179;
    text-transform:uppercase;
    letter-spacing:0em
  }
  .fmc-sticky-action-value {
    margin-top:0;
    font-size:16px;
    font-weight:700;
    color:#17211c;
    overflow-wrap:anywhere
  }
  .fmc-sticky-action .btn,.fmc-sticky-action button {
    flex:0 0 auto;
    justify-content:center
  }
  .fmc-sticky-action.is-inline-action-visible {
    opacity:0;
    visibility:hidden;
    transform:translateY(14px);
    pointer-events:none
  }
  .fmc-sticky-action {
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease
  }
  .ret-sticky-checkout {
    display:grid;
    grid-template-columns:auto auto minmax(100px,auto);
    min-height:60px;
    padding:7px 9px;
    gap:7px
  }
  .ret-sticky-pay {
    display:flex;
    align-items:center;
    gap:4px
  }
  .ret-sticky-pay button {
    min-height:34px;
    padding:6px 8px;
    border:1px solid #dce7e1;
    border-radius:9px;
    background:#f7faf8;
    color:#607068;
    font-size:9px;
    font-weight:900
  }
  .ret-sticky-pay button.active {
    border-color:#147a5a;
    background:#eaf8f2;
    color:#147a5a
  }
  .ret-sticky-checkout .fmc-sticky-action-copy {
    flex:0 0 auto
  }
  .ret-sticky-checkout .fmc-sticky-action-value {
    font-size:14px
  }
  .ret-sticky-checkout>.btn {
    min-height:38px;
    padding:7px 10px;
    font-size:11px
  }
  .fmc-filter-sheet-trigger {
    display:inline-flex;
    width:min(100%,620px);
    margin:0 auto 12px;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:9px 14px;
    border:1px solid #d8e7de;
    border-radius:13px;
    background:#fff;
    color:#176e53;
    font-size:12px;
    font-weight:800;
    box-shadow:var(--fmc-shadow-soft)
  }
  .fmc-filter-sheet-source {
    display:none!important
  }
  .fmc-filter-sheet-content .fmc-filter-sheet-source {
    display:block!important
  }
  .fmc-filter-sheet-backdrop.is-open {
    position:fixed;
    inset:0;
    z-index:1400;
    display:flex;
    align-items:flex-end;
    padding-top:var(--app-safe-top);
    background:rgba(15,23,42,.44);
    backdrop-filter:blur(3px)
  }
  .fmc-filter-sheet {
    width:100%;
    max-height:calc(100dvh - var(--app-safe-top));
    overflow-y:auto;
    padding:16px 14px calc(18px + var(--app-safe-bottom));
    border-radius:22px 22px 0 0;
    background:#fff;
    box-shadow:0 -20px 48px rgba(15,23,42,.18)
  }
  .fmc-nav-flyout {
    position:fixed;
    left:max(12px,var(--app-safe-left));
    right:max(12px,var(--app-safe-right));
    bottom:calc(var(--fmc-mobile-nav-height) + 18px + var(--app-safe-bottom));
    z-index:1148;
    display:grid;
    grid-template-columns:1fr;
    gap:5px;
    width:min(230px,calc(100vw - 32px));
    margin:0 auto;
    padding:8px;
    border:1px solid rgba(29,158,117,.18);
    border-radius:15px;
    background:rgba(255,255,255,.98);
    box-shadow:0 14px 34px rgba(15,23,42,.18);
    opacity:0;
    transform:translateY(18px) scale(.96);
    transform-origin:bottom center;
    pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
    backdrop-filter:blur(16px)
  }
  .fmc-nav-flyout.is-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    width:min(360px,calc(100vw - 24px));
    padding:10px
  }
  .fmc-nav-flyout.is-grid .fmc-nav-flyout-title {
    grid-column:1/-1;
    padding:3px 8px 7px;
    font-size:12px;
    letter-spacing:.02em;
    text-transform:none
  }
  .fmc-nav-flyout.is-grid .fmc-nav-flyout-action {
    min-width:0;
    min-height:54px;
    padding:8px;
    align-items:center
  }
  .fmc-nav-flyout.is-grid .fmc-nav-flyout-action strong {
    font-size:12px;
    line-height:1.25
  }
  .fmc-nav-flyout.is-open {
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto
  }
  .fmc-nav-flyout-title {
    padding:4px 7px 6px;
    color:#708078;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
    text-align:center;
    text-transform:uppercase
  }
  .fmc-nav-flyout-action {
    display:flex;
    min-height:40px;
    align-items:center;
    gap:8px;
    padding:6px 8px;
    border:1px solid #e0ebe5;
    border-radius:10px;
    background:#f8fcfa;
    color:#245b47;
    text-decoration:none
  }
  .fmc-nav-flyout-action span {
    display:flex;
    width:27px;
    height:27px;
    align-items:center;
    justify-content:center;
    flex:0 0 27px;
    border-radius:8px;
    background:#eaf8f2;
    color:#147a5a;
    font-size:15px;
    font-weight:900
  }
  .fmc-nav-flyout-action strong {
    font-size:10px
  }
  .fmc-nav-flyout-action.is-due {
    border-color:#f2caca;
    background:#fff1f1;
    color:#a63f3f
  }
  .fmc-nav-flyout-action.is-due span {
    background:#fde2e2;
    color:#c44747
  }
  .fmc-nav-flyout-action.is-warning {
    border-color:#f2d38b;
    background:#fff8df;
    color:#8a5b00
  }
  .fmc-nav-flyout-action.is-warning span {
    background:#ffedb8;
    color:#a86500
  }
  .fmc-mobile-nav-item.is-flyout-open {
    color:var(--fmc-role-color);
    background:var(--fmc-role-soft)
  }
  .fmc-filter-sheet-head {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:14px;
    text-align:center
  }
  .fmc-filter-sheet-title {
    font-size:17px;
    font-weight:900
  }
  .fmc-filter-sheet-close {
    position:absolute;
    right:14px;
    width:42px;
    height:42px;
    border:0;
    border-radius:13px;
    background:#eef4f0;
    font-size:20px
  }
  .fmc-action-sheet-source:not(.is-in-action-sheet) {
    display:none!important
  }
  .fmc-action-sheet-trigger {
    display:inline-flex;
    align-items:center;
    justify-content:center
  }
  .fmc-install-onboarding,.fmc-update-ready {
    bottom:calc(var(--fmc-mobile-nav-height) + 16px + var(--app-safe-bottom));
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .fmc-install-onboarding>div:first-child,.fmc-update-ready span {
    grid-column:1/-1;
    text-align:center
  }
  .fmc-install-onboarding-actions {
    display:grid;
    grid-column:1/-1;
    grid-template-columns:1fr 1fr
  }
  .fmc-global-search {
    align-items:flex-end;
    padding:max(8px,var(--app-safe-top)) max(6px,var(--app-safe-right)) max(8px,var(--app-safe-bottom)) max(6px,var(--app-safe-left))
  }
  .fmc-global-search-dialog {
    width:100%;
    max-height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 16px);
    border-radius:22px
  }
  .fmc-global-search-results {
    max-height:55dvh
  }
  /* Small standalone blocks are centered on phones instead of floating left/right. */
  .content :where(.empty-state,.dash-empty,.order-empty,.wdu-empty,.wda-empty,.ret-empty-state,.ret-due-empty,.delivery-empty,.admin-empty,.med-empty,.discount-empty,.trash-empty) {
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important
  }
  .content :where(.card-head,.section-head,.panel-head):has(> :only-child) {
    justify-content:center!important;
    text-align:center!important
  }
  .content :where(.empty-state,.order-empty,.wdu-empty,.wda-empty,.ret-empty-state,.ret-due-empty,.delivery-empty,.admin-empty) {
    max-width:min(100%,620px)
  }
  .content :where(.pos-medicine-name,.pos-cart-item-name,.ret-result-name,.ret-cart-name,.customer-name-link,.order-request-name,.salesman-table-title,.delivery-table-title,.desk-order-cell-main,.wd-item-title,.wd-return-title,.rd-item-title,.customer-action-title,.delivery-table-name,.sales-report-name-title,.smr-modern-name,.smr-modern-meta,.statement-table-title,.statement-table-meta) {
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word
  }
  .fmc-search-clear-wrap.fmc-has-voice-search>input {
    padding-right:98px!important
  }
  .fmc-search-clear-wrap.fmc-has-voice-search>.fmc-search-clear-btn {
    right:43px
  }
  .content :where(.pos-card-copy,.ret-panel-copy,.customer-card-subtitle,.order-request-sub,.wd-section-copy,.wd-action-copy,.rd-section-copy,.rd-alert-copy,.delivery-table-subtext,.sales-report-name-subtitle,.smr-copy,.smr-modern-sub,.statement-section-subtitle,.statement-empty-meta) {
    overflow-wrap:anywhere;
    word-break:break-word
  }
  .g4 {
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .g2 {
    grid-template-columns:1fr;
    gap:12px
  }
  .tbl {
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch
  }
  .fbar {
    align-items:stretch
  }
  .fbar input.si,.fbar select.si,.fbar textarea.si {
    min-width:0;
    width:100%;
    min-height:var(--app-touch-target);
    flex:1 1 180px
  }
  .btn,button,[role="button"] {
    min-height:var(--app-touch-target)
  }
  .content :where(.card,.stat,section,article) {
    content-visibility:auto;
    contain-intrinsic-size:auto 160px
  }
  .content :where(input,select,textarea,button,a) {
    scroll-margin-top:calc(var(--app-mobile-topbar-height) + 18px);
    scroll-margin-bottom:120px
  }
  a,button {
    user-select:none;
    -webkit-user-select:none
  }
  textarea {
    resize:vertical
  }
  input:not([type="checkbox"]):not([type="radio"]),select,textarea {
    font-size:12px
  }
  .pos-order-setup-grid .pos-field :is(input,select),.ret-customer-panel .ret-field :is(input,select),.customer-order-info-grid :is(input,select,textarea) {
    font-size:12.5px!important
  }
  #login-screen input:not([type="checkbox"]):not([type="radio"]),#login-screen select,#login-screen textarea {
    font-size:14px
  }
  .ui-grid-auto-fit {
    grid-template-columns:1fr
  }
  .ui-mobile-only {
    display:initial!important
  }
  .ui-desktop-only {
    display:none!important
  }
  .fmc-modal-open .fmc-mobile-nav {
    z-index:1600
  }
  .fmc-modal-open :is(.ret-modal-backdrop,.desk-due-modal-backdrop,.customer-modal,.salesman-modal,.delivery-modal,.edit-modal,.admin-modal-bg,.platform-modal-bg,.discount-local-company-modal,.discount-customer-modal,.rcd-modal-backdrop,.pl-modal-overlay,.sn-modal,.notif-modal,.modal-bg) {
    bottom:calc(var(--fmc-mobile-nav-height) + 14px + var(--app-safe-bottom))!important;
    height:auto!important;
    max-height:calc(100dvh - var(--fmc-mobile-nav-height) - 14px - var(--app-safe-bottom))!important;
    padding-bottom:0!important
  }
  .fmc-modal-open :is(.ret-modal-card,.desk-due-modal,.customer-modal-panel,.salesman-modal-panel,.delivery-modal-panel,.edit-modal-card,.admin-modal,.platform-modal,.discount-local-company-modal-card,.discount-customer-modal-card,.rcd-modal,.pl-modal,.sn-modal-card,.notif-modal-surface,.modal) {
    max-height:calc(100dvh - var(--fmc-mobile-nav-height) - var(--app-safe-top) - 28px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    scroll-padding-bottom:24px
  }
  .modal-bg {
    align-items:flex-end;
    padding:var(--app-safe-top) var(--app-safe-right) 0 var(--app-safe-left);
    touch-action:pan-y
  }
  .modal {
    width:100%;
    max-width:100%;
    max-height:calc(100dvh - var(--app-safe-top));
    border-radius:20px 20px 0 0;
    padding:20px 16px calc(20px + var(--app-safe-bottom));
    scroll-padding-bottom:calc(100px + var(--app-safe-bottom));
  }
}
@media(max-width:480px) {
  #login-screen {
    padding:0
  }
  .login-left-pane {
    padding:13px 16px 15px;
    border-radius:0 0 22px 22px
  }
  .login-right-pane {
    padding:18px 16px calc(24px + env(safe-area-inset-bottom, 0px))
  }
  .llp-logo-icon {
    width:42px;
    height:42px
  }
  .llp-hero {
    padding-top:10px
  }
  .llp-hero-label {
    margin-bottom:8px
  }
  .llp-hero h2 {
    font-size:22px;
    margin-bottom:7px
  }
  .llp-hero p {
    font-size:12.5px;
    line-height:1.45
  }
  .llp-stats {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    max-width:none;
    margin-top:10px
  }
  .llp-stat {
    padding:7px 4px
  }
  .llp-stat-val {
    font-size:15px
  }
  .llp-stat-lbl {
    font-size:9.5px
  }
  .lf-card {
    max-width:none
  }
  .lf-card-header {
    margin-bottom:15px
  }
  .lf-card-header h2 {
    font-size:22px
  }
  .login-role-hint {
    margin-top:7px
  }
  .sa-portal-btn {
    padding:9px 11px;
    gap:10px;
    margin-bottom:12px
  }
  .sa-portal-icon {
    width:32px;
    height:32px;
    font-size:14px
  }
  .sa-portal-text-block .sa-ttl {
    font-size:12px
  }
  .role-tabs {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding:6px;
    margin-bottom:13px;
    border-radius:15px
  }
  .rtab {
    min-height:42px;
    padding:9px 8px;
    font-size:12px;
    border-radius:10px
  }
  .lf-field input {
    min-height:44px;
    padding-top:9px;
    padding-bottom:9px
  }
  .demo-box {
    padding:9px 11px;
    font-size:11.5px
  }
  .btn-login {
    padding:12px;
    font-size:14px
  }
  .forgot-link {
    font-size:12px;
    line-height:1.5;
    margin-top:9px
  }
  .topbar {
    padding-right:max(12px,var(--app-safe-right));
    padding-left:max(12px,var(--app-safe-left))
  }
  .topbar h1 {
    font-size:14px;
    max-width:100%
  }
  .tb-right {
    width:100%;
    max-width:100%;
    justify-content:space-between
  }
  .modal {
    padding:16px 12px calc(16px + var(--app-safe-bottom))!important;
    width:100%!important;
    max-width:100%!important;
    border-radius:18px 18px 0 0!important
  }
  .modal-bg {
    padding:var(--app-safe-top) var(--app-safe-right) 0 var(--app-safe-left)!important;
    align-items:flex-end
  }
  .g4 {
    grid-template-columns:1fr!important
  }
  .card,.stat {
    padding:14px
  }
  .topbar-shell-actions {
    grid-template-columns:1fr 1fr
  }
  .pos-filter-bar>.fmc-search-clear-wrap:has(#medicine-query),.ret-search-controls>.fmc-search-clear-wrap:has(#ret-q),.customer-search-toolbar>.fmc-search-clear-wrap:has(#customer-medicine-query) {
    grid-column:1/-1!important
  }
  .pos-filter-bar,.ret-search-controls,.customer-search-toolbar {
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
}
@media(min-width:769px) {
  .fmc-search-clear-wrap.fmc-has-voice-search>input {
    padding-right:126px!important
  }
  .fmc-search-clear-wrap.fmc-has-voice-search>.fmc-search-clear-btn {
    right:49px
  }
  .fmc-voice-search-btn {
    right:9px;
    width:32px;
    height:32px;
    min-height:32px;
    border-radius:10px
  }
}
@media (orientation:landscape) and (max-height:500px) and (max-width:900px) {
  :root {
    --app-page-pad-y-mobile:10px;
    --fmc-mobile-nav-height:54px;
    --fmc-sticky-action-height:62px
  }
  .content {
    padding-top:10px;
    padding-bottom:max(12px,var(--app-safe-bottom))
  }
  .fmc-has-sticky-action .content {
    padding-bottom:calc(var(--app-safe-bottom) + var(--fmc-mobile-nav-height) + var(--fmc-sticky-action-height) + 22px)
  }
  .fmc-mobile-nav {
    min-height:54px;
    bottom:max(4px,var(--app-safe-bottom));
    border-radius:15px
  }
  .fmc-mobile-nav-item {
    min-height:44px
  }
  .fmc-sticky-action {
    min-height:62px;
    bottom:calc(var(--fmc-mobile-nav-height) + 10px + var(--app-safe-bottom));
    padding:7px 10px
  }
  :is(.ret-modal-backdrop,.desk-due-modal-backdrop,.customer-modal,.salesman-modal,.delivery-modal,.edit-modal,.admin-modal-bg,.platform-modal-bg,.discount-local-company-modal,.discount-customer-modal,.rcd-modal-backdrop,.pl-modal-overlay,.sn-modal,.notif-modal,.modal-bg) {
    align-items:flex-start!important;
    padding-top:max(6px,var(--app-safe-top))!important
  }
  :is(.ret-modal-card,.desk-due-modal,.customer-modal-panel,.salesman-modal-panel,.delivery-modal-panel,.edit-modal-card,.admin-modal,.platform-modal,.discount-local-company-modal-card,.discount-customer-modal-card,.rcd-modal,.pl-modal,.sn-modal-card,.notif-modal-surface,.modal,.fmc-modal-surface) {
    max-height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 12px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain
  }
}
/* GLOBAL BUTTON INTERACTION */
:where(button,.btn,[role="button"],a[class$="-btn"],a[class*="-btn "]) {
  transition:translate .18s ease,filter .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease;
  transform-origin:center;
  -webkit-tap-highlight-color:transparent;
}
:where(button,.btn,[role="button"],a[class$="-btn"],a[class*="-btn "]):focus-visible {
  outline:3px solid rgba(29,158,117,.25);
  outline-offset:3px;
}
@media(hover:hover) and (pointer:fine) {
  :where(button,.btn,[role="button"],a[class$="-btn"],a[class*="-btn "]):not(:disabled):not([aria-disabled="true"]):hover {
    translate:0 -2px;
    filter:brightness(1.035) saturate(1.06);
    box-shadow:0 10px 22px rgba(15,23,42,.14);
  }
  :where(button,.btn,[role="button"],a[class$="-btn"],a[class*="-btn "]):not(:disabled):not([aria-disabled="true"]):active {
    translate:0 0;
    filter:brightness(.97);
    box-shadow:0 4px 10px rgba(15,23,42,.1);
    transition-duration:.08s;
  }
}
:where(button,.btn,[role="button"],a[class$="-btn"],a[class*="-btn "]):disabled, :where(button,.btn,[role="button"],a[class$="-btn"],a[class*="-btn "])[aria-disabled="true"] {
  cursor:not-allowed;
  translate:none!important;
  filter:none!important;
}
@media(prefers-reduced-motion:reduce) {
  :where(button,.btn,[role="button"],a[class$="-btn"],a[class*="-btn "]) {
    translate:none!important
  }
}
@media(min-width:769px) {
  .sb-overlay {
    display:none!important;
    opacity:0!important
  }
  .mb-menu-btn {
    display:none!important
  }
}
@media(min-width:1025px) {
  .ui-grid-auto-fit {
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr))
  }
}
@media print {
  .sidebar,.topbar,.btn,.fbar,.pager,.modal-bg,#ord-bulk-bar,.tb-right,.mb-menu-btn,.sb-overlay,.fmc-mobile-nav,.fmc-sticky-action,.fmc-network-banner,.fmc-ui-live-region {
    display:none!important
  }
  .main {
    margin:0!important
  }
  body {
    background:#fff
  }
}