/* ============================================================
   SMK Tool — DARK GLASS / visual-only theme
   Откат: удалить подключение glass-ui.css из index.html.
   Меняйте переменные ниже для настройки прозрачности и размытия.
   ============================================================ */
@media screen {
  :root {
    --glass-panel-alpha: .54;       /* 0 = полностью прозрачно, 1 = непрозрачно */
    --glass-card-alpha: .40;
    --glass-blur: 24px;
    --glass-stroke: rgba(180, 203, 255, .20);
    --glass-stroke-top: rgba(222, 231, 255, .32);
  }

  /* Оригинальный фон теперь виден сквозь панели. */
  body { background: #050914; }
  body .bg {
    opacity: 1;
    background:
      linear-gradient(180deg,rgba(2,5,14,.42),rgba(3,6,17,.65)),
      url('gallery/main-bg.png') center/cover no-repeat;
  }
  @media (orientation: portrait) {
    body .bg {
      background:
        linear-gradient(180deg,rgba(3,7,19,.46),rgba(3,6,17,.70)),
        url('gallery/main-bg-mobile.png') center/cover no-repeat;
    }
  }

  /* Две большие стеклянные поверхности — основа Next UI. */
  .next-ui-app .next-side,
  .next-ui-app .next-main {
    background:
      linear-gradient(136deg,
        rgba(51,69,108,.20) 0%,
        rgba(12,21,39,var(--glass-panel-alpha)) 34%,
        rgba(8,15,29,.58) 100%) !important;
    border: 1px solid var(--glass-stroke) !important;
    border-top-color:var(--glass-stroke-top) !important;
    box-shadow:
      0 25px 70px rgba(0,2,14,.42),
      inset 0 1px 0 rgba(245,248,255,.095),
      inset 0 -1px 0 rgba(116,142,212,.055) !important;
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(135%);
    backdrop-filter:blur(var(--glass-blur)) saturate(135%);
  }

  /* Этапы и индикаторы: читаемые, но не глухие блоки. */
  .next-ui-app .next-step:not(.active),
  .next-ui-app .next-summary-side,
  .next-ui-app .next-meta,
  .next-ui-app .next-chip,
  .next-ui-app .next-tip,
  .next-ui-app .next-pill {
    background:rgba(13,24,45,.28) !important;
    border-color:rgba(164,191,252,.13) !important;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
  .next-ui-app .next-step.active {
    background:linear-gradient(125deg,rgba(80,118,218,.23),rgba(114,77,193,.13)) !important;
    border-color:rgba(153,174,255,.40) !important;
    box-shadow:inset 0 1px rgba(245,248,255,.07),0 9px 20px rgba(9,13,33,.13);
  }
  .next-ui-app .next-stepnum {
    background:rgba(45,64,104,.45);
    border-color:rgba(159,184,241,.24);
  }
  .next-ui-app .next-step.active .next-stepnum {
    background:linear-gradient(135deg,rgba(76,129,244,.9),rgba(148,97,232,.92));
  }
  .next-ui-app .next-quick-btn,
  .next-ui-app #btnOpenRadio,
  .next-ui-app #btnOpenGame {
    background:rgba(25,41,68,.34) !important;
    border:1px solid rgba(181,199,252,.21) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.08) !important;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }

  /* Поиск — один стеклянный инпут, без дополнительной внутренней рамки. */
  #stepsContainer .next-search {
    background:rgba(6,13,28,.50) !important;
    border:1px solid rgba(160,184,245,.28) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.055),0 12px 28px rgba(0,3,13,.15);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }
  #stepsContainer .next-search:focus-within {
    border-color:rgba(152,177,255,.80) !important;
    box-shadow:0 0 0 3px rgba(112,127,234,.15),inset 0 1px rgba(255,255,255,.08);
  }
  #stepsContainer .next-search input {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    color:#f4f7ff;
  }
  #stepsContainer .next-search input::placeholder {color:#a4b5d2;}

  /* Карточки маршрутов: стекло с бликом по верхнему краю. */
  #stepsContainer #routeButtons .route-btn.next-route {
    background:linear-gradient(145deg,rgba(64,87,137,.39),rgba(12,23,43,var(--glass-card-alpha))) !important;
    border:1px solid rgba(175,199,255,.24) !important;
    border-top-color:rgba(214,230,255,.39) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.06),0 9px 25px rgba(0,4,19,.19) !important;
    -webkit-backdrop-filter:blur(13px) saturate(145%) !important;
    backdrop-filter:blur(13px) saturate(145%) !important;
  }
  #stepsContainer #routeButtons .route-btn.next-route:hover {
    background:linear-gradient(145deg,rgba(87,115,188,.52),rgba(34,36,81,.57)) !important;
    border-color:rgba(164,191,255,.72) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.12),0 16px 32px rgba(1,6,27,.33) !important;
  }
  #stepsContainer .next-route .next-route-tt {color:#b3c3df;}
  #stepsContainer .next-allroute {
    background:linear-gradient(115deg,rgba(52,98,188,.34),rgba(111,63,158,.29)) !important;
    border-color:rgba(185,169,255,.46) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.10),0 9px 25px rgba(0,4,19,.17) !important;
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }
  #stepsContainer .next-allroute:hover {
    background:linear-gradient(115deg,rgba(74,117,217,.49),rgba(141,83,193,.38)) !important;
  }
  #stepsContainer #routeFooterActions .next-foot-btn {
    background:rgba(31,46,77,.27) !important;
    border:1px solid rgba(160,184,235,.22) !important;
    color:#c4d3ef !important;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
  #stepsContainer #routeFooterActions .next-foot-btn:hover {background:rgba(73,94,151,.34) !important;}

  /* Зоны загрузки: прозрачная тёмная подложка и хорошо видимый пунктир. */
  #stepsContainer .next-dropzone {
    background:
      radial-gradient(circle at 50% 0,rgba(113,113,231,.18),transparent 62%),
      rgba(6,15,31,.43) !important;
    border-color:rgba(166,189,245,.51) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.07),0 14px 35px rgba(0,3,14,.15);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
  #stepsContainer .next-dropzone:hover,
  #stepsContainer .next-dropzone.dragover {
    background:rgba(48,65,122,.39) !important;
    border-color:#becaff !important;
  }
  #stepsContainer .next-actions .next-secondary,
  #stepsContainer .next-browse {
    background:rgba(45,64,102,.38) !important;
    border:1px solid rgba(166,193,253,.34) !important;
    color:#e6eeff;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
  #stepsContainer .next-file-card,
  #stepsContainer .file-status {background:rgba(12,62,49,.40) !important;}

  /* Результаты: карточки тоже полупрозрачные, текст остаётся контрастным. */
  .next-ui-app .shop-card {
    background:linear-gradient(140deg,rgba(36,59,104,.42),rgba(7,15,33,.48)) !important;
    border:1px solid rgba(176,198,255,.22) !important;
    border-top-color:rgba(206,220,255,.36) !important;
    box-shadow:0 12px 30px rgba(0,3,17,.22),inset 0 1px rgba(255,255,255,.07) !important;
    -webkit-backdrop-filter:blur(15px) saturate(135%) !important;
    backdrop-filter:blur(15px) saturate(135%) !important;
  }
  .next-ui-app .shop-card:hover {
    border-color:rgba(175,205,255,.44) !important;
    box-shadow:0 15px 32px rgba(0,3,17,.32),inset 0 1px rgba(255,255,255,.09) !important;
  }
  .next-ui-app .shop-title {
    background:linear-gradient(90deg,rgba(54,107,204,.23),rgba(78,98,157,.065)) !important;
    border-bottom:1px solid rgba(177,202,255,.13) !important;
  }
  .next-ui-app .shop-row {
    border-bottom-color:rgba(187,211,255,.095) !important;
  }
  .next-ui-app .shop-row span:first-child {color:#f0f5ff;}
  .next-ui-app .qty-accent-milk,
  .next-ui-app .qty-accent-egg {background:rgba(32,63,110,.39);}
  .next-ui-app .summary-date-badge,
  .next-ui-app .total-glass,
  .next-ui-app .weight-card {
    background:rgba(15,28,52,.36) !important;
    border:1px solid rgba(179,201,249,.20) !important;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
  .next-ui-app .total-header {
    background:linear-gradient(100deg,rgba(65,86,134,.28),rgba(35,51,83,.16)) !important;
  }
  .next-ui-app .weight-card.m {background:rgba(44,94,177,.23) !important;border-color:rgba(102,158,250,.36) !important;}
  .next-ui-app .weight-card.e {background:rgba(143,106,33,.20) !important;border-color:rgba(237,180,72,.32) !important;}

  /* Плавающая панель остается закреплённой; стекло прозрачнее. */
  body #controlsWrap {
    background:linear-gradient(138deg,rgba(37,54,87,.69),rgba(10,18,34,.70)) !important;
    border:1px solid rgba(186,205,255,.34) !important;
    border-top-color:rgba(226,236,255,.43) !important;
    box-shadow:0 16px 48px rgba(0,3,17,.46),inset 0 1px rgba(255,255,255,.11) !important;
    -webkit-backdrop-filter:blur(24px) saturate(150%) !important;
    backdrop-filter:blur(24px) saturate(150%) !important;
  }

  /* Диалоги отделены от фона, но не выглядят как непрозрачные листы. */
  .custom-alert-overlay,.about-modal,.admin-modal,#bug-modal.next-modal-backdrop {
    background:rgba(2,5,16,.59) !important;
    -webkit-backdrop-filter:blur(17px) saturate(115%);
    backdrop-filter:blur(17px) saturate(115%);
  }
  .custom-alert-overlay .custom-alert-card,
  .custom-alert-overlay .custom-stats-card,
  .about-modal .about-card,
  #bug-modal .next-bug-card,
  .admin-modal .admin-card {
    background:linear-gradient(148deg,rgba(31,45,75,.83),rgba(9,16,31,.85)) !important;
    border:1px solid rgba(185,207,255,.27) !important;
    border-top-color:rgba(233,239,255,.36) !important;
    box-shadow:0 28px 76px rgba(0,3,17,.59),inset 0 1px rgba(255,255,255,.10) !important;
    -webkit-backdrop-filter:blur(30px) saturate(145%);
    backdrop-filter:blur(30px) saturate(145%);
  }
  #bug-modal #bug-text {
    background:rgba(3,10,23,.56) !important;
    border-color:rgba(175,198,255,.28) !important;
  }
  .about-modal .about-feature,
  .about-modal .about-version-row,
  .about-modal .about-tech-list {
    background:rgba(21,38,67,.39) !important;
  }
  /* Сплэш уже стеклянный, лишь немного подстраиваем глубину. */
  #splash .splash-container {
    background:linear-gradient(145deg,rgba(35,48,77,.81),rgba(11,18,33,.85));
    border-color:rgba(190,204,255,.27);
    -webkit-backdrop-filter:blur(25px);
    backdrop-filter:blur(25px);
  }

  /* Без поддержки backdrop-filter используем более плотную подложку. */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .next-ui-app .next-side,.next-ui-app .next-main,
    .next-ui-app .shop-card,.custom-alert-overlay .custom-alert-card,
    .about-modal .about-card,#bug-modal .next-bug-card {
      background:rgba(12,19,36,.92) !important;
    }
  }
  /* На узких экранах уменьшаем вложенное размытие для плавного скролла. */
  @media (max-width:720px) {
    .next-ui-app .next-side,.next-ui-app .next-main {
      -webkit-backdrop-filter:blur(18px) saturate(130%);
      backdrop-filter:blur(18px) saturate(130%);
    }
    #stepsContainer #routeButtons .route-btn.next-route,
    .next-ui-app .shop-card {
      -webkit-backdrop-filter:blur(8px) saturate(125%) !important;
      backdrop-filter:blur(8px) saturate(125%) !important;
    }
  }
  @media (prefers-reduced-transparency:reduce) {
    .next-ui-app .next-side,.next-ui-app .next-main,
    .next-ui-app .shop-card {
      background:rgba(10,18,34,.92) !important;
      -webkit-backdrop-filter:none !important;
      backdrop-filter:none !important;
    }
  }

}


