/* ═══════════════════════════════════════════════════════════════════════════
   DermaPATH — Radeski Skin Clinic
   Palitra va tipografika radeski.uz saytidan olingan:
     oltin   #C09949   (tugmalar, urg'u)
     fon     #F2F6F5   (yumshoq yashil-kulrang) va #FFFFFF (kartalar)
     matn    #1A1A1A
     shrift  Montserrat (sarlavha) + Inter (matn)
     qirra   6–8px, soya deyarli yo'q — tekis, toza uslub
   Bu fayl oxirida yuklanadi va faqat ko'rinishni qayta belgilaydi.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --rd-gold: #c09949;
  --rd-gold-deep: #a8813a;
  --rd-gold-soft: #e8dcc2;
  --rd-gold-wash: #faf6ec;
  --rd-mist: #f2f6f5;
  --rd-mist-2: #f8f8f8;
  --rd-ink: #1a1a1a;
  --rd-ink-soft: #5f6664;
  --rd-line: #e4e9e8;

  --ios-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --rd-display: "Montserrat", "Inter", sans-serif;

  /* Sayt uslubi: kichik radius, tekis yuzalar */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;

  --surface-app: var(--rd-mist);
  --surface-card: #ffffff;
  --surface-muted: var(--rd-mist-2);
  --surface-elevated: #ffffff;

  --glass-fill: #ffffff;
  --glass-fill-2: #ffffff;
  --glass-border: var(--rd-line);
  --glass-border-bright: #d7dedc;

  --text-primary: var(--rd-ink);
  --text-secondary: #3d4442;
  --text-muted: var(--rd-ink-soft);

  --ios-cyan: var(--rd-gold);
  --ios-blue: var(--rd-gold);
  --ios-violet: var(--rd-gold-deep);
  --ring-focus: var(--rd-gold);
  --lab-accent: var(--rd-gold);
  --histo: var(--rd-gold);

  --shadow-lift: 0 1px 2px rgba(26, 26, 26, 0.05);
}

body {
  background: var(--rd-mist) !important;
  font-family: var(--ios-font);
  color: var(--rd-ink);
}

/* Sayt tekis — orqa fon effektlari olib tashlanadi */
body::before {
  background: var(--rd-mist) !important;
}

h1, h2, h3, h4,
.header-title,
.card-title,
.result-title,
.auth-card h1 {
  font-family: var(--rd-display);
  letter-spacing: -0.01em;
}

/* ─── Sarlavha ─────────────────────────────────────────────────────────── */
.header {
  background: #ffffff !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
}

