/* ==========================================================================
   BillEase Design System — 5. Page modules (billing, stock, codes, EMI, invoice viewer, store)
   Originally migrated from the legacy app.css (unused selectors removed,
   component-owned selectors moved to components.css/layout.css, colours
   mapped to tokens). Conventions: docs/UI_SYSTEM.md.
   ========================================================================== */

/* ---- Dashboard ---------------------------------------------------------- */
.dash-greeting h2 { margin-top: 2px; }
.dash-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 1180px) { .dash-columns { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: var(--sp-5); } }
.dash-hero .dash-live { background: rgba(255, 255, 255, 0.16); color: #fff; }
.dash-hero .hero-split small { display: block; font-size: 12px; }

a.dash-orders-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 14px var(--sp-4);
}

.dash-orders-banner b { display: block; font-size: var(--fs-body-sm); }
.dash-orders-banner small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); }
.dash-orders-banner .chev { color: var(--app-text-subtle); }

.bar-chart {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--sp-2);
    align-items: end;
    height: 190px;
    padding-top: var(--sp-2);
}

.bar-col {
    display: grid;
    grid-template-rows: 18px 1fr 20px;
    gap: 4px;
    height: 100%;
    text-align: center;
    min-width: 0;
}

.bar-value {
    color: var(--app-text-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-track {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 10px;
    background: var(--app-surface-variant);
    overflow: hidden;
}

.bar-fill {
    width: 100%;
    border-radius: 10px;
    background: color-mix(in srgb, var(--app-primary) 45%, var(--app-primary-container));
    transition: height var(--dur-slow) var(--ease-emphasized);
}

.bar-col.is-today .bar-fill { background: var(--app-primary); }
.bar-label { color: var(--app-text-muted); font-size: 12px; font-weight: 650; }
.bar-col.is-today .bar-label { color: var(--app-primary); }
.sheet-title h3  {
    margin:4px 0 0;
    font-size:17px
}
.live-pill  {
    background:var(--app-success-container);
    color:var(--app-success);
    font-size:12px;
    font-weight:800;
    padding:7px 9px;
    border-radius:999px
}
.live-pill i  {
    display:inline-block;
    width:6px;
    height:6px;
    background:var(--app-success);
    border-radius:50%;
    margin-right:4px
}
.violet  {
    background:var(--app-primary-container);
    color:var(--app-primary)
}
.amber  {
    background:#fff3df;
    color:var(--app-warning)
}
.green  {
    background:var(--app-success-container);
    color:var(--app-success)
}
.blue  {
    background:var(--app-info-container);
    color:var(--app-info)
}
.red  {
    background:var(--app-error-container);
    color:var(--app-error)
}
.pending-banner  {
    display:flex;
    align-items:center;
    gap:11px;
    padding:14px;
    background:linear-gradient(135deg,var(--app-warning-container),var(--app-surface));
    border:1px solid #f4dfb8;
    border-radius:20px;
    margin-bottom:14px;
    text-decoration:none;
    color:var(--app-text)
}
.pending-banner .pending-bell  {
    width:38px;
    height:38px;
    border-radius:13px;
    background:#ffedc9;
    color:var(--app-warning);
    display:grid;
    place-items:center
}
.pending-banner div  {
    flex:1
}
.pending-banner b,.pending-banner small  {
    display:block
}
.pending-banner small  {
    color:var(--app-text-subtle);
    font-size:12px;
    margin-top:3px
}
.pending-banner em  {
    font-style:normal;
    color:var(--app-warning);
    font-size:12px;
    font-weight:800
}
.wizard-progress  {
    display:flex;
    align-items:center;
    justify-content:space-between
}
.wizard-progress>span  {
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--app-text-subtle)
}
.wizard-progress i  {
    width:25px;
    height:25px;
    border-radius:9px;
    background:var(--app-surface-variant);
    display:grid;
    place-items:center;
    font-style:normal;
    font-size:12px;
    font-weight:800
}
.wizard-progress b  {
    font-size:12px
}
.wizard-progress em  {
    height:2px;
    background:var(--app-surface-variant);
    flex:1;
    margin:0 7px
}
.wizard-progress span.active  {
    color:var(--app-primary)
}
.wizard-progress span.active i  {
    background:var(--app-primary);
    color:var(--app-surface)
}
@keyframes stepIn  {
    from  {
        opacity:0;
        transform:translateX(8px)
    }
    to  {
        opacity:1;
        transform:none
    }
}
.step-intro  {
    display:flex;
    gap:12px;
    align-items:center;
    margin:10px 2px 14px
}
.step-emoji  {
    width:48px;
    height:48px;
    border-radius:17px;
    background:var(--app-primary-container);
    display:grid;
    place-items:center;
    font-size:22px
}
.step-intro h2  {
    margin:0 0 4px;
    font-size:20px
}
.step-intro p  {
    margin:0;
    color:var(--app-text-subtle);
    font-size:12px;
    line-height:1.5
}
.field-caption  {
    display:block;
    color:var(--app-text-subtle);
    font-size:12px;
    font-weight:800;
    letter-spacing:.8px;
    margin:0 0 7px
}
.input-with-icon  {
    display:flex;
    align-items:center;
    border:1px solid var(--app-border);
    background:var(--app-primary-container);
    border-radius:15px;
    padding-left:12px
}
.input-with-icon i  {
    font-style:normal;
    color:var(--app-text-muted);
    font-weight:700;
    border-right:1px solid #dddfea;
    padding-right:10px
}
.input-with-icon input  {
    border:0;
    background:transparent;
    box-shadow:none
}
.found-icon  {
    width:27px;
    height:27px;
    border-radius:9px;
    background:#d4f4e1;
    display:grid;
    place-items:center
}
.gst-details  {
    border-top:1px solid var(--app-border);
    padding-top:12px
}
.gst-details summary  {
    cursor:pointer;
    font-weight:700;
    font-size:12px;
    color:var(--app-text-muted)
}
.gst-details summary small  {
    color:var(--app-text-subtle);
    font-weight:500;
    margin-left:6px
}
.wizard-next.compact  {
    width:auto;
    flex:1
}
.back-btn  {
    height:54px;
    border:1px solid var(--app-border);
    border-radius:18px;
    background:var(--app-surface);
    color:var(--app-text-muted);
    font-weight:700;
    padding:0 18px
}
.wizard-actions  {
    display:flex;
    gap:10px;
    margin-top:14px
}
.scan-main  {
    width:100%;
    border:0;
    border-radius:22px;
    padding:15px;
    background:linear-gradient(135deg,var(--app-on-primary-container),#3b3b93);
    color:var(--app-surface);
    display:flex;
    align-items:center;
    text-align:left;
    margin:6px 0 5px;
    box-shadow:0 12px 25px rgba(37,38,95,.18)
}
.scan-icon  {
    width:48px;
    height:48px;
    border-radius:15px;
    background:rgba(255,255,255,.12);
    display:grid;
    place-items:center;
    font-size:22px;
    margin-right:12px
}
.scan-main b,.scan-main small  {
    display:block
}
.scan-main b  {
    font-size:14px
}
.scan-main small  {
    color:var(--app-primary-container);
    font-size:12px;
    margin-top:3px
}
.scan-arrow  {
    margin-left:auto;
    font-size:24px
}
.scan-status-strip  {
    font-size:12px;
    color:var(--app-text-subtle);
    padding:3px 8px 15px
}
.live-dot  {
    display:inline-block;
    width:7px;
    height:7px;
    background:var(--app-success);
    border-radius:50%;
    box-shadow:0 0 0 4px rgba(47,198,118,.12);
    margin-right:7px
}
.item-edit  {
    display:flex;
    align-items:center;
    gap:9px;
    border:0;
    background:none;
    text-align:left;
    padding:0;
    min-width:0
}
.item-edit>div  {
    min-width:0
}
.item-edit b  {
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:210px
}
.item-edit small  {
    display:block;
    color:var(--app-text-subtle);
    font-size:12px;
    margin-top:4px
}
.product-glyph  {
    width:34px;
    height:34px;
    border-radius:11px;
    background:var(--app-primary-container);
    color:var(--app-primary);
    display:grid;
    place-items:center;
    font-size:12px;
    font-weight:800;
    flex:none
}
.item-total  {
    grid-column:2;
    grid-row:1/3;
    display:flex;
    align-items:flex-end;
    flex-direction:column;
    justify-content:space-between
}
.item-total b  {
    font-size:13px
}
.item-total button  {
    border:0;
    background:var(--app-error-container);
    color:var(--app-error);
    width:27px;
    height:27px;
    border-radius:9px
}
.cart-empty  {
    background:var(--app-surface);
    border:1px dashed var(--app-border);
    border-radius:20px;
    padding:26px;
    text-align:center;
    color:var(--app-text-subtle);
    display:flex;
    flex-direction:column
}
.cart-empty span  {
    font-size:26px
}
.cart-empty b  {
    color:var(--app-text-muted);
    margin:6px 0 3px;
    font-size:12px
}
.cart-empty small  {
    font-size:12px
}
.big-money  {
    display:flex;
    align-items:center;
    background:var(--app-primary-container);
    border:1px solid var(--app-border);
    border-radius:17px;
    padding:0 14px
}
.big-money i  {
    font-style:normal;
    font-size:23px;
    font-weight:800
}
.big-money input  {
    border:0;
    background:transparent;
    box-shadow:none;
    font-size:27px;
    font-weight:800
}
@keyframes sheetUp  {
    from  {
        transform:translateY(25px);
        opacity:.6
    }
    to  {
        transform:none;
        opacity:1
    }
}
@keyframes scanLine  {
    from  {
        transform:translateY(-70px)
    }
    to  {
        transform:translateY(70px)
    }
}
.product-avatar  {
    width:35px;
    height:35px;
    border-radius:12px;
    background:var(--app-primary-container);
    color:var(--app-primary);
    display:grid;
    place-items:center;
    font-weight:800
}
.product-avatar.big  {
    width:55px;
    height:55px;
    border-radius:18px;
    font-size:20px
}
.product-report-hero  {
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 3px 16px
}
.product-report-hero h2  {
    margin:0 0 4px
}
.product-report-hero p  {
    margin:0;
    color:var(--app-text-subtle);
    font-size:12px
}
.customer-pay  {
    background:var(--app-primary-container)
}
.pay-page  {
    max-width:440px;
    margin:0 auto;
    padding:18px 14px 35px
}
.pay-brand  {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px
}
.pay-brand>span  {
    width:42px;
    height:42px;
    border-radius:14px;
    background:var(--app-primary);
    color:var(--app-surface);
    display:grid;
    place-items:center;
    font-weight:800
}
.pay-brand b,.pay-brand small  {
    display:block
}
.pay-brand small  {
    color:var(--app-text-subtle);
    font-size:12px
}
.pay-public-card  {
    background:linear-gradient(135deg,var(--app-on-primary-container),var(--app-primary));
    border-radius:25px;
    padding:20px;
    color:var(--app-surface);
    text-align:center;
    box-shadow:0 12px 28px rgba(64,57,168,.2)
}
.pay-public-card small,.pay-public-card span  {
    display:block;
    color:var(--app-primary-container)
}
.pay-public-card h1  {
    font-size:40px;
    margin:7px 0
}
.pay-public-card span  {
    font-size:12px
}
.public-invoice,.qr-pay  {
    background:var(--app-surface);
    border:1px solid var(--app-border);
    border-radius:22px;
    padding:14px;
    margin-top:11px
}
.public-head,.public-line  {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.public-head  {
    border-bottom:1px solid var(--app-border);
    padding-bottom:9px;
    font-size:12px
}
.public-line  {
    padding:10px 0;
    border-bottom:1px solid var(--app-border)
}
.public-line:last-child  {
    border-bottom:0
}
.public-line b,.public-line strong  {
    font-size:12px
}
.public-line small  {
    display:block;
    color:var(--app-text-subtle);
    font-size:12px;
    margin-top:3px
}
.qr-pay  {
    text-align:center
}
.qr-wrap  {
    width:230px;
    height:230px;
    margin:0 auto 10px;
    background:var(--app-surface);
    display:grid;
    place-items:center
}
.qr-pay>b,.qr-pay>small  {
    display:block
}
.qr-pay>small  {
    font-size:12px;
    color:var(--app-text-subtle);
    margin:5px 0 12px
}
.pay-buttons  {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px
}
.pay-buttons a,.pay-buttons button  {
    border:0;
    border-radius:13px;
    padding:11px;
    text-decoration:none;
    font-size:12px;
    font-weight:800
}
.pay-buttons a  {
    background:var(--app-primary);
    color:var(--app-surface)
}
.pay-buttons button  {
    background:var(--app-primary-container);
    color:var(--app-primary)
}
.fake-warning  {
    background:var(--app-warning-container);
    color:var(--app-warning);
    border:1px solid #f4dfbd;
    border-radius:15px;
    padding:11px;
    font-size:12px;
    line-height:1.5;
    margin-top:11px
}
.paid-confirm  {
    width:100%;
    height:50px;
    border:0;
    border-radius:16px;
    background:var(--app-success);
    color:var(--app-surface);
    font-weight:800;
    margin-top:11px
}
.paid-confirm:disabled  {
    background:var(--app-border-strong)
}
.public-note  {
    text-align:center;
    color:var(--app-text-subtle);
    font-size:12px
}
.auth  {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:20px
}
.brand  {
    font-size:26px;
    font-weight:800;
    margin-bottom:15px
}
.input  {
    width:100%;
    height:48px;
    border:1px solid var(--app-border);
    border-radius:14px;
    background:var(--app-primary-container);
    padding:0 12px
}
.row  {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
}
@media (max-width:360px)  {
    .item-edit b  {
        max-width:160px
    }
}
.auth-page  {
    min-height: 100vh;
    background:
    radial-gradient(
    circle at 10% 10%,
    rgba(var(--app-primary-rgb), 0.18),
    transparent 34%
    ),
    radial-gradient(
    circle at 90% 90%,
    rgba(76, 199, 255, 0.12),
    transparent 32%
    ),
    var(--app-primary-container);
    color: var(--app-text);
}
.auth-shell  {
    width: min(1180px, calc(100% - 40px));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns:
    minmax(360px, 0.95fr)
    minmax(420px, 1.05fr);
}
.register-shell  {
    grid-template-columns:
    minmax(350px, 0.86fr)
    minmax(480px, 1.14fr);
}
.auth-visual  {
    padding: 72px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.auth-visual::before  {
    content: '';
    width: 430px;
    height: 430px;
    position: absolute;
    top: 2%;
    right: -26%;
    border-radius: 50%;
    background:
    linear-gradient(
    145deg,
    rgba(var(--app-primary-rgb), 0.22),
    rgba(var(--app-primary-rgb), 0)
    );
}
.auth-logo-mark  {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background:
    linear-gradient(
    135deg,
    var(--app-primary),
    var(--app-primary)
    );
    color: var(--app-surface);
    font-size: 25px;
    font-weight: 800;
    box-shadow:
    0 18px 35px
    rgba(var(--app-primary-rgb), 0.28);
}
.auth-visual h1  {
    max-width: 560px;
    margin: 16px 0 14px;
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.04;
    letter-spacing: -2.2px;
}
.auth-visual > p  {
    max-width: 520px;
    margin: 0;
    color: var(--app-text-muted);
    font-size: 16px;
    line-height: 1.75;
}
.auth-feature-grid  {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 40px;
}
.auth-feature-grid article  {
    min-height: 128px;
    padding: 18px;
    border:
    1px solid
    rgba(225, 228, 240, 0.95);
    border-radius: 22px;
    background:
    rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    box-shadow:
    0 14px 40px
    rgba(36, 42, 78, 0.06);
}
.auth-feature-grid article > span  {
    width: 38px;
    height: 38px;
    margin-bottom: 16px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 18px;
    font-weight: 800;
}
.auth-feature-grid b,
.auth-feature-grid small  {
    display: block;
}
.auth-feature-grid b  {
    margin-bottom: 5px;
    font-size: 13px;
}
.auth-feature-grid small  {
    color: var(--app-text-subtle);
    font-size: 12px;
    line-height: 1.45;
}
.auth-card-wrap  {
    padding: 42px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.auth-card  {
    width: min(100%, 500px);
    padding: 34px;
    border:
    1px solid
    rgba(226, 229, 239, 0.95);
    border-radius: 32px;
    background:
    rgba(255, 255, 255, 0.96);
    box-shadow:
    0 30px 80px
    rgba(30, 37, 76, 0.12);
}
.registration-card  {
    width: min(100%, 560px);
}
.auth-brand-mobile  {
    display: none;
    align-items: center;
    gap: 12px;
    width: min(100%, 560px);
    margin-bottom: 16px;
}
.auth-brand-mobile .auth-logo-mark  {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 20px;
}
.auth-brand-mobile b,
.auth-brand-mobile small  {
    display: block;
}
.auth-brand-mobile b  {
    font-size: 18px;
}
.auth-brand-mobile small  {
    color: var(--app-text-subtle);
    font-size: 12px;
}
.auth-heading  {
    margin-bottom: 24px;
}
.auth-heading h2  {
    margin: 8px 0 7px;
    font-size: 26px;
    line-height: 1.14;
    letter-spacing: -0.8px;
}
.auth-heading p  {
    margin: 0;
    color: var(--app-text-subtle);
    font-size: 13px;
    line-height: 1.55;
}
.auth-form  {
    display: grid;
    gap: 16px;
}
.auth-input-group:focus-within,
.password-input:focus-within  {
    border-color: var(--app-primary);
    background: var(--app-surface);
    box-shadow:
    0 0 0 4px
    rgba(var(--app-primary-rgb), 0.10);
}
.auth-input-group,
.password-input  {
    transition: 0.18s ease;
    outline: none;
    font-weight: 700;
    font-size: 14px;
    font: inherit;
    color: var(--app-text);
    background: var(--app-surface);
    border-radius: var(--r-md);
    border: 1px solid var(--app-border-strong, var(--app-border));
    min-height: 52px;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.auth-input-group i  {
    padding-left: 16px;
    color: var(--app-text-muted);
    font-style: normal;
    font-size: 13px;
    font-weight: 800;
}
.auth-input-group input,
.password-input input  {
    flex: 1;
    min-width: 0;
    min-height: 54px;
    border: 0;
    background: transparent;
    color: var(--app-text);
    font: inherit;
    font-weight: 700;
    outline: none;
}
.auth-input-group input  {
    padding: 0 16px 0 9px;
}
.password-input input  {
    padding: 0 10px 0 16px;
}
.password-toggle  {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    margin-right: 4px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--app-text-subtle);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.password-toggle.visible  {
    color: var(--app-primary);
    background: var(--app-primary-container);
}
.success-text  {
    color: var(--app-success);
}
.error-text  {
    color: var(--app-error);
}
.auth-secondary,
.auth-back  {
    min-height: 56px;
    border-radius: 17px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
}
.auth-primary.compact  {
    min-width: 190px;
}
.auth-secondary  {
    display: grid;
    place-items: center;
    border: 1px solid var(--app-border);
    background: var(--app-primary-container);
    color: var(--app-text-muted);
}
.auth-back  {
    padding: 0 18px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text-muted);
}
.auth-separator  {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 14px;
    color: var(--app-text-subtle);
    font-size: 12px;
    font-weight: 800;
}
.auth-separator::before,
.auth-separator::after  {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--app-primary-container);
}
.auth-footnote,
.auth-login-link  {
    margin: 18px 0 0;
    color: var(--app-text-subtle);
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
}
.auth-login-link  {
    color: var(--app-text-subtle);
    font-size: 12px;
}
.auth-login-link a  {
    color: var(--app-primary);
    font-weight: 800;
    text-decoration: none;
}
.registration-progress  {
    display: grid;
    grid-template-columns:
    auto 1fr auto 1fr auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
}
.registration-progress button  {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--app-text-subtle);
    display: grid;
    justify-items: center;
    gap: 6px;
    cursor: pointer;
}
.registration-progress button i  {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--app-primary-container);
    color: var(--app-text-subtle);
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}
.registration-progress button span  {
    font-size: 12px;
    font-weight: 800;
}
.registration-progress button.active i  {
    background: var(--app-primary-container);
    color: var(--app-primary);
}
.registration-progress button.current i  {
    background:
    linear-gradient(
    135deg,
    var(--app-primary),
    var(--app-primary)
    );
    color: var(--app-surface);
    box-shadow:
    0 8px 18px
    rgba(var(--app-primary-rgb), 0.25);
}
.registration-progress em  {
    height: 2px;
    border-radius: 999px;
    background: var(--app-primary-container);
}
.register-step  {
    display: none;
}
.register-step.active  {
    display: grid;
    gap: 16px;
    animation:
    registerStepIn
    0.22s ease both;
}
@keyframes registerStepIn  {
    from  {
        opacity: 0;
        transform: translateX(12px);
    }
    to  {
        opacity: 1;
        transform: translateX(0);
    }
}
.business-type-grid  {
    display: grid;
    gap: 10px;
}
.business-type-card  {
    min-height: 84px;
    padding: 14px;
    display: grid;
    grid-template-columns:
    48px 1fr 28px;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    background: var(--app-primary-container);
    cursor: pointer;
}
.business-type-card input  {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.business-type-card:has(input:checked)  {
    border-color: var(--app-primary);
    background: var(--app-primary-container);
    box-shadow:
    0 0 0 3px
    rgba(105, 90, 240, 0.08);
}
.business-type-icon  {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 20px;
    font-weight: 800;
}
.business-type-card b,
.business-type-card small  {
    display: block;
}
.business-type-card b  {
    margin-bottom: 5px;
    font-size: 14px;
}
.business-type-card small  {
    color: var(--app-text-subtle);
    font-size: 12px;
    line-height: 1.45;
}
.business-type-card > i  {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--app-surface-variant);
    color: var(--app-surface);
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}
.business-type-card:has(input:checked) > i  {
    background: var(--app-primary);
}
.setup-toggle-card  {
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    background: var(--app-primary-container);
}
.setup-toggle-card b,
.setup-toggle-card small  {
    display: block;
}
.setup-toggle-card b  {
    margin-bottom: 5px;
    font-size: 14px;
}
.setup-toggle-card small  {
    color: var(--app-text-subtle);
    font-size: 12px;
    line-height: 1.4;
}
.setup-toggle-card input  {
    position: absolute;
    opacity: 0;
}
.setup-toggle-card > i  {
    width: 46px;
    height: 26px;
    position: relative;
    border-radius: 999px;
    background: #dfe2eb;
}
.setup-toggle-card > i::after  {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: var(--app-surface);
    box-shadow:
    0 2px 7px
    rgba(29, 35, 63, 0.15);
    transition: 0.2s ease;
}
.setup-toggle-card:has(input:checked) > i  {
    background: var(--app-primary);
}
.setup-toggle-card:has(input:checked) > i::after  {
    transform: translateX(20px);
}
.registration-subpanel  {
    padding: 14px;
    display: grid;
    gap: 14px;
    border-radius: 20px;
    background: var(--app-primary-container);
    border: 1px solid var(--app-border);
}
.auth-two-col  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.register-nav-row  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}
.register-summary  {
    padding: 13px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 17px;
    background: var(--app-success-container);
    color: var(--app-success);
}
.register-summary > span  {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #d6f2e2;
    font-weight: 800;
}
.register-summary p  {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 700;
}
.setup-preview  {
    max-width: 460px;
    margin-top: 38px;
    display: grid;
    gap: 10px;
}
.setup-preview-step  {
    padding: 13px 14px;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 18px;
    opacity: 0.52;
}
.setup-preview-step > span  {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--app-surface-variant);
    font-size: 12px;
    font-weight: 800;
}
.setup-preview-step b,
.setup-preview-step small  {
    display: block;
}
.setup-preview-step b  {
    margin-bottom: 4px;
    font-size: 13px;
}
.setup-preview-step small  {
    color: var(--app-text-subtle);
    font-size: 12px;
}
.setup-preview-step.active  {
    border-color: var(--app-primary-container);
    background:
    rgba(255, 255, 255, 0.68);
    opacity: 1;
}
.setup-preview-step.active > span,
.setup-preview-step.complete > span  {
    background: var(--app-primary);
    color: var(--app-surface);
}
@media (max-width: 900px)  {
    .auth-shell,
    .register-shell  {
        width: min(100%, 560px);
        min-height: 100vh;
        padding: 24px 16px 36px;
        display: block;
    }
    .auth-visual  {
        display: none;
    }
    .auth-card-wrap  {
        min-height:
        calc(100vh - 60px);
        padding: 0;
        justify-content: center;
    }
    .auth-brand-mobile  {
        display: flex;
    }
    .auth-card  {
        padding: 24px;
        border-radius: 28px;
    }
}
@media (max-width: 520px)  {
    .auth-shell,
    .register-shell  {
        width: 100%;
        padding: 18px 14px 28px;
    }
    .auth-card-wrap  {
        justify-content: flex-start;
    }
    .auth-card  {
        padding: 20px;
        border-radius: 25px;
    }
    .auth-heading h2  {
        font-size: 23px;
    }
    .auth-two-col  {
        grid-template-columns: 1fr;
    }
    .register-nav-row  {
        align-items: stretch;
    }
    .register-nav-row .auth-primary.compact  {
        min-width: 0;
        flex: 1;
    }
    .registration-progress button span  {
        display: none;
    }
}

