:root {
  --primary: #DC2626;
  --primary-light: #FEE2E2;
  --primary-dark: #991B1B;
  --black: #111827;
  --dark-gray: #374151;
  --gray: #6B7280;
  --medium-gray: #9CA3AF;
  --light-gray: #E5E7EB;
  --xlight-gray: #F3F4F6;
  --bg: #F9FAFB;
  --white: #FFFFFF;
  --success: #059669;
  --success-light: #D1FAE5;
  --warning: #D97706;
  --warning-light: #FEF3C7;
  --info: #2563EB;
  --info-light: #DBEAFE;
  --error: #DC2626;
  --error-light: #FEE2E2;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.04);
  --shadow: 0 2px 8px rgba(0,0,0,0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--black);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.rtl { direction: rtl; }

a { color: var(--primary); text-decoration: none; }
a:hover { opacity: 0.85; }

h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.3px; }
h2 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
h3 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }

/* Topbar */
.topbar {
  background: var(--primary);
  color: #fff;
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(220,38,38,0.18);
}
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #fff;
  padding: 3px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.brand-mark img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}
.brand-text strong { display: block; font-size: 15px; line-height: 1; font-weight: 800; }
.brand-text small { display: block; font-size: 11px; opacity: 0.7; }

.top-nav {
  display: flex;
  flex-wrap: wrap;              /* admin/student_admin carry 6 items — wrap instead
                                   of pushing lang/user menu off-screen on tablets */
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
}
.top-nav a {
  color: rgba(255,255,255,0.85);
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.15s;
}
.top-nav a:hover { background: rgba(255,255,255,0.12); color: #fff; }
.top-nav a.active { background: rgba(255,255,255,0.22); color: #fff; }

.lang-picker { display: flex; gap: 4px; }
.lang-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  font-size: 16px;
  transition: transform 0.15s;
}
.lang-btn:hover { transform: scale(1.1); }
.lang-btn.active { background: #fff; }

/* Language selector dropdown */
.lang-select { position: relative; outline: none; }
.lang-select-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  transition: background 0.15s, transform 0.15s, border-color 0.15s;
  min-width: 110px;
}
.lang-select-toggle:hover {
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-1px);
}
.lang-select-toggle .flag { font-size: 18px; line-height: 1; }
.lang-select-toggle .lang-name { white-space: nowrap; }
.lang-select-toggle .chevron {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.85;
  transition: transform 0.2s;
}
.lang-select:focus-within .lang-select-toggle .chevron,
.lang-select:hover .lang-select-toggle .chevron { transform: rotate(180deg); }

.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 180px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.06);
  padding: 14px 6px 6px 6px;
  margin-top: 0;
  display: none;
  z-index: 200;
  animation: lang-pop 0.18s ease-out;
}
@keyframes lang-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
body.rtl .lang-dropdown { right: auto; left: 0; }
.lang-select:focus-within .lang-dropdown,
.lang-select:hover .lang-dropdown { display: block; }

.lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #1f2937;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.lang-option:hover { background: #f3f4f6; }
.lang-option.active {
  background: linear-gradient(135deg, #DC2626, #EF4444);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(220,38,38,0.3);
}
.lang-option .flag { font-size: 22px; line-height: 1; }
.lang-option .lang-text { flex: 1; }
.lang-option .check { font-weight: 700; opacity: 0.95; }

/* Auth-page variant: light surface so it stands out on the page background */
.lang-select.auth .lang-select-toggle {
  background: rgba(255,255,255,0.92);
  color: #1f2937;
  border-color: rgba(31,41,55,0.08);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.lang-select.auth .lang-select-toggle:hover {
  background: #fff;
  border-color: rgba(220,38,38,0.3);
}
.lang-select.auth .lang-select-toggle .chevron { opacity: 0.6; }

/* Main */
.main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  padding-bottom: 80px;
}

@media (max-width: 768px) {
  .topbar-inner { padding: 0 16px; }
  .main { padding: 16px; padding-bottom: 90px; }
}

/* Desktop nav ↔ bottom-tab nav switch. Raised to 900px: admin / student_admin
   carry 6 topbar items (Dashboard, Talabalar, Agentlar, Tyutorlar, Buxgalterlar,
   Sozlamalar) that need ~940px and otherwise overflow the bar on tablet widths.
   Below 900px everyone gets the bottom-tab nav instead. */
@media (max-width: 900px) {
  .top-nav { display: none; }
  .main { padding-bottom: 90px; }
}

/* Bottom tabs (mobile) */
.bottom-tabs {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--light-gray);
  z-index: 100;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}
.bottom-tabs a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--medium-gray);
}
.bottom-tabs a.active { color: var(--primary); }
.bottom-tabs .tab-ico { font-size: 18px; line-height: 1; }
/* Show the bottom-tab nav below 900px. MUST come AFTER the base `.bottom-tabs
   { display:none }` above, or the later base rule (same specificity) wins and
   the mobile nav disappears. */
@media (max-width: 900px) {
  .bottom-tabs { display: flex; }
}
/* Ensiz ekran: 7 band yozuvlari sig'maydi ("Boshqaruv paneli", "Xorijiy bo'lim"
   ikki qatorga sinardi) — faqat IKONLAR ko'rinadi, yozuvlar vizual yashirinadi
   (screen-reader uchun matn saqlanadi). */
@media (max-width: 640px) {
  .bottom-tabs a { position: relative; padding: 12px 2px; gap: 0; }
  .bottom-tabs a > span:not(.tab-ico) {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  /* Ikonlar yozuvsiz qolgani uchun kattaroq — barmoq bilan bosish oson. */
  .bottom-tabs .tab-ico { font-size: 25px; }
  .bottom-tabs .tab-ico .icon { width: 26px; height: 26px; }
}

/* Page header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.page-header h1 { color: var(--black); }
.page-header p { color: var(--gray); font-size: 13px; margin-top: 2px; }
.page-header .header-badge {
  background: var(--primary);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 800;
}
.back-link { color: var(--gray); font-size: 12px; font-weight: 600; display: inline-block; margin-bottom: 6px; }
.header-actions { display: flex; gap: 8px; }

/* Buttons */
.btn-primary, .btn-outline, .btn-danger, .btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.15s;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(220,38,38,0.25); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220,38,38,0.3); opacity: 1; }
.btn-outline { background: #fff; color: var(--black); border: 1px solid var(--light-gray); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); opacity: 1; }
.btn-danger { background: var(--error-light); color: var(--error); }
.btn-danger:hover { background: var(--error); color: #fff; opacity: 1; }
.btn-success { background: var(--success); color: #fff; box-shadow: 0 2px 6px rgba(5,150,105,0.25); }
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(5,150,105,0.3); opacity: 1; }
.block { width: 100%; display: block; margin-top: 12px; }

/* Metrics grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.metric-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
  border-left: 3px solid var(--accent, var(--primary));
  transition: transform 0.15s, box-shadow 0.15s;
  color: var(--black);
}
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); opacity: 1; }
.metric-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, var(--primary)) 14%, transparent);
  color: var(--accent, var(--primary));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 12px;
}
.metric-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 4px;
}
.metric-label { font-size: 12px; color: var(--gray); font-weight: 500; }

/* Quick actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.quick-btn {
  background: #fff;
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  color: var(--dark-gray);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s;
}
.quick-btn:hover { transform: translateY(-2px); opacity: 1; }
.quick-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}

/* Block sections */
.block { margin-top: 24px; }
.block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.block-head h2 { margin-bottom: 0; }
.block-head a { font-size: 12px; font-weight: 600; }

/* Card */
.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 8px;
}
.card.wide { grid-column: 1 / -1; }
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/* Conv row */
.conv-row {
  display: flex;
  border-bottom: 1px solid var(--xlight-gray);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.conv-row > div {
  flex: 1;
  text-align: center;
  border-right: 1px solid var(--light-gray);
}
.conv-row > div:last-child { border-right: 0; }
.conv-row strong { display: block; font-size: 22px; font-weight: 800; color: var(--black); }
.conv-row span { font-size: 11px; color: var(--gray); }

/* Funnel rows / Bar rows */
.funnel-list { display: flex; flex-direction: column; gap: 10px; }
.funnel-row, .bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.funnel-left {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 180px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dark-gray);
}
.funnel-row strong, .bar-row strong { width: 50px; text-align: right; font-size: 13px; font-weight: 700; }
.bar-row { margin-bottom: 10px; }
.bar-row .flag { font-size: 18px; }
.bar-row .bar-name { width: 100px; font-size: 13px; font-weight: 500; color: var(--dark-gray); }
.bar-row small { color: var(--gray); font-size: 11px; min-width: 70px; text-align: right; }

/* Country flag images (country_flag() -> <img>). Replaces emoji flags that don't
   render on Windows / in PDFs. Works inline wherever {{ ...flag }} is printed. */
.flag-img {
  display: inline-block;
  width: 22px;
  height: auto;
  vertical-align: -3px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  object-fit: cover;
}
.flag-unknown { box-shadow: none; font-size: 16px; line-height: 1; }
.bar-row .flag .flag-img { vertical-align: middle; }

.bar {
  flex: 1;
  height: 8px;
  background: var(--xlight-gray);
  border-radius: 4px;
  overflow: hidden;
}
.bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
}
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}

/* Row card / Student card */
.row-card, .student-card, .debt-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--black);
  position: relative;
  overflow: hidden;
}
.row-card:hover, .student-card:hover, .debt-card:hover { box-shadow: var(--shadow); opacity: 1; }
.row-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}
.row-avatar.small { width: 32px; height: 32px; font-size: 13px; }
.row-avatar.primary { background: var(--primary-light); color: var(--primary); }
.row-avatar { overflow: hidden; }
.row-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.row-body, .student-body { flex: 1; min-width: 0; }
.row-body strong, .student-body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-body small, .student-body small {
  display: block;
  font-size: 11px;
  color: var(--gray);
  margin-top: 2px;
}
.muted { color: var(--medium-gray) !important; }

.priority-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}

/* Karta ichidagi amal tugmalari (Ko'rish / Tiklash / O'chirish) — desktop: o'ngda ixcham. */
.card-actions { flex: none; gap: 8px; align-items: center; }

/* ── Talaba/agent kartalari — MOBIL: ensiz ekranda elementlar wrap qiladi.
   Aks holda tugmalar kartadan tashqariga chiqib (overflow:hidden kesib), matn
   ustuni harfma-harf ezilib qolardi (Faol va Nofaol ro'yxatlari). ── */
@media (max-width: 640px) {
  .row-card, .student-card, .debt-card { flex-wrap: wrap; }
  /* Matn ustuni avatar yonida to'liq kenglikni oladi. */
  .row-body, .student-body { flex: 1 1 calc(100% - 60px); }
  /* Bosqich belgisi (Faol ro'yxat) o'z qatoriga tushadi, matn hizosida. */
  .student-card .step-badge {
    flex-basis: 100%;
    align-self: flex-start;
    width: max-content;
    max-width: 100%;
    margin-inline-start: 54px;   /* avatar (42px) + gap (12px) hizosi */
  }
  /* Amal tugmalari to'liq qatorga tushib, teng bo'linadi. */
  .student-card .card-actions,
  .row-card .card-actions,
  .debt-card .card-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
    margin-inline-start: 0;
  }
  .card-actions .btn-outline,
  .card-actions .btn-danger,
  .card-actions .btn-primary,
  .card-actions form { flex: 1 1 auto; }
  .card-actions form .btn-outline,
  .card-actions form .btn-danger { width: 100%; }
  .card-actions .btn-outline,
  .card-actions .btn-danger,
  .card-actions .btn-primary {
    justify-content: center;
    text-align: center;
    padding: 8px 10px;
    font-size: 12.5px;
    white-space: nowrap;
  }
}

