/* ============================================================================
   EKOMARKAZ — COMPONENTS
   Atomlar va molekulalar. Mavjud klass nomlari saqlangan — JS shu nomlarni
   chiqaradi, shuning uchun markup buzilmaydi, faqat ko'rinish yangilanadi.
   ============================================================================ */

/* ============================================================================
   ICON — barcha ikonkalar inline SVG (emoji emas)
   ============================================================================ */
.icon {
  width: 1.25em; height: 1.25em;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -0.22em;
}
.icon-sm { width: 1em; height: 1em; }
.icon-lg { width: 1.5em; height: 1.5em; }
.icon-xl { width: 2rem; height: 2rem; stroke-width: 1.5; }

/* Ikonka uchun yumaloq idish — statistika va sarlavhalarda */
.ico-badge {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-3);
  background: var(--brand-tint);
  color: var(--brand);
  flex: none;
}
.ico-badge.is-accent { background: var(--accent-tint); color: var(--accent); }
.ico-badge.is-warn   { background: var(--warn-tint);   color: var(--warn); }
.ico-badge.is-danger { background: var(--danger-tint); color: var(--danger); }
.ico-badge.is-award  { background: var(--award-tint);  color: var(--award); }

/* ============================================================================
   BUTTON
   ============================================================================ */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  --btn-brd: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 11px var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-base);
  line-height: 1.2;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-brd);
  border-radius: var(--r-2);
  box-shadow: var(--sh-1);
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}
/* Nozik yuqori yorug'lik — tugmaga "hajm" beradi */
.btn::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: var(--sh-inset);
  pointer-events: none;
}
.btn:hover  { background: color-mix(in oklab, var(--btn-bg) 88%, black); box-shadow: var(--sh-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: var(--sh-1); transition-duration: 60ms; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn.primary  { --btn-bg: var(--brand); box-shadow: var(--sh-brand); }
.btn.primary:hover { box-shadow: 0 8px 26px rgba(16,145,104,.34); }
.btn.blue     { --btn-bg: var(--accent); }
.btn.red      { --btn-bg: var(--danger); }
.btn.gold     { --btn-bg: var(--warn); }

.btn.ghost {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-brd: var(--border-2);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--surface-3); border-color: var(--border-strong); }

.btn.subtle {
  --btn-bg: var(--surface-3); --btn-fg: var(--text); --btn-brd: transparent;
  box-shadow: none;
}
.btn.subtle:hover { background: var(--border); }

.btn.link {
  --btn-bg: transparent; --btn-fg: var(--brand); --btn-brd: transparent;
  box-shadow: none; padding: 4px 2px;
}
.btn.link::after { display: none; }
.btn.link:hover { background: transparent; transform: none; text-decoration: underline; text-underline-offset: 3px; }

.btn.sm  { padding: 7px var(--sp-3); font-size: var(--fs-xs); border-radius: var(--r-1); gap: 6px; }
.btn.lg  { padding: 15px var(--sp-7); font-size: var(--fs-lg); border-radius: var(--r-3); }
.btn.w100 { width: 100%; }
.btn.icon-only { padding: 9px; aspect-ratio: 1; }

/* Yuklanish holati — matn joyida qoladi, ustidan spinner chiqadi */
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::before {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: fx-spin 600ms linear infinite;
}
.btn.ghost.is-loading::before, .btn.subtle.is-loading::before {
  border-color: var(--border-strong); border-top-color: var(--text);
}

/* ============================================================================
   CARD
   ============================================================================ */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: var(--sp-6);
  box-shadow: var(--sh-1);
  margin-bottom: var(--sp-4);
  transition: box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.card > h3 {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-4);
  color: var(--text);
}
.card.is-flat { box-shadow: none; }
.card.is-raised { box-shadow: var(--sh-3); }
.card.is-interactive { cursor: pointer; }
.card.is-interactive:hover { box-shadow: var(--sh-3); border-color: var(--border-2); }

.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.card-head h3 { display: flex; align-items: center; gap: var(--sp-3); margin: 0; }
.card-head .sub {
  margin-top: 5px; font-size: var(--fs-xs); color: var(--text-3); font-weight: var(--fw-normal);
}
.card-ico {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-2);
  background: var(--brand-tint); color: var(--brand); flex: none;
}

