.seopc-toolkit-root,
.seopc-toolkit-root * {
    box-sizing: border-box;
}

.seopc-toolkit-root {
    --seopc-ink: #14213d;
    --seopc-muted: #64748b;
    --seopc-line: #dbe3ee;
    --seopc-soft: #f6f8fb;
    --seopc-primary: #2563eb;
    --seopc-primary-dark: #1d4ed8;
    --seopc-good: #15803d;
    --seopc-warn: #b45309;
    --seopc-bad: #b91c1c;
    color: var(--seopc-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    margin: 24px auto;
    max-width: 1240px;
}

.seopc-toolkit-root button,
.seopc-toolkit-root input,
.seopc-toolkit-root select {
    font: inherit;
}

.seopc-toolkit-shell,
.seopc-login-card {
    background: #fff;
    border: 1px solid var(--seopc-line);
    border-radius: 22px;
    box-shadow: 0 18px 60px rgba(15, 23, 42, .1);
    overflow: hidden;
}

.seopc-login-shell {
    display: grid;
    min-height: 520px;
    place-items: center;
    padding: 30px;
}

.seopc-login-card {
    max-width: 470px;
    padding: 40px;
    text-align: center;
    width: 100%;
}

.seopc-login-card form {
    text-align: left;
}

.seopc-logo-mark,
.seopc-brand-mark {
    align-items: center;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    border-radius: 16px;
    color: #fff;
    display: inline-flex;
    font-weight: 800;
    height: 58px;
    justify-content: center;
    letter-spacing: -.04em;
    width: 58px;
}

.seopc-login-card h2 {
    margin: 20px 0 8px;
}

.seopc-login-card p {
    color: var(--seopc-muted);
    margin: 0 0 24px;
}

.seopc-toolkit-root label {
    color: #334155;
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 7px;
}

.seopc-toolkit-root input[type="text"],
.seopc-toolkit-root input[type="password"],
.seopc-toolkit-root input[type="number"],
.seopc-toolkit-root select {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    color: var(--seopc-ink);
    min-height: 46px;
    padding: 10px 13px;
    width: 100%;
}

.seopc-toolkit-root input:focus,
.seopc-toolkit-root select:focus {
    border-color: var(--seopc-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
    outline: none;
}

.seopc-login-card .seopc-btn {
    margin-top: 16px;
    width: 100%;
}

.seopc-toolkit-header {
    align-items: center;
    background: #0f172a;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 18px 24px;
}

.seopc-brand {
    align-items: center;
    display: flex;
    gap: 13px;
}

.seopc-brand-mark {
    border-radius: 12px;
    height: 42px;
    width: 42px;
}

.seopc-brand strong,
.seopc-brand small {
    display: block;
}

.seopc-brand small {
    color: #b8c3d6;
    font-size: 12px;
}

.seopc-tabs {
    background: #fff;
    border-bottom: 1px solid var(--seopc-line);
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 10px 18px 0;
}

.seopc-tabs button {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: #475569;
    cursor: pointer;
    font-weight: 700;
    padding: 13px 16px;
    white-space: nowrap;
}

.seopc-tabs button:hover,
.seopc-tabs button.is-active {
    border-bottom-color: var(--seopc-primary);
    color: var(--seopc-primary);
}

.seopc-toolkit-main {
    background: var(--seopc-soft);
    min-height: 560px;
    padding: 24px;
}

.seopc-toolkit-footer {
    background: #fff;
    border-top: 1px solid var(--seopc-line);
    color: var(--seopc-muted);
    font-size: 12px;
    padding: 14px 24px;
    text-align: center;
}

.seopc-hero-panel {
    align-items: end;
    background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
    border: 1px solid #dbeafe;
    border-radius: 18px;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.4fr);
    margin-bottom: 20px;
    padding: 28px;
}

.seopc-eyebrow {
    color: var(--seopc-primary);
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.seopc-hero-panel h2 {
    font-size: clamp(25px, 3vw, 38px);
    letter-spacing: -.04em;
    line-height: 1.08;
    margin: 0 0 10px;
}

.seopc-hero-panel p {
    color: var(--seopc-muted);
    margin: 0;
}

.seopc-url-form {
    align-items: end;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 15px;
    display: flex;
    gap: 12px;
    padding: 16px;
}

.seopc-input-grow {
    flex: 1 1 auto;
    min-width: 180px;
}

.seopc-btn {
    align-items: center;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #1e293b;
    cursor: pointer;
    display: inline-flex;
    font-weight: 750;
    gap: 8px;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.seopc-btn:hover:not(:disabled) {
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    transform: translateY(-1px);
}

.seopc-btn:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.seopc-btn-primary {
    background: var(--seopc-primary);
    border-color: var(--seopc-primary);
    color: #fff;
}

.seopc-btn-primary:hover:not(:disabled) {
    background: var(--seopc-primary-dark);
}

.seopc-btn-success {
    background: var(--seopc-good);
    border-color: var(--seopc-good);
    color: #fff;
}

.seopc-btn-danger {
    background: var(--seopc-bad);
    border-color: var(--seopc-bad);
    color: #fff;
}

.seopc-btn-light {
    background: #fff;
}

.seopc-spinner {
    animation: seopc-spin .8s linear infinite;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    height: 16px;
    width: 16px;
}

.seopc-spinner-large {
    height: 34px;
    width: 34px;
}

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

.seopc-loading-panel {
    align-items: center;
    background: #fff;
    border: 1px solid var(--seopc-line);
    border-radius: 16px;
    display: flex;
    gap: 14px;
    justify-content: center;
    margin: 18px 0;
    padding: 28px;
}

.seopc-loading-panel p {
    color: var(--seopc-muted);
    margin: 0;
}

.seopc-notice {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    color: #1e40af;
    margin: 14px 0;
    padding: 12px 14px;
}

.seopc-notice ul {
    margin-bottom: 0;
}

.seopc-notice-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.seopc-notice-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.seopc-notice-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.seopc-results {
    display: grid;
    gap: 18px;
}

.seopc-score-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.seopc-score-grid-compact {
    margin-bottom: 18px;
}

.seopc-score-card {
    background: #fff;
    border: 1px solid var(--seopc-line);
    border-radius: 16px;
    padding: 18px;
    position: relative;
}

.seopc-score-card::before {
    border-radius: 16px 16px 0 0;
    content: "";
    height: 4px;
    left: -1px;
    position: absolute;
    right: -1px;
    top: -1px;
}

.seopc-score-good::before { background: var(--seopc-good); }
.seopc-score-warn::before { background: var(--seopc-warn); }
.seopc-score-bad::before { background: var(--seopc-bad); }

.seopc-score-number {
    font-size: 36px;
    font-weight: 850;
    letter-spacing: -.05em;
    line-height: 1;
}

.seopc-score-label {
    color: #334155;
    font-weight: 750;
    margin-top: 8px;
    text-transform: capitalize;
}

.seopc-score-card small {
    color: var(--seopc-muted);
    display: block;
    margin-top: 4px;
}

.seopc-section {
    background: #fff;
    border: 1px solid var(--seopc-line);
    border-radius: 17px;
    padding: 22px;
}

.seopc-section-head {
    margin-bottom: 16px;
}

.seopc-section-head h3 {
    font-size: 20px;
    margin: 0;
}

.seopc-section-head p {
    color: var(--seopc-muted);
    margin: 4px 0 0;
}

.seopc-section h4 {
    margin: 20px 0 10px;
}

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

.seopc-stat {
    background: var(--seopc-soft);
    border: 1px solid #e8edf4;
    border-radius: 12px;
    padding: 13px;
}

.seopc-stat-label {
    color: var(--seopc-muted);
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
}

.seopc-stat strong {
    overflow-wrap: anywhere;
}

.seopc-table-wrap {
    overflow-x: auto;
}

.seopc-table {
    border-collapse: collapse;
    width: 100%;
}

.seopc-table th,
.seopc-table td {
    border-bottom: 1px solid #edf1f6;
    padding: 11px 10px;
    text-align: left;
    vertical-align: top;
}

.seopc-table th {
    color: #475569;
    font-size: 12px;
    width: 210px;
}

.seopc-table td {
    overflow-wrap: anywhere;
}

.seopc-mini-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 18px 0;
}

.seopc-heading-count {
    align-items: center;
    background: var(--seopc-soft);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.seopc-heading-list {
    border: 1px solid var(--seopc-line);
    border-radius: 12px;
    max-height: 380px;
    overflow: auto;
}

.seopc-heading-row {
    align-items: flex-start;
    border-bottom: 1px solid #edf1f6;
    display: grid;
    gap: 12px;
    grid-template-columns: 44px 1fr;
    padding: 10px 12px;
}

.seopc-heading-row:last-child { border-bottom: 0; }

.seopc-heading-row span {
    background: #e0e7ff;
    border-radius: 7px;
    color: #3730a3;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 6px;
    text-align: center;
}

.seopc-heading-row p { margin: 0; }

.seopc-chip-list,
.seopc-action-links,
.seopc-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.seopc-chip {
    background: #eef2ff;
    border-radius: 999px;
    color: #3730a3;
    font-size: 12px;
    padding: 6px 10px;
}

.seopc-issue-list {
    margin-bottom: 0;
}

.seopc-issue-list li {
    margin-bottom: 8px;
}

.seopc-opportunities {
    display: grid;
    gap: 10px;
}

.seopc-opportunities article {
    border: 1px solid var(--seopc-line);
    border-radius: 12px;
    padding: 13px;
}

.seopc-opportunities strong,
.seopc-opportunities span {
    display: block;
}

.seopc-opportunities span {
    color: var(--seopc-warn);
    font-size: 13px;
    margin-top: 3px;
}

.seopc-opportunities p {
    color: var(--seopc-muted);
    font-size: 13px;
    margin: 8px 0 0;
}

.seopc-dns-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.seopc-dns-card {
    background: var(--seopc-soft);
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    min-width: 0;
    padding: 14px;
}

.seopc-dns-card h4 { margin: 0 0 8px; }
.seopc-dns-card p { color: var(--seopc-muted); margin: 0; }
.seopc-dns-card pre {
    font-size: 11px;
    margin: 0;
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
}

.seopc-dropzone {
    align-items: center;
    background: rgba(255,255,255,.8);
    border: 2px dashed #93c5fd;
    border-radius: 15px;
    cursor: pointer;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    margin: 0 !important;
    min-height: 132px;
    padding: 18px;
    text-align: center;
}

.seopc-dropzone input { display: none; }
.seopc-dropzone strong { color: var(--seopc-primary); }
.seopc-dropzone span { color: var(--seopc-muted); font-size: 12px; margin-top: 5px; }

.seopc-optimizer-layout {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr);
}

.seopc-preview-card,
.seopc-controls-card {
    background: #fff;
    border: 1px solid var(--seopc-line);
    border-radius: 17px;
    padding: 18px;
}

.seopc-preview-card {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 360px;
}

.seopc-preview-card img,
.seopc-preview-card video {
    border-radius: 10px;
    max-height: 520px;
    max-width: 100%;
}

.seopc-field-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 18px;
}

.seopc-field-grid label {
    margin: 0;
}

.seopc-field-grid label > input,
.seopc-field-grid label > select {
    margin-top: 7px;
}

.seopc-output-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 13px;
    margin-top: 18px;
    padding: 14px;
}

.seopc-output-box > div:first-child {
    margin-bottom: 12px;
}

.seopc-output-box strong,
.seopc-output-box span {
    display: block;
}

.seopc-output-box span {
    color: var(--seopc-muted);
    font-size: 12px;
    margin-top: 3px;
}

.seopc-progress {
    background: #e2e8f0;
    border-radius: 999px;
    height: 18px;
    margin: 16px 0;
    overflow: hidden;
    position: relative;
}

.seopc-progress span {
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    transition: width .2s ease;
}

