:root{
--primary:#004d40;
--primary-dark:#00352d;
--primary-light:#e7f4f1;
--accent:#c8a951;
--background:#f5f8f7;
--surface:#ffffff;
--white:#fff;
--text:#263238;
--muted:#607d7b;
--border:#dce8e5;
--arabic-bg:#fafcfb;
--arabic-text:#1d2927;
--note-bg:#faf8ef;
--note-text:#5d563d;
--danger:#a33d3d;
--danger-bg:#fff4f4;
--shadow:0 8px 30px rgba(0,77,64,.08);
--radius:18px
}

/* =========================
   DARK MODE COLORS
========================= */
body.dark-mode,
[data-theme="dark"]{
--primary:#26a69a;
--primary-dark:#1a746b;
--primary-light:#132d29;
--accent:#dfc068;
--background:#121817;
--surface:#1c2523;
--white:#ffffff;
--text:#e0e8e6;
--muted:#8fa7a4;
--border:#283835;
--arabic-bg:#16201e;
--arabic-text:#f0f5f4;
--note-bg:#262319;
--note-text:#e2d9b8;
--danger:#e57373;
--danger-bg:#2b1818;
--shadow:0 8px 30px rgba(0,0,0,.45)
}

@media(prefers-color-scheme: dark){
  body:not(.light-mode):not([data-theme="light"]){
    --primary:#26a69a;
    --primary-dark:#1a746b;
    --primary-light:#132d29;
    --accent:#dfc068;
    --background:#121817;
    --surface:#1c2523;
    --white:#ffffff;
    --text:#e0e8e6;
    --muted:#8fa7a4;
    --border:#283835;
    --arabic-bg:#16201e;
    --arabic-text:#f0f5f4;
    --note-bg:#262319;
    --note-text:#e2d9b8;
    --danger:#e57373;
    --danger-bg:#2b1818;
    --shadow:0 8px 30px rgba(0,0,0,.45)
  }
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
font-family:"Noto Sans Bengali",sans-serif;
background:var(--background);
color:var(--text);
line-height:1.8;
min-height:100vh;
transition:background .3s ease, color .3s ease
}

button,input{font-family:inherit}

.hadith-header{
background:linear-gradient(135deg,#002822,#003d33);
color:#fff;
text-align:center;
padding:45px 20px 75px;
position:relative;
overflow:hidden
}

.hadith-header:before,
.hadith-header:after{
content:"";
position:absolute;
border-radius:50%;
background:rgba(255,255,255,.04)
}

.hadith-header:before{
width:250px;
height:250px;
top:-120px;
right:-80px
}

.hadith-header:after{
width:180px;
height:180px;
bottom:-100px;
left:-60px
}

.header-icon{
width:72px;
height:72px;
margin:0 auto 15px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.1);
border-radius:50%;
font-size:34px;
position:relative
}

.hadith-header h1{
font-size:30px;
font-weight:700;
position:relative
}

.hadith-header p{
margin-top:5px;
font-size:15px;
opacity:.88;
position:relative
}

.hadith-container{
width:min(1000px,94%);
margin:-35px auto 50px;
position:relative;
z-index:5
}

.top-bar{
display:flex;
align-items:center;
gap:12px;
margin-bottom:15px
}

.back-btn{
border:1px solid var(--border);
background:var(--surface);
color:var(--primary);
padding:10px 16px;
border-radius:12px;
box-shadow:var(--shadow);
cursor:pointer;
font-size:14px;
transition:background .2s, border-color .2s
}

.breadcrumb{
font-size:14px;
color:var(--muted);
font-weight:600
}

.search-box{
background:var(--surface);
padding:15px;
border-radius:var(--radius);
border:1px solid var(--border);
box-shadow:var(--shadow);
margin-bottom:25px
}

.search-input-wrap{
display:flex;
align-items:center;
gap:10px;
height:52px;
border:1px solid var(--border);
border-radius:13px;
padding-left:14px;
background:var(--background)
}

.search-input-wrap span{
font-size:18px;
color:var(--muted)
}

.search-input-wrap input{
flex:1;
height:100%;
border:0;
outline:0;
background:transparent;
font-size:15px;
color:var(--text);
min-width:0
}

.search-input-wrap button{
height:42px;
border:0;
background:var(--primary);
color:#fff;
padding:0 20px;
margin-right:5px;
border-radius:10px;
cursor:pointer;
font-size:14px;
font-weight:600;
transition:background .2s
}

.search-input-wrap button:hover{
background:var(--primary-dark)
}

.section-heading{
margin-bottom:16px
}

.section-heading h2{
font-size:22px;
color:var(--primary);
font-weight:700
}

.section-heading p{
font-size:13px;
color:var(--muted);
margin-top:2px
}

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

.book-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:22px;
display:flex;
align-items:center;
gap:16px;
cursor:pointer;
box-shadow:var(--shadow);
transition:.2s;
position:relative;
overflow:hidden
}

.book-card:before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
background:var(--primary)
}

