@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Mono:wght@400;700&display=swap');

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(0.5px 0.5px at 10% 20%, rgba(255, 121, 0, 0.9), transparent),
        radial-gradient(0.5px 0.5px at 80% 80%, rgba(255, 121, 0, 0.7), transparent),
        radial-gradient(1px 1px at 40% 40%, rgba(255, 121, 0, 0.5), transparent),
        radial-gradient(0.5px 0.5px at 90% 10%, rgba(255, 121, 0, 0.8), transparent),
        radial-gradient(1px 1px at 30% 70%, rgba(255, 121, 0, 0.6), transparent),
        linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
    background-size: 200px 200px, 300px 300px, 150px 150px, 250px 250px, 180px 180px, 100% 100%;
    animation: cosmicBackground 40s linear infinite;
    font-family: 'Space Mono', monospace;
    overflow: hidden;
    color: #ffffff;
}

@keyframes cosmicBackground {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0% 0%;
    }
    100% {
        background-position: 200px 200px, -300px 300px, 150px -150px, -250px 250px, 180px -180px, 0% 0%;
    }
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-content {
    text-align: center;
}

.loading-text {
    font-size: 24px;
    font-weight: bold;
    color: #FF7900;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.progress-container {
    width: 350px;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.progress-bar-horizontal {
    display: flex;
    gap: 6px;
    align-items: center;
}

.progress-rect {
    width: 25px;
    height: 12px;
    background-color: #222;
    border: 1px solid #444;
    transition: all 0.4s ease;
}

.progress-rect.active {
    background: #FF7900;
    box-shadow: 0 0 10px rgba(255, 121, 0, 0.7);
    border-color: #FF7900;
    transform: scale(1.1);
}

.loading-log {
    margin-top: 30px;
    width: 100%;
    min-height: 100px;
}

.log-container {
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
}

.log-line {
    color: #666;
    font-size: 13px;
    font-family: 'Space Mono', monospace;
    margin: 8px 0;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s ease;
}

.log-line.visible {
    opacity: 1;
    transform: translateX(0);
}

.log-line.active {
    color: #FF7900;
    text-shadow: 0 0 8px rgba(255, 121, 0, 0.6);
}

.log-line.completed {
    color: #00ff00;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
}

.log-line.error {
    color: #ff4444;
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.6);
}

#logRetry {
    color: #ffaa00;
    font-size: 13px;
    margin-left: 20px;
}

#logRetry.active {
    animation: retryPulse 1s ease-in-out infinite;
}

@keyframes retryPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1.0; }
}

/* Authentication Choice Toggle */
.auth-choice {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.auth-choice.visible {
    opacity: 1;
    transform: translateY(0);
}

.auth-toggle {
    display: flex;
    background: #333;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #FF7900;
}

.auth-btn {
    padding: 8px 20px;
    background: transparent;
    border: none;
    color: #ccc;
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.auth-btn.auth-btn-active {
    background: #FF7900;
    color: #1a1a1a;
    box-shadow: 0 0 10px rgba(255, 121, 0, 0.5);
}

.auth-btn.skip-active {
    background: #000000 !important;
    color: #FF7900 !important;
    box-shadow: 0 0 10px rgba(255, 121, 0, 0.3) !important;
}

.auth-btn:hover:not(.auth-btn-active) {
    background: rgba(255, 121, 0, 0.2);
    color: #FF7900;
}

/* Mobile styles for authentication choice using adapt.js classes */
body.mobile .auth-choice {
    margin-top: 20px;
    transform: translateY(15px);
}

body.mobile .auth-choice.visible {
    transform: translateY(0);
}

body.mobile .auth-toggle {
    border-radius: 15px;
    border: 2px solid #FF7900;
    box-shadow: 0 2px 10px rgba(255, 121, 0, 0.3);
}

body.mobile .auth-btn {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1.5px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.mobile .auth-btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

body.mobile .auth-btn.auth-btn-active {
    box-shadow: 0 0 15px rgba(255, 121, 0, 0.7);
}

body.mobile .auth-btn.skip-active {
    box-shadow: 0 0 15px rgba(255, 121, 0, 0.5) !important;
}

/* Loading Version Display - только для мобильных */
.loading-version {
    display: none; /* По умолчанию скрыто */
}

/* Показывать версию только на мобильных устройствах */
body.mobile .loading-version {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #666;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    opacity: 0.7;
}

/* Extra small mobile devices */
body.extra-small-screen .auth-choice {
    margin-top: 15px;
}

body.extra-small-screen .auth-toggle {
    border-radius: 12px;
    width: 280px;
    margin: 0 auto;
}

body.extra-small-screen .auth-btn {
    padding: 10px 20px;
    font-size: 12px;
    min-width: 100px;
    flex: 1;
}

/* Main Application */
.main-app {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-area {
    flex: 1;
    display: flex;
    height: calc(100vh - 100px); /* Учитываем высоту верхней (40px) и нижней (60px) панелей */
}

/* Status Bar */
.status-bar {
    height: 40px;
    background: black;
    border-bottom: 1px solid #FF7900;
    box-shadow: 0 0 5px rgba(255, 121, 0, 0.1);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    z-index: 100;
    position: relative;
}

.status-controls {
    display: flex;
    gap: 15px;
}

.top-btn {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #FF7900; /* Thinner border like bottom buttons */
    color: #FF7900; /* Orange text */
    padding: 5px 12px;
    height: 26px; /* Same height as bottom buttons */
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: none; /* Remove shadow for clean style */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: none; /* Remove text shadow for clean style */
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0; /* Rectangle like bottom buttons */
}

.top-btn:hover {
    background-color: #FF7900;
    color: #1a1a1a;
    box-shadow: 0 0 10px rgba(255, 121, 0, 0.5);
}

.status-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(0.7px 0.7px at 18% 35%, #FF7900, transparent),
        radial-gradient(1.3px 1.3px at 75% 65%, rgba(255, 121, 0, 0.7), transparent),
        radial-gradient(0.5px 0.5px at 40% 80%, rgba(255, 121, 0, 0.5), transparent),
        radial-gradient(1.8px 1.8px at 90% 20%, rgba(255, 121, 0, 0.4), transparent),
        radial-gradient(1px 1px at 25% 55%, rgba(255, 121, 0, 0.6), transparent),
        radial-gradient(2.2px 2.2px at 60% 10%, rgba(255, 121, 0, 0.3), transparent);
    background-size: 70px 70px, 110px 110px, 85px 85px, 140px 140px, 95px 95px, 170px 170px;
    animation: starFieldTop 22s linear infinite;
    z-index: -1;
}

/* Side Panels */
.side-panel {
    background: black;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

.left-panel {
    width: 250px;
    border-right: 1px solid #FF7900;
    box-shadow: 2px 0 5px rgba(255, 121, 0, 0.1);
}

.left-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(0.8px 0.8px at 15% 25%, #FF7900, transparent),
        radial-gradient(1.2px 1.2px at 85% 75%, rgba(255, 121, 0, 0.7), transparent),
        radial-gradient(0.6px 0.6px at 45% 15%, rgba(255, 121, 0, 0.5), transparent),
        radial-gradient(1.5px 1.5px at 70% 85%, rgba(255, 121, 0, 0.4), transparent),
        radial-gradient(0.9px 0.9px at 30% 60%, rgba(255, 121, 0, 0.6), transparent),
        radial-gradient(2px 2px at 55% 40%, rgba(255, 121, 0, 0.2), transparent);
    background-size: 65px 65px, 95px 95px, 75px 75px, 130px 130px, 85px 85px, 150px 150px;
    animation: starFieldRandom 18s linear infinite;
    z-index: -1;
}

.right-panel {
    width: 300px; /* 20% wider than left panel */
    border-left: 1px solid #FF7900;
    box-shadow: -2px 0 5px rgba(255, 121, 0, 0.1);
    transition: transform 0.3s ease;
    z-index: 200; /* Same as panel toggle button to be covered by offline overlay */
}

.right-panel.hidden-panel {
    width: 0;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
}

.panel-toggle-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: black;
    border: 1px solid #FF7900;
    color: #FF7900;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.panel-toggle-btn:hover {
    background-color: #FF7900;
    color: black;
    box-shadow: 0 0 10px rgba(255, 121, 0, 0.5);
}

.exit-fullscreen-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: black;
    border: 1px solid #FF7900;
    color: #FF7900;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.exit-fullscreen-btn:hover {
    background-color: #FF7900;
    color: black;
    box-shadow: 0 0 10px rgba(255, 121, 0, 0.5);
}

.side-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(1px 1px at 20% 30%, #FF7900, transparent),
        radial-gradient(1px 1px at 80% 70%, rgba(255, 121, 0, 0.6), transparent),
        radial-gradient(2px 2px at 50% 50%, rgba(255, 121, 0, 0.2), transparent);
    background-size: 80px 80px, 120px 120px, 160px 160px;
    animation: starField 20s linear infinite;
    z-index: -1;
}

@keyframes starField {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
    }
    100% {
        background-position: 100px 100px, -150px 150px, 80px -80px, -120px 120px, 200px -200px;
    }
}

@keyframes starFieldTop {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
    }
    100% {
        background-position: 70px 70px, -110px 110px, 85px -85px, -140px 140px, 95px -95px, 170px -170px;
    }
}

@keyframes starFieldRandom {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
    }
    100% {
        background-position: -65px 65px, 95px -95px, -75px 75px, 130px -130px, -85px 85px, 150px -150px;
    }
}

