/* Global Reset & Base Styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   BIXSO CORE DESIGN TOKENS — Triết lý "Cổ Tinh – Tân Kỹ" (blueprint canonical)
   Quy tắc phối màu 60-30-10: Cream nền (60%) · Forest cấu trúc (30%) · Wattle CTA (10%)
   ========================================================================== */
:root {
    /* Bảng màu BIXSO Core (giá trị thô) */
    --bixso-cream: #FAFAF5;       /* 60% nền chủ đạo */
    --bixso-soft-white: #FFFFFF;  /* bề mặt card */
    --bixso-forest: #1A2620;      /* 30% chữ & cấu trúc */
    --bixso-sage: #7FBA73;        /* phụ họa / eco */
    --bixso-teal: #5BC0BE;        /* phụ họa / tech-infra */
    --bixso-wattle: #FFC72C;      /* 10% CTA nhấn mạnh (hoa keo Úc) */
    --bixso-coral: #FF6B47;       /* cảnh báo/ lỗi — chỉ dùng functional */

    /* Typography */
    --font-display: 'Bebas Neue', 'Outfit', sans-serif; /* tiêu đề Display */
    --font-heading: 'Outfit', sans-serif;               /* tiêu đề UI */
    --font-body: 'Inter', sans-serif;                   /* văn bản & UI copy */
    --font-mono: 'Space Grotesk', sans-serif;

    /* Border radius (blueprint visual tokens) */
    --radius-card: 12px;  /* Card & container lớn */
    --radius-btn: 6px;    /* Buttons, inputs, small panels */

    /* Transitions */
    --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s ease;

    /* Z-index scale */
    --z-modal: 1000;
    --z-modal-nested: 1100;
    --z-tooltip: 1200;
    --z-fullscreen: 9990;
}

/* Light/Cream Theme — MẶC ĐỊNH (60% nền chủ đạo theo blueprint) */
:root,
[data-theme="light"] {
    --bg-color: var(--bixso-cream);
    --text-color: var(--bixso-forest);
    --text-muted: #5A6B62;        /* forest pha xám */
    --text-dark: #95A29B;

    --accent-gold: var(--bixso-wattle);          /* CTA chính */
    --accent-gold-glow: rgba(255, 199, 44, 0.18);
    --accent-teal: var(--bixso-teal);            /* tương tác/tech */
    --accent-teal-glow: rgba(91, 192, 190, 0.14);
    --accent-emerald: var(--bixso-sage);         /* eco/positive */
    --accent-red: var(--bixso-coral);
    --accent-orange: #F2994A;
    --accent-orange-glow: rgba(242, 153, 74, 0.1);

    --card-bg: var(--bixso-soft-white);
    --card-bg-hover: #F4F4ED;
    --card-border: rgba(26, 38, 32, 0.10);
    --card-border-hover: rgba(26, 38, 32, 0.22);
    --surface-tint: rgba(26, 38, 32, 0.035);  /* nền phủ mờ cho input/box (khác viền) */

    --grid-line-color: rgba(26, 38, 32, 0.025);

    --glow-a: rgba(255, 199, 44, 0.05);
    --glow-b: rgba(127, 186, 115, 0.04);
    --glow-c: rgba(91, 192, 190, 0.05);
}

/* Forest Dark Theme — tùy chọn phụ (giữ tông forest, không phải xám lạnh) */
/* Dark Mode — nền trung tính gần đen (theo tham chiếu ảnh), KHÔNG dùng tông xanh
   làm primary. Accent tương tác chính chuyển sang Sage Green; Wattle Gold giữ
   vai trò CTA 10% như cũ. */
[data-theme="dark"] {
    --bg-color: #0B0E14;          /* nền trung tính gần đen */
    --text-color: #F1F3F5;        /* trắng ngà trung tính (không ám vàng) */
    --text-muted: #8B94A3;        /* xám lạnh trung tính */
    --text-dark: #565E6B;

    --accent-gold: var(--bixso-wattle);
    --accent-gold-glow: rgba(255, 199, 44, 0.15);
    --accent-teal: var(--bixso-sage);              /* primary tương tác: Sage (không xanh) */
    --accent-teal-glow: rgba(127, 186, 115, 0.14);
    --accent-emerald: #34D399;                     /* seller dark: emerald-400, khác sage */
    --accent-red: var(--bixso-coral);
    --accent-orange: #F2994A;
    --accent-orange-glow: rgba(242, 153, 74, 0.1);

    --card-bg: #131720;            /* bề mặt thẻ, tách lớp rõ với nền */
    --card-bg-hover: #1A1F2A;
    --card-border: rgba(255, 255, 255, 0.08);
    --card-border-hover: rgba(255, 255, 255, 0.16);
    --surface-tint: rgba(255, 255, 255, 0.04);  /* nền phủ mờ cho input/box (khác viền) */

    --grid-line-color: rgba(255, 255, 255, 0.02);

    --glow-a: rgba(255, 199, 44, 0.04);
    --glow-b: rgba(127, 186, 115, 0.04);
    --glow-c: rgba(127, 186, 115, 0.03);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    min-height: 100vh;
    transition: background-color var(--transition-slow);
}

/* Helper Class */
.hidden {
    display: none !important;
}

/* ==========================================================================
   BIXSO SIGNATURE ANIMATION PRIMITIVES (Nguyên lý "Hiện diện hơn Giao diện")
   Tham chiếu ui_ux_blueprint.md §1.1 & §5.2
   ========================================================================== */

/* Breathing — card màn hình chính co giãn nhẹ (chu kỳ 2s, scale 0.98→1.02) */
@keyframes bixBreathing {
    0%, 100% { transform: scale(0.99); box-shadow: 0 4px 20px rgba(26, 38, 32, 0.04); }
    50%      { transform: scale(1.01); box-shadow: 0 10px 30px rgba(26, 38, 32, 0.09); }
}
.animate-breathing {
    animation: bixBreathing 2s ease-in-out infinite;
    transition: transform var(--transition-normal);
}

/* LED Pulse — chấm phát sáng biểu đạt tiến trình Agent chạy ngầm */
.led-pulse {
    position: relative;
    display: inline-flex;
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
}
.led-pulse::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
    animation: bixLedPing 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.led-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
}
@keyframes bixLedPing {
    0%   { transform: scale(1);   opacity: 0.75; }
    75%, 100% { transform: scale(2.2); opacity: 0; }
}
.led-pulse.led-green  { color: var(--bixso-sage); }   /* đang đàm phán ngầm / lắng nghe */
.led-pulse.led-amber  { color: var(--bixso-wattle); } /* chờ duyệt / phân tích */
.led-pulse.led-red    { color: var(--bixso-coral); }  /* lỗi / thất bại */

/* Stagger — dàn trải nội dung con (Qi flow), delay 50ms/phần tử */
@keyframes bixFadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.stagger-children > * {
    opacity: 0;
    animation: bixFadeInUp 0.4s ease forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 50ms; }
.stagger-children > *:nth-child(2) { animation-delay: 100ms; }
.stagger-children > *:nth-child(3) { animation-delay: 150ms; }
.stagger-children > *:nth-child(4) { animation-delay: 200ms; }
.stagger-children > *:nth-child(5) { animation-delay: 250ms; }
.stagger-children > *:nth-child(6) { animation-delay: 300ms; }
.stagger-children > *:nth-child(7) { animation-delay: 350ms; }
.stagger-children > *:nth-child(8) { animation-delay: 400ms; }
.stagger-children > *:nth-child(n+9) { animation-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
    .animate-breathing,
    .led-pulse::before,
    .stagger-children > * { animation: none; opacity: 1; transform: none; }
}

/* Grid & Glow background */
.bg-gridlines {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    background-size: 50px 50px;
    background-image: 
        linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
}
.bg-glow {
    display: none !important;
}
.bg-glow-orange {
    width: 600px;
    height: 600px;
    top: -250px;
    left: -150px;
    background: var(--glow-a);
}
.bg-glow-purple {
    width: 500px;
    height: 500px;
    bottom: -200px;
    right: -150px;
    background: var(--glow-b);
}
.bg-glow-teal {
    width: 450px;
    height: 450px;
    top: 35%;
    left: 45%;
    background: var(--glow-c);
}

/* Main View container */
.view-container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Header */
.main-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 40px;
    border-bottom: 1px solid var(--grid-line-color);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}
.header-left {
    width: 100%;
    display: flex;
    align-items: center;
}

/* ── Header profile container ── */
.header-profile-container {
    position: relative;
    display: inline-flex;
}

/* Header user profile widget */
.header-user-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 12px 2px 3px;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    cursor: default;
    transition: background 0.2s, border-color 0.2s;
    max-width: 260px;
    min-width: 0;
    margin-left: 40px;
    height: 36px;
    box-sizing: border-box;
}
.header-user-profile:hover {
    background: color-mix(in srgb, var(--surface-tint) 70%, var(--accent-teal) 8%);
    border-color: color-mix(in srgb, var(--card-border) 50%, var(--accent-teal) 30%);
}
.hup-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-emerald));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    text-transform: uppercase;
    user-select: none;
}
.hup-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}
.hup-company {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}
.hup-meta {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
}
.hup-flag {
    font-size: 10px;
    line-height: 1;
    flex-shrink: 0;
}
.hup-location {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}
.hup-caret {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 2px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.header-user-profile[aria-expanded="true"] .hup-caret {
    transform: rotate(180deg);
}
.header-user-profile {
    cursor: pointer;
}

/* ── Profile dropdown backdrop ── */
.profile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1099;
    animation: pdBackdropIn 0.2s ease;
}
.profile-backdrop.hidden { display: none; }
@keyframes pdBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
[data-theme="light"] .profile-backdrop {
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(4px);
}

/* ── Profile Dropdown ── */
.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 380px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    z-index: 1100;
    overflow: hidden;
    animation: pdSlideIn 0.18s ease-out;
}
[data-theme="light"] .profile-dropdown {
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.profile-dropdown.hidden { display: none; }
@keyframes pdSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dropdown — top header */
.pd-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 20px 16px;
}
.pd-avatar-lg {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-emerald));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    user-select: none;
}
.pd-header-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}
.pd-company {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.pd-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pd-role-badge {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    border: 1px solid var(--accent-teal);
    color: var(--accent-teal);
    background: var(--accent-teal-glow);
}
.pd-role-badge.seller {
    border-color: var(--accent-seller);
    color: var(--accent-seller);
    background: var(--accent-seller-glow);
}
.pd-industry-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    background: var(--surface-tint);
    white-space: nowrap;
}

/* Dropdown — divider */
.pd-divider {
    height: 1px;
    background: var(--card-border);
    margin: 0;
}

/* Dropdown — section */
.pd-section {
    padding: 14px 20px 10px;
}
.pd-section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.pd-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}
.pd-btn-icon {
    background: none;
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.pd-btn-icon:hover {
    background: var(--surface-tint);
    color: var(--text-color);
    border-color: var(--card-border-hover);
}
.pd-btn-icon i { font-size: 12px; }

/* Dropdown — info grid */
.pd-info-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pd-info-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.pd-info-key {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 80px;
    flex-shrink: 0;
}
.pd-info-val {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-info-val.empty {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
}

/* Dropdown — edit form */
.pd-edit-form {
    padding: 14px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pd-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pd-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pd-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}
.pd-input {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 7px;
    color: var(--text-color);
    font-size: 12px;
    padding: 7px 10px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
    font-family: var(--font-body);
}
.pd-input:focus {
    border-color: var(--accent-teal);
}
.pd-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 2px;
}
.pd-btn-cancel {
    background: none;
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s;
}
.pd-btn-cancel:hover {
    background: var(--surface-tint);
    color: var(--text-color);
}
.pd-btn-save {
    background: var(--accent-teal);
    border: none;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 18px;
    border-radius: 7px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.pd-btn-save:hover { opacity: 0.85; }

/* Dropdown — footer */
.pd-footer {
    padding: 10px 20px 16px;
}
.pd-btn-logout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.pd-btn-logout:hover {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.45);
}
.pd-btn-logout i { font-size: 15px; }

/* Energy indicator in utility bar */
.energy-indicator-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px !important;
}
.energy-badge {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: #f59e0b;
    letter-spacing: 0;
}
.utility-btn-ai i {
    color: var(--accent-emerald);
}

/* ══ ROLE SWITCH NOTIFICATION ══ */
.role-switch-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.role-switch-overlay.hidden { display: none; }
.role-switch-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 32px 36px;
    max-width: 460px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.role-switch-icon {
    font-size: 36px;
    margin-bottom: 12px;
    line-height: 1;
}
.role-switch-heading {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 6px;
}
.role-switch-subtext {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 16px;
    line-height: 1.5;
}
.role-switch-changes {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.role-switch-changes li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--text-color);
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 8px 12px;
    line-height: 1.4;
}
.role-switch-changes li i {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 13px;
}
.role-switch-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.role-switch-actions .btn {
    min-width: 120px;
    padding: 9px 20px;
    font-size: 13px;
    border-radius: var(--radius-btn) !important;
}

/* ══ NOTIFICATION DROPDOWN — full height, right-aligned with icon ══ */
.notification-container {
    position: relative;
}
.notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: calc(100vh - 80px);
    background: #121214;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.7);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideUp var(--transition-fast) ease-out;
}
.notification-dropdown.hidden { display: none; }
[data-theme="light"] .notification-dropdown {
    background: #ffffff;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}
.notification-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--card-border);
    background: var(--surface-tint);
    flex-shrink: 0;
}
.notif-hdr-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}
.notification-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ══ AI TRAINING STUDIO MODAL ══ */
.ai-studio-modal {
    width: 1040px !important;
    max-width: 96vw !important;
    height: 760px !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.ai-studio-header {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--card-border);
    background: var(--surface-tint);
    flex-shrink: 0;
    height: auto !important;
    min-height: 60px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.ai-studio-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.ai-studio-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
}
.ai-studio-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.ai-studio-energy-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 5px 12px;
    flex-shrink: 0;
}
.ai-energy-val {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: #f59e0b;
}
.ai-energy-label {
    font-size: 11px;
    color: var(--text-muted);
}
.btn-energy-charge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.15s;
}
.btn-energy-charge:hover { opacity: 0.85; }
.ai-studio-tabs {
    display: flex;
    border-bottom: 1px solid var(--card-border);
    background: var(--surface-tint);
    padding: 0 20px;
    flex-shrink: 0;
}
.ai-tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    position: relative;
    margin-bottom: -1px;
}
.ai-tab-btn.active {
    color: var(--accent-emerald);
    border-bottom-color: var(--accent-emerald);
    font-weight: 600;
}
.ai-tab-btn:hover:not(.active) { color: var(--text-color); }
.ai-tab-badge {
    background: var(--accent-emerald);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 5px;
    line-height: 1.4;
}
.ai-studio-body {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.ai-tab-content {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 20px;
}
.ai-tab-content.hidden { display: none; }
.ai-tab-content.active { display: block; }

/* Overview tab */
.ai-overview-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.ai-score-card {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ai-score-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ai-score-ring-wrap {
    position: relative;
    width: 80px;
    height: 80px;
}
.ai-score-ring { width: 80px; height: 80px; }
.ai-score-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-emerald);
}
.ai-score-hint {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
}
.ai-energy-card {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 16px;
}
.ai-energy-card-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.ai-energy-big {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 700;
    color: #f59e0b;
    margin-bottom: 10px;
}
.ai-energy-bar-wrap {
    height: 6px;
    background: var(--card-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}
.ai-energy-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    border-radius: 3px;
    transition: width 0.5s;
}
.ai-energy-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.btn-charge-full {
    width: 100%;
    padding: 9px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.15s;
}
.btn-charge-full:hover { opacity: 0.85; }
.ai-models-section { margin-top: 0; }
.ai-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.ai-models-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.ai-model-card {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ai-model-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.ai-model-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
}
.ai-model-status-chip {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    white-space: nowrap;
}
.ai-model-status-chip.trained { background: rgba(5,150,105,0.15); color: var(--accent-emerald); }
.ai-model-status-chip.training { background: rgba(245,158,11,0.15); color: #f59e0b; }
.ai-model-status-chip.pending { background: var(--surface-tint); color: var(--text-muted); border: 1px solid var(--card-border); }
.ai-model-bar-wrap {
    height: 4px;
    background: var(--card-border);
    border-radius: 2px;
    overflow: hidden;
}
.ai-model-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s;
}
.ai-model-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
}
.ai-model-pct {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
}

/* Chat tab */
.ai-chat-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 12px;
}
.ai-chat-context-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 8px 12px;
    flex-shrink: 0;
}
.ai-ctx-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ai-ctx-select {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text-color);
    font-size: 12px;
    padding: 4px 8px;
}
.ai-ctx-cost {
    font-size: 10px;
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ai-chat-history {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 16px;
    background: var(--surface-tint);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ai-chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin: auto;
    padding: 20px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}
.ai-chat-msg {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
}
.ai-chat-msg.user {
    align-self: flex-end;
    background: var(--accent-emerald);
    color: #fff;
    border-bottom-right-radius: 3px;
}
.ai-chat-msg.ai {
    align-self: flex-start;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    border-bottom-left-radius: 3px;
}
.ai-chat-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}
.ai-chat-input {
    flex: 1;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    color: var(--text-color);
    font-size: 12px;
    padding: 10px 14px;
    resize: none;
    font-family: var(--font-body);
    line-height: 1.5;
    transition: border-color 0.15s;
}
.ai-chat-input:focus { outline: none; border-color: var(--accent-emerald); }
.ai-chat-send {
    width: 40px;
    height: 40px;
    background: var(--accent-emerald);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.ai-chat-send:hover { opacity: 0.85; }

/* Upload docs tab */
.ai-docs-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ai-docs-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-muted);
}
.ai-dropzone {
    border: 2px dashed var(--card-border);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.18s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 13px;
}
.ai-dropzone i { font-size: 28px; }
.ai-dropzone:hover {
    border-color: var(--accent-emerald);
    background: rgba(5,150,105,0.04);
    color: var(--text-color);
}
.ai-file-list { display: flex; flex-direction: column; gap: 0; }
.ai-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--card-border);
    font-size: 12px;
}
.ai-file-name {
    flex: 1;
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-file-meta { color: var(--text-muted); white-space: nowrap; }
.ai-file-status {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
}
.ai-file-status.trained { background: rgba(5,150,105,0.15); color: var(--accent-emerald); }
.ai-file-status.processing { background: rgba(245,158,11,0.15); color: #f59e0b; }

/* Queue tab */
.ai-queue-wrap { display: flex; flex-direction: column; gap: 10px; }

/* ══ DOCUMENT STORAGE MODAL ══ */
.doc-storage-modal {
    width: 1040px !important;
    max-width: 96vw !important;
    height: 760px !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.doc-storage-header {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--card-border);
    background: var(--surface-tint);
    flex-shrink: 0;
    height: auto !important;
    min-height: 60px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.doc-storage-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.doc-storage-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
}
.doc-storage-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.doc-storage-usage {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.doc-usage-bar-wrap {
    width: 80px;
    height: 5px;
    background: var(--card-border);
    border-radius: 3px;
    overflow: hidden;
}
.doc-usage-bar-fill {
    height: 100%;
    background: var(--accent-teal);
    border-radius: 3px;
}
.doc-usage-label {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.doc-storage-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}
.doc-storage-sidebar {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    background: var(--surface-tint);
}
.doc-sidebar-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: 0 16px;
    margin-bottom: 8px;
}
.doc-cat-list { flex: 1; overflow-y: auto; }
.doc-cat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.doc-cat-item:hover { background: var(--card-bg); color: var(--text-color); }
.doc-cat-item.active {
    background: var(--card-bg);
    color: var(--text-color);
    font-weight: 600;
    border-right: 2px solid var(--accent-teal);
}
.doc-cat-count {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--card-border);
    padding: 1px 6px;
    border-radius: 8px;
}
.doc-dropzone-sm {
    margin: 12px;
    border: 1px dashed var(--card-border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.doc-dropzone-sm i { font-size: 18px; }
.doc-dropzone-sm:hover { border-color: var(--accent-teal); color: var(--text-color); background: rgba(13,148,136,0.04); }
.doc-storage-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.doc-main-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--card-border);
    flex-shrink: 0;
}
.doc-search-input {
    flex: 1;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 12px;
    padding: 7px 12px;
}
.doc-search-input:focus { outline: none; border-color: var(--accent-teal); }
.doc-sort-select {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 12px;
    padding: 7px 10px;
    cursor: pointer;
}
.doc-file-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
}
.doc-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--card-border);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.doc-file-row:hover { background: var(--surface-tint); margin: 0 -16px; padding: 11px 16px; }
.doc-file-icon { font-size: 18px; flex-shrink: 0; }
.doc-file-info { flex: 1; min-width: 0; }
.doc-file-name-main {
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-file-meta-row { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.doc-file-type-chip {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.doc-file-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.doc-file-row:hover .doc-file-actions { opacity: 1; }
.doc-file-action-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.doc-file-action-btn:hover { background: var(--card-border); color: var(--text-color); }
.header-center {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}
.logo {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo-icon { height: 30px; width: auto; display: block; }
.logo-text { display: inline-block; }
.logo-accent {
    color: var(--accent-teal);
}

/* Nút chuyển đổi vai trò (Role Switcher) phẳng không icon sát bên cạnh logo */
.btn-switch-role-text {
    background: transparent;
    border: 1px solid var(--accent-teal);
    color: var(--accent-teal);
    padding: 5px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: var(--radius-btn) !important; /* Vuông góc tuyệt đối */
    transition: all var(--transition-fast);
    text-transform: uppercase;
}
.btn-switch-role-text:hover {
    background: var(--accent-teal-glow);
}
[data-theme="light"] .btn-switch-role-text:hover {
    background: rgba(2, 132, 199, 0.05);
}
/* Trạng thái khi ở vai trò Seller */
.btn-switch-role-text.role-seller {
    border-color: var(--accent-seller);
    color: var(--accent-seller);
}
.btn-switch-role-text.role-seller:hover {
    background: var(--accent-seller-glow);
}

/* Theme Switcher */
.header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}
.theme-toggle {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}
.theme-toggle:hover {
    border-color: var(--card-border-hover);
    transform: scale(1.02);
}
.theme-toggle .sun-icon { display: none; }
[data-theme="light"] .theme-toggle .moon-icon { display: none; }
[data-theme="light"] .theme-toggle .sun-icon { display: block; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--radius-btn) !important; /* Sắc nét hơn, kiểu Zip */
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: 15px;
    border: none;
}
.btn-primary {
    background: var(--accent-teal);
    color: #fff;
}
.btn-primary:hover {
    background: var(--accent-emerald);
    transform: translateY(-1px);
}
/* CTA chính Wattle Gold (10% — chỉ dùng cho hành động quan trọng nhất:
   Duyệt/Ký PO, Submit RFQ, Đăng ký). Chữ Forest để đủ tương phản trên gold. */
.btn-cta-gold {
    background: var(--accent-gold) !important;
    color: var(--bixso-forest) !important;
    border: 1px solid var(--accent-gold) !important;
    font-weight: 600;
    box-shadow: 0 4px 14px var(--accent-gold-glow);
}
.btn-cta-gold:hover {
    background: #F0B81F !important;
    border-color: #F0B81F !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--accent-gold-glow);
}
.btn-cta-gold i,
.btn-cta-gold span { color: var(--bixso-forest) !important; }
.btn-prev {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
}
.btn-prev:hover {
    background: var(--card-bg-hover);
    border-color: var(--card-border-hover);
}

/* Minimal Flat Card styling (Zip concept) */
.minimal-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    box-shadow: none;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.3s ease,
                background-color var(--transition-slow);
}

/* ==========================================================================
   MÀN HÌNH 1: LANDING PAGE STYLE
   ========================================================================== */
.landing-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 48px 0 0;
    gap: 120px;
}
.landing-hero {
    text-align: center;
    max-width: 820px;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-teal-glow);
    border: 1px solid var(--accent-teal);
    color: var(--accent-teal);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--radius-btn) !important;
    margin-bottom: 24px;
    text-transform: uppercase;
}
.landing-title {
    font-family: var(--font-display);
    font-size: 76px;
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}
.text-gradient {
    color: var(--accent-teal);
    font-weight: 700;
}
.landing-subtitle {
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 40px;
}
.btn-google-auth {
    background: #000;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
[data-theme="light"] .btn-google-auth {
    background: #ffffff;
    color: #000;
    border: 1px solid rgba(0,0,0,0.1);
}
.btn-google-auth:hover {
    transform: translateY(-1px);
}
.google-icon {
    margin-right: 4px;
}

.landing-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1100px;
}
.feature-card {
    padding: 30px;
    text-align: center;
}
.feature-card:hover {
    border-color: var(--card-border-hover);
    background: var(--card-bg-hover);
}
.feat-icon {
    color: var(--accent-teal);
    width: 36px;
    height: 36px;
    margin-bottom: 20px;
}
.feature-card h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 12px;
}
.feature-card p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* ==========================================================================
   LANDING PAGE — SECTIONS MỞ RỘNG (Hero / AI / Dual-role / Flow / CTA)
   Role accent dành riêng cho landing (Buyer = Sapphire, Seller = Emerald)
   ========================================================================== */
.landing-main {
    --lp-buyer: #3B82F6;          /* Sapphire Blue — Buyer side */
    --lp-buyer-soft: rgba(59, 130, 246, 0.12);
    --lp-seller: #10B981;         /* Emerald Green — Seller side */
    --lp-seller-soft: rgba(16, 185, 129, 0.12);
}

/* Hero secondary actions & trust strip */
.landing-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
.btn-ghost-landing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: var(--radius-btn) !important;
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-color);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-normal);
}
.btn-ghost-landing:hover {
    border-color: var(--accent-teal);
    color: var(--accent-teal);
}
.btn-ghost-landing i { width: 16px; height: 16px; }
.landing-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    margin-top: 36px;
    color: var(--text-muted);
    font-size: 13px;
    font-family: var(--font-mono);
}
.landing-trust-strip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.landing-trust-strip i {
    width: 15px;
    height: 15px;
    color: var(--accent-teal);
}

/* Generic section scaffold */
.landing-section {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section-head {
    text-align: center;
    max-width: 760px;
    margin-bottom: 48px;
}
.section-kicker {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-teal);
    margin-bottom: 14px;
}
.section-title {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}
.section-lead {
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.65;
}

