:root {
    --pg-bg: #f5f7fb;
    --pg-card: #ffffff;
    --pg-border: #d6dde8;
    --pg-text: #142034;
    --pg-muted: #5f6f86;
    --pg-primary: #0f6cbf;
    --pg-primary-strong: #0a4d88;
    --pg-success: #157347;
    --pg-danger: #b42318;
    --pg-warning: #b76e00;
}

body.toplevel_page_profitguard .wrap,
body.profitguard_page_profitguard-bulk .wrap,
body.profitguard_page_profitguard-reports .wrap,
body.profitguard_page_profitguard-settings .wrap {
    background: linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%);
    padding: 16px;
    border-radius: 12px;
}

.pg-page-header h1,
.pg-hero h1 {
    margin: 0 0 8px;
    color: var(--pg-text);
}

.pg-page-header p,
.pg-hero p,
.pg-table-note {
    margin: 0;
    color: var(--pg-muted);
}

.pg-hero {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    background: linear-gradient(135deg, #e8f3ff 0%, #fff4e8 100%);
    border: 1px solid #d2e6ff;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 18px;
}

.pg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pg-inline-upgrade {
    max-width: 660px;
    margin-bottom: 16px;
}

.pg-card {
    background: var(--pg-card);
    border: 1px solid var(--pg-border);
    padding: 22px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(15, 34, 53, 0.06);
    margin-bottom: 18px;
}

.pg-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--pg-text);
}

.pg-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.pg-stat-box {
    border: 1px solid var(--pg-border);
    background: #fff;
    padding: 18px;
    border-radius: 10px;
    text-align: left;
}

.pg-stat-value {
    font-size: 24px;
    font-weight: 700;
    margin-top: 8px;
}

.pg-positive {
    color: var(--pg-success);
}

.pg-negative {
    color: var(--pg-danger);
}

.pg-dashboard-table th,
.pg-dashboard-table td,
.pg-bulk-table th,
.pg-bulk-table td {
    vertical-align: middle;
}

.pg-premium-lock {
    border: 1px solid #f0d8a8;
    background: linear-gradient(120deg, #fff9ed 0%, #fff 70%);
    padding: 20px;
    border-radius: 12px;
    position: relative;
}

.pg-lock-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pg-lock-icon {
    font-size: 11px;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #8a4c00;
    background: #ffe4bf;
    border-radius: 999px;
    padding: 4px 8px;
}

.pg-premium-lock h3 {
    margin: 0;
    font-size: 18px;
    color: #3d2a0f;
}

.pg-premium-lock p {
    color: #725632;
    margin: 10px 0 14px;
}

.pg-upgrade-btn,
.pg-upgrade-inline {
    border-radius: 8px;
}

.pg-upgrade-inline {
    margin-left: 6px;
}

.pg-bulk-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.pg-toolbar-left,
.pg-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pg-toolbar-left #pg-markup-input {
    width: 110px;
}

.pg-global-status,
.pg-row-status {
    font-size: 12px;
    font-weight: 600;
}

.pg-global-status.is-success,
.pg-row-status.is-success {
    color: var(--pg-success);
}

.pg-global-status.is-error,
.pg-row-status.is-error {
    color: var(--pg-danger);
}

.pg-global-status.is-info,
.pg-row-status.is-info {
    color: var(--pg-muted);
}

.pg-cost-field.pg-dirty {
    border-color: #f0b429;
    box-shadow: 0 0 0 1px #f0b429;
}

.pg-bulk-table .spinner {
    float: none;
    margin: 0 0 0 6px;
}

.pg-onboarding .pg-progress {
    margin: 12px 0 6px;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e6edf7;
    overflow: hidden;
}

.pg-onboarding .pg-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #15803d, #36a36b);
}

.pg-progress-text {
    margin: 0 0 10px;
    color: var(--pg-muted);
    font-size: 12px;
}

