/* ==========================================
   VANTIX MASTERPIECE UI — PREMIUM ELEVATION
   ========================================== */

/* 1. Soft, warm background for the main content area */
body, .screen {
    background-color: #F6F7FB !important;
}

/* 2. Pure white cards with soft shadows and rounded corners */
.ov-panel, .st-panel, .cmp-panel, .trm-panel, .alrt-panel, .inv-panel, .set-panel, .cnx-panel, .dsc-card, .god-card {
    background-color: #FFFFFF !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    padding: 24px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover effect to make it feel alive */
.ov-panel:hover, .st-panel:hover, .cmp-panel:hover, .trm-panel:hover, .god-card:hover {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* 3. KPI Cards (Make them pop) */
.ov-kpi, .st-kpi, .inv-kpi {
    background-color: #FFFFFF !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
    padding: 20px 24px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.ov-kpi:hover, .st-kpi:hover, .inv-kpi:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* 4. Make the inner lists/sub-boxes soft and rounded */
.ov-list, .st-list, .cmp-list, .trm-list, .inv-list {
    background-color: #F8FAFC !important;
    border-radius: 12px !important;
    padding: 12px !important;
    border: 1px solid #F1F5F9 !important;
}

/* 5. Chart wrappers should be clean */
.ov-chart-wrap, .st-chart-wrap, .trm-chart-wrap {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 6. Inner items (like rows in lists) */
.ov-kpi-meta, .st-kpi-meta {
    color: #71717A !important;
    font-weight: 500 !important;
}

/* 7. Make the header text pop more */
.ov-title, .st-title, .cmp-title, .trm-title, .dsc-title, .alrt-title, .inv-title, .set-title {
    letter-spacing: -0.5px !important;
    color: #09090B !important;
}

/* 8. Badges */
.ov-badge, .st-badge, .cmp-badge, .trm-badge, .dsc-badge {
    border-radius: 6px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

/* 9. Buttons - make them rounded and modern */
.ov-btn-primary, .st-view-all-btn, .cmp-view-all-btn, .plan-btn, .cnx-btn-primary {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.ov-btn-primary:hover, .st-view-all-btn:hover, .cmp-view-all-btn:hover, .plan-btn:hover, .cnx-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================
   MASTERPIECE KPI CARDS (Reference Match)
   ========================================== */

.ov-kpi {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.ov-kpi-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ov-kpi-icon {
    width: 28px;
    height: 28px;
    background: #F4F4F5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.ov-kpi-label {
    font-size: 13px !important;
    color: #71717A !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.ov-kpi-value {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #09090B !important;
    margin: 4px 0 !important;
    letter-spacing: -0.5px !important;
}

.ov-kpi-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: auto;
}

.ov-kpi-meta {
    font-size: 11px !important;
    color: #A1A1AA !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* The Sparkline graphic */
.ov-sparkline {
    width: 60px;
    height: 24px;
    opacity: 0.8;
}

/* Trend Badges */
.ov-trend-up {
    color: #059669 !important;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ov-trend-down {
    color: #E11D48 !important;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Donut Chart Container */
#ov-category {
    min-height: 160px;
    display: flex;
    align-items: center;
}


/* ==========================================
   MY STORE SPECIFIC MASTERPIECE STYLES
   ========================================== */

/* KPI Cards */
.st-kpi {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.st-kpi-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.st-kpi-icon {
    width: 28px;
    height: 28px;
    background: #F4F4F5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.st-kpi-label {
    font-size: 13px !important;
    color: #71717A !important;
    font-weight: 600 !important;
    margin: 0 !important;
}
.st-kpi-value {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #09090B !important;
    margin: 4px 0 !important;
    letter-spacing: -0.5px !important;
}
.st-kpi-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: auto;
}
.st-kpi-meta {
    font-size: 11px !important;
    color: #A1A1AA !important;
    font-weight: 500 !important;
    margin: 0 !important;
}
.st-sparkline {
    width: 60px;
    height: 24px;
    opacity: 0.8;
}

/* Floating List Items */
.st-list {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}
.st-product-row {
    background: #FFFFFF !important;
    border-radius: 10px !important;
    border: 1px solid #F1F5F9 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}
.st-product-row:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}


/* ==========================================
   SOLID VIBRANT BADGES (Masterpiece)
   ========================================== */

/* 1. Base Badge Style */
.ov-badge, .st-badge, .cmp-badge, .trm-badge, .dsc-badge {
    border-radius: 6px !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border: none !important; 
    color: #FFFFFF !important; /* Force white text */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 9px !important;
}

/* 2. Default / Live Data (Black) */
.ov-badge, .st-badge, .cmp-badge {
    background-color: #09090B !important;
}

/* 3. Amber / Orange (RECOVER, OPPORTUNITY) */
.st-badge-amber, .ov-badge-amber, .cmp-badge-amber {
    background-color: #F59E0B !important;
    color: #FFFFFF !important;
}

/* 4. Red / Danger (CASH TRAPPED, RESTOCK) */
.st-badge-red, .ov-badge-red, .cmp-badge-red {
    background-color: #E11D48 !important;
    color: #FFFFFF !important;
}

/* 5. Green / Success (LIVE, TRACKED) */
.st-badge-green, .ov-badge-green, .cmp-badge-green {
    background-color: #059669 !important;
    color: #FFFFFF !important;
}

/* 6. Cyan / Blue (TOP 10%, GROQ) */
.st-badge-cyan, .ov-badge-cyan, .cmp-badge-cyan {
    background-color: #0284C7 !important;
    color: #FFFFFF !important;
}

/* 7. Violet / Purple (AI) */
.st-badge-violet, .ov-badge-violet, .cmp-badge-violet {
    background-color: #8B5CF6 !important;
    color: #FFFFFF !important;
}


/* ==========================================
   POLARIS EXACT DESIGN REPLICATION
   ========================================== */

/* 1. Sharper Cards (12px radius, crisp borders) */
.ov-panel, .st-panel, .cmp-panel, .trm-panel, .alrt-panel, .inv-panel, .ov-kpi, .st-kpi, .inv-kpi {
    border-radius: 12px !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    background-color: #FFFFFF !important;
}

/* 2. Exact KPI Layout */
.kpi-refined-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 20px !important;
}
.kpi-refined-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.kpi-refined-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.kpi-refined-icon-box {
    width: 28px;
    height: 28px;
    background: #F4F4F5;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kpi-refined-icon-box svg {
    width: 14px;
    height: 14px;
    stroke: #71717A;
    stroke-width: 2.5;
    fill: none;
}
.kpi-refined-title {
    font-size: 12px;
    font-weight: 700;
    color: #52525B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kpi-refined-time-badge {
    font-size: 10px;
    font-weight: 600;
    color: #A1A1AA;
    background: #F8FAFC;
    padding: 2px 6px;
    border-radius: 4px;
}
.kpi-refined-value {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #09090B !important;
    letter-spacing: -0.5px !important;
    margin-top: 4px;
}
.kpi-refined-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
}
.kpi-refined-trend {
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}
.kpi-refined-trend.up { color: #059669; }
.kpi-refined-trend.down { color: #E11D48; }
.kpi-refined-sparkline {
    width: 60px;
    height: 24px;
}

/* 3. Sidebar SVG Icons */
.header .tab {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.nav-svg-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}


/* ==========================================
   FINAL POLARIS TUNING (Muted Badges & Darker BG)
   ========================================== */

/* 1. Darker background so cards pop */
body, .screen {
    background-color: #F1F3F6 !important;
}

/* 2. Muted, colorless grey badges */
.ov-badge, .st-badge, .cmp-badge, .trm-badge, .dsc-badge,
.st-badge-amber, .ov-badge-amber,
.st-badge-red, .ov-badge-red,
.st-badge-green, .ov-badge-green,
.st-badge-cyan, .ov-badge-cyan,
.st-badge-violet, .ov-badge-violet {
    background-color: #F1F5F9 !important; /* Light grey background */
    color: #64748B !important; /* Muted grey text */
    border: 1px solid #E2E8F0 !important; /* Soft border */
    font-weight: 600 !important; /* Less bold than before */
    font-size: 9px !important;
    padding: 3px 10px !important;
    border-radius: 20px !important; /* Pill shape */
    box-shadow: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}


/* ==========================================
   VANTIX STANDARD: SHARP EDGES & BOLD CONTRAST
   ========================================== */

/* 1. Sharper Cards (4px curve instead of 12px/20px) */
.ov-panel, .st-panel, .cmp-panel, .trm-panel, .alrt-panel, .inv-panel, 
.ov-kpi, .st-kpi, .inv-kpi, .kpi-refined-card, 
.st-product-row, .ov-list-row {
    border-radius: 4px !important; 
}

/* Sharper inner elements */
.ov-kpi-icon-box, .st-kpi-icon, .st-view-all-btn, .ov-view-all-btn, .ov-badge, .st-badge {
    border-radius: 4px !important;
}

/* 2. Kill all weak grey text — Make everything dark and bold */
.ov-kpi-label, .st-kpi-label, .kpi-refined-title, 
.ov-kpi-meta, .st-kpi-meta, .kpi-refined-time-badge {
    color: #09090B !important; /* Solid black */
    font-weight: 800 !important; /* Extra bold */
    opacity: 1 !important; 
}

/* Increase size of small labels slightly so they aren't tiny */
.ov-kpi-label, .st-kpi-label, .kpi-refined-title {
    font-size: 12px !important;
    letter-spacing: 0px !important; /* Remove the stretched uppercase look */
    text-transform: none !important; /* Use standard casing */
}

/* 3. Solid High-Contrast Badges (No grey, no soft pastels) */
.ov-badge, .st-badge, .cmp-badge, .trm-badge, .dsc-badge,
.st-badge-amber, .ov-badge-amber,
.st-badge-red, .ov-badge-red,
.st-badge-green, .ov-badge-green,
.st-badge-cyan, .ov-badge-cyan,
.st-badge-violet, .ov-badge-violet {
    background-color: #09090B !important; /* Solid Black */
    color: #FFFFFF !important; /* Pure White text */
    border: none !important;
    font-weight: 800 !important;
    padding: 4px 8px !important;
    letter-spacing: 0.5px !important;
    font-size: 10px !important;
}

/* 4. Remove the grey background from the time badges inside KPIs */
.kpi-refined-time-badge {
    background: transparent !important;
    border: 1px solid #E5E7EB !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
}

/* 5. Darken the card borders to make the sharpness stand out */
.ov-panel, .st-panel, .cmp-panel, .trm-panel, .alrt-panel, .inv-panel, 
.ov-kpi, .st-kpi, .inv-kpi {
    border: 1px solid #D1D5DB !important; /* Slightly darker border */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; /* Tighter shadow */
}


/* ==========================================
   MODAL OVERLAY UPGRADE & GREY BADGES
   ========================================== */

/* 1. Top-tier modern font stack globally */
body, .screen, .st-modal-body, * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* 2. Sleek Grey Badges (No colors) */
.ov-badge, .st-badge, .cmp-badge, .trm-badge, .dsc-badge,
.st-badge-amber, .ov-badge-amber,
.st-badge-red, .ov-badge-red,
.st-badge-green, .ov-badge-green,
.st-badge-cyan, .ov-badge-cyan,
.st-badge-violet, .ov-badge-violet {
    background-color: #F3F4F6 !important; 
    color: #4B5563 !important; 
    border: 1px solid #E5E7EB !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    letter-spacing: 0.5px !important;
}

/* 3. Overlay Modal List Enhancements */
#st-modal-body {
    padding: 16px !important;
}

#st-modal-body .st-product-row {
    padding: 16px 20px !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    border: 1px solid #E5E7EB !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

/* Make the image much larger */
#st-modal-body .st-product-img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

/* Make the title larger and bolder */
#st-modal-body .st-row-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #09090B !important;
    line-height: 1.3 !important;
}

/* Make the meta text (e.g., 7 sold) larger */
#st-modal-body .st-row-meta {
    font-size: 13px !important;
    color: #6B7280 !important;
    margin-top: 6px !important;
    font-weight: 600 !important;
}

/* Make the price larger */
#st-modal-body .st-row-amount {
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
}

/* Rank number styling */
#st-modal-body .st-row-rank {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #D1D5DB !important;
    width: 30px !important;
    text-align: center !important;
}


/* ==========================================
   COMPETITORS PAGE — POLARIS PRECISION
   ========================================== */

/* 1. Sharp Cards */
.cmp-panel {
    border-radius: 4px !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    background-color: #FFFFFF !important;
    padding: 24px !important;
}

/* 2. High-Contrast Typography */
.cmp-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #09090B !important;
    letter-spacing: -0.5px !important;
}
.cmp-eyebrow {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #0284C7 !important;
}
.cmp-sub {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #52525B !important;
}
.cmp-panel-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #09090B !important;
}
.cmp-panel-sub {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #52525B !important;
    margin-top: 4px !important;
}