@keyframes starFieldBottom {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
    }
    100% {
        background-position: 75px -75px, -105px 105px, 125px -125px, -90px 90px, 155px -155px, -115px 115px;
    }
}

.panel-title {
    color: #FF7900;
    font-family: 'Orbitron', monospace;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    border-top: 1px solid #FF7900;
    border-bottom: 1px solid #FF7900;
    padding-top: 10px;
    padding-bottom: 10px;
    text-shadow: 0 0 8px rgba(255, 121, 0, 0.5);
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-bottom: 20px;
}

.status-item-invisible {
    opacity: 0;
    pointer-events: none;
}

.status-label {
    color: #ccc;
    font-size: 14px;
    font-family: 'Space Mono', monospace;
}

.status-value {
    color: #00ff00;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Orbitron', monospace;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}

.status-value.status-error {
    color: #ff4444;
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
}

.status-value.status-offline {
    color: #ffaa00;
    text-shadow: 0 0 8px rgba(255, 170, 0, 0.5);
}

.status-value.status-update {
    color: #ffdd00;
    text-shadow: 0 0 8px rgba(255, 221, 0, 0.8);
    animation: updatePulse 1.5s ease-in-out infinite;
}

@keyframes updatePulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1.0; }
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #333;
}

.stat-label {
    color: #ccc;
    font-size: 14px;
}

.stat-value {
    color: #FF7900;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 121, 0, 0.5);
}

.panel-spacer {
    flex: 1;
}

.add-btn {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #FF7900;
    color: #FF7900;
    padding: 12px 20px;
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(255, 121, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255, 121, 0, 0.5);
}

.add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 121, 0, 0.5);
    background: rgba(0, 0, 0, 0.9);
    border-color: #ffaa44;
    color: #ffaa44;
}

/* Info Content for Right Panel */
.info-content {
    flex: 1;
    padding: 10px 0;
}

.info-item {
    color: #ccc;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #333;
}

/* Globe Container */
.globe-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible; /* Allow glow effect to be visible */
}

/* Offline Screen Overlay */
.offline-overlay {
    position: fixed;
    top: 40px; /* Below status bar */
    left: 250px; /* After left panel */
    right: 0;
    bottom: 60px; /* Above bottom panel */
    background: rgba(0, 0, 0, 0.98);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000 !important; /* Higher than right panel (200) and all other elements */
    transition: all 0.3s ease;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transform: none;
}

.offline-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.offline-content {
    position: relative;
    width: 308px;
    height: 308px;
    background: radial-gradient(circle, rgba(20, 20, 20, 0.95) 0%, rgba(0, 0, 0, 0.98) 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 3px solid #ff0000;
    animation: offlineCirclePulse 1.8s ease-in-out infinite;
    box-shadow:
        0 0 30px rgba(255, 0, 0, 0.5),
        inset 0 0 30px rgba(255, 0, 0, 0.1);
}

.offline-title {
    font-family: 'Orbitron', monospace;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 3px #ff0000;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.offline-status {
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    color: #ffffff;
    text-shadow: 1px 1px 2px #ff0000;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.offline-details {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: #cccccc;
    text-shadow: 0.5px 0.5px 1px #cc0000;
    margin-bottom: 8px;
    opacity: 0.8;
}

.offline-attempts {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: #cccccc;
    text-shadow: 0.5px 0.5px 1px #cc0000;
    margin-bottom: 12px;
    opacity: 0.8;
}

.offline-instructions {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    color: #aaaaaa;
    text-shadow: 0.5px 0.5px 1px #aa0000;
    margin-bottom: 8px;
    opacity: 0.7;
}

.offline-info {
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    color: #999999;
    text-shadow: 0.5px 0.5px 1px #880000;
    opacity: 0.6;
    line-height: 1.2;
    max-width: 200px;
}

@keyframes offlineCirclePulse {
    0%, 100% {
        border-color: #ff0000;
        box-shadow:
            0 0 30px rgba(255, 0, 0, 0.5),
            inset 0 0 30px rgba(255, 0, 0, 0.1);
        transform: scale(1);
    }
    50% {
        border-color: #ff4444;
        box-shadow:
            0 0 50px rgba(255, 0, 0, 0.8),
            inset 0 0 50px rgba(255, 0, 0, 0.2);
        transform: scale(1.02);
    }
}

/* Bottom Panel - Account for mobile navigation */
.bottom-panel {
    height: 60px;
    background: black;
    border-top: 1px solid #FF7900;
    box-shadow: 0 0 5px rgba(255, 121, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    z-index: 100;
    position: relative;
}

/* Mobile Bottom Panel - Account for device navigation */
body.mobile.portrait .bottom-panel {
    position: fixed !important;
    bottom: env(safe-area-inset-bottom, 0) !important;
    left: 0 !important;
    right: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 10px) !important;
    height: calc(60px + env(safe-area-inset-bottom, 10px)) !important;
}

.utc-time-display {
    position: absolute;
    right: 110px;
    color: #FF7900;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 121, 0, 0.5);
    z-index: 101;
}

.version-display {
    position: absolute;
    right: 20px;
    color: #FF7900;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 121, 0, 0.5);
    z-index: 101;
}

.bottom-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(1.1px 1.1px at 25% 40%, #FF7900, transparent),
        radial-gradient(0.8px 0.8px at 70% 80%, rgba(255, 121, 0, 0.8), transparent),
        radial-gradient(1.6px 1.6px at 50% 20%, rgba(255, 121, 0, 0.5), transparent),
        radial-gradient(0.9px 0.9px at 85% 60%, rgba(255, 121, 0, 0.6), transparent),
        radial-gradient(2.1px 2.1px at 35% 70%, rgba(255, 121, 0, 0.3), transparent),
        radial-gradient(1.4px 1.4px at 15% 85%, rgba(255, 121, 0, 0.4), transparent);
    background-size: 75px 75px, 105px 105px, 125px 125px, 90px 90px, 155px 155px, 115px 115px;
    animation: starFieldBottom 19s linear infinite;
    z-index: -1;
}

.bottom-tab-btn {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #FF7900; /* Thinner border like FEED button */
    color: #FF7900; /* Orange text */
    padding: 5px 16px; /* Increased vertical padding for 30% larger height */
    height: 26px; /* Increased from 20px to 26px (30% larger) */
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: none; /* Remove shadow for clean FEED style */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: none; /* Remove text shadow for clean FEED style */
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0; /* Rectangle like FEED button */
    user-select: none; /* Prevent text selection like FEED and CMD buttons */
    -webkit-user-select: none; /* Safari compatibility */
    -moz-user-select: none; /* Firefox compatibility */
    -ms-user-select: none; /* IE/Edge compatibility */
}

.bottom-tab-btn:hover {
    background-color: #FF7900; /* Orange background like FEED */
    color: #1a1a1a; /* Dark text on orange background like FEED */
    box-shadow: 0 0 10px rgba(255, 121, 0, 0.5); /* Subtle glow like FEED */
    transform: none; /* No transform for clean FEED style */
}

.bottom-tab-btn.active {
    background: #FF7900;
    border-color: #FF7900;
    color: #1a1a1a;
    box-shadow: 0 0 20px rgba(255, 121, 0, 0.7);
}

#globeCanvas {
    cursor: grab;
    transition: transform 0.3s ease;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
}

