:root {

    --bg: #ffffff;
    --surface: #ffffff;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: #eef2f7;
    --primary: #4f46e5;
	--sidebar-bg: #f8fafc;
	--sidebar-active-bg: #eef2ff;
	--sidebar-active-text: #4f46e5;
}

@media (prefers-color-scheme: dark) {

    :root {

        --bg: #020617;
        --surface: #0f172a;
        --text: #f8fafc;
        --text-muted: #94a3b8;
        --border: #334155;
        --primary: #3b82f6;
    }
}

/* ======================================================
THEMES
====================================================== */

html.theme-light {
    --bg: #ffffff;
    --surface: #ffffff;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: #eef2f7;
    --primary: #4f46e5;
}

html.theme-dark {
    --bg: #020617;
    --surface: #0f172a;
    --text: #f8fafc;
    --text-muted: #94a3b8;
    --border: #334155;
    --primary: #3b82f6;	
	--sidebar-bg: #0f172a;
	--sidebar-active-bg: #1e293b;
	--sidebar-active-text: #60a5fa;

}

/* Bootstrap override */

.text-muted {
    color: var(--text-muted) !important;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    cursor: pointer;
    transition: .15s ease;
}

.theme-toggle:hover {
    border-color: var(--primary);
}

.theme-toggle i {
    font-size: .9rem;
    color: var(--text-muted);
}

/* ======================================================
END OF THMES
====================================================== */

html {
    font-size: 14px;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        sans-serif;

}

.sidebar {
    min-height: 100vh;
    background-color: #ffffff;
    border-right: 1px solid #dee2e6;
}

.sidebar .nav-link {
    color: #495057;
    border-radius: 0.375rem;
    margin: 0.125rem 0.5rem;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
    background-color: #f1f3f5;
    color: #0d6efd;
}

.tool-card {
    text-decoration: none;
    color: inherit;
}

.tool-card .card {
    border: 1px solid #e9ecef;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.tool-card:hover .card {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

.card,
.card-header,
.card-body,
.card ul.list-group,
.card ul.list-group li {

    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.card {
    border-radius: 18px !important;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow:
        0 2px 10px rgba(0,0,0,.04);
}

.card-header {
    font-weight: 600;
    padding: 16px 20px;
}

.card-body {
    padding: 20px;
}


.input-with-icon {
    position: relative;
}

.input-with-icon input {
    padding-right: 3rem;
}

.input-with-icon button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    border: none;
    background: transparent;
    color: #495057;
    padding: 0 0.75rem;
}

.copy-btn {
    border: none;
    background: none;
    color: #0d6efd;
    padding: 0;
    margin-left: 0.25rem;
    font-size: 1rem;
    cursor: pointer;
}

.dns-card .card-body {
    padding: 0.2rem;
}

ul.list-group.list-group-flush > li.list-group-item.grouponline {
    background-color: #293D5E !important;
    color: #ffffff !important;
}

ul.list-group.list-group-flush > li.list-group-item.grouponline strong,
ul.list-group.list-group-flush > li.list-group-item.grouponline * {
    color: #ffffff !important;
}

.card.ns-special {
    background-color: #293D5E !important;
    color: #ffffff !important;
    border-color: #293D5E !important;
}

.card.ns-special .card-header,
.card.ns-special .card-body,
.card.ns-special .list-group,
.card.ns-special .list-group-item {
    background-color: #293D5E !important;
    color: #ffffff !important;
    border-color: #293D5E !important;
}

/* ======================================================
SPF TREE
====================================================== */

.spf-tree {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}

.spf-tree ul {
    list-style: none;
    margin: 0;
    padding-left: 18px;
    position: relative;
}

.spf-tree ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 6px;
    bottom: 0;
    border-left: 1px solid #dee2e6;
}

.spf-tree li {
    position: relative;
    margin: 4px 0;
}

.spf-tree li::before {
    content: '';
    position: absolute;
    top: 12px;
    left: -12px;
    width: 12px;
    border-top: 1px solid #dee2e6;
}

/* ======================================================
MODERN NAVIGATION
====================================================== */

.modern-navbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.modern-navbar-inner {
    max-width: none;
    width: 100%;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

.brand:hover {
    color: var(--text);
}

.modern-nav-links {
    display: flex;
    gap: 24px;
}

.modern-nav-links a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
}

.modern-nav-links a:hover {
    color: var(--primary);
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ======================================================
HERO
====================================================== */

.hero {
    padding: 80px 0 60px;
}

.hero-content {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

.hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 2rem;
}

.hero-search {
    max-width: 700px;
    margin: auto;
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
}

.hero-search input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text);
    padding: 18px 24px;
    font-size: 1.05rem;
}

.hero-search input:focus {
    outline: none;
}

.hero-search button {
    border: none;
    background: var(--primary);
    color: white;
    width: 70px;
}

.hero-features {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.hero-features span {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: .9rem;
}

/* ======================================================
INVALID LOOKUP
====================================================== */

.invalid-lookup {
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 72px 20px;
}

.invalid-lookup-card {
    width: min(760px, 100%);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, .07);
}

.invalid-lookup-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(239, 68, 68, .1);
    color: #dc2626;
    font-size: 1.25rem;
}

.invalid-lookup-eyebrow {
    margin: 0 0 8px;
    color: #dc2626;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.invalid-lookup h1 {
    margin: 0 0 10px;
    font-size: 1.65rem;
    font-weight: 800;
}

.invalid-lookup-content > p:not(.invalid-lookup-eyebrow) {
    max-width: 590px;
    margin: 0 0 18px;
    color: var(--text-muted);
    line-height: 1.6;
}

.invalid-lookup-value {
    display: inline-flex;
    max-width: 100%;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(239, 68, 68, .2);
    border-radius: 12px;
    background: rgba(239, 68, 68, .06);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.invalid-lookup-search {
    max-width: 100%;
    margin: 0;
}

@media (max-width: 640px) {
    .invalid-lookup {
        padding: 40px 16px;
    }

    .invalid-lookup-card {
        grid-template-columns: 1fr;
        padding: 22px;
    }
}

/* ======================================================
LATEST RELEASE
====================================================== */

.release-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px;
    max-width: 900px;
    margin: auto;
}

.release-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
}

.release-label {
    color: var(--text-muted);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ======================================================
DOMAIN HERO
====================================================== */

.domain-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 24px;
}

.domain-hero h1 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 800;
}

.domain-badges {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-badge {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
}

.hero-badge.success {
    background: rgba(34,197,94,.15);
    color: #16a34a;
}

/* ======================================================
MODERN TABS
====================================================== */

.nav-tabs {
    border-bottom: none;
    gap: 8px;
}

.nav-tabs .nav-link {
    border: 1px solid var(--border);
    border-radius: 12px !important;
    background: var(--surface);
    color: var(--text-muted);
    padding: 10px 16px;
}

.nav-tabs .nav-link.active {
    background: var(--primary);
    color: white !important;
    border-color: var(--primary);
}

.nav-tabs .nav-link:hover {
    border-color: var(--primary);
}


/* ======================================================
V4 LAYOUT
====================================================== */

.v4-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    min-height: calc(100vh - 70px);
}

.v4-layout-with-secondary {
    grid-template-columns: 240px 190px 1fr;
}


.v4-sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    padding: 16px 12px;
    border-radius: 0;
    position: sticky;
    top: 70px;
    height: calc(100vh - 70px);
    overflow-y: auto;
}

.v4-sidebar-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 4px;
	color: var(--text-muted);
    font-weight: 500;
    text-decoration: none;
}

.v4-sidebar-link:hover {
    background: var(--sidebar-active-bg);
    color: var(--text);
    text-decoration: none;
}

.v4-sidebar-link.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
}

.v4-secondary-nav {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 18px 12px;
    position: sticky;
    top: 70px;
    height: calc(100vh - 70px);
    overflow-y: auto;
}

.v4-secondary-label {
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 700;
    margin: 0 10px 10px;
    text-transform: uppercase;
}

.v4-secondary-link {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 9px 10px;
    border-left: 2px solid transparent;
    color: var(--text-muted);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
}

.v4-secondary-link:hover {
    border-left-color: var(--primary);
    color: var(--text);
    text-decoration: none;
}

.v4-secondary-link.active {
    border-left-color: var(--primary);
    color: var(--primary);
    font-weight: 700;
}



.v4-content {
    min-width: 0;
}

.v4-nav {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--text);
}

.v4-nav:hover {
    background: var(--surface-alt);
}

.v4-nav.active {
    background: var(--primary);
    color: white;
}

.v4-content {
    padding: 24px;
}

/* ======================================================
DOMAIN TOOLBAR
====================================================== */

.domain-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.domain-toolbar-search {
    flex: 1;
    display: flex;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
}

.domain-toolbar-search input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text);
    padding: 12px 16px;
}

.domain-toolbar-search input:focus {
    outline: none;
}

.domain-toolbar-search button {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 0 16px;
}

.domain-toolbar-actions {
    display: flex;
    gap: 10px;
}

.lookup-settings {
    position: relative;
    flex: 0 0 auto;
}

.lookup-settings-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lookup-settings-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: min(260px, calc(100vw - 48px));
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.lookup-settings-panel label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.lookup-settings-panel select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    padding: 10px 12px;
}

.toolbar-btn {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 14px;
	text-decoration: none;
}

/* ======================================================
OVERVIEW HEADER
====================================================== */

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
}

.overview-header h1 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 700;
}

.overview-meta {
    color: var(--text-muted);
    margin-top: 8px;
}

.overview-score {
    text-align: center;
}

.score-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 6px solid #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
}

.score-label {
    margin-top: 8px;
    color: var(--text-muted);
	text-align: center;
	width: 96px;
}

.overview-meta a {
    color: inherit;
    text-decoration: none;
}

.overview-meta a:hover {
    color: var(--primary);
}

/* ======================================================
OVERVIEW STATS
====================================================== */

.overview-grid {
    display: flex;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.overview-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    flex: 1;
}

.overview-stat-good {
    border-color: #86efac;
}

.overview-stat-warn {
    border-color: #facc15;
}

.overview-stat-fail {
    border-color: #fca5a5;
}

.overview-stat-muted {
    border-color: #cbd5e1;
}