/* ── Sozlamalar / detal bloklari — MOBIL. detail-list ikki ustunli grid edi
   (max-content 1fr): uzun yorliq qiymat ustunini ezib, qiymatlar (email,
   pasport) harfma-harf sinardi; simple-table esa gorizontal toshib ketardi. ── */
@media (max-width: 640px) {
  .detail-list { grid-template-columns: 1fr; gap: 2px 0; }
  .detail-list dt { margin-top: 10px; }
  .detail-list dt:first-of-type { margin-top: 0; }
  .detail-list dd { overflow-wrap: anywhere; }
  .payment-summary { grid-template-columns: 1fr; }
  .pay-stat strong { font-size: 19px; }
}

/* Wide financial/settings tables scroll inside their card. Raised from 640px to
   900px so the 9-column payment_review table (and others) scroll on tablet
   portrait (641-900px) instead of overflowing the page. */
@media (max-width: 900px) {
  .card .simple-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .card .simple-table th,
  .card .simple-table td { white-space: nowrap; }
}

/* Status badge */
.status-badge {
  padding: 5px 11px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--primary-light);
  color: var(--primary);
}
.status-badge.primary { background: var(--primary-light); color: var(--primary); }
/* Receipt statuses: pending=amber (Tekshiruvda), approved=green (Tasdiqlangan),
   rejected=red (Qaytarilgan). Used in payment_review list + payment detail. */
.status-badge.status-pending  { background: var(--warning-light); color: #92400E; }
.status-badge.status-approved { background: var(--success-light); color: #065F46; }
.status-badge.status-rejected { background: var(--error-light);   color: var(--error); }

.priority-pill {
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

/* Filter bar */
.filter-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.search-input, .select, .input, input[type=text], input[type=number], input[type=email],
input[type=tel], input[type=date], input[type=password], input[type=file], textarea, select {
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--black);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input:focus, .select:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}
.search-input { flex: 1; min-width: 200px; }
.select { min-width: 150px; }

/* Kanban */
.kanban {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 4px 24px;
  scroll-snap-type: x proximity;
  scroll-padding: 16px;
  scrollbar-color: var(--light-gray) transparent;
  scrollbar-width: thin;
}
.kanban::-webkit-scrollbar { height: 10px; }
.kanban::-webkit-scrollbar-track { background: transparent; }
.kanban::-webkit-scrollbar-thumb {
  background: var(--light-gray);
  border-radius: 999px;
}
.kanban::-webkit-scrollbar-thumb:hover { background: var(--medium-gray); }
.kanban-col {
  flex: 0 0 280px;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(17,24,39,0.04);
  border: 1px solid var(--light-gray);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.15s, transform 0.15s;
}
.kanban-col:hover {
  box-shadow: 0 8px 24px rgba(17,24,39,0.06);
}
.kanban-col::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent, var(--primary));
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  opacity: 0.85;
}
.kanban-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.kanban-head .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kanban-head strong {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--dark-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.count-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
}
.kanban-pct {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--medium-gray);
  text-align: right;
  margin-bottom: 12px;
  margin-top: 4px;
  letter-spacing: 0.3px;
}
.kanban-items {
  max-height: 540px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: -4px;
  padding: 4px;
}
.kanban-items::-webkit-scrollbar { width: 6px; }
.kanban-items::-webkit-scrollbar-thumb { background: var(--light-gray); border-radius: 999px; }
.kanban-card {
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 12px;
  padding: 12px;
  display: block;
  color: var(--black);
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.kanban-card:hover {
  transform: translateY(-1px);
  border-color: rgba(220,38,38,0.3);
  box-shadow: 0 6px 18px rgba(17,24,39,0.06);
}
.kanban-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.kanban-card-top strong {
  font-size: 13px;
  font-weight: 700;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kanban-card-top small { font-size: 11px; color: var(--gray); }
.kanban-card .muted { font-size: 11px; color: var(--gray); }
.kanban-col .empty {
  text-align: center;
  color: var(--medium-gray);
  font-size: 12px;
  padding: 16px 0;
  margin: 0;
}

/* Detail page */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 14px;
}
.detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
}
.detail-list dt {
  font-size: 12px;
  color: var(--gray);
  font-weight: 500;
  align-self: center;
}
.detail-list dd { font-size: 13px; font-weight: 600; color: var(--black); }

.kpi-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  text-align: center;
}
.kpi-row > div { flex: 1; }
.kpi-row strong { display: block; font-size: 18px; font-weight: 800; }
.kpi-row span { font-size: 10px; color: var(--gray); }

/* Buxgalter stats dashboard: KPI cards (clickable or static) + two-column stat cards. */
.kpi-card {
  --kpi-accent: var(--gray);
  --kpi-tint: var(--xlight-gray);
  flex: 1;
  display: block;
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 18px;
  text-align: start;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.kpi-card:hover {
  border-color: color-mix(in srgb, var(--kpi-accent) 45%, var(--light-gray));
}
/* Semantic accents: pending=amber, approved=green, rejected=red, students=blue. */
.kpi-card--warn { --kpi-accent: var(--warning); --kpi-tint: var(--warning-light); }
.kpi-card--ok   { --kpi-accent: var(--success); --kpi-tint: var(--success-light); }
.kpi-card--bad  { --kpi-accent: var(--error);   --kpi-tint: var(--error-light); }
.kpi-card--info { --kpi-accent: var(--info);    --kpi-tint: var(--info-light); }
.kpi-card .kpi-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--kpi-tint);
  color: var(--kpi-accent);
  margin-bottom: 12px;
}
.kpi-card .kpi-ico .icon { width: 21px; height: 21px; }
.kpi-card strong {
  display: block; font-size: 28px; line-height: 1.1; font-weight: 800;
  color: var(--black); letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.kpi-card small { display: block; font-size: 13.5px; color: var(--gray); margin-top: 4px; font-weight: 600; }
.kpi-card em {
  display: block; font-style: normal; font-size: 16px; font-weight: 800;
  color: var(--kpi-accent); margin-top: 8px; font-variant-numeric: tabular-nums;
}

.dx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dx-card {
  background: #fff;
  border: 1px solid #EEF0F3;
  border-radius: var(--radius);
  box-shadow: none;
  padding: 18px;
}
.dx-blockttl {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 14px;
}
.dx-row, .dx-lb {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--xlight-gray);
}
.dx-row:last-child, .dx-lb:last-child { border-bottom: 0; }
.dx-lb .nm { display: flex; flex-direction: column; font-weight: 700; font-size: 14px; }
.dx-lb .nm small { color: var(--medium-gray); font-weight: 500; font-size: 12px; }
.dx-row .rev, .dx-lb .rev { font-weight: 800; color: var(--black); font-size: 14px; }
.dx-empty { color: var(--medium-gray); text-align: center; padding: 18px; font-size: 14px; }

@media (max-width: 820px) { .dx-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .kpi-row { flex-wrap: wrap; }
  .kpi-card { flex: 1 1 45%; padding: 14px; }
  .kpi-card strong { font-size: 24px; }
  .kpi-card em { font-size: 15px; }
}

/* Reusable student profile header (_student_profile_header.html) — IDENTICAL for
   admin/agent (student_detail) and buxgalter (payment detail). Self-contained so it
   looks the same inside a .page-header or a .card. */
.sd-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sd-avatar {
  flex: none;
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FECACA;
}
.sd-avatar.is-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff;
  font-weight: 800; font-size: 24px; border-color: transparent;
}
.sd-head-body { min-width: 0; }
.sd-head-body h1 {
  font-size: 24px; font-weight: 800; line-height: 1.2;
  color: var(--black); letter-spacing: -0.3px;
}
.sd-head-sub { color: var(--gray); font-size: 13.5px; margin-top: 3px; }
.sd-head-sub .flag-img { vertical-align: -3px; }
/* Quick-contact buttons: colored rounded squares (bg colors from _contact_icons.html .cb-*). */
.sd-contacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sd-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  color: #fff; text-decoration: none; transition: filter .15s, transform .12s;
}
.sd-ic:hover { filter: brightness(.9); transform: translateY(-1px); }
.sd-ic .ci { width: 18px; height: 18px; fill: currentColor; }

/* Finance card footer: agent name + contract download button */
.pay-meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--xlight-gray);
}
.pay-meta .agent-name { font-size: 14px; color: var(--gray); }
.pay-meta .agent-name strong { color: var(--black); font-weight: 700; }

/* Approve (green) / reject (red) review actions, side by side */
.pay-review { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.pay-review .review-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.pay-review .rf-label { font-size: 13px; font-weight: 700; color: var(--dark-gray); }
.pay-review .rf-row { display: flex; gap: 10px; align-items: center; }
.pay-review .rf-actions { display: flex; justify-content: flex-end; }
.pay-review input[type="number"] {
  flex: 1; min-width: 0;
  border: 1px solid var(--light-gray); border-radius: var(--radius-sm);
  padding: 10px 12px; font: inherit; font-size: 15px; font-weight: 600; color: var(--black);
}
.pay-review textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--light-gray); border-radius: var(--radius-sm);
  padding: 10px 12px; font: inherit; font-size: 14px; min-height: 80px; resize: vertical;
}
.pay-review input:focus, .pay-review textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}
.pay-review .rf-row .btn-success { flex: none; white-space: nowrap; }

@media (max-width: 700px) {
  .pay-review { grid-template-columns: 1fr; gap: 18px; }
}

.inline-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.inline-form select { flex: 1; }

/* Forms */
.big-form {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--xlight-gray);
  overflow: hidden;
}
.form-section {
  padding: 24px 28px;
  border-bottom: 1px solid var(--xlight-gray);
  position: relative;
}
.form-section:last-of-type { border-bottom: 0; }
.form-section h3 {
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary-light);
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-section h3::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--primary);
  border-radius: 2px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.big-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--dark-gray);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.big-form input, .big-form select, .big-form textarea {
  margin-top: 2px;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--black);
  background: var(--bg);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.big-form input:hover, .big-form select:hover, .big-form textarea:hover {
  border-color: var(--medium-gray);
}
.big-form input:focus, .big-form select:focus, .big-form textarea:focus {
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}
.big-form textarea {
  min-height: 90px;
  resize: vertical;
  font-family: inherit;
}
.form-section > label {
  margin-top: 16px;
}
.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  padding: 18px 28px;
  background: var(--bg);
  border-top: 1px solid var(--xlight-gray);
}
.form-actions .btn-primary, .form-actions .btn-outline {
  padding: 11px 24px;
  font-size: 13px;
}
@media (max-width: 768px) {
  .form-section { padding: 20px 16px; }
  .form-actions { padding: 14px 16px; flex-direction: column-reverse; align-items: stretch; }
  .form-actions .btn-primary, .form-actions .btn-outline { width: 100%; }
  .grid-2 { gap: 14px; }
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th, .table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--xlight-gray);
}
.table th { color: var(--gray); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
body.rtl .table th, body.rtl .table td { text-align: right; }

/* Wide data tables scroll horizontally INSIDE their card instead of pushing the
   whole page sideways on narrow screens. Wrap any bare .table in this. On mobile
   cells stop wrapping so columns keep their width and the wrapper scrolls, rather
   than the columns crushing letter-by-letter. Works at every width. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-wrap > .table { width: 100%; }
@media (max-width: 768px) {
  .table-wrap > .table th, .table-wrap > .table td { white-space: nowrap; }
}

/* Agents */
.agent-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 12px;
}
.agent-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
  color: var(--black);
  display: block;
}
.rank-badge {
  position: absolute;
  top: 14px; right: 14px;
}
.rank-badge > span {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: var(--xlight-gray);
}
.rank-num { font-size: 11px; font-weight: 700; color: var(--gray); }
.agent-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.agent-head strong { display: block; font-size: 15px; font-weight: 700; }
.agent-head small { font-size: 12px; color: var(--gray); }
.agent-stats {
  display: flex;
  background: var(--xlight-gray);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}
