/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080d08;--bg2:#0f140f;--bg3:#141e14;
  --card:#192119;--card-hover:#1e2a1e;--border:#243624;
  --gold:#c9a84c;--gold2:#e8c96b;--gold3:#f5dfa0;
  --green:#2e7d32;--green2:#388e3c;--green3:#43a047;
  --text:#eaeaea;--text2:#b0c0b0;--text3:#7a8f7a;
  --arabic-font:'Noto Naskh Arabic','Amiri',serif;
  --ui-font:'Outfit',sans-serif;
  --radius:14px;--radius-sm:8px;
  --shadow:0 8px 32px rgba(0,0,0,.5);
  --fs-arabic:26px;--fs-roman:15px;--fs-urdu:18px;--fs-hindi:15px;
}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--text);font-family:var(--ui-font);min-height:100vh;display:flex;flex-direction:column;line-height:1.6}
::selection{background:var(--green);color:#fff}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--green2);border-radius:4px}
.hidden{display:none!important}

/* ===== HEADER ===== */
#main-header{
  position:sticky;top:0;z-index:200;
  background:rgba(8,13,8,.95);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 20px;height:60px;
  display:flex;align-items:center;
}
.header-inner{
  width:100%;max-width:1300px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-icon{font-size:26px}
.logo-title{display:block;font-size:18px;font-weight:700;color:var(--gold);line-height:1.1;letter-spacing:-0.3px}
.logo-accent{color:var(--gold2)}
.logo-sub{display:block;font-size:10px;color:var(--text3)}
.header-center{flex:1;max-width:480px}
.search-wrap{position:relative}
.search-wrap .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;pointer-events:none}
#search-input{
  width:100%;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:9px 14px 9px 36px;
  color:var(--text);font-family:var(--ui-font);font-size:14px;outline:none;
  transition:border .2s,box-shadow .2s;
}
#search-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.15)}
.header-right{display:flex;align-items:center;gap:8px}
.icon-btn{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:7px 10px;cursor:pointer;
  color:var(--text2);font-size:13px;font-family:var(--ui-font);
  transition:all .2s;white-space:nowrap;
}
.icon-btn:hover{background:var(--card-hover);border-color:var(--green3);color:var(--text)}

/* ===== BREADCRUMB ===== */
.breadcrumb{background:var(--bg2);border-bottom:1px solid var(--border);padding:8px 20px}
.breadcrumb-inner{max-width:1300px;margin:0 auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text3)}
.breadcrumb-inner a{color:var(--gold);text-decoration:none}
.breadcrumb-inner a:hover{text-decoration:underline}

/* ===== HERO ===== */
.hero{text-align:center;padding:52px 20px 24px}
.hero-bismillah{font-family:var(--arabic-font);font-size:clamp(24px,5vw,44px);color:var(--gold);line-height:1.8;margin-bottom:16px;text-shadow:0 0 40px rgba(201,168,76,.25)}
.hero h1{font-size:clamp(22px,4vw,38px);font-weight:700;margin-bottom:10px;line-height:1.2}
.gold{color:var(--gold)}
.hero-sub{color:var(--text2);font-size:15px}

/* ===== STATS ===== */
.stats-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:0 20px 28px}
.stat-pill{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 22px;
  text-align:center;min-width:90px;transition:all .2s;
}
.stat-pill:hover{border-color:var(--green3);transform:translateY(-2px)}
.stat-n{display:block;font-size:22px;font-weight:700;color:var(--gold2)}
.stat-l{display:block;font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}

/* ===== FILTERS ===== */
.filters-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  max-width:1300px;margin:0 auto 20px;padding:0 20px;
}
.filter-group{display:flex;align-items:center;gap:8px}
.filter-group label{font-size:13px;color:var(--text3)}
.filter-btn{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:6px 14px;cursor:pointer;
  color:var(--text2);font-size:13px;font-family:var(--ui-font);
  transition:all .2s;
}
.filter-btn.active{background:var(--green);border-color:var(--green3);color:#fff}
.filter-btn:hover:not(.active){border-color:var(--green3)}
select{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:6px 10px;
  color:var(--text);font-family:var(--ui-font);font-size:13px;
  cursor:pointer;outline:none;
}
select:focus{border-color:var(--gold)}

/* ===== SURAH GRID ===== */
#home-view{flex:1}
.surah-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:12px;padding:0 20px 60px;
  max-width:1300px;margin:0 auto;
}
.surah-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:15px 16px;
  cursor:pointer;transition:all .22s;
  display:flex;align-items:center;gap:12px;
  position:relative;overflow:hidden;
  text-decoration:none;color:inherit;
}
.surah-card::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(to bottom,var(--gold),var(--green));
  opacity:0;transition:opacity .22s;
}
.surah-card:hover{background:var(--card-hover);border-color:var(--green2);transform:translateY(-2px);box-shadow:var(--shadow)}
.surah-card:hover::after{opacity:1}
.surah-num{
  width:42px;height:42px;min-width:42px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--gold);
}
.surah-info{flex:1;min-width:0}
.surah-english{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.surah-details{font-size:11px;color:var(--text3);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.surah-arabic-card{font-family:var(--arabic-font);font-size:19px;color:var(--gold);direction:rtl;flex-shrink:0}
.badge{font-size:10px;padding:2px 7px;border-radius:8px;border:1px solid}
.badge.meccan{color:#81c784;border-color:#2e7d32;background:rgba(46,125,50,.1)}
.badge.medinan{color:#64b5f6;border-color:#1565c0;background:rgba(21,101,192,.1)}
.bookmark-star{position:absolute;top:8px;right:8px;font-size:12px;opacity:0;transition:opacity .2s}
.surah-card:hover .bookmark-star,.surah-card.bookmarked .bookmark-star{opacity:1}
.surah-card.bookmarked .bookmark-star{color:var(--gold2)}

/* ===== READER ===== */
.reader-view{flex:1;display:flex;flex-direction:column}
.reader-topbar{
  position:sticky;top:60px;z-index:150;
  background:rgba(8,13,8,.96);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:10px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.back-btn{
  background:var(--card);border:1px solid var(--border);
  color:var(--gold);padding:7px 14px;border-radius:var(--radius-sm);
  cursor:pointer;font-family:var(--ui-font);font-size:13px;
  transition:all .2s;white-space:nowrap;
}
.back-btn:hover{background:var(--card-hover);border-color:var(--gold)}
.reader-title-text{font-size:16px;font-weight:600;color:var(--text);flex:1;min-width:0;text-align:center}
.reader-controls{display:flex;gap:6px;align-items:center}
.pdf-btn{background:rgba(46,125,50,.2)!important;border-color:var(--green2)!important;color:var(--gold)!important;font-weight:600}
.pdf-btn:hover{background:var(--green)!important}

/* Progress bar */
#progress-bar{
  height:3px;background:linear-gradient(to right,var(--green3),var(--gold));
  width:0%;transition:width .1s;position:sticky;top:calc(60px + 52px);z-index:140;
}

/* Lang row */
.lang-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 20px;background:var(--bg2);
  border-bottom:1px solid var(--border);
  position:sticky;top:calc(60px + 52px + 3px);z-index:130;
  max-width:100%;
}
.lang-label-txt{font-size:12px;color:var(--text3);margin-right:4px}
.lang-btn{
  background:var(--card);border:1px solid var(--border);
  color:var(--text3);padding:5px 12px;border-radius:16px;
  cursor:pointer;font-family:var(--ui-font);font-size:12px;
  transition:all .2s;
}
.lang-btn.active{background:var(--green);border-color:var(--green3);color:#fff}
.jump-wrap{display:flex;gap:6px;margin-left:auto;align-items:center}
#jump-input{
  width:70px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:5px 8px;
  color:var(--text);font-family:var(--ui-font);font-size:13px;outline:none;
}
#jump-btn{
  background:var(--green);border:none;border-radius:var(--radius-sm);
  padding:5px 10px;color:#fff;cursor:pointer;font-size:13px;
  font-family:var(--ui-font);transition:background .2s;
}
#jump-btn:hover{background:var(--green3)}

/* Surah Banner */
.surah-banner{text-align:center;padding:36px 24px 20px}
.banner-arabic{font-family:var(--arabic-font);font-size:clamp(30px,6vw,52px);color:var(--gold);display:block;margin-bottom:10px;line-height:1.5;text-shadow:0 0 30px rgba(201,168,76,.2)}
.banner-english{font-size:clamp(18px,3vw,26px);font-weight:700;color:var(--text)}
.banner-meta{font-size:13px;color:var(--text3);margin-top:8px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.banner-meta span{display:flex;align-items:center;gap:4px}

/* Surah info table */
.surah-info-table{
  margin:0 20px 24px;border-radius:var(--radius);
  border:1px solid var(--border);overflow:hidden;
}
.surah-info-table table{width:100%;border-collapse:collapse;font-size:13px}
.surah-info-table th{
  background:var(--bg3);color:var(--gold);
  padding:10px 14px;text-align:left;font-weight:500;
  border-bottom:1px solid var(--border);
}
.surah-info-table td{
  padding:10px 14px;border-bottom:1px solid var(--border);
  color:var(--text2);
}
.surah-info-table tr:last-child td{border-bottom:none}
.surah-info-table tr:hover td{background:var(--card)}

/* Bismillah */
.bismillah-banner{
  text-align:center;font-family:var(--arabic-font);
  font-size:clamp(22px,4vw,34px);color:var(--gold2);
  padding:20px 24px;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin:0 20px 8px;line-height:2;
  background:linear-gradient(135deg,rgba(201,168,76,.04),transparent);
}

/* Reading info bar */
.reading-info{
  display:flex;justify-content:center;gap:20px;
  padding:8px 20px 16px;font-size:12px;color:var(--text3);flex-wrap:wrap;
}

/* Ayah cards */
#reader-content{padding:8px 20px 20px;max-width:860px;margin:0 auto;width:100%}
.ayah-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;margin-bottom:14px;
  transition:border-color .2s;
  scroll-margin-top:200px;
}
.ayah-card:hover{border-color:var(--green2)}
.ayah-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ayah-num-badge{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:20px;padding:3px 12px;
  font-size:12px;color:var(--gold);cursor:pointer;
  transition:all .2s;user-select:none;
}
.ayah-num-badge:hover{background:var(--green);border-color:var(--green3);color:#fff}
.ayah-actions{display:flex;gap:6px;margin-left:auto}
.ayah-copy-btn,.ayah-share-btn{
  background:none;border:1px solid var(--border);
  border-radius:6px;padding:3px 8px;cursor:pointer;
  color:var(--text3);font-size:11px;font-family:var(--ui-font);
  transition:all .2s;
}
.ayah-copy-btn:hover{background:var(--card-hover);color:var(--text);border-color:var(--green3)}
.arabic-text{
  font-family:var(--arabic-font);font-size:var(--fs-arabic);
  direction:rtl;text-align:right;line-height:2.2;
  color:var(--gold2);margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px solid var(--border);
}
.roman-text,.urdu-text,.hindi-text{margin-bottom:10px;position:relative}
.roman-text{font-size:var(--fs-roman);line-height:1.9;color:var(--text)}
.urdu-text{
  font-family:var(--arabic-font);font-size:var(--fs-urdu);
  direction:rtl;text-align:right;color:#a5d6a7;line-height:2;
}
.hindi-text{font-size:var(--fs-hindi);line-height:1.9;color:#90caf9}
.lang-tag{
  display:inline-block;font-size:9px;color:var(--text3);
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:4px;padding:1px 5px;
}

/* Prev / Next nav */
.surah-nav{
  display:flex;justify-content:space-between;gap:12px;
  padding:20px;max-width:860px;margin:0 auto;width:100%;
}
.nav-surah-btn{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 18px;
  color:var(--text2);font-family:var(--ui-font);font-size:13px;
  cursor:pointer;transition:all .2s;flex:1;text-align:center;
}
.nav-surah-btn:hover:not(:disabled){background:var(--green);border-color:var(--green3);color:#fff}
.nav-surah-btn:disabled{opacity:.3;cursor:not-allowed}

/* Scroll to top */
.scroll-top{
  position:fixed;bottom:24px;right:24px;z-index:500;
  background:var(--green2);border:none;border-radius:50%;
  width:44px;height:44px;cursor:pointer;color:#fff;
  font-size:18px;box-shadow:var(--shadow);
  transition:all .2s;opacity:0;pointer-events:none;
}
.scroll-top.visible{opacity:1;pointer-events:auto}
.scroll-top:hover{background:var(--green3);transform:translateY(-3px)}

/* Toast */
.toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--green);color:#fff;border-radius:20px;
  padding:8px 20px;font-size:13px;z-index:999;
  opacity:0;transition:all .3s;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* No results */
.no-results{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text3)}
.no-results .emoji{font-size:48px;display:block;margin-bottom:12px}

/* Footer */
footer{border-top:1px solid var(--border);padding:24px 20px;background:var(--bg2)}
.footer-inner{max-width:1300px;margin:0 auto;text-align:center}
.footer-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:12px}
.footer-links a{color:var(--gold);text-decoration:none;font-size:13px}
.footer-links a:hover{text-decoration:underline}
.footer-copy{font-size:12px;color:var(--text3)}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .header-center{display:none}
  #search-input{width:100%}
  .surah-grid{grid-template-columns:1fr;gap:8px;padding:0 12px 40px}
  .reader-topbar{top:60px;gap:8px}
  .reader-controls{gap:4px}
  .pdf-btn span{display:none}
  #reader-content{padding:8px 12px 20px}
  .surah-info-table{margin:0 12px 16px}
  .bismillah-banner{margin:0 12px 8px;font-size:22px}
  .surah-nav{padding:12px}
  .filters-bar{gap:10px}
}
@media(max-width:480px){
  .stats-row{gap:8px}
  .stat-pill{padding:10px 14px;min-width:70px}
  .stat-n{font-size:18px}
  .reader-controls .icon-btn:not(.pdf-btn){padding:6px 7px}
}

/* ===== PARA / JUZ PDF SECTION ===== */
.para-section{
  border-top:1px solid var(--border);
  padding:40px 20px 60px;
  max-width:1300px;margin:0 auto;width:100%;
}
.para-header{text-align:center;margin-bottom:20px}
.para-header h2{font-size:clamp(18px,3vw,26px);font-weight:700;color:var(--text);margin-bottom:8px}
.para-header p{font-size:14px;color:var(--text2);max-width:600px;margin:0 auto}
.para-options{display:flex;justify-content:center;margin-bottom:24px}
.para-lang-select{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 20px;
  font-size:13px;color:var(--text2);
}
.para-lang-select label:first-child{color:var(--text3);font-weight:500}
.chk{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text2)}
.chk input[type="checkbox"]{
  width:15px;height:15px;cursor:pointer;
  accent-color:var(--green3);
}
.para-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
}
.para-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 12px;
  cursor:pointer;transition:all .22s;text-align:center;
  position:relative;overflow:hidden;
}
.para-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(to right,var(--gold),var(--green));
  opacity:0;transition:opacity .2s;
}
.para-card:hover{background:var(--card-hover);border-color:var(--green2);transform:translateY(-2px);box-shadow:var(--shadow)}
.para-card:hover::before{opacity:1}
.para-card.loading{opacity:.6;pointer-events:none}
.para-num{font-size:22px;font-weight:700;color:var(--gold);display:block;margin-bottom:4px}
.para-arabic{font-family:var(--arabic-font);font-size:14px;color:var(--gold2);display:block;margin-bottom:6px}
.para-label{font-size:12px;color:var(--text3);display:block;margin-bottom:8px}
.para-dl-btn{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--green);border:none;border-radius:6px;
  padding:5px 12px;color:#fff;font-size:12px;
  font-family:var(--ui-font);cursor:pointer;transition:background .2s;
  width:100%;justify-content:center;
}
.para-dl-btn:hover{background:var(--green3)}
.para-dl-btn.downloading{background:var(--gold);color:var(--bg)}