/* ---- AI band ---- */
.ai-flow-graphic {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 40px;
}
.ai-node-master {
    background: var(--card-bg);
    border: 1px solid var(--accent-teal);
    border-radius: var(--radius-card) !important;
    padding: 20px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 0 40px var(--accent-teal-glow);
    max-width: 320px;
}
.ai-node-master i { width: 28px; height: 28px; color: var(--accent-teal); margin-bottom: 4px; }
.ai-node-master strong { font-family: var(--font-heading); font-size: 18px; font-weight: 600; }
.ai-node-master small { color: var(--text-muted); font-size: 12px; }
.ai-node-connector {
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, var(--accent-teal), var(--card-border));
}
.ai-worker-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 760px;
}
.ai-worker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    transition: all var(--transition-normal);
}
.ai-worker:hover {
    border-color: var(--accent-teal);
    color: var(--accent-teal);
    transform: translateY(-2px);
}
.ai-worker i { width: 15px; height: 15px; color: var(--accent-teal); }
.ai-principle-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 760px;
}
.ai-principle {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card) !important;
}
.ai-principle > i { width: 24px; height: 24px; color: var(--text-muted); flex-shrink: 0; margin-top: 2px; }
.ai-principle strong { display: block; font-family: var(--font-heading); font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.ai-principle span { color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.ai-principle-accent { border-color: var(--accent-gold); box-shadow: 0 4px 20px var(--accent-gold-glow); }
.ai-principle-accent > i { color: var(--accent-gold); }

/* ---- Dual-role ---- */
.role-cards {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.role-card {
    padding: 32px;
    text-align: left;
    border-top: 3px solid var(--card-border);
    transition: transform 0.4s cubic-bezier(0.25,1,0.5,1), border-color 0.3s ease;
}
.role-card-buyer { border-top-color: var(--lp-buyer); }
.role-card-seller { border-top-color: var(--lp-seller); }
.role-card-buyer:hover { transform: translateY(-4px); box-shadow: 0 12px 40px var(--lp-buyer-soft); }
.role-card-seller:hover { transform: translateY(-4px); box-shadow: 0 12px 40px var(--lp-seller-soft); }
.role-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.role-pill {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 12px;
    border-radius: var(--radius-btn) !important;
}
.role-pill-buyer { background: var(--lp-buyer-soft); color: var(--lp-buyer); }
.role-pill-seller { background: var(--lp-seller-soft); color: var(--lp-seller); }
.role-card-icon { width: 22px; height: 22px; color: var(--text-muted); }
.role-card-buyer .role-card-icon { color: var(--lp-buyer); }
.role-card-seller .role-card-icon { color: var(--lp-seller); }
.role-card h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.role-card > p { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.role-feature-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.role-feature-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-color); }
.role-feature-list i { width: 15px; height: 15px; flex-shrink: 0; }
.role-card-buyer .role-feature-list i { color: var(--lp-buyer); }
.role-card-seller .role-feature-list i { color: var(--lp-seller); }
.role-switch-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.role-switch-knob {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    background-image: linear-gradient(135deg, var(--lp-buyer-soft), var(--lp-seller-soft));
}
.role-switch-knob i { width: 22px; height: 22px; color: var(--text-color); }

/* ---- Flow track (7 modules) ---- */
.flow-track {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    width: 100%;
    counter-reset: flow;
}
.flow-step {
    position: relative;
    padding: 24px 14px 14px;
    text-align: center;
    border-top: 2px solid var(--card-border);
}
.flow-step::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-teal);
    transform: translateX(-50%);
    box-shadow: 0 0 0 4px var(--bg-color);
}
.flow-step::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--accent-teal);
    opacity: 0.35;
    z-index: -1;
}
.flow-step-last::after { display: none; }
.flow-num {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-teal);
}
.flow-icon { width: 26px; height: 26px; color: var(--text-color); margin: 12px 0 10px; }
.flow-step h4 { font-family: var(--font-heading); font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.flow-step p { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }

/* ---- Final CTA band ---- */
.landing-cta-band {
    width: 100%;
    max-width: 1100px;
    text-align: center;
    padding: 64px 40px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card) !important;
    background:
        radial-gradient(circle at 50% 0%, var(--accent-gold-glow), transparent 60%),
        var(--card-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.landing-cta-band h2 {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}
.landing-cta-band p {
    color: var(--text-muted);
    font-size: 17px;
    margin-bottom: 32px;
    max-width: 520px;
}

/* ---- Footer ---- */
.landing-footer {
    width: 100%;
    max-width: 1400px;
    margin-top: 80px;
    padding: 32px 0 40px;
    border-top: 1px solid var(--grid-line-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.landing-footer-tag { color: var(--text-muted); font-size: 13px; font-family: var(--font-mono); }

/* ==========================================================================
   MÀN HÌNH 2: ONBOARDING STYLE
   ========================================================================== */
#viewOnboarding {
    justify-content: center;
    align-items: center;
    padding: 40px 0;
}
.onboarding-card {
    width: 100%;
    max-width: 650px;
    padding: 40px;
}
.onboarding-header h2 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 6px;
}
.onboarding-header p {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}
.progress-bar {
    width: 100%;
    height: 3px;
    background: var(--surface-tint);
    margin-bottom: 30px;
    overflow: hidden;
}
.progress {
    height: 100%;
    background: var(--accent-teal);
    transition: width var(--transition-normal);
}

.onboarding-step {
    display: none;
}
.onboarding-step.active {
    display: block;
    animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.onboarding-step h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
}
.step-desc {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

/* Inputs */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
    width: 100%;
}
.input-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}
.input-group input, .input-group select, .input-group textarea {
    background: var(--bg-color);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    padding: 14px 20px;
    border-radius: var(--radius-btn) !important;
    outline: none;
    font-size: 15px;
    transition: all var(--transition-normal);
}
.input-group input:focus, .input-group select:focus, .input-group textarea:focus {
    border-color: var(--accent-teal);
}

/* Role Options */
.role-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}
.role-option-card {
    padding: 24px;
    border-radius: var(--radius-btn) !important;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-align: center;
}
.role-option-card:hover {
    border-color: var(--card-border-hover);
    background: var(--card-bg-hover);
}
.role-option-card i {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.role-option-card h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
}
.role-option-card p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}
.role-option-card.active {
    border-color: var(--accent-teal);
    background: var(--accent-teal-glow);
}
.role-option-card.active i {
    color: var(--accent-teal);
}

/* Tag Picker */
.tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}
.tag-item {
    padding: 10px 18px;
    border-radius: var(--radius-btn) !important;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.tag-item:hover {
    border-color: var(--card-border-hover);
    background: var(--card-bg-hover);
}
.tag-item.selected {
    background: var(--accent-teal);
    color: #fff;
    border-color: var(--accent-teal);
}
.onboarding-actions {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 30px;
}
.onboarding-actions .btn {
    flex: 1;
}

/* ==========================================================================
   MÀN HÌNH 3: HOME MATCHING ARENA (Tối giản 2 hàng riêng biệt)
   ========================================================================== */

/* Matching Arena Layout */
.matching-arena {
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: none !important;
    width: 100% !important;
    padding: 12px 40px 45px 40px !important; /* Standarized console padding - increased content space */
    position: relative;
}

.arena-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px !important; /* Spacing handled by individual margins */
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;       /* cho phép con flex co lại — chống tràn dọc */
    overflow: hidden;    /* không để marquee tràn ra ngoài & chui sau navbar */
}

/* Khối marquee chiếm trọn phần còn lại và CO GIÃN theo chiều cao viewport.
   Khoảng cách 2 hàng dùng clamp() thay cho số cứng để responsive tuyệt đối. */
.marquee-arena-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(40px, 8vh, 100px);
    align-items: center;
    box-sizing: border-box;
    flex: 0 0 auto;   /* auto-size to content; margin:auto handles centering */
    min-height: 0;
    margin-top: auto;    /* distribute free space above → vertical centering */
    margin-bottom: auto; /* distribute free space below → vertical centering */
}

.match-row-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    position: relative;
}

/* Nhãn hàng Potential Customers căn lề trái */
.row-label {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

/* Nhãn hàng Your Products căn lề phải đối xứng gương */
#containerRowBottom .row-label {
    text-align: right;
}

/* Wrapper ngang chứa Sidebar Lọc, Marquee, và Spacer */
.row-layout-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 20px;
    position: relative;
}

/* Bộ lọc Category dọc đối xứng gương */
.category-sidebar {
    width: 200px;
    height: 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    scrollbar-width: none; /* Ẩn scrollbar Firefox */
    position: relative;
    padding: 10px 0;
    /* Hiệu ứng fading biên trên và biên dưới */
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    z-index: 8;
    left: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
}
.category-sidebar::-webkit-scrollbar {
    display: none; /* Ẩn scrollbar Chrome/Safari */
}

.category-sidebar.left {
    align-items: flex-start !important;
    text-align: left !important;
    position: relative;
    left: 0 !important;
}
.category-sidebar.right {
    align-items: flex-end !important;
    text-align: right !important;
    position: relative;
    left: 0 !important;
}

/* Category Menu Horizontal */
.category-menu-horizontal {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 6px 0 !important;
    width: 100% !important;
    border-bottom: 1px solid var(--card-border) !important;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}

.category-menu-horizontal::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.category-menu-horizontal .category-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important; /* Override inline width: 100% */
    gap: 8px !important; /* Space between label and count badge */
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    background: var(--surface-tint) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-btn) !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.category-menu-horizontal .category-item::before,
.category-menu-horizontal .category-item::after {
    display: none !important; /* Hide dot indicator or bullets */
}

.category-menu-horizontal .category-item:hover {
    background: var(--surface-tint) !important;
    color: var(--text-color) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.category-menu-horizontal .category-item.active {
    background: rgba(127, 186, 115, 0.1) !important;
    color: var(--accent-teal) !important;
    border-color: var(--accent-teal) !important;
    font-weight: 600 !important;
}

.category-menu-horizontal button.category-item {
    font-family: inherit !important;
    text-align: center !important;
}

[data-theme="light"] .category-menu-horizontal .category-item {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: var(--card-border) !important;
}
[data-theme="light"] .category-menu-horizontal .category-item:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: var(--card-border-hover) !important;
}
[data-theme="light"] .category-menu-horizontal .category-item.active {
    background: var(--accent-teal-glow) !important;
    color: var(--accent-teal) !important;
    border-color: var(--accent-teal) !important;
}

#contactCategorySidebar > div {
    display: none !important;
}

/* Spacer đệm trống đối xứng có chiều rộng bằng Category Sidebar */
.category-spacer {
    width: 200px;
    flex-shrink: 0;
}
.category-spacer.left {
    position: relative;
    left: -30px;
}
.category-spacer.right {
    position: relative;
    left: 30px;
}

/* Nút danh mục (Category Item) phẳng vuông vức */
.category-item {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: var(--radius-btn) !important;
    border-left: 2px solid transparent !important;
    white-space: nowrap;
    position: relative;
    width: fit-content;
}
.category-item:hover {
    color: var(--text-color);
}

.category-item.active {
    color: var(--accent-teal) !important;
    font-weight: 600 !important;
    background: rgba(127, 186, 115, 0.04) !important;
    border-left: 2px solid var(--accent-teal) !important;
}
.category-sidebar.right .category-item.active {
    color: var(--accent-teal) !important;
    background: rgba(127, 186, 115, 0.04) !important;
    border-right: 2px solid var(--accent-teal) !important;
    border-left: none !important;
}

/* Marquee / Carousel Wrapper ở trung tâm.
   Chiều cao mỗi hàng CO GIÃN theo viewport (clamp + vh) — !important để thắng
   inline style="height:190px" trong template. Giữ nguyên CHIỀU RỘNG card (175px)
   để không phá toán căn giữa trong alignCardsInCenter(). */
.match-marquee-wrapper {
    position: relative;
    flex: 1;
    overflow: visible;
    /* 20px dọc cho shadow/glow; 12px ngang = 1 radius-card để góc bo của card hiện đủ trước khi mask fade */
    clip-path: inset(-20px -12px);
    height: clamp(160px, 26vh, 240px) !important;
    display: flex;
    align-items: center;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Cả 4 cạnh trên wrapper */
#containerRowTop .match-marquee-wrapper {
    border: 1px solid var(--card-border);
}
#containerRowBottom .match-marquee-wrapper {
    border: 1px solid var(--card-border);
}

/* top/bottom thay height:100% — tạo khoảng cách 6px từ mỗi border đến card,
   không bị ảnh hưởng bởi box-sizing:border-box như padding trên parent */
#matchRowTop {
    display: flex;
    gap: 12px;
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    height: auto;
    align-items: flex-end; /* Top row cards align bottom */
    will-change: transform;
}

#matchRowBottom {
    display: flex;
    gap: 12px;
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    height: auto;
    align-items: flex-start; /* Bottom row cards align top */
    will-change: transform;
}

/* Thẻ Card Matching thon gọn, phẳng lỳ tinh tế hơn (Zip Style) */
.match-card {
    width: 175px;                          /* GIỮ CỐ ĐỊNH — alignCardsInCenter() phụ thuộc */
    /* Thấp hơn wrapper (26vh) đủ để card focus ×1.08 + 2×6px gap vẫn nằm gọn,
       không tràn qua border top/bottom của wrapper ở mọi chiều cao viewport */
    height: clamp(130px, 21vh, 200px);
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important; /* Đảm bảo phẳng vuông góc hoàn toàn */
    box-shadow: none;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease,
                background-color var(--transition-slow);
    user-select: none;
}
.match-card:hover {
    border-color: var(--card-border-hover);
}

#matchRowTop .match-card {
    transform-origin: bottom center; /* Scale upwards from baseline */
}

#matchRowBottom .match-card {
    transform-origin: top center; /* Scale downwards from baseline */
}

/* Card details (Potential Customer - Top Row) */
.mcard-header-pc {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    position: relative;
}
.mcard-logo-square {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-btn) !important;
    background: linear-gradient(135deg, var(--accent-teal-glow), rgba(16, 185, 129, 0.15));
    border: 1px solid rgba(127, 186, 115, 0.3);
    color: var(--text-color);
    font-family: var(--font-heading);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.mcard-meta-pc {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mcard-company-name {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mcard-country {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mcard-flag-pc {
    font-size: 13px;
    margin-left: auto;
    flex-shrink: 0;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    padding: 2px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
[data-theme="light"] .mcard-flag-pc {
    background: rgba(0, 0, 0, 0.03);
}
.mcard-body-pc {
    flex: 1;
    margin: 6px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mcard-demand-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mcard-footer-pc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--card-border);
}
.mcard-demand-qty {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--accent-teal);
}
.mcard-demand-time {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Card details (Your Product - Bottom Row) */
.mcard-header-yp {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.mcard-icon-yp {
    color: var(--accent-teal);
    width: 18px;
    height: 18px;
}
.mcard-title-yp {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.mcard-body-yp {
    flex: 1;
    margin: 6px 0;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid var(--card-border);
}
[data-theme="light"] .mcard-body-yp {
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.mcard-img-yp {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.match-card:hover .mcard-img-yp {
    transform: scale(1.06);
}
.mcard-footer-yp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--card-border);
}
.mcard-stock-label {
    font-size: 11px;
    color: var(--text-muted);
}
.mcard-stock-val {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-emerald);
}

/* Card Scaling - handled dynamically via inline styles */
/* Sáng viền sắc nét tinh tế cho card ở tâm tùy thuộc vào hàng trên/dưới */
#matchRowTop .match-card.focused-center {
    border-color: var(--accent-teal);
    z-index: 10;
    box-shadow: 0 0 20px rgba(127, 186, 115, 0.25);
}
[data-theme="light"] #matchRowTop .match-card.focused-center {
    box-shadow: 0 0 15px rgba(2, 132, 199, 0.12);
}

#matchRowBottom .match-card.focused-center {
    border-color: var(--accent-emerald);
    z-index: 10;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
}
[data-theme="light"] #matchRowBottom .match-card.focused-center {
    box-shadow: 0 0 15px rgba(5, 150, 105, 0.12);
}

/* Trục Khớp Giữa (Match Zone Marker) */
.match-zone-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

/* Đường ranh giới gương (Mirror Split Line) */
.mirror-split-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--surface-tint);
    z-index: 3;
    pointer-events: none;
    transform: translateY(-50%);
    opacity: 0.8;
}

.match-action-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    pointer-events: none;
    z-index: 12;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: var(--bg-color);
    padding: 5px 8px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
}
.match-action-center.active {
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}
/* Auto-advance countdown badge on a match (freezes on hover) */
.match-countdown {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-emerald);
    background: color-mix(in srgb, var(--accent-emerald) 14%, transparent);
    border: 1.5px solid var(--accent-emerald);
    line-height: 1;
}
.match-countdown.hidden { display: none; }
.btn-match-action {
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--card-border);
    padding: 7px 10px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    border-radius: 0px;
}
.btn-match-action:hover {
    background: var(--card-bg-hover);
    border-color: var(--text-muted);
}
.btn-match-action:active {
    transform: scale(0.98);
}
.btn-match-action.btn-action-primary {
    background: var(--text-color);
    color: var(--bg-color);
    border: 1px solid var(--text-color);
    font-weight: 600;
}
.btn-match-action.btn-action-primary:hover {
    background: var(--accent-teal);
    border-color: var(--accent-teal);
    color: #ffffff;
}

/* ==========================================================================
   BOTTOM CAPSULE FLOATING NAVBAR (Tối giản 2 nút: Search & Setting)
   ========================================================================== */
.bottom-capsule-navbar {
    position: fixed;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    padding: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    z-index: 100;
    transition: background-color var(--transition-slow), border-color var(--transition-slow);
}
[data-theme="light"] .bottom-capsule-navbar {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.nav-item {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 12px 28px;
    border-radius: var(--radius-btn) !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-normal);
}
.nav-item i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 1 !important;
}
.nav-item span {
    line-height: 1 !important;
}
.nav-item:hover {
    color: var(--text-color);
}
.nav-item:focus {
    outline: none;
}
.nav-divider {
    width: 1px;
    height: 20px;
    background-color: var(--card-border);
    margin: 0 4px;
}

/* ==========================================================================
   BIXSOURCING MODAL DESIGN SYSTEM — unified with matching-panel system
   Design tokens and animation aligned for full cross-module visual consistency.
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 20px;
    animation: overlayFadeIn 0.2s ease;
}
[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.78);
}
@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content *,
.modal-tab-header-btn,
.modal-action-btn,
.chatbot-sidebar-footer input,
.chatbot-sidebar-footer button {
    border-radius: var(--radius-btn) !important;
}
.modal-content {
    border-radius: 16px !important;
}

/* MẶC ĐỊNH (Compact archetype: form / confirm / notification) —
   chiều cao ÔM nội dung, không ép cao gây thừa khoảng trống. */
.modal-content {
    width: 100%;
    max-width: 560px;
    height: auto;
    max-height: 85vh;
    padding: 0;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42);
    animation: modalSlideUp 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), max-width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
[data-theme="dark"] .modal-content {
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.72);
}
/* Workspace archetype (Detail + AI, dashboard dữ liệu): rộng & cao để lấp 2 cột */
.modal-content.large-modal,
.modal-content.detail-modal {
    width: 70%;
    max-width: 950px;
    height: 75vh;
}
.modal-content.ai-open {
    width: 85%;
    max-width: 1300px;
}
@keyframes modalSlideUp {
    from { transform: translateY(28px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Header: clean, taller, no tab separators on title */
.modal-header {
    height: 64px;
    min-height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--card-border);
    padding: 0 16px 0 24px;
    background: transparent;
    box-sizing: border-box;
    width: 100%;
    flex-shrink: 0;
    transition: width 0.3s ease, max-width 0.3s ease;
}
/* Detail modals (contact/source/invoice) have a 2-line title block that exceeds 64px.
   Let the header grow to fit rather than forcing a fixed height. */
.modal-content.detail-modal .modal-header {
    height: auto !important;
    min-height: 64px !important;
    padding: 14px 16px 14px 20px !important;
}
.modal-content.ai-open .modal-header {
    width: 62%;
    max-width: 62%;
}
.modal-header h3,
.modal-simple-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    flex: 1;
    min-width: 0;
}

/* Cụm tab header cho modal phức tạp */
.modal-tabs-header {
    display: flex;
    align-items: center;
    height: 100%;
}
.modal-tab-header-btn {
    height: 100%;
    padding: 0 24px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--card-border);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    white-space: nowrap;
}
.modal-tab-header-btn.active {
    color: var(--accent-teal);
    background: var(--surface-tint);
}
.modal-tab-header-btn:hover {
    color: var(--accent-teal);
}

/* Nút X đóng — 32×32 bordered, visible container */
.modal-close {
    background: transparent !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
    padding: 0;
    border-radius: 8px !important;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.modal-close:hover {
    background: var(--surface-tint);
    color: var(--text-color);
    border-color: var(--card-border-hover);
}
.modal-close i,
.modal-close svg {
    width: 15px !important;
    height: 15px !important;
    pointer-events: none;
}

/* Thân modal: cuộn mượt mà */
.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    margin-bottom: 0;
    box-sizing: border-box;
    width: 100%;
    transition: width 0.3s ease, max-width 0.3s ease;
}
.modal-content.ai-open .modal-body {
    width: 62%;
    max-width: 62%;
}

/* Footer: border-top, compact gap, ghost-bordered buttons */
.modal-footer {
    height: auto;
    min-height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--card-border);
    background: transparent;
    box-sizing: border-box;
    width: 100%;
    flex-shrink: 0;
    transition: width 0.3s ease, max-width 0.3s ease;
}
.modal-content.ai-open .modal-footer {
    width: 62%;
    max-width: 62%;
}
/* Detail Modal (Card/Source/Contact/Invoice) tự chia cột AI bằng
   .card-detail-split-grid bên trong .modal-body (full width) — KHÔNG dùng
   kiểu sidebar slide-over tuyệt đối, nên phải hủy quy tắc co 62% phía trên
   để tránh bóp kép cột trái + bỏ phí khoảng trống bên phải. */
.modal-content.ai-open.detail-modal .modal-header,
.modal-content.ai-open.detail-modal .modal-body,
.modal-content.ai-open.detail-modal .modal-footer,
.modal-content.ai-open:has(.card-detail-split-grid) .modal-header,
.modal-content.ai-open:has(.card-detail-split-grid) .modal-body,
.modal-content.ai-open:has(.card-detail-split-grid) .modal-footer {
    width: 100% !important;
    max-width: 100% !important;
}
.modal-footer > div:not(.hidden) {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Ghost-bordered buttons — consistent hierarchy */
.modal-footer button,
.modal-footer .btn,
.modal-footer .btn-minimal-iconic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s;
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    border-radius: var(--radius-btn) !important;
    box-shadow: none;
    text-decoration: none;
    white-space: nowrap;
    height: auto;
    width: auto;
    margin: 0;
}
.modal-footer button:hover,
.modal-footer .btn:hover,
.modal-footer .btn-minimal-iconic:hover {
    background: var(--surface-tint);
    color: var(--text-color);
    border-color: var(--card-border-hover);
    text-decoration: none;
}
.modal-footer button i,
.modal-footer .btn i,
.modal-footer .btn-minimal-iconic i {
    color: inherit;
}
.modal-footer button span,
.modal-footer .btn span,
.modal-footer .btn-minimal-iconic span {
    color: inherit;
}

/* CTA primary — filled emerald */
.modal-footer .btn-primary,
.modal-footer button.btn-primary {
    background: var(--accent-emerald) !important;
    border-color: var(--accent-emerald) !important;
    color: #fff !important;
    padding: 7px 18px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.modal-footer .btn-primary:hover,
.modal-footer button.btn-primary:hover {
    opacity: 0.88 !important;
    background: var(--accent-emerald) !important;
}
.modal-footer .btn-primary span,
.modal-footer .btn-primary i {
    color: #fff !important;
    text-decoration: none !important;
}

/* CTA gold — filled amber */
.modal-footer .btn-cta-gold,
.modal-footer button.btn-cta-gold {
    background: #F59E0B !important;
    border-color: #D97706 !important;
    color: #1a2620 !important;
    padding: 7px 18px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.modal-footer .btn-cta-gold:hover,
.modal-footer button.btn-cta-gold:hover {
    background: #D97706 !important;
    border-color: #B45309 !important;
}
.modal-footer .btn-cta-gold span,
.modal-footer .btn-cta-gold i {
    color: #1a2620 !important;
    text-decoration: none !important;
}

/* BMC Chat modal sizing */
.bmc-chat-modal {
    max-width: 480px;
    height: 520px;
}
.modal-footer > input {
    flex: 1;
}

/* Custom Notification Modal — kế thừa toàn bộ hệ thống chuẩn ở trên */
#bixNotificationModal {
    z-index: 2000;
}
#bixNotificationModal .modal-content {
    border: 1px solid var(--card-border);
}

/* ── Step Wizard — override inline styles with !important ── */
.step-progress-wrapper {
    margin-bottom: 24px;
    padding: 4px 0;
}
.step-node {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: var(--font-mono);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    padding: 0 !important;
    outline: none !important;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    background: var(--card-bg) !important;
    border: 2px solid var(--card-border) !important;
    color: var(--text-muted) !important;
    z-index: 1;
    position: relative;
}
.step-node.active {
    background: var(--accent-teal) !important;
    border-color: var(--accent-teal) !important;
    color: #fff !important;
    box-shadow: 0 0 0 4px rgba(91, 192, 190, 0.18) !important;
}
.step-node.done {
    background: var(--accent-emerald) !important;
    border-color: var(--accent-emerald) !important;
    color: #fff !important;
}

/* ── Settings Sidebar Nav ── */
.settings-tab-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.settings-tab-btn {
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: var(--text-muted) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 9px 12px !important;
    cursor: pointer;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    border-left: 3px solid transparent !important;
}
.settings-tab-btn:hover {
    background: var(--surface-tint) !important;
    color: var(--text-color) !important;
}
.settings-tab-btn.active {
    background: var(--accent-teal-glow) !important;
    color: var(--accent-teal) !important;
    border-left: 3px solid var(--accent-teal) !important;
    border-radius: 0 8px 8px 0 !important;
}

/* Active Tags Grid */
.active-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.modal-active-tag {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--accent-teal-glow);
    border: 1px solid var(--accent-teal);
    color: var(--accent-teal);
    padding: 6px 12px;
    border-radius: 4px;
}

/* RFQ Preview inside Modal */
.rfq-match-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    border: 1px solid var(--card-border);
}
[data-theme="light"] .rfq-match-preview {
    background: rgba(0,0,0,0.02);
}
.matched-side {
    flex: 1;
}
.matched-side strong {
    font-family: var(--font-heading);
    font-size: 15px;
    color: var(--accent-teal);
}
.matched-side p {
    font-size: 12px;
    color: var(--text-muted);
}
.match-icon-middle {
    padding: 0 16px;
    color: var(--text-muted);
}
.input-row {
    display: flex;
    gap: 16px;
}

/* History Table Styling */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}
.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.history-table th, .history-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
}
.history-table th {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .history-table th {
    background: rgba(0,0,0,0.03);
}
.history-table tr:hover {
    background: var(--surface-tint);
}
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.status-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}
.status-badge.sent {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-emerald);
}

/* RESPONSIVE LAYOUTS */
@media (max-width: 900px) {
    .landing-features {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
    .role-options {
        grid-template-columns: 1fr;
    }
    .landing-main { gap: 80px; }
    .section-title { font-size: 30px; }
    .ai-principle-row { grid-template-columns: 1fr; }
    .role-cards { grid-template-columns: 1fr; }
    .role-switch-divider { flex-direction: row; justify-content: center; margin: 4px 0; }
    .flow-track { grid-template-columns: repeat(2, 1fr); gap: 8px 0; }
    .flow-step { border-top: none; }
    .flow-step::before, .flow-step::after { display: none; }
    .landing-cta-band h2 { font-size: 36px; }
}
@media (max-width: 600px) {
    .view-container {
        padding: 12px 16px 45px 16px !important;
    }
    .landing-title {
        font-size: 40px;
    }
    .flow-track { grid-template-columns: 1fr; }
    .landing-footer { flex-direction: column; text-align: center; }
    .landing-trust-strip { gap: 16px; }
    .onboarding-card {
        padding: 24px;
    }
    .match-action-center {
        padding: 12px 16px;
        scale: 0.9;
    }
    .bottom-capsule-navbar {
        width: 90%;
        bottom: 25px;
    }
    .nav-item {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* ==========================================================================
   MODAL 4: CHI TIẾT THẺ (Card Detail Modal CSS Style)
   (sizing .detail-modal đã hợp nhất vào canonical đầu file — không khai lại ở đây
   để tránh thắng cascade theo source-order khi kết hợp với .ai-open)
   ========================================================================== */

.detail-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-btn) !important;
    letter-spacing: 0.5px;
}

.detail-badge.verified {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-emerald);
}

