/* ===========================================================
   USTAKALAR.UZ — umumiy uslublar

   Ranglar spec 7-bo'limidagi xarita ranglariga bog'langan:
   ko'k = bitgan, yashil = ishda, sariq = bron, qizil = xavfli.
   Shu ranglar butun saytda bir xil ma'noni bildiradi.

   Animatsiyalar: harakat ma'no tashishi kerak — element qayerdan
   kelgani va nima o'zgarganini ko'rsatadi. Bezak uchun harakat yo'q.
   Tizimda "harakatni kamaytirish" yoqilgan bo'lsa hammasi o'chadi
   (fayl oxiridagi prefers-reduced-motion).
   =========================================================== */

:root {
  /* Palitra logotipdan olingan: zangori asos, to'q sariq urg'u.
     Status ranglari (quyida) spec 7-bo'limidan — ular o'zgarmaydi,
     chunki xaritadagi ma'noni bildiradi. */
  --brand: #1B3A6B;
  --brand-dark: #132B51;
  --brand-light: #2D5A9E;
  --brand-deep: #0B1C33;
  --brand-wash: #EEF3FA;

  --accent: #D97733;
  --accent-dark: #BE5F1F;
  --accent-wash: #FDF3EB;

  --status-open: #0891B2;
  --status-booked: #C27803;
  --status-in_progress: #057A55;
  --status-completed: #1A56DB;
  --status-risk: #E02424;

  --text: #0F172A;
  --text-strong: #1E293B;
  --muted: #64748B;
  --faint: #94A3B8;

  --surface: #FFFFFF;
  --bg: #F6F8FB;
  --border: #E6EAF0;
  --border-strong: #CBD5E1;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  /* Qatlamli soyalar — bitta qattiq soyadan ko'ra tabiiyroq */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .05);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, .04), 0 10px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, .05), 0 18px 40px rgba(15, 23, 42, .12);
  --shadow-brand: 0 8px 24px rgba(27, 58, 107, .26);

  /* Bitta egri chiziq butun saytda — harakat bir xil "his" beradi */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Ikki xil tezlik:
     --fast va --normal — bosish va hoverga javob. Bular TEZ bo'lishi
     kerak, aks holda interfeys og'ir va kechikayotgandek tuyuladi.
     --enter va --enter-slow — elementning paydo bo'lishi. Bular
     sekinroq: ko'z harakatni kuzatib ulgursin. */
  --fast: .18s;
  --normal: .3s;
  --enter: .65s;
  --enter-slow: 1.1s;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Mobil pastki menyu kontentni yopib qolmasligi uchun */
  padding-bottom: 76px;
}

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}
a:hover { color: var(--brand-dark); text-decoration: underline; }

h1, h2, h3 {
  margin: 0 0 12px;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -.02em;
}
h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 20px; font-weight: 750; }
h3 { font-size: 16px; font-weight: 700; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; } .mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; }
.mt24 { margin-top: 24px; } .mb0 { margin-bottom: 0; } .mb8 { margin-bottom: 8px; }
.mb16 { margin-bottom: 16px; } .mb24 { margin-bottom: 24px; }

