/*
 * CapiTracker brand palette compatibility layer.
 *
 * Load this file after the existing public, dashboard, store-connection and
 * page-specific stylesheets. It deliberately changes presentation only: no
 * component structure, interaction, or official platform artwork is altered.
 */

:root {
    --ct-bg: #070816;
    --ct-bg-secondary: #111326;
    --ct-card: #111326;
    --ct-border: #252044;

    --ct-purple: #7C3AED;
    --ct-purple-bright: #8B5CF6;
    --ct-purple-dark: #5B21B6;
    --ct-lavender: #C4B5FD;

    --ct-white: #FFFFFF;
    --ct-text-muted: #A8A7B5;

    --ct-success: #22C55E;
    --ct-danger: #EF4444;

    --ct-light-bg: #F8F7FC;
    --ct-dark-text: #09090B;

    --ct-cta-gradient: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 55%, #5B21B6 100%);
    --ct-page-background: radial-gradient(circle at 70% 20%, rgba(124, 58, 237, 0.20), transparent 40%), #070816;

    /* Backward-compatible aliases used by the existing dashboard pages. */
    --bg: var(--ct-bg);
    --panel: var(--ct-card);
    --panel-2: #0D0F20;
    --panel-3: #18162E;
    --line: var(--ct-border);
    --line-strong: #3A3264;
    --text: var(--ct-white);
    --muted: var(--ct-text-muted);
    --blue: var(--ct-purple);
    --accent: var(--ct-purple);
    --accent-hover: var(--ct-purple-dark);
    --accent-soft: rgba(124, 58, 237, 0.18);
    --green: var(--ct-success);
    --red: var(--ct-danger);
    --orange: var(--ct-lavender);
    --yellow: var(--ct-lavender);
    --chip: #18162E;
}

/* --------------------------------------------------------------------------
   CapiTracker identity lockups
   -------------------------------------------------------------------------- */

.ct-brand-lockup {
    display: block;
    width: auto;
    max-width: 100%;
    height: 40px;
    object-fit: contain;
}

.ct-brand-lockup--auth,
.ct-brand-lockup--nav {
    width: auto;
    max-width: 190px;
    height: 42px;
}

.ct-brand-lockup--sidebar {
    max-width: 171px;
    height: 36px;
}

.ct-brand-lockup--context,
.ct-brand-lockup--legal {
    max-width: 162px;
    height: 34px;
}

.ct-brand-lockup--footer {
    max-width: 133px;
    height: 28px;
}

.ct-brand-with-context,
.ct-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ct-brand-context {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid rgba(196, 181, 253, 0.22);
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.12);
    color: var(--ct-lavender);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

body.ct-api-page .eyebrow.ct-brand-with-context {
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    letter-spacing: normal;
    text-transform: none;
}

.ct-footer-brand > span {
    color: var(--ct-text-muted);
    font-size: 12px;
}

@media (max-width: 520px) {
    .ct-brand-lockup--auth,
    .ct-brand-lockup--nav {
        max-width: 164px;
        height: 36px;
    }

    .ct-brand-lockup--sidebar,
    .ct-brand-lockup--context,
    .ct-brand-lockup--legal {
        max-width: 152px;
        height: 32px;
    }
}

/* Shared keyboard visibility and form selection. */
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(139, 92, 246, 0.58) !important;
    outline-offset: 3px;
}

::selection {
    background: rgba(124, 58, 237, 0.42);
    color: var(--ct-white);
}

/* --------------------------------------------------------------------------
   Public website
   -------------------------------------------------------------------------- */

body.public-site {
    --public-bg: var(--ct-bg);
    --public-bg-soft: #0D0F20;
    --public-panel: rgba(17, 19, 38, 0.80);
    --public-panel-strong: rgba(17, 19, 38, 0.96);
    --public-panel-hover: rgba(25, 22, 48, 0.94);
    --public-line: rgba(196, 181, 253, 0.16);
    --public-line-bright: rgba(139, 92, 246, 0.40);
    --public-text: var(--ct-white);
    --public-muted: var(--ct-text-muted);
    --public-muted-strong: #C9C7D5;
    --public-blue: var(--ct-purple);
    --public-blue-bright: var(--ct-purple-bright);
    --public-indigo: var(--ct-purple-dark);
    --public-violet: var(--ct-purple-bright);
    --public-green: var(--ct-success);
    --public-amber: var(--ct-lavender);
    --public-glow: 0 0 80px rgba(124, 58, 237, 0.12);
    background: var(--ct-page-background) !important;
}