.detail-badge.urgent {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-red);
}

.detail-badge.vip {
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
}

/* Business Profile Layout Grid */
.business-profile-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 36px;
}

.profile-main-info {
    display: flex;
    flex-direction: column;
}

.profile-section-title {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--card-border);
}

.profile-info-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--card-border);
    font-size: 14px;
}

.info-label {
    color: var(--text-muted);
}

.info-val {
    font-weight: 500;
    color: var(--text-color);
    font-family: var(--font-mono);
}

.profile-demand-box {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--card-border);
    padding: 20px;
    border-radius: 8px;
    margin-top: 16px;
}

[data-theme="light"] .profile-demand-box {
    background: rgba(0, 0, 0, 0.015);
}

.demand-product-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-teal);
    margin-bottom: 12px;
}

.demand-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.demand-specs {
    font-size: 13px;
    font-family: var(--font-mono);
    color: var(--text-color);
    display: flex;
    gap: 24px;
    margin-top: 14px;
}

/* Trust Sidebar */
.profile-trust-sidebar {
    display: flex;
    flex-direction: column;
    background: transparent;
    border-left: 1px solid var(--card-border);
    padding-left: 36px;
}

.trust-score-card {
    background: rgba(127, 186, 115, 0.02);
    border: 1px solid var(--card-border);
    padding: 24px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
}

.trust-value {
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 700;
    color: var(--accent-teal);
}

.trust-label {
    font-size: 11px;
    color: var(--text-muted);
    margin: 4px 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rating-stars {
    color: #FBBF24;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.rating-stars svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.rating-stars svg.star-empty {
    fill: transparent;
    color: var(--text-dark);
}

.rating-val {
    color: var(--text-muted);
    font-size: 13px;
    margin-left: 6px;
    font-family: var(--font-mono);
}

.certs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-cert-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.profile-cert-badge:hover {
    border-color: var(--accent-teal);
    background: var(--accent-teal-glow);
}

/* Product Spec Sheet Grid */
.product-spec-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 36px;
}

.product-image-preview {
    border: 1px solid var(--card-border);
    border-radius: 8px;
    overflow: hidden;
    height: 340px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.product-image-preview::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid var(--card-border);
    pointer-events: none;
    border-radius: 8px;
}

[data-theme="light"] .product-image-preview::after {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.detail-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-image-preview:hover .detail-product-img {
    transform: scale(1.04);
}

.product-spec-details {
    display: flex;
    flex-direction: column;
}

.highlight-teal {
    color: var(--accent-teal) !important;
    font-weight: 600;
}

.highlight-emerald {
    color: var(--accent-emerald) !important;
    font-weight: 600;
}

.product-desc-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 18px;
}

/* Responsive for Detail Modal */
@media (max-width: 768px) {
    .business-profile-grid, .product-spec-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .profile-trust-sidebar {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--card-border);
        padding-top: 20px;
    }
    .product-image-preview {
        height: 220px;
    }
}

/* Webflow Sharp Style - Ghi đè toàn bộ góc bo tròn thành vuông góc hoàn toàn */
* {
    border-radius: var(--radius-btn) !important;
}

/* Exceptions to keep capsule/circular elements beautiful */
.notification-badge {
    border-radius: 8px !important;
}

/* Rating Stars nét mảnh (Line Icons) theo yêu cầu bixso.com.au & webflow.com */
.rating-stars {
    color: var(--text-color);
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}
.rating-stars svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted) !important;
    stroke-width: 1.2px !important;
    fill: none !important;
}
.rating-stars svg.star-filled {
    stroke: var(--accent-teal) !important;
    fill: rgba(127, 186, 115, 0.12) !important;
}
.rating-stars svg.star-empty {
    stroke: var(--text-dark) !important;
    fill: none !important;
}

/* ==========================================================================
   AI SOURCING SEARCH TABS & SWITCH TOGGLES (Modal Search & Setting)
   ========================================================================== */
.search-tabs-container {
    display: flex;
    gap: 2px;
    background: var(--surface-tint);
    margin-bottom: 24px;
    border: 1px solid var(--card-border);
}

.search-tab-btn {
    flex: 1;
    background: var(--bg-color);
    color: var(--text-muted);
    border: none;
    padding: 12px 18px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}
.search-tab-btn:hover {
    color: var(--text-color);
    background: var(--card-bg-hover);
}
.search-tab-btn.active {
    color: var(--text-color);
    background: var(--card-bg);
    font-weight: 600;
}

.search-tab-content {
    display: none;
}
.search-tab-content.active {
    display: block;
}

/* AI Sourcing Panel */
.ai-sourcing-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.ai-sourcing-panel textarea {
    width: 100%;
    background: rgba(0,0,0,0.15);
    border: 1px solid var(--card-border);
    padding: 12px;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}
[data-theme="light"] .ai-sourcing-panel textarea {
    background: rgba(0,0,0,0.02);
}
.ai-sourcing-panel textarea:focus {
    border-color: var(--accent-teal);
    outline: none;
}

.btn-ai-search {
    width: 100%;
    padding: 14px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--accent-teal), #8B5CF6); /* Nét gradient tím xanh AI nổi bật */
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.15);
}
.btn-ai-search:hover {
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-emerald));
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}
.btn-ai-search i {
    width: 16px;
    height: 16px;
}

/* AI Analysis Report View */
.ai-analysis-results {
    background: rgba(139, 92, 246, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.15);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.analysis-section-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: #a78bfa;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ai-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.ai-metric-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 16px;
    text-align: center;
}
.ai-metric-card .metric-val {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
}
.ai-metric-card:nth-child(1) .metric-val {
    color: var(--accent-teal);
}
.ai-metric-card:nth-child(2) .metric-val {
    color: #a78bfa;
}
.ai-metric-card:nth-child(3) .metric-val {
    color: var(--accent-emerald);
}
.ai-metric-card .metric-lbl {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-analysis-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    border-top: 1px solid var(--card-border);
    padding-top: 12px;
}
.detail-row-ai {
    color: var(--text-muted);
}
.detail-row-ai strong {
    color: var(--text-color);
}

/* Custom Switch Toggle in Setting Modal */
.input-group-checkbox {
    margin-top: 16px;
    border-top: 1px solid var(--card-border);
    padding-top: 16px;
}
.switch-container {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 500;
}
.switch-container input {
    display: none;
}
.switch-slider {
    width: 36px;
    height: 18px;
    background-color: var(--text-dark);
    position: relative;
    transition: background-color var(--transition-fast);
}
.switch-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: var(--bg-color);
    top: 2px;
    left: 2px;
    transition: transform var(--transition-fast);
}
.switch-container input:checked + .switch-slider {
    background-color: var(--accent-teal);
}
.switch-container input:checked + .switch-slider::before {
    transform: translateX(18px);
}
.switch-label {
    color: var(--text-color);
}
.input-desc-text {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    padding-left: 48px;
    line-height: 1.4;
}

.spin-icon {
    animation: spin 1.2s linear infinite;
    display: inline-block;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   GOOGLE CLOUD STYLE PROJECT SELECTOR (Header-left)
   ========================================================================== */
.project-selector-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 6px 12px;
    gap: 8px;
    border-radius: 0px; /* Zip style flat */
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.project-selector-wrapper:hover {
    border-color: var(--card-border-hover);
    background: var(--card-bg-hover);
}
.project-icon {
    color: var(--text-muted);
    width: 14px;
    height: 14px;
}
.project-select-dropdown {
    background: transparent;
    border: none;
    color: var(--text-color);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    padding-right: 18px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.project-selector-wrapper::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--text-muted);
    pointer-events: none;
}

/* ==========================================================================
   SOURCING PROJECT TIMELINE (At the top of Matching Arena)
   ========================================================================== */
.project-timeline-container {
    width: 100%;
    background: transparent;
    border-bottom: 1px solid var(--card-border);
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    box-sizing: border-box;
}
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.timeline-title {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.timeline-title span {
    color: var(--text-color);
}
.timeline-project-status {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent-teal);
    background: var(--accent-teal-glow);
    padding: 2px 8px;
    border-radius: 2px;
    font-weight: 500;
}
.timeline-steps-wrapper {
    position: relative;
    width: 100%;
    margin-top: 8px;
}
.timeline-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}
.timeline-line {
    position: absolute;
    top: 11px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: var(--surface-tint);
    z-index: 1;
}
.timeline-line-progress {
    position: absolute;
    top: 11px;
    left: 20px;
    height: 2px;
    background: var(--accent-teal);
    z-index: 1;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
}
.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
    cursor: default;
}
.timeline-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-color);
    border: 2px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.timeline-step-label {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.4s ease;
}

/* Completed Steps */
.timeline-step.completed .timeline-circle {
    background: var(--accent-teal);
    border-color: var(--accent-teal);
    color: var(--bg-color);
}
.timeline-step.completed .timeline-step-label {
    color: var(--accent-teal);
}

/* Active Step */
.timeline-step.active .timeline-circle {
    background: var(--bg-color);
    border-color: var(--accent-teal);
    color: var(--accent-teal);
    box-shadow: 0 0 10px var(--accent-teal-glow);
    animation: timeline-pulse 2s infinite ease-in-out;
}
.timeline-step.active .timeline-step-label {
    color: var(--text-color);
    font-weight: 600;
}

@keyframes timeline-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(127, 186, 115, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(127, 186, 115, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(127, 186, 115, 0);
    }
}

/* ==========================================================================
   USER ADMIN MODAL & LAYOUT
   ========================================================================== */
.admin-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
}
.admin-left-col {
    display: flex;
    flex-direction: column;
}
.admin-right-col {
    display: flex;
    flex-direction: column;
}
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 8px;
}
.admin-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 16px 12px;
    text-align: center;
    border-radius: 0px;
}
.stat-lbl {
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.stat-val {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
}
.admin-controls-box {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 20px;
    border-radius: 0px;
}
.control-row-admin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.control-desc strong {
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--text-color);
    display: block;
}
.control-desc p {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.4;
}
.admin-log-container {
    background: #090d16;
    border: 1px solid var(--card-border);
    padding: 16px;
    border-radius: 0px;
    height: 250px;
    overflow-y: auto;
    margin-top: 8px;
}
.admin-log-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-log-item {
    font-family: 'Space Grotesk', Courier, monospace;
    font-size: 11px;
    line-height: 1.4;
    word-break: break-all;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 4px;
}
.log-time {
    color: var(--accent-teal);
    font-weight: 500;
    margin-right: 8px;
}
.log-msg {
    color: var(--text-color);
}
.admin-badge {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-red);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Sync Seller theme for timeline */
.btn-switch-role-text.role-seller + #projectSelector,
.timeline-step.role-seller-active.completed .timeline-circle {
    background: var(--accent-emerald);
    border-color: var(--accent-emerald);
}
.timeline-step.role-seller-active.completed .timeline-step-label {
    color: var(--accent-emerald);
}
.timeline-step.role-seller-active.active .timeline-circle {
    border-color: var(--accent-emerald);
    color: var(--accent-emerald);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
    animation: timeline-pulse-seller 2s infinite ease-in-out;
}
.timeline-line-progress.role-seller-active {
    background: var(--accent-emerald);
}

@keyframes timeline-pulse-seller {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* ==========================================================================
   8. TÁI CẤU TRÚC ADMIN DASHBOARD & VISUAL POLISH CATEGORY
   ========================================================================== */

/* Thẩm mỹ Bullet cho Category Item */
.category-item::after {
    display: none !important;
}
.category-item::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.3;
    margin-right: 8px;
    vertical-align: middle;
    transition: all var(--transition-fast);
}
.category-sidebar.left .category-item {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
}
.category-sidebar.right .category-item {
    display: flex;
    align-items: center;
    justify-content: flex-end !important;
}
.category-sidebar.left .category-item::before {
    margin-right: 0;
    margin-left: 8px;
    order: 2;
}
.category-item:hover::before,
.category-item.active::before {
    opacity: 1;
    transform: scale(1.3);
    box-shadow: 0 0 8px currentColor;
}

/* Category Sidebar Fade-out */
.category-sidebar.has-more {
    mask-image: linear-gradient(to bottom, black 70%, transparent 98%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 98%);
    height: 190px !important;
    overflow-y: hidden;
}
.see-more-btn {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--accent-teal);
    opacity: 0.8;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 12px;
    transition: opacity var(--transition-fast);
    font-weight: 600;
    display: block;
    margin-top: 4px;
}
.category-sidebar.left .see-more-btn {
    margin-left: 12px !important;
    margin-right: auto !important;
}
.category-sidebar.right .see-more-btn {
    color: var(--accent-teal) !important;
    margin-right: auto !important;
    margin-left: 12px !important;
}
.see-more-btn:hover {
    opacity: 1;
    text-decoration: underline;
}
.see-more-btn::before {
    display: none !important;
}

/* Admin Dashboard Modal */
.admin-dashboard-modal {
    max-width: 1020px !important;
    width: 92vw !important;
    height: 85vh !important;
    display: flex;
    flex-direction: column;
}
.admin-dashboard-modal .modal-body {
    padding: 0 !important;
    flex: 1;
    overflow: hidden;
}
.admin-dashboard-container {
    display: flex;
    height: 100%;
    background: var(--bg-color);
}

/* Admin Sidebar */
.admin-sidebar {
    width: 230px;
    border-right: 1px solid var(--card-border);
    background: rgba(255, 255, 255, 0.005);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 0;
    flex-shrink: 0;
}
.admin-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
}
.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    transition: all var(--transition-fast);
}
.admin-nav-item i {
    width: 16px;
    height: 16px;
    stroke-width: 2px;
}
.admin-nav-item:hover {
    color: var(--text-color);
    background: var(--surface-tint);
}

/* Active colors based on active role */
.admin-buyer-mode .admin-nav-item.active {
    color: var(--accent-teal);
    background: var(--accent-teal-glow);
    font-weight: 600;
}
.admin-seller-mode .admin-nav-item.active {
    color: var(--accent-teal);
    background: var(--accent-teal-glow);
    font-weight: 600;
}

.admin-sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--card-border);
}
.role-switch-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.role-switch-lbl {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Admin Main Content area */
.admin-content-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
}
.admin-panel {
    display: none;
    flex-direction: column;
    gap: 20px;
}
.admin-panel.active {
    display: flex;
}
.panel-header-section {
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 16px;
    margin-bottom: 8px;
}
.panel-header-section h4 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text-color);
}
.panel-header-section p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

/* Table Style */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 12px;
}
.admin-table th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
}
.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-color);
}
.admin-table tr:hover td {
    background: var(--surface-tint);
}
.admin-table .btn {
    padding: 4px 8px;
    font-size: 10px;
}

/* Inline form for adding products / sourcing reqs */
.admin-inline-form {
    display: flex;
    gap: 10px;
    background: rgba(255,255,255,0.005);
    padding: 10px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    margin-bottom: 14px;
}
.admin-inline-form input {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    padding: 6px 10px;
    color: var(--text-color);
    font-size: 12px;
}
.admin-inline-form input:focus {
    outline: none;
    border-color: var(--accent-teal);
}
.admin-seller-mode .admin-inline-form input:focus {
    border-color: var(--accent-emerald);
}
.admin-inline-form button {
    padding: 6px 12px;
    font-size: 12px;
}

/* Mock Chart CSS/SVG */
.chart-container-wrapper {
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.003);
    margin-bottom: 12px;
}
.chart-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 10px;
}
.mock-chart-canvas {
    position: relative;
    height: 90px;
}
.svg-chart {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.chart-area-path {
    fill: var(--accent-teal-glow);
    transition: fill var(--transition-fast);
}
.chart-line-path {
    fill: none;
    stroke: var(--accent-teal);
    stroke-width: 1.5px;
    stroke-linecap: round;
    transition: stroke var(--transition-fast);
}
.chart-dot {
    fill: var(--bg-color);
    stroke: var(--accent-teal);
    stroke-width: 1.5px;
    transition: stroke var(--transition-fast);
}
.admin-seller-mode .chart-area-path {
    fill: var(--accent-teal-glow);
}
.admin-seller-mode .chart-line-path {
    stroke: var(--accent-teal);
}
.admin-seller-mode .chart-dot {
    stroke: var(--accent-teal);
}
.chart-labels {
    display: flex;
    justify-content: space-between;
    padding: 4px 6px 0 6px;
    font-size: 9px;
    color: var(--text-muted);
}

/* Full Categories Modal Grid */
.full-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 10px 0;
}
.full-cat-btn {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    padding: 8px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}
.full-cat-btn:hover {
    color: var(--text-color);
    background: var(--surface-tint);
    border-color: var(--accent-teal);
}
.admin-seller-mode .full-cat-btn:hover {
    border-color: var(--accent-emerald);
}
.full-cat-btn.active {
    color: var(--accent-teal);
    background: var(--accent-teal-glow);
    border-color: var(--accent-teal);
    font-weight: 600;
}
.admin-seller-mode .full-cat-btn.active {
    color: var(--accent-teal);
    background: var(--accent-teal-glow);
    border-color: var(--accent-teal);
}

/* Timeline in Admin Modal */
.admin-timeline {
    background: rgba(255, 255, 255, 0.005) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-top: 12px !important;
}

/* Mode-dependent color adjustments for header background and borders */
.admin-buyer-mode {
    border-color: var(--accent-teal);
}
.admin-seller-mode {
    border-color: var(--accent-emerald);
}
.admin-buyer-mode .admin-badge {
    background: var(--accent-teal-glow);
    color: var(--accent-teal);
    border: 1px solid var(--accent-teal-glow);
}
.admin-seller-mode .admin-badge {
    background: var(--accent-teal-glow);
    color: var(--accent-teal);
    border: 1px solid var(--accent-teal-glow);
}

/* Milestone 3: custom styling for config budget fields and transition presets */
#adminConfigMinBudget, #adminConfigMaxBudget, #configMinBudget, #configMaxBudget {
    font-variant-numeric: tabular-nums;
}

/* Milestone 4: Breaker & Modal Statistic styling */
.match-action-center.emerald-glow {
    border-color: var(--accent-emerald) !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5), inset 0 0 10px rgba(16, 185, 129, 0.2) !important;
}

.breaker-match-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    box-sizing: border-box;
    color: var(--accent-emerald);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 0 14px;
    border-radius: 0px;
    pointer-events: none;
    z-index: 13;
    opacity: 1;
    transition: opacity var(--transition-normal) ease, display var(--transition-normal) ease;
}

.breaker-match-status.hidden {
    display: none;
    opacity: 0;
}

.btn-match-action.btn-match-percent {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-emerald);
    border: 1px solid var(--accent-emerald);
    font-weight: 700;
    margin-left: 4px;
}

.btn-match-action.btn-match-percent:hover {
    background: var(--accent-emerald);
    color: #ffffff;
    border-color: var(--accent-emerald);
}

.stat-comparison-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.stat-column {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 20px;
    border-radius: 8px;
}

.stat-column-header {
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.stat-role-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.buyer-column .stat-role-badge {
    color: var(--accent-teal);
}

.seller-column .stat-role-badge {
    color: var(--accent-emerald);
}

.stat-column-header h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 4px 0;
    color: var(--text-color);
}

.stat-product-name {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.stat-details-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stat-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
}

.stat-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}

.stat-value.specifications {
    font-size: 12px;
    line-height: 1.4;
}

.stat-certs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stat-cert-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    color: var(--text-muted);
}

[data-theme="light"] .stat-cert-badge {
    background: rgba(0, 0, 0, 0.03);
}

.stat-cert-badge.matching-cert {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
    color: var(--accent-emerald);
}

.stat-divider-column {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-vs-badge {
    background: var(--surface-tint);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 11px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-summary-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.15);
    padding: 12px 16px;
    border-radius: 8px;
}

.stat-score-value {
    font-size: 20px;
    color: var(--accent-emerald);
    font-weight: 700;
    margin-left: 8px;
}

.stat-status-alert {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--accent-emerald);
    font-weight: 600;
}

/* ==========================================================================
   BIXSO ADDED STYLES: HEADER SEARCH BAR, MANUAL ARROWS & BREAKER ANIMATIONS
   ========================================================================== */

/* Homepage Header Search Bar */
.header-search-bar {
    display: flex;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 2px 4px 2px 12px;
    height: 36px;
    transition: all var(--transition-fast);
    max-width: 280px;
    width: 100%;
}
.header-search-bar:focus-within {
    border-color: var(--accent-teal);
    box-shadow: 0 0 10px rgba(127, 186, 115, 0.15);
}
.header-search-bar input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 13px;
    width: 100%;
    padding: 0;
}
.header-search-bar input::placeholder {
    color: var(--text-muted);
}
.header-search-bar .search-trigger-btn {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transition: color var(--transition-fast);
}
.header-search-bar .search-trigger-btn:hover {
    color: var(--accent-teal);
}

/* Marquee / Carousel Wrapper layout with Arrows */
.marquee-nav-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    position: relative;
    gap: 16px;
}

.nav-arrow-btn {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    outline: none;
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    z-index: 30;
    padding: 0;
    flex-shrink: 0;
}

.nav-arrow-btn:hover {
    background: transparent;
    color: var(--accent-teal);
    transform: scale(1.2);
}

.nav-arrow-btn:active {
    transform: scale(0.9);
}

#containerRowBottom .nav-arrow-btn:hover {
    color: var(--accent-emerald);
}

/* Animations for Matching Breaker */
@keyframes breakerPop {
    0% {
        transform: translate(-50%, 10px) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, 0) scale(1);
        opacity: 1;
    }
}

/* Xóa animation breakerPop cũ gây lệch vị trí nhãn */

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.4), inset 0 0 5px rgba(16, 185, 129, 0.2);
    }
    50% {
        box-shadow: 0 0 25px rgba(16, 185, 129, 0.7), inset 0 0 12px rgba(16, 185, 129, 0.3);
    }
    100% {
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.4), inset 0 0 5px rgba(16, 185, 129, 0.2);
    }
}

.match-action-center.emerald-glow {
    border-color: var(--accent-emerald) !important;
    animation: pulseGlow 2s infinite ease-in-out;
}

/* Container tiêu đề hàng cuộn có kính lúp */
.row-header-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 12px;
    height: 36px;
}
.row-header-wrapper.justify-end {
    justify-content: flex-end;
}
.row-header-wrapper .row-label {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0;
}
.row-search-btn {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    outline: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-btn) !important;
    transition: all var(--transition-fast);
}
.row-search-btn:hover {
    color: var(--accent-teal);
    background: rgba(127, 186, 115, 0.1);
    border-color: var(--accent-teal);
    transform: scale(1.1);
}
#containerRowBottom .row-search-btn:hover {
    color: var(--accent-emerald);
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--accent-emerald);
}

/* Arrow buttons là flex items trong .row-layout-wrapper */
.nav-arrow-btn.left-arrow {
    flex-shrink: 0;
}

.nav-arrow-btn.right-arrow {
    flex-shrink: 0;
}

/* Style cho nút Tỷ lệ Match thấp (<= 60%) */
.btn-match-action.btn-match-percent.low-match {
    background: var(--surface-tint);
    color: var(--text-muted);
    border: 1px solid var(--card-border);
}
.btn-match-action.btn-match-percent.low-match:hover {
    background: var(--card-bg-hover);
    color: var(--text-color);
    border-color: var(--text-muted);
}
/* Hide the top close X button on detail modal */
#btnCloseCardDetail {
    display: none !important;
}

/* Search Modal Redesign: Split Panel Layout */
.search-modal-redesign {
    max-width: 900px !important;
    width: 90% !important;
}
.search-modal-redesign .search-split-grid {
    display: block !important;
    height: calc(100% - 60px);
    margin-top: 16px;
}
.search-left-column, .search-right-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding-right: 8px;
    width: 100% !important;
}
/* Scrollbar custom for columns */
.search-left-column::-webkit-scrollbar, .search-right-column::-webkit-scrollbar {
    width: 4px;
}
.search-left-column::-webkit-scrollbar-thumb, .search-right-column::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

#modalSearch .search-left-column.hidden,
#modalSearch .search-right-column.hidden {
    display: none !important;
}

/* Search Input inside Search Bar */
.search-input-group input {
    background: var(--surface-tint) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 8px !important;
    color: var(--text-color) !important;
    font-size: 14px !important;
    height: 42px !important;
    transition: all var(--transition-fast) !important;
}
.search-input-group input:focus {
    border-color: var(--accent-teal) !important;
    background: var(--surface-tint) !important;
    box-shadow: 0 0 10px rgba(127, 186, 115, 0.15) !important;
}

/* Search results vertical list */
.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.15);
}
.search-results-list::-webkit-scrollbar {
    width: 4px;
}
.search-results-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.search-no-results {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
}

/* Individual Search Result Item card */
.search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.search-result-item:hover {
    background: var(--surface-tint);
    border-color: var(--accent-teal);
    transform: translateX(2px);
}
.search-result-item .item-info-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.search-result-item .item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}
.search-result-item .item-sub {
    font-size: 12px;
    color: var(--text-muted);
}
.search-result-item .item-tag-badge {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--surface-tint);
    border-radius: 4px;
    color: var(--accent-teal);
    font-family: var(--font-mono);
}

/* AI Panel custom styling */
.ai-sourcing-panel {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 16px;
}
.ai-label {
    font-size: 13px;
    color: var(--text-color);
}
.ai-sourcing-panel textarea {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 10px;
    color: var(--text-color);
    font-size: 13px;
    width: 100%;
    resize: none;
    transition: border-color var(--transition-fast);
}
.ai-sourcing-panel textarea:focus {
    border-color: var(--accent-emerald);
    outline: none;
}
.btn-ai-search {
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-emerald)) !important;
    border: none !important;
    color: #0b0f19 !important;
    font-weight: 600 !important;
}
.btn-ai-search:hover {
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Swap title/badge header spacing */
.detail-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.detail-header-left h3 {
    margin: 0;
}
.detail-header-left .detail-badge {
    margin: 0;
}

/* ==========================================================================
   SOURCING MODULE STYLES
   ========================================================================== */

/* Product Sourcing Card (List View) */
.sourcing-product-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.sourcing-product-card:hover {
    background: var(--surface-tint);
    border-color: var(--accent-teal);
    box-shadow: 0 4px 20px rgba(127, 186, 115, 0.05);
    transform: translateY(-2px);
}
.sourcing-product-card img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--card-border);
}
.sourcing-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sourcing-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
}
.sourcing-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
}
.sourcing-card-meta span strong {
    color: var(--text-color);
}
.sourcing-card-certs {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.sourcing-card-cert-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--surface-tint);
    border-radius: 4px;
    color: var(--accent-teal);
}

