/* ═══ Krtsanisi Club — тема «Glass» (прототип). Включение: ?theme=glass, выключение: ?theme=classic.
   Современный iOS-стиль: фото-обои с глубиной, стеклянные поверхности (backdrop-filter),
   парящий пилюля-таббар, крупная типографика. Старая тема не затрагивается: всё под body.glass ═══ */

body.glass{
  --wallpaper: url('splash.jpg?v=1'); /* рендер комплекса */
  background: transparent !important;
}
body.glass #app, body.glass .screen{ background: transparent !important }
html.glass{ background: #101816 !important }
body.glass::before{ /* обои: фото комплекса, мягкий блюр и затемнение к низу */
  content:""; position:fixed; inset:-20px; z-index:-2;
  background: var(--wallpaper) center/cover no-repeat;
  filter: blur(14px) saturate(1.15) brightness(1.02);
  transform: scale(1.06);
}
body.glass::after{
  content:""; position:fixed; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(20,30,26,.18) 78%, rgba(10,18,14,.34) 100%);
}

/* типографика: цвета текста НЕ трогаем — читаемость важнее эффектов.
   Белый текст допустим только там, где мы сами положили тёмную подложку (таббар). */

/* ── стеклянные поверхности ── */
body.glass .card, body.glass .prof-tile, body.glass .theme-tile, body.glass .skgrp,
body.glass .hold-banner, body.glass .stat, body.glass .kv, body.glass .ku-pv, body.glass .main-card{
  background: rgba(255,255,255,.88) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 8px 28px rgba(15,25,20,.18) !important;
  border-radius: 20px !important;
}
body.glass .field input, body.glass .field select, body.glass .field textarea, body.glass .search{
  background: rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-color: rgba(255,255,255,.6) !important;
}
body.glass .opts .opt, body.glass .chip, body.glass .slot, body.glass .seg{
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-color: rgba(255,255,255,.5);
}
body.glass .opts .opt.sel, body.glass .chip.on, body.glass .slot.on{
  background: var(--accent-deep, var(--accent)) !important; color:#fff !important; border-color: transparent !important;
}

/* ── шапка: прозрачное стекло ── */
body.glass #hdr{
  background: rgba(252,252,250,.88) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  border-bottom: none !important; box-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* ── таббар: парящая тёмная пилюля, как в iOS «Дом» ── */
body.glass #tabbar{
  left: 16px !important; right: 16px !important; bottom: 10px !important;
  transform: none !important; width: auto !important; max-width: 440px; margin: 0 auto;
  height: auto !important;
  display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr); align-items: center; justify-items: center;
  padding: 8px 8px; gap: 0;
  background: rgba(255,255,255,.97) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  border-radius: 24px !important; border: 0.5px solid rgba(20,30,25,.08) !important;
  box-shadow: 0 10px 30px rgba(15,25,20,.14) !important;
}
body.glass #tabbar .tab{ color: #9AA39C !important; padding:3px 10px; gap:3px;
  transition: color .18s ease, transform .18s ease }
body.glass #tabbar .tab .lab{ color: inherit; font-size:10px; font-weight:600; letter-spacing:.1px }
body.glass #tabbar .tab svg{ stroke: currentColor; width:21px; height:21px; transition: transform .18s ease }
body.glass #tabbar .tab.active{ background: transparent; color: var(--accent-ink,#0E7A4F) !important }
body.glass #tabbar .tab.active .lab{ color: var(--accent-ink,#0E7A4F) }
body.glass #tabbar .tab.active svg{ stroke: var(--accent-ink,#0E7A4F); transform: translateY(-1px) }
body.glass #tabbar .tab:active{ transform: scale(.94) }
body.glass #tabbar .tab .pill{ display:none }
/* «жидкое стекло»: подсветка активной вкладки не мигает, а ПЕРЕТЕКАЕТ — морфит позицию и ширину
   через ::before + CSS-переменные (переживает ре-рендеры → скользит). Пружинистый ease = «жидкость». */