body.public-site::before {
    background-image:
        linear-gradient(rgba(196, 181, 253, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(196, 181, 253, 0.045) 1px, transparent 1px) !important;
}

body.public-site :where(.nav-inner, .nav-shell) {
    border-color: rgba(196, 181, 253, 0.14) !important;
    background: rgba(7, 8, 22, 0.74) !important;
}

body.public-site :where(.nav, .site-nav).is-scrolled :where(.nav-inner, .nav-shell) {
    border-color: rgba(139, 92, 246, 0.28) !important;
    background: rgba(7, 8, 22, 0.93) !important;
}

body.public-site :where(.nav-links > a, .landing-trigger, .nav-link, .nav-trigger) {
    color: var(--ct-text-muted) !important;
}

body.public-site :where(.nav-links > a, .landing-trigger, .nav-link, .nav-trigger):hover,
body.public-site :where(.nav-links > a, .landing-trigger, .nav-link, .nav-trigger).active,
body.public-site :where(.nav-links > a, .landing-trigger, .nav-link, .nav-trigger)[aria-current="page"] {
    color: var(--ct-white) !important;
}

body.public-site .nav-menu.active > .nav-trigger {
    color: var(--ct-white) !important;
    box-shadow: inset 0 -2px 0 var(--ct-purple-bright);
}

body.public-site :where(.nav-links > a, .landing-trigger, .nav-link)::after {
    background: linear-gradient(90deg, var(--ct-purple-bright), var(--ct-purple-dark)) !important;
}

body.public-site :where(.landing-panel, .nav-panel) {
    border-color: rgba(196, 181, 253, 0.18) !important;
    background: rgba(17, 19, 38, 0.97) !important;
}

body.public-site :where(.landing-panel, .nav-panel) a:hover {
    border-color: rgba(139, 92, 246, 0.20) !important;
    background: rgba(124, 58, 237, 0.12) !important;
}

/* Compact public actions stay on the AA-safe solid purple. */
body.public-site :where(.btn, .button).primary {
    border-color: var(--ct-purple) !important;
    background: var(--ct-purple) !important;
    color: var(--ct-white) !important;
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.26), inset 0 1px rgba(255, 255, 255, 0.18) !important;
    text-shadow: none;
}

/* The exact brand gradient is reserved for large conversion CTAs (19px bold). */
body.public-site :where(.hero-actions, .cta, .cta-box, .orbit-cta) :where(.btn, .button).primary {
    border-color: rgba(196, 181, 253, 0.36) !important;
    background: var(--ct-cta-gradient) !important;
    color: var(--ct-white) !important;
    box-shadow: 0 15px 40px rgba(124, 58, 237, 0.30), inset 0 1px rgba(255, 255, 255, 0.22) !important;
    font-size: max(1.1875rem, 19px) !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(7, 8, 22, 0.45);
}

body.public-site :where(.btn, .button).primary:hover {
    border-color: var(--ct-purple-dark) !important;
    background: var(--ct-purple-dark) !important;
    box-shadow: 0 19px 48px rgba(124, 58, 237, 0.38), inset 0 1px rgba(255, 255, 255, 0.24) !important;
}

body.public-site :where(.hero-actions, .cta, .cta-box, .orbit-cta) :where(.btn, .button).primary:hover {
    border-color: rgba(196, 181, 253, 0.58) !important;
    background: var(--ct-cta-gradient) !important;
}