.recent-panel-v6 {
    margin-bottom: 16px;
}

.billing-wizard-shell {
    display: flex;
    flex-direction: column;
}

.premium-progress {
    margin-bottom: 18px;
    padding: 3px 2px 0;
}

.premium-progress span.current i,
.premium-progress span.active:last-of-type i {
    box-shadow: 0 7px 17px rgba(var(--app-primary-rgb), 0.22);
}

.compact-step-intro {
    margin-bottom: 12px;
}

.compact-step-intro h2 {
    margin-top: 4px;
}

.customer-step-card,
.payment-card-v6 {
    padding: 15px;
    border-radius: 22px;
}

.customer-mobile-input input {
    font-size: 17px;
    letter-spacing: 0.4px;
}

.premium-scan {
    min-height: 86px;
    border-radius: 23px;
    box-shadow: 0 14px 30px rgba(37, 40, 112, 0.18);
}

.cart-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.add-product-btn {
    min-height: 38px;
    padding: 0 13px;
    border-radius: 12px;
    font-size: 12px;
}

.qty-stepper {
    display: inline-grid;
    grid-template-columns: 38px minmax(40px, auto) 38px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-primary-container);
}

.qty-stepper button {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--app-primary);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.qty-stepper button:active {
    background: var(--app-primary-container);
}

.qty-stepper strong {
    min-width: 40px;
    padding: 0 7px;
    color: var(--app-text);
    text-align: center;
    font-size: 14px;
}

.cart-qty-stepper {
    grid-template-columns: 32px minmax(34px, auto) 32px;
    border-radius: 12px;
}

.cart-qty-stepper button {
    width: 32px;
    height: 32px;
    font-size: 17px;
}

.cart-qty-stepper strong {
    min-width: 34px;
    font-size: 12px;
}

.sticky-flow-actions {
    margin-top: 12px;
    padding-bottom: 5px;
}

.payment-summary-v6 {
    padding: 18px 0 15px;
    text-align: center;
}

.payment-summary-v6 strong {
    display: block;
    margin: 5px 0 3px;
    color: var(--app-text);
    font-size: 39px;
    line-height: 1;
    letter-spacing: -1.6px;
}

.payment-summary-v6 small {
    color: var(--app-text-subtle);
    font-size: 12px;
}

.receive-title-row {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.receive-title-row small {
    display: block;
    margin-top: 3px;
    color: var(--app-text-subtle);
    font-size: 12px;
}

.receive-title-row button {
    min-height: 31px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 12px;
    font-weight: 800;
}

.product-sheet-price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 105px;
    gap: 10px;
}

.premium-sheet-save {
    min-height: 55px;
    margin-top: 4px;
    border-radius: 17px;
    box-shadow: 0 12px 25px rgba(var(--app-primary-rgb), 0.20);
}

@media (max-width: 390px)  {

    .product-sheet-price-row {
        grid-template-columns: minmax(0, 1fr) 94px;
    }
}

.upi-customer-panel.hidden {
    display: none;
}

.upi-customer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.upi-customer-head h3 {
    margin: 3px 0;
    font-size: 18px;
    letter-spacing: -0.4px;
}

.upi-customer-head p {
    max-width: 235px;
    margin: 0;
    color: var(--app-text-subtle);
    font-size: 12px;
    line-height: 1.5;
}

.upi-live-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border-radius: 999px;
    background: var(--app-success-container);
    color: var(--app-success);
    font-size: 12px;
    font-weight: 800;
}

.upi-live-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--app-success);
    box-shadow:
        0 0 0 4px
        rgba(41, 189, 118, 0.12);
}

.upi-amount-display {
    margin-bottom: 10px;
    text-align: center;
}

.upi-amount-display > span,
.customer-qr-amount small {
    display: block;
    color: var(--app-text-subtle);
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 800;
}

.upi-amount-display strong {
    display: block;
    margin-top: 3px;
    color: var(--app-text);
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -1px;
}

.upi-qr-stage,
.customer-qr-stage {
    min-height: 298px;
    position: relative;
    display: grid;
    place-items: center;
}

.upi-qr-glow,
.customer-qr-glow {
    width: 240px;
    height: 240px;
    position: absolute;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(var(--app-primary-rgb), 0.18),
            rgba(var(--app-primary-rgb), 0)
        );
    filter: blur(6px);
}

.customer-qr-wrap {
    width: 292px;
    height: 292px;
    position: relative;
    z-index: 2;
    padding: 10px;
    display: grid;
    place-items: center;
    border: 1px solid var(--app-border);
    border-radius: 28px;
    background: var(--app-surface);
    box-shadow:
        0 22px 48px
        rgba(21, 27, 56, 0.14);
}

#upiQr,
#payQr {
    width: 270px;
    height: 270px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--app-surface);
}

#upiQr canvas,
#upiQr img,
#payQr canvas,
#payQr img {
    width: 270px;
    height: 270px;
    max-width: 100%;
    max-height: 100%;
}

.upi-payment-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0;
}

.upi-payment-details > span {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
}

.upi-payment-details small,
.upi-payment-details b {
    display: block;
}

.upi-payment-details small {
    margin-bottom: 3px;
    color: var(--app-text-subtle);
    font-size: 12px;
    letter-spacing: 0.8px;
    font-weight: 800;
}

.upi-payment-details b {
    overflow: hidden;
    color: #31374c;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upi-intent-button {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:
        linear-gradient(
            135deg,
            var(--app-primary),
            var(--app-primary)
        );
    color: var(--app-surface);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        0 12px 24px
        rgba(var(--app-primary-rgb), 0.20);
}

.upi-helper-text {
    display: block;
    margin-top: 8px;
    color: var(--app-text-subtle);
    text-align: center;
    font-size: 12px;
}

.upi-qr-error {
    position: relative;
    z-index: 4;
    max-width: 280px;
    padding: 14px;
    border: 1px solid #ffd7dc;
    border-radius: 16px;
    background: var(--app-error-container);
    color: var(--app-error);
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 800;
}

.pay-public-card-v62 {
    position: relative;
    overflow: hidden;
}

.pay-public-card .public-status-pill {
    display: inline-block;
    margin-top: 12px;
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.17);
    color: var(--app-surface);
    font-size: 12px;
    font-weight: 800;
}

.public-invoice-v62 {
    overflow: hidden;
}

.public-customer-line {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--app-border);
}

.public-customer-line > span {
    min-width: 0;
}

.public-customer-line small,
.public-customer-line b {
    display: block;
}

.public-customer-line small {
    margin-bottom: 3px;
    color: var(--app-text-subtle);
    font-size: 12px;
    letter-spacing: 0.8px;
    font-weight: 800;
}

.public-customer-line b {
    overflow: hidden;
    color: var(--app-text);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-lines {
    display: grid;
}

.public-invoice-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--app-border);
    background: var(--app-primary-container);
}

.public-invoice-totals > span {
    padding: 10px;
    border-radius: 14px;
    background: var(--app-surface);
}

.public-invoice-totals > span.due {
    background: var(--app-warning-container);
}

.public-invoice-totals small,
.public-invoice-totals b {
    display: block;
}

.public-invoice-totals small {
    margin-bottom: 4px;
    color: var(--app-text-subtle);
    font-size: 12px;
    font-weight: 800;
}

.public-invoice-totals b {
    color: var(--app-text);
    font-size: 13px;
}

.public-invoice-totals .due b {
    color: var(--app-warning);
}

.customer-qr-pay {
    padding: 18px 15px;
    border: 1px solid var(--app-primary-container);
    border-radius: 27px;
    background:
        radial-gradient(
            circle at 90% 6%,
            rgba(var(--app-primary-rgb), 0.10),
            transparent 30%
        ),
        var(--app-surface);
}

.customer-qr-head {
    text-align: center;
}

.customer-qr-head h2 {
    margin: 5px 0 4px;
    color: var(--app-text);
    font-size: 22px;
    letter-spacing: -0.7px;
}

.customer-qr-head p {
    max-width: 290px;
    margin: 0 auto;
    color: var(--app-text-subtle);
    font-size: 12px;
    line-height: 1.5;
}

.customer-qr-amount {
    margin-top: 14px;
    text-align: center;
}

.customer-qr-amount strong {
    display: block;
    margin-top: 3px;
    color: var(--app-primary);
    font-size: 32px;
    letter-spacing: -0.8px;
}

.customer-qr-note {
    display: block;
    max-width: 300px;
    margin: 8px auto 14px;
    color: var(--app-text-subtle);
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
}

.customer-pay-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.customer-pay-buttons > * {
    min-height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.customer-pay-buttons #payNow {
    background:
        linear-gradient(
            135deg,
            var(--app-primary),
            var(--app-primary)
        );
    color: var(--app-surface);
}

.customer-pay-buttons #saveQr {
    border: 1px solid var(--app-border);
    background: var(--app-primary-container);
    color: var(--app-text-muted);
}

