/* ============================================================
   Ilova ekranlarining HTML nusxasi (mockup).
   Ranglar uzbcam-mobile/lib/core/theme/app_colors.dart dan olingan —
   ilovadagi bilan bir xil, shuning uchun usta tanish ekranni ko'radi.
   Rasm ishlatilmaydi: har qanday ekranda tiniq, tez yuklanadi va
   ilova yangilansa tahrirlash oson.
   ============================================================ */
:root{
  --m-primary:#0971C9; --m-primary-dark:#075CA5; --m-deep:#0D2350;
  --m-soft:#E4F0FB; --m-violet:#6DA8E2;
  --m-ok:#16B364; --m-ok-soft:#E7F9F0; --m-warn:#F59E0B; --m-warn-soft:#FFF6E6;
  --m-bad:#EF4444; --m-bad-soft:#FEEFEF; --m-gold:#FFB020;
  --m-ink:#0D2350; --m-ink-soft:#47547A; --m-ink-faint:#8390B0;
  --m-bg:#EEF3FA; --m-surface:#FFFEFD; --m-line:#DCE6F2;
}

/* Telefon ramkasi */
.mock{
  width:100%; max-width:250px; margin:0 auto;
  aspect-ratio:9/19; background:var(--m-bg);
  border:7px solid #16233D; border-radius:26px; overflow:hidden;
  display:flex; flex-direction:column;
  font-size:clamp(7.6px,2.4vw,9.4px); line-height:1.45; color:var(--m-ink);
  box-shadow:0 10px 26px rgba(13,35,80,.18); position:relative;
}
.mock *{box-sizing:border-box}

/* Holat paneli */
.m-status{display:flex;justify-content:space-between;align-items:center;
  padding:.5em .9em .2em;font-size:.85em;font-weight:600;flex:none}
.m-status .r{letter-spacing:.15em}