#globeCanvas:active {
    cursor: grabbing;
}

/* Zoom Controls - Independent positioning */
.zoom-controls {
    position: fixed;
    bottom: calc(42px + env(safe-area-inset-bottom, 10px) + 30px); /* Higher position to avoid footer overlap */
    left: 50%; /* Default mobile centering */
    transform: translateX(-50%); /* Default mobile centering */
    display: flex;
    flex-direction: row;
    gap: 12px;
    z-index: 900; /* High z-index for visibility */
    pointer-events: auto; /* Ensure buttons are clickable */
    padding: 4px 8px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 121, 0, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
    transition: left 0.3s ease; /* Smooth transition when panel opens/closes */
}

/* Desktop zoom controls positioning - managed by JavaScript */
body:not(.mobile) .zoom-controls {
    transform: none; /* Remove center transform for desktop, use left positioning */
}

.zoom-btn {
    width: 40px;
    height: 40px;
    background: black;
    border: 1px solid #FF7900;
    color: #FF7900;
    border-radius: 50%;
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-btn:hover {
    background-color: #FF7900;
    color: #1a1a1a;
    box-shadow: 0 0 15px rgba(255, 121, 0, 0.5);
    transform: scale(1.1);
}

.zoom-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: #333 !important;
    color: #666 !important;
    box-shadow: none !important;
    transform: none !important;
}

.zoom-btn:disabled:hover {
    background-color: #333 !important;
    color: #666 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Fullscreen Mode */
body.fullscreen .side-panel,
body.fullscreen .bottom-panel {
    display: none;
}

body.fullscreen .status-bar {
    display: none;
}

body.fullscreen .panel-toggle-btn {
    display: none;
}

body.fullscreen .exit-fullscreen-btn {
    display: flex;
}

body.fullscreen .globe-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 500;
}

body.fullscreen .content-area {
    height: 100vh;
}

/* Mobile Portrait Adaptation */
body.mobile.portrait {
    overflow: hidden;
}

body.mobile.portrait .content-area {
    position: relative !important;
    flex-direction: row !important; /* Keep flex row but override panel positioning */
    height: 100vh !important;
}

/* Mobile Left Panel - Compact 22% height (10% increase), 30% width with precise positioning */
body.mobile.portrait .left-panel {
    position: fixed !important;
    top: 40px !important; /* Below status bar */
    left: 0 !important;
    width: calc(30vw - 1px) !important; /* 30% of screen width minus border for precise alignment */
    height: 22vh !important; /* 22% of screen height - 10% increase from 20% */
    max-height: 22vh !important;
    min-height: 22vh !important;
    border-right: 1px solid #FF7900 !important;
    border-bottom: 1px solid #FF7900 !important;
    box-shadow: 2px 2px 5px rgba(255, 121, 0, 0.1) !important;
    z-index: 150 !important; /* Lower z-index to not block buttons */
    flex: none !important; /* Disable flexbox stretching */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: center !important;
    overflow-y: auto !important;
    padding: 4px !important; /* Very compact padding */
    font-size: 9px !important; /* Very small font for compact view */
}

/* Mobile Right Panel - Slides in from right side, with toggle button visible */
body.mobile.portrait .right-panel {
    position: fixed !important;
    top: 40px !important; /* Below status bar - same as left panel */
    left: calc(100vw - 10px) !important; /* Start off-screen but show toggle button */
    width: 70vw !important; /* Panel width to fit screen when extended (5% wider) */
    height: 22vh !important; /* 22% of screen height - 10% increase from 20% */
    max-height: 22vh !important;
    min-height: 22vh !important;
    border-left: 1px solid #FF7900 !important;
    border-bottom: 1px solid #FF7900 !important;
    box-shadow: -2px 2px 5px rgba(255, 121, 0, 0.1) !important;
    z-index: 160 !important; /* Lower z-index to not block buttons */
    flex: none !important; /* Disable flexbox stretching */
    display: block !important;
    overflow-y: auto !important;
    transition: transform 0.3s ease !important; /* Smooth slide animation */
    padding: 4px !important; /* Very compact padding */
    padding-left: 12px !important; /* Reduced space since button now overlaps border */
    font-size: 9px !important; /* Very small font for compact view */
}

/* Hidden panel state - off screen except 10px toggle button */
body.mobile.portrait .right-panel.hidden-panel {
    transform: translateX(0) !important; /* Panel positioned to show only toggle button */
    overflow: visible !important; /* Allow toggle button to be visible */
}

/* When panel is not hidden, slide it into view stacked after left panel */
body.mobile.portrait .right-panel:not(.hidden-panel) {
    transform: translateX(calc(-70vw + 30vw - 1px)) !important; /* Slide to touch left panel border */
    border-left: none !important; /* Remove left border when stacked with left panel */
}

/* Mobile Panel Content Styles - Ultra Compact with 20% larger text */
body.mobile.portrait .panel-title {
    font-size: 12px !important; /* 20% increase from 10px */
    margin-bottom: 2px !important;
    padding-bottom: 1px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    width: 100% !important;
}

body.mobile.portrait .status-item {
    padding: 1px 0 !important;
    margin-bottom: 1px !important;
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 2px !important;
}