@media (max-width: 420px)  {
    .customer-qr-wrap {
        width: min(292px, 100%);
        height: auto;
        aspect-ratio: 1;
    }

    #upiQr,
    #payQr {
        width: min(270px, 100%);
        height: auto;
        min-height: 250px;
    }

    .upi-payment-details,
    .public-customer-line {
        grid-template-columns: 1fr;
    }

    .customer-pay-buttons {
        grid-template-columns: 1fr;
    }
}

.bulk-result {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--app-border);
    border-radius: 22px;
    background: var(--app-surface);
}

.customer-product-page {
    min-height: 100vh;
    background: var(--app-primary-container);
}

.customer-product-shell {
    width: min(100%, 460px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 24px 16px 36px;
}

.customer-product-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.customer-product-brand > span {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background:
        linear-gradient(
            135deg,
            var(--app-primary),
            var(--app-primary)
        );
    color: var(--app-surface);
    font-weight: 800;
}

.customer-product-brand b,
.customer-product-brand small {
    display: block;
}

.customer-product-brand b {
    font-size: 13px;
}

.customer-product-brand small {
    color: var(--app-text-subtle);
    font-size: 12px;
}

.customer-product-card {
    padding: 22px;
    border: 1px solid var(--app-border);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(var(--app-primary-rgb), 0.10),
            transparent 28%
        ),
        var(--app-surface);
    box-shadow:
        0 20px 55px
        rgba(36, 42, 76, 0.09);
}

.customer-product-card h1 {
    margin: 6px 0 10px;
    font-size: 28px;
    letter-spacing: -1px;
}

.customer-product-price {
    margin-bottom: 12px;
    color: var(--app-primary);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -1px;
}

.customer-product-chip {
    width: fit-content;
    margin-bottom: 16px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 12px;
    font-weight: 800;
}

.customer-product-info-row {
    padding: 13px 0;
    border-top: 1px solid var(--app-border);
}

.customer-product-info-row small,
.customer-product-info-row b {
    display: block;
}

.customer-product-info-row small {
    margin-bottom: 4px;
    color: var(--app-text-subtle);
    font-size: 12px;
    letter-spacing: 0.8px;
    font-weight: 800;
}

.customer-product-info-row b {
    color: #31374b;
    font-size: 12px;
}

.customer-product-note {
    margin: 16px 0 0;
    color: var(--app-text-subtle);
    font-size: 12px;
    line-height: 1.55;
}

.dash-v64-welcome {
    margin: 2px 0 13px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.dash-v64-welcome h2 {
    margin: 5px 0 3px;
    color: var(--app-text);
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: -0.55px;
}

.dash-v64-welcome p {
    margin: 0;
    color: var(--app-text-subtle);
    font-size: 12px;
}

.premium-live-pill {
    margin-top: 2px;
    box-shadow: 0 7px 18px rgba(25, 166, 102, .10);
}

.dash-v64-hero {
    min-height: 300px;
    position: relative;
    overflow: hidden;
    padding: 17px;
    border-radius: 29px;
    color: var(--app-surface);
    background:
        linear-gradient(145deg, var(--app-info) 0%, var(--app-info) 48%, var(--app-info) 100%);
    box-shadow: 0 22px 45px rgba(24, 70, 157, .25);
}

.dash-v64-orb {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 50%;
    pointer-events: none;
}

.dash-v64-orb-one {
    width: 260px;
    height: 260px;
    top: -120px;
    right: -80px;
}

.dash-v64-orb-two {
    width: 190px;
    height: 190px;
    top: -55px;
    right: -25px;
    background: rgba(255, 255, 255, .025);
}

.dash-v64-hero-top {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
    align-items: center;
}

.dash-v64-app-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #9ed3ff, var(--app-info-container));
    color: var(--app-info);
    font-size: 20px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}

.dash-v64-hero-title b,
.dash-v64-hero-title small {
    display: block;
}

.dash-v64-hero-title b {
    margin-bottom: 3px;
    font-size: 13px;
}

.dash-v64-hero-title small {
    color: rgba(255,255,255,.68);
    font-size: 12px;
}

.dash-v64-status {
    padding: 7px 9px;
    border: 1px solid rgba(94, 239, 188, .22);
    border-radius: 999px;
    background: rgba(20, 174, 119, .20);
    color: var(--app-success);
    font-size: 12px;
    font-weight: 800;
}

.dash-v64-sales-row {
    position: relative;
    z-index: 2;
    margin-top: 23px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: end;
    gap: 12px;
}

.dash-v64-sales-row span,
.dash-v64-sales-row small,
.dash-v64-sales-row strong {
    display: block;
}

.dash-v64-sales-row span {
    color: rgba(255,255,255,.68);
    font-size: 12px;
    letter-spacing: .8px;
    font-weight: 800;
}

.dash-v64-sales-row strong {
    margin: 5px 0 4px;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -1.4px;
}

.dash-v64-sales-row small {
    color: rgba(255,255,255,.72);
    font-size: 12px;
}

.dash-v64-spark-wrap {
    min-height: 78px;
    display: flex;
    align-items: end;
}

.dash-v64-sparkline {
    width: 100%;
    height: 76px;
    overflow: visible;
}

.dash-v64-spark-area {
    fill: url(#sparkFill);
}

.dash-v64-spark-line {
    fill: none;
    stroke: #9fd5ff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 4px 6px rgba(126,205,255,.28));
}

.dash-v64-spark-dot {
    fill: #dff3ff;
    stroke: var(--app-info);
    stroke-width: 2;
}

.dash-v64-hero-metrics {
    position: relative;
    z-index: 2;
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.dash-v64-hero-metrics article {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
}

.dash-v64-hero-metrics small,
.dash-v64-hero-metrics b {
    display: block;
}

.dash-v64-hero-metrics small {
    margin-bottom: 5px;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    letter-spacing: .55px;
    font-weight: 800;
}

.dash-v64-hero-metrics b {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-v64-primary-cta {
    min-height: 49px;
    position: relative;
    z-index: 2;
    margin-top: 12px;
    padding: 0 14px;
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    background: linear-gradient(90deg, var(--app-info), var(--app-primary));
    color: var(--app-surface);
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(19, 44, 104, .24);
}

.dash-v64-primary-cta > span {
    font-size: 20px;
    font-weight: 400;
}

.dash-v64-primary-cta b {
    font-size: 12px;
    text-align: center;
}

.dash-v64-primary-cta em {
    font-style: normal;
    font-size: 18px;
}

.dash-v64-section-head {
    margin: 19px 2px 9px;
}

.dash-v64-section-head h3 {
    margin: 4px 0 0;
    font-size: 14px;
    letter-spacing: -.25px;
}

.dash-v64-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.dash-v64-actions::-webkit-scrollbar {
    display: none;
}

.dash-v64-action {
    min-width: 78px;
    min-height: 98px;
    padding: 11px 7px;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 5px;
    border: 1px solid var(--app-border);
    border-radius: 19px;
    background: var(--app-surface);
    color: var(--app-text);
    text-align: center;
    text-decoration: none;
    box-shadow: 0 12px 25px rgba(36, 42, 72, .055);
}

.dash-v64-action > span {
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 800;
}

.dash-v64-action.blue > span { background:var(--app-info-container); color:var(--app-info); }
.dash-v64-action.green > span { background:#e7f8ef; color:var(--app-success); }
.dash-v64-action.violet > span { background:var(--app-primary-container); color:var(--app-primary); }
.dash-v64-action.orange > span { background:var(--app-warning-container); color:var(--app-warning); }
.dash-v64-action.amber > span { background:#fff5df; color:var(--app-warning); }
.dash-v64-action.cyan > span { background:var(--app-info-container); color:var(--app-accent); }

.dash-v64-action b {
    font-size: 12px;
}

.dash-v64-action small {
    color: var(--app-text-subtle);
    font-size: 12px;
    line-height: 1.3;
}

.dash-v64-metric-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.dash-v64-metric-grid article {
    padding: 11px;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 9px;
    align-items: center;
    border: 1px solid var(--app-border);
    border-radius: 17px;
    background: var(--app-surface);
    box-shadow: 0 10px 22px rgba(38, 44, 74, .045);
}

.dash-v64-metric-grid small,
.dash-v64-metric-grid b {
    display: block;
}

.dash-v64-metric-grid small {
    margin-bottom: 3px;
    color: var(--app-text-subtle);
    font-size: 12px;
}

.dash-v64-metric-grid b {
    font-size: 12px;
}

.premium-pending-banner {
    margin-top: 12px;
}

.dash-v64-recent {
    margin-bottom: 18px;
}

@media (max-width: 390px)  {
    .dash-v64-hero {
        padding: 15px;
    }

    .dash-v64-sales-row strong {
        font-size: 30px;
    }

    .dash-v64-actions {
        grid-template-columns: repeat(4, minmax(76px, 1fr));
    }
}

.wire-chart-panel {
    margin-top: 13px;
    padding: 15px;
    border-radius: 24px;
    overflow: hidden;
}

.wire-chart-head h3 {
    margin-top: 4px;
}

.wire-chart-summary {
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wire-chart-summary small,
.wire-chart-summary strong {
    display: block;
}

.wire-chart-summary small {
    margin-bottom: 3px;
    color: var(--app-text-subtle);
    font-size: 12px;
    letter-spacing: 0.7px;
    font-weight: 800;
}

.wire-chart-summary strong {
    font-size: 17px;
}

.wire-chart-chip {
    padding: 7px 9px;
    border-radius: 10px;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 12px;
    font-weight: 800;
}

.wire-chart-stage {
    height: 208px;
    position: relative;
    margin-top: 5px;
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(var(--app-primary-rgb), 0.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            var(--app-primary-container),
            var(--app-surface)
        );
}

.wire-chart-grid {
    position: absolute;
    inset: 18px 10px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.wire-chart-grid i {
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(129, 134, 154, 0.12),
            transparent
        );
}

.sales-wire-chart {
    width: 100%;
    height: 172px;
    position: relative;
    z-index: 2;
    overflow: visible;
}

.wire-area {
    fill: url(#wireAreaGradient);
}

.wire-line {
    fill: none;
    stroke: var(--app-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wire-point-hit {
    fill: transparent;
    cursor: pointer;
}

.wire-point-dot {
    fill: var(--app-surface);
    stroke: var(--app-primary);
    stroke-width: 2.5;
    pointer-events: none;
}

.wire-point-group.current
.wire-point-dot {
    fill: var(--app-success);
    stroke: var(--app-surface);
    stroke-width: 3;
    filter:
        drop-shadow(
            0 3px 6px
            rgba(45, 181, 134, 0.35)
        );
}

.wire-days {
    position: absolute;
    right: 11px;
    bottom: 8px;
    left: 11px;
    z-index: 3;
    display: grid;
    grid-template-columns:
        repeat(7, 1fr);
}

.wire-days span {
    color: var(--app-text-subtle);
    text-align: center;
    font-size: 12px;
    font-weight: 800;
}

.wire-days span.current {
    color: var(--app-success);
}

.wire-tooltip {
    position: absolute;
    z-index: 5;
    padding: 5px 7px;
    border-radius: 9px;
    background: var(--app-text);
    color: var(--app-surface);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
    transform:
        translate(
            -50%,
            -100%
        );
    box-shadow:
        0 8px 18px
        rgba(21, 26, 48, 0.18);
}

.code-studio-label {
    display: block;
    margin-bottom: 9px;
    color: var(--app-text-subtle);
    font-size: 7.5px;
    letter-spacing: 0.9px;
    font-weight: 800;
}

.code-segmented {
    padding: 3px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    border-radius: 15px;
    background: var(--app-primary-container);
}

.code-segmented label {
    position: relative;
}

.code-segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.code-segmented span {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 12px;
    color: var(--app-text-muted);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.18s ease;
}

.code-segmented i {
    font-style: normal;
    font-size: 15px;
}

.code-segmented input:checked + span {
    background: var(--app-surface);
    color: var(--app-primary);
    box-shadow:
        0 5px 15px
        rgba(31, 37, 67, 0.08);
}

.code-qty-stepper {
    padding: 3px;
    display: grid;
    grid-template-columns:
        34px 48px 34px;
    align-items: center;
    border-radius: 14px;
    background: var(--app-primary-container);
}

.code-qty-stepper button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: var(--app-surface);
    color: var(--app-primary);
    font-size: 19px;
    font-weight: 800;
    cursor: pointer;
}

.code-qty-stepper strong {
    color: var(--app-text);
    text-align: center;
    font-size: 15px;
}

.code-results {
    margin-top: 13px;
    padding: 12px;
}

.code-results-head {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.code-results-head h2 {
    margin: 4px 0 0;
    font-size: 14px;
}

.code-results-actions {
    display: flex;
    gap: 6px;
}

.code-results-actions button {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--app-border);
    border-radius: 11px;
    background: var(--app-primary-container);
    color: var(--app-text-muted);
    font-size: 8px;
    font-weight: 800;
}

.code-search {
    min-height: 46px;
    margin-bottom: 9px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-primary-container);
}

.code-search span {
    color: var(--app-text-subtle);
    font-size: 16px;
}

.code-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--app-text);
    font: inherit;
    font-size: 11px;
    outline: none;
}

.code-product-list {
    display: grid;
    gap: 7px;
}

.code-product-option {
    min-height: 62px;
    padding: 8px;
    border: 1px solid var(--app-border);
    border-radius: 15px;
    display: grid;
    grid-template-columns: 38px 1fr 20px;
    gap: 9px;
    align-items: center;
    background: var(--app-surface);
    color: inherit;
    text-align: left;
}

.code-product-option.hidden {
    display: none;
}

.code-option-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 16px;
}

.code-option-icon.blank {
    background: var(--app-success-container);
    color: var(--app-success);
}

.code-product-option b,
.code-product-option small {
    display: block;
}

.code-product-option b {
    margin-bottom: 3px;
    font-size: 10px;
}

.code-product-option small {
    color: var(--app-text-subtle);
    font-size: 8px;
}

.code-product-option > i {
    color: var(--app-text-subtle);
    font-size: 18px;
    font-style: normal;
}

.sheet-open {
    overflow: hidden;
}

.emi-config-head {
    margin-bottom: 11px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.emi-config-head h3 {
    margin: 4px 0 0;
    font-size: 13px;
}

.emi-badge {
    padding: 6px 8px;
    border-radius: 999px;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 12px;
    font-weight: 800;
}

.emi-config-row {
    margin-bottom: 10px;
    padding: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 14px;
    background: var(--app-surface);
}

.emi-config-row small,
.emi-config-row b {
    display: block;
}

.emi-config-row small {
    margin-bottom: 2px;
    color: var(--app-text-subtle);
    font-size: 12px;
    font-weight: 800;
}

.emi-config-row b {
    font-size: 12px;
}

.emi-month-stepper {
    grid-template-columns:
        32px 40px 32px;
}

.emi-month-stepper button {
    width: 32px;
    height: 32px;
}

.emi-plan-card {
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 23px;
    background: var(--app-surface);
    box-shadow:
        0 14px 34px
        rgba(34, 40, 72, 0.06);
}

.emi-plan-hero {
    padding: 15px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    background:
        radial-gradient(
            circle at 93% 10%,
            rgba(255, 255, 255, 0.14),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            var(--app-primary),
            var(--app-primary)
        );
    color: var(--app-surface);
}

.emi-plan-hero .soft-label {
    color: var(--app-primary-container);
}

.emi-plan-hero h2 {
    margin: 4px 0 3px;
    color: var(--app-surface);
    font-size: 17px;
}

.emi-plan-hero p {
    margin: 0;
    color: var(--app-primary-container);
    font-size: 12px;
}

.emi-plan-status {
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--app-surface);
    font-size: 12px;
    font-weight: 800;
}

.emi-plan-status.paid {
    background: #dff8ea;
    color: var(--app-success);
}

.emi-summary-grid {
    padding: 10px;
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.emi-summary-grid > span {
    padding: 9px;
    border-radius: 13px;
    background: var(--app-primary-container);
}

.emi-summary-grid small,
.emi-summary-grid b {
    display: block;
}

.emi-summary-grid small {
    margin-bottom: 3px;
    color: var(--app-text-subtle);
    font-size: 12px;
    font-weight: 800;
}

.emi-summary-grid b {
    font-size: 12px;
}

.emi-schedule-head {
    padding: 10px 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
}

.emi-schedule-head small,
.emi-schedule-head b {
    display: block;
}

.emi-schedule-head small {
    color: var(--app-text-subtle);
    font-size: 12px;
}

.emi-schedule-head b {
    margin-top: 2px;
    font-size: 12px;
}

.emi-installment-list {
    display: grid;
}

.emi-installment {
    min-height: 62px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns:
        32px 1fr auto;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid var(--app-border);
}

.emi-installment:last-child {
    border-bottom: 0;
}

.emi-installment.paid {
    background: var(--app-success-container);
}

.emi-number {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 12px;
    font-weight: 800;
}

.emi-installment.paid .emi-number {
    background: #def6e9;
    color: var(--app-success);
}

.emi-installment b,
.emi-installment small {
    display: block;
}

.emi-installment b {
    margin-bottom: 3px;
    font-size: 12px;
}

.emi-installment small {
    color: var(--app-text-subtle);
    font-size: 12px;
}

.emi-pay-button {
    min-height: 33px;
    padding: 0 9px;
    border: 0;
    border-radius: 11px;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 12px;
    font-weight: 800;
}

.emi-paid-mark {
    text-align: right;
}

.emi-paid-mark b {
    color: var(--app-success);
    font-size: 12px;
}

.emi-paid-mark small {
    color: #70a78b;
}

.emi-action-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 7px;
}

.emi-action-grid > * {
    min-height: 42px;
    border: 1px solid var(--app-border);
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--app-surface);
    color: var(--app-text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.emi-action-grid > a {
    border-color: #d6f0e0;
    background: var(--app-success-container);
    color: var(--app-success);
}

.emi-payment-amount {
    margin: 7px 0 12px;
    color: var(--app-primary);
    text-align: center;
    font-size: 30px;
    font-weight: 800;
}

.public-emi-hero {
    padding: 18px;
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            var(--app-primary),
            var(--app-primary)
        );
    color: var(--app-surface);
}

.public-emi-hero .soft-label {
    color: var(--app-primary-container);
}

.public-emi-hero h1 {
    margin: 6px 0 2px;
    color: var(--app-surface);
    font-size: 34px;
}

.public-emi-hero p {
    margin: 0;
    color: var(--app-primary-container);
    font-size: 12px;
}

.public-next-emi {
    margin-top: 14px;
    padding: 10px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.13);
}

.public-next-emi small,
.public-next-emi b,
.public-next-emi span {
    display: block;
}

.public-next-emi small {
    color: var(--app-primary-container);
    font-size: 12px;
}

.public-next-emi b {
    margin: 2px 0;
    font-size: 16px;
}

.public-next-emi span {
    color: var(--app-border);
    font-size: 12px;
}

.public-emi-summary {
    margin-top: 10px;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.public-emi-summary > span {
    padding: 10px 7px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-surface);
}

.public-emi-summary small,
.public-emi-summary b {
    display: block;
}

.public-emi-summary small {
    margin-bottom: 3px;
    color: var(--app-text-subtle);
    font-size: 12px;
    font-weight: 800;
}

.public-emi-summary b {
    font-size: 12px;
}

.public-emi-list {
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 19px;
    background: var(--app-surface);
}

.public-emi-list article {
    min-height: 57px;
    padding: 8px 9px;
    display: grid;
    grid-template-columns:
        29px 1fr auto;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid var(--app-border);
}

.public-emi-list article:last-child {
    border-bottom: 0;
}

.public-emi-list article.paid {
    background: var(--app-success-container);
}

.public-emi-list article > span {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 12px;
    font-weight: 800;
}

.public-emi-list b,
.public-emi-list small {
    display: block;
}

.public-emi-list b {
    margin-bottom: 2px;
    font-size: 12px;
}

.public-emi-list small {
    color: var(--app-text-subtle);
    font-size: 12px;
}

.public-emi-list em {
    color: var(--app-success);
    text-align: right;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.public-emi-list em.pending {
    color: var(--app-warning);
}

.customer-product-note,
.public-note {
    font-size: 12px;
    line-height: 1.4;
}

.code-studio-label {
    font-size: 9px;
    letter-spacing: 0.75px;
}

.code-search input {
    font-size: 14px;
}

.wizard-progress b,
.code-segmented span {
    font-size: 10px;
}

.remove-logo-check {
    margin: 8px 2px 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--app-text-subtle);
    font-size: 12px;
}

.cart-variant-label {
    display: inline;
    margin-left: 3px;
    color: var(--app-primary);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.field-caption,
.code-studio-label {
    font-size: 12px;
    line-height: 1.35;
}

.upi-customer-panel #upiQr,
.upi-customer-panel #upiQr canvas,
.upi-customer-panel #upiQr img {
    width: min(76vw, 330px) !important;
    height: min(76vw, 330px) !important;
    max-width: 330px !important;
    max-height: 330px !important;
}
.customer-mobile-input {
    min-height: 59px;
    position: relative;
}
.gst-inclusive-toggle {
    margin: 10px 0;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: start;
    background: var(--app-primary-container);
}

.gst-inclusive-toggle input {
    width: 20px;
    height: 20px;
    accent-color: var(--app-primary);
}

.gst-inclusive-toggle b,
.gst-inclusive-toggle small {
    display: block;
}

.gst-inclusive-toggle b {
    font-size: 13px;
}

.gst-inclusive-toggle small {
    margin-top: 3px;
    color: var(--app-text-subtle);
    font-size: 12px;
}
.barcode-studio-v69 {
    display: grid;
    gap: 12px;
}

.barcode-mode-switch {
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border-radius: 16px;
    background: var(--app-primary-container);
}

.barcode-mode-switch button {
    min-height: 46px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--app-text-muted);
    font-weight: 800;
}

.barcode-mode-switch button.active {
    background: var(--app-surface);
    color: var(--app-primary);
    box-shadow:
        0 6px 16px
        rgba(31, 38, 68, .08);
}

.barcode-mode-panel {
    display: grid;
    gap: 11px;
}

.barcode-product-select {
    min-height: 68px;
    padding: 11px;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    display: grid;
    grid-template-columns: 44px 1fr 24px;
    gap: 10px;
    align-items: center;
    background: var(--app-surface);
    color: var(--app-text);
    text-align: left;
}

.barcode-product-select > span {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 20px;
}

.barcode-product-select small,
.barcode-product-select b {
    display: block;
}

.barcode-product-select b {
    margin-top: 3px;
    font-size: 15px;
}

.barcode-product-select em {
    color: var(--app-text-subtle);
    font-size: 22px;
    font-style: normal;
}

.accessible-stepper-card {
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--app-surface);
}

.accessible-stepper-card small,
.accessible-stepper-card b {
    display: block;
}

.accessible-stepper-card b {
    margin-top: 3px;
    font-size: 14px;
}

.accessible-stepper {
    display: grid;
    grid-template-columns: 42px 56px 42px;
    gap: 5px;
    align-items: center;
}

.accessible-stepper button {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 13px;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 22px;
    font-weight: 800;
}

.accessible-stepper strong {
    text-align: center;
    font-size: 20px;
}

.barcode-display-options {
    display: grid;
    gap: 7px;
}


.barcode-generate-main {
    min-height: 54px;
    padding: 0 16px;
    border: 0;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:
        linear-gradient(
            135deg,
            var(--app-primary),
            var(--app-primary)
        );
    color: var(--app-surface);
    font-weight: 800;
    box-shadow:
        0 12px 25px
        rgba(var(--app-primary-rgb), .23);
}

.multi-info-card {
    padding: 11px;
    border-radius: 16px;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 9px;
    align-items: center;
    background: var(--app-primary-container);
}

.multi-info-card > svg {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--app-surface);
    color: var(--app-primary);
    padding: 8px;
}

