/*
 * ATLAS-31: light redesign (client dashboard, sending server type page, plan cards,
 * free-plan checkout). Loaded after custom.css. Every class is prefixed "rd-" or scoped
 * under one, so nothing outside the redesigned pages is affected.
 */

:root {
    --rd-card-bg: #ffffff;
    --rd-tile-bg: #ffffff;
    --rd-subtle-bg: #f7f9fc;
    --rd-border: #e6e9ef;
    --rd-text: #0f172a;
    --rd-muted: #64748b;
    --rd-icon-bg: #eef4ff;
    --rd-icon-color: var(--var-color-blue-500);
    --rd-track: #eef1f5;
    --rd-radius: 10px;
    --rd-radius-sm: 8px;
}

body.mode-dark {
    --rd-card-bg: #0f1519;
    --rd-tile-bg: #0f1519;
    --rd-subtle-bg: #141c21;
    --rd-border: #222c33;
    --rd-text: #ffffff;
    --rd-muted: #94a3b8;
    --rd-icon-bg: #18232b;
    --rd-icon-color: #ffffff;
    --rd-track: #222c33;
}

/* ───────────────────────── Icons ───────────────────────── */

/* Inline Lucide icons (<x-lucide>): stroke only, so no inherited `svg { fill }` may paint them */
svg.lucide {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    fill: none !important;
}

/* ───────────────────────── Buttons (blue theme) ───────────────────────── */

.btn.rd-btn-primary,
.btn.rd-btn-primary:focus {
    background-color: #1a6cf5 !important;
    border-color: #1a6cf5 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.btn.rd-btn-primary:hover,
.btn.rd-btn-primary:active {
    background-color: #0f5ae0 !important;
    border-color: #0f5ae0 !important;
    color: #ffffff !important;
}

/* Secondary choice next to a blue button (non-featured plan cards) */
.btn.rd-btn-soft,
.btn.rd-btn-soft:focus {
    background-color: #f1f3f6 !important;
    border-color: #f1f3f6 !important;
    color: var(--rd-text) !important;
    box-shadow: none !important;
}

.btn.rd-btn-soft:hover {
    background-color: #1a6cf5 !important;
    border-color: #1a6cf5 !important;
    color: #ffffff !important;
}

body.mode-dark .btn.rd-btn-soft,
body.mode-dark .btn.rd-btn-soft:focus {
    background-color: #1b252c !important;
    border-color: #1b252c !important;
}

body.mode-dark .btn.rd-btn-soft:hover {
    background-color: #1a6cf5 !important;
    border-color: #1a6cf5 !important;
}

/* ───────────────────────── Card shell ───────────────────────── */

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

.rd-card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    min-height: 34px;
}

.rd-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--rd-radius-sm);
    background: var(--rd-icon-bg);
    color: var(--rd-icon-color);
}

.rd-card-icon svg {
    width: 17px;
    height: 17px;
}

.rd-card-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--rd-text);
}

.rd-card-info {
    display: inline-flex;
    color: var(--rd-muted);
    cursor: default;
}

.rd-card-meta {
    font-size: 12px;
    color: var(--rd-muted);
    white-space: nowrap;
}

.rd-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--var-color-blue-500);
    text-decoration: none;
    white-space: nowrap;
}

.rd-card-link:hover {
    color: var(--var-color-blue-600);
    text-decoration: underline;
}


body.mode-dark .rd-card-link {
    color: #60a5fa;
}

.rd-card-select {
    width: 130px;
}

.rd-card-select .form-group {
    margin-bottom: 0 !important;
}

/* app.css gives every Select2 min-width:150px, which spills past the 130px wrapper */
.rd-card-select .select2-container {
    width: 100% !important;
    min-width: 0;
}

.rd-card-select .help-block,
.rd-card-select .form-text {
    display: none;
}

.rd-card-select .select2-container .select2-selection--single {
    height: 32px !important;
    border-radius: var(--rd-radius-sm) !important;
    font-size: 13px;
}

/* Tiles: the small bordered boxes inside a card */
.rd-tile {
    background: var(--rd-tile-bg);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-sm);
    padding: 12px 14px;
}

.rd-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--rd-track);
}

.rd-progress .progress-bar {
    border-radius: 999px;
    background-color: var(--var-color-blue-500) !important;
}

body.mode-dark .rd-progress .progress-bar {
    background-color: var(--var-color-green-500) !important;
}

/* ───────────────────────── Dashboard: equal-height rows ───────────────────────── */

/* The account summary itself is untouched; its box only stretches to the row height. */
@media (min-width: 768px) {
    .rd-row-equal > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }

    .rd-row-equal > [class*="col-"] > .rd-card {
        flex: 1 1 auto;
    }

    .rd-row-equal #account-summary-grid {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .rd-row-equal #account-summary-grid > .dashboard-summery-wrapper {
        flex: 1 1 auto;
        align-content: space-evenly;
    }
}

/* ───────────────────────── Dashboard: onboarding ───────────────────────── */

.rd-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rd-checklist > li + li {
    border-top: 1px solid var(--rd-border);
}

.rd-checklist > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    font-size: 14px;
    color: var(--rd-text) !important;
    text-decoration: none;
    border-radius: 6px;
}

.rd-checklist > li > a:hover {
    background: var(--rd-subtle-bg);
}

/* Round check badge: outlined when open, filled when the task is done */
.rd-checklist .rd-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    color: transparent;
}

.rd-checklist a.is-completed .rd-check {
    border-color: var(--var-color-blue-500);
    background: var(--var-color-blue-500);
    color: #ffffff;
}

body.mode-dark .rd-checklist .rd-check {
    border-color: #475569;
}

body.mode-dark .rd-checklist a.is-completed .rd-check {
    border-color: var(--var-color-green-500);
    background: var(--var-color-green-500);
}

.rd-checklist .rd-checklist-label {
    flex: 1 1 auto;
    min-width: 0;
}

.rd-checklist .rd-chevron {
    color: var(--rd-muted);
    flex-shrink: 0;
}

.rd-checklist > li > a:hover .rd-chevron {
    color: var(--var-color-blue-500);
}

/* ───────────────────────── Dashboard: list growth ───────────────────────── */

.rd-card .dashboard-growth-metrics .growth-total {
    margin-bottom: 4px;
}

.rd-card .dashboard-growth-metrics .growth-total-title {
    font-size: 12px;
    color: var(--rd-muted);
}

.rd-card .dashboard-growth-metrics .growth-total-number {
    font-size: 26px;
}

.rd-card .dashboard-growth-metrics .growth-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.rd-card .growth-card.dashboard-summery-box {
    align-items: center;
    gap: 10px;
    padding: 12px !important;
    background: var(--rd-tile-bg);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-sm);
    min-width: 0;
}

.rd-card .growth-card.dashboard-summery-box::before,
.rd-card .growth-card.dashboard-summery-box::after {
    display: none !important;
}

.rd-card .growth-card.dashboard-summery-box .icon {
    width: 36px;
    height: 36px;
    border-radius: var(--rd-radius-sm);
}

.rd-card .growth-card.dashboard-summery-box .content {
    min-width: 0;
}

