.lang-bn { font-family: 'Hind Siliguri', 'Montserrat', sans-serif; }

/* Thin brand-colored scrollbars without arrow buttons.
   Chrome/Edge/Safari use the ::-webkit-scrollbar rules; setting scrollbar-color there would
   switch them back to native bars with arrows, so the standard properties are Firefox-only. */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #29b6f6, #1e88e5 50%, #1565c0); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #1e88e5, #0d47a1); }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: #1e88e5 transparent; }
}

.text-gradient {
  background: linear-gradient(90deg, #0d47a1, #1e88e5, #29b6f6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-topbar { background: linear-gradient(110deg, #06173d, #102d59 55%, #06173d); }
.bg-hero { background: radial-gradient(1200px 500px at 80% -10%, rgba(41, 182, 246, .25), transparent 60%), linear-gradient(135deg, #06173d, #0a2257 60%, #0d2c6e); }

/* Auth shell: at least one screen tall so the login/OTP card can center vertically on mobile */
.auth-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(90deg, #1565c0, #1e88e5);
  color: #fff; font-weight: 600; border-radius: .5rem; padding: .65rem 1.25rem;
  box-shadow: 0 6px 18px -6px rgba(30, 136, 229, .6);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid #1565c0; color: #1565c0; font-weight: 600;
  border-radius: .5rem; padding: .6rem 1.2rem; transition: background .15s, color .15s;
}
.btn-outline:hover { background: #1565c0; color: #fff; }

.card { background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }

/* Stat tiles (partials/stat.html): the amount stays on one line and shrinks with the tile
   (container query units) instead of wrapping mid-number on narrow laptop screens. */
.stat { container-type: inline-size; }
.stat-value { font-size: 1.25rem; font-size: clamp(1.125rem, 7.5cqw, 1.5rem); white-space: nowrap; }

.side-link { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-radius: .6rem; color: #cbd5e1; transition: background .15s, color .15s; }
.side-link:hover { background: rgba(41, 182, 246, .1); color: #fff; }
.side-link.active { background: linear-gradient(90deg, #1565c0, #1e88e5); color: #fff; box-shadow: 0 6px 16px -8px rgba(41, 182, 246, .8); }
.side-link i { width: 1.25rem; text-align: center; }

.file-drop-zone.is-dragover { border-color: #1e88e5; background: #e1f5fe; }
.file-drop-zone.has-file { border-style: solid; border-color: #90caf9; background: #fff; }

.field-errors { color: #dc2626; font-size: .8rem; margin-top: .25rem; }
.radio-pills > div { display: flex; gap: .75rem; }
.radio-pills label { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid #cbd5e1; border-radius: .5rem; padding: .5rem 1rem; cursor: pointer; }
.radio-pills label:has(input:checked) { border-color: #1e88e5; background: #e1f5fe; color: #1565c0; font-weight: 600; }
.radio-pills input { accent-color: #1565c0; }

/* Confirmation dialog (partials/confirm_dialog.html, js/confirm.js) */
.confirm-dialog { width: calc(100% - 2rem); max-width: 26rem; padding: 0; border: 0; border-radius: 1rem; background: #fff; box-shadow: 0 25px 60px -15px rgba(6, 23, 61, .45); }
.confirm-dialog[open] { animation: confirm-in .18s ease-out; }
.confirm-dialog::backdrop { background: rgba(6, 23, 61, .55); backdrop-filter: blur(3px); }
.confirm-dialog .confirm-icon { background: #e1f5fe; color: #1565c0; }
.confirm-dialog .confirm-ok { background: linear-gradient(90deg, #1565c0, #1e88e5); box-shadow: 0 6px 18px -6px rgba(30, 136, 229, .6); transition: filter .15s; }
.confirm-dialog.is-danger .confirm-icon { background: #fef2f2; color: #dc2626; }
.confirm-dialog.is-danger .confirm-ok { background: linear-gradient(90deg, #b91c1c, #ef4444); box-shadow: 0 6px 18px -6px rgba(220, 38, 38, .55); }
.confirm-dialog .confirm-ok:hover { filter: brightness(1.08); }
@keyframes confirm-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }