.page-site {
    --sv-shell: min(1280px, calc(100% - 56px));
    --sv-radius: 24px;
    --sv-radius-sm: 18px;
    --sv-panel-top: rgba(255, 255, 255, 0.96);
    --sv-panel-bottom: rgba(244, 247, 255, 0.98);
    --sv-line: rgba(78, 110, 242, 0.12);
    --sv-text-soft: #6c7b98;
    --sv-shadow: 0 24px 56px rgba(65, 91, 168, 0.14);
    --sv-shadow-soft: 0 14px 28px rgba(65, 91, 168, 0.10);
    --sv-cyan: #2edff7;
    --sv-blue: #4e6ef2;
    --sv-violet: #8c5cff;
    --sv-pink: #ff5ab9;
    --sv-gold: #ffbf47;
    --sv-green: #2fca7a;
    --sv-danger: #ff5d74;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(1200px 480px at 0% -10%, rgba(78, 110, 242, 0.12), transparent 55%),
        radial-gradient(900px 420px at 100% 0%, rgba(255, 90, 185, 0.10), transparent 46%),
        radial-gradient(700px 360px at 100% 100%, rgba(46, 223, 247, 0.08), transparent 40%),
        linear-gradient(180deg, #f7f9ff 0%, #eef2fb 100%);
}

html[data-theme="dark"] .page-site {
    --sv-panel-top: rgba(15, 24, 47, 0.96);
    --sv-panel-bottom: rgba(24, 35, 68, 0.98);
    --sv-line: rgba(49, 231, 255, 0.16);
    --sv-text-soft: #94a3c5;
    --sv-shadow: 0 28px 72px rgba(0, 0, 0, 0.38);
    --sv-shadow-soft: 0 16px 32px rgba(0, 0, 0, 0.28);
    background:
        radial-gradient(1200px 520px at 0% -10%, rgba(91, 134, 255, 0.18), transparent 55%),
        radial-gradient(900px 440px at 100% 0%, rgba(255, 90, 185, 0.14), transparent 46%),
        radial-gradient(700px 360px at 100% 100%, rgba(46, 223, 247, 0.10), transparent 40%),
        linear-gradient(180deg, #080d1a 0%, #0f1730 100%);
}

/* ───── Inline styles moved from site.view.php ───── */

.uptime-inline-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: baseline;
    margin-bottom: 14px;
}

.uptime-inline-summary strong {
    font-size: 1rem;
    font-weight: 800;
    color: #1f2940;
}

html[data-theme="dark"] .uptime-inline-summary strong {
    color: #e7eefb;
}

.uptime-inline-summary span {
    color: #66738f;
    font-size: 0.95rem;
}

html[data-theme="dark"] .uptime-inline-summary span {
    color: var(--sv-text-soft);
}

/* ───── Entrance animations ───── */

.page-site .hero-shell,
.page-site .strip-tile,
.page-site .card {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .32s ease, border-color .32s ease;
}

.page-site .hero-shell.is-visible,
.page-site .strip-tile.is-visible,
.page-site .card.is-visible {
    opacity: 1;
    transform: none;
}

/* ───── Shell widths ───── */

.page-site .container.report-shell.page-shell,
.page-site .hero-shell,
.page-site .hero-strip {
    width: var(--sv-shell);
    margin-left: auto;
    margin-right: auto;
}

/* ───── Glassmorphism panels ───── */

.page-site .hero-shell,
.page-site .strip-tile,
.page-site .card,
.page-site .modal-content {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sv-line);
    border-radius: var(--sv-radius);
    background: linear-gradient(180deg, var(--sv-panel-top), var(--sv-panel-bottom));
    box-shadow: var(--sv-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.page-site .hero-shell::before,
.page-site .strip-tile::before,
.page-site .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 40%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.02));
    pointer-events: none;
}

.page-site .hero-shell::after,
.page-site .card::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sv-cyan), var(--sv-violet), var(--sv-pink), transparent);
    opacity: 0.72;
    pointer-events: none;
}

/* ───── Card hover micro-interaction ───── */

.page-site .card {
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .32s ease, border-color .32s ease;
}