body.mobile.portrait .status-item-invisible {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.mobile.portrait .status-label {
    font-size: 10px !important; /* 20% increase from 8px for labels */
    line-height: 1 !important;
    margin: 0 !important;
}

body.mobile.portrait .status-value {
    font-size: 8px !important; /* Keep original size for status values as requested */
    line-height: 1 !important;
    margin: 0 !important;
}

body.mobile.portrait .stat-item {
    padding: 1px 0 !important;
    margin-bottom: 1px !important;
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 2px !important;
}

body.mobile.portrait .stat-label,
body.mobile.portrait .stat-value {
    font-size: 8px !important; /* 20% increase from 7px to ~8px */
    line-height: 1 !important;
    margin: 0 !important;
}

body.mobile.portrait .add-btn {
    padding: 2px 4px !important;
    font-size: 6px !important;
    margin-top: auto !important;
    min-height: auto !important;
    align-self: flex-start !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 2px !important;
}

body.mobile.portrait .info-item {
    font-size: 8px !important; /* 20% increase from 7px to ~8px */
    padding: 1px 0 !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* Mobile Landscape Adaptation */
body.mobile.landscape .left-panel {
    width: 200px;
}

body.mobile.landscape .right-panel {
    width: 250px;
}

/* Touch Device Optimizations */
body.touch-device .zoom-btn {
    width: 45px;
    height: 45px;
    font-size: 20px;
    margin: 5px 0;
}

body.touch-device .bottom-tab-btn {
    padding: 10px 15px;
    min-height: 44px; /* iOS touch target minimum */
}

/* Override touch device styles for mobile portrait */
body.mobile.portrait.touch-device .bottom-tab-btn {
    min-height: 14px !important; /* Override touch device minimum with new height */
    padding: 2px 8px !important; /* Override touch device padding */
}

body.touch-device .add-btn {
    padding: 15px 20px;
    min-height: 44px;
}

/* Mobile Portrait Zoom Controls - Perfect centered positioning above footer */
/* Mobile Portrait Zoom Controls - Independent positioning, centered in frame */
body.mobile.portrait .zoom-controls {
    position: fixed !important;
    bottom: calc(42px + env(safe-area-inset-bottom, 10px) + 40px) !important; /* 10% higher position */
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    z-index: 900 !important;
    pointer-events: auto !important;
    padding: 4px 8px !important;
    border-radius: 20px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 121, 0, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Mobile Portrait Zoom Buttons - 2x smaller size */
body.mobile.portrait .zoom-btn {
    width: 60px !important; /* 2x увеличено с 30px до 60px */
    height: 60px !important; /* 2x увеличено с 30px до 60px */
    font-size: 28px !important; /* 2x увеличено с 14px до 28px */
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.9) !important;
    border: 2px solid #FF7900 !important; /* Утолщенная граница для больших кнопок */
    color: #FF7900 !important;
    box-shadow: 0 0 10px rgba(255, 121, 0, 0.8) !important; /* Увеличенная тень */
    z-index: 901 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

/* Mobile portrait zoom buttons use JavaScript-controlled active states instead of CSS hover/active */
/* This prevents conflicts with touch events and JavaScript styling */



/* Mobile Portrait Mute Button Icons - 2x larger to fit buttons */
body.mobile.portrait .zoom-btn img {
    width: 40px !important; /* Увеличено до 40px для больших кнопок */
    height: 40px !important; /* Увеличено до 40px для больших кнопок */
    max-width: 40px !important;
    max-height: 40px !important;
}

/* Mobile Portrait Bottom Panel - Centered users and projects buttons only */
body.mobile.portrait .bottom-panel {
    height: 42px !important; /* Maintain footer height */
    gap: 12px !important; /* Better spacing between fewer buttons */
    padding: 0 15px !important;
    justify-content: center !important; /* Center buttons horizontally */
    align-items: center !important; /* Center buttons vertically */
    display: flex !important;
    flex-direction: row !important;
    overflow: visible !important; /* Allow button shadows to show */
}

/* Mobile Portrait Bottom Panel Buttons - Only users and projects, centered, double height */
body.mobile.portrait .bottom-tab-btn {
    padding: 2px 8px !important; /* Better padding for taller buttons */
    font-size: 11px !important; /* Readable size */
    min-width: 50px !important; /* Better width for text */
    height: 14px !important; /* Double the previous 7px = 14px */
    margin: 2px 4px !important; /* Better spacing between buttons */
    line-height: 1.2 !important;
    border-radius: 0 !important; /* Rectangle like FEED button */
    transition: all 0.3s ease !important; /* Match FEED transition */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important; /* Match FEED style */
    letter-spacing: 1px !important; /* Match FEED letter spacing */
    font-weight: bold !important; /* Match FEED font weight */
    font-family: 'Orbitron', monospace !important; /* Match FEED font family */
    background: rgba(0, 0, 0, 0.8) !important; /* Match FEED background */
    border: 1px solid #FF7900 !important; /* Match FEED border */
    color: #FF7900 !important; /* Orange text like FEED */
    box-shadow: none !important; /* Remove shadows for clean FEED style */
    cursor: pointer !important;
}

/* Hide fullscreen buttons on mobile */
body.mobile.portrait .bottom-tab-btn[data-button="fullscreen"] {
    display: none !important;
}

/* All buttons use uniform FEED styling - no individual colors */

/* Button hover states matching FEED button style */
body.mobile.portrait .bottom-tab-btn:hover,
body.mobile.portrait .bottom-tab-btn:active {
    background-color: #FF7900 !important; /* Orange background like FEED */
    color: #1a1a1a !important; /* Dark text on orange background like FEED */
    box-shadow: 0 0 10px rgba(255, 121, 0, 0.5) !important; /* Subtle glow like FEED */
    transform: none !important; /* No transform effects for clean FEED style */
}

/* Active state for selected buttons */
body.mobile.portrait .bottom-tab-btn.active {
    background: #FF7900 !important;
    border-color: #FF7900 !important;
    color: #1a1a1a !important;
    box-shadow: 0 0 15px rgba(255, 121, 0, 0.8) !important;
}

body.mobile.portrait .version-display {
    font-size: 9px !important;
    right: 10px !important;
    bottom: 50% !important; /* Center vertically in smaller panel */
    transform: translateY(50%) !important;
}

/* Mobile Portrait Status Bar */
body.mobile.portrait .status-bar {
    height: 40px;
    padding: 0 15px;
}

/* Mobile Portrait Top Buttons - FEED style matching bottom buttons */
body.mobile.portrait .top-btn {
    padding: 2px 8px !important; /* Match bottom button padding */
    font-size: 11px !important; /* Match bottom button font size */
    height: 14px !important; /* Match bottom button height */
    margin: 2px 4px !important; /* Match bottom button margins */
    line-height: 1.2 !important;
    border-radius: 0 !important; /* Rectangle like FEED button */
    transition: all 0.3s ease !important; /* Match FEED transition */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important; /* Match FEED style */
    letter-spacing: 1px !important; /* Match FEED letter spacing */
    font-weight: bold !important; /* Match FEED font weight */
    font-family: 'Orbitron', monospace !important; /* Match FEED font family */
    background: rgba(0, 0, 0, 0.8) !important; /* Match FEED background */
    border: 1px solid #FF7900 !important; /* Match FEED border */
    color: #FF7900 !important; /* Orange text like FEED */
    box-shadow: none !important; /* Remove shadows for clean FEED style */
    cursor: pointer !important;
}

/* Mobile Portrait Top Button Hover - Match bottom button hover */
body.mobile.portrait .top-btn:hover,
body.mobile.portrait .top-btn:active {
    background-color: #FF7900 !important; /* Orange background like FEED */
    color: #1a1a1a !important; /* Dark text on orange background like FEED */
    box-shadow: 0 0 10px rgba(255, 121, 0, 0.5) !important; /* Subtle glow like FEED */
    transform: none !important; /* No transform for clean FEED style */
}

/* Popup Windows */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.popup-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background: rgba(26, 26, 26, 0.8);
    border: 2px solid #FF7900;
    border-radius: 8px;
    min-width: 300px;
    max-width: 400px;
    box-shadow: 0 0 20px rgba(255, 121, 0, 0.5);
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #FF7900;
    background: rgba(255, 121, 0, 0.1);
}

.popup-header h3 {
    margin: 0;
    color: #FF7900;
    font-family: 'Orbitron', monospace;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 121, 0, 0.5);
}

.popup-close {
    background: transparent;
    border: 1px solid #FF7900;
    color: #FF7900;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.popup-close:hover {
    background: #FF7900;
    color: #1a1a1a;
}

.popup-body {
    padding: 20px;
}

/* Tools Popup */
.tool-btn {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #FF7900;
    color: #FF7900;
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tool-btn:hover {
    background: #FF7900;
    color: #1a1a1a;
    box-shadow: 0 0 10px rgba(255, 121, 0, 0.5);
}

.tool-btn:last-child {
    margin-bottom: 0;
}

/* Login Window */
.login-content {
    min-width: 350px;
}

.login-placeholder {
    color: #ccc;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
    padding: 10px;
    background: rgba(255, 121, 0, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(255, 121, 0, 0.3);
}

.login-input {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #FF7900;
    color: #fff;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.login-input:focus {
    outline: none;
    border-color: #ffaa44;
    box-shadow: 0 0 8px rgba(255, 121, 0, 0.3);
}

.login-input::placeholder {
    color: #666;
}

.login-ok-btn {
    width: 100%;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #FF7900;
    color: #FF7900;
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    margin-top: 10px;
}

.login-ok-btn:hover {
    background: #FF7900;
    color: #1a1a1a;
    box-shadow: 0 0 15px rgba(255, 121, 0, 0.5);
}

/* Tools Frame - только для ПК */
.tools-frame {
    position: fixed;
    top: 40px; /* высота статус бара */
    right: 0;
    bottom: 0; /* до края нижнего футера */
    width: 50%;
   /* background: rgba(0, 0, 0, 0.3); */
    border-left: 2px solid #FF7900;
   /* box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5); */
    z-index: 900;
    display: none; /* по умолчанию скрыт */
    flex-direction: column;
}

.tools-frame:not(.hidden) {
    display: flex;
}

.tools-frame-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #FF7900;
    background: rgba(26, 26, 26, 0.95); 
    flex-shrink: 0;
}

.tools-frame-header h3 {
    margin: 0;
    color: #FF7900;
    font-family: 'Orbitron', monospace;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 121, 0, 0.5);
}

.frame-close-btn {
    background: transparent;
    border: 1px solid #FF7900;
    color: #FF7900;
    width: 30px;
    height: 30px;
   /* border-radius: 50%; */
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.frame-close-btn:hover {
    background: #FF7900;
    color: #1a1a1a;
    box-shadow: 0 0 10px rgba(255, 121, 0, 0.5);
}

.tools-frame-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
}

/* Кастомный скроллбар для iframe контента */
.tools-frame-content::-webkit-scrollbar,
.frame-content::-webkit-scrollbar,
#toolsFrameContent::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.tools-frame-content::-webkit-scrollbar-track,
.frame-content::-webkit-scrollbar-track,
#toolsFrameContent::-webkit-scrollbar-track {
    background: #000000;
}