.rd-card .growth-card.dashboard-summery-box .content .title {
    font-size: 12px;
    color: var(--rd-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-card .growth-card.dashboard-summery-box .content .number {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.rd-card .growth-card.dashboard-summery-box .d-flex {
    flex-wrap: wrap;
    column-gap: 6px !important;
    row-gap: 0 !important;
}

.rd-card .growth-card.dashboard-summery-box .icon svg {
    width: 20px;
    height: 20px;
}

body.mode-dark .rd-card .growth-card.dashboard-summery-box .icon {
    background-color: var(--rd-icon-bg);
}

/* custom.css greys out every area chart in dark mode; this one follows the mockup instead */
body.mode-dark #ListsGrowthChart2 .apexcharts-area-series .apexcharts-series path:first-child {
    fill: url(#rd-growth-fill-dark);
}

body.mode-dark #ListsGrowthChart2 .apexcharts-area-series .apexcharts-series > path {
    stroke: #3b82f6;
}

@media (max-width: 767px) {
    .rd-card .dashboard-growth-metrics .growth-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ───────────────────────── Dashboard: deliverability ───────────────────────── */

.rd-deliverability .dd-rates-grid {
    gap: 10px;
    margin-bottom: 10px;
}

.rd-deliverability .dd-rate-box {
    background: var(--rd-tile-bg);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-sm);
    padding: 12px 14px;
}

.rd-deliverability .dd-rate-box .rate-label {
    color: var(--rd-muted);
}

.rd-deliverability .dd-rate-progress {
    height: 6px;
    background: var(--rd-track);
}

.rd-deliverability .dd-blacklist-card {
    align-items: center;
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-sm);
    background: var(--rd-tile-bg);
}

.rd-deliverability .dd-blacklist-status {
    position: relative;
    padding-left: 52px;
    min-height: 40px;
    justify-content: center;
}

/* Shield badge beside the blacklist state, coloured to match it */
.rd-deliverability .dd-blacklist-shield {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rd-radius-sm);
    color: var(--var-color-green-500);
    background: var(--var-color-green-50);
}

.rd-deliverability .dd-blacklist-status:has(.is-warning) .dd-blacklist-shield {
    color: var(--var-color-yellow-500);
    background: var(--var-color-yellow-50);
}

/* No shield space on the loading skeleton */
.rd-deliverability .placeholder-glow .dd-blacklist-status {
    padding-left: 0;
}

body.mode-dark .rd-deliverability .dd-blacklist-shield {
    background: rgba(34, 197, 94, 0.12);
}

body.mode-dark .rd-deliverability .dd-blacklist-status:has(.is-warning) .dd-blacklist-shield {
    background: rgba(234, 179, 8, 0.12);
}

.rd-deliverability .dd-blacklist-heading {
    font-size: 12px;
    font-weight: 500;
    color: var(--rd-muted);
}

.rd-deliverability .dd-blacklist-count-box {
    padding-left: 16px;
    border-left: 1px solid var(--rd-border);
}

.rd-deliverability .deliverability-isp-title {
    font-size: 13px;
    margin-bottom: 8px;
}

.rd-deliverability .dd-provider-list {
    gap: 8px;
}

.rd-deliverability .dd-provider-card {
    flex: 1 1 110px;
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-sm);
    background: var(--rd-tile-bg);
}

body.mode-dark .rd-deliverability .dd-blacklist-card,
body.mode-dark .rd-deliverability .dd-provider-card {
    border-color: var(--rd-border);
    background: var(--rd-tile-bg);
}

/* ───────────────────────── Dashboard: recent broadcasts ───────────────────────── */

.rd-card.recent-campaigns-card {
    padding: 20px;
}

.rd-card .recent-campaigns-table > thead > tr > th {
    font-size: 11px;
    padding: 10px;
    color: var(--rd-muted);
    background: var(--rd-subtle-bg);
    border-bottom-color: var(--rd-border);
}

.rd-card .recent-campaigns-table > tbody > tr > td {
    padding: 10px;
    font-size: 13px;
    border-bottom-color: var(--rd-border);
}

.rd-card .recent-campaigns-table .campaign-icon-box {
    width: 34px;
    height: 34px;
    padding: 6px;
    border-radius: var(--rd-radius-sm);
    border-color: var(--rd-border);
    background: var(--rd-icon-bg);
}

.rd-card .recent-campaigns-table .campaign-icon-box {
    color: var(--var-color-blue-500);
}

.rd-card .recent-campaigns-table .campaign-icon-box svg {
    width: 18px;
    height: 18px;
}

body.mode-dark .rd-card .recent-campaigns-table .campaign-icon-box {
    color: #60a5fa;
}

.rd-card .recent-campaigns-table .campaign-name {
    color: var(--var-color-blue-500);
}

body.mode-dark .rd-card .recent-campaigns-table .campaign-name {
    color: #60a5fa;
}

.rd-card .recent-campaigns-table .campaign-type-badge {
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 6px;
    background: var(--rd-subtle-bg);
    border: 1px solid var(--rd-border);
}

body.mode-dark .rd-card .recent-campaigns-table > thead > tr > th,
body.mode-dark .rd-card .recent-campaigns-table > tbody > tr > td {
    border-color: var(--rd-border);
}

body.mode-dark .rd-card .recent-campaigns-table .campaign-type-badge {
    background: transparent;
    border: 0;
    padding: 0;
}

@media (max-width: 767px) {
    .rd-card,
    .rd-card.recent-campaigns-card {
        padding: 16px;
    }
}

/* ───────────────────────── Shared bits ───────────────────────── */

.rd-page-intro {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--rd-muted);
}

.rd-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--var-color-blue-600);
    background: var(--var-color-blue-50);
    vertical-align: middle;
}

.rd-badge-success {
    color: var(--var-color-green-600);
    background: var(--var-color-green-50);
}

body.mode-dark .rd-badge {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.16);
}

body.mode-dark .rd-badge-success {
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
}

.rd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-sm);
    background: var(--rd-subtle-bg);
    font-size: 12px;
    color: var(--rd-text);
    white-space: nowrap;
}

.rd-chip svg {
    color: var(--rd-muted);
}

/* ───────────────────────── Sending server type page ───────────────────────── */

.rd-server-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rd-server-row {
    display: grid;
    grid-template-columns: 52px minmax(220px, 1.1fr) minmax(0, 1.5fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--rd-card-bg);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius);
    transition: border-color 0.15s ease;
}

.rd-server-row:hover {
    border-color: var(--var-color-blue-500);
}

.rd-server-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius);
    background: #ffffff;
}

.rd-server-logo .rd-server-logo-svg {
    display: block;
    width: 30px;
    height: 30px;
}

.rd-server-logo .server-avatar {
    display: block;
    width: 36px;
    height: 36px;
    background-position: center !important;
    background-size: contain !important;
}

.rd-server-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 600;
}

.rd-server-name a {
    color: var(--rd-text) !important;
    text-decoration: none;
}

.rd-server-name a:hover {
    color: var(--var-color-blue-500) !important;
}

.rd-server-intro {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--rd-muted);
}

.rd-server-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.rd-server-features .rd-chip {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-server-choose {
    min-width: 84px;
    border-radius: var(--rd-radius-sm) !important;
}

@media (max-width: 1199px) {
    .rd-server-row {
        grid-template-columns: 52px minmax(0, 1fr) auto;
    }

    .rd-server-features {
        grid-column: 2 / -1;
        grid-row: 2;
    }
}

@media (max-width: 575px) {
    .rd-server-row {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .rd-server-choose {
        grid-column: 1 / -1;
    }

    .rd-server-features {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ───────────────────────── Notices ───────────────────────── */

.rd-page-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--rd-text);
}

.rd-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 12px;
    border: 1px solid;
    border-radius: var(--rd-radius);
    font-size: 13px;
}

.rd-notice > .rd-notice-icon {
    flex-shrink: 0;
}

.rd-notice strong {
    display: block;
    font-weight: 600;
    color: var(--rd-text);
}

.rd-notice p {
    margin: 2px 0 0;
    color: var(--rd-muted);
}

.rd-notice-warning {
    background: #fff8ec;
    border-color: #fde3b5;
}

.rd-notice-warning > .rd-notice-icon {
    color: #f59e0b;
}

.rd-notice-info {
    background: #f1f6fe;
    border-color: #cfe0fb;
}

.rd-notice-info > .rd-notice-icon {
    color: var(--var-color-blue-500);
}

.rd-notice-success {
    background: #effaf3;
    border-color: #ccefd9;
}

.rd-notice-success > .rd-notice-icon {
    color: var(--var-color-green-600);
}

body.mode-dark .rd-notice-warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}

body.mode-dark .rd-notice-info {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
}

body.mode-dark .rd-notice-success {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.3);
}

/* ───────────────────────── Plan cards ───────────────────────── */

.rd-select-plan {
    max-width: 1240px;
}

.rd-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

/* A lone plan is centred at card width, like the mockup */
.rd-plan-grid:has(> .rd-plan-card:only-child) {
    grid-template-columns: minmax(0, 360px);
    justify-content: center;
}

