:root {
            --bg: #f8fafc;
            --card: #ffffff;
            --card-glass: rgba(255, 255, 255, 0.94);
            --border: rgba(2, 132, 199, 0.22);
            --border-strong: rgba(0, 163, 255, 0.38);
            --accent: #0284c7;
            --accent-catellix: #00A3FF;
            --glow: #0369a1;
            --text: #0f172a;
            /* Cinza secundário mais escuro no claro: melhor leitura sobre #f1f5f9 / listras claras */
            --muted: #475569;
            --ok: #059669;
            --warn: #d97706;
            --bad: #dc2626;
            --radius: 14px;
            --card-3d:
                0 1px 0 rgba(255, 255, 255, 0.95) inset,
                0 2px 4px rgba(2, 132, 199, 0.05),
                0 10px 28px -6px rgba(2, 132, 199, 0.12);
            --card-3d-hover:
                0 1px 0 #fff inset,
                0 6px 16px rgba(2, 132, 199, 0.14);
            --det-field: #f1f5f9;
            --det-field-border: #e2e8f0;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        .ctrl-bg-3d {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            perspective: 480px;
            perspective-origin: 50% 0%;
            overflow: hidden;
            transform-style: preserve-3d;
        }
        .ctrl-bg-3d-floor {
            position: absolute;
            bottom: -25%;
            left: -15%;
            right: -15%;
            width: 130%;
            height: 110%;
            background-color: #ffffff;
            background-image:
                linear-gradient(rgba(2, 132, 199, 0.12) 1px, transparent 1px),
                linear-gradient(90deg, rgba(2, 132, 199, 0.1) 1px, transparent 1px);
            background-size: 32px 32px;
            transform-origin: 50% 100%;
            transform: rotateX(62deg) translateZ(-80px) scale(2.4);
            backface-visibility: hidden;
        }
        .ctrl-bg-3d-curtain {
            position: fixed;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(
                180deg,
                rgba(248, 250, 252, 0.9) 0%,
                rgba(248, 250, 252, 0.35) 24%,
                transparent 46%,
                transparent 54%,
                rgba(248, 250, 252, 0.28) 78%,
                rgba(248, 250, 252, 0.88) 100%
            );
        }
        html {
            scroll-behavior: smooth;
            scrollbar-gutter: stable;
            scrollbar-width: thin;
            scrollbar-color: rgba(2, 132, 199, 0.45) rgba(226, 232, 240, 0.9);
        }
        html::-webkit-scrollbar {
            width: 11px;
        }
        html::-webkit-scrollbar-track {
            background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
            border-left: 1px solid rgba(2, 132, 199, 0.12);
        }
        html::-webkit-scrollbar-thumb {
            background: linear-gradient(
                180deg,
                rgba(0, 163, 255, 0.55) 0%,
                rgba(2, 132, 199, 0.45) 50%,
                rgba(3, 105, 161, 0.5) 100%
            );
            border-radius: 10px;
            border: 2px solid rgba(255, 255, 255, 0.85);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }
        html::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(
                180deg,
                rgba(0, 163, 255, 0.7) 0%,
                rgba(2, 132, 199, 0.55) 100%
            );
        }
        body {
            font-family: 'Outfit', 'DM Sans', system-ui, sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            min-height: 100dvh;
            overflow-x: clip;
            -webkit-text-size-adjust: 100%;
            padding-top: calc(64px + env(safe-area-inset-top, 0px));
            position: relative;
        }
        /* ── Barra fixa: PT/EN à esquerda; CTA reportar ao centro; vídeo do mascote no canto direito ── */
        .det-top-action-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 99;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto minmax(52px, min(200px, 26vw)) auto minmax(0, 1fr);
            align-items: center;
            column-gap: 10px;
            height: calc(52px + env(safe-area-inset-top, 0px));
            padding: env(safe-area-inset-top, 0px) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 252, 0.94) 100%);
            border-bottom: 1px solid rgba(2, 132, 199, 0.18);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: 0 4px 24px rgba(2, 132, 199, 0.08), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
        }
        .det-top-bar-left {
            grid-column: 1;
            justify-self: start;
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
        .det-theme-toggle {
            flex-shrink: 0;
            width: 40px;
            height: 34px;
            margin: 0;
            padding: 0;
            border-radius: 10px;
            border: 1px solid rgba(2, 132, 199, 0.28);
            background: #f1f5f9;
            font-size: 1rem;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .det-theme-toggle:hover,
        .det-theme-toggle:focus-visible {
            border-color: rgba(0, 163, 255, 0.45);
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
        }
        .det-theme-toggle:focus-visible {
            outline: 2px solid var(--accent-catellix);
            outline-offset: 2px;
        }
        .det-theme-toggle[aria-pressed='true'] {
            background: linear-gradient(135deg, #0c4a6e, #0369a1);
            border-color: rgba(56, 189, 248, 0.5);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }
        .det-top-bar-local-spin {
            grid-column: 3;
            justify-self: center;
            align-self: center;
            min-width: 0;
            width: 100%;
            max-width: min(220px, 38vw);
            overflow: visible;
        }
        .det-topbar-carousel {
            position: relative;
            width: 100%;
            height: 44px;
            overflow: visible;
        }
        .det-topbar-carousel__track {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            height: 100%;
            transition: transform 0.45s cubic-bezier(.4,0,.2,1);
        }
        .det-topbar-carousel__item {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
            transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.35s ease;
            will-change: transform, opacity;
        }
        .det-topbar-carousel__item--side {
            width: 32px;
            height: 32px;
            opacity: 0.55;
            transform: scale(0.82);
        }
        .det-topbar-carousel__item--center {
            width: 42px;
            height: 42px;
            opacity: 1;
            transform: scale(1.08);
            z-index: 2;
        }
        .det-topbar-carousel__frame {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            padding: 2px;
            border-radius: 10px;
            overflow: hidden;
            background: rgba(255,255,255,0.95);
            border: 1.5px solid rgba(180,160,100,0.3);
            box-shadow: 0 1px 6px rgba(180,160,80,0.1);
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .det-topbar-carousel__item--center .det-topbar-carousel__frame {
            border-color: rgba(218,165,32,0.65);
            box-shadow:
                0 0 10px rgba(218,165,32,0.2),
                0 0 3px rgba(218,165,32,0.12),
                inset 0 0 8px rgba(218,165,32,0.06);
            background: linear-gradient(135deg, rgba(255,248,230,0.98) 0%, rgba(255,255,255,0.98) 100%);
        }
        .det-topbar-carousel__img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            pointer-events: none;
            border-radius: 7px;
        }
        .det-top-bar-cluster {
            grid-column: 4;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            min-width: 0;
            max-width: 100%;
            justify-self: center;
        }
        .det-top-bar-right {
            grid-column: 5;
            justify-self: end;
            display: flex;
            align-items: center;
            min-width: 0;
        }
        /* Ícone “casa” na barra fixa (desktop: col. 2 antes do CTA; mobile: 1.ª linha entre esq./dir.). */
        .det-top-bar-home {
            grid-column: 2;
            justify-self: center;
            align-self: center;
            display: inline-flex;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            margin: 0;
            padding: 0;
            border-radius: 12px;
            border: 1px solid rgba(2, 132, 199, 0.28);
            background: #f1f5f9;
            color: #0369a1;
            text-decoration: none;
            flex-shrink: 0;
            transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        .det-top-bar-home:hover,
        .det-top-bar-home:focus-visible {
            border-color: rgba(0, 163, 255, 0.45);
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
            background: rgba(224, 242, 254, 0.95);
            color: #0284c7;
            outline: none;
        }
        .det-top-bar-home:focus-visible {
            outline: 2px solid var(--accent-catellix);
            outline-offset: 2px;
        }
        .det-top-bar-home__ico {
            display: block;
            width: 22px;
            height: 22px;
            pointer-events: none;
        }
        /* Publicidade própria (.cx-promo-slot) — placeholder quando vazio */
        .det-sidebar-ad-micro,
        .det-ad-inline-card,
        .det-mobile-premium-ad-card {
            position: relative;
        }
        .cx-promo-slot {
            position: relative;
            min-height: 44px;
        }
        .cx-promo-slot--loading {
            opacity: 0.55;
        }
        .cx-promo-slot--empty::before {
            content: "· · ·";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.95rem;
            letter-spacing: 0.45em;
            color: rgba(100, 116, 139, 0.42);
            pointer-events: none;
            z-index: 0;
            white-space: nowrap;
        }
        .cx-promo-slot:not(.cx-promo-slot--empty) a,
        .cx-promo-slot:not(.cx-promo-slot--empty) img {
            position: relative;
            z-index: 1;
        }
        .det-ad-inline-card .cx-promo-slot {
            min-height: 120px;
        }
        .det-ad-inline-card .cx-promo-slot a {
            display: block;
            text-align: center;
        }
        .det-ad-inline-card .cx-promo-slot img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
        }
        .det-sidebar-ad-micro .cx-promo-slot {
            min-height: 50px;
        }
        .det-sidebar-ad-micro .cx-promo-slot a {
            display: block;
        }
        .det-sidebar-ad-micro .cx-promo-slot img {
            max-width: 100%;
            height: auto;
        }
        /* Desktop (≥1024px): mesma grelha de 5 colunas — carrossel Top 15 (faixa esquerda) ao lado do botão Home. */
        @media (min-width: 1024px) {
            .det-top-action-bar {
                grid-template-columns: minmax(0, 1fr) auto minmax(52px, min(220px, 22vw)) auto minmax(0, 1fr);
            }
            .det-top-bar-left {
                grid-column: 1;
            }
            .det-top-bar-home {
                grid-column: 2;
            }
            .det-top-bar-local-spin {
                grid-column: 3;
                display: none !important;
                max-width: min(220px, 22vw);
            }
            .det-top-bar-cluster {
                grid-column: 4;
            }
            .det-top-bar-right {
                grid-column: 5;
            }
        }
        .det-bar-mascote-btn {
            position: relative;
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            padding: 0;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            background: radial-gradient(circle at 35% 30%, rgba(0, 163, 255, 0.25), #e0f2fe);
            box-shadow:
                0 0 0 2px rgba(0, 163, 255, 0.35),
                0 4px 16px rgba(2, 132, 199, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            overflow: hidden;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .det-bar-mascote-btn:hover,
        .det-bar-mascote-btn:focus-visible {
            transform: scale(1.06);
            box-shadow:
                0 0 0 2px rgba(0, 163, 255, 0.55),
                0 6px 22px rgba(0, 163, 255, 0.22),
                inset 0 1px 0 #fff;
        }
        .det-bar-mascote-btn:focus-visible {
            outline: 2px solid var(--accent-catellix);
            outline-offset: 3px;
        }
        .det-bar-mascote-ring {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
        }
        .det-bar-mascote-ring video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            display: block;
            pointer-events: none;
        }
        .det-bar-report-cta {
            position: relative;
            flex: 0 1 auto;
            margin: 0;
            max-width: min(420px, calc(100vw - 56px - 44px - 120px));
            min-height: 40px;
            padding: 10px 18px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-family: inherit;
            font-size: clamp(0.78rem, 2.8vw, 0.9rem);
            font-weight: 700;
            letter-spacing: 0.02em;
            color: #f8fafc;
            background: linear-gradient(135deg, #0369a1 0%, #0c4a6e 40%, #075985 100%);
            border: 1px solid rgba(56, 189, 248, 0.45);
            box-shadow:
                0 0 0 1px rgba(2, 132, 199, 0.2),
                0 6px 20px rgba(3, 105, 161, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
            overflow: hidden;
            animation: detBarReportBreathe 2.4s ease-in-out infinite;
            transition: filter 0.2s ease;
        }
        .det-bar-report-cta:hover {
            filter: brightness(1.08);
        }
        .det-bar-report-cta:focus-visible {
            outline: 2px solid var(--accent-catellix);
            outline-offset: 3px;
        }
        .det-bar-report-cta__pulse {
            position: absolute;
            inset: -4px;
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.5), rgba(59, 130, 246, 0.25));
            opacity: 0.55;
            animation: detBarReportRing 2.4s ease-in-out infinite;
            z-index: 0;
            pointer-events: none;
        }
        .det-bar-report-cta__text {
            position: relative;
            z-index: 1;
        }
        @keyframes detBarReportBreathe {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.045); }
        }
        @keyframes detBarReportRing {
            0%, 100% { transform: scale(1); opacity: 0.35; }
            50% { transform: scale(1.12); opacity: 0.85; }
        }
        @media (prefers-reduced-motion: reduce) {
            .det-bar-report-cta,
            .det-bar-report-cta__pulse {
                animation: none;
            }
        }
        .det-locale-switch {
            display: inline-flex;
            flex-shrink: 0;
            align-items: center;
            gap: 0;
            border-radius: 10px;
            border: 1px solid rgba(2, 132, 199, 0.28);
            background: #f1f5f9;
            overflow: hidden;
        }
        .det-locale-switch button {
            margin: 0;
            padding: 8px 12px;
            border: none;
            background: transparent;
            color: var(--muted);
            font: inherit;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .det-locale-switch button.is-active {
            background: linear-gradient(135deg, #0284c7, #0369a1);
            color: #fff;
        }
        .det-locale-switch button:focus-visible {
            outline: 2px solid var(--accent-catellix);
            outline-offset: 2px;
        }
        /* Modal: escolher serviço para reportar */
        .modal-sheet--report-picker {
            max-width: 480px;
        }
        .det-report-picker-lead {
            font-size: 0.86rem;
            color: var(--muted);
            margin: 0 0 12px;
            line-height: 1.45;
        }
        .det-report-picker-search {
            width: 100%;
            padding: 10px 14px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--det-field);
            color: var(--text);
            font: inherit;
            font-size: 0.88rem;
            margin-bottom: 12px;
        }
        .det-report-picker-search:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .det-report-picker-list {
            max-height: min(52vh, 420px);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-right: 4px;
            scrollbar-width: thin;
            scrollbar-color: rgba(56, 189, 248, 0.45) rgba(226, 232, 240, 0.88);
        }
        .det-report-picker-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 10px;
            border: 1px solid rgba(56, 189, 248, 0.12);
            background: rgba(248, 250, 252, 0.95);
        }
        .det-report-picker-row img {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            object-fit: contain;
            flex-shrink: 0;
            background: #e2e8f0;
        }
        .det-report-picker-row .det-rp-name {
            flex: 1;
            min-width: 0;
            font-size: 0.86rem;
            font-weight: 600;
            line-height: 1.25;
        }
        .det-report-picker-row .det-rp-report {
            flex-shrink: 0;
            padding: 7px 12px;
            border-radius: 8px;
            border: 1px solid rgba(56, 189, 248, 0.4);
            background: linear-gradient(135deg, rgba(3, 105, 161, 0.85), rgba(12, 74, 110, 0.95));
            color: #f1f5f9;
            font: inherit;
            font-size: 0.78rem;
            font-weight: 700;
            cursor: pointer;
        }
        .det-report-picker-row .det-rp-report:hover {
            filter: brightness(1.1);
        }
        .det-report-picker-empty {
            text-align: center;
            color: var(--muted);
            font-size: 0.86rem;
            padding: 16px 8px;
        }
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: radial-gradient(ellipse 110% 55% at 50% -15%, rgba(0, 163, 255, 0.14), transparent 55%);
            pointer-events: none;
            z-index: 0;
        }
        .wrap {
            position: relative;
            z-index: 2;
            max-width: 1400px;
            margin: 0 auto;
            padding: 14px max(12px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        }
        @media (min-width: 768px) {
            .wrap { padding: 20px max(18px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
        }
        header.hero {
            text-align: center;
            padding: 18px 8px 14px;
        }
        .hero-copy { width: 100%; }
        @media (max-width: 719px) {
            .hero-inner .hero-copy h1,
            .hero-inner .tagline { text-align: center; }
        }
        @media (min-width: 720px) {
            header.hero {
                text-align: left;
                padding: 20px 12px 16px;
            }
            .hero-inner {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 20px 28px;
                flex-wrap: wrap;
            }
            .hero-inner .brand-stack {
                align-items: flex-start;
                margin-bottom: 0;
            }
            .hero-inner .hero-copy { flex: 1; min-width: 220px; max-width: 520px; }
            .hero-inner .hero-copy h1 { text-align: left; }
            .hero-inner .tagline { margin-left: 0; margin-right: 0; text-align: left; max-width: none; }
        }
        .brand-stack {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        .brand-stack .brand-mark {
            height: 52px;
            width: auto;
            object-fit: contain;
            filter: drop-shadow(0 6px 24px rgba(0, 163, 255, 0.35));
        }
        .hero h1 {
            font-size: clamp(1.45rem, 3.8vw, 2rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            color: var(--text);
            line-height: 1.15;
        }
        .hero h1 .brand-name {
            background: linear-gradient(120deg, #0284c7, var(--accent-catellix));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero h1 .brand-monitoring {
            font-weight: 600;
            color: var(--muted);
            -webkit-text-fill-color: var(--muted);
        }
        .hero .tagline {
            color: var(--muted);
            font-size: 0.88rem;
            margin-top: 10px;
            max-width: 420px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.4;
            font-weight: 500;
        }
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .det-toolbar-filters {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 10px;
            flex: 1 1 auto;
            min-width: 0;
        }
        .toolbar-compact .probe-pop-badge {
            flex: 0 0 auto;
        }
        .toolbar-compact {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 10px;
            margin: 10px 0 8px;
            justify-content: center;
        }
        @media (max-width: 520px) {
            .toolbar-compact .det-select {
                flex: 1 1 calc(50% - 6px);
                min-width: 0;
                max-width: 100%;
            }
        }
        .det-select {
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--det-field);
            color: var(--text);
            font: inherit;
            font-size: 0.78rem;
            font-weight: 600;
            min-height: 36px;
            max-width: min(100%, 200px);
            touch-action: manipulation;
        }
        .det-select:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .toolbar-compact .det-select--ip {
            max-width: min(100%, 190px);
        }
        .toolbar-compact .seg-view {
            display: inline-flex;
            border: 1px solid var(--border);
            border-radius: 8px;
            flex-shrink: 0;
            overflow: hidden;
        }
        .toolbar-compact .seg-view button {
            border: none;
            background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
            color: #0c4a6e;
            padding: 6px 10px;
            font-size: 0.72rem;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            min-height: 36px;
            touch-action: manipulation;
        }
        .toolbar-compact .seg-view button.active {
            background: linear-gradient(180deg, rgba(0, 163, 255, 0.38), rgba(2, 132, 199, 0.32));
            color: #0c4a6e;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
        }
        /* Mobile: só visualização em grade (sem carrossel/lista) */
        @media (max-width: 720px) {
            .toolbar-compact .seg-view {
                display: none !important;
            }
        }
        .refresh-btn {
            border: 1px solid var(--border);
            background: rgba(0, 163, 255, 0.12);
            color: var(--glow);
            padding: 6px 12px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 1rem;
            line-height: 1;
            cursor: pointer;
            font-family: inherit;
            min-height: 36px;
            min-width: 40px;
            touch-action: manipulation;
        }
        .refresh-btn:disabled { opacity: 0.5; cursor: wait; }
        .toolbar-refresh-group {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .toolbar-compact .det-select--refresh {
            max-width: min(100%, 132px);
            min-width: 3.25rem;
            font-variant-numeric: tabular-nums;
        }
        .metrics-bar {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 4px 0;
            row-gap: 6px;
            padding: 10px 14px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
            margin: 8px 0 14px;
            font-size: 0.78rem;
            color: var(--muted);
            line-height: 1.5;
        }
        .metrics-bar b {
            color: var(--accent-catellix);
            font-variant-numeric: tabular-nums;
            font-weight: 800;
            font-size: 0.92rem;
        }
        .metrics-bar .sep {
            margin: 0 10px;
            opacity: 0.35;
            user-select: none;
            font-weight: 300;
        }
        .metrics-bar .metric-bit {
            white-space: nowrap;
        }
        @media (max-width: 480px) {
            .metrics-bar .metric-bit { white-space: normal; }
            .metrics-bar .sep { margin: 0 6px; }
        }
        .metrics-bar .metric-bit[title] {
            cursor: help;
            border-bottom: 1px dotted rgba(148, 163, 184, 0.45);
        }
        .probe-pop-badge {
            display: none;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            color: var(--glow);
            border: 1px solid rgba(0, 163, 255, 0.45);
            background: rgba(0, 163, 255, 0.1);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .probe-pop-badge.probe-pop-badge--ix {
            color: var(--ok);
            border-color: rgba(16, 185, 129, 0.45);
            background: rgba(16, 185, 129, 0.12);
        }
        .probe-pop-badge svg { flex-shrink: 0; opacity: 0.95; }
        .det-obs-hub {
            margin-bottom: 16px;
            padding: 12px 14px 14px;
            border-radius: 14px;
            border: 1px solid rgba(0, 163, 255, 0.22);
            background: rgba(255, 255, 255, 0.9);
        }
        .det-obs-hub-head { margin-bottom: 10px; }
        .det-obs-hub-title {
            display: block;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: var(--glow);
        }
        .det-obs-hub-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .det-obs-hub-list li {
            font-size: 0.74rem;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.25);
            background: rgba(226, 232, 240, 0.88);
            color: var(--text);
            line-height: 1.3;
        }
        .det-obs-hub-list li.det-obs-inactive {
            opacity: 0.55;
            border-style: dashed;
        }
        .det-obs-hub-note {
            margin: 10px 0 0;
            font-size: 0.7rem;
            color: var(--muted);
            line-height: 1.45;
        }
        .prob-catalog-block {
            margin-bottom: 18px;
            padding: 16px 14px 18px;
            border-radius: 16px;
            border: 1px solid rgba(248, 113, 113, 0.22);
            background: linear-gradient(165deg, rgba(254, 226, 226, 0.35) 0%, rgba(248, 250, 252, 0.95) 55%);
            box-shadow: 0 0 32px rgba(239, 68, 68, 0.06);
        }
        .prob-catalog-head h2 {
            font-size: clamp(1.05rem, 2.5vw, 1.2rem);
            font-weight: 800;
            letter-spacing: -0.02em;
            margin-bottom: 12px;
            color: var(--text);
        }
        .prob-catalog-global h3,
        .prob-catalog-cat-block h3 {
            font-size: 0.68rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--muted);
            margin-bottom: 6px;
        }
        .prob-catalog-sub {
            font-size: 0.68rem;
            color: var(--muted);
            margin: 0 0 8px;
            line-height: 1.4;
        }
        .prob-catalog-ol {
            list-style: none;
            margin: 0 0 18px;
            padding: 0;
        }
        .prob-catalog-ol:last-child { margin-bottom: 0; }
        .prob-catalog-by-cat {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 12px;
        }
        .prob-catalog-cat-block {
            background: rgba(241, 245, 249, 0.95);
            border: 1px solid rgba(0, 163, 255, 0.15);
            border-radius: 12px;
            padding: 10px 10px 12px;
            min-width: 0;
        }
        .prob-catalog-cat-block h3 { margin-top: 0; }
        .prob-catalog-cat-block .prob-catalog-ol { margin-bottom: 0; }
        .rank-section-wrap {
            margin-bottom: 14px;
        }
        .rank-mood-bar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px 16px;
            margin-bottom: 12px;
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px solid rgba(0, 163, 255, 0.28);
            background:
                linear-gradient(135deg, rgba(8, 18, 36, 0.95) 0%, rgba(12, 14, 28, 0.9) 50%, rgba(8, 22, 40, 0.92) 100%);
            box-shadow:
                0 0 0 1px rgba(51, 255, 255, 0.06) inset,
                0 4px 24px rgba(15, 23, 42, 0.06);
            position: relative;
            overflow: hidden;
        }
        .rank-mood-bar::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(105deg, transparent 40%, rgba(0, 163, 255, 0.04) 50%, transparent 60%);
            background-size: 200% 100%;
            animation: rank-scan 4.5s ease-in-out infinite;
            pointer-events: none;
            opacity: 0.85;
        }
        @keyframes rank-scan {
            0%, 100% { background-position: 130% 0; }
            50% { background-position: -30% 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .rank-mood-bar::before { animation: none; opacity: 0.35; }
        }
        @media (max-width: 768px) {
            .rank-mood-bar::before { animation: none; opacity: 0.25; }
        }
        .rank-mood-label {
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
            position: relative;
            z-index: 1;
        }
        .rank-mood-toggle-wrap {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            position: relative;
            z-index: 1;
        }
        .rank-mood-side {
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            transition: color 0.35s ease, text-shadow 0.35s ease;
            color: var(--muted);
        }
        .rank-panels-outer.rank-mood--bad .rank-mood-side--bad,
        .rank-panels-outer.rank-mood--good .rank-mood-side--good {
            color: var(--text);
            text-shadow: 0 0 18px rgba(0, 163, 255, 0.35);
        }
        .rank-panels-outer.rank-mood--good .rank-mood-side--good {
            color: #047857;
            text-shadow: 0 0 20px rgba(16, 185, 129, 0.45);
        }
        .rank-panels-outer.rank-mood--bad .rank-mood-side--bad {
            color: #b91c1c;
            text-shadow: 0 0 18px rgba(248, 113, 113, 0.35);
        }
        .rank-tech-toggle {
            position: relative;
            border: none;
            padding: 0;
            background: transparent;
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        .rank-tech-toggle:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 4px;
            border-radius: 999px;
        }
        .rank-tech-toggle-track {
            display: block;
            width: 56px;
            height: 28px;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(226, 232, 240, 0.92), rgba(255, 255, 255, 0.98));
            border: 1px solid rgba(148, 163, 184, 0.35);
            box-shadow:
                0 0 0 1px rgba(148, 163, 184, 0.25) inset,
                0 2px 8px rgba(2, 132, 199, 0.08);
            position: relative;
            transition: border-color 0.4s ease, box-shadow 0.4s ease;
        }
        .rank-panels-outer.rank-mood--good .rank-tech-toggle-track {
            border-color: rgba(16, 185, 129, 0.55);
            box-shadow:
                0 0 0 1px rgba(16, 185, 129, 0.2) inset,
                0 0 20px rgba(16, 185, 129, 0.2),
                0 2px 8px rgba(2, 132, 199, 0.06);
        }
        .rank-panels-outer.rank-mood--bad .rank-tech-toggle-track {
            border-color: rgba(248, 113, 113, 0.45);
            box-shadow:
                0 0 0 1px rgba(248, 113, 113, 0.15) inset,
                0 0 16px rgba(248, 113, 113, 0.12),
                0 2px 8px rgba(2, 132, 199, 0.06);
        }
        .rank-tech-toggle-thumb {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: linear-gradient(145deg, #475569, #1e293b);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 2px 6px rgba(2, 132, 199, 0.12);
            transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1), background 0.4s ease, box-shadow 0.4s ease;
        }
        .rank-panels-outer.rank-mood--good .rank-tech-toggle-thumb {
            transform: translateX(28px);
            background: linear-gradient(145deg, #34d399, #059669);
            box-shadow:
                0 0 14px rgba(52, 211, 153, 0.55),
                0 2px 6px rgba(15, 23, 42, 0.06);
        }
        .rank-tech-toggle-glow {
            position: absolute;
            inset: -6px;
            border-radius: 999px;
            background: radial-gradient(circle at 50% 50%, rgba(0, 163, 255, 0.2), transparent 70%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }
        .rank-tech-toggle:hover .rank-tech-toggle-glow {
            opacity: 1;
        }
        .rank-mood-hint {
            flex: 1 1 100%;
            margin: 0;
            font-size: 0.7rem;
            color: var(--muted);
            line-height: 1.4;
            position: relative;
            z-index: 1;
        }
        @media (min-width: 720px) {
            .rank-mood-hint { flex: 1 1 auto; margin: 0 0 0 auto; max-width: 42ch; text-align: right; }
        }
        .rank-panels-outer {
            position: relative;
            transition: filter 0.45s ease;
        }
        .rank-panels-outer.rank-mood-flash-good {
            animation: rankMoodFlashGood 0.65s ease-out;
        }
        .rank-panels-outer.rank-mood-flash-bad {
            animation: rankMoodFlashBad 0.65s ease-out;
        }
        @keyframes rankMoodFlashGood {
            0% { filter: brightness(1); box-shadow: 0 0 0 0 transparent; }
            35% {
                filter: brightness(1.08) saturate(1.15);
                box-shadow: 0 0 40px rgba(16, 185, 129, 0.2);
            }
            100% { filter: brightness(1); box-shadow: none; }
        }
        @keyframes rankMoodFlashBad {
            0% { filter: brightness(1); }
            35% {
                filter: brightness(1.06) saturate(1.1);
                box-shadow: 0 0 36px rgba(248, 113, 113, 0.18);
            }
            100% { filter: brightness(1); box-shadow: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .rank-panels-outer.rank-mood-flash-good,
            .rank-panels-outer.rank-mood-flash-bad { animation: none; }
            .rank-tech-toggle-thumb { transition-duration: 0.15s; }
        }
        .rank-panels-outer.rank-mood--good .rank-col--bad-only {
            display: none !important;
        }
        .rank-panels-outer.rank-mood--bad .rank-col--good-only {
            display: none !important;
        }
        .rank-panels-outer.rank-mood--good .rank-panels {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            max-width: 720px;
            margin-left: auto;
            margin-right: auto;
        }
        .rank-panels-outer.rank-mood--good .rank-col--both {
            border-color: rgba(16, 185, 129, 0.22);
            box-shadow: 0 0 24px rgba(16, 185, 129, 0.06);
        }
        .rank-panels-outer.rank-mood--bad .rank-col--both {
            border-color: rgba(248, 113, 113, 0.15);
        }
        .rank-panels {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 0;
            transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
        }
        .rank-panels-outer.is-rank-mood-anim .rank-panels {
            opacity: 0.72;
            transform: scale(0.985);
        }
        @media (max-width: 1200px) {
            .rank-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .rank-panels-outer.rank-mood--good .rank-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 720px) {
            .rank-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .rank-panels-outer.rank-mood--good .rank-panels { grid-template-columns: 1fr; }
        }
        @media (max-width: 400px) {
            .rank-panels { grid-template-columns: 1fr; }
        }
        .rank-col {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px 10px 10px;
            font-size: 0.72rem;
            min-width: 0;
        }
        .rank-col h3 {
            font-size: 0.62rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--muted);
            margin-bottom: 4px;
            line-height: 1.25;
        }
        .rank-col .rank-sub {
            font-size: 0.6rem;
            font-weight: 500;
            color: var(--muted);
            opacity: 0.88;
            margin: 0 0 6px;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .rank-col ol {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .rank-more-btn {
            width: 100%;
            margin-top: 8px;
            padding: 8px 10px;
            border-radius: 8px;
            border: 1px dashed rgba(0, 163, 255, 0.35);
            background: rgba(0, 163, 255, 0.06);
            color: var(--glow);
            font: inherit;
            font-size: 0.72rem;
            font-weight: 700;
            cursor: pointer;
            touch-action: manipulation;
            transition: background 0.2s, border-color 0.2s;
        }
        .rank-more-btn:hover,
        .rank-more-btn:focus-visible {
            background: rgba(0, 163, 255, 0.14);
            border-color: rgba(51, 255, 255, 0.45);
            outline: none;
        }
        .rank-more-btn[hidden] {
            display: none !important;
        }
        .rank-line {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            padding: 4px 2px;
            margin: 0;
            border: none;
            border-bottom: 1px solid rgba(0, 163, 255, 0.1);
            background: transparent;
            color: inherit;
            font: inherit;
            text-align: left;
            cursor: pointer;
            border-radius: 6px;
            touch-action: manipulation;
        }
        .rank-line:last-child { border-bottom: none; }
        @media (hover: hover) and (pointer: fine) {
            .rank-line:hover {
                background: rgba(0, 163, 255, 0.08);
            }
        }
        .rank-line .rn-wrap {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            flex-shrink: 0;
            min-width: 2.1em;
        }
        .rank-line .rn {
            font-weight: 800;
            color: var(--accent);
            min-width: 1.1em;
            font-variant-numeric: tabular-nums;
            font-size: 0.72rem;
        }
        .det-rank-trend {
            font-size: 0.78rem;
            font-weight: 900;
            line-height: 1;
            flex-shrink: 0;
        }
        .det-rank-trend--up {
            color: #059669;
        }
        .det-rank-trend--down {
            color: #dc2626;
        }
        .det-vol-trend {
            display: inline-block;
            margin-left: 3px;
            font-size: 0.62rem;
            font-weight: 600;
            line-height: 1;
            vertical-align: 0.08em;
            letter-spacing: -0.04em;
        }
        .det-vol-trend--up {
            color: #059669;
        }
        .det-vol-trend--down {
            color: #dc2626;
        }
        .det-trend-stable {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 1px;
            color: #0284c7;
            vertical-align: middle;
        }
        .det-trend-stable-svg {
            display: block;
        }
        html[data-det-theme='dark'] .det-trend-stable {
            color: #38bdf8;
        }
        .rank-line .rfav {
            width: 22px;
            height: 22px;
            object-fit: contain;
            flex-shrink: 0;
            border-radius: 4px;
        }
        .rank-line .rbody {
            flex: 1;
            min-width: 0;
        }
        .rank-line .rname {
            font-weight: 700;
            font-size: 0.72rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .rank-line .rmeta {
            font-size: 0.65rem;
            color: var(--muted);
            margin-top: 1px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px 6px;
        }
        .rank-ip-tags {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 3px;
            align-items: center;
        }
        .rank-line .rval {
            font-weight: 800;
            color: var(--glow);
            font-variant-numeric: tabular-nums;
            flex-shrink: 0;
            font-size: 0.75rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1px;
            padding: 3px 8px;
            border-radius: 8px;
            min-width: 36px;
            text-align: center;
            cursor: pointer;
        }
        .rank-line .rval .rval-label {
            font-size: 0.52rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            opacity: 0.55;
            line-height: 1;
        }
        .rank-line .rval.rval--spike {
            color: var(--warn);
        }
        .rank-line .rval.rval--down {
            color: #dc2626;
            font-weight: 900;
        }
        .rank-line.rank-line--ext {
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }
        .rank-line.rank-line--ext .rval {
            color: var(--warn);
        }
        section.block { margin-bottom: 36px; }
        .block-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
            padding: 0 4px;
        }
        .block-head h2 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: -0.02em;
        }
        .block-head h2 span { color: var(--accent); font-weight: 600; }
        .block-head small { color: var(--muted); font-size: 0.8rem; }
        /* Carrossel horizontal: dedo, roda do rato → horizontal, arrastar com rato (JS) */
        .row-scroll {
            display: flex;
            gap: 14px;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 18px max(10px, env(safe-area-inset-right)) 30px max(10px, env(safe-area-inset-left));
            min-height: 188px;
            scroll-snap-type: x proximity;
            scroll-padding-inline: max(10px, env(safe-area-inset-left));
            scroll-behavior: auto;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x pan-y pinch-zoom;
            overscroll-behavior-x: contain;
            overscroll-behavior-y: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(56, 189, 248, 0.55) rgba(226, 232, 240, 0.95);
            cursor: grab;
            user-select: none;
            -webkit-user-select: none;
        }
        .row-scroll.is-shelf-dragging {
            cursor: grabbing;
            scroll-snap-type: none;
        }
        .row-scroll .tile {
            touch-action: pan-x pinch-zoom;
        }
        .row-scroll:active { cursor: grabbing; }
        .row-scroll::-webkit-scrollbar {
            height: 9px;
        }
        .row-scroll::-webkit-scrollbar-track {
            background: #e8eef4;
            border-radius: 10px;
            margin: 0 12px;
            box-shadow: inset 0 0 10px rgba(148, 163, 184, 0.12);
        }
        .row-scroll::-webkit-scrollbar-thumb {
            background: linear-gradient(
                90deg,
                rgba(56, 189, 248, 0.55) 0%,
                rgba(14, 165, 233, 0.45) 50%,
                rgba(59, 130, 246, 0.4) 100%
            );
            border-radius: 10px;
            border: 2px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 0 12px rgba(14, 165, 233, 0.2);
        }
        .row-scroll::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(
                90deg,
                rgba(125, 211, 252, 0.75) 0%,
                rgba(56, 189, 248, 0.6) 100%
            );
            box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
        }
        @media (hover: none) and (pointer: coarse) {
            .row-scroll {
                scrollbar-width: none;
            }
            .row-scroll::-webkit-scrollbar {
                display: none;
            }
        }
        .shelf-row-wrap {
            position: relative;
            margin: 0 -4px;
        }
        .shelf-scroll-hint {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 48px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 6px;
            pointer-events: none;
            z-index: 2;
            background: linear-gradient(to left, var(--bg) 22%, rgba(248, 250, 252, 0.92) 52%, transparent 100%);
            font-size: 1.85rem;
            font-weight: 300;
            line-height: 1;
            color: var(--accent-catellix);
            text-shadow: 0 0 14px rgba(0, 163, 255, 0.25);
            opacity: 0;
            transition: opacity 0.35s ease;
        }
        .shelf-scroll-hint.visible {
            opacity: 1;
            animation: shelf-hint-nudge 1.1s ease-in-out infinite;
        }
        @keyframes shelf-hint-nudge {
            0%, 100% { transform: translateX(0); opacity: 0.55; }
            50% { transform: translateX(6px); opacity: 1; }
        }
        .shelf-block {
            margin-bottom: 8px;
            overflow: visible;
        }
        /* Um serviço sozinho na “categoria”: sem cabeçalho de prateleira (evita «bank (1)»). */
        .shelf-block--no-title .shelf-row-wrap {
            margin-top: 2px;
        }
        .tile {
            flex: 0 0 auto;
            width: 156px;
            scroll-snap-align: start;
            scroll-snap-stop: normal;
            background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: visible;
            text-decoration: none;
            color: inherit;
            display: flex;
            flex-direction: column;
            /* Só border-color: animar box-shadow/transform em dezenas de tiles mata o compositor */
            transition: border-color 0.12s ease;
            cursor: pointer;
            text-align: left;
            font: inherit;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
            position: relative;
            transform-style: flat;
            box-shadow:
                0 4px 14px rgba(2, 132, 199, 0.12),
                0 0 0 1px rgba(0, 163, 255, 0.12),
                0 0 18px rgba(0, 163, 255, 0.07);
        }
        /* Faixas de latência (ms) — degradê escuro + acento; padrão próximo a indicadores globais de RTT */
        .tile.lat-tier-ex,
        .list-row.lat-tier-ex {
            /* Excelente ≤80 ms — #00C853 */
            --lat-glow: rgba(0, 200, 83, 0.22);
            --lat-glow2: rgba(0, 150, 60, 0.08);
            --lat-edge: rgba(105, 240, 174, 0.5);
            --lat-edge-soft: rgba(0, 200, 83, 0.22);
            --lat-poster-top: rgba(0, 200, 83, 0.16);
            --lat-val: #69f0ae;
            --tile-edge: rgba(0, 200, 83, 0.45);
        }
        .tile.lat-tier-good,
        .list-row.lat-tier-good {
            /* Boa ≤150 ms — #FFD600 */
            --lat-glow: rgba(255, 214, 0, 0.2);
            --lat-glow2: rgba(255, 193, 7, 0.08);
            --lat-edge: rgba(255, 235, 59, 0.55);
            --lat-edge-soft: rgba(255, 214, 0, 0.28);
            --lat-poster-top: rgba(255, 193, 7, 0.2);
            --lat-val: #fff176;
            --tile-edge: rgba(255, 214, 0, 0.48);
        }
        .tile.lat-tier-mid,
        .list-row.lat-tier-mid {
            /* Média ≤250 ms — #FF6D00 */
            --lat-glow: rgba(255, 109, 0, 0.22);
            --lat-glow2: rgba(230, 81, 0, 0.09);
            --lat-edge: rgba(255, 171, 64, 0.55);
            --lat-edge-soft: rgba(255, 109, 0, 0.28);
            --lat-poster-top: rgba(255, 109, 0, 0.22);
            --lat-val: #ffcc80;
            --tile-edge: rgba(255, 109, 0, 0.5);
        }
        .tile.lat-tier-warn,
        .list-row.lat-tier-warn {
            /* Ruim (251–500 ms) — vermelho */
            --lat-glow: rgba(213, 0, 0, 0.22);
            --lat-glow2: rgba(183, 28, 28, 0.09);
            --lat-edge: rgba(239, 68, 68, 0.58);
            --lat-edge-soft: rgba(213, 0, 0, 0.28);
            --lat-poster-top: rgba(198, 40, 40, 0.26);
            --lat-val: #ff8a80;
            --tile-edge: rgba(229, 57, 53, 0.52);
        }
        .tile.lat-tier-bad,
        .list-row.lat-tier-bad {
            /* Crítica (501–1200 ms) — roxo */
            --lat-glow: rgba(106, 27, 154, 0.28);
            --lat-glow2: rgba(74, 20, 140, 0.12);
            --lat-edge: rgba(186, 104, 200, 0.55);
            --lat-edge-soft: rgba(106, 27, 154, 0.32);
            --lat-poster-top: rgba(74, 20, 140, 0.3);
            --lat-val: #ce93d8;
            --tile-edge: rgba(171, 71, 188, 0.5);
        }
        .tile.lat-tier-timeout,
        .list-row.lat-tier-timeout {
            --lat-glow: rgba(74, 20, 140, 0.35);
            --lat-glow2: rgba(49, 27, 146, 0.14);
            --lat-edge: rgba(149, 117, 205, 0.6);
            --lat-edge-soft: rgba(74, 20, 140, 0.38);
            --lat-poster-top: rgba(49, 27, 146, 0.35);
            --lat-val: #e1bee7;
            --tile-edge: rgba(149, 117, 205, 0.55);
        }
        .tile.lat-tier-fail,
        .list-row.lat-tier-fail {
            --lat-glow: rgba(127, 29, 29, 0.28);
            --lat-glow2: rgba(185, 28, 28, 0.11);
            --lat-edge: rgba(248, 113, 113, 0.5);
            --lat-edge-soft: rgba(239, 68, 68, 0.26);
            --lat-poster-top: rgba(127, 29, 29, 0.3);
            --lat-val: #f87171;
            --tile-edge: rgba(239, 68, 68, 0.52);
        }
        .tile.lat-tier-unk,
        .list-row.lat-tier-unk {
            --lat-glow: rgba(100, 116, 139, 0.16);
            --lat-glow2: rgba(71, 85, 105, 0.07);
            --lat-edge: rgba(148, 163, 184, 0.4);
            --lat-edge-soft: rgba(100, 116, 139, 0.22);
            --lat-poster-top: rgba(100, 116, 139, 0.14);
            --lat-val: #64748b;
            --tile-edge: rgba(100, 116, 139, 0.4);
        }
        .tile[class*="lat-tier-"] {
            background:
                radial-gradient(118% 100% at 100% -6%, var(--lat-glow), transparent 52%),
                radial-gradient(85% 70% at -8% 102%, var(--lat-glow2), transparent 48%),
                linear-gradient(168deg, #ffffff 0%, #f8fafc 52%, #f1f5f9 100%);
            border-color: var(--lat-edge-soft);
            box-shadow:
                0 4px 18px rgba(2, 132, 199, 0.08),
                0 0 0 1px var(--lat-edge-soft),
                0 0 22px var(--lat-glow);
        }
        .tile[class*="lat-tier-"]::before {
            content: '';
            position: absolute;
            left: 10%;
            right: 10%;
            top: 22px;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg, transparent, var(--lat-edge), transparent);
            opacity: 0.88;
            pointer-events: none;
            z-index: 4;
        }
        .tile[class*="lat-tier-"]::after {
            content: '';
            position: absolute;
            left: 0;
            top: 24px;
            bottom: 0;
            width: 3px;
            border-radius: var(--radius) 0 0 var(--radius);
            background: linear-gradient(180deg, var(--lat-edge), transparent 75%);
            opacity: 0.92;
            pointer-events: none;
            z-index: 2;
        }
        .tile[class*="lat-tier-"] .poster {
            background: linear-gradient(
                158deg,
                var(--lat-poster-top),
                rgba(248, 250, 252, 0.98) 48%,
                rgba(226, 232, 240, 0.95) 100%
            );
        }
        .tile[class*="lat-tier-"] .poster .poster-lat:not(.bad):not(.unk) .lat-val {
            color: var(--lat-val);
        }
        .list-lat-pill {
            flex-shrink: 0;
            font-size: 0.55rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 4px 8px;
            border-radius: 8px;
            line-height: 1.15;
            max-width: 96px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .tile-lat-pill {
            display: inline-block;
            width: fit-content;
            max-width: 100%;
            margin-bottom: 6px;
            font-size: 0.52rem;
            font-weight: 800;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 6px;
            line-height: 1.15;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .tile-lat-pill.lat-tier-ex,
        .list-lat-pill.lat-tier-ex {
            color: #ecfdf5;
            background: rgba(6, 78, 59, 0.52);
            border: 1px solid rgba(52, 211, 153, 0.38);
        }
        .tile-lat-pill.lat-tier-good,
        .list-lat-pill.lat-tier-good {
            color: #ecfeff;
            background: rgba(14, 116, 144, 0.45);
            border: 1px solid rgba(45, 212, 191, 0.38);
        }
        .tile-lat-pill.lat-tier-mid,
        .list-lat-pill.lat-tier-mid {
            color: #fefce8;
            background: rgba(113, 63, 18, 0.5);
            border: 1px solid rgba(250, 204, 21, 0.42);
        }
        .tile-lat-pill.lat-tier-warn,
        .list-lat-pill.lat-tier-warn {
            color: #ffebee;
            background: rgba(183, 28, 28, 0.52);
            border: 1px solid rgba(229, 57, 53, 0.5);
        }
        .tile-lat-pill.lat-tier-bad,
        .list-lat-pill.lat-tier-bad {
            color: #f3e5f5;
            background: rgba(74, 20, 140, 0.55);
            border: 1px solid rgba(171, 71, 188, 0.48);
        }
        .tile-lat-pill.lat-tier-timeout,
        .list-lat-pill.lat-tier-timeout {
            color: #f3e5f5;
            background: rgba(49, 27, 146, 0.58);
            border: 1px solid rgba(149, 117, 205, 0.55);
        }
        .tile-lat-pill {
            transition: background 0.35s ease, border-color 0.35s ease, color 0.3s ease;
        }
        .tile-lat-pill.lat-tier-fail,
        .list-lat-pill.lat-tier-fail {
            color: #fef2f2;
            background: rgba(88, 28, 28, 0.58);
            border: 1px solid rgba(248, 113, 113, 0.42);
        }
        .tile-lat-pill.lat-tier-unk,
        .list-lat-pill.lat-tier-unk {
            color: #1e293b;
            background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
            border: 1px solid #94a3b8;
            font-weight: 800;
        }
        .grid-view .tile-lat-pill {
            font-size: 0.46rem;
            padding: 2px 6px;
            margin-bottom: 4px;
            letter-spacing: 0.05em;
        }
        .tile[class*="lat-tier-"] .tile-sparkline-wrap {
            border-top: 1px solid var(--lat-edge-soft);
            background: linear-gradient(180deg, rgba(2, 132, 199, 0.08), rgba(241, 245, 249, 0.92));
        }
        .tile[class*="lat-tier-"] .tile-more-btn {
            border-top-color: var(--lat-edge-soft);
        }
        @media (hover: hover) and (pointer: fine) {
            .tile[class*="lat-tier-"]:hover,
            .tile[class*="lat-tier-"]:focus-within {
                border-color: var(--lat-edge);
                outline: 1px solid rgba(56, 189, 248, 0.35);
                outline-offset: 0;
            }
        }
        .tile-3d:focus-visible {
            outline: 2px solid rgba(251, 146, 60, 0.75);
            outline-offset: 2px;
        }
        @media (hover: hover) and (pointer: fine) {
            /* Hover só borda + outline — sem transform nem animação de box-shadow */
            .tile:hover, .tile:focus-within {
                border-color: rgba(51, 255, 255, 0.48);
                outline: 1px solid rgba(56, 189, 248, 0.3);
                outline-offset: 0;
            }
        }
        @media (hover: none) {
            .tile:active {
                opacity: 0.92;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .tile {
                transition: none;
            }
        }
        .tile .poster {
            aspect-ratio: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            padding: 28px 8px 8px 6px;
            background: linear-gradient(160deg, rgba(0, 163, 255, 0.1), rgba(241, 245, 249, 0.98));
            position: relative;
            border-radius: 0;
            overflow: hidden;
        }
        .tile .poster .poster-logo-wrap {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
        }
        .tile .poster .poster-logo-wrap img {
            width: 52px;
            height: 52px;
            max-width: 100%;
            object-fit: contain;
            filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
        }
        .tile .poster .poster-lat {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            line-height: 1.05;
            min-width: 44px;
        }
        .tile .poster .poster-lat .lat-val {
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--glow);
        }
        .tile .poster .poster-lat .lat-unit {
            font-size: 0.58rem;
            font-weight: 700;
            color: var(--muted);
            text-transform: uppercase;
        }
        .tile .poster .poster-lat.bad .lat-val { color: var(--bad); }
        .tile .poster .poster-lat.unk .lat-val { color: var(--muted); font-size: 0.72rem; }
        .tile .poster .poster-rank {
            position: absolute;
            top: 26px;
            left: 5px;
            font-size: 0.6rem;
            font-weight: 800;
            color: var(--accent-catellix);
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(0, 163, 255, 0.22);
            padding: 2px 6px;
            border-radius: 6px;
            z-index: 2;
        }
        .tile-report-tag {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 6;
            margin: 0;
            padding: 5px 6px;
            border: none;
            border-radius: var(--radius) var(--radius) 0 0;
            background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
            color: #0a0a0a;
            font-family: inherit;
            font-size: 0.56rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            cursor: pointer;
            touch-action: manipulation;
            box-shadow: 0 2px 12px rgba(234, 88, 12, 0.45);
            line-height: 1.15;
        }
        .tile-report-tag:hover,
        .tile-report-tag:focus-visible {
            filter: brightness(1.08);
            outline: none;
            box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.5), 0 4px 16px rgba(234, 88, 12, 0.5);
        }
        .tile-sparkline-wrap {
            padding: 5px 10px 4px;
            background: linear-gradient(180deg, rgba(0, 163, 255, 0.08) 0%, rgba(241, 245, 249, 0.9) 50%, rgba(255, 255, 255, 0.98) 100%);
            border-top: 1px solid rgba(56, 189, 248, 0.22);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
        }
        .tile-complaints-trend-wrap {
            padding: 3px 8px 4px;
            background: linear-gradient(180deg, rgba(254, 242, 242, 0.65), rgba(255, 255, 255, 0.88));
            border-top: 1px solid rgba(248, 113, 113, 0.28);
        }
        .tile-complaints-trend-inner {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-height: 0;
        }
        .tile-complaints-trend-label {
            font-size: 0.58rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(185, 28, 28, 0.88);
            line-height: 1.2;
        }
        .tile-spark-svg {
            width: 100%;
            height: 30px;
            display: block;
            overflow: visible;
        }
        .tile-spark-svg--latency .tile-spark-area {
            fill: rgba(2, 132, 199, 0.16);
        }
        .tile-spark-svg--latency .tile-spark-glow {
            stroke: rgba(14, 165, 233, 0.38);
            stroke-width: 4.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .tile-spark-svg--latency .tile-spark-line {
            stroke: #0284c7;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .tile-spark-svg--latency .tile-spark-empty {
            stroke: rgba(14, 165, 233, 0.42);
        }
        .tile-spark-svg--latency .tile-spark-dot {
            fill: #0ea5e9;
            filter: drop-shadow(0 0 3px rgba(14, 165, 233, 0.55));
        }
        .tile-spark-svg--complaints .tile-spark-area {
            fill: rgba(239, 68, 68, 0.14);
        }
        .tile-spark-svg--complaints .tile-spark-glow {
            stroke: rgba(248, 113, 113, 0.42);
            stroke-width: 4.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .tile-spark-svg--complaints .tile-spark-line {
            stroke: #dc2626;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .tile-spark-svg--complaints .tile-spark-empty {
            stroke: rgba(220, 38, 38, 0.48);
        }
        .tile-spark-svg--complaints .tile-spark-dot {
            fill: #ef4444;
            filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.5));
        }
        .grid-view .tile-spark-svg {
            height: 26px;
        }
        .tile-info-row {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .tile-info-svg {
            width: 17px;
            height: 17px;
            flex-shrink: 0;
            opacity: 1;
            color: var(--glow);
            display: block;
        }
        .tile-info-ico {
            width: 17px;
            height: 17px;
            flex-shrink: 0;
            display: block;
            object-fit: contain;
        }
        .tile-info-txt {
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.04em;
        }
        .tile-more-btn {
            flex-shrink: 0;
            width: 100%;
            margin: 0;
            padding: 8px 6px 9px;
            border: none;
            border-top: 1px solid rgba(0, 163, 255, 0.22);
            border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
            background: linear-gradient(180deg, rgba(0, 163, 255, 0.14), rgba(255, 255, 255, 0.92));
            color: var(--glow);
            font-size: 0.72rem;
            font-weight: 800;
            line-height: 1.2;
            cursor: pointer;
            font-family: inherit;
            touch-action: manipulation;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
            min-width: 0;
            position: relative;
            z-index: 12;
        }
        /* Clique vai sempre para o <button> (evita hits presos em SVG / spans no carrossel Top 10). */
        .tile-more-btn .tile-info-svg,
        .tile-more-btn .tile-info-ico,
        .tile-more-btn .tile-info-row,
        .tile-more-btn .tile-info-txt {
            pointer-events: none;
        }
        .tile-more-btn:hover,
        .tile-more-btn:focus-visible {
            background: linear-gradient(180deg, rgba(0, 163, 255, 0.28), rgba(255, 255, 255, 0.96));
            outline: none;
        }
        .tile .meta {
            flex: 1;
            min-height: 0;
            padding: 10px 10px 8px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .tile-ip-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-bottom: 5px;
            align-items: center;
        }
        .ip-tag {
            font-size: 0.48rem;
            font-weight: 800;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            padding: 2px 5px;
            border-radius: 4px;
            line-height: 1.15;
            flex-shrink: 0;
        }
        .ip-tag--v4 {
            color: #0c4a6e;
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(59, 130, 246, 0.72));
            border: 1px solid rgba(147, 197, 253, 0.55);
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.22);
        }
        .ip-tag--v6 {
            color: #1c1917;
            background: linear-gradient(135deg, #fde047, #eab308 55%, #ca8a04);
            border: 1px solid rgba(253, 224, 71, 0.95);
            box-shadow: 0 0 12px rgba(234, 179, 8, 0.32);
        }
        .ip-tag--compact {
            font-size: 0.45rem;
            padding: 1px 4px;
            letter-spacing: 0.06em;
        }
        .tile-community-cnt {
            position: absolute;
            top: -1px;
            right: -1px;
            z-index: 8;
            font-size: 0.58rem;
            font-weight: 800;
            color: #fff;
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            padding: 3px 7px 2px;
            border-radius: 0 var(--radius) 0 8px;
            cursor: pointer;
            line-height: 1.2;
            border: none;
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.45);
            letter-spacing: 0.03em;
            transition: border-color 0.12s ease, background 0.12s ease;
            touch-action: manipulation;
        }
        .tile-community-cnt:hover {
            background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
            outline: 1px solid rgba(254, 202, 202, 0.5);
            outline-offset: 0;
        }
        /* ── Star Rating Button on Tile ── */
        .tile-star-btn {
            position: absolute;
            /* Abaixo da faixa «Relatar problema»; alinhado à faixa do # / logo (evita sobrepor o cabeçalho laranja). */
            top: 30px;
            right: 5px;
            bottom: auto;
            z-index: 7;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            max-width: calc(100% - 52px);
            background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(245,158,11,0.14));
            border: 1px solid rgba(251,191,36,0.45);
            border-radius: 8px;
            padding: 4px 7px;
            cursor: pointer;
            font-size: 0.58rem;
            font-weight: 800;
            color: #a16207;
            line-height: 1;
            transition: background 0.12s ease, border-color 0.12s ease;
            touch-action: manipulation;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
        }
        .tile-star-btn:hover {
            background: linear-gradient(135deg, rgba(251,191,36,0.36), rgba(245,158,11,0.24));
            border-color: rgba(253, 224, 71, 0.6);
        }
        .tile-star-btn .star-ic { font-size: 0.7rem; }
        .tile-star-btn .star-avg { font-variant-numeric: tabular-nums; }
        /* ── Star Rating Modal ── */
        .star-modal { max-width: 380px; text-align: center; padding: 28px 24px 22px; }
        .star-modal h3 { font-size: 1rem; font-weight: 800; color: var(--text); margin: 0 0 4px; }
        .star-modal .star-svc-name { font-size: 0.78rem; color: var(--muted); margin-bottom: 16px; display: block; }
        .star-picker { display: flex; justify-content: center; gap: 8px; margin: 18px 0 6px; }
        .star-picker button {
            background: none; border: none; cursor: pointer;
            font-size: 2rem; line-height: 1;
            color: rgba(148,163,184,0.35);
            transition: color .12s, transform .12s;
            padding: 4px;
        }
        .star-picker button:hover,
        .star-picker button.active { color: #fbbf24; transform: scale(1.15); }
        .star-picker button.active { text-shadow: 0 0 12px rgba(251,191,36,0.5); }
        .star-selected-label { font-size: 0.78rem; color: var(--muted); min-height: 1.2em; margin-bottom: 14px; }
        .star-auth-section { margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(148,163,184,0.1); }
        .star-auth-section p { font-size: 0.76rem; color: var(--muted); line-height: 1.4; margin-bottom: 10px; }
        .star-auth-btns { display: flex; flex-direction: column; gap: 8px; }
        .star-auth-btns .star-google-host { display: flex; justify-content: center; }
        .star-email-row { display: flex; gap: 6px; }
        .star-email-row input {
            flex: 1; padding: 8px 10px; border-radius: 8px;
            border: 1px solid rgba(148,163,184,0.18);
            background: rgba(255, 255, 255, 0.92); color: var(--text);
            font-size: 0.78rem;
        }
        .star-email-row button {
            padding: 8px 14px; border-radius: 8px; border: none;
            background: linear-gradient(135deg, var(--glow), #0284c7);
            color: #fff; font-weight: 700; font-size: 0.75rem;
            cursor: pointer; white-space: nowrap;
        }
        .star-code-row { display: flex; gap: 6px; margin-top: 8px; }
        .star-code-row input {
            flex: 1; padding: 8px 10px; border-radius: 8px;
            border: 1px solid rgba(148,163,184,0.18);
            background: rgba(255, 255, 255, 0.92); color: var(--text);
            font-size: 0.78rem; text-align: center; letter-spacing: 0.2em;
        }
        .star-code-row button {
            padding: 8px 14px; border-radius: 8px; border: none;
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff; font-weight: 700; font-size: 0.75rem;
            cursor: pointer; white-space: nowrap;
        }
        .star-msg { font-size: 0.76rem; margin-top: 8px; min-height: 1.2em; }
        .star-msg.ok {
            color: #047857;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            text-align: left;
            line-height: 1.35;
        }
        .star-msg.err { color: #b91c1c; }
        .star-ok-tick {
            flex-shrink: 0;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: rgba(16, 185, 129, 0.22);
            color: #047857;
            font-weight: 800;
            font-size: 15px;
            line-height: 26px;
            text-align: center;
            box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.35);
        }
        .star-ok-text { flex: 1; min-width: 0; }
        /* ── Live Report Toast ── */
        .live-toast-rail {
            position: fixed;
            top: calc(16px + 52px + env(safe-area-inset-top, 0px));
            right: 16px;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
            max-width: 380px;
            width: calc(100% - 32px);
        }
        @media (max-width: 500px) {
            .live-toast-rail {
                top: calc(8px + 52px + env(safe-area-inset-top, 0px));
                right: 8px;
                max-width: calc(100% - 16px);
            }
        }
        @media (max-width: 720px) {
            .live-toast-rail {
                top: calc(8px + 90px + env(safe-area-inset-top, 0px));
            }
        }
        .live-toast {
            pointer-events: auto;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            background: linear-gradient(135deg, #ffffff, #f8fafc);
            border: 1px solid rgba(2, 132, 199, 0.2);
            border-left: 3px solid #f59e0b;
            border-radius: 12px;
            padding: 12px 14px;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: 0 8px 28px rgba(2, 132, 199, 0.12), 0 0 20px rgba(245, 158, 11, 0.1);
            animation: toastIn .35s cubic-bezier(.16,1,.3,1) forwards;
            transform: translateX(110%);
            opacity: 0;
        }
        .live-toast.out {
            animation: toastOut .3s ease-in forwards;
        }
        @keyframes toastIn {
            0% { transform: translateX(110%); opacity: 0; }
            100% { transform: translateX(0); opacity: 1; }
        }
        @keyframes toastOut {
            0% { transform: translateX(0); opacity: 1; }
            100% { transform: translateX(110%); opacity: 0; }
        }
        .live-toast-icon {
            flex-shrink: 0;
            width: 32px; height: 32px;
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem;
            background: rgba(245,158,11,0.12);
        }
        .live-toast-body { flex: 1; min-width: 0; }
        .live-toast-title {
            font-size: 0.72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #fbbf24;
            margin-bottom: 2px;
        }
        .live-toast-svc {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .live-toast-who {
            font-size: 0.7rem;
            color: var(--muted);
            margin-top: 2px;
        }
        .live-toast-who strong { color: #1d4ed8; font-weight: 700; }
        .live-toast-bar {
            height: 2px;
            background: linear-gradient(90deg, #fbbf24, rgba(251,191,36,0.1));
            margin-top: 6px;
            border-radius: 1px;
            animation: toastBar 3s linear forwards;
        }
        @keyframes toastBar { from { width: 100%; } to { width: 0%; } }
        .list-row-extras {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }
        .list-row-metrics {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }
        .list-row-cta {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .list-lat-slot {
            display: contents;
        }
        .list-report-btn {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            flex-shrink: 0;
            padding: 7px 12px;
            min-height: 36px;
            min-width: 0;
            border-radius: 11px;
            border: 1px solid rgba(234, 88, 12, 0.55);
            background: linear-gradient(145deg, rgba(254, 215, 170, 0.62) 0%, rgba(251, 146, 60, 0.42) 42%, rgba(249, 115, 22, 0.34) 100%);
            color: #7c2d12;
            font-size: 0.62rem;
            font-weight: 900;
            line-height: 1.1;
            cursor: pointer;
            font-family: inherit;
            touch-action: manipulation;
            margin-right: 0;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.35) inset,
                0 1px 3px rgba(154, 52, 18, 0.12);
            animation: det-t10-soft-halo 2.5s ease-in-out infinite;
        }
        .list-report-btn:hover,
        .list-report-btn:focus-visible {
            filter: brightness(1.05);
            outline: none;
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.35) inset,
                0 0 0 3px rgba(251, 146, 60, 0.28),
                0 1px 3px rgba(154, 52, 18, 0.12);
        }
        .list-report-shine {
            position: absolute;
            top: -35%;
            left: 0;
            width: 42%;
            height: 170%;
            pointer-events: none;
            z-index: 0;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.05) 28%,
                rgba(255, 255, 255, 0.65) 48%,
                rgba(255, 255, 255, 0.12) 62%,
                transparent 100%
            );
            opacity: 0.9;
            animation: det-t10-unified-shine 2.85s linear infinite;
        }
        .list-report-label {
            position: relative;
            z-index: 1;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
        }
        @media (prefers-reduced-motion: reduce) {
            .list-report-btn {
                animation: none;
            }
            .list-report-shine {
                animation: none;
                opacity: 0.18;
                transform: skewX(-20deg);
            }
        }
        .list-sparkline-wrap {
            flex-shrink: 0;
            width: 92px;
            padding: 4px 6px;
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(0, 163, 255, 0.06), rgba(241, 245, 249, 0.85));
            border: 1px solid rgba(56, 189, 248, 0.16);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }
        .list-sparkline-wrap .tile-spark-svg {
            width: 100%;
            height: 30px;
        }
        .list-more-btn {
            flex-shrink: 0;
            width: auto;
            min-width: 72px;
            min-height: 36px;
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid rgba(0, 163, 255, 0.45);
            background: rgba(0, 163, 255, 0.18);
            color: var(--glow);
            font-size: 0.62rem;
            font-weight: 800;
            line-height: 1.15;
            cursor: pointer;
            font-family: inherit;
            touch-action: manipulation;
            margin-right: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .list-more-btn .tile-info-svg {
            width: 15px;
            height: 15px;
        }
        .list-more-btn .tile-info-ico {
            width: 15px;
            height: 15px;
        }
        .list-more-btn .tile-info-svg,
        .list-more-btn .tile-info-ico,
        .list-more-btn .tile-info-row,
        .list-more-btn .tile-info-txt {
            pointer-events: none;
        }
        .grid-view .tile-more-btn {
            padding-left: 4px;
            padding-right: 4px;
        }
        .grid-view .tile-info-txt {
            font-size: 0.62rem;
        }
        .rank-col--community .rank-sub {
            font-size: 0.68rem;
            line-height: 1.4;
            color: var(--warn);
            opacity: 0.95;
        }
        .modal-sheet--community {
            max-width: 400px;
        }
        .modal-sheet--community .cr-disclaimer {
            font-size: 0.72rem;
            color: var(--muted);
            line-height: 1.45;
            margin-bottom: 12px;
        }
        .modal-sheet--community .cr-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 12px;
        }
        .modal-sheet--community .cr-btn {
            flex: 1;
            min-width: 100px;
            padding: 10px 14px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--det-field);
            color: var(--text);
            font: inherit;
            font-weight: 700;
            font-size: 0.88rem;
            cursor: pointer;
            touch-action: manipulation;
        }
        .modal-sheet--community .cr-btn-primary {
            background: rgba(0, 163, 255, 0.25);
            border-color: rgba(51, 255, 255, 0.45);
            color: var(--glow);
        }
        .modal-sheet--community label[for="crPhone"] {
            display: block;
            font-size: 0.78rem;
            color: var(--muted);
            margin-bottom: 6px;
            line-height: 1.35;
        }
        .modal-sheet--community #crPhone,
        .modal-sheet--community #crEmail,
        .modal-sheet--community #crCode {
            width: 100%;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--det-field);
            color: var(--text);
            font: inherit;
            margin-bottom: 12px;
        }
        .modal-sheet--community #crCode {
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: 0.4em;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }
        .modal-sheet--community label[for="crChannel"],
        .modal-sheet--community label[for="crEmail"],
        .modal-sheet--community label[for="crCode"] {
            display: block;
            font-size: 0.78rem;
            color: var(--muted);
            margin-bottom: 6px;
            line-height: 1.35;
        }
        .modal-sheet--community #crChannel {
            width: 100%;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--det-field);
            color: var(--text);
            font: inherit;
            margin-bottom: 12px;
        }
        .modal-sheet--community .cr-code-panel {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid rgba(148, 163, 184, 0.15);
        }
        .modal-sheet--community .cr-msg {
            margin-top: 10px;
            font-size: 0.82rem;
            line-height: 1.4;
            min-height: 1.4em;
        }
        .modal-sheet--community .cr-msg.ok { color: var(--ok); }
        .modal-sheet--community .cr-msg.err { color: var(--bad); }
        .modal-sheet--community a.cr-open-det-explainer {
            color: #0369a1;
            text-decoration: underline;
            text-underline-offset: 2px;
            font-weight: 600;
            white-space: nowrap;
        }
        html[data-det-theme='dark'] .modal-sheet--community a.cr-open-det-explainer {
            color: #38bdf8;
        }
        .modal-sheet--community a.cr-open-det-explainer:hover {
            opacity: 0.9;
        }
        .modal-sheet--community-wide { max-width: min(440px, 96vw); }
        .cr-meta-lead { font-size: 0.8rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
        .cr-reason-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: min(220px, 40vh);
            overflow-y: auto;
            padding: 4px 2px;
        }
        .cr-reason-item {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding: 10px 10px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--det-field);
            cursor: pointer;
            text-align: left;
        }
        .cr-reason-item:has(input:checked) {
            border-color: rgba(51, 255, 255, 0.45);
            background: rgba(0, 163, 255, 0.12);
        }
        .cr-reason-item input { margin-top: 3px; flex-shrink: 0; }
        .cr-reason-item span { font-size: 0.78rem; line-height: 1.35; color: var(--text); }
        .cr-reason-item small { display: block; font-size: 0.68rem; color: var(--muted); margin-top: 4px; font-weight: 500; }
        .cr-comment-ta {
            width: 100%;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--det-field);
            color: var(--text);
            font: inherit;
            font-size: 0.82rem;
            resize: vertical;
            min-height: 72px;
            margin-bottom: 6px;
        }
        .cr-mod-hint {
            font-size: 0.72rem;
            line-height: 1.45;
            margin: 0 0 10px;
            padding: 8px 10px;
            border-radius: 8px;
            border: 1px solid rgba(100, 116, 139, 0.25);
            background: rgba(148, 163, 184, 0.08);
            color: var(--muted);
        }
        .cr-mod-hint.cr-mod-hint--ok {
            border-color: rgba(16, 185, 129, 0.35);
            background: rgba(16, 185, 129, 0.08);
            color: #047857;
        }
        .cr-mod-hint.cr-mod-hint--bad {
            border-color: rgba(239, 68, 68, 0.4);
            background: rgba(239, 68, 68, 0.08);
            color: #b91c1c;
        }
        html[data-det-theme='dark'] .cr-mod-hint {
            border-color: rgba(148, 163, 184, 0.22);
            background: rgba(15, 23, 42, 0.55);
            color: #94a3b8;
        }
        html[data-det-theme='dark'] .cr-mod-hint.cr-mod-hint--ok {
            border-color: rgba(52, 211, 153, 0.35);
            background: rgba(16, 185, 129, 0.12);
            color: #6ee7b7;
        }
        html[data-det-theme='dark'] .cr-mod-hint.cr-mod-hint--bad {
            border-color: rgba(248, 113, 113, 0.4);
            background: rgba(239, 68, 68, 0.12);
            color: #fca5a5;
        }
        .cr-check-row { margin-bottom: 8px; }
        .cr-check { font-size: 0.76rem; color: var(--muted); line-height: 1.4; cursor: pointer; display: flex; gap: 8px; align-items: flex-start; }
        .cr-check input { margin-top: 3px; }
        .cr-google-host { min-height: 44px; display: flex; align-items: center; justify-content: center; }
        .tile-trust-score {
            position: absolute;
            bottom: 6px;
            left: 6px;
            z-index: 3;
            font-size: 0.58rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            padding: 3px 7px;
            border-radius: 999px;
            background: rgba(16, 185, 129, 0.2);
            color: #047857;
            border: 1px solid rgba(52, 211, 153, 0.35);
        }
        .tile-trust-score.warn { background: rgba(245, 158, 11, 0.18); color: #b45309; border-color: rgba(251, 191, 36, 0.35); }
        .tile-trust-score.bad { background: rgba(239, 68, 68, 0.15); color: #b91c1c; border-color: rgba(248, 113, 113, 0.35); }
        .tile .poster { position: relative; }
        /* Detalhe do serviço: bloco de comentários (visual principal em detector.html inline; aqui só evita regressão) */
        .modal-sheet--svc-detail .svc-public-feedback {
            margin-top: 22px;
            margin-bottom: 6px;
        }
        .svc-public-feedback h4.svc-feed-section-title {
            font-size: inherit;
            margin: 0;
            color: inherit;
            letter-spacing: inherit;
        }
        .svc-feedback-item { font-size: 0.78rem; padding: 10px 0; border-top: 1px solid rgba(15, 23, 42, 0.08); }
        .svc-feedback-item:first-of-type { border-top: none; padding-top: 0; }
        .svc-feed-list .svc-feedback-item.svc-feed-card {
            padding: 0;
            border-top: none;
            font-size: inherit;
        }
        .svc-feedback-meta { color: #64748b; font-size: 0.72rem; margin-bottom: 4px; line-height: 1.4; }
        .svc-feedback-meta strong { color: #0f172a; font-weight: 700; }
        .svc-feedback-comment { color: #1e293b; line-height: 1.45; }
        .svc-feedback-empty { color: #64748b; font-size: 0.8rem; margin-top: 8px; line-height: 1.5; }
        .det-fb-replies { margin: 8px 0 0 10px; padding: 0 0 0 12px; border-left: 2px solid rgba(2, 132, 199, 0.25); }
        .det-fb-reply { font-size: 0.74rem; padding: 6px 0; border-top: 1px dashed rgba(15, 23, 42, 0.08); }
        .det-fb-reply:first-child { border-top: none; padding-top: 0; }
        .det-fb-reply-btn {
            margin-top: 6px;
            font-size: 0.7rem;
            padding: 4px 10px;
            border-radius: 8px;
            border: 1px solid rgba(2, 132, 199, 0.35);
            background: rgba(2, 132, 199, 0.08);
            color: #0369a1;
            cursor: pointer;
            font-weight: 600;
        }
        .det-fb-reply-btn:hover { background: rgba(2, 132, 199, 0.16); }

        /* ── Modal Comunidade (score click) ── */
        .community-stats-modal { max-width: 680px; }
        .cs-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
        .cs-header h3 { font-size: 1.05rem; font-weight: 800; color: var(--glow); margin: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cs-score-pill { font-size: 0.82rem; font-weight: 800; padding: 5px 14px; border-radius: 999px; flex-shrink: 0; }
        .cs-score-pill--good { background: rgba(16,185,129,0.18); color: #047857; border: 1px solid rgba(52,211,153,0.35); }
        .cs-score-pill--warn { background: rgba(245,158,11,0.18); color: #b45309; border: 1px solid rgba(251,191,36,0.35); }
        .cs-score-pill--bad  { background: rgba(239,68,68,0.15); color: #b91c1c; border: 1px solid rgba(248,113,113,0.35); }
        .cs-counters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
        .cs-counter { flex: 1 1 0; min-width: 100px; padding: 10px 14px; border-radius: 10px; background: var(--det-field); border: 1px solid var(--det-field-border); text-align: center; }
        .cs-counter strong { display: block; font-size: 1.3rem; font-weight: 800; color: var(--glow); }
        .cs-counter small { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
        .cs-chart-wrap {
            width: 100%;
            height: 180px;
            margin-bottom: 18px;
            border-radius: 10px;
            background: radial-gradient(ellipse at 50% 30%, rgba(2, 132, 199, 0.08), transparent 72%), #f1f5f9;
            border: 1px solid rgba(2, 132, 199, 0.12);
            padding: 8px;
        }
        .cs-feedback-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 1.05rem;
            font-weight: 700;
            color: #0c4a6e;
            margin: 16px 0 12px 0;
            letter-spacing: 0.02em;
        }
        .cs-feedback-title .svc-feed-ico { font-size: 1.2em; }
        .cs-feedback-list { max-height: 420px; overflow-y: auto; padding: 4px 2px; }
        .cs-feedback-list .svc-feed-list { display: grid; gap: 12px; }
        .cs-feedback-list .svc-feed-card { padding: 14px 16px 12px; border-radius: 16px; background: #fff; border: 1px solid rgba(2,132,199,.08); box-shadow: 0 4px 18px -12px rgba(15,23,42,.12); transition: box-shadow .18s; }
        .cs-feedback-list .svc-feed-card:hover { box-shadow: 0 8px 28px -14px rgba(15,23,42,.2); }
        .cs-feedback-list .svc-feed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
        .cs-feedback-list .svc-feed-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: .88rem; font-weight: 800; background: linear-gradient(135deg,#e0f2fe,#bae6fd); color: #0369a1; flex-shrink: 0; }
        .cs-feedback-list .svc-feed-head__txt { min-width: 0; flex: 1; }
        .cs-feedback-list .svc-feed-meta { font-size: .82rem; color: #64748b; font-weight: 500; }
        .cs-feedback-list .svc-feed-meta strong { color: #0f172a; font-weight: 700; }
        .cs-feedback-list .svc-feed-comment { font-size: .95rem; line-height: 1.6; color: #1e293b; white-space: pre-wrap; word-break: break-word; }
        .cs-feedback-list .svc-feed-reactions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
        .cs-feedback-list .svc-feed-react-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: .8rem; border: 1px solid rgba(2,132,199,.12); background: rgba(248,250,252,.9); border-radius: 999px; cursor: pointer; transition: .15s ease; color: var(--text); }
        .cs-feedback-list .svc-feed-react-btn:hover { background: rgba(2,132,199,.08); border-color: rgba(2,132,199,.28); transform: scale(1.06); }
        .cs-feedback-list .svc-feed-react-btn.is-active { background: linear-gradient(135deg,#eff6ff,#dbeafe); border-color: rgba(2,132,199,.35); font-weight: 700; }
        .cs-feedback-list .svc-feed-replies { margin-top: 10px; padding-left: 14px; border-left: 2.5px solid rgba(2,132,199,.16); display: grid; gap: 8px; }
        .cs-feedback-list .svc-feed-reply { background: rgba(248,250,252,.95); border-radius: 14px; padding: 10px 14px; }
        .cs-feedback-list .svc-fb-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
        .cs-feedback-list .svc-feed-open-report { font-size: .84rem; }
        .cs-empty { text-align: center; color: #64748b; font-size: 0.82rem; padding: 20px 12px; line-height: 1.45; }

        /* ── Top 5 Ranking Boards ── */
        .top10-boards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 28px;
        }
        .top10-boards:empty {
            min-height: 180px;
            grid-template-columns: 1fr;
            place-items: center;
            background: linear-gradient(90deg, rgba(226,232,240,0.5) 25%, rgba(241,245,249,0.7) 50%, rgba(226,232,240,0.5) 75%);
            background-size: 200% 100%;
            animation: detLazyShimmer 1.2s ease-in-out infinite;
            border-radius: 14px;
        }
        .top10-boards:empty::after {
            content: 'Carregando rankings…';
            font-size: 0.82rem;
            color: var(--muted, #94a3b8);
            font-weight: 500;
        }
        #shelvesHost:empty {
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(90deg, rgba(226,232,240,0.4) 25%, rgba(241,245,249,0.6) 50%, rgba(226,232,240,0.4) 75%);
            background-size: 200% 100%;
            animation: detLazyShimmer 1.2s ease-in-out infinite;
            border-radius: 14px;
            margin-top: 12px;
        }
        #shelvesHost:empty::after {
            content: 'Carregando catálogo…';
            font-size: 0.82rem;
            color: var(--muted, #94a3b8);
            font-weight: 500;
        }
        @keyframes detLazyShimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        @media (max-width: 1100px) {
            .top10-boards { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .top10-boards { grid-template-columns: 1fr; }
        }
        .top10-board {
            border-radius: 14px;
            border: 1px solid rgba(0,163,255,0.10);
            background: linear-gradient(168deg, #ffffff 0%, #f1f5f9 100%);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            overflow: hidden;
            box-shadow: 0 2px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03);
            transition: transform .2s, box-shadow .2s;
        }
        .top10-board:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
        }
        .top10-board-head {
            display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px;
            padding: 14px 16px 10px;
            position: relative;
        }
        .top10-board-head::after {
            content: '';
            position: absolute;
            bottom: 0; left: 16px; right: 16px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0,163,255,0.15), transparent);
        }
        .top10-board-head .t10-icon {
            font-size: 1.15rem;
            flex-shrink: 0;
            width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 8px;
            background: rgba(0,163,255,0.08);
        }
        .top10-board-head h4 {
            font-size: 0.78rem; font-weight: 800; color: var(--glow);
            margin: 0; letter-spacing: 0.03em; text-transform: uppercase;
            line-height: 1.2;
        }
        .top10-board-head small {
            display: block; font-size: 0.58rem; color: var(--muted);
            margin-top: 1px; font-weight: 500;
        }
        .top10-board-head .t10-title-col { display: flex; flex-direction: column; flex: 1; min-width: 0; }
        .top10-board-head .t10-complaints-filter-wrap {
            flex-shrink: 0;
            margin-left: auto;
        }
        @media (max-width: 600px) {
            .top10-board-head .t10-complaints-filter-wrap { margin-left: 0; width: 100%; }
            .top10-board-head .t10-complaints-filter { align-items: flex-start !important; }
        }
        .det-m-t10-head-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            margin-left: auto;
            flex-shrink: 0;
        }
        .top10-board-head .det-m-t10-head-actions {
            margin-left: 0;
            width: 100%;
            justify-content: flex-end;
        }
        @media (max-width: 520px) {
            .det-m-t10-head-actions {
                margin-left: 0;
                width: 100%;
                justify-content: flex-start;
            }
        }
        .det-m-t10-report-btn,
        .det-m-t10-social-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            border: none;
            border-radius: 10px;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 8px 12px;
            min-height: 36px;
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        .det-m-t10-report-btn {
            background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 100%);
            color: #f8fafc;
            box-shadow: 0 2px 12px rgba(3, 105, 161, 0.3);
        }
        .det-m-t10-social-btn {
            background: linear-gradient(135deg, #6d28d9 0%, #db2777 50%, #ea580c 100%);
            color: #fff;
            box-shadow: 0 2px 14px rgba(219, 39, 119, 0.35);
        }
        .det-m-t10-social-btn .det-m-t10-social-ico {
            font-size: 0.85rem;
            line-height: 1;
        }
        .det-m-t10-report-btn:hover,
        .det-m-t10-report-btn:focus-visible,
        .det-m-t10-social-btn:hover,
        .det-m-t10-social-btn:focus-visible {
            outline: none;
            filter: brightness(1.06);
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
        }
        .t10-complaints-filter {
            display: flex;
            flex-direction: column;
            gap: 2px;
            align-items: flex-end;
        }
        .t10-complaints-filter-lbl {
            font-size: 0.52rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--muted);
        }
        .t10-complaints-sel {
            font-size: 0.65rem;
            font-weight: 600;
            padding: 4px 8px;
            border-radius: 8px;
            border: 1px solid rgba(248, 113, 113, 0.4);
            background: rgba(255, 255, 255, 0.96);
            color: #991b1b;
            cursor: pointer;
        }
        .top10-cards-placeholder { padding: 14px 12px 18px; }
        .top10-cards-ph {
            margin: 0;
            font-size: 0.78rem;
            color: var(--muted);
            text-align: center;
            line-height: 1.4;
        }
        .top10-board--bad .top10-board-head::after { background: linear-gradient(90deg, transparent, rgba(239,68,68,0.20), transparent); }
        .top10-board--bad .top10-board-head h4 { color: #b91c1c; }
        .top10-board--bad .top10-board-head .t10-icon { background: rgba(239,68,68,0.10); }
        .top10-board--good .top10-board-head h4 { color: #047857; }
        .top10-board--good .top10-board-head::after { background: linear-gradient(90deg, transparent, rgba(16,185,129,0.20), transparent); }
        .top10-board--good .top10-board-head .t10-icon { background: rgba(16,185,129,0.10); }

        /* ── Games board ── */
        .top10-board--games { grid-column: 1 / -1; }
        .top10-board--games .top10-board-head h4 { color: #7c3aed; }
        .top10-board--games .top10-board-head::after { background: linear-gradient(90deg, transparent, rgba(124,58,237,0.18), transparent); }
        .top10-board--games .top10-board-head .t10-icon { background: rgba(124,58,237,0.10); }
        .top10-board--games .top10-board-head { display: flex; align-items: center; gap: 8px; }
        .top10-board--games .top10-list { columns: 2; column-gap: 24px; }
        .det-sd-action--board-games {
            margin-left: auto; flex-shrink: 0;
            font-size: .72rem; padding: 3px 10px; gap: 4px;
            border-radius: 6px; border: 1.5px solid rgba(124,58,237,.35);
            color: #7c3aed; background: rgba(124,58,237,.06);
            cursor: pointer; transition: background .2s, color .2s;
            display: inline-flex; align-items: center;
        }
        .det-sd-action--board-games:hover { background: rgba(124,58,237,.15); }
        @media (max-width: 600px) {
            .top10-board--games .top10-list { columns: 1; }
        }

        .t10-info-btn {
            position: absolute; top: 10px; right: 12px;
            width: 20px; height: 20px;
            border-radius: 50%; border: 1.5px solid var(--muted, #94a3b8);
            background: transparent; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.62rem; font-weight: 700; font-style: italic;
            color: var(--muted, #94a3b8); font-family: Georgia, 'Times New Roman', serif;
            transition: border-color .2s, color .2s, background .2s;
            z-index: 2; padding: 0; line-height: 1;
        }
        .t10-info-btn:hover, .t10-info-btn:focus-visible {
            border-color: var(--glow, #0ea5e9); color: var(--glow, #0ea5e9);
            background: rgba(14,165,233,0.08);
        }
        .t10-info-overlay {
            display: none; position: fixed; inset: 0; z-index: 9999;
            background: rgba(0,0,0,0.45); align-items: center; justify-content: center;
        }
        .t10-info-overlay.is-open { display: flex; }
        .t10-info-card {
            background: var(--card-bg, #fff); border-radius: 14px;
            max-width: 400px; width: 92vw; padding: 24px 22px 20px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.18);
            position: relative; animation: t10InfoIn .2s ease;
        }
        @keyframes t10InfoIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
        .t10-info-card h5 {
            margin: 0 0 12px; font-size: 0.88rem; font-weight: 700;
            color: var(--glow, #0ea5e9);
        }
        .t10-info-card p {
            margin: 0; font-size: 0.78rem; line-height: 1.55;
            color: var(--text, #334155); white-space: pre-line;
        }
        .t10-info-close {
            position: absolute; top: 10px; right: 12px;
            background: none; border: none; cursor: pointer;
            font-size: 1.1rem; color: var(--muted, #94a3b8);
            padding: 4px; line-height: 1;
        }
        .t10-info-close:hover { color: var(--glow, #0ea5e9); }
        html[data-det-theme='dark'] .t10-info-card { background: #1e293b; }
        html[data-det-theme='dark'] .t10-info-card p { color: #cbd5e1; }
        .top10-list { list-style: none; margin: 0; padding: 8px 0 10px; }
        .top10-item {
            display: flex; align-items: center; gap: 10px;
            padding: 7px 16px;
            cursor: pointer;
            transition: background .15s;
            font-size: 0.76rem;
            position: relative;
        }
        .top10-item:hover {
            background: rgba(0,163,255,0.07);
        }
        .top10-item:not(:last-child)::after {
            content: '';
            position: absolute;
            bottom: 0; left: 50px; right: 16px;
            height: 1px;
            background: rgba(148,163,184,0.06);
        }
        .top10-pos {
            flex-shrink: 0;
            width: 22px; height: 22px;
            display: flex; align-items: center; justify-content: center;
            font-weight: 900; font-size: 0.62rem;
            color: var(--muted);
            border-radius: 6px;
            background: rgba(148,163,184,0.06);
        }
        .top10-item:nth-child(1) .top10-pos { background: linear-gradient(135deg, rgba(255,215,0,0.18), rgba(255,165,0,0.10)); color: #fbbf24; }
        .top10-item:nth-child(2) .top10-pos {
            background: linear-gradient(135deg, rgba(148, 163, 184, 0.22), rgba(100, 116, 139, 0.14));
            color: #334155;
        }
        .top10-item:nth-child(3) .top10-pos { background: linear-gradient(135deg, rgba(205,127,50,0.15), rgba(180,120,60,0.10)); color: #d4a574; }
        .top10-logo {
            width: 24px; height: 24px;
            border-radius: 6px;
            object-fit: contain;
            flex-shrink: 0;
            background: #ffffff;
            border: 1px solid #e2e8f0;
        }
        .top10-name {
            flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            color: var(--text); font-weight: 600;
        }
        .top10-val {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            box-sizing: border-box;
            font-weight: 800; font-size: 0.65rem;
            line-height: 1;
            padding: 4px 9px;
            border-radius: 8px;
            letter-spacing: 0.01em;
        }
        .top10-val--bad { color: #b91c1c; background: rgba(239,68,68,0.12); }
        .top10-val--warn { color: #b45309; background: rgba(245,158,11,0.12); }
        .top10-val--good { color: #047857; background: rgba(16,185,129,0.12); }
        .top10-val--blue { color: #1d4ed8; background: rgba(59,130,246,0.12); }
        .t10-star-badge {
            display: inline-flex; align-items: center; gap: 2px;
            font-size: 0.62rem; font-weight: 800;
            color: #fbbf24; background: rgba(251,191,36,0.14);
            padding: 2px 7px; border-radius: 6px;
            margin-left: 4px; vertical-align: middle;
            letter-spacing: 0.01em;
        }
        .top10-empty { padding: 22px 16px; text-align: center; color: var(--muted); font-size: 0.74rem; }
        /* ── Top 10 Cards Carousel ── */
        .top10-cards-section { margin-bottom: 24px; }
        .top10-cards-shelf {
            margin-bottom: 20px;
        }
        .top10-cards-shelf-head {
            display: flex; align-items: center; gap: 10px;
            padding: 0 0 10px;
        }
        .top10-cards-shelf-head .t10c-icon {
            width: 28px; height: 28px; border-radius: 7px;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.9rem; flex-shrink: 0;
        }
        .top10-cards-shelf-head h4 {
            font-size: 0.82rem; font-weight: 800; color: var(--text);
            margin: 0; text-transform: uppercase; letter-spacing: 0.03em;
        }
        .top10-cards-shelf-head small { font-size: 0.62rem; color: var(--muted); margin-left: 6px; }
        .top10-cards-shelf-head--games-share {
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 10px 12px;
        }
        .top10-cards-shelf-head--games-share .t10c-title-stack {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .top10-cards-shelf-head--games-share .t10c-title-stack small {
            margin-left: 0;
        }
        .top10-cards-shelf-head--games-share .det-sd-action--social {
            flex-shrink: 0;
            margin-left: auto;
        }
        .top10-cards-shelf--bad .t10c-icon { background: rgba(239,68,68,0.12); }
        .top10-cards-shelf--bad h4 { color: #b91c1c; }
        .top10-cards-shelf--games .t10c-icon {
            background: rgba(99, 102, 241, 0.14);
        }
        .top10-cards-shelf--games h4 {
            color: #4338ca;
        }
        .top10-cards-shelf--good .t10c-icon { background: rgba(16,185,129,0.12); }
        .top10-cards-shelf--good h4 { color: #047857; }
        .top10-cards-row {
            display: flex;
            gap: 14px;
            overflow-x: auto;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 8px;
            scrollbar-width: thin;
            scrollbar-color: rgba(0,163,255,0.18) transparent;
        }
        .top10-cards-row::-webkit-scrollbar { height: 5px; }
        .top10-cards-row::-webkit-scrollbar-track { background: transparent; }
        .top10-cards-row::-webkit-scrollbar-thumb { background: rgba(0,163,255,0.18); border-radius: 3px; }
        .top10-cards-row .tile { flex: 0 0 170px; scroll-snap-align: start; }
        /* ── Sem resposta ICMP (diagnóstico) ── */
        .icmp-no-reply-host { margin-top: 8px; margin-bottom: 8px; }
        .icmp-no-reply-host:not([hidden]) { display: block; }
        .icmp-section {
            border-radius: 16px;
            border: 1px solid rgba(251, 191, 36, 0.35);
            background: linear-gradient(165deg, #fffbeb 0%, #fef3c7 100%);
            padding: 16px 18px 14px;
            margin-top: 20px;
        }
        .icmp-section-head { margin-bottom: 12px; }
        .icmp-section-head h3 {
            margin: 0 0 6px;
            font-size: 0.92rem;
            font-weight: 800;
            color: #a16207;
            letter-spacing: 0.02em;
        }
        .icmp-section-head p {
            margin: 0;
            font-size: 0.72rem;
            line-height: 1.45;
            color: #713f12;
            max-width: 52rem;
        }
        .icmp-section--empty {
            border-color: rgba(148, 163, 184, 0.15);
            background: rgba(241, 245, 249, 0.78);
        }
        .icmp-section--empty p { color: var(--muted); font-size: 0.74rem; margin: 0; }
        .icmp-cards-row {
            display: flex;
            gap: 14px;
            overflow-x: auto;
            scroll-snap-type: x proximity;
            padding-bottom: 6px;
            scrollbar-width: thin;
            scrollbar-color: rgba(251, 191, 36, 0.2) transparent;
        }
        .icmp-cards-row .tile { flex: 0 0 170px; scroll-snap-align: start; }
        /* Portas TCP (diagnóstico nos cartões + modal) */
        .tile-tcp-ports {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 5px;
            padding: 5px 8px 4px;
            justify-content: center;
            border-top: 1px solid rgba(148, 163, 184, 0.1);
        }
        .tcp-port-pill {
            display: inline-flex;
            align-items: baseline;
            gap: 3px;
            font-size: 0.58rem;
            font-weight: 700;
            padding: 2px 5px 2px 4px;
            border-radius: 6px;
            border: 1px solid transparent;
            letter-spacing: 0.02em;
        }
        .tcp-port-pill .tcp-port-ms { font-weight: 600; opacity: 0.8; font-size: 0.52rem; }
        .tcp-port-pill--open {
            background: rgba(34, 197, 94, 0.2);
            border-color: rgba(34, 197, 94, 0.5);
            color: #166534;
        }
        .tcp-port-pill--closed {
            background: rgba(239, 68, 68, 0.16);
            border-color: rgba(248, 113, 113, 0.45);
            color: #991b1b;
        }
        .tcp-port-pill--unk {
            background: rgba(148, 163, 184, 0.22);
            border-color: rgba(100, 116, 139, 0.45);
            color: #334155;
        }
        .tcp-port-pill--lg {
            font-size: 0.74rem;
            padding: 7px 11px;
            border-radius: 9px;
        }
        .svc-tcp-ports-wrap {
            margin: 12px 0 8px;
            padding: 12px 14px;
            border-radius: 12px;
            background: rgba(226, 232, 240, 0.88);
            border: 1px solid rgba(34, 211, 238, 0.14);
        }
        .svc-tcp-ports-title {
            margin: 0 0 6px;
            font-size: 0.85rem;
            font-weight: 800;
            color: #a5f3fc;
        }
        .svc-tcp-ports-legend,
        .svc-tcp-ports-note {
            margin: 0 0 10px;
            font-size: 0.68rem;
            line-height: 1.45;
            color: var(--muted);
        }
        .svc-tcp-ports-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        /* Camadas: sonda principal vs ICMP vs nota de disponibilidade */
        .svc-probe-layers {
            margin: 10px 0 14px;
            padding: 12px 14px 14px;
            border-radius: 12px;
            border: 1px solid rgba(129, 140, 248, 0.22);
            background: linear-gradient(145deg, rgba(238, 242, 255, 0.95) 0%, rgba(248, 250, 252, 0.96) 100%);
        }
        .svc-probe-layers-title {
            margin: 0 0 10px;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #c4b5fd;
        }
        .probe-layer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }
        .probe-layer-card {
            border-radius: 10px;
            padding: 10px 11px;
            border: 1px solid rgba(148, 163, 184, 0.2);
            background: rgba(226, 232, 240, 0.95);
        }
        .probe-layer-card--ok { border-color: rgba(34, 197, 94, 0.45); box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.08); }
        .probe-layer-card--bad { border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.08); }
        .probe-layer-card--unk { border-color: rgba(148, 163, 184, 0.25); }
        .probe-layer-card--off { border-color: rgba(100, 116, 139, 0.35); opacity: 0.92; }
        .probe-layer-k {
            font-size: 0.62rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--muted);
            margin-bottom: 4px;
        }
        .probe-layer-v { font-size: 0.8rem; font-weight: 700; color: var(--text); line-height: 1.35; }
        .probe-layer-sub { font-size: 0.65rem; color: var(--muted); margin-top: 5px; line-height: 1.4; word-break: break-all; }
        .probe-avail-note {
            margin-top: 11px;
            font-size: 0.68rem;
            line-height: 1.45;
            color: #713f12;
            padding: 8px 10px;
            border-radius: 8px;
            background: rgba(251, 191, 36, 0.08);
            border: 1px solid rgba(251, 191, 36, 0.2);
        }
        .tcp-port-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
            gap: 8px;
        }
        .tcp-port-cell {
            border-radius: 10px;
            padding: 8px 9px 7px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            text-align: center;
        }
        .tcp-port-cell--open { border-color: rgba(34, 197, 94, 0.5); background: rgba(34, 197, 94, 0.1); }
        .tcp-port-cell--closed { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.08); }
        .tcp-port-cell--unk {
            border-color: rgba(100, 116, 139, 0.45);
            background: linear-gradient(180deg, #e8eef5, #e2e8f0);
        }
        .tcp-port-cell-num { font-size: 1.05rem; font-weight: 800; color: var(--text); letter-spacing: 0.02em; }
        .tcp-port-cell-svc {
            font-size: 0.58rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #475569;
            margin-top: 2px;
        }
        .tcp-port-cell-st { font-size: 0.64rem; font-weight: 700; margin-top: 5px; color: var(--text); }
        .tcp-port-cell--open .tcp-port-cell-st { color: #166534; }
        .tcp-port-cell--closed .tcp-port-cell-st { color: #b91c1c; }
        .tcp-port-cell--unk .tcp-port-cell-st { color: #475569; }
        .tcp-port-cell-ms { font-size: 0.62rem; font-weight: 600; margin-top: 2px; color: #334155; }
        .targets-table .ip-dns-cell { line-height: 1.5; }
        .targets-table .ip-tag.ip-tag--dns {
            display: inline-block;
            margin: 2px 4px 2px 0;
            padding: 2px 7px;
            font-size: 0.62rem;
            font-weight: 700;
            border-radius: 6px;
        }
        .tile .poster .rank {
            position: absolute;
            top: 8px;
            left: 8px;
            font-size: 1.6rem;
            font-weight: 800;
            color: rgba(255,255,255,0.12);
            line-height: 1;
        }
        .tile .meta .name { font-size: 0.82rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .tile .meta .badge {
            display: inline-block;
            margin-top: 6px;
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 3px 8px;
            border-radius: 6px;
        }
        .badge.ok { background: rgba(16, 185, 129, 0.28); color: #047857; border: 1px solid rgba(16, 185, 129, 0.35); }
        .badge.warn { background: rgba(245, 158, 11, 0.28); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.4); }
        .badge.bad { background: rgba(239, 68, 68, 0.22); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.35); }
        .badge.unknown { background: rgba(148, 163, 184, 0.28); color: #475569; border: 1px solid rgba(148, 163, 184, 0.4); }
        .state-ok { --tile-edge: rgba(16, 185, 129, 0.5); }
        .state-warn { --tile-edge: rgba(245, 158, 11, 0.55); }
        .state-bad { --tile-edge: rgba(239, 68, 68, 0.65); }
        .state-unknown { --tile-edge: rgba(100, 116, 139, 0.4); }
        .tile.state-ok, .tile.state-warn, .tile.state-bad, .tile.state-unknown { border-color: var(--tile-edge); }
        /* Grid view */
        .grid-view {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 152px), 1fr));
            gap: 12px;
            touch-action: manipulation;
        }
        .grid-view .tile { width: 100%; }
        .grid-view .tile .poster {
            flex-direction: column;
            aspect-ratio: 1;
            padding: 10px;
        }
        .grid-view .tile .poster .poster-lat {
            flex-direction: row;
            align-items: baseline;
            gap: 4px;
            margin-top: 4px;
        }
        .grid-view .tile .poster .poster-logo-wrap img {
            width: 56px;
            height: 56px;
        }
        /* List / ranking */
        .list-view {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }
        .list-row {
            position: relative;
            display: flex;
            align-items: center;
            gap: 14px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 12px 14px;
            text-decoration: none;
            color: inherit;
            cursor: pointer;
            transition: border-color 0.12s ease;
            box-sizing: border-box;
        }
        .list-row:hover {
            border-color: rgba(0, 163, 255, 0.45);
            outline: 1px solid rgba(2, 132, 199, 0.2);
            outline-offset: -1px;
        }
        .list-row[class*="lat-tier-"] {
            background:
                radial-gradient(100% 160% at 100% 0%, var(--lat-glow), transparent 58%),
                linear-gradient(135deg, #ffffff, #f1f5f9);
            border-color: var(--lat-edge-soft);
            box-shadow: 0 2px 16px rgba(2, 132, 199, 0.07), 0 0 28px var(--lat-glow2);
        }
        .list-row[class*="lat-tier-"]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            border-radius: var(--radius) 0 0 var(--radius);
            background: linear-gradient(180deg, var(--lat-edge), transparent 88%);
            pointer-events: none;
            z-index: 0;
        }
        .list-row[class*="lat-tier-"]:hover {
            border-color: var(--lat-edge);
            outline: 1px solid rgba(56, 189, 248, 0.28);
            outline-offset: -1px;
        }
        .list-row.lat-tier-ex .list-lat:not(.bad) { color: #047857; }
        .list-row.lat-tier-good .list-lat:not(.bad) { color: #0d9488; }
        .list-row.lat-tier-mid .list-lat:not(.bad) { color: #a16207; }
        .list-row.lat-tier-warn .list-lat:not(.bad) { color: #c2410c; }
        .list-row.lat-tier-bad .list-lat:not(.bad) { color: #7c3aed; }
        .list-row.lat-tier-timeout .list-lat:not(.bad) { color: #6b21a8; }
        .list-row.lat-tier-fail .list-lat:not(.bad) { color: #f87171; }
        .list-row.lat-tier-unk .list-lat:not(.bad) { color: #475569; }
        .list-row .rnum { font-size: 1.2rem; font-weight: 800; color: rgba(0, 163, 255, 0.35); min-width: 28px; }
        .list-row .limg {
            width: 48px; height: 48px; border-radius: 12px;
            background: rgba(0, 163, 255, 0.08);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .list-row .limg img { width: 70%; height: 70%; object-fit: contain; }
        .list-row .lbody { flex: 1; min-width: 0; display: flex; flex-direction: column; }
        .list-row .lbody-top {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px 8px;
            min-width: 0;
        }
        .list-row .lbody .t {
            font-weight: 700;
            font-size: 0.95rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px 6px;
            min-width: 0;
        }
        .list-row .lbody-sub {
            margin-top: 4px;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            gap: 6px 12px;
            min-width: 0;
        }
        .list-row .lbody-sub .d {
            font-size: 0.8rem;
            color: var(--muted);
            line-height: 1.35;
            flex: 1;
            min-width: 0;
            margin-top: 0;
        }
        /* Desktop: layout compacto ao lado do gráfico; mobile usa variante em @media */
        .list-more-btn--mob-only {
            display: none !important;
        }
        .list-lat--mob-only {
            display: none !important;
        }
        .list-row .list-lat {
            font-size: 0.85rem;
            font-weight: 800;
            color: var(--glow);
            flex-shrink: 0;
            min-width: 52px;
            text-align: right;
        }
        .list-row .list-lat.bad { color: var(--bad); }
        .list-row .list-rank { font-size: 0.7rem; color: var(--accent); margin-right: 6px; }
        .list-row .chev { color: var(--accent); font-size: 1.2rem; flex-shrink: 0; }
        /* Mobile lista: cartão referência — sem arrastar horizontal; meio encolhe, REPORTAR fixo à direita */
        @media (max-width: 1023px) {
            .list-view .list-row {
                flex-wrap: nowrap;
                align-items: center;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                overflow-x: hidden;
                gap: 10px;
                padding: 12px 12px;
                touch-action: manipulation;
            }
            .list-view .list-row .chev {
                display: none !important;
            }
            .list-view .list-row .list-rank {
                flex-shrink: 0;
            }
            .list-view .list-row .limg {
                flex-shrink: 0;
                background: #ffffff;
                border: 1px solid rgba(15, 23, 42, 0.08);
                box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
            }
            .list-view .list-row .lbody {
                flex: 1 1 0;
                min-width: 0;
                max-width: 100%;
            }
            .list-view .list-row .lbody-top {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
                gap: 4px 8px;
                width: 100%;
                min-width: 0;
            }
            .list-view .list-row .lbody-top .t {
                flex: 1 1 auto;
                min-width: 0;
            }
            .list-view .list-row .lbody-top .list-more-btn--mob-only {
                display: inline-flex !important;
                flex-shrink: 0;
                margin-left: 0;
            }
            .list-view .list-row .lbody-sub {
                align-items: flex-end;
                justify-content: space-between;
                gap: 6px 8px;
                min-width: 0;
            }
            .list-view .list-row .lbody-sub .d {
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                word-break: break-word;
            }
            .list-view .list-row .list-lat--mob-only {
                display: block !important;
                flex-shrink: 0;
                min-width: 0;
            }
            .list-view .list-row .list-lat--mob-only .list-lat {
                font-size: 0.78rem;
                font-weight: 800;
                text-align: right;
                white-space: nowrap;
            }
            .list-view .list-row .list-row-metrics {
                display: none !important;
            }
            .list-view .list-row .list-more-btn--desk-only {
                display: none !important;
            }
            .shelf-block .list-view {
                max-width: 100%;
                min-width: 0;
            }
            .list-view .list-row .list-row-extras {
                flex-direction: column;
                align-items: flex-end;
                justify-content: center;
                gap: 0;
                flex-shrink: 0;
                flex-grow: 0;
                min-width: 0;
            }
            .list-view .list-row .list-row-cta {
                flex-direction: column;
                align-items: flex-end;
            }
            .list-view .list-row .list-report-btn {
                margin-right: 0;
                min-width: 56px;
                min-height: 56px;
                width: 56px;
                height: 56px;
                padding: 6px 4px;
                font-size: 0.5rem;
                line-height: 1.12;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                text-align: center;
            }
            .list-view .list-row .list-report-label {
                max-width: 100%;
                display: block;
            }
            /* Info: só o ícone (SVG); sem “bola” extra */
            .list-view .list-row .list-more-btn {
                width: auto;
                height: auto;
                min-height: 44px;
                min-width: 44px;
                padding: 6px;
                margin-right: 0;
                border-radius: 10px;
                border: none;
                background: transparent;
                color: inherit;
                box-shadow: none;
            }
            .list-view .list-row .list-more-btn:hover,
            .list-view .list-row .list-more-btn:focus-visible {
                background: rgba(2, 132, 199, 0.08);
            }
            .list-view .list-row .list-more-btn:focus-visible {
                outline: 2px solid rgba(2, 132, 199, 0.45);
                outline-offset: 2px;
            }
            .list-view .list-row .list-more-btn .tile-info-txt {
                display: none;
            }
            .list-view .list-row .list-more-btn .tile-info-row {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .list-view .list-row .list-more-btn .tile-info-svg {
                width: 24px;
                height: 24px;
            }
            .list-view .list-row .list-more-btn .tile-info-ico {
                width: 24px;
                height: 24px;
            }
        }
        /* Ecrãs muito estreitos: encolher um pouco logo + REPORTAR, manter tudo visível sem scroll horizontal */
        @media (max-width: 380px) {
            .list-view .list-row {
                gap: 6px;
                padding: 10px 8px;
            }
            .list-view .list-row .limg {
                width: 40px;
                height: 40px;
            }
            .list-view .list-row .lbody .t {
                font-size: 0.88rem;
            }
            .list-view .list-row .list-report-btn {
                width: 50px;
                height: 50px;
                min-width: 50px;
                min-height: 50px;
                font-size: 0.46rem;
                padding: 4px 2px;
            }
            .list-view .list-row .list-more-btn {
                min-width: 40px;
                min-height: 40px;
                padding: 4px;
            }
            .list-view .list-row .list-more-btn .tile-info-ico {
                width: 22px;
                height: 22px;
            }
            .list-view .list-row .list-lat--mob-only .list-lat {
                font-size: 0.72rem;
            }
        }
        .empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--muted);
            border: 1px dashed var(--border);
            border-radius: var(--radius);
            background: rgba(226, 232, 240, 0.75);
        }
        .error-banner {
            background: rgba(239, 68, 68, 0.12);
            border: 1px solid rgba(239, 68, 68, 0.35);
            color: #991b1b;
            padding: 12px 16px;
            border-radius: var(--radius);
            margin-bottom: 20px;
            font-size: 0.9rem;
        }
        /* Indicador compacto (estilo painel enterprise) — sem bloco grande animado */
        .det-loading-compact {
            display: none;
            align-items: center;
            gap: 10px;
            padding: 6px 12px;
            margin-bottom: 10px;
            border-radius: 9px;
            border: 1px solid var(--det-field-border);
            background: var(--card);
            color: var(--muted);
            font-size: 0.78rem;
            font-weight: 500;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
        }
        .det-loading-compact.is-visible {
            display: flex;
        }
        .det-loading-compact__lead {
            flex: 0 0 auto;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent-catellix);
            opacity: 0.85;
            animation: detLoadPulse 1.1s ease-in-out infinite;
        }
        .det-loading-compact__txt {
            flex: 1;
            min-width: 0;
            line-height: 1.35;
        }
        @keyframes detLoadPulse {
            0%, 100% { opacity: 0.45; transform: scale(0.92); }
            50% { opacity: 1; transform: scale(1); }
        }
        @media (prefers-reduced-motion: reduce) {
            .det-loading-compact__lead {
                animation: none;
                opacity: 0.9;
            }
        }
        .det-catalog-sync-hint {
            font-size: 0.72rem;
            font-weight: 500;
            color: var(--muted);
            white-space: nowrap;
            padding: 2px 0;
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        @media (min-width: 720px) {
            .det-catalog-sync-hint {
                max-width: 220px;
            }
        }
        .det-sidebar-section-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }
        .det-sidebar-section-head .det-sidebar-title {
            flex: 1 1 auto;
            margin: 0;
            min-width: 0;
        }
        .det-sidebar-section-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }
        .det-sd-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 1px solid rgba(2, 132, 199, 0.35);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(224, 242, 254, 0.65));
            color: #0369a1;
            font-size: 0.68rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 7px 10px;
            border-radius: 10px;
            cursor: pointer;
            line-height: 1.1;
        }
        .det-sd-action__ico {
            flex-shrink: 0;
            display: block;
            color: inherit;
        }
        .det-sd-action__lbl {
            line-height: 1.15;
        }
        .det-sd-action:hover,
        .det-sd-action:focus-visible {
            outline: none;
            border-color: rgba(0, 163, 255, 0.65);
            box-shadow: 0 0 0 3px rgba(0, 163, 255, 0.18);
        }
        .det-sd-action--report {
            background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 45%, #0284c7 100%);
            color: #f8fafc;
            border-color: rgba(12, 74, 110, 0.55);
            text-transform: none;
            letter-spacing: 0.02em;
            font-size: 0.8rem;
            font-weight: 800;
            padding: 9px 14px;
            min-height: 40px;
        }
        .det-sd-action--report .det-sd-action__ico {
            color: #fff;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
        }
        .det-sd-action--report.det-sd-action--icon-only {
            gap: 0;
            padding: 0;
            width: 40px;
            min-width: 40px;
            min-height: 40px;
            flex: 0 0 auto;
        }
        .det-sidebar-block--complaints .det-sidebar-section-head {
            flex-direction: column;
            align-items: stretch;
            gap: 6px;
        }
        .det-sidebar-block--complaints .det-sidebar-section-head .det-sidebar-title {
            flex: none;
            min-width: 0;
            white-space: normal;
            word-break: break-word;
            margin-bottom: 0;
        }
        .det-sidebar-block--complaints .det-sidebar-section-actions {
            flex-wrap: nowrap;
            flex: 0 0 auto;
            align-items: center;
            align-self: flex-end;
        }
        @media (max-width: 1023px) {
            .det-sidebar-block--complaints .det-sidebar-section-head {
                gap: 8px;
            }
            .det-sidebar-block--complaints .det-sidebar-section-actions {
                width: 100%;
                justify-content: flex-end;
            }
            .det-sidebar-block--complaints .det-sidebar-section-head .det-sidebar-title {
                font-size: 0.98rem;
                line-height: 1.2;
            }
        }
        .det-sidebar-block--complaints .det-sd-action--social {
            flex: 0 1 auto;
            min-width: 0;
        }
        .det-sd-action--social {
            background: linear-gradient(135deg, #6d28d9 0%, #db2777 55%, #f97316 100%);
            color: #fff;
            border-color: rgba(91, 33, 182, 0.45);
            text-transform: none;
            letter-spacing: 0.02em;
            font-size: 0.8rem;
            font-weight: 800;
            padding: 9px 12px;
            min-height: 40px;
            box-shadow: 0 4px 18px rgba(219, 39, 119, 0.25);
        }
        .det-sd-action--social .det-sd-action__ico {
            color: #fff;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
        }
        .det-sidebar-skel {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            list-style: none;
        }
        .det-sb-skel-rank {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: linear-gradient(90deg, rgba(226, 232, 240, 0.95) 25%, rgba(241, 245, 249, 1) 50%, rgba(226, 232, 240, 0.95) 75%);
            background-size: 200% 100%;
            animation: detTop30Shimmer 1.1s ease-in-out infinite;
        }
        .det-sb-skel-logo {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            flex-shrink: 0;
            background: linear-gradient(90deg, rgba(226, 232, 240, 0.95) 25%, rgba(241, 245, 249, 1) 50%, rgba(226, 232, 240, 0.95) 75%);
            background-size: 200% 100%;
            animation: detTop30Shimmer 1.15s ease-in-out infinite;
        }
        .det-sb-skel-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 0;
        }
        .det-sb-skel-line {
            height: 10px;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(226, 232, 240, 0.95) 25%, rgba(241, 245, 249, 1) 50%, rgba(226, 232, 240, 0.95) 75%);
            background-size: 200% 100%;
            animation: detTop30Shimmer 1.05s ease-in-out infinite;
        }
        .det-sb-skel-line--short { width: 55%; }
        .det-top30-head-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .det-top30-share-btn {
            border: 1px solid rgba(2, 132, 199, 0.4);
            background: linear-gradient(180deg, #fff, rgba(224, 242, 254, 0.85));
            color: #0369a1;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            padding: 8px 12px;
            border-radius: 10px;
            cursor: pointer;
            white-space: nowrap;
        }
        .det-top30-share-btn:hover,
        .det-top30-share-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(0, 163, 255, 0.2);
        }
        /* Top 20 estúdio */
        .det-top20-modal {
            position: fixed;
            inset: 0;
            z-index: 100002;
            display: flex;
            align-items: stretch;
            justify-content: center;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.28s ease, visibility 0.28s;
        }
        .det-top20-modal.open {
            pointer-events: auto;
            opacity: 1;
            visibility: visible;
        }
        .det-top20-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(15, 23, 42, 0.52);
            backdrop-filter: blur(10px);
        }
        .det-top20-sheet {
            position: relative;
            margin: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
            width: min(920px, 100%);
            max-height: min(92vh, 900px);
            border-radius: 22px;
            background:
                radial-gradient(120% 80% at 10% 0%, rgba(56, 189, 248, 0.22), transparent 55%),
                radial-gradient(90% 60% at 100% 20%, rgba(14, 165, 233, 0.18), transparent 50%),
                linear-gradient(165deg, #f8fafc 0%, #e0f2fe 38%, #f1f5f9 100%);
            border: 1px solid rgba(2, 132, 199, 0.28);
            box-shadow:
                0 28px 80px rgba(15, 23, 42, 0.28),
                0 1px 0 rgba(255, 255, 255, 0.9) inset;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transform: translateY(18px) scale(0.98);
            transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .det-top20-modal.det-top20-modal--anim .det-top20-sheet {
            transform: translateY(0) scale(1);
        }
        .det-top20-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            padding: 18px 18px 12px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(255, 255, 255, 0.45);
        }
        .det-top20-head h2 {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 800;
            letter-spacing: -0.03em;
            color: #0c4a6e;
        }
        .det-top20-head p {
            margin: 6px 0 0;
            font-size: 0.8rem;
            color: var(--muted);
            max-width: 52ch;
            line-height: 1.45;
        }
        .det-top20-head-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-end;
        }
        .det-top20-share {
            border: none;
            border-radius: 12px;
            padding: 10px 16px;
            font-weight: 800;
            font-size: 0.78rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            cursor: pointer;
            color: #fff;
            background: linear-gradient(135deg, #0ea5e9, #0284c7 55%, #0369a1);
            box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
        }
        .det-top20-close {
            width: 42px;
            height: 42px;
            border: none;
            border-radius: 12px;
            background: rgba(148, 163, 184, 0.18);
            font-size: 1.4rem;
            line-height: 1;
            cursor: pointer;
            color: var(--text);
        }
        .det-top20-scroll {
            flex: 1 1 auto;
            overflow: auto;
            padding: 14px 16px 20px;
            -webkit-overflow-scrolling: touch;
        }
        .det-top20-grid {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .det-top20-card {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 16px;
            border-radius: 18px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(255, 255, 255, 0.82);
            box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
            animation: detTop20In 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
        }
        @keyframes detTop20In {
            from { opacity: 0; transform: translateX(-12px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .det-top20-card--gold {
            border-color: rgba(234, 179, 8, 0.45);
            background: linear-gradient(105deg, rgba(254, 252, 232, 0.95), rgba(255, 255, 255, 0.9));
            box-shadow: 0 12px 40px rgba(234, 179, 8, 0.15);
        }
        .det-top20-card--silver {
            border-color: rgba(148, 163, 184, 0.5);
            background: linear-gradient(105deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.92));
        }
        .det-top20-card--bronze {
            border-color: rgba(180, 83, 9, 0.35);
            background: linear-gradient(105deg, rgba(255, 247, 237, 0.95), rgba(255, 255, 255, 0.9));
        }
        .det-top20-rank {
            font-size: 1.35rem;
            font-weight: 900;
            width: 2.2rem;
            text-align: center;
            color: #0c4a6e;
            font-variant-numeric: tabular-nums;
        }
        .det-top20-logo {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            object-fit: contain;
            background: #fff;
            border: 1px solid rgba(148, 163, 184, 0.2);
        }
        .det-top20-card-main { flex: 1 1 auto; min-width: 0; }
        .det-top20-name {
            margin: 0;
            font-size: 1rem;
            font-weight: 800;
            color: var(--text);
            letter-spacing: -0.02em;
        }
        .det-top20-meta {
            margin: 4px 0 0;
            font-size: 0.75rem;
            color: var(--muted);
            line-height: 1.35;
        }
        .det-top20-score {
            font-weight: 900;
            font-size: 1.05rem;
            color: #0369a1;
            padding: 8px 12px;
            border-radius: 12px;
            background: rgba(224, 242, 254, 0.85);
            border: 1px solid rgba(2, 132, 199, 0.2);
        }
        .det-top20-empty {
            text-align: center;
            color: var(--muted);
            padding: 32px 16px;
            font-size: 0.92rem;
        }
        /* Relatório / partilha */
        .det-report-share-modal {
            position: fixed;
            inset: 0;
            z-index: 100003;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s ease, visibility 0.25s;
        }
        .det-report-share-modal.open {
            pointer-events: auto;
            opacity: 1;
            visibility: visible;
        }
        .det-report-share-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(15, 23, 42, 0.55);
            backdrop-filter: blur(8px);
        }
        .det-report-sheet {
            position: relative;
            width: min(720px, 100%);
            max-height: min(88vh, 820px);
            border-radius: 18px;
            background: var(--card);
            border: 1px solid var(--border);
            box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            min-height: 0;
        }
        .det-report-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 16px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(248, 250, 252, 0.9);
        }
        .det-report-head h2 {
            margin: 0;
            font-size: 1rem;
            font-weight: 800;
        }
        .det-report-close {
            border: none;
            background: rgba(148, 163, 184, 0.15);
            width: 38px;
            height: 38px;
            border-radius: 10px;
            font-size: 1.3rem;
            cursor: pointer;
            line-height: 1;
        }
        .det-report-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            padding: 12px 14px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.15);
            background: rgba(255, 255, 255, 0.65);
        }
        .det-report-act-btn--stretch {
            grid-column: 1 / -1;
            justify-content: center;
        }
        .det-report-act-btn {
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            gap: 7px;
            border: 1px solid rgba(2, 132, 199, 0.35);
            background: #fff;
            color: #0369a1;
            font-size: 0.75rem;
            font-weight: 700;
            padding: 10px 12px;
            min-height: 44px;
            border-radius: 10px;
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        .det-report-act-btn:hover {
            border-color: rgba(0, 163, 255, 0.55);
        }
        .det-report-act-ico {
            flex-shrink: 0;
            display: block;
        }
        .det-report-act-ico--wa {
            color: #25d366;
        }
        .det-report-act-lbl {
            line-height: 1.2;
            text-align: left;
        }
        .det-report-preview-wrap {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
            overflow-x: hidden;
            padding: 14px;
            background: #f1f5f9;
            -webkit-overflow-scrolling: touch;
        }
        #detReportPreviewInner {
            background: #fff;
            border-radius: 12px;
            padding: 20px 22px;
            border: 1px solid rgba(148, 163, 184, 0.2);
            box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
            max-width: 100%;
            box-sizing: border-box;
        }
        .det-rpt-doc { font-family: 'DM Sans', system-ui, sans-serif; color: #0f172a; font-size: 0.82rem; line-height: 1.45; }
        .det-rpt-doc-head { border-bottom: 2px solid #0c4a6e; padding-bottom: 12px; margin-bottom: 16px; }
        .det-rpt-brand {
            display: flex;
            align-items: center;
            margin: 0 0 4px;
        }
        .det-rpt-logo {
            height: 44px;
            width: auto;
            max-width: 200px;
            object-fit: contain;
            object-position: left center;
            display: block;
        }
        .det-rpt-doc-head h1 { margin: 8px 0 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
        .det-rpt-lead { margin: 8px 0 0; color: #475569; font-size: 0.8rem; }
        .det-rpt-meta { margin: 10px 0 0; font-size: 0.72rem; color: #64748b; }
        .det-rpt-sec { margin-top: 18px; }
        .det-rpt-sec h2 { margin: 0 0 10px; font-size: 0.88rem; font-weight: 800; color: #0c4a6e; text-transform: uppercase; letter-spacing: 0.06em; }
        .det-rpt-note { margin: 0 0 10px; color: #64748b; font-size: 0.75rem; }
        .det-rpt-table { width: 100%; max-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.76rem; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); table-layout: fixed; }
        .det-rpt-table th,
        .det-rpt-table td { border: none; border-bottom: 1px solid #e8eef4; padding: 10px 12px; text-align: left; vertical-align: middle; }
        .det-rpt-table tbody tr:nth-child(even) { background: #f8fafc; }
        .det-rpt-table tbody tr:hover { background: #f1f5f9; }
        .det-rpt-table th { background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%); font-weight: 800; color: #0c4a6e; border-bottom: 2px solid #bae6fd; }
        .det-rpt-table tbody tr:last-child td { border-bottom: none; }
        .det-rpt-svc-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
        .det-rpt-svc-logo {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            border-radius: 9px;
            object-fit: contain;
            background: #fff;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
            border: 1px solid rgba(148, 163, 184, 0.35);
        }
        .det-rpt-svc-name { font-weight: 600; color: #0f172a; line-height: 1.3; min-width: 0; word-break: break-word; overflow-wrap: anywhere; }
        .det-rpt-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.74rem; }
        .det-rpt-bar-lbl { width: 120px; flex-shrink: 0; font-weight: 600; }
        .det-rpt-bar-track { flex: 1; height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
        .det-rpt-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #0284c7, #38bdf8); border-radius: 999px; }
        .det-rpt-bar-pct { width: 42px; text-align: right; font-variant-numeric: tabular-nums; color: #64748b; }
        .det-rpt-ip-list { margin: 0; padding-left: 18px; color: #334155; }
        .det-rpt-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid #e2e8f0; font-size: 0.72rem; color: #64748b; }
        .det-rpt-foot-site { margin-top: 10px; font-size: 0.78rem; font-weight: 700; color: #0369a1; }
        .det-rpt-foot-link { color: #0369a1; text-decoration: none; }
        .det-rpt-foot-link:hover { text-decoration: underline; }
        .det-rpt-url { word-break: break-all; margin-top: 6px; }
        /* Modal: cartão Top 10 para redes */
        .det-t10-social-modal {
            position: fixed;
            inset: 0;
            z-index: 100004;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.22s ease, visibility 0.22s;
        }
        .det-t10-social-modal.open {
            pointer-events: auto;
            opacity: 1;
            visibility: visible;
        }
        .det-t10-social-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(15, 23, 42, 0.55);
            backdrop-filter: blur(8px);
        }
        .det-t10-social-sheet {
            position: relative;
            width: min(400px, 100%);
            max-height: min(90vh, 720px);
            border-radius: 18px;
            background: var(--card);
            border: 1px solid var(--border);
            box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            min-height: 0;
        }
        .det-t10-social-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 14px 16px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.2);
            background: linear-gradient(135deg, rgba(109, 40, 217, 0.08), rgba(219, 39, 119, 0.06));
        }
        .det-t10-social-head h2 {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 800;
            line-height: 1.25;
        }
        .det-t10-social-close {
            border: none;
            background: rgba(148, 163, 184, 0.18);
            width: 38px;
            height: 38px;
            border-radius: 10px;
            font-size: 1.3rem;
            cursor: pointer;
            line-height: 1;
        }
        .det-t10-social-lead {
            margin: 0;
            padding: 10px 16px 0;
            font-size: 0.72rem;
            color: var(--muted);
            line-height: 1.45;
        }
        .det-t10-social-preview-wrap {
            padding: 12px 16px;
            flex: 0 1 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: min(42vh, 280px);
            position: relative;
        }
        .det-t10-social-loading {
            margin: 0;
            padding: 24px 20px;
            text-align: center;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--muted);
            line-height: 1.5;
            max-width: 280px;
        }
        .det-t10-social-loading[data-busy="1"]::after {
            content: '';
            display: block;
            width: 36px;
            height: 36px;
            margin: 16px auto 0;
            border: 3px solid rgba(2, 132, 199, 0.2);
            border-top-color: #0284c7;
            border-radius: 50%;
            animation: det-t10-social-spin 0.75s linear infinite;
        }
        @keyframes det-t10-social-spin {
            to { transform: rotate(360deg); }
        }
        .det-t10-social-preview-img {
            max-width: 100%;
            width: auto;
            height: auto;
            max-height: min(42vh, 360px);
            border-radius: 14px;
            box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
            object-fit: contain;
            background: #0f172a;
        }
        .det-t10-social-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            padding: 12px 16px 16px;
            border-top: 1px solid rgba(148, 163, 184, 0.15);
        }
        .det-t10-social-act {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 44px;
            padding: 8px 10px;
            border-radius: 10px;
            font-size: 0.72rem;
            font-weight: 700;
            cursor: pointer;
            border: 1px solid rgba(2, 132, 199, 0.35);
            background: #fff;
            color: #0369a1;
            touch-action: manipulation;
        }
        .det-t10-social-act--wa {
            border-color: rgba(37, 211, 102, 0.45);
            color: #128c7e;
        }
        .det-t10-social-icons-row {
            grid-column: 1 / -1;
            display: flex;
            justify-content: center;
            gap: 16px;
        }
        .det-t10-social-ico-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            transition: transform .15s, box-shadow .15s;
            touch-action: manipulation;
            padding: 0;
        }
        .det-t10-social-ico-btn:active {
            transform: scale(.93);
        }
        .det-t10-social-ico-btn svg {
            width: 26px;
            height: 26px;
            fill: #fff;
        }
        .det-t10-social-ico-btn--wa {
            background: #25D366;
            box-shadow: 0 2px 8px rgba(37,211,102,.35);
        }
        .det-t10-social-ico-btn--ig {
            background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
            box-shadow: 0 2px 8px rgba(214,36,159,.35);
        }
        .det-t10-social-ico-btn--fb {
            background: #1877F2;
            box-shadow: 0 2px 8px rgba(24,119,242,.35);
        }
        .det-t10-social-act--primary {
            grid-column: 1 / -1;
            background: linear-gradient(135deg, #0369a1, #0284c7);
            color: #fff;
            border-color: transparent;
        }
        .det-t10-social-actions--disabled {
            opacity: 0.5;
            pointer-events: none;
        }
        .det-t10-social-canvas {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
            left: -9999px;
            top: 0;
        }
        @media (max-width: 840px) {
            .det-report-share-modal {
                padding-left: max(0px, env(safe-area-inset-left, 0px));
                padding-right: max(0px, env(safe-area-inset-right, 0px));
            }
            .det-report-sheet {
                width: 100%;
                max-width: none;
            }
            .det-report-head {
                padding: 12px 14px;
            }
            .det-report-head h2 {
                font-size: 0.92rem;
                line-height: 1.25;
            }
            .det-report-actions {
                padding: 10px 12px;
                grid-template-columns: 1fr 1fr;
            }
            .det-report-preview-wrap {
                padding: 10px 12px 14px;
            }
            #detReportPreviewInner {
                padding: 14px 14px 16px;
            }
            .det-rpt-doc-head h1 {
                font-size: 1.05rem;
            }
            .det-rpt-lead,
            .det-rpt-meta {
                font-size: 0.72rem;
            }
            .det-rpt-bar-row {
                flex-wrap: wrap;
                gap: 6px;
            }
            .det-rpt-bar-lbl {
                width: 100%;
                max-width: none;
            }
            .det-rpt-table {
                display: block;
                border-radius: 0;
                box-shadow: none;
            }
            .det-rpt-table thead {
                display: none;
            }
            .det-rpt-table tbody {
                display: block;
            }
            .det-rpt-table tbody tr {
                display: block;
                border: 1px solid #e2e8f0;
                border-radius: 12px;
                margin-bottom: 10px;
                overflow: hidden;
                background: #fff;
            }
            .det-rpt-table tbody tr:nth-child(even) {
                background: #fff;
            }
            .det-rpt-table tbody tr:last-child {
                margin-bottom: 0;
            }
            .det-rpt-table tbody td {
                display: grid;
                grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
                gap: 6px 10px;
                align-items: center;
                padding: 10px 12px;
                border-bottom: 1px solid #f1f5f9;
                text-align: right;
                vertical-align: middle;
            }
            .det-rpt-table tbody td::before {
                content: attr(data-det-rpt-lbl);
                font-weight: 800;
                font-size: 0.65rem;
                color: #0c4a6e;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                line-height: 1.25;
                text-align: left;
            }
            .det-rpt-table tbody td:last-child {
                border-bottom: none;
            }
            .det-rpt-table tbody td .det-rpt-svc-cell {
                justify-content: flex-end;
                flex-wrap: wrap;
                gap: 8px;
            }
            html[data-det-theme='dark'] .det-rpt-table tbody tr {
                border-color: rgba(255, 255, 255, 0.1);
                background: rgba(24, 24, 27, 0.55);
            }
            html[data-det-theme='dark'] .det-rpt-table tbody td {
                border-bottom-color: rgba(255, 255, 255, 0.07);
            }
            html[data-det-theme='dark'] .det-rpt-table tbody td::before {
                color: #7dd3fc;
            }
        }
        @media (max-width: 600px) {
            .det-report-share-modal {
                align-items: flex-end;
                justify-content: stretch;
                padding: 0;
                padding-bottom: env(safe-area-inset-bottom, 0px);
            }
            .det-report-sheet {
                max-height: min(94dvh, 100%);
                border-radius: 16px 16px 0 0;
                margin: 0 env(safe-area-inset-left, 0) 0 env(safe-area-inset-right, 0);
            }
        }
        @media print {
            body * { visibility: hidden !important; }
            .det-report-share-modal.open,
            .det-report-share-modal.open * { visibility: visible !important; }
            .det-report-share-modal.open {
                position: absolute !important;
                inset: 0 !important;
                background: #fff !important;
            }
            .det-report-share-modal.open .det-report-share-backdrop,
            .det-report-share-modal.open .det-report-head,
            .det-report-share-modal.open .det-report-actions { display: none !important; }
            .det-report-share-modal.open .det-report-sheet {
                box-shadow: none !important;
                max-height: none !important;
            }
            .det-report-preview-wrap { overflow: visible !important; background: #fff !important; }
            .det-rpt-table {
                display: table !important;
                table-layout: auto !important;
            }
            .det-rpt-table thead {
                display: table-header-group !important;
            }
            .det-rpt-table tbody {
                display: table-row-group !important;
            }
            .det-rpt-table tbody tr {
                display: table-row !important;
                border: none !important;
                border-radius: 0 !important;
                margin: 0 !important;
                background: transparent !important;
            }
            .det-rpt-table tbody td {
                display: table-cell !important;
                padding: 10px 12px !important;
                border-bottom: 1px solid #e8eef4 !important;
                text-align: left !important;
            }
            .det-rpt-table tbody td::before {
                content: none !important;
            }
        }
        footer.foot {
            text-align: center;
            color: var(--muted);
            font-size: 0.78rem;
            margin-top: 40px;
            padding-top: 24px;
            border-top: 1px solid var(--border);
            line-height: 1.6;
        }
        footer.foot a { color: var(--accent); }
        .filter-hide { display: none !important; }
        @media (max-width: 640px) {
            .toolbar {
                flex-direction: column;
                align-items: stretch;
            }
            .toolbar .seg,
            .toolbar .seg-view {
                justify-content: flex-start;
            }
            .toolbar .refresh-btn { width: 100%; min-height: 48px; }
            .block-head { flex-direction: column; align-items: flex-start; }
            .hero .tagline { font-size: 0.88rem; padding: 0 4px; }
            .brand-stack .brand-mark { height: 44px; }
        }
        @media (max-width: 600px) {
            .tile { width: min(40vw, 140px); }
            .row-scroll {
                gap: 10px;
                scroll-snap-type: x proximity;
                padding-bottom: 20px;
            }
        }
        @media (max-width: 380px) {
            .tile { width: 38vw; min-width: 118px; }
        }
        /* Mobile: cartões mais largos e tipografia mais legível (alinhado ao desktop) */
        @media (max-width: 720px) {
            .row-scroll {
                gap: 12px;
                padding-bottom: 14px;
            }
            .row-scroll .tile {
                width: min(82vw, 200px);
                min-width: 152px;
            }
            .tile .poster .poster-lat .lat-val {
                font-size: 1rem;
            }
            .tile .poster .t,
            .tile .poster .d {
                font-size: 0.82rem;
            }
            .tile-lat-pill {
                font-size: 0.54rem;
                padding: 4px 8px;
            }
            .tile-more-btn {
                font-size: 0.72rem;
                min-height: 36px;
            }
        }
        @media (max-width: 380px) {
            .row-scroll .tile {
                width: min(88vw, 188px);
                min-width: 148px;
            }
        }
        /* Desktop: monte de reclamações fica vazio (conteúdo na sidebar) */
        @media (min-width: 1024px) {
            .det-m-complaints-mount {
                display: none !important;
            }
            #detMobileRankPanelsMount,
            .det-mobile-top5-slot {
                display: none !important;
            }
        }
        /* Mobile/tablet: separador visual quando o Top 10 é mostrado após rankings */
        @media (max-width: 1023px) {
            .det-m-complaints-mount:not(:empty) {
                display: block;
                margin-top: 16px;
                padding-top: 16px;
                border-top: 1px solid rgba(2, 132, 199, 0.18);
            }
            .det-m-complaints-mount:empty {
                display: none;
            }
            .det-dash-details--rank .det-m-complaints-mount .det-sidebar-block--complaints {
                margin-bottom: 0;
            }
        }
        /* Modal detalhe serviço */
        .modal-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 100;
            background: rgba(15, 23, 42, 0.25);
            backdrop-filter: blur(8px);
            align-items: flex-end;
            justify-content: center;
            padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
            touch-action: none;
        }
        .modal-backdrop.open { display: flex; }
        .det-ad-pack-backdrop {
            align-items: center;
            justify-content: center;
            z-index: 140;
            background: rgba(15, 23, 42, 0.55);
            backdrop-filter: blur(10px);
            padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom))
                max(16px, env(safe-area-inset-left));
        }
        .det-local-ad-takeover {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 160;
            align-items: center;
            justify-content: center;
            padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom))
                max(16px, env(safe-area-inset-left));
            background: rgba(15, 23, 42, 0.78);
            backdrop-filter: blur(10px);
            box-sizing: border-box;
        }
        .det-local-ad-takeover.det-local-ad-takeover--open {
            display: flex;
        }
        .det-local-ad-takeover__panel {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            max-width: min(96vw, min(92vmin, 640px));
            width: 100%;
            animation: detLocalAdIn 0.35s ease-out;
        }
        @keyframes detLocalAdIn {
            from {
                opacity: 0;
                transform: translateY(12px) scale(0.96);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .det-local-ad-takeover__panel {
                animation: none;
            }
        }
        .det-local-ad-takeover__close {
            position: absolute;
            top: -6px;
            right: -4px;
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.95);
            color: #0f172a;
            font-size: 1.35rem;
            line-height: 1;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
        }
        .det-local-ad-takeover__close:hover,
        .det-local-ad-takeover__close:focus-visible {
            outline: none;
            filter: brightness(1.05);
        }
        .det-local-ad-takeover__img-wrap {
            width: min(88vmin, min(94vw, 600px));
            max-width: 100%;
            aspect-ratio: 1;
            border-radius: 18px;
            overflow: hidden;
            background: #fff;
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.5),
                0 20px 50px rgba(0, 0, 0, 0.35);
        }
        .det-local-ad-takeover__img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .det-local-ad-takeover__cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 46px;
            padding: 0 22px;
            border-radius: 999px;
            font-size: 0.9rem;
            font-weight: 800;
            text-decoration: none;
            color: #fff;
            background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 45%, #38bdf8 100%);
            box-shadow: 0 8px 24px rgba(14, 165, 233, 0.45);
        }
        .det-local-ad-takeover__cta:hover,
        .det-local-ad-takeover__cta:focus-visible {
            color: #fff;
            filter: brightness(1.06);
            outline: none;
        }
        .det-local-ad-takeover__countdown {
            position: absolute;
            right: 8px;
            bottom: 8px;
            min-width: 92px;
            text-align: center;
            padding: 6px 10px;
            border-radius: 10px;
            font-size: 0.74rem;
            font-weight: 800;
            color: #e2e8f0;
            background: rgba(15, 23, 42, 0.74);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        }
        .det-ad-pack-sheet.modal-sheet {
            position: relative;
            max-width: min(960px, calc(100vw - 28px));
            width: calc(100vw - 32px);
            max-height: min(92vh, 880px);
            overflow-y: auto;
            border-radius: 22px;
            padding: 0 0 22px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 48%, #f1f5f9 100%);
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow:
                0 4px 6px -1px rgba(15, 23, 42, 0.06),
                0 24px 48px -12px rgba(15, 23, 42, 0.18),
                0 0 0 1px rgba(255, 255, 255, 0.9) inset;
            font-family: 'DM Sans', 'Outfit', system-ui, sans-serif;
        }
        .det-ad-pack-sheet-top-actions {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 12;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 8px;
            max-width: min(calc(100% - 24px), 320px);
        }
        .det-ad-pack-sheet-top-actions .det-ad-pack-ticket-top,
        .det-ad-pack-sheet-top-actions .modal-close.det-ad-pack-close {
            position: static;
            flex-shrink: 0;
        }
        .det-ad-pack-ticket-top {
            padding: 8px 12px;
            border-radius: 10px;
            font: inherit;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            cursor: pointer;
            border: 1px solid rgba(2, 132, 199, 0.45);
            background: linear-gradient(135deg, rgba(240, 249, 255, 0.98) 0%, #fff 100%);
            color: #0369a1;
            box-shadow: 0 2px 10px rgba(2, 132, 199, 0.12);
            transition:
                background 0.15s,
                border-color 0.15s,
                transform 0.12s;
            white-space: nowrap;
        }
        .det-ad-pack-ticket-top:hover {
            border-color: rgba(2, 132, 199, 0.65);
            background: #fff;
        }
        .det-ad-pack-ticket-top:focus-visible {
            outline: 2px solid rgba(14, 165, 233, 0.75);
            outline-offset: 2px;
        }
        .det-ad-pack-ticket-top:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .det-ad-pack-sheet .modal-close.det-ad-pack-close {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            border: 1px solid rgba(15, 23, 42, 0.1);
            background: rgba(255, 255, 255, 0.92);
            color: #0f172a;
            font-size: 1.25rem;
            line-height: 1;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
        }
        .det-ad-pack-brand-head {
            position: sticky;
            top: 0;
            z-index: 5;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px 16px;
            /* Espaço para cluster ticket+fechar + pill (largura variável do texto do ticket) */
            padding: 18px clamp(72px, 28vw, 240px) 14px 20px;
            margin: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 70%, rgba(255, 255, 255, 0.88) 100%);
            border-bottom: 1px solid rgba(15, 23, 42, 0.06);
            backdrop-filter: blur(12px);
        }
        @media (max-width: 520px) {
            .det-ad-pack-sheet-top-actions {
                top: 10px;
                right: 10px;
                gap: 6px;
                max-width: calc(100% - 20px);
            }
            .det-ad-pack-ticket-top {
                font-size: 0.62rem;
                padding: 6px 10px;
                letter-spacing: 0.03em;
            }
            .det-ad-pack-brand-head {
                padding-top: 56px;
                padding-right: 12px;
            }
        }
        .det-ad-pack-logos {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            min-width: 0;
        }
        .det-ad-pack-logo-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            outline-offset: 3px;
            transition: opacity 0.15s ease, transform 0.12s ease;
        }
        .det-ad-pack-logo-link:hover {
            opacity: 0.92;
        }
        .det-ad-pack-logo-link:active {
            transform: scale(0.98);
        }
        .det-ad-pack-logo-link:focus-visible {
            outline: 2px solid rgba(2, 132, 199, 0.65);
        }
        .det-ad-pack-logo {
            display: block;
            height: auto;
            max-height: 52px;
            width: auto;
            max-width: 42%;
            object-fit: contain;
            filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.08));
        }
        .det-ad-pack-logo--brand {
            max-height: 56px;
            max-width: 38%;
        }
        .det-ad-pack-logo--detector {
            max-height: 48px;
            max-width: 52%;
        }
        .det-ad-pack-logo-sep {
            width: 1px;
            height: 36px;
            background: linear-gradient(180deg, transparent, rgba(2, 132, 199, 0.35), transparent);
            flex-shrink: 0;
        }
        .det-ad-pack-slots-pill {
            flex-shrink: 0;
            padding: 8px 14px;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #fff;
            background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 55%, #0369a1 100%);
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
            border: 1px solid rgba(255, 255, 255, 0.12);
        }
        .det-ad-pack-hero {
            padding: 8px 22px 6px;
            margin: 0;
        }
        .det-ad-pack-hero--compact .det-ad-pack-headline {
            font-size: 1.15rem;
        }
        .det-ad-pack-left-strip-notice {
            margin: 0 22px 14px;
            padding: 12px 16px;
            border-radius: 12px;
            font-size: 0.88rem;
            font-weight: 700;
            line-height: 1.45;
            color: #713f12;
            background: linear-gradient(180deg, #fef9c3 0%, #fde047 42%, #facc15 100%);
            border: 1px solid rgba(161, 98, 7, 0.5);
            box-shadow: 0 4px 18px rgba(234, 179, 8, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
        }
        @media (max-width: 520px) {
            .det-ad-pack-left-strip-notice {
                margin-left: 16px;
                margin-right: 16px;
            }
        }
        .det-ad-pack-top-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px 24px;
            align-items: start;
            margin: 0 22px 20px;
            padding: 0;
        }
        @media (max-width: 720px) {
            .det-ad-pack-top-split {
                grid-template-columns: 1fr;
            }
        }
        .det-ad-pack-story {
            padding: 18px 18px 20px;
            border-radius: 18px;
            background: linear-gradient(165deg, rgba(248, 250, 252, 0.98) 0%, #fff 55%, rgba(241, 245, 249, 0.92) 100%);
            border: 1px solid rgba(15, 23, 42, 0.07);
            box-shadow: 0 10px 36px -18px rgba(15, 23, 42, 0.15);
        }
        .det-ad-pack-story-head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(15, 23, 42, 0.06);
        }
        .det-ad-pack-flag {
            display: block;
            width: auto;
            height: 30px;
            flex-shrink: 0;
            border-radius: 3px;
            object-fit: cover;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
        }
        .det-ad-pack-story-title {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #0f172a;
            line-height: 1.3;
        }
        .det-ad-pack-story-p {
            margin: 0 0 12px;
            font-size: 0.8rem;
            line-height: 1.62;
            color: #475569;
            font-weight: 500;
        }
        .det-ad-pack-story-p:last-child {
            margin-bottom: 0;
        }
        .det-ad-pack-story-p--highlight {
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(14, 165, 233, 0.08);
            border: 1px solid rgba(14, 165, 233, 0.2);
            color: #0c4a6e;
            font-weight: 600;
        }
        .det-ad-pack-report-preview {
            margin: 14px 0 0;
            padding: 12px 14px 10px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(14, 165, 233, 0.06) 100%);
            border: 1.5px solid rgba(16, 185, 129, 0.22);
        }
        .det-ad-pack-report-preview__header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 0 0 8px;
        }
        .det-ad-pack-report-preview__icon {
            font-size: 1rem;
        }
        .det-ad-pack-report-preview__title {
            font-size: .72rem;
            font-weight: 700;
            color: #065f46;
            text-transform: uppercase;
            letter-spacing: .03em;
        }
        .det-ad-pack-report-preview__table {
            width: 100%;
            border-collapse: collapse;
            font-size: .76rem;
        }
        .det-ad-pack-report-preview__table th {
            text-align: left;
            font-weight: 700;
            color: #0f766e;
            padding: 4px 8px;
            border-bottom: 2px solid rgba(16, 185, 129, 0.25);
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .04em;
        }
        .det-ad-pack-report-preview__table th:last-child {
            text-align: right;
        }
        .det-ad-pack-report-preview__table td {
            padding: 5px 8px;
            border-bottom: 1px solid rgba(16, 185, 129, 0.1);
            color: #334155;
            font-weight: 500;
        }
        .det-ad-pack-report-preview__table td.det-rp-val {
            text-align: right;
            font-weight: 700;
            color: #0f766e;
            font-variant-numeric: tabular-nums;
        }
        .det-ad-pack-report-preview__table tr:last-child td {
            border-bottom: none;
        }
        .det-ad-pack-report-preview__footer {
            margin: 8px 0 0;
            font-size: .65rem;
            color: #64748b;
            font-weight: 500;
            line-height: 1.4;
        }
        html[data-det-theme='dark'] .det-ad-pack-report-preview {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);
            border-color: rgba(16, 185, 129, 0.18);
        }
        html[data-det-theme='dark'] .det-ad-pack-report-preview__title {
            color: #6ee7b7;
        }
        html[data-det-theme='dark'] .det-ad-pack-report-preview__table th {
            color: #6ee7b7;
            border-bottom-color: rgba(16, 185, 129, 0.2);
        }
        html[data-det-theme='dark'] .det-ad-pack-report-preview__table td {
            color: #cbd5e1;
            border-bottom-color: rgba(16, 185, 129, 0.08);
        }
        html[data-det-theme='dark'] .det-ad-pack-report-preview__table td.det-rp-val {
            color: #6ee7b7;
        }
        html[data-det-theme='dark'] .det-ad-pack-report-preview__footer {
            color: #94a3b8;
        }
        .det-ad-pack-mobile-premium-seal {
            margin: 0 0 14px;
            padding: 14px 16px 12px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(218,165,32,0.08) 0%, rgba(251,191,36,0.12) 50%, rgba(218,165,32,0.06) 100%);
            border: 1.5px solid rgba(218,165,32,0.35);
            box-shadow: 0 1px 10px rgba(218,165,32,0.1);
            text-align: center;
        }
        .det-ad-pack-mobile-premium-seal__stars {
            font-size: 1rem;
            letter-spacing: 3px;
            margin: 0 0 6px;
            line-height: 1;
        }
        .det-ad-pack-mobile-premium-seal__badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 0 auto 8px;
            padding: 4px 14px;
            border-radius: 20px;
            background: linear-gradient(135deg, #b8860b, #daa520, #f0c040);
            box-shadow: 0 2px 8px rgba(218,165,32,0.3);
        }
        .det-ad-pack-mobile-premium-seal__icon {
            font-size: 1.1rem;
            line-height: 1;
        }
        .det-ad-pack-mobile-premium-seal__label {
            font-size: .7rem;
            font-weight: 800;
            color: #fff;
            letter-spacing: .12em;
            text-transform: uppercase;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        .det-ad-pack-mobile-premium-seal__text {
            margin: 0;
            font-size: .76rem;
            font-weight: 600;
            line-height: 1.45;
            color: #78350f;
        }
        html[data-det-theme='dark'] .det-ad-pack-mobile-premium-seal {
            background: linear-gradient(135deg, rgba(218,165,32,0.06) 0%, rgba(251,191,36,0.08) 50%, rgba(218,165,32,0.04) 100%);
            border-color: rgba(218,165,32,0.25);
        }
        html[data-det-theme='dark'] .det-ad-pack-mobile-premium-seal__text {
            color: #fbbf24;
        }
        .det-ad-pack-enterprise {
            position: relative;
            border-radius: 20px;
            padding: 2px;
            background: linear-gradient(
                145deg,
                rgba(251, 191, 36, 0.75) 0%,
                rgba(245, 158, 11, 0.55) 22%,
                rgba(234, 179, 8, 0.65) 45%,
                rgba(180, 83, 9, 0.5) 72%,
                rgba(251, 191, 36, 0.7) 100%
            );
            box-shadow:
                0 0 0 1px rgba(254, 243, 199, 0.45) inset,
                0 0 28px -4px rgba(251, 191, 36, 0.55),
                0 0 48px -8px rgba(245, 158, 11, 0.35),
                0 16px 44px -14px rgba(180, 83, 9, 0.28),
                0 28px 64px -20px rgba(15, 23, 42, 0.2);
        }
        .det-ad-pack-enterprise-glow {
            position: absolute;
            inset: -24%;
            background:
                radial-gradient(ellipse 80% 55% at 50% 25%, rgba(253, 224, 71, 0.35) 0%, transparent 52%),
                radial-gradient(ellipse 70% 50% at 70% 80%, rgba(251, 191, 36, 0.22) 0%, transparent 48%);
            pointer-events: none;
            z-index: 0;
            animation: detAdPackEnterpriseGoldPulse 4.2s ease-in-out infinite;
        }
        @keyframes detAdPackEnterpriseGoldPulse {
            0%,
            100% {
                opacity: 0.72;
                filter: brightness(1);
            }
            50% {
                opacity: 1;
                filter: brightness(1.08);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .det-ad-pack-enterprise-glow {
                animation: none;
                opacity: 0.85;
            }
        }
        .det-ad-pack-enterprise-scene {
            position: relative;
            z-index: 1;
            perspective: 1100px;
            perspective-origin: 50% 45%;
            border-radius: 18px;
        }
        .det-ad-pack-enterprise-idle-float {
            transform-style: preserve-3d;
            will-change: transform;
            border-radius: 18px;
        }
        /* Loop suave 3D (rotação + leve “respiro” em escala) — pausa no hover para preencher o formulário */
        .det-ad-pack-enterprise--3d:not(:hover):not(.det-ad-pack-enterprise--dragging)
            .det-ad-pack-enterprise-idle-float {
            animation: detAdPackEnterpriseIdle3d 10s ease-in-out infinite;
        }
        .det-ad-pack-enterprise--3d:hover:not(.det-ad-pack-enterprise--dragging) .det-ad-pack-enterprise-idle-float {
            animation: none;
            transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
        }
        .det-ad-pack-enterprise--3d.det-ad-pack-enterprise--dragging .det-ad-pack-enterprise-idle-float {
            animation: none;
            transform: none;
            transition: none;
        }
        .det-ad-pack-enterprise--3d .det-ad-pack-enterprise-idle-float {
            transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
        }
        @keyframes detAdPackEnterpriseIdle3d {
            0%,
            100% {
                transform: translate3d(0, 0, 0) rotateX(-1.5deg) rotateY(-4deg) scale3d(1, 1, 1);
            }
            20% {
                transform: translate3d(0, -4px, 14px) rotateX(2.5deg) rotateY(5deg) scale3d(1.018, 1.018, 1);
            }
            45% {
                transform: translate3d(0, 1px, 8px) rotateX(0.5deg) rotateY(-5deg) scale3d(1.01, 1.01, 1);
            }
            70% {
                transform: translate3d(0, 3px, 12px) rotateX(-2deg) rotateY(3.5deg) scale3d(1.014, 1.014, 1);
            }
            88% {
                transform: translate3d(0, -2px, 6px) rotateX(1.2deg) rotateY(-2deg) scale3d(1.006, 1.006, 1);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .det-ad-pack-enterprise--3d .det-ad-pack-enterprise-idle-float {
                animation: none !important;
                transform: none !important;
                transition: none !important;
            }
        }
        .det-ad-pack-enterprise--3d .det-ad-pack-enterprise-scene {
            cursor: grab;
        }
        .det-ad-pack-enterprise--3d.det-ad-pack-enterprise--dragging .det-ad-pack-enterprise-scene {
            cursor: grabbing;
            touch-action: none;
        }
        .det-ad-pack-enterprise-rotate {
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(0deg) rotateY(0deg);
            transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform;
        }
        .det-ad-pack-enterprise--dragging .det-ad-pack-enterprise-rotate {
            transition: none;
        }
        .det-ad-pack-enterprise-face {
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        .det-ad-pack-enterprise-face--front {
            position: relative;
            transform: translateZ(2px);
        }
        .det-ad-pack-enterprise-face--back {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            transform: rotateY(180deg) translateZ(2px);
        }
        .det-ad-pack-enterprise--no-3d .det-ad-pack-enterprise-face--back {
            display: none;
        }
        .det-ad-pack-enterprise-inner {
            position: relative;
            z-index: 1;
            border-radius: 18px;
            padding: 18px 16px 16px;
            background: linear-gradient(180deg, #0f172a 0%, #1e293b 48%, #0f172a 100%);
            border: 1px solid rgba(148, 163, 184, 0.15);
            min-height: 100%;
            box-sizing: border-box;
        }
        .det-ad-pack-enterprise-inner--back {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 22px 18px 20px;
            background: linear-gradient(165deg, #1c1917 0%, #0f172a 38%, #1e1b4b 100%);
            border: 1px solid rgba(251, 191, 36, 0.28);
            box-shadow: inset 0 1px 0 rgba(254, 243, 199, 0.12);
            overflow: hidden;
        }
        .det-ad-pack-enterprise-back-shine {
            position: absolute;
            inset: -40% -20%;
            background: linear-gradient(
                125deg,
                transparent 35%,
                rgba(253, 224, 71, 0.12) 48%,
                rgba(251, 191, 36, 0.18) 52%,
                transparent 65%
            );
            pointer-events: none;
            animation: detAdPackEnterpriseBackShine 7s ease-in-out infinite;
        }
        @keyframes detAdPackEnterpriseBackShine {
            0%,
            100% {
                transform: translateX(-12%) rotate(0deg);
                opacity: 0.65;
            }
            50% {
                transform: translateX(12%) rotate(0deg);
                opacity: 1;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .det-ad-pack-enterprise-back-shine {
                animation: none;
                opacity: 0.5;
            }
        }
        .det-ad-pack-enterprise-badge--gold {
            position: relative;
            z-index: 1;
            color: #fef3c7;
            background: linear-gradient(135deg, rgba(180, 83, 9, 0.55) 0%, rgba(146, 64, 14, 0.65) 100%);
            border-color: rgba(251, 191, 36, 0.55);
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
        }
        .det-ad-pack-enterprise-back-kicker {
            position: relative;
            z-index: 1;
            margin: 12px 0 6px;
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(253, 224, 71, 0.85);
        }
        .det-ad-pack-enterprise-back-title {
            position: relative;
            z-index: 1;
            margin: 0 0 10px;
            font-size: 1.05rem;
            font-weight: 800;
            line-height: 1.35;
            color: #fefce8;
            letter-spacing: -0.02em;
        }
        .det-ad-pack-enterprise-back-lead {
            position: relative;
            z-index: 1;
            margin: 0 0 14px;
            font-size: 0.8rem;
            line-height: 1.55;
            color: #d6d3d1;
            font-weight: 500;
        }
        .det-ad-pack-enterprise-back-list {
            position: relative;
            z-index: 1;
            margin: 0 0 16px;
            padding: 0 0 0 1.1rem;
            text-align: left;
            width: 100%;
            max-width: 280px;
            box-sizing: border-box;
            color: #e7e5e4;
            font-size: 0.76rem;
            line-height: 1.5;
            font-weight: 600;
        }
        .det-ad-pack-enterprise-back-list li {
            margin-bottom: 8px;
        }
        .det-ad-pack-enterprise-back-list li:last-child {
            margin-bottom: 0;
        }
        .det-ad-pack-enterprise-back-hint {
            position: relative;
            z-index: 1;
            margin: 0;
            font-size: 0.68rem;
            line-height: 1.45;
            font-weight: 700;
            color: rgba(251, 191, 36, 0.92);
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(251, 191, 36, 0.1);
            border: 1px solid rgba(251, 191, 36, 0.28);
        }
        .det-ad-pack-enterprise-head {
            margin-bottom: 14px;
        }
        .det-ad-pack-enterprise-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #e0f2fe;
            background: linear-gradient(135deg, rgba(56, 189, 248, 0.35) 0%, rgba(99, 102, 241, 0.4) 100%);
            border: 1px solid rgba(125, 211, 252, 0.35);
            margin-bottom: 8px;
        }
        .det-ad-pack-enterprise-title {
            margin: 0;
            font-size: 0.88rem;
            font-weight: 700;
            line-height: 1.45;
            color: #f1f5f9;
        }
        .det-ad-pack-preview-wrap {
            position: relative;
            margin-bottom: 14px;
        }
        .det-ad-pack-preview-slot {
            position: relative;
            width: 100%;
            aspect-ratio: 1;
            max-height: 200px;
            margin: 0 auto 10px;
            border-radius: 16px;
            background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
            border: 2px dashed rgba(148, 163, 184, 0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-sizing: border-box;
        }
        .det-ad-pack-preview-slot--has-img {
            border-style: solid;
            border-color: rgba(212, 175, 55, 0.55);
            box-shadow: 0 0 24px rgba(212, 175, 55, 0.15);
        }
        .det-ad-pack-preview-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 10px;
            box-sizing: border-box;
        }
        .det-ad-pack-preview-placeholder {
            position: absolute;
            left: 12px;
            right: 12px;
            text-align: center;
            font-size: 0.74rem;
            line-height: 1.45;
            color: #94a3b8;
            font-weight: 600;
            pointer-events: none;
        }
        .det-ad-pack-preview-placeholder[hidden] {
            display: none !important;
        }
        .det-ad-pack-file-input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }
        .det-ad-pack-pick-img {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 12px 16px;
            border-radius: 14px;
            border: 1px solid rgba(125, 211, 252, 0.35);
            background: rgba(15, 23, 42, 0.6);
            color: #e2e8f0;
            font: inherit;
            font-weight: 800;
            font-size: 0.82rem;
            cursor: pointer;
            transition:
                background 0.15s,
                border-color 0.15s,
                transform 0.1s;
        }
        .det-ad-pack-pick-img:hover {
            background: rgba(30, 41, 59, 0.85);
            border-color: rgba(56, 189, 248, 0.55);
        }
        .det-ad-pack-pick-img:focus-visible {
            outline: 2px solid #38bdf8;
            outline-offset: 2px;
        }
        .det-ad-pack-pick-img:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }
        .det-ad-pack-pick-img__plus {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 12px;
            font-size: 1.5rem;
            font-weight: 300;
            line-height: 1;
            background: linear-gradient(135deg, rgba(56, 189, 248, 0.35) 0%, rgba(99, 102, 241, 0.45) 100%);
            border: 1px solid rgba(125, 211, 252, 0.4);
            color: #f0f9ff;
        }
        .det-ad-pack-enterprise-field {
            margin-bottom: 0;
        }
        .det-ad-pack-enterprise-field label {
            display: block;
            font-size: 0.72rem;
            font-weight: 700;
            margin-bottom: 6px;
            color: #cbd5e1;
            letter-spacing: 0.02em;
        }
        .det-ad-pack-enterprise-field input[type='url'] {
            width: 100%;
            box-sizing: border-box;
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(15, 23, 42, 0.85);
            color: #f8fafc;
            font: inherit;
            font-size: 0.88rem;
        }
        .det-ad-pack-enterprise-field input[type='url']:focus {
            outline: none;
            border-color: rgba(56, 189, 248, 0.65);
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
        }
        .det-ad-pack-enterprise-field .det-ad-pack-creative-hint {
            color: #94a3b8;
            margin-top: 8px;
        }
        .det-ad-pack-pixel-rec {
            margin: 6px 0 8px;
            padding: 6px 10px;
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.06) 0%, rgba(99, 102, 241, 0.06) 100%);
            border: 1px solid rgba(14, 165, 233, 0.18);
            font-size: .68rem;
            font-weight: 600;
            color: #0369a1;
            line-height: 1.4;
            text-align: center;
        }
        html[data-det-theme='dark'] .det-ad-pack-pixel-rec {
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
            border-color: rgba(56, 189, 248, 0.2);
            color: #7dd3fc;
        }
        .det-ad-pack-creative-hint--file {
            margin: 10px 0 0;
            color: #64748b;
        }
        .det-ad-pack-enterprise-inner .det-ad-pack-creative-hint--file {
            color: #94a3b8;
            font-size: 0.7rem;
        }
        .det-ad-pack-kicker {
            margin: 0 0 8px;
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #0369a1;
            opacity: 0.95;
        }
        .det-ad-pack-headline {
            margin: 0 0 10px;
            font-size: 1.35rem;
            font-weight: 800;
            line-height: 1.22;
            color: #0f172a;
            letter-spacing: -0.03em;
        }
        .det-ad-pack-base {
            margin: 0;
            font-size: 0.84rem;
            color: #64748b;
            line-height: 1.55;
            font-weight: 500;
        }
        .det-ad-pack-table-wrap {
            margin: 0 20px 18px;
            padding: 16px 16px 12px;
            border-radius: 16px;
            background: #fff;
            border: 1px solid rgba(15, 23, 42, 0.07);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 8px 24px -8px rgba(15, 23, 42, 0.1);
        }
        .det-ad-pack-table-title {
            margin: 0 0 10px;
            font-size: 0.72rem;
            font-weight: 800;
            color: #0f172a;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .det-ad-pack-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8rem;
        }
        .det-ad-pack-table th,
        .det-ad-pack-table td {
            padding: 8px 10px;
            text-align: left;
            border-bottom: 1px solid rgba(226, 232, 240, 0.95);
        }
        .det-ad-pack-table th {
            font-weight: 800;
            color: #64748b;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .det-ad-pack-table tbody tr:last-child td {
            border-bottom: none;
        }
        .det-ad-pack-table td:last-child {
            font-variant-numeric: tabular-nums;
            font-weight: 800;
            color: #0369a1;
        }
        .det-ad-pack-price {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .det-ad-pack-price--old {
            text-decoration: line-through;
            color: #94a3b8;
            font-weight: 700;
        }
        .det-ad-pack-price--new {
            color: #0369a1;
            font-weight: 900;
        }
        .det-ad-pack-price-badge {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 0.63rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #92400e;
            background: linear-gradient(135deg, rgba(254, 243, 199, 0.95) 0%, rgba(253, 230, 138, 0.9) 100%);
            border: 1px solid rgba(245, 158, 11, 0.4);
            animation: detPromoPulse 1.6s ease-in-out infinite;
            transform-origin: center;
            white-space: nowrap;
        }
        .det-ad-pack-price-badge--warm {
            color: #9a3412;
            background: linear-gradient(135deg, rgba(255, 237, 213, 0.95) 0%, rgba(254, 215, 170, 0.9) 100%);
            border-color: rgba(249, 115, 22, 0.45);
        }
        .det-ad-pack-price-badge--hot {
            color: #fff;
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
            border-color: rgba(185, 28, 28, 0.6);
            box-shadow: 0 0 8px rgba(239, 68, 68, 0.35), 0 2px 4px rgba(185, 28, 28, 0.2);
            animation: detPromoPulse 1.6s ease-in-out infinite, detHotGlow 2s ease-in-out infinite alternate;
        }
        @keyframes detHotGlow {
            0% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.3), 0 2px 4px rgba(185, 28, 28, 0.15); }
            100% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.55), 0 2px 8px rgba(185, 28, 28, 0.3); }
        }
        @keyframes detPromoPulse {
            0% {
                transform: scale(1);
                filter: brightness(1);
            }
            50% {
                transform: scale(1.06);
                filter: brightness(1.08);
            }
            100% {
                transform: scale(1);
                filter: brightness(1);
            }
        }
        .det-ad-pack-form {
            margin: 0;
            padding: 0 22px;
        }
        #detAdPackCheckoutFields[hidden] {
            display: none !important;
        }
        .det-ad-pack-field {
            margin-bottom: 14px;
        }
        .det-ad-pack-field label {
            display: block;
            font-size: 0.76rem;
            font-weight: 700;
            margin-bottom: 6px;
            color: #0f172a;
            letter-spacing: 0.01em;
        }
        .det-ad-pack-field input {
            width: 100%;
            box-sizing: border-box;
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid rgba(15, 23, 42, 0.1);
            background: #fff;
            color: var(--text);
            font: inherit;
            font-size: 0.9rem;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        }
        .det-ad-pack-field input:focus {
            outline: none;
            border-color: rgba(2, 132, 199, 0.55);
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
        }
        .det-ad-pack-foot-cta {
            margin: 4px 22px 14px;
            padding: 12px 14px;
            border-radius: 14px;
            background: linear-gradient(165deg, rgba(248, 250, 252, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-sizing: border-box;
        }
        .det-ad-pack-foot-cta[hidden] {
            display: none !important;
        }
        .det-ad-pack-foot-cta__row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        .det-ad-pack-foot-flag {
            display: block;
            width: auto;
            height: 26px;
            flex-shrink: 0;
            border-radius: 3px;
            object-fit: cover;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
        }
        .det-ad-pack-foot-enterprise {
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #0369a1;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(14, 165, 233, 0.12);
            border: 1px solid rgba(14, 165, 233, 0.28);
        }
        .det-ad-pack-foot-lead {
            margin: 0 0 12px;
            font-size: 0.76rem;
            line-height: 1.5;
            color: #475569;
            font-weight: 600;
        }
        .det-ad-pack-quem-somos-pulse {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 10px 14px;
            border-radius: 12px;
            font: inherit;
            font-size: 0.78rem;
            font-weight: 800;
            text-decoration: none;
            text-align: center;
            box-sizing: border-box;
            color: #fff;
            background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 50%, #0284c7 100%);
            border: 1px solid rgba(14, 165, 233, 0.45);
            box-shadow: 0 2px 12px rgba(14, 165, 233, 0.35);
            animation: det-pack-quem-somos-pulse 1.35s ease-in-out infinite;
            transition: filter 0.15s ease, transform 0.12s ease;
        }
        .det-ad-pack-quem-somos-pulse:hover {
            filter: brightness(1.06);
            transform: translateY(-1px);
        }
        .det-ad-pack-quem-somos-pulse:focus-visible {
            outline: 2px solid rgba(14, 165, 233, 0.85);
            outline-offset: 2px;
        }
        @keyframes det-pack-quem-somos-pulse {
            0%,
            100% {
                box-shadow: 0 2px 12px rgba(14, 165, 233, 0.35);
                opacity: 1;
            }
            50% {
                box-shadow: 0 2px 22px rgba(14, 165, 233, 0.65), 0 0 0 4px rgba(56, 189, 248, 0.2);
                opacity: 0.96;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .det-ad-pack-quem-somos-pulse {
                animation: none;
            }
        }
        .det-ad-pack-post-pay {
            margin: 18px 0 0;
            padding: 18px 16px;
            border-radius: 16px;
            background: linear-gradient(165deg, rgba(240, 253, 250, 0.98) 0%, rgba(255, 255, 255, 0.99) 100%);
            border: 1px solid rgba(16, 185, 129, 0.28);
            box-shadow: 0 8px 28px -12px rgba(16, 185, 129, 0.35);
        }
        .det-ad-pack-post-pay[hidden] {
            display: none !important;
        }
        .det-ad-pack-post-pay__title {
            margin: 0 0 6px;
            font-size: 0.95rem;
            font-weight: 800;
            color: #0f766e;
            letter-spacing: -0.02em;
        }
        .det-ad-pack-post-pay__lead {
            margin: 0 0 14px;
            font-size: 0.8rem;
            color: #475569;
            line-height: 1.5;
        }
        .det-ad-pack-creative-field {
            margin-bottom: 12px;
        }
        .det-ad-pack-creative-field label {
            display: block;
            font-size: 0.76rem;
            font-weight: 700;
            margin-bottom: 6px;
            color: #0f172a;
        }
        .det-ad-pack-creative-field input[type='file'] {
            width: 100%;
            font-size: 0.78rem;
        }
        .det-ad-pack-creative-hint {
            margin: 8px 0 0;
            font-size: 0.72rem;
            color: #64748b;
            line-height: 1.45;
        }
        .det-ad-pack-actions--creative {
            justify-content: stretch;
        }
        .det-ad-pack-actions--creative .det-ad-pack-btn {
            width: 100%;
            justify-content: center;
        }
        .det-ad-pack-creative-msg {
            margin: 12px 0 0;
            font-size: 0.8rem;
            line-height: 1.4;
            font-weight: 700;
        }
        .det-ad-pack-creative-msg[hidden] {
            display: none !important;
        }
        .det-ad-pack-estimate {
            margin: 4px 0 16px;
            font-size: 0.92rem;
            font-weight: 800;
            color: #0f172a;
            padding: 12px 14px;
            border-radius: 12px;
            background: rgba(2, 132, 199, 0.06);
            border: 1px solid rgba(2, 132, 199, 0.12);
        }
        .det-ad-pack-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: flex-end;
        }
        .det-ad-pack-btn {
            font: inherit;
            font-weight: 800;
            font-size: 0.8rem;
            padding: 11px 18px;
            border-radius: 12px;
            cursor: pointer;
            border: 1px solid transparent;
            transition:
                background 0.18s,
                border-color 0.18s,
                transform 0.12s,
                box-shadow 0.18s;
        }
        .det-ad-pack-btn:active {
            transform: scale(0.98);
        }
        .det-ad-pack-btn--ghost {
            background: #fff;
            border-color: rgba(15, 23, 42, 0.12);
            color: #475569;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        }
        .det-ad-pack-btn--ghost:hover {
            border-color: rgba(15, 23, 42, 0.22);
            color: #0f172a;
        }
        .det-ad-pack-btn--primary {
            background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
            color: #fff;
            border-color: rgba(3, 105, 161, 0.45);
            box-shadow: 0 6px 20px -6px rgba(2, 132, 199, 0.55), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
        }
        .det-ad-pack-btn--primary:hover {
            filter: brightness(1.06);
            box-shadow: 0 8px 24px -6px rgba(2, 132, 199, 0.6), 0 1px 0 rgba(255, 255, 255, 0.22) inset;
        }
        .det-ad-pack-actions--pay {
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 8px;
        }
        .det-ad-pack-btn--sm {
            padding: 8px 14px;
            font-size: 0.76rem;
        }
        .det-ad-pack-btn--pix {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
            color: #fff;
            border-color: rgba(5, 150, 105, 0.45);
            box-shadow: 0 6px 20px -6px rgba(5, 150, 105, 0.45);
        }
        .det-ad-pack-btn--pix:hover {
            filter: brightness(1.06);
        }
        .det-ad-pack-pix-panel {
            margin-top: 14px;
            padding: 16px 14px;
            border-radius: 14px;
            background: #fff;
            border: 1px solid rgba(5, 150, 105, 0.2);
            box-shadow: 0 4px 16px -8px rgba(5, 150, 105, 0.25);
        }
        .det-ad-pack-pix-intro {
            margin: 0 0 12px;
            font-size: 0.78rem;
            color: #64748b;
            line-height: 1.5;
        }
        .det-ad-pack-pix-field {
            margin-bottom: 10px;
        }
        .det-ad-pack-pix-field label {
            display: block;
            font-size: 0.72rem;
            font-weight: 700;
            margin-bottom: 4px;
            color: var(--text);
        }
        .det-ad-pack-pix-input {
            width: 100%;
            box-sizing: border-box;
            padding: 8px 10px;
            border-radius: 10px;
            border: 1px solid var(--det-field-border);
            background: var(--det-field);
            color: var(--text);
            font: inherit;
            font-size: 0.72rem;
            margin-bottom: 8px;
        }
        .det-ad-pack-pix-qr {
            text-align: center;
            margin: 10px 0;
        }
        .det-ad-pack-pix-qr img {
            border-radius: 10px;
            border: 1px solid rgba(0, 180, 126, 0.25);
        }
        .det-ad-pack-pix-ticket {
            display: inline-block;
            margin: 6px 0 8px;
            font-size: 0.78rem;
            font-weight: 700;
            color: #047857;
        }
        .det-ad-pack-pix-status {
            margin: 8px 0;
            font-size: 0.8rem;
            color: var(--muted);
            min-height: 1.2em;
        }
        .det-ad-pack-form-msg {
            margin: 12px 0 0;
            font-size: 0.8rem;
            line-height: 1.4;
            color: #047857;
            font-weight: 700;
        }
        .det-ad-pack-form-msg[hidden] {
            display: none !important;
        }
        html[data-det-theme='dark'] .det-ad-pack-sheet.modal-sheet {
            background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
            border-color: rgba(56, 189, 248, 0.2);
        }
        html[data-det-theme='dark'] .det-ad-pack-brand-head {
            background: linear-gradient(180deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.92) 100%);
            border-bottom-color: rgba(56, 189, 248, 0.12);
        }
        html[data-det-theme='dark'] .det-ad-pack-headline {
            color: #f1f5f9;
        }
        html[data-det-theme='dark'] .det-ad-pack-base {
            color: #94a3b8;
        }
        html[data-det-theme='dark'] .det-ad-pack-table-wrap {
            background: rgba(15, 23, 42, 0.65);
            border-color: rgba(56, 189, 248, 0.15);
        }
        html[data-det-theme='dark'] .det-ad-pack-table td:last-child {
            color: #7dd3fc;
        }
        html[data-det-theme='dark'] .det-ad-pack-price--old {
            color: #94a3b8;
        }
        html[data-det-theme='dark'] .det-ad-pack-price-badge {
            color: #fde68a;
            background: rgba(120, 53, 15, 0.55);
            border-color: rgba(245, 158, 11, 0.4);
        }
        html[data-det-theme='dark'] .det-ad-pack-price-badge--warm {
            color: #fed7aa;
            background: rgba(154, 52, 18, 0.55);
            border-color: rgba(249, 115, 22, 0.45);
        }
        html[data-det-theme='dark'] .det-ad-pack-price-badge--hot {
            color: #fff;
            background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
            border-color: rgba(248, 113, 113, 0.5);
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.4), 0 2px 6px rgba(185, 28, 28, 0.25);
        }
        html[data-det-theme='dark'] .det-ad-pack-estimate {
            color: #e2e8f0;
            background: rgba(56, 189, 248, 0.1);
            border-color: rgba(56, 189, 248, 0.2);
        }
        html[data-det-theme='dark'] .det-ad-pack-foot-cta {
            background: linear-gradient(165deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.92) 100%);
            border-color: rgba(56, 189, 248, 0.18);
        }
        html[data-det-theme='dark'] .det-ad-pack-foot-enterprise {
            color: #7dd3fc;
            background: rgba(56, 189, 248, 0.12);
            border-color: rgba(56, 189, 248, 0.3);
        }
        html[data-det-theme='dark'] .det-ad-pack-foot-lead {
            color: #cbd5e1;
        }
        html[data-det-theme='dark'] .det-ad-pack-quem-somos-pulse {
            background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 55%, #075985 100%);
            border-color: rgba(56, 189, 248, 0.4);
        }
        html[data-det-theme='dark'] .det-ad-pack-form-msg {
            color: #6ee7b7;
        }
        html[data-det-theme='dark'] .det-ad-pack-pix-panel {
            background: rgba(15, 23, 42, 0.75);
            border-color: rgba(52, 211, 153, 0.25);
        }
        html[data-det-theme='dark'] .det-ad-pack-pix-ticket {
            color: #34d399;
        }
        html[data-det-theme='dark'] .det-ad-pack-post-pay {
            background: linear-gradient(165deg, rgba(6, 78, 59, 0.35) 0%, rgba(15, 23, 42, 0.9) 100%);
            border-color: rgba(52, 211, 153, 0.3);
        }
        html[data-det-theme='dark'] .det-ad-pack-post-pay__title {
            color: #5eead4;
        }
        html[data-det-theme='dark'] .det-ad-pack-ticket-top {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
            border-color: rgba(56, 189, 248, 0.35);
            color: #7dd3fc;
            box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
        }
        html[data-det-theme='dark'] .det-ad-pack-ticket-top:hover {
            border-color: rgba(56, 189, 248, 0.55);
            background: rgba(30, 41, 59, 0.98);
        }
        html[data-det-theme='dark'] .det-ad-pack-story {
            background: linear-gradient(165deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.88) 100%);
            border-color: rgba(56, 189, 248, 0.12);
            box-shadow: 0 12px 40px -20px rgba(0, 0, 0, 0.45);
        }
        html[data-det-theme='dark'] .det-ad-pack-story-head {
            border-bottom-color: rgba(148, 163, 184, 0.12);
        }
        html[data-det-theme='dark'] .det-ad-pack-story-title {
            color: #f1f5f9;
        }
        html[data-det-theme='dark'] .det-ad-pack-story-p {
            color: #cbd5e1;
        }
        html[data-det-theme='dark'] .det-ad-pack-story-p--highlight {
            background: rgba(14, 165, 233, 0.12);
            border-color: rgba(56, 189, 248, 0.28);
            color: #bae6fd;
        }
        /* Modal compacto: relatos por hora (sidebar) */
        #detComplaintsHourlyModal .modal-sheet.det-hourly-micro-sheet {
            max-width: 420px;
            width: calc(100vw - 28px);
            padding: 18px 20px 16px;
        }
        #detComplaintsHourlyModal .det-hourly-spark-wrap {
            padding: 12px 10px 8px;
            background: linear-gradient(180deg, rgba(254, 242, 242, 0.55) 0%, rgba(255, 255, 255, 0.95) 100%);
            border-radius: 12px;
            border: 1px solid rgba(248, 113, 113, 0.22);
            margin-top: 10px;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.9),
                0 4px 20px rgba(239, 68, 68, 0.06);
        }
        #detComplaintsHourlyModal .det-hourly-spark-wrap .tile-spark-svg {
            height: 120px;
        }
        #detComplaintsHourlyModal .det-hourly-loading,
        #detComplaintsHourlyModal .det-hourly-err {
            margin: 12px 0 0;
            font-size: 0.85rem;
            color: var(--muted);
            text-align: center;
        }
        #detComplaintsHourlyModal .det-hourly-err {
            color: #b91c1c;
        }
        #detComplaintsHourlyModal #detComplaintsHourlyFoot {
            margin: 10px 0 0;
            font-size: 0.78rem;
            color: var(--muted);
            text-align: center;
        }
        #detComplaintsHourlyModal .det-hourly-modal-title {
            font-size: 1rem;
            margin: 0 0 4px;
        }
        #detComplaintsHourlyModal .det-hourly-modal-lead {
            font-size: 0.78rem;
            color: var(--muted);
            margin: 0;
            line-height: 1.35;
        }
        #detComplaintsHourlyModal .det-hourly-report-row {
            margin-top: 14px;
            padding-top: 2px;
        }
        #detComplaintsHourlyModal .det-hourly-report-cta {
            width: 100%;
            box-sizing: border-box;
            padding: 12px 16px;
            border-radius: 12px;
            border: 1px solid rgba(234, 88, 12, 0.65);
            background: linear-gradient(180deg, rgba(251, 146, 60, 0.5), rgba(234, 88, 12, 0.28));
            color: #7c2d12;
            font-size: 0.9rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            cursor: pointer;
            font-family: inherit;
            touch-action: manipulation;
            box-shadow: 0 2px 10px rgba(234, 88, 12, 0.15);
        }
        #detComplaintsHourlyModal .det-hourly-report-cta:hover,
        #detComplaintsHourlyModal .det-hourly-report-cta:focus-visible {
            filter: brightness(1.04);
            outline: none;
            box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.35);
        }
        /* Top 30 tendências (API /api/detector/top-services) */
        .det-top30-btn-wrap {
            margin-top: 12px;
            text-align: center;
            padding: 0 4px 10px;
        }
        .det-top30-btn-wrap--rank {
            margin-top: 10px;
            padding-bottom: 4px;
        }
        .det-top30-open-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 300px;
            min-height: 44px;
            padding: 10px 18px;
            font: inherit;
            font-weight: 700;
            font-size: 0.82rem;
            letter-spacing: 0.02em;
            color: var(--accent, #0284c7);
            background: transparent;
            border: 2px solid rgba(56, 189, 248, 0.65);
            border-radius: 12px;
            cursor: pointer;
            box-shadow:
                0 0 0 1px rgba(56, 189, 248, 0.12),
                0 4px 18px rgba(56, 189, 248, 0.18);
            transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }
        .det-top30-open-btn:hover,
        .det-top30-open-btn:focus-visible {
            outline: none;
            border-color: rgba(14, 165, 233, 0.95);
            box-shadow:
                0 0 0 3px rgba(56, 189, 248, 0.28),
                0 6px 22px rgba(56, 189, 248, 0.28);
            transform: translateY(-1px);
        }
        .det-top30-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 120;
            align-items: flex-end;
            justify-content: center;
            padding: 0;
        }
        .det-top30-modal.open {
            display: flex;
        }
        .det-top30-modal.det-top30-modal--anim .det-top30-backdrop {
            opacity: 1;
        }
        .det-top30-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(15, 23, 42, 0.58);
            backdrop-filter: blur(6px);
            opacity: 0;
            transition: opacity 0.22s ease;
        }
        .det-top30-sheet {
            position: relative;
            width: 100%;
            max-height: min(100dvh, 100vh);
            background: var(--surface, #fff);
            border-radius: 20px 20px 0 0;
            box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.2);
            display: flex;
            flex-direction: column;
            transform: translateY(110%);
            transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
            z-index: 1;
        }
        .det-top30-modal.open .det-top30-sheet {
            transform: translateY(0);
        }
        .det-top30-head {
            flex: 0 0 auto;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            padding: max(16px, env(safe-area-inset-top)) 16px 12px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.25);
            position: sticky;
            top: 0;
            background: inherit;
            z-index: 2;
        }
        .det-top30-head-text h2 {
            margin: 0;
            font-size: 1.02rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--text);
        }
        .det-top30-head-text p {
            margin: 4px 0 0;
            font-size: 0.72rem;
            color: var(--muted);
            line-height: 1.35;
        }
        .det-top30-close {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 10px;
            background: rgba(148, 163, 184, 0.15);
            color: var(--text);
            font-size: 1.35rem;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .det-top30-close:hover,
        .det-top30-close:focus-visible {
            outline: none;
            background: rgba(148, 163, 184, 0.28);
        }
        .det-top30-body {
            flex: 1 1 auto;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            padding: 12px 14px max(20px, env(safe-area-inset-bottom));
            scroll-behavior: smooth;
        }
        .det-top30-skeleton {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .det-top30-sk-row {
            height: 52px;
            border-radius: 10px;
            background: linear-gradient(90deg, rgba(226, 232, 240, 0.9) 25%, rgba(241, 245, 249, 0.95) 50%, rgba(226, 232, 240, 0.9) 75%);
            background-size: 200% 100%;
            animation: detTop30Shimmer 1.1s ease-in-out infinite;
        }
        .det-top30-modal .det-top30-sk-row {
            height: 64px;
            border-radius: 12px;
        }
        @keyframes detTop30Shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        .det-top30-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .det-top30-item {
            display: flex;
            align-items: stretch;
            gap: 12px;
            min-height: 72px;
            padding: 14px 14px;
            border-radius: 16px;
            border: 1px solid rgba(148, 163, 184, 0.28);
            background: rgba(248, 250, 252, 0.92);
            text-align: left;
            cursor: default;
            font: inherit;
            color: inherit;
            width: 100%;
            box-sizing: border-box;
            transition: box-shadow 0.2s ease, border-color 0.2s ease;
        }
        button.det-top30-item {
            cursor: pointer;
        }
        .det-top30-item--rank1,
        .det-top30-item--rank2,
        .det-top30-item--rank3 {
            border-color: rgba(56, 189, 248, 0.55);
            box-shadow:
                0 0 0 1px rgba(56, 189, 248, 0.12),
                0 6px 22px rgba(56, 189, 248, 0.15);
        }
        .det-top30-item--moved-up {
            border-color: rgba(16, 185, 129, 0.55);
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
        }
        .det-top30-item--moved-down {
            border-color: rgba(239, 68, 68, 0.45);
            box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2);
        }
        .det-top30-pos-wrap {
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            width: 2.35rem;
            min-width: 2.35rem;
            padding-top: 2px;
        }
        .det-top30-pos-wrap .det-rank-trend {
            font-size: 0.78rem;
            line-height: 1;
        }
        .det-top30-pos {
            font-weight: 900;
            font-size: 0.95rem;
            font-variant-numeric: tabular-nums;
            color: var(--accent);
        }
        .det-top30-main {
            flex: 1 1 auto;
            min-width: 0;
        }
        .det-top30-name {
            font-weight: 800;
            font-size: 0.92rem;
            margin: 0 0 6px;
            line-height: 1.25;
        }
        .det-top30-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 12px;
            font-size: 0.74rem;
            color: var(--muted);
        }
        .det-top30-status {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-weight: 700;
        }
        .det-top30-trend {
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
        }
        .det-top30-trend-lbl {
            font-weight: 700;
            font-size: 0.74rem;
        }
        .det-top30-empty,
        .det-top30-error {
            text-align: center;
            padding: 28px 12px;
            color: var(--muted);
            font-size: 0.88rem;
        }
        .det-top30-error {
            color: #b91c1c;
        }
        @media (min-width: 640px) {
            .det-top30-modal {
                align-items: center;
                padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
            }
            .det-top30-sheet {
                max-width: 440px;
                max-height: min(85dvh, 85vh, 720px);
                border-radius: 18px;
            }
        }
        /* Mobile: Top 10 comunidade (estilo top10-board) antes do catálogo */
        .det-m-community-hero {
            display: none;
            margin: 0 0 18px;
            padding: 0 4px;
        }
        .det-m-community-hero .det-m-community-hero__host .top10-board {
            margin-bottom: 0;
        }
        .det-m-community-hero .top10-board-head h4 {
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-size: 0.82rem;
        }
        .det-top30-btn-wrap--mobile-hero,
        .det-top30-btn-wrap--after-complaints {
            margin-top: 14px;
            padding-bottom: 4px;
        }
        .det-refresh-countdown {
            font-size: 0.78rem;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            color: var(--muted);
            white-space: nowrap;
            flex: 1 1 auto;
            min-width: 0;
            text-align: right;
            line-height: 1.2;
        }
        @media (min-width: 1024px) {
            .det-refresh-countdown {
                flex: 0 1 auto;
                text-align: left;
                max-width: 200px;
            }
        }
        @media (max-width: 1023px) {
            .det-m-community-hero {
                display: block;
            }
            /* Filtros categoria / IP / ordenação: só desktop */
            .det-toolbar-filters {
                display: none !important;
            }
            /* Ranking rápido (Top 5) extraído para o fluxo principal em mobile */
            #detDashRank {
                display: none !important;
            }
            /* Bloco lateral duplicava o Top 10; o hero + toolbar movido cobrem a função */
            .det-sidebar .det-sidebar-block--detector-complaints-mobile-hide {
                display: none !important;
            }
            .det-m-community-toolbar-host {
                width: 100%;
                margin-bottom: 10px;
            }
            .det-m-community-toolbar-host .det-sidebar-complaints-toolbar {
                margin-bottom: 0;
            }
            .det-m-rank-panels-mount {
                display: none !important;
            }
            .det-mobile-top5-slot {
                margin: 0 0 18px;
                padding: 0 4px;
            }
            .det-mobile-top5-slot .top10-boards {
                margin-bottom: 0;
            }
            .catalog-search-bottom-slot {
                margin-top: 14px;
                padding-top: 14px;
                border-top: 1px solid rgba(2, 132, 199, 0.16);
            }
            /* Intervalo + atualizar imediatamente acima do Top 10 mobile (slot movido por JS) */
            .det-refresh-toolbar-slot {
                display: flex;
                justify-content: flex-end;
                width: 100%;
                margin: 4px 0 12px;
                padding: 0 4px;
            }
            .det-refresh-toolbar-slot .toolbar-refresh-group {
                display: flex;
                flex: 0 0 auto;
                flex-wrap: wrap;
                justify-content: flex-end;
                align-items: center;
                gap: 8px;
            }
            #top10Cards .top10-cards-shelf.top10-cards-shelf--dup-mobile-hide {
                display: none !important;
            }
            .top10-board--games {
                display: none !important;
            }
            /* Sem carrosséis Top 10 (latência / avaliação): após a busca segue direto o catálogo em linhas */
            #top10Cards {
                display: none !important;
            }
        }
        .det-m-community-hero__host .det-complaints-ol--sidebar-rank {
            margin: 0;
            padding: 0;
        }
        @media (min-width: 1024px) {
            .det-refresh-toolbar-slot {
                display: contents;
            }
        }
        .det-sidebar-complaints-item {
            display: flex;
            align-items: stretch;
            gap: 6px;
            min-width: 0;
            max-width: 100%;
        }
        .det-sidebar-complaints-item .det-sidebar-line--rank-main {
            flex: 1;
            min-width: 0;
        }
        .det-sidebar-complaints-item .det-sb-hourly-btn {
            flex: 0 1 auto;
            flex-shrink: 1;
            min-width: 0;
            align-self: center;
            margin: 0;
            cursor: pointer;
            font: inherit;
            font-weight: 800;
            font-size: 0.72rem;
            font-variant-numeric: tabular-nums;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .det-sidebar-complaints-item .det-sb-hourly-btn:hover,
        .det-sidebar-complaints-item .det-sb-hourly-btn:focus-visible {
            filter: brightness(1.06);
            outline: none;
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35);
        }
        /* Top 10 comunidade: cabeçalho único na coluna + um botão (gráfico; relato no modal) */
        .det-t10-sidebar-rank-stack {
            width: 100%;
            min-width: 0;
        }
        .det-t10-m-comm-stack {
            width: 100%;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }
        .det-t10-comm-col-head {
            align-self: flex-end;
            width: fit-content;
            max-width: 100%;
            box-sizing: border-box;
            text-align: center;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: -0.01em;
            line-height: 1.15;
            margin: 0 0 6px;
            padding: 4px 12px 5px;
            border-radius: 999px;
            color: var(--text);
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.14) 0%, rgba(249, 115, 22, 0.16) 55%, rgba(248, 113, 113, 0.1) 100%);
            border: 1px solid rgba(14, 165, 233, 0.28);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.65) inset,
                0 2px 8px rgba(14, 165, 233, 0.12);
        }
        @keyframes det-t10-soft-halo {
            0%,
            100% {
                box-shadow:
                    0 0 0 0 rgba(249, 115, 22, 0),
                    0 1px 3px rgba(15, 23, 42, 0.06);
            }
            50% {
                box-shadow:
                    0 0 0 5px rgba(249, 115, 22, 0.1),
                    0 0 16px rgba(249, 115, 22, 0.09);
            }
        }
        .det-sidebar-complaints-item .det-t10-comm-rail {
            flex: 0 1 auto;
            min-width: 0;
            align-self: center;
            max-width: min(50%, 168px);
        }
        @keyframes det-t10-unified-shine {
            0% {
                transform: translate3d(-115%, 0, 0) skewX(-20deg);
            }
            100% {
                transform: translate3d(280%, 0, 0) skewX(-20deg);
            }
        }
        .det-sidebar-complaints-item .det-t10-unified-btn {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            padding: 4px 7px 5px;
            min-height: 0;
            min-width: 0;
            border-radius: 11px;
            font-weight: 700;
            justify-content: center;
            border: 1px solid rgba(234, 88, 12, 0.55);
            background: linear-gradient(145deg, rgba(254, 215, 170, 0.62) 0%, rgba(251, 146, 60, 0.42) 42%, rgba(249, 115, 22, 0.34) 100%);
            color: #7c2d12 !important;
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.35) inset,
                0 1px 3px rgba(154, 52, 18, 0.12);
            animation: det-t10-soft-halo 2.5s ease-in-out infinite;
        }
        .det-sidebar-complaints-item .det-t10-unified-shine {
            position: absolute;
            top: -35%;
            left: 0;
            width: 42%;
            height: 170%;
            pointer-events: none;
            z-index: 0;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.05) 28%,
                rgba(255, 255, 255, 0.65) 48%,
                rgba(255, 255, 255, 0.12) 62%,
                transparent 100%
            );
            opacity: 0.9;
            animation: det-t10-unified-shine 2.85s linear infinite;
        }
        @media (prefers-reduced-motion: reduce) {
            .det-sidebar-complaints-item .det-t10-unified-shine {
                animation: none;
                opacity: 0.18;
                transform: skewX(-20deg);
            }
        }
        .det-sidebar-complaints-item .det-t10-unified-inner {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            width: 100%;
            min-width: 0;
        }
        .det-sidebar-complaints-item .det-t10-report-tag {
            font-size: 0.56rem;
            font-weight: 900;
            letter-spacing: 0.04em;
            line-height: 1.05;
            text-transform: uppercase;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
        }
        .det-sidebar-complaints-item .det-t10-report-sep {
            display: block;
            width: 100%;
            max-width: 3.4rem;
            height: 1px;
            margin: 0;
            border: none;
            border-radius: 1px;
            background: linear-gradient(90deg, transparent, rgba(124, 45, 18, 0.45), transparent);
        }
        .det-sidebar-complaints-item .det-t10-unified-btn.det-t10-unified--spike .det-t10-report-sep {
            background: linear-gradient(90deg, transparent, rgba(154, 52, 18, 0.55), transparent);
        }
        .det-sidebar-complaints-item .det-t10-unified-btn.det-t10-unified--down .det-t10-report-sep {
            background: linear-gradient(90deg, transparent, rgba(127, 29, 29, 0.5), transparent);
        }
        .det-sidebar-complaints-item .det-t10-unified-btn.det-t10-unified--spike {
            border-color: rgba(234, 88, 12, 0.72);
            background: linear-gradient(145deg, rgba(253, 186, 116, 0.65) 0%, rgba(249, 115, 22, 0.42) 100%);
            color: #9a3412 !important;
        }
        .det-sidebar-complaints-item .det-t10-unified-btn.det-t10-unified--down {
            border-color: rgba(220, 38, 38, 0.55);
            background: linear-gradient(145deg, rgba(254, 202, 202, 0.45) 0%, rgba(248, 113, 113, 0.32) 100%);
            color: #7f1d1d !important;
        }
        .det-sidebar-complaints-item .det-t10-unified-btn:hover {
            filter: brightness(1.05);
        }
        .det-sidebar-complaints-item .det-t10-unified-btn:focus-visible {
            outline: 2px solid rgba(251, 146, 60, 0.55);
            outline-offset: 2px;
            box-shadow: none;
        }
        .det-sidebar-complaints-item .det-t10-pulse-mini {
            display: flex;
            flex-direction: row;
            align-items: baseline;
            justify-content: center;
            flex-wrap: nowrap;
            gap: 3px;
            min-width: 0;
            line-height: 1.05;
        }
        .det-sidebar-complaints-item .det-t10-pulse-mini-lbl {
            font-size: 0.38rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            opacity: 0.72;
        }
        .det-sidebar-complaints-item .det-t10-pulse-mini-val {
            font-size: 0.5rem;
            font-weight: 900;
            font-variant-numeric: tabular-nums;
            max-width: 3.2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            opacity: 0.95;
        }
        @media (max-width: 420px) {
            .det-sidebar-complaints-item .det-t10-comm-rail {
                max-width: min(54%, 152px);
            }
            .det-t10-comm-col-head {
                font-size: 0.68rem;
                padding: 3px 10px 4px;
            }
        }
        .modal-sheet--svc-detail {
            max-width: min(600px, 96vw);
            border-radius: 22px;
            padding-bottom: 8px;
            box-shadow:
                0 4px 6px rgba(15, 23, 42, 0.04),
                0 24px 48px rgba(2, 132, 199, 0.14);
        }
        .svc-modal-desc {
            font-size: 0.84rem;
            color: var(--muted);
            line-height: 1.45;
            margin: 0 0 12px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .svc-chart-toolbar {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 14px;
            align-items: end;
        }
        .svc-chart-toolbar .svc-chart-field--full {
            grid-column: 1 / -1;
        }
        .svc-chart-field-lbl {
            display: block;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 4px;
        }
        .svc-chart-toolbar .chart-target-row {
            margin-top: 0;
            display: block;
        }
        .svc-chart-toolbar .chart-target-row select {
            width: 100%;
            min-width: 0;
        }
        .chart-multi-toggle {
            font-size: 0.78rem;
            line-height: 1.35;
        }
        @media (max-width: 480px) {
            .svc-chart-toolbar {
                grid-template-columns: 1fr;
            }
        }
        .modal-link-chip {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid rgba(56, 189, 248, 0.2);
            background: rgba(255, 255, 255, 0.65);
            text-decoration: none;
            color: inherit;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .modal-link-chip:hover {
            background: rgba(56, 189, 248, 0.08);
            border-color: rgba(56, 189, 248, 0.35);
        }
        .modal-link-chip .mlc-ico {
            font-size: 1.1rem;
            line-height: 1.2;
            flex-shrink: 0;
        }
        .modal-link-chip .mlc-lbl {
            display: block;
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: var(--muted);
        }
        .modal-link-chip .mlc-url {
            display: block;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--accent);
            word-break: break-all;
            margin-top: 2px;
        }
        .modal-links-compact {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 10px 0 14px;
        }
        .latency-hub-card--compact .latency-hub-title {
            font-size: 0.85rem;
            margin: 0 0 10px;
        }
        .latency-hub-card--compact .lh-hero-kicker {
            font-size: 0.72rem;
        }
        .latency-hub-card--compact .lh-foot {
            font-size: 0.72rem;
        }
        .modal-sheet {
            width: 100%;
            max-width: 560px;
            max-height: min(88dvh, 88vh, 720px);
            overflow: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y pinch-zoom;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 20px 20px 12px 12px;
            padding: 20px max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
            box-shadow: 0 -8px 48px rgba(2, 132, 199, 0.12);
            scrollbar-width: thin;
            scrollbar-color: rgba(56, 189, 248, 0.5) rgba(226, 232, 240, 0.88);
        }
        .modal-sheet select {
            background: var(--det-field);
            color: var(--text);
            border: 1px solid var(--det-field-border);
            border-radius: 8px;
        }
        .modal-sheet select option {
            background: #fff;
            color: var(--text);
        }
        .modal-sheet::-webkit-scrollbar {
            width: 9px;
        }
        .modal-sheet::-webkit-scrollbar-track {
            background: rgba(241, 245, 249, 0.9);
            border-radius: 8px;
        }
        .modal-sheet::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(56, 189, 248, 0.55), rgba(14, 165, 233, 0.4));
            border-radius: 8px;
            border: 2px solid rgba(255, 255, 255, 0.85);
            box-shadow: 0 0 10px rgba(14, 165, 233, 0.2);
        }
        .modal-sheet::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(125, 211, 252, 0.7), rgba(56, 189, 248, 0.55));
        }
        .modal-sheet h3 {
            font-size: 1.15rem;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .modal-sheet h3 img { width: 36px; height: 36px; border-radius: 8px; }
        /* Cabeçalho modal serviço: título + score / estrelas */
        .svc-modal-header-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
            padding-right: 4px;
        }
        .svc-modal-actions-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .svc-modal-report-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            border: 1px solid rgba(239, 68, 68, 0.4);
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(220, 38, 38, 0.08) 100%);
            color: #dc2626;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            padding: 6px 12px;
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.12s;
            white-space: nowrap;
        }
        .svc-modal-report-btn svg {
            flex-shrink: 0;
        }
        .svc-modal-report-btn:hover,
        .svc-modal-report-btn:focus-visible {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.22) 0%, rgba(220, 38, 38, 0.16) 100%);
            border-color: rgba(220, 38, 38, 0.6);
            box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
            transform: translateY(-1px);
            outline: none;
        }
        html[data-det-theme='dark'] .svc-modal-report-btn {
            border-color: rgba(248, 113, 113, 0.45);
            background: rgba(239, 68, 68, 0.14);
            color: #f87171;
        }
        html[data-det-theme='dark'] .svc-modal-report-btn:hover {
            background: rgba(239, 68, 68, 0.25);
            border-color: rgba(248, 113, 113, 0.65);
        }
        .svc-modal-header-row .modal-close {
            float: none;
            flex-shrink: 0;
        }
        .svc-modal-title-stack {
            min-width: 0;
            flex: 1;
        }
        .svc-modal-title-stack h3 {
            margin-bottom: 6px;
        }
        .svc-modal-score-stars {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 14px;
        }
        .svc-modal-trust-pill {
            font-size: 0.8rem;
            font-weight: 800;
            padding: 5px 12px;
            border-radius: 999px;
            font-variant-numeric: tabular-nums;
            border: 1px solid transparent;
        }
        .svc-modal-trust-pill--good {
            background: rgba(16, 185, 129, 0.18);
            color: #047857;
            border-color: rgba(52, 211, 153, 0.35);
        }
        .svc-modal-trust-pill--warn {
            background: rgba(245, 158, 11, 0.18);
            color: #b45309;
            border-color: rgba(251, 191, 36, 0.35);
        }
        .svc-modal-trust-pill--bad {
            background: rgba(239, 68, 68, 0.15);
            color: #b91c1c;
            border-color: rgba(248, 113, 113, 0.35);
        }
        .svc-modal-stars-host {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .svc-modal-star-hint {
            font-size: 0.68rem;
            color: var(--muted);
            max-width: 200px;
            line-height: 1.35;
        }
        .svc-modal-star-hint--tap {
            display: block;
            margin-top: 4px;
            max-width: 260px;
        }
        .svc-modal-trust-pill--clickable {
            cursor: pointer;
            outline-offset: 2px;
        }
        .svc-modal-trust-pill--clickable:focus-visible {
            outline: 2px solid rgba(2, 132, 199, 0.6);
        }
        .svc-stars-display--interactive {
            gap: 1px;
        }
        button.svc-star-vote {
            border: none;
            padding: 0;
            margin: 0;
            background: transparent;
            cursor: pointer;
            border-radius: 4px;
            font: inherit;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            -webkit-tap-highlight-color: transparent;
        }
        button.svc-star-vote:hover .svc-star-fill,
        button.svc-star-vote:focus-visible .svc-star-fill {
            filter: brightness(1.08);
        }
        button.svc-star-vote:focus-visible {
            outline: 2px solid rgba(251, 191, 36, 0.75);
            outline-offset: 1px;
        }
        .trust-score-help-modal {
            max-width: 520px;
        }
        .trust-score-help-body {
            font-size: 0.84rem;
            line-height: 1.55;
            color: var(--text);
        }
        .trust-score-help-lead {
            margin: 0 0 12px;
            color: var(--text);
        }
        .trust-score-help-ul {
            margin: 0;
            padding-left: 1.15rem;
        }
        .trust-score-help-ul li {
            margin-bottom: 10px;
        }
        .trust-score-help-foot {
            margin: 14px 0 0;
            padding-top: 12px;
            border-top: 1px solid rgba(56, 189, 248, 0.15);
            color: var(--muted);
            font-size: 0.8rem;
        }
        .svc-stars-display {
            display: inline-flex;
            gap: 2px;
            line-height: 1;
        }
        .svc-star-cell {
            position: relative;
            display: inline-block;
            width: 1.05em;
            height: 1em;
            font-size: 1.2rem;
            vertical-align: middle;
        }
        .svc-star-bg {
            color: #94a3b8;
        }
        .svc-star-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            overflow: hidden;
            color: #fbbf24;
            text-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
            white-space: nowrap;
            pointer-events: none;
        }
        /* Plano disponibilidade 7 dias (barras horizontais) */
        .svc-availability-plan {
            margin-top: 18px;
            padding-top: 14px;
            border-top: 1px solid rgba(56, 189, 248, 0.18);
        }
        .svc-ap-title {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 4px;
            letter-spacing: 0.02em;
        }
        .svc-ap-sub {
            font-size: 0.7rem;
            color: var(--muted);
            line-height: 1.45;
            margin-bottom: 12px;
        }
        .svc-ap-scoreline {
            font-size: 0.78rem;
            color: var(--glow);
            margin-bottom: 10px;
            font-variant-numeric: tabular-nums;
        }
        .svc-ap-scoreline strong {
            color: #047857;
            font-weight: 800;
        }
        .svc-ap-row {
            display: grid;
            grid-template-columns: minmax(88px, 32%) 1fr minmax(36px, auto);
            align-items: center;
            gap: 8px 10px;
            margin-bottom: 8px;
        }
        .svc-ap-label {
            font-size: 0.68rem;
            color: var(--muted);
            text-transform: capitalize;
        }
        .svc-ap-bar-track {
            height: 10px;
            border-radius: 999px;
            background: rgba(241, 245, 249, 0.98);
            border: 1px solid rgba(56, 189, 248, 0.12);
            overflow: hidden;
        }
        .svc-ap-bar-fill {
            height: 100%;
            border-radius: 999px;
            transition: width 0.35s ease;
        }
        .svc-ap-bar-fill--ok {
            width: 100%;
            background: linear-gradient(90deg, rgba(16, 185, 129, 0.85), rgba(52, 211, 153, 0.55));
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
        }
        .svc-ap-bar-fill--bad {
            width: 100%;
            background: linear-gradient(90deg, rgba(239, 68, 68, 0.75), rgba(248, 113, 113, 0.45));
        }
        .svc-ap-bar-fill--unk {
            width: 38%;
            background: rgba(100, 116, 139, 0.45);
        }
        .svc-ap-tag {
            font-size: 0.65rem;
            font-weight: 700;
            text-align: right;
            color: var(--muted);
        }
        .svc-ap-tag--ok { color: #047857; }
        .svc-ap-tag--bad { color: #b91c1c; }
        .modal-links {
            margin: 14px 0;
            font-size: 0.82rem;
            line-height: 1.55;
        }
        .modal-links a { color: var(--accent); word-break: break-all; }
        .svc-detail-enrich {
            margin: 0 0 12px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid rgba(0, 163, 255, 0.2);
            background: rgba(255, 255, 255, 0.9);
        }
        .svc-enrich-pitch {
            margin: 0 0 10px;
            font-size: 0.78rem;
            line-height: 1.5;
            color: var(--text);
            font-weight: 600;
        }
        .svc-enrich-foot {
            margin: 10px 0 0;
            font-size: 0.7rem;
            line-height: 1.45;
            color: var(--muted);
        }
        .svc-sp-card {
            border-radius: 10px;
            padding: 10px 12px;
            border: 1px solid rgba(148, 163, 184, 0.25);
            background: rgba(226, 232, 240, 0.95);
        }
        .svc-sp-card h5 {
            margin: 0 0 6px;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: var(--glow);
        }
        .svc-sp-status {
            font-size: 0.84rem;
            font-weight: 700;
            color: var(--text);
            line-height: 1.35;
        }
        .svc-sp-meta {
            margin-top: 6px;
            font-size: 0.72rem;
            color: var(--muted);
            line-height: 1.4;
        }
        .svc-sp-comp {
            margin-top: 8px;
            font-size: 0.72rem;
            color: var(--muted);
        }
        .svc-sp-card.svc-sp-ind--none {
            border-color: rgba(52, 211, 153, 0.35);
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.08);
        }
        .svc-sp-card.svc-sp-ind--minor {
            border-color: rgba(250, 204, 21, 0.4);
        }
        .svc-sp-card.svc-sp-ind--major,
        .svc-sp-card.svc-sp-ind--critical {
            border-color: rgba(248, 113, 113, 0.45);
        }
        .svc-sp-card.svc-sp-ind--maintenance {
            border-color: rgba(96, 165, 250, 0.4);
        }
        .latency-hub-wrap {
            margin: 0 0 14px;
        }
        .latency-hub-card {
            background: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.97) 100%);
            border: 1px solid rgba(0, 163, 255, 0.28);
            border-radius: 14px;
            padding: 12px 14px 14px;
            box-shadow:
                0 0 32px rgba(0, 163, 255, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        .latency-hub-title {
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--glow);
            margin: 0 0 10px;
        }
        .latency-hub-list {
            list-style: none;
            margin: 0;
            padding: 0;
            font-size: 0.82rem;
            line-height: 1.5;
        }
        .latency-hub-list li {
            padding: 6px 0;
            border-bottom: 1px solid rgba(148, 163, 184, 0.12);
        }
        .latency-hub-list li:last-child { border-bottom: none; }
        .latency-hub-list .lh-label { color: var(--muted); }
        .latency-hub-list .lh-ms { color: var(--glow); font-variant-numeric: tabular-nums; }
        .latency-hub-list li.lh-note {
            color: var(--muted);
            font-size: 0.78rem;
            line-height: 1.45;
        }
        .lh-best {
            margin: 12px 0 0;
            font-size: 0.8rem;
            color: var(--text);
            line-height: 1.45;
        }
        .lh-best strong { color: var(--glow); font-variant-numeric: tabular-nums; }
        .lh-foot {
            margin: 10px 0 0;
            font-size: 0.76rem;
            color: var(--muted);
            line-height: 1.45;
        }
        .lh-sources-ref {
            margin: 10px 0 0;
            font-size: 0.72rem;
            color: var(--muted);
            line-height: 1.45;
        }
        .latency-hub-loading { margin: 0 0 8px; }
        .latency-hub-hero {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.14);
        }
        .lh-hero-icon {
            font-size: 1.65rem;
            line-height: 1;
            filter: drop-shadow(0 2px 8px rgba(0, 163, 255, 0.35));
        }
        .lh-hero-body { flex: 1; min-width: 0; }
        .lh-hero-kicker {
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 4px;
        }
        .lh-ms-pill {
            display: inline-flex;
            align-items: baseline;
            gap: 4px;
            padding: 6px 12px;
            border-radius: 999px;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            margin-bottom: 6px;
            border: 1px solid transparent;
        }
        .lh-tier-great .lh-ms-pill {
            color: #047857;
            background: rgba(16, 185, 129, 0.16);
            border-color: rgba(16, 185, 129, 0.35);
        }
        .lh-tier-good .lh-ms-pill {
            color: #b45309;
            background: rgba(245, 158, 11, 0.14);
            border-color: rgba(245, 158, 11, 0.35);
        }
        .lh-tier-fair .lh-ms-pill {
            color: #c2410c;
            background: rgba(251, 146, 60, 0.12);
            border-color: rgba(251, 146, 60, 0.3);
        }
        .lh-tier-slow .lh-ms-pill {
            color: #b91c1c;
            background: rgba(239, 68, 68, 0.12);
            border-color: rgba(239, 68, 68, 0.35);
        }
        .lh-tier-unknown .lh-ms-pill {
            color: var(--muted);
            background: rgba(148, 163, 184, 0.1);
            border-color: rgba(148, 163, 184, 0.25);
        }
        /* Classificação global (alinhada a detector_latency_classification) */
        .lh-tier-excellent .lh-ms-pill {
            color: #69f0ae;
            background: rgba(0, 200, 83, 0.14);
            border-color: rgba(0, 200, 83, 0.45);
        }
        .lh-tier-medium .lh-ms-pill {
            color: #ffcc80;
            background: rgba(255, 109, 0, 0.14);
            border-color: rgba(255, 109, 0, 0.4);
        }
        .lh-tier-bad .lh-ms-pill {
            color: #ff8a80;
            background: rgba(213, 0, 0, 0.14);
            border-color: rgba(213, 0, 0, 0.45);
        }
        .lh-tier-critical .lh-ms-pill {
            color: #ce93d8;
            background: rgba(106, 27, 154, 0.2);
            border-color: rgba(106, 27, 154, 0.5);
        }
        .lh-tier-timeout .lh-ms-pill {
            color: #e1bee7;
            background: rgba(74, 20, 140, 0.28);
            border-color: rgba(74, 20, 140, 0.55);
            animation: lhPulseCrit 2.2s ease-in-out infinite;
        }
        .lh-tier-fail .lh-ms-pill {
            color: #ffab91;
            background: rgba(244, 67, 54, 0.16);
            border-color: rgba(244, 67, 54, 0.45);
        }
        @keyframes lhPulseCrit {
            0%, 100% { box-shadow: 0 0 0 0 rgba(106, 27, 154, 0.35); }
            50% { box-shadow: 0 0 0 6px rgba(106, 27, 154, 0); }
        }
        .lh-metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 8px;
            margin: 10px 0 12px;
        }
        .lh-metric-cell {
            background: rgba(226, 232, 240, 0.88);
            border: 1px solid rgba(56, 189, 248, 0.12);
            border-radius: 10px;
            padding: 8px 10px;
            font-size: 0.72rem;
            transition: border-color 0.25s ease, background 0.25s ease;
        }
        .lh-metric-cell b {
            display: block;
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--muted);
            margin-bottom: 4px;
        }
        .lh-metric-val {
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            color: var(--text);
            font-size: 0.88rem;
        }
        .lh-class-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            margin-top: 4px;
            border: 1px solid rgba(255, 255, 255, 0.12);
        }
        .lh-hero-tier {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--text);
            line-height: 1.35;
        }
        .lh-hero-tier span { color: var(--glow); }
        .latency-hub-pills {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin: 0 0 10px;
        }
        @media (max-width: 480px) {
            .latency-hub-pills { grid-template-columns: 1fr; }
        }
        .lh-pill {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            padding: 8px 10px;
            border-radius: 10px;
            background: rgba(226, 232, 240, 0.95);
            border: 1px solid rgba(148, 163, 184, 0.12);
            font-size: 0.74rem;
            line-height: 1.4;
            color: var(--muted);
        }
        .lh-pill b { color: var(--text); display: block; margin-bottom: 2px; font-size: 0.72rem; }
        .lh-pill-ic { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
        .latency-hub-list li.lh-src {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }
        .latency-hub-list .lh-src-ic {
            font-size: 1rem;
            line-height: 1.35;
            flex-shrink: 0;
            opacity: 0.92;
        }
        .modal-link-row {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            margin-top: 10px;
        }
        .modal-link-row:first-of-type { margin-top: 0; }
        .mlicon {
            font-size: 1.15rem;
            line-height: 1.3;
            flex-shrink: 0;
            opacity: 0.9;
        }
        .modal-link-row .mlbody { min-width: 0; }
        .modal-close {
            float: right;
            border: 1px solid var(--border);
            background: rgba(0, 163, 255, 0.12);
            color: var(--glow);
            min-width: 48px;
            min-height: 48px;
            width: 48px;
            height: 48px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 1.35rem;
            line-height: 1;
            touch-action: manipulation;
        }
        .modal-chart-block {
            margin: 4px 0 20px;
            padding: 16px 14px 18px;
            border-radius: 16px;
            border: 1px solid rgba(56, 189, 248, 0.28);
            background:
                linear-gradient(145deg, rgba(56, 189, 248, 0.09) 0%, transparent 42%),
                linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(8, 47, 73, 0.42) 55%, rgba(241, 245, 249, 0.92) 100%);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.04) inset,
                0 12px 40px rgba(15, 23, 42, 0.06),
                0 0 48px rgba(14, 165, 233, 0.12);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .modal-chart-block .chart-target-row:first-of-type {
            margin-top: 0;
        }
        .chart-wrap {
            margin-top: 16px;
            height: min(44vh, 280px);
            min-height: 210px;
            position: relative;
            touch-action: pan-x pan-y pinch-zoom;
            border-radius: 14px;
            padding: 10px 8px 6px;
            background:
                radial-gradient(ellipse 120% 85% at 50% 0%, rgba(56, 189, 248, 0.18) 0%, transparent 58%),
                linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(226, 232, 240, 0.72) 100%);
            border: 1px solid rgba(56, 189, 248, 0.16);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.95),
                0 6px 28px rgba(2, 132, 199, 0.08);
        }
        .chart-wrap.chart-wrap--multi {
            height: min(52vh, 360px);
            min-height: 260px;
            background:
                radial-gradient(ellipse 100% 90% at 50% -10%, rgba(56, 189, 248, 0.18) 0%, transparent 50%),
                linear-gradient(165deg, rgba(226, 232, 240, 0.5) 0%, rgba(241, 245, 249, 0.55) 100%);
            border-color: rgba(56, 189, 248, 0.18);
        }
        .chart-multi-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            user-select: none;
            color: var(--text);
            font-size: 0.82rem;
        }
        .chart-multi-toggle input {
            width: 16px;
            height: 16px;
            accent-color: #38bdf8;
            cursor: pointer;
        }
        .chart-legend-hint {
            font-size: 0.72rem;
            color: rgba(148, 163, 184, 0.95);
            margin-top: 6px;
            line-height: 1.35;
        }
        .chart-wrap canvas {
            display: block;
            max-width: 100%;
            position: relative;
            z-index: 1;
            cursor: crosshair;
            touch-action: pan-x pan-y pinch-zoom;
        }
        .chart-reset-zoom-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 7px;
            padding: 4px 11px;
            border-radius: 8px;
            border: 1px solid rgba(2, 132, 199, 0.32);
            background: rgba(2, 132, 199, 0.07);
            color: var(--accent, #0284c7);
            font-size: 0.76rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.14s, border-color 0.14s;
            font-family: inherit;
        }
        .chart-reset-zoom-btn:hover {
            background: rgba(2, 132, 199, 0.14);
            border-color: rgba(2, 132, 199, 0.52);
        }
        /* Overlay de carregamento dentro da caixa do gráfico (detalhes do serviço) */
        .svc-latency-chart-loading {
            position: absolute;
            z-index: 5;
            inset: 0;
            border-radius: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            overflow: hidden;
        }
        .svc-latency-chart-loading[hidden] {
            display: none !important;
        }
        .svc-latency-chart-loading__backdrop {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                145deg,
                rgba(56, 189, 248, 0.14) 0%,
                rgba(248, 250, 252, 0.92) 42%,
                rgba(226, 232, 240, 0.88) 100%
            );
            animation: svcLatChartLoadPulse 2.4s ease-in-out infinite alternate;
        }
        .svc-latency-chart-loading__glow {
            position: absolute;
            width: 140%;
            height: 60%;
            left: -20%;
            top: 10%;
            background: radial-gradient(ellipse at 50% 50%, rgba(14, 165, 233, 0.22), transparent 68%);
            animation: svcLatChartLoadDrift 3.5s ease-in-out infinite alternate;
        }
        .svc-latency-chart-loading__skeleton {
            position: absolute;
            left: 10%;
            right: 10%;
            top: 22%;
            bottom: 28%;
            pointer-events: none;
        }
        .svc-latency-chart-loading__skeleton svg {
            width: 100%;
            height: 100%;
            opacity: 0.45;
        }
        .svc-latency-chart-loading__skeleton-path {
            fill: none;
            stroke: rgba(14, 165, 233, 0.35);
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 12 280;
            animation: svcLatChartLoadDash 2s linear infinite;
        }
        .svc-latency-chart-loading__skeleton-path--b {
            stroke: rgba(56, 189, 248, 0.28);
            stroke-dasharray: 10 260;
            animation-duration: 2.6s;
            animation-direction: reverse;
        }
        .svc-latency-chart-loading__content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            padding: 20px 24px;
            text-align: center;
            max-width: 92%;
        }
        .svc-latency-chart-loading__spinner {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 3px solid rgba(14, 165, 233, 0.2);
            border-top-color: rgba(14, 165, 233, 0.95);
            border-right-color: rgba(56, 189, 248, 0.55);
            animation: svcLatChartSpin 0.72s linear infinite;
            box-shadow: 0 0 24px rgba(14, 165, 233, 0.15);
        }
        .svc-latency-chart-loading__label {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: rgba(15, 23, 42, 0.88);
            line-height: 1.35;
        }
        .svc-latency-chart-loading__sub {
            margin: 0;
            font-size: 0.78rem;
            font-weight: 500;
            color: rgba(51, 65, 85, 0.72);
            line-height: 1.4;
        }
        @keyframes svcLatChartSpin {
            to {
                transform: rotate(360deg);
            }
        }
        @keyframes svcLatChartLoadPulse {
            0% {
                opacity: 0.88;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes svcLatChartLoadDrift {
            0% {
                transform: translate(-4%, 0) scale(1);
            }
            100% {
                transform: translate(4%, 2%) scale(1.06);
            }
        }
        @keyframes svcLatChartLoadDash {
            to {
                stroke-dashoffset: -292;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .svc-latency-chart-loading__backdrop,
            .svc-latency-chart-loading__glow,
            .svc-latency-chart-loading__skeleton-path,
            .svc-latency-chart-loading__spinner {
                animation: none !important;
            }
            .svc-latency-chart-loading__skeleton-path {
                stroke-dasharray: none;
                opacity: 0.35;
            }
        }
        .chart-target-row {
            margin-top: 12px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            font-size: 0.82rem;
            color: var(--muted);
        }
        .chart-target-row select,
        .chart-controls-row select {
            flex: 1;
            min-width: 160px;
            max-width: 100%;
            padding: 8px 12px;
            border-radius: 10px;
            border: 1px solid var(--det-field-border);
            background: var(--det-field);
            color: var(--text);
            font: inherit;
            box-shadow: 0 2px 12px rgba(2, 132, 199, 0.06);
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 32px;
        }
        .chart-target-row select option,
        .chart-controls-row select option {
            background: #fff;
            color: var(--text);
            padding: 8px 12px;
        }
        .chart-target-row select:focus-visible,
        .chart-controls-row select:focus-visible {
            outline: 2px solid rgba(56, 189, 248, 0.55);
            outline-offset: 2px;
        }
        .chart-probe-hint {
            font-size: 0.72rem;
            color: var(--muted);
            margin-top: 6px;
            line-height: 1.35;
            word-break: break-all;
        }
        .chart-probe-hint:empty {
            display: none;
            margin: 0;
        }
        .targets-table-wrap {
            margin-top: 12px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border: 1px solid var(--border);
            border-radius: 10px;
        }
        .targets-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.76rem;
        }
        .targets-table th,
        .targets-table td {
            padding: 8px 10px;
            text-align: left;
            border-bottom: 1px solid rgba(0, 163, 255, 0.12);
            vertical-align: top;
        }
        .targets-table th { color: var(--muted); font-weight: 600; }
        .targets-table tr:last-child td { border-bottom: none; }
        .shelf-head-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 10px 14px;
            margin-bottom: 2px;
        }
        .shelf-head-row .shelf-title {
            margin: 8px 4px 6px 0;
        }
        .shelf-catalog-search-slot {
            flex: 1 1 220px;
            max-width: min(100%, 400px);
            min-width: 0;
        }
        .catalog-search-bar {
            display: flex;
            flex-wrap: nowrap;
            align-items: stretch;
            gap: 8px;
            flex: 1 1 auto;
            min-width: 0;
            max-width: min(100%, 440px);
        }
        .catalog-search-bar .catalog-search-wrap {
            flex: 1 1 auto;
            min-width: 0;
            max-width: none;
        }
        .shelf-catalog-search-slot .catalog-search-bar {
            max-width: none;
            width: 100%;
        }
        .catalog-view-toggle-btn {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-height: 40px;
            padding: 0 12px;
            border-radius: 10px;
            border: 1px solid rgba(124, 58, 237, 0.42);
            background: linear-gradient(180deg, rgba(167, 139, 250, 0.22), rgba(124, 58, 237, 0.14));
            color: #5b21b6;
            font: inherit;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            cursor: pointer;
            touch-action: manipulation;
            white-space: nowrap;
            transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
        }
        .catalog-view-toggle-btn:hover {
            border-color: rgba(91, 33, 182, 0.55);
            background: linear-gradient(180deg, rgba(167, 139, 250, 0.32), rgba(124, 58, 237, 0.2));
        }
        .catalog-view-toggle-btn:focus-visible {
            outline: 2px solid rgba(124, 58, 237, 0.55);
            outline-offset: 2px;
        }
        .catalog-view-toggle-btn:active {
            transform: translateY(1px);
        }
        .catalog-view-toggle-ic {
            font-size: 0.95rem;
            line-height: 1;
            opacity: 0.92;
        }
        .catalog-view-toggle-txt {
            line-height: 1.1;
        }
        @media (max-width: 380px) {
            .catalog-view-toggle-txt {
                display: none;
            }
            .catalog-view-toggle-btn {
                padding: 0 10px;
                min-width: 44px;
            }
        }
        .shelf-catalog-search-slot .catalog-search-wrap {
            flex: 1 1 auto;
            max-width: none;
            width: 100%;
        }
        @media (max-width: 1023px) {
            .shelf-catalog-search-slot {
                display: none !important;
            }
        }
        .shelf-title {
            font-size: 1.02rem;
            font-weight: 700;
            margin: 8px 4px 6px;
            color: var(--text);
        }
        .shelf-title span { color: var(--accent); font-weight: 600; }
        .catellix-products-strip {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin: 0 0 14px;
        }
        @media (max-width: 520px) {
            .catellix-products-strip { grid-template-columns: 1fr; }
        }
        /* Abaixo do bloco de ferramentas de rede na sidebar: dois cartões empilhados */
        .catellix-products-strip--sidebar {
            margin: 16px 0 0;
            padding-top: 14px;
            border-top: 1px solid rgba(56, 189, 248, 0.14);
            grid-template-columns: 1fr;
            gap: 10px;
        }
        /* Anúncio compacto: após estado Catellix Monitoring / Kids na sidebar esquerda */
        .det-sidebar-ad-micro {
            margin-top: 10px;
            padding: 6px 4px 2px;
            border-radius: 10px;
            border: 1px solid rgba(56, 189, 248, 0.14);
            background: rgba(248, 250, 252, 0.55);
            max-width: 100%;
            box-sizing: border-box;
        }
        .det-sidebar-ad-micro .cx-promo-slot img {
            max-width: 100%;
        }
        .det-sidebar-block--distro .cat-prod-card {
            border-radius: 14px;
            padding: 12px 14px;
            background: linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.95) 100%);
            border: 1px solid rgba(56, 189, 248, 0.22);
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }
        .det-sidebar-block--distro .cat-prod-card.cat-prod--ok {
            border-color: rgba(16, 185, 129, 0.38);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(16, 185, 129, 0.12);
        }
        .det-sidebar-block--distro .cat-prod-card.cat-prod--bad {
            border-color: rgba(239, 68, 68, 0.35);
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(239, 68, 68, 0.1);
        }
        .cat-prod-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid rgba(0, 163, 255, 0.2);
            background: rgba(10, 16, 28, 0.88);
            min-width: 0;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .cat-prod-card.cat-prod--ok {
            border-color: rgba(16, 185, 129, 0.32);
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.06);
        }
        .cat-prod-card.cat-prod--bad {
            border-color: rgba(239, 68, 68, 0.3);
            box-shadow: 0 0 18px rgba(239, 68, 68, 0.06);
        }
        .cat-prod-logo {
            width: 36px;
            height: 36px;
            object-fit: contain;
            border-radius: 8px;
            flex-shrink: 0;
        }
        .cat-prod-logo--kids {
            width: 36px;
            height: 36px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid rgba(56, 189, 248, 0.28);
            background: rgba(226, 232, 240, 0.88);
        }
        .cat-prod-logo--kids img {
            width: 36px;
            height: 36px;
            display: block;
            object-fit: cover;
        }
        .cat-prod-body { min-width: 0; flex: 1; }
        .cat-prod-name {
            display: block;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--muted);
        }
        a.cat-prod-name {
            color: var(--text);
            text-decoration: none;
        }
        a.cat-prod-name:hover {
            color: var(--glow);
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        a.cat-prod-name:focus-visible {
            outline: 2px solid rgba(51, 255, 255, 0.55);
            outline-offset: 2px;
            border-radius: 4px;
        }
        .cat-prod-status {
            display: block;
            font-size: 0.84rem;
            font-weight: 700;
            color: var(--text);
            margin-top: 2px;
            font-variant-numeric: tabular-nums;
            line-height: 1.35;
        }
        .cat-prod-status .cat-ok { color: var(--ok); }
        .cat-prod-status .cat-bad { color: var(--bad); }

        .block--catalog-hero {
            margin-bottom: 20px;
            padding: 18px 16px 22px;
            border-radius: 18px;
            border: 1px solid rgba(0, 163, 255, 0.28);
            background: linear-gradient(152deg, #ffffff 0%, #f0f9ff 48%, #e0f2fe 100%);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.8) inset,
                0 14px 36px rgba(2, 132, 199, 0.1),
                0 0 48px rgba(0, 163, 255, 0.08);
        }
        .block-head--catalog {
            margin-bottom: 14px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(0, 163, 255, 0.14);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px 16px;
        }
        .block-head--catalog h2 {
            font-size: clamp(1.12rem, 3.2vw, 1.42rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0;
        }
        .catalog-home-btn {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin: 0;
            padding: 0;
            border-radius: 12px;
            border: 1px solid rgba(56, 189, 248, 0.35);
            background: rgba(0, 163, 255, 0.12);
            color: var(--glow);
            cursor: pointer;
            touch-action: manipulation;
            transition: border-color 0.12s ease, background 0.12s ease;
        }
        .catalog-home-btn:hover {
            background: rgba(0, 163, 255, 0.22);
            border-color: rgba(51, 255, 255, 0.45);
        }
        .catalog-home-btn:focus-visible {
            outline: 2px solid rgba(56, 189, 248, 0.55);
            outline-offset: 2px;
        }
        .catalog-home-btn svg {
            width: 20px;
            height: 20px;
            display: block;
        }
        .top10-cards-filter-empty {
            margin: 8px 0 16px;
            padding: 16px 18px;
            border-radius: 14px;
            border: 1px dashed rgba(148, 163, 184, 0.35);
            background: rgba(226, 232, 240, 0.88);
            font-size: 0.82rem;
            line-height: 1.5;
            color: var(--muted);
        }
        .top10-cards-filter-empty strong {
            color: var(--accent-catellix);
        }
        .catalog-search-wrap {
            position: relative;
            flex: 1 1 200px;
            max-width: min(100%, 360px);
            min-width: 0;
            min-height: 40px;
            isolation: isolate;
        }
        .catalog-search-wrap .catalog-search-ic {
            position: absolute;
            left: 11px;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            color: #64748b;
            pointer-events: none;
            z-index: 1;
        }
        .catalog-search-input {
            width: 100%;
            box-sizing: border-box;
            padding: 8px 12px 8px 38px;
            border-radius: 10px;
            border: 1px solid rgba(56, 189, 248, 0.22);
            background: var(--det-field);
            color: var(--text);
            font: inherit;
            font-size: 0.82rem;
            font-weight: 600;
            min-height: 40px;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .catalog-search-input::placeholder {
            color: #64748b;
            font-weight: 500;
        }
        .catalog-search-input:hover {
            border-color: rgba(56, 189, 248, 0.35);
        }
        .catalog-search-input:focus {
            outline: none;
            border-color: rgba(0, 163, 255, 0.55);
            box-shadow: 0 0 0 3px rgba(0, 163, 255, 0.15);
        }

        /* Modal: resultados da pesquisa (Enter no catálogo) */
        .modal-sheet--catalog-search {
            max-width: min(100%, 720px);
            max-height: min(90dvh, 90vh, 820px);
            padding-top: 16px;
            border-radius: 18px 18px 14px 14px;
        }
        @media (min-width: 768px) {
            .modal-sheet--catalog-search {
                max-width: 780px;
            }
        }
        @media (min-width: 960px) {
            .modal-sheet--catalog-search {
                max-width: 860px;
            }
        }
        .csm-head {
            margin-bottom: 12px;
            padding-right: 40px;
        }
        .csm-head h3 {
            margin: 0 0 6px;
            font-size: 1.06rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #0c4a6e;
        }
        .csm-query {
            margin: 0;
            font-size: 0.88rem;
            color: var(--muted);
            word-break: break-word;
        }
        .csm-hint {
            font-size: 0.82rem;
            color: var(--muted);
            line-height: 1.5;
            margin: 0 0 12px;
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px dashed rgba(56, 189, 248, 0.28);
            background: rgba(226, 232, 240, 0.82);
        }
        .csm-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            max-height: min(56dvh, 52vh, 540px);
            overflow-y: auto;
            overflow-x: hidden;
            padding: 2px 2px 10px;
            margin: 0 -2px;
            scrollbar-width: thin;
            scrollbar-color: rgba(56, 189, 248, 0.45) rgba(226, 232, 240, 0.88);
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
        }
        @media (min-width: 540px) {
            .csm-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        @media (min-width: 960px) {
            .csm-grid {
                max-height: min(60dvh, 620px);
            }
        }
        .csm-card {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            text-align: left;
            padding: 11px 12px;
            margin: 0;
            border-radius: 14px;
            border: 1px solid rgba(56, 189, 248, 0.2);
            background: linear-gradient(155deg, rgba(17, 28, 48, 0.96), rgba(8, 15, 30, 0.9));
            color: var(--text);
            font: inherit;
            cursor: pointer;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
            box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
            min-height: 54px;
        }
        .csm-card:hover {
            border-color: rgba(0, 163, 255, 0.5);
            box-shadow: 0 8px 28px rgba(0, 163, 255, 0.14);
        }
        .csm-card:focus-visible {
            outline: 2px solid rgba(0, 163, 255, 0.85);
            outline-offset: 2px;
        }
        .csm-card:active {
            transform: scale(0.992);
        }
        .csm-card__logo {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            object-fit: contain;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.96);
        }
        .csm-card__body {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .csm-card__name {
            font-size: 0.88rem;
            font-weight: 700;
            line-height: 1.25;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .csm-card__meta {
            font-size: 0.72rem;
            color: var(--muted);
            line-height: 1.3;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .csm-card__lat {
            flex-shrink: 0;
            font-size: 0.74rem;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(30, 41, 59, 0.92);
            border: 1px solid rgba(148, 163, 184, 0.28);
        }
        .csm-card__lat--ok {
            color: #4ade80;
            border-color: rgba(74, 222, 128, 0.4);
        }
        .csm-card__lat--bad {
            color: #f87171;
            border-color: rgba(248, 113, 113, 0.4);
        }
        .csm-card__lat--unk {
            color: var(--muted);
        }
        .csm-empty {
            grid-column: 1 / -1;
            text-align: center;
            padding: 26px 14px;
            font-size: 0.88rem;
            color: var(--muted);
            line-height: 1.55;
        }
        .csm-empty--soft {
            border-radius: 14px;
            border: 1px dashed rgba(148, 163, 184, 0.32);
            background: rgba(226, 232, 240, 0.65);
        }
        .csm-foot {
            margin: 10px 0 0;
            font-size: 0.76rem;
            color: var(--muted);
            line-height: 1.45;
            text-align: center;
        }
        @media (max-width: 719px) {
            .modal-sheet--catalog-search {
                max-height: min(88dvh, 88vh);
            }
            .csm-grid {
                max-height: min(48dvh, 44vh, 420px);
            }
        }

        /* ── Detector: barra com faixa de anúncio quando a coluna .ads-right está oculta (<1024px) ── */
        @media (max-width: 1023px) {
            /* Barra topo: linha1 = idioma+tema | Home+vídeo; linha2 = carrossel; linha3 = CTA reportar */
            body {
                padding-top: calc(134px + env(safe-area-inset-top, 0px));
            }
            .det-top-bar-home {
                grid-column: 2;
                grid-row: 1;
                justify-self: center;
                align-self: center;
                width: 40px;
                height: 40px;
                border-radius: 10px;
            }
            .det-top-action-bar {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto auto;
                grid-template-rows: auto auto auto;
                align-items: center;
                row-gap: 6px;
                column-gap: 8px;
                height: auto;
                min-height: 0;
                padding: max(4px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
            }
            .det-top-bar-left {
                grid-column: 1;
                grid-row: 1;
            }
            .det-top-bar-local-spin {
                grid-column: 1 / -1;
                grid-row: 2;
                max-width: 100%;
                width: 100%;
                justify-self: stretch;
                overflow: visible;
            }
            .det-topbar-carousel {
                height: 48px;
                width: 100%;
            }
            .det-topbar-carousel__track {
                gap: 10px;
            }
            .det-topbar-carousel__item--side {
                width: 36px;
                height: 36px;
                opacity: 0.5;
                transform: scale(0.85);
            }
            .det-topbar-carousel__item--center {
                width: 46px;
                height: 46px;
                transform: scale(1.12);
            }
            .det-top-bar-right {
                grid-column: 3;
                grid-row: 1;
                align-self: center;
            }
            .det-top-bar-cluster {
                grid-column: 1 / -1;
                grid-row: 3;
                width: 100%;
                max-width: none;
                justify-content: stretch;
                gap: 0;
            }
            .det-bar-report-cta {
                width: 100%;
                max-width: none;
                padding: 8px 12px;
                min-height: 40px;
                font-size: clamp(0.7rem, 3.1vw, 0.82rem);
            }
            .det-bar-mascote-btn {
                width: 40px;
                height: 40px;
            }
            .det-top-bar-home__ico {
                width: 20px;
                height: 20px;
            }
            .det-locale-switch button {
                padding: 6px 10px;
                font-size: 0.66rem;
            }
            .det-theme-toggle {
                width: 36px;
                height: 30px;
                font-size: 0.88rem;
            }
        }
        /* ── Detector: catálogo e toolbar compactos em telemóvel ── */
        @media (max-width: 720px) {
            /* Reserva fixa (520px) + content-visibility gerava buraco entre busca e Top 10 em alguns browsers. */
            #secShelves.block--catalog-hero {
                content-visibility: visible;
                contain-intrinsic-size: unset;
            }
            .wrap {
                padding-top: 10px;
                padding-left: max(10px, env(safe-area-inset-left));
                padding-right: max(10px, env(safe-area-inset-right));
            }
            header.hero {
                padding: 10px 4px 8px;
            }
            .brand-stack .brand-mark {
                height: 44px;
            }
            .hero .tagline {
                font-size: 0.8rem;
                margin-top: 6px;
            }
            .toolbar-compact {
                margin: 6px 0 6px;
                gap: 8px;
                justify-content: stretch;
            }
            .toolbar-compact .probe-pop-badge {
                flex: 1 1 100%;
                justify-content: center;
            }
            .toolbar-compact .det-select,
            .toolbar-compact .det-select--ip {
                flex: 1 1 calc(50% - 6px);
                min-width: 0;
                max-width: none;
            }
            .toolbar-compact .det-select--refresh {
                flex: 0 1 auto;
                max-width: none;
            }
            .toolbar-refresh-group {
                display: flex;
                flex: 1 1 100%;
                justify-content: flex-end;
                gap: 8px;
            }
            .det-loading-compact {
                padding: 6px 10px;
                margin-bottom: 8px;
                font-size: 0.74rem;
            }
            .block--catalog-hero {
                margin-bottom: 14px;
                padding: 12px 10px 14px;
                border-radius: 14px;
            }
            .block-head--catalog {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
                margin-bottom: 10px;
                padding-bottom: 10px;
            }
            .block-head--catalog h2 {
                width: 100%;
                justify-content: flex-start;
            }
            .catalog-home-btn {
                width: 36px;
                height: 36px;
            }
            .catalog-search-bar {
                width: 100%;
                max-width: none;
            }
            .catalog-search-wrap {
                flex: 1 1 auto;
                max-width: none;
                width: 100%;
            }
            .catalog-view-toggle-btn {
                min-height: 44px;
            }
            .catalog-search-input {
                min-height: 44px;
                font-size: 0.88rem;
                padding-top: 10px;
                padding-bottom: 10px;
            }
            .top10-boards {
                gap: 10px;
                margin-bottom: 14px;
            }
            .top10-cards-section {
                margin-bottom: 14px;
            }
            .top10-cards-shelf {
                margin-bottom: 14px;
            }
            .top10-cards-shelf-head {
                padding: 0 0 8px;
                flex-wrap: wrap;
            }
            .top10-cards-row {
                gap: 10px;
                padding-bottom: 6px;
            }
            .catalog-filter-banner {
                margin-bottom: 10px;
                padding: 10px 12px;
            }
            .cfb-inner {
                gap: 8px;
            }
            .cfb-clear {
                margin-left: 0;
                width: 100%;
                margin-top: 4px;
            }
            .metrics-bar {
                margin: 6px 0 10px;
                padding: 8px 10px;
                font-size: 0.72rem;
            }
            .shelf-block {
                margin-bottom: 4px;
            }
            .det-obs-hub {
                margin-bottom: 12px;
                padding: 10px 12px 12px;
            }
        }
        @media (max-width: 400px) {
            .toolbar-compact .det-select,
            .toolbar-compact .det-select--ip {
                flex: 1 1 100%;
            }
        }

        .block-head-ic {
            color: var(--glow);
            font-size: 0.85em;
            filter: drop-shadow(0 0 10px rgba(0, 163, 255, 0.45));
        }
        .block--dd-inner {
            margin-bottom: 0;
        }
        .block--dd-inner .row-scroll {
            padding-top: 6px;
            min-height: 160px;
        }

        .det-dash-details {
            margin-bottom: 10px;
            border-radius: 15px;
            border: 1px solid rgba(2, 132, 199, 0.28);
            background: linear-gradient(
                168deg,
                rgba(255, 255, 255, 0.98) 0%,
                rgba(240, 249, 255, 0.96) 38%,
                rgba(224, 242, 254, 0.9) 72%,
                rgba(186, 230, 253, 0.65) 100%
            );
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            overflow: hidden;
            transition: border-color 0.28s ease, box-shadow 0.35s ease;
            box-shadow: 0 2px 12px rgba(2, 132, 199, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
        }
        .det-dash-details[open] {
            border-color: rgba(0, 163, 255, 0.42);
            box-shadow:
                0 12px 36px rgba(2, 132, 199, 0.14),
                0 0 0 1px rgba(0, 163, 255, 0.1),
                0 0 48px rgba(0, 163, 255, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }
        .det-dash-details > summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 12px;
            padding: 13px 15px;
            user-select: none;
            touch-action: manipulation;
        }
        .det-dash-details > summary::-webkit-details-marker { display: none; }
        .det-dash-details > summary::marker { content: ''; }
        .det-dash-chev {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.55em;
            height: 1.55em;
            border-radius: 8px;
            font-size: 0.62rem;
            line-height: 1;
            color: var(--glow);
            background: rgba(0, 163, 255, 0.14);
            border: 1px solid rgba(0, 163, 255, 0.28);
            transition: transform 0.32s cubic-bezier(0.34, 1.25, 0.64, 1);
            flex-shrink: 0;
        }
        .det-dash-chev--sm {
            width: 1.38em;
            height: 1.38em;
            font-size: 0.52rem;
        }
        .det-dash-details[open] > summary > .det-dash-chev:first-of-type,
        .det-prob-globe[open] > .det-prob-sum > .det-dash-chev,
        .det-prob-cat-details[open] > .det-prob-cat-sum > .det-dash-chev {
            transform: rotate(-180deg);
        }
        .det-dash-sum-main {
            font-weight: 800;
            font-size: 0.84rem;
            letter-spacing: 0.02em;
            color: var(--text);
        }
        .det-dash-sum-hint {
            flex: 1 1 auto;
            text-align: right;
            font-size: 0.68rem;
            color: #0369a1;
            font-weight: 600;
            min-width: 10ch;
            opacity: 0.88;
        }
        @media (max-width: 540px) {
            .det-dash-sum-hint {
                flex-basis: 100%;
                text-align: left;
                padding-left: 2.1em;
            }
        }
        .det-dash-body {
            padding: 2px 12px 14px 15px;
        }
        .det-dash-body--flush {
            padding: 0 2px 10px;
        }
        .det-dash-details--rank .rank-section-wrap {
            margin-bottom: 0;
        }
        .det-dash-details--rank .rank-mood-bar {
            margin-top: 2px;
        }
        .metrics-bar {
            margin: 0;
        }
        .det-obs-hub--in-panel {
            margin: 0;
            padding: 6px 2px 2px;
            border: none;
            background: transparent;
        }
        .prob-catalog-block--nested {
            margin: 0;
            padding: 6px 0 2px;
            border: none;
            background: transparent;
            box-shadow: none;
        }
        .det-prob-globe {
            margin-bottom: 10px;
            border-radius: 12px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(226, 232, 240, 0.82);
            overflow: hidden;
        }
        .det-prob-sum {
            list-style: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            font-weight: 800;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--muted);
        }
        .det-prob-sum::-webkit-details-marker { display: none; }
        .det-prob-sum::marker { content: ''; }
        .det-prob-sum-title {
            flex: 1;
            min-width: 0;
            color: var(--text);
            font-weight: 800;
            letter-spacing: 0.02em;
            text-transform: none;
            font-size: 0.78rem;
        }
        .det-prob-globe-body {
            padding: 0 12px 12px;
        }
        .prob-catalog-sub--compact {
            margin-bottom: 8px;
            font-size: 0.66rem;
            line-height: 1.4;
        }
        .prob-catalog-by-cat--stack {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .det-prob-cat-details {
            border-radius: 12px;
            border: 1px solid rgba(0, 163, 255, 0.12);
            background: rgba(255, 255, 255, 0.9);
            overflow: hidden;
            transition: border-color 0.25s ease;
        }
        .det-prob-cat-details[open] {
            border-color: rgba(0, 163, 255, 0.3);
        }
        .det-prob-cat-sum {
            list-style: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px 10px;
            padding: 10px 12px;
            user-select: none;
            touch-action: manipulation;
        }
        .det-prob-cat-sum::-webkit-details-marker { display: none; }
        .det-prob-cat-sum::marker { content: ''; }
        .det-prob-cat-name {
            font-weight: 800;
            font-size: 0.8rem;
            color: var(--text);
            flex: 1;
            min-width: 0;
        }
        .det-prob-cat-pill {
            font-size: 0.6rem;
            font-weight: 800;
            padding: 4px 9px;
            border-radius: 999px;
            background: rgba(0, 163, 255, 0.14);
            color: var(--glow);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .det-prob-cat-body {
            padding: 0 8px 10px 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        #secShelves.block--catalog-hero {
            content-visibility: auto;
            contain-intrinsic-size: auto 520px;
            display: flex;
            flex-direction: column;
        }
        .catalog-filter-banner {
            order: 5;
            display: none;
            margin: 0 0 14px;
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid rgba(0, 163, 255, 0.22);
            background: linear-gradient(135deg, rgba(0, 163, 255, 0.12) 0%, rgba(226, 232, 240, 0.88) 100%);
            align-items: center;
            flex-wrap: wrap;
            gap: 10px 14px;
        }
        #secShelves.is-filtered .catalog-filter-banner {
            display: flex;
            order: 10;
        }
        #secShelves .block-head--catalog {
            order: 10;
        }
        #secShelves.is-filtered .block-head--catalog {
            order: 30;
        }
        #secShelves #top10Boards {
            order: 20;
        }
        #secShelves #top10Cards {
            order: 30;
        }
        #secShelves.is-filtered #top10Cards {
            order: 40;
        }
        #secShelves #shelvesHost {
            order: 40;
        }
        #secShelves.is-filtered #shelvesHost {
            order: 50;
        }
        #secShelves #icmpNoReplyHost {
            order: 50;
        }
        #secShelves.is-filtered #icmpNoReplyHost {
            order: 60;
        }
        .cfb-inner {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 14px;
            width: 100%;
        }
        .cfb-label {
            font-size: 0.62rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--glow);
            flex-shrink: 0;
        }
        .cfb-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            flex: 1;
            min-width: 0;
        }
        .cfb-chip {
            font-size: 0.72rem;
            font-weight: 600;
            padding: 5px 10px;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--text);
        }
        .cfb-chip--search {
            border-color: rgba(96, 165, 250, 0.45);
            color: #1e40af;
        }
        .cfb-chip--cat {
            border-color: rgba(52, 211, 153, 0.35);
            color: #047857;
        }
        .cfb-chip--ip {
            border-color: rgba(251, 191, 36, 0.4);
            color: #a16207;
        }
        .cfb-count {
            font-size: 0.72rem;
            color: var(--muted);
            font-weight: 600;
            white-space: nowrap;
        }
        .cfb-clear {
            margin-left: auto;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 6px 14px;
            border-radius: 999px;
            border: 1px solid rgba(248, 113, 113, 0.45);
            background: rgba(239, 68, 68, 0.12);
            color: #991b1b;
            cursor: pointer;
            touch-action: manipulation;
        }
        .cfb-clear:hover,
        .cfb-clear:focus-visible {
            background: rgba(239, 68, 68, 0.22);
            outline: none;
        }
        /* Início via #detTopBarHome na barra fixa (i18n mantém o href no DOM). */
        .det-back-home {
            display: none !important;
        }

        .det-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            align-items: start;
        }
        @media (min-width: 1024px) {
            .det-layout {
                grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
                gap: 24px 28px;
            }
        }
        .det-sidebar {
            order: 2;
        }
        .det-main {
            order: 1;
            min-width: 0;
        }
        .det-layout-page {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: 100%;
        }
        .det-layout-page__main {
            flex: 1;
            min-width: 0;
        }
        @media (min-width: 1024px) {
            .det-layout-page {
                flex-direction: row;
                align-items: stretch;
            }
        }
        .ads-right {
            display: none;
        }
        @media (min-width: 1024px) {
            .det-bar-mascote-btn {
                width: 38px;
                height: 38px;
            }
            .ads-right {
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                width: 300px;
                flex-shrink: 0;
                margin: 0;
                /* Comportamento como a sidebar esquerda: acompanha o scroll da página (sem sticky). */
                padding: 10px max(12px, env(safe-area-inset-right)) 24px 20px;
                position: relative;
                top: auto;
                align-self: stretch;
                min-height: 0;
                max-height: none;
                overflow: visible;
                border-left: 1px solid var(--border);
                background: linear-gradient(180deg, var(--card-glass) 0%, var(--bg) 45%, var(--bg) 100%);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
            }
        }
        .ads-right-stack {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            min-height: 0;
        }
        .ads-right-stack > .det-ad-slots-zone--right {
            flex: 0 0 auto;
        }
        .ads-right .det-ad-slots-zone--right {
            width: 100%;
        }
        .ads-right .det-ad-slots-zone--right .det-sidebar-title {
            font-size: .92rem;
            margin: 0 0 4px;
        }
        .det-ad-right-mobile-badge {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin: 0 0 14px;
            padding: 10px 14px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.14) 0%, rgba(245, 158, 11, 0.07) 100%);
            border: 1.5px solid rgba(251, 191, 36, 0.35);
            box-shadow: 0 1px 8px rgba(251, 191, 36, 0.1);
        }
        .det-ad-right-mobile-badge__star {
            font-size: 1.15rem;
            line-height: 1;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .det-ad-right-mobile-badge__phone {
            font-size: 1.2rem;
            line-height: 1;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .det-ad-right-mobile-badge__text {
            font-size: .82rem;
            font-weight: 600;
            color: var(--text);
            line-height: 1.4;
        }
        html[data-det-theme='dark'] .det-ad-right-mobile-badge {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
            border-color: rgba(251, 191, 36, 0.25);
        }
        .ads-right .det-ad-slots-zone--right .det-ad-slots-lead {
            font-size: .78rem;
            margin: 0 0 8px;
        }
        .ads-right .det-ad-slots-zone--right .det-ad-slots-count-row {
            margin-bottom: 6px;
        }
        .ads-right .det-ad-slots-zone--right .det-ad-slots-carousel {
            max-width: 100%;
        }
        .ads-right .det-ad-slots-zone--right .det-ad-slots-viewport {
            max-width: 100%;
        }
        /* ═══════════════════════════════════════════════════════
           TOP 10 GAMES — painel escuro simples (sem neon / scanlines)
        ═══════════════════════════════════════════════════════ */
        .det-right-games-board {
            position: relative;
            z-index: 0;
            isolation: isolate;
            contain: layout style;
            border-radius: 10px;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: linear-gradient(180deg, #18181b 0%, #0f0f12 100%);
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
            padding: 10px 10px 8px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .det-right-games-board::before,
        .det-right-games-board::after {
            display: none;
        }

        .det-right-games-board__head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 8px;
            position: relative;
            z-index: 4;
        }
        .det-right-games-board__title {
            margin-bottom: 2px;
            position: relative;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 800;
            font-size: .80rem;
            color: #e2e8f0;
            animation: none;
        }
        .det-right-games-board__title::before {
            content: '🎮\00a0⚡';
            margin-right: 6px;
            animation: none;
        }
        .det-right-games-board__sub {
            margin: 0;
            font-size: .60rem;
            line-height: 1.35;
            color: #ffffff;
            letter-spacing: 0.02em;
            opacity: 0.9;
        }
        /* Mesmo visual do botão Compartilhar do Top 10 reclamações (.det-sd-action--social) */
        .det-right-games-board__share.det-sd-action--social {
            flex-shrink: 0;
            align-self: flex-start;
            min-height: 40px;
            padding: 9px 12px;
            font-size: 0.8rem;
            font-weight: 800;
            text-transform: none;
            letter-spacing: 0.02em;
        }
        .det-right-games-board__share .det-sd-action__ico {
            width: 18px;
            height: 18px;
        }

        .det-right-games-board__list {
            list-style: none;
            margin: 0;
            padding: 2px 2px 4px 2px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            min-height: 120px;
            max-height: none;
            /* Top 10 cabe na página: sem scrollport interno — evita “armadilha” de scroll no mobile/desktop
               (overflow:auto + overscroll-behavior:contain capturava o dedo/roda). */
            overflow: visible;
            overscroll-behavior: auto;
            position: relative;
            z-index: 4;
        }

        .det-right-games-board__list .det-sidebar-complaints-item {
            animation: none;
        }

        /* Row button base */
        .det-right-games-board__list .det-sidebar-line--rank {
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.28);
            background: linear-gradient(110deg,
                rgba(0, 14, 2, 0.96) 0%,
                rgba(0, 20, 6, 0.92) 100%);
            color: #ffffff;
            box-sizing: border-box;
            box-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
            transition: transform 0.16s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s;
        }
        .det-right-games-board__list .det-sidebar-line--rank:hover,
        .det-right-games-board__list .det-sidebar-line--rank:focus-visible {
            background: linear-gradient(110deg, rgba(39, 39, 42, 0.98) 0%, rgba(24, 24, 27, 0.96) 100%);
            border-color: rgba(203, 213, 225, 0.45);
            transform: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
        }

        /* Top 3 — destaque discreto (sem pulsação) */
        .det-right-games-board__item:nth-child(-n+3) .det-sidebar-line--rank-main {
            position: relative;
            border-color: rgba(248, 113, 113, 0.45);
            background: linear-gradient(110deg, rgba(39, 24, 24, 0.98) 0%, rgba(28, 18, 18, 0.96) 100%);
            box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.2) inset, 0 2px 10px rgba(0, 0, 0, 0.5);
        }
        .det-right-games-board__item:nth-child(-n+3) .det-sidebar-line--rank-main::before {
            display: none;
        }
        .det-right-games-board__item:nth-child(-n+3) .det-sidebar-line--rank-main > * {
            position: relative;
            z-index: 1;
        }

        /* ── ALL text/elements inside games panel: WHITE + high contrast ── */
        .det-right-games-board__list .det-sb-name {
            color: #ffffff !important;
            font-weight: 700;
            text-shadow: none;
        }
        .det-right-games-board__list .det-sb-meta {
            color: #ffffff !important;
            opacity: 0.85;
            font-size: .58rem;
        }
        .det-right-games-board__list .det-sb-meta--lat {
            color: #ffffff !important;
            opacity: 0.9;
        }
        .det-right-games-board__list .det-sb-body {
            color: #ffffff !important;
        }
        .det-right-games-board__list .det-rank-trend {
            font-size: 0.85rem;
            font-weight: 800;
            text-shadow: none;
        }
        .det-right-games-board__list .det-rank-trend--up {
            color: #50ff30 !important;
        }
        .det-right-games-board__list .det-rank-trend--down {
            color: #ff5555 !important;
        }
        .det-right-games-board__list .det-vol-trend--up {
            color: #50ff30 !important;
        }
        .det-right-games-board__list .det-vol-trend--down {
            color: #ff5555 !important;
        }
        /* Pill / rail buttons — all white text */
        .det-right-games-board__list .det-t10-comm-rail {
            color: #ffffff;
        }
        .det-right-games-board__list .det-t10-unified-btn {
            color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.35) !important;
        }
        .det-right-games-board__list .det-t10-unified-btn.det-t10-unified--spike {
            border-color: rgba(255, 100, 100, 0.55) !important;
            color: #ffffff !important;
        }
        .det-right-games-board__list .det-t10-unified-btn.det-t10-unified--down {
            border-color: rgba(255, 100, 100, 0.6) !important;
            color: #ffffff !important;
        }
        .det-right-games-board__list .det-t10-report-tag {
            color: #ffffff !important;
            font-weight: 800;
        }
        .det-right-games-board__list .det-t10-report-sep {
            color: rgba(255, 255, 255, 0.4) !important;
        }
        .det-right-games-board__list .det-t10-pulse-mini-lbl {
            color: #ffffff !important;
            opacity: 0.8;
        }
        .det-right-games-board__list .det-t10-pulse-mini-val {
            color: #ffffff !important;
            font-weight: 800;
        }
        .det-right-games-board__list .det-t10-unified-inner {
            color: #ffffff !important;
        }
        .det-right-games-board__list .det-t10-unified-shine {
            background: transparent !important;
            animation: none !important;
            opacity: 0 !important;
        }
        .det-right-games-board__list .det-t10-unified-btn {
            animation: none !important;
        }
        /* Rank badge — white border, bright text */
        .det-right-games-board__list .det-sb-rank {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.45);
            font-variant-numeric: tabular-nums;
            font-weight: 900;
        }
        .det-right-games-board__list .det-sb-rank--gold {
            color: #fbbf24;
            background: rgba(251, 191, 36, 0.15);
            border-color: rgba(251, 191, 36, 0.55);
            box-shadow: none;
        }
        .det-right-games-board__list .det-sb-rank--silver {
            color: #e2e8f0;
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(203, 213, 225, 0.45);
            box-shadow: none;
        }
        .det-right-games-board__list .det-sb-rank--bronze {
            color: #fdba74;
            background: rgba(253, 186, 116, 0.12);
            border-color: rgba(253, 186, 116, 0.45);
            box-shadow: none;
        }
        /* Rows de fill por latência */
        .det-right-games-board__item--lat .det-sidebar-line--rank {
            border-color: rgba(255, 255, 255, 0.22) !important;
        }
        .det-right-games-board__item--lat .det-sb-name {
            color: #ffffff !important;
        }
        /* Logo bg for visibility on dark */
        .det-right-games-board__list .det-sb-logo {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 6px;
            padding: 2px;
        }

        /* Legacy helper classes (kept for compat) */
        .det-right-games-board__item { margin: 0; padding: 0; }
        .det-right-games-board__line { display: none; }
        .det-right-games-board__rank { display: none; }
        .det-right-games-board__name { display: none; }

        /* ── MOBILE: painel Games (mesmo estilo sóbrio) ── */
        .det-mobile-games-board-mount {
            display: none;
        }
        @media (max-width: 1023px) {
            .det-mobile-games-board-mount {
                display: block;
                margin: 16px 0;
                padding: 0 4px;
            }
            .det-mobile-games-board-mount .det-right-games-board__share.det-sd-action--social {
                touch-action: manipulation;
                -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
            }
            .det-mobile-games-board-mount .det-right-games-board {
                border-radius: 12px;
            }
            .det-mobile-games-board-mount .det-right-games-board__list .det-sidebar-line--rank {
                padding: 8px 10px;
                border-color: rgba(255, 255, 255, 0.28);
                color: #ffffff;
            }
            .det-mobile-games-board-mount .det-right-games-board__list .det-sb-name { color: #ffffff !important; }
            .det-mobile-games-board-mount .det-right-games-board__list .det-sb-meta { color: #ffffff !important; }
            .det-mobile-games-board-mount .det-right-games-board__list .det-sb-meta--lat { color: #ffffff !important; }
            .det-mobile-games-board-mount .det-right-games-board__list .det-rank-trend--up { color: #50ff30 !important; }
            .det-mobile-games-board-mount .det-right-games-board__list .det-rank-trend--down { color: #ff5555 !important; }
            .det-mobile-games-board-mount .det-right-games-board__list .det-t10-report-tag { color: #ffffff !important; }
            .det-mobile-games-board-mount .det-right-games-board__list .det-t10-pulse-mini-lbl { color: #ffffff !important; }
            .det-mobile-games-board-mount .det-right-games-board__list .det-t10-pulse-mini-val { color: #ffffff !important; }
            .det-mobile-games-board-mount .det-right-games-board__list .det-t10-unified-btn { color: #ffffff !important; border-color: rgba(255,255,255,0.35) !important; }
            .det-mobile-games-board-mount .det-right-games-board__list .det-sb-rank { color: #ffffff; border-color: rgba(255,255,255,0.45); }
            .det-mobile-games-board-mount .det-right-games-board__sub { color: #ffffff; }
            .det-mobile-games-board-mount .det-right-games-board__list .det-sb-logo {
                background: rgba(255, 255, 255, 0.95);
                border-radius: 6px;
                padding: 2px;
            }
        }
        .det-ad-inline-wrap {
            margin: 20px 0 10px;
            max-width: 100%;
        }
        .det-ad-inline-card {
            position: relative;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            background: var(--card-glass);
            box-shadow: var(--card-3d);
            padding: 12px;
            overflow: hidden;
        }
        .det-mobile-premium-ad-wrap {
            display: none;
        }
        @media (max-width: 1023px) {
            .det-mobile-premium-ad-wrap {
                display: block;
                margin: 18px 0 14px;
                max-width: 100%;
            }
            .det-mobile-premium-ad-card {
                border-radius: var(--radius);
                border: 1px solid rgba(0, 163, 255, 0.35);
                background: var(--card);
                box-shadow:
                    var(--card-3d),
                    0 0 0 1px rgba(0, 163, 255, 0.12) inset;
                padding: 12px;
                overflow: hidden;
                min-height: 300px;
            }
            .det-mobile-premium-ad-card .cx-promo-slot {
                min-height: 260px;
            }
            .det-mobile-premium-ad-card .cx-promo-slot a {
                display: block;
            }
            .det-mobile-premium-ad-card .cx-promo-slot img {
                max-width: 100%;
                height: auto;
            }
        }
        @media (min-width: 1024px) {
            .det-sidebar {
                order: 0;
            }
            .det-main {
                order: 1;
            }
        }
        /* Um único cartão lateral: reclamações + Linux em fluxo contínuo (sem sticky a tapar o bloco de baixo). */
        .det-sidebar-inner {
            position: relative;
            padding: 14px 14px 16px;
            border-radius: 14px;
            border: 1px solid var(--border);
            background: var(--card);
            box-shadow: var(--card-3d);
        }
        .det-sidebar-title {
            margin: 0 0 6px;
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--accent);
            letter-spacing: 0.02em;
        }
        .det-sidebar-sub {
            margin: 0 0 12px;
            font-size: 0.72rem;
            line-height: 1.45;
            color: var(--muted);
        }
        .det-sidebar-inner--rankings {
            border-radius: 16px;
            padding: 14px 12px 18px;
            border: 1px solid rgba(248, 113, 113, 0.2);
            background:
                linear-gradient(160deg, rgba(248, 113, 113, 0.07) 0%, transparent 42%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 252, 0.98) 100%);
            box-shadow:
                0 6px 28px rgba(15, 23, 42, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.6) inset,
                0 10px 24px rgba(15, 23, 42, 0.06);
        }
        .det-sidebar-block--complaints {
            position: relative;
            z-index: 0;
        }
        .det-sidebar-complaints-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 10px;
            margin: 0 0 10px;
        }
        .det-sct-lbl {
            font-size: 0.65rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: var(--muted);
        }
        .det-sct-sel {
            font: inherit;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 6px 10px;
            border-radius: 10px;
            border: 1px solid rgba(248, 113, 113, 0.28);
            background: rgba(255, 255, 255, 0.95);
            color: var(--text);
            cursor: pointer;
            min-width: 0;
        }
        .det-sct-live {
            margin-left: auto;
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #059669;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .det-sct-live::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #34d399;
            box-shadow: 0 0 10px rgba(52, 211, 153, 0.85);
            animation: detLivePulse 2.2s ease-in-out infinite;
        }
        @keyframes detLivePulse {
            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.55;
                transform: scale(0.92);
            }
        }
        .det-complaints-ol--sidebar-rank {
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(124, 58, 237, 0.22);
            background: linear-gradient(175deg, rgba(248, 250, 255, 0.9) 0%, rgba(238, 242, 255, 0.82) 100%);
            /* Espaço lateral para a pílula (média/h) não ser cortada pelo overflow */
            padding-inline: 8px;
            box-sizing: border-box;
            box-shadow:
                0 10px 20px rgba(30, 41, 59, 0.08),
                inset 0 0 0 1px rgba(255, 255, 255, 0.55);
        }
        .det-complaints-ol--sidebar-rank.det-complaints-ol--pulse {
            animation: detRankPulse 0.55s ease-out;
        }
        @keyframes detRankPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.45);
            }
            100% {
                box-shadow: 0 0 0 12px rgba(56, 189, 248, 0);
            }
        }
        .det-complaints-ol--sidebar-rank > li {
            border-bottom: 1px solid rgba(15, 23, 42, 0.06);
        }
        .det-complaints-ol--sidebar-rank > li:last-child {
            border-bottom: none;
        }
        .det-sidebar-line--rank {
            padding: 10px 8px;
            border-radius: 0;
            gap: 10px;
            transition: background 0.15s, transform 0.15s;
        }
        .det-sidebar-line--rank:hover,
        .det-sidebar-line--rank:focus-visible {
            background: linear-gradient(90deg, rgba(124, 58, 237, 0.12) 0%, rgba(56, 189, 248, 0.1) 100%);
            transform: translateX(2px);
        }
        .det-sb-rank-wrap {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            flex: 0 0 auto;
            flex-shrink: 0;
            min-width: 2rem;
        }
        .det-sb-rank--gold {
            color: #b45309 !important;
            text-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
        }
        .det-sb-rank--silver {
            color: #64748b !important;
        }
        .det-sb-rank--bronze {
            color: #c2410c !important;
        }
        .det-sb-count--pill {
            min-width: 0;
            max-width: 100%;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 4px 12px;
            border-radius: 10px;
            text-align: center;
            font-variant-numeric: tabular-nums;
            box-sizing: border-box;
            line-height: 1;
            background: linear-gradient(135deg, rgba(248, 113, 113, 0.18) 0%, rgba(14, 165, 233, 0.12) 100%);
            border: 1px solid rgba(248, 113, 113, 0.22);
            color: #b91c1c !important;
            cursor: pointer;
            min-height: 38px;
            gap: 2px;
        }
        .det-sb-count--pill .det-pill-label {
            font-size: 0.55rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            opacity: 0.7;
            line-height: 1;
        }
        .det-sb-count--pill.det-sb-count--spike {
            background: linear-gradient(135deg, rgba(234, 88, 12, 0.28) 0%, rgba(220, 38, 38, 0.2) 100%);
            border-color: rgba(234, 88, 12, 0.45);
            color: #9a3412 !important;
            box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.15);
        }
        .det-sb-count--pill.det-sb-count--down {
            background: linear-gradient(135deg, rgba(220, 38, 38, 0.32) 0%, rgba(127, 29, 29, 0.28) 100%);
            border-color: rgba(220, 38, 38, 0.55);
            color: #7f1d1d !important;
            font-weight: 900;
            letter-spacing: 0.04em;
            animation: det-pulse-down 1.6s ease-in-out infinite;
        }
        @keyframes det-pulse-down {
            0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
            50% { box-shadow: 0 0 8px 2px rgba(220, 38, 38, 0.25); }
        }
        .det-complaints-ol {
            margin: 0;
            padding: 0;
            list-style: none;
            counter-reset: detct;
        }
        .det-complaints-ol li {
            margin: 0;
            padding: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }
        .det-complaints-ol li:last-child {
            border-bottom: none;
        }
        .det-sidebar-line {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            margin: 0;
            padding: 10px 4px;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: var(--text);
            font: inherit;
            font-size: 0.8rem;
            text-align: left;
            cursor: pointer;
            touch-action: manipulation;
            transition: background 0.15s;
        }
        .det-sidebar-line:hover,
        .det-sidebar-line:focus-visible {
            background: rgba(0, 163, 255, 0.1);
            outline: none;
        }
        .det-sidebar-line .det-sb-rank {
            flex: 0 0 auto;
            min-width: 1.1em;
            font-weight: 800;
            font-size: 0.72rem;
            color: #5b21b6;
            text-align: center;
            text-shadow: 0 0 10px rgba(124, 58, 237, 0.35);
        }
        .det-sidebar-line .det-sb-logo {
            width: 36px;
            height: 36px;
            border-radius: 9px;
            object-fit: contain;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.94);
            border: 1px solid rgba(56, 189, 248, 0.14);
            box-sizing: border-box;
        }
        @media (max-width: 480px) {
            .det-sidebar-line .det-sb-logo {
                width: 32px;
                height: 32px;
                border-radius: 8px;
            }
            .det-sidebar-line {
                gap: 8px;
                padding: 8px 2px;
            }
        }
        .det-sidebar-line .det-sb-body {
            flex: 1;
            min-width: 0;
        }
        .det-sidebar-line .det-sb-name {
            display: block;
            font-weight: 600;
            line-height: 1.3;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .det-sidebar-line .det-sb-meta {
            display: block;
            font-size: 0.68rem;
            color: var(--muted);
            margin-top: 2px;
        }
        .det-sidebar-line .det-sb-count {
            flex: 0 0 auto;
            font-weight: 800;
            font-size: 0.78rem;
            color: var(--accent);
        }
        .det-sidebar-empty {
            padding: 10px 4px;
            font-size: 0.78rem;
            color: var(--muted);
            line-height: 1.45;
        }
        .det-sidebar-block--distro {
            position: relative;
            z-index: 0;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid rgba(56, 189, 248, 0.14);
        }
        .det-ad-slots-zone {
            position: relative;
            overflow: hidden;
            overflow: clip;
            border-radius: 12px;
        }
        .det-ad-slots-confetti {
            position: absolute;
            inset: 0;
            /* Acima da faixa e do destaque (30), para o confete aparecer em todos os logos */
            z-index: 38;
            pointer-events: none;
            overflow: hidden;
        }
        .det-ad-slots-confetti-piece {
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 1px;
            pointer-events: none;
            opacity: 0;
            will-change: transform, opacity;
            animation-name: det-ad-slots-confetti-fall;
            animation-timing-function: cubic-bezier(0.28, 0.55, 0.42, 0.98);
            animation-fill-mode: forwards;
        }
        @keyframes det-ad-slots-confetti-fall {
            0% {
                transform: translate3d(0, -6px, 0) rotate(0deg);
                opacity: 0;
            }
            5% {
                opacity: 0.78;
            }
            92% {
                opacity: 0.55;
            }
            100% {
                transform: translate3d(var(--det-cf-drift, 0px), 400px, 0) rotate(620deg);
                opacity: 0;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .det-ad-slots-confetti {
                display: none !important;
            }
        }
        .det-ad-slots-lead {
            margin-top: 4px;
        }
        .det-ad-slots-count-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px 12px;
            margin: 6px 0 8px;
            padding: 10px 12px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(240, 249, 255, 0.65) 0%, rgba(255, 255, 255, 0.92) 100%);
            border: 1px solid rgba(14, 165, 233, 0.18);
            box-sizing: border-box;
        }
        .det-ad-slots-count-info {
            flex: 1;
            min-width: 0;
        }
        .det-ad-slots-count-caption {
            margin: 0 0 6px;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #0369a1;
            line-height: 1.35;
        }
        .det-ad-slots-count-nums {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 10px;
        }
        .det-ad-slots-count-pill {
            display: inline-flex;
            align-items: baseline;
            gap: 2px 4px;
            padding: 4px 12px 5px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid rgba(14, 165, 233, 0.35);
            box-shadow: 0 1px 8px rgba(14, 165, 233, 0.12);
            font-weight: 800;
            letter-spacing: 0.02em;
            line-height: 1.2;
        }
        .det-ad-slots-count-num {
            font-size: 1.05rem;
            color: #0c4a6e;
        }
        .det-ad-slots-count-num--total {
            font-size: 0.88rem;
            font-weight: 700;
            color: #64748b;
        }
        .det-ad-slots-count-slash {
            font-size: 0.85rem;
            font-weight: 700;
            color: #94a3b8;
            margin: 0 1px;
        }
        .det-ad-slots-count-hint {
            font-size: 0.72rem;
            font-weight: 600;
            color: #475569;
            line-height: 1.35;
            flex: 1 1 120px;
            min-width: 0;
        }
        .det-ad-slots-micro-add {
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            margin-top: 2px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            border: 2px solid rgba(212, 175, 55, 0.65);
            background: linear-gradient(165deg, rgba(255, 251, 235, 0.98) 0%, rgba(254, 243, 199, 0.88) 100%);
            color: rgba(146, 110, 20, 0.95);
            font-size: 1.45rem;
            font-weight: 300;
            line-height: 1;
            cursor: pointer;
            box-shadow:
                0 0 0 1px rgba(255, 248, 200, 0.65),
                0 4px 14px rgba(212, 175, 55, 0.22);
            transition:
                transform 0.12s ease,
                box-shadow 0.18s ease,
                border-color 0.18s ease,
                filter 0.15s ease;
        }
        .det-ad-slots-micro-add:hover,
        .det-ad-slots-micro-add:focus-visible {
            outline: none;
            border-color: rgba(180, 130, 20, 0.95);
            box-shadow:
                0 0 0 1px rgba(255, 236, 160, 0.9),
                0 6px 20px rgba(212, 175, 55, 0.35);
            filter: brightness(1.04);
        }
        .det-ad-slots-micro-add:active {
            transform: scale(0.96);
        }
        .det-ad-slots-micro-add__sym {
            user-select: none;
            margin-top: -2px;
        }
        .det-ad-slots-carousel {
            margin: 0 0 4px;
            position: relative;
        }
        .det-ad-slots-viewport {
            position: relative;
            overflow: hidden;
            margin: 0 auto;
            width: 100%;
            max-width: 100%;
            aspect-ratio: 1;
            max-height: min(340px, 88vw);
            padding: 6px 0 12px;
            box-sizing: border-box;
            cursor: default;
            display: flex;
            align-items: center;
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
        }
        .det-ad-slots-track {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            gap: 22px;
            width: max-content;
            will-change: transform;
        }
        .det-ad-slots-track--static {
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            max-width: 100%;
            gap: 18px;
            padding: 8px 4px;
            box-sizing: border-box;
        }
        /* Moldura dourada alinhada ao cartão do destaque expandido (.det-ad-slots-spotlight-card) */
        .det-ad-slot {
            position: relative;
            z-index: 1;
            flex: 0 0 auto;
            width: 128px;
            height: 128px;
            padding: 0;
            margin: 0;
            border-radius: 16px;
            border: 3px solid transparent;
            background-image:
                linear-gradient(165deg, #fffef6 0%, #faf6ec 50%, #ffffff 100%),
                linear-gradient(
                    145deg,
                    #fff6c4 0%,
                    #e8c547 18%,
                    #d4af37 40%,
                    #c9a227 52%,
                    #f0e68c 72%,
                    #b8860b 100%
                );
            background-origin: border-box;
            background-clip: padding-box, border-box;
            box-shadow:
                0 0 0 1px rgba(255, 236, 160, 0.55),
                0 0 20px rgba(212, 175, 55, 0.28),
                0 8px 24px rgba(15, 23, 42, 0.1);
            color: rgba(120, 90, 30, 0.78);
            font: inherit;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transform-origin: center center;
            transition:
                box-shadow 0.22s ease,
                transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.2s ease;
        }
        .det-ad-slot-plus {
            font-size: 2.35rem;
            font-weight: 300;
            line-height: 1;
            opacity: 0.88;
            user-select: none;
        }
        .det-ad-slot:hover,
        .det-ad-slot:focus-visible {
            outline: none;
            box-shadow:
                0 0 0 1px rgba(255, 248, 200, 0.78),
                0 0 28px rgba(212, 175, 55, 0.42),
                0 0 48px rgba(201, 162, 39, 0.24),
                0 10px 32px rgba(15, 23, 42, 0.14);
            filter: brightness(1.03);
        }
        .det-ad-slot--hot {
            z-index: 3;
            box-shadow:
                0 0 0 2px rgba(255, 236, 160, 0.88),
                0 0 32px rgba(212, 175, 55, 0.48),
                0 0 56px rgba(201, 162, 39, 0.34),
                0 12px 36px rgba(15, 23, 42, 0.16);
            animation: det-ad-slot-hot-glow 2.2s ease-in-out infinite;
        }
        @keyframes det-ad-slot-hot-glow {
            0%,
            100% {
                filter: brightness(1.02) drop-shadow(0 0 10px rgba(212, 175, 55, 0.32));
            }
            50% {
                filter: brightness(1.08) drop-shadow(0 0 22px rgba(241, 196, 15, 0.42));
            }
        }
        .det-ad-slot--filled {
            padding: 8px;
            box-sizing: border-box;
            overflow: hidden;
            text-decoration: none;
            cursor: pointer;
            background-image:
                linear-gradient(160deg, #ffffff 0%, #fffef9 45%, #ffffff 100%),
                linear-gradient(
                    145deg,
                    #fff6c4 0%,
                    #e8c547 18%,
                    #d4af37 40%,
                    #c9a227 52%,
                    #f0e68c 72%,
                    #b8860b 100%
                );
            background-origin: border-box;
            background-clip: padding-box, border-box;
        }
        .det-ad-slot--filled:hover,
        .det-ad-slot--filled:focus-visible {
            box-shadow:
                0 0 0 1px rgba(255, 248, 200, 0.82),
                0 0 32px rgba(212, 175, 55, 0.45),
                0 0 52px rgba(201, 162, 39, 0.28),
                0 12px 36px rgba(15, 23, 42, 0.15);
            filter: brightness(1.02);
        }
        .det-ad-slot-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            pointer-events: none;
        }
        /* Botão de CTA "Anunciar aqui" abaixo da faixa */
        .det-ad-slots-cta-add {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            margin-top: 10px;
            padding: 9px 16px;
            border-radius: 10px;
            border: 2px dashed rgba(212, 175, 55, 0.55);
            background: rgba(212, 175, 55, 0.07);
            color: rgba(180, 140, 30, 0.9);
            font-size: 0.82rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            cursor: pointer;
            transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
            box-sizing: border-box;
        }
        .det-ad-slots-cta-add:hover,
        .det-ad-slots-cta-add:focus-visible {
            background: rgba(212, 175, 55, 0.14);
            border-color: rgba(212, 175, 55, 0.85);
            color: rgba(220, 175, 40, 1);
            outline: none;
        }
        .det-ad-slots-cta-add__plus {
            font-size: 1.2rem;
            font-weight: 300;
            line-height: 1;
        }
        /* Destaque fixo dentro da faixa (viewport) — ciclo 6s + 6s (JS: CAROUSEL_SCROLL_PHASE_MS + SPOTLIGHT_HOLD) */
        .det-ad-slots-spotlight-mount--inline {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 30;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            pointer-events: none;
            opacity: 1;
            transform: none;
            transition: none;
        }
        .det-ad-slots-spotlight-mount--inline.det-ad-slots-spotlight-mount--open {
            pointer-events: auto;
        }
        .det-ad-slots-spotlight-mount--inline.det-ad-slots-spotlight-mount--closing {
            pointer-events: none;
        }
        .det-ad-slots-spotlight-frame {
            position: relative;
            flex-shrink: 0;
            opacity: 0;
            transform: scale(0.86);
            transition:
                opacity 0.38s ease,
                transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
            border-radius: 18px;
        }
        .det-ad-slots-spotlight-timer-glow {
            position: absolute;
            inset: -6px;
            border-radius: 22px;
            z-index: 0;
            pointer-events: none;
            opacity: 0.72;
            box-shadow:
                0 0 14px 4px rgba(251, 191, 36, 0.42),
                0 0 28px 8px rgba(212, 175, 55, 0.22);
            animation: det-ad-spot-timer-glow-pulse 1.25s ease-in-out infinite;
        }
        .det-ad-slots-spotlight-timer-glow--static {
            animation: none;
            opacity: 0.5;
        }
        @keyframes det-ad-spot-timer-glow-pulse {
            0%,
            100% {
                opacity: 0.42;
                filter: blur(0);
                transform: scale(1);
            }
            50% {
                opacity: 0.95;
                filter: blur(0.5px);
                transform: scale(1.02);
            }
        }
        .det-ad-slots-spotlight-camp-badge {
            position: absolute;
            top: 5px;
            left: 5px;
            z-index: 6;
            display: inline-flex;
            align-items: center;
            gap: 2px;
            max-width: calc(100% - 44px);
            padding: 2px 6px 2px 4px;
            border-radius: 6px;
            background: rgba(15, 15, 18, 0.92);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
            pointer-events: none;
            line-height: 1;
        }
        .det-ad-slots-spotlight-camp-badge__bolt {
            font-size: 0.55rem;
            line-height: 1;
            opacity: 0.95;
            filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.55));
        }
        .det-ad-slots-spotlight-camp-badge__days {
            font-size: 0.58rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            color: #fafafa;
            font-variant-numeric: tabular-nums;
            animation: det-ad-spot-camp-pulse 1.1s ease-in-out infinite;
        }
        @keyframes det-ad-spot-camp-pulse {
            0%,
            100% {
                opacity: 0.82;
                transform: scale(1);
            }
            50% {
                opacity: 1;
                transform: scale(1.06);
            }
        }
        .det-ad-slots-spotlight-mount--inline.det-ad-slots-spotlight-mount--open .det-ad-slots-spotlight-frame {
            opacity: 1;
            transform: scale(1);
        }
        .det-ad-slots-spotlight-mount--inline.det-ad-slots-spotlight-mount--closing .det-ad-slots-spotlight-frame {
            opacity: 0;
            transform: scale(0.92);
        }
        /* Legado: overlay em body (não usado na faixa actual) */
        .det-ad-slots-spotlight-mount:not(.det-ad-slots-spotlight-mount--inline) {
            position: fixed;
            z-index: 10050;
            pointer-events: none;
            box-sizing: border-box;
            opacity: 0;
            transform: scale(0.86);
            transition:
                opacity 0.38s ease,
                transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .det-ad-slots-spotlight-mount:not(.det-ad-slots-spotlight-mount--inline).det-ad-slots-spotlight-mount--open {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
        }
        .det-ad-slots-spotlight-mount:not(.det-ad-slots-spotlight-mount--inline).det-ad-slots-spotlight-mount--closing {
            opacity: 0;
            transform: scale(0.92);
            pointer-events: none;
        }
        .det-ad-slots-spotlight-countdown {
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            min-width: 1.5em;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            line-height: 1.25;
            letter-spacing: 0.02em;
            color: rgba(71, 58, 40, 0.92);
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(212, 175, 55, 0.45);
            box-shadow: 0 1px 6px rgba(15, 23, 42, 0.12);
            pointer-events: none;
            text-align: center;
        }
        .det-ad-close-btn__glyph {
            display: block;
            font-weight: 900;
            line-height: 1;
            transform: translateZ(0);
        }
        .det-ad-close-btn--pulse {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff !important;
            background: #dc2626 !important;
            border: none !important;
            border-radius: 50% !important;
            box-shadow: none !important;
            animation: det-ad-close-pulse 1.4s ease-in-out infinite;
        }
        @keyframes det-ad-close-pulse {
            0%, 100% { opacity: 0.85; }
            50% { opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .det-ad-close-btn--pulse {
                animation: none;
            }
        }
        .det-ad-slots-spotlight-close.det-ad-close-btn--pulse {
            width: 14px;
            height: 14px;
            top: 2px;
            right: 2px;
            z-index: 8;
            font-size: 0.5rem;
        }
        .det-ad-slots-spotlight-close {
            position: absolute;
            top: 4px;
            right: 4px;
            z-index: 4;
            width: 30px;
            height: 30px;
            border: 0;
            border-radius: 999px;
            padding: 0;
            margin: 0;
            cursor: pointer;
            font-size: 1.2rem;
            line-height: 1;
            color: rgba(55, 48, 40, 0.88);
            background: rgba(255, 255, 255, 0.94);
            box-shadow: 0 1px 8px rgba(15, 23, 42, 0.2);
        }
        .det-ad-slots-spotlight-close.det-ad-close-btn--pulse:hover,
        .det-ad-slots-spotlight-close.det-ad-close-btn--pulse:focus-visible {
            background: linear-gradient(165deg, #f87171 0%, #ef4444 50%, #dc2626 100%) !important;
            color: #fff !important;
            outline: none;
            filter: brightness(1.06);
        }
        .det-ad-slots-spotlight-close:hover:not(.det-ad-close-btn--pulse) {
            background: #fff;
            color: #0f172a;
        }
        .det-ad-slots-spotlight-close:focus-visible {
            outline: 2px solid rgba(14, 165, 233, 0.85);
            outline-offset: 2px;
        }
        .det-topbar-carousel__dismiss.det-ad-close-btn--pulse {
            position: absolute;
            top: -1px;
            right: -1px;
            z-index: 12;
            width: 12px;
            height: 12px;
            padding: 0;
            margin: 0;
            cursor: pointer;
            font-size: 0.4rem;
            line-height: 1;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        @media (min-width: 1024px) {
            .det-topbar-carousel__dismiss {
                display: none !important;
            }
        }
        .det-ad-slots-zone--dismissed {
            display: none !important;
        }
        .det-ad-zone-dismiss.det-ad-close-btn--pulse {
            position: absolute;
            top: 3px;
            right: 3px;
            z-index: 42;
            width: 14px;
            height: 14px;
            padding: 0;
            margin: 0;
            cursor: pointer;
            font-size: 0.5rem;
            line-height: 1;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        @media (max-width: 1023px) {
            .det-ad-zone-dismiss.det-ad-close-btn--pulse {
                top: 2px;
                right: 2px;
                width: 12px;
                height: 12px;
                font-size: 0.4rem;
            }
        }
        .det-ad-support-3d-wrap {
            position: absolute;
            inset: 0;
            z-index: 28;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 10px 12px;
            box-sizing: border-box;
            pointer-events: auto;
        }
        .det-ad-support-3d-scene {
            position: relative;
            width: min(220px, 72vmin);
            min-height: 120px;
            flex-shrink: 0;
            perspective: 960px;
        }
        .det-ad-support-3d-rot {
            position: absolute;
            inset: 4px;
            transform-style: preserve-3d;
            animation: det-support-3d-spinY 8s linear infinite;
            will-change: transform;
            pointer-events: none;
            z-index: 0;
        }
        .det-ad-support-3d-plate {
            width: 100%;
            height: 100%;
            min-height: 112px;
            border-radius: 18px;
            background: linear-gradient(
                135deg,
                rgba(251, 191, 36, 0.55) 0%,
                rgba(14, 165, 233, 0.45) 35%,
                rgba(168, 85, 247, 0.38) 70%,
                rgba(251, 113, 133, 0.42) 100%
            );
            box-shadow:
                0 0 0 2px rgba(255, 255, 255, 0.35) inset,
                0 20px 40px rgba(2, 132, 199, 0.25);
            transform: translateZ(0);
            filter: saturate(1.15);
        }
        @keyframes det-support-3d-spinY {
            from {
                transform: rotateY(0deg);
            }
            to {
                transform: rotateY(360deg);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .det-ad-support-3d-rot {
                animation: none;
                transform: rotateY(0deg);
            }
        }
        .det-ad-support-3d-card {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            width: 86%;
            min-height: 112px;
            padding: 16px 18px;
            border-radius: 16px;
            box-sizing: border-box;
            background: linear-gradient(150deg, rgba(255, 254, 249, 0.97) 0%, rgba(224, 242, 254, 0.97) 38%, rgba(254, 243, 199, 0.96) 100%);
            border: 2px solid rgba(251, 191, 36, 0.55);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.65) inset,
                0 18px 44px rgba(2, 132, 199, 0.18),
                0 10px 28px rgba(245, 158, 11, 0.2);
            backdrop-filter: blur(6px);
        }
        .det-ad-support-3d-title {
            margin: 0 0 6px;
            font-size: 1.08rem;
            font-weight: 900;
            letter-spacing: 0.02em;
            text-align: center;
            color: #0c4a6e;
            line-height: 1.25;
        }
        .det-ad-support-3d-sub {
            margin: 0;
            font-size: 0.72rem;
            font-weight: 600;
            line-height: 1.4;
            text-align: center;
            color: #475569;
        }
        .det-ad-support-3d-cta {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 42px;
            padding: 0 18px;
            border-radius: 999px;
            border: none;
            font: inherit;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            cursor: pointer;
            color: #fff;
            background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 48%, #2563eb 100%);
            box-shadow: 0 8px 24px rgba(14, 165, 233, 0.42);
            transition: filter 0.18s ease, transform 0.14s ease;
        }
        .det-ad-support-3d-cta:hover,
        .det-ad-support-3d-cta:focus-visible {
            filter: brightness(1.06);
            outline: none;
        }
        .det-ad-support-3d-cta:active {
            transform: scale(0.98);
        }
        html[data-det-theme='dark'] .det-ad-support-3d-plate {
            background: linear-gradient(
                135deg,
                rgba(251, 191, 36, 0.35) 0%,
                rgba(14, 165, 233, 0.32) 40%,
                rgba(99, 102, 241, 0.35) 100%
            );
        }
        html[data-det-theme='dark'] .det-ad-support-3d-card {
            background: linear-gradient(150deg, rgba(30, 41, 59, 0.96) 0%, rgba(12, 74, 110, 0.9) 48%, rgba(41, 37, 36, 0.94) 100%);
            border-color: rgba(251, 191, 36, 0.35);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.06) inset,
                0 18px 44px rgba(0, 0, 0, 0.45);
        }
        html[data-det-theme='dark'] .det-ad-support-3d-title {
            color: #e0f2fe;
        }
        html[data-det-theme='dark'] .det-ad-support-3d-sub {
            color: #cbd5e1;
        }
        .det-ad-slots-spotlight-mount--inline::after {
            display: none;
        }
        .det-ad-slots-spotlight-frame::after,
        .det-ad-slots-spotlight-mount:not(.det-ad-slots-spotlight-mount--inline)::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 22px;
            pointer-events: none;
            background: linear-gradient(
                105deg,
                transparent 0%,
                rgba(255, 248, 200, 0) 35%,
                rgba(255, 252, 220, 0.55) 48%,
                rgba(255, 255, 255, 0.75) 50%,
                rgba(255, 248, 200, 0.5) 52%,
                transparent 65%
            );
            animation: det-ad-slots-shine 2.1s ease-in-out infinite;
            mix-blend-mode: screen;
        }
        @keyframes det-ad-slots-shine {
            0% {
                transform: translateX(-130%) skewX(-16deg);
                opacity: 0;
            }
            12% {
                opacity: 0.9;
            }
            100% {
                transform: translateX(200%) skewX(-16deg);
                opacity: 0;
            }
        }
        .det-ad-slots-spotlight-card {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            border-radius: 18px;
            padding: 12px;
            box-sizing: border-box;
            text-decoration: none;
            border: 3px solid transparent;
            background-image:
                linear-gradient(160deg, #fffef9 0%, #faf6ec 38%, #ffffff 100%),
                linear-gradient(
                    145deg,
                    #fff6c4 0%,
                    #e8c547 18%,
                    #d4af37 40%,
                    #c9a227 52%,
                    #f0e68c 72%,
                    #b8860b 100%
                );
            background-origin: border-box;
            background-clip: padding-box, border-box;
            box-shadow:
                0 0 0 1px rgba(255, 236, 160, 0.65),
                0 0 22px rgba(212, 175, 55, 0.45),
                0 0 48px rgba(201, 162, 39, 0.28),
                0 14px 36px rgba(15, 23, 42, 0.18);
            overflow: hidden;
            position: relative;
            z-index: 1;
        }
        .det-ad-slots-spotlight-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            pointer-events: none;
            filter: drop-shadow(0 2px 8px rgba(15, 23, 42, 0.12));
        }
        @media (prefers-reduced-motion: reduce) {
            .det-ad-slots-spotlight-timer-glow {
                animation: none;
            }
            .det-ad-slots-spotlight-camp-badge__days {
                animation: none;
            }
            .det-ad-slots-spotlight-mount:not(.det-ad-slots-spotlight-mount--inline) {
                transition: none;
                opacity: 1;
                transform: none;
            }
            .det-ad-slots-spotlight-mount:not(.det-ad-slots-spotlight-mount--inline).det-ad-slots-spotlight-mount--closing {
                opacity: 0;
                transform: none;
            }
            .det-ad-slots-spotlight-frame {
                transition: none;
                opacity: 1;
                transform: none;
            }
            .det-ad-slots-spotlight-mount--inline.det-ad-slots-spotlight-mount--closing .det-ad-slots-spotlight-frame {
                opacity: 0;
            }
            .det-ad-slots-spotlight-frame::after,
            .det-ad-slots-spotlight-mount:not(.det-ad-slots-spotlight-mount--inline)::after {
                animation: none;
            }
        }
        html[data-det-theme='dark'] .det-ad-slots-spotlight-countdown {
            color: rgba(254, 243, 199, 0.95);
            background: rgba(30, 41, 59, 0.94);
            border-color: rgba(251, 191, 36, 0.4);
            box-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
        }
        html[data-det-theme='dark'] .det-ad-slots-spotlight-close:not(.det-ad-close-btn--pulse) {
            color: rgba(248, 250, 252, 0.92);
            background: rgba(30, 41, 59, 0.92);
            box-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
        }
        html[data-det-theme='dark'] .det-ad-slots-spotlight-close:not(.det-ad-close-btn--pulse):hover {
            background: rgba(51, 65, 85, 0.96);
            color: #f8fafc;
        }
        .det-ad-slots-hint {
            margin: 2px 0 0;
            font-size: 0.68rem;
            color: var(--muted);
            line-height: 1.35;
            text-align: center;
            min-height: 2.6em;
        }
        @media (prefers-reduced-motion: reduce) {
            .det-ad-slots-viewport {
                -webkit-mask-image: none;
                mask-image: none;
                overflow-x: auto;
                overflow-y: hidden;
                aspect-ratio: auto;
                max-height: none;
                justify-content: flex-start;
                scrollbar-width: thin;
            }
            .det-ad-slot--hot {
                animation: none;
            }
        }
        .det-linux-tabbar {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 0 0 10px;
        }
        .det-linux-tab {
            flex: 1 1 auto;
            min-width: 0;
            font: inherit;
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            padding: 7px 8px;
            border-radius: 9px;
            border: 1px solid rgba(56, 189, 248, 0.28);
            background: rgba(15, 23, 42, 0.35);
            color: var(--muted);
            cursor: pointer;
            transition: background 0.18s, color 0.18s, border-color 0.18s;
        }
        .det-linux-tab:hover,
        .det-linux-tab:focus-visible {
            color: var(--text);
            border-color: rgba(125, 211, 252, 0.45);
            outline: none;
        }
        .det-linux-tab--active {
            color: var(--glow);
            background: rgba(14, 165, 233, 0.16);
            border-color: rgba(56, 189, 248, 0.5);
        }
        .det-linux-panel {
            margin-top: 2px;
        }
        .det-linux-panel-disc {
            margin-top: 8px;
        }
        .det-linux-comm-row {
            display: flex;
            align-items: stretch;
            gap: 6px;
            width: 100%;
            box-sizing: border-box;
        }
        .det-sidebar-line--comm {
            flex: 1 1 auto;
            min-width: 0;
            text-decoration: none;
            color: inherit;
        }
        .det-linux-plusone {
            flex: 0 0 auto;
            align-self: center;
            font: inherit;
            font-weight: 800;
            font-size: 0.72rem;
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid rgba(34, 197, 94, 0.45);
            background: rgba(34, 197, 94, 0.12);
            color: #22c55e;
            cursor: pointer;
            transition: background 0.15s, opacity 0.15s;
        }
        .det-linux-plusone:hover:not(:disabled),
        .det-linux-plusone:focus-visible:not(:disabled) {
            background: rgba(34, 197, 94, 0.22);
            outline: none;
        }
        .det-linux-plusone:disabled {
            opacity: 0.55;
            cursor: default;
        }
        .det-linux-plusone--done {
            border-color: rgba(125, 211, 252, 0.35);
            color: var(--glow);
            background: rgba(14, 165, 233, 0.12);
        }
        .det-linux-vote-n {
            flex: 0 0 auto;
            align-self: center;
            min-width: 1.6rem;
            text-align: center;
            font-weight: 800;
            font-size: 0.78rem;
            color: var(--accent);
        }
        a.det-sidebar-line {
            text-decoration: none;
            color: inherit;
            box-sizing: border-box;
        }
        a.det-sidebar-line:hover,
        a.det-sidebar-line:focus-visible {
            color: inherit;
        }
        .det-sidebar-disclaimer {
            margin: 10px 0 0;
            font-size: 0.65rem;
            line-height: 1.4;
            color: var(--muted);
            opacity: 0.92;
        }
        .det-sidebar-source {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 12px;
            font-size: 0.74rem;
            font-weight: 700;
            color: var(--glow);
            text-decoration: none;
            border: 1px solid rgba(56, 189, 248, 0.35);
            padding: 8px 12px;
            border-radius: 10px;
            background: rgba(14, 165, 233, 0.1);
            transition: background 0.2s, border-color 0.2s;
        }
        .det-sidebar-source:hover,
        .det-sidebar-source:focus-visible {
            background: rgba(56, 189, 248, 0.16);
            border-color: rgba(125, 211, 252, 0.45);
            outline: none;
        }

        .det-footer-block {
            margin: 40px 0 28px;
            padding: 22px 18px;
            border-radius: 14px;
            border: 1px solid var(--border);
            background: var(--card);
            box-shadow: var(--card-3d);
        }
        .det-footer-block h2 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--accent);
            margin: 0 0 10px;
        }
        .det-footer-block p {
            font-size: 0.84rem;
            color: var(--muted);
            line-height: 1.5;
            margin: 0 0 14px;
        }
        .det-btn-contact {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 22px;
            border-radius: 10px;
            border: 1px solid rgba(0, 163, 255, 0.45);
            background: linear-gradient(180deg, rgba(0, 163, 255, 0.22), rgba(255, 255, 255, 0.92));
            color: var(--glow);
            font: inherit;
            font-size: 0.88rem;
            font-weight: 700;
            cursor: pointer;
            touch-action: manipulation;
        }
        .det-btn-contact:hover,
        .det-btn-contact:focus-visible {
            background: rgba(0, 163, 255, 0.3);
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .det-footer-mail-hint {
            margin-top: 12px !important;
            font-size: 0.78rem !important;
        }
        .det-footer-mail-hint a {
            color: var(--accent);
            font-weight: 600;
        }
        .det-footer-about-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 0 0 18px;
            font-size: 0.86rem;
            font-weight: 600;
            color: var(--accent);
            text-decoration: none;
        }
        .det-footer-about-link:hover {
            text-decoration: underline;
            color: var(--glow);
        }
        .det-footer-social {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 14px;
            margin: 18px 0;
            padding: 14px 0;
            border-top: 1px solid rgba(0, 163, 255, 0.15);
            border-bottom: 1px solid rgba(0, 163, 255, 0.15);
        }
        .det-footer-social-label {
            width: 100%;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--muted);
        }
        .det-footer-social a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--text);
            text-decoration: none;
            font-size: 0.82rem;
            font-weight: 600;
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid rgba(148, 163, 184, 0.2);
            background: rgba(226, 232, 240, 0.82);
        }
        .det-footer-social a:hover {
            border-color: var(--accent);
            color: var(--glow);
        }
        .det-footer-social .social-icon {
            width: 18px;
            height: 18px;
        }
        .det-footer-meta {
            text-align: center;
            font-size: 0.78rem;
            color: var(--muted);
            line-height: 1.6;
        }
        .det-footer-meta a {
            color: var(--accent);
        }
        .det-contact-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 12000;
            background: rgba(15, 23, 42, 0.35);
            align-items: center;
            justify-content: center;
            padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
        }
        .det-contact-overlay.visible {
            display: flex;
        }
        .det-contact-modal {
            width: 100%;
            max-width: 440px;
            max-height: calc(100vh - 32px);
            overflow-y: auto;
            background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 22px 20px 20px;
            box-shadow: var(--card-3d-hover), 0 24px 48px rgba(2, 132, 199, 0.12);
        }
        .det-contact-modal h3 {
            margin: 0 0 8px;
            font-size: 1.1rem;
            color: var(--accent);
        }
        .det-contact-modal .det-contact-protocol {
            font-size: 0.76rem;
            color: var(--muted);
            line-height: 1.45;
            margin: 0 0 14px;
        }
        .det-contact-modal label {
            display: block;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--text);
            margin: 10px 0 4px;
        }
        .det-contact-modal input,
        .det-contact-modal select,
        .det-contact-modal textarea {
            width: 100%;
            box-sizing: border-box;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--det-field);
            color: var(--text);
            font: inherit;
            font-size: 0.86rem;
        }
        .det-contact-modal textarea {
            min-height: 120px;
            resize: vertical;
        }
        .det-contact-actions {
            display: flex;
            gap: 10px;
            margin-top: 16px;
            flex-wrap: wrap;
        }
        .det-contact-actions button {
            flex: 1;
            min-width: 120px;
            padding: 10px 14px;
            border-radius: 8px;
            font: inherit;
            font-weight: 700;
            font-size: 0.84rem;
            cursor: pointer;
            touch-action: manipulation;
        }
        .det-contact-cancel {
            border: 1px solid var(--border);
            background: transparent;
            color: var(--muted);
        }
        .det-contact-submit {
            border: 1px solid rgba(0, 163, 255, 0.5);
            background: rgba(0, 163, 255, 0.2);
            color: var(--glow);
        }
        .det-contact-submit:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }
        .det-contact-success,
        .det-contact-error {
            display: none;
            margin-top: 12px;
            font-size: 0.82rem;
            line-height: 1.45;
        }
        .det-contact-success.visible {
            display: block;
            color: var(--ok);
        }
        .det-contact-error.visible {
            display: block;
            color: var(--bad);
        }

        /* ═══ Tema escuro · painel suave (ardósia / Zabbix-like: menos preto, menos saturação) ═══ */
        html[data-det-theme='dark'] {
            color-scheme: dark;
            --bg: #1e2228;
            --card: rgba(42, 47, 56, 0.94);
            --card-glass: rgba(48, 54, 64, 0.92);
            --border: rgba(255, 255, 255, 0.085);
            --border-strong: rgba(255, 255, 255, 0.14);
            --accent: #8b95a8;
            --accent-catellix: #9ca8b8;
            --glow: #c5ccd6;
            --text: #e8eaed;
            --muted: #9aa3af;
            --ok: #7dcea0;
            --warn: #c9b896;
            --bad: #c9a09a;
            --det-field: rgba(48, 54, 64, 0.95);
            --det-field-border: rgba(255, 255, 255, 0.1);
            --card-3d:
                0 1px 0 rgba(255, 255, 255, 0.055) inset,
                0 4px 18px rgba(0, 0, 0, 0.28),
                0 0 0 1px rgba(255, 255, 255, 0.06);
            --card-3d-hover:
                0 1px 0 rgba(255, 255, 255, 0.07) inset,
                0 8px 26px rgba(0, 0, 0, 0.34);
        }
        /* Faixas de latência no escuro: tons contidos (sem roxo/ciano “gaming”) */
        html[data-det-theme='dark'] .tile.lat-tier-ex,
        html[data-det-theme='dark'] .list-row.lat-tier-ex {
            --lat-glow: rgba(52, 211, 153, 0.06);
            --lat-glow2: rgba(16, 185, 129, 0.03);
            --lat-edge: rgba(52, 211, 153, 0.2);
            --lat-edge-soft: rgba(255, 255, 255, 0.055);
            --lat-poster-top: rgba(52, 211, 153, 0.05);
            --lat-val: #6ee7b7;
            --tile-edge: rgba(52, 211, 153, 0.18);
        }
        html[data-det-theme='dark'] .tile.lat-tier-good,
        html[data-det-theme='dark'] .list-row.lat-tier-good {
            --lat-glow: rgba(45, 212, 191, 0.06);
            --lat-glow2: rgba(20, 184, 166, 0.03);
            --lat-edge: rgba(45, 212, 191, 0.2);
            --lat-edge-soft: rgba(255, 255, 255, 0.055);
            --lat-poster-top: rgba(45, 212, 191, 0.05);
            --lat-val: #5eead4;
            --tile-edge: rgba(45, 212, 191, 0.18);
        }
        html[data-det-theme='dark'] .tile.lat-tier-mid,
        html[data-det-theme='dark'] .list-row.lat-tier-mid {
            --lat-glow: rgba(212, 196, 168, 0.07);
            --lat-glow2: rgba(161, 139, 112, 0.04);
            --lat-edge: rgba(212, 196, 168, 0.22);
            --lat-edge-soft: rgba(255, 255, 255, 0.055);
            --lat-poster-top: rgba(212, 196, 168, 0.07);
            --lat-val: #d4c4a8;
            --tile-edge: rgba(180, 165, 130, 0.2);
        }
        html[data-det-theme='dark'] .tile.lat-tier-warn,
        html[data-det-theme='dark'] .list-row.lat-tier-warn {
            --lat-glow: rgba(232, 165, 152, 0.07);
            --lat-glow2: rgba(180, 100, 90, 0.04);
            --lat-edge: rgba(232, 165, 152, 0.22);
            --lat-edge-soft: rgba(255, 255, 255, 0.055);
            --lat-poster-top: rgba(200, 110, 100, 0.08);
            --lat-val: #e8b4a8;
            --tile-edge: rgba(220, 140, 125, 0.2);
        }
        html[data-det-theme='dark'] .tile.lat-tier-bad,
        html[data-det-theme='dark'] .list-row.lat-tier-bad {
            --lat-glow: rgba(248, 113, 113, 0.06);
            --lat-glow2: rgba(185, 80, 80, 0.035);
            --lat-edge: rgba(248, 150, 140, 0.2);
            --lat-edge-soft: rgba(255, 255, 255, 0.055);
            --lat-poster-top: rgba(200, 90, 90, 0.08);
            --lat-val: #d4a5a5;
            --tile-edge: rgba(220, 120, 115, 0.2);
        }
        html[data-det-theme='dark'] .tile.lat-tier-timeout,
        html[data-det-theme='dark'] .list-row.lat-tier-timeout {
            --lat-glow: rgba(148, 163, 184, 0.08);
            --lat-glow2: rgba(100, 116, 139, 0.04);
            --lat-edge: rgba(148, 163, 184, 0.28);
            --lat-edge-soft: rgba(255, 255, 255, 0.055);
            --lat-poster-top: rgba(100, 116, 139, 0.1);
            --lat-val: #a8b4c4;
            --tile-edge: rgba(120, 135, 155, 0.22);
        }
        html[data-det-theme='dark'] .tile.lat-tier-fail,
        html[data-det-theme='dark'] .list-row.lat-tier-fail {
            --lat-glow: rgba(248, 113, 113, 0.07);
            --lat-glow2: rgba(160, 60, 60, 0.04);
            --lat-edge: rgba(248, 140, 130, 0.22);
            --lat-edge-soft: rgba(255, 255, 255, 0.055);
            --lat-poster-top: rgba(180, 70, 70, 0.09);
            --lat-val: #e8a598;
            --tile-edge: rgba(220, 100, 95, 0.2);
        }
        html[data-det-theme='dark'] .tile.lat-tier-unk,
        html[data-det-theme='dark'] .list-row.lat-tier-unk {
            --lat-glow: rgba(113, 113, 122, 0.08);
            --lat-glow2: rgba(63, 63, 70, 0.04);
            --lat-edge: rgba(161, 161, 170, 0.25);
            --lat-edge-soft: rgba(255, 255, 255, 0.055);
            --lat-poster-top: rgba(82, 82, 91, 0.1);
            --lat-val: #a1a1aa;
            --tile-edge: rgba(113, 113, 122, 0.22);
        }
        html[data-det-theme='dark'] .ctrl-bg-3d-floor {
            background-color: #252a32;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
        }
        html[data-det-theme='dark'] .ctrl-bg-3d-curtain {
            background: linear-gradient(
                180deg,
                rgba(30, 34, 40, 0.92) 0%,
                rgba(30, 34, 40, 0.38) 28%,
                transparent 48%,
                transparent 52%,
                rgba(30, 34, 40, 0.28) 74%,
                rgba(30, 34, 40, 0.9) 100%
            );
        }
        html[data-det-theme='dark'] {
            scrollbar-color: rgba(130, 138, 152, 0.45) rgba(36, 40, 48, 0.95);
        }
        html[data-det-theme='dark']::-webkit-scrollbar-track {
            background: linear-gradient(180deg, #2a3038 0%, #323842 100%);
            border-left: 1px solid rgba(255, 255, 255, 0.06);
        }
        html[data-det-theme='dark']::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(130, 138, 152, 0.5) 0%, rgba(100, 108, 122, 0.42) 100%);
            border: 2px solid rgba(36, 40, 48, 0.95);
        }
        html[data-det-theme='dark']::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(156, 164, 178, 0.55) 0%, rgba(120, 128, 142, 0.48) 100%);
        }
        html[data-det-theme='dark'] body::before {
            background: radial-gradient(ellipse 110% 55% at 50% -15%, rgba(255, 255, 255, 0.055), transparent 55%);
        }
        html[data-det-theme='dark'] .det-top-action-bar {
            background: linear-gradient(180deg, rgba(42, 47, 56, 0.97) 0%, rgba(34, 38, 46, 0.95) 100%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.09);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }
        html[data-det-theme='dark'] .det-locale-switch {
            background: rgba(48, 54, 64, 0.92);
            border-color: rgba(255, 255, 255, 0.11);
        }
        html[data-det-theme='dark'] .det-locale-switch button {
            color: var(--muted);
        }
        html[data-det-theme='dark'] .det-theme-toggle {
            background: rgba(48, 54, 64, 0.92);
            border-color: rgba(255, 255, 255, 0.11);
        }
        html[data-det-theme='dark'] .det-theme-toggle[aria-pressed='true'] {
            background: linear-gradient(135deg, #4a5260, #3a414c);
            border-color: rgba(255, 255, 255, 0.16);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        html[data-det-theme='dark'] .det-top-bar-home {
            background: rgba(48, 54, 64, 0.92);
            border-color: rgba(255, 255, 255, 0.11);
            color: #7dd3fc;
        }
        html[data-det-theme='dark'] .det-top-bar-home:hover,
        html[data-det-theme='dark'] .det-top-bar-home:focus-visible {
            background: rgba(58, 65, 76, 0.95);
            border-color: rgba(56, 189, 248, 0.35);
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15);
            color: #bae6fd;
        }
        html[data-det-theme='dark'] .det-topbar-carousel__frame {
            background: rgba(48, 54, 64, 0.92);
            border-color: rgba(180, 160, 100, 0.2);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
        }
        html[data-det-theme='dark'] .det-topbar-carousel__item--center .det-topbar-carousel__frame {
            border-color: rgba(218, 165, 32, 0.5);
            box-shadow:
                0 0 10px rgba(218, 165, 32, 0.15),
                0 0 3px rgba(218, 165, 32, 0.08);
            background: linear-gradient(135deg, rgba(60, 55, 40, 0.95) 0%, rgba(48, 54, 64, 0.95) 100%);
        }
        html[data-det-theme='dark'] .det-locale-switch button.is-active {
            background: linear-gradient(135deg, #4a5260, #5c6574);
            color: #f4f5f7;
        }
        html[data-det-theme='dark'] .det-bar-mascote-btn {
            background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.1), #2a3038);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.11),
                0 4px 14px rgba(0, 0, 0, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }
        html[data-det-theme='dark'] .cx-promo-slot--empty::before {
            color: rgba(148, 163, 184, 0.4);
        }
        html[data-det-theme='dark'] .det-bar-report-cta {
            color: #f4f5f7;
            background: linear-gradient(135deg, #3a414c 0%, #2f3540 100%);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.07);
            animation: none;
        }
        html[data-det-theme='dark'] .det-bar-report-cta:hover {
            filter: brightness(1.06);
        }
        html[data-det-theme='dark'] .det-bar-report-cta__pulse {
            opacity: 0.2;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent);
            animation: none;
        }
        html[data-det-theme='dark'] .tile-report-tag {
            background: linear-gradient(180deg, #3d4450 0%, #2f3540 100%);
            color: #eceef2;
            box-shadow: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        }
        html[data-det-theme='dark'] .tile-report-tag:hover,
        html[data-det-theme='dark'] .tile-report-tag:focus-visible {
            filter: none;
            background: linear-gradient(180deg, #4a5260 0%, #3a414c 100%);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
        }
        /* Carrosséis: sem faixa clara nem animação infinita (evita “travar” e contraste ruim) */
        html[data-det-theme='dark'] .shelf-scroll-hint {
            display: none !important;
        }
        html[data-det-theme='dark'] .row-scroll {
            scrollbar-color: rgba(130, 138, 152, 0.4) rgba(36, 40, 48, 0.92);
        }
        html[data-det-theme='dark'] .row-scroll::-webkit-scrollbar-track {
            background: rgba(36, 40, 48, 0.92);
            box-shadow: none;
        }
        html[data-det-theme='dark'] .row-scroll::-webkit-scrollbar-thumb {
            background: rgba(120, 128, 142, 0.38);
            border: 2px solid rgba(36, 40, 48, 0.95);
            box-shadow: none;
        }
        html[data-det-theme='dark'] .row-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(150, 158, 172, 0.48);
            box-shadow: none;
        }
        html[data-det-theme='dark'] .tile {
            background: linear-gradient(165deg, #323842 0%, #2a3038 100%);
            border-color: rgba(255, 255, 255, 0.09);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
        }
        html[data-det-theme='dark'] .tile[class*='lat-tier-'] {
            background: linear-gradient(168deg, #343a44 0%, #2c323c 52%, #262b33 100%);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--lat-edge-soft);
        }
        html[data-det-theme='dark'] .tile[class*='lat-tier-']::before,
        html[data-det-theme='dark'] .tile[class*='lat-tier-']::after {
            display: none;
        }
        html[data-det-theme='dark'] .tile[class*='lat-tier-'] .poster {
            background: linear-gradient(
                158deg,
                var(--lat-poster-top),
                rgba(46, 52, 62, 0.96) 52%,
                rgba(34, 38, 46, 0.99) 100%
            );
        }
        html[data-det-theme='dark'] .tile .poster {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(40, 45, 54, 0.96));
        }
        /* Chip claro: logos escuros (PNG/SVG) somem em fundo grafite — mesmo truque dos painéis tipo Zabbix */
        html[data-det-theme='dark'] .tile .poster .poster-logo-wrap {
            align-self: center;
            padding: 6px 10px;
            border-radius: 12px;
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(236, 240, 245, 0.94) 100%);
            box-shadow:
                inset 0 0 0 1px rgba(0, 0, 0, 0.06),
                0 1px 3px rgba(0, 0, 0, 0.12);
        }
        html[data-det-theme='dark'] .tile .poster .poster-logo-wrap img {
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
        }
        html[data-det-theme='dark'] .tile .poster .poster-rank {
            background: rgba(48, 54, 64, 0.92);
            border-color: rgba(255, 255, 255, 0.12);
            color: var(--accent-catellix);
        }
        html[data-det-theme='dark'] .tile-sparkline-wrap {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(36, 40, 48, 0.82) 100%);
            border-top-color: rgba(255, 255, 255, 0.1);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        html[data-det-theme='dark'] .tile-complaints-trend-wrap {
            background: linear-gradient(180deg, rgba(100, 72, 72, 0.2), rgba(36, 40, 48, 0.82));
            border-top-color: rgba(200, 160, 155, 0.22);
        }
        html[data-det-theme='dark'] .tile-complaints-trend-label {
            color: rgba(212, 165, 155, 0.92);
        }
        html[data-det-theme='dark'] .tile[class*='lat-tier-'] .tile-sparkline-wrap {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(36, 40, 48, 0.72) 100%);
        }
        html[data-det-theme='dark'] .tile-spark-svg--latency .tile-spark-area {
            fill: rgba(148, 163, 184, 0.14);
        }
        html[data-det-theme='dark'] .tile-spark-svg--latency .tile-spark-glow {
            stroke: rgba(148, 163, 184, 0.28);
        }
        html[data-det-theme='dark'] .tile-spark-svg--latency .tile-spark-line {
            stroke: #94a3b8;
        }
        html[data-det-theme='dark'] .tile-spark-svg--latency .tile-spark-empty {
            stroke: rgba(148, 163, 184, 0.4);
        }
        html[data-det-theme='dark'] .tile-spark-svg--latency .tile-spark-dot {
            fill: #a8b4c8;
            filter: none;
        }
        html[data-det-theme='dark'] .tile-spark-svg--complaints .tile-spark-area {
            fill: rgba(232, 165, 152, 0.12);
        }
        html[data-det-theme='dark'] .tile-spark-svg--complaints .tile-spark-glow {
            stroke: rgba(212, 150, 140, 0.22);
        }
        html[data-det-theme='dark'] .tile-spark-svg--complaints .tile-spark-line {
            stroke: #d4a5a5;
        }
        html[data-det-theme='dark'] .tile-spark-svg--complaints .tile-spark-empty {
            stroke: rgba(212, 165, 155, 0.4);
        }
        html[data-det-theme='dark'] .tile-spark-svg--complaints .tile-spark-dot {
            fill: #c49a92;
            filter: none;
        }
        html[data-det-theme='dark'] .list-sparkline-wrap {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(36, 40, 48, 0.88));
            border-color: rgba(255, 255, 255, 0.09);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
        }
        html[data-det-theme='dark'] .list-report-btn {
            border-color: rgba(251, 146, 60, 0.42);
            background: linear-gradient(145deg, rgba(120, 53, 15, 0.45) 0%, rgba(154, 52, 18, 0.35) 100%);
            color: #fed7aa !important;
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.06) inset,
                0 1px 3px rgba(0, 0, 0, 0.25);
        }
        html[data-det-theme='dark'] .list-report-shine {
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.04) 28%,
                rgba(255, 253, 250, 0.38) 48%,
                rgba(255, 255, 255, 0.08) 62%,
                transparent 100%
            );
        }
        html[data-det-theme='dark'] .list-report-label {
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        }
        @media (max-width: 1023px) {
            html[data-det-theme='dark'] .list-view .list-row .limg {
                background: rgba(255, 255, 255, 0.96);
                border-color: rgba(255, 255, 255, 0.12);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
            }
            html[data-det-theme='dark'] .list-view .list-row .list-lat-slot {
                border-color: rgba(56, 189, 248, 0.22);
                background: linear-gradient(180deg, rgba(0, 163, 255, 0.12), rgba(36, 40, 48, 0.92));
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            }
            html[data-det-theme='dark'] .list-view .list-row .list-more-btn {
                background: transparent;
                box-shadow: none;
            }
            html[data-det-theme='dark'] .list-view .list-row .list-more-btn:hover,
            html[data-det-theme='dark'] .list-view .list-row .list-more-btn:focus-visible {
                background: rgba(56, 189, 248, 0.1);
            }
        }
        html[data-det-theme='dark'] .tile-more-btn {
            background: linear-gradient(180deg, rgba(39, 39, 42, 0.95), rgba(38, 42, 50, 0.94));
            border-top-color: rgba(255, 255, 255, 0.08);
            color: var(--glow);
        }
        html[data-det-theme='dark'] .tile-more-btn:hover,
        html[data-det-theme='dark'] .tile-more-btn:focus-visible {
            background: linear-gradient(180deg, rgba(63, 63, 70, 0.9), rgba(24, 24, 27, 0.96));
        }
        html[data-det-theme='dark'] .tile-star-btn {
            color: #d4c4a8;
            background: linear-gradient(135deg, rgba(212, 196, 168, 0.12), rgba(120, 110, 95, 0.08));
            border-color: rgba(212, 196, 168, 0.22);
        }
        html[data-det-theme='dark'] .badge.ok {
            background: rgba(45, 110, 95, 0.22);
            color: #7dd3c0;
            border-color: rgba(94, 184, 168, 0.28);
        }
        html[data-det-theme='dark'] .badge.warn {
            background: rgba(110, 95, 70, 0.22);
            color: #d4c4a8;
            border-color: rgba(180, 165, 130, 0.28);
        }
        html[data-det-theme='dark'] .badge.bad {
            background: rgba(110, 65, 60, 0.22);
            color: #d4a5a5;
            border-color: rgba(200, 130, 120, 0.28);
        }
        html[data-det-theme='dark'] .badge.unknown {
            background: rgba(63, 63, 70, 0.35);
            color: #a1a1aa;
            border-color: rgba(113, 113, 122, 0.3);
        }
        html[data-det-theme='dark'] .tile-lat-pill.lat-tier-ex,
        html[data-det-theme='dark'] .list-lat-pill.lat-tier-ex {
            color: #b8f0d8;
            background: rgba(28, 65, 54, 0.45);
            border-color: rgba(74, 170, 140, 0.28);
        }
        html[data-det-theme='dark'] .tile-lat-pill.lat-tier-good,
        html[data-det-theme='dark'] .list-lat-pill.lat-tier-good {
            color: #a8ebe0;
            background: rgba(28, 72, 68, 0.42);
            border-color: rgba(64, 170, 155, 0.26);
        }
        html[data-det-theme='dark'] .tile-lat-pill.lat-tier-mid,
        html[data-det-theme='dark'] .list-lat-pill.lat-tier-mid {
            color: #e8dcc4;
            background: rgba(65, 55, 40, 0.45);
            border-color: rgba(160, 140, 110, 0.28);
        }
        html[data-det-theme='dark'] .tile-lat-pill.lat-tier-warn,
        html[data-det-theme='dark'] .list-lat-pill.lat-tier-warn {
            color: #edd4cf;
            background: rgba(72, 42, 40, 0.48);
            border-color: rgba(180, 110, 100, 0.3);
        }
        html[data-det-theme='dark'] .tile-lat-pill.lat-tier-bad,
        html[data-det-theme='dark'] .list-lat-pill.lat-tier-bad {
            color: #e8d0d0;
            background: rgba(68, 40, 45, 0.48);
            border-color: rgba(175, 100, 105, 0.3);
        }
        html[data-det-theme='dark'] .tile-lat-pill.lat-tier-timeout,
        html[data-det-theme='dark'] .list-lat-pill.lat-tier-timeout {
            color: #d0d8e2;
            background: rgba(45, 52, 62, 0.5);
            border-color: rgba(120, 132, 148, 0.28);
        }
        html[data-det-theme='dark'] .tile-lat-pill.lat-tier-fail,
        html[data-det-theme='dark'] .list-lat-pill.lat-tier-fail {
            color: #edd0cc;
            background: rgba(72, 38, 38, 0.5);
            border-color: rgba(175, 95, 90, 0.3);
        }
        html[data-det-theme='dark'] .tile-lat-pill.lat-tier-unk,
        html[data-det-theme='dark'] .list-lat-pill.lat-tier-unk {
            color: #e4e4e7;
            background: rgba(39, 39, 42, 0.88);
            border-color: rgba(255, 255, 255, 0.1);
        }
        html[data-det-theme='dark'] .tcp-port-cell--unk {
            border-color: rgba(255, 255, 255, 0.08);
            background: rgba(24, 24, 27, 0.78);
        }
        html[data-det-theme='dark'] .tcp-port-cell-ms {
            color: #71717a;
        }
        html[data-det-theme='dark'] .tcp-port-pill--unk {
            background: rgba(39, 39, 42, 0.55);
            border-color: rgba(255, 255, 255, 0.08);
            color: #a1a1aa;
        }
        /* Portas TCP: estados legíveis sem vermelho/verde “alarme” do tema claro */
        html[data-det-theme='dark'] .tcp-port-pill--open {
            background: rgba(100, 145, 118, 0.2);
            border-color: rgba(120, 168, 140, 0.42);
            color: #a8d4bc;
        }
        html[data-det-theme='dark'] .tcp-port-pill--closed {
            background: rgba(145, 100, 100, 0.18);
            border-color: rgba(168, 120, 120, 0.38);
            color: #d4b8b4;
        }
        html[data-det-theme='dark'] .tcp-port-cell--open {
            border-color: rgba(120, 168, 140, 0.38);
            background: rgba(90, 125, 105, 0.14);
        }
        html[data-det-theme='dark'] .tcp-port-cell--closed {
            border-color: rgba(168, 120, 120, 0.35);
            background: rgba(125, 88, 88, 0.12);
        }
        html[data-det-theme='dark'] .tcp-port-cell--open .tcp-port-cell-st {
            color: #a8d4bc;
        }
        html[data-det-theme='dark'] .tcp-port-cell--closed .tcp-port-cell-st {
            color: #d4b8b4;
        }
        html[data-det-theme='dark'] .tcp-port-cell-svc {
            color: #8b95a8;
        }
        html[data-det-theme='dark'] .probe-layer-card--ok {
            border-color: rgba(120, 168, 140, 0.32);
            box-shadow: 0 0 0 1px rgba(100, 145, 118, 0.06);
        }
        html[data-det-theme='dark'] .probe-layer-card--bad {
            border-color: rgba(168, 120, 120, 0.32);
            box-shadow: 0 0 0 1px rgba(145, 100, 100, 0.06);
        }
        html[data-det-theme='dark'] .top10-board {
            background: linear-gradient(168deg, #323842 0%, #2a3038 100%);
            border-color: rgba(255, 255, 255, 0.08);
        }
        html[data-det-theme='dark'] .top10-logo {
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(236, 240, 245, 0.94) 100%);
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
        }
        html[data-det-theme='dark'] .top10-val--bad {
            color: #d4b8b4;
            background: rgba(145, 100, 100, 0.16);
        }
        html[data-det-theme='dark'] .top10-val--warn {
            color: #d4c8a8;
            background: rgba(140, 125, 95, 0.18);
        }
        html[data-det-theme='dark'] .top10-val--good {
            color: #a8d4bc;
            background: rgba(100, 145, 118, 0.16);
        }
        html[data-det-theme='dark'] .top10-val--blue {
            color: #a8c4e8;
            background: rgba(90, 120, 168, 0.18);
        }
        html[data-det-theme='dark'] .top10-board--bad .top10-board-head h4 {
            color: #d4b8b4;
        }
        html[data-det-theme='dark'] .top10-board--bad .top10-board-head::after {
            background: linear-gradient(90deg, transparent, rgba(168, 120, 120, 0.22), transparent);
        }
        html[data-det-theme='dark'] .top10-board--good .top10-board-head h4 {
            color: #a8d4bc;
        }
        html[data-det-theme='dark'] .top10-board--good .top10-board-head::after {
            background: linear-gradient(90deg, transparent, rgba(120, 168, 140, 0.2), transparent);
        }
        html[data-det-theme='dark'] .top10-board--games .top10-board-head h4 {
            color: #c4b5fd;
        }
        html[data-det-theme='dark'] .top10-board--games .top10-board-head::after {
            background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.22), transparent);
        }
        html[data-det-theme='dark'] .top10-board--games .top10-board-head .t10-icon {
            background: rgba(139, 92, 246, 0.15);
        }
        html[data-det-theme='dark'] .det-sd-action--board-games {
            color: #c4b5fd; border-color: rgba(139, 92, 246, 0.35);
            background: rgba(139, 92, 246, 0.10);
        }
        html[data-det-theme='dark'] .det-sd-action--board-games:hover {
            background: rgba(139, 92, 246, 0.22);
        }
        html[data-det-theme='dark'] .svc-star-bg {
            color: rgba(148, 163, 184, 0.38);
        }
        html[data-det-theme='dark'] .catalog-search-input::placeholder {
            color: #94a3b8;
        }
        html[data-det-theme='dark'] .catalog-search-wrap .catalog-search-ic {
            color: #94a3b8;
        }
        html[data-det-theme='dark'] .catalog-view-toggle-btn {
            border-color: rgba(167, 139, 250, 0.45);
            background: linear-gradient(180deg, rgba(124, 58, 237, 0.35), rgba(91, 33, 182, 0.22));
            color: #e9d5ff;
        }
        html[data-det-theme='dark'] .catalog-view-toggle-btn:hover {
            border-color: rgba(196, 181, 253, 0.55);
            background: linear-gradient(180deg, rgba(139, 92, 246, 0.4), rgba(91, 33, 182, 0.3));
        }
        html[data-det-theme='dark'] .det-sidebar-inner--rankings {
            background:
                linear-gradient(160deg, rgba(120, 70, 70, 0.08) 0%, transparent 42%),
                linear-gradient(180deg, rgba(14, 14, 16, 0.99) 0%, rgba(10, 10, 12, 0.99) 100%);
            box-shadow:
                0 6px 28px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.04),
                0 14px 32px rgba(0, 0, 0, 0.45);
        }
        html[data-det-theme='dark'] .det-sct-sel {
            background: rgba(24, 24, 27, 0.95);
            border-color: rgba(255, 255, 255, 0.1);
            color: var(--text);
        }
        html[data-det-theme='dark'] .det-complaints-ol--sidebar-rank {
            background: rgba(38, 42, 50, 0.68);
            border-color: rgba(255, 255, 255, 0.06);
        }
        /* Dark theme: mesmo painel sóbrio (sem neon) */
        html[data-det-theme='dark'] .det-right-games-board {
            border-color: rgba(113, 113, 122, 0.45);
            background: linear-gradient(180deg, #18181b 0%, #0f0f12 100%);
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
        }
        html[data-det-theme='dark'] .det-right-games-board__sub {
            color: #e2e8f0;
        }
        html[data-det-theme='dark'] .det-right-games-board__list .det-sidebar-line--rank {
            border-color: rgba(255, 255, 255, 0.22);
            color: #ffffff;
            background: linear-gradient(110deg, rgba(24, 24, 27, 0.98) 0%, rgba(15, 15, 18, 0.96) 100%);
            box-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
        }
        html[data-det-theme='dark'] .det-right-games-board__list .det-sidebar-line--rank:hover,
        html[data-det-theme='dark'] .det-right-games-board__list .det-sidebar-line--rank:focus-visible {
            border-color: rgba(203, 213, 225, 0.45);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
        }
        html[data-det-theme='dark'] .det-right-games-board__item:nth-child(-n+3) .det-sidebar-line--rank-main {
            border-color: rgba(248, 113, 113, 0.45);
            background: linear-gradient(110deg, rgba(39, 24, 24, 0.98) 0%, rgba(28, 18, 18, 0.96) 100%);
            box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.2) inset, 0 2px 10px rgba(0, 0, 0, 0.55);
        }
        /* Dark theme — all text white inside games panel */
        html[data-det-theme='dark'] .det-right-games-board__list .det-sb-name { color: #ffffff !important; }
        html[data-det-theme='dark'] .det-right-games-board__list .det-sb-meta { color: #ffffff !important; }
        html[data-det-theme='dark'] .det-right-games-board__list .det-sb-meta--lat { color: #ffffff !important; }
        html[data-det-theme='dark'] .det-right-games-board__list .det-t10-report-tag { color: #ffffff !important; }
        html[data-det-theme='dark'] .det-right-games-board__list .det-t10-pulse-mini-lbl { color: #ffffff !important; }
        html[data-det-theme='dark'] .det-right-games-board__list .det-t10-pulse-mini-val { color: #ffffff !important; }
        html[data-det-theme='dark'] .det-right-games-board__list .det-t10-unified-btn { color: #ffffff !important; border-color: rgba(255,255,255,0.35) !important; }
        html[data-det-theme='dark'] .det-right-games-board__list .det-rank-trend--up { color: #86efac !important; }
        html[data-det-theme='dark'] .det-right-games-board__list .det-rank-trend--down { color: #fca5a5 !important; }
        html[data-det-theme='dark'] .det-right-games-board__list .det-sb-rank { color: #ffffff; border-color: rgba(255,255,255,0.45); }

        html[data-det-theme='dark'] .det-sidebar-ad-micro {
            background: rgba(38, 42, 50, 0.55);
            border-color: rgba(255, 255, 255, 0.07);
        }
        html[data-det-theme='dark'] .det-report-picker-row {
            background: rgba(24, 24, 27, 0.94);
            border-color: rgba(255, 255, 255, 0.08);
        }
        html[data-det-theme='dark'] .det-report-picker-list {
            scrollbar-color: rgba(113, 113, 122, 0.45) rgba(24, 24, 27, 0.92);
        }
        html[data-det-theme='dark'] .modal-backdrop {
            background: rgba(0, 0, 0, 0.65);
        }
        html[data-det-theme='dark'] .modal-sheet {
            box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.6);
            scrollbar-color: rgba(113, 113, 122, 0.5) rgba(24, 24, 27, 0.92);
        }
        html[data-det-theme='dark'] .modal-sheet select option {
            background: #343a44;
            color: var(--text);
        }
        html[data-det-theme='dark'] .modal-sheet::-webkit-scrollbar-track {
            background: rgba(24, 24, 27, 0.96);
        }
        html[data-det-theme='dark'] .modal-sheet::-webkit-scrollbar-thumb {
            border-color: rgba(24, 24, 27, 0.96);
        }
        html[data-det-theme='dark'] .modal-link-chip {
            background: rgba(24, 24, 27, 0.75);
            border-color: rgba(56, 189, 248, 0.22);
        }
        html[data-det-theme='dark'] .modal-link-chip:hover {
            background: rgba(56, 189, 248, 0.12);
        }
        html[data-det-theme='dark'] .det-top30-sheet {
            background: linear-gradient(165deg, rgba(24, 24, 27, 0.99) 0%, rgba(38, 42, 50, 0.99) 100%);
            box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.55);
        }
        html[data-det-theme='dark'] .det-top30-head {
            border-bottom-color: rgba(255, 255, 255, 0.08);
        }
        html[data-det-theme='dark'] .det-top30-item {
            background: rgba(24, 24, 27, 0.88);
            border-color: rgba(255, 255, 255, 0.08);
        }
        html[data-det-theme='dark'] .det-top30-item--moved-up {
            border-color: rgba(52, 211, 153, 0.45);
            box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.15);
        }
        html[data-det-theme='dark'] .det-top30-item--moved-down {
            border-color: rgba(248, 113, 113, 0.4);
            box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.12);
        }
        html[data-det-theme='dark'] .det-top30-sk-row {
            background: linear-gradient(90deg, rgba(39, 39, 42, 0.95) 25%, rgba(63, 63, 70, 0.5) 50%, rgba(39, 39, 42, 0.95) 75%);
            background-size: 200% 100%;
        }
        html[data-det-theme='dark'] .det-top30-open-btn {
            color: #7dd3fc;
            border-color: rgba(56, 189, 248, 0.45);
            box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.1), 0 4px 20px rgba(0, 0, 0, 0.35);
        }
        html[data-det-theme='dark'] .det-top30-share-btn {
            background: linear-gradient(180deg, rgba(39, 39, 42, 0.95), rgba(24, 24, 27, 0.9));
            color: #7dd3fc;
            border-color: rgba(56, 189, 248, 0.35);
        }
        html[data-det-theme='dark'] .det-sd-action {
            background: linear-gradient(180deg, rgba(39, 39, 42, 0.95), rgba(24, 24, 27, 0.85));
            color: #7dd3fc;
            border-color: rgba(56, 189, 248, 0.3);
        }
        html[data-det-theme='dark'] .det-sd-action--report {
            background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
            color: #f0f9ff;
            border-color: rgba(56, 189, 248, 0.35);
        }
        html[data-det-theme='dark'] .det-sd-action--social {
            background: linear-gradient(135deg, #5b21b6 0%, #be185d 55%, #c2410c 100%);
            color: #fff;
            border-color: rgba(167, 139, 250, 0.35);
        }
        html[data-det-theme='dark'] .det-top20-sheet {
            background:
                radial-gradient(120% 80% at 10% 0%, rgba(56, 189, 248, 0.12), transparent 55%),
                linear-gradient(165deg, rgba(24, 24, 27, 0.99) 0%, rgba(38, 42, 50, 0.99) 100%);
            border-color: rgba(255, 255, 255, 0.08);
        }
        html[data-det-theme='dark'] .det-top20-head h2 { color: #e0f2fe; }
        html[data-det-theme='dark'] .det-top20-card {
            background: rgba(24, 24, 27, 0.88);
            border-color: rgba(255, 255, 255, 0.08);
        }
        html[data-det-theme='dark'] .det-report-preview-wrap { background: #2a3038; }
        html[data-det-theme='dark'] #detReportPreviewInner {
            background: #343a44;
            border-color: rgba(255, 255, 255, 0.1);
        }
        html[data-det-theme='dark'] .t10-complaints-sel {
            background: rgba(24, 24, 27, 0.95);
            color: #d4a5a5;
        }
        html[data-det-theme='dark'] .svc-probe-layers {
            background: linear-gradient(145deg, rgba(24, 24, 27, 0.96) 0%, rgba(38, 42, 50, 0.98) 100%);
        }
        html[data-det-theme='dark'] .probe-layer-card {
            background: rgba(38, 42, 50, 0.9);
        }
        html[data-det-theme='dark'] .svc-tcp-ports-wrap {
            background: rgba(48, 54, 64, 0.78);
        }
        html[data-det-theme='dark'] .svc-tcp-ports-title {
            color: #a8c4e0;
        }
        html[data-det-theme='dark'] #detectorLoading {
            background: rgba(38, 42, 50, 0.92);
            color: var(--muted);
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: none;
        }
        html[data-det-theme='dark'] .det-catalog-sync-hint {
            color: rgba(203, 213, 225, 0.88);
        }
        html[data-det-theme='dark'] .det-dash-details {
            border: 1px solid rgba(255, 255, 255, 0.07);
            background: rgba(8, 8, 10, 0.72);
            box-shadow: none;
        }
        html[data-det-theme='dark'] .det-dash-details[open] {
            border-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
        }
        html[data-det-theme='dark'] .det-dash-sum-hint {
            color: var(--muted);
            opacity: 1;
            font-weight: 500;
        }
        html[data-det-theme='dark'] .toolbar-compact .seg-view button {
            background: rgba(13, 21, 32, 0.85);
            color: var(--muted);
            box-shadow: none;
        }
        html[data-det-theme='dark'] .toolbar-compact .seg-view button.active {
            background: rgba(255, 255, 255, 0.08);
            color: var(--glow);
        }

        /* Catálogo / painéis: superfícies neutras sobre preto */
        html[data-det-theme='dark'] .block--catalog-hero {
            background: linear-gradient(152deg, #2c323c 0%, #323842 42%, #262b33 100%);
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.05) inset,
                0 12px 32px rgba(0, 0, 0, 0.22);
        }
        html[data-det-theme='dark'] .block-head--catalog {
            border-bottom-color: rgba(255, 255, 255, 0.07);
        }
        html[data-det-theme='dark'] .top10-cards-filter-empty {
            background: rgba(24, 24, 27, 0.75);
            border-color: rgba(255, 255, 255, 0.08);
            color: #a1a1aa;
        }
        html[data-det-theme='dark'] .catalog-filter-banner {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(24, 24, 27, 0.94) 100%);
            border-color: rgba(255, 255, 255, 0.1);
        }
        html[data-det-theme='dark'] .cfb-chip--search {
            border-color: rgba(148, 163, 184, 0.35);
            color: #a8b4c8;
            background: rgba(38, 42, 50, 0.72);
        }
        html[data-det-theme='dark'] .cfb-chip--cat {
            border-color: rgba(94, 184, 168, 0.28);
            color: #7dd3c0;
            background: rgba(38, 42, 50, 0.72);
        }
        html[data-det-theme='dark'] .cfb-chip--ip {
            border-color: rgba(180, 165, 130, 0.3);
            color: #d4c4a8;
            background: rgba(38, 42, 50, 0.72);
        }
        html[data-det-theme='dark'] .cfb-clear {
            border-color: rgba(200, 130, 120, 0.35);
            background: rgba(60, 35, 35, 0.45);
            color: #d4a5a5;
        }
        html[data-det-theme='dark'] .cfb-clear:hover,
        html[data-det-theme='dark'] .cfb-clear:focus-visible {
            background: rgba(80, 45, 45, 0.5);
        }

        html[data-det-theme='dark'] .det-obs-hub {
            background: linear-gradient(165deg, rgba(24, 24, 27, 0.94) 0%, rgba(38, 42, 50, 0.97) 100%);
            border-color: rgba(255, 255, 255, 0.08);
        }
        html[data-det-theme='dark'] .det-obs-hub-list li {
            background: rgba(38, 42, 50, 0.88);
            border-color: rgba(255, 255, 255, 0.07);
            color: var(--text);
        }

        html[data-det-theme='dark'] .prob-catalog-block {
            background: linear-gradient(165deg, rgba(70, 40, 40, 0.14) 0%, rgba(38, 42, 50, 0.97) 52%);
            border-color: rgba(200, 130, 120, 0.18);
            box-shadow: 0 0 32px rgba(0, 0, 0, 0.4);
        }
        html[data-det-theme='dark'] .prob-catalog-cat-block {
            background: rgba(24, 24, 27, 0.9);
            border-color: rgba(255, 255, 255, 0.07);
        }

        html[data-det-theme='dark'] .latency-hub-card {
            background: linear-gradient(165deg, rgba(20, 20, 22, 0.99) 0%, rgba(10, 10, 12, 0.99) 100%);
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow:
                0 8px 28px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }

        html[data-det-theme='dark'] .icmp-section {
            background: linear-gradient(165deg, rgba(40, 38, 32, 0.92) 0%, rgba(18, 18, 16, 0.97) 100%);
            border-color: rgba(180, 165, 130, 0.2);
        }
        html[data-det-theme='dark'] .icmp-section-head h3 {
            color: #d4c4a8;
        }
        html[data-det-theme='dark'] .icmp-section-head p {
            color: #a8a29e;
        }
        html[data-det-theme='dark'] .icmp-section--empty {
            background: rgba(24, 24, 27, 0.68);
            border-color: rgba(255, 255, 255, 0.06);
        }

        html[data-det-theme='dark'] .top10-cards-shelf--bad .t10c-icon {
            background: rgba(110, 65, 60, 0.22);
        }
        html[data-det-theme='dark'] .top10-cards-shelf--bad h4 {
            color: #d4a5a5;
        }
        html[data-det-theme='dark'] .top10-cards-shelf--good .t10c-icon {
            background: rgba(45, 110, 95, 0.2);
        }
        html[data-det-theme='dark'] .top10-cards-shelf--good h4 {
            color: #7dd3c0;
        }
        html[data-det-theme='dark'] .top10-cards-shelf--games .t10c-icon {
            background: rgba(129, 140, 248, 0.22);
        }
        html[data-det-theme='dark'] .top10-cards-shelf--games h4 {
            color: #a5b4fc;
        }

        html[data-det-theme='dark'] .det-sidebar-ad-micro {
            background: rgba(38, 42, 50, 0.55);
            border-color: rgba(255, 255, 255, 0.06);
        }
        html[data-det-theme='dark'] .det-sidebar-block--distro .cat-prod-card {
            background: linear-gradient(165deg, rgba(24, 24, 27, 0.96) 0%, rgba(38, 42, 50, 0.98) 100%);
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }
        html[data-det-theme='dark'] .det-ad-slot {
            color: rgba(253, 230, 138, 0.92);
            background-image:
                linear-gradient(165deg, rgba(30, 27, 22, 0.98) 0%, rgba(24, 22, 18, 0.99) 55%, rgba(28, 26, 22, 0.98) 100%),
                linear-gradient(
                    145deg,
                    rgba(120, 90, 20, 0.95) 0%,
                    #c9a227 22%,
                    #e8c547 42%,
                    #f0e68c 58%,
                    #b8860b 78%,
                    rgba(90, 70, 18, 0.98) 100%
                );
            box-shadow:
                0 0 0 1px rgba(251, 191, 36, 0.35),
                0 0 22px rgba(212, 175, 55, 0.22),
                0 8px 28px rgba(0, 0, 0, 0.45);
        }
        html[data-det-theme='dark'] .det-ad-slot:hover,
        html[data-det-theme='dark'] .det-ad-slot:focus-visible {
            box-shadow:
                0 0 0 1px rgba(253, 224, 71, 0.45),
                0 0 32px rgba(212, 175, 55, 0.32),
                0 0 48px rgba(251, 191, 36, 0.18),
                0 10px 36px rgba(0, 0, 0, 0.5);
        }
        html[data-det-theme='dark'] .det-ad-slot--hot {
            box-shadow:
                0 0 0 2px rgba(253, 224, 71, 0.5),
                0 0 36px rgba(212, 175, 55, 0.38),
                0 0 60px rgba(251, 191, 36, 0.22),
                0 12px 40px rgba(0, 0, 0, 0.5);
        }
        html[data-det-theme='dark'] .det-ad-slot--filled {
            background-image:
                linear-gradient(160deg, rgba(30, 30, 33, 0.98) 0%, rgba(24, 24, 27, 0.99) 50%, rgba(30, 30, 33, 0.98) 100%),
                linear-gradient(
                    145deg,
                    rgba(120, 90, 20, 0.95) 0%,
                    #c9a227 22%,
                    #e8c547 42%,
                    #f0e68c 58%,
                    #b8860b 78%,
                    rgba(90, 70, 18, 0.98) 100%
                );
        }
        html[data-det-theme='dark'] .det-ad-slot--filled:hover,
        html[data-det-theme='dark'] .det-ad-slot--filled:focus-visible {
            box-shadow:
                0 0 0 1px rgba(253, 224, 71, 0.48),
                0 0 34px rgba(212, 175, 55, 0.36),
                0 0 54px rgba(251, 191, 36, 0.22),
                0 12px 40px rgba(0, 0, 0, 0.48);
        }
        html[data-det-theme='dark'] .det-ad-slots-hint {
            color: #a1a1aa;
        }
        html[data-det-theme='dark'] .det-ad-slots-count-row {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.88) 100%);
            border-color: rgba(56, 189, 248, 0.22);
        }
        html[data-det-theme='dark'] .det-ad-slots-count-caption {
            color: #7dd3fc;
        }
        html[data-det-theme='dark'] .det-ad-slots-count-pill {
            background: rgba(15, 23, 42, 0.85);
            border-color: rgba(56, 189, 248, 0.35);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
        }
        html[data-det-theme='dark'] .det-ad-slots-count-num {
            color: #e0f2fe;
        }
        html[data-det-theme='dark'] .det-ad-slots-count-num--total {
            color: #94a3b8;
        }
        html[data-det-theme='dark'] .det-ad-slots-count-slash {
            color: #64748b;
        }
        html[data-det-theme='dark'] .det-ad-slots-count-hint {
            color: #cbd5e1;
        }
        html[data-det-theme='dark'] .det-ad-slots-micro-add {
            border-color: rgba(212, 175, 55, 0.5);
            background: linear-gradient(165deg, rgba(55, 48, 26, 0.95) 0%, rgba(30, 27, 18, 0.98) 100%);
            color: rgba(253, 224, 71, 0.92);
            box-shadow:
                0 0 0 1px rgba(212, 175, 55, 0.2),
                0 4px 16px rgba(0, 0, 0, 0.45);
        }
        html[data-det-theme='dark'] .det-ad-slots-micro-add:hover,
        html[data-det-theme='dark'] .det-ad-slots-micro-add:focus-visible {
            border-color: rgba(251, 191, 36, 0.75);
            box-shadow:
                0 0 0 1px rgba(251, 191, 36, 0.35),
                0 6px 22px rgba(212, 175, 55, 0.25);
        }
        html[data-det-theme='dark'] .det-ad-slots-cta-add {
            border-color: rgba(212, 175, 55, 0.4);
            background: rgba(212, 175, 55, 0.06);
            color: rgba(212, 175, 55, 0.82);
        }
        html[data-det-theme='dark'] .det-ad-slots-cta-add:hover,
        html[data-det-theme='dark'] .det-ad-slots-cta-add:focus-visible {
            background: rgba(212, 175, 55, 0.12);
            border-color: rgba(212, 175, 55, 0.7);
            color: rgba(240, 195, 60, 1);
        }
        html[data-det-theme='dark'] .det-local-ad-takeover__close {
            background: rgba(39, 39, 42, 0.95);
            color: #f4f4f5;
        }
        html[data-det-theme='dark'] .det-sidebar-line .det-sb-logo {
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(236, 240, 245, 0.94) 100%);
            border-color: rgba(0, 0, 0, 0.08);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
        }
        html[data-det-theme='dark'] .det-sidebar-line .det-sb-meta {
            color: #a1a1aa;
        }
        html[data-det-theme='dark'] .det-complaints-ol--sidebar-rank {
            border-color: rgba(124, 58, 237, 0.35);
            background: linear-gradient(170deg, rgba(39, 39, 42, 0.95) 0%, rgba(24, 24, 27, 0.94) 100%);
            box-shadow:
                0 10px 24px rgba(0, 0, 0, 0.42),
                inset 0 0 0 1px rgba(168, 85, 247, 0.18);
        }
        html[data-det-theme='dark'] .det-sidebar-line--rank:hover,
        html[data-det-theme='dark'] .det-sidebar-line--rank:focus-visible {
            background: linear-gradient(90deg, rgba(76, 29, 149, 0.45) 0%, rgba(14, 116, 144, 0.35) 100%);
        }
        html[data-det-theme='dark'] .det-sidebar-line .det-sb-rank {
            color: #c4b5fd;
            text-shadow: 0 0 12px rgba(167, 139, 250, 0.48);
        }
        html[data-det-theme='dark'] .det-rank-trend--up {
            color: #7dd3c0;
        }
        html[data-det-theme='dark'] .det-rank-trend--down {
            color: #d4a5a5;
        }
        html[data-det-theme='dark'] .det-vol-trend--up {
            color: #7dd3c0;
        }
        html[data-det-theme='dark'] .det-vol-trend--down {
            color: #d4a5a5;
        }
        html[data-det-theme='dark'] .det-sb-count--pill {
            background: linear-gradient(135deg, rgba(45, 45, 48, 0.9) 0%, rgba(18, 18, 20, 0.92) 100%);
            border-color: rgba(255, 255, 255, 0.12);
            color: #d4d4d8 !important;
            box-shadow: none;
        }
        html[data-det-theme='dark'] .det-sb-count--pill.det-sb-count--spike {
            background: linear-gradient(135deg, rgba(120, 53, 15, 0.35) 0%, rgba(69, 10, 10, 0.45) 100%);
            border-color: rgba(251, 146, 60, 0.35);
            color: #fdba74 !important;
        }
        html[data-det-theme='dark'] .det-sb-count--pill.det-sb-count--down {
            background: linear-gradient(135deg, rgba(127, 29, 29, 0.5) 0%, rgba(55, 10, 10, 0.6) 100%);
            border-color: rgba(248, 113, 113, 0.45);
            color: #fca5a5 !important;
        }
        html[data-det-theme='dark'] .det-t10-comm-col-head {
            color: #f4f4f5;
            background: linear-gradient(135deg, rgba(56, 189, 248, 0.16) 0%, rgba(234, 88, 12, 0.18) 100%);
            border-color: rgba(56, 189, 248, 0.32);
            box-shadow: 0 2px 12px rgba(56, 189, 248, 0.1);
        }
        html[data-det-theme='dark'] .det-sidebar-complaints-item .det-t10-unified-btn {
            border-color: rgba(251, 146, 60, 0.42);
            background: linear-gradient(145deg, rgba(120, 53, 15, 0.45) 0%, rgba(154, 52, 18, 0.35) 100%);
            color: #fed7aa !important;
        }
        html[data-det-theme='dark'] .det-sidebar-complaints-item .det-t10-unified-btn.det-t10-unified--spike {
            border-color: rgba(251, 146, 60, 0.55);
            color: #ffedd5 !important;
        }
        html[data-det-theme='dark'] .det-sidebar-complaints-item .det-t10-unified-btn.det-t10-unified--down {
            border-color: rgba(248, 113, 113, 0.45);
            background: linear-gradient(145deg, rgba(127, 29, 29, 0.4) 0%, rgba(69, 10, 10, 0.45) 100%);
            color: #fecaca !important;
        }
        html[data-det-theme='dark'] .det-sidebar-complaints-item .det-t10-unified-shine {
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.04) 28%,
                rgba(255, 253, 250, 0.38) 48%,
                rgba(255, 255, 255, 0.08) 62%,
                transparent 100%
            );
        }
        html[data-det-theme='dark'] .det-sidebar-complaints-item .det-t10-report-tag {
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        }
        html[data-det-theme='dark'] #detComplaintsHourlyModal .det-hourly-report-cta {
            border-color: rgba(251, 146, 60, 0.5);
            background: linear-gradient(180deg, rgba(234, 88, 12, 0.38), rgba(154, 52, 18, 0.28));
            color: #ffedd5;
        }

        html[data-det-theme='dark'] #detComplaintsHourlyModal .det-hourly-spark-wrap {
            background: linear-gradient(180deg, rgba(70, 40, 40, 0.22) 0%, rgba(38, 42, 50, 0.95) 100%);
            border-color: rgba(200, 130, 120, 0.2);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 4px 24px rgba(0, 0, 0, 0.4);
        }
        html[data-det-theme='dark'] #detComplaintsHourlyModal .det-hourly-err {
            color: #d4a5a5;
        }

        html[data-det-theme='dark'] .csm-head h3 {
            color: var(--glow);
        }
        html[data-det-theme='dark'] .csm-hint {
            background: rgba(24, 24, 27, 0.78);
            border-color: rgba(255, 255, 255, 0.08);
        }
        html[data-det-theme='dark'] .csm-grid {
            scrollbar-color: rgba(113, 113, 122, 0.45) rgba(24, 24, 27, 0.88);
        }
        html[data-det-theme='dark'] .modal-sheet::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(113, 113, 122, 0.55), rgba(82, 82, 91, 0.45));
            border-color: rgba(24, 24, 27, 0.96);
        }

        html[data-det-theme='dark'] .modal-chart-block {
            border-color: rgba(255, 255, 255, 0.08);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, transparent 45%),
                linear-gradient(180deg, rgba(14, 14, 16, 0.97) 0%, rgba(24, 24, 27, 0.9) 100%);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.04) inset,
                0 12px 40px rgba(0, 0, 0, 0.4);
        }
        html[data-det-theme='dark'] .chart-wrap {
            background: radial-gradient(ellipse 120% 85% at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 58%),
                linear-gradient(180deg, rgba(24, 24, 27, 0.96) 0%, rgba(38, 42, 50, 0.98) 100%);
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 28px rgba(0, 0, 0, 0.4);
        }
        html[data-det-theme='dark'] .chart-wrap.chart-wrap--multi {
            background: radial-gradient(ellipse 100% 90% at 50% -8%, rgba(255, 255, 255, 0.05) 0%, transparent 52%),
                linear-gradient(165deg, rgba(24, 24, 27, 0.94) 0%, rgba(38, 42, 50, 0.97) 100%);
            border-color: rgba(255, 255, 255, 0.09);
        }
        html[data-det-theme='dark'] .svc-latency-chart-loading__backdrop {
            background: linear-gradient(
                145deg,
                rgba(56, 189, 248, 0.08) 0%,
                rgba(38, 42, 50, 0.94) 45%,
                rgba(24, 24, 27, 0.96) 100%
            );
        }
        html[data-det-theme='dark'] .svc-latency-chart-loading__glow {
            background: radial-gradient(ellipse at 50% 50%, rgba(125, 211, 252, 0.12), transparent 70%);
        }
        html[data-det-theme='dark'] .svc-latency-chart-loading__skeleton-path {
            stroke: rgba(125, 211, 252, 0.32);
        }
        html[data-det-theme='dark'] .svc-latency-chart-loading__skeleton-path--b {
            stroke: rgba(56, 189, 248, 0.22);
        }
        html[data-det-theme='dark'] .svc-latency-chart-loading__spinner {
            border-color: rgba(125, 211, 252, 0.18);
            border-top-color: rgba(125, 211, 252, 0.92);
            border-right-color: rgba(56, 189, 248, 0.4);
            box-shadow: 0 0 28px rgba(56, 189, 248, 0.12);
        }
        html[data-det-theme='dark'] .svc-latency-chart-loading__label {
            color: rgba(228, 231, 235, 0.94);
        }
        html[data-det-theme='dark'] .svc-latency-chart-loading__sub {
            color: rgba(161, 161, 170, 0.88);
        }
        html[data-det-theme='dark'] .chart-legend-hint {
            color: rgba(161, 161, 170, 0.92);
        }

        html[data-det-theme='dark'] .svc-public-feedback h4.svc-feed-section-title {
            color: var(--text);
        }
        html[data-det-theme='dark'] .svc-feedback-item {
            border-top-color: rgba(255, 255, 255, 0.07);
        }
        html[data-det-theme='dark'] .svc-feed-list .svc-feedback-item.svc-feed-card {
            border-top: none;
        }
        html[data-det-theme='dark'] .svc-feedback-meta {
            color: var(--muted);
        }
        html[data-det-theme='dark'] .svc-feedback-meta strong {
            color: var(--text);
        }
        html[data-det-theme='dark'] .svc-feedback-comment {
            color: var(--text);
        }
        html[data-det-theme='dark'] .svc-feedback-empty {
            color: var(--muted);
        }
        html[data-det-theme='dark'] .det-fb-replies {
            border-left-color: rgba(56, 189, 248, 0.35);
        }
        html[data-det-theme='dark'] .det-fb-reply {
            border-top-color: rgba(255, 255, 255, 0.06);
        }
        html[data-det-theme='dark'] .det-fb-reply-btn {
            border-color: rgba(56, 189, 248, 0.4);
            background: rgba(56, 189, 248, 0.12);
            color: #7dd3fc;
        }
        html[data-det-theme='dark'] .cs-chart-wrap {
            background: radial-gradient(ellipse at 50% 30%, rgba(0, 80, 160, 0.14), transparent 75%), rgba(8, 14, 26, 0.55);
            border-color: rgba(0, 163, 255, 0.12);
        }
        html[data-det-theme='dark'] .cs-feedback-title {
            color: var(--glow);
        }
        html[data-det-theme='dark'] .cs-feedback-list .svc-feed-card {
            background: rgba(42,46,56,.88);
            border-color: rgba(56,189,248,.1);
        }
        html[data-det-theme='dark'] .cs-feedback-list .svc-feed-avatar {
            background: linear-gradient(135deg,rgba(56,189,248,.2),rgba(14,165,233,.15));
            color: #7dd3fc;
        }
        html[data-det-theme='dark'] .cs-feedback-list .svc-feed-meta {
            color: var(--muted);
        }
        html[data-det-theme='dark'] .cs-feedback-list .svc-feed-meta strong {
            color: var(--text);
        }
        html[data-det-theme='dark'] .cs-feedback-list .svc-feed-comment {
            color: var(--text);
        }
        html[data-det-theme='dark'] .cs-feedback-list .svc-feed-react-btn {
            background: rgba(42,46,56,.8);
            border-color: rgba(56,189,248,.15);
        }
        html[data-det-theme='dark'] .cs-feedback-list .svc-feed-react-btn.is-active {
            background: rgba(56,189,248,.15);
            border-color: rgba(56,189,248,.35);
        }
        html[data-det-theme='dark'] .cs-feedback-list .svc-feed-reply {
            background: rgba(36,40,48,.9);
        }
        html[data-det-theme='dark'] .cs-feedback-list .svc-feed-replies {
            border-left-color: rgba(56,189,248,.25);
        }
        html[data-det-theme='dark'] .cs-empty {
            color: var(--muted);
        }

        html[data-det-theme='dark'] .csm-card__logo {
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(236, 240, 245, 0.94) 100%);
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
        }
        html[data-det-theme='dark'] .cat-prod-logo:not(.cat-prod-logo--kids) {
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(236, 240, 245, 0.94) 100%);
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
        }
        html[data-det-theme='dark'] .cat-prod-logo--kids {
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(236, 240, 245, 0.92) 100%);
            border-color: rgba(255, 255, 255, 0.12);
        }
        html[data-det-theme='dark'] .csm-card__lat--ok {
            color: #a8d4bc;
            border-color: rgba(120, 168, 140, 0.35);
            background: rgba(48, 54, 64, 0.85);
        }
        html[data-det-theme='dark'] .csm-card__lat--bad {
            color: #d4b8b4;
            border-color: rgba(168, 120, 120, 0.35);
            background: rgba(48, 54, 64, 0.85);
        }
        html[data-det-theme='dark'] .svc-ap-tag--ok {
            color: #a8d4bc;
        }
        html[data-det-theme='dark'] .svc-ap-tag--bad {
            color: #d4b8b4;
        }

        html[data-det-theme='dark'] .list-row:hover {
            border-color: rgba(255, 255, 255, 0.11);
            outline: 1px solid rgba(255, 255, 255, 0.05);
            outline-offset: -1px;
        }
        html[data-det-theme='dark'] .list-row[class*='lat-tier-'] {
            background:
                radial-gradient(100% 160% at 100% 0%, var(--lat-glow), transparent 58%),
                linear-gradient(135deg, #343a44, #2a3038);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--lat-edge-soft);
        }
        html[data-det-theme='dark'] .list-row[class*='lat-tier-']:hover {
            outline: 1px solid rgba(255, 255, 255, 0.07);
            outline-offset: -1px;
        }
        html[data-det-theme='dark'] .list-row.lat-tier-ex .list-lat:not(.bad) { color: #6ee7b7; }
        html[data-det-theme='dark'] .list-row.lat-tier-good .list-lat:not(.bad) { color: #5eead4; }
        html[data-det-theme='dark'] .list-row.lat-tier-mid .list-lat:not(.bad) { color: #d4c4a8; }
        html[data-det-theme='dark'] .list-row.lat-tier-warn .list-lat:not(.bad) { color: #e8b4a8; }
        html[data-det-theme='dark'] .list-row.lat-tier-bad .list-lat:not(.bad) { color: #d4a5a5; }
        html[data-det-theme='dark'] .list-row.lat-tier-timeout .list-lat:not(.bad) { color: #a8b4c4; }
        html[data-det-theme='dark'] .list-row.lat-tier-fail .list-lat:not(.bad) { color: #e8a598; }
        html[data-det-theme='dark'] .list-row.lat-tier-unk .list-lat:not(.bad) { color: #a1a1aa; }
        html[data-det-theme='dark'] .list-row .rnum {
            color: rgba(161, 161, 170, 0.45);
        }
        html[data-det-theme='dark'] .list-row .limg {
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.94) 0%, rgba(236, 240, 245, 0.92) 100%);
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
        }
        @media (hover: hover) and (pointer: fine) {
            html[data-det-theme='dark'] .tile[class*='lat-tier-']:hover,
            html[data-det-theme='dark'] .tile[class*='lat-tier-']:focus-within {
                outline: 1px solid rgba(255, 255, 255, 0.09);
            }
        }
        @media (max-width: 1023px) {
            html[data-det-theme='dark'] .det-m-complaints-mount:not(:empty) {
                border-top-color: rgba(255, 255, 255, 0.1);
            }
        }

        /* ═══ Ajuda: mapa + comunidade (FAB + modal) — visual enterprise ═══ */
        .det-platform-fab {
            position: fixed;
            right: max(16px, env(safe-area-inset-right));
            bottom: max(18px, env(safe-area-inset-bottom));
            z-index: 98;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px 10px 12px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            background: #f8fafc;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08);
            color: var(--text);
            font-family: inherit;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            cursor: pointer;
            touch-action: manipulation;
            transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
        }
        .det-platform-fab:hover,
        .det-platform-fab:focus-visible {
            transform: none;
            border-color: #94a3b8;
            background: #f1f5f9;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(15, 23, 42, 0.1);
            outline: none;
        }
        .det-platform-fab__icon {
            flex-shrink: 0;
            width: 34px;
            height: 34px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #334155;
            color: #f8fafc;
            box-shadow: none;
        }
        .det-platform-fab__icon svg {
            width: 20px;
            height: 20px;
            display: block;
        }
        .det-platform-fab__text {
            line-height: 1.25;
            text-align: left;
        }
        .det-platform-fab__kicker {
            display: block;
            font-size: 0.62rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--muted);
        }
        @media (max-width: 380px) {
            .det-platform-fab__text .det-platform-fab__line2 {
                display: none;
            }
            .det-platform-fab {
                padding: 10px 14px 10px 12px;
                font-size: 0.78rem;
            }
        }
        html[data-det-theme='dark'] .det-platform-fab {
            background: #2a3038;
            border-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        }
        html[data-det-theme='dark'] .det-platform-fab__icon {
            background: #3d4450;
            box-shadow: none;
        }
        @media (prefers-reduced-motion: reduce) {
            .det-platform-fab {
                transition: none;
            }
            .det-platform-fab:hover,
            .det-platform-fab:focus-visible {
                transform: none;
            }
        }

        #detPlatformExplainerModal.det-platform-explainer-backdrop {
            z-index: 100008;
            align-items: flex-end;
            justify-content: center;
            background: rgba(15, 23, 42, 0.5);
        }
        #detPlatformExplainerModal .modal-sheet--platform-explainer {
            position: relative;
            width: 100%;
            max-width: min(640px, 100vw - 24px);
            max-height: min(92dvh, 92vh, 820px);
            border-radius: 12px 12px 0 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            border: 1px solid #cbd5e1;
            box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.1), 0 2px 0 rgba(255, 255, 255, 0.8) inset;
            background: var(--card, #fff);
        }
        #detPlatformExplainerModal .dpe-sheet-accent {
            flex-shrink: 0;
            height: 3px;
            background: linear-gradient(90deg, #0284c7 0%, #0ea5e9 42%, #64748b 100%);
        }
        html[data-det-theme='dark'] #detPlatformExplainerModal .modal-sheet--platform-explainer {
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
        }
        #detPlatformExplainerModal .modal-sheet--platform-explainer .modal-close {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 2;
            float: none;
            min-width: 40px;
            min-height: 40px;
            width: 40px;
            height: 40px;
            border-radius: 4px;
            background: #f1f5f9;
            border: 1px solid #cbd5e1;
            font-size: 1.25rem;
            line-height: 1;
            color: #334155;
        }
        html[data-det-theme='dark'] #detPlatformExplainerModal .modal-sheet--platform-explainer .modal-close {
            background: #353b45;
            border-color: rgba(255, 255, 255, 0.12);
            color: #e8eaed;
        }
        .dpe-scroll {
            overflow: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y pinch-zoom;
            padding: 16px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom))
                max(16px, env(safe-area-inset-left));
            scrollbar-width: thin;
            scrollbar-color: rgba(100, 116, 139, 0.45) rgba(241, 245, 249, 0.9);
        }
        html[data-det-theme='dark'] .dpe-scroll {
            scrollbar-color: rgba(255, 255, 255, 0.2) rgba(30, 34, 40, 0.9);
        }
        .dpe-hero {
            position: relative;
            margin: -16px -16px 14px -16px;
            padding: 18px 52px 14px 16px;
            background: #eef0f3;
            border-bottom: 1px solid #cbd5e1;
        }
        html[data-det-theme='dark'] .dpe-hero {
            background: #2b2f36;
            border-bottom-color: rgba(255, 255, 255, 0.1);
        }
        .dpe-hero h2 {
            font-family: 'DM Sans', system-ui, sans-serif;
            font-size: clamp(1.1rem, 3.2vw, 1.35rem);
            font-weight: 700;
            letter-spacing: -0.015em;
            line-height: 1.25;
            margin: 0 0 8px;
            color: var(--text);
        }
        .dpe-hero p {
            margin: 0;
            font-size: 0.84rem;
            line-height: 1.45;
            color: var(--muted);
            max-width: 58ch;
        }
        .dpe-hero p strong,
        .dpe-section p strong,
        .dpe-one-liner strong {
            color: var(--text);
            font-weight: 700;
        }
        .dpe-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
            padding: 4px 8px;
            border-radius: 2px;
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #334155;
            background: #fff;
            border: 1px solid #cbd5e1;
        }
        html[data-det-theme='dark'] .dpe-badge {
            color: #c5ccd6;
            background: #353b45;
            border-color: rgba(255, 255, 255, 0.12);
        }
        .dpe-pill-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 12px 0 16px;
        }
        .dpe-pill {
            font-size: 0.68rem;
            font-weight: 600;
            padding: 4px 8px;
            border-radius: 2px;
            background: var(--det-field);
            border: 1px solid var(--det-field-border);
            color: var(--muted);
        }
        .dpe-section {
            margin-bottom: 14px;
        }
        .dpe-section h3 {
            font-family: 'DM Sans', system-ui, sans-serif;
            font-size: 0.82rem;
            font-weight: 700;
            margin: 0 0 6px;
            padding-bottom: 4px;
            border-bottom: 1px solid #e2e8f0;
            color: var(--text);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        html[data-det-theme='dark'] .dpe-section h3 {
            border-bottom-color: rgba(255, 255, 255, 0.1);
        }
        .dpe-section p,
        .dpe-section li {
            font-size: 0.8rem;
            line-height: 1.45;
            color: var(--muted);
        }
        .dpe-section p {
            margin: 0 0 6px;
        }
        .dpe-section p:last-child {
            margin-bottom: 0;
        }
        .dpe-list-num {
            margin: 0;
            padding-left: 1.1rem;
        }
        .dpe-list-num li {
            margin-bottom: 4px;
        }
        .dpe-list-num li:last-child {
            margin-bottom: 0;
        }
        .dpe-callout {
            margin-top: 8px;
            padding: 10px 12px;
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(224, 242, 254, 0.35) 0%, rgba(241, 245, 249, 0.9) 100%);
            border: 1px solid rgba(2, 132, 199, 0.18);
            border-left: 3px solid #0284c7;
        }
        html[data-det-theme='dark'] .dpe-callout {
            background: rgba(30, 58, 95, 0.2);
            border-color: rgba(56, 189, 248, 0.2);
            border-left-color: #38bdf8;
        }
        .dpe-callout p {
            margin: 0;
            font-size: 0.78rem;
            line-height: 1.45;
            color: var(--text);
        }
        .dpe-callout strong {
            color: #334155;
            font-weight: 700;
        }
        html[data-det-theme='dark'] .dpe-callout strong {
            color: #e8eaed;
        }
        .dpe-foot {
            margin-top: 4px;
            padding-top: 12px;
            border-top: 1px solid #e2e8f0;
            font-size: 0.72rem;
            line-height: 1.45;
            color: var(--muted);
        }
        html[data-det-theme='dark'] .dpe-foot {
            border-top-color: rgba(255, 255, 255, 0.1);
        }
        .dpe-foot a {
            color: #475569;
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .dpe-foot a:hover,
        .dpe-foot a:focus-visible {
            color: #0f172a;
        }
        html[data-det-theme='dark'] .dpe-foot a {
            color: #9ca8b8;
        }
        html[data-det-theme='dark'] .dpe-foot a:hover,
        html[data-det-theme='dark'] .dpe-foot a:focus-visible {
            color: #c5ccd6;
        }

        /* Modal explicação: idioma PT / EN */
        .dpe-lang-bar {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 3;
            display: flex;
            gap: 0;
            border-radius: 8px;
            border: 1px solid #cbd5e1;
            overflow: hidden;
            background: #f1f5f9;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
        }
        html[data-det-theme='dark'] .dpe-lang-bar {
            background: #353b45;
            border-color: rgba(255, 255, 255, 0.12);
        }
        .dpe-lang-btn {
            margin: 0;
            padding: 7px 14px;
            border: none;
            background: transparent;
            font-family: inherit;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            cursor: pointer;
            color: var(--muted);
            touch-action: manipulation;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .dpe-lang-btn:hover,
        .dpe-lang-btn:focus-visible {
            background: rgba(2, 132, 199, 0.08);
            color: var(--text);
            outline: none;
        }
        .dpe-lang-btn--active {
            background: rgba(2, 132, 199, 0.18);
            color: #0369a1;
        }
        html[data-det-theme='dark'] .dpe-lang-btn--active {
            background: rgba(56, 189, 248, 0.15);
            color: #7dd3fc;
        }
        .dpe-explainer-lang-en {
            display: none;
        }
        #detPlatformExplainerModal.dpe-explainer--en .dpe-explainer-lang-pt {
            display: none !important;
        }
        #detPlatformExplainerModal.dpe-explainer--en .dpe-explainer-lang-en {
            display: block !important;
        }
        /* Espaço no topo do scroll para a barra PT/EN e o botão fechar */
        #detPlatformExplainerModal .dpe-scroll {
            flex: 1;
            min-height: 0;
            padding-top: 52px;
        }
        #detPlatformExplainerModal .dpe-hero {
            margin: 0 -16px 12px -16px;
            padding: 16px 52px 14px 16px;
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(241, 245, 249, 0.95) 100%);
        }
        html[data-det-theme='dark'] #detPlatformExplainerModal .dpe-hero {
            background: linear-gradient(180deg, rgba(45, 50, 58, 0.98) 0%, rgba(38, 42, 50, 0.96) 100%);
        }
        .dpe-kicker {
            display: block;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #64748b;
            margin-bottom: 6px;
        }
        html[data-det-theme='dark'] .dpe-kicker {
            color: #94a3b8;
        }
        .dpe-ul-compact {
            list-style: none;
            padding: 0;
            margin: 0 0 4px;
        }
        .dpe-ul-compact li {
            position: relative;
            padding-left: 13px;
            margin-bottom: 5px;
            font-size: 0.78rem;
            line-height: 1.4;
            color: var(--muted);
        }
        .dpe-ul-compact li:last-child {
            margin-bottom: 0;
        }
        .dpe-ul-compact li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.52em;
            width: 5px;
            height: 5px;
            border-radius: 1px;
            background: #94a3b8;
        }
        html[data-det-theme='dark'] .dpe-ul-compact li::before {
            background: #6b7280;
        }
        .dpe-one-liner {
            font-size: 0.78rem;
            line-height: 1.45;
            color: var(--muted);
            margin: 0 0 8px;
        }

        /* Viewports estreitos: evita a grelha principal expandir largura intrínseca após load completo. */
        @media (max-width: 1023.98px) {
            .det-layout-page {
                flex-direction: column !important;
                align-items: stretch !important;
                max-width: 100vw !important;
            }
            .det-layout-page__main {
                min-width: 0 !important;
                max-width: 100% !important;
                width: 100% !important;
            }
            .wrap {
                min-width: 0 !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            .det-layout {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) !important;
                min-width: 0 !important;
                max-width: 100% !important;
                width: 100% !important;
            }
        }