/**
 * DownRadar Telemetry Platform - World-Class Competitor Stylesheet
 * DownRadar Core Stylesheet - High-Performance Real-Time Outage Intelligence.
 */

/* ==========================================================================
   0. Global Page & Theme Reset / Blocksy High-Tech Dark Mode Palette
   ========================================================================== */
:root,
html:not([data-theme="light"]),
[data-theme="dark"] {
    --theme-palette-color-1: #38bdf8 !important; /* primary brand accent (sky blue) */
    --theme-palette-color-2: #0284c7 !important; /* secondary brand accent */
    --theme-palette-color-3: #cbd5e1 !important; /* body text (slate 300) */
    --theme-palette-color-4: #ffffff !important; /* headings & bold (pure white) */
    --theme-palette-color-5: rgba(255, 255, 255, 0.12) !important; /* borders / dividers */
    --theme-palette-color-6: #131d32 !important; /* surface highlights */
    --theme-palette-color-7: #0f172a !important; /* card background */
    --theme-palette-color-8: #090c13 !important; /* deepest background */
    --theme-text-color: #cbd5e1 !important;
    --theme-headings-color: #ffffff !important;
    --theme-background-color: #090c13 !important;
    --theme-card-background: #0f172a !important;
    --theme-border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="light"] {
    --theme-palette-color-1: #0284c7 !important;
    --theme-palette-color-2: #0369a1 !important;
    --theme-palette-color-3: #334155 !important;
    --theme-palette-color-4: #0f172a !important;
    --theme-palette-color-5: #e2e8f0 !important;
    --theme-palette-color-6: #f8fafc !important;
    --theme-palette-color-7: #ffffff !important;
    --theme-palette-color-8: #f1f5f9 !important;
    --theme-text-color: #334155 !important;
    --theme-headings-color: #0f172a !important;
    --theme-background-color: #f8fafc !important;
    --theme-card-background: #ffffff !important;
    --theme-border-color: #e2e8f0 !important;
}

html, body {
    background-color: #090c13 !important;
    color: #cbd5e1 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

html[data-theme="light"],
html[data-theme="light"] body {
    background-color: #f8fafc !important;
    color: #334155 !important;
}

body.home .entry-header,
body.home header.entry-header,
body.home h1.page-title,
body.home article > h1:first-child,
body.home .wp-block-post-title,
body.single-service .entry-header,
body.single-service header.entry-header,
body.single-service h1.page-title,
body.single-service .entry-meta,
body.single-service .wp-block-post-title {
    display: none !important;
}

body.home #main,
body.home .site-main,
body.home .content-area,
body.home .entry-content,
body.home article,
body.single-service #main,
body.single-service .site-main,
body.single-service .content-area,
body.single-service .entry-content,
body.single-service article {
    padding-top: 0 !important;
    margin-top: 0 !important;
    background: #090c13 !important;
}

body.home #main .ct-container,
body.single-service #main .ct-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Eliminate theme default container padding on full-width sections */
.site-main .ct-container-full,
body.home .ct-container-full,
.ct-container-full,
#main, .site-main, .content-area, .entry-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Header & Navigation - Pure Dark Glassmorphism */
header#header, header.site-header, header.ct-header {
    background: rgba(9, 12, 19, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9990 !important;
    width: 100% !important;
}

/* Ensure sticky header respects WP Admin Bar height when logged in */
body.admin-bar header#header,
body.admin-bar header.site-header,
body.admin-bar header.ct-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar header#header,
    body.admin-bar header.site-header,
    body.admin-bar header.ct-header {
        top: 46px !important;
    }
}

/* Ensure WordPress Admin Bar and all dropdown submenus float above site header */
#wpadminbar {
    z-index: 999999 !important;
}
#wpadminbar .menupop .ab-sub-wrapper,
#wpadminbar .ab-sub-wrapper,
#wpadminbar ul.ab-submenu {
    z-index: 9999999 !important;
}

/* Kill Blocksy white row background and 120px excessive height */
[data-header] .ct-header [data-row],
.ct-header [data-row],
[data-row="middle"],
[data-row="top"],
[data-row="bottom"],
[data-header*="type-1"] .ct-header [data-row*="middle"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    --height: 64px !important;
    min-height: 64px !important;
    height: 64px !important;
    border: none !important;
    box-shadow: none !important;
}

.ct-header .ct-container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 64px !important;
}

/* Mastercrafted IsDownNow Brand Logo */
.site-branding[data-id="logo"] {
    display: flex !important;
    align-items: center !important;
}

.site-branding[data-id="logo"] .site-title-container {
    display: flex !important;
    align-items: center !important;
}

.site-branding[data-id="logo"] .site-title {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.site-branding[data-id="logo"] .site-title a {
    display: inline-block !important;
    width: 250px !important;
    height: 50px !important;
    max-width: 100% !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-decoration: none !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    background: url('../images/downradar-logo.svg') no-repeat left center / contain !important;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45)) !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
}

.site-branding[data-id="logo"] .site-title a:hover {
    transform: translateY(-0.5px) !important;
    filter: drop-shadow(0 2px 14px rgba(56, 189, 248, 0.4)) !important;
}

.site-branding[data-id="logo"] .site-title a::before,
.site-branding[data-id="logo"] .site-title a::after {
    display: none !important;
    content: none !important;
}

.site-branding[data-id="logo"] .site-title a * {
    display: none !important;
    font-size: 0 !important;
    visibility: hidden !important;
}

@media (max-width: 768px) {
    .site-branding[data-id="logo"] .site-title a {
        width: 180px !important;
        height: 36px !important;
    }
}

/* Primary Navigation Items */
.header-menu-1, .menu-container {
    display: flex !important;
    align-items: center !important;
}

.header-menu-1 ul.menu, #menu-primary-navigation {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.header-menu-1 .ct-menu-link, 
.menu_1 > li > a, 
.site-header nav a, 
.ct-header nav a {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.header-menu-1 .ct-menu-link:hover, 
.menu_1 > li > a:hover, 
.site-header nav a:hover, 
.ct-header nav a:hover {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.1) !important;
}

/* Header search icon */
.ct-header [data-id*="search"] svg,
.ct-header .header-search-icon {
    fill: #94a3b8 !important;
    color: #94a3b8 !important;
    transition: color 0.2s !important;
}
.ct-header [data-id*="search"]:hover svg {
    fill: #38bdf8 !important;
    color: #38bdf8 !important;
}

footer#footer, .site-footer {
    background: #06080e !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #64748b !important;
    padding: 36px 0 !important;
}

/* ==========================================================================
   1. Homepage Hero Section ([downradar_hero])
   ========================================================================== */
.downradar-hero-wrapper {
    position: relative;
    background: radial-gradient(ellipse at 50% -10%, rgba(56, 189, 248, 0.14) 0%, rgba(9, 12, 19, 0) 70%), #090c13;
    padding: 22px 20px 8px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

.downradar-hero-inner {
    max-width: 860px;
    margin: 0 auto;
}

.downradar-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 9999px;
    margin-bottom: 22px;
}

.radar-ping-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 10px #10b981;
    animation: radarPulse 1.8s infinite;
}

@keyframes radarPulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.4); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

.radar-pill-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #34d399;
}

.downradar-hero-title {
    font-size: 48px !important;
    font-weight: 800 !important;
    letter-spacing: -1.3px !important;
    color: #ffffff !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.15 !important;
}

.downradar-hero-sub {
    font-size: 17px !important;
    color: #94a3b8 !important;
    line-height: 1.6 !important;
    margin: 0 auto 34px auto !important;
    max-width: 680px;
}

/* Hero Search Bar & Dropdown */
.downradar-hero-search-wrap {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
}

.downradar-hero-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(22, 29, 44, 0.8);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9999px;
    padding: 6px 22px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.25s ease;
}

.downradar-hero-search-bar:focus-within {
    border-color: #38bdf8;
    background: rgba(22, 29, 44, 0.98);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.2), 0 12px 36px rgba(0, 0, 0, 0.5);
}

.search-magnifier {
    font-size: 18px;
    margin-right: 12px;
    opacity: 0.7;
}

.downradar-hero-search-bar input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 16px !important;
    color: #ffffff !important;
    padding: 10px 0 !important;
}

.downradar-hero-search-bar input::placeholder {
    color: #64748b;
}

.search-shortcut {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 3px 7px;
    border-radius: 6px;
    user-select: none;
}

/* Floating Autocomplete Dropdown */
.downradar-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: rgba(18, 24, 38, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    z-index: 9999;
    max-height: 340px;
    overflow-y: auto;
    text-align: left;
}

.dropdown-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: #f8fafc;
    transition: background 0.18s;
}

.dropdown-result-item:last-child {
    border-bottom: none;
}

.dropdown-result-item:hover {
    background: rgba(56, 189, 248, 0.12);
}