.agent-stats > div { flex: 1; border-right: 1px solid var(--light-gray); }
.agent-stats > div:last-child { border-right: 0; }
.agent-stats strong { display: block; font-size: 14px; font-weight: 800; }
.agent-stats span { font-size: 9px; color: var(--medium-gray); font-weight: 600; }

/* Debt */
.debt-card { flex-direction: column; align-items: stretch; gap: 10px; }
.debt-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.debt-info { flex: 1; }
.debt-info strong { display: block; font-size: 14px; }
.debt-info small { font-size: 11px; color: var(--gray); }
.debt-bottom {
  display: flex;
  justify-content: space-between;
}

/* Settings */
.lang-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 999px;
  color: var(--dark-gray);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.lang-pill:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(220,38,38,0.12);
}
.lang-pill .flag { font-size: 18px; line-height: 1; }
.lang-pill.active {
  background: linear-gradient(135deg, #DC2626, #EF4444);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(220,38,38,0.3);
}
.lang-pill .check { margin-left: 4px; opacity: 0.95; }
body.rtl .lang-pill .check { margin-left: 0; margin-right: 4px; }

.payment-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.pay-stat {
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.pay-stat small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray);
  font-weight: 600;
}
.pay-stat strong { font-size: 22px; font-weight: 800; color: var(--black); }
.pay-stat.paid { border-left: 4px solid #10B981; }
.pay-stat.paid strong { color: #059669; }
.pay-stat.debt { border-left: 4px solid #DC2626; }
.pay-stat.debt strong { color: #DC2626; }

.simple-table {
  width: 100%;
  border-collapse: collapse;
}
.simple-table th, .simple-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--light-gray);
  font-size: 13px;
}
body.rtl .simple-table th, body.rtl .simple-table td { text-align: right; }
.simple-table th {
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.simple-table tr:last-child td { border-bottom: none; }
.simple-table tr:hover td { background: var(--xlight-gray); }

/* Pager — payments table (Task 6) */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--gray);
}

.role-card {
  display: flex;
  align-items: center;
  gap: 14px;
}
.role-info { flex: 1; }
.role-info strong { display: block; font-size: 15px; }
.role-info small { font-size: 12px; color: var(--gray); }

/* Empty */
.empty {
  text-align: center;
  color: var(--medium-gray);
  padding: 40px;
  font-size: 14px;
}

/* Toast */
.toast-wrap {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--success);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow);
  animation: slideIn 0.3s;
}
.toast-error { background: var(--error); }
.toast-warning { background: var(--warning); }

/* Yangi bildirishnoma toast'i (app.js yaratadi) — Django `messages` toast'idan
   farqi: bitta qatorli yashil chiziq emas, sarlavha + matn va bosiladigan havola.
   `.toast` dan keyin turgani uchun fon/paddingni ustidan yozadi. */
.toast-notif {
  display: block;
  max-width: 320px;
  padding: 10px 14px;
  background: var(--white);
  color: var(--black);
  border-left: 3px solid var(--primary);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  text-decoration: none;
  font-weight: 400;
}
.toast-notif:hover { background: var(--xlight-gray); }
.toast-notif-title { display: block; font-size: 13px; font-weight: 700; }
.toast-notif-body {
  display: block;
  font-size: 12.5px;
  margin-top: 1px;
  color: var(--dark-gray);
}
body.rtl .toast-notif {
  border-left: 0;
  border-right: 3px solid var(--primary);
  text-align: right;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* RTL adjustments */
body.rtl .top-nav { margin-left: 0; margin-right: auto; }
body.rtl .priority-bar { left: auto; right: 0; }
body.rtl .toast-wrap { right: auto; left: 24px; }

/* ====== AUTH PAGES ====== */
.auth-body {
  min-height: 100vh;
  background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
}
.auth-back {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: rgba(255,255,255,0.92);
  color: #1f2937;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid rgba(31,41,55,0.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
  transition: background 0.15s, transform 0.15s, color 0.15s, border-color 0.15s;
}
.auth-back:hover {
  background: #fff;
  color: var(--primary);
  border-color: rgba(220,38,38,0.3);
  transform: translateX(-2px);
}
.auth-back-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(220,38,38,0.1);
  color: var(--primary);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
body.rtl .auth-back { left: auto; right: 20px; }
body.rtl .auth-back:hover { transform: translateX(2px); }
.auth-brand .brand-mark.big { transition: transform 0.15s; }
.auth-brand .brand-mark.big:hover { transform: scale(1.04); }

.auth-lang-picker {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 50;
  display: flex;
  gap: 6px;
}
.auth-lang-picker .lang-btn {
  background: rgba(255,255,255,0.18);
  width: 36px; height: 36px;
}
body.rtl .auth-lang-picker { right: auto; left: 20px; }

.auth-wrap {
  width: 100%;
  max-width: 880px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;
}
.auth-card {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-brand {
  text-align: center;
  margin-bottom: 28px;
}
.auth-brand .brand-mark.big {
  width: 88px; height: 88px;
  font-size: 28px;
  background: #fff;
  color: #fff;
  margin: 0 auto 16px;
  border-radius: 22px;
  padding: 8px;
  box-shadow: 0 12px 30px rgba(220,38,38,0.25), 0 2px 6px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.04);
}
.auth-brand h1 {
  font-size: 28px;
  margin-bottom: 6px;
  color: var(--black);
}
.auth-brand p {
  color: var(--gray);
  font-size: 14px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-form label > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--dark-gray);
}
.auth-form input {
  padding: 12px 14px;
  font-size: 14px;
}
/* `.auth-card .err` — forma TASHQARISIDAGI xato qutisi (Google tugmasi) ham
   shu ko'rinishda bo'lsin; har `.auth-form` `.auth-card` ichida turadi, ya'ni
   bu qat'iy kengaytma, eski xatolar uslubini yo'qotmaydi. */
.auth-card .err, .auth-form .err {
  color: var(--error);
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}
/* "yoki" ajratkichi — ikki chetida chiziq. Flex + pseudo-elementlar
   yo'nalishga bog'liq emas, shu sabab RTL uchun alohida qoida kerak emas. */
.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: var(--gray);
  font-size: 13px;
}
/* Google tugmasi joylashadigan konteyner. Google uni o'z iframe'ida chizadi —
   ichidagi shrift/balandlikni o'zgartirib bo'lmaydi, lekin kengligi va o'rni
   shu yerdan boshqariladi (JS `renderButton` shu qutining kengligini oladi). */
.gsi-btn {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.gsi-btn > div { max-width: 100%; }
.auth-or::before, .auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--light-gray);
}
.btn-primary.big {
  padding: 14px;
  font-size: 14px;
  margin-top: 8px;
}
.auth-msg {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
}
.auth-msg.success { background: var(--success-light); color: var(--success); }
.auth-msg.error { background: var(--error-light); color: var(--error); }
.auth-bottom {
  text-align: center;
  margin-top: 22px;
  font-size: 13px;
  color: var(--gray);
}
.auth-bottom a {
  color: var(--primary);
  font-weight: 700;
}
.auth-resend { margin-top: 4px; text-align: center; }
.auth-link-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-weight: 700;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
}
.auth-link-btn:hover { opacity: 0.8; }
.verify-code-input {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.4em;
  padding: 14px 12px;
  font-variant-numeric: tabular-nums;
}

.auth-side {
  background: linear-gradient(135deg, #DC2626 0%, #991B1B 50%, #7F1D1D 100%);
  color: #fff;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.auth-side::before {
  content: '';
  position: absolute;
  inset: -30% -30% auto auto;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.auth-side::after {
  content: '';
  position: absolute;
  inset: auto auto -30% -30%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 60%);
  pointer-events: none;
}

.auth-side-visual {
  position: relative;
  width: 280px; height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}
/* Seal — "ADMISSION • BITU UNIVERSITY" curves around the BITU logo (markup in
   _logo_seal.html). Fully self-contained SVG: size, colours and the spinning
   text ring (a SMIL <animateTransform>) all live in the SVG, so it renders and
   animates correctly even if this stylesheet is stale/cached. This rule only
   centres the seal within the side panel. */
.auth-seal {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The "ADMISSION • BITU UNIVERSITY" text ring spins continuously (CSS, so it works
   reliably across browsers; the SVG viewBox centre is 120,120). */
.auth-seal-ring {
  transform-box: view-box;
  transform-origin: 120px 120px;
  animation: auth-seal-spin 20s linear infinite;
}
@keyframes auth-seal-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-seal-ring { animation: none; }
}

.auth-side-text {
  text-align: center;
  position: relative;
  z-index: 2;
}
.auth-side h2 {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 6px;
  color: #fff;
  letter-spacing: -0.01em;
}
.auth-side p {
  opacity: 0.92;
  margin-bottom: 22px;
  font-size: 14px;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
.auth-side-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.auth-side-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.auth-side-stats strong {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.auth-side-stats span {
  font-size: 10px;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
}

/* ====== USER MENU ====== */
.user-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
/* Current user's role, shown as a pill next to the avatar in the navbar. */
.user-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
@media (max-width: 640px) { .user-role-badge { display: none; } }
.user-menu .dropdown {
  position: absolute;
  top: 44px;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  padding: 6px;
  min-width: 200px;
  display: none;
  z-index: 200;
}
body.rtl .user-menu .dropdown { right: auto; left: 0; }
/* Avatar (34px) va dropdown (top:44px) orasida 10px bo'shliq bor: sichqoncha shu
   oraliqdan o'tganda :hover uzilib, menyu yetib borilmasidan yopilardi. Ko'rinmas
   ko'prik o'sha oraliqni dropdownning o'ziga qo'shadi — til tanlagichdagidek
   menyuga bemalol o'tib, band tanlash mumkin bo'ladi. */
.user-menu .dropdown::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.user-menu:hover .dropdown,
.user-menu:focus-within .dropdown { display: block; }
.user-menu .dropdown a, .user-menu .dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--black);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.user-menu .dropdown a:hover,
.user-menu .dropdown button:hover {
  background: var(--xlight-gray);
}
.user-menu .dropdown .username-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--xlight-gray);
  margin-bottom: 4px;
}
.user-menu .dropdown .username-row strong {
  display: block;
  font-size: 14px;
  color: var(--black);
}
.user-menu .dropdown .username-row small {
  font-size: 11px;
  color: var(--gray);
}
body.rtl .user-menu .dropdown a,
body.rtl .user-menu .dropdown button { text-align: right; }

/* ====== NOTIFICATION BELL (navbar qo'ng'iroqchasi) ====== */
.notif-menu {
  position: relative;
  display: flex;
  align-items: center;
}
.notif-bell {
  position: relative;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.notif-bell:hover { background: rgba(255,255,255,0.28); }
.notif-bell svg { width: 18px; height: 18px; }
/* O'qilmaganlar soni — qizil doira, oq halqa bilan (qizil topbar ustida ham ko'rinadi). */
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
}
.notif-dropdown {
  position: absolute;
  top: 44px;
  right: 0;
  width: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  padding: 6px;
  display: none;
  z-index: 200;
  max-height: 420px;
  overflow-y: auto;
}
/* Ochilish JS orqali (.open) — .user-menu dagi hover paterni emas, chunki ochilganda
   o'qildi-belgisi POST qilinadi. */
.notif-menu.open .notif-dropdown { display: block; }
body.rtl .notif-dropdown { right: auto; left: 0; }
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--xlight-gray);
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
}
/* Ovoz + Windows bildirishnomasi kalitchasi. Ikkala ikonka ham shablonda turadi,
   ko'rinadiganini shu yerdagi `.on` tanlaydi — JS faqat klassni almashtiradi. */
.notif-sound-toggle {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 3px 5px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--gray);
}
.notif-sound-toggle.on { color: var(--primary); }
.notif-sound-toggle:hover { background: var(--xlight-gray); }
.notif-sound-toggle .icon { width: 15px; height: 15px; display: block; }
.notif-sound-toggle .ico-on { display: none; }
.notif-sound-toggle .ico-off { display: inline-flex; }
.notif-sound-toggle.on .ico-on { display: inline-flex; }
.notif-sound-toggle.on .ico-off { display: none; }
.notif-empty {
  padding: 16px 14px;
  font-size: 13px;
  color: var(--gray);
  text-align: center;
}
.notif-item {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  text-decoration: none;
  color: var(--black);
}
.notif-item:hover { background: var(--xlight-gray); }
.notif-item.unread { border-left-color: var(--primary); }
body.rtl .notif-item { border-left: 0; border-right: 3px solid transparent; text-align: right; }
body.rtl .notif-item.unread { border-right-color: var(--primary); }
.notif-item .notif-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
}
.notif-item .notif-body {
  display: block;
  font-size: 12.5px;
  margin-top: 1px;
}
.notif-item .notif-time {
  display: block;
  font-size: 11px;
  color: var(--gray);
  margin-top: 3px;
}
@media (max-width: 640px) {
  .notif-dropdown {
    position: fixed;
    top: 62px;
    left: 8px;
    right: 8px;
    width: auto;
  }
  body.rtl .notif-dropdown { left: 8px; right: 8px; }
}