.book-card:hover{
transform:translateY(-3px);
border-color:var(--primary);
box-shadow:0 12px 35px rgba(0,0,0,.25)
}

.book-icon{
width:52px;
height:52px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
background:var(--primary-light);
border-radius:14px;
font-size:25px
}

.book-info{
flex:1
}

.book-info h3{
font-size:17px;
color:var(--primary);
font-weight:700
}

.book-info p{
font-size:12px;
color:var(--muted);
margin-top:2px
}

.book-arrow{
font-size:20px;
color:var(--muted)
}

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

.chapter-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:15px;
padding:17px;
cursor:pointer;
box-shadow:var(--shadow);
transition:.2s;
display:flex;
gap:13px
}

.chapter-card:hover{
transform:translateY(-2px);
border-color:var(--primary)
}

.chapter-number{
width:40px;
height:40px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:11px;
background:var(--primary-light);
color:var(--primary);
font-size:14px;
font-weight:700
}

.chapter-info{
flex:1
}

.chapter-info h3{
font-size:15px;
line-height:1.6;
color:var(--text)
}

.chapter-info span{
display:block;
font-size:11px;
color:var(--muted);
margin-top:3px
}

.hadith-list{
display:flex;
flex-direction:column;
gap:18px
}

.hadith-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
overflow:hidden
}

.hadith-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:13px 18px;
background:var(--primary-light);
border-bottom:1px solid var(--border)
}

.hadith-number{
color:var(--primary);
font-size:14px;
font-weight:700
}

.hadith-grade{
padding:4px 9px;
border-radius:20px;
font-size:11px;
font-weight:600;
color:#fff;
background:var(--primary)
}

.hadith-body{
padding:22px
}

.narrator{
color:var(--primary);
font-size:14px;
font-weight:600;
margin-bottom:14px
}

.arabic-text{
direction:rtl;
text-align:right;
font-family:serif;
font-size:23px;
line-height:2.1;
margin-bottom:20px;
color:var(--arabic-text);
padding:15px;
background:var(--arabic-bg);
border:1px solid var(--border);
border-radius:12px
}

.bangla-text{
font-size:17px;
line-height:2.15;
white-space:pre-line;
color:var(--text)
}

.note{
margin-top:18px;
padding:12px 15px;
background:var(--note-bg);
border-right:4px solid var(--accent);
border-radius:10px;
font-size:13px;
color:var(--note-text)
}

.hadith-actions{
display:flex;
gap:8px;
margin-top:20px;
padding-top:15px;
border-top:1px solid var(--border)
}

.action-btn{
border:1px solid var(--border);
background:var(--surface);
color:var(--primary);
padding:8px 13px;
border-radius:9px;
font-size:12px;
cursor:pointer;
transition:.2s
}

.action-btn:hover{
background:var(--primary);
color:#fff
}

.status{
text-align:center;
margin:20px 0;
color:var(--muted)
}

.loader{
width:38px;
height:38px;
margin:15px auto;
border:4px solid var(--border);
border-top-color:var(--primary);
border-radius:50%;
animation:spin .8s linear infinite
}

@keyframes spin{
to{transform:rotate(360deg)}
}

.error{
background:var(--danger-bg);
border:1px solid var(--danger);
color:var(--danger);
padding:18px;
border-radius:14px;
text-align:center;
font-size:14px
}

.empty-state{
text-align:center;
background:var(--surface);
border:1px solid var(--border);
padding:45px 20px;
border-radius:var(--radius);
box-shadow:var(--shadow)
}

.empty-state div{
font-size:40px;
margin-bottom:10px
}

.empty-state h3{
color:var(--primary);
font-size:18px
}

.empty-state p{
font-size:13px;
color:var(--muted)
}

.scroll-top{
position:fixed;
right:18px;
bottom:18px;
width:44px;
height:44px;
border:0;
border-radius:50%;
background:var(--primary);
color:#fff;
font-size:20px;
cursor:pointer;
box-shadow:0 5px 20px rgba(0,0,0,.3);
display:none;
z-index:20
}

.hadith-note{
text-align:center;
margin-top:35px;
padding:0 15px;
color:var(--muted);
font-size:12px
}

.hadith-note strong{
color:var(--primary)
}

@media(max-width:700px){
.books-grid,
.chapters-grid{
grid-template-columns:1fr
}

.hadith-header{
padding:38px 15px 65px
}

.header-icon{
width:65px;
height:65px;
font-size:30px
}

.hadith-header h1{
font-size:25px
}

.hadith-header p{
font-size:13px
}

.hadith-container{
width:94%;
margin-top:-30px
}

.search-input-wrap{
height:50px
}

.search-input-wrap button{
padding:0 14px
}

.book-card{
padding:18px
}

.hadith-body{
padding:17px
}

.arabic-text{
font-size:21px;
line-height:2
}

.bangla-text{
font-size:16px;
line-height:2.1
}

.hadith-actions{
flex-wrap:wrap
}

.action-btn{
flex:1
}
}