/* My Snow Life — abas dos 3 sistemas na barra de cima: Forecast · Mapa · 3DMaps (a da página atual fica acesa, class="on").
   Mesmo HTML no Mapa (STE/Mapa2), na Previsão (api/MslHeader.php) e no 3D (Resorts3D tools/theme.mysnowlife.json):
   <nav class="msl-sys"><a href="/previsao/">Forecast</a><a href="/mapa/" data-en="Map">Mapa</a><a href="/3d/">3DMaps</a></nav>
   No celular (até 768 px) as abas somem da barra; os 3 sistemas continuam no ☰. */
.msl-sys { flex: none; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 100px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.msl-sys a { display: block; padding: 7px 13px; border-radius: 100px; white-space: nowrap; text-decoration: none;
    font: 700 13.5px/1 'Archivo', sans-serif; font-stretch: 108%; letter-spacing: -.005em; color: rgba(244, 247, 250, .72);
    transition: background-color .2s, color .2s; }
.msl-sys a:hover { color: #F4F7FA; background: rgba(255, 255, 255, .08); }
.msl-sys a.on { color: #FF5B2E; background: rgba(255, 91, 46, .14); }
.msl-sys a:focus-visible { outline: 2px solid #3FA9F5; outline-offset: 1px; }
@media (min-width: 769px) and (max-width: 1000px) { .msl-sys a { padding: 7px 9px; font-size: 12.5px; } }   /* tablet: barra mais justa */
@media (max-width: 768px) { .msl-sys { display: none; } }
@media print { .msl-sys { display: none; } }