.tools-frame-content::-webkit-scrollbar-thumb,
.frame-content::-webkit-scrollbar-thumb,
#toolsFrameContent::-webkit-scrollbar-thumb {
    background: #FF7900;
    border-radius: 4px;
}

.tools-frame-content::-webkit-scrollbar-thumb:hover,
.frame-content::-webkit-scrollbar-thumb:hover,
#toolsFrameContent::-webkit-scrollbar-thumb:hover {
    background: #ffaa44;
}

/* Firefox scrollbar */
.tools-frame-content,
.frame-content,
#toolsFrameContent {
    scrollbar-width: thin;
    scrollbar-color: #FF7900 #000000;
   /* background: rgba(26, 26, 26, 0.8) !important; */
    overflow-y: auto !important;
}

.frame-content * {
    scrollbar-width: thin;
    scrollbar-color: #FF7900 #000000;
}

.frame-content *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.frame-content *::-webkit-scrollbar-track {
    background: #000000;
}

.frame-content *::-webkit-scrollbar-thumb {
    background: #FF7900;
    border-radius: 4px;
}

.frame-content *::-webkit-scrollbar-thumb:hover {
    background: #ffaa44;
}

.frame-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: rgba(26, 26, 26, 0.8);
}

/* Адаптация фрейма для мобильных устройств */
body.mobile .tools-frame:not(.hidden) {
    display: flex !important;
    top: 40px !important; /* высота статус бара */
    bottom: calc(42px + env(safe-area-inset-bottom, 0px)) !important; /* высота мобильной нижней панели */
    width: 100% !important; /* на мобильных занимает всю ширину */
    left: 0 !important;
    right: 0 !important;
    z-index: 950 !important; /* выше чем другие элементы */
}

/* Адаптация для альбомной ориентации */
body.mobile.landscape .tools-frame:not(.hidden) {
    display: flex !important;
    top: 40px !important;
    bottom: calc(42px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* Адаптация для экстра маленьких экранов */
body.extra-small-screen.mobile .tools-frame:not(.hidden) {
    display: flex !important;
    top: 40px !important;
    bottom: calc(42px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* Адаптация для маленьких экранов */
body.small-screen.mobile .tools-frame:not(.hidden) {
    display: flex !important;
    top: 40px !important;
    bottom: calc(42px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}



/* Small Screen Adaptations */
body.small-screen .left-panel {
    width: 180px;
}

body.small-screen .right-panel {
    width: 200px;
}

body.small-screen .loading-text {
    font-size: 18px;
}

body.small-screen .progress-container {
    width: 200px;
}

body.small-screen .log-line {
    font-size: 11px;
}

/* Tablet Adaptations */
body.tablet .left-panel {
    width: 280px;
}

body.tablet .right-panel {
    width: 320px;
}

body.tablet .zoom-btn {
    width: 50px;
    height: 50px;
    font-size: 22px;
}

/* Offline Overlay Mobile Adaptations - Perfect circle with full screen background */
body.mobile.portrait .offline-overlay {
    position: fixed !important;
    top: 40px !important; /* Below status bar */
    left: 0 !important; /* Full screen width */
    right: 0 !important;
    bottom: calc(42px + env(safe-area-inset-bottom, 10px)) !important; /* Above bottom panel */
    background: rgba(0, 0, 0, 0.98) !important; /* Full black background coverage */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important; /* Higher than everything including zoom controls (900) */
    transition: all 0.3s ease !important; /* Smooth transition for panel changes */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important; /* Reset any transforms */
}

body.mobile.portrait .offline-content {
    width: 280px !important; /* Fixed size for perfect circle */
    height: 280px !important; /* Same as width for perfect circle */
    max-width: 280px !important; /* Enforce size */
    max-height: 280px !important;
    min-width: 280px !important; /* Enforce size */
    min-height: 280px !important;
    border: 4px solid #ff0000 !important; /* Proportional border */
    transform: none !important; /* No additional scaling */
    flex-shrink: 0 !important; /* Prevent shrinking */
}

body.mobile.portrait .offline-title {
    font-size: clamp(16px, 4vw, 28px) !important; /* Responsive font size with min/max */
    margin-bottom: 2% !important;
}

body.mobile.portrait .offline-status {
    font-size: 3.5vw !important; /* Responsive font size */
    margin-bottom: 3% !important;
}

body.mobile.portrait .offline-details,
body.mobile.portrait .offline-attempts,
body.mobile.portrait .offline-instructions {
    font-size: 2.5vw !important; /* Responsive font size */
    margin-bottom: 2% !important;
}

body.mobile.portrait .offline-info {
    font-size: 2vw !important; /* Responsive font size */
    max-width: 85% !important; /* Responsive width */
    line-height: 1.2 !important;
}

/* Loading Screen Mobile Adaptations */
body.mobile .loading-text {
    font-size: 20px;
}

body.mobile .progress-container {
    width: 280px;
}

body.mobile .log-line {
    font-size: 12px;
}

/* Performance Optimizations for Mobile */
body.mobile .side-panel::before,
body.mobile .status-bar::before,
body.mobile .bottom-panel::before {
    animation-duration: 30s; /* Slower animations for battery saving */
}

/* Hide complex animations on low-end mobile devices */
body.mobile.small-screen .side-panel::before,
body.mobile.small-screen .status-bar::before,
body.mobile.small-screen .bottom-panel::before {
    display: none; /* Disable star field animations on small screens */
}

/* Mobile Design using adapt.js classes */
body.mobile .loading-text {
    font-size: 20px;
}

body.mobile .progress-container {
    width: 250px;
}

body.mobile .bottom-panel {
    gap: 15px;
    height: 50px;
}

body.mobile .bottom-tab-btn {
    padding: 6px 12px;
    font-size: 12px;
}

body.mobile.portrait .zoom-controls {
    bottom: calc(42px + env(safe-area-inset-bottom, 10px) + 10px);
    left: 50%;
    transform: translateX(-50%);
}

body.mobile .zoom-btn {
    width: 35px;
    height: 35px;
    font-size: 18px;
}

body.mobile .offline-overlay {
    position: fixed !important;
    top: 40px !important; /* Below status bar */
    left: 0 !important; /* Full screen */
    right: 0 !important;
    bottom: calc(50px + env(safe-area-inset-bottom, 10px)) !important;
    background: rgba(0, 0, 0, 0.98) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: all 0.3s ease !important;
}

body.mobile .offline-content {
    width: 250px !important;
    height: 250px !important;
    max-width: 250px !important;
    max-height: 250px !important;
    min-width: 250px !important;
    min-height: 250px !important;
    flex-shrink: 0 !important;
}

body.mobile .offline-title {
    font-size: 3.5vw !important;
}

body.mobile .offline-status {
    font-size: 3vw !important;
}

body.mobile .offline-details,
body.mobile .offline-attempts,
body.mobile .offline-instructions {
    font-size: 2.5vw !important;
}

body.mobile .offline-info {
    font-size: 2vw !important;
    max-width: 80% !important;
}

/* Extra Small Screens - Ultra compact for small phones using adapt.js */
body.extra-small-screen.mobile.portrait .left-panel {
    width: calc(30vw - 1px) !important;
    height: 20vh !important;
    max-height: 20vh !important;
    min-height: 20vh !important;
    padding: 3px !important;
    font-size: 8px !important;
}

body.extra-small-screen.mobile.portrait .right-panel {
    width: 70vw !important;
    height: 20vh !important;
    max-height: 20vh !important;
    min-height: 20vh !important;
    padding: 3px !important;
    padding-left: 11px !important;
    font-size: 8px !important;
    left: calc(100vw - 10px) !important;
    top: 40px !important;
}

body.extra-small-screen.mobile.portrait .right-panel.hidden-panel {
    transform: translateX(0) !important;
    overflow: visible !important;
}

body.extra-small-screen.mobile.portrait .right-panel:not(.hidden-panel) {
    transform: translateX(calc(-70vw + 10px)) !important;
    border-left: none !important;
}

body.extra-small-screen.mobile.portrait .mobile-panel-toggle-btn,
body.extra-small-screen.mobile.portrait #staticMobileToggleRightPanel {
    height: 9vh !important;
    max-height: 9vh !important;
    min-height: 9vh !important;
    left: -1px !important;
    bottom: 2px !important;
}

body.extra-small-screen.mobile.portrait .globe-container {
    top: calc(40px + 22vh + 10px) !important;
    bottom: calc(35px + env(safe-area-inset-bottom, 30px) + 10px) !important;
    width: 243vw !important;
}

body.extra-small-screen.mobile.portrait .panel-title {
    font-size: 9px !important;
    margin-bottom: 2px !important;
}

body.extra-small-screen.mobile.portrait .status-label,
body.extra-small-screen.mobile.portrait .status-value,
body.extra-small-screen.mobile.portrait .stat-label,
body.extra-small-screen.mobile.portrait .stat-value {
    font-size: 7px !important;
}

body.extra-small-screen.mobile.portrait .add-btn {
    font-size: 6px !important;
    padding: 2px 4px !important;
}

body.extra-small-screen.mobile.portrait .bottom-panel {
    height: calc(35px + env(safe-area-inset-bottom, 10px)) !important;
}

body.extra-small-screen.mobile.portrait .bottom-tab-btn {
    font-size: 8px !important;
    padding: 2px 4px !important;
    height: 14px !important;
    line-height: 1 !important;
}

body.extra-small-screen.mobile.portrait .zoom-controls {
    bottom: calc(35px + env(safe-area-inset-bottom, 10px) + 15px) !important;
}

body.extra-small-screen.mobile.portrait .zoom-btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
}

body.extra-small-screen.mobile.portrait .zoom-btn img {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
}

/* Medium Mobile Screens using adapt.js */
body.small-screen.mobile.portrait .left-panel,
body.medium-screen.mobile.portrait .left-panel {
    width: calc(30vw - 1px) !important;
    height: 21vh !important;
    max-height: 21vh !important;
    min-height: 21vh !important;
    padding: 4px !important;
    font-size: 9px !important;
}

body.small-screen.mobile.portrait .right-panel,
body.medium-screen.mobile.portrait .right-panel {
    width: 70vw !important;
    height: 21vh !important;
    max-height: 21vh !important;
    min-height: 21vh !important;
    padding: 4px !important;
    padding-left: 12px !important;
    font-size: 9px !important;
    left: calc(100vw - 10px) !important;
    top: 40px !important;
}

body.small-screen.mobile.portrait .right-panel.hidden-panel,
body.medium-screen.mobile.portrait .right-panel.hidden-panel {
    transform: translateX(0) !important;
    overflow: visible !important;
}

body.small-screen.mobile.portrait .right-panel:not(.hidden-panel),
body.medium-screen.mobile.portrait .right-panel:not(.hidden-panel) {
    transform: translateX(calc(-70vw + 10px)) !important;
    border-left: none !important;
}

body.small-screen.mobile.portrait .mobile-panel-toggle-btn,
body.small-screen.mobile.portrait #staticMobileToggleRightPanel,
body.medium-screen.mobile.portrait .mobile-panel-toggle-btn,
body.medium-screen.mobile.portrait #staticMobileToggleRightPanel {
    height: 9.5vh !important;
    max-height: 9.5vh !important;
    min-height: 9.5vh !important;
    left: 0 !important;
    bottom: 2px !important;
}

body.small-screen.mobile.portrait .globe-container,
body.medium-screen.mobile.portrait .globe-container {
    top: calc(40px + 21vh + 10px) !important;
    bottom: calc(42px + env(safe-area-inset-bottom, 25px) + 10px) !important;
    width: 243vw !important;
}

body.small-screen.mobile.portrait .zoom-controls,
body.medium-screen.mobile.portrait .zoom-controls {
    bottom: calc(42px + env(safe-area-inset-bottom, 15px) + 15px) !important;
}

body.small-screen.mobile.portrait .zoom-btn,
body.medium-screen.mobile.portrait .zoom-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
}

body.small-screen.mobile.portrait .zoom-btn img,
body.medium-screen.mobile.portrait .zoom-btn img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
}

body.small-screen .offline-overlay,
body.medium-screen .offline-overlay {
    position: fixed !important;
    top: 40px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(50px + env(safe-area-inset-bottom, 10px)) !important;
    background: rgba(0, 0, 0, 0.98) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: all 0.3s ease !important;
}

body.small-screen .offline-content,
body.medium-screen .offline-content {
    width: 300px !important;
    height: 300px !important;
    max-width: 300px !important;
    max-height: 300px !important;
    min-width: 300px !important;
    min-height: 300px !important;
    flex-shrink: 0 !important;
}

body.small-screen .offline-title,
body.medium-screen .offline-title {
    font-size: 3.2vw !important;
}

