:root {
            --te-bg: #f5f5f7;
            --te-surface: #fff;
            --te-text: #1d1d1f;
            --te-muted: #86868b;
            --te-border: #e5e5ea;
            --te-border-input: #d2d2d7;
            --te-accent: #007aff;
            --te-danger: #dc2626;
            --te-success: #15803d;
            --te-header: #000;
            --te-radius-sm: 8px;
            --te-radius-md: 12px;
            --te-radius-lg: 16px;
            --te-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            --te-row-hover: #fbfbfd;
        }

        [data-theme="dark"] {
            --te-bg: #1c1c1e;
            --te-surface: #2c2c2e;
            --te-text: #f5f5f7;
            --te-muted: #98989d;
            --te-border: #3a3a3c;
            --te-border-input: #48484a;
            --te-row-hover: #3a3a3c;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--te-bg);
            color: var(--te-text);
            font-size: 14px;
            -webkit-font-smoothing: antialiased;
        }

        /* BOOT ANIMATION */
        #bootScreen {
            position: fixed;
            inset: 0;
            background: #000;
            z-index: 999999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            transition: opacity 0.6s ease-out;
        }

        @keyframes bootUp {
            0% {
                opacity: 0;
                transform: translateY(40px) scale(0.95);
            }

            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .boot-anim {
            animation: bootUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .boot-anim-text {
            animation: bootUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
            opacity: 0;
            margin-top: 24px;
            font-size: 22px;
            font-weight: 600;
            letter-spacing: 1px;
        }

        /* ICONS */
        .icon-apple {
            width: 14px;
            height: 14px;
            fill: currentColor;
            display: inline-block;
            vertical-align: middle;
            margin-top: -2px;
        }

        .icon-android {
            width: 15px;
            height: 15px;
            fill: #3DDC84;
            display: inline-block;
            vertical-align: middle;
            margin-top: -2px;
        }

        /* LOGIN SCREEN */
        #loginScreen {
            position: fixed;
            inset: 0;
            background: #000;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        #loginScreen.hidden {
            display: none;
        }

        .login-card {
            background: #fff;
            border-radius: 16px;
            padding: 40px 32px;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.1);
            text-align: center;
        }

        .login-logo h2 {
            font-size: 28px;
            font-weight: 800;
            color: #000;
            letter-spacing: -1px;
        }

        .login-logo p {
            font-size: 13px;
            color: #86868b;
            margin-top: 4px;
            font-weight: 500;
        }

        .login-field {
            margin: 24px 0 16px;
        }

        .login-field input {
            width: 100%;
            padding: 14px;
            border: 1px solid #d2d2d7;
            border-radius: 12px;
            font-size: 16px;
            font-family: 'Inter', sans-serif;
            outline: none;
            background: #f5f5f7;
            transition: 0.2s;
            text-align: center;
            letter-spacing: 4px;
        }

        .login-field input:focus {
            border-color: #000;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(0, 0, 0, .1);
        }

        .ocr-drag-over {
            outline: 2px dashed #007aff !important;
            outline-offset: -4px;
            background: rgba(0, 122, 255, 0.05) !important;
            transition: all 0.2s ease;
        }

        .login-btn {
            width: 100%;
            padding: 14px;
            background: #000;
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.2s;
        }

        .login-btn:hover {
            background: #333;
        }

        .login-error {
            background: #fef2f2;
            color: #dc2626;
            padding: 12px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 16px;
            display: none;
            border: 1px solid #fecaca;
        }

        /* HEADER & GLOBAL */
        .app-header {
            background: #000;
            color: #fff;
            padding: 14px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 100;
        }

        .app-header h1 {
            font-size: 18px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .header-btns {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .sync-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            vertical-align: middle;
        }

        .sync-ok {
            background: #34c759;
        }

        .sync-off {
            background: #ffcc00;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            transition: all .2s;
        }

        .btn:hover {
            filter: brightness(0.9);
            transform: translateY(-1px);
        }

        .btn-black {
            background: #000;
            color: #fff;
        }

        .btn-gray {
            background: #e5e5ea;
            color: #1d1d1f;
        }

        .btn-red {
            background: #ff3b30;
            color: #fff;
        }

        .btn-green {
            background: #34c759;
            color: #fff;
        }

        input[type=text]:not(.no-upper),
        textarea:not(.no-upper) {
            text-transform: uppercase;
        }

        /* RECEIPTS APP BODY */
        .app-body {
            max-width: 1400px;
            margin: 0 auto;
            padding: 24px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
        }

        .card {
            background: #fff;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        .card-full {
            grid-column: 1/-1;
        }

        .section-title {
            font-size: 15px;
            font-weight: 700;
            color: #000;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e5e5ea;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        input[type=text],
        input[type=number],
        input[type=url],
        select,
        textarea {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid #d2d2d7;
            border-radius: 8px;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            outline: none;
            background: #fbfbfd;
        }

        input:focus,
        select:focus,
        textarea:focus {
            border-color: #000;
            background: #fff;
        }

        .upload-area {
            border: 1px dashed #d2d2d7;
            border-radius: 12px;
            padding: 16px;
            cursor: pointer;
            text-align: center;
            background: #fbfbfd;
            width: 100%;
        }

        .upload-area.has-image {
            border-style: solid;
            background: #fff;
        }

        .tag {
            background: #f5f5f7;
            color: #000;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            margin: 4px;
            display: inline-flex;
            gap: 6px;
        }

        .suggest-chip,
        .chip {
            display: inline-flex;
            align-items: center;
            background: #f8f9fa;
            border: 1px solid #d2d2d7;
            color: #1d1d1f;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            margin: 2px;
        }

        /* RECEIPT PREVIEW — always light/print-safe */
        #receipt,
        .receipt-doc {
            background: #fff;
            max-width: 800px;
            margin: 0 auto;
            border: 1px solid var(--te-border);
            border-radius: var(--te-radius-lg);
            box-shadow: var(--te-shadow);
            color: #1d1d1f;
            overflow: hidden;
        }

        .receipt-doc--pdf {
            background: #fff !important;
            box-shadow: none !important;
            border: none !important;
        }

        .receipt-header,
        .qb-header {
            padding: 28px 40px 24px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 24px;
            border-bottom: 3px solid #000;
        }

        .receipt-brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .receipt-logo {
            width: 48px;
            height: 48px;
            background: #000;
            color: #fff;
            border-radius: var(--te-radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 800;
            letter-spacing: -0.5px;
            flex-shrink: 0;
        }

        .receipt-brand-name {
            font-size: 22px;
            font-weight: 800;
            color: #000;
            letter-spacing: -0.5px;
            line-height: 1.2;
        }

        .receipt-brand-tag,
        .qb-company {
            font-size: 13px;
            font-weight: 600;
            color: #86868b;
            margin-top: 2px;
        }

        .receipt-meta {
            text-align: right;
            flex-shrink: 0;
        }

        .receipt-meta-label,
        .qb-receipt-title {
            font-size: 11px;
            font-weight: 700;
            color: #86868b;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            display: block;
        }

        .receipt-number {
            font-size: 28px;
            font-weight: 800;
            color: #000;
            margin-top: 4px;
            line-height: 1.1;
            font-variant-numeric: tabular-nums;
        }

        .receipt-date {
            font-size: 13px;
            font-weight: 600;
            color: #86868b;
            margin-top: 6px;
        }

        .receipt-bill,
        .qb-bill {
            padding: 20px 40px;
            background: #fbfbfd;
            border-bottom: 1px solid #e5e5ea;
        }

        .receipt-bill-label {
            font-size: 11px;
            font-weight: 700;
            color: #86868b;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 6px;
        }

        .receipt-bill-value {
            font-size: 18px;
            font-weight: 700;
            color: #000;
            line-height: 1.35;
        }

        .receipt-line-items {
            padding: 0;
        }

        .receipt-table,
        .qb-table {
            width: 100%;
            border-collapse: collapse;
        }

        .receipt-table th,
        .qb-table th {
            background: #f5f5f7;
            padding: 12px 40px;
            text-align: left;
            font-size: 11px;
            font-weight: 700;
            color: #000;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-bottom: 1px solid #d2d2d7;
        }

        .receipt-th-amount {
            text-align: right;
        }

        .receipt-table td,
        .qb-table td {
            padding: 16px 40px;
            border-bottom: 1px solid #e5e5ea;
            font-size: 14px;
            vertical-align: top;
        }

        .receipt-table tbody tr:hover td {
            background: #fbfbfd;
        }

        .receipt-item-name {
            font-weight: 600;
            color: #000;
        }

        .receipt-amount {
            text-align: right;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        .receipt-amount--negative {
            color: #dc2626;
        }

        .receipt-row-unlock td:first-child {
            color: #dc2626;
        }

        .receipt-totals,
        .qb-totals {
            padding: 24px 40px;
            display: flex;
            justify-content: flex-end;
            background: #fff;
        }

        .receipt-totals-box,
        .qb-totals-box {
            width: 100%;
            max-width: 320px;
            border: 1px solid #e5e5ea;
            border-radius: var(--te-radius-md);
            padding: 4px 16px;
            background: #fafafa;
        }

        .receipt-total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
            font-size: 14px;
            color: #1d1d1f;
        }

        .receipt-total-row:last-child {
            border-bottom: none;
        }

        .receipt-total-row--deduction {
            color: #dc2626;
        }

        .receipt-total-row--grand {
            border-top: 2px solid #000;
            margin-top: 6px;
            padding-top: 14px;
            padding-bottom: 12px;
            font-weight: 700;
            font-size: 15px;
        }

        .receipt-amount--grand {
            font-size: 20px;
            font-weight: 800;
            color: #000;
        }

        .receipt-split,
        .qb-split,
        .receipt-gadgets,
        .qb-gadgets {
            padding: 24px 40px;
            border-top: 1px solid #e5e5ea;
            background: #fff;
        }

        .receipt-section-title,
        .qb-split-title,
        .qb-gadgets-title {
            font-size: 11px;
            font-weight: 700;
            color: #86868b;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 14px;
        }

        .receipt-splits-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .receipt-split-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            padding: 12px 16px;
            border-radius: var(--te-radius-sm);
            font-weight: 600;
            font-size: 14px;
            background: #f5f5f7;
            color: #000;
        }

        .receipt-split-row > div:first-child {
            flex: 1;
            min-width: 0;
        }

        .receipt-split-row--primary {
            background: #000;
            color: #fff;
        }

        .receipt-split-row--primary .receipt-split-amt {
            color: #fff;
        }

        .receipt-split-pct-bar {
            height: 4px;
            background: rgba(0, 0, 0, 0.08);
            border-radius: 2px;
            margin-top: 8px;
            overflow: hidden;
        }

        .receipt-split-row--primary .receipt-split-pct-bar {
            background: rgba(255, 255, 255, 0.25);
        }

        .receipt-split-pct-fill {
            height: 100%;
            background: #000;
            border-radius: 2px;
        }

        .receipt-split-row--primary .receipt-split-pct-fill {
            background: #fff;
        }

        .receipt-split-amt {
            font-variant-numeric: tabular-nums;
        }

        .receipt-gadgets-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .receipt-gadget-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            font-size: 14px;
            border-bottom: 1px solid #f5f5f7;
        }

        .receipt-gadget-item:last-child {
            border-bottom: none;
        }

        .receipt-gadget-name {
            color: #1d1d1f;
        }

        .receipt-gadget-name::before {
            content: "• ";
            color: #86868b;
        }

        .receipt-gadget-price {
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

        .receipt-footer {
            padding: 16px 40px 24px;
            border-top: 1px solid #e5e5ea;
            background: #fbfbfd;
            text-align: center;
        }

        .receipt-footer-note {
            font-size: 11px;
            color: #86868b;
            font-weight: 500;
        }

        .receipt-footer-ref {
            font-size: 12px;
            color: #000;
            font-weight: 600;
            margin-top: 6px;
        }

        /* SCROLLABLE HORIZONTAL CONTAINERS */
        .scrollable-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            border-bottom: 1px solid #d2d2d7;
            padding-bottom: 12px;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }

        .scrollable-tabs::-webkit-scrollbar {
            display: none;
        }

        /* MODALS */
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .6);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            padding: 20px;
            backdrop-filter: blur(4px);
            overflow-y: auto;
        }

        .modal-overlay.open {
            display: flex;
        }

        .modal {
            background: #fff;
            border-radius: 20px;
            padding: 32px;
            width: 100%;
            max-width: 560px;
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal h2 {
            font-size: 20px;
            font-weight: 700;
            color: #000;
            margin-bottom: 24px;
            display: flex;
            justify-content: space-between;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #86868b;
        }

        .history-date-header {
            font-size: 12px;
            font-weight: 700;
            color: #86868b;
            text-transform: uppercase;
            margin: 14px 0 7px;
            padding-bottom: 4px;
            border-bottom: 1px solid #eee;
        }

        .history-item {
            border: 1px solid #e5e5ea;
            border-radius: 10px;
            padding: 13px;
            margin-bottom: 8px;
            background: #fbfbfd;
        }

        .h-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .h-title {
            font-weight: 700;
            font-size: 14px;
            color: #000;
            flex: 1;
        }

        .h-sub {
            font-size: 12px;
            color: #86868b;
        }

        .h-actions {
            display: flex;
            gap: 6px;
            margin-top: 8px;
        }

        .config-row {
            margin-bottom: 13px;
        }

        .config-row label {
            display: block;
            font-size: 12px;
            font-weight: 700;
            color: #86868b;
            margin-bottom: 4px;
            text-transform: uppercase;
        }

        /* INVENTORY CSS */
        #inventoryOverlay {
            display: none;
            position: fixed;
            inset: 0;
            background: #f5f5f7;
            z-index: 8000;
            overflow-y: auto;
        }

        .inv-stat-card {
            background: #fff;
            border-radius: 16px;
            padding: 20px;
            border: 1px solid #e5e5ea;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        }

        .inv-table-btn {
            background: #f5f5f7;
            border: 1px solid #d2d2d7;
            padding: 6px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            color: #000;
        }

        .inv-table-btn.delete {
            background: #fef2f2;
            color: #dc2626;
            border-color: #fecaca;
        }

        .cat-tab-btn {
            background: #fff;
            color: #86868b;
            border: 1px solid #d2d2d7;
            border-radius: 20px;
            padding: 8px 16px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            flex-shrink: 0;
        }

        .active-cat-btn {
            background: #000 !important;
            color: #fff !important;
            border-color: #000 !important;
        }

        .os-badge {
            padding: 4px 8px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 11px;
            white-space: nowrap;
        }

        .os-badge-red {
            background: #fee2e2;
            color: #dc2626;
            border: 1px solid #fca5a5;
        }

        .os-badge-yellow {
            background: #fef3c7;
            color: #d97706;
            border: 1px solid #fde68a;
        }

        .os-badge-blue {
            background: #e0f2fe;
            color: #2563eb;
            border: 1px solid #bfdbfe;
        }

        .os-badge-gray {
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #cbd5e1;
        }

        .u3-wrap {
            max-width: 1200px;
            margin: 0 auto;
            padding: 24px;
        }

        .u3-header-card {
            background: #fff;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .02);
            border: 1px solid #e5e5ea;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 16px;
        }

        .u3-grid {
            display: grid;
            grid-template-columns: 320px 1fr 340px;
            gap: 24px;
        }

        .u3-card {
            background: #fff;
            border-radius: 16px;
            border: 1px solid #e5e5ea;
            padding: 24px;
            position: relative;
        }

        .u3-card-title {
            font-size: 13px;
            font-weight: 700;
            color: #86868b;
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .u3-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f5f5f7;
            font-size: 14px;
            gap: 12px;
        }

        .u3-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #d2d2d7;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            text-align: right;
        }

        .u3-input:focus {
            border-color: #000;
            background: #fff;
        }

        .u3-input.left-text {
            text-align: left;
        }

        .det-field {
            background: transparent;
            border: 1px solid transparent;
            font-size: 14px;
            font-weight: 600;
            color: #000;
            font-family: 'Inter', sans-serif;
            text-align: right;
            padding: 4px;
            width: 180px;
            transition: 0.2s;
            outline: none;
            border-radius: 6px;
            appearance: none;
            -webkit-appearance: none;
        }

        .det-field:disabled {
            opacity: 1;
            -webkit-text-fill-color: #000;
            color: #000;
        }

        .det-field.left-text {
            text-align: left;
            width: 100%;
        }

        .det-field.editing {
            border-color: #000;
            background: #fff;
            padding: 6px 10px;
        }

        .det-field.editing.select-pad {
            appearance: auto;
            -webkit-appearance: auto;
            text-align: left;
        }

        .user-initials-badge {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 11px;
            border: 2px solid #fff;
            flex-shrink: 0;
        }

        #notifToast {
            position: fixed;
            top: 70px;
            right: 24px;
            background: #000;
            color: #fff;
            border-radius: 12px;
            padding: 16px 20px;
            font-size: 13px;
            z-index: 10001;
            display: none;
        }

        #notifToast.show {
            display: flex;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        #lightboxOverlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.9);
            z-index: 11000;
            align-items: center;
            justify-content: center;
        }

        @media(max-width:1100px) {
            .app-body {
                grid-template-columns: 1fr 1fr;
            }

            .u3-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media(max-width:768px) {
            .app-body {
                grid-template-columns: 1fr;
                padding: 12px;
                gap: 12px;
            }

            .u3-grid {
                grid-template-columns: 1fr;
            }

            .app-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
                padding: 16px;
            }

            .header-btns {
                width: 100%;
                overflow-x: auto;
                flex-wrap: nowrap;
                padding-bottom: 4px;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }

            .header-btns::-webkit-scrollbar {
                display: none;
            }

            .header-btns .btn {
                flex-shrink: 0;
            }

            .form-row {
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
            }

            .form-row input,
            .form-row select,
            .form-row button {
                width: 100%;
            }

            .receipt-header,
            .qb-header {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 16px;
                padding: 20px;
            }

            .receipt-meta {
                text-align: center;
            }

            .receipt-bill,
            .qb-bill {
                padding: 15px 20px;
            }

            .receipt-table th,
            .receipt-table td,
            .qb-table th,
            .qb-table td {
                padding: 12px 16px;
                font-size: 12px;
            }

            .receipt-split,
            .receipt-gadgets,
            .receipt-totals,
            .receipt-footer,
            .qb-split,
            .qb-gadgets,
            .qb-totals {
                padding: 16px 20px;
            }

            .receipt-totals,
            .qb-totals {
                justify-content: center;
            }

            .receipt-totals-box,
            .qb-totals-box {
                max-width: 100%;
            }

            .u3-wrap {
                padding: 12px;
            }

            .u3-header-card {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
                padding: 16px;
            }

            .u3-header-card>div {
                flex-direction: column;
                align-items: stretch !important;
                gap: 12px;
            }

            .u3-info-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
            }

            .u3-info-label {
                font-size: 11px;
                margin-bottom: 2px;
            }

            .u3-input,
            .det-field {
                width: 100% !important;
                text-align: left !important;
                background: #fbfbfd;
                border: 1px solid #e5e5ea;
                padding: 10px 12px;
            }

            .det-field:disabled {
                background: transparent;
                border-color: transparent;
                padding-left: 0;
            }

            .modal {
                padding: 20px;
                width: 95%;
            }

            #quickChips {
                display: flex;
                overflow-x: auto;
                white-space: nowrap;
                padding-bottom: 8px;
                scrollbar-width: none;
            }

            #quickChips::-webkit-scrollbar {
                display: none;
            }

            #quickChips .chip {
                flex-shrink: 0;
            }
        }

        /* INVESTMENT TAB CSS */
        .inv-badge-purple {
            background: #f3e8ff;
            color: #7c3aed;
            border: 1px solid #d8b4fe;
            padding: 3px 8px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 11px;
        }

        .inv-badge-green {
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #6ee7b7;
            padding: 3px 8px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 11px;
        }

        .inv-badge-red {
            background: #fee2e2;
            color: #dc2626;
            border: 1px solid #fca5a5;
            padding: 3px 8px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 11px;
        }

        .inv-badge-blue {
            background: #dbeafe;
            color: #1d4ed8;
            border: 1px solid #93c5fd;
            padding: 3px 8px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 11px;
        }

        .invest-card {
            background: #fff;
            border-radius: 14px;
            border: 1px solid #e5e5ea;
            padding: 20px;
            margin-bottom: 16px;
        }

        .invest-stat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 14px;
            margin-bottom: 24px;
        }

        .invest-stat-box {
            background: #fff;
            border-radius: 14px;
            padding: 18px 20px;
            border: 1px solid #e5e5ea;
        }

        .invest-stat-label {
            font-size: 11px;
            font-weight: 700;
            color: #86868b;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .invest-stat-val {
            font-size: 26px;
            font-weight: 800;
            color: #000;
        }

        .invest-stat-sub {
            font-size: 12px;
            color: #86868b;
            margin-top: 4px;
        }

        .invest-row-item {
            border-bottom: 1px solid #f5f5f7;
            padding: 14px 0;
            display: flex;
            align-items: flex-start;
            gap: 16px;
        }

        .invest-row-item:last-child {
            border-bottom: none;
        }

        .invest-progress-bar {
            height: 6px;
            background: #f0f0f0;
            border-radius: 99px;
            overflow: hidden;
            margin-top: 6px;
        }

        .invest-progress-fill {
            height: 100%;
            border-radius: 99px;
            transition: width 0.4s;
        }

        .pdf-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #f5f5f7;
            border: 1px solid #d2d2d7;
            border-radius: 8px;
            padding: 5px 10px;
            font-size: 12px;
            font-weight: 600;
            color: #000;
            margin: 3px;
            cursor: pointer;
        }

        .pdf-chip:hover {
            background: #e5e5ea;
        }

        .pdf-chip-del {
            background: none;
            border: none;
            cursor: pointer;
            color: #dc2626;
            font-size: 14px;
            font-weight: 700;
            padding: 0 2px;
            margin-left: 2px;
        }