/* ==========================================================
   SMK Tool — CLASSIC SPLASH REFINED
   Возвращает компоновку первоначального сплэша без карточки.
   Дополнения: мягкий живой фон, круговая подсветка и завершение
   при 100% из существующего app.js/next-ui.css.
   Подключать последним или поместить в конец glass-ui.css.
   ========================================================== */
#splash {
    background:
        radial-gradient(ellipse 46% 52% at 44% 43%, rgba(15, 69, 114, .23), transparent 88%),
        radial-gradient(ellipse 40% 50% at 63% 70%, rgba(78, 38, 137, .20), transparent 85%),
        #030814;
}

/* Фон, как в классической заставке, но без тяжёлых частиц JS */
#splash .splash-aura {
    display: block;
    width: 55vmax;
    height: 55vmax;
    max-width: 950px;
    max-height: 950px;
    opacity: .09;
    filter: blur(105px);
    animation: rotateAura 16s linear infinite;
}
#splash .splash-particles { display: block; }
#splash::before { opacity: .65; }
#splash::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .40;
    background-image:
        radial-gradient(1px 1px at 12% 78%, #77a9f8 98%, transparent),
        radial-gradient(1px 1px at 88% 30%, #bb9eff 98%, transparent),
        radial-gradient(1px 1px at 78% 84%, #91b6ff 98%, transparent),
        radial-gradient(1px 1px at 25% 21%, #af9afa 98%, transparent);
    animation: classicSplashStars 4.5s ease-in-out infinite alternate;
}

/* Полноэкранная классическая компоновка — НЕТ стеклянной карточки */
#splash .splash-container {
    width: min(420px, calc(100vw - 48px));
    padding: 0;
    gap: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    isolation: auto;
    animation: classicSplashAppear .75s cubic-bezier(.16, 1, .3, 1) both;
}
#splash .splash-container::before,
#splash .splash-container::after {
    display: none;
    content: none;
}

/* Возвращаем старое горизонтальное расположение названия */
#splash .splash-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 17px;
    margin: 0 auto;
    text-align: left;
    animation: splashLogoEnter .7s .1s ease-out both;
}