body.small-screen .offline-status,
body.medium-screen .offline-status {
    font-size: 2.8vw !important;
}

body.small-screen .offline-details,
body.small-screen .offline-attempts,
body.small-screen .offline-instructions,
body.medium-screen .offline-details,
body.medium-screen .offline-attempts,
body.medium-screen .offline-instructions {
    font-size: 2.2vw !important;
}

body.small-screen .offline-info,
body.medium-screen .offline-info {
    font-size: 1.8vw !important;
    max-width: 75% !important;
}

/* Large Mobile Screens and Small Tablets using adapt.js */
body.large-screen.mobile.portrait .left-panel,
body.tablet.portrait .left-panel {
    width: calc(30vw - 1px) !important;
    height: 22vh !important;
    max-height: 22vh !important;
    min-height: 22vh !important;
}

body.large-screen.mobile.portrait .right-panel,
body.tablet.portrait .right-panel {
    width: 70vw !important;
    height: 22vh !important;
    max-height: 22vh !important;
    min-height: 22vh !important;
    left: calc(100vw - 10px) !important;
    top: 40px !important;
}

body.large-screen.mobile.portrait .right-panel.hidden-panel,
body.tablet.portrait .right-panel.hidden-panel {
    transform: translateX(0) !important;
    overflow: visible !important;
}

body.large-screen.mobile.portrait .right-panel:not(.hidden-panel),
body.tablet.portrait .right-panel:not(.hidden-panel) {
    transform: translateX(calc(-70vw + 10px)) !important;
    border-left: none !important;
}

body.large-screen.mobile.portrait .mobile-panel-toggle-btn,
body.large-screen.mobile.portrait #staticMobileToggleRightPanel,
body.tablet.portrait .mobile-panel-toggle-btn,
body.tablet.portrait #staticMobileToggleRightPanel {
    height: 10vh !important;
    max-height: 10vh !important;
    min-height: 10vh !important;
    left: 0 !important;
    bottom: 2px !important;
}

body.large-screen.mobile.portrait .globe-container,
body.tablet.portrait .globe-container {
    top: calc(40px + 22vh + 10px) !important;
    bottom: calc(42px + env(safe-area-inset-bottom, 30px) + 10px) !important;
    width: 243vw !important;
}

body.large-screen.mobile.portrait .zoom-controls,
body.tablet.portrait .zoom-controls {
    bottom: calc(42px + env(safe-area-inset-bottom, 20px) + 15px) !important;
}

body.large-screen .offline-overlay,
body.tablet .offline-overlay {
    position: fixed !important;
    top: 40px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(50px + env(safe-area-inset-bottom, 10px)) !important;
    background: rgba(0, 0, 0, 0.98) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: all 0.3s ease !important;
}

body.large-screen .offline-content,
body.tablet .offline-content {
    width: 350px !important;
    height: 350px !important;
    max-width: 350px !important;
    max-height: 350px !important;
    min-width: 350px !important;
    min-height: 350px !important;
    flex-shrink: 0 !important;
}

body.large-screen .offline-title,
body.tablet .offline-title {
    font-size: 3vw !important;
}

body.large-screen .offline-status,
body.tablet .offline-status {
    font-size: 2.6vw !important;
}

body.large-screen .offline-details,
body.large-screen .offline-attempts,
body.large-screen .offline-instructions,
body.tablet .offline-details,
body.tablet .offline-attempts,
body.tablet .offline-instructions {
    font-size: 2vw !important;
}

body.large-screen .offline-info,
body.tablet .offline-info {
    font-size: 1.6vw !important;
    max-width: 70% !important;
}

/* Debug info display for mobile testing - REMOVED */

/* Extra Small Screens - Additional styles using adapt.js */
body.extra-small-screen .offline-overlay {
    position: fixed !important;
    top: 40px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(50px + env(safe-area-inset-bottom, 10px)) !important;
    background: rgba(0, 0, 0, 0.98) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: all 0.3s ease !important;
}

body.extra-small-screen .offline-content {
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    min-width: 200px !important;
    min-height: 200px !important;
    flex-shrink: 0 !important;
}

body.extra-small-screen .offline-title {
    font-size: 14px !important;
}

body.extra-small-screen .offline-status {
    font-size: 12px !important;
}

body.extra-small-screen .offline-details,
body.extra-small-screen .offline-attempts,
body.extra-small-screen .offline-instructions {
    font-size: 9px !important;
}

body.extra-small-screen .offline-info {
    font-size: 8px !important;
    max-width: 200px !important;
}

body.extra-small-screen .loading-text {
    font-size: 18px;
}

body.extra-small-screen .progress-container {
    width: 220px;
}

/* Landscape Mobile Specific using adapt.js */
body.mobile.landscape.short-screen .status-bar {
    height: 35px;
}

body.mobile.landscape.short-screen .bottom-panel {
    height: 50px;
}

body.mobile.landscape.short-screen .content-area {
    height: calc(100vh - 85px);
}

body.mobile.landscape.short-screen .zoom-controls {
    bottom: 60px;
}

body.mobile.landscape.short-screen .offline-overlay {
    position: fixed !important;
    top: 40px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(50px + env(safe-area-inset-bottom, 10px)) !important;
    background: rgba(0, 0, 0, 0.98) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: all 0.3s ease !important;
}

body.mobile.landscape.short-screen .offline-content {
    width: 220px !important;
    height: 220px !important;
    max-width: 220px !important;
    max-height: 220px !important;
    min-width: 220px !important;
    min-height: 220px !important;
    flex-shrink: 0 !important;
}

body.mobile.landscape.short-screen .offline-title {
    font-size: 2.8vw !important;
}

body.mobile.landscape.short-screen .offline-status {
    font-size: 2.4vw !important;
}

body.mobile.landscape.short-screen .offline-details,
body.mobile.landscape.short-screen .offline-attempts,
body.mobile.landscape.short-screen .offline-instructions {
    font-size: 1.8vw !important;
}

body.mobile.landscape.short-screen .offline-info {
    font-size: 1.5vw !important;
    max-width: 65% !important;
}

/* Mobile Globe Container - Perfect centering considering horizontal panel layout */
body.mobile.portrait .globe-container {
    position: fixed !important;
    top: calc(40px + 22vh + 10px) !important; /* Below status bar and panels - updated for 22vh */
    left: 50% !important; /* Start from horizontal center */
    bottom: calc(42px + env(safe-area-inset-bottom, 10px) + 20px) !important; /* Above footer and smaller buttons */
    width: 243vw !important; /* Mobile: 2.43x width for better sphere visibility (10% increase over 221vw) */
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 50 !important;
    flex: none !important;
    padding: 10px !important; /* Minimal padding for mobile */
    transform: translateX(-50%) !important; /* Perfect horizontal centering only */
    transform-origin: center center !important;
    overflow: visible !important; /* Allow sphere to be visible */
}

/* Hide desktop toggle button on mobile */
body.mobile.portrait .panel-toggle-btn {
    display: none !important;
}

/* Show static mobile toggle button on mobile devices using adapt.js */
body.mobile #staticMobileToggleRightPanel {
    display: flex !important;
}

