/* ═══════════════════════════════════════════════════════
   SEO Scan — Stylesheet v2.0
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0a12; }
::-webkit-scrollbar-thumb { background: #2d2d3e; border-radius: 3px; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* ── Cards ────────────────────────────────────────────── */
.card { background: #13131c; border: 1px solid #1e1e2e; border-radius: 16px; padding: 20px; }
.score-card { background: #13131c; border: 1px solid #1e1e2e; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; align-items: center; position: relative; }
.cat-label { font-size: 0.65rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }
.score-ring { display: block; }
.score-ring-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 14px; pointer-events: none; }
#scoreOverall .score-ring-val { justify-content: center; padding-bottom: 0; padding-top: 30px; }
.summary-card { background: #13131c; border: 1px solid; border-radius: 16px; padding: 20px; }
.stat-card { background: #13131c; border: 1px solid #1e1e2e; border-radius: 16px; padding: 24px; text-align: center; transition: border-color 0.2s; }
.stat-card:hover { border-color: #6366f1; }
.section-title { font-size: 0.85rem; font-weight: 600; color: #d1d5db; display: flex; align-items: center; gap: 8px; }

/* ── Feature Pills ────────────────────────────────────── */
.feature-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 9999px; padding: 7px 15px; font-size: 0.78rem; color: #94a3b8; white-space: nowrap; transition: all 0.2s; }
.feature-pill:hover { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.3); color: #c7d2fe; }

/* ── Tabs ─────────────────────────────────────────────── */
.tab-btn { display: flex; align-items: center; gap: 7px; padding: 11px 18px; font-size: 0.8rem; font-weight: 500; color: #6b7280; border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.2s; background: none; border-top: none; border-left: none; border-right: none; cursor: pointer; }
.tab-btn:hover { color: #e5e7eb; }
.tab-btn.active { color: #818cf8; border-bottom-color: #6366f1; }
.tab-badge { background: #ef4444; color: #fff; font-size: 0.6rem; font-weight: 700; border-radius: 9999px; min-width: 17px; height: 17px; display: none; align-items: center; justify-content: center; padding: 0 4px; }
.tab-badge.visible { display: inline-flex; }

/* ── Check Items ──────────────────────────────────────── */
.check-item { background: #13131c; border: 1px solid #1e1e2e; border-radius: 12px; padding: 14px; margin-bottom: 7px; transition: border-color 0.15s; }
.check-item:hover { border-color: #2d2d3e; }
.check-item.fail    { border-left: 3px solid #ef4444; }
.check-item.warning { border-left: 3px solid #f59e0b; }
.check-item.pass    { border-left: 3px solid #22c55e; }
.check-extra { display: none; }
.check-item.expanded .check-extra { display: block; }
.expand-icon { transition: transform 0.2s; }
.check-item.expanded .expand-icon { transform: rotate(180deg); }

.sev-badge { font-size: 0.6rem; font-weight: 700; padding: 2px 7px; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.05em; }
.sev-critical { background: rgba(239,68,68,.15); color: #f87171; }
.sev-high     { background: rgba(239,68,68,.1); color: #fca5a5; }
.sev-medium   { background: rgba(245,158,11,.15); color: #fcd34d; }
.sev-low      { background: rgba(99,102,241,.15); color: #a5b4fc; }

/* ── Filter Bar ───────────────────────────────────────── */
.filter-bar { display: flex; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.filter-chip { padding: 4px 13px; border-radius: 9999px; border: 1px solid #2d2d3e; font-size: 0.75rem; color: #6b7280; cursor: pointer; transition: all 0.15s; background: none; }
.filter-chip:hover, .filter-chip.active { border-color: #6366f1; color: #818cf8; background: rgba(99,102,241,.1); }

/* ── Code Block ───────────────────────────────────────── */
.code-block { background: #0a0a12; border: 1px solid #2d2d3e; border-radius: 8px; padding: 10px 12px; font-family: 'Courier New', monospace; font-size: 0.75rem; color: #a5f3fc; overflow-x: auto; white-space: pre; }

/* ── Scan Progress ────────────────────────────────────── */
.check-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #13131c; border: 1px solid #1e1e2e; border-radius: 10px; font-size: 0.82rem; color: #9ca3af; opacity: 0; transform: translateY(8px); animation: slideIn 0.3s ease forwards; }
.check-row.done { color: #d1d5db; }
@keyframes slideIn { to { opacity: 1; transform: none; } }

/* ── SERP Preview ─────────────────────────────────────── */
.serp-box { background: #0f0f18; border: 1px solid #1e1e2e; border-radius: 12px; padding: 18px 20px; }
.serp-url   { font-size: 0.75rem; color: #5f9f5f; margin-bottom: 3px; }
.serp-title { font-size: 1.1rem; color: #8ab4f8; font-weight: 400; margin-bottom: 5px; line-height: 1.3; }
.serp-title:hover { text-decoration: underline; cursor: pointer; }
.serp-desc  { font-size: 0.82rem; color: #9aa0a6; line-height: 1.5; }
.serp-mobile { background: #0f0f18; max-width: 380px; }
.serp-mobile .serp-title { font-size: 0.9rem; }
.serp-len-badge { font-size: 0.72rem; font-weight: 600; display: inline-block; }

/* ── Tech Stack ───────────────────────────────────────── */
.tech-card { background: #0f0f18; border: 1px solid #1e1e2e; border-radius: 12px; padding: 16px; text-align: center; transition: border-color 0.2s; }
.tech-card:hover { border-color: #2d2d3e; }

/* ── SSL Card ─────────────────────────────────────────── */
.ssl-card { background: #0f0f18; border: 1px solid #1e1e2e; border-radius: 12px; padding: 16px; text-align: center; }
.ssl-error-box { background: rgba(239,68,68,.05); border: 1px solid rgba(239,68,68,.2); border-radius: 12px; padding: 24px; text-align: center; }

/* ── Redirect Chain ───────────────────────────────────── */
.redirect-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #0f0f18; border: 1px solid #1e1e2e; border-radius: 10px; margin-bottom: 6px; font-size: 0.78rem; }
.redirect-num    { color: #6b7280; min-width: 18px; text-align: center; font-size: 0.7rem; font-weight: 600; }
.redirect-status { font-weight: 700; min-width: 34px; font-size: 0.75rem; }
.redirect-url    { flex: 1; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; }
.redirect-time   { color: #6b7280; font-size: 0.7rem; white-space: nowrap; }

/* ── Core Web Vitals ──────────────────────────────────── */
.vital-card { background: #0f0f18; border: 1px solid #1e1e2e; border-radius: 12px; padding: 16px; text-align: center; transition: border-color .2s; }
.vital-card.good    { border-top: 2px solid #22c55e; }
.vital-card.warning { border-top: 2px solid #f59e0b; }
.vital-card.poor    { border-top: 2px solid #ef4444; }

/* ── Lighthouse ───────────────────────────────────────── */
.lh-card { background: #0f0f18; border: 1px solid #1e1e2e; border-radius: 12px; padding: 20px; text-align: center; }

/* ── Content / E-E-A-T ────────────────────────────────── */
.eat-card { background: #0f0f18; border: 1px solid #1e1e2e; border-radius: 12px; padding: 16px; text-align: center; transition: all .2s; }
.eat-found   { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.05); }
.eat-missing { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.05); }

/* ── Links ────────────────────────────────────────────── */
.link-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #1e1e2e; }
.link-row:last-child { border-bottom: none; }
.badge-red  { background: rgba(239,68,68,.15); color: #f87171; font-size: 0.65rem; padding: 2px 7px; border-radius: 9999px; white-space: nowrap; }
.badge-gray { background: #1e1e2e; color: #9ca3af; font-size: 0.65rem; padding: 2px 7px; border-radius: 9999px; white-space: nowrap; }

/* ── Error Toast ──────────────────────────────────────── */
@keyframes toastIn { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: none; } }

/* ── Animations ───────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.tab-panel:not(.hidden) { animation: fadeUp 0.25s ease; }

/* ── Competitor Compare ───────────────────────────────── */
.compare-winner { border-color: rgba(99,102,241,0.45) !important; box-shadow: 0 0 0 1px rgba(99,102,241,0.2); }
.winner-badge { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; font-size: 0.62rem; font-weight: 700; padding: 3px 10px; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.compare-metric-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.82rem; gap: 8px; }
.compare-metric-row:last-child { border-bottom: none; }
.kw-pill { display: inline-block; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); color: #a5b4fc; font-size: 0.72rem; padding: 3px 11px; border-radius: 9999px; margin: 3px; }
.kw-pill.site1 { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.25); color: #86efac; }
.kw-pill.site2 { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25); color: #fcd34d; }
.mode-tab { padding: 7px 18px; border-radius: 8px; font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all 0.2s; color: #6b7280; background: none; border: none; }
.mode-tab.active { background: rgba(99,102,241,0.15); color: #818cf8; }
.mode-tab:hover:not(.active) { color: #d1d5db; }
.cmp-panel:not(.hidden) { animation: fadeUp 0.25s ease; }