:root {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --panel-2: #f8fbff;
    --line: rgba(9, 30, 46, 0.12);
    --line-strong: rgba(0, 116, 160, 0.28);
    --muted: #5f6f80;
    --soft: #334155;
    --text: #0b1824;
    --primary: #006ED7;
    --primary-rgb: 0, 110, 215;
    --cyan: #007DA6;
    --cyan-2: #005F88;
    --green: #237f61;
    --danger: #b93c4b;
    --warn: #8a6500;
}

* {
    box-sizing: border-box;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html {
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body.qq-app,
body.qq-admin {
    min-height: 100vh;
    overscroll-behavior-y: contain;
    color: var(--text);
    background:
        radial-gradient(1200px 600px at 75% -220px, rgba(43, 139, 255, 0.08), transparent 60%),
        radial-gradient(900px 500px at 0 0, rgba(54, 212, 245, 0.045), transparent 55%),
        var(--bg) !important;
    background-attachment: fixed;
    font-family: 'Figtree', system-ui, sans-serif;
}

body.qq-app::before,
body.qq-admin::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 42px);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 58%);
}

body.qq-app,
body.qq-admin {
    background:
        radial-gradient(1100px 520px at 78% -180px, rgba(0, 125, 166, 0.11), transparent 60%),
        radial-gradient(850px 460px at 0 0, rgba(0, 84, 142, 0.08), transparent 55%),
        var(--bg) !important;
}

body.qq-app::before,
body.qq-admin::before {
    background-image: repeating-linear-gradient(90deg, rgba(9,30,46,.04) 0 1px, transparent 1px 42px);
}

::selection {
    background: rgba(54, 212, 245, 0.24);
    color: #fff;
}

button,
a,
input {
    touch-action: manipulation;
}

button,
a {
    transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

button:active,
a:active {
    transform: scale(0.985);
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.font-mono,
#export-preview,
.status-pill,
.section-eyebrow,
.results-bar,
.product-card .font-mono,
#bom-items .font-mono,
#ai-results .font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

.app-topbar {
    background: rgba(15, 29, 51, 0.72) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(135%);
}

.app-topbar h1,
.view-title {
    font-family: 'Archivo', 'Figtree', system-ui, sans-serif;
    color: var(--text) !important;
    letter-spacing: -0.01em;
}

.brand-logo-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    background: linear-gradient(150deg, var(--primary), #006ED7);
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.24);
}

.brand-logo-tile img {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(5%) sepia(18%) saturate(702%) hue-rotate(169deg) brightness(92%) contrast(96%);
}

.brand-subtitle {
    font-family: 'Figtree', system-ui, sans-serif;
    font-size: 9.5px !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6e7a88 !important;
}




.status-pill,
#nav-badge {
    border: 1px solid rgba(67, 201, 138, 0.2) !important;
    background: rgba(67, 201, 138, 0.08) !important;
    color: #7fdcae !important;
    letter-spacing: 0.08em;
}

.view {
    position: relative;
}

.catalog-controls {
    top: 61px !important;
    margin: 0 -1rem 14px;
    padding: 12px 1rem 14px !important;
    background: linear-gradient(180deg, rgba(14, 17, 22, 0.96), rgba(14, 17, 22, 0.82) 82%, rgba(14, 17, 22, 0)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

#search-input {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    color: var(--text) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    outline: none !important;
}

#search-input::placeholder {
    color: #5d6976;
}

#search-input:focus {
    border-color: rgba(47, 214, 201, 0.55) !important;
    background: rgba(54, 212, 245, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(54, 212, 245, 0.08) !important;
}

.results-bar,
#loading-catalog,
#no-results,
#bom-empty {
    color: var(--muted) !important;
}

#btn-clear-search,
#btn-clear-bom {
    color: var(--cyan-2) !important;
}

#category-tabs {
    margin-bottom: 0.25rem;
}

#category-tabs .cat-tab {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    color: #cfd7e0 !important;
    box-shadow: none !important;
}

#category-tabs .cat-tab:hover {
    border-color: rgba(54, 212, 245, 0.30) !important;
    background: rgba(54, 212, 245, 0.065) !important;
    color: #fff !important;
}

#category-tabs .cat-tab.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.28) !important;
}

.section-eyebrow {
    color: var(--cyan-2) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.2em !important;
}