.pg-checklist {
    margin: 0;
}

.pg-checklist li {
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid #edf1f7;
}

.pg-checklist-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pg-check-status {
    min-width: 56px;
    text-align: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.pg-checklist li.is-done .pg-check-status {
    background: #dcfce7;
    color: #116336;
}

.pg-checklist li.is-todo .pg-check-status {
    background: #fff5d5;
    color: #8b5a00;
}

.pg-check-content p {
    margin: 3px 0 0;
    color: var(--pg-muted);
}

.pg-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.pg-plan-card {
    border: 1px solid var(--pg-border);
    border-radius: 10px;
    padding: 14px;
    background: #fff;
}

.pg-plan-card h3 {
    margin: 0 0 8px;
}

.pg-plan-card p {
    margin: 0 0 8px;
    color: var(--pg-muted);
}

.pg-plan-card ul {
    margin: 0 0 12px 18px;
}

.pg-plan-card li {
    margin: 4px 0;
}

.pg-plan-card-pro {
    border-color: #9cccf3;
    background: linear-gradient(180deg, #f0f8ff 0%, #ffffff 100%);
}

.pg-plan-active {
    display: inline-block;
    font-weight: 700;
    color: #0f5f1f;
    background: #dcfce7;
    border-radius: 999px;
    padding: 4px 10px;
}

.pg-pro-badge {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a4c00;
    background: #ffe4bf;
    border: 1px solid #f0c88f;
    border-radius: 999px;
    padding: 4px 8px;
    vertical-align: middle;
}

.pg-onboarding-mini .pg-steps {
    margin: 0 0 0 18px;
}

.pg-onboarding-mini .pg-steps li {
    margin: 4px 0;
}

.pg-plan-inline-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: center;
}

.pg-settings-form {
    margin-bottom: 16px;
}

.pg-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.pg-field-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.pg-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--pg-text);
}

.pg-field input[type="number"] {
    width: 100%;
    max-width: 320px;
}

.pg-field input[type="date"],
.pg-field input[type="email"],
.pg-field select {
    width: 100%;
    max-width: 320px;
}

.pg-report-controls .pg-settings-grid {
    align-items: end;
}

.pg-report-controls .pg-field {
    min-width: 180px;
}

.pg-chart-card .pg-chart-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pg-chart-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.6fr) minmax(160px, 4fr) minmax(70px, 1fr);
    gap: 10px;
    align-items: center;
}

.pg-chart-label {
    color: var(--pg-text);
    font-size: 12px;
    font-weight: 600;
}

.pg-chart-track {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #e3edf8;
    overflow: hidden;
}

.pg-chart-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f6cbf 0%, #4ea3f1 100%);
}

.pg-chart-track-neutral span {
    background: linear-gradient(90deg, #15803d 0%, #5bbd78 100%);
}

.pg-chart-value {
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    color: var(--pg-text);
}

.pg-settings-help ul {
    margin: 0 0 14px 18px;
}

.pg-settings-help li {
    margin: 4px 0;
}

/* Keep product list columns compact and aligned. */
th.column-pg_profit,
td.column-pg_profit,
th.column-pg_roas,
td.column-pg_roas {
    white-space: nowrap;
    width: 130px;
}

@media (max-width: 782px) {
    body.toplevel_page_profitguard .wrap,
    body.profitguard_page_profitguard-bulk .wrap,
    body.profitguard_page_profitguard-reports .wrap,
    body.profitguard_page_profitguard-settings .wrap {
        padding: 10px;
    }

    .pg-hero {
        flex-direction: column;
    }

    .pg-bulk-toolbar {
        align-items: flex-start;
    }

    .pg-checklist-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .pg-plan-inline-grid {
        grid-template-columns: 1fr;
    }

    .pg-settings-grid {
        grid-template-columns: 1fr;
    }

    .pg-chart-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .pg-chart-value {
        text-align: left;
    }
}