.page-site .card.is-visible:hover {
    box-shadow: 0 32px 72px rgba(78, 110, 242, 0.22), inset 0 1px 0 rgba(255,255,255,0.10);
    border-color: color-mix(in srgb, var(--sv-blue) 32%, var(--sv-line));
    transform: translateY(-3px);
}

html[data-theme="dark"] .page-site .card.is-visible:hover {
    box-shadow: 0 32px 72px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(49, 231, 255, 0.14), inset 0 1px 0 rgba(255,255,255,0.06);
    border-color: color-mix(in srgb, var(--sv-cyan) 24%, var(--sv-line));
}

/* ───── Hero section ───── */

.page-site .hero-shell {
    margin-top: 22px;
    margin-bottom: 12px;
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(180px, 248px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.page-site .profile-shot {
    width: 100%;
    min-height: 220px;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
    object-position: top center;
    border: 1px solid var(--sv-line);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), var(--sv-shadow-soft);
    background: linear-gradient(180deg, rgba(15, 24, 47, 0.12), rgba(15, 24, 47, 0.26));
}

.page-site .profile-shot-placeholder {
    display: grid;
    place-items: center;
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--sv-blue), var(--sv-violet) 62%, var(--sv-pink));
}

.page-site .hero-panel {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 12px;
}

.page-site .hero-kicker,
.page-site .profile-bio,
.page-site .profile-buttons {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
}

.page-site .hero-kicker {
    width: fit-content;
    margin: 0;
    padding: 9px 14px;
    color: var(--sv-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

html[data-theme="dark"] .page-site .hero-kicker {
    color: var(--sv-cyan);
}

.page-site .profile-name {
    margin: 0;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 0.94;
    letter-spacing: -0.05em;
    font-weight: 900;
    background: linear-gradient(135deg, var(--text, #172033) 40%, var(--sv-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html[data-theme="dark"] .page-site .profile-name {
    background: linear-gradient(135deg, #fff 40%, var(--sv-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.page-site .profile-domain {
    margin-top: -2px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sv-text-soft);
}

.page-site .profile-bio {
    margin: 0;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.62;
    color: var(--sv-text-soft);
    max-width: 74ch;
}

.page-site .profile-buttons {
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.page-site .big-btn {
    margin: 0;
    min-height: 54px;
    padding: 16px 32px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}

.page-site .big-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.page-site .big-btn.primary {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--sv-cyan), var(--sv-blue) 46%, var(--sv-violet) 78%, var(--sv-pink));
    box-shadow: 0 16px 34px rgba(78, 110, 242, 0.25);
}

.page-site .big-btn.primary:hover {
    box-shadow: 0 20px 44px rgba(78, 110, 242, 0.38);
}

.page-site .big-btn.secondary {
    color: var(--text);
    border-color: var(--sv-line);
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
}

/* ───── Metric strip ───── */

.page-site .hero-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.page-site .strip-tile {
    padding: 13px 14px;
    min-height: 92px;
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .32s ease, border-color .32s ease;
}

.page-site .strip-tile.is-visible:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 48px rgba(78, 110, 242, 0.20), inset 0 1px 0 rgba(255,255,255,0.10);
    border-color: color-mix(in srgb, var(--sv-blue) 28%, var(--sv-line));
}

/* Strip tile accent colors — each tile gets a subtle gradient tint */
.page-site .strip-tile:nth-child(1) strong { color: var(--sv-blue); }
.page-site .strip-tile:nth-child(2) strong { color: var(--sv-cyan); }
.page-site .strip-tile:nth-child(3) strong { color: var(--sv-violet); }
.page-site .strip-tile:nth-child(4) strong { color: var(--sv-pink); }
.page-site .strip-tile:nth-child(5) strong { color: var(--sv-gold); }
.page-site .strip-tile:nth-child(6) strong { color: var(--sv-green); }
.page-site .strip-tile:nth-child(7) strong { color: var(--sv-cyan); }
.page-site .strip-tile:nth-child(8) strong { color: var(--sv-danger); }

.page-site .strip-tile strong {
    display: block;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 900;
}

.page-site .strip-tile span {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sv-text-soft);
    line-height: 1.42;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ───── Layout grids ───── */

.page-site .page-shell {
    display: grid;
    gap: 18px;
    padding-bottom: 28px;
}

.page-site .masonry-cards {
    columns: 2;
    column-gap: 18px;
}

.page-site .masonry-cards > .card,
.page-site .masonry-cards > article {
    break-inside: avoid;
    margin-bottom: 18px;
}

.page-site .report-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.page-site .report-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.page-site .report-top--single {
    grid-template-columns: 1fr;
}

/* ───── Security sub-sections (SSL + HTTP merged) ───── */

.page-site .security-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--sv-line);
}