.hub-panel,
.product-card,
#bundles-grid > div,
#bom-items > div,
.bom-total-panel,
#export-preview,
#ai-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
}

.hub-panel {
    padding: 16px;
    border-radius: 18px;
}

.product-card,
#bundles-grid > div,
#bom-items > div {
    border-radius: 16px !important;
}

.product-card {
    min-height: 178px;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.product-card:hover,
#bundles-grid > div:hover,
#bom-items > div:hover {
    transform: translateY(-2px);
    border-color: rgba(54, 212, 245, 0.36) !important;
    background: linear-gradient(180deg, rgba(54, 212, 245, 0.08), rgba(47, 214, 201, 0.02)) !important;
}

.product-card h3,
#bundles-grid p:first-child,
#bom-items p:first-child {
    font-family: 'Archivo', 'Figtree', system-ui, sans-serif;
    color: var(--text) !important;
    font-weight: 600 !important;
}

.product-card p,
#bundles-grid p,
#bom-items p,
#bom-totals p,
#bom-totals span:first-child,
#ai-results p {
    color: var(--muted) !important;
}

.product-card .font-mono,
#bom-items .font-mono {
    color: #6e7a88 !important;
    letter-spacing: 0.02em;
}

.product-card .rounded-full,
#bundles-grid .rounded-full {
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #aeb8c2 !important;
}

.product-card .bg-yellow-100 {
    border-color: rgba(255, 209, 102, 0.24) !important;
    background: rgba(255, 209, 102, 0.1) !important;
    color: #ffe19a !important;
}

.product-card .bg-green-100 {
    border-color: rgba(67, 201, 138, 0.24) !important;
    background: rgba(67, 201, 138, 0.1) !important;
    color: #7fdcae !important;
}

.product-card > div:first-child > span,
#bundles-grid > div > div:first-child > span,
#bom-grand-total,
#bom-items p.text-lg {
    color: var(--cyan-2) !important;
}

#bom-items > div > div:first-child button {
    color: #ff9aa6 !important;
}

#bom-items > div > div:first-child button:hover {
    border-color: rgba(255, 107, 122, 0.45) !important;
    background: rgba(255, 107, 122, 0.08) !important;
    color: #ffd4d9 !important;
}

.product-card a,
.product-card button,
#bundles-grid button,
#bom-items button,
.ai-action,
.secondary-action {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: #d9e1e8 !important;
    box-shadow: none !important;
}

.product-card a:hover,
.product-card button:hover,
#bundles-grid button:hover,
#bom-items button:hover,
.ai-action:hover,
.secondary-action:hover {
    border-color: rgba(54, 212, 245, 0.30) !important;
    background: rgba(54, 212, 245, 0.065) !important;
    color: #fff !important;
}

.product-card button:last-child,
#bundles-grid button,
.primary-action {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.28) !important;
}

#bundles-grid > div {
    min-height: 132px;
}

#bundles-grid > div > div:last-child {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

#btn-load-more {
    margin-top: 0.75rem;
}

.view-title {
    font-size: 1.45rem !important;
}

#bom-empty {
    border: 1px dashed rgba(54, 212, 245, 0.20);
    border-radius: 18px;
    background: rgba(54, 212, 245, 0.035);
}

#bom-empty p:first-child {
    color: var(--text) !important;
    font-family: 'Archivo', 'Figtree', system-ui, sans-serif;
}

#bom-items input {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(0, 0, 0, 0.18) !important;
    color: var(--text) !important;
}

#bom-items input:focus {
    border-color: rgba(47, 214, 201, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(54, 212, 245, 0.08) !important;
}

#bom-totals {
    backdrop-filter: blur(18px) saturate(135%);
    background: linear-gradient(110deg, rgba(43, 139, 255, 0.12), rgba(31, 159, 196, 0.06) 55%, rgba(255, 255, 255, 0.01)) !important;
    border-color: rgba(54, 212, 245, 0.22) !important;
}

#export-preview {
    color: #d9e1e8 !important;
    min-height: 12rem;
}

#ai-backdrop {
    background: rgba(0, 0, 0, 0.62) !important;
    backdrop-filter: blur(3px);
}

#ai-panel {
    border-radius: 22px 22px 0 0 !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
    box-shadow: 0 -26px 80px rgba(0, 0, 0, 0.48) !important;
    backdrop-filter: blur(20px);
}

