/*
 * QuickCart Design System
 * Bootstrap 5 presentation layer — no business or layout dependencies.
 * Sections: tokens, base, utilities, buttons, forms, tables, cards,
 * badges, alerts, overlays, empty/loading states, navigation, responsive.
 */

/* 1. Design tokens */
:root {
    --qc-primary: #2563eb;
    --qc-primary-hover: #1d4ed8;
    --qc-primary-soft: #eff6ff;
    --qc-success: #16a34a;
    --qc-success-hover: #15803d;
    --qc-success-soft: #f0fdf4;
    --qc-warning: #f59e0b;
    --qc-warning-hover: #d97706;
    --qc-warning-soft: #fffbeb;
    --qc-danger: #dc2626;
    --qc-danger-hover: #b91c1c;
    --qc-danger-soft: #fef2f2;
    --qc-info: #0ea5e9;
    --qc-info-hover: #0284c7;
    --qc-info-soft: #f0f9ff;
    --qc-bg: #f8fafc;
    --qc-surface: #ffffff;
    --qc-border: #e5e7eb;
    --qc-border-strong: #d1d5db;
    --qc-text: #111827;
    --qc-text-secondary: #6b7280;
    --qc-text-subtle: #9ca3af;
    --qc-radius-sm: 8px;
    --qc-radius-control: 12px;
    --qc-radius-card: 16px;
    --qc-radius-pill: 999px;
    --qc-shadow-xs: 0 1px 2px rgba(17, 24, 39, .04);
    --qc-shadow-sm: 0 4px 14px rgba(17, 24, 39, .05);
    --qc-shadow-md: 0 10px 28px rgba(17, 24, 39, .07);
    --qc-focus-ring: 0 0 0 4px rgba(37, 99, 235, .14);
    --qc-space-1: 8px;
    --qc-space-2: 16px;
    --qc-space-3: 24px;
    --qc-space-4: 32px;
    --qc-space-5: 40px;
    --qc-space-6: 48px;
    --qc-transition: 160ms ease;
}

/* 2. Base */
.qc-app {
    min-height: 100vh;
    background: var(--qc-bg);
    color: var(--qc-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.qc-app h1,
.qc-app h2,
.qc-app h3,
.qc-app h4,
.qc-app h5,
.qc-app h6 {
    color: var(--qc-text);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.qc-app :where(a:not(.btn):not(.dropdown-item)) { color: var(--qc-primary); text-underline-offset: 3px; }
.qc-app :where(a:not(.btn):not(.dropdown-item)):hover { color: var(--qc-primary-hover); }
.qc-app .text-muted { color: var(--qc-text-secondary) !important; }
.qc-app :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 0; box-shadow: var(--qc-focus-ring); }
.qc-app ::selection { background: #bfdbfe; color: var(--qc-text); }
.qc-app img { max-width: 100%; }

/* 3. Spacing and surface utilities */
.qc-section { margin-bottom: var(--qc-space-4); }
.qc-stack > * + * { margin-top: var(--qc-space-2); }
.qc-stack-sm > * + * { margin-top: var(--qc-space-1); }
.qc-stack-lg > * + * { margin-top: var(--qc-space-3); }
.qc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qc-space-1); }
.qc-surface { background: var(--qc-surface); border: 1px solid var(--qc-border); border-radius: var(--qc-radius-card); }
.qc-divider { border: 0; border-top: 1px solid var(--qc-border); margin: var(--qc-space-3) 0; opacity: 1; }
.qc-text-secondary { color: var(--qc-text-secondary) !important; }
.qc-text-subtle { color: var(--qc-text-subtle) !important; }
.qc-min-w-0 { min-width: 0; }
.qc-filter-sm { width: min(100%, 160px); }.qc-filter-md { width: min(100%, 180px); }.qc-filter-lg { width: min(100%, 200px); }
.qc-content-narrow { max-width: 720px; }
.qc-object-cover { object-fit: cover; }.qc-avatar-lg { width: 64px; height: 64px; object-fit: cover; }.qc-icon-hero { font-size: 4rem; line-height: 1; }
.qc-skip-link { position: fixed; z-index: 2000; top: 8px; left: 8px; padding: 8px 14px; border-radius: var(--qc-radius-control); background: var(--qc-primary); color: #fff !important; transform: translateY(-150%); transition: transform var(--qc-transition); }
.qc-skip-link:focus { transform: translateY(0); }

/* 4. Buttons */
.qc-app .btn {
    --bs-btn-border-radius: var(--qc-radius-control);
    min-height: 42px;
    padding: 8px 16px;
    border-width: 1px;
    font-weight: 600;
    line-height: 1.5;
    transition: color var(--qc-transition), background-color var(--qc-transition), border-color var(--qc-transition), box-shadow var(--qc-transition), transform var(--qc-transition);
}

.qc-app .btn:hover { transform: translateY(-1px); }
.qc-app .btn:active { transform: translateY(0); }
.qc-app .btn:focus-visible { box-shadow: var(--qc-focus-ring); }
.qc-app .btn > .bi { display: inline-block; line-height: 1; vertical-align: -.125em; }
.qc-app .btn:disabled,
.qc-app .btn.disabled { pointer-events: none; opacity: .55; transform: none; }

.qc-app .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--qc-primary);
    --bs-btn-border-color: var(--qc-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--qc-primary-hover);
    --bs-btn-hover-border-color: var(--qc-primary-hover);
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--qc-primary-hover);
    --bs-btn-active-border-color: var(--qc-primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--qc-primary);
    --bs-btn-disabled-border-color: var(--qc-primary);
}
.qc-app .btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--qc-success);
    --bs-btn-border-color: var(--qc-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--qc-success-hover);
    --bs-btn-hover-border-color: var(--qc-success-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--qc-success-hover);
    --bs-btn-active-border-color: var(--qc-success-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--qc-success);
    --bs-btn-disabled-border-color: var(--qc-success);
}
.qc-app .btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--qc-danger);
    --bs-btn-border-color: var(--qc-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--qc-danger-hover);
    --bs-btn-hover-border-color: var(--qc-danger-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--qc-danger-hover);
    --bs-btn-active-border-color: var(--qc-danger-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--qc-danger);
    --bs-btn-disabled-border-color: var(--qc-danger);
}
.qc-app .btn-secondary {
    --bs-btn-color: var(--qc-text);
    --bs-btn-bg: #f3f4f6;
    --bs-btn-border-color: var(--qc-border);
    --bs-btn-hover-color: var(--qc-text);
    --bs-btn-hover-bg: #e5e7eb;
    --bs-btn-hover-border-color: var(--qc-border-strong);
    --bs-btn-active-color: var(--qc-text);
    --bs-btn-active-bg: #d1d5db;
    --bs-btn-active-border-color: #9ca3af;
    --bs-btn-disabled-color: var(--qc-text-secondary);
    --bs-btn-disabled-bg: #f3f4f6;
    --bs-btn-disabled-border-color: var(--qc-border);
}
.qc-app .btn-outline-primary {
    --bs-btn-color: var(--qc-primary);
    --bs-btn-border-color: #93c5fd;
    --bs-btn-hover-color: var(--qc-primary-hover);
    --bs-btn-hover-bg: var(--qc-primary-soft);
    --bs-btn-hover-border-color: #60a5fa;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--qc-primary);
    --bs-btn-active-border-color: var(--qc-primary);
    --bs-btn-disabled-color: #60a5fa;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #bfdbfe;
}
.qc-app .btn-outline-secondary {
    --bs-btn-color: #475569;
    --bs-btn-border-color: #cbd5e1;
    --bs-btn-hover-color: #0f172a;
    --bs-btn-hover-bg: #f1f5f9;
    --bs-btn-hover-border-color: #94a3b8;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #475569;
    --bs-btn-active-border-color: #475569;
    --bs-btn-disabled-color: #94a3b8;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #cbd5e1;
}
.qc-app .btn-outline-danger {
    --bs-btn-color: var(--qc-danger);
    --bs-btn-border-color: #fca5a5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--qc-danger);
    --bs-btn-hover-border-color: var(--qc-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--qc-danger-hover);
    --bs-btn-active-border-color: var(--qc-danger-hover);
    --bs-btn-disabled-color: #f87171;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #fecaca;
}