body.public-site .gradient-text {
    background: linear-gradient(100deg, var(--ct-white) 0%, var(--ct-lavender) 42%, var(--ct-purple-bright) 72%, var(--ct-lavender) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

body.public-site :where(.section-kicker, .card-number, .story-points b, .story-copy li::before),
body.public-site :where(.faq button, .faq summary)::after,
body.public-site .estimator-control output {
    color: var(--ct-lavender) !important;
}

body.public-site .section-kicker::before,
body.public-site .process-progress::after,
body.public-site .pipeline-connector,
body.public-site .mini-chart::before {
    background-color: var(--ct-purple) !important;
    border-color: var(--ct-purple-bright) !important;
}

body.public-site :where(.pipeline-card, .stage-card, .bento-card, .feature, .step, .pricing-card, .faq, .calc-box, .metric-board, .quote-box, .info-card, .plan, .story-visual, .cta-box) {
    border-color: var(--ct-border) !important;
}

body.public-site :where(.pipeline-card, .stage-card, .bento-card, .feature, .step, .pricing-card, .faq, .info-card, .plan) {
    background-color: rgba(17, 19, 38, 0.88) !important;
}

body.public-site :where(.bento-card, .feature, .step, .pricing-card, .faq, .info-card, .plan):hover {
    border-color: rgba(139, 92, 246, 0.42) !important;
}

body.public-site :where(.process-tab.active, .process-tab[aria-selected="true"], .plan.featured, .pricing-card.featured) {
    border-color: rgba(139, 92, 246, 0.52) !important;
    background: linear-gradient(155deg, rgba(91, 33, 182, 0.34), rgba(17, 19, 38, 0.96)) !important;
    box-shadow: 0 28px 82px rgba(91, 33, 182, 0.18), inset 0 1px rgba(255, 255, 255, 0.07) !important;
}

body.public-site :where(.process-tab.active, .process-tab[aria-selected="true"]) .process-progress::after,
body.public-site .process-tab.is-progressing .process-progress::after {
    background: linear-gradient(90deg, var(--ct-purple), var(--ct-purple-bright)) !important;
}

body.public-site :where(.plan-badge, .pricing-badge) {
    background: var(--ct-purple) !important;
    color: var(--ct-white) !important;
}

body.public-site .estimator-control input[type="range"] {
    accent-color: var(--ct-purple);
}

body.public-site .estimator-control input[type="range"]::-webkit-slider-thumb,
body.public-site .estimator-control input[type="range"]::-moz-range-thumb {
    background: var(--ct-purple-bright) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.16), 0 0 24px rgba(124, 58, 237, 0.44) !important;
}

body.public-site :where(.live, .live-dot, .status-ok, .success, .good) {
    color: var(--ct-success) !important;
}

body.public-site :where(.error, .failed, .danger, .bad, .loss, .negative, .status-error) {
    color: var(--ct-danger) !important;
}

/* Keep the vendor-supplied pixels in platform artwork unchanged. */
body.public-site img:is([src*="shopify"], [src*="woocommerce"], [src*="meta"], [src*="facebook"]),
.ct-integration-logo,
.ct-meta-help-step img {
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* --------------------------------------------------------------------------
   Dashboard shell and legacy dashboard components
   -------------------------------------------------------------------------- */

body:not(.public-site):not(.ct-light-page):not(.ct-onboarding-body) {
    background: var(--ct-page-background) !important;
    color: var(--ct-white) !important;
}

.dashboard-nav-card,
.panel,
.filters,
.card,
.trading-panel,
.section,
.box {
    border-color: var(--ct-border) !important;
    background-color: rgba(17, 19, 38, 0.92) !important;
}

.dashboard-nav-card {
    background: rgba(13, 15, 32, 0.96) !important;
}

.dashboard-brand-mark,
.brand-mark,
.mark:not(.shopify) {
    background: var(--ct-cta-gradient) !important;
    color: var(--ct-white) !important;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.30) !important;
}

.dashboard-menu-workspace[open],
.dashboard-menu-workspace.is-active {
    border-color: var(--ct-border) !important;
    background: rgba(124, 58, 237, 0.07) !important;
}

.dashboard-menu-workspace.is-active > summary {
    color: var(--ct-lavender) !important;
}

.dashboard-menu a.active,
.menu a.active,
.nav a.active,
.quick-links a.active,
.settings-tab.active,
.filter-segment-options a.active,
.pagination .active {
    border-color: rgba(139, 92, 246, 0.42) !important;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.28), rgba(124, 58, 237, 0.08)) !important;
    color: var(--ct-white) !important;
    box-shadow: inset 3px 0 0 var(--ct-purple) !important;
}

.dashboard-menu a.active::before {
    background: var(--ct-purple-bright) !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18) !important;
}

/* Compact dashboard actions use the solid darker purple for AA contrast. */
.btn.primary,
button.primary,
input[type="submit"].primary,
.form-button:not(.secondary),
.campaign-view-btn.primary,
.campaign-copy-btn.primary {
    border-color: var(--ct-purple) !important;
    background: var(--ct-purple) !important;
    color: var(--ct-white) !important;
    text-shadow: none;
}

.btn.primary:hover,
button.primary:hover,
input[type="submit"].primary:hover,
.form-button:not(.secondary):hover {
    border-color: var(--ct-purple-dark) !important;
    background: var(--ct-purple-dark) !important;
}

a {
    color: var(--ct-lavender);
}

a:hover {
    color: var(--ct-white);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    border-color: #3A3264 !important;
    background-color: #0D0F20 !important;
    color: var(--ct-white) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--ct-purple-bright) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18) !important;
}

