/* UX kit (2026-10-26) — shared by linguaup.uz + multilevelzone.uz. Source: ~/ux_pass/kit */
:root { --tg-safe-top: env(safe-area-inset-top, 0px); }

/* 17 Balanced headlines */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }

/* 16 Tabular numbers — timers, scores, prices, ranks don't jitter */
[class*="timer"], [class*="countdown"], [class*="score"], [class*="price"], [class*="band"],
[class*="rank"], [class*="stat-num"], [class*="balance"], [class*="counter"], [class*="points"],
time, .num, td { font-variant-numeric: tabular-nums; }

/* 9 View transitions between pages */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* 8 Image placeholders while loading */
img.ux-img-loading { background: var(--card-2, #eef1f7); opacity: .001; }
img.ux-img-ready { transition: opacity .3s ease; }

/* 13 Hit slop for small tap targets (added by ux.js on touch devices) */
.ux-hit-rel { position: relative; }
.ux-hit::after { content: ""; position: absolute; inset: var(--ux-hit, -8px); }

/* 1 Skeleton */
.ux-skel {
  display: inline-block; min-width: 4em; min-height: 1em; border-radius: 8px; color: transparent !important;
  background: linear-gradient(90deg, var(--card-2, #eef1f7) 25%, var(--border, #e3e7ef) 37%, var(--card-2, #eef1f7) 63%);
  background-size: 400% 100%; animation: ux-shimmer 1.3s ease infinite; vertical-align: middle;
}
@keyframes ux-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ux-skel { animation: none; } }

/* Submitting state (19 double-submit guard) */
.ux-busy { opacity: .6; pointer-events: none; cursor: progress; }

/* 5 Confirm dialog + toast */
.ux-dlg-back {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(9, 12, 20, .45); opacity: 0; transition: opacity .18s ease;
}
.ux-dlg-back.is-open { opacity: 1; }
.ux-dlg {
  width: 100%; max-width: 380px; background: var(--card, #fff); color: var(--text, #1c2333);
  border-radius: 20px; padding: 22px 20px 16px; box-shadow: 0 24px 60px rgba(9, 12, 20, .28);
  transform: translateY(10px) scale(.97); transition: transform .2s cubic-bezier(.2, .9, .3, 1.2);
  font-family: inherit;
}
.ux-dlg-back.is-open .ux-dlg { transform: none; }
.ux-dlg-msg { margin: 0 0 18px; font-size: 16px; font-weight: 600; line-height: 1.5; white-space: pre-line; text-wrap: pretty; }
.ux-dlg-row { display: flex; gap: 10px; }
.ux-dlg-row button {
  flex: 1; min-height: 46px; border: 0; border-radius: 14px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.ux-dlg-row button:active { transform: scale(.97); }
.ux-dlg-no { background: var(--card-2, #f1f3f8); color: var(--text, #1c2333); }
.ux-dlg-ok { background: var(--primary, #1b56fd); color: #fff; }
.ux-dlg-ok.is-danger { background: #e5484d; }
.ux-dlg-ok:focus-visible, .ux-dlg-no:focus-visible { outline: 3px solid var(--primary-wash, #cfe0ff); outline-offset: 2px; }
@media (max-width: 520px) {
  .ux-dlg-back { align-items: flex-end; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
}
.ux-toast {
  position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); z-index: 10001;
  transform: translate(-50%, 20px); opacity: 0; transition: opacity .2s ease, transform .2s ease;
  background: #1c2333; color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25); width: max-content; max-width: calc(100vw - 32px); display: flex; gap: 14px; align-items: center;
}
.ux-toast.is-open { opacity: 1; transform: translate(-50%, 0); }
.ux-toast button { background: none; border: 0; color: #7fb0ff; font: inherit; font-weight: 800; cursor: pointer; padding: 6px 4px; }