/* 3. Clean Grey Badges */
.cmp-badge, .cmp-badge-cyan, .cmp-badge-amber, .cmp-badge-green, .cmp-badge-violet {
    background-color: #F3F4F6 !important;
    color: #4B5563 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
}

/* 4. Form Inputs & Buttons */
.cmp-input {
    border-radius: 4px !important;
    border: 1px solid #D1D5DB !important;
    padding: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
}
.cmp-input:focus {
    border-color: #0284C7 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1) !important;
}
.cmp-btn-primary {
    border-radius: 4px !important;
    background-color: #09090B !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
    transition: all 0.2s !important;
}
.cmp-btn-primary:hover {
    background-color: #27272A !important;
}
.cmp-btn-secondary {
    border-radius: 4px !important;
    background-color: #F3F4F6 !important;
    color: #09090B !important;
    border: 1px solid #E5E7EB !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
}
.cmp-btn-secondary:hover {
    background-color: #E5E7EB !important;
}

/* 5. Inner Lists (Floating Rows) */
.cmp-list {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}
.cmp-list > div {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    padding: 16px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.cmp-list > div:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* 6. Clean view all button */
.cmp-view-all-btn {
    background-color: #F8FAFC !important;
    border: 1px solid #F1F5F9 !important;
    border-radius: 4px !important;
    color: #0284C7 !important;
    font-weight: 800 !important;
    padding: 12px !important;
    transition: all 0.2s !important;
}
.cmp-view-all-btn:hover {
    background-color: #F1F5F9 !important;
    color: #09090B !important;
}

/* 7. Modal Overrides */
#cmp-modal-body {
    background: transparent !important;
    border: none !important;
    padding: 0 8px 0 0 !important;
}
#cmp-modal-body > div {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    padding: 16px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}


