.airmei-traffic-panel {
    position: relative;
    width: 100%;
    font-family: 'Roboto', Arial, sans-serif;
}

.airmei-traffic-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}

.airmei-traffic-stat {
    min-height: 82px;
    padding: 14px 16px;
    border: 1px solid rgba(248, 249, 250, .17);
    border-radius: 6px;
    background: rgba(248, 249, 250, .045);
    color: #f8f9fa;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.airmei-traffic-stat:hover,
.airmei-traffic-stat.is-active {
    border-color: #fada5e;
    background: rgba(250, 218, 94, .10);
}

.airmei-traffic-stat.is-active {
    box-shadow: inset 0 0 0 1px rgba(250, 218, 94, .22), 0 8px 24px rgba(0, 0, 0, .14);
}

.airmei-traffic-stat span,
.airmei-traffic-stat small,
.airmei-traffic-stat strong {
    display: block;
}

.airmei-traffic-stat span {
    color: rgba(248, 249, 250, .66);
    font-size: 12px;
    line-height: 1.2;
}

.airmei-traffic-stat strong {
    margin: 5px 0 2px;
    color: #f8f9fa;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.airmei-traffic-stat small {
    color: #fada5e;
    font-size: 10px;
    line-height: 1.2;
}

.airmei-traffic-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(248, 249, 250, .08);
    color: rgba(248, 249, 250, .56);
    font-size: 10px;
    line-height: 1.35;
}

.airmei-traffic-breakdown span,
.airmei-traffic-breakdown strong {
    display: inline;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.airmei-traffic-breakdown strong {
    color: rgba(248, 249, 250, .82);
    font-weight: 600;
}

/* Commercial stat-card details: a stable secondary row keeps each card aligned. */
.airmei-traffic-stat {
    position: relative;
    display: flex;
    min-height: 112px;
    flex-direction: column;
}

.airmei-traffic-stat .airmei-traffic-stat-title {
    padding-right: 118px;
    color: rgba(248, 249, 250, .88);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
}

.airmei-traffic-stat.is-active .airmei-traffic-stat-title {
    color: #fada5e;
}

.airmei-traffic-tag,
.airmei-traffic-live-status {
    position: absolute;
    top: 10px;
    right: 11px;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    border: 1px solid rgba(248, 249, 250, .08);
    border-radius: 3px;
    background: rgba(0, 0, 0, .28);
    color: rgba(248, 249, 250, .72) !important;
    font-size: 11px !important;
    font-weight: 600;
    font-style: normal;
    line-height: 1;
    white-space: nowrap;
}

.airmei-traffic-live-status {
    color: #fada5e !important;
}

.airmei-traffic-live-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fada5e;
    box-shadow: 0 0 9px rgba(250, 218, 94, .84);
    animation: airmei-traffic-live-pulse 1.45s ease-in-out infinite;
}

.airmei-traffic-metric {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-height: 29px;
    margin: 4px 0 5px;
}

.airmei-traffic-stat .airmei-traffic-metric strong {
    display: inline;
    margin: 0;
    color: #f8f9fa;
    font-size: 24px;
    line-height: 1;
}

.airmei-traffic-growth {
    display: inline !important;
    color: #fada5e !important;
    font-size: 11px !important;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.airmei-traffic-breakdown {
    min-height: 25px;
    margin-top: auto;
    padding-top: 7px;
    color: rgba(248, 249, 250, .72);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
}

.airmei-traffic-breakdown span {
    color: rgba(248, 249, 250, .72) !important;
    font-size: 12px !important;
}

@keyframes airmei-traffic-live-pulse {
    0%, 100% { opacity: .55; transform: scale(.82); }
    50% { opacity: 1; transform: scale(1.18); }
}

.airmei-map-shell {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    background: #111315;
    border: 0;
    border-radius: 0;
}

/* 地图容器按世界地图原始比例（900 × 440.7）留出空间，让 SVG 始终自适应容器宽度。
   为什么是 2.3:1 而不是 2:1：站点用的是"太平洋居中"投影（applyPacificCenteredProjection），
   把西半球整体 +525 个单位后，区域实际覆盖 x 14..943（超过 900 宽的世界坐标系），
   按 2:1 建容器时右侧会被裁掉约 2-5%——1440 视口实测裁掉 36px、360 视口裁掉 9px。
   取 2.3:1 后可见区间约 [-57, 957]，刚好把整幅地图包进来；多出的边距与面板同色（#111111），
   肉眼不可见，等于"地图自适应容器宽度、不裁边"。 */
.global-reach-section .global-reach-map {
    display: flex;
    align-items: center;
}

.global-reach-section .global-reach-map .airmei-map-shell,
.global-reach-section .global-reach-map #world-map {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 2.3 / 1;
}

