html, body {
    margin: 0;
    padding: 0;
    background: #f5f8fb;
    font-family: Inter, Segoe UI, Arial, sans-serif;
    color: #102a43;
}

.kb-brand-badge,
.kb-topbar-logo {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #ffffff;
    flex: 0 0 44px;
}

.kb-brand-logo,
.kb-topbar-logo img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    display: block;
}

.kb-public-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 0%, rgba(7, 151, 157, 0.11), transparent 34rem),
        radial-gradient(circle at 88% 10%, rgba(255, 107, 87, 0.12), transparent 28rem),
        #f8fbfc;
    color: #102a43;
}

.kb-public-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 14px clamp(18px, 4vw, 56px);
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid rgba(16, 42, 67, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 12px 32px rgba(16, 42, 67, 0.05);
}

.kb-public-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #102a43;
    text-decoration: none;
}

.kb-public-brand strong {
    display: block;
    font-size: 22px;
    line-height: 1.1;
}

.kb-public-brand small {
    display: block;
    color: #6d7890;
    font-size: 13px;
}

.kb-public-logo {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(7, 151, 157, 0.16);
    box-shadow: 0 12px 28px rgba(7, 151, 157, 0.16);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kb-public-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kb-public-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.kb-public-language {
    width: 132px;
}

.kb-public-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 28px;
    color: #6d7890;
    border-top: 1px solid rgba(16, 42, 67, 0.08);
    background: #fff;
}

.kb-public-footer a {
    color: #07979d;
    text-decoration: none;
    font-weight: 600;
}

.kb-marketing-section {
    padding: 78px clamp(18px, 4vw, 64px);
}

.kb-marketing-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.kb-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    align-items: center;
    gap: 36px;
}

.kb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(7, 151, 157, 0.16);
    color: #075e63;
    font-size: 13px;
    font-weight: 700;
}

.kb-public-title {
    margin: 18px 0 14px;
    font-size: clamp(42px, 6vw, 74px);
    line-height: 0.96;
    font-weight: 850;
    color: #102a43;
    letter-spacing: 0;
}

.kb-public-lead {
    max-width: 660px;
    color: #52687d;
    font-size: 19px;
    line-height: 1.55;
}

.kb-public-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.kb-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.kb-public-card {
    border: 1px solid rgba(16, 42, 67, 0.08);
    background: rgba(255, 255, 255, 0.96);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 18px 44px rgba(16, 42, 67, 0.06);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.kb-public-card:hover {
    transform: translateY(-2px);
    border-color: rgba(7, 151, 157, 0.22);
    box-shadow: 0 24px 58px rgba(16, 42, 67, 0.09);
}

.kb-public-card h3,
.kb-public-card h2 {
    margin: 0 0 10px;
}

.kb-public-card p {
    color: #5f6c83;
    margin: 0;
    line-height: 1.5;
}

.kb-proof-panel {
    border: 1px solid rgba(7, 151, 157, 0.18);
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 62px rgba(16, 42, 67, 0.10);
}

.kb-proof-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid #edf3f8;
    background: linear-gradient(90deg, rgba(7, 151, 157, 0.08), rgba(255, 107, 87, 0.05));
}

.kb-sql-window {
    margin: 0;
    padding: 18px;
    background: #111827;
    color: #d6f3ff;
    overflow: auto;
    font: 13px/1.55 Consolas, Monaco, monospace;
}

.kb-sql-window .kb-token {
    color: #7dd3fc;
}

.kb-sql-window .kb-encrypted {
    color: #f9a8d4;
}

.kb-owner-window {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}

.kb-owner-metric {
    border: 1px solid rgba(16, 42, 67, 0.08);
    border-radius: 14px;
    padding: 14px;
    background: #fff;
}

.kb-owner-metric span {
    display: block;
    color: #6d7890;
    font-size: 13px;
}

.kb-owner-metric strong {
    display: block;
    margin-top: 6px;
    font-size: 26px;
    color: #102a43;
}

.kb-band {
    background: rgba(255, 255, 255, 0.72);
    border-top: 1px solid rgba(16, 42, 67, 0.06);
    border-bottom: 1px solid rgba(16, 42, 67, 0.06);
}

.kb-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.kb-plan-price {
    font-size: 38px;
    font-weight: 760;
    color: #102a43;
}

.kb-check-list {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.kb-check-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #526078;
}

