body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.card { background:#fff; border-radius:.75rem; box-shadow:0 1px 3px rgba(0,0,0,.08); }
table.tbl { width:100%; border-collapse:collapse; font-size:.875rem; }
table.tbl th { text-align:left; padding:.6rem .75rem; background:#f8fafc; color:#64748b; font-weight:600; border-bottom:1px solid #e5e7eb; }
table.tbl td { padding:.6rem .75rem; border-bottom:1px solid #f1f5f9; }
table.tbl tr:hover td { background:#f8fafc; }
.badge { display:inline-block; padding:.15rem .6rem; border-radius:9999px; font-size:.75rem; font-weight:600; }

/* ===================== KUN/TUN REJIMI (dark mode) =====================
   Tailwind CDN'ning JIT kompilyatori har bir faylga alohida "dark:" prefiksi
   qo'shishni talab qiladi — bu o'nlab modul faylini qayta yozishni anglatadi.
   Shuning uchun bu yerda ODDIY CSS orqali ENG KO'P ISHLATILADIGAN Tailwind
   klasslarini ("text-gray-900" va h.k.) "html.dark" holatida qayta belgilab,
   BUTUN ILOVA bo'ylab (har bir modulni alohida tahrirlamasdan) keng qamrovli
   qorong'i rejim ta'minlanadi. */
html.dark body { background:#0f172a; color:#e2e8f0; }
/* Ko'p joyda matn rangi hech qanday text-* klassisiz (default qora rang) chiqarilgani
   uchun qorong'i fonda "qora ekran, qora yozuv" muammosini keltirib chiqargan edi.
   Yuqoridagi umumiy color:#e2e8f0 shu holatlarning barchasini tuzatadi. */
html.dark .card { background:#1e293b; box-shadow:0 1px 3px rgba(0,0,0,.4); }
html.dark table.tbl th { background:#0f172a; color:#94a3b8; border-color:#334155; }
html.dark table.tbl td { border-color:#334155; }
html.dark table.tbl tr:hover td { background:#273449; }

html.dark input:not([type=checkbox]):not([type=radio]),
html.dark select,
html.dark textarea { background:#0f172a !important; border-color:#334155 !important; color:#e2e8f0 !important; }
html.dark input::placeholder, html.dark textarea::placeholder { color:#64748b; }

html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-gray-700 { color:#e2e8f0 !important; }
html.dark .text-gray-600, html.dark .text-gray-500 { color:#94a3b8 !important; }
html.dark .text-gray-400 { color:#64748b !important; }
html.dark .bg-white { background:#1e293b !important; }
html.dark .bg-gray-50 { background:#0f172a !important; }
html.dark .bg-gray-100 { background:#273449 !important; }
html.dark .border, html.dark .border-gray-200, html.dark .border-gray-100,
html.dark .border-gray-300, html.dark .border-gray-50 { border-color:#334155 !important; }

/* Tish xaritasi (odontogramma) va shunga o'xshash bo'limlarda ishlatilgan,
   faqat YORUG' rejim uchun mo'ljallangan shaffof/gradient fonlar (bg-*-50/NN,
   bg-gradient-to-*) qorong'i rejimda ham qorong'i qilib qo'yiladi — aks holda
   fon oq/och qolib, ustidagi (yuqorida yengillashtirilgan) matn "oq fonda oq
   yozuv"ga aylanib, umuman ko'rinmay qolgan edi. */
html.dark [class*="bg-gray-50/"] { background-color:#0f172a !important; }
html.dark [class*="border-cyan-100"] { border-color:#155e75 !important; }
html.dark .text-cyan-700 { color:#67e8f9 !important; }
/* Qolgan (bg-cyan-50/xx, bg-white/xx, gradient) fonlar tegishli modul
   fayllarida to'g'ridan-to'g'ri "dark:" Tailwind klasslari bilan tuzatilgan,
   chunki ular hover holatlarini ham o'z ichiga oladi. */
html.dark .disease-tag { background:#273449; color:#94a3b8; border-color:#334155; }
html.dark .dtb { background:#0f172a; border-color:#334155; color:#cbd5e1; }
html.dark .dental-divider { background:#334155; }
html.dark .tooth-number { color:#94a3b8; }

.theme-opt { border-color:#e5e7eb; color:#6b7280; background:#fff; }
.theme-opt.active { border-color:#0EA5E9; background:#f0f9ff; color:#0369a1; }
html.dark .theme-opt { border-color:#334155; background:#0f172a; color:#94a3b8; }
html.dark .theme-opt.active { border-color:#0EA5E9; background:#0c2233; color:#7dd3fc; }

.disease-tag {
  display:inline-block; padding:.35rem .75rem; border-radius:9999px;
  background:#f1f5f9; color:#475569; border:1px solid #e2e8f0;
  font-weight:500; transition:all .15s;
}
.disease-tag:hover { background:#e0f2fe; border-color:#7dd3fc; color:#0369a1; }

/* Odontogramma */
.dental-row { display:flex; align-items:flex-end; justify-content:center; gap:.5rem; flex-wrap:nowrap; overflow-x:auto; }
.dental-side { display:flex; gap:.35rem; }
.dental-divider { width:2px; align-self:stretch; background:#cbd5e1; margin:0 .25rem; }
.tooth-container { display:flex; flex-direction:column; align-items:center; gap:.15rem; cursor:pointer; }
.tooth-number { font-size:.7rem; font-weight:600; color:#64748b; }
.tooth-wrap { position:relative; }
.chart-badge-phys, .chart-badge-dis {
  position:absolute; width:9px; height:9px; border-radius:50%; border:1.5px solid #fff;
}
.chart-badge-phys { top:-2px; right:0; }
.chart-badge-dis { bottom:-2px; right:0; }
.dtb {
  display:flex; align-items:center; gap:8px; padding:8px 13px; border:2px solid #e5e7eb;
  border-radius:11px; cursor:pointer; font-size:13px; font-weight:500; color:#374151; background:#fff;
  transition:all .15s; user-select:none;
}
.dtb:hover { border-color:#94a3b8; background:#f8fafc; }
.dtb.on-phys { border-color:#06b6d4 !important; background:#ecfeff !important; color:#0e7490 !important; font-weight:700; box-shadow:0 0 0 3px rgba(6,182,212,.18) !important; }
.dtb.on-dis { border-color:#ef4444 !important; background:#fef2f2 !important; color:#991b1b !important; font-weight:700; box-shadow:0 0 0 3px rgba(239,68,68,.18) !important; }
.dtdot { width:11px; height:11px; border-radius:50%; flex-shrink:0; border:1px solid rgba(0,0,0,.15); }