/* Telegram mavzu ranglari: yorug' va qorong'i rejim avtomatik (TZ 7.4) */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg2: var(--tg-theme-secondary-bg-color, #f2f3f5);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #7d7f85);
  --accent: var(--tg-theme-button-color, #2481cc);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --warn-bg: rgba(255, 170, 0, 0.12);
  --danger: var(--tg-theme-destructive-text-color, #e53935);
  --radius: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 520px; margin: 0 auto; }

.screen {
  min-height: 100vh;
  min-height: var(--tg-viewport-stable-height, 100vh);
  padding: 16px 16px 112px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hidden { display: none !important; }

.photo-wrap { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg2); }
.photo-wrap img { display: block; width: 100%; max-height: 52vh; object-fit: cover; }

.card { padding: 2px 2px 0; }
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg2);
  color: var(--hint);
  font-size: 14px;
  font-weight: 600;
}
h1 { margin: 8px 0 6px; font-size: 24px; line-height: 1.25; }
.caption { color: var(--text); white-space: pre-line; word-wrap: break-word; }
.caption a { color: var(--accent); }

.warn {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--warn-bg);
  font-size: 15px;
}
.warn p { margin: 0; }
.warn-icon { font-size: 20px; line-height: 1.2; }

.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 8px; }
.big-icon { font-size: 64px; line-height: 1; margin-bottom: 8px; }
.muted { color: var(--hint); margin: 4px 0 0; white-space: pre-line; }
.error { color: var(--danger); margin-top: 12px; }

.bottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
}

button { font: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.primary, .secondary {
  width: 100%;
  min-height: 56px;
  border-radius: 14px;
  font-size: 19px;
  font-weight: 600;
  transition: transform 0.08s ease, opacity 0.2s ease;
}
.primary { background: var(--accent); color: var(--accent-text); }
.secondary { background: var(--bg2); color: var(--accent); }
.primary:active, .secondary:active { transform: scale(0.98); }
.primary:disabled { opacity: 0.6; }

/* Yashirin tuzoq: ekranda yo'q, lekin DOM'da bor */
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.skeleton { background: var(--bg2); border-radius: var(--radius); animation: pulse 1.2s ease-in-out infinite; }
.skeleton.photo { height: 42vh; }
.skeleton.line { height: 22px; width: 70%; }
.skeleton.line.short { width: 45%; }
@keyframes pulse { 50% { opacity: 0.55; } }