.kb-check-list li::before {
    content: "✓";
    color: #10b981;
    font-weight: 800;
}

.kb-security-note {
    border: 1px solid #b7ddff;
    background: #f2f8ff;
    border-radius: 8px;
    padding: 14px 16px;
    color: #1f5f9f;
}

.kb-action-explain-item {
    cursor: default !important;
}

.kb-action-explain-item:hover {
    background: transparent !important;
}

.kb-action-explain-item .mud-typography {
    color: #12304a !important;
    opacity: 1 !important;
}

.kb-action-explain-item .mud-typography-subtitle2,
.kb-action-explain-item .mud-typography-subtitle1 {
    color: #0b2239 !important;
    font-weight: 700 !important;
}

.kb-action-explain-item .mud-typography-caption,
.kb-action-explain-item .mud-typography-body2 {
    color: #31465f !important;
}

.kb-pos-row-important td {
    background: #fff8ed !important;
}

.kb-pos-row-important td:first-child {
    box-shadow: inset 4px 0 0 #f59f00;
}

.kb-pos-row-service td {
    background: #fff2f2 !important;
}

.kb-pos-row-service td:first-child {
    box-shadow: inset 4px 0 0 #f04444;
}

.kb-pos-row-product td {
    background: #eef7ff !important;
}

.kb-pos-row-product td:first-child {
    box-shadow: inset 4px 0 0 #2f80ed;
}

.kb-pos-row-cardfee td {
    background: #fff8ed !important;
}

.kb-pos-row-cardfee td:first-child {
    box-shadow: inset 4px 0 0 #f59f00;
}

.kb-pos-row-review td {
    color: #52687d !important;
    background: #fafbfc !important;
}

.kb-payroll-create-button {
    min-height: 46px !important;
    padding: 10px 18px !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 24px rgba(245, 159, 0, 0.24) !important;
}

.kb-reconnect-modal {
    position: fixed;
    inset: auto 16px 16px 16px;
    z-index: 2600;
    display: none;
    pointer-events: none;
}

.components-reconnect-show,
.components-reconnect-failed,
.components-reconnect-rejected {
    display: flex !important;
    justify-content: center;
}