/* Gradient sarlavha */
.m-hero{background:linear-gradient(135deg,#0D2350,#0971C9 55%,#6DA8E2);
  color:#fff;padding:.9em 1em 1.1em;flex:none}
.m-hero.sm{padding:.7em 1em .8em}
.m-hero h4{margin:0 0 .2em;font-size:1.5em;font-weight:700;line-height:1.2}
.m-hero p{margin:0;opacity:.9;font-size:.95em}
.m-hero .row{display:flex;justify-content:space-between;align-items:center}

/* Oddiy sarlavha (oq) */
.m-bar{background:var(--m-surface);border-bottom:1px solid var(--m-line);
  padding:.7em 1em;font-weight:700;font-size:1.05em;flex:none;
  display:flex;align-items:center;gap:.5em}
.m-bar .back{color:var(--m-ink-faint);font-weight:400}

/* Tana */
.m-body{flex:1;padding:.8em;overflow:hidden;display:flex;flex-direction:column;gap:.55em}
.m-body.center{justify-content:center}

/* Karta */
.m-card{background:var(--m-surface);border:1px solid var(--m-line);
  border-radius:.9em;padding:.7em .8em}
.m-card.tight{padding:.55em .65em}
.m-card h5{margin:0 0 .25em;font-size:1.05em;font-weight:700}
.m-card p{margin:0;color:var(--m-ink-soft);font-size:.92em}

/* Kirish maydoni */
.m-input{background:#fff;border:1.5px solid var(--m-primary);border-radius:.8em;
  padding:.6em .7em;display:flex;align-items:center;gap:.5em;font-size:1.05em}
.m-input.plain{border-color:var(--m-line)}
.m-input .pre{background:var(--m-soft);color:var(--m-primary);font-weight:700;
  border-radius:.45em;padding:.15em .45em;font-size:.9em}
.m-input .ph{color:var(--m-ink-faint)}
.m-label{font-size:.9em;color:var(--m-ink-soft);margin-bottom:.15em}

/* Tugma */
.m-btn{background:linear-gradient(135deg,#0971C9,#6DA8E2);color:#fff;
  border-radius:.8em;padding:.65em;text-align:center;font-weight:700;font-size:1.05em}
.m-btn.ghost{background:#fff;color:var(--m-primary);border:1.5px solid var(--m-primary)}
.m-btn.grey{background:#E7ECF5;color:var(--m-ink-soft)}
.m-btn.ok{background:linear-gradient(135deg,#16B364,#41C98A)}
.m-btn.sm{padding:.42em .7em;font-size:.92em;display:inline-block}

/* Belgilar */
.m-badge{display:inline-flex;align-items:center;gap:.3em;border-radius:99px;
  padding:.18em .55em;font-size:.85em;font-weight:700}
.m-badge.ok{background:var(--m-ok-soft);color:#0E8A4C}
.m-badge.warn{background:var(--m-warn-soft);color:#B45309}
.m-badge.bad{background:var(--m-bad-soft);color:#B91C1C}
.m-badge.blue{background:var(--m-soft);color:var(--m-primary)}
.m-badge.gold{background:#FFF3D6;color:#92650A}
.dot{width:.45em;height:.45em;border-radius:50%;background:currentColor;flex:none}

/* Pastki navigatsiya */
.m-nav{margin-top:auto;background:var(--m-surface);border-top:1px solid var(--m-line);
  display:flex;padding:.4em .2em .5em;flex:none}
.m-nav div{flex:1;text-align:center;font-size:.78em;color:var(--m-ink-faint);line-height:1.5}
.m-nav div i{display:block;font-style:normal;font-size:1.35em}
.m-nav div.on{color:var(--m-primary);font-weight:700}

/* Ro'yxat qatori */
.m-row{display:flex;align-items:center;gap:.6em;padding:.5em 0;
  border-bottom:1px solid var(--m-line)}
.m-row:last-child{border-bottom:0}
.m-row .ico{width:1.9em;height:1.9em;border-radius:.55em;background:var(--m-soft);
  color:var(--m-primary);display:grid;place-items:center;flex:none;font-size:1em}
.m-row .t{flex:1;min-width:0}
.m-row .t b{display:block;font-size:1em}
.m-row .t span{color:var(--m-ink-faint);font-size:.88em}
.m-row .chev{color:var(--m-ink-faint)}

/* Kod kataklari (OTP) */
.m-otp{display:flex;gap:.4em;justify-content:center}
.m-otp span{flex:1;max-width:2.4em;aspect-ratio:1/1.25;border:1.5px solid var(--m-line);
  border-radius:.55em;background:#fff;display:grid;place-items:center;
  font-size:1.4em;font-weight:700}
.m-otp span.f{border-color:var(--m-primary);color:var(--m-primary)}

/* Yuklash oynasi (hujjat) */
.m-upload{border:1.5px dashed var(--m-primary);background:var(--m-soft);
  border-radius:.8em;padding:.9em .6em;text-align:center;color:var(--m-primary);
  font-weight:600;font-size:.95em}
.m-upload small{display:block;color:var(--m-ink-faint);font-weight:400;margin-top:.15em}
.m-upload.done{border-style:solid;border-color:var(--m-ok);background:var(--m-ok-soft);color:#0E8A4C}

/* Bosqichlar chizig'i */
.m-steps{list-style:none;margin:0;padding:0}
.m-steps li{position:relative;padding:0 0 .75em 1.5em;font-size:.95em}
.m-steps li::before{content:"";position:absolute;left:0;top:.28em;width:.75em;height:.75em;
  border-radius:50%;background:#fff;border:2px solid var(--m-line)}
.m-steps li::after{content:"";position:absolute;left:.33em;top:1.05em;bottom:0;
  width:2px;background:var(--m-line)}
.m-steps li:last-child{padding-bottom:0}
.m-steps li:last-child::after{display:none}
.m-steps li.done::before{background:var(--m-ok);border-color:var(--m-ok)}
.m-steps li.done::after{background:var(--m-ok)}
.m-steps li.now::before{background:var(--m-primary);border-color:var(--m-primary);
  box-shadow:0 0 0 3px rgba(9,113,201,.18)}
.m-steps li b{font-weight:700}
.m-steps li span{display:block;color:var(--m-ink-faint);font-size:.9em}

/* Chat */
.m-msg{max-width:78%;padding:.45em .65em;border-radius:.8em;font-size:.95em}
.m-msg.them{background:#fff;border:1px solid var(--m-line);border-bottom-left-radius:.2em}
.m-msg.me{background:var(--m-primary);color:#fff;margin-left:auto;border-bottom-right-radius:.2em}

/* Katakli tanlov (grid) */
.m-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4em}
.m-grid .cell{aspect-ratio:1;border-radius:.55em;background:var(--m-soft);
  display:grid;place-items:center;color:var(--m-primary);font-size:1.3em}
.m-grid .cell.add{border:1.5px dashed var(--m-primary);background:#fff}

/* Katta raqam (balans) */
.m-amount{font-size:1.85em;font-weight:800;letter-spacing:-.02em}

/* Belgilash (checkbox) */
.m-check{width:1.15em;height:1.15em;border-radius:.3em;border:1.5px solid var(--m-line);
  background:#fff;flex:none;display:grid;place-items:center;font-size:.8em;color:#fff}
.m-check.on{background:var(--m-primary);border-color:var(--m-primary)}

/* Izoh (ekran ostidagi) */
.mock-caption{text-align:center;font-size:13px;color:#5A6B85;margin-top:9px}