/* ===== COLOR THEME MODAL ===== */
.theme-modal{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.theme-modal-box{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;
  max-width:520px;width:100%;box-shadow:var(--shadow);
}
.theme-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
}
.theme-modal-header h3{font-size:16px;color:var(--text)}
#theme-modal-close{
  background:none;border:1px solid var(--border);
  border-radius:6px;padding:4px 8px;cursor:pointer;
  color:var(--text2);font-size:14px;transition:all .2s;
}
#theme-modal-close:hover{background:var(--card-hover);color:var(--text)}
.theme-swatches{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.theme-swatch{
  border-radius:var(--radius-sm);padding:10px 8px;
  cursor:pointer;text-align:center;border:2px solid transparent;
  transition:all .2s;
}
.theme-swatch:hover{transform:scale(1.05)}
.theme-swatch.active{border-color:var(--gold)!important;box-shadow:0 0 0 2px var(--gold)}
.swatch-circle{
  width:32px;height:32px;border-radius:50%;margin:0 auto 6px;
  border:2px solid rgba(255,255,255,.2);
}
.swatch-name{font-size:10px;font-weight:500;white-space:nowrap}

/* ===== 12 COLOR THEMES ===== */
/* Default: Islamic Green (already in :root) */
[data-theme="red"]{
  --gold:#f44336;--gold2:#ef9a9a;--gold3:#ffcdd2;
  --green:#c62828;--green2:#d32f2f;--green3:#e53935;
  --border:#3d1a1a;--card:#1e1212;--card-hover:#261616;
}
[data-theme="blue"]{
  --gold:#2196f3;--gold2:#90caf9;--gold3:#bbdefb;
  --green:#1565c0;--green2:#1976d2;--green3:#1e88e5;
  --border:#1a2a3d;--card:#111a26;--card-hover:#15202f;
}
[data-theme="purple"]{
  --gold:#9c27b0;--gold2:#ce93d8;--gold3:#e1bee7;
  --green:#6a1b9a;--green2:#7b1fa2;--green3:#8e24aa;
  --border:#2d1a3d;--card:#1a1226;--card-hover:#1f1630;
}
[data-theme="teal"]{
  --gold:#00bcd4;--gold2:#80deea;--gold3:#b2ebf2;
  --green:#00838f;--green2:#0097a7;--green3:#00acc1;
  --border:#1a3337;--card:#101e20;--card-hover:#132428;
}
[data-theme="amber"]{
  --gold:#ff8f00;--gold2:#ffcc02;--gold3:#fff9c4;
  --green:#e65100;--green2:#ef6c00;--green3:#f57c00;
  --border:#3d2700;--card:#1e1500;--card-hover:#261b00;
}
[data-theme="pink"]{
  --gold:#e91e63;--gold2:#f48fb1;--gold3:#fce4ec;
  --green:#ad1457;--green2:#c2185b;--green3:#d81b60;
  --border:#3d1a2a;--card:#1e1215;--card-hover:#26161c;
}
[data-theme="indigo"]{
  --gold:#5c6bc0;--gold2:#9fa8da;--gold3:#c5cae9;
  --green:#283593;--green2:#303f9f;--green3:#3949ab;
  --border:#1a1e3d;--card:#111226;--card-hover:#15162f;
}
[data-theme="lime"]{
  --gold:#8bc34a;--gold2:#c5e1a5;--gold3:#f1f8e9;
  --green:#558b2f;--green2:#689f38;--green3:#7cb342;
  --border:#1e2e10;--card:#121a0a;--card-hover:#162010;
}
[data-theme="cyan"]{
  --gold:#00e5ff;--gold2:#80deea;--gold3:#e0f7fa;
  --green:#006064;--green2:#00838f;--green3:#0097a7;
  --border:#00232a;--card:#001519;--card-hover:#001c22;
}
[data-theme="brown"]{
  --gold:#a1887f;--gold2:#d7ccc8;--gold3:#efebe9;
  --green:#4e342e;--green2:#5d4037;--green3:#6d4c41;
  --border:#2a1a16;--card:#160f0d;--card-hover:#1c1410;
}
[data-theme="white"]{
  --bg:#f5f5f5;--bg2:#eeeeee;--bg3:#e0e0e0;
  --card:#ffffff;--card-hover:#f0f0f0;--border:#ddd;
  --gold:#2e7d32;--gold2:#1b5e20;--gold3:#4caf50;
  --green:#2e7d32;--green2:#388e3c;--green3:#43a047;
  --text:#1a1a1a;--text2:#444;--text3:#777;
}
[data-theme="dark-gold"]{
  --gold:#ffc107;--gold2:#ffe082;--gold3:#fff9c4;
  --green:#ff6f00;--green2:#ff8f00;--green3:#ffa000;
  --border:#3d2e00;--card:#1a1400;--card-hover:#221b00;
}

/* ===== CONTINUE READING ===== */
.continue-reading{
  background:linear-gradient(135deg,var(--card),var(--card-hover));
  border:1px solid var(--gold);border-radius:var(--radius);
  padding:20px;display:flex;align-items:center;justify-content:space-between;
  margin-bottom:30px;box-shadow:var(--shadow);
}
.cr-label{font-size:12px;color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:4px}
#cr-surah-name{font-size:20px;color:var(--text);margin-bottom:4px}
#cr-ayah-num{font-size:14px;color:var(--text2)}
.cr-btn{background:var(--gold);color:var(--bg);border:none;padding:10px 20px;border-radius:30px;font-weight:600;cursor:pointer;transition:transform .2s}
.cr-btn:hover{transform:translateX(4px)}

/* ===== AYAH OF THE DAY ===== */
.ayah-of-day{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;margin-bottom:40px;
  text-align:center;position:relative;overflow:hidden;
}
.ayah-of-day::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(to right,var(--gold),var(--green));
}
.aod-header{font-size:14px;color:var(--gold);font-weight:600;margin-bottom:16px;text-transform:uppercase;letter-spacing:2px}
.aod-arabic{font-family:var(--arabic-font);font-size:28px;color:var(--text);line-height:1.8;direction:rtl;margin-bottom:16px}
.aod-english{font-size:16px;color:var(--text2);line-height:1.6;margin-bottom:12px;font-style:italic}
.aod-ref{font-size:13px;color:var(--text3);font-weight:500}