.kb-reconnect-card {
    width: min(560px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(7, 151, 157, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 44px rgba(16, 42, 67, 0.18);
    color: #102a43;
    pointer-events: auto;
}

.kb-reconnect-card strong {
    font-size: 15px;
}

.kb-reconnect-card span {
    color: #52687d;
    font-size: 13px;
}

.kb-reconnect-card button {
    grid-row: span 2;
    border: 0;
    border-radius: 8px;
    padding: 9px 12px;
    background: #07979d;
    color: #fff;
    font-weight: 750;
    cursor: pointer;
}

.components-reconnect-failed .kb-reconnect-card,
.components-reconnect-rejected .kb-reconnect-card,
.kb-reconnect-needs-manual-reload .kb-reconnect-card {
    border-color: rgba(245, 159, 0, 0.42);
}

@media (max-width: 980px) {
    .kb-public-header {
        grid-template-columns: 1fr;
    }

    .kb-public-nav {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .kb-hero-grid,
    .kb-feature-grid,
    .kb-plan-grid,
    .kb-owner-window {
        grid-template-columns: 1fr;
    }

    .kb-public-title {
        font-size: 42px;
    }

    .kb-public-footer {
        flex-direction: column;
        gap: 8px;
    }
}

.kb-check-list li::before {
    content: "\2713";
    color: #07979d;
    font-weight: 800;
}

.kb-security-note {
    border: 1px solid rgba(7, 151, 157, 0.20);
    background: #eefafa;
    border-radius: 14px;
    padding: 14px 16px;
    color: #075e63;
}

.kb-public-shell .mud-button-root {
    border-radius: 10px !important;
    font-weight: 750 !important;
    text-transform: none !important;
}

.kb-public-shell .mud-button-filled-primary {
    background: linear-gradient(135deg, #07979d 0%, #0bb7aa 100%) !important;
    box-shadow: 0 14px 26px rgba(7, 151, 157, 0.24) !important;
}

.kb-public-shell .mud-button-outlined-primary {
    color: #075e63 !important;
    border-color: rgba(7, 151, 157, 0.28) !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

/* App shell polish: keep page content from touching browser/card edges. */
.mud-main-content {
    min-height: 100vh !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    background:
        radial-gradient(circle at 4% 0%, rgba(7, 151, 157, 0.12), transparent 26rem),
        radial-gradient(circle at 96% 3%, rgba(255, 107, 87, 0.10), transparent 22rem),
        linear-gradient(180deg, #f9fbfd 0%, #f4f8fb 48%, #eef5f8 100%) !important;
}

.kb-page-container {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto !important;
    padding: 30px clamp(24px, 2.8vw, 46px) 52px !important;
    box-sizing: border-box;
}

.kb-page-container > * + * {
    margin-top: 22px;
}

.kb-page-container > .mud-grid {
    margin-top: 18px;
    margin-bottom: 18px;
}

.kb-page-container .mud-grid {
    row-gap: 18px;
}

.kb-topbar-shell {
    margin: 0 !important;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(244, 252, 252, 0.92)) !important;
    border-bottom: 1px solid rgba(16, 42, 67, 0.09) !important;
    box-shadow: 0 10px 28px rgba(16, 42, 67, 0.06) !important;
}

.kb-topbar-shell::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #07979d, #20c997 42%, #ff6b57);
}

.kb-topbar-shell .mud-paper {
    min-height: 74px;
    padding-left: clamp(20px, 2vw, 34px) !important;
    padding-right: clamp(20px, 2vw, 34px) !important;
    background: transparent !important;
}

.kb-page-heading {
    padding: 8px 0 2px !important;
    margin-bottom: 8px !important;
}

.kb-page-heading-title {
    color: #102a43 !important;
    font-size: clamp(2rem, 2.6vw, 3rem) !important;
    line-height: 1.08 !important;
}

.kb-page-heading-subtitle {
    color: #41566f !important;
    font-size: 1.08rem !important;
    line-height: 1.45 !important;
}

.kb-surface-card,
.kb-stat-card,
.mud-paper.kb-surface-card,
.mud-paper.kb-stat-card {
    border: 1px solid rgba(16, 42, 67, 0.08) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 253, 0.98)) !important;
    box-shadow: 0 18px 42px rgba(16, 42, 67, 0.065) !important;
}

.kb-surface-card {
    padding: clamp(22px, 1.7vw, 32px) !important;
}

.kb-stat-card {
    min-height: 150px;
    padding: 24px !important;
}

.staff-owner-panel .mud-expand-panel-header,
.staff-owner-panel .mud-expand-panel-header .mud-expand-panel-text,
.staff-owner-panel .mud-expand-panel-header .mud-icon-root {
    color: #d32f2f !important;
    font-weight: 700 !important;
}

.kb-audit-json {
    max-height: 320px;
    overflow: auto;
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    background: #0f172a;
    color: #e5edf7;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.kb-stat-value {
    color: #102a43 !important;
}

.kb-stat-card:nth-of-type(4n + 1) .kb-stat-card-topline {
    background: linear-gradient(90deg, #07979d, #20c997);
}

.kb-stat-card:nth-of-type(4n + 2) .kb-stat-card-topline {
    background: linear-gradient(90deg, #ff6b57, #f59f00);
}

.kb-stat-card:nth-of-type(4n + 3) .kb-stat-card-topline {
    background: linear-gradient(90deg, #2f80ed, #07979d);
}

.kb-stat-card:nth-of-type(4n + 4) .kb-stat-card-topline {
    background: linear-gradient(90deg, #102a43, #ff6b57);
}

.mud-input-control {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

.mud-input-root,
.mud-input-slot {
    color: #102a43 !important;
}

.mud-table-container,
.mud-table {
    border: 1px solid rgba(16, 42, 67, 0.07);
    border-radius: 14px !important;
    overflow: hidden;
}

.mud-table-root th {
    background: #f4fafb !important;
}

.mud-button-filled-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #07979d, #0bb7aa) !important;
}

.mud-button-outlined {
    border-color: rgba(16, 42, 67, 0.24) !important;
}

.mud-chip {
    border-color: rgba(7, 151, 157, 0.28) !important;
}

.kb-owner-lock-button {
    right: 30px !important;
    bottom: 30px !important;
    box-shadow: 0 14px 34px rgba(16, 42, 67, 0.16) !important;
}

/* Option 1: soft glass 3D sidebar and app canvas. */
.mud-layout {
    min-height: 100vh !important;
    display: flex !important;
    align-items: stretch !important;
}

.kb-drawer {
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start !important;
    flex: 0 0 288px !important;
    width: 288px !important;
    min-width: 288px !important;
    max-width: 288px !important;
    height: 100vh !important;
    overflow: hidden !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 252, 0.96)) !important;
    border-right: 1px solid rgba(16, 42, 67, 0.08) !important;
    box-shadow:
        16px 0 42px rgba(16, 42, 67, 0.10),
        inset -1px 0 0 rgba(255, 255, 255, 0.78) !important;
}

.kb-drawer::before {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, #07979d, #20c997 44%, #ff6b57);
    opacity: 0.82;
    box-shadow: 0 0 18px rgba(7, 151, 157, 0.35);
}

.kb-drawer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 6%, rgba(7, 151, 157, 0.11), transparent 11rem),
        radial-gradient(circle at 82% 22%, rgba(255, 107, 87, 0.10), transparent 10rem);
}

.kb-drawer > * {
    position: relative;
    z-index: 1;
}

.kb-drawer .mud-drawer-content,
.kb-drawer .kb-drawer-scroll {
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 0 !important;
}

.kb-drawer .mud-drawer-content {
    overflow: hidden !important;
}

.kb-drawer .kb-drawer-scroll {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -ms-scroll-chaining: none;
    padding-right: 12px !important;
    position: relative;
    z-index: 2;
    scrollbar-width: thin;
    scrollbar-color: rgba(7, 151, 157, 0.32) transparent;
}

.kb-drawer .kb-drawer-stack {
    min-height: max-content !important;
    padding-bottom: 28px !important;
}

.kb-drawer .kb-drawer-scroll::-webkit-scrollbar {
    width: 8px;
}

.kb-drawer .kb-drawer-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.kb-drawer .kb-drawer-scroll::-webkit-scrollbar-thumb {
    background: rgba(7, 151, 157, 0.28);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.kb-drawer .kb-drawer-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(7, 151, 157, 0.46);
    background-clip: padding-box;
}

.kb-app-brand-link {
    margin: 2px 0 12px;
    padding: 12px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(241, 252, 251, 0.90)) !important;
    border: 1px solid rgba(7, 151, 157, 0.13) !important;
    box-shadow:
        0 14px 34px rgba(16, 42, 67, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.kb-brand-badge {
    box-shadow:
        0 12px 24px rgba(7, 151, 157, 0.22),
        0 0 0 5px rgba(7, 151, 157, 0.06) !important;
}

.kb-drawer .kb-muted {
    color: #52687d !important;
}

.kb-drawer .kb-nav-section {
    margin: 16px 8px 8px !important;
    padding: 0 8px !important;
    color: #7b8aa0 !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    letter-spacing: .08em !important;
}

.kb-drawer .mud-navmenu {
    display: grid;
    gap: 4px;
}

.kb-drawer .mud-nav-link {
    position: relative;
    min-height: 44px;
    margin: 3px 6px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    color: #193652 !important;
    background: transparent !important;
    transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.kb-drawer .mud-nav-link:hover {
    transform: translateX(2px);
    background: rgba(7, 151, 157, 0.07) !important;
    box-shadow: inset 0 0 0 1px rgba(7, 151, 157, 0.10);
}

.kb-drawer .mud-nav-link .mud-icon-root {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    padding: 6px;
    border-radius: 10px;
    color: #07979d !important;
    background:
        linear-gradient(135deg, rgba(7, 151, 157, 0.12), rgba(255, 255, 255, 0.76));
    box-shadow:
        0 8px 18px rgba(16, 42, 67, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.kb-drawer .mud-nav-link.active,
.kb-drawer .mud-nav-link.mud-nav-link-active {
    transform: translateX(3px);
    color: #075e63 !important;
    background:
        linear-gradient(135deg, rgba(7, 151, 157, 0.16), rgba(255, 255, 255, 0.92)) !important;
    box-shadow:
        0 14px 30px rgba(7, 151, 157, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 4px 0 0 #07979d;
}

.kb-drawer .mud-nav-link.active .mud-icon-root,
.kb-drawer .mud-nav-link.mud-nav-link-active .mud-icon-root {
    color: #ffffff !important;
    background: linear-gradient(135deg, #07979d, #0bb7aa);
    box-shadow: 0 10px 22px rgba(7, 151, 157, 0.28);
}

.kb-drawer .kb-nav-receipt-hero {
    border-left: 0 !important;
    background:
        linear-gradient(135deg, rgba(255, 107, 87, 0.13), rgba(255, 255, 255, 0.88)) !important;
    box-shadow: inset 4px 0 0 #ff6b57;
}

.kb-drawer .kb-nav-receipt-hero .mud-icon-root {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff6b57, #ff8a6b) !important;
    filter: none !important;
}

.kb-drawer .kb-nav-advanced-toggle {
    margin: 8px 6px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(240, 251, 250, 0.82)) !important;
    border: 1px solid rgba(7, 151, 157, 0.12) !important;
    box-shadow: 0 10px 22px rgba(16, 42, 67, 0.05);
}

.kb-drawer .mud-divider {
    opacity: 0.65;
    margin: 12px 8px !important;
    border-color: rgba(16, 42, 67, 0.08) !important;
}

.kb-drawer .kb-surface-card {
    margin: 12px 2px 4px;
    padding: 18px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(240, 251, 250, 0.88)) !important;
    border: 1px solid rgba(7, 151, 157, 0.13) !important;
    box-shadow:
        0 18px 42px rgba(16, 42, 67, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.mud-main-content {
    position: relative;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: calc(100% - 288px) !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    align-self: flex-start !important;
    box-shadow: inset 18px 0 50px rgba(16, 42, 67, 0.035);
}

.kb-page-heading {
    position: relative;
    overflow: hidden;
    padding: 34px 36px 30px !important;
    border: 1px solid rgba(7, 151, 157, 0.10);
    border-radius: 24px;
    background:
        radial-gradient(circle at 4% 8%, rgba(7, 151, 157, 0.13), transparent 18rem),
        radial-gradient(circle at 98% 10%, rgba(255, 107, 87, 0.12), transparent 16rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(242, 250, 250, 0.90));
    box-shadow: 0 20px 58px rgba(16, 42, 67, 0.07);
}

.kb-page-heading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #07979d, #20c997 48%, #ff6b57);
}

.kb-page-heading-title,
.kb-page-heading-subtitle,
.kb-page-heading .mud-stack,
.kb-page-heading .mud-button-root {
    position: relative;
    z-index: 1;
}

@media (max-width: 960px) {
    .mud-layout {
        display: block !important;
    }

    .kb-drawer {
        position: fixed !important;
        width: 288px !important;
        min-width: 288px !important;
        max-width: 288px !important;
        height: 100vh !important;
    }

    .mud-main-content {
        width: 100% !important;
    }

    .kb-page-container {
        padding: 22px 16px 34px !important;
    }

    .kb-topbar-shell .mud-paper {
        min-height: auto;
        align-items: flex-start !important;
        gap: 12px;
    }

    .kb-page-heading {
        padding: 24px 20px !important;
        border-radius: 18px;
    }
}

/* Phone ergonomics: keep every page, dialog, table, and upload flow usable on narrow screens. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body,
#app {
    max-width: 100%;
    overflow-x: hidden;
}

.mud-dialog {
    max-width: min(960px, calc(100vw - 32px)) !important;
}

.mud-dialog .mud-dialog-title {
    padding: 20px 24px 10px !important;
}

.mud-dialog .mud-dialog-content {
    overflow-x: hidden !important;
}

.mud-dialog .mud-dialog-actions {
    gap: 8px !important;
}

.mud-grid {
    min-width: 0 !important;
}

.mud-grid-item,
.mud-stack,
.mud-paper,
.mud-input-control,
.mud-table,
.mud-table-container,
.mud-tabs,
.mud-tab-panel {
    min-width: 0 !important;
}

.mud-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.mud-table-root th,
.mud-table-root td {
    white-space: nowrap;
}

.mud-table-root td .mud-stack {
    white-space: normal;
}

.mud-simple-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.mud-input-control,
.mud-select,
.mud-picker {
    max-width: 100% !important;
}

.kb-page-heading-actions {
    justify-content: flex-end;
}

.kb-page-heading-actions .mud-button-root {
    min-height: 42px;
}

.kb-surface-card,
.kb-stat-card {
    overflow-wrap: anywhere;
}

.kb-receipt-preview-thumb,
.kb-receipt-preview-full {
    max-width: 100%;
}

.kb-receipt-preview-thumb img,
.kb-receipt-preview-full img {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 720px) {
    body {
        background: #f5f8fb;
    }

    .kb-drawer {
        width: min(288px, 88vw) !important;
        min-width: min(288px, 88vw) !important;
        max-width: min(288px, 88vw) !important;
    }

    .kb-drawer .kb-drawer-scroll {
        padding-right: 8px !important;
    }

    .kb-page-container {
        padding: 14px 10px 88px !important;
    }

    .kb-topbar-shell .mud-paper {
        padding: 12px !important;
    }

    .kb-topbar-shell .mud-stack {
        min-width: 0 !important;
    }

    .kb-topbar-shell .mud-button-root {
        min-height: 40px;
        padding: 8px 10px !important;
    }

    .kb-topbar-logo {
        width: 38px !important;
        height: 38px !important;
    }

    .kb-page-heading {
        margin-bottom: 18px !important;
        padding: 20px 16px !important;
        border-radius: 18px !important;
    }

    .kb-page-heading-title {
        font-size: clamp(1.75rem, 8vw, 2.2rem) !important;
        line-height: 1.08 !important;
    }

    .kb-page-heading-subtitle {
        font-size: 0.98rem !important;
        line-height: 1.45 !important;
    }

    .kb-page-heading-actions {
        width: 100%;
        justify-content: stretch;
    }

    .kb-page-heading-actions .mud-button-root {
        flex: 1 1 150px;
    }

    .kb-surface-card,
    .kb-stat-card {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .kb-stat-card {
        min-height: 116px !important;
    }

    .kb-stat-value {
        font-size: clamp(1.8rem, 9vw, 2.35rem) !important;
        line-height: 1.1 !important;
    }

    .mud-grid {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .mud-grid-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .mud-dialog-container {
        align-items: flex-start !important;
        padding: 10px !important;
    }

    .mud-dialog {
        width: calc(100vw - 20px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        margin: 0 !important;
        border-radius: 18px !important;
    }

    .mud-dialog .mud-dialog-title {
        padding: 16px 16px 8px !important;
    }

    .mud-dialog .mud-dialog-title .mud-typography-h5,
    .mud-dialog .mud-dialog-title .mud-typography-h6 {
        font-size: 1.15rem !important;
        line-height: 1.25 !important;
    }

    .mud-dialog .mud-dialog-content {
        max-height: calc(100dvh - 132px) !important;
        padding: 12px 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .mud-dialog .mud-dialog-actions {
        padding: 12px 16px 16px !important;
        flex-wrap: wrap !important;
        justify-content: stretch !important;
    }

    .mud-dialog .mud-dialog-actions .mud-button-root {
        flex: 1 1 140px;
        min-height: 44px;
    }

    .mud-button-root,
    .mud-icon-button {
        min-height: 44px;
    }

    .mud-toggle-group {
        display: flex !important;
        width: 100%;
        flex-wrap: wrap !important;
        gap: 8px;
    }

    .mud-toggle-group .mud-toggle-item {
        flex: 1 1 140px;
        min-height: 44px;
        white-space: normal;
    }

    .mud-radio-group .mud-radio,
    .mud-checkbox {
        min-height: 42px;
    }

    .mud-table-container {
        margin-left: -4px;
        margin-right: -4px;
        border-radius: 14px !important;
    }

    .mud-table-root {
        min-width: 660px;
    }

    .mud-simple-table table {
        min-width: 420px;
    }

    .mud-tabs-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mud-tabs-toolbar-content {
        min-width: max-content;
    }

    .mud-list-item {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .mud-alert {
        line-height: 1.45;
    }

    .kb-owner-lock-button {
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        max-width: calc(100vw - 24px);
    }

    .kb-receipt-preview-thumb {
        min-height: 140px !important;
        padding: 8px !important;
        border-radius: 14px !important;
    }

    .kb-receipt-preview-thumb img {
        max-height: 34vh !important;
    }

    .kb-receipt-preview-full {
        max-height: calc(100dvh - 170px) !important;
    }

    .kb-receipt-preview-full img {
        max-height: calc(100dvh - 190px) !important;
    }
}

@media (max-width: 420px) {
    .kb-page-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .kb-page-heading {
        padding: 18px 14px !important;
    }

    .kb-page-heading-actions .mud-button-root,
    .mud-dialog .mud-dialog-actions .mud-button-root {
        flex-basis: 100%;
    }

    .mud-dialog .mud-dialog-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}