:root {
    --ocean: #2f4858;
    --ocean-dark: #203743;
    --ocean-soft: #496270;
    --mint: #ddfbef;
    --mint-strong: #b9efd9;
    --mint-deep: #1f7057;
    --canvas: #f4f7f6;
    --surface: #ffffff;
    --surface-soft: #f8faf9;
    --text: #233640;
    --muted: #52666f;
    --line: #bdccc8;
    --danger: #b5474f;
    --retail-green: #0d8f68;
    --retail-green-dark: #087052;
    --retail-amber: #f4b942;
    --retail-amber-soft: #fff3cf;
    --retail-coral: #e5664d;
    --retail-coral-soft: #ffebe6;
    --shadow-sm: 0 2px 8px rgba(47, 72, 88, .06);
    --shadow-md: 0 18px 48px rgba(47, 72, 88, .12);
}

/* Retail visual system — high-contrast for bright shop environments */
.app-body { background: #eef3f1; }
.app-sidebar { width: 264px; padding: 1.25rem 1rem; background: linear-gradient(180deg,#263f4d 0%,#2f4858 58%,#253e4c 100%); border-right: 1px solid rgba(255,255,255,.08); box-shadow: 12px 0 30px rgba(27,52,64,.12); }
.app-content { width: calc(100% - 264px); margin-left: 264px; }
.app-logo { padding: .25rem .55rem .9rem; font-size: 1.08rem; letter-spacing: -.015em; }
.app-logo span { width: 42px; height: 42px; border-radius: 12px; color: #173f33; background: linear-gradient(145deg,#ddfbef,#9ce7cc); box-shadow: 0 8px 18px rgba(0,0,0,.16); }
.app-logo strong small { display: block; margin-top: .15rem; color: #a9c5bd; font-size: .57rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.sidebar-store-state { display: grid; grid-template-columns: 9px 1fr; column-gap: .6rem; margin: .5rem .35rem 1.2rem; padding: .75rem .85rem; border: 1px solid rgba(221,251,239,.14); border-radius: 11px; background: rgba(15,29,35,.2); }
.sidebar-store-state i { width: 9px; height: 9px; margin-top: .25rem; border-radius: 50%; background: #55dda9; box-shadow: 0 0 0 4px rgba(85,221,169,.12); }
.sidebar-store-state span { color: #fff; font-size: .73rem; font-weight: 700; }
.sidebar-store-state small { grid-column: 2; color: #a9c5bd; font-size: .62rem; }
.app-nav { gap: .22rem; }
.nav-label { margin: 1rem .75rem .35rem; color: #9bb4bc; font-size: .59rem; font-weight: 800; letter-spacing: .16em; }
.app-nav a, .app-nav > span { min-height: 43px; border-radius: 10px; color: #dce8e5; font-weight: 650; }
.app-nav a:hover { color: #fff; background: rgba(255,255,255,.09); }
.app-nav a.active { color: #173b31; background: linear-gradient(90deg,#c8f7e6,#e8fff6); box-shadow: inset 4px 0 #0d8f68,0 7px 16px rgba(12,27,34,.18); }
.app-nav .nav-pos:not(.active) { margin-block: .25rem; color: #243e33; background: var(--retail-amber); box-shadow: 0 7px 16px rgba(17,31,37,.2); }
.app-nav .nav-pos:not(.active):hover { color: #172f28; background: #ffc956; }
.nav-icon { font-size: 1rem; }
.app-topbar { height: 76px; padding-inline: clamp(1.25rem,2.4vw,2.25rem); border-bottom-color: #c5d3cf; background: rgba(255,255,255,.97); box-shadow: 0 2px 12px rgba(38,63,77,.05); }
.app-main { max-width: none; padding: clamp(1.4rem,2.4vw,2.25rem); }
.workspace-switcher strong { font-size: .9rem !important; }
.workspace-icon,.user-menu > span:first-child { color: #154e3d; background: #c9f7e6; }
.btn { border-radius: 9px; letter-spacing: -.01em; }
.btn-primary { --bs-btn-bg: var(--retail-green); --bs-btn-border-color: var(--retail-green); --bs-btn-hover-bg: var(--retail-green-dark); --bs-btn-hover-border-color: var(--retail-green-dark); --bs-btn-active-bg: #065a42; --bs-btn-active-border-color: #065a42; box-shadow: 0 6px 14px rgba(13,143,104,.18); }
.btn-outline-primary { --bs-btn-color: var(--ocean); --bs-btn-border-color: #799087; --bs-btn-hover-bg: var(--ocean); --bs-btn-hover-border-color: var(--ocean); --bs-btn-active-bg: var(--ocean-dark); --bs-btn-active-border-color: var(--ocean-dark); background: #fff; }
.settings-card,.pos-catalog,.pos-cart,.workspace-card,.setup-card { border-color: #c8d5d1; border-radius: 13px; box-shadow: 0 5px 18px rgba(38,63,77,.07); }
.settings-card { overflow: hidden; }
.settings-card:has(.inventory-table) { border-top: 4px solid var(--retail-green); }
.settings-card th { padding-block: .85rem; color: #3c554f; background: #e9f3ef; font-size: .7rem; font-weight: 800; }
.settings-card td { color: #263b44; background: #fff; }
.inventory-table tbody tr { transition: background .14s; }
.inventory-table tbody tr:hover td { background: #f2faf7; }
.filter-bar { padding: 1.05rem 1.15rem; border-color: #c8d5d1; border-left: 4px solid var(--retail-amber); border-radius: 11px; box-shadow: 0 3px 12px rgba(38,63,77,.05); }
.page-heading { margin-bottom: 1.5rem; }
.page-heading h1 { font-size: clamp(1.8rem,3vw,2.45rem); font-weight: 800; letter-spacing: -.045em; }
.page-heading .auth-kicker { display: inline-flex; align-items: center; padding: .32rem .55rem; border-radius: 6px; color: #155943; background: #c9f7e6; letter-spacing: .11em; }
.status-pill { border-color: #9be5c8; color: #076747; background: #d9faed; }
.stock-state.low { color: #8a3e17; background: var(--retail-amber-soft); }
.form-control,.form-select { border-width: 1.5px; border-color: #afc1bc; }
.form-control:focus,.form-select:focus { border-color: var(--retail-green); box-shadow: 0 0 0 4px rgba(13,143,104,.14); }

/* Professional retail dashboard */
.retail-dashboard { display: grid; gap: 1.2rem; }
.retail-hero { position: relative; overflow: hidden; min-height: 160px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem 2.2rem; border-radius: 16px; color: #fff; background: linear-gradient(115deg,#263f4d 0%,#2f4858 64%,#386456 100%); box-shadow: 0 12px 30px rgba(38,63,77,.18); }
.retail-hero::after { content:""; position:absolute; width:280px; height:280px; right:-80px; top:-130px; border:45px solid rgba(221,251,239,.08); border-radius:50%; }
.retail-eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: #c9f7e6; font-size: .67rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.retail-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #55dda9; box-shadow: 0 0 0 4px rgba(85,221,169,.13); }
.retail-hero h1 { margin: .65rem 0 .35rem; font-size: clamp(2rem,3.3vw,3rem); font-weight: 800; letter-spacing: -.055em; }
.retail-hero p { margin: 0; color: #d6e5e1; }
.retail-hero-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; }
.retail-hero-actions > span { color: #c6d9d3; font-size: .8rem; font-weight: 650; }
.retail-sale-button { min-width: 145px; padding: .8rem 1.15rem; color: #263b35; border: 0; background: var(--retail-amber); box-shadow: 0 9px 20px rgba(20,31,34,.24); }
.retail-sale-button:hover,.retail-sale-button:focus { color: #172f28; background: #ffca56; transform: translateY(-1px); }
.retail-sale-button b { margin-right: .3rem; font-size: 1.1rem; }
.retail-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.retail-metric { position: relative; overflow: hidden; min-height: 145px; display: flex; align-items: flex-start; justify-content: space-between; padding: 1.3rem; border: 1px solid #c8d5d1; border-top: 5px solid var(--retail-green); border-radius: 13px; background: #fff; box-shadow: 0 5px 16px rgba(38,63,77,.07); }
.retail-metric::after { content:""; position:absolute; width:90px; height:90px; right:-42px; bottom:-48px; border-radius:50%; background:rgba(13,143,104,.08); }
.retail-metric > div { display: grid; }
.retail-metric span { color: #526961; font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .055em; }
.retail-metric strong { margin: .65rem 0 .28rem; color: #203743; font-size: clamp(1.35rem,2vw,1.75rem); font-weight: 800; letter-spacing: -.04em; }
.retail-metric small { color: #657a73; font-size: .7rem; }
.retail-metric > i { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #076747; background: #d9faed; font-style: normal; font-weight: 800; }
.retail-metric.catalog { border-top-color: var(--ocean); }
.retail-metric.catalog > i { color: var(--ocean); background: #e2ebe8; }
.retail-metric.warning { border-top-color: var(--retail-coral); }
.retail-metric.warning > i { color: #a33d2b; background: var(--retail-coral-soft); }
.retail-metric.warning::after { background: rgba(229,102,77,.08); }
.retail-metric.profit { border-top-color: var(--retail-amber); }
.retail-metric.profit > i { color: #75520a; background: var(--retail-amber-soft); }
.retail-metric.profit::after { background: rgba(244,185,66,.1); }
.retail-grid { display: grid; grid-template-columns: minmax(0,1.22fr) minmax(360px,.78fr); gap: 1rem; }
.retail-panel { padding: 1.4rem; border: 1px solid #c8d5d1; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(38,63,77,.07); }
.retail-panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.retail-panel-heading span { color: var(--retail-green-dark); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.retail-panel-heading h2 { margin: .2rem 0 0; color: var(--ocean); font-size: 1.15rem; font-weight: 800; }
.retail-panel-heading > small { padding: .3rem .55rem; border-radius: 6px; color: #775409; background: var(--retail-amber-soft); font-weight: 700; }
.quick-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.quick-action { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: .8rem; min-height: 74px; padding: .8rem; border: 1px solid #d1ddd9; border-radius: 11px; color: var(--ocean); background: #f9fbfa; }
.quick-action:hover { border-color: #82cdb2; color: var(--ocean); background: #eefaf6; text-decoration: none; transform: translateY(-1px); }
.quick-action > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: #0a6d50; background: #d9faed; font-style: normal; font-weight: 800; }
.quick-action.sell > i { color: #624605; background: var(--retail-amber-soft); }
.quick-action span { display: grid; }
.quick-action strong { font-size: .82rem; }
.quick-action small { margin-top: .15rem; color: #667a74; font-size: .68rem; font-weight: 500; }
.quick-action > b { color: #71847e; }
.retail-live { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .62rem; border-radius: 999px; color: #076747 !important; background: #d9faed; letter-spacing: 0 !important; text-transform: none !important; }
.retail-live i { width: 7px; height: 7px; border-radius:50%; background:#0d9f70; }
.health-score { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 12px; background: #eff8f4; }
.health-ring { width: 76px; height: 76px; display:grid; place-items:center; flex:0 0 auto; border: 8px solid #9de5ca; border-top-color: var(--retail-green); border-radius:50%; background:#fff; }
.health-ring span { color:var(--ocean); font-size:1.15rem; font-weight:800; }
.health-ring small { font-size:.65rem; }
.health-score strong { color:var(--ocean); font-size:.85rem; }
.health-score p { margin:.25rem 0 0; color:#647871; font-size:.72rem; }
.health-facts { display:grid; grid-template-columns:repeat(3,1fr); margin-top:1rem; border-top:1px solid #d5dfdc; }
.health-facts div { min-width:0; padding:.9rem .7rem 0; border-right:1px solid #d5dfdc; }
.health-facts div:last-child { border:0; }
.health-facts span,.health-facts strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.health-facts span { color:#6a7c76; font-size:.62rem; text-transform:uppercase; }
.health-facts strong { margin-top:.25rem; color:var(--ocean); font-size:.72rem; }
.setup-strip { display:grid; grid-template-columns:minmax(260px,.65fr) minmax(500px,1.35fr); align-items:center; gap:2rem; border-left:5px solid var(--retail-amber); }
.setup-strip h2 { margin:.4rem 0 .25rem; color:var(--ocean); font-size:1.1rem; font-weight:800; }
.setup-strip p { margin:0; color:#63766f; font-size:.75rem; }
.retail-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; }
.retail-steps a { display:flex; align-items:center; gap:.65rem; padding:.75rem; border:1px solid #d3dedb; border-radius:10px; color:var(--ocean); background:#fafcfb; }
.retail-steps a:hover { text-decoration:none; background:#f0f8f5; }
.retail-steps i { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:#76550c; background:var(--retail-amber-soft); font-style:normal; font-size:.72rem; font-weight:800; }
.retail-steps .done i { color:#076747; background:#d9faed; }
.retail-steps span { display:grid; }
.retail-steps strong { font-size:.73rem; }
.retail-steps small { color:#6b7d77; font-size:.61rem; font-weight:500; }

@media (max-width: 1150px) { .retail-metrics { grid-template-columns:repeat(2,1fr); } .retail-grid,.setup-strip { grid-template-columns:1fr; } }
@media (max-width: 900px) { .app-content { width:100%; margin-left:0; } .retail-hero { padding:1.5rem; } }
@media (max-width: 620px) { .retail-hero { align-items:flex-start; flex-direction:column; } .retail-hero-actions { width:100%; justify-content:space-between; } .retail-metrics,.quick-action-grid,.retail-steps { grid-template-columns:1fr; } .retail-grid { grid-template-columns:1fr; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(185, 239, 217, .45); }
html { background: var(--canvas); }
body { margin: 0; color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--ocean); font-weight: 650; text-decoration: none; }
a:hover { color: var(--ocean-dark); text-decoration: underline; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; }
.btn { min-height: 44px; padding: .65rem 1.05rem; border-radius: 10px; font-weight: 650; }
.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--ocean); --bs-btn-border-color: var(--ocean); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ocean-dark); --bs-btn-hover-border-color: var(--ocean-dark); --bs-btn-focus-shadow-rgb: 185, 239, 217; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ocean-dark); --bs-btn-active-border-color: var(--ocean-dark); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--ocean); --bs-btn-disabled-border-color: var(--ocean); }
.btn-primary:focus-visible, .auth-submit:focus-visible { outline: 2px solid var(--mint-strong); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(185,239,217,.55); }
.btn-primary:active, .auth-submit:active { color: #fff; background: var(--ocean-dark); border-color: var(--ocean-dark); box-shadow: inset 0 2px 5px rgba(14,36,46,.18); }
.btn-outline-primary { --bs-btn-color: var(--ocean); --bs-btn-bg: transparent; --bs-btn-border-color: #718792; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ocean); --bs-btn-hover-border-color: var(--ocean); --bs-btn-focus-shadow-rgb: 185, 239, 217; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ocean-dark); --bs-btn-active-border-color: var(--ocean-dark); --bs-btn-disabled-color: var(--muted); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--line); }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.show { color: #fff; background-color: var(--ocean); border-color: var(--ocean); }
.btn-outline-primary:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(185,239,217,.65); }
.btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.show { background-color: var(--ocean-dark); border-color: var(--ocean-dark); box-shadow: inset 0 2px 5px rgba(14,36,46,.18); }
.btn-outline-secondary { --bs-btn-color: var(--ocean); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--mint); --bs-btn-hover-border-color: var(--mint-strong); --bs-btn-hover-color: var(--ocean); }
.form-label { margin-bottom: .48rem; color: var(--ocean); font-size: .86rem; font-weight: 650; }
.form-control, .form-select { min-height: 50px; padding: .72rem .9rem; border-color: var(--line); border-radius: 10px; color: var(--text); background-color: var(--surface); box-shadow: 0 1px 2px rgba(47,72,88,.025); }
.form-control::placeholder { color: #5f737c; opacity: 1; }
.form-control:focus, .form-select:focus { border-color: #527c6c; box-shadow: 0 0 0 4px rgba(185,239,217,.7); }
.form-check-input { border-color: #71847f; }
.form-check-input:checked { border-color: var(--ocean); background-color: var(--ocean); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(185,239,217,.55); }
.form-check-label { color: var(--ocean-soft); font-size: .9rem; }
.alert { border: 1px solid transparent; border-radius: 10px; font-size: .9rem; }
.alert-success { color: #235e4b; border-color: var(--mint-strong); background: var(--mint); }
.alert-danger { color: #873a40; border-color: #f0cfd2; background: #fff4f4; }
.auth-kicker, .brand-eyebrow { margin: 0 0 .65rem; color: var(--mint-deep); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* Authentication and onboarding */
.auth-body { min-height: 100vh; background: var(--canvas); }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(400px, .92fr) minmax(520px, 1.08fr); }
.auth-brand-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(2.5rem, 5vw, 5rem); color: #fff; background: var(--ocean); }
.auth-brand-panel::before, .auth-brand-panel::after { content: ""; position: absolute; border-radius: 50%; background: var(--mint); opacity: .08; }
.auth-brand-panel::before { width: 430px; height: 430px; right: -230px; top: -170px; }
.auth-brand-panel::after { width: 250px; height: 250px; left: -140px; bottom: -100px; }
.brand-mark { width: 50px; height: 50px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: var(--mint); box-shadow: 0 10px 26px rgba(18,39,49,.2); }
.brand-mark svg { width: 27px; fill: var(--ocean); }
.brand-copy { position: relative; z-index: 1; max-width: 550px; margin: auto 0; }
.brand-eyebrow { color: var(--mint-strong); }
.brand-copy h1 { max-width: 520px; margin: 0 0 1.4rem; font-size: clamp(2.55rem, 4.2vw, 4.35rem); font-weight: 700; line-height: 1.04; letter-spacing: -.055em; }
.brand-copy > p:last-child { max-width: 500px; margin: 0; color: #d8e4e8; font-size: 1.05rem; line-height: 1.75; }
.brand-trust { position: relative; z-index: 1; display: flex; gap: 1.6rem; color: #d8e4e8; font-size: .8rem; }
.brand-trust span { display: inline-flex; align-items: center; gap: .55rem; }
.brand-trust i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-strong); box-shadow: 0 0 0 4px rgba(221,251,239,.1); }
.auth-form-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(2rem,5vw,4.5rem); background: var(--surface); }
.auth-card { width: min(100%, 470px); }
.mobile-brand { display: none; }
.auth-heading, .onboarding-heading { margin-bottom: 1.9rem; }
.auth-heading h2, .onboarding-heading h2 { margin: 0 0 .65rem; color: var(--ocean); font-size: clamp(1.8rem,3vw,2.25rem); font-weight: 700; letter-spacing: -.04em; }
.auth-heading p, .onboarding-heading p { margin: 0; color: var(--muted); line-height: 1.65; }
.password-field { position: relative; }
.password-field .form-control { padding-right: 3rem; }
.password-toggle { position: absolute; z-index: 2; top: 12px; right: 12px; width: 28px; height: 28px; padding: 4px; border: 0; border-radius: 7px; color: var(--ocean-soft); background: transparent; }
.password-toggle:hover { background: var(--mint); }
.password-toggle svg { width: 20px; fill: currentColor; }
.auth-options { display: flex; align-items: center; justify-content: space-between; margin: .35rem 0 1.4rem; }
.auth-submit { width: 100%; min-height: 51px; border: 0; border-radius: 10px; background: var(--ocean); box-shadow: 0 9px 22px rgba(47,72,88,.18); }
.auth-submit:hover { background: var(--ocean-dark); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(47,72,88,.22); }
.auth-submit:disabled { transform: none; opacity: .72; }
.auth-switch { margin: 1.55rem 0 0; color: var(--muted); text-align: center; font-size: .9rem; }
.auth-footer { margin: 3rem 0 -3.5rem; color: var(--muted); font-size: .78rem; }
.terms-check .invalid-feedback { display: block; }
.verification-icon { width: 60px; height: 60px; display: grid; place-items: center; margin: 0 auto 1.25rem; border: 1px solid var(--mint-strong); border-radius: 16px; color: var(--ocean); background: var(--mint); font-size: 1.55rem; }
.auth-link-button, .auth-link-button:hover, .auth-link-button:focus, .auth-link-button:active { color: var(--ocean); font-size: .88rem; }
.auth-link-button:focus-visible, .user-menu:focus-visible { outline: 2px solid var(--mint-strong); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(185,239,217,.45); }
.step-indicator { display: flex; justify-content: space-between; margin: 0 0 2rem; }
.step-dot { position: relative; z-index: 1; display: grid; justify-items: center; gap: .4rem; color: var(--muted); }
.step-dot:not(:last-child)::after { content: ""; position: absolute; z-index: -1; top: 16px; left: calc(50% + 20px); width: calc(470px / 4 - 35px); height: 2px; background: var(--line); }
.step-dot span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); font-size: .76rem; font-weight: 700; }
.step-dot small { font-size: .67rem; font-weight: 600; }
.step-dot.active, .step-dot.complete { color: var(--ocean); }
.step-dot.active span, .step-dot.complete span { border-color: var(--ocean); color: var(--mint); background: var(--ocean); }
.step-dot.complete:not(:last-child)::after { background: var(--mint-deep); }
.onboarding-step { display: none; min-height: 310px; }
.onboarding-step.active { display: block; animation: step-in .22s ease-out; }
.onboarding-step h3 { margin-bottom: 1.25rem; color: var(--ocean); font-size: 1.05rem; font-weight: 700; }
.onboarding-actions { display: flex; margin-top: 1.4rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.review-card { padding: 1.8rem .5rem; text-align: center; }
.review-card p { color: var(--muted); line-height: 1.7; }
@keyframes step-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* Application shell */
.app-body { min-height: 100vh; background: var(--canvas); }
.app-frame { min-height: 100vh; display: flex; }
.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 258px; padding: 1.5rem 1.15rem; color: #fff; background: var(--ocean); box-shadow: 8px 0 28px rgba(47,72,88,.08); }
.app-logo { display: flex; align-items: center; gap: .75rem; padding: 0 .35rem; color: #fff; font-size: 1.05rem; font-weight: 700; }
.app-logo:hover { color: #fff; text-decoration: none; }
.app-logo span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; color: var(--ocean); background: var(--mint); }
.tenant-summary { margin: 2rem .15rem 1.35rem; padding: 1rem; border: 1px solid rgba(221,251,239,.16); border-radius: 12px; background: rgba(221,251,239,.07); }
.tenant-summary > * { display: block; }
.tenant-summary small { color: var(--mint-strong); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tenant-summary strong { overflow: hidden; margin: .4rem 0 .2rem; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.tenant-summary span { color: #c8d8dd; font-size: .75rem; }
.app-nav { display: grid; gap: .2rem; }
.app-nav a, .app-nav > span { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: .58rem .75rem; border-radius: 9px; color: #d4e0e4; font-size: .84rem; font-weight: 550; }
.app-nav a:hover { color: #fff; background: rgba(221,251,239,.08); text-decoration: none; }
.app-nav a.active { color: var(--ocean); background: var(--mint); box-shadow: 0 4px 12px rgba(17,38,47,.12); }
.app-nav > span { opacity: .78; }
.app-nav small { color: inherit; font-size: .63rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.app-content { width: calc(100% - 258px); margin-left: 258px; }
.app-topbar { position: sticky; top: 0; z-index: 20; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.25rem,3vw,2.5rem); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
.app-topbar > div:first-of-type strong, .app-topbar > div:first-of-type small { display: block; }
.app-topbar > div:first-of-type strong { color: var(--ocean); font-size: .88rem; }
.app-topbar > div:first-of-type small { color: var(--muted); font-size: .7rem; }
.user-menu { display: flex; align-items: center; gap: .7rem; padding: .3rem .45rem; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; }
.user-menu:hover { border-color: var(--line); background: var(--surface-soft); }
.user-menu > span:first-child { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; color: var(--ocean); background: var(--mint); font-weight: 700; }
.user-menu > span:last-child { color: var(--ocean); font-size: .82rem; font-weight: 650; }
.user-menu small { display: block; color: var(--muted); font-size: .68rem; font-weight: 400; }
.dropdown-item:hover, .dropdown-item:focus { color: var(--ocean); background: var(--mint); }
.dropdown-item:active { color: #fff; background: var(--ocean); }
.sidebar-toggle { display: none; border: 0; color: var(--ocean); background: transparent; font-size: 1.35rem; }
.app-main { max-width: 1500px; padding: clamp(1.4rem,3vw,2.6rem); }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.page-heading h1 { margin: 0; color: var(--ocean); font-size: clamp(1.65rem,3vw,2.2rem); font-weight: 700; letter-spacing: -.04em; }
.page-heading p { margin: .45rem 0 0; color: var(--muted); }
.role-badge { padding: .48rem .8rem; border: 1px solid var(--mint-strong); border-radius: 999px; color: var(--mint-deep); background: var(--mint); font-size: .73rem; font-weight: 700; }
.metric-card { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.35rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s; }
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(47,72,88,.09); }
.metric-card span, .metric-card strong { display: block; }
.metric-card span { color: var(--muted); font-size: .77rem; font-weight: 550; }
.metric-card strong { margin-top: .5rem; color: var(--ocean); font-size: 1.3rem; }
.metric-card i { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid var(--mint-strong); border-radius: 12px; color: var(--ocean); background: var(--mint); font-style: normal; font-weight: 700; }
.welcome-panel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1.5rem; padding: 2rem; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); }
.welcome-panel h2 { margin-bottom: .55rem; color: var(--ocean); font-weight: 700; }
.welcome-panel p { max-width: 670px; margin: 0; color: var(--muted); line-height: 1.65; }
.settings-card { width: 100%; max-width: none; padding: clamp(1.25rem,3vw,2rem); border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); }
.settings-actions { display: flex; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.settings-card th { padding: 1rem 1.25rem; color: var(--ocean-soft); background: var(--surface-soft); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.settings-card td { padding: 1rem 1.25rem; border-color: var(--line); }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: .45rem; border-radius: 50%; background: var(--mint-deep); }
.store-primary-badge { border: 1px solid var(--mint-strong); color: var(--ocean); background: var(--mint); }
.page-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.filter-bar { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(190px, .35fr) auto auto; align-items: end; gap: .8rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.filter-bar label { display: block; margin-bottom: .38rem; color: var(--ocean); font-size: .78rem; font-weight: 650; }
.filter-bar .form-control, .filter-bar .form-select { min-height: 44px; }
.filter-check { display: flex !important; align-items: center; gap: .45rem; min-height: 44px; margin: 0 !important; white-space: nowrap; }
.filter-bar-compact { grid-template-columns: minmax(220px, 360px) auto; justify-content: start; }
.inventory-table th { white-space: nowrap; }
.inventory-table td > strong, .inventory-table td > small { display: block; }
.inventory-table td > small { margin-top: .25rem; color: var(--muted); font-size: .75rem; font-weight: 500; }
.empty-state { padding: 3rem 1rem; text-align: center; }
.empty-state strong { color: var(--ocean); font-size: 1rem; }
.empty-state p { margin: .35rem 0 0; color: var(--muted); }
.stock-state { display: inline-flex; padding: .38rem .62rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.stock-state.healthy { color: var(--mint-deep); background: var(--mint); }
.stock-state.low { color: #7c3f20; background: #fff0d8; }
.pagination-wrap { margin-top: 1rem; }
.pagination { --bs-pagination-color: var(--ocean); --bs-pagination-hover-color: var(--ocean-dark); --bs-pagination-hover-bg: var(--mint); --bs-pagination-hover-border-color: var(--mint-strong); --bs-pagination-focus-color: var(--ocean); --bs-pagination-focus-bg: var(--mint); --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(185,239,217,.55); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: var(--ocean); --bs-pagination-active-border-color: var(--ocean); }
.product-form { display: grid; gap: 1.8rem; }
.form-section { display: grid; grid-template-columns: minmax(190px, .38fr) minmax(0, 1fr); gap: 2rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--line); }
.form-section h2 { margin: 0 0 .35rem; color: var(--ocean); font-size: 1rem; font-weight: 700; }
.form-section > div:first-child p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.input-group-text { border-color: var(--line); color: var(--ocean); background: var(--surface-soft); font-weight: 650; }
.field-error { margin-top: .3rem; color: var(--danger); font-size: .75rem; }
.form-check-row { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-top: .4rem; }
.form-check-row label { display: flex; align-items: center; gap: .5rem; color: var(--text); font-size: .84rem; font-weight: 550; }
.category-create { display: grid; grid-template-columns: minmax(220px,.6fr) minmax(260px,1fr) auto; align-items: end; gap: 1rem; }
.category-inline { display: inline; }
.adjustment-card { max-width: 900px; }
.stock-current { margin-bottom: 1.5rem; padding: 1.2rem; border: 1px solid var(--mint-strong); border-radius: 12px; background: var(--mint); }
.stock-current small, .stock-current strong { display: block; }
.stock-current small { color: var(--mint-deep); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.stock-current strong { margin-top: .25rem; color: var(--ocean); font-size: 1.6rem; }
.adjustment-note { margin-top: 1rem; color: var(--muted); font-size: .8rem; }
.quantity-change.positive { color: var(--mint-deep); }
.quantity-change.negative { color: var(--danger); }
.customer-form { max-width: 1050px; }
.customer-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 1rem; }
.customer-stats article { padding: 1.25rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.customer-stats span, .customer-stats strong { display: block; }
.customer-stats span { color: var(--muted); font-size: .75rem; font-weight: 600; }
.customer-stats strong { margin-top: .45rem; color: var(--ocean); font-size: 1.2rem; }
.customer-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1.5rem; }
.customer-notes small { color: var(--mint-deep); font-weight: 700; text-transform: uppercase; }
.customer-notes p { margin: .4rem 0 0; color: var(--text); white-space: pre-line; }
.customer-history-title { margin-top: 1.5rem; }
.pos-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.pos-heading h1 { margin: 0; color: var(--ocean); font-size: clamp(1.8rem,3vw,2.35rem); font-weight: 700; letter-spacing: -.04em; }
.pos-heading p { margin: .4rem 0 0; color: var(--muted); }
.pos-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(350px,420px); gap: 1rem; align-items: start; }
.pos-catalog, .pos-cart { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); }
.pos-catalog { min-height: 650px; padding: 1rem; }
.pos-search { position: relative; display: flex; align-items: center; margin-bottom: 1rem; }
.pos-search > span { position: absolute; left: 1rem; z-index: 2; color: var(--ocean); font-size: 1.25rem; }
.pos-search .form-control { padding-left: 2.7rem; padding-right: 4rem; }
.pos-search kbd { position: absolute; right: .8rem; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); }
.pos-scan-message { margin:-.35rem 0 .85rem; padding:.55rem .75rem; border:1px solid transparent; border-radius:8px; font-size:.75rem; font-weight:700; }.pos-scan-message.success{color:#076747;border-color:#9be5c8;background:#d9faed}.pos-scan-message.error{color:#8a3e2f;border-color:#efb8ae;background:#fff0ed}
.pos-products { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: .75rem; }
.pos-product { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 108px; padding: .85rem; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: #fff; text-align: left; transition: transform .15s,border-color .15s,box-shadow .15s; }
.pos-product:hover:not(:disabled) { transform: translateY(-2px); border-color: #718792; box-shadow: 0 8px 20px rgba(47,72,88,.1); }
.pos-product:disabled { cursor: not-allowed; opacity: .58; }
.product-initial { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--ocean); background: var(--mint); font-weight: 700; }
.pos-product > span:nth-child(2) { min-width: 0; display: grid; }
.pos-product strong { overflow: hidden; color: var(--ocean); font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.pos-product small { overflow: hidden; margin: .2rem 0 .35rem; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.pos-product b { color: var(--text); font-size: .78rem; }
.pos-product em { position: absolute; right: .65rem; bottom: .45rem; color: var(--muted); font-size: .6rem; font-style: normal; }
.pos-cart { position: sticky; top: 88px; overflow: hidden; }
.pos-customer { display: grid; gap: .55rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.pos-customer > label { color: var(--ocean); font-size: .75rem; font-weight: 700; }
.pos-customer .form-select { min-height: 42px; }
.pos-customer summary { cursor: pointer; color: var(--mint-deep); font-size: .75rem; font-weight: 700; }
.pos-customer details > div { display: grid; gap: .45rem; margin-top: .6rem; }
.pos-customer details .form-control { min-height: 40px; font-size: .78rem; }
.cart-title { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.cart-title h2 { margin: 0; color: var(--ocean); font-size: 1rem; font-weight: 700; }
.cart-title small { color: var(--muted); font-weight: 500; }
.cart-lines { max-height: 340px; overflow-y: auto; }
.cart-empty { padding: 3rem 1rem; color: var(--muted); text-align: center; }
.cart-empty span, .cart-empty strong { display: block; }
.cart-empty span { margin-bottom: .7rem; font-size: 2rem; }
.cart-empty strong { color: var(--ocean); }
.cart-empty p { margin: .3rem 0 0; font-size: .78rem; }
.cart-line { padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.cart-line-head { display: flex; justify-content: space-between; gap: .5rem; }
.cart-line-head span { min-width: 0; display: grid; }
.cart-line-head strong { overflow: hidden; color: var(--ocean); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.cart-line-head small { color: var(--muted); font-size: .67rem; }
.cart-line-head button { border: 0; color: var(--danger); background: transparent; font-size: 1.2rem; }
.cart-line-controls { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: .7rem; margin-top: .65rem; }
.cart-line-controls > div { display: flex; }
.cart-line-controls > div button, .cart-line-controls > div input { width: 32px; height: 32px; border: 1px solid var(--line); color: var(--ocean); background: #fff; text-align: center; }
.cart-line-controls > div button:first-child { border-radius: 7px 0 0 7px; }
.cart-line-controls > div button:last-child { border-radius: 0 7px 7px 0; }
.cart-line-controls label { color: var(--muted); font-size: .62rem; }
.cart-line-controls label input { width: 78px; height: 32px; display: block; padding: .25rem .4rem; }
.cart-line-controls b { color: var(--ocean); font-size: .78rem; }
.cart-summary { display: grid; gap: .7rem; padding: 1rem 1.1rem; border-top: 1px solid var(--line); background: var(--surface-soft); }
.cart-summary > div, .cart-summary > label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .78rem; }
.cart-summary label .form-control { width: 145px; min-height: 40px; }
.cart-total { padding-top: .7rem; border-top: 1px solid var(--line); color: var(--ocean) !important; font-size: 1rem !important; }
.cart-total strong { font-size: 1.25rem; }
.cart-change strong { color: var(--mint-deep); }
.pos-pay { width: 100%; margin-top: .25rem; }
.sale-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 1rem; align-items: start; }
.sale-totals { display: grid; gap: .8rem; }
.sale-totals h2 { margin: 0 0 .3rem; color: var(--ocean); font-size: 1rem; font-weight: 700; }
.sale-totals > div { display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; }
.sale-totals .total { padding-block: .8rem; border-block: 1px solid var(--line); color: var(--ocean); font-size: 1rem; }
.sale-totals > small { color: var(--muted); }
.receipt-page { position: relative; min-height: 100vh; padding: 2rem; color: #111; background-color: #edf7f3; background-image: linear-gradient(rgba(238,248,244,.24),rgba(238,248,244,.48)),url("../images/receipt-multisector-retail-v3.webp"); background-position: center; background-size: cover; background-attachment: fixed; }
.receipt-page::before { position: fixed; inset: 0; z-index: 0; content: ""; pointer-events: none; background: radial-gradient(circle at center,rgba(255,255,255,.12) 0 20%,rgba(47,72,88,.07) 100%); }
.receipt-preview-label { position: relative; z-index: 1; display: flex; align-items: center; gap: .65rem; width: 80mm; margin: 0 auto .7rem; padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.8); border-radius: 12px; color: #fff; background: rgba(47,72,88,.94); box-shadow: 0 10px 25px rgba(47,72,88,.16); font-family: inherit; backdrop-filter: blur(10px); }
.receipt-preview-label i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #086b51; background: #a9f0d7; font-style: normal; font-weight: 900; }
.receipt-preview-label span { display: grid; }.receipt-preview-label small { color: #b8d2cf; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.receipt-preview-label strong { font-size: .9rem; }
.receipt { position: relative; z-index: 1; width: 80mm; margin: auto; padding: 8mm 6mm 10mm; border-top: 4px solid #0c9871; background: #fff; box-shadow: 0 18px 48px rgba(47,72,88,.24),0 0 0 1px rgba(255,255,255,.7); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 11px; }
.receipt::after { position: absolute; right: 0; bottom: -6px; left: 0; height: 7px; content: ""; background: linear-gradient(135deg,#fff 5px,transparent 0) 0 0/10px 10px repeat-x,linear-gradient(225deg,#fff 5px,transparent 0) 0 0/10px 10px repeat-x; }
.receipt header { padding-bottom: 4mm; border-bottom: 1px dashed #555; text-align: center; }
.receipt-brand-mark { display: grid; place-items: center; width: 27px; height: 27px; margin: 0 auto 2mm; border-radius: 7px; color: #244451; background: #ddfbef; font-family: inherit; font-weight: 900; }
.receipt h1 { margin: 0 0 1mm; font-size: 17px; }
.receipt p { margin: 1mm 0; }
.receipt-meta { display: grid; gap: 1mm; padding: 4mm 0; border-bottom: 1px dashed #555; }
.receipt table { width: 100%; margin: 3mm 0; border-collapse: collapse; }
.receipt th, .receipt td { padding: 2mm 1mm; border-bottom: 1px dotted #aaa; text-align: right; }
.receipt th:first-child, .receipt td:first-child { text-align: left; }
.receipt td small { display: block; color: #444; }
.receipt-totals { display: grid; gap: 1.5mm; padding-top: 2mm; }
.receipt-totals div { display: flex; justify-content: space-between; }
.receipt-totals .grand { margin-block: 2mm; padding-block: 2mm; border-block: 1px dashed #555; font-size: 14px; }
.receipt footer { margin-top: 5mm; text-align: center; }.receipt footer small { display: block; margin-top: 2mm; color: #666; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.receipt-actions { position: relative; z-index: 1; display: flex; justify-content: center; gap: .6rem; width: max-content; margin: 1rem auto 0; padding: .55rem; border: 1px solid rgba(255,255,255,.72); border-radius: 13px; background: rgba(255,255,255,.82); box-shadow: 0 10px 30px rgba(47,72,88,.16); backdrop-filter: blur(12px); }
.receipt-actions button, .receipt-actions a { padding: .65rem 1rem; border: 1px solid var(--ocean); border-radius: 8px; color: #fff; background: var(--ocean); font-family: inherit; font-weight: 700; text-decoration: none; transition: transform .15s,background .15s; }
.receipt-actions span { margin-right: .3rem; font-weight: 900; }.receipt-actions .receipt-action-primary { border-color: #078f69; background: #078f69; box-shadow: 0 5px 12px rgba(7,143,105,.2); }.receipt-actions .receipt-action-muted { color: #2f4858; border-color: #9cafaa; background: #fff; }
.receipt-actions button:hover, .receipt-actions a:hover { color: #203b48; background: #ddfbef; transform: translateY(-1px); }
.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
    .auth-shell { display: block; }
    .auth-brand-panel { display: none; }
    .auth-form-panel { min-height: 100vh; justify-content: flex-start; padding: 1.5rem; }
    .mobile-brand { width: min(100%,470px); display: flex; align-items: center; gap: .75rem; margin-bottom: 2.5rem; color: var(--ocean); font-weight: 700; }
    .mobile-brand .brand-mark { width: 41px; height: 41px; border: 1px solid var(--mint-strong); border-radius: 11px; box-shadow: none; }
    .mobile-brand .brand-mark svg { width: 23px; }
    .auth-card { margin: auto 0; }
    .auth-footer { margin: 3rem 0 0; }
    .app-sidebar { transform: translateX(-100%); transition: transform .22s ease; }
    .app-sidebar.open { transform: none; }
    .app-content { width: 100%; margin-left: 0; }
    .sidebar-toggle { display: block; }
    .app-topbar > div:first-of-type { display: none; }
    .sidebar-backdrop.show { position: fixed; inset: 0; z-index: 30; display: block; background: rgba(32,55,67,.5); backdrop-filter: blur(2px); }
    .welcome-panel { align-items: flex-start; flex-direction: column; }
    .filter-bar { grid-template-columns: 1fr 1fr; }
    .form-section { grid-template-columns: 1fr; gap: 1rem; }
    .category-create { grid-template-columns: 1fr 1fr; }
    .category-create .btn { grid-column: 1 / -1; }
    .pos-layout { grid-template-columns: 1fr; }
    .pos-cart { position: static; }
    .sale-detail-grid { grid-template-columns: 1fr; }
    .step-dot:not(:last-child)::after { display: none; }
}

@media (max-width: 576px) {
    .auth-form-panel { padding: 1.2rem; }
    .mobile-brand { margin-bottom: 2rem; }
    .auth-heading, .onboarding-heading { margin-bottom: 1.5rem; }
    .auth-options { font-size: .85rem; }
    .app-topbar { height: 64px; }
    .app-main { padding: 1.1rem; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .user-menu > span:last-child { display: none; }
    .metric-card { padding: 1.15rem; }
    .step-dot small { display: none; }
    .onboarding-step { min-height: 390px; }
    .filter-bar, .category-create { grid-template-columns: 1fr; }
    .filter-bar .btn, .category-create .btn { width: 100%; }
    .pos-heading { align-items: flex-start; flex-direction: column; }
    .pos-catalog { min-height: 0; padding: .7rem; }
    .pos-products { grid-template-columns: 1fr; }
    .cart-line-controls { grid-template-columns: auto 1fr; }
    .cart-line-controls > b { grid-column: 1 / -1; }
    .customer-stats, .customer-notes { grid-template-columns: 1fr; }
}

@media print {
    .receipt-page { padding: 0; background: #fff; }
    .receipt-page::before { display: none; }
    .receipt-preview-label { display: none; }
    .receipt { margin: 0; box-shadow: none; }
    .receipt::after { display: none; }
    .receipt-actions { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Structured dashboard refinement */
.app-logo strong { display: grid; color: #fff; font-size: 1rem; line-height: 1.15; }
.app-logo strong small { margin-top: .18rem; color: #d1dfe2; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tenant-summary span { display: flex; align-items: center; gap: .45rem; }
.tenant-summary span i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint-strong); }
.app-nav { gap: .12rem; }
.app-nav .nav-label { margin: 1rem .75rem .32rem; color: #c2d2d7; font-size: .63rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.app-nav a, .app-nav > span { justify-content: flex-start; gap: .7rem; }
.app-nav a > span, .app-nav > span > span { flex: 1; }
.app-nav .nav-icon { width: 20px; color: #b7c9cf; font-size: .95rem; font-weight: 500; text-align: center; }
.app-nav a.active .nav-icon { color: var(--ocean); }
.app-main { max-width: none; }
.dashboard-wrap { width: 100%; margin: 0; }
.dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.dashboard-hero h1 { margin: 0; color: var(--ocean); font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 700; letter-spacing: -.045em; }
.dashboard-hero p { margin: .5rem 0 0; color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: .8rem; }
.hero-actions .btn:disabled { opacity: .5; }
.dashboard-section-title { display: flex; align-items: end; justify-content: space-between; margin-bottom: .9rem; }
.dashboard-section-title h2 { margin: 0; color: var(--ocean); font-size: 1rem; font-weight: 700; }
.dashboard-section-title p { margin: .25rem 0 0; color: var(--muted); font-size: .78rem; }
.dashboard-section-title > span { color: var(--muted); font-size: .78rem; font-weight: 500; }
.metric-card { display: block; min-height: 154px; }
.metric-top { display: flex; align-items: center; justify-content: space-between; }
.metric-card strong { margin-top: .95rem; font-size: 1.45rem; }
.metric-card > small { display: block; margin-top: .35rem; color: var(--muted); font-size: .78rem; font-weight: 500; }
.metric-card i { width: 35px; height: 35px; border-radius: 10px; }
.dashboard-lower { margin-top: 1.2rem; }
.workspace-card, .setup-card { height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.45rem 1.5rem 1.2rem; }
.panel-heading .auth-kicker { margin-bottom: .45rem; }
.panel-heading h2 { margin: 0; color: var(--ocean); font-size: 1.15rem; font-weight: 700; }
.status-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .65rem; border: 1px solid var(--mint-strong); border-radius: 999px; color: var(--mint-deep); background: var(--mint); font-size: .68rem; font-weight: 700; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint-deep); }
.workspace-details { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 1.5rem; padding: 1.1rem 0; border-block: 1px solid var(--line); }
.workspace-details > div { padding: 0 1rem; border-right: 1px solid var(--line); }
.workspace-details > div:first-child { padding-left: 0; }
.workspace-details > div:last-child { border: 0; }
.workspace-details small, .workspace-details strong { display: block; }
.workspace-details small { margin-bottom: .35rem; color: var(--muted); font-size: .75rem; font-weight: 500; }
.workspace-details strong { overflow: hidden; color: var(--ocean); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.5rem; }
.panel-footer p { margin: 0; color: var(--muted); font-size: .82rem; }
.panel-footer a { flex: 0 0 auto; font-size: .76rem; }
.setup-count { min-width: 42px; padding: .35rem .55rem; border-radius: 8px; color: var(--ocean); background: var(--mint); font-size: .7rem; font-weight: 700; text-align: center; }
.setup-list { padding: 0 .7rem .75rem; }
.setup-list > div { display: flex; align-items: center; gap: .8rem; padding: .72rem .8rem; border-top: 1px solid var(--line); }
.setup-list i { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: .7rem; font-style: normal; font-weight: 700; }
.setup-list .complete i { border-color: var(--mint-strong); color: var(--mint-deep); background: var(--mint); }
.setup-list span { display: grid; }
.setup-list strong { color: var(--ocean); font-size: .78rem; }
.setup-list small { margin-top: .15rem; color: var(--muted); font-size: .75rem; font-weight: 500; }

@media (max-height: 760px) and (min-width: 901px) {
    .tenant-summary { margin-top: 1.25rem; margin-bottom: .7rem; padding: .75rem; }
    .app-nav .nav-label { margin-top: .55rem; }
    .app-nav a, .app-nav > span { min-height: 34px; padding-block: .4rem; }
}

@media (max-width: 900px) {
    .dashboard-hero { align-items: flex-start; }
}

@media (max-width: 620px) {
    .dashboard-hero { flex-direction: column; margin-bottom: 1.8rem; }
    .hero-actions { width: 100%; justify-content: space-between; }
    .dashboard-section-title > span { display: none; }
    .workspace-details { grid-template-columns: 1fr; }
    .workspace-details > div { padding: .7rem 0; border-right: 0; border-bottom: 1px solid #eaf0ed; }
    .workspace-details > div:last-child { border-bottom: 0; }
    .panel-footer { align-items: flex-start; flex-direction: column; }
}

/* Reference-led authentication experience */
.auth-body { display: grid; place-items: center; padding: clamp(1rem,4vw,3.25rem); background: #dce2e4; }
.auth-shell { width: min(100%,1180px); min-height: min(760px,calc(100vh - 6.5rem)); overflow: hidden; grid-template-columns: 1.02fr .98fr; padding: 18px; border: 1px solid rgba(47,72,88,.08); border-radius: 22px; background: #f6f8f8; box-shadow: 0 24px 70px rgba(47,72,88,.18); }
.auth-brand-panel { align-items: center; justify-content: flex-start; padding: clamp(2rem,4vw,4.5rem); border-radius: 16px; background-image: linear-gradient(180deg,rgba(32,55,67,.96) 0%,rgba(47,72,88,.76) 42%,rgba(32,55,67,.25) 72%,rgba(32,55,67,.7) 100%),var(--auth-retail-image); background-position: center; background-size: cover; text-align: center; }
.auth-brand-panel::before, .auth-brand-panel::after { display: none; }
.auth-brand-panel .brand-copy { position: relative; z-index: 1; width: 100%; margin: 0; padding-top: clamp(.5rem,2vh,1.5rem); text-shadow: 0 2px 18px rgba(14,36,46,.35); }
.auth-brand-panel .brand-eyebrow { color: var(--mint-strong); }
.auth-brand-panel .brand-copy h1 { max-width: none; margin-bottom: .8rem; font-size: clamp(2rem,3.2vw,3.15rem); letter-spacing: -.045em; }
.auth-brand-panel .brand-copy > p:last-child { max-width: 430px; margin: 0 auto; color: #edf8f4; font-size: .92rem; line-height: 1.65; }
.auth-insight { position: relative; z-index: 1; width: min(100%,430px); padding: 1.35rem 1.4rem 1rem; border-radius: 14px; color: var(--text); background: #fff; box-shadow: 0 18px 40px rgba(14,36,46,.24); text-align: left; }
.insight-head { display: flex; align-items: center; justify-content: space-between; }
.insight-head small, .insight-head strong { display: block; }
.insight-head small { color: var(--muted); font-size: .62rem; }
.insight-head strong { margin-top: .2rem; color: var(--ocean); font-size: .83rem; }
.insight-head > span { padding: .32rem .5rem; border-radius: 7px; color: var(--mint-deep); background: var(--mint); font-size: .58rem; font-weight: 700; }
.insight-chart { height: 145px; display: flex; align-items: end; justify-content: space-around; gap: .8rem; margin-top: 1.15rem; padding: 0 .4rem; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom,transparent 0,transparent 35px,#eef2f1 36px); }
.insight-chart i { width: 25px; height: var(--bar); border-radius: 5px 5px 0 0; background: var(--ocean); }
.insight-chart i:nth-child(5), .insight-chart i:nth-child(6) { background: var(--ocean-soft); }
.insight-days { display: flex; justify-content: space-around; padding-top: .5rem; color: #8b999f; font-size: .55rem; }
.brand-dots { position: relative; z-index: 1; display: flex; gap: .45rem; margin-top: 1.7rem; }
.brand-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(221,251,239,.35); }
.brand-dots i.active { width: 22px; border-radius: 4px; background: var(--mint); }
.auth-form-panel { padding: clamp(2rem,5vw,4.5rem); border-radius: 16px; background: #f6f8f8; }
.auth-form-panel .auth-card { width: min(100%,455px); padding: clamp(1.6rem,3vw,2.5rem); border: 1px solid rgba(47,72,88,.08); border-radius: 16px; background: #fff; box-shadow: 0 14px 38px rgba(47,72,88,.11); }
.auth-product { display: flex; align-items: center; gap: .72rem; margin-bottom: 1.65rem; }
.auth-product .brand-mark { width: 43px; height: 43px; border: 1px solid var(--mint-strong); border-radius: 11px; box-shadow: none; }
.auth-product .brand-mark svg { width: 23px; }
.auth-product > span:last-child { display: grid; line-height: 1.2; }
.auth-product strong { color: var(--ocean); font-size: .9rem; }
.auth-product small { margin-top: .2rem; color: var(--muted); font-size: .65rem; }
.auth-form-panel .auth-heading { margin-bottom: 1.55rem; }
.auth-form-panel .auth-heading .auth-kicker { display: none; }
.auth-form-panel .auth-heading h2 { font-size: clamp(1.55rem,2.5vw,1.95rem); }
.auth-form-panel .auth-heading p { font-size: .82rem; }
.auth-form-panel .form-label { font-size: .76rem; }
.auth-form-panel .form-control, .auth-form-panel .form-select { min-height: 45px; padding: .62rem .8rem; font-size: .84rem; }
.auth-form-panel .password-toggle { top: 9px; }
.auth-form-panel .auth-submit { min-height: 46px; }
.auth-shell-onboarding { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:min(100%,1440px); height:min(900px,calc(100vh - 2rem)); min-height:0; padding:clamp(1rem,2vw,2rem); overflow:hidden; background-color:#edf7f3; background-image:linear-gradient(rgba(238,248,244,.2),rgba(238,248,244,.45)),var(--auth-retail-image); background-position:center; background-size:cover; }
.auth-shell-onboarding::before { position:absolute; inset:0; z-index:-1; content:""; background:radial-gradient(circle at center,rgba(255,255,255,.12) 0 24%,rgba(47,72,88,.08) 100%); }
.auth-shell-onboarding .auth-brand-panel { display:none; }
.auth-shell-onboarding .auth-form-panel { width:min(100%,760px); min-height:0; padding:0; border-radius:20px; background:transparent; }
.auth-shell-onboarding .auth-form-panel .auth-card { width:100%; padding:clamp(1.35rem,2.5vh,2rem) clamp(1.5rem,3vw,2.5rem); border:1px solid rgba(255,255,255,.88); border-top:4px solid #0d8f68; border-radius:18px; background:rgba(255,255,255,.95); box-shadow:0 24px 60px rgba(47,72,88,.24); backdrop-filter:blur(16px); }
.auth-shell-onboarding .auth-product { justify-content:center; margin-bottom:.85rem; padding-bottom:.75rem; border-bottom:1px solid #dee8e5; }
.auth-shell-onboarding .onboarding-heading { margin-bottom:.9rem; text-align:center; }
.auth-shell-onboarding .onboarding-heading h2 { font-size:clamp(1.6rem,2.4vw,2rem); }
.auth-shell-onboarding .onboarding-heading p { font-size:.8rem; }
.auth-shell-onboarding .step-indicator { width:min(100%,560px); margin:0 auto 1rem; }
.auth-shell-onboarding .onboarding-step { min-height:220px; }
.auth-shell-onboarding .onboarding-step h3 { margin-bottom:.85rem; }
.auth-shell-onboarding .onboarding-actions { margin-top:.75rem; }

/* Centred multi-sector authentication */
.auth-shell:not(.auth-shell-onboarding) { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr); place-items: center; width: min(100%,1440px); min-height: min(880px,calc(100vh - 4rem)); padding: clamp(1rem,3vw,2.5rem); overflow: hidden; background-color: #edf7f3; background-image: linear-gradient(rgba(238,248,244,.18),rgba(238,248,244,.42)),var(--auth-retail-image); background-position: center; background-size: cover; }
.auth-shell:not(.auth-shell-onboarding)::before { position: absolute; inset: 0; z-index: -1; content: ""; background: radial-gradient(circle at center,rgba(255,255,255,.14) 0 22%,rgba(47,72,88,.08) 100%); }
.auth-shell:not(.auth-shell-onboarding) .auth-brand-panel { display: none; }
.auth-shell:not(.auth-shell-onboarding) .auth-form-panel { width: min(100%,500px); padding: 0; border-radius: 20px; background: transparent; }
.auth-shell:not(.auth-shell-onboarding) .auth-form-panel .auth-card { width: 100%; max-height: calc(100vh - 6rem); overflow-y: auto; padding: clamp(1.55rem,3vw,2.35rem); border: 1px solid rgba(255,255,255,.88); border-top: 4px solid #0d8f68; border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 24px 60px rgba(47,72,88,.24),0 0 0 1px rgba(47,72,88,.04); backdrop-filter: blur(16px); scrollbar-width: thin; scrollbar-color: #9bb4ab transparent; }
.auth-shell:not(.auth-shell-onboarding) .auth-product { justify-content:center; margin-bottom:1.35rem; padding-bottom:1rem; border-bottom:1px solid #deE8e5; }
.auth-shell:not(.auth-shell-onboarding) .auth-product .brand-mark { width:46px; height:46px; background:#ddfbef; box-shadow:0 7px 16px rgba(13,143,104,.12); }
.auth-shell:not(.auth-shell-onboarding) .auth-heading { text-align:center; }
.auth-shell:not(.auth-shell-onboarding) .auth-heading .auth-kicker { display:inline-flex; padding:.3rem .55rem; border-radius:6px; color:#087052; background:#ddfbef; }
.auth-shell:not(.auth-shell-onboarding) .auth-heading h2 { font-size:clamp(1.65rem,2.5vw,2rem); }
.auth-shell:not(.auth-shell-onboarding) .auth-submit { background:#0d8f68; box-shadow:0 8px 19px rgba(13,143,104,.2); }
.auth-shell:not(.auth-shell-onboarding) .auth-submit:hover { background:#087052; }

@media (max-width: 900px) {
    .auth-body { display: block; padding: 0; background: #f6f8f8; }
    .auth-shell { min-height: 100vh; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    .auth-brand-panel { display: none; }
    .auth-form-panel { min-height: 100vh; padding: 1.25rem; }
    .auth-form-panel .auth-card { margin: auto 0; }
    .auth-shell:not(.auth-shell-onboarding) { min-height:100vh; padding:1.25rem; background-position:center; }
    .auth-shell:not(.auth-shell-onboarding) .auth-form-panel { min-height:auto; }
    .auth-shell:not(.auth-shell-onboarding) .auth-form-panel .auth-card { max-height:calc(100vh - 2.5rem); margin:0; }
    .auth-shell-onboarding { width:100%; height:auto; min-height:100vh; padding:1rem; overflow:visible; }
    .auth-shell-onboarding .auth-form-panel { min-height:0; padding:0; }
    .auth-shell-onboarding .auth-form-panel .auth-card { margin:0; }
}

@media (max-width: 480px) {
    .auth-form-panel { padding: .85rem; }
    .auth-form-panel .auth-card { padding: 1.4rem 1.2rem; border-radius: 14px; box-shadow: 0 8px 28px rgba(47,72,88,.09); }
    .auth-product { margin-bottom: 1.4rem; }
    .auth-shell:not(.auth-shell-onboarding) { padding:.75rem; background-position:center; }
    .auth-shell:not(.auth-shell-onboarding) .auth-form-panel .auth-card { max-height:calc(100vh - 1.5rem); padding:1.35rem 1.15rem; }
}

/* Purchasing */
.purchase-items .table { min-width: 880px; }
.purchase-items .form-control, .purchase-items .form-select { min-width: 115px; }
.purchase-items td:first-child .form-select { min-width: 270px; }
.purchase-totals { width: min(100%, 410px); margin-left: auto; padding: 1.25rem 1.5rem; display: grid; gap: .65rem; }
.purchase-totals span { display: flex; justify-content: space-between; color: var(--muted); }
.purchase-totals strong { color: var(--ocean); }
.purchase-totals .total { padding-top: .75rem; border-top: 1px solid var(--line); color: var(--ocean); font-size: 1.05rem; }
.payment-form { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.payment-form > :nth-child(3), .payment-form > button { grid-column: 1 / -1; }
.payment-history { display: grid; }
.payment-history > div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.payment-history span, .payment-history span small { display: block; }
.payment-history small { color: var(--muted); }
.pos-payment-panel { display:grid; gap:.75rem; padding:.9rem; border:1px solid var(--line); border-radius:12px; background:#f7fbf9; }
.pos-payment-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.pos-payment-heading span, .pos-payment-heading small { display:block; }
.pos-payment-heading small { margin-top:.12rem; color:var(--muted); font-size:.68rem; }
.pos-payment-heading b { color:#9a4f09; font-size:.72rem; }
.pos-payment-heading b.ready { color:#087052; }
.payment-method-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:.55rem; }
.payment-method { display:grid; gap:.45rem; padding:.65rem; border:1px solid #d6e2de; border-radius:10px; background:#fff; opacity:.72; }
.payment-method.active { border-color:#0d8f68; box-shadow:0 0 0 2px rgba(13,143,104,.1); opacity:1; }
.payment-method label { display:flex; align-items:center; gap:.4rem; margin:0; font-size:.75rem; font-weight:800; color:var(--ocean); }
.payment-method .form-control { min-height:38px; padding:.4rem .55rem; font-size:.76rem; }
.payment-method button { padding:0; border:0; color:#087052; background:none; text-align:left; font-size:.66rem; font-weight:800; }
.payment-totals { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.payment-totals span { display:grid; padding:.45rem; border-radius:7px; background:#fff; color:var(--muted); font-size:.62rem; }
.payment-totals strong { color:var(--ocean); font-size:.72rem; }
.refund-destination { min-height:45px; display:flex; align-items:center; padding:.65rem .8rem; border:1px solid var(--mint-strong); border-radius:8px; color:#087052; background:var(--mint); font-weight:800; }
.payment-method-report { margin-bottom:1.25rem; }
.payment-report-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.payment-report-grid article { display:grid; padding:1rem; border:1px solid var(--line); border-radius:10px; background:#f8fbfa; }
.payment-report-grid span { color:var(--muted); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.payment-report-grid strong { margin:.35rem 0; color:var(--ocean); font-size:1.05rem; }
.payment-report-grid small { color:var(--muted); }
.payment-report-grid .refund { color:#a34a3b; }
@media(max-width:900px){.payment-report-grid{grid-template-columns:1fr 1fr}}

@media (max-height: 800px) and (min-width: 901px) {
    .auth-body { padding: 1rem; }
    .auth-shell { min-height: calc(100vh - 2rem); }
    .auth-brand-panel { padding-block: 2rem; }
    .auth-brand-panel .brand-copy { margin-bottom: 1.4rem; }
    .auth-brand-panel .brand-copy h1 { font-size: 2.2rem; }
    .auth-insight { padding-top: 1rem; }
    .insight-chart { height: 105px; margin-top: .75rem; }
    .brand-dots { margin-top: 1rem; }
    .auth-form-panel { padding-block: 1.5rem; }
}

/* Workspace placement and full-width application canvas */
.app-main { padding-inline: clamp(1.25rem, 2vw, 2rem); }
.workspace-switcher { display: flex !important; align-items: center; gap: .7rem; }
.workspace-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--mint-strong); border-radius: 10px; color: var(--ocean); background: var(--mint); font-size: .9rem; }
.workspace-switcher > div { display: grid; grid-template-columns: auto auto; column-gap: .55rem; align-items: baseline; }
.workspace-switcher small { grid-column: 1 / -1; margin-bottom: .1rem; color: var(--muted) !important; font-size: .57rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.workspace-switcher strong { color: var(--ocean); font-size: .82rem !important; }
.workspace-switcher em { color: var(--muted); font-size: .7rem; font-style: normal; }

@media (max-width: 900px) {
    .app-topbar > .workspace-switcher { display: flex !important; }
    .workspace-switcher .workspace-icon { display: none; }
}

@media (max-width: 480px) {
    .workspace-switcher > div { display: block; }
    .workspace-switcher small, .workspace-switcher em { display: none !important; }
}