/* === BillingSkinUsa CSS ===
   Generated from design-usa/cart-page.html + design-usa/billing.html <style> blocks.
   Every selector is scoped under .bsu-page (view chrome) / .bsu-scope (reset)
   so this file cannot affect BillingSkin1 or any other screen.
   Inter font is already loaded via index.html. */

/* ==================== from design-usa/billing.html ==================== */
.bsu-page[data-theme="dark"] {
            --bg-primary: #1a1d23;
            --bg-secondary: #22262e;
            --bg-tertiary: #2a2e36;
            --bg-hover: #2a2e36;
            --text-primary: #e8eaed;
            --text-secondary: #a0a5ad;
            --text-muted: #6e737b;
            --text-placeholder: #555a62;
            --border-color: #333840;
            --border-alt: #333840;
            --border-strong: #3d434b;
            --border-light: #2a2e36;
            --card-bg: #252930;
            --input-bg: #2a2e36;
            --shadow-color: rgba(0,0,0,0.2);
            --overlay-bg: rgba(0,0,0,0.6);
            --passcode-key-bg: #2a2e36;
            --passcode-key-hover: #333840;
            --passcode-key-active: #3d434b;
            --dropdown-item-bg: #2a2e36;
            --dropdown-item-hover: #333840;
            --kot-top-bg: rgba(88,50,148,0.2);
            --print-top-bg: rgba(16,180,143,0.15);
            --kot-time-bg: rgba(16,180,143,0.15);
            --print-time-bg: rgba(204,60,95,0.15);
            --discount-tag-bg: rgba(16,180,143,0.15);
            --allergen-tag-bg: rgba(204,60,95,0.15);
            --edit-btn-bg: #333840;
            --edit-btn-hover: #3d434b;
            --total-count-bg: #333840;
            --bill-comment-bg: #252930;
            --kot-comment-bg: rgba(16,180,143,0.15);
            --kot-comment-hover: rgba(16,180,143,0.25);
            --more-tab-active-bg: #2a2e36;
            --mega-menu-item-bg: #252930;
            --mega-menu-item-hover: #2a2e36;
            --mega-menu-item-active: #333840;
            --mega-bg: #151820;
            --mega-item-bg: #1E2128;
            --mega-item-border: #2C3038;
            --passcode-modal-bg: #252930;
            --passcode-dot-border: #3d434b;
            --passcode-dot-bg: #2a2e36;
            --passcode-title-color: #e8eaed;
            --active-green-bg: rgba(16,180,143,0.15);
            --active-yellow-bg: rgba(232,201,74,0.15);
            --logout-bg: rgba(204,60,95,0.15);
            --logout-hover-bg: rgba(204,60,95,0.25);
            --nav-icon-stroke: #a0a5ad;
            --food-nav-bg: #252930;
            --food-nav-hover: #333840;
            --qty-ctrl-bg: #252930;
            --qty-ctrl-hover: #333840;
            --more-btn-hover: #333840;
            --more-btn-active: #3d434b;
            --cat-nav-bg: #2a2e36;
            --cat-nav-hover: #333840;
            --backspace-stroke: #e8eaed;
        }
.bsu-scope, .bsu-scope * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', sans-serif;
        }
.bsu-page, .bsu-page {
            height: 100vh;
            background: var(--bg-secondary);
            overflow: hidden;
        }
.bsu-page ::-webkit-scrollbar { display: none; }
.bsu-scope, .bsu-scope * { -ms-overflow-style: none; scrollbar-width: none; }
.bsu-page .top-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-primary);
            padding: 0;
            height: 60px;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }
.bsu-page .nav-left {
            display: flex;
            align-items: center;
            gap: 0;
            height: 100%;
        }
.bsu-page .nav-logo {
            width: 80px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-right: 1px solid var(--border-alt);
            padding: 0 12px;
            flex-shrink: 0;
        }
.bsu-page .nav-logo img {
            width: 32px;
            height: 32px;
            object-fit: contain;
        }
.bsu-page .nav-tabs {
            display: flex;
            gap: 0;
            height: 60px;
        }
.bsu-page .nav-tab {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 20px;
            height: 100%;
            font-size: 13px;
            font-weight: 600;
            color: #4d4e4f;
            cursor: pointer;
            position: relative;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            transition: all 0.2s;
            border-right: 1px solid var(--border-alt);
        }
.bsu-page .nav-tab:hover { color: #4185F4; background: var(--bg-hover); }
.bsu-page .nav-tab.active {
            color: #fff;
            background: #4185F4;
        }
.bsu-page .nav-tab.active .tab-badge {
            background: rgba(255,255,255,0.3);
        }
.bsu-page .nav-tab .tab-badge {
            background: #CC3C5F;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 10px;
            min-width: 20px;
            text-align: center;
        }
.bsu-page .nav-tab .tab-badge.green { background: #10B48F; }
.bsu-page .nav-tab .tab-badge.orange { background: #FF9772; }
.bsu-page .nav-right {
            display: flex;
            align-items: center;
            gap: 0;
            height: 100%;
        }
.bsu-page .nav-right-sep {
            width: 1px;
            height: 100%;
            background: var(--border-alt);
        }
.bsu-page .nav-right > *:not(.nav-right-sep) {
            padding-left: 22px;
            padding-right: 22px;
        }
.bsu-page .nav-icon-btn {
            width: auto;
            height: 100%;
            border-radius: 0;
            border: none;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
.bsu-page .nav-icon-btn:hover { background: var(--bg-hover); }
.bsu-page .nav-icon-btn svg {
            width: 18px;
            height: 18px;
            stroke: var(--nav-icon-stroke);
            fill: none;
        }
.bsu-page .nav-bookings-btn {
            height: 100%;
            border-radius: 0;
            border: none;
            background: transparent;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
            letter-spacing: 0.3px;
            transition: all 0.2s;
            font-family: 'Inter', sans-serif;
            display: flex;
            align-items: center;
        }
.bsu-page .nav-bookings-btn:hover { background: var(--bg-hover); color: #4185F4; }
.bsu-page .nav-user {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            height: 100%;
            border: none;
            background: transparent;
            transition: all 0.2s;
        }
.bsu-page .nav-user:hover { background: var(--bg-hover); }
.bsu-page .nav-user:hover .nav-user-name { color: #4185F4; }
.bsu-page .nav-user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.bsu-page .nav-user-chevron { width: 14px; height: 14px; stroke: var(--text-muted); fill: none; transition: transform 0.2s; }
.bsu-page .sub-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 24px;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }
.bsu-page .sub-nav-left {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: var(--text-secondary);
        }
.bsu-page .sub-nav-left .sale-label { font-weight: 500; }
.bsu-page .sub-nav-left .sale-value { font-weight: 700; color: #10B48F; }
.bsu-page .sub-nav-left .divider-line {
            width: 1px;
            height: 18px;
            background: var(--border-strong);
            margin: 0 8px;
        }
.bsu-page .sub-nav-left .unsettled-value { font-weight: 700; color: #865FC2; }
.bsu-page .search-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 14px;
            height: 48px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--input-bg);
            min-width: 220px;
            flex: 1;
            max-width: 360px;
            transition: all 0.2s;
        }
.bsu-page .search-bar:focus-within {
            border-color: #4185F4;
            background: var(--bg-primary);
            box-shadow: 0 0 0 3px rgba(74,122,255,0.08);
        }
.bsu-page .search-bar svg { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; flex-shrink: 0; }
.bsu-page .search-bar input {
            border: none;
            outline: none;
            background: transparent;
            font-size: 13px;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            width: 100%;
        }
.bsu-page .search-bar input::placeholder { color: var(--text-placeholder); }
.bsu-page .sub-nav-right { display: flex; gap: 10px; }
.bsu-page .filter-pill {
            padding: 0 16px;
            height: 48px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: var(--bg-primary);
            font-size: 12px;
            font-weight: 500;
            color: var(--nav-icon-stroke);
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
        }
.bsu-page .filter-pill:hover { background: var(--bg-secondary); border-color: var(--text-placeholder); }
.bsu-page .filter-pill.kot { color: #583294; border-color: #DBCFED; }
.bsu-page .filter-pill.kot:hover { background: #583294; color: #fff; border-color: #583294; }
.bsu-page .filter-pill.print { color: #00815C; border-color: #B7E9DD; }
.bsu-page .filter-pill.print:hover { background: #00815C; color: #fff; border-color: #00815C; }
.bsu-page .filter-pill.reserved { color: #CC643F; border-color: #FFE0D5; }
.bsu-page .filter-pill.reserved:hover { background: #CC643F; color: #fff; border-color: #CC643F; }
.bsu-page .table-grid {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-auto-rows: 1fr;
            gap: 12px;
            padding: 20px 24px;
            overflow: hidden;
        }
.bsu-page .table-card {
            background: var(--card-bg);
            border-radius: 14px;
            border: 1.5px solid var(--border-alt);
            display: flex;
            flex-direction: column;
            padding: 0;
            font-size: 22px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            color: var(--text-placeholder);
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
        }
.bsu-page .table-card:hover {
            border-color: var(--text-placeholder);
            box-shadow: 0 2px 8px var(--shadow-color);
            transform: translateY(-2px);
        }
.bsu-page .table-card:active { transform: translateY(0); }
.bsu-page .table-card .empty-num {
            padding: 16px;
            font-size: 22px;
            font-weight: 700;
            color: var(--text-placeholder);
        }
.bsu-page .tc-top {
            padding: 12px 14px 8px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
.bsu-page .tc-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
.bsu-page .tc-table-num {
            font-size: 22px;
            font-weight: 700;
        }
.bsu-page .tc-top-right {
            display: flex;
            align-items: center;
            gap: 6px;
        }
.bsu-page .tc-people {
            display: flex;
            align-items: center;
            gap: 3px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            font-family: 'Inter', sans-serif;
        }
.bsu-page .tc-people svg {
            width: 15px;
            height: 15px;
            stroke: var(--text-secondary);
            fill: none;
        }
.bsu-page .tc-price-pill {
            font-size: 11px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 20px;
            border: 1.5px solid;
            background: var(--card-bg);
            font-family: 'Inter', sans-serif;
        }
.bsu-page .tc-customer {
            font-size: 13px;
            font-weight: 500;
            color: inherit;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Inter', sans-serif;
        }
.bsu-page .tc-bottom {
            padding: 10px 14px 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            background: var(--card-bg);
            border-top: 1px solid var(--border-alt);
            flex: 1;
        }
.bsu-page .tc-bottom-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
.bsu-page .tc-time-badge {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 20px;
            border: 1.5px solid;
            font-family: 'Inter', sans-serif;
        }
.bsu-page .tc-time-badge svg {
            width: 13px;
            height: 13px;
            fill: none;
            stroke-width: 2;
        }
.bsu-page .tc-amount {
            font-size: 18px;
            font-weight: 800;
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
        }
.bsu-page .tc-server {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
        }
.bsu-page .tc-server-row {
            justify-content: flex-end;
            gap: 4px;
            margin-top: auto;
        }
.bsu-page .tc-server-row .tc-server {
            margin-right: auto;
        }
.bsu-page .tc-more-btn {
            position: relative;
            width: 44px;
            height: 44px;
            min-width: 44px;
            border: none;
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            transition: background 0.15s;
            margin: -8px -8px -8px 0;
        }
.bsu-page .tc-more-btn:hover {
            background: var(--more-btn-hover);
        }
.bsu-page .tc-more-btn:active {
            background: var(--more-btn-active);
        }
.bsu-page .tc-more-dots {
            display: flex;
            align-items: center;
            gap: 4px;
        }
.bsu-page .tc-more-dots span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--text-placeholder);
        }
.bsu-page .table-card.kot-card {
            border-color: #DBCFED;
            background: var(--card-bg);
        }
.bsu-page .table-card.kot-card .tc-top {
            background: var(--kot-top-bg);
        }
.bsu-page .table-card.kot-card .tc-table-num, .bsu-page .table-card.kot-card .tc-customer {
            color: #583294;
        }
.bsu-page .table-card.kot-card .tc-price-pill {
            color: #583294;
            border-color: #583294;
        }
.bsu-page .table-card.kot-card .tc-time-badge {
            color: #10B48F;
            border-color: #B7E9DD;
            background: var(--kot-time-bg);
        }
.bsu-page .table-card.kot-card .tc-time-badge svg {
            stroke: #10B48F;
        }
.bsu-page .table-card.kot-card:hover {
            border-color: #C3AFE1;
            box-shadow: 0 2px 12px rgba(134,95,194,0.15);
        }
.bsu-page .table-card.print-card {
            border-color: #B7E9DD;
            background: var(--card-bg);
        }
.bsu-page .table-card.print-card .tc-top {
            background: var(--print-top-bg);
        }
.bsu-page .table-card.print-card .tc-table-num, .bsu-page .table-card.print-card .tc-customer {
            color: #056B4D;
        }
.bsu-page .table-card.print-card .tc-price-pill {
            color: #056B4D;
            border-color: #056B4D;
        }
.bsu-page .table-card.print-card .tc-time-badge {
            color: #CC3C5F;
            border-color: #FFD4DE;
            background: var(--print-time-bg);
        }
.bsu-page .table-card.print-card .tc-time-badge svg {
            stroke: #CC3C5F;
        }
.bsu-page .table-card.print-card:hover {
            border-color: #87D9C7;
            box-shadow: 0 2px 12px rgba(16,180,143,0.15);
        }
.bsu-page .bottom-bar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 12px 24px;
            height: 80px;
            flex-shrink: 0;
        }
.bsu-page .bottom-left { display: flex; align-items: center; gap: 10px; }
.bsu-page .page-dot {
            min-width: 56px;
            height: 56px;
            border: none;
            border-radius: 12px;
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 0 16px;
            transition: all 0.2s;
        }
.bsu-page .page-dot .dot-bar {
            width: 40px;
            height: 7px;
            border-radius: 4px;
            background: var(--border-strong);
            transition: all 0.2s;
        }
.bsu-page .page-dot.active .dot-bar { width: 56px; background: var(--text-primary); }
.bsu-page .page-dot:hover { background: rgba(0,0,0,0.04); }
.bsu-page .page-dot:active { transform: scale(0.95); }
.bsu-page .page-dot .dot-badge {
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            border-radius: 8px;
            padding: 3px 8px;
            min-width: 26px;
            text-align: center;
        }
.bsu-page .page-dot .dot-badge.purple { background: #865FC2; }
.bsu-page .page-dot .dot-badge.green { background: #10B48F; }
.bsu-page .page-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
.bsu-page .billing-view {
            display: none;
            flex: 1;
            flex-direction: column;
            overflow: hidden;
            min-height: 0;
        }
.bsu-page .billing-view.active { display: flex; }
.bsu-page .table-view {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
        }
.bsu-page .table-view.hidden { display: none; }
.bsu-page .billing-body {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
.bsu-page .order-panel {
            width: 35%;
            display: flex;
            flex-direction: column;
            background: var(--bg-primary);
            border-right: 1px solid var(--border-color);
        }
.bsu-page .order-top {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 18px;
            border-bottom: 1px solid var(--border-alt);
            flex-shrink: 0;
        }
.bsu-page .order-search {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 14px;
            height: 48px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--input-bg);
            transition: all 0.2s;
        }
.bsu-page .order-search:focus-within {
            border-color: #4185F4;
            background: var(--bg-primary);
            box-shadow: 0 0 0 3px rgba(74,122,255,0.08);
        }
.bsu-page .order-search svg { width: 18px; height: 18px; stroke: var(--text-muted); fill: none; flex-shrink: 0; }
.bsu-page .order-search input {
            border: none;
            outline: none;
            background: transparent;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            width: 100%;
        }
.bsu-page .order-search input::placeholder { color: var(--text-placeholder); }
.bsu-page .qty-input {
            width: 72px;
            height: 48px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--input-bg);
            -moz-appearance: textfield;
        }
.bsu-page .qty-input::-webkit-inner-spin-button { opacity: 1; }
.bsu-page .add-btn {
            height: 48px;
            padding: 0 30px;
            border: none;
            border-radius: 10px;
            background: var(--text-primary);
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            letter-spacing: 0.3px;
            transition: all 0.2s;
        }
.bsu-page .add-btn:hover { background: #040911; }
.bsu-page .add-btn:active { transform: scale(0.97); }
.bsu-page .order-header {
            display: grid;
            grid-template-columns: 40px 1fr 90px 90px;
            padding: 12px 18px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            border-bottom: 1px solid var(--border-light);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            flex-shrink: 0;
        }
.bsu-page .order-header span:nth-child(3), .bsu-page .order-header span:nth-child(4) { text-align: center; }
.bsu-page .order-items {
            flex: 1;
            overflow-y: auto;
            padding: 0;
        }
.bsu-page .order-item {
            padding: 14px 18px;
            border-bottom: 1px solid var(--border-light);
        }
.bsu-page .order-item-main {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
.bsu-page .order-item .item-delete {
            width: 28px;
            height: 28px;
            border: none;
            background: none;
            cursor: pointer;
            color: #CC3C5F;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 0;
            margin-top: 2px;
        }
.bsu-page .order-item .item-delete svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.bsu-page .order-item .item-info { flex: 1; min-width: 0; }
.bsu-page .order-item .item-price-tag {
            font-size: 12px;
            font-weight: 600;
            color: #10B48F;
        }
.bsu-page .order-item .item-name-row {
            display: flex;
            align-items: baseline;
            gap: 6px;
        }
.bsu-page .order-item .item-num {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
        }
.bsu-page .order-item .item-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
        }
.bsu-page .order-item .item-controls {
            display: flex;
            align-items: center;
            gap: 0;
            flex-shrink: 0;
        }
.bsu-page .qty-ctrl-btn {
            width: 34px;
            height: 34px;
            border: 1.5px solid var(--border-color);
            background: var(--qty-ctrl-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
            font-weight: 700;
            transition: all 0.15s;
        }
.bsu-page .qty-ctrl-btn.minus {
            border-radius: 8px 0 0 8px;
            color: #CC3C5F;
            border-right: none;
        }
.bsu-page .qty-ctrl-btn.plus {
            border-radius: 0 8px 8px 0;
            color: #10B48F;
            border-left: none;
        }
.bsu-page .qty-ctrl-btn:hover { background: var(--qty-ctrl-hover); }
.bsu-page .qty-ctrl-btn:active { transform: scale(0.95); }
.bsu-page .qty-display {
            width: 36px;
            height: 34px;
            border: 1.5px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            background: var(--qty-ctrl-bg);
        }
.bsu-page .order-item .item-amount {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            min-width: 60px;
            text-align: right;
            flex-shrink: 0;
        }
.bsu-page .order-item .item-more {
            width: 28px;
            height: 28px;
            border: none;
            background: none;
            cursor: pointer;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 18px;
            letter-spacing: 1px;
        }
.bsu-page .order-item .item-more:hover { color: var(--text-secondary); }
.bsu-page .sub-items {
            margin-left: 38px;
            margin-top: 6px;
        }
.bsu-page .sub-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 0;
        }
.bsu-page .sub-item .sub-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--text-placeholder);
            flex-shrink: 0;
        }
.bsu-page .sub-item .sub-name {
            flex: 1;
            font-size: 13px;
            color: var(--text-muted);
        }
.bsu-page .item-note {
            margin-left: 38px;
            margin-top: 4px;
            font-size: 12px;
            color: #10B48F;
            font-weight: 500;
        }
.bsu-page .item-tags {
            margin-left: 38px;
            margin-top: 6px;
            display: flex;
            gap: 8px;
        }
.bsu-page .item-tag {
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
.bsu-page .item-tag.discount { background: var(--discount-tag-bg); color: #10B48F; }
.bsu-page .item-tag.allergen { background: var(--allergen-tag-bg); color: #CC3C5F; }
.bsu-page .item-tag svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
.bsu-page .item-actions {
            margin-left: 38px;
            margin-top: 8px;
            display: flex;
            gap: 8px;
        }
.bsu-page .item-action-btn {
            padding: 6px 16px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
.bsu-page .item-action-btn.upgrade {
            background: var(--text-primary);
            color: #fff;
        }
.bsu-page .item-action-btn.upgrade:hover { background: #040911; }
.bsu-page .item-action-btn.edit-item {
            background: var(--edit-btn-bg);
            color: var(--text-secondary);
        }
.bsu-page .item-action-btn.edit-item:hover { background: var(--edit-btn-hover); }
.bsu-page .item-action-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.bsu-page .order-total-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 18px;
            border-top: 1px solid var(--border-alt);
            flex-shrink: 0;
        }
.bsu-page .total-left {
            display: flex;
            align-items: baseline;
            gap: 8px;
        }
.bsu-page .total-left .total-label {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }
.bsu-page .total-left .total-count {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-muted);
            background: var(--total-count-bg);
            padding: 2px 10px;
            border-radius: 10px;
        }
.bsu-page .total-right {
            font-size: 22px;
            font-weight: 800;
            color: var(--text-primary);
        }
.bsu-page .comment-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 18px;
            border-top: 1px solid var(--border-light);
            flex-shrink: 0;
        }
.bsu-page .comment-btn {
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
            border: none;
        }
.bsu-page .comment-btn.bill-comment {
            background: var(--bill-comment-bg);
            color: #CC3C5F;
            border: 1.5px solid #FFD4DE;
        }
.bsu-page .comment-btn.bill-comment:hover { background: var(--allergen-tag-bg); }
.bsu-page .comment-btn.kot-comment {
            background: var(--kot-comment-bg);
            color: #056B4D;
        }
.bsu-page .comment-btn.kot-comment:hover { background: var(--kot-comment-hover); }
.bsu-page .comment-offer {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 16px;
            cursor: pointer;
        }
.bsu-page .comment-offer svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.bsu-page .comment-offer .offer-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
        }
.bsu-page .comment-offer .offer-value {
            font-size: 14px;
            font-weight: 700;
            color: #10B48F;
        }
.bsu-page .comment-tax {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 16px;
            cursor: pointer;
        }
.bsu-page .comment-tax svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.bsu-page .comment-tax .tax-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
        }
.bsu-page .comment-tax .tax-value {
            font-size: 14px;
            font-weight: 700;
            color: #10B48F;
        }
.bsu-page .menu-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: var(--bg-secondary);
        }
.bsu-page .category-area {
            padding: 14px 16px 0;
            background: var(--bg-primary);
            position: relative;
            flex-shrink: 0;
        }
.bsu-page .category-rows {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding-bottom: 14px;
            padding-right: 100px;
            overflow: hidden;
            max-height: 104px;
        }
.bsu-page .cat-pill {
            padding: 0 18px;
            height: 42px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--bg-primary);
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
            flex-shrink: 0;
            min-width: 48px;
        }
.bsu-page .cat-pill:hover { background: var(--bg-secondary); border-color: var(--text-placeholder); }
.bsu-page .cat-pill:active { transform: scale(0.96); }
.bsu-page .cat-pill.active {
            background: #4185F4;
            color: #fff;
            border-color: #4185F4;
        }
.bsu-page .cat-nav-btns {
            position: absolute;
            right: 16px;
            top: 14px;
            display: flex;
            gap: 0;
        }
.bsu-page .cat-nav-btn {
            width: 42px;
            height: 42px;
            border: 1px solid var(--border-color);
            background: var(--cat-nav-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-muted);
            transition: all 0.2s;
        }
.bsu-page .cat-nav-btn:first-child { border-radius: 10px 0 0 10px; }
.bsu-page .cat-nav-btn:last-child { border-radius: 0 10px 10px 0; border-left: none; }
.bsu-page .cat-nav-btn:hover { background: var(--cat-nav-hover); color: var(--text-secondary); }
.bsu-page .cat-nav-btn:active { transform: scale(0.95); }
.bsu-page .cat-nav-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.bsu-page .menu-search-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: var(--bg-primary);
            border-top: 1px solid var(--border-alt);
            flex-shrink: 0;
        }
.bsu-page .menu-search {
            flex: 3;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 14px;
            height: 48px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--input-bg);
            transition: all 0.2s;
        }
.bsu-page .menu-search:focus-within {
            border-color: #4185F4;
            background: var(--bg-primary);
            box-shadow: 0 0 0 3px rgba(74,122,255,0.08);
        }
.bsu-page .menu-search svg { width: 18px; height: 18px; stroke: var(--text-muted); fill: none; flex-shrink: 0; }
.bsu-page .menu-search input {
            border: none;
            outline: none;
            background: transparent;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            width: 100%;
        }
.bsu-page .menu-search input::placeholder { color: var(--text-placeholder); }
.bsu-page .scan-btn {
            height: 48px;
            padding: 0 24px;
            border: none;
            border-radius: 10px;
            background: #040911;
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            letter-spacing: 0.3px;
            transition: all 0.2s;
        }
.bsu-page .scan-btn:hover { background: #040911; }
.bsu-page .scan-btn:active { transform: scale(0.97); }
.bsu-page .scan-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.bsu-page .food-grid-area {
            flex: 1;
            overflow: hidden;
            padding: 12px 16px;
            position: relative;
            display: flex;
            flex-direction: column;
        }
.bsu-page .food-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(4, 1fr);
            gap: 10px;
            flex: 1;
        }
.bsu-page .food-card {
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            background: #040911;
            display: flex;
            flex-direction: column;
        }
.bsu-page .food-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
        }
.bsu-page .food-card:active { transform: translateY(0); }
.bsu-page .food-card .food-img-area {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
.bsu-page .food-card .food-price {
            position: absolute;
            top: 8px;
            left: 8px;
            background: #10B48F;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 6px;
            z-index: 1;
        }
.bsu-page .food-card .food-qty-badge {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 26px;
            font-weight: 800;
            color: #fff;
            text-shadow: 0 2px 8px rgba(0,0,0,0.5);
            z-index: 1;
        }
.bsu-page .food-card .food-veg {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 16px;
            height: 16px;
            border-radius: 3px;
            border: 1.5px solid rgba(255,255,255,0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
.bsu-page .food-card .food-veg::after {
            content: '';
            width: 7px;
            height: 7px;
            border-radius: 50%;
        }
.bsu-page .food-card .food-veg.veg::after { background: #10B48F; }
.bsu-page .food-card .food-veg.non-veg::after { background: #CC3C5F; }
.bsu-page .food-card .food-name {
            padding: 8px 10px;
            font-size: 11px;
            font-weight: 500;
            color: #fff;
            line-height: 1.3;
            flex-shrink: 0;
        }
.bsu-page .food-grid-nav {
            display: flex;
            gap: 0;
            align-self: flex-end;
            margin-top: 10px;
            flex-shrink: 0;
        }
.bsu-page .food-nav-btn {
            width: 48px;
            height: 48px;
            border: 1px solid var(--border-strong);
            background: var(--food-nav-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--nav-icon-stroke);
            transition: all 0.2s;
        }
.bsu-page .food-nav-btn:first-child { border-radius: 10px 0 0 10px; }
.bsu-page .food-nav-btn:last-child { border-radius: 0 10px 10px 0; border-left: none; }
.bsu-page .food-nav-btn:hover { background: var(--food-nav-hover); color: var(--text-primary); }
.bsu-page .food-nav-btn:active { transform: scale(0.95); }
.bsu-page .food-nav-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.bsu-page .action-bar {
            display: flex;
            align-items: stretch;
            background: #040911;
            height: 68px;
            flex-shrink: 0;
            gap: 1px;
        }
.bsu-page .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
            border: none;
            background: #040911;
            cursor: pointer;
            color: #fff;
            font-family: 'Inter', sans-serif;
            transition: all 0.15s;
            min-height: 48px;
            position: relative;
        }
.bsu-page .action-btn::after {
            content: '';
            position: absolute;
            right: 0;
            top: 16px;
            bottom: 16px;
            width: 1px;
            background: rgba(255,255,255,0.08);
        }
.bsu-page .action-btn:last-child::after { display: none; }
.bsu-page .action-btn:hover {
            background: #040911;
        }
.bsu-page .action-btn:active {
            background: #373C44;
            transform: scale(0.98);
        }
.bsu-page .action-btn .action-label {
            font-size: 10px;
            font-weight: 600;
            color: rgba(255,255,255,0.5);
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
.bsu-page .action-btn .action-value {
            font-size: 15px;
            font-weight: 700;
            margin-top: 2px;
        }
.bsu-page .action-btn.estimate {
            padding: 0 24px;
        }
.bsu-page .action-btn.estimate .action-label {
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 0.5px;
        }
.bsu-page .action-btn.cash .action-value, .bsu-page .action-btn.card .action-value {
            color: #fff;
        }
.bsu-page .action-btn.kot {
            background: #4185F4;
            padding: 0 30px;
        }
.bsu-page .action-btn.kot:hover { background: #0E52C1; }
.bsu-page .action-btn.kot:active { background: #001F8E; }
.bsu-page .action-btn.kot .action-label {
            font-size: 13px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 0.5px;
        }
.bsu-page .action-btn.kot::after { display: none; }
.bsu-page .action-icon-btn {
            width: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #040911;
            border: none;
            cursor: pointer;
            transition: all 0.15s;
            min-height: 48px;
            flex-shrink: 0;
            position: relative;
        }
.bsu-page .action-icon-btn::after {
            content: '';
            position: absolute;
            right: 0;
            top: 16px;
            bottom: 16px;
            width: 1px;
            background: rgba(255,255,255,0.08);
        }
.bsu-page .action-icon-btn:hover { background: #040911; }
.bsu-page .action-icon-btn:active { background: #373C44; transform: scale(0.96); }
.bsu-page .action-icon-btn svg { width: 18px; height: 18px; stroke: #fff; fill: none; }
.bsu-page .action-info-btn {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 20px;
            cursor: pointer;
            background: #040911;
            border: none;
            font-family: 'Inter', sans-serif;
            text-align: left;
            transition: all 0.15s;
            min-height: 48px;
            position: relative;
        }
.bsu-page .action-info-btn::after {
            content: '';
            position: absolute;
            right: 0;
            top: 16px;
            bottom: 16px;
            width: 1px;
            background: rgba(255,255,255,0.08);
        }
.bsu-page .action-info-btn:hover { background: #040911; }
.bsu-page .action-info-btn:active { background: #373C44; transform: scale(0.98); }
.bsu-page .action-info-btn .info-label {
            font-size: 10px;
            font-weight: 600;
            color: rgba(255,255,255,0.4);
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
.bsu-page .action-info-btn .info-value {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            margin-top: 2px;
        }
.bsu-page .action-spacer { flex: 1; background: #040911; }
.bsu-page .action-user-btn {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 20px;
            cursor: pointer;
            background: #040911;
            border: none;
            font-family: 'Inter', sans-serif;
            text-align: left;
            transition: all 0.15s;
            min-height: 48px;
        }
.bsu-page .action-user-btn:hover { background: #040911; }
.bsu-page .action-user-btn:active { background: #373C44; transform: scale(0.98); }
.bsu-page .action-user-btn .user-name {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
        }
.bsu-page .action-user-btn .user-phone {
            font-size: 11px;
            color: rgba(255,255,255,0.4);
            margin-top: 2px;
        }
.bsu-page .action-delete-btn {
            width: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #CC3C5F;
            border: none;
            cursor: pointer;
            transition: all 0.15s;
            min-height: 48px;
            flex-shrink: 0;
        }
.bsu-page .action-delete-btn:hover { background: #CC3C5F; }
.bsu-page .action-delete-btn:active { background: #99092C; transform: scale(0.96); }
.bsu-page .action-delete-btn svg { width: 20px; height: 20px; stroke: #fff; fill: none; }
.bsu-page .theme-toggle-btn {
            width: auto;
            height: 100%;
            border-radius: 0;
            border: none;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            padding: 0;
        }
.bsu-page .theme-toggle-btn:hover { background: var(--bg-hover); }
.bsu-page .theme-toggle-btn svg {
            width: 18px;
            height: 18px;
            stroke: var(--nav-icon-stroke);
            fill: none;
        }
.bsu-page .theme-toggle-btn .icon-sun { display: none; }
.bsu-page .theme-toggle-btn .icon-moon { display: block; }
.bsu-page[data-theme="dark"] .theme-toggle-btn .icon-sun { display: block; }
.bsu-page[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }
.bsu-page .nav-tab.more-tab {
            position: relative;
            cursor: pointer;
        }
.bsu-page .nav-tab.more-tab svg {
            transition: transform 0.2s ease;
        }
.bsu-page .nav-tab.more-tab.active {
            background: var(--more-tab-active-bg);
            color: var(--text-primary);
        }
.bsu-page .nav-tab.more-tab.active svg {
            transform: rotate(180deg);
        }
.bsu-page .more-dropdown-overlay {
            display: none;
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 890;
            background: var(--overlay-bg);
            backdrop-filter: blur(2px);
        }
.bsu-page .more-dropdown-overlay.active { display: block; }
.bsu-page .more-dropdown {
            display: none;
            position: absolute;
            top: 60px;
            left: 0;
            right: 0;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border-alt);
            box-shadow: 0 8px 32px var(--shadow-color);
            z-index: 895;
            padding: 20px 28px 16px;
        }
.bsu-page .more-dropdown.active { display: block; }
.bsu-page .more-dropdown-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 10px;
            margin-bottom: 16px;
        }
.bsu-page .more-dropdown-item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 80px;
            padding: 0 16px;
            border: 1px solid var(--border-alt);
            border-radius: 10px;
            background: var(--dropdown-item-bg);
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            text-transform: uppercase;
            letter-spacing: 0.3px;
            cursor: pointer;
            transition: all 0.15s;
            position: relative;
            text-align: center;
        }
.bsu-page .more-dropdown-item:hover {
            background: var(--dropdown-item-hover);
            border-color: var(--border-strong);
        }
.bsu-page .more-dropdown-item.active-green {
            background: var(--active-green-bg);
            border-color: #10B48F;
        }
.bsu-page .more-dropdown-item.active-yellow {
            background: var(--active-yellow-bg);
            border-color: #E8C94A;
        }
.bsu-page .more-dropdown-item .more-badge {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.bsu-page .more-badge.green { background: #10B48F; }
.bsu-page .more-badge.orange { background: #E8873C; }
.bsu-page .more-badge.red { background: #ff6f92; }
.bsu-page .more-dropdown-footer {
            display: flex;
            justify-content: flex-end;
            padding-top: 4px;
        }
.bsu-page .more-load-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            background: none;
            border: none;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
            font-family: 'Inter', sans-serif;
        }
.bsu-page .more-load-btn:hover { color: #4185F4; }
.bsu-page .more-load-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.bsu-page .mega-menu-overlay {
            display: none;
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 900;
            background: rgba(0,0,0,0.4);
            backdrop-filter: blur(2px);
        }
.bsu-page .mega-menu-overlay.open { display: block; }
.bsu-page .mega-menu {
            display: none;
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            background: var(--mega-bg);
            z-index: 950;
            padding: 20px 28px 24px;
            overflow-y: auto;
            max-height: calc(100vh - 60px);
            box-shadow: 0 8px 32px var(--shadow-color);
            border-bottom: 1px solid var(--border-alt);
            font-family: 'Inter', sans-serif;
        }
.bsu-page .mega-menu.open { display: flex; }
.bsu-page .mega-menu-columns {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
            width: 100%;
            align-items: start;
        }
.bsu-page .mega-col {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
.bsu-page .mega-col-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 2px 10px;
        }
.bsu-page .mega-col-accent {
            width: 3px;
            height: 14px;
            border-radius: 2px;
            background: #4185F4;
        }
.bsu-page .mega-col-title {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-secondary);
        }
.bsu-page .mega-col-items {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
.bsu-page .mega-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            min-height: 85px;
            border-radius: 10px;
            background: var(--mega-item-bg);
            border: 1px solid var(--mega-item-border);
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .mega-menu-item:hover {
            background: var(--mega-item-bg);
            border-color: #4185F4;
            box-shadow: 0 2px 8px rgba(65,133,244,0.10);
        }
.bsu-page .mega-menu-item:active {
            transform: scale(0.98);
            box-shadow: none;
        }
.bsu-page .mega-item-icon {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: rgba(65,133,244,0.08);
        }
.bsu-page .mega-item-icon svg {
            width: 16px;
            height: 16px;
            stroke: #4185F4;
            fill: none;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
.bsu-page .mega-menu-item:hover .mega-item-icon {
            background: rgba(65,133,244,0.14);
        }
.bsu-page .mega-item-label {
            font-size: 15.5px;
            font-weight: 500;
            color: var(--text-primary);
            line-height: 1.3;
        }
.bsu-page .mega-menu-item:hover .mega-item-label { color: #4185F4; }
.bsu-page .mega-col.col-operations .mega-col-accent { background: #10B48F; }
.bsu-page .mega-col.col-operations .mega-item-icon { background: rgba(16,180,143,0.08); }
.bsu-page .mega-col.col-operations .mega-item-icon svg { stroke: #10B48F; }
.bsu-page .mega-col.col-operations .mega-menu-item:hover { border-color: #10B48F; box-shadow: 0 2px 8px rgba(16,180,143,0.10); }
.bsu-page .mega-col.col-operations .mega-menu-item:hover .mega-item-icon { background: rgba(16,180,143,0.14); }
.bsu-page .mega-col.col-operations .mega-menu-item:hover .mega-item-label { color: #10B48F; }
.bsu-page .mega-col.col-finance .mega-col-accent { background: #FFC860; }
.bsu-page .mega-col.col-finance .mega-item-icon { background: rgba(255,200,96,0.12); }
.bsu-page .mega-col.col-finance .mega-item-icon svg { stroke: #D4A12A; }
.bsu-page .mega-col.col-finance .mega-menu-item:hover { border-color: #FFC860; box-shadow: 0 2px 8px rgba(255,200,96,0.15); }
.bsu-page .mega-col.col-finance .mega-menu-item:hover .mega-item-icon { background: rgba(255,200,96,0.20); }
.bsu-page .mega-col.col-finance .mega-menu-item:hover .mega-item-label { color: #D4A12A; }
.bsu-page .mega-col.col-reports .mega-col-accent { background: #865FC2; }
.bsu-page .mega-col.col-reports .mega-item-icon { background: rgba(134,95,194,0.08); }
.bsu-page .mega-col.col-reports .mega-item-icon svg { stroke: #865FC2; }
.bsu-page .mega-col.col-reports .mega-menu-item:hover { border-color: #865FC2; box-shadow: 0 2px 8px rgba(134,95,194,0.10); }
.bsu-page .mega-col.col-reports .mega-menu-item:hover .mega-item-icon { background: rgba(134,95,194,0.14); }
.bsu-page .mega-col.col-reports .mega-menu-item:hover .mega-item-label { color: #865FC2; }
.bsu-page .mega-col.col-system .mega-col-accent { background: #FF9772; }
.bsu-page .mega-col.col-system .mega-item-icon { background: rgba(255,151,114,0.10); }
.bsu-page .mega-col.col-system .mega-item-icon svg { stroke: #FF9772; }
.bsu-page .mega-col.col-system .mega-menu-item:hover { border-color: #FF9772; box-shadow: 0 2px 8px rgba(255,151,114,0.12); }
.bsu-page .mega-col.col-system .mega-menu-item:hover .mega-item-icon { background: rgba(255,151,114,0.16); }
.bsu-page .mega-col.col-system .mega-menu-item:hover .mega-item-label { color: #E07A52; }
.bsu-page .mega-menu-item.danger {
            border-color: #FF6F92;
            background: #FF6F92;
        }
.bsu-page .mega-menu-item.danger .mega-item-label { color: #fff; font-weight: 600; }
.bsu-page .mega-menu-item.danger .mega-item-icon { background: rgba(255,255,255,0.18); }
.bsu-page .mega-menu-item.danger .mega-item-icon svg { stroke: #fff; }
.bsu-page .mega-menu-item.danger:hover { background: #e85f82; border-color: #e85f82; box-shadow: 0 2px 12px rgba(255,111,146,0.35); }
.bsu-page .mega-col .mega-menu-item.danger:hover .mega-item-label { color: #fff; }
.bsu-page .mega-col .mega-menu-item.danger:hover .mega-item-icon { background: rgba(255,255,255,0.25); }
.bsu-page .mega-col .mega-menu-item.danger:hover .mega-item-icon svg { stroke: #fff; }
.bsu-page #navUser.active {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }
.bsu-page #navUser.active .nav-user-chevron {
            transform: rotate(180deg);
        }
.bsu-page .passcode-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--overlay-bg);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
.bsu-page .passcode-overlay.active {
            display: flex;
        }
.bsu-page .passcode-modal {
            background: var(--passcode-modal-bg);
            border-radius: 16px;
            width: 30%;
            box-shadow: 0 16px 48px rgba(0,0,0,0.2);
            overflow: hidden;
            font-family: 'Inter', sans-serif;
        }
.bsu-page .passcode-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-alt);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
.bsu-page .passcode-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--passcode-title-color);
        }
.bsu-page .passcode-table-pill {
            font-size: 13px;
            font-weight: 600;
            color: #4185F4;
            background: #ECF3FE;
            padding: 6px 14px;
            border-radius: 20px;
            font-family: 'Inter', sans-serif;
        }
.bsu-page .passcode-body {
            padding: 24px;
        }
.bsu-page .passcode-display {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 24px;
        }
.bsu-page .passcode-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 2px solid var(--passcode-dot-border);
            background: var(--passcode-dot-bg);
            transition: all 0.2s;
        }
.bsu-page .passcode-dot.filled {
            background: #4185F4;
            border-color: #4185F4;
        }
.bsu-page .passcode-dot.error {
            background: #FF6F92;
            border-color: #FF6F92;
        }
.bsu-page .passcode-keypad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
.bsu-page .passcode-key {
            height: 80px;
            border: none;
            border-radius: 12px;
            background: var(--passcode-key-bg);
            font-size: 22px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--passcode-title-color);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.12s;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
.bsu-page .passcode-key:hover {
            background: var(--passcode-key-hover);
        }
.bsu-page .passcode-key:active {
            background: var(--passcode-key-active);
            transform: scale(0.96);
        }
.bsu-page .passcode-key.empty {
            background: transparent;
            cursor: default;
        }
.bsu-page .passcode-key.empty:hover {
            background: transparent;
        }
.bsu-page .passcode-key.backspace {
            background: var(--passcode-key-bg);
        }
.bsu-page .passcode-key.backspace svg {
            width: 22px;
            height: 22px;
            stroke: var(--backspace-stroke);
            fill: none;
            stroke-width: 2.5;
        }
.bsu-page .passcode-footer {
            padding: 16px 24px 24px;
            display: flex;
            gap: 12px;
        }
.bsu-page .passcode-btn {
            flex: 1;
            height: 52px;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            -webkit-tap-highlight-color: transparent;
        }
.bsu-page .passcode-btn.cancel {
            background: var(--passcode-key-bg);
            color: var(--text-primary);
        }
.bsu-page .passcode-btn.cancel:hover {
            background: var(--passcode-key-hover);
        }
.bsu-page .passcode-mode-tabs {
            display: flex;
            background: var(--passcode-key-bg);
            border-radius: 12px;
            padding: 4px;
            margin: 12px 24px 4px;
        }
.bsu-page .passcode-mode-tab {
            flex: 1;
            height: 60px;
            border: none;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            background: transparent;
            color: var(--text-muted);
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
.bsu-page .passcode-mode-tab.active {
            background: #4185F4;
            color: #fff;
            box-shadow: 0 2px 8px rgba(65, 133, 244, 0.3);
        }
.bsu-page .passcode-mode-tab svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
        }
.bsu-page .fingerprint-body {
            padding: 20px 24px 0;
            display: none;
        }
.bsu-page .fingerprint-body.active {
            display: block;
        }
.bsu-page .fingerprint-cors-wrapper {
            position: relative;
            margin-bottom: 16px;
        }
.bsu-page .fingerprint-cors-select {
            width: 100%;
            height: 52px;
            padding: 0 44px 0 16px;
            border: 1.5px solid var(--border-alt);
            border-radius: 12px;
            background: var(--passcode-modal-bg);
            font-size: 14px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--passcode-title-color);
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
        }
.bsu-page .fingerprint-cors-arrow {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: var(--text-secondary);
        }
.bsu-page .fingerprint-card {
            background: var(--passcode-modal-bg);
            border: 1.5px solid var(--border-alt);
            border-radius: 16px;
            padding: 28px 24px 24px;
            text-align: center;
        }
.bsu-page .fingerprint-card-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--passcode-title-color);
            margin-bottom: 16px;
        }
.bsu-page .fingerprint-scan-quality {
            width: 60%;
            margin: 0 auto 16px;
            height: 44px;
            border: 1.5px solid var(--border-alt);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-muted);
            background: var(--input-bg);
        }
.bsu-page .fingerprint-status {
            font-size: 12px;
            font-weight: 400;
            color: #E53935;
            margin-bottom: 20px;
        }
.bsu-page .fingerprint-icon-area {
            width: 240px;
            height: 240px;
            margin: 0 auto;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.bsu-page .fingerprint-scan-box {
            width: 200px;
            height: 200px;
            border: 2.5px dashed var(--border-color);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
.bsu-page .fingerprint-scan-box .fp-icon {
            width: 120px;
            height: 120px;
        }
.bsu-page .fingerprint-scan-line {
            position: absolute;
            left: 8%;
            right: 8%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #4DD0E1, #4DD0E1, transparent);
            top: 50%;
            border-radius: 2px;
            animation: bsu-fpScan 2.5s ease-in-out infinite;
        }
@keyframes bsu-fpScan {
            0%, 100% { top: 30%; opacity: 0.6; }
            50% { top: 65%; opacity: 1; }
        }
.bsu-page .fingerprint-corner {
            position: absolute;
            width: 28px;
            height: 28px;
            border-color: #4DD0E1;
            border-style: solid;
            border-width: 0;
        }
.bsu-page .fingerprint-corner.tl { top: 0; left: 0; border-top-width: 3.5px; border-left-width: 3.5px; border-radius: 8px 0 0 0; }
.bsu-page .fingerprint-corner.tr { top: 0; right: 0; border-top-width: 3.5px; border-right-width: 3.5px; border-radius: 0 8px 0 0; }
.bsu-page .fingerprint-corner.bl { bottom: 0; left: 0; border-bottom-width: 3.5px; border-left-width: 3.5px; border-radius: 0 0 0 8px; }
.bsu-page .fingerprint-corner.br { bottom: 0; right: 0; border-bottom-width: 3.5px; border-right-width: 3.5px; border-radius: 0 0 8px 0; }
.bsu-page .fingerprint-footer {
            display: none;
            padding: 20px 24px 24px;
            gap: 12px;
        }
.bsu-page .fingerprint-footer.active {
            display: flex;
        }
.bsu-page .fingerprint-footer-btn {
            flex: 1;
            height: 60px;
            border-radius: 12px;
            border: none;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .fingerprint-footer-btn.troubleshoot {
            background: var(--passcode-key-bg);
            color: var(--passcode-title-color);
        }
.bsu-page .fingerprint-footer-btn.troubleshoot:hover {
            background: var(--passcode-key-hover);
        }
.bsu-page .fingerprint-footer-btn.fp-cancel {
            background: #E8A858;
            color: #fff;
        }
.bsu-page .fingerprint-footer-btn.fp-cancel:hover {
            background: #D9993E;
        }
@media (max-width: 1280px) {.bsu-page .top-nav { padding: 0 16px; }
.bsu-page .nav-tab { padding: 0 14px; font-size: 12px; }
.bsu-page .nav-bookings-btn { padding: 0 14px; font-size: 12px; }
.bsu-page .nav-right { gap: 10px; }
.bsu-page .table-grid { gap: 10px; padding: 16px; }
.bsu-page .table-card .empty-num { font-size: 20px; }
.bsu-page .sub-nav { padding: 10px 16px; }
.bsu-page .search-bar { min-width: 160px; height: 40px; }
.bsu-page .order-panel { width: 40%; }
.bsu-page .food-grid { grid-template-columns: repeat(4, 1fr); }
.bsu-page .action-btn { padding: 0 14px; }
.bsu-page .action-btn .action-value { font-size: 13px; }
.bsu-page .action-btn .action-label { font-size: 9px; }
.bsu-page .action-info-btn { padding: 0 14px; }
.bsu-page .action-info-btn .info-value { font-size: 12px; }
.bsu-page .action-user-btn { padding: 0 14px; }}
@media (max-width: 1024px) {.bsu-page .nav-tab { padding: 0 10px; font-size: 11px; }
.bsu-page .nav-tab .tab-badge { font-size: 9px; padding: 1px 5px; }
.bsu-page .nav-icon-btn { width: 40px; height: 40px; }
.bsu-page .nav-icon-btn svg { width: 16px; height: 16px; }
.bsu-page .nav-bookings-btn { height: 40px; font-size: 11px; padding: 0 12px; }
.bsu-page .nav-user-name { font-size: 12px; }
.bsu-page .table-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; }
.bsu-page .table-card .empty-num { font-size: 18px; padding: 10px; }
.bsu-page .table-card { border-radius: 12px; }
.bsu-page .tc-table-num { font-size: 18px; }
.bsu-page .tc-top-right { gap: 5px; }
.bsu-page .tc-people { font-size: 11px; }
.bsu-page .tc-people svg { width: 13px; height: 13px; }
.bsu-page .tc-price-pill { font-size: 10px; padding: 2px 6px; }
.bsu-page .tc-customer { font-size: 12px; }
.bsu-page .tc-top { padding: 10px 12px 6px; gap: 3px; }
.bsu-page .tc-bottom { padding: 8px 12px 10px; gap: 6px; }
.bsu-page .tc-time-badge { font-size: 10px; padding: 2px 6px; }
.bsu-page .tc-time-badge svg { width: 12px; height: 12px; }
.bsu-page .tc-amount { font-size: 16px; }
.bsu-page .tc-server { font-size: 11px; }
.bsu-page .tc-more-btn { width: 38px; height: 38px; min-width: 38px; margin: -6px -6px -6px 0; }
.bsu-page .tc-more-dots span { width: 5px; height: 5px; }
.bsu-page .filter-pill { padding: 0 10px; height: 40px; font-size: 11px; }
.bsu-page .bottom-bar { height: 64px; padding: 8px 16px; }
.bsu-page .order-panel { width: 38%; }
.bsu-page .food-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bsu-page .category-rows { max-height: 52px; padding-right: 90px; }
.bsu-page .cat-pill { height: 36px; padding: 0 14px; font-size: 12px; }
.bsu-page .cat-nav-btn { width: 36px; height: 36px; }
.bsu-page .action-bar { height: 60px; }
.bsu-page .action-btn { padding: 0 10px; min-height: 40px; }
.bsu-page .action-btn .action-value { font-size: 12px; }
.bsu-page .action-btn.kot { padding: 0 18px; }
.bsu-page .action-info-btn { padding: 0 10px; }
.bsu-page .action-info-btn .info-label { font-size: 9px; }
.bsu-page .action-info-btn .info-value { font-size: 11px; }
.bsu-page .action-user-btn { padding: 0 10px; }
.bsu-page .action-user-btn .user-name { font-size: 11px; }
.bsu-page .action-user-btn .user-phone { font-size: 10px; }
.bsu-page .action-icon-btn { width: 44px; }
.bsu-page .action-delete-btn { width: 48px; }}
@media (max-width: 768px) {.bsu-page .top-nav { height: 50px; }
.bsu-page .nav-logo { width: 30px; height: 30px; margin-right: 12px; }
.bsu-page .nav-logo img { width: 30px; height: 30px; }
.bsu-page .nav-tabs { height: 50px; }
.bsu-page .nav-tab { padding: 0 8px; font-size: 10px; letter-spacing: 0; }
.bsu-page .nav-right { gap: 6px; }
.bsu-page .nav-bookings-btn { display: none; }
.bsu-page .nav-icon-btn { width: 36px; height: 36px; }
.bsu-page .nav-icon-btn svg { width: 14px; height: 14px; }
.bsu-page .nav-user { padding: 4px 8px; min-height: 36px; }
.bsu-page .nav-user-name { font-size: 11px; }
.bsu-page .sub-nav { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
.bsu-page .sub-nav-left { font-size: 12px; flex-wrap: wrap; }
.bsu-page .search-bar { min-width: 140px; height: 34px; }
.bsu-page .search-bar input { font-size: 12px; }
.bsu-page .sub-nav-right { gap: 6px; }
.bsu-page .filter-pill { padding: 0 8px; height: 34px; font-size: 10px; }
.bsu-page .table-grid {
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: auto;
                gap: 8px;
                padding: 10px 12px;
                overflow-y: auto;
            }
.bsu-page .table-card .empty-num { font-size: 16px; padding: 10px; }
.bsu-page .table-card { border-radius: 10px; }
.bsu-page .tc-table-num { font-size: 16px; }
.bsu-page .tc-top-right { gap: 4px; }
.bsu-page .tc-people { font-size: 10px; }
.bsu-page .tc-people svg { width: 12px; height: 12px; }
.bsu-page .tc-price-pill { font-size: 9px; padding: 2px 5px; }
.bsu-page .tc-customer { font-size: 11px; }
.bsu-page .tc-top { padding: 8px 10px 6px; gap: 2px; }
.bsu-page .tc-bottom { padding: 6px 10px 8px; gap: 5px; }
.bsu-page .tc-time-badge { font-size: 9px; padding: 2px 5px; }
.bsu-page .tc-time-badge svg { width: 11px; height: 11px; }
.bsu-page .tc-amount { font-size: 14px; }
.bsu-page .tc-server { font-size: 10px; }
.bsu-page .tc-more-btn { width: 36px; height: 36px; min-width: 36px; margin: -4px -4px -4px 0; }
.bsu-page .tc-more-dots span { width: 4px; height: 4px; }
.bsu-page .bottom-bar { height: 56px; padding: 6px 12px; }
.bsu-page .page-dot { min-width: 48px; height: 48px; padding: 0 12px; }
.bsu-page .billing-body { flex-direction: column; overflow-y: auto; }
.bsu-page .order-panel {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid var(--border-color);
                max-height: 50vh;
                overflow-y: auto;
            }
.bsu-page .menu-panel { flex: 1; min-height: 300px; }
.bsu-page .order-top { padding: 10px 12px; gap: 8px; }
.bsu-page .order-search { height: 40px; }
.bsu-page .qty-input { width: 60px; height: 40px; font-size: 13px; }
.bsu-page .add-btn { height: 40px; padding: 0 20px; font-size: 13px; }
.bsu-page .order-header { padding: 8px 12px; font-size: 11px; }
.bsu-page .order-item { padding: 10px 12px; }
.bsu-page .order-item .item-name { font-size: 13px; }
.bsu-page .order-item .item-amount { font-size: 13px; min-width: 50px; }
.bsu-page .qty-ctrl-btn { width: 30px; height: 30px; font-size: 16px; }
.bsu-page .qty-display { width: 32px; height: 30px; font-size: 13px; }
.bsu-page .order-total-row { padding: 10px 12px; }
.bsu-page .total-left .total-label { font-size: 14px; }
.bsu-page .total-right { font-size: 18px; }
.bsu-page .comment-row { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
.bsu-page .comment-btn { padding: 6px 12px; font-size: 11px; }
.bsu-page .comment-offer { padding: 0 10px; }
.bsu-page .comment-tax { padding: 0 10px; }
.bsu-page .category-area { padding: 10px 12px 0; }
.bsu-page .category-rows { max-height: 48px; gap: 6px; padding-right: 80px; }
.bsu-page .cat-pill { height: 34px; padding: 0 12px; font-size: 11px; }
.bsu-page .cat-nav-btn { width: 34px; height: 34px; }
.bsu-page .menu-search-row { padding: 8px 12px; gap: 8px; }
.bsu-page .menu-search { height: 40px; }
.bsu-page .scan-btn { height: 40px; padding: 0 16px; font-size: 12px; }
.bsu-page .food-grid-area { padding: 8px 12px; }
.bsu-page .food-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; }
.bsu-page .food-card .food-name { font-size: 10px; padding: 6px 8px; }
.bsu-page .food-card .food-price { font-size: 9px; padding: 2px 6px; top: 6px; left: 6px; }
.bsu-page .food-nav-btn { width: 40px; height: 40px; }
.bsu-page .action-bar { height: auto; flex-wrap: wrap; }
.bsu-page .action-btn { padding: 8px 12px; min-height: 44px; }
.bsu-page .action-btn.kot { padding: 8px 16px; }
.bsu-page .action-spacer { display: none; }
.bsu-page .action-info-btn { padding: 8px 12px; min-height: 44px; }
.bsu-page .action-user-btn { padding: 8px 12px; min-height: 44px; }}
@media (max-width: 480px) {.bsu-page .top-nav { height: 44px; }
.bsu-page .nav-logo { width: 28px; height: 28px; margin-right: 8px; }
.bsu-page .nav-logo img { width: 28px; height: 28px; }
.bsu-page .nav-tabs { height: 44px; overflow-x: auto; }
.bsu-page .nav-logo { width: 44px; height: 44px; padding: 0 8px; }
.bsu-page .nav-logo img { width: 26px; height: 26px; }
.bsu-page .nav-tab { padding: 0 6px; font-size: 9px; white-space: nowrap; }
.bsu-page .nav-tab .tab-badge { font-size: 8px; padding: 1px 4px; min-width: 16px; }
.bsu-page .nav-right { gap: 4px; }
.bsu-page .nav-icon-btn { width: 32px; height: 32px; border-radius: 6px; }
.bsu-page .nav-icon-btn svg { width: 13px; height: 13px; }
.bsu-page .nav-user { padding: 2px 6px; min-height: 32px; }
.bsu-page .nav-user-name { font-size: 10px; }
.bsu-page .nav-user-chevron { width: 12px; height: 12px; }
.bsu-page .sub-nav { padding: 6px 8px; gap: 6px; }
.bsu-page .sub-nav-left { font-size: 11px; gap: 4px; }
.bsu-page .sub-nav-left .divider-line { margin: 0 4px; }
.bsu-page .search-bar { min-width: 100px; height: 30px; padding: 0 8px; }
.bsu-page .search-bar input { font-size: 11px; }
.bsu-page .search-bar svg { width: 14px; height: 14px; }
.bsu-page .sub-nav-right { gap: 4px; }
.bsu-page .filter-pill { padding: 0 6px; height: 30px; font-size: 9px; border-radius: 6px; }
.bsu-page .table-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 6px;
                padding: 8px;
            }
.bsu-page .table-card .empty-num { font-size: 14px; padding: 8px; }
.bsu-page .table-card { border-radius: 8px; }
.bsu-page .tc-table-num { font-size: 14px; }
.bsu-page .tc-top-right { gap: 4px; }
.bsu-page .tc-people { font-size: 10px; }
.bsu-page .tc-people svg { width: 11px; height: 11px; }
.bsu-page .tc-price-pill { font-size: 9px; padding: 2px 5px; }
.bsu-page .tc-customer { font-size: 10px; }
.bsu-page .tc-top { padding: 6px 8px 4px; gap: 2px; }
.bsu-page .tc-bottom { padding: 5px 8px 6px; gap: 4px; }
.bsu-page .tc-time-badge { font-size: 9px; padding: 2px 5px; }
.bsu-page .tc-time-badge svg { width: 10px; height: 10px; }
.bsu-page .tc-amount { font-size: 13px; }
.bsu-page .tc-server { font-size: 10px; }
.bsu-page .tc-more-btn { width: 36px; height: 36px; min-width: 36px; margin: -4px -4px -4px 0; }
.bsu-page .tc-more-dots span { width: 4px; height: 4px; }
.bsu-page .bottom-bar { height: 48px; padding: 4px 8px; }
.bsu-page .page-dot { min-width: 40px; height: 40px; padding: 0 8px; }
.bsu-page .page-dot .dot-bar { width: 30px; height: 5px; }
.bsu-page .page-dot.active .dot-bar { width: 44px; }
.bsu-page .page-dot .dot-badge { font-size: 10px; padding: 2px 6px; }
.bsu-page .order-panel { max-height: 45vh; }
.bsu-page .menu-panel { min-height: 250px; }
.bsu-page .order-top { padding: 8px; gap: 6px; }
.bsu-page .order-search { height: 36px; padding: 0 10px; }
.bsu-page .order-search svg { width: 16px; height: 16px; }
.bsu-page .order-search input { font-size: 12px; }
.bsu-page .qty-input { width: 48px; height: 36px; font-size: 12px; border-radius: 8px; }
.bsu-page .add-btn { height: 36px; padding: 0 16px; font-size: 12px; border-radius: 8px; }
.bsu-page .order-header { padding: 6px 8px; font-size: 10px; grid-template-columns: 30px 1fr 80px 70px; }
.bsu-page .order-item { padding: 8px; }
.bsu-page .order-item-main { gap: 6px; }
.bsu-page .order-item .item-delete { width: 24px; height: 24px; }
.bsu-page .order-item .item-delete svg { width: 14px; height: 14px; }
.bsu-page .order-item .item-price-tag { font-size: 11px; }
.bsu-page .order-item .item-num { font-size: 12px; }
.bsu-page .order-item .item-name { font-size: 12px; }
.bsu-page .order-item .item-amount { font-size: 12px; min-width: 40px; }
.bsu-page .order-item .item-more { width: 24px; height: 24px; font-size: 16px; }
.bsu-page .qty-ctrl-btn { width: 26px; height: 26px; font-size: 14px; }
.bsu-page .qty-display { width: 28px; height: 26px; font-size: 11px; }
.bsu-page .sub-items { margin-left: 30px; }
.bsu-page .sub-item .sub-name { font-size: 11px; }
.bsu-page .item-note { margin-left: 30px; font-size: 11px; }
.bsu-page .item-tags { margin-left: 30px; }
.bsu-page .item-tag { font-size: 10px; padding: 2px 8px; }
.bsu-page .item-actions { margin-left: 30px; }
.bsu-page .item-action-btn { padding: 4px 12px; font-size: 11px; border-radius: 6px; }
.bsu-page .order-total-row { padding: 8px; }
.bsu-page .total-left .total-label { font-size: 13px; }
.bsu-page .total-left .total-count { font-size: 10px; padding: 1px 8px; }
.bsu-page .total-right { font-size: 16px; }
.bsu-page .comment-row { padding: 6px 8px; gap: 6px; }
.bsu-page .comment-btn { padding: 5px 10px; font-size: 10px; border-radius: 6px; }
.bsu-page .comment-offer { padding: 0 6px; }
.bsu-page .comment-offer .offer-label { font-size: 9px; }
.bsu-page .comment-offer .offer-value { font-size: 12px; }
.bsu-page .comment-tax { padding: 0 6px; }
.bsu-page .comment-tax .tax-label { font-size: 9px; }
.bsu-page .comment-tax .tax-value { font-size: 12px; }
.bsu-page .comment-offer svg, .bsu-page .comment-tax svg { width: 14px; height: 14px; }
.bsu-page .category-area { padding: 8px 8px 0; }
.bsu-page .category-rows { max-height: 40px; gap: 4px; padding-right: 70px; }
.bsu-page .cat-pill { height: 30px; padding: 0 10px; font-size: 10px; border-radius: 8px; }
.bsu-page .cat-nav-btns { right: 8px; top: 8px; }
.bsu-page .cat-nav-btn { width: 30px; height: 30px; }
.bsu-page .cat-nav-btn svg { width: 14px; height: 14px; }
.bsu-page .menu-search-row { padding: 6px 8px; gap: 6px; }
.bsu-page .menu-search { height: 36px; padding: 0 10px; }
.bsu-page .menu-search svg { width: 16px; height: 16px; }
.bsu-page .menu-search input { font-size: 12px; }
.bsu-page .scan-btn { height: 36px; padding: 0 12px; font-size: 11px; border-radius: 8px; }
.bsu-page .scan-btn svg { width: 16px; height: 16px; }
.bsu-page .food-grid-area { padding: 6px 8px; }
.bsu-page .food-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; }
.bsu-page .food-card { border-radius: 8px; }
.bsu-page .food-card .food-name { font-size: 9px; padding: 4px 6px; }
.bsu-page .food-card .food-price { font-size: 8px; padding: 2px 5px; top: 4px; left: 4px; border-radius: 4px; }
.bsu-page .food-card .food-veg { width: 12px; height: 12px; top: 4px; right: 4px; }
.bsu-page .food-card .food-veg::after { width: 5px; height: 5px; }
.bsu-page .food-card .food-qty-badge { font-size: 20px; }
.bsu-page .food-grid-nav { margin-top: 6px; }
.bsu-page .food-nav-btn { width: 36px; height: 36px; }
.bsu-page .food-nav-btn svg { width: 16px; height: 16px; }
.bsu-page .action-bar { height: auto; flex-wrap: wrap; gap: 0; }
.bsu-page .action-btn { padding: 6px 8px; min-height: 40px; flex: 1; min-width: 60px; }
.bsu-page .action-btn .action-label { font-size: 8px; letter-spacing: 0.3px; }
.bsu-page .action-btn .action-value { font-size: 11px; }
.bsu-page .action-btn.estimate { padding: 6px 10px; }
.bsu-page .action-btn.kot { padding: 6px 12px; }
.bsu-page .action-btn.kot .action-label { font-size: 10px; }
.bsu-page .action-info-btn { padding: 6px 8px; min-height: 40px; }
.bsu-page .action-info-btn .info-label { font-size: 8px; }
.bsu-page .action-info-btn .info-value { font-size: 10px; }
.bsu-page .action-spacer { display: none; }
.bsu-page .action-user-btn { padding: 6px 8px; min-height: 40px; }
.bsu-page .action-user-btn .user-name { font-size: 10px; }
.bsu-page .action-user-btn .user-phone { font-size: 9px; }
.bsu-page .action-icon-btn { width: 40px; min-height: 40px; }
.bsu-page .action-icon-btn svg { width: 16px; height: 16px; }
.bsu-page .action-delete-btn { width: 44px; min-height: 40px; }
.bsu-page .action-delete-btn svg { width: 16px; height: 16px; }}
/* ==================== from design-usa/cart-page.html ==================== */
.bsu-page {
            --bg-primary: #ffffff;
            --bg-secondary: #F1F2F5;
            --bg-tertiary: #F2F4F7;
            --bg-hover: #F9FAFB;
            --bg-hover-alt: #F7F8FA;
            --text-primary: #373C44;
            --text-secondary: #6A6F77;
            --text-muted: #9DA2AA;
            --text-placeholder: #BABFC8;
            --border-color: #DEE2E7;
            --border-alt: #E7EAEE;
            --border-strong: #D5D9E0;
            --border-light: #F1F2F5;
            --card-bg: #ffffff;
            --input-bg: #f9fafb;
            --nav-bg: #D5D9E0;
            --nav-hover: #C4C9D1;
            --table-header-bg: #F7F8FA;
            --shadow-color: rgba(0, 0, 0, 0.06);
            --overlay-bg: rgba(0, 0, 0, 0.3);
            --cat-pill-bg: linear-gradient(180deg, #fff 0%, #F7F8FA 100%);
            --cat-pill-text: #4a4a4a;
            --offer-tag-bg: #F1F2F5;
            --settle-right-bg: #F1F2F5;
            --denom-label-bg: #F9FAFB;
            --food-card-noimg-bg: linear-gradient(180deg, #fff 0%, #F7F8FA 100%);
            --food-card-noimg-name: #373C44;
            --chat-incoming-bg: #F1F2F5;
            --modal-bg: #ffffff;
            --info-row-bg: #F9FAFB;
            --info-row-hover: #F1F2F5;
            --more-dropdown-bg: #ffffff;
            --denom-btn-bg: linear-gradient(180deg, #fff 0%, #F7F8FA 100%);
            --settle-panel-bg: #F1F2F5;
            --settle-amount-bg: #ffffff;
            --mega-bg: #ffffff;
            --mega-item-bg: #fff;
            --mega-item-border: #ECEEF1;
        }
.bsu-page[data-theme="dark"] {
            --bg-primary: #1a1d23;
            --bg-secondary: #22262e;
            --bg-tertiary: #22262e;
            --bg-hover: #2a2e36;
            --bg-hover-alt: #2a2e36;
            --text-primary: #e8eaed;
            --text-secondary: #a0a5ad;
            --text-muted: #6e737b;
            --text-placeholder: #555a62;
            --border-color: #333840;
            --border-alt: #333840;
            --border-strong: #3d434b;
            --border-light: #2a2e36;
            --card-bg: #252930;
            --input-bg: #2a2e36;
            --nav-bg: #3d434b;
            --nav-hover: #4a5058;
            --table-header-bg: #2a2e36;
            --shadow-color: rgba(0, 0, 0, 0.2);
            --overlay-bg: rgba(0, 0, 0, 0.5);
            --cat-pill-bg: linear-gradient(180deg, #2a2e36 0%, #252930 100%);
            --cat-pill-text: #c0c4ca;
            --offer-tag-bg: #2a2e36;
            --settle-right-bg: #22262e;
            --denom-label-bg: #2a2e36;
            --food-card-noimg-bg: linear-gradient(180deg, #2a2e36 0%, #252930 100%);
            --food-card-noimg-name: #e8eaed;
            --chat-incoming-bg: #2a2e36;
            --modal-bg: #252930;
            --info-row-bg: #2a2e36;
            --info-row-hover: #333840;
            --more-dropdown-bg: #252930;
            --denom-btn-bg: linear-gradient(180deg, #2a2e36 0%, #252930 100%);
            --settle-panel-bg: #22262e;
            --settle-amount-bg: #252930;
            --mega-bg: #1E2128;
            --mega-item-bg: #1E2128;
            --mega-item-border: #2C3038;
        }
.bsu-page .nav-tab .tab-badge {
            background: #ff6f92;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 10px;
            min-width: 20px;
            text-align: center;
        }
.bsu-page .nav-icon-btn svg {
            width: 18px;
            height: 18px;
            stroke: var(--text-secondary);
            fill: none;
        }
.bsu-page .theme-toggle-btn svg {
            width: 18px;
            height: 18px;
            stroke: var(--text-secondary);
            fill: none;
        }
.bsu-page .action-customer-search {
            display: none;
            flex: 1;
            align-items: center;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(44,48,56,0.95);
        }
.bsu-page .action-customer-search.active { display: flex; }
.bsu-page .action-customer-search input {
            flex: 1;
            height: 100%;
            border: none;
            padding: 0 20px;
            font-size: 15px;
            font-family: 'Inter', sans-serif;
            color: #fff;
            outline: none;
            background: transparent;
        }
.bsu-page .action-customer-search input::placeholder { color: rgba(255,255,255,0.35); }
.bsu-page .action-customer-search .search-icon-btn {
            width: 50px;
            height: 100%;
            background: transparent;
            border: none;
            border-left: 1px solid rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }
.bsu-page .action-customer-search .search-icon-btn:hover { background: rgba(255,255,255,0.05); }
.bsu-page .action-customer-search .search-icon-btn svg {
            width: 20px;
            height: 20px;
            stroke: rgba(255,255,255,0.5);
            fill: none;
            stroke-width: 2;
        }
.bsu-page .billing-view {
            display: flex;
            flex: 1;
            flex-direction: column;
            overflow: hidden;
            min-height: 0;
        }
.bsu-page .lock-numpad-panel {
            display: none;
            flex-direction: column;
            width: 80px;
            background: #111318;
            border-right: 1px solid rgba(255,255,255,0.08);
            flex-shrink: 0;
        }
.bsu-page .lock-numpad-panel.active { display: flex; }
.bsu-page .lock-numpad-header {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 10px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            position: relative;
        }
.bsu-page .lock-numpad-header h4 {
            font-size: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.bsu-page .lock-numpad-header h4 svg {
            width: 22px;
            height: 22px;
            stroke: #4185F4;
            fill: none;
            stroke-width: 2;
        }
.bsu-page .lock-numpad-close {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            border: none;
            background: rgba(255,255,255,0.1);
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
.bsu-page .lock-numpad-close:hover { background: rgba(255,255,255,0.18); }
.bsu-page .lock-numpad-display {
            padding: 10px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
.bsu-page .lock-numpad-display input {
            width: 100%;
            height: 44px;
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 10px;
            background: rgba(255,255,255,0.06);
            color: #fff;
            font-size: 20px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            text-align: center;
            outline: none;
            box-sizing: border-box;
            letter-spacing: 6px;
            -webkit-text-security: disc;
        }
.bsu-page .lock-numpad-display input:focus { border-color: #4185F4; }
.bsu-page .lock-numpad-grid {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 10px;
        }
.bsu-page .lock-numpad-key {
            height: 0;
            flex: 1;
            border: none;
            border-radius: 10px;
            background: #2c3038;
            color: #fff;
            font-size: 20px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.1s;
        }
.bsu-page .lock-numpad-key:hover { background: #3a3f4a; }
.bsu-page .lock-numpad-key:active { background: #4185F4; }
.bsu-page .lock-numpad-key.backspace {
            background: #353a44;
        }
.bsu-page .lock-numpad-key.backspace:hover { background: #444952; }
.bsu-page .lock-numpad-key.backspace svg {
            width: 24px;
            height: 24px;
            stroke: #fff;
            fill: none;
            stroke-width: 2;
        }
.bsu-page .lock-numpad-submit {
            margin: 0 10px 10px;
            height: 44px;
            border: none;
            border-radius: 10px;
            background: #4185F4;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: background 0.15s;
            letter-spacing: 0.5px;
        }
.bsu-page .lock-numpad-submit:hover { background: #3070d9; }
.bsu-page .order-top {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 10px;
            border-bottom: 1px solid var(--border-alt);
            flex-shrink: 0;
        }
.bsu-page .order-search-wrapper {
            flex: 1;
            position: relative;
        }
.bsu-page .search-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            width: 100%;
            max-height: 420px;
            overflow-y: auto;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.12);
            z-index: 1050;
            padding: 8px 0;
        }
.bsu-page .search-dropdown.active { display: block; }
.bsu-page .search-dropdown-item {
            padding: 16px 20px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-light);
            transition: background 0.1s;
        }
.bsu-page .search-dropdown-item:last-child { border-bottom: none; }
.bsu-page .search-dropdown-item:hover { background: var(--bg-hover); }
.bsu-page .search-dropdown-item .search-item-price {
            font-size: 14px;
            font-weight: 600;
            color: #D4A12A;
            margin-bottom: 4px;
        }
.bsu-page .search-dropdown-item .search-item-name {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }
.bsu-page .search-dropdown-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1049;
        }
.bsu-page .search-dropdown-overlay.active { display: block; }
.bsu-page .qty-input-wrapper {
            position: relative;
        }
.bsu-page .numpad-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1099;
        }
.bsu-page .numpad-overlay.active { display: block; }
.bsu-page .numpad {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 280px;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 12px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.12);
            z-index: 1100;
        }
.bsu-page .numpad.active { display: block; }
.bsu-page .numpad-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
.bsu-page .numpad-key {
            height: 72px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--bg-primary);
            font-size: 24px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.1s;
        }
.bsu-page .numpad-key:hover {
            background: var(--bg-hover);
            border-color: var(--border-strong);
        }
.bsu-page .numpad-key:active {
            background: var(--bg-secondary);
            transform: scale(0.96);
        }
.bsu-page .numpad-key.backspace svg {
            width: 28px;
            height: 28px;
            stroke: var(--text-secondary);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
.bsu-page .order-items-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-light);
            flex-shrink: 0;
        }
.bsu-page .order-items-header span {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: 'Inter', sans-serif;
        }
.bsu-page .order-items-header .oih-del { width: 32px; flex-shrink: 0; }
.bsu-page .order-items-header .oih-item { flex: 1; min-width: 0; }
.bsu-page .order-items-header .oih-qty { width: 100px; text-align: center; flex-shrink: 0; }
.bsu-page .order-items-header .oih-amount { width: 70px; text-align: right; flex-shrink: 0; }
.bsu-page .order-items-header .oih-more { width: 48px; text-align: center; flex-shrink: 0; }
.bsu-page .order-item {
            padding: 12px 10px;
            border-bottom: 1px solid var(--border-light);
        }
.bsu-page .kot-separator {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 5px 10px;
            background: linear-gradient(180deg, #EAECF8 0%, #E0E3F2 100%);
            border-bottom: 1px solid var(--border-light);
        }
.bsu-page[data-theme="dark"] .kot-separator {
            background: linear-gradient(180deg, #2a2e3a 0%, #252838 100%);
        }
.bsu-page .kot-separator .kot-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: var(--bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border: 1px solid var(--border-strong);
        }
.bsu-page .kot-separator .kot-icon svg {
            width: 18px;
            height: 18px;
            stroke: #4185F4;
            fill: none;
            animation: bsu-kotSpin 3s linear infinite;
        }
@keyframes bsu-kotSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
.bsu-page .kot-separator .kot-label {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
        }
.bsu-page .kot-separator .kot-date {
            font-size: 11px;
            font-weight: 500;
            color: var(--text-secondary);
        }
.bsu-page .kot-separator .kot-outlet-pill {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-primary);
            background: var(--bg-primary);
            padding: 6px 10px;
            border-radius: 20px;
        }
.bsu-page .kot-more-btn {
            margin-left: auto;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 8px;
            background: rgba(0,0,0,0.06);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.12s;
        }
.bsu-page[data-theme="dark"] .kot-more-btn { background: rgba(255,255,255,0.08); }
.bsu-page .kot-more-btn:hover { background: rgba(0,0,0,0.1); }
.bsu-page[data-theme="dark"] .kot-more-btn:hover { background: rgba(255,255,255,0.14); }
.bsu-page .kot-more-btn svg {
            width: 16px;
            height: 16px;
            stroke: var(--text-secondary);
            fill: none;
            stroke-width: 2;
        }
.bsu-page .kot-settings-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.45);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }
.bsu-page .kot-settings-overlay.active { display: flex; }
.bsu-page .kot-settings-modal {
            background: var(--card-bg);
            border-radius: 24px;
            width: 640px;
            max-width: 92vw;
            box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.06);
            font-family: 'Inter', sans-serif;
            overflow: hidden;
            animation: bsu-kotModalIn 0.25s ease;
        }
@keyframes bsu-kotModalIn {
            from { opacity: 0; transform: scale(0.95) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
.bsu-page .kot-settings-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 28px 32px 8px;
        }
.bsu-page .kot-settings-header h3 {
            font-size: 22px;
            font-weight: 800;
            color: var(--text-primary);
            margin: 0;
            letter-spacing: -0.3px;
        }
.bsu-page .kot-settings-header-sub {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-muted);
            padding: 0 32px 20px;
            border-bottom: 1px solid var(--border-color);
        }
.bsu-page .kot-settings-close {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: none;
            background: var(--input-bg);
            color: var(--text-muted);
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }
.bsu-page .kot-settings-close:hover { background: var(--border-color); color: var(--text-primary); }
.bsu-page .kot-settings-body {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
            padding: 24px 32px 32px;
        }
.bsu-page .kot-settings-card {
            border: 1.5px solid var(--border-color);
            border-radius: 16px;
            padding: 22px 20px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 16px;
            position: relative;
            overflow: hidden;
        }
.bsu-page .kot-settings-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            opacity: 0;
            transition: opacity 0.2s;
        }
.bsu-page .kot-settings-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.08); }
.bsu-page .kot-settings-card:active { transform: translateY(0); }
.bsu-page .kot-settings-card-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
.bsu-page .kot-settings-card-icon svg {
            width: 24px;
            height: 24px;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
.bsu-page .kot-settings-card-text {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }
.bsu-page .kot-settings-card-title {
            font-size: 15px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            letter-spacing: -0.1px;
        }
.bsu-page .kot-settings-card-desc {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-muted);
            font-family: 'Inter', sans-serif;
            line-height: 1.3;
        }
.bsu-page .kot-settings-card-arrow {
            margin-left: auto;
            width: 20px;
            height: 20px;
            color: var(--text-muted);
            opacity: 0;
            transform: translateX(-4px);
            transition: all 0.2s;
            flex-shrink: 0;
        }
.bsu-page .kot-settings-card:hover .kot-settings-card-arrow { opacity: 1; transform: translateX(0); }
.bsu-page .kot-settings-card.void {
            background: rgba(255, 111, 146, 0.04);
            border-color: rgba(255, 111, 146, 0.18);
        }
.bsu-page .kot-settings-card.void:hover { border-color: rgba(255, 111, 146, 0.4); background: rgba(255, 111, 146, 0.07); }
.bsu-page .kot-settings-card.void .kot-settings-card-icon {
            background: rgba(255, 111, 146, 0.12);
        }
.bsu-page .kot-settings-card.void .kot-settings-card-icon svg { stroke: #FF6F92; }
.bsu-page .kot-settings-card.void .kot-settings-card-title { color: #FF6F92; }
.bsu-page .kot-settings-card.void .kot-settings-card-arrow { color: #FF6F92; }
.bsu-page .kot-settings-card.kitchen {
            background: rgba(65, 133, 244, 0.03);
            border-color: rgba(65, 133, 244, 0.15);
        }
.bsu-page .kot-settings-card.kitchen:hover { border-color: rgba(65, 133, 244, 0.4); background: rgba(65, 133, 244, 0.06); }
.bsu-page .kot-settings-card.kitchen .kot-settings-card-icon {
            background: rgba(65, 133, 244, 0.12);
        }
.bsu-page .kot-settings-card.kitchen .kot-settings-card-icon svg { stroke: #4185F4; }
.bsu-page .kot-settings-card.kitchen .kot-settings-card-title { color: #4185F4; }
.bsu-page .kot-settings-card.kitchen .kot-settings-card-arrow { color: #4185F4; }
.bsu-page .kot-settings-card.copy {
            background: rgba(134, 95, 194, 0.03);
            border-color: rgba(134, 95, 194, 0.15);
        }
.bsu-page .kot-settings-card.copy:hover { border-color: rgba(134, 95, 194, 0.4); background: rgba(134, 95, 194, 0.06); }
.bsu-page .kot-settings-card.copy .kot-settings-card-icon {
            background: rgba(134, 95, 194, 0.12);
        }
.bsu-page .kot-settings-card.copy .kot-settings-card-icon svg { stroke: #865FC2; }
.bsu-page .kot-settings-card.copy .kot-settings-card-title { color: #865FC2; }
.bsu-page .kot-settings-card.copy .kot-settings-card-arrow { color: #865FC2; }
.bsu-page .kot-settings-card.reprint {
            background: rgba(16, 180, 143, 0.04);
            border-color: rgba(16, 180, 143, 0.18);
        }
.bsu-page .kot-settings-card.reprint:hover { border-color: rgba(16, 180, 143, 0.4); background: rgba(16, 180, 143, 0.07); }
.bsu-page .kot-settings-card.reprint .kot-settings-card-icon {
            background: rgba(16, 180, 143, 0.12);
        }
.bsu-page .kot-settings-card.reprint .kot-settings-card-icon svg { stroke: #10B48F; }
.bsu-page .kot-settings-card.reprint .kot-settings-card-title { color: #10B48F; }
.bsu-page .kot-settings-card.reprint .kot-settings-card-arrow { color: #10B48F; }
@media (max-width: 480px) {.bsu-page .kot-settings-body { grid-template-columns: 1fr; }
.bsu-page .kot-settings-modal { width: 95vw; }}
.bsu-page .kot-action-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 10000;
            align-items: center;
            justify-content: center;
        }
.bsu-page .kot-action-overlay.active { display: flex; }
.bsu-page .kot-action-modal {
            background: var(--card-bg);
            border-radius: 20px;
            width: 580px;
            max-width: 90vw;
            box-shadow: 0 32px 100px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08);
            font-family: 'Inter', sans-serif;
            overflow: hidden;
            animation: bsu-kotModalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
.bsu-page .kot-action-modal-header {
            padding: 28px 32px 0;
            display: flex;
            align-items: center;
            gap: 16px;
        }
.bsu-page .kot-action-modal-header-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
.bsu-page .kot-action-modal-header-icon svg {
            width: 26px;
            height: 26px;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
.bsu-page .kot-action-modal-header-icon.void-icon {
            background: rgba(255, 111, 146, 0.12);
        }
.bsu-page .kot-action-modal-header-icon.void-icon svg { stroke: #FF6F92; }
.bsu-page .kot-action-modal-header-icon.kitchen-icon {
            background: rgba(65, 133, 244, 0.12);
        }
.bsu-page .kot-action-modal-header-icon.kitchen-icon svg { stroke: #4185F4; }
.bsu-page .kot-action-modal-header h3 {
            font-size: 22px;
            font-weight: 800;
            color: var(--text-primary);
            margin: 0;
            letter-spacing: -0.3px;
        }
.bsu-page .kot-action-modal-body {
            padding: 24px 32px 28px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
.bsu-page .kot-action-label {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-muted);
            font-family: 'Inter', sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
.bsu-page .kot-action-textarea {
            width: 100%;
            min-height: 120px;
            border: 1.5px solid var(--border-color);
            border-radius: 12px;
            padding: 16px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            background: var(--input-bg);
            color: var(--text-primary);
            outline: none;
            box-sizing: border-box;
            resize: vertical;
            transition: border-color 0.15s;
        }
.bsu-page .kot-action-textarea:focus { border-color: #4185F4; box-shadow: 0 0 0 3px rgba(65, 133, 244, 0.1); }
.bsu-page .kot-action-textarea::placeholder { color: var(--text-muted); }
.bsu-page .kot-action-checkboxes {
            display: flex;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
            padding: 4px 0;
        }
.bsu-page .kot-action-checkbox {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            padding: 8px 14px;
            border-radius: 10px;
            background: var(--input-bg);
            border: 1.5px solid var(--border-color);
            transition: all 0.15s;
        }
.bsu-page .kot-action-checkbox:hover { border-color: #4185F4; }
.bsu-page .kot-action-checkbox input[type="checkbox"] {
            width: 20px;
            height: 20px;
            border-radius: 6px;
            accent-color: #4185F4;
            cursor: pointer;
        }
.bsu-page .kot-action-footer {
            display: flex;
            gap: 14px;
            padding: 20px 32px 28px;
            border-top: 1.5px solid var(--border-color);
        }
.bsu-page .kot-action-footer button {
            flex: 1;
            height: 56px;
            border-radius: 14px;
            font-size: 16px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .kot-action-close-btn {
            background: var(--card-bg);
            color: var(--text-primary);
            border: 1.5px solid var(--border-color);
        }
.bsu-page .kot-action-close-btn:hover { background: var(--input-bg); border-color: var(--text-muted); }
.bsu-page .kot-action-submit-btn {
            background: #4185F4;
            color: #fff;
            border: none;
            box-shadow: 0 4px 14px rgba(65, 133, 244, 0.3);
        }
.bsu-page .kot-action-submit-btn:hover { background: #3070d9; box-shadow: 0 6px 20px rgba(65, 133, 244, 0.4); }
.bsu-page .kot-action-submit-btn.void-submit {
            background: #FF6F92;
            box-shadow: 0 4px 14px rgba(255, 111, 146, 0.3);
        }
.bsu-page .kot-action-submit-btn.void-submit:hover { background: #e85c7f; box-shadow: 0 6px 20px rgba(255, 111, 146, 0.4); }
.bsu-page .kot-toast {
            position: fixed;
            top: 24px;
            right: 24px;
            z-index: 10001;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 18px 24px;
            border-radius: 14px;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 12px 40px rgba(0,0,0,0.15);
            transform: translateX(120%);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            max-width: 420px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
.bsu-page .kot-toast.active { transform: translateX(0); }
.bsu-page .kot-toast-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
.bsu-page .kot-toast-icon svg {
            width: 22px;
            height: 22px;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
.bsu-page .kot-toast.success {
            background: rgba(16, 180, 143, 0.1);
            border: 1.5px solid rgba(16, 180, 143, 0.3);
            color: #10B48F;
        }
.bsu-page .kot-toast.success .kot-toast-icon { background: rgba(16, 180, 143, 0.15); }
.bsu-page .kot-toast.success .kot-toast-icon svg { stroke: #10B48F; }
.bsu-page .kot-toast.error {
            background: rgba(255, 111, 146, 0.1);
            border: 1.5px solid rgba(255, 111, 146, 0.3);
            color: #FF6F92;
        }
.bsu-page .kot-toast.error .kot-toast-icon { background: rgba(255, 111, 146, 0.15); }
.bsu-page .kot-toast.error .kot-toast-icon svg { stroke: #FF6F92; }
.bsu-page .change-qty-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.45);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            z-index: 10000;
            align-items: flex-start;
            justify-content: center;
            padding-top: 60px;
        }
.bsu-page .change-qty-overlay.active { display: flex; }
.bsu-page .change-qty-modal {
            background: var(--card-bg);
            border-radius: 20px;
            width: 860px;
            max-width: 94vw;
            box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.06);
            font-family: 'Inter', sans-serif;
            overflow: hidden;
            animation: bsu-kotModalIn 0.25s ease;
        }
.bsu-page .change-qty-header {
            padding: 28px 32px 20px;
            border-bottom: 1px solid var(--border-color);
        }
.bsu-page .change-qty-header h3 {
            font-size: 22px;
            font-weight: 800;
            color: var(--text-primary);
            margin: 0;
            letter-spacing: -0.3px;
        }
.bsu-page .change-qty-body {
            padding: 24px 32px 28px;
            display: flex;
            flex-direction: column;
            gap: 22px;
        }
.bsu-page .change-qty-item-row {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }
.bsu-page .change-qty-item-field {
            display: flex;
            align-items: stretch;
            border: 1.5px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            flex: 1;
            min-width: 200px;
        }
.bsu-page .change-qty-item-label {
            padding: 0 18px;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-muted);
            background: var(--input-bg);
            border-right: 1.5px solid var(--border-color);
            white-space: nowrap;
            font-family: 'Inter', sans-serif;
        }
.bsu-page .change-qty-item-input {
            flex: 1;
            padding: 14px 18px;
            border: none;
            outline: none;
            font-size: 14px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            background: var(--card-bg);
            color: var(--text-primary);
        }
.bsu-page .change-qty-controls {
            display: flex;
            align-items: center;
            gap: 0;
            border-radius: 12px;
            overflow: hidden;
            border: 1.5px solid var(--border-color);
        }
.bsu-page .change-qty-btn {
            width: 60px;
            height: 60px;
            border: none;
            cursor: pointer;
            font-size: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            font-family: 'Inter', sans-serif;
        }
.bsu-page .change-qty-btn.plus {
            background: #10B48F;
            color: #fff;
        }
.bsu-page .change-qty-btn.plus:hover { background: #0ea07d; }
.bsu-page .change-qty-btn.minus {
            background: #FF6F92;
            color: #fff;
        }
.bsu-page .change-qty-btn.minus:hover { background: #e85c7f; }
.bsu-page .change-qty-value {
            width: 70px;
            height: 60px;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--card-bg);
            border: none;
            outline: none;
            padding: 0;
        }
.bsu-page .change-qty-remove-btn {
            padding: 0 22px;
            height: 60px;
            border-radius: 12px;
            border: 1.5px solid #FF6F92;
            background: rgba(255, 111, 146, 0.08);
            color: #FF6F92;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.15s;
        }
.bsu-page .change-qty-remove-btn:hover { background: rgba(255, 111, 146, 0.15); }
.bsu-page .change-qty-comment-section {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
.bsu-page .change-qty-comment-label {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
        }
.bsu-page .change-qty-comment-select {
            width: 100%;
            padding: 14px 18px;
            border: 1.5px solid var(--border-color);
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            background: var(--input-bg);
            color: var(--text-primary);
            outline: none;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            padding-right: 44px;
        }
.bsu-page .change-qty-comment-select:focus { border-color: #4185F4; }
.bsu-page .change-qty-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding: 18px 32px 26px;
            border-top: 1px solid var(--border-color);
        }
.bsu-page .change-qty-footer button {
            padding: 0 32px;
            height: 60px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .change-qty-submit-btn {
            background: #4185F4;
            color: #fff;
            border: none;
            box-shadow: 0 4px 14px rgba(65, 133, 244, 0.3);
        }
.bsu-page .change-qty-submit-btn:hover { background: #3070d9; box-shadow: 0 6px 20px rgba(65, 133, 244, 0.4); }
.bsu-page .change-qty-cancel-btn {
            background: #FFC860;
            color: #1a1a1a;
            border: none;
        }
.bsu-page .change-qty-cancel-btn:hover { background: #f0b840; }
@media (max-width: 768px) {.bsu-page .change-qty-modal { width: 95vw; }
.bsu-page .change-qty-item-row { flex-direction: column; align-items: stretch; }
.bsu-page .change-qty-controls { align-self: flex-start; }
.bsu-page .change-qty-remove-btn { align-self: flex-start; }}
.bsu-page .order-item .item-delete {
            width: 40px;
            height: 40px;
            border: none;
            background: rgba(255, 111, 146, 0.1);
            border-radius: 8px;
            cursor: pointer;
            color: #ff6f92;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 0;
        }
.bsu-page .order-item .item-delete svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.bsu-page .order-item .item-price-tag {
            font-size: 12px;
            font-weight: 600;
            color: #10B48F;
            background: rgba(16, 180, 143, 0.1);
            padding: 2px 10px;
            border-radius: 20px;
            border: 1px solid rgba(16, 180, 143, 0.3);
            display: inline-block;
            margin-bottom: 8px;
        }
.bsu-page .order-item .item-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            text-decoration: underline;
            cursor: pointer;
        }
.bsu-page .order-item .item-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
.bsu-page .qty-ctrl-btn {
            width: 48px;
            height: 48px;
            border: 1.5px solid var(--border-color);
            background: var(--bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 20px;
            font-weight: 700;
            transition: all 0.15s;
            border-radius: 8px;
        }
.bsu-page .qty-ctrl-btn.minus {
            color: #ff6f92;
            border-color: rgba(255, 111, 146, 0.25);
        }
.bsu-page .qty-ctrl-btn.plus {
            color: #10B48F;
            border-color: rgba(16, 180, 143, 0.3);
        }
.bsu-page .qty-ctrl-btn:hover { background: var(--bg-secondary); }
.bsu-page .qty-ctrl-btn.plus:hover { background: rgba(16, 180, 143, 0.1); }
.bsu-page .qty-ctrl-btn.minus:hover { background: rgba(255, 111, 146, 0.08); }
.bsu-page .qty-display {
            min-width: 28px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            background: transparent;
        }
.bsu-page .order-item .item-amount {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            min-width: 60px;
            text-align: right;
            flex-shrink: 0;
            align-self: center;
        }
.bsu-page .order-item .item-more {
            width: 48px;
            height: 48px;
            border: 1.5px solid var(--border-alt);
            border-radius: 8px;
            background: var(--bg-primary);
            cursor: pointer;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 6px;
            gap: 3px;
            align-self: center;
        }
.bsu-page .order-item .item-more:hover { background: var(--bg-secondary); }
.bsu-page .express-offer-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.45);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }
.bsu-page .express-offer-overlay.active { display: flex; }
.bsu-page .express-offer-modal {
            background: var(--card-bg);
            border-radius: 16px;
            width: 780px;
            max-width: 92vw;
            box-shadow: 0 16px 56px rgba(0,0,0,0.25);
            font-family: 'Inter', sans-serif;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
.bsu-page .express-offer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 28px;
            background: #2C3038;
        }
.bsu-page .express-offer-header h3 {
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            margin: 0;
        }
.bsu-page .express-offer-header h3 span {
            color: #10B48F;
            font-weight: 700;
        }
.bsu-page .express-offer-close {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: rgba(255,255,255,0.15);
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.bsu-page .express-offer-close:hover { background: rgba(255,255,255,0.25); }
.bsu-page .express-offer-body {
            display: flex;
            padding: 24px 28px;
            gap: 24px;
        }
.bsu-page .express-offer-form {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
.bsu-page .express-offer-radios {
            display: flex;
            align-items: center;
            width: 40%;
            height: 60px;
            border-radius: 12px;
            background: var(--input-bg);
            border: 1.5px solid var(--border-color);
            overflow: hidden;
            padding: 4px;
        }
.bsu-page .express-offer-toggle-btn {
            flex: 1;
            height: 100%;
            border: none;
            border-radius: 10px;
            background: transparent;
            font-size: 16px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s;
        }
.bsu-page .express-offer-toggle-btn.active {
            background: #4185F4;
            color: #fff;
            box-shadow: 0 2px 8px rgba(65, 133, 244, 0.3);
        }
.bsu-page .express-offer-toggle-btn:not(.active):hover {
            color: var(--text-primary);
            background: var(--bg-hover);
        }
.bsu-page .express-offer-select {
            height: 48px;
            width: 100%;
            padding: 0 14px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            outline: none;
            box-sizing: border-box;
            cursor: pointer;
        }
.bsu-page .express-offer-select:focus { border-color: #4185F4; }
.bsu-page .express-offer-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            font-family: 'Inter', sans-serif;
        }
.bsu-page .express-offer-textarea {
            width: 100%;
            min-height: 100px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 14px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            background: var(--input-bg);
            color: var(--text-primary);
            outline: none;
            box-sizing: border-box;
            resize: vertical;
        }
.bsu-page .express-offer-textarea:focus { border-color: #4185F4; }
.bsu-page .express-offer-textarea::placeholder { color: var(--text-muted); }
.bsu-page .express-offer-table-wrap {
            flex: 0 0 280px;
        }
.bsu-page .express-offer-table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #f2f2f2;
            border-radius: 10px;
            overflow: hidden;
            font-family: 'Inter', sans-serif;
        }
.bsu-page .express-offer-table th {
            background: var(--bg-hover);
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            padding: 12px 14px;
            text-align: left;
            border: 1px solid #f2f2f2;
        }
.bsu-page .express-offer-table td {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            padding: 12px 14px;
            border: 1px solid #f2f2f2;
        }
.bsu-page .express-offer-table td:last-child { text-align: center; }
.bsu-page .express-offer-footer {
            display: flex;
            justify-content: flex-end;
            gap: 14px;
            padding: 20px 28px;
            background: var(--input-bg);
            border-top: 1px solid var(--border-color);
        }
.bsu-page[data-theme="dark"] .express-offer-footer { background: rgba(255,255,255,0.03); }
.bsu-page .express-offer-footer button {
            height: 48px;
            padding: 0 32px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .express-offer-add-btn {
            background: #10B48F;
            color: #fff;
            border: none;
        }
.bsu-page .express-offer-add-btn:hover { background: #0d9a7a; }
.bsu-page .express-offer-cancel-btn {
            background: var(--card-bg);
            color: #FF6F92;
            border: 2px solid #FF6F92;
        }
.bsu-page .express-offer-cancel-btn:hover { background: rgba(255, 111, 146, 0.06); }
.bsu-page .sub-items {
            margin-left: 38px;
            margin-top: 8px;
        }
.bsu-page .sub-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
        }
.bsu-page .sub-item .item-delete {
            width: 24px;
            height: 24px;
            border: none;
            background: none;
            cursor: pointer;
            color: #ff6f92;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 0;
        }
.bsu-page .sub-item .item-delete svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.bsu-page .sub-item .sub-name {
            flex: 1;
            font-size: 14px;
            color: var(--text-secondary);
            font-weight: 500;
        }
.bsu-page .item-note {
            margin-left: 48px;
            margin-top: 4px;
            font-size: 12px;
            color: #4185F4;
            font-weight: 500;
        }
.bsu-page .item-tags {
            margin-left: 48px;
            margin-top: 6px;
            display: flex;
            gap: 8px;
        }
.bsu-page .item-tag.discount { background: rgba(16, 180, 143, 0.1); color: #10B48F; }
.bsu-page .item-tag.allergen { background: rgba(255, 111, 146, 0.08); color: #ff6f92; }
.bsu-page .item-actions {
            margin-left: 48px;
            margin-top: 8px;
            display: flex;
            gap: 8px;
        }
.bsu-page .item-action-btn {
            padding: 16px 16px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
.bsu-page .item-action-btn.edit-item {
            background: var(--bg-secondary);
            color: var(--text-secondary);
        }
.bsu-page .item-action-btn.edit-item:hover { background: var(--border-color); }
.bsu-page .comment-row {
            display: flex;
            align-items: center;
            gap: 3px;
            padding: 10px 10px;
            border-top: 1px solid var(--border-light);
            flex-shrink: 0;
            height: 70px;
            box-sizing: border-box;
        }
.bsu-page .comment-btn {
            padding: 8px 10px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
            border: none;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 2px;
            flex: 0.5;
        }
.bsu-page .comment-btn .btn-label {
            font-size: 13px;
            font-weight: 700;
        }
.bsu-page .comment-btn .btn-sub {
            font-size: 10px;
            font-weight: 500;
            opacity: 0.75;
        }
.bsu-page .comment-btn.bill-comment {
            background: rgba(65, 133, 244, 0.1);
            color: #4185F4;
            border: none;
            height: 60px;
        }
.bsu-page .comment-btn.bill-comment:hover { background: rgba(65, 133, 244, 0.18); }
.bsu-page .comment-btn.kot-comment {
            background: rgba(134, 95, 194, 0.1);
            color: #6B4FCF;
            height: 60px;
        }
.bsu-page .comment-btn.kot-comment:hover { background: rgba(134, 95, 194, 0.18); }
.bsu-page .comment-offer {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding: 8px 16px;
            cursor: pointer;
            flex: 1;
            background: rgba(16, 180, 143, 0.1);
            border: none;
            border-radius: 8px;
            height: 60px;
            box-sizing: border-box;
        }
.bsu-page .comment-offer:hover { background: rgba(16, 180, 143, 0.2); }
.bsu-page .comment-offer .offer-label {
            font-size: 10px;
            font-weight: 600;
            color: #10B48F;
            text-transform: uppercase;
            margin-bottom: 6px;
        }
.bsu-page .comment-offer .offer-value {
            font-size: 15px;
            font-weight: 500;
            color: var(--text-primary);
        }
.bsu-page .comment-tax {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding: 8px 16px;
            cursor: pointer;
            flex: 1;
            background: rgba(255, 111, 146, 0.08);
            border: none;
            border-radius: 8px;
            height: 60px;
            box-sizing: border-box;
        }
.bsu-page .comment-tax:hover { background: rgba(255, 111, 146, 0.15); }
.bsu-page .comment-total {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding: 8px 16px;
            flex: 1;
            background: rgba(255, 151, 114, 0.1);
            border-radius: 8px;
            height: 60px;
            box-sizing: border-box;
        }
.bsu-page .comment-total .comment-total-label {
            display: flex;
            align-items: baseline;
            gap: 6px;
            margin-bottom: 4px;
        }
.bsu-page .comment-total .comment-total-label .ct-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-primary);
            text-transform: uppercase;
        }
.bsu-page .comment-total .comment-total-label .ct-count {
            font-size: 11px;
            font-weight: 500;
            color: #FFF3E0;
            background: var(--text-primary);
            padding: 1px 8px;
            border-radius: 10px;
        }
.bsu-page .comment-total .ct-value {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
        }
.bsu-page .comment-tax .tax-label {
            font-size: 10px;
            font-weight: 600;
            color: #ff6f92;
            text-transform: uppercase;
            margin-bottom: 6px;
        }
.bsu-page .comment-tax .tax-value {
            font-size: 15px;
            font-weight: 500;
            color: var(--text-primary);
        }
.bsu-page .category-area {
            padding: 10px 10px;
            background: var(--bg-tertiary);
            flex-shrink: 0;
        }
.bsu-page .category-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 5px;
        }
.bsu-page .cat-pill {
            height: 70px;
            border: none;
            border-radius: 10px;
            background: #3b72ca;
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 12px;
        }
.bsu-page .cat-pill:hover { background: #3265b5; }
.bsu-page .cat-pill.active {
            background: #2a5a9e;
            color: #fff;
            border: none;
        }
.bsu-page .cat-nav-card {
            height: 70px;
            border-radius: 10px;
            background: var(--nav-bg);
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            overflow: hidden;
        }
.bsu-page .cat-nav-card .nav-half {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-secondary);
            transition: all 0.15s;
        }
.bsu-page .cat-nav-card .nav-half:first-child {
            border-right: 1px solid var(--border-color);
        }
.bsu-page .cat-nav-card .nav-half:hover { background: var(--nav-hover); color: var(--text-primary); }
.bsu-page .cat-nav-card .nav-half:active { transform: scale(0.95); }
.bsu-page .cat-nav-card .nav-half.disabled { opacity: 0.35; cursor: default; }
.bsu-page .cat-nav-card .nav-half.disabled:hover { background: transparent; color: var(--text-secondary); }
.bsu-page .cat-nav-card svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.bsu-page .menu-search-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 6px 10px;
            background: var(--bg-tertiary);
            border-top: none;
            flex-shrink: 0;
        }
.bsu-page .menu-search {
            flex: 3;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 14px;
            height: 48px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--bg-primary);
            transition: all 0.2s;
        }
.bsu-page .food-grid-area {
            flex: 1;
            overflow: auto;
            padding: 10px 10px;
            position: relative;
            display: flex;
            flex-direction: column;
            background: var(--bg-tertiary);
        }
.bsu-page .food-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(4, 1fr);
            gap: 5px;
            flex: 1;
            min-height: 0;
        }
.bsu-page .food-card {
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            background: #2C3038;
            border: 1px solid #3A3F48;
            display: flex;
            flex-direction: column;
            padding: 0;
        }
.bsu-page .food-card .food-img {
            width: 100%;
            flex: 1;
            object-fit: cover;
            display: block;
            min-height: 0;
            filter: brightness(0.85);
        }
.bsu-page .food-card .food-card-body {
            padding: 8px 10px;
            display: flex;
            align-items: center;
            flex-shrink: 0;
            background: rgba(0, 0, 0, 0.40);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            margin-top: -1px;
        }
.bsu-page .food-card:hover {
            border-color: #4A4F58;
            box-shadow: 0 2px 12px rgba(0,0,0,0.2);
        }
.bsu-page .food-card:active { transform: scale(0.98); }
.bsu-page .food-card .food-price {
            position: absolute;
            top: 8px;
            left: 8px;
            display: inline-flex;
            align-items: center;
            background: rgba(16, 180, 143, 0.1);
            color: #10B48F;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            border: 1px solid rgba(16, 180, 143, 0.3);
            z-index: 2;
        }
.bsu-page .food-card .food-price.non-veg-price {
            background: rgba(255, 111, 146, 0.08);
            color: #ff6f92;
            border-color: rgba(255, 111, 146, 0.25);
        }
.bsu-page .food-card .food-name {
            font-size: 14px;
            font-weight: 600;
            color: #E8E8E8;
            line-height: 1.3;
        }
.bsu-page .food-card .food-qty-badge {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            font-size: 28px;
            font-weight: 700;
            color: #fff;
            background: rgba(0,0,0,0.45);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 3;
        }
.bsu-page .food-card.no-img {
            background: var(--food-card-noimg-bg);
            border: 1px solid var(--border-alt);
            padding: 12px 14px;
        }
.bsu-page .food-card.no-img:hover {
            background: var(--bg-primary);
            border-color: var(--border-strong);
            box-shadow: 0 2px 8px var(--shadow-color);
        }
.bsu-page .food-card.no-img .food-price {
            position: relative;
            top: auto;
            left: auto;
            margin-bottom: 8px;
            align-self: flex-start;
        }
.bsu-page .food-card.no-img .food-name {
            color: var(--food-card-noimg-name);
            flex: 1;
            display: flex;
            align-items: center;
        }
.bsu-page .food-card.no-img .food-qty-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            bottom: auto;
            left: auto;
            font-size: 12px;
            background: #4185F4;
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }
.bsu-page .food-card.no-img.out-of-stock {
            background: rgba(255, 111, 146, 0.06);
            border-color: rgba(255, 111, 146, 0.25);
            opacity: 0.7;
            pointer-events: auto;
            position: relative;
        }
.bsu-page .food-card.no-img.out-of-stock::after {
            content: 'Out of Stock';
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 111, 146, 0.12);
            color: #FF6F92;
            font-size: 11px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            padding: 4px 12px;
            border-radius: 6px;
            white-space: nowrap;
            letter-spacing: 0.3px;
            border: 1px solid rgba(255, 111, 146, 0.2);
        }
.bsu-page .food-card.no-img.out-of-stock .food-name {
            color: var(--text-muted);
            text-decoration: line-through;
        }
.bsu-page .food-card.no-img.out-of-stock .food-price {
            opacity: 0.5;
        }
.bsu-page .food-nav-card {
            border-radius: 10px;
            background: var(--nav-bg);
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            overflow: hidden;
        }
.bsu-page .food-nav-card .nav-half {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-secondary);
            transition: all 0.15s;
        }
.bsu-page .food-nav-card .nav-half:first-child {
            border-right: 1px solid var(--border-color);
        }
.bsu-page .food-nav-card .nav-half:hover { background: var(--nav-hover); color: var(--text-primary); }
.bsu-page .food-nav-card .nav-half:active { transform: scale(0.95); }
.bsu-page .food-nav-card .nav-half.disabled { opacity: 0.35; cursor: default; }
.bsu-page .food-nav-card .nav-half.disabled:hover { background: transparent; color: var(--text-secondary); }
.bsu-page .food-nav-card svg { width: 24px; height: 24px; stroke: currentColor; fill: none; }
.bsu-page .action-bar {
            display: flex;
            align-items: stretch;
            background: linear-gradient(180deg, #373C44 0%, #040911 100%);
            height: 90px;
            flex-shrink: 0;
            gap: 0;
        }
.bsu-page .action-left-group {
            width: 42%;
            display: flex;
            align-items: stretch;
            flex-shrink: 0;
            gap: 6px;
            margin: 8px 5px 8px 10px;
        }
.bsu-page .action-left-group .action-btn {
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 10px;
            flex: 1;
        }
.bsu-page .action-left-group .action-btn::after { display: none; }
.bsu-page .action-right-group {
            flex: 1;
            display: flex;
            align-items: stretch;
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 10px;
            margin: 8px 10px 8px 5px;
        }
.bsu-page .action-right-group .action-btn.estimate, .bsu-page .action-right-group .action-btn.bill-summary, .bsu-page .action-right-group .action-btn.select-server {
            flex: 1;
            min-width: 0;
        }
.bsu-page .action-expand-icon {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 12px;
            height: 12px;
            stroke: rgba(255,255,255,0.45);
            fill: none;
            stroke-width: 2;
            pointer-events: none;
        }
.bsu-page .action-right-group .action-user-group {
            flex: 2;
            border: none;
            border-radius: 0;
            margin: 0;
        }
.bsu-page .action-btn.select-server.active {
            background: var(--card-bg);
            border-radius: 0;
        }
.bsu-page .action-btn.select-server.active .action-label {
            color: var(--text-muted);
        }
.bsu-page .action-btn.select-server.active .action-value {
            color: var(--text-primary);
        }
.bsu-page .action-btn {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding: 0 20px;
            border: none;
            background: transparent;
            cursor: pointer;
            color: #fff;
            font-family: 'Inter', sans-serif;
            transition: all 0.15s;
            min-height: 48px;
            position: relative;
            flex: 1;
        }
.bsu-page .action-btn::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 1px;
            background: rgba(255,255,255,0.12);
        }
.bsu-page .action-btn .action-label {
            font-size: 11px;
            font-weight: 500;
            color: #b0b0b0;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            text-align: left;
            width: 100%;
            margin-bottom: 8px;
        }
.bsu-page .action-btn .action-value {
            font-size: 16px;
            font-weight: 700;
            color: #dadada;
            margin-top: 2px;
        }
.bsu-page .action-btn.estimate .action-label {
            font-size: 11px;
            font-weight: 500;
            color: #b0b0b0;
            letter-spacing: 0.5px;
            text-transform: none;
        }
.bsu-page .action-btn.kot {
            background: linear-gradient(180deg, #10b28a 0%, #0a8a6a 100%);
            padding: 0 20px;
            align-items: flex-start;
        }
.bsu-page .action-btn.kot:hover { background: linear-gradient(180deg, #0a8a6a 0%, #077a5c 100%); }
.bsu-page .action-btn.kot:active { background: #056B4D; }
.bsu-page .action-btn.kot .action-label {
            font-size: 11px;
            font-weight: 500;
            color: rgba(255,255,255,0.7);
            letter-spacing: 0.5px;
            text-align: left;
            width: 100%;
            margin-bottom: 8px;
        }
.bsu-page .action-btn.kot .action-value {
            font-size: 16px;
            font-weight: 700;
            color: #fff;
        }
.bsu-page .action-chat-btn {
            width: auto;
            padding: 0 16px;
            gap: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #040911;
            border: none;
            cursor: pointer;
            transition: all 0.15s;
            min-height: 48px;
            flex-shrink: 0;
            position: relative;
            font-size: 12px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: #fff;
            white-space: nowrap;
        }
.bsu-page .action-chat-btn::after {
            content: '';
            position: absolute;
            right: 0;
            top: 16px;
            bottom: 16px;
            width: 1px;
            background: rgba(255,255,255,0.08);
        }
.bsu-page .action-chat-btn:hover { background: #1a1f28; }
.bsu-page .action-chat-btn:active { background: #373C44; transform: scale(0.96); }
.bsu-page .action-chat-btn svg { width: 20px; height: 20px; stroke: #4185F4; fill: none; }
.bsu-page .action-chat-btn .chat-badge {
            position: absolute;
            top: 12px;
            right: 10px;
            width: 8px;
            height: 8px;
            background: #ff6f92;
            border-radius: 50%;
        }
.bsu-page .chat-panel-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.4);
            z-index: 999;
        }
.bsu-page .chat-panel-overlay.active { display: block; }
.bsu-page .chat-panel {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 380px;
            height: 500px;
            background: var(--card-bg);
            border-radius: 16px 16px 0 0;
            box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
            display: flex;
            flex-direction: column;
            z-index: 1000;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
.bsu-page .chat-panel.active { transform: translateY(0); }
.bsu-page .chat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-light);
            flex-shrink: 0;
        }
.bsu-page .chat-header-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
        }
.bsu-page .chat-close {
            width: 32px;
            height: 32px;
            border: none;
            background: var(--bg-secondary);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--text-secondary);
        }
.bsu-page .chat-close:hover { background: var(--border-color); }
.bsu-page .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 16px 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
.bsu-page .chat-msg {
            max-width: 80%;
            padding: 10px 14px;
            border-radius: 12px;
            font-size: 13px;
            line-height: 1.4;
        }
.bsu-page .chat-msg.incoming {
            background: var(--chat-incoming-bg);
            color: var(--text-primary);
            align-self: flex-start;
            border-bottom-left-radius: 4px;
        }
.bsu-page .chat-msg.outgoing {
            background: #4185F4;
            color: #fff;
            align-self: flex-end;
            border-bottom-right-radius: 4px;
        }
.bsu-page .chat-msg .msg-time {
            font-size: 10px;
            opacity: 0.6;
            margin-top: 4px;
        }
.bsu-page .chat-input-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            border-top: 1px solid var(--border-light);
            flex-shrink: 0;
        }
.bsu-page .chat-input {
            flex: 1;
            height: 40px;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 0 16px;
            font-size: 13px;
            font-family: 'Inter', sans-serif;
            outline: none;
            background: var(--input-bg);
            color: var(--text-primary);
        }
.bsu-page .chat-input:focus { border-color: #4185F4; }
.bsu-page .chat-send-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #4185F4;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
.bsu-page .chat-send-btn:hover { background: #2A6AD6; }
.bsu-page .chat-send-btn svg { width: 18px; height: 18px; stroke: #fff; fill: none; }
.bsu-page .action-info-btn {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 20px;
            cursor: pointer;
            background: #040911;
            border: none;
            font-family: 'Inter', sans-serif;
            text-align: left;
            transition: all 0.15s;
            min-height: 48px;
            position: relative;
            flex: 1;
        }
.bsu-page .action-info-btn .info-label {
            font-size: 11px;
            font-weight: 500;
            color: #b0b0b0;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
.bsu-page .action-user-group {
            display: flex;
            align-items: stretch;
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 10px;
            margin: 8px 10px;
            overflow: hidden;
            flex: 1;
        }
.bsu-page .action-user-btn {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 20px;
            cursor: pointer;
            background: transparent;
            border: none;
            font-family: 'Inter', sans-serif;
            text-align: left;
            transition: all 0.15s;
            min-height: 48px;
            flex: 1;
        }
.bsu-page .action-user-btn:hover { background: rgba(255,255,255,0.05); }
.bsu-page .action-user-btn .user-name {
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            text-decoration: underline;
        }
.bsu-page .action-user-btn .user-phone {
            font-size: 12px;
            color: rgba(255,255,255,0.5);
            margin-top: 6px;
        }
.bsu-page .action-group-icon {
            width: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-left: 1px solid rgba(255,255,255,0.12);
            background: transparent;
            border-top: none;
            border-bottom: none;
            border-right: none;
            transition: all 0.15s;
            flex-shrink: 0;
        }
.bsu-page .action-group-icon:hover { background: rgba(255,255,255,0.05); }
.bsu-page .action-group-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; }
.bsu-page .action-group-icon.delete-icon svg { stroke: #ff6f92; }
.bsu-page .action-more-btn {
            width: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-left: 1px solid rgba(255,255,255,0.12);
            background: transparent;
            border-top: none;
            border-bottom: none;
            border-right: none;
            transition: all 0.15s;
            flex-shrink: 0;
            position: relative;
            flex-direction: column;
            gap: 2px;
        }
.bsu-page .action-more-btn:hover { background: rgba(255,255,255,0.05); }
.bsu-page .action-more-btn svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.bsu-page .action-more-btn span {
            font-size: 9px;
            font-weight: 600;
            color: rgba(255,255,255,0.7);
            font-family: 'Inter', sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
.bsu-page .customer-more-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.4);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }
.bsu-page .customer-more-overlay.active { display: flex; }
.bsu-page .customer-more-modal {
            background: var(--card-bg);
            border-radius: 16px;
            width: 520px;
            max-width: 90vw;
            box-shadow: 0 12px 40px rgba(0,0,0,0.2);
            font-family: 'Inter', sans-serif;
            overflow: hidden;
        }
.bsu-page .customer-more-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-color);
        }
.bsu-page .customer-more-header h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }
.bsu-page .customer-more-close {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.bsu-page .customer-more-close:hover { background: var(--border-color); }
.bsu-page .customer-more-body {
            padding: 24px;
        }
.bsu-page .customer-more-row {
            display: flex;
            align-items: center;
            padding: 14px 0;
            border-bottom: 1px solid var(--border-color);
            gap: 12px;
        }
.bsu-page .customer-more-row:last-child { border-bottom: none; }
.bsu-page .customer-more-label {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            min-width: 180px;
        }
.bsu-page .customer-more-value {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-secondary);
            flex: 1;
        }
.bsu-page .customer-more-footer {
            display: flex;
            justify-content: flex-end;
            padding: 16px 24px;
            border-top: 1px solid var(--border-color);
        }
.bsu-page .customer-more-close-btn {
            height: 44px;
            padding: 0 28px;
            border-radius: 10px;
            border: none;
            background: #FFC860;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .customer-more-close-btn:hover { background: #e8b550; }
.bsu-page .action-delete-btn {
            width: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            border-left: 1px solid rgba(255,255,255,0.12);
            cursor: pointer;
            transition: all 0.15s;
            min-height: 48px;
            flex-shrink: 0;
        }
.bsu-page .action-delete-btn:hover { background: rgba(255,255,255,0.05); }
.bsu-page .action-delete-btn:active { transform: scale(0.96); }
.bsu-page .action-delete-btn svg { width: 22px; height: 22px; stroke: #ff6f92; fill: none; }
.bsu-page .delete-confirm-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.45);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }
.bsu-page .delete-confirm-overlay.active { display: flex; }
.bsu-page .delete-confirm-modal {
            background: var(--card-bg);
            border-radius: 16px;
            width: 420px;
            padding: 32px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.2);
            text-align: center;
            font-family: 'Inter', sans-serif;
        }
.bsu-page .delete-confirm-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(255, 111, 146, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }
.bsu-page .delete-confirm-icon svg {
            width: 28px;
            height: 28px;
            stroke: #FF6F92;
            fill: none;
            stroke-width: 2;
        }
.bsu-page .delete-confirm-modal h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 8px;
        }
.bsu-page .delete-confirm-modal p {
            font-size: 14px;
            color: var(--text-secondary);
            margin: 0 0 24px;
        }
.bsu-page .delete-confirm-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
        }
.bsu-page .delete-confirm-actions button {
            height: 48px;
            padding: 0 28px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            border: none;
        }
.bsu-page .delete-confirm-yes {
            background: #FF6F92;
            color: #fff;
        }
.bsu-page .delete-confirm-yes:hover { background: #e8587c; }
.bsu-page .delete-confirm-no {
            background: var(--input-bg);
            color: var(--text-primary);
            border: 1px solid var(--border-color) !important;
        }
.bsu-page .delete-confirm-no:hover { background: var(--border-color); }
.bsu-page .customer-search-panel-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.4);
            z-index: 1100;
        }
.bsu-page .customer-search-panel-overlay.active { display: block; }
.bsu-page .customer-search-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 400px;
            height: 100%;
            background: var(--card-bg);
            box-shadow: -4px 0 24px rgba(0,0,0,0.15);
            z-index: 1101;
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }
.bsu-page .customer-search-panel.active { transform: translateX(0); }
.bsu-page .customer-search-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-color);
        }
.bsu-page .customer-search-panel-header h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
            font-family: 'Inter', sans-serif;
        }
.bsu-page .customer-search-panel-close {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.bsu-page .customer-search-panel-close:hover { background: var(--border-color); }
.bsu-page .customer-search-box {
            padding: 16px 24px;
            border-bottom: 1px solid var(--border-color);
        }
.bsu-page .customer-search-box input {
            width: 100%;
            height: 60px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 16px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            background: var(--input-bg);
            color: var(--text-primary);
            outline: none;
            box-sizing: border-box;
        }
.bsu-page .customer-search-box input:focus { border-color: #4185F4; }
.bsu-page .customer-search-results {
            flex: 1;
            overflow-y: auto;
            padding: 8px 0;
        }
.bsu-page .customer-search-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 24px;
            cursor: pointer;
            transition: background 0.12s;
            border-bottom: 1px solid var(--border-color);
        }
.bsu-page .customer-search-item:hover { background: rgba(65, 133, 244, 0.06); }
.bsu-page .customer-search-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4185F4, #10B48F);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            flex-shrink: 0;
            font-family: 'Inter', sans-serif;
        }
.bsu-page .customer-search-details {
            flex: 1;
            min-width: 0;
        }
.bsu-page .customer-search-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
        }
.bsu-page .customer-search-phone {
            font-size: 12px;
            color: var(--text-secondary);
            font-family: 'Inter', sans-serif;
            margin-top: 2px;
        }
.bsu-page .customer-no-results {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 48px 24px;
            gap: 16px;
            text-align: center;
        }
.bsu-page .customer-no-results.active { display: flex; }
.bsu-page .customer-no-results-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(65, 133, 244, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
        }
.bsu-page .customer-no-results-icon svg {
            width: 28px; height: 28px;
            stroke: #4185F4; fill: none; stroke-width: 2;
        }
.bsu-page .customer-no-results p {
            font-size: 14px;
            color: var(--text-secondary);
            margin: 0;
            font-family: 'Inter', sans-serif;
        }
.bsu-page .customer-add-new-btn {
            height: 44px;
            padding: 0 24px;
            border: none;
            border-radius: 10px;
            background: #4185F4;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.15s;
        }
.bsu-page .customer-add-new-btn:hover { background: #3070d9; }
.bsu-page .customer-add-new-btn svg {
            width: 18px; height: 18px;
            stroke: #fff; fill: none; stroke-width: 2;
        }
.bsu-page .add-customer-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.45);
            z-index: 9999;
            align-items: flex-start;
            justify-content: center;
            padding-top: 60px;
        }
.bsu-page .add-customer-overlay.active { display: flex; }
.bsu-page .add-customer-modal {
            background: var(--card-bg);
            border-radius: 20px;
            width: 860px;
            max-width: 92vw;
            box-shadow: 0 16px 56px rgba(0,0,0,0.25);
            font-family: 'Inter', sans-serif;
            overflow: visible;
        }
.bsu-page .add-customer-modal-header {
            padding: 28px 40px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
.bsu-page .add-customer-modal-header h3 {
            font-size: 22px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }
.bsu-page .add-customer-modal-close {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 22px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }
.bsu-page .add-customer-modal-close:hover { background: var(--border-color); }
.bsu-page .add-customer-stepper {
            display: flex;
            align-items: center;
            padding: 28px 40px;
        }
.bsu-page .add-customer-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            z-index: 1;
        }
.bsu-page .add-customer-step-circle {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 2px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-secondary);
            background: var(--card-bg);
        }
.bsu-page .add-customer-step.completed .add-customer-step-circle, .bsu-page .add-customer-step.active .add-customer-step-circle {
            background: #4185F4;
            border-color: #4185F4;
            color: #fff;
        }
.bsu-page .add-customer-step-circle svg {
            width: 20px; height: 20px;
            stroke: #fff; fill: none; stroke-width: 2.5;
        }
.bsu-page .add-customer-step-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            white-space: nowrap;
        }
.bsu-page .add-customer-step.completed .add-customer-step-label, .bsu-page .add-customer-step.active .add-customer-step-label {
            color: #4185F4;
        }
.bsu-page .add-customer-step-line {
            flex: 1;
            height: 3px;
            background: var(--border-color);
            margin: 0 -4px;
            margin-bottom: 28px;
        }
.bsu-page .add-customer-step-line.completed {
            background: #4185F4;
        }
.bsu-page .add-customer-body {
            padding: 8px 40px 36px;
            min-height: 160px;
        }
.bsu-page .add-customer-step-content {
            display: none;
        }
.bsu-page .add-customer-step-content.active { display: block; }
.bsu-page .add-customer-form-row {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
        }
.bsu-page .add-customer-field {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
.bsu-page .add-customer-field.small { flex: 0 0 140px; }
.bsu-page .add-customer-field label {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
        }
.bsu-page .add-customer-field input, .bsu-page .add-customer-field select {
            height: 48px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            background: var(--input-bg);
            color: var(--text-primary);
            outline: none;
            box-sizing: border-box;
            width: 100%;
        }
.bsu-page .add-customer-field input:focus, .bsu-page .add-customer-field select:focus { border-color: #4185F4; }
.bsu-page .add-customer-field input::placeholder { color: var(--text-muted); }
.bsu-page .custom-date-wrap {
            position: relative;
        }
.bsu-page .custom-date-trigger {
            height: 48px;
            width: 100%;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px 0 44px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            background: var(--input-bg);
            color: var(--text-primary);
            outline: none;
            box-sizing: border-box;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: border-color 0.15s;
            user-select: none;
        }
.bsu-page .custom-date-trigger.has-value { color: var(--text-primary); }
.bsu-page .custom-date-trigger:not(.has-value) { color: var(--text-muted); }
.bsu-page .custom-date-wrap.open .custom-date-trigger { border-color: #4185F4; }
.bsu-page .custom-date-wrap.anniversary.open .custom-date-trigger { border-color: #FF6F92; }
.bsu-page .custom-date-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            stroke: #4185F4;
            fill: none;
            stroke-width: 2;
            pointer-events: none;
        }
.bsu-page .custom-date-wrap.anniversary .custom-date-icon { stroke: #FF6F92; }
.bsu-page .custom-calendar {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            width: 320px;
            background: var(--card-bg);
            border-radius: 16px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.2);
            z-index: 10001;
            font-family: 'Inter', sans-serif;
            overflow: hidden;
            border: 1px solid var(--border-color);
        }
.bsu-page .custom-date-wrap.open .custom-calendar { display: block; }
.bsu-page .custom-cal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px 12px;
            background: #4185F4;
            color: #fff;
        }
.bsu-page .custom-date-wrap.anniversary .custom-cal-header { background: #FF6F92; }
.bsu-page .custom-cal-header-title {
            font-size: 16px;
            font-weight: 700;
        }
.bsu-page .custom-cal-nav {
            display: flex;
            gap: 4px;
        }
.bsu-page .custom-cal-nav-btn {
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 8px;
            background: rgba(255,255,255,0.2);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s;
        }
.bsu-page .custom-cal-nav-btn:hover { background: rgba(255,255,255,0.35); }
.bsu-page .custom-cal-nav-btn svg {
            width: 16px; height: 16px;
            stroke: #fff; fill: none; stroke-width: 2.5;
        }
.bsu-page .custom-cal-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            padding: 12px 16px 4px;
            gap: 0;
        }
.bsu-page .custom-cal-weekday {
            text-align: center;
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            padding: 4px 0;
            letter-spacing: 0.5px;
        }
.bsu-page .custom-cal-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            padding: 4px 16px 12px;
            gap: 2px;
        }
.bsu-page .custom-cal-day {
            height: 38px;
            border: none;
            border-radius: 10px;
            background: transparent;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.12s;
        }
.bsu-page .custom-cal-day:hover { background: rgba(65, 133, 244, 0.08); }
.bsu-page .custom-date-wrap.anniversary .custom-cal-day:hover { background: rgba(255, 111, 146, 0.08); }
.bsu-page .custom-cal-day.other-month {
            color: var(--text-muted);
            opacity: 0.4;
        }
.bsu-page .custom-cal-day.today {
            background: rgba(65, 133, 244, 0.1);
            color: #4185F4;
            font-weight: 700;
        }
.bsu-page .custom-date-wrap.anniversary .custom-cal-day.today {
            background: rgba(255, 111, 146, 0.1);
            color: #FF6F92;
        }
.bsu-page .custom-cal-day.selected {
            background: #4185F4 !important;
            color: #fff !important;
            font-weight: 700;
        }
.bsu-page .custom-date-wrap.anniversary .custom-cal-day.selected {
            background: #FF6F92 !important;
        }
.bsu-page .custom-cal-footer {
            display: flex;
            justify-content: space-between;
            padding: 10px 20px 14px;
            border-top: 1px solid var(--border-color);
        }
.bsu-page .custom-cal-footer-btn {
            border: none;
            background: transparent;
            font-size: 13px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            padding: 6px 14px;
            border-radius: 8px;
            transition: all 0.12s;
        }
.bsu-page .custom-cal-clear {
            color: #FF6F92;
        }
.bsu-page .custom-cal-clear:hover { background: rgba(255, 111, 146, 0.08); }
.bsu-page .custom-cal-today {
            color: #4185F4;
        }
.bsu-page .custom-cal-today:hover { background: rgba(65, 133, 244, 0.08); }
.bsu-page .custom-date-wrap.anniversary .custom-cal-today { color: #FF6F92; }
.bsu-page .custom-date-wrap.anniversary .custom-cal-today:hover { background: rgba(255, 111, 146, 0.08); }
.bsu-page .add-customer-checkbox {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
        }
.bsu-page .add-customer-checkbox input[type="checkbox"] {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            accent-color: #4185F4;
            cursor: pointer;
        }
.bsu-page .add-customer-blacklist-reason {
            display: none;
            margin-top: 4px;
            margin-left: 34px;
        }
.bsu-page .add-customer-blacklist-reason.active { display: block; }
.bsu-page .add-customer-blacklist-reason input {
            width: 100%;
            height: 48px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            background: var(--input-bg);
            color: var(--text-primary);
            outline: none;
            box-sizing: border-box;
        }
.bsu-page .add-customer-blacklist-reason input:focus { border-color: #4185F4; }
.bsu-page .add-customer-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding: 20px 40px;
            border-top: 1px solid var(--border-color);
        }
.bsu-page .add-customer-footer button {
            height: 48px;
            padding: 0 32px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            border: none;
            transition: all 0.15s;
        }
.bsu-page .add-customer-cancel-btn {
            background: rgba(255, 111, 146, 0.1);
            color: #FF6F92;
            border: 1px solid #FF6F92 !important;
        }
.bsu-page .add-customer-cancel-btn:hover { background: rgba(255, 111, 146, 0.2); }
.bsu-page .add-customer-next-btn {
            background: #4185F4;
            color: #fff;
        }
.bsu-page .add-customer-next-btn:hover { background: #3070d9; }
.bsu-page .add-customer-back-btn {
            background: var(--input-bg);
            color: var(--text-primary);
            border: 1px solid var(--border-color) !important;
        }
.bsu-page .add-customer-back-btn:hover { background: var(--border-color); }
.bsu-page .action-btn.select-server {
            position: relative;
        }
.bsu-page .action-btn.select-server .action-label svg {
            transition: transform 0.2s ease;
        }
.bsu-page .action-btn.select-server.active .action-label svg {
            transform: rotate(180deg);
        }
.bsu-page .server-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 90px;
            background: rgba(0,0,0,0.4);
            z-index: 998;
        }
.bsu-page .server-modal-overlay.active { display: block; }
.bsu-page .server-modal {
            display: none;
            position: absolute;
            bottom: 100%;
            left: 0;
            width: 380px;
            max-height: 740px;
            background: var(--modal-bg);
            border-radius: 16px 16px 0 0;
            flex-direction: column;
            box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
            overflow: hidden;
            z-index: 999;
            margin-bottom: 0;
        }
.bsu-page .server-modal.active { display: flex; }
.bsu-page .server-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            flex-shrink: 0;
        }
.bsu-page .server-modal-header h3 {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }
.bsu-page .server-modal-close {
            width: 36px;
            height: 36px;
            border: none;
            background: none;
            cursor: pointer;
            font-size: 24px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            justify-content: center;
        }
.bsu-page .server-modal-close:hover { color: var(--text-secondary); }
.bsu-page .server-search {
            margin: 0 16px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            height: 48px;
            background: var(--bg-primary);
            transition: all 0.2s;
        }
.bsu-page .server-search:focus-within {
            border-color: #4185F4;
            background: var(--bg-primary);
            box-shadow: 0 0 0 3px rgba(74,122,255,0.08);
        }
.bsu-page .server-search svg { width: 18px; height: 18px; stroke: var(--text-muted); fill: none; flex-shrink: 0; }
.bsu-page .server-search input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            width: 100%;
            height: 48px;
        }
.bsu-page .server-search input::placeholder { color: var(--text-placeholder); }
.bsu-page .server-list {
            flex: 1;
            overflow-y: auto;
            padding: 16px 16px;
        }
.bsu-page .server-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 16px;
            border: 1px solid var(--border-light);
            border-radius: 12px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .server-item:hover { background: var(--bg-hover-alt); }
.bsu-page .server-item.active {
            background: rgba(65, 133, 244, 0.08);
            border-color: #4185F4;
        }
.bsu-page .server-item .server-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            flex-shrink: 0;
            overflow: hidden;
        }
.bsu-page .server-item .server-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
        }
.bsu-page .comment-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.3);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 1100;
            align-items: center;
            justify-content: center;
        }
.bsu-page .comment-modal-overlay.active {
            display: flex;
        }
.bsu-page .comment-modal {
            background: var(--modal-bg);
            border-radius: 16px;
            width: 460px;
            padding: 28px 28px 24px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.15);
        }
.bsu-page .comment-modal-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 20px;
        }
.bsu-page .comment-modal-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
.bsu-page .comment-modal textarea {
            width: 100%;
            height: 140px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 14px;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            resize: none;
            outline: none;
            transition: all 0.2s;
            background: var(--input-bg);
        }
.bsu-page .comment-modal textarea::placeholder {
            color: var(--text-placeholder);
        }
.bsu-page .comment-modal textarea:focus {
            border-color: #4185F4;
            box-shadow: 0 0 0 3px rgba(74,122,255,0.08);
        }
.bsu-page .comment-modal-actions {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }
.bsu-page .comment-modal-actions button {
            flex: 1;
            height: 60px;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .comment-modal-actions .comment-modal-close {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
        }
.bsu-page .comment-modal-actions .comment-modal-close:hover {
            background: var(--bg-hover-alt);
        }
.bsu-page .comment-modal-actions .comment-modal-submit {
            background: #4185F4;
            border: none;
            color: #fff;
        }
.bsu-page .comment-modal-actions .comment-modal-submit:hover {
            background: #3070DC;
        }
.bsu-page .bill-summary-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.3);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 1100;
            align-items: center;
            justify-content: center;
        }
.bsu-page .bill-summary-overlay.active {
            display: flex;
        }
.bsu-page .bill-summary-modal {
            background: var(--modal-bg);
            border-radius: 16px;
            width: 560px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.15);
            overflow: hidden;
        }
.bsu-page .bill-summary-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 28px 20px;
            border-bottom: 1px solid var(--border-alt);
        }
.bsu-page .bill-summary-header h3 {
            font-size: 22px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }
.bsu-page .bill-summary-close {
            width: 36px;
            height: 36px;
            border: none;
            background: var(--bg-secondary);
            border-radius: 8px;
            cursor: pointer;
            font-size: 24px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            justify-content: center;
        }
.bsu-page .bill-summary-close:hover { color: var(--text-secondary); }
.bsu-page .bill-summary-info {
            padding: 20px 28px 20px;
        }
.bsu-page .bill-summary-info-row {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
.bsu-page .bill-summary-info-row .bs-label {
            width: 140px;
            font-size: 14px;
            color: var(--text-muted);
        }
.bsu-page .bill-summary-info-row .bs-value {
            width: 100px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: right;
        }
.bsu-page .bill-summary-info-row .bs-label-right {
            width: 140px;
            font-size: 14px;
            color: #10B48F;
            margin-left: auto;
        }
.bsu-page .bill-summary-info-row .bs-value-right {
            width: 80px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: right;
        }
.bsu-page .bill-summary-table {
            margin: 0 28px 20px;
            border: 1px solid var(--border-alt);
            border-radius: 10px;
            overflow: hidden;
        }
.bsu-page .bill-summary-table table {
            width: 100%;
            border-collapse: collapse;
        }
.bsu-page .bill-summary-table thead th {
            background: var(--table-header-bg);
            padding: 12px 16px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-muted);
            text-align: left;
            border-bottom: 1px solid var(--border-alt);
        }
.bsu-page .bill-summary-table thead th:nth-child(3), .bsu-page .bill-summary-table thead th:nth-child(4) {
            text-align: center;
        }
.bsu-page .bill-summary-table tbody td {
            padding: 14px 16px;
            font-size: 14px;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-light);
        }
.bsu-page .bill-summary-table tbody td:nth-child(3), .bsu-page .bill-summary-table tbody td:nth-child(4) {
            text-align: center;
        }
.bsu-page .bill-summary-table tbody tr:last-child td {
            border-bottom: none;
        }
.bsu-page .bill-summary-footer {
            background: var(--table-header-bg);
            padding: 20px 28px;
        }
.bsu-page .bill-summary-footer-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }
.bsu-page .bill-summary-footer-row:last-child {
            margin-bottom: 0;
        }
.bsu-page .bill-summary-footer-row .bsf-label {
            font-size: 14px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 8px;
        }
.bsu-page .bill-summary-footer-row .bsf-value {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
.bsu-page .bill-summary-footer-row .bsf-badge {
            background: var(--border-alt);
            color: var(--text-primary);
            font-size: 12px;
            font-weight: 600;
            padding: 2px 10px;
            border-radius: 20px;
        }
.bsu-page .bill-summary-footer-row .bsf-value.discount {
            color: #10B48F;
        }
.bsu-page .bill-summary-footer-row.total-amount {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--border-alt);
        }
.bsu-page .bill-summary-footer-row.total-amount .bsf-label {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
        }
.bsu-page .bill-summary-footer-row.total-amount .bsf-value {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
        }
.bsu-page .offer-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.3);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 1100;
            align-items: center;
            justify-content: center;
        }
.bsu-page .offer-modal-overlay.active { display: flex; }
.bsu-page .offer-modal {
            background: var(--card-bg);
            border-radius: 20px;
            width: 680px;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            overflow: hidden;
        }
.bsu-page .offer-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 28px 28px 20px;
            border-bottom: 1px solid var(--bg-secondary);
            flex-shrink: 0;
        }
.bsu-page .offer-modal-header-left h3 {
            font-size: 22px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }
.bsu-page .offer-modal-header-left .offer-date {
            font-size: 13px;
            color: var(--text-muted);
            margin-top: 4px;
        }
.bsu-page .offer-modal-header-right {
            display: flex;
            gap: 10px;
        }
.bsu-page .offer-header-btn {
            padding: 10px 20px;
            border: 1.5px solid transparent;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .offer-header-btn.express {
            background: rgba(65, 133, 244, 0.1);
            color: #4185F4;
            border-color: #4185F4;
        }
.bsu-page .offer-header-btn.express:hover { background: rgba(65, 133, 244, 0.18); }
.bsu-page .offer-header-btn.staff {
            background: rgba(16, 180, 143, 0.1);
            color: #10B48F;
            border-color: #10B48F;
        }
.bsu-page .offer-header-btn.staff:hover { background: rgba(16, 180, 143, 0.18); }
.bsu-page .offer-search-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 20px 28px;
            background: var(--bg-hover);
            border-bottom: 1px solid var(--bg-secondary);
            flex-shrink: 0;
        }
.bsu-page .offer-search-input {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            height: 48px;
            background: var(--card-bg);
            transition: all 0.2s;
        }
.bsu-page .offer-search-input:focus-within {
            border-color: #4185F4;
            box-shadow: 0 0 0 3px rgba(74,122,255,0.08);
        }
.bsu-page .offer-search-input svg { width: 18px; height: 18px; stroke: var(--text-muted); fill: none; flex-shrink: 0; }
.bsu-page .offer-search-input input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            height: 48px;
        }
.bsu-page .offer-search-input input::placeholder { color: var(--text-placeholder); }
.bsu-page .offer-pos-select {
            height: 48px;
            padding: 0 14px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--card-bg);
            cursor: pointer;
            min-width: 85px;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23373C44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 32px;
        }
.bsu-page .offer-apply-btn {
            height: 48px;
            padding: 0 28px;
            background: linear-gradient(180deg, #373C44 0%, #1a1f26 100%);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .offer-apply-btn:hover { opacity: 0.9; }
.bsu-page .offer-list {
            flex: 1;
            overflow-y: auto;
            padding: 16px 28px;
        }
.bsu-page .offer-card {
            border: 1.5px solid var(--border-alt);
            border-radius: 12px;
            padding: 18px 20px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }
.bsu-page .offer-card:hover {
            border-color: var(--border-strong);
            background: var(--bg-hover);
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
.bsu-page .offer-card.selected {
            border-color: #4185F4;
            border-width: 2px;
            background: rgba(65, 133, 244, 0.05);
            box-shadow: 0 0 0 3px rgba(65,133,244,0.08);
        }
.bsu-page .offer-card.selected .offer-card-title {
            color: #4185F4;
        }
.bsu-page .offer-card-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 10px;
            line-height: 1.3;
        }
.bsu-page .offer-card-tags {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
.bsu-page .offer-tag {
            padding: 5px 12px;
            background: var(--bg-secondary);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: 0.2px;
        }
.bsu-page .offer-more-btn {
            padding: 5px 14px;
            background: var(--text-primary);
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .offer-more-btn:hover { background: #2C3038; }
.bsu-page .offer-card-details {
            display: none;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--bg-secondary);
            animation: bsu-offerDetailSlide 0.2s ease;
        }
@keyframes bsu-offerDetailSlide {
            from { opacity: 0; transform: translateY(-6px); }
            to { opacity: 1; transform: translateY(0); }
        }
.bsu-page .offer-card-details.active { display: block; }
.bsu-page .offer-detail-tags {
            display: flex;
            gap: 8px;
            margin-bottom: 14px;
        }
.bsu-page .offer-detail-tag {
            padding: 5px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            color: #fff;
        }
.bsu-page .offer-detail-tag.table { background: #10B48F; }
.bsu-page .offer-detail-tag.delivery { background: #4185F4; }
.bsu-page .offer-detail-tag.online { background: #373C44; }
.bsu-page .offer-detail-schedule {
            display: flex;
            align-items: flex-start;
            gap: 24px;
            font-size: 13px;
            color: var(--text-primary);
            background: var(--bg-hover);
            padding: 12px 16px;
            border-radius: 10px;
        }
.bsu-page .offer-detail-time {
            display: flex;
            align-items: center;
            gap: 10px;
        }
.bsu-page .offer-detail-time svg { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; }
.bsu-page .offer-detail-time-values {
            display: flex;
            flex-direction: column;
            gap: 2px;
            font-weight: 500;
        }
.bsu-page .offer-detail-days {
            display: flex;
            align-items: center;
            gap: 10px;
        }
.bsu-page .offer-detail-days svg { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; }
.bsu-page .offer-detail-days-list {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
.bsu-page .offer-detail-days-row {
            display: flex;
            gap: 4px;
            font-weight: 500;
        }
.bsu-page .offer-detail-days-row span {
            padding: 0 4px;
            border-right: 1px solid var(--border-color);
        }
.bsu-page .offer-detail-days-row span:last-child { border-right: none; }
.bsu-page .offer-detail-alldate {
            color: var(--text-muted);
            font-size: 12px;
        }
.bsu-page .offer-modal-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 28px;
            border-top: 1px solid var(--border-alt);
            flex-shrink: 0;
            background: var(--card-bg);
        }
.bsu-page .offer-selected-pill {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px;
            border: 1.5px solid #ff6f92;
            border-radius: 12px;
            background: rgba(255, 111, 146, 0.06);
            transition: all 0.15s;
        }
.bsu-page .offer-selected-pill:hover { background: rgba(255, 111, 146, 0.12); }
.bsu-page .offer-selected-pill svg { width: 18px; height: 18px; fill: #ff6f92; stroke: none; }
.bsu-page .offer-selected-pill .offer-selected-text {
            font-size: 14px;
            font-weight: 600;
            color: #ff6f92;
        }
.bsu-page .offer-selected-pill .offer-selected-badge {
            background: #ff6f92;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
        }
.bsu-page .offer-close-btn {
            padding: 12px 40px;
            border: 1.5px solid var(--border-color);
            border-radius: 12px;
            background: var(--card-bg);
            font-size: 15px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .offer-close-btn:hover {
            background: var(--bg-hover-alt);
            border-color: var(--border-strong);
        }
.bsu-page .nav-tab.more-tab.active {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }
.bsu-page .more-dropdown-overlay {
            display: none;
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 890;
            background: rgba(0,0,0,0.4);
            backdrop-filter: blur(2px);
        }
.bsu-page .more-dropdown {
            display: none;
            position: absolute;
            top: 60px;
            left: 0;
            right: 0;
            background: var(--card-bg);
            border-bottom: 1px solid var(--border-alt);
            box-shadow: 0 8px 32px rgba(0,0,0,0.08);
            z-index: 895;
            padding: 20px 28px 16px;
        }
.bsu-page .more-dropdown-item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 80px;
            padding: 0 16px;
            border: 1px solid var(--border-alt);
            border-radius: 10px;
            background: var(--bg-hover);
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            text-transform: uppercase;
            letter-spacing: 0.3px;
            cursor: pointer;
            transition: all 0.15s;
            position: relative;
            text-align: center;
        }
.bsu-page .more-dropdown-item:hover {
            background: var(--bg-secondary);
            border-color: var(--border-strong);
        }
.bsu-page .more-dropdown-item.active-green {
            background: rgba(16, 180, 143, 0.1);
            border-color: #10B48F;
        }
.bsu-page .more-dropdown-item.active-yellow {
            background: rgba(255, 200, 96, 0.12);
            border-color: #E8C94A;
        }
.bsu-page .item-detail-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.3);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 1100;
            justify-content: flex-end;
        }
.bsu-page .item-detail-overlay.active { display: flex; }
.bsu-page .item-detail-modal {
            background: var(--card-bg);
            width: 80%;
            margin-left: 20%;
            height: 100%;
            box-shadow: -8px 0 40px rgba(0,0,0,0.15);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-radius: 0;
            animation: bsu-slideInRight 0.3s ease;
        }
@keyframes bsu-slideInRight {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }
.bsu-page .idm-header {
            padding: 28px 32px 20px;
            border-bottom: 1.5px solid var(--bg-secondary);
            background: var(--card-bg);
        }
.bsu-page .idm-header h3 { font-size: 24px; font-weight: 800; color: var(--text-primary); margin: 0; }
.bsu-page .idm-header h3 span { color: #4185F4; }
.bsu-page .idm-header p { font-size: 15px; color: var(--text-muted); margin: 6px 0 0; font-weight: 500; }
.bsu-page .idm-body {
            display: flex;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }
.bsu-page .idm-left {
            flex: 1;
            padding: 28px 28px;
            overflow-y: auto;
            border-right: 1.5px solid var(--bg-secondary);
        }
.bsu-page .idm-toggle {
            display: flex;
            border: 1.5px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            width: fit-content;
            margin-bottom: 28px;
        }
.bsu-page .idm-toggle button {
            padding: 14px 32px;
            border: none;
            background: var(--card-bg);
            font-size: 17px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .idm-toggle button.active { background: #4185F4; color: #fff; }
.bsu-page .idm-toggle button:hover:not(.active) { background: var(--bg-hover); }
.bsu-page .idm-form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
.bsu-page .idm-form-group { flex: 1; }
.bsu-page .idm-form-label {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
            /* Keep every label to a single line. Reserving two lines instead (to stop a
               wrapped label pushing its input out of line with the column beside it) left
               a blank line of dead space under every short label. One line each means the
               inputs align AND the label sits directly above its own field. */
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
.bsu-page .idm-form-label.green { color: #10B48F; }
.bsu-page .idm-form-label.blue { color: #4185F4; }
.bsu-page .idm-form-label.red { color: #ff6f92; }
.bsu-page .idm-input {
            width: 100%;
            height: 52px;
            border: 1.5px solid var(--border-color);
            border-radius: 12px;
            padding: 0 16px;
            font-size: 16px;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            outline: none;
            background: var(--card-bg);
            box-sizing: border-box;
            transition: all 0.15s;
        }
.bsu-page .idm-input:focus { border-color: #4185F4; box-shadow: 0 0 0 3px rgba(74,122,255,0.08); }
.bsu-page .idm-input::placeholder { color: var(--text-placeholder); }
.bsu-page .idm-select {
            width: 100%;
            height: 52px;
            border: 1.5px solid var(--border-color);
            border-radius: 12px;
            padding: 0 16px;
            font-size: 16px;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            outline: none;
            background: var(--card-bg);
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23373C44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            box-sizing: border-box;
            transition: all 0.15s;
        }
.bsu-page .idm-select:focus { border-color: #4185F4; box-shadow: 0 0 0 3px rgba(74,122,255,0.08); }
.bsu-page .idm-addons-header {
            display: flex;
            gap: 12px;
            padding: 14px 0;
            border-bottom: 1.5px solid var(--border-alt);
            margin-top: 12px;
        }
.bsu-page .idm-addons-header span {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
.bsu-page .idm-addons-header span:first-child { width: 24px; }
.bsu-page .idm-addons-header span:nth-child(2) { flex: 1; }
.bsu-page .idm-addons-header span:last-child { width: 160px; text-align: center; }
.bsu-page .idm-addon-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 0;
            border-bottom: 1px solid var(--bg-secondary);
        }
.bsu-page .idm-addon-delete {
            width: 32px; height: 32px;
            background: rgba(255, 111, 146, 0.08); border: none; cursor: pointer;
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.15s;
        }
.bsu-page .idm-addon-delete:hover { background: rgba(255, 111, 146, 0.15); }
.bsu-page .idm-addon-delete svg { width: 16px; height: 16px; stroke: #ff6f92; fill: none; }
.bsu-page .idm-addon-num { font-size: 16px; font-weight: 600; color: var(--text-muted); width: 20px; text-align: center; }
.bsu-page .idm-addon-name { flex: 1; font-size: 17px; font-weight: 600; color: var(--text-primary); }
.bsu-page .idm-addon-qty {
            display: flex;
            align-items: center;
            gap: 0;
            width: 160px;
            justify-content: center;
        }
.bsu-page .idm-addon-qty button {
            width: 48px; height: 48px;
            border-radius: 10px;
            border: 1.5px solid var(--border-color);
            background: var(--card-bg);
            font-size: 22px;
            font-weight: 600;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Inter', sans-serif;
            transition: all 0.15s;
        }
.bsu-page .idm-addon-qty .addon-minus { color: #ff6f92; border-color: rgba(255, 111, 146, 0.25); }
.bsu-page .idm-addon-qty .addon-minus:hover { background: rgba(255, 111, 146, 0.08); }
.bsu-page .idm-addon-qty .addon-plus { color: #10B48F; border-color: rgba(16, 180, 143, 0.3); }
.bsu-page .idm-addon-qty .addon-plus:hover { background: rgba(16, 180, 143, 0.1); }
.bsu-page .idm-addon-qty span {
            width: 40px;
            text-align: center;
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
        }
.bsu-page .idm-right {
            width: 60%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            flex-shrink: 0;
            background: var(--bg-hover);
        }
.bsu-page .idm-right-search {
            display: flex;
            gap: 10px;
            padding: 20px 20px 16px;
            align-items: center;
        }
.bsu-page .idm-right-search-input {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 10px;
            border: 1.5px solid var(--border-color);
            border-radius: 12px;
            padding: 0 16px;
            height: 60px;
            background: var(--card-bg);
        }
.bsu-page .idm-right-search-input svg { width: 20px; height: 20px; stroke: var(--text-muted); fill: none; flex-shrink: 0; }
.bsu-page .idm-right-search-input input {
            flex: 1; border: none; outline: none; background: transparent;
            font-size: 17px; font-family: 'Inter', sans-serif; color: var(--text-primary); height: 60px;
        }
.bsu-page .idm-right-search-input input::placeholder { color: var(--text-placeholder); }
.bsu-page .idm-qty-input {
            width: 70px; height: 60px;
            border: 1.5px solid var(--border-color);
            border-radius: 12px;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            outline: none;
            background: var(--card-bg);
        }
.bsu-page .idm-qty-input:focus { border-color: #4185F4; box-shadow: 0 0 0 3px rgba(74,122,255,0.08); }
.bsu-page .idm-add-btn {
            height: 60px;
            padding: 0 30px;
            background: var(--text-primary);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            letter-spacing: 0.5px;
            transition: all 0.15s;
        }
.bsu-page .idm-add-btn:hover { background: #2C3038; }
.bsu-page .idm-add-btn:active { background: #1a1e24; transform: scale(0.97); }
.bsu-page .idm-cats {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
            padding: 0 20px 16px;
        }
.bsu-page .idm-cat-pill {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border-alt);
            border-radius: 8px;
            background: var(--card-bg);
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .idm-cat-pill:hover { background: var(--bg-hover); }
.bsu-page .idm-cat-pill.active { background: #4185F4; color: #fff; border-color: #4185F4; }
.bsu-page .idm-cat-nav {
            display: flex;
            border: 1px solid var(--border-alt);
            border-radius: 8px;
            overflow: hidden;
        }
.bsu-page .idm-cat-nav button {
            flex: 1; border: none; background: var(--bg-hover);
            cursor: pointer; padding: 8px 0;
            display: flex; align-items: center; justify-content: center;
        }
.bsu-page .idm-cat-nav button:first-child { border-right: 1px solid var(--border-alt); }
.bsu-page .idm-cat-nav button svg { width: 14px; height: 14px; stroke: var(--text-muted); fill: none; }
.bsu-page .idm-cat-nav button:hover { background: var(--border-alt); }
.bsu-page .idm-food-grid {
            flex: 1;
            overflow-y: auto;
            padding: 0 20px 20px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            align-content: start;
            min-height: 200px;
        }
.bsu-page .idm-food-card {
            border-radius: 14px;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            background: var(--card-bg);
            border: 2px solid transparent;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
.bsu-page .idm-food-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
            border-color: #4185F4;
        }
.bsu-page .idm-food-card:active {
            transform: translateY(0) scale(0.97);
        }
.bsu-page .idm-food-card img {
            width: 100%;
            height: 90px;
            object-fit: cover;
            display: block;
            transition: all 0.3s;
        }
.bsu-page .idm-food-card:hover img {
            transform: scale(1.06);
            filter: brightness(1.05);
        }
.bsu-page .idm-food-card::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 50%;
            background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 100%);
            pointer-events: none;
            z-index: 1;
        }
@media (min-width: 1600px) {.bsu-page .idm-food-card img { height: 130px; }}
@media (min-width: 1440px) and (max-width: 1599px) {.bsu-page .idm-food-card img { height: 110px; }}
@media (max-width: 1280px) {.bsu-page .idm-food-card img { height: 80px; }
.bsu-page .idm-food-grid { grid-template-columns: repeat(3, 1fr); }
.bsu-page .idm-food-nav { grid-column: span 3; }}
@media (max-width: 1024px) {.bsu-page .idm-food-card img { height: 70px; }
.bsu-page .idm-food-grid { grid-template-columns: repeat(3, 1fr); }
.bsu-page .idm-food-nav { grid-column: span 3; }}
@media (max-width: 768px) {.bsu-page .idm-food-card img { height: 60px; }
.bsu-page .idm-food-grid { grid-template-columns: repeat(2, 1fr); }
.bsu-page .idm-food-nav { grid-column: span 2; }}
.bsu-page .idm-food-card .idm-food-price {
            position: absolute;
            top: 8px; left: 8px;
            padding: 4px 10px;
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(6px);
            color: #10B48F;
            font-size: 13px;
            font-weight: 800;
            border-radius: 8px;
            z-index: 3;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }
.bsu-page .idm-food-card .idm-food-name {
            padding: 10px 10px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            background: var(--card-bg);
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
.bsu-page .idm-food-nav {
            grid-column: span 4;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 10px 0;
        }
.bsu-page .idm-food-nav button {
            width: 80px; height: 80px;
            border: 1.5px solid var(--border-alt);
            border-radius: 14px;
            background: var(--card-bg);
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.15s;
            box-shadow: 0 2px 6px rgba(0,0,0,0.04);
        }
.bsu-page .idm-food-nav button svg { width: 20px; height: 20px; stroke: #6B7280; fill: none; }
.bsu-page .idm-food-nav button:hover { background: var(--bg-secondary); border-color: var(--border-strong); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.bsu-page .idm-food-nav button:active { transform: scale(0.95); }
.bsu-page .idm-footer {
            display: flex;
            justify-content: flex-end;
            gap: 16px;
            padding: 20px 32px;
            border-top: 1.5px solid var(--bg-secondary);
            background: var(--card-bg);
        }
.bsu-page .idm-close-btn {
            padding: 16px 48px;
            border: 1.5px solid var(--border-color);
            border-radius: 14px;
            background: var(--card-bg);
            font-size: 18px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .idm-close-btn:hover { background: var(--bg-hover-alt); }
.bsu-page .idm-close-btn:active { background: var(--bg-secondary); }
.bsu-page .idm-submit-btn {
            padding: 16px 56px;
            background: #4185F4;
            color: #fff;
            border: none;
            border-radius: 14px;
            font-size: 18px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .idm-submit-btn:hover { background: #3070DC; }
.bsu-page .idm-submit-btn:active { background: #2860c4; transform: scale(0.98); }
.bsu-page .food-info-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.35);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 1200;
            align-items: center;
            justify-content: center;
        }
.bsu-page .food-info-overlay.active { display: flex; }
.bsu-page .food-info-popup {
            background: var(--card-bg);
            border-radius: 24px;
            width: 820px;
            box-shadow: 0 24px 80px rgba(0,0,0,0.2);
            overflow: hidden;
            animation: bsu-foodInfoIn 0.25s ease;
        }
@keyframes bsu-foodInfoIn {
            from { opacity: 0; transform: scale(0.95) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
.bsu-page .food-info-top {
            display: flex;
            gap: 36px;
            padding: 36px 40px 32px;
        }
.bsu-page .food-info-img {
            width: 240px;
            height: 220px;
            border-radius: 16px;
            object-fit: cover;
            flex-shrink: 0;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        }
.bsu-page .food-info-details {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
        }
.bsu-page .food-info-title-row {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 12px;
            padding-right: 50px;
        }
.bsu-page .food-info-title-row h3 {
            font-size: 26px;
            font-weight: 800;
            color: var(--text-primary);
            margin: 0;
            line-height: 1.2;
        }
.bsu-page .food-info-title-row .food-info-num {
            font-size: 14px;
            font-weight: 600;
            color: #4185F4;
            padding: 5px 14px;
            background: rgba(65, 133, 244, 0.06);
            border: 1px solid rgba(65, 133, 244, 0.25);
            border-radius: 20px;
            flex-shrink: 0;
        }
.bsu-page .food-info-close {
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 40px;
            border: none;
            background: var(--bg-secondary);
            border-radius: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }
.bsu-page .food-info-close svg { width: 18px; height: 18px; stroke: #6B7280; fill: none; stroke-width: 2.5; }
.bsu-page .food-info-close:hover { background: rgba(255, 111, 146, 0.12); }
.bsu-page .food-info-close:hover svg { stroke: #ff6f92; }
.bsu-page .food-info-price {
            display: inline-flex;
            align-items: center;
            font-size: 18px;
            font-weight: 700;
            color: #10B48F;
            background: rgba(16, 180, 143, 0.1);
            border: 1.5px solid #B7E9DD;
            border-radius: 10px;
            padding: 8px 20px;
            margin-bottom: 28px;
            width: fit-content;
        }
.bsu-page .food-info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 28px;
            flex: 1;
        }
.bsu-page .food-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 16px;
            border-radius: 10px;
            background: var(--bg-hover);
        }
.bsu-page .food-info-row:hover { background: var(--bg-secondary); }
.bsu-page .food-info-row .fi-label {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
        }
.bsu-page .food-info-row .fi-value {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
        }
.bsu-page .food-info-tax {
            margin: 0 40px 36px;
            border: 1.5px solid var(--bg-secondary);
            border-radius: 16px;
            overflow: hidden;
        }
.bsu-page .food-info-tax-header {
            display: grid;
            grid-template-columns: 2.5fr 1fr 1.2fr 1fr;
            padding: 16px 24px;
            background: var(--bg-hover-alt);
            border-bottom: 1.5px solid var(--bg-secondary);
        }
.bsu-page .food-info-tax-header span {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
.bsu-page .food-info-tax-row {
            display: grid;
            grid-template-columns: 2.5fr 1fr 1.2fr 1fr;
            padding: 18px 24px;
            border-top: 1px solid var(--bg-hover-alt);
            transition: background 0.1s;
        }
.bsu-page .food-info-tax-row:first-of-type { border-top: none; }
.bsu-page .food-info-tax-row:hover { background: var(--bg-hover); }
.bsu-page .food-info-tax-row span {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
        }
.bsu-page .food-info-tax-row span:first-child {
            font-weight: 600;
        }
.bsu-page .tax-popup-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.35);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 1200;
            align-items: center;
            justify-content: center;
        }
.bsu-page .tax-popup-overlay.active { display: flex; }
.bsu-page .tax-popup {
            background: var(--card-bg);
            border-radius: 20px;
            width: 520px;
            box-shadow: 0 24px 80px rgba(0,0,0,0.2);
            overflow: hidden;
            animation: bsu-foodInfoIn 0.25s ease;
        }
.bsu-page .tax-popup-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 28px 32px 20px;
        }
.bsu-page .tax-popup-header h3 {
            font-size: 22px;
            font-weight: 800;
            color: var(--text-primary);
            margin: 0;
        }
.bsu-page .tax-popup-close {
            width: 40px;
            height: 40px;
            border: none;
            background: var(--bg-secondary);
            border-radius: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }
.bsu-page .tax-popup-close svg { width: 18px; height: 18px; stroke: #6B7280; fill: none; stroke-width: 2.5; }
.bsu-page .tax-popup-close:hover { background: rgba(255, 111, 146, 0.12); }
.bsu-page .tax-popup-close:hover svg { stroke: #ff6f92; }
.bsu-page .tax-popup-body {
            padding: 0 32px 28px;
        }
.bsu-page .tax-popup-table {
            border: 1.5px solid var(--bg-secondary);
            border-radius: 14px;
            overflow: hidden;
        }
.bsu-page .tax-popup-table-header {
            display: flex;
            padding: 14px 20px;
            background: var(--bg-hover-alt);
            border-bottom: 1.5px solid var(--bg-secondary);
        }
.bsu-page .tax-popup-table-header span {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-muted);
        }
.bsu-page .tax-popup-table-header span:first-child { flex: 1; }
.bsu-page .tax-popup-table-header span:last-child { width: 120px; text-align: right; }
.bsu-page .tax-popup-row {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            border-top: 1px solid var(--bg-hover-alt);
        }
.bsu-page .tax-popup-row:first-of-type { border-top: none; }
.bsu-page .tax-popup-row .tpr-name {
            flex: 1;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
        }
.bsu-page .tax-popup-row .tpr-amount {
            width: 100px;
            text-align: right;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
        }
.bsu-page .tax-popup-row .tpr-btn {
            width: 44px;
            height: 44px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 14px;
            transition: all 0.15s;
        }
.bsu-page .tax-popup-row .tpr-btn.minus {
            background: #ff6f92;
            color: #fff;
        }
.bsu-page .tax-popup-row .tpr-btn.minus:hover { background: #e65c7f; }
.bsu-page .tax-popup-row .tpr-btn.plus {
            background: #10B48F;
            color: #fff;
        }
.bsu-page .tax-popup-row .tpr-btn.plus:hover { background: #0ea07e; }
.bsu-page .tax-popup-row .tpr-btn svg {
            width: 20px;
            height: 20px;
            stroke: #fff;
            fill: none;
            stroke-width: 2.5;
        }
.bsu-page .tax-popup-apply {
            padding: 14px 20px;
            background: rgba(16, 180, 143, 0.1);
            border-top: 1px solid #B7E9DD;
        }
.bsu-page .tax-popup-apply span {
            font-size: 15px;
            font-weight: 700;
            color: #10B48F;
        }
.bsu-page .tax-popup-total {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 20px;
            background: var(--bg-secondary);
            border-top: 1.5px solid var(--border-alt);
        }
.bsu-page .tax-popup-total .tpt-label {
            font-size: 17px;
            font-weight: 800;
            color: var(--text-primary);
        }
.bsu-page .tax-popup-total .tpt-value {
            font-size: 18px;
            font-weight: 800;
            color: var(--text-primary);
        }
.bsu-page .v-cat-sidebar {
            display: none;
            width: 113px;
            flex-shrink: 0;
            flex-direction: column;
            background: #2C3038;
            border-left: 1px solid #3A3F48;
            overflow: hidden;
        }
.bsu-page .v-cat-sidebar.active { display: flex; }
.bsu-page .v-cat-nav-top {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            border-bottom: 1px solid #3A3F48;
            cursor: pointer;
            flex-shrink: 0;
        }
.bsu-page .v-cat-nav-top:hover { background: rgba(255,255,255,0.05); }
.bsu-page .v-cat-nav-top svg { width: 20px; height: 20px; stroke: var(--text-muted); fill: none; }
.bsu-page .v-cat-nav-top.disabled { opacity: 0.35; pointer-events: none; }
.bsu-page .v-cat-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 8px 8px;
            overflow-y: auto;
        }
.bsu-page .v-cat-pill {
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 10px 6px;
            border: 1.5px solid #3A3F48;
            border-radius: 12px;
            background: #373C44;
            font-size: 12px;
            font-weight: 600;
            color: #E8E8E8;
            cursor: pointer;
            transition: all 0.15s;
            word-break: break-word;
            line-height: 1.3;
        }
.bsu-page .v-cat-pill:hover { background: #4A4F58; border-color: #5A5F68; }
.bsu-page .v-cat-pill.active { background: rgba(65,133,244,0.15); color: #4185F4; border-color: #4185F4; }
.bsu-page .v-cat-nav-bottom {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            border-top: 1px solid #3A3F48;
            cursor: pointer;
            flex-shrink: 0;
        }
.bsu-page .v-cat-nav-bottom:hover { background: rgba(255,255,255,0.05); }
.bsu-page .v-cat-nav-bottom svg { width: 20px; height: 20px; stroke: var(--text-muted); fill: none; }
.bsu-page .v-cat-nav-bottom.disabled { opacity: 0.35; pointer-events: none; }
.bsu-page .settle-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(4,9,17,0.35);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 1100;
            justify-content: flex-end;
        }
.bsu-page .settle-overlay.active { display: flex; }
.bsu-page .settle-panel {
            background: var(--bg-secondary);
            width: 92%;
            margin-left: 8%;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: bsu-slideInRight 0.3s ease;
            box-shadow: -8px 0 40px rgba(4,9,17,0.15);
        }
.bsu-page .settle-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            height: 60px;
            background: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }
.bsu-page .settle-header-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }
.bsu-page .settle-header-left h2 {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }
.bsu-page .settle-header-left h2 span {
            font-weight: 500;
            color: var(--text-secondary);
            font-size: 14px;
        }
.bsu-page .settle-header-left h2 strong {
            color: #10B48F;
            font-weight: 800;
        }
.bsu-page .settle-bill-no-badge {
            font-size: 12px;
            font-weight: 600;
            color: #4185F4;
            padding: 5px 12px;
            background: rgba(65, 133, 244, 0.08);
            border-radius: 20px;
            border: 1px solid rgba(65, 133, 244, 0.3);
        }
.bsu-page .settle-header-right {
            display: flex;
            align-items: center;
            gap: 10px;
        }
.bsu-page .settle-currency-rate {
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: #4185F4;
            background: rgba(65, 133, 244, 0.08);
            padding: 6px 14px;
            border-radius: 8px;
            white-space: nowrap;
        }
.bsu-page .settle-currency-btn {
            height: 38px;
            padding: 0 16px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--input-bg);
            font-size: 13px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s;
        }
.bsu-page .settle-currency-btn:hover { background: var(--border-color); }
.bsu-page .settle-currency-btn svg { width: 16px; height: 16px; stroke: var(--text-primary); fill: none; stroke-width: 2; }
.bsu-page .settle-select {
            height: 38px;
            padding: 0 12px;
            border: none;
            border-radius: 10px;
            background: #353a4a;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: #fff;
            cursor: pointer;
            outline: none;
        }
.bsu-page .settle-select:focus { border-color: #4185F4; box-shadow: 0 0 0 3px rgba(65,133,244,0.08); }
.bsu-page .settle-body-4col {
            display: flex;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }
.bsu-page .settle-col-info {
            width: 180px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            padding: 16px 12px;
            background: var(--card-bg);
            border-right: 1px solid var(--border-color);
            overflow-y: auto;
        }
.bsu-page .settle-info-card-v {
            padding: 14px 14px;
            border-radius: 10px;
            margin-bottom: 8px;
            border: 1px solid transparent;
            height: 100px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
.bsu-page .settle-info-card-v .sic-label {
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: block;
            margin-bottom: 6px;
        }
.bsu-page .settle-info-card-v .sic-value {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            display: block;
            line-height: 1.2;
        }
.bsu-page .settle-info-card-v.green { background: rgba(16, 180, 143, 0.1); border-color: rgba(16, 180, 143, 0.25); }
.bsu-page .settle-info-card-v.green .sic-label { color: #10B48F; }
.bsu-page .settle-info-card-v.orange { background: rgba(245, 166, 35, 0.08); border-color: rgba(245, 166, 35, 0.25); }
.bsu-page .settle-info-card-v.orange .sic-label { color: #F5A623; }
.bsu-page .settle-info-card-v.cyan { background: rgba(74, 174, 219, 0.08); border-color: rgba(74, 174, 219, 0.25); }
.bsu-page .settle-info-card-v.cyan .sic-label { color: #4AAEDB; }
.bsu-page .settle-info-card-v.red { background: rgba(255, 111, 146, 0.08); border-color: rgba(255, 111, 146, 0.25); }
.bsu-page .settle-info-card-v.red .sic-label { color: #FF6F92; }
.bsu-page .settle-info-card-v.purple { background: rgba(134, 95, 194, 0.1); border-color: rgba(134, 95, 194, 0.25); }
.bsu-page .settle-info-card-v.purple .sic-label { color: #865FC2; }
.bsu-page .settle-info-card-v.lavender { background: rgba(107, 122, 161, 0.08); border-color: rgba(107, 122, 161, 0.25); }
.bsu-page .settle-info-card-v.lavender .sic-label { color: #6B7AA1; }
.bsu-page[data-theme="dark"] .settle-info-card-v { background: var(--bg-hover); border-color: var(--border-color); }
.bsu-page .settle-col-info-spacer { flex: 1; }
.bsu-page .settle-bottom-bar {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            background: var(--card-bg);
            border-top: 1px solid var(--border-color);
        }
.bsu-page .settle-cancel-btn {
            width: 155px;
            height: 60px;
            margin: 0 12px;
            background: #FF6F92;
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            flex-shrink: 0;
            box-sizing: border-box;
        }
.bsu-page .settle-cancel-btn:hover { background: #e8567e; }
.bsu-page .settle-cancel-btn:active { background: #d94570; transform: scale(0.97); }
.bsu-page .settle-bottom-separator {
            width: 1px;
            height: 100%;
            background: var(--border-color);
            flex-shrink: 0;
        }
.bsu-page .settle-col-denom {
            flex: 35;
            display: flex;
            flex-direction: column;
            padding: 16px 20px;
            overflow-y: auto;
            background: var(--card-bg);
            border-right: 1px solid var(--border-color);
        }
.bsu-page .settle-tendered-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.3px;
            margin-bottom: 6px;
        }
.bsu-page .settle-tendered-input-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }
.bsu-page .settle-tendered-input {
            flex: 1;
            height: 60px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 0 14px;
            font-size: 18px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            outline: none;
            background: var(--input-bg);
            box-sizing: border-box;
        }
.bsu-page .settle-tendered-input:focus { border-color: #4185F4; box-shadow: 0 0 0 3px rgba(65,133,244,0.08); }
.bsu-page .settle-clear-cash-btn {
            height: 60px;
            border-radius: 8px;
            border: 1px solid #FF6F92;
            background: transparent;
            color: #FF6F92;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            transition: all 0.15s;
            flex-shrink: 0;
            padding: 0 18px;
        }
.bsu-page .settle-clear-cash-btn:hover { background: #FF6F92; color: #fff; }
.bsu-page .settle-tip-row {
            display: flex;
            align-items: stretch;
            gap: 8px;
            margin-bottom: 14px;
            height: 60px;
        }
.bsu-page .settle-tip-toggle {
            display: flex;
            border-radius: 10px;
            overflow: hidden;
            border: none;
            flex-shrink: 0;
            height: 100%;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
        }
.bsu-page .settle-tip-toggle-btn {
            padding: 0 18px;
            height: 100%;
            font-size: 15px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            background: transparent;
            color: var(--text-secondary);
            border: none;
            cursor: pointer;
            transition: all 0.18s;
            position: relative;
        }
.bsu-page .settle-tip-toggle-btn.active {
            background: #4185F4;
            color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(65,133,244,0.25);
        }
.bsu-page .settle-tip-toggle-btn:not(.active):hover {
            background: rgba(65,133,244,0.08);
            color: #4185F4;
        }
.bsu-page .settle-tip-input {
            flex: 1;
            height: 100%;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            font-size: 16px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            outline: none;
            background: var(--input-bg);
            box-sizing: border-box;
        }
.bsu-page .settle-tip-input:focus { border-color: #4185F4; box-shadow: 0 0 0 3px rgba(65,133,244,0.08); }
.bsu-page .settle-tip-dropdown-btn {
            height: 100%;
            padding: 0 18px;
            background: #4185F4;
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            flex-shrink: 0;
        }
.bsu-page .settle-tip-dropdown-btn:hover { background: #3070d9; }
.bsu-page[data-theme="dark"] .settle-tip-dropdown-btn { background: #4185F4; }
.bsu-page[data-theme="dark"] .settle-tip-dropdown-btn:hover { background: #3070d9; }
.bsu-page .settle-denom-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.3px;
            margin-bottom: 8px;
        }
.bsu-page .settle-denom-grid-v2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }
.bsu-page .settle-denom-row {
            display: flex;
            align-items: center;
            gap: 0;
            background: var(--card-bg);
            border-radius: 10px;
            padding: 0;
            border: 1px solid var(--border-color);
            height: 46px;
            box-sizing: border-box;
            overflow: hidden;
        }
.bsu-page .settle-denom-row-label {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
            min-width: 60px;
            padding: 0 12px;
            background: var(--bg-secondary);
            height: 100%;
            display: flex;
            align-items: center;
            border-right: 1px solid var(--border-color);
        }
.bsu-page .settle-denom-count-input {
            flex: 1;
            height: 100%;
            border: none;
            border-radius: 0;
            text-align: center;
            font-size: 15px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            outline: none;
            background: transparent;
            box-sizing: border-box;
        }
.bsu-page .settle-denom-count-input:focus { background: rgba(65,133,244,0.04); }
.bsu-page .settle-col-numpad {
            flex: 30;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 16px 16px;
            background: var(--bg-secondary);
            border-right: 1px solid var(--border-color);
            overflow-y: auto;
        }
.bsu-page .settle-col-numpad-top {
            flex-shrink: 0;
        }
.bsu-page .settle-col-numpad-bottom {
            margin-top: auto;
        }
.bsu-page .settle-amount-table {
            width: 100%;
            margin-bottom: 14px;
            border-collapse: separate;
            border-spacing: 0;
            background: var(--card-bg);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        }
.bsu-page[data-theme="dark"] .settle-amount-table { background: var(--card-bg); }
.bsu-page .settle-amount-table thead th {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            padding: 12px 14px;
            text-align: left;
            background: var(--input-bg);
            border-bottom: 2px solid;
            border-image: linear-gradient(90deg, #4185F4, #10B48F) 1;
        }
.bsu-page[data-theme="dark"] .settle-amount-table thead th { background: var(--bg-hover); }
.bsu-page .settle-amount-table thead th:last-child {
            text-align: right;
        }
.bsu-page .settle-amount-table thead th:nth-child(2) {
            text-align: right;
        }
.bsu-page .settle-amount-table tbody td {
            padding: 12px 14px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
        }
.bsu-page .settle-amount-table tbody tr:last-child td {
            border-bottom: none;
        }
.bsu-page .settle-amount-table tbody td:nth-child(2) {
            text-align: right;
            font-weight: 700;
            font-size: 14px;
            font-variant-numeric: tabular-nums;
        }
.bsu-page .settle-amount-table tbody td:last-child {
            text-align: right;
        }
.bsu-page .settle-amount-row-remove {
            color: #FF6F92;
            font-size: 12px;
            cursor: pointer;
            background: none;
            height: 48px;
            border: none;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 4px;
            transition: all 0.15s;
        }
.bsu-page .settle-amount-row-remove:hover { background: rgba(255,111,146,0.1); }
.bsu-page .settle-numpad-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }
.bsu-page .settle-numpad-btn {
            height: 80px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--card-bg);
            font-size: 18px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.12s;
            user-select: none;
        }
.bsu-page .settle-numpad-btn:hover { background: var(--bg-hover); }
.bsu-page .settle-numpad-btn:active { transform: scale(0.95); background: var(--border-color); }
.bsu-page .settle-numpad-btn.quick-dollar {
            background: rgba(65, 133, 244, 0.1);
            color: #4185F4;
            font-size: 14px;
            font-weight: 700;
            border-color: rgba(65, 133, 244, 0.25);
        }
.bsu-page .settle-numpad-btn.quick-dollar:hover { background: rgba(65, 133, 244, 0.18); }
.bsu-page .settle-numpad-btn.backspace-btn svg {
            width: 22px;
            height: 22px;
            stroke: var(--text-primary);
            fill: none;
            stroke-width: 2;
        }
.bsu-page .settle-bill-btn {
            width: 100%;
            height: 100px;
            background: #10B48F;
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            letter-spacing: 0.3px;
            margin-top: 12px;
            flex-shrink: 0;
        }
.bsu-page .settle-bill-btn:hover { background: #0a9a7a; }
.bsu-page .settle-bill-btn:active { background: #088a6c; transform: scale(0.98); }
.bsu-page .settle-col-payment {
            width: 200px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            padding: 16px 14px;
            background: #353a4a;
            overflow-y: auto;
        }
.bsu-page .settle-payment-header {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255,255,255,0.5);
            margin-bottom: 14px;
            padding: 0 4px;
        }
.bsu-page .settle-payment-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            height: 120px;
            border-radius: 10px;
            border: 1.5px solid var(--border-color);
            background: var(--input-bg);
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.15s;
            box-sizing: border-box;
        }
.bsu-page .settle-payment-option:hover {
            border-color: var(--border-strong);
            background: var(--bg-hover);
        }
.bsu-page .settle-payment-option.active {
            background: #4185F4;
            border-color: #4185F4;
        }
.bsu-page .settle-payment-radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid var(--border-strong);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.15s;
        }
.bsu-page .settle-payment-option.active .settle-payment-radio {
            border-color: #FFFFFF;
        }
.bsu-page .settle-payment-radio-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: transparent;
            transition: all 0.15s;
        }
.bsu-page .settle-payment-option.active .settle-payment-radio-dot {
            background: #FFFFFF;
        }
.bsu-page .settle-payment-option-info {
            flex: 1;
        }
.bsu-page .settle-payment-option-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-secondary);
            display: block;
            margin-bottom: 4px;
        }
.bsu-page .settle-payment-option.active .settle-payment-option-name {
            color: #FFFFFF;
            font-weight: 700;
        }
.bsu-page .settle-payment-option-amount {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            display: block;
        }
.bsu-page .settle-payment-option.active .settle-payment-option-amount {
            color: #FFFFFF;
        }
.bsu-page .settle-charity-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 20px;
            height: 80px;
            background: var(--card-bg);
            flex: 1;
        }
.bsu-page .settle-charity-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            white-space: nowrap;
            letter-spacing: 0.2px;
        }
.bsu-page .settle-charity-input {
            width: 180px;
            flex-shrink: 0;
            height: 44px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 0 12px;
            font-size: 13px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--input-bg);
            outline: none;
            box-sizing: border-box;
        }
.bsu-page .settle-charity-input::placeholder { color: var(--text-placeholder); }
.bsu-page .settle-charity-input:focus { border-color: #4185F4; }
.bsu-page .settle-charity-mode-select {
            height: 44px;
            padding: 0 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 13px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            outline: none;
            appearance: auto;
            min-width: 130px;
        }
.bsu-page .settle-charity-mode-select:focus { border-color: #4185F4; }
.bsu-page .settle-charity-add-btn {
            height: 44px;
            padding: 0 20px;
            border: none;
            border-radius: 8px;
            background: #10B48F;
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }
.bsu-page .settle-charity-add-btn:hover { background: #0a9a7a; }
.bsu-page .settle-cc-panel {
            display: none;
            flex: 1;
            min-width: 0;
        }
.bsu-page .settle-cc-panel.active { display: flex; }
.bsu-page .settle-cc-panel-inner {
            display: flex;
            flex: 1;
            gap: 0;
            min-width: 0;
        }
.bsu-page .settle-cc-form {
            flex: 0 0 55%;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            border-right: 1px solid var(--border-color);
            background: var(--card-bg);
        }
.bsu-page[data-theme="dark"] .settle-cc-form { background: var(--card-bg); }
.bsu-page .settle-cc-tab-row {
            display: flex;
            border-bottom: 2px solid var(--border-color);
            margin-bottom: 4px;
        }
.bsu-page .settle-cc-tab {
            padding: 10px 20px;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-secondary);
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .settle-cc-tab.active {
            color: #4185F4;
            border-bottom-color: #4185F4;
        }
.bsu-page .settle-cc-tab:hover:not(.active) { color: var(--text-primary); }
.bsu-page .settle-cc-select {
            height: 60px;
            width: 100%;
            padding: 0 14px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            outline: none;
            box-sizing: border-box;
        }
.bsu-page .settle-cc-select:focus { border-color: #4185F4; }
.bsu-page .settle-cc-card-types {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 4px 0;
        }
.bsu-page .settle-cc-card-type {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            cursor: pointer;
            white-space: nowrap;
            height: 40px;
            padding: 0 14px;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            background: var(--input-bg);
            transition: all 0.15s;
        }
.bsu-page .settle-cc-card-type:has(input:checked) {
            border-color: #4185F4;
            background: rgba(65,133,244,0.08);
            color: #4185F4;
        }
.bsu-page .settle-cc-card-type:hover:not(:has(input:checked)) {
            border-color: var(--text-placeholder);
            background: var(--bg-hover);
        }
.bsu-page .settle-cc-card-type input[type="radio"] {
            width: 16px;
            height: 16px;
            accent-color: #4185F4;
            cursor: pointer;
            margin: 0;
        }
.bsu-page .settle-cc-input {
            height: 60px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--input-bg);
            outline: none;
            box-sizing: border-box;
            width: 100%;
        }
.bsu-page .settle-cc-input:focus { border-color: #4185F4; }
.bsu-page .settle-cc-input::placeholder { color: var(--text-placeholder); }
.bsu-page .settle-cc-amount-input {
            height: 60px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            font-size: 18px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--input-bg);
            outline: none;
            box-sizing: border-box;
            width: 100%;
        }
.bsu-page .settle-cc-amount-input:focus { border-color: #4185F4; }
.bsu-page .settle-cc-btn-row {
            display: flex;
            gap: 10px;
        }
.bsu-page .settle-cc-pay-btn {
            height: 60px;
            padding: 0 28px;
            border: none;
            border-radius: 10px;
            background: #10B48F;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }
.bsu-page .settle-cc-pay-btn:hover { background: #0a9a7a; }
.bsu-page .settle-cc-tip-btn {
            height: 60px;
            padding: 0 28px;
            border: none;
            border-radius: 10px;
            background: #4185F4;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }
.bsu-page .settle-cc-tip-btn:hover { background: #3070d9; }
.bsu-page .settle-coupon-panel {
            display: none;
            flex: 1;
            min-width: 0;
        }
.bsu-page .settle-coupon-panel.active { display: flex; }
.bsu-page .settle-coupon-panel-inner {
            display: flex;
            flex: 1;
            gap: 0;
            min-width: 0;
        }
.bsu-page .settle-coupon-form {
            flex: 0 0 45%;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            border-right: 1px solid var(--border-color);
            background: var(--card-bg);
        }
.bsu-page[data-theme="dark"] .settle-coupon-form { background: var(--card-bg); }
.bsu-page .settle-coupon-select {
            height: 60px;
            width: 100%;
            padding: 0 14px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            outline: none;
            box-sizing: border-box;
        }
.bsu-page .settle-coupon-select:focus { border-color: #4185F4; }
.bsu-page .settle-coupon-input {
            height: 60px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--input-bg);
            outline: none;
            box-sizing: border-box;
            width: 100%;
        }
.bsu-page .settle-coupon-input:focus { border-color: #4185F4; }
.bsu-page .settle-coupon-input::placeholder { color: var(--text-placeholder); }
.bsu-page .settle-coupon-amount {
            height: 60px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            font-size: 18px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--input-bg);
            outline: none;
            box-sizing: border-box;
            width: 100%;
        }
.bsu-page .settle-coupon-amount:focus { border-color: #4185F4; }
.bsu-page .settle-coupon-pay-btn {
            height: 60px;
            padding: 0 28px;
            border: none;
            border-radius: 10px;
            background: #10B48F;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
            align-self: flex-start;
        }
.bsu-page .settle-coupon-pay-btn:hover { background: #0a9a7a; }
.bsu-page .settle-coupon-table-wrap {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: var(--input-bg);
            display: flex;
            flex-direction: column;
        }
.bsu-page[data-theme="dark"] .settle-coupon-table-wrap { background: var(--bg-secondary); }
.bsu-page .settle-coupon-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: var(--card-bg);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        }
.bsu-page[data-theme="dark"] .settle-coupon-table { background: var(--card-bg); }
.bsu-page .settle-coupon-table thead th {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: 0.3px;
            padding: 16px 20px;
            text-align: left;
            background: var(--bg-hover);
            border-bottom: 2px solid;
            border-image: linear-gradient(90deg, #4185F4, #10B48F) 1;
            white-space: nowrap;
        }
.bsu-page[data-theme="dark"] .settle-coupon-table thead th { background: var(--bg-hover); }
.bsu-page .settle-coupon-table thead th:last-child { text-align: right; }
.bsu-page .settle-coupon-table tbody td {
            padding: 18px 20px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
        }
.bsu-page .settle-coupon-table tbody td:last-child {
            text-align: right;
            font-weight: 700;
        }
.bsu-page .settle-coupon-table tbody tr:last-child td { border-bottom: none; }
.bsu-page .settle-online-panel {
            display: none;
            flex: 1;
            min-width: 0;
        }
.bsu-page .settle-online-panel.active { display: flex; }
.bsu-page .settle-online-panel-inner {
            display: flex;
            flex: 1;
            gap: 0;
            min-width: 0;
        }
.bsu-page .settle-online-form {
            flex: 0 0 45%;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            border-right: 1px solid var(--border-color);
            background: var(--card-bg);
        }
.bsu-page[data-theme="dark"] .settle-online-form { background: var(--card-bg); }
.bsu-page .settle-online-platforms {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
.bsu-page .settle-online-platform-btn {
            flex: 0 0 calc(20% - 8px);
            height: 70px;
            border: 2px solid var(--border-color);
            border-radius: 12px;
            background: var(--card-bg);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
            box-sizing: border-box;
            transition: all 0.15s ease;
        }
.bsu-page[data-theme="dark"] .settle-online-platform-btn { background: var(--input-bg); }
.bsu-page .settle-online-platform-btn:hover {
            border-color: #4185F4;
            box-shadow: 0 2px 8px rgba(65, 133, 244, 0.15);
        }
.bsu-page .settle-online-platform-btn.active {
            border-color: #4185F4;
            background: rgba(65, 133, 244, 0.06);
            box-shadow: 0 0 0 2px rgba(65, 133, 244, 0.18);
        }
.bsu-page .settle-online-platform-btn img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
.bsu-page .settle-online-select {
            height: 60px;
            width: 100%;
            padding: 0 14px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            outline: none;
            box-sizing: border-box;
        }
.bsu-page .settle-online-select:focus { border-color: #4185F4; }
.bsu-page .settle-online-type-row {
            display: flex;
            align-items: center;
            gap: 8px;
            height: 48px;
        }
.bsu-page .settle-online-type-pill {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            cursor: pointer;
            white-space: nowrap;
            height: 40px;
            padding: 0 14px;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            background: var(--input-bg);
            transition: all 0.15s;
        }
.bsu-page .settle-online-type-pill:has(input:checked) {
            border-color: #4185F4;
            background: rgba(65,133,244,0.08);
            color: #4185F4;
        }
.bsu-page .settle-online-type-pill:hover:not(:has(input:checked)) {
            border-color: var(--text-placeholder);
        }
.bsu-page .settle-online-type-pill input[type="radio"] {
            width: 16px;
            height: 16px;
            accent-color: #4185F4;
            cursor: pointer;
            margin: 0;
        }
.bsu-page .settle-online-input {
            height: 60px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--input-bg);
            outline: none;
            box-sizing: border-box;
            width: 100%;
        }
.bsu-page .settle-online-input:focus { border-color: #4185F4; }
.bsu-page .settle-online-input::placeholder { color: var(--text-placeholder); }
.bsu-page .settle-online-amount {
            height: 60px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            font-size: 18px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--input-bg);
            outline: none;
            box-sizing: border-box;
            width: 100%;
        }
.bsu-page .settle-online-amount:focus { border-color: #4185F4; }
.bsu-page .settle-online-pay-btn {
            height: 60px;
            padding: 0 28px;
            border: none;
            border-radius: 10px;
            background: #10B48F;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
            align-self: flex-start;
        }
.bsu-page .settle-online-pay-btn:hover { background: #0a9a7a; }
.bsu-page .settle-online-table-wrap {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: var(--input-bg);
            display: flex;
            flex-direction: column;
        }
.bsu-page[data-theme="dark"] .settle-online-table-wrap { background: var(--bg-secondary); }
.bsu-page .settle-online-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: var(--card-bg);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        }
.bsu-page[data-theme="dark"] .settle-online-table { background: var(--card-bg); }
.bsu-page .settle-online-table thead th {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: 0.3px;
            padding: 16px 20px;
            text-align: left;
            background: var(--bg-hover);
            border-bottom: 2px solid;
            border-image: linear-gradient(90deg, #4185F4, #10B48F) 1;
            white-space: nowrap;
        }
.bsu-page[data-theme="dark"] .settle-online-table thead th { background: var(--bg-hover); }
.bsu-page .settle-online-table thead th:last-child { text-align: right; }
.bsu-page .settle-online-table tbody td {
            padding: 18px 20px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
        }
.bsu-page .settle-online-table tbody td:last-child {
            text-align: right;
            font-weight: 700;
        }
.bsu-page .settle-online-table tbody tr:last-child td { border-bottom: none; }
.bsu-page .settle-other-panel {
            display: none;
            flex: 1;
            min-width: 0;
        }
.bsu-page .settle-other-panel.active { display: flex; }
.bsu-page .settle-other-panel-inner {
            display: flex;
            flex: 1;
            gap: 0;
            min-width: 0;
        }
.bsu-page .settle-other-form {
            flex: 0 0 45%;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            border-right: 1px solid var(--border-color);
            background: var(--card-bg);
        }
.bsu-page[data-theme="dark"] .settle-other-form { background: var(--card-bg); }
.bsu-page .settle-other-tab-row {
            display: flex;
            border-bottom: 2px solid var(--border-color);
            margin-bottom: 4px;
        }
.bsu-page .settle-other-tab {
            padding: 10px 20px;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-secondary);
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .settle-other-tab.active {
            color: #4185F4;
            border-bottom-color: #4185F4;
        }
.bsu-page .settle-other-select {
            height: 60px;
            width: 100%;
            padding: 0 14px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            outline: none;
            box-sizing: border-box;
        }
.bsu-page .settle-other-select:focus { border-color: #4185F4; }
.bsu-page .settle-other-input {
            height: 60px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--input-bg);
            outline: none;
            box-sizing: border-box;
            width: 100%;
        }
.bsu-page .settle-other-input:focus { border-color: #4185F4; }
.bsu-page .settle-other-input::placeholder { color: var(--text-placeholder); }
.bsu-page .settle-other-amount {
            height: 60px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            font-size: 18px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--input-bg);
            outline: none;
            box-sizing: border-box;
            width: 100%;
        }
.bsu-page .settle-other-amount:focus { border-color: #4185F4; }
.bsu-page .settle-other-pay-btn {
            height: 60px;
            padding: 0 28px;
            border: none;
            border-radius: 10px;
            background: #10B48F;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
            align-self: flex-start;
        }
.bsu-page .settle-other-pay-btn:hover { background: #0a9a7a; }
.bsu-page .settle-other-table-wrap {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: var(--input-bg);
            display: flex;
            flex-direction: column;
        }
.bsu-page[data-theme="dark"] .settle-other-table-wrap { background: var(--bg-secondary); }
.bsu-page .settle-other-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: var(--card-bg);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        }
.bsu-page[data-theme="dark"] .settle-other-table { background: var(--card-bg); }
.bsu-page .settle-other-table thead th {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: 0.3px;
            padding: 16px 20px;
            text-align: left;
            background: var(--bg-hover);
            border-bottom: 2px solid;
            border-image: linear-gradient(90deg, #4185F4, #10B48F) 1;
            white-space: nowrap;
        }
.bsu-page[data-theme="dark"] .settle-other-table thead th { background: var(--bg-hover); }
.bsu-page .settle-other-table thead th:last-child { text-align: center; }
.bsu-page .settle-other-table tbody td {
            padding: 18px 20px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
        }
.bsu-page .settle-other-table tbody td:last-child { text-align: center; }
.bsu-page .settle-other-table tbody tr:last-child td { border-bottom: none; }
.bsu-page .tip-modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.45);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }
.bsu-page .tip-modal-overlay.open { display: flex; }
.bsu-page .tip-modal {
            background: var(--card-bg);
            border-radius: 14px;
            width: 520px;
            box-shadow: 0 12px 48px rgba(0,0,0,0.18);
            overflow: hidden;
            font-family: 'Inter', sans-serif;
        }
.bsu-page[data-theme="dark"] .tip-modal { background: var(--card-bg); }
.bsu-page .tip-modal-header {
            padding: 20px 24px;
            font-size: 22px;
            font-weight: 700;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
        }
.bsu-page .tip-modal-body {
            padding: 20px 24px;
        }
.bsu-page .tip-modal-form {
            background: var(--bg-hover);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 16px;
        }
.bsu-page[data-theme="dark"] .tip-modal-form { background: var(--bg-secondary); }
.bsu-page .tip-modal-type-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            height: 60px;
        }
.bsu-page .tip-modal-switcher {
            display: flex;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            background: var(--input-bg);
        }
.bsu-page .tip-modal-switch-btn {
            padding: 0 24px;
            height: 100%;
            font-size: 15px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            background: transparent;
            color: var(--text-secondary);
            border: none;
            cursor: pointer;
            transition: all 0.18s;
            position: relative;
        }
.bsu-page .tip-modal-switch-btn.active {
            background: #4185F4;
            color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(65,133,244,0.25);
        }
.bsu-page .tip-modal-switch-btn:not(.active):hover {
            background: rgba(65,133,244,0.08);
            color: #4185F4;
        }
.bsu-page .tip-modal-input-row {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }
.bsu-page .tip-modal-input-row:last-child { margin-bottom: 0; }
.bsu-page .tip-modal-input-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            min-width: 130px;
        }
.bsu-page .tip-modal-input {
            flex: 1;
            height: 48px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 0 14px;
            font-size: 16px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--card-bg);
            outline: none;
            box-sizing: border-box;
        }
.bsu-page[data-theme="dark"] .tip-modal-input { background: var(--input-bg); }
.bsu-page .tip-modal-input:focus { border-color: #4185F4; box-shadow: 0 0 0 3px rgba(65,133,244,0.1); }
.bsu-page .tip-modal-input.readonly {
            background: var(--bg-hover);
            color: var(--text-secondary);
        }
.bsu-page .tip-modal-footer {
            padding: 16px 24px 24px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
.bsu-page .tip-modal-apply-btn {
            height: 48px;
            padding: 0 28px;
            border: none;
            border-radius: 8px;
            background: #4185F4;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .tip-modal-apply-btn:hover { background: #3070d9; }
.bsu-page .tip-modal-cancel-btn {
            height: 48px;
            padding: 0 28px;
            border: none;
            border-radius: 8px;
            background: #FFC860;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .tip-modal-cancel-btn:hover { background: #e6b350; }
.bsu-page .settle-cc-table-wrap {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: var(--input-bg);
            display: flex;
            flex-direction: column;
        }
.bsu-page[data-theme="dark"] .settle-cc-table-wrap { background: var(--bg-secondary); }
.bsu-page .settle-cc-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: var(--card-bg);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        }
.bsu-page[data-theme="dark"] .settle-cc-table { background: var(--card-bg); }
.bsu-page .settle-cc-table thead th {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: 0.3px;
            padding: 16px 20px;
            text-align: left;
            background: var(--bg-hover);
            border-bottom: 2px solid;
            border-image: linear-gradient(90deg, #4185F4, #10B48F) 1;
            white-space: nowrap;
        }
.bsu-page[data-theme="dark"] .settle-cc-table thead th { background: var(--bg-hover); }
.bsu-page .settle-cc-table thead th:nth-child(2) { text-align: center; }
.bsu-page .settle-cc-table thead th:nth-child(3) { text-align: center; }
.bsu-page .settle-cc-table tbody td {
            padding: 18px 20px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
        }
.bsu-page .settle-cc-table tbody td:nth-child(2) {
            text-align: center;
            font-weight: 700;
        }
.bsu-page .settle-cc-table tbody td:nth-child(3) { text-align: center; }
.bsu-page .settle-cc-table tbody tr:last-child td { border-bottom: none; }
.bsu-page .settle-cc-table tbody tr:hover td { background: rgba(65,133,244,0.02); }
.bsu-page .settle-cc-numpad {
            display: none;
            padding: 16px;
            border-top: 1px solid var(--border-color);
            background: var(--input-bg);
            margin-top: auto;
        }
.bsu-page .settle-cc-numpad.open { display: block; }
.bsu-page .settle-cc-numpad-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
.bsu-page .settle-cc-numpad-btn {
            height: 80px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--card-bg);
            font-size: 20px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.12s;
            user-select: none;
        }
.bsu-page .settle-cc-numpad-btn:hover { background: var(--bg-hover); }
.bsu-page .settle-cc-numpad-btn:active { transform: scale(0.95); }
.bsu-page .settle-cc-numpad-btn.backspace svg {
            width: 22px;
            height: 22px;
            stroke: var(--text-primary);
            fill: none;
            stroke-width: 2;
            stroke-width: 0;
        }
.bsu-page .settle-cc-delete-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 6px;
            border-radius: 6px;
            transition: all 0.15s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
.bsu-page .settle-cc-delete-btn:hover { background: rgba(255,111,146,0.1); }
.bsu-page .settle-cc-delete-btn svg {
            width: 20px;
            height: 20px;
            stroke: #FF6F92;
            fill: none;
            stroke-width: 1.8;
        }
.bsu-page .settle-btc-panel {
            display: none;
            flex: 1;
            min-width: 0;
        }
.bsu-page .settle-btc-panel.active { display: flex; }
.bsu-page .settle-btc-panel-inner {
            display: flex;
            flex: 1;
            gap: 0;
            min-width: 0;
        }
.bsu-page .settle-btc-form {
            flex: 0 0 40%;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            border-right: 1px solid var(--border-color);
            background: var(--card-bg);
        }
.bsu-page[data-theme="dark"] .settle-btc-form { background: var(--card-bg); }
.bsu-page .settle-btc-company-row {
            display: flex;
            gap: 0;
            align-items: stretch;
            height: 60px;
        }
.bsu-page .settle-btc-company-input {
            flex: 1;
            height: 100%;
            border: 1px solid var(--border-color);
            border-radius: 10px 0 0 10px;
            padding: 0 14px;
            font-size: 14px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--input-bg);
            outline: none;
            box-sizing: border-box;
        }
.bsu-page .settle-btc-company-input:focus { border-color: #4185F4; }
.bsu-page .settle-btc-search-btn {
            width: 48px;
            height: 100%;
            border: 1px solid var(--border-color);
            border-left: none;
            border-radius: 0 10px 10px 0;
            background: var(--bg-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }
.bsu-page .settle-btc-search-btn:hover { background: var(--bg-hover); }
.bsu-page .settle-btc-search-btn svg { width: 18px; height: 18px; stroke: var(--text-secondary); fill: none; stroke-width: 2; }
.bsu-page .settle-btc-gstin-row {
            display: flex;
            align-items: stretch;
            height: 60px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
        }
.bsu-page .settle-btc-gstin-label {
            display: flex;
            align-items: center;
            padding: 0 14px;
            background: var(--bg-secondary);
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            border-right: 1px solid var(--border-color);
            white-space: nowrap;
        }
.bsu-page .settle-btc-gstin-input {
            flex: 1;
            height: 100%;
            border: none;
            padding: 0 14px;
            font-size: 13px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--input-bg);
            outline: none;
        }
.bsu-page .settle-btc-input {
            height: 60px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--input-bg);
            outline: none;
            box-sizing: border-box;
            width: 100%;
        }
.bsu-page .settle-btc-input:focus { border-color: #4185F4; }
.bsu-page .settle-btc-input::placeholder { color: var(--text-placeholder); }
.bsu-page .settle-btc-btn-row {
            display: flex;
            gap: 8px;
        }
.bsu-page .settle-btc-add-emp-btn {
            height: 60px;
            padding: 0 20px;
            border: 1px solid #10B48F;
            border-radius: 10px;
            background: rgba(16,180,143,0.1);
            color: #10B48F;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .settle-btc-add-emp-btn:hover { background: rgba(16,180,143,0.2); }
.bsu-page .settle-btc-clear-btn {
            height: 60px;
            padding: 0 20px;
            border: 1px solid #FF6F92;
            border-radius: 10px;
            background: rgba(255,111,146,0.1);
            color: #FF6F92;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
.bsu-page .settle-btc-clear-btn:hover { background: rgba(255,111,146,0.2); }
.bsu-page .settle-btc-amount-input {
            height: 60px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0 14px;
            font-size: 18px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            background: var(--input-bg);
            outline: none;
            box-sizing: border-box;
            width: 100%;
        }
.bsu-page .settle-btc-amount-input:focus { border-color: #4185F4; }
.bsu-page .settle-btc-pay-btn {
            height: 60px;
            padding: 0 28px;
            border: none;
            border-radius: 10px;
            background: #10B48F;
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }
.bsu-page .settle-btc-pay-btn:hover { background: #0a9a7a; }
.bsu-page .settle-btc-msg {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
        }
.bsu-page .settle-btc-staff-check {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: auto;
            padding-top: 14px;
            border-top: 1px solid var(--border-color);
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
        }
.bsu-page .settle-btc-staff-check input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #4185F4;
        }
.bsu-page .settle-btc-table-wrap {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: var(--input-bg);
            display: flex;
            flex-direction: column;
        }
.bsu-page[data-theme="dark"] .settle-btc-table-wrap { background: var(--bg-secondary); }
.bsu-page .settle-btc-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: var(--card-bg);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        }
.bsu-page[data-theme="dark"] .settle-btc-table { background: var(--card-bg); }
.bsu-page .settle-btc-table thead th {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.6px;
            padding: 12px 16px;
            text-align: left;
            background: var(--bg-hover);
            border-bottom: 1px solid var(--border-color);
            white-space: nowrap;
        }
.bsu-page[data-theme="dark"] .settle-btc-table thead th { background: var(--bg-hover); }
.bsu-page .settle-btc-table thead th:nth-child(4) {
            text-align: right;
        }
.bsu-page .settle-btc-table thead th:nth-child(5) {
            text-align: center;
        }
.bsu-page .settle-btc-table tbody td {
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            border-bottom: 1px solid rgba(0,0,0,0.05);
            vertical-align: middle;
        }
.bsu-page[data-theme="dark"] .settle-btc-table tbody td { border-bottom-color: var(--border-color); }
.bsu-page .settle-btc-table tbody td:nth-child(4) {
            text-align: right;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }
.bsu-page .settle-btc-table tbody td:nth-child(5) {
            text-align: center;
        }
.bsu-page .settle-btc-table tbody tr:last-child td { border-bottom: none; }
.bsu-page .settle-btc-table tbody tr:hover td { background: rgba(65,133,244,0.02); }
.bsu-page .settle-btc-table .remove-link {
            color: #FF6F92;
            font-weight: 600;
            cursor: pointer;
            background: none;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            padding: 6px 14px;
            border-radius: 6px;
            transition: all 0.15s;
        }
.bsu-page .settle-btc-table .remove-link:hover { background: rgba(255,111,146,0.1); }
.bsu-page .mega-menu-overlay {
            display: none;
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 99;
            background: var(--overlay-bg);
            backdrop-filter: blur(2px);
        }
.bsu-page .mega-menu {
            display: none;
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            background: var(--mega-bg);
            z-index: 100;
            padding: 20px 28px 24px;
            overflow-y: auto;
            max-height: calc(100vh - 60px);
            box-shadow: 0 8px 32px var(--shadow-color);
            border-bottom: 1px solid var(--border-alt);
            font-family: 'Inter', sans-serif;
        }
@media (max-width: 1280px) {.bsu-page .food-grid { grid-template-columns: repeat(4, 1fr); }
.bsu-page .action-btn { padding: 0 14px; }
.bsu-page .action-btn .action-value { font-size: 13px; }
.bsu-page .action-btn .action-label { font-size: 9px; }
.bsu-page .action-info-btn { padding: 0 14px; }
.bsu-page .action-info-btn .info-value { font-size: 12px; }
.bsu-page .action-user-btn { padding: 0 14px; }}
@media (max-width: 1024px) {.bsu-page .nav-tab { padding: 0 10px; font-size: 11px; }
.bsu-page .nav-tab .tab-badge { font-size: 9px; padding: 1px 5px; }
.bsu-page .nav-icon-btn { width: 40px; height: 40px; }
.bsu-page .nav-icon-btn svg { width: 16px; height: 16px; }
.bsu-page .nav-bookings-btn { height: 40px; font-size: 11px; padding: 0 12px; }
.bsu-page .nav-user-name { font-size: 12px; }
.bsu-page .order-panel { width: 38%; }
.bsu-page .food-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; }
.bsu-page .category-grid { grid-template-columns: repeat(5, 1fr); }
.bsu-page .cat-pill { height: 60px; font-size: 12px; }
.bsu-page .cat-nav-card { height: 60px; }
.bsu-page .action-bar { height: 60px; }
.bsu-page .action-btn { padding: 0 10px; min-height: 40px; }
.bsu-page .action-btn .action-value { font-size: 12px; }
.bsu-page .action-btn.kot { padding: 0 18px; }
.bsu-page .action-info-btn { padding: 0 10px; }
.bsu-page .action-info-btn .info-label { font-size: 9px; }
.bsu-page .action-info-btn .info-value { font-size: 11px; }
.bsu-page .action-user-btn { padding: 0 10px; }
.bsu-page .action-user-btn .user-name { font-size: 11px; }
.bsu-page .action-user-btn .user-phone { font-size: 10px; }
.bsu-page .action-icon-btn { width: 44px; }
.bsu-page .action-delete-btn { width: 48px; }
.bsu-page .action-right-group { margin: 6px 8px 6px 4px; }
.bsu-page .action-more-btn { width: 50px; }
.bsu-page .action-more-btn span { font-size: 8px; }
.bsu-page .action-group-icon { width: 50px; }
.bsu-page .action-chat-btn { padding: 0 12px; font-size: 11px; }}
@media (max-width: 768px) {.bsu-page .top-nav { height: 50px; }
.bsu-page .nav-logo { width: 30px; height: 30px; margin-right: 12px; }
.bsu-page .nav-logo img { width: 30px; height: 30px; }
.bsu-page .nav-tabs { height: 50px; }
.bsu-page .nav-tab { padding: 0 8px; font-size: 10px; letter-spacing: 0; }
.bsu-page .nav-right { gap: 6px; }
.bsu-page .nav-bookings-btn { display: none; }
.bsu-page .nav-icon-btn { width: 36px; height: 36px; }
.bsu-page .nav-icon-btn svg { width: 14px; height: 14px; }
.bsu-page .nav-user { padding: 4px 8px; min-height: 36px; }
.bsu-page .nav-user-name { font-size: 11px; }
.bsu-page .billing-body { flex-direction: column; overflow-y: auto; }
.bsu-page .order-panel {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid var(--border-color);
                max-height: 50vh;
                overflow-y: auto;
            }
.bsu-page .menu-panel { flex: 1; min-height: 300px; }
.bsu-page .order-top { padding: 10px 12px; gap: 8px; }
.bsu-page .order-search { height: 40px; }
.bsu-page .qty-input { width: 60px; height: 40px; font-size: 13px; }
.bsu-page .add-btn { height: 40px; padding: 0 20px; font-size: 13px; }
.bsu-page .order-item { padding: 10px 12px; }
.bsu-page .order-item .item-name { font-size: 13px; }
.bsu-page .order-item .item-amount { font-size: 13px; min-width: 50px; }
.bsu-page .qty-ctrl-btn { width: 30px; height: 30px; font-size: 16px; }
.bsu-page .qty-display { width: 32px; height: 30px; font-size: 13px; }
.bsu-page .comment-row { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
.bsu-page .comment-btn { padding: 6px 12px; font-size: 11px; }
.bsu-page .comment-offer { padding: 0 10px; }
.bsu-page .comment-tax { padding: 0 10px; }
.bsu-page .category-area { padding: 10px 12px; }
.bsu-page .category-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }
.bsu-page .cat-pill { height: 54px; font-size: 11px; }
.bsu-page .cat-nav-card { height: 54px; }
.bsu-page .menu-search-row { padding: 8px 12px; gap: 8px; }
.bsu-page .menu-search { height: 40px; }
.bsu-page .scan-btn { height: 40px; padding: 0 16px; font-size: 12px; }
.bsu-page .food-grid-area { padding: 8px 12px; }
.bsu-page .food-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; }
.bsu-page .food-card .food-name { font-size: 12px; }
.bsu-page .food-card .food-price { font-size: 10px; padding: 3px 8px; }
.bsu-page .food-card { padding: 10px 12px; }
.bsu-page .action-bar { height: auto; flex-wrap: wrap; }
.bsu-page .action-btn { padding: 8px 12px; min-height: 44px; }
.bsu-page .action-btn.kot { padding: 8px 16px; }
.bsu-page .action-info-btn { padding: 8px 12px; min-height: 44px; }
.bsu-page .action-user-btn { padding: 8px 12px; min-height: 44px; }
.bsu-page .action-right-group { margin: 6px 8px 6px 4px; }
.bsu-page .action-right-group .action-btn.estimate, .bsu-page .action-right-group .action-btn.bill-summary, .bsu-page .action-right-group .action-btn.select-server { min-width: 0; }
.bsu-page .action-right-group .action-user-group { flex: 1.5; }
.bsu-page .action-more-btn { width: 48px; }
.bsu-page .action-more-btn svg { width: 18px; height: 18px; }
.bsu-page .action-more-btn span { font-size: 8px; }
.bsu-page .action-group-icon { width: 48px; }
.bsu-page .action-group-icon svg { width: 18px; height: 18px; }
.bsu-page .action-chat-btn { padding: 0 10px; font-size: 11px; }
.bsu-page .action-chat-btn svg { width: 18px; height: 18px; }
.bsu-page .action-delete-btn { width: 48px; }
.bsu-page .action-expand-icon { width: 10px; height: 10px; top: 4px; right: 4px; }}
@media (max-width: 480px) {.bsu-page .top-nav { height: 44px; }
.bsu-page .nav-logo { width: 28px; height: 28px; margin-right: 8px; }
.bsu-page .nav-logo img { width: 28px; height: 28px; }
.bsu-page .nav-tabs { height: 44px; overflow-x: auto; }
.bsu-page .nav-logo { width: 44px; height: 44px; padding: 0 8px; }
.bsu-page .nav-logo img { width: 26px; height: 26px; }
.bsu-page .nav-tab { padding: 0 6px; font-size: 9px; white-space: nowrap; }
.bsu-page .nav-tab .tab-badge { font-size: 8px; padding: 1px 4px; min-width: 16px; }
.bsu-page .nav-right { gap: 4px; }
.bsu-page .nav-icon-btn { width: 32px; height: 32px; border-radius: 6px; }
.bsu-page .nav-icon-btn svg { width: 13px; height: 13px; }
.bsu-page .nav-user { padding: 2px 6px; min-height: 32px; }
.bsu-page .nav-user-name { font-size: 10px; }
.bsu-page .nav-user-chevron { width: 12px; height: 12px; }
.bsu-page .order-panel { max-height: 45vh; }
.bsu-page .menu-panel { min-height: 250px; }
.bsu-page .order-top { padding: 8px; gap: 6px; }
.bsu-page .order-search { height: 36px; padding: 0 10px; }
.bsu-page .order-search svg { width: 16px; height: 16px; }
.bsu-page .order-search input { font-size: 12px; }
.bsu-page .qty-input { width: 48px; height: 36px; font-size: 12px; border-radius: 8px; }
.bsu-page .add-btn { height: 36px; padding: 0 16px; font-size: 12px; border-radius: 8px; }
.bsu-page .order-item { padding: 8px; }
.bsu-page .order-item-main { gap: 6px; }
.bsu-page .order-item .item-delete { width: 24px; height: 24px; }
.bsu-page .order-item .item-delete svg { width: 14px; height: 14px; }
.bsu-page .order-item .item-price-tag { font-size: 11px; }
.bsu-page .order-item .item-num { font-size: 12px; }
.bsu-page .order-item .item-name { font-size: 12px; }
.bsu-page .order-item .item-amount { font-size: 12px; min-width: 40px; }
.bsu-page .order-item .item-more { width: 24px; height: 24px; font-size: 16px; }
.bsu-page .qty-ctrl-btn { width: 26px; height: 26px; font-size: 14px; }
.bsu-page .qty-display { width: 28px; height: 26px; font-size: 11px; }
.bsu-page .sub-items { margin-left: 30px; }
.bsu-page .sub-item .sub-name { font-size: 11px; }
.bsu-page .item-note { margin-left: 30px; font-size: 11px; }
.bsu-page .item-tags { margin-left: 30px; }
.bsu-page .item-tag { font-size: 10px; padding: 2px 8px; }
.bsu-page .item-actions { margin-left: 30px; }
.bsu-page .item-action-btn { padding: 4px 12px; font-size: 11px; border-radius: 6px; }
.bsu-page .comment-row { padding: 6px 8px; gap: 6px; }
.bsu-page .comment-btn { padding: 5px 10px; font-size: 10px; border-radius: 6px; }
.bsu-page .comment-offer { padding: 0 6px; }
.bsu-page .comment-offer .offer-label { font-size: 9px; }
.bsu-page .comment-offer .offer-value { font-size: 12px; }
.bsu-page .comment-tax { padding: 0 6px; }
.bsu-page .comment-tax .tax-label { font-size: 9px; }
.bsu-page .comment-tax .tax-value { font-size: 12px; }
.bsu-page .category-area { padding: 6px 8px; }
.bsu-page .category-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.bsu-page .cat-pill { height: 40px; font-size: 10px; border-radius: 8px; }
.bsu-page .cat-nav-card { height: 40px; border-radius: 8px; }
.bsu-page .menu-search-row { padding: 6px 8px; gap: 6px; }
.bsu-page .menu-search { height: 36px; padding: 0 10px; }
.bsu-page .menu-search svg { width: 16px; height: 16px; }
.bsu-page .menu-search input { font-size: 12px; }
.bsu-page .scan-btn { height: 36px; padding: 0 12px; font-size: 11px; border-radius: 8px; }
.bsu-page .scan-btn svg { width: 16px; height: 16px; }
.bsu-page .food-grid-area { padding: 6px 8px; }
.bsu-page .food-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; }
.bsu-page .food-card { border-radius: 8px; }
.bsu-page .food-card .food-name { font-size: 11px; }
.bsu-page .food-card .food-price { font-size: 9px; padding: 2px 6px; }
.bsu-page .food-card { padding: 8px 10px; border-radius: 8px; }
.bsu-page .action-bar { height: auto; flex-wrap: wrap; gap: 0; }
.bsu-page .action-btn { padding: 6px 8px; min-height: 40px; flex: 1; min-width: 60px; }
.bsu-page .action-btn .action-label { font-size: 8px; letter-spacing: 0.3px; }
.bsu-page .action-btn .action-value { font-size: 11px; }
.bsu-page .action-btn.estimate { padding: 6px 10px; }
.bsu-page .action-btn.kot { padding: 6px 12px; }
.bsu-page .action-btn.kot .action-label { font-size: 10px; }
.bsu-page .action-info-btn { padding: 6px 8px; min-height: 40px; }
.bsu-page .action-info-btn .info-label { font-size: 8px; }
.bsu-page .action-info-btn .info-value { font-size: 10px; }
.bsu-page .action-user-btn { padding: 6px 8px; min-height: 40px; }
.bsu-page .action-user-btn .user-name { font-size: 10px; }
.bsu-page .action-user-btn .user-phone { font-size: 9px; }
.bsu-page .action-icon-btn { width: 40px; min-height: 40px; }
.bsu-page .action-icon-btn svg { width: 16px; height: 16px; }
.bsu-page .action-delete-btn { width: 44px; min-height: 40px; }
.bsu-page .action-delete-btn svg { width: 16px; height: 16px; }
.bsu-page .action-right-group {
                margin: 4px 6px 4px 3px;
                flex-wrap: wrap;
                border-radius: 8px;
            }
.bsu-page .action-right-group .action-btn { padding: 6px 8px; min-height: 36px; }
.bsu-page .action-right-group .action-btn .action-label { font-size: 8px; }
.bsu-page .action-right-group .action-btn .action-value { font-size: 10px; }
.bsu-page .action-right-group .action-user-group { flex: 1 1 100%; border-top: 1px solid rgba(255,255,255,0.08); }
.bsu-page .action-more-btn { width: 40px; min-height: 36px; }
.bsu-page .action-more-btn svg { width: 16px; height: 16px; }
.bsu-page .action-more-btn span { font-size: 7px; }
.bsu-page .action-group-icon { width: 40px; min-height: 36px; }
.bsu-page .action-group-icon svg { width: 16px; height: 16px; }
.bsu-page .action-chat-btn { padding: 0 8px; font-size: 10px; min-height: 36px; gap: 5px; }
.bsu-page .action-chat-btn svg { width: 16px; height: 16px; }
.bsu-page .action-delete-btn { width: 36px; min-height: 36px; }
.bsu-page .action-delete-btn svg { width: 14px; height: 14px; }
.bsu-page .action-expand-icon { width: 8px; height: 8px; top: 3px; right: 3px; }
.bsu-page .customer-search-panel { width: 300px; }
.bsu-page .customer-more-modal { width: 90vw; }}
.bsu-page .vk-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 99998;
        }
.bsu-page .vk-overlay.active { display: block; }
.bsu-page .vk-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 99999;
            background: rgba(17, 19, 24, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-top: 1px solid rgba(255,255,255,0.08);
            padding: 14px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.25s ease;
            box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
        }
.bsu-page .vk-container.active { transform: translateY(0); }
.bsu-page .vk-top-bar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-bottom: 10px;
        }
.bsu-page .vk-close-btn {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            border: none;
            background: rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.9);
            font-size: 22px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
.bsu-page .vk-close-btn:hover { background: rgba(255,255,255,0.15); }
.bsu-page .vk-row {
            display: flex;
            gap: 6px;
            margin-bottom: 6px;
        }
.bsu-page .vk-row:last-child { margin-bottom: 0; }
.bsu-page .vk-key {
            height: 56px;
            min-width: 0;
            padding: 0;
            border: none;
            border-radius: 10px;
            background: rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.9);
            font-size: 18px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.1s;
            flex: 1;
        }
.bsu-page .vk-key:hover { background: rgba(255,255,255,0.18); }
.bsu-page .vk-key:active { background: rgba(65, 133, 244, 0.8); }
.bsu-page .vk-key.shift-key, .bsu-page .vk-key.backspace-key {
            flex: 1.5;
            background: rgba(255,255,255,0.14);
        }
.bsu-page .vk-key.shift-key:hover, .bsu-page .vk-key.backspace-key:hover { background: rgba(255,255,255,0.22); }
.bsu-page .vk-key.shift-key.active { background: rgba(65, 133, 244, 0.8); }
.bsu-page .vk-key.enter-key {
            flex: 2;
            background: rgba(65, 133, 244, 0.85);
            font-size: 15px;
            font-weight: 700;
        }
.bsu-page .vk-key.enter-key:hover { background: rgba(65, 133, 244, 0.95); }
.bsu-page .vk-key.space-key {
            flex: 6;
        }
.bsu-page .vk-key.wide { flex: 1.4; }
.bsu-page .vk-key svg {
            width: 22px;
            height: 22px;
            stroke: #fff;
            fill: none;
            stroke-width: 2;
        }
@media (max-width: 1024px) {.bsu-page .vk-container { padding: 10px 14px 14px; }
.bsu-page .vk-key { height: 50px; font-size: 16px; border-radius: 8px; }
.bsu-page .vk-row { gap: 5px; margin-bottom: 5px; }}
@media (max-width: 768px) {.bsu-page .vk-container { padding: 8px 10px 12px; }
.bsu-page .vk-key { height: 46px; font-size: 15px; border-radius: 7px; }
.bsu-page .vk-key svg { width: 18px; height: 18px; }
.bsu-page .vk-row { gap: 4px; margin-bottom: 4px; }
.bsu-page .vk-close-btn { width: 38px; height: 38px; font-size: 18px; }}
@media (max-width: 480px) {.bsu-page .vk-container { padding: 6px 6px 10px; }
.bsu-page .vk-key { height: 42px; font-size: 14px; border-radius: 6px; }
.bsu-page .vk-key svg { width: 16px; height: 16px; }
.bsu-page .vk-row { gap: 3px; margin-bottom: 3px; }
.bsu-page .vk-close-btn { width: 34px; height: 34px; font-size: 16px; }
.bsu-page .vk-key.enter-key { font-size: 13px; }}
.bsu-page .cover-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--overlay-bg);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
.bsu-page .cover-overlay.active {
            display: flex;
        }
.bsu-page .cover-modal {
            background: var(--modal-bg);
            border-radius: 16px;
            width: 420px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.2);
            overflow: hidden;
            font-family: 'Inter', sans-serif;
        }
.bsu-page .cover-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-alt);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
.bsu-page .cover-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
        }
.bsu-page .cover-table-pill {
            font-size: 13px;
            font-weight: 600;
            color: #4185F4;
            background: #ECF3FE;
            padding: 6px 14px;
            border-radius: 20px;
        }
.bsu-page .cover-body {
            padding: 20px 24px;
        }
.bsu-page .cover-select-wrapper {
            position: relative;
            margin-bottom: 14px;
        }
.bsu-page .cover-select {
            width: 100%;
            height: 60px;
            padding: 0 40px 0 16px;
            border: 1.5px solid var(--border-color);
            border-radius: 10px;
            background: var(--input-bg);
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
        }
.bsu-page .cover-select-arrow {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: #4185F4;
        }
.bsu-page .cover-input-wrapper {
            position: relative;
            margin-bottom: 20px;
        }
.bsu-page .cover-input {
            width: 100%;
            height: 60px;
            padding: 0 44px 0 16px;
            border: 1.5px solid var(--border-color);
            border-radius: 10px;
            background: var(--input-bg);
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
        }
.bsu-page .cover-input::placeholder {
            color: var(--text-placeholder);
        }
.bsu-page .cover-input-clear {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #C4C9D1;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
        }
.bsu-page .cover-keypad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
.bsu-page .cover-key {
            height: 72px;
            border: 1.5px solid var(--border-color);
            border-radius: 10px;
            background: var(--input-bg);
            font-size: 22px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.12s;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
.bsu-page .cover-key:hover {
            background: var(--bg-hover);
        }
.bsu-page .cover-key:active {
            background: var(--bg-secondary);
            transform: scale(0.96);
        }
.bsu-page .cover-footer {
            display: flex;
        }
.bsu-page .cover-btn {
            flex: 1;
            height: 80px;
            border: none;
            font-size: 15px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
.bsu-page .cover-btn.cancel {
            background: #E8A0AD;
            color: #fff;
        }
.bsu-page .cover-btn.cancel:hover {
            background: #DF8A9A;
        }
.bsu-page .cover-btn.next {
            background: #4185F4;
            color: #fff;
        }
.bsu-page .cover-btn.next:hover {
            background: #3070DC;
        }

/* ==================== ui-bootstrap modal chrome — USA settle drawer ==================== */
/* These selectors only match when the modal is opened with windowClass 'bsu-settle-window',
   which happens exclusively on the USA skin code path. Skin1 modals are unaffected. */
.modal.bsu-settle-window .modal-dialog {
    width: 100vw;
    height: 100vh;
    margin: 0;
}
.modal.bsu-settle-window .modal-content {
    width: 100%;
    height: 100vh;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
.modal.bsu-settle-window .bsu-settle-root {
    height: 100vh;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-bg);
}
/* the wrapped legacy settle body scrolls inside the drawer */
.modal.bsu-settle-window .settle-panel .settle-modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
/* the design's .settle-panel is a right drawer (width 92%, margin-left 8%) — keep it full height */
.modal.bsu-settle-window .settle-panel {
    height: 100vh;
}

/* ==================== Angular adaptations ==================== */
/* The shell root replaces the mockup's html/body/.page-container stack: same
   structural props BillingSkin1 gives .bs1-page, so the skin1-style shell layout works. */
.bsu-page {
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-secondary);
    color: var(--text-primary);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* The mockup hides views/panels and toggles them from page JS. In the Angular skin,
   ng-if/ng-show own visibility, so the containers we render must default to visible.
   (ng-hide still wins: Angular sets display:none !important.) */
.bsu-page .billing-view {
    display: flex;
}
.bsu-page .settle-center-default,
.bsu-page .settle-btc-panel,
.bsu-page .settle-cc-panel,
.bsu-page .settle-coupon-panel,
.bsu-page .settle-online-panel,
.bsu-page .settle-other-panel {
    display: flex;
}

/* IMP-16 on takeout cards: bill number de-emphasized when an online order id is primary */
.bsu-page .tc-table-num.tc-num-minor {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Table statuses the mockup didn't cover — same card language as kot/print cards.
   Reserved = teal, online order = red, on-hold = grey. */
.bsu-page .table-card.tc-reserved {
    border: 1px solid #10B48F;
}
.bsu-page .table-card.tc-reserved .tc-top {
    background: var(--active-green-bg);
}
.bsu-page .table-card.tc-reserved .tc-table-num,
.bsu-page .table-card.tc-reserved .tc-customer {
    color: #0E8A6E;
}
.bsu-page .table-card.tc-online {
    border: 1px solid #CC3C5F;
}
.bsu-page .table-card.tc-online .tc-top {
    background: var(--print-time-bg);
}
.bsu-page .table-card.tc-online .tc-table-num,
.bsu-page .table-card.tc-online .tc-customer {
    color: #CC3C5F;
}
.bsu-page .table-card.tc-hold {
    border: 1px solid var(--border-strong);
}
.bsu-page .table-card.tc-hold .tc-top {
    background: var(--bg-secondary);
}
.bsu-page .table-card.tc-hold .tc-table-num,
.bsu-page .table-card.tc-hold .tc-customer {
    color: var(--text-secondary);
}

/* RTL support: mirrors skin1's bs1-right-align behavior for the cart page */
.bsu-page .billing-view.bsu-rtl .billing-body {
    flex-direction: row-reverse;
}

/* ==================== Fix pass 2 (user-reported issues) ==================== */

/* Table grid: the mockup fills a fixed-height page with 1fr rows; inside the skin's
   scrollable wrapper that collapses. Give rows a real minimum so cards keep the
   design's proportions and the wrapper scrolls when needed. */
.bsu-page .table-view .table-grid {
    overflow-y: auto;
    /* floor keeps number + customer + amount visible; 1fr still stretches on tall screens */
    grid-auto-rows: minmax(122px, 1fr);
    /* Explicit row tracks mirror getTablePerPage()'s row count so a partial last
       page keeps the same card size (empty tracks remain) instead of the few
       leftover rows splitting the whole container height between them. */
    grid-template-rows: repeat(4, minmax(122px, 1fr));
}
@media (min-width: 1700px) and (min-height: 1000px) {
    .bsu-page .table-view .table-grid { grid-template-rows: repeat(5, minmax(122px, 1fr)); }
}
@media (min-width: 1900px) and (min-height: 1200px) {
    .bsu-page .table-view .table-grid { grid-template-rows: repeat(6, minmax(122px, 1fr)); }
}
@media (max-height: 799px) {
    .bsu-page .table-view .table-grid { grid-template-rows: repeat(3, minmax(122px, 1fr)); }
}
@media (max-height: 549px) {
    .bsu-page .table-view .table-grid { grid-template-rows: repeat(2, minmax(122px, 1fr)); }
}
/* takeout/delivery grid scrolls with the page content — give cards a real min height */
.bsu-page .takeout-view .table-grid {
    grid-auto-rows: minmax(140px, auto);
    overflow: visible;
}

/* CRM customer search in the action bar: the mockup hides it via page JS and toggles
   it against the user chip. In the skin, ng-hide owns that toggle, so the container
   must default to visible. */
.bsu-page .action-customer-search {
    display: flex;
}

/* Vertical super-category sidebar is always-on in the skin (mockup toggled it). */
.bsu-page .v-cat-sidebar {
    display: flex;
}
.bsu-page .v-cat-nav-top.disabled,
.bsu-page .v-cat-nav-bottom.disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* Action bar: never clip the CRM/customer area — allow the groups to scroll
   horizontally instead of overflowing invisibly. */
.bsu-page .action-left-group {
    min-width: 0;
    overflow-x: auto;
}
.bsu-page .action-right-group {
    min-width: 0;
    overflow-x: auto;
}

/* Category grid rows are content-driven (controller decides how many pills per page) */
.bsu-page .category-grid {
    grid-template-rows: none;
    grid-auto-rows: minmax(42px, auto);
}
.bsu-page .category-grid .cat-nav-card {
    height: auto;
    min-height: 42px;
}

/* Settle drawer 4-column layout (design structure) */
.modal.bsu-settle-window .settle-panel .settle-modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.bsu-page .settle-body-4col {
    flex: 1;
    min-height: 0;
}
.bsu-page .bsu-settle-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 14px 16px;
}
.bsu-page .bsu-settle-panel {
    width: 100%;
}

/* ==================== Fix pass 3 (screenshot findings) ==================== */

/* Food card (no-image): clear the absolute price pill and clamp long names to two
   lines instead of letting them clip invisibly. */
.bsu-page .food-card.no-img {
    padding: 30px 10px 6px;
}
.bsu-page .food-card.no-img .food-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    align-items: center;
    padding: 0;
}

/* Vertical super-category sidebar becomes a horizontal strip on small screens
   instead of breaking the stacked column layout. */
@media (max-width: 768px) {
    .bsu-page .v-cat-sidebar {
        width: 100%;
        flex-direction: row;
        border-left: none;
        border-top: 1px solid #3A3F48;
        height: 64px;
        flex-shrink: 0;
    }
    .bsu-page .v-cat-list {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px;
    }
    .bsu-page .v-cat-pill {
        min-height: 0;
        min-width: 96px;
        height: 100%;
    }
    .bsu-page .v-cat-nav-top,
    .bsu-page .v-cat-nav-bottom {
        display: none;
    }
}

/* Order panel must never collapse when the cart stacks vertically */
@media (max-width: 768px) {
    .bsu-page .order-panel {
        flex-shrink: 0;
    }
    .bsu-page .order-items {
        min-height: 120px;
    }
}

/* ==================== Fix pass 4 (screenshot findings, round 2) ==================== */

/* No-image food card: put the price pill in normal flow with the name directly
   under it (reference layout) so the name is visible at ANY card height. */
.bsu-page .food-card.no-img {
    padding: 8px 10px 6px;
}
.bsu-page .food-card.no-img .food-price {
    position: static;
    align-self: flex-start;
    margin-bottom: 4px;
}
.bsu-page .food-card.no-img .food-name {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0;
}
/* Never let food rows squeeze below a readable height — the grid scrolls instead */
.bsu-page .food-grid {
    grid-auto-rows: minmax(64px, 1fr);
    overflow-y: auto;
}

/* Action bar: a shrunk-to-zero button must clip its label, never overlap neighbours */
.bsu-page .action-btn {
    overflow: hidden;
}
@media (max-width: 768px) {
    .bsu-page .action-right-group .action-btn,
    .bsu-page .action-right-group .action-user-group,
    .bsu-page .action-right-group .action-customer-search {
        flex: 0 0 auto;
    }
}

/* Table card: keep the design's flex ratio (top natural, bottom fills the rest)
   but clip cleanly instead of painting half-rows over the card edge. */
.bsu-page .table-card .tc-bottom {
    overflow: hidden;
    min-height: 0;
}
.bsu-page .tc-customer {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* At stacked (tablet/phone) widths the controller-driven inline grid rows would
   squeeze food cards into slivers — enforce a readable floor (!important is
   required to beat the ng-style inline value) and let the grid scroll. */
@media (max-width: 768px) {
    .bsu-page .food-grid {
        grid-template-rows: none !important;
        grid-auto-rows: minmax(76px, 1fr);
    }
    .bsu-page .food-grid .cat-nav-card {
        grid-column: -2 / -1 !important;
        grid-row: auto !important;
    }
}

/* ==================== Fix pass 5 (user feedback round 2) ==================== */

/* KOT separator: decorative gear chip on the left (mockup .kot-icon) */
.bsu-page .kot-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(107, 63, 160, 0.12);
    color: #6B3FA0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bsu-page .kot-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
}

/* Table view cards: 50/50 halves (per user) — tinted top and white bottom
   split the card equally; border-box because this section is outside the
   .bsu-scope reset. (This scoped block outranks the generic .tc-top/.tc-bottom
   rules, so it must carry the same 50/50 spec — it previously capped the
   bottom at 46px, which clipped the waiter/3-dot row in the table view only.) */
.bsu-page .table-view .table-card .tc-top {
    flex: 0 0 50%;
    height: 50%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.bsu-page .table-view .table-card .tc-bottom {
    flex: 0 0 50%;
    height: 50%;
    max-height: none;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* Category pills: long names ellipsize inside the pill instead of overflowing */
.bsu-page .cat-pill {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.bsu-page .v-cat-pill {
    overflow: hidden;
}

/* Qty controls: never wrap or misalign, fixed control sizes */
.bsu-page .item-controls {
    flex-wrap: nowrap;
    align-items: center;
    flex-shrink: 0;
}
.bsu-page .qty-ctrl-btn {
    flex-shrink: 0;
}
.bsu-page .qty-display {
    flex-shrink: 0;
    text-align: center;
}

/* Out-of-stock items: light red hue (controller returns 'item-class-red') */
.bsu-page .food-card.item-class-red {
    background: #FFF1F4;
    border: 1px solid #FFD4DE;
}
.bsu-page .food-card.item-class-red .food-name {
    color: #CC3C5F;
}
/* Punched-item highlight parity */
.bsu-page .food-card.item-punched {
    border: 1.5px solid #10B48F;
}

/* Action bar: PRINT KOT takes double space; when accept/reject are hidden it
   absorbs their room automatically via flex */
.bsu-page .action-left-group .action-btn.kot[accesskey="p"] {
    flex: 2 1 auto;
}

/* Customer chip: compact, tidy, never stretched across leftover space
   (matches the (0,3,0) specificity of the mockup's stretched rule) */
.bsu-page .action-right-group .action-user-group {
    flex: 0 1 auto;
    margin-left: auto;
}
.bsu-page .action-user-btn {
    max-width: 190px;
}
.bsu-page .action-user-btn .user-name,
.bsu-page .action-user-btn .user-phone {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

/* Server slot + customer search widths (moved from inline styles so media
   queries can relax them) */
.bsu-page .action-btn.select-server {
    min-width: 150px;
}
.bsu-page .action-customer-search {
    min-width: 210px;
}
@media (max-width: 768px) {
    .bsu-page .action-btn.select-server,
    .bsu-page .action-customer-search {
        min-width: 120px;
    }
}

/* Long category names: flex buttons cannot ellipsize their anonymous text child —
   allow a clean 2-line wrap inside the fixed-height pill instead */
.bsu-page .cat-pill {
    white-space: normal;
    word-break: break-word;
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
}

/* Light-theme variables from design-usa/billing.html :root — the generator
   dropped this block (it was glued to the @import line); the dark equivalents
   were already present. Restores the table-card tints in the default theme. */
.bsu-page {
    --active-green-bg: #E7F7F4;
    --active-yellow-bg: #FFF8E6;
    --allergen-tag-bg: #FFF1F4;
    --backspace-stroke: #373C44;
    --bill-comment-bg: #fff;
    --cat-nav-bg: #f9f9fb;
    --cat-nav-hover: #E7EAEE;
    --discount-tag-bg: #E7F7F4;
    --dropdown-item-bg: #F9FAFB;
    --dropdown-item-hover: #F1F2F5;
    --edit-btn-bg: #F1F2F5;
    --edit-btn-hover: #DEE2E7;
    --food-nav-bg: #fff;
    --food-nav-hover: #F1F2F5;
    --kot-comment-bg: #E7F7F4;
    --kot-comment-hover: #B7E9DD;
    --kot-time-bg: #E7F7F4;
    --kot-top-bg: #F3EFF9;
    --logout-bg: #FFF1F4;
    --logout-hover-bg: #FFD4DE;
    --mega-menu-item-active: #F1F2F5;
    --mega-menu-item-bg: #fff;
    --mega-menu-item-hover: #F9FAFB;
    --more-btn-active: #E7EAEE;
    --more-btn-hover: #F1F2F5;
    --more-tab-active-bg: #F1F2F5;
    --nav-icon-stroke: #666;
    --passcode-dot-bg: #fff;
    --passcode-dot-border: #DEE2E7;
    --passcode-key-active: #DEE2E7;
    --passcode-key-bg: #F1F2F5;
    --passcode-key-hover: #E7EAEE;
    --passcode-modal-bg: #fff;
    --passcode-title-color: #040911;
    --print-time-bg: #FFF1F4;
    --print-top-bg: #E7F7F4;
    --qty-ctrl-bg: #fff;
    --qty-ctrl-hover: #F1F2F5;
    --total-count-bg: #F1F2F5;
}

/* ==================== Fix pass 6 (audit pass 1 confirmed findings) ==================== */

/* Settle header: settleBill.css paints eyebrow/bill white for its dark header; the
   design header is light — make the texts readable */
.bsu-page .settle-header-eyebrow {
    color: var(--text-secondary);
}
.bsu-page .settle-header-bill {
    color: var(--text-secondary);
}
.bsu-page .settle-header-bill strong {
    color: var(--text-primary);
}

/* @768 action-bar crush: the base rule at (0,4,0) re-enables shrinking; repeat the
   same specificity here so buttons keep natural width and the group scrolls */
@media (max-width: 768px) {
    .bsu-page .action-right-group .action-btn.estimate,
    .bsu-page .action-right-group .action-btn.bill-summary,
    .bsu-page .action-right-group .action-btn.select-server {
        flex: 0 0 auto;
        min-width: 120px;
    }
}

/* Settle drawer responsiveness (the 4-col body had no breakpoint handling) */
@media (max-width: 768px) {
    .bsu-page.bsu-settle-root .settle-panel {
        width: 100%;
        margin-left: 0;
    }
    .bsu-page .settle-body-4col {
        flex-direction: column;
        overflow-y: auto;
    }
    .bsu-page .settle-col-info {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 8px 10px;
        gap: 8px;
        border-bottom: 1px solid var(--border-color);
    }
    .bsu-page .settle-info-card-v {
        min-width: 118px;
        flex-shrink: 0;
    }
    .bsu-page .settle-col-payment {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        border-left: none;
        border-top: 1px solid var(--border-color);
        order: -1;
    }
    .bsu-page .settle-payment-option {
        min-width: 132px;
        flex-shrink: 0;
    }
    .bsu-page .bsu-settle-center {
        overflow: visible;
    }
}

/* v-cat strip renders above the panels when the cart stacks, instead of a clipped
   sliver at the bottom of the scroll flow */
@media (max-width: 768px) {
    .bsu-page .v-cat-sidebar {
        order: -1;
    }
}

/* Table grid columns follow the controller's getTablePerPage breakpoints
   (1400/1000/850/700/480) so pages are never under-filled */
@media (max-width: 1399px) {
    .bsu-page .takeout-view .table-grid,
    .bsu-page .table-view .table-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 999px) {
    .bsu-page .takeout-view .table-grid,
    .bsu-page .table-view .table-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 849px) {
    .bsu-page .takeout-view .table-grid,
    .bsu-page .table-view .table-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 699px) {
    .bsu-page .takeout-view .table-grid,
    .bsu-page .table-view .table-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
    .bsu-page .takeout-view .table-grid,
    .bsu-page .table-view .table-grid { grid-template-columns: repeat(1, 1fr); }
}

/* Food-type price colors (veg/non-veg/jain/vegan) — parity with skin1's map */
.bsu-page .food-price.green  { background: rgba(16,180,143,0.10); color: #0E8A6E; border-color: rgba(16,180,143,0.35); }
.bsu-page .food-price.orange { background: rgba(255,152,0,0.12);  color: #B36B00; border-color: rgba(255,152,0,0.4); }
.bsu-page .food-price.blue   { background: rgba(33,150,243,0.10); color: #1769AA; border-color: rgba(33,150,243,0.35); }

/* Real page-dots (design): active dot gets the wide bar */
.bsu-page .bottom-bar .page-dot {
    cursor: pointer;
}

/* Legacy settle two-column rows collapse to one column on small screens */
@media (max-width: 768px) {
    .bsu-page .settle-pay-cols {
        display: grid;
        grid-template-columns: 1fr;
    }
    .bsu-page .settle-pay-cols > div {
        width: 100%;
        max-width: none;
    }
}

/* Settle drawer: legacy denomination-count inputs align with the drawer's controls */
.bsu-page .settle-pay-cols table input {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: 32px;
    padding: 0 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    outline: none;
}

/* ==================== Fix pass 7 (action bar arrangement) ==================== */

/* Right group: secondary actions scroll in their own strip; the customer/CRM area
   is pinned after it and can never leave the screen */
.bsu-page .action-right-group {
    overflow: visible;
}
.bsu-page .bsu-actions-scroll {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.bsu-page .bsu-actions-scroll::-webkit-scrollbar {
    display: none;
}
.bsu-page .bsu-actions-scroll .action-btn {
    flex: 0 0 auto;
}
/* pinned CRM area: chip stays compact, search keeps a workable width */
.bsu-page .action-right-group .action-user-group {
    flex: 0 0 auto;
    margin-left: 0;
    max-width: 340px;
}
.bsu-page .action-right-group .action-customer-search {
    flex: 0 0 auto;
    width: 230px;
    min-width: 0;
}

/* Waiter / delivery selects: match the dark action bar instead of stock white */
.bsu-page .action-btn.select-server {
    padding: 6px 10px;
    min-width: 150px;
    max-width: 190px;
}
.bsu-page .action-btn.select-server select.form-control {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    height: 24px;
    line-height: 22px;
    font-size: 11px;
    padding: 0 8px;
    box-shadow: none;
    width: 100%;
}
.bsu-page .action-btn.select-server select.form-control option {
    color: #373C44;
    background: #fff;
}
.bsu-page .action-btn.select-server .action-label {
    margin-bottom: 2px;
}

/* Scroll-strip buttons keep natural width (must outrank the base
   .action-right-group .action-btn.estimate/.bill-summary/.select-server flex:1 rules) */
.bsu-page .action-right-group .bsu-actions-scroll .action-btn,
.bsu-page .action-right-group .bsu-actions-scroll .action-btn.estimate,
.bsu-page .action-right-group .bsu-actions-scroll .action-btn.bill-summary,
.bsu-page .action-right-group .bsu-actions-scroll .action-btn.select-server {
    flex: 0 0 auto;
    min-width: 108px;
}
.bsu-page .action-right-group .bsu-actions-scroll .action-btn.select-server {
    min-width: 160px;
}

/* Settle footer: the primary Settle button matches the design Cancel pill's size
   (Cancel gets 155x60 from the mockup rule; the legacy settle class stayed small) */
.bsu-page .settle-footer .settle-settle-btn {
    min-width: 155px;
    height: 60px;
    padding: 0 28px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}
.bsu-page .settle-footer .settle-cancel-btn {
    margin-left: 12px;
}

/* ==================== Fix pass 8 ==================== */

/* Category prev/next: anchored to the right edge of the category area — it never
   moves regardless of how many pills the current page has */
.bsu-page .category-area .cat-nav-card {
    position: absolute;
    top: 14px;
    right: 16px;
    bottom: 6px;
    width: 92px;
    height: auto;
    z-index: 2;
}
.bsu-page .category-area .category-grid {
    margin-right: 104px;
}

/* Customer search: grows to fit the optional mode buttons (room / add-name /
   loyalty id / membership id) instead of crushing or dropping them */
.bsu-page .action-right-group .action-customer-search {
    flex: 0 1 auto;
    width: auto;
    min-width: 230px;
    max-width: 400px;
    padding: 0 8px;
}
.bsu-page .action-customer-search .search-icon-btn {
    flex: 0 0 auto;
}
.bsu-page .action-customer-search input {
    flex: 1 1 70px;
    min-width: 70px;
}

/* Bottom bar polish: clear zone separation and consistent breathing room */
.bsu-page .action-right-group .action-user-group,
.bsu-page .action-right-group .action-customer-search {
    margin-top: 6px;
    margin-bottom: 6px;
    align-self: stretch;
}
.bsu-page .bsu-actions-scroll {
    border-right: 1px solid rgba(255,255,255,0.12);
    margin-right: 6px;
}

/* ==================== Info chips (timer / covers) ==================== */
.bsu-page .action-left-group .bsu-info-chip {
    flex: 0 0 auto;
    min-width: 82px;
}
.bsu-page .bsu-info-chip.bsu-chip-warn .action-value {
    color: #FFC860;
}
.bsu-page .bsu-info-chip.bsu-chip-danger .action-value {
    color: #FF6F92;
}
.bsu-page .bsu-info-chip.bsu-chip-danger .action-label {
    color: rgba(255,111,146,0.8);
}

/* ==================== Fix pass 9 (qty control alignment) ==================== */

/* Rows center all cells vertically (item name block, qty pill, amount, dots) */
.bsu-page .order-item-main {
    align-items: center;
}

/* Seamless segmented qty pill (the stale mockup copy split it into three
   separately-bordered boxes with gaps — restore the joined design control) */
.bsu-page .order-item .item-controls,
.bsu-page .sub-item .item-controls {
    gap: 0;
    min-width: 100px;
    justify-content: center;
    align-self: center;
}
.bsu-page .qty-ctrl-btn {
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--border-color);
    background: var(--qty-ctrl-bg);
}
.bsu-page .qty-ctrl-btn.minus {
    border-radius: 8px 0 0 8px;
    border-right: none;
    border-color: var(--border-color);
    color: #CC3C5F;
}
.bsu-page .qty-ctrl-btn.plus {
    border-radius: 0 8px 8px 0;
    border-left: none;
    border-color: var(--border-color);
    color: #10B48F;
}
.bsu-page .qty-display {
    width: 34px;
    height: 32px;
    border: 1.5px solid var(--border-color);
    border-radius: 0;
}
/* KOT rows show the qty alone — same column band, rounded standalone box */
.bsu-page .item-controls .qty-display:first-child:last-child {
    border-radius: 8px;
}
/* Amount cell centers on the same axis in every section */
.bsu-page .order-item .item-amount,
.bsu-page .sub-item .item-amount {
    align-self: center;
}

/* Category prev/next matches the category pill box size at every breakpoint
   (still pinned top-right; never moves) */
.bsu-page .category-area .cat-nav-card {
    bottom: auto;
    height: 70px;
}
@media (max-width: 1024px) {
    .bsu-page .category-area .cat-nav-card { height: 60px; }
}
@media (max-width: 768px) {
    .bsu-page .category-area .cat-nav-card { height: 54px; }
}
@media (max-width: 480px) {
    .bsu-page .category-area .cat-nav-card { height: 40px; }
}

/* ==================== Fix pass 10 (category nav placement, per user) ==================== */
/* Prev/next lives IN the grid: always the LAST cell of the LAST row, sized like a
   category pill cell. (Replaces the earlier absolute pinning.) */
.bsu-page .category-area .cat-nav-card {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    min-height: 0;
    grid-column: -2 / -1;
    grid-row: -2 / -1;
}
.bsu-page .category-area .category-grid {
    margin-right: 0;
    grid-template-rows: repeat(2, minmax(70px, auto));
}
@media (max-width: 1024px) {
    .bsu-page .category-area .category-grid { grid-template-rows: repeat(2, minmax(60px, auto)); }
    .bsu-page .category-area .cat-nav-card { height: auto; }
}
@media (max-width: 768px) {
    .bsu-page .category-area .category-grid { grid-template-rows: repeat(2, minmax(54px, auto)); }
    .bsu-page .category-area .cat-nav-card { height: auto; }
}
@media (max-width: 480px) {
    .bsu-page .category-area .category-grid { grid-template-rows: repeat(2, minmax(40px, auto)); }
    .bsu-page .category-area .cat-nav-card { height: auto; }
}

/* ==================== Fix pass 11 (bottom bar fitting) ==================== */
/* Left group hugs its content (NET chip removed); PRINT KOT keeps prominence;
   the right group absorbs the freed space so its boxes stop cramping */
.bsu-page .action-left-group {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
}
.bsu-page .action-left-group .action-btn.kot[accesskey="p"] {
    min-width: 170px;
}
.bsu-page .action-right-group {
    flex: 1 1 auto;
    min-width: 0;
}


/* Search drawer: single flat field (the bordered input inside the bordered
   section read as a box-in-a-box) */
.bsu-page .customer-search-box input {
    border: none;
    background: var(--bg-secondary);
    height: 52px;
    outline: none;
}
.bsu-page .customer-search-box input:focus {
    box-shadow: 0 0 0 2px rgba(65,133,244,0.35);
}

/* ==================== Fix pass 12 (bar CRM area: single box + visible text) ==================== */
/* The right group's border is THE box — the search area inside it goes flat so
   the bar reads as one container instead of box-over-box */
.bsu-page .action-right-group .action-customer-search {
    border: none;
    background: transparent;
    border-radius: 0;
}
/* Typed text and placeholders must read on the dark bar in BOTH themes */
.bsu-page .action-customer-search input {
    color: #fff;
    caret-color: #fff;
}
.bsu-page .action-customer-search input::-webkit-input-placeholder {
    color: rgba(255,255,255,0.45);
}
.bsu-page .action-customer-search input::placeholder {
    color: rgba(255,255,255,0.45);
}
/* Any bootstrap form-control that lands inside the dark CRM area follows suit */
.bsu-page .action-customer-search .form-control {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #fff;
}



/* ==================== bs1 variable aliases ====================
   The navbar + legend bar are REUSED from billingSkin1 and their CSS consumes
   .bs1-page variables; inside .bsu-page some names were undefined, so var()
   resolved invalid (transparent navbar bg, missing borders). Define ONLY the
   names the USA skin does not declare anywhere — overlapping names keep their
   USA values so no USA component changes. */
.bsu-page {
    --badge-unlock-bg: #F1F2F5;
    --badge-unlock-border: #DEE2E7;
    --badge-unlock-color: #6A6F77;
    --bg-body: #F1F2F5;
    --bg-card: #fff;
    --bg-input: #fff;
    --bg-surface: #fff;
    --bg-surface-alt: #FAFBFC;
    --bg-surface-hover: #F9FAFB;
    --bills-count-bg: #DEE2E7;
    --bills-header-bg: #F7F8FA;
    --bills-row-border: #F1F2F5;
    --bills-tab-bg: #fff;
    --bills-tab-border: #E7EAEE;
    --border: #E7EAEE;
    --border-hover: #BABFC8;
    --chat-input-bg: #FAFBFC;
    --chat-received: #F1F2F5;
    --dots-bg: rgba(0,0,0,0.07);
    --lang-active: #fff;
    --lang-track: #E7EAEE;
    --more-card-bg: #fff;
    --more-card-border: #E7EAEE;
    --overlay: rgba(0,0,0,0.35);
    --pagination-bg: #fff;
    --shadow-lg: rgba(4,9,17,0.12);
    --shadow-md: rgba(4,9,17,0.08);
    --shadow-sm: rgba(4,9,17,0.06);
    --table-empty-bg: #fff;
    --table-num-empty: #D5D9E0;
    --text-faint: #BABFC8;
    --text-on-blue: #fff;
}
.bsu-page[data-theme="dark"] {
    --badge-unlock-bg: #22262E;
    --badge-unlock-border: #343840;
    --badge-unlock-color: #A0A5AD;
    --bg-body: #111318;
    --bg-card: #1E2128;
    --bg-input: #22262E;
    --bg-surface: #1A1D24;
    --bg-surface-alt: #1E2128;
    --bg-surface-hover: #22262E;
    --bills-count-bg: #343840;
    --bills-header-bg: #1A1D24;
    --bills-row-border: #22262E;
    --bills-tab-bg: #22262E;
    --bills-tab-border: #343840;
    --border: #2C3038;
    --border-hover: #4A4F58;
    --chat-input-bg: #1A1D24;
    --chat-received: #22262E;
    --dots-bg: rgba(255,255,255,0.08);
    --lang-active: #373C44;
    --lang-track: #2C3038;
    --more-card-bg: #1E2128;
    --more-card-border: #2C3038;
    --overlay: rgba(0,0,0,0.55);
    --pagination-bg: #1E2128;
    --shadow-lg: rgba(0,0,0,0.35);
    --shadow-md: rgba(0,0,0,0.25);
    --shadow-sm: rgba(0,0,0,0.20);
    --table-empty-bg: #1E2128;
    --table-num-empty: #3A3F48;
    --text-faint: #4A4F58;
    --text-on-blue: #fff;
}

/* ==================== QA round: tiles + selects ==================== */
/* 6. Item names centered on tiles (both modes) */
.bsu-page .food-card .food-name { text-align: center; }
.bsu-page .food-card.no-img .food-name {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 7. Redesigned Select Waiter / Delivery dropdowns (USA only) */
.bsu-page select.bsu-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 30px;
    margin-top: 3px;
    padding: 4px 26px 4px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-primary) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6F77' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
    background-size: 14px 14px;
    border: 1.5px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.bsu-page select.bsu-select:focus {
    border-color: #4185F4;
    box-shadow: 0 0 0 3px rgba(65,133,244,.12);
}
.bsu-page select.bsu-select:disabled { opacity: .55; cursor: not-allowed; }


/* 3-dot on EMPTY table cards: pinned to the BOTTOM-right corner */
.bsu-page .table-card { position: relative; }
.bsu-page .tc-more-empty {
    position: absolute;
    top: auto;
    bottom: 4px;
    right: 4px;
    margin: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
}
/* Empty table number: black like the default design (was placeholder gray) */
.bsu-page .table-card .empty-num {
    color: var(--text-primary);
}
/* Occupied card: BOTH bottom rows (time+amount, waiter+3dot) must fit inside
   the 1fr grid row — the grid clips overflow, and the loose vertical rhythm
   pushed the waiter/3-dot row out of sight on busy screens. */
.bsu-page .tc-top { padding: 8px 12px 5px; gap: 2px; }
.bsu-page .tc-bottom { padding: 5px 12px 7px; gap: 3px; }
.bsu-page .tc-server-row { min-height: 22px; }
.bsu-page .tc-more-btn {
    width: 32px;
    height: 26px;
    min-width: 32px;
    margin: -2px -6px -2px 0;
}

/* Table card halves: the tinted top (number/covers/customer) and the white
   bottom (time/amount + waiter/3-dot) split the card exactly 50/50.
   box-sizing must be explicit: the table grid is NOT under .bsu-scope (whose
   reset applies border-box), so 50% was computed content-box — each half grew
   by its padding and the waiter row spilled past the card edge. */
.bsu-page .tc-top {
    flex: 0 0 50%;
    height: 50%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.bsu-page .tc-bottom {
    flex: 0 0 50%;
    height: 50%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* ==================== Combo rows: column alignment + compact buttons ==================== */
/* Sub-item rows (addons, combo constituents, combo child addons) all carry the
   same 5 cells [lead | name | qty | amount | trail], but as flex rows the
   amount cell was min-width only — a wide amount pushed that row's qty left,
   zig-zagging the qty column. Fixed grid tracks lock every column. */
.bsu-page .sub-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 100px 76px 28px;
    gap: 10px;
    align-items: center;
}
.bsu-page .sub-item .item-controls {
    justify-self: center;
    min-width: 0;
}
.bsu-page .sub-item .item-amount {
    min-width: 0;
    justify-self: end;
}
.bsu-page .sub-item .item-more { justify-self: end; }

/* Combo Edit / Upgrade buttons: smaller footprint */
.bsu-page .item-action-btn {
    padding: 3px 10px;
    font-size: 11px;
    border-radius: 6px;
    gap: 4px;
}
.bsu-page .item-action-btn svg { width: 12px; height: 12px; }
.bsu-page .sub-item .item-more {
    width: 28px;
    min-width: 0;
    padding: 0;
    font-size: 8px;
    letter-spacing: 0;
    overflow: hidden;
}

/* ==================== Fix pass 13 (US view issues, 2026-07-23) ==================== */

/* Cart list: the skin hides every scrollbar globally, so a long bill looked
   clipped with no cue that more items exist. Re-expose a slim scrollbar on the
   cart list only (default view keeps its native scrollbar here too). */
/* NOTE: do NOT set the standard scrollbar-width here — any value on it makes
   Chrome ignore the ::-webkit-scrollbar styling below (which is what forces a
   classic, always-visible scrollbar instead of a hide-when-idle overlay). */
.bsu-page .order-items::-webkit-scrollbar { display: block; width: 6px; }
.bsu-page .order-items::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.bsu-page .order-items::-webkit-scrollbar-track { background: transparent; }

/* No-image tile: the QA-round display:flex override killed the -webkit-box
   line clamp, so long names center-overflowed and clipped at BOTH edges (reads
   as "only one line shows"). Restore the clamp box (5 lines ≈ any card height),
   keep the name vertically centered via auto margins instead of flex:1. */
.bsu-page .food-card.no-img .food-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    flex: 0 1 auto;
    align-self: stretch;
    margin-top: auto;
    margin-bottom: auto;
    min-height: 0;
}

/* Image tile caption: the body row never centered its shrink-to-fit name
   (text-align:center was inert), and long names hard-clipped mid-glyph.
   Center the row and clamp the name to 2 lines like a real caption. */
.bsu-page .food-card .food-card-body { justify-content: center; }
.bsu-page .food-card .food-card-body .food-name {
    flex: 0 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-align: center;
    /* hard cap at exactly 2 line boxes, and no own padding: overflow crops at
       the padding edge, so clipped line 3 would still paint a sliver inside
       bottom padding (the .food-card-body provides the spacing) */
    max-height: 2.6em;
    padding: 0;
}

/* Image tile price pill: the translucent pastel pill (fine on flat card
   backgrounds) disappears over photos. Over an image use a dark scrim with
   white/bright text — the veg/non-veg identity survives in text+border color. */
.bsu-page .food-card:not(.no-img) .food-price {
    background: rgba(17, 19, 24, 0.72);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
}
.bsu-page .food-card:not(.no-img) .food-price.green { color: #3DDBB4; border-color: rgba(16, 180, 143, 0.7); background: rgba(17, 19, 24, 0.72); }
.bsu-page .food-card:not(.no-img) .food-price.non-veg-price { color: #FF9DB6; border-color: rgba(255, 111, 146, 0.7); background: rgba(17, 19, 24, 0.72); }
.bsu-page .food-card:not(.no-img) .food-price.orange { color: #FFB74D; border-color: rgba(255, 152, 0, 0.7); background: rgba(17, 19, 24, 0.72); }
.bsu-page .food-card:not(.no-img) .food-price.blue { color: #64B5F6; border-color: rgba(33, 150, 243, 0.7); background: rgba(17, 19, 24, 0.72); }

/* Item arc (enable_item_menu_options_via_arc): port of the default view's
   .setting__button1 quarter-circle — the skin previously rendered a bare
   unstyled "..." that was nearly invisible. Border-drawn 34px arc pinned to
   the bottom-right corner, dots overlaid in white. */
.bsu-page .food-card .food-arc {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 34px solid rgba(23, 26, 31, 0.82);
    border-bottom: 34px solid rgba(23, 26, 31, 0.82);
    border-top-left-radius: 60px;
    cursor: pointer;
    z-index: 3;
}
.bsu-page .food-card .food-arc span {
    position: absolute;
    top: 14px;
    left: -24px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    letter-spacing: 1px;
    pointer-events: none;
}

/* KOT separator gear is now the actionable settings button (the redundant
   3-dot button is gone) — give it button affordances on top of the decorative
   chip styling it inherits. */
.bsu-page .kot-separator .kot-icon {
    border: none;
    padding: 0;
    cursor: pointer;
}
.bsu-page .kot-separator .kot-icon:hover { background: rgba(107, 63, 160, 0.22); }
.bsu-page .kot-separator .kot-icon[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ==================== Fix pass 14 (QA round 2, 2026-07-25) ==================== */

/* Selected super-category pill: the translucent 15%-blue tint read as "not
   selected" (and washed out over custom category colors) — use the solid
   selected treatment the category/idm pills already use. */
.bsu-page .v-cat-pill.active {
    background: #4185F4;
    color: #fff;
    border-color: #4185F4;
}

/* Menu surface: fast/double taps were text-selecting ("copying") the labels of
   item cards, category pills and super-category pills — the table view already
   guards this inline; do the same for the whole menu panel + supercat rail.
   Inputs stay selectable for editing. */
.bsu-page .menu-panel,
.bsu-page .v-cat-sidebar {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.bsu-page .menu-panel input,
.bsu-page .menu-panel textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ==================== Item-detail modal — express offer + comments (2026-07-28) ====================
   Port of design-usa/cart-page.html `.item-detail-overlay.active` onto ItemquantityCtrl.
   The `.bsu-page .idm-*` block earlier in this file is the generated mockup CSS; everything
   below is the Angular adaptation: ui-bootstrap modal chrome, Bootstrap .form-control
   bleed-through, controller-emitted state classes, and the controls the mockup never drew
   (super-category strip, min-addon badges, veg dot, image fallback, custom-comment row).
   All of it is inert unless the modal is opened with windowClass 'bsu-item-detail-window'
   or inside a .bsu-page root — i.e. only on billing_skin=usa. */

/* ---- ui-bootstrap modal chrome ---- */
.modal.bsu-item-detail-window .modal-dialog {
    width: 100vw;
    height: 100vh;
    margin: 0;
}
.modal.bsu-item-detail-window .modal-content {
    width: 100%;
    height: 100vh;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
/* .bsu-page paints an opaque page background and is the shell root elsewhere; here it only
   needs to supply the design tokens, so the overlay child owns all the visible chrome. */
.modal.bsu-item-detail-window .bsu-item-detail-root {
    display: block;
    height: 100vh;
    background: transparent;
}

/* ---- Bootstrap .form-control bleed-through ----
   The inputs keep .form-control (directives and ui-select markup expect it) but must not
   inherit its inset shadow / 34px box. .bsu-page .idm-* already outranks .form-control on
   every geometry property; only the shadow needs an explicit reset. */
.bsu-page .idm-input.form-control,
.bsu-page .idm-select.form-control {
    box-shadow: none;
    display: block;
}
/* The design's chevron is a background image, so the option text needs to be kept clear of
   it — the mockup's placeholder strings were short enough to hide this. */
.bsu-page .idm-select { padding-right: 38px; }
/* The item-comment textarea sits beside the allergy select in the same .idm-form-row —
   it matches that control's height at every tier so the row reads as one even band
   instead of one tall box next to a short one. */
.bsu-page textarea.idm-input {
    height: 52px;
    padding: 8px 16px;
    line-height: 1.35;
    resize: none;
}
.bsu-page .idm-input-code {
    text-align: center;
    letter-spacing: 6px;
    font-size: 20px;
    font-weight: 700;
}
.bsu-page .idm-fp-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #10B48F;
    cursor: pointer;
}
.bsu-page .idm-divider {
    border: none;
    border-top: 1.5px solid var(--bg-secondary);
    margin: 0 0 24px;
}
.bsu-page .idm-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}
.bsu-page .idm-check input[type="checkbox"] { margin: 0; }
.bsu-page .idm-custom-comment {
    display: flex;
    gap: 10px;
    align-items: center;
}
.bsu-page .idm-custom-comment .idm-input { flex: 1; }
.bsu-page .idm-add-btn-sm {
    height: 52px;
    padding: 0 22px;
    border-radius: 12px;
    flex-shrink: 0;
}
/* A .idm-form-row holding a single field keeps the mockup's half-width column, so empty
   spacer groups must not collapse. */
.bsu-page .idm-form-row > .idm-form-group:empty { flex: 1; }

/* ---- ui-select, dressed as .idm-input ---- */
.bsu-page .idm-form-group .ui-select-container { width: 100%; }
.bsu-page .idm-form-group .ui-select-bootstrap > .ui-select-match > .btn {
    height: 52px;
    line-height: 49px;
    padding: 0 16px;
    text-align: left;
    font-size: 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: none;
}
.bsu-page .idm-form-group .ui-select-bootstrap > .ui-select-search {
    height: 52px;
    padding: 0 16px;
    font-size: 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    box-shadow: none;
}
.bsu-page .idm-form-group .ui-select-multiple.ui-select-bootstrap {
    min-height: 52px;
    padding: 8px 10px;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: none;
}
.bsu-page .idm-form-group .ui-select-multiple.ui-select-bootstrap input.ui-select-search {
    height: 32px;
    border: none;
    box-shadow: none;
}

/* ---- Selected add-ons ----
   Header '#' spans the delete button + gap + row number so the columns line up:
   32px button + 12px gap + 20px number = 64px. */
.bsu-page .idm-addons-header span:first-child { width: 64px; }
.bsu-page .idm-addon-empty {
    padding: 22px 0;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 1px solid var(--bg-secondary);
}
.bsu-page .idm-addon-delete[disabled] { opacity: 0.4; cursor: not-allowed; }
.bsu-page .idm-addon-offer {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 200, 96, 0.18);
    color: #D4A12A;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.bsu-page .idm-addon-offer-x { margin-left: 6px; font-size: 16px; font-weight: 700; }
.bsu-page .idm-addon-offer-apply {
    margin-left: 8px;
    padding: 4px 12px;
    border: none;
    border-radius: 8px;
    background: #10B48F;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}
.bsu-page .idm-addon-offer-apply:hover { background: #0D9A7A; }
/* Read-only quantity (ratified): deleteAddon() removes the whole row and no decrement
   exists, so the mockup's -/+ stepper would misrepresent what the buttons do. Without the
   stepper the mockup's 160px column is dead space that squeezes the add-on name into a
   3-line wrap on a 1024px terminal. */
.bsu-page .idm-addons-header span:last-child,
.bsu-page .idm-addon-qty { width: 56px; }
.bsu-page .idm-addon-name { min-width: 0; word-break: break-word; }
.bsu-page .idm-addon-offer { white-space: nowrap; }

/* ---- Search row ----
   ui-bootstrap's typeahead dropdown is absolutely positioned; without a positioned
   ancestor it escapes the search box. */
.bsu-page .idm-right-search-input { position: relative; }
.bsu-page .idm-right-search-input .dropdown-menu { top: 100%; left: 0; right: 0; }
.bsu-page .idm-search-error {
    padding: 0 20px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #ff6f92;
}

/* ---- Category + super-category strips ----
   6 columns, not the mockup's 5: the pagination page size is 5 (hardcoded in
   billing.addonManagement.service.js alongside numPages), so 5 pills + the nav cell fit
   one row exactly. Changing either number requires changing both. */
.bsu-page .idm-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Pin the prev/next pair to the last column. Auto-placement put it straight after the
   last pill, so a page with fewer than 5 categories left it floating mid-row. */
.bsu-page .idm-cats .idm-cat-nav { grid-column: 6 / 7; }
.bsu-page .idm-cat-pill {
    flex-direction: column;
    gap: 2px;
    padding: 4px 6px;
    line-height: 1.2;
    overflow: hidden;
}
.bsu-page .idm-cat-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.bsu-page .idm-cat-meta { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.bsu-page .idm-cat-min { font-size: 11px; font-weight: 700; opacity: 0.85; }
.bsu-page .idm-cat-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.bsu-page .idm-cat-dot.ok { background: #10B48F; }
.bsu-page .idm-cat-dot.pending { background: #FF6F92; }
.bsu-page .idm-scat-pill {
    background: #0f3d4c;
    border-color: #0f3d4c;
    color: #fff;
}
.bsu-page .idm-scat-pill:hover { background: #14505f; }
.bsu-page .idm-scat-pill.active { background: #10B48F; border-color: #10B48F; color: #fff; }
.bsu-page .idm-cat-nav button[disabled],
.bsu-page .idm-food-nav button[disabled] { opacity: 0.3; cursor: default; }

/* ---- Add-on tiles ----
   Two defects inherited from the mockup's own source order, both only visible once the
   grid holds real data:
   1. `.idm-food-nav { grid-column: span 4 }` is declared AFTER the max-width media queries
      that narrow it to span 3 / span 2, so it always won. A 4-span item in a 3-column grid
      grows the implicit grid to 4 columns, and auto-placement then flows every tile across
      4 columns — the narrowed grid never took effect below 1280px.
   2. `1fr` tracks default to min-width:auto, so one add-on with a long nowrap name blew its
      column out to max-content (measured 245px vs 67px for its siblings).
   3. The grid is a `flex: 1` item with a definite height, and its implicit `auto` rows were
      being squeezed to fill it (74.6px rows for 88px of content) rather than overflowing —
      so every image tile had its caption clipped. `max-content` rows size to the tile and
      let the container's own overflow-y:auto do the scrolling. */
.bsu-page .idm-food-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: max-content;
    /* The grid scrolls, and `overflow-y:auto` forces `overflow-x` to auto too — so the
       scrollport clips on every side. The mockup's :hover lift (translateY(-3px) plus a
       0 8px 24px shadow) reaches ~7px above the tile, which with the mockup's padding-top:0
       cut the top of the hover border off on the first row. Reserve room for it. */
    padding: 8px 20px 20px;
}
.bsu-page .idm-food-nav { grid-column: span 4; }
/* The ported breakpoints dropped to 3 columns at 1280px, which on a 1024px terminal put
   the 11 tiles over 4 rows and left no height for a comfortable tap target. The right
   panel is only ~48% of the viewport, so 4 columns still gives ~111px tiles at 1024. */
@media (max-width: 900px) {
    .bsu-page .idm-food-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bsu-page .idm-food-nav { grid-column: span 3; }
}
@media (max-width: 768px) {
    .bsu-page .idm-food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bsu-page .idm-food-nav { grid-column: span 2; }
}
.bsu-page .idm-food-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
/* The mockup's top scrim only makes sense over a photo. */
.bsu-page .idm-food-card.no-img::after { display: none; }
/* show_addon_image off ($scope.imageEnabled, itemquantity.controller.js): no image well at
   all — the whole tile is the label, which is what the legacy .cd-addon-text-name cell did.
   Padding lives on the card, never on the clamped name: -webkit-line-clamp crops at the
   padding edge and leaves a sliver of the third line. */
.bsu-page .idm-food-card.text-only {
    justify-content: center;
    align-items: center;
    min-height: 116px;
    padding: 6px 8px;
}
.bsu-page .idm-food-card.text-only .idm-food-name {
    padding: 0 8px;
    background: transparent;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
    max-height: 2.5em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bsu-page .idm-food-ph {
    flex: 1;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    color: var(--text-placeholder);
}
.bsu-page .idm-food-card .idm-food-name { flex: 0 0 auto; }
.bsu-page .idm-veg-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
/* getItemClass() emits these two; .idm-food-card's own background/border would otherwise
   win on source order — same trap the legacy template hit with .cd-addon-cell. */
.bsu-page .idm-food-card.item-class-red {
    background: #db5555 !important;
    border-color: #db5555 !important;
}
.bsu-page .idm-food-card.item-class-red .idm-food-name {
    background: #db5555 !important;
    color: #fff !important;
}
.bsu-page .idm-food-card.item-class-red .idm-food-ph {
    background: #c94b4b;
    color: rgba(255, 255, 255, 0.75);
}
/* Inset, not outset: an outer ring on an edge tile is clipped by the scrollport. */
.bsu-page .idm-food-card.item-punched {
    border-color: #4185F4;
    box-shadow: inset 0 0 0 2px rgba(65, 133, 244, 0.35);
}

/* ---- Height tiers ----
   The mockup's 52-60px controls and 28px paddings were drawn for a tall display. On the two
   resolutions this POS actually runs, the panel overflows: at 1366x768 the tile grid and the
   selected-add-on list both scroll even on a brand with no optional fields. Two tiers bring
   it back inside the viewport — 900px trims, 760px goes tight. The 760 block is second so it
   wins where both match. */
@media (max-height: 900px) {
    .bsu-page .idm-header { padding: 18px 24px 12px; }
    .bsu-page .idm-header h3 { font-size: 20px; }
    .bsu-page .idm-header p { font-size: 14px; margin-top: 4px; }
    .bsu-page .idm-left { padding: 18px 20px; }
    .bsu-page .idm-toggle { margin-bottom: 18px; }
    .bsu-page .idm-toggle button { padding: 10px 26px; font-size: 16px; }
    .bsu-page .idm-form-row { gap: 16px; margin-bottom: 14px; }
    .bsu-page .idm-form-label { font-size: 14px; margin-bottom: 6px; }
    .bsu-page .idm-input,
    .bsu-page .idm-select { height: 44px; border-radius: 10px; }
    .bsu-page textarea.idm-input { height: 44px; padding: 6px 12px; }
    .bsu-page .idm-add-btn-sm { height: 44px; border-radius: 10px; }
    .bsu-page .idm-divider { margin-bottom: 18px; }
    .bsu-page .idm-form-group .ui-select-bootstrap > .ui-select-match > .btn { height: 44px; line-height: 41px; border-radius: 10px; }
    .bsu-page .idm-form-group .ui-select-bootstrap > .ui-select-search { height: 44px; border-radius: 10px; }
    .bsu-page .idm-form-group .ui-select-multiple.ui-select-bootstrap { min-height: 44px; border-radius: 10px; }
    .bsu-page .idm-addons-header { padding: 10px 0; margin-top: 8px; }
    .bsu-page .idm-addon-row { padding: 11px 0; }
    .bsu-page .idm-right-search { padding: 16px 16px 12px; }
    .bsu-page .idm-right-search-input { height: 48px; }
    .bsu-page .idm-right-search-input input { height: 46px; }
    .bsu-page .idm-qty-input { height: 48px; width: 64px; }
    .bsu-page .idm-add-btn { height: 48px; padding: 0 24px; }
    .bsu-page .idm-cats { padding: 0 16px 12px; }
    .bsu-page .idm-cat-pill { height: 52px; }
    .bsu-page .idm-food-grid { padding: 8px 16px 16px; }
    .bsu-page .idm-food-card img { height: 64px; }
    .bsu-page .idm-food-ph { min-height: 48px; }
    .bsu-page .idm-food-card .idm-food-name { padding: 6px 10px; }
    .bsu-page .idm-food-card.text-only { min-height: 94px; }
    .bsu-page .idm-food-card.text-only .idm-food-name { padding: 0 6px; }
    .bsu-page .idm-food-nav { padding: 8px 0; }
    .bsu-page .idm-food-nav button { width: 62px; height: 62px; }
    .bsu-page .idm-footer { padding: 14px 24px; }
    .bsu-page .idm-close-btn,
    .bsu-page .idm-submit-btn { padding: 12px 38px; font-size: 17px; border-radius: 12px; }
}
@media (max-height: 760px) {
    .bsu-page .idm-header { padding: 14px 20px 10px; }
    .bsu-page .idm-header h3 { font-size: 18px; }
    .bsu-page .idm-header p { font-size: 13px; margin-top: 2px; }
    .bsu-page .idm-left { padding: 14px 16px; }
    .bsu-page .idm-toggle { margin-bottom: 14px; border-radius: 9px; }
    .bsu-page .idm-toggle button { padding: 8px 22px; font-size: 15px; }
    .bsu-page .idm-form-row { gap: 12px; margin-bottom: 10px; }
    .bsu-page .idm-form-label { font-size: 13px; margin-bottom: 4px; }
    .bsu-page .idm-input,
    .bsu-page .idm-select { height: 38px; border-radius: 9px; font-size: 15px; padding: 0 12px; }
    .bsu-page .idm-select { background-position: right 12px center; padding-right: 30px; }
    .bsu-page textarea.idm-input { height: 38px; padding: 5px 12px; }
    .bsu-page .idm-input-code { font-size: 17px; letter-spacing: 4px; }
    .bsu-page .idm-add-btn-sm { height: 38px; padding: 0 16px; border-radius: 9px; }
    .bsu-page .idm-divider { margin-bottom: 12px; }
    .bsu-page .idm-form-group .ui-select-bootstrap > .ui-select-match > .btn { height: 38px; line-height: 35px; border-radius: 9px; }
    .bsu-page .idm-form-group .ui-select-bootstrap > .ui-select-search { height: 38px; border-radius: 9px; }
    .bsu-page .idm-form-group .ui-select-multiple.ui-select-bootstrap { min-height: 38px; padding: 4px 8px; border-radius: 9px; }
    .bsu-page .idm-addons-header { padding: 8px 0; margin-top: 6px; }
    .bsu-page .idm-addons-header span { font-size: 13px; }
    .bsu-page .idm-addon-row { padding: 8px 0; }
    .bsu-page .idm-addon-name { font-size: 15px; }
    .bsu-page .idm-addon-empty { padding: 12px 0; }
    .bsu-page .idm-right-search { padding: 12px 14px 10px; gap: 8px; }
    .bsu-page .idm-right-search-input { height: 42px; border-radius: 9px; padding: 0 12px; }
    .bsu-page .idm-right-search-input input { height: 40px; font-size: 15px; }
    .bsu-page .idm-qty-input { height: 42px; width: 58px; border-radius: 9px; font-size: 16px; }
    .bsu-page .idm-add-btn { height: 42px; padding: 0 20px; font-size: 15px; }
    .bsu-page .idm-cats { padding: 0 14px 8px; gap: 6px; }
    /* Room for a 2-line category name plus the min-add-on badge underneath it. */
    .bsu-page .idm-cat-pill { height: 46px; font-size: 12px; padding: 3px 4px; }
    .bsu-page .idm-cat-name { line-height: 1.1; }
    .bsu-page .idm-cat-meta { gap: 3px; }
    .bsu-page .idm-cat-min { font-size: 10px; }
    .bsu-page .idm-food-grid { padding: 6px 14px 10px; gap: 6px; }
    /* 11 tiles over 4 columns is 3 rows, so an 86px tile (62 image + 24 caption) fits. */
    .bsu-page .idm-food-card img { height: 56px; }
    .bsu-page .idm-food-ph { min-height: 44px; }
    .bsu-page .idm-food-card .idm-food-name { padding: 4px 8px; font-size: 13px; }
    .bsu-page .idm-food-card.text-only { min-height: 84px; padding: 4px 6px; }
    .bsu-page .idm-food-card.text-only .idm-food-name { padding: 0 6px; }
    .bsu-page .idm-food-nav { padding: 6px 0; }
    .bsu-page .idm-food-nav button { width: 54px; height: 54px; border-radius: 10px; }
    .bsu-page .idm-footer { padding: 10px 20px; gap: 12px; }
    .bsu-page .idm-close-btn,
    .bsu-page .idm-submit-btn { padding: 10px 32px; font-size: 16px; border-radius: 10px; }
}

/* ==================== Fix pass 16 — action bar arrangement (2026-07-28) ====================
   The bar had accumulated six layers of width tweaks and read as a jumble: read-only chips
   and clickable actions looked identical, CARD TOTAL wrapped to two lines, the primary
   PRINT KOT/SETTLE action was no larger than a chip, and SELECT WAITER stretched across
   ~400px of dead space. This block sets the whole geometry in one place and outranks the
   earlier layers, so tune sizes HERE rather than adding another pass.

   The grid: every control is a pill on a common baseline, separated by an 8px gap instead
   of hairline ::after dividers. One chip unit = 108px; the primary action is exactly two
   chip units wide so it reads as the bar's main target. */

.bsu-page .action-bar {
    height: 94px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
}
.bsu-page .action-bar .action-left-group,
.bsu-page .action-bar .action-right-group {
    margin: 0;
    gap: 8px;
    align-items: stretch;
    height: 70px;
}
/* The right group is no longer one bordered box with internal dividers — each control
   carries its own pill, which is what makes the row read as arranged. */
.bsu-page .action-bar .action-right-group {
    border: none;
    border-radius: 0;
    background: transparent;
}
.bsu-page .action-bar .bsu-actions-scroll {
    gap: 8px;
    align-items: stretch;
}

/* ---- the pill ---- */
.bsu-page .action-bar .action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
}
.bsu-page .action-bar .action-btn::after { display: none; }
.bsu-page .action-bar .action-btn .action-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    line-height: 1;
    white-space: nowrap;      /* CARD TOTAL was wrapping onto two lines */
    opacity: 0.72;
    margin: 0;
}
.bsu-page .action-bar .action-btn .action-value {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    margin: 0;
}

/* ---- left group: read-only chips, then the primary action ---- */
/* Chips never grow, so Timer / Covers / Card Total / Advance line up whatever combination
   of them a brand shows. `width` is the comfortable size and `min-width` the floor: when
   the row is tight everything shrinks toward its floor instead of being clipped mid-word
   by the scroll strip. */
.bsu-page .action-bar .action-left-group .action-btn {
    flex: 0 1 auto;
    width: 134px;
    min-width: 124px;
    padding: 0 10px;
}
.bsu-page .action-bar .action-left-group .action-btn .action-value { font-size: 16px; }
/* Read-only chips sit recessed so they are visibly not buttons. */
.bsu-page .action-bar .action-left-group .action-btn.estimate {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.08);
}
/* Primary action (PRINT KOT / BILL / SETTLE, and the accept/reject/cancel pairs that
   replace it) — two chip units wide, larger type. */
.bsu-page .action-bar .action-left-group .action-btn.kot,
.bsu-page .action-bar .action-left-group .action-btn.cash,
.bsu-page .action-bar .action-left-group .action-btn.card,
.bsu-page .action-bar .action-left-group .action-btn.kot[accesskey="p"] {
    flex: 0 1 auto;
    width: 300px;
    min-width: 216px;
    padding: 0 24px;
}
/* The pill rule above matches .action-btn at the same specificity and lands later, so the
   filled primary has to restate its own background or it goes flat grey like a chip. */
.bsu-page .action-bar .action-left-group .action-btn.kot {
    background: linear-gradient(180deg, #10b28a 0%, #0a8a6a 100%);
    border-color: transparent;
}
.bsu-page .action-bar .action-left-group .action-btn.kot:hover {
    background: linear-gradient(180deg, #0a8a6a 0%, #077a5c 100%);
}
.bsu-page .action-bar .action-left-group .action-btn.kot:active { background: #056B4D; }
.bsu-page .action-bar .action-left-group .action-btn.kot .action-label,
.bsu-page .action-bar .action-left-group .action-btn.cash .action-label,
.bsu-page .action-bar .action-left-group .action-btn.card .action-label {
    font-size: 11px;
    opacity: 0.9;
}
.bsu-page .action-bar .action-left-group .action-btn.kot .action-value,
.bsu-page .action-bar .action-left-group .action-btn.cash .action-value,
.bsu-page .action-bar .action-left-group .action-btn.card .action-value {
    font-size: 20px;
}

/* ---- right group: secondary actions, waiter, customer ---- */
.bsu-page .action-bar .action-right-group .bsu-actions-scroll .action-btn,
.bsu-page .action-bar .action-right-group .bsu-actions-scroll .action-btn.estimate {
    flex: 0 1 auto;
    width: 132px;
    min-width: 104px;
}
/* BILL SUMMARY carries a two-word label, so it gets a wider slot of its own — and a floor
   high enough that the label never has to be clipped, with trimmed side padding to help. */
.bsu-page .action-bar .action-right-group .bsu-actions-scroll .action-btn.bill-summary {
    flex: 0 1 auto;
    width: 176px;
    min-width: 150px;
    padding: 0 10px;
}
/* SELECT WAITER was stretching to fill the leftover row; it is a fixed slot, and the
   select inside it needs a real tap height. */
.bsu-page .action-bar .action-right-group .bsu-actions-scroll .action-btn.select-server,
.bsu-page .action-bar .action-btn.select-server {
    flex: 0 1 auto;
    width: 228px;
    min-width: 172px;
    max-width: 228px;
    align-items: stretch;
    justify-content: center;
    padding: 0 12px;
}
.bsu-page .action-bar .action-btn.select-server .action-label { text-align: center; }
.bsu-page .action-bar .action-btn.select-server select.form-control {
    height: 36px;
    line-height: 34px;
    font-size: 13px;
    border-radius: 8px;
    padding: 0 10px;
}
/* Customer slot closes the row. It ABSORBS the bar's leftover width rather than being
   pushed to the far edge — pinning it right left a ~300px hole between SELECT WAITER and
   the customer on a 1512px screen, which read as a broken layout. Growing the field is
   also the useful place to spend the slack: longer names and numbers stay readable. */
.bsu-page .action-bar .action-right-group .action-customer-search {
    flex: 1 6 auto;
    width: auto;
    min-width: 268px;
    max-width: 420px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}
.bsu-page .action-bar .action-right-group .action-customer-search input { font-size: 13px; }
/* Same for the attached-customer chip, but capped tighter and with its contents left
   aligned, so a wide slot reads as a roomier card and not as a stretched button. */
.bsu-page .action-bar .action-right-group .action-user-group {
    flex: 1 6 auto;
    margin-left: 0;
    min-width: 268px;
    max-width: 400px;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}
.bsu-page .action-bar .action-right-group .action-user-group .action-user-btn {
    flex: 1 1 auto;
    max-width: none;
    text-align: left;
    /* Without this the button's automatic min-content size pins the whole chip at ~268px,
       so it never reaches its shrink floor and the scroll strip clips SELECT WAITER
       instead. The name/phone already ellipsize. */
    min-width: 0;
}
/* No auto-margin here: pushing the customer slot to the far edge is exactly what opened
   the hole in the middle of the bar. Controls pack left and the customer slot (below)
   takes the slack. The old border-right zone divider goes too — with every control now a
   discrete pill the gap already separates the zones, and the line ended up stranded. */
.bsu-page .action-bar .action-right-group .bsu-actions-scroll {
    /* Shrink factor 1 against the customer slot's 6 below. The strip is a scroll
       container, so its automatic min-width resolves to 0 — left to itself it collapses
       and clips SELECT WAITER mid-word long before the customer slot gives up any width.
       Weighting the shrink makes the customer absorb the squeeze first; the strip only
       starts scrolling once the customer is at its own floor, which is when a brand
       genuinely has more secondary buttons than the bar can hold. */
    flex: 0 1 auto;
    border-right: none;
}
/* An earlier polish pass gave these a 6px vertical margin, which now drops them 6px below
   the rest of the row. */
.bsu-page .action-bar .action-right-group .action-user-group,
.bsu-page .action-bar .action-right-group .action-customer-search {
    margin-top: 0;
    margin-bottom: 0;
}

/* Interaction states. `.bsu-page .action-btn:hover` is (0,3,0) — the same specificity as
   the pill rule above, which lands later and would otherwise flatten every hover and
   press state on the bar. */
.bsu-page .action-bar .action-btn:hover { background: rgba(255, 255, 255, 0.10); }
.bsu-page .action-bar .action-btn:active { background: rgba(255, 255, 255, 0.16); }
/* ...except the left-group chips, which are cursor:default readouts, not buttons. */
.bsu-page .action-bar .action-left-group .action-btn.estimate:hover,
.bsu-page .action-bar .action-left-group .action-btn.estimate:active {
    background: rgba(0, 0, 0, 0.22);
    transform: none;
}

/* ---- 1280px and below: one size down, still no clipping ---- */
@media (max-width: 1280px) {
    .bsu-page .action-bar { height: 86px; }
    .bsu-page .action-bar .action-left-group,
    .bsu-page .action-bar .action-right-group { height: 64px; }
    .bsu-page .action-bar .action-left-group .action-btn { width: 118px; min-width: 108px; padding: 0 8px; }
    .bsu-page .action-bar .action-left-group .action-btn .action-value { font-size: 15px; }
    .bsu-page .action-bar .action-left-group .action-btn.kot,
    .bsu-page .action-bar .action-left-group .action-btn.cash,
    .bsu-page .action-bar .action-left-group .action-btn.card,
    .bsu-page .action-bar .action-left-group .action-btn.kot[accesskey="p"] { width: 248px; min-width: 196px; }
    .bsu-page .action-bar .action-right-group .bsu-actions-scroll .action-btn,
    .bsu-page .action-bar .action-right-group .bsu-actions-scroll .action-btn.estimate { width: 116px; min-width: 88px; padding: 0 8px; }
    /* Two-word label at 12px needs the room back that the default 14px side padding takes. */
    .bsu-page .action-bar .action-right-group .bsu-actions-scroll .action-btn.bill-summary { width: 156px; min-width: 126px; padding: 0 8px; }
    .bsu-page .action-bar .action-right-group .bsu-actions-scroll .action-btn.select-server,
    .bsu-page .action-bar .action-btn.select-server { width: 198px; min-width: 144px; max-width: 198px; }
    .bsu-page .action-bar .action-right-group .action-customer-search { min-width: 228px; max-width: 390px; }
    .bsu-page .action-bar .action-right-group .action-user-group { min-width: 228px; max-width: 370px; }
}

/* ---- 1024px terminals: same arrangement, one size down ---- */
@media (max-width: 1024px) {
    .bsu-page .action-bar { height: 72px; padding: 0 10px; gap: 6px; }
    .bsu-page .action-bar .action-left-group,
    .bsu-page .action-bar .action-right-group { height: 56px; gap: 6px; }
    .bsu-page .action-bar .bsu-actions-scroll { gap: 6px; }
    .bsu-page .action-bar .action-btn { padding: 0 10px; border-radius: 10px; }
    .bsu-page .action-bar .action-btn .action-label { font-size: 9px; letter-spacing: 0.4px; }
    .bsu-page .action-bar .action-btn .action-value { font-size: 14px; }
    /* 8 controls on a 1024px bar: the read-only chips give up the most room so the
       actionable pills stay big. Anything beyond this set (Advance chip, Split Bill,
       Mark OOS...) scrolls in .bsu-actions-scroll rather than crushing the row. */
    .bsu-page .action-bar .action-left-group .action-btn { width: 96px; min-width: 86px; padding: 0 8px; }
    .bsu-page .action-bar .action-left-group .action-btn .action-label { font-size: 8px; }
    .bsu-page .action-bar .action-left-group .action-btn.kot,
    .bsu-page .action-bar .action-left-group .action-btn.cash,
    .bsu-page .action-bar .action-left-group .action-btn.card,
    .bsu-page .action-bar .action-left-group .action-btn.kot[accesskey="p"] {
        width: 194px;
        min-width: 170px;
        padding: 0 14px;
    }
    .bsu-page .action-bar .action-left-group .action-btn.kot .action-label,
    .bsu-page .action-bar .action-left-group .action-btn.cash .action-label,
    .bsu-page .action-bar .action-left-group .action-btn.card .action-label { font-size: 10px; }
    .bsu-page .action-bar .action-left-group .action-btn.kot .action-value,
    .bsu-page .action-bar .action-left-group .action-btn.cash .action-value,
    .bsu-page .action-bar .action-left-group .action-btn.card .action-value { font-size: 17px; }
    .bsu-page .action-bar .action-right-group .bsu-actions-scroll .action-btn,
    .bsu-page .action-bar .action-right-group .bsu-actions-scroll .action-btn.estimate { width: 100px; min-width: 78px; }
    .bsu-page .action-bar .action-right-group .bsu-actions-scroll .action-btn.bill-summary { width: 130px; min-width: 108px; padding: 0 6px; }
    .bsu-page .action-bar .action-right-group .bsu-actions-scroll .action-btn.select-server,
    .bsu-page .action-bar .action-btn.select-server { width: 168px; min-width: 126px; max-width: 168px; }
    .bsu-page .action-bar .action-btn.select-server select.form-control { height: 30px; line-height: 28px; }
    .bsu-page .action-bar .action-right-group .action-customer-search { min-width: 210px; max-width: 320px; }
    /* The attached-customer chip is wider than the search box, so it needs a lower floor
       here or the scroll strip clips SELECT WAITER on a 1024px terminal. */
    .bsu-page .action-bar .action-right-group .action-user-group { min-width: 186px; max-width: 310px; }
}


/* ==================== Combo modal — USA skin (2026-07-28) ====================
   Port of restropos-us-edition/cart-page.html `.combo-overlay` onto the existing combo
   controller (components/services/combo/combo.service.js). Only reached when
   billing_skin=usa, via windowClass 'bsu-combo-window' + _comboUsa.html; the legacy
   app/billing/combo.html and its 191 `.combo-*` rules in app/billing/billing.css are
   untouched and still serve every other brand.

   COLLISION NOTE: the mockup reuses class names that billing.css already defines globally
   (.combo-header/.combo-body/.combo-footer/.combo-search-input/.combo-qty-input/
   .combo-add-btn/.combo-header-title). Everything below is scoped
   `.bsu-page.bsu-combo-root` (0,3,0) so it outranks those (0,1,0) rules — do not drop the
   root class from the template or the legacy combo styling bleeds back in. */

.bsu-page.bsu-combo-root .combo-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 22, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1200;
    align-items: flex-start;
    justify-content: center;
    font-family: 'Inter', sans-serif;
}
.bsu-page.bsu-combo-root .combo-overlay.active { display: flex;
}
.bsu-page.bsu-combo-root .combo-modal {
    background: var(--card-bg);
    width: 92%;
    max-width: 1720px;
    height: 78vh;
    max-height: 820px;
    margin-top: 4vh;
    /* overridden below — kept so the ported block still reads like the mockup */
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bsuComboSlideIn 0.22s ease-out;
}
@keyframes bsuComboSlideIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bsu-page.bsu-combo-root .combo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    height: 60px;
    background: #1a2233;
    color: #fff;
    flex-shrink: 0;
}
.bsu-page.bsu-combo-root .combo-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.bsu-page.bsu-combo-root .combo-header-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(65, 133, 244, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bsu-page.bsu-combo-root .combo-header-icon svg { width: 18px; height: 18px; stroke: #4185F4; fill: none;
}
.bsu-page.bsu-combo-root .combo-header-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #fff;
}
.bsu-page.bsu-combo-root .combo-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.bsu-page.bsu-combo-root .combo-qty-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bsu-page.bsu-combo-root .combo-qty-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #A6B0C2;
}
.bsu-page.bsu-combo-root .combo-qty-input {
    width: 60px;
    height: 45px;
    border-radius: 8px;
    border: 1px solid #2c3446;
    background: #ffffff;
    color: #1a2233;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    outline: none;
}
.bsu-page.bsu-combo-root .combo-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.bsu-page.bsu-combo-root .combo-close-btn:hover { background: rgba(255,255,255,0.16);
}
.bsu-page.bsu-combo-root .combo-close-btn svg { width: 14px; height: 14px; stroke: #fff; fill: none;
}
.bsu-page.bsu-combo-root .combo-body {
    display: flex;
    flex: 1;
    min-height: 0;
    background: var(--bg-secondary);
}
.bsu-page.bsu-combo-root .combo-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-left: 18px;
    align-self: stretch;
}
.bsu-page.bsu-combo-root .combo-tab {
    position: relative;
    padding: 0 26px;
    border: none;
    background: transparent;
    color: #A6B0C2;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.bsu-page.bsu-combo-root .combo-tab + .combo-tab {
    border-left: 1px solid rgba(255,255,255,0.14);
    height: 60px;
}
.bsu-page.bsu-combo-root .combo-tab::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    transition: background 0.15s;
}
.bsu-page.bsu-combo-root .combo-tab:hover { color: #fff;
}
.bsu-page.bsu-combo-root .combo-tab.active {
    background: #10B48F;
    color: #fff;
}
.bsu-page.bsu-combo-root .combo-tab.active::after { background: transparent;
}
.bsu-page.bsu-combo-root .combo-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px;
    gap: 14px;
}
.bsu-page.bsu-combo-root .combo-items-area {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}
.bsu-page.bsu-combo-root .combo-items-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
.bsu-page.bsu-combo-root .combo-item-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.bsu-page.bsu-combo-root .combo-item-card:hover {
    border-color: #4185F4;
    box-shadow: 0 2px 8px rgba(65,133,244,0.12);
}
.bsu-page.bsu-combo-root .combo-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}
.bsu-page.bsu-combo-root .combo-item-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 2px var(--card-bg), 0 0 6px rgba(16,185,129,0.35);
}
.bsu-page.bsu-combo-root .combo-nav-card {
    grid-column: span 1;
    background: var(--bg-hover);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
}
.bsu-page.bsu-combo-root .combo-nav-half {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}
.bsu-page.bsu-combo-root .combo-nav-half:hover { background: var(--bg-secondary); color: var(--text-primary);
}
.bsu-page.bsu-combo-root .combo-nav-half svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;
}
.bsu-page.bsu-combo-root .combo-nav-half + .combo-nav-half { border-left: 1px dashed var(--border-color);
}
.bsu-page.bsu-combo-root .combo-cat-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
.bsu-page.bsu-combo-root .combo-cat-btn {
    height: 70px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(to top, #1c4272 0%, #3b72ca 100%);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(28,66,114,0.18);
}
.bsu-page.bsu-combo-root .combo-cat-btn:hover { box-shadow: 0 3px 10px rgba(28,66,114,0.28);
}
.bsu-page.bsu-combo-root .combo-cat-btn:active { transform: scale(0.97);
}
.bsu-page.bsu-combo-root .combo-group-btn {
    position: relative;
    height: 70px;
    border: none;
    border-radius: 8px;
    background: #1a2233;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: background 0.15s;
}
.bsu-page.bsu-combo-root .combo-group-btn:hover { background: #212c40;
}
.bsu-page.bsu-combo-root .combo-group-btn .grp-sub {
    font-size: 11px;
    font-weight: 500;
    color: #A6B0C2;
}
.bsu-page.bsu-combo-root .combo-group-btn .grp-dot {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
}
.bsu-page.bsu-combo-root .combo-right {
    width: 480px;
    flex-shrink: 0;
    background: var(--card-bg);
    border-left: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.bsu-page.bsu-combo-root .combo-right-search {
    padding: 14px 16px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-light);
}
.bsu-page.bsu-combo-root .combo-search-input {
    flex: 1;
    height: 48px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    background: var(--input-bg);
    color: var(--text-primary);
    outline: none;
}
.bsu-page.bsu-combo-root .combo-search-input:focus { border-color: #4185F4;
}
.bsu-page.bsu-combo-root .combo-qty-field {
    width: 60px;
    height: 48px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0 10px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    background: var(--input-bg);
    color: var(--text-primary);
    outline: none;
}
.bsu-page.bsu-combo-root .combo-add-btn {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: none;
    background: #10B48F;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.bsu-page.bsu-combo-root .combo-add-btn:hover { background: #0E9E7E;
}
.bsu-page.bsu-combo-root .combo-cart-head {
    display: flex;
    align-items: center;
    padding: 16px 20px 14px;
    border-bottom: 1.5px solid var(--border-alt);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.bsu-page.bsu-combo-root .combo-cart-head .head-item { flex: 1;
}
.bsu-page.bsu-combo-root .combo-cart-head .head-qty { width: 232px; text-align: right; padding-right: 6px;
}
.bsu-page.bsu-combo-root .combo-cart-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 12px;
}
.bsu-page.bsu-combo-root .combo-cart-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--bg-secondary);
}
.bsu-page.bsu-combo-root .combo-cart-row:hover { background: var(--bg-hover);
}
.bsu-page.bsu-combo-root .combo-cart-row.removing { opacity: 0; transform: translateX(20px); transition: all 0.18s ease;
}
.bsu-page.bsu-combo-root .combo-cart-del {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: none;
    background: rgba(220, 90, 109, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.bsu-page.bsu-combo-root .combo-cart-del:hover { background: rgba(220, 90, 109, 0.18);
}
.bsu-page.bsu-combo-root .combo-cart-del:active { transform: scale(0.94);
}
.bsu-page.bsu-combo-root .combo-cart-del svg { width: 18px; height: 18px; stroke: #DC5A6D; fill: none; stroke-width: 2;
}
.bsu-page.bsu-combo-root .combo-cart-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.bsu-page.bsu-combo-root .combo-cart-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.bsu-page.bsu-combo-root .combo-step-btn {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.15s, transform 0.08s;
    background: var(--card-bg);
}
.bsu-page.bsu-combo-root .combo-step-btn.plus { color: #10B48F; border-color: rgba(16, 180, 143, 0.30); background: rgba(16, 180, 143, 0.08);
}
.bsu-page.bsu-combo-root .combo-step-btn.plus:hover { background: rgba(16, 180, 143, 0.16);
}
.bsu-page.bsu-combo-root .combo-step-btn.minus { color: #DC5A6D; border-color: rgba(220, 90, 109, 0.30); background: rgba(220, 90, 109, 0.06);
}
.bsu-page.bsu-combo-root .combo-step-btn.minus:hover { background: rgba(220, 90, 109, 0.14);
}
.bsu-page.bsu-combo-root .combo-step-btn:active { transform: scale(0.94);
}
.bsu-page.bsu-combo-root .combo-step-qty {
    width: 62px;
    height: 44px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    background: var(--input-bg);
    color: var(--text-primary);
    outline: none;
    -moz-appearance: textfield;
}
.bsu-page.bsu-combo-root .combo-step-qty::-webkit-outer-spin-button,
.bsu-page.bsu-combo-root .combo-step-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;
}
.bsu-page.bsu-combo-root .combo-step-qty:focus { border-color: #4185F4; box-shadow: 0 0 0 3px rgba(65,133,244,0.10);
}
.bsu-page.bsu-combo-root .combo-more-btn {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.bsu-page.bsu-combo-root .combo-more-btn svg { width: 18px; height: 18px; fill: currentColor;
}
.bsu-page.bsu-combo-root .combo-more-btn:hover { background: var(--bg-hover); color: var(--text-primary);
}
.bsu-page.bsu-combo-root .combo-more-btn:active { transform: scale(0.94);
}
.bsu-page.bsu-combo-root .combo-cart-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}
.bsu-page.bsu-combo-root .combo-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    background: var(--card-bg);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}
.bsu-page.bsu-combo-root .combo-action-btn {
    height: 50px;
    padding: 0 30px;
    border-radius: 8px;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: filter 0.15s, background 0.15s;
}
.bsu-page.bsu-combo-root .combo-action-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4;
}
.bsu-page.bsu-combo-root .combo-action-btn.punch { background: #4185F4; color: #fff;
}
.bsu-page.bsu-combo-root .combo-action-btn.punch:hover { background: #3070DC;
}
.bsu-page.bsu-combo-root .combo-action-btn.ok { background: #10B48F; color: #fff;
}
.bsu-page.bsu-combo-root .combo-action-btn.ok:hover { background: #0E9E7E;
}
.bsu-page.bsu-combo-root .combo-action-btn.cancel {
    background: transparent;
    color: #DC5A6D;
    border: 1px solid rgba(220, 90, 109, 0.4);
    margin-right: auto;
}
.bsu-page.bsu-combo-root .combo-action-btn.cancel:hover { background: rgba(220, 90, 109, 0.08);
}
@media (max-width: 1280px) {
.bsu-page.bsu-combo-root .combo-items-grid,
.bsu-page.bsu-combo-root .combo-cat-row { grid-template-columns: repeat(5, 1fr);
}
.bsu-page.bsu-combo-root .combo-right { width: 420px;
}
}
@media (max-width: 1024px) {
.bsu-page.bsu-combo-root .combo-modal { width: 96%; height: 88vh;
}
.bsu-page.bsu-combo-root .combo-items-grid,
.bsu-page.bsu-combo-root .combo-cat-row { grid-template-columns: repeat(4, 1fr);
}
.bsu-page.bsu-combo-root .combo-right { width: 360px;
}
}

/* ---- ui-bootstrap modal chrome ---- */
.modal.bsu-combo-window .modal-dialog { width: 100vw; height: 100vh; margin: 0; }
.modal.bsu-combo-window .modal-content {
    width: 100%; height: 100vh; background: transparent;
    border: none; border-radius: 0; box-shadow: none; overflow: hidden;
}
.modal.bsu-combo-window .bsu-combo-root { display: block; height: 100vh; background: transparent; }

/* ---- requested deviation from the mockup: added items on the LEFT, menu on the RIGHT ----
   The mockup puts the cart panel after the menu; `order` flips them without reordering the
   markup, and the panel's divider moves to the edge that now faces the menu. */
.bsu-page.bsu-combo-root .combo-right {
    order: -1;
    border-left: none;
    border-right: 1px solid var(--border-light);
}

/* Guard against leftovers from billing.css's global .combo-* rules for the few properties
   the mockup does not restate. */
.bsu-page.bsu-combo-root .combo-header,
.bsu-page.bsu-combo-root .combo-body,
.bsu-page.bsu-combo-root .combo-footer { margin: 0; float: none; }

/* The "select add-ons for X" banner has no mockup equivalent — it only appears while the
   add-on sub-flow is open. */
.bsu-page.bsu-combo-root .combo-addon-banner {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(65, 133, 244, 0.10);
    border: 1px solid rgba(65, 133, 244, 0.28);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}
/* Add-on lines sit under their parent item in the cart list. */
.bsu-page.bsu-combo-root .combo-cart-row.combo-cart-addon {
    padding-left: 26px;
    background: var(--bg-hover);
}
.bsu-page.bsu-combo-root .combo-cart-row.combo-cart-addon .combo-cart-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}
/* Out-of-stock / punched classes come from the controller (getItemClass). */
.bsu-page.bsu-combo-root .combo-item-card.item-class-red {
    background: #db5555 !important;
    border-color: #db5555 !important;
    color: #fff !important;
}
.bsu-page.bsu-combo-root .combo-item-card.item-class-red .combo-item-name { color: #fff !important; }
.bsu-page.bsu-combo-root .combo-item-card.item-punched {
    border-color: #4185F4;
    box-shadow: inset 0 0 0 2px rgba(65, 133, 244, 0.35);
}


/* ---- Levels moved out of the title bar into the top of the menu column ----
   The ported .combo-tab styling assumes the dark header; restyle for the light surface. */
.bsu-page.bsu-combo-root .combo-center > .combo-tabs {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    overflow: hidden;
}
.bsu-page.bsu-combo-root .combo-center > .combo-tabs .combo-tab {
    height: 42px;
    padding: 0 24px;
    font-size: 13px;
    color: var(--text-muted);
}
.bsu-page.bsu-combo-root .combo-center > .combo-tabs .combo-tab.active {
    background: #10B48F;
    color: #fff;
}
.bsu-page.bsu-combo-root .combo-center > .combo-tabs .combo-tab + .combo-tab {
    height: 42px;
    border-left: 1px solid var(--border-color);
}

/* ---- Item grid fits the space it is given ----
   .combo-item-card was a fixed 80px, so once levels/groups/categories were stacked above
   it the last row of a page ran under the footer. Letting the grid claim the leftover
   height and split it across its rows keeps every row of a page on screen; the cards
   simply get shorter when there is less room. */
.bsu-page.bsu-combo-root .combo-items-area { min-height: 0; }
.bsu-page.bsu-combo-root .combo-items-grid {
    /* basis 0, NOT auto: with a content-based basis the grid's height stays indefinite as
       far as fr resolution is concerned, so `1fr` rows fell back to the card's 80px and the
       page spilled over the footer. A definite basis makes the rows actually divide the
       leftover height. */
    flex: 1 1 0%;
    min-height: 0;
    /* billing.css:555 pins `.combo-items-grid` to `grid-template-rows: repeat(4, 80px)` for
       the LEGACY combo — .combo-items-grid is a colliding class name too. Explicit tracks
       always beat grid-auto-rows, so the rows stayed 80px no matter what was set here or
       even inline. Clearing the template tracks is what actually makes the row height ours. */
    grid-template-rows: none;
    /* Now that the legacy explicit tracks are cleared, `1fr` rows finally resolve against
       the grid's definite height — so the boxes grow to fill whatever the column has spare
       instead of being pinned to a guessed pixel value. The floor keeps them tappable if a
       brand ever pages more rows than fit. */
    grid-auto-rows: minmax(62px, 1fr);
    /* same legacy rule adds padding + a grey card behind the grid; the mockup has neither,
       and the padding was the last 12px keeping a 3-row page from fitting */
    padding: 0;
    background: transparent;
    border-radius: 0;
    align-content: start;
    overflow-y: auto;
}
/* The mockup's 80px card was sized for a column that only held items. With levels, groups
   and categories stacked above it, three rows of 80 no longer fit and the last row ran
   under the footer — so the box comes down to 52px (48 on a 1024 terminal). The grid also
   scrolls now, so no future addition can push a row past the footer again. */
.bsu-page.bsu-combo-root .combo-item-card {
    height: 100%;
    min-height: 0;
    padding: 6px 10px;
    overflow: hidden;
}
.bsu-page.bsu-combo-root .combo-item-name { font-size: 13px; }
@media (max-width: 1024px) {
    /* Shorter cards here, so trade a point of type and some padding for line room. */
    .bsu-page.bsu-combo-root .combo-item-name { font-size: 12px; }
    .bsu-page.bsu-combo-root .combo-item-card { padding: 4px 8px; }
}
.bsu-page.bsu-combo-root .combo-nav-card { min-height: 0; }
/* No line clamp: it was set when the card was 52px tall and kept cutting names at two
   lines long after the card grew to ~110px. The card already clips, so let the name use
   whatever room the card actually has. */
.bsu-page.bsu-combo-root .combo-item-name {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.25;
    max-width: 100%;
}

/* A flex column will not shrink below its content without this, so the stacked
   levels/groups/categories pushed the item grid straight through the footer instead of
   letting `grid-auto-rows: minmax(0,1fr)` above compress the rows. */
.bsu-page.bsu-combo-root .combo-center { min-height: 0; }
.bsu-page.bsu-combo-root .combo-modal { overflow: hidden; }


/* ==================== Combo modal — sizing pass (2026-07-28) ==================== */
/* Taller modal, grown downward: top stays at margin-top 4vh, the extra height goes to the
   item grid. */
.bsu-page.bsu-combo-root .combo-modal {
    height: 92vh;
    max-height: 980px;
}

/* Cart row controls: the mockup's 48px steppers dominated the row. The +/- pair comes down
   to 34px and the quantity is given the SAME height and a fixed width so +/qty/- reads as
   one aligned unit (it is a <span> here, not the mockup's <input>, so it needs explicit
   centring). Delete and the kebab stay a little larger as they are single targets. */
.bsu-page.bsu-combo-root .combo-step-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 16px;
}
.bsu-page.bsu-combo-root .combo-step-qty {
    width: 44px;
    height: 34px;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.bsu-page.bsu-combo-root .combo-cart-del,
.bsu-page.bsu-combo-root .combo-more-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}
.bsu-page.bsu-combo-root .combo-cart-del svg,
.bsu-page.bsu-combo-root .combo-more-btn svg { width: 15px; height: 15px; }
.bsu-page.bsu-combo-root .combo-cart-actions { gap: 6px; }
.bsu-page.bsu-combo-root .combo-cart-row { padding: 8px; gap: 10px; }


/* ---- Level tabs start where the cart panel ends ----
   One variable drives both the cart panel width and the header brand block, so the tabs
   always begin on the same vertical line the menu column starts at. */
.bsu-page.bsu-combo-root { --bsu-combo-cart-w: 480px; }
@media (max-width: 1280px) { .bsu-page.bsu-combo-root { --bsu-combo-cart-w: 420px; } }
@media (max-width: 1024px) { .bsu-page.bsu-combo-root { --bsu-combo-cart-w: 360px; } }

.bsu-page.bsu-combo-root .combo-right,
.bsu-page.bsu-combo-root .combo-body .combo-right { width: var(--bsu-combo-cart-w); }

.bsu-page.bsu-combo-root .combo-header-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    /* Cart width, less the header's own 22px left padding, less the 6px by which the
       header's 14px flex gap overshoots the body's 8px inset — measured, so the tabs land
       exactly on the menu column's left edge rather than near it. */
    width: calc(var(--bsu-combo-cart-w) - 28px);
    flex-shrink: 0;
    min-width: 0;
}
.bsu-page.bsu-combo-root .combo-header-brand .combo-header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bsu-page.bsu-combo-root .combo-tabs { margin-left: 0; }
/* 20px inset so the tabs sit inside the menu column rather than flush against its edge
   (the column's own content padding is 18px, so this lands them all but level with the
   group buttons below). */
.bsu-page.bsu-combo-root .combo-header .combo-tabs { padding-left: 20px; }


/* ---- Prev/next always sits in the last column ----
   The nav card was auto-placed straight after the final pill, so a page holding fewer than
   a full row (4 groups on a 6-column row, or a part-filled last row of items) left it
   stranded mid-row. `-2 / -1` is the last column line pair, so it pins to the end whatever
   the column count comboGridCols resolves to. */
.bsu-page.bsu-combo-root .combo-cat-row > .combo-nav-card,
.bsu-page.bsu-combo-root .combo-items-grid > .combo-nav-card {
    grid-column: -2 / -1;
}


/* ---- Primary action reads on one line: PRINT KOT | $248.50 ----
   Label and amount sit side by side with a hairline between them instead of stacked, so
   the bar's main button states its action and its total in a single glance. Applies to the
   filled actions that carry an amount (.kot = print KOT/bill, .card = settle); .cash
   (reject / cancel) has an empty value and stays as it is. */
.bsu-page .action-bar .action-left-group .action-btn.kot,
.bsu-page .action-bar .action-left-group .action-btn.card {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.bsu-page .action-bar .action-left-group .action-btn.kot .action-value,
.bsu-page .action-bar .action-left-group .action-btn.card .action-value {
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.38);
}
@media (max-width: 1024px) {
    .bsu-page .action-bar .action-left-group .action-btn.kot,
    .bsu-page .action-bar .action-left-group .action-btn.card { gap: 8px; }
    .bsu-page .action-bar .action-left-group .action-btn.kot .action-value,
    .bsu-page .action-bar .action-left-group .action-btn.card .action-value { padding-left: 8px; }
}


/* ---- A short page must not produce one giant tile ----
   The rows are `1fr`, so a page holding a single row handed that row the column's whole
   height and the card stretched to ~350px. Cap the card (and the nav beside it) and let it
   sit at the top of an over-tall row; with a full page the rows are smaller than the cap,
   so nothing changes there. */
.bsu-page.bsu-combo-root .combo-items-grid > .combo-item-card,
.bsu-page.bsu-combo-root .combo-items-grid > .combo-nav-card {
    max-height: 132px;
    align-self: start;
    height: 100%;
}
@media (max-width: 1024px) {
    .bsu-page.bsu-combo-root .combo-items-grid > .combo-item-card,
    .bsu-page.bsu-combo-root .combo-items-grid > .combo-nav-card { max-height: 100px; }
}


/* ---- Primary button: one centred string, both halves the same size ----
   The ported rule gives .action-btn.kot .action-label `width:100%` + `text-align:left`,
   which pinned the label to the left edge and pushed the amount right, so the pair only
   looked centred by accident. Width auto lets the flex row centre the whole
   "PRINT KOT | $248.50" unit, and label and amount now share one type size. */
.bsu-page .action-bar .action-left-group .action-btn.kot .action-label,
.bsu-page .action-bar .action-left-group .action-btn.card .action-label {
    width: auto;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
    opacity: 1;
    margin: 0;
    /* ported rule dims it to 70% white; at matching size the two halves should read as
       one string */
    color: #fff;
}
.bsu-page .action-bar .action-left-group .action-btn.kot .action-value,
.bsu-page .action-bar .action-left-group .action-btn.card .action-value {
    font-size: 18px;
    font-weight: 700;
}
@media (max-width: 1280px) {
    .bsu-page .action-bar .action-left-group .action-btn.kot .action-label,
    .bsu-page .action-bar .action-left-group .action-btn.card .action-label,
    .bsu-page .action-bar .action-left-group .action-btn.kot .action-value,
    .bsu-page .action-bar .action-left-group .action-btn.card .action-value { font-size: 16px; }
}
@media (max-width: 1024px) {
    .bsu-page .action-bar .action-left-group .action-btn.kot .action-label,
    .bsu-page .action-bar .action-left-group .action-btn.card .action-label,
    .bsu-page .action-bar .action-left-group .action-btn.kot .action-value,
    .bsu-page .action-bar .action-left-group .action-btn.card .action-value { font-size: 14px; }
}


/* ==================== Settle window + image tiles (2026-07-28) ==================== */

/* ---- 1 & 3. The drawer itself never scrolls; Settle/Cancel stay pinned ----
   .settle-modal-body was overflow-y:auto, so once payments were added in several sections
   the WHOLE drawer scrolled and the footer could be pushed under the viewport. The footer is
   already a sibling of the body (direct child of .settle-panel) — it just needed to stop
   shrinking. The four columns already carry their own overflow-y:auto, so nothing becomes
   unreachable when the body stops scrolling. Selector repeats the (0,4,0) of the rule it
   overrides. */
.modal.bsu-settle-window .settle-panel .settle-modal-body {
    overflow: hidden;
}
.bsu-page .settle-footer {
    flex-shrink: 0;
}
/* Payment tables live inside the columns; keep their scroll internal to the column so the
   tables section never drives a drawer-level scrollbar. */
.bsu-page .settle-body-4col > [class^="settle-col-"] {
    min-height: 0;
}

/* ---- 2. Bill # in the header ---- */
/* settleBill.css sets clamp(10px, 0.85vw, 11px) — too small to scan at a glance. */
.bsu-page .settle-header-bill {
    font-size: 14px;
}
.bsu-page .settle-header-bill strong {
    font-size: 15px;
    font-weight: 700;
}

/* ---- 4. Image tiles use the same light theme as the no-image tiles ----
   The base .food-card background is #040911, which the photo covers but the caption strip
   does not — that was the black band under every image, with near-white #E8E8E8 text. Match
   the no-image card instead: white card, dark label. */
.bsu-page .food-card:not(.no-img) {
    background: var(--food-card-noimg-bg);
    border: 1px solid var(--border-alt);
}
.bsu-page .food-card:not(.no-img) .food-name {
    color: var(--food-card-noimg-name);
}
/* Out-of-stock keeps the same light red as the no-image view. Restated because the rule
   above matches .food-card.item-class-red at equal specificity and lands later. */
.bsu-page .food-card.item-class-red,
.bsu-page .food-card:not(.no-img).item-class-red {
    background: #FFF1F4;
    border: 1px solid #FFD4DE;
}
.bsu-page .food-card.item-class-red .food-name,
.bsu-page .food-card:not(.no-img).item-class-red .food-name {
    color: #CC3C5F;
}


/* ---- The caption strip under a photo (.food-card-body) ----
   THIS is the band the earlier "image tiles go light" pass missed: the dark colour lives on
   .food-card-body (rgba(0,0,0,0.40) + blur), not on .food-card or .food-name, so recolouring
   the card left the strip black. White strip, dark label, same tokens as a no-image tile.
   The strip also gets ONE fixed height — it was sized by content, so a one-line name made a
   shorter strip than a two-line name and tiles in a row did not match. 2 line boxes
   (2.6em, matching .food-name's clamp) plus the strip's 8px top/bottom padding; using em
   means it tracks the font size at every breakpoint. */
.bsu-page .food-card .food-card-body {
    background: var(--card-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid var(--border-light);
    height: calc(2.6em + 16px);
    box-sizing: border-box;
    /* Image view: the label reads from the left edge. .food-card-body only exists in the
       imageEnabled branch of the template, so this selector targets image view exactly —
       the no-image view has no wrapper and keeps its centred label. */
    justify-content: flex-start;
}
.bsu-page .food-card .food-card-body .food-name {
    text-align: left;
    width: 100%;
}
.bsu-page .food-card .food-card-body .food-name {
    color: var(--food-card-noimg-name);
}
/* Out-of-stock: the strip carries the same light red as the card. */
.bsu-page .food-card.item-class-red .food-card-body {
    background: #FFF1F4;
    border-top-color: #FFD4DE;
}
.bsu-page .food-card.item-class-red .food-card-body .food-name {
    color: #CC3C5F;
}


/* ---- Out-of-stock tiles follow the app-wide convention ----
   app.css defines `.item-class-red { background:#db5555; color:white }` and the item-detail
   modal already uses it. The USA skin had overridden it with a light pink wash + dark red
   text, so the label was never white. Solid red + white label, identical in image and
   no-image modes. */
.bsu-page .food-card.item-class-red,
.bsu-page .food-card:not(.no-img).item-class-red {
    background: #db5555;
    border-color: #db5555;
}
.bsu-page .food-card.item-class-red .food-name,
.bsu-page .food-card:not(.no-img).item-class-red .food-name {
    color: #fff;
}
.bsu-page .food-card.item-class-red .food-card-body {
    background: #db5555;
    border-top-color: rgba(255, 255, 255, 0.22);
}
.bsu-page .food-card.item-class-red .food-card-body .food-name {
    color: #fff;
}


/* ---- No add-on panel (arriving from the KOT stage): narrow the drawer ----
   .idm-right is removed by ng-if when `isKot && !real_time_kds`, so the form column was
   left stretching across the full 80% drawer. The root carries bsu-idm-noaddons in exactly
   that case (same expression), so the drawer shrinks to fit the form instead. */
.bsu-page.bsu-idm-noaddons .item-detail-modal {
    width: 48%;
    margin-left: 52%;
    min-width: 460px;
}
/* The form column is the only child now — give it the drawer's full width. */
.bsu-page.bsu-idm-noaddons .idm-left {
    border-right: none;
}
@media (max-width: 1024px) {
    .bsu-page.bsu-idm-noaddons .item-detail-modal {
        width: 62%;
        margin-left: 38%;
        min-width: 0;
    }
}


/* ---- CRM chip: the customer name gets the space, not the icon buttons ----
   Measured with a customer attached: the name button was 40px at 1512 and 20px at 1024 —
   effectively invisible — because delete / MORE / each loyalty-comment-address icon were
   60px wide and consumed 240px of a 303px chip. Icon-only buttons come down to 34px, MORE
   keeps room for its word, and the name button gets a floor so it can no longer be squeezed
   to nothing; the chip itself is allowed to grow wider. */
.bsu-page .action-bar .action-right-group .action-user-group {
    max-width: 560px;
}
.bsu-page .action-bar .action-user-group .action-delete-btn,
.bsu-page .action-bar .action-user-group .action-group-icon {
    flex: 0 0 auto;
    width: 34px;
    min-width: 34px;
    padding: 0;
}
.bsu-page .action-bar .action-user-group .action-more-btn {
    flex: 0 0 auto;
    min-width: 44px;
    padding: 0 6px;
}
.bsu-page .action-bar .action-right-group .action-user-group .action-user-btn {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 0 10px;
}
@media (max-width: 1024px) {
    .bsu-page .action-bar .action-right-group .action-user-group { max-width: 340px; }
    .bsu-page .action-bar .action-user-group .action-delete-btn,
    .bsu-page .action-bar .action-user-group .action-group-icon { width: 30px; min-width: 30px; }
    .bsu-page .action-bar .action-user-group .action-more-btn { min-width: 38px; }
    .bsu-page .action-bar .action-right-group .action-user-group .action-user-btn { min-width: 96px; }
}

/* ---- Chip headings centred as one unit ----
   They already centre as a box, but TIMER/COVERS carry an inline SVG while CARD TOTAL does
   not, so the visible word sat a few px right of centre on two of the three. Centring the
   icon+word as a flex row with a fixed gap lines all three up. */
.bsu-page .action-bar .action-btn .action-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
}
.bsu-page .action-bar .action-btn .action-value {
    text-align: center;
}


/* The chip now has a hard content minimum (delete + a readable name + MORE + icons), so it
   must NOT be the element that gives way — it was still carrying flex-shrink:6 from the
   slack-absorbing rule, which squeezed the box below its contents and clipped MORE and the
   loyalty icons off the right edge. Content-sized and capped; the scroll strip yields
   instead, and it has a scroll affordance where the chip does not. The search-box state
   keeps absorbing slack, since a text field genuinely benefits from extra width. */
.bsu-page .action-bar .action-right-group .action-user-group {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
}


/* ---- Comment / assorted actions row ----
   Split out of .comment-row, where .comment-total's flex:1 crushed these buttons out of
   sight in a narrow cart panel. Own row above the totals; buttons never shrink and wrap
   instead. The border-top moves here so the pair still reads as one block with a single
   divider above it. */
.bsu-page .comment-actions-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 18px 0;
    flex-shrink: 0;
    border-top: 1px solid var(--border-light);
}
.bsu-page .comment-actions-row .comment-btn,
.bsu-page .comment-actions-row .input-group {
    flex: 0 0 auto;
}
/* the divider now lives on the actions row when it is present */
.bsu-page .comment-actions-row + .comment-row {
    border-top: none;
}
@media (max-width: 1440px) {
    .bsu-page .comment-actions-row { padding: 8px 12px 0; gap: 6px; }
}
@media (max-width: 1024px) {
    .bsu-page .comment-actions-row { padding: 6px 8px 0; gap: 6px; }
}


/* ---- Bill / KOT comment: full-width row, half each ----
   basis 50% minus half the 8px gap, so the pair fills the row exactly; grow:1 means a brand
   with only ONE of the two enabled gets a single full-width button instead of a half-empty
   row. Make Assorted reuses .bill-comment in the markup, so it is excluded by its own class
   and keeps its natural width, wrapping to the next line. At full width the stacked
   label/sub reads sparse, so those two lay their text out as a centred row. */
.bsu-page .comment-actions-row .comment-btn.bill-comment:not(.make-assorted),
.bsu-page .comment-actions-row .comment-btn.kot-comment {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.bsu-page .comment-actions-row .comment-btn.make-assorted {
    flex: 0 0 auto;
}


/* ---- Bill / KOT comment button text ----
   Laid out as a row, the 13px label beside the 10px sub read as a size mismatch — both are
   now the same size. When a comment exists the button shows it after a slash instead of the
   word "Comment", so the operator can see what was written without opening the modal; long
   comments ellipsize rather than stretching the button (the title attribute still carries
   the full text on hover). Make Assorted is excluded — it keeps its stacked two-line form. */
.bsu-page .comment-actions-row .comment-btn.bill-comment:not(.make-assorted) .btn-label,
.bsu-page .comment-actions-row .comment-btn.kot-comment .btn-label,
.bsu-page .comment-actions-row .comment-btn.bill-comment:not(.make-assorted) .btn-sub,
.bsu-page .comment-actions-row .comment-btn.kot-comment .btn-sub {
    font-size: 13px;
    line-height: 1.2;
}
.bsu-page .comment-actions-row .comment-btn .btn-label { flex: 0 0 auto; font-weight: 700; }
.bsu-page .comment-actions-row .comment-btn .btn-sub {
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* an actual comment is content, not placeholder text — full opacity */
.bsu-page .comment-actions-row .comment-btn .btn-sub.btn-comment-text {
    opacity: 1;
    font-weight: 600;
}


/* ---- Bill / KOT comment button: uniform title, comment on its own line ----
   Equalising the font size alone was not enough — .btn-sub also carries font-weight:500 and
   opacity:0.75 from the base rule, which is what still made "Comment" read smaller than
   "Bill". The whole title is now one uniform string, and an added comment drops to a second
   line with the slash closing the title. */
.bsu-page .comment-actions-row .comment-btn.bill-comment:not(.make-assorted),
.bsu-page .comment-actions-row .comment-btn.kot-comment {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: 6px 12px;
    text-align: left;
}
.bsu-page .comment-actions-row .btn-title {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex: 0 0 auto;
    max-width: 100%;
}
/* one uniform title: same size, same weight, same opacity for every part */
.bsu-page .comment-actions-row .btn-title .btn-label,
.bsu-page .comment-actions-row .btn-title .btn-sub,
.bsu-page .comment-actions-row .btn-title .btn-slash {
    font-size: 13px;
    font-weight: 700;
    opacity: 1;
    line-height: 1.2;
}
/* the comment itself: second line, lighter than the title, ellipsized */
.bsu-page .comment-actions-row .btn-comment-text {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---- Bill / KOT comment button: one flowing line of text ----
   Title and comment are a single inline run inside .btn-text, not separate flex children, so
   "Bill Comment / <comment>" wraps naturally onto a second line and is then clamped with an
   ellipsis. Centred while empty; left-aligned once a comment exists (ng-class has-comment),
   because centred wrapped text is hard to scan. Everything is one uniform size and weight —
   .btn-sub's base font-weight:500 / opacity:0.75 are overridden here, which is what made
   "Comment" keep reading smaller than "Bill" in earlier passes. */
.bsu-page .comment-actions-row .comment-btn.bill-comment:not(.make-assorted),
.bsu-page .comment-actions-row .comment-btn.kot-comment {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 6px 12px;
}
.bsu-page .comment-actions-row .btn-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    max-height: 2.5em;
}
.bsu-page .comment-actions-row .btn-text .btn-label,
.bsu-page .comment-actions-row .btn-text .btn-sub,
.bsu-page .comment-actions-row .btn-text span {
    font-size: 13px;
    font-weight: 600;
    opacity: 1;
    line-height: 1.25;
}
/* once a comment exists the run starts at the left edge */
.bsu-page .comment-actions-row .comment-btn.has-comment .btn-text {
    text-align: left;
}