/* Student home — referral hero */
.referral-hero { margin: 24px 0; }
.referral-hero-card {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 50%, #7F1D1D 100%);
  color: #fff;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(220,38,38,0.35);
  position: relative;
  overflow: hidden;
}
.referral-hero-card::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto auto;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.referral-hero-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.85;
  margin-bottom: 12px;
  font-weight: 600;
}
.referral-hero-code {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.referral-hero-code code {
  font-family: 'Plus Jakarta Sans', monospace;
  font-size: 32px;
  font-weight: 800;
  background: rgba(255,255,255,0.18);
  padding: 12px 22px;
  border-radius: 14px;
  letter-spacing: 1px;
  border: 2px dashed rgba(255,255,255,0.4);
}
.btn-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: #fff;
  color: #DC2626;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn-copy:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.btn-copy.copied { background: #10B981; color: #fff; }
.btn-copy .copy-ico { font-size: 18px; }

.referral-hero-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.referral-hero-foot > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.referral-hero-foot strong {
  font-size: 22px;
  font-weight: 800;
}
.referral-hero-foot small {
  font-size: 11px;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* How it works steps */
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.how-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border: 1px solid var(--light-gray);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.how-num {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DC2626, #EF4444);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(220,38,38,0.3);
}
.how-card p { margin: 0; color: var(--dark-gray); font-weight: 500; }

@media (max-width: 600px) {
  .referral-hero-card { padding: 22px; }
  .referral-hero-code code { font-size: 22px; padding: 10px 14px; }
  .referral-hero-foot strong { font-size: 18px; }
}

/* Profile completion prompt */
.profile-prompt {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border: 1px solid #F59E0B;
  border-radius: 18px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 4px 14px rgba(245,158,11,0.18);
}
.profile-prompt-info { flex: 1; min-width: 260px; }
.profile-prompt h3 { margin: 0 0 6px; color: #92400E; font-size: 18px; }
.profile-prompt p { margin: 0 0 12px; color: #78350F; font-size: 14px; }
.completion-bar {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.6);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
}
.completion-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #DC2626);
  border-radius: 999px;
  transition: width 0.5s;
}
.profile-prompt small { font-weight: 700; color: #92400E; font-size: 13px; }

/* Application status timeline */
.status-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 6px;
  position: relative;
}
.tl-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 0;
  position: relative;
}
.tl-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 42px;
  bottom: -6px;
  width: 2px;
  background: var(--light-gray);
}
body.rtl .tl-step:not(:last-child)::before { left: auto; right: 17px; }
.tl-step.completed:not(:last-child)::before { background: #10B981; }
.tl-dot {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-gray);
  color: var(--gray);
  font-weight: 800;
  font-size: 14px;
  z-index: 1;
}
.tl-step.completed .tl-dot { background: #10B981; color: #fff; }
.tl-step.current .tl-dot { background: var(--primary); color: #fff; }
.tl-step.upcoming .tl-dot { background: #fff; border: 2px dashed var(--light-gray); color: var(--medium-gray); }
.tl-body { padding-top: 6px; }
.tl-body strong { display: block; color: var(--black); font-weight: 600; font-size: 14px; }
.tl-step.upcoming .tl-body strong { color: var(--gray); font-weight: 500; }
.tl-step.current .tl-body strong { color: var(--primary); font-weight: 700; }
.tl-now {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Block head with action button */
.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.block-head h2 { margin: 0; }
.block-head h2 small { color: var(--gray); font-weight: 500; font-size: 14px; }

/* Document checklist */
.doc-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 12px;
  transition: border-color 0.15s, transform 0.15s;
}
.doc-item:hover { transform: translateY(-1px); border-color: var(--medium-gray); }
.doc-item.has { border-color: #FCD34D; background: #FFFBEB; }
.doc-item.st-approved { border-color: #10B981; background: #ECFDF5; }
.doc-item.st-rejected { border-color: #DC2626; background: #FEF2F2; }
.doc-ico {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--xlight-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: var(--gray);
}
.doc-item.has .doc-ico { background: #FEF3C7; color: #92400E; }
.doc-item.st-approved .doc-ico { background: #D1FAE5; color: #065F46; }
.doc-item.st-rejected .doc-ico { background: #FEE2E2; color: #991B1B; }
.doc-info strong { display: block; font-size: 14px; color: var(--black); }
.doc-info small { color: var(--gray); font-size: 12px; }
.doc-info .req { color: var(--primary); font-weight: 800; }

/* Document list rows */
.doc-list { display: flex; flex-direction: column; gap: 10px; }
.doc-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 12px;
  border-left: 4px solid var(--medium-gray);
}
.doc-row.st-pending { border-left-color: #F59E0B; }
.doc-row.st-approved { border-left-color: #10B981; }
.doc-row.st-rejected { border-left-color: #DC2626; }
.doc-row-info strong { display: block; font-size: 14px; color: var(--black); }
.doc-row-info small { color: var(--gray); font-size: 12px; }
.doc-comment {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--xlight-gray);
  border-radius: 8px;
  font-size: 13px;
  color: var(--dark-gray);
}
.doc-row-actions { display: flex; gap: 6px; }
.doc-status-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.doc-status-badge.st-pending { background: #FEF3C7; color: #92400E; }
.doc-status-badge.st-approved { background: #D1FAE5; color: #065F46; }
.doc-status-badge.st-rejected { background: #FEE2E2; color: #991B1B; }

/* Profil/pasport tekshiruvi — rasm + pasport + attestat bitta responsiv qatorda.
   Har bir hujjat ixcham vertikal karta (rasm tepada, nom+sana, yuklab olish) —
   bo'sh joy qolmaydi; mobileda ustun-ustun bo'lib tushadi. */
.pp-review { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 12px; }
.pp-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pp-col-head { margin: 0; font-size: 12px; font-weight: 600; color: var(--gray);
  display: flex; align-items: center; gap: 6px; }
.pp-review .doc-row { display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px; padding: 12px; height: 100%; }
.pp-review .doc-media { width: 100%; justify-content: center; }
.pp-review img.doc-media-thumb { max-width: 100%; max-height: 200px; }
.pp-review .doc-row-info { width: 100%; min-width: 0; }
.pp-review .doc-row-info strong { font-size: 13px; overflow-wrap: anywhere; }
.pp-empty { margin: 0; }
@media (max-width: 768px) { .pp-review { grid-template-columns: 1fr; } }

/* Upload form */
.upload-form .form-actions { margin-top: 14px; justify-content: flex-end; }

.upload-card {
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  border: 1px solid var(--light-gray);
}
.upload-row { margin-bottom: 16px; }
.upload-field { display: flex; flex-direction: column; gap: 6px; }
.upload-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.upload-label i { color: var(--primary); font-style: normal; }
.upload-select {
  padding: 11px 14px;
  border: 1px solid var(--light-gray);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--black);
  cursor: pointer;
  transition: border-color 0.15s;
}
.upload-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}

.dropzone {
  border: 2px dashed var(--light-gray);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  background: linear-gradient(180deg, #FAFAFA, #fff);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  cursor: default;
}
.dropzone.drag {
  border-color: var(--primary);
  background: #FEF2F2;
  transform: scale(1.01);
}
.dropzone.has-file {
  border-color: #10B981;
  border-style: solid;
  background: #ECFDF5;
}
.dz-icon { font-size: 42px; margin-bottom: 8px; }
.dz-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
  word-break: break-word;
}
.dropzone.has-file .dz-title { color: #065F46; }
.dz-hint {
  font-size: 12px;
  color: var(--gray);
  margin-bottom: 14px;
}

.upload-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}
.btn-primary[disabled] {
  background: var(--medium-gray);
  cursor: not-allowed;
  box-shadow: none;
}
.btn-primary[disabled]:hover { background: var(--medium-gray); }

.upload-done {
  text-align: center;
  padding: 40px 24px;
  background: linear-gradient(180deg, #ECFDF5, #fff);
  border-color: #10B981;
}
.upload-done .dz-icon { font-size: 48px; }
.upload-done .dz-title { color: #065F46; font-size: 18px; }
.upload-done .dz-hint { color: #047857; font-size: 13px; margin-top: 6px; }

.upload-done-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  border: 1px solid #10B981;
  border-radius: 14px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(16,185,129,0.15);
}
.upload-done-banner .ud-ico { font-size: 30px; }
.upload-done-banner strong { display: block; color: #065F46; font-size: 15px; }
.upload-done-banner small { color: #047857; font-size: 12px; }

.reupload-hint {
  font-size: 12px;
  color: #B45309;
  background: #FEF3C7;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid #FCD34D;
}

/* Smaller buttons */
.btn-outline.small, .btn-primary.small, .btn-danger.small {
  padding: 6px 10px;
  font-size: 12px;
}

@media (max-width: 600px) {
  .profile-prompt { padding: 18px; gap: 14px; }
  .profile-prompt-info h3 { font-size: 16px; }
  .doc-row { grid-template-columns: 1fr; }
  .doc-row-actions { justify-content: flex-end; }
}

/* ============================================================
   CHAT (agent ↔ student) — Telegram-style
   ============================================================ */
.chat-shell {
  max-width: 1180px;
  margin: 16px auto 0;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  height: calc(100vh - 130px);
  min-height: 540px;
}
.chat-shell.chat-shell-with-thread { grid-template-columns: 320px 1fr; }
.chat-sidebar,
.chat-main {
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-sidebar-only {
  max-width: 540px;
  margin: 0 auto;
  width: 100%;
}
.chat-sidebar-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--light-gray);
  flex-shrink: 0;
}
.chat-sidebar-head h2 { margin: 0 0 4px; font-size: 18px; }
.chat-sidebar-head p { margin: 0; color: var(--gray); font-size: 12.5px; line-height: 1.5; }
.chat-thread-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
}
.chat-thread-list li + li { border-top: 1px solid var(--xlight-gray); }
.chat-thread-list li.active .chat-thread-link {
  background: linear-gradient(90deg, rgba(220,38,38,0.08), rgba(220,38,38,0.02));
  border-left: 3px solid var(--primary);
  padding-left: 19px;
}
body.rtl .chat-thread-list li.active .chat-thread-link {
  border-left: none;
  border-right: 3px solid var(--primary);
  padding-left: 22px;
  padding-right: 19px;
}
.chat-thread-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  text-decoration: none;
  color: var(--black);
  transition: background 0.12s;
}
.chat-thread-link:hover { background: var(--xlight-gray); }
.chat-thread-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DC2626, #EF4444);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}
.chat-thread-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-thread-meta strong {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-thread-meta small { color: var(--gray); font-size: 11.5px; }
.chat-empty {
  padding: 40px 22px;
  text-align: center;
  color: var(--gray);
  list-style: none;
}
.chat-empty span { font-size: 36px; display: block; margin-bottom: 10px; }
.chat-empty p { margin: 0; font-size: 14px; }

.chat-thread-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--light-gray);
  flex-shrink: 0;
}
.chat-back,
.chat-back-mobile {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--xlight-gray);
  color: var(--black);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
  transition: background 0.12s;
  flex-shrink: 0;
}
.chat-back-mobile { display: none; }
.chat-back:hover { background: var(--light-gray); }
.chat-header-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DC2626, #EF4444);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.chat-thread-title { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chat-thread-title strong { font-size: 15px; }
.chat-thread-title small { color: var(--gray); font-size: 12px; }
.chat-encrypted-badge {
  font-size: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(34,197,94,0.12);
  display: flex; align-items: center; justify-content: center;
  cursor: help;
  flex-shrink: 0;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:
    linear-gradient(180deg, rgba(255,247,247,0.4) 0%, rgba(250,250,250,0.4) 100%),
    radial-gradient(circle at 20% 20%, rgba(220,38,38,0.04), transparent 60%),
    #FAFAFA;
}
.chat-encrypted-note {
  align-self: center;
  color: #059669;
  background: #D1FAE5;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 8px;
}
.chat-msg {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-msg.mine {
  align-self: flex-end;
  background: linear-gradient(135deg, #DC2626, #EF4444);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.chat-msg.theirs {
  align-self: flex-start;
  background: #fff;
  color: var(--black);
  border: 1px solid var(--light-gray);
  border-bottom-left-radius: 6px;
}
.chat-msg-text { white-space: pre-wrap; }
.chat-msg-img {
  max-width: 100%;
  border-radius: 10px;
  display: block;
}
.chat-msg time {
  font-size: 10px;
  opacity: 0.7;
  align-self: flex-end;
}

/* Admin audit view: show who sent each message. */
.chat-msg.with-sender { max-width: 85%; }
.chat-msg .chat-msg-sender {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 2px;
  opacity: 0.95;
}
.chat-msg .chat-msg-sender strong { font-weight: 700; }
.chat-msg .chat-msg-sender em {
  font-style: normal;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,0.08);
  color: inherit;
}
.chat-msg .chat-msg-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: rgba(0,0,0,0.10);
  color: inherit;
}
/* Admin-only role color-coding so the auditor can scan at a glance. Scoped to
   `.with-sender` so participant chats keep their own red/white bubble look. */
.chat-msg.with-sender[data-sender-role="agent"] {
  align-self: flex-start;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E3A8A;
}
.chat-msg.with-sender[data-sender-role="agent"] .chat-msg-avatar {
  background: #1D4ED8; color: #fff;
}
.chat-msg.with-sender[data-sender-role="student"] {
  align-self: flex-end;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
}
.chat-msg.with-sender[data-sender-role="student"] .chat-msg-avatar {
  background: #047857; color: #fff;
}

/* In-message image: a button (so it's keyboard-focusable) styled flush with the bubble. */
.chat-msg-img-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: zoom-in;
  display: block;
  border-radius: 10px;
  overflow: hidden;
}
.chat-msg-img-btn:focus-visible { outline: 2px solid #DC2626; outline-offset: 2px; }

/* Image lightbox overlay. */
.chat-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
.chat-lightbox[hidden] { display: none; }
.chat-lightbox-toolbar {
  position: absolute;
  top: 14px; right: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.55);
  padding: 6px 8px;
  border-radius: 999px;
  z-index: 2;
}
.chat-lightbox-btn {
  appearance: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.chat-lightbox-btn:hover { background: rgba(255,255,255,0.25); }
.chat-lightbox-btn.close { background: rgba(220,38,38,0.85); }
.chat-lightbox-btn.close:hover { background: #DC2626; }
.chat-lightbox-zoom {
  color: #fff;
  font-size: 13px;
  min-width: 48px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.chat-lightbox-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
}
.chat-lightbox-stage img {
  max-width: 92vw;
  max-height: 92vh;
  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
  transform-origin: center center;
  transition: transform 0.05s linear;
  will-change: transform;
}

/* Sidebar section header — divides support threads from admin DMs. */
.chat-sidebar-section-head {
  padding: 8px 14px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--light-gray);
}
.chat-sidebar-section-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray);
}

/* Admin DM list — "new conversation" panel and role tags */
.dm-new-block { padding: 10px 14px; border-bottom: 1px solid var(--light-gray); }
.dm-new-btn { width: 100%; }
.dm-new-panel {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--light-gray);
  border-radius: 10px;
  background: var(--xlight-gray);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dm-new-panel label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.dm-new-panel select { padding: 8px; border-radius: 8px; border: 1px solid var(--light-gray); }

.dm-role-tag {
  font-style: normal;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
  background: rgba(0,0,0,0.08);
  color: #374151;
  text-transform: capitalize;
}
.dm-role-agent, .dm-role-tag.dm-role-agent { background: #DBEAFE; color: #1E3A8A; }
.dm-role-student, .dm-role-tag.dm-role-student { background: #D1FAE5; color: #065F46; }
.dm-role-admin, .dm-role-tag.dm-role-admin,
.dm-role-tag.dm-role-student_admin { background: #FEF3C7; color: #92400E; }

.dm-avatar.dm-avatar-agent { background: #1D4ED8 !important; color: #fff; }
.dm-avatar.dm-avatar-student { background: #047857 !important; color: #fff; }
.dm-avatar.dm-avatar-admin,
.dm-avatar.dm-avatar-student_admin { background: #B45309 !important; color: #fff; }

/* =========================================================================
   Chat history (audit) — responsive card grid
   ========================================================================= */
.chat-history-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.chat-history-block {
  background: var(--xlight-gray);
  padding: 16px;
  border-radius: 14px;
}

.chat-history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.chat-history-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 999px;
  padding: 4px;
}
.ch-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.ch-tab:hover { background: var(--xlight-gray); color: var(--black); }
.ch-tab.is-active {
  background: linear-gradient(135deg, #DC2626, #EF4444);
  color: #fff;
  box-shadow: 0 2px 6px rgba(220,38,38,0.30);
}
.ch-count {
  background: rgba(0,0,0,0.10);
  color: inherit;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.ch-tab.is-active .ch-count { background: rgba(255,255,255,0.25); }

.chat-history-search {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}
.chat-history-search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--light-gray);
  border-radius: 999px;
  font-size: 14px;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chat-history-search input:focus {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.15);
}
.ch-search-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
}

.chat-history-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.ch-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 14px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  position: relative;
  overflow: hidden;
}
.ch-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #DC2626, #EF4444);
  opacity: 0.85;
}
.ch-card[data-kind="dm"]::before {
  background: linear-gradient(180deg, #B45309, #F59E0B);
}
.ch-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.07);
  border-color: #FCA5A5;
}
.ch-card[data-kind="dm"]:hover { border-color: #FCD34D; }

.ch-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ch-avatars {
  display: inline-flex;
  align-items: center;
}
.ch-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.ch-avatar + .ch-avatar { margin-left: -10px; }
.ch-card-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
  min-width: 0;
}
.ch-card-title strong {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.ch-arrow {
  color: var(--gray);
  font-size: 12px;
}
.ch-kind-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ch-kind-support { background: #FEE2E2; color: #991B1B; }
.ch-kind-dm { background: #FEF3C7; color: #92400E; }

.ch-card-snippet {
  font-size: 13px;
  line-height: 1.4;
  color: #374151;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  background: var(--xlight-gray);
  padding: 8px 10px;
  border-radius: 8px;
}
.ch-snippet-from {
  font-style: normal;
  font-weight: 600;
  color: var(--gray);
  margin-right: 4px;
}

.ch-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--gray);
}
.ch-pill {
  background: var(--xlight-gray);
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  color: #374151;
}
.ch-time {
  font-variant-numeric: tabular-nums;
}

.ch-empty {
  text-align: center;
  color: var(--gray);
  padding: 32px 12px;
  font-size: 14px;
}

/* Tablet */
@media (max-width: 900px) {
  .chat-history-block { padding: 12px; }
  .chat-history-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .ch-card-title strong { max-width: 100px; }
}

/* Mobile */
@media (max-width: 600px) {
  .chat-history-header { align-items: stretch; }
  .chat-history-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .chat-history-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chat-history-tabs::-webkit-scrollbar { display: none; }
  .ch-tab { padding: 7px 12px; font-size: 12px; }
  .chat-history-search { max-width: none; min-width: 0; }

  .chat-history-grid { grid-template-columns: 1fr; gap: 10px; }
  .ch-card { padding: 12px; border-radius: 12px; }
  .ch-card-title { font-size: 13px; gap: 4px; }
  .ch-card-title strong { max-width: 110px; }
  .ch-arrow { display: none; }
  .ch-kind-tag { font-size: 9px; padding: 2px 6px; }
  .ch-card-snippet { font-size: 12px; }
  .ch-card-foot { font-size: 11px; }
  .ch-time { font-size: 11px; }
}

.chat-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--light-gray);
  background: #fff;
}
.chat-attach {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--xlight-gray);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 18px;
  flex-shrink: 0;
  transition: background 0.12s;
}
.chat-attach:hover { background: var(--light-gray); }
.chat-composer input[type=text] {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--light-gray);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.chat-composer input[type=text]:focus { border-color: var(--primary); }
.chat-send {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DC2626, #EF4444);
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(220,38,38,0.3);
  transition: transform 0.12s;
}
.chat-send:hover { transform: scale(1.06); }
.chat-composer-hint {
  margin: 0;
  padding: 4px 16px 12px;
  font-size: 11px;
  color: var(--gray);
  display: flex;
  justify-content: space-between;
}
.chat-error { color: var(--error); font-weight: 600; }
.chat-readonly-note {
  margin: 0;
  padding: 14px;
  text-align: center;
  color: var(--gray);
  background: var(--xlight-gray);
  font-size: 13px;
  border-top: 1px solid var(--light-gray);
}

@media (max-width: 900px) {
  .chat-shell {
    margin: 0;
    padding: 0;
    grid-template-columns: 1fr;
    height: calc(100vh - 60px);
    gap: 0;
    min-height: 0;
  }
  .chat-shell.chat-shell-with-thread { grid-template-columns: 1fr; }
  .chat-shell.chat-shell-with-thread .chat-sidebar { display: none; }
  .chat-sidebar, .chat-main {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
  .chat-back-mobile { display: flex; }
}

/* ============================================================
   LANDING PAGE
   ============================================================ */
.lp-body {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  background: #fff;
  color: var(--black);
  line-height: 1.55;
  margin: 0;
}
.lp-body * { box-sizing: border-box; }

.lp-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Marketing nav */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lp-nav.scrolled { border-color: var(--light-gray); box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.lp-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.lp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--black);
  font-weight: 800;
}
.lp-brand-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #fff;
  padding: 3px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--light-gray);
}
.lp-brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lp-brand-text { font-size: 17px; }

.lp-nav-links {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.lp-nav-links a {
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--dark-gray);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}
.lp-nav-links a:hover { background: var(--xlight-gray); color: var(--primary); }

.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-btn-primary, .lp-btn-outline, .lp-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
  font-family: inherit;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.lp-btn-primary {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  color: #fff;
  box-shadow: 0 6px 18px rgba(220,38,38,0.3);
}
.lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(220,38,38,0.4); }
.lp-btn-primary.big { padding: 14px 28px; font-size: 16px; }
.lp-btn-primary.light { background: #fff; color: #DC2626; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.lp-btn-primary.light:hover { background: #FEF2F2; }

.lp-btn-outline {
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--light-gray);
}
.lp-btn-outline:hover { border-color: var(--primary); color: var(--primary); }

.lp-btn-ghost {
  background: transparent;
  color: var(--black);
  border: 2px solid rgba(31,41,55,0.15);
}
.lp-btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: rgba(220,38,38,0.04); }
.lp-btn-ghost.big { padding: 13px 26px; font-size: 16px; }

.lp-burger {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.lp-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--black);
  border-radius: 999px;
  transition: transform 0.2s, opacity 0.2s;
}
.lp-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp-burger.open span:nth-child(2) { opacity: 0; }
.lp-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.lp-hero {
  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
}
.lp-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(220,38,38,0.08), transparent 50%),
    radial-gradient(circle at 85% 60%, rgba(220,38,38,0.06), transparent 55%),
    linear-gradient(180deg, #fff, #FFF7F7);
  z-index: -1;
}
.lp-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.lp-hero-badge {
  display: inline-block;
  background: rgba(220,38,38,0.1);
  color: #B91C1C;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.lp-hero-text h1 {
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--black);
}
.lp-hero-text p {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--dark-gray);
  margin: 0 0 28px;
  max-width: 560px;
}
.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.lp-hero-foot {
  font-size: 14px;
  color: var(--gray);
  margin: 0;
}
.lp-hero-foot a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
}
body.rtl .lp-hero-foot a { margin-left: 0; margin-right: 4px; }

