/* ============================================================
   SEO Hub Tabs — Styles
   Prefix: shub-
   ============================================================ */

/* ── Tab Content Wrapper ─────────────────── */

.shub-tab-content {
    padding: 4px 0;
}

/* ── Metric Grid ─────────────────────────── */

.shub-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (width <= 700px) {
    .shub-metric-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (width <= 480px) {
    .shub-metric-grid {
        grid-template-columns: 1fr;
    }
}

.shub-metric-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.shub-metric-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 8px;
}

.shub-metric-value {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
}

.shub-metric-unit {
    font-size: 18px;
    font-weight: 400;
    opacity: 0.6;
}

.shub-metric-suffix {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
}

.shub-metric-desc {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    margin-top: 10px;
    line-height: 1.4;
}

/* ── Score Banner (AI Brief) ─────────────── */

.shub-brief {
    max-width: 800px;
}

.shub-score-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border: 2px solid;
    border-radius: 14px;
    margin-bottom: 20px;
    background: var(--color-surface, #fff);
}

.shub-score-ring {
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-shrink: 0;
}

.shub-score-value {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
}

.shub-score-max {
    font-size: 20px;
    font-weight: 400;
    opacity: 0.5;
    color: var(--color-text-muted, #6b7280);
}

.shub-score-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shub-score-label {
    font-size: 16px;
    font-weight: 700;
}

.shub-score-trend {
    font-size: 14px;
}

.shub-score-date {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
}

/* ── Narrative ───────────────────────────── */

.shub-narrative {
    padding: 16px 20px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    margin-bottom: 20px;
}

.shub-narrative p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-primary, #1f2937);
    margin: 0;
}

/* ── Sections ────────────────────────────── */

.shub-section {
    margin-bottom: 20px;
}

.shub-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary, #1f2937);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── List Items (wins, actions, highlights) ─ */

.shub-list-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--color-surface, #fff);
}

.shub-list-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.shub-list-item strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary, #1f2937);
}

.shub-list-item p {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    margin: 2px 0 0;
    line-height: 1.4;
}

/* ── Meta Text ───────────────────────────── */

.shub-meta {
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
    margin-top: 16px;
}

/* ── Explanation Block ───────────────────── */

.shub-explanation {
    padding: 16px 20px;
    background: var(--color-surface-alt, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    margin-top: 24px;
    margin-bottom: 8px;
}

.shub-explanation h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary, #1f2937);
    margin: 0 0 6px;
}

.shub-explanation p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-secondary, #4b5563);
    margin: 0;
}

/* ── Page Speed Gauge ────────────────────── */

/* ── PageSpeed: Lighthouse Scores Grid ──── */

.shub-scores-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.shub-scores-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shub-scores-header {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

.shub-gauges-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.shub-mini-gauge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
}

.shub-mini-svg {
    width: 64px;
    height: 64px;
}

