:root {
  color-scheme: light dark;
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg-2: var(--tg-theme-secondary-bg-color, #f5f5f5);
  --fg: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #999999);
  --link: var(--tg-theme-link-color, #2481cc);
  --btn: var(--tg-theme-button-color, #2481cc);
  --btn-fg: var(--tg-theme-button-text-color, #ffffff);
}

/* Telegram Desktop sometimes omits text-color in dark themes or sets it equal
   to the background. Force sensible defaults so content stays readable. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--tg-theme-bg-color, #17212b);
    --bg-2: var(--tg-theme-secondary-bg-color, #232e3c);
    --fg: var(--tg-theme-text-color, #f5f5f5);
    --hint: var(--tg-theme-hint-color, #708499);
  }
}

* { box-sizing: border-box; }

/* A class rule with `display: flex` (e.g. `.sheet`, `.tabs`) overrides the
   UA `[hidden] { display: none }` because both have the same specificity and
   ours is declared later. Force the hidden attribute to win everywhere. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

#root { min-height: 100vh; padding-bottom: 24px; }

.tabs {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: 8px; padding: 8px 12px;
  background: var(--bg); border-bottom: 1px solid var(--bg-2);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 16px;
  background: var(--bg-2); color: var(--fg);
  font-size: 14px; border: 0; cursor: pointer;
  min-height: 36px;
}
.tab.active { background: var(--btn); color: var(--btn-fg); }

.content { padding: 12px; }

.category {
  margin-top: 8px;
}
.category-header {
  position: sticky; top: 52px; z-index: 5;
  background: var(--bg);
  padding: 8px 0 4px;
  font-size: 14px; font-weight: 600; color: var(--hint);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.item {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bg-2);
  min-height: 48px;
}
.item-name { font-weight: 500; }
.item-price { font-weight: 500; white-space: nowrap; }
.item-ingredients {
  grid-column: 1 / 3;
  margin-top: 4px; font-size: 14px; color: var(--hint);
}
.item.unavailable .item-name { text-decoration: line-through; color: var(--hint); }
.item.unavailable .item-price { color: var(--hint); font-weight: 400; }

.footer {
  padding: 24px 12px 12px;
  font-size: 13px; color: var(--hint);
  text-align: center;
}

.admin-enter {
  position: fixed; top: 8px; right: 8px; z-index: 20;
  width: 44px; height: 44px; border-radius: 22px;
  background: var(--bg-2); border: 0; font-size: 20px;
  cursor: pointer;
}

.skeleton-list { padding: 12px 0; }
.skeleton-row {
  height: 48px; margin: 8px 0; border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  background: var(--fg); color: var(--bg);
  padding: 10px 16px; border-radius: 18px; z-index: 30;
  max-width: 80vw; text-align: center; font-size: 14px;
}

.sheet {
  position: fixed; inset: 0; background: var(--bg); z-index: 40;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.sheet-header {
  position: sticky; top: 0;
  padding: 12px 16px; background: var(--bg);
  border-bottom: 1px solid var(--bg-2);
  font-weight: 600;
}
.sheet-body { padding: 16px; flex: 1; }
.field { display: block; margin-bottom: 14px; }
.field-label { display: block; font-size: 13px; color: var(--hint); margin-bottom: 4px; }
.field-input, .field-textarea, .field-select {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid transparent; border-radius: 8px;
  font-size: 16px; font-family: inherit;
}
.field-textarea { min-height: 72px; resize: vertical; }
.toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; cursor: pointer;
}
.toggle input { width: 44px; height: 26px; }

.admin-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; }
.admin-row .item-ingredients { grid-column: 1 / -1; }
.btn-danger { background: #d9534f; color: white; border: 0; padding: 12px; border-radius: 8px; width: 100%; font-size: 15px; cursor: pointer; }
.btn-add  { background: var(--bg-2); border: 0; padding: 12px; border-radius: 8px; width: 100%; font-size: 14px; color: var(--link); cursor: pointer; margin: 8px 0; }

.badge-oos {
  color: var(--hint); font-size: 13px; white-space: nowrap;
}