/* Brainwerk SEO Suite admin styles
 *
 * CI-aligned with ShieldForge: same component layout (hero, action-cards,
 * tab-grouping, iOS toggles, sanity-check, tab-intros, mobile, dark-mode,
 * tooltip-bubbles) with Brainwerk SEO Suite brand-blue. Component selectors are
 * dual-namespaced (.seoforge-* AND .sf-*) so snippets ported between the
 * two plugins keep working without renaming.
 */

:root {
    --seoforge-primary:    #2563eb;
    --seoforge-primary-dk: #1d4ed8;
    --seoforge-success:    #3ab37a;
    --seoforge-success-dk: #2d6a2d;
    --seoforge-warn:       #f0a361;
    --seoforge-warn-dk:    #8a6d00;
    --seoforge-danger:     #b32d2e;
    --seoforge-text:       #1d2327;
    --seoforge-muted:      #50575e;
    --seoforge-border:     #c3c4c7;
    --seoforge-bg:         #f6f7f7;
}

.seoforge-wrap { max-width: 1320px; }

.seoforge-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 26px;
    margin: 18px 0 4px;
}
.seoforge-title .seoforge-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
}
.seoforge-version {
    font-size: 12px;
    color: #6b7280;
    background: #eef2ff;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.seoforge-tabs {
    margin-top: 14px;
    margin-bottom: 18px;
}

.seoforge-card {
    background: #fff;
    border: 1px solid #e7eaef;
    border-radius: 10px;
    padding: 20px 24px;
    margin: 0 0 18px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.seoforge-card h2 {
    margin-top: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--seoforge-text);
}
.seoforge-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
@media (max-width: 900px) {
    .seoforge-card-grid { grid-template-columns: 1fr; }
}

.seoforge-row-spread {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.seoforge-range-picker a {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    color: #4b5563;
    text-decoration: none;
    font-size: 13px;
}
.seoforge-range-picker a.is-active {
    background: #2563eb;
    color: #fff;
}

/* Dashboard "pjax" swap — dim the content while the fetch is in flight. */
.seoforge-dash-content {
    position: relative;
    transition: opacity .12s ease;
}
.seoforge-dash-content.is-loading {
    opacity: .45;
    pointer-events: none;
}
.seoforge-dash-content.is-loading::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--seoforge-border);
    border-top-color: var(--seoforge-primary);
    border-radius: 50%;
    animation: seoforge-dash-spin .7s linear infinite;
}
@keyframes seoforge-dash-spin {
    to { transform: rotate(360deg); }
}

/* Multisite scope selector (this site / whole network / a single subsite). */
.seoforge-scope-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 13px;
}
.seoforge-scope-picker label {
    font-weight: 600;
    color: #4b5563;
}
.seoforge-scope-picker select {
    max-width: 320px;
}
.seoforge-network-note {
    margin: 0 0 14px;
    padding: 8px 12px;
    border-left: 3px solid #2563eb;
    background: #eff6ff;
    color: #1e3a8a;
    border-radius: 4px;
    font-size: 13px;
}