.sticky-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.sticky-th { position: sticky; top: 0; background: #f5f5f7; z-index: 10; border-bottom: 1px solid #d2d2d7; padding: 14px 10px; text-align: left; font-weight: 600; color: #86868b; text-transform: uppercase; box-shadow: 0 1px 0 #d2d2d7; }

/* Badges for Grades and Statuses */
.badge-pill { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; }
.badge-grade-a { background: #dcfce7; color: #166534; }
.badge-grade-b { background: #e0f2fe; color: #075985; }
.badge-grade-c { background: #ffedd5; color: #9a3412; }
.badge-grade-f { background: #fee2e2; color: #991b1b; }
.badge-grade-none { background: #f3f4f6; color: #4b5563; }
.badge-status-instock { background: #10b981; color: #ffffff; }
.badge-status-sold { background: #9ca3af; color: #ffffff; }
.badge-status-inrepair { background: #fbbf24; color: #ffffff; }

.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9400; display: none; opacity: 0; transition: opacity 0.3s ease; }
.drawer-overlay.open { opacity: 1; }
.drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 100%; max-width: 100%; background: #f5f5f7; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; }
.drawer-overlay.open .drawer-panel { transform: translateX(0); }

/* Glassmorphism Stat Cards */
.inv-stat-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.inv-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.inv-stat-card--clickable { cursor: pointer; }
.inv-stat-label { font-size: 11px; color: var(--te-muted); font-weight: 700; text-transform: uppercase; }
.inv-stat-value { font-size: 26px; font-weight: 800; color: var(--te-text); margin-top: 4px; }
.inv-stat-sub { font-size: 12px; color: var(--te-muted); margin-top: 4px; }
.inv-stat-sub--success { color: var(--te-success); font-weight: 600; }
.inv-stat-chart-wrap { width: 70px; height: 70px; position: relative; }
.inv-stat-card--chart { display: flex; align-items: center; justify-content: space-between; }

.badge-lock, .badge-unlock {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.badge-unlock { background: #e8fdf0; color: var(--te-success); border: 1px solid #34c759; }
.badge-lock { background: #fef2f2; color: var(--te-danger); border: 1px solid #fecaca; }

.inv-row { border-bottom: 1px solid var(--te-border); cursor: pointer; transition: background 0.15s; }
.inv-row:hover, .inv-row:focus-visible { background: var(--te-row-hover); outline: none; }
.inv-row--stock { border-left: 3px solid var(--te-success); }
.inv-row--repair { border-left: 3px solid #fbbf24; }
.inv-thumb { width: 48px; height: 48px; border-radius: var(--te-radius-sm); object-fit: cover; background: var(--te-bg); border: 1px solid var(--te-border); flex-shrink: 0; }
.inv-thumb--empty { display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--te-muted); }
.inv-cell { padding: 14px 10px; }
.inv-cell--muted { font-size: 12px; color: var(--te-muted); }
.inv-cell--name { font-weight: 600; }
.inv-name-inner { display: flex; align-items: center; gap: 8px; }
.inv-sort-th { cursor: pointer; user-select: none; }
.inv-sort-th:hover { color: var(--te-text); }
.inv-sort-th.is-sorted { color: var(--te-text); }

.inv-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.inv-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
    background: var(--te-surface); border: 1px solid var(--te-border); color: var(--te-text);
}
.inv-filter-chip button { background: none; border: none; cursor: pointer; color: var(--te-muted); font-size: 14px; line-height: 1; padding: 0 2px; }
.inv-filter-chip button:hover { color: var(--te-danger); }

.inv-empty-state { text-align: center; padding: 48px 24px; color: var(--te-muted); }
.inv-empty-state h3 { font-size: 16px; font-weight: 700; color: var(--te-text); margin-bottom: 8px; }
.inv-empty-state p { font-size: 14px; margin-bottom: 16px; }

.inv-skeleton-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 24px; }
.inv-skeleton-card { height: 100px; border-radius: var(--te-radius-lg); background: linear-gradient(90deg, var(--te-border) 25%, var(--te-bg) 50%, var(--te-border) 75%); background-size: 200% 100%; animation: skeletonShimmer 1.2s ease-in-out infinite; }
@keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.inv-panel-fade { animation: invPanelFade 0.15s ease; }
@keyframes invPanelFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.inv-tab-btn { background: transparent; color: var(--te-muted); border: none; border-radius: var(--te-radius-sm); padding: 10px 20px; cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; flex-shrink: 0; transition: background 0.2s, color 0.2s; }
.inv-tab-btn.active { background: var(--te-header); color: #fff; }
.inv-tab-btn.tab-trash.active { background: #fef2f2; color: var(--te-danger); }
.inv-tab-btn.tab-dashboard.active { background: #dcfce7; color: var(--te-success); }
.inv-tab-btn.tab-investment.active { background: #f3e8ff; color: #7c3aed; }

.inv-header-bar { background: var(--te-header); color: #fff; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.inv-search-sticky { position: sticky; top: 56px; z-index: 90; background: var(--te-bg); padding-bottom: 8px; margin-bottom: 8px; }
.inv-search-input { width: 100%; padding: 14px; border: 1px solid var(--te-border-input); border-radius: var(--te-radius-md); font-size: 14px; background: var(--te-surface); color: var(--te-text); font-family: inherit; }
.inv-search-input:focus { outline: none; border-color: var(--te-header); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08); }

.inv-card-grid { display: none; }
.inv-device-card {
    background: var(--te-surface); border: 1px solid var(--te-border); border-radius: var(--te-radius-lg);
    padding: 14px; margin-bottom: 12px; cursor: pointer; transition: box-shadow 0.2s;
}
.inv-device-card--stock { border-left: 4px solid var(--te-success); }
.inv-device-card--repair { border-left: 4px solid #fbbf24; }
.inv-device-card-top { display: flex; gap: 12px; align-items: flex-start; }
.inv-device-card-thumb { width: 72px; height: 72px; border-radius: var(--te-radius-md); object-fit: cover; flex-shrink: 0; background: var(--te-bg); }
.inv-device-card-meta { flex: 1; min-width: 0; }
.inv-device-card-title { font-weight: 700; font-size: 15px; }
.inv-device-card-sub { font-size: 12px; color: var(--te-muted); margin-top: 4px; }
.inv-device-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.inv-fab { display: none; position: fixed; bottom: 24px; right: 24px; z-index: 8100; width: 56px; height: 56px; border-radius: 50%; background: var(--te-header); color: #fff; border: none; font-size: 28px; font-weight: 300; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.25); line-height: 1; align-items: center; justify-content: center; }
.inv-load-more { text-align: center; padding: 16px; border-top: 1px solid var(--te-border); }

.drawer-header-bar { background: var(--te-header); color: #fff; padding: 14px 24px; display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 100; flex-shrink: 0; }
.drawer-back-btn { background: transparent; color: #98989d; border: none; cursor: pointer; font-size: 14px; font-weight: 600; padding: 0; color: #fff; opacity: 0.85; }
.drawer-breadcrumb { flex: 1; min-width: 0; }
.drawer-breadcrumb-title { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-breadcrumb-sub { font-size: 11px; color: #98989d; margin-top: 2px; }
.drawer-perm-badge { font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,0.15); color: #fff; white-space: nowrap; }
.drawer-footer-actions {
    position: sticky; bottom: 0; background: var(--te-surface); border-top: 1px solid var(--te-border);
    padding: 12px 16px; display: flex; gap: 10px; z-index: 50; flex-shrink: 0;
}
.drawer-footer-actions .btn { flex: 1; }

.btn:focus-visible, .inv-tab-btn:focus-visible, .cat-tab-btn:focus-visible { outline: 2px solid var(--te-accent); outline-offset: 2px; }

#inventoryOverlay { background: var(--te-bg); }
#inventoryList { background: var(--te-surface); border: 1px solid var(--te-border); }

[data-theme="dark"] .card,
[data-theme="dark"] .inv-stat-card,
[data-theme="dark"] .modal,
[data-theme="dark"] #inventoryList { background: var(--te-surface); border-color: var(--te-border); }
[data-theme="dark"] .sticky-th { background: var(--te-bg); }
[data-theme="dark"] .login-card { background: var(--te-surface); color: var(--te-text); }

@media (max-width: 768px) {
    .inv-table-wrap { display: none !important; }
    .inv-card-grid { display: block !important; }
    .inv-fab { display: flex; }
    .inv-stat-card--chart .inv-stat-chart-wrap { display: none; }
}