/* ==========================================
   TERMINAL PAGE — POLARIS PRECISION
   ========================================== */

/* 1. Sharp Cards */
.trm-panel {
    border-radius: 4px !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    background-color: #FFFFFF !important;
    padding: 24px !important;
}

/* 2. High-Contrast Typography */
.trm-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #09090B !important;
    letter-spacing: -0.5px !important;
}
.trm-eyebrow {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #0284C7 !important;
}
.trm-sub {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #52525B !important;
}
.trm-panel-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #09090B !important;
}
.trm-panel-sub {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #52525B !important;
    margin-top: 4px !important;
}

/* 3. Clean Grey Badges */
.trm-badge, .trm-badge-cyan, .trm-badge-green, .trm-badge-violet, .trm-badge-amber {
    background-color: #F3F4F6 !important;
    color: #4B5563 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
}

/* 4. Inner Lists (Floating Rows) */
.trm-list {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}
.trm-list > div {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    padding: 16px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.trm-list > div:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* 5. AI Advisor and Simulator Boxes */
#ai-advisor-content {
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    padding: 16px !important;
    font-weight: 600 !important;
    color: #09090B !important;
}
.trm-stat-box, #safe-floor-content > div, #simulator-content > div {
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    padding: 16px !important;
}

/* 6. Inputs inside Simulator */
#sim-price {
    border-radius: 4px !important;
    border: 1px solid #D1D5DB !important;
    padding: 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #09090B !important;
    width: 100% !important;
    margin-top: 8px !important;
}
#sim-price:focus {
    border-color: #0284C7 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1) !important;
}

