:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --text: #172033;
    --muted: #667085;
    --border: #dfe5ef;
    --primary: #1167d8;
    --primary-dark: #0b50aa;
    --passed: #16803a;
    --passed-bg: #eaf8ef;
    --warning: #a95b00;
    --warning-bg: #fff4df;
    --failed: #ba1a1a;
    --failed-bg: #fff0f0;
    --info: #1769aa;
    --info-bg: #eaf4ff;
    --shadow: 0 12px 34px rgba(23, 32, 51, .08);
    --radius: 16px;
}
* { box-sizing: border-box; }
html { min-width: 0; }
body {
    margin: 0;
    min-width: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
}
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(1280px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 70px; }
.hero { max-width: 880px; margin-bottom: 24px; }
.hero h1 { margin: 8px 0 12px; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.08; letter-spacing: -.04em; }
.hero p:last-child { color: var(--muted); font-size: 1.05rem; max-width: 760px; }
.eyebrow { margin: 0; color: var(--primary); font-weight: 750; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow span { color: var(--muted); font-weight: 600; }
.audit-form-card, .loading-panel, .error-panel, .result-toolbar, .audit-card {
    width: 100%; max-width: 100%; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.audit-form-card { padding: 22px; }
.audit-form-card h2 { margin: 0 0 12px; font-size: 1rem; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; min-width: 0; }
.form-row input { width: 100%; min-width: 0; padding: 13px 15px; border: 1px solid #cbd4e1; border-radius: 10px; color: var(--text); outline: none; }
.form-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(17,103,216,.13); }
.btn { border: 0; border-radius: 10px; padding: 12px 16px; font-weight: 700; white-space: nowrap; }
.btn-primary { color: #fff; background: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { color: var(--text); background: #eef2f7; border: 1px solid #d9e0ea; }
.btn:disabled { cursor: not-allowed; opacity: .6; }
.form-message { min-height: 22px; margin: 8px 0 0; color: var(--failed); font-size: .9rem; overflow-wrap: anywhere; }
.loading-panel { margin-top: 18px; padding: 20px; display: flex; align-items: center; gap: 15px; overflow: hidden; }
.loading-copy { min-width: 0; width: 100%; display: grid; gap: 3px; }
.loading-copy span { color: var(--muted); overflow-wrap: anywhere; word-break: break-word; }
.spinner { width: 34px; height: 34px; flex: 0 0 34px; border: 4px solid #dce8f7; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-panel { margin-top: 18px; padding: 16px 18px; color: var(--failed); background: var(--failed-bg); border-color: #f0b5b5; overflow-wrap: anywhere; }
.results { margin-top: 24px; min-width: 0; }
.result-toolbar { padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.result-toolbar h2 { margin: 5px 0 0; }
.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.summary-grid, .score-grid { display: grid; gap: 12px; min-width: 0; }
.summary-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 16px; }
.score-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.summary-card, .score-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); overflow: hidden; }
.summary-card strong, .score-card strong { display: block; font-size: clamp(1.15rem, 2vw, 1.8rem); overflow-wrap: anywhere; }
.summary-card span, .score-card span { color: var(--muted); font-size: .84rem; }
.summary-card.failed { border-top: 4px solid var(--failed); }
.summary-card.warning { border-top: 4px solid var(--warning); }
.summary-card.passed { border-top: 4px solid var(--passed); }
.summary-card.info { border-top: 4px solid var(--info); }
.audit-card { margin-bottom: 14px; overflow: hidden; }
.audit-card details { width: 100%; min-width: 0; }
.audit-card summary { padding: 17px 20px; font-size: 1rem; font-weight: 750; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.audit-card summary::-webkit-details-marker { display: none; }
.audit-card summary::after { content: "+"; color: var(--muted); font-size: 1.4rem; }
.audit-card details[open] summary::after { content: "−"; }
.card-body { padding: 0 20px 20px; min-width: 0; }
.card-note { color: var(--muted); margin: 0 0 12px; }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-size: .9rem; }
th { background: #f8fafc; color: #344054; font-weight: 750; }
td { overflow-wrap: anywhere; word-break: break-word; max-width: 560px; }
tr:last-child td { border-bottom: 0; }
.status { display: inline-block; border-radius: 999px; padding: 4px 8px; font-size: .77rem; font-weight: 800; white-space: nowrap; }
.status-passed { color: var(--passed); background: var(--passed-bg); }
.status-warning { color: var(--warning); background: var(--warning-bg); }
.status-failed { color: var(--failed); background: var(--failed-bg); }
.status-info { color: var(--info); background: var(--info-bg); }
.kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kv { min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.kv span { display: block; color: var(--muted); font-size: .78rem; margin-bottom: 3px; }
.kv strong { display: block; overflow-wrap: anywhere; word-break: break-word; }
.critical-banner { padding: 15px 17px; margin-bottom: 16px; border-radius: 12px; background: var(--failed-bg); color: var(--failed); border: 1px solid #f2b6b6; font-weight: 800; }
.heading-tree { margin: 0; padding-left: 0; list-style: none; }
.heading-tree li { margin: 4px 0; padding: 6px 9px; border-left: 3px solid #ccd8e8; background: #f8fafc; border-radius: 5px; overflow-wrap: anywhere; }
.recommendation { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.recommendation h4 { margin: 0 0 6px; }
.recommendation p { margin: 5px 0; }
.priority-critical { border-left: 5px solid var(--failed); }
.priority-high { border-left: 5px solid #d33b16; }
.priority-medium { border-left: 5px solid var(--warning); }
.priority-low { border-left: 5px solid var(--info); }
.no-signals { color: var(--muted); font-style: italic; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 980px) {
    .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .app-shell { width: min(100% - 20px, 1280px); padding-top: 24px; }
    .form-row { grid-template-columns: 1fr 1fr; }
    .form-row input { grid-column: 1 / -1; }
    .result-toolbar { align-items: flex-start; flex-direction: column; }
    .summary-grid, .score-grid, .kv-grid { grid-template-columns: 1fr; }
    .toolbar-actions { width: 100%; }
    .toolbar-actions .btn { flex: 1; }
    .audit-card summary, .card-body { padding-left: 14px; padding-right: 14px; }
}


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