.shub-mini-text {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.shub-mini-value {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.shub-mini-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    margin-top: 4px;
    text-align: center;
    white-space: nowrap;
}

/* ── PageSpeed: Core Web Vitals Grid ──── */

.shub-cwv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

.shub-cwv-metric {
    text-align: center;
    padding: 12px 8px;
    border-radius: 10px;
    background: var(--color-bg-tertiary, #f9fafb);
}

.shub-cwv-label {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text-primary, #111827);
}

.shub-cwv-sublabel {
    font-size: 10px;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 8px;
}

.shub-cwv-values {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
}

.shub-cwv-threshold {
    font-size: 10px;
    color: var(--color-text-muted, #9ca3af);
    margin-top: 6px;
}

.shub-cwv-badge-inline {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
    vertical-align: middle;
}

/* ── PageSpeed: Resource Savings ──── */

.shub-savings-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.shub-savings-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    background: var(--color-warning-bg, #fef3c7);
    color: var(--color-warning-text, #92400e);
}

.shub-savings-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shub-savings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--color-bg-tertiary, #f9fafb);
    font-size: 13px;
}

.shub-savings-title {
    color: var(--color-text-primary, #111827);
    font-weight: 500;
}

.shub-savings-detail {
    color: var(--color-text-secondary, #6b7280);
    font-weight: 600;
    white-space: nowrap;
}

/* Legacy gauge (keep for other uses) */
.shub-speed-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.shub-speed-gauge {
    position: relative;
    width: 160px;
    height: 160px;
}

.shub-gauge-svg {
    width: 100%;
    height: 100%;
}

.shub-gauge-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.shub-gauge-value {
    display: block;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
}

.shub-gauge-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    margin-top: 2px;
}

.shub-cwv-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* ── Card description text ──── */
.shub-card-desc {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    margin: -4px 0 12px;
    line-height: 1.5;
}

/* ── Card badges ──── */
.shub-card-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    margin-left: 8px;
    vertical-align: middle;
}

.shub-badge-warn {
    color: #ef4444;
}

/* ── CrUX Real-World Performance grid ──── */
.shub-crux-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.shub-crux-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--color-bg-tertiary, #f9fafb);
    min-width: 80px;
    flex: 1;
}

.shub-crux-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary, #111827);
    letter-spacing: 0.03em;
}

.shub-crux-val {
    font-size: 20px;
    font-weight: 800;
    margin: 4px 0 2px;
}

.shub-crux-cat {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Page Diagnostics grid ──── */
.shub-diag-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.shub-diag-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--color-bg-tertiary, #f9fafb);
    min-width: 90px;
    flex: 1;
}

.shub-diag-icon {
    font-size: 18px;
    margin-bottom: 4px;
}

.shub-diag-val {
    font-size: 16px;
    font-weight: 800;
}

.shub-diag-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    margin-top: 2px;
}

.shub-diag-detail {
    font-size: 12px;
    color: var(--color-text-secondary, #6b7280);
    padding: 6px 0;
    border-top: 1px solid var(--color-border, #e5e7eb);
    margin-top: 4px;
}

.shub-diag-detail code {
    font-size: 11px;
    background: var(--color-bg-tertiary, #f3f4f6);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-all;
}

/* ── Resource Breakdown ──── */
.shub-resource-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shub-resource-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--color-bg-tertiary, #f9fafb);
    font-size: 13px;
}

.shub-resource-type {
    min-width: 100px;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    text-transform: capitalize;
    white-space: nowrap;
}

.shub-resource-bar-wrap {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--color-border, #e5e7eb);
    overflow: hidden;
}

.shub-resource-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    min-width: 2px;
}

.shub-resource-stats {
    font-size: 11px;
    color: var(--color-text-muted, #6b7280);
    font-weight: 600;
    white-space: nowrap;
    min-width: 100px;
    text-align: right;
}

/* ── Third-Party Scripts ──── */
.shub-tp-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shub-tp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--color-bg-tertiary, #f9fafb);
    font-size: 13px;
}

.shub-tp-name {
    font-weight: 500;
    color: var(--color-text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55%;
}

.shub-tp-stats {
    display: flex;
    gap: 8px;
    align-items: center;
}

.shub-tp-stat {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
}

.shub-tp-blocking {
    color: #ef4444;
    background: #ef444415;
    padding: 1px 6px;
    border-radius: 8px;
}

/* ── SEO / Accessibility Audit Grid ──── */
.shub-audit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px;
}

.shub-audit-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
}

.shub-audit-pass {
    color: #22c55e;
    background: #22c55e0a;
}

.shub-audit-fail {
    color: #ef4444;
    background: #ef44440a;
}

.shub-audit-icon {
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.shub-audit-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── PageSpeed responsive ──── */
@media (width <= 640px) {
    .shub-scores-grid { grid-template-columns: 1fr; }
    .shub-cwv-grid { grid-template-columns: repeat(2, 1fr); }
    .shub-crux-grid { flex-direction: column; }
    .shub-diag-grid { flex-direction: column; }
    .shub-audit-grid { grid-template-columns: 1fr; }
}

/* ── Competitors Table ───────────────────── */

.shub-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    margin-bottom: 16px;
}

.shub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.shub-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #6b7280);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface-alt, #f9fafb);
}

.shub-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border, #f0f0f0);
}

.shub-table tbody tr:last-child td {
    border-bottom: none;
}

.shub-cell-name {
    min-width: 160px;
}

.shub-cell-name strong {
    display: block;
    font-size: 13px;
}

