:root {
  --teal: #008080;
  --teal-dark: #005f5f;
}
body {
  background: #f8f9fa;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.bg-teal { background-color: var(--teal) !important; }
.text-teal { color: var(--teal) !important; }
.btn-teal { background-color: var(--teal); color: #fff; border-color: var(--teal); }
.btn-teal:hover { background-color: var(--teal-dark); color: #fff; }
.btn-outline-teal { color: var(--teal); border-color: var(--teal); }
.btn-outline-teal:hover { background-color: var(--teal); color: #fff; }

.site-nav { background-color: var(--teal); }
.site-footer { background: #e9ecef; }
.site-footer a { color: var(--teal); text-decoration: none; }

.course-card { border-top: 3px solid var(--teal); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.lesson-group .card-header { background: #fff; }
.lesson-body ruby { font-size: 1.15rem; }
.lesson-body table { background: #fff; }
.lesson-body h4, .lesson-body h5 { color: var(--teal); }

.ad-slot { text-align: center; overflow: hidden; }
.ad-slot-header, .ad-slot-footer { min-height: 90px; }
.ad-slot-sidebar { min-height: 250px; }

.home-content .jumbotron, .page-body .jumbotron { background: #fff; }
.pinyincontainer { display: inline-block; text-align: center; margin: 8px; }
.soundButtonGroup button { margin: 2px; }

.breadcrumb { background: #fff; }

/* RTL support (Arabic / Urdu) */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .navbar-brand { margin-left: 1rem; margin-right: 0; }
html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="rtl"] .me-2 { margin-left: .5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { float: right; padding-left: .5rem; padding-right: 0; content: "/"; }
html[dir="rtl"] .lesson-pager { flex-direction: row-reverse; }
html[dir="rtl"] .text-start { text-align: right !important; }
.lang-menu { max-height: 320px; overflow-y: auto; }