:root { --brancolor:#124b65; --bg-gray-color:#eff3f6; --dark-bg:#28292c; }
body { background: var(--bg-gray-color); font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans', Arial, sans-serif; }
.container { max-width: 1120px; margin: 0 auto; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.border { border: 1px solid rgba(0,0,0,.2); }
.bg-brand { background: var(--brancolor); color: #fff; }
.btn { background: var(--brancolor); color: #fff; border: none; padding: 8px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; gap:8px; align-items:center; }
.btn:hover { opacity: .9 }
.voice-box button { color:#000; font-size:15px; background:#f0fcfc; padding:7px 20px; margin-right:15px; border-radius:50px; border:1px solid #cf8e00; transition:.3s; }
.textarea:focus { outline:none; box-shadow:0 0 5px #124b65; }

/* Font Faces - Keep for backwards compatibility but with fallbacks */
@font-face {
  font-family: "SutonnyMJ";
  src: local("SutonnyMJ"),
       local("Sutonnymj"),
       url("/assets/common/fonts/SutonnyMJ.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SolaimanLipi";
  src: local("SolaimanLipi"),
       url("/assets/common/fonts/SolaimanLipiNormal.woff") format("woff"),
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.textarea {
  width: 100%;
  min-height: 220px;
  font-size: 1.5rem;
  line-height: 1.75rem;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  resize: both;
  overflow: auto;
  background-color: #fff;
}

/* UPDATED: Prioritize Google Fonts which are reliable */
.unicode-text {
  font-family: "Noto Serif Bengali", "SolaimanLipi", "Kalpurush", sans-serif !important;
  color: #111;
}

.bijoy-text {
  font-family: "SutonnyMJ", "Vrinda", monospace !important;
  color: #111;
  background-color: #fdfcfb;
}

/* CRITICAL: ID selectors for maximum specificity */
textarea#EDT {
  font-family: "Noto Serif Bengali", "SolaimanLipi", "Kalpurush", sans-serif !important;
  font-size: 1.5rem !important;
  color: #111 !important;
}

textarea#CONVERTEDT {
  font-family: "SutonnyMJ", "Vrinda", "Times New Roman", monospace !important;
  font-size: 1.5rem !important;
  color: #111 !important;
  background-color: #fdfcfb !important;
}

.logo-link img {
  height: 50px;
  width: auto;
  transition: transform 0.25s ease;
}

.logo-link:hover img {
  transform: scale(1.05);
}

@media (max-width: 600px) {
  .logo-link img {
    height: 40px;
  }
}

@keyframes ping {
  0% { transform: scale(1); opacity: 0.7; }
  75%, 100% { transform: scale(2); opacity: 0; }
}

.animate-ping-data {
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}