.seopc-progress strong {
    color: #0f172a;
    font-size: 11px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.seopc-media-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.seopc-media-card {
    background: #fff;
    border: 1px solid var(--seopc-line);
    border-radius: 16px;
    overflow: hidden;
}

.seopc-media-preview {
    aspect-ratio: 16 / 10;
    background: #e2e8f0;
    overflow: hidden;
    position: relative;
}

.seopc-media-preview img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.seopc-media-preview > span:not(.seopc-provider-badge) {
    align-items: center;
    color: #64748b;
    display: flex;
    font-weight: 800;
    height: 100%;
    justify-content: center;
}

.seopc-provider-badge {
    background: rgba(15,23,42,.84);
    border-radius: 999px;
    bottom: 9px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    left: 9px;
    padding: 5px 8px;
    position: absolute;
}

.seopc-media-body {
    padding: 14px;
}

.seopc-media-body h4 {
    display: -webkit-box;
    font-size: 15px;
    line-height: 1.35;
    margin: 0 0 5px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.seopc-media-body p {
    color: var(--seopc-muted);
    font-size: 12px;
    margin: 0 0 8px;
}

.seopc-media-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.seopc-media-meta span {
    background: var(--seopc-soft);
    border-radius: 999px;
    color: #475569;
    font-size: 10px;
    padding: 4px 7px;
}

.seopc-media-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.seopc-media-actions .seopc-btn {
    min-height: 36px;
    padding: 7px 10px;
}

.seopc-text-link {
    color: var(--seopc-primary);
    font-size: 12px;
    font-weight: 700;
}

.seopc-pagination {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 980px) {
    .seopc-hero-panel,
    .seopc-optimizer-layout {
        grid-template-columns: 1fr;
    }

    .seopc-score-grid,
    .seopc-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .seopc-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .seopc-toolkit-main,
    .seopc-hero-panel,
    .seopc-section {
        padding: 16px;
    }

    .seopc-url-form {
        align-items: stretch;
        flex-direction: column;
    }

    .seopc-score-grid,
    .seopc-stat-grid,
    .seopc-field-grid,
    .seopc-dns-grid,
    .seopc-media-grid {
        grid-template-columns: 1fr;
    }

    .seopc-mini-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .seopc-brand small { display: none; }
    .seopc-toolkit-header { padding: 14px; }
    .seopc-login-shell { padding: 10px; }
    .seopc-login-card { padding: 26px 20px; }
}

/* --------------------------------------------------------------------------
 * Modern full-screen interface (2.1)
 * -------------------------------------------------------------------------- */
body.seopc-toolkit-page {
    --seopc-admin-offset: 0px;
    overflow-x: hidden;
}

body.admin-bar.seopc-toolkit-page {
    --seopc-admin-offset: 32px;
}

/* Twenty Twenty-Five and other block themes apply horizontal padding through
 * global style variables and .has-global-padding. Remove those constraints on
 * toolkit pages instead of moving the app with left:50% / negative viewport margins. */
body.seopc-toolkit-fullscreen {
    --wp--style--root--padding-left: 0px;
    --wp--style--root--padding-right: 0px;
    margin: 0 !important;
    padding-inline: 0 !important;
}

body.seopc-toolkit-fullscreen .wp-site-blocks,
body.seopc-toolkit-fullscreen main,
body.seopc-toolkit-fullscreen article,
body.seopc-toolkit-fullscreen .entry-content,
body.seopc-toolkit-fullscreen .wp-block-post-content,
body.seopc-toolkit-fullscreen .has-global-padding,
body.seopc-toolkit-fullscreen .seopc-toolkit-post-content,
body.seopc-toolkit-fullscreen .seopc-toolkit-entry-content,
body.seopc-toolkit-fullscreen .seopc-toolkit-article {
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

body.seopc-toolkit-fullscreen .wp-site-blocks,
body.seopc-toolkit-fullscreen .wp-block-post-content,
body.seopc-toolkit-fullscreen .seopc-toolkit-post-content,
body.seopc-toolkit-fullscreen .seopc-toolkit-shortcode-block,
body.seopc-toolkit-fullscreen .entry-content,
body.seopc-toolkit-fullscreen article,
body.seopc-toolkit-fullscreen main {
    max-width: none !important;
    width: 100% !important;
}

body.seopc-toolkit-fullscreen .seopc-toolkit-shortcode-block,
body.seopc-toolkit-fullscreen .seopc-toolkit-post-content,
body.seopc-toolkit-fullscreen .seopc-toolkit-entry-content,
body.seopc-toolkit-fullscreen .seopc-toolkit-article,
body.seopc-toolkit-fullscreen :where(.is-layout-constrained, .is-layout-flow, .is-layout-flex) > .seopc-toolkit-shortcode-block {
    display: block !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    width: 100% !important;
}

body.seopc-toolkit-hide-theme-chrome .wp-site-blocks > header,
body.seopc-toolkit-hide-theme-chrome .wp-site-blocks > footer,
body.seopc-toolkit-hide-theme-chrome header.wp-block-template-part,
body.seopc-toolkit-hide-theme-chrome footer.wp-block-template-part {
    display: none !important;
}

body.seopc-toolkit-hide-theme-chrome .wp-site-blocks,
body.seopc-toolkit-hide-theme-chrome main,
body.seopc-toolkit-hide-theme-chrome .wp-block-post-content {
    margin-block: 0 !important;
    padding-block: 0 !important;
}

.seopc-toolkit-root {
    --seopc-ink: #111827;
    --seopc-muted: #667085;
    --seopc-line: #e4e7ec;
    --seopc-soft: #f7f8fc;
    --seopc-primary: #4f46e5;
    --seopc-primary-dark: #3730a3;
    --seopc-accent: #06b6d4;
    --seopc-good: #079455;
    --seopc-warn: #dc6803;
    --seopc-bad: #d92d20;
    color: var(--seopc-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0 auto;
    max-width: 1480px;
    position: relative;
    text-rendering: optimizeLegibility;
}

.seopc-toolkit-root.seopc-layout-fullscreen {
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: calc(100svh - var(--seopc-admin-offset, 0px));
    transform: none !important;
    width: 100% !important;
}

.seopc-toolkit-shell,
.seopc-login-card {
    border: 1px solid rgba(228, 231, 236, .9);
    box-shadow: 0 24px 80px rgba(16, 24, 40, .12);
}

.seopc-toolkit-shell {
    background:
        radial-gradient(circle at 8% 2%, rgba(79, 70, 229, .10), transparent 28%),
        radial-gradient(circle at 94% 3%, rgba(6, 182, 212, .10), transparent 24%),
        #f7f8fc;
    border-radius: 26px;
    display: flex;
    flex-direction: column;
    min-height: 760px;
    width: 100%;
}

.seopc-layout-fullscreen .seopc-toolkit-shell {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: calc(100svh - var(--seopc-admin-offset, 0px));
}

.seopc-toolkit-header {
    background:
        radial-gradient(circle at 15% -30%, rgba(99, 102, 241, .55), transparent 38%),
        linear-gradient(112deg, #101828 0%, #172554 52%, #0f3d52 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    min-height: 82px;
    padding: 18px clamp(20px, 4vw, 58px);
}

.seopc-brand {
    gap: 14px;
}

.seopc-brand-mark,
.seopc-logo-mark {
    background: linear-gradient(145deg, #8b5cf6 0%, #4f46e5 45%, #06b6d4 100%);
    border: 1px solid rgba(255,255,255,.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 30px rgba(17, 24, 39, .25);
    font-size: 20px;
    letter-spacing: -.03em;
}

.seopc-brand strong {
    font-size: 17px;
    letter-spacing: -.015em;
}

.seopc-brand small {
    color: #c7d7fe;
    letter-spacing: .01em;
    margin-top: 2px;
}

.seopc-header-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.seopc-access-pill {
    align-items: center;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: #e5e7eb;
    display: inline-flex;
    font-size: 12px;
    font-weight: 750;
    gap: 8px;
    padding: 8px 11px;
}

.seopc-status-dot {
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .16);
    height: 7px;
    width: 7px;
}

.seopc-access-pill.is-protected .seopc-status-dot {
    background: #fbbf24;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, .16);
}

.seopc-btn-ghost {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}

.seopc-btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, .16);
}

.seopc-tabs {
    background: rgba(255, 255, 255, .90);
    border-bottom: 1px solid rgba(228, 231, 236, .90);
    box-shadow: 0 8px 26px rgba(16, 24, 40, .035);
    gap: 8px;
    padding: 10px clamp(18px, 4vw, 58px);
    scrollbar-width: thin;
}

.seopc-tabs button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #475467;
    display: inline-flex;
    gap: 9px;
    margin: 0;
    padding: 10px 14px;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.seopc-tabs button:hover {
    background: #f2f4f7;
    border-color: #eaecf0;
    color: #344054;
    transform: translateY(-1px);
}

.seopc-tabs button.is-active,
.seopc-tabs button.is-active:hover {
    background: linear-gradient(135deg, #eef2ff, #ecfeff);
    border-color: #c7d7fe;
    color: #3730a3;
}

.seopc-tab-icon {
    align-items: center;
    background: #f2f4f7;
    border-radius: 8px;
    display: inline-flex;
    font-size: 15px;
    height: 28px;
    justify-content: center;
    line-height: 1;
    width: 28px;
}

.seopc-tabs button.is-active .seopc-tab-icon {
    background: #4f46e5;
    color: #fff;
    box-shadow: 0 6px 16px rgba(79, 70, 229, .24);
}

.seopc-toolkit-main {
    background: transparent;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 620px;
    padding: clamp(20px, 3vw, 42px) clamp(18px, 4vw, 58px) clamp(38px, 5vw, 72px);
}

.seopc-toolkit-main > div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin-inline: auto;
    max-width: 1380px;
    width: 100%;
}

.seopc-hero-panel {
    align-items: center;
    background:
        radial-gradient(circle at 8% 10%, rgba(99, 102, 241, .28), transparent 30%),
        radial-gradient(circle at 96% 100%, rgba(6, 182, 212, .22), transparent 32%),
        linear-gradient(125deg, #111827 0%, #1e1b4b 54%, #0f3b4a 100%);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .18);
    color: #fff;
    gap: clamp(20px, 2vw, 34px);
    grid-template-columns: minmax(280px, .8fr) minmax(620px, 1.55fr);
    margin-bottom: 24px;
    overflow: hidden;
    padding: clamp(24px, 3vw, 42px);
    position: relative;
}

.seopc-hero-panel::after {
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 50%;
    content: "";
    height: 260px;
    position: absolute;
    right: -90px;
    top: -130px;
    width: 260px;
}

.seopc-hero-panel > * {
    position: relative;
    z-index: 1;
}

.seopc-eyebrow {
    color: #a5f3fc;
}

.seopc-hero-panel h2 {
    color: #fff;
    font-size: clamp(29px, 3.3vw, 48px);
    max-width: 700px;
}

.seopc-hero-panel p {
    color: #d0d5dd;
    font-size: 15px;
    max-width: 670px;
}

.seopc-url-form {
    align-items: flex-end;
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(3, 7, 18, .22);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px;
    width: 100%;
}

.seopc-url-form > div {
    min-width: 0;
}

.seopc-url-form label {
    color: #344054;
    display: block;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
    margin-bottom: 8px;
}

.seopc-input-grow {
    flex: 1 1 520px;
    min-width: min(100%, 360px);
}

.seopc-url-form > :not(.seopc-input-grow):not(button) {
    flex: 0 0 auto;
    min-width: 150px;
}

.seopc-toolkit-root input[type="text"],
.seopc-toolkit-root input[type="password"],
.seopc-toolkit-root input[type="number"],
.seopc-toolkit-root select {
    appearance: none;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    color: #101828;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    min-height: 50px;
    padding: 0 16px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    width: 100%;
}

.seopc-toolkit-root select {
    background-image: linear-gradient(45deg, transparent 50%, #667085 50%), linear-gradient(135deg, #667085 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    padding-right: 36px;
}

.seopc-toolkit-root input::placeholder {
    color: #98a2b3;
}

.seopc-toolkit-root input:focus,
.seopc-toolkit-root select:focus {
    background: #fff;
    border-color: #7f56d9;
    box-shadow: 0 0 0 4px rgba(127, 86, 217, .12);
    outline: none;
}

.seopc-btn {
    border-radius: 8px;
    font-weight: 750;
    min-height: 50px;
    padding-inline: 20px;
}

.seopc-btn-primary {
    background: linear-gradient(135deg, #4f46e5, #6d28d9);
    border-color: #4f46e5;
    box-shadow: 0 8px 22px rgba(79, 70, 229, .22);
}

.seopc-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #4338ca, #5b21b6);
    box-shadow: 0 12px 28px rgba(79, 70, 229, .30);
}

.seopc-section,
.seopc-score-card,
.seopc-preview-card,
.seopc-controls-card,
.seopc-media-card,
.seopc-loading-panel {
    border-color: #e4e7ec;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .045);
}

.seopc-section {
    border-radius: 20px;
    padding: clamp(18px, 2vw, 28px);
}

.seopc-score-card {
    border-radius: 18px;
    min-height: 132px;
    overflow: hidden;
    padding: 22px;
}

.seopc-score-card::before {
    border-radius: 0;
    height: 5px;
}

.seopc-score-number {
    background: linear-gradient(135deg, #101828, #475467);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 42px;
}

.seopc-stat {
    background: linear-gradient(145deg, #fbfcfe, #f5f7fa);
    border-color: #eaecf0;
    border-radius: 14px;
    padding: 15px;
}

.seopc-notice {
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .025);
}

.seopc-dropzone {
    background: rgba(255,255,255,.96);
    border-color: #a5b4fc;
    border-radius: 18px;
    min-height: 150px;
}

.seopc-preview-card,
.seopc-controls-card {
    border-radius: 20px;
}

.seopc-media-grid {
    gap: 20px;
}

.seopc-media-card {
    border-radius: 20px;
    transition: box-shadow .2s ease, transform .2s ease;
}

.seopc-media-card:hover {
    box-shadow: 0 18px 46px rgba(16, 24, 40, .10);
    transform: translateY(-3px);
}

.seopc-toolkit-footer {
    align-items: center;
    background: #fff;
    border-top: 1px solid #eaecf0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    justify-content: center;
    margin-top: auto;
    min-height: 58px;
    padding: 14px clamp(18px, 4vw, 58px);
}

.seopc-toolkit-footer span {
    align-items: center;
    display: inline-flex;
    gap: 7px;
}

.seopc-toolkit-footer span::before {
    background: #12b76a;
    border-radius: 50%;
    content: "";
    height: 6px;
    width: 6px;
}

.seopc-login-shell {
    background:
        radial-gradient(circle at 10% 5%, rgba(79, 70, 229, .18), transparent 30%),
        radial-gradient(circle at 90% 95%, rgba(6, 182, 212, .18), transparent 32%),
        #f8fafc;
    min-height: calc(100svh - var(--seopc-admin-offset, 0px));
}

.seopc-login-card {
    border-radius: 26px;
    padding: 44px;
}

@media (max-width: 782px) {
    body.admin-bar.seopc-toolkit-page {
        --seopc-admin-offset: 46px;
    }
}

@media (max-width: 680px) {
    .seopc-toolkit-header {
        align-items: flex-start;
        gap: 14px;
        min-height: 0;
    }

    .seopc-header-actions {
        align-self: center;
    }

    .seopc-access-pill {
        font-size: 0;
        padding: 10px;
    }

    .seopc-access-pill .seopc-status-dot {
        margin: 0;
    }

    .seopc-tabs {
        padding: 8px 12px;
    }

    .seopc-tabs button {
        padding: 9px 10px;
    }

    .seopc-tab-icon {
        height: 26px;
        width: 26px;
    }

    .seopc-toolkit-main {
        padding: 16px 12px 36px;
    }

    .seopc-hero-panel {
        border-radius: 20px;
        grid-template-columns: 1fr;
        padding: 22px 17px;
    }

    .seopc-url-form {
        border-radius: 14px;
        gap: 12px;
        padding: 14px;
    }

    .seopc-input-grow,
    .seopc-url-form > :not(.seopc-input-grow):not(button),
    .seopc-url-form .seopc-btn {
        min-width: 100%;
        width: 100%;
    }

    .seopc-hero-panel h2 {
        font-size: 30px;
    }

    .seopc-toolkit-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* 2.1.2: viewport and form refinements */
@media (max-width: 1180px) {
    .seopc-hero-panel {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 782px) {
    body.admin-bar.seopc-toolkit-page {
        --seopc-admin-offset: 46px;
    }
}

/* --------------------------------------------------------------------------
 * Google-style score and SEO health indicators (2.1.3)
 * -------------------------------------------------------------------------- */
.seopc-toolkit-root {
    --seopc-score-good: #0cce6b;
    --seopc-score-warn: #ffa400;
    --seopc-score-bad: #ff4e42;
    --seopc-score-neutral: #98a2b3;
}

.seopc-score-card {
    --seopc-score-color: var(--seopc-score-neutral);
    align-items: center;
    display: flex;
    gap: 18px;
    min-height: 154px;
}

.seopc-score-good { --seopc-score-color: var(--seopc-score-good); }
.seopc-score-warn { --seopc-score-color: var(--seopc-score-warn); }
.seopc-score-bad { --seopc-score-color: var(--seopc-score-bad); }
.seopc-score-neutral { --seopc-score-color: var(--seopc-score-neutral); }

.seopc-score-ring {
    align-items: center;
    background: conic-gradient(var(--seopc-score-color) var(--seopc-score-angle, 0deg), #eaecf0 0deg);
    border-radius: 50%;
    display: flex;
    flex: 0 0 94px;
    height: 94px;
    justify-content: center;
    padding: 7px;
    position: relative;
    width: 94px;
}

.seopc-score-ring-inner {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .04);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.seopc-score-ring-inner span {
    color: #98a2b3;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    margin-top: 2px;
}

.seopc-score-number {
    background: none;
    color: var(--seopc-score-color);
    font-size: 31px;
    letter-spacing: -.045em;
    line-height: .95;
}

.seopc-score-copy {
    min-width: 0;
}

.seopc-score-label {
    color: #101828;
    font-size: 16px;
    margin-top: 0;
}

.seopc-score-status {
    background: color-mix(in srgb, var(--seopc-score-color) 12%, white);
    border: 1px solid color-mix(in srgb, var(--seopc-score-color) 30%, white);
    border-radius: 999px;
    color: color-mix(in srgb, var(--seopc-score-color) 78%, #101828);
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    margin-top: 8px;
    padding: 6px 8px;
}

.seopc-score-card small {
    line-height: 1.35;
    margin-top: 8px;
}

.seopc-check-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 24px;
}

.seopc-audit-check {
    --seopc-check-color: var(--seopc-score-neutral);
    --seopc-check-soft: #f8fafc;
    align-items: flex-start;
    background: linear-gradient(145deg, #fff, var(--seopc-check-soft));
    border: 1px solid color-mix(in srgb, var(--seopc-check-color) 24%, #e4e7ec);
    border-left: 5px solid var(--seopc-check-color);
    border-radius: 15px;
    display: flex;
    gap: 12px;
    min-width: 0;
    padding: 15px;
}

.seopc-audit-check.is-good {
    --seopc-check-color: var(--seopc-score-good);
    --seopc-check-soft: #f0fdf6;
}

.seopc-audit-check.is-warn {
    --seopc-check-color: var(--seopc-score-warn);
    --seopc-check-soft: #fffaf0;
}

.seopc-audit-check.is-bad {
    --seopc-check-color: var(--seopc-score-bad);
    --seopc-check-soft: #fff5f4;
}

.seopc-check-icon {
    align-items: center;
    background: var(--seopc-check-color);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 28px;
    font-size: 17px;
    font-weight: 900;
    height: 28px;
    justify-content: center;
    line-height: 1;
    margin-top: 1px;
}

.seopc-check-copy {
    min-width: 0;
    width: 100%;
}

.seopc-check-heading {
    align-items: flex-start;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.seopc-check-heading strong {
    color: #101828;
    font-size: 14px;
}

.seopc-check-status {
    color: var(--seopc-check-color);
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.seopc-check-value {
    color: var(--seopc-check-color);
    display: block;
    font-size: 18px;
    line-height: 1.2;
    margin-top: 5px;
}

.seopc-audit-check p {
    color: #475467;
    font-size: 12px;
    margin: 5px 0 0;
}

.seopc-audit-check small {
    color: #667085;
    display: block;
    font-size: 11px;
    margin-top: 6px;
}

.seopc-heading-count {
    border: 1px solid #eaecf0;
    display: grid;
    gap: 3px 8px;
    grid-template-columns: 1fr auto;
    min-height: 84px;
    padding: 11px 12px;
}

.seopc-heading-count.is-good {
    background: #f0fdf6;
    border-color: #a6f4c5;
}

.seopc-heading-count.is-warn {
    background: #fffaf0;
    border-color: #fedf89;
}

.seopc-heading-count.is-bad {
    background: #fff5f4;
    border-color: #fecdca;
}

.seopc-heading-count.is-good .seopc-heading-value { color: #067647; }
.seopc-heading-count.is-warn .seopc-heading-value { color: #b54708; }
.seopc-heading-count.is-bad .seopc-heading-value { color: #b42318; }

.seopc-heading-count strong {
    align-self: center;
}

.seopc-heading-value {
    align-self: center;
    font-size: 21px;
    font-weight: 850;
}

.seopc-heading-count small {
    color: #667085;
    font-size: 10px;
    grid-column: 1 / -1;
    line-height: 1.25;
}

.seopc-issue-list {
    counter-reset: seopc-issue;
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.seopc-issue-list li {
    align-items: flex-start;
    background: #fff7f6;
    border: 1px solid #fecdca;
    border-radius: 12px;
    color: #7a271a;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
}

.seopc-issue-list li > span {
    align-items: center;
    background: var(--seopc-score-bad);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 22px;
    font-size: 13px;
    font-weight: 900;
    height: 22px;
    justify-content: center;
}

@media (max-width: 1100px) {
    .seopc-score-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .seopc-score-ring {
        flex-basis: 82px;
        height: 82px;
        width: 82px;
    }
}

@media (max-width: 780px) {
    .seopc-check-grid {
        grid-template-columns: 1fr;
    }

    .seopc-score-card {
        align-items: center;
        flex-direction: row;
    }
}

@media (max-width: 420px) {
    .seopc-score-card {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* --------------------------------------------------------------------------
 * 2.2.0 agency growth workspace: greener visual system + new workbench tabs
 * -------------------------------------------------------------------------- */
.seopc-toolkit-root {
    --seopc-primary: #12715b;
    --seopc-primary-dark: #0b5746;
    --seopc-accent: #7c3aed;
    --seopc-mint: #dff7ee;
    --seopc-mint-strong: #9be3ca;
    --seopc-ink: #10211c;
    --seopc-muted: #66746f;
    --seopc-line: #dce8e3;
    --seopc-soft: #f5f8f6;
}

.seopc-toolkit-shell {
    background:
        radial-gradient(circle at 4% 2%, rgba(34, 197, 94, .10), transparent 25%),
        radial-gradient(circle at 96% 8%, rgba(124, 58, 237, .08), transparent 24%),
        #f7f9f8;
}

.seopc-toolkit-header {
    background:
        radial-gradient(circle at 9% -25%, rgba(79, 209, 161, .40), transparent 34%),
        linear-gradient(112deg, #0c211b 0%, #103c31 54%, #162f2a 100%);
}

.seopc-brand-mark,
.seopc-logo-mark {
    background: linear-gradient(145deg, #6ee7b7 0%, #22c55e 34%, #157a63 72%, #6d28d9 120%);
}

.seopc-brand small { color: #c8e8db; }

.seopc-tabs {
    background: rgba(255, 255, 255, .94);
    gap: 6px;
    padding-top: 11px;
    padding-bottom: 11px;
}

.seopc-tabs button {
    border-radius: 11px;
    font-size: 13px;
    padding: 8px 11px;
}

.seopc-tabs button.is-active,
.seopc-tabs button.is-active:hover {
    background: linear-gradient(135deg, #eaf8f3, #f4edff);
    border-color: #b9dfd2;
    color: #0e5d4b;
}

.seopc-tabs button.is-active .seopc-tab-icon {
    background: linear-gradient(135deg, #14745d, #6d28d9);
    box-shadow: 0 6px 16px rgba(18, 113, 91, .22);
}

.seopc-hero-panel {
    background:
        radial-gradient(circle at 7% 12%, rgba(52, 211, 153, .28), transparent 30%),
        radial-gradient(circle at 96% 105%, rgba(139, 92, 246, .22), transparent 30%),
        linear-gradient(125deg, #0d251e 0%, #123f34 55%, #282247 100%);
    box-shadow: 0 22px 58px rgba(17, 50, 41, .17);
}

.seopc-hero-green {
    background: linear-gradient(125deg, #0c2b22, #135d4a 55%, #174a3d);
}
.seopc-hero-social {
    background: linear-gradient(125deg, #10251f, #153e45 52%, #3b215c);
}
.seopc-hero-design {
    background: linear-gradient(125deg, #18251f, #225341 50%, #45316d);
}
.seopc-hero-studio {
    background: linear-gradient(125deg, #122a22, #174f3f 48%, #502d6d);
}
.seopc-hero-convert {
    background: linear-gradient(125deg, #10251f, #175545 50%, #423065);
}
.seopc-hero-resources {
    background: linear-gradient(125deg, #12251f, #1b5a47 48%, #374764);
}

.seopc-eyebrow { color: #a7f3d0; }

.seopc-toolkit-root input:focus,
.seopc-toolkit-root select:focus {
    border-color: #17a77f;
    box-shadow: 0 0 0 4px rgba(23, 167, 127, .13);
}

.seopc-btn-primary {
    background: linear-gradient(135deg, #14745d, #0f8a6b);
    border-color: #14745d;
    box-shadow: 0 8px 22px rgba(18, 113, 91, .20);
}
.seopc-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #0d5f4c, #0b755b);
    box-shadow: 0 12px 28px rgba(18, 113, 91, .27);
}
.seopc-btn-success {
    background: #157a63;
    border-color: #157a63;
}

.seopc-dropzone {
    border: 1.5px dashed #80cdb5;
    background: linear-gradient(145deg, rgba(255,255,255,.98), #effaf6);
}
.seopc-dropzone strong { color: #0f6c56; }
.seopc-dropzone-small { min-height: 105px; padding: 22px; }

.seopc-report-toolbar {
    align-items: center;
    background: linear-gradient(135deg, #eef9f5, #f7f2ff);
    border: 1px solid #d6e8e1;
    border-radius: 17px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 16px 18px;
}
.seopc-report-toolbar > div:first-child strong,
.seopc-report-toolbar > div:first-child span { display: block; }
.seopc-report-toolbar > div:first-child strong { color: #143f34; font-size: 14px; }
.seopc-report-toolbar > div:first-child span { color: #697973; font-size: 12px; margin-top: 2px; }

.seopc-chart-card {
    background: #fff;
    border: 1px solid #dfe9e5;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(16, 55, 43, .04);
    padding: 20px;
}
.seopc-chart-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 15px; }
.seopc-chart-head strong { color: #153f34; }
.seopc-chart-head span { color: #82918c; font-size: 11px; }
.seopc-bars { display: grid; gap: 11px; }
.seopc-bar-row { display: grid; gap: 6px; }
.seopc-bar-label { align-items: center; display: flex; font-size: 12px; justify-content: space-between; text-transform: capitalize; }
.seopc-bar-label span { color: #5d6d67; }
.seopc-bar-label strong { color: #1b352d; }
.seopc-bar-track { background: #eef2f0; border-radius: 999px; height: 9px; overflow: hidden; }
.seopc-bar-track > span { border-radius: inherit; display: block; height: 100%; transition: width .4s ease; }
.seopc-bar-track > span.is-good { background: linear-gradient(90deg, #10b981, #22c55e); }
.seopc-bar-track > span.is-warn { background: linear-gradient(90deg, #f59e0b, #f7b955); }
.seopc-bar-track > span.is-bad { background: linear-gradient(90deg, #ef4444, #fb7185); }

.seopc-sitemap-tree { display: grid; gap: 12px; }
.seopc-sitemap-node { background: #fbfdfc; border: 1px solid #deebe6; border-radius: 15px; overflow: hidden; }
.seopc-sitemap-node-head { align-items: flex-start; display: grid; gap: 12px; grid-template-columns: 12px minmax(0,1fr) auto; padding: 14px 16px; }
.seopc-sitemap-node-head strong { color: #193e33; display: block; font-size: 13px; }
.seopc-sitemap-node-head a { color: #567168; display: block; font-size: 11px; margin-top: 2px; overflow-wrap: anywhere; text-decoration: none; }
.seopc-sitemap-node-head b { background: #eaf8f3; border-radius: 999px; color: #11644f; font-size: 11px; padding: 5px 8px; }
.seopc-tree-dot { background: #17a77f; border-radius: 50%; box-shadow: 0 0 0 4px #def5ec; height: 9px; margin-top: 6px; width: 9px; }
.seopc-sitemap-children { border-top: 1px solid #e7efec; color: #687971; display: grid; font-size: 10px; max-height: 180px; overflow: auto; padding: 9px 18px 12px 40px; }
.seopc-sitemap-children > div { border-left: 1px solid #cfe3db; overflow-wrap: anywhere; padding: 5px 0 5px 13px; }
.seopc-pages-table th { white-space: nowrap; width: auto; }
.seopc-pages-table td:first-child { min-width: 280px; }
.seopc-pages-table a { color: #126c56; font-weight: 700; text-decoration: none; }
.seopc-mini-score { align-items: center; border-radius: 999px; display: inline-flex; font-size: 11px; font-weight: 850; justify-content: center; min-width: 34px; padding: 5px 8px; }
.seopc-mini-score.is-good { background: #dcfce7; color: #087443; }
.seopc-mini-score.is-warn { background: #fff3d4; color: #a75c06; }
.seopc-mini-score.is-bad { background: #fee2e2; color: #b42318; }
.seopc-issue-badge,.seopc-ok-badge { border-radius: 999px; display:inline-flex; font-size:10px; font-weight:750; padding:5px 7px; white-space:nowrap; }
.seopc-issue-badge { background:#fff1f0; color:#b42318; }
.seopc-ok-badge { background:#e9f9f1; color:#087443; }

.seopc-social-grid { display: grid; gap: 12px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.seopc-social-card { align-items: center; background: linear-gradient(145deg,#fff,#f5faf8); border:1px solid #dfeae5; border-radius:14px; color:#1d3930; display:flex; gap:11px; min-width:0; padding:14px; text-decoration:none; }
.seopc-social-card:hover { border-color:#9dd6c3; box-shadow:0 9px 24px rgba(25,78,61,.08); }
.seopc-social-icon { align-items:center; background:linear-gradient(135deg,#0f8164,#7250b4); border-radius:10px; color:#fff; display:flex; flex:0 0 36px; font-weight:850; height:36px; justify-content:center; }
.seopc-social-card strong { display:block; text-transform:capitalize; }
.seopc-social-card small { color:#74837d; display:block; font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.seopc-browser-frame { background:#eef2f0; border:1px solid #dbe7e2; border-radius:18px; overflow:hidden; }
.seopc-browser-bar { align-items:center; background:#f9fbfa; border-bottom:1px solid #dbe7e2; display:flex; gap:6px; padding:10px 12px; }
.seopc-browser-bar > span { background:#cfdad6; border-radius:50%; height:8px; width:8px; }
.seopc-browser-bar b { color:#60706a; font-size:10px; margin-left:auto; }
.seopc-browser-stage { background:repeating-conic-gradient(#eef2f0 0% 25%,#f7f9f8 0% 50%) 0/18px 18px; max-height:760px; overflow:auto; padding:16px; }
.seopc-browser-stage iframe { background:#fff; border:0; display:block; height:700px; margin:0 auto; max-width:none; }
.seopc-design-controls { align-items:center; display:flex; flex-wrap:wrap; gap:14px; }
.seopc-design-controls .seopc-dropzone { flex:1 1 360px; }
.seopc-toggle { align-items:center; display:inline-flex!important; gap:8px; margin:0!important; }
.seopc-toggle input { accent-color:#14745d; height:18px; width:18px; }
.seopc-toggle span { color:#40554d; font-size:12px; font-weight:700; }
.seopc-measure-readout { background:#f2edff; border:1px solid #d9ccff; border-radius:10px; color:#5b21b6; font-size:11px; font-weight:750; padding:9px 11px; }
.seopc-canvas-wrap { background:#e9eeec; border-radius:14px; margin-top:16px; overflow:auto; padding:14px; width:100%; }
.seopc-canvas-wrap canvas { cursor:crosshair; display:block; height:auto; max-width:100%; }

.seopc-studio-layout { display:grid; gap:18px; grid-template-columns:minmax(0,1.25fr) minmax(350px,.75fr); }
.seopc-canvas-editor { align-items:center; background:repeating-conic-gradient(#edf2f0 0% 25%,#fff 0% 50%) 0/24px 24px; display:flex; justify-content:center; min-height:520px; overflow:auto; }
.seopc-canvas-editor canvas { height:auto; max-height:650px; max-width:100%; }

.seopc-convert-badges { align-items:center; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.seopc-convert-badges span { background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#e6fff5; font-size:11px; font-weight:800; padding:7px 10px; }
.seopc-two-col { display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.seopc-doc-export { background:#fff; color:#111827; font-family:Arial,sans-serif; line-height:1.5; padding:30px; position:fixed; right:110vw; top:0; width:780px; }
.seopc-doc-export h1 { color:#111827; font-size:28px; }
.seopc-doc-export img { max-width:100%; }

.seopc-resource-grid { display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.seopc-resource-card { background:linear-gradient(145deg,#fff,#f4faf7); border:1px solid #dce9e4; border-radius:16px; color:#173d32; min-height:128px; padding:18px; position:relative; text-decoration:none; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }
.seopc-resource-card:hover { border-color:#a3d7c5; box-shadow:0 13px 34px rgba(19,79,60,.08); transform:translateY(-2px); }
.seopc-resource-card strong,.seopc-resource-card small { display:block; }
.seopc-resource-card strong { font-size:15px; margin-top:26px; }
.seopc-resource-card small { color:#71817a; font-size:11px; margin-top:4px; }
.seopc-resource-arrow { align-items:center; background:#e8f7f1; border-radius:9px; color:#0f7158; display:flex; height:30px; justify-content:center; position:absolute; right:15px; top:15px; width:30px; }

@media (max-width: 1050px) {
    .seopc-social-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .seopc-studio-layout,.seopc-two-col { grid-template-columns:1fr; }
    .seopc-resource-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 720px) {
    .seopc-report-toolbar { align-items:flex-start; flex-direction:column; }
    .seopc-report-toolbar .seopc-inline-actions { width:100%; }
    .seopc-report-toolbar .seopc-btn { flex:1 1 auto; }
    .seopc-social-grid { grid-template-columns:1fr; }
    .seopc-resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .seopc-sitemap-node-head { grid-template-columns:12px minmax(0,1fr); }
    .seopc-sitemap-node-head b { grid-column:2; justify-self:start; }
}
@media (max-width: 460px) {
    .seopc-resource-grid { grid-template-columns:1fr; }
}

@media print {
    body.seopc-toolkit-page { background:#fff!important; }
    .seopc-toolkit-header,.seopc-tabs,.seopc-toolkit-footer,.seopc-hero-panel,.seopc-report-toolbar,.seopc-action-links,.seopc-btn { display:none!important; }
    .seopc-toolkit-root,.seopc-toolkit-shell,.seopc-toolkit-main,.seopc-toolkit-main>div { background:#fff!important; border:0!important; box-shadow:none!important; margin:0!important; max-width:none!important; padding:0!important; width:100%!important; }
    .seopc-section,.seopc-chart-card,.seopc-score-card { break-inside:avoid; box-shadow:none!important; }
    .seopc-score-grid { grid-template-columns:repeat(4,1fr)!important; }
}
.seopc-compact-actions { align-items:center; color:#73827c; display:flex; flex-wrap:wrap; font-size:11px; gap:9px; margin:-8px 0 18px; }
.seopc-compact-actions > span { font-weight:750; }
.seopc-file-action,.seopc-link-button { background:#fff; border:1px solid #dce8e3; border-radius:999px; color:#126c56!important; cursor:pointer; display:inline-flex!important; font-size:11px!important; font-weight:750!important; margin:0!important; padding:7px 10px; text-decoration:none; }
.seopc-file-action input { display:none; }
.seopc-link-button:hover,.seopc-file-action:hover { background:#eef9f5; border-color:#addbc9; }


/* ================================================================
 * 2.2.1 polished form controls + green range sliders + AJAX toggle
 * These final scoped rules intentionally override WordPress/theme defaults.
 * ================================================================ */
.seopc-toolkit-root input:not([type]),
.seopc-toolkit-root input[type="text"],
.seopc-toolkit-root input[type="url"],
.seopc-toolkit-root input[type="search"],
.seopc-toolkit-root input[type="email"],
.seopc-toolkit-root input[type="tel"],
.seopc-toolkit-root input[type="password"],
.seopc-toolkit-root input[type="number"],
.seopc-toolkit-root select,
.seopc-toolkit-root textarea {
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
    border: 1px solid #c8ddd5;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 66, 52, .035), inset 0 0 0 1px rgba(255,255,255,.72);
    color: #123c32;
    font-size: 16px;
    font-weight: 550;
    line-height: 1.35;
    min-height: 52px;
    outline: 0;
    padding: 0 16px;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
    width: 100%;
}

.seopc-toolkit-root textarea {
    min-height: 112px;
    padding-block: 13px;
    resize: vertical;
}

.seopc-toolkit-root input:not([type]):hover,
.seopc-toolkit-root input[type="text"]:hover,
.seopc-toolkit-root input[type="url"]:hover,
.seopc-toolkit-root input[type="search"]:hover,
.seopc-toolkit-root input[type="email"]:hover,
.seopc-toolkit-root input[type="tel"]:hover,
.seopc-toolkit-root input[type="password"]:hover,
.seopc-toolkit-root input[type="number"]:hover,
.seopc-toolkit-root select:hover,
.seopc-toolkit-root textarea:hover {
    border-color: #91c8b6;
    background: #fff;
    box-shadow: 0 4px 14px rgba(18, 113, 91, .055), inset 0 0 0 1px rgba(255,255,255,.8);
}

.seopc-toolkit-root input:not([type]):focus,
.seopc-toolkit-root input[type="text"]:focus,
.seopc-toolkit-root input[type="url"]:focus,
.seopc-toolkit-root input[type="search"]:focus,
.seopc-toolkit-root input[type="email"]:focus,
.seopc-toolkit-root input[type="tel"]:focus,
.seopc-toolkit-root input[type="password"]:focus,
.seopc-toolkit-root input[type="number"]:focus,
.seopc-toolkit-root select:focus,
.seopc-toolkit-root textarea:focus {
    background: #fff;
    border-color: #1aa27c;
    box-shadow: 0 0 0 4px rgba(26, 162, 124, .12), 0 8px 20px rgba(16, 86, 67, .07);
    outline: none;
}

.seopc-toolkit-root input::placeholder,
.seopc-toolkit-root textarea::placeholder {
    color: #9aa9a4;
    font-weight: 450;
    opacity: 1;
}

.seopc-url-form .seopc-input-grow > input,
.seopc-url-form .seopc-input-grow > select {
    border-radius: 15px;
    min-height: 54px;
}

.seopc-toolkit-root select {
    background-image:
        linear-gradient(45deg, transparent 50%, #267e67 50%),
        linear-gradient(135deg, #267e67 50%, transparent 50%);
    background-position:
        calc(100% - 19px) calc(50% - 3px),
        calc(100% - 13px) calc(50% - 3px);
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    cursor: pointer;
    padding-right: 42px;
}

.seopc-toolkit-root input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
    opacity: .55;
}

/* Green premium range control. */
.seopc-range-field {
    display: grid !important;
    gap: 9px;
    margin: 0 !important;
    min-width: 180px;
}

.seopc-range-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-height: 24px;
}

.seopc-range-head > span:first-child {
    color: #304b43;
    font-size: 13px;
    font-weight: 750;
}

.seopc-range-value {
    background: linear-gradient(135deg, #eaf8f3, #f5fbf8);
    border: 1px solid #c4e3d8;
    border-radius: 999px;
    color: #0f6d56;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    min-width: 50px;
    padding: 6px 9px;
    text-align: center;
}

.seopc-toolkit-root input[type="range"].seopc-range {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
    height: 28px;
    margin: 0;
    min-height: 28px;
    padding: 0;
    width: 100%;
}

.seopc-toolkit-root input[type="range"].seopc-range:focus {
    box-shadow: none;
    outline: none;
}

.seopc-toolkit-root input[type="range"].seopc-range::-webkit-slider-runnable-track {
    background: linear-gradient(90deg,
        #0f7f62 0%,
        #22b58a var(--seopc-range-progress, 50%),
        #dceae5 var(--seopc-range-progress, 50%),
        #eaf2ef 100%);
    border: 1px solid rgba(22, 112, 87, .12);
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(15, 78, 61, .08);
    height: 8px;
}

.seopc-toolkit-root input[type="range"].seopc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(145deg, #24b58b, #10765d);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 9px rgba(11, 91, 69, .30), 0 0 0 1px rgba(17, 126, 96, .18);
    height: 22px;
    margin-top: -7px;
    transition: box-shadow .14s ease, transform .14s ease;
    width: 22px;
}

.seopc-toolkit-root input[type="range"].seopc-range:hover::-webkit-slider-thumb,
.seopc-toolkit-root input[type="range"].seopc-range:focus::-webkit-slider-thumb {
    box-shadow: 0 3px 12px rgba(11, 91, 69, .34), 0 0 0 5px rgba(34, 181, 138, .12);
    transform: scale(1.05);
}

.seopc-toolkit-root input[type="range"].seopc-range::-moz-range-track {
    background: #e3eeea;
    border: 1px solid rgba(22, 112, 87, .12);
    border-radius: 999px;
    height: 8px;
}

.seopc-toolkit-root input[type="range"].seopc-range::-moz-range-progress {
    background: linear-gradient(90deg, #0f7f62, #22b58a);
    border-radius: 999px;
    height: 8px;
}

.seopc-toolkit-root input[type="range"].seopc-range::-moz-range-thumb {
    background: linear-gradient(145deg, #24b58b, #10765d);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 9px rgba(11, 91, 69, .30);
    height: 17px;
    width: 17px;
}

/* Small optional fresh-data AJAX control used by audit/network/social/sitemap forms. */
.seopc-ajax-toggle {
    align-items: center;
    align-self: center;
    background: #f6fbf9;
    border: 1px solid #d6e8e1;
    border-radius: 13px;
    cursor: pointer;
    display: inline-flex !important;
    gap: 9px;
    margin: 0 !important;
    min-height: 50px;
    padding: 8px 11px;
    user-select: none;
}

.seopc-ajax-toggle:hover {
    background: #eef9f5;
    border-color: #afd8ca;
}

.seopc-ajax-toggle > input {
    height: 1px !important;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    width: 1px !important;
}

.seopc-ajax-switch {
    background: #dce9e4;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(16, 72, 57, .08);
    flex: 0 0 34px;
    height: 20px;
    position: relative;
    transition: background .16s ease, box-shadow .16s ease;
    width: 34px;
}

.seopc-ajax-switch::after {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 5px rgba(15, 72, 57, .22);
    content: "";
    height: 16px;
    left: 2px;
    position: absolute;
    top: 2px;
    transition: transform .16s ease;
    width: 16px;
}

.seopc-ajax-toggle > input:checked + .seopc-ajax-switch {
    background: linear-gradient(135deg, #14745d, #20aa82);
    box-shadow: 0 0 0 3px rgba(23, 167, 127, .10);
}

.seopc-ajax-toggle > input:checked + .seopc-ajax-switch::after {
    transform: translateX(14px);
}

.seopc-ajax-toggle-copy {
    display: grid;
    line-height: 1.02;
}

.seopc-ajax-toggle-copy strong {
    color: #214a3f;
    font-size: 11px;
    font-weight: 800;
}

.seopc-ajax-toggle-copy small {
    color: #7b918a;
    font-size: 9px;
    font-weight: 650;
    margin-top: 3px;
}

@media (max-width: 760px) {
    .seopc-ajax-toggle {
        justify-content: center;
        width: 100%;
    }
}

/* ================================================================
 * 2.3.0 visual sitemap, brand/profile QA, resilient Design QA,
 * layer-based Image Studio and integrated free-media directory.
 * ================================================================ */
.seopc-hero-media {
    background:
        radial-gradient(circle at 10% 5%, rgba(110,231,183,.26), transparent 30%),
        radial-gradient(circle at 96% 105%, rgba(124,58,237,.24), transparent 34%),
        linear-gradient(125deg,#0c2a21,#105540 52%,#302052);
}

.seopc-provider-filter {
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:-4px 0 14px;
}
.seopc-provider-filter button {
    align-items:center;
    background:#fff;
    border:1px solid #d8e7e1;
    border-radius:999px;
    color:#50655d;
    cursor:pointer;
    display:inline-flex;
    font-size:11px;
    font-weight:800;
    gap:7px;
    padding:7px 11px;
}
.seopc-provider-filter button:hover,
.seopc-provider-filter button.is-active {
    background:#eaf8f3;
    border-color:#8dcab6;
    color:#0c6b53;
    box-shadow:0 6px 18px rgba(16,113,88,.08);
}
.seopc-provider-dot { background:#24b58b;border-radius:50%;height:7px;width:7px; }

.seopc-source-directory {
    display:grid;
    gap:12px;
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.seopc-source-card {
    background:linear-gradient(145deg,#fff,#f5faf8);
    border:1px solid #dce8e3;
    border-radius:16px;
    color:#183b31;
    min-height:130px;
    padding:15px;
    position:relative;
    text-decoration:none!important;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.seopc-source-card:hover { border-color:#91cdb9;box-shadow:0 12px 30px rgba(16,76,58,.09);transform:translateY(-2px); }
.seopc-source-card strong,.seopc-source-card small { display:block; }
.seopc-source-card strong { font-size:14px;margin-top:20px; }
.seopc-source-card small { color:#71817b;font-size:10px;margin-top:4px; }
.seopc-source-card > b { color:#0e765b;font-size:18px;position:absolute;right:15px;top:13px; }
.seopc-source-status { background:#f0f4f2;border-radius:999px;color:#6c7b76;font-size:9px;font-weight:850;padding:5px 7px; }
.seopc-source-status.is-connected { background:#e2f8ef;color:#087150; }

/* URL sitemap relationship map. */
.seopc-sitemap-file-strip { display:flex;gap:9px;overflow-x:auto;padding:3px 1px 11px; }
.seopc-sitemap-file-card { background:#fff;border:1px solid #dce9e4;border-radius:13px;color:#213b33;display:grid;flex:0 0 160px;gap:2px;padding:11px 12px;text-decoration:none!important; }
.seopc-sitemap-file-card span { color:#0e8162;font-size:8px;font-weight:900;letter-spacing:.08em; }
.seopc-sitemap-file-card strong { font-size:13px; }
.seopc-sitemap-file-card small { color:#829089;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.seopc-url-map { padding:4px 0; }
.seopc-map-branch { position:relative; }
.seopc-map-children {
    border-left:2px solid #dbe9e4;
    display:grid;
    gap:10px;
    margin:10px 0 4px 18px;
    padding-left:22px;
    position:relative;
}
.seopc-map-children > .seopc-map-branch::before {
    border-top:2px solid #dbe9e4;
    content:"";
    left:-22px;
    position:absolute;
    top:27px;
    width:22px;
}
.seopc-page-node {
    background:linear-gradient(145deg,#fff,#fbfdfc);
    border:1px solid #dce8e3;
    border-radius:16px;
    box-shadow:0 5px 16px rgba(14,67,51,.035);
    overflow:hidden;
    transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.seopc-page-node:hover { border-color:#b6d8cc;box-shadow:0 9px 24px rgba(14,67,51,.07); }
.seopc-page-node.is-scanned { border-color:#b4ddcd; }
.seopc-page-node.has-error { border-color:#fecaca; }
.seopc-page-node-top { align-items:center;display:flex;gap:10px;padding:12px 14px; }
.seopc-tree-toggle { align-items:center;background:#eaf8f3;border:1px solid #cbe8dd;border-radius:9px;color:#0c7459;cursor:pointer;display:flex;flex:0 0 28px;font-size:16px;font-weight:800;height:28px;justify-content:center;padding:0;width:28px; }
.seopc-tree-toggle.is-empty { background:#f5f8f7;color:#9aa7a2;font-size:11px; }
.seopc-page-node-title { min-width:0; }
.seopc-page-node-title strong { color:#163f33;display:block;font-size:13px;overflow-wrap:anywhere; }
.seopc-page-node-title small { color:#82918b;display:block;font-size:9px;margin-top:1px;overflow-wrap:anywhere; }
.seopc-page-node-badges { display:flex;flex-wrap:wrap;gap:6px;margin-left:auto; }
.seopc-node-pill { background:#f0f5f3;border-radius:999px;color:#60736b;font-size:9px;font-weight:800;padding:5px 7px;white-space:nowrap; }
.seopc-page-node-meta { align-items:center;border-top:1px solid #edf2f0;color:#71817b;display:flex;flex-wrap:wrap;font-size:9px;gap:8px;padding:9px 14px; }
.seopc-page-node-actions { align-items:center;display:flex;gap:8px;margin-left:auto; }
.seopc-page-node-actions .seopc-btn { min-height:30px;padding:5px 9px;font-size:10px; }
.seopc-node-audit { background:#f8fbfa;border-top:1px solid #e8f0ed;color:#41574f;font-size:10px;padding:10px 14px; }
.seopc-node-audit > div > strong { color:#8c4913;display:block;margin-bottom:5px; }
.seopc-node-audit ul { margin:0;padding-left:18px; }
.seopc-node-clean { color:#08724f;font-weight:800; }
.seopc-node-unscanned { background:#fbfcfc;border-top:1px solid #eef2f1;color:#9aa7a2;font-size:9px;padding:7px 14px; }
.seopc-kpi-row { display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr)); }
.seopc-kpi-row > div { background:#f6faf8;border:1px solid #e1ebe7;border-radius:14px;padding:15px; }
.seopc-kpi-row strong,.seopc-kpi-row span { display:block; }
.seopc-kpi-row strong { color:#0d6e55;font-size:22px; }
.seopc-kpi-row span { color:#6f8079;font-size:10px; }

/* Social profile diagnostics. */
.seopc-social-audit-card { align-items:stretch;display:block; }
.seopc-social-audit-card:hover { transform:none; }
.seopc-social-card-head { align-items:center;display:flex;gap:10px;min-width:0; }
.seopc-social-card-head > div { min-width:0; }
.seopc-social-card-head a { color:#667a72;display:block;font-size:9px;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap; }
.seopc-social-audit-card > p { color:#5f726a;font-size:10px;margin:10px 0 4px; }
.seopc-profile-status { border-radius:999px;display:inline-flex;font-size:9px;font-weight:850;margin-top:10px;padding:5px 8px; }
.seopc-profile-status.is-good { background:#dcfce7;color:#087443; }
.seopc-profile-status.is-warn { background:#fff3d4;color:#985607; }
.seopc-profile-status.is-bad { background:#fee2e2;color:#b42318; }
.seopc-profile-status.is-neutral { background:#edf2f0;color:#687973; }
.seopc-share-preview { border:1px solid #dfe8e5;border-radius:15px;overflow:hidden; }
.seopc-share-preview > img,.seopc-share-preview-empty { aspect-ratio:1.91/1;background:#e9efed;display:block;object-fit:cover;width:100%; }
.seopc-share-preview-empty { align-items:center;color:#8b9994;display:flex;font-size:11px;justify-content:center; }
.seopc-share-preview > div:last-child { padding:14px; }
.seopc-share-preview small,.seopc-share-preview strong,.seopc-share-preview p { display:block;margin:0; }
.seopc-share-preview small { color:#81918b;font-size:9px;text-transform:uppercase; }
.seopc-share-preview strong { color:#183c31;font-size:14px;margin-top:4px; }
.seopc-share-preview p { color:#667970;font-size:10px;margin-top:5px; }
.seopc-practice-grid { display:grid;gap:11px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px; }
.seopc-practice-grid > div { background:#f6faf8;border:1px solid #e0ebe7;border-radius:13px;padding:13px; }
.seopc-practice-grid strong { color:#173f34;font-size:11px; }
.seopc-practice-grid p { color:#6f8079;font-size:10px;margin:4px 0 0; }
.seopc-practice-grid-single { grid-template-columns:1fr; }

/* Resilient Design QA. */
.seopc-design-scorebar { align-items:center;display:grid;gap:18px;grid-template-columns:240px minmax(0,1fr); }
.seopc-design-kpis { display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr)); }
.seopc-design-kpis > div { background:#fff;border:1px solid #dfe9e5;border-radius:14px;padding:13px; }
.seopc-design-kpis strong,.seopc-design-kpis span { display:block; }
.seopc-design-kpis strong { color:#0c7659;font-size:20px; }
.seopc-design-kpis span { color:#71817b;font-size:9px;margin-top:2px; }
.seopc-breakpoint-pills { display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px; }
.seopc-breakpoint-pills button { background:#f6faf8;border:1px solid #dce8e3;border-radius:999px;color:#61736c;cursor:pointer;font-size:10px;font-weight:800;padding:6px 9px; }
.seopc-breakpoint-pills button.is-active { background:#14745d;border-color:#14745d;color:#fff; }
.seopc-frame-blocked { align-items:flex-start;background:linear-gradient(145deg,#fffaf0,#f6faf8);border:1px solid #eadfc2;border-radius:16px;display:flex;flex-direction:column;gap:7px;padding:22px; }
.seopc-frame-blocked strong { color:#664714; }
.seopc-frame-blocked p { color:#77684f;font-size:11px;margin:0; }
.seopc-frame-blocked .seopc-btn { margin-top:5px; }
.seopc-measure-readout strong,.seopc-measure-readout span { display:block; }
.seopc-measure-readout span { color:#7656b8;font-size:9px;margin-top:2px; }
.seopc-empty-canvas { align-items:center;background:repeating-conic-gradient(#eef2f0 0% 25%,#f9fbfa 0% 50%) 0/20px 20px;border:1px dashed #cbded7;border-radius:14px;color:#82918c;display:flex;justify-content:center;margin-top:16px;min-height:180px; }

/* Layer-based Image Studio. */
.seopc-studio-workspace { display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 320px; }
.seopc-studio-main,.seopc-layer-panel { background:#fff;border:1px solid #dfe9e5;border-radius:18px;box-shadow:0 10px 30px rgba(16,55,43,.04); }
.seopc-studio-main { overflow:hidden; }
.seopc-studio-toolbar { align-items:center;border-bottom:1px solid #e8efec;display:flex;flex-wrap:wrap;gap:8px;padding:12px; }
.seopc-studio-toolbar .seopc-btn { min-height:36px;padding:7px 10px;font-size:10px; }
.seopc-studio-toolbar > label.seopc-btn { margin:0!important;position:relative; }
.seopc-studio-toolbar > label.seopc-btn input { display:none; }
.seopc-add-text { align-items:center;display:flex;gap:6px;min-width:260px; }
.seopc-add-text input[type="text"] { min-height:36px!important;padding:0 10px!important;font-size:11px!important; }
.seopc-studio-canvas { border-radius:0;min-height:520px;touch-action:none; }
.seopc-studio-canvas canvas { cursor:move; }
.seopc-export-bar { align-items:end;border-top:1px solid #e8efec;display:grid;gap:12px;grid-template-columns:150px minmax(160px,1fr) minmax(160px,1fr) auto auto;padding:14px; }
.seopc-export-bar > label { margin:0!important; }
.seopc-export-bar select { min-height:42px!important;font-size:12px!important; }
.seopc-layer-panel { align-self:start;overflow:hidden; }
.seopc-layer-panel-head { align-items:center;background:#f5faf8;border-bottom:1px solid #e3ece8;display:flex;justify-content:space-between;padding:13px 14px; }
.seopc-layer-panel-head strong { color:#173f34; }
.seopc-layer-panel-head span { background:#e1f5ed;border-radius:999px;color:#0c7359;font-size:10px;font-weight:850;padding:4px 7px; }
.seopc-layer-list { display:grid;max-height:260px;overflow:auto;padding:8px; }
.seopc-layer-list button { align-items:center;background:transparent;border:1px solid transparent;border-radius:10px;color:#4e635b;cursor:pointer;display:grid;font-size:10px;gap:8px;grid-template-columns:28px minmax(0,1fr) 12px;padding:8px;text-align:left; }
.seopc-layer-list button:hover,.seopc-layer-list button.is-active { background:#eef8f4;border-color:#cee7dd;color:#0e664f; }
.seopc-layer-list button > span:nth-child(2) { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.seopc-layer-kind { align-items:center;background:#dff5ec;border-radius:8px;display:flex;font-size:12px;font-weight:850;height:28px;justify-content:center;width:28px; }
.seopc-layer-list i { color:#16a47b;font-style:normal; }
.seopc-layer-controls,.seopc-crop-panel { border-top:1px solid #e8efec;display:grid;gap:12px;padding:14px; }
.seopc-layer-controls > label:not(.seopc-toggle) { margin:0!important; }
.seopc-layer-controls input[type="text"],.seopc-layer-controls input[type="number"],.seopc-layer-controls select { min-height:42px!important;font-size:12px!important; }
.seopc-layer-controls input[type="color"] { background:#fff;border:1px solid #c8ddd5;border-radius:12px;height:42px;padding:4px;width:100%; }
.seopc-crop-panel > strong { color:#1d4337;font-size:11px; }

@media (max-width:1100px) {
    .seopc-source-directory { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .seopc-studio-workspace { grid-template-columns:1fr; }
    .seopc-layer-panel { display:grid;grid-template-columns:220px minmax(0,1fr); }
    .seopc-layer-panel-head { grid-column:1/-1; }
    .seopc-layer-list { max-height:420px; }
    .seopc-layer-controls { border-left:1px solid #e8efec;border-top:0; }
    .seopc-crop-panel { grid-column:1/-1; }
    .seopc-export-bar { grid-template-columns:140px 1fr 1fr; }
}
@media (max-width:820px) {
    .seopc-source-directory { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .seopc-design-scorebar { grid-template-columns:1fr; }
    .seopc-design-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .seopc-practice-grid { grid-template-columns:1fr; }
    .seopc-map-children { margin-left:10px;padding-left:15px; }
    .seopc-map-children > .seopc-map-branch::before { left:-15px;width:15px; }
    .seopc-page-node-meta { align-items:flex-start;flex-direction:column; }
    .seopc-page-node-actions { margin-left:0; }
    .seopc-export-bar { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
    .seopc-source-directory,.seopc-design-kpis,.seopc-kpi-row { grid-template-columns:1fr; }
    .seopc-layer-panel { display:block; }
    .seopc-layer-controls { border-left:0;border-top:1px solid #e8efec; }
    .seopc-export-bar { grid-template-columns:1fr; }
    .seopc-add-text { min-width:100%; }
    .seopc-page-node-top { align-items:flex-start;flex-wrap:wrap; }
    .seopc-page-node-badges { margin-left:38px;width:calc(100% - 38px); }
}

/* ========================================================================
 * 2.4.0 client-ready audit reporting + full Lighthouse/Agentic presentation
 * ======================================================================== */
.seopc-client-report {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.seopc-report-block {
    break-inside: avoid;
    page-break-inside: avoid;
}

.seopc-report-cover {
    align-items: stretch;
    background:
        radial-gradient(circle at 90% 5%, rgba(139, 92, 246, .24), transparent 28%),
        radial-gradient(circle at 10% 100%, rgba(16, 185, 129, .18), transparent 30%),
        linear-gradient(125deg, #0d2c24 0%, #0e5a47 48%, #34245e 100%);
    border: 1px solid rgba(15, 93, 71, .35);
    border-radius: 24px;
    box-shadow: 0 20px 54px rgba(20, 65, 52, .14);
    color: #fff;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) 190px;
    overflow: hidden;
    padding: 30px 34px;
    position: relative;
}

.seopc-report-cover::after {
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 50%;
    content: '';
    height: 320px;
    position: absolute;
    right: -180px;
    top: -210px;
    width: 320px;
}

.seopc-report-cover-copy { min-width: 0; position: relative; z-index: 1; }
.seopc-report-kicker {
    color: #a7f3d0;
    display: block;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.seopc-report-cover h2 {
    color: #fff;
    font-size: clamp(27px, 3vw, 42px);
    letter-spacing: -.045em;
    line-height: 1.02;
    margin: 0;
    overflow-wrap: anywhere;
}
.seopc-report-cover p {
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    line-height: 1.55;
    margin: 10px 0 0;
    max-width: 700px;
}
.seopc-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}
.seopc-report-meta span {
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: rgba(255, 255, 255, .86);
    font-size: 9px;
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    padding: 6px 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seopc-report-overall {
    align-items: center;
    align-self: center;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(2, 20, 14, .16);
    color: #173d33;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    min-height: 175px;
    padding: 16px;
    position: relative;
    text-align: center;
    z-index: 1;
}
.seopc-report-overall .seopc-score-ring { flex-basis: 84px; height: 84px; width: 84px; }
.seopc-report-overall .seopc-score-number { font-size: 27px; }
.seopc-report-overall > strong { color: #153f34; font-size: 12px; }
.seopc-report-overall > small { color: #708079; font-size: 9px; margin: 0; }

.seopc-report-score-section,
.seopc-psi-dashboard {
    background: #fff;
    border: 1px solid #dfe9e5;
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(16, 55, 43, .05);
    padding: 22px;
}
.seopc-report-section-heading {
    align-items: end;
    border-bottom: 1px solid #e8efec;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
}
.seopc-report-section-heading > div > span {
    color: #0c8061;
    display: block;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .11em;
    margin-bottom: 3px;
    text-transform: uppercase;
}
.seopc-report-section-heading h3 {
    color: #173d33;
    font-size: 19px;
    letter-spacing: -.025em;
    margin: 0;
}
.seopc-report-section-heading > small {
    color: #81918b;
    font-size: 9px;
    margin: 0;
    text-align: right;
}

.seopc-score-grid-report {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.seopc-score-grid-report .seopc-score-card,
.seopc-lh-score-grid .seopc-score-card {
    min-height: 132px;
    padding: 16px;
}
.seopc-score-grid-report .seopc-score-ring,
.seopc-lh-score-grid .seopc-score-ring {
    flex-basis: 72px;
    height: 72px;
    width: 72px;
}
.seopc-score-grid-report .seopc-score-number,
.seopc-lh-score-grid .seopc-score-number { font-size: 24px; }
.seopc-score-grid-report .seopc-score-label,
.seopc-lh-score-grid .seopc-score-label { font-size: 13px; }

.seopc-psi-dashboard {
    display: grid;
    gap: 16px;
}
.seopc-psi-dashboard .seopc-report-section-heading { margin-bottom: 0; }
.seopc-psi-surface,
.seopc-psi-list-card {
    background: linear-gradient(145deg, #fbfdfc, #fff);
    border: 1px solid #e0e9e5;
    border-radius: 17px;
    padding: 18px;
}
.seopc-psi-surface-head,
.seopc-psi-list-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 14px;
}
.seopc-psi-surface-head strong,
.seopc-psi-list-head strong { color: #173e33; font-size: 13px; }
.seopc-psi-surface-head span,
.seopc-psi-list-head span { color: #82918c; font-size: 9px; text-align: right; }

.seopc-report-metric-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.seopc-report-metric {
    --metric-color: #94a3b8;
    background: #fff;
    border: 1px solid #e2e8e5;
    border-radius: 14px;
    min-height: 104px;
    padding: 14px;
}
.seopc-report-metric.is-good { --metric-color: #12a471; background: linear-gradient(145deg, #fff, #f0fbf6); }
.seopc-report-metric.is-warn { --metric-color: #f59e0b; background: linear-gradient(145deg, #fff, #fff9ed); }
.seopc-report-metric.is-bad { --metric-color: #ef4444; background: linear-gradient(145deg, #fff, #fff4f3); }
.seopc-report-metric-top { align-items: center; display: flex; gap: 8px; }
.seopc-report-metric-dot { background: var(--metric-color); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--metric-color) 13%, white); height: 9px; width: 9px; }
.seopc-report-metric-top strong { color: var(--metric-color); font-size: 22px; letter-spacing: -.04em; }
.seopc-report-metric-label { color: #344c44; display: block; font-size: 10px; font-weight: 800; margin-top: 8px; }
.seopc-report-metric small { color: #81918b; display: block; font-size: 8.5px; line-height: 1.35; margin-top: 3px; }

.seopc-psi-list { display: grid; }
.seopc-psi-list article {
    align-items: start;
    border-top: 1px solid #e8efec;
    display: grid;
    gap: 10px;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    padding: 12px 0;
}
.seopc-psi-list article:first-child { border-top: 0; padding-top: 0; }
.seopc-psi-list article:last-child { padding-bottom: 0; }
.seopc-psi-list-dot { background: #94a3b8; border-radius: 50%; height: 8px; margin-top: 5px; width: 8px; }
.seopc-psi-list-dot.is-good { background: #12a471; }
.seopc-psi-list-dot.is-warn { background: #f59e0b; }
.seopc-psi-list-dot.is-bad { background: #ef4444; }
.seopc-psi-list article strong { color: #243f36; display: block; font-size: 11px; }
.seopc-psi-list article p { color: #6b7d76; font-size: 9px; line-height: 1.45; margin: 3px 0 0; }
.seopc-psi-list article b { color: #445d54; font-size: 10px; font-weight: 850; white-space: nowrap; }

.seopc-lh-category-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.seopc-lh-category {
    background: #fff;
    border: 1px solid #e0e9e5;
    border-radius: 17px;
    overflow: hidden;
    padding: 16px;
}
.seopc-lh-category-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.seopc-lh-category-head strong { color: #173f34; display: block; font-size: 12px; }
.seopc-lh-category-head small { color: #8a9893; display: block; font-size: 8.5px; margin-top: 2px; }
.seopc-lh-category-description { color: #6b7d75; font-size: 9px; line-height: 1.45; margin: 8px 0 11px; }
.seopc-lh-audit-list { display: grid; gap: 6px; }
.seopc-lh-audit-row {
    align-items: start;
    background: #f8faf9;
    border: 1px solid #edf2f0;
    border-radius: 10px;
    display: grid;
    gap: 8px;
    grid-template-columns: 8px minmax(0, 1fr);
    padding: 8px 9px;
}
.seopc-lh-audit-dot { background: #94a3b8; border-radius: 50%; height: 7px; margin-top: 4px; width: 7px; }
.seopc-lh-audit-row.is-good .seopc-lh-audit-dot { background: #10b981; }
.seopc-lh-audit-row.is-warn .seopc-lh-audit-dot { background: #f59e0b; }
.seopc-lh-audit-row.is-bad .seopc-lh-audit-dot { background: #ef4444; }
.seopc-lh-audit-row strong { color: #40564e; display: block; font-size: 9.5px; line-height: 1.3; }
.seopc-lh-audit-row small { color: #899792; display: block; font-size: 8px; margin-top: 2px; }
.seopc-lh-all-good { background: #edf9f3; border-radius: 10px; color: #087451; font-size: 9.5px; font-weight: 750; padding: 10px; }

/* html2pdf renders this exact report at an A4-friendly desktop width. */
.seopc-pdf-export {
    background: #fff;
    box-sizing: border-box;
    left: -10000px;
    padding: 0;
    position: absolute;
    top: 0;
    width: 794px;
    z-index: -1;
}
.seopc-pdf-export * { box-sizing: border-box; }
.seopc-pdf-export .seopc-client-report { gap: 12px; margin: 0; width: 100%; }
.seopc-pdf-export .seopc-report-cover { border-radius: 16px; box-shadow: none; padding: 22px 25px; }
.seopc-pdf-export .seopc-report-cover h2 { font-size: 30px; }
.seopc-pdf-export .seopc-report-cover p { font-size: 10px; }
.seopc-pdf-export .seopc-report-overall { min-height: 145px; }
.seopc-pdf-export .seopc-report-score-section,
.seopc-pdf-export .seopc-psi-dashboard,
.seopc-pdf-export .seopc-section,
.seopc-pdf-export .seopc-chart-card { border-radius: 13px; box-shadow: none; padding: 15px; }
.seopc-pdf-export .seopc-score-grid,
.seopc-pdf-export .seopc-score-grid-report { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.seopc-pdf-export .seopc-score-card { gap: 10px; min-height: 104px; padding: 10px; }
.seopc-pdf-export .seopc-score-ring { flex-basis: 58px; height: 58px; width: 58px; }
.seopc-pdf-export .seopc-score-number { font-size: 19px; }
.seopc-pdf-export .seopc-score-label { font-size: 10px; }
.seopc-pdf-export .seopc-score-status { font-size: 7px; margin-top: 5px; padding: 4px 6px; }
.seopc-pdf-export .seopc-report-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.seopc-pdf-export .seopc-report-metric { min-height: 80px; padding: 10px; }
.seopc-pdf-export .seopc-report-metric-top strong { font-size: 17px; }
.seopc-pdf-export .seopc-lh-category-grid { gap: 8px; }
.seopc-pdf-export .seopc-lh-category { border-radius: 11px; padding: 11px; }
.seopc-pdf-export .seopc-check-grid { gap: 7px; }
.seopc-pdf-export .seopc-audit-check { border-radius: 10px; padding: 10px; }
.seopc-pdf-export .seopc-key-value-row,
.seopc-pdf-export table { font-size: 8px; }
.seopc-pdf-export .seopc-no-pdf { display: none !important; }

@media (max-width: 1000px) {
    .seopc-score-grid-report { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .seopc-report-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .seopc-report-cover { grid-template-columns: 1fr; padding: 24px; }
    .seopc-report-overall { align-items: center; flex-direction: row; justify-content: flex-start; min-height: 0; text-align: left; }
    .seopc-score-grid-report { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .seopc-lh-category-grid { grid-template-columns: 1fr; }
    .seopc-report-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
    .seopc-report-section-heading > small { text-align: left; }
}
@media (max-width: 520px) {
    .seopc-score-grid-report,
    .seopc-report-metric-grid { grid-template-columns: 1fr; }
}

@media print {
    @page { margin: 10mm 9mm 12mm; size: A4 portrait; }
    body.seopc-toolkit-page { background: #fff !important; }
    .seopc-no-pdf,
    .seopc-toolkit-header,
    .seopc-tabs,
    .seopc-toolkit-footer,
    .seopc-hero-panel,
    .seopc-report-toolbar,
    .seopc-action-links,
    .seopc-btn { display: none !important; }
    .seopc-client-report { gap: 11px !important; margin: 0 !important; }
    .seopc-report-cover { border-radius: 14px !important; box-shadow: none !important; padding: 20px 22px !important; }
    .seopc-report-cover h2 { font-size: 28px !important; }
    .seopc-report-score-section,
    .seopc-psi-dashboard,
    .seopc-section,
    .seopc-chart-card { border-radius: 12px !important; box-shadow: none !important; padding: 14px !important; }
    .seopc-score-grid,
    .seopc-score-grid-report { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 7px !important; }
    .seopc-score-card { min-height: 100px !important; padding: 9px !important; }
    .seopc-score-ring { flex-basis: 56px !important; height: 56px !important; width: 56px !important; }
    .seopc-score-number { font-size: 18px !important; }
    .seopc-report-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .seopc-lh-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .seopc-report-block,
    .seopc-section,
    .seopc-chart-card,
    .seopc-score-card,
    .seopc-report-metric,
    .seopc-lh-category { break-inside: avoid !important; page-break-inside: avoid !important; }
}

/* v2.5.0 intelligence + UI polish */
.seopc-report-insights{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));}
.seopc-insight-card{background:linear-gradient(145deg,#fff,#f6faf8);border:1px solid #dce8e3;border-radius:17px;min-height:150px;padding:16px;}
.seopc-insight-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;}
.seopc-insight-head strong{color:#153f34;font-size:13px}.seopc-insight-head span{color:#7b8a85;font-size:9px;text-align:right}
.seopc-severity-stack{border-radius:12px;display:flex;height:58px;overflow:hidden}.seopc-severity-stack span{align-items:center;color:#fff;display:flex;font-size:9px;font-weight:800;justify-content:center;min-width:18px;padding:6px;text-align:center}.seopc-severity-stack .is-good{background:#18a871}.seopc-severity-stack .is-warn{background:#efa315}.seopc-severity-stack .is-bad{background:#eb5757}
.seopc-mini-bars{display:grid;gap:8px}.seopc-mini-bars>div{align-items:center;display:grid;gap:8px;grid-template-columns:70px minmax(0,1fr) 28px}.seopc-mini-bars span{color:#667871;font-size:9px}.seopc-mini-bars i{background:#eaf0ed;border-radius:999px;height:7px;overflow:hidden}.seopc-mini-bars i b{background:linear-gradient(90deg,#14906f,#7b55c7);border-radius:inherit;display:block;height:100%}.seopc-mini-bars strong{color:#26493f;font-size:10px;text-align:right}
.seopc-heading-spark{align-items:end;display:grid;gap:7px;grid-template-columns:repeat(6,1fr);height:82px}.seopc-heading-spark>div{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:end}.seopc-heading-spark b{background:linear-gradient(#64d3ae,#14745d);border-radius:6px 6px 2px 2px;display:block;min-height:8px;width:65%}.seopc-heading-spark span{color:#71817b;font-size:8px;margin-top:5px}.seopc-heading-spark strong{color:#173f34;font-size:10px}

.seopc-scan-progress{background:#eaf1ee;border-radius:999px;height:18px;margin:10px 0;overflow:hidden;position:relative}.seopc-scan-progress>span{background:linear-gradient(90deg,#15916f,#5f46b4);display:block;height:100%;transition:width .25s ease}.seopc-scan-progress>b{color:#173e33;font-size:9px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);white-space:nowrap}
.seopc-sitemap-overview{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}.seopc-sitemap-kpi{background:linear-gradient(145deg,#fff,#f4faf7);border:1px solid #dce9e4;border-radius:15px;padding:15px}.seopc-sitemap-kpi small,.seopc-sitemap-kpi strong,.seopc-sitemap-kpi span{display:block}.seopc-sitemap-kpi small{color:#74847e;font-size:9px;text-transform:uppercase}.seopc-sitemap-kpi strong{color:#0f765b;font-size:24px;margin:4px 0}.seopc-sitemap-kpi span{color:#73827c;font-size:9px}
.seopc-sitemap-analytics{display:grid;gap:14px;grid-template-columns:1.1fr .9fr}.seopc-family-bars{display:grid;gap:9px}.seopc-family-bars>div{align-items:center;display:grid;gap:9px;grid-template-columns:95px minmax(0,1fr) 32px}.seopc-family-bars span{color:#4f665e;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seopc-family-bars i{background:#edf2f0;border-radius:999px;height:8px;overflow:hidden}.seopc-family-bars i b{background:linear-gradient(90deg,#13a477,#6d4bc3);border-radius:inherit;display:block;height:100%}.seopc-family-bars strong{color:#173f34;font-size:10px;text-align:right}
.seopc-sitemap-health-list{display:grid;gap:8px}.seopc-sitemap-health-list>div{align-items:center;background:#f8fbfa;border:1px solid #e0ebe7;border-radius:12px;display:grid;gap:9px;grid-template-columns:9px minmax(0,1fr) auto auto;padding:10px}.seopc-sitemap-health-list .seopc-health-dot{background:#20b486;border-radius:50%;height:8px;width:8px}.seopc-sitemap-health-list .has-error .seopc-health-dot{background:#ed6a62}.seopc-sitemap-health-list strong,.seopc-sitemap-health-list small{display:block}.seopc-sitemap-health-list strong{color:#24473d;font-size:9px}.seopc-sitemap-health-list small{color:#83918d;font-size:8px}.seopc-sitemap-health-list b{color:#536961;font-size:9px}.seopc-sitemap-health-list em{color:#8b9994;font-size:8px;font-style:normal}.seopc-error-detail{max-height:160px;overflow:auto;padding-top:8px}.seopc-error-detail p{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;margin:4px 0;overflow-wrap:anywhere}

.seopc-social-footprint{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}.seopc-footprint-item{align-items:center;background:#f8faf9;border:1px solid #e1e9e6;border-radius:14px;display:grid;gap:9px;grid-template-columns:34px minmax(0,1fr) auto;padding:11px}.seopc-footprint-item.is-present{background:linear-gradient(145deg,#f5fcf9,#fff);border-color:#cfe7de}.seopc-footprint-item.is-good{box-shadow:inset 0 3px #18a871}.seopc-footprint-item.is-warn{box-shadow:inset 0 3px #efa315}.seopc-footprint-item.is-bad{box-shadow:inset 0 3px #eb5757}.seopc-footprint-item .seopc-social-icon{border-radius:9px;flex-basis:32px;height:32px;width:32px}.seopc-footprint-item strong,.seopc-footprint-item small{display:block}.seopc-footprint-item strong{color:#183e33;font-size:10px;text-transform:capitalize}.seopc-footprint-item small{color:#75857f;font-size:8px;line-height:1.35}.seopc-footprint-item a{color:#0b795b;font-size:9px;font-weight:800;text-decoration:none}.seopc-muted-pill{background:#edf2f0;border-radius:999px;color:#71817b;font-size:8px;padding:4px 7px}
.seopc-social-profile-audits{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.seopc-social-profile-detail{background:linear-gradient(145deg,#fff,#f7faf9);border:1px solid #dfeae6;border-radius:15px;overflow:hidden}.seopc-social-profile-title{align-items:center;border-bottom:1px solid #e7efec;display:grid;gap:10px;grid-template-columns:36px minmax(0,1fr) auto;padding:12px}.seopc-social-profile-title strong,.seopc-social-profile-title small{display:block}.seopc-social-profile-title strong{color:#183f34;font-size:11px;text-transform:capitalize}.seopc-social-profile-title small{color:#7a8984;font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seopc-profile-detail-body{padding:12px}.seopc-profile-detail-body>p{color:#60736b;font-size:9px;margin:0 0 10px}.seopc-profile-checks{display:flex;flex-wrap:wrap;gap:6px}.seopc-profile-checks span,.seopc-share-checks span{border-radius:999px;font-size:8px;font-weight:800;padding:5px 8px}.seopc-profile-checks .is-good,.seopc-share-checks .is-good{background:#e2f8ee;color:#087450}.seopc-profile-checks .is-warn,.seopc-share-checks .is-warn{background:#fff2d8;color:#9c5c0a}.seopc-profile-meta{background:#f4f8f6;border-radius:11px;display:grid;gap:8px;margin-top:10px;padding:10px}.seopc-profile-meta small{color:#7c8c86;font-size:8px}.seopc-profile-meta strong,.seopc-profile-meta p{color:#314b42;font-size:9px;margin:2px 0 0}.seopc-share-checks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.seopc-handle-cloud{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.seopc-handle-cloud span{background:#eef7f3;border:1px solid #d6e8e1;border-radius:999px;color:#47675d;font-size:8px;padding:5px 8px}

.seopc-browser-stage-srcdoc{min-height:650px;overflow:auto;position:relative}.seopc-browser-stage-srcdoc iframe{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.04);display:block;height:650px;max-width:none;min-width:320px;transform-origin:top left}

.seopc-control-group{background:#f8fbfa;border:1px solid #e2ebe8;border-radius:14px;display:grid;gap:11px;padding:12px}.seopc-control-group+.seopc-control-group{margin-top:11px}.seopc-control-group-title{align-items:center;display:flex;gap:8px;justify-content:space-between}.seopc-control-group-title strong{color:#173f34;font-size:11px}.seopc-control-group-title button,.seopc-mini-actions button{background:#fff;border:1px solid #cfe0da;border-radius:8px;color:#356055;cursor:pointer;font-size:8px;font-weight:750;padding:5px 7px}.seopc-mini-actions{display:flex;flex-wrap:wrap;gap:5px}.seopc-crop-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr}.seopc-crop-control{min-width:0}.seopc-crop-control .seopc-range-field{margin:0}.seopc-export-options{align-items:end;display:grid;gap:10px;grid-template-columns:140px 1fr 1fr 130px}.seopc-export-actions{display:flex;gap:8px;justify-content:flex-end}.seopc-color-field input[type=color]{height:42px!important;padding:4px!important}.seopc-layer-panel{max-height:calc(100vh - 160px);overflow:auto}.seopc-layer-controls{padding:12px}.seopc-crop-panel{padding:12px}.seopc-studio-main{min-width:0}.seopc-studio-canvas{background:repeating-conic-gradient(#eef2f0 0% 25%,#f9fbfa 0% 50%) 0/18px 18px;overflow:auto}.seopc-studio-canvas canvas{display:block;max-width:100%;height:auto}

.seopc-media-card{position:relative}.seopc-media-quality{background:rgba(9,74,57,.9);border-radius:999px;color:#fff;font-size:8px;font-weight:800;left:9px;padding:4px 7px;position:absolute;top:9px;z-index:2}.seopc-media-preview img{background:#eef2f0}.seopc-media-card .seopc-provider-badge{backdrop-filter:blur(6px)}

.seopc-brand-mark{background:linear-gradient(145deg,#20c98e,#0d7b5d 58%,#5636a4);border:1px solid rgba(255,255,255,.24);border-radius:13px;box-shadow:0 8px 22px rgba(4,46,36,.26),inset 0 1px rgba(255,255,255,.35);height:42px;width:42px}.seopc-brand-mark svg{height:23px;width:23px}.seopc-tab-icon{align-items:center;background:#f2f6f4;border:1px solid #e5ece9;border-radius:9px;color:#456158;display:inline-flex;height:28px;justify-content:center;width:28px}.seopc-tab-icon svg{height:15px;width:15px}.seopc-tabs button.is-active .seopc-tab-icon{background:linear-gradient(145deg,#148264,#5c3bb1);border-color:transparent;color:#fff}

@media(max-width:1000px){.seopc-report-insights,.seopc-sitemap-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.seopc-sitemap-analytics,.seopc-social-profile-audits{grid-template-columns:1fr}.seopc-social-footprint{grid-template-columns:repeat(2,minmax(0,1fr))}.seopc-export-options{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.seopc-report-insights,.seopc-sitemap-overview,.seopc-social-footprint,.seopc-crop-grid,.seopc-export-options{grid-template-columns:1fr}.seopc-sitemap-health-list>div{grid-template-columns:9px minmax(0,1fr)}.seopc-sitemap-health-list>div b,.seopc-sitemap-health-list>div em{grid-column:2}.seopc-browser-stage-srcdoc{min-height:520px}.seopc-browser-stage-srcdoc iframe{height:520px}.seopc-layer-panel{max-height:none}.seopc-export-actions{justify-content:stretch}.seopc-export-actions>*{flex:1}}
.seopc-studio-workspace{grid-template-columns:minmax(0,1fr) 390px}
.seopc-layer-controls .seopc-range-field,.seopc-crop-control .seopc-range-field{min-width:0!important;width:100%}
.seopc-crop-grid .seopc-range-head{gap:6px}.seopc-crop-grid .seopc-range-value{font-size:10px;min-width:42px;padding:5px 7px}
.seopc-export-options{align-items:center;display:flex;flex-wrap:wrap;gap:9px;min-width:150px}.seopc-export-options .seopc-toggle{margin:0!important}.seopc-export-options .seopc-color-field{align-items:center;display:flex!important;gap:6px;margin:0!important}.seopc-export-options .seopc-color-field span{font-size:9px}.seopc-export-options .seopc-color-field input{width:44px!important}
@media(max-width:1100px){.seopc-studio-workspace{grid-template-columns:1fr}.seopc-export-options{min-width:0}}

/* ================================================================
 * 2.5.1 readability, resilient selects, media load-more, studio polish
 * ================================================================ */

/* Use one fixed SVG chevron instead of two CSS triangles. This prevents the
 * select arrow from appearing to jump when font metrics/zoom change. */
.seopc-toolkit-root select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Cpath d='M5.75 7.5 10 11.75 14.25 7.5' fill='none' stroke='%23267e67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: right 14px center !important;
    background-repeat: no-repeat !important;
    background-size: 18px 18px !important;
    padding-right: 46px !important;
}

/* Sitemap readability */
.seopc-sitemap-overview .seopc-sitemap-kpi { padding:18px; }
.seopc-sitemap-kpi small { font-size:11px !important; letter-spacing:.04em; }
.seopc-sitemap-kpi span { font-size:11px !important; line-height:1.45; }
.seopc-sitemap-kpi strong { font-size:28px !important; }
.seopc-family-bars { gap:12px !important; }
.seopc-family-bars>div { grid-template-columns:125px minmax(0,1fr) 42px !important; gap:12px !important; }
.seopc-family-bars span,.seopc-family-bars strong { font-size:12px !important; }
.seopc-family-bars i { height:10px !important; }
.seopc-sitemap-health-list>div { padding:13px !important; }
.seopc-sitemap-health-list strong { font-size:12px !important; }
.seopc-sitemap-health-list small,.seopc-sitemap-health-list em { font-size:10px !important; line-height:1.4; }
.seopc-sitemap-health-list b { font-size:11px !important; }
.seopc-page-node-top { padding:15px 16px !important; gap:12px !important; }
.seopc-page-node-title strong { font-size:15px !important; line-height:1.35; }
.seopc-page-node-title small { font-size:11px !important; line-height:1.45; margin-top:3px !important; }
.seopc-page-node-meta { font-size:11px !important; gap:10px !important; padding:11px 16px !important; }
.seopc-page-node-actions .seopc-btn { font-size:11px !important; min-height:34px !important; padding:6px 11px !important; }
.seopc-node-audit,.seopc-node-unscanned { font-size:11px !important; line-height:1.45; }
.seopc-node-audit li { font-size:11px !important; }
.seopc-node-pill,.seopc-mini-score { font-size:10px !important; }
.seopc-map-children { margin-left:18px !important; padding-left:22px !important; }

/* Social audit: larger, clearer cards and metadata */
.seopc-social-footprint { gap:12px !important; }
.seopc-footprint-item { grid-template-columns:40px minmax(0,1fr) auto !important; padding:14px !important; }
.seopc-footprint-item .seopc-social-icon { height:38px !important; width:38px !important; }
.seopc-footprint-item strong { font-size:13px !important; }
.seopc-footprint-item small { font-size:10px !important; line-height:1.45 !important; }
.seopc-footprint-item a,.seopc-muted-pill { font-size:10px !important; }
.seopc-social-profile-title { grid-template-columns:42px minmax(0,1fr) auto !important; padding:15px !important; }
.seopc-social-profile-title strong { font-size:14px !important; }
.seopc-social-profile-title small { font-size:10px !important; }
.seopc-profile-detail-body { padding:15px !important; }
.seopc-profile-detail-body>p { font-size:11px !important; line-height:1.5; }
.seopc-profile-checks span,.seopc-share-checks span { font-size:10px !important; padding:6px 9px !important; }
.seopc-profile-meta { padding:12px !important; gap:10px !important; }
.seopc-profile-meta small { font-size:10px !important; }
.seopc-profile-meta strong,.seopc-profile-meta p { font-size:11px !important; line-height:1.45; }
.seopc-handle-cloud span { font-size:10px !important; }

/* Design preview controls */
.seopc-preview-toolbar { align-items:center; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; margin-bottom:10px; }
.seopc-preview-toolbar .seopc-breakpoint-pills { margin:0; }
.seopc-preview-toolbar .seopc-inline-actions { margin-left:auto; }
.seopc-browser-bar b { font-size:10px !important; }

/* Optimizer savings */
.seopc-size-comparison { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:12px 0; }
.seopc-size-comparison>div { background:#f8fbfa; border:1px solid #dce8e3; border-radius:13px; padding:11px 12px; }
.seopc-size-comparison small,.seopc-size-comparison strong,.seopc-size-comparison span { display:block; }
.seopc-size-comparison small { color:#74857f; font-size:10px; font-weight:750; text-transform:uppercase; }
.seopc-size-comparison strong { color:#173f34; font-size:18px; margin-top:3px; }
.seopc-size-comparison span { color:#60736b; font-size:10px; margin-top:2px; }
.seopc-size-comparison .is-saving { background:#ecfbf4; border-color:#bde8d6; }
.seopc-size-comparison .is-saving strong { color:#087450; }
.seopc-size-comparison .is-larger { background:#fff7e8; border-color:#f2d69b; }
.seopc-size-comparison .is-larger strong { color:#9b5c08; }

/* Image Studio readability + alignment */
.seopc-studio-workspace { grid-template-columns:minmax(0,1fr) 420px !important; gap:16px !important; }
.seopc-studio-toolbar { gap:8px !important; padding:11px !important; }
.seopc-studio-toolbar .seopc-btn,.seopc-studio-toolbar button { font-size:11px !important; min-height:38px !important; padding:7px 11px !important; }
.seopc-add-text input[type="text"] { font-size:13px !important; min-height:40px !important; }
.seopc-layer-panel-head { padding:15px !important; }
.seopc-layer-panel-head strong { font-size:16px !important; }
.seopc-layer-list button { font-size:11px !important; min-height:46px; padding:10px 12px !important; }
.seopc-control-group { padding:14px !important; gap:13px !important; }
.seopc-control-group-title strong { font-size:13px !important; }
.seopc-control-group-title button,.seopc-mini-actions button { font-size:10px !important; min-height:30px; padding:6px 9px !important; }
.seopc-layer-controls label,.seopc-crop-panel label { font-size:11px !important; }
.seopc-layer-controls input[type="text"],.seopc-layer-controls input[type="number"],.seopc-layer-controls select { font-size:13px !important; min-height:44px !important; }
.seopc-layer-controls .seopc-range-head>span:first-child,.seopc-crop-panel .seopc-range-head>span:first-child { font-size:12px !important; }
.seopc-crop-grid .seopc-range-value { font-size:11px !important; min-width:48px !important; }
.seopc-export-bar { align-items:end !important; gap:12px !important; }
.seopc-export-bar>label { font-size:11px !important; }
.seopc-export-bar select { font-size:13px !important; min-height:44px !important; }
.seopc-export-actions .seopc-btn { font-size:12px !important; min-height:44px !important; }

/* Media search: fast progressive results + AJAX load more */
.seopc-media-grid { align-items:stretch; }
.seopc-media-card { overflow:hidden; }
.seopc-media-preview { background:#edf4f1; aspect-ratio:4/3; overflow:hidden; }
.seopc-media-preview img { height:100%; object-fit:cover; width:100%; }
.seopc-media-body h4 { font-size:13px !important; line-height:1.35 !important; }
.seopc-media-body p,.seopc-media-meta { font-size:10px !important; line-height:1.4 !important; }
.seopc-media-actions .seopc-btn,.seopc-media-actions .seopc-text-link { font-size:10px !important; }
.seopc-media-quality { font-size:9px !important; }
.seopc-media-live { align-items:center; color:#597069; display:inline-flex; font-size:11px; gap:7px; }
.seopc-media-live .seopc-spinner { height:14px; width:14px; }
.seopc-load-more-wrap { align-items:center; display:flex; flex-direction:column; gap:8px; justify-content:center; padding:22px 0 6px; text-align:center; }
.seopc-load-more-wrap .seopc-btn { min-width:210px; }
.seopc-load-more-wrap span { color:#72847d; font-size:11px; }
.seopc-source-card strong { font-size:12px !important; }
.seopc-source-card small { font-size:10px !important; line-height:1.4; }

@media(max-width:1100px){
    .seopc-studio-workspace { grid-template-columns:1fr !important; }
    .seopc-layer-panel { max-height:none !important; }
}
@media(max-width:760px){
    .seopc-size-comparison { grid-template-columns:1fr; }
    .seopc-preview-toolbar { align-items:stretch; flex-direction:column; }
    .seopc-preview-toolbar .seopc-inline-actions { margin-left:0; }
    .seopc-family-bars>div { grid-template-columns:95px minmax(0,1fr) 32px !important; }
}

/* v2.5.2: readable image issue detail list and no-key media polish */
.seopc-image-issue-panel{margin-top:18px;padding-top:16px;border-top:1px solid #e1ebe7}
.seopc-section-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px}
.seopc-section-head-row h4{font-size:16px;margin:0 0 4px}.seopc-section-head-row p{font-size:13px;margin:0;color:#6b7c75}
.seopc-image-issue-list{max-height:520px;overflow:auto;border:1px solid #e1ebe7;border-radius:14px;background:#fff}
.seopc-image-issue-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-bottom:1px solid #edf2f0}
.seopc-image-issue-row:last-child{border-bottom:0}.seopc-image-issue-row strong{display:block;font-size:13px;color:#a33b32;margin-bottom:4px}.seopc-image-issue-row small{display:block;max-width:740px;overflow-wrap:anywhere;font-size:12px;color:#53655e}.seopc-image-alt{display:block;margin-top:4px;font-size:11px;color:#75877f}
@media(max-width:700px){.seopc-section-head-row,.seopc-image-issue-row{flex-direction:column;align-items:stretch}}