.lp-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 360px;
}
.lp-hero-card {
  width: 280px; height: 280px;
  background: linear-gradient(135deg, #fff, #FEF2F2);
  border-radius: 32px;
  padding: 40px;
  box-shadow: 0 30px 60px rgba(220,38,38,0.18), 0 6px 20px rgba(0,0,0,0.05);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(220,38,38,0.08);
}
.lp-hero-card img { width: 100%; height: 100%; object-fit: contain; }

.lp-float {
  position: absolute;
  width: 64px; height: 64px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  animation: lp-float 4s ease-in-out infinite;
}
.lp-float-1 { top: 10%; left: 0; animation-delay: 0s; }
.lp-float-2 { top: 20%; right: 0; animation-delay: 0.8s; }
.lp-float-3 { bottom: 15%; left: 5%; animation-delay: 1.6s; }
.lp-float-4 { bottom: 8%; right: 8%; animation-delay: 2.4s; }
@keyframes lp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Stats */
.lp-stats {
  background: linear-gradient(135deg, #DC2626, #991B1B);
  color: #fff;
  padding: 36px 0;
}
.lp-stats-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.lp-stat strong { display: block; font-size: 36px; font-weight: 900; line-height: 1; }
.lp-stat span { display: block; margin-top: 6px; font-size: 13px; opacity: 0.92; text-transform: uppercase; letter-spacing: 0.5px; }

/* Generic section */
.lp-section { padding: 84px 0; }
.lp-bg-soft { background: #FAFAFA; }
.lp-section-head { text-align: center; max-width: 640px; margin: 0 auto 50px; }
.lp-section-head h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 900;
  margin: 0 0 12px;
  color: var(--black);
  letter-spacing: -0.01em;
}
.lp-section-head p {
  font-size: 16px;
  color: var(--gray);
  margin: 0;
}

/* Features */
.lp-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.lp-feature {
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 18px;
  padding: 28px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.lp-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(220,38,38,0.3);
  box-shadow: 0 16px 40px rgba(220,38,38,0.1);
}
.lp-feature-ico {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FEE2E2, #FECACA);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
}
.lp-feature h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--black); }
.lp-feature p { margin: 0; font-size: 14px; color: var(--dark-gray); line-height: 1.55; }

/* Steps */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}
.lp-step {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  text-align: center;
  position: relative;
  border: 1px solid var(--light-gray);
}
.lp-step-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DC2626, #EF4444);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  font-weight: 900;
  margin: 0 auto 16px;
  box-shadow: 0 8px 20px rgba(220,38,38,0.25);
}
.lp-step h3 { font-size: 17px; margin: 0 0 8px; color: var(--black); font-weight: 700; }
.lp-step p { font-size: 13px; color: var(--dark-gray); margin: 0; }

/* Programs */
.lp-programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.lp-program {
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 16px;
  padding: 22px 14px;
  text-align: center;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.lp-program:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  background: #FEF2F2;
}
.lp-program span { font-size: 36px; display: block; margin-bottom: 8px; }
.lp-program strong { font-size: 14px; color: var(--black); font-weight: 700; }