.dropdown-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dropdown-item-icon {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
}

.dropdown-item-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}

.dropdown-no-results {
    padding: 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
}

/* Trending Chips */
.downradar-hero-trending {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
}

.trending-label {
    color: #64748b;
    font-weight: 600;
}

.trending-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.trending-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.trending-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateY(-1px);
}

.chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* ==========================================================================
   2. Directory Grid & Layout ([downradar_directory])
   ========================================================================== */
.downradar-directory-container {
    max-width: 1260px;
    margin: 40px auto 80px auto;
    padding: 0 20px;
}

/* Active Disruptions Showcase */
.downradar-active-outages-section {
    margin-bottom: 34px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 18px;
    padding: 20px 24px;
}

.active-outages-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.outage-pulse-beacon {
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 12px #ef4444;
    animation: radarPulse 1.2s infinite;
}

.active-outages-title {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #f87171 !important;
    letter-spacing: 0.2px !important;
}

.active-outage-quick-tag {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.active-outage-quick-tag:hover {
    background: #1e293b !important;
    border-color: #38bdf8 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.28) !important;
}

.active-outages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.active-outage-pill-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(18, 24, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: #f8fafc;
    transition: all 0.2s;
}

.active-outage-pill-card.alert-critical {
    border-color: rgba(239, 68, 68, 0.4);
}

.active-outage-pill-card.alert-warning {
    border-color: rgba(245, 158, 11, 0.4);
}

.active-outage-pill-card:hover {
    background: rgba(26, 34, 52, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.outage-card-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.outage-card-logo img {
    max-width: 20px !important;
    max-height: 20px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.outage-card-info {
    flex: 1;
    min-width: 0;
}

.outage-platform-name {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.outage-metric-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
}

.severity-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.alert-critical .severity-dot { background: #ef4444; }
.alert-warning .severity-dot { background: #f59e0b; }

.severity-text {
    font-weight: 600;
}

.alert-critical .severity-text { color: #f87171; }
.alert-warning .severity-text { color: #fbbf24; }

.severity-score {
    color: #94a3b8;
}

.outage-card-action {
    font-size: 12px;
    font-weight: 600;
    color: #38bdf8;
    white-space: nowrap;
}

/* Category Filter Pills */
.downradar-cat-pills-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.downradar-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.downradar-cat-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.downradar-cat-btn.active {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 18px rgba(2, 132, 199, 0.45);
}

/* Status Bar & Counters */
.downradar-filter-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
    color: #64748b;
}

.services-counter {
    font-weight: 600;
    color: #94a3b8;
}

.services-telemetry-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pulse-green {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    animation: radarPulse 1.5s infinite;
}

/* ==========================================================================
   3. Service Cards Matrix (DownRadar Standard Layout)
   ========================================================================== */
.downradar-cards-matrix {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

@media (max-width: 1024px) {
    .downradar-cards-matrix {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .downradar-cards-matrix {
        grid-template-columns: 1fr !important;
    }
}

.downradar-card-item {
    display: flex;
    flex-direction: column !important;
    background: #0f141f !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 16px 18px 12px 18px !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}

.downradar-card-item.is-hidden,
.downradar-card-item[style*="display: none"],
.downradar-card-item[hidden] {
    display: none !important;
}

.downradar-card-item:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(56, 189, 248, 0.12) !important;
    background: #141b2a !important;
}

/* Card Header & Brand Identity - Phase 2 (Master Brief Section 5.3) */
.card-header-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.card-brand-identity {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.service-logo-box {
    width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;
    border-radius: 12px;
    background: #0b111e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.verdict-brand-cluster .service-logo-box {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    border-radius: 14px !important;
    padding: 4px !important;
}

.downradar-card-item:hover .service-logo-box {
    transform: scale(1.06) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
}

.service-logo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 9px !important;
    display: block !important;
}

.card-brand-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.card-brand-text .card-service-title {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    margin: 0 0 2px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.01em !important;
}

.card-region-subtitle {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sparkline-metric-tag {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 4px !important;
}

.downradar-card-item:focus-visible {
    outline: 2px solid #38bdf8 !important;
    outline-offset: 3px !important;
}

/* Card Top Row (Legacy Compatibility) */
.card-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 6px !important;
}

.card-service-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #f8fafc !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.01em !important;
}

.card-status-box {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.card-status-fav-star {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #64748b !important;
    opacity: 0.65 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 5 !important;
}

.downradar-card-item:hover .card-status-fav-star {
    opacity: 1 !important;
    color: #94a3b8 !important;
}

.card-status-fav-star:hover {
    color: #fbbf24 !important;
    transform: scale(1.18) !important;
    background: rgba(245, 158, 11, 0.12) !important;
}

.card-status-fav-star.is-favorited {
    opacity: 1 !important;
    color: #f59e0b !important;
}

.card-status-fav-star.is-favorited svg,
.card-status-fav-star.is-favorited .fav-star-svg {
    fill: #f59e0b !important;
    stroke: #f59e0b !important;
    filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.45)) !important;
}

.downradar-card-item.is-favorited-card {
    border-color: rgba(245, 158, 11, 0.35) !important;
}

/* Quick Filter Tabs (All | Favorites | Disruptions) */
.downradar-filter-tabs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    padding: 3px !important;
    border-radius: 999px !important;
}

.dr-filter-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 13px !important;
    border-radius: 999px !important;
    border: none !important;
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.dr-filter-tab:hover {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.dr-filter-tab.is-active {
    background: #1d9bf0 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(29, 155, 240, 0.3) !important;
}

.dr-filter-tab.is-active[data-tab="favorites"] {
    background: #d97706 !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35) !important;
}

.dr-filter-tab.is-active[data-tab="outages"] {
    background: #ef4444 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35) !important;
}

.dr-tab-count {
    display: inline-block !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    color: inherit !important;
}

/* Status Badges */
.card-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 8px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.card-status-badge.status-operational {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
}

.card-status-badge.status-issues {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #fbbf24 !important;
}

.card-status-badge.status-outage {
    background: rgba(239, 68, 68, 0.18) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
}

.card-status-badge.status-total {
    background: rgba(220, 38, 38, 0.25) !important;
    border: 1px solid rgba(220, 38, 38, 0.55) !important;
    color: #fca5a5 !important;
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.3) !important;
}

.card-status-badge.status-regional {
    background: rgba(234, 88, 12, 0.2) !important;
    border: 1px solid rgba(234, 88, 12, 0.45) !important;
    color: #fdba74 !important;
}

.card-status-badge.status-minor {
    background: rgba(249, 115, 22, 0.18) !important;
    border: 1px solid rgba(249, 115, 22, 0.42) !important;
    color: #fed7aa !important;
}

.card-status-badge.status-maintenance {
    background: rgba(56, 189, 248, 0.18) !important;
    border: 1px solid rgba(56, 189, 248, 0.45) !important;
    color: #7dd3fc !important;
}

.card-region-pill.status-total { color: #fca5a5 !important; }
.card-region-pill.status-regional { color: #fdba74 !important; }
.card-region-pill.status-minor { color: #fed7aa !important; }
.card-region-pill.status-maintenance { color: #7dd3fc !important; }

.downradar-card-item.status-total { border-color: rgba(220, 38, 38, 0.4) !important; }
.downradar-card-item.status-total:hover { border-color: rgba(220, 38, 38, 0.7) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(220, 38, 38, 0.25) !important; }
.downradar-card-item.status-regional { border-color: rgba(234, 88, 12, 0.35) !important; }
.downradar-card-item.status-minor { border-color: rgba(249, 115, 22, 0.3) !important; }
.downradar-card-item.status-maintenance { border-color: rgba(56, 189, 248, 0.35) !important; }

/* Centered Prominent Brand Hero Showcase (DownRadar Hallmark) */
.card-logo-container {
    height: 105px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    margin: 4px 0 10px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.brand-hero-logo {
    height: 72px !important;
    width: auto !important;
    min-width: 72px !important;
    max-width: 180px !important;
    max-height: 78px !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 16px !important;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Guaranteed 72px footprint for square brand squircles matching SBI & Revolut standard */
.brand-hero-logo[src*=".svg"] {
    width: 72px !important;
    height: 72px !important;
}

.downradar-card-item:hover .brand-hero-logo {
    transform: scale(1.06) !important;
}

/* Sparkline Area */
.card-sparkline-area {
    margin-bottom: 8px !important;
    height: 44px !important;
    width: 100% !important;
    position: relative !important;
}

.downradar-card-sparkline {
    width: 100% !important;
    height: 44px !important;
    display: block !important;
}

/* Card Bottom Footer */
.card-bottom-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.card-reports-label {
    color: #64748b !important;
    font-weight: 500 !important;
}

.card-inspect-arrow {
    color: #38bdf8 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    transition: transform 0.2s !important;
}

.downradar-card-item:hover .card-inspect-arrow {
    transform: translateX(3px) !important;
}

/* Trust Bar */
.downradar-cluster-trust-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: #101622;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 24px;
    margin-top: 50px;
    text-align: center;
}

@media (max-width: 768px) {
    .downradar-cluster-trust-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

.trust-num {
    font-size: 28px;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.trust-label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
}

/* ==========================================================================
   4. Single Service Dedicated Page (DownRadar Real-Time Intelligence)
   ========================================================================== */
.downradar-single-page-wrapper {
    background: #090c13 !important;
    min-height: 100vh;
    padding-bottom: 80px;
}

.downradar-single-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Breadcrumb Bar */
.downradar-breadcrumb-bar {
    background: rgba(14, 19, 29, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 0;
    font-size: 13px;
    margin-bottom: 30px;
}

.breadcrumb-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.downradar-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
}

.downradar-breadcrumbs a {
    color: #94a3b8;
    text-decoration: none;
    font-weight: 500;
}

.downradar-breadcrumbs a:hover {
    color: #38bdf8;
}

.crumb-sep {
    color: #475569;
}

.crumb-current {
    color: #f8fafc;
    font-weight: 600;
}

.downradar-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #94a3b8;
}

.pulse-beacon {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    animation: radarPulse 1.4s infinite;
}

/* 1. Hero Verdict Card */
.downradar-hero-verdict-card {
    background: #111723;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    padding: 30px;
    margin-bottom: 28px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.downradar-hero-verdict-card.status-operational {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.08);
}

.downradar-hero-verdict-card.status-issues {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 0 28px rgba(245, 158, 11, 0.12);
}

.downradar-hero-verdict-card.status-outage {
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow: 0 0 35px rgba(239, 68, 68, 0.2);
}

.verdict-inner {
    display: flex;
    align-items: center;
    gap: 24px;
}

@media (max-width: 768px) {
    .verdict-inner {
        flex-direction: column;
        text-align: center;
    }
}

.verdict-brand-box {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.verdict-brand-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

.verdict-svg-icon {
    max-width: 96px !important;
    max-height: 96px !important;
    width: 96px !important;
    height: 96px !important;
    border-radius: 22px !important;
    object-fit: contain !important;
}

.verdict-letter {
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
}

.verdict-text-block {
    flex: 1;
    min-width: 0;
}

.verdict-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 9999px;
    margin-bottom: 8px;
}

.status-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-pill-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #f8fafc;
}

.verdict-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.25 !important;
}

.verdict-desc {
    font-size: 14px !important;
    color: #94a3b8 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.verdict-breakouts-pill {
    margin-top: 10px;
    font-size: 12px;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
}

.verdict-score-box {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

@media (max-width: 768px) {
    .verdict-score-box {
        align-items: center;
        text-align: center;
    }
}

.score-ring-wrap {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.score-number-big {
    font-size: 42px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
}

.score-denom {
    font-size: 14px;
    color: #64748b;
    font-weight: 700;
}

.score-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.score-tag {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.score-tag.status-operational { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.score-tag.status-issues { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.score-tag.status-outage { background: rgba(239, 68, 68, 0.2); color: #f87171; }

/* 2. Direct Symptom Reporting Grid (DownRadar Diagnostic Suite) */
.downradar-symptom-section {
    margin-bottom: 28px;
}

.symptom-card {
    background: #111723;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.symptom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.symptom-heading {
    margin: 0 0 4px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.symptom-subheading {
    margin: 0 !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
}

.symptom-turnstile-tag {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.symptom-button-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.symptom-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.symptom-btn:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: #38bdf8;
    color: #ffffff;
    transform: translateY(-2px);
}

.symptom-btn-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    flex-shrink: 0;
}

.symptom-btn:hover .symptom-btn-radio {
    border-color: #38bdf8;
}

.symptom-btn.reported {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
    color: #34d399 !important;
    cursor: default;
}

.symptom-btn.reported .symptom-btn-radio {
    border-color: #10b981;
    background: #10b981;
    color: #ffffff;
}

.symptom-toast-banner {
    margin-top: 16px;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 13px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.toast-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
}

.toast-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
}

/* 3. Key Telemetry Metrics Row */
.downradar-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

@media (max-width: 768px) {
    .downradar-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-card {
    background: #111723;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px;
}

.stat-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.stat-value {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-value.status-operational { color: #34d399; }
.stat-value.status-issues { color: #fbbf24; }
.stat-value.status-outage { color: #f87171; }
.text-white { color: #ffffff; }
.text-muted { color: #94a3b8; }
.text-green { color: #34d399; }

.stat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.stat-sub {
    font-size: 11px;
    color: #64748b;
}

/* 4. Interactive 24-Hour Chart Section */
.downradar-chart-section {
    margin-bottom: 28px;
}

.downradar-chart-card {
    background: #111723;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.downradar-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.chart-main-title {
    margin: 0 0 4px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.chart-main-sub {
    margin: 0 !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
}

.downradar-chart-legend {
    display: flex;
    gap: 16px;
    font-size: 12px;
    font-weight: 600;
}

.legend-item::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 6px;
}

.legend-reports::before {
    background: #38bdf8;
}

.legend-baseline::before {
    background: #64748b;
}

.downradar-chart-canvas-wrap {
    height: 280px;
    min-height: 240px;
    aspect-ratio: 16 / 9;
    position: relative;
    width: 100%;
    contain: layout;
}

.chart-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    color: #64748b;
}

.official-status-link {
    color: #38bdf8;
    text-decoration: none;
    font-weight: 600;
}

.official-status-link:hover {
    text-decoration: underline;
}

/* 5. Troubleshooting Section */
.downradar-troubleshoot-section {
    margin-bottom: 28px;
}

.troubleshoot-card {
    background: #111723;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px;
}

.troubleshoot-title {
    margin: 0 0 4px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.troubleshoot-sub {
    margin: 0 0 20px 0 !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
}

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

@media (max-width: 768px) {
    .troubleshoot-grid {
        grid-template-columns: 1fr;
    }
}

.troubleshoot-item {
    display: flex;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
}

.trouble-step-num {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trouble-step-content h4 {
    margin: 0 0 4px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.trouble-step-content p {
    margin: 0 !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    line-height: 1.4 !important;
}

/* 6. Related Services Section */
.downradar-related-section {
    margin-bottom: 28px;
}

.related-title {
    margin: 0 0 16px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.related-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #111723;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: #ffffff;
    transition: all 0.2s;
}

.related-card:hover {
    background: #172030;
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-2px);
}

.related-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.related-card-icon img {
    max-width: 20px !important;
    max-height: 20px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.related-card-info {
    flex: 1;
    min-width: 0;
}

.related-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.related-status-tag {
    font-size: 11px;
    font-weight: 600;
}

.related-card.status-operational .related-status-tag { color: #34d399; }
.related-card.status-issues .related-status-tag { color: #fbbf24; }
.related-card.status-outage .related-status-tag { color: #f87171; }

.related-arrow {
    color: #64748b;
    font-size: 14px;
}

/* 7. WPDiscuz 7 Discussions Container */
.downradar-discussions-section {
    margin-bottom: 40px;
}

.discussions-card {
    background: #111723;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.discussions-heading {
    margin: 0 0 4px 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.discussions-sub {
    margin: 0 0 20px 0 !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
}

/* WPDiscuz Dark Theme Styling Tweaks */
#wpdcom {
    background: transparent !important;
    color: #cbd5e1 !important;
}

#wpdcom .wpd-form-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#wpdcom .wpd-editor-area {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    color: #f8fafc !important;
}

#wpdcom .wpd-field-desc, #wpdcom .wpd-comment-text {
    color: #cbd5e1 !important;
}

#wpdcom .wpd-comment-author, #wpdcom .wpd-comment-author a {
    color: #ffffff !important;
    font-weight: 700 !important;
}

#wpdcom .wpd-comment-date {
    color: #64748b !important;
}

#wpdcom .wpd-comment-wrap {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#wpdcom .wc-field-submit input[type="submit"], #wpdcom .wpd-prim-button {
    background: #0284c7 !important;
    border: 1px solid #38bdf8 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   8. 90-DAY UPTIME CALENDAR & SUBSYSTEM TELEMETRY
   ========================================================================== */
.downradar-uptime-section {
    margin-bottom: 24px !important;
}

.uptime-calendar-card {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.uptime-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

.uptime-title-box h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    margin: 0 0 4px 0 !important;
}

.uptime-title-box p {
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin: 0 !important;
}

.uptime-percentage-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.28) !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    color: #34d399 !important;
    font-weight: 800 !important;
    font-size: 14px !important;
}

.uptime-bars-strip {
    display: flex !important;
    align-items: flex-end !important;
    gap: 3px !important;
    height: 38px !important;
    padding: 6px 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
}

.uptime-bar-tick {
    flex: 1 1 0% !important;
    min-width: 3px !important;
    height: 26px !important;
    border-radius: 2px !important;
    background: #10b981 !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
    cursor: pointer !important;
}

.uptime-bar-tick:hover {
    transform: scaleY(1.3) !important;
    opacity: 0.9 !important;
}

.uptime-bar-tick.tick-minor {
    background: #f59e0b !important;
    height: 20px !important;
}

.uptime-bar-tick.tick-major {
    background: #ef4444 !important;
    height: 14px !important;
}

.uptime-timeline-footer {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-top: 8px !important;
}

/* Subsystems Grid */
.subsystems-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.subsystem-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.subsystem-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.subsystem-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6) !important;
}

.subsystem-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #e2e8f0 !important;
}

.subsystem-latency {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
}

/* ==========================================================================
   9. LIVE OUTAGE COMMUNITY CHAT & REAL-TIME STREAM
   ========================================================================== */
.downradar-live-chat-card {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 18px !important;
    padding: 28px !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}

.live-chat-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}

.chat-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 6px !important;
}

.chat-live-pulse {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 10px #10b981 !important;
    animation: radarPulse 1.5s infinite !important;
}

.live-chat-main-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #f8fafc !important;
    margin: 0 !important;
}

.live-chat-sub {
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin: 0 !important;
}

.live-chat-counter-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(2, 132, 199, 0.12) !important;
    border: 1px solid rgba(2, 132, 199, 0.3) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #38bdf8 !important;
}

.chat-users-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #38bdf8 !important;
}

/* Quick Pills */
.chat-quick-pills-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}

.quick-pill-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.quick-chip {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    padding: 4px 10px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.quick-chip:hover {
    background: rgba(2, 132, 199, 0.2) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
}

/* Composer Form */
.live-chat-composer {
    background: rgba(10, 15, 29, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
}

.composer-inputs-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

@media (max-width: 640px) {
    .composer-inputs-row {
        grid-template-columns: 1fr !important;
    }
}

.chat-input-text {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #f8fafc !important;
    font-size: 13px !important;
    outline: none !important;
}

.chat-input-text:focus {
    border-color: #38bdf8 !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

.composer-textarea-wrap textarea {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    color: #f8fafc !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    outline: none !important;
    resize: vertical !important;
}

.composer-textarea-wrap textarea:focus {
    border-color: #38bdf8 !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

.composer-bottom-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 12px !important;
    flex-wrap: wrap !important;
}

.chat-status-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.toggle-radio {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}

.toggle-radio input {
    cursor: pointer !important;
}

.radio-label {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.radio-label.green-vote {
    color: #34d399 !important;
}

.radio-label.red-vote {
    color: #f87171 !important;
}

.chat-send-btn {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    border: 1px solid #38bdf8 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 9px 20px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
    transition: all 0.2s ease !important;
}

.chat-send-btn:hover {
    background: linear-gradient(135deg, #0369a1, #0284c7) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.5) !important;
}

/* Stream List */
.live-chat-stream-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.chat-stream-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    display: flex !important;
    gap: 14px !important;
    transition: background 0.2s ease !important;
}

.chat-stream-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.chat-avatar-col {
    flex-shrink: 0 !important;
}

.chat-avatar-img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.chat-content-col {
    flex-grow: 1 !important;
}

.chat-meta-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 6px !important;
    flex-wrap: wrap !important;
}

.chat-author-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.chat-author-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
}

.chat-location-pill {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    padding: 2px 7px !important;
    border-radius: 8px !important;
}

.chat-vote-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
}

.chat-vote-badge.vote-working {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

.chat-vote-badge.vote-broken {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

.chat-symptom-tag {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.12) !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
}

.chat-timestamp {
    font-size: 12px !important;
    color: #64748b !important;
}

.chat-message-body {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #cbd5e1 !important;
    margin-bottom: 8px !important;
}

.chat-message-body p {
    margin: 0 !important;
}

.chat-item-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.chat-upvote-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.15s ease !important;
}

.chat-upvote-btn:hover, .chat-upvote-btn.upvoted {
    background: rgba(2, 132, 199, 0.18) !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
}

/* ==========================================================================
   DOWNRADAR MULTI-REGION & COUNTRY EDITIONS SYSTEM (DOWNRADAR STANDARD)
   ========================================================================== */

/* 1. Global Header Navigation Region Switcher (Removed in favor of unified aggregated single page) */
.downradar-nav-region-wrapper,
.downradar-nav-region-trigger,
.downradar-nav-region-menu {
    display: none !important;
}

/* Card Regional Location Badges */
.card-title-location-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.card-region-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.card-region-pill.status-outage {
    color: #fca5a5 !important;
}

.card-region-pill.status-issues {
    color: #fde68a !important;
}

.card-region-pill.status-operational {
    color: #94a3b8 !important;
}

.card-region-pill .region-pulse-dot {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    animation: drPulseDot 2s infinite !important;
}

@keyframes drPulseDot {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

.incident-signal-pill:hover {
    background: rgba(239, 68, 68, 0.22) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.downradar-nav-region-trigger {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 9999px !important;
    padding: 6px 14px !important;
    color: #e2e8f0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.downradar-nav-region-trigger:hover,
.downradar-nav-region-trigger[aria-expanded="true"] {
    background: rgba(56, 189, 248, 0.14) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.25) !important;
}

.nav-flag {
    font-size: 15px;
    line-height: 1;
}

.nav-arrow {
    transition: transform 0.2s ease;
    opacity: 0.7;
}

.downradar-nav-region-trigger[aria-expanded="true"] .nav-arrow {
    transform: rotate(180deg);
}

.downradar-nav-region-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 250px;
    background: rgba(10, 15, 28, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    box-shadow: 0 18px 42px -6px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(56, 189, 248, 0.12) !important;
    backdrop-filter: blur(20px) !important;
    z-index: 10000;
    animation: fadeInDown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.nav-region-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px 10px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.nav-region-menu-header .header-badge {
    background: rgba(56, 189, 248, 0.14);
    color: #38bdf8;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}

.nav-region-items-scroll {
    max-height: 310px;
    overflow-y: auto;
    padding-top: 6px;
}

.downradar-nav-region-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.downradar-nav-region-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.downradar-nav-region-item.active {
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.28);
}

.d-item-flag {
    font-size: 18px;
}

.d-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.d-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
}

.d-item-node {
    font-size: 11px;
    color: #64748b;
}

.d-item-check {
    color: #38bdf8;
    font-weight: 700;
    font-size: 13px;
}

/* 2. Hero Section Country Edition Selector */
.downradar-hero-region-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px auto 26px auto;
    max-width: 980px;
    padding: 6px 14px;
    background: rgba(14, 20, 36, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    flex-wrap: wrap;
}

.region-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.region-pin-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
}

.region-pills-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.region-pill {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.region-pill:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    transform: translateY(-1px);
}

.region-pill.active {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.35), rgba(14, 165, 233, 0.2)) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.3) !important;
}

.region-pill .pill-flag {
    font-size: 13px;
    line-height: 1;
}

/* 3. Card Region Badge in Directory Grid */
.card-region-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    color: #94a3b8;
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
}

.downradar-card-item:hover .card-region-badge {
    border-color: rgba(56, 189, 248, 0.25);
    color: #cbd5e1;
}

.crb-flag {
    font-size: 12px;
    line-height: 1;
}

/* 4. Single Service Page Breadcrumb Scope Pill */
.single-region-scope-pill {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.28);
    color: #38bdf8;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.02em;
}

/* 5. Verdict Region Latency Chips in Single Service Hero */
.verdict-region-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.region-chip-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.v-reg-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 500;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.v-reg-chip .v-lat {
    font-family: monospace;
    color: #38bdf8;
    font-weight: 600;
}

.v-reg-chip:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
}

/* 6. Multi-Region Geographical Probes Matrix Section */
.downradar-geo-matrix-section {
    margin-bottom: 36px;
}

.geo-matrix-card {
    background: rgba(14, 20, 36, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px 28px;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}

.geo-matrix-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-wrap: wrap;
    gap: 16px;
}

.geo-matrix-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.geo-matrix-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.25), rgba(56, 189, 248, 0.1));
    border: 1px solid rgba(56, 189, 248, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.geo-matrix-title {
    margin: 0 0 4px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    letter-spacing: -0.01em !important;
}

.geo-matrix-sub {
    margin: 0 !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    line-height: 1.45 !important;
}

.geo-reping-btn {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.25), rgba(14, 165, 233, 0.15)) !important;
    border: 1px solid rgba(56, 189, 248, 0.45) !important;
    color: #38bdf8 !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.16) !important;
}

.geo-reping-btn:hover {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.4), rgba(14, 165, 233, 0.3)) !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.35) !important;
    transform: translateY(-1px);
}

.geo-reping-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed !important;
}

.reping-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(56, 189, 248, 0.3);
    border-top-color: #38bdf8;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 6-Node Probes Grid */
.geo-probes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 1024px) {
    .geo-probes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .geo-probes-grid {
        grid-template-columns: 1fr;
    }
}