.overview-stat-label {
    font-size: .75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.overview-stat-value {
    font-size: .95rem;
    font-weight: 600;
}

/* ======================================================
DNS RECORDS PANEL
====================================================== */

.records-panel {
    margin-top: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.records-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
}

.records-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.record-tabs {
    display: flex;
    gap: 24px;
    padding: 0 24px 16px;
    border-bottom: 1px solid var(--border);
}

.record-tabs button {
    border: none;
    background: none;
    color: var(--text-muted);
    padding: 0;
}

.record-tabs button.active {
    color: var(--primary);
    font-weight: 600;
}

.records-content {
    padding: 24px;
}

/* ======================================================
DNS TABLES
====================================================== */

.dns-record-section {
    margin-bottom: 32px;
}

.dns-record-section h3 {
    font-size: 1rem;
    margin-bottom: 12px;
}

.dns-table {
    width: 100%;
    border-collapse: collapse;
}

.dns-table th {
    text-align: left;
    color: var(--text-muted);
    font-size: .85rem;
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.dns-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.record-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    margin-right: 8px;
}
.record-badge.spf {
    background: rgba(59,130,246,.12);
    color: #2563eb;
}

.record-badge.dmarc {
    background: rgba(245,158,11,.12);
    color: #d97706;
}

.record-badge.dkim {
    background: rgba(34,197,94,.12);
    color: #16a34a;
}

.record-badge.bimi {
    background: rgba(139,92,246,.12);
    color: #7c3aed;
}

.record-badge.cloudflare {
    background: rgba(59,130,246,.12);
    color: #2563eb;
}

.snapshot-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.snapshot-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: .75rem;
    font-weight: 600;
}

/* ======================================================
HISTORY OVERVIEW
====================================================== */

.history-overview {
    display: grid;
    gap: 20px;
}

.history-heading {
    margin-bottom: 0;
}

.history-snapshots {
    display: grid;
    gap: 20px;
}

.history-snapshot-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.history-snapshot-stat {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.history-snapshot-stat > div {
    min-width: 0;
}

.history-snapshot-stat span:not(.history-metric-icon),
.history-snapshot-stat small {
    display: block;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.25;
}

.history-snapshot-stat strong {
    display: block;
    color: var(--text);
    font-size: clamp(1.15rem, 1.8vw, 1.55rem);
    font-weight: 800;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.history-snapshot-date-stat strong {
    font-size: 1.2rem;
    line-height: 1.18;
}

.history-snapshot-stat span:not(.history-metric-icon) {
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.history-snapshot-stat small {
    margin-top: 6px;
}

.history-snapshot-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.history-snapshot-search label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: var(--muted);
}

.history-snapshot-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: .92rem;
    text-align: left;
}

.history-snapshot-search input::placeholder {
    color: var(--muted);
}

.history-snapshot-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
}

.history-snapshot-search button:hover {
    color: var(--primary);
}

.history-snapshot-search > span {
    color: var(--text-soft);
    font-size: .78rem;
    font-weight: 500;
    white-space: nowrap;
}

.history-snapshot-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: var(--muted);
    font-size: .9rem;
}

.history-snapshot-toolbar p {
    margin: 0;
}

.history-snapshot-toolbar span {
    flex: 0 0 auto;
    color: var(--text-soft);
    font-size: .78rem;
    font-weight: 700;
}

.history-snapshot-timeline {
    position: relative;
    display: grid;
    gap: 10px;
    margin-left: 0;
}

.history-snapshot-timeline::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 20px;
    width: 2px;
    background: var(--border);
}

.history-snapshot-item {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 16px;
}

.history-snapshot-item.monitoring-snapshot-target {
    border-color: transparent !important;
    box-shadow: none;
}

.history-snapshot-marker {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding-top: 14px;
}

.history-snapshot-marker span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary);
    font-size: .82rem;
    font-weight: 800;
}

.history-snapshot-item:first-child .history-snapshot-marker span {
    border-color: rgba(79, 70, 229, .35);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(79, 70, 229, .2);
}

.history-snapshot-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.history-snapshot-row {
    display: grid;
    grid-template-columns: minmax(150px, .75fr) minmax(240px, 1.3fr) minmax(230px, auto) 18px;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 18px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
}

.history-snapshot-row:hover {
    background: var(--surface-soft);
}

.history-snapshot-row:focus {
    outline: none;
}

.history-snapshot-row:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(79, 70, 229, .28);
}

.history-snapshot-card:has(.history-snapshot-row[aria-expanded="true"]) {
    border-color: rgba(79, 70, 229, .32);
    box-shadow: 0 14px 34px rgba(79, 70, 229, .08);
}

.history-snapshot-row[aria-expanded="true"] {
    background: rgba(79, 70, 229, .05);
}

.history-snapshot-row > i {
    color: var(--muted);
    transition: transform .2s ease;
}

.history-snapshot-row[aria-expanded="true"] > i {
    transform: rotate(90deg);
}

.history-snapshot-title {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.history-snapshot-title strong {
    color: var(--text);
    font-size: .95rem;
    font-weight: 800;
}

.history-snapshot-title small {
    color: var(--muted);
    font-size: .82rem;
}

.history-snapshot-title em {
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(79, 70, 229, .1);
    color: var(--primary);
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
}

.history-snapshot-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.history-snapshot-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.history-snapshot-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.history-snapshot-match-count {
    color: var(--primary);
}

.history-snapshot-meta .is-added,
.history-snapshot-legend .is-added {
    color: #16803c;
}

.history-snapshot-meta .is-removed,
.history-snapshot-legend .is-removed {
    color: #dc2626;
}

.history-snapshot-meta .is-changed,
.history-snapshot-legend .is-changed {
    color: #d97706;
}

.history-snapshot-records {
    padding: 18px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.history-snapshot-records h5 {
    color: var(--text-soft);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.history-snapshot-records .border.rounded {
    border-color: var(--border) !important;
    border-radius: 8px !important;
    background: var(--surface-soft);
    color: var(--text);
    font-size: .82rem;
    line-height: 1.55;
}

.history-snapshot-records .border.rounded strong {
    font-size: .82rem;
    font-weight: 800;
}

.history-snapshot-records .copy-btn {
    font-size: .78rem;
}

.history-snapshot-no-results {
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
}

.history-snapshot-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.history-snapshot-pagination button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: .82rem;
    font-weight: 800;
}

.history-snapshot-pagination button:hover:not(:disabled) {
    border-color: rgba(79, 70, 229, .32);
    color: var(--primary);
}

.history-snapshot-pagination button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.history-snapshot-pagination span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.history-snapshot-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

.history-snapshot-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.history-snapshot-legend i {
    font-size: .58rem;
}

.history-metric-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.history-metric-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.history-metric-card > div {
    min-width: 0;
}

.history-metric-card span:not(.history-metric-icon),
.history-metric-card small {
    display: block;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.25;
}

.history-metric-card span:not(.history-metric-icon) {
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.history-metric-card strong {
    display: block;
    color: var(--text);
    font-size: clamp(1.15rem, 1.8vw, 1.55rem);
    font-weight: 800;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.history-metric-card small {
    margin-top: 6px;
}

.history-metric-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.1rem;
}

.history-tone-indigo .history-metric-icon {
    color: #4f46e5;
    background: rgba(79, 70, 229, .1);
}

.history-tone-blue .history-metric-icon {
    color: #2563eb;
    background: rgba(37, 99, 235, .1);
}

.history-tone-green .history-metric-icon {
    color: #16a34a;
    background: rgba(22, 163, 74, .11);
}

.history-tone-red .history-metric-icon {
    color: #dc2626;
    background: rgba(220, 38, 38, .1);
}

.history-tone-amber .history-metric-icon {
    color: #d97706;
    background: rgba(217, 119, 6, .12);
}

.history-tone-soft .history-metric-icon {
    color: #64748b;
    background: rgba(100, 116, 139, .1);
}

.history-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.history-panel {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .04);
}

.history-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.history-panel-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
}

.history-panel-header p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: .86rem;
}

.history-panel-header > span,
.history-panel-header a {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.history-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 20px 0;
}

.history-summary-card {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--sidebar-bg);
}

.history-summary-card span {
    display: block;
    margin-bottom: 8px;
    font-size: .78rem;
    font-weight: 700;
}

.history-summary-card strong {
    font-size: 1.75rem;
    line-height: 1;
}

.history-summary-card.is-added {
    border-color: rgba(22, 163, 74, .24);
    background: rgba(22, 163, 74, .06);
}

.history-summary-card.is-added span,
.history-summary-card.is-added strong {
    color: #15803d;
}

.history-summary-card.is-removed {
    border-color: rgba(220, 38, 38, .24);
    background: rgba(220, 38, 38, .06);
}

.history-summary-card.is-removed span,
.history-summary-card.is-removed strong {
    color: #dc2626;
}

.history-summary-card.is-changed {
    border-color: rgba(217, 119, 6, .28);
    background: rgba(217, 119, 6, .07);
}

.history-summary-card.is-changed span,
.history-summary-card.is-changed strong {
    color: #b45309;
}

.history-summary-note {
    margin: 14px 20px 0;
    color: var(--text-muted);
    font-size: .9rem;
}

.history-panel-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding: 14px 20px;
    color: var(--primary);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    border-top: 1px solid var(--border);
}

.history-panel-link:hover,
.history-panel-header a:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.history-activity-list {
    display: grid;
}

.history-activity-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 14px minmax(130px, .75fr) minmax(180px, 1fr) max-content 16px;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}

.history-activity-row:last-child {
    border-bottom: 0;
}

.history-activity-row:hover {
    background: rgba(79, 70, 229, .045);
    color: inherit;
    text-decoration: none;
}

.history-activity-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .1);
}

.history-activity-main {
    min-width: 0;
}

.history-activity-main strong,
.history-activity-main span {
    display: block;
}

.history-activity-main strong {
    color: var(--text);
    font-size: .92rem;
}

.history-activity-main span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: .8rem;
}

.history-activity-badges {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.history-activity-badges span {
    padding: 4px 8px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    background: var(--sidebar-bg);
}

.history-activity-counts {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
    font-weight: 800;
}

.history-activity-counts .is-added {
    color: #15803d;
}

.history-activity-counts .is-removed {
    color: #dc2626;
}

.history-activity-counts .is-changed {
    color: #b45309;
}

.history-empty {
    padding: 18px 20px;
    color: var(--text-muted);
    font-size: .9rem;
}

.history-change-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 20px;
}