.page-site .security-section-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sv-text-soft);
}

/* ───── Snapshot wide item ───── */

.page-site .snapshot-wide {
    grid-column: 1 / -1;
}

.page-site .report-primary,
.page-site .report-secondary {
    display: grid;
    gap: 18px;
    align-content: start;
    min-width: 0;
}

.page-site .report-browser {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.page-site .dashboard-grid,
.page-site .report-lower-grid,
.page-site .detail-grid {
    display: grid;
    gap: 18px;
    align-items: start;
}

.page-site .dashboard-grid,
.page-site .report-lower-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.page-site .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-site .dashboard-story,
.page-site .dashboard-snapshot {
    grid-column: span 7;
}

.page-site .report-browser .browser-activity,
.page-site .report-browser .browser-privacy,
.page-site .uptime-card,
.page-site .comments-card {
    grid-column: auto;
}

.page-site .report-browser .browser-overview,
.page-site .report-browser .browser-hosts-card,
.page-site .related-section,
.page-site .detail-card-wide,
.page-site .dns-card {
    grid-column: 1 / -1;
}

/* ───── Cards ───── */

.page-site .card {
    padding: 16px;
    min-height: 0;
}

.page-site .card.featured {
    box-shadow: 0 28px 66px rgba(78, 110, 242, 0.16), inset 0 1px 0 rgba(255,255,255,0.08);
}

html[data-theme="dark"] .page-site .card.featured {
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(49, 231, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.06);
}

.page-site .card h2 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-weight: 800;
}

.page-site .section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--sv-blue) 18%, transparent), color-mix(in srgb, var(--sv-violet) 12%, transparent));
    color: var(--sv-blue);
    font-size: 14px;
}

html[data-theme="dark"] .page-site .section-icon {
    color: var(--sv-cyan);
    background: linear-gradient(135deg, color-mix(in srgb, var(--sv-cyan) 14%, transparent), color-mix(in srgb, var(--sv-violet) 10%, transparent));
}

/* ───── Radar / Trust score ───── */

.page-site .summary-radar-grid {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-bottom: 16px;
}

.page-site .summary-radar {
    display: grid;
    place-items: center;
}

.page-site .radar-board {
    width: min(100%, 248px);
    aspect-ratio: 1;
    position: relative;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--sv-blue) 28%, var(--sv-line));
    background:
        repeating-radial-gradient(circle at center, rgba(78, 110, 242, 0.12) 0 2px, transparent 2px 33px),
        radial-gradient(circle at center, rgba(46, 223, 247, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 48px rgba(78, 110, 242, 0.16), 0 0 96px rgba(46, 223, 247, 0.08);
}

.page-site .radar-board::before,
.page-site .radar-board::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: rgba(255,255,255,0.10);
}

.page-site .radar-board::before {
    width: 1px;
    height: 44%;
    transform: translate(-50%, -100%);
}

.page-site .radar-board::after {
    width: 44%;
    height: 1px;
    transform: translate(0, -50%);
}

.page-site .radar-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 315deg, rgba(46, 223, 247, 0.52), rgba(46, 223, 247, 0) 70deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 38% 100%);
    mask: radial-gradient(circle, transparent 0 34%, #000 38% 100%);
    animation: siteview-spin 8s linear infinite;
}

.page-site .radar-core {
    position: absolute;
    inset: 48px;
    border-radius: 50%;
    border: 1px solid var(--sv-line);
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    display: grid;
    place-items: center;
    text-align: center;
}

