/* =========================================
   СПЛЕШ-СКРИН И АНИМАЦИИ (NEW)
   ========================================= */
#splash { 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #030712; /* Глубокий темный фон */
    z-index: 9999;
    display: flex; /* Более надежное центрирование */
    justify-content: center;
    align-items: center;
    overflow: hidden; 
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;
}

/* Мягкая вращающаяся аура на фоне */
.splash-aura {
    position: absolute;
    width: 50vmax;
    height: 50vmax;
    background: conic-gradient(from 0deg, #3b82f6 0%, #a855f7 33%, #10b981 66%, #3b82f6 100%);
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    animation: rotateAura 10s linear infinite;
    pointer-events: none;
}

.splash-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 30px; 
    position: relative; 
    z-index: 2;
    width: 320px; 
}

/* Плавное появление логотипа */
.splash-logo { 
    opacity: 0; 
    animation: logoReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

/* Минималистичный премиум-прогресс-бар */
.splash-loader-wrap { 
    width: 220px; 
    height: 4px; 
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 8px; 
    position: relative; 
    overflow: hidden;
    opacity: 0; 
    animation: fadeUpIn 0.6s ease 0.2s forwards; 
}

.splash-loader-bar { 
    height: 100%; 
    width: 0%; 
    background: linear-gradient(90deg, #3b82f6, #a855f7, #d8b4fe); 
    border-radius: 8px; 
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}

/* Выравнивание текста и процентов */
.splash-loader-text { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #64748b; 
    font-size: 11px; 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    font-weight: 600; 
    width: 220px;
    opacity: 0; 
    animation: fadeUpIn 0.6s ease 0.3s forwards; 
}

.splash-percent {
    color: #a855f7;
    font-family: monospace;
    font-size: 12px;
    font-weight: 700;
}

/* Блик на прогресс-баре */
.splash-loader-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    animation: shimmerSweep 1.5s infinite;
}

/* Контейнер для цифровой пыли */
.splash-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* Сама частица */
.splash-particle {
    position: absolute;
    bottom: -10px;
    width: 2px;
    height: 2px;
    background: #3b82f6;
    border-radius: 50%;
    box-shadow: 0 0 4px #3b82f6;
    opacity: 0;
    animation: floatUp linear forwards;
}

/* =========================================
   КЛЮЧЕВЫЕ КАДРЫ
   ========================================= */
@keyframes shimmerSweep {
    100% { transform: translateX(100%); }
}

@keyframes floatUp {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    20% { opacity: 0.8; transform: translateY(-20vh) scale(1); }
    80% { opacity: 0.5; transform: translateY(-80vh) scale(1); }
    100% { opacity: 0; transform: translateY(-100vh) scale(0); }
}

@keyframes rotateAura { 
    0% { transform: rotate(0deg) scale(1); } 
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); } 
}

@keyframes logoReveal { 
    0% { opacity: 0; transform: translateY(15px) scale(0.95); filter: blur(8px); } 
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } 
}

@keyframes fadeUpIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes pulseTextGlow { 
    0%, 100% { color: #64748b; text-shadow: none; } 
    50% { color: #94a3b8; text-shadow: 0 0 8px rgba(147, 197, 253, 0.3); } 
}

/* =========================================
   ОСНОВНОЙ СТИЛЬ И ИКОНКИ
   ========================================= */
* { box-sizing: border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
html { 
    transition: filter 0.5s ease; 
    overflow-x: hidden; 
    width: 100vw; 
}
body { 
    margin: 0; color: #e5e7eb; background: #010409; min-height: 100vh; overflow-y: auto; overflow-x: hidden; position: relative; padding-bottom: 100px; 
}

.bg { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    background: linear-gradient(to bottom, rgba(1, 4, 9, 0.8), rgba(1, 4, 9, 0.95)), 
                url('gallery/main-bg.png') center/cover no-repeat;
    z-index: -1; 
    pointer-events: none;
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

@media (orientation: portrait) {
    .bg {
        background: linear-gradient(to bottom, rgba(1, 4, 9, 0.8), rgba(1, 4, 9, 0.95)), 
                    url('gallery/main-bg-mobile.png') center/cover no-repeat;
    }
}

.svg-icon { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.22em; fill: currentColor; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease, color 0.4s ease; }
button .svg-icon { transform: translateY(0.5px); }

/* --- МИКРО-АНИМАЦИИ ПРИ НАВЕДЕНИИ --- */
button:hover .svg-icon, .drop-zone:hover .icon .svg-icon, .total-header:hover .svg-icon, .admin-btn:hover .svg-icon, .summary-date-badge:hover .svg-icon { transform: scale(1.15); filter: drop-shadow(0 4px 8px rgba(147, 197, 253, 0.5)); }
.btn-primary:hover .svg-icon { transform: scale(1.2) rotate(5deg); }
.route-btn:hover .rt-icon .svg-icon { transform: translateX(2px) scale(1.15); filter: drop-shadow(0 0 10px rgba(147, 197, 253, 0.8)); }
.btn-reset:hover .svg-icon { transform: scale(1.2) rotate(-15deg); filter: drop-shadow(0 4px 8px rgba(239, 68, 68, 0.5)); }

#btnOpenRadio .svg-icon, 
#btnOpenGame .svg-icon { 
    width: 24px !important; 
    height: 24px !important; 
    transform: scale(1) !important; 
}

#btnOpenRadio:hover .svg-icon, 
#btnOpenGame:hover .svg-icon,
.radio-top-btn:hover .svg-icon { 
    transform: scale(1.15) !important; 
}

.app { position: relative; max-width: 900px; margin: auto; padding: 24px; min-height: 100vh; display: flex; flex-direction: column; }
.header { text-align: center; margin-bottom: 25px; } 
.header-divider { width: 180px; height: 1px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.8), rgba(168, 85, 247, 0.8), transparent); box-shadow: 0 0 10px rgba(139, 92, 246, 0.5); border-radius: 50%; }

/* =========================================
    ЛОГОТИП
   ========================================= */
.logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 4px; }

.logo-text { 
    font-size: 26px; 
    font-weight: 900; 
    letter-spacing: 1px; 
    color: #ffffff; 
    text-shadow: 0 0 15px rgba(147, 197, 253, 0.6), 0 0 30px rgba(59, 130, 246, 0.4); 
    display: flex; 
    align-items: baseline; 
}