.rd-plan-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--rd-card-bg);
    border: 1px solid var(--rd-border);
    border-radius: 12px;
    color: var(--rd-text);
}

.rd-plan-card.is-featured {
    border-color: var(--var-color-blue-500);
    background: linear-gradient(180deg, #f5f9ff 0%, var(--rd-card-bg) 60%);
}

body.mode-dark .rd-plan-card.is-featured {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, var(--rd-card-bg) 60%);
}

.rd-plan-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.rd-plan-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--rd-radius);
    background: var(--rd-icon-bg);
    color: var(--var-color-blue-500);
}


body.mode-dark .rd-plan-icon {
    color: #60a5fa;
}

.rd-plan-badge {
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}

.rd-plan-badge svg.lucide {
    fill: currentColor !important;
}

.rd-plan-name {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--rd-text);
}

.rd-plan-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--rd-muted);
}

.rd-plan-heading {
    min-height: 74px;
}

.rd-plan-divider {
    margin: 16px 0;
    border-color: var(--rd-border);
    opacity: 1;
}

.rd-plan-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
}

.rd-plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rd-plan-features .rd-plan-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--var-color-blue-500);
    background: var(--var-color-blue-50);
}

body.mode-dark .rd-plan-features .rd-plan-check {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.16);
}

.rd-plan-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rd-plan-starting {
    font-size: 13px;
    color: var(--rd-muted);
}

.rd-plan-amount {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.rd-plan-value {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--rd-text);
}

.rd-plan-currency {
    margin-top: 4px;
    font-size: 14px;
    color: var(--rd-muted);
}

.rd-plan-period {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--rd-muted);
}


.rd-plan-footer {
    margin-top: auto;
    padding-top: 20px;
}

.rd-plan-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-weight: 600;
    text-align: center;
    border-radius: var(--rd-radius-sm) !important;
}

.rd-plan-trial {
    margin: 12px 0 0;
    font-size: 13px;
    text-align: center;
    color: var(--rd-muted);
    cursor: pointer;
}

.rd-plan-btn {
    padding-top: 12px;
    padding-bottom: 12px;
}

.rd-assign-plan {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 0;
}

/* ───────────────────────── Free-plan checkout (new account) ───────────────────────── */

.rd-checkout {
    max-width: 1080px;
}

.rd-step {
    padding: 20px;
    margin-bottom: 14px;
    background: var(--rd-card-bg);
    border: 1px solid var(--rd-border);
    border-radius: 12px;
}

.rd-step-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.rd-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1a6cf5;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
}

.rd-step-heading h5 {
    margin: 2px 0 2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--rd-text);
}

.rd-step-heading p {
    margin: 0;
    font-size: 13px;
    color: var(--rd-muted);
}

.rd-step-header .rd-card-link {
    margin-top: 6px;
}

.rd-step-done {
    color: var(--var-color-green-500);
    flex-shrink: 0;
}

.rd-selected-plan {
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius);
    overflow: hidden;
}

.rd-selected-plan-main {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--rd-subtle-bg);
}

.rd-selected-plan-name {
    flex: 1 1 auto;
    min-width: 0;
}

.rd-selected-plan-name h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--rd-text);
}

.rd-selected-plan-name p {
    margin: 0;
    font-size: 13px;
    color: var(--rd-muted);
}

.rd-selected-plan-price {
    text-align: right;
    white-space: nowrap;
}

.rd-selected-plan-price strong {
    font-size: 20px;
    font-weight: 800;
    color: var(--rd-text);
}

.rd-selected-plan-price span {
    font-size: 13px;
    color: var(--rd-muted);
}

.rd-selected-plan-price small {
    display: block;
    font-size: 13px;
    color: var(--rd-muted);
}

.rd-selected-plan-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0;
    padding: 14px 20px;
    list-style: none;
    font-size: 13px;
    color: var(--rd-text);
}

.rd-selected-plan-features li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rd-selected-plan-features svg {
    color: var(--var-color-blue-500);
}

.rd-detail-list {
    margin: 0;
    padding: 6px 18px;
    list-style: none;
    border-radius: var(--rd-radius);
    background: var(--rd-subtle-bg);
}

.rd-detail-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
}

.rd-detail-list li + li {
    border-top: 1px solid var(--rd-border);
}

.rd-detail-list > li > svg {
    margin-top: 2px;
    color: var(--rd-muted);
}

.rd-detail-list strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--rd-text);
}

.rd-detail-list p {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--rd-muted);
}

/* Order summary (loaded by AJAX from subscription.orderBox) */
.rd-order-box .card {
    border: 1px solid var(--rd-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    background: var(--rd-card-bg);
    padding: 0 !important;
}

.rd-order-box .card-body {
    padding: 22px !important;
}

.rd-order-box h2 {
    font-size: 22px;
    font-weight: 700 !important;
}

.rd-order-box .text-muted,
.rd-order-box .bill_item p:not(.font-weight-semibold) {
    font-size: 13px;
    color: var(--rd-muted) !important;
}

.rd-order-box hr {
    border-color: var(--rd-border);
    opacity: 1;
}

.rd-order-box .bill_item {
    font-size: 14px;
    margin-bottom: 8px;
}

.rd-order-sticky {
    position: sticky;
    top: 80px;
}

/* The shared order box's terms note talks about a payment button the free page doesn't
   have; that page shows its own "no payment required" note under the box instead. */
.rd-order-box.rd-order-box-free .tos_link {
    display: none;
}

/* Paid checkout: terms note + checkout button inside the order box */
.rd-order-box .tos_link {
    display: block;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--rd-text);
    background: #effaf3 !important;
    border: 1px solid #ccefd9 !important;
    border-radius: var(--rd-radius);
}

.rd-order-box .tos_link::before {
    display: none;
}

.rd-order-box .tos_link a {
    color: var(--var-color-blue-500);
}

body.mode-dark .rd-order-box .tos_link {
    background: rgba(34, 197, 94, 0.08) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.rd-order-box #checkoutForm .btn {
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-weight: 600;
    border-radius: var(--rd-radius-sm) !important;
    box-shadow: none !important;
}

/* ───────────────────────── Paid checkout steps ───────────────────────── */

/* A step that is done or not open yet: header only, links to its page */
.rd-step-collapsed .rd-step-header {
    margin-bottom: 0;
    color: inherit;
    text-decoration: none;
}

a.rd-step-header:hover .rd-step-heading h5 {
    color: var(--var-color-blue-500);
}

.rd-step-number.is-pending {
    background: var(--rd-track);
    color: var(--rd-muted);
}

.rd-step-body .form-group {
    margin-bottom: 14px;
}

.rd-step-body .form-control,
.rd-step-body .select2-container .select2-selection--single {
    border-radius: var(--rd-radius-sm) !important;
    border-color: var(--rd-border) !important;
    min-height: 40px;
}

.rd-step-submit {
    min-width: 120px;
    padding: 9px 20px !important;
    font-weight: 600;
    border-radius: var(--rd-radius-sm) !important;
}

.rd-step-note {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--rd-muted);
}

/* Gateway choices: selectable tiles, the chosen one outlined in blue */
.rd-step .choose-payment-methods {
    margin-bottom: 0 !important;
}

.rd-step .choose-payment-method {
    padding: 4px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius);
    background-color: var(--rd-subtle-bg);
    transition: border-color 0.15s ease;
}

.rd-step .choose-payment-method:last-child {
    margin-bottom: 0;
}

.rd-step .choose-payment-method:hover {
    border-color: #9ec2fb;
    box-shadow: none;
}

.rd-step .choose-payment-method.current {
    border-color: #1a6cf5;
    background-color: #f2f7ff;
    box-shadow: 0 0 0 1px #1a6cf5;
}

body.mode-dark .rd-step .choose-payment-method.current {
    background-color: rgba(26, 108, 245, 0.1);
}

.rd-step .choose-payment-method input[type="radio"]:checked ~ .check {
    border-color: #1a6cf5 !important;
}

.rd-step .choose-payment-method input[type="radio"] {
    accent-color: #1a6cf5;
}

.rd-step .choose-payment-method h5 {
    font-size: 15px;
    color: var(--rd-text);
}