/* Mobile Portrait Toggle Button - Inside right panel, visible as "tongue" */
body.mobile.portrait .mobile-panel-toggle-btn,
body.mobile.portrait #staticMobileToggleRightPanel {
    position: absolute !important; /* Absolute within right panel */
    bottom: 2px !important; /* Position at bottom of panel */
    left: -1px !important; /* Compensate for border to align perfectly with panel edge */
    z-index: 1500 !important; /* Above all other content */
    width: 10px !important; /* Toggle button width */
    height: 10vh !important; /* Half the panel height */
    max-height: 10vh !important; /* Fixed max-height */
    min-height: 10vh !important; /* Fixed min-height */
    font-size: 6px !important; /* Smaller font for very narrow button */
    border-radius: 0 !important; /* Rectangle like panels */
    background: black !important; /* Same as panels */
    border: 1px solid #FF7900 !important; /* Same border as panels */
    color: #FF7900 !important; /* Orange text like panels */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important; /* No glow effects like panels */
    writing-mode: vertical-rl !important; /* Vertical text to fit height */
    text-orientation: mixed !important;
    transition: none !important; /* No transition needed as it moves with panel */
    font-weight: bold !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    font-family: 'Orbitron', monospace !important;
    letter-spacing: 0.5px !important; /* Smaller letter spacing for narrow button */
    text-transform: uppercase !important; /* Match panel style */
    padding: 1px !important; /* Minimal padding */
    overflow: hidden !important; /* Prevent text overflow */
    outline: none !important; /* Remove any outline effects */
    margin: 0 !important; /* Remove any default margins */
}

/* Mobile toggle button hover/active states matching panel style */
body.mobile.portrait .mobile-panel-toggle-btn:hover,
body.mobile.portrait .mobile-panel-toggle-btn:active,
body.mobile.portrait #staticMobileToggleRightPanel:hover,
body.mobile.portrait #staticMobileToggleRightPanel:active {
    background: black !important; /* Keep black background like panels */
    color: #FF7900 !important; /* Keep orange text like panels */
    border-color: #FFAA44 !important; /* Slightly brighter orange border on hover */
    box-shadow: none !important; /* No glow effects like panels */
}

/* ================================
   POPUP WINDOWS MOBILE ADAPTATIONS using adapt.js
   ================================ */

/* Mobile popup overlay */
body.mobile .popup-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10001 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

/* Mobile popup content */
body.mobile .popup-content {
    background: rgba(26, 26, 26, 0.8) !important;
    border: 2px solid #FF7900 !important;
    border-radius: 8px !important;
    width: 90% !important;
    max-width: 350px !important;
    max-height: 80vh !important;
    box-shadow: 0 0 20px rgba(255, 121, 0, 0.5) !important;
    overflow-y: auto !important;
}

/* Mobile popup header */
body.mobile .popup-header {
    padding: 10px 15px !important;
    border-bottom: 1px solid #FF7900 !important;
    background: rgba(255, 121, 0, 0.1) !important;
}

body.mobile .popup-header h3 {
    font-size: 14px !important;
    margin: 0 !important;
}

/* Mobile popup close button */
body.mobile .popup-close {
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Mobile popup body */
body.mobile .popup-body {
    padding: 15px !important;
}

/* Mobile Tools popup buttons */
body.mobile .tool-btn {
    padding: 12px 15px !important;
    font-size: 14px !important;
    margin-bottom: 12px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

body.mobile .tool-btn:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
}

/* Mobile login content */
body.mobile .login-content {
    min-width: 300px !important;
    width: 100% !important;
}

body.mobile .login-input {
    padding: 12px 15px !important;
    font-size: 16px !important; /* Prevent zoom on iOS */
    margin-bottom: 15px !important;
}

body.mobile .login-ok-btn {
    padding: 14px 20px !important;
    font-size: 14px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

body.mobile .login-ok-btn:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
}

/* Extra small screens - compact popups */
body.extra-small-screen .popup-content {
    width: 95% !important;
    max-width: 300px !important;
    max-height: 85vh !important;
}

body.extra-small-screen .popup-header {
    padding: 8px 12px !important;
}

body.extra-small-screen .popup-header h3 {
    font-size: 12px !important;
}

body.extra-small-screen .popup-close {
    width: 25px !important;
    height: 25px !important;
    font-size: 14px !important;
}

body.extra-small-screen .popup-body {
    padding: 12px !important;
}

body.extra-small-screen .tool-btn {
    padding: 10px 12px !important;
    font-size: 12px !important;
    margin-bottom: 10px !important;
}

body.extra-small-screen .login-input {
    padding: 10px 12px !important;
    font-size: 16px !important;
}

body.extra-small-screen .login-ok-btn {
    padding: 12px 16px !important;
    font-size: 12px !important;
}

/* ================================
   UTC TIME DISPLAY MOBILE ADAPTATIONS using adapt.js
   ================================ */

/* Mobile UTC time positioning */
body.mobile.portrait .utc-time-display {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 10px !important;
    color: #FF7900 !important;
    font-family: 'Space Mono', monospace !important;
    font-weight: bold !important;
    text-shadow: 0 0 8px rgba(255, 121, 0, 0.5) !important;
    z-index: 101 !important;
    pointer-events: none !important;
}

/* Mobile version display positioning */
body.mobile.portrait .version-display {
    display: none !important; /* Hide version on mobile to save space */
}

/* Extra small screens - even smaller UTC display */
body.extra-small-screen.mobile.portrait .utc-time-display {
    font-size: 8px !important;
    right: 8px !important;
}

/* Landscape mobile - different positioning */
body.mobile.landscape .utc-time-display {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 10px !important;
}

body.mobile.landscape .version-display {
    position: absolute !important;
    right: 80px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 9px !important;
}

/* ================================
   TOOLS BUTTON MOBILE ADAPTATIONS using adapt.js
   ================================ */

/* Mobile TOOLS button in status bar */
body.mobile .top-btn {
    padding: 4px 8px !important;
    height: 24px !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

body.mobile .top-btn:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
}

/* Extra small screens - even smaller TOOLS button */
body.extra-small-screen .top-btn {
    padding: 3px 6px !important;
    height: 20px !important;
    font-size: 8px !important;
    letter-spacing: 0.3px !important;
}

/* Small and medium screens - slightly larger */
body.small-screen .top-btn,
body.medium-screen .top-btn {
    padding: 4px 10px !important;
    height: 26px !important;
    font-size: 11px !important;
}

/* Tablet adaptations */
body.tablet .popup-content {
    min-width: 400px !important;
    max-width: 500px !important;
}

body.tablet .popup-header h3 {
    font-size: 16px !important;
}

body.tablet .tool-btn {
    padding: 14px 18px !important;
    font-size: 15px !important;
}

body.tablet .utc-time-display {
    font-size: 11px !important;
    right: 15px !important;
}

body.tablet .top-btn {
    padding: 5px 12px !important;
    height: 28px !important;
    font-size: 12px !important;
}

/* ================================
   LANDSCAPE ORIENTATION ADAPTATIONS
   ================================ */

/* Landscape mobile - adjust popup sizing */
body.mobile.landscape .popup-content {
    max-height: 70vh !important;
    width: 70% !important;
    max-width: 400px !important;
}

/* Short screens in landscape - more compact */
body.mobile.landscape.short-screen .popup-content {
    max-height: 60vh !important;
    width: 80% !important;
}

body.mobile.landscape.short-screen .popup-body {
    padding: 10px !important;
}

body.mobile.landscape.short-screen .tool-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    margin-bottom: 8px !important;
}

/* ===========================
   GENERAL SCROLLBAR STYLES
   =========================== */

/* General page scrollbar - only for desktop */
body:not(.mobile) ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body:not(.mobile) ::-webkit-scrollbar-track {
    background: #000000;
}

body:not(.mobile) ::-webkit-scrollbar-thumb {
    background: #FF7900;
    border-radius: 6px;
    border: 2px solid #000000;
}

body:not(.mobile) ::-webkit-scrollbar-thumb:hover {
    background: #ffaa44;
}

/* Firefox general scrollbar - only for desktop */
body:not(.mobile) {
    scrollbar-width: thin;
    scrollbar-color: #FF7900 #000000;
}