/* SEO Analytics — "RankPulse". Indigo. Namespaced .so */
* { box-sizing: border-box; }
.so {
    --bg: #f5f6fb; --panel: #ffffff; --panel2: #f1f3fb; --line: #e4e7f2;
    --ink: #1e2235; --muted: #6b7192; --brand: #6366f1; --brand-ink: #4f46e5; --accent: #8b5cf6;
    --ok: #16a34a; --warn: #d97706; --danger: #dc2626;
    --shadow: 0 16px 38px -22px rgba(60,60,110,.5);
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif; color: var(--ink);
    min-height: calc(100vh - 44px);
    background: radial-gradient(900px 400px at 88% -10%, rgba(99,102,241,.1), transparent), var(--bg);
}
:root[data-demo-theme="dark"] .so {
    --bg: #0e1020; --panel: #171a2e; --panel2: #12142499; --panel2: #141628; --line: #262a45; --ink: #e6e8f5; --muted: #9298c0;
}
.so h2, .so h3 { margin: 0; }
.so-topbar { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.5rem; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; flex-wrap: wrap; }
.so-brand { display: flex; align-items: center; gap: .6rem; } .so-logo { width: 2.1rem; height: 2.1rem; border-radius: .6rem; background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; display: grid; place-items: center; font-size: 1.1rem; }
.so-brand b { display: block; } .so-brand small { color: var(--muted); font-size: .72rem; }
.so-nav { display: flex; gap: .25rem; margin: 0 auto; flex-wrap: wrap; }
.so-navbtn { border: 0; background: transparent; color: var(--muted); padding: .5rem .85rem; border-radius: .6rem; font: 600 .85rem inherit; cursor: pointer; }
.so-navbtn:hover { color: var(--ink); background: var(--panel2); } .so-navbtn.active { background: var(--brand); color: #fff; }
.so-live { color: var(--ok); font-size: .72rem; font-weight: 800; letter-spacing: .08em; display: inline-flex; gap: .35rem; align-items: center; }
.so-live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); animation: sop 1.4s infinite; }
@keyframes sop { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.so-btn { border: 0; cursor: pointer; border-radius: .6rem; padding: .55rem .95rem; font: 700 .84rem inherit; background: var(--brand); color: #fff; }
.so-view { max-width: 1240px; margin: 0 auto; padding: 1.5rem; } .so-view[hidden] { display: none !important; }
.so-h { font-size: 1.3rem; font-weight: 800; } .so-sub { color: var(--muted); font-size: .85rem; margin-bottom: 1.2rem; }
.so-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.3rem; } @media (max-width: 780px) { .so-kpis { grid-template-columns: repeat(2, 1fr); } }
.so-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.so-kpi b { font-size: 1.7rem; font-weight: 800; display: block; } .so-kpi small { color: var(--muted); font-size: .76rem; } .so-kpi .dl { font-size: .72rem; font-weight: 700; }
.so-kpi .dl.up { color: var(--ok); } .so-kpi .dl.down { color: var(--danger); }
.so-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; } @media (max-width: 900px) { .so-grid { grid-template-columns: 1fr; } }
.so-card { background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; padding: 1.2rem; box-shadow: var(--shadow); margin-bottom: 1.2rem; }
.so-card h3 { font-size: .95rem; margin-bottom: 1rem; }
#so-traffic { width: 100%; height: 180px; }
.so-gauge { display: flex; align-items: center; gap: 1.2rem; } .so-gauge svg { width: 120px; height: 120px; }
.so-gauge .gv { font-size: 2rem; font-weight: 800; } .so-gauge .gl { color: var(--muted); font-size: .8rem; }
.so-check { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); font-size: .84rem; }
.so-check:last-child { border-bottom: 0; } .so-check .dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.so-check.pass .dot { background: var(--ok); } .so-check.warn .dot { background: var(--warn); } .so-check.fail .dot { background: var(--danger); }
.so-check .cn b { display: block; } .so-check .cn small { color: var(--muted); font-size: .74rem; }
.so-check .cs { margin-left: auto; font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.so-check.pass .cs { color: var(--ok); } .so-check.warn .cs { color: var(--warn); } .so-check.fail .cs { color: var(--danger); }
.so-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.so-table th { text-align: left; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.so-table td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.so-table tr:hover td { background: var(--panel2); }
.so-pos { font-weight: 800; } .so-delta { font-size: .74rem; font-weight: 700; } .so-delta.up { color: var(--ok); } .so-delta.down { color: var(--danger); } .so-delta.flat { color: var(--muted); }
.so-intent { font-size: .64rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background: var(--panel2); color: var(--muted); }
.so-bl { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); font-size: .84rem; }
.so-bl:last-child { border-bottom: 0; } .so-dr { font-weight: 800; color: var(--brand-ink); min-width: 2.2rem; }
.so-bl .ty { margin-left: auto; font-size: .66rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; }
.so-bl .ty.dofollow { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.so-bl .ty.nofollow { background: var(--panel2); color: var(--muted); }