.rd-step .choose-payment-method p {
    font-size: 13px;
    color: var(--rd-muted);
}

.rd-order-sticky .rd-notice p {
    margin: 0;
    color: var(--rd-text);
}

@media (max-width: 991px) {
    .rd-order-sticky {
        position: static;
        margin-top: 8px;
    }
}

@media (max-width: 575px) {
    .rd-selected-plan-main {
        flex-wrap: wrap;
    }

    .rd-selected-plan-price {
        text-align: left;
    }
}

/* ───────────────────────── Offline (bank transfer) checkout ───────────────────────── */

.rd-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rd-icon-bg);
    color: #1a6cf5;
}

/* Bank details come from the gateway setting as HTML; keep them readable */
.rd-offline-instructions {
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--rd-text);
    background: var(--rd-subtle-bg);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius);
    overflow-wrap: anywhere;
}

.rd-offline-instructions > :last-child {
    margin-bottom: 0;
}

.rd-offline-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--rd-border);
}

/* ═════════════════════════════════════════════════════════════════════════
 * ATLAS-28: client dark-mode refinement (Home, Lists, Broadcasts, Analytics,
 * plus the shared sidebar, toolbars and listing rows).
 *
 * Dark rules are scoped to `body.client-area` (set only by layouts/core/frontend)
 * so the admin area, which shares custom.css and this file, is untouched.
 * Colours only: no widths, grid or sidebar dimensions change.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── Both modes: small pieces of new markup ── */

/* Account Summary now sits in an rd-card like its neighbours; the inner grid card loses its own chrome */
.rd-account-summary {
    display: flex;
    flex-direction: column;
}

.rd-account-summary #account-summary-grid {
    padding-top: 0;
}

.rd-account-summary .dashboard-summery-wrapper {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Tinted icon square at the start of a listing row (lists, broadcasts) */
.rd-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--rd-icon-bg);
    color: var(--var-color-blue-500);
}

.rd-row-icon svg {
    width: 20px;
    height: 20px;
}

