/* LensNew Mobile-Only Design System (Ref: dashboard.html & new-bill.html) */
@media (max-width: 1023px) {
  :root {
    --ln-bg: #f4eee3;
    --ln-surface: #f8f3ea;
    --ln-ink: #1f2d3a;
    --ln-muted: #74777b;
    --ln-orange: #b95f1b;
    --ln-teal: #087c78;
    --ln-line: rgba(100, 83, 62, 0.13);
    --ln-shadow: 7px 8px 18px #d8cdbb, -7px -7px 18px #fffaf2;
    --ln-shadow-sm: 4px 5px 12px #dfd4c4, -4px -4px 12px #fffbf4;
    --ln-shadow-inset: inset 3px 3px 7px #dfd4c4, inset -3px -3px 7px #fffaf4;
  }

  /* 1. Global Mobile Canvas: Complete elimination of blue/lavender (#E6E9F3 / #EDF0F8) */
  html,
  body,
  #root,
  #root > div,
  .min-h-screen,
  [data-testid="main-content-area"],
  .mobile-active-screen,
  .mobile-app-shell,
  .app,
  main,
  div:has(> .mobile-app-shell),
  div:has(> .app),
  div:has(> main.app),
  div:has(> .ln-mobile-header) {
    background: #f4eee3 !important;
    background-color: #f4eee3 !important;
    color: var(--ln-ink, #203242) !important;
  }

  /* Hide desktop header & default navigation on mobile when mobile app view is active */
  .mobile-active-screen header.sticky,
  .mobile-active-screen nav.lg\:hidden:not(.ln-bottom-nav):not(.bottom):not(.bottomnav):not(.ln-shared-bottom-nav),
  body:has(.mobile-app-shell) header.sticky,
  body:has(.mobile-app-shell) nav.lg\:hidden:not(.ln-bottom-nav):not(.bottom):not(.bottomnav):not(.ln-shared-bottom-nav),
  body:has(.app) header.sticky,
  body:has(main.app) header.sticky,
  body:has(.ln-mobile-header) header.sticky,
  div:has(> .mobile-app-shell) > header.sticky,
  div:has(> .mobile-app-shell) > nav.lg\:hidden:not(.ln-bottom-nav):not(.bottom):not(.bottomnav):not(.ln-shared-bottom-nav),
  div:has(> .app) > header.sticky,
  div:has(> main.app) > header.sticky,
  div:has(> .ln-mobile-header) > header.sticky,
  .mobile-active-screen aside[data-testid="desktop-sidebar"],
  body:has(.mobile-app-shell) aside[data-testid="desktop-sidebar"],
  body:has(.app) aside[data-testid="desktop-sidebar"],
  body:has(main.app) aside[data-testid="desktop-sidebar"] {
    display: none !important;
  }

  header.ln-mobile-header,
  .ln-mobile-header {
    display: flex !important;
  }

  .mobile-active-screen main,
  body:has(.mobile-app-shell) main,
  body:has(.app) main,
  body:has(main.app) main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    background: #f4eee3 !important;
  }

  .mobile-active-screen .app-compact-frame,
  body:has(.mobile-app-shell) .app-compact-frame {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .mobile-app-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh;
    margin: 0 !important;
    padding: calc(14px + env(safe-area-inset-top)) 14px calc(95px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(145deg, #f8f3ea, #f1e9dc);
    box-sizing: border-box !important;
    color: var(--ln-ink);
    font-family: Inter, Roboto, "Segoe UI", Arial, sans-serif;
  }

  /* Header Brand */
  .ln-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
  }

  .ln-brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .ln-logo-img {
    height: 38px;
    width: auto;
    max-width: 76px;
    object-fit: contain;
    filter: drop-shadow(2px 3px 2px #c6a27b);
  }

  .ln-brandname {
    font-size: 24px;
    font-weight: 850;
    letter-spacing: -0.8px;
    line-height: 1.1;
  }

  .ln-brandname span {
    color: var(--ln-orange);
  }

  .ln-sub {
    font-size: 9.5px;
    letter-spacing: 1.2px;
    color: var(--ln-muted);
    font-weight: 700;
    margin-top: 2px;
  }

  .ln-status-pill {
    border: 1px solid #b7e8ce;
    background: #e8f7ed;
    color: #16834e;
    padding: 7px 12px;
    border-radius: 25px;
    font-weight: 750;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: var(--ln-shadow-sm);
    cursor: pointer;
  }

  .ln-date {
    color: var(--ln-muted);
    font-size: 13px;
    font-weight: 600;
    margin: 4px 2px 6px;
  }

  /* Neumorphic Raised Card */
  .ln-card {
    background: linear-gradient(145deg, #fbf7ef, #f3ebdf);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: var(--ln-shadow);
    border-radius: 20px;
  }

  /* Search */
  .ln-search-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 8px 0;
    background: #faf5ed;
    border: 1px solid #ffffff;
    border-radius: 18px;
    box-shadow: var(--ln-shadow-inset);
  }

  .ln-search-card input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ln-ink);
    font-size: 14px;
  }

  .ln-scan-btn {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 12px;
    background: #f5ecdf;
    box-shadow: var(--ln-shadow-sm);
    display: grid;
    place-items: center;
    font-size: 18px;
    color: var(--ln-ink);
    border: 0;
    cursor: pointer;
  }

  /* Primary Button */
  .ln-primary-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 18px;
    min-height: 42px;
    border-radius: 16px;
    background: linear-gradient(135deg, #df914d, #b75b18);
    color: white;
    font-weight: 800;
    font-size: 14.5px;
    box-shadow: 4px 5px 12px #d2b99d, inset 2px 2px 2px #f6c18e, inset -2px -2px 3px #9e4d16;
    border: 0;
    cursor: pointer;
    margin: 8px 0;
  }

  .ln-primary-plus {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff5e7;
    color: var(--ln-orange);
    font-size: 18px;
    font-weight: 900;
  }

  /* Neutralize section padding inside mobile-app-shell */
  .mobile-app-shell section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Reshaped Compact Horizontal Sales & Orders Today Summary Card */
  .ln-stats-card {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    margin: 6px 0 !important;
    min-height: auto !important;
    align-items: center !important;
    border-radius: 20px !important;
  }

  .ln-stat-col {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .ln-stat-col + .ln-stat-col {
    border-left: 1px solid var(--ln-line) !important;
    padding-left: 12px !important;
  }

  .ln-stat-icon {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    flex: none !important;
  }

  .ln-stat-icon.green {
    background: #e2f2e9 !important;
    color: #07845e !important;
  }

  .ln-stat-icon.red {
    background: #ffebe5 !important;
    color: #c8453e !important;
  }

  .ln-stat-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 750 !important;
    color: var(--ln-muted) !important;
    white-space: nowrap !important;
  }

  .ln-stat-value {
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-top: 2px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  /* 4 Grid (Status & Shortcuts) */
  .ln-grid4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 6px 0 !important;
    padding: 0 !important;
  }

  .ln-tile {
    padding: 8px 4px 8px !important;
    text-align: center !important;
    min-width: 0 !important;
    border: 0 !important;
    cursor: pointer !important;
  }

  .ln-bubble {
    width: 36px;
    height: 36px;
    margin: 0 auto 5px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 17px;
    box-shadow: 2px 3px 6px #dfd3c4, -2px -2px 6px #fff9f1;
  }

  .ln-tile strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
  }

  .ln-tile small {
    display: block;
    color: var(--ln-muted);
    font-size: 10.5px;
    margin-top: 2px;
    font-weight: 600;
  }

  .ln-quick .ln-bubble {
    border-radius: 12px;
    background: #e0f3ee;
    color: var(--ln-teal);
    width: 38px;
    height: 38px;
  }

  .ln-quick strong {
    font-size: 11px;
    font-weight: 750;
  }

  /* Section Head */
  .ln-sectionhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 2px 6px;
  }

  .ln-sectionhead h2 {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.3px;
  }

  .ln-link-btn {
    background: transparent;
    color: var(--ln-teal);
    font-weight: 800;
    font-size: 13.5px;
    border: 0;
    cursor: pointer;
  }

  /* Recent Orders List */
  .ln-recent-list {
    padding: 0 14px;
    margin-bottom: 20px;
  }

  .ln-order-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ln-line);
    cursor: pointer;
  }

  .ln-order-row:last-child {
    border-bottom: 0;
  }

  .ln-receipt-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #e1f3ee;
    color: var(--ln-teal);
    display: grid;
    place-items: center;
    font-size: 20px;
  }

  .ln-ordname {
    font-size: 14px;
    font-weight: 800;
    overflow-wrap: anywhere;
  }

  .ln-person {
    color: var(--ln-muted);
    font-size: 12.5px;
    margin-top: 4px;
  }

  .ln-amount {
    text-align: right;
    font-weight: 850;
    font-size: 15px;
    white-space: nowrap;
  }

  .ln-due-badge {
    font-size: 11px;
    color: #b66a10;
    background: #ffeedb;
    padding: 2px 7px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 4px;
    font-weight: 750;
  }

  .ln-paid-badge {
    font-size: 11px;
    color: #127944;
    background: #e2f7ea;
    padding: 2px 7px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 4px;
    font-weight: 750;
  }

  /* Bottom Navigation */
  .ln-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 6px calc(10px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
    background: rgba(250, 246, 239, 0.96) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-top: 1px solid #e4dbcf !important;
    z-index: 50 !important;
    box-sizing: border-box !important;
  }

  .ln-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 2px;
    background: transparent;
    color: #7a7d83;
    font-size: 11px;
    border-radius: 16px;
    border: 0;
    cursor: pointer;
  }

  .ln-nav-btn.active {
    background: #f4e2ce;
    color: var(--ln-orange);
    box-shadow: var(--ln-shadow-sm);
    font-weight: 800;
  }

  /* New Bill Styles */
  .ln-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f7eddf;
    box-shadow: var(--ln-shadow-sm);
    color: #8b4b17;
    font-size: 24px;
    display: grid;
    place-items: center;
    flex: none;
    border: 0;
    cursor: pointer;
  }

  .ln-pill-badge {
    padding: 8px 13px;
    border-radius: 30px;
    background: #ffead3;
    color: #a85113;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
  }

  .ln-customer-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
  }

  .ln-personicon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #f4e7d5;
    color: #81501f;
    font-size: 22px;
    flex: none;
  }

  .ln-twobtn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 12px 12px;
  }

  .ln-softbtn {
    border-radius: 15px;
    padding: 11px 8px;
    background: #e2f3ed;
    color: #08665f;
    font-weight: 750;
    font-size: 12.5px;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .ln-softbtn.orange {
    background: #f7e8d7;
    color: #794317;
  }

  /* Categories */
  .ln-cat-btn {
    padding: 10px 2px;
    border-radius: 18px;
    background: linear-gradient(145deg, #fbf7ef, #f2eadf);
    box-shadow: var(--ln-shadow-sm);
    text-align: center;
    color: var(--ln-teal);
    min-width: 0;
    border: 0;
    cursor: pointer;
  }

  .ln-cat-btn.active {
    background: #e0f2ec;
    color: var(--ln-teal);
    box-shadow: inset 2px 2px 4px #cfdcd7;
  }

  .ln-cat-ico {
    font-size: 22px;
    display: block;
    margin-bottom: 4px;
  }

  .ln-cat-label {
    font-size: 11px;
    font-weight: 750;
    color: var(--ln-ink);
    display: block;
    overflow-wrap: anywhere;
  }

  /* Bill Item */
  .ln-bill-item {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 13px 12px;
    border-bottom: 1px solid var(--ln-line);
  }

  .ln-bill-item:last-child {
    border-bottom: 0;
  }

  .ln-product-pic {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #faf3e8;
    box-shadow: var(--ln-shadow-sm);
    font-size: 24px;
  }

  .ln-item-name {
    font-size: 13.5px;
    font-weight: 850;
    line-height: 1.3;
  }

  .ln-item-sku {
    font-size: 11.5px;
    color: var(--ln-muted);
    margin-top: 3px;
  }

  .ln-discount-badge {
    display: inline-block;
    background: #ffe2b6;
    color: #a8520e;
    border-radius: 14px;
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 850;
    margin-top: 5px;
  }

  .ln-qty-stepper {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
  }

  .ln-qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #f3e5d2;
    box-shadow: var(--ln-shadow-sm);
    font-size: 18px;
    font-weight: 800;
    color: #5a4632;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
  }

  .ln-qty-num {
    min-width: 16px;
    text-align: center;
    font-weight: 800;
    font-size: 14px;
  }

  .ln-prices-col {
    text-align: right;
    min-width: 74px;
  }

  .ln-unit-price {
    font-weight: 850;
    font-size: 14.5px;
    white-space: nowrap;
  }

  .ln-old-price {
    font-size: 11.5px;
    color: #8d8d8d;
    text-decoration: line-through;
    margin-top: 8px;
  }

  .ln-final-price {
    font-size: 14.5px;
    color: var(--ln-orange);
    font-weight: 850;
    margin-top: 3px;
    white-space: nowrap;
  }

  .ln-remove-btn {
    display: block;
    margin: 4px 0 0 auto;
    background: transparent;
    color: #85888c;
    font-size: 16px;
    border: 0;
    cursor: pointer;
    padding: 2px;
  }

  /* Summary Card */
  .ln-summary-card {
    padding: 15px;
    margin: 14px 0;
  }

  .ln-sumrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0;
    font-size: 14px;
  }

  .ln-sumrow .left {
    color: var(--ln-muted);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .ln-sumrow strong {
    white-space: nowrap;
  }

  .ln-sumrow.discount strong {
    color: var(--ln-orange);
  }

  .ln-sumrow.total {
    border-top: 1px solid var(--ln-line);
    padding-top: 12px;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 850;
  }

  .ln-sumrow.total strong {
    font-size: 24px;
    color: var(--ln-ink);
  }

  /* Actions */
  .ln-actions-bar {
    display: grid;
    grid-template-columns: 0.85fr 0.85fr 1.5fr;
    gap: 8px;
    margin: 16px 0 30px;
  }

  .ln-action-btn {
    border-radius: 17px;
    min-height: 60px;
    padding: 8px 4px;
    background: #f8f0e5;
    box-shadow: var(--ln-shadow);
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ln-ink);
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .ln-action-btn.hold {
    background: #e2f4ed;
    color: #08665f;
  }

  .ln-action-btn.pay {
    background: linear-gradient(135deg, #df914d, #b65a17);
    color: white;
    font-size: 12.5px;
    box-shadow: 5px 6px 13px #d2b99d, inset 1px 1px 2px #f5bd88;
  }

  /* Dropdown search results */
  .ln-dropdown-results {
    max-height: 220px;
    overflow-y: auto;
    border-top: 1px solid var(--ln-line);
    margin-top: 8px;
  }

  .ln-search-item {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--ln-line);
    cursor: pointer;
  }

  .ln-search-item:active {
    background: #f2e7d7;
  }


  /* --- V2 STEP-BY-STEP STYLES --- */
  :root{--bg:#f4eee3;--paper:#faf5ec;--ink:#20303e;--muted:#777b80;--orange:#b75c19;--orange2:#df914d;--teal:#087b76;--line:rgba(100,83,62,.15);--shadow:6px 7px 16px #d8cdbb,-6px -6px 16px #fffaf2;--inset:inset 3px 3px 7px #dfd4c4,inset -3px -3px 7px #fffaf4}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Inter,Roboto,"Segoe UI",Arial,sans-serif;color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;color:inherit}.app{width:100%!important;max-width:100%!important;min-height:100dvh;margin:0!important;box-sizing:border-box!important;padding:calc(13px + env(safe-area-inset-top)) 15px calc(112px + env(safe-area-inset-bottom));background:linear-gradient(145deg,#faf5ed,#f0e7da)}.top{display:flex;align-items:center;gap:11px;margin-bottom:18px}.back{width:42px;height:42px;border-radius:50%;background:#f7eddf;box-shadow:var(--shadow);font-size:26px;color:#8b4b17;flex:none}.brand{display:flex;align-items:center;gap:9px;min-width:0;flex:1}.logo{width:44px;height:38px;display:grid;place-items:center;color:var(--orange);font-size:30px}.brandname{font-size:23px;font-weight:900;letter-spacing:-.8px;white-space:nowrap}.brandname span{color:var(--orange)}.sub{font-size:9px;letter-spacing:1px;color:var(--muted);font-weight:750;margin-top:2px}.pill{padding:9px 12px;border-radius:30px;background:#ffead3;color:#a85113;font-weight:850;white-space:nowrap}.headline{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:8px 2px 13px}.headline h1{font-size:25px;line-height:1.1;margin:0;letter-spacing:-.6px}.headline p{font-size:12px;color:var(--muted);margin:6px 0 0}.billno{font-size:11px;color:var(--muted);text-align:right}.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:14px 0 18px}.step{display:flex;align-items:center;flex-direction:column;gap:6px;min-width:0;padding:10px 2px;border-radius:16px;background:#f7efe3;color:#8a8c8e;box-shadow:inset 1px 1px 3px #e7dccb}.step .num{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#eee4d6;font-size:13px;font-weight:900}.step span:last-child{font-size:11px;font-weight:800}.step.active{background:#f8e6d1;color:var(--orange);box-shadow:var(--shadow)}.step.active .num{background:linear-gradient(135deg,#df914d,#b65a17);color:white}.step.done{background:#e4f4ed;color:var(--teal)}.step.done .num{background:var(--teal);color:white}.stage.hidden,.hidden{display:none!important}.card{background:linear-gradient(145deg,#fbf7ef,#f3ebdf);border:1px solid rgba(255,255,255,.95);border-radius:23px;box-shadow:var(--shadow);margin:13px 0;overflow:hidden}.sectionhead{padding:15px 16px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}.sectionhead h2{margin:0;font-size:17px}.hint{font-size:11px;color:var(--muted);line-height:1.45}.content{padding:15px}.field{margin-bottom:13px}.field label{display:block;color:#656c72;font-size:12px;font-weight:800;margin:0 0 7px}.input,.select,.textarea{width:100%;border:1px solid #fff;border-radius:14px;background:#faf6ee;box-shadow:var(--inset);padding:13px 12px;color:var(--ink);outline:none;min-height:47px;font-size:14px}.input:focus,.select:focus,.textarea:focus{border-color:#dfaa75;box-shadow:0 0 0 3px #e8c8a344}.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btnrow{display:flex;gap:9px;flex-wrap:wrap}.btn{padding:12px 14px;border-radius:15px;font-weight:850;font-size:13px;background:#f8efe3;box-shadow:var(--shadow)}.btn.teal{background:#e0f3ec;color:#08665f}.btn.orange{background:#f8e5d0;color:#814415}.btn.primary{background:linear-gradient(135deg,var(--orange2),var(--orange));color:white;box-shadow:5px 6px 13px #d2b99d,inset 1px 1px 2px #f5bd88}.btn.dark{background:#202c3a;color:white}.btn.ghost{background:transparent;box-shadow:none;color:var(--muted)}.full{width:100%}.customer-option{display:flex;align-items:center;gap:11px;padding:12px;border-radius:15px;background:#f8f1e6;border:1px solid var(--line);margin-top:9px}.avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:#f2e1ca;color:#83501e;font-size:20px;flex:none}.custdetails{min-width:0;flex:1}.custname{font-weight:850;font-size:14px}.small{font-size:12px;color:var(--muted);margin-top:4px}.note{padding:10px 12px;border-radius:13px;background:#e5f3ed;color:#17685a;font-size:12px;line-height:1.45;margin:12px 0}.radio-pills{display:flex;gap:8px;flex-wrap:wrap;margin:5px 0 14px}.radio-pills button{padding:10px 13px;border-radius:30px;background:#f6eee2;box-shadow:var(--shadow);font-size:12px;font-weight:800}.radio-pills button.selected{background:#e0f3ec;color:var(--teal);outline:1px solid #9dd8c7}
.rx-table-wrap{overflow-x:auto;padding:2px 1px 8px}.rx-table{width:100%;min-width:500px;border-collapse:separate;border-spacing:6px 8px;table-layout:fixed}.rx-table th{font-size:11px;color:#6c7279;font-weight:850;text-align:center;padding:3px 1px;white-space:nowrap}.rx-table th:first-child{width:48px}.rx-table td{padding:0;text-align:center}.rx-eye{border-radius:10px;background:#e2efff;color:#24538d;font-weight:900;padding:12px 2px;font-size:13px}.rx-eye.le{background:#d9f5e8;color:#087653}.rx-table input,.rx-table select{width:100%;min-width:0;min-height:47px;padding:8px 5px;border:1px solid white;border-radius:11px;background:#faf6ee;box-shadow:var(--inset);text-align:center;font-size:13px;color:var(--ink);text-overflow:clip}.rx-actions{display:flex;gap:8px;flex-wrap:wrap}.rx-actions .btn{font-size:12px;padding:10px 12px}.productsearch{display:flex;gap:8px}.productsearch input{flex:1;min-width:0}.category-pills{display:flex;gap:7px;overflow-x:auto;padding:5px 2px 12px}.category-pills button{white-space:nowrap;padding:9px 12px;border-radius:24px;background:#f6eee2;box-shadow:var(--shadow);font-size:12px;font-weight:800}.category-pills button.selected{background:#e0f3ec;color:var(--teal)}.product-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}.product-icon{width:42px;height:42px;border-radius:13px;background:#f6ead8;box-shadow:var(--shadow);display:grid;place-items:center;font-size:22px}.product-name{font-size:13px;font-weight:850;line-height:1.35}.product-meta{font-size:11px;color:var(--muted);margin-top:4px}.price{font-size:14px;font-weight:900;white-space:nowrap;text-align:right}.add{display:block;margin:7px 0 0 auto;background:#e0f3ec;color:var(--teal);border-radius:10px;padding:8px 11px;font-size:12px;font-weight:900}.cartline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:13px 0;border-bottom:1px solid var(--line)}.qty{display:flex;align-items:center;gap:8px;margin-top:8px}.qty button{width:30px;height:30px;border-radius:9px;background:#f0e2cf;box-shadow:var(--shadow);font-size:18px}.qty strong{min-width:16px;text-align:center}.remove{background:transparent;color:#b83e32;font-size:12px;font-weight:850;margin-left:7px}.totals{padding:15px}.sumrow{display:flex;justify-content:space-between;gap:10px;margin:10px 0;font-size:13px}.sumrow span{color:var(--muted)}.sumrow strong{white-space:nowrap}.sumrow.total{border-top:1px solid var(--line);padding-top:13px;font-size:16px;font-weight:900}.sumrow.total strong{font-size:25px;color:var(--orange)}.coupon-row{display:flex;gap:8px;align-items:stretch}.coupon-row .input{min-width:0;flex:1}.coupon-row .btn{min-width:74px}.discount-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.discount-chips button{font-size:11px;padding:7px 9px;border:1px solid #b9c8ff;color:#303e9c;background:#f0f2ff;border-radius:9px;font-weight:800}.choicegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.choice{padding:13px 10px;border-radius:15px;background:#f7efe3;box-shadow:var(--shadow);text-align:left;font-size:13px;font-weight:850}.choice.selected{background:#e0f3ec;color:var(--teal);outline:1px solid #9dd8c7}.choice small{display:block;color:var(--muted);font-size:11px;font-weight:500;margin-top:5px}.filebox{padding:16px 12px;text-align:center;border:1px dashed #c9bba8;border-radius:16px;background:#f8f1e7}.filebox input{max-width:100%;font-size:12px}.preview{width:100%;max-height:190px;object-fit:contain;margin-top:10px;border-radius:12px}.reviewline{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.reviewline span{color:var(--muted)}.footer{position:fixed;bottom:0;left:0;right:0;transform:none;width:100%;max-width:100%;margin:0;box-sizing:border-box;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(250,246,239,.96);backdrop-filter:blur(16px);border-top:1px solid #e4dbcf;display:flex;gap:9px;z-index:10}.footer .btn{flex:1;min-height:49px}.footer button:disabled{opacity:.4;cursor:not-allowed}.toast{position:fixed;z-index:30;bottom:85px;left:50%;transform:translateX(-50%);max-width:90%;padding:11px 15px;border-radius:12px;background:#20303e;color:white;font-size:13px;display:none}.paymentqr{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:15px;background:#f8f1e6}.qr{width:48px;height:48px;border-radius:12px;background:#eee8dd;display:grid;place-items:center;font-size:25px;flex:none}.payment-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.payment-buttons button{min-height:62px;padding:10px;border-radius:15px;font-size:12px;font-weight:900;line-height:1.35}.payment-buttons small{display:block;font-weight:500;font-size:10px;margin-top:4px}.receipt-btn{background:#e6b47d;color:#563318;box-shadow:var(--shadow)}.invoice-btn{background:#75c5ad;color:#064d42;box-shadow:var(--shadow)}.switchrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}.switchrow label{font-size:13px;font-weight:800}.toggle{width:48px;height:28px;border-radius:30px;background:#d6d0c6;padding:3px;display:flex;align-items:center}.toggle:after{content:"";width:22px;height:22px;background:white;border-radius:50%;box-shadow:0 1px 3px #999;transition:transform .15s}.toggle.on{background:var(--teal)}.toggle.on:after{transform:translateX(20px)}@media(max-width:420px){.app{padding-left:11px;padding-right:11px}.brandname{font-size:20px}.pill{font-size:12px}.step span:last-child{font-size:10px}.row{gap:7px}.content{padding:12px}.headline h1{font-size:23px}.rx-table{min-width:520px}.rx-table input,.rx-table select{font-size:13px;min-height:48px;padding:8px 5px}.rx-table th{font-size:11px}.coupon-row .btn{min-width:65px;padding:10px}}@media(min-width:600px){body{background:var(--bg)}.app{width:100%!important;max-width:100%!important;margin:0!important;border-radius:0!important}}@media print{body{background:white}.app{max-width:none;padding:0;background:white}.top,.stepper,.footer,.btn,.pill{display:none!important}.card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}.stage.hidden{display:none!important}}

  /* --- CRITICAL RX MOBILE VISIBILITY ENHANCEMENTS --- */
  .rx-eye-card {
    background: linear-gradient(145deg, #fbf7ef, #f3ebdf);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 6px 7px 16px #d8cdbb, -6px -6px 16px #fffaf2;
    padding: 16px 14px;
    margin-bottom: 16px;
  }
  .rx-eye-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .rx-eye-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.5px;
    background: #e2efff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
  }
  .rx-eye-badge.le {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
  }
  .rx-grid-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }
  .rx-grid-row.two-col {
    grid-template-columns: 1fr 1fr;
  }
  .rx-grid-row.hybrid {
    grid-template-columns: 0.72fr 0.72fr 1.85fr;
  }
  .rx-field-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
  }
  .rx-field-item label {
    font-size: 10px;
    font-weight: 850;
    color: #555b62;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rx-input, .rx-select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 10px 4px !important;
    border: 1px solid #ffffff !important;
    border-radius: 13px !important;
    background: #faf6ee !important;
    box-shadow: inset 3px 3px 7px #dfd4c4, inset -3px -3px 7px #fffaf4 !important;
    color: #1f2d3a !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-align: center !important;
    outline: none !important;
    box-sizing: border-box !important;
  }
  .rx-select {
    text-align-last: center !important;
    cursor: pointer !important;
  }
  .rx-input:focus, .rx-select:focus {
    border-color: #df914d !important;
    box-shadow: 0 0 0 3px rgba(223, 145, 77, 0.25) !important;
  }
  .rx-view-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 10px;
  }
  .rx-toggle-btn {
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    background: #f7efe3;
    color: var(--muted);
    border: 1px solid var(--line);
    cursor: pointer;
  }
  .rx-toggle-btn.active {
    background: #e0f3ec;
    color: var(--teal);
    border-color: #9dd8c7;
  }

  /* Mobile Inventory & Appointments Specific Styles */
  :root {
    --bg: #f7efe2;
    --card: #fbf5eb;
    --ink: #243442;
    --muted: #77808a;
    --orange: #c66b22;
    --orange2: #e69b53;
    --teal: #087b76;
    --tealbg: #e0f4ec;
    --line: #e7dac7;
    --shadow: 7px 8px 17px #d9cdbb, -6px -6px 15px #fffaf2;
    --inset: inset 3px 3px 7px #e2d6c5, inset -3px -3px 7px #fffaf3;
    --purple: #5146e8;
  }

  .topbar {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
  }
  .back {
    height: 42px;
    width: 42px;
    flex: 0 0 42px;
    border-radius: 15px;
    background: var(--card);
    box-shadow: var(--shadow);
    color: var(--orange);
    font-size: 23px;
    display: grid;
    place-items: center;
    border: none;
    cursor: pointer;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }
  .logo {
    height: 40px;
    width: 40px;
    border-radius: 13px;
    background: #fff8ed;
    box-shadow: var(--shadow);
    display: grid;
    place-items: center;
    color: var(--teal);
    font-weight: 950;
    font-size: 14px;
    border: 1px solid #fff;
  }
  .brand strong {
    font-size: 16px;
    display: block;
    line-height: 1.15;
  }
  .brand small {
    font-size: 9px;
    color: var(--muted);
    letter-spacing: .8px;
    display: block;
  }
  .status {
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
    color: var(--teal);
    background: #e1f7ec;
    border: 1px solid #bce8d7;
    border-radius: 20px;
    padding: 7px 9px;
  }
  .titlebar, .heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 9px;
    margin: 0 2px 14px;
  }
  .titlebar h1, .heading h1 {
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -.6px;
    margin: 0 0 6px;
    font-weight: 900;
  }
  .titlebar p, .heading p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
  }
  .primary {
    border-radius: 14px;
    background: linear-gradient(145deg, #e7a05a, #b95c19);
    color: #fff;
    font-weight: 850;
    padding: 11px 13px;
    box-shadow: 0 6px 13px #c8a17b, inset 1px 1px 2px #f6c58e;
    white-space: nowrap;
    border: none;
    cursor: pointer;
  }
  .primary .plus {
    font-size: 19px;
    vertical-align: -1px;
    margin-right: 4px;
  }
  .card {
    background: var(--card);
    border: 1px solid #fffdf8;
    border-radius: 22px;
    padding: 14px;
    margin: 13px 0;
    box-shadow: var(--shadow);
  }
  .stats, .metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 8px 0;
  }
  .stat, .metric {
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow);
    min-width: 0;
  }
  .stat .label, .metric .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 750;
    color: var(--muted);
  }
  .stat .value, .metric .value {
    font-size: 18px;
    font-weight: 800;
    margin-top: 2px;
  }
  .stat .sub {
    font-size: 11px;
    color: var(--muted);
  }
  .metric .icon {
    float: right;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: #f8e4cf;
    color: var(--orange);
    display: grid;
    place-items: center;
  }
  .metric.green .icon {
    background: #dff5e9;
    color: var(--teal);
  }
  .metric.purple .icon {
    background: #ece5ff;
    color: var(--purple);
  }
  .toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px;
    align-items: center;
  }
  .field {
    min-width: 0;
    width: 100%;
    border: 1px solid white;
    border-radius: 13px;
    padding: 12px;
    background: #fbf6ee;
    box-shadow: var(--inset);
    outline: none;
    color: var(--ink);
    box-sizing: border-box;
  }
  .field:focus {
    border-color: #e0a05e;
    box-shadow: 0 0 0 3px #e6a85c33;
  }
  .search-wrap {
    position: relative;
  }
  .search-wrap .field {
    padding-left: 37px;
  }
  .search-icon {
    position: absolute;
    left: 12px;
    top: 11px;
    color: var(--muted);
    font-size: 18px;
  }
  .tools {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 9px;
    scrollbar-width: thin;
  }
  .tool {
    flex: 0 0 auto;
    padding: 9px 11px;
    border-radius: 12px;
    background: #f8efe2;
    color: #80552f;
    border: 1px solid #efd9bd;
    font-size: 11px;
    font-weight: 850;
    box-shadow: 3px 3px 7px #ded2c0, -3px -3px 7px #fffaf3;
    cursor: pointer;
  }
  .tool.primary-tool {
    background: #eceaff;
    color: var(--purple);
    border-color: #d6d1ff;
  }
  .shop-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
  }
  .shop-row label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 850;
  }
  .filters {
    margin-top: 10px;
  }
  .filter-label {
    font-size: 10px;
    color: var(--muted);
    font-weight: 900;
    letter-spacing: .7px;
    margin: 8px 0 4px;
  }
  .chips, .chiprow {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 3px 2px 9px;
    scrollbar-width: thin;
  }
  .chip {
    white-space: nowrap;
    border-radius: 13px;
    padding: 9px 11px;
    background: #f8efe2;
    color: #657080;
    font-weight: 800;
    font-size: 11px;
    box-shadow: 3px 3px 7px #ded2c0, -3px -3px 7px #fffaf3;
    border: 1px solid transparent;
    cursor: pointer;
  }
  .chip.active {
    background: #e1f5ed;
    color: var(--teal);
    border-color: #bde7d9;
  }
  .stockchips {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 3px 2px 0;
  }
  .stockchip {
    font-size: 11px;
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
    border: none;
    cursor: pointer;
  }
  .stockchip.active {
    background: var(--orange);
    color: white;
    box-shadow: 0 4px 9px #c88a54;
  }
  .sectionhead, .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin-bottom: 10px;
  }
  .sectionhead h2, .section-head h2 {
    font-size: 14px;
    margin: 0;
    font-weight: 900;
    letter-spacing: .2px;
  }
  .count, .section-head .mini {
    font-size: 11px;
    color: var(--muted);
    font-weight: 800;
  }
  .product-list {
    display: grid;
    gap: 10px;
  }
  .product {
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #fff9f0;
    padding: 12px;
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
  }
  .product-icon {
    width: 43px;
    height: 43px;
    border-radius: 14px;
    background: #edf4f6;
    color: #7892a7;
    display: grid;
    place-items: center;
    font-size: 22px;
  }
  .product-main {
    min-width: 0;
  }
  .product-main h3 {
    margin: 1px 0 3px;
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    font-weight: 800;
  }
  .meta {
    font-size: 10px;
    color: var(--muted);
    overflow-wrap: anywhere;
  }
  .prices {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 11px;
  }
  .prices span {
    color: var(--muted);
  }
  .prices strong {
    color: var(--ink);
  }
  .qtyline {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
  }
  .qty {
    font-weight: 900;
    min-width: 20px;
    text-align: center;
    font-size: 12px;
  }
  .low {
    font-size: 9px;
    background: #ffe0df;
    color: #c83b39;
    border-radius: 8px;
    padding: 3px 5px;
    font-weight: 900;
  }
  .qbtn {
    width: 27px;
    height: 27px;
    border-radius: 9px;
    background: #e2f4ec;
    color: var(--teal);
    font-weight: 950;
    font-size: 17px;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
  }
  .qbtn.minus {
    background: #f8e3e2;
    color: #bc5552;
  }
  .product-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .iconbtn {
    height: 34px;
    width: 34px;
    border-radius: 11px;
    background: #f0edff;
    color: var(--purple);
    font-size: 16px;
    box-shadow: 2px 2px 5px #e0d6c7;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
  }
  .iconbtn.tag {
    background: #fff0d9;
    color: #c77a12;
  }
  .empty {
    padding: 28px 12px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
  }
  .empty .eye {
    font-size: 38px;
    color: #d2a46e;
    margin-bottom: 8px;
  }
  .empty strong {
    display: block;
    color: var(--ink);
    margin-bottom: 5px;
  }
  .linkbtn {
    background: transparent;
    color: var(--purple);
    font-weight: 850;
    padding: 8px;
    border: none;
    cursor: pointer;
  }
  .appointment-list {
    display: grid;
    gap: 10px;
  }
  .appt {
    border: 1px solid var(--line);
    background: #fff9f0;
    border-radius: 17px;
    padding: 12px;
    display: grid;
    grid-template-columns: 54px 1fr auto;
    gap: 10px;
    align-items: start;
  }
  .time {
    background: #e0f5ed;
    color: var(--teal);
    border-radius: 12px;
    text-align: center;
    padding: 8px 4px;
    font-weight: 900;
    font-size: 12px;
  }
  .appt h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
  }
  .appt p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--muted);
  }
  .badge {
    display: inline-block;
    padding: 4px 7px;
    border-radius: 9px;
    background: #e9e5ff;
    color: #5146e8;
    font-size: 10px;
    font-weight: 850;
    margin-top: 6px;
  }
  .smallbtn {
    background: #f7ead9;
    color: #965019;
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 850;
    border: none;
    cursor: pointer;
    white-space: nowrap;
  }

  /* Sheet & Overlays */
  .overlay {
    position: fixed;
    inset: 0;
    background: #17202a66;
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: none;
    align-items: flex-end;
  }
  .overlay.open {
    display: flex;
  }
  .sheet {
    width: 100%;
    max-height: 90dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fbf7ef;
    border-radius: 26px 26px 0 0;
    padding: 16px 17px calc(90px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 35px #3327192b;
    box-sizing: border-box;
  }
  .handle {
    height: 5px;
    width: 42px;
    background: #d7cbb9;
    border-radius: 5px;
    margin: 0 auto 16px;
  }
  .sheethead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 15px;
  }
  .sheethead h2 {
    font-size: 19px;
    margin: 0;
    font-weight: 900;
    letter-spacing: -.4px;
  }
  .close {
    height: 36px;
    width: 36px;
    border-radius: 12px;
    background: #f0e5d5;
    color: var(--ink);
    font-size: 22px;
    display: grid;
    place-items: center;
    border: none;
    cursor: pointer;
  }
  .formgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
  }
  .formgrid .full {
    grid-column: 1 / -1;
  }
  .label, .formlabel {
    display: block;
    font-size: 11px;
    font-weight: 850;
    color: #6d7580;
    margin: 0 0 5px;
  }
  .help, .helper {
    font-size: 10px;
    color: var(--muted);
    margin-top: 6px;
  }
  .actions {
    display: flex;
    gap: 9px;
    margin-top: 14px;
  }
  .secondary {
    flex: 1;
    border-radius: 13px;
    background: #f2e7d7;
    padding: 12px;
    color: var(--ink);
    font-weight: 800;
    border: none;
    cursor: pointer;
  }
  .actions .primary {
    flex: 1;
  }
  .toggle {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    color: var(--muted);
    margin-top: 10px;
  }
  .toggle input {
    margin-top: 3px;
  }

  /* Bottom Navigation */
  .bottomnav {
    position: fixed;
    z-index: 50;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    background: #fffaf2ed;
    backdrop-filter: blur(13px);
    border-top: 1px solid #e8ddce;
  }
  .navitem {
    background: transparent;
    color: #7d8188;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px 1px;
    font-size: 10px;
    font-weight: 750;
    border: none;
    cursor: pointer;
  }
  .navitem .ico, .navitem .navicon {
    font-size: 21px;
    line-height: 1.1;
  }
  .navitem.active {
    color: var(--teal);
  }
  .navitem.active .ico, .navitem.active .navicon {
    background: #def4eb;
    border-radius: 12px;
    padding: 5px 13px;
  }

  /* More Modal & 3-Column Grid */
  .ln-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(23, 32, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .ln-more-sheet {
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    background: #fbf7ef;
    border-radius: 26px 26px 0 0;
    padding: 16px 17px calc(24px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(45, 35, 20, 0.2);
    box-sizing: border-box;
  }
  .ln-sheet-handle {
    height: 5px;
    width: 42px;
    background: #d7cbb9;
    border-radius: 5px;
    margin: 0 auto 16px;
  }
  .ln-more-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 10px;
    padding: 8px 4px 18px;
  }
  .ln-more-tile {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 2px;
    border-radius: 18px;
  }
  .ln-more-tile:active {
    transform: scale(0.94);
  }
  .ln-more-icon-box {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(195, 180, 160, 0.22), 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #f1e7d8;
    display: grid;
    place-items: center;
    color: #087b76;
  }
  .ln-more-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #243442;
    line-height: 1.2;
    letter-spacing: -0.2px;
    display: block;
    max-width: 95px;
    word-break: break-word;
  }

  /* Stock Audit & Customers Mobile Design System */
  .store {
    font-size: 12px;
    color: var(--muted, #7b7c80);
    margin-top: 2px;
  }
  .icon-btn, .soft-btn {
    background: var(--surface, #fbf6ed);
    border: 1px solid #fffaf2;
    border-radius: 14px;
    box-shadow: 5px 5px 12px #e6dac8, -5px -5px 12px #fffaf2;
    min-height: 44px;
    padding: 10px 13px;
    cursor: pointer;
    font: inherit;
  }
  .icon-btn {
    width: 44px;
    font-size: 20px;
    display: grid;
    place-items: center;
  }
  .soft-btn {
    font-weight: 800;
    color: var(--ink, #203242);
  }
  .status {
    font-size: 12px;
    background: #dff4ed;
    color: #087f79;
    border: 1px solid #c4e9df;
    border-radius: 99px;
    padding: 8px 11px;
    white-space: nowrap;
    font-weight: 750;
  }
  .eyebrow {
    font-size: 12px;
    color: #c56a24;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin: 10px 0 18px;
  }
  .page-head h1 {
    font-size: 26px;
    line-height: 1.15;
    margin: 0 0 6px;
    letter-spacing: -.04em;
    font-weight: 900;
  }
  .sub {
    font-size: 13px;
    color: var(--muted, #7b7c80);
    line-height: 1.45;
  }
  .primary {
    background: linear-gradient(145deg, #d98940, #b85c19);
    color: white;
    border: 1px solid #f2b36e;
    border-radius: 16px;
    padding: 13px 16px;
    box-shadow: 4px 5px 10px #e2c7a8, -2px -2px 6px #fff9ef;
    font-weight: 800;
    min-height: 46px;
    cursor: pointer;
  }
  .teal-btn {
    background: #dff4ed;
    color: #087f79;
    border: 1px solid #c6e9df;
    border-radius: 14px;
    padding: 11px 14px;
    font-weight: 800;
    min-height: 44px;
    cursor: pointer;
  }
  .danger-btn {
    background: #fff0e9;
    color: #b84c36;
    border: 1px solid #f5d4c7;
    border-radius: 14px;
    padding: 10px 13px;
    font-weight: 800;
    cursor: pointer;
  }
  .card {
    background: var(--surface, #fbf6ed);
    border: 1px solid #fffaf3;
    border-radius: 24px;
    box-shadow: 5px 5px 12px #e6dac8, -5px -5px 12px #fffaf2;
    padding: 17px;
    margin-bottom: 15px;
  }
  .card h2 {
    font-size: 17px;
    margin: 0 0 12px;
    letter-spacing: -.02em;
    font-weight: 850;
  }
  .grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
  }
  .metric {
    background: #f8f0e4;
    border: 1px solid #fff9ef;
    border-radius: 17px;
    padding: 10px 12px;
    box-shadow: inset 3px 3px 7px #e7dac8, inset -3px -3px 7px #fffaf3;
  }
  .metric .label {
    font-size: 11px;
    color: var(--muted, #7b7c80);
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
  }
  .metric .value {
    font-size: 18px;
    font-weight: 800;
    margin-top: 2px;
    color: var(--ink, #203242);
  }
  .metric .accent {
    color: #087f79;
  }
  .metric .orange {
    color: #c56a24;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .field label {
    font-size: 12px;
    font-weight: 800;
    color: #59616a;
  }
  .field input, .field select, .field textarea, .search {
    width: 100%;
    border: 1px solid #fffaf2;
    border-radius: 14px;
    background: #fbf7f0;
    box-shadow: inset 3px 3px 7px #e7dac8, inset -3px -3px 7px #fffaf3;
    padding: 13px 13px;
    color: var(--ink, #203242);
    min-height: 46px;
    box-sizing: border-box;
    font: inherit;
  }
  .field textarea {
    min-height: 84px;
    resize: vertical;
  }
  .search-row {
    display: flex;
    gap: 9px;
    margin-bottom: 13px;
  }
  .search {
    flex: 1;
    min-width: 0;
  }
  .chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 1px 7px;
    margin: 0 0 12px;
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar {
    display: none;
  }
  .chip {
    white-space: nowrap;
    background: #f7eddf;
    border: 1px solid #fffaf2;
    border-radius: 99px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 5px 5px 12px #e6dac8, -5px -5px 12px #fffaf2;
    color: #626b75;
    cursor: pointer;
  }
  .chip.active {
    background: #dff4ed;
    color: #087f79;
    border-color: #c9e9df;
    box-shadow: inset 1px 1px 3px #cde7de;
  }
  .item {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid #eadfce;
  }
  .item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .item-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
    background: #f8f0e4;
    box-shadow: 5px 5px 12px #e6dac8, -5px -5px 12px #fffaf2;
    display: grid;
    place-items: center;
    color: #087f79;
    font-size: 19px;
    border: 1px solid #fffaf2;
  }
  .item-main {
    min-width: 0;
    flex: 1;
  }
  .item-title {
    font-size: 14px;
    font-weight: 850;
    line-height: 1.3;
    color: var(--ink, #203242);
  }
  .item-meta {
    font-size: 12px;
    color: var(--muted, #7b7c80);
    margin-top: 4px;
    line-height: 1.45;
  }
  .item-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 9px;
  }
  .small-btn {
    background: #f7eddf;
    border: 1px solid #fffaf2;
    border-radius: 11px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 3px 3px 8px #e6dac8, -3px -3px 8px #fffaf2;
    cursor: pointer;
    color: var(--ink, #203242);
  }
  .badge {
    display: inline-flex;
    align-items: center;
    border-radius: 99px;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 850;
    background: #dff4ed;
    color: #087f79;
  }
  .badge.orange {
    background: #fae6ce;
    color: #c56a24;
  }
  .badge.gray {
    background: #eee8de;
    color: #73767b;
  }
  .empty {
    text-align: center;
    padding: 28px 12px;
    color: var(--muted, #7b7c80);
    font-size: 13px;
  }
  .empty .symbol {
    font-size: 28px;
    color: #087f79;
    margin-bottom: 8px;
  }
  .bottom {
    position: fixed;
    z-index: 50;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fbf6edee;
    backdrop-filter: blur(14px);
    border-top: 1px solid #e9ddcb;
    padding: 9px max(12px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    gap: 5px;
  }
  .bottom button {
    flex: 1;
    max-width: 140px;
    background: transparent;
    color: #777d83;
    padding: 7px 3px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 750;
    border: 0;
    cursor: pointer;
  }
  .bottom button span {
    display: block;
    font-size: 19px;
    margin-bottom: 3px;
    color: #087f79;
  }
  .bottom button.active {
    background: #dff4ed;
    color: #087f79;
  }
  .toast {
    position: fixed;
    z-index: 2000;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: #203242;
    color: white;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 13px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    max-width: 90vw;
  }
  .modal-backdrop {
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: rgba(28, 39, 53, 0.45);
    backdrop-filter: blur(4px);
    display: none;
    align-items: flex-end;
    justify-content: center;
  }
  .modal {
    background: var(--bg, #f7efe2);
    width: min(100%, 760px);
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 26px 26px 0 0;
    padding: 22px 17px calc(90px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
    box-sizing: border-box;
  }
  .modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .modal-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 850;
  }
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .form-grid .wide {
    grid-column: 1 / -1;
  }
  .modal-actions {
    display: flex;
    gap: 9px;
    margin-top: 18px;
    padding-bottom: 12px;
  }
  .modal-actions > * {
    flex: 1;
  }
  .section-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  .tiny {
    font-size: 11px;
    color: var(--muted, #7b7c80);
  }
  .divider {
    height: 1px;
    background: #eadfce;
    margin: 13px 0;
  }

  /* ==========================================================================
     UNIFIED COMPACT MOBILE BRAND HEADER (STICKY)
     ========================================================================== */
  .ln-mobile-header,
  .app.mobile-app-shell header.top {
    position: sticky !important;
    top: 0 !important;
    z-index: 45 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 0 8px !important;
    padding: 4px 4px !important;
    min-height: 46px !important;
    height: 46px !important;
    box-sizing: border-box !important;
    background: var(--ln-bg, #f4eee3) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }
  .ln-mobile-back-btn {
    height: 36px;
    width: 36px;
    flex: 0 0 36px;
    border-radius: 12px;
    background: #fbf6ed;
    border: 1px solid #fffaf2;
    box-shadow: 2px 2px 6px #e6dac8, -2px -2px 6px #fffaf2;
    color: #c56a24;
    font-size: 20px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }
  .ln-mobile-back-btn:active {
    box-shadow: inset 2px 2px 5px #e6dac8, inset -2px -2px 5px #fffaf2;
    transform: scale(0.96);
  }
  .ln-mobile-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }
  .ln-mobile-logo-img {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    object-fit: contain;
    background: #fff8ed;
    border: 1px solid #ffffff;
    box-shadow: 2px 2px 5px #e6dac8, -2px -2px 5px #fffaf2;
    padding: 2px;
  }
  .ln-mobile-logo-fallback {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: #fff8ed;
    color: #087f79;
    font-weight: 900;
    font-size: 13px;
    place-items: center;
    border: 1px solid #ffffff;
    box-shadow: 2px 2px 5px #e6dac8, -2px -2px 5px #fffaf2;
  }
  .ln-mobile-brand-text {
    min-width: 0;
    flex: 1;
  }
  .ln-mobile-brandname {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #203242;
    line-height: 1.15;
  }
  .ln-mobile-brandname span {
    color: #c56a24;
  }
  .ln-mobile-sub {
    font-size: 10px;
    color: #78716c;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    max-width: 150px;
  }
  .ln-mobile-status-pill {
    font-size: 11px;
    font-weight: 800;
    background: #dff4ed;
    color: #087f79;
    border: 1px solid #c4e9df;
    border-radius: 99px;
    padding: 4px 10px;
    white-space: nowrap;
    flex: 0 0 auto;
    box-shadow: inset 1px 1px 3px rgba(8, 127, 121, 0.1);
  }

  /* ==========================================================================
     GLOBAL REMAINING MODULES THEME CONVERSION (< 1024px)
     Covers: Expenses, Pending Orders, Vendors, Coupons, Outstanding, Reports,
     Orders, Sales Returns, GST Returns, Loyalty, Recalls, Shops, Transfers
     ========================================================================== */
  
  /* Shell & Main Content Area */
  [data-testid="main-content-area"] {
    background: var(--ln-bg, #f4eee3) !important;
    color: var(--ln-ink, #203242) !important;
  }
  [data-testid="main-content-area"] > main {
    background: transparent !important;
    padding: 12px 14px calc(90px + env(safe-area-inset-bottom)) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Sticky Top Header on un-switched pages (Reference 2 standardization) */
  header.sticky {
    background: #f4eee3 !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid #e9ddcb !important;
    box-shadow: 0 2px 8px rgba(220, 206, 185, 0.35) !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
  }
  header.sticky button.lg\:hidden {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    background: #fbf6ed !important;
    border: 1px solid #fffaf2 !important;
    border-radius: 12px !important;
    box-shadow: 2px 2px 6px #e6dac8, -2px -2px 6px #fffaf2 !important;
    color: #c56a24 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    font-size: 20px !important;
  }
  header.sticky .neu-pressed,
  header.sticky button:has(img),
  header.sticky button:has(.w-5) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #203242 !important;
    font-weight: 800 !important;
    padding: 0 !important;
    gap: 8px !important;
  }
  /* Hide desktop header controls on mobile to avoid blue strips & clutter */
  header.sticky a[href="/settings"],
  header.sticky button[aria-label="Change Theme"],
  header.sticky button[aria-label="Guided System Tour and Help"],
  header.sticky div.relative.hidden.lg\:block {
    display: none !important;
  }
  header.sticky > div:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  header.sticky > div:last-child:after {
    content: "● Online";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    background: #dff4ed;
    color: #087f79;
    border: 1px solid #c4e9df;
    border-radius: 99px;
    padding: 3px 10px;
    white-space: nowrap;
    box-shadow: inset 1px 1px 3px rgba(8, 127, 121, 0.1);
  }

  /* Fixed Bottom Navigation across all pages (Reference 1) */
  .ln-shared-bottom-nav,
  .bottomnav,
  nav.bottom,
  nav.lg\:hidden.fixed.bottom-0 {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: rgba(251, 246, 237, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid #e7dcce !important;
    box-shadow: 0 -3px 12px rgba(220, 206, 185, 0.4) !important;
    height: calc(56px + env(safe-area-inset-bottom)) !important;
    padding: 3px 4px calc(4px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    align-items: center !important;
    gap: 2px !important;
    z-index: 50 !important;
    box-sizing: border-box !important;
  }
  .ln-shared-bottom-nav .ln-nav-item,
  .bottomnav .navitem,
  nav.bottom button,
  nav.lg\:hidden.fixed.bottom-0 a,
  nav.lg\:hidden.fixed.bottom-0 button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5px !important;
    height: 48px !important;
    padding: 2px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #71717a !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }
  .ln-shared-bottom-nav .ln-nav-icon,
  .bottomnav .navitem .ico,
  nav.bottom button span,
  nav.lg\:hidden.fixed.bottom-0 a svg,
  nav.lg\:hidden.fixed.bottom-0 button svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #71717a !important;
    stroke-width: 2 !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  .ln-shared-bottom-nav .ln-nav-label,
  nav.lg\:hidden.fixed.bottom-0 a span,
  nav.lg\:hidden.fixed.bottom-0 button span {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #71717a !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
  }
  /* Restrained Active State: Reference 1 */
  .ln-shared-bottom-nav .ln-nav-item.active,
  .bottomnav .navitem.active,
  nav.bottom button.active,
  nav.lg\:hidden.fixed.bottom-0 a.active,
  nav.lg\:hidden.fixed.bottom-0 a[style*="rgb(8, 127, 121)"],
  nav.lg\:hidden.fixed.bottom-0 a[style*="#087f79"] {
    background: #dff4ed !important;
    color: #087f79 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-weight: 750 !important;
  }
  .ln-shared-bottom-nav .ln-nav-item.active .ln-nav-icon,
  .ln-shared-bottom-nav .ln-nav-item.active svg,
  nav.lg\:hidden.fixed.bottom-0 a.active svg,
  nav.lg\:hidden.fixed.bottom-0 a[style*="rgb(8, 127, 121)"] svg {
    stroke: #087f79 !important;
    stroke-width: 2.2 !important;
  }
  .ln-shared-bottom-nav .ln-nav-item.active .ln-nav-label,
  nav.lg\:hidden.fixed.bottom-0 a.active span {
    color: #087f79 !important;
    font-weight: 750 !important;
  }

  /* All Surfaces, Cards, and Containers (Complete Blue Removal) */
  .card,
  section.card,
  .mobile-card,
  .ln-card,
  .ln-stats-card,
  .stat,
  .metric,
  .stats > div,
  .metrics > div,
  [data-testid="main-content-area"] .rounded-2xl,
  [data-testid="main-content-area"] .rounded-3xl,
  [data-testid="main-content-area"] .bg-white,
  [data-testid="main-content-area"] .dark\:bg-zinc-900,
  [data-testid="main-content-area"] div[style*="background: rgb(255, 255, 255)"],
  [data-testid="main-content-area"] div[style*="background: #ffffff"],
  [data-testid="main-content-area"] div[style*="background: var(--surface)"],
  [data-testid="main-content-area"] div[style*="background: var(--surface2)"],
  [data-testid="main-content-area"] div[style*="#E6E9F3"],
  [data-testid="main-content-area"] div[style*="#EDF0F8"],
  [data-testid="main-content-area"] div[style*="rgb(230, 233, 243)"],
  [data-testid="main-content-area"] div[style*="rgb(237, 240, 248)"] {
    background: #fbf6ed !important;
    background-color: #fbf6ed !important;
    border: 1px solid #fffaf3 !important;
    border-radius: 20px !important;
    box-shadow: 5px 5px 12px #e6dac8, -5px -5px 12px #fffaf2 !important;
    color: var(--ln-ink, #203242) !important;
  }

  /* Headings & Text: Strictly 2 Typography Levels */
  h1,
  .page-head h1,
  .titlebar h1,
  .headline h1,
  [data-testid="main-content-area"] h1 {
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--ln-ink, #203242) !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
    margin-bottom: 4px !important;
  }
  h2,
  [data-testid="main-content-area"] h2 {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--ln-ink, #203242) !important;
    margin-top: 2px !important;
    margin-bottom: 4px !important;
  }
  h3,
  [data-testid="main-content-area"] h3 {
    font-size: 14px !important;
    font-weight: 750 !important;
    color: var(--ln-ink, #203242) !important;
  }
  p,
  [data-testid="main-content-area"] p {
    color: var(--ln-muted, #7b7c80);
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* Primary Action Buttons */
  [data-testid="main-content-area"] button[class*="bg-indigo-600"],
  [data-testid="main-content-area"] button[class*="bg-blue-600"],
  [data-testid="main-content-area"] button[class*="bg-purple-600"],
  [data-testid="main-content-area"] a[class*="bg-indigo-600"],
  [data-testid="main-content-area"] a[class*="bg-blue-600"] {
    background: linear-gradient(145deg, #d98940, #b85c19) !important;
    color: #ffffff !important;
    border: 1px solid #f2b36e !important;
    border-radius: 16px !important;
    box-shadow: 4px 5px 10px #e2c7a8, -2px -2px 6px #fff9ef !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: transform 0.1s ease !important;
  }
  [data-testid="main-content-area"] button[class*="bg-indigo-600"]:active,
  [data-testid="main-content-area"] button[class*="bg-blue-600"]:active {
    transform: scale(0.97) !important;
  }

  /* Secondary Soft Buttons */
  [data-testid="main-content-area"] button[class*="bg-white"],
  [data-testid="main-content-area"] button[class*="bg-slate-100"],
  [data-testid="main-content-area"] button[class*="bg-gray-100"],
  [data-testid="main-content-area"] button[class*="border-gray-200"],
  [data-testid="main-content-area"] button[class*="border-slate-200"] {
    background: #f7eddf !important;
    border: 1px solid #fffaf2 !important;
    border-radius: 14px !important;
    box-shadow: 3px 3px 8px #e6dac8, -3px -3px 8px #fffaf2 !important;
    color: var(--ln-ink, #203242) !important;
    font-weight: 800 !important;
  }

  /* Inset Inputs, Search Bars, Selects, Textareas */
  [data-testid="main-content-area"] input[type="text"],
  [data-testid="main-content-area"] input[type="search"],
  [data-testid="main-content-area"] input[type="tel"],
  [data-testid="main-content-area"] input[type="email"],
  [data-testid="main-content-area"] input[type="number"],
  [data-testid="main-content-area"] input[type="date"],
  [data-testid="main-content-area"] select,
  [data-testid="main-content-area"] textarea {
    background: #fbf7f0 !important;
    border: 1px solid #fffaf2 !important;
    border-radius: 14px !important;
    box-shadow: inset 3px 3px 7px #e7dac8, inset -3px -3px 7px #fffaf3 !important;
    color: var(--ln-ink, #203242) !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
  }
  [data-testid="main-content-area"] input:focus,
  [data-testid="main-content-area"] select:focus,
  [data-testid="main-content-area"] textarea:focus {
    outline: none !important;
    border-color: #087f79 !important;
    box-shadow: inset 2px 2px 5px #d5e9e2, 0 0 0 2px rgba(8, 127, 121, 0.2) !important;
  }

  /* Filter Chips / Tabs & Single-Row Horizontal Scrolling (Ref: Orders History & Secondary modules) */
  .chips,
  .segmented,
  .tabs,
  [data-testid="main-content-area"] div.flex.items-center:has(> button.rounded-full) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding: 2px 0 6px !important;
    max-width: 100% !important;
  }
  .chips::-webkit-scrollbar,
  .segmented::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  [data-testid="main-content-area"] div.flex.items-center:has(> button.rounded-full)::-webkit-scrollbar {
    display: none !important;
  }
  .chips .chip,
  .segmented button,
  .tabs button,
  [data-testid="main-content-area"] div.flex.items-center:has(> button.rounded-full) > button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  [data-testid="main-content-area"] button[class*="bg-indigo-600"].rounded-xl,
  [data-testid="main-content-area"] button[class*="bg-indigo-600"].rounded-full,
  [data-testid="main-content-area"] button.active {
    background: #dff4ed !important;
    color: #087f79 !important;
    border: 1px solid #c9e9df !important;
    box-shadow: inset 1px 1px 3px #cde7de !important;
    font-weight: 850 !important;
  }
  [data-testid="main-content-area"] .chips button:not(.active),
  [data-testid="main-content-area"] div[class*="gap-"] > button:not([class*="bg-indigo"]):not([class*="primary"]) {
    background: #f7eddf !important;
    border: 1px solid #fffaf2 !important;
    border-radius: 99px !important;
    box-shadow: 3px 3px 8px #e6dac8, -3px -3px 8px #fffaf2 !important;
    color: #626b75 !important;
    font-weight: 800 !important;
  }

  /* Metric summary tiles & Level 2 Compact Typography */
  [data-testid="main-content-area"] div:has(> p.text-xl),
  [data-testid="main-content-area"] div:has(> p.text-2xl),
  [data-testid="main-content-area"] .grid.grid-cols-2 > div,
  [data-testid="main-content-area"] .grid.grid-cols-3 > div,
  [data-testid="main-content-area"] .grid.grid-cols-4 > div {
    background: #f8f0e4 !important;
    border: 1px solid #fff9ef !important;
    border-radius: 17px !important;
    box-shadow: inset 3px 3px 7px #e7dac8, inset -3px -3px 7px #fffaf3 !important;
    padding: 10px 12px !important;
  }
  [data-testid="main-content-area"] div:has(> p.text-xl) p.text-xl,
  [data-testid="main-content-area"] div:has(> p.text-2xl) p.text-2xl,
  [data-testid="main-content-area"] .text-2xl,
  [data-testid="main-content-area"] .text-3xl,
  .metric .value,
  .stat .value {
    color: #203242 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }
  .metric .label,
  .stat .label {
    font-size: 11px !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--ln-muted, #77808a) !important;
  }

  /* Tables & Lists */
  [data-testid="main-content-area"] table {
    background: transparent !important;
    border-collapse: separate !important;
  }
  [data-testid="main-content-area"] table th,
  [data-testid="main-content-area"] [class*="bg-gray-100\/80"],
  [data-testid="main-content-area"] [class*="bg-slate-50"] {
    background: #f8f0e4 !important;
    color: var(--ln-muted, #7b7c80) !important;
    font-weight: 850 !important;
    border-bottom: 1px solid #eadfce !important;
  }
  [data-testid="main-content-area"] table td,
  [data-testid="main-content-area"] .divide-y > * {
    border-bottom: 1px solid #eadfce !important;
    border-color: #eadfce !important;
    color: var(--ln-ink, #203242) !important;
  }
  [data-testid="main-content-area"] table tr:hover td,
  [data-testid="main-content-area"] .divide-y > *:hover {
    background: rgba(223, 244, 237, 0.3) !important;
  }
  [data-testid="main-content-area"] .overflow-x-auto,
  [data-testid="main-content-area"] div:has(> table) {
    border-radius: 18px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Modal Sheets & Overlays */
  .fixed.inset-0.z-50,
  div:has(> .rounded-3xl.shadow-2xl) {
    z-index: 1000 !important;
    background: rgba(28, 39, 53, 0.5) !important;
    backdrop-filter: blur(4px) !important;
  }
  .rounded-3xl.shadow-2xl {
    background: var(--ln-bg, #f7efe2) !important;
    border: 1px solid #fffaf3 !important;
    border-radius: 26px 26px 0 0 !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
  }

  /* Secondary Dashboard Operational Cards (Section 3) */
  .ln-secondary-card {
    background: linear-gradient(145deg, #fbf7ef, #f3ebdf) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: var(--ln-shadow) !important;
    border-radius: 20px !important;
    padding: 12px 14px !important;
    margin: 8px 0 !important;
  }
  .ln-secondary-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
  }
  .ln-secondary-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--ln-ink, #203242) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .ln-sync-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .ln-sync-item {
    background: #faf5ed !important;
    border: 1px solid rgba(100, 83, 62, 0.08) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
  }

}