/* ═══════════════════════════════════════════════════════
   Schema Analyzer Tool — Self-contained styles
   ═══════════════════════════════════════════════════════ */

/*
 * All design variables are set via Settings > LR Tools Design admin panel.
 * The inline <style> in wp_head outputs the CSS custom properties.
 * Fallback defaults below only apply if admin settings haven't been saved.
 */

.jst-wrap {
    --jst-brand: var(--jst-brand, #0891b2);
    --jst-font: inherit;
    --jst-input-border-color: var(--jst-border, #e2e8f0);
    --jst-input-padding: 14px 18px;
    --jst-input-font-size: 16px;
    --jst-btn-padding: 14px 28px;
    --jst-btn-font-size: 16px;
}

.jst-wrap {
    font-family: var(--jst-font);
    color: var(--jst-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ─── Search Form ──────────────────────────── */
.jst-form {
    max-width: var(--jst-form-max-width);
    margin: 0 auto;
    padding: var(--jst-form-spacing) 0;
}

.jst-input-wrap {
    display: flex;
    gap: var(--jst-form-input-gap, 0px);
}

input.jst-url-input[type="url"] {
    flex: 1;
    border: var(--jst-input-border-width) solid var(--jst-input-border-color) !important;
    border-right-width: var(--jst-input-border-right, 0px) !important;
    outline: none;
    padding: var(--jst-input-padding);
    font-size: var(--jst-input-font-size);
    border-radius: var(--jst-input-radius-tl, 8px) var(--jst-input-radius-tr, 0px) var(--jst-input-radius-br, 0px) var(--jst-input-radius-bl, 8px) !important;
    font-family: var(--jst-font);
    color: var(--jst-text);
    background: #fff;
    transition: border-color 0.2s;
    width: auto !important;
}

input.jst-url-input[type="url"]:focus {
    border-color: var(--jst-brand) !important;
}

input.jst-url-input::placeholder { color: #94a3b8; }

.jst-analyze-btn {
    padding: var(--jst-btn-padding) !important;
    background: var(--jst-btn-bg, #1A7097) !important;
    color: var(--jst-btn-text, #fff) !important;
    border: var(--jst-input-border-width) solid var(--jst-btn-bg, #1A7097) !important;
    border-radius: var(--jst-btn-radius-tl, 0px) var(--jst-btn-radius-tr, 8px) var(--jst-btn-radius-br, 8px) var(--jst-btn-radius-bl, 0px) !important;
    font-size: var(--jst-btn-font-size) !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
    font-family: var(--jst-font);
}

.jst-analyze-btn:hover {
    background: var(--jst-btn-hover-bg, #0e7490) !important;
    border-color: var(--jst-btn-hover-bg, #0e7490) !important;
    color: var(--jst-btn-hover-text, #fff) !important;
}
.jst-analyze-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.jst-hint {
    color: var(--jst-text-muted);
    font-size: 13px;
    margin: 12px 0 0;
    text-align: center;
}

/* ─── Loading ───────────────────────────────── */
.jst-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--jst-text-muted);
}

.jst-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--jst-border);
    border-top-color: var(--jst-brand);
    border-radius: 50%;
    animation: jst-spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

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

/* ─── Error ─────────────────────────────────── */
.jst-error {
    text-align: center;
    padding: 40px 20px;
}

.jst-error-card {
    max-width: 500px;
    margin: 0 auto;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--jst-radius);
    padding: 24px;
}

.jst-error-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    background: var(--jst-red);
    color: #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 12px;
}

button.jst-try-again {
    margin-top: 12px;
    padding: 8px 20px !important;
    background: var(--jst-btn-bg, #1A7097) !important;
    color: var(--jst-btn-text, #fff) !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer;
    font-family: var(--jst-font);
    line-height: normal !important;
}

/* ─── Results ───────────────────────────────── */
.jst-wrap {
    overflow: hidden;
    max-width: 100%;
}

.jst-results {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0 var(--jst-results-bottom-padding, 60px);
    overflow: hidden;
}

/* ─── Score Card ────────────────────────────── */
.jst-score-card {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--jst-card);
    border: 1px solid var(--jst-border);
    border-radius: var(--jst-radius);
    padding: 24px 32px;
    margin: var(--jst-section-spacing, 32px) 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.jst-score-gauge {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.jst-score-ring {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.jst-score-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 8;
}

.jst-score-fill {
    fill: none;
    stroke: var(--jst-brand);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: 326.73;
    transition: stroke-dashoffset 1.2s ease-out, stroke 0.5s;
}

.jst-score-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 800;
    color: var(--jst-text);
}

.jst-score-label { font-size: 1.25rem; font-weight: 700; margin: 0 0 4px; }
.jst-score-summary { color: var(--jst-text-muted); margin: 0 0 4px; font-size: 14px; }
.jst-analyzed-url { color: var(--jst-brand); font-size: 13px; margin: 0; word-break: break-all; }

/* ─── Panels Grid ───────────────────────────── */
.jst-grid {
    display: grid;
    grid-template-columns: var(--jst-grid-columns, 20fr 20fr 60fr);
    gap: var(--jst-grid-gap);
    margin-bottom: var(--jst-section-spacing, 32px);
}

@media (max-width: 1024px) {
    .jst-grid { grid-template-columns: 1fr 1fr; }
    .jst-panel-code { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .jst-grid { grid-template-columns: 1fr; }
    .jst-hero-title { font-size: 1.75rem; }
    .jst-score-card { flex-direction: column; text-align: center; }
}

.jst-panel {
    background: var(--jst-card);
    border: 1px solid var(--jst-border);
    border-radius: var(--jst-panel-radius);
    padding: var(--jst-panel-padding);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    min-width: 0;
    overflow: hidden;
}

.jst-panel-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.jst-panel-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}

.jst-icon-check { background: var(--jst-green); }
.jst-icon-detect { background: var(--jst-blue); }
.jst-icon-gap { background: var(--jst-yellow); }
.jst-icon-code { background: #7c3aed; font-size: 11px; font-weight: 700; }

/* ─── Schema Items ──────────────────────────── */
.jst-schema-item {
    padding: 10px 12px;
    border: 1px solid var(--jst-border);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}

.jst-schema-item-found {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.jst-schema-item-missing {
    background: #fffbeb;
    border-color: #fde68a;
}

.jst-schema-type {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.jst-schema-detail {
    color: var(--jst-text-muted);
    font-size: 12px;
    margin-top: 4px;
}

.jst-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.jst-badge-high { background: #fef2f2; color: var(--jst-red); }
.jst-badge-medium { background: #fffbeb; color: var(--jst-yellow); }
.jst-badge-low { background: #f0f9ff; color: var(--jst-blue); }

/* Detection confidence */
.jst-confidence {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.jst-confidence-bar {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.jst-confidence-fill {
    height: 100%;
    background: var(--jst-brand);
    border-radius: 4px;
    transition: width 0.8s ease-out;
}

.jst-confidence-pct {
    font-size: 13px;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}

/* ─── Code Blocks ───────────────────────────── */
.jst-code-block {
    position: relative;
    margin-bottom: 16px;
}

.jst-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #1e1e2e;
    border-radius: 8px 8px 0 0;
    border: 1px solid #334155;
    border-bottom: none;
}

.jst-code-label {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
}

.jst-wrap button.jst-copy-btn,
.jst-wrap button.jst-copy-btn[type="button"] {
    padding: 4px 12px !important;
    background: var(--jst-copy-btn-bg, rgba(255,255,255,0.1)) !important;
    background-color: var(--jst-copy-btn-bg, rgba(255,255,255,0.1)) !important;
    color: var(--jst-copy-btn-text, #cbd5e1) !important;
    border: 1px solid var(--jst-copy-btn-border, rgba(255,255,255,0.15)) !important;
    border-color: var(--jst-copy-btn-border, rgba(255,255,255,0.15)) !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    cursor: pointer;
    font-family: var(--jst-font);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: normal !important;
    min-height: auto !important;
    text-transform: none !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    -webkit-appearance: none !important;
}

.jst-wrap button.jst-copy-btn:hover,
.jst-wrap button.jst-copy-btn[type="button"]:hover {
    background: var(--jst-copy-btn-hover-bg, rgba(255,255,255,0.2)) !important;
    background-color: var(--jst-copy-btn-hover-bg, rgba(255,255,255,0.2)) !important;
    color: var(--jst-copy-btn-hover-text, #fff) !important;
    border-color: var(--jst-copy-btn-hover-bg, rgba(255,255,255,0.3)) !important;
}

.jst-wrap button.jst-copy-btn.copied {
    background: var(--jst-green) !important;
    background-color: var(--jst-green) !important;
    color: #fff !important;
    border-color: var(--jst-green) !important;
}

.jst-code-block pre {
    margin: 0;
    padding: 16px;
    background: #1e1e2e;
    border-radius: 0 0 8px 8px;
    border: 1px solid #334155;
    border-top: none;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.5;
    max-height: 400px;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
}

.jst-code-block pre code {
    font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.jst-wrap .jst-copy-all-btn {
    padding: 10px 24px !important;
    background: var(--jst-btn-bg, #1A7097) !important;
    background-color: var(--jst-btn-bg, #1A7097) !important;
    color: var(--jst-btn-text, #fff) !important;
    border: none !important;
    border-color: var(--jst-btn-bg, #1A7097) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    font-family: var(--jst-font);
    transition: background 0.2s, color 0.2s;
}

.jst-copy-all-btn:hover {
    background: var(--jst-btn-hover-bg, #0e7490) !important;
    color: var(--jst-btn-hover-text, #fff) !important;
}

/* ─── Lead Capture ──────────────────────────── */
.jst-lead-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--jst-grid-gap, 20px);
    margin-top: var(--jst-section-spacing, 32px);
}

@media (max-width: 768px) {
    .jst-lead-section { grid-template-columns: 1fr; }
}

.jst-lead-card,
.jst-cta-card {
    background: var(--jst-card);
    border: 1px solid var(--jst-border);
    border-radius: var(--jst-radius);
    padding: 24px;
    text-align: center;
}

.jst-lead-card h3,
.jst-cta-card h3 {
    font-size: 18px;
    margin: 0 0 8px;
}

.jst-lead-card p,
.jst-cta-card p {
    color: var(--jst-text-muted);
    font-size: 14px;
    margin: 0 0 16px;
}

.jst-email-form {
    display: flex;
    gap: 8px;
}

.jst-email-form input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--jst-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--jst-font);
}

.jst-wrap .jst-email-form button {
    padding: 10px 20px !important;
    background: var(--jst-btn-bg, #1A7097) !important;
    background-color: var(--jst-btn-bg, #1A7097) !important;
    color: var(--jst-btn-text, #fff) !important;
    border: none !important;
    border-color: var(--jst-btn-bg, #1A7097) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer;
    font-family: var(--jst-font);
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.jst-wrap .jst-email-form button:hover {
    background: var(--jst-btn-hover-bg, #0e7490) !important;
    background-color: var(--jst-btn-hover-bg, #0e7490) !important;
    color: var(--jst-btn-hover-text, #fff) !important;
    border-color: var(--jst-btn-hover-bg, #0e7490) !important;
}

.jst-email-status {
    font-size: 13px;
    margin-top: 8px;
}

.jst-email-status.success { color: var(--jst-green); }
.jst-email-status.error { color: var(--jst-red); }

.jst-cta-btn {
    display: inline-block !important;
    padding: 12px 28px !important;
    background: var(--jst-btn-bg, #1A7097) !important;
    color: var(--jst-btn-text, #fff) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: background 0.2s, color 0.2s;
}

.jst-cta-btn:hover {
    background: var(--jst-btn-hover-bg, #0e7490) !important;
    color: var(--jst-btn-hover-text, #fff) !important;
}

/* Educational content is managed in Elementor — no tool styles needed. */

/* ─── Empty states ──────────────────────────── */
.jst-empty {
    color: var(--jst-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

/* ─── Signal list in detection panel ────────── */
.jst-signal-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--jst-text-muted);
}

.jst-signal-list li {
    padding: 3px 0;
}

.jst-signal-list li::before {
    content: ">";
    margin-right: 6px;
    color: var(--jst-brand);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════
   SITEWIDE SCHEMA SCAN
   ═══════════════════════════════════════════════════════ */

/* Upsell card */
.jst-sitewide-upsell {
    background: var(--jst-card, #fff);
    border: 2px solid var(--jst-brand, #0891b2);
    border-radius: var(--jst-radius, 10px);
    padding: 28px 32px;
    margin: var(--jst-section-spacing, 32px) 0;
}
.jst-sitewide-upsell-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.jst-sitewide-badge {
    display: inline-block;
    background: var(--jst-brand, #0891b2);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.jst-sitewide-upsell-header h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--jst-text, #1e293b);
}
.jst-sitewide-upsell-desc {
    font-size: 15px;
    color: var(--jst-text-muted, #64748b);
    line-height: 1.6;
    margin: 0 0 16px;
}

/* Why email box */
.jst-sitewide-why-email {
    background: var(--jst-bg, #f8fafc);
    border: 1px solid var(--jst-border, #e2e8f0);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 16px 0 20px;
}
.jst-sitewide-why-email-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--jst-text, #1e293b);
    margin: 0 0 8px;
}
.jst-sitewide-why-email ul {
    margin: 0;
    padding-left: 20px;
}
.jst-sitewide-why-email li {
    font-size: 14px;
    color: var(--jst-text-muted, #64748b);
    line-height: 1.5;
    margin-bottom: 6px;
}

/* Sitewide form */
.jst-sitewide-form {
    display: flex;
    gap: var(--jst-form-input-gap, 0px);
    max-width: var(--jst-form-max-width, 600px);
}
.jst-sitewide-form input[type="email"] {
    flex: 1;
    padding: 12px 16px;
    font-size: 15px;
    border: var(--jst-input-border-width, 2px) solid var(--jst-border, #e2e8f0) !important;
    border-right-width: var(--jst-input-border-right, 0px) !important;
    border-radius: var(--jst-input-radius-tl, 8px) var(--jst-input-radius-tr, 0px) var(--jst-input-radius-br, 0px) var(--jst-input-radius-bl, 8px) !important;
    font-family: var(--jst-font, inherit);
    color: var(--jst-text, #1e293b);
    outline: none;
    background: #fff;
}
.jst-sitewide-form input[type="email"]:focus {
    border-color: var(--jst-brand, #0891b2) !important;
}
.jst-sitewide-btn {
    background: var(--jst-btn-bg, #1A7097) !important;
    background-color: var(--jst-btn-bg, #1A7097) !important;
    color: var(--jst-btn-text, #fff) !important;
    border: var(--jst-input-border-width, 2px) solid var(--jst-btn-bg, #1A7097) !important;
    border-color: var(--jst-btn-bg, #1A7097) !important;
    border-radius: var(--jst-btn-radius-tl, 0px) var(--jst-btn-radius-tr, 8px) var(--jst-btn-radius-br, 8px) var(--jst-btn-radius-bl, 0px) !important;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--jst-font, inherit);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.jst-sitewide-btn:hover {
    background: var(--jst-btn-hover-bg, #0e7490) !important;
    background-color: var(--jst-btn-hover-bg, #0e7490) !important;
    border-color: var(--jst-btn-hover-bg, #0e7490) !important;
    color: var(--jst-btn-hover-text, #fff) !important;
}

/* Progress */
.jst-sitewide-progress {
    margin: var(--jst-section-spacing, 32px) 0;
}
.jst-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--jst-text, #1e293b);
    margin: 0 0 12px;
}
.jst-sitewide-stage {
    font-size: 14px;
    color: var(--jst-text-muted, #64748b);
    margin-bottom: 16px;
}

/* Page rows during scan */
.jst-sitewide-pages {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.jst-sw-page {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--jst-card, #fff);
    border: 1px solid var(--jst-border, #e2e8f0);
    border-radius: 6px;
    font-size: 13px;
}
.jst-sw-page-status {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.jst-sw-pending { background: #f1f5f9; color: #94a3b8; }
.jst-sw-analyzing { background: #dbeafe; color: #2563eb; }
.jst-sw-done { background: #d1fae5; color: #059669; }
.jst-sw-failed { background: #fee2e2; color: #dc2626; }
.jst-sw-page-body {
    flex: 1;
    min-width: 0;
}
.jst-sw-page-label {
    font-weight: 600;
    color: var(--jst-text, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jst-sw-page-url {
    font-size: 12px;
    color: var(--jst-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jst-sw-page-score {
    font-weight: 700;
    font-size: 14px;
    color: var(--jst-text-muted, #64748b);
    white-space: nowrap;
}
.jst-sw-score-failed { color: var(--jst-red, #dc2626); }

/* Sitewide results */
.jst-sitewide-results {
    margin: var(--jst-section-spacing, 32px) 0 0;
}
/* When sitewide upsell is hidden after scan starts, collapse its margin */
.jst-sitewide-upsell[style*="display: none"] + .jst-sitewide-progress,
.jst-sitewide-upsell[style*="display:none"] + .jst-sitewide-progress {
    margin-top: 0;
}
.jst-sitewide-summary {
    margin-bottom: var(--jst-section-spacing, 32px);
}

/* Coverage bar */
.jst-sw-coverage {
    background: var(--jst-card, #fff);
    border: 1px solid var(--jst-border, #e2e8f0);
    border-radius: var(--jst-radius, 10px);
    padding: var(--jst-panel-padding, 20px);
    margin: var(--jst-section-spacing, 32px) 0;
}
.jst-sw-coverage h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--jst-text, #1e293b);
    margin: 0 0 12px;
}
.jst-sw-coverage-bar {
    height: 24px;
    background: #fee2e2;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 8px;
}
.jst-sw-coverage-fill {
    height: 100%;
    border-radius: 12px;
    transition: width 0.5s;
}
.jst-sw-coverage-label {
    font-size: 14px;
    color: var(--jst-text-muted, #64748b);
}
.jst-sw-coverage-label strong {
    color: var(--jst-text, #1e293b);
}
.jst-sw-types-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 16px;
}
.jst-sw-types-col h4 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--jst-text-muted, #64748b);
    margin: 0 0 8px;
}
.jst-sw-type-tag {
    display: inline-block;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    margin: 0 4px 4px 0;
    font-weight: 600;
}
.jst-sw-type-existing {
    background: #d1fae5;
    color: var(--jst-green, #059669);
}
.jst-sw-type-missing {
    background: #fee2e2;
    color: var(--jst-red, #dc2626);
}

/* Per-page table */
.jst-sw-page-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.jst-sw-page-row {
    background: var(--jst-card, #fff);
    border: 1px solid var(--jst-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}
.jst-sw-page-row-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
}
.jst-sw-page-row-summary::-webkit-details-marker { display: none; }
.jst-sw-page-row-chevron {
    font-size: 12px;
    color: var(--jst-text-muted, #64748b);
    transition: transform 0.15s;
    flex-shrink: 0;
}
.jst-sw-page-row[open] .jst-sw-page-row-chevron {
    transform: rotate(90deg);
}
.jst-sw-page-row-info {
    flex: 1;
    min-width: 0;
}
.jst-sw-page-row-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--jst-text, #1e293b);
}
.jst-sw-page-row-url {
    font-size: 12px;
    color: var(--jst-text-muted, #64748b);
    word-break: break-all;
}
.jst-sw-page-row-score {
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
.jst-sw-page-row-detail {
    padding: 0 16px 16px;
    border-top: 1px solid var(--jst-border, #e2e8f0);
}
.jst-sw-page-row-failed {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--jst-card, #fff);
    border: 1px solid var(--jst-border, #e2e8f0);
    border-radius: 8px;
    opacity: 0.6;
}
.jst-sw-page-row-error {
    font-size: 12px;
    color: var(--jst-red, #dc2626);
    margin-top: 2px;
}

/* Score color classes */
.jst-sw-score-green { color: var(--jst-green, #059669); }
.jst-sw-score-blue { color: var(--jst-blue, #2563eb); }
.jst-sw-score-yellow { color: var(--jst-yellow, #d97706); }
.jst-sw-score-red { color: var(--jst-red, #dc2626); }
.jst-sw-fill-green { background: var(--jst-green, #059669); }
.jst-sw-fill-blue { background: var(--jst-blue, #2563eb); }
.jst-sw-fill-yellow { background: var(--jst-yellow, #d97706); }
.jst-sw-fill-red { background: var(--jst-red, #dc2626); }

/* Detail inside expanded row */
.jst-sw-detail-section {
    margin-top: 12px;
}
.jst-sw-detail-section h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--jst-text, #1e293b);
    margin: 0 0 6px;
}
.jst-sw-detail-types {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.jst-sw-detail-none {
    font-size: 13px;
    color: var(--jst-text-muted, #64748b);
    font-style: italic;
}

/* Sitewide CTA */
.jst-sw-cta {
    background: var(--jst-card, #fff);
    border: 1px solid var(--jst-border, #e2e8f0);
    border-radius: var(--jst-radius, 10px);
    padding: var(--jst-panel-padding, 20px) 24px;
    margin-top: var(--jst-section-spacing, 32px);
    text-align: center;
}
.jst-sw-cta p {
    font-size: 15px;
    color: var(--jst-text-muted, #64748b);
    margin: 0 0 16px;
}

/* Error card */
.jst-sw-error-card {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--jst-radius, 10px);
    padding: 24px;
    text-align: center;
    color: var(--jst-red, #dc2626);
}
.jst-sw-error-card .jst-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--jst-red, #dc2626);
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .jst-sitewide-form {
        flex-direction: column;
    }
    .jst-sitewide-form input[type="email"] {
        border-right-width: var(--jst-input-border-width, 2px) !important;
        border-radius: var(--jst-input-radius-tl, 8px) var(--jst-input-radius-tr, 8px) 0 0 !important;
    }
    .jst-sitewide-btn {
        border-radius: 0 0 var(--jst-btn-radius-br, 8px) var(--jst-btn-radius-bl, 8px) !important;
    }
    .jst-sw-types-row {
        grid-template-columns: 1fr;
    }
    .jst-sitewide-upsell {
        padding: 20px;
    }
}