input::placeholder,
textarea::placeholder {
    color: #77758A !important;
}

.table-wrap,
table {
    border-color: var(--ct-border) !important;
    background-color: #0D0F20 !important;
}

th {
    border-color: var(--ct-border) !important;
    background-color: #18162E !important;
    color: var(--ct-text-muted) !important;
}

td {
    border-color: rgba(37, 32, 68, 0.74) !important;
}

tbody tr:hover {
    background: rgba(124, 58, 237, 0.08) !important;
}

.badge:not(.sent):not(.failed):not(.error):not(.good):not(.bad):not(.success):not(.danger):not(.SCALE):not(.REDUCE),
.chip,
.pill:not(.good):not(.bad):not(.success):not(.danger) {
    border-color: rgba(139, 92, 246, 0.28) !important;
    background: rgba(124, 58, 237, 0.14) !important;
    color: var(--ct-lavender) !important;
}

.badge.sent,
.badge.success,
.badge.good,
.badge.SCALE,
.status-ok,
.delta-pos,
.result-improved,
.validation-ok,
.good,
.positive,
.profit,
.fresh-FRESH,
.progress-requirement.met,
.peak-badge.good,
.di-badge.good {
    border-color: rgba(34, 197, 94, 0.38) !important;
    background-color: rgba(34, 197, 94, 0.13) !important;
    color: #86EFAC !important;
}

.badge.failed,
.badge.error,
.badge.danger,
.badge.bad,
.badge.REDUCE,
.status-error,
.delta-neg,
.result-worse,
.validation-warning,
.error,
.danger,
.bad,
.negative,
.loss,
.fresh-STALE_DATA,
.peak-badge.bad,
.di-badge.bad {
    border-color: rgba(239, 68, 68, 0.40) !important;
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #FCA5A5 !important;
}

.badge.pending,
.badge.KEEP,
.badge.STILL_EARLY,
.badge.browser,
.badge.server,
.dashboard-view-user-badge,
.alert.warning,
.status-wait,
.result-stable,
.result-not_enough_data,
.delta-flat,
.peak-badge.watch,
.di-badge.watch,
.progress-requirement.missing {
    border-color: rgba(196, 181, 253, 0.30) !important;
    background-color: rgba(196, 181, 253, 0.10) !important;
    color: var(--ct-lavender) !important;
}

.warn,
.warning,
.peak-mode,
.opportunity-score {
    border-color: rgba(196, 181, 253, 0.30) !important;
    background-color: rgba(196, 181, 253, 0.10) !important;
    color: var(--ct-lavender) !important;
}

/* Generic chart decoration is purple; semantic positive/negative data stays green/red. */
.apexcharts-text,
.apexcharts-legend-text,
.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
    fill: var(--ct-text-muted) !important;
    color: var(--ct-text-muted) !important;
}

.apexcharts-gridline {
    stroke: var(--ct-border) !important;
}

.mini-chart,
.chart-card,
.chart-wrap,
.metric-board {
    border-color: var(--ct-border) !important;
    background-color: rgba(17, 19, 38, 0.88) !important;
}

/* --------------------------------------------------------------------------
   Store connection manager
   -------------------------------------------------------------------------- */

.ct-store-manager {
    --ct-store-blue: var(--ct-purple);
    --ct-store-violet: var(--ct-purple-bright);
    --ct-store-green: var(--ct-success);
}

.ct-store-tabs,
.ct-store-hero,
.ct-store-empty,
.ct-store-grid,
.ct-store-card,
.ct-store-dialog,
.ct-store-dialog-head,
.ct-store-dialog-actions,
.ct-integration-row,
.ct-meta-help,
.ct-meta-help-step {
    border-color: var(--ct-border) !important;
}

.ct-store-tabs,
.ct-store-empty,
.ct-store-grid,
.ct-integration-row,
.ct-meta-help {
    background-color: rgba(13, 15, 32, 0.88) !important;
}

.ct-store-hero,
.ct-store-card,
.ct-store-dialog,
.ct-meta-help-step {
    background: linear-gradient(145deg, rgba(17, 19, 38, 0.98), rgba(13, 15, 32, 0.98)) !important;
}

.ct-store-tab.active,
.ct-store-card.selected,
.ct-pixel-platform.active {
    border-color: rgba(139, 92, 246, 0.58) !important;
    background-color: rgba(124, 58, 237, 0.16) !important;
    color: var(--ct-white) !important;
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.22) !important;
}