.history-change-card {
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.history-change-card span,
.history-change-card small {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.history-change-card strong {
    display: block;
    margin-top: 8px;
    color: var(--text);
    font-size: .88rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.history-change-card.is-added {
    border-color: rgba(22, 163, 74, .28);
    background: rgba(22, 163, 74, .04);
}

.history-change-card.is-added span,
.history-change-card.is-added small {
    color: #15803d;
}

.history-change-card.is-removed {
    border-color: rgba(220, 38, 38, .28);
    background: rgba(220, 38, 38, .04);
}

.history-change-card.is-removed span,
.history-change-card.is-removed small {
    color: #dc2626;
}

@media (max-width: 1200px) {
    .history-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .history-snapshot-row {
        grid-template-columns: minmax(145px, .7fr) minmax(200px, 1fr) 18px;
    }

    .history-snapshot-meta {
        grid-column: 2 / 3;
        justify-content: flex-start;
    }
}

@media (min-width: 769px) and (max-width: 1360px) {
    .history-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .history-metric-card {
        min-height: 112px;
        align-items: flex-start;
    }

    .history-metric-card strong,
    .history-snapshot-stat strong {
        font-size: clamp(1.25rem, 2.4vw, 1.75rem);
        overflow-wrap: normal;
        word-break: normal;
    }

    .history-metric-card.history-tone-blue strong,
    .history-snapshot-date-stat strong {
        font-size: 1.2rem;
        line-height: 1.18;
    }

    .history-metric-card.history-tone-blue small {
        max-width: 100%;
    }

    .history-activity-row {
        grid-template-columns: 14px minmax(160px, .7fr) minmax(240px, 1fr) max-content 16px;
        gap: 10px;
        padding-inline: 16px;
    }

    .history-activity-badges span {
        padding-inline: 7px;
    }

    .history-change-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-snapshot-row {
        grid-template-columns: minmax(0, 1fr) 18px;
        gap: 10px;
    }

    .history-snapshot-badges,
    .history-snapshot-meta {
        grid-column: 1 / 2;
    }

    .history-snapshot-meta {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

}

@media (max-width: 768px) {
    .history-metric-grid,
    .history-summary-cards,
    .history-change-preview-grid {
        grid-template-columns: 1fr;
    }

    .history-panel-header,
    .history-activity-row {
        align-items: flex-start;
    }

    .history-panel-header {
        flex-direction: column;
    }

    .history-activity-row {
        grid-template-columns: 14px minmax(0, 1fr) 16px;
    }

    .history-activity-badges,
    .history-activity-counts {
        grid-column: 2 / 3;
    }

    .history-snapshot-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .history-snapshot-timeline {
        margin-left: 0;
    }

    .history-snapshot-item {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
    }

    .history-snapshot-timeline::before {
        left: 16px;
    }

    .history-snapshot-marker span {
        width: 30px;
        height: 30px;
        font-size: .76rem;
    }

    .history-snapshot-row {
        padding: 14px;
    }

    .history-snapshot-search {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .history-snapshot-search > span {
        grid-column: 1 / -1;
    }
}

.copy-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.copy-record-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}

.copy-record-btn:hover {
    color: var(--primary);
}

.dnssec-digest {
    margin-top: 8px;
    font-family: monospace;
    font-size: 12px;
    word-break: break-all;
    color: var(--text-muted);
}

.zone-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.zone-grid strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
}

.domain-zone-workbench {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.domain-zone-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.domain-zone-card-wide {
    grid-column: 1 / -1;
}

.domain-zone-card-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.domain-zone-eyebrow {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.domain-zone-title {
    margin: 3px 0 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}

.domain-zone-list {
    display: grid;
    gap: 10px;
}

.domain-zone-list-row {
    min-width: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.domain-zone-list-row:first-child {
    padding-top: 0;
}

.domain-zone-list-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.domain-zone-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
}

.domain-zone-metric-grid-wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.domain-zone-metric-grid strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.domain-zone-metric-grid div {
    min-width: 0;
    word-break: break-word;
}

.domain-zone-note {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .88rem;
    line-height: 1.55;
}

.m365-summary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 18px;
    align-items: stretch;
}

.m365-tenant-primary {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.m365-tenant-name {
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 700;
}

.m365-tenant-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.m365-tenant-meta span {
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.2;
}

.m365-tenant-id strong,
.m365-service-evidence strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.m365-confidence-card {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 116px;
    border: 1px solid rgba(34, 197, 94, .28);
    border-radius: 8px;
    background: rgba(34, 197, 94, .07);
}

.m365-confidence-value {
    color: #166534;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.m365-confidence-label {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.m365-service-list {
    display: grid;
    gap: 12px;
}

.m365-service-row {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr);
    gap: 18px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--background);
}

.m365-service-name {
    color: var(--text);
    font-weight: 700;
}

.m365-service-description,
.m365-service-evidence {
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.45;
}

.m365-service-description {
    margin-top: 3px;
}

.m365-service-evidence {
    min-width: 0;
}

.m365-service-evidence span {
    display: block;
}

.m365-service-evidence code {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    padding: 4px 7px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: .78rem;
    white-space: normal;
    word-break: break-word;
}

.diff-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 1rem 1.25rem;
}

.diff-card-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.snapshot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.25rem 0;
}

.diff-card-header i,
.snapshot-header i {
    transition: transform .2s ease;
}

.provider-category-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.domain-card-title {
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.v4-layout:not(.account-layout) .v4-content .card-body > h3 {
    margin: 0 0 16px;
    color: var(--text);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
}

.info-block strong {
    display: block;
    margin-bottom: .25rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
}

.info-block div {
    word-break: break-word;
}

.info-section-title {
    margin: 1.5rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ======================================================
PUBLIC STATISTICS
====================================================== */

.stats-page {
    display: grid;
    gap: 24px;
    padding-top: 22px !important;
    padding-bottom: 42px !important;
}

.stats-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    padding: 30px;
    border: 0;
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 18%, rgba(14, 165, 233, .22), transparent 28%),
        radial-gradient(circle at 72% 86%, rgba(124, 58, 237, .18), transparent 34%),
        linear-gradient(135deg, #f8fafc, #edf4ff 52%, #f7f2ff);
    box-shadow: 0 24px 70px rgba(79, 70, 229, .11);
}

.stats-eyebrow {
    margin-bottom: 10px;
    color: var(--primary);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.stats-hero h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 850;
}

.stats-hero p {
    max-width: 620px;
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 1.05rem;
}

.stats-hero-total {
    min-width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 22px;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

html.theme-dark .stats-hero-total {
    background: rgba(15, 23, 42, .72);
}

.stats-hero-total span {
    color: var(--text);
    font-size: 2.4rem;
    font-weight: 850;
    line-height: 1;
}

.stats-hero-total small {
    margin-top: 8px;
    color: var(--text-muted);
    font-weight: 650;
}

.stats-metric-grid,
.stats-grid {
    display: grid;
    gap: 18px;
}

.stats-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.stats-panel,
.stats-metric-card {
    border: 1px solid rgba(226, 232, 240, .82);
    border-radius: 22px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .07);
}

.stats-panel {
    min-height: 100%;
    padding: 22px;
}

.stats-grid-feature .stats-panel:first-child {
    min-height: 100%;
}

.stats-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.stats-panel-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.stats-panel-header p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: .9rem;
}

.stats-metric-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 150px;
    padding: 20px;
}

.stats-metric-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .95;
    background: var(--metric-bg);
}

.stats-metric-card::after {
    content: '';
    position: absolute;
    right: -32px;
    bottom: -42px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--metric-color), transparent 82%);
}

.stats-metric-card span,
.stats-metric-card strong,
.stats-metric-card small,
.stats-dot-map {
    position: relative;
    z-index: 1;
}

.stats-metric-card span {
    display: block;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.stats-metric-card strong {
    display: block;
    margin-top: 14px;
    color: var(--text);
    font-size: 2.35rem;
    line-height: 1;
}

.stats-metric-card small {
    display: block;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: .86rem;
    font-weight: 650;
}

.stats-dot-map {
    position: relative;
    z-index: 1;
    width: 82px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
}

.stats-dot-map i {
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .78);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
}

.stats-dot-map i.is-filled {
    background: var(--metric-color);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--metric-color), transparent 72%);
}

