/* ===========================================================================
   Tezyoz — o‘ziga xos ko‘rinish: chuqur qora-ko‘k fon, elektr-ko‘k → binafsha
   gradient, shisha kartochkalar. Qorong‘i mavzu asosiy, yorug‘ — ixtiyoriy.
   Hamma o‘lcham `.tz` ichida: sayt uslublariga aralashmaydi.
   =========================================================================== */
.tz {
  --tz-bg: #07080d;
  --tz-bg-2: #0d1019;
  --tz-glass: rgba(22, 26, 40, .62);
  --tz-glass-2: rgba(32, 38, 58, .55);
  --tz-line: rgba(140, 160, 255, .12);
  --tz-line-2: rgba(140, 160, 255, .22);
  --tz-text: #e9ecf8;
  --tz-muted: #8b93b0;
  --tz-faint: #4b5271;
  --tz-a: #4f8cff;          /* elektr-ko‘k */
  --tz-b: #9b6bff;          /* binafsha */
  --tz-c: #22d3ee;          /* moviy */
  --tz-ok: #c9ff5c;         /* laym — to‘g‘ri */
  --tz-bad: #ff5c8a;        /* xato */
  --tz-grad: linear-gradient(135deg, var(--tz-a), var(--tz-b));
  --tz-radius: 18px;
  --tz-size: 26px;
  --tz-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --tz-sans: "Space Grotesk", "Montserrat", system-ui, sans-serif;
  --tz-serif: Georgia, "Times New Roman", serif;
  --tz-type-font: var(--tz-mono);

  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - 120px);
  padding: 20px clamp(12px, 3vw, 32px) 48px;
  background: var(--tz-bg); color: var(--tz-text); font-family: var(--tz-sans);
}
.tz[data-theme="light"] {
  --tz-bg: #f4f6fc; --tz-bg-2: #ffffff;
  --tz-glass: rgba(255, 255, 255, .78); --tz-glass-2: rgba(236, 240, 252, .9);
  --tz-line: rgba(60, 80, 160, .12); --tz-line-2: rgba(60, 80, 160, .22);
  --tz-text: #141a33; --tz-muted: #5b6488; --tz-faint: #a4abc6;
  --tz-ok: #3f7d00; --tz-bad: #e0245e; --tz-c: #0891b2;
}
.tz[data-font="sans"] { --tz-type-font: var(--tz-sans); }
.tz[data-font="serif"] { --tz-type-font: var(--tz-serif); }
.tz *, .tz *::before, .tz *::after { box-sizing: border-box; }
/* Body’ga ko‘chirilgan oyna va xabarnomalar uchun: faqat o‘zgaruvchilar, o‘z maydoni yo‘q */
.tz.tz-portal { position: static; min-height: 0; padding: 0; overflow: visible; background: none; isolation: auto; }
.tz a { color: inherit; }
.tz [hidden] { display: none !important; }

.tz-glow {
  position: absolute; inset: -20% -10% auto; height: 620px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 18% 30%, rgba(79, 140, 255, .22), transparent 70%),
    radial-gradient(35% 45% at 82% 18%, rgba(155, 107, 255, .2), transparent 70%),
    radial-gradient(30% 40% at 60% 75%, rgba(34, 211, 238, .08), transparent 70%);
  filter: blur(10px);
}
.tz[data-theme="light"] .tz-glow { opacity: .55; }