/* AI Chat Box in Sourcing Detail Modal */
#sourceAIChatMessages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}
.chat-message {
    padding: 8px 12px;
    font-size: 13px;
    max-width: 85%;
    line-height: 1.4;
    border-radius: 6px;
    word-break: break-word;
}
.chat-message.ai {
    align-self: flex-start;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.15);
    color: var(--text-color);
}
.chat-message.user {
    align-self: flex-end;
    background: rgba(127, 186, 115, 0.08);
    border: 1px solid rgba(127, 186, 115, 0.15);
    color: var(--text-color);
}

/* Custom scrollbars for chat */
#sourceAIChatMessages::-webkit-scrollbar {
    width: 4px;
}
#sourceAIChatMessages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

/* Checkbox alignment for new source form */
.certs-checkbox-grid input[type="checkbox"] {
    accent-color: var(--accent-teal);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sourcing detail split grid layout scrollbars */
.sourcing-detail-split-grid .source-info-column::-webkit-scrollbar {
    width: 4px;
}
.sourcing-detail-split-grid .source-info-column::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

/* ==========================================================================
   CANVAS VIEWPORT & SOURCING 3-COLUMN LAYOUT REDESIGN
   ========================================================================== */

/* Concept One Single Page - Fixed Viewport */
html, body {
    height: 100vh;
    overflow: hidden;
}

/* Content Container heights to prevent page-level scrollbars */
.view-container {
    height: calc(100vh - 96px) !important;
    min-height: auto !important;
    overflow: hidden !important;
    box-sizing: border-box;
    padding: 12px 40px 45px 40px !important;
}

#viewSourcing {
    height: calc(100vh - 96px) !important;
    overflow: hidden !important;
}

.sourcing-console-container,
.negotiate-console-container,
.monitor-console-container,
.finance-console-container,
.business-console-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: none !important;
    width: 100% !important;
    padding: 12px 40px 45px 40px !important;
    box-sizing: border-box;
}

#viewSourcing .sourcing-body-grid {
    display: grid;
    grid-template-columns: 7fr 3fr !important;
    gap: 24px;
    height: calc(100% - 64px);
    overflow: hidden;
}

/* Independent scroll for columns */
#viewSourcing .category-sidebar {
    width: 100% !important;
    margin-left: 0 !important;
    overflow-y: auto;
    height: 100% !important; /* Force full height and override 220px default height */
    max-height: 100% !important;
    left: 0 !important; /* Override left: -30px homepage sidebar visual offset */
    align-items: flex-start !important; /* Căn trái hoàn toàn */
    text-align: left !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    padding-right: 8px;
    border-right: 1px solid var(--card-border);
}

#viewSourcing .category-sidebar .category-item {
    text-align: left !important;
    justify-content: flex-start !important;
    padding: 8px 12px !important;
    border-radius: 4px;
    border-right: none !important;
    border-left: 2px solid transparent;
    transition: all var(--transition-fast) !important;
}

#viewSourcing .category-sidebar .category-item::before,
#viewSourcing .category-sidebar .category-item::after {
    display: none !important; /* Hide dot indicator and decorative lines from homepage sidebar */
}

#viewSourcing .category-sidebar .category-item.active {
    background: rgba(127, 186, 115, 0.04);
    color: var(--accent-teal) !important;
    border-left: 2px solid var(--accent-teal) !important;
    font-weight: 600 !important;
}

#viewSourcing .sourcing-products-column {
    overflow-y: auto;
    max-height: 100%;
    padding-right: 8px;
    width: 100%;
}

#viewSourcing .sourcing-products-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Right statistics widget design */
.sourcing-stats-widget {
    width: 100% !important;
    overflow-y: auto;
    max-height: 100%;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

.sourcing-stats-widget h3 {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 4px 0;
}

.sourcing-stats-widget h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    margin: 12px 0 6px 0;
}

.stat-widget-box {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.stat-widget-box-label {
    font-size: 11px;
    color: var(--text-muted);
}

.stat-widget-box-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-teal);
    margin-top: 4px;
}

.stat-progress-bar {
    height: 6px;
    background: var(--surface-tint);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}

.stat-progress-fill {
    height: 100%;
    background: var(--accent-teal);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.stat-progress-fill.emerald {
    background: var(--accent-emerald);
}

.stat-progress-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

.stat-progress-label-row span strong {
    color: var(--text-color);
}

/* Sparkline CSS simulator for Price Index */
.stats-sparkline-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    margin-top: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--card-border);
}

.sparkbar {
    flex: 1;
    background: rgba(127, 186, 115, 0.2);
    border-radius: 1px;
    transition: height 0.4s ease;
}

.sparkbar.up {
    background: rgba(16, 185, 129, 0.4);
}

.sparkbar.active {
    background: var(--accent-teal);
}

/* ==========================================================================
   SOURCE DETAIL MODAL TABS & DRAWER TRANSITION
   ========================================================================== */

.source-detail-modal-redesign {
    height: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.source-detail-modal-redesign .modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Split-grid DUY NHẤT cho mọi Detail Modal (Card/Source/Contact/Invoice) —
   dùng chung bởi BixDetailModalManager.renderBodyGrid(). KHÔNG fix cứng px
   cho cột AI vì sẽ bóp cột info trên modal hẹp và lãng phí trên modal rộng;
   dùng tỉ lệ fr để cả 2 cột co giãn theo đúng % chiều rộng modal-content. */
.card-detail-split-grid {
    display: grid;
    grid-template-columns: 1fr 0px; /* AI panel hidden by default */
    gap: 0;
    height: 100%;
    overflow: hidden;
    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1), gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content.ai-open .card-detail-split-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr) !important;
    gap: 24px !important;
}

.card-info-column,
.source-info-column,
.contact-info-column,
.invoice-info-column {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Khi AI panel mở, nested grid trong info-column responsive theo chiều rộng thực:
   - Viewport ≤ 900px (modal hẹp) → stack 1 cột
   - Viewport > 900px → giữ nguyên layout gốc (info column ~57% ≈ 600px+, đủ 2 cột) */
@media (max-width: 900px) {
    .modal-content.ai-open .card-info-column [style*="grid-template-columns"],
    .modal-content.ai-open .source-info-column [style*="grid-template-columns"],
    .modal-content.ai-open .contact-info-column [style*="grid-template-columns"],
    .modal-content.ai-open .invoice-info-column [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    .modal-content.ai-open .card-info-column [style*="grid-template-columns"] > [style*="border-left"],
    .modal-content.ai-open .source-info-column [style*="grid-template-columns"] > [style*="border-left"],
    .modal-content.ai-open .contact-info-column [style*="grid-template-columns"] > [style*="border-left"],
    .modal-content.ai-open .invoice-info-column [style*="grid-template-columns"] > [style*="border-left"] {
        border-left: none !important;
        padding-left: 0 !important;
        border-top: 1px dashed var(--card-border);
        padding-top: 16px;
    }
}

.card-ai-chat-column {
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: none !important;
}

#modalCardDetail.ai-open .card-ai-chat-column,
.modal-content.ai-open .card-ai-chat-column {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
    border-left: 1px solid var(--card-border) !important;
}

/* Hide chat scrollbar but allow internally */
.source-info-column {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.source-ai-chat-column {
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: none !important;
}

#modalSourceDetail.ai-open .source-ai-chat-column {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    border-left: 1px solid var(--card-border) !important;
}

/* Tab elements */
.detail-tab-btn {
    border-bottom: 2px solid transparent !important;
    color: var(--text-muted) !important;
    transition: all var(--transition-fast) !important;
    white-space: nowrap !important;
}

.detail-tab-btn:hover {
    color: var(--text-color) !important;
}

.detail-tab-btn.active {
    color: var(--accent-teal) !important;
    border-bottom: 2px solid var(--accent-teal) !important;
}

.detail-tab-pane {
    display: none;
    animation: tabFadeIn 0.25s ease;
    height: 100%;
    overflow-y: auto;
}

.detail-tab-pane.active {
    display: flex;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Action button toggle state for AI Sourcing Consultant */
#btnToggleSourceAI.active {
    background: rgba(127, 186, 115, 0.12) !important;
    border-color: var(--accent-teal) !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(127, 186, 115, 0.3) !important;
}

/* Minimal Iconic Action Buttons for Modal Footer */
.btn-minimal-iconic {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-fast);
}

.btn-minimal-iconic i {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast);
}

.btn-minimal-iconic span {
    font-family: var(--font-sans);
}

.btn-minimal-iconic:hover {
    color: var(--text-color);
    background: var(--surface-tint);
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-minimal-iconic:hover i {
    transform: scale(1.05);
}

/* Danger (Delete) variant */
.btn-minimal-iconic.danger {
    color: rgba(239, 68, 68, 0.8) !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
}
.btn-minimal-iconic.danger:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.1);
}

/* Info (Edit) variant */
.btn-minimal-iconic.info {
    color: rgba(127, 186, 115, 0.8) !important;
    border-color: rgba(127, 186, 115, 0.15) !important;
}
.btn-minimal-iconic.info:hover {
    color: var(--accent-teal) !important;
    background: rgba(127, 186, 115, 0.05) !important;
    border-color: rgba(127, 186, 115, 0.3) !important;
    box-shadow: 0 0 8px rgba(127, 186, 115, 0.1);
}

/* Active Glow (AI Toggle) variant */
.btn-minimal-iconic.active-glow {
    color: var(--accent-teal) !important;
    border-color: rgba(127, 186, 115, 0.3) !important;
    background: rgba(127, 186, 115, 0.02) !important;
}
.btn-minimal-iconic.active-glow:hover {
    color: var(--text-color) !important;
    background: rgba(127, 186, 115, 0.08) !important;
    border-color: var(--accent-teal) !important;
    box-shadow: 0 0 10px rgba(127, 186, 115, 0.2);
}

/* Secondary (Close) variant */
.btn-minimal-iconic.secondary {
    color: var(--text-muted) !important;
}
.btn-minimal-iconic.secondary:hover {
    color: var(--text-color) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: var(--surface-tint) !important;
}

/* Open Canvas Sourcing Detail Modal Redesign */
#modalSourceDetail .modal-content {
    border: 1px solid var(--card-border) !important;
    background: var(--card-bg) !important;
    box-shadow: none !important;
}
#modalSourceDetail .modal-header {
    border-bottom: 1px solid var(--card-border) !important;
}
#modalSourceDetail .source-main-info-panel {
    border-bottom: 1px solid var(--card-border) !important;
    background: transparent !important;
    border: none !important;
}
#modalSourceDetail .source-main-info-panel img {
    border: 1px solid var(--card-border) !important;
}
#modalSourceDetail #sourceAIChatMessages {
    border: 1px solid var(--card-border) !important;
    background: transparent !important;
    border-radius: 4px !important;
}
#modalSourceDetail #sourceAIChatInput {
    border: 1px solid var(--card-border) !important;
    background: transparent !important;
}
#modalSourceDetail .detail-tab-pane {
    border: none !important;
    background: transparent !important;
}
#modalSourceDetail .modal-footer {
    border-top: 1px solid var(--card-border) !important;
    background: transparent !important;
}
#modalSourceDetail .history-table th, 
#modalSourceDetail .history-table td {
    border-bottom: 1px solid var(--card-border) !important;
}
#modalSourceDetail .source-info-column {
    border: none !important;
}

/* ==========================================================================
   CONTACT CONSOLE / CRM DATABASE MANAGEMENT CSS
   ========================================================================== */
.contact-console-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: none !important;
    width: 100% !important;
    padding: 12px 40px 45px 40px !important;
}

#viewContact .contact-body-grid {
    display: grid;
    grid-template-columns: 7fr 3fr !important;
    gap: 24px;
    height: calc(100% - 64px);
    overflow: hidden;
}

#viewContact .category-sidebar {
    width: 100% !important;
    margin-left: 0 !important;
    overflow-y: auto;
    height: 100% !important;
    max-height: 100% !important;
    left: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    padding-right: 8px;
    border-right: 1px solid var(--card-border);
}

#viewContact .category-sidebar .category-item {
    text-align: left !important;
    justify-content: flex-start !important;
    padding: 8px 12px !important;
    border-radius: 4px;
    border-right: none !important;
    border-left: 2px solid transparent;
    transition: all var(--transition-fast) !important;
}

#viewContact .category-sidebar .category-item::before,
#viewContact .category-sidebar .category-item::after {
    display: none !important;
}

#viewContact .category-sidebar .category-item.active {
    background: rgba(127, 186, 115, 0.04);
    color: var(--accent-teal) !important;
    border-left: 2px solid var(--accent-teal) !important;
    font-weight: 600 !important;
}

#viewContact .contact-products-column {
    overflow-y: auto;
    max-height: 100%;
    padding-right: 8px;
    width: 100%;
}

/* Customer card styles */
.customer-card {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.customer-card:hover {
    background: var(--surface-tint);
    border-color: var(--accent-teal);
    box-shadow: 0 4px 20px rgba(127, 186, 115, 0.05);
    transform: translateY(-2px);
}

/* CRM stats widget styles */
.contact-stats-widget {
    width: 100% !important;
    overflow-y: auto;
    max-height: 100%;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}

/* Open Canvas Contact Detail Modal styling */
#modalContactDetail .modal-content {
    border: 1px solid var(--card-border) !important;
    background: var(--card-bg) !important;
    box-shadow: none !important;
    animation: modalSlideUp 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

#modalContactDetail #contactAIChatMessages {
    border: 1px solid var(--card-border) !important;
    background: transparent !important;
    border-radius: 4px !important;
}

#modalContactDetail #contactAIChatInput {
    border: 1px solid var(--card-border) !important;
    background: transparent !important;
}

#modalContactDetail .modal-footer {
    border-top: 1px solid var(--card-border) !important;
    background: transparent !important;
}

/* ==========================================================================
   NEGOTIATION CONSOLE (Live Deal Room & Hub CSS Style)
   ========================================================================== */
.negotiate-hub-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: none !important;
    width: 100% !important;
}

.negotiate-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.negotiation-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
}

.negotiation-card:hover {
    transform: translateY(-2px);
    background: var(--card-bg-hover);
    border-color: var(--card-border-hover);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}

/* Glow effect for Your Turn active negotiation card */
.negotiation-card.your-turn-active {
    border-color: var(--accent-teal) !important;
    box-shadow: 0 0 12px rgba(127, 186, 115, 0.15) !important;
}

/* Timeline concession list */
.concession-item {
    border-left: 2px solid var(--card-border);
    padding-left: 12px;
    position: relative;
    padding-bottom: 12px;
}

.concession-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--surface-tint);
}

.concession-item.buyer-step::before {
    background: #ffca28;
}

.concession-item.seller-step::before {
    background: var(--accent-teal);
}

.concession-item.ai-step::before {
    background: var(--accent-emerald);
}

.split-canvas-workspace {
    animation: modalSlideUp 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* New 70:30 Negotiation Refactoring Styles */
.negotiate-left-panel {
    flex: 0.7;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden !important;
    padding-right: 8px;
    box-sizing: border-box;
}

.negotiate-right-panel {
    flex: 0.3;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-left: 1px solid var(--card-border);
    padding-left: 24px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* Custom Dropdown for Negotiations */
.negotiate-dropdown-wrapper {
    position: relative;
    width: 100%;
    z-index: 100;
}

.negotiate-dropdown-trigger {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.negotiate-dropdown-trigger:hover {
    background: var(--surface-tint);
    border-color: var(--accent-teal);
}

.negotiate-dropdown-trigger h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.negotiate-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 4px;
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    max-height: 280px;
    overflow-y: auto;
    display: none;
    z-index: 101;
}

.negotiate-dropdown-menu.show {
    display: block;
}

.negotiate-dropdown-menu .negotiation-card {
    border: none;
    border-bottom: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    background: transparent;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.negotiate-dropdown-menu .negotiation-card:last-child {
    border-bottom: none;
}

.negotiate-dropdown-menu .negotiation-card:hover {
    background: var(--card-bg-hover);
}

.negotiate-dropdown-menu .negotiation-card.active-deal-card {
    background: rgba(127, 186, 115, 0.03) !important;
    border-left: 3px solid var(--accent-teal);
    padding-left: 15px;
}

/* Stepper Integrated Header on Chat Arena */
.negotiate-stepper-overlay {
    position: relative;
    background: var(--surface-tint) !important;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    z-index: 10;
}

.negotiate-stepper-overlay .stepper-step {
    display: flex;
    align-items: center;
    gap: 8px;
}

.negotiate-stepper-overlay .stepper-step .step-num {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-btn) !important;
    border: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: #161b22;
    color: var(--text-muted);
}

.negotiate-stepper-overlay .stepper-step.active .step-num {
    border-color: var(--accent-teal);
    color: var(--accent-teal);
    background: rgba(127, 186, 115, 0.05);
}

.negotiate-stepper-overlay .stepper-step.completed .step-num {
    border-color: var(--accent-emerald);
    color: var(--accent-emerald);
    background: rgba(16, 185, 129, 0.05);
}

.negotiate-stepper-overlay .stepper-step span:not(.step-num) {
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-muted);
}

.negotiate-stepper-overlay .stepper-step.active span:not(.step-num) {
    color: var(--accent-teal);
    font-weight: 600;
}

.negotiate-stepper-overlay .stepper-step.completed span:not(.step-num) {
    color: var(--accent-emerald);
}

.negotiate-stepper-overlay .stepper-line {
    flex: 1;
    height: 1px;
    background: var(--surface-tint);
    margin: 0 8px;
}

/* Colorful & Intelligent Activity Timeline for Negotiations */
.negotiate-activity-card {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.negotiate-activity-card:hover {
    background: var(--surface-tint);
    border-color: var(--accent-teal);
}

.negotiate-activity-card.current {
    border-color: var(--accent-teal);
    background: rgba(127, 186, 115, 0.02) !important;
    box-shadow: 0 0 10px rgba(127, 186, 115, 0.06);
}

.negotiate-activity-card.completed {
    border-color: var(--accent-emerald);
}

.negotiate-activity-card.action-required {
    border-color: #ffca28;
    background: rgba(255, 202, 40, 0.02) !important;
    box-shadow: 0 0 10px rgba(255, 202, 40, 0.06);
}

/* Timeline vertical line dots */
.negotiate-activity-card::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 18px;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-btn) !important;
    background: var(--surface-tint);
    border: 2px solid #0d1117;
    z-index: 2;
}

.negotiate-activity-card.completed::before {
    background: var(--accent-emerald);
}

.negotiate-activity-card.current::before {
    background: var(--accent-teal);
    box-shadow: 0 0 6px var(--accent-teal);
}

.negotiate-activity-card.action-required::before {
    background: #ffca28;
    box-shadow: 0 0 6px #ffca28;
}

/* Mini metrics table inside timeline card */
.negotiate-mini-metrics {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-family: var(--font-mono);
    border-top: 1px dashed var(--card-border);
    padding-top: 8px;
    margin-top: 2px;
}

/* Concession Gap visual bar */
.concession-gap-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    width: 100%;
}
.concession-gap-track {
    height: 6px;
    background: var(--surface-tint);
    width: 100%;
    position: relative;
    border: 1px solid var(--card-border);
}
.concession-gap-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-teal), var(--accent-emerald));
    width: 100%;
    transition: width 0.3s ease;
}

/* AI Safe Zone visual bar */
.ai-visual-zone-bar {
    height: 12px;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.2) 0%, rgba(16, 185, 129, 0.3) 30%, rgba(16, 185, 129, 0.3) 70%, rgba(239, 68, 68, 0.2) 100%);
    border: 1px solid var(--card-border);
    position: relative;
    margin-top: 8px;
    width: 100%;
}
.ai-visual-zone-marker {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 18px;
    background: #ffffff;
    box-shadow: 0 0 8px #ffffff;
    transition: left 0.3s ease;
}

/* Agreement checklist grid */
.agreement-checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}
.checklist-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    padding: 6px 8px;
}
.checklist-item.approved {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.15);
    color: var(--accent-emerald);
}
.checklist-item.approved i {
    color: var(--accent-emerald) !important;
}

/* Blockchain security hash card */
.blockchain-hash-card {
    background: rgba(16, 185, 129, 0.02);
    border: 1px dashed rgba(16, 185, 129, 0.2);
    padding: 8px 10px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-mono);
}

/* ==========================================================================
   LOGISTICS & SOURCING MONITOR CSS STYLE
   ========================================================================== */
.logistics-monitor-container {
    animation: modalSlideUp 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.monitor-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.monitor-card:hover {
    transform: translateY(-1.5px);
    background: var(--card-bg-hover);
    border-color: var(--card-border-hover);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

.monitor-card.active {
    border-color: var(--accent-teal) !important;
    background: rgba(127, 186, 115, 0.02) !important;
    box-shadow: 0 0 10px rgba(127, 186, 115, 0.1) !important;
}

/* Sourcing Lifecycle Diagram CSS */
.diagram-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 2;
    cursor: help;
    transition: all 0.3s ease;
}

.diagram-node i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #161b22;
    border: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.diagram-node span {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.diagram-node.active i {
    border-color: var(--accent-teal);
    color: var(--accent-teal);
    background: rgba(127, 186, 115, 0.05);
    box-shadow: 0 0 8px rgba(127, 186, 115, 0.2);
}

.diagram-node.active span {
    color: var(--accent-teal);
    font-weight: 600;
}

.diagram-node.completed i {
    border-color: var(--accent-emerald);
    color: var(--accent-emerald);
    background: rgba(16, 185, 129, 0.05);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
}

.diagram-node.completed span {
    color: var(--accent-emerald);
}

.diagram-line {
    flex: 1;
    height: 2px;
    background: var(--surface-tint);
    position: relative;
    z-index: 1;
    margin: 0 -8px;
    top: -10px;
    transition: all 0.3s ease;
}

.diagram-line.active {
    background: linear-gradient(90deg, var(--accent-teal), var(--accent-emerald));
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
}

/* Radar Pulse Animations */
@keyframes mapRadarPulse {
    0% { r: 6px; opacity: 0.8; }
    100% { r: 18px; opacity: 0; }
}

@keyframes nodeRadarPulse {
    0% { box-shadow: 0 0 0 0px rgba(16, 185, 129, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0px rgba(16, 185, 129, 0); }
}

.radar-glow {
    animation: nodeRadarPulse 1.8s infinite;
}

/* Pipeline Status Node styles */
.pipeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    position: relative;
}

.pipeline-node-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0d1117;
    border: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    z-index: 2;
    transition: all 0.3s ease;
}

.pipeline-node-lbl {
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
    font-family: var(--font-mono);
    max-width: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pipeline-node.completed .pipeline-node-circle {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--accent-emerald);
    color: var(--accent-emerald);
}

.pipeline-node.completed .pipeline-node-lbl {
    color: var(--accent-emerald);
}

.pipeline-node.current .pipeline-node-circle {
    background: rgba(127, 186, 115, 0.15);
    border-color: var(--accent-teal);
    color: var(--accent-teal);
    box-shadow: 0 0 8px var(--accent-teal);
    animation: nodeRadarPulse 2s infinite;
}

.pipeline-node.current .pipeline-node-lbl {
    color: var(--accent-teal);
    font-weight: 600;
}

.pipeline-connector {
    position: absolute;
    height: 1.5px;
    background: var(--surface-tint);
    top: 9px;
    left: 50%;
    width: 100%;
    z-index: 1;
}

.pipeline-connector.completed {
    background: var(--accent-emerald);
}

.pipeline-node:last-child .pipeline-connector {
    display: none;
}

/* New 70:30 Monitor Refactoring Styles */
.monitor-left-panel {
    flex: 0.7;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    padding-right: 8px;
    box-sizing: border-box;
}

.monitor-right-panel {
    flex: 0.3;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-left: 1px solid var(--card-border);
    padding-left: 24px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* Custom Dropdown for Sourcing Waybill */
.monitor-dropdown-wrapper {
    position: relative;
    width: 100%;
    z-index: 100;
}

.monitor-dropdown-trigger {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.monitor-dropdown-trigger:hover {
    background: var(--surface-tint);
    border-color: var(--accent-teal);
}

.monitor-dropdown-trigger h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.monitor-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 4px;
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    max-height: 280px;
    overflow-y: auto;
    display: none;
    z-index: 101;
}

.monitor-dropdown-menu.show {
    display: block;
}

.monitor-dropdown-menu .monitor-card {
    border: none;
    border-bottom: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    background: transparent;
    padding: 12px 18px;
}

.monitor-dropdown-menu .monitor-card:last-child {
    border-bottom: none;
}

.monitor-dropdown-menu .monitor-card:hover {
    background: var(--card-bg-hover);
    transform: none;
    box-shadow: none;
}

.monitor-dropdown-menu .monitor-card.active {
    background: rgba(127, 186, 115, 0.03) !important;
    border-left: 3px solid var(--accent-teal);
    padding-left: 15px;
}

/* Partner Specs Card */
.monitor-partner-card {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    background: var(--surface-tint);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Glassmorphic Lifecycle Overlay on SVG Map */
.monitor-lifecycle-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    background: rgba(13, 21, 33, 0.8) !important;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    z-index: 10;
}

.monitor-lifecycle-overlay .diagram-node {
    flex-direction: row;
    gap: 8px;
}

.monitor-lifecycle-overlay .diagram-node i {
    width: 22px;
    height: 22px;
    font-size: 10px;
    border-radius: var(--radius-btn) !important;
}

.monitor-lifecycle-overlay .diagram-node span {
    font-size: 9px;
    font-weight: 500;
}

.monitor-lifecycle-overlay .diagram-line {
    height: 1px;
    top: 0;
    margin: 0 4px;
}

/* Timeline Activity Log */
.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    padding-left: 20px;
    border-left: 1px dashed var(--card-border);
    margin-left: 10px;
    margin-top: 12px;
}

.activity-card {
    position: relative;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.activity-card:hover {
    background: var(--surface-tint);
    border-color: var(--accent-teal);
}

.activity-card.current {
    border-color: var(--accent-teal);
    background: rgba(127, 186, 115, 0.02) !important;
    box-shadow: 0 0 8px rgba(127, 186, 115, 0.05);
}

.activity-card.completed {
    border-color: var(--accent-emerald);
}

.activity-card::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-btn) !important;
    background: var(--surface-tint);
    border: 2px solid #0d1117;
    z-index: 2;
}

.activity-card.completed::before {
    background: var(--accent-emerald);
}

.activity-card.current::before {
    background: var(--accent-teal);
    box-shadow: 0 0 6px var(--accent-teal);
}


/* ==========================================================================
   FINANCIAL ESCROW DESK CSS STYLE
   ========================================================================== */
.finance-desk-container {
    animation: modalSlideUp 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.invoice-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.invoice-card:hover {
    transform: translateY(-1.5px);
    background: var(--card-bg-hover);
    border-color: var(--card-border-hover);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

.invoice-status-badge {
    font-size: 10px;
    font-family: var(--font-mono);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.invoice-status-badge.locked {
    background: rgba(249, 115, 22, 0.1);
    color: var(--accent-orange);
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.invoice-status-badge.ready {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-emerald);
    border: 1px solid rgba(16, 185, 129, 0.2);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.1);
}

.invoice-status-badge.released {
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-muted);
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.btn-release-escrow {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    color: #000;
    background: var(--accent-emerald);
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-release-escrow:hover:not(:disabled) {
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
    transform: scale(1.02);
}

.btn-release-escrow:disabled {
    background: var(--surface-tint);
    color: var(--text-muted);
    cursor: not-allowed;
    border: 1px solid var(--card-border);
}

.finance-kpi-card {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
}

/* ==========================================================================
   SETTINGS MODAL - ULTRA MINIMALIST STYLE
   ========================================================================== */
.modal-content.settings-modal-minimal {
    max-width: 650px;
    background: #121214 !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] .modal-content.settings-modal-minimal {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important;
}

.modal-tab-btn {
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    font-family: 'Space Grotesk', 'Outfit', sans-serif !important;
}

.modal-tab-btn:hover {
    color: var(--text-color) !important;
    background: var(--surface-tint) !important;
}

[data-theme="light"] .modal-tab-btn:hover {
    background: rgba(0, 0, 0, 0.02) !important;
}

.modal-tab-btn.active {
    color: var(--text-color) !important;
    background: var(--surface-tint) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="light"] .modal-tab-btn.active {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.modal-tab-content {
    animation: tabFadeIn 0.25s ease-out;
}

.modal-tab-content.hidden {
    display: none !important;
}

/* ==========================================================================
   SETTINGS MODAL V2 — cfg-* component system
   ========================================================================== */
.modal-content.settings-modal-v2 {
    width: 960px;
    max-width: 96vw;
    height: 700px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}
.settings-body-grid {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.settings-sidebar {
    width: 196px;
    flex-shrink: 0;
    border-right: 1px solid var(--card-border);
    padding: 12px 10px;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.settings-nav-divider {
    height: 1px;
    background: var(--card-border);
    margin: 6px 4px;
}
.settings-content-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.settings-tab-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px 16px;
    box-sizing: border-box;
}
.cfg-footer {
    border-top: 1px solid var(--card-border);
    padding: 14px 28px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
/* Tab header */
.cfg-tab-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--card-border);
}
.cfg-tab-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 3px;
    font-family: var(--font-heading);
}
.cfg-tab-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}
/* Sections */
.cfg-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--card-border);
}
.cfg-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.cfg-section-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}
/* Setting rows */
.cfg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--card-border);
}
.cfg-row:last-child { border-bottom: none; }
.cfg-row-info { flex: 1; min-width: 0; }
.cfg-row-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cfg-row-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
}
/* 2-col field grid */
.cfg-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
/* Small buttons */
.btn-cfg-sm {
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    padding: 5px 13px;
    border-radius: 6px;
    border: 1px solid var(--card-border);
    background: var(--surface-tint);
    color: var(--text-color);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
    flex-shrink: 0;
}
.btn-cfg-sm:hover { border-color: var(--card-border-hover); background: var(--surface-tint); filter: brightness(1.1); }
.btn-cfg-ghost { background: transparent; color: var(--text-muted); }
.btn-cfg-ghost:hover { color: var(--text-color); background: var(--surface-tint); }
.btn-cfg-danger { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: #EF4444; }
.btn-cfg-danger:hover { background: rgba(239,68,68,0.15); border-color: #EF4444; }
.btn-cfg-danger-ghost { background: transparent; border-color: transparent; color: #EF4444; }
.btn-cfg-danger-ghost:hover { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.25); }
.btn-cfg-gold { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.35); color: #F59E0B; }
.btn-cfg-gold:hover { background: rgba(245,158,11,0.18); }
.btn-cfg-icon {
    width: 28px; height: 28px; border-radius: 6px;
    border: 1px solid var(--card-border); background: transparent;
    color: var(--text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; transition: all 0.15s; padding: 0; flex-shrink: 0;
}
.btn-cfg-icon:hover { color: var(--text-color); background: var(--surface-tint); }
/* Badges */
.cfg-badge {
    font-size: 10px; font-weight: 600;
    padding: 2px 7px; border-radius: 4px;
    display: inline-flex; align-items: center; letter-spacing: 0.03em;
}
.cfg-badge-green { background: rgba(16,185,129,0.12); color: var(--accent-emerald); border: 1px solid rgba(16,185,129,0.25); }
.cfg-badge-beta  { background: rgba(99,102,241,0.12); color: #818CF8; border: 1px solid rgba(99,102,241,0.25); }
.cfg-badge-off   { background: var(--surface-tint); color: var(--text-muted); border: 1px solid var(--card-border); }
/* Toggle + badge inline */
.cfg-toggle-badge { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Sessions */
.cfg-session-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 8px;
    background: var(--surface-tint); border: 1px solid var(--card-border);
    margin-bottom: 8px;
}
.cfg-session-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--card-bg); border: 1px solid var(--card-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--text-muted); flex-shrink: 0;
}
.cfg-session-info { flex: 1; }
/* API Key */
.cfg-apikey-display {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; padding: 9px 12px;
    border-radius: 8px; background: var(--surface-tint); border: 1px solid var(--card-border);
}
.cfg-apikey-code { flex: 1; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
/* Notification table */
.cfg-notif-header-row {
    display: flex; align-items: center; gap: 12px;
    padding: 0 0 8px; border-bottom: 1px solid var(--card-border);
}
.cfg-notif-col-head {
    width: 48px; text-align: center; font-size: 10.5px;
    font-weight: 600; color: var(--text-muted);
    letter-spacing: 0.05em; text-transform: uppercase; flex-shrink: 0;
}
.cfg-notif-group-title {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted); padding: 10px 0 6px;
}
.cfg-notif-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--card-border);
}
.cfg-notif-row:last-child { border-bottom: none; }
.cfg-notif-row .switch-container { width: 48px; display: flex; justify-content: center; flex-shrink: 0; }
/* Inline select */
.cfg-inline-select {
    background: var(--surface-tint); border: 1px solid var(--card-border);
    border-radius: 6px; color: var(--text-color); font-size: 12px;
    font-family: inherit; padding: 5px 10px; min-width: 150px; cursor: pointer;
}
.cfg-inline-select:focus { outline: none; border-color: var(--accent-teal); }
/* Theme picker */
.cfg-theme-picker { display: flex; gap: 12px; }
.cfg-theme-option {
    flex: 1; border: 2px solid var(--card-border); border-radius: 10px;
    padding: 10px; cursor: pointer; text-align: center; transition: all 0.15s;
}
.cfg-theme-option:hover { border-color: var(--card-border-hover); }
.cfg-theme-option.active { border-color: var(--accent-teal); background: var(--accent-teal-glow); }
.cfg-theme-preview {
    height: 52px; border-radius: 6px; margin-bottom: 8px; overflow: hidden;
}
.cfg-theme-preview-dark { background: #0f1514; }
.cfg-theme-preview-light { background: #f0f0f0; }
.cfg-theme-preview-auto { background: linear-gradient(135deg, #0f1514 50%, #f0f0f0 50%); }
.cfg-theme-preview-bar { height: 12px; background: rgba(255,255,255,0.07); }
.cfg-theme-preview-light .cfg-theme-preview-bar { background: rgba(0,0,0,0.07); }
.cfg-theme-preview-content { margin: 6px 8px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.1); }
.cfg-theme-preview-light .cfg-theme-preview-content { background: rgba(0,0,0,0.1); }
.cfg-theme-name { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 3px; }
.cfg-theme-option.active .cfg-theme-name { color: var(--accent-teal); }
.cfg-theme-check { font-size: 15px; color: var(--accent-teal); height: 16px; display: flex; align-items: center; justify-content: center; }
/* Density picker */
.cfg-density-picker { display: flex; gap: 10px; }
.cfg-density-option {
    flex: 1; border: 2px solid var(--card-border); border-radius: 8px;
    padding: 12px 8px; cursor: pointer; text-align: center; transition: all 0.15s;
}
.cfg-density-option:hover { border-color: var(--card-border-hover); }
.cfg-density-option.active { border-color: var(--accent-teal); background: var(--accent-teal-glow); }
.cfg-density-icon { font-size: 20px; color: var(--text-muted); margin-bottom: 5px; }
.cfg-density-option.active .cfg-density-icon { color: var(--accent-teal); }
.cfg-density-name { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.cfg-density-option.active .cfg-density-name { color: var(--accent-teal); }
/* Integrations */
.cfg-integration-row {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    border-radius: 8px; border: 1px solid var(--card-border);
    margin-bottom: 8px; background: var(--surface-tint);
}
.cfg-integration-logo {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.cfg-int-slack  { background: rgba(74,21,75,0.25); color: #E01E5A; }
.cfg-int-sheets { background: rgba(15,157,88,0.15); color: #0F9D58; }
.cfg-int-erp    { background: rgba(99,102,241,0.15); color: #818CF8; }
/* Billing / plan card */
.cfg-plan-card {
    padding: 16px; border-radius: 10px;
    border: 1px solid var(--accent-teal); background: var(--accent-teal-glow);
}
.cfg-plan-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.cfg-plan-name { font-size: 15px; font-weight: 700; color: var(--text-color); font-family: var(--font-heading); }
.cfg-plan-price { font-size: 22px; font-weight: 700; color: var(--accent-teal); margin-top: 2px; }
.cfg-plan-price span { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.cfg-plan-features { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 10px; }
.cfg-plan-feature { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.cfg-plan-feature i { color: var(--accent-emerald); font-size: 12px; }
.cfg-plan-renewal { font-size: 11px; color: var(--text-muted); }
/* Usage bar */
.cfg-usage-stat {
    padding: 13px; border-radius: 8px;
    background: var(--surface-tint); border: 1px solid var(--card-border);
}
.cfg-usage-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.cfg-usage-val { font-size: 13px; font-weight: 600; color: var(--text-color); }
.cfg-usage-bar-track { height: 5px; border-radius: 3px; background: var(--card-border); margin-bottom: 5px; overflow: hidden; }
.cfg-usage-bar-fill { height: 100%; border-radius: 3px; background: var(--accent-teal); transition: width 0.5s ease; }
.cfg-usage-bottom { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
/* Payment */
.cfg-payment-row {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    border-radius: 8px; border: 1px solid var(--card-border); background: var(--surface-tint);
}
.cfg-payment-icon {
    width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--card-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--text-muted); background: var(--card-bg); flex-shrink: 0;
}
/* Invoice rows */
.cfg-invoice-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; border-bottom: 1px solid var(--card-border);
}
.cfg-invoice-row:last-child { border-bottom: none; }
/* System info grid */
.cfg-info-grid {
    padding: 4px 12px; border-radius: 8px;
    background: var(--surface-tint); border: 1px solid var(--card-border);
}
.cfg-info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 0; border-bottom: 1px solid var(--card-border); font-size: 12px;
}
.cfg-info-row:last-child { border-bottom: none; }
.cfg-info-row span:first-child { color: var(--text-muted); }
.cfg-info-row span:last-child { color: var(--text-color); font-weight: 500; }
/* Danger zone */
.cfg-danger-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 12px; border-radius: 8px;
    border: 1px solid rgba(239,68,68,0.18); background: rgba(239,68,68,0.04);
    margin-bottom: 8px;
}
.cfg-danger-row:last-child { margin-bottom: 0; }
/* Logo upload row */
.cfg-logo-row {
    display: flex; align-items: center; gap: 16px; padding: 12px;
    border-radius: 8px; border: 1px solid var(--card-border); background: var(--surface-tint);
}
.cfg-logo-preview {
    width: 64px; height: 64px; border-radius: 10px;
    border: 1px solid var(--card-border); background: var(--card-bg);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ==========================================================================
   CRM CONTACT DETAIL — crm-* component system
   ========================================================================== */
.crm-kpi-card {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: var(--surface-tint);
    text-align: center;
}
.crm-kpi-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.crm-kpi-value {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-color);
    font-family: var(--font-mono);
}
.crm-info-card {
    padding: 14px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: var(--surface-tint);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.crm-card-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.crm-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--card-border);
    font-size: 12.5px;
}
.crm-info-row:last-child { border-bottom: none; }
.crm-info-key { color: var(--text-muted); flex-shrink: 0; }
.crm-info-val { color: var(--text-color); font-weight: 500; text-align: right; }
/* Insight chips */
.crm-insight-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
}
.crm-insight-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--accent-teal-glow);
    border: 1px solid var(--accent-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--accent-teal);
    flex-shrink: 0;
}
.crm-insight-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}
.crm-insight-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    margin-top: 1px;
}
/* Activity timeline */
.crm-activity-list { display: flex; flex-direction: column; gap: 0; }
.crm-activity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--card-border);
    position: relative;
}
.crm-activity-row:last-child { border-bottom: none; }
.crm-activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.crm-activity-info { flex: 1; min-width: 0; }
.crm-activity-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-activity-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* ==========================================================================
   NOTIFICATION CENTER STYLES
   ========================================================================== */
.header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 40px;
}

/* ── Utility Bar ── */
.utility-bar {
    display: flex;
    align-items: center;
    gap: 4px;
}

.utility-btn {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
    font-size: 16px;
    flex-shrink: 0;
}

.utility-btn:hover {
    background: var(--surface-tint);
    border-color: var(--card-border-hover);
    color: var(--text-color);
    transform: translateY(-1px);
}

.utility-btn.active {
    background: var(--accent-teal-glow);
    border-color: var(--accent-teal);
    color: var(--accent-teal);
}

.utility-divider {
    width: 1px;
    height: 22px;
    background: var(--card-border);
    margin: 0 6px;
    flex-shrink: 0;
}

.notification-container {
    position: relative;
    display: inline-block;
}

/* Legacy alias — keep existing header-action-btn working */
.header-action-btn {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-color);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
}

.header-action-btn:hover {
    background: var(--surface-tint);
    border-color: var(--card-border-hover);
    transform: translateY(-1px);
}

.header-action-btn i {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.header-action-btn:hover i {
    transform: rotate(15deg);
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--accent-red);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1.5px solid var(--bg-color);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

/* Pulse animation for unread notifications button */
.header-action-btn.has-unread {
    animation: btnPulse 2s infinite;
}

@keyframes btnPulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.btn-text-link {
    background: transparent;
    border: none;
    color: var(--accent-teal);
    font-size: 11px;
    font-family: var(--font-mono);
    cursor: pointer;
    padding: 2px 6px;
    transition: opacity var(--transition-fast);
}

.btn-text-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.notification-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--card-border);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    position: relative;
}

[data-theme="light"] .notification-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.notification-item:hover {
    background: var(--surface-tint);
}

[data-theme="light"] .notification-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.notification-item.unread {
    background: rgba(127, 186, 115, 0.02);
}

[data-theme="light"] .notification-item.unread {
    background: rgba(2, 132, 199, 0.02);
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-teal);
    box-shadow: 0 0 6px var(--accent-teal);
}

.notification-icon-wrapper {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon-wrapper.match {
    background: rgba(16, 185, 129, 0.08);
    color: var(--accent-emerald);
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.notification-icon-wrapper.negotiate {
    background: rgba(127, 186, 115, 0.08);
    color: var(--accent-teal);
    border: 1px solid rgba(127, 186, 115, 0.15);
}

.notification-icon-wrapper.monitor {
    background: rgba(249, 115, 22, 0.08);
    color: var(--accent-orange);
    border: 1px solid rgba(249, 115, 22, 0.15);
}

.notification-icon-wrapper.finance {
    background: rgba(239, 68, 68, 0.08);
    color: var(--accent-red);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.notification-item-content {
    flex: 1;
}

.notification-item-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 2px;
}

.notification-item-text {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

.notification-item-time {
    font-size: 9px;
    color: var(--text-dark);
    font-family: var(--font-mono);
    margin-top: 4px;
}

.notification-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.verified-badge-inline {
    display: inline-flex;
    align-items: center;
    color: var(--accent-emerald);
    vertical-align: middle;
}

.verified-badge-inline i {
    width: 12px;
    height: 12px;
    stroke-width: 2;
}

/* Flat Message Bubbles for Chat & Concession History */
.chat-bubble {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    padding: 8px 12px;
    border-radius: var(--radius-btn) !important;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 8px;
}
.chat-bubble.seller {
    align-self: flex-end;
    background: rgba(127, 186, 115, 0.08);
    border: 1px solid rgba(127, 186, 115, 0.15);
    color: #e2e8f0;
}
.chat-bubble.buyer {
    align-self: flex-start;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    color: #e2e8f0;
}
.chat-bubble.ai {
    align-self: flex-start;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.15);
    color: #e2e8f0;
}
.chat-bubble .bubble-sender {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}
.chat-bubble.seller .bubble-sender {
    color: var(--accent-teal);
    text-align: right;
}
.chat-bubble.buyer .bubble-sender {
    color: #ffca28;
}
.chat-bubble.ai .bubble-sender {
    color: var(--accent-emerald);
}

/* General Layout utilities to clean inline styles */
.split-canvas-layout {
    display: flex;
    gap: 24px;
    height: 100%;
    box-sizing: border-box;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.kpi-card {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Tooltip animation */
#chartTooltip:not(.hidden) {
    animation: tabFadeIn 0.15s ease-out;
}

/* --- Category Dropdown Menu Styles --- */
.category-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: rgba(18, 24, 38, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
    z-index: 110;
    width: 220px;
    padding: 6px 0;
    display: none;
    flex-direction: column;
}

.category-dropdown-menu.show {
    display: flex;
}

.category-dropdown-menu .dropdown-item {
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.category-dropdown-menu .dropdown-item:hover {
    color: var(--text-color);
    background: var(--surface-tint);
    padding-left: 18px;
}

.category-dropdown-menu .dropdown-item.active {
    color: var(--accent-teal);
    font-weight: 600;
}

[data-theme="light"] .category-dropdown-menu {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

[data-theme="light"] .category-dropdown-menu .dropdown-item {
    color: #475569;
}

[data-theme="light"] .category-dropdown-menu .dropdown-item:hover {
    color: #0f172a;
    background: rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   POLISHING & RESPONSIVE LAYOUT FIXES (UX/UI Specialist Revision)
   ========================================================================== */

/* 1. Bottom Capsule Navbar active indicators */
.bottom-capsule-navbar .nav-item {
    position: relative;
    transition: all var(--transition-normal);
}

.bottom-capsule-navbar .nav-item.active {
    color: #ffffff !important;
    background: var(--surface-tint) !important;
    font-weight: 600 !important;
    box-shadow: inset 0 -2px 0 var(--accent-teal) !important;
}

[data-theme="light"] .bottom-capsule-navbar .nav-item.active {
    color: #000000 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    box-shadow: inset 0 -2px 0 var(--accent-teal) !important;
}

/* 2. Carousel Controls & Z-Index Polishing */
.nav-arrow-btn {
    z-index: 30 !important; /* position: relative đã set ở base — đè lên wrapper pseudo-elements */
}

@media (max-width: 768px) {
    .nav-arrow-btn.left-arrow,
    .nav-arrow-btn.right-arrow {
        background: rgba(13, 17, 26, 0.8) !important;
        border: 1px solid var(--card-border) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    }
    [data-theme="light"] .nav-arrow-btn.left-arrow,
    [data-theme="light"] .nav-arrow-btn.right-arrow {
        background: rgba(255, 255, 255, 0.8) !important;
    }
}

/* 3. Match Action Center Button Wrapper Responsiveness */
@media (max-width: 600px) {
    .match-action-center {
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 92% !important;
        max-width: 330px !important;
        padding: 10px !important;
        gap: 6px !important;
    }
    .btn-match-action {
        padding: 8px 12px !important;
        font-size: 11px !important;
        flex: 1 1 auto !important;
        text-align: center !important;
    }
}

/* 4. Responsive layout stacking for all inner dashboard consoles */
@media (max-width: 900px) {
    /* Sourcing and Contact grids stacking */
    #viewSourcing .sourcing-body-grid,
    #viewContact .contact-body-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
        overflow-y: visible !important;
    }
    .marquee-arena-wrapper {
        height: auto !important;
    }
    
    /* Logistics and Finance flex columns stacking */
    .logistics-monitor-container,
    .finance-desk-container {
        flex-direction: column !important;
        height: auto !important;
        overflow-y: visible !important;
        padding: 20px 16px 80px 16px !important;
    }
    
    .logistics-monitor-container > div,
    .finance-desk-container > div {
        flex: none !important;
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid var(--card-border) !important;
        padding-left: 0 !important;
        padding-top: 24px !important;
    }
    
    .logistics-monitor-container > div:first-child,
    .finance-desk-container > div:first-child {
        border-top: none !important;
        padding-top: 0 !important;
    }
    
    /* Pad reduction on console containers to prevent layout squeeze */
    .sourcing-console-container,
    .contact-console-container,
    .finance-console-container,
    .business-console-container,
    .matching-arena {
        padding: 12px 16px 45px 16px !important;
    }
    
    /* Responsive cho các trang Finance và Business */
    .finance-content-wrapper,
    .business-content-wrapper {
        height: auto !important;
        overflow-y: visible !important;
        overflow: visible !important;
    }
    
    .finance-overview-columns,
    .business-overview-columns,
    .strategy-main-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    .treasury-terminal-grid,
    .sourcing-interactive-arena {
        grid-template-columns: 1fr !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    #businessTabCanvas {
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    #businessTabCanvas > div {
        flex: none !important;
        width: 100% !important;
        border-left: none !important;
        padding-left: 0 !important;
        margin-bottom: 20px;
    }
    
    .bmc-grid-new {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        height: auto !important;
    }
    
    .bmc-cell-new {
        grid-row: span 1 !important;
        grid-column: span 1 !important;
    }
}

/* 5. Modal Padding & Aspect Ratio Adjustments on Mobile */
@media (max-width: 600px) {
    .modal-overlay {
        padding: 10px !important;
    }
    .modal-content {
        padding: 16px !important;
        max-height: calc(100vh - 20px) !important;
    }
    .modal-content.detail-modal {
        padding: 16px !important;
    }
    .modal-header {
        margin-bottom: 12px !important;
    }
    .modal-footer {
        padding: 10px 12px !important;
    }
}
/* 6. Custom Tablet & Mobile UX/UI Responsive Adjustments */
@media (max-width: 900px) {
    /* Stack split canvas layout for negotiate live room */
    .split-canvas-workspace {
        flex-direction: column !important;
        overflow-y: auto !important;
    }
    .split-canvas-workspace > div {
        width: 100% !important;
        flex: none !important;
    }
    
    /* Padding adjustments for negotiation views */
    #negotiateHub, #negotiateLiveRoom {
        padding: 20px 16px 80px 16px !important;
    }
}

@media (max-width: 768px) {
    /* Stack header and align logo/actions cleanly */
    .main-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 16px !important;
    }
    .header-left {
        display: none !important;
    }
    .header-right {
        padding-right: 0px !important;
    }
    
    /* Reduce page container padding on tablet */
    #viewHome,
    #viewSourcing,
    #viewContact {
        padding: 0 16px !important;
    }
    .home-header-bar,
    .sourcing-header-bar,
    .contact-header-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    /* Hide long descriptions to save mobile screen estate */
    .home-header-desc, 
    .sourcing-header-desc, 
    .contact-header-desc {
        display: none !important;
    }
    
    /* Compact navbar mode: Hide text labels, show only icons to fit all 7 items cleanly */
    .bottom-capsule-navbar .nav-item span {
        display: none !important;
    }
    .bottom-capsule-navbar .nav-item {
        padding: 10px 14px !important;
    }
    .bottom-capsule-navbar .nav-divider {
        margin: 0 2px !important;
    }
}

@media (max-width: 600px) {
    .match-marquee-wrapper {
        height: 190px !important;
    }
}

/* ==========================================================================
   DONGBO UI/UX FOR NEGOTIATE, MONITOR, FINANCE, SETTING INLINE (Architect Rules)
   ========================================================================== */

/* 1. Main Console Wrappers & Layout Alignment */
.negotiate-console-container,
.monitor-console-container,
.finance-desk-container,
.settings-inline-container {
    height: 100% !important;
    display: flex !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 40px 45px 40px !important;
    overflow: hidden !important;
}

.negotiate-console-container,
.monitor-console-container {
    flex-direction: column !important;
}

.finance-desk-container,
.settings-inline-container {
    flex-direction: row !important;
    gap: 24px !important;
}

.logistics-monitor-container {
    height: calc(100% - 49px) !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 0 !important;
}

@media (max-width: 900px) {
    .negotiate-console-container,
    .monitor-console-container,
    .finance-desk-container,
    .settings-inline-container {
        padding: 12px 16px 45px 16px !important;
        height: auto !important;
        overflow-y: visible !important;
        flex-direction: column !important;
    }
    
    .logistics-monitor-container {
        height: auto !important;
        overflow-y: visible !important;
        flex-direction: column !important;
        gap: 24px !important;
        padding: 0 !important;
    }
}

/* 2. Sharp Edges Rule (100% góc vuông cho cả 4 trang) */
#viewNegotiate *, 
#viewMonitor *, 
#viewFinance *, 
#viewSetting * {
    border-radius: var(--radius-btn) !important;
}

/* 3. Settings Sidebar Vertical Tab style */
.settings-sidebar {
    border-right: 1px solid var(--card-border);
}

.settings-tab-btn {
    text-align: left;
    background: none;
    border: none;
    color: var(--text-color-muted) !important;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 500;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.settings-tab-btn:hover {
    color: var(--text-color) !important;
    background: var(--surface-tint);
}

.settings-tab-btn.active {
    color: var(--text-color) !important;
    border-left: 3px solid var(--accent-teal);
    background: rgba(127, 186, 115, 0.05);
}

.settings-footer-inline {
    background: rgba(0,0,0,0.1);
}

/* ==========================================================================
   NEGOTIATION SPLIT TERMINAL STYLES
   ========================================================================== */
.negotiate-split-container {
    display: flex;
    gap: 24px;
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.negotiate-sidebar-queue {
    flex: 0.9;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.negotiate-workspace-panel {
    flex: 2.1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

#negotiationListGrid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    overflow-y: auto;
    flex: 1;
    padding-bottom: 20px;
}

/* Stepper styles */
.negotiation-stepper-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    margin-bottom: 16px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.stepper-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-color-muted);
}

.stepper-step.active {
    color: var(--accent-teal);
}

.stepper-step.completed {
    color: var(--accent-emerald);
}

.stepper-step .step-num {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-family: var(--font-mono);
    background: var(--surface-tint);
    color: var(--text-color-muted);
}

.stepper-step.active .step-num {
    background: var(--accent-teal);
    color: #0d1117;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(127, 186, 115, 0.3);
}

.stepper-step.completed .step-num {
    background: var(--accent-emerald);
    color: #0d1117;
    font-weight: bold;
}

.stepper-line {
    flex: 1;
    height: 1px;
    border-top: 1px solid var(--card-border);
    margin: 0 12px;
}

/* Empty State */
#negotiateEmptyState {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-muted);
    gap: 12px;
}

/* Hidden utilities */
#negotiateLiveRoom.hidden {
    display: none !important;
}

/* Highlight elements */
.term-highlight-green {
    background: rgba(16, 185, 129, 0.08) !important;
    color: var(--accent-emerald) !important;
}

.term-highlight-red {
    background: rgba(239, 68, 68, 0.08) !important;
    color: var(--accent-red) !important;
}

.negotiation-card.active-deal-card {
    border-color: var(--accent-teal) !important;
    background: rgba(127, 186, 115, 0.03) !important;
    box-shadow: 0 0 10px rgba(127, 186, 115, 0.1) !important;
}
/* Nút Agentic AI Chatbot ở góc phải footer */
.modal-ai-chatbot-toggle-btn,
#btnToggleSourceAI,
#btnToggleContactAI {
    margin-left: auto !important;
    border: 1px solid var(--accent-teal) !important;
    padding: 6px 12px !important;
    color: var(--accent-teal) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    height: 32px !important;
    background: transparent !important;
}