.header-logo-wrap {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.header-logo-wrap svg { display: none; }

.header-logo-wrap::before {
  content: "";
  width: 34px;
  height: 34px;
  background: url("/static/img/radeski-mark.png") center/contain no-repeat;
}

.header .header-brand .header-title,
.header-title {
  font-family: var(--rd-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: var(--rd-ink) !important;
  text-transform: none !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.header .header-brand .header-title .brand-path {
  color: var(--rd-gold) !important;
  -webkit-text-fill-color: var(--rd-gold) !important;
}

.header-title .brand-path {
  color: var(--rd-gold);
}

.header-kicker {
  color: var(--rd-ink-soft);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.58rem;
  font-weight: 600;
}

/* ─── Tugmalar: saytdagidek to'q oltin, oq matn, 8px qirra ─────────────── */
.btn-ziyrakai,
.btn-green,
.btn-sm-ok,
.auth-card button[type="submit"],
.header-id-search button {
  background: var(--rd-gold) !important;
  border: 1px solid var(--rd-gold) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.btn-ziyrakai:hover:not(:disabled),
.btn-green:hover:not(:disabled),
.auth-card button[type="submit"]:hover:not(:disabled),
.header-id-search button:hover {
  background: var(--rd-gold-deep) !important;
  border-color: var(--rd-gold-deep) !important;
}

.btn-ziyrakai:disabled { opacity: 0.45; }

.btn,
.btn-small,
.btn-history,
.btn-auth-logout,
.btn-referral {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.btn-history,
.btn-auth-logout,
.btn-small {
  background: #ffffff !important;
  border: 1px solid var(--rd-line) !important;
  color: var(--rd-ink) !important;
}

.btn-history:hover,
.btn-auth-logout:hover,
.btn-small:hover:not(:disabled) {
  border-color: var(--rd-gold) !important;
  color: var(--rd-gold-deep) !important;
}

.btn-red { border-radius: 8px !important; }

/* ─── Manba tanlash ────────────────────────────────────────────────────── */
.src-tab {
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid var(--rd-line) !important;
  box-shadow: none !important;
}

.src-tab.active {
  border-color: var(--rd-gold) !important;
  background: var(--rd-gold-wash) !important;
  color: var(--rd-gold-deep) !important;
  box-shadow: none !important;
  font-weight: 600;
}

/* ─── Panellar va kartalar: tekis, ingichka chegara ────────────────────── */
.left-panel,
.right-panel,
.center-panel {
  background: #ffffff !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.left-panel .card,
.right-panel .card,
.card {
  background: #ffffff !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.card-title {
  color: var(--rd-ink-soft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.6rem;
  font-weight: 700;
}

.workbar {
  background: #ffffff !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

.wb-flow li {
  border-radius: 6px !important;
  border: 1px solid transparent;
  color: var(--rd-ink-soft);
}

.wb-flow li.on {
  background: var(--rd-gold) !important;
  color: #ffffff !important;
  border-color: var(--rd-gold) !important;
}

.wb-flow li.done {
  color: var(--rd-gold-deep) !important;
  background: var(--rd-gold-wash) !important;
  border-color: var(--rd-gold-soft) !important;
}

/* ─── Forma ────────────────────────────────────────────────────────────── */
.acc-form {
  background: #ffffff !important;
  border-bottom-color: var(--rd-line) !important;
}

.acc-form input,
.acc-form select,
.lab-select,
.micro-select,
.header-id-search input {
  border-radius: 6px !important;
  border-color: var(--rd-line) !important;
  background: #ffffff !important;
  color: var(--rd-ink) !important;
}

.acc-form input:focus,
.acc-form select:focus,
.lab-select:focus,
.micro-select:focus,
.header-id-search input:focus {
  outline: 2px solid var(--rd-gold) !important;
  outline-offset: 0;
  border-color: var(--rd-gold) !important;
}

.acc-form label.req > span::after { color: #b4442f; }

.upload-zone {
  border: 1.5px dashed var(--rd-gold-soft) !important;
  background: var(--rd-gold-wash) !important;
  border-radius: 8px !important;
}

.upload-zone:hover,
.upload-zone.drag-active {
  border-color: var(--rd-gold) !important;
  background: #fffdf6 !important;
}

.upload-main { color: var(--rd-ink); font-weight: 600; }

/* ─── Yo'llanmadan to'ldirish ──────────────────────────────────────────── */
.referral-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.btn-referral {
  border: 1px solid var(--rd-gold);
  background: #ffffff;
  color: var(--rd-gold-deep);
  font-weight: 600;
  font-size: 0.76rem;
  padding: 9px 14px;
  cursor: pointer;
  min-height: 40px;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-referral:hover:not(:disabled) {
  background: var(--rd-gold);
  color: #ffffff;
}

.btn-referral:disabled { opacity: 0.55; cursor: default; }

.referral-hint {
  font-size: 0.68rem;
  color: var(--rd-ink-soft);
  flex: 1 1 160px;
  min-width: 0;
}

.referral-hint.is-busy { color: var(--rd-gold-deep); }
.referral-hint.is-ok { color: #2f7d51; font-weight: 600; }
.referral-hint.is-err { color: #b4442f; font-weight: 600; }

.from-referral { animation: referralFill 2.2s ease; }

@keyframes referralFill {
  0% { box-shadow: 0 0 0 3px rgba(192, 153, 73, 0.4); background: var(--rd-gold-wash); }
  100% { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .from-referral { animation: none; }
}

/* ─── Tasvir va natija ─────────────────────────────────────────────────── */
.media-box {
  background: var(--rd-mist-2) !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 10px !important;
  animation: none !important;
  box-shadow: none !important;
}

.right-panel.report-sheet { background: #ffffff !important; }

#resultBody .r-h3,
#resultBody h4,
.result-content h4 {
  color: var(--rd-gold-deep);
  font-family: var(--rd-display);
  font-weight: 700;
  border-bottom: 1px solid var(--rd-gold-soft);
  padding-bottom: 4px;
}

#resultBody strong { color: var(--rd-ink); }

.result-id,
.result-reg-id {
  color: var(--rd-gold-deep) !important;
  font-weight: 600;
}

.status-pill,
.status-pill--user,
.status-pill--mode {
  background: #ffffff !important;
  border: 1px solid var(--rd-line) !important;
  color: var(--rd-ink-soft) !important;
  border-radius: 999px !important;
}

.case-pill {
  border-radius: 999px !important;
  border: 1px solid var(--rd-line) !important;
}

/* ─── Tarix ────────────────────────────────────────────────────────────── */
.hist-drawer { background: #ffffff; }
.hist-item { border-bottom: 1px solid var(--rd-line); }
.hist-item:hover { background: var(--rd-gold-wash); }

/* ─── Kirish sahifasi ──────────────────────────────────────────────────── */
body.auth-page-body { background: var(--rd-mist) !important; }

.auth-card {
  border: 1px solid var(--rd-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.05);
  background: #ffffff;
  backdrop-filter: none;
}

.auth-card h1 {
  font-family: var(--rd-display);
  font-weight: 800;
  color: var(--rd-ink);
}

.auth-card h1 .brand-path { color: var(--rd-gold); }

.brand-slogan {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rd-ink-soft);
  font-weight: 600;
  margin-top: 2px;
}

.auth-brandbox {
  text-align: center;
  margin-bottom: 20px;
}

.auth-logo {
  display: block;
  height: 38px;
  width: auto;
  margin: 0 auto 12px;
}

.auth-brandbox h1 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.1;
}

.auth-card input {
  border-radius: 6px !important;
  border-color: var(--rd-line) !important;
}

.auth-card input:focus {
  outline: 2px solid var(--rd-gold) !important;
  border-color: var(--rd-gold) !important;
}

/* ─── Pastki qator ─────────────────────────────────────────────────────── */
.app-footer,
.app-footer-right {
  color: var(--rd-ink-soft);
  background: transparent;
}

/* ─── Jonli kamera / tahlil qoplamasi ──────────────────────────────────── */
.analyzing-overlay { background: rgba(26, 26, 26, 0.72) !important; }
.az-kicker { color: var(--rd-gold); letter-spacing: 0.2em; }

/* ─── Bildirishnomalar: ma'lumot xato kabi ko'rinmasin ─────────────────── */
.toast-ios--info,
.toast-ios--muted,
.toast-ios--green,
.toast-ios--red {
  border-radius: 8px !important;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(26, 26, 26, 0.14) !important;
  border: 1px solid transparent;
}

.toast-ios--info {
  background: var(--rd-gold) !important;
  color: #ffffff !important;
  border-color: var(--rd-gold-deep) !important;
}

.toast-ios--muted {
  background: #ffffff !important;
  color: var(--rd-ink) !important;
  border-color: var(--rd-line) !important;
}

.toast-ios--green {
  background: #2f7d51 !important;
  color: #ffffff !important;
  border-color: #276a44 !important;
}

.toast-ios--red {
  background: #b4442f !important;
  color: #ffffff !important;
  border-color: #983626 !important;
}

/* ─── Pastki qator: klinika kontaktlari ────────────────────────────────── */
.app-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-top: 1px solid var(--rd-line);
  background: #ffffff;
  font-size: 0.68rem;
  color: var(--rd-ink-soft);
}

.app-footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.app-footer-brand strong { color: var(--rd-ink); font-weight: 700; }

.app-footer-mark {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.app-footer-contacts {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.app-footer-contacts a {
  color: var(--rd-gold-deep) !important;
  text-decoration: none;
  font-weight: 600;
}

.app-footer-contacts a:hover { text-decoration: underline; }

.app-footer-right {
  color: var(--rd-ink-soft);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .app-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
  .app-footer-contacts { gap: 4px 12px; }
}

/* Ikkinchi darajali amal — oq, oltin chegara (asosiy amal oltin qoladi) */
.btn-new-side,
.js-new-analysis {
  background: #ffffff !important;
  color: var(--rd-gold-deep) !important;
  border: 1px solid var(--rd-gold) !important;
  font-weight: 600;
}

.btn-new-side:hover,
.js-new-analysis:hover {
  background: var(--rd-gold) !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIPOGRAFIKA VA ORALIQLAR — sayqal qatlami
   Muammo: to'rt xil shrift aralashgan edi (Inter, Montserrat, yuklanmagan
   Outfit va Arial), va deyarli har element 700–800 qalinlikda — matn "jirniy"
   ko'rinardi. Oraliqlar 3–8px bo'lgani uchun kartalar bir-biriga tegib turardi.
   Bu yerda bitta shrift oilasi va bitta qalinlik/oraliq shkalasi belgilanadi.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Bitta shrift oilasi ──────────────────────────────────────────────── */
body,
button,
input,
select,
textarea,
.btn,
.btn-small,
.btn-icon,
.btn-referral,
.btn-history,
.btn-auth-logout,
.status-pill,
.case-pill,
.lab-select,
.micro-select,
.src-tab,
.hist-drawer,
.upload-main,
.wb-flow li {
  font-family: var(--ios-font);
}

.header-title,
.card-title,
.result-title,
.hist-head h2,
.auth-card h1,
h1, h2, h3 {
  font-family: var(--rd-display);
}

/* Raqamlar — namuna ID, kattalashtirish, soat */
.lab-mono,
.micro-total-value,
#wbTime,
.header-id-search input,
#accSampleId {
  font-family: var(--lab-mono);
}

/* ─── Qalinlik shkalasi ────────────────────────────────────────────────────
   400 — kiritilgan qiymat va matn
   500 — ikkinchi darajali yozuv
   600 — yorliq, tugma, karta sarlavhasi
   700 — faqat brend nomi
   ──────────────────────────────────────────────────────────────────────── */
.acc-form input,
.acc-form select,
.acc-form textarea,
.lab-select,
.micro-select,
.header-id-search input,
.hist-search input,
.upload-hint-line,
.referral-hint,
.field-hint,
.info-msg {
  font-weight: 400 !important;
}

.acc-form label > span,
.card-title,
.src-tab.active,
.btn,
.btn-small,
.btn-referral,
.btn-history,
.btn-auth-logout,
.btn-ziyrakai,
.btn-green,
.btn-red,
.upload-main,
.status-pill,
.case-pill,
.preview-count,
.wb-flow li.on,
.wb-flow li.done,
.result-title {
  font-weight: 600 !important;
}

.src-tab,
.wb-flow li,
.daftar-more > summary {
  font-weight: 500 !important;
}

.header-title { font-weight: 700 !important; }

/* Yorliqlar: kichik, katta harf, lekin qalin emas */
.acc-form label > span {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--rd-ink-soft);
  text-transform: uppercase;
}

.acc-form input,
.acc-form select {
  font-size: 0.9rem;
}

.card-title {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

/* ─── Oraliqlar (faqat keng ekran; telefon mobile.css da) ──────────────── */
@media (min-width: 901px) {
  .main-layout {
    padding: 14px 16px !important;
    gap: 14px !important;
  }

  .left-panel,
  .right-panel,
  .center-panel {
    padding: 14px !important;
    gap: 12px !important;
  }

  .left-panel > .card,
  .right-panel > .card {
    padding: 14px 16px !important;
    gap: 10px !important;
  }

  .acc-form {
    gap: 12px 12px !important;
    padding-top: 10px !important;
  }

  .header {
    padding: 10px 18px !important;
    gap: 14px !important;
  }

  .header-status { gap: 10px !important; }

  .workbar {
    padding: 9px 18px !important;
    gap: 16px !important;
  }

  .upload-zone { padding: 22px 16px !important; }

  .capture-head { gap: 10px !important; }

  .src-tabs { gap: 6px !important; }

  .btn-pair,
  .input-row { gap: 10px !important; }
}

/* ─── Yo'llanmadan to'ldirish — ish oqimining birinchi qadami ──────────────
   Ilgari rasm yuklash panelining ostida, ko'rinmaydigan joyda edi. Endi bemor
   kartasining boshida: yo'llanmani suratga oling → maydonlar to'ladi.
   ──────────────────────────────────────────────────────────────────────── */
.referral-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  background: var(--rd-gold-wash);
  border: 1px solid var(--rd-gold-soft);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 2px;
}

.btn-referral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  background: var(--rd-gold) !important;
  border: 1px solid var(--rd-gold) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-size: 0.86rem;
  cursor: pointer;
}

.btn-referral:hover:not(:disabled) {
  background: var(--rd-gold-deep) !important;
  border-color: var(--rd-gold-deep) !important;
}

.btn-referral-icon {
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.9;
}

.referral-hint {
  /* style.css da yonma-yon joylashuv uchun flex:1 1 160px edi — ustunda
     u 160px balandlikka cho'zilib, kartada bo'sh joy qoldirardi */
  flex: 0 0 auto !important;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--rd-gold-deep);
  text-align: center;
}

.referral-hint.is-ok {
  color: #2f6b4f;
  font-weight: 500 !important;
}

.referral-hint.is-err { color: #b4442f; }

.referral-hint.is-busy { color: var(--rd-ink-soft); }


/* Chap ustun: kartalar o'z balandligini oladi, panel esa aylanadi.
   lab-pro.css da rasm kartasi `flex:1 1 auto; min-height:0; overflow:hidden`
   edi — bemor kartasi (yo'llanma bloki bilan) o'sgach, u 78px gacha siqilib,
   rasm yuklash maydoni butunlay ko'rinmay qolardi. */
@media (min-width: 901px) {
  .left-panel > .card,
  .left-panel > .card.card-grow {
    flex: 0 0 auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .left-panel #paneUpload,
  .left-panel #panePhone,
  .left-panel #paneScope {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
  }

  /* Ko'p fayl qo'shilganda ro'yxat panelni cho'zib yubormasin */
  .left-panel #paneUpload.has-files #filePreview {
    flex: 0 0 auto;
    max-height: 220px;
    overflow: hidden;
  }

  .left-panel #paneUpload.has-files .file-list {
    max-height: 176px;
    overflow-y: auto;
  }
}

/* Chap ustunda yo'llanma bloki ixcham: tugma va izoh yonma-yon (joy tejaladi) */
@media (min-width: 901px) {
  .left-panel .referral-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }

  .left-panel .btn-referral {
    width: auto;
    flex: 0 0 auto;
    padding: 9px 14px;
    font-size: 0.8rem;
  }

  .left-panel .referral-hint {
    /* yonma-yon joylashuvda matn qisqarib, o'ralib turishi kerak */
    flex: 1 1 auto !important;
    min-width: 0;
    text-align: left;
    font-size: 0.7rem;
  }
}

/* Sticky "Tahlil boshlash" paneli shaffof edi — aylantirilganda mikroskop
   qatorining ustiga chiqib, matnlar bir-biriga tegib turardi. Endi u o'z foni,
   yuqori chegarasi va soyasi bilan alohida panel bo'lib turadi. */
@media (min-width: 901px) {
  .left-panel .analyze-card {
    background: #ffffff !important;
    border-top: 1px solid var(--rd-line) !important;
    padding: 10px 0 2px !important;
    box-shadow: 0 -10px 14px -8px rgba(26, 26, 26, 0.12) !important;
  }

  /* Oxirgi element sticky panel ostida qolib ketmasin */
  .left-panel { padding-bottom: 4px !important; }

  .left-panel .micro-card { margin-bottom: 2px; }
}

/* Kattalashtirish ko'rsatkichi qora quti edi — yorug' mavzuda begona ko'rinardi */
.left-panel .micro-total-mini {
  background: var(--rd-gold-wash) !important;
  border: 1px solid var(--rd-gold-soft) !important;
  border-radius: 8px !important;
}

.left-panel .micro-total-mini .micro-total-value {
  color: var(--rd-gold-deep) !important;
}

.left-panel .micro-total-mini .micro-total-label {
  color: var(--rd-ink-soft) !important;
}

/* Ish holati ko'rsatkichi ham qora quti edi — yorug' mavzuga moslandi */
.wb-inst {
  background: var(--rd-gold-wash) !important;
  color: var(--rd-gold-deep) !important;
  border: 1px solid var(--rd-gold-soft) !important;
  font-weight: 600 !important;
}

.wb-inst.live {
  background: #eaf4ee !important;
  color: #2f6b4f !important;
  border-color: #cfe4d7 !important;
}

.wb-inst.busy {
  background: #fdf1e6 !important;
  color: #9a5b1f !important;
  border-color: #f0dcc4 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BEMALOL JOYLASHUV — lab-pro.css da chap paneldagi maydonlar 24px balandlik
   va 0.7rem shrift bilan siqib qo'yilgan edi. Ish stansiyasi zich bo'lishi
   kerak, lekin bemor kartasi har kuni to'ldiriladigan forma — u o'qilishi va
   bosilishi qulay bo'lsin.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  :root {
    --col-left: clamp(330px, 26vw, 450px);
    --col-right: clamp(400px, 34vw, 580px);
  }

  .left-panel .acc-form {
    gap: 13px 12px !important;
    padding-top: 10px !important;
  }

  .left-panel .acc-form input,
  .left-panel .acc-form select {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 0.88rem !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
  }

  .left-panel .acc-form label > span {
    font-size: 0.68rem !important;
    margin-bottom: 5px;
  }

  .left-panel .card-title { font-size: 0.68rem !important; }

  .left-panel .lab-select {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 0.88rem !important;
  }

  .left-panel .src-tab {
    padding: 10px 12px !important;
    font-size: 0.82rem !important;
  }

  .left-panel .prio,
  .left-panel .case-pill {
    padding: 5px 11px !important;
    font-size: 0.66rem !important;
  }

  .left-panel .analyze-card .btn-ziyrakai,
  .left-panel .btn {
    min-height: 42px !important;
    height: 42px !important;
    font-size: 0.88rem !important;
  }

  .left-panel .btn-pair .btn {
    min-height: 38px !important;
    height: 38px !important;
  }

  .left-panel .upload-zone { padding: 24px 16px !important; }
}

/* ─── Rang muvozanati ──────────────────────────────────────────────────────
   Fon yashil-kulrang (#f2f6f5) edi va oltin bilan birga loyqa ko'rinardi.
   Iliqroq neytral oltinga yaxshiroq yarashadi; katta oltin yuzalar esa
   yumshatiladi — oltin urg'u bo'lib qolsin, fon bo'lmasin.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --rd-mist: #f6f5f2;
  --rd-mist-2: #faf9f7;
  --rd-line: #e7e4de;
  --rd-gold-wash: #fbf8f1;
  --rd-gold-soft: #ecdfc4;
  --rd-ink-soft: #63615c;
}

.left-panel .referral-row {
  background: var(--rd-gold-wash);
  border-color: var(--rd-gold-soft);
}

/* Bosqich ko'rsatkichi: to'la oltin doira o'rniga yengil urg'u */
.wb-flow li.on {
  background: var(--rd-gold-wash) !important;
  color: var(--rd-gold-deep) !important;
  border-color: var(--rd-gold) !important;
}

/* ─── Klinik rasmlar maydoni ───────────────────────────────────────────────
   Mikroskop kesmalaridan alohida: patolog kesmani bemorning terisini ko'rgan
   holda o'qiydi, shuning uchun ikkala to'plam ham yuboriladi, lekin klinik
   rasm morfologik ko'rikka aralashmaydi.
   ──────────────────────────────────────────────────────────────────────── */
.clinical-zone {
  margin-top: 10px;
  padding: 14px 12px;
  border: 1px dashed var(--rd-gold-soft);
  border-radius: 8px;
  background: var(--rd-gold-wash);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.clinical-zone:hover,
.clinical-zone.drag-active {
  border-color: var(--rd-gold);
  border-style: solid;
}

.clinical-main {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--rd-gold-deep);
}

.clinical-hint {
  margin-top: 3px;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--rd-ink-soft);
}

.clinical-list {
  margin-top: 8px;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  overflow: hidden;
}

.clinical-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: var(--rd-mist-2);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--rd-ink-soft);
}

.clinical-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  font-size: 0.74rem;
  border-top: 1px solid var(--rd-line);
}

.clinical-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Klinik tashxis tanlagich ─────────────────────────────────────────────
   Yo'llanmadagi tashxis avtomatik tanlanadi, shifokor qidiruv orqali
   qo'shimcha tashxis qo'shadi yoki ro'yxatda yo'q nomni qo'lda yozadi.
   ──────────────────────────────────────────────────────────────────────── */
.dx-field { display: block; }

.dx-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rd-ink-soft);
  margin-bottom: 5px;
}

.dx-picker { position: relative; }

.dx-picker input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  background: #fff;
  color: var(--rd-ink);
  font: inherit;
  font-size: 0.88rem;
}