/* 7. Chart Wrap */
.trm-chart-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* ==========================================
   DISCOVERY PAGE — POLARIS PRECISION
   ========================================== */

/* 1. Header & Typography */
.dsc-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #09090B !important;
    letter-spacing: -0.5px !important;
}
.dsc-eyebrow {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #0284C7 !important;
}
.dsc-sub {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #52525B !important;
}

/* 2. Header Buttons (Sharp Edges) */
.dsc-tab-btn, .dsc-btn-configure {
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 10px 16px !important;
    transition: all 0.2s !important;
}
.dsc-tab-btn {
    border: 1px solid #D1D5DB !important;
    background: #FFFFFF !important;
    color: #52525B !important;
}
.dsc-tab-btn.active {
    background: #09090B !important;
    color: #FFFFFF !important;
    border-color: #09090B !important;
}
.dsc-btn-configure {
    background: #09090B !important;
    color: #FFFFFF !important;
}
.dsc-btn-configure:hover {
    background: #27272A !important;
}

/* 3. Status Banner */
.dsc-status-banner {
    border-radius: 4px !important;
    border: 1px solid #E5E7EB !important;
    background: #F8FAFC !important;
    color: #09090B !important;
    font-weight: 700 !important;
    padding: 16px 20px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}

/* 4. God Eye Cards (Product Cards generated by JS) */
.god-card {
    border-radius: 4px !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    background-color: #FFFFFF !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.god-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

/* Clean up the inner boxes inside the God Cards */
.god-card > div:last-child {
    padding: 16px !important;
}

/* 5. Preferences Modal */
.dsc-modal {
    border-radius: 4px !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}
.dsc-modal-header {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E5E7EB !important;
    padding: 20px 24px !important;
}
.dsc-modal-title {
    font-weight: 900 !important;
    color: #09090B !important;
}
.dsc-modal-body {
    padding: 24px !important;
}
.dsc-pref-section h3 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #09090B !important;
}
.dsc-auto-box {
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    padding: 16px !important;
}
.dsc-auto-box input[type="checkbox"] {
    accent-color: #09090B !important;
}