/* Иконка больше не сидит внутри стеклянной плитки */
#splash .logo-icon {
    position: relative;
    width: 55px;
    height: 55px;
    padding: 3px;
    flex: 0 0 55px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 0 11px rgba(92, 153, 255, .33));
    animation: splashIconFloat 3.6s ease-in-out infinite;
}
#splash .logo-icon::before {
    inset: -7px;
    border-radius: 50%;
    opacity: .55;
    animation-duration: 8s;
}
#splash .logo-icon::after {
    inset: -5px;
    border-radius: 50%;
    opacity: .45;
}
#splash .logo-icon .svg-icon {
    display: block;
    width: 100%;
    height: 100%;
}

#splash .logo-text {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.8px;
    text-align: left;
    color: #f6f8ff;
    animation: splashTextGlow 3.5s ease-in-out infinite;
}
#splash .logo-text span {
    display: inline;
    margin-left: 8px;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.8px;
    text-transform: none;
    background: none;
    color: #b6a5ff;
    -webkit-text-fill-color: #b6a5ff;
    filter: none;
}

/* Старая вытянутая полоса + аккуратный блик */
#splash .splash-loader-wrap {
    width: 100%;
    height: 5px;
    margin-top: 38px;
    overflow: hidden;
    background: rgba(118, 142, 198, .17);
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
}
#splash .splash-loader-bar {
    background: linear-gradient(90deg, #4d95ff, #8c7bff 56%, #c49afa);
    box-shadow: 0 0 14px rgba(134, 104, 255, .4);
}
#splash .splash-loader-bar::after { display: none; }
#splash .splash-loader-shimmer {
    display: block;
    animation: shimmerSweep 1.7s ease-in-out infinite;
}
#splash .splash-loader-text {
    width: 100%;
    margin-top: 19px;
    font-size: 11px;
    letter-spacing: 1.6px;
    font-weight: 600;
    color: #92a4c7;
}
#splash .splash-percent {
    font-size: 12px;
    color: #c5a1ff;
}

