/* ===== آيات تولز — النسخة الحديثة | تصميم أنيق هادئ ===== */
@font-face{
  font-family:'AmiriQuranWeb';
  src:url('fonts/Amiri-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
:root{
  --green:#0e5238; --green-2:#146b4a; --green-soft:#e8f1ec;
  --gold:#bfa14e; --gold-2:#e3cd94; --gold-soft:#f6efdc;
  --bg:#f6f4ee; --card:#ffffff; --ink:#20302a; --ink-2:#3b4a43;
  --muted:#7c8a82; --line:#eae4d6; --line-2:#ded7c6;
  --shadow:0 1px 3px rgba(20,40,30,.06), 0 8px 24px rgba(20,40,30,.05);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI","Tahoma",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.arabic,.ayah,#q,.coll-title,.chip,.pill{
  font-family:"Traditional Arabic","Amiri","Scheherazade New","Segoe UI",serif;
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1.1rem;
  background:linear-gradient(135deg,var(--green),var(--green-2));
  color:#fff; box-shadow:0 2px 14px rgba(14,82,56,.25);
  border-bottom:3px solid var(--gold);
}
.brand{display:flex; align-items:center; gap:.75rem}
.brand h1{font-size:1.2rem; margin:0; letter-spacing:.3px}
.brand small{color:#cfe6db; font-size:.74rem; display:block; margin-top:2px}
.logo{
  width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center;font-size:1.5rem;font-weight:700;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#4a3a0e; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.basket-btn{
  display:flex; align-items:center; gap:.45rem;
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.35);
  padding:.5rem .85rem; border-radius:12px; cursor:pointer; font-size:.92rem;
  transition:background .15s;
}
.basket-btn:hover{background:rgba(255,255,255,.24)}
.pill{background:var(--gold); color:#4a3a0e; border-radius:20px; padding:.05rem .55rem; font-weight:700; font-size:.85rem; min-width:1.4em; text-align:center}

main{max-width:860px; margin:0 auto; padding:1.1rem 1rem 3rem}

/* ---------- search ---------- */
.search-panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem; box-shadow:var(--shadow);
}
.search-row{display:flex; gap:.55rem}
#q{
  flex:1; padding:.8rem 1rem; font-size:1.2rem; color:var(--ink);
  border:2px solid var(--line-2); border-radius:13px; background:#fbfaf5;
}
#q::placeholder{color:#a7b0a9; font-size:1rem}
#q:focus{outline:none; border-color:var(--green-2); background:#fff}
#go{
  padding:.8rem 1.6rem; font-size:1.02rem; font-weight:600;
  background:var(--green); color:#fff; border:none; border-radius:13px; cursor:pointer;
  transition:background .15s;
}
#go:hover{background:var(--green-2)}

.modes{display:flex; align-items:center; gap:.3rem; margin-top:.85rem; flex-wrap:wrap; color:var(--muted); font-size:.9rem}
.modes label{
  cursor:pointer; padding:.3rem .7rem; border-radius:20px; border:1px solid var(--line-2);
  background:#fbfaf5; transition:.15s; display:inline-flex; align-items:center; gap:.35rem;
}
.modes label:hover{border-color:var(--green-2)}
.modes input{accent-color:var(--green)}
.modes label:has(input:checked){background:var(--green-soft); border-color:var(--green-2); color:var(--green)}
.spacer{flex:1}
.link{background:none;border:none;color:var(--green-2);cursor:pointer;font-size:.9rem;padding:.2rem}
.link:hover{color:var(--green);text-decoration:underline}