.rd-row-icon-blue { background: #eaf2ff; color: #2f6fe4; }
.rd-row-icon-green { background: #e8f7ef; color: #1f9d5c; }
.rd-row-icon-purple { background: #f1ecff; color: #7c4dde; }
.rd-row-icon-orange { background: #fff3e6; color: #d97a16; }
.rd-row-icon-red { background: #fdecec; color: #d64545; }
.rd-row-icon-indigo { background: #eceffd; color: #4a5bd4; }

.page-title-icon-blue {
    background: #eaf2ff;
    color: #2f6fe4;
}

/* ── Dark mode tokens ── */

body.client-area.mode-dark {
    --body-bg: #070d11;
    --card-bg: #0c141a;
    --bg-nav: #070d11;
    --sidebar-bg: #0b1217;
    --var-border: #1c2731;
    --var-border2: #1c2731;
    --var-light-bg-color: #121a22;
    --bs-border-color: #1c2731;
    --bs-secondary-color: #94a1ad;

    --sidebar-text-color: #c3ccd5;
    --sidebar-hover-text-color: #ffffff;
    --sidebar-active-text-color: #ffffff;
    --sidebar-hover-bg-color: #111c25;
    --sidebar-active-bg-color: #0e2534;

    --rd-card-bg: #0c141a;
    --rd-tile-bg: #0c141a;
    --rd-subtle-bg: #121a22;
    --rd-border: #1c2731;
    --rd-text: #e6edf2;
    --rd-muted: #94a1ad;
    --rd-icon-bg: #14202a;
    --rd-track: #1c2731;

    /* ATLAS-28 text scale + controls */
    --cd-strong: #e6edf2;
    --cd-label: #b4c0ca;
    --cd-muted: #8d9aa7;
    --cd-sep: #18232c;
    --cd-head-bg: #121b23;
    --cd-row-hover: #0f1920;
    --cd-control-bg: #0a1218;
    --cd-btn-bg: #16212b;
    --cd-btn-border: #2a3743;
    --cd-btn-hover-bg: #1c2a36;
    --cd-btn-hover-border: #364552;
    --cd-link: #60a5fa;
}

/* ── Top bar + sidebar ── */

body.client-area.mode-dark .navbar-main {
    background-color: var(--body-bg) !important;
    border-bottom: 1px solid var(--var-border);
    box-shadow: none !important;
}

body.client-area.mode-dark .base > .sidebar {
    border-right: 1px solid var(--var-border);
    box-shadow: none !important;
}

body.client-area.mode-dark .sidebar-nav .navbar-nav .nav-item a:not(.btn) svg,
body.client-area.mode-dark .sidebar-nav .navbar-nav .nav-item a:not(.btn) .material-symbols-rounded {
    opacity: 0.85;
}

body.client-area.mode-dark .sidebar-nav .navbar-nav .nav-item.active > a:not(.btn) svg,
body.client-area.mode-dark .sidebar-nav .navbar-nav .nav-item a:not(.btn):hover svg {
    opacity: 1;
}

body.client-area.mode-dark .sidebar-nav .navbar-nav .nav-item.nav-section {
    border-top-color: var(--var-border);
}

body.client-area.mode-dark .sidebar-nav .navbar-nav .nav-item.nav-section .nav-section-label {
    color: var(--cd-muted);
    opacity: 1;
}

body.client-area.mode-dark .sidebar-nav .navbar-nav .nav-item.nav-section .nav-section-label:hover {
    color: var(--cd-label);
}

body.client-area.mode-dark .sidebar-promotion .plan-card {
    background: var(--card-bg);
    border-color: var(--var-border) !important;
}

body.client-area.mode-dark .sidebar-promotion .plan-card .btn {
    background: var(--cd-btn-bg) !important;
    border-color: var(--cd-btn-border) !important;
    color: var(--cd-strong) !important;
}

body.client-area.mode-dark .sidebar-promotion .plan-card .btn:hover {
    background: var(--cd-btn-hover-bg) !important;
    border-color: var(--cd-btn-hover-border) !important;
}

/* ── Card borders: custom.css hides them in dark mode; bring them back, subtle ── */

body.client-area.mode-dark .border,
body.client-area.mode-dark .dark-border,
body.client-area.mode-dark .onboarding-list.border,
body.client-area.mode-dark .lists-growth-chart2.border,
body.client-area.mode-dark .quick-link-box.border,
body.client-area.mode-dark .recent-campaign-table-wrapper.border,
body.client-area.mode-dark .sd-stats-card,
body.client-area.mode-dark .sd-docs-card,
body.client-area.mode-dark .empty-list.v2 {
    border-color: var(--var-border) !important;
}

/* ── Page headings ── */

body.client-area.mode-dark .page-title h1,
body.client-area.mode-dark .audience-analytics-header h2 {
    color: var(--cd-strong);
}

body.client-area.mode-dark .page-title-subtitle,
body.client-area.mode-dark .audience-analytics-header p {
    color: var(--cd-label) !important;
}

body.client-area.mode-dark .page-title-icon-blue {
    background: rgba(47, 111, 228, 0.18);
    color: #7fb0ff;
}

/* ── Stats strip (lists page) ── */

body.client-area.mode-dark .sd-stat + .sd-stat {
    border-left-color: var(--var-border);
}

body.client-area.mode-dark .sd-stat-title,
body.client-area.mode-dark .sd-docs-title {
    color: var(--cd-label);
}

body.client-area.mode-dark .sd-stat-number {
    color: var(--cd-strong);
}

body.client-area.mode-dark .sd-stat-text,
body.client-area.mode-dark .sd-docs-text {
    color: var(--cd-muted);
}

/* ── Account Summary ── */

body.client-area.mode-dark .dashboard-summery-box::after,
body.client-area.mode-dark .dashboard-summery-box::before {
    background-color: var(--var-border);
}

body.client-area.mode-dark .dashboard-summery-box .content .title {
    color: var(--cd-label);
}

body.client-area.mode-dark .dashboard-summery-box .content .number {
    color: var(--cd-strong);
}

body.client-area.mode-dark .dashboard-summery-box .content .indicator.text-dark {
    color: var(--cd-muted) !important;
}

body.client-area.mode-dark .rd-account-summary .dashboard-summery-box .icon {
    background-color: var(--rd-icon-bg);
}

/* ── Listing toolbars (sort / search / actions) ── */

body.client-area.mode-dark .top-list-controls {
    background: var(--card-bg) !important;
    border: 1px solid var(--var-border) !important;
    border-radius: 10px;
}

body.client-area.mode-dark .top-list-controls .filter-group .title {
    color: var(--cd-label) !important;
}

body.client-area.mode-dark .top-list-controls .select2-selection--single,
body.client-area.mode-dark .pagination-container.v2 .select2-selection--single,
body.client-area.mode-dark .top-list-controls .form-control.search {
    background-color: var(--cd-control-bg) !important;
    border: 1px solid var(--cd-btn-border) !important;
    color: var(--cd-strong) !important;
}

body.client-area.mode-dark .top-list-controls .form-control.search::placeholder {
    color: var(--cd-muted);
}

body.client-area.mode-dark .top-list-controls .search-container .material-symbols-rounded {
    color: var(--cd-muted);
}

/* ── Buttons: grey "secondary/light" become dark bordered buttons ── */

body.client-area.mode-dark .btn.btn-secondary:not(.rd-btn-primary),
body.client-area.mode-dark .btn.btn-light:not(.rd-btn-primary) {
    background-color: var(--cd-btn-bg) !important;
    border: 1px solid var(--cd-btn-border) !important;
    color: var(--cd-strong) !important;
    fill: var(--cd-strong) !important;
    box-shadow: none !important;
}

body.client-area.mode-dark .btn.btn-secondary:not(.rd-btn-primary):hover,
body.client-area.mode-dark .btn.btn-light:not(.rd-btn-primary):hover,
body.client-area.mode-dark .btn.btn-light.show,
body.client-area.mode-dark .btn.btn-secondary.show {
    background-color: var(--cd-btn-hover-bg) !important;
    border-color: var(--cd-btn-hover-border) !important;
    color: #ffffff !important;
}

/* "Saved" sort bookmark */
body.client-area.mode-dark .btn.btn-light.sort-bookmark.active {
    background-color: rgba(26, 108, 245, 0.18) !important;
    border-color: rgba(26, 108, 245, 0.45) !important;
    color: #9cc3ff !important;
}

/* ── Listing rows (pml-table v2/v3): one bordered card, thin separators ── */

body.client-area.mode-dark .pml-table.v2 tbody tr,
body.client-area.mode-dark .pml-table.v3 tbody tr {
    border-color: var(--var-border) !important;
    transition: background-color 0.15s ease;
}

body.client-area.mode-dark .pml-table.v3 tbody tr:not(:first-child) {
    border-top: 1px solid var(--cd-sep) !important;
}

body.client-area.mode-dark .pml-table.v2 tbody tr:hover,
body.client-area.mode-dark .pml-table.v3 tbody tr:hover {
    background-color: var(--cd-row-hover);
}

body.client-area.mode-dark .pagination-container.v2 {
    border-color: var(--var-border) !important;
    border-top-color: var(--cd-sep) !important;
}

body.client-area.mode-dark .pagination-container.v2 .page-item .page-link {
    border-color: var(--cd-btn-border);
    background-color: var(--cd-btn-bg);
}

body.client-area.mode-dark .pml-table .list-title {
    color: var(--cd-link);
}

body.client-area.mode-dark .pml-table .stat-num,
body.client-area.mode-dark .pml-table .text-semibold {
    color: var(--cd-strong);
}

body.client-area.mode-dark .pml-table .text-primary.stat-num {
    color: var(--cd-strong) !important;
}

body.client-area.mode-dark .pml-table .single-stat-box > a .stat-num {
    color: var(--cd-link);
}

body.client-area.mode-dark .pml-table .text-muted,
body.client-area.mode-dark .pml-table .text-muted2 {
    color: var(--cd-muted) !important;
}

body.client-area.mode-dark .pml-table .progress {
    background-color: var(--rd-track);
}

body.client-area.mode-dark .rd-row-icon-blue { background: rgba(47, 111, 228, 0.18); color: #7fb0ff; }
body.client-area.mode-dark .rd-row-icon-green { background: rgba(31, 157, 92, 0.18); color: #5fd49a; }
body.client-area.mode-dark .rd-row-icon-purple { background: rgba(124, 77, 222, 0.2); color: #b79cff; }
body.client-area.mode-dark .rd-row-icon-orange { background: rgba(217, 122, 22, 0.18); color: #f2a65a; }
body.client-area.mode-dark .rd-row-icon-red { background: rgba(214, 69, 69, 0.18); color: #f08484; }
body.client-area.mode-dark .rd-row-icon-indigo { background: rgba(74, 91, 212, 0.22); color: #9aa6ff; }

/* ── Dashboard: Recent Broadcasts table ── */

body.client-area.mode-dark .rd-card .recent-campaigns-table > thead > tr > th {
    background-color: var(--cd-head-bg);
    color: var(--cd-muted);
}

body.client-area.mode-dark .rd-card .recent-campaigns-table > tbody > tr:hover > td {
    background-color: var(--cd-row-hover);
}

/* ── Audience Analytics cards ── */

body.client-area.mode-dark .analytics-card-title {
    color: var(--cd-strong);
}

body.client-area.mode-dark .analytics-progress {
    background-color: var(--rd-track);
}

/* ── Dark top bar (layouts/core/frontend_dark: checkout, editors) ──
 * The bar is always dark, but its links inherit the light theme's black text
 * (--var-text-dark-color), so the bell and user name nearly vanish. */

body.layout-dark:not(.editor-topbar-light) .navbar-main .navbar-nav .lvl-1,
body.layout-dark:not(.editor-topbar-light) .navbar-main .activities-menu-item {
    color: #e5e7eb;
    fill: #e5e7eb;
}

body.layout-dark:not(.editor-topbar-light) .navbar-main .navbar-nav .nav-item:not(.icon-only) .lvl-1 > .navbar-icon svg,
body.layout-dark:not(.editor-topbar-light) .navbar-main .activities-menu-item .navbar-icon svg {
    color: #e5e7eb;
    fill: #e5e7eb;
    stroke: #e5e7eb;
}

body.layout-dark:not(.editor-topbar-light) .navbar-main .navbar-nav .lvl-1:hover,
body.layout-dark:not(.editor-topbar-light) .navbar-main .navbar-nav .nav-item:hover .lvl-1,
body.layout-dark:not(.editor-topbar-light) .navbar-main .navbar-nav .lvl-1.show {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}

body.layout-dark:not(.editor-topbar-light) .navbar-main .navbar-nav .lvl-1.activities-menu-item:hover,
body.layout-dark:not(.editor-topbar-light) .navbar-main .navbar-nav .nav-item:hover .lvl-1.activities-menu-item,
body.layout-dark:not(.editor-topbar-light) .navbar-main .navbar-nav .lvl-1.activities-menu-item:hover .navbar-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Solid blue avatar, as in the mockup, on every dark client top bar */
body.client-area.mode-dark .navbar-main .menu-user-avatar.user-avatar-initial,
body.client-area.mode-dark .navbar-main .navbar-nav .lvl-1:hover .menu-user-avatar.user-avatar-initial,
body.client-area.mode-dark .navbar-main .navbar-nav .nav-item:hover .lvl-1 .menu-user-avatar.user-avatar-initial,
body.layout-dark:not(.editor-topbar-light) .navbar-main .menu-user-avatar.user-avatar-initial,
body.layout-dark:not(.editor-topbar-light) .navbar-main .navbar-nav .lvl-1:hover .menu-user-avatar.user-avatar-initial,
body.layout-dark:not(.editor-topbar-light) .navbar-main .navbar-nav .nav-item:hover .lvl-1 .menu-user-avatar.user-avatar-initial {
    background-color: #2f7cf6;
    color: #ffffff;
}

/* Audience Growth chart: custom.css greys out every dark area chart; follow the mockup instead */
body.client-area.mode-dark #AudienceGrowthChart .apexcharts-grid {
    opacity: 1;
}

body.client-area.mode-dark #AudienceGrowthChart .apexcharts-gridline {
    stroke: var(--cd-sep);
}

body.client-area.mode-dark #AudienceGrowthChart .apexcharts-grid-borders .apexcharts-gridline:first-child {
    display: inline;
}

body.client-area.mode-dark #AudienceGrowthChart .apexcharts-xaxis-tick,
body.client-area.mode-dark #AudienceGrowthChart .apexcharts-xaxis line {
    stroke: var(--cd-btn-border);
}

body.client-area.mode-dark #AudienceGrowthChart .apexcharts-text {
    fill: var(--cd-muted);
}

body.client-area.mode-dark #AudienceGrowthChart .apexcharts-legend-text {
    color: var(--cd-label) !important;
}

body.client-area.mode-dark #AudienceGrowthChart .apexcharts-series[rel="1"] > path:first-child {
    fill: url(#rd-audience-fill-dark);
}

body.client-area.mode-dark #AudienceGrowthChart .apexcharts-series[rel="1"] > path {
    stroke: #3b82f6;
}

body.client-area.mode-dark #AudienceGrowthChart .apexcharts-series[rel="2"] > path:first-child {
    fill: transparent;
}

body.client-area.mode-dark #AudienceGrowthChart .apexcharts-series[rel="2"] > path {
    stroke: #cbd5e1;
}

body.client-area.mode-dark #AudienceGrowthChart .apexcharts-legend-marker[rel="1"] path {
    fill: #3b82f6;
    stroke: transparent;
}

body.client-area.mode-dark #AudienceGrowthChart .apexcharts-legend-marker[rel="2"] path {
    fill: #cbd5e1;
    stroke: transparent;
}

/* Analytics bottom row (heatmap + donuts) in dark mode; palettes are set per theme in audience/overview.blade.php */
body.client-area.mode-dark .analytics-chart .apexcharts-xaxis-label,
body.client-area.mode-dark .analytics-chart .apexcharts-yaxis-label {
    fill: var(--cd-muted);
}

body.client-area.mode-dark .analytics-chart .apexcharts-legend-text {
    color: var(--cd-label) !important;
}

body.client-area.mode-dark .analytics-chart .apexcharts-legend-marker path {
    stroke: transparent;
}

body.client-area.mode-dark #OpensByHourHeatmap .apexcharts-heatmap-rect {
    stroke: #ffffff;
    stroke-width: 1px;
}