.geo-probe-card {
    background: rgba(9, 13, 24, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.geo-probe-card:hover {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(13, 19, 36, 0.85);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.geo-probe-card.active-edge-highlight {
    border-color: #38bdf8 !important;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.14), rgba(9, 13, 24, 0.8)) !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.25) !important;
}

.geo-probe-card.active-edge-highlight::before {
    content: "ACTIVE REGION";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 9px;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.08em;
}

.probe-scanning {
    opacity: 0.75;
    animation: pulseBorder 1.2s infinite ease-in-out;
}

@keyframes pulseBorder {
    0%, 100% { border-color: rgba(56, 189, 248, 0.2); }
    50% { border-color: rgba(56, 189, 248, 0.7); }
}

.probe-flash {
    animation: flashGreen 0.7s ease;
}

@keyframes flashGreen {
    0% { background: rgba(16, 185, 129, 0.25); border-color: #10b981; }
    100% { background: rgba(9, 13, 24, 0.68); }
}

.probe-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.probe-region-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.probe-flag {
    font-size: 22px;
    line-height: 1;
}

.probe-name {
    font-size: 14px;
    font-weight: 700;
    color: #f8fafc;
}

.probe-cluster {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

.probe-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
}

.probe-status-pill.status-operational {
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.32);
    color: #34d399;
}

.probe-status-pill.status-operational .probe-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.probe-status-pill.status-degraded {
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.32);
    color: #fbbf24;
}

.probe-status-pill.status-degraded .probe-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
}

.probe-status-pill.status-outage {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.32);
    color: #f87171;
}