.meta{margin-top:.85rem; color:var(--ink-2); font-size:.95rem; min-height:1.2em; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem}
.meta .count-badge{background:var(--gold-soft); color:#6b571c; border:1px solid var(--gold-2); border-radius:20px; padding:.1rem .6rem; font-weight:600; font-size:.85rem}
.derivs{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem}
.derivs .dlabel{color:var(--muted); font-size:.85rem; width:100%}
.derivs .chip{
  background:var(--green-soft); border:1px solid #cfe0d8; color:var(--green);
  border-radius:20px; padding:.2rem .7rem; font-size:1.05rem; cursor:pointer; transition:.15s;
}
.derivs .chip:hover{background:#dcebe3; transform:translateY(-1px)}

/* ---------- results ---------- */
.results{margin-top:1.1rem; display:flex; flex-direction:column; gap:.85rem}
.hint{
  text-align:center; color:var(--muted); padding:2.5rem 1rem;
  background:var(--card); border:1px dashed var(--line-2); border-radius:var(--radius);
}
.hint .big{font-size:2.4rem; display:block; margin-bottom:.4rem; opacity:.5}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:.9rem 1.1rem; box-shadow:var(--shadow);
  display:flex; gap:1rem; align-items:stretch;
  transition:box-shadow .15s, transform .15s;
}
.card:hover{box-shadow:0 4px 12px rgba(20,40,30,.10), 0 14px 34px rgba(20,40,30,.07); transform:translateY(-1px)}
.card .body{flex:1; min-width:0; display:flex; flex-direction:column}
.card-head{display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem}
.ref{
  background:var(--green); color:#fff; border-radius:9px; padding:.15rem .6rem;
  font-size:.82rem; font-weight:600; font-family:"Segoe UI",sans-serif; letter-spacing:.3px;
}
.sura{color:var(--muted); font-size:.86rem; font-family:"Segoe UI",sans-serif}
.card-head .grow{flex:1}
.add-btn{
  background:#fff; border:1px solid var(--line-2); color:var(--green);
  border-radius:10px; padding:.32rem .8rem; cursor:pointer; font-size:.85rem;
  font-family:"Segoe UI",sans-serif; white-space:nowrap; transition:.15s;
}
.add-btn:hover{border-color:var(--green-2); background:var(--green-soft)}
.add-btn.added{background:var(--green); color:#fff; border-color:var(--green)}
.ayah{
  font-family:'AmiriQuranWeb',"Traditional Arabic","Amiri",serif;
  font-size:1.7rem; line-height:2.15; color:#15241d; margin:auto 0;
  text-align:justify; text-align-last:right;
}
.ayah mark{background:var(--gold-2); color:#4a3a0e; border-radius:5px; padding:0 .12rem; font-weight:600}

.thumb{flex:none; display:flex; align-items:center}
.thumb img{
  height:135px; width:auto; max-width:130px; object-fit:cover;
  border-radius:11px; border:1px solid var(--line-2); background:#fff;
  cursor:zoom-in; box-shadow:0 2px 8px rgba(0,0,0,.08); transition:.15s;
}
.thumb img:hover{transform:scale(1.03); box-shadow:0 4px 14px rgba(0,0,0,.16)}

/* ---------- root browser ---------- */
.roots-grid{display:flex; flex-wrap:wrap; gap:.45rem}
.root-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#fbfaf5; border:1px solid var(--line-2); border-radius:22px;
  padding:.3rem .5rem .3rem .8rem; cursor:pointer; transition:.15s;
}
.root-chip:hover{background:var(--green-soft); border-color:var(--green-2); transform:translateY(-1px)}
.root-chip b{font-family:'AmiriQuranWeb',"Traditional Arabic",serif; font-size:1.15rem; color:var(--green); font-weight:400}
.root-chip span{background:var(--gold-soft); color:#6b571c; border:1px solid var(--gold-2); border-radius:12px; padding:0 .45rem; font-size:.75rem; font-family:"Segoe UI",sans-serif}

/* ---------- backdrop + basket drawer ---------- */
.backdrop{position:fixed; inset:0; background:rgba(15,30,22,.45); z-index:45; backdrop-filter:blur(2px)}
.basket{
  position:fixed; top:0; left:0; height:100vh; width:min(400px,93vw);
  background:#fff; box-shadow:6px 0 28px rgba(0,0,0,.18);
  border-inline-end:1px solid var(--line);
  transform:translateX(-102%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  z-index:50; display:flex; flex-direction:column; padding:1.1rem;
}
.basket.open{transform:translateX(0)}
.basket-head{display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--gold); padding-bottom:.5rem}
.basket-head h2{margin:.1rem 0; font-size:1.15rem; color:var(--green)}
.icon{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--muted);line-height:1}
.icon:hover{color:var(--ink)}
.coll-title{width:100%; padding:.6rem .7rem; border:1px solid var(--line-2); border-radius:11px; margin:.75rem 0; font-size:1.1rem; background:#fbfaf5}
.coll-title:focus{outline:none;border-color:var(--green-2);background:#fff}
.basket-terms .lbl,.basket-stats{font-size:.85rem;color:var(--muted)}
.basket-stats{margin:.5rem 0 .2rem}
.basket-stats b{color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.35rem 0}
.chips .chip{background:var(--green-soft);border:1px solid #cfe0d8;color:var(--green);border-radius:20px;padding:.15rem .6rem;font-size:1rem;display:inline-flex;align-items:center;gap:.35rem}
.chips .chip b{cursor:pointer;color:#b23; font-family:"Segoe UI",sans-serif}
.basket-list{flex:1; overflow:auto; margin:.5rem -.3rem; padding:0 .3rem}
.basket-empty{color:var(--muted); text-align:center; padding:2rem .5rem; font-size:.95rem}
.basket-empty .big{font-size:2.2rem; display:block; opacity:.4; margin-bottom:.4rem}
.basket-item{
  padding:.5rem .1rem; border-bottom:1px solid var(--line); font-size:1.02rem;
  display:flex; gap:.5rem; align-items:start; font-family:"Traditional Arabic",serif;
}
.basket-item .x{color:#c0392b;cursor:pointer;font-family:"Segoe UI",sans-serif;font-size:.9rem;margin-top:.2rem}
.basket-item .bref{color:var(--green);font-family:"Segoe UI",sans-serif;font-size:.78rem;background:var(--green-soft);border-radius:6px;padding:0 .35rem;white-space:nowrap;margin-top:.2rem}
.basket-actions{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; padding-top:.7rem; border-top:1px solid var(--line)}
.basket-actions button{
  padding:.6rem; border:1px solid var(--line-2); background:#fbfaf5; border-radius:11px;
  cursor:pointer; font-size:.92rem; transition:.15s; font-family:"Segoe UI",sans-serif;
}
.basket-actions button:hover{background:var(--green-soft); border-color:var(--green-2)}
.basket-actions #saveColl{background:var(--green); color:#fff; border-color:var(--green)}
.basket-actions #saveColl:hover{background:var(--green-2)}
.basket-actions .danger{color:#c0392b}
.basket-actions .danger:hover{background:#fbeae8; border-color:#e2b3ad}

/* ---------- lightbox ---------- */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.88); display:grid; place-items:center; z-index:70; cursor:zoom-out}
.lightbox img{max-width:95vw; max-height:95vh; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.5)}
.hidden{display:none!important}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%);
  background:#15241d; color:#fff; padding:.65rem 1.2rem; border-radius:12px; z-index:80;
  box-shadow:0 6px 20px rgba(0,0,0,.3); font-size:.95rem;
}

/* ---------- responsive ---------- */
@media(max-width:560px){
  .brand h1{font-size:1.05rem}
  .card{flex-direction:column}
  .thumb{justify-content:center}
  .thumb img{height:auto; width:auto; max-width:70%; max-height:320px}
  .ayah{font-size:1.5rem; line-height:2}
  #q{font-size:1.05rem}
}

/* ═══════════════════════════════════════════
   FOOTER — MZ_Ayaat_Tools credit
   ═══════════════════════════════════════════ */
.site-footer{
  margin-top:3rem;
  background:linear-gradient(180deg,var(--green),#0a3a27);
  color:#dfeee7;
  border-top:3px solid var(--gold);
  padding:2.4rem 1.2rem 1rem;
}
.footer-inner{
  max-width:1000px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:2rem 3rem;
  justify-content:space-between; align-items:flex-start;
}
.footer-brand{
  display:flex; align-items:center; gap:.9rem;
}
.footer-logo{
  width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center;
  font-size:1.7rem; font-weight:700;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#4a3a0e;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 4px 14px rgba(0,0,0,.2);
  font-family:"Traditional Arabic","Amiri",serif;
}
.footer-name{
  font-size:1.15rem; font-weight:800; color:#fff; letter-spacing:.3px;
}
.footer-tag{
  font-size:.78rem; color:var(--gold-2); margin-top:2px; letter-spacing:.5px;
}

.footer-links{
  display:flex; gap:2.4rem; flex-wrap:wrap;
}
.footer-col{
  display:flex; flex-direction:column; gap:.4rem;
  min-width:120px;
}
.footer-col h4{
  color:var(--gold-2);
  font-size:.82rem; font-weight:700;
  margin:0 0 .55rem 0;
  letter-spacing:.6px; text-transform:uppercase;
  border-bottom:1px solid rgba(227,205,148,.25);
  padding-bottom:.4rem;
}
.footer-col a{
  color:#cfe6db; text-decoration:none; font-size:.9rem;
  padding:.15rem 0; cursor:pointer; transition:color .15s;
}
.footer-col a:hover{color:var(--gold-2)}
.footer-col small{
  color:#a9c1b7; font-size:.72rem; line-height:1.6;
  display:block; margin-top:.35rem;
}

.footer-src-mark{
  display:inline-block;
  padding:.35rem .8rem;
  background:rgba(227,205,148,.15);
  border:1px solid rgba(227,205,148,.4);
  color:var(--gold-2);
  border-radius:8px;
  font-family:'JetBrains Mono','Consolas',monospace;
  font-size:.82rem; font-weight:700;
  letter-spacing:.4px;
  align-self:flex-start;
}

.footer-bottom{
  max-width:1000px; margin:1.8rem auto 0;
  padding-top:1.1rem;
  border-top:1px solid rgba(227,205,148,.2);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem;
  justify-content:space-between; align-items:center;
  font-size:.82rem; color:#a9c1b7;
}
.footer-bottom strong{
  color:var(--gold-2);
  font-family:'JetBrains Mono','Consolas',monospace;
  letter-spacing:.3px;
}
.footer-stats{
  color:#cfe6db; font-size:.82rem;
}

@media(max-width:640px){
  .footer-inner{flex-direction:column; gap:1.5rem}
  .footer-links{gap:1.5rem}
  .footer-bottom{flex-direction:column; text-align:center; gap:.5rem}
}

/* ═══════════════════════════════════════════
   MOBILE OVERFLOW FIX + narrow phone tuning
   ═══════════════════════════════════════════ */
html,body{
  overflow-x:hidden;
  max-width:100vw;
}

@media(max-width:480px){
  .topbar{padding:.55rem .7rem}
  .brand h1{font-size:1rem}
  .brand small{font-size:.7rem}
  .logo{width:38px; height:38px; font-size:1.3rem; border-radius:11px}
  .basket-btn{padding:.4rem .6rem; font-size:.85rem}
  .pill{font-size:.78rem}

  main{padding:.7rem .6rem 2rem}
  .search-panel{padding:.7rem}
  .search-row{gap:.35rem}
  #q{padding:.65rem .75rem; font-size:1rem; min-width:0}
  #q::placeholder{font-size:.85rem}
  #go{padding:.65rem .9rem; font-size:.9rem; flex-shrink:0}

  .modes{gap:.25rem; font-size:.82rem}
  .modes label{padding:.22rem .5rem}

  .footer-brand{gap:.55rem}
  .footer-logo{width:44px; height:44px; font-size:1.4rem}
  .footer-name{font-size:1rem}
}

/* ═══════════════════════════════════════════
   DARK MODE — activated by [data-theme="dark"]
   ═══════════════════════════════════════════ */
:root[data-theme="dark"]{
  --green:#14b482;
  --green-2:#0fc492;
  --green-soft:#0f2820;
  --gold:#e3cd94;
  --gold-2:#f0dfae;
  --gold-soft:#2a2214;
  --bg:#0d1613;
  --card:#152420;
  --ink:#e6ede9;
  --ink-2:#a8bab2;
  --muted:#6b8078;
  --line:#1e2f28;
  --line-2:#2a3f36;
  --shadow:0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .topbar{
  background:linear-gradient(135deg,#0a3a27,#0e5238);
  border-bottom-color:var(--gold);
}
:root[data-theme="dark"] #q{
  background:#0f1c17; color:var(--ink); border-color:var(--line-2);
}
:root[data-theme="dark"] #q:focus{background:#132420; border-color:var(--green)}
:root[data-theme="dark"] .modes label{background:#0f1c17; color:var(--ink-2)}
:root[data-theme="dark"] .card{background:var(--card); border-color:var(--line)}
:root[data-theme="dark"] .basket{background:var(--card); color:var(--ink)}
:root[data-theme="dark"] .basket-actions button{background:#0f1c17; color:var(--ink); border-color:var(--line-2)}
:root[data-theme="dark"] .search-panel{background:var(--card); border-color:var(--line)}
:root[data-theme="dark"] .site-footer{background:linear-gradient(180deg,#08281c,#051611)}

/* ─── Search results (cards) — dark mode text colors ─── */
:root[data-theme="dark"] .ayah{color:var(--ink)}
:root[data-theme="dark"] .ayah mark{background:var(--gold); color:#231a06; font-weight:700}
:root[data-theme="dark"] .ref{background:var(--green); color:#001a10}
:root[data-theme="dark"] .sura{color:var(--ink-2)}
:root[data-theme="dark"] .add-btn{background:#0f1c17; color:var(--green-2); border-color:var(--line-2)}
:root[data-theme="dark"] .add-btn:hover{background:rgba(20,180,130,.12); border-color:var(--green)}
:root[data-theme="dark"] .add-btn.added{background:var(--green); color:#001a10; border-color:var(--green)}
:root[data-theme="dark"] .hint,
:root[data-theme="dark"] .hint .big{color:var(--ink-2)}

/* meta + derivatives area */
:root[data-theme="dark"] .meta{color:var(--ink-2)}
:root[data-theme="dark"] .meta .count-badge{
  background:rgba(227,205,148,.10); color:var(--gold-2); border-color:rgba(227,205,148,.35);
}
:root[data-theme="dark"] .derivs .dlabel{color:var(--muted)}
:root[data-theme="dark"] .derivs .chip{
  background:rgba(20,180,130,.12); color:var(--green-2); border-color:rgba(20,180,130,.28);
}
:root[data-theme="dark"] .derivs .chip:hover{background:rgba(20,180,130,.20)}

/* AOTD — dark override */
:root[data-theme="dark"] .aotd{
  background:linear-gradient(135deg, rgba(227,205,148,.06), rgba(20,180,130,.04));
  border-color:rgba(227,205,148,.35);
}
:root[data-theme="dark"] .aotd-text{color:var(--ink)}
:root[data-theme="dark"] .aotd-ref{color:var(--ink-2)}
:root[data-theme="dark"] .aotd-actions button{color:var(--ink-2); border-color:var(--line-2)}
:root[data-theme="dark"] .aotd-actions button:hover{background:rgba(227,205,148,.10); color:var(--gold-2); border-color:var(--gold-2)}

/* term chips in basket */
:root[data-theme="dark"] .basket .chip{background:rgba(227,205,148,.10); color:var(--gold-2); border-color:rgba(227,205,148,.30)}
:root[data-theme="dark"] .coll-title{background:#0f1c17; color:var(--ink); border-color:var(--line-2)}
:root[data-theme="dark"] .coll-title::placeholder{color:var(--muted)}

/* results hint area */
:root[data-theme="dark"] .hint{color:var(--ink-2); background:transparent}

/* Basket header + close button */
:root[data-theme="dark"] .basket-head h2{color:var(--ink)}
:root[data-theme="dark"] .basket-head .icon{background:transparent; color:var(--ink)}
:root[data-theme="dark"] .basket-list .b-item{border-color:var(--line); color:var(--ink)}
:root[data-theme="dark"] .lbl{color:var(--ink-2)}
:root[data-theme="dark"] .basket-stats{color:var(--ink)}

/* Toast readability */
:root[data-theme="dark"] .toast{background:#e6ede9; color:#0a1a12}

/* ═══════════════════════════════════════════
   THEME TOGGLE button
   ═══════════════════════════════════════════ */
.theme-toggle{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35);
  color:#fff; cursor:pointer;
  display:grid; place-items:center;
  font-size:1.05rem;
  transition:background .18s;
  margin-inline-start:.4rem;
}
.theme-toggle:hover{background:rgba(255,255,255,.25)}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:inline}

.topbar-actions{display:flex; align-items:center; gap:.3rem}
@media(max-width:480px){
  .theme-toggle{width:34px; height:34px; font-size:.95rem}
}

/* ═══════════════════════════════════════════
   AYAH OF THE DAY banner
   ═══════════════════════════════════════════ */
.aotd{
  background:linear-gradient(135deg, rgba(191,161,78,.10), rgba(14,82,56,.08));
  border:1px solid var(--gold-2);
  border-radius:var(--radius);
  padding:1rem 1.1rem;
  margin-bottom:1rem;
  position:relative;
  overflow:hidden;
}
.aotd::before{
  content:""; position:absolute;
  top:0; right:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  box-shadow:0 0 12px rgba(191,161,78,.35);
}
.aotd-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.6rem; flex-wrap:wrap; gap:.4rem;
}
.aotd-label{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .7rem;
  background:var(--gold);
  color:#4a3a0e;
  border-radius:99px;
  font-size:.75rem; font-weight:800;
  letter-spacing:.4px;
}
.aotd-ref{color:var(--muted); font-size:.85rem}
.aotd-text{
  font-family:"Traditional Arabic","Amiri","Scheherazade New",serif;
  font-size:1.5rem; line-height:2.2;
  color:var(--ink); text-align:center;
  margin:.5rem 0;
}
.aotd-image{
  display:flex; justify-content:center;
  margin:.9rem 0 .5rem;
  padding:.5rem;
  background:rgba(255,255,255,.5);
  border-radius:12px;
  border:1px solid var(--line);
}
:root[data-theme="dark"] .aotd-image{background:rgba(255,255,255,.03)}
.aotd-image img{
  max-width:100%;
  max-height:340px;
  border-radius:8px;
  cursor:zoom-in;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  transition:transform .18s;
}
.aotd-image img:hover{transform:scale(1.015)}
@media(max-width:480px){
  .aotd-image img{max-height:260px}
}
.aotd-actions{display:flex; gap:.4rem; justify-content:flex-end; flex-wrap:wrap; margin-top:.6rem}
.aotd-actions button:disabled{opacity:.55; cursor:wait}
.aotd-actions button{
  background:transparent; border:1px solid var(--line-2);
  padding:.35rem .8rem; border-radius:99px;
  cursor:pointer; font-size:.82rem; color:var(--ink-2);
  font-family:inherit; transition:.15s;
}
.aotd-actions button:hover{background:var(--gold-soft); border-color:var(--gold); color:var(--ink)}
@media(max-width:480px){
  .aotd{padding:.75rem}
  .aotd-text{font-size:1.25rem; line-height:2}
}

/* ═══════════════════════════════════════════
   SHARE button + share menu
   ═══════════════════════════════════════════ */
.share-btn{
  background:transparent; border:1px solid var(--line-2);
  width:32px; height:32px; border-radius:50%;
  cursor:pointer; font-size:.95rem; color:var(--muted);
  display:inline-grid; place-items:center;
  transition:.15s; margin-inline-start:.3rem;
}
.share-btn:hover{background:var(--green-soft); color:var(--green); border-color:var(--green-2)}

.share-menu{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  display:grid; place-items:center;
  z-index:90;
}
.share-menu.hidden{display:none}
.share-card{
  width:min(360px, 92vw);
  background:var(--card);
  border-radius:16px;
  border:1px solid var(--line-2);
  padding:1.2rem 1rem 1rem;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.share-card h3{
  margin:0 0 1rem 0; font-size:1rem;
  color:var(--ink); text-align:center;
  padding-bottom:.7rem; border-bottom:1px solid var(--line);
}
.share-options{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem;
  margin-bottom:.8rem;
}
.share-option{
  padding:.85rem .3rem; border-radius:12px;
  background:var(--green-soft);
  border:1px solid var(--line);
  cursor:pointer; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  font-size:.72rem; color:var(--ink); transition:.15s;
}
.share-option:hover{transform:translateY(-2px); border-color:var(--green)}
.share-option .icon{font-size:1.35rem}
.share-option.whatsapp{background:#e8f8ee; color:#0d6b34; border-color:#c6ecd3}
.share-option.twitter{background:#e0f0fe; color:#0866cf; border-color:#b6d9f9}
.share-option.copy{background:#fbf5e5; color:#8f6c2a; border-color:#ebd9a8}
.share-option.native{background:#eee7f5; color:#5a3ba2; border-color:#d9c9ee}
:root[data-theme="dark"] .share-option{background:rgba(255,255,255,.06); color:var(--ink-2)}
:root[data-theme="dark"] .share-option:hover{background:rgba(255,255,255,.10)}
.share-close{
  width:100%; padding:.65rem; border-radius:10px;
  background:var(--line); border:none; color:var(--ink);
  cursor:pointer; font-family:inherit; font-size:.9rem;
}

/* ═══════════════════════════════════════════
   PWA install banner
   ═══════════════════════════════════════════ */
.pwa-install{
  position:fixed; bottom:1rem; right:1rem;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#4a3a0e;
  border:none; border-radius:99px;
  padding:.7rem 1.2rem;
  font-weight:700; font-size:.88rem;
  cursor:pointer; font-family:inherit;
  box-shadow:0 8px 26px rgba(191,161,78,.35);
  display:none; align-items:center; gap:.4rem;
  z-index:60;
  animation:pwaIn .4s ease;
}
.pwa-install.show{display:inline-flex}
@keyframes pwaIn{from{transform:translateY(24px); opacity:0} to{transform:translateY(0); opacity:1}}