.airmei-map-controls {
    position: absolute;
    z-index: 8;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
}

/* Map navigation is intentionally removed from the final visual composition. */
.airmei-map-controls {
    display: none !important;
}

.airmei-map-control {
    min-width: 34px;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid rgba(248, 249, 250, .22);
    border-radius: 4px;
    background: rgba(17, 19, 21, .88);
    color: #f8f9fa;
    font: 500 14px/1 'Roboto', Arial, sans-serif;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.airmei-map-control--wide { font-size: 11px; }

.airmei-map-control:hover,
.airmei-map-control:focus-visible,
.airmei-map-shell.is-fullscreen .airmei-map-control[aria-pressed="true"] {
    border-color: #fada5e;
    background: rgba(250, 218, 94, .12);
    color: #fada5e;
}

.airmei-map-shell:fullscreen {
    width: 100vw;
    height: 100vh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: #111315;
}

.airmei-map-shell:fullscreen #world-map {
    width: 100%;
    height: 100%;
}

.airmei-map-controls {
    position: absolute;
    z-index: 8;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
}

.airmei-map-control {
    min-width: 34px;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid rgba(248, 249, 250, .22);
    border-radius: 4px;
    background: rgba(17, 19, 21, .88);
    color: #f8f9fa;
    font: 500 14px/1 'Roboto', Arial, sans-serif;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.airmei-map-control--wide { font-size: 11px; }

.airmei-map-control:hover,
.airmei-map-control:focus-visible,
.airmei-map-shell.is-fullscreen .airmei-map-control[aria-pressed="true"] {
    border-color: #fada5e;
    background: rgba(250, 218, 94, .12);
    color: #fada5e;
}

.airmei-map-shell:fullscreen {
    width: 100vw;
    height: 100vh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: #111315;
}

.airmei-map-shell:fullscreen #world-map {
    width: 100%;
    height: 100%;
}

#world-map {
    width: 100%;
    height: 680px;
    background: #111315;
}

.airmei-map-shell .jvm-line {
    stroke: #fada5e !important;
    stroke-width: 2.5px !important;
    stroke-opacity: .9 !important;
    stroke-dasharray: 6 6;
    animation: airmei-route-flow 1s linear infinite;
    filter: drop-shadow(0 0 5px rgba(250, 218, 94, .76));
}

.airmei-map-shell .jvm-marker {
    opacity: 0 !important;
}

.map-area .point {
    z-index: 3;
}

.map-area .info-card {
    z-index: 4;
}

.airmei-hq-beacon {
    position: absolute;
    z-index: 5;
    width: 24px;
    height: 24px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.airmei-hq-beacon-ring,
.airmei-hq-beacon-core {
    position: absolute;
    border-radius: 50%;
}

.airmei-hq-beacon-ring {
    inset: 0;
    border: 1.5px solid rgba(250, 218, 94, .9);
    animation: airmei-hq-beacon 1.8s cubic-bezier(.15, .72, .35, 1) infinite;
}

.airmei-hq-beacon-ring--inner {
    animation-delay: .9s;
}

.airmei-hq-beacon-core {
    inset: 8px;
    background: #fada5e;
    box-shadow: 0 0 0 5px rgba(250, 218, 94, .2), 0 0 20px rgba(250, 218, 94, 1);
}

.airmei-partner-beacons {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.airmei-partner-beacon {
    position: absolute;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
}

.airmei-partner-beacon-halo,
.airmei-partner-beacon-core {
    position: absolute;
    border-radius: 50%;
}

.airmei-partner-beacon-halo {
    inset: 0;
    background: rgba(250, 218, 94, .6);
    box-shadow: 0 0 10px rgba(250, 218, 94, .86);
}

.airmei-partner-beacon-core {
    inset: 3px;
    background: #fff;
    box-shadow: 0 0 5px rgba(255, 255, 255, .92);
}

.airmei-partner-beacon-label {
    position: absolute;
    left: 15px;
    top: -5px;
    padding: 2px 4px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* 圆点太靠右时（窄屏必现），国家标签翻到圆点左侧，避免被容器裁掉。 */
.airmei-partner-beacon.is-label-left .airmei-partner-beacon-label {
    left: auto;
    right: 15px;
}

.airmei-hq-beacon-label {
    display: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .26);
}

.airmei-hq-beacon-label strong {
    color: #fada5e;
    white-space: nowrap;
}

.airmei-hq-beacon-label span {
    color: rgba(248, 249, 250, .74);
}

@keyframes airmei-hq-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.45); opacity: .66; }
}