/* Существующая логика splash-complete / splash-exit продолжает работать */
#splash.splash-exit .splash-container {
    animation: splashFinalExit .55s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes classicSplashAppear {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes classicSplashStars {
    from { opacity: .18; }
    to   { opacity: .47; }
}

@media (max-width: 480px) {
    #splash .splash-container { width: min(340px, calc(100vw - 44px)); padding: 0; }
    #splash .splash-logo { gap: 12px; }
    #splash .logo-icon { width: 47px; height: 47px; flex-basis: 47px; padding: 2px; }
    #splash .logo-text, #splash .logo-text span { font-size: 25px; }
    #splash .logo-text span { margin-left: 6px; }
    #splash .splash-loader-wrap { margin-top: 34px; }
    #splash .splash-loader-text { font-size: 9px; letter-spacing: 1.2px; }
}
@media (prefers-reduced-motion: reduce) {
    #splash .splash-aura,
    #splash::after,
    #splash .splash-container,
    #splash .splash-logo,
    #splash .logo-icon,
    #splash .logo-text,
    #splash .splash-loader-shimmer {
        animation: none !important;
    }
    #splash .splash-container,
    #splash .splash-logo { opacity: 1; transform: none; }
}
/* Молоко — синий */
.next-ui-app .qty-accent-milk {
    color: #93c5fd;
    background: rgba(32, 63, 110, .39);
}