#ai-panel .sticky {
    background: rgba(16, 21, 28, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#ai-title {
    color: var(--text) !important;
    font-family: 'Archivo', 'Figtree', system-ui, sans-serif;
}

#ai-close {
    color: var(--soft) !important;
}

#ai-close:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #fff !important;
}

#ai-results > div,
#ai-results .bg-gray-50,
#ai-results .bg-white,
#ai-results .bg-blue-50,
#ai-results .bg-yellow-50,
#ai-results .bg-red-50 {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    color: var(--soft) !important;
}

#ai-results .text-gray-800,
#ai-results .font-medium {
    color: var(--text) !important;
}

#ai-results button,
#createSuggestedFix button {
    background: var(--primary) !important;
    color: #ffffff !important;
}

#ai-loading span {
    color: var(--muted) !important;
}

#toast {
    top: 72px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(54, 212, 245, 0.26);
    background: rgba(14, 17, 22, 0.95) !important;
    color: #e8f3ff !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35) !important;
}

nav {
    background: rgba(14, 17, 22, 0.9) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(18px) saturate(135%);
}

nav .nav-tab {
    color: #6e7a88 !important;
}

nav .nav-tab:hover,
nav .nav-tab.text-alta-teal {
    color: var(--cyan-2) !important;
    background: rgba(43, 139, 255, 0.07) !important;
}

nav svg {
    width: 1.35rem;
    height: 1.35rem;
}

/* Light-only counterparts keep the same restrained Internal Alta shape language. */
.app-topbar {
    background: rgba(248, 251, 255, 0.9) !important;
    border-bottom-color: rgba(9, 30, 46, 0.1) !important;
    color: var(--text) !important;
}

.app-topbar h1,
.view-title {
    color: var(--text) !important;
}

.app-topbar a,
.brand-subtitle {
    color: #596a78 !important;
}



.status-pill,
#nav-badge {
    background: rgba(35, 127, 97, 0.08) !important;
    border-color: rgba(35, 127, 97, 0.18) !important;
    color: #18664b !important;
}

.catalog-controls {
    background: linear-gradient(180deg, rgba(244, 247, 251, 0.98), rgba(244, 247, 251, 0.88) 82%, rgba(244, 247, 251, 0)) !important;
    border-bottom-color: rgba(9, 30, 46, 0.07) !important;
}

#search-input,
#bom-items input,
.qq-admin input {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(9, 30, 46, 0.14) !important;
    color: var(--text) !important;
}

#search-input::placeholder,
.qq-admin input::placeholder {
    color: #7b8995 !important;
}

#search-input:focus,
#bom-items input:focus,
.qq-admin input:focus {
    border-color: rgba(0, 125, 166, 0.42) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(0, 125, 166, 0.1) !important;
}

#category-tabs .cat-tab,
.product-card a,
.product-card button,
#bundles-grid button,
#bom-items button,
.ai-action,
.secondary-action {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(9, 30, 46, 0.12) !important;
    color: #1f3a4f !important;
}

#category-tabs .cat-tab:hover,
.product-card a:hover,
.product-card button:hover,
#bundles-grid button:hover,
#bom-items button:hover,
.ai-action:hover,
.secondary-action:hover {
    background: rgba(0, 125, 166, 0.08) !important;
    border-color: rgba(0, 125, 166, 0.28) !important;
    color: #06273a !important;
}

#category-tabs .cat-tab.active,
.product-card button:last-child,
#bundles-grid button,
.primary-action,
#ai-results button,
#createSuggestedFix button {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.18) !important;
}

#export-preview {
    color: #1f3a4f !important;
}

.hub-panel,
.product-card,
#bundles-grid > div,
#bom-items > div,
.bom-total-panel,
#export-preview,
#ai-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 255, 0.82)) !important;
    border-color: rgba(9, 30, 46, 0.1) !important;
}

.product-card:hover,
#bundles-grid > div:hover,
#bom-items > div:hover {
    background: linear-gradient(180deg, rgba(0, 125, 166, 0.06), rgba(255, 255, 255, 0.94)) !important;
    border-color: rgba(0, 125, 166, 0.28) !important;
}

.product-card h3,
#bundles-grid p:first-child,
#bom-items p:first-child,
#ai-title {
    color: var(--text) !important;
}

