/* ── Page Hero ─────────────────────────────────── */
.seo-hero {
    background: linear-gradient(135deg, #27292f 0%, #3a3d45 100%);
    padding: 3.5rem 0 2.5rem;
    position: relative;
    overflow: hidden;
}
.seo-hero::after {
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:4px; background:var(--accent);
}
.seo-hero h1 {
    font-family:'Titillium Web',sans-serif; font-weight:600;
    font-size:clamp(1.8rem,3vw,2.5rem);
    color:#fff; margin-bottom:.4rem;
}
.seo-hero p { color:rgba(255,255,255,.65); font-size:1rem; }
.seo-hero-beta {
    font-size:.5em; background:var(--accent); color:#fff;
    padding:.1em .4em; border-radius:4px; vertical-align:middle;
}

/* ── Section Wrapper ───────────────────────────── */
.seo-section { padding:2.5rem 0; }

/* ── URL Form ──────────────────────────────────── */
.seo-form-wrap {
    background: var(--page-bg);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    margin-top: -1.5rem;
    position: relative;
    z-index: 2;
}
.seo-form-label {
    font-weight:600; color:var(--text); font-size:.9rem;
    display:block; margin-bottom:.5rem;
}
.seo-form-hint {
    font-size:.78rem; color:var(--muted); margin:.6rem 0 0;
}
.seo-input {
    border: 2px solid var(--mid-bg);
    border-radius: 8px;
    padding: .75rem 1rem;
    font-size: 1rem;
    width: 100%;
    font-family: 'Titillium Web', sans-serif;
    transition: border-color var(--transition);
    background: var(--page-bg);
    color: var(--text);
}
.seo-input:focus { outline: none; border-color: var(--btn-grey); }
.btn-analyse {
    background: var(--btn-grey);
    color: #fff; font-weight: 700; border: none;
    padding: .75rem 2rem; border-radius: 8px;
    font-size: 1rem; cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
}
.btn-analyse:hover { background: var(--btn-grey-dk); }

/* ── Alert ─────────────────────────────────────── */
.seo-alert { border-radius: var(--radius); }

/* ── Score Bar ─────────────────────────────────── */
.score-wrap {
    background: var(--page-bg);
    border-radius: var(--radius);
    padding: 1.8rem 2rem;
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
    margin-bottom: 1.5rem;
}
.score-bar-outer {
    height: 22px; border-radius: 11px;
    background: linear-gradient(90deg,
        #e53935 0%, #ef6c00 25%, #f9a825 50%, #7cb342 75%, #2e7d32 100%);
    position: relative; margin: 1rem 0 .5rem;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}
.score-bar-marker {
    position: absolute; top: -4px;
    width: 30px; height: 30px;
    background: var(--primary-dk);
    border: 3px solid #fff;
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    transition: left 1s ease;
}
.score-number {
    font-size: 2.8rem; font-weight: 800;
    color: var(--primary); line-height: 1;
}
.score-grade { font-weight:700; font-size:1rem; }
.score-label { font-size: .9rem; color: var(--muted); }
.score-meta { font-size:.82rem; color:var(--muted); margin-bottom:.3rem; }
.score-scale { font-size:.75rem; color:var(--muted); }

/* ── Check Table ───────────────────────────────── */
.check-section { margin-bottom: 1.5rem; }
.check-section h5 {
    font-size: .75rem; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--muted); padding: .6rem 1rem;
    background: var(--light-bg);
    border-radius: 6px 6px 0 0;
    margin: 0;
}
.check-table {
    width: 100%; border-collapse: collapse;
    background: var(--page-bg);
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.check-table tr:not(:last-child) td {
    border-bottom: 1px solid var(--mid-bg);
}
.check-table td {
    padding: .7rem 1rem; font-size: .88rem;
    vertical-align: middle;
}
.check-table td:first-child {
    color: var(--muted); width: 38%; font-weight: 500;
}
.check-table td:nth-child(2) {
    color: var(--text); word-break: break-word;
}
.check-table td:last-child { width: 36px; text-align: center; }
.check-hint { font-size: .78rem; color: var(--muted); display: block; margin-top: .2rem; }

/* ── Status Icons ──────────────────────────────── */
.dot { width:14px;height:14px;border-radius:50%;display:inline-block; }
.dot-ok    { background:#4caf50; box-shadow:0 0 0 3px rgba(76,175,80,.2); }
.dot-warn  { background:#ff9800; box-shadow:0 0 0 3px rgba(255,152,0,.2); }
.dot-error { background:#f44336; box-shadow:0 0 0 3px rgba(244,67,54,.2); }

/* ── Summary Cards ─────────────────────────────── */
.summary-card {
    background: var(--page-bg);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    border-top: 3px solid var(--mid-bg);
    height: 100%;
}
.summary-card.ok    { border-top-color: #4caf50; }
.summary-card.warn  { border-top-color: #ff9800; }
.summary-card.error { border-top-color: #f44336; }
.summary-card .num  { font-size:2rem; font-weight:800; color:var(--primary); }
.summary-card .lbl  { font-size:.82rem; color:var(--muted); }

/* ── Canonical Info Box ────────────────────────── */
.canonical-info {
    background: var(--light-bg);
    border-radius: var(--radius);
    padding: 1.8rem 2rem;
    margin-top: 1rem;
    border-left: 4px solid var(--btn-grey);
}
.canonical-info h5 {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
}
.canonical-info h5 i { color: var(--btn-grey); }
.canonical-info > p {
    font-size: .88rem;
    color: var(--muted);
    margin-bottom: 1.2rem;
}
.canonical-card {
    background: var(--page-bg);
    border-radius: 8px;
    padding: 1.2rem;
    height: 100%;
    border-top: 3px solid var(--mid-bg);
}
.canonical-card--ok   { border-top-color: #4caf50; }
.canonical-card--info { border-top-color: #2196f3; }
.canonical-card--warn { border-top-color: #ff9800; }
.canonical-card--ok   .canonical-card-title i { color: #4caf50; }
.canonical-card--info .canonical-card-title i { color: #2196f3; }
.canonical-card--warn .canonical-card-title i { color: #ff9800; }
.canonical-card-title {
    font-weight: 700;
    font-size: .85rem;
    color: var(--primary);
    margin-bottom: .6rem;
}
.canonical-card-desc {
    font-size: .78rem;
    color: var(--muted);
    margin-bottom: .6rem;
}
.canonical-code {
    font-size: .74rem;
    background: var(--light-bg);
    padding: .5rem .7rem;
    border-radius: 5px;
    display: block;
    word-break: break-all;
    color: var(--primary);
}

/* ── SEO CTA ───────────────────────────────────── */
.seo-cta {
    background: var(--primary);
    border-radius: var(--radius);
    padding: 2rem;
    margin-top: 2rem;
    color: #fff;
    text-align: center;
}
.seo-cta h4 {
    font-family: 'Titillium Web', sans-serif;
    color: #fff;
    margin-bottom: .5rem;
}
.seo-cta p {
    color: rgba(255,255,255,.7);
    margin-bottom: 1.2rem;
}

@media(max-width:767px){
    .seo-form-wrap { padding:1.2rem; }
    .check-table td:first-child { width:45%; font-size:.8rem; }
}