/* ============================================================
   base.css — komponentlar (faqat design-tokens.css qiymatlari bilan)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-family); font-size: var(--text-base);
  line-height: 1.6; color: var(--color-text-primary); background: var(--color-bg);
}
h1,h2,h3,h4 { line-height: 1.25; margin: 0 0 var(--space-3); font-weight: 700; }
h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.num, .score, .stat-value { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); }
.section { padding-block: var(--space-8); }
.stack > * + * { margin-top: var(--space-4); }
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3,1fr); } }

/* ---------- Header / Footer (layout.js) ---------- */
.app-header {
  position: sticky; top: 0; z-index: 40; background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.app-header .container { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); }
.brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 800; font-size: var(--text-lg); color: var(--color-text-primary); }
.brand:hover { text-decoration: none; }
.brand .brand-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-primary); display: inline-block; }
.app-nav { display: none; gap: var(--space-1); margin-inline-start: var(--space-4); }
@media (min-width: 768px) { .app-nav { display: flex; } }
.app-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 600; }
.app-nav a:hover { background: var(--color-neutral-bg); text-decoration: none; }
.app-nav a.active { color: var(--color-primary); background: var(--color-primary-soft); }
.header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); }
.nav-toggle { display: inline-flex; background: none; border: 0; font-size: var(--text-xl); color: var(--color-text-secondary); cursor: pointer; padding: var(--space-2); }
@media (min-width: 768px) { .nav-toggle { display: none; } }
.mobile-menu { border-top: 1px solid var(--color-border); padding: var(--space-2) var(--space-4) var(--space-4); }
.mobile-menu a { display: block; padding: var(--space-3) var(--space-2); font-weight: 600; color: var(--color-text-secondary); }
.app-footer { border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); padding-block: var(--space-6); margin-top: var(--space-8); background: var(--color-surface); }