.multi-info-card b,
.multi-info-card small {
    display: block;
}

.multi-info-card b {
    font-size: 13px;
}

.multi-info-card small {
    margin-top: 3px;
    color: var(--app-text-muted);
}

.barcode-search {
    min-height: 50px;
    padding: 0 13px;
    border: 1px solid var(--app-border);
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--app-surface);
}

.barcode-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

.multi-product-list {
    display: grid;
    gap: 7px;
}

.multi-barcode-product {
    min-height: 66px;
    padding: 7px;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
    align-items: center;
    background: var(--app-surface);
}

.multi-barcode-product.selected {
    border-color: var(--app-primary-container);
    background: var(--app-primary-container);
}

.multi-product-main {
    min-width: 0;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 9px;
    align-items: center;
    background: transparent;
    color: var(--app-text);
    text-align: left;
}

.multi-check {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-weight: 800;
}

.multi-product-main b,
.multi-product-main small {
    display: block;
}

.multi-product-main b {
    font-size: 13px;
}

.multi-product-main small {
    margin-top: 2px;
    color: var(--app-text-muted);
}

.mini-stepper {
    display: grid;
    grid-template-columns: 32px 32px 32px;
    gap: 3px;
    align-items: center;
}

.mini-stepper button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 18px;
    font-weight: 800;
}

.mini-stepper strong {
    text-align: center;
    font-size: 14px;
}

.multi-total-bar {
    padding: 11px;
    border-radius: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: var(--app-text);
    color: var(--app-surface);
}

.multi-total-bar small,
.multi-total-bar b {
    display: block;
}

.multi-total-bar small {
    color: #aeb7cf;
}

.multi-total-bar b {
    margin-top: 3px;
    font-size: 15px;
}

.barcode-only-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.barcode-label-v69 {
    min-height: 88px;
    padding: 6px;
    overflow: hidden;
    border: 1px dashed #cfd3de;
    border-radius: 8px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    background: var(--app-surface);
    color: var(--app-text);
    text-align: center;
}

.barcode-label-logo {
    max-width: 54px;
    max-height: 22px;
    object-fit: contain;
}

.barcode-label-name {
    width: 100%;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barcode-label-svg {
    width: 100%;
    height: 56px;
}

.barcode-label-price {
    font-size: 11px;
}

body.barcode-pdf-mode .barcode-only-grid {
    width: 1000px;
    grid-template-columns:
        repeat(4, 1fr);
    gap: 7px;
}

body.barcode-pdf-mode .barcode-label-v69 {
    height: 128px;
}
.emi-customer-profile-card,
.emi-kyc-head {
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 19px;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 10px;
    align-items: center;
    background: var(--app-surface);
}

.emi-customer-avatar,
.emi-kyc-avatar {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 18px;
    font-weight: 800;
}

.emi-customer-profile-card h3,
.emi-kyc-head h2 {
    margin: 3px 0;
    font-size: 15px;
}

.emi-customer-profile-card p,
.emi-kyc-head p {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 12px;
}

.kyc-status.complete {
    background: #e3f8ed;
    color: var(--app-success);
}

.emi-kyc-form {
    display: grid;
    gap: 10px;
}

.document-upload-card {
    min-height: 62px;
    margin-top: 8px;
    padding: 9px;
    border: 1px solid var(--app-border);
    border-radius: 15px;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 9px;
    align-items: center;
    background: var(--app-primary-container);
}

.document-upload-card > span {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--app-primary-container);
    color: var(--app-primary);
}

.document-upload-card b,
.document-upload-card small {
    display: block;
}

.document-upload-card input {
    grid-column: 1 / -1;
    width: 100%;
}

.public-emi-pay-card {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--app-primary-container);
    border-radius: 22px;
    background: linear-gradient(180deg, var(--app-primary-container), var(--app-surface));
    box-shadow: 0 14px 30px rgba(57, 48, 143, .08);
}

.public-emi-pay-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.public-emi-pay-head h2 { margin: 4px 0 2px; font-size: 28px; }
.public-emi-pay-head p { margin: 0; color: var(--app-text-subtle); font-size: 12px; }
.upi-chip {
    padding: 7px 9px;
    border-radius: 999px;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 12px;
    font-weight: 800;
}
.emi-public-qr {
    width: min(82vw, 310px);
    height: min(82vw, 310px);
    margin: 14px auto;
    padding: 10px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: var(--app-surface);
    box-shadow: 0 12px 30px rgba(30, 35, 63, .10);
}
.emi-public-qr canvas, .emi-public-qr img {
    width: 100% !important;
    height: 100% !important;
}
.public-emi-upi-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.public-emi-upi-meta span { padding: 9px; border-radius: 13px; background: var(--app-primary-container); }
.public-emi-upi-meta small, .public-emi-upi-meta b { display: block; }
.public-emi-upi-meta small { color: var(--app-text-subtle); font-size: 12px; }
.public-emi-upi-meta b { margin-top: 3px; font-size: 12px; word-break: break-word; }
.public-emi-pay-button {
    min-height: 52px;
    margin-top: 10px;
    padding: 0 15px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary));
    color: var(--app-surface);
    font-weight: 800;
    text-decoration: none;
}
#visitingQr { width: 105px; height: 105px; padding: 4px; border-radius: 10px; background: var(--app-surface); }
#visitingQr canvas, #visitingQr img { width: 100% !important; height: 100% !important; }

.public-store-page { margin: 0; background: var(--app-primary-container); color: var(--app-text); font-family: var(--app-font); }
.public-store-shell { width: min(100%, 720px); min-height: 100vh; margin: 0 auto; padding: 16px 14px 96px; }
.public-store-hero {
    padding: 22px 18px;
    border-radius: 26px;
    background: radial-gradient(circle at 90% 10%, rgba(255,255,255,.15), transparent 30%), linear-gradient(135deg, var(--app-primary), var(--app-primary));
    color: var(--app-surface);
    box-shadow: 0 18px 45px rgba(42, 38, 112, .18);
}
.public-store-brand { display: flex; gap: 12px; align-items: center; }
.public-store-brand img, .public-store-brand > span { width: 64px; height: 64px; border-radius: 18px; object-fit: contain; display: grid; place-items: center; background: var(--app-surface); color: var(--app-primary); font-size: 24px; font-weight: 800; }
.public-store-brand small { color: var(--app-primary-container); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.public-store-brand h1 { margin: 4px 0 0; color: var(--app-surface); font-size: 24px; }
.public-store-hero > p { margin: 15px 0 0; color: var(--app-border); font-size: 14px; line-height: 1.55; }
.public-store-actions { margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.public-store-actions a { min-height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--app-surface); color: var(--app-primary); text-decoration: none; font-weight: 800; }
.public-store-about, .public-store-catalog, .public-store-contact-card { margin-top: 14px; padding: 16px; border-radius: 22px; background: var(--app-surface); box-shadow: 0 10px 28px rgba(34,40,70,.06); }
.public-store-about h2, .public-store-contact-card h2 { margin: 5px 0 8px; font-size: 20px; }
.public-store-about p, .public-store-contact-card p { margin: 0; color: var(--app-text-muted); font-size: 14px; line-height: 1.6; }
.public-store-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.public-store-section-head h2 { margin: 4px 0 0; font-size: 20px; }
.public-store-section-head > span { color: var(--app-text-subtle); font-size: 12px; }
.public-store-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.public-store-item { overflow: hidden; border: 1px solid var(--app-border); border-radius: 18px; background: var(--app-surface); }
.public-store-item-image { aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; background: var(--app-primary-container); color: var(--app-primary); font-size: 28px; font-weight: 800; }
.public-store-item-image img { width: 100%; height: 100%; object-fit: cover; }
.public-store-item-copy { padding: 10px; }
.public-store-item-copy small { color: var(--app-primary); font-size: 12px; font-weight: 800; }
.public-store-item-copy h3 { margin: 4px 0; font-size: 14px; }
.public-store-item-copy b { font-size: 15px; }
.public-store-item-actions { padding: 0 8px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.public-store-item-actions a { min-height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--app-primary-container); color: var(--app-primary); text-decoration: none; font-size: 12px; font-weight: 800; }
.public-store-footer { padding: 20px 6px; text-align: center; color: var(--app-text-subtle); }
.public-store-footer b, .public-store-footer small { display: block; }
.public-store-footer small { margin-top: 3px; font-size: 12px; }
.public-store-floating-actions { width: min(calc(100% - 20px), 700px); padding: 8px; position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr; gap: 7px; border: 1px solid var(--app-border); border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 14px 38px rgba(23,29,57,.15); backdrop-filter: blur(12px); }
.public-store-floating-actions a { min-height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--app-primary); color: var(--app-surface); text-decoration: none; font-weight: 800; }
@media (max-width: 420px)  {
    .public-store-grid { grid-template-columns: 1fr 1fr; }
    #visitingQr { width: 86px; height: 86px; }
}
#newNameWrap:not(.hidden) {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #dfe3ee;
}

#newNameWrap:not(.hidden) input {
    min-height: 52px;
    font-size: 16px;
    font-weight: 700;
}
.customer-step-actions{display:grid;gap:9px}
.guest-bill-btn{width:100%;min-height:58px;padding:9px 12px;border:1px solid #dfe3ee;border-radius:17px;display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;background:var(--app-surface);color:var(--app-text);text-align:left;box-shadow:0 8px 20px rgba(29,35,62,.04)}
.guest-bill-btn>span{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:#fff3df;color:var(--app-warning);font-size:18px}
.guest-bill-btn b,.guest-bill-btn small{display:block}.guest-bill-btn b{font-size:14px}.guest-bill-btn small{margin-top:2px;color:var(--app-text-subtle);font-size:12px}.guest-bill-btn i{color:var(--app-text-subtle);font-size:18px;font-style:normal}
.upi-customer-panel {
    box-shadow:
        0 18px 42px
        rgba(59, 49, 149, 0.08);
    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(111, 92, 255, 0.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            var(--app-primary-container),
            var(--app-primary-container)
        );
    border-radius: 24px;
    border: 1px solid var(--app-border);
    padding: 16px;
    margin-top: 14px;
    display: block;
    width: 100%;
}

.upi-customer-panel .upi-qr-stage {
    min-height: 0;
    padding: 16px 0 20px;
}

.upi-customer-panel #upiQr {
    width: 100% !important;
    height: auto !important;
    max-width: 470px !important;
    max-height: none !important;
    aspect-ratio: 1 / 1;
}

.upi-customer-panel #upiQr canvas,
.upi-customer-panel #upiQr img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block;
}

.invoice-viewport {
    width: 100%;
    min-height: 300px;
    padding: 12px;
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(circle at 90% 0, rgba(41, 118, 232, .08), transparent 30%),
        var(--app-info-container);
}

.invoice-scale-box {
    margin: 0 auto;
    position: relative;
}

.invoice-scale-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    background: transparent;
}

@media (min-width: 768px)  {

    .emi-kyc-form,
    .barcode-studio-v69 {
        max-width: 820px;
        margin-inline: auto;
    }

    .invoice-viewport {
        padding: 24px;
    }
}

@media (max-width: 430px)  {

    .invoice-viewport {
        padding: 8px;
    }
}
@keyframes sharePulse { 50% { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,211,102,.22); } }

.hardware-hero {
    padding: 16px;
    border-radius: 22px;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 13px;
    align-items: center;
    background: linear-gradient(135deg,var(--app-info-container),var(--app-primary-container));
    border: 1px solid #dce6f5;
    margin-bottom: 12px;
}
.hardware-icon { width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:var(--app-surface);color:var(--app-info);font-size:24px;box-shadow:0 8px 22px rgba(31,55,100,.08); }
.hardware-hero h2 { margin:4px 0; }
.hardware-hero p { margin:0;color:var(--app-text-muted);line-height:1.5; }
.hardware-mode-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0; }
.hardware-mode-grid button { min-height:68px;padding:10px;border:1px solid #dfe4ee;border-radius:16px;background:var(--app-surface);text-align:left;color:var(--app-text); }
.hardware-mode-grid button.active { border-color:var(--app-primary);background:var(--app-primary-container);box-shadow:0 7px 20px rgba(var(--app-primary-rgb),.12); }
.hardware-mode-grid b,.hardware-mode-grid small { display:block; }
.hardware-mode-grid small { margin-top:3px;color:var(--app-text-subtle); }
.hardware-support { margin-top:10px;padding:10px 12px;border-radius:13px;background:var(--app-primary-container);color:var(--app-text-muted);font-size:13px; }
.hardware-capability-list { display:grid;gap:8px;margin-top:10px; }
.hardware-capability-list article { padding:11px;border:1px solid var(--app-border);border-radius:15px;display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:center;background:var(--app-surface); }
.hardware-capability-list article>span { width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--app-primary-container);color:var(--app-info);font-weight:800; }
.hardware-capability-list b,.hardware-capability-list small { display:block; }
.hardware-capability-list small { margin-top:2px;color:var(--app-text-subtle); }
.hardware-toggle { margin-top:9px;padding:11px;border:1px solid var(--app-border);border-radius:15px;display:grid;grid-template-columns:22px 1fr;gap:10px;background:var(--app-surface); }
.hardware-toggle input { width:20px;height:20px;accent-color:var(--app-primary); }
.hardware-toggle b,.hardware-toggle small { display:block; }
.hardware-toggle small { margin-top:2px;color:var(--app-text-subtle); }
@media (min-width: 768px)  {
    .dash-v64-actions { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width: 1100px)  {
    .dash-v64-actions { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (max-width: 620px)  {
    .hardware-mode-grid { grid-template-columns:1fr; }
}.purchase-tax-inclusive{margin:4px 0 14px;display:flex;gap:10px;align-items:center}

/* ==========================================================================
   Billing (billing.php · billing-wizard.js)
   ========================================================================== */
.wizard-step { display: none; }
.wizard-step.active { display: flex; flex-direction: column; gap: var(--sp-4); animation: step-in var(--dur-base) var(--ease-standard); }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bill-flow { display: flex; flex-direction: column; gap: var(--sp-4); }

.bill-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bill-steps li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    border-radius: var(--r-full);
    background: var(--app-surface-sunken);
    color: var(--app-text-muted);
    font-size: var(--fs-support);
    min-width: 0;
}

.bill-steps li span {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--app-surface);
}

.bill-steps li b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-steps li.active { background: var(--app-primary-container); color: var(--app-on-primary-container); }
.bill-steps li.active span { background: var(--app-primary); color: var(--app-on-primary); }
.bill-steps li.active:not(.current) span { background: var(--app-success); }

/* Step 1 */
.customer-suggestions {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--app-border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.customer-suggestions button,
.item-suggestions button {
    display: flex;
    justify-content: flex-start;
    white-space: normal;
    font-weight: 400;
    border-radius: 0;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: 56px;
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-top: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    text-align: left;
    font: inherit;
}

.customer-suggestions button:first-child,
.item-suggestions button:first-child { border-top: 0; }
.customer-suggestions button:hover,
.item-suggestions button:hover { background: var(--app-surface-variant); }
.customer-suggestions b, .item-suggestions b { display: block; font-size: var(--fs-body-sm); }
.customer-suggestions small, .item-suggestions small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); }

.suggestion-avatar,
.item-suggestion-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-weight: 750;
    font-size: var(--fs-support);
}

.item-suggestions {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--app-border);
    border-radius: var(--r-md);
}

.customer-found {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--app-success-container);
    color: var(--app-on-success-container);
}

.customer-found small { display: block; font-size: var(--fs-caption); }
.customer-found b { display: block; }

.bill-step-actions { display: flex; flex-direction: column; gap: var(--sp-3); }

.bill-guest {
    border: 1px solid var(--app-border);
    border-radius: var(--r-md);
    background: var(--app-surface);
    cursor: pointer;
}

/* Step 2 */
.bill-search-row {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

.bill-search-trigger {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    height: 52px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--app-border-strong);
    border-radius: var(--r-full);
    background: var(--app-surface);
    color: var(--app-text-subtle);
    font: inherit;
    font-size: 15px;
    text-align: left;
    box-shadow: var(--shadow-soft);
}

.bill-search-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-search-trigger:hover { border-color: var(--app-primary); }
.bill-search-row .icon-btn { width: 52px; height: 52px; }
.bill-scan-btn { box-shadow: 0 6px 14px rgba(var(--app-primary-rgb), 0.28); }

.bill-items-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-4) var(--sp-2);
}

.bill-items-head h3 { display: flex; align-items: center; gap: var(--sp-2); }
.bill-items-hint { font-size: var(--fs-caption); }
.bill-items-card .empty-state { padding: var(--sp-6) var(--sp-4); }

.bill-line {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 40px;
    gap: var(--sp-2);
    align-items: center;
    padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--app-border);
}

.bill-line-main {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    font: inherit;
}

.bill-line-main b { display: block; font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.bill-line-main small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); line-height: 1.45; }
.bill-variant { font-style: normal; color: var(--app-primary); font-weight: 600; font-size: var(--fs-support); }

.bill-line-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.bill-line-side strong { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
.bill-line-remove { width: 40px; height: 40px; border: 0; color: var(--app-text-subtle); background: transparent; }
.bill-line-remove:hover { color: var(--app-error); background: var(--app-error-container); }

.stepper-sm button { width: 34px; height: 34px; font-size: 18px; }
.stepper-sm output { width: 38px; min-height: 34px; display: grid; place-items: center; font-size: var(--fs-body-sm); }
.stepper-lg button { width: 48px; height: 48px; font-size: 22px; }
.stepper-lg input { width: 84px; min-height: 48px; font-size: 18px; }

.bill-total-dock {
    position: sticky;
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 8px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.bill-totals {
    padding: var(--sp-3) var(--sp-4);
    box-shadow: var(--shadow-medium);
}

.bill-totals .kv > div { padding: 5px 0; border-bottom: 0; }

.bill-grand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: 6px;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--app-border);
}

.bill-grand span { font-weight: 650; }
.bill-grand strong { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--app-text); }

/* Back + primary action: the primary always gets the remaining width and its
   label shortens instead of pushing the row off-screen. */
.bill-step-nav { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2); }
.bill-step-nav .btn { min-width: 0; padding-inline: var(--sp-4); }
.bill-step-nav .btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-step-nav .btn > .ic { flex: none; }
.bill-nav-short { display: none; }
@media (max-width: 419px) {
    .bill-nav-long { display: none; }
    .bill-nav-short { display: inline; }
}
@media (max-width: 359px) {
    .bill-nav-label { display: none; }
    .bill-nav-back { padding-inline: 14px; }
}

@media (min-width: 1024px) {
    .bill-total-dock { bottom: var(--sp-4); }
}

/* Step 3 */
.bill-pay-hero { text-align: center; }
.bill-pay-hero .hero-value { font-size: 36px; }

.bill-amount input {
    min-height: 60px;
    font-size: 26px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.bill-amount .lead { font-size: 22px; color: var(--app-text-muted); }
.bill-amount.has-lead > input { padding-left: 44px; }

.bill-pay-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.bill-pay-modes .chip { justify-content: center; min-height: 44px; padding: 0 16px; font-size: var(--fs-body-sm); }
.bill-pay-modes .chip .ic { width: 18px; height: 18px; }

.bill-split,
.bill-emi,
.bill-upi {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--app-surface-variant);
}

.bill-split.hidden,
.bill-emi.hidden,
.bill-upi.hidden { display: none; }

/* 4 figures: 2 × 2 on phones, one row on wide screens, stacked when very narrow */
.bill-emi-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
}
@media (min-width: 640px) { .bill-emi-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 299px) { .bill-emi-summary { grid-template-columns: minmax(0, 1fr); } }

.bill-emi-summary > span {
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--app-surface);
}

.bill-emi-summary small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); line-height: 1.3; }
.bill-emi-summary > span { container-type: inline-size; }
.bill-emi-summary b { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: min(16px, 13cqi); line-height: 1.25; }
.bill-emi .row-between { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.bill-emi .two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--sp-3); }

.bill-upi-qr { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.bill-upi-amount { text-align: center; }
.bill-upi-amount small { display: block; color: var(--app-text-muted); }
.bill-upi-amount strong { font-size: 26px; font-weight: 800; }

.qr-frame {
    display: grid;
    place-items: center;
    width: min(100%, 300px);
    aspect-ratio: 1;
    padding: 14px;
    border-radius: var(--r-lg);
    background: #fff;
    border: 1px solid var(--app-border);
    box-shadow: var(--shadow-medium), inset 0 0 0 6px var(--app-primary-container);
}

.qr-frame img,
.qr-frame canvas { width: 100% !important; height: auto !important; image-rendering: pixelated; }

.bill-due {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--app-warning-container);
    color: var(--app-on-warning-container);
    font-weight: 600;
}

.bill-due b { font-size: 17px; font-variant-numeric: tabular-nums; }
.bill-step-nav--static { margin-top: var(--sp-1); }

/* Item sheet */
.bill-inclusive {
    display: flex;
    gap: var(--sp-2);
}

.bill-inclusive span {
    flex: 1 1 0;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: var(--app-surface-variant);
    color: var(--app-text-muted);
    font-size: var(--fs-support);
}

.bill-inclusive i { font-style: normal; }
.bill-inclusive b { color: var(--app-text); }
.bill-inclusive.hidden { display: none; }

.bill-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
}

.bill-qty b { display: block; }
.bill-qty small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); }

/* Full-screen scanner */
.scanner-modal { background: #05070d; }
.scanner-modal.open { display: block; }

.scanner-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    color: #fff;
}

.scanner-top,
.scanner-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: calc(var(--safe-top) + 12px) var(--sp-4) 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
}

.scanner-bottom {
    margin-top: auto;
    padding: 16px var(--sp-4) calc(var(--safe-bottom) + 20px);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent);
}

.scanner-title { flex: 1 1 auto; min-width: 0; text-align: center; }
.scanner-title b { display: block; font-size: 17px; }
.scanner-title small { display: block; opacity: 0.8; font-size: var(--fs-support); }

.scanner-btn {
    background: rgba(255, 255, 255, 0.14);
    border-color: transparent;
    color: #fff;
}

.scanner-btn.active { background: #ffd54a; color: #111; }
.scanner-btn[hidden] { display: grid !important; visibility: hidden; }

.scanner-view {
    position: absolute;
    inset: 0;
    background: #05070d;
}

.scanner-view video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scanner-frame {
    position: absolute;
    left: 50%;
    top: 46%;
    width: min(78vw, 360px);
    height: min(46vw, 220px);
    transform: translate(-50%, -50%);
    border-radius: 22px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
    outline: 3px solid rgba(255, 255, 255, 0.92);
    outline-offset: 0;
}

.scanner-frame i {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 2px;
    border-radius: 2px;
    background: #4ade80;
    box-shadow: 0 0 14px #4ade80;
    animation: scan-sweep 1.6s ease-in-out infinite alternate;
}

@keyframes scan-sweep {
    from { transform: translateY(-70px); }
    to { transform: translateY(70px); }
}

.manual-scan { width: 100%; max-width: 480px; margin: 0 auto; }

.manual-scan input {
    background: rgba(255, 255, 255, 0.95);
    border-color: transparent;
    border-radius: var(--r-full);
    color: var(--app-text);
}

.manual-scan .icon-btn { background: var(--app-primary); color: #fff; }

/* Product master review sheet (product-master-client.js) */
.pm-summary {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--app-surface-variant);
}

.pm-summary b { display: block; margin-top: 6px; font-size: 16px; }
.pm-summary small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); }

.pm-thumb {
    display: grid;
    place-items: center;
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: var(--r-sm);
    background: var(--app-surface);
    color: var(--app-text-subtle);
    overflow: hidden;
}

.pm-thumb.sm { width: 44px; height: 44px; border-radius: 12px; }
.pm-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pm-results { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 320px; overflow-y: auto; }

/* ==========================================================================
   Stock (inventory.php · inventory-v7.js · stock-list.js)
   ========================================================================== */
.stock-toolbar { display: flex; flex-direction: column; gap: var(--sp-3); }
.stock-search-row { display: flex; gap: var(--sp-2); align-items: center; }
.stock-search-row .icon-btn { width: 48px; height: 48px; }
.stock-tools .chip { border-style: dashed; color: var(--app-text-muted); }

.stock-list { display: flex; flex-direction: column; }

.stock-row {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding-right: var(--sp-2);
    border-top: 1px solid var(--app-border);
}

.stock-row:first-child { border-top: 0; }
.stock-row[hidden] { display: none; }

.stock-row-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    min-height: 72px;
    padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-4);
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
    border-radius: 0;
}

.stock-row-main:hover { background: var(--app-surface-variant); }

.stock-thumb {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-weight: 750;
    overflow: hidden;
}

.stock-thumb img { width: 100%; height: 100%; object-fit: cover; }
.stock-info { flex: 1 1 auto; min-width: 0; }
.stock-info b { display: block; font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-info small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.stock-meta strong { font-size: var(--fs-body-sm); font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stock-row-more { border: 0; background: transparent; color: var(--app-text-muted); }

@media (min-width: 1024px) {
    .stock-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stock-row:nth-child(2) { border-top: 0; }
    .stock-row:nth-child(odd) { border-right: 1px solid var(--app-border); }
}

/* Product editor sheet */
.product-editor { max-width: 640px; }

.editor-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding-top: var(--sp-2);
}

.editor-section.hidden { display: none; }

.editor-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-body-sm);
    font-weight: 700;
    color: var(--app-text);
}

.editor-title span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 12px;
}

.editor-actions {
    position: sticky;
    bottom: calc(var(--sp-5) * -1 - var(--safe-bottom));
    display: flex;
    gap: var(--sp-2);
    margin: var(--sp-3) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1 - var(--safe-bottom));
    padding: var(--sp-3) var(--sp-5) calc(var(--sp-4) + var(--safe-bottom));
    background: var(--app-surface);
    border-top: 1px solid var(--app-border);
}

.editor-actions .btn-grow { flex: 1 1 auto; }

.product-image-picker {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px dashed var(--app-border-strong);
    border-radius: var(--r-md);
}

.product-image-picker b { display: block; font-size: var(--fs-body-sm); }

.product-image-preview {
    display: grid;
    place-items: center;
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: var(--r-sm);
    background: var(--app-surface-variant);
    color: var(--app-text-subtle);
    overflow: hidden;
}

.product-image-preview img { width: 100%; height: 100%; object-fit: cover; }
label.btn { cursor: pointer; }

.variant-builder-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.variant-builder-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--app-border);
    border-radius: var(--r-md);
    background: var(--app-surface-variant);
}

.variant-card-head { display: flex; align-items: center; justify-content: space-between; }
.variant-card-head small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); }
.variant-attribute-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.variant-stock-row { display: flex; align-items: center; justify-content: space-between; }
.variant-stock-row small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); }
.variant-builder-card .inline-field { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

.variant-empty-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 64px;
    border: 1.5px dashed var(--app-border-strong);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--app-primary);
    font: inherit;
    font-weight: 650;
}

/* ==========================================================================
   Store module (store_center, mini_site, catalog, orders, notifications, card)
   ========================================================================== */