/* Яйца — янтарный */
.next-ui-app .qty-accent-egg {
    color: #fbbf24;
    background: rgba(245, 158, 11, .16);
    border-color: rgba(251, 191, 36, .35);
    box-shadow: 0 0 12px rgba(245, 158, 11, .08);
}
/* Оптимизация стеклянных карточек результатов */
@media (min-width: 1101px) {
    .next-ui-app #result .shop-card {
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }
}

/* ========================================
   SMK TOOL — FAST LAYOUT TRANSITION
   ======================================== */

@media (min-width: 1101px) {

    /* Во время движения не пересчитываем blur */
    .next-layout.smk-moving .next-main,
    .next-layout.smk-moving #result .shop-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Не запускаем дополнительные CSS-анимации */
    .next-layout.smk-moving #result .shop-card {
        transition: none !important;
    }
}

/* =====================================================
   UpdateLog — одна кнопка, два представления
   ПК: строка под Игра / Радио
   Мобильные: третья квадратная иконка
   ===================================================== */

/* SVG для смартфонов скрыт на широком экране. */
.next-ui-app #btnUpdateLog .next-updatelog-plane {
    display: none;
}

@media (min-width: 1101px) {
    .next-ui-app .next-quick-actions {
        flex-wrap: wrap;
    }
    .next-ui-app .next-quick-actions #btnUpdateLog {
        width: 100%;
        flex: 0 0 100%;
        margin-top: 2px;
    }
}

@media (max-width: 1100px) {
    .next-ui-app .next-bottom-side .next-quick-actions {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }

    .next-ui-app .next-quick-actions #btnUpdateLog {
        box-sizing: border-box;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 39px !important;
        width: 39px !important;
        min-width: 39px !important;
        max-width: 39px !important;
        height: 39px !important;
        min-height: 39px !important;
        max-height: 39px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden;
        border-radius: 12px !important;
        background: rgba(25, 41, 68, .34) !important;
        border: 1px solid rgba(181, 199, 252, .21) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.08) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .next-ui-app #btnUpdateLog .update-log-text,
    .next-ui-app #btnUpdateLog .update-log-arrow {
        display: none !important;
    }

    /* Уникальный класс, не конфликтующий с иконкой модального окна. */
    .next-ui-app .next-quick-actions #btnUpdateLog svg.next-updatelog-plane {
        display: block !important;
        position: static !important;
        inset: auto !important;
        width: 19px !important;
        min-width: 19px !important;
        max-width: 19px !important;
        height: 19px !important;
        min-height: 19px !important;
        max-height: 19px !important;
        flex: 0 0 19px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        fill: currentColor !important;
        color: #bfc9ff !important;
    }

    /* Третья иконка занимает дополнительное место справа. */
    .next-ui-app .next-brand {
        padding-right: 150px;
    }
}

@media (max-width: 720px) {
    .next-ui-app .next-quick-actions #btnUpdateLog {
        flex-basis: 35px !important;
        width: 35px !important;
        min-width: 35px !important;
        max-width: 35px !important;
        height: 35px !important;
        min-height: 35px !important;
        max-height: 35px !important;
        border-radius: 11px !important;
    }
    .next-ui-app .next-brand {
        padding-right: 130px;
    }
}

@media (max-width: 360px) {
    .next-ui-app .next-quick-actions #btnUpdateLog {
        flex-basis: 32px !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }
    .next-ui-app .next-brand {
        padding-right: 120px;
    }
}