.probe-status-pill.status-outage .probe-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
}

.probe-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
}

.probe-metric-item {
    display: flex;
    flex-direction: column;
}

.pm-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.04em;
}

.pm-value {
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
    font-family: monospace;
}

.pm-latency {
    color: #38bdf8;
}

.pm-loss {
    color: #10b981;
}

.pm-http {
    color: #cbd5e1;
    font-size: 11px;
}

.probe-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: #64748b;
}

.probe-protocol {
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}



/* ==========================================================================
   Sub-Service Component Grid & Social Ticker (Addendum B3 & Fix Plan Phase 3-4)
   ========================================================================== */
.dr-component-grid {
    background: #0f172a;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
}
.dr-component-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: background 0.2s ease;
}
.dr-component-row:hover {
    background: rgba(30, 41, 59, 0.7);
}
.dr-comp-name {
    font-weight: 600;
    color: #e2e8f0;
    font-size: 13px;
}
.dr-comp-status {
    font-size: 0.85em;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}
.dr-comp-region {
    font-size: 0.75em;
    color: #64748b;
    margin-top: 2px;
}
.dr-comp-ok {
    border-left: 3px solid #22c55e !important;
}
.dr-comp-ok .dr-comp-status {
    color: #22c55e;
}
.dr-comp-degraded {
    border-left: 3px solid #f59e0b !important;
}
.dr-comp-degraded .dr-comp-status {
    color: #f59e0b;
}
.dr-comp-partial {
    border-left: 3px solid #f97316 !important;
}
.dr-comp-partial .dr-comp-status {
    color: #f97316;
}
.dr-comp-outage {
    border-left: 3px solid #ef4444 !important;
}
.dr-comp-outage .dr-comp-status {
    color: #ef4444;
}
.dr-comp-unknown {
    border-left: 3px solid #64748b !important;
}