.store-tabs { margin-top: calc(var(--sp-2) * -1); }
.store-status { display: flex; flex-direction: column; gap: var(--sp-4); }
.store-status-top { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.store-status-top h2 { font-size: var(--fs-section); }
.store-status-logo { width: 52px; height: 52px; border-radius: 16px; }
.store-url { display: block; font-size: var(--fs-support); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Store appearance: live hero preview */
.store-preview {
    --tc: var(--app-primary);
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.sp-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px 12px;
    border-bottom: 1px solid var(--app-border);
    font-size: var(--fs-body-sm);
}

.sp-header b { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sp-logo {
    display: grid;
    place-items: center;
    height: 30px;
    min-width: 30px;
    max-width: 110px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tc) 12%, #fff);
    color: var(--tc);
    font-weight: 800;
    overflow: hidden;
}

.sp-logo img { max-height: 30px; width: auto; object-fit: contain; }

.sp-wa {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1f9d55;
    color: #fff;
}

.sp-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 150px;
    max-height: 250px;
    padding: var(--sp-4);
    background: linear-gradient(135deg, var(--tc), color-mix(in srgb, var(--tc) 55%, #000));
    color: #fff;
}

.sp-hero[style*="--hero"] {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.1)), var(--hero) center / cover no-repeat;
}

.sp-hero strong { display: block; font-size: 19px; line-height: 1.2; }
.sp-hero small { display: block; margin-top: 4px; opacity: 0.9; font-size: var(--fs-support); }

.sp-cta {
    display: inline-block;
    margin-top: 10px;
    padding: 7px 14px;
    border-radius: var(--r-full);
    background: #fff;
    color: var(--tc);
    font-size: var(--fs-support);
    font-weight: 700;
}

/* QR poster */
.poster-stage {
    display: grid;
    place-items: center;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--app-surface-variant);
}

.qr-poster {
    --tc: var(--app-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(100%, 320px);
    padding: 26px 22px 22px;
    border-radius: 24px;
    background: #fff;
    color: #111827;
    text-align: center;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.qr-poster::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 118px;
    background: var(--tc);
    border-radius: 0 0 50% 50% / 0 0 38px 38px;
}

.qr-poster > * { position: relative; }
.qp-top { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; }
.qp-logo { max-width: 150px; max-height: 42px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px 8px; }
.qp-name { font-size: 16px; }
.qp-heading { margin-top: 30px; font-size: 21px; line-height: 1.2; color: var(--tc); }
.qp-sub { margin: 0; font-size: 13px; color: #4b5563; }

.qp-qr {
    width: 200px;
    padding: 12px;
    border-radius: 20px;
    background: #fff;
    border: 3px solid var(--tc);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--tc) 14%, #fff);
}

.qp-qr canvas,
.qp-qr img { display: block; width: 100% !important; height: auto !important; image-rendering: pixelated; }
.qp-url { font-size: 12px; font-weight: 700; color: var(--tc); word-break: break-all; }
.qp-phone { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 650; color: #374151; }

.sticky-save {
    position: sticky;
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 8px);
    z-index: 15;
}

@media (min-width: 1024px) { .sticky-save { bottom: var(--sp-4); } }

/* ==========================================================================
   Visiting card (visiting_card.php, card.php) — 89 × 51 mm, white/navy wave
   ========================================================================== */
.vc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 1024px) { .vc-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } .vc-preview-card { position: sticky; top: 84px; } }

.vc-stage { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--app-surface-variant); }
.vc-stage[data-side="front"] .vc-back,
.vc-stage[data-side="back"] .vc-front { display: none; }
.vc-links { margin-top: var(--sp-2); }

.vcard {
    --navy: #0f1b3d;
    --tc: #2f5bea;
    container-type: inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 89 / 51;
    overflow: hidden;
    border-radius: 3.2cqw;
    background: #fff;
    color: var(--navy);
    font-family: var(--app-font);
    box-shadow: 0 10px 30px rgba(15, 27, 61, 0.14);
}

.vc-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30%; }
.vc-wave .w1 { fill: var(--tc); opacity: 0.9; }
.vc-wave .w2 { fill: var(--navy); }

.vc-front-body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6cqw;
    padding: 5cqw 8cqw 16cqw;
    text-align: center;
}

.vc-logo { max-width: 42cqw; max-height: 15cqw; object-fit: contain; }
.vc-mark { display: grid; place-items: center; width: 13cqw; height: 13cqw; border-radius: 3.5cqw; background: var(--navy); color: #fff; font-size: 7cqw; font-weight: 800; }
.vc-business { font-size: 5.4cqw; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.vc-tagline { font-size: 2.9cqw; color: #4a5578; }
.vc-web { position: absolute; z-index: 1; right: 5cqw; bottom: 3.4cqw; color: #fff; font-size: 2.7cqw; font-weight: 700; }

.vc-back { background: #fff; }
.vc-back-head { padding: 5.4cqw 6cqw 3cqw; border-left: 1.6cqw solid var(--tc); margin: 4cqw 0 0 0; }
.vc-back-head b { display: block; font-size: 5cqw; font-weight: 800; line-height: 1.15; }
.vc-back-head small { display: block; margin-top: 0.6cqw; color: var(--tc); font-size: 2.8cqw; font-weight: 700; }

.vc-back-body { display: flex; gap: 4cqw; padding: 0 6cqw 16cqw 7.6cqw; }
.vc-rows { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1.6cqw; min-width: 0; }
.vc-row { display: flex; align-items: flex-start; gap: 1.8cqw; font-size: 2.75cqw; line-height: 1.3; color: #1f2a4a; overflow-wrap: anywhere; }
.vc-row i { display: grid; place-items: center; flex: none; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--navy); color: #fff; }
.vc-row i .ic { width: 2.6cqw; height: 2.6cqw; }
.vc-row span:empty, .vc-row:has(span:empty) { display: none; }

.vc-qr { flex: none; width: 22cqw; height: 22cqw; padding: 1.4cqw; border-radius: 2.6cqw; border: 0.6cqw solid var(--tc); background: #fff; }
.vc-qr canvas, .vc-qr img { width: 100% !important; height: 100% !important; image-rendering: pixelated; }

/* Public pages shared frame */
.public-main {
    width: 100%;
    margin: 0 auto;
    padding: calc(var(--safe-top) + var(--sp-5)) var(--page-pad) calc(var(--safe-bottom) + var(--sp-8));
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.public-main.app-content--narrow { max-width: 520px; }
.public-foot { text-align: center; color: var(--app-text-subtle); font-size: var(--fs-caption); }

/* Legal / marketplace public pages */
.legal-page, .market-page { max-width: 880px; }
.market-page { max-width: 1120px; }
.page-hero { display: flex; align-items: flex-start; gap: var(--sp-3); }
.page-hero h1 { margin: 0; font-size: var(--fs-title); line-height: 1.25; }
.page-hero p { margin: var(--sp-1) 0 0; color: var(--app-text-muted); }
.prose { line-height: 1.65; color: var(--app-text); }
.prose h2 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-section); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--sp-3); color: var(--app-text-muted); }
.market-search { display: grid; grid-template-columns: 2fr 1fr auto; gap: var(--sp-2); }
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--sp-3); }
.market-card { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); color: inherit; text-decoration: none; }
.market-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--app-surface-variant); margin-bottom: var(--sp-2); }
.market-card h2 { margin: 0; font-size: var(--fs-card-title); }
.market-card p { margin: 0; color: var(--app-text-muted); font-size: var(--fs-body-sm); }
.market-card strong { margin-top: auto; padding-top: var(--sp-2); color: var(--app-primary); }
@media (max-width: 650px) { .market-search { grid-template-columns: 1fr; } }

/* Public digital card */
.dcard {
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--app-surface);
    box-shadow: var(--shadow-medium);
    text-align: center;
}

.dcard-top {
    position: relative;
    display: grid;
    place-items: center;
    height: 150px;
    background: linear-gradient(160deg, var(--app-primary), #0f1b3d);
}

.dcard-top::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 46px;
    background: var(--app-surface);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.dcard-logo {
    position: relative;
    z-index: 1;
    max-width: 220px;
    max-height: 72px;
    margin-top: 40px;
    padding: 10px 16px;
    border-radius: 18px;
    background: #fff;
    object-fit: contain;
    box-shadow: var(--shadow-medium);
}

.dcard-mark {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin-top: 50px;
    border-radius: 24px;
    background: #fff;
    color: var(--app-primary);
    font-size: 36px;
    font-weight: 800;
    box-shadow: var(--shadow-medium);
}

.dcard-body { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.dcard-body h1 { font-size: 24px; }
.dcard-role { margin: 4px 0 8px; color: var(--app-primary); font-weight: 650; }

.dcard-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
}

.dcard-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 6px;
    border-radius: var(--r-md);
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    font-size: var(--fs-support);
    font-weight: 650;
    box-shadow: var(--shadow-soft);
}

.dcard-action span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--app-primary-container);
    color: var(--app-primary);
}

.dcard-action.primary span { background: var(--app-primary); color: #fff; }
.dcard-action.wa span { background: #1f9d55; color: #fff; }
.dcard-qr-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dcard-qr-card .qr-frame { width: 220px; }

/* ==========================================================================
   Public storefront (storefront.php, storefront_detail.php, storefront.js)
   ========================================================================== */
.storefront-page { background: var(--app-background); }

.sf-header {
    position: sticky;
    top: 0;
    z-index: 40;
    padding-top: var(--safe-top);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--app-border);
}

.sf-header-inner {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: 1180px;
    min-height: 64px;
    margin: 0 auto;
    padding: 0 var(--page-pad);
}

.sf-brand {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    color: var(--app-text);
}

/* Horizontal and square logos both fit: contain, never cropped. */
.sf-logo {
    display: flex;
    align-items: center;
    flex: none;
    height: 44px;
    max-width: min(250px, 46vw);
}

.sf-logo img { display: block; max-height: 44px; max-width: 100%; width: auto; object-fit: contain; }

.sf-mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--app-primary);
    color: #fff;
    font-weight: 800;
    font-size: 18px;
}

.sf-brand-text { min-width: 0; }
.sf-brand-text b { display: block; font-size: 16px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-logo + .sf-brand-text { display: none; }
@media (min-width: 640px) { .sf-logo + .sf-brand-text { display: block; } }

.sf-icon { border: 0; background: var(--app-surface-variant); }
.sf-wa { background: #1f9d55; color: #fff; }
.sf-wa:hover { background: #188746; }

.sf-main {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--sp-4) var(--page-pad) calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--sp-6));
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.sf-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 180px;
    max-height: 250px;
    padding: var(--sp-5);
    overflow: hidden;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--app-primary), color-mix(in srgb, var(--app-primary) 50%, #0b1020));
    color: #fff;
}

.sf-hero.has-image {
    background: linear-gradient(0deg, rgba(8, 12, 24, 0.72), rgba(8, 12, 24, 0.18)), var(--hero) center / cover no-repeat;
}

.sf-hero-content { max-width: 640px; }
.sf-hero h1 { color: #fff; font-size: clamp(20px, 5.2vw, 30px); line-height: 1.2; }

.sf-hero p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--fs-body-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sf-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.sf-hero .btn { min-height: 44px; }
.sf-follow-btn { --btn-bg: rgba(255, 255, 255, 0.16); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, 0.35); }
.sf-follow-btn.is-following { --btn-bg: rgba(255, 255, 255, 0.95); --btn-fg: var(--app-success); }

@media (min-width: 900px) { .sf-hero { min-height: 230px; padding: var(--sp-8); } }

.sf-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.sf-section h2 { font-size: 20px; }

.sf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
}

@media (min-width: 720px) { .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } }
@media (min-width: 1080px) { .sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sf-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--r-md);
    background: var(--app-surface);
    box-shadow: var(--shadow-soft);
    transition: box-shadow var(--dur-fast) var(--ease-standard);
}

.sf-card[hidden] { display: none; }
.sf-card:hover { box-shadow: var(--shadow-medium); }

.sf-card-media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: var(--app-surface-variant);
    overflow: hidden;
}

.sf-card-media img { width: 100%; height: 100%; object-fit: cover; }
.sf-card-ph { color: var(--app-text-subtle); }
.sf-badge { position: absolute; left: 8px; top: 8px; }

.sf-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; padding: var(--sp-3) var(--sp-3) 0; }
.sf-card-body h3 { font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.sf-card-body h3 a { color: var(--app-text); }

.sf-card-body p {
    margin: 0;
    color: var(--app-text-muted);
    font-size: var(--fs-caption);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sf-price { margin-top: auto; padding-top: 4px; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sf-card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--sp-3); }
.sf-card-actions .btn { min-height: 38px; padding: 0 10px; }
.sf-card-actions .btn-grow { flex: 1 1 auto; }
.sf-card-call { width: 38px; height: 38px; }
@media (max-width: 380px) { .sf-card-actions .btn-outline { display: none; } }

.sf-about p { color: var(--app-text-muted); }
.sf-contact { display: flex; flex-direction: column; gap: var(--sp-3); }
.sf-address { display: flex; gap: var(--sp-2); color: var(--app-text-muted); font-size: var(--fs-body-sm); }

@media (min-width: 1024px) {
    .sf-bottom-nav { display: none; }
    .sf-main { padding-bottom: var(--sp-8); }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .sf-bottom-nav { display: grid; }
}

/* Cart (top offcanvas) */
.sf-cart-lines { display: flex; flex-direction: column; }
.sf-cart-line { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--app-border); }

.sf-cart-thumb {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--app-surface-variant);
    color: var(--app-text-subtle);
    overflow: hidden;
}

.sf-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sf-cart-line b { display: block; font-size: var(--fs-body-sm); }
.sf-cart-line small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); }
.sf-cart-line strong { display: block; margin-top: 2px; font-size: var(--fs-body-sm); }
.sf-cart-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

.sf-cart-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--sp-3) 0;
    font-weight: 650;
}

.sf-cart-total strong { font-size: 22px; font-weight: 800; }
.sf-benefits { padding: 0 var(--sp-5) var(--sp-3); }

/* Store item detail */
.sf-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
@media (min-width: 860px) { .sf-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

.sf-detail-media {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    max-height: 520px;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--app-surface);
    border: 1px solid var(--app-border);
}

.sf-detail-media img { width: 100%; height: 100%; object-fit: contain; }
.sf-detail-info { display: flex; flex-direction: column; gap: var(--sp-3); }
.sf-detail-info h1 { font-size: clamp(22px, 5vw, 30px); }
.sf-detail-price { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sf-detail-desc { color: var(--app-text-muted); }
.sf-detail-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sf-detail-actions { flex-wrap: nowrap; }
.sf-detail-actions .btn-grow { flex: 1 1 0; min-width: 0; padding: 0 12px; }
.sf-detail-actions .btn-outline:not(.btn-grow) { flex: none; width: 54px; padding: 0; }

/* Online orders */
.order-tabs { overflow-x: auto; }
.order-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.order-card:target { box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), 0.3); }
.order-customer { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--app-surface-variant); }
.order-customer b { display: block; font-size: var(--fs-body-sm); }
.order-customer small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); }
.order-customer .icon-btn { border: 0; }
.order-items > div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 6px 0; font-size: var(--fs-body-sm); }
.order-items small { color: var(--app-text-muted); }
.order-items .order-total { border-top: 1px solid var(--app-border); margin-top: 4px; padding-top: 10px; font-weight: 650; }
.order-total strong { font-size: 18px; }

.push-preview {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--app-surface-variant);
    border: 1px solid var(--app-border);
}

.push-preview b { display: block; font-size: var(--fs-body-sm); }
.push-preview small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); }

/* ==========================================================================
   Voice Assistance (voice_assistant.php)
   ========================================================================== */
.va-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding-top: var(--sp-6); }
.va-hero h2 { font-size: 20px; }
.va-hero p { margin: 0; max-width: 360px; }

.va-orb {
    position: relative;
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--app-primary) 55%, #fff), var(--app-primary));
    color: #fff;
    box-shadow: 0 16px 40px rgba(var(--app-primary-rgb), 0.35);
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease-standard);
}

.va-orb span {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(var(--app-primary-rgb), 0.25);
    opacity: 0;
}

.va-orb[data-state="listening"] span { animation: va-pulse 1.4s ease-out infinite; }
.va-orb[data-state="listening"] { transform: scale(1.04); }
.va-orb[data-state="speaking"] { background: radial-gradient(circle at 35% 30%, #7ee2b8, var(--app-success)); box-shadow: 0 16px 40px rgba(21, 146, 79, 0.35); animation: va-breathe 1.2s ease-in-out infinite; }
.va-orb[data-state="thinking"] { animation: va-breathe 0.9s ease-in-out infinite; opacity: 0.9; }

@keyframes va-pulse {
    0% { transform: scale(0.9); opacity: 0.9; }
    100% { transform: scale(1.45); opacity: 0; }
}

@keyframes va-breathe {
    50% { transform: scale(1.06); }
}

.va-modes { width: 100%; max-width: 320px; }
.va-start { max-width: 360px; }

.va-chat {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-height: 420px;
    min-height: 140px;
    overflow-y: auto;
    padding: var(--sp-2) 0;
}

.va-empty { margin: auto; font-size: var(--fs-body-sm); }

.va-bubble { display: flex; }
.va-bubble > div {
    max-width: 84%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: var(--fs-body-sm);
    line-height: 1.45;
    animation: step-in var(--dur-base) var(--ease-standard);
}

.va-bubble.assistant > div { background: var(--app-surface-variant); border-bottom-left-radius: 6px; }
.va-bubble.user { justify-content: flex-end; }
.va-bubble.user > div { background: var(--app-primary); color: var(--app-on-primary); border-bottom-right-radius: 6px; }

.va-source,
.va-ok {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: var(--r-full);
    background: var(--app-info-container);
    color: var(--app-on-info-container);
    font-size: 11.5px;
    font-weight: 700;
    vertical-align: middle;
}

.va-ok { background: var(--app-success-container); color: var(--app-on-success-container); }
.va-type { border-top: 1px solid var(--app-border); padding-top: var(--sp-3); }
.va-tips { padding: 0; }

a.qs-voice { display: flex; align-items: center; gap: var(--sp-3); }
.qs-voice b { display: block; }
.qs-voice small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); }
.qs-voice .chev { color: var(--app-text-subtle); }