.logo-text span { 
    font-size: 16px; 
    font-weight: 600; 
    margin-left: 5px; 
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #3b82f6 0%, #a855f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent; 
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6));
}

.logo-icon { 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; 
    height: 32px;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.6)); 
    animation: floating 4s ease-in-out infinite; 
}

.logo-icon .svg-icon {
    width: 100%;
    height: 100%;
    transition: none !important; 
}

@keyframes floating { 
    0%, 100% { transform: translateY(0) rotate(0deg); } 
    50% { transform: translateY(-3px) rotate(5deg); } 
}

@media (max-width: 480px) {
    .logo-text { font-size: 22px; }
    .logo-text span { font-size: 14px; margin-left: 4px; }
    .logo-icon { width: 28px; height: 28px; }
    .header p { margin-top: 18px !important; }
}

.app-hidden { opacity: 0; transform: scale(1.02); }
.app-show { opacity: 1 !important; transform: none !important; transition: opacity 0.6s ease, transform 0.6s ease; }

.card { 
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.005) 100%) !important; 
    backdrop-filter: blur(24px) saturate(160%) !important; 
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important; 
    border: 1px solid rgba(255, 255, 255, 0.04) !important; 
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important; 
    border-radius: 24px; 
    padding: 20px; 
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease !important;
    transform: translateY(-1px);
    box-shadow: 
        0 30px 55px -15px rgba(0, 0, 0, 0.8), 
        -15px -15px 40px -12px rgba(59, 130, 246, 0.15), 
        15px 15px 40px -12px rgba(168, 85, 247, 0.15) !important;
}

.fade { opacity: 0; transform: translateY(10px); transition: 0.4s ease; }
.show { opacity: 1; transform: translateY(0); }

/* =========================================
   ПРОГРЕСС-БАР И ФАЙЛЫ
   ========================================= */
.step-header-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; padding: 0 4px; }
.step-info-row { display: flex; justify-content: space-between; align-items: center; }
#stepInstruction { color: #94a3b8; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }
#stepText { color: #94a3b8; font-size: 13px; font-weight: 600; font-feature-settings: "tnum"; }
.progress-container { height: 6px; background: rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; position: relative; }
#stepBar { height: 100%; width: 33%; background: linear-gradient(90deg, #3b82f6 0%, #a855f7 100%); border-radius: 10px; transition: width 0.4s ease; box-shadow: 0 0 10px rgba(168, 85, 247, 0.4); }

.upload-card { position: relative; } 
.drop-zone { width: 100%; min-height: 220px; border: 2px dashed rgba(148,163,184,0.15); border-radius: 16px; background: rgba(2,6,23,0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; cursor: pointer; transition: all 0.3s ease; margin-bottom: 25px; position: relative; color: #94a3b8; }
.drop-zone:hover, .drop-zone.dragover { color: #fff; }

#eggDropZone:hover, #eggDropZone.dragover { border-color: rgba(251, 191, 36, 0.6); background: rgba(251, 191, 36, 0.05); }
#milkDropZone:hover, #milkDropZone.dragover { border-color: rgba(59, 130, 246, 0.6); background: rgba(59, 130, 246, 0.05); }

@keyframes continuousPulse {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.06) translateY(-2px); }
}

.drop-zone .icon { 
    display: flex; 
    margin-bottom: 5px; 
    animation: continuousPulse 2.5s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
}
.drop-zone .icon .svg-icon { width: 70px; height: 70px; }
#eggDropZone .icon { filter: drop-shadow(0 4px 20px rgba(251, 191, 36, 0.35)); }
#milkDropZone .icon { filter: drop-shadow(0 4px 20px rgba(59, 130, 246, 0.35)); }
.drop-zone .main-text { font-size: 18px; font-weight: 700; color: #f3f4f6; text-align: center; }
.drop-zone .sub-text { 
    font-size: 11px; 
    color: #94a3b8; 
    font-weight: 600; 
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 4px 12px; 
    border-radius: 20px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}
#eggDropZone:hover .sub-text { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border-color: rgba(251, 191, 36, 0.2); }
#milkDropZone:hover .sub-text { background: rgba(59, 130, 246, 0.1); color: #93c5fd; border-color: rgba(59, 130, 246, 0.2); }
.sub-text-hidden { opacity: 0; pointer-events: none; }
.file-input { display: none; }
.file-status { position: absolute; bottom: 12px; left: 12px; right: 12px; background: rgba(17, 24, 39, 0.9); border: 1px solid rgba(148,163,184,0.2); border-radius: 8px; padding: 8px 12px; display: none; align-items: center; gap: 8px; font-size: 12px; color: #93c5fd; }
.file-status.active { display: flex; }

/* =========================================
   ПОИСК МАРШРУТОВ
   ========================================= */
.route-search-wrap { position: relative; margin-bottom: 20px; width: 100%; }
.route-search-input { 
    width: 100%; 
    background: rgba(0, 0, 0, 0.25); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 18px; 
    padding: 16px 20px 16px 48px; 
    color: #e5e7eb; 
    font-size: 15px; 
    font-weight: 500; 
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.4);
    outline: none; 
}
.route-search-input::placeholder { color: #64748b; font-weight: 400; }
.route-search-input:focus { 
    border-color: rgba(147, 197, 253, 0.5); 
    background: rgba(0, 0, 0, 0.4); 
    box-shadow: 
        inset 0 2px 10px rgba(0,0,0,0.5), 
        0 8px 20px -5px rgba(59, 130, 246, 0.3);
    transform: translateY(-2px); 
}
.route-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; opacity: 0.4; pointer-events: none; transition: all 0.3s ease; }
.route-search-icon .svg-icon { width: 18px; height: 18px; }
.route-search-input:focus + .route-search-icon { 
    opacity: 1; 
    color: #93c5fd; 
    transform: translateY(calc(-50% - 2px)) scale(1.1); 
}

@keyframes shakeInput { 
    0%, 100% { transform: translateY(-2px) translateX(0); } 
    20%, 60% { transform: translateY(-2px) translateX(-6px); } 
    40%, 80% { transform: translateY(-2px) translateX(6px); } 
}

.error-shake { 
    animation: shakeInput 0.4s ease-in-out; 
    border-color: rgba(239, 68, 68, 0.6) !important; 
    background: rgba(0, 0, 0, 0.4) !important; 
    box-shadow: 
        inset 0 2px 10px rgba(0,0,0,0.5), 
        0 8px 20px -5px rgba(239, 68, 68, 0.4) !important; 
}

@keyframes shakeIcon { 
    0%, 100% { transform: translateY(calc(-50% - 2px)) scale(1.1) translateX(0); } 
    20%, 60% { transform: translateY(calc(-50% - 2px)) scale(1.1) translateX(-6px); } 
    40%, 80% { transform: translateY(calc(-50% - 2px)) scale(1.1) translateX(6px); } 
}

.route-search-input.error-shake + .route-search-icon { 
    animation: shakeIcon 0.4s ease-in-out; 
    color: rgba(239, 68, 68, 0.9) !important; 
    opacity: 1; 
    filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.4)); 
}
#noRouteMsg { text-align: center; color: #fca5a5; font-size: 13px; font-weight: 500; margin-top: 15px; margin-bottom: 5px; opacity: 0; transition: opacity 0.4s ease; letter-spacing: 0.3px; }
.pulsing-msg { animation: pulseText 1.5s infinite ease-in-out; }

