:root {
  --text: var(--tg-theme-text-color, #201c2e);
  --hint: var(--tg-theme-hint-color, #6b6478);
  --link: #7c5cff;
  --button: #7c5cff;
  --button-text: #ffffff;

  --page-bg-1: #eef0fb;
  --page-bg-2: #fbeef6;

  /* "Жидкое стекло": не тонированная матовая панель, а яркое почти
     прозрачное стекло — базовая заливка едва заметна, форму даёт блик
     (--glass-sheen-*) и яркая кромка (--glass-highlight/--glass-border). */
  --glass-tint: rgba(255, 255, 255, 0.28);
  --glass-sheen-strong: rgba(255, 255, 255, 0.75);
  --glass-sheen-soft: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 16px 44px rgba(60, 40, 110, 0.16);

  --blob-1: #ff9ecf;
  --blob-2: #8f6bff;
  --blob-3: #6be6c9;

  --danger: #e5484d;
}

:root[data-theme="dark"] {
  --text: var(--tg-theme-text-color, #f1eefb);
  --hint: var(--tg-theme-hint-color, #a7a1bd);
  --link: #b3a2ff;
  --button: #8b7bfb;
  --button-text: #ffffff;

  --page-bg-1: #14111e;
  --page-bg-2: #1b1530;

  --glass-tint: rgba(35, 30, 54, 0.42);
  --glass-sheen-strong: rgba(255, 255, 255, 0.16);
  --glass-sheen-soft: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-highlight: rgba(255, 255, 255, 0.22);
  --glass-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);

  --blob-1: #6a2f7a;
  --blob-2: #3d3f9a;
  --blob-3: #1f7a6e;

  --danger: #ff6b6f;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Без этого правила display:flex у .dev-bar и других компонентов ниже
   перебивает нативное поведение атрибута hidden по специфичности CSS —
   элемент с hidden всё равно рисуется. */
[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: linear-gradient(160deg, var(--page-bg-1), var(--page-bg-2));
  position: relative;
  overflow-x: hidden;
}

.bg-blobs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.65;
}

.blob-1 {
  width: 60vw;
  height: 60vw;
  max-width: 340px;
  max-height: 340px;
  background: var(--blob-1);
  top: -16vw;
  left: -16vw;
}

.blob-2 {
  width: 65vw;
  height: 65vw;
  max-width: 380px;
  max-height: 380px;
  background: var(--blob-2);
  top: 22vh;
  right: -22vw;
}

.blob-3 {
  width: 55vw;
  height: 55vw;
  max-width: 320px;
  max-height: 320px;
  background: var(--blob-3);
  bottom: -14vw;
  left: 12vw;
}

/*
  Стекло собрано из четырёх слоёв, которые дают именно "жидкое стекло",
  а не плоскую матовую плашку:
  1) backdrop-filter — блюр + повышенная насыщенность того, что под стеклом;
  2) two-layer background — диагональный блик (ярче сверху-слева,
     темнее к центру, снова чуть светлее у нижнего края) поверх лёгкой
     тонировки почти без цвета;
  3) border — яркая, почти белая кромка, как грань стекла;
  4) inset box-shadow — тонкая световая линия по верхнему краю
     (специфический блик, из-за которого поверхность читается как стекло,
     а не как замутнённое окно) + внешняя тень для ощущения, что панель
     физически приподнята над фоном.
*/
.glass,
.menu-item,
.section-text,
.calendar-wrap,
.slots-wrap,
.booking-card,
.confirmation {
  background:
    linear-gradient(135deg, var(--glass-sheen-strong) 0%, var(--glass-sheen-soft) 45%, var(--glass-sheen-strong) 100%),
    var(--glass-tint);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    var(--glass-shadow);
}

.dev-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: #fff3cd;
  color: #664d03;
  font-size: 13px;
  position: relative;
  z-index: 20;
}

.dev-bar input {
  width: 140px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #e0c265;
}

.dev-bar button {
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 6px;
  border: none;
}

/* Плавающий стеклянный бар, а не плашка встык с краем экрана —
   так выглядит нижняя панель в Telegram после обновления на Liquid Glass. */
.topbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 13px 18px;
  margin: 10px 12px 0;
  position: sticky;
  top: 10px;
  z-index: 10;
  background:
    linear-gradient(135deg, var(--glass-sheen-strong) 0%, var(--glass-sheen-soft) 45%, var(--glass-sheen-strong) 100%),
    var(--glass-tint);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    var(--glass-shadow);
}

.back-btn {
  border: none;
  background: none;
  color: var(--link);
  font-size: 28px;
  line-height: 1;
  padding: 0 6px 0 0;
  cursor: pointer;
  min-width: 32px;
}

#topbar-title {
  font-size: 17px;
  font-weight: 600;
}

#content {
  padding: 16px;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.section-text {
  white-space: pre-wrap;
  line-height: 1.55;
  padding: 18px;
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  min-height: 60px;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.menu-item:active {
  transform: scale(0.97);
}

.menu-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.menu-label {
  flex: 1;
  font-weight: 500;
}

.menu-chevron {
  color: var(--hint);
  font-size: 20px;
}

.calendar-wrap {
  padding: 16px;
}

#book-slots,
#manage-list {
  margin-top: 14px;
}

#manage-list h3 {
  margin: 0 0 10px 4px;
}

.calendar {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
}

.calendar th {
  color: var(--hint);
  font-weight: 400;
  font-size: 13px;
  padding: 4px 0;
}

.calendar td {
  text-align: center;
  padding: 0;
}

.calendar button {
  width: 100%;
  aspect-ratio: 1;
  min-width: 40px;
  min-height: 44px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--glass-sheen-strong) 0%, transparent 60%), rgba(124, 92, 255, 0.14);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  transition: transform 0.1s ease;
}

.calendar button:active:not(:disabled) {
  transform: scale(0.92);
}

.calendar button:disabled {
  background: none;
  border-color: transparent;
  color: var(--hint);
  cursor: default;
  opacity: 0.4;
}

.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.calendar-nav button {
  border: 1px solid var(--glass-border);
  background: linear-gradient(135deg, var(--glass-sheen-strong), var(--glass-sheen-soft));
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  font-size: 16px;
  color: var(--text);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

.slots-wrap {
  margin-top: 14px;
  padding: 16px;
}

.slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.slot-btn {
  padding: 14px 4px;
  min-height: 48px;
  border: 1px solid rgba(124, 92, 255, 0.4);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent 55%), rgba(124, 92, 255, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: transform 0.1s ease;
}

.slot-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.slot-btn:disabled {
  background: rgba(127, 127, 127, 0.08);
  border-color: rgba(127, 127, 127, 0.15);
  box-shadow: none;
  color: var(--hint);
  cursor: default;
}

.booking-card {
  padding: 14px 16px;
  margin-bottom: 10px;
}

.booking-card .meta {
  color: var(--hint);
  font-size: 13px;
  margin-bottom: 10px;
}

.danger-btn {
  padding: 10px 14px;
  min-height: 40px;
  border: 1px solid rgba(229, 72, 77, 0.45);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 60%), rgba(229, 72, 77, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: var(--danger);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}

.confirmation {
  padding: 20px;
}

.confirmation a {
  color: var(--link);
}

.error-banner {
  background: rgba(229, 72, 77, 0.15);
  border: 1px solid rgba(229, 72, 77, 0.4);
  color: var(--danger);
  padding: 10px 14px;
  border-radius: 16px;
  margin-bottom: 12px;
  font-size: 14px;
}