/* Subscription */
.sub-current-main { display: flex; align-items: center; gap: var(--sp-3); }
.sub-current-main h2 { font-size: 20px; }
.price-card .plan-cta { margin-top: auto; pointer-events: none; }

/* Backup */
.backup-status { display: flex; flex-direction: column; gap: var(--sp-4); }
.backup-status h2 { font-size: 20px; margin: 2px 0 6px; }
.backup-icon { width: 60px; height: 60px; margin: 0; }
.backup-icon .ic { width: 30px; height: 30px; }
.backup-row form { margin: 0; }

/* Expenses */
#finForm { display: flex; flex-direction: column; gap: var(--sp-3); }
#finForm > * + * { margin-top: 0; }
.fin-modes { border: 0; padding: 0; margin: 0; min-width: 0; }
.fin-modes legend { padding: 0; margin-bottom: 6px; }
.fin-row[hidden] { display: none; }
.fin-row strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-date { margin: var(--sp-3) 0 var(--sp-1); }

/* More */
a.more-profile { display: flex; align-items: center; gap: var(--sp-3); }
.more-profile b { display: block; font-size: 17px; }
.more-profile small { display: block; color: var(--app-text-muted); font-size: var(--fs-support); }
.more-profile .chev { color: var(--app-text-subtle); }

.more-logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 64px;
    height: 64px;
    padding: 6px;
    border-radius: 18px;
    background: var(--app-primary-container);
    color: var(--app-primary);
    font-size: 26px;
    font-weight: 800;
    overflow: hidden;
    border: 1px solid var(--app-border);
}

.more-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.more-logout b { color: var(--app-error); }

/* Notification center */
.ntf-item { margin: 0; }
.ntf-item + .ntf-item { border-top: 1px solid var(--app-border); }
.ntf-item[hidden] { display: none; }
.ntf-item .list-item { cursor: pointer; }
.ntf-item.unread .list-item { background: color-mix(in srgb, var(--app-primary-container) 45%, transparent); }
.ntf-item.unread b { font-weight: 750; }
.ntf-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--app-primary); }

/* Settings */
.settings-group > summary { list-style: none; cursor: pointer; min-height: 68px; }
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary .chev { transition: transform var(--dur-base) var(--ease-standard); color: var(--app-text-subtle); }
.settings-group[open] > summary .chev { transform: rotate(180deg); }
.settings-group[open] > summary { border-bottom: 1px solid var(--app-border); }
.settings-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
@media (min-width: 768px) { .settings-body { padding: var(--sp-5); } }

.logo-field { display: flex; align-items: center; gap: var(--sp-4); }
.logo-field b { display: block; }

.logo-field-preview {
    display: grid;
    place-items: center;
    flex: none;
    width: 120px;
    height: 72px;
    padding: 8px;
    border: 1px dashed var(--app-border-strong);
    border-radius: var(--r-sm);
    background: var(--app-surface-variant);
    color: var(--app-text-subtle);
    overflow: hidden;
}

.logo-field-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

.layout-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }

.layout-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 6px;
    border: 1.5px solid var(--app-border);
    border-radius: var(--r-sm);
    background: var(--app-surface);
    text-align: center;
    cursor: pointer;
}

.layout-card input { position: absolute; opacity: 0; pointer-events: none; }
.layout-card:has(input:checked) { border-color: var(--app-primary); background: var(--app-primary-container); }
.layout-card:has(input:focus-visible) { outline: 3px solid rgba(var(--app-primary-rgb), 0.4); }
.layout-card b { font-size: var(--fs-body-sm); }
.layout-card small { color: var(--app-text-muted); font-size: 11.5px; }
.layout-shape { display: block; border: 2px solid var(--app-text-subtle); border-radius: 3px; background: #fff; }
.layout-card:has(input:checked) .layout-shape { border-color: var(--app-primary); }
.layout-2inch { width: 14px; height: 30px; }
.layout-4inch { width: 20px; height: 30px; }
.layout-a6 { width: 21px; height: 30px; }
.layout-a5 { width: 21px; height: 30px; }
.layout-a4 { width: 30px; height: 21px; }
.layout-a4full { width: 21px; height: 30px; border-width: 2.5px; }
.term-points-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.term-point-row { display: flex; align-items: center; gap: var(--sp-2); }
.term-point-row > span { color: var(--app-text-subtle); }
.term-point-row .icon-btn { border: 0; background: transparent; color: var(--app-text-subtle); }

/* Users */
.team-row .app-avatar { width: 44px; height: 44px; }
.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.role-card { align-items: flex-start; text-align: left; padding: 10px 12px; }

/* Business documents */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 1100px) { .doc-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.doc-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.doc-form > * + * { margin-top: 0; }
.doc-types { overflow-x: auto; }
.doc-types > label { flex: 0 0 auto; }
.doc-more-types .chip-row { padding-top: 0; }
.doc-lines { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0; }
.doc-line { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--app-border); border-radius: var(--r-md); background: var(--app-surface-variant); }
.doc-line-top { display: flex; gap: var(--sp-2); }
.doc-line-top .icon-btn { border: 0; background: transparent; color: var(--app-text-subtle); }
.doc-line-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--sp-2); }
.doc-line-grid .field-label { font-size: var(--fs-caption); }
.doc-line-total { text-align: right; font-size: var(--fs-caption); }
.doc-line-total b { color: var(--app-text); font-size: var(--fs-body-sm); }
.doc-created { display: flex; flex-direction: column; gap: var(--sp-4); border-color: color-mix(in srgb, var(--app-success) 35%, var(--app-border)); }
.doc-created h2 { font-size: 18px; }
.doc-ok { width: 52px; height: 52px; margin: 0; }
.doc-ok .ic { width: 26px; height: 26px; }
.doc-actions .btn { flex: 1 1 auto; }
.doc-row[hidden] { display: none; }
.doc-valid[hidden] { display: none; }

/* Returns */
.ret-line { grid-template-columns: minmax(0, 1fr) auto 0; }
.ret-line.is-done { opacity: 0.65; }
.ret-line .stepper input { width: 60px; }
.ret-line .bill-line-side small { font-size: 11px; }
.ret-effect .grand { font-size: 18px; }

/* Invoice view */
.inv-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 1024px) { .inv-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .inv-side { position: sticky; top: 84px; } }
.inv-side { display: flex; flex-direction: column; gap: var(--sp-4); }
.inv-saved { display: flex; align-items: center; gap: var(--sp-3); border-color: color-mix(in srgb, var(--app-success) 35%, var(--app-border)); }
.inv-saved .result-icon { width: 52px; height: 52px; margin: 0; }
.inv-saved .result-icon .ic { width: 26px; height: 26px; }
.inv-saved h2 { font-size: 18px; }
.inv-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.inv-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.inv-action-grid .btn { padding: 0 10px; }
.inv-action-grid .share-ready { box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.25); }
.inv-action-grid .share-attention { animation: share-pulse 1.2s ease 2; }
@keyframes share-pulse { 50% { transform: translateY(-2px); } }
.invoice-viewport { overflow: hidden; border-radius: var(--r-md); background: var(--app-surface-variant); padding: var(--sp-2); display: flex; justify-content: center; }
.invoice-scale-box { overflow: hidden; }
.invoice-scale-box iframe { border: 0; background: #fff; display: block; box-shadow: var(--shadow-soft); }

/* Parties & dues */
.due-party { display: flex; flex-direction: column; gap: var(--sp-3); }
.due-party[hidden] { display: none; }
.due-party > * + * { margin-top: 0; }
.due-party-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.due-party-head b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-party-head small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); }
.due-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.due-amount strong { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.due-bills summary { display: flex; align-items: center; gap: 6px; color: var(--app-primary); font-size: var(--fs-support); font-weight: 650; cursor: pointer; list-style: none; min-height: 32px; }
.due-bills summary::-webkit-details-marker { display: none; }
.due-bills .list { margin-top: var(--sp-2); }
.due-actions { display: flex; gap: var(--sp-2); }
.due-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.ledger-hero .hero-value { font-size: 30px; }

/* GST */
.gst-setup .steps { margin-bottom: var(--sp-2); }
.gst-doc { display: flex; flex-direction: column; gap: var(--sp-3); }
.gst-doc > * + * { margin-top: 0; }

/* Marketing CRM pipeline */
.crm-board { display: flex; flex-direction: column; gap: var(--sp-3); }
.crm-column { display: flex; flex-direction: column; gap: var(--sp-3); }
.crm-column-head { display: none; }
.crm-column:not(:has(.crm-lead:not([hidden]))) { display: none; }
.crm-lead { display: flex; flex-direction: column; gap: var(--sp-3); }
.crm-lead-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.crm-lead-head .grow { min-width: 0; }
.crm-lead-head b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-lead-head small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-notes { margin: 0; color: var(--app-text-muted); font-size: var(--fs-body-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crm-follow { margin: 0; display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-caption); color: var(--app-text-muted); }
.crm-follow.overdue { color: var(--app-error); font-weight: 600; }
.chip b { font-weight: 700; opacity: 0.7; margin-left: 2px; }

@media (min-width: 1024px) {
    .crm-board:not(.is-filtered) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: var(--sp-4); overflow-x: auto; align-items: start; padding-bottom: var(--sp-2); }
    .crm-board:not(.is-filtered) .crm-column { display: flex; padding: var(--sp-3); border-radius: var(--r-lg); background: var(--app-surface-variant); min-height: 120px; }
    .crm-board:not(.is-filtered) .crm-column-head { display: flex; align-items: center; justify-content: space-between; }
    .crm-board:not(.is-filtered) .crm-lead .crm-lead-head > .status-chip { display: none; }
    .crm-column.is-filtered-out { display: none; }
}
.hero-value.ca-client-name { font-size: 24px; }

/* Platform admin */
.admin-plan { margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-1); border: 1px solid var(--app-border); border-radius: var(--r-md); min-width: 0; }
.admin-plan legend { padding: 0 var(--sp-2); font-weight: 700; }
.admin-verify { flex-wrap: wrap; }
.admin-verify .list-text { flex: 1 1 200px; }
.admin-verify-row { display: flex; gap: var(--sp-2); flex: 1 1 260px; }
.admin-verify-row input { flex: 1; min-width: 0; }

/* Global product master */
.pm-product > summary { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; list-style: none; min-height: 44px; }
.pm-product > summary::-webkit-details-marker { display: none; }
.pm-product > summary .list-text { flex: 1; min-width: 0; }
.pm-product > summary .chev { transition: transform var(--dur-fast) var(--ease-standard); }
.pm-product[open] > summary .chev { transform: rotate(90deg); }
.pm-product[open] > summary { padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--app-border); }
.pm-verify { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--sp-2); align-items: end; margin-top: var(--sp-4); }
@media (max-width: 480px) { .pm-verify { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pm-verify .btn { grid-column: 1 / -1; } }
.pm-provider { padding: 0 var(--sp-4) var(--sp-3); }
.pm-provider + .pm-provider { border-top: 1px solid var(--app-border); }
.pm-provider-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); align-items: end; }
.pm-issue { flex-wrap: wrap; }
.pm-issue-actions { display: flex; gap: var(--sp-2); flex: 1 1 100%; }
.pm-issue-actions select { flex: 1; min-width: 0; }
.pm-undo { margin-top: var(--sp-3); }
.pm-undo > summary { cursor: pointer; color: var(--app-primary); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.pm-undo[open] > summary { margin-bottom: var(--sp-2); }


/* Items header action + long names that never collide with qty / amount */
.bill-items-head { flex-wrap: wrap; gap: var(--sp-2); }
.bill-add-item { flex: none; }
.bill-lines { container-type: inline-size; }
.bill-line-main b { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.bill-line-side { min-width: 0; }
@container (max-width: 340px) {
    .bill-line { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "main remove" "side side"; }
    .bill-line-main { grid-area: main; }
    .bill-line-remove { grid-area: remove; align-self: start; }
    .bill-line-side { grid-area: side; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
}
.bill-items-card .empty-state .btn { margin-top: var(--sp-3); }

/* Narrow phones / large text: the current step keeps its label, others show icons */
@media (max-width: 399px) {
    .bill-steps { grid-template-columns: auto auto auto; justify-content: start; }
    .bill-steps li:not(.current) b { display: none; }
    .bill-steps li:not(.current) { padding: 4px; }
}

/* Parties & Dues summary: total + three buckets that add up to it */
.dues-summary { display: flex; flex-direction: column; gap: var(--sp-3); }
.dues-total small { display: block; color: var(--app-text-muted); font-size: var(--fs-support); font-weight: 600; }
.dues-total strong { display: block; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dues-total span { color: var(--app-text-subtle); font-size: var(--fs-caption); }
.dues-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.dues-bucket { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--tile-bg, var(--app-surface-variant)); color: var(--tile-fg, var(--app-text)); text-decoration: none; border: 2px solid transparent; }
.dues-bucket small { font-size: var(--fs-caption); font-weight: 600; opacity: 0.85; }
.dues-bucket b { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.25; }
.dues-bucket.tone-red { --tile-bg: var(--app-error-container); --tile-fg: var(--app-on-error-container, var(--app-error)); }
.dues-bucket.tone-amber { --tile-bg: var(--app-warning-container); --tile-fg: var(--app-on-warning-container, var(--app-text)); }
.dues-bucket.tone-blue { --tile-bg: var(--app-info-container); --tile-fg: var(--app-on-info-container, var(--app-text)); }
.dues-bucket.active { border-color: currentColor; }
/* Phones: the three buckets become labelled rows so full amounts always fit */
@media (max-width: 519px) {
    .dues-split { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .dues-bucket { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px 14px; }
    .dues-bucket small { font-size: var(--fs-support); }
}
.due-party.state-overdue { box-shadow: inset 4px 0 0 var(--app-error); }
.due-party.state-today { box-shadow: inset 4px 0 0 var(--app-warning); }
.due-breakdown { margin: 0; font-size: var(--fs-caption); color: var(--app-text-muted); }
.due-party-head .grow { min-width: 0; }
.due-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.due-actions .btn { flex: 1 1 0; min-width: 88px; }
.receive-form .chip { cursor: pointer; }
.item-suggestion-icon { overflow: hidden; }
.item-suggestion-icon img { width: 100%; height: 100%; object-fit: cover; }

/* Product report */
.pr-hero { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pr-hero h2 { margin: 0; font-size: var(--fs-section); overflow-wrap: anywhere; }
.pr-hero p { margin: 2px 0 0; color: var(--app-text-muted); font-size: var(--fs-support); }
.pr-hero .grow { min-width: 0; flex: 1 1 200px; }
.pr-thumb { width: 56px; height: 56px; font-size: 20px; }
.pr-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pr-event { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--app-border); }
.pr-event:first-child { border-top: 0; }
.pr-event-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pr-event-top { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline; }
.pr-event-top b { font-size: var(--fs-body-sm); overflow-wrap: anywhere; }
.pr-event-top strong { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-event small { color: var(--app-text-muted); font-size: var(--fs-caption); line-height: 1.5; }
.pr-note { color: var(--app-text) !important; }
.pr-pager { justify-content: center; align-items: center; margin-top: var(--sp-3); }

/* Auth extras: live mobile check, remember/forgot row, PIN pad */
.mobile-status { display: block; min-height: 18px; margin-top: 6px; font-size: var(--fs-caption); font-weight: 600; color: var(--app-text-muted); }
.mobile-status.error { color: var(--app-error); }
.mobile-status.ok { color: var(--app-success); }
.mobile-status a { color: var(--app-primary); font-weight: 700; text-decoration: underline; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.auth-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-support); font-weight: 600; min-height: 44px; cursor: pointer; }
.auth-check input { width: 18px; height: 18px; accent-color: var(--app-primary); }
.auth-link { color: var(--app-primary); font-weight: 700; font-size: var(--fs-support); min-height: 44px; display: inline-flex; align-items: center; }
.auth-shell--single { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.auth-shell--single .auth-card-wrap { width: 100%; max-width: 440px; }
.auth-brand-always { display: flex !important; }
.result-inline { display: flex; gap: var(--sp-3); align-items: flex-start; }
.result-inline p { margin: 4px 0 0; color: var(--app-text-muted); font-size: var(--fs-support); }
.pin-form { align-items: center; text-align: center; }
.pin-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pin-dots { display: flex; justify-content: center; gap: 14px; margin-top: var(--sp-2); }
.pin-dots span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--app-border-strong); }
.pin-dots span.on { background: var(--app-primary); border-color: var(--app-primary); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; justify-content: center; margin-top: var(--sp-2); }
.pin-pad button { width: 72px; height: 60px; border-radius: 18px; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text); font: inherit; font-size: 22px; font-weight: 700; display: grid; place-items: center; cursor: pointer; }
.pin-pad button:active { background: var(--app-primary-container); }
.pin-pad button[type=submit] { background: var(--app-primary); color: var(--app-on-primary); border-color: var(--app-primary); }
.pin-help { margin-top: var(--sp-4); }
.pin-help summary { color: var(--app-primary); font-weight: 700; cursor: pointer; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.link-summary { color: var(--app-primary); font-weight: 650; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; }
.auth-input-group input:focus, .password-input input:focus { border: 0; box-shadow: none; outline: none; }

/* Public invoice preview (customer/invoice.php) */
.pub-invoice { max-width: 880px; }
.pub-inv-head { display: flex; align-items: center; gap: var(--sp-3); }
.pub-inv-head .grow { min-width: 0; }
.pub-inv-head b { display: block; font-size: var(--fs-card-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-inv-head small { color: var(--app-text-muted); font-size: var(--fs-caption); }
.pub-inv-logo { max-height: 40px; max-width: 120px; object-fit: contain; }
.pub-inv-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); text-align: center; }
.pub-inv-summary > div { container-type: inline-size; }
.pub-inv-summary small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); }
.pub-inv-summary strong { display: block; white-space: nowrap; font-size: min(18px, 13cqi); font-variant-numeric: tabular-nums; }
.pub-inv-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pub-inv-actions .btn-grow { flex: 1 1 140px; }
.pub-inv-doc { padding: var(--sp-2); overflow: hidden; }
.pub-inv-store { display: flex; align-items: center; gap: var(--sp-3); color: inherit; text-decoration: none; }
.pub-inv-store .list-text { flex: 1; min-width: 0; }

/* Storefront sort */
.sf-sort { display: block; margin: 8px 0 4px; }
.sf-sort select { width: auto; min-height: 40px; max-width: 100%; }
.push-preview-image { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--radius-md, 12px); margin-top: 8px; }