/* =========================================
   КНОПКИ
   ========================================= */
.btn-primary { width: 100%; padding: 16px; border-radius: 14px; font-size: 16px; font-weight: 700; color: #fff; border: none; cursor: pointer; position: relative; overflow: hidden; background: linear-gradient(90deg, #3b82f6 0%, #a855f7 100%); box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4); filter: brightness(1.1); }
.btn-primary:active { transform: translateY(1px); filter: brightness(0.9); }

.btn-skip-wrap { text-align: center; margin-top: 20px; }
.btn-skip { background: transparent; border: none; color: #64748b; font-size: 14px; font-weight: 500; cursor: pointer; padding: 5px 10px; text-decoration: none; transition: color 0.2s ease; }
.btn-skip:hover { color: #94a3b8; text-decoration: underline; }
.skip-btn { transition: all 0.2s ease !important; }
.skip-btn:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.2) !important; transform: translateY(-2px); }
.skip-btn:active { transform: translateY(0); }

.btn-back-step { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; color: #64748b; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; padding: 0; margin-bottom: 12px; transition: all 0.3s ease; opacity: 0.7; }
.btn-back-step:hover { opacity: 1; color: #93c5fd; transform: translateX(-3px); }
.btn-back-step .svg-icon { width: 14px; height: 14px; }

#routeButtons { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 16px; 
    padding: 10px 5px; 
}

.route-btn {
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: space-between; 
    height: 76px; 
    padding: 0 20px; 
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.8) 100%) !important; 
    backdrop-filter: blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-left: none !important; 
    border-radius: 16px !important;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    cursor: pointer;
    opacity: 0;
    transform: translateY(15px);
    position: relative;
    overflow: hidden;
}

.route-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 35%; 
    background: rgba(59, 130, 246, 0.4);
    border-radius: 0 4px 4px 0; 
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

.route-btn.show { opacity: 1; transform: translateY(0); }
.route-btn.hidden-by-search { display: none !important; }

.route-btn:hover {
    background: linear-gradient(135deg, rgba(39, 53, 77, 0.7) 0%, rgba(20, 30, 50, 0.9) 100%) !important;
    border-top-color: rgba(96, 165, 250, 0.2) !important;
    transform: translateY(-3px) translateX(2px) !important; 
    box-shadow: 
        -8px 0 25px -10px rgba(59, 130, 246, 0.3), 
        0 12px 25px -6px rgba(0, 0, 0, 0.7) !important;
}

.route-btn:hover::before { height: 55%; width: 4px; background: #60a5fa; box-shadow: 0 0 12px rgba(96, 165, 250, 0.8); }
.route-btn:active { transform: translateY(1px) translateX(0) !important; background: rgba(30, 41, 59, 0.8) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important; }
.route-btn:active::before { height: 30%; opacity: 0.5; }

.rt-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; margin: 0; transition: color 0.3s ease; }
.rt-number { 
    font-size: 26px; 
    font-weight: 900; 
    letter-spacing: 0;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
    background: linear-gradient(90deg, #93c5fd 0%, #d8b4fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: #cbd5e1;
    -webkit-text-fill-color: #cbd5e1; 
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-text-fill-color 0.4s ease;
}

.route-btn:hover .rt-number { -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.6)); transform: scale(1.15) rotate(3deg); }

.route-btn.full-width { grid-column: span 2; height: 60px; justify-content: center; gap: 12px; }
.route-btn.full-width::before { background: rgba(16, 185, 129, 0.4); }
.route-btn.full-width:hover {
    background: linear-gradient(135deg, rgba(39, 53, 77, 0.7) 0%, rgba(20, 30, 50, 0.9) 100%) !important;
    border-top-color: rgba(52, 211, 153, 0.2) !important;
    transform: translateY(-3px) translateX(0) !important; 
    box-shadow: -8px 0 25px -10px rgba(16, 185, 129, 0.3), 0 12px 25px -6px rgba(0, 0, 0, 0.7) !important;
}
.route-btn.full-width:hover::before { background: #34d399; box-shadow: 0 0 12px rgba(52, 211, 153, 0.8); }

.route-btn.full-width .rt-number {
    font-size: 13px !important; letter-spacing: 1.5px !important; font-weight: 700 !important; text-transform: uppercase !important; text-shadow: none !important;
    background: linear-gradient(90deg, #6ee7b7 0%, #10b981 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important;
    transition: all 0.4s ease, -webkit-text-fill-color 0.4s ease !important;
}
.route-btn.full-width:hover .rt-number { -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.4)) !important; transform: none !important; }
.route-btn.full-width .rt-icon { color: #64748b; transition: all 0.3s ease; }
.route-btn.full-width:hover .rt-icon { color: #34d399; transform: scale(1.1); }

@media (max-width: 550px) {
    .route-btn { flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 10px !important; height: 70px !important; }
    .rt-label { font-size: 9px !important; letter-spacing: 1.5px !important; margin-bottom: 2px !important; }
    .rt-number { font-size: 22px !important; }
    .route-btn.full-width { flex-direction: row !important; height: 60px !important; }
}

/* =========================================
   КАРТОЧКИ ТТ И ТОВАРЫ
   ========================================= */
.shop-card { 
    margin-top: 12px; 
    padding: 18px 20px; 
    border-radius: 24px; 
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%) !important; 
    border: 1px solid rgba(255, 255, 255, 0.04) !important; 
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important; 
    backdrop-filter: blur(20px) saturate(150%) !important; 
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4); 
    opacity: 0; 
    transform: translateY(15px); 
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    will-change: transform;
}
.shop-card.show { opacity: 1; transform: translateY(0); }
.shop-card:hover { border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 15px 40px -5px rgba(0, 0, 0, 0.6), 0 0 20px rgba(147, 197, 253, 0.03); transform: translateY(-2px); }