.metric-indigo {
    --metric-color: #4f46e5;
    --metric-bg: linear-gradient(135deg, #eef2ff, #ffffff);
    border-color: rgba(79, 70, 229, .25);
}

.metric-sky {
    --metric-color: #0ea5e9;
    --metric-bg: linear-gradient(135deg, #e0f2fe, #ffffff);
    border-color: rgba(14, 165, 233, .25);
}

.metric-violet {
    --metric-color: #7c3aed;
    --metric-bg: linear-gradient(135deg, #f3e8ff, #ffffff);
    border-color: rgba(124, 58, 237, .25);
}

.metric-slate {
    --metric-color: #64748b;
    --metric-bg: linear-gradient(135deg, #f1f5f9, #ffffff);
    border-color: rgba(100, 116, 139, .25);
}

.stats-provider-cloud {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.stats-provider-card {
    position: relative;
    overflow: hidden;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, .78);
    border-radius: 18px;
    background: var(--provider-bg, #f8fafc);
}

.stats-provider-card::after {
    content: '';
    position: absolute;
    right: -22px;
    top: -22px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .62);
}

.stats-provider-card:nth-child(6n+1) {
    --provider-bg: linear-gradient(135deg, #eef2ff, #dbeafe);
}

.stats-provider-card:nth-child(6n+2) {
    --provider-bg: linear-gradient(135deg, #ecfeff, #e0f2fe);
}

.stats-provider-card:nth-child(6n+3) {
    --provider-bg: linear-gradient(135deg, #f5f3ff, #fae8ff);
}

.stats-provider-card:nth-child(6n+4) {
    --provider-bg: linear-gradient(135deg, #f0f9ff, #f8fafc);
}

.stats-provider-card:nth-child(6n+5) {
    --provider-bg: linear-gradient(135deg, #f8fafc, #e2e8f0);
}

.stats-provider-card span {
    position: relative;
    z-index: 1;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .06em;
}

.stats-provider-card strong {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--text);
    font-size: .95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.stats-provider-card small {
    position: relative;
    z-index: 1;
    color: var(--text-muted);
    font-weight: 750;
}

.stats-list {
    display: grid;
    gap: 12px;
}

.stats-list.compact {
    gap: 12px;
}

.stats-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, .78);
    border-radius: 16px;
    background: var(--list-bg, rgba(248, 250, 252, .8));
}

.stats-list-row:nth-child(5n+1) {
    --list-bg: linear-gradient(135deg, #f8fafc, #eef2ff);
}

.stats-list-row:nth-child(5n+2) {
    --list-bg: linear-gradient(135deg, #f8fafc, #ecfeff);
}

.stats-list-row:nth-child(5n+3) {
    --list-bg: linear-gradient(135deg, #f8fafc, #f5f3ff);
}

.stats-list-row:nth-child(5n+4) {
    --list-bg: linear-gradient(135deg, #f8fafc, #e0f2fe);
}

.stats-list-row:nth-child(5n+5) {
    --list-bg: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.stats-list-rank {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #4f46e5 !important;
    font-size: .78rem !important;
    font-weight: 850;
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .12);
}

.stats-list-row strong {
    display: block;
    font-size: .95rem;
    overflow-wrap: anywhere;
}

.stats-list-row span {
    color: var(--text-muted);
    font-size: .82rem;
}

.stats-count {
    flex: 0 0 auto;
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid rgba(79, 70, 229, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .68);
    color: var(--text) !important;
    font-size: .85rem !important;
    font-weight: 800;
}

.stats-record-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.stats-record-card {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid rgba(226, 232, 240, .78);
    border-radius: 18px;
    background: var(--record-bg, #f8fafc);
}

.stats-record-card::after {
    content: '';
    position: absolute;
    right: -24px;
    bottom: -34px;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
}

.stats-record-card:nth-child(1) {
    --record-bg: linear-gradient(135deg, #eef2ff, #ffffff);
}

.stats-record-card:nth-child(2) {
    --record-bg: linear-gradient(135deg, #e0f2fe, #ffffff);
}

.stats-record-card:nth-child(3) {
    --record-bg: linear-gradient(135deg, #f5f3ff, #ffffff);
}

.stats-record-card:nth-child(4) {
    --record-bg: linear-gradient(135deg, #ecfeff, #ffffff);
}

.stats-record-card:nth-child(5) {
    --record-bg: linear-gradient(135deg, #f1f5f9, #ffffff);
}

.stats-record-card span,
.stats-record-card strong,
.stats-record-card small {
    position: relative;
    z-index: 1;
}

.stats-record-card span {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.stats-record-card strong {
    color: var(--text);
    font-size: 2rem;
    line-height: 1;
}

.stats-record-card small {
    color: var(--text-muted);
    font-weight: 700;
}

/* Open, editorial stats layout */
.stats-page {
    width: 100%;
    max-width: 1180px;
    gap: 34px;
    margin-inline: auto;
}

.stats-hero {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    padding: 42px 46px;
    border-radius: 0;
    background:
        radial-gradient(circle at 82% 22%, rgba(56, 189, 248, .35), transparent 27%),
        radial-gradient(circle at 58% 86%, rgba(124, 58, 237, .22), transparent 32%),
        linear-gradient(135deg, #f8fafc 0%, #eef6ff 48%, #f6f0ff 100%);
    box-shadow: none;
}

.stats-hero::before {
    content: '';
    position: absolute;
    right: 12%;
    top: 30px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(79, 70, 229, .16);
    border-radius: 50%;
}

.stats-hero::after {
    content: '';
    position: absolute;
    right: 5%;
    bottom: -78px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .42);
}

.stats-hero > div {
    position: relative;
    z-index: 1;
}

.stats-eyebrow {
    color: #4f46e5;
}

.stats-hero h1 {
    max-width: 720px;
    font-size: clamp(3.2rem, 8vw, 7.6rem);
    line-height: .88;
    letter-spacing: 0;
}

.stats-hero p {
    max-width: 520px;
    margin-top: 22px;
}

.stats-hero-total {
    align-self: end;
    min-width: 0;
    width: 185px;
    height: 185px;
    border: 0;
    border-radius: 50%;
    background: #111827;
    box-shadow: 0 24px 56px rgba(15, 23, 42, .18);
}

.stats-hero-total span,
.stats-hero-total small {
    color: #fff;
}

.stats-hero-total span {
    font-size: 2.75rem;
}

.stats-metric-grid {
    grid-template-columns: 1.25fr 1fr 1.05fr .95fr;
    align-items: stretch;
    gap: 14px;
    margin-top: -70px;
    position: relative;
    z-index: 2;
}

.stats-metric-card {
    min-height: 178px;
    border: 0;
    border-radius: 26px;
    box-shadow: 0 26px 58px rgba(15, 23, 42, .09);
}

.stats-metric-card:nth-child(even) {
    transform: translateY(28px);
}

.stats-metric-card strong {
    font-size: clamp(2.25rem, 4vw, 3.45rem);
}

.stats-dot-map {
    align-self: end;
}

.stats-atlas {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding-top: 28px;
}

.stats-section-heading {
    position: sticky;
    top: 92px;
}

.stats-section-heading span {
    display: block;
    margin-bottom: 10px;
    color: #4f46e5;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.stats-section-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.45rem, 3vw, 2.6rem);
    line-height: 1;
}

.stats-section-heading p {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: .95rem;
}

.stats-section-heading.compact {
    position: static;
}

.stats-section-heading.compact h2 {
    font-size: 1.08rem;
    line-height: 1.18;
}

.stats-section-heading.compact p {
    margin-top: 6px;
    font-size: .86rem;
}

.stats-provider-cloud {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

.stats-provider-card {
    grid-column: span 3;
    min-height: 136px;
    border: 0;
    border-radius: 28px;
    box-shadow: none;
}

.stats-provider-card:nth-child(1),
.stats-provider-card:nth-child(2) {
    grid-column: span 4;
    min-height: 188px;
}

.stats-provider-card:nth-child(3),
.stats-provider-card:nth-child(4),
.stats-provider-card:nth-child(5) {
    grid-column: span 4;
}

.stats-provider-card:nth-child(1) strong,
.stats-provider-card:nth-child(2) strong {
    font-size: 1.45rem;
}

.stats-provider-card small {
    font-size: .92rem;
}

.stats-record-strip {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 26px 0;
    border-block: 1px solid rgba(148, 163, 184, .22);
}

.stats-record-cards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.stats-record-card {
    min-height: 118px;
    border: 0;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: none;
}

.stats-record-card strong {
    margin: 8px 0;
    font-size: 1.7rem;
}

.stats-directory {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    align-items: start;
}

.stats-list-block {
    min-width: 0;
}

.stats-list {
    gap: 0;
    margin-top: 18px;
}

.stats-list-row {
    min-height: 0;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
    border-radius: 0;
    background: transparent;
}

.stats-list-row strong {
    font-size: .92rem;
}

.stats-list-rank {
    width: auto;
    height: auto;
    color: #7c3aed !important;
    background: transparent;
    box-shadow: none;
}

.stats-count {
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, #4f46e5, transparent 88%);
}

.stats-metric-card:nth-child(even) {
    transform: none;
}

.stats-metric-grid {
    align-items: stretch;
}

.stats-provider-cloud {
    grid-template-columns: 1.35fr 1fr 1fr;
    align-items: stretch;
    gap: 16px;
}

.stats-provider-card,
.stats-provider-card:nth-child(1),
.stats-provider-card:nth-child(2),
.stats-provider-card:nth-child(3),
.stats-provider-card:nth-child(4),
.stats-provider-card:nth-child(5) {
    grid-column: auto;
    min-height: 156px;
    border-radius: 34px;
    background: var(--provider-bg);
    box-shadow: 0 24px 54px rgba(15, 23, 42, .08);
}

.stats-provider-card:nth-child(1) {
    grid-row: span 2;
    min-height: 328px;
    padding: 24px;
}

.stats-provider-card:nth-child(1)::before {
    content: '';
    position: absolute;
    inset: auto 18px 18px auto;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .48);
}

.stats-provider-card:nth-child(1) strong {
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: .98;
}

.stats-provider-card span {
    width: max-content;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .58);
}

.stats-provider-card small {
    color: color-mix(in srgb, var(--text), transparent 26%);
}

.stats-record-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.stats-record-card {
    min-width: 0;
    min-height: 96px;
    padding: 14px 12px;
    border-radius: 22px;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .045);
}

.stats-record-card span {
    width: max-content;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .58);
}

.stats-record-card strong {
    margin: 10px 0 5px;
    font-size: clamp(1.45rem, 2vw, 1.9rem);
}

.stats-record-card small {
    font-size: .76rem;
    line-height: 1.15;
}

.stats-list-block {
    display: grid;
    grid-template-rows: 112px auto;
}

.stats-list-block .stats-section-heading.compact {
    min-height: 112px;
}

.stats-list {
    margin-top: 0;
}

.stats-list.compact {
    gap: 0;
}

/* Shared hero baseline for stats and monitoring */
.stats-page,
.monitoring-page {
    gap: 36px;
}

.stats-hero,
.monitoring-hero {
    min-height: 300px;
    padding: clamp(32px, 5vw, 62px);
    align-items: flex-end;
    background:
        linear-gradient(90deg, #f4f0e8 0 72%, transparent 72%),
        linear-gradient(135deg, #e7dfd2, #f8f6f1);
}

.stats-hero::before,
.monitoring-hero::before {
    content: none;
}

.stats-hero::after,
.monitoring-hero::after {
    content: none;
}

.stats-eyebrow,
.monitoring-eyebrow {
    color: #141411;
    font-size: .72rem;
    letter-spacing: .16em;
}

.stats-hero h1,
.monitoring-hero h1 {
    color: #141411;
    font-size: clamp(4rem, 10vw, 8.8rem);
    font-weight: 900;
    line-height: .82;
}

.stats-hero p,
.monitoring-hero p {
    max-width: 560px;
    margin-top: 22px;
    color: #6f675d;
    font-size: 1.05rem;
}

.stats-hero-total,
.monitoring-status-card {
    width: 190px;
    min-width: 190px;
    height: 190px;
    padding: 24px;
    align-items: flex-start;
    border: 0;
    border-radius: 0;
    background: #141411;
    box-shadow: none;
}

.stats-hero-total span,
.monitoring-status-card strong {
    color: var(--primary);
    font-size: 3rem;
    line-height: 1;
}

.stats-hero-total small,
.monitoring-status-card span,
.monitoring-status-card small {
    color: rgba(255, 255, 255, .78);
    text-transform: uppercase;
    letter-spacing: .08em;
}

@media (min-width: 992px) {
    .stats-hero,
    .monitoring-hero {
        min-height: 250px;
        padding: 34px 42px;
    }

    .stats-hero h1,
    .monitoring-hero h1 {
        font-size: clamp(3.6rem, 7vw, 6.8rem);
    }

    .stats-hero p,
    .monitoring-hero p {
        margin-top: 14px;
    }

    .stats-hero-total,
    .monitoring-status-card {
        width: 150px;
        min-width: 150px;
        height: 150px;
        padding: 20px;
    }

    .stats-hero-total span,
    .monitoring-status-card strong {
        font-size: 2.45rem;
    }
}

/* Mature, technical stats theme */
.stats-page {
    color: #111827;
}

.stats-hero {
    border-top: 1px solid rgba(15, 23, 42, .12);
    border-bottom: 1px solid rgba(15, 23, 42, .12);
    background:
        linear-gradient(135deg, #f8fafc 0%, #eef2f7 58%, #e7edf5 100%);
}

.stats-hero::before,
.stats-hero::after,
.stats-metric-card::after,
.stats-provider-card::after,
.stats-provider-card:nth-child(1)::before,
.stats-record-card::after {
    content: none;
}

.stats-eyebrow,
.stats-section-heading span {
    color: #0f766e;
}

.stats-hero-total {
    border-radius: 18px;
    background: #0f172a;
}

.stats-metric-card {
    border-radius: 18px;
    box-shadow: none;
}

.metric-indigo {
    --metric-color: #334155;
    --metric-bg: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}

.metric-sky {
    --metric-color: #0369a1;
    --metric-bg: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.metric-violet {
    --metric-color: #4338ca;
    --metric-bg: linear-gradient(135deg, #eef2ff, #e0e7ff);
}

.metric-slate {
    --metric-color: #0f766e;
    --metric-bg: linear-gradient(135deg, #f0fdfa, #ccfbf1);
}

.stats-dot-map i {
    background: rgba(15, 23, 42, .08);
    box-shadow: none;
}

.stats-dot-map i.is-filled {
    box-shadow: none;
}

.stats-provider-card,
.stats-provider-card:nth-child(1),
.stats-provider-card:nth-child(2),
.stats-provider-card:nth-child(3),
.stats-provider-card:nth-child(4),
.stats-provider-card:nth-child(5),
.stats-record-card {
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 16px;
    box-shadow: none;
}

.stats-provider-card:nth-child(6n+1),
.stats-provider-card:nth-child(6n+2),
.stats-provider-card:nth-child(6n+3),
.stats-provider-card:nth-child(6n+4),
.stats-provider-card:nth-child(6n+5) {
    --provider-bg: #f8fafc;
}

.stats-provider-card:nth-child(1) {
    --provider-bg: #0f172a;
}

.stats-provider-card:nth-child(1) span,
.stats-provider-card:nth-child(1) strong,
.stats-provider-card:nth-child(1) small {
    color: #fff;
}

.stats-provider-card:nth-child(1) span,
.stats-provider-card span,
.stats-record-card span {
    background: rgba(15, 23, 42, .06);
    color: #475569;
}

.stats-provider-card:nth-child(1) span {
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .82);
}

.stats-provider-card strong,
.stats-list-row strong {
    color: #111827;
}

.stats-record-card:nth-child(1),
.stats-record-card:nth-child(2),
.stats-record-card:nth-child(3),
.stats-record-card:nth-child(4),
.stats-record-card:nth-child(5) {
    --record-bg: #f8fafc;
}

.stats-record-card {
    background:
        linear-gradient(180deg, rgba(15, 118, 110, .06), transparent 58%),
        var(--record-bg);
}

.stats-count {
    background: rgba(15, 118, 110, .1);
    color: #0f172a !important;
}

.stats-list-rank {
    color: #0f766e !important;
}

/* Standout-inspired stats concept */
.stats-page {
    --stats-ink: var(--text);
    --stats-charcoal: var(--text);
    --stats-paper: var(--surface);
    --stats-paper-deep: var(--sidebar-bg);
    --stats-muted: var(--text-muted);
    --stats-line: var(--border);
    --stats-lime: var(--primary);
    --stats-blue: var(--primary);
    --stats-cyan: var(--primary);
    width: 100%;
    max-width: 1220px;
    gap: 46px;
    color: var(--stats-ink);
    background: transparent;
}

.stats-hero {
    min-height: 340px;
    align-items: flex-end;
    padding: clamp(32px, 5vw, 68px);
    color: var(--stats-ink);
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(90deg, var(--stats-paper) 0 72%, transparent 72%),
        linear-gradient(135deg, var(--stats-paper-deep), #f8f6f1);
    box-shadow: none;
}

.stats-hero::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 72%;
    width: 28%;
    border-left: 1px solid var(--stats-line);
    background:
        repeating-linear-gradient(
            135deg,
            rgba(20, 20, 17, .08) 0,
            rgba(20, 20, 17, .08) 1px,
            transparent 1px,
            transparent 16px
        );
}

.stats-hero::after {
    content: 'DNS';
    position: absolute;
    right: clamp(28px, 5vw, 70px);
    top: 34px;
    color: rgba(20, 20, 17, .08);
    font-size: clamp(5rem, 14vw, 12rem);
    font-weight: 900;
    line-height: .8;
}

.stats-eyebrow {
    color: var(--stats-ink);
    font-size: .72rem;
    letter-spacing: .16em;
}

.stats-hero h1 {
    max-width: 790px;
    color: var(--stats-ink);
    font-size: clamp(4rem, 10vw, 9.5rem);
    font-weight: 900;
    line-height: .82;
}

.stats-hero p {
    max-width: 540px;
    color: var(--stats-muted);
    font-size: 1.05rem;
}

.stats-hero-total {
    width: 190px;
    height: 190px;
    padding: 24px;
    align-items: flex-start;
    border-radius: 0;
    background: var(--stats-ink);
    box-shadow: none;
}

.stats-hero-total span {
    color: var(--stats-lime);
    font-size: 3rem;
}

.stats-hero-total small {
    color: rgba(255, 255, 255, .78);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.stats-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: -46px;
    border-top: 1px solid var(--stats-line);
    border-bottom: 1px solid var(--stats-line);
    background: #fff;
}

.stats-metric-card {
    min-height: 164px;
    padding: 22px;
    border: 0;
    border-right: 1px solid var(--stats-line);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.stats-metric-card:last-child {
    border-right: 0;
}

.stats-metric-card::before,
.stats-metric-card::after {
    content: none;
}

.stats-metric-card span {
    color: var(--stats-muted);
    font-size: .72rem;
    letter-spacing: .12em;
}

.stats-metric-card strong {
    color: var(--stats-ink);
    font-size: clamp(2.6rem, 4.5vw, 4.2rem);
}

.stats-metric-card small {
    color: var(--stats-muted);
}

.stats-dot-map {
    width: 100%;
    max-width: 120px;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    align-self: end;
}

.stats-dot-map i {
    height: 4px;
    aspect-ratio: auto;
    border-radius: 0;
    background: rgba(20, 20, 17, .12);
}

.stats-dot-map i.is-filled {
    background: var(--metric-color);
}

.metric-indigo,
.metric-sky,
.metric-violet,
.metric-slate {
    --metric-bg: #fff;
}

.metric-indigo {
    --metric-color: var(--stats-ink);
}

.metric-sky {
    --metric-color: var(--stats-blue);
}

.metric-violet {
    --metric-color: var(--stats-cyan);
}

.metric-slate {
    --metric-color: var(--stats-lime);
}

.stats-atlas,
.stats-record-strip {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 44px;
}

.stats-atlas {
    padding-top: 6px;
}

.stats-section-heading span {
    color: var(--stats-ink);
    letter-spacing: .16em;
}

.stats-section-heading h2 {
    color: var(--stats-ink);
    font-size: clamp(1.9rem, 4vw, 3.5rem);
    font-weight: 900;
    line-height: .88;
}

.stats-section-heading p {
    color: var(--stats-muted);
}

.stats-section-heading.compact h2 {
    font-size: 1.2rem;
    line-height: 1.05;
}

.stats-provider-cloud {
    grid-template-columns: 1.25fr repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--stats-line);
    border-left: 1px solid var(--stats-line);
}

.stats-provider-card,
.stats-provider-card:nth-child(1),
.stats-provider-card:nth-child(2),
.stats-provider-card:nth-child(3),
.stats-provider-card:nth-child(4),
.stats-provider-card:nth-child(5) {
    min-height: 164px;
    padding: 20px;
    border: 0;
    border-right: 1px solid var(--stats-line);
    border-bottom: 1px solid var(--stats-line);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.stats-provider-card:nth-child(1) {
    min-height: 328px;
    background: var(--stats-charcoal);
}

.stats-provider-card:nth-child(1) span,
.stats-provider-card:nth-child(1) strong,
.stats-provider-card:nth-child(1) small {
    color: #fff;
}

.stats-provider-card:nth-child(1) small {
    color: rgba(255, 255, 255, .72);
}

.stats-provider-card span,
.stats-provider-card:nth-child(1) span,
.stats-record-card span {
    padding: 0;
    color: var(--stats-muted);
    border-radius: 0;
    background: transparent;
}

.stats-provider-card strong {
    color: var(--stats-ink);
    font-size: 1.12rem;
}

.stats-provider-card:nth-child(1) strong {
    font-size: clamp(2rem, 4vw, 3.2rem);
}

.stats-provider-card small {
    color: var(--stats-muted);
}

.stats-record-strip {
    align-items: stretch;
    padding: 34px 0;
    border-block: 1px solid var(--stats-line);
}

.stats-record-cards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border-left: 1px solid var(--stats-line);
}

.stats-record-card,
.stats-record-card:nth-child(1),
.stats-record-card:nth-child(2),
.stats-record-card:nth-child(3),
.stats-record-card:nth-child(4),
.stats-record-card:nth-child(5) {
    min-height: 126px;
    padding: 18px;
    border: 0;
    border-right: 1px solid var(--stats-line);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.stats-record-card {
    background:
        linear-gradient(180deg, rgba(79, 70, 229, .08), transparent 52%),
        #fff;
}

.stats-record-card strong {
    color: var(--stats-ink);
    font-size: clamp(1.65rem, 2.6vw, 2.4rem);
}

.stats-record-card small,
.stats-list-row span {
    color: var(--stats-muted);
}

.stats-directory {
    gap: 34px;
}

.stats-list-block {
    grid-template-rows: 118px auto;
}

.stats-list-block .stats-section-heading.compact {
    min-height: 118px;
}

.stats-list-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) max-content;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-bottom-color: var(--stats-line);
}

.stats-list-row > div {
    min-width: 0;
    text-align: left;
}

.stats-list-rank {
    color: var(--stats-muted) !important;
    font-variant-numeric: tabular-nums;
}

.stats-list-row strong {
    color: var(--stats-ink);
}

.stats-count {
    justify-self: end;
    min-width: auto;
    padding: 0;
    color: var(--stats-ink) !important;
    background: transparent;
    font-variant-numeric: tabular-nums;
}

.stats-page,
.monitoring-page {
    width: 100%;
    max-width: 1220px;
}

.stats-hero,
.monitoring-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, max-content);
    column-gap: clamp(18px, 3vw, 42px);
}

.stats-hero > div:first-child,
.monitoring-hero > div:first-child {
    min-width: 0;
}

.stats-hero-total,
.monitoring-status-card {
    max-width: 220px;
    min-width: 0;
}

.monitoring-status-card small,
.stats-hero-total small {
    overflow-wrap: anywhere;
}

.dnssec-status {
    display: inline-flex;
    align-items: center;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.dnssec-enabled {
    background: #dcfce7;
    color: #166534;
}

.dnssec-partial {
    background: #fef3c7;
    color: #92400e;
}

.dnssec-broken {
    background: #fee2e2;
    color: #991b1b;
}

.dnssec-unsigned {
    background: #e2e8f0;
    color: #475569;
}

.section-divider {
    margin: 1rem 0;
    border-top: 1px solid #e2e8f0;
}

.status-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;

}

.page-header h1 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 700;

}

.overview-score-link {
    text-decoration: none;
    color: inherit;
}

.overview-score-link:hover {
    text-decoration: none;
    color: inherit;
}

.score-circle {
    cursor: pointer;
}

.overview-score-link .overview-score {
    transition: transform 0.15s ease;
}

.overview-score-link:hover .overview-score {
    transform: scale(1.03);
}

.finding-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 10px;
    color: var(--text);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.finding-count {
    padding: 3px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

.finding-count.success {
    background: #dcfce7;
    color: #166534;

}

.finding-list {
    margin: 0;
    padding-left: 18px;

}

.finding-list li {
    margin-bottom: 4px;

}

.score-calculation-card .card-body {
    padding: 16px;
}

.score-calculation-card .table {
    margin-bottom: 0;
    font-size: .82rem;
}

.score-calculation-card .table th,
.score-calculation-card .table td {
    padding: 8px 10px;
    vertical-align: top;
}

.email-detail-panel {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--sidebar-bg);
    color: var(--text);
}

.email-detail-panel .info-section-title {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.email-detail-panel .dkim-tree {
    margin-bottom: 0;
    color: var(--text);
}

.email-detail-panel .dkim-tree strong {
    color: var(--text);
}

.email-detail-panel .dkim-tree li {
    color: var(--text-muted);
}

.finding-ok {
    color: var(--text-muted);

}

/* RELEASE NOTES */
.release-note-link {
    color: inherit;
	display: block;
    text-decoration:none;
}

.release-note-link:hover {
    color: inherit;
	text-decoration: underline;
}

/* MISC */

html.theme-dark .border {
    border-color: var(--border) !important;
}

/* ======================================================
 S *CORE CALCULATION TABLE
 ====================================================== */

#score-calculation .table {

color: var(--text);
margin-bottom: 0;
}

#score-calculation .table th,
#score-calculation .table td {

background: var(--surface);
color: var(--text);
border-color: var(--border);
}

#score-calculation .table thead th {

color: var(--text);
font-weight: 600;
}

#score-calculation .table tfoot th {

background: var(--surface);
color: var(--text);
border-top: 2px solid var(--border);
}

html.theme-dark #score-calculation .table {

    --bs-table-bg: var(--surface);
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
}

.monitoring-snapshot-target {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* ======================================================
PUBLIC MONITORING
====================================================== */

.monitoring-page {
    display: grid;
    gap: 22px;
}

.monitoring-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(79, 70, 229, .1), transparent 42%),
        linear-gradient(135deg, transparent 58%, rgba(14, 165, 233, .1)),
        var(--surface);
}

.monitoring-eyebrow {
    margin-bottom: 10px;
    color: var(--primary);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.monitoring-hero h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 850;
}

.monitoring-hero p {
    max-width: 620px;
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 1.05rem;
}

.monitoring-demo-badge {
    display: inline-flex;
    margin-left: 8px;
    padding: 4px 8px;
    color: var(--primary);
    font-size: .75rem;
    font-weight: 800;
    border: 1px solid rgba(79, 70, 229, .22);
    border-radius: 999px;
}

.monitoring-status-card {
    min-width: 230px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .65);
}

html.theme-dark .monitoring-status-card {
    background: rgba(15, 23, 42, .72);
}

.monitoring-status-card span,
.monitoring-status-card small,
.monitoring-metric span,
.monitoring-panel-header p,
.monitoring-panel-header > span,
.monitoring-summary-list span,
.monitoring-event span,
.monitoring-domain-row span,
.monitoring-domain-meta small {
    color: var(--text-muted);
}

.monitoring-status-card span,
.monitoring-metric span,
.monitoring-summary-list span {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.monitoring-status-card strong {
    margin: 8px 0;
    color: var(--text);
    font-size: 1.55rem;
}

.monitoring-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.monitoring-metric,
.monitoring-panel {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
}

.monitoring-metric {
    padding: 18px;
}

.monitoring-metric strong {
    display: block;
    margin-top: 12px;
    color: var(--text);
    font-size: 1.9rem;
    line-height: 1;
}

.monitoring-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
    gap: 18px;
}

.monitoring-panel {
    padding: 22px;
}

.monitoring-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.monitoring-panel-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 850;
}

.monitoring-panel-header p {
    margin: 5px 0 0;
    font-size: .9rem;
}

.monitoring-panel-header > span {
    flex: 0 0 auto;
    display: inline-flex;
    padding: 6px 10px;
    font-size: .82rem;
    font-weight: 800;
    border: 1px solid rgba(100, 116, 139, .22);
    border-radius: 999px;
    background: rgba(100, 116, 139, .08);
}

.monitoring-event-list,
.monitoring-summary-list,
.monitoring-domain-grid {
    display: grid;
    gap: 12px;
}

.monitoring-event,
.monitoring-domain-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(100, 116, 139, .045);
}

.monitoring-event:hover,
.monitoring-domain-row:hover {
    border-color: rgba(79, 70, 229, .35);
    background: rgba(79, 70, 229, .06);
}

.monitoring-event strong,
.monitoring-domain-row strong {
    display: block;
    margin-bottom: 3px;
    color: var(--text);
    overflow-wrap: anywhere;
}

.monitoring-change-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.monitoring-change-tag {
    display: inline-flex;
    padding: 5px 8px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 750;
    border-radius: 999px;
    background: rgba(100, 116, 139, .1);
}

.monitoring-change-tag.mail {
    color: #2563eb;
    background: rgba(37, 99, 235, .11);
}

.monitoring-change-tag.dns {
    color: #4f46e5;
    background: rgba(79, 70, 229, .11);
}

.monitoring-change-tag.policy {
    color: #7c3aed;
    background: rgba(124, 58, 237, .11);
}

.monitoring-summary-list div {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.monitoring-summary-list div:last-child {
    border-bottom: 0;
}

.monitoring-summary-list strong {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: 1rem;
}

.monitoring-domain-row {
    min-height: 70px;
}

.monitoring-domain-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.monitoring-domain-search {
    position: relative;
    flex: 1 1 360px;
    max-width: 520px;
    margin: 0;
}

.monitoring-domain-search i {
    position: absolute;
    top: 50%;
    left: 14px;
    color: var(--text-muted);
    transform: translateY(-50%);
}

.monitoring-domain-search input {
    width: 100%;
    min-height: 42px;
    padding: 9px 14px 9px 40px;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.monitoring-domain-search input:focus {
    outline: none;
    border-color: rgba(79, 70, 229, .5);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .1);
}

.monitoring-domain-page-size {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 750;
}

.monitoring-domain-meta {
    flex: 0 0 auto;
    min-width: 76px;
    text-align: right;
}

.monitoring-domain-meta span {
    display: block;
    color: var(--text);
    font-size: 1.3rem;
    font-weight: 850;
}

.monitoring-domain-meta small {
    font-size: .76rem;
    font-weight: 700;
}

.monitoring-empty {
    padding: 24px;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 14px;
    background: rgba(100, 116, 139, .035);
}

.monitoring-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: .86rem;
}

.monitoring-pagination > div {
    display: flex;
    gap: 8px;
}

.monitoring-page-button {
    min-height: 36px;
    padding: 7px 12px;
    color: var(--text);
    font: inherit;
    font-weight: 750;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.monitoring-page-button:not(:disabled):hover {
    border-color: rgba(79, 70, 229, .4);
    background: rgba(79, 70, 229, .06);
}

.monitoring-page-button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

/* Standout-inspired monitoring concept */
.monitoring-page {
    --monitoring-ink: var(--text);
    --monitoring-charcoal: var(--text);
    --monitoring-paper: var(--surface);
    --monitoring-paper-deep: var(--sidebar-bg);
    --monitoring-muted: var(--text-muted);
    --monitoring-line: var(--border);
    --monitoring-lime: var(--primary);
    --monitoring-blue: var(--primary);
    --monitoring-cyan: var(--primary);
    width: 100%;
    max-width: 1220px;
    gap: 36px;
    color: var(--monitoring-ink);
}

.monitoring-hero {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    align-items: flex-end;
    padding: clamp(32px, 5vw, 62px);
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(90deg, var(--monitoring-paper) 0 72%, transparent 72%),
        linear-gradient(135deg, var(--monitoring-paper-deep), #f8f6f1);
    box-shadow: none;
}

.monitoring-hero::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 72%;
    width: 28%;
    border-left: 1px solid var(--monitoring-line);
    background:
        repeating-linear-gradient(
            135deg,
            rgba(20, 20, 17, .08) 0,
            rgba(20, 20, 17, .08) 1px,
            transparent 1px,
            transparent 16px
        );
}

.monitoring-hero::after {
    content: 'RUN';
    position: absolute;
    right: clamp(28px, 5vw, 70px);
    top: 34px;
    color: rgba(20, 20, 17, .08);
    font-size: clamp(5rem, 14vw, 12rem);
    font-weight: 900;
    line-height: .8;
}

.monitoring-hero > div {
    position: relative;
    z-index: 1;
}

.monitoring-eyebrow {
    color: var(--monitoring-ink);
    font-size: .72rem;
    letter-spacing: .16em;
}

.monitoring-hero h1 {
    color: var(--monitoring-ink);
    font-size: clamp(4rem, 10vw, 8.8rem);
    font-weight: 900;
    line-height: .82;
}

.monitoring-hero p {
    max-width: 560px;
    margin-top: 22px;
    color: var(--monitoring-muted);
}

.monitoring-demo-badge {
    color: var(--monitoring-ink);
    border-color: var(--monitoring-line);
    border-radius: 0;
    background: rgba(79, 70, 229, .08);
}

.monitoring-status-card {
    min-width: 230px;
    padding: 24px;
    align-items: flex-start;
    border: 0;
    border-radius: 0;
    background: var(--monitoring-ink);
    box-shadow: none;
}

.monitoring-status-card span,
.monitoring-status-card small {
    color: rgba(255, 255, 255, .76);
}

.monitoring-status-card strong {
    color: var(--primary);
    font-size: 2rem;
}

.monitoring-metric-grid {
    gap: 0;
    margin-top: -46px;
    border-top: 1px solid var(--monitoring-line);
    border-bottom: 1px solid var(--monitoring-line);
    background: #fff;
    position: relative;
    z-index: 2;
}

.monitoring-metric {
    min-height: 148px;
    padding: 22px;
    border: 0;
    border-right: 1px solid var(--monitoring-line);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.monitoring-metric:last-child {
    border-right: 0;
}

.monitoring-metric span,
.monitoring-summary-list span {
    color: var(--monitoring-muted);
    font-size: .72rem;
    letter-spacing: .12em;
}

.monitoring-metric strong {
    color: var(--monitoring-ink);
    font-size: clamp(2.4rem, 4vw, 3.8rem);
}

.monitoring-layout {
    gap: 34px;
}

.monitoring-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.monitoring-panel-header {
    min-height: 86px;
    margin-bottom: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--monitoring-line);
}

.monitoring-panel-header h2 {
    color: var(--monitoring-ink);
    font-size: clamp(1.35rem, 2.4vw, 2.15rem);
    font-weight: 900;
    line-height: .96;
}

.monitoring-panel-header p,
.monitoring-panel-header > span,
.monitoring-summary-list span,
.monitoring-event span,
.monitoring-domain-row span,
.monitoring-domain-meta small,
.monitoring-domain-page-size,
.monitoring-pagination {
    color: var(--monitoring-muted);
}

.monitoring-panel-header > span {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-variant-numeric: tabular-nums;
}

.monitoring-event-list,
.monitoring-summary-list,
.monitoring-domain-grid {
    gap: 0;
}

.monitoring-event,
.monitoring-domain-row {
    min-height: 0;
    margin-inline: -14px;
    padding: 18px 14px;
    border: 0;
    border-bottom: 1px solid var(--monitoring-line);
    border-radius: 10px;
    background: transparent;
}

.monitoring-event:hover,
.monitoring-domain-row:hover {
    border-color: var(--monitoring-line);
    background: rgba(79, 70, 229, .06);
}

.monitoring-event strong,
.monitoring-domain-row strong,
.monitoring-summary-list strong,
.monitoring-domain-meta span {
    color: var(--monitoring-ink);
}

.monitoring-change-tag {
    padding: 4px 0;
    border-radius: 0;
    background: transparent;
    color: var(--monitoring-muted);
    border-bottom: 2px solid rgba(20, 20, 17, .16);
}

.monitoring-change-tag.mail {
    color: var(--monitoring-blue);
    background: transparent;
    border-bottom-color: var(--monitoring-blue);
}

.monitoring-change-tag.dns {
    color: var(--monitoring-cyan);
    background: transparent;
    border-bottom-color: var(--monitoring-cyan);
}

.monitoring-change-tag.policy {
    color: var(--monitoring-ink);
    background: transparent;
    border-bottom-color: var(--primary);
}

.monitoring-summary-panel {
    padding: 22px;
    background: var(--monitoring-paper);
}

.monitoring-summary-list div {
    border-bottom-color: var(--monitoring-line);
}

.monitoring-domain-tools {
    margin: 22px 0 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--monitoring-line);
}

.monitoring-domain-search {
    max-width: 560px;
}

.monitoring-domain-search input {
    min-height: 48px;
    border: 1px solid var(--monitoring-line);
    border-radius: 0;
    background: #fff;
}

.monitoring-domain-search input:focus {
    border-color: var(--monitoring-ink);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

.monitoring-domain-meta {
    min-width: 86px;
}

.monitoring-domain-meta span {
    font-size: 1.65rem;
    line-height: 1;
}

.monitoring-empty {
    border-color: var(--monitoring-line);
    border-radius: 0;
    background: var(--monitoring-paper);
}

.monitoring-page-button {
    border-color: var(--monitoring-line);
    border-radius: 0;
    background: #fff;
}

.monitoring-page-button:not(:disabled):hover {
    border-color: var(--monitoring-ink);
    background: rgba(79, 70, 229, .08);
}

/* Compact desktop rhythm for split-screen use */
@media (min-width: 992px) {
    .stats-page,
    .monitoring-page {
        gap: 28px;
        padding-top: 0 !important;
        padding-bottom: 28px !important;
    }

    .stats-hero {
        min-height: 250px;
        padding: 34px 42px;
    }

    .monitoring-hero {
        min-height: 230px;
        padding: 32px 42px;
    }

    .stats-hero h1,
    .monitoring-hero h1 {
        font-size: clamp(3.6rem, 7vw, 6.8rem);
    }

    .stats-hero p,
    .monitoring-hero p {
        margin-top: 14px;
    }

    .stats-hero-total {
        width: 150px;
        height: 150px;
    }

    .monitoring-status-card {
        min-width: 210px;
        padding: 20px;
    }

    .stats-hero-total span {
        font-size: 2.45rem;
    }

    .monitoring-status-card strong {
        font-size: 1.65rem;
    }

    .stats-metric-grid,
    .monitoring-metric-grid {
        margin-top: -28px;
    }

    .stats-metric-card,
    .monitoring-metric {
        min-height: 118px;
        padding: 18px;
    }

    .stats-metric-card strong,
    .monitoring-metric strong {
        font-size: clamp(2rem, 3.2vw, 3rem);
    }

    .stats-atlas,
    .stats-record-strip {
        gap: 32px;
    }

    .stats-provider-card,
    .stats-provider-card:nth-child(2),
    .stats-provider-card:nth-child(3),
    .stats-provider-card:nth-child(4),
    .stats-provider-card:nth-child(5) {
        min-height: 130px;
        padding: 16px;
    }

    .stats-provider-card:nth-child(1) {
        min-height: 260px;
        padding: 20px;
    }

    .stats-provider-card:nth-child(1) strong {
        font-size: clamp(1.7rem, 3vw, 2.55rem);
    }

    .stats-record-strip {
        padding: 24px 0;
    }

    .stats-record-card,
    .stats-record-card:nth-child(1),
    .stats-record-card:nth-child(2),
    .stats-record-card:nth-child(3),
    .stats-record-card:nth-child(4),
    .stats-record-card:nth-child(5) {
        min-height: 96px;
        padding: 14px;
    }

    .stats-list-block {
        grid-template-rows: 96px auto;
    }

    .stats-list-block .stats-section-heading.compact {
        min-height: 96px;
    }

    .stats-list-row,
    .monitoring-event,
    .monitoring-domain-row {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .monitoring-panel-header {
        min-height: 72px;
        padding-bottom: 14px;
    }

    .monitoring-domain-tools {
        margin-top: 16px;
        padding-bottom: 14px;
    }
}

/* Prevent horizontal overflow in desktop split-screen layouts */
.stats-page,
.monitoring-page,
.stats-page *,
.monitoring-page * {
    min-width: 0;
}

.stats-page,
.monitoring-page {
    overflow-x: clip;
}

.stats-hero,
.monitoring-hero {
    flex-wrap: wrap;
}

.stats-hero::after,
.monitoring-hero::after {
    max-width: 100%;
    overflow: hidden;
}

.stats-provider-card strong,
.stats-list-row strong,
.monitoring-event strong,
.monitoring-domain-row strong {
    overflow-wrap: anywhere;
}

@media (min-width: 992px) and (max-width: 1320px) {
    .stats-page,
    .monitoring-page {
        width: 100%;
        max-width: 100%;
    }

    .stats-hero,
    .monitoring-hero {
        padding-left: 32px;
        padding-right: 32px;
    }

    .stats-atlas,
    .stats-record-strip {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 26px;
    }

    .stats-directory {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 34px;
    }

    .stats-provider-cloud {
        grid-template-columns: 1fr 1fr;
    }

    .stats-provider-card:nth-child(1) {
        grid-row: auto;
        grid-column: span 2;
        min-height: 180px;
    }

    .stats-record-cards {
        grid-template-columns: repeat(5, minmax(82px, 1fr));
        overflow-x: auto;
    }

    .monitoring-layout {
        grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
    }
}

@media (min-width: 992px) and (max-width: 1280px) {
    .stats-hero,
    .monitoring-hero {
        grid-template-columns: minmax(0, 1fr) 150px;
        min-height: 220px;
        overflow: hidden;
    }

    .stats-hero h1,
    .monitoring-hero h1 {
        font-size: clamp(3.8rem, 8vw, 5.9rem);
    }

    .stats-hero::after,
    .monitoring-hero::after {
        right: 22px;
        top: 18px;
        font-size: clamp(4rem, 11vw, 8rem);
    }

    .stats-atlas,
    .stats-record-strip {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .stats-section-heading {
        position: static;
        max-width: 680px;
    }

    .stats-section-heading h2 {
        font-size: clamp(1.9rem, 5vw, 3rem);
    }

    .stats-provider-cloud {
        width: 100%;
    }

    .stats-record-cards {
        overflow-x: visible;
    }
}

/* Final shared hero cleanup: no right-side decoration */
.stats-hero,
.monitoring-hero {
    background: #f4f0e8 !important;
}

.stats-page,
.monitoring-page {
    width: 100% !important;
    max-width: 1220px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.stats-hero,
.monitoring-hero {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 150px;
}

.stats-hero::before,
.stats-hero::after,
.monitoring-hero::before,
.monitoring-hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
}

/* ======================================================
ACCOUNT DASHBOARD
====================================================== */

.account-sidebar-user {
    padding: 12px 16px 20px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--border);
    border-radius: 0 !important;
    cursor: default !important;
}

.account-sidebar-user:hover {
    background: transparent !important;
}

.account-sidebar-user strong,
.account-sidebar-user span {
    display: block;
}

.account-sidebar-user span {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: .78rem;
    overflow-wrap: anywhere;
}

.account-sidebar-signout {
    padding: 0;
    color: var(--text-muted);
    font: inherit;
    font-size: .78rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.account-sidebar-signout:hover {
    color: var(--primary);
}

.account-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    line-height: 1;
    vertical-align: middle;
}

.account-icon-button:hover,
.account-icon-button:focus {
    color: var(--primary);
    border-color: var(--primary);
    outline: 0;
}

.account-drawer-backdrop {
    position: fixed;
    z-index: 1040;
    inset: 0;
    background: rgba(15, 23, 42, .28);
    opacity: 0;
    transition: opacity .18s ease;
}

.account-drawer-backdrop.is-open {
    opacity: 1;
}

.account-drawer {
    position: fixed;
    z-index: 1041;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(440px, 100vw);
    height: 100vh;
    border-left: 1px solid var(--border);
    background: var(--surface);
    box-shadow: -18px 0 44px rgba(15, 23, 42, .18);
    transform: translateX(100%);
    transition: transform .22s ease;
}

.account-drawer.is-open {
    transform: translateX(0);
}

.account-drawer-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid var(--border);
}

.account-drawer-body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.account-drawer-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.account-drawer-danger {
    padding: 0 24px 24px;
}

body.account-drawer-open {
    overflow: hidden;
}

.account-sidebar-subnav {
    padding: 0 0 4px 26px !important;
    margin: -2px 0 8px !important;
    cursor: default !important;
}

.account-sidebar-subnav:hover {
    background: transparent !important;
}

.account-sidebar-subnav a {
    display: block;
    padding: 8px 12px;
    margin-bottom: 2px;
    border-radius: 10px;
    color: var(--text-muted);
    font-size: .9rem;
    text-decoration: none;
}

.account-sidebar-subnav a:hover,
.account-sidebar-subnav a.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}

.account-universal-search {
    position: relative;
    max-width: 720px;
}

.account-search-results {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
}

.account-search-result {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 3px 12px;
    padding: 12px 14px;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}

.account-search-result:last-child {
    border-bottom: 0;
}

.account-search-result:hover,
.account-search-result:focus {
    color: var(--text);
    background: var(--sidebar-active-bg);
    outline: 0;
}

.account-search-type {
    align-self: start;
    padding-top: 2px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.account-search-main {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.account-search-description {
    grid-column: 2;
    min-width: 0;
    color: var(--text-muted);
    font-size: .84rem;
    overflow-wrap: anywhere;
}

.account-search-empty {
    padding: 14px;
    color: var(--text-muted);
    font-size: .9rem;
}

.account-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.account-plan-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

.account-plan-card.is-current {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(67, 97, 238, .16),
        0 14px 34px rgba(67, 97, 238, .14);
}

.account-plan-card.is-blocked {
    opacity: .82;
}

.account-plan-card-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    min-height: 148px;
    padding: 22px;
    color: #fff;
    background: #1f2937;
}

.account-plan-card-featured .account-plan-card-header {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.account-plan-card-header p {
    color: rgba(255, 255, 255, .78);
    font-size: .92rem;
}

.account-plan-pill,
.account-plan-status {
    align-self: flex-start;
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.account-plan-status {
    white-space: nowrap;
}

.account-plan-metric {
    padding: 22px 22px 4px;
    color: var(--text);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.account-plan-metric span {
    color: var(--text-muted);
    font-size: .9rem;
    font-weight: 600;
}

.account-plan-features {
    display: grid;
    gap: 14px;
    padding: 22px;
    margin: 0;
    list-style: none;
}

.account-plan-features li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
    min-width: 0;
    color: var(--text);
    font-size: .94rem;
}

.account-plan-features i {
    color: var(--primary);
}

.account-plan-warning {
    margin: 0 22px 18px;
    padding: 10px 12px;
    border: 1px solid rgba(220, 53, 69, .22);
    border-radius: 8px;
    color: #b02a37;
    background: rgba(220, 53, 69, .08);
    font-size: .86rem;
}

.account-plan-card form {
    padding: 0 22px 22px;
}

.account-release-card {
    display: block;
    height: 100%;
    padding: 18px;
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    transition: transform .15s ease, border-color .15s ease;
}

.account-release-card:hover {
    color: var(--text);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.account-domain-card {
    display: block;
    height: 100%;
    padding: 20px;
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.account-domain-card:hover {
    color: var(--text);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

@media (max-width: 800px) {
    .v4-layout,
    .v4-layout-with-secondary {
        grid-template-columns: 1fr;
    }

    .v4-sidebar,
    .v4-secondary-nav {
        position: static;
        height: auto;
        display: flex;
        gap: 6px;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .v4-sidebar-link,
    .v4-secondary-link {
        flex: 0 0 auto;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .v4-secondary-label {
        display: none;
    }

    .v4-content {
        padding: 18px;
    }

    .domain-zone-workbench {
        grid-template-columns: 1fr;
    }

    .domain-zone-card-wide {
        grid-column: auto;
    }

    .domain-zone-metric-grid,
    .domain-zone-metric-grid-wide {
        grid-template-columns: 1fr;
    }

    .m365-summary-layout,
    .m365-service-row {
        grid-template-columns: 1fr;
    }

    .v4-layout.account-layout {
        grid-template-columns: 1fr;
    }

    .account-sidebar {
        position: static;
        height: auto;
        display: flex;
        gap: 6px;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .account-sidebar-user {
        display: none;
    }

    .account-sidebar div {
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    .account-content {
        padding: 18px;
    }

    .overview-grid {
        flex-wrap: wrap;
    }

    .overview-stat {
        min-width: calc(50% - 6px);
    }

    .stats-hero,
    .stats-grid,
    .stats-metric-grid,
    .stats-atlas,
    .stats-record-strip,
    .stats-directory {
        grid-template-columns: 1fr;
    }

    .stats-hero {
        display: grid;
        padding: 22px;
    }

    .stats-hero-total {
        width: auto;
        height: auto;
        min-width: 0;
        align-items: flex-start;
        border-radius: 18px;
    }

    .stats-provider-cloud {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-provider-card,
    .stats-provider-card:nth-child(1),
    .stats-provider-card:nth-child(2),
    .stats-provider-card:nth-child(3),
    .stats-provider-card:nth-child(4),
    .stats-provider-card:nth-child(5) {
        grid-column: auto;
        min-height: 132px;
    }

    .stats-record-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-metric-card {
        min-height: 132px;
        transform: none !important;
    }

    .stats-section-heading {
        position: static;
    }

    .monitoring-hero,
    .monitoring-layout,
    .monitoring-metric-grid {
        grid-template-columns: 1fr;
    }

    .monitoring-hero {
        display: grid;
        padding: 22px;
    }

    .monitoring-status-card {
        min-width: 0;
    }

    .monitoring-event,
    .monitoring-domain-row,
    .monitoring-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .monitoring-change-tags {
        justify-content: flex-start;
    }

    .monitoring-domain-tools,
    .monitoring-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .monitoring-domain-search {
        max-width: none;
    }

    .monitoring-pagination > div {
        width: 100%;
    }

    .monitoring-page-button {
        flex: 1;
    }

    .monitoring-domain-meta {
        min-width: 0;
        text-align: left;
    }

    .account-plan-grid {
        grid-template-columns: 1fr;
    }
}

/* Final app palette for the editorial stats/monitoring layouts */
.stats-page,
.monitoring-page {
    color: var(--text);
}

.stats-hero,
.monitoring-hero {
    grid-template-columns: minmax(0, 1fr) minmax(190px, max-content);
    background: var(--surface) !important;
    border: 1px solid var(--border);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .05);
}

html.theme-dark .stats-hero,
html.theme-dark .monitoring-hero {
    background: var(--surface) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

.stats-eyebrow,
.monitoring-eyebrow,
.stats-section-heading span,
.stats-list-rank,
.stats-provider-card span,
.stats-record-card span {
    color: var(--primary) !important;
}

.stats-hero h1,
.monitoring-hero h1,
.stats-section-heading h2,
.monitoring-panel-header h2,
.stats-provider-card strong,
.stats-list-row strong,
.monitoring-event strong,
.monitoring-domain-row strong,
.monitoring-summary-list strong,
.monitoring-domain-meta span,
.stats-record-card strong,
.stats-metric-card strong,
.monitoring-metric strong {
    color: var(--text) !important;
}

.stats-hero p,
.monitoring-hero p,
.stats-section-heading p,
.monitoring-panel-header p,
.monitoring-panel-header > span,
.monitoring-summary-list span,
.monitoring-event span,
.monitoring-domain-row span,
.monitoring-domain-meta small,
.monitoring-domain-page-size,
.monitoring-pagination,
.stats-list-row span,
.stats-provider-card small,
.stats-record-card small,
.stats-metric-card small,
.monitoring-metric span,
.monitoring-metric small {
    color: var(--text-muted) !important;
}

.stats-hero-total,
.monitoring-status-card {
    width: auto;
    min-width: 190px;
    height: auto;
    padding: 18px 20px;
    align-self: center;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
}

.stats-hero-total span,
.monitoring-status-card strong {
    color: var(--primary) !important;
}

.stats-hero-total small,
.monitoring-status-card span,
.monitoring-status-card small {
    color: var(--text-muted) !important;
}

.monitoring-status-card strong {
    overflow-wrap: normal;
    word-break: normal;
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    line-height: 1.05;
}

.monitoring-demo-badge {
    color: var(--primary) !important;
    border-color: rgba(79, 70, 229, .18) !important;
    border-radius: 999px !important;
    background: rgba(79, 70, 229, .08) !important;
}

.stats-metric-grid,
.monitoring-metric-grid,
.stats-provider-cloud,
.stats-record-cards,
.stats-record-strip,
.monitoring-summary-panel,
.monitoring-empty {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

.stats-metric-card,
.monitoring-metric,
.stats-provider-card,
.stats-provider-card:nth-child(1),
.stats-provider-card:nth-child(2),
.stats-provider-card:nth-child(3),
.stats-provider-card:nth-child(4),
.stats-provider-card:nth-child(5),
.stats-record-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.stats-provider-card:nth-child(1),
.metric-indigo,
.metric-sky,
.metric-violet,
.metric-slate {
    background:
        linear-gradient(135deg, rgba(79, 70, 229, .08), transparent 62%),
        var(--surface) !important;
}

html.theme-dark .stats-provider-card:nth-child(1),
html.theme-dark .metric-indigo,
html.theme-dark .metric-sky,
html.theme-dark .metric-violet,
html.theme-dark .metric-slate {
    background:
        linear-gradient(135deg, rgba(129, 140, 248, .14), transparent 62%),
        var(--surface) !important;
}

.stats-dot-map i.is-filled {
    background: var(--primary) !important;
}

.stats-list-row,
.monitoring-event,
.monitoring-domain-row,
.monitoring-summary-list div,
.monitoring-panel-header,
.monitoring-domain-tools,
.stats-record-strip {
    border-color: var(--border) !important;
}

.stats-count {
    color: var(--text) !important;
    background: transparent !important;
}

.monitoring-change-tag,
.monitoring-change-tag.mail,
.monitoring-change-tag.dns,
.monitoring-change-tag.policy {
    color: var(--primary) !important;
    background: transparent !important;
    border-bottom-color: var(--primary) !important;
}

.monitoring-domain-search input,
.monitoring-page-button {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.monitoring-domain-search input:focus,
.monitoring-page-button:not(:disabled):hover {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

/* Final spacing and metric alignment between stats and monitoring */
.stats-page,
.monitoring-page {
    padding-top: 0 !important;
}

.monitoring-metric-grid {
    gap: 0 !important;
    margin-top: -46px !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--surface) !important;
}

.monitoring-metric {
    position: relative;
    overflow: visible;
    min-height: 148px;
    padding: 22px !important;
    border: 0 !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}

.monitoring-metric:last-child {
    border-right: 0 !important;
}

.monitoring-metric:nth-child(1) {
    background:
        linear-gradient(135deg, rgba(79, 70, 229, .08), transparent 62%),
        var(--surface) !important;
}

.monitoring-metric:nth-child(2) {
    background:
        linear-gradient(135deg, rgba(79, 70, 229, .08), transparent 62%),
        var(--surface) !important;
}

.monitoring-metric:nth-child(3) {
    background:
        linear-gradient(135deg, rgba(79, 70, 229, .08), transparent 62%),
        var(--surface) !important;
}

.monitoring-metric:nth-child(4) {
    background:
        linear-gradient(135deg, rgba(79, 70, 229, .08), transparent 62%),
        var(--surface) !important;
}

.monitoring-metric::before,
.monitoring-metric::after {
    content: none !important;
}

.monitoring-metric span,
.monitoring-metric strong,
.monitoring-metric small {
    position: relative;
    z-index: 1;
}

html.theme-dark .monitoring-metric {
    box-shadow: none !important;
}

html.theme-dark .monitoring-metric:nth-child(1),
html.theme-dark .monitoring-metric:nth-child(2),
html.theme-dark .monitoring-metric:nth-child(3),
html.theme-dark .monitoring-metric:nth-child(4) {
    background:
        linear-gradient(135deg, rgba(129, 140, 248, .12), transparent 68%),
        var(--surface) !important;
}

/* Keep monitoring list rows visually stable on hover */
.monitoring-event,
.monitoring-domain-row {
    margin-inline: 0 !important;
    padding: 14px 16px !important;
    border-radius: 0 !important;
}

.monitoring-event:hover,
.monitoring-domain-row:hover {
    background: rgba(79, 70, 229, .06) !important;
}

.monitoring-event > div:first-child,
.monitoring-domain-row > div:first-child {
    min-width: 0;
}

.monitoring-domain-meta {
    padding-right: 4px;
}