.product-card p,
#bundles-grid p,
#bom-items p,
#bom-totals p,
#bom-totals span:first-child,
#ai-results p,
.results-bar,
#loading-catalog,
#no-results,
#bom-empty {
    color: var(--muted) !important;
}

.product-card > div:first-child > span,
#bundles-grid > div > div:first-child > span,
#bom-grand-total,
#bom-items p.text-lg,
#btn-clear-search,
#btn-clear-bom,
.section-eyebrow {
    color: var(--cyan-2) !important;
}

#bom-totals {
    background: linear-gradient(110deg, rgba(0, 125, 166, 0.09), rgba(255, 255, 255, 0.92)) !important;
    border-color: rgba(0, 125, 166, 0.22) !important;
}

#ai-panel .sticky {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom-color: rgba(9, 30, 46, 0.1) !important;
}

#ai-results > div,
#ai-results .bg-gray-50,
#ai-results .bg-white,
#ai-results .bg-blue-50,
#ai-results .bg-yellow-50,
#ai-results .bg-red-50 {
    background: rgba(248, 251, 255, 0.96) !important;
    border-color: rgba(9, 30, 46, 0.1) !important;
    color: var(--soft) !important;
}

#toast {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 125, 166, 0.24) !important;
    color: #073246 !important;
}

nav {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(9, 30, 46, 0.12) !important;
    box-shadow: 0 -12px 34px rgba(9, 30, 46, 0.12) !important;
}

nav .nav-tab {
    color: #687887 !important;
}

nav .nav-tab:hover,
nav .nav-tab.text-alta-teal {
    color: var(--cyan-2) !important;
    background: rgba(0, 125, 166, 0.06) !important;
}

/* Admin forms reuse the same panel/card vocabulary without changing routes or security logic. */
.qq-admin main > div,
.qq-admin .bg-white {
    position: relative;
}

.qq-admin .bg-white,
.qq-admin details,
.qq-admin .space-y-3.mb-6 > div {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
}

.qq-admin .bg-white,
.qq-admin details {
    border-radius: 18px !important;
}

.qq-admin h1,
.qq-admin h2,
.qq-admin .text-alta-dark,
.qq-admin .text-gray-800 {
    color: var(--text) !important;
}

.qq-admin h2 {
    font-family: 'Archivo', 'Figtree', system-ui, sans-serif;
    letter-spacing: -0.01em;
}

.qq-admin label,
.qq-admin .text-gray-700,
.qq-admin .text-alta-gray,
.qq-admin .text-gray-500,
.qq-admin .text-gray-400 {
    color: var(--muted) !important;
}

.qq-admin input {
    background: rgba(0, 0, 0, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text) !important;
}

.qq-admin input:focus {
    border-color: rgba(47, 214, 201, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(54, 212, 245, 0.08) !important;
}

.qq-admin button[type="submit"],
.qq-admin #add-bundle-item,
.qq-admin summary {
    color: var(--cyan-2) !important;
}

.qq-admin button[type="submit"].bg-alta-blue,
.qq-admin button[type="submit"].bg-alta-teal,
.qq-admin button[type="submit"].bg-alta-green {
    background: var(--primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--cyan) !important;
    box-shadow: 0 6px 22px rgba(47, 214, 201, 0.22) !important;
}

.qq-admin .bg-red-50,
.qq-admin .bg-green-50 {
    border: 1px solid var(--line) !important;
}

.qq-admin .bg-white,
.qq-admin details,
.qq-admin .space-y-3.mb-6 > div {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.86)) !important;
    border-color: rgba(9, 30, 46, 0.1) !important;
}

.qq-admin button[type="submit"].bg-alta-blue,
.qq-admin button[type="submit"].bg-alta-teal,
.qq-admin button[type="submit"].bg-alta-green {
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(0, 125, 166, 0.18) !important;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 767px) {
    .view {
        padding-bottom: 5.5rem;
    }

    .brand-lockup h1 {
        font-size: 1rem;
    }
}