/* Category Tree */
.dsc-tree-group {
    border-radius: 4px !important;
    border: 1px solid #E5E7EB !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
}
.dsc-tree-parent {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E5E7EB !important;
    font-weight: 800 !important;
    padding: 12px 16px !important;
}
.dsc-tree-parent input, .dsc-tree-child input {
    accent-color: #09090B !important;
    width: 16px !important;
    height: 16px !important;
}
.dsc-tree-children {
    padding: 16px !important;
    background: #FFFFFF !important;
}

/* Modal Footer */
.dsc-modal-footer {
    background: #F8FAFC !important;
    border-top: 1px solid #E5E7EB !important;
    padding: 16px 24px !important;
}
.dsc-modal-footer button {
    border-radius: 4px !important;
    font-weight: 800 !important;
    padding: 10px 20px !important;
}

/* 6. Clean Scrollbars */
.dsc-grid, .dsc-modal-body {
    scrollbar-width: thin !important;
    scrollbar-color: #E4E4E7 transparent !important;
}
.dsc-grid::-webkit-scrollbar, .dsc-modal-body::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}
.dsc-grid::-webkit-scrollbar-thumb, .dsc-modal-body::-webkit-scrollbar-thumb {
    background: #E4E4E7 !important;
    border-radius: 4px !important;
}


/* ==========================================
   INVENTORY PAGE — POLARIS PRECISION
   ========================================== */

/* 1. Header & Typography */
.inv-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #09090B !important;
    letter-spacing: -0.5px !important;
}
.inv-eyebrow {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #0284C7 !important;
}
.inv-sub {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #52525B !important;
}
.inv-panel-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #09090B !important;
}

/* 2. Status Chip */
.inv-chip {
    background-color: #F3F4F6 !important;
    color: #4B5563 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    padding: 6px 12px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 3. Main Panel */
.inv-panel {
    border-radius: 4px !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    background-color: #FFFFFF !important;
    padding: 24px !important;
}

/* 4. Inventory List (Floating Rows) */
.inv-list {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 16px !important;
}
.inv-list > div {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    padding: 16px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.inv-list > div:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}


/* ==========================================
   CONNECT PAGE — POLARIS PRECISION
   ========================================== */

/* 1. Header & Typography */
.cnx-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #09090B !important;
    letter-spacing: -0.5px !important;
}
.cnx-eyebrow {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #0284C7 !important;
}
.cnx-sub {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #52525B !important;
}