body.client-area.mode-dark .analytics-chart .apexcharts-datalabel-label {
    font-size: 11px !important;
}

body.client-area.mode-dark .analytics-chart .apexcharts-datalabel-value {
    font-size: 22px !important;
}

.rd-heat-legend {
    display: none;
}

body.client-area.mode-dark .rd-heat-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 4px;
    font-size: 11px;
    white-space: nowrap;
    color: var(--cd-label);
}

body.client-area.mode-dark .rd-heat-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.client-area.mode-dark .rd-heat-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: #ffffff;
}

body.client-area.mode-dark .rd-heat-swatch-more {
    background: transparent;
    border: 1px solid #3b82f6;
}

/* ═════════════════════════════════════════════════════════════════════════
 * ATLAS-26: Onyx AI workspace (/onyx-ai) - Email Campaign and Funnel or Page.
 * Sits inside the existing page container: nothing here sets a page width.
 * The two columns are sized off the content column itself (container
 * queries), so the layout adapts to whatever width the container already has.
 * ═════════════════════════════════════════════════════════════════════════ */

:root {
    --rd-ai-navy: #23485c;
    --rd-ai-blue: #1a6cf5;
    --rd-ai-blue-soft: #f3f7ff;
    --rd-ai-field-border: #d7dde6;
    --rd-ai-dash: #d5dbe5;
    --rd-ai-paper: #ffffff;
    --rd-ai-line: #dbe4f0;
    --rd-ai-check-bg: #eef2f7;
}

.rd-ai [hidden],
.rd-ai [x-cloak] {
    display: none !important;
}

/* ── Header ── */

.rd-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.rd-ai-header-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.rd-ai-header-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--rd-icon-bg);
    color: var(--rd-ai-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-ai-header-icon svg {
    width: 30px;
    height: 30px;
}

.rd-ai-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--rd-text);
}

.rd-ai-beta {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: #e8f0fe;
    color: var(--rd-ai-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    vertical-align: middle;
}

.rd-ai-subtitle {
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--rd-muted);
}

.btn.rd-ai-guide-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    background: var(--rd-subtle-bg);
    color: var(--rd-text);
    font-size: 14px;
    font-weight: 600;
}

.btn.rd-ai-guide-btn svg {
    color: var(--rd-ai-blue);
}

.btn.rd-ai-guide-btn:hover {
    border-color: var(--rd-ai-blue);
    color: var(--rd-ai-blue);
}

/* ── Layout ── */

.rd-ai-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.rd-ai-main {
    min-width: 0;
    container-type: inline-size;
    container-name: rd-ai-main;
}

.rd-ai-side {
    min-width: 0;
    container-type: inline-size;
    container-name: rd-ai-side;
}

@media (max-width: 1199.98px) {
    .rd-ai-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rd-ai-card {
    background: var(--rd-card-bg);
    border: 1px solid var(--rd-border);
    border-radius: 12px;
}

/* ── Mode switch ── */

.rd-ai-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 6px;
    margin-bottom: 16px;
    background: var(--rd-card-bg);
    border: 1px solid var(--rd-border);
    border-radius: 12px;
}

.rd-ai-mode {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 16px 40px 16px 16px;
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    background: var(--rd-card-bg);
    color: var(--rd-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rd-ai-mode:hover {
    border-color: var(--rd-ai-blue);
}

/* Locked while a mode is generating (OnyxAi.setBusy) */
.rd-ai[data-busy] .rd-ai-mode:not(.is-active) {
    opacity: 0.5;
    cursor: not-allowed;
}

.rd-ai[data-busy] .rd-ai-mode:not(.is-active):hover {
    border-color: var(--rd-border);
}

.rd-ai-mode:focus-visible {
    outline: 2px solid var(--rd-ai-blue);
    outline-offset: 2px;
}

.rd-ai-mode.is-active {
    background: var(--rd-ai-navy);
    border-color: var(--rd-ai-navy);
    color: #ffffff;
    cursor: default;
}

.rd-ai-mode-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--rd-icon-bg);
    color: var(--rd-ai-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-ai-mode.is-active .rd-ai-mode-icon {
    background: linear-gradient(135deg, #3a78c4, #2a5d96);
    color: #ffffff;
}

.rd-ai-mode-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.rd-ai-mode-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.rd-ai-mode-desc {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--rd-muted);
}

.rd-ai-mode.is-active .rd-ai-mode-desc {
    color: rgba(255, 255, 255, 0.82);
}

.rd-ai-mode-lock {
    color: var(--rd-muted);
}

.rd-ai-mode-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--rd-ai-navy);
    display: flex;
    align-items: center;
    justify-content: center;
}

@container rd-ai-main (max-width: 520px) {
    .rd-ai-modes {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Form card ── */

.rd-ai-form {
    padding: 20px;
}

.rd-ai-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.rd-ai-form-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--rd-text);
}

.rd-ai-form-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--rd-muted);
}