.modal-ai-chatbot-toggle-btn:hover,
#btnToggleSourceAI:hover,
#btnToggleContactAI:hover {
    background: rgba(13, 148, 136, 0.1) !important;
    color: var(--text-color) !important;
    text-decoration: none !important;
}

.modal-ai-chatbot-toggle-btn.active,
#btnToggleSourceAI.active,
#btnToggleContactAI.active {
    background: var(--accent-teal) !important;
    color: var(--card-bg) !important;
    border: 1px solid var(--accent-teal) !important;
}

/* Agentic AI Chatbot Sidebar Slide-out */
.modal-chatbot-sidebar {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 38% !important;
    background: rgba(15, 23, 42, 0.98) !important;
    border-left: 1px solid var(--card-border) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 250 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    box-sizing: border-box !important;
}

[data-theme="light"] .modal-chatbot-sidebar {
    background: rgba(248, 250, 252, 0.98) !important;
}

.modal-content.ai-open .modal-chatbot-sidebar {
    transform: translateX(0) !important;
}

.chatbot-sidebar-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--card-border) !important;
    font-family: var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

.chatbot-sidebar-close {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 24px !important;
    height: 24px !important;
}

.chatbot-sidebar-close:hover {
    color: var(--text-color) !important;
}

.chatbot-sidebar-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}

.chatbot-sidebar-footer {
    padding: 12px !important;
    border-top: 1px solid var(--card-border) !important;
    display: flex !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.chatbot-sidebar-footer input {
    flex: 1 !important;
    background: var(--surface-tint) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-color) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    height: 34px !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.chatbot-sidebar-footer button {
    background: transparent !important;
    border: 1px solid var(--accent-teal) !important;
    color: var(--accent-teal) !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    height: 34px !important;
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.chatbot-sidebar-footer button:hover {
    background: var(--accent-teal) !important;
    color: var(--card-bg) !important;
}

/* Bong bóng chat tin nhắn */
.chatbot-msg {
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    max-width: 85% !important;
    box-sizing: border-box !important;
}

.chatbot-msg.ai {
    align-self: flex-start !important;
    background: rgba(20, 184, 166, 0.08) !important;
    border: 1px solid rgba(20, 184, 166, 0.15) !important;
    color: var(--text-color) !important;
}

.chatbot-msg.user {
    align-self: flex-end !important;
    background: var(--surface-tint) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-color) !important;
}

/* CSS cho tab-pane trong detail-modal */
.detail-tab-pane {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.detail-tab-pane.hidden {
    display: none !important;
}

/* ==========================================================================
   GLOBAL RADIUS TOKENS (blueprint: card 12px / button 6px)
   ========================================================================== */
/* Phần tử nhỏ: nút, input, badge, tab, ô — radius-btn (6px) */
.btn,
.btn *,
.nav-item,
.nav-item *,
.bottom-capsule-navbar *,
input,
select,
textarea,
.badge,
.settings-tab-btn,
th,
td,
tr,
.chatbot-sidebar-footer *,
.chatbot-msg,
.detail-tab-btn,
.detail-tab-nav button {
    border-radius: var(--radius-btn) !important;
}

/* Bề mặt lớn: card, console, panel, bảng — radius-card (12px) */
.bottom-capsule-navbar,
.invoice-card,
.settings-sidebar,
.settings-content,
.match-card,
.marquee-arena-wrapper,
.sourcing-console-container,
.contact-console-container,
.negotiate-console-container,
.logistics-console-container,
.finance-desk-container,
.settings-inline-container,
table,
.card,
.modal-chatbot-sidebar {
    border-radius: var(--radius-card) !important;
}

/* Ngoại trừ các biểu tượng thông báo/avatar dạng tròn đặc biệt được định nghĩa cụ thể */
.status-indicator,
.notification-dot,
.user-status-dot,
.sensor-pulse {
    border-radius: 50% !important;
}

/* ==========================================================================
   PREMIUM CUSTOM ACTION BUTTONS FOR NEGOTIATION FOOTER
   ========================================================================== */
.settings-footer-inline .btn-minimal-iconic {
    padding: 10px 24px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-btn) !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    height: 38px !important;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.settings-footer-inline .btn-minimal-iconic i {
    width: 14px !important;
    height: 14px !important;
}

#btnCounterProposal {
    background: var(--surface-tint) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--text-muted) !important;
}

#btnCounterProposal:hover {
    background: var(--surface-tint) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1) !important;
}

#btnAcceptDeal {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: 1px solid #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important;
}

#btnAcceptDeal:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border-color: #047857 !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.45) !important;
}

#btnDirectChat {
    background: rgba(127, 186, 115, 0.05) !important;
    border: 1px solid rgba(127, 186, 115, 0.25) !important;
    color: #7FBA73 !important;
    box-shadow: 0 4px 12px rgba(127, 186, 115, 0.1) !important;
}

#btnDirectChat:hover {
    background: #7FBA73 !important;
    border-color: #7FBA73 !important;
    color: #000000 !important;
    box-shadow: 0 0 20px rgba(127, 186, 115, 0.4) !important;
}

/* CTA "Duyệt & Ký PO" — Wattle Gold canonical (blueprint primary CTA) */
#btnSignContract {
    background: var(--accent-gold) !important;
    border: 1px solid var(--accent-gold) !important;
    color: var(--bixso-forest) !important;
    box-shadow: 0 4px 14px var(--accent-gold-glow) !important;
}

#btnSignContract:hover {
    background: #F0B81F !important;
    border-color: #F0B81F !important;
    color: var(--bixso-forest) !important;
    box-shadow: 0 6px 20px var(--accent-gold-glow) !important;
}

#btnViewContract:hover {
    background: rgba(127, 186, 115, 0.15) !important;
    border-color: var(--accent-teal) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(127, 186, 115, 0.25) !important;
}

/* ==========================================================================
   NEW FINANCE DESK TABBED LAYOUT & CALCULATOR
   ========================================================================== */
.finance-tab-btn {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.finance-tab-btn:hover {
    color: var(--text-color) !important;
    background: var(--surface-tint) !important;
}
.finance-tab-btn.active {
    color: var(--text-color) !important;
    border-bottom-color: var(--accent-teal) !important;
}

.finance-tab-pane {
    display: none;
    height: 100%;
}
.finance-tab-pane.active {
    display: flex;
}
#financeTabProfit.finance-tab-pane.active {
    display: grid;
}

/* Hide spin buttons for sandbox calculator inputs */
#financeTabProfit input[type="number"]::-webkit-outer-spin-button,
#financeTabProfit input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#financeTabProfit input[type="number"] {
    -moz-appearance: textfield;
}

.invoice-card {
    border-radius: var(--radius-btn) !important;
}

.invoice-status-badge {
    border-radius: var(--radius-btn) !important;
}

.btn-release-escrow {
    border-radius: var(--radius-btn) !important;
}

/* ==========================================================================
   NEW BUSINESS HUB CSS STYLE
   ========================================================================== */
.business-tab-btn {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.business-tab-btn:hover {
    color: var(--text-color) !important;
    background: var(--surface-tint) !important;
}
.business-tab-btn.active {
    color: var(--text-color) !important;
    border-bottom-color: var(--accent-teal) !important;
}

.business-tab-pane {
    display: none;
    height: 100%;
}
.business-tab-pane.active {
    display: flex;
}
#businessTabOverview.business-tab-pane.active {
    display: grid;
}
#businessTabStrategy.business-tab-pane.active {
    display: grid;
}

/* ── Business Overview: KPI cards ── */
.biz-kpi-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: border-color 0.2s ease;
}
.biz-kpi-card:hover {
    border-color: var(--card-border-hover);
}
.biz-kpi-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.biz-kpi-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
}
.biz-kpi-value {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-mono);
    line-height: 1;
}

/* ── Business Overview: chart cards ── */
.biz-chart-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
}
.biz-chart-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-color);
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 6px;
    flex-shrink: 0;
}
.biz-chart-body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Business Model Canvas cell styling */
.bmc-cell {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    transition: all 0.2s ease-in-out;
}
.bmc-cell:hover {
    border-color: var(--accent-teal) !important;
    box-shadow: 0 4px 12px rgba(127, 186, 115, 0.03);
}
.bmc-input {
    background: transparent;
    border: none;
    color: var(--text-color);
    font-family: inherit;
    font-size: 11px;
    line-height: 1.4;
    outline: none;
    resize: none;
    width: 100%;
}
.btn-bmc-suggest {
    transition: transform 0.2s ease;
}
.btn-bmc-suggest:hover {
    transform: scale(1.15);
    color: var(--accent-emerald) !important;
}

/* SWOT styling */
.swot-box {
    transition: all 0.2s ease;
}
.swot-box textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 11px;
    outline: none;
    resize: none;
    font-family: inherit;
    line-height: 1.4;
}

/* Document Template items hover */
.strategy-doc-item {
    transition: all 0.2s ease;
}
.strategy-doc-item:hover {
    background: var(--surface-tint) !important;
    border-color: var(--accent-teal) !important;
}

/* AI Action recommendation item */
.action-plan-card {
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}
.action-plan-card:hover {
    background: var(--surface-tint);
    border-color: var(--accent-emerald);
}

/* Sharp Edges overrides for Business Page elements */
#viewBusiness *, #modalBmcChat *, #modalConfig * {
    border-radius: var(--radius-btn) !important;
}

/* Header Settings button transition */
#btnHeaderSettings {
    transition: all 0.2s ease;
}
#btnHeaderSettings:hover {
    color: var(--text-color) !important;
    background: var(--surface-tint);
}

/* ==========================================================================
   BIXSourcing GLOBAL SHARP EDGES & ROLE THEME OVERRIDES
   ========================================================================== */
/* Nút & input trong view dùng radius-btn (6px); minimal-card dùng radius-card (12px) */
.bottom-capsule-navbar *,
.btn,
.btn *,
input,
select,
textarea,
button {
    border-radius: var(--radius-btn) !important;
}
.minimal-card {
    border-radius: var(--radius-card) !important;
}

/* Đảm bảo các chấm tròn timeline, icon hoặc avatar vẫn tròn */
.timeline-circle,
.theme-toggle,
.avatar,
.user-avatar,
.profile-avatar,
.rounded-full {
    border-radius: 50% !important;
}

/* Khai báo màu cho Buyer Mode (Electric Blue) & Seller Mode (Emerald) */
:root {
    --accent-sapphire: #60A5FA;              /* buyer dark: blue-400, rõ trên nền đen */
    --accent-sapphire-glow: rgba(96, 165, 250, 0.15);
    --accent-seller: #34D399;               /* seller dark: emerald-400, khác sage vàng-xanh */
    --accent-seller-glow: rgba(52, 211, 153, 0.14);
}
[data-theme="light"] {
    --accent-sapphire: #1D4ED8;             /* buyer light: blue-700, đọc rõ trên nền trắng */
    --accent-sapphire-glow: rgba(29, 78, 216, 0.15);
    --accent-seller: #059669;               /* seller light: emerald-600 */
    --accent-seller-glow: rgba(5, 150, 105, 0.14);
}

/* Buyer Mode — Electric Blue: rõ trên nền tối, phân biệt rõ với Seller/Default */
html.role-buyer {
    --accent-teal: var(--accent-sapphire);
    --accent-teal-glow: var(--accent-sapphire-glow);
    --accent-emerald: var(--accent-sapphire);       /* chặn seller green lọt qua */
}

html.role-buyer .business-tab-btn.active,
html.role-buyer .finance-tab-btn.active,
html.role-buyer .settings-tab-btn.active {
    border-bottom-color: var(--accent-sapphire) !important;
}

/* Seller Mode — Emerald Green: tươi sáng, khác sage vàng-xanh của default */
html.role-seller {
    --accent-teal: var(--accent-seller);
    --accent-teal-glow: var(--accent-seller-glow);
    --accent-emerald: var(--accent-seller);
}
html.role-seller .business-tab-btn.active,
html.role-seller .finance-tab-btn.active,
html.role-seller .settings-tab-btn.active {
    border-bottom-color: var(--accent-seller) !important;
}

/* Thêm class view-header-bar đồng bộ tiêu đề cho các trang */
.view-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 19px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Home header bar — less bottom margin to reduce dead space above card rows */
.home-header-bar {
    margin-bottom: 8px !important;
}

.view-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.view-title-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.view-title-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-title-trigger h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.view-title-trigger i {
    font-size: 16px;
    color: var(--text-muted);
}

.view-header-desc {
    font-size: 13px;
    color: var(--text-muted);
    border-left: 1px solid var(--card-border);
    padding-left: 16px;
    height: 20px;
    display: flex;
    align-items: center;
}

.view-actions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: rgba(18, 24, 38, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
    z-index: 110;
    width: 220px;
    padding: 6px 0;
    transform-origin: top;
}

/* ==========================================================================
   Matching Feature Panel (slide-in drawer)
   ========================================================================== */
.mp-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 298;
    animation: mpFadeIn 0.2s ease;
}
@keyframes mpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpSlideUp { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }

.matching-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    z-index: 299;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.7);
    animation: mpSlideUp 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.matching-panel.hidden {
    display: none;
}
.mp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--card-border);
    flex-shrink: 0;
}
.mp-close-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.mp-close-btn:hover { background: var(--card-border); color: var(--text-color); }

.mp-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 80px;
}
.mp-body::-webkit-scrollbar { width: 4px; }
.mp-body::-webkit-scrollbar-track { background: transparent; }
.mp-body::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 2px; }

/* Panel list items */
.mp-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: rgba(255,255,255,0.03);
    margin-bottom: 8px;
    cursor: default;
    transition: background 0.15s;
}
.mp-item:hover { background: rgba(255,255,255,0.06); }
.mp-item-thumb {
    width: 44px; height: 44px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--card-border);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    color: var(--text-muted);
}
.mp-item-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.mp-item-body { flex: 1; min-width: 0; }
.mp-item-name { font-size: 12px; font-weight: 600; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-item-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.mp-item-meta { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.mp-badge { font-size: 9px; padding: 1px 7px; border-radius: 4px; font-weight: 700; }
.mp-badge-green { background: rgba(16,185,129,0.18); color: #10b981; }
.mp-badge-teal  { background: rgba(20,184,166,0.18); color: #14b8a6; }
.mp-badge-gold  { background: rgba(245,158,11,0.18); color: #f59e0b; }
.mp-badge-red   { background: rgba(239,68,68,0.18);  color: #ef4444; }
.mp-badge-muted { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.mp-item-action {
    background: transparent; border: 1px solid var(--card-border);
    border-radius: 5px; color: var(--text-muted); font-size: 10px;
    padding: 3px 8px; cursor: pointer; transition: all 0.15s; white-space: nowrap; flex-shrink: 0;
}
.mp-item-action:hover { border-color: var(--accent-emerald); color: var(--accent-emerald); }
.mp-item-action.active-pin { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,0.1); }

/* Threshold slider panel */
.mp-threshold-wrap { padding: 8px 0 16px; }
.mp-threshold-num { font-size: 36px; font-weight: 800; color: var(--accent-emerald); text-align: center; line-height: 1; margin-bottom: 4px; }
.mp-threshold-label { font-size: 11px; color: var(--text-muted); text-align: center; margin-bottom: 16px; }
.mp-slider { width: 100%; accent-color: var(--accent-emerald); cursor: pointer; }
.mp-threshold-ticks { display: flex; justify-content: space-between; font-size: 9px; color: var(--text-muted); margin-top: 4px; }
.mp-apply-btn {
    width: 100%; margin-top: 14px;
    padding: 9px; border-radius: 7px;
    background: var(--accent-emerald); color: #fff;
    border: none; font-size: 12px; font-weight: 700; cursor: pointer;
    transition: opacity 0.15s;
}
.mp-apply-btn:hover { opacity: 0.85; }

/* Card Density picker */
.density-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 8px; }
.density-opt {
    border: 2px solid var(--card-border);
    border-radius: 8px; padding: 12px 6px; cursor: pointer;
    text-align: center; transition: all 0.15s; background: rgba(255,255,255,0.03);
}
.density-opt:hover { border-color: var(--accent-emerald); }
.density-opt.active { border-color: var(--accent-emerald); background: rgba(16,185,129,0.1); }
.density-opt-icon { font-size: 22px; display: block; margin-bottom: 5px; }
.density-opt-label { font-size: 10px; font-weight: 700; color: var(--text-muted); }
.density-opt.active .density-opt-label { color: var(--accent-emerald); }

/* Saved matches panel */
.mp-match-pair {
    border: 1px solid var(--card-border); border-radius: 8px;
    padding: 10px 12px; margin-bottom: 8px;
    background: rgba(255,255,255,0.03);
}
.mp-match-pair-row { display: flex; align-items: center; gap: 8px; }
.mp-match-arrow { color: var(--text-muted); font-size: 12px; }
.mp-match-company { font-size: 11px; font-weight: 600; color: var(--text-color); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-match-score { font-size: 11px; font-weight: 800; color: var(--accent-emerald); flex-shrink: 0; }
.mp-match-sub { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.mp-match-actions { display: flex; gap: 6px; margin-top: 8px; }
.mp-match-act-btn {
    flex: 1; padding: 5px; border-radius: 5px; font-size: 10px; font-weight: 600;
    border: 1px solid var(--card-border); background: transparent; color: var(--text-muted);
    cursor: pointer; transition: all 0.15s;
}
.mp-match-act-btn:hover { border-color: var(--accent-emerald); color: var(--accent-emerald); }
.mp-match-act-btn.danger:hover { border-color: #ef4444; color: #ef4444; }

/* Conversion stats */
.mp-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.mp-stat-card {
    background: rgba(255,255,255,0.04); border: 1px solid var(--card-border);
    border-radius: 8px; padding: 12px; text-align: center;
}
.mp-stat-num { font-size: 26px; font-weight: 800; color: var(--accent-emerald); line-height: 1; }
.mp-stat-lbl { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
.mp-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mp-bar-label { font-size: 10px; color: var(--text-muted); width: 80px; flex-shrink: 0; }
.mp-bar-track { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.mp-bar-fill { height: 100%; border-radius: 3px; background: var(--accent-emerald); }
.mp-bar-val { font-size: 10px; font-weight: 700; color: var(--text-color); width: 30px; text-align: right; flex-shrink: 0; }

/* Empty state */
.mp-empty { text-align: center; padding: 32px 16px; }
.mp-empty-icon { font-size: 36px; margin-bottom: 10px; opacity: 0.4; }
.mp-empty-text { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* Focus mode */
.matching-arena.home-focus-mode .home-header-bar,
.matching-arena.home-focus-mode .category-search-row,
.matching-arena.home-focus-mode + div > #btnBottomRowSettings { display: none !important; }
.focus-exit-btn {
    position: fixed; top: 12px; right: 16px; z-index: 310;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 7px;
    background: rgba(20,20,30,0.9); border: 1px solid var(--card-border);
    color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer;
    transition: all 0.15s;
}
.focus-exit-btn:hover { border-color: var(--accent-emerald); color: var(--accent-emerald); }

/* Card density variants */
.card-density-compact .match-card { min-width: 140px !important; max-width: 140px !important; }
.card-density-compact .match-card .company-info { font-size: 10px !important; }
.card-density-wide .match-card { min-width: 260px !important; max-width: 260px !important; }

/* Section divider in panel */
.mp-section-label {
    font-size: 9px; font-weight: 800; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--text-muted);
    padding: 10px 0 5px; border-bottom: 1px solid var(--card-border);
    margin-bottom: 8px;
}

/* Panel form elements */
.mp-input {
    width: 100%; padding: 8px 10px;
    background: var(--input-bg, var(--surface-tint));
    border: 1px solid var(--card-border);
    border-radius: 6px; color: var(--text-color);
    font-size: 12px; outline: none;
    transition: border-color 0.15s;
}
.mp-input:focus { border-color: var(--accent-teal); }
.mp-input-sm {
    width: 64px; padding: 5px 8px;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 6px; color: var(--text-color);
    font-size: 12px; outline: none; text-align: right;
}
.mp-select {
    width: 100%; padding: 8px 10px;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 6px; color: var(--text-color);
    font-size: 12px; outline: none; cursor: pointer;
}
.mp-checkbox-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.mp-checkbox-item {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; color: var(--text-color);
    cursor: pointer; padding: 4px 0;
}
.mp-checkbox-item input { accent-color: var(--accent-teal); cursor: pointer; }
.mp-row-between {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--text-color);
}
.mp-hint { flex: 1; color: var(--text-muted); font-size: 11px; }
.mp-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; color: var(--text-color); cursor: pointer;
    padding: 4px 0;
}
.mp-toggle { accent-color: var(--accent-teal); width: 16px; height: 16px; cursor: pointer; }
.mp-ai-cta {
    display: block; width: 100%; margin-top: 18px;
    padding: 10px; text-align: center;
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-emerald));
    border: none; border-radius: 8px; color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: opacity 0.15s;
}
.mp-ai-cta:hover { opacity: 0.88; }
.mp-save-cta {
    display: block; width: 100%; margin-top: 18px;
    padding: 10px; text-align: center;
    background: var(--surface-tint);
    border: 1px solid var(--card-border); border-radius: 8px;
    color: var(--text-color); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.mp-save-cta:hover { background: var(--card-bg); border-color: var(--accent-teal); }
.mp-tag-grid {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px;
}
.mp-tag-chip {
    font-size: 11px; padding: 3px 10px;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: 20px; color: var(--text-color);
    cursor: default; transition: background 0.15s, border-color 0.15s;
}
.mp-tag-chip:hover { background: var(--card-bg); border-color: var(--accent-teal); }

/* Home dropdown section labels */
.home-dd-section-label {
    font-size: 10px;
    color: var(--text-muted);
    padding: 8px 16px 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 2px;
    margin-top: 4px;
}
.home-dd-section-label:first-child {
    margin-top: 0;
}

/* 3-item action dropdown */
.home-dd-action {
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background var(--transition-fast);
    border-radius: 0;
}
.home-dd-action:hover {
    background: var(--surface-tint);
}
.home-dd-action + .home-dd-action {
    border-top: 1px solid var(--card-border);
}
.dd-ai-badge {
    font-size: 9px;
    background: var(--accent-emerald);
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
    margin-left: auto;
    flex-shrink: 0;
}

/* ==========================================================================
   Slide-out Inline Search & Category Row (Bixsourcing Design System)
   ========================================================================== */
.category-search-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
}

/* Bottom Row Settings — nằm trong luồng, ngay dưới khối marquee co giãn.
   Bỏ hack margin-top:-115px (gắn cứng với gap:112px) vốn làm nút đè lên hàng card
   và chui sau navbar trên màn hình thấp. */
/* Đặt absolute ngay dưới hàng card dưới (containerRowBottom là position:relative).
   Ra khỏi luồng để KHÔNG làm lệch tâm căn giữa của trục match giữa 2 hàng,
   nhưng vẫn bám sát hàng dưới ở mọi chiều cao viewport. */
.btn-bottom-row-wrapper {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 10px;
    z-index: 10;
}

#btnBottomRowSettings {
    font-size: 10px;
    padding: 5px 12px;
    border-radius: var(--radius-btn) !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-color: var(--card-border) !important;
    background: var(--surface-tint) !important;
    color: var(--text-muted) !important;
    opacity: 0.85;
    transition: all 0.2s;
}
#btnBottomRowSettings:hover {
    background: var(--card-bg) !important;
    border-color: var(--accent-teal) !important;
    color: var(--text-color) !important;
    opacity: 1;
}

.search-inline-wrapper {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.search-inline-input {
    width: 0px;
    opacity: 0;
    pointer-events: none;
    padding: 0 !important;
    height: 34px !important;
    background: rgba(22, 27, 38, 0.8) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-btn) !important; /* Sharp Edges */
    color: var(--text-color) !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.search-inline-wrapper.active .search-inline-input {
    width: 220px;
    opacity: 1;
    pointer-events: auto;
    padding: 0 12px !important;
    margin-right: 8px !important;
    border: 1px solid var(--card-border) !important;
}

.search-inline-wrapper .row-search-btn {
    border-radius: var(--radius-btn) !important; /* Sharp Edges */
    height: 34px !important;
    width: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    background: var(--surface-tint) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
}

.search-inline-wrapper .row-search-btn:hover {
    background: var(--surface-tint) !important;
    color: var(--text-color) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Đảm bảo responsive cho các màn hình nhỏ */
@media (max-width: 600px) {
    .category-search-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .search-inline-wrapper {
        width: 100% !important;
    }
    .search-inline-wrapper.active .search-inline-input {
        width: calc(100% - 42px) !important;
        flex-grow: 1 !important;
    }
}

/* ==========================================================================
   Glowing Funds Flow System (Bixsourcing Premium UI)
   ========================================================================== */
.funds-flow-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.flow-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 6 5;
    animation: fundsFlowAnim 1.2s linear infinite;
    opacity: 0.65;
    transition: stroke-dasharray 0.3s, animation-duration 0.3s, opacity 0.3s;
}

.flow-line.fast-flow {
    animation-duration: 0.3s !important;
    stroke-dasharray: 4 3 !important;
    opacity: 1 !important;
}

@keyframes fundsFlowAnim {
    to {
        stroke-dashoffset: -22;
    }
}

/* AI Terminal Glassmorphism Bubble Logs */
.ai-advisor-bubble {
    background: var(--surface-tint) !important;
    border: 1px solid var(--card-border) !important;
    padding: 10px 12px !important;
    border-radius: var(--radius-btn) !important; /* Sharp Edges */
    margin-bottom: 8px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    transition: all 0.3s ease !important;
}

.ai-advisor-bubble.info-bubble {
    border-left: 2px solid var(--accent-teal) !important;
}

.ai-advisor-bubble.success-bubble {
    border-left: 2px solid var(--accent-emerald) !important;
    background: rgba(16, 185, 129, 0.01) !important;
}

.ai-advisor-bubble.warn-bubble {
    border-left: 2px solid var(--accent-orange) !important;
    background: rgba(249, 115, 22, 0.01) !important;
}

.ai-advisor-bubble.simulation-bubble {
    border-left: 2px solid #a855f7 !important; /* Màu tím Simulation */
    background: rgba(168, 85, 247, 0.02) !important;
    font-family: var(--font-mono) !important;
    border-style: dashed !important;
}

.pulse-glow-indicator {
    width: 6px;
    height: 6px;
    background-color: var(--accent-emerald);
    border-radius: 50% !important; /* Đèn tròn đặc trưng */
    display: inline-block;
    box-shadow: 0 0 8px var(--accent-emerald);
    animation: terminalPulse 2s infinite ease-in-out;
}

@keyframes terminalPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
        box-shadow: 0 0 12px var(--accent-emerald);
    }
}

@keyframes blink-text {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

/* AI SWOT Grid & Progress Bars in Strategy Tab */
.swot-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.swot-card {
    padding: 8px 10px;
    background: rgba(22, 27, 38, 0.4);
    border: 1px solid var(--card-border);
    transition: all 0.3s ease;
}

.swot-card.strength {
    border-left: 3px solid var(--accent-emerald) !important;
    background: rgba(16, 185, 129, 0.02) !important;
}
.swot-card.strength .swot-title {
    color: var(--accent-emerald) !important;
    font-weight: 600;
}

.swot-card.weakness {
    border-left: 3px solid var(--accent-orange) !important;
    background: rgba(249, 115, 22, 0.02) !important;
}
.swot-card.weakness .swot-title {
    color: var(--accent-orange) !important;
    font-weight: 600;
}

.swot-card.opportunity {
    border-left: 3px solid var(--accent-teal) !important;
    background: rgba(127, 186, 115, 0.02) !important;
}
.swot-card.opportunity .swot-title {
    color: var(--accent-teal) !important;
    font-weight: 600;
}

.swot-card.threat {
    border-left: 3px solid var(--accent-red) !important;
    background: rgba(244, 63, 94, 0.02) !important;
}
.swot-card.threat .swot-title {
    color: var(--accent-red) !important;
    font-weight: 600;
}

.swot-title {
    font-size: 9px;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.swot-text {
    font-size: 9px;
    color: var(--text-muted);
    line-height: 1.35;
}

.strategy-progress-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    background: rgba(22, 27, 38, 0.3);
    padding: 10px;
    border: 1px solid var(--card-border);
}

.strategy-progress-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.strategy-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    font-family: var(--font-mono);
}

.strategy-progress-bg {
    height: 4px;
    background: var(--surface-tint);
    position: relative;
    overflow: hidden;
}

.strategy-progress-fill {
    height: 100%;
    transition: width 0.5s ease-out;
}

.strategy-progress-fill.teal {
    background: var(--accent-teal);
    box-shadow: 0 0 6px var(--accent-teal);
}

.strategy-progress-fill.emerald {
    background: var(--accent-emerald);
    box-shadow: 0 0 6px var(--accent-emerald);
}

.strategy-progress-fill.orange {
    background: var(--accent-orange);
    box-shadow: 0 0 6px var(--accent-orange);
}

.strategy-progress-fill.sky {
    background: #7FBA73;
    box-shadow: 0 0 6px #7FBA73;
}

.strategy-ai-rec-box {
    background: rgba(22, 27, 38, 0.3);
    border-left: 2px solid var(--accent-teal);
    padding: 8px 10px;
    font-style: italic;
    color: var(--text-muted);
    font-size: 9.5px;
    line-height: 1.45;
}

/* Map hover nodes */
.map-node {
    transition: r 0.2s, stroke-width 0.2s;
}
.map-node:hover {
    r: 7.5px !important;
    stroke: #ffffff !important;
    stroke-width: 2px !important;
    filter: drop-shadow(0 0 6px var(--accent-teal));
}

/* Card Style Nền Trong & Category Tabs Bo Tròn */
#viewFinance .minimal-card,
#viewBusiness .minimal-card,
#viewFinance .premium-card-item,
#viewBusiness .premium-card-item,
#viewFinance .bmc-cell-new,
#viewBusiness .bmc-cell-new {
    background: var(--surface-tint) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: none !important;
}

.category-menu-horizontal .category-item,
.category-menu-horizontal .category-item * {
    border-radius: 4px !important;
}

/* Kraljic Matrix Typography and Lines */
.kraljic-axis-title {
    font-size: 8px;
    font-family: var(--font-mono);
    fill: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.kraljic-cell-title {
    font-size: 7.5px;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.kraljic-arrow-line {
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 1;
    fill: none;
}

/* ==========================================================================
   GENERAL RADIUS TOKENS (AGENTS.MD ALIGNMENT — non-modal components)
   Modal đã có canonical riêng ở đầu file ("BIXSOURCING MODAL DESIGN SYSTEM").
   Card lớn (.card/.minimal-card) dùng --radius-card, khai báo ở khối token tổng.
   ========================================================================== */
input, select, textarea, button, .btn,
.badge, .tag, .category-item,
.step-node, .step-progress-line, .tab-item {
    border-radius: var(--radius-btn) !important;
}

/* ==========================================================================
   MODAL INLINE EDIT PATTERN — seamless in-place form editing within detail modals
   Cấu trúc: .modal-edit-pane (ẩn mặc định) → breadcrumb nav + scrollable form body
   + .modal-edit-footer (ẩn mặc định). JS bật bằng classList.remove('hidden')
   đồng thời ẩn .modal-body và .modal-footer (view mode).
   ========================================================================== */

/* Edit pane container: takes place of modal-body when shown */
.modal-edit-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 0;
}

/* Breadcrumb nav at top of edit pane */
.modal-edit-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px 12px;
    border-bottom: 1px solid var(--card-border);
    flex-shrink: 0;
}
.modal-edit-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px 4px 0;
    border-radius: var(--radius-btn) !important;
    transition: color var(--transition-fast);
    font-family: var(--font-body);
    letter-spacing: 0;
    text-transform: none;
}
.modal-edit-back-btn:hover { color: var(--accent-teal); }
.modal-edit-breadcrumb-divider {
    color: var(--text-muted);
    font-size: 13px;
    opacity: 0.4;
}
.modal-edit-breadcrumb-name {
    font-size: 13px;
    color: var(--text-color);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

/* Scrollable form body inside edit pane */
.modal-edit-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}
.modal-edit-body .input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.modal-edit-body .input-row {
    display: flex;
    gap: 14px;
}
.modal-edit-body .input-row .input-group { flex: 1; }
.modal-edit-body label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: block;
}
.modal-edit-body input,
.modal-edit-body select,
.modal-edit-body textarea {
    width: 100%;
    padding: 9px 12px;
    background: var(--surface-tint);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    color: var(--text-color);
    font-size: 13px;
    font-family: var(--font-body);
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.modal-edit-body input:focus,
.modal-edit-body select:focus,
.modal-edit-body textarea:focus {
    outline: none;
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 2px var(--accent-teal-glow);
}
.modal-edit-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--card-border);
}