/* Voice assistant: live listening indicator, wake hint, answer card */
.va-listen-state { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; font-weight: 600; color: var(--app-danger, #c62828); min-height: 24px; overflow-wrap: anywhere; }
.va-listen-state[hidden], .va-wake-hint[hidden] { display: none; }
.va-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; animation: va-blink 1s ease-in-out infinite; }
@keyframes va-blink { 50% { opacity: 0.25; transform: scale(0.8); } }
.va-wake-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; color: var(--app-text-muted); font-size: var(--fs-caption); }
.va-answer-rows { display: grid; gap: 2px; }
.va-answer-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--app-border); }
.va-answer-row:last-child { border-bottom: 0; }
.va-answer-row span { color: var(--app-text-muted); min-width: 0; overflow-wrap: anywhere; }
.va-answer-row b { text-align: right; white-space: nowrap; }
.va-bubble > div { white-space: pre-line; }
@media (prefers-reduced-motion: reduce) { .va-dot { animation: none; } }

/* Admin panel */
.admin-menu-btn { display: none; }
@media (max-width: 1023.98px) { .admin-menu-btn { display: inline-flex; } }
.admin-drawer { display: grid; gap: 2px; padding: 8px 16px 12px; background: var(--app-surface); border-bottom: 1px solid var(--app-border); }
.admin-drawer[hidden] { display: none; }
.admin-drawer a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 10px; color: var(--app-text); text-decoration: none; }
.admin-drawer a.active { background: var(--app-primary-soft, rgba(47, 91, 234, .1)); color: var(--app-primary); font-weight: 650; }
.admin-drawer-group { margin: 8px 0 2px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--app-text-muted); }
.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.admin-table th, .admin-table td { padding: 10px 8px; border-bottom: 1px solid var(--app-border); text-align: left; vertical-align: top; }
.admin-table th { font-size: var(--fs-caption); color: var(--app-text-muted); font-weight: 650; white-space: nowrap; }
.admin-table td.num, .admin-table th.num { text-align: right; white-space: nowrap; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.admin-filters > * { flex: 1 1 160px; min-width: 0; }
.admin-filters .btn { flex: 0 0 auto; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.key-list { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; line-height: 1.9; user-select: all; white-space: pre-wrap; word-break: break-all; background: var(--app-surface-variant); padding: 12px; border-radius: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 16px; }
.kv-grid div { display: grid; gap: 2px; min-width: 0; }
.kv-grid span { color: var(--app-text-muted); font-size: var(--fs-caption); }
.kv-grid b { overflow-wrap: anywhere; }
.timeline-mini { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.timeline-mini li { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--app-border); }
.timeline-mini small { color: var(--app-text-muted); }
.plan-expiry-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; justify-content: space-between; }
.plan-expiry-banner > span:first-child { flex: 1 1 260px; min-width: 0; }
.plan-expiry-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.media-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.media-item { margin: 0; padding: 10px; display: grid; gap: 8px; }
.media-item img { width: 100%; aspect-ratio: 1.6; object-fit: cover; border-radius: 10px; background: var(--app-surface-variant); }
.media-item figcaption { display: grid; gap: 6px; min-width: 0; }

/* ==========================================================================
   2026-09-28 · Paid access, branding, admin security, screenshot fixes
   ========================================================================== */

/* Platform brand marks (logo image or first letter) */
.brand-letter { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; }
.auth-logo-mark:has(img) { background: #fff; box-shadow: 0 8px 22px rgba(15, 27, 61, 0.12); }
.auth-logo-mark img, .sidebar-brand .brand-mark img, .restricted-brand img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.auth-logo-mark img { padding: 6px; }
.restricted-brand { flex: none; overflow: hidden; background: var(--app-primary-container); color: var(--app-on-primary-container); }

/* Activation / renewal page */
.activation-hero { display: flex; flex-direction: column; gap: var(--sp-4); }
.activation-hero-head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.activation-hero-head .grow { min-width: 0; }
.activation-hero-head h2 { margin: 0 0 4px; font-size: var(--fs-title, 20px); }
.activation-hero-head p { margin: 0; }
.activation-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; counter-reset: s; }
.activation-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--app-text-muted); }
.activation-steps li .ic { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--app-surface-sunken); color: var(--app-text-subtle); }
.activation-steps li.done .ic { background: var(--app-success); color: #fff; }
.activation-steps li.current { color: var(--app-text); }
.activation-steps li.current .ic { background: var(--app-primary); color: var(--app-on-primary); box-shadow: 0 0 0 4px rgba(var(--app-primary-rgb), 0.18); }
.coupon-row { display: flex; gap: var(--sp-2); align-items: flex-end; }
.coupon-row .field { min-width: 0; }
.coupon-row .btn { flex: none; min-height: var(--tap); }
.quote-kv .quote-total { border-top: 1px solid var(--app-border); padding-top: 10px; margin-top: 4px; }
.quote-kv .quote-total span, .quote-kv .quote-total b { font-size: 17px; font-weight: 800; color: var(--app-text); }
.stack-sm { display: flex; flex-direction: column; gap: var(--sp-2); }
.text-danger { color: var(--app-error) !important; }
@media (max-width: 360px) { .activation-steps li span { font-size: 11px; } }

/* Admin settings sections, branding, coupons, 2FA */
.settings-tabs { margin-bottom: var(--sp-3); }
.settings-tabs .chip { text-decoration: none; }
.brand-assets { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.brand-asset { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--app-border); border-radius: var(--r-md); min-width: 0; }
.brand-asset-preview { display: grid; place-items: center; height: 72px; border-radius: 10px; background: repeating-conic-gradient(#f1f3f8 0% 25%, #fff 0% 50%) 50% / 16px 16px; overflow: hidden; }
.brand-asset-preview img { max-width: 90%; max-height: 60px; object-fit: contain; }
.brand-asset-preview.square img { width: 56px; height: 56px; }
.brand-asset input[type="file"] { max-width: 100%; font-size: 13px; }
.color-field { display: flex; gap: 8px; align-items: center; }
.color-field input[type="color"] { flex: none; width: 48px; height: var(--tap); padding: 2px; border: 1px solid var(--app-border-strong); border-radius: 10px; background: #fff; }
.color-field input.mono { flex: 1; min-width: 0; }
.coupon-code { font-size: 26px; font-weight: 800; letter-spacing: 0.08em; padding: 14px; text-align: center; border: 2px dashed var(--app-primary); border-radius: var(--r-md); background: var(--app-primary-container); color: var(--app-on-primary-container); overflow-wrap: anywhere; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--app-surface-variant); }
.recovery-codes span { font-size: 15px; font-weight: 700; text-align: center; }
.totp-qr { display: grid; place-items: center; padding: 12px; background: #fff; border-radius: var(--r-md); border: 1px solid var(--app-border); width: max-content; margin: 0 auto; }
.totp-key { text-align: center; font-size: 15px; letter-spacing: 0.06em; overflow-wrap: anywhere; }

/* Business settings: invoice design picker */
.template-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.template-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1.5px solid var(--app-border); border-radius: var(--r-sm); cursor: pointer; min-width: 0; }
.template-card input { position: absolute; opacity: 0; pointer-events: none; }
.template-card:has(input:checked) { border-color: var(--app-primary); background: var(--app-primary-container); }
.template-card:has(input:focus-visible) { outline: 3px solid rgba(var(--app-primary-rgb), 0.4); }
.template-card b { font-size: var(--fs-body-sm); }
.template-card small { color: var(--app-text-muted); font-size: 11.5px; line-height: 1.35; }
.tpl-thumb { position: relative; display: block; height: 64px; border: 1px solid var(--app-border-strong); border-radius: 6px; background: #fff; overflow: hidden; }
.tpl-thumb i { position: absolute; left: 10%; right: 10%; height: 6px; border-radius: 3px; background: #d7dce8; }
.tpl-thumb i:nth-child(1) { top: 12px; right: 45%; background: var(--app-primary); }
.tpl-thumb i:nth-child(2) { top: 28px; }
.tpl-thumb i:nth-child(3) { top: 42px; }
.tpl-thumb-wave::before { content: ""; position: absolute; left: -10%; right: -10%; top: -18px; height: 26px; border-radius: 0 0 50% 50%; background: var(--app-primary); opacity: 0.85; }
.tpl-thumb-classic, .tpl-thumb-wholesale { border: 2px solid #333; }
.tpl-thumb-classic i, .tpl-thumb-wholesale i { border-radius: 0; left: 0; right: 0; height: 1px; background: #444; }
.tpl-thumb-classic i:nth-child(1), .tpl-thumb-wholesale i:nth-child(1) { top: 16px; right: 0; background: #444; }
.tpl-thumb-wholesale { background: repeating-linear-gradient(90deg, #fff 0 18%, #999 18% calc(18% + 1px)); }

/* Screenshot fixes (27 Sep): long labels never clip, links never overflow cards */
.inv-action-grid #shareInvoiceBtn { grid-column: 1 / -1; }
.inv-action-grid .btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv > .link-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.link-row > span { flex: none; }
.link-row-url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-weight: 650; }
.link-row .icon-btn { flex: none; }
.pub-inv-head { flex-wrap: wrap; row-gap: var(--sp-2); }
.pub-inv-head .grow { flex: 1 1 150px; }
.pub-inv-head small { display: block; overflow-wrap: anywhere; }
.pub-inv-logo { max-width: 96px; max-height: 40px; }
.pub-inv-head > .status-chip { margin-left: auto; }
.vc-front-body { padding-bottom: 23cqw; }
.vc-web { left: 6cqw; right: 6cqw; bottom: 18.5cqw; color: var(--navy); text-align: center; font-size: 2.6cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* On-screen keyboard open: the bottom navigation hides so it never covers the field being typed in */
html.kb-open .app-bottom-nav { display: none !important; }
html.kb-open .app-main { padding-bottom: 0 !important; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; align-items: center; gap: var(--sp-2); }
.bar-row span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--app-primary) var(--w), var(--app-surface-sunken) var(--w)); }
.site-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); text-align: center; }
.site-stats b { display: block; font-size: 28px; font-weight: 800; color: var(--app-primary); }
.site-stats span { color: var(--app-text-muted); }
.cms-repeat { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px dashed var(--app-border-strong); border-radius: var(--r-sm); }
.card.pub-inv-store, a.pub-inv-store { display: flex; flex-direction: row; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; }
.pub-inv-store .list-text { flex: 1 1 auto; min-width: 0; }
.pub-inv-store .list-text b { display: block; font-size: var(--fs-body, 15px); font-weight: 700; }
.pub-inv-store .list-text small { display: block; color: var(--app-text-muted); font-size: var(--fs-caption); }
.pub-inv-store .chev { flex: none; color: var(--app-text-subtle); }
.admin-body .card-head { flex-wrap: wrap; row-gap: 6px; }
.admin-body .card-head > div { min-width: 0; flex: 1 1 200px; }
.admin-body .card-head p, .admin-body .notice, .admin-body .notice .mono { overflow-wrap: anywhere; }
.admin-body fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }

/* ==========================================================================
   Activation layout (subscription.php for businesses without an active plan)
   Own full-width page: never the app-shell grid, whose desktop sidebar column
   squeezed the whole page into 260 px when the sidebar was left out.
   ========================================================================== */
.activation-body { min-height: 100vh; min-height: 100dvh; background: var(--app-background); }
.act-header { position: sticky; top: 0; z-index: 30; background: var(--app-surface); border-bottom: 1px solid var(--app-border); padding-top: var(--safe-top); }
.act-header-inner { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.act-brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 800; font-size: 18px; color: var(--app-text); }
.act-brand-mark { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; overflow: hidden; background: var(--app-primary); color: var(--app-on-primary); }
.act-brand-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.act-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-header-user { display: flex; align-items: center; gap: 12px; min-width: 0; flex: none; }
.act-user-text { display: flex; flex-direction: column; text-align: right; min-width: 0; max-width: 260px; }
.act-user-text b, .act-user-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-user-text small { color: var(--app-text-muted); font-size: var(--fs-caption); }
@media (max-width: 520px) { .act-user-text { display: none; } }
.act-main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 20px 16px calc(112px + var(--safe-bottom)); }
@media (min-width: 1024px) { .act-main { padding: 32px 24px 48px; } }
.act-page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.act-hero { display: flex; flex-direction: column; gap: 8px; }
.act-hero h1 { margin: 0; font-size: clamp(22px, 3.2vw, 32px); line-height: 1.2; letter-spacing: -0.01em; }
.act-hero > p { margin: 0; max-width: 760px; }
.act-hero .activation-steps { margin-top: 14px; max-width: 760px; }
.act-checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.act-plans { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.act-plans .section-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.act-plans .section-title h2 { margin: 0; }
.price-grid.act-price-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (min-width: 600px) { .price-grid.act-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .act-checkout { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; }
    .act-summary { position: sticky; top: 84px; }
}
.act-price-grid .price-card { padding: 20px; gap: 10px; }
.act-price-grid .price-card.featured:not(.selected) { border-color: var(--app-border); }
.act-price-grid .price-card .plan-price { font-size: 28px; }
.act-price-grid .price-card ul { font-size: 13.5px; }
.plan-select { margin-top: auto; display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 40px; border-radius: var(--r-md); background: var(--app-surface-variant); color: var(--app-text); font-weight: 700; font-size: var(--fs-body-sm); }
.plan-select .when-on { display: none; align-items: center; gap: 6px; }
.price-card:has(input:checked) .plan-select, .price-card.selected .plan-select { background: var(--app-primary); color: var(--app-on-primary); }
.price-card:has(input:checked) .plan-select .when-on, .price-card.selected .plan-select .when-on { display: inline-flex; }
.price-card:has(input:checked) .plan-select .when-off, .price-card.selected .plan-select .when-off { display: none; }
.price-card:has(input:focus-visible) { outline: 3px solid rgba(var(--app-primary-rgb), 0.45); outline-offset: 2px; }
.act-summary { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.act-summary .card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.act-summary .card-head h3 { margin: 0; }
.act-summary .btn[aria-busy="true"] { opacity: 0.85; cursor: progress; }
.act-secure { display: flex; gap: 6px; align-items: flex-start; }
.act-secure .ic { flex: none; margin-top: 2px; color: var(--app-success); }
.act-license, .act-page > .card { min-width: 0; }
.act-paybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + var(--safe-bottom)); background: var(--app-surface); border-top: 1px solid var(--app-border); box-shadow: 0 -8px 24px rgba(15, 27, 61, 0.10); transform: translateY(110%); transition: transform var(--dur-base) var(--ease-standard); }
.act-paybar.show { transform: none; }
.act-paybar-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.act-paybar-text b, .act-paybar-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-paybar-text small { color: var(--app-text-muted); font-size: var(--fs-caption); }
.act-paybar .btn { flex: none; min-width: 120px; }
@media (min-width: 1024px) { .act-paybar { display: none; } }
html.kb-open .act-paybar { display: none; }
.act-success { max-width: 560px; width: 100%; margin: 12px auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 28px 20px; }
.act-success h1 { margin: 0; font-size: 26px; }
.act-success-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--app-success); color: #fff; }
.act-success-icon .ic { width: 34px; height: 34px; }
.act-success-kv { width: 100%; text-align: left; }
.act-success-kv b { overflow-wrap: anywhere; text-align: right; }