:root {
  --navy: #11152d;
  --navy-2: #1b2042;
  --ink: #1c2038;
  --muted: #7b819b;
  --surface: #ffffff;
  --canvas: #f5f7fb;
  --line: #e8ebf3;
  --purple: #7563e8;
  --purple-soft: #eeecff;
  --green: #0e9f6e;
  --green-soft: #e1f8ee;
  --orange: #f36b3e;
  --orange-soft: #fff0e9;
  --yellow: #f3b63f;
  --red: #dc5c6c;
  --shadow: 0 16px 40px rgba(27, 32, 66, .08);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
* { box-sizing: border-box; }
@keyframes hf-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes hf-pop { 0% { transform:scale(.96); opacity:0; } 100% { transform:scale(1); opacity:1; } }
@keyframes hf-shimmer { 0% { background-position:120% 0; } 100% { background-position:-80% 0; } }
@keyframes hf-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(117,99,232,.22); } 50% { box-shadow:0 0 0 7px rgba(117,99,232,0); } }
body { margin: 0; min-width: 320px; background: var(--canvas); animation:hf-rise .35s ease-out both; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.card, .promo-card, .quick-card, .glance-card, .cart-card, .supplier-row, .operation-row { animation:hf-rise .42s ease both; }
.card:nth-child(2), .promo-card:nth-child(2), .quick-card:nth-child(2), .glance-card:nth-child(2) { animation-delay:.05s; }
.card:nth-child(3), .quick-card:nth-child(3), .glance-card:nth-child(3) { animation-delay:.1s; }
button { transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease; }
button:active { transform:scale(.97); }
.primary, .glovo-search, .delivery-location { animation:hf-pop .35s ease both; }
.brand-mark { animation:hf-pulse 2.8s ease-in-out infinite; }
.modal-backdrop { animation:fadeIn .2s ease both; }
.modal { animation:hf-pop .25s cubic-bezier(.2,.8,.2,1) both; }
.toast { animation:hf-rise .22s ease both; }
.loading-sheen { background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 45%,transparent 70%); background-size:200% 100%; animation:hf-shimmer 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 258px; background: var(--navy); color: #fff; padding: 26px 17px; display: flex; flex-direction: column; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px; }
.brand-mark { width: 38px; height: 38px; border-radius: 13px; background: linear-gradient(145deg, #ff956b, #7563e8 75%); display: grid; place-items: center; font-weight: 700; color: #fff; box-shadow: 0 7px 17px rgba(117, 99, 232, .35); }
.brand-name { font: 700 20px 'Space Grotesk', sans-serif; letter-spacing: -.7px; }
.brand-tag { display: block; color: #8f95b8; font-size: 10px; margin-top: 2px; letter-spacing: .4px; text-transform: uppercase; }
.role-pill { margin: 0 6px; padding: 13px 13px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; }
.role-pill .label { display: block; font-size: 10px; color: #969cc3; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.role-pill strong { font-size: 13px; }
.nav { display: grid; gap: 5px; }
.nav-section { color: #666d95; font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px; padding: 4px 12px 8px; }
.nav button { border: 0; color: #979dbd; background: transparent; border-radius: 12px; display: flex; align-items: center; gap: 12px; padding: 11px 12px; text-align: left; font-size: 13px; width: 100%; transition: .2s; }
.nav button:hover, .nav button.active { background: rgba(255,255,255,.1); color: #fff; }
.nav button.active { box-shadow: inset 3px 0 var(--accent); }
.nav-icon { width: 19px; text-align: center; font-size: 15px; }
.sidebar-foot { margin-top: auto; color: #858cac; font-size: 11px; line-height: 1.45; padding: 10px 10px 0; border-top: 1px solid rgba(255,255,255,.1); }
.main { flex: 1; min-width: 0; }
.topbar { height: 77px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 38px; }
.breadcrumb { color: var(--muted); font-size: 12px; }
.breadcrumb strong { color: var(--ink); font-size: 14px; display: block; margin-top: 3px; }
.top-actions { display: flex; align-items: center; gap: 15px; }
.icon-btn { width: 35px; height: 35px; border: 1px solid var(--line); background: #fff; border-radius: 11px; position: relative; color: #6f7590; }
.icon-btn .dot { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 100%; background: var(--orange); }
.avatar { width: 37px; height: 37px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; background: linear-gradient(145deg, #7769ea, #4b3ab1); }
.content { max-width: 1420px; margin: 0 auto; padding: 34px 38px 48px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.page-head h1 { font: 700 28px 'Space Grotesk', sans-serif; letter-spacing: -1px; margin: 0 0 7px; }
.page-head p { margin: 0; color: var(--muted); font-size: 13px; }
.head-actions { display: flex; gap: 9px; align-items: center; }
.select, .secondary, .primary { border-radius: 11px; border: 1px solid var(--line); background: var(--surface); padding: 10px 13px; color: var(--ink); font-size: 12px; }
.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; box-shadow: 0 8px 16px color-mix(in srgb, var(--accent) 22%, transparent); }
.primary:hover { filter: brightness(.96); transform: translateY(-1px); }
.secondary:hover { border-color: #c8cde0; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 15px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 17px; padding: 17px 18px; box-shadow: 0 3px 13px rgba(31,38,77,.025); }
.kpi-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; }
.kpi-icon { width: 31px; height: 31px; border-radius: 10px; display: grid; place-items: center; background: var(--soft); font-size: 15px; }
.kpi-value { margin: 13px 0 5px; font: 700 24px 'Space Grotesk', sans-serif; letter-spacing: -.8px; }
.kpi-foot { color: var(--muted); font-size: 11px; }
.kpi-foot.up { color: var(--green); } .kpi-foot.warn { color: var(--orange); }
.grid-main { display: grid; grid-template-columns: 1.42fr .88fr; gap: 15px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 17px; padding: 19px; box-shadow: 0 3px 13px rgba(31,38,77,.025); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.card-title { font: 700 15px 'Space Grotesk', sans-serif; margin: 0; }
.card-sub { color: var(--muted); font-size: 11px; margin-top: 4px; }
.text-link { border: 0; background: transparent; color: var(--accent); font-weight: 700; font-size: 11px; padding: 2px 0; }
.chart-wrap { height: 250px; display: flex; align-items: flex-end; gap: 10px; padding: 16px 0 25px; border-bottom: 1px solid var(--line); position: relative; }
.chart-wrap:before, .chart-wrap:after { content: ''; position: absolute; left: 0; right: 0; border-top: 1px dashed #e8eaf3; }
.chart-wrap:before { top: 42px; } .chart-wrap:after { top: 112px; }
.bar-set { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; position: relative; z-index: 1; }
.bar { width: 13px; border-radius: 5px 5px 2px 2px; background: var(--accent-soft); min-height: 12px; }
.bar.highlight { background: var(--accent); }
.bar-label { position: absolute; bottom: -22px; font-size: 10px; color: var(--muted); }
.legend { display: flex; gap: 18px; font-size: 10px; color: var(--muted); margin-top: 18px; }
.legend span:before { content: ''; width: 7px; height: 7px; display: inline-block; background: var(--accent); border-radius: 2px; margin-right: 5px; } .legend span:nth-child(2):before { background: var(--accent-soft); }
.alert-list { display: grid; gap: 11px; }
.alert { padding: 12px 12px; border-radius: 13px; display: flex; gap: 11px; align-items: center; background: #fafbfe; border: 1px solid #edf0f7; }
.alert-symbol { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; background: var(--soft); color: var(--accent); font-size: 14px; }
.alert strong { font-size: 12px; display: block; } .alert small { color: var(--muted); font-size: 10px; display: block; margin-top: 3px; }
.alert .tag { margin-left: auto; font-size: 9px; padding: 4px 7px; border-radius: 6px; background: #fff3dc; color: #b8791f; font-weight: 700; }
.lower-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 15px; margin-top: 15px; }
.table-wrap { overflow: auto; }
table { border-collapse: collapse; width: 100%; min-width: 450px; } th { color: var(--muted); text-transform: uppercase; font-size: 9px; letter-spacing: .6px; text-align: left; padding: 0 9px 10px; } td { padding: 12px 9px; border-top: 1px solid #f0f2f7; font-size: 11px; white-space: nowrap; } td strong { font-size: 12px; } td.muted { color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 5px; border-radius: 7px; padding: 5px 8px; font-size: 9px; font-weight: 700; } .status:before { content:''; width: 5px; height: 5px; border-radius: 100%; background: currentColor; } .status.good { color: var(--green); background: var(--green-soft); } .status.warn { color: #b8791f; background: #fff3dc; } .status.danger { color: var(--red); background: #ffeaed; }
.timeline { display: grid; gap: 15px; } .event { display: flex; gap: 10px; } .event-dot { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; background: var(--purple-soft); color: var(--purple); } .event:nth-child(2) .event-dot { background: var(--orange-soft); color: var(--orange); } .event:nth-child(3) .event-dot { background: var(--green-soft); color: var(--green); } .event-copy strong { font-size: 11px; display: block; } .event-copy small { color: var(--muted); display: block; font-size: 10px; margin-top: 3px; }
.mobile-nav { display: none; }
.worker-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 16px; }
.action-card { border: 0; border-radius: 16px; padding: 16px 10px; color: #fff; text-align: left; min-height: 105px; background: var(--accent); box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 22%, transparent); } .action-card:nth-child(2) { background: #ec7d43; } .action-card:nth-child(3) { background: #d6992e; } .action-card:nth-child(4) { background: #6b60d7; } .action-card .big-icon { font-size: 24px; display: block; margin-bottom: 17px; } .action-card strong { display: block; font-size: 13px; } .action-card small { font-size: 10px; opacity: .78; display: block; margin-top: 3px; }
.sale-products { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; } .product { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; text-align: left; } .product:hover { border-color: var(--accent); box-shadow: 0 7px 15px rgba(20,20,40,.06); } .product-img { height: 65px; display: grid; place-items: center; border-radius: 10px; background: var(--orange-soft); font-size: 29px; margin-bottom: 9px; } .product:nth-child(2) .product-img { background: #fff2cf; } .product:nth-child(3) .product-img { background: #e9efff; } .product:nth-child(4) .product-img { background: #edf8ed; } .product:nth-child(5) .product-img { background: #fff0e3; } .product:nth-child(6) .product-img { background: #efeaff; } .product strong { font-size: 11px; display: block; } .product small { color: var(--muted); font-size: 10px; display: block; margin-top: 4px; }
.view-grid { display: grid; gap: 15px; } .stock-row { display: grid; grid-template-columns: 2fr 1fr 1fr .8fr; gap: 10px; align-items: center; padding: 13px 0; border-top: 1px solid #f0f2f7; font-size: 11px; } .stock-item { display:flex; align-items:center; gap:9px; font-weight: 700; } .mini-icon { width: 28px; height: 28px; border-radius: 9px; display:grid; place-items:center; background: var(--orange-soft); font-size: 14px; } .progress { height: 6px; border-radius: 10px; background: #edf0f5; overflow: hidden; } .progress i { display:block; height: 100%; border-radius:inherit; background: var(--green); } .progress i.low { background: var(--orange); } .progress i.empty { background: var(--red); width: 5% !important; }
.empty-state { padding: 35px 15px; color: var(--muted); text-align:center; font-size: 12px; }
.toast { position: fixed; right: 22px; bottom: 22px; color: white; background: #1f2746; padding: 12px 15px; border-radius: 11px; font-size: 12px; box-shadow: var(--shadow); transform: translateY(120px); opacity: 0; transition: .25s; z-index: 20; } .toast.show { transform: translateY(0); opacity: 1; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(12, 15, 34, .5); display: grid; place-items: center; z-index: 10; padding: 18px; } .modal { background: white; width: min(500px, 100%); max-height:calc(100svh - 36px); overflow:auto; border-radius: 20px; padding: 22px; box-shadow: 0 25px 80px rgba(0,0,0,.2); } .modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 18px; } .modal h2 { font: 700 20px 'Space Grotesk'; margin:0; } .close { border:0; background:#f1f3f8; border-radius: 8px; width: 34px; height:34px; } .form-grid { display:grid; gap: 16px; } label { color: var(--muted); font-size: 11px; } input, select { width:100%; border:1px solid var(--line); border-radius: 10px; padding: 11px; margin-top: 7px; outline: none; } input:focus, select:focus { border-color: var(--accent); } .modal-foot { display:flex; justify-content:flex-end; gap: 12px; margin-top: 24px; padding-top: 14px; border-top:1px solid var(--line); } .back-button { white-space:nowrap; } .profile-card > .primary, .profile-card > .secondary { margin-right:8px; margin-top:18px; }
@media (max-width: 1050px) { .sidebar { width: 220px; } .content, .topbar { padding-left: 24px; padding-right: 24px; } .kpi-grid { grid-template-columns: repeat(2, 1fr); } .grid-main, .lower-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .app-shell { display:block; } .sidebar { display:none; } .topbar { height: 66px; padding: 0 17px; } .content { padding: 24px 16px 90px; } .page-head { align-items:flex-start; flex-direction:column; } .head-actions { width:100%; } .head-actions .select { flex:1; } .kpi-grid { gap: 9px; } .kpi { padding: 13px; border-radius: 14px; } .kpi-value { font-size: 20px; } .worker-actions { grid-template-columns: repeat(2, 1fr); } .sale-products { grid-template-columns: repeat(2, minmax(0,1fr)); } .stock-row { grid-template-columns: 1.6fr .7fr .8fr; } .stock-row > :nth-child(3) { display:none; } .mobile-nav { position:fixed; display:flex; bottom:0; left:0; right:0; height:66px; background:#fff; border-top:1px solid var(--line); z-index:5; justify-content:space-around; padding: 7px 4px; } .mobile-nav button { background:none; border:0; color:var(--muted); font-size:10px; display:grid; gap:3px; place-items:center; } .mobile-nav button.active { color: var(--accent); font-weight:700; } .mobile-nav span { font-size: 17px; } }

/* Reference-inspired mobile-first treatment */
:root { --indigo: #352b7a; --canvas: #f8f9fb; --line: #e4e5ed; --ink: #252536; --muted: #626476; }
body { background: var(--canvas); }
.sidebar { display: none; }
.app-shell { display: block; }
.main { width: 100%; }
.topbar { height: 66px; padding: 0 18px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 4; }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 0; color: var(--ink); }
.breadcrumb:before { content: '‹'; font-size: 29px; line-height: 1; color: var(--ink); font-weight: 300; }
.breadcrumb strong { font: 700 17px 'DM Sans', sans-serif; margin: 0; }
.top-actions { gap: 10px; }
.top-actions .icon-btn:first-child { border: 0; background: transparent; font-size: 19px; width: 30px; }
.top-actions .icon-btn:nth-child(2) { display: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); }
.content { max-width: 620px; padding: 18px 16px 92px; }
.page-head { display: block; margin-bottom: 18px; }
.page-head h1 { font: 700 21px 'DM Sans', sans-serif; letter-spacing: -.4px; margin-bottom: 4px; }
.page-head p { font-size: 12px; }
.head-actions { margin-top: 14px; width: 100%; }
.select, .secondary, .primary { min-height: 42px; border-radius: 12px; font-size: 12px; }
.primary { background: var(--accent); }
.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.kpi { border: 0; border-radius: 15px; padding: 14px; box-shadow: 0 2px 12px rgba(36, 35, 62, .035); }
.kpi-top { font-size: 10px; }
.kpi-icon { width: 28px; height: 28px; border-radius: 50%; }
.kpi-value { font-size: 20px; margin: 10px 0 4px; }
.kpi-foot { font-size: 10px; }
.grid-main, .lower-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.card { border: 0; border-radius: 16px; padding: 16px; box-shadow: 0 2px 12px rgba(36, 35, 62, .035); }
.card-head { margin-bottom: 14px; align-items: center; }
.card-title { font-size: 14px; }
.card-sub { font-size: 10px; }
.text-link { font-size: 10px; }
.chart-wrap { height: 190px; gap: 6px; padding-top: 9px; }
.bar { width: 10px; border-radius: 7px 7px 2px 2px; }
.alert-list { gap: 8px; }
.alert { border: 0; border-radius: 12px; padding: 10px; background: #fafafd; }
.alert-symbol { width: 29px; height: 29px; border-radius: 50%; }
.alert strong { font-size: 11px; }
.alert small { font-size: 9px; }
.lower-grid { margin-top: 12px; }
.mobile-nav { position: fixed; display: flex; bottom: 0; left: 0; right: 0; height: 70px; background: rgba(255,255,255,.97); border-top: 1px solid var(--line); z-index: 5; justify-content: space-around; padding: 8px 5px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(30, 28, 60, .05); }
.mobile-nav button { min-width: 58px; background: transparent; border: 0; color: #a4a4b1; font-size: 9px; display: grid; gap: 4px; place-items: center; }
.mobile-nav button.active { color: var(--accent); font-weight: 700; }
.mobile-nav span { width: 30px; height: 25px; display: grid; place-items: center; border-radius: 10px; font-size: 17px; }
.mobile-nav button.active span { background: var(--accent-soft); }
.worker-actions { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.action-card { min-height: 96px; border-radius: 16px; padding: 14px; box-shadow: none; }
.action-card .big-icon { margin-bottom: 13px; }
.sale-products { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.product { border: 0; background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 2px 10px rgba(36, 35, 62, .035); }
.product-img { height: 75px; border-radius: 12px; }
.stock-row { grid-template-columns: 1.7fr .8fr; gap: 8px; padding: 12px 0; }
.stock-row > :nth-child(3), .stock-row > :nth-child(4) { display: none; }
.empty-state { padding: 27px 12px; }
#modal .modal { border-radius: 20px; }
.supplier-controls { display:grid; grid-template-columns: 1.1fr 1.5fr .8fr auto; gap:8px; margin-top:15px; }
.supplier-list { display:grid; gap:10px; }
.supplier-row { display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid var(--line); }
.supplier-row:last-child { border-bottom:0; }
.supplier-icon { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--purple-soft); color:var(--purple); font-size:18px; flex:0 0 auto; }
.supplier-main { min-width:0; flex:1; display:grid; gap:3px; }
.supplier-main strong { font-size:13px; }
.supplier-main small { color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.provider-note { display:block; color:var(--muted); font-size:10px; line-height:1.4; margin-top:13px; padding-top:10px; border-top:1px solid var(--line); }
.inline-error { color:#a83a49; background:#fff0f2; border-radius:10px; padding:10px; margin-top:12px; font-size:11px; }
@media (max-width:700px) { .supplier-controls { grid-template-columns:1fr 1fr; } .supplier-controls input { grid-column:span 2; } .supplier-controls button { grid-column:span 2; } }
.access-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.access-stat { background:#fff; border-radius:15px; padding:14px; box-shadow:0 2px 12px rgba(36,35,62,.035); }
.access-stat strong { display:block; font:700 21px 'Space Grotesk',sans-serif; color:var(--accent); }
.access-stat span { display:block; color:var(--muted); font-size:10px; margin-top:5px; }
.people-list,.assignment-list,.settings-list { display:grid; gap:4px; }
.person-row,.assignment-row,.setting-row { display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid #f0f1f5; }
.person-avatar,.cart-badge { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:11px; color:var(--accent); background:var(--accent-soft); font-size:10px; font-weight:700; }
.person-main,.assignment-row>div,.setting-row>div { flex:1; min-width:0; }
.person-main strong,.assignment-row strong,.setting-row strong { display:block; font-size:11px; }
.person-main small,.assignment-row small,.setting-row small { display:block; color:var(--muted); font-size:9px; margin-top:3px; }
.more-btn { border:1px solid var(--line); background:#fff; color:var(--accent); border-radius:8px; padding:6px 8px; font-size:9px; font-weight:700; }
.switch { width:38px; height:22px; border:0; border-radius:20px; padding:3px; background:#dfe1e8; }
.switch span { display:block; width:16px; height:16px; border-radius:50%; background:#fff; transition:.2s; }
.switch.on { background:var(--accent); }.switch.on span { transform:translateX(16px); }
@media (max-width:700px) { .access-summary { gap:7px; } .access-stat { padding:11px; } .access-stat strong { font-size:18px; } .person-row,.assignment-row,.setting-row { gap:7px; } .person-row .status,.assignment-row .status { display:none; } .more-btn { padding:6px; } }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:28px 16px; background:linear-gradient(145deg,#f8f9fb 0%,#f0efff 100%); position:relative; overflow:hidden; }
.auth-shell:before { content:''; position:absolute; width:420px; height:420px; border-radius:50%; background:rgba(117,99,232,.08); top:-190px; right:-150px; }
.auth-brand { position:absolute; top:24px; left:24px; display:flex; align-items:center; gap:9px; z-index:1; }
.auth-brand .brand-mark { width:34px; height:34px; border-radius:11px; }
.auth-brand .brand-name { font-size:19px; }
.auth-card { width:min(430px,100%); background:#fff; border-radius:24px; padding:28px 24px 23px; box-shadow:0 20px 60px rgba(48,40,116,.12); position:relative; z-index:1; }
.auth-hero { margin-bottom:22px; }
.auth-kicker { color:var(--accent); font-size:10px; font-weight:800; letter-spacing:1.4px; }
.auth-hero h1 { margin:9px 0 8px; font:700 26px 'Space Grotesk',sans-serif; letter-spacing:-.8px; color:#252536; }
.auth-hero p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.auth-methods { display:grid; gap:13px; }
.google-btn { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid #dedfe7; background:#fff; border-radius:12px; color:#30303b; font-weight:700; font-size:12px; }
.google-g { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#4285f4; font:700 17px Arial; }
.auth-divider { display:flex; align-items:center; gap:10px; color:#a3a4b0; font-size:10px; }
.auth-divider:before,.auth-divider:after { content:''; flex:1; border-top:1px solid var(--line); }
.auth-submit { width:100%; min-height:44px; }
.auth-link { border:0; background:transparent; color:var(--accent); font-size:11px; font-weight:700; padding:7px; display:block; margin:4px auto 0; }
.auth-note { background:#f7f7fc; border-radius:11px; padding:10px; color:var(--muted); font-size:10px; line-height:1.45; text-align:center; }
.auth-role-strip { position:absolute; bottom:22px; z-index:1; color:#858697; font-size:10px; display:flex; align-items:center; gap:6px; }
.role-dot { width:8px; height:8px; border-radius:50%; margin-left:10px; }.role-dot:first-child { margin-left:0; }.admin-dot { background:#7563e8; }.manager-dot { background:#0e9f6e; }.worker-dot { background:#f36b3e; }
.pending-card { text-align:center; }.pending-icon { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 15px; color:var(--green); background:var(--green-soft); border-radius:50%; font-size:24px; }.pending-list { display:grid; gap:8px; text-align:left; margin:18px 0; }.pending-list div { display:flex; justify-content:space-between; align-items:center; padding:11px 12px; border-radius:11px; background:#fafafd; font-size:11px; }.pending-list span:not(.status) { color:var(--muted); font-size:10px; }
.auth-consent { margin:12px 0; padding:10px; border:1px solid #e6e5f1; border-radius:11px; background:#fbfbfe; }.consent-check { display:flex; align-items:flex-start; gap:8px; color:#626476; font-size:10px; line-height:1.45; }.consent-check input { width:15px; height:15px; margin:0; flex:0 0 15px; accent-color:var(--accent); }.inline-link { border:0; padding:0; background:transparent; color:var(--accent); font-weight:700; font-size:inherit; }.legal-shell { min-height:100vh; padding:24px 16px; background:var(--canvas); }.legal-card { width:min(720px,100%); margin:0 auto; background:#fff; border-radius:22px; padding:26px; box-shadow:0 12px 40px rgba(36,35,62,.08); }.legal-brand { position:static; margin-bottom:25px; }.legal-card h1 { margin:8px 0 5px; font:700 25px 'Space Grotesk',sans-serif; }.legal-card h2 { margin:20px 0 6px; font:700 15px 'Space Grotesk',sans-serif; }.legal-card p { color:#5f6170; font-size:12px; line-height:1.65; }.legal-updated { color:var(--muted)!important; font-size:10px!important; }.legal-back { margin:0 0 18px; padding:0; }.legal-cta { margin-top:18px; width:100%; }.legal-links-card { margin-top:12px; }.legal-actions { display:flex; gap:8px; margin-top:14px; }.legal-actions button { flex:1; } .page-404 { min-height:100vh; display:grid; place-items:center; background:var(--canvas); padding:24px; text-align:center; }.page-404-card { background:#fff; border-radius:22px; padding:30px; width:min(420px,100%); box-shadow:0 12px 40px rgba(36,35,62,.08); }.page-404-card h1 { font:700 54px 'Space Grotesk',sans-serif; color:var(--accent); margin:0; }.page-404-card p { color:var(--muted); font-size:12px; line-height:1.5; }.page-404-card .primary { margin-top:12px; width:100%; }
.role-switcher, .auth-role-strip { display:none !important; }
.account-auth-card { width:min(430px,100%); }
.auth-security-note { color:var(--muted); font-size:10px; line-height:1.4; margin:10px 0; }
.demo-account-panel { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:7px; }
.demo-panel-head { display:grid; gap:3px; text-align:left; }
.demo-panel-head small { color:var(--muted); font-size:10px; }
.demo-account { display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:1px solid var(--line); background:#fafbfe; border-radius:11px; padding:9px; color:var(--ink); }
.demo-account:hover { border-color:var(--accent); }
.demo-account span:last-child { min-width:0; display:grid; gap:2px; }
.demo-account strong,.demo-account small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.demo-account strong { font-size:10px; }
.demo-account small { color:var(--muted); font-size:9px; }
.demo-account-role { width:62px; flex:0 0 62px; text-align:center; border-radius:8px; padding:5px 3px; font-size:9px; font-weight:700; }
.demo-account-role.admin { background:var(--purple-soft); color:var(--purple); }
.demo-account-role.manager { background:var(--green-soft); color:var(--green); }
.demo-account-role.worker { background:var(--orange-soft); color:var(--orange); }
.danger-action { color:#b34452 !important; border-color:#f0c5cb !important; }
.api-setting { align-items:flex-start; }
.api-setting-actions { display:flex; gap:7px; align-items:center; flex:1; justify-content:flex-end; }
.api-setting-actions input { margin-top:0; max-width:260px; }
.security-card { border-left:3px solid var(--yellow); }
@media (max-width: 700px) { .topbar { height:66px; align-items:center; } .content { padding-top:18px; } .auth-card { padding:23px 18px 20px; border-radius:21px; max-height:calc(100svh - 32px); overflow-y:auto; } .auth-hero h1 { font-size:23px; } .auth-brand { top:18px; left:18px; } .auth-shell { min-height:100svh; padding:18px 12px; } body { overflow-x:hidden; } .page-head h1 { font-size:22px; } .card { min-width:0; overflow:hidden; } .table-wrap { max-width:100%; } .api-setting { display:grid; gap:10px; } .api-setting-actions { width:100%; justify-content:stretch; } .api-setting-actions input { max-width:none; flex:1; } .api-setting-actions button { white-space:nowrap; } .person-row .tag { display:none; } }
.clickable { cursor:pointer; }
.clickable:hover { border-color:var(--accent) !important; box-shadow:0 4px 18px rgba(36,35,62,.09); }
.clickable-row { cursor:pointer; transition:.15s; }
.clickable-row:hover { background:#faf9ff; }
.kpi.clickable { width:100%; border:1px solid var(--line); text-align:left; color:inherit; }
.kpi.clickable strong { display:block; font:700 18px 'Space Grotesk'; margin-top:8px; }
.kpi.clickable small { color:var(--muted); font-size:10px; }
.detail-panel { display:flex; align-items:center; gap:14px; margin:-3px 0 15px; padding:14px 16px; background:#fff; border:1px solid var(--accent-soft); border-radius:16px; box-shadow:0 3px 14px rgba(36,35,62,.04); }
.detail-panel > div { flex:1; min-width:0; }
.detail-panel p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.close-detail { border:0; background:#f3f3f8; border-radius:8px; width:28px; height:28px; }
.cart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cart-card h2 { font-size:15px; margin:13px 0 6px; }
.cart-card-top { display:flex; justify-content:space-between; align-items:center; }
.cart-address { color:var(--muted); font-size:11px; min-height:30px; }
.cart-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:15px 0; }
.cart-meta span { display:grid; gap:3px; }
.cart-meta strong { font-size:12px; }
.cart-meta small { color:var(--muted); font-size:9px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-two input { min-width:0; }
.geo-status { display:block; min-height:18px; color:var(--muted); font-size:10px; margin-top:9px; line-height:1.4; }
.inventory-list,.request-list,.help-list { display:grid; gap:0; }
.inventory-row { display:grid; grid-template-columns:34px minmax(120px,1fr) 74px 74px minmax(80px,.7fr) auto; align-items:center; gap:10px; padding:12px 0; border-top:1px solid var(--line); }
.stock-main { min-width:0; display:grid; gap:3px; }
.stock-main strong { font-size:12px; }
.stock-main small { color:var(--muted); font-size:9px; }
.inline-number { color:var(--muted); font-size:9px; }
.inline-number input { margin-top:4px; padding:7px; font-size:11px; }
.stock-progress { min-width:0; }
.stock-progress small { color:var(--muted); font-size:9px; }
.operation-row { display:flex; align-items:center; gap:11px; padding:13px 0; border-bottom:1px solid var(--line); }
.operation-row:last-child { border-bottom:0; }
.operation-row > div { flex:1; min-width:0; display:grid; gap:3px; }
.operation-row strong { font-size:12px; }
.operation-row small { color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.operation-icon { width:32px; height:32px; display:grid; place-items:center; background:var(--purple-soft); color:var(--accent); border-radius:10px; flex:0 0 auto; }
.row-actions { display:flex; gap:6px; align-items:center; }
.row-actions button { white-space:nowrap; }
.profile-card { max-width:720px; }
.profile-avatar { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:var(--accent-soft); color:var(--accent); font-weight:700; margin-bottom:18px; }
.profile-grid { grid-template-columns:1fr 1fr; }
.help-list p { margin:0; padding:14px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; }
.help-list p:last-child { border-bottom:0; }
.supplier-detail { display:grid; gap:10px; }
.supplier-detail p { margin:0; padding:10px; background:#fafafd; border-radius:10px; color:var(--muted); font-size:11px; line-height:1.5; }
.location-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.quick-chips { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:11px; }
.quick-chips button { min-height:34px; padding:6px 10px; }
.security-card { border-left:3px solid var(--yellow); }
@media (max-width:700px) { .cart-grid,.detail-grid { grid-template-columns:1fr; } .inventory-row { grid-template-columns:30px minmax(0,1fr) 62px; gap:7px; } .inventory-row .inline-number:nth-of-type(2), .inventory-row .stock-progress { display:none; } .inventory-row .more-btn { grid-column:3; } .operation-row { align-items:flex-start; flex-wrap:wrap; } .operation-row .status { margin-left:43px; } .row-actions { margin-left:43px; width:calc(100% - 43px); } .profile-grid { grid-template-columns:1fr; } .cart-meta strong { font-size:11px; } .detail-panel { align-items:flex-start; flex-wrap:wrap; } }
.glovo-shell { background:#f7f8fc; }
.glovo-topbar { background:#fff; border-bottom:1px solid #eef0f6; }
.delivery-location { display:flex; align-items:center; gap:10px; border:0; background:transparent; padding:6px 0; color:var(--ink); text-align:left; }
.delivery-location .pin { width:34px; height:34px; display:grid; place-items:center; border-radius:12px; background:var(--accent-soft); color:var(--accent); font-size:18px; }
.delivery-location span:not(.pin) { display:grid; gap:2px; }
.delivery-location small { color:var(--muted); font-size:8px; letter-spacing:.7px; font-weight:700; }
.delivery-location strong { font-size:12px; }
.delivery-location b { color:var(--accent); font-size:14px; margin-left:2px; }
.glovo-hero { position:relative; display:flex; justify-content:space-between; align-items:center; gap:16px; overflow:hidden; min-height:150px; margin-bottom:14px; padding:22px 24px; border-radius:24px; color:#fff; background:linear-gradient(118deg,#27245d 0%,#6253c8 65%,#8b77ed 100%); box-shadow:0 13px 28px rgba(86,73,190,.22); }
.glovo-hero:after { content:''; position:absolute; width:180px; height:180px; right:40px; top:-84px; border-radius:50%; border:1px solid rgba(255,255,255,.14); box-shadow:0 0 0 22px rgba(255,255,255,.04),0 0 0 44px rgba(255,255,255,.035); }
.glovo-hero > div { position:relative; z-index:1; max-width:420px; }
.hero-eyebrow { font-size:9px; letter-spacing:1.2px; font-weight:800; opacity:.76; }
.glovo-hero h2 { margin:8px 0 6px; font:700 25px 'Space Grotesk',sans-serif; letter-spacing:-.8px; }
.glovo-hero p { margin:0; color:rgba(255,255,255,.78); font-size:11px; line-height:1.5; }
.hero-orb { position:relative; z-index:1; width:74px; height:74px; display:grid; place-items:center; border-radius:27px; background:rgba(255,255,255,.13); font-size:35px; transform:rotate(8deg); }
.glovo-search { display:flex; align-items:center; gap:10px; width:100%; margin:0 0 14px; padding:13px 15px; border:1px solid #eceef5; border-radius:15px; background:#fff; color:var(--muted); box-shadow:0 5px 15px rgba(38,40,90,.04); text-align:left; }
.glovo-search span:first-child { color:var(--ink); font-size:20px; }
.glovo-search span:nth-child(2) { flex:1; font-size:11px; }
.glovo-search b { color:var(--accent); font-size:16px; }
.category-strip { display:flex; gap:8px; overflow:auto; scrollbar-width:none; margin-bottom:20px; padding-bottom:2px; }
.category-strip::-webkit-scrollbar { display:none; }
.category { display:flex; align-items:center; gap:6px; flex:0 0 auto; padding:8px 12px; border:1px solid #e9ebf3; border-radius:999px; background:#fff; color:var(--muted); font-size:10px; font-weight:700; }
.category span { font-size:14px; }
.category.active { border-color:var(--accent); background:var(--accent); color:#fff; box-shadow:0 5px 12px color-mix(in srgb,var(--accent) 28%,transparent); }
.promo-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin-bottom:22px; }
.promo-card { position:relative; min-height:136px; overflow:hidden; border:0; border-radius:19px; padding:16px; color:#fff; text-align:left; box-shadow:0 8px 18px rgba(44,44,87,.08); }
.promo-card span { display:block; font-size:8px; font-weight:800; letter-spacing:1px; opacity:.76; }
.promo-card strong { display:block; margin:8px 0 10px; font:700 17px 'Space Grotesk',sans-serif; line-height:1.08; }
.promo-card small { font-size:9px; opacity:.85; }
.promo-card i { position:absolute; right:11px; bottom:9px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.16); font-style:normal; font-weight:800; }
.promo-purple { background:linear-gradient(135deg,#8170f2,#5142b8); }
.promo-orange { background:linear-gradient(135deg,#ff9969,#ef5d36); }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 0 10px; }
.section-head h2 { margin:0 0 4px; font:700 17px 'Space Grotesk',sans-serif; letter-spacing:-.3px; }
.section-head p { margin:0; color:var(--muted); font-size:10px; }
.quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-bottom:22px; }
.quick-card { min-height:110px; padding:12px; border:1px solid #edf0f6; border-radius:17px; background:#fff; text-align:left; box-shadow:0 4px 13px rgba(38,40,90,.035); }
.quick-card strong,.quick-card small { display:block; }
.quick-card strong { margin-top:10px; color:var(--ink); font-size:11px; }
.quick-card small { margin-top:4px; color:var(--muted); font-size:9px; }
.quick-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:11px; font-size:17px; }
.quick-icon.pink { color:#ea638e; background:#fff0f5; }.quick-icon.green { color:#0e9f6e; background:#e5f8f0; }.quick-icon.blue { color:#4f84dc; background:#eaf2ff; }.quick-icon.yellow { color:#c98d21; background:#fff5dc; }
.glance-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-bottom:16px; }
.glance-card { min-width:0; padding:13px; border:1px solid #edf0f6; border-radius:16px; background:#fff; text-align:left; box-shadow:0 4px 13px rgba(38,40,90,.035); }
.glance-card small,.glance-card span { display:block; color:var(--muted); font-size:9px; }
.glance-card strong { display:block; overflow:hidden; margin:8px 0 5px; color:var(--ink); font:700 16px 'Space Grotesk',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.glance-card span.positive { color:var(--green); }.glance-card span.warning { color:#c18425; }
.glance-grid.compact { margin:0; }.glance-grid.compact .glance-card strong { font-size:13px; }
.nearby-card { margin-top:8px; }.nearby-row { display:flex; align-items:center; gap:10px; width:100%; padding:12px 0; border:0; border-top:1px solid #f0f1f6; background:transparent; color:var(--ink); text-align:left; }.nearby-row:first-of-type { border-top:0; }.nearby-row > span:nth-child(2) { flex:1; min-width:0; display:grid; gap:3px; }.nearby-row strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.nearby-row small { overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.nearby-row > b { color:var(--ink); font-size:10px; }.nearby-row > em { color:var(--accent); font-size:18px; font-style:normal; }
.wide-button { width:100%; margin-top:8px; }.auth-features { display:flex; justify-content:space-between; gap:8px; margin-top:18px; color:var(--muted); font-size:9px; }
.help-list button { width:100%; padding:14px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; font-size:12px; }
.help-list button small { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.more-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.search-panel { max-width:720px; }.search-panel > .primary { margin-top:12px; }.search-results { display:grid; gap:8px; margin-top:18px; }.search-results button { padding:13px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); text-align:left; }
@media (max-width:700px) { .more-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.glovo-hero { min-height:145px; padding:19px; border-radius:21px; }.glovo-hero h2 { font-size:22px; }.hero-orb { width:60px; height:60px; font-size:28px; }.promo-card { min-height:125px; padding:13px; }.promo-card strong { font-size:15px; }.quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.quick-card { min-height:100px; }.glance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.glance-grid.compact { grid-template-columns:repeat(2,minmax(0,1fr)); }.auth-features { flex-wrap:wrap; }.auth-features span { flex:1 1 30%; }.content { padding-top:15px; }.page-head:has(+ .glovo-hero) { margin-bottom:12px; } }
@media (min-width: 901px) {
  .sidebar { display: flex; }
  .app-shell { display: flex; }
  .mobile-nav { display: none; }
  .main { min-width: 0; }
  .content { max-width: 1420px; padding: 34px 38px 48px; }
  .topbar { height: 77px; padding: 0 38px; position: static; }
  .breadcrumb { display: block; font-size: 12px; }
  .breadcrumb:before { display: none; }
  .breadcrumb strong { font-size: 14px; margin-top: 3px; }
  .top-actions .icon-btn:first-child { border: 1px solid var(--line); background: #fff; font-size: 14px; width: 35px; }
  .top-actions .icon-btn:nth-child(2) { display: block; }
  .avatar { border-radius: 12px; }
  .page-head { display: flex; align-items: flex-end; }
  .head-actions { width: auto; margin-top: 0; }
  .grid-main { grid-template-columns: 1.42fr .88fr; }
  .lower-grid { grid-template-columns: 1.2fr 1fr; }
  .worker-actions { grid-template-columns: repeat(4, 1fr); }
  .sale-products { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .stock-row { grid-template-columns: 2fr 1fr 1fr .8fr; }
  .stock-row > :nth-child(3), .stock-row > :nth-child(4) { display: block; }
}

/* ---------------------------------------------------------------------------
   CRITICAL: an animation on <body> leaves a transform on it with
   `animation-fill-mode: both`, which makes <body> the containing block for every
   `position: fixed` descendant. The modal backdrop and the toast were therefore
   laid out against the document box instead of the viewport, so dialogs opened
   off-screen at the bottom of a long page. The entrance animation now lives on
   the content wrapper instead, and <body> is pinned to `transform: none`.
   --------------------------------------------------------------------------- */
body { animation: none !important; transform: none !important; }
html { transform: none !important; }
.content, .auth-shell, .legal-shell, .page-404 { animation: hf-rise .35s ease-out both; }

/* ===========================================================================
   HARSIFY HARDENING PASS
   Closes the sizing / spacing / safe-area defects found in the audit.
   Appended last on purpose so these rules win the cascade.
   =========================================================================== */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-bar: 64px;          /* fixed part of the bottom navigation bar */
  --tap: 44px;
  --gap: 12px;
}

html { background: var(--canvas); -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: contain; }

/* D22 — :has() is unsupported on older Android WebView; add a plain sibling selector. */
.content > .page-head + .glovo-hero,
.page-head:has(+ .glovo-hero) { margin-bottom: 14px; }

/* ---------------------------------------------------------------------------
   The toast carried an entrance animation with `animation-fill-mode: both`.
   Under `prefers-reduced-motion` the duration collapses to 0.001ms, so the
   animation finished instantly and the fill kept the *final* keyframe — which
   is `opacity: 1`. The result was a dark, permanently visible bar sitting above
   the bottom navigation bar (the "notice on top of the menu bar" report), and
   it affected every device with Reduce Motion switched on. Visibility is now
   driven only by the `.show` class, never by an animation fill state.
   --------------------------------------------------------------------------- */
.toast { animation: none !important; visibility: hidden; opacity: 0; }
.toast.show { visibility: visible; opacity: 1; }
#toast:empty { display: none; }

/* D8 — loading indicator -------------------------------------------------- */
#loading-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .16s ease; }
#loading-bar.on { opacity: 1; }
#loading-bar i { display: block; height: 100%; width: 38%; border-radius: 0 3px 3px 0; background: var(--accent); animation: hf-loadslide 1s ease-in-out infinite; }
@keyframes hf-loadslide { 0% { margin-left: -38%; } 100% { margin-left: 100%; } }

/* D4 — notification badge becomes a real counter -------------------------- */
.icon-btn .dot {
  top: -4px; right: -4px; width: auto; min-width: 17px; height: 17px;
  border-radius: 9px; background: var(--orange); color: #fff;
  font-size: 9px; font-weight: 800; line-height: 17px; text-align: center;
  padding: 0 4px; box-shadow: 0 0 0 2px #fff;
}

/* D7 — inline validation -------------------------------------------------- */
.field-invalid { border-color: var(--red) !important; background: #fff7f8 !important; }
#modal .inline-error { margin-top: 4px; }
#modal .modal .form-grid { gap: 14px; }

/* D3 — supplier card is a real tap target --------------------------------- */
.supplier-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  width: 100%; max-width: 100%; box-sizing: border-box;
  padding: 12px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.supplier-row .row-actions {
  flex: 0 0 100%; width: 100%; margin-left: 0;
  display: flex; justify-content: flex-end; gap: 8px;
}
.supplier-row:last-child { border-bottom: 1px solid var(--line); margin-bottom: 0; }
.supplier-row:active { transform: scale(.995); }
.supplier-edit { flex: 0 0 auto; min-height: var(--tap); padding: 0 16px; }

/* Notifications screen ---------------------------------------------------- */
.notification-list { display: grid; gap: 8px; }
.notification-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px;
  padding: 12px; text-align: left; color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.notification-icon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px;
  display: grid; place-items: center; font-size: 16px;
  background: #fff3dc; color: #b8791f;
}
.notification-icon.good { background: var(--green-soft); color: var(--green); }
.notification-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.notification-main strong { font-size: 12px; }
.notification-main small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-row em { color: var(--accent); font-size: 18px; font-style: normal; }

/* Search results ---------------------------------------------------------- */
.search-actions { display: flex; gap: 10px; margin-top: 12px; }
.search-actions button { flex: 1 1 0; }
.search-group { margin-top: 18px; }
.search-group h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font: 700 11px 'Space Grotesk', sans-serif; letter-spacing: .8px;
  text-transform: uppercase; color: var(--muted);
}
.search-group h3 span { padding: 2px 7px; border-radius: 7px; font-size: 9px; background: var(--accent-soft); color: var(--accent); }
.search-row {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 60px;
  padding: 11px; margin-bottom: 8px; text-align: left; color: var(--ink);
  border: 1px solid var(--line); border-radius: 13px; background: #fff;
}
.search-row-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.search-row-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.search-row-main strong { font-size: 12px; }
.search-row-main small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-row em { color: var(--accent); font-size: 18px; font-style: normal; }

/* New-sale basket --------------------------------------------------------- */
.order-card { margin-top: 14px; }
.order-lines { display: grid; gap: 0; }
.order-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.order-name { font-size: 12px; font-weight: 600; }
.order-qty { display: flex; align-items: center; gap: 10px; }
.order-qty b { min-width: 22px; text-align: center; font-size: 13px; }
.qty-btn {
  width: var(--tap); height: var(--tap); padding: 0; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; color: var(--accent);
  font-size: 16px; font-weight: 700; display: grid; place-items: center;
}
.qty-btn:active { background: var(--accent-soft); }

@media (max-width: 900px) {
  /* D11 / D12 / D21 — safe-area sizing ---------------------------------- */
  body { padding-top: 0; padding-bottom: 0; }
  .topbar {
    position: sticky; top: 0; height: auto; min-height: 62px;
    padding: var(--safe-top) 16px 8px; align-items: center;
  }
  .content { padding: 16px 16px calc(var(--nav-bar) + var(--safe-bottom) + 28px); }
  /* D29 — the bar's real height has to equal --nav-bar + the safe area, because
     the toast and the content padding are both derived from that token. The
     controls inside the bar are 52px tall, so the padding may only total 12px.
     Previously it was 8px + (8px + safe), which made the bar 103px tall on a
     34px home indicator while the token claimed 64px — that mismatch is what
     left the toast sitting almost on top of the menu bar. */
  .mobile-nav {
    height: auto;
    min-height: calc(64px + var(--safe-bottom));
    padding: 5px 6px calc(6px + var(--safe-bottom));
    align-items: flex-start;
  }
  .mobile-nav button { min-height: 52px; min-width: 56px; padding: 2px; }
  .mobile-nav span { height: 26px; }

  /* D20 — the toast used to land on top of the menu bar ------------------ */
  .toast {
    left: 14px; right: 14px; bottom: calc(var(--nav-bar) + var(--safe-bottom) + 14px);
    text-align: center; transform: translateY(140%);
  }
  .toast.show { transform: none; }

  /* D13 — modals become bottom sheets that respect the home indicator ---- */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal, #modal .modal {
    width: 100%; max-width: 100%; max-height: 92svh;
    border-radius: 22px 22px 0 0;
    padding: 20px 18px calc(20px + var(--safe-bottom));
    animation: hf-sheetup .28s cubic-bezier(.2, .8, .2, 1) both;
  }
  @keyframes hf-sheetup { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
  .modal-head { margin-bottom: 14px; }
  .modal-head h2 { font-size: 18px; }
  .modal-foot { gap: var(--gap); margin-top: 20px; padding-top: 14px; }
  .modal-foot button { flex: 1 1 0; min-height: 48px; }

  /* D15 — fields need room and the Save button needs air ----------------- */
  .form-two { gap: var(--gap); }
  .form-grid { gap: 14px; }
  .form-grid + .primary, .form-grid + .secondary { display: block; width: 100%; margin-top: 18px; }
  .form-grid + .primary + .secondary, .form-grid + .secondary + .primary { display: block; width: 100%; margin-top: var(--gap); }

  /* D14 — Save profile / Sign out must not touch ------------------------- */
  .profile-actions { display: grid; gap: var(--gap); margin-top: 20px; }
  .profile-actions button { width: 100%; min-height: 48px; }
  .profile-card > .primary, .profile-card > .secondary { margin: 0; }

  /* D16 / D30 — Approve / Reject get their own row, but they must stay on the
     screen. The older unscoped `.row-actions { margin-left: 43px; width:
     calc(100% - 43px) }` still applied to this wrapped row, so it started 43px
     in, ran to x=404 on a 390px screen and the buttons were clipped by the card.
     Reset both properties here. */
  .operation-row { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; padding: 14px 0; }
  .operation-row .status { margin-left: auto; }
  .operation-row .row-actions {
    flex: 0 0 100%; width: auto; margin-left: 0;
    justify-content: flex-end; gap: 10px;
  }
  .operation-row .row-actions button { flex: 1 1 0; max-width: 160px; min-height: 44px; }

  /* D18 — inventory rows become tappable cards --------------------------- */
  .inventory-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 15px 0; }
  .inventory-row > .mini-icon { flex: 0 0 30px; }
  .inventory-row > .stock-main { flex: 1 1 120px; }
  .inventory-row > .inline-number { flex: 1 1 92px; display: block; }
  .inventory-row > .inline-number input { min-height: var(--tap); }
  .inventory-row > .inline-number:nth-of-type(2) { display: block; }
  .inventory-row > .stock-progress { display: block; flex: 1 1 100%; }
  .inventory-row > .more-btn { flex: 0 0 auto; margin-left: auto; min-height: var(--tap); padding: 0 18px; }

  /* Supplier search controls stack -------------------------------------- */
  .supplier-controls { grid-template-columns: 1fr; gap: 10px; }
  .supplier-controls input, .supplier-controls select, .supplier-controls button { grid-column: auto; min-height: 48px; }
  .quick-chips { display: flex; flex-wrap: wrap; gap: 8px; }

  /* Header action row: Back + primary never collide -------------------- */
  .head-actions { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
  .head-actions > * { flex: 1 1 auto; min-width: 0; }
  .head-actions > .back-button { flex: 0 0 auto; min-width: 104px; min-height: 44px; }

  /* Tap targets ---------------------------------------------------------
     D29 — four separate controls fell short of the 44px minimum:
       * `.icon-btn:first-child` (0,2,0) out-ranked `.icon-btn` (0,1,0), so the
         first header button stayed 30px wide and its badge overhung the box;
       * `.avatar` was pinned at 40px;
       * `.category` chips measured 42px;
       * `.quick-chips button` (0,1,1) overrode `.secondary`'s 44px floor at 34px;
       * `.text-link` is not only a "See all" label — it is also the Reject
         control on Requests, Returns and Approvals, and it measured 18px tall. */
  .primary, .secondary, .select, .more-btn, .close, .avatar,
  .icon-btn, .icon-btn:first-child, .icon-btn:nth-child(2),
  .top-actions .icon-btn:first-child, .top-actions .icon-btn:nth-child(2) { min-height: var(--tap); }
  /* The header buttons must be named with the same depth as the original
     `.top-actions .icon-btn:first-child` rule (0,3,0) to actually win. */
  .close, .avatar,
  .icon-btn,
  .top-actions .icon-btn:first-child, .top-actions .icon-btn:nth-child(2) { width: var(--tap); height: var(--tap); }
  .top-actions .icon-btn:first-child, .top-actions .icon-btn:nth-child(2) { border-radius: 12px; font-size: 17px; }
  .category { min-height: var(--tap); padding: 0 14px; }
  .quick-chips button { min-height: var(--tap); padding: 0 14px; }
  .text-link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 6px; }
  .row-actions button, .help-list button, .search-results button { min-height: var(--tap); }

  /* Screens without the shell ------------------------------------------- */
  .auth-shell { padding-top: calc(18px + var(--safe-top)); padding-bottom: calc(18px + var(--safe-bottom)); }
  .auth-brand { top: calc(18px + var(--safe-top)); }
  .legal-shell, .page-404 { padding-top: calc(24px + var(--safe-top)); padding-bottom: calc(24px + var(--safe-bottom)); }
}

@media (max-width: 400px) {
  .form-two { grid-template-columns: 1fr; }
  .head-actions { flex-direction: column-reverse; align-items: stretch; }
  .head-actions > .back-button { min-width: 0; }
  .content { padding-left: 13px; padding-right: 13px; }
}

/* v1.2 additions */
.policy-body p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--ink, #1c2033); }
.sale-cart-pick { display:block; margin: 14px 0 10px; }
.modal .secondary[data-action="modal-location"] { width: 100%; }

/* v1.3: backend connection */
.sync-chip { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; align-self: center; }
.sync-chip.ok { color: #0b7a4b; background: #e3f6ee; }
.sync-chip.wait { color: #9a6a00; background: #fff4dd; }
.sync-chip.off { color: #b03a2e; background: #fdecea; }
.server-details { margin: 4px 0 10px; font-size: 13px; }
.server-details summary { cursor: pointer; color: var(--muted, #5d647c); font-weight: 600; padding: 6px 0; }
.server-details input { width: 100%; margin-top: 6px; }
.server-details small { display: block; margin-top: 4px; color: var(--muted, #5d647c); }
.secret-box { font: 700 20px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; padding: 14px; border-radius: 12px; background: #f1f2f8; text-align: center; user-select: all; word-break: break-all; }
.inline-error[hidden] { display: none; }

/* v1.4 */
.pill-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; }
.pill { border: 1px solid var(--line, #e4e7f0); background: var(--card, #fff); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; white-space: nowrap; color: inherit; }
.pill.on { background: var(--accent, #7563e8); color: #fff; border-color: transparent; }
.glance-card strong.neg { color: #b03a2e; }
.operation-main small + small { display: block; }

/* ===========================================================================
   HARSIFY v1.9 COMPLETE MOBILE & EXPENSE STYLING PASS
   =========================================================================== */
/* Topbar & Header */
.topbar, .glovo-topbar {
  position: sticky; top: 0; z-index: 50;
  min-height: calc(56px + var(--safe-top));
  padding: calc(var(--safe-top) + 6px) 14px 8px !important;
  display: flex !important; align-items: center; justify-content: space-between;
  background: var(--surface, #fff); border-bottom: 1px solid var(--line);
}
.delivery-location {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 8px !important;
  background: transparent; border: none; cursor: pointer; color: var(--ink);
}
.delivery-location .pin {
  width: 32px; height: 32px; font-size: 15px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
}
.delivery-location small { display: block; font-size: 9px; letter-spacing: .5px; color: var(--muted); }
.delivery-location strong { display: block; font-size: 13px; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 8px !important; }
.icon-btn {
  width: var(--tap) !important; height: var(--tap) !important; min-height: var(--tap) !important;
  font-size: 17px !important; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); position: relative;
  display: grid; place-items: center; cursor: pointer;
}
.icon-btn .dot {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px;
  border-radius: 9px; background: var(--orange); color: #fff;
  font-size: 9px; font-weight: 800; line-height: 17px; text-align: center;
  padding: 0 4px; box-shadow: 0 0 0 2px var(--surface);
}
.avatar {
  width: var(--tap) !important; height: var(--tap) !important; min-height: var(--tap) !important;
  border-radius: 13px; font-size: 13px; font-weight: 700; border: 2px solid var(--accent);
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
}

/* Bottom Navigation */
.mobile-nav {
  height: auto !important;
  min-height: calc(64px + var(--safe-bottom)) !important;
  padding: 5px 6px calc(6px + var(--safe-bottom)) !important;
  background: var(--nav-bg, rgba(255,255,255,.97));
  border-top: 1px solid var(--line);
  display: flex !important; align-items: flex-start; justify-content: space-around;
}
.mobile-nav button {
  min-height: 52px !important; min-width: 54px !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 2px !important; background: transparent; border: none;
  color: var(--muted); cursor: pointer; font-size: 10px;
}
.mobile-nav button.active { color: var(--accent); font-weight: 700; }
.mobile-nav span { width: 28px; height: 22px; font-size: 17px; display: grid; place-items: center; }

/* Page Head & Buttons */
.content { padding: 14px 16px calc(var(--nav-bar) + var(--safe-bottom) + 24px) !important; }
.page-head {
  display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 14px !important;
}
.page-head h1 { font-size: 20px !important; margin: 0; letter-spacing: -.4px; }
.page-head p { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.primary, .secondary, .head-actions button, button[data-action] {
  min-height: var(--tap) !important; font-size: 13px !important; font-weight: 600;
  border-radius: 12px; padding: 0 16px; cursor: pointer;
}
.wide-button { width: 100% !important; min-height: 48px !important; }
.text-link {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 8px; font-size: 13px; font-weight: 600; color: var(--accent);
  background: none; border: none; cursor: pointer;
}

/* Home Glovo Elements */
.glovo-hero { margin-bottom: 12px; }
.glovo-search {
  height: 44px !important; min-height: 44px !important; padding: 0 14px !important;
  margin: 0 0 10px !important; font-size: 13.5px !important; border-radius: 14px !important;
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.category-strip { display: flex; gap: 8px; margin: 0 0 12px !important; overflow-x: auto; padding-bottom: 4px; }
.category-strip .category {
  min-height: var(--tap) !important; height: auto !important; padding: 0 14px !important;
  border-radius: 999px !important; font-size: 12.5px !important; font-weight: 600;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.category-strip .category.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.quick-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.quick-chips button, .quick-chips .secondary { min-height: var(--tap) !important; padding: 0 14px !important; border-radius: 10px; }

/* Operation Rows & Action Lists */
.operation-row {
  display: flex; flex-wrap: wrap; row-gap: 10px; align-items: flex-start;
  padding: 14px 0 !important; border-bottom: 1px solid var(--line);
}
.operation-row .status { margin-left: auto; }
.operation-row .row-actions {
  flex: 0 0 100%; width: 100%; margin-left: 0 !important;
  display: flex !important; justify-content: flex-end; gap: 10px !important;
}
.operation-row .row-actions button { min-height: var(--tap) !important; padding: 0 14px !important; flex: 1 1 0; max-width: 160px; }

/* ===========================================================================
   v1.9 EXPENSES UI/UX REDESIGN
   Spacious cards, clear icons, separated Edit/Remove buttons, no touching toggles
   =========================================================================== */
.expense-card-list { display: grid; gap: 12px; margin: 12px 0; }
.expense-card-item {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--card-shadow, 0 2px 8px rgba(0,0,0,.03));
  transition: transform .15s ease, box-shadow .15s ease;
}
.expense-card-item:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.expense-header-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.expense-title-group {
  display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1;
}
.expense-icon-bubble {
  width: 40px; height: 40px; border-radius: 12px; font-size: 18px;
  display: grid; place-items: center; flex: 0 0 40px;
  background: var(--accent-soft); color: var(--accent);
}
.expense-title-text { display: grid; gap: 2px; min-width: 0; }
.expense-title-text strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.expense-title-text small { font-size: 11.5px; color: var(--muted); }
.expense-amount-badge {
  font: 700 16px 'Space Grotesk', sans-serif; color: var(--ink); white-space: nowrap;
}
.expense-meta-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
  font-size: 11.5px; color: var(--muted);
}
.expense-cat-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  border-radius: 8px; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
}
.cat-rent { background: #fee2e2; color: #991b1b; }
.cat-salary, .cat-salaries { background: #e0e7ff; color: #3730a3; }
.cat-utilities, .cat-electricity, .cat-gas { background: #fef3c7; color: #92400e; }
.cat-insurance { background: #dbeafe; color: #1e40af; }
.cat-setup, .cat-opening { background: #f3e8ff; color: #6b21a8; }
.cat-other { background: #f1f5f9; color: #475569; }

.expense-actions-row {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 2px;
}
.expense-actions-row button {
  min-height: var(--tap) !important; padding: 0 16px !important;
  border-radius: 10px; font-size: 12.5px; font-weight: 600;
}
.btn-expense-remove {
  color: #dc2626 !important; border-color: #fca5a5 !important; background: #fff5f5 !important;
}
.btn-expense-remove:hover { background: #fee2e2 !important; }

/* ===========================================================================
   v1.9 CHARTS & VISUAL DASHBOARD
   =========================================================================== */
.chart-card {
  padding: 16px; margin: 12px 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px;
}
.chart-head-bar {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.chart-head-bar strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.chart-svg {
  width: 100%; height: auto; max-height: 240px; overflow: visible; display: block;
}

/* Date Range Bar & Calendar */
.date-filter-panel {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; margin: 10px 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.date-preset-pills {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
}
.date-preset-pills button {
  min-height: 38px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
  white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.date-preset-pills button.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.date-inputs-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.date-inputs-row label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted);
}
.date-inputs-row input[type="date"] {
  min-height: var(--tap); padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px;
}

/* Team Directory & Person Details */
.team-contact-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 8px; cursor: pointer; transition: transform .12s ease;
}
.team-contact-card:hover { transform: translateY(-1px); border-color: var(--accent); }
.team-contact-avatar {
  width: 44px; height: 44px; border-radius: 13px; flex: 0 0 44px;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--accent-soft); color: var(--accent);
}
.team-contact-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.team-contact-info strong { font-size: 13px; color: var(--ink); }
.team-contact-info small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* WhatsApp Button */
.wa-link-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 0 14px; border-radius: 10px;
  background: #25D366; color: #fff; font-size: 12.5px; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
}
.wa-link-btn:active { background: #128C7E; }

/* Cart Navigator & Swipe Row */
.cart-nav-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 10px 0; padding: 4px; background: var(--accent-soft); border-radius: 12px;
}
.cart-nav-btn {
  min-height: 40px !important; min-width: 40px !important; padding: 0 12px !important;
  border-radius: 10px; font-weight: 700; border: none; background: var(--surface); color: var(--accent);
}
.cart-nav-title { font-size: 13px; font-weight: 700; color: var(--ink); text-align: center; }

/* Financial KPI & Formula Highlights */
.kpi-formula-note {
  font-size: 10.5px; color: var(--muted); margin-top: 4px; line-height: 1.35;
  border-top: 1px dashed var(--line); padding-top: 4px;
}

/* Modals */
.modal { border-radius: 20px 20px 0 0; }
.modal-foot { display: flex; gap: 10px; margin-top: 16px; }
.modal-foot button { flex: 1; min-height: 48px !important; }

/* ===========================================================================
   v1.9.1 UI/UX fixes
   - Inside the Android app the native shell already pads for the status bar and
     navigation buttons, so the page must not add the same space a second time.
   - A blanket `button[data-action]` rule removed the vertical padding from every
     card-style button (More tiles, quick actions, stat cards).
   =========================================================================== */
html.in-app { --safe-top: 0px; --safe-bottom: 0px; }
html.in-app body { padding-top: 0; padding-bottom: 0; }

button[data-action].quick-card {
  display: grid; align-content: start; gap: 4px; text-align: left;
  height: auto; min-height: 92px; padding: 14px 14px 12px !important;
}
button[data-action].quick-card .quick-icon { margin-bottom: 2px; }
.more-grid + .card, .more-grid + section { margin-top: 16px; }
button[data-action].quick-card small { margin-top: 2px; }
button[data-action].glance-card { padding: 12px 14px !important; height: auto; }
button[data-action].nearby-row { padding: 12px 0 !important; height: auto; }

.topbar .avatar, .glovo-topbar .avatar {
  width: 40px !important; height: 40px !important; min-height: 40px !important;
  padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: var(--accent) !important; color: #fff !important;
  font-size: 13px; line-height: 1; letter-spacing: .3px;
}
.top-actions .icon-btn { padding: 0 !important; }

.file-pick {
  position: relative; overflow: hidden; display: inline-flex !important;
  align-items: center; justify-content: center; min-height: 44px;
  padding: 0 16px; white-space: nowrap; cursor: pointer;
}
.file-pick input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Last card on a page must never sit under the bottom navigation. */
.content::after { content: ""; display: block; height: 8px; }

/* Page headings: left-aligned title, action buttons on their own full-width row, no empty gap. */
.page-head { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; text-align: left; }
.page-head > div:first-child { text-align: left; min-width: 0; }
.page-head .head-actions { width: 100%; margin: 0 !important; justify-content: flex-start; }
.page-head .head-actions:empty { display: none; }
.page-head .head-actions > .primary { flex: 1 1 auto; }
.page-head .head-actions > button, .page-head .head-actions > .primary, .page-head .head-actions > .secondary { width: 100%; max-width: none; margin: 0; }

/* ===========================================================================
   v1.9.3 — layout fixes found on a real phone
   =========================================================================== */

/* -- Card-style buttons lost their padding to the blanket button[data-action] rule -- */
button[data-action].promo-card {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  height: auto; min-height: 124px; padding: 14px 14px 14px !important; text-align: left;
}
button[data-action].promo-card span { margin: 0; line-height: 1.2; }
button[data-action].promo-card strong { margin: 6px 0 10px; }
button[data-action].promo-card small { line-height: 1.2; }

/* -- Header: badge no longer clipped, avatar kept off the curved screen edge -- */
.icon-btn { overflow: visible !important; }
.icon-btn .dot { top: -5px !important; right: -5px !important; min-width: 18px; height: 18px; line-height: 18px; z-index: 2; }
.topbar, .glovo-topbar { padding-right: 18px !important; padding-left: 16px !important; }
.content { padding-top: 18px !important; }

/* -- Section headings with a link ("Quick actions" / "How it works") -- */
.section-head { gap: 10px; align-items: flex-end; }
.section-head .text-link, .text-link { flex: none; white-space: nowrap; }

/* -- Small buttons never wrap onto two lines; card actions share the width equally -- */
.card-head .secondary, .card-head .primary, .mini-edit { white-space: nowrap; flex: none; }
.card-head { gap: 10px; }

/* -- Rows (requests, approvals, activity): text first, buttons on their own tidy line -- */
.operation-row { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; }
.operation-row > .operation-main, .operation-row > div:not(.row-actions) { flex: 1 1 0; min-width: 0; }
.operation-row strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.operation-row small {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.4;
}
.operation-row .status { flex: none; margin-left: auto; align-self: flex-start; }
.operation-row .row-actions { flex: 1 1 100%; width: 100%; margin: 0 !important; flex-wrap: wrap; gap: 8px; }
.operation-row .row-actions button {
  flex: 1 1 calc(50% - 8px); max-width: none; min-width: 0; height: 44px; min-height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
.supplier-row .row-actions { flex-wrap: wrap; }

/* -- Settings: label on top, control full width, long links wrap -- */
.settings-list .setting-row { flex-direction: column; align-items: stretch; gap: 8px; }
.settings-list .setting-row > div { flex: none; width: 100%; min-width: 0; }
.settings-list .setting-row strong { font-size: 13px; }
.settings-list .setting-row small { font-size: 11px; line-height: 1.4; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; }
.settings-list .setting-row select, .settings-list .setting-row input:not([type="file"]) { width: 100%; }
.settings-list .setting-row > button, .settings-list .setting-row > label.secondary { align-self: stretch; }

/* -- Expense cards (their classes had no styles, so label and amount ran together) -- */
.expense-card-grid { display: grid; gap: 10px; }
.expense-card-item { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface, #fff); }
.expense-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.expense-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; background: var(--accent-soft); color: var(--accent); }
.expense-badge.rent { background: #eaf1ff; color: #2f5fc9; }
.expense-badge.salary { background: #e7f7ef; color: #0e7a55; }
.expense-badge.electricity, .expense-badge.gas, .expense-badge.water { background: #fff4de; color: #9a6410; }
.expense-badge.setup { background: #f1eaff; color: #6a45c8; }
.expense-amount { font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.expense-label { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.expense-meta { font-size: 11px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.expense-actions { display: flex; gap: 8px; margin-top: 4px; }
.expense-actions button { flex: 1 1 0; min-height: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 0 12px; }

/* -- Reports: chart bars, per-cart cards, date presets -- */
.fbars { display: grid; gap: 14px; padding: 4px 0 16px; }
.fbar { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: baseline; }
.fbar-label { font-size: 12px; font-weight: 600; color: var(--ink); }
.fbar-val { font-size: 12px; font-weight: 800; color: var(--ink); text-align: right; }
.fbar-val.neg { color: var(--red, #c93a4b); }
.fbar-track { grid-column: 1 / -1; height: 10px; border-radius: 6px; background: #eceef6; overflow: hidden; }
.fbar-track i { display: block; height: 100%; border-radius: 6px; }
.perf-list { display: grid; gap: 10px; }
.perf-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface, #fff); }
.perf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.perf-head strong { font-size: 13px; }
.perf-net { font-size: 13px; font-weight: 800; white-space: nowrap; }
.perf-net.pos, .perf-card .pos { color: var(--green, #0e9f6e); }
.perf-net.neg { color: var(--red, #c93a4b); }
.perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.perf-grid small { display: block; font-size: 10px; color: var(--muted); margin-bottom: 2px; }
.perf-grid b { font-size: 12px; }
.perf-grid em { font-style: normal; font-size: 10px; color: var(--muted); margin-left: 4px; }
.filter-card .pill-row { flex-wrap: wrap; overflow: visible; padding-bottom: 2px; }

/* -- Sign-in: logo above the card instead of underneath it; terms line reads as a sentence -- */
.auth-shell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.auth-brand { position: static !important; align-self: flex-start; margin: 0 4px; }
.consent-check { display: block !important; font-size: 12px; line-height: 1.6; }
.consent-check input { float: left; margin: 3px 8px 0 0 !important; width: 18px; height: 18px; }
.consent-check .inline-link { display: inline !important; min-height: 0 !important; height: auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; font-size: inherit !important; text-decoration: underline; }
.fbar-label { order: 1; } .fbar-val { order: 2; } .fbar-track { order: 3; }
.consent-check { margin: 8px 0 16px !important; }

/* ===========================================================================
   v1.9.4 — Sales screen, password toggle, sign out, biometric lock
   =========================================================================== */

/* Download report panel: tidy inputs, equal buttons with space above */
.export-card .form-two { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 4px; }
.export-card .form-two label { display: grid; gap: 6px; margin: 0; }
.export-card input[type="date"] { width: 100%; min-width: 0; box-sizing: border-box; min-height: 46px; }
.export-card .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.export-card .btn-row button { width: 100%; min-height: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; white-space: nowrap; font-size: 13px; }
.export-card > .card-sub:last-child { margin-top: 10px !important; }

/* Live transaction logs: cards instead of a wide table; selector on its own line */
.tx-head { flex-direction: column; align-items: stretch !important; gap: 12px; }
.tx-head select { width: 100%; }
.tx-list { display: grid; gap: 10px; margin-top: 4px; }
.tx-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface, #fff); display: grid; gap: 6px; }
.tx-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tx-top strong { font-size: 15px; }
.tx-profit { font-size: 12px; font-weight: 800; color: var(--green, #0e9f6e); white-space: nowrap; }
.tx-profit.neg { color: var(--red, #c93a4b); }
.tx-items { font-size: 13px; color: var(--ink); line-height: 1.4; overflow-wrap: anywhere; }
.tx-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--muted); }
.tx-meta span:not(:last-child)::after { content: ""; }
.card .empty-state { padding: 18px 8px; text-align: center; color: var(--muted); }

/* Show / hide password */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 74px !important; box-sizing: border-box; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 36px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--accent-soft, #eceaff); color: var(--accent, #5b45d6); font-weight: 800; font-size: 12px; cursor: pointer;
}
.auth-keep { margin: 10px 2px 0; font-size: 12px; color: var(--muted); text-align: center; }

/* Sign out */
.signout-card { margin-top: 14px; display: grid; gap: 8px; text-align: center; }
.signout-card .wide-button { width: 100%; min-height: 48px; }
.danger-action { color: var(--red, #c93a4b) !important; border-color: rgba(201, 58, 75, .35) !important; }

/* Biometric lock screen */
.bio-lock { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px; background: var(--bg, #f6f7fb); }
.bio-card { width: min(360px, 100%); display: grid; gap: 12px; text-align: center; padding: 28px 22px; border-radius: 22px; background: var(--surface, #fff); box-shadow: 0 18px 50px rgba(30, 20, 90, .15); }
.bio-card .brand-mark { margin: 0 auto 4px; }
.bio-card h2 { margin: 0; font-size: 20px; }
.bio-card p { margin: 0; color: var(--muted); font-size: 13px; }
.bio-card button { width: 100%; min-height: 48px; }
.bio-msg { min-height: 18px; color: var(--red, #c93a4b) !important; font-weight: 700; }
.pw-wrap input { margin: 0 !important; }
.app-version { text-align: center; font-size: 11px; color: var(--muted); margin: 14px 0 4px; }

/* ===========================================================================
   v1.9.6 — "Den" sign-in
   =========================================================================== */
.den-shell {
  position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(95, 120, 255, .28), transparent 60%),
    radial-gradient(700px 420px at 100% 10%, rgba(140, 90, 255, .22), transparent 60%),
    linear-gradient(180deg, #0e1330 0%, #131a3d 55%, #0b0f27 100%);
  color: #eef0ff; display: flex; justify-content: center; align-items: flex-start; padding: 0 20px 28px;
}
.den-wrap { width: min(400px, 100%); margin: auto; padding-top: 92px; position: relative; }
.mascot { position: relative; z-index: 1; width: 180px; height: 135px; margin: 0 auto -22px; --px: 0px; --py: 0px; }
.mascot-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.mascot .pupil { transform: translate(var(--px), var(--py)); transition: transform .18s ease-out; }
.mascot .hand { transition: transform .35s cubic-bezier(.3, 1.35, .5, 1); }
.mascot .eyes-happy { opacity: 0; transition: opacity .2s; }
.mascot.covered .hand-l { transform: translate(8px, -50px) rotate(8deg); }
.mascot.covered .hand-r { transform: translate(-8px, -50px) rotate(-8deg); }
.mascot.peek .hand-l { transform: translate(8px, -50px) rotate(8deg); }
.mascot.peek .hand-r { transform: translate(14px, -26px) rotate(-8deg); }
.mascot.happy .eyes { opacity: 0; }
.mascot.happy .eyes-happy { opacity: 1; }
.mascot .mouth { transition: d .2s; }
.mascot.happy .mouth { transform: translateY(2px) scaleX(1.2); transform-origin: 100px 118px; }

.den-card {
  position: relative; z-index: 2; border-radius: 28px; padding: 26px 22px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035));
  border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.den-title { margin: 6px 0 4px; text-align: center; font-size: 34px; font-weight: 800; letter-spacing: -1px; background: linear-gradient(90deg, #9db4ff, #c9b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.den-sub { margin: 0 0 20px; text-align: center; color: #b9bfdc; font-size: 14px; }

.den-field { position: relative; margin-bottom: 12px; }
.den-field input {
  width: 100%; box-sizing: border-box; height: 58px; padding: 22px 48px 6px 16px; border-radius: 16px; font-size: 16px; color: #fff;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.den-field input:focus { border-color: #8aa4ff; box-shadow: 0 0 0 3px rgba(138, 164, 255, .28); background: rgba(255, 255, 255, .1); }
.den-field label { position: absolute; left: 16px; top: 19px; font-size: 15px; color: #a9b0d2; pointer-events: none; transition: all .16s ease; transform-origin: left top; }
.den-field input:focus + label, .den-field input:not(:placeholder-shown) + label { top: 8px; font-size: 11px; color: #c9d3ff; letter-spacing: .3px; }
.den-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; min-height: 42px !important; padding: 0 !important;
  border: 0; background: transparent !important; color: #c9d3ff; display: grid; place-items: center; border-radius: 12px;
}
.den-eye svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.den-eye::after { content: ""; position: absolute; width: 24px; height: 2px; background: currentColor; transform: rotate(-40deg) scaleX(0); transition: transform .2s; border-radius: 2px; }
.den-eye.is-on::after { transform: rotate(-40deg) scaleX(1); }

.den-row { display: flex; justify-content: space-between; align-items: center; margin: 4px 2px 14px; gap: 10px; }
.den-check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #d6dbf5; cursor: pointer; }
.den-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.den-check i { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .35); display: grid; place-items: center; transition: all .15s; }
.den-check input:checked + i { background: #6f86ff; border-color: #6f86ff; }
.den-check input:checked + i::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg) translate(-1px, -1px); }
.den-link { background: transparent !important; border: 0 !important; color: #dfe4ff !important; font-size: 14px; padding: 6px 0 !important; min-height: 0 !important; height: auto !important; }

.den-card .server-details { margin: 0 0 12px; color: #c9cfe8; font-size: 13px; }
.den-card .server-details summary { cursor: pointer; font-weight: 700; color: #d6dbf5; }
.den-card .server-details input { width: 100%; box-sizing: border-box; margin-top: 8px; height: 48px; border-radius: 14px; padding: 0 14px; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.den-card .server-details small { display: block; margin-top: 6px; color: #9aa2c8; }
.den-card .consent-check { color: #c9cfe8; margin: 6px 0 14px !important; }
.den-card .consent-check .inline-link { color: #aab9ff !important; }
.den-card .consent-check input { accent-color: #6f86ff; }

.den-door {
  position: relative; width: 100%; height: 56px; min-height: 56px; padding: 0 20px !important; border: 0 !important; border-radius: 17px;
  display: flex !important; align-items: center; justify-content: space-between; overflow: hidden;
  background: linear-gradient(90deg, #5f86ff, #7a63ff) !important; color: #fff !important; font-size: 17px; font-weight: 800; box-shadow: 0 12px 28px rgba(95, 110, 255, .45);
}
.doorbtn__label { z-index: 2; }
.den-door-art { position: relative; width: 74px; height: 38px; flex: none; }
.dd-frame, .dd-panel { position: absolute; right: 0; bottom: 0; width: 30px; height: 40px; border-radius: 6px 6px 2px 2px; }
.dd-frame { background: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); opacity: .95; }
.dd-panel { background: linear-gradient(180deg, #9db6ff, #6d86f5); transform-origin: left center; transition: transform .38s cubic-bezier(.3, .9, .4, 1); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6) inset; }
.dd-person { position: absolute; left: 6px; bottom: 3px; width: 14px; height: 30px; color: #fff; transition: transform .5s ease-in, opacity .25s ease .3s; }
.dd-person svg { width: 100%; height: 100%; display: block; }
.den-door.dooropen .dd-panel { transform: perspective(120px) rotateY(-72deg); }
.den-door.walking .dd-person { transform: translateX(50px); }
.den-door.out .dd-person { opacity: 0; }
.den-door.walking .dd-person svg { animation: dd-step .26s steps(2) infinite; }
@keyframes dd-step { 50% { transform: translateY(-2px) rotate(3deg); } }

.den-card .auth-keep { color: #a9b0d2; margin-top: 12px; }
.den-card .auth-security-note { color: #8e96bd; font-size: 11.5px; line-height: 1.5; text-align: center; margin: 8px 0 0; }
.den-features { display: flex; justify-content: space-between; gap: 6px; margin-top: 16px; font-size: 11px; color: #8e96bd; }
.den-card .app-version { color: #6f7799; }

/* ===========================================================================
   v1.9.6 — floating bottom dock
   =========================================================================== */
body[data-nav="meniscus"] .mobile-nav, body[data-nav="glass"] .mobile-nav {
  left: 14px !important; right: 14px !important; bottom: calc(10px + var(--safe-bottom, 0px)) !important; height: 64px !important;
  border-radius: 26px; padding: 0 6px; align-items: center; justify-content: space-between; overflow: visible; border-top: 0;
}
body[data-nav="meniscus"] .content, body[data-nav="glass"] .content { padding-bottom: calc(var(--nav-bar, 64px) + var(--safe-bottom, 0px) + 44px) !important; }
body[data-nav] .mobile-nav button { position: relative; z-index: 2; flex: 1 1 0; min-width: 0; height: 100%; padding: 0 !important; display: grid; align-content: center; justify-items: center; gap: 3px; background: transparent !important; border: 0 !important; border-radius: 20px; }
body[data-nav="meniscus"] .mobile-nav button span, body[data-nav="glass"] .mobile-nav button span { background: transparent !important; width: auto; height: auto; }
body[data-nav] .mobile-nav .nav-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
body[data-nav] .mobile-nav small { font-size: 10px; font-weight: 700; }
.nav-ind { position: absolute; left: 0; z-index: 1; pointer-events: none; transition: transform .42s cubic-bezier(.3, 1.35, .5, 1); }

/* Meniscus: dark dock, a bead rides above the active tab */
body[data-nav="meniscus"] .mobile-nav { background: #15122b; box-shadow: 0 16px 34px rgba(18, 12, 60, .38), inset 0 1px 0 rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .06); }
body[data-nav="meniscus"] .mobile-nav button { color: #8f8ab4; }
body[data-nav="meniscus"] .mobile-nav button.active { color: #d9d3ff; }
body[data-nav="meniscus"] .mobile-nav button.active span { opacity: 0; }
body[data-nav="meniscus"] .mobile-nav button.active small { transform: translateY(8px); color: #cfc7ff; }
body[data-nav="meniscus"] .nav-ind {
  top: -20px; width: 54px; height: 54px; border-radius: 50%; pointer-events: auto; touch-action: none; cursor: grab;
  background: radial-gradient(circle at 35% 30%, #a99cff, var(--accent, #7563e8) 70%); color: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 7px var(--canvas, #f6f7fb), 0 10px 24px rgba(117, 99, 232, .5);
}
body[data-nav="meniscus"] .nav-ind.drag { cursor: grabbing; transform-origin: center; }
body[data-nav="meniscus"] .nav-ind span { display: grid; place-items: center; width: 100%; height: 100%; }
body[data-nav="meniscus"] .nav-ind .nav-ico { width: 24px; height: 24px; }

/* Liquid glass: frosted pill with a sliding highlight */
body[data-nav="glass"] .mobile-nav {
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%);
  box-shadow: 0 14px 36px rgba(55, 40, 140, .18), inset 0 1px 0 rgba(255, 255, 255, .9);
}
body[data-nav="glass"] .mobile-nav button { color: #5d5b7a; }
body[data-nav="glass"] .mobile-nav button.active { color: var(--accent, #7563e8); }
body[data-nav="glass"] .nav-ind { top: 7px; height: 50px; width: 66px; border-radius: 22px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px rgba(55, 40, 140, .16), inset 0 1px 0 #fff; }

/* Bottom-bar style picker in Profile */
.seg { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: var(--accent-soft, #eceaff); }
.seg button { flex: 1 1 0; min-height: 40px; height: 40px; padding: 0 8px !important; border: 0 !important; border-radius: 11px; background: transparent !important; font-weight: 800; font-size: 12px; color: var(--muted); }
.seg button.on { background: #fff !important; color: var(--accent) !important; box-shadow: 0 2px 8px rgba(40, 30, 120, .14); }
.mascot .hand { transform-box: fill-box; transform-origin: center; opacity: 0; transition: transform .35s cubic-bezier(.3, 1.35, .5, 1), opacity .2s; }
.mascot.covered .hand, .mascot.peek .hand { opacity: 1; }
.mascot.covered .hand-l, .mascot.peek .hand-l { transform: translate(8px, -50px); }
.mascot.covered .hand-r { transform: translate(-8px, -50px); }
.mascot.peek .hand-r { transform: translate(18px, -30px) rotate(-18deg); }
.mascot .hand circle { filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
body[data-nav="glass"] .mobile-nav { background: rgba(255, 255, 255, .66); }
body[data-nav="meniscus"] .nav-ind { z-index: 3; }

/* ===========================================================================
   v2.0 — redesign
   =========================================================================== */
button.v2-b, button.v2-b[data-action] { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; font-family: inherit; }
button.v2-b:focus-visible { outline: 2px solid #7563e8; outline-offset: 2px; }
.v2-top { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 16px 8px !important; gap: 10px; }
button.v2-b.v2-logo { width: 44px; height: 44px; display: block !important; }
button.v2-b.v2-logo svg { width: 44px; height: 44px; display: block; }
.v2-actions { display: flex; gap: 8px; align-items: center; }
button.v2-b.v2-ib { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #e3e5f0; color: #1f2140; display: inline-flex !important; align-items: center; justify-content: center; }
button.v2-b.v2-ib .i { width: 22px; height: 22px; }
button.v2-b.v2-av { background: var(--accent, #7563e8) !important; border: 0 !important; color: #fff !important; font: 800 14px system-ui; }
.v2-badge, .v2-bd { min-width: 20px; height: 20px; border-radius: 10px; background: #f36b3e; color: #fff; font: 800 11px/20px system-ui; text-align: center; padding: 0 5px; box-sizing: border-box; }
.v2-badge { position: absolute; top: -5px; right: -5px; }
.v2 svg.i, svg.i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2-chev { width: 18px !important; height: 18px !important; color: #8a8eaa; flex: none; transition: transform .2s; }
.v2-chev.open { transform: rotate(90deg); }
.v2-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 0 14px; }
.v2-title h1, .v2-dh h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.6px; }
.v2-title p { margin: 2px 0 0; font-size: 13px; color: #6b6f8d; }
button.v2-b.v2-pill { height: 44px; padding: 0 18px; border-radius: 22px; background: var(--accent, #7563e8); color: #fff; font: 800 14px/44px system-ui; white-space: nowrap; display: inline-block; }
.v2-card { background: #fff; border: 1px solid #e3e5f0; border-radius: 20px; padding: 16px; margin: 0 0 12px; box-shadow: none; }
.v2-list { padding: 4px 16px; } .v2-clist { padding: 2px 16px; }
.v2-stack { display: grid; gap: 12px; } .v2-stack > .card, .v2-stack > section { margin: 0 !important; }
.v2-sec { font-size: 12px; letter-spacing: 1.2px; font-weight: 800; color: #6b6f8d; margin: 16px 4px 8px; } .v2-sec.in { margin: 0 0 4px; }
button.v2-b.v2-row { display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 54px; text-align: left; color: #1f2140; }
button.v2-b.v2-row + button.v2-b.v2-row, button.v2-b.v2-nr + button.v2-b.v2-nr, button.v2-b.v2-nr + .v2-addr, .v2-addr + button.v2-b.v2-nr { border-top: 1px solid #eceef6; }
button.v2-b.v2-row.static { cursor: default; }
.v2-ic { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.v2-ic.pin { background: #ece9ff; color: #7563e8; } .v2-ic .i { width: 20px; height: 20px; }
.v2-rt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.v2-rt b { font-size: 15px; font-weight: 700; color: #1f2140; } .v2-rt small { font-size: 12px; color: #6b6f8d; margin-top: 1px; overflow-wrap: anywhere; }
.v2-empty { padding: 18px 8px; text-align: center; color: #6b6f8d; font-size: 14px; }

/* Home */
.v2-hero { background: #2c1fa6; color: #fff; border-radius: 24px; padding: 18px 20px; margin-top: 4px; }
.v2-hr { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: 1.3px; font-weight: 800; opacity: .95; }
button.v2-b.v2-hl { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0; padding: 8px 0 8px 8px; } button.v2-b.v2-hl.dark { color: #5b45d6; }
.v2-big { font-size: 34px; font-weight: 800; letter-spacing: -1px; margin: 4px 0 12px; }
.v2-hs { display: flex; gap: 10px; } .v2-hs > div { flex: 1; background: rgba(255, 255, 255, .14); border-radius: 14px; padding: 10px 12px; }
.v2-hs small { display: block; font-size: 11px; opacity: .8; } .v2-hs b { font-size: 15px; }
.v2-qas { display: flex; justify-content: space-between; margin: 14px 4px 0; }
button.v2-b.v2-qa { display: flex !important; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #1f2140; min-width: 72px; }
button.v2-b.v2-qa span { width: 56px; height: 56px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; } button.v2-b.v2-qa .i { width: 24px; height: 24px; }
.v2-sh { display: flex; justify-content: space-between; align-items: center; margin: 18px 4px 8px; font-size: 17px; }
button.v2-b.v2-cr { display: block !important; width: 100%; padding: 12px 0; text-align: left; color: #1f2140; } button.v2-b.v2-cr + button.v2-b.v2-cr { border-top: 1px solid #eceef6; }
button.v2-b.v2-cr { display: grid !important; grid-template-columns: 1fr auto; gap: 8px 10px; } button.v2-b.v2-cr .v2-bar { grid-column: 1 / -1; }
.v2-crt { display: flex; flex-direction: column; min-width: 0; } .v2-crt b { font-size: 15px; } .v2-crt small { font-size: 12px; color: #6b6f8d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-amt { font-size: 15px; white-space: nowrap; }
.v2-bar { height: 8px; border-radius: 4px; background: #eceef6; overflow: hidden; } .v2-bar i { display: block; height: 100%; border-radius: 4px; }

/* Welcome */
.v2-welcome { position: fixed; inset: 0; overflow-y: auto; background: #f6f7fb; padding: 56px 20px 32px; display: flex; flex-direction: column; color: #1f2140; z-index: 50; }
.v2-wk { font-size: 12px; letter-spacing: 1.4px; font-weight: 800; color: #6b6f8d; }
.v2-welcome h1 { margin: 12px 0 6px; font-size: 38px; line-height: 1.05; font-weight: 800; letter-spacing: -1px; }
.v2-welcome p { margin: 0 0 26px; font-size: 16px; color: #6b6f8d; }
.v2-wtiles { display: grid; gap: 12px; }
button.v2-b.v2-wt { display: block !important; width: 100%; padding: 18px; border-radius: 20px; color: #fff; text-align: left; } button.v2-b.v2-wt i { display: block; font: 800 12px system-ui; letter-spacing: 1.2px; opacity: .85; font-style: normal; }
button.v2-b.v2-wt b { display: block; font-size: 19px; line-height: 1.2; margin: 6px 0; } button.v2-b.v2-wt span { font-size: 12px; font-weight: 700; opacity: .92; }
button.v2-b.v2-wt.o { background: #f36b3e; } button.v2-b.v2-wt.p { background: #4a37d6; } button.v2-b.v2-wt.d { background: #15122b; }
.v2-wslogan { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding: 24px 0 18px; font-size: 15px; font-weight: 700; color: #6b6f8d; }
button.v2-b.v2-wgo { display: block !important; height: 58px; border-radius: 18px; background: #7563e8; color: #fff; font: 800 17px/58px system-ui; text-align: center; }

/* Carts */
.v2-cc { display: grid; gap: 14px; padding: 16px; }
button.v2-b.v2-cch { display: flex !important; align-items: center; gap: 12px; text-align: left; width: 100%; color: #1f2140; }
.v2-st { font: 700 11px system-ui; padding: 5px 10px; border-radius: 999px; white-space: nowrap; display: inline-block; } .v2-st.ok { background: #e3f7ea; color: #0a7a3e; } .v2-st.warn { background: #fff0d6; color: #a8660f; }
.v2-stats { display: flex; gap: 8px; } .v2-stats > div { flex: 1; min-width: 0; } .v2-stats .s { flex: .5; }
.v2-stats small { display: block; font-size: 11px; color: #6b6f8d; } .v2-stats b { font-size: 14px; }
.v2-acts { display: flex; gap: 8px; }
button.v2-b.v2-wa { position: relative; width: 46px; height: 46px; border-radius: 14px; background: #e3f7ea; color: #0a7a3e; display: inline-flex !important; align-items: center; justify-content: center; flex: none; } button.v2-b.v2-wa i { position: absolute; right: 5px; bottom: 3px; font: 800 9px system-ui; font-style: normal; }
button.v2-b.v2-open { flex: 1; height: 46px; border-radius: 14px; background: #7563e8; color: #fff; font: 800 14px/46px system-ui; text-align: center; display: block !important; }
button.v2-b.v2-ghost { display: block !important; height: 44px; margin-top: 8px; border-radius: 12px; border: 1px solid #e3e5f0; text-align: center; font: 700 14px/42px system-ui; color: #1f2140; }

/* Cart detail */
.v2-dh { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; } .v2-dh h1 { font-size: 19px; letter-spacing: -.3px; }
.v2-chips, .v2-fchips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; } .v2-chips::-webkit-scrollbar, .v2-fchips::-webkit-scrollbar { display: none; } .v2-fchips.wrap { flex-wrap: wrap; overflow: visible; }
button.v2-b.v2-chip, button.v2-b.v2-fc { height: 40px; padding: 0 16px; border-radius: 20px; background: #fff; border: 1px solid #e3e5f0; font: 700 13px/38px system-ui; white-space: nowrap; color: #1f2140; flex: none; display: inline-block; }
button.v2-b.v2-chip.on, button.v2-b.v2-fc.on { background: #7563e8 !important; border-color: #7563e8; color: #fff !important; }
.v2-kpis { display: flex; gap: 10px; margin-bottom: 12px; } button.v2-b.v2-k { flex: 1; display: block !important; background: #fff; border: 1px solid #e3e5f0; border-radius: 18px; padding: 14px; color: #1f2140; text-align: left; }
button.v2-b.v2-k small { display: block; font-size: 11px; color: #6b6f8d; } button.v2-b.v2-k b { display: block; font-size: 17px; margin-top: 3px; } button.v2-b.v2-k em { font: 700 11px system-ui; color: #5b45d6; font-style: normal; }
.v2-person { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .v2-person + .v2-person { border-top: 1px solid #eceef6; }
.v2-av2 { width: 42px; height: 42px; border-radius: 50%; background: #ece9ff; color: #5b45d6; font: 800 14px/42px system-ui; text-align: center; flex: none; } .v2-av2.alt { background: #ffeadf; color: #c2501f; }
button.v2-b.v2-chatb { height: 44px; padding: 0 14px; border-radius: 14px; background: #25a35a; color: #fff; font: 800 13px system-ui; display: inline-flex !important; align-items: center; gap: 6px; } button.v2-b.v2-chatb .i { width: 18px; height: 18px; }
.v2-loc { display: flex; gap: 14px; align-items: center; } .v2-map { width: 76px; height: 76px; border-radius: 16px; background: #e4ecff; color: #4a5fd6; display: flex; align-items: center; justify-content: center; flex: none; } .v2-map .i { width: 32px; height: 32px; }
.v2-links { display: flex; gap: 14px; margin-top: 6px; font-size: 13px; font-weight: 800; color: #5b45d6; } .v2-links a { color: #5b45d6; text-decoration: none; padding: 8px 0; } button.v2-b.v2-lk { color: #5b45d6; padding: 8px 0; }
.v2-ch { display: flex; justify-content: space-between; align-items: center; font-size: 16px; } .v2-sub { display: block; color: #6b6f8d; font-size: 12px; margin: 4px 0 8px; }
.v2-lb { display: block; font-size: 12px; font-weight: 700; color: #6b6f8d; margin-top: 8px; }
.v2-f { display: flex; align-items: center; gap: 6px; min-height: 48px; border-radius: 14px; background: #f6f7fb; border: 1px solid #e3e5f0; padding: 0 8px 0 14px; margin-top: 6px; } .v2-f > span { flex: 1; font-size: 15px; overflow-wrap: anywhere; } button.v2-b.v2-fb { min-height: 44px; padding: 0 8px; color: #5b45d6; font: 800 13px/44px system-ui; }
button.v2-b.v2-nr { display: flex !important; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; font-size: 15px; color: #1f2140; }
.v2-addr { display: grid; gap: 10px; padding: 4px 0 14px; } .v2-addr label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: #6b6f8d; } .v2-addr input { height: 46px; border-radius: 12px; border: 1px solid #e3e5f0; padding: 0 12px; font-size: 15px; background: #f6f7fb; color: #1f2140; } .v2-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Sales / Inventory */
.v2-seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #e9e8fb; margin-bottom: 12px; } .v2-seg button { flex: 1; height: 40px; border-radius: 11px; text-align: center; font: 800 13px/40px system-ui; color: #6b6f8d; } .v2-seg button.on { background: #fff; color: #5b45d6; box-shadow: 0 2px 8px rgba(40, 30, 120, .14); }
.v2-selrow { display: flex; gap: 8px; margin-bottom: 12px; } .v2-selrow select { flex: 1; min-width: 0; height: 44px; border-radius: 14px; border: 1px solid #e3e5f0; background: #fff; padding: 0 12px; font: 700 14px system-ui; color: #1f2140; }
.v2-it { padding: 14px; display: grid; gap: 12px; } .v2-ith { display: flex; align-items: center; gap: 12px; } .v2-tag { font: 800 11px system-ui; padding: 5px 10px; border-radius: 999px; }
button.v2-b.v2-restock { display: block !important; height: 44px; border-radius: 13px; text-align: center; font: 800 14px/44px system-ui; } .v2-okline { font-size: 12px; color: #0a7a3e; font-weight: 700; }

/* Profile */
.v2-prof { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 6px 0 4px; } .v2-prof b { font-size: 20px; } .v2-av3 { width: 76px; height: 76px; border-radius: 50%; background: #7563e8; color: #fff; font: 800 28px/76px system-ui; }
.v2-kvs { padding: 0 16px; } .v2-kv { display: flex; align-items: center; gap: 10px; min-height: 54px; } .v2-kv + .v2-kv { border-top: 1px solid #eceef6; } .v2-kv span { width: 86px; font-size: 13px; color: #6b6f8d; flex: none; } .v2-kv input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 15px; font-weight: 600; color: #1f2140; padding: 12px 0; outline: none; }
.v2-hint { text-align: center; font-size: 12px; color: #8a8eaa; margin: 2px 0 0; }
.v2-signout { margin-top: 14px; } button.v2-b.v2-so { display: block !important; height: 48px; border-radius: 14px; border: 1px solid rgba(201, 58, 75, .35); color: #c93a4b; text-align: center; font: 800 15px/46px system-ui; width: 100%; }

/* Search overlay */
.v2-search { position: fixed; inset: 0; z-index: 900; background: #f6f7fb; overflow-y: auto; padding: 14px 16px 40px; color: #1f2140; }
.v2-sbar { display: flex; align-items: center; gap: 12px; } .v2-sin { flex: 1; display: flex; align-items: center; gap: 10px; height: 48px; border-radius: 24px; background: #fff; border: 2px solid #7563e8; padding: 0 16px; box-shadow: 0 0 0 4px rgba(117, 99, 232, .15); color: #8a8eaa; }
.v2-sin input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: #1f2140; }
button.v2-b.v2-cancel { color: #5b45d6; font: 700 15px/44px system-ui; padding: 0 4px; } .v2-sres { margin-top: 8px; }
html.in-app .v2-search, html.in-app .v2-welcome { top: 0; }
body[data-nav] .mobile-nav { z-index: 40; }
button.v2-b.v2-wa .i { width: 22px; height: 22px; }
.v2-row.static { display: flex; align-items: center; gap: 12px; min-height: 54px; width: 100%; box-sizing: border-box; }
.v2-row.static + .v2-row.static { border-top: 1px solid #eceef6; }
.v2-sin .i { width: 22px; height: 22px; flex: none; }
.v2-sin input[type="search"]::-webkit-search-cancel-button { appearance: none; }
.v2-sin input { padding: 0 !important; }

/* ===========================================================================
   v2.1 — three sign-in screens, loader, Carts map header
   =========================================================================== */
@keyframes v3fall { 0% { transform: translateY(-70px) rotate(0); opacity: 0 } 15% { opacity: 1 } 55%, 80% { transform: translateY(62px) rotate(200deg); opacity: 1 } 100% { transform: translateY(70px) rotate(220deg); opacity: 0 } }
@keyframes v3flap { 0%, 55% { transform: scaleY(1) } 70%, 85% { transform: scaleY(.45) } 100% { transform: scaleY(1) } }
@keyframes v3roll { to { transform: rotate(360deg) } }
@keyframes v3drive { from { offset-distance: 0% } to { offset-distance: 100% } }
@keyframes v3ping { 0% { transform: scale(.4); opacity: .9 } 100% { transform: scale(2.6); opacity: 0 } }
@keyframes v3dash { to { stroke-dashoffset: -24 } }
@keyframes v3run { from { transform: translateX(-46px) } to { transform: translateX(58px) } }
@keyframes v3slip { 0% { transform: translateY(-110%) } 22%, 100% { transform: translateY(0) } }
@keyframes v3stamp { 0%, 40% { transform: scale(2.6) rotate(-18deg); opacity: 0 } 52% { transform: scale(.92) rotate(-9deg); opacity: 1 } 60%, 100% { transform: scale(1) rotate(-9deg); opacity: 1 } }
.v3-ing { animation: v3fall 4.2s ease-in infinite; opacity: 0; }
.v3-flap { transform-box: fill-box; transform-origin: center bottom; animation: v3flap 4.2s ease-in-out infinite; }
.v3-spin { width: 26px; height: 26px; animation: v3roll 1.4s linear infinite; flex: none; }
.v3-ring { transform-box: fill-box; transform-origin: center; animation: v3ping 2.2s ease-out infinite; }
.v3-dash { stroke-dasharray: 8 8; animation: v3dash 1s linear infinite; }
.v3-cartm { offset-rotate: 0deg; animation: v3drive 8s linear infinite; }

.v3 { position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; color: #1f2140; }
.v3 * { box-sizing: border-box; }
.v3-t { margin: 4px 0 4px; text-align: center; font-size: 32px; font-weight: 800; letter-spacing: -1px; }
.v3-s { margin: 0 0 18px; text-align: center; color: #6b6f8d; font-size: 14px; }
.v3-field { position: relative; margin-bottom: 12px; }
.v3-field input { width: 100%; height: 58px; padding: 22px 48px 6px 16px; border-radius: 16px; font-size: 16px; color: #1f2140; background: #fff; border: 1px solid var(--v3b, #e3e5f0); outline: none; transition: border-color .2s, box-shadow .2s; }
.v3-field input:focus { border-color: var(--v3a); box-shadow: 0 0 0 3px var(--v3g); }
.v3-field label { position: absolute; left: 16px; top: 19px; font-size: 15px; color: #8a8eaa; pointer-events: none; transition: all .16s ease; }
.v3-field input:focus + label, .v3-field input:not(:placeholder-shown) + label { top: 8px; font-size: 11px; color: var(--v3a); font-weight: 700; letter-spacing: .3px; }
.v3 .den-eye { color: var(--v3a); }
.v3-row { display: flex; justify-content: space-between; align-items: center; margin: 4px 2px 14px; gap: 10px; }
.v3-check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.v3-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.v3-check i { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid #b9bcd2; display: grid; place-items: center; background: #fff; flex: none; }
.v3-check input:checked + i { background: var(--v3a); border-color: var(--v3a); }
.v3-check input:checked + i::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg) translate(-1px, -1px); }
.v3-link { all: unset; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--v3a); padding: 8px 0; }
.v3 .server-details { margin: 0 0 12px; font-size: 13px; color: #6b6f8d; } .v3 .server-details summary { cursor: pointer; font-weight: 700; color: #4a4d6a; }
.v3 .server-details input { width: 100%; margin-top: 8px; height: 48px; border-radius: 14px; padding: 0 14px; border: 1px solid #e3e5f0; background: #fff; color: #1f2140; }
.v3 .consent-check { margin: 6px 0 14px !important; color: #4a4d6a; font-size: 12.5px; } .v3 .consent-check .inline-link { color: var(--v3a) !important; }
.v3-go { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; border-radius: 18px; color: #fff; font: 800 17px system-ui; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.v3 .auth-keep { margin: 12px 0 0; text-align: center; font-size: 12px; color: #8a8eaa; } .v3 .auth-security-note { margin: 8px 0 0; text-align: center; font-size: 11.5px; color: #8a8eaa; line-height: 1.5; } .v3 .app-version { color: #a3a6bd; text-align: center; font-size: 11px; margin: 10px 0 0; }

/* D — Wrap it up */
.v3-wrapp { --v3a: #c2501f; --v3g: rgba(243, 107, 62, .22); --v3b: #f0dfc4; background: linear-gradient(180deg, #ffe8c4, #fff6e8 40%, #fff); }
.v3-wrapp .v3-in { width: min(400px, 100%); margin: 0 auto; padding: 30px 20px 30px; display: flex; flex-direction: column; align-items: center; }
.v3-wrapp .v3-pita { overflow: visible; margin-bottom: 4px; }
.v3-wrapp .v3-card { width: 100%; background: #fffdf8; border: 1px solid #f0dfc4; border-radius: 28px; padding: 22px 20px 20px; box-shadow: 0 22px 46px rgba(150, 90, 20, .14); }
.v3-wrapp .v3-t { color: #c2501f; } .v3-wrapp .v3-s { color: #8a7a5f; }
.v3-go-wrap { background: linear-gradient(90deg, #f36b3e, #ff9a3c); box-shadow: 0 12px 26px rgba(243, 107, 62, .4); }
.v3-wrapp.go .v3-flap { animation: v3flap .7s ease-in-out 1; } .v3-wrapp.go .v3-ing { animation-duration: 1.2s; }

/* E — Route map */
.v3-routep { --v3a: #4a37d6; --v3g: rgba(74, 55, 214, .2); background: #e4ecff; display: flex; flex-direction: column; }
.v3-map { width: 100%; height: 300px; flex: none; display: block; }
.v3-sheet { position: relative; flex: 1; margin-top: -10px; background: #fff; border-radius: 30px 30px 0 0; padding: 26px 22px 28px; box-shadow: 0 -14px 40px rgba(70, 90, 200, .16); max-width: 520px; width: 100%; align-self: center; }
.v3-sheet .v3-t, .v3-sheet .v3-s { text-align: left; } .v3-sheet .v3-t { font-size: 30px; }
.v3-go-route { background: #4a37d6; box-shadow: 0 12px 26px rgba(74, 55, 214, .38); }
.v3-rline { position: relative; width: 60px; height: 24px; display: inline-flex; align-items: center; } .v3-rline svg:first-child { width: 56px; height: 12px; }
.v3-rcart { position: absolute; left: 0; top: -2px; width: 26px; height: 22px; opacity: 0; }
.v3-routep.go .v3-rcart { opacity: 1; animation: v3run .75s linear forwards; }

/* F — Receipt */
.v3-receiptp { --v3a: #5b45d6; background: #ece9ff; }
.v3-receiptp .v3-in { width: min(400px, 100%); margin: 0 auto; padding: 26px 22px 30px; }
.v3-slot { height: 30px; border-radius: 15px; background: #1f2140; position: relative; z-index: 2; box-shadow: 0 8px 18px rgba(31, 33, 64, .3); } .v3-slot i { position: absolute; left: 18px; right: 18px; top: 12px; height: 6px; border-radius: 3px; background: #0b0c1f; }
.v3-clip { margin: -6px 12px 0; overflow: hidden; padding-bottom: 22px; }
.v3-slip { position: relative; background: #fffdf5; padding: 28px 18px 30px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; box-shadow: 0 10px 24px rgba(40, 30, 120, .12); animation: v3slip 1.2s cubic-bezier(.2, .8, .2, 1) 1 both;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 95% 100%, 90% calc(100% - 12px), 85% 100%, 80% calc(100% - 12px), 75% 100%, 70% calc(100% - 12px), 65% 100%, 60% calc(100% - 12px), 55% 100%, 50% calc(100% - 12px), 45% 100%, 40% calc(100% - 12px), 35% 100%, 30% calc(100% - 12px), 25% 100%, 20% calc(100% - 12px), 15% 100%, 10% calc(100% - 12px), 5% 100%, 0 calc(100% - 12px)); }
.v3-rt { text-align: center; font-weight: 800; font-size: 20px; letter-spacing: 3px; } .v3-rs { text-align: center; font-size: 10.5px; color: #6b6f8d; letter-spacing: 1.5px; margin-bottom: 10px; }
.v3-rw { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 2px dotted #c9c3b0; padding: 8px 0; font-size: 14px; } .v3-rw.nb { border: 0; }
.v3-rw span { color: #6b6f8d; flex: none; } .v3-rw input { flex: 1; min-width: 0; border: 0; background: transparent; text-align: right; font: 700 14px ui-monospace, Menlo, monospace; color: #1f2140; outline: none; padding: 4px 36px 4px 0; }
.v3-receiptp .den-eye { right: -6px; top: 50%; width: 36px; height: 36px; min-height: 36px !important; }
.v3-dsh { border-top: 2px dashed #c9c3b0; margin: 6px 0 12px; padding-top: 10px; }
.v3-go-receipt { background: #1f2140; border-radius: 14px; height: 54px; font-family: ui-monospace, Menlo, monospace; letter-spacing: 2px; }
.v3-stamp { position: absolute; right: 14px; top: 130px; border: 4px solid #d3345d; color: #d3345d; font: 900 26px ui-monospace, Menlo, monospace; letter-spacing: 3px; padding: 4px 12px; border-radius: 8px; transform: rotate(-9deg); opacity: 0; pointer-events: none; }
.v3-receiptp.go .v3-stamp { animation: v3stamp .7s ease-out forwards; }
.v3-fine .auth-keep, .v3-fine .auth-security-note, .v3-fine .app-version { font-size: 10.5px; }

/* loader */
.v3-load { position: fixed; inset: 0; z-index: 1000; background: linear-gradient(180deg, #ffe8c4, #fff6e8 55%, #fff); display: grid; place-items: center; text-align: center; color: #8a7a5f; font: 700 15px system-ui; }
.v3-load p { margin: 6px 0 0; } .v3-load .v3-pita { overflow: visible; }

/* Carts map header */
.v3-rhead { height: 110px; margin: 2px 0 14px; border-radius: 22px; overflow: hidden; background: #e4ecff; border: 1px solid #d3def7; } .v3-rhead svg { width: 100%; height: 100%; display: block; }
.v3-seg { flex-wrap: wrap; } .v3-seg button { flex: 1 1 40% !important; }
.v3-cnote { background: #fff4de; color: #8a5a0a; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.4; margin: 0 0 12px; font-weight: 600; } #set-rate { width: 100%; height: 46px; border-radius: 12px; border: 1px solid #e3e5f0; padding: 0 12px; font-size: 15px; }
.v22-rate { position: fixed; inset: 0; z-index: 1200; background: rgba(20, 18, 43, .55); display: grid; place-items: center; padding: 20px; }
.v22-card { width: min(380px, 100%); background: #fff; border-radius: 22px; padding: 22px 20px 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); color: #1f2140; display: grid; gap: 10px; }
.v22-card h2 { margin: 0; font-size: 19px; } .v22-card p { margin: 0; font-size: 14px; color: #4a4d6a; line-height: 1.45; }
.v22-card label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: #6b6f8d; }
.v22-card input { height: 52px; border-radius: 14px; border: 2px solid #7563e8; padding: 0 14px; font-size: 18px; font-weight: 700; color: #1f2140; outline: none; }
.v22-card small { color: #6b6f8d; font-size: 12px; }
.v22-btns { display: flex; gap: 10px; margin-top: 4px; }
.v22-btns button { flex: 1; height: 48px; border-radius: 14px; border: 1px solid #e3e5f0; background: #fff; font: 800 15px system-ui; color: #1f2140; }
.v22-btns .v22-save { background: #7563e8; border-color: #7563e8; color: #fff; }

/* =====================================================================================================
   v2.2.2 — popups above the menu bar, scrolling forms with a visible Save, receipt sheet, printer
   ===================================================================================================== */
.toast { z-index: 70; }
.hs-sr { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
body.hs-kb .mobile-nav { display: none !important; }

@media (max-width: 900px) {
  /* The popup area ends exactly where the menu bar starts (measured in app.js), so the bar is never covered
     and stays tappable. With the keyboard open the bar is hidden and the popup uses the whole height. */
  .modal-backdrop { inset: 0 0 var(--hs-nav-h, 0px) 0 !important; z-index: 60; align-items: flex-end; padding: 0; }
  .modal, #modal .modal {
    max-height: min(100%, calc(100svh - var(--hs-nav-h, 0px) - 10px)) !important;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-bottom: 0 !important;
  }
  .modal-head { position: sticky; top: 0; z-index: 3; background: #fff; margin: 0 -18px 12px; padding: 4px 18px 8px; }
  .modal-foot {
    position: sticky; bottom: 0; z-index: 3; background: #fff;
    margin: 16px -18px 0 !important; padding: 12px 18px calc(12px + var(--hs-foot-safe, 0px)) !important;
    box-shadow: 0 -8px 16px rgba(20, 18, 43, .06);
  }
}

/* receipt + printer sheets, image viewer */
.hs-sheet { position: fixed; inset: 0; z-index: 1250; background: rgba(20, 18, 43, .55); display: grid; place-items: center; padding: 20px; }
.hs-card { background: #fff; width: min(380px, 100%); max-height: 90svh; overflow: auto; border-radius: 20px; padding: 20px 18px; box-shadow: 0 25px 80px rgba(0, 0, 0, .25); }
.hs-card h2 { margin: 0 0 10px; font: 700 18px 'Space Grotesk', sans-serif; }
.hs-paper { margin: 0 0 10px; padding: 12px; background: #fafaf6; border: 1px dashed #cfcfc4; border-radius: 10px; font: 12px/1.35 ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; color: #222; }
.hs-btns { display: flex; gap: 10px; margin-top: 14px; }
.hs-btns button { flex: 1 1 0; min-height: 48px; }
.hs-opt { display: block; width: 100%; text-align: left; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line, #e6e8f2); border-radius: 12px; background: #fff; }
.hs-opt b { display: block; font-size: 14px; } .hs-opt small { color: var(--muted, #6b6f86); font-size: 11px; }
.hs-viewer { position: fixed; inset: 0; z-index: 1300; background: #111; display: flex; flex-direction: column; }
.hs-viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; color: #fff; }
.hs-viewer img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.hs-switch { position: relative; display: inline-block; width: 46px; height: 28px; }
.hs-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; }
.hs-switch span { position: absolute; inset: 0; border-radius: 14px; background: #d4d7e5; transition: background .15s; pointer-events: none; }
.hs-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.hs-switch input:checked + span { background: var(--accent, #7563e8); } .hs-switch input:checked + span::after { transform: translateX(18px); }

/* page spacing: cards never touch (Your cart / Recent sales / Download report, supplier sections...) */
.content section.card + section.card, .content section.card + .card, .content .card + section.card, .content section.card + .tx-section, .content .card + .export-card { margin-top: 14px; }
/* the last control on any page always clears the floating bottom bar (measured in app.js) */
@media (max-width: 900px) {
  .content, body[data-nav] .content, body[data-nav="meniscus"] .content, body[data-nav="glass"] .content { padding-bottom: calc(var(--hs-nav-h, 70px) + 32px) !important; }
  input, select, textarea { scroll-margin-bottom: calc(var(--hs-nav-h, 70px) + 24px); }
}
.hs-print-sale { width: 100%; margin-top: 8px; min-height: 46px; }
.hs-badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: #f36b3e; color: #fff; font-size: 11px; line-height: 18px; text-align: center; margin-left: 6px; }
.hs-tag { font-size: 10px; background: #e4ecff; color: #3a56c9; border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.hs-help ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; line-height: 1.45; }
.hs-help code { background: #f1f2f8; padding: 1px 5px; border-radius: 5px; font-size: 12px; }
.hs-hist .operation-row, .hs-conn { margin-bottom: 8px; }
.hs-conn { display: grid; gap: 6px; }
.v2-empty { padding: 14px; color: #6b6f86; font-size: 13px; }