/* ══════════════════════════════════════════
   PAGE HERO
══════════════════════════════════════════ */
.dict-hero{
  padding:3.5rem 2rem 2.5rem;text-align:center;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(227,207,170,.07),transparent 65%);
  border-bottom:1px solid var(--border-color);
  margin-top: 70px;
}
.dict-hero-eyebrow{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .8rem;border-radius:100px;background:rgba(227,207,170,.08);border:1px solid rgba(227,207,170,.18);font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-green);margin-bottom:.9rem}
.dict-hero-title{font-family:'Cinzel',serif;font-size:clamp(1.6rem,4vw,2.6rem);font-weight:700;color:var(--accent-green);letter-spacing:.02em;margin-bottom:.5rem;line-height:1.15}
[data-theme="light"] .dict-hero-title{color:#0a0a0a}
.dict-hero-ar{font-family:'Amiri',serif;font-size:2rem;color:var(--accent-green);direction:rtl;opacity:.7;margin-bottom:.6rem}
.dict-hero-sub{font-size:.9rem;color:var(--text-muted);max-width:520px;margin:0 auto 1.5rem;line-height:1.8}
.dict-hero-stats{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap}
.dhs{text-align:center}
.dhs-n{font-family:'Cinzel',serif;font-size:1.6rem;font-weight:700;color:var(--accent-green);line-height:1}
.dhs-l{font-size:.62rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-top:.2rem}

/* ══════════════════════════════════════════
   MAIN LAYOUT
══════════════════════════════════════════ */
.dict-layout{display:grid;grid-template-columns:280px 1fr;gap:0;max-width:1280px;margin:0 auto;min-height:calc(100vh - 60px)}
.dict-sidebar{
  border-right:1px solid var(--border-color);
  display:flex;flex-direction:column;
  background:var(--bg-secondary);
  position:sticky;top:60px;height:calc(100vh - 60px);overflow:hidden;
}
.dict-main{flex:1;overflow-y:auto;background:var(--bg-primary)}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
/* Search */
.sb-search-wrap{padding:1rem 1rem .6rem;border-bottom:1px solid var(--border-color);flex-shrink:0;position:relative}
.sb-search{
  display:flex;align-items:center;gap:.6rem;
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-md);padding:.6rem .9rem;transition:border-color .15s;
}
.sb-search:focus-within{border-color:var(--accent-green)}
.sb-search-icon{font-size:.95rem;color:var(--text-muted);flex-shrink:0}
.sb-search input{flex:1;background:none;border:none;outline:none;font-size:.82rem;color:var(--text-secondary);caret-color:var(--accent-green)}
.sb-search input::placeholder{color:var(--text-muted)}
.sb-clear{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;padding:.1rem;transition:color .14s}
.sb-clear:hover{color:var(--accent-red)}
.sb-spinner{width:14px;height:14px;border:2px solid var(--border-color);border-top-color:var(--accent-green);border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}
/* Suggestions */
.sb-suggestions{
  position:absolute;top:calc(100% - .2rem);left:1rem;right:1rem;z-index:50;
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-md);overflow:hidden;max-height:260px;overflow-y:auto;
  box-shadow:var(--shadow-card);animation:slideDown .15s ease;
}
.sb-sug-item{
  display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;
  cursor:pointer;border-bottom:1px solid var(--border-color);transition:background .12s;
  font-size:.82rem;color:var(--text-secondary);
}
.sb-sug-item:last-child{border-bottom:none}
.sb-sug-item:hover{background:var(--hover-overlay);color:var(--accent-green)}
.sb-sug-icon{font-size:.8rem;color:var(--accent-green);flex-shrink:0}
.sb-sug-count{font-size:.65rem;color:var(--text-muted);margin-left:auto;white-space:nowrap}

/* Lang + settings row */
.sb-lang-row{
  display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;
  border-bottom:1px solid var(--border-color);flex-shrink:0;
}
.sb-lang-badge{
  display:flex;align-items:center;gap:.35rem;
  padding:.25rem .65rem;border-radius:100px;background:var(--bg-card);
  border:1px solid var(--border-color);font-size:.68rem;font-weight:600;
  color:var(--accent-green);cursor:pointer;transition:all .14s;flex:1;justify-content:center;
}
.sb-lang-badge:hover{border-color:var(--accent-green)}
.sb-settings-btn{
  width:30px;height:30px;border-radius:var(--radius-sm);border:1px solid var(--border-color);
  background:var(--bg-card);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-muted);font-size:.9rem;transition:all .14s;flex-shrink:0;
}
.sb-settings-btn:hover{border-color:var(--accent-green);color:var(--accent-green)}