.dx-picker input[type="search"]:focus {
  outline: 2px solid var(--rd-gold);
  outline-offset: 0;
  border-color: var(--rd-gold);
}

.dx-results {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  box-shadow: 0 10px 24px -12px rgba(26, 26, 26, 0.28);
}

.dx-group {
  position: sticky;
  top: 0;
  padding: 6px 10px;
  background: var(--rd-mist-2);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-ink-soft);
}

.dx-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: 0;
  border-top: 1px solid var(--rd-line);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  color: var(--rd-ink);
}

.dx-item:hover,
.dx-item.is-active { background: var(--rd-gold-wash); }

.dx-item.is-on { color: var(--rd-gold-deep); font-weight: 600; }

.dx-item em {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--rd-ink-soft);
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dx-item--free { color: var(--rd-gold-deep); font-weight: 600; }

.dx-empty {
  padding: 10px;
  font-size: 0.76rem;
  color: var(--rd-ink-soft);
}

.dx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.dx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  background: var(--rd-gold-wash);
  border: 1px solid var(--rd-gold-soft);
  border-radius: 20px;
  font-size: 0.74rem;
  color: var(--rd-gold-deep);
}

.dx-chip button {
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  font-size: 0.72rem;
  line-height: 1;
  padding: 2px;
}

.dx-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--rd-ink-soft);
}

/* ── Yakuniy xulosa va ishonchlilik ─────────────────────────────────────── */
/* Shifokor hisobotni ochganda birinchi ko'radigan ikki narsa: tashxis nomi
   va u qanchalik dalilga tayanganini ko'rsatuvchi foiz. Qolgan hamma narsa
   shundan keyin turadi. */

.r-final {
  margin: 14px 0 6px;
  padding: 14px 18px;
  border: 1px solid var(--rd-gold-soft);
  border-left: 4px solid var(--rd-gold);
  border-radius: 10px;
  background: var(--rd-gold-wash);
}

.r-final__tag {
  display: block;
  font-family: var(--rd-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rd-gold-deep);
  margin-bottom: 5px;
}

.r-final__dx {
  display: block;
  font-family: var(--rd-display);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.42;
  color: var(--rd-ink);
}

.r-conf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  padding: 9px 18px 11px;
  border: 1px solid var(--rd-line);
  border-radius: 10px;
  background: var(--rd-mist-2);
}

.r-conf__num {
  font-family: var(--rd-display);
  font-size: 1.24rem;
  font-weight: 700;
  line-height: 1;
  min-width: 3.2rem;
  color: var(--rd-ink);
}

.r-conf__bar {
  flex: 1 1 130px;
  height: 7px;
  min-width: 110px;
  border-radius: 4px;
  background: var(--rd-line);
  overflow: hidden;
}

.r-conf__bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--rd-gold);
}

.r-conf__meta {
  flex: 1 1 100%;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--rd-ink-soft);
}

.r-conf--hi .r-conf__bar i { background: #3f7d5c; }
.r-conf--hi .r-conf__num  { color: #2f6247; }
.r-conf--mid .r-conf__bar i { background: var(--rd-gold); }
.r-conf--lo .r-conf__bar i { background: #b4623a; }
.r-conf--lo .r-conf__num  { color: #96502e; }

@media (max-width: 640px) {
  .r-final__dx { font-size: 0.98rem; }
  .r-conf { padding: 9px 14px 11px; }
}

/* ── Xizmat holati chizig'i ─────────────────────────────────────────────── */
/* Tahlil xizmati ishlamayotganini shifokor rasm yuklashdan OLDIN bilsin. */

.service-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 10px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
  color: #7a2e12;
  background: #fdece4;
  border-bottom: 1px solid #f0c3ab;
}

/* ── Klinik rasm eskizlari ──────────────────────────────────────────────── */
/* Ilgari faqat fayl nomi chiqardi — shifokor rasm qabul qilinganini ko'rmasdi. */

.clinical-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 2px;
}

.clinical-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rd-line);
  background: var(--rd-mist-2);
}

.clinical-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clinical-thumb .btn-x {
  position: absolute;
  top: 3px;
  right: 3px;
  padding: 2px 6px;
  font-size: 0.7rem;
  line-height: 1;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
}

.clinical-thumb .clinical-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 5px;
  font-size: 0.6rem;
  line-height: 1.3;
  color: #fff;
  background: rgba(26, 26, 26, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Yo'llanma namunasi tugmasi ─────────────────────────────────────────── */
/* Klinikalar standart varaqni chop etib to'ldiradi — OCR uni bexato o'qiydi. */
.referral-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-referral--doc { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.referral-hint { flex-basis: 100%; }
.referral-hint a { color: var(--rd-gold-deep); font-weight: 600; text-decoration: underline; }


/* ── Anamnez maydoni ───────────────────────────────────────────────────── */
#accHistory {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.45;
  padding: 8px 10px;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  background: #fff;
}
.acc-hint { display: block; margin-top: 4px; font-size: 0.66rem; color: var(--rd-ink-soft); }