.row { display: flex; gap: 12px; align-items: center; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* --- Kirish animatsiyalari -------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.94); }
  60%  { transform: scale(1.015); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes shimmer {
  to { background-position: 200% 0; }
}
@keyframes growBar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

main { animation: rise var(--enter) var(--ease-out) both; }

/* Ro'yxatdagi elementlar ketma-ket chiqadi — ko'z tartibni ilg'ab oladi.
   JS kerak emas: :nth-child bo'yicha kechikish beriladi. */
.grid > *, .stack > * { animation: rise var(--enter) var(--ease-out) both; }
.grid > *:nth-child(1), .stack > *:nth-child(1) { animation-delay: .04s; }
.grid > *:nth-child(2), .stack > *:nth-child(2) { animation-delay: .12s; }
.grid > *:nth-child(3), .stack > *:nth-child(3) { animation-delay: .20s; }
.grid > *:nth-child(4), .stack > *:nth-child(4) { animation-delay: .28s; }
.grid > *:nth-child(5), .stack > *:nth-child(5) { animation-delay: .36s; }
.grid > *:nth-child(6), .stack > *:nth-child(6) { animation-delay: .44s; }
.grid > *:nth-child(7), .stack > *:nth-child(7) { animation-delay: .52s; }
.grid > *:nth-child(8), .stack > *:nth-child(8) { animation-delay: .60s; }
.grid > *:nth-child(n+9), .stack > *:nth-child(n+9) { animation-delay: .68s; }

/* --- Yuqori panel ---------------------------------------------------- */

.topbar {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner { display: flex; align-items: center; gap: 16px; height: 64px; }

.logo {
  /* gap: 0 — aks holda flex "USTAKALAR" va ".UZ" ni alohida element deb
     bilib, orasiga ham bo'shliq qo'yadi. Emblema masofasi margin bilan. */
  display: inline-flex; align-items: center; gap: 0;
  font-size: 19px; font-weight: 900; letter-spacing: -.4px;
  color: var(--brand-dark); text-decoration: none;
  transition: transform var(--normal) var(--ease);
}
.logo:hover { text-decoration: none; transform: translateY(-1px); color: var(--brand-dark); }
.logo img { height: 34px; width: auto; display: block; margin-inline-end: 9px; }
/* ".UZ" qismi logotipdagi to'q sariq bilan bir xil */
.logo span { color: var(--accent); }

/* Kirish sahifalaridagi katta logotip */
.logo-full { display: block; margin: 0 auto 4px; width: 190px; max-width: 70%; }

.topnav { display: flex; gap: 2px; margin-inline-start: auto; align-items: center; }
.topnav a {
  position: relative;
  padding: 9px 14px; border-radius: var(--radius-sm);
  color: var(--text-strong); font-weight: 600; font-size: 14px;
  text-decoration: none;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.topnav a:hover { background: #F1F5F9; text-decoration: none; }
.topnav a.active { color: var(--brand); background: var(--brand-wash); }
/* Faol bo'limning tagida chiziq o'sib chiqadi */
.topnav a.active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--brand);
  transform-origin: left;
  animation: growBar .45s var(--ease-out) both;
}

/* --- Pastki menyu (mobil) — spec 3-bo'limdagi 4 ta bo'lim ------------ */

.bottomnav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 12px rgba(15, 23, 42, .05);
}
.bottomnav a {
  position: relative;
  flex: 1; text-align: center; padding: 10px 4px 9px;
  color: var(--muted); font-size: 11px; font-weight: 600;
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}
.bottomnav a.active { color: var(--brand); }
.bottomnav .ico {
  display: block; font-size: 20px; line-height: 1.25;
  transition: transform var(--normal) var(--ease-out);
}
.bottomnav a.active .ico { transform: translateY(-2px) scale(1.12); }
.bottomnav a:active .ico { transform: scale(.92); }

@media (min-width: 860px) {
  body { padding-bottom: 0; }
  .bottomnav { display: none; }
}
@media (max-width: 859px) {
  .topnav { display: none; }
  h1 { font-size: 23px; }
}

/* --- Kartalar --------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: box-shadow var(--normal) var(--ease),
              transform var(--normal) var(--ease);
}
.card + .card { margin-top: 12px; }
.card-tight { padding: 12px; }

/* Bosiladigan kartalar — ko'tariladi */
a.card:hover, label.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); }
/* Status kartalari: mijozda 4 ta, ustada 5 ta — ikkalasi ham bir qatorga
   sig'ishi uchun qattiq ustun soni emas, moslashuvchan setka */
.grid-stats { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
@media (max-width: 720px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* --- Status belgisi --------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.6;
  white-space: nowrap;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55);
}

/* --- Tugmalar --------------------------------------------------------- */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 19px; border-radius: 12px; border: 1px solid transparent;
  background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-brand);
  transition: transform var(--fast) var(--ease),
              box-shadow var(--normal) var(--ease),
              background var(--fast) var(--ease);
}
.btn:hover {
  background: var(--brand-dark); color: #fff; text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(27, 58, 107, .32);
}
.btn:active { transform: translateY(0) scale(.985); box-shadow: var(--shadow-xs); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Bosilganda to'lqin — bosish sezilib tursin */
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.45), transparent 60%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.btn:active::after { opacity: 1; transition-duration: 0s; }

.btn-ghost {
  background: var(--surface); color: var(--text-strong);
  border-color: var(--border-strong); box-shadow: var(--shadow-xs);
}
.btn-ghost:hover {
  background: #F8FAFC; color: var(--text-strong);
  box-shadow: var(--shadow); border-color: var(--muted);
}
.btn-accent {
  background: var(--accent);
  box-shadow: 0 8px 24px rgba(217, 119, 51, .3);
}
.btn-accent:hover {
  background: var(--accent-dark);
  box-shadow: 0 10px 28px rgba(217, 119, 51, .38);
}

.btn-danger { background: var(--status-risk); box-shadow: 0 8px 24px rgba(224,36,36,.26); }
.btn-danger:hover { background: #B91C1C; box-shadow: 0 10px 28px rgba(224,36,36,.32); }
.btn-success { background: var(--status-in_progress); box-shadow: 0 8px 24px rgba(5,122,85,.26); }
.btn-success:hover { background: #046C4A; box-shadow: 0 10px 28px rgba(5,122,85,.32); }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.btn-block { width: 100%; }

/* --- Formalar --------------------------------------------------------- */

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 13px; font-weight: 650;
  color: #334155; margin-bottom: 6px;
}
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=tel], .field input[type=number], .field input[type=file],
.field select, .field textarea, .input {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: 12px;
  font-size: 15px; font-family: inherit; color: var(--text);
  background: #FBFCFE;
  transition: border-color var(--fast) var(--ease),
              background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.field textarea { min-height: 100px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover, .input:hover {
  border-color: var(--border-strong);
}
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  outline: none; border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 4px rgba(27, 58, 107, .14);
}
.field .help { font-size: 12px; color: var(--faint); margin-top: 5px; }
.field .error {
  font-size: 12.5px; color: var(--status-risk); margin-top: 5px; font-weight: 600;
  animation: slideDown .45s var(--ease-out) both;
}
.field-error input, .field-error select, .field-error textarea { border-color: var(--status-risk); }
.field-error input:focus { box-shadow: 0 0 0 4px rgba(224, 36, 36, .12); }

.checkline { display: flex; align-items: center; gap: 9px; font-size: 14px; }

/* --- Kasb tanlash ---------------------------------------------------
   Bitta usta bir nechta kasbni biladi (santexnik ham kafel teradi),
   shuning uchun bitta tanlov emas — bosiladigan yorliqlar to'plami.
   Oddiy katakcha ro'yxati uzun va bosish nishoni kichkina bo'lardi. */
.field #id_categories {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px;
}
.field #id_categories > div { margin: 0; }
.field #id_categories label {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; padding: 9px 15px;
  border: 1.5px solid var(--border); border-radius: 999px;
  background: #FBFCFE; color: var(--text-strong);
  font-size: 14px; font-weight: 600; line-height: 1.2;
  cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: border-color var(--fast) var(--ease),
              background var(--fast) var(--ease),
              color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.field #id_categories label:hover { border-color: var(--border-strong); }
.field #id_categories input { accent-color: var(--brand); }

/* :has() yo'q brauzerlarda katakchalar odatdagidek ko'rinib turadi —
   aks holda tanlanganini bilib bo'lmay qolardi */
@supports selector(:has(*)) {
  .field #id_categories input {
    position: absolute; opacity: 0; width: 0; height: 0;
  }
  .field #id_categories label:has(input:checked) {
    background: var(--brand); border-color: var(--brand); color: #fff;
    box-shadow: 0 2px 8px rgba(27, 58, 107, .22);
  }
  .field #id_categories label:has(input:focus-visible) {
    outline: none; box-shadow: 0 0 0 4px rgba(27, 58, 107, .18);
  }
}
.checkline input { width: 17px; height: 17px; accent-color: var(--brand); }

/* --- Xabarlar --------------------------------------------------------- */

.alert {
  padding: 13px 16px; border-radius: 12px; margin-bottom: 14px;
  font-size: 14px; font-weight: 500; border: 1px solid;
  animation: slideDown .45s var(--ease-out) both;
}
.alert-success { background: #F0FDF4; color: #065F46; border-color: #A7F3D0; }
.alert-error   { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
.alert-warning { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
.alert-info    { background: #EFF6FF; color: #1E40AF; border-color: #BFDBFE; }

/* --- Avatar ----------------------------------------------------------- */

.avatar {
  width: 44px; height: 44px; border-radius: 14px; flex: none;
  object-fit: cover; background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: #475569; font-size: 17px;
  box-shadow: var(--shadow-xs);
}
.avatar-lg {
  width: 80px; height: 80px; border-radius: 24px; font-size: 31px;
  box-shadow: var(--shadow-md);
}
.avatar-sm { width: 30px; height: 30px; border-radius: 10px; font-size: 13px; }

/* --- Obyekt kartasi --------------------------------------------------- */

.job-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); display: block; color: inherit;
  transition: box-shadow var(--normal) var(--ease),
              transform var(--normal) var(--ease),
              border-color var(--normal) var(--ease);
}
.job-card:hover {
  box-shadow: var(--shadow-lg); text-decoration: none; color: inherit;
  transform: translateY(-3px); border-color: #DDE4EE;
}
.job-card .thumb,
.job-card .thumb-empty { height: 158px; width: 100%; display: block; overflow: hidden; }
.job-card .thumb {
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.job-card:hover .thumb { transform: scale(1.05); }
.job-card .thumb-empty {
  background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; color: #CBD5E1;
}
.job-card .body { padding: 14px 15px 16px; }
.job-card .title {
  font-weight: 700; font-size: 15px; margin: 8px 0 4px;
  transition: color var(--fast) var(--ease);
}
.job-card:hover .title { color: var(--brand); }

/* Rasmni kesib turuvchi quti — zoom tashqariga chiqmasin */
.job-card > a, .job-card picture { display: block; overflow: hidden; }

/* --- Progress --------------------------------------------------------- */

.bar {
  height: 8px; background: #EDF1F6; border-radius: 99px; overflow: hidden;
}
.bar > span {
  display: block; height: 100%; border-radius: 99px; background: var(--brand);
  transform-origin: left;
  animation: growBar var(--enter-slow) var(--ease-out) both;
  animation-delay: .25s;
}

/* --- Media galereyasi ------------------------------------------------- */

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 11px; }
.media-grid img, .media-grid video {
  width: 100%; height: 145px; object-fit: cover;
  border-radius: 12px; background: #0F172A; display: block;
  box-shadow: var(--shadow-xs);
  transition: transform var(--normal) var(--ease),
              box-shadow var(--normal) var(--ease);
}
.media-grid a:hover img {
  transform: scale(1.03); box-shadow: var(--shadow-md);
}

/* --- Bosqichlar ------------------------------------------------------- */

.stage { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; }
.stage + .stage { border-top: 1px solid var(--border); }
.stage .mark {
  width: 23px; height: 23px; border-radius: 50%; flex: none; margin-top: 2px;
  border: 2px solid var(--border-strong); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff;
  transition: background var(--normal) var(--ease),
              border-color var(--normal) var(--ease),
              transform var(--fast) var(--ease);
}
.stage .mark:hover { transform: scale(1.12); border-color: var(--status-in_progress); }
.stage.done .mark {
  background: var(--status-in_progress); border-color: var(--status-in_progress);
  animation: popIn .45s var(--ease-out) both;
}
.stage.done > div > div:first-child { color: var(--muted); }

/* --- Chat ------------------------------------------------------------- */

.chat-scroll {
  height: min(60vh, 540px); overflow-y: auto;
  padding: 16px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  scroll-behavior: smooth;
}
.bubble-row {
  display: flex; margin-bottom: 11px; gap: 8px;
  animation: rise .5s var(--ease-out) both;
}
.bubble-row.me { flex-direction: row-reverse; }
.bubble {
  max-width: 74%; padding: 10px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 14.5px; box-shadow: var(--shadow-xs);
}
.bubble-row.me .bubble {
  background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: 0 2px 10px rgba(27, 58, 107, .22);
}
.bubble .when { font-size: 11px; color: var(--faint); margin-top: 3px; }
.bubble-row.me .bubble .when { color: rgba(255, 255, 255, .72); }

/* --- Xarita ----------------------------------------------------------- */

#map {
  height: 540px; border-radius: var(--radius); z-index: 1;
  box-shadow: var(--shadow); overflow: hidden;
  animation: fade var(--enter) var(--ease) both;
}
@media (max-width: 720px) { #map { height: 62vh; } }

/* --- Yulduzlar -------------------------------------------------------- */

.stars { color: #F59E0B; letter-spacing: 1px; font-size: 15px; }
.stars .off { color: #E2E8F0; }

/* --- Bo'sh holat ------------------------------------------------------ */

.empty { text-align: center; padding: 58px 20px; color: var(--muted); }
.empty .ico {
  font-size: 48px; display: block; margin-bottom: 12px; opacity: .4;
  animation: popIn var(--enter) var(--ease-out) both;
}

/* --- Filtr tugmalari -------------------------------------------------- */

.chips {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text-strong);
  text-decoration: none; box-shadow: var(--shadow-xs);
  transition: all var(--fast) var(--ease);
}
.chip:hover {
  text-decoration: none; border-color: var(--border-strong);
  transform: translateY(-1px); box-shadow: var(--shadow);
}
.chip:active { transform: translateY(0) scale(.97); }
.chip.active {
  background: var(--brand-wash); border-color: var(--brand); color: var(--brand);
}

/* --- Statistika ------------------------------------------------------- */

.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 17px;
  box-shadow: var(--shadow);
  transition: transform var(--normal) var(--ease),
              box-shadow var(--normal) var(--ease);
}
a.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat .n { font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.stat .k { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* --- Hero ------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 60%, var(--brand-deep) 100%);
  color: #fff; border-radius: var(--radius-xl); padding: 28px;
  box-shadow: var(--shadow-brand);
}
/* Yumshoq yorug'lik dog'i — tekis gradientga hajm beradi */
.hero::before {
  content: ''; position: absolute; top: -60%; right: -10%;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: -70%; left: -5%;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,119,51,.32), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { color: #fff; margin-bottom: 6px; }
.hero .sub { color: rgba(255, 255, 255, .85); font-size: 15px; }
.hero .btn-ghost {
  background: rgba(255, 255, 255, .14); color: #fff;
  border-color: rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px); box-shadow: none;
}
.hero .btn-ghost:hover {
  background: rgba(255, 255, 255, .24); color: #fff;
  border-color: rgba(255, 255, 255, .45);
}

/* --- Jadval ----------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th, table.tbl td { padding: 12px; text-align: start; border-bottom: 1px solid var(--border); }
table.tbl th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); font-weight: 700;
}
table.tbl tbody tr { transition: background var(--fast) var(--ease); }
table.tbl tbody tr:hover { background: #F8FAFC; }
table.tbl tr:last-child td { border-bottom: 0; }

/* --- Bildirishnoma ---------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 6px;
  background: var(--status-risk); color: #fff;
  border-radius: 99px; font-size: 11px; font-weight: 800;
  box-shadow: 0 2px 6px rgba(224, 36, 36, .4);
  animation: popIn .45s var(--ease-out) both;
}
/* Bildirishnoma belgisi ikonkaning o'ng yuqori burchagida turadi —
   telefon ilovalaridagidek. Ilgari unga joy ko'rsatilmagan edi va u
   matndan keyin oqib, ekranning o'ng chetiga yopishib qolardi. */
.bottomnav a { position: relative; }
.bottomnav .badge {
  position: absolute;
  top: 5px; left: 50%; margin-left: 5px;
  transform: none;
}

.notif-ico {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
}

.notif {
  display: flex; gap: 12px; padding: 14px 0; align-items: flex-start;
  transition: background var(--fast) var(--ease);
}
.notif + .notif { border-top: 1px solid var(--border); }
.notif:hover { background: #F8FAFC; }
.notif.unread {
  background: linear-gradient(90deg, var(--brand-wash), transparent 70%);
  margin-inline: -18px; padding-inline: 18px;
}
.notif.unread:hover { background: linear-gradient(90deg, #DCEAFD, transparent 70%); }

/* --- Menyu ro'yxati ---------------------------------------------------
   Profil sahifasidagi bo'limlar. Oddiy havolalar ro'yxati sifatida
   yomon ko'rinadi: ko'k matn devori, ikonalar oqda osilib qoladi.
   Har bir qator — bosiladigan satr: rangli ikona, qora matn, o'ng
   tomonda strelka. Kartaning chetigacha cho'ziladi.
   ------------------------------------------------------------------- */

/* Keng ekranda plitkalar: qator bo'lsa matn chapda, strelka esa o'ng
   chekkada qolib, orasi bo'm-bo'sh ko'rinadi. Tor ekranda esa aksincha —
   plitkalar siqilib ketadi, shuning uchun u yerda qator qulayroq. */
.menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 13px;
  border: 1px solid var(--border); background: #FCFDFE;
  color: var(--text); text-decoration: none;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              transform var(--normal) var(--ease),
              box-shadow var(--normal) var(--ease);
}
.menu a:hover {
  background: #fff; text-decoration: none; color: var(--text);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.menu a:active { transform: translateY(0); }

.menu .ico {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  transition: transform var(--normal) var(--ease);
}
.menu a:hover .ico { transform: scale(1.08); }

.menu .label { flex: 1; font-weight: 650; font-size: 14.5px; min-width: 0; }
.menu .hint { font-size: 12.5px; color: var(--faint); font-weight: 500; }

/* Plitkada strelka ortiqcha — butun plitka bosiladigani ko'rinib turibdi */
.menu .chev { display: none; }

@media (max-width: 560px) {
  .menu { grid-template-columns: 1fr; gap: 0; margin: 4px -18px -18px; }
  .menu a {
    border: 0; border-radius: 0; background: transparent;
    padding: 13px 18px;
  }
  .menu a + a { border-top: 1px solid var(--border); }
  .menu a:hover { transform: none; box-shadow: none; background: #F8FAFC; }
  .menu .chev {
    display: block;
    color: var(--border-strong); font-size: 20px; line-height: 1; flex: none;
    transition: transform var(--normal) var(--ease), color var(--fast) var(--ease);
  }
  .menu a:hover .chev { transform: translateX(3px); color: var(--muted); }
}

/* --- Yuklanish ko'rsatkichi ------------------------------------------- */

.skeleton {
  background: linear-gradient(90deg, #EDF1F6 25%, #F8FAFC 50%, #EDF1F6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}

/* ===========================================================
   Harakatni kamaytirish

   Tizim sozlamasida shunday belgilangan bo'lsa (vestibulyar
   buzilish, bosh aylanishi), animatsiyalar o'chadi. Interfeys
   to'liq ishlashda qoladi — faqat harakat yo'qoladi.
   =========================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .job-card:hover, a.card:hover, .btn:hover, .chip:hover, a.stat:hover {
    transform: none;
  }
}

/* --- Til almashtirgich -----------------------------------------------
   Uchta qisqa yorliq: UZ / ЎЗ / RU. Ro'yxat (select) emas, chunki
   tanlovlar soni kam va bitta bosishda almashgani qulayroq. */
.tillar {
  display: inline-flex; gap: 2px; flex: none;
  padding: 2px; border-radius: 999px;
  background: rgba(15, 23, 42, .05);
}
.tillar .til {
  border: none; background: none; cursor: pointer;
  padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; font-family: inherit;
  color: var(--muted); letter-spacing: .02em;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.tillar .til:hover { color: var(--text); background: rgba(15, 23, 42, .05); }
.tillar .til.tanlangan {
  background: var(--surface); color: var(--brand);
  box-shadow: var(--shadow-xs);
}
@media (max-width: 860px) {
  .tillar .til { padding: 5px 8px; font-size: 11px; }
}

/* --- Telefon ekrani uchun tuzatishlar --------------------------------

   Sayt umuman moslashgan edi, lekin ikkita joy amalda noqulay edi.
   Ikkalasi ham faqat tor ekranda bilinadi. */

/* 1. Qidiruv maydoni siqilib qolardi.

   Qatorda matn maydoni, kategoriya tanlagichi va tugma yonma-yon
   turadi. Tanlagichning eni belgilangan, tugma ham qisqarmaydi —
   shuning uchun butun siqilish matn maydoniga tushardi va telefonda
   u 52px ga tushib qolardi: yozilayotgan so'z ko'rinmasdi.

   Yechim eng kam enini belgilash: joy yetmasa qator o'ziga o'zi
   bo'linadi va matn maydoni butun enni oladi. Media so'rov kerak
   emas — qoida har qanday ekranda to'g'ri ishlaydi. */
.row.wrap > .input.grow { min-width: 190px; }

/* 2. Barmoq uchun kichik tugmalar.

   Til almashtirgich tugmalari 24px balandlikda edi. Sichqoncha
   bilan muammo yo'q, barmoq bilan esa tegmay qolinadi va odam
   qayta-qayta uriniб ko'radi.

   pointer: coarse — sensorli ekran. Sichqonchali qurilmada
   tugmalar kattalashmaydi, chunki u yerda kerak emas. */
@media (pointer: coarse) {
  .tillar .til {
    display: inline-flex; align-items: center;
    /* Faqat balandlik oshadi. Enini ham kattalashtirsak, uchta
       tugma yuqori panelga sig'may, sahifa yon tomonga surilib
       qolardi — barmoq uchun esa balandlik muhimroq. */
    min-height: 38px;
  }
  .btn-sm { min-height: 38px; }
  .chip { min-height: 36px; }
}

/* 3. Juda tor ekranlarda (360px va undan kichik) sarlavha yonidagi
   tugmalar sarlavhani siqib qo'ymasin — ular pastga tushadi. */
@media (max-width: 380px) {
  .row-between.wrap > .row { width: 100%; }
  .row-between.wrap > .row > .btn { flex: 1; justify-content: center; }
}

/* 4. Chat: xabar yozish maydoni.

   Qatorda uchta narsa bor — biriktirish tugmasi, matn maydoni va
   "Yuborish". Telefonda matnga atigi 171px qolardi, ya'ni yozilayotgan
   gapning yarmi ko'rinmasdi. Tugma va oraliqlarni qisqartirib,
   bo'shagan joy matnga beriladi. */
@media (max-width: 460px) {
  #send-form { gap: 8px; }
  #send-form .btn { padding-inline: 14px; }
  #send-form label.btn { padding: 9px 10px; }
}

/* --- Haqiqiy telefonga xos tuzatishlar -------------------------------

   Bular brauzerni toraytirib ko'rganda bilinmaydi — faqat telefonda
   chiqadi. */

@media (pointer: coarse) {
  /* iOS Safari kiritish maydonining shrifti 16px dan kichik bo'lsa,
     unga tegilgan zahoti sahifani O'ZI KATTALASHTIRADI. Odam yozib
     bo'lgach qo'li bilan kichraytirishga majbur bo'ladi — har safar.
     16px qilinsa, kattalashtirish bo'lmaydi. */
  /* Tanlagichlar yuqoridagi qoida bilan BIR XIL aniqlikda yozilgan:
     ".field input" dan foydalansak, mavjud ".field input[type=text]"
     qoidasi aniqroq bo'lib ustun chiqardi va matn maydoni 15px da
     qolib ketardi — aynan shunday bo'lgan edi. */
  .field input[type=text], .field input[type=email],
  .field input[type=password], .field input[type=tel],
  .field input[type=number], .field input[type=file],
  .field select, .field textarea, .input,
  input[type=search], input[type=date], input[type=time],
  input[type=datetime-local], textarea {
    font-size: 16px;
  }

  /* Yandex xaritasining o'z qidiruv maydoni. U begona kutubxonaning
     uslubi bilan keladi va o'zimizning qoidalarimizdan kuchliroq
     yozilgan — shuning uchun bu yerda majburlash kerak. Uchinchi
     tomon vidjeti uslubini boshqa yo'l bilan yenga olmaymiz. */
  input[class*="ymaps"] {
    font-size: 16px !important;
  }
}

/* iPhone'ning pastki chizig'i (home indicator) pastki menyuni
   balandroq qiladi. Tana uchun bo'shliq qat'iy 76px edi — shuning
   uchun sahifaning oxirgi bir necha qatori menyu ostida qolardi. */
body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 860px) {
  body { padding-bottom: 0; }
}

/* Telefon brauzerida manzil qatori sahifa aylanganda yashirinadi va
   chiqadi. Oddiy vh eng KATTA holatga qarab hisoblanadi, shuning
   uchun manzil qatori ko'ringanda blok ekrandan chiqib ketadi.
   dvh esa hozirgi holatni oladi. Eski brauzerlar uchun vh qoladi. */
.chat-scroll { height: min(60vh, 540px); }
@supports (height: 1dvh) {
  .chat-scroll { height: min(60dvh, 540px); }
  @media (max-width: 720px) { #map { height: 62dvh; } }
}

/* Android'da havola yoki tugmaga tegilganda kulrang to'rtburchak
   yonib ketadi — yumaloq kartalarda u burchaklardan chiqib turadi.
   O'chiramiz; bosilgani :active orqali baribir bilinadi. */
a, button, label, .chip, .card {
  -webkit-tap-highlight-color: transparent;
}

/* Telefonni yon tomonga burganda iOS shriftni o'zi kattalashtiradi
   va sahifa nisbati buziladi */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* --- Juda tor ekranlar (320px: eski iPhone SE, arzon Android) --------

   Bu enda yuqori panel sig'maydi: logotip 223px, til tugmalari 100px,
   oraliq 16px — jami 339px, bo'sh joy esa 288px. Sahifa yon tomonga
   surilib qolardi.

   Logotip eng ko'p joy oladi, shuning uchun aynan u kichrayadi.
   Til tugmalariga tegmaymiz — ular barmoq uchun allaqachon eng kam
   o'lchamda. */
@media (max-width: 380px) {
  .topbar-inner { gap: 10px; }
  .logo { font-size: 15px; letter-spacing: -.5px; }
  .logo img { height: 27px; margin-inline-end: 6px; }
}

/* Telefonda yuqoridagi menyu yashiringani uchun til tugmalarini
   o'ngga suradigan narsa qolmaydi — ular logotipga yopishib,
   o'ng tomonda bo'sh joy qolardi. */
@media (max-width: 859px) {
  .tillar { margin-inline-start: auto; }
}