@media (min-width: 768px) {
    body.qq-app {
        padding-bottom: 7rem;
    }

    .catalog-controls {
        border-radius: 0 0 18px 18px;
    }

    nav {
        left: 50% !important;
        right: auto !important;
        bottom: 1rem !important;
        width: min(42rem, calc(100vw - 2rem));
        transform: translateX(-50%);
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        border-radius: 9999px;
        overflow: hidden;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35) !important;
    }

    nav .nav-tab {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

@media (min-width: 1024px) {
    body.qq-app {
        padding-bottom: 2rem;
    }

    .app-topbar {
        padding-block: 0.875rem !important;
    }

    .catalog-controls {
        top: 68px !important;
    }

    nav {
        top: 0.75rem !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        width: min(24rem, calc(100vw - 32rem));
        transform: translateX(-50%);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32) !important;
    }

    nav .nav-tab {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }
}

/* Central Price Book tab switcher */
.price-book-control {
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.price-book-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.price-book-label {
    display: block;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.price-book-switcher {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(7.25rem, 1fr);
    gap: 0.2rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
}

.price-book-loading {
    padding: 0.75rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.price-book-tab {
    position: relative;
    min-height: 2.65rem;
    padding: 0.65rem 0.75rem 0.6rem;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    white-space: nowrap;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.price-book-tab:hover:not(:disabled) {
    color: var(--text-strong);
    background: color-mix(in srgb, var(--panel-2) 72%, transparent);
}

.price-book-tab.active {
    color: var(--cyan);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cyan) 9%, transparent));
    border-bottom-color: var(--primary);
}

.price-book-tab:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: -3px;
}

.price-book-tab:disabled {
    cursor: wait;
    opacity: 0.58;
}

@media (min-width: 720px) {
    .price-book-switcher {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-flow: initial;
        grid-auto-columns: initial;
        overflow-x: visible;
    }
}

.price-book-meta {
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.72rem;
}

.price-book-stale {
    flex: 0 0 auto;
    padding: 0.28rem 0.5rem;
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.34);
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.09);
    font-size: 0.68rem;
    font-weight: 700;
}

.region-control {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.region-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.region-label {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.region-meta {
    color: var(--cyan);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.region-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.region-tab {
    min-height: 2rem;
    padding: 0.4rem 0.7rem;
    color: var(--muted);
    background: color-mix(in srgb, var(--panel-2) 80%, transparent);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.region-tab:hover:not(:disabled) {
    color: var(--text-strong);
    border-color: color-mix(in srgb, var(--cyan) 38%, var(--line));
}

.region-tab.active {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary);
}

.region-tab:disabled {
    cursor: wait;
    opacity: 0.58;
}

.region-badge {
    border-color: rgba(54, 212, 245, 0.26) !important;
    background: rgba(54, 212, 245, 0.10) !important;
    color: var(--cyan) !important;
    letter-spacing: 0.06em;
}

.catalog-unavailable {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 14px;
    color: var(--muted);
}

.bom-source-line {
    margin-top: 0.3rem;
    color: var(--muted);
    font-size: 0.68rem;
}

.export-preview-table {
    min-width: 760px;
    color: #1f3a4f;
}

.export-preview-row {
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) minmax(28rem, 2.6fr) minmax(6rem, 0.55fr) minmax(7rem, 0.65fr);
    column-gap: 1.35rem;
    align-items: start;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(9, 30, 46, 0.08);
}

.export-preview-row:last-child {
    border-bottom: 0;
}

.export-preview-header {
    padding-top: 0;
    color: #16364f;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.export-preview-cell {
    min-width: 0;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

.export-preview-model {
    white-space: nowrap;
}

.export-preview-quantity,
.export-preview-msrp {
    text-align: right;
    white-space: nowrap;
}

.export-preview-empty {
    margin: 0;
    color: var(--muted);
}

.copy-segment-control {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    height: 3.75rem;
    overflow: hidden;
    border: 1px solid rgba(0, 110, 215, 0.28);
    border-radius: 1rem;
    background: var(--primary);
    box-shadow: 0 12px 30px rgba(var(--primary-rgb), 0.22);
    isolation: isolate;
}

.copy-segment-control::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    border-radius: 0.85rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08));
    opacity: 0;
    transform: translateX(0) scale(0.96);
    pointer-events: none;
    z-index: 1;
}

.copy-segment-control.copy-animate-left::before {
    animation: copy-segment-press 520ms ease;
}

.copy-segment-control.copy-animate-right::before {
    animation: copy-segment-press 520ms ease;
    transform: translateX(100%) scale(0.96);
}