/* ===== FOCUS MODE ===== */
body.focus-mode header,
body.focus-mode .breadcrumb,
body.focus-mode footer,
body.focus-mode .surah-banner,
body.focus-mode .surah-info-table,
body.focus-mode .ayah-actions,
body.focus-mode .surah-nav{display:none!important}
body.focus-mode .reader-view{padding-top:40px}
body.focus-mode .ayah-card{border-color:transparent;background:transparent;box-shadow:none;padding:10px 0}
body.focus-mode .reader-topbar{
  position:fixed;bottom:20px;top:auto;left:50%;transform:translateX(-50%);
  background:var(--card);border:1px solid var(--border);border-radius:40px;
  padding:10px 20px;z-index:1000;box-shadow:var(--shadow);
}
body.focus-mode #back-btn, body.focus-mode .reader-title-text{display:none}

/* ===== PRINT STYLES (PDF Generation) ===== */
@media print {
  @page { margin: 15mm; }
  body { background: #fff !important; color: #000 !important; font-family: serif; }
  
  /* Hide all UI elements */
  #main-header, #breadcrumb, .reader-topbar, .surah-nav, footer, .para-section, 
  .hero, .stats-row, .filters-bar, #surah-grid, #theme-modal, .scroll-top, 
  #continue-reading, #ayah-of-day, .lang-row, #progress-bar, .ayah-actions {
    display: none !important;
  }
  
  #reader-view { padding: 0 !important; display: block !important; }
  #home-view { display: none !important; }
  
  /* Clean up styling for print */
  .surah-banner { padding: 0 0 20px 0; border-bottom: 2px solid #000; margin-bottom: 20px; }
  .banner-arabic { color: #000 !important; text-shadow: none !important; }
  .banner-english { color: #000 !important; }
  .banner-meta { color: #555 !important; }
  .bismillah-banner { color: #000 !important; border: none; background: none; margin-bottom: 20px; }
  
  .surah-info-table { border: 1px solid #ccc; box-shadow: none; margin-bottom: 30px; page-break-inside: avoid; }
  .surah-info-table th { background: #f5f5f5 !important; color: #000 !important; border-bottom: 1px solid #ccc; }
  .surah-info-table td { border-bottom: 1px solid #ccc; color: #333 !important; }
  
  .ayah-card {
    background: #fff !important; border: none !important; border-bottom: 1px solid #ddd !important;
    border-radius: 0 !important; padding: 15px 0 !important; margin: 0 !important;
    box-shadow: none !important; page-break-inside: avoid;
  }
  
  .ayah-header { margin-bottom: 10px; }
  .ayah-num-badge {
    background: none !important; border: 1px solid #ccc !important;
    color: #000 !important; font-weight: bold; padding: 2px 8px; border-radius: 12px;
  }
  
  .arabic-text { color: #000 !important; border-bottom: none; padding-bottom: 5px; }
  .roman-text, .hindi-text { color: #333 !important; }
  .urdu-text { color: #222 !important; }
  .lang-tag { background: #eee !important; border: 1px solid #ccc !important; color: #555 !important; }
}