/* 2. Status Chip */
.cnx-chip {
    background-color: #F3F4F6 !important;
    color: #4B5563 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    padding: 6px 12px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 3. Panels */
.cnx-panel {
    border-radius: 4px !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    background: #FFFFFF !important;
    padding: 24px !important;
}
/* Override the green inline style on the connected banner */
.cnx-panel[style*="background: #F0FDF4"] {
    background: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
}
.cnx-panel-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #09090B !important;
}
.cnx-panel-sub {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #52525B !important;
}

/* 4. Badges (Force override inline styles) */
.cnx-badge {
    background-color: #F3F4F6 !important;
    color: #4B5563 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
}

/* 5. Form Inputs */
.cnx-label {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #09090B !important;
    margin-bottom: 6px !important;
}
.cnx-input {
    border-radius: 4px !important;
    border: 1px solid #D1D5DB !important;
    padding: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #09090B !important;
}
.cnx-input:focus {
    border-color: #0284C7 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1) !important;
}

/* 6. Buttons */
.cnx-btn-primary {
    border-radius: 4px !important;
    background-color: #09090B !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    transition: all 0.2s !important;
}
.cnx-btn-primary:hover {
    background-color: #27272A !important;
}

/* 7. Connected Banner Icon */
#store-logo-fallback {
    border-radius: 4px !important;
    border: 1px solid #D1D5DB !important;
    background: #F8FAFC !important;
    color: #09090B !important;
}
#store-logo {
    border-radius: 4px !important;
    border: 1px solid #D1D5DB !important;
}


/* ==========================================
   SETTINGS PAGE — POLARIS PRECISION
   ========================================== */

/* 1. Main Panels */
.set-panel {
    border-radius: 4px !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    background: #FFFFFF !important;
    padding: 24px !important;
}
.set-panel-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #09090B !important;
    margin-bottom: 16px !important;
}

/* 2. High-Contrast Typography */
.set-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #09090B !important;
    letter-spacing: -0.5px !important;
}
.set-eyebrow {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #0284C7 !important;
}
.set-sub {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #52525B !important;
}

/* 3. Status Chip */
.set-chip {
    background-color: #F3F4F6 !important;
    color: #4B5563 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    padding: 6px 12px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 4. Inner Lists (Floating Rows) */
.set-list {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.set-row {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}
.set-label {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #09090B !important;
}
.set-value {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #52525B !important;
}

/* 5. Badges & Buttons */
.set-badge {
    background-color: #F3F4F6 !important;
    color: #09090B !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    text-transform: uppercase !important;
}
.set-btn-secondary {
    background-color: #F3F4F6 !important;
    color: #09090B !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    transition: all 0.2s !important;
}
.set-btn-secondary:hover {
    background-color: #E5E7EB !important;
}

/* 6. Danger Zone */
.set-panel-danger {
    border-color: #FECDD3 !important;
    background: #FFF1F2 !important;
}
.set-btn-danger {
    background-color: #E11D48 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 12px 24px !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
    width: 100% !important;
}
.set-btn-danger:hover {
    background-color: #BE123C !important;
}


/* ==========================================
   PROFESSIONAL SIDEBAR PROFILE
   ========================================== */

.nav-profile-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: auto;
}

.nav-profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
    cursor: pointer;
}

.nav-profile-header:hover {
    background: #18181B;
}

.nav-profile-header img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #27272A;
    object-fit: cover;
}

.nav-profile-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nav-profile-text span:first-child {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.nav-profile-text span:last-child {
    font-size: 11px;
    color: #A1A1AA;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.nav-logout-btn {
    background: transparent;
    border: 1px solid #27272A;
    color: #A1A1AA;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.nav-logout-btn:hover {
    background: #18181B;
    color: #FFFFFF;
    border-color: #3F3F46;
}