body.glass #tabbar{ position:relative }
body.glass #tabbar::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:50%; left:0; height:46px; width:var(--hl-w,48px);
  transform:translate(var(--hl-x,0), -50%);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(30,132,103,.18), rgba(30,132,103,.08));
  box-shadow: inset 0 0 0 1px rgba(63,169,138,.38), 0 5px 16px rgba(20,90,70,.16);
  transition: transform .46s cubic-bezier(.5,1.35,.4,1), width .46s cubic-bezier(.5,1.35,.4,1);
}
body.glass.dark #tabbar::before{
  background:linear-gradient(180deg, rgba(76,164,134,.22), rgba(76,164,134,.10));
  box-shadow: inset 0 0 0 1px rgba(76,164,134,.42), 0 5px 16px rgba(0,0,0,.32);
}
@media(prefers-reduced-motion:reduce){ body.glass #tabbar::before{ transition:none } }
/* «+» — премиальная центральная кнопка: брендовый зелёный градиент, приподнята над баром,
   белое кольцо-halo + тонкий золотой ободок, многослойная тень и стеклянный блик */
body.glass #tabbar .tab-plus{ overflow:visible }
body.glass #tabbar .tab-plus .plus-c{
  width:54px; height:54px; margin-top:-16px; font-size:0; border:none; position:relative; z-index:3;
  background:radial-gradient(125% 125% at 32% 20%, #2F9A76 0%, #167254 44%, #0E4A38 100%);
  box-shadow:
    0 0 0 1.5px rgba(198,166,84,.60),   /* золотой ободок */
    0 0 0 6px rgba(255,255,255,.95),     /* белое кольцо — «пробивает» бар */
    0 12px 24px rgba(14,64,46,.40),      /* мягкая тень */
    0 4px 9px rgba(0,0,0,.18),
    inset 0 2px 0 rgba(255,255,255,.32); /* верхний блик — стекло */
  transition: transform .2s var(--ease), box-shadow .2s ease; }
/* сам плюс — двумя ровными штрихами (тоньше и чётче шрифтового символа) */
body.glass #tabbar .tab-plus .plus-c::before,
body.glass #tabbar .tab-plus .plus-c::after{
  content:''; position:absolute; top:50%; left:50%; background:#fff; border-radius:2px; }
body.glass #tabbar .tab-plus .plus-c::before{ width:21px; height:2.8px; transform:translate(-50%,-50%); }
body.glass #tabbar .tab-plus .plus-c::after{ width:2.8px; height:21px; transform:translate(-50%,-50%); }
body.glass #tabbar .tab-plus:active .plus-c{ transform:scale(.9) translateY(1px);
  box-shadow:0 0 0 1.5px rgba(198,166,84,.55), 0 0 0 6px rgba(255,255,255,.95),
    0 7px 15px rgba(14,64,46,.34), inset 0 2px 0 rgba(255,255,255,.26); }
body.glass.dark #tabbar .tab-plus .plus-c{
  background:radial-gradient(125% 125% at 32% 20%, #3ABD92 0%, #1E8B67 46%, #12684B 100%);
  box-shadow:
    0 0 0 1.5px rgba(203,173,95,.55),
    0 0 0 6px rgba(28,32,30,.97),
    0 12px 24px rgba(0,0,0,.46),
    0 4px 9px rgba(0,0,0,.30),
    inset 0 2px 0 rgba(255,255,255,.22); }
/* тёмная тема — тот же дизайн, тёмная поверхность */
body.glass.dark #tabbar{ background: rgba(28,32,30,.97) !important; border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.35) !important }
body.glass.dark #tabbar .tab{ color:#8E978F !important }
body.glass.dark #tabbar .tab.active{ background: transparent !important; color:#4CC996 !important }
body.glass.dark #tabbar .tab.active .lab{ color:#4CC996 }
body.glass.dark #tabbar .tab.active svg{ stroke:#4CC996 }

/* главная кнопка: парящая пилюля (стиль задаёт styles.css) */
body.glass #mainBtn{ border-radius: 999px !important }

/* ── шторки: почти непрозрачные — контент под ними не мутнит картинку ── */
body.glass .sheet{
  background: rgba(252,252,250,.97) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7);
  border-radius: 26px 26px 0 0 !important;
}
body.glass .sheet-hd, body.glass.dark .sheet-hd{ background: transparent !important }
body.glass .sheet-bg{ background: rgba(10,14,12,.42) !important }

/* зелёная карточка КУ: внутри неё .kv — это текст, стеклянную плашку не рисуем */
body.glass .kucard .kv{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border:none!important;box-shadow:none!important;border-radius:0!important}

/* хлебные крошки и баннеры */
body.glass .crumbs .crumb{ color: rgba(255,255,255,.85); background: rgba(255,255,255,.14); border-radius:999px }
body.glass .crumbs .crumb.cur{ color:#fff }

/* тёмная тема приложения + glass: приглушаем стекло в тёмное */
body.glass.dark .card, body.glass.dark .prof-tile, body.glass.dark .theme-tile, body.glass.dark .skgrp,
body.glass.dark .main-card, body.glass.dark .btn.pri.w100, body.glass.dark .btn.pri[style*="width:100%"]{
  background: rgba(24,28,26,.72) !important; border-color: rgba(255,255,255,.12) !important;
}
body.glass.dark .field input, body.glass.dark .field select, body.glass.dark .field textarea{
  background: rgba(24,28,26,.78) !important; border-color: rgba(255,255,255,.14) !important;
}
body.glass.dark #hdr{ background: rgba(18,22,20,.6) !important }
body.glass.dark .sheet{ background: rgba(22,26,24,.97) !important }

/* ═══ ЖЁСТКОЕ ЦЕНТРИРОВАНИЕ ТАБ-БАРА (идёт последним, перебивает всё) ═══ */
body.glass #tabbar{
  left: 50% !important; right: auto !important;
  transform: translateX(-50%) !important;
  width: min(440px, calc(100vw - 32px)) !important;
  margin: 0 !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr) !important;
}
body.glass #tabbar .tab .lab{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100% }