.qc-app a.btn,
.qc-app a.btn:hover,
.qc-app a.btn:focus,
.qc-app a.btn:active { color: var(--bs-btn-color); }
.qc-app a.btn:hover { color: var(--bs-btn-hover-color); }
.qc-app a.btn:active,
.qc-app a.btn.active { color: var(--bs-btn-active-color); }

.qc-app .btn-sm { min-height: 34px; padding: 5px 12px; border-radius: 10px; font-size: .875rem; }
.qc-app .btn-lg { min-height: 50px; padding: 11px 22px; font-size: 1rem; }
.qc-btn-icon { display: inline-flex; width: 42px; height: 42px; padding: 0 !important; align-items: center; justify-content: center; }
.qc-btn-icon.btn-sm { width: 34px; height: 34px; }
.qc-btn-icon.btn-lg { width: 50px; height: 50px; }
.qc-btn-loading { position: relative; pointer-events: none; }
.qc-btn-loading > :not(.spinner-border) { visibility: hidden; }
.qc-btn-loading .spinner-border { position: absolute; width: 18px; height: 18px; inset: 0; margin: auto; }

/* 5. Forms */
.qc-app .form-label { margin-bottom: 6px; color: var(--qc-text); font-size: .9rem; font-weight: 600; }
.qc-required::after { content: " *"; color: var(--qc-danger); }
.qc-app .form-label:not(.qc-required):has(+ :is(.form-control, .form-select)[required])::after { content: " *"; color: var(--qc-danger); }
.qc-app .form-control,
.qc-app .form-select {
    min-height: 44px;
    border: 1px solid var(--qc-border-strong);
    border-radius: var(--qc-radius-control);
    background-color: var(--qc-surface);
    color: var(--qc-text);
    padding: 9px 13px;
    transition: border-color var(--qc-transition), box-shadow var(--qc-transition), background-color var(--qc-transition);
}
.qc-app textarea.form-control { min-height: 112px; resize: vertical; }
.qc-app .form-control::placeholder { color: var(--qc-text-subtle); }
.qc-app .form-control:hover,
.qc-app .form-select:hover { border-color: #9ca3af; }
.qc-app .form-control:focus,
.qc-app .form-select:focus { border-color: var(--qc-primary); box-shadow: var(--qc-focus-ring); }
.qc-app .form-control:disabled,
.qc-app .form-select:disabled { background: #f3f4f6; color: var(--qc-text-secondary); opacity: 1; }
.qc-app .form-text { margin-top: 6px; color: var(--qc-text-secondary); font-size: .8125rem; }
.qc-app .invalid-feedback { margin-top: 6px; color: var(--qc-danger); font-size: .8125rem; font-weight: 500; }
.qc-app .is-invalid { border-color: var(--qc-danger) !important; }
.qc-app .is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .12) !important; }
.qc-app .input-group > .form-control,
.qc-app .input-group > .form-select,
.qc-app .input-group > .input-group-text { border-color: var(--qc-border-strong); }
.qc-app .input-group-text { background: #f9fafb; color: var(--qc-text-secondary); }

.qc-app .form-check-input { width: 18px; height: 18px; border-color: #9ca3af; }
.qc-app .form-check-input:checked { background-color: var(--qc-primary); border-color: var(--qc-primary); }
.qc-app .form-check-input:focus { border-color: var(--qc-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .14); }
.qc-app .form-check-label { color: var(--qc-text); cursor: pointer; }
.qc-app .form-switch .form-check-input { width: 40px; height: 22px; border-radius: var(--qc-radius-pill); }
.qc-app input[type="color"].form-control { min-width: 54px; padding: 5px; cursor: pointer; }

.qc-file-upload {
    display: flex;
    min-height: 132px;
    padding: var(--qc-space-2);
    align-items: center;
    justify-content: center;
    border: 1.5px dashed var(--qc-border-strong);
    border-radius: var(--qc-radius-control);
    background: #fafafa;
    color: var(--qc-text-secondary);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--qc-transition), background-color var(--qc-transition);
}
.qc-file-upload:hover,
.qc-file-upload:focus-within { border-color: var(--qc-primary); background: var(--qc-primary-soft); }
.qc-file-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.qc-image-preview { width: 88px; height: 88px; object-fit: cover; border: 1px solid var(--qc-border); border-radius: var(--qc-radius-control); }

/* 6. Cards */
.qc-card,
.qc-app .card.qc-card {
    background: var(--qc-surface);
    border: 1px solid var(--qc-border);
    border-radius: var(--qc-radius-card);
    box-shadow: var(--qc-shadow-sm);
    color: var(--qc-text);
    overflow: hidden;
    transition: border-color var(--qc-transition), box-shadow var(--qc-transition);
}
.qc-card-header { display: flex; padding: var(--qc-space-3); align-items: flex-start; justify-content: space-between; gap: var(--qc-space-2); border-bottom: 1px solid var(--qc-border); }
.qc-card-body { padding: var(--qc-space-3); }
.qc-card-footer { padding: var(--qc-space-2) var(--qc-space-3); border-top: 1px solid var(--qc-border); background: #fcfcfd; }
.qc-card-title { margin: 0; font-size: 1.05rem; font-weight: 600; }
.qc-card-subtitle { margin: 4px 0 0; color: var(--qc-text-secondary); font-size: .875rem; }
.qc-card-compact .qc-card-header,
.qc-card-compact .qc-card-body { padding: var(--qc-space-2); }
.qc-stat-card { min-height: 136px; padding: var(--qc-space-3); }
.qc-stat-label { color: var(--qc-text-secondary); font-size: .875rem; font-weight: 500; }
.qc-stat-value { margin-top: var(--qc-space-1); color: var(--qc-text); font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.qc-stat-icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: var(--qc-radius-control); background: var(--qc-primary-soft); color: var(--qc-primary); font-size: 1.2rem; }
.qc-info-card { padding: var(--qc-space-2); border-left: 3px solid var(--qc-info); }
.qc-stat-card { transition: transform var(--qc-transition), border-color var(--qc-transition), box-shadow var(--qc-transition); }.qc-stat-card:hover { border-color: #dbeafe; box-shadow: var(--qc-shadow-md); transform: translateY(-2px); }

/* 7. Tables */
.qc-table-card { overflow: hidden; background: var(--qc-surface); border: 1px solid var(--qc-border); border-radius: var(--qc-radius-card); box-shadow: var(--qc-shadow-xs); }
.qc-table-toolbar { display: flex; padding: var(--qc-space-2); align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--qc-space-1); border-bottom: 1px solid var(--qc-border); }
.qc-table-search { position: relative; width: min(100%, 320px); }
.qc-table-search .bi { position: absolute; z-index: 2; top: 50%; left: 13px; color: var(--qc-text-secondary); transform: translateY(-50%); }
.qc-table-search .form-control { padding-left: 38px; }
.qc-table-scroll { max-width: 100%; overflow: auto; }
.qc-table-scroll { scrollbar-color: var(--qc-border-strong) transparent; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.qc-table-card .table { margin: 0; color: var(--qc-text); vertical-align: middle; }
.qc-table-card .table > :not(caption) > * > * { padding: 14px 16px; border-bottom-color: var(--qc-border); }
.qc-table-card .table thead th { position: sticky; z-index: 1; top: 0; background: #f9fafb; color: var(--qc-text-secondary); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.qc-table-card .table tbody tr { transition: background-color var(--qc-transition); }
.qc-table-card .table tbody tr:hover > * { background: #f8fafc; }
.qc-table-card .table tbody tr:last-child > * { border-bottom: 0; }
.qc-table-actions { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.qc-table-media { width: 48px; height: 48px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--qc-border); border-radius: 10px; background: var(--qc-bg); object-fit: cover; }
.qc-card .table { margin-bottom: 0; color: var(--qc-text); vertical-align: middle; }.qc-card .table > :not(caption) > * > * { padding: 13px 12px; border-bottom-color: var(--qc-border); }.qc-card .table thead th { background: #f9fafb; color: var(--qc-text-secondary); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }.qc-card .table tbody tr:last-child > * { border-bottom: 0; }
.qc-store-cover { height: 140px; overflow: hidden; background: #e5e7eb; }.qc-store-cover img { width: 100%; height: 100%; object-fit: cover; }.qc-store-logo-wrap { display: flex; width: 72px; height: 72px; margin-top: -56px; align-items: center; justify-content: center; border: 1px solid var(--qc-border); border-radius: 50%; background: var(--qc-surface); }.qc-store-logo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

/* 8. Badges */
.qc-app .badge,
.qc-badge { display: inline-flex; padding: 5px 10px; align-items: center; gap: 5px; border-radius: var(--qc-radius-pill); font-size: .75rem; font-weight: 600; line-height: 1; }
.qc-badge-primary { background: var(--qc-primary-soft); color: var(--qc-primary-hover); }
.qc-badge-success { background: var(--qc-success-soft); color: var(--qc-success-hover); }
.qc-badge-warning { background: var(--qc-warning-soft); color: #92400e; }
.qc-badge-danger { background: var(--qc-danger-soft); color: var(--qc-danger-hover); }
.qc-badge-info { background: var(--qc-info-soft); color: var(--qc-info-hover); }
.qc-badge-secondary { background: #f3f4f6; color: #4b5563; }
.qc-status-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }

/* 9. Alerts */
.qc-app .alert { padding: 14px 16px; border-width: 1px; border-radius: var(--qc-radius-control); font-size: .9rem; }
.qc-app .alert > .bi:first-child { margin-top: 3px; flex: 0 0 auto; }
.qc-app .alert-success { background: var(--qc-success-soft); border-color: #bbf7d0; color: #166534; }
.qc-app .alert-warning { background: var(--qc-warning-soft); border-color: #fde68a; color: #92400e; }
.qc-app .alert-danger { background: var(--qc-danger-soft); border-color: #fecaca; color: #991b1b; }
.qc-app .alert-info { background: var(--qc-info-soft); border-color: #bae6fd; color: #075985; }
.qc-alert-title { margin-bottom: 2px; color: inherit !important; font-size: .9rem; font-weight: 700; }

/* 10. Modals and offcanvas */
.qc-app .modal-content { border: 1px solid var(--qc-border); border-radius: var(--qc-radius-card); box-shadow: var(--qc-shadow-md); overflow: hidden; }
.qc-app .modal-header { padding: 20px 24px; border-bottom-color: var(--qc-border); }
.qc-app .modal-title { font-size: 1.125rem; font-weight: 600; }
.qc-app .modal-body { padding: 24px; }
.qc-app .modal-footer { padding: 16px 24px; border-top-color: var(--qc-border); gap: 8px; }
.qc-app .offcanvas { border-color: var(--qc-border); box-shadow: var(--qc-shadow-md); }
.qc-app .offcanvas-header { padding: 20px 24px; border-bottom: 1px solid var(--qc-border); }
.qc-app .offcanvas-body { padding: 24px; }
.qc-app .dropdown-menu { padding: 8px; border: 1px solid var(--qc-border); border-radius: var(--qc-radius-control); background: var(--qc-surface); box-shadow: var(--qc-shadow-md); transform-origin: top right; will-change: opacity, scale; }
.qc-app .dropdown-menu[data-popper-placement^="top"] { transform-origin: bottom right; }
.qc-app .dropdown-menu.show { animation: qc-dropdown-in 180ms cubic-bezier(.2, .8, .2, 1) both; }
.qc-app .dropdown-item { min-height: 40px; padding: 8px 10px; border-radius: 8px; color: var(--qc-text); font-size: .875rem; }
.qc-app .dropdown-item:hover,
.qc-app .dropdown-item:focus { background: var(--qc-primary-soft); color: var(--qc-primary-hover); }
/* Keep Popper's positioning transform untouched to prevent dropdowns jumping. */
@keyframes qc-dropdown-in { from { opacity: 0; scale: .975; } to { opacity: 1; scale: 1; } }

/* 11. Empty and loading states */
.qc-empty-state { display: flex; min-height: 280px; padding: var(--qc-space-4); align-items: center; justify-content: center; flex-direction: column; color: var(--qc-text-secondary); text-align: center; }
.qc-empty-icon { display: inline-flex; width: 64px; height: 64px; margin-bottom: var(--qc-space-2); align-items: center; justify-content: center; border-radius: 18px; background: #f3f4f6; color: var(--qc-text-secondary); font-size: 1.75rem; }
.qc-empty-title { margin-bottom: 6px; font-size: 1rem; font-weight: 600; }
.qc-empty-copy { max-width: 420px; margin: 0 0 var(--qc-space-2); font-size: .875rem; }
.qc-spinner { color: var(--qc-primary); }
.qc-loading-inline { display: inline-flex; align-items: center; gap: var(--qc-space-1); color: var(--qc-text-secondary); font-size: .875rem; }
.qc-skeleton { position: relative; overflow: hidden; border-radius: var(--qc-radius-sm); background: #e5e7eb; }
.qc-skeleton::after { position: absolute; content: ""; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); transform: translateX(-100%); animation: qc-shimmer 1.4s infinite; }
.qc-skeleton-text { width: 100%; height: 14px; }
.qc-skeleton-title { width: 55%; height: 22px; }
.qc-skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; }
.qc-skeleton-card { min-height: 136px; }
.qc-error-page { display: flex; min-height: 100vh; padding: 24px; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 0, #eff6ff, transparent 36%), var(--qc-bg); }
.qc-error-card { width: min(100%, 620px); padding: clamp(32px, 7vw, 64px); border: 1px solid var(--qc-border); border-radius: 24px; background: var(--qc-surface); box-shadow: var(--qc-shadow-md); text-align: center; }
.qc-error-icon { display: inline-flex; width: 76px; height: 76px; margin-bottom: 20px; align-items: center; justify-content: center; border-radius: 22px; background: var(--qc-primary-soft); color: var(--qc-primary); font-size: 2rem; }
.qc-error-code { margin-bottom: 6px; color: var(--qc-primary); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.qc-error-card p { max-width: 450px; margin-right: auto; margin-left: auto; }
.qc-auth-page { display: flex; min-height: 100vh; padding: 24px; align-items: center; background: radial-gradient(circle at 12% 0, #1e3a8a 0%, #0f172a 48%, #080d18 100%); }
.qc-auth-page.is-seller { background: radial-gradient(circle at 12% 0, #0f766e 0%, #0f172a 48%, #080d18 100%); }
.qc-auth-card { width: min(100%, 440px); margin: 0 auto; padding: clamp(24px, 5vw, 40px); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; background: var(--qc-surface); box-shadow: 0 30px 70px rgba(2,6,23,.38); }
.qc-auth-mark { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 16px; background: var(--qc-primary); color: #fff; font-size: 1.45rem; font-weight: 700; box-shadow: 0 10px 24px rgba(37,99,235,.32); }
.qc-public-hero { position: relative; overflow: hidden; padding: clamp(40px, 8vw, 88px); border-radius: 24px; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.18), transparent 32%), linear-gradient(135deg, #1d4ed8, #0f766e); color: #fff; }
.qc-public-hero h1 { max-width: 720px; color: #fff; font-size: clamp(2.25rem, 6vw, 4.25rem); letter-spacing: -.05em; }
.qc-public-hero p { max-width: 650px; color: rgba(255,255,255,.82); font-size: 1.05rem; }
.qc-feature-card { height: 100%; padding: 24px; border: 1px solid var(--qc-border); border-radius: var(--qc-radius-card); background: var(--qc-surface); box-shadow: var(--qc-shadow-sm); }
.qc-feature-icon { display: inline-flex; width: 46px; height: 46px; margin-bottom: 18px; align-items: center; justify-content: center; border-radius: 13px; background: var(--qc-primary-soft); color: var(--qc-primary); font-size: 1.2rem; }
.qc-prose { color: var(--qc-text-secondary); line-height: 1.75; overflow-wrap: anywhere; }.qc-prose h2, .qc-prose h3, .qc-prose h4 { margin-top: 1.6em; margin-bottom: .6em; }.qc-prose a { overflow-wrap: anywhere; }.qc-prose img { height: auto; border-radius: var(--qc-radius-control); }
.qc-notification-trigger { position: relative; display: inline-flex; width: 42px; height: 42px; padding: 0 !important; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--qc-radius-control); color: var(--qc-text) !important; text-decoration: none; }
.qc-notification-trigger:hover { border-color: var(--qc-border); background: #f9fafb; }
.qc-notification-menu { width: min(370px, calc(100vw - 24px)); padding: 0 !important; overflow: hidden; }
.qc-notification-list { max-height: min(420px, 60vh); overflow-y: auto; }
.qc-notification-item { border: 0; border-bottom: 1px solid var(--qc-border); border-radius: 0 !important; white-space: normal; }
.qc-notification-item.is-unread { background: var(--qc-primary-soft); }
.qc-notification-item:hover { background: #f8fafc; }
@keyframes qc-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .qc-skeleton::after, .qc-app .dropdown-menu.show { animation: none; } .qc-app *, .qc-app *::before, .qc-app *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* 12. Breadcrumbs and pagination */
.qc-breadcrumb .breadcrumb { margin: 0; align-items: center; gap: 4px; font-size: .875rem; }
.qc-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--qc-text-subtle); }
.qc-breadcrumb .breadcrumb-item a { color: var(--qc-text-secondary); text-decoration: none; }
.qc-breadcrumb .breadcrumb-item a:hover { color: var(--qc-primary); }
.qc-breadcrumb .breadcrumb-item.active { color: var(--qc-text); font-weight: 500; }
.qc-app .pagination { gap: 5px; margin-bottom: 0; }
.qc-app .page-link { display: inline-flex; min-width: 38px; height: 38px; padding: 0 10px; align-items: center; justify-content: center; border: 1px solid var(--qc-border); border-radius: 10px !important; background: var(--qc-surface); color: var(--qc-text-secondary); font-weight: 500; }
.qc-app .page-link:hover { z-index: auto; background: var(--qc-primary-soft); border-color: #bfdbfe; color: var(--qc-primary); }
.qc-app .page-link:focus { box-shadow: var(--qc-focus-ring); }
.qc-app .page-item.active .page-link { background: var(--qc-primary); border-color: var(--qc-primary); color: #fff; }
.qc-app .page-item.disabled .page-link { background: #f9fafb; color: var(--qc-text-subtle); }

/* 13. Responsive rules */
@media (max-width: 991.98px) {
    .qc-card-header { padding: var(--qc-space-2); }
    .qc-card-body { padding: var(--qc-space-2); }
    .qc-table-card .table > :not(caption) > * > * { padding: 12px; }
}

@media (max-width: 767.98px) {
    .qc-section { margin-bottom: var(--qc-space-3); }
    .qc-table-toolbar { align-items: stretch; flex-direction: column; }
    .qc-table-search { width: 100%; }
    .qc-table-actions { justify-content: flex-start; }
    .qc-stat-card { min-height: 120px; padding: var(--qc-space-2); }
    .qc-stat-value { font-size: 1.5rem; }
    .qc-app .modal-dialog { margin: 12px; }
    .qc-app .modal-header,
    .qc-app .modal-body,
    .qc-app .modal-footer { padding: 16px; }
    .qc-app .modal-footer { align-items: stretch; flex-direction: column-reverse; }
    .qc-app .modal-footer .btn { width: 100%; }
    .qc-empty-state { min-height: 220px; padding: var(--qc-space-3) var(--qc-space-2); }
    .qc-app .btn:not(.btn-sm):not(.qc-btn-icon) { min-height: 44px; }
    .qc-error-page { padding: 16px; }
    .qc-filter-sm, .qc-filter-md, .qc-filter-lg { width: 100%; max-width: none; }
}

@media (max-width: 575.98px) {
    .qc-mobile-full { width: 100%; }
    .qc-cluster-mobile-stack { align-items: stretch; flex-direction: column; }
    .qc-table-card { border-right: 0; border-left: 0; border-radius: 0; }
    .qc-card-header { align-items: stretch; flex-direction: column; }
    .qc-card-header .qc-cluster { width: 100%; }
}