.btn.rd-ai-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 7px 12px;
    border: 1px solid var(--rd-border);
    border-radius: 8px;
    background: var(--rd-subtle-bg);
    color: var(--rd-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.btn.rd-ai-chip-btn:hover,
.btn.rd-ai-chip-btn:focus-visible {
    border-color: var(--rd-ai-blue);
    color: var(--rd-ai-blue);
}

.rd-ai-prompt {
    position: relative;
    margin-top: 16px;
}

.rd-ai-prompt-input {
    display: block;
    width: 100%;
    min-height: 136px;
    resize: vertical;
    padding: 14px 14px 32px;
    border: 1px solid var(--rd-ai-field-border);
    border-radius: 10px;
    background: var(--rd-card-bg);
    color: var(--rd-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.55;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rd-ai-prompt-input::placeholder {
    color: #94a3b8;
}

.rd-ai-prompt-input:focus {
    outline: none;
    border-color: var(--rd-ai-blue);
    box-shadow: 0 0 0 3px rgba(26, 108, 245, 0.12);
}

.rd-ai-prompt.is-invalid:not(.is-busy) .rd-ai-prompt-input {
    border-color: #dc2626;
}

.rd-ai-counter {
    position: absolute;
    right: 14px;
    bottom: 10px;
    font-size: 12px;
    color: var(--rd-muted);
    pointer-events: none;
}

.rd-ai-url {
    position: relative;
    margin-top: 10px;
}

.rd-ai-url .form-control {
    padding-left: 36px;
}

.rd-ai-url-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rd-muted);
    pointer-events: none;
}

.rd-ai-url.is-invalid .form-control {
    border-color: #dc2626;
}

.btn.rd-ai-generate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
}

.btn.rd-ai-generate:disabled {
    opacity: 0.85;
}

.rd-ai-generate-spin,
.rd-ai-working-spin {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: rd-ai-spin 0.8s linear infinite;
}

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

.rd-ai-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rd-text);
}

.rd-ai-label-lg {
    margin: 20px 0 10px;
    font-size: 14px;
}

.rd-ai-label-sm {
    font-size: 12px;
}

.rd-ai-hint {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--rd-muted);
}

.rd-ai-error {
    margin-top: 8px;
    font-size: 13px;
    color: #dc2626;
}

.rd-ai-error-box {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
}

.rd-ai-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 12.5px;
    line-height: 1.5;
}

.rd-ai-note svg {
    margin-top: 1px;
}

.rd-ai-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--rd-border);
    font-size: 13px;
}

.rd-ai-links a,
.rd-ai-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rd-muted);
    font-weight: 500;
    text-decoration: none;
}

.rd-ai-links a:hover,
.rd-ai-link:hover {
    color: var(--rd-ai-blue);
}

/* ── Optional settings ── */

.rd-ai-settings {
    margin-top: 16px;
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    background: var(--rd-card-bg);
}

.rd-ai-settings-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: var(--rd-text);
    text-align: left;
    cursor: pointer;
}

.rd-ai-settings-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--rd-icon-bg);
    color: var(--rd-ai-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-ai-settings-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.rd-ai-settings-title {
    font-size: 14px;
    font-weight: 700;
}

.rd-ai-settings-desc {
    font-size: 12.5px;
    color: var(--rd-muted);
}

.rd-ai-chevron {
    color: var(--rd-muted);
    transition: transform 0.15s ease;
}

.rd-ai-chevron.is-open {
    transform: rotate(180deg);
}

.rd-ai-settings-body {
    padding: 16px;
    border-top: 1px solid var(--rd-border);
}

.rd-ai-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
}

.rd-ai-fields-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.rd-ai-more {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--rd-border);
}

.rd-ai-toggles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.rd-ai-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

.rd-ai-toggle .form-check {
    padding-left: 2.5em;
}

.rd-ai-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rd-ai-toggle-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--rd-text);
}

.rd-ai-toggle-desc {
    font-size: 12px;
    line-height: 1.4;
    color: var(--rd-muted);
}

@container rd-ai-main (max-width: 620px) {
    .rd-ai-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rd-ai-more {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container rd-ai-main (max-width: 420px) {
    .rd-ai-fields,
    .rd-ai-toggles {
        grid-template-columns: minmax(0, 1fr);
    }

    .rd-ai-form-head {
        flex-direction: column;
    }
}

/* ── Funnel type cards ── */

.rd-ai-types {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.rd-ai-type {
    position: relative;
    margin: 0;
    min-width: 0;
}

.rd-ai-type-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rd-ai-type-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: 14px 8px 12px;
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    background: var(--rd-card-bg);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rd-ai-type-box:hover {
    border-color: var(--rd-ai-blue);
}

.rd-ai-type-icon {
    margin-bottom: 4px;
    color: var(--rd-ai-blue);
}

.rd-ai-type-title {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rd-text);
}

.rd-ai-type-desc {
    font-size: 11px;
    line-height: 1.35;
    color: var(--rd-muted);
}

.rd-ai-type-input:checked + .rd-ai-type-box {
    border-color: var(--rd-ai-blue);
    box-shadow: inset 0 0 0 1px var(--rd-ai-blue);
    background: var(--rd-ai-blue-soft);
}

.rd-ai-type-input:focus-visible + .rd-ai-type-box {
    outline: 2px solid var(--rd-ai-blue);
    outline-offset: 2px;
}

@container rd-ai-main (max-width: 680px) {
    .rd-ai-types {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container rd-ai-main (max-width: 380px) {
    .rd-ai-types {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Results panel ── */

.rd-ai-result {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 520px;
    padding: 18px;
}

.rd-ai-result > div {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.rd-ai-empty,
.rd-ai-working {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 32px 24px;
    border: 1.5px dashed var(--rd-ai-dash);
    border-radius: 10px;
    text-align: center;
}

.rd-ai-empty-title {
    margin: 22px 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--rd-text);
}

.rd-ai-empty-desc {
    max-width: 360px;
    margin: 0 auto 4px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--rd-muted);
}

.rd-ai-empty .btn.rd-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    border-radius: 8px;
}

.rd-ai-checks {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.rd-ai-checks li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--rd-text);
}

.rd-ai-check {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--rd-ai-check-bg);
    color: var(--rd-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Empty-state art: three email drafts / a page with a funnel. Pure CSS. */
.rd-ai-empty-art {
    position: relative;
    width: 230px;
    height: 150px;
    flex-shrink: 0;
}

.rd-ai-paper {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 14px 12px;
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    background: var(--rd-ai-paper);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.rd-ai-paper-back {
    left: 14px;
    top: 44px;
    width: 96px;
    height: 88px;
    transform: rotate(-7deg);
}

.rd-ai-paper-side {
    right: 12px;
    top: 34px;
    width: 96px;
    height: 96px;
    transform: rotate(6deg);
}

.rd-ai-paper-front {
    left: 62px;
    top: 4px;
    z-index: 1;
    width: 112px;
    height: 124px;
}

.rd-ai-paper-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #c7d6ee;
}

.rd-ai-paper-line {
    display: block;
    width: 100%;
    height: 7px;
    margin-top: 9px;
    border-radius: 4px;
    background: var(--rd-ai-line);
}

.rd-ai-paper-line.is-short {
    width: 62%;
}

.rd-ai-paper-spark {
    width: 26px;
    height: 26px;
    color: var(--rd-ai-blue);
}

.rd-ai-paper-spark svg {
    width: 26px;
    height: 26px;
}

.rd-ai-browser {
    position: absolute;
    left: 40px;
    top: 10px;
    z-index: 1;
    width: 150px;
    padding: 0 12px 14px;
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    background: var(--rd-ai-paper);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.rd-ai-browser-bar {
    display: flex;
    gap: 4px;
    padding: 8px 0;
}

.rd-ai-browser-bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rd-ai-line);
}

.rd-ai-browser-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    border-radius: 6px;
    background: var(--rd-icon-bg);
    color: #8fb0e6;
}

.rd-ai-float {
    position: absolute;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid var(--rd-border);
    border-radius: 9px;
    background: var(--rd-ai-paper);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    color: var(--rd-ai-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-ai-float-funnel {
    left: 8px;
    bottom: 16px;
}

.rd-ai-float-pointer {
    right: 14px;
    top: 0;
}

.rd-ai-float-spark {
    position: absolute;
    color: #8fb0e6;
}

.rd-ai-float-spark svg {
    width: 100%;
    height: 100%;
}

.rd-ai-float-spark-a {
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
}

.rd-ai-float-spark-b {
    right: 0;
    bottom: 28px;
    width: 22px;
    height: 22px;
}

.rd-ai-empty-art-locked,
.rd-ai-empty-art-error {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--rd-subtle-bg);
    color: var(--rd-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-ai-empty-art-error {
    color: #dc2626;
}

/* Working */
.rd-ai-working .rd-ai-working-spin {
    width: 44px;
    height: 44px;
    border-width: 3px;
    border-color: var(--rd-icon-bg);
    border-top-color: var(--rd-ai-blue);
}

.rd-ai-steps {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.rd-ai-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--rd-muted);
}

.rd-ai-step-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--rd-ai-line);
}

.rd-ai-steps li.is-active {
    color: var(--rd-text);
    font-weight: 600;
}

.rd-ai-steps li.is-active .rd-ai-step-dot {
    background: var(--rd-ai-blue);
    box-shadow: 0 0 0 4px rgba(26, 108, 245, 0.15);
}

.rd-ai-steps li.is-done .rd-ai-step-dot {
    background: #22c55e;
}

/* Results head */
.rd-ai-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rd-ai-result-title {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: var(--rd-text);
}

.rd-ai-result-sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--rd-muted);
}