.copy-segment-option {
    position: relative;
    z-index: 2;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Archivo', 'Figtree', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.copy-segment-option span {
    display: block;
    padding: 0 1rem;
}

.copy-segment-left {
    text-align: left;
    padding-right: 2.2rem;
}

.copy-segment-right {
    text-align: right;
    padding-left: 2.2rem;
}

.copy-segment-option:hover:not(:disabled),
.copy-segment-option:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.copy-segment-option:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.74);
    outline-offset: -4px;
}

.copy-segment-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    min-width: 4.35rem;
    min-height: 2.05rem;
    padding: 0 0.9rem;
    color: #ffffff;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: 'Archivo', 'Figtree', system-ui, sans-serif;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.copy-segment-arrow {
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    opacity: 0.9;
    transform: translateY(-0.02rem);
}

.copy-segment-label {
    color: #ffffff;
    font: inherit;
}

.copy-segment-disabled {
    opacity: 0.55;
    box-shadow: none;
}

.copy-segment-option:disabled {
    cursor: not-allowed;
}

@keyframes copy-segment-press {
    0% { opacity: 0; }
    18% { opacity: 1; transform: translateX(var(--copy-segment-x, 0)) scale(0.97); }
    48% { opacity: 1; transform: translateX(var(--copy-segment-x, 0)) scale(1); }
    100% { opacity: 0; transform: translateX(var(--copy-segment-x, 0)) scale(1.04); }
}

.copy-segment-control.copy-animate-left {
    --copy-segment-x: 0;
}

.copy-segment-control.copy-animate-right {
    --copy-segment-x: 100%;
}

/* Refined catalogue-backed Bundle Builder */
.bundle-builder-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    min-height: 2.35rem;
    padding: 0 0.85rem;
    color: #ffffff;
    background: rgba(0, 110, 215, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.bundle-builder-trigger svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
}

.bundle-builder-trigger:hover {
    background: #147ee5;
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 7px 20px rgba(0, 71, 148, 0.26);
}

.bundle-builder-trigger:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.bundle-builder-trigger:active {
    transform: none;
    background: #0063c5;
    box-shadow: 0 3px 10px rgba(0, 45, 100, 0.22);
}

.bundle-editor-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 13, 25, 0.48);
    backdrop-filter: blur(3px);
}

.bundle-editor-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1080px, calc(100% - 2rem));
    height: min(720px, calc(100vh - 4rem));
    margin: 2rem auto;
    overflow: hidden;
    color: #14283a;
    background: #f7f9fc;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 16px;
    box-shadow: 0 28px 80px rgba(3, 13, 25, 0.28);
}

.bundle-editor-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.1rem 1.25rem 1rem;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.bundle-editor-eyebrow {
    margin: 0 0 0.2rem;
    color: #006ed7;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bundle-editor-header h2 {
    margin: 0;
    color: #10263a;
    font-family: 'Archivo', 'Figtree', system-ui, sans-serif;
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.bundle-editor-header #public-bundle-help {
    margin: 0.25rem 0 0;
    color: #617386;
    font-size: 0.82rem;
}

.bundle-editor-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    flex: none;
    padding: 0;
    color: #617386;
    background: #f2f5f8;
    border: 1px solid #dde4eb;
    border-radius: 9px;
    font-size: 1.35rem;
    line-height: 1;
}

.bundle-editor-close:hover,
.bundle-editor-close:focus-visible {
    color: #18354d;
    background: #e8eef4;
}

.bundle-editor-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: 0;
    flex: 1;
}

.bundle-library {
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    background: #f0f4f8;
    border-right: 1px solid #dfe6ed;
}

.bundle-library-heading {
    margin-bottom: 0.75rem;
}

.bundle-library-heading h3,
.bundle-section-heading h3 {
    margin: 0;
    color: #163149;
    font-size: 0.82rem;
    font-weight: 800;
}

.bundle-library-heading p,
.bundle-section-heading p {
    margin: 0.22rem 0 0;
    color: #708194;
    font-size: 0.7rem;
    line-height: 1.35;
}

.bundle-library-list {
    display: grid;
    gap: 0.55rem;
}

.bundle-library-card {
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #dce4ec;
    border-radius: 11px;
}

.bundle-library-card.active {
    background: #f5faff;
    border-color: #70b3f3;
    box-shadow: inset 3px 0 0 #006ed7;
}