/* Alphabet strip */
.sb-alpha-wrap{padding:.6rem .8rem .3rem;border-bottom:1px solid var(--border-color);flex-shrink:0}
.sb-alpha-label{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:.5rem}
.sb-alpha-grid{display:flex;flex-wrap:wrap;gap:.3rem}
.alpha-btn{
  min-width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--border-color);
  background:var(--bg-card);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1rem;color:var(--text-muted);transition:all .14s;padding:0 .3rem;
}
.alpha-btn.rtl-letter{font-family:'Amiri',serif;font-size:1.15rem}
.alpha-btn:hover{border-color:var(--accent-green);color:var(--accent-green)}
.alpha-btn.active{background:var(--accent-green);border-color:var(--accent-green);color:#000;font-weight:700}
[data-theme="light"] .alpha-btn.active{color:#fff}

/* Pairs / word list */
.sb-scroll{flex:1;overflow-y:auto;padding:.5rem 0}
.sb-section-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:.5rem 1rem .4rem;
}
.sb-section-left{display:flex;align-items:center;gap:.5rem}
.sb-section-title{font-size:.78rem;font-weight:700;color:var(--text-primary)}
[data-theme="light"] .sb-section-title{color:#0a0a0a}
.sb-count-pill{padding:.1rem .5rem;border-radius:100px;background:rgba(227,207,170,.1);border:1px solid rgba(227,207,170,.2);font-size:.62rem;font-weight:700;color:var(--accent-green)}
.sb-toggle-btn{padding:.22rem .6rem;border-radius:100px;background:var(--accent-green);color:#000;font-size:.62rem;font-weight:700;cursor:pointer;border:none;transition:opacity .14s}
[data-theme="light"] .sb-toggle-btn{color:#fff}
.sb-toggle-btn:hover{opacity:.82}
.sb-back-btn{width:24px;height:24px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-card);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.8rem;color:var(--text-muted);transition:all .14s;flex-shrink:0}
.sb-back-btn:hover{border-color:var(--accent-green);color:var(--accent-green)}

/* Pair index rows */
.pair-row{
  display:flex;align-items:center;padding:.55rem 1rem;
  border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .12s;
}
.pair-row:hover{background:var(--hover-overlay)}
.pair-prefix{font-family:'Amiri',serif;font-size:1.1rem;color:var(--text-primary);min-width:52px;direction:rtl}
[data-theme="light"] .pair-prefix{color:#0a0a0a}
.pair-dots{flex:1;height:1px;border-top:1px dotted var(--border-color);margin:0 .5rem}
.pair-count-val{font-size:.8rem;font-weight:700;color:var(--accent-green)}
.pair-count-lbl{font-size:.65rem;color:var(--text-muted);margin-left:.2rem;margin-right:.3rem}
.pair-chevron{font-size:.7rem;color:var(--text-muted)}
.pair-row:hover .pair-chevron{color:var(--accent-green)}

/* Word list rows */
.word-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem 1rem;border-bottom:1px solid var(--border-color);
  cursor:pointer;transition:all .12s;
}
.word-row:hover{background:var(--hover-overlay)}
.word-row.active{background:var(--accent-green)}
.word-row-text{font-family:'Amiri',serif;font-size:1.05rem;direction:rtl;color:var(--text-primary);line-height:1.3}
[data-theme="light"] .word-row-text{color:#0a0a0a}
.word-row.active .word-row-text{color:#000}
[data-theme="light"] .word-row.active .word-row-text{color:#fff}
.word-row-check{font-size:.8rem;color:#000;flex-shrink:0}
[data-theme="light"] .word-row-check{color:#fff}

/* ══════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════ */
.main-top-bar{
  display:flex;align-items:center;gap:.8rem;padding:1rem 1.5rem;
  border-bottom:1px solid var(--border-color);
  background:var(--bg-secondary);position:sticky;top:0;z-index:10;
}
.main-word-badge{
  display:flex;align-items:center;gap:.6rem;flex:1;
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-md);padding:.6rem 1rem;
}
.mwb-icon{font-size:.9rem;color:var(--accent-green);flex-shrink:0}
.mwb-word{font-family:'Amiri',serif;font-size:1.4rem;direction:rtl;color:var(--text-primary);line-height:1}
[data-theme="light"] .mwb-word{color:#0a0a0a}
.mwb-count{font-size:.7rem;font-weight:700;color:var(--accent-green);white-space:nowrap}
.mwb-occ{font-size:.62rem;color:var(--text-muted);margin-left:.15rem}
.search-mode-banner{
  display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem;
  background:rgba(227,207,170,.06);border-bottom:1px solid rgba(227,207,170,.12);
}
.smb-text{font-size:.75rem;font-weight:600;color:var(--accent-green);flex:1}
.smb-clear{padding:.22rem .7rem;border-radius:100px;background:var(--accent-green);color:#000;font-size:.65rem;font-weight:700;border:none;cursor:pointer;transition:opacity .14s}
[data-theme="light"] .smb-clear{color:#fff}
.smb-clear:hover{opacity:.82}

/* Verse results */
.results-area{padding:1.2rem 1.5rem}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 2rem;text-align:center;opacity:.6}
.es-icon{font-size:3rem;margin-bottom:1rem}
.es-title{font-family:'Cinzel',serif;font-size:1rem;color:var(--text-muted);margin-bottom:.4rem}
[data-theme="light"] .es-title{color:#383839}
.es-sub{font-size:.8rem;color:var(--text-muted);line-height:1.65}
.loading-state{display:flex;flex-direction:column;align-items:center;padding:4rem;gap:.8rem}
.ls-spinner{width:36px;height:36px;border:3px solid var(--border-color);border-top-color:var(--accent-green);border-radius:50%;animation:spin .7s linear infinite}
.ls-txt{font-size:.8rem;color:var(--text-muted)}

/* Verse card */
.verse-card{
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-lg);padding:1.4rem;margin-bottom:1rem;
  animation:fadeIn .25s ease both;transition:border-color .15s;
}
.verse-card:hover{border-color:rgba(227,207,170,.2)}
.verse-ref-row{
  display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;
  cursor:pointer;
}
.verse-ref-icon{font-size:.8rem;color:var(--accent-green);flex-shrink:0}
.verse-ref{font-size:.8rem;font-weight:700;color:var(--accent-green);letter-spacing:.04em}
.verse-surah-name{flex:1;font-size:.72rem;color:var(--text-muted);text-align:right}
.verse-ref-row:hover .verse-ref{text-decoration:underline}

/* Arabic word chips row */
.word-chips-row{
  display:flex;flex-wrap:wrap;gap:.35rem .5rem;direction:rtl;
  justify-content:flex-start;margin-bottom:1rem;
}
.word-chip-wrap{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.word-chip{
  font-family:'Amiri Quran','Amiri',serif;font-size:1.5rem;color:var(--accent-green);
  cursor:pointer;border-radius:6px;padding:.05em .12em;transition:background .12s,color .12s;
  line-height:1.4;
}
.word-chip:hover{background:var(--hover-overlay)}
.word-chip.highlighted{color:#FF6B6B}
.word-chip.highlighted:hover{background:rgba(255,107,107,.08)}
.word-chip-meaning{
  font-size:.65rem;color:var(--accent-green);text-align:center;max-width:80px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:slideDown .18s ease;
}

/* Full Arabic verse */
.verse-arabic{
  font-family:'Amiri Quran','Amiri',serif;font-size:1.5rem;
  direction:rtl;text-align:right;line-height:2.2;
  color:var(--text-primary);margin-bottom:.8rem;padding:.3rem 0;
}
[data-theme="light"] .verse-arabic{color:#0a0a0a}

/* Translation */
.verse-translation{font-size:.84rem;color:var(--text-muted);line-height:1.78;margin-bottom:.8rem}
.verse-translation .highlight{color:#FF6B6B;font-weight:700}
.verse-translation .credit{font-style:italic;font-size:.72rem;color:var(--text-muted);opacity:.7}

/* Bottom row */
.verse-meta-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem}
.verse-translit{font-size:.78rem;color:var(--accent-green);font-style:italic}
.root-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.22rem .65rem;border-radius:var(--radius-sm);
  background:rgba(227,207,170,.1);border:1px solid rgba(227,207,170,.2);
  cursor:pointer;transition:all .14s;
}
.root-badge:hover{background:rgba(227,207,170,.18);border-color:rgba(227,207,170,.35)}
.root-badge-text{font-size:.72rem;font-weight:700;color:var(--accent-green)}

/* ══════════════════════════════════════════
   OVERLAY MODALS
══════════════════════════════════════════ */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:500;display:flex;align-items:flex-end;justify-content:center;animation:overlayIn .15s ease}
.overlay.hidden{display:none}
.modal-sheet{
  width:100%;max-width:680px;max-height:85vh;background:var(--bg-secondary);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;border:1px solid var(--border-color);border-bottom:none;
  display:flex;flex-direction:column;animation:sheetIn .2s ease;
}
.modal-handle{width:36px;height:3px;background:var(--border-color);border-radius:2px;margin:.75rem auto .5rem;flex-shrink:0}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1.2rem .6rem;border-bottom:1px solid var(--border-color);flex-shrink:0}
.modal-title-row{display:flex;align-items:center;gap:.6rem}
.modal-icon{width:32px;height:32px;border-radius:50%;background:rgba(227,207,170,.1);border:1px solid rgba(227,207,170,.2);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--accent-green)}
.modal-title{font-family:'Cinzel',serif;font-size:.9rem;font-weight:700;color:var(--text-primary)}
[data-theme="light"] .modal-title{color:#0a0a0a}
.modal-close{width:28px;height:28px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-card);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;color:var(--text-muted);transition:all .14s}
.modal-close:hover{border-color:var(--accent-red);color:var(--accent-red)}
.modal-body{flex:1;overflow-y:auto;padding:1rem 1.2rem 2rem}

/* Grammar sheet content */
.grammar-word-preview{
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-lg);padding:1.4rem;text-align:center;margin-bottom:1.2rem;
}
.gwp-arabic{font-family:'Amiri',serif;font-size:2.8rem;color:var(--accent-green);direction:rtl;line-height:1.2;margin-bottom:.6rem}
.gwp-translit{display:inline-block;padding:.2rem .7rem;border-radius:100px;background:rgba(227,207,170,.08);border:1px solid rgba(227,207,170,.15);font-size:.78rem;color:var(--text-muted);font-style:italic}
.grammar-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.1rem;margin-bottom:.8rem}
.gc-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:1px solid var(--border-color)}
.gc-icon-badge{width:28px;height:28px;border-radius:50%;background:rgba(227,207,170,.1);border:1px solid rgba(227,207,170,.2);display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0}
.gc-title{font-size:.82rem;font-weight:700;color:var(--text-primary)}
[data-theme="light"] .gc-title{color:#0a0a0a}
.grammar-row{display:flex;align-items:flex-start;gap:.8rem;padding:.45rem 0;border-bottom:1px solid var(--border-color)}
.grammar-row:last-child{border-bottom:none}
.grammar-label-pill{background:rgba(227,207,170,.08);border:1px solid rgba(227,207,170,.15);border-radius:6px;padding:.15rem .55rem;flex-shrink:0;min-width:100px}
.grammar-label{font-size:.65rem;font-weight:700;color:var(--accent-green);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.grammar-value{font-size:.82rem;color:var(--text-secondary);line-height:1.5}
.no-grammar-wrap{display:flex;flex-direction:column;align-items:center;padding:3rem;text-align:center;opacity:.6}
.no-grammar-icon{font-size:2.5rem;margin-bottom:.8rem}
.no-grammar-title{font-family:'Cinzel',serif;font-size:.9rem;color:var(--text-muted);margin-bottom:.3rem}
.no-grammar-text{font-size:.78rem;color:var(--text-muted);line-height:1.65}

/* Lang modal */
.lang-section{margin-bottom:1.4rem}
.lang-section-title{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:.3rem}
.lang-section-sub{font-size:.72rem;color:var(--text-muted);margin-bottom:.8rem;line-height:1.5}
.lang-pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}
.lang-pill{padding:.3rem .75rem;border-radius:100px;border:1px solid var(--border-color);background:var(--bg-card);font-size:.75rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .14s}
.lang-pill:hover{border-color:var(--accent-green);color:var(--accent-green)}
.lang-pill.active{background:var(--accent-green);border-color:var(--accent-green);color:#000;font-weight:700}
[data-theme="light"] .lang-pill.active{color:#fff}
.lang-list-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem .8rem;border-radius:var(--radius-sm);border:1px solid transparent;background:var(--bg-card);cursor:pointer;margin-bottom:.35rem;transition:all .14s}
.lang-list-row:hover{border-color:var(--accent-green)}
.lang-list-row.active{border-color:rgba(227,207,170,.3);background:rgba(227,207,170,.06)}
.llr-name{font-size:.82rem;color:var(--text-secondary)}
.llr-native{font-size:.72rem;color:var(--text-muted);margin-left:.35rem}
.llr-check{font-size:.85rem;color:var(--accent-green);flex-shrink:0}

/* Mobile responsive */
@media(max-width:768px){
  .dict-layout{grid-template-columns:1fr}
  .dict-sidebar{position:relative;height:auto;border-right:none;border-bottom:1px solid var(--border-color)}
  .sb-alpha-grid{display:flex;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.3rem}
  .sh-nav{display:none}
  .dict-hero{padding:2rem 1rem 1.5rem}
}
.hidden{display:none!important}