:root {
            --peers-blue: #011334;
            --peers-lime: #e1ff00;
            --peers-white: #ffffff;
            --grey-100: #f9fafb;
            --grey-200: #f4f6f8;
            --grey-300: #dfe3e8;
            --grey-400: #c4cdd5;
            --grey-500: #919eab;
            --grey-600: #637381;
            --grey-700: #454f5b;
            --space-2: 16px;
            --space-3: 24px;
            --space-4: 32px;
            --font-primary: 'Public Sans', 'Public Sans Variable', sans-serif;
            --font-secondary: 'Barlow', sans-serif;
            --shadow-md: 0 4px 8px 0 rgba(145, 158, 171, 0.16);
            --shadow-lg: 0 8px 24px 0 rgba(145, 158, 171, 0.16);
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-full: 9999px;
        }
        * { box-sizing: border-box; }
        /* body é flex-column + no-scroll (site.css) -- .tg-topnav e .tg-map-shell
           são itens desse flex, sem position:fixed e sem calc() manual de
           --env-banner-h: o layout empurra tudo pra baixo da tarja de ambiente
           sozinho, do mesmo jeito que .site-header/.env-banner já fazem. */
        html { background-color: var(--grey-200); }
        body {
            font-family: var(--font-primary);
            background-color: var(--grey-200);
        }
        .header-note {
            position: absolute;
            top: 12px; left: 50%; transform: translateX(-50%);
            z-index: 20;
            font-size: 0.72rem;
            color: var(--grey-500);
            background: rgba(255,255,255,0.9);
            padding: 4px 14px;
            border-radius: var(--radius-full);
            text-align: center;
            max-width: min(560px, 70vw);
        }

        .tg-topnav {
            flex-shrink: 0; height: 40px;
            display: flex; align-items: center; gap: 4px;
            background: var(--peers-blue); border-bottom: 2px solid var(--peers-lime);
            padding: 0 14px; font-size: 0.78rem;
        }
        .tg-topnav__brand { font-family: var(--font-secondary); color: var(--grey-400); font-weight: 700; margin-right: 10px; white-space: nowrap; }
        .tg-topnav a { display: inline-flex; align-items: center; font-family: var(--font-secondary); color: var(--grey-300); text-decoration: none; padding: 6px 10px; border-radius: var(--radius-md); font-weight: 600; }
        .tg-topnav a:hover { color: var(--peers-white); background: rgba(255,255,255,0.08); }
        .tg-topnav a.is-active { color: var(--peers-blue); background: var(--peers-lime); }
        .tg-map-shell { position: relative; flex: 1; min-height: 0; width: 100%; background: var(--grey-200); }
        .tg-map-canvas { width: 100%; height: 100%; }
        .tg-map-panel {
            position: absolute;
            background: rgba(255,255,255,0.97);
            backdrop-filter: blur(10px);
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            z-index: 10;
            padding: 14px 16px;
        }
        .tg-map-panel__title {
            font-weight: 800; font-size: 0.68rem; text-transform: uppercase;
            letter-spacing: 0.05em; color: var(--grey-500); margin: 0 0 8px;
        }
        .tg-map-filters { top: 16px; left: 16px; width: 250px; max-height: calc(100% - 32px); overflow-y: auto; }
        .tg-map-filters__group { margin-bottom: 10px; }
        .tg-map-filters__group:last-child { margin-bottom: 0; }
        .tg-map-filters label { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--grey-700); padding: 2px 0; cursor: pointer; }
        .tg-map-filters input[type="checkbox"] { accent-color: var(--peers-blue); cursor: pointer; }
        .tg-map-filters__actions { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--grey-200); }
        .tg-map-btn { font-size: 0.68rem; font-weight: 700; border: 1px solid var(--grey-300); background: var(--peers-white); border-radius: var(--radius-full); padding: 4px 10px; cursor: pointer; color: var(--grey-600); }
        .tg-map-btn:hover { border-color: var(--peers-blue); color: var(--peers-blue); }
        .tg-map-dropdown { position: relative; }
        .tg-map-dropdown__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 0.78rem; color: var(--grey-700); background: var(--peers-white); border: 1px solid var(--grey-300); border-radius: var(--radius-md); padding: 6px 10px; cursor: pointer; text-align: left; }
        .tg-map-dropdown__btn:hover, .tg-map-dropdown__btn[aria-expanded="true"] { border-color: var(--peers-blue); }
        .tg-map-dropdown__arrow { color: var(--grey-500); flex-shrink: 0; }
        .tg-map-dropdown__panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--peers-white); border: 1px solid var(--grey-300); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px 10px; max-height: 260px; overflow-y: auto; }
        .tg-map-legend { bottom: 16px; left: 16px; width: 250px; font-size: 0.76rem; max-height: calc(100% - 32px); overflow-y: auto; }
        .tg-map-legend__row { display: flex; align-items: center; gap: 8px; padding: 2px 0; color: var(--grey-700); }
        .tg-map-legend__dot { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
        .tg-map-legend__shape { width: 16px; height: 12px; flex-shrink: 0; display: inline-block; border: 2px solid var(--grey-600); box-sizing: border-box; }
        .tg-map-legend__shape--caso { border-radius: 50%; }
        .tg-map-legend__shape--risco { transform: rotate(45deg); width: 11px; height: 11px; }
        .tg-map-legend__line { width: 22px; height: 0; border-top: 2px solid var(--grey-600); flex-shrink: 0; display: inline-block; }
        .tg-map-legend__line--dash { border-top-style: dashed; }
        .tg-map-controls { position: absolute; bottom: 16px; right: 16px; z-index: 10; display: flex; flex-direction: column; gap: 6px; }
        .tg-map-controls button { background: var(--peers-white); border: 1px solid var(--grey-300); border-radius: var(--radius-md); width: 34px; height: 34px; font-weight: 700; font-size: 1.05rem; color: var(--grey-700); cursor: pointer; box-shadow: var(--shadow-md); }
        .tg-map-controls button:hover { color: var(--peers-blue); border-color: var(--peers-blue); }
        .tg-map-detail {
            top: 16px; right: 16px; width: 380px; max-width: calc(100vw - 32px); max-height: calc(100% - 32px);
            overflow-y: auto; border-top: 4px solid var(--peers-lime);
            transform: translateX(420px); opacity: 0;
            transition: transform 0.2s ease, opacity 0.2s ease; pointer-events: none;
        }
        .tg-map-detail.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; }
        .tg-map-detail__close { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 1.05rem; color: var(--grey-400); cursor: pointer; padding: 4px; }
        .tg-map-detail__close:hover { color: var(--peers-blue); }
        .tg-map-detail__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
        .tg-map-tag { display: inline-flex; align-items: center; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; border-radius: var(--radius-full); padding: 2px 9px; white-space: nowrap; }
        .tg-map-detail h3 { font-family: var(--font-secondary); margin: 0 0 4px; font-size: 1.05rem; color: var(--peers-blue); padding-right: 22px; line-height: 1.35; }
        .tg-topnav svg, .tg-map-legend__row svg { vertical-align: -2px; margin-right: 4px; }
        .tg-map-detail__status { font-size: 0.74rem; font-weight: 600; color: var(--grey-500); margin: 0 0 12px; }
        .tg-map-detail__desc { font-size: 0.84rem; color: var(--grey-700); line-height: 1.6; margin: 0 0 10px; white-space: pre-line; }
        .tg-map-detail__desc strong { color: var(--peers-blue); }
        .tg-map-detail__source { font-size: 0.72rem; color: var(--grey-400); border-top: 1px solid var(--grey-200); padding-top: 8px; margin: 0; }
        .tg-map-hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 0.72rem; color: var(--grey-500); background: rgba(255,255,255,0.9); padding: 4px 12px; border-radius: var(--radius-full); z-index: 5; pointer-events: none; }