.ca-shell {
    --ca-bg: #07101f;
    --ca-panel: rgba(15, 23, 42, .76);
    --ca-panel-strong: #0f172a;
    --ca-border: rgba(71, 85, 105, .42);
    --ca-muted: #64748b;
    --ca-secondary: #94a3b8;
    --ca-text: #e2e8f0;
    --ca-accent: #4ade80;
    --ca-indigo: #818cf8;
    color: var(--ca-text);
    padding-bottom: 28px;
}

.ca-shell [hidden] { display: none !important; }

.ca-shell .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ca-explainer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 18px 20px;
    margin-bottom: 12px;
    border: 1px solid rgba(74, 222, 128, .2);
    border-radius: 12px;
    background:
        radial-gradient(circle at 4% 0%, rgba(74, 222, 128, .10), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(8, 15, 30, .9));
}

.ca-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--ca-accent);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ca-explainer h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 1.08rem;
    letter-spacing: -.015em;
}

.ca-explainer p {
    max-width: 850px;
    margin: 7px 0 0;
    color: var(--ca-secondary);
    font-size: .78rem;
    line-height: 1.55;
}

.ca-explainer p strong { color: #c7f9d6; font-weight: 700; }

.ca-explainer .ca-profit-definition {
    color: #93a4bd;
    font-size: .74rem;
}

.ca-freshness {
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid rgba(99, 102, 241, .22);
    border-radius: 999px;
    background: rgba(99, 102, 241, .08);
    color: #a5b4fc;
    font-size: .67rem;
    white-space: nowrap;
}

.ca-query {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
    padding: 13px 16px;
    border: 1px solid var(--ca-border);
    border-radius: 10px;
    background: rgba(15, 23, 42, .64);
    box-shadow: inset 0 1px rgba(255, 255, 255, .015);
}

.ca-query-sentence,
.ca-period-row,
.ca-presets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.ca-query-sentence {
    gap: 8px;
    color: #cbd5e1;
    font-size: .78rem;
    font-weight: 600;
}

.ca-query-join { margin-left: 4px; }

.ca-field,
.ca-date-field,
.ca-focus-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ca-control {
    min-height: 31px;
    padding: 5px 9px;
    border: 1px solid rgba(71, 85, 105, .58);
    border-radius: 7px;
    outline: none;
    background: #0b1324;
    color: #e2e8f0;
    font: inherit;
    font-size: .73rem;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.ca-control:hover { border-color: rgba(129, 140, 248, .5); }
.ca-control:focus {
    border-color: rgba(74, 222, 128, .62);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .08);
}
.ca-control:disabled { opacity: .62; cursor: not-allowed; }
.ca-control option:disabled { color: #64748b; }

.ca-field-inline .ca-control { min-width: 160px; }
#ca-taxonomy-source { min-width: 225px; }
#ca-sales-platform { min-width: 185px; }

.ca-period-row {
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(71, 85, 105, .24);
}

.ca-presets {
    gap: 5px;
    margin-right: 8px;
}

.ca-presets button,
.ca-apply {
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(71, 85, 105, .45);
    border-radius: 7px;
    background: rgba(30, 41, 59, .72);
    color: #94a3b8;
    font-size: .7rem;
    font-weight: 650;
    cursor: pointer;
    transition: .16s ease;
}

.ca-presets button:hover {
    border-color: rgba(129, 140, 248, .45);
    color: #c7d2fe;
}

.ca-presets button.is-active {
    border-color: rgba(74, 222, 128, .38);
    background: rgba(74, 222, 128, .1);
    color: var(--ca-accent);
}

.ca-date-field span,
.ca-focus-field span {
    color: var(--ca-muted);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.ca-date-field .ca-control { width: 138px; }
.ca-date-arrow { color: #475569; font-size: .72rem; }

.ca-apply {
    border-color: rgba(99, 102, 241, .48);
    background: rgba(99, 102, 241, .16);
    color: #c7d2fe;
    font-weight: 750;
}

.ca-apply:hover { background: rgba(99, 102, 241, .24); }
.ca-apply:disabled { opacity: .58; cursor: wait; }

.ca-alert {
    margin-bottom: 12px;
    padding: 10px 13px;
    border: 1px solid rgba(99, 102, 241, .34);
    border-radius: 8px;
    background: rgba(99, 102, 241, .09);
    color: #c7d2fe;
    font-size: .75rem;
}

.ca-alert.is-loading::before {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border: 2px solid rgba(165, 180, 252, .25);
    border-top-color: #a5b4fc;
    border-radius: 50%;
    content: '';
    vertical-align: -1px;
    animation: ca-spin .75s linear infinite;
}

.ca-alert.is-error {
    border-color: rgba(248, 113, 113, .35);
    background: rgba(248, 113, 113, .08);
    color: #fca5a5;
}

@keyframes ca-spin { to { transform: rotate(360deg); } }

.ca-coverage-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid rgba(74, 222, 128, .25);
    border-radius: 8px;
    background: rgba(74, 222, 128, .06);
    color: #86efac;
    font-size: .68rem;
}

.ca-coverage-note.is-partial {
    border-color: rgba(245, 158, 11, .28);
    background: rgba(245, 158, 11, .07);
    color: #fbbf24;
}

.ca-coverage-note i { color: #475569; font-style: normal; }
.ca-coverage-note strong { color: #e2e8f0; }

.ca-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.ca-kpi {
    position: relative;
    min-height: 112px;
    padding: 14px 15px;
    overflow: hidden;
    border: 1px solid var(--ca-border);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(15, 23, 42, .92), rgba(8, 15, 29, .9));
}

.ca-kpi::after {
    position: absolute;
    right: -22px;
    bottom: -30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(129, 140, 248, .055);
    content: '';
}

.ca-kpi > span {
    display: block;
    margin-bottom: 8px;
    color: var(--ca-secondary);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.ca-kpi strong {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    color: #f8fafc;
    font-size: 1.27rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ca-kpi small {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 8px;
    overflow: hidden;
    color: var(--ca-muted);
    font-size: .67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ca-kpi:first-child { border-color: rgba(74, 222, 128, .28); }
.ca-kpi:first-child strong { color: var(--ca-accent); }
.ca-kpi-leader { border-color: rgba(129, 140, 248, .27); }
.ca-kpi-leader strong { color: #c7d2fe; font-size: 1.02rem; }
.ca-kpi-coverage strong { color: #67e8f9; }

.ca-progress {
    position: relative;
    z-index: 1;
    height: 4px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(71, 85, 105, .36);
}

.ca-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #4ade80);
    transition: width .35s ease;
}

.ca-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, .8fr);
    gap: 10px;
    margin-bottom: 12px;
}

.ca-panel {
    min-width: 0;
    border: 1px solid var(--ca-border);
    border-radius: 10px;
    background: var(--ca-panel);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
}

.ca-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(71, 85, 105, .28);
}

.ca-panel-head h3 {
    margin: 0;
    color: #e2e8f0;
    font-size: .82rem;
}

.ca-panel-head > div > span,
.ca-panel-head > span {
    display: block;
    margin-top: 3px;
    color: var(--ca-muted);
    font-size: .65rem;
}

.ca-platform-legend {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px 9px;
}

.ca-platform-legend span,
.ca-platform-summary span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ca-secondary);
    font-size: .61rem;
}

.ca-platform-legend i,
.ca-platform-summary i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--ca-dot);
}

.ca-chart-wrap { position: relative; width: 100%; }
.ca-chart-ranking { height: 320px; padding: 12px 13px 10px 8px; }
.ca-chart-mix { height: 205px; padding: 12px; }
.ca-chart-trend { height: 260px; padding: 12px 14px 10px 8px; }

.ca-platform-summary {
    display: grid;
    gap: 6px;
    padding: 0 14px 13px;
}

.ca-platform-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.ca-platform-summary strong { color: #cbd5e1; font-size: .65rem; }
.ca-muted { color: var(--ca-muted) !important; font-size: .68rem; }

.ca-trend-panel { grid-column: 1 / -1; }
.ca-panel-head-filter { align-items: center; }
.ca-focus-field { flex-direction: column; align-items: flex-start; }
.ca-focus-field .ca-control { min-width: 245px; }

.ca-table-panel,
.ca-products-panel { margin-bottom: 12px; overflow: hidden; }
.ca-table-scroll { max-width: 100%; overflow: auto; }

.ca-table {
    width: 100%;
    min-width: 1140px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .67rem;
}

.ca-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 9px;
    border-bottom: 1px solid rgba(71, 85, 105, .54);
    background: #172033;
    color: #94a3b8;
    font-size: .61rem;
    font-weight: 750;
    letter-spacing: .035em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.ca-table td {
    padding: 7px 9px;
    border-bottom: 1px solid rgba(51, 65, 85, .34);
    color: #94a3b8;
    white-space: nowrap;
}

.ca-table tbody tr { transition: background .12s ease; }
.ca-table tbody tr:hover,
.ca-table tbody tr.is-selected { background: rgba(99, 102, 241, .075); }
.ca-table tbody tr.is-uncategorized { background: rgba(245, 158, 11, .035); }
.ca-table tbody tr.is-conflict { background: rgba(248, 113, 113, .04); }
.ca-table .is-number { text-align: right; font-variant-numeric: tabular-nums; }
.ca-table td.is-total { color: #86efac; font-weight: 750; }
.ca-rank { width: 34px; color: #475569 !important; }

.ca-category-link,
.ca-sku-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 300px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.ca-category-link strong { color: #e2e8f0; font-size: .69rem; }
.ca-category-link small {
    display: block;
    max-width: 300px;
    margin-top: 2px;
    overflow: hidden;
    color: #64748b;
    font-size: .58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ca-category-link:hover strong,
.ca-sku-link:hover { color: var(--ca-accent); }

.ca-share {
    display: inline-block;
    min-width: 52px;
    padding: 3px 6px;
    border: 1px solid rgba(99, 102, 241, .2);
    border-radius: 999px;
    background: rgba(99, 102, 241, .07);
    color: #a5b4fc;
    text-align: center;
}

.ca-count {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(71, 85, 105, .18);
    color: #94a3b8 !important;
    font-size: .62rem !important;
}

.ca-sku-link {
    color: #a5b4fc;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .64rem;
}

.ca-product-name {
    max-width: 285px;
    overflow: hidden;
    color: #cbd5e1 !important;
    text-overflow: ellipsis;
}

.ca-category-pill {
    display: inline-block;
    max-width: 180px;
    padding: 3px 6px;
    overflow: hidden;
    border-radius: 5px;
    background: rgba(74, 222, 128, .07);
    color: #86efac;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ca-empty {
    padding: 34px 18px;
    color: #64748b;
    font-size: .74rem;
    text-align: center;
}

@media (max-width: 1180px) {
    .ca-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ca-dashboard-grid { grid-template-columns: 1fr; }
    .ca-trend-panel { grid-column: auto; }
}

@media (max-width: 760px) {
    .ca-explainer { flex-direction: column; padding: 15px; }
    .ca-freshness { white-space: normal; }
    .ca-query { padding: 12px; }
    .ca-query-sentence { align-items: stretch; flex-direction: column; }
    .ca-query-join { margin: 3px 0 0; }
    .ca-field-inline,
    .ca-field-inline .ca-control,
    #ca-taxonomy-source,
    #ca-sales-platform { width: 100%; }
    .ca-period-row { align-items: stretch; }
    .ca-presets { width: 100%; margin-right: 0; }
    .ca-presets button { flex: 1 1 120px; }
    .ca-date-field { flex: 1 1 140px; flex-direction: column; align-items: flex-start; }
    .ca-date-field .ca-control { width: 100%; }
    .ca-date-arrow { display: none; }
    .ca-apply { flex: 1 1 100%; }
    .ca-kpis { grid-template-columns: 1fr; }
    .ca-kpi { min-height: 98px; }
    .ca-panel-head { flex-direction: column; }
    .ca-platform-legend { justify-content: flex-start; }
    .ca-focus-field,
    .ca-focus-field .ca-control { width: 100%; }
    .ca-chart-ranking { height: 350px; }
}