@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;600;700&family=Noto+Serif+Bengali:wght@400;600;700&display=swap');



:root { --ink:#f7efe8; --muted:#b9aaa0; --green:#0d0b0a; --mint:#2c1c12; --gold:#ff861c; --paper:#15110e; --line:#49352a; --surface:#211914; }

* { box-sizing:border-box; }

*[hidden] { display:none !important; }

body { margin:0; color:var(--ink); background:var(--paper); font-family:'Noto Serif Bengali', serif; font-size:16px; }

a { color:inherit; text-decoration:none; }

header { background:var(--green); color:#fff; padding:16px 5vw; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:3px solid var(--gold); }

.brand { font-family:'Noto Kufi Arabic', sans-serif; font-size:1.5rem; font-weight:700; }

nav { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; }

nav a { margin:0; padding:9px 13px; border:1px solid #80603f; border-radius:6px; color:#fff0df; font-size:1rem; line-height:1.3; white-space:nowrap; transition:.2s; }

nav a:hover, nav a.active { color:#fff; background:var(--gold); border-color:var(--gold); }

.nav-dropdown { position:relative; display:inline-block; }
.nav-dropdown-toggle { margin:0; padding:9px 13px; border:1px solid #80603f; border-radius:6px; background:transparent; color:#fff0df; font:inherit; font-size:1rem; line-height:1.3; white-space:nowrap; cursor:pointer; transition:.2s; }
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.active { color:#fff; background:var(--gold); border-color:var(--gold); }
.nav-dropdown-menu { position:absolute; top:calc(100% + 6px); right:0; min-width:130px; background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; display:none; flex-direction:column; z-index:60; box-shadow:0 10px 24px rgba(0,0,0,.35); }
.nav-dropdown.open .nav-dropdown-menu { display:flex; }
.nav-dropdown-menu a { padding:11px 16px; color:var(--ink); text-decoration:none; font-size:.95rem; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active { background:var(--mint); color:var(--gold); }

.container { width:min(1100px,90vw); margin:0 auto; }

.hero { padding:70px 0 35px; background:linear-gradient(135deg,#302015,#15110e 60%,#3a2415); }

.hero h1 { margin:0 0 12px; font-family:'Noto Kufi Arabic',sans-serif; font-size:clamp(2rem,5vw,4rem); color:var(--gold); }

.hero p { margin:0; color:var(--muted); font-size:1.1rem; }

.search { margin-top:30px; display:flex; gap:10px; }

.search-input { position:relative; flex:1; }

.search-input input { width:100%; }

.suggestions { position:absolute; z-index:5; top:calc(100% + 6px); left:0; right:0; background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:0 12px 25px #0008; overflow:hidden; }

.suggestions a { display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }

.suggestions a:last-child { border-bottom:0; }

.suggestions a:hover { background:#3a2517; }

.suggestions span { color:var(--gold); font-weight:700; }

.suggestions strong { color:var(--ink); }

.suggestions small { color:var(--muted); }

input, textarea, select { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); font:inherit; }

button, .button { border:0; border-radius:6px; background:var(--gold); color:#fff; padding:12px 20px; font:inherit; cursor:pointer; display:inline-block; }

.section-title { margin:38px 0 18px; display:flex; justify-content:space-between; align-items:center; }

.section-title h2 { margin:0; color:#fff; font-size:1.55rem; }

.surah-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; padding-bottom:60px; }

.surah-card { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--surface); transition:.2s; }

.surah-link { min-width:0; }

.surah-link strong, .surah-link small { display:block; }

.surah-link strong { color:#fff; font-size:1.1rem; }

.surah-link small { color:var(--muted); }

.play-surah { padding:8px 11px; font-size:.9rem; }

.full-player { width:min(500px,100%); margin:18px 0 30px; }

.account-page { width:min(560px,92vw); margin:55px auto 80px; }

.account-panel { padding:28px; border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:8px; background:var(--surface); }

.account-panel h1 { margin-top:0; color:#fff; }

.account-tabs { display:flex; gap:8px; margin:20px 0; border-bottom:1px solid var(--line); padding-bottom:10px; }

.account-tabs a { padding:9px 16px; border:1px solid var(--line); border-radius:6px; color:var(--muted); }

.account-tabs a.selected, .account-tabs a:hover { color:#fff; background:var(--gold); border-color:var(--gold); }

.account-panel form { display:grid; gap:8px; }

.account-panel form label { color:var(--muted); margin-top:8px; }

.account-panel form button { margin-top:14px; }

.account-panel input:disabled { opacity:.7; cursor:not-allowed; }

.form-help { color:var(--muted); font-size:.85rem; }

.account-welcome h2 { color:#fff; }

.account-error { margin:15px 0; }

.names-hero { padding:42px 0 28px; background:linear-gradient(135deg,#2b1a10,#151311 55%,#332116); }

.names-hero h1 { margin:0 0 8px; color:var(--gold); font-family:'Noto Kufi Arabic',sans-serif; }

.names-hero p { margin:0; color:var(--muted); }

.names-page { padding:34px 0 60px; }

.names-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }

.name-card { position:relative; min-height:170px; padding:25px 18px 18px 58px; border:1px solid var(--line); border-radius:8px; background:var(--surface); transition:.2s; }

.name-card:hover { transform:translateY(-2px); border-color:var(--gold); box-shadow:0 8px 24px #ef7d1a26; }

.name-number { position:absolute; left:18px; top:62px; color:var(--gold); font-size:1.25rem; font-weight:700; }

.name-arabic { direction:rtl; text-align:right; color:var(--ink); font-family:'Noto Kufi Arabic',sans-serif; font-size:1.35rem; line-height:1.7; white-space:nowrap; }

.name-pronunciation { color:var(--muted); font-size:1.1rem; margin-top:4px; }

.name-meaning { color:var(--muted); font-size:1rem; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }

.gender-tabs { display:flex; gap:10px; margin-top:20px; }
.gender-tabs a { padding:9px 22px; border:1px solid var(--gold); border-radius:20px; color:var(--gold); text-decoration:none; font-weight:600; transition:.2s; }
.gender-tabs a:hover { background:#ff861c22; }
.gender-tabs a.active { background:var(--gold); color:#fff; }
.baby-name-card { min-height:110px; }
.baby-name-title { color:var(--gold); font-size:1.3rem; font-weight:700; font-family:'Noto Kufi Arabic',sans-serif; }
.pagination { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; justify-content:center; }
.pagination a, .pagination-ellipsis { padding:8px 14px; border:1px solid var(--line); border-radius:6px; color:var(--ink); text-decoration:none; font-size:.95rem; }
.pagination a:hover { border-color:var(--gold); color:var(--gold); }
.pagination a.active { background:var(--gold); border-color:var(--gold); color:#fff; }
.pagination-ellipsis { color:var(--muted); border:0; }

.name-fazilat { color:var(--gold); font-size:.85rem; line-height:1.5; margin-top:8px; font-style:italic; }

.tasbih-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }

.tasbih-card { position:relative; padding:25px 20px 20px 58px; border:1px solid var(--line); border-radius:8px; background:var(--surface); transition:.2s; }

.tasbih-card:hover { transform:translateY(-2px); border-color:var(--gold); box-shadow:0 8px 24px #ef7d1a26; }

.tasbih-card .name-arabic { white-space:normal; }

.tasbih-meaning { color:var(--muted); font-size:1rem; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }

.tasbih-count { color:var(--gold); font-size:.9rem; font-weight:700; margin-top:10px; }

.tasbih-virtue { color:var(--muted); font-size:.92rem; line-height:1.6; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }

.tasbih-virtue strong { color:var(--ink); }

.tasbih-counter { display:flex; align-items:center; gap:14px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.counter-tap { flex:1; background:var(--mint); border:1px solid var(--gold); color:var(--gold); border-radius:8px; padding:12px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; transition:.15s; -webkit-tap-highlight-color:transparent; margin-right:5px; }
.counter-tap:active { transform:scale(.96); background:var(--gold); color:#fff; }
.counter-value { font-size:1.8rem; font-weight:700; line-height:1; }
.counter-tap small { color:var(--muted); font-size:.72rem; }
.counter-tap:active small { color:#fff; }
.counter-reset { background:transparent; border:1px solid var(--line); color:var(--muted); padding:10px 14px; border-radius:8px; font-size:.85rem; margin-left:14px; flex-shrink:0; }
.counter-reset:hover { border-color:var(--gold); color:var(--gold); }

.dua-category { margin-bottom: 32px; }

.dua-category-title { color:var(--gold); font-family:'Noto Kufi Arabic',sans-serif; font-size:1.4rem; margin:0 0 14px; padding-bottom:8px; border-bottom:2px solid var(--line); }

.dua-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }

.dua-card { position:relative; padding:20px; border:1px solid var(--line); border-radius:8px; background:var(--surface); transition:.2s; }

.dua-card:hover { transform:translateY(-2px); border-color:var(--gold); box-shadow:0 8px 24px #ef7d1a26; }

.dua-card .name-arabic { white-space:normal; margin-top:8px; }

.dua-title { margin:0; color:#fff; font-size:1.05rem; }

.dua-reference { color:var(--gold); font-size:.85rem; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }

.alert-panel { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:22px; margin-bottom:18px; }

.alert-panel-title { margin:0 0 6px; color:var(--gold); font-family:'Noto Kufi Arabic',sans-serif; font-size:1.2rem; }

.alert-panel-desc { color:var(--muted); font-size:.92rem; margin:0 0 14px; }

.alert-checkbox-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 16px; margin-bottom:16px; }

.alert-checkbox { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:.95rem; cursor:pointer; flex-wrap:wrap; }

.alert-checkbox input[type="checkbox"] { width:auto; }

.alert-time-picker { display:inline-flex; align-items:center; gap:3px; }
.alert-time-select { padding:4px 4px; text-align:center; }
.alert-time-select[name$="_hour"], .alert-time-select[name$="_minute"] { width:52px; }
.alert-time-select[name$="_ampm"] { width:60px; }
.alert-time-colon { color:var(--muted); }

.prayer-page { padding:30px 0 60px; }

.prayer-controls { display:flex; align-items:end; gap:14px; margin-bottom:16px; }

.prayer-controls > div { flex:1; }

.prayer-controls label { display:block; color:var(--muted); margin-bottom:6px; }

.prayer-controls button { white-space:nowrap; }

.fasting-controls { display:flex; align-items:center; gap:14px; margin-bottom:16px; }

.fasting-controls .notice { flex:1; margin-bottom:0; }

.fasting-controls button { white-space:nowrap; }

.prayer-meta { color:var(--muted); margin:20px 0 12px; }

.prayer-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }

.prayer-card { display:flex; align-items:center; gap:15px; min-height:130px; padding:22px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }

.prayer-icon { color:var(--gold); font-size:1.8rem; }

.prayer-card h2 { margin:0 0 8px; color:var(--ink); font-size:1.25rem; }

.prayer-card strong { color:var(--gold); font-size:1.5rem; }

.prayer-card:last-child .prayer-range::after { content:'শেষ ৩ ঘণ্টা তাহাজ্জুদের সবচেয়ে উত্তম সময়'; display:block; margin-top:10px; color:var(--muted); font-size:.75rem; }

.prayer-range { display:flex; gap:16px; flex-wrap:wrap; }

.prayer-range span { color:var(--muted); font-size:.85rem; }

.prayer-range strong { display:block; font-size:1.45rem; margin-top:3px; }

.forbidden-section { margin-top:38px; padding-top:25px; border-top:1px solid var(--line); }

.forbidden-section h2 { margin:0 0 5px; color:var(--gold); }

.forbidden-section p { color:var(--muted); margin:0 0 16px; }

.forbidden-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }

.forbidden-card { padding:18px; border:1px solid #a34b27; border-left:4px solid var(--gold); border-radius:8px; background:#2a1b11; }

.forbidden-card h3 { margin:0 0 10px; color:#fff; font-size:1rem; }

.forbidden-card strong { color:var(--gold); font-size:1.25rem; }

.fasting-page { padding:30px 0 60px; }

.fasting-upcoming { margin:22px 0 28px; }

.fasting-upcoming h2 { margin:0 0 12px; color:var(--gold); }

.year-button { margin:4px 0 24px; }

.upcoming-days { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }

.upcoming-card { display:grid; gap:5px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }

.upcoming-card.today { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }

.upcoming-card strong { color:var(--ink); }

.upcoming-card small { color:var(--muted); }

.upcoming-card span { display:flex; justify-content:space-between; color:var(--muted); font-size:.85rem; }

.upcoming-card b { color:var(--gold); }

.fasting-hero { background:linear-gradient(135deg,#2b1a10,#151311 55%,#332116); }

.fasting-months { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }

.fasting-month { min-width:0; border:1px solid var(--line); border-radius:8px; background:var(--surface); overflow:hidden; }

.fasting-month h2 { margin:0; padding:15px 18px; color:var(--gold); font-size:1.15rem; border-bottom:1px solid var(--line); }

.fasting-table-wrap { overflow:auto; }

.fasting-table { width:100%; border-collapse:collapse; }

.fasting-table th, .fasting-table td { padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }

.fasting-table th { color:var(--muted); font-size:.8rem; }

.fasting-table td { color:var(--ink); }

.fasting-table td strong { color:var(--gold); }

.fasting-table small { color:var(--muted); }

.loading { color:var(--muted); padding:24px 0; }

@media (max-width:900px) { .prayer-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

@media (max-width:650px) { .container { width:min(94vw,1100px); } .prayer-controls { display:block; } .prayer-controls button { margin-top:12px; width:100%; } .fasting-controls { display:block; } .fasting-controls button { margin-top:12px; width:100%; } .prayer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .prayer-card { padding:14px; min-height:115px; } .prayer-card strong { font-size:1.15rem; } .prayer-range { gap:8px; } .fasting-table th, .fasting-table td { padding:8px; font-size:.78rem; } }

@media (max-width:420px) { .prayer-grid { grid-template-columns:1fr; } }

@media (max-width:650px) { .forbidden-grid { grid-template-columns:1fr; } }

@media (max-width:850px) { .fasting-months { grid-template-columns:1fr; } }

@media (max-width:700px) { .upcoming-days { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (max-width:420px) { .upcoming-days { grid-template-columns:1fr; } }

@media (max-width:950px) { .names-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

@media (max-width:700px) { .names-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .tasbih-grid { grid-template-columns:1fr; } .dua-grid { grid-template-columns:1fr; } .alert-checkbox-grid { grid-template-columns:1fr; } }

@media (max-width:450px) { .names-grid { grid-template-columns:1fr; } }

.surah-card:hover { transform:translateY(-2px); border-color:var(--gold); box-shadow:0 8px 24px #ef7d1a26; }

.number { color:var(--gold); font-weight:700; }

.surah-card strong { display:block; color:#fff; font-size:1.1rem; }

.surah-card small { color:var(--muted); }

.arabic-name { font-family:'Noto Kufi Arabic',sans-serif; font-size:1.1rem; }

.reader-head { padding:35px 0 22px; display:flex; justify-content:space-between; align-items:end; gap:15px; }

.reader-head h1 { margin:0; color:#fff; }

.meta { color:var(--muted); }

.ayah { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--gold); padding:24px; margin:14px 0; border-radius:0 8px 8px 0; }

.ayah-number { color:var(--gold); font-weight:700; }

.arabic { direction:rtl; text-align:right; font-family:'Noto Kufi Arabic',sans-serif; font-size:1.6rem; line-height:2.2; margin:10px 0 16px; }

.label { color:#fff; font-weight:700; margin:8px 0 3px; }

.audio { width:100%; margin-top:12px; }

footer { padding:25px; text-align:center; color:var(--muted); border-top:1px solid var(--line); }

.footer-nav { margin-top:10px; }
.footer-nav a { color:var(--muted); text-decoration:underline; }
.footer-nav a:hover { color:#fff; background:var(--gold); border-color:var(--gold); }

.admin-wrap { max-width:1100px; margin:40px auto; width:90vw; }

.admin-tabs { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }

.admin-tabs a { padding:10px 18px; border:1px solid var(--line); border-radius:6px; color:var(--muted); text-decoration:none; background:var(--surface); }

.admin-tabs a.active { color:var(--gold); border-color:var(--gold); font-weight:700; }

.admin-panel { background:var(--surface); border:1px solid var(--line); padding:24px; border-radius:8px; margin-bottom:22px; }

.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }

.form-grid .full { grid-column:1/-1; }

.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; } th,td { text-align:left; padding:12px; border-bottom:1px solid var(--line); white-space:nowrap; } th { color:#fff; }

.notice { padding:12px 15px; background:var(--mint); border-left:3px solid var(--green); margin-bottom:18px; }

@media (max-width:650px) { header { display:block; padding:14px 4vw; } .brand { display:block; margin-bottom:12px; font-size:1.1rem; } nav { justify-content:flex-start; gap:6px; } nav a { padding:7px 9px; font-size:.78rem; } .hero { padding-top:45px; } .search { flex-direction:column; } .form-grid { grid-template-columns:1fr; } .reader-head { display:block; } .arabic { font-size:1.25rem; } }



.alert-widget { position:fixed; right:20px; top:90px; z-index:200; }

.alert-widget-toggle { width:56px; height:56px; border-radius:50%; font-size:1.5rem; box-shadow:0 6px 18px rgba(0,0,0,.4); padding:0; }

.alert-widget-box { position:absolute; right:0; top:70px; width:300px; max-width:80vw; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.5); }

.alert-widget-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; color:var(--gold); }

.alert-widget-close { background:transparent; color:var(--muted); padding:0; font-size:1rem; border-radius:4px; width:24px; height:24px; line-height:1; }

.alert-widget-steps { margin:0 0 14px; padding-left:20px; color:var(--ink); font-size:.9rem; line-height:1.7; }

.alert-widget-steps a { color:var(--gold); text-decoration:underline; }

.alert-widget-cta { display:block; text-align:center; }

@media (max-width:650px) { .alert-widget { right:14px; top:80px; } .alert-widget-box { width:78vw; } }