.ct-store-tab-icon,
.ct-store-empty-art span,
.ct-integration-mark {
    background: var(--ct-cta-gradient) !important;
}

.ct-switch input:checked + span {
    background: var(--ct-purple) !important;
}

.ct-store-required-note {
    border-color: rgba(139, 92, 246, 0.34) !important;
    background: rgba(124, 58, 237, 0.10) !important;
}

.ct-store-required-link,
.ct-meta-help-source,
.ct-store-setup code,
.ct-store-eyebrow {
    color: var(--ct-purple-bright) !important;
}

.ct-meta-help summary::after {
    background: rgba(124, 58, 237, 0.14) !important;
    color: var(--ct-lavender) !important;
}

.ct-store-status.active,
.ct-store-alert:not(.error) {
    border-color: rgba(34, 197, 94, 0.38) !important;
    background: rgba(34, 197, 94, 0.13) !important;
    color: #86EFAC !important;
}

.ct-store-status.error,
.ct-store-alert.error,
.ct-store-inline-error,
.ct-store-form-error:not(:empty) {
    border-color: rgba(239, 68, 68, 0.40) !important;
    background: rgba(239, 68, 68, 0.12) !important;
    color: #FCA5A5 !important;
}

.ct-store-status.in_review,
.ct-store-status.prestore,
.ct-store-status.pending_install,
.ct-store-status.pending_verification {
    background: rgba(196, 181, 253, 0.10) !important;
    color: var(--ct-lavender) !important;
}

/* Shopify green is retained only where it identifies Shopify itself. */
.ct-store-logo.shopify,
.ct-onboarding-platform-mark.shopify,
.help-mark.shopify {
    background: #78A943 !important;
}

/* --------------------------------------------------------------------------
   Light onboarding, help and legal pages
   -------------------------------------------------------------------------- */

body.ct-onboarding-body,
body.ct-light-page {
    --bg: var(--ct-light-bg);
    --panel: var(--ct-white);
    --text: var(--ct-dark-text);
    --muted: #5F5D6D;
    color-scheme: light;
    background: var(--ct-light-bg) !important;
    color: var(--ct-dark-text) !important;
}

body.ct-onboarding-body :where(.ct-onboarding-sidebar, .ct-onboarding-main, .ct-onboarding-topbar, .ct-store-hero, .ct-store-empty, .ct-store-grid, .ct-store-card, .ct-store-dialog, .ct-store-dialog-head, .ct-store-dialog-actions, .ct-integration-row, .ct-meta-help, .ct-meta-help-step, .ct-welcome-card),
body.ct-light-page :where(.help-header, .help-sidebar, .help-step, .help-prerequisites, .doc) {
    border-color: rgba(37, 32, 68, 0.18) !important;
    background: var(--ct-white) !important;
    color: var(--ct-dark-text) !important;
}

body.ct-onboarding-body .ct-onboarding-content .ct-store-hero {
    border-color: transparent !important;
}

body.ct-onboarding-body .ct-onboarding-content .ct-store-empty {
    border-color: transparent !important;
    background-color: var(--ct-white) !important;
    background-image: radial-gradient(rgba(124, 58, 237, 0.15) 1.1px, transparent 1.1px) !important;
    background-size: 10px 10px !important;
}

body.ct-onboarding-body :where(.ct-onboarding-platform.active, .ct-pixel-platform.active),
body.ct-light-page .help-platform.active {
    border-color: rgba(124, 58, 237, 0.24) !important;
    background: rgba(124, 58, 237, 0.10) !important;
    color: var(--ct-purple-dark) !important;
}

body.ct-onboarding-body :where(.ct-onboarding-brand-mark, .ct-onboarding-avatar, .ct-onboarding-platform-mark:not(.shopify)),
body.ct-light-page :where(.help-brand span, .help-mark:not(.shopify), .help-step-number) {
    background: var(--ct-purple) !important;
    color: var(--ct-white) !important;
}

body.ct-onboarding-body :where(.ct-onboarding-help a, .ct-onboarding-topbar-actions a, .ct-store-required-link, .ct-meta-help-source),
body.ct-light-page :where(a, .help-kicker) {
    color: var(--ct-purple-dark) !important;
}

body.ct-onboarding-body :where(.ct-onboarding-nav-label, .ct-onboarding-help, .ct-store-hero p, .ct-store-empty p, .ct-store-card-title p, .ct-store-field small, .ct-meta-help-step span),
body.ct-light-page :where(.help-sidebar small, .help-lead, .help-step p, .meta, p, li, footer) {
    color: #5F5D6D !important;
}