.shop-title { margin: -18px -20px 15px -20px; padding: 12px 20px; background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, transparent 100%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; border-left: none !important; display: flex; align-items: center; gap: 12px; }
.shop-icon-glass { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.05) 100%); border: 1px solid rgba(147, 197, 253, 0.3); border-radius: 10px; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15), inset 0 2px 5px rgba(255, 255, 255, 0.1); flex-shrink: 0; }
.shop-icon-glass .svg-icon { width: 18px; height: 18px; color: #93c5fd; filter: drop-shadow(0 0 5px rgba(147, 197, 253, 0.5)); display: block; }
.shop-title b { font-weight: 100; color: #ffffff; letter-spacing: 0.5px; text-shadow: none; }
.shop-title-text { display: flex; align-items: center; line-height: 1; font-size: 18px; font-weight: 950; color: #b1d4fa; letter-spacing: 0.5px; text-shadow: 0 0 15px rgba(147, 197, 253, 0.6); transform: translateY(1px); }
.shop-body { display: flex; flex-direction: column; flex-grow: 1; }
.shop-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; }
.shop-row:last-of-type { border-bottom: none !important; }
.shop-row span:first-child { font-size: 14px; color: #dae3f0; font-weight: 700; }
[class^="qty-accent-"] { font-weight: 800; font-size: 14px; min-width: 36px; text-align: center; padding: 4px 10px; border-radius: 8px; backdrop-filter: blur(4px); }
.qty-accent-milk { color: #93c5fd; background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(147, 197, 253, 0.2); box-shadow: 0 0 10px rgba(59, 130, 246, 0.1); }
.qty-accent-egg { color: #fbbf24; background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(251, 191, 36, 0.2); box-shadow: 0 0 10px rgba(245, 158, 11, 0.1); }

@media (min-width: 768px) {
    #view-alphabetical, #view-grouped { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch; }
    #view-alphabetical .shop-card, #view-grouped .shop-card { margin-top: 0 !important; }
    #view-grouped { justify-content: start; }
    #view-grouped > div:not(.shop-card) { grid-column: 1 / -1; }
}

/* =========================================
   СТАТИСТИКА И БЕЙДЖИ ВЕСА
   ========================================= */
.total-glass { margin-top: 15px; border-radius: 20px; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(16px) saturate(140%) !important; overflow: hidden; margin-bottom: 20px; }
.total-header { display: flex; justify-content: center; align-items: center; padding: 14px 18px; cursor: pointer; background: rgba(255, 255, 255, 0.04) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: relative; transition: background 0.3s ease; }
.total-header .title-text { font-size: 17px; font-weight: 850; color: #93c5fd; text-shadow: 0 0 15px rgba(147, 197, 253, 0.5); }
.total-header:hover { background: rgba(255, 255, 255, 0.08) !important; }
.total-header:hover .arrow { opacity: 0.7; color: #93c5fd; }
.total-header span:not(.arrow) { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: #94a3b8; text-shadow: 0 0 10px rgba(148, 163, 184, 0.3); }
.total-header .arrow-left { left: 20px; }
.total-header .arrow-right { right: 20px; }
.total-glass.open .arrow-left { transform: rotate(-90deg) scale(1.2); }
.total-glass.open .arrow-right { transform: rotate(90deg) scale(1.2); }
.total-glass.open .title-text { color: #fff; text-shadow: 0 0 20px rgba(147, 197, 253, 0.8); }
.total-header .arrow { position: absolute; font-size: 10px; color: #94a3b8; opacity: 0.4; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.total-glass.open .arrow { transform: rotate(180deg); opacity: 0.6; color: #93c5fd; }
.total-body { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.5s ease; padding: 0 14px; }
.total-glass.open .total-body { max-height: 3000px; opacity: 1; padding: 10px 14px 5px; }

.badges-row { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; margin-top: auto !important; padding-top: 15px; }
.badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; min-height: 34px; border-radius: 10px; font-weight: 700; font-size: 13px; background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.1) !important; box-sizing: border-box; }
.badge .svg-icon { margin-right: 6px; width: 16px; height: 16px; }
.badge-milk { color: #93c5fd; background: rgba(147, 197, 253, 0.1) !important; border: 1px solid rgba(147, 197, 253, 0.25) !important; box-shadow: 0 4px 15px rgba(147, 197, 253, 0.05); }
.badge-egg { color: #fbbf24; background: rgba(251, 191, 36, 0.1) !important; border: 1px solid rgba(251, 191, 36, 0.25) !important; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.05); }
.badge-empty { color: #94a3b8 !important; background: rgba(148, 163, 184, 0.05) !important; border: 1px dashed rgba(148, 163, 184, 0.25) !important; box-shadow: 0 4px 15px rgba(148, 163, 184, 0.02); }
.badge-empty .svg-icon { filter: grayscale(100%); opacity: 0.5; }
.badge-total { color: #6ee7b7 !important; background: rgba(110, 231, 183, 0.15) !important; border: 1px solid rgba(110, 231, 183, 0.4) !important; box-shadow: 0 0 15px rgba(110, 231, 183, 0.1); }
.total-badge { margin-left: auto; background: rgba(16, 185, 129, 0.08) !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; color: #6ee7b7; }
.total-badge .val { color: #6ee7b7; font-weight: 700; }

@media (max-width: 480px) { .badge { padding: 6px 7px; font-size: 11px; min-height: 30px; border-radius: 8px; } .badges-row { gap: 5px; } .badge .svg-icon { width: 14px; height: 14px; margin-right: 4px; } }

/* =========================================
   ПЛАШКА С ДАТОЙ И МАРШРУТОМ
   ========================================= */
.summary-date-badge { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; margin: 5px auto 25px; width: fit-content; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); padding: 12px 24px; border-radius: 20px; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5); }
.badge-part { display: flex; align-items: center; gap: 12px; }
.badge-part .icon-wrap { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; }
.badge-part .icon-wrap .svg-icon { width: 20px; height: 20px; margin: 0; display: block; }
.truck-icon { background: rgba(59, 130, 246, 0.12); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.2); box-shadow: inset 0 2px 10px rgba(59, 130, 246, 0.1); }
.cal-icon { background: rgba(168, 85, 247, 0.12); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.2); box-shadow: inset 0 2px 10px rgba(168, 85, 247, 0.1); }
.badge-part .info-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.info-wrap .info-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; color: #64748b; line-height: 1; margin-left: 1.5px; }
.info-wrap .info-value { font-size: 16px; font-weight: 800; color: #e2e8f0; letter-spacing: 0.5px; line-height: 1; }
.summary-date-badge .dot { display: block !important; width: 1px !important; height: 34px !important; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important; margin: 0 !important; flex-shrink: 0 !important; }

@media (max-width: 650px) {
    .summary-date-badge { flex-direction: column !important; align-items: stretch !important; gap: 12px; padding: 16px 20px; width: 85%; max-width: 300px; }
    .badge-part { justify-content: flex-start; }
    .badge-part .info-wrap { align-items: flex-start; }
    .info-wrap .info-label { margin-left: 0; }
    .summary-date-badge .dot { width: 100% !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important; margin: 4px 0 !important; }
}

.weight-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; padding-bottom: 10px; }
.empty-text { font-size: 14px; letter-spacing: 0.5px; transform: none; }
.weight-card { padding: 12px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.3s ease; }
.weight-card:hover { transform: translateY(-2px); }
.weight-card .label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.weight-card .value { font-size: 20px; font-weight: 800; display: flex; align-items: baseline; justify-content: center; gap: 5px; margin-top: 5px; }
.weight-card.m { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.02)); border-color: rgba(59, 130, 246, 0.3); }
.weight-card.m .label { color: #93c5fd; }
.weight-card.m .value { color: #93c5fd; text-shadow: 0 0 10px rgba(147, 197, 253, 0.4); }
.weight-card.e { background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.02)); border-color: rgba(251, 191, 36, 0.3); }
.weight-card.e .label { color: #fbbf24; }
.weight-card.e .value { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, 0.4); }
.weight-card.empty { background: rgba(255, 255, 255, 0.01); border-color: rgba(148, 163, 184, 0.15); border-style: dashed; opacity: 0.8; }
.weight-card.empty .label { color: #94a3b8; }
.weight-card.empty .value { align-items: center; color: #64748b; margin-top: 5px; font-weight: 800; white-space: nowrap; }
.weight-card.empty .icon .svg-icon { filter: grayscale(100%); opacity: 0.4; }
.weight-card .icon .svg-icon { width: 18px; height: 18px; }
.weight-card .value .unit { font-size: 14px; font-weight: 700; color: #fff; opacity: 0.6; text-shadow: none; -webkit-text-fill-color: #fff; }
.weight-card .value span { font-size: 14px; letter-spacing: 0.5px; }

/* =========================================
   НИЖНИЕ КНОПКИ
   ========================================= */
@keyframes capsulePulse { 0%, 100% { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1) !important; } 50% { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 35px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); border-color: rgba(147, 197, 253, 0.2) !important; } }

.btn-controls-wrap { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); width: auto; min-width: 280px; max-width: calc(100% - 40px); z-index: 9999; display: flex; gap: 4px; padding: 6px; background: rgba(13, 17, 23, 0.7) !important; backdrop-filter: blur(25px) saturate(200%); border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 24px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); overflow: hidden; animation: capsulePulse 6s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
.fade-in-controls { opacity: 0; bottom: -60px; transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), bottom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fade-in-controls.show { opacity: 1; bottom: 25px; }

.btn-reset, .btn-save-png, .btn-print { flex: 1; padding: 12px 16px; border: none !important; border-radius: 18px !important; cursor: pointer; font-weight: 600; font-size: 13px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn-reset { background: rgba(239, 68, 68, 0.05) !important; color: #fda4af !important; }
.btn-save-png { background: rgba(16, 185, 129, 0.05) !important; color: #6ee7b7 !important; }
.btn-print { background: rgba(59, 130, 246, 0.05) !important; color: #93c5fd !important; }

.btn-reset:hover { background: rgba(239, 68, 68, 0.15) !important; box-shadow: 0 0 15px rgba(239, 68, 68, 0.1); }
.btn-save-png:hover { background: rgba(16, 185, 129, 0.15) !important; box-shadow: 0 0 15px rgba(16, 185, 129, 0.1); }
.btn-print:hover { background: rgba(59, 130, 246, 0.15) !important; box-shadow: 0 0 15px rgba(59, 130, 246, 0.1); }
.btn-controls-wrap .svg-icon { width: 18px; height: 18px; opacity: 0.9; }

.footer { position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; color: #64748b; font-size: 12px; z-index: 10; }
.footer:hover { color: #94a3b8; }

/* =========================================
   АЛЕРТЫ И ЭКСПОРТ (PNG / МОДАЛКИ)
   ========================================= */
.custom-alert-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 10000; backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.custom-alert-overlay.active { opacity: 1; visibility: visible; }
.custom-alert-card { background: rgba(13, 17, 23, 0.85) !important; backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 24px; padding: 24px; max-width: 320px; width: 90%; text-align: center; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6); overflow: hidden; transform: scale(0.9); transition: 0.3s ease; }
.custom-alert-overlay.active .custom-alert-card { transform: scale(1); }
.custom-alert-title { font-size: 17px; color: #fca5a5; font-weight: 800; margin: -24px -24px 18px -24px; padding: 16px 20px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.08); letter-spacing: 0.5px; text-shadow: 0 0 15px rgba(239, 68, 68, 0.5); display: flex; align-items: center; justify-content: center; gap: 8px; }
.custom-alert-text { color: #e5e7eb; font-size: 14px; margin-bottom: 20px; line-height: 1.5; }
.custom-alert-btn { margin-top: 10px; width: 100%; border-radius: 12px !important; }

/* Объединенный блок стилей модального окна статистики */
.custom-stats-card { 
    background: rgba(13, 17, 23, 0.85) !important; 
    backdrop-filter: blur(20px) saturate(160%); 
    border: 1px solid rgba(255, 255, 255, 0.12) !important; 
    border-radius: 24px; 
    padding: 25px 20px; 
    max-width: 360px; 
    width: 90%; 
    max-height: 90vh; 
    display: flex; 
    flex-direction: column; 
    text-align: center; 
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6); 
    overflow: hidden; 
    transform: scale(0.9); 
    transition: 0.3s ease; 
}

#customAlert { z-index: 100005 !important; }
#capture-area { padding: 30px; background: #010409; display: inline-block; }
.export-grid { display: grid; grid-template-columns: repeat(2, 400px); gap: 20px; padding: 10px; }
.export-grid .shop-card { width: 100%; opacity: 1 !important; transform: none !important; margin-top: 0 !important; }
.export-grid td, .export-grid .shop-row { padding: 10px 5px !important; line-height: 1.5 !important; }
.export-grid .shop-title { margin-bottom: 15px !important; }
.export-grid .shop-title .svg-icon { width: 24px !important; height: 24px !important; margin-right: 4px; filter: drop-shadow(0 0 12px rgba(147, 197, 253, 0.6)); }
.export-grid table { width: 100% !important; border-collapse: separate !important; }
.export-grid td { white-space: nowrap !important; letter-spacing: 0.2px; }
.export-grid .tr-val { padding-left: 15px !important; text-align: right; }
.export-grid .total-glass { grid-column: span 2; }
.export-header { grid-column: span 2; text-align: center; padding: 15px; font-size: 20px; font-weight: 800; color: #93c5fd; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 10px; }

#stepsContainer { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;}
#stepsContainer.show-steps { opacity: 1; transform: translateY(0); }

/* =========================================
   АДМИН-ПАНЕЛЬ (DEV MODE)
   ========================================= */
.admin-modal { position: fixed; inset: 0; background: rgba(1, 4, 9, 0.85); backdrop-filter: blur(15px); z-index: 100000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
.admin-modal.show { opacity: 1; visibility: visible; }
.admin-card { background: rgba(20, 5, 30, 0.6) !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; box-shadow: 0 0 40px rgba(239, 68, 68, 0.15), inset 0 0 20px rgba(239, 68, 68, 0.05); border-radius: 24px; padding: 30px; width: 90%; max-width: 340px; text-align: center; transform: scale(0.9); transition: 0.4s ease; }
.admin-modal.show .admin-card { transform: scale(1); }
.admin-title { color: #f87171; font-size: 16px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 15px; text-shadow: 0 0 15px rgba(239, 68, 68, 0.5); display: flex; align-items: center; justify-content: center; gap: 10px; }
.admin-btn { width: 100%; background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; padding: 14px; border-radius: 14px; font-weight: 700; cursor: pointer; margin-bottom: 12px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px; }
.admin-btn:hover { background: rgba(239, 68, 68, 0.3); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2); }
.admin-btn:active { transform: translateY(1px); }
.admin-btn.close { background: transparent; border: 1px dashed rgba(148, 163, 184, 0.3); color: #94a3b8; margin-top: 20px; margin-bottom: 0; }
.admin-btn.close:hover { background: rgba(148, 163, 184, 0.1); border-color: #94a3b8; }
.admin-warning-text { color: #cbd5e1; font-size: 14px; line-height: 1.6; margin-bottom: 25px; font-weight: 500; }
.weight-divider { display: flex; align-items: center; text-align: center; margin: 20px 0 15px; opacity: 0.6; }
.weight-divider::before, .weight-divider::after { content: ''; flex: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.weight-divider:not(:empty)::before { margin-right: 15px; }
.weight-divider:not(:empty)::after { margin-left: 15px; }
.weight-divider span { font-size: 10px; font-weight: 800; letter-spacing: 3px; color: #94a3b8; text-transform: uppercase; }
.footer-dev-sign { margin-top: 4px; font-size: 10px; letter-spacing: 1px; opacity: 0.5; color: #4b5563; }

/* =========================================
   РАДИО ПЛЕЕР
   ========================================= */
.radio-top-btn { position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(10px); z-index: 1000; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); color: #93c5fd; }
.radio-close-btn { width: 100%; background: transparent; border: 1px solid rgba(148, 163, 184, 0.2); color: #94a3b8; padding: 12px; border-radius: 14px; font-weight: 600; cursor: pointer; margin-top: 10px; transition: all 0.3s ease; }
.radio-close-btn:hover { background: rgba(148, 163, 184, 0.1); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.4); }
.radio-top-btn:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
.radio-top-btn.radio-pulse { animation: pulseIcon 2s infinite; border-color: rgba(147, 197, 253, 0.5); box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); }
.radio-top-btn.radio-pulse .svg-icon { filter: drop-shadow(0 0 5px #93c5fd); }
.radio-top-btn.radio-connecting { animation: pulseConnecting 0.8s infinite alternate ease-in-out; border-color: rgba(168, 85, 247, 0.6); box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); }

@keyframes pulseIcon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes pulseConnecting { 0% { transform: scale(1); opacity: 0.6; box-shadow: 0 0 5px rgba(168, 85, 247, 0.2); } 100% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 20px rgba(168, 85, 247, 0.8); } }

.radio-visualizer { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 45px; margin: 10px 0 25px; }
.radio-visualizer .bar { width: 8px; background: linear-gradient(180deg, #93c5fd, #3b82f6); border-radius: 4px; height: 4px; transition: height 0.1s ease; box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
.radio-visualizer.playing .bar { animation: eq 0.6s ease-in-out infinite alternate; }
.radio-visualizer.playing .bar:nth-child(1) { animation-delay: 0.1s; }
.radio-visualizer.playing .bar:nth-child(2) { animation-delay: 0.4s; }
.radio-visualizer.playing .bar:nth-child(3) { animation-delay: 0.0s; }
.radio-visualizer.playing .bar:nth-child(4) { animation-delay: 0.3s; }
.radio-visualizer.playing .bar:nth-child(5) { animation-delay: 0.2s; }
@keyframes eq { 0% { height: 4px; } 100% { height: 40px; } }

.radio-control-wrap { display: flex; gap: 15px; justify-content: center; align-items: center; margin-bottom: 25px; }
.radio-circle-btn { background: rgba(255, 255, 255, 0.05); border: none; color: #cbd5e1; border-radius: 50%; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); display: flex; align-items: center; justify-content: center; outline: none; padding: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
.radio-circle-btn.secondary { width: 44px; height: 44px; }
.radio-circle-btn.primary { width: 60px; height: 60px; background: linear-gradient(135deg, rgba(147, 197, 253, 0.15), rgba(59, 130, 246, 0.1)); color: #fff; border: 1px solid rgba(147, 197, 253, 0.2); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1); }
.radio-circle-btn:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
.radio-circle-btn.primary:hover { background: linear-gradient(135deg, rgba(147, 197, 253, 0.25), rgba(59, 130, 246, 0.2)); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2); }
.radio-circle-btn:active { transform: scale(0.92); }
.radio-circle-btn.primary.btn-connecting { border-color: rgba(216, 180, 254, 0.6); animation: pulseConnectingRadio 1s infinite alternate ease-in-out; }

@keyframes pulseConnectingRadio { 0% { box-shadow: 0 0 10px rgba(216, 180, 254, 0.2); transform: scale(0.98); } 100% { box-shadow: 0 0 25px rgba(216, 180, 254, 0.6); transform: scale(1.02); } }

.radio-vol-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: #64748b; }
.radio-vol-icon { width: 16px; height: 16px; opacity: 0.7; }
input[type=range].radio-slider { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range].radio-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 18px; width: 18px; border-radius: 50%; background: #93c5fd; cursor: pointer; margin-top: -7px; box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
input[type=range].radio-slider::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: rgba(255, 255, 255, 0.15); border-radius: 2px; }

/* =========================================
   МИНИ-ИГРА (ПАСХАЛКА)
   ========================================= */
#gameCanvas { background: #0d1117; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 12px; margin-top: 15px; box-shadow: inset 0 4px 20px rgba(0,0,0,0.5); display: block; width: 100%; }
.game-score-wrap { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; font-weight: 800; font-size: 14px; }
.game-controls { display: flex; gap: 10px; margin-top: 15px; }
.game-btn { flex: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #cbd5e1; padding: 15px; border-radius: 14px; font-size: 20px; cursor: pointer; transition: all 0.1s ease; user-select: none; -webkit-user-select: none; }
.game-btn:active { background: rgba(59, 130, 246, 0.2); transform: scale(0.95); }
.game-route-btn { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); color: #93c5fd; border-radius: 8px; padding: 10px 0; font-weight: 800; font-size: 13px; cursor: pointer; transition: all 0.2s ease; width: calc(20% - 5px); text-align: center; }
.game-route-btn:active { transform: scale(0.9); background: rgba(59, 130, 246, 0.4); }
.lb-filter-scroll { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.lb-filter-scroll::-webkit-scrollbar { display: none; }
.lb-filter-btn { background: transparent; border: 1px solid rgba(148, 163, 184, 0.3); color: #94a3b8; border-radius: 12px; padding: 6px 14px; font-size: 12px; font-weight: bold; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.lb-filter-btn.active { background: rgba(59, 130, 246, 0.2); border-color: #3b82f6; color: #93c5fd; }
#leaderboardList::-webkit-scrollbar { width: 4px; }
#leaderboardList::-webkit-scrollbar-track { background: transparent; }
#leaderboardList::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 4px; }
#leaderboardList::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.5); }
.route-select-mini { background: rgba(59, 130, 246, 0.05); border: 1px solid rgba(59, 130, 246, 0.2); color: #93c5fd; border-radius: 8px; padding: 8px 0; font-weight: 800; font-size: 12px; cursor: pointer; transition: all 0.2s ease; }
.route-select-mini:hover { background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.5); box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); }

@keyframes countdownPulse { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.countdown-anim { animation: countdownPulse 0.5s ease-out; }
@keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shakeTitle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
.animate-item { animation: slideInUp 0.5s ease forwards; }
.shake-title { animation: shakeTitle 0.4s ease-in-out; }
#exitGameBtn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; filter: grayscale(1); }
@keyframes fadeInBg { from { opacity: 0; } to { opacity: 1; } }
@keyframes popUpContent { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
#gameExitConfirm { animation: fadeInBg 0.3s ease-out forwards; }
#gameExitConfirm > div { opacity: 0; animation: popUpContent 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
#gameExitConfirm > div:nth-child(1) { animation-delay: 0.05s; }
#gameExitConfirm > div:nth-child(2) { animation-delay: 0.1s; } 
#gameExitConfirm > div:nth-child(3) { animation-delay: 0.15s; }

/* =========================================
   ПЕЧАТЬ (PRINT)
   ========================================= */
.print-select-btn { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease, background 0.25s ease; will-change: transform; }
.print-select-btn:hover { transform: scale(1.02); filter: brightness(1.2); background: rgba(59, 130, 246, 0.15) !important; }
.print-select-btn:active { transform: scale(0.98); }
.btn-blue:hover { background: rgba(59, 130, 246, 0.2) !important; }
.btn-purple:hover { background: rgba(168, 85, 247, 0.2) !important; }

@media print {
    @page { margin: 0; } 
    
    html, body { 
        height: auto !important; 
        min-height: auto !important;
        overflow: visible !important; 
        position: static !important; 
        background: #fff !important; 
        color: #0f172a !important; 
        filter: none !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important; 
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    .bg, .app, #splash, .custom-alert-overlay, .btn-controls-wrap, .footer, .footer-wrapper { display: none !important; }
    
    #print-area { display: block !important; width: 100%; position: static !important; height: auto !important; min-height: auto !important; }
    
    .print-page { 
        page-break-after: always; 
        break-after: page; 
        padding: 12mm 12mm 20mm 12mm !important; 
        box-sizing: border-box; 
        height: auto !important; 
        min-height: auto !important; 
        position: relative; 
    }
    
    .print-page:last-child {
        page-break-after: auto !important;
        break-after: auto !important;
    }

    .print-footer { 
        position: fixed !important;
        bottom: 0 !important; 
        left: 0 !important; 
        width: 100% !important; 
        text-align: center; 
        font-size: 11px; 
        color: #64748b; 
        background: #fff; 
        padding-top: 6px;
        padding-bottom: 5mm !important; 
        z-index: 9999 !important;
    }
    .print-header { border-bottom: 2px solid #0f172a; margin-bottom: 20px; padding-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }
    .print-header.centered { justify-content: center; text-align: center; flex-direction: column; gap: 8px; align-items: center; }
    .print-header h2 { margin: 0; font-size: 26px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; }
    .print-header span { font-size: 13px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
    .print-header span b { color: #0f172a; font-size: 18px; font-weight: 900; letter-spacing: 0; }
    
    .print-routes-container { column-count: 3; column-gap: 30px; }
    .print-route-block { margin-bottom: 20px; break-inside: avoid; page-break-inside: avoid; border: 1px solid #cbd5e1; border-radius: 12px; overflow: hidden; background: #fff; }
    .print-route-title { background: #e2e8f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; padding: 10px 14px; border-bottom: 1px solid #cbd5e1; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 0.5px; }
    .print-route-title.centered { justify-content: center; text-align: center; }
    
    .print-date { display: flex; justify-content: flex-end; width: 100%; font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 800; margin-top: -15px; margin-bottom: 25px; }
    
    .print-badge { background: #0f172a !important; color: #fff !important; padding: 2px 14px; border-radius: 8px; font-size: 18px; font-weight: 900; letter-spacing: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; display: flex; align-items: baseline; gap: 3px; }
    .print-badge small { font-size: 11px; font-weight: 700; opacity: 0.8; letter-spacing: 0.5px; text-transform: uppercase; }
    
    .print-table { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
    .print-row { display: flex; align-items: baseline; justify-content: space-between; width: 100%; }
    .print-shop-name { font-weight: 750; color: #334155; font-size: 13px; white-space: nowrap; }
    .print-dots { flex-grow: 1; border-bottom: 2px dotted #94a3b8; margin: 0 8px; position: relative; top: -4px; opacity: 0.7; }
    .print-qty { font-weight: 900; font-size: 15px; color: #0f172a; white-space: nowrap; display: flex; align-items: baseline; justify-content: flex-end; gap: 3px; }
    .print-qty small { font-size: 11px; font-weight: 700; color: #64748b; text-transform: lowercase; }
    
    .city-badge { display: none !important; }
}

/* =========================================
   ССЫЛКИ И ФУТЕР
   ========================================= */
.tg-link {
    display: inline-flex;
    align-items: center; 
    justify-content: center; 
    gap: 5px; 
    padding: 4px 10px; 
    line-height: 1; 
    font-weight: 600; 
    font-size: 13px; 
    letter-spacing: 0.3px; 
    background-color: rgba(255, 255, 255, 0.08); 
    border-radius: 6px; 
    color: inherit; 
    text-decoration: none; 
    transition: all 0.2s ease; 
}

.tg-link:hover {
    background-color: rgba(255, 255, 255, 0.15); 
    color: #2AABEE; 
    text-shadow: 0 0 8px rgba(42, 171, 238, 0.5); 
}

.tg-link svg {
    display: block;
    width: 14px; 
    height: 14px; 
}

.footer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: absolute; 
    bottom: 24px; 
    left: 50%;
    transform: translateX(-50%); 
    width: fit-content;
    opacity: 0.6; 
    transition: opacity 0.3s ease; 
}

.footer-wrapper:hover { opacity: 1; }
.version-text { color: #8b9bb4; font-size: 14px; }

#eggStatus { color: #fbbf24 !important; }

.badge-purple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 6px;
  margin-left: 8px;
  background: rgba(187, 134, 252, 0.12);
  border: 1px solid rgba(187, 134, 252, 0.25);
  color: #d8b4fe;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 6px;
  line-height: 1;
  transform: translateY(1.5px);
  animation: badgePulse 2.5s infinite ease-in-out;
}

@keyframes badgePulse {
  0%, 100% { background: rgba(187, 134, 252, 0.12); border-color: rgba(187, 134, 252, 0.25); box-shadow: 0 0 0 0 rgba(187, 134, 252, 0); }
  50% { background: rgba(187, 134, 252, 0.22); border-color: rgba(187, 134, 252, 0.5); box-shadow: 0 0 8px 1px rgba(187, 134, 252, 0.3); }
}

/* =========================================
   АКЦЕНТ: НАЗВАНИЕ ГОРОДА В ШАПКЕ ТТ
   ========================================= */
.city-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    padding: 2px 6px;
    vertical-align: middle;
    position: relative;
    line-height: 1.3;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(14, 165, 233, 0.05));
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: 6px;
    color: #38bdf8; 
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.15);
    animation: cityPulse 6s infinite ease-in-out;
}

@media screen and (min-width: 701px) {
    .city-badge { transform: translateY(0.5px); }
}

@media screen and (max-width: 480px) {
    .city-badge { transform: translateY(0.2px); }
    .top-unit { display: block; margin-top: 2px; line-height: 1; }
}

@keyframes cityPulse {
    0%, 100% { box-shadow: 0 0 2px rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.4); }
    50% { box-shadow: 0 0 6px rgba(56, 189, 248, 0.45); border-color: rgba(56, 189, 248, 0.7); }
}

.export-grid .city-badge { display: none !important; }

.fade-bottom {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px; 
    background: linear-gradient(transparent, #010409); 
    pointer-events: none; 
    margin-top: -50px; 
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in-animation { animation: fadeIn 0.3s ease-out forwards; }

.premium-route-row { margin-bottom: 14px; padding: 0 4px; }
.premium-route-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.premium-route-name { font-size: 14px; font-weight: 500; color: #cbd5e1; letter-spacing: 0.3px; }
.premium-route-amount { font-family: 'JetBrains Mono', 'Courier New', 'Roboto Mono', monospace; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.premium-unit { font-size: 11px; color: #64748b; font-weight: 500; margin-left: 4px; font-family: system-ui, sans-serif; }
.premium-track { width: 100%; height: 8px; background: rgba(15, 23, 42, 0.5); border-radius: 10px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05); overflow: hidden; }
.premium-fill { height: 100%; border-radius: 10px; transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; }
.premium-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%); border-radius: 10px 10px 0 0; }

.scroll-lock { overflow: hidden !important; overscroll-behavior: none !important; }

@keyframes smoothFadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
.animate-list { animation: smoothFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* =========================================
   ДИНАМИЧЕСКИЙ СКРОЛЛ
   ========================================= */
@property --scroll-color {
    syntax: '<color>';
    initial-value: #38bdf8;
    inherits: true;
}

#statsModalBody {
    --scroll-color: #38bdf8; 
    transition: --scroll-color 0.4s ease-in-out; 
    scrollbar-color: var(--scroll-color) rgba(255, 255, 255, 0.03);
    scrollbar-width: thin;
}

#statsModalBody.scroll-egg { --scroll-color: #fbbf24; }
#statsModalBody.scroll-milk { --scroll-color: #38bdf8; }

#statsModalBody::-webkit-scrollbar { width: 6px; }
#statsModalBody::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); border-radius: 10px; }
#statsModalBody::-webkit-scrollbar-thumb {
    background-color: var(--scroll-color);
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3), 0 0 10px var(--scroll-color);
}