.page-site .radar-core strong {
    display: block;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.06em;
    font-weight: 900;
    background: linear-gradient(135deg, var(--sv-cyan), #c8fbff 56%, var(--sv-pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.page-site .radar-core span {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--sv-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

/* ───── Inner panels (radar notes, mini stats, etc.) ───── */

.page-site .radar-readouts,
.page-site .summary-metrics,
.page-site .snapshot-grid,
.page-site .browser-score-grid,
.page-site .analysis-stat-grid,
.page-site .uptime-summary,
.page-site .host-card-grid,
.page-site .related-grid,
.page-site .tag-list.compact-tag-list {
    display: grid;
    gap: 8px;
}

.page-site .radar-readouts {
    grid-template-columns: 1fr;
}

.page-site .summary-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
}

.page-site .snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
}

.page-site .browser-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-site .analysis-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
}

.page-site .host-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-site .related-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-site .radar-note,
.page-site .mini-stat,
.page-site .score-panel,
.page-site .snapshot-item,
.page-site .uptime-box,
.page-site .host-card,
.page-site .comment,
.page-site .related-card,
.page-site .story-box,
.page-site .source-panel,
.page-site .tag,
.page-site .signal-tag,
.page-site .kvs li {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* Small inner panels get hover too */
.page-site .mini-stat:hover,
.page-site .snapshot-item:hover,
.page-site .radar-note:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--sv-blue) 22%, var(--sv-line));
}

.page-site .radar-note,
.page-site .mini-stat,
.page-site .score-panel,
.page-site .snapshot-item,
.page-site .uptime-box,
.page-site .host-card,
.page-site .related-card {
    padding: 10px 12px;
}

.page-site .source-panel,
.page-site .story-box {
    padding: 12px;
}

.page-site .radar-note strong,
.page-site .mini-stat strong,
.page-site .snapshot-value,
.page-site .score-panel strong,
.page-site .uptime-box strong {
    display: block;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 900;
}

.page-site .radar-note span,
.page-site .mini-stat span,
.page-site .snapshot-label,
.page-site .score-panel-label,
.page-site .score-panel-detail,
.page-site .uptime-box span,
.page-site .comment small,
.page-site .related-meta,
.page-site .host-card-meta,
.page-site .card-subtitle,
.page-site .progress-label,
.page-site .label,
.page-site .tag,
.page-site .signal-tag {
    color: var(--sv-text-soft);
}

.page-site .radar-note span,
.page-site .score-panel-detail,
.page-site .snapshot-label,
.page-site .progress-label,
.page-site .card-subtitle,
.page-site .related-meta,
.page-site .host-card-meta,
.page-site .comment small {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.02em;
}

.page-site .score-panel-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.page-site .score-panel-detail {
    font-size: 11px;
}

.page-site .tone-low {
    border-color: color-mix(in srgb, var(--good) 34%, var(--sv-line));
}

.page-site .tone-low strong {
    color: var(--good);
}

.page-site .tone-watch {
    border-color: color-mix(in srgb, var(--sv-gold) 40%, var(--sv-line));
}

.page-site .tone-watch strong {
    color: var(--sv-gold);
}

.page-site .tone-high {
    border-color: color-mix(in srgb, var(--sv-danger) 44%, var(--sv-line));
}

.page-site .tone-high strong {
    color: var(--sv-danger);
}

/* ───── Story / narrative ───── */

.page-site .story-box p,
.page-site .compact-story p,
.page-site .muted {
    margin: 0;
    color: var(--sv-text-soft);
    font-size: 14px;
    line-height: 1.68;
}

.page-site .story-box p + p {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

/* ───── Category bars ───── */

.page-site .category-bars {
    display: grid;
    gap: 10px;
}

.page-site .category-bar-row {
    display: grid;
    gap: 7px;
}

.page-site .category-bar-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    font-size: 13px;
}

.page-site .category-bar-head strong {
    font-size: 15px;
    font-weight: 800;
}

.page-site .progress {
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid var(--sv-line);
    background: rgba(255,255,255,0.05);
}