@keyframes airmei-hq-beacon {
    0% { transform: scale(.45); opacity: .92; }
    70%, 100% { transform: scale(3.3); opacity: 0; }
}

@keyframes airmei-route-flow {
    from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: 0; }
}

@media (max-width: 768px) {
    .airmei-traffic-stats {
        gap: 6px;
    }

    .airmei-traffic-stat {
        min-height: 0;
        padding: 10px 9px;
    }

    /* 2026-09-18 用户报"手机端这里有溢出"：
       ① 数字用了 24px（.airmei-traffic-stat .airmei-traffic-metric strong 比旧的
          `.airmei-traffic-stat strong{15px}` 更具体，媒体查询压不住）→ 三张卡的数字挤在一起；
       ② 标题的 padding-right:118px 是给"右上角标签"预留的，窄屏把标题挤没；
       ③ 标签绝对定位在右上角，正好压住数字。
       下面按同样（或更高）具体度重写，位置在文件末尾 → 一定生效。 */
    .airmei-traffic-stat .airmei-traffic-stat-title {
        padding-right: 0;
        font-size: 12px;
        line-height: 1.25;
    }

    .airmei-traffic-stat .airmei-traffic-tag,
    .airmei-traffic-stat .airmei-traffic-live-status {
        position: static;
        margin: 4px 0 2px;
        align-self: flex-start;
        white-space: normal;
    }

    .airmei-traffic-stat .airmei-traffic-metric {
        flex-wrap: wrap;
        gap: 4px 8px;
        min-height: 0;
        margin: 6px 0 4px;
    }

    .airmei-traffic-stat .airmei-traffic-metric strong {
        font-size: 22px;
        white-space: nowrap;
    }

    /* 涨幅标签原来是 nowrap（"↑ 14,8 % im Vergleich zum Vormonat" 在 600px 宽下会顶出卡片 20px），
       窄屏允许换行。 */
    .airmei-traffic-stat .airmei-traffic-growth {
        white-space: normal;
    }

    .airmei-traffic-stat .airmei-traffic-breakdown {
        min-height: 0;
        font-size: 11px;
    }

    .airmei-traffic-stat strong {
        font-size: 15px;
    }

    .airmei-traffic-stat span,
    .airmei-traffic-stat small {
        font-size: 9px;
    }

    .airmei-map-shell,
    #world-map {
        min-height: 330px;
        height: 330px;
    }

    /* 窄屏：外层不再固定高度，让下面的 2.3:1 比例说了算（详见全局规则）。 */
    .global-reach-section .global-reach-map {
        height: auto !important;
    }

    /* 窄屏标签缩小一点，减少相邻国家标签互相压盖。 */
    .airmei-partner-beacon-label {
        padding: 1px 3px;
        font-size: 9px;
    }

    .airmei-map-controls { top: 8px; right: 8px; gap: 4px; }
    .airmei-map-control { min-width: 30px; min-height: 30px; padding: 5px 7px; }
    .airmei-map-control--wide { font-size: 10px; }

    .airmei-map-controls { top: 8px; right: 8px; gap: 4px; }
    .airmei-map-control { min-width: 30px; min-height: 30px; padding: 5px 7px; }
    .airmei-map-control--wide { font-size: 10px; }

    .airmei-hq-beacon-label {
        max-width: 175px;
        font-size: 10px;
    }
}

/* 真·窄屏（手机）：三张统计卡改成单列，彻底告别横向挤压。 */
@media (max-width: 560px) {
    .airmei-traffic-stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .airmei-traffic-stat {
        padding: 12px 12px 10px;
    }

    .airmei-traffic-stat .airmei-traffic-stat-title {
        font-size: 13px;
    }

    .airmei-traffic-stat .airmei-traffic-metric strong {
        font-size: 24px;
    }

    .airmei-traffic-stat .airmei-traffic-breakdown {
        font-size: 12px;
    }
}