/* ============================================================================
   BADGE / PILL
   ============================================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: .01em;
  line-height: 1.4;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge .icon { width: 13px; height: 13px; stroke-width: 2; }
.badge.g { background: var(--brand-tint);  color: var(--brand-lo); }
.badge.b { background: var(--accent-tint); color: var(--ac-600); }
.badge.y { background: var(--warn-tint);   color: var(--am-700); }
.badge.r { background: var(--danger-tint); color: var(--ro-700); }
.badge.v { background: var(--award-tint);  color: var(--award); }
.badge.outline { background: transparent; border-color: var(--border-2); color: var(--text-2); }
.badge.dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
[data-theme="dark"] .badge.g { color: var(--br-300); }
[data-theme="dark"] .badge.b { color: var(--ac-300); }
[data-theme="dark"] .badge.y { color: var(--am-300); }
[data-theme="dark"] .badge.r { color: var(--ro-300); }

/* "Demo ma'lumot" belgisi — o'ylab topilgan kontent aniq ko'rinib tursin */
.badge.demo {
  background: transparent; border: 1px dashed var(--border-strong);
  color: var(--text-3); font-weight: var(--fw-medium);
}

/* ============================================================================
   FORM
   ============================================================================ */
.field { margin-bottom: var(--sp-4); }
.field label,
.field > .label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: var(--tr-base);
}
.field .hint { margin-top: 6px; font-size: var(--fs-2xs); color: var(--text-3); }
.field .err  { margin-top: 6px; font-size: var(--fs-2xs); color: var(--danger); font-weight: var(--fw-medium); }

input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input:not([type]), select, textarea, .field input, .field select {
  width: 100%;
  padding: 11px var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  box-shadow: var(--sh-1);
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
input[aria-invalid="true"] { border-color: var(--danger); }
input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px var(--danger-tint); }

select {
  appearance: none;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B8077' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
}
[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A2B5AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
input[type="file"] {
  padding: var(--sp-3); box-shadow: none; cursor: pointer;
  border-style: dashed; background: var(--surface-2);
}
input[type="file"]::file-selector-button {
  margin-right: var(--sp-3); padding: 7px var(--sp-3);
  border: 1px solid var(--border-2); border-radius: var(--r-1);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); cursor: pointer;
}

.form-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.form-grid .span-all { grid-column: 1 / -1; }
.form-actions {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5); flex-wrap: wrap;
}

/* ============================================================================
   SEGMENTED CONTROL (til, hafta)
   ============================================================================ */
.lang-seg, .week-seg {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}
.lang-seg button, .week-seg .btn {
  padding: 5px 11px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
  background: transparent;
  border: none; box-shadow: none;
  border-radius: var(--r-1);
  min-width: 34px;
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.lang-seg button::after, .week-seg .btn::after { display: none; }
.lang-seg button:hover, .week-seg .btn:hover { color: var(--text); background: transparent; transform: none; }
.lang-seg button.on, .week-seg .btn:not(.ghost) {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

/* ============================================================================
   PROGRESS
   ============================================================================ */
.pbar {
  position: relative;
  height: 8px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-top: var(--sp-3);
}
.pbar > div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-lo), var(--brand), var(--brand-hi));
  background-size: 200% 100%;
  transition: width var(--dur-5) var(--ease-out);
  will-change: width;
}
/* Progress tugallanmagan bo'lsa — nozik "tirik" harakat */
.pbar > div:not([style*="width:100%"]) { animation: fx-grad 4s var(--ease-in-out) infinite; }

.mini-pbar {
  display: inline-block; vertical-align: middle;
  width: 68px; height: 5px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-right: var(--sp-2);
}
.mini-pbar i {
  display: block; height: 100%;
  background: var(--brand);
  border-radius: inherit;
  transition: width var(--dur-5) var(--ease-out);
}

/* Halqa shaklidagi progress — dashboard uchun */
.ring { position: relative; display: grid; place-items: center; }
.ring svg { transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; stroke-linecap: round; }
.ring .track { stroke: var(--surface-3); }
.ring .bar {
  stroke: var(--brand);
  transition: stroke-dashoffset var(--dur-5) var(--ease-out);
  filter: drop-shadow(0 2px 6px rgba(16,145,104,.28));
}
.ring .ring-label {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center; gap: 1px;
}
.ring .ring-v { font-size: var(--fs-h2); font-weight: var(--fw-black); letter-spacing: var(--tr-head); line-height: 1; }
.ring .ring-t { font-size: var(--fs-2xs); color: var(--text-3); font-weight: var(--fw-medium); }

/* ============================================================================
   STAT
   ============================================================================ */