/* Real-Time Social Proof Scrolling Ticker */
.dr-social-ticker {
    background: #0a0f1a;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 10px 16px;
    overflow: hidden;
    white-space: nowrap;
    margin: 16px 0;
    position: relative;
}
.dr-ticker-inner {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: ticker-scroll 25s linear infinite;
}
.dr-social-ticker:hover .dr-ticker-inner {
    animation-play-state: paused;
}
.dr-ticker-item {
    display: inline-block;
    margin-right: 48px;
    color: #94a3b8;
    font-size: 0.88em;
    font-weight: 500;
}
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Featured Snippet Structured Answer Card */
.dr-snippet-target {
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   20. Site-Wide Comprehensive Dark Mode (Articles, Pages & Comments)
   ========================================================================== */
html:not([data-theme="light"]) body,
[data-theme="dark"] body {
    background-color: #090c13 !important;
    color: #cbd5e1 !important;
}

html:not([data-theme="light"]) #main,
html:not([data-theme="light"]) .site-main,
html:not([data-theme="light"]) .content-area,
html:not([data-theme="light"]) article,
html:not([data-theme="light"]) .entry-content,
[data-theme="dark"] #main,
[data-theme="dark"] .site-main,
[data-theme="dark"] .content-area,
[data-theme="dark"] article,
[data-theme="dark"] .entry-content {
    background-color: transparent !important;
    color: #cbd5e1 !important;
}

/* Headings & Post Title */
html:not([data-theme="light"]) .entry-title,
html:not([data-theme="light"]) .page-title,
html:not([data-theme="light"]) h1,
html:not([data-theme="light"]) h2,
html:not([data-theme="light"]) h3,
html:not([data-theme="light"]) h4,
html:not([data-theme="light"]) h5,
html:not([data-theme="light"]) h6,
[data-theme="dark"] .entry-title,
[data-theme="dark"] .page-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #ffffff !important;
    font-weight: 700 !important;
}

html:not([data-theme="light"]) .entry-title,
[data-theme="dark"] .entry-title {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Body Text, Lists, Strong */
html:not([data-theme="light"]) p,
html:not([data-theme="light"]) li,
[data-theme="dark"] p,
[data-theme="dark"] li {
    color: #cbd5e1 !important;
}

html:not([data-theme="light"]) strong,
html:not([data-theme="light"]) b,
[data-theme="dark"] strong,
[data-theme="dark"] b {
    color: #ffffff !important;
}

/* Meta, Breadcrumbs, Links */
html:not([data-theme="light"]) .entry-meta,
html:not([data-theme="light"]) .entry-meta a,
html:not([data-theme="light"]) .ct-breadcrumbs,
html:not([data-theme="light"]) .ct-breadcrumbs a,
[data-theme="dark"] .entry-meta,
[data-theme="dark"] .entry-meta a,
[data-theme="dark"] .ct-breadcrumbs,
[data-theme="dark"] .ct-breadcrumbs a {
    color: #94a3b8 !important;
}

html:not([data-theme="light"]) .ct-breadcrumbs a:hover,
html:not([data-theme="light"]) .entry-meta a:hover,
[data-theme="dark"] .ct-breadcrumbs a:hover,
[data-theme="dark"] .entry-meta a:hover {
    color: #38bdf8 !important;
}

/* Blockquotes & Callouts */
html:not([data-theme="light"]) blockquote,
[data-theme="dark"] blockquote {
    background: #0f172a !important;
    border-left: 3px solid #38bdf8 !important;
    color: #e2e8f0 !important;
    padding: 16px 20px !important;
    border-radius: 0 8px 8px 0 !important;
}

/* Tables */
html:not([data-theme="light"]) table,
[data-theme="dark"] table {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html:not([data-theme="light"]) table th,
[data-theme="dark"] table th {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html:not([data-theme="light"]) table td,
[data-theme="dark"] table td {
    background: rgba(15, 23, 42, 0.5) !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Related Posts, Share Box, Author Box */
html:not([data-theme="light"]) .ct-related-posts,
html:not([data-theme="light"]) .ct-related-posts article,
[data-theme="dark"] .ct-related-posts,
[data-theme="dark"] .ct-related-posts article {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

html:not([data-theme="light"]) .ct-related-posts article h4 a,
[data-theme="dark"] .ct-related-posts article h4 a {
    color: #f1f5f9 !important;
}

html:not([data-theme="light"]) .ct-share-box,
html:not([data-theme="light"]) .ct-author-box,
[data-theme="dark"] .ct-share-box,
[data-theme="dark"] .ct-author-box {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    border-radius: 10px !important;
}

/* wpdiscuz Comments System Dark Theme */
html:not([data-theme="light"]) #wpdcom,
[data-theme="dark"] #wpdcom {
    background: transparent !important;
    color: #cbd5e1 !important;
}

html:not([data-theme="light"]) #wpdcom .wpd-form,
html:not([data-theme="light"]) #wpdcom .ql-toolbar,
html:not([data-theme="light"]) #wpdcom .ql-container,
[data-theme="dark"] #wpdcom .wpd-form,
[data-theme="dark"] #wpdcom .ql-toolbar,
[data-theme="dark"] #wpdcom .ql-container {
    background: #0f172a !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html:not([data-theme="light"]) #wpdcom .ql-toolbar .ql-stroke,
[data-theme="dark"] #wpdcom .ql-toolbar .ql-stroke {
    stroke: #94a3b8 !important;
}

html:not([data-theme="light"]) #wpdcom .ql-toolbar .ql-fill,
[data-theme="dark"] #wpdcom .ql-toolbar .ql-fill {
    fill: #94a3b8 !important;
}

html:not([data-theme="light"]) #wpdcom .ql-editor p,
[data-theme="dark"] #wpdcom .ql-editor p {
    color: #f1f5f9 !important;
}

html:not([data-theme="light"]) #wpdcom .wpd-rating-value,
[data-theme="dark"] #wpdcom .wpd-rating-value {
    background: #0f172a !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html:not([data-theme="light"]) #wpdcom .wpd-comment-wrap,
[data-theme="dark"] #wpdcom .wpd-comment-wrap {
    background: #0b1120 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
}