/* Edit footer: save/cancel — same height as standard .modal-footer */
.modal-edit-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 14px 24px;
    border-top: 1px solid var(--card-border);
    flex-shrink: 0;
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Matching Setup mini-manager (#modalBottomRowSettings)
   ══════════════════════════════════════════════════════════════════════════ */
.brs-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}
.brs-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    background: var(--surface-tint);
    transition: opacity 0.18s, border-color 0.18s;
}
.brs-item.brs-item-off {
    opacity: 0.5;
}
.brs-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.brs-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.brs-sku {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-teal);
    background: color-mix(in srgb, var(--accent-teal) 12%, transparent);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.brs-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brs-item-edit {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 8px;
}
.brs-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.brs-field label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}
.brs-field input,
.brs-field select {
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    padding: 6px 8px;
    color: var(--text-color);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-btn) !important;
    font-family: var(--font-body);
}
.brs-field input:focus,
.brs-field select:focus {
    outline: none;
    border-color: var(--accent-teal);
}
/* Toggle switch */
.brs-toggle {
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    margin-top: 2px;
}
.brs-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.brs-toggle-track {
    display: block;
    width: 34px;
    height: 20px;
    border-radius: 10px;
    background: var(--card-border);
    transition: background 0.18s;
    position: relative;
}
.brs-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.18s;
}
.brs-toggle input:checked + .brs-toggle-track {
    background: var(--accent-teal);
}
.brs-toggle input:checked + .brs-toggle-track .brs-toggle-thumb {
    transform: translateX(14px);
}




/* ==========================================================================
   LANDING — STICKY NAV (logo + links + auth buttons)
   ========================================================================== */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 200;
    width: 100%;
    background: color-mix(in srgb, var(--bg-color, #0a0e14) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--card-border);
}
.landing-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.landing-nav .logo {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    flex-shrink: 0;
}
.landing-nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: 24px;
    flex: 1;
}
.landing-nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color var(--transition-normal);
}
.landing-nav-links a:hover { color: var(--text-color); }
.landing-nav .header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.btn-nav-login {
    padding: 9px 18px !important;
    font-size: 14px !important;
}
.btn-nav-register {
    padding: 10px 20px !important;
    font-size: 14px !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.btn-nav-register i { width: 15px; height: 15px; }
@media (max-width: 860px) {
    .landing-nav-links { display: none; }
    .landing-nav-inner { padding: 12px 18px; }
}

/* ==========================================================================
   LANDING — SOCIAL PROOF / STATS BAND
   ========================================================================== */
.landing-stats-band {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    padding: 36px 40px;
    border: 1px solid var(--card-border);
    border-radius: 20px;
    background: var(--card-bg);
}
.landing-stats-band .stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}
.landing-stats-band .stat-num {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 400;
    line-height: 1;
    color: var(--accent-teal);
}
.landing-stats-band .stat-label {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-muted);
}
.landing-stats-band .stat-divider {
    width: 1px;
    background: var(--card-border);
    flex: 0 0 1px;
}
@media (max-width: 760px) {
    .landing-stats-band { flex-wrap: wrap; padding: 24px; }
    .landing-stats-band .stat-item { flex: 1 1 40%; }
    .landing-stats-band .stat-divider { display: none; }
}

/* ==========================================================================
   LANDING — USE CASES
   ========================================================================== */
.usecase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 1100px;
}
.usecase-card {
    padding: 26px 22px;
    text-align: left;
}
.usecase-card:hover {
    border-color: var(--card-border-hover);
    background: var(--card-bg-hover);
}
.usecase-icon {
    color: var(--accent-teal);
    width: 30px;
    height: 30px;
    margin-bottom: 16px;
}
.usecase-card h3 {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 10px;
}
.usecase-card p {
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.55;
}
@media (max-width: 900px) {
    .usecase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .usecase-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LANDING — FAQ
   ========================================================================== */
.faq-section { align-items: center; }
.faq-list {
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: var(--card-bg);
    padding: 0 22px;
    transition: border-color var(--transition-normal), background var(--transition-normal);
}
.faq-item[open] {
    border-color: color-mix(in srgb, var(--card-border) 40%, var(--accent-teal) 45%);
    background: var(--card-bg-hover);
}
.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 0;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 22px;
    font-weight: 300;
    color: var(--accent-teal);
    line-height: 1;
    transition: transform var(--transition-normal);
    flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
    padding: 0 0 20px;
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.65;
}

/* ==========================================================================
   AUTH MODAL (Login / Register)
   ========================================================================== */
.auth-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: authFade 0.18s ease;
}
@keyframes authFade { from { opacity: 0; } to { opacity: 1; } }
.auth-modal-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--card-bg, #11161f);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 34px 34px 28px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.45);
    animation: authPop 0.2s cubic-bezier(0.16,1,0.3,1);
}
@keyframes authPop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.auth-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-modal-close:hover { background: var(--surface-tint); color: var(--text-color); }
.auth-modal-close i { width: 18px; height: 18px; }
.auth-modal-brand {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.auth-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-tint);
    border-radius: 12px;
    margin-bottom: 18px;
}
.auth-tab {
    flex: 1;
    padding: 9px 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    border-radius: 9px;
    cursor: pointer;
    transition: all var(--transition-normal);
}
.auth-tab.active {
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.auth-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.auth-error {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    color: #f87171;
    font-size: 12.5px;
    line-height: 1.45;
    padding: 10px 12px;
    border-radius: 9px;
    margin-bottom: 16px;
}
/* Override the older orphaned .btn-google-auth with a modal-fit version */
.auth-modal-card .btn-google-auth,
.btn-google-auth {
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    background: #fff;
    color: #1f1f1f;
    border: 1px solid #dadce0;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.btn-google-auth:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.18); transform: translateY(-1px); }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--text-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--card-border);
}
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.auth-field input {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--card-border);
    background: var(--surface-tint);
    color: var(--text-color);
    font-size: 14px;
    font-family: inherit;
    transition: border-color var(--transition-normal);
}
.auth-field input:focus {
    outline: none;
    border-color: var(--accent-teal);
}
.auth-submit {
    width: 100%;
    justify-content: center;
    padding: 13px 20px !important;
    font-size: 15px !important;
    margin-top: 4px;
}
.auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-switch-line {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: var(--text-muted);
}
.auth-switch-link {
    border: none;
    background: none;
    color: var(--accent-teal);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    padding: 0 0 0 4px;
}
.auth-switch-link:hover { text-decoration: underline; }

/* ==========================================================================
   LANDING PAGE SCROLL FIX
   The app shell forces .view-container to a fixed height with overflow:hidden
   (correct for the in-app views). The landing page is a long marketing page,
   so it needs its own full-height scroll container. ID specificity + !important
   overrides the shared .view-container rule for the landing only.
   ========================================================================== */
#viewLanding {
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    scroll-behavior: smooth;
}
#viewLanding .landing-main {
    padding-left: 24px;
    padding-right: 24px;
}

/* ==========================================================================
   ███  LANDING 2.0 — cinematic, animated, low-text marketing concept  ███
   Namespaced .bx-* so it never collides with the in-app UI.
   ========================================================================== */
/* Custom props live on #viewLanding so BOTH the sticky nav and the landing
   body (which are siblings, not nested) inherit them. */
#viewLanding {
    --bx-gold: #F5B82E;
    --bx-accent: var(--accent-teal);
    --bx-accent-2: var(--accent-emerald);
    --bx-buyer: #3B82F6;
    --bx-seller: #10B981;
    --bx-ink: var(--text-color);
    --bx-muted: var(--text-muted);
    --bx-card: color-mix(in srgb, var(--card-bg) 88%, transparent);
    --bx-border: var(--card-border);
    --bx-section-gap: 140px;
}
[data-theme="light"] #viewLanding { --bx-card: rgba(255,255,255,0.7); }
.bx-landing {
    font-family: var(--font-body, 'Inter', sans-serif);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bx-section-gap);
    padding-bottom: 0;
    width: 100%;
}

/* ---------- Reveal-on-scroll ---------- */
.bx-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.bx-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .bx-reveal { opacity: 1 !important; transform: none !important; transition: none; }
    .bx-orbit *, .bx-hero__aurora { animation: none !important; }
}

/* ---------- Shared bits ---------- */
.bx-grad {
    background: linear-gradient(100deg, var(--bx-accent), var(--bx-accent-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.bx-kicker {
    font-family: var(--font-mono, monospace);
    font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--bx-accent);
}
.bx-head { text-align: center; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.bx-h2 { font-family: var(--font-display); font-size: clamp(32px, 4.4vw, 56px); font-weight: 400; line-height: 1.04; letter-spacing: .5px; margin: 0; }
.bx-lead { color: var(--bx-muted); font-size: 17px; line-height: 1.6; margin: 0; max-width: 620px; }
.bx-section { width: 100%; max-width: 1120px; padding: 0 24px; display: flex; flex-direction: column; gap: 56px; align-items: center; box-sizing: border-box; }
.bx-section--narrow { max-width: 780px; }

/* ---------- Buttons ---------- */
.bx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-body, inherit); font-size: 14px; font-weight: 600;
    padding: 11px 20px; border-radius: 12px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: transform .2s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
}
.bx-btn i { width: 16px; height: 16px; }
.bx-btn--lg { padding: 15px 28px; font-size: 16px; border-radius: 14px; }
.bx-btn--gold { background: var(--bx-gold); color: #1a1205; box-shadow: 0 8px 24px rgba(245,184,46,.28); }
.bx-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(245,184,46,.4); }
.bx-btn--gold i { color: #1a1205; }
.bx-btn--ghost { background: transparent; color: var(--bx-ink); border-color: var(--bx-border); }
.bx-btn--ghost:hover { border-color: var(--bx-accent); color: var(--bx-accent); }
.bx-btn--glass { background: color-mix(in srgb, var(--bx-ink) 6%, transparent); color: var(--bx-ink); border-color: var(--bx-border); backdrop-filter: blur(8px); }
.bx-btn--glass:hover { transform: translateY(-2px); border-color: var(--bx-accent); }

/* ---------- NAV ---------- */
.bx-nav {
    position: sticky; top: 0; z-index: 200; width: 100%;
    background: color-mix(in srgb, var(--bg-color, #0a0e14) 78%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid color-mix(in srgb, var(--bx-border) 60%, transparent);
}
.bx-nav__inner { max-width: 1200px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 32px; }
.bx-nav__logo { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: var(--bx-ink); text-decoration: none; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.bx-nav__logo-icon { height: 26px; width: auto; display: block; }
.bx-nav__logo-text { display: inline-block; }
.bx-nav__links { display: flex; align-items: center; gap: 30px; flex: 1; }
.bx-nav__links a { color: var(--bx-muted); text-decoration: none; font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: color .2s; }
.bx-nav__links a:hover { color: var(--bx-ink); }
.bx-nav__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
@media (max-width: 880px) { .bx-nav__links { display: none; } }
@media (max-width: 460px) { #btnOpenLogin { display: none; } }

/* ---------- HERO ---------- */
.bx-hero {
    position: relative; width: 100%; min-height: 92vh;
    display: flex; align-items: center; justify-content: center; gap: 48px;
    max-width: 1200px; padding: 60px 24px 40px; box-sizing: border-box; overflow: hidden;
}
.bx-hero__content { position: relative; z-index: 2; max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.bx-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono, monospace); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; color: var(--bx-accent); padding: 7px 14px; border: 1px solid color-mix(in srgb, var(--bx-accent) 40%, transparent); border-radius: 99px; background: color-mix(in srgb, var(--bx-accent) 8%, transparent); }
.bx-eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bx-accent); box-shadow: 0 0 0 0 var(--bx-accent); animation: bxPulse 2s infinite; }
@keyframes bxPulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bx-accent) 60%,transparent);} 70%{box-shadow:0 0 0 8px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
.bx-hero__title { font-family: var(--font-display); font-size: clamp(44px, 6vw, 80px); font-weight: 400; line-height: .98; letter-spacing: .5px; margin: 0; }
.bx-hero__sub { color: var(--bx-muted); font-size: 18px; line-height: 1.6; margin: 0; max-width: 480px; }
.bx-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.bx-hero__trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.bx-hero__trust span { display: inline-flex; align-items: center; gap: 7px; color: var(--bx-muted); font-size: 13px; }
.bx-hero__trust i { width: 15px; height: 15px; color: var(--bx-accent); }

/* aurora + grid backdrop */
.bx-hero__aurora { position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: 0; filter: blur(60px); opacity: .5; pointer-events: none;
    background:
      radial-gradient(40% 50% at 20% 30%, color-mix(in srgb,var(--bx-accent) 55%,transparent), transparent 70%),
      radial-gradient(38% 46% at 78% 24%, color-mix(in srgb,var(--bx-buyer) 45%,transparent), transparent 70%),
      radial-gradient(45% 50% at 62% 80%, color-mix(in srgb,var(--bx-accent-2) 40%,transparent), transparent 72%);
    animation: bxAurora 18s ease-in-out infinite alternate;
}
@keyframes bxAurora { 0%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(3%,2%,0) scale(1.08);} 100%{transform:translate3d(-3%,-2%,0) scale(1.04);} }
.bx-hero__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
    background-image: linear-gradient(color-mix(in srgb,var(--bx-border) 90%,transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb,var(--bx-border) 90%,transparent) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 80%);
    mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 80%);
}

/* ---------- AI ORBIT VISUAL ---------- */
.bx-orbit { position: relative; z-index: 2; width: clamp(300px, 38vw, 440px); aspect-ratio: 1; flex-shrink: 0; display: grid; place-items: center; }
.bx-orbit__ring { position: absolute; border-radius: 50%; border: 1px solid color-mix(in srgb,var(--bx-accent) 30%,transparent); }
.bx-orbit__ring--1 { width: 38%; height: 38%; animation: bxSpin 24s linear infinite; }
.bx-orbit__ring--2 { width: 68%; height: 68%; border-style: dashed; border-color: color-mix(in srgb,var(--bx-accent) 18%,transparent); animation: bxSpin 40s linear infinite reverse; }
.bx-orbit__ring--3 { width: 100%; height: 100%; border-color: color-mix(in srgb,var(--bx-border) 80%,transparent); }
@keyframes bxSpin { to { transform: rotate(360deg); } }
.bx-orbit__core {
    position: absolute; z-index: 3; width: 30%; height: 30%; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--bx-accent) 30%,var(--card-bg)), var(--card-bg));
    border: 1px solid color-mix(in srgb,var(--bx-accent) 50%,transparent);
    box-shadow: 0 0 0 0 color-mix(in srgb,var(--bx-accent) 40%,transparent), 0 12px 40px color-mix(in srgb,var(--bx-accent) 25%,transparent);
    animation: bxCorePulse 3s ease-in-out infinite;
}
.bx-orbit__core i { width: 26px; height: 26px; color: var(--bx-accent); }
.bx-orbit__core span { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--bx-ink); }
@keyframes bxCorePulse { 0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bx-accent) 35%,transparent), 0 12px 40px color-mix(in srgb,var(--bx-accent) 20%,transparent);} 50%{box-shadow:0 0 0 14px transparent, 0 12px 50px color-mix(in srgb,var(--bx-accent) 35%,transparent);} }
.bx-orbit__node {
    position: absolute; z-index: 4; width: 50px; height: 50px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--bx-card); border: 1px solid var(--bx-border);
    backdrop-filter: blur(8px);
    transform: rotate(var(--a)) translateY(calc(clamp(300px,38vw,440px) / -2 + 25px)) rotate(calc(-1 * var(--a)));
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
    animation: bxNodeFloat 4s ease-in-out infinite;
}
.bx-orbit__node i { width: 20px; height: 20px; color: var(--bx-accent); }
.bx-orbit__node:nth-child(odd) { animation-delay: -2s; }
@keyframes bxNodeFloat { 0%,100%{ margin-top: 0; } 50%{ margin-top: -6px; } }

/* ---------- STATS ---------- */
.bx-stats { width: 100%; max-width: 1000px; margin: calc(var(--bx-section-gap) * -0.4) auto 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; padding: 0 24px; box-sizing: border-box; }
.bx-stat { background: var(--bx-card); border: 1px solid var(--bx-border); padding: 28px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bx-stat:first-child { border-radius: 18px 0 0 18px; }
.bx-stat:last-child { border-radius: 0 18px 18px 0; }
.bx-stat__num { font-family: var(--font-display); font-size: clamp(38px,4.5vw,52px); line-height: 1; color: var(--bx-accent); font-weight: 400; }
.bx-stat__label { font-size: 12.5px; line-height: 1.45; color: var(--bx-muted); }

/* ---------- PROBLEM → SOLUTION ---------- */
.bx-shift { width: 100%; max-width: 980px; padding: 0 24px; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.bx-shift__side { border-radius: 20px; padding: 30px; border: 1px solid var(--bx-border); background: var(--bx-card); }
.bx-shift__side--old { opacity: .82; }
.bx-shift__side--new { border-color: color-mix(in srgb,var(--bx-accent) 45%,transparent); box-shadow: 0 0 0 1px color-mix(in srgb,var(--bx-accent) 20%,transparent), 0 18px 50px color-mix(in srgb,var(--bx-accent) 12%,transparent); }
.bx-shift__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bx-muted); margin-bottom: 18px; }
.bx-shift__tag--new { color: var(--bx-accent); }
.bx-shift__side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bx-shift__side li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--bx-ink); }
.bx-shift__side li i { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
.bx-shift__side--old li i { color: #ef6b6b; }
.bx-shift__side--new li i { color: var(--bx-accent); }
.bx-shift__arrow { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--bx-gold); color: #1a1205; }
.bx-shift__arrow i { width: 22px; height: 22px; }

/* ---------- DUAL ROLE TOGGLE ---------- */
.bx-roles { width: 100%; max-width: 780px; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.bx-roles__switch { position: relative; display: inline-flex; padding: 5px; border-radius: 99px; background: var(--surface-tint); border: 1px solid var(--bx-border); }
.bx-roles__btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; cursor: pointer; padding: 11px 26px; border-radius: 99px; font-size: 15px; font-weight: 600; color: var(--bx-muted); transition: color .3s; }
.bx-roles__btn i { width: 17px; height: 17px; }
.bx-roles__btn.is-active { color: #fff; }
.bx-roles__pill { position: absolute; z-index: 1; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 99px; background: var(--bx-buyer); transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s; }
.bx-roles[data-role="seller"] .bx-roles__pill { transform: translateX(100%); background: var(--bx-seller); }
.bx-roles__panel { position: relative; width: 100%; border-radius: 22px; padding: 40px; box-sizing: border-box; border: 1px solid var(--bx-border); background: var(--bx-card); overflow: hidden; transition: border-color .4s, box-shadow .4s; }
.bx-roles[data-role="buyer"] .bx-roles__panel { border-color: color-mix(in srgb,var(--bx-buyer) 40%,transparent); box-shadow: 0 24px 60px color-mix(in srgb,var(--bx-buyer) 12%,transparent); }
.bx-roles[data-role="seller"] .bx-roles__panel { border-color: color-mix(in srgb,var(--bx-seller) 40%,transparent); box-shadow: 0 24px 60px color-mix(in srgb,var(--bx-seller) 12%,transparent); }
.bx-roles__pane { display: flex; flex-direction: column; gap: 16px; animation: bxFadeIn .4s ease; }
.bx-roles__pane[hidden] { display: none; }
.bx-roles__pane h3 { font-family: var(--font-display); font-size: 30px; font-weight: 400; margin: 0; }
.bx-roles__pane p { color: var(--bx-muted); font-size: 15.5px; line-height: 1.6; margin: 0; }
.bx-roles__pane b { color: var(--bx-ink); }
.bx-roles__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.bx-roles__chips span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 8px 14px; border-radius: 10px; background: var(--surface-tint); border: 1px solid var(--bx-border); color: var(--bx-ink); }
.bx-roles__chips i { width: 14px; height: 14px; color: var(--bx-accent); }
@keyframes bxFadeIn { from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }

/* ---------- 7-MODULE FLOW ---------- */
.bx-flow { position: relative; width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.bx-flow__line { position: absolute; top: 46px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb,var(--bx-accent) 60%,transparent), transparent); z-index: 0; }
.bx-flow__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 8px 4px; transition: transform .25s; }
.bx-flow__step:hover { transform: translateY(-6px); }
.bx-flow__step > i { width: 26px; height: 26px; color: var(--bx-accent); padding: 16px; border-radius: 16px; background: var(--bx-card); border: 1px solid var(--bx-border); box-sizing: content-box; }
.bx-flow__step:hover > i { border-color: var(--bx-accent); box-shadow: 0 10px 28px color-mix(in srgb,var(--bx-accent) 22%,transparent); }
.bx-flow__n { font-family: var(--font-mono,monospace); font-size: 11px; color: var(--bx-muted); letter-spacing: .1em; }
.bx-flow__step h4 { font-family: var(--font-heading); font-size: 14.5px; font-weight: 600; margin: 4px 0 0; }
.bx-flow__step p { font-size: 11.5px; line-height: 1.4; color: var(--bx-muted); margin: 0; }

/* ---------- WHY (bento) ---------- */
.bx-why { width: 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bx-why__card { grid-column: span 2; background: var(--bx-card); border: 1px solid var(--bx-border); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 12px; transition: transform .25s, border-color .25s, box-shadow .25s; }
.bx-why__card--wide { grid-column: span 3; }
.bx-why__card:hover { transform: translateY(-5px); border-color: color-mix(in srgb,var(--bx-accent) 45%,transparent); box-shadow: 0 18px 44px rgba(0,0,0,.22); }
.bx-why__card i { width: 28px; height: 28px; color: var(--bx-accent); }
.bx-why__card h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 500; margin: 6px 0 0; }
.bx-why__card p { color: var(--bx-muted); font-size: 14px; line-height: 1.55; margin: 0; }