.rd-ai-result-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rd-ai-offer {
    display: flex;
    align-items: center;
    gap: 6px 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--rd-border);
    border-radius: 8px;
    background: var(--rd-subtle-bg);
}

.rd-ai-offer-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rd-text);
}

.rd-ai-offer-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: #e8f0fe;
    color: var(--rd-ai-blue);
    font-size: 12px;
    font-weight: 600;
}

.rd-ai-offer-meta {
    font-size: 12.5px;
    color: var(--rd-muted);
}

/* Generated emails */
.rd-ai-emails {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.rd-ai-email {
    padding: 14px;
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    background: var(--rd-card-bg);
}

.rd-ai-email.is-saved {
    border-color: #bbf7d0;
}

.rd-ai-email-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.rd-ai-email-num {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--rd-ai-navy);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-ai-email-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--rd-text);
}

.rd-ai-angle {
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid var(--rd-border);
    border-radius: 999px;
    background: var(--rd-subtle-bg);
    color: var(--rd-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.modal-title .rd-ai-angle {
    margin-left: 8px;
    vertical-align: middle;
}

.rd-ai-email-label {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rd-muted);
}

.rd-ai-subjects {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rd-ai-subject {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--rd-border);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--rd-text);
    cursor: pointer;
}

.rd-ai-subject .form-check-input {
    flex-shrink: 0;
    margin: 2px 0 0;
}

.rd-ai-subject.is-selected {
    border-color: var(--rd-ai-blue);
    background: var(--rd-ai-blue-soft);
}

.rd-ai-email-pre {
    margin: 10px 0 0;
    font-size: 12.5px;
    font-style: italic;
    color: var(--rd-muted);
}

.rd-ai-email-body {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--rd-text);
    overflow-wrap: anywhere;
}

.rd-ai-email-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.btn.rd-ai-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.rd-ai-saved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #16a34a;
    font-size: 13px;
    font-weight: 600;
}

/* Preview modal */
.rd-ai-modal {
    background: rgba(15, 23, 42, 0.5);
}

.rd-ai-preview-label {
    margin: 0 0 4px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--rd-muted);
}

.rd-ai-preview-subject {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
}

.rd-ai-preview-pre {
    margin: 0 0 14px;
    font-size: 13px;
    font-style: italic;
    color: var(--rd-muted);
}

.rd-ai-preview-body {
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Funnel review */
.rd-ai-review {
    display: flex;
    flex-direction: column;
}

.rd-ai-ready {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #15803d;
    font-size: 12px;
    font-weight: 600;
}

.rd-ai-strategy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 16px;
}

.rd-ai-strategy div {
    min-width: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--rd-subtle-bg);
}

.rd-ai-strategy dt {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--rd-muted);
}

.rd-ai-strategy dd {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--rd-text);
    overflow-wrap: anywhere;
}

.rd-ai-plan {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.rd-ai-plan-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    cursor: pointer;
}

.rd-ai-plan-row .form-check-input {
    flex-shrink: 0;
    margin: 6px 0 0;
}

.rd-ai-plan-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--rd-icon-bg);
    color: var(--rd-ai-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-ai-plan-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.rd-ai-plan-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rd-text);
}

.rd-ai-plan-num {
    margin-right: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rd-muted);
}

.rd-ai-plan-purpose {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--rd-muted);
}

.rd-ai-plan-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.rd-ai-plan-sections span {
    padding: 2px 8px;
    border: 1px solid var(--rd-border);
    border-radius: 999px;
    background: var(--rd-subtle-bg);
    color: var(--rd-muted);
    font-size: 11px;
}

.rd-ai-plan-flag {
    display: none;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 600;
}

.rd-ai-plan-step.is-excluded .rd-ai-plan-row {
    opacity: 0.6;
    border-style: dashed;
}

.rd-ai-plan-step.is-excluded .rd-ai-plan-title {
    text-decoration: line-through;
}

.rd-ai-plan-step.is-excluded .rd-ai-plan-flag {
    display: inline-block;
}

.rd-ai-review .rd-ai-fields-2 {
    margin-bottom: 4px;
}

@container rd-ai-side (max-width: 340px) {
    .rd-ai-strategy,
    .rd-ai-fields-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Locked mode */
.rd-ai-locked {
    padding: 32px 24px;
    text-align: center;
}

.rd-ai-locked-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--rd-subtle-bg);
    color: var(--rd-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-ai-locked .btn.rd-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
}

@media (max-width: 575.98px) {
    .rd-ai-title {
        font-size: 24px;
    }

    .rd-ai-header-icon {
        width: 52px;
        height: 52px;
    }
}

/* Upgrade overlay */
.rd-ai-upgrade-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--rd-icon-bg);
    color: var(--rd-ai-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-ai-upgrade-icon svg {
    width: 52px;
    height: 52px;
}

.rd-ai-upgrade-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 100px;
    color: var(--rd-ai-blue);
}

.rd-ai-upgrade-feature span {
    font-size: 0.8rem;
    color: var(--rd-muted);
}

.rd-ai-upgrade-sep {
    width: 1px;
    height: 36px;
    align-self: center;
    background: var(--rd-border);
}

/* ── Dark mode (client area only, like ATLAS-28) ── */

body.client-area.mode-dark {
    --rd-ai-navy: #1f4a66;
    --rd-ai-blue-soft: rgba(26, 108, 245, 0.12);
    --rd-ai-field-border: var(--cd-btn-border);
    --rd-ai-dash: #2a3743;
    --rd-ai-paper: #111b23;
    --rd-ai-line: #22303b;
    --rd-ai-check-bg: #14202a;
}

body.client-area.mode-dark .rd-ai-prompt-input {
    background: var(--cd-control-bg);
    color: var(--cd-strong);
}

body.client-area.mode-dark .rd-ai-mode.is-active {
    border-color: #2f6283;
}

body.client-area.mode-dark .btn.rd-ai-chip-btn,
body.client-area.mode-dark .btn.rd-ai-guide-btn {
    background: var(--cd-btn-bg);
    border-color: var(--cd-btn-border);
    color: var(--cd-strong);
}

body.client-area.mode-dark .btn.rd-ai-chip-btn:hover,
body.client-area.mode-dark .btn.rd-ai-guide-btn:hover {
    border-color: var(--cd-btn-hover-border);
    background: var(--cd-btn-hover-bg);
    color: #ffffff;
}

body.client-area.mode-dark .rd-ai-beta,
body.client-area.mode-dark .rd-ai-offer-tag {
    background: rgba(26, 108, 245, 0.18);
    color: #93c5fd;
}

body.client-area.mode-dark .rd-ai-error-box {
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.1);
    color: #fca5a5;
}

body.client-area.mode-dark .rd-ai-note {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.1);
    color: #93c5fd;
}

body.client-area.mode-dark .rd-ai-ready {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

body.client-area.mode-dark .rd-ai-plan-flag {
    background: rgba(220, 38, 38, 0.12);
    color: #fca5a5;
}

body.client-area.mode-dark .rd-ai-email.is-saved {
    border-color: rgba(34, 197, 94, 0.4);
}

body.client-area.mode-dark .rd-ai-paper,
body.client-area.mode-dark .rd-ai-browser,
body.client-area.mode-dark .rd-ai-float {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

body.client-area.mode-dark .rd-ai-modal .modal-content {
    background: var(--rd-card-bg);
    color: var(--cd-strong);
}