html:not([data-theme="light"]) #wpdcom .wpd-comment-text,
[data-theme="dark"] #wpdcom .wpd-comment-text {
    color: #cbd5e1 !important;
}

html:not([data-theme="light"]) #wpdcom .wpd-comment-author,
html:not([data-theme="light"]) #wpdcom .wpd-comment-author a,
[data-theme="dark"] #wpdcom .wpd-comment-author,
[data-theme="dark"] #wpdcom .wpd-comment-author a {
    color: #ffffff !important;
}

/* Ajax Search Pro Dark Theme */
html:not([data-theme="light"]) .asp_w,
html:not([data-theme="light"]) .asp_r,
html:not([data-theme="light"]) .asp_r .asp_result,
[data-theme="dark"] .asp_w,
[data-theme="dark"] .asp_r,
[data-theme="dark"] .asp_r .asp_result {
    background: #0b1120 !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html:not([data-theme="light"]) .asp_r .asp_content h3 a,
[data-theme="dark"] .asp_r .asp_content h3 a {
    color: #ffffff !important;
}

/* Frontend Header Theme Toggle Button (Legacy - unified inside .dr-header-actions-wrap) */
.downradar-nav-theme-wrap,
#downradar-nav-theme-wrap {
    display: none !important;
}

.downradar-nav-theme-trigger {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.downradar-nav-theme-trigger:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    color: #ffffff;
    transform: translateY(-1px);
}

/* ==========================================================================
   21. DownRadar Outage Verdict Card ([downradar_status_badge])
   ========================================================================== */
.downradar-verdict-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: #0f172a;
    border-radius: 14px;
    margin: 24px 0;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s ease;
}

@media (max-width: 768px) {
    .downradar-verdict-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 18px;
    }
}

.downradar-verdict-card.status-red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, #0f172a 60%);
    border: 1px solid rgba(239, 68, 68, 0.35);
    box-shadow: 0 8px 30px rgba(239, 68, 68, 0.15);
}

.downradar-verdict-card.status-yellow {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, #0f172a 60%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.15);
}

.downradar-verdict-card.status-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, #0f172a 60%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.1);
}

/* Icon / Brand Logo Squircle */
.verdict-icon-box {
    flex-shrink: 0;
}

.verdict-brand-badge {
    width: 68px;
    height: 68px;
    border-radius: 14px;
    background: #090d16;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.brand-svg-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.verdict-icon {
    font-size: 40px;
    line-height: 1;
}

/* Content Area */
.verdict-content {
    flex: 1;
    min-width: 0;
}

.verdict-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.status-red .verdict-status-tag {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.status-yellow .verdict-status-tag {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.status-green .verdict-status-tag {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.status-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.status-red .status-pulse-dot {
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444;
    animation: dr-pulse 1.5s infinite;
}

.status-yellow .status-pulse-dot {
    background: #f59e0b;
    box-shadow: 0 0 10px #f59e0b;
}

.status-green .status-pulse-dot {
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
}

.verdict-headline {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
}

.verdict-subtext {
    font-size: 14px !important;
    color: #cbd5e1 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.5 !important;
}

.verdict-breakouts {
    font-size: 12px;
    color: #94a3b8;
    background: rgba(0, 0, 0, 0.25);
    padding: 6px 12px;
    border-radius: 6px;
    border-left: 2px solid #ef4444;
    display: inline-block;
}

/* Verdict Meta (Live badge & Score) */
.verdict-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .verdict-meta {
        align-items: flex-start;
        flex-direction: row;
    }
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid rgba(239, 68, 68, 0.35);
    letter-spacing: 0.05em;
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    animation: dr-pulse 1.2s infinite;
}

.verdict-score {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, monospace;
}


/* ==========================================================================
   DownRadar Interactive Report Widget & Modal (P0-1)
   ========================================================================== */
.downradar-report-container {
    margin: 24px auto 36px !important;
    max-width: var(--wp--style--global--content-size, 750px);
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.downradar-btn-report {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 13px 26px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4), 0 0 0 1px rgba(239, 68, 68, 0.2);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none !important;
    max-width: 100%;
    box-sizing: border-box;
    line-height: 1.4;
}

.downradar-btn-report:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(239, 68, 68, 0.55), 0 0 0 1px rgba(239, 68, 68, 0.4);
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    color: #ffffff !important;
}

.downradar-btn-report:active {
    transform: translateY(0);
}

.downradar-btn-report .btn-icon {
    font-size: 18px;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
}

.downradar-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 15, 29, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.downradar-modal-backdrop.is-active {
    display: flex !important;
    animation: dr-fade-in 0.2s ease-out;
}

@keyframes dr-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.downradar-modal-dialog {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(56, 189, 248, 0.15);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    padding: 24px;
    position: relative;
    box-sizing: border-box;
    animation: dr-dialog-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dr-dialog-pop {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.downradar-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.downradar-modal-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.3;
}

.downradar-modal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s;
}

.downradar-modal-close:hover {
    color: #f8fafc;
}

.downradar-modal-sub {
    color: #94a3b8;
    font-size: 13px;
    margin: 0 0 16px;
    line-height: 1.5;
}

.downradar-symptom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.downradar-symptom-pill {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #f8fafc;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.downradar-symptom-pill:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: #38bdf8;
    color: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
}

.downradar-modal-msg {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.4;
}

/* Real-time Incident Pulsing Animations & Mobile 375px Polishes (UX-1, UX-2) */
@keyframes drPulseGlowCritical {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
        transform: scale(1.02);
    }
}

@keyframes drPulseGlowWarning {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }
}

.status-outage .verdict-status-pill,
.status-critical .verdict-status-pill,
.dr-hero-top-detection-strip.status-outage .detection-badge-pill,
.downradar-hero-verdict-card.status-outage .verdict-status-pill,
.status-pill.status-critical,
.status-pill.status-outage,
.dr-pill-critical {
    animation: drPulseGlowCritical 2s infinite ease-in-out !important;
}

.status-issues .verdict-status-pill,
.dr-hero-top-detection-strip.status-issues .detection-badge-pill,
.status-pill.status-issues,
.status-pill.status-degraded,
.dr-pill-degraded {
    animation: drPulseGlowWarning 2.5s infinite ease-in-out !important;
}