.page-site .progress.slim {
    height: 10px;
}

.page-site .progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sv-cyan), var(--sv-blue) 45%, var(--sv-violet) 80%, var(--sv-pink));
    box-shadow: 0 0 24px rgba(78, 110, 242, 0.18);
    transition: width 1.1s cubic-bezier(.22, 1, .36, 1);
}

/* ───── Tables ───── */

.page-site .table-scroll {
    overflow-x: auto;
}

.page-site .country-table {
    width: 100%;
    border-collapse: collapse;
}

.page-site .compact-table th,
.page-site .compact-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--sv-line);
    text-align: left;
    font-size: 12px;
    vertical-align: top;
}

.page-site .compact-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--sv-text-soft);
}

.page-site .compact-table tbody tr {
    transition: background-color .18s ease;
}

.page-site .compact-table tbody tr:hover {
    background: rgba(78, 110, 242, 0.04);
}

html[data-theme="dark"] .page-site .compact-table tbody tr:hover {
    background: rgba(49, 231, 255, 0.04);
}

/* ───── Uptime dots ───── */

.page-site .uptime-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.page-site .uptime-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.page-site .uptime-dot:hover {
    transform: scale(1.6);
}

.page-site .uptime-dot.up {
    background: var(--sv-green);
    box-shadow: 0 0 18px rgba(47, 202, 122, 0.28);
}

.page-site .uptime-dot.up:hover {
    box-shadow: 0 0 28px rgba(47, 202, 122, 0.48);
}

.page-site .uptime-dot.down {
    background: var(--sv-danger);
    box-shadow: 0 0 18px rgba(255, 93, 116, 0.24);
}

.page-site .uptime-dot.down:hover {
    box-shadow: 0 0 28px rgba(255, 93, 116, 0.44);
}

/* ───── Comments ───── */

.page-site .comment {
    display: grid;
    gap: 4px;
    margin-bottom: 6px;
    padding: 10px 12px;
}

.page-site .comment strong,
.page-site .host-card-top strong,
.page-site .related-domain {
    font-size: 14px;
    font-weight: 800;
}

.page-site .comment-form {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.page-site .comment-form input[type="text"],
.page-site .comment-form textarea {
    width: 100%;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid var(--sv-line);
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
    color: var(--text);
    font-family: inherit;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.page-site .comment-form input[type="text"]:focus,
.page-site .comment-form textarea:focus {
    border-color: color-mix(in srgb, var(--sv-blue) 48%, var(--sv-line));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sv-blue) 14%, transparent);
}

.page-site .comment-form textarea {
    resize: vertical;
    min-height: 110px;
}

/* ───── Key-value lists ───── */

.page-site .kvs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 5px;
}

.page-site .kvs li {
    padding: 7px 10px;
    display: grid;
    grid-template-columns: minmax(100px, 130px) minmax(0, 1fr);
    gap: 10px;
}

.page-site .label {
    font-size: 11px;
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
}

.page-site .value {
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ───── Host reputation ───── */

.page-site .host-card-top,
.page-site .host-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.page-site .host-reputation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.06);
}

.page-site .rep-safe { color: var(--good); }
.page-site .rep-watch { color: var(--sv-gold); }
.page-site .rep-risky { color: var(--sv-danger); }
.page-site .rep-unknown { color: var(--sv-text-soft); }

/* ───── Tags ───── */

.page-site .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.page-site .tag,
.page-site .signal-tag {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    transition: transform .18s ease, border-color .18s ease;
}

.page-site .tag:hover,
.page-site .signal-tag:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--sv-violet) 28%, var(--sv-line));
}

/* ───── Related domains ───── */

.page-site .related-card {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.page-site .related-inline-section {
    width: var(--sv-shell);
    margin: 0 auto 28px;
    display: grid;
    gap: 14px;
}

.page-site .related-inline-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
}

.page-site .related-inline-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px 6px;
    border-bottom: 1px solid var(--sv-line);
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.page-site .related-inline-item:hover {
    border-color: color-mix(in srgb, var(--sv-blue) 38%, var(--sv-line));
    background: rgba(78, 110, 242, 0.04);
    transform: translateX(4px);
}