/* ---------- Tugmalar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: inherit; font-size: var(--text-base); font-weight: 600; line-height: 1.2;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; transition: all var(--transition-fast);
  text-decoration: none; user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary { background: var(--color-surface); color: var(--color-text-primary); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-neutral-bg); }
.btn-danger { background: var(--color-error); color: #fff; }
.btn-danger:hover { filter: brightness(.92); }
.btn-ghost { background: transparent; color: var(--color-primary); }
.btn-ghost:hover { background: var(--color-primary-soft); }
.btn-block { width: 100%; }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); border-radius: var(--radius-lg); }

/* Loading holat */
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading::before {
  content: ""; width: 1em; height: 1em; border-radius: var(--radius-full);
  border: 2px solid currentColor; border-top-color: transparent; display: inline-block;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Forma ---------- */
.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); }
.input, .textarea, .select {
  width: 100%; font: inherit; color: var(--color-text-primary);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.input:disabled { background: var(--color-neutral-bg); color: var(--color-text-muted); cursor: not-allowed; }
.field-hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.field-error-msg { font-size: var(--text-xs); color: var(--color-error); display: none; }
.field.has-error .input { border-color: var(--color-error); }
.field.has-error .field-error-msg { display: block; }

/* ---------- Kartalar ---------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.card-pastel { border: 0; }
.card-ielts  { background: var(--color-ielts-bg); }
.card-ielts .card-accent { color: var(--color-ielts-accent); }
.card-ml     { background: var(--color-ml-bg); }
.card-ml .card-accent { color: var(--color-ml-accent); }
.card-interactive { transition: box-shadow var(--transition-fast), transform var(--transition-fast); }
.card-interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Ikon-doira (karta tepasida: Test&Score naqshi) */
.icon-circle {
  width: 44px; height: 44px; border-radius: var(--radius-full); display: grid; place-items: center;
  font-size: var(--text-lg); background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.card-ielts .icon-circle { color: var(--color-ielts-accent); }
.card-ml .icon-circle { color: var(--color-ml-accent); }

/* ---------- Badge / chip / ball-chiplari ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: 700; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full); background: var(--color-neutral-bg); color: var(--color-neutral-accent);
}
.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-error   { background: var(--color-error-soft);   color: var(--color-error); }
.badge-info    { background: var(--color-info-soft);    color: var(--color-info); }
.badge-primary { background: var(--color-primary-soft); color: var(--color-primary); }

/* Ball chipi (ELSA "75 Overall" naqshi) */
.score-chip {
  display: inline-grid; gap: 0; justify-items: center; min-width: 84px;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
}
.score-chip .num { font-size: var(--text-2xl); font-weight: 800; line-height: 1.1; }
.score-chip .lbl { font-size: var(--text-xs); color: var(--color-text-secondary); }
.score-chip.tone-good { border-color: var(--color-success); }
.score-chip.tone-good .num { color: var(--color-success); }
.score-chip.tone-mid { border-color: var(--color-warning); }
.score-chip.tone-mid .num { color: var(--color-warning); }
.score-chip.tone-bad { border-color: var(--color-error); }
.score-chip.tone-bad .num { color: var(--color-error); }

/* ---------- Progress (bar, ring, gauge) ---------- */
.progress { height: 10px; background: var(--color-neutral-bg); border-radius: var(--radius-full); overflow: hidden; }
.progress > .fill { height: 100%; width: 0; background: var(--color-primary); border-radius: inherit; transition: width .4s ease; }
.progress.tone-good > .fill { background: var(--color-success); }
.progress.tone-mid > .fill { background: var(--color-warning); }
.progress.tone-bad > .fill { background: var(--color-error); }
.progress-label { display: flex; justify-content: space-between; font-size: var(--text-sm); margin-bottom: var(--space-2); }
.progress-label .val { font-weight: 700; }

/* Ingichka imtihon progress-chizig'i (Sprechify naqshi) */
.exam-progress { display: grid; gap: var(--space-2); }
.exam-progress .track { height: 6px; border-radius: var(--radius-full); background: var(--color-neutral-bg); overflow: hidden; }
.exam-progress .track > .fill { height: 100%; background: var(--color-primary); transition: width .3s ease; }
.exam-progress .meta { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-secondary); }

/* Halqa progress (ELSA "Pausing Score") */
.ring {
  --val: 0; --ring-color: var(--color-success); width: 96px; height: 96px; border-radius: var(--radius-full);
  background: conic-gradient(var(--ring-color) calc(var(--val) * 1%), var(--color-neutral-bg) 0);
  display: grid; place-items: center;
}
.ring::before { content: ""; position: absolute; width: 72px; height: 72px; border-radius: var(--radius-full); background: var(--color-surface); }
.ring { position: relative; }
.ring .ring-val { position: relative; font-size: var(--text-xl); font-weight: 800; }

/* Yarim doira gauge (WPM — ELSA naqshi) */
.gauge { width: 160px; }
.gauge svg { display: block; width: 100%; height: auto; }

/* ---------- Alert ---------- */
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4); border-radius: var(--radius-md);
  font-size: var(--text-sm); border: 1px solid transparent;
}
.alert .alert-icon { flex: none; font-size: var(--text-lg); line-height: 1.4; }
.alert-info    { background: var(--color-info-soft);    color: #075985; border-color: #bae6fd; }
.alert-success { background: var(--color-success-soft); color: #166534; border-color: #bbf7d0; }
.alert-warning { background: var(--color-warning-soft); color: #92400e; border-color: #fde68a; }
.alert-error   { background: var(--color-error-soft);   color: #991b1b; border-color: #fecaca; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: var(--z-modal);
  display: none; align-items: center; justify-content: center; padding: var(--space-4);
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-width: 420px; width: 100%; padding: var(--space-6);
}
.modal h3 { margin-bottom: var(--space-2); }
.modal-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-6); }

/* ---------- Skeleton (yuklanish) ---------- */
.skeleton {
  border-radius: var(--radius-sm); background: var(--color-neutral-bg); position: relative; overflow: hidden;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-line { height: 14px; margin-bottom: var(--space-2); }
.skel-title { height: 22px; width: 55%; margin-bottom: var(--space-3); }
.skel-btn { height: 44px; width: 160px; border-radius: var(--radius-md); }
.skel-circle { width: 84px; height: 84px; border-radius: var(--radius-full); }

/* ---------- Bo'sh holat ---------- */
.empty-state { text-align: center; padding: var(--space-8) var(--space-4); color: var(--color-text-secondary); }
.empty-state .empty-icon { font-size: var(--text-3xl); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.empty-state h3 { color: var(--color-text-primary); }

/* ---------- Dark hero-score karta (ELSA naqshi, o'zimizniki) ---------- */
.hero-score {
  background: linear-gradient(135deg, var(--color-hero-bg-from), var(--color-hero-bg-to));
  color: var(--color-hero-text); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-lg);
}
.hero-score .score-big { font-size: var(--text-3xl); font-weight: 800; line-height: 1; }
.hero-score .hero-sub { color: #c7d2fe; font-size: var(--text-sm); }
.hero-score .score-chip { background: var(--color-hero-surface); border-color: var(--color-hero-border); }
.hero-score .score-chip .lbl { color: #c7d2fe; }

/* ---------- Utility ---------- */
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-center { text-align: center; }
.mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }
.flex { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }