.lang-bn { font-family: 'Hind Siliguri', 'Poppins', 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); }

.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; }