/* Countries */
.lp-countries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.lp-country {
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.lp-country:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.lp-flag { font-size: 32px; display: block; margin-bottom: 6px; }
.lp-country strong { font-size: 13px; color: var(--dark-gray); font-weight: 600; }

/* Testimonials (text + YouTube video) */
.lp-testimonials {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.lp-testimonials.lp-testimonials-reverse {
  grid-template-columns: 1.15fr 1fr;
}
.lp-testimonials-text h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--black);
  line-height: 1.15;
}
.lp-testimonials-text p {
  font-size: 16px;
  color: var(--gray);
  margin: 0 0 24px;
  max-width: 480px;
  line-height: 1.6;
}
.lp-video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 50px rgba(220,38,38,0.18), 0 6px 18px rgba(0,0,0,0.08);
}
.lp-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Bottom CTA */
.lp-cta {
  background: linear-gradient(135deg, #DC2626 0%, #991B1B 60%, #7F1D1D 100%);
  color: #fff;
  padding: 80px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lp-cta::before {
  content: '';
  position: absolute;
  inset: -50% -10% auto auto;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 60%);
  pointer-events: none;
}
.lp-cta-inner h2 {
  font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.lp-cta-inner p {
  font-size: 17px;
  margin: 0 0 28px;
  opacity: 0.92;
}

/* Footer */
.lp-footer {
  background: #111827;
  color: #D1D5DB;
}
.lp-footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  padding: 50px 24px 30px;
  align-items: flex-start;
}
.lp-footer-brand { display: flex; align-items: center; gap: 12px; max-width: 360px; }
.lp-footer-brand strong { display: block; color: #fff; font-size: 17px; }
.lp-footer-brand small { display: block; color: #9CA3AF; font-size: 12px; margin-top: 2px; }
.lp-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, auto));
  gap: 50px;
}
.lp-footer-cols h4 {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 14px;
  font-weight: 700;
}
.lp-footer-cols a {
  display: block;
  color: #9CA3AF;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 8px;
  transition: color 0.15s;
}
.lp-footer-cols a:hover { color: #fff; }
.lp-footer-bottom {
  border-top: 1px solid #1F2937;
  text-align: center;
  padding: 18px 24px;
  color: #6B7280;
  font-size: 13px;
}

/* Lang select on landing — match white nav background */
.lang-select.lp .lang-select-toggle {
  background: rgba(31,41,55,0.06);
  color: var(--black);
  border-color: rgba(31,41,55,0.1);
}
.lang-select.lp .lang-select-toggle:hover { background: rgba(31,41,55,0.1); }
.lang-select.lp .lang-select-toggle .chevron { opacity: 0.6; }

/* Mobile drawer CTAs (hidden on desktop) */
.lp-nav-mobile-cta { display: none; }

/* Responsive */
@media (max-width: 980px) {
  .lp-hero-inner { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .lp-hero-text p { margin-left: auto; margin-right: auto; }
  .lp-hero-actions { justify-content: center; }
  .lp-hero-visual { min-height: 280px; }
  .lp-hero-card { width: 220px; height: 220px; padding: 30px; }
  .lp-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .lp-testimonials,
  .lp-testimonials.lp-testimonials-reverse { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .lp-testimonials-text p { margin-left: auto; margin-right: auto; }
}
@media (max-width: 760px) {
  .lp-nav-inner { padding: 12px 16px; gap: 12px; }
  .lp-burger { display: flex; }
  .lp-hero-visual { display: none; }
  .lp-hero-inner { grid-template-columns: 1fr; gap: 0; }
  .lp-nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-bottom: 1px solid var(--light-gray);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s, opacity 0.2s;
    margin-left: 0;
  }
  .lp-nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .lp-nav-links a { padding: 12px 14px; border-radius: 10px; }
  .lp-nav-mobile-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid var(--light-gray);
  }
  .lp-nav-mobile-cta a { padding: 12px 14px; text-align: center; }
  .lp-nav-actions { margin-left: auto; gap: 6px; }
  .lp-nav-actions .lp-btn-outline,
  .lp-nav-actions .lp-btn-primary { display: none; }
  .lp-nav-actions .lang-select-toggle {
    min-width: auto;
    padding: 7px 10px;
    gap: 4px;
  }
  .lp-nav-actions .lang-select-toggle .lang-name { display: none; }
  .lp-section { padding: 56px 0; }
  .lp-section-head { margin-bottom: 32px; }
  .lp-hero { padding: 40px 0 60px; }
  .lp-stats { padding: 28px 0; }
  .lp-stat strong { font-size: 28px; }
  .lp-cta { padding: 56px 0; }
  .lp-footer-inner { grid-template-columns: 1fr; gap: 30px; padding: 40px 20px 24px; }
  .lp-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .lp-float { width: 48px; height: 48px; font-size: 22px; border-radius: 14px; }
  .lp-features-grid { gap: 16px; }
  .lp-feature { padding: 22px; }
  .lp-steps { gap: 16px; }
  .lp-step { padding: 24px 20px; }
  .lp-programs-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .lp-program { padding: 18px 10px; border-radius: 14px; }
  .lp-program span { font-size: 30px; margin-bottom: 4px; }
  .lp-program strong { font-size: 13px; }
  .lp-countries-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .lp-country { padding: 14px 8px; border-radius: 12px; }
  .lp-flag { font-size: 28px; }
  .lp-country strong { font-size: 12px; }
  .lp-testimonials { gap: 24px; }
  .lp-testimonials-text h2 { font-size: clamp(22px, 6vw, 28px); }
  .lp-testimonials-text p { font-size: 14px; }
  .lp-video-frame { border-radius: 14px; }
}
@media (max-width: 480px) {
  .lp-container { padding: 0 16px; }
  .lp-hero-inner { padding: 0 16px; gap: 30px; }
  .lp-hero { padding: 28px 0 48px; }
  .lp-hero-text h1 { font-size: clamp(28px, 8vw, 36px); }
  .lp-hero-text p { font-size: 14px; }
  .lp-hero-actions { flex-direction: column; gap: 10px; }
  .lp-hero-actions .lp-btn-primary,
  .lp-hero-actions .lp-btn-ghost { width: 100%; }
  .lp-hero-visual { min-height: 240px; }
  .lp-hero-card { width: 180px; height: 180px; padding: 24px; border-radius: 26px; }
  .lp-float { width: 44px; height: 44px; font-size: 20px; }
  .lp-float-1 { top: 6%; left: 4%; }
  .lp-float-2 { top: 14%; right: 4%; }
  .lp-float-3 { bottom: 18%; left: 4%; }
  .lp-float-4 { bottom: 6%; right: 8%; }
  .lp-stats-inner { grid-template-columns: 1fr 1fr; gap: 18px; padding: 0 16px; }
  .lp-stats { padding: 24px 0; }
  .lp-stat strong { font-size: 26px; }
  .lp-stat span { font-size: 11px; letter-spacing: 0.3px; }
  .lp-section { padding: 48px 0; }
  .lp-section-head { margin-bottom: 28px; }
  .lp-section-head h2 { font-size: clamp(22px, 6vw, 28px); }
  .lp-section-head p { font-size: 14px; }
  .lp-feature { padding: 20px; border-radius: 16px; }
  .lp-feature-ico { width: 48px; height: 48px; font-size: 22px; margin-bottom: 12px; }
  .lp-feature h3 { font-size: 16px; }
  .lp-feature p { font-size: 13px; }
  .lp-step { padding: 22px 18px; }
  .lp-step-num { width: 44px; height: 44px; font-size: 18px; margin-bottom: 12px; }
  .lp-step h3 { font-size: 15px; }
  .lp-step p { font-size: 12.5px; }
  .lp-programs-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lp-program { padding: 16px 8px; }
  .lp-program span { font-size: 28px; }
  .lp-program strong { font-size: 12.5px; }
  .lp-countries-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lp-country { padding: 12px 6px; }
  .lp-flag { font-size: 26px; }
  .lp-country strong { font-size: 11.5px; }
  .lp-cta { padding: 48px 0; }
  .lp-cta-inner h2 { font-size: clamp(22px, 6vw, 28px); }
  .lp-cta-inner p { font-size: 14px; margin-bottom: 22px; }
  .lp-footer-inner { padding: 36px 16px 22px; }
  .lp-footer-cols { gap: 20px; }
  .lp-brand-text { display: none; }
  .lp-nav-actions .lang-select-toggle { padding: 6px 8px; }
  .lp-nav-actions .lang-select-toggle .flag { font-size: 16px; }
  .lp-nav-actions .lang-select-toggle .chevron { font-size: 10px; }
}

/* ===== Kanban pipeline — drag & drop, scrollable columns ===== */
.pl-header { align-items: flex-start; }
#kbBoard.kanban { align-items: flex-start; padding-bottom: 8px; }
#kbBoard .kanban-col {
  flex: 0 0 290px; display: flex; flex-direction: column;
  background: #F7F9FC; border: 1px solid #EEF2F6; border-radius: var(--radius);
  padding: 10px; height: calc(100vh - 190px); min-height: 460px;
}
#kbBoard .kanban-head {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 4px 10px; margin-bottom: 8px; border-bottom: 2px solid var(--accent);
}
#kbBoard .kanban-head .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#kbBoard .kanban-head strong { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-add {
  width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center;
  justify-content: center; background: #fff; border: 1px solid var(--light-gray);
  color: var(--medium-gray); font-weight: 700; text-decoration: none; line-height: 1;
}
.kb-add:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.kc-list {
  display: flex; flex-direction: column; gap: 9px; min-height: 90px; flex: 1;
  overflow-y: auto; overflow-x: hidden; padding: 4px 2px; border-radius: 10px;
  transition: background .15s, outline .15s;
}
.kc-list.drop-hover { background: rgba(220,38,38,0.06); outline: 2px dashed var(--accent); outline-offset: -2px; }
.kc {
  background: #fff; border: 1px solid #ECEFF3; border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 10px 12px; cursor: grab;
  box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: box-shadow .15s, transform .05s;
}
.kc:hover { box-shadow: 0 6px 16px rgba(16,24,40,.12); transform: translateY(-1px); }
.kc:active { cursor: grabbing; }
.kc.dragging { opacity: .45; }
.kc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kc-name { font-size: 13.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-open { color: var(--medium-gray); font-size: 13px; flex: none; }
.kc-phone { color: #DC2626; font-weight: 600; font-size: 12.5px; margin-top: 4px; }
.kc-badge { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; }
.kc-loc { color: var(--medium-gray); font-size: 12px; margin-top: 5px; }
.kc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; padding-top: 7px; border-top: 1px dashed #EEF2F6; }
.kc-resp { font-size: 11px; color: var(--dark-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
.kc-days { font-size: 10.5px; font-weight: 700; color: #B45309; background: #FEF3C7; padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex: none; }

/* ===== Avatar (navbar photo + student upload) ===== */
.user-avatar { overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar-upload { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.avatar-preview {
  width: 88px; height: 88px; border-radius: 50%; background: #DC2626; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700;
  overflow: hidden; flex: none;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
/* 3x4 selfi fotosurati — doira emas, to'rtburchak (3:4 nisbat). */
.avatar-preview.photo-3x4 { width: 96px; height: 128px; border-radius: 10px; font-size: 30px; }
.avatar-pick { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; cursor: pointer; }
.warn-banner {
  display: flex; align-items: flex-start; gap: 12px;
  background: #FEF3C7; border: 1px solid #FCD34D; border-left: 4px solid #F59E0B;
  color: #92400E; padding: 14px 16px; border-radius: 12px; margin: 0 0 18px;
  font-size: 14px; line-height: 1.5;
}
.warn-banner .warn-ico { font-size: 20px; line-height: 1; flex: none; }
.warn-banner strong { display: block; margin-bottom: 2px; color: #78350F; }
body.rtl .warn-banner { border-left: 1px solid #FCD34D; border-right: 4px solid #F59E0B; }
.reject-banner {
  display: flex; align-items: flex-start; gap: 12px;
  background: #FEE2E2; border: 1px solid #FCA5A5; border-left: 4px solid #DC2626;
  color: #991B1B; padding: 14px 16px; border-radius: 12px; margin: 0 0 18px;
  font-size: 14px; line-height: 1.5;
}
.reject-banner .reject-ico { font-size: 20px; line-height: 1; flex: none; font-weight: 700; }
.reject-banner strong { display: block; margin-bottom: 2px; color: #7F1D1D; }
body.rtl .reject-banner { border-left: 1px solid #FCA5A5; border-right: 4px solid #DC2626; }
.reject-reason {
  background: #FEE2E2; border-left: 3px solid #DC2626; color: #991B1B;
  padding: 8px 12px; border-radius: 8px; margin: 6px 0 12px; font-weight: 500;
}
body.rtl .reject-reason { border-left: 0; border-right: 3px solid #DC2626; }
.review-actions textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #D1D5DB; border-radius: 8px;
  padding: 8px 10px; font: inherit; resize: vertical; margin-bottom: 10px;
}
.review-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-danger {
  background: #DC2626; color: #fff; border: none; padding: 8px 16px; border-radius: 8px;
  font-weight: 600; cursor: pointer;
}
.btn-danger:hover { background: #B91C1C; }
.doc-status-badge.st-pending { background: #FEF3C7; color: #92400E; }

/* Passport uploader */
.pp-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.pp-card {
  position: relative; width: 116px; border: 1px solid #E5E7EB; border-radius: 12px;
  background: #fff; padding: 8px; display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-decoration: none; color: #374151; box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.pp-card .pp-thumb {
  width: 100%; height: 84px; border-radius: 8px; background: #F3F4F6; display: flex;
  align-items: center; justify-content: center; font-size: 30px; overflow: hidden;
}
.pp-card .pp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-card .pp-name {
  font-size: 12px; font-weight: 600; max-width: 100%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.pp-card .pp-size { font-size: 11px; color: #9CA3AF; }
.pp-card.pp-existing { border-style: solid; border-color: #BBF7D0; background: #F0FDF4; }
.pp-remove {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  border: none; background: #DC2626; color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pp-remove:hover { background: #B91C1C; }
.pp-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 2px dashed #D1D5DB; border-radius: 12px; padding: 22px 16px; cursor: pointer;
  background: #FAFAFA; color: #6B7280; transition: border-color .15s, background .15s; text-align: center;
}
.pp-drop:hover, .pp-drop.drag { border-color: #DC2626; background: #FEF2F2; color: #DC2626; }
.pp-drop .pp-drop-ico { font-size: 28px; }
.pp-drop .pp-drop-text { font-size: 14px; font-weight: 600; }
.pp-drop .pp-drop-sub { font-size: 12px; color: #9CA3AF; }
.pp-drop:hover .pp-drop-sub, .pp-drop.drag .pp-drop-sub { color: #DC2626; }

/* Custom country picker (flag images work on Windows; native emoji don't) */
.cf-wrap { display: flex; flex-direction: column; gap: 6px; }
.cf-label { font-size: 11px; font-weight: 700; color: var(--dark-gray); text-transform: uppercase; letter-spacing: .4px; }
.country-field { position: relative; }
.country-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer;
  font: inherit; text-transform: none; letter-spacing: 0; color: var(--black);
  background: var(--bg); border: 1px solid var(--light-gray); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 14px; font-weight: 500; text-align: left;
}
.country-trigger:hover { border-color: var(--medium-gray); }
.country-field.open .country-trigger { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(220,38,38,0.12); background: #fff; }
.country-trigger-flag { width: 24px; height: 18px; object-fit: cover; border-radius: 2px; flex: none; }
.country-trigger-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.country-caret { color: #9CA3AF; flex: none; }
.country-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid var(--light-gray); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px; max-height: 320px; display: flex; flex-direction: column;
}
.country-menu[hidden] { display: none; }
.country-search {
  width: 100%; box-sizing: border-box; border: 1px solid var(--light-gray); border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 14px; margin-bottom: 6px;
}
.country-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.country-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.country-opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.country-opt:hover { background: #FEF2F2; }
.country-opt img { width: 24px; height: 18px; object-fit: cover; border-radius: 2px; flex: none; }
.country-opt .noflag { width: 24px; text-align: center; flex: none; }
.country-opt .cn { flex: 1; }
.country-opt .cd { color: #9CA3AF; font-size: 13px; }
.form-comment { margin-top: 16px; }

/* --- Institution / bank details (shown at top of step 2) --- */
.inst-card {
  background: #fff; border: 1px solid var(--light-gray); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.inst-head {
  background: linear-gradient(135deg, #DC2626, #b91c1c); color: #fff;
  padding: 12px 18px; font-size: 14px; font-weight: 700; letter-spacing: .2px;
}
.inst-table-wrap { overflow-x: auto; }
.inst-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.inst-table th, .inst-table td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--light-gray); }
.inst-table thead th { background: #FEF2F2; }
.inst-table .inst-name { font-size: 13px; font-weight: 700; color: var(--black); line-height: 1.4; }
.inst-table tbody th { color: #6B7280; font-weight: 600; white-space: nowrap; width: 1%; }
.inst-table tbody td { color: var(--black); font-weight: 500; word-break: break-word; }
/* divider between the UZ block (cols 1-2) and the EN block (cols 3-4) */
.inst-table th:nth-child(3), .inst-table td:nth-child(3) { border-left: 1px solid var(--light-gray); }
.inst-table tbody tr:last-child th, .inst-table tbody tr:last-child td { border-bottom: 0; }
/* Mobile: stack each field vertically (UZ label/value, then EN label/value) so
   the columns never squish or jumble. Desktop keeps the aligned 4-col table. */
@media (max-width: 640px) {
  .inst-table-wrap { overflow-x: visible; }
  .inst-table, .inst-table thead, .inst-table tbody, .inst-table tr { display: block; width: 100%; }
  .inst-table th, .inst-table td { display: block; width: auto; border-bottom: 0; padding: 1px 16px; }
  .inst-table thead th { background: #FEF2F2; padding: 8px 16px; }
  .inst-table thead th + th { border-top: 1px solid var(--light-gray); }
  .inst-table tbody tr { border-bottom: 1px solid var(--light-gray); padding: 7px 0; }
  .inst-table tbody tr:last-child { border-bottom: 0; }
  .inst-table tbody th { color: #6B7280; font-size: 11px; font-weight: 600; white-space: normal; width: auto; padding-top: 5px; }
  .inst-table tbody td { font-weight: 600; }
  /* remove the desktop vertical divider; add a small gap before the EN label */
  .inst-table th:nth-child(3), .inst-table td:nth-child(3) { border-left: 0; }
  .inst-table tbody th:nth-child(3) { margin-top: 3px; }
}

/* --- Payment receipts (kvitansiya) --- */
.receipt-total, .receipt-amount { color: #16A34A; font-weight: 600; }
.receipt-total { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: var(--radius-sm);
  padding: 8px 12px; margin: 10px 0; font-size: 14px; }
.receipt-amount { margin: 4px 0 0; font-size: 13px; }
.receipt-review { border: 1px solid var(--light-gray); border-radius: var(--radius-sm);
  padding: 12px; margin: 10px 0; }
.receipt-review.st-approved { border-left: 4px solid #16A34A; }
.receipt-review.st-rejected { border-left: 4px solid var(--primary); }
.receipt-review.st-pending  { border-left: 4px solid #F59E0B; }
.receipt-review-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.receipt-review-head .doc-row-info { flex: 1; min-width: 160px; }
.receipt-review-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.receipt-review-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--light-gray);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; resize: vertical; }
.receipt-amount-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.receipt-amount-field label { font-size: 13px; color: #6B7280; font-weight: 600; }
.receipt-amount-field input { border: 1px solid var(--light-gray); border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 14px; max-width: 200px; }
.receipt-amount-field input:focus, .receipt-review-form textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.receipt-review-head .rc-declared { display: block; color: #6B7280; font-size: 12px; margin-top: 2px; }

/* Student receipt list (with thumbnail) */
.rc-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.rc-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--light-gray);
  border-radius: var(--radius-sm); padding: 10px; background: #fff; }
.rc-item.st-approved { border-left: 4px solid #16A34A; }
.rc-item.st-rejected { border-left: 4px solid var(--primary); }
.rc-item.st-pending  { border-left: 4px solid #F59E0B; }
.rc-thumb { width: 56px; height: 56px; flex: none; border-radius: 8px; background: #F3F4F6;
  display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden;
  text-decoration: none; }
.rc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rc-body strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-body small { color: #9CA3AF; font-size: 12px; }
.rc-body .rc-declared { color: #6B7280; }
.rc-form { margin-top: 8px; }
.rc-amount-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; max-width: 280px; }
.rc-amount-field span { font-size: 14px; font-weight: 600; color: var(--black); }
.rc-amount-field i { color: var(--primary); font-style: normal; }
.rc-amount-field input { border: 1px solid var(--light-gray); border-radius: 10px;
  padding: 12px 14px; font: inherit; font-size: 16px; font-weight: 600; }
.rc-amount-field input:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
#rcSubmit:disabled { opacity: .5; cursor: not-allowed; }

/* --- Student detail: stage pill, two-col info, timeline (minimal) --- */
.stage-pill { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  background: #F3F4F6; color: #374151; white-space: nowrap; }
.stage-pill.st-step-1 { background: #FEF3C7; color: #B45309; }
.stage-pill.st-step-2 { background: #DBEAFE; color: #1D4ED8; }
.stage-pill.st-step-3 { background: #DCFCE7; color: #15803D; }

.detail-list.two-col { display: grid; grid-template-columns: max-content 1fr max-content 1fr;
  gap: 8px 16px; align-items: baseline; }
.detail-list.two-col dt { color: #6B7280; font-size: 13px; font-weight: 600; white-space: nowrap; }
.detail-list.two-col dd { margin: 0; font-size: 14px; font-weight: 500; word-break: break-word; }
@media (max-width: 720px) {
  .detail-list.two-col { grid-template-columns: max-content 1fr; }
}

.timeline { list-style: none; margin: 4px 0 0; padding: 0; }
.tl-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--light-gray); }
.tl-item:last-child { border-bottom: 0; }
.tl-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #F3F4F6;
  display: flex; align-items: center; justify-content: center; font-size: 16px; }
.tl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tl-body strong { font-size: 14px; font-weight: 600; }
.tl-detail { color: #6B7280; font-size: 13px; word-break: break-word; }
.tl-time { flex: none; color: #9CA3AF; font-size: 12px; white-space: nowrap; padding-top: 2px; }

/* students list: step badge instead of pipeline status */
.step-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  white-space: nowrap; background: #F3F4F6; color: #374151; }
.step-badge.st-step-1 { background: #FEF3C7; color: #B45309; }
.step-badge.st-step-2 { background: #DBEAFE; color: #1D4ED8; }
.step-badge.st-step-3 { background: #DCFCE7; color: #15803D; }

/* --- Dashboard statistics --- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0 0 20px; }
.stat-card { background: #fff; border: 1px solid var(--light-gray); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; }
.stat-card.stat-alert { border-color: #FCD34D; background: #FFFBEB; }
.stat-value { font-size: 28px; font-weight: 800; color: var(--black); line-height: 1; }
.stat-label { margin-top: 6px; font-size: 13px; color: #6B7280; font-weight: 600; }
.step-dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex: none; }
.step-dot.st-step-1 { background: #D97706; }
.step-dot.st-step-2 { background: #2563EB; }
.step-dot.st-step-3 { background: #16A34A; }

/* --- Student detail: stage tabs --- */
.tab-bar { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; border-bottom: 2px solid var(--light-gray);
  margin: 0 0 16px; padding-bottom: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn { flex: none; background: none; border: none; box-shadow: inset 0 -3px 0 transparent;
  padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 600; color: #6B7280;
  cursor: pointer; white-space: nowrap; }
.tab-btn:hover { color: var(--black); }
.tab-btn.active { color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* --- Agent avatar (detail header) --- */
.agent-avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--primary-light);
  color: var(--primary); display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; overflow: hidden; }
.agent-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* --- Agents list: clickable inner link + per-agent referral row --- */
.agent-card-link { display: block; color: inherit; text-decoration: none; }
.agent-ref { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--light-gray); }
.agent-ref-id { font-size: 12px; color: #6B7280; flex: 1; min-width: 0; }
.agent-ref-id code { background: #F3F4F6; padding: 3px 8px; border-radius: 6px;
  font-size: 12px; color: #374151; word-break: break-all; }
.agent-card .row-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* --- Confirm modal (Ha / Yo'q) --- */
.confirm-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center;
  justify-content: center; background: rgba(17,24,39,.55); padding: 20px; }
.confirm-overlay[hidden] { display: none; }
.confirm-box { background: #fff; border-radius: var(--radius); max-width: 420px; width: 100%;
  padding: 26px 24px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.confirm-box .confirm-ico { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.confirm-box h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.confirm-box p { margin: 0 0 20px; color: #6B7280; font-size: 14px; line-height: 1.5; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }
.confirm-actions button { min-width: 96px; }

/* --- Rejected passport cards (student re-upload view) --- */
.pp-card.pp-rejected-card { border-color: #FCA5A5; background: #FEF2F2; }
.pp-card.pp-rejected-card .pp-thumb { filter: grayscale(.4); opacity: .8; }

/* --- Family members (oila a'zolari) --- */
.family-row { position: relative; border: 1px solid var(--light-gray); border-radius: var(--radius-sm);
  padding: 14px; margin-bottom: 12px; background: #FAFAFA; }
.family-remove { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: #FEE2E2; color: #DC2626; font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.family-remove:hover { background: #DC2626; color: #fff; }
.family-row > label { display: block; margin-top: 8px; }
/* The relationship <select> inherits the shared .big-form select style so it matches
   every other selectable field (no white-bg override). */

/* --- Image lightbox (zoom uploaded passport photo) --- */
.img-lightbox { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.img-lightbox[hidden] { display: none; }
.img-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,.5); }
.lb-close { position: absolute; top: 14px; right: 22px; color: #fff; font-size: 40px;
  line-height: 1; cursor: pointer; font-weight: 300; }
.pp-zoom { cursor: zoom-in; }

/* --- Masked field with eye toggle (passport / JSHSHIR) --- */
.secret-field { position: relative; display: block; }
.secret-field input { width: 100%; box-sizing: border-box; padding-right: 40px; }
.secret-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 17px; line-height: 1; opacity: .65; padding: 4px; }
.secret-eye:hover { opacity: 1; }

/* --- Reveal masked value with eye (settings: passport / JSHSHIR) --- */
.reveal { display: inline-flex; align-items: center; gap: 6px; }
.reveal-mask { letter-spacing: 1px; }
.reveal-eye { background: none; border: none; cursor: pointer; font-size: 15px; opacity: .6; padding: 0; line-height: 1; }
.reveal-eye:hover { opacity: 1; }

/* --- Auth password: show/hide eye, strength meter, match feedback --- */
.auth-pw { position: relative; }
.auth-pw input { width: 100%; box-sizing: border-box; padding-right: 42px; }
.auth-pw-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px;
  line-height: 0; opacity: .6; color: var(--gray);
}
.auth-pw-eye:hover { opacity: 1; }
.auth-pw-eye svg { width: 20px; height: 20px; display: block; }
.auth-pw-eye svg[hidden] { display: none; }  /* must beat the display:block above so the toggle hides one icon */

.auth-input--invalid { border-color: var(--error) !important; }
.auth-input--valid   { border-color: var(--success) !important; }

.auth-match-msg, .auth-email-msg { font-size: 11px; font-weight: 600; color: var(--error); margin-top: 2px; min-height: 14px; }
.auth-match-msg.ok, .auth-email-msg.ok { color: var(--success); }

.auth-strength { margin-top: 6px; }
.auth-strength-bar { height: 5px; border-radius: 3px; background: var(--error-light); overflow: hidden; }
.auth-strength-bar > i { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .2s ease, background .2s ease; }
.auth-strength-label { font-size: 11px; font-weight: 600; margin-top: 3px; color: var(--gray); min-height: 14px; }
.auth-strength--weak   .auth-strength-bar > i { width: 33%;  background: var(--error); }
.auth-strength--medium .auth-strength-bar > i { width: 66%;  background: #F59E0B; }
.auth-strength--strong .auth-strength-bar > i { width: 100%; background: var(--success); }
.auth-strength--weak   .auth-strength-label { color: var(--error); }
.auth-strength--medium .auth-strength-label { color: #B45309; }
.auth-strength--strong .auth-strength-label { color: var(--success); }

.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* RTL: eye moves to the left, padding flips */
body.rtl .auth-pw input { padding-right: 14px; padding-left: 42px; }
body.rtl .auth-pw-eye { right: auto; left: 8px; }

/* Inline icon system (replaces emojis). Scales with font-size, inherits color. */
.icon { width: 1em; height: 1em; vertical-align: -.125em; flex: none; display: inline-block; }