:root {
            --bg:          #121416;
            --surface-0:   #17191d;
            --surface-1:   #1a1d21;
            --surface-2:   #22252a;
            --surface-3:   #2a2e34;
            --text:        #e5e7eb;
            --muted:       #9aa0a6;
            --border:      #2a2e34;
            --blue:        #3b82f6;
            --green:       #10b981;
            --purple:      #8b5cf6;
            --amber:       #f59e0b;
            --red:         #ef4444;
            --cyan:        #06b6d4;
            --success-color: #27ae60;
            --danger-color:  #e74c3c;
        }

        * { box-sizing: border-box; }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
        }

        /* ── Bootstrap form overrides ── */
        .form-control, .form-select {
            background: var(--surface-2);
            color: var(--text);
            border-color: var(--border);
        }
        .form-control:focus, .form-select:focus {
            background: var(--surface-2);
            color: var(--text);
            border-color: var(--blue);
            box-shadow: 0 0 0 0.2rem rgba(59,130,246,.15);
        }
        .form-control::placeholder { color: var(--muted); }
        .form-label { color: var(--text); font-size: .85rem; margin-bottom: 4px; }

        /* ── Buttons ── */
        .btn { font-size: .82rem; }
        .btn-primary    { background: #2563eb; border-color: #1d4ed8; color: #fff; }
        .btn-secondary  { background: #374151; border-color: #2d3748; color: var(--text); }
        .btn-outline-light { border-color: var(--border); color: var(--text); background: transparent; }
        .btn-outline-light:hover { background: var(--surface-2); color: var(--text); }
        .btn:hover { opacity: .9; }

        /* ── Dark nav tabs ── */
        .nav-tabs { border-bottom: 1px solid var(--border); margin-bottom: 0; }
        .nav-tabs .nav-link {
            color: var(--muted);
            background: transparent;
            border: 1px solid transparent;
            border-radius: 6px 6px 0 0;
            font-size: .88rem;
            padding: 8px 20px;
        }
        .nav-tabs .nav-link:hover {
            color: var(--text);
            border-color: var(--border) var(--border) transparent;
            background: var(--surface-2);
        }
        .nav-tabs .nav-link.active {
            color: var(--text);
            background: var(--surface-1);
            border-color: var(--border) var(--border) var(--surface-1);
        }
        .tab-content { padding-top: 20px; }

        /* ── Floating alerts ── */
        .alert-fixed {
            position: fixed; top: 20px; right: 20px;
            z-index: 9999; max-width: 420px; font-size: .85rem;
        }

        /* ── Store info strip ── */
        .store-info-strip {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 8px 16px;
            font-size: .85rem;
            color: var(--muted);
            margin-bottom: 16px;
        }
        .store-info-strip strong { color: var(--text); }

        /* ── Catalogix chart cards ── */
        .chart-card {
            background: var(--surface-1);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .chart-container { position: relative; height: 400px; }
        .chart-container-tall { height: 600px; }
        .loading-spinner { text-align: center; padding: 60px; }
        .spinner-border { width: 3rem; height: 3rem; color: var(--blue); }

        /* ── Progress bar ── */
        .progress { height: 30px; background-color: var(--surface-2); border-radius: 5px; }
        .progress-bar { background-color: var(--success-color); font-weight: bold; }
        .batch-status { margin-top: 10px; font-size: 0.9rem; }
        .batch-failure { color: var(--danger-color); margin-top: 5px; }

        /* ── Extras input ── */
        .extras-input-section {
            background: var(--surface-2);
            padding: 15px; border-radius: 8px; margin-top: 15px;
        }

        /* ── Attribute pie cards ── */
        .pie-chart-card {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 15px; margin-bottom: 20px;
            min-height: 350px;
            display: flex; flex-direction: column;
        }
        .pie-chart-card h6 { color: var(--text); margin-bottom: 10px; font-size: 0.9rem; text-align: center; }
        .pie-chart-card canvas { max-height: 250px; }
        .pie-chart-card small {
            color: var(--muted); font-size: .85rem;
            display: block !important; text-align: center; margin-top: 10px;
        }
        .pie-chart-card.extras-card {
            border-color: rgba(139,92,246,.45);
            box-shadow: 0 0 0 1px rgba(139,92,246,.2) inset;
        }
        .extras-badge {
            display: inline-block;
            font-size: .6rem; font-weight: 700; letter-spacing: .05em;
            text-transform: uppercase;
            background: rgba(139,92,246,.18); color: #c4b5fd;
            border: 1px solid rgba(139,92,246,.4);
            border-radius: 4px; padding: 1px 5px;
            vertical-align: middle; margin-left: 5px;
        }

        /* ── Price plot wrapper ── */
        .price-plot-wrapper {
            position: relative; z-index: 2;
            background: #ffffff; border-radius: 8px;
            padding: 8px; height: 420px; overflow: hidden;
        }

        /* ── BrandEye section wrappers ── */
        .section-wrap {
            background: var(--surface-1);
            border: 1px solid var(--border);
            border-radius: 10px; overflow: hidden; margin-bottom: 20px;
        }
        .section-header {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 16px;
            font-size: .88rem; font-weight: 700; letter-spacing: .02em;
        }
        .section-body { padding: 16px; }

        /* ── BrandEye chart cards ── */
        .be-chart-card {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: 8px; padding: 14px;
        }
        .be-chart-card-title {
            font-size: .7rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .06em;
            color: var(--muted); margin-bottom: 12px;
            display: flex; align-items: center; justify-content: space-between;
            flex-wrap: wrap; gap: 4px;
        }

        /* ── KPI cards ── */
        .kpi-inner { background: var(--surface-3); border-radius: 8px; padding: 18px 14px; text-align: center; }
        .kpi-value { font-size: 2.2rem; font-weight: 800; line-height: 1; margin-bottom: 6px; }
        .kpi-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
        .kpi-sub { font-size: .78rem; color: var(--muted); margin-top: 4px; }

        /* ── Coverage badges ── */
        .cov-badge { font-size: .63rem; padding: 2px 6px; border-radius: 4px; font-weight: 700; white-space: nowrap; }
        .cov-high { background: rgba(34,197,94,.15); color: #86efac; border: 1px solid rgba(34,197,94,.3); }
        .cov-mid  { background: rgba(245,158,11,.15); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
        .cov-low  { background: rgba(239,68,68,.15);  color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }

        /* ── Data tables ── */
        .data-table { width: 100%; font-size: .78rem; border-collapse: collapse; }
        .data-table th {
            background: var(--surface-3); color: var(--muted);
            padding: 6px 10px; text-align: left;
            font-size: .67rem; text-transform: uppercase; letter-spacing: .05em;
            border-bottom: 1px solid var(--border);
        }
        .data-table td {
            padding: 5px 10px;
            border-bottom: 1px solid rgba(42,46,52,.7);
            color: var(--text); vertical-align: middle;
        }
        .data-table tbody tr:last-child td { border-bottom: none; }
        .data-table tbody tr:hover { background: rgba(255,255,255,.03); }

        /* ── Stat mini-grid ── */
        .stat-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
        .stat-mini { background: var(--surface-3); border-radius: 6px; padding: 8px 10px; text-align: center; }
        .stat-mini-label { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 2px; }
        .stat-mini-value { font-size: 1rem; font-weight: 700; color: var(--text); }

        /* ── Query info bar ── */
        .query-info-bar {
            background: var(--surface-1); border: 1px solid var(--border);
            border-radius: 8px; padding: 10px 16px;
            font-size: .78rem; color: var(--muted);
            display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
            margin-bottom: 20px;
        }
        .query-info-bar strong { color: var(--text); }

        /* ── Filters panel ── */
        .filters-panel {
            background: var(--surface-1);
            border: 1px solid var(--border);
            border-radius: 10px; padding: 16px; margin-bottom: 20px;
        }

        /* ── BE loading / empty states ── */
        .loading-wrap {
            display: flex; align-items: center; justify-content: center;
            min-height: 280px; gap: 12px;
            color: var(--muted); font-size: .9rem;
        }
        .empty-state { text-align: center; padding: 48px 20px; color: var(--muted); font-size: .85rem; }
        .empty-state .icon { font-size: 2.6rem; margin-bottom: 10px; }
        .empty-state .title { font-size: 1rem; color: var(--text); margin-bottom: 6px; }

        /* ── Misc ── */
        .alert-info { background-color: var(--surface-2); border-color: var(--border); color: var(--text); }
        .hidden { display: none !important; }

/* Extracted inline styles */
.store-analytics-dashboard-inline-1 { font-size:1.5rem;font-weight:700; }
.store-analytics-dashboard-inline-2 { color:var(--muted);font-size:.85rem;margin:2px 0 0; }
.store-analytics-dashboard-inline-3 { padding:12px 16px; }
.store-analytics-dashboard-inline-4 { font-size:.88rem;font-weight:600; }
.store-analytics-dashboard-inline-5 { font-size:.75rem;color:var(--muted);margin-left:8px; }
.store-analytics-dashboard-inline-6 { border-top:1px dashed var(--border);padding-top:10px; }
.store-analytics-dashboard-inline-7 { font-size:.85rem;white-space:nowrap; }
.store-analytics-dashboard-inline-8 { min-width:196px; }
.store-analytics-dashboard-inline-9 { display:none;font-size:.82rem;font-family:monospace;line-height:1.8; }
.store-analytics-dashboard-inline-10 { color:var(--muted); }
.store-analytics-dashboard-inline-11 { color:#f39c12;cursor:pointer; }
.store-analytics-dashboard-inline-12 { font-size:.7rem;color:var(--muted);margin-left:2px; }
.store-analytics-dashboard-inline-13 { color:#27ae60; }
.store-analytics-dashboard-inline-14 { background:var(--surface-1);border:1px solid var(--border);color:var(--text); }
.store-analytics-dashboard-inline-15 { border-bottom:1px solid var(--border); }
.store-analytics-dashboard-inline-16 { margin-bottom:12px;font-size:.9rem; }
.store-analytics-dashboard-inline-17 { display:flex;align-items:center;gap:0.5rem; }
.store-analytics-dashboard-inline-18 { display:none; }
.store-analytics-dashboard-inline-19 { font-size:.85rem; }
.store-analytics-dashboard-inline-20 { background:var(--surface-2);color:var(--text);border-color:var(--border);font-size:.8rem;resize:vertical; }
.store-analytics-dashboard-inline-21 { font-size:.78rem;color:var(--amber);margin-top:6px; }
.store-analytics-dashboard-inline-22 { border-top:1px solid var(--border); }
.store-analytics-dashboard-inline-23 { color:var(--cyan); }
.store-analytics-dashboard-inline-24 { background:var(--surface-2);color:var(--text);border-color:var(--border);font-size:.78rem;resize:vertical; }
.store-analytics-dashboard-inline-25 { height: 350px; }
.store-analytics-dashboard-inline-26 { display:none; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
.store-analytics-dashboard-inline-27 { display:none; height:350px; }
.store-analytics-dashboard-inline-28 { display:none; color:var(--muted); font-size:13px; }
.store-analytics-dashboard-inline-29 { width:0%; }
.store-analytics-dashboard-inline-30 { font-size:.81rem; }
.store-analytics-dashboard-inline-31 { color-scheme:dark; }
.store-analytics-dashboard-inline-32 { visibility:hidden; }
.store-analytics-dashboard-inline-33 { font-size:.7rem;color:var(--muted); }
.store-analytics-dashboard-inline-34 { color:var(--red); }
.store-analytics-dashboard-inline-35 { background:rgba(59,130,246,.1);color:#93c5fd;border-bottom:1px solid rgba(59,130,246,.2); }
.store-analytics-dashboard-inline-36 { font-weight:400;color:var(--muted); }
.store-analytics-dashboard-inline-37 { min-height:240px; }
.store-analytics-dashboard-inline-38 { background:rgba(139,92,246,.1);color:#c4b5fd;border-bottom:1px solid rgba(139,92,246,.2); }
.store-analytics-dashboard-inline-39 { background:rgba(6,182,212,.1);color:#67e8f9;border-bottom:1px solid rgba(6,182,212,.2); }
.store-analytics-dashboard-inline-40 { background:rgba(245,158,11,.1);color:#fcd34d;border-bottom:1px solid rgba(245,158,11,.2); }
.store-analytics-dashboard-inline-41 { background:rgba(239,68,68,.1);color:#fca5a5;border-bottom:1px solid rgba(239,68,68,.2); }
.store-analytics-dashboard-inline-42 { min-height:180px; }
.store-analytics-dashboard-inline-43 { height:40px; }