/* ==========================================================================
   Mobile Responsiveness Architecture (Phones & Tablets: 360px – 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. Header & Navigation Container */
    .ct-header .ct-container {
        padding: 0 14px !important;
        height: 60px !important;
    }
    
    /* 2. Mobile Drawer / Offcanvas Panel */
    #offcanvas.ct-panel,
    .ct-panel[data-behaviour="right-side"] {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 999999 !important;
        background: rgba(9, 12, 19, 0.85) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        display: none;
    }
    #offcanvas.ct-panel.active,
    .ct-panel[data-behaviour="right-side"].active {
        display: flex !important;
    }
    #offcanvas .ct-panel-inner {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        width: 310px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        background: #0d131f !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.8) !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 20px 16px !important;
        box-sizing: border-box !important;
        z-index: 1000000 !important;
        overflow-y: auto !important;
    }
    #offcanvas .ct-panel-inner .ct-menu-link {
        display: block !important;
        padding: 14px 12px !important;
        color: #e2e8f0 !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        text-decoration: none !important;
    }
    #offcanvas .ct-panel-inner .ct-menu-link:hover,
    #offcanvas .ct-panel-inner li.current-menu-item .ct-menu-link {
        color: #38bdf8 !important;
        background: rgba(56, 189, 248, 0.1) !important;
        border-radius: 8px !important;
    }
    #offcanvas .ct-toggle-close {
        align-self: flex-end !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        color: #ffffff !important;
        cursor: pointer !important;
        margin-bottom: 12px !important;
    }

    /* 3. Homepage Container */
    #downradar-matrix-container,
    .downradar-directory-container {
        padding: 0 12px !important;
        margin: 0 auto 20px auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. Top Telemetry Metrics Strip */
    .downradar-top-metrics-strip {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
        box-sizing: border-box !important;
    }
    .downradar-top-metrics-strip > div:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    .downradar-top-metrics-strip > div:last-child {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Hide unaligned bullet dots on mobile */
    .downradar-top-metrics-strip > div:last-child > span:not([id]):not(:has(*)):not(:has(strong)) {
        display: none !important;
    }
    .downradar-top-metrics-strip > div:last-child > span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 11px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        padding: 6px 8px !important;
        border-radius: 6px !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        box-sizing: border-box !important;
    }

    /* 5. Active Disruptions Live Ribbon */
    .downradar-active-outages-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
        box-sizing: border-box !important;
    }
    .active-outages-pills-wrap {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        max-height: 180px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }
    .active-outage-quick-tag {
        padding: 4px 10px !important;
        font-size: 11px !important;
        border-radius: 99px !important;
    }

    /* 6. Filter Status Bar (Segmented Tabs & Full-width Reload Pill) */
    .downradar-filter-status-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding-bottom: 14px !important;
        margin-bottom: 16px !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .services-counter-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .services-counter {
        font-size: 12px !important;
        text-align: center !important;
        display: block !important;
        color: #94a3b8 !important;
    }
    .downradar-filter-tabs {
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
        background: rgba(15, 23, 42, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 10px !important;
        padding: 3px !important;
        box-sizing: border-box !important;
        gap: 4px !important;
    }
    .dr-filter-tab {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding: 8px 4px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    .dr-tab-count {
        padding: 1px 5px !important;
        font-size: 10px !important;
        border-radius: 99px !important;
    }
    .services-telemetry-status {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    .downradar-reload-pill {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: space-between !important;
        padding: 6px 12px !important;
        font-size: 11.5px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    /* 7. Service Cards Matrix (Single Column on Mobile) */
    .downradar-cards-matrix {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .downradar-card-item {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 14px 14px 12px 14px !important;
        border-radius: 12px !important;
    }
    .downradar-sparkline {
        width: 100% !important;
        height: auto !important;
        max-height: 44px !important;
        margin: 8px 0 !important;
    }

    /* 8. Single Service Page Containers */
    .downradar-single-page-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    .downradar-single-container {
        padding: 0 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .downradar-hero-verdict-card {
        padding: 0 !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .downradar-90day-uptime,
    .uptime-card-box {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .uptime-bars-strip {
        max-width: 100% !important;
        gap: 1px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 6px 0 !important;
    }
    .uptime-bar-tick {
        flex: 1 1 0% !important;
        min-width: 2px !important;
        height: 24px !important;
    }
    #downradar-outage-map-canvas {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .downradar-probes-grid {
        grid-template-columns: 1fr !important;
    }
    .downradar-symptom-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* 9. Interactive 24h Problem Chart Header */
    .downradar-chart-card {
        padding: 16px 14px 12px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
    .downradar-chart-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
        width: 100% !important;
    }
    .chart-header-left {
        width: 100% !important;
    }
    .chart-main-title {
        font-size: 1.15rem !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }
    .chart-main-sub {
        font-size: 12px !important;
        line-height: 1.45 !important;
        margin: 0 !important;
    }
    .downradar-chart-legend {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
        justify-content: flex-start !important;
        font-size: 11.5px !important;
    }
    .downradar-chart-canvas-wrap {
        width: 100% !important;
        overflow: hidden !important;
    }
    .downradar-chart-canvas-wrap canvas {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@keyframes drLivePulse {
    0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Live Page Auto-Reload & High-Load Protection Indicator */
.downradar-reload-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 99px !important;
    padding: 3px 12px 3px 10px !important;
    font-size: 12px !important;
    color: #cbd5e1 !important;
    transition: all 0.25s ease !important;
}

.downradar-reload-pill:hover {
    border-color: rgba(56, 189, 248, 0.5) !important;
    background: rgba(15, 23, 42, 0.95) !important;
}

.dr-reload-beacon {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 8px #10b981 !important;
    animation: drLivePulse 2s infinite ease-in-out !important;
    flex-shrink: 0 !important;
}

.dr-reload-beacon.dr-beacon-paused {
    background: #f59e0b !important;
    box-shadow: 0 0 8px #f59e0b !important;
    animation: none !important;
}

.downradar-reload-pill.dr-high-load-paused {
    border-color: rgba(245, 158, 11, 0.4) !important;
    background: rgba(245, 158, 11, 0.1) !important;
    color: #fde68a !important;
}

.dr-reload-title strong {
    color: #38bdf8 !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}

.dr-manual-reload-trigger {
    background: rgba(56, 189, 248, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #38bdf8 !important;
    border-radius: 6px !important;
    padding: 2px 7px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    line-height: 1.3 !important;
}

.dr-manual-reload-trigger:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

.dr-manual-reload-trigger.dr-manual-active {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    color: #fbbf24 !important;
}

.dr-manual-reload-trigger.dr-manual-active:hover {
    background: #d97706 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   24. Comprehensive Global Light Theme Engine (html[data-theme="light"])
   ========================================================================== */
html[data-theme="light"],
html[data-theme="light"] body {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    transition: background-color 0.25s ease, color 0.25s ease;
}

html[data-theme="light"] #main,
html[data-theme="light"] .site-main,
html[data-theme="light"] .content-area,
html[data-theme="light"] .entry-content,
html[data-theme="light"] article,
html[data-theme="light"] body.home #main,
html[data-theme="light"] body.home .site-main,
html[data-theme="light"] body.home .content-area,
html[data-theme="light"] body.home .entry-content,
html[data-theme="light"] body.home article,
html[data-theme="light"] body.single-service #main,
html[data-theme="light"] body.single-service .site-main,
html[data-theme="light"] body.single-service .content-area,
html[data-theme="light"] body.single-service .entry-content,
html[data-theme="light"] body.single-service article,
html[data-theme="light"] .downradar-single-page-wrapper,
html[data-theme="light"] .downradar-directory-container {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

/* Header & Navigation in Light Mode */
html[data-theme="light"] header#header,
html[data-theme="light"] .site-header,
html[data-theme="light"] .ct-header {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .site-title a,
html[data-theme="light"] .site-title {
    color: #0f172a !important;
}

html[data-theme="light"] .header-menu-1 ul.menu > li > a,
html[data-theme="light"] .ct-menu-link {
    color: #334155 !important;
}

html[data-theme="light"] .header-menu-1 ul.menu > li > a:hover,
html[data-theme="light"] .ct-menu-link:hover,
html[data-theme="light"] .header-menu-1 ul.menu > li.current-menu-item > a {
    color: #0284c7 !important;
}

html[data-theme="light"] .ct-header-search,
html[data-theme="light"] .ct-header-search svg {
    color: #334155 !important;
    fill: currentColor !important;
}

html[data-theme="light"] .downradar-nav-theme-trigger,
html[data-theme="light"] .dr-theme-toggle-btn {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .downradar-nav-theme-trigger:hover,
html[data-theme="light"] .dr-theme-toggle-btn:hover {
    background: #e0f2fe !important;
    border-color: #38bdf8 !important;
    color: #0284c7 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2) !important;
}

html[data-theme="light"] .dr-lang-switcher-btn {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .dr-lang-switcher-btn:hover,
html[data-theme="light"] .dr-lang-switcher-wrap.is-active .dr-lang-switcher-btn {
    background: #e0f2fe !important;
    border-color: #38bdf8 !important;
    color: #0284c7 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2) !important;
}

html[data-theme="light"] .dr-lang-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .dr-lang-dropdown-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .dr-lang-option {
    color: #334155 !important;
}

html[data-theme="light"] .dr-lang-option:hover {
    background: #f0f9ff !important;
    color: #0284c7 !important;
}

html[data-theme="light"] .dr-lang-option.is-selected {
    background: #e0f2fe !important;
    color: #0284c7 !important;
}

html[data-theme="light"] .dr-lang-option-native {
    color: #0f172a !important;
}

/* Homepage Hero, Search & Dropdown in Light Mode */
html[data-theme="light"] .downradar-hero-wrapper {
    background: radial-gradient(circle at 50% 20%, rgba(2, 132, 199, 0.08) 0%, rgba(248, 250, 252, 0) 70%), #f8fafc !important;
}

html[data-theme="light"] .downradar-hero-search-bar {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] #downradar-main-search {
    color: #0f172a !important;
}

html[data-theme="light"] #downradar-main-search::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] .search-shortcut {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
}

html[data-theme="light"] .downradar-search-dropdown {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .downradar-search-dropdown-item {
    border-bottom: 1px solid #f1f5f9 !important;
}

html[data-theme="light"] .downradar-search-dropdown-item:hover,
html[data-theme="light"] .downradar-search-dropdown-item.is-selected {
    background: #f0f9ff !important;
}

html[data-theme="light"] .search-drop-title {
    color: #0f172a !important;
}

html[data-theme="light"] .search-drop-meta {
    color: #64748b !important;
}

/* Top Telemetry Strip & Status Bar in Light Mode */
html[data-theme="light"] .downradar-top-metrics-strip {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    color: #475569 !important;
}

html[data-theme="light"] #downradar-metrics-headline {
    color: #0f172a !important;
}

html[data-theme="light"] #downradar-metrics-count {
    color: #0f172a !important;
}

html[data-theme="light"] .downradar-filter-status-bar {
    color: #64748b !important;
}

html[data-theme="light"] .downradar-reload-pill {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    color: #475569 !important;
}

html[data-theme="light"] .dr-manual-reload-trigger {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0284c7 !important;
}

html[data-theme="light"] .dr-manual-reload-trigger:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
}

html[data-theme="light"] .downradar-all-operational-banner {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #065f46 !important;
}

html[data-theme="light"] .downradar-active-outages-bar {
    background: rgba(239, 68, 68, 0.06) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

/* Service Directory Matrix Cards in Light Mode */
html[data-theme="light"] .downradar-card-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .downradar-card-item:hover {
    background: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 10px 24px rgba(2, 132, 199, 0.12) !important;
}

html[data-theme="light"] .card-service-title {
    color: #0f172a !important;
}

html[data-theme="light"] .card-meta-subtitle {
    color: #64748b !important;
}

html[data-theme="light"] .card-bottom-row {
    border-top: 1px solid #f1f5f9 !important;
}

html[data-theme="light"] .card-reports-count {
    color: #64748b !important;
}

html[data-theme="light"] .card-inspect-cta {
    color: #0284c7 !important;
}

html[data-theme="light"] .card-region-pill.status-operational {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

html[data-theme="light"] .card-region-pill.status-issues {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

html[data-theme="light"] .card-region-pill.status-outage {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

html[data-theme="light"] .downradar-directory-extension-banner {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .downradar-directory-extension-banner h4 {
    color: #0f172a !important;
}

html[data-theme="light"] .downradar-directory-extension-banner p {
    color: #64748b !important;
}

/* Single Service Status Pages in Light Mode */
html[data-theme="light"] .downradar-breadcrumb-bar {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .downradar-breadcrumbs a {
    color: #64748b !important;
}

html[data-theme="light"] .downradar-breadcrumbs .crumb-current {
    color: #0f172a !important;
}

html[data-theme="light"] .single-region-scope-pill {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

html[data-theme="light"] .indicator-text {
    color: #64748b !important;
}

html[data-theme="light"] .downradar-hero-verdict-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .verdict-service-title {
    color: #0f172a !important;
}

html[data-theme="light"] .verdict-meta-row {
    color: #64748b !important;
}

html[data-theme="light"] .verdict-headline-text {
    color: #0f172a !important;
}

html[data-theme="light"] .verdict-description-text {
    color: #475569 !important;
}

html[data-theme="light"] .verdict-gauge-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .gauge-score-number {
    color: #0f172a !important;
}

html[data-theme="light"] .gauge-meta-grid {
    border-top: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .meta-cell {
    color: #334155 !important;
}

html[data-theme="light"] .meta-cell-label {
    color: #64748b !important;
}

html[data-theme="light"] .meta-cell-value {
    color: #0f172a !important;
}

html[data-theme="light"] .anomaly-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .downradar-chart-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .downradar-chart-header h3 {
    color: #0f172a !important;
}

html[data-theme="light"] .downradar-chart-footer {
    border-top: 1px solid #f1f5f9 !important;
    color: #64748b !important;
}

html[data-theme="light"] .downradar-social-radar-box,
html[data-theme="light"] .downradar-twitter-stream-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .stream-header-strip {
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .stream-tweet-item {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .tweet-author-name {
    color: #0f172a !important;
}

html[data-theme="light"] .tweet-body {
    color: #334155 !important;
}

html[data-theme="light"] .downradar-mesh-footer {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

html[data-theme="light"] .footer-endpoint-item {
    color: #64748b !important;
}

html[data-theme="light"] .footer-endpoint-item strong {
    color: #0f172a !important;
}

/* Footer & Blocksy Theme in Light Mode */
html[data-theme="light"] footer.ct-footer,
html[data-theme="light"] .ct-footer [data-row="bottom"],
html[data-theme="light"] .ct-footer {
    background: #f1f5f9 !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

html[data-theme="light"] .ct-footer a {
    color: #475569 !important;
}

/* Light Mode Favorite Star & Filter Tabs */
html[data-theme="light"] .card-status-fav-star {
    color: #94a3b8 !important;
    opacity: 0.7 !important;
}

html[data-theme="light"] .card-status-fav-star:hover {
    color: #d97706 !important;
    background: rgba(245, 158, 11, 0.12) !important;
}

html[data-theme="light"] .card-status-fav-star.is-favorited {
    color: #d97706 !important;
    opacity: 1 !important;
}

html[data-theme="light"] .card-status-fav-star.is-favorited svg,
html[data-theme="light"] .card-status-fav-star.is-favorited .fav-star-svg {
    fill: #d97706 !important;
    stroke: #d97706 !important;
    filter: drop-shadow(0 0 3px rgba(217, 119, 6, 0.3)) !important;
}

html[data-theme="light"] .downradar-card-item.is-favorited-card {
    border-color: rgba(217, 119, 6, 0.35) !important;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.08) !important;
}

html[data-theme="light"] .downradar-filter-tabs {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] .dr-filter-tab {
    color: #64748b !important;
}

html[data-theme="light"] .dr-filter-tab:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .dr-filter-tab.is-active {
    background: #0284c7 !important;
    color: #ffffff !important;
}

html[data-theme="light"] .dr-filter-tab.is-active[data-tab="favorites"] {
    background: #d97706 !important;
    color: #ffffff !important;
}

html[data-theme="light"] .dr-filter-tab.is-active[data-tab="outages"] {
    background: #dc2626 !important;
    color: #ffffff !important;
}

html[data-theme="light"] .dr-tab-count {
    background: rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .ct-footer a:hover {
    color: #0284c7 !important;
}

/* ==========================================================================
   IsDownNow - Local Client & ISP Isolation Probe
   ========================================================================== */
.dr-local-probe-container {
    margin: 14px 0 18px 0;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    background: rgba(19, 29, 49, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: all 0.25s ease;
}

.dr-local-probe-running {
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.dr-probe-spinner {
    display: inline-block;
    animation: dr-pulse-glow 1.5s infinite ease-in-out;
}

@keyframes dr-pulse-glow {
    0%, 100% { opacity: 0.4; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.08); }
}

.dr-probe-result {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.dr-probe-badge {
    font-weight: 700;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dr-probe-ok {
    color: #e2e8f0;
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.08);
}
.dr-probe-ok .dr-probe-badge {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.dr-probe-warn {
    color: #e2e8f0;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.08);
}
.dr-probe-warn .dr-probe-badge {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.dr-probe-down {
    color: #fee2e2;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
}
.dr-probe-down .dr-probe-badge {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Ad Slot Base Styles */
.dr-ad-slot { clear: both; overflow: hidden; }
.dr-ad-slot:empty { display: none; }

/* Never show ads near Turnstile or report buttons */
.dr-report-section .dr-ad-slot,
.dr-turnstile-container .dr-ad-slot { display: none !important; }

/* Mobile sticky bottom ad */
.dr-ad-mobile-sticky {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 999;
    text-align: center;
    background: #0f172a;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 4px 0;
    display: none;
}
@media (max-width: 768px) {
    .dr-ad-mobile-sticky:not(:empty) { display: block; }
}

/* ==========================================================================
   Phase 1: High-Impact UI Fixes & Mobile Polish
   ========================================================================== */

/* 1. Progressive Disclosure Outage Ribbon */
.dr-disruptions-toggle-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #cbd5e1 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 99px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    min-height: 32px;
}
.dr-disruptions-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
.dr-disruptions-toggle-btn:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

/* 2. Mobile Accessibility & Touch Target Guardrails */
@media (max-width: 768px) {
    /* Touch targets minimum height/padding for interactive buttons on mobile */
    .downradar-filter-tabs .filter-tab,
    .downradar-region-selector,
    .dr-symptom-btn,
    .official-status-link,
    .card-status-fav-star,
    .active-outage-quick-tag {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Prevent page-level horizontal scrolling/overflow on mobile */
    .downradar-geo-matrix-section,
    .downradar-consensus-section,
    .downradar-stats-grid,
    .downradar-uptime-section,
    .dr-table-responsive {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .downradar-active-outages-bar {
        padding: 10px 14px !important;
    }
}