/* ---------- FAQ ---------- */
.bx-faq { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.bx-faq__item { border: 1px solid var(--bx-border); border-radius: 14px; background: var(--bx-card); padding: 0 22px; transition: border-color .25s, background .25s; }
.bx-faq__item[open] { border-color: color-mix(in srgb,var(--bx-accent) 45%,transparent); }
.bx-faq__item summary { cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--font-heading); font-size: 16px; font-weight: 500; color: var(--bx-ink); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bx-faq__item summary::-webkit-details-marker { display: none; }
.bx-faq__item summary::after { content: '+'; font-size: 22px; font-weight: 300; color: var(--bx-accent); transition: transform .25s; flex-shrink: 0; }
.bx-faq__item[open] summary::after { transform: rotate(45deg); }
.bx-faq__item p { padding: 0 0 20px; margin: 0; color: var(--bx-muted); font-size: 14.5px; line-height: 1.6; }

/* ---------- FINAL CTA ---------- */
.bx-final { position: relative; width: 100%; max-width: 1120px; margin: 0 24px; padding: 90px 24px; box-sizing: border-box; border-radius: 32px; border: 1px solid var(--bx-border); background: var(--bx-card); overflow: hidden; text-align: center; display: flex; flex-direction: column; align-items: center; }
.bx-final__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6; background: radial-gradient(50% 80% at 50% 0%, color-mix(in srgb,var(--bx-accent) 35%,transparent), transparent 70%); }
.bx-final > .bx-reveal { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.bx-final__title { font-family: var(--font-display); font-size: clamp(32px,4.6vw,56px); font-weight: 400; line-height: 1.04; margin: 0; }
.bx-final__sub { color: var(--bx-muted); font-size: 17px; margin: 0 0 8px; }

/* ---------- FOOTER ---------- */
.bx-footer { width: 100%; max-width: 1120px; padding: 36px 24px 48px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--bx-border); color: var(--bx-muted); font-size: 13px; flex-wrap: wrap; }
.bx-footer .bx-nav__logo { font-size: 19px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 920px) {
    .bx-landing { --bx-section-gap: 96px; }
    .bx-hero { flex-direction: column; min-height: auto; text-align: center; padding-top: 40px; }
    .bx-hero__content { align-items: center; }
    .bx-hero__sub { max-width: 540px; }
    .bx-orbit { width: clamp(280px, 70vw, 380px); }
    .bx-orbit__node { transform: rotate(var(--a)) translateY(calc(clamp(280px,70vw,380px) / -2 + 25px)) rotate(calc(-1 * var(--a))); }
    .bx-why { grid-template-columns: repeat(2, 1fr); }
    .bx-why__card, .bx-why__card--wide { grid-column: span 1; }
    .bx-flow { grid-template-columns: repeat(4, 1fr); gap: 24px 14px; }
    .bx-flow__line { display: none; }
}
@media (max-width: 620px) {
    .bx-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .bx-stat, .bx-stat:first-child, .bx-stat:last-child { border-radius: 16px; }
    .bx-shift { grid-template-columns: 1fr; }
    .bx-shift__arrow { transform: rotate(90deg); margin: -4px auto; }
    .bx-flow { grid-template-columns: repeat(2, 1fr); }
    .bx-why { grid-template-columns: 1fr; }
    .bx-roles__panel { padding: 28px 22px; }
    .bx-footer { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   LANDING 2.0 — content boosters: Live Match · AI Workforce · Trust
   ========================================================================== */

/* ---------- LIVE MATCH (signature compatibility breaker) ---------- */
.bx-match__stage { width: 100%; max-width: 920px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 0; }
.bx-match__card { background: var(--bx-card); border: 1px solid var(--bx-border); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bx-match__card--demand { border-color: color-mix(in srgb,var(--bx-buyer) 38%,transparent); box-shadow: 0 14px 40px color-mix(in srgb,var(--bx-buyer) 12%,transparent); }
.bx-match__card--supply { border-color: color-mix(in srgb,var(--bx-seller) 38%,transparent); box-shadow: 0 14px 40px color-mix(in srgb,var(--bx-seller) 12%,transparent); }
.bx-match__tag { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bx-buyer); }
.bx-match__tag--s { color: var(--bx-seller); }
.bx-match__card h4 { font-family: var(--font-heading); font-size: 17px; font-weight: 600; margin: 2px 0 0; }
.bx-match__card p { font-size: 12.5px; color: var(--bx-muted); margin: 0; }
.bx-match__who { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; margin-top: 8px; padding: 4px 10px; border-radius: 8px; width: fit-content; }
.bx-match__who i { width: 13px; height: 13px; }
.bx-match__who--b { background: color-mix(in srgb,var(--bx-buyer) 14%,transparent); color: var(--bx-buyer); }
.bx-match__who--s { background: color-mix(in srgb,var(--bx-seller) 14%,transparent); color: var(--bx-seller); }

.bx-match__beam { height: 2px; background: linear-gradient(90deg, color-mix(in srgb,var(--bx-buyer) 50%,transparent), var(--bx-accent), color-mix(in srgb,var(--bx-seller) 50%,transparent)); background-size: 200% 100%; opacity: .5; animation: bxBeam 2.2s linear infinite; }
@keyframes bxBeam { to { background-position: 200% 0; } }

.bx-match__meter { position: relative; width: clamp(150px, 18vw, 190px); aspect-ratio: 1; display: grid; place-items: center; }
.bx-match__meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bx-match__track { fill: none; stroke: color-mix(in srgb,var(--bx-border) 90%,transparent); stroke-width: 10; }
.bx-match__fill { fill: none; stroke: url(#bxMatchGrad); stroke: var(--bx-accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 490; stroke-dashoffset: 490; transition: stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1); }
.bx-match__pct { position: absolute; display: flex; align-items: baseline; font-family: var(--font-display); color: var(--bx-ink); }
.bx-match__pct span { font-size: clamp(34px,4vw,46px); line-height: 1; }
.bx-match__pct i { font-size: 18px; font-style: normal; color: var(--bx-muted); margin-left: 2px; }
.bx-match__badge { position: absolute; bottom: 8%; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; padding: 5px 12px; border-radius: 99px; background: var(--bx-accent-2); color: #07130d; opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .4s, transform .4s; }
.bx-match__badge i { width: 13px; height: 13px; color: #07130d; }
.bx-match__meter.is-match .bx-match__badge { opacity: 1; transform: none; box-shadow: 0 0 0 0 color-mix(in srgb,var(--bx-accent-2) 70%,transparent); animation: bxMatchPulse 1.8s ease-out infinite; }
@keyframes bxMatchPulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bx-accent-2) 60%,transparent);} 70%{box-shadow:0 0 0 12px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

/* ---------- AI WORKFORCE (crew grid) ---------- */
.bx-crew { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bx-crew__card { background: var(--bx-card); border: 1px solid var(--bx-border); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: transform .25s, border-color .25s, box-shadow .25s; }
.bx-crew__card:hover { transform: translateY(-5px); border-color: color-mix(in srgb,var(--bx-accent) 50%,transparent); box-shadow: 0 18px 44px rgba(0,0,0,.22); }
.bx-crew__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb,var(--bx-accent) 12%,transparent); border: 1px solid color-mix(in srgb,var(--bx-accent) 28%,transparent); }
.bx-crew__ic i { width: 22px; height: 22px; color: var(--bx-accent); }
.bx-crew__card h3 { font-family: var(--font-heading); font-size: 17px; font-weight: 600; margin: 2px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bx-crew__role { font-family: var(--font-mono,monospace); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bx-gold); background: color-mix(in srgb,var(--bx-gold) 16%,transparent); padding: 3px 8px; border-radius: 6px; }
.bx-crew__card p { font-size: 13px; line-height: 1.55; color: var(--bx-muted); margin: 0; }
.bx-crew__card--master { grid-column: span 2; background: linear-gradient(135deg, color-mix(in srgb,var(--bx-accent) 14%,var(--card-bg)), var(--card-bg)); border-color: color-mix(in srgb,var(--bx-accent) 45%,transparent); }
.bx-crew__card--master .bx-crew__ic { background: color-mix(in srgb,var(--bx-accent) 22%,transparent); }
@media (max-width: 920px) { .bx-crew { grid-template-columns: repeat(2,1fr); } .bx-crew__card--master { grid-column: span 2; } }
@media (max-width: 560px) { .bx-crew { grid-template-columns: 1fr; } .bx-crew__card--master { grid-column: span 1; } }

/* ---------- TRUST / SECURITY ---------- */
.bx-trust { width: 100%; max-width: 1020px; padding: 0 24px; box-sizing: border-box; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.bx-trust__item { display: flex; align-items: flex-start; gap: 14px; padding: 22px; border-radius: 16px; border: 1px solid var(--bx-border); background: var(--bx-card); }
.bx-trust__item > i { width: 24px; height: 24px; color: var(--bx-accent); flex-shrink: 0; margin-top: 2px; }
.bx-trust__item b { display: block; font-family: var(--font-heading); font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.bx-trust__item span { font-size: 12.5px; line-height: 1.5; color: var(--bx-muted); }
@media (max-width: 760px) { .bx-trust { grid-template-columns: 1fr; } }

/* ---------- footer brain chip ---------- */
.bx-footer__brain { display: inline-flex; align-items: center; gap: 7px; }
.bx-footer__brain i { width: 15px; height: 15px; color: var(--bx-accent); }
.bx-footer__brain b { color: var(--bx-ink); font-weight: 600; }
.bx-footer__legal { font-size: 11px; color: var(--bx-muted); opacity: 0.6; letter-spacing: 0.02em; }

/* match stage responsive */
@media (max-width: 760px) {
    .bx-match__stage { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
    .bx-match__card { width: 100%; max-width: 340px; }
    .bx-match__beam { width: 2px; height: 28px; background: linear-gradient(180deg, var(--bx-buyer), var(--bx-accent), var(--bx-seller)); animation: none; }
}

/* ==========================================================================
   LANDING 2.0 — cohesion pass: connectors, balanced workforce, tighter match
   ========================================================================== */

/* tighten the vertical rhythm a touch */
#viewLanding { --bx-section-gap: 108px; }

/* ---------- Narrative connector (storyline thread between sections) ---------- */
.bx-flowline { width: 1px; height: 76px; margin: -46px 0; position: relative; display: flex; justify-content: center;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb,var(--bx-accent) 55%,transparent) 45%, color-mix(in srgb,var(--bx-accent) 55%,transparent) 55%, transparent);
    transform-origin: top; transform: scaleY(0); transition: transform .7s cubic-bezier(.16,1,.3,1); }
.bx-flowline.in { transform: scaleY(1); }
.bx-flowline__dot { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--bx-accent); transform: translateY(-50%);
    box-shadow: 0 0 0 0 color-mix(in srgb,var(--bx-accent) 60%,transparent); animation: bxPulse 2.4s infinite; }

/* ---------- LIVE MATCH — hug the meter, show the beams ---------- */
.bx-match__stage { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 0; max-width: 880px; }
.bx-match__card { flex: 0 1 290px; align-self: center; }
.bx-match__beam { flex: 0 0 52px; align-self: center; height: 2px; }
.bx-match__meter { flex: 0 0 auto; }

/* ---------- AI WORKFORCE — balanced Master banner + centered worker grid ---------- */
.bx-crew__master { width: 100%; display: flex; align-items: center; gap: 22px; padding: 26px 30px; border-radius: 20px;
    background: linear-gradient(120deg, color-mix(in srgb,var(--bx-accent) 16%,var(--card-bg)), var(--card-bg) 70%);
    border: 1px solid color-mix(in srgb,var(--bx-accent) 45%,transparent);
    box-shadow: 0 20px 50px color-mix(in srgb,var(--bx-accent) 12%,transparent); }
.bx-crew__ic--lg { width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0; background: color-mix(in srgb,var(--bx-accent) 22%,transparent); border: 1px solid color-mix(in srgb,var(--bx-accent) 38%,transparent); display: grid; place-items: center; }
.bx-crew__ic--lg i { width: 28px; height: 28px; color: var(--bx-accent); }
.bx-crew__master-body { flex: 1; min-width: 0; }
.bx-crew__master-body h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 600; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bx-crew__master-body p { font-size: 14px; line-height: 1.55; color: var(--bx-muted); margin: 0; }
.bx-crew__dispatch { display: flex; gap: 7px; flex-shrink: 0; }
.bx-crew__dispatch span { width: 9px; height: 9px; border-radius: 50%; background: var(--bx-accent); opacity: .4; animation: bxDispatch 1.4s ease-in-out infinite; }
.bx-crew__dispatch span:nth-child(2) { animation-delay: .2s; }
.bx-crew__dispatch span:nth-child(3) { animation-delay: .4s; }
@keyframes bxDispatch { 0%,100%{opacity:.25; transform: scale(.8);} 50%{opacity:1; transform: scale(1);} }
@media (max-width: 620px) { .bx-crew__master { flex-direction: column; text-align: center; } .bx-crew__dispatch { transform: rotate(90deg); } }

.bx-crew__bridge { font-family: var(--font-mono,monospace); font-size: 13px; letter-spacing: .02em; color: var(--bx-muted); display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; }
.bx-crew__bridge i { width: 16px; height: 16px; color: var(--bx-accent); }

/* worker grid → centered flex-wrap so 7 cards never orphan */
.bx-crew { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.bx-crew__card { flex: 1 1 232px; max-width: 270px; }
@media (max-width: 620px) { .bx-crew__card { flex: 1 1 100%; max-width: 360px; } }

/* the workforce section stacks its three blocks with comfortable spacing */
#bx-why.bx-section { gap: 28px; }

/* =====================================================================
   ANIMATION UPGRADES — orbit, stagger reveals, ring fix
   ===================================================================== */

/* Orbit core: "Sourcing AI" label more prominent */
.bx-orbit__core span {
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--bx-accent);
}

/* Orbit nodes: flex-column so icon + label stack */
.bx-orbit__node {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
}
.bx-orbit__node i { width: 18px; height: 18px; flex-shrink: 0; }
.bx-orbit__node > span {
    font-size: 7px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--bx-muted); line-height: 1;
    opacity: .75;
}

/* Orbit ring--2: add a brighter segment traveling around the dashed ring */
.bx-orbit__ring--2 {
    border-width: 1.5px;
    filter: drop-shadow(0 0 4px color-mix(in srgb,var(--bx-accent) 30%,transparent));
}

/* 7-MODULE FLOW: staggered slide-up when parent .bx-flow gets .in */
.bx-flow.in .bx-flow__step {
    animation: bxFadeIn .55s cubic-bezier(.16,1,.3,1) both;
}
/* nth-child starts at 2 because child(1) is .bx-flow__line */
.bx-flow.in .bx-flow__step:nth-child(2) { animation-delay: 0ms; }
.bx-flow.in .bx-flow__step:nth-child(3) { animation-delay: 75ms; }
.bx-flow.in .bx-flow__step:nth-child(4) { animation-delay: 150ms; }
.bx-flow.in .bx-flow__step:nth-child(5) { animation-delay: 225ms; }
.bx-flow.in .bx-flow__step:nth-child(6) { animation-delay: 300ms; }
.bx-flow.in .bx-flow__step:nth-child(7) { animation-delay: 375ms; }
.bx-flow.in .bx-flow__step:nth-child(8) { animation-delay: 450ms; }

/* AI CREW: staggered slide-up for worker cards */
.bx-crew.in .bx-crew__card {
    animation: bxFadeIn .5s cubic-bezier(.16,1,.3,1) both;
}
.bx-crew.in .bx-crew__card:nth-child(1) { animation-delay: 0ms; }
.bx-crew.in .bx-crew__card:nth-child(2) { animation-delay: 65ms; }
.bx-crew.in .bx-crew__card:nth-child(3) { animation-delay: 130ms; }
.bx-crew.in .bx-crew__card:nth-child(4) { animation-delay: 195ms; }
.bx-crew.in .bx-crew__card:nth-child(5) { animation-delay: 260ms; }
.bx-crew.in .bx-crew__card:nth-child(6) { animation-delay: 325ms; }
.bx-crew.in .bx-crew__card:nth-child(7) { animation-delay: 390ms; }

/* TRUST strip: stagger the 3 items */
.bx-trust__item { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.bx-trust__item.in { opacity: 1; transform: none; }
.bx-trust__item:nth-child(2) { transition-delay: 120ms; }
.bx-trust__item:nth-child(3) { transition-delay: 240ms; }

/* STATS: subtle slide-up stagger within the band */
.bx-stats .bx-stat.in { animation: bxFadeIn .5s cubic-bezier(.16,1,.3,1) both; }
.bx-stats .bx-stat:nth-child(1).in { animation-delay: 0ms; }
.bx-stats .bx-stat:nth-child(2).in { animation-delay: 90ms; }
.bx-stats .bx-stat:nth-child(3).in { animation-delay: 180ms; }
.bx-stats .bx-stat:nth-child(4).in { animation-delay: 270ms; }

/* Ring fill — remove CSS initial offset so JS fully owns the start state */
.bx-match__fill { stroke-dashoffset: unset; }

/* Core pulse: make the orbit glow more vivid to signal "AI brain" */
@keyframes bxCorePulse {
    0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--bx-accent) 40%,transparent), 0 8px 32px color-mix(in srgb,var(--bx-accent) 22%,transparent); }
    50%      { box-shadow: 0 0 0 16px transparent, 0 12px 48px color-mix(in srgb,var(--bx-accent) 38%,transparent); }
}

/* Node activation pulse — sequential glow to mimic dispatch sequence */
@keyframes bxNodePing {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb,var(--bx-accent) 55%,transparent); }
    70%  { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.bx-orbit__node:nth-child(4)  { animation: bxNodeFloat 4s ease-in-out infinite, bxNodePing 4.2s 0.0s ease-out infinite; }
.bx-orbit__node:nth-child(5)  { animation: bxNodeFloat 4s ease-in-out infinite, bxNodePing 4.2s 0.6s ease-out infinite; }
.bx-orbit__node:nth-child(6)  { animation: bxNodeFloat 4s ease-in-out infinite, bxNodePing 4.2s 1.2s ease-out infinite; }
.bx-orbit__node:nth-child(7)  { animation: bxNodeFloat 4s ease-in-out infinite, bxNodePing 4.2s 1.8s ease-out infinite; }
.bx-orbit__node:nth-child(8)  { animation: bxNodeFloat 4s ease-in-out infinite, bxNodePing 4.2s 2.4s ease-out infinite; }
.bx-orbit__node:nth-child(9)  { animation: bxNodeFloat 4s ease-in-out infinite, bxNodePing 4.2s 3.0s ease-out infinite; }
.bx-orbit__node:nth-child(10) { animation: bxNodeFloat 4s ease-in-out infinite, bxNodePing 4.2s 3.6s ease-out infinite; }

/* ======================================================================
   RESPONSIVE OVERHAUL 2.0
   All rules here win over earlier blocks via cascade source-order.
   Breakpoints: mobile ≤620px | small ≤480px | macbook ≤1280px
   ====================================================================== */

/* ─── 1. LIVE MATCH: Restore mobile column layout ───────────────────────
   The cohesion-pass flex block (later in file) overrides the old grid rule.
   Use !important here to reclaim column layout on small screens.          */
@media (max-width: 760px) {
    .bx-match__stage {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        justify-items: center !important;
        max-width: 340px !important;
        margin: 0 auto !important;
    }
    .bx-match__card  { flex: none !important; width: 100% !important; max-width: 100% !important; }
    .bx-match__beam  { flex: none !important; width: 2px !important; height: 24px !important;
                       background: linear-gradient(180deg,var(--bx-buyer),var(--bx-accent),var(--bx-seller)) !important;
                       animation: none !important; }
    .bx-match__meter { flex: none !important; width: clamp(140px,42vw,170px) !important; }
    .bx-match__pct span { font-size: clamp(34px,10vw,46px) !important; }
}

/* ─── 2. LANDING: Hero mobile ──────────────────────────────────────────── */
@media (max-width: 620px) {
    .bx-hero        { padding-top: 28px !important; gap: 28px !important; }
    .bx-hero__title { font-size: clamp(36px, 10vw, 52px) !important; }
    .bx-hero__sub   { font-size: 15px !important; line-height: 1.5 !important; }
    .bx-hero__cta   { flex-direction: column !important; width: 100% !important; gap: 10px !important; }
    .bx-hero__cta .bx-btn { width: 100% !important; justify-content: center !important; }
    .bx-hero__trust { gap: 12px !important; font-size: 12px !important; flex-wrap: wrap !important; }

    /* Orbit: smaller, re-centre nodes */
    .bx-orbit { width: clamp(240px, 80vw, 300px) !important; margin-top: 4px !important; }
    .bx-orbit__node {
        width: 40px !important; height: 40px !important; border-radius: 11px !important;
        transform: rotate(var(--a))
                   translateY(calc(clamp(240px,80vw,300px) / -2 + 20px))
                   rotate(calc(-1 * var(--a))) !important;
    }
    .bx-orbit__node i { width: 15px !important; height: 15px !important; }
    .bx-orbit__node > span { font-size: 6px !important; }
    .bx-orbit__core { width: 29% !important; }
    .bx-orbit__core i { width: 20px !important; height: 20px !important; }
    .bx-orbit__core span { font-size: 8.5px !important; }
}

/* ─── 3. LANDING: Global typography + padding tighten on very small screens */
@media (max-width: 480px) {
    #viewLanding { --bx-section-gap: 72px !important; }
    .bx-section, .bx-section--narrow { padding: 0 16px !important; }
    .bx-stats  { padding: 0 16px !important; }
    .bx-trust  { padding: 0 16px !important; }
    .bx-shift  { padding: 0 16px !important; }
    .bx-h2     { font-size: clamp(24px, 7.5vw, 36px) !important; }
    .bx-lead   { font-size: 14px !important; }
    .bx-kicker { font-size: 10px !important; letter-spacing: .1em !important; }
}

/* ─── 4. LANDING: 7-Module Flow — compact icons on 2-col mobile grid ───── */
@media (max-width: 620px) {
    .bx-flow__step > i { padding: 11px !important; width: 20px !important; height: 20px !important; }
    .bx-flow__step h4  { font-size: 12.5px !important; }
    .bx-flow__step p   { font-size: 10px !important; }
    .bx-flow__n        { font-size: 10px !important; }
}

/* ─── 5. LANDING: Crew master card — column stack on narrow mobile ──────── */
@media (max-width: 480px) {
    .bx-crew__master {
        flex-direction: column !important; align-items: center !important;
        text-align: center !important; padding: 20px 16px !important; gap: 14px !important;
    }
    .bx-crew__dispatch { transform: none !important; }
    .bx-crew__bridge   { font-size: 11.5px !important; }
}

/* ─── 6. LANDING: Nav micro-polish on tiny screens ──────────────────────── */
@media (max-width: 380px) {
    .bx-nav { padding: 0 12px !important; height: 52px !important; }
    .bx-nav__logo { font-size: 17px !important; }
    .bx-btn--gold { font-size: 13px !important; padding: 8px 12px !important; }
}

/* ─── 7. LANDING: Footer — column stack + smaller legal text ────────────── */
@media (max-width: 620px) {
    .bx-footer {
        flex-direction: column !important; align-items: center !important;
        text-align: center !important; gap: 8px !important; padding-bottom: 28px !important;
    }
    .bx-footer__legal { font-size: 10px !important; }
}

/* ─── 8. LANDING: Shift comparison (old→new) on narrow mobile ───────────── */
@media (max-width: 480px) {
    .bx-shift { grid-template-columns: 1fr !important; gap: 12px !important; }
    .bx-shift__side { padding: 22px 18px !important; }
    .bx-shift__arrow { transform: rotate(90deg) !important; margin: 0 auto !important; }
}

/* ─── 9. LANDING: Role toggle — compact on small screens ────────────────── */
@media (max-width: 480px) {
    .bx-roles__panel  { padding: 22px 14px !important; }
    .bx-roles__btn    { font-size: 13px !important; padding: 8px 14px !important; }
    .bx-roles__chips  { flex-direction: column !important; gap: 6px !important; }
    .bx-roles__chips span { font-size: 12.5px !important; padding: 7px 12px !important; }
}

/* ─── 10. LANDING: FAQ + final CTA on mobile ────────────────────────────── */
@media (max-width: 480px) {
    .bx-faq__item         { padding: 0 14px !important; }
    .bx-faq__item summary { font-size: 14px !important; }
    .bx-final             { padding: 64px 16px !important; }
    .bx-final__title      { font-size: clamp(24px, 7.5vw, 38px) !important; }
    .bx-final__sub        { font-size: 13.5px !important; }
    .bx-final > .bx-reveal .bx-btn {
        width: 100% !important; justify-content: center !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   APP SHELL RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 11. APP SHELL: Mobile — override the hard 40px padding (line 5418) ── */
@media (max-width: 620px) {
    .view-container {
        padding: 10px 14px 88px 14px !important;
    }
    .main-header {
        padding: 8px 14px !important;
    }
    /* Inner console containers also have hard 40px padding */
    .negotiate-console-container,
    .monitor-console-container,
    .finance-desk-container,
    .settings-inline-container {
        padding: 10px 14px 88px 14px !important;
    }
    /* Profile widget: less indent, shorter max-width */
    .header-user-profile {
        margin-left: 8px !important;
        max-width: 150px !important;
    }
    /* Company name in header: hide on very small screen */
    .hup-name { display: none !important; }
}

/* ─── 12. APP SHELL: Bottom navbar — full-width, icons only on mobile ───── */
@media (max-width: 620px) {
    .bottom-capsule-navbar {
        width: calc(100% - 28px) !important;
        max-width: 430px !important;
        bottom: 18px !important;
        padding: 3px !important;
    }
    .nav-item {
        padding: 10px 13px !important;
        font-size: 12px !important;
        gap: 4px !important;
        min-width: 0 !important;
        flex: 1 !important;
        justify-content: center !important;
    }
    .nav-item i { width: 15px !important; height: 15px !important; }
}

/* ─── 13. APP SHELL: Card grids 2-col on mobile ─────────────────────────── */
@media (max-width: 620px) {
    /* Stat/metric summary grids */
    .finance-stat-grid,
    .business-stat-grid,
    [class*="stats-overview"],
    [class*="metric-row"],
    [class*="kpi-row"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    /* Header icon buttons — slightly smaller */
    .header-icon-btn { padding: 6px !important; }
}

/* ─── 14. APP SHELL: MacBook / medium desktop ────────────────────────────── */
@media (max-width: 1280px) and (min-width: 621px) {
    .view-container {
        padding: 12px 24px 45px 24px !important;
    }
    .main-header {
        padding: 10px 24px !important;
    }
    .negotiate-console-container,
    .monitor-console-container,
    .finance-desk-container,
    .settings-inline-container {
        padding: 12px 24px 45px 24px !important;
    }
    .header-user-profile { margin-left: 16px !important; }
}

/* ─── 15. ONBOARDING: Comfortable on mobile ─────────────────────────────── */
@media (max-width: 620px) {
    .onboarding-card    { padding: 24px 18px !important; }
    .onboarding-step h2 { font-size: 22px !important; }
}

/* ─── 16. AUTH MODAL: Full-screen-ish on mobile ──────────────────────────── */
@media (max-width: 480px) {
    .auth-modal-card {
        width: calc(100vw - 32px) !important;
        padding: 28px 20px !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
    }
}