/* Canvora admin — Telegram Mini App.
   Ranglar Telegram tema o'zgaruvchilaridan olinadi; Telegram tashqarisida
   zaxira qiymatlar ishlaydi. Uch holat qo'llab-quvvatlanadi:
   :root (yorug'), prefers-color-scheme (tizim), [data-theme] (aniq tanlov). */

/* ============================================================ 1. TOKENLAR */

:root {
	color-scheme: light dark;

	/* --- yuzalar va siyoh: Telegram temasidan --- */
	--bg:        var(--tg-theme-bg-color, #ffffff);
	--app-bg:    var(--tg-theme-secondary-bg-color, #f1f2f6);
	--surface:   var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #ffffff));
	--header-bg: var(--tg-theme-header-bg-color, var(--app-bg));

	--text:   var(--tg-theme-text-color, #0d0f14);
	--muted:  var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, #5c6270));
	--faint:  var(--tg-theme-hint-color, #6e737f);
	--sec-header: var(--tg-theme-section-header-text-color, var(--tg-theme-hint-color, #5c6270));

	--link:        var(--tg-theme-link-color, #1c64c4);
	--accent:      var(--tg-theme-accent-text-color, var(--tg-theme-link-color, #1c64c4));
	--button:      var(--tg-theme-button-color, var(--accent));
	--button-text: var(--tg-theme-button-text-color, #ffffff);

	/* --- semantik holat ranglari (aksentdan alohida) --- */
	--good: #17703d;
	--warn: #8a5709;
	--crit: var(--tg-theme-destructive-text-color, #c42a1f);

	/* --- navigatsiya belgilari uchun tanlangan ohanglar --- */
	--t-teal:   #0e807b;
	--t-blue:   #2f74d8;
	--t-indigo: #5257cc;
	--t-violet: #7b4fc4;
	--t-green:  #1f8f57;
	--t-amber:  #a0670c;
	--t-rose:   #c9425c;
	--t-slate:  #5f6b80;

	/* --- hosila --- */
	--hairline: color-mix(in srgb, var(--faint) 30%, transparent);
	--press:    color-mix(in srgb, var(--faint) 15%, transparent);
	--sunken:   color-mix(in srgb, var(--faint) 10%, transparent);
	--shadow:   0 1px 2px color-mix(in srgb, #000 6%, transparent);

	/* --- o'lchov ritmi (4px) --- */
	--s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
	--s5: 20px; --s6: 24px; --s7: 32px; --s8: 44px;

	/* --- radius --- */
	--r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

	/* --- shrift o'lchamlari --- */
	--fs-micro: 11px;
	--fs-foot:  13px;
	--fs-sub:   15px;
	--fs-body:  17px;
	--fs-t3:    20px;
	--fs-t1:    26px;
	--fs-hero:  clamp(34px, 10.5vw, 44px);

	/* --- shrift oilalari --- */
	--sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	/* --- harakat --- */
	--dur: 160ms;
	--ease: cubic-bezier(.2, .7, .3, 1);

	/* --- tartib --- */
	--gutter: 16px;
	--maxw: 640px;
	--icon: 29px;
	--row-lead: calc(var(--gutter) + var(--icon) + var(--s3)); /* ajratgich chekinishi */
}

/* Qorong'i tema — tizim sozlamasi bo'yicha (aniq "light" tanlovi ustun turadi) */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg:      var(--tg-theme-bg-color, #17191c);
		--app-bg:  var(--tg-theme-secondary-bg-color, #0e1013);
		--surface: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #1c1f23));
		--text:    var(--tg-theme-text-color, #f2f3f5);
		--muted:   var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, #9aa1ad));
		--faint:   var(--tg-theme-hint-color, #838b98);
		--link:    var(--tg-theme-link-color, #6ab3f3);
		--accent:  var(--tg-theme-accent-text-color, var(--tg-theme-link-color, #6ab3f3));
		--crit:    var(--tg-theme-destructive-text-color, #ff6f61);

		--good: #46c980;
		--warn: #e0a53c;

		--t-teal:   #2ec4b6;
		--t-blue:   #5c9df5;
		--t-indigo: #7b81ee;
		--t-violet: #a97ce6;
		--t-green:  #43c07d;
		--t-amber:  #e0a53c;
		--t-rose:   #ef7189;
		--t-slate:  #8d99ad;

		--hairline: color-mix(in srgb, var(--faint) 34%, transparent);
		--press:    color-mix(in srgb, var(--faint) 20%, transparent);
		--sunken:   color-mix(in srgb, var(--faint) 14%, transparent);
		--shadow:   none;
	}
}

/* Qorong'i tema — aniq tanlov (Telegram colorScheme = dark) */
:root[data-theme="dark"] {
	--bg:      var(--tg-theme-bg-color, #17191c);
	--app-bg:  var(--tg-theme-secondary-bg-color, #0e1013);
	--surface: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #1c1f23));
	--text:    var(--tg-theme-text-color, #f2f3f5);
	--muted:   var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, #9aa1ad));
	--faint:   var(--tg-theme-hint-color, #838b98);
	--link:    var(--tg-theme-link-color, #6ab3f3);
	--accent:  var(--tg-theme-accent-text-color, var(--tg-theme-link-color, #6ab3f3));
	--crit:    var(--tg-theme-destructive-text-color, #ff6f61);

	--good: #46c980;
	--warn: #e0a53c;

	--t-teal:   #2ec4b6;
	--t-blue:   #5c9df5;
	--t-indigo: #7b81ee;
	--t-violet: #a97ce6;
	--t-green:  #43c07d;
	--t-amber:  #e0a53c;
	--t-rose:   #ef7189;
	--t-slate:  #8d99ad;

	--hairline: color-mix(in srgb, var(--faint) 34%, transparent);
	--press:    color-mix(in srgb, var(--faint) 20%, transparent);
	--sunken:   color-mix(in srgb, var(--faint) 14%, transparent);
	--shadow:   none;
}

/* ============================================================ 2. ASOS */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	padding-bottom: calc(var(--s7) + env(safe-area-inset-bottom));
	background: var(--app-bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: var(--fs-body);
	line-height: 1.32;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overscroll-behavior-y: none;
}

#app {
	max-width: var(--maxw);
	margin: 0 auto;
	padding-left: max(0px, env(safe-area-inset-left));
	padding-right: max(0px, env(safe-area-inset-right));
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
	border-radius: var(--r-sm);
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.mono {
	font-family: var(--mono);
	font-size: var(--fs-foot);
	letter-spacing: -0.01em;
	word-break: break-all;
}

.vh {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================ 3. SARLAVHA */

.page {
	padding: var(--s5) var(--gutter) var(--s2);
	display: flex;
	flex-direction: column;
	gap: var(--s1);
}
.page-eyebrow {
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--faint);
}
.page-title {
	font-size: var(--fs-t1);
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.15;
	text-wrap: balance;
	margin: 0;
}
.page-sub {
	font-size: var(--fs-sub);
	color: var(--muted);
	line-height: 1.35;
}

.page-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	padding: var(--s1) var(--gutter) 0;
}

/* ============================================================ 4. BO'LIMLAR */

.group { margin-top: var(--s5); }
.group:first-child { margin-top: var(--s3); }

.group-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s3);
	padding: 0 var(--gutter) var(--s2);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sec-header);
}
.group-count {
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--faint);
	font-variant-numeric: tabular-nums;
}
.group-footer {
	padding: var(--s2) var(--gutter) 0;
	font-size: var(--fs-foot);
	line-height: 1.42;
	color: var(--muted);
}
.group-footer b { color: var(--text); font-weight: 600; }

.section {
	background: var(--surface);
	border-radius: var(--r-lg);
	margin: 0 var(--gutter);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.section > ul { list-style: none; margin: 0; padding: 0; }

/* ============================================================ 5. QATORLAR */

.row {
	display: flex;
	align-items: center;
	gap: var(--s3);
	width: 100%;
	min-height: var(--s8);
	padding: 10px var(--gutter);
	position: relative;
	background: transparent;
	border: 0;
	margin: 0;
	text-align: left;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease);
}
.row::after {
	content: "";
	position: absolute;
	left: var(--gutter);
	right: 0;
	bottom: 0;
	height: 1px;
	transform: scaleY(.5);
	transform-origin: bottom;
	background: var(--hairline);
}
.row.has-icon::after { left: var(--row-lead); }
li:last-child > .row::after,
.row:last-child::after { display: none; }

.row:active { background: var(--press); }
.row.static { cursor: default; }
.row.static:active { background: transparent; }

/* Belgi chipi: ohangning yupqa yuvindisi + o'sha ohangdagi chiziq.
   To'ldirilgan kvadrat + oq belgi qorong'i temada kontrastdan o'tmaydi,
   yuvindi esa ikkala temada ham ishonchli. */
.row-icon {
	flex: 0 0 var(--icon);
	width: var(--icon);
	height: var(--icon);
	border-radius: var(--r-sm);
	display: grid;
	place-items: center;
	--tone: var(--t-slate);
	background: color-mix(in srgb, var(--tone) 15%, transparent);
	color: var(--tone);
}
.row-icon svg { width: 18px; height: 18px; display: block; }

.t-teal   { --tone: var(--t-teal); }
.t-blue   { --tone: var(--t-blue); }
.t-indigo { --tone: var(--t-indigo); }
.t-violet { --tone: var(--t-violet); }
.t-green  { --tone: var(--t-green); }
.t-amber  { --tone: var(--t-amber); }
.t-rose   { --tone: var(--t-rose); }
.t-slate  { --tone: var(--t-slate); }
.t-good   { --tone: var(--good); }
.t-warn   { --tone: var(--warn); }
.t-crit   { --tone: var(--crit); }
.t-muted  { --tone: var(--faint); }

.row-body { flex: 1 1 auto; min-width: 0; }
.row-title {
	display: block;
	font-size: var(--fs-body);
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.row-desc {
	display: block;
	font-size: var(--fs-foot);
	line-height: 1.3;
	color: var(--muted);
	margin-top: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.row-desc .mono { font-size: 12px; color: var(--faint); }

.row-value {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	max-width: 52%;
	font-size: var(--fs-sub);
	color: var(--muted);
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.row-value > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-amount { font-size: var(--fs-body); font-weight: 600; color: var(--text); }

.row-chevron {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	color: var(--faint);
	opacity: .55;
	margin-right: -2px;
}
.row-chevron svg { width: 16px; height: 16px; display: block; }

/* Ohangni matn rangi tomon biroz aralashtiramiz: temaga qarshi bormaydi,
   lekin och aksentlarda ham o'qilishi yetarli bo'ladi. */
.row.accent .row-title { color: color-mix(in srgb, var(--accent) 78%, var(--text)); font-weight: 500; }
.row.danger .row-title { color: color-mix(in srgb, var(--crit) 78%, var(--text)); }
.row.accent .row-icon,
.row.danger .row-icon { background: transparent; }
.row.accent .row-icon { color: color-mix(in srgb, var(--accent) 78%, var(--text)); }
.row.danger .row-icon { color: color-mix(in srgb, var(--crit) 78%, var(--text)); }
.row.accent .row-icon svg,
.row.danger .row-icon svg { width: 20px; height: 20px; }

/* tanlov qatori (radio) */
.row-check {
	flex: 0 0 22px;
	width: 22px; height: 22px;
	display: grid;
	place-items: center;
	color: var(--accent);
}
.row-check svg { width: 20px; height: 20px; display: block; opacity: 0; transition: opacity var(--dur) var(--ease); }
.row[aria-checked="true"] .row-check svg { opacity: 1; }
.row[aria-checked="true"] .row-title { font-weight: 600; }

/* ============================================================ 6. HERO / PLITKALAR */

.hero {
	margin: var(--s3) var(--gutter) 0;
	padding: var(--s5) var(--s5) var(--s4);
	border-radius: var(--r-lg);
	background: color-mix(in srgb, var(--accent) 9%, var(--surface));
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	gap: var(--s2);
}
.hero-label {
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--accent) 72%, var(--text));
}
.hero-value {
	font-size: var(--fs-hero);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.02;
	color: var(--text);
}
.hero-value .unit {
	font-size: 0.42em;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--muted);
	margin-left: 0.28em;
}
.hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s1);
}

.tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s2);
	margin: var(--s2) var(--gutter) 0;
}
.tile {
	background: var(--surface);
	border-radius: var(--r-md);
	padding: var(--s3) var(--s4) var(--s4);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.tile-label {
	font-size: var(--fs-foot);
	color: var(--muted);
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tile-value {
	font-size: var(--fs-t3);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	margin-top: var(--s1);
}
.tile-delta {
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.tile-delta.up { color: var(--good); }
.tile.wide { grid-column: 1 / -1; }
.tile.flag-warn .tile-value { color: var(--warn); }
.tile.flag-crit .tile-value { color: var(--crit); }

/* ============================================================ 7. ROZETKALAR */

.pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: var(--r-pill);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.005em;
	white-space: nowrap;
	/* Fon — ohangning yuvindisi, matn esa ohang + matn rangi aralashmasi:
	   shu tufayli ikkala temada ham AA kontrast saqlanadi. */
	--tone: var(--faint);
	background: color-mix(in srgb, var(--tone) 15%, transparent);
	color: color-mix(in srgb, var(--tone) 68%, var(--text));
}
.pill::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 6px;
}
.pill.plain::before { display: none; }
.pill.ok   { --tone: var(--good); }
.pill.warn { --tone: var(--warn); }
.pill.err  { --tone: var(--crit); }
.pill.info { --tone: var(--accent); }

.tag {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: var(--r-sm);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	vertical-align: 1px;
	background: color-mix(in srgb, var(--faint) 16%, transparent);
	color: var(--faint);
}

/* ============================================================ 8. REYTING */

.rank { display: flex; flex-direction: column; gap: 5px; padding: var(--s3) var(--gutter); position: relative; }
.rank::after {
	content: "";
	position: absolute; left: var(--gutter); right: 0; bottom: 0;
	height: 1px; transform: scaleY(.5); transform-origin: bottom;
	background: var(--hairline);
}
li:last-child > .rank::after { display: none; }
.rank-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s3);
}
.rank-name {
	font-size: var(--fs-sub);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rank-sum {
	flex: 0 0 auto;
	font-size: var(--fs-sub);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.rank-meta { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.meter {
	height: 6px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	overflow: hidden;
	margin-top: 2px;
}
.meter-fill {
	height: 100%;
	min-width: 3px;
	border-radius: 1px 3px 3px 1px;
	background: var(--accent);
}

/* ============================================================ 9. FORMA */

.field {
	display: block;
	padding: 10px var(--gutter) 12px;
	position: relative;
}
.field::after {
	content: "";
	position: absolute; left: var(--gutter); right: 0; bottom: 0;
	height: 1px; transform: scaleY(.5); transform-origin: bottom;
	background: var(--hairline);
}
.field:last-child::after { display: none; }
.field-label {
	display: block;
	font-size: var(--fs-foot);
	font-weight: 500;
	color: var(--muted);
	margin-bottom: 4px;
}
.field input,
.field textarea {
	display: block;
	width: 100%;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--text);
	font-family: inherit;
	font-size: var(--fs-body);
	line-height: 1.35;
	padding: 0;
	resize: vertical;
	border-radius: 2px;
}
.field textarea { min-height: 96px; }
.field textarea.mono { font-family: var(--mono); font-size: var(--fs-sub); }
.field input::placeholder,
.field textarea::placeholder { color: var(--faint); opacity: .75; }
.field input:focus-visible,
.field textarea:focus-visible { outline: none; }
.field:focus-within .field-label { color: var(--accent); }

/* ============================================================ 9b. ESLATMA */

.notice {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: var(--s3) var(--gutter) 0;
	padding: 11px var(--s4) 12px;
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--faint) 12%, transparent);
	font-size: var(--fs-foot);
	line-height: 1.45;
	color: var(--muted);
}
.notice-ico { flex: 0 0 18px; margin-top: 1px; color: var(--faint); }
.notice-ico svg { width: 18px; height: 18px; display: block; }
.notice b { color: var(--text); font-weight: 600; }
.notice code {
	font-family: var(--mono);
	font-size: 12px;
	padding: 1px 4px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--faint) 16%, transparent);
}
.notice.warn {
	background: color-mix(in srgb, var(--warn) 13%, transparent);
	color: color-mix(in srgb, var(--warn) 50%, var(--text));
}
.notice.warn .notice-ico { color: var(--warn); }
.notice.warn b { color: var(--warn); }
.notice.info {
	background: color-mix(in srgb, var(--accent) 11%, transparent);
	color: color-mix(in srgb, var(--accent) 45%, var(--text));
}
.notice.info .notice-ico { color: var(--accent); }

/* ============================================================ 10. HOLATLAR */

.state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--s3);
	padding: var(--s7) var(--s6) calc(var(--s7) + var(--s2));
	color: var(--muted);
}
.state-icon {
	width: 52px; height: 52px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--faint) 14%, transparent);
	color: var(--faint);
}
.state-icon svg { width: 26px; height: 26px; display: block; }
.state.is-error .state-icon {
	background: color-mix(in srgb, var(--crit) 14%, transparent);
	color: var(--crit);
}
.state-title { font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.state-text { font-size: var(--fs-sub); line-height: 1.4; max-width: 34ch; }
.state-action {
	margin-top: var(--s1);
	padding: 10px var(--s5);
	min-height: var(--s8);
	border: 0;
	border-radius: var(--r-pill);
	background: var(--button);
	color: var(--button-text);
	font-family: inherit;
	font-size: var(--fs-sub);
	font-weight: 600;
	cursor: pointer;
	transition: opacity var(--dur) var(--ease);
}
.state-action:active { opacity: .75; }

.state.inline { padding: var(--s6) var(--s5); }

/* skelet */
.sk-page { padding-top: var(--s3); }
.sk {
	background: var(--sunken);
	border-radius: var(--r-sm);
	position: relative;
	overflow: hidden;
}
.sk::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg,
		transparent,
		color-mix(in srgb, var(--faint) 12%, transparent),
		transparent);
	animation: shimmer 1.25s var(--ease) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

.sk-title { height: 28px; width: 58%; margin: var(--s5) var(--gutter) var(--s4); border-radius: var(--r-sm); }
.sk-card { height: 118px; margin: 0 var(--gutter) var(--s2); border-radius: var(--r-lg); }
.sk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin: 0 var(--gutter) var(--s5); }
.sk-tile { height: 78px; border-radius: var(--r-md); }
.sk-section { margin: 0 var(--gutter) var(--s5); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.sk-row { display: flex; align-items: center; gap: var(--s3); padding: 13px var(--gutter); }
.sk-dot { width: var(--icon); height: var(--icon); border-radius: var(--r-sm); flex: 0 0 var(--icon); }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.sk-line { height: 11px; border-radius: 4px; }
.sk-line.short { width: 42%; }

/* ============================================================ 11. TOAST */

.toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--s6) + env(safe-area-inset-bottom));
	transform: translate(-50%, 90px);
	max-width: min(86vw, 420px);
	padding: 11px var(--s5);
	border-radius: var(--r-pill);
	background: var(--text);
	color: var(--bg);
	font-size: var(--fs-sub);
	font-weight: 500;
	text-align: center;
	opacity: 0;
	z-index: 99;
	pointer-events: none;
	box-shadow: 0 6px 20px color-mix(in srgb, #000 22%, transparent);
	transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ============================================================ 12. HARAKAT */

.screen { animation: enter var(--dur) var(--ease) both; }
@keyframes enter {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
	.sk::after { display: none; }
}

/* ============================================ 13. TO'LOV YUBORISH EKRANI */

/* Zaxirasi tugagan mahsulot — ko'rinadi, lekin tanlab bo'lmasligi bilinib tursin */
.row.is-dim .row-title,
.row.is-dim .row-desc { opacity: .55; }

.c-crit { color: var(--crit); }

/* To'lovlar ekranidagi filtr tugmalari (segmented control) */
.seg { display: flex; gap: var(--s1); padding: var(--s1);
  margin: var(--s5) var(--gutter) 0;
  background: var(--bg); border-radius: 12px; }
/* Filtrdan keyingi ro'yxat o'ziga qo'shimcha tepa bo'shliq olmasin */
.seg + .group { margin-top: var(--s3); }
.seg-i { flex: 1; border: 0; background: none; color: var(--muted);
  font: 600 13.5px/1 inherit; font-family: inherit; padding: 9px 4px;
  border-radius: 9px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease; }
.seg-i.on { background: var(--surface); color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.08); }