html[data-theme="dark"] .page-site .related-inline-item:hover {
    background: rgba(49, 231, 255, 0.04);
}

.page-site .related-inline-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex: 0 0 30px;
}

.page-site .related-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    object-fit: cover;
    object-position: top center;
    background: linear-gradient(135deg, rgba(78, 110, 242, 0.18), rgba(140, 92, 255, 0.20), rgba(255, 90, 185, 0.18));
    border: 1px solid var(--sv-line);
}

.page-site .related-body {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.page-site .snapshot-value,
.page-site .host-card-top strong,
.page-site .related-domain {
    overflow-wrap: anywhere;
}

/* ───── Safe view modal ───── */

.page-site .modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 20px;
    background: rgba(8, 13, 26, 0.72);
    backdrop-filter: blur(8px);
}

.page-site .modal-content {
    width: min(1200px, 100%);
    height: min(86vh, 820px);
    margin: 0 auto;
}

.page-site .safe-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 16px;
    background: #fff;
}

.page-site .close {
    position: absolute;
    right: 18px;
    top: 14px;
    z-index: 2;
    font-size: 28px;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background-color .18s ease, transform .18s ease;
}

.page-site .close:hover {
    background: rgba(255, 93, 116, 0.16);
    transform: scale(1.1);
}

/* ───── Animations ───── */

@keyframes siteview-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .page-site .hero-shell,
    .page-site .strip-tile,
    .page-site .card,
    .page-site .progress-fill,
    .page-site .big-btn {
        animation: none !important;
        transition: none !important;
    }
}

/* ───── Responsive ───── */

@media (max-width: 1180px) {
    .page-site .hero-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .page-site .masonry-cards {
        columns: 1;
    }

    .page-site .report-row,
    .page-site .report-top,
    .page-site .report-browser,
    .page-site .detail-grid {
        grid-template-columns: 1fr;
    }

    .page-site .host-card-grid,
    .page-site .related-grid,
    .page-site .related-inline-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .page-site .hero-shell {
        grid-template-columns: 1fr;
    }

    .page-site .profile-shot {
        min-height: 168px;
        max-height: 190px;
    }

    .page-site .summary-radar-grid,
    .page-site .snapshot-grid,
    .page-site .analysis-stat-grid,
    .page-site .browser-score-grid,
    .page-site .summary-metrics,
    .page-site .uptime-summary,
    .page-site .host-card-grid,
    .page-site .related-grid,
    .page-site .related-inline-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-site .kvs li {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .page-site {
        --sv-shell: min(1280px, calc(100% - 16px));
        --sv-radius: 20px;
    }

    .page-site .hero-shell {
        margin-top: 14px;
        padding: 14px;
        gap: 14px;
    }

    .page-site .profile-shot {
        min-height: 136px;
        max-height: 150px;
    }

    .page-site .profile-name {
        font-size: 29px;
    }

    .page-site .hero-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-site .summary-radar-grid,
    .page-site .snapshot-grid,
    .page-site .analysis-stat-grid,
    .page-site .browser-score-grid,
    .page-site .summary-metrics,
    .page-site .uptime-summary,
    .page-site .host-card-grid,
    .page-site .related-grid,
    .page-site .related-inline-list,
    .page-site .report-row,
    .page-site .report-top,
    .page-site .report-browser,
    .page-site .detail-grid {
        grid-template-columns: 1fr;
    }

    .page-site .hero-strip {
        gap: 10px;
    }

    .page-site .card,
    .page-site .strip-tile {
        padding: 14px;
    }

    .page-site .card h2 {
        font-size: 17px;
    }

    .page-site .radar-board {
        width: min(100%, 220px);
    }

    .page-site .radar-core {
        inset: 42px;
    }

    .page-site .radar-core strong {
        font-size: 40px;
    }

    .page-site .profile-buttons {
        grid-template-columns: 1fr;
    }

    .page-site .big-btn {
        width: 100%;
        justify-content: center;
    }

    .page-site .modal {
        padding: 10px;
    }

    .page-site .modal-content {
        height: 88vh;
    }
}