/* ---------------------------------------------------------------- panel */
.tz-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto 28px; padding: 10px 12px 10px 16px;
  border: 1px solid var(--tz-line); border-radius: 999px;
  background: var(--tz-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.tz-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.tz-logo__mark {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: var(--tz-grad); color: #fff; box-shadow: 0 6px 20px -6px rgba(79, 140, 255, .8);
}
.tz-logo__name b { background: var(--tz-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tz-tabs { display: flex; gap: 4px; margin-right: auto; }
.tz-tabs button, .tz-seg button {
  border: 0; background: transparent; color: var(--tz-muted); font: inherit; font-weight: 600; font-size: .9rem;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: color .15s, background .15s;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.tz-tabs button:hover, .tz-seg button:hover { color: var(--tz-text); background: var(--tz-glass-2); }
.tz-tabs button.is-active { color: var(--tz-text); background: var(--tz-glass-2); box-shadow: inset 0 0 0 1px var(--tz-line-2); }
/* Boshqa sahifaga havola (Poyga) — tab tugmasi ko'rinishida */
.tz-tabs a {
  color: var(--tz-muted); font-weight: 600; font-size: .9rem; text-decoration: none;
  padding: 8px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: color .15s, background .15s;
}
.tz-tabs a:hover { color: var(--tz-text); background: var(--tz-glass-2); }
.tz-tabs a.is-active { color: var(--tz-text); background: var(--tz-glass-2); box-shadow: inset 0 0 0 1px var(--tz-line-2); }

.tz-bar__right { display: flex; align-items: center; gap: 8px; }
.tz-icon {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--tz-line); background: transparent;
  color: var(--tz-muted); display: inline-grid; place-items: center; cursor: pointer; transition: all .15s;
}
.tz-icon:hover { color: var(--tz-text); border-color: var(--tz-line-2); background: var(--tz-glass-2); }
.tz-user { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--tz-line); font-weight: 600; font-size: .88rem; }
.tz-user:hover { border-color: var(--tz-line-2); }
.tz-user__ava { width: 30px; height: 30px; border-radius: 50%; background: var(--tz-grad); color: #fff; display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.tz-user__name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- tugmalar */
.tz-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--tz-glass-2); border: 1px solid var(--tz-line); flex-wrap: wrap; }
.tz-seg--sm button { padding: 5px 10px; font-size: .8rem; }
.tz-seg button.is-active { color: #fff; background: var(--tz-grad); box-shadow: 0 6px 18px -8px rgba(79, 140, 255, .9); }
.tz-btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  padding: 11px 20px; border-radius: 14px; font: inherit; font-weight: 700; color: #fff;
  background: var(--tz-grad); box-shadow: 0 10px 28px -12px rgba(79, 140, 255, .9);
  transition: transform .12s ease, filter .15s;
}
.tz-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.tz-btn:active { transform: translateY(0); }
.tz-btn--ghost { background: var(--tz-glass-2); color: var(--tz-text); box-shadow: inset 0 0 0 1px var(--tz-line-2); }
.tz :focus-visible { outline: 2px solid var(--tz-c); outline-offset: 2px; }

/* ---------------------------------------------------------------- test */
.tz-view { max-width: 1180px; margin: 0 auto; }
.tz-hero { text-align: center; margin: 8px auto 22px; max-width: 720px; transition: opacity .3s, visibility .3s; }
.tz-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px;
  background: linear-gradient(120deg, var(--tz-text) 30%, var(--tz-a) 70%, var(--tz-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tz-hero p { color: var(--tz-muted); margin: 0; font-size: 1.02rem; }
/* Yozish paytida faqat ko'rinmas bo'ladi, joyi qoladi: yig'ilsa matn yuqoriga sakrardi */
.tz-hero.is-hidden { opacity: 0; visibility: hidden; }

.tz-config { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.tz-config__sep { width: 1px; height: 26px; background: var(--tz-line-2); }
.tz-extra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; margin: 0 auto 18px; max-width: 900px; }
.tz-label { color: var(--tz-muted); font-size: .88rem; font-weight: 600; width: 100%; text-align: center; }
.tz-input {
  flex: 1 1 360px; border-radius: 14px; border: 1px solid var(--tz-line-2); background: var(--tz-glass);
  color: var(--tz-text); padding: 10px 14px; font: inherit; resize: vertical;
}

.tz-card {
  position: relative; border-radius: var(--tz-radius); padding: 22px clamp(16px, 3vw, 34px);
  background: var(--tz-glass); border: 1px solid var(--tz-line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .7);
}
.tz-card::before {   /* nozik gradient chegara */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(79, 140, 255, .45), transparent 35%, transparent 65%, rgba(155, 107, 255, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.tz-card h2 { font-size: 1rem; font-weight: 700; margin: 0 0 14px; color: var(--tz-muted); letter-spacing: .01em; }

.tz-live { display: flex; align-items: center; gap: 26px; margin-bottom: 14px; }
.tz-live__timer {
  font-size: 2.4rem; font-weight: 700; line-height: 1; min-width: 70px; font-variant-numeric: tabular-nums;
  background: var(--tz-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tz-live__stat { display: flex; flex-direction: column; line-height: 1.1; }
.tz-live__stat b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.tz-live__stat span { font-size: .72rem; color: var(--tz-muted); text-transform: uppercase; letter-spacing: .08em; }
.tz-live__restart { margin-left: 6px; }
.tz-zoom { margin-left: auto; display: inline-flex; gap: 4px; }
.tz-zoom .tz-icon { width: auto; min-width: 38px; padding: 0 10px; border-radius: 12px; font-weight: 700; font-family: var(--tz-sans); }
.tz-zoom__value { align-self: center; min-width: 44px; text-align: center; color: var(--tz-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.tz-progress { height: 3px; border-radius: 3px; background: var(--tz-line); overflow: hidden; margin-bottom: 18px; }
.tz-progress span { display: block; height: 100%; width: 0; background: var(--tz-grad); transition: width .12s linear; }

.tz-words-wrap {
  position: relative; height: calc(var(--tz-size) * 1.7 * 3); overflow: hidden; cursor: text;
  font-family: var(--tz-type-font); font-size: var(--tz-size); line-height: 1.7;
  user-select: none; -webkit-user-select: none;
}
.tz-words { position: relative; display: flex; flex-wrap: wrap; column-gap: .6em; transition: transform .22s ease-out; will-change: transform; }
.tz-word { position: relative; display: inline-flex; white-space: pre; }
.tz-l { color: var(--tz-t-todo, var(--tz-faint)); transition: color .08s; }
.tz-l.is-ok { color: var(--tz-t-ok, var(--tz-text)); }
.tz-l.is-bad { color: var(--tz-t-bad, var(--tz-bad)); }
.tz-l--extra { color: var(--tz-t-bad, var(--tz-bad)); opacity: .65; }
.tz-l.is-missed { color: var(--tz-t-todo, var(--tz-faint)); text-decoration: underline wavy rgba(255, 92, 138, .55); text-underline-offset: 6px; text-decoration-thickness: 1px; }
.tz-word.is-wrong { box-shadow: inset 0 -2px 0 rgba(255, 92, 138, .6); }
.tz-word.is-done:not(.is-wrong) .tz-l.is-ok { color: var(--tz-t-ok, color-mix(in srgb, var(--tz-text) 80%, var(--tz-ok))); }
.tz-words-wrap.is-blurred .tz-words { filter: blur(5px); opacity: .5; }

.tz-caret {
  position: absolute; left: 0; top: 0; width: 2.5px; border-radius: 2px; pointer-events: none;
  background: var(--tz-t-caret, linear-gradient(var(--tz-a), var(--tz-b)));
  box-shadow: 0 0 14px color-mix(in srgb, var(--tz-t-caret, var(--tz-a)) 70%, transparent);
  /* Bir tekis (linear) sirpanish: tez yozganda kursor harfdan harfga sakramaydi,
     to‘xtovsiz oqadi. Avvalgi egri chiziq yo‘lning ko‘pini birinchi lahzada bosib o‘tardi. */
  transition: transform .13s linear, width .13s linear, height .13s linear;
  will-change: transform;
  animation: tz-blink 1.1s ease-in-out infinite;
}
.tz-caret.no-anim { transition: none; }
.tz-caret.is-typing { animation: none; }
.tz[data-caret="block"] .tz-caret { opacity: .35; border-radius: 4px; }
.tz[data-caret="underline"] .tz-caret { height: 3px !important; margin-top: calc(var(--tz-size) * 1.55); }
@keyframes tz-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.tz-hidden-input { position: absolute; opacity: 0; width: 1px; height: 1px; left: 0; top: 0; border: 0; padding: 0; }
.tz-focus {
  position: absolute; inset: 0; margin: auto; height: fit-content; width: fit-content;
  border: 1px solid var(--tz-line-2); background: var(--tz-glass); color: var(--tz-text);
  padding: 12px 20px; border-radius: 14px; font: inherit; font-family: var(--tz-sans); font-size: 1rem; cursor: pointer;
}
.tz-keys { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 16px; color: var(--tz-muted); font-size: .8rem; }
.tz kbd {
  display: inline-block; padding: 1px 7px; border-radius: 6px; font-family: var(--tz-mono); font-size: .75rem;
  background: var(--tz-glass-2); border: 1px solid var(--tz-line-2); color: var(--tz-text); box-shadow: 0 2px 0 var(--tz-line-2);
}

/* ---------------------------------------------------------------- natija */
.tz-result { animation: tz-rise .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes tz-rise { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
.tz-result__top { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: center; }
.tz-result__main { display: grid; gap: 14px; }
.tz-big { display: flex; flex-direction: column; line-height: 1; }
.tz-big b { font-size: 4.2rem; font-weight: 700; letter-spacing: -.03em; background: var(--tz-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.tz-big span { color: var(--tz-muted); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; margin-top: 4px; }
.tz-big--sub b { font-size: 2.4rem; background: none; color: var(--tz-text); -webkit-text-fill-color: currentColor; }
.tz-badge { justify-self: start; padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: .8rem; border: 1px solid var(--tz-line-2); background: var(--tz-glass-2); }
.tz-badge[data-level="master"] { background: var(--tz-grad); color: #fff; border-color: transparent; }
.tz-badge[data-level="fast"] { color: var(--tz-c); }
.tz-badge[data-level="good"] { color: var(--tz-ok); }
.tz-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 6px; }
.tz-grid div { padding: 12px 14px; border-radius: 14px; background: var(--tz-glass-2); border: 1px solid var(--tz-line); }
.tz-grid dt { font-size: .74rem; color: var(--tz-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.tz-grid dd { margin: 4px 0 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tz-result__note { color: var(--tz-muted); min-height: 1.4em; margin: 10px 0; font-size: .9rem; }
.tz-result__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- grafik */
.tz-chart { width: 100%; min-height: 200px; }
.tz-chart--tall { min-height: 230px; }
.tz-svg { width: 100%; height: 220px; display: block; overflow: visible; }
.tz-grid-line { stroke: var(--tz-line); stroke-width: 1; }
.tz-axis { fill: var(--tz-muted); font-size: 11px; font-family: var(--tz-sans); }
.tz-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tz-line--a { stroke: var(--tz-a); }
.tz-line--b { stroke: var(--tz-b); opacity: .7; }
.tz-line--c { stroke: var(--tz-c); }
.tz-line.is-dashed { stroke-dasharray: 5 5; stroke-width: 1.8; }
.tz-stop-a { stop-color: var(--tz-a); stop-opacity: .32; }
.tz-stop-b { stop-color: var(--tz-a); stop-opacity: 0; }
.tz-err-dot { fill: var(--tz-bad); opacity: .85; }
.tz-colbar { fill: var(--tz-a); opacity: .85; }
.tz-colbar:hover { fill: var(--tz-b); }
.tz-legend { display: flex; gap: 14px; justify-content: flex-end; font-size: .76rem; color: var(--tz-muted); margin-top: 6px; }
.tz-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tz-legend__a::before { background: var(--tz-a); }
.tz-legend__b::before { background: var(--tz-b); }
.tz-legend__c::before { background: var(--tz-c); }
.tz-legend__err::before { background: var(--tz-bad); border-radius: 50% !important; }
.tz-chart__empty { color: var(--tz-muted); text-align: center; padding: 70px 0; margin: 0; }

/* ---------------------------------------------------------------- statistika va reyting */
.tz-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tz-head h1 { font-size: 1.8rem; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.tz-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.tz-filters--board { margin-bottom: 16px; }
.tz-select {
  appearance: none; border-radius: 12px; border: 1px solid var(--tz-line-2); background: var(--tz-glass);
  color: var(--tz-text); padding: 9px 34px 9px 14px; font: inherit; font-size: .88rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--tz-muted) 50%), linear-gradient(135deg, var(--tz-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.tz-select option { background: var(--tz-bg-2); color: var(--tz-text); }
.tz-note { color: var(--tz-muted); margin: 0 0 16px; }
.tz-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tz-kpi { position: relative; padding: 16px; border-radius: 16px; background: var(--tz-glass); border: 1px solid var(--tz-line); display: flex; flex-direction: column; gap: 2px; }
.tz-kpi i { position: absolute; right: 14px; top: 14px; color: var(--tz-a); opacity: .8; }
.tz-kpi b { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tz-kpi span { font-size: .78rem; color: var(--tz-muted); }
.tz-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.tz-records { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tz-records li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--tz-glass-2); font-size: .9rem; }
.tz-records b { white-space: nowrap; }

.tz-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; align-items: end; }
.tz-podium:empty { display: none; }
.tz-podium__item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 16px; border-radius: 16px;
  background: var(--tz-glass-2); border: 1px solid var(--tz-line); text-decoration: none; text-align: center;
}
.tz-podium__item--1 { order: 2; padding-top: 26px; border-color: rgba(250, 204, 21, .45); box-shadow: 0 20px 50px -30px rgba(250, 204, 21, .6); }
.tz-podium__item--2 { order: 1; }
.tz-podium__item--3 { order: 3; }
.tz-podium__rank { font-weight: 700; font-size: .8rem; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--tz-line-2); }
.tz-podium__item--1 .tz-podium__rank { background: #facc15; color: #3a2a00; }
.tz-podium__item--2 .tz-podium__rank { background: #cbd5e1; color: #1e293b; }
.tz-podium__item--3 .tz-podium__rank { background: #d6a36b; color: #3b2208; }
.tz-podium__ava { width: 52px; height: 52px; border-radius: 50%; background: var(--tz-grad); color: #fff; display: grid; place-items: center; font-weight: 700; }
.tz-podium__name { font-weight: 600; font-size: .9rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-podium__item b { font-size: 1.1rem; }
.tz-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tz-table th { text-align: left; color: var(--tz-muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--tz-line); }
.tz-table td { padding: 10px; border-bottom: 1px solid var(--tz-line); font-variant-numeric: tabular-nums; }
.tz-table td:nth-child(3) { font-weight: 700; }
.tz-table tr.is-me td { background: rgba(79, 140, 255, .12); }
.tz-table__user { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; }
.tz-ava--photo { overflow: hidden; padding: 0; }
.tz-ava--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tz-podium__item .dz-avatar { margin-block: 4px; }
.tz-podium__name .pro-badge, .tz-table__user .pro-badge { font-size: .62rem; }
.tz-table__ava { width: 30px; height: 30px; border-radius: 50%; background: var(--tz-glass-2); display: grid; place-items: center; font-size: .72rem; border: 1px solid var(--tz-line-2); }
.tz-skeleton td { height: 44px; background: linear-gradient(90deg, transparent, var(--tz-glass-2), transparent); background-size: 200% 100%; animation: tz-shimmer 1.2s infinite; }
@keyframes tz-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- sozlamalar */
.tz-drawer { position: fixed; inset: 0; z-index: 2000; background: rgba(3, 5, 12, .55); backdrop-filter: blur(4px); display: flex; justify-content: flex-end; }
.tz-drawer__panel {
  width: min(420px, 100%); height: 100%; overflow-y: auto; padding: 22px; background: var(--tz-bg-2);
  border-left: 1px solid var(--tz-line-2); color: var(--tz-text); animation: tz-slide .25s ease;
}
@keyframes tz-slide { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.tz-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.tz-drawer__head h2 { font-size: 1.25rem; margin: 0; font-weight: 700; }
.tz-set { display: grid; gap: 4px; }
.tz-set__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--tz-line); font-weight: 600; font-size: .92rem; margin: 0; }
.tz-switch { cursor: pointer; }
.tz-switch input { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--tz-line-2); position: relative; cursor: pointer; transition: background .15s; flex-shrink: 0; }
.tz-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.tz-switch input:checked { background: var(--tz-grad); }
.tz-switch input:checked::after { transform: translateX(18px); }
.tz-set input[type="range"] { accent-color: var(--tz-a); width: 160px; }
.tz-set__keys h3 { font-size: .9rem; color: var(--tz-muted); margin: 16px 0 8px; }
.tz-set__keys p { margin: 0 0 6px; font-size: .88rem; color: var(--tz-muted); }

.tz-toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 2010; }
.tz-toast { padding: 12px 16px; border-radius: 14px; background: var(--tz-bg-2); border: 1px solid var(--tz-line-2); color: var(--tz-text); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7); transition: opacity .3s, transform .3s; }
.tz-toast.is-out { opacity: 0; transform: translateY(6px); }

/* ---------------------------------------------------------------- kamroq animatsiya */
.tz.is-reduced *, .tz.is-reduced *::before { animation: none !important; transition: none !important; }
/* Kompyuterda «animatsiyalar o‘chirilgan» bo‘lsa ham kursor va qator siljishi silliq
   qoladi — ularni sahifaning o‘z sozlamasi boshqaradi («Silliq kursor», «Kamroq animatsiya»). */
@media (prefers-reduced-motion: reduce) {
  .tz *:not(.tz-caret):not(.tz-words), .tz *::before { animation: none !important; transition: none !important; }
  .tz-caret { animation: none !important; }
}

/* ---------------------------------------------------------------- moslashuvchan */
@media (max-width: 991.98px) {
  .tz-result__top { grid-template-columns: minmax(0, 1fr); }
  .tz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tz-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .tz { padding-bottom: 96px; }
  /* backdrop-filter «fixed» bolalarini o‘ziga bog‘lab qo‘yadi — pastki menyu uchun o‘chiriladi */
  .tz-bar { border-radius: 20px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--tz-bg-2); }
  .tz-tabs {   /* telefonda — pastki navigatsiya */
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1040; justify-content: space-around; margin: 0;
    padding: 6px; border-radius: 18px; background: var(--tz-bg-2); border: 1px solid var(--tz-line-2);
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .8);
  }
  .tz-tabs button { flex-direction: column; gap: 2px; font-size: .72rem; padding: 6px 10px; }
  .tz-bar__right { margin-left: auto; }
  .tz-user__name { display: none; }
  .tz-user { padding: 4px; }
  .tz-config__sep { display: none; }
  .tz-live { gap: 16px; }
  .tz-live__timer { font-size: 1.9rem; min-width: 50px; }
  .tz-keys { display: none; }
  .tz-big b { font-size: 3.2rem; }
  .tz-table th:nth-child(5), .tz-table td:nth-child(5), .tz-table th:nth-child(6), .tz-table td:nth-child(6) { display: none; }
  .tz-podium__ava { width: 42px; height: 42px; }
}

/* ---------------------------------------------------------------- ranglar */
.tz-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 0 14px; border-bottom: 1px solid var(--tz-line); }
.tz-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 12px;
  border: 1px solid var(--tz-line); background: var(--tz-glass-2); color: var(--tz-text); cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 600;
}
.tz-swatch.is-active { border-color: var(--tz-a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tz-a) 45%, transparent); }
.tz-swatch__dots { display: flex; gap: 3px; }
.tz-swatch__dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.tz-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--tz-line); }
.tz-color { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--tz-glass-2); font-size: .84rem; font-weight: 600; cursor: pointer; margin: 0; }
.tz-color input { width: 34px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; }
.tz-set__sub { font-size: .9rem; color: var(--tz-muted); margin: 14px 0 0; font-weight: 700; }
.tz-link { border: 0; background: none; color: var(--tz-c); font: inherit; font-size: .84rem; cursor: pointer; padding: 8px 0; justify-self: start; }

/* «Orqaga» tugmasi Maskan maydoni ichida — shisha uslubda */
.tz .back-btn { color: var(--tz-muted); background: var(--tz-glass); border: 1px solid var(--tz-line-2); box-shadow: none;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: var(--tz-sans); }
.tz .back-btn:hover { color: var(--tz-text); background: var(--tz-glass-2); border-color: var(--tz-a); }
.tz .back-btn--bar { margin-bottom: 4px; }
.tz-bar .back-btn { width: 38px; height: 38px; padding: 0; justify-content: center; flex-shrink: 0; }
.tz-bar .back-btn .back-btn__text { display: none; }