.bundle-library-card h3 {
    margin: 0;
    color: #173149;
    font-size: 0.78rem;
    font-weight: 750;
}

.bundle-library-card p {
    margin: 0.2rem 0 0;
    color: #708194;
    font-size: 0.68rem;
    line-height: 1.35;
}

.bundle-library-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.6rem;
    color: #64778a;
    font-size: 0.67rem;
}

.bundle-library-edit {
    min-height: 1.85rem;
    padding: 0 0.65rem;
    color: #006ed7;
    background: #eef6ff;
    border: 1px solid #b9d8f7;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 750;
}

.bundle-library-edit:hover {
    color: #ffffff;
    background: #006ed7;
    border-color: #006ed7;
}

.bundle-library-edit:disabled {
    cursor: default;
    color: #ffffff;
    background: #006ed7;
    border-color: #006ed7;
    opacity: 1;
}

.bundle-editor-workspace {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.1rem 0;
}

.bundle-editor-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.bundle-editor-fields label > span {
    display: block;
    margin-bottom: 0.32rem;
    color: #40566a;
    font-size: 0.72rem;
    font-weight: 750;
}

.bundle-editor-fields small {
    color: #8a99a8;
    font-size: inherit;
    font-weight: 500;
}

.bundle-editor-fields input,
.bundle-catalog-search-wrap input,
.bundle-draft-qty input {
    width: 100%;
    color: #14283a;
    background: #ffffff;
    border: 1px solid #cad5df;
    border-radius: 9px;
    outline: none;
}

.bundle-editor-fields input {
    height: 2.45rem;
    padding: 0 0.7rem;
    font-size: 0.8rem;
}

.bundle-editor-fields input:focus,
.bundle-catalog-search-wrap:focus-within,
.bundle-draft-qty input:focus {
    border-color: #2b8bff;
    box-shadow: 0 0 0 3px rgba(43, 139, 255, 0.12);
}

.bundle-catalog-browser,
.bundle-draft {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dce4ec;
    border-radius: 12px;
}

.bundle-catalog-browser {
    margin-bottom: 0.8rem;
    padding: 0.8rem;
}

.bundle-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.bundle-catalog-region {
    flex: none;
    padding: 0.25rem 0.5rem;
    color: #006ed7;
    background: #edf6ff;
    border: 1px solid #c8e1fa;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 750;
}

.bundle-catalog-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.4rem;
    margin-top: 0.65rem;
    padding: 0 0.65rem;
    background: #f8fafc;
    border: 1px solid #cad5df;
    border-radius: 9px;
}

.bundle-catalog-search-wrap svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: #718296;
}

.bundle-catalog-search-wrap input {
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none !important;
    font-size: 0.8rem;
}

.bundle-catalog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
    overflow-x: visible;
    padding-bottom: 0.15rem;
    scrollbar-width: thin;
}

.bundle-catalog-category {
    min-height: 1.75rem;
    flex: none;
    padding: 0 0.6rem;
    color: #637589;
    background: #f5f7fa;
    border: 1px solid #dce4ec;
    border-radius: 7px;
    font-size: 0.66rem;
    font-weight: 700;
}

.bundle-catalog-category:hover,
.bundle-catalog-category.active {
    color: #006ed7;
    background: #edf6ff;
    border-color: #9bc7f1;
}

.bundle-catalog-status {
    margin: 0.45rem 0 0.3rem;
    color: #78889a;
    font-size: 0.66rem;
}

.bundle-catalog-results {
    display: grid;
    max-height: 13rem;
    overflow-y: auto;
    border-top: 1px solid #edf1f5;
}

.bundle-catalog-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.52rem 0.1rem;
    border-bottom: 1px solid #edf1f5;
}

.bundle-catalog-result:last-child {
    border-bottom: 0;
}

.bundle-catalog-result-copy {
    min-width: 0;
    flex: 1;
}

.bundle-catalog-result-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.bundle-catalog-result-title strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #075dba;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.72rem;
}

.bundle-catalog-result-title span {
    flex: none;
    color: #243c51;
    font-size: 0.7rem;
    font-weight: 750;
}

.bundle-catalog-result-copy p {
    margin: 0.12rem 0 0;
    overflow: hidden;
    color: #40566a;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bundle-catalog-result-copy small {
    display: block;
    margin-top: 0.12rem;
    color: #8795a4;
    font-size: 0.62rem;
}