.seoforge-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 14px 0 4px;
    list-style: none;
    padding: 0;
}
.seoforge-stats-grid li {
    background: #fff;
    border: 1px solid #e9ecf1;
    border-radius: 8px;
    padding: 16px 18px;
    text-align: left;
    transition: border-color 120ms, box-shadow 120ms;
}
.seoforge-stats-grid li:hover {
    border-color: #d4dae3;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05);
}
.seoforge-stats-grid strong {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.05;
    color: #111827;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.seoforge-stats-grid span {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ====================================================================
 * Inline-SVG charts (Seoforge_Charts::area / ::bars)
 * One visual language: brand line, soft gridlines, muted axis labels.
 * ==================================================================== */
.seoforge-chart-wrap {
    margin: 10px 0 2px;
    width: 100%;
}
.sf-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
/* Gridlines + axis */
.sf-chart-grid {
    stroke: #eceff3;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
.sf-chart-grid.is-base { stroke: #d7dce2; }
.sf-chart-ylabel {
    fill: #9aa3af;
    font-size: 11px;
    text-anchor: end;
    font-variant-numeric: tabular-nums;
}
.sf-chart-xlabel {
    fill: #9aa3af;
    font-size: 11px;
    text-anchor: middle;
}
/* Area / line */
.sf-chart-line {
    fill: none;
    stroke: var(--seoforge-primary);
    stroke-width: 2.25;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.sf-chart-grad-top { stop-color: var(--seoforge-primary); stop-opacity: 0.20; }
.sf-chart-grad-bot { stop-color: var(--seoforge-primary); stop-opacity: 0.01; }
.sf-chart-dot {
    fill: #fff;
    stroke: var(--seoforge-primary);
    stroke-width: 2;
    opacity: 0;
    transition: opacity 120ms;
}
.sf-chart-dot.is-last { opacity: 1; }
.sf-chart-area:hover .sf-chart-dot { opacity: 1; }
/* Columns */
.sf-chart-bar {
    fill: var(--seoforge-primary);
    fill-opacity: 0.82;
    transition: fill-opacity 120ms;
}
.sf-chart-bar:hover { fill-opacity: 1; }

/* Legacy CSS bar chart (kept for any third-party reuse of .seoforge-bars) */
.seoforge-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 170px;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 0 22px;
    margin: 12px 0 0;
    overflow-x: auto;
}
.seoforge-bar {
    flex: 1;
    min-width: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    height: 100%;
    cursor: default;
}
.seoforge-bar-fill {
    width: 100%;
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
    border-radius: 3px 3px 0 0;
    transition: opacity 120ms;
}
.seoforge-bar:hover .seoforge-bar-fill { opacity: 0.85; }
.seoforge-bar-label {
    position: absolute;
    bottom: -20px;
    font-size: 10px;
    color: #6b7280;
}

/* Horizontal bar list */
.seoforge-bar-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
.seoforge-bar-list li {
    display: grid;
    grid-template-columns: 160px 1fr 60px;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
}
.seoforge-bar-list-track {
    background: #f3f4f6;
    border-radius: 4px;
    height: 10px;
    overflow: hidden;
}
.seoforge-bar-list-track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.seoforge-bar-list-value {
    text-align: right;
    color: #6b7280;
}

/* ====================================================================
 * Eigenvergleich widgets (WP4b): local self-comparison — analyzer trend,
 * traffic shape, AI-crawler development, headline deltas. Reuses the
 * card/stats-grid/bar-list tokens above; adds a delta badge, a two-series
 * "now vs then" track, a legend, and a compact sparkline list.
 * ==================================================================== */
.seoforge-eigen-heading {
    margin: 26px 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--seoforge-text);
}
.seoforge-eigen-partial {
    margin: 0 0 12px;
}
.seoforge-eigen-subhead {
    margin: 18px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--seoforge-muted);
}

/* Delta badge: icon + signed number + status colour, never colour alone. */
.seoforge-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.seoforge-delta-icon { font-size: 9px; line-height: 1; }
.seoforge-delta-good    { color: var(--seoforge-success-dk); background: #e5f6ec; }
.seoforge-delta-bad     { color: #8a1f20; background: #fbeaea; }
.seoforge-delta-neutral { color: var(--seoforge-muted); background: #eef0f2; font-weight: 500; }

.seoforge-stats-grid-delta li { display: flex; flex-direction: column; }
.seoforge-stats-grid-delta .seoforge-delta { margin-top: 8px; align-self: flex-start; }

/* Legend: only shown for 2+ series ("now" vs "then") — colour is paired
   with a text label here, never relied on alone. */
.seoforge-legend {
    display: flex;
    gap: 16px;
    margin: 4px 0 8px;
    font-size: 12px;
    color: var(--seoforge-muted);
}
.seoforge-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.seoforge-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}
.seoforge-legend-swatch.is-now  { background: var(--seoforge-primary); }
.seoforge-legend-swatch.is-then { background: #9aa3af; }

/* Two-series "now vs then" track: two thin bars stacked with a 2px gap
   instead of overlapping fills — identity carried by the legend above,
   not by hue alone (now = primary, then = a neutral grey, fixed order). */
.seoforge-bar-list-track-double {
    background: #f3f4f6;
    border-radius: 4px;
    height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
}
.seoforge-bar-list-track-double span {
    display: block;
    height: 5px;
    border-radius: 3px;
}
.seoforge-bar-list-track-double .is-now  { background: var(--seoforge-primary); }
.seoforge-bar-list-track-double .is-then { background: #9aa3af; }

/* Sparkline list (AI-crawler families): label carries identity, so every
   sparkline can stay a single, un-legended hue. */
.seoforge-sparkline-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
.seoforge-sparkline-list li {
    display: grid;
    grid-template-columns: 190px 1fr 90px;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    font-size: 13px;
    border-top: 1px solid #f1f2f4;
}
.seoforge-sparkline-list li:first-child { border-top: none; }
.seoforge-sparkline-label { color: var(--seoforge-text); }
.seoforge-sparkline-value { text-align: right; }
.sf-spark {
    display: block;
    width: 100%;
    height: 28px;
    overflow: visible;
}
.sf-spark-line {
    fill: none;
    stroke: var(--seoforge-primary);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.sf-spark-dot { fill: var(--seoforge-primary); }

/* Pills */
.seoforge-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    background: #e5e7eb;
    color: #374151;
    text-transform: capitalize;
}
.seoforge-pill-search   { background: #dcfce7; color: #166534; }
.seoforge-pill-social   { background: #fce7f3; color: #9d174d; }
.seoforge-pill-referral { background: #ddd6fe; color: #5b21b6; }
.seoforge-pill-direct   { background: #e0f2fe; color: #075985; }
.seoforge-pill-self     { background: #fef3c7; color: #92400e; }
.seoforge-pill-campaign { background: #fde68a; color: #92400e; }
.seoforge-pill-ai       { background: #cffafe; color: #155e75; }
.seoforge-pill-good     { background: #dcfce7; color: #166534; }
.seoforge-pill-ok       { background: #fef9c3; color: #854d0e; }
.seoforge-pill-bad      { background: #fee2e2; color: #991b1b; }
.seoforge-pill-unscored { background: #e5e7eb; color: #4b5563; }

/* Pro badge — small inline marker next to headings/labels for Pro-gated features */
.seoforge-badge {
    display: inline-block;
    padding: 1px 8px 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 6px;
}
.seoforge-badge-pro {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}
.seoforge-badge-pro::before { content: "✨ "; }

/* Switch toggle */
.seoforge-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    vertical-align: middle;
}
.seoforge-switch input { opacity: 0; width: 0; height: 0; }
.seoforge-switch span {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 22px;
    transition: 160ms;
}
.seoforge-switch span:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 160ms;
}
.seoforge-switch input:checked + span { background: #2563eb; }
.seoforge-switch input:checked + span:before { transform: translateX(20px); }

/* Health checks */
.seoforge-checks { list-style: none; margin: 0; padding: 0; }
.seoforge-check {
    padding: 6px 12px;
    margin: 4px 0;
    border-left: 4px solid #d1d5db;
    background: #f9fafb;
    border-radius: 0 4px 4px 0;
    font-size: 13px;
}
.seoforge-check-ok   { border-color: #16a34a; background: #f0fdf4; }
.seoforge-check-warn { border-color: #f59e0b; background: #fffbeb; }
.seoforge-check-fail { border-color: #dc2626; background: #fef2f2; }
.seoforge-check-icon {
    display: inline-block;
    width: 16px;
    font-weight: 700;
    text-align: center;
}
.seoforge-check-ok   .seoforge-check-icon { color: #16a34a; }
.seoforge-check-warn .seoforge-check-icon { color: #b45309; }
.seoforge-check-fail .seoforge-check-icon { color: #dc2626; }
.seoforge-check-tip {
    margin-top: 2px;
    font-size: 12px;
    color: #4b5563;
    font-style: italic;
}

/* Score breakdown (SEO analyzer list table) */
.seoforge-check-breakdown { margin-top: 4px; }
.seoforge-check-breakdown summary {
    cursor: pointer;
    font-size: 12px;
    color: #2563eb;
}
.seoforge-check-breakdown .seoforge-checks { margin-top: 6px; max-width: 420px; }

/* Stepper */
.seoforge-stepper {
    list-style: none;
    margin: 18px 0;
    padding: 0;
    counter-reset: sf-step;
}
.seoforge-stepper > li {
    counter-increment: sf-step;
    padding: 18px 22px 18px 64px;
    background: #f9fafb;
    border-radius: 8px;
    margin: 0 0 14px;
    position: relative;
}
.seoforge-stepper > li::before {
    content: counter(sf-step);
    position: absolute;
    left: 18px;
    top: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    text-align: center;
    line-height: 32px;
}
.seoforge-stepper h3 { margin: 0 0 6px; font-size: 16px; }

/* Post meta box */
.seoforge-meta-box .seoforge-score {
    font-size: 14px;
    padding: 12px 16px;
    background: #f3f4f6;
    border-radius: 6px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.seoforge-meta-box .seoforge-score strong {
    font-size: 24px;
    color: #111827;
}
.seoforge-score-good { background: #dcfce7; }
.seoforge-score-ok   { background: #fef9c3; }
.seoforge-score-bad  { background: #fee2e2; }
.seoforge-meta-box .seoforge-score button { margin-left: auto; }

.seoforge-welcome {
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border-left: 4px solid #2563eb;
}
.seoforge-welcome-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
}
.seoforge-welcome-illu {
    font-size: 96px;
    color: #2563eb;
    opacity: 0.45;
    line-height: 1;
}
.seoforge-welcome-illu .dashicons { font-size: 96px; width: 96px; height: 96px; }
@media (max-width: 720px) {
    .seoforge-welcome-grid { grid-template-columns: 1fr; }
    .seoforge-welcome-illu { display: none; }
}

.seoforge-health-card.seoforge-health-good { border-left: 4px solid #16a34a; }
.seoforge-health-card.seoforge-health-ok   { border-left: 4px solid #f59e0b; }
.seoforge-health-card.seoforge-health-bad  { border-left: 4px solid #dc2626; }
.seoforge-health-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
}
@media (max-width: 720px) { .seoforge-health-list { grid-template-columns: 1fr; } }
.seoforge-health-task {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 4px 8px;
    padding: 6px 0;
    align-items: baseline;
    border-bottom: 1px solid #f3f4f6;
}
.seoforge-health-task small.description {
    grid-column: 2;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}
.seoforge-health-dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #e5e7eb;
    color: #6b7280;
    font-weight: 700;
    font-size: 13px;
}
.seoforge-health-done .seoforge-health-dot { background: #dcfce7; color: #166534; }
.seoforge-health-task a { font-weight: 500; text-decoration: none; }

/* AI suggestion modal + lists */
.seoforge-ai-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.seoforge-ai-modal-inner {
    background: #fff;
    border-radius: 12px;
    width: min(640px, 92vw);
    max-height: 80vh;
    overflow: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.seoforge-ai-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 15px;
}
.seoforge-ai-modal-head .button-link {
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
    color: #6b7280;
}
.seoforge-ai-modal-body { padding: 14px 18px; }

.sf-ai-list { list-style: none; padding: 0; margin: 0; }
.sf-ai-list > li {
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}
.sf-ai-list > li:last-child { border-bottom: 0; }
.sf-ai-text { font-weight: 500; margin-bottom: 4px; line-height: 1.4; }
.sf-ai-why { color: #6b7280; font-size: 12px; margin-bottom: 6px; }

.seoforge-ai-results { margin-top: 12px; }
.seoforge-ai-results .sf-ai-list { background: #f9fafb; padding: 8px 14px; border-radius: 8px; }

.seoforge-empty-card {
    text-align: center;
    padding: 36px 22px;
    background: #f9fafb;
}
.seoforge-empty-icon { font-size: 48px; display: block; margin-bottom: 8px; }

.seoforge-callout {
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 12px;
    background: #f9fafb;
    border-left: 4px solid #94a3b8;
}
.seoforge-callout-good { background: #f0fdf4; border-left-color: #16a34a; }
.seoforge-callout-warn { background: #fffbeb; border-left-color: #f59e0b; }
.seoforge-callout-info { background: #eff6ff; border-left-color: #2563eb; }
.seoforge-callout p { margin: 4px 0 0; color: #374151; font-size: 13px; }

.seoforge-tip {
    display: inline-block;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #4b5563;
    text-align: center;
    line-height: 18px;
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    margin-left: 4px;
    vertical-align: text-top;
}

.seoforge-progress {
    background: #f3f4f6;
    border-radius: 999px;
    height: 14px;
    overflow: hidden;
    position: relative;
    margin: 8px 0 12px;
}
.seoforge-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #22c55e);
    transition: width 0.4s ease;
    border-radius: 999px;
}
.seoforge-import-card .seoforge-pill { font-size: 11px; vertical-align: middle; margin-left: 6px; }

.seoforge-pulse {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #16a34a;
    border-radius: 50%;
    margin-right: 6px;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
    animation: seoforge-pulse 1.6s infinite;
    vertical-align: middle;
}
@keyframes seoforge-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(22, 163, 74, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0   rgba(22, 163, 74, 0); }
}
.seoforge-live-card { border-left: 4px solid #16a34a; }

.seoforge-upsell {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(90deg, #fffbeb 0%, #fff 60%);
}
.seoforge-upsell h3 { margin: 0 0 6px; }

.seoforge-empty {
    color: #6b7280;
    font-style: italic;
    padding: 14px 0;
}

/* Dashboard widget */
.seoforge-widget { font-size: 13px; }
.seoforge-widget-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f0fdf4;
    border-left: 3px solid #16a34a;
    border-radius: 4px;
    margin-bottom: 10px;
}
.seoforge-widget-row strong { font-size: 22px; }
.seoforge-widget-row small { color: #4b5563; }
.seoforge-widget-row .seoforge-widget-pill {
    margin-left: auto;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
}

.seoforge-widget-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}
.seoforge-widget-kpis li {
    background: #f9fafb;
    border-radius: 6px;
    padding: 8px 10px;
    text-align: center;
    line-height: 1.2;
}
.seoforge-widget-kpis strong { display: block; font-size: 18px; font-weight: 700; }
.seoforge-widget-kpis span   { display: block; font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; margin: 2px 0 4px; }
.seoforge-widget-kpis em     { display: block; font-style: normal; font-size: 11px; font-weight: 600; }
.seoforge-trend-good { color: #16a34a; }
.seoforge-trend-bad  { color: #dc2626; }
.seoforge-trend-flat { color: #9ca3af; }
@media (max-width: 600px) { .seoforge-widget-kpis { grid-template-columns: repeat(2, 1fr); } }

.seoforge-spark-wrap {
    position: relative;
    margin: 4px 0 14px;
}
.seoforge-widget-sparkline {
    width: 100%;
    height: auto;
    display: block;
}
.seoforge-widget-sparkline .sf-spark-hover { cursor: pointer; }
.seoforge-widget-sparkline .sf-spark-dot   { transition: r 120ms; }

.seoforge-spark-tooltip {
    position: absolute;
    z-index: 1000;
    background: #111827;
    color: #f9fafb;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.5;
    pointer-events: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    min-width: 140px;
    max-width: 220px;
}
.seoforge-spark-tooltip .sf-tip-head {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 2px;
    color: #e5e7eb;
}
.seoforge-spark-tooltip .sf-tip-total {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #374151;
}
.seoforge-spark-tooltip .sf-tip-total strong { font-size: 14px; color: #fff; }
.seoforge-spark-tooltip .sf-tip-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.seoforge-spark-tooltip .sf-tip-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
}
.seoforge-spark-tooltip .sf-tip-num {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: #d1d5db;
    font-weight: 500;
}
.seoforge-spark-tooltip .sf-tip-empty { color: #9ca3af; font-style: italic; }

.sf-tip-pill {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sf-tip-pill-search   { background: #16a34a; }
.sf-tip-pill-social   { background: #ec4899; }
.sf-tip-pill-referral { background: #8b5cf6; }
.sf-tip-pill-direct   { background: #06b6d4; }
.sf-tip-pill-campaign { background: #f59e0b; }
.sf-tip-pill-self     { background: #6b7280; }
.sf-tip-pill-outbound { background: #ef4444; }

.seoforge-widget-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 600px) { .seoforge-widget-cols { grid-template-columns: 1fr; } }
.seoforge-widget-cols h4 { margin: 4px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }

.seoforge-widget-list { list-style: none; padding: 0; margin: 0; }
.seoforge-widget-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 12px;
}
.seoforge-widget-list li:last-child { border-bottom: 0; }
.seoforge-widget-list a {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
.seoforge-widget-num { color: #6b7280; font-variant-numeric: tabular-nums; font-weight: 500; }
.seoforge-widget-empty { color: #9ca3af; font-style: italic; }

.seoforge-widget-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
}

/* ====================================================================
 * CI-PARITY WITH SHIELDFORGE — UX layer ported 1:1.
 * Brand color comes from --seoforge-primary; structural CSS is identical.
 * ==================================================================== */

/* --- Tab grouping --- */
.seoforge-tabs-grouped, .shieldforge-tabs-grouped {
    display: flex; flex-wrap: wrap; gap: 18px;
    padding: 14px 0 0; border-bottom: 1px solid var(--seoforge-border);
    margin-top: 12px;
}
.seoforge-tabs-grouped .seoforge-tab-group,
.seoforge-tabs-grouped .sf-tab-group,
.shieldforge-tabs-grouped .sf-tab-group {
    display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px;
}
.seoforge-tabs-grouped .seoforge-tab-group-label,
.seoforge-tabs-grouped .sf-tab-group-label,
.shieldforge-tabs-grouped .sf-tab-group-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.2px; color: var(--seoforge-muted); padding: 0 4px 4px;
}
.seoforge-tabs-grouped .nav-tab,
.shieldforge-tabs-grouped .nav-tab {
    margin: 0 2px 0 0; padding: 6px 10px; font-size: 12px;
}
.seoforge-tabs-grouped .nav-tab .dashicons {
    font-size: 16px; line-height: 1; vertical-align: -3px;
    margin-right: 3px; opacity: .65;
}
.seoforge-tabs-grouped .nav-tab-active .dashicons {
    opacity: 1; color: var(--seoforge-primary);
}

/* --- Hero status banner --- */
.seoforge-hero, .sf-hero {
    display: flex; align-items: center; gap: 22px;
    padding: 20px 24px; border-radius: 8px;
    margin: 18px 0 12px; position: relative; overflow: hidden;
    border: 1px solid var(--seoforge-border); background: #fff;
}
.seoforge-hero.is-calm,     .sf-hero.is-calm     { background: linear-gradient(135deg, #ecf7ee 0%, #f3faf5 100%); border-color: #b7dec0; }
.seoforge-hero.is-elevated, .sf-hero.is-elevated { background: linear-gradient(135deg, #fff8e1 0%, #fffdf2 100%); border-color: #f7d472; }
.seoforge-hero.is-high,     .sf-hero.is-high     { background: linear-gradient(135deg, #fdf0e3 0%, #fef7ee 100%); border-color: #f0a361; }
.seoforge-hero.is-critical, .sf-hero.is-critical { background: linear-gradient(135deg, #fdecec 0%, #fef5f5 100%); border-color: #e89595; }
.seoforge-hero-score, .sf-hero-score {
    display: flex; align-items: baseline; gap: 4px;
    min-width: 130px; padding: 12px 24px;
    background: rgba(255,255,255,.65); border-radius: 8px;
}
.seoforge-hero-score-num, .sf-hero-score-num { font-size: 56px; font-weight: 800; line-height: 1; color: var(--seoforge-text); }
.seoforge-hero-score-max, .sf-hero-score-max { font-size: 16px; color: var(--seoforge-muted); font-weight: 500; }
.seoforge-hero-text, .sf-hero-text { flex: 1 1 auto; min-width: 0; }
.seoforge-hero-emoji, .sf-hero-emoji { font-size: 24px; margin-right: 8px; }
.seoforge-hero-headline, .sf-hero-headline { font-size: 22px; font-weight: 700; color: var(--seoforge-text); line-height: 1.25; margin-bottom: 6px; }
.seoforge-hero-sub, .sf-hero-sub { color: var(--seoforge-muted); font-size: 14px; }
.seoforge-hero-bar, .sf-hero-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.06); }
.seoforge-hero-bar > span, .sf-hero-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--seoforge-success), var(--seoforge-warn), #e25c5c); transition: width .3s; }

/* --- Action-item cards --- */
.seoforge-action-items, .sf-action-items { margin: 0 0 18px; }
.seoforge-action-items-title, .sf-action-items-title {
    font-size: 14px; margin: 0 0 10px; color: var(--seoforge-muted);
    text-transform: uppercase; letter-spacing: .5px;
}
.seoforge-action-items-empty, .sf-action-items-empty {
    padding: 14px 18px; background: #ecf7ee;
    border-left: 4px solid var(--seoforge-success); border-radius: 4px;
    color: var(--seoforge-success-dk); font-weight: 600;
}
.seoforge-action-grid, .sf-action-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px;
}
.seoforge-action-card, .sf-action-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: #fff;
    border: 1px solid #dcdcde; border-left-width: 4px; border-radius: 4px;
    text-decoration: none; color: var(--seoforge-text);
    transition: transform .12s, box-shadow .12s;
}
.seoforge-action-card:hover, .sf-action-card:hover {
    transform: translateX(2px); box-shadow: 0 2px 6px rgba(0,0,0,.08); color: var(--seoforge-text);
}
.seoforge-action-card.is-critical, .sf-action-card.sf-action-critical { border-left-color: var(--seoforge-danger); background: #fdecec; }
.seoforge-action-card.is-warning,  .sf-action-card.sf-action-warning  { border-left-color: var(--seoforge-warn); background: #fff8e1; }
.seoforge-action-card.is-info,     .sf-action-card.sf-action-info     { border-left-color: var(--seoforge-primary); background: #eef2ff; }
.seoforge-action-icon, .sf-action-icon { font-size: 22px; flex: 0 0 auto; }
.seoforge-action-text, .sf-action-text { flex: 1 1 auto; font-size: 13px; line-height: 1.4; }
.seoforge-action-arrow, .sf-action-arrow { color: var(--seoforge-muted); flex: 0 0 auto; }

/* --- iOS-style toggle (replaces .seoforge-switch's old look + adds .sf-toggle parity) --- */
.seoforge-toggle, .sf-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.seoforge-toggle input[type="checkbox"],
.sf-toggle input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 38px; height: 22px; background: #c5c5c5;
    border-radius: 999px; position: relative; cursor: pointer;
    transition: background .15s; flex: 0 0 auto;
    margin: 0; border: none; box-shadow: none; outline: none;
}
.seoforge-toggle input[type="checkbox"]:before,
.sf-toggle input[type="checkbox"]:before {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; background: #fff; border-radius: 50%;
    transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.seoforge-toggle input[type="checkbox"]:checked,
.sf-toggle input[type="checkbox"]:checked { background: var(--seoforge-primary); }
.seoforge-toggle input[type="checkbox"]:checked:before,
.sf-toggle input[type="checkbox"]:checked:before { transform: translateX(16px); }
.seoforge-toggle input[type="checkbox"]:focus-visible,
.sf-toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--seoforge-primary); outline-offset: 2px; }
.seoforge-toggle input[type="checkbox"]:disabled,
.sf-toggle input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* --- Tooltip bubbles --- */
[data-seoforge-tip], [data-sf-tip] {
    position: relative; cursor: help; border-bottom: 1px dotted #888;
}
[data-seoforge-tip]:hover::after, [data-seoforge-tip]:focus::after,
[data-sf-tip]:hover::after,       [data-sf-tip]:focus::after {
    content: attr(data-seoforge-tip);
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: #1d2327; color: #fff; padding: 6px 10px; border-radius: 4px;
    font-size: 12px; line-height: 1.4; font-weight: 400;
    white-space: normal; max-width: 320px; width: max-content;
    box-shadow: 0 2px 6px rgba(0,0,0,.2); z-index: 9999;
    pointer-events: none;
}
[data-sf-tip]:hover::after, [data-sf-tip]:focus::after { content: attr(data-sf-tip); }
[data-seoforge-tip]:hover::before, [data-seoforge-tip]:focus::before,
[data-sf-tip]:hover::before, [data-sf-tip]:focus::before {
    content: ""; position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #1d2327; z-index: 9999;
}

/* --- Tab-intro card (collapsible "what is this tab") --- */
.seoforge-intro, .sf-intro {
    background: #f0f6fc; border: 1px solid #c5d9ed;
    border-left: 4px solid #2271b1; border-radius: 4px;
    padding: 14px 18px; margin: 0 0 18px;
}
.seoforge-intro-short, .sf-intro-short {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 14px; line-height: 1.55; color: var(--seoforge-text);
}
.seoforge-intro-icon, .sf-intro-icon { flex: 0 0 auto; font-size: 22px; color: #2271b1; margin-top: 1px; }
.seoforge-intro-text, .sf-intro-text { flex: 1 1 auto; }
.seoforge-intro-text strong, .sf-intro-text strong { color: #0a4b78; }
.seoforge-intro-details, .sf-intro-details { margin-top: 10px; }
.seoforge-intro-details > summary, .sf-intro-details > summary {
    cursor: pointer; color: #2271b1; font-weight: 600; font-size: 13px;
    padding: 4px 0; display: inline-block; list-style: none; user-select: none;
}
.seoforge-intro-details > summary::-webkit-details-marker,
.sf-intro-details > summary::-webkit-details-marker { display: none; }
.seoforge-intro-details > summary::before,
.sf-intro-details > summary::before {
    content: "▶"; display: inline-block; font-size: 10px;
    margin-right: 6px; transition: transform .15s;
}
.seoforge-intro-details[open] > summary::before,
.sf-intro-details[open] > summary::before { transform: rotate(90deg); }
.seoforge-intro-details > summary:hover,
.sf-intro-details > summary:hover { color: #0a4b78; }
.seoforge-intro-long, .sf-intro-long { padding: 8px 0 4px 16px; max-width: 800px; }
.seoforge-intro-long h3, .sf-intro-long h3 { margin: 14px 0 4px; font-size: 13px; color: #0a4b78; text-transform: uppercase; letter-spacing: .4px; }
.seoforge-intro-long h3:first-child, .sf-intro-long h3:first-child { margin-top: 4px; }
.seoforge-intro-long p, .sf-intro-long p { margin: 4px 0 8px; font-size: 13px; line-height: 1.55; color: var(--seoforge-text); }
.seoforge-intro-long code, .sf-intro-long code { background: #fff; padding: 1px 5px; border-radius: 3px; border: 1px solid #dcdcde; font-size: 12px; }

/* --- Empty-state hero card --- */
.seoforge-empty-state, .sf-empty-state {
    text-align: center; padding: 40px 20px;
    background: #fff; border: 1px dashed var(--seoforge-border); border-radius: 8px; margin: 14px 0;
}
.seoforge-empty-state .seoforge-empty-icon,
.seoforge-empty-state .sf-empty-icon,
.sf-empty-state .sf-empty-icon { font-size: 48px; color: var(--seoforge-border); line-height: 1; margin-bottom: 10px; }
.seoforge-empty-state h3, .sf-empty-state h3 { margin: 0 0 8px; font-size: 18px; color: var(--seoforge-text); }
.seoforge-empty-state p, .sf-empty-state p { margin: 0 auto 16px; max-width: 480px; color: var(--seoforge-muted); line-height: 1.5; }
.seoforge-empty-state .button, .sf-empty-state .button { font-size: 14px; padding: 6px 18px; }

/* --- Quick-Setup wizard banner --- */
.seoforge-quick-setup, .sf-quick-setup {
    background: linear-gradient(135deg, #eef2ff 0%, #f6f7ff 100%);
    border: 1px solid #c5d9ed; border-radius: 8px;
    padding: 18px 22px; margin: 0 0 18px;
}
.seoforge-quick-setup-header, .sf-quick-setup-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.seoforge-quick-setup-emoji, .sf-quick-setup-emoji { font-size: 32px; flex: 0 0 auto; line-height: 1; margin-top: 2px; }
.seoforge-quick-setup-title, .sf-quick-setup-title { margin: 0 0 4px; font-size: 18px; color: #0a4b78; }
.seoforge-quick-setup-sub, .sf-quick-setup-sub { margin: 0; color: var(--seoforge-muted); font-size: 13px; line-height: 1.45; }
.seoforge-quick-setup-dismiss, .sf-quick-setup-dismiss { font-size: 22px; line-height: 1; padding: 4px 10px; color: var(--seoforge-muted); text-decoration: none; }
.seoforge-quick-setup-dismiss:hover, .sf-quick-setup-dismiss:hover { color: var(--seoforge-danger); }
.seoforge-quick-setup-grid, .sf-quick-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.seoforge-quick-setup-card, .sf-quick-setup-card { margin: 0; }
.seoforge-quick-setup-card-btn, .sf-quick-setup-card-btn {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 14px 16px; width: 100%; background: #fff;
    border: 1px solid #c5d9ed; border-radius: 6px;
    cursor: pointer; text-align: left; transition: all .15s;
}
.seoforge-quick-setup-card-btn:hover, .sf-quick-setup-card-btn:hover {
    border-color: #2271b1; transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(34,113,177,.12);
}
.seoforge-quick-setup-card-icon, .sf-quick-setup-card-icon { font-size: 24px; color: #2271b1; margin-bottom: 4px; }
.seoforge-quick-setup-card-title, .sf-quick-setup-card-title { font-size: 15px; font-weight: 600; color: var(--seoforge-text); }
.seoforge-quick-setup-card-desc, .sf-quick-setup-card-desc { font-size: 12px; color: var(--seoforge-muted); line-height: 1.4; flex: 1; }
.seoforge-quick-setup-card-cta, .sf-quick-setup-card-cta { font-size: 12px; color: #2271b1; font-weight: 600; margin-top: 8px; }

/* --- Sanity-check table --- */
.seoforge-sanity-summary, .sf-sanity-summary { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; padding: 12px 16px; border-radius: 6px; flex-wrap: wrap; }
.seoforge-sanity-summary.is-ok,   .sf-sanity-summary.is-ok   { background: #ecf7ee; border: 1px solid #b7dec0; }
.seoforge-sanity-summary.is-warn, .sf-sanity-summary.is-warn { background: #fff8e1; border: 1px solid #f7d472; }
.seoforge-sanity-summary.is-fail, .sf-sanity-summary.is-fail { background: #fdecec; border: 1px solid #e89595; }
.seoforge-sanity-pill, .sf-sanity-pill { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: #fff; }
.seoforge-sanity-pill-ok,   .sf-sanity-pill-ok   { color: var(--seoforge-success-dk); }
.seoforge-sanity-pill-warn, .sf-sanity-pill-warn { color: var(--seoforge-warn-dk); }
.seoforge-sanity-pill-fail, .sf-sanity-pill-fail { color: var(--seoforge-danger); }
.seoforge-sanity-tagline, .sf-sanity-tagline { margin-left: auto; font-weight: 600; color: var(--seoforge-text); font-size: 13px; }
.seoforge-sanity-table .seoforge-sanity-icon,
.sf-sanity-table .sf-sanity-icon { font-size: 18px; font-weight: 700; }
.seoforge-sanity-row-ok   .seoforge-sanity-icon,
.sf-sanity-row-ok   .sf-sanity-icon { color: var(--seoforge-success-dk); }
.seoforge-sanity-row-warn .seoforge-sanity-icon,
.sf-sanity-row-warn .sf-sanity-icon { color: var(--seoforge-warn); }
.seoforge-sanity-row-fail .seoforge-sanity-icon,
.sf-sanity-row-fail .sf-sanity-icon { color: var(--seoforge-danger); }
.seoforge-sanity-row-fail td, .sf-sanity-row-fail td { background: #fef5f5; }
.seoforge-sanity-row-warn td, .sf-sanity-row-warn td { background: #fffbf0; }

/* --- Mobile responsiveness (alignment with ShieldForge breakpoints) --- */
@media (max-width: 782px) {
    .seoforge-tabs-grouped, .shieldforge-tabs-grouped { gap: 10px; padding-top: 8px; }
    .seoforge-tabs-grouped .seoforge-tab-group,
    .seoforge-tabs-grouped .sf-tab-group { flex-direction: column; align-items: stretch; }
    .seoforge-tabs-grouped .nav-tab,
    .shieldforge-tabs-grouped .nav-tab { font-size: 13px; padding: 8px 12px; }
    .seoforge-hero, .sf-hero { flex-direction: column; align-items: stretch; text-align: center; gap: 14px; padding: 16px; }
    .seoforge-hero-score, .sf-hero-score { width: 100%; justify-content: center; }
    .seoforge-hero-score-num, .sf-hero-score-num { font-size: 44px; }
    .seoforge-hero-headline, .sf-hero-headline { font-size: 18px; }
    .seoforge-action-grid, .sf-action-grid { grid-template-columns: 1fr; }
    .seoforge-card-grid { grid-template-columns: 1fr !important; }
    .seoforge-intro-short, .sf-intro-short { flex-direction: column; gap: 6px; }
    .seoforge-intro-icon, .sf-intro-icon { font-size: 26px; }
}
@media (max-width: 600px) {
    .seoforge-quick-setup, .sf-quick-setup { padding: 14px 16px; }
    .seoforge-quick-setup-grid, .sf-quick-setup-grid { grid-template-columns: 1fr; }
}

/* --- Dark-mode for WP "Midnight" / "Ectoplasm" / "Ocean" admin schemes --- */
body.admin-color-midnight .seoforge-intro,  body.admin-color-midnight .sf-intro,
body.admin-color-ectoplasm .seoforge-intro, body.admin-color-ectoplasm .sf-intro,
body.admin-color-ocean .seoforge-intro,     body.admin-color-ocean .sf-intro {
    background: #2c3338; border-color: #50575e; border-left-color: #72aee6;
}
body.admin-color-midnight .seoforge-intro-text,  body.admin-color-midnight .sf-intro-text,
body.admin-color-ectoplasm .seoforge-intro-text, body.admin-color-ectoplasm .sf-intro-text,
body.admin-color-ocean .seoforge-intro-text,     body.admin-color-ocean .sf-intro-text { color: #f0f0f1; }
body.admin-color-midnight .seoforge-intro-text strong,  body.admin-color-midnight .sf-intro-text strong,
body.admin-color-ectoplasm .seoforge-intro-text strong, body.admin-color-ectoplasm .sf-intro-text strong,
body.admin-color-ocean .seoforge-intro-text strong,     body.admin-color-ocean .sf-intro-text strong { color: #72aee6; }
body.admin-color-midnight .seoforge-intro-long h3,  body.admin-color-midnight .sf-intro-long h3,
body.admin-color-ectoplasm .seoforge-intro-long h3, body.admin-color-ectoplasm .sf-intro-long h3,
body.admin-color-ocean .seoforge-intro-long h3,     body.admin-color-ocean .sf-intro-long h3 { color: #72aee6; }
body.admin-color-midnight .seoforge-intro-long p,  body.admin-color-midnight .sf-intro-long p,
body.admin-color-ectoplasm .seoforge-intro-long p, body.admin-color-ectoplasm .sf-intro-long p,
body.admin-color-ocean .seoforge-intro-long p,     body.admin-color-ocean .sf-intro-long p { color: #f0f0f1; }
body.admin-color-midnight .seoforge-intro-long code,  body.admin-color-midnight .sf-intro-long code,
body.admin-color-ectoplasm .seoforge-intro-long code, body.admin-color-ectoplasm .sf-intro-long code,
body.admin-color-ocean .seoforge-intro-long code,     body.admin-color-ocean .sf-intro-long code { background: #1d2327; color: #f0f0f1; border-color: #3c434a; }
body.admin-color-midnight .seoforge-hero,  body.admin-color-midnight .sf-hero,
body.admin-color-ectoplasm .seoforge-hero, body.admin-color-ectoplasm .sf-hero,
body.admin-color-ocean .seoforge-hero,     body.admin-color-ocean .sf-hero { background: #2c3338; border-color: #50575e; }
body.admin-color-midnight .seoforge-hero-headline,  body.admin-color-midnight .sf-hero-headline,
body.admin-color-ectoplasm .seoforge-hero-headline, body.admin-color-ectoplasm .sf-hero-headline,
body.admin-color-ocean .seoforge-hero-headline,     body.admin-color-ocean .sf-hero-headline { color: #f0f0f1; }

/* --- Hero scaling parity with ShieldForge --- */
.seoforge-stats--lg strong { font-size: 32px; }

/* Geo: visitor countries + region/city drill-down */
.sf-geo-hint { margin: 4px 0 8px; }
.sf-geo-list li { display: block; padding: 0; }
.sf-geo-country {
    display: grid;
    grid-template-columns: 180px 1fr 110px;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: 0;
    border-radius: 6px;
    padding: 7px 8px;
    margin: 0;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    color: inherit;
}
.sf-geo-country:hover { background: #f8fafc; }
.sf-geo-country[aria-expanded="true"] { background: #eff6ff; }
.sf-geo-country .seoforge-bar-list-label { display: inline-flex; align-items: center; gap: 8px; }
.sf-geo-flag { font-size: 16px; line-height: 1; }
.sf-geo-drill {
    margin: 2px 0 10px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.sf-geo-drill-head { font-weight: 600; margin-bottom: 8px; }
.sf-geo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sf-geo-col h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.sf-geo-empty, .sf-geo-loading { color: #9ca3af; font-style: italic; margin: 6px 0; }
@media (max-width: 782px) { .sf-geo-cols { grid-template-columns: 1fr; } }

/* --- Responsive (mobile) --- */
@media (max-width: 782px) {
    .seoforge-wrap .seoforge-card { padding: 14px 16px; margin-bottom: 14px; }
    .seoforge-wrap .seoforge-title { font-size: 20px; margin: 12px 0 4px; gap: 8px; }
    .seoforge-wrap .seoforge-row-spread { flex-direction: column; align-items: flex-start; gap: 8px; }
    .seoforge-wrap .seoforge-range-picker { flex-wrap: wrap; }
    .seoforge-wrap .seoforge-range-picker a { padding: 5px 8px; }
    .seoforge-wrap .seoforge-scope-picker { flex-wrap: wrap; }
    .seoforge-wrap .seoforge-scope-picker select { max-width: 100%; }

    /* Data tables: scroll horizontally instead of breaking the page layout. */
    .seoforge-wrap table.widefat {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .seoforge-wrap table.widefat th,
    .seoforge-wrap table.widefat td {
        max-width: 60vw;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        white-space: normal;
    }

    /* Long URL/path links inside table cells must not force horizontal width. */
    .seoforge-wrap table.widefat td a { word-break: break-word; }

    /* KPI / stat grids: fewer columns on tablets & large phones. */
    .seoforge-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .seoforge-widget-kpis { grid-template-columns: repeat(2, 1fr); }

    /* Horizontal bar-list rows (top sources, devices, geo): drop the fixed
       label/value column widths so long labels wrap instead of overflowing. */
    .seoforge-bar-list li { grid-template-columns: 1fr; gap: 2px; }
    .seoforge-bar-list-value { text-align: left; }
    .sf-geo-country { grid-template-columns: 1fr; gap: 2px; }

    /* AI-crawler sparkline rows: stack label/chart/value instead of a fixed
       3-column grid so the sparkline never gets squeezed to nothing. */
    .seoforge-sparkline-list li { grid-template-columns: 1fr; gap: 4px; }
    .seoforge-sparkline-value { text-align: left; }
}
@media (max-width: 480px) {
    .seoforge-stats-grid { grid-template-columns: 1fr; }
    .seoforge-widget-kpis { grid-template-columns: 1fr; }
}

/* FAQ repeater in the post meta box (GEO / FAQPage) */
.sf-faq-row { border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px; margin: 6px 0; background: #fafafa; }
.sf-faq-row input, .sf-faq-row textarea { margin-bottom: 4px; }
.sf-faq-remove { color: #b91c1c !important; }
.sf-faq-hint { font-weight: normal; color: #6b7280; font-size: 12px; }
