/* Liquid Glass: полупрозрачные поверхности с размытием, бликами по краю и пружинной анимацией. */
:root {
  --wall:
    radial-gradient(70% 38% at 8% 0%, rgba(0, 122, 255, 0.26), transparent 72%),
    radial-gradient(55% 34% at 100% 14%, rgba(255, 45, 85, 0.15), transparent 72%),
    radial-gradient(65% 40% at 0% 62%, rgba(48, 176, 199, 0.22), transparent 72%),
    radial-gradient(60% 42% at 100% 100%, rgba(175, 82, 222, 0.20), transparent 72%),
    #eceff7;
  --glass: rgba(255, 255, 255, 0.52);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --glass-line: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 10px 30px rgba(40, 56, 120, 0.12), 0 1px 3px rgba(40, 56, 120, 0.08);
  --blur: blur(26px) saturate(190%);
  --card: rgba(255, 255, 255, 0.5);
  --bar: rgba(244, 246, 252, 0.6);
}
:root[data-theme="dark"] {
  --wall:
    radial-gradient(70% 38% at 8% 0%, rgba(10, 132, 255, 0.34), transparent 72%),
    radial-gradient(55% 34% at 100% 14%, rgba(255, 55, 95, 0.20), transparent 72%),
    radial-gradient(65% 40% at 0% 62%, rgba(64, 200, 224, 0.20), transparent 72%),
    radial-gradient(60% 42% at 100% 100%, rgba(191, 90, 242, 0.28), transparent 72%),
    #05060b;
  --glass: rgba(60, 62, 78, 0.42);
  --glass-strong: rgba(48, 50, 64, 0.66);
  --glass-edge: rgba(255, 255, 255, 0.16);
  --glass-line: rgba(255, 255, 255, 0.28);
  --glass-shadow: 0 12px 34px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
  --card: rgba(60, 62, 78, 0.42);
  --bar: rgba(20, 22, 32, 0.55);
}
html, body { background: var(--wall) fixed; }
.screen { background: var(--wall); }

/* общая «стеклянная» поверхность */
.group, .metric, .hero, .act, .chip, .banner, .search, .stepper, .photos img {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--glass-shadow), inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 0 var(--glass-line);
}
.group, .metric, .hero, .act, .banner { background: var(--glass); }
.group { border-radius: 20px; }
.hero { border-radius: 26px; }
.metric { border-radius: 18px; }
.act { border-radius: 18px; }
.row, .field { background: transparent; }
.row + .row::before, .field + .field::before { background: color-mix(in srgb, var(--sep) 70%, transparent); }
button.row:active, a.row:active { background: color-mix(in srgb, var(--fill) 120%, transparent); }
.chip { background: var(--glass); }
.chip.on { background: color-mix(in srgb, var(--tint) 88%, transparent); box-shadow: 0 6px 18px color-mix(in srgb, var(--tint) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.search { background: var(--glass); border-radius: 14px; height: 40px; }
.search input { height: 40px; }
.thumb { background: color-mix(in srgb, var(--fill) 120%, transparent); }

/* панель навигации */
.navbar.solid {
  background: var(--bar); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: 0 1px 0 var(--glass-edge), 0 6px 20px rgba(40, 56, 120, 0.06);
}
.nbtn { transition: opacity 0.15s, transform 0.25s var(--spring); }
.nbtn:active { transform: scale(0.92); }

/* кнопки */
.btn {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 92%, #fff), color-mix(in srgb, var(--tint) 82%, #000));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tint) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
}
.btn::after { content: ""; position: absolute; left: 8%; right: 8%; top: 1px; height: 46%; border-radius: 14px 14px 40px 40px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)); pointer-events: none; }
.btn.gray, .btn.red {
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--glass-shadow), inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 0 var(--glass-line);
}
.btn.gray::after, .btn.red::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)); }
.btn.red { color: var(--red); }
.btn.small { border-radius: 999px; }

/* сегментный переключатель */
.seg { background: var(--glass); border-radius: 999px; padding: 3px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 2px rgba(40, 56, 120, 0.08); }
.seg button { height: 30px; border-radius: 999px; }
.seg .thumbbg { top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: var(--glass-strong); box-shadow: 0 4px 14px rgba(40, 56, 120, 0.18), inset 0 1px 0 var(--glass-line), inset 0 0 0 0.5px var(--glass-edge); }
:root[data-theme="dark"] .seg .thumbbg { background: rgba(120, 122, 140, 0.55); }
.seg .thumbbg { width: calc((100% - 6px) / var(--n, 1)); }

/* переключатель и степпер */
.switch { background: color-mix(in srgb, var(--fill-2) 130%, transparent); box-shadow: inset 0 0 0 0.5px var(--glass-edge); }
.switch.on { background: var(--green); }
.switch::after { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 #fff; }
.stepper { background: var(--glass); border-radius: 12px; height: 34px; }

/* листы, диалоги, уведомления */
.backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet {
  background: var(--glass-strong); -webkit-backdrop-filter: blur(40px) saturate(200%); backdrop-filter: blur(40px) saturate(200%);
  border-radius: 30px 30px 0 0; box-shadow: 0 -12px 50px rgba(20, 30, 80, 0.28), inset 0 1px 0 var(--glass-line), inset 0 0 0 0.5px var(--glass-edge);
}
.sheet .group, .sheet .metric { background: color-mix(in srgb, var(--glass-strong) 85%, transparent); }
.sheet .grab { background: color-mix(in srgb, var(--label-3) 110%, transparent); }
.alertbox, :root:not([data-theme="dark"]) .alertbox {
  background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 26px;
  box-shadow: 0 24px 60px rgba(20, 30, 80, 0.3), inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 0 var(--glass-line);
}
.toast { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-shadow), inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 0 var(--glass-line); }
.field.err { background: color-mix(in srgb, var(--red) 10%, transparent); }
.banner { border-radius: 18px; background: color-mix(in srgb, var(--orange) 16%, var(--glass)); }

/* плавающая панель вкладок */
.scroll { padding-bottom: calc(112px + var(--sab)); }
.tabbar {
  position: fixed; z-index: 40; left: 14px; right: 14px; bottom: calc(10px + var(--sab)); height: 64px; padding: 5px; display: flex;
  border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%);
  box-shadow: 0 16px 40px rgba(30, 44, 110, 0.22), 0 2px 6px rgba(30, 44, 110, 0.12), inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 0 var(--glass-line);
  transform: translateY(0); transition: transform 0.5s var(--spring), opacity 0.3s;
}
.tabbar.hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
.tabbar .lens {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / var(--tabs)); border-radius: 999px;
  background: var(--glass-strong); transition: transform 0.55s var(--spring);
  box-shadow: 0 6px 18px rgba(30, 44, 110, 0.18), inset 0 1px 0 var(--glass-line), inset 0 0 0 0.5px var(--glass-edge);
}
.tabbar .tab { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 500; color: var(--label-2); border-radius: 999px; transition: color 0.25s, transform 0.3s var(--spring); }
.tabbar .tab svg { width: 24px; height: 24px; }
.tabbar .tab.on { color: var(--tint); }
.tabbar .tab:active { transform: scale(0.92); }
.tabbar .tab.pop svg { animation: tabpop 0.5s var(--spring); }
@keyframes tabpop { 0% { transform: scale(0.7); } 60% { transform: scale(1.15); } 100% { transform: none; } }

/* лёгкий «жидкий» отклик при нажатии на плитки */
.act:active, button.metric:active, .banner:active { transform: scale(0.95); }