.grid3 {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: var(--sp-4);
}
.stat {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: var(--sp-5);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.stat:hover { box-shadow: var(--sh-2); }
.stat .si {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--r-3);
  background: var(--brand-tint); color: var(--brand); flex: none;
}
.stat .v {
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  letter-spacing: var(--tr-head);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat .l {
  font-size: var(--fs-2xs); color: var(--text-3);
  margin-top: 3px; line-height: 1.4; font-weight: var(--fw-medium);
}
.stat.s-blue  .si { background: var(--accent-tint); color: var(--accent); }
.stat.s-gold  .si { background: var(--warn-tint);   color: var(--warn); }
.stat.s-red   .si { background: var(--danger-tint); color: var(--danger); }
.stat.s-award .si { background: var(--award-tint);  color: var(--award); }

/* ============================================================================
   TABLE
   ============================================================================ */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
}
table.db {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
table.db th {
  position: sticky; top: 0; z-index: 1;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.db td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.db tr:last-child td { border-bottom: none; }
table.db tbody tr, table.db tr { transition: background var(--dur-1) var(--ease-out); }
table.db tr:hover td { background: var(--surface-2); }
.muted { color: var(--text-3); font-size: var(--fs-xs); }

.user-cell { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.user-ava {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-full);
  background: linear-gradient(140deg, var(--br-400), var(--ac-500));
  color: #fff;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: .02em; flex: none;
}
.user-cell .un { font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.user-cell .ul { font-size: var(--fs-2xs); color: var(--text-3); }
.actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ============================================================================
   NOTICE / CALLOUT
   ============================================================================ */
.warn-strip {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  background: var(--warn-tint);
  border: 1px solid color-mix(in oklab, var(--warn) 26%, transparent);
  border-left: 3px solid var(--warn);
  color: var(--text);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  margin-bottom: var(--sp-4);
}
.warn-strip .icon { color: var(--warn); margin-top: 2px; }
.warn-strip.is-info   { background: var(--accent-tint); border-color: color-mix(in oklab, var(--accent) 26%, transparent); border-left-color: var(--accent); }
.warn-strip.is-info .icon { color: var(--accent); }
.warn-strip.is-danger { background: var(--danger-tint); border-color: color-mix(in oklab, var(--danger) 26%, transparent); border-left-color: var(--danger); }
.warn-strip.is-danger .icon { color: var(--danger); }
.warn-strip.is-ok     { background: var(--brand-tint); border-color: color-mix(in oklab, var(--brand) 26%, transparent); border-left-color: var(--brand); }
.warn-strip.is-ok .icon { color: var(--brand); }

.demo-note {
  margin-top: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-2);
  line-height: var(--lh-loose);
}
.demo-note b { color: var(--text); font-weight: var(--fw-semi); }

/* ============================================================================
   EMPTY / LOADING / ERROR STATES
   ============================================================================ */
.state {
  display: grid; place-items: center; gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-5);
  text-align: center;
}
.state .state-ico {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: var(--r-4);
  background: var(--surface-3); color: var(--text-3);
}
.state h4 { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.state p { font-size: var(--fs-sm); color: var(--text-3); max-width: 44ch; }
.state.is-error .state-ico { background: var(--danger-tint); color: var(--danger); }
.admin-empty, .chat-empty {
  display: grid; place-items: center;
  padding: var(--sp-9) var(--sp-5);
  color: var(--text-3); font-size: var(--fs-sm); text-align: center;
}

/* Skeleton — kontent yuklanayotganda joy egallaydi, "sakrash" bo'lmaydi */
.skel {
  border-radius: var(--r-2);
  background: linear-gradient(90deg,
    var(--surface-3) 25%,
    color-mix(in oklab, var(--surface-3) 55%, var(--surface)) 37%,
    var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: fx-shimmer 1.4s var(--ease-linear) infinite;
}
.skel-line { height: 12px; margin-bottom: var(--sp-2); }
.skel-line.w-40 { width: 40%; } .skel-line.w-60 { width: 60%; } .skel-line.w-80 { width: 80%; }
.skel-card { height: 132px; border-radius: var(--r-4); }

/* ============================================================================
   TOAST — qisqa bildirishnoma (server javobi, xatolik)
   ============================================================================ */
.toast {
  position: fixed; left: 50%; bottom: var(--sp-6); z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: min(92vw, 460px);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  box-shadow: var(--sh-4);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast .icon { flex: none; }
.toast.is-ok     { border-color: color-mix(in oklab, var(--brand) 40%, transparent); }
.toast.is-ok .icon { color: var(--brand); }
.toast.is-danger { border-color: color-mix(in oklab, var(--danger) 40%, transparent); }
.toast.is-danger .icon { color: var(--danger); }
.toast.is-info .icon { color: var(--accent); }

/* ============================================================================
   MODAL / OVERLAY
   ============================================================================ */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  background: var(--scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fx-fade var(--dur-2) var(--ease-out) both;
}
.v-card, .modal-card {
  position: relative;
  width: 460px; max-width: 100%;
  max-height: 90vh; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  padding: var(--sp-7);
  box-shadow: var(--sh-5);
  animation: fx-scale-in var(--dur-3) var(--ease-out) both;
}
.v-card h3, .modal-card h3 {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-h3); margin-bottom: var(--sp-2);
}
.v-card .btn { margin-top: var(--sp-2); }
.v-card .btn + .btn { margin-left: var(--sp-2); }

.v-res {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  border: 1px solid transparent;
  animation: fx-rise var(--dur-3) var(--ease-out) both;
}
.v-res.ok   { background: var(--brand-tint);  border-color: color-mix(in oklab, var(--brand) 28%, transparent); }
.v-res.warn { background: var(--warn-tint);   border-color: color-mix(in oklab, var(--warn) 28%, transparent); }
.v-res.bad  { background: var(--danger-tint); border-color: color-mix(in oklab, var(--danger) 28%, transparent); }

/* ============================================================================
   QUESTION / OPTION (test va imtihon)
   ============================================================================ */
.q-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
}
.q-item .qt {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-4);
  color: var(--text);
}
.q-opt {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.q-opt:last-child { margin-bottom: 0; }
.q-opt > span:first-child {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex: none;
  border-radius: var(--r-1);
  background: var(--surface);
  border: 1px solid var(--border-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text-3);
  transition: all var(--dur-1) var(--ease-out);
}
.q-opt:hover { border-color: var(--border-strong); background: var(--surface-3); }
.q-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.q-opt.sel {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.q-opt.sel > span:first-child { background: var(--brand); border-color: var(--brand); color: #fff; }
.q-opt.correct {
  border-color: var(--brand); background: var(--brand-tint);
}
.q-opt.correct > span:first-child { background: var(--brand); border-color: var(--brand); color: #fff; }
.q-opt.wrong {
  border-color: var(--danger); background: var(--danger-tint);
}
.q-opt.wrong > span:first-child { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ============================================================================
   CHAT
   ============================================================================ */
.chat-wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--sp-4);
  height: calc(100dvh - var(--header-h) - var(--sp-11));
  min-height: 460px;
}
.chat-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  overflow-y: auto;
  padding: var(--sp-2);
}
.chat-contact {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
.chat-contact:hover { background: var(--surface-3); }
.chat-contact.sel { background: var(--brand-tint); }
.chat-ava {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: linear-gradient(140deg, var(--br-400), var(--ac-500));
  color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); flex: none;
}
.chat-cname { font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.chat-clast {
  font-size: var(--fs-2xs); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}
.chat-unread {
  margin-left: auto;
  display: grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: var(--fw-bold);
}
.chat-pane {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  overflow: hidden;
  min-height: 0;
}
.chat-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.chat-back { display: none; }
.chat-msgs {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  background:
    radial-gradient(circle at 20% 10%, var(--brand-tint) 0%, transparent 42%),
    radial-gradient(circle at 85% 85%, var(--accent-tint) 0%, transparent 45%);
}
.msg {
  position: relative;
  max-width: min(74%, 520px);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  border-radius: var(--r-4);
  box-shadow: var(--sh-1);
  animation: fx-rise var(--dur-3) var(--ease-out) both;
  word-break: break-word;
}
.msg.mine   { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: var(--r-1); }
.msg.theirs { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: var(--r-1); }
.msg .mt { margin-top: 4px; font-size: 11px; opacity: .7; text-align: right; }
.chat-input {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.chat-input input { box-shadow: none; }

/* ============================================================================
   LESSON ROW (curriculum)
   ============================================================================ */
.lesson-row {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-2);
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
.lesson-row:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); transform: translateY(-1px); }
.lesson-row.locked { opacity: .55; }
.lesson-row.locked:hover { transform: none; box-shadow: none; border-color: var(--border); }
.lesson-row.done { border-color: color-mix(in oklab, var(--brand) 32%, transparent); }
.lesson-row .l-ico {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--r-2);
  background: var(--surface-3); color: var(--text-3);
  flex: none;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.lesson-row.done .l-ico { background: var(--brand); color: #fff; }
.lesson-row:not(.locked):not(.done) .l-ico { background: var(--accent-tint); color: var(--accent); }
.lesson-row .l-body { flex: 1; min-width: 0; }
.lesson-row .l-body .t {
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  line-height: var(--lh-snug); margin-bottom: 2px;
}
.lesson-row .l-body .m {
  font-size: var(--fs-2xs); color: var(--text-3); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mod-head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-7) 0 var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-3);
}
.mod-head::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.mod-head:first-child { margin-top: 0; }

/* ============================================================================
   TOPBAR (sahifa sarlavhasi)
   ============================================================================ */
.topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.topbar h2 {
  position: relative;
  font-size: var(--fs-h2);
  letter-spacing: var(--tr-head);
  padding-bottom: var(--sp-2);
}
.topbar h2::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 42px; height: 3px; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform-origin: left;
}
.pg-anim .topbar h2::after { animation: fx-underline var(--dur-4) var(--ease-out) both 180ms; }
.pg-anim .topbar .badge { animation: fx-pop var(--dur-3) var(--ease-spring) both 240ms; }
.topbar .spacer { flex: 1; }