/* ═══ 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 .as-profile-card .field input, body.glass .as-profile-card .field textarea{
  background: rgba(241,245,242,.94) !important;
  border-color: rgba(22,96,76,.14) !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);
}
body.glass #hdr.scrolled{ box-shadow: 0 4px 18px rgba(16,28,22,.16) !important; }
body.glass.dark #hdr.scrolled{ box-shadow: 0 6px 20px rgba(0,0,0,.40) !important; }

/* ── таббар: парящая тёмная пилюля, как в 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; min-width:0; padding:3px 0; 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:var(--hl-y,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 #bigTextSheet.sheet{border-radius: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{width:100%}
body.glass #tabbar .tab .lab{ white-space:nowrap;overflow:visible;text-overflow:clip;max-width:100%;
  font-size:clamp(8.5px,2.45vw,10px);letter-spacing:-.1px }

/* ═══ Тёмная тема поверх Glass ═══
   Проблема: стеклянные поверхности выше заданы белыми (rgba(255,255,255,…)) и в тёмной теме
   становятся светлыми при светлом тексте — неактивные вкладки/баннеры «исчезают».
   Ниже — настоящие тёмные поверхности + светлый текст. Активное = --accent-deep с белым текстом. */
html.glass.dark, html.dark.glass{ color-scheme: dark }
body.glass.dark .card, body.glass.dark .prof-tile, body.glass.dark .theme-tile, body.glass.dark .skgrp,
body.glass.dark .hold-banner, body.glass.dark .stat, body.glass.dark .kv, body.glass.dark .ku-pv, body.glass.dark .main-card{
  background: rgba(26,34,30,.74) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.40) !important;
}
body.glass.dark .field input, body.glass.dark .field select, body.glass.dark .field textarea, body.glass.dark .search{
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--ink) !important;
}
/* неактивные переключатели/чипы/сегменты — тёмные со светлым текстом */
body.glass.dark .opts .opt, body.glass.dark .chip, body.glass.dark .slot,
body.glass.dark .seg, body.glass.dark .seg-b, body.glass.dark .bd-cat{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--ink) !important;
}
/* активные — зелёная заливка под белый текст */
body.glass.dark .opts .opt.sel, body.glass.dark .chip.on, body.glass.dark .chip.act,
body.glass.dark .slot.on, body.glass.dark .seg-b.on, body.glass.dark .bd-cat.sel{
  background: var(--accent-deep) !important; color: #fff !important; border-color: transparent !important;
}
/* баннер входа/демо — тёмный, читаемый */
body.glass.dark .demo-banner{
  background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18) !important; color: var(--ink) !important;
}
/* шапка и таббар — тёмное стекло вместо белого */
body.glass.dark #hdr{ background: rgba(18,24,21,.84) !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) !important; }
body.glass.dark #tabbar{ background: rgba(22,28,25,.94) !important; border-color: rgba(255,255,255,.08) !important; }

/* Узкие телефоны: подписи вкладок остаются раздельными и читаемыми на 320 px. */
@media(max-width:350px){
  body.glass #tabbar{
    width:calc(100vw - 16px)!important;
    padding-left:4px!important;padding-right:4px!important;
    border-radius:22px!important;
  }
  body.glass #tabbar .tab{min-width:0;padding:3px 1px}
  body.glass #tabbar .tab .lab{
    display:block;width:100%;max-width:100%;
    font-size:8.5px;letter-spacing:-.15px;text-align:center;
  }
  body.glass #tabbar .tab-plus .plus-c{width:50px;height:50px}
  body.glass #tabbar .tab-plus .plus-lab{font-size:8.5px}
}

/* Корты: glass загружается последним, поэтому его тёмные поверхности задаём здесь. */
body.glass.dark .court-step,
body.glass.dark .court-my-bookings{
  background:rgba(26,33,29,.94)!important;
  border-color:rgba(255,255,255,.10)!important;
  color:#EBEAE3!important;
}
body.glass.dark .court-type:not(.on),
body.glass.dark .court-date:not(.on),
body.glass.dark .court-slot:not(.on),
body.glass.dark .court-meta,
body.glass.dark .court-duration{
  background:#202822!important;
  border-color:#303A33!important;
  color:#EBEAE3!important;
}
body.glass.dark .court-type-icon,
body.glass.dark .court-duration-options,
body.glass.dark .court-selection>i{
  background:#1A211D!important;
}
body.glass.dark .court-selection{
  border-color:#334039;
  color:#98A29A;
}
body.glass.dark .court-selection.ready{
  background:#183026!important;
  border-color:#285B47!important;
  color:#4CC996;
}
body.glass.dark .court-my-bookings b{color:#EBEAE3}
body.glass.dark .court-my-bookings small,
body.glass.dark .court-my-bookings>i{color:#98A29A}
body.glass.dark .home-footer .ft-map{
  background:#1A211D!important;
  border-color:#2A332D!important;
  color:#EBEAE3!important;
}
body.glass.dark .home-footer .ft-map .ti{color:#4CC996!important}