:root {
    --primary: #0084ff;
    --success: #198754;
    --warning: #f59e0b;
    --danger: #dc3545;
    --info: #0ea5e9;
    --background: #f6f8fb;
    --surface: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e5e7eb;
    --shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
    --radius: 16px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.55; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .65; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(0,132,255,.25); outline-offset: 2px; }
.app-shell { width: 100%; max-width: 1360px; margin: 0 auto; padding: 32px 24px 64px; }
.tool-header { text-align: center; max-width: 900px; margin: 0 auto 28px; }
.tool-header h1 { margin: 8px 0 12px; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.08; }
.tool-header p { color: var(--muted); font-size: 1.05rem; }
.eyebrow, .section-kicker { margin: 0; color: var(--primary); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .76rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin-bottom: 22px; min-width: 0; }
.card h2 { margin: 4px 0 14px; font-size: 1.3rem; }
.input-card { padding: 28px; }
.input-card label, .live-editor-card label { display: block; font-weight: 700; margin-bottom: 8px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
input, textarea { width: 100%; border: 1px solid #cfd6df; border-radius: 10px; padding: 13px 14px; color: var(--text); background: #fff; transition: border-color .2s, box-shadow .2s; }
input:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0,132,255,.10); }
.button { border: 0; border-radius: 10px; padding: 12px 18px; font-weight: 750; white-space: nowrap; }
.button-primary { background: var(--primary); color: #fff; }
.button-primary:hover { filter: brightness(.94); }
.button-secondary { background: #eef2f7; color: var(--text); }
.loading-state { margin-top: 18px; color: var(--muted); font-weight: 650; }
.loading-copy { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.loading-copy strong { color: var(--primary); font-size: .9rem; font-variant-numeric: tabular-nums; }
.progress-track { width: 100%; height: 10px; overflow: hidden; background: #e7edf4; border-radius: 999px; }
.progress-bar { width: 0; height: 100%; background: var(--primary); border-radius: inherit; transition: width .32s ease; }
.progress-bar.is-complete { transition: width .18s ease; }
.error-message { margin-top: 16px; padding: 13px 15px; border-radius: 10px; background: #fff1f2; color: #991b1b; border: 1px solid #fecdd3; font-weight: 650; }
.results { transition: opacity .2s; }
.results.is-loading { opacity: .55; pointer-events: none; }
.score-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 22px; }
.score-ring { --score: 0deg; width: 180px; height: 180px; margin: 20px auto; display: grid; place-content: center; border-radius: 50%; background: radial-gradient(circle at center, white 0 62%, transparent 63%), conic-gradient(var(--primary) var(--score), #e7edf4 0); text-align: center; }
.score-ring strong { font-size: 3rem; line-height: 1; }
.score-ring span { color: var(--muted); }
.score-breakdown { border-top: 1px solid var(--border); padding-top: 12px; }
.score-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.section-heading, .section-heading-row { margin-bottom: 14px; }
.section-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.section-heading-row h2 { margin: 0; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.summary-card, .filter-card { border: 1px solid var(--border); background: #fff; border-radius: 12px; padding: 16px; color: var(--text); }
.summary-card { display: flex; flex-direction: column; text-align: left; }
.summary-card strong { font-size: 2rem; line-height: 1.1; }
.summary-card span { color: var(--muted); }
.summary-card.active, .filter-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,132,255,.12); }
.summary-passed { border-top: 4px solid var(--success); }
.summary-warning { border-top: 4px solid var(--warning); }
.summary-failed { border-top: 4px solid var(--danger); }
.summary-info { border-top: 4px solid var(--info); }
.data-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.data-item { background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; padding: 14px; min-width: 0; }
.data-label { display: block; color: var(--muted); font-size: .84rem; margin-bottom: 5px; }
.data-value { font-weight: 700; overflow-wrap: anywhere; }
.two-column, .preview-grid, .editor-grid { display: grid; gap: 22px; }
.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-list { margin-top: 14px; }
.detail-row { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(0, 1.5fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.detail-label { color: var(--muted); }
.detail-value { font-weight: 650; overflow-wrap: anywhere; }
.status-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; font-size: .78rem; font-weight: 800; line-height: 1; }
.status-passed { background: #e8f7ee; color: #116530; }
.status-warning { background: #fff6dc; color: #8a5a00; }
.status-failed { background: #fdebec; color: #a31d2b; }
.status-info { background: #e8f7fd; color: #075985; }
.analysis-issue { margin: 16px 0 6px; font-weight: 700; }
.analysis-recommendation, .muted, .preview-note, .info-note, .empty-state { color: var(--muted); }
.metric-line { color: var(--muted); font-size: .88rem; margin-top: 8px; }
.device-tabs { display: inline-flex; background: #eef2f7; padding: 3px; border-radius: 9px; }
.device-tabs button { border: 0; background: transparent; border-radius: 7px; padding: 7px 10px; color: var(--muted); font-weight: 700; }
.device-tabs button.active { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(15,23,42,.1); }
.serp-preview { min-height: 196px; border: 1px solid var(--border); border-radius: 12px; padding: 18px; overflow: hidden; transition: max-width .2s; }
.serp-preview.mobile-preview { max-width: 390px; }
.serp-site { font-size: .89rem; color: #202124; font-weight: 600; }
.serp-url { margin-top: 3px; color: #4d5156; font-size: .82rem; overflow-wrap: anywhere; }
.serp-title { margin-top: 7px; font-size: 20px; line-height: 1.3; color: #1a0dab; }
.serp-description { margin-top: 7px; font-size: 14px; line-height: 1.5; color: #4d5156; }
.bing-preview { background: #fff; }
.bing-preview .serp-title { color: #0047ab; font-weight: 600; }
.bing-preview .serp-url { color: #006d21; }
.ddg-preview .serp-title { color: #1a0dab; }
.ddg-preview .serp-url { color: #5b5b5b; margin-top: 9px; }
.preview-note { font-size: .8rem; margin-bottom: 0; }
.redirect-list { list-style: none; margin: 0; padding: 0; counter-reset: redirects; }
.redirect-item { counter-increment: redirects; position: relative; padding: 14px 14px 14px 54px; border-bottom: 1px solid var(--border); }
.redirect-item::before { content: counter(redirects); position: absolute; left: 10px; top: 14px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #eaf4ff; color: var(--primary); font-weight: 800; }
.redirect-url, .long-value { overflow-wrap: anywhere; word-break: break-word; }
.redirect-url { font-weight: 700; }
.redirect-status { color: var(--muted); font-size: .9rem; margin-top: 3px; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
th, td { text-align: left; vertical-align: top; padding: 13px 12px; border-bottom: 1px solid var(--border); }
th { color: #475569; background: #f8fafc; font-size: .83rem; text-transform: uppercase; letter-spacing: .04em; }
.compact-table { min-width: 650px; }
.icon-row { display: grid; grid-template-columns: 160px auto minmax(0,1fr); align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.duplicate-card { padding: 16px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; }
.completeness { font-weight: 800; color: var(--primary); }
.recommendation { border-left: 5px solid var(--border); background: #f8fafc; border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; }
.recommendation-critical { border-left-color: #7f1d1d; }
.recommendation-high { border-left-color: var(--danger); }
.recommendation-medium { border-left-color: var(--warning); }
.recommendation-low { border-left-color: var(--info); }
.priority-label { display: inline-block; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 850; color: var(--muted); }
.recommendation h3 { margin: 6px 0; font-size: 1rem; }
.recommendation p { margin: 5px 0; }
.recommendation small { color: var(--muted); }
.info-note { padding: 11px 13px; background: #eef8fd; border-radius: 9px; }
@media (max-width: 1100px) {
    .score-layout { grid-template-columns: 320px minmax(0,1fr); }
    .preview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .score-layout, .two-column, .editor-grid { grid-template-columns: 1fr; }
    .data-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .app-shell { padding: 20px 14px 48px; }
    .card, .input-card { padding: 18px; border-radius: 13px; }
    .form-row { grid-template-columns: 1fr; }
    .button { width: 100%; }
    .section-heading-row { align-items: flex-start; flex-direction: column; }
    .device-tabs { width: 100%; }
    .device-tabs button { flex: 1; }
    .detail-row { grid-template-columns: 1fr; gap: 3px; }
    .icon-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .tool-header h1 { font-size: 2rem; }
    .data-grid, .summary-grid { grid-template-columns: 1fr; }
    .score-ring { width: 154px; height: 154px; }
    .serp-preview { padding: 14px; }
}


/* SubmitShop Hub integration overrides */
.meta-analyzer-tool{
    --ss-orange:#f15a29;
    --ss-orange-dark:#d94816;
    --ss-black:#111111;
    display:flow-root;
    width:100%;
}
.meta-analyzer-tool .eyebrow,
.meta-analyzer-tool .section-label,
.meta-analyzer-tool .tool-label,
.meta-analyzer-tool .kicker,
.meta-analyzer-tool .badge-primary,
.meta-analyzer-tool .accent-text{
    color:var(--ss-orange) !important;
}
.meta-analyzer-tool .btn-primary,
.meta-analyzer-tool .primary-btn,
.meta-analyzer-tool button[type="submit"]{
    background:var(--ss-black) !important;
    border-color:var(--ss-black) !important;
    color:#fff !important;
}
.meta-analyzer-tool .btn-primary:hover,
.meta-analyzer-tool .primary-btn:hover,
.meta-analyzer-tool button[type="submit"]:hover{
    background:#000 !important;
    border-color:#000 !important;
}
.meta-analyzer-tool input:focus,
.meta-analyzer-tool textarea:focus,
.meta-analyzer-tool select:focus{
    border-color:var(--ss-orange) !important;
    box-shadow:0 0 0 3px rgba(241,90,41,.14) !important;
    outline:none;
}
.meta-analyzer-tool a{color:var(--ss-orange);}