body.ct-onboarding-body :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
body.ct-light-page :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    border-color: rgba(37, 32, 68, 0.26) !important;
    background: var(--ct-white) !important;
    color: var(--ct-dark-text) !important;
}

body.ct-onboarding-body :where(.btn.primary, button.primary),
body.ct-light-page :where(.help-button.primary, .button.primary, .btn.primary) {
    border-color: var(--ct-purple) !important;
    background: var(--ct-purple) !important;
    color: var(--ct-white) !important;
}

body.ct-light-page header {
    border-color: var(--ct-border) !important;
    background: var(--ct-bg-secondary) !important;
    color: var(--ct-white) !important;
}

body.ct-light-page .nav a {
    color: var(--ct-lavender) !important;
}

body.ct-light-page :where(.help-warning, .ct-meta-help-note) {
    border-color: var(--ct-purple-bright) !important;
    background: rgba(124, 58, 237, 0.08) !important;
    color: #4C1D95 !important;
}

/* --------------------------------------------------------------------------
   Authentication, MCP authorization and API documentation
   -------------------------------------------------------------------------- */

body.ct-auth-page,
body.ct-mcp-page,
body.ct-api-page {
    background: var(--ct-page-background) !important;
    color: var(--ct-white) !important;
}

body.ct-auth-page .card,
body.ct-mcp-page .card,
body.ct-api-page :where(.card, .panel, .endpoint) {
    border-color: var(--ct-border) !important;
    background: rgba(17, 19, 38, 0.94) !important;
}

body.ct-auth-page :where(.mark, button),
body.ct-mcp-page :where(.brand, .primary),
body.ct-api-page :where(.eyebrow, .method.post) {
    border-color: rgba(139, 92, 246, 0.38) !important;
    background: var(--ct-purple) !important;
    color: var(--ct-white) !important;
}

body.ct-mcp-page .secondary {
    border: 1px solid var(--ct-border) !important;
    background: #18162E !important;
    color: var(--ct-white) !important;
}

body.ct-mcp-page .brand {
    border: 0 !important;
    background: transparent !important;
    color: var(--ct-lavender) !important;
}

body.ct-auth-page :where(a, .hint),
body.ct-mcp-page :where(p, .fine, .account span),
body.ct-api-page :where(a, .path) {
    color: var(--ct-lavender) !important;
}

body.ct-auth-page .error,
body.ct-mcp-page .notice,
body.ct-api-page .bad {
    border-color: rgba(239, 68, 68, 0.40) !important;
    background: rgba(239, 68, 68, 0.12) !important;
    color: #FCA5A5 !important;
}

body.ct-api-page :where(.chip, .method.post) {
    border-color: rgba(139, 92, 246, 0.30) !important;
    background: rgba(124, 58, 237, 0.13) !important;
    color: var(--ct-lavender) !important;
}

body.ct-api-page :where(.good, .method.get) {
    color: #86EFAC !important;
}

body.ct-api-page .warn {
    color: var(--ct-lavender) !important;
}

/* --------------------------------------------------------------------------
   Responsive safeguards
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    body.public-site :where(.nav-inner, .nav-shell),
    .dashboard-nav-card {
        border-color: var(--ct-border) !important;
    }

    body.public-site :where(.nav-links, .nav-main).mobile-open {
        border-color: rgba(139, 92, 246, 0.24) !important;
        background: rgba(17, 19, 38, 0.98) !important;
    }

    .dashboard-menu-shell.is-open .dashboard-menu {
        background: transparent !important;
    }
}

@media (max-width: 620px) {
    body.public-site :where(.hero-actions, .hero-actions .btn, .hero-actions .button),
    .topbar .actions :where(.btn, button),
    .ct-store-actions :where(.btn, button) {
        max-width: 100%;
    }

    .table-wrap,
    .ct-store-dialog,
    body.ct-light-page .doc {
        max-width: 100%;
    }

    body.ct-light-page .doc,
    body.ct-auth-page .card,
    body.ct-mcp-page .card {
        border-radius: 16px !important;
    }

    body.ct-help-page :where(.help-layout, .help-sidebar, .help-main, .help-platforms, .help-platform) {
        min-width: 0;
    }

    body.ct-help-page .help-platforms {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.ct-help-page .help-platform {
        padding-inline: 7px !important;
        font-size: 12px;
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.public-site *,
    body.public-site *::before,
    body.public-site *::after {
        scroll-behavior: auto !important;
    }
}