.bundle-catalog-add {
    min-width: 4.7rem;
    min-height: 1.9rem;
    flex: none;
    padding: 0 0.58rem;
    color: #ffffff;
    background: #006ed7;
    border: 1px solid #006ed7;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 750;
}

.bundle-catalog-add:hover {
    background: #005eb8;
}

.bundle-catalog-empty,
.bundle-draft-empty {
    margin: 0;
    padding: 1rem;
    color: #8190a0;
    font-size: 0.72rem;
    text-align: center;
}

.bundle-draft {
    margin-bottom: 0.8rem;
}

.bundle-draft-heading {
    padding: 0.7rem 0.8rem;
    background: #f8fafc;
    border-bottom: 1px solid #e4eaf0;
}

.bundle-draft-total {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.bundle-draft-total span {
    color: #7a8999;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
}

.bundle-draft-total strong {
    color: #163149;
    font-size: 0.9rem;
}

.bundle-draft-items {
    max-height: 13rem;
    overflow-y: auto;
}

.bundle-draft-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #edf1f5;
}

.bundle-draft-row:last-child {
    border-bottom: 0;
}

.bundle-draft-copy {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 0.08rem;
}

.bundle-draft-copy strong {
    color: #075dba;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.7rem;
}

.bundle-draft-copy span {
    overflow: hidden;
    color: #40566a;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bundle-draft-copy small {
    color: #8795a4;
    font-size: 0.61rem;
}

.bundle-draft-controls {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: none;
}

.bundle-draft-qty {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #708194;
    font-size: 0.65rem;
    font-weight: 700;
}

.bundle-draft-qty input {
    width: 3.4rem;
    height: 2rem;
    padding: 0 0.25rem;
    text-align: center;
    font-size: 0.72rem;
}

.bundle-draft-line-total {
    min-width: 4.6rem;
    color: #243c51;
    font-size: 0.72rem;
    text-align: right;
}

.bundle-draft-remove {
    padding: 0.25rem;
    color: #a43b48;
    background: transparent;
    border: 0;
    font-size: 0.66rem;
    font-weight: 700;
}

.bundle-editor-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4rem;
    margin: auto -1.1rem 0;
    padding: 0.65rem 1.1rem;
    background: rgba(247, 249, 252, 0.96);
    border-top: 1px solid #dfe6ed;
    backdrop-filter: blur(8px);
}

.bundle-editor-footer > p {
    max-width: 60%;
    margin: 0;
    color: #637589;
    font-size: 0.7rem;
    line-height: 1.35;
}

.bundle-editor-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.bundle-primary-action,
.bundle-secondary-action {
    min-height: 2.35rem;
    padding: 0 0.85rem;
    border-radius: 9px;
    font-size: 0.74rem;
    font-weight: 750;
}

.bundle-primary-action {
    color: #ffffff;
    background: #006ed7;
    border: 1px solid #006ed7;
}

.bundle-primary-action:hover:not(:disabled) {
    background: #005eb8;
}

.bundle-primary-action:disabled {
    cursor: not-allowed;
    opacity: 0.46;
}

.bundle-secondary-action {
    color: #53697e;
    background: #ffffff;
    border: 1px solid #cbd6e0;
}

@media (max-width: 760px) {
    .bundle-builder-trigger {
        width: 2.35rem;
        padding: 0;
    }

    .bundle-builder-trigger span {
        display: none;
    }

    .bundle-editor-shell {
        width: calc(100% - 1rem);
        height: calc(100vh - 1rem);
        margin: 0.5rem auto;
        border-radius: 13px;
    }

    .bundle-editor-layout {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .bundle-library {
        min-height: auto;
        max-height: 10rem;
        flex: none;
        border-right: 0;
        border-bottom: 1px solid #dfe6ed;
    }

    .bundle-editor-workspace {
        overflow: visible;
    }

    .bundle-editor-fields {
        grid-template-columns: 1fr;
    }

    .bundle-catalog-categories {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .bundle-editor-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .bundle-editor-footer > p {
        max-width: none;
    }

    .bundle-editor-actions {
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bundle-builder-trigger,
    .bundle-editor-shell,
    .bundle-catalog-add,
    .bundle-primary-action {
        transition: none !important;
        animation: none !important;
    }
}