.shub-cell-domain {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
}

.shub-cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shub-row-you {
    background: var(--color-primary-bg, #eff6ff);
}

.shub-row-you td {
    font-weight: 600;
}

.shub-kpi-inline {
    padding: 12px 16px;
    background: #fef3c7;
    border-radius: 8px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 12px;
}

.shub-kpi-inline strong {
    font-size: 16px;
}

/* ── Empty State ─────────────────────────── */

.shub-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    border: 2px dashed var(--color-border, #e5e7eb);
    border-radius: 14px;
    margin: 8px 0;
}

.shub-empty-icon {
    margin-bottom: 12px;
}

.shub-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary, #1f2937);
    margin: 0 0 6px;
}

.shub-empty-msg {
    font-size: 13px;
    color: var(--color-text-muted, #6b7280);
    max-width: 360px;
    line-height: 1.5;
    margin: 0 0 16px;
}

.shub-empty-cta {
    padding: 8px 20px;
    background: var(--color-primary, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.shub-empty-cta:hover {
    background: var(--color-primary-hover, #2563eb);
}

/* ── Skeleton Loading ────────────────────── */

.shub-skeleton {
    padding: 8px 0;
}

.shub-skeleton-bar {
    background: linear-gradient(90deg, var(--color-border, #e5e7eb) 25%, var(--color-surface-alt, #f3f4f6) 50%, var(--color-border, #e5e7eb) 75%);
    background-size: 200% 100%;
    animation: shub-shimmer 1.5s infinite;
    border-radius: 8px;
}

.shub-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}

@keyframes shub-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Spin Animation (audit button) ───────── */

.shub-spin {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: shub-rotate 0.6s linear infinite;
    vertical-align: middle;
}

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

/* ── 5-Column Metric Grid ──────────────── */

.shub-metric-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

@media (width <= 900px) {
    .shub-metric-grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (width <= 600px) {
    .shub-metric-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width <= 400px) {
    .shub-metric-grid-5 {
        grid-template-columns: 1fr;
    }
}

/* ── Section Headers ───────────────────── */

.shub-section {
    margin-top: 24px;
}

.shub-section-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--color-text, #1a1a2e);
}

.shub-section-desc {
    font-size: 13px;
    color: var(--color-text-muted, #666);
    margin: -8px 0 12px 0;
}

/* ── Compact Table (for backlinks) ─────── */

.shub-table-compact th,
.shub-table-compact td {
    padding: 6px 10px;
    font-size: 13px;
}

.shub-backlink-url {
    font-family: monospace;
    font-size: 12px;
    color: var(--color-primary, #3b82f6);
    word-break: break-all;
}

.shub-cell-anchor {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--color-text-muted, #666);
}

.shub-tag-follow {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: #22c55e20;
    color: #22c55e;
}

.shub-tag-nofollow {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: #eab30820;
    color: #b89100;
}

/* ── Anchor Text Distribution Chart ────── */

.shub-anchor-chart {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shub-anchor-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shub-anchor-label {
    flex: 0 0 160px;
    font-size: 12px;
    color: var(--color-text, #1a1a2e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.shub-anchor-bar-wrap {
    flex: 1;
    height: 18px;
    background: var(--color-bg-alt, #f3f4f6);
    border-radius: 4px;
    overflow: hidden;
}

.shub-anchor-bar {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    border-radius: 4px;
    min-width: 2px;
    transition: width 0.3s ease;
}

.shub-anchor-count {
    flex: 0 0 80px;
    font-size: 11px;
    color: var(--color-text-muted, #666);
    white-space: nowrap;
}

@media (width <= 600px) {
    .shub-anchor-label {
        flex: 0 0 100px;
        font-size: 11px;
    }

    .shub-anchor-count {
        flex: 0 0 60px;
        font-size: 10px;
    }
}

/* ── Link Gap Analysis ─────────────────── */

.shub-gap-item {
    margin-bottom: 16px;
}

.shub-gap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
}

.shub-gap-delta {
    color: #ef4444;
    font-size: 12px;
    font-weight: 600;
}

.shub-gap-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.shub-gap-bar {
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    min-width: 40px;
    transition: width 0.3s ease;
}

.shub-gap-bar span {
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.shub-gap-bar-you {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    color: #fff;
}

.shub-gap-bar-them {
    background: linear-gradient(90deg, #94a3b8, #cbd5e1);
    color: #334155;
}

/* ── Category Card ─────────────────────── */

.shub-category-card {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--color-bg-alt, #f8fafc);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 16px;
}

.shub-cat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #666);
}

.shub-cat-value {
    font-size: 15px;
    color: var(--color-text, #1a1a2e);
}

.shub-cat-rank {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #3b82f620;
    color: #3b82f6;
}

/* ── Side-by-Side Layout ───────────────── */

.shub-side-by-side {
    display: flex;
    gap: 20px;
}

.shub-half {
    flex: 1;
    min-width: 0;
}

@media (width <= 700px) {
    .shub-side-by-side {
        flex-direction: column;
    }
}

/* ── Entity Chips ──────────────────────── */

.shub-entity-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.shub-entity-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.shub-entity-unrecognized {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.shub-entity-link {
    color: var(--color-primary, #3b82f6);
    text-decoration: none;
    font-size: 12px;
}

.shub-entity-link:hover {
    text-decoration: underline;
}

/* ── Schema Markup Display ─────────────── */

.shub-schema-details {
    margin-top: 8px;
}

.shub-schema-summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary, #3b82f6);
    padding: 6px 0;
}

.shub-schema-summary:hover {
    text-decoration: underline;
}

.shub-schema-code {
    background: var(--color-bg-alt, #f8fafc);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    padding: 12px;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.5;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre;
    color: var(--color-text, #1a1a2e);
}

/* ── Tab Todo Lists ──────────────────────────────────────────────────── */

.shub-todos {
    margin-top: 24px;
    margin-bottom: 32px;
}

.shub-todo-item {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--color-bg-card, #fff);
    overflow: hidden;
}

.shub-todo-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
}

.shub-todo-header:hover {
    background: var(--color-bg-elevated, #f9fafb);
}

.shub-todo-priority {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-top: 1px;
}

.shub-todo-priority--1 { background: var(--color-error); }
.shub-todo-priority--2 { background: #ea580c; }
.shub-todo-priority--3 { background: var(--color-warning); }
.shub-todo-priority--4 { background: #2563eb; }
.shub-todo-priority--5 { background: var(--color-text-muted); }

.shub-todo-content {
    flex: 1;
    min-width: 0;
}

.shub-todo-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 3px;
}

.shub-todo-detail {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.shub-todo-impact {
    font-size: 11px;
    color: var(--color-success);
    font-weight: 500;
    margin-top: 4px;
}

.shub-todo-suggestion {
    display: block;
    padding: 0 16px 14px 50px;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.shub-todo-suggestion-label {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.shub-todo-suggestion-text {
    background: var(--color-bg-elevated, #f9fafb);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    white-space: pre-wrap;
}

.shub-todo-done {
    text-decoration: line-through;
    opacity: 0.5;
}

/* ── Recommendations Tab ─────────────────────────────────────────────── */

.shub-recommendations {
    padding-top: 8px;
}

.shub-rec-bucket {
    margin-bottom: 28px;
}

.shub-rec-bucket-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-left: 12px;
    border-left: 3px solid;
    margin-bottom: 12px;
}

.shub-rec-bucket-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.shub-rec-bucket-count {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
}

.shub-rec-bucket-desc {
    font-size: 12px;
    color: var(--color-text-muted);
    flex: 1;
}

.shub-rec-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shub-rec-item {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-card, #fff);
    overflow: hidden;
}

.shub-rec-item-top {
    padding: 14px 16px 10px;
}

.shub-rec-tab-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.shub-rec-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 3px;
}

.shub-rec-detail {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.shub-rec-impact {
    font-size: 11px;
    color: var(--color-success);
    font-weight: 500;
    margin-top: 4px;
}

.shub-rec-suggestion {
    padding: 0 16px 14px 16px;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.5;
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
}

.shub-rec-suggestion-label {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.shub-rec-suggestion-text {
    background: var(--color-bg-elevated, #f9fafb);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    white-space: pre-wrap;
}