/* ============================================================
   Divya Stotra — Spiritual UI Theme
   Palette: deep night indigo, saffron, gold, marigold
   ============================================================ */
:root{
  --bg-0:#0b0714;
  --bg-1:#150d24;
  --bg-2:#1e1333;
  --card:rgba(255,255,255,.045);
  --card-brd:rgba(255,205,110,.16);
  --card-brd-hi:rgba(255,205,110,.45);
  --gold:#f5c66a;
  --gold-hi:#ffe3a3;
  --saffron:#ff9933;
  --marigold:#ffb84d;
  --ink:#f3ecdd;
  --ink-dim:#c9bfa8;
  --ink-faint:#948b76;
  --accent-grad:linear-gradient(120deg,#ff9933 0%,#ffd270 50%,#fff3c4 100%);
  --shadow-lg:0 24px 60px -18px rgba(0,0,0,.65);
  --radius:20px;
  --font-head:'Cormorant Garamond',Georgia,serif;
  --font-ui:'Poppins','Mukta',system-ui,sans-serif;
  --font-deva:'Mukta','Noto Sans Devanagari',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
#app{-webkit-user-select:none;user-select:none}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ui);
  background:radial-gradient(1200px 800px at 80% -10%,#2a1740 0%,transparent 60%),
             radial-gradient(1000px 700px at -10% 110%,#301a12 0%,transparent 55%),
             linear-gradient(160deg,var(--bg-0),var(--bg-1) 55%,var(--bg-2));
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
}
::selection{background:rgba(255,153,51,.35);color:#fff}
/* ---- Mobile touch friendliness ---- */
html,body{touch-action:manipulation}
*{-webkit-tap-highlight-color:transparent}
.btn,.pill-btn,.text-item,.deity-card,.action-card,.lang-opt{cursor:pointer}
a{text-decoration:none}



/* ---------- Ambient background ---------- */
#bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 26s ease-in-out infinite alternate}
.glow-1{width:520px;height:520px;background:#7a2d0c;top:-140px;left:-120px}
.glow-2{width:640px;height:640px;background:#3b1d63;bottom:-220px;right:-160px;animation-delay:-8s}
.glow-3{width:420px;height:420px;background:#8a5a00;top:38%;left:58%;opacity:.28;animation-delay:-15s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,-40px) scale(1.12)}}

#mandala{
  position:absolute;width:min(130vmin,1150px);height:min(130vmin,1150px);
  left:50%;top:46%;transform:translate(-50%,-50%);
  color:rgba(245,198,106,.14);
  animation:spin 240s linear infinite;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.particle{position:absolute;font-size:13px;opacity:0;animation:rise linear infinite;text-shadow:0 0 10px rgba(255,170,60,.85)}
@keyframes rise{
  0%{transform:translateY(105vh) scale(.7);opacity:0}
  12%{opacity:.9}
  82%{opacity:.55}
  100%{transform:translateY(-8vh) translateX(30px) scale(1);opacity:0}
}

/* ---------- Top bar ---------- */
#topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:16px;
  padding:calc(clamp(10px,2.2vw,14px) + env(safe-area-inset-top,0px)) clamp(14px,4vw,36px);
  background:rgba(11,7,20,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(245,198,106,.14);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-om{
  width:44px;height:44px;display:grid;place-items:center;font-size:24px;color:var(--gold);
  background:radial-gradient(circle at 32% 28%,rgba(255,153,51,.34),rgba(255,153,51,.05));
  border:1px solid var(--card-brd-hi);border-radius:50%;
  box-shadow:0 0 22px rgba(255,153,51,.35),inset 0 0 14px rgba(255,180,80,.18);
  animation:pulseOm 4s ease-in-out infinite;
  flex:none;
}
@keyframes pulseOm{0%,100%{box-shadow:0 0 16px rgba(255,153,51,.3)}50%{box-shadow:0 0 30px rgba(255,153,51,.6)}}
.brand-title{display:block;font-family:var(--font-head);font-size:20px;font-weight:700;letter-spacing:.06em;
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#crumb{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--ink-faint);
  overflow-x:auto;overflow-y:visible;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding-right:4px;
}
#crumb::-webkit-scrollbar{height:4px}
#crumb::-webkit-scrollbar-thumb{border-radius:2px;background:rgba(245,198,106,.4)}
#crumb::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
#crumb a{color:var(--ink-dim);text-decoration:none;padding:4px 10px;border-radius:999px;border:1px solid transparent;transition:.25s;white-space:nowrap;scroll-snap-align:start}
#crumb a:hover{color:var(--gold-hi);border-color:var(--card-brd)}
#crumb .sep{color:rgba(245,198,106,.5);white-space:nowrap;scroll-snap-align:start}
#crumb .here{color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50vw;scroll-snap-align:start}

.site-search{position:relative;display:flex;align-items:center;flex:none;width:min(260px,24vw);min-width:170px}
.site-search input{width:100%;height:40px;padding:0 38px 0 14px;border:1px solid var(--card-brd-hi);border-radius:999px;background:rgba(255,255,255,.06);color:var(--ink);font:13px var(--font-ui);outline:none}
.site-search input::placeholder{color:var(--ink-faint)}
.site-search input:focus{border-color:var(--gold);box-shadow:0 0 16px rgba(255,153,51,.2)}
.site-search button{position:absolute;right:4px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--gold);font-size:23px;line-height:1;cursor:pointer}
.search-suggestions{position:absolute;top:calc(100% + 9px);right:0;width:min(390px,80vw);max-height:60vh;overflow:auto;padding:6px;border:1px solid var(--card-brd-hi);border-radius:14px;background:rgba(24,15,38,.98);box-shadow:var(--shadow-lg);display:none}
.search-suggestions.open{display:block}
.search-suggestion{display:block;width:100%;padding:10px 12px;border:0;border-radius:9px;background:transparent;color:var(--ink);text-align:left;font:13px var(--font-ui);cursor:pointer}
.search-suggestion:hover,.search-suggestion:focus{background:rgba(255,153,51,.12);color:var(--gold-hi);outline:none}
.search-suggestion small{display:block;margin-top:3px;color:var(--ink-faint);font-size:10px}
.search-empty{padding:12px;color:var(--ink-faint);font-size:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.pill-btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 16px;border-radius:999px;font-family:var(--font-ui);font-size:13px;font-weight:500;
  color:var(--gold-hi);background:linear-gradient(140deg,rgba(255,153,51,.16),rgba(255,153,51,.05));
  border:1px solid var(--card-brd-hi);transition:.25s;
  min-height:40px;min-width:40px;flex:none;
}
.pill-btn:hover{background:linear-gradient(140deg,rgba(255,153,51,.3),rgba(255,153,51,.1));box-shadow:0 0 18px rgba(255,153,51,.35);transform:translateY(-1px)}
.admin-link{white-space:nowrap}


/* ---------- Layout ---------- */

#app{max-width:1180px;margin:0 auto;padding:clamp(18px,4vw,44px) clamp(14px,4vw,36px) 90px}

.view-head{text-align:center;margin-bottom:38px;animation:fadeUp .6s ease both}
.ad-slot{
  min-height:90px;margin:24px auto 30px;max-width:728px;
  display:grid;place-items:center;border:1px dashed rgba(245,198,106,.16);
  color:var(--ink-faint);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.ad-modal{max-width:760px;text-align:center}
.ad-modal .ad-slot{width:min(728px,100%);margin:0 auto 20px}
.continue-copy{margin:0 auto}

.kicker{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--marigold);margin-bottom:12px}

.kicker::before,.kicker::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--marigold))}
.kicker::after{background:linear-gradient(90deg,var(--marigold),transparent)}
h1.page-title{font-family:"Times New Roman",var(--font-head),var(--font-deva),serif;font-weight:700;font-size:clamp(28px,4.5vw,44px);line-height:1.5;
  background:linear-gradient(120deg,#ffe9bd,#ffc46b 45%,#ff9933);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.deity-glyph-big{
  margin-bottom:10px;display:flex;justify-content:center;
  filter:drop-shadow(0 0 18px rgba(255,153,51,.55));animation:floaty 5s ease-in-out infinite;
}
.deity-img-big{
  width:160px;height:160px;object-fit:cover;border-radius:50%;
  border:3px solid var(--gold);
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.page-sub{margin-top:12px;color:var(--ink-dim);font-size:13.5px;max-width:640px;margin-inline:auto;line-height:1.75}
.divider-om{margin:18px auto 0;color:var(--gold);font-size:13px;letter-spacing:.6em;opacity:.8}

.admin-panel{max-width:820px;margin:0 auto;padding:clamp(16px,3vw,28px);border:1px solid var(--card-brd);border-radius:var(--radius);background:rgba(18,12,28,.88);box-shadow:var(--shadow-lg)}
.admin-login{max-width:440px;display:grid;gap:16px}
.admin-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px;margin-bottom:20px}
.admin-toolbar-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-width:0}
.admin-toolbar-group[hidden],.admin-field[hidden]{display:none!important}
.admin-field{display:grid;gap:7px;margin-bottom:16px;color:var(--gold-hi);font-size:12px;font-weight:600}
.admin-field input,.admin-field select,.admin-field textarea{width:100%;min-width:0;padding:11px 13px;border:1px solid var(--card-brd-hi);border-radius:10px;background:#171021;color:var(--ink);font:13px var(--font-ui);outline:none}
.admin-field input:focus,.admin-field select:focus,.admin-field textarea:focus{border-color:var(--gold);box-shadow:0 0 14px rgba(255,153,51,.18)}
.admin-field textarea{resize:vertical;line-height:1.7;font-family:var(--font-deva)}
.admin-field option{background:#171021;color:var(--ink)}
.admin-status,.admin-note{color:var(--ink-faint);font-size:12px;line-height:1.7}
.admin-status{min-height:1.7em;margin-top:12px}
.admin-status.error{color:#ff9b8f}
.admin-note{padding-top:10px;border-top:1px solid var(--card-brd)}
.admin-actions{display:flex;flex-wrap:wrap;gap:10px}
.admin-logout{white-space:nowrap}
.admin-text-form .admin-field{margin-bottom:16px}
.admin-text-form textarea{min-height:210px}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Deity grid ---------- */
.deity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:20px}
.deity-card{
  position:relative;cursor:pointer;text-align:center;padding:30px 18px 24px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--card-brd);backdrop-filter:blur(8px);
  transition:transform .3s ease,border-color .3s,box-shadow .3s;overflow:hidden;
  animation:fadeUp .55s ease both;
}
.deity-card::before{
  content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,190,90,.16) 82%,transparent 92%);
  animation:spinSlow 9s linear infinite;opacity:0;transition:opacity .35s;
}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.deity-card:hover{transform:translateY(-7px);border-color:var(--card-brd-hi);box-shadow:var(--shadow-lg),0 0 34px -6px rgba(255,153,51,.35)}
.deity-card:hover::before{opacity:1}
.deity-glyph{
  position:relative;margin-bottom:14px;display:flex;justify-content:center;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.5));
}
.deity-img{width:68px;height:68px;object-fit:cover;border-radius:50%;border:2px solid var(--card-brd);transition:transform .3s}
.deity-card:hover .deity-img{transform:scale(1.14) rotate(-4deg)}
.deity-name{position:relative;font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--gold-hi)}
.deity-native{position:relative;font-family:var(--font-deva);font-size:13px;color:var(--ink-dim);margin-top:3px}
.deity-count{position:relative;display:inline-block;margin-top:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--marigold);
  border:1px solid var(--card-brd);border-radius:999px;padding:4px 12px;background:rgba(255,153,51,.08)}

/* ---------- Text list ---------- */
.content-tabs{
  display:flex;gap:8px;max-width:980px;margin:0 auto 18px;padding:5px;
  border:1px solid var(--card-brd);border-radius:14px;background:var(--card);
}
.content-tab{
  flex:1;border:1px solid transparent;border-radius:10px;padding:11px 16px;
  background:transparent;color:var(--ink-dim);font:600 14px var(--font-ui);
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.content-tab:hover{color:var(--gold-hi);border-color:var(--card-brd)}
.content-tab.active{
  color:var(--bg-0);background:var(--accent-grad);border-color:var(--gold-hi);
}
.empty-tab{
  grid-column:1/-1;padding:34px 20px;text-align:center;color:var(--ink-dim);
  border:1px dashed var(--card-brd);border-radius:16px;background:var(--card);
}
.deity-subsections{display:flex;flex-direction:column;gap:14px;max-width:980px;margin:0 auto}
.deity-subsection{border:1px solid var(--card-brd);border-radius:16px;background:var(--card);overflow:hidden}
.deity-subsection summary{cursor:pointer;padding:18px 22px;color:var(--ink);font-family:"Times New Roman",var(--font-head),var(--font-deva),serif;font-size:18px;font-weight:600;list-style:none}
.deity-subsection summary::-webkit-details-marker{display:none}
.deity-subsection summary::after{content:"+";float:right;color:var(--gold)}
.deity-subsection[open] summary::after{content:"−"}
.deity-subsection summary:hover{color:var(--gold-hi)}
.subsection-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;margin-left:7px;padding:0 7px;border:1px solid var(--card-brd-hi);border-radius:999px;color:var(--marigold);font:500 11px var(--font-ui);vertical-align:middle}
.deity-subsection .text-list{padding:0 22px 22px}
.text-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;
  max-width:980px;
  margin:0 auto;
  align-items:stretch;
}
.text-item{
  position:relative;display:flex;align-items:center;gap:18px;cursor:pointer;padding:18px 22px;border-radius:16px;
  background:var(--card);border:1px solid var(--card-brd);backdrop-filter:blur(8px);
  transition:transform .25s,border-color .25s,box-shadow .25s;animation:fadeUp .5s ease both;
}
.text-item:hover{transform:translateY(-3px);border-color:var(--card-brd-hi);box-shadow:0 14px 34px -14px rgba(0,0,0,.6),0 0 22px -8px rgba(255,153,51,.4)}
.text-type{
  flex:none;width:42px;height:42px;display:grid;place-items:center;font-size:19px;border-radius:13px;
  background:linear-gradient(140deg,rgba(255,153,51,.22),rgba(255,153,51,.06));
  border:1px solid var(--card-brd);color:var(--gold);
}
.text-info{flex:1;min-width:0}
.text-title{font-family:"Times New Roman",var(--font-head),var(--font-deva),serif;font-size:17px;font-weight:600;color:var(--ink)}
.text-item:hover .text-title{color:var(--gold-hi)}
.text-desc{
  position:absolute;left:22px;right:22px;bottom:calc(100% + 8px);z-index:10;
  padding:9px 12px;border:1px solid var(--card-brd-hi);border-radius:10px;
  background:rgba(24,15,38,.97);box-shadow:0 10px 24px -10px rgba(0,0,0,.8);
  font-size:12px;color:var(--ink-dim);line-height:1.55;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .2s,transform .2s,visibility .2s;
  pointer-events:none;
}
.text-item:hover .text-desc,.text-item:focus-within .text-desc{
  opacity:1;visibility:visible;transform:translateY(0);
}
.text-meta{flex:none;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--marigold);opacity:.85}
.arrow{flex:none;color:var(--gold);opacity:.55;transition:.25s}
.text-item:hover .arrow{opacity:1;transform:translateX(4px)}
.search-results{max-width:980px;margin:0 auto}
.search-result-kind{display:block;margin-top:4px;color:var(--ink-faint);font-size:10px}

/* ---------- Holy books menu ---------- */
.holy-books-list{display:flex;flex-direction:column;gap:14px;max-width:820px;margin:0 auto}
.holy-book{border:1px solid var(--card-brd);border-radius:16px;background:var(--card);overflow:hidden}
.holy-book summary{cursor:pointer;padding:18px 22px;color:var(--ink);font-family:"Times New Roman",var(--font-head),var(--font-deva),serif;font-size:18px;font-weight:600;list-style:none}
.holy-book summary::-webkit-details-marker{display:none}
.holy-book summary::after{content:"+";float:right;color:var(--gold)}
.holy-book[open] summary::after{content:"−"}
.holy-book summary:hover{color:var(--gold-hi)}
.chapter-list{display:flex;flex-wrap:wrap;gap:8px;padding:0 22px 16px}
.chapter-list a{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:9px 12px;border:1px solid rgba(255,180,70,.16);border-radius:999px;color:var(--ink-dim);background:rgba(255,255,255,.035);white-space:nowrap}
.chapter-list a:hover{color:var(--gold-hi);background:rgba(255,153,51,.09)}

/* ---------- Lyrics reader ---------- */
.reader{max-width:860px;margin:0 auto}
.reader-toolbar{
  display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:30px;
  overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;padding-bottom:2px;
}
.reader-toolbar::-webkit-scrollbar{height:4px}
.reader-toolbar::-webkit-scrollbar-thumb{border-radius:2px;background:rgba(245,198,106,.4)}
.reader-toolbar::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
.tool-chip{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-dim);
  border:1px solid var(--card-brd);border-radius:999px;padding:7px 15px;background:rgba(255,255,255,.03);
  flex:none;min-width:44px;min-height:40px;cursor:pointer;white-space:nowrap;scroll-snap-align:start;
}
.tool-chip b{color:var(--gold-hi);font-weight:500}


.verse{
  position:relative;margin-bottom:26px;padding:22px clamp(18px,4vw,30px);border-radius:var(--radius);
  background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--card-brd);backdrop-filter:blur(10px);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.6);
  animation:fadeUp .55s ease both;
}
.verse::before{
  content:"॥";position:absolute;top:10px;right:18px;font-size:26px;color:rgba(245,198,106,.28);font-family:var(--font-deva);
}
.verse.whole{padding:32px clamp(20px,4.5vw,40px)}
.verse.whole .line-deva{font-size:clamp(17px,2.4vw,22px);line-height:1.25}
.translating{
  display:inline-block;color:var(--marigold);font-size:14px;letter-spacing:.04em;
  animation:pulseOm 1.6s ease-in-out infinite;
}
.fallback-note{
  display:block;margin-top:18px;padding-top:14px;border-top:1px dashed rgba(245,198,106,.25);
  font-family:var(--font-ui);font-style:normal;font-size:12px;color:var(--ink-faint);
}
.verse-no{
  position:absolute;top:-13px;left:22px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:#1c1206;background:var(--accent-grad);padding:4px 13px;border-radius:999px;font-weight:600;
  box-shadow:0 4px 14px rgba(255,153,51,.4);
}
.line-deva{font-family:"Times New Roman",var(--font-deva),serif;font-size:clamp(16px,2.2vw,20px);line-height:1.25;color:var(--gold-hi);text-align:center;white-space:pre-line}
.line-trans{margin-top:12px;font-style:italic;font-size:14px;line-height:1.9;color:var(--ink-dim);text-align:center;letter-spacing:.02em}
.benefits{
  margin-top:14px;font-size:12px;color:var(--marigold);display:flex;gap:8px;align-items:flex-start;line-height:1.7;
}
.reader-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.btn{
  cursor:pointer;font-family:var(--font-ui);font-size:13px;font-weight:500;border-radius:999px;
  padding:12px 24px;border:1px solid var(--card-brd-hi);color:var(--gold-hi);
  background:linear-gradient(140deg,rgba(255,153,51,.18),rgba(255,153,51,.05));transition:.25s;
  display:inline-flex;align-items:center;gap:9px;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(255,153,51,.5)}
.btn.primary{background:var(--accent-grad);color:#241300;border:none;font-weight:600}
.btn.primary:hover{box-shadow:0 12px 30px -6px rgba(255,170,60,.65)}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:100;background:rgba(5,3,10,.72);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:18px;animation:fadeIn .25s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  width:min(560px,100%);max-height:88vh;overflow:auto;border-radius:24px;padding:30px clamp(20px,4vw,34px);
  background:linear-gradient(165deg,#221537,#171027 60%,#1d1226);
  border:1px solid var(--card-brd-hi);box-shadow:var(--shadow-lg),0 0 60px -18px rgba(255,153,51,.4);
  animation:popIn .32s cubic-bezier(.2,1.4,.4,1);
}
@keyframes popIn{from{opacity:0;transform:scale(.92) translateY(14px)}to{opacity:1;transform:none}}
.modal h2{font-family:var(--font-head);font-size:24px;color:var(--gold-hi);text-align:center}
.modal .modal-sub{text-align:center;color:var(--ink-faint);font-size:12.5px;margin-top:6px;margin-bottom:20px}
.language-select-label{display:block;margin-bottom:8px;color:var(--ink-dim);font-size:12.5px;font-weight:500}
.language-select{
  width:100%;padding:11px 13px;border:1px solid var(--card-brd);
  border-radius:10px;background:#241735;color:#ffe3a3;
  font-family:var(--font-ui);font-size:13px;cursor:pointer;
}
.language-select option{background:#241735;color:#ffe3a3}
.language-select:focus{outline:2px solid var(--gold);outline-offset:1px}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:22px}
.lang-opt{
  cursor:pointer;padding:12px 14px;border-radius:14px;border:1px solid var(--card-brd);
  background:rgba(255,255,255,.03);transition:.2s;text-align:left;
}
.lang-opt:hover{border-color:var(--card-brd-hi);background:rgba(255,153,51,.09)}
.lang-opt.sel{border-color:var(--gold);background:rgba(255,153,51,.16);box-shadow:0 0 16px -4px rgba(255,153,51,.5)}
.lang-opt .lo-name{font-size:13.5px;color:var(--ink);font-weight:500}
.lang-opt .lo-native{font-family:var(--font-deva);font-size:12.5px;color:var(--ink-dim);margin-top:2px}
.action-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.action-row{grid-template-columns:1fr}}
.action-card{
  cursor:pointer;text-align:left;padding:16px;border-radius:16px;border:1px solid var(--card-brd);
  background:rgba(255,255,255,.03);transition:.22s;
}
.action-card:hover{border-color:var(--card-brd-hi);transform:translateY(-3px);box-shadow:0 12px 26px -12px rgba(255,153,51,.45)}
.action-card.sel{border-color:var(--gold);background:rgba(255,153,51,.14)}
.ac-icon{font-size:22px}
.ac-title{font-size:14px;font-weight:600;color:var(--gold-hi);margin-top:8px}
.ac-desc{font-size:11.5px;color:var(--ink-faint);margin-top:5px;line-height:1.6}
.modal-go{width:100%;margin-top:20px;justify-content:center;font-size:14.5px}
.modal-close{
  position:sticky;top:0;float:right;margin:-8px -6px 0 0;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--card-brd);background:rgba(255,255,255,.04);color:var(--ink-dim);cursor:pointer;font-size:15px;transition:.2s;
}
.modal-close:hover{color:#fff;border-color:var(--card-brd-hi)}

/* ---------- Toast ---------- */
#toastRoot{position:fixed;bottom:calc(26px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center}

.toast{
  padding:12px 22px;border-radius:999px;font-size:13px;color:var(--gold-hi);
  background:rgba(24,15,38,.94);border:1px solid var(--card-brd-hi);
  box-shadow:0 14px 34px -10px rgba(0,0,0,.7),0 0 24px -8px rgba(255,153,51,.5);
  animation:toastIn .35s cubic-bezier(.2,1.3,.4,1);
}
@keyframes toastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Footer ---------- */
#foot{
  text-align:center;padding:34px 16px calc(40px + env(safe-area-inset-bottom,0px));color:var(--ink-faint);font-size:11.5px;
  border-top:1px solid rgba(245,198,106,.1);display:flex;flex-direction:column;gap:8px;
}

.foot-om{font-family:var(--font-deva);font-size:15px;color:var(--gold);letter-spacing:.2em;opacity:.85}
.suggestion-note{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;color:var(--ink-dim);font-family:var(--font-deva);font-size:12px}
.instagram-link{display:inline-flex;align-items:center;gap:5px;color:var(--gold-hi);font-family:var(--font-body);font-weight:600;text-decoration:none;transition:color .2s,transform .2s}
.instagram-link:hover{color:#fff;transform:translateY(-1px)}
.instagram-link span{font-size:19px;line-height:1}

/* ---------- Responsive (tablet) ---------- */
@media(max-width:720px){
  #topbar{flex-wrap:wrap}
  .site-search{order:3;width:100%;min-width:0}
  #crumb{order:2}
  #langBtn{order:2}
  .admin-link{order:2;padding-inline:12px}
  #topbar{flex-wrap:wrap;gap:12px}
  #crumb{order:3;width:100%}
  .brand{flex:1;min-width:0}
  .brand-title{font-size:18px}
  .brand-sub{font-size:8.5px}
  .brand-om{width:38px;height:38px;font-size:20px}
  #langBtn{font-size:12px;padding:7px 14px}
  .deity-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .deity-card{padding:22px 12px 18px}
  .deity-img{width:56px;height:56px}
  .deity-name{font-size:18px}
  .text-item{flex-wrap:wrap}
  .text-title{font-size:17px}
  .text-meta{display:none}
  h1.page-title{font-size:clamp(26px,5vw,38px)}
  .verse{padding:22px 16px}
  .verse.whole{padding:30px 16px}
  .line-deva{font-size:clamp(16px,3vw,19px)}
  .verse.whole .line-deva{font-size:clamp(17px,3.2vw,21px)}
  .line-trans{font-size:13.5px}
  .btn{padding:11px 22px;font-size:12.5px}
  .reader-toolbar{gap:8px}
  .tool-chip{font-size:11.5px;padding:6px 13px}
}
@media(max-width:480px){
  .admin-toolbar{grid-template-columns:1fr;gap:10px}
  .admin-toolbar-group{grid-template-columns:1fr;gap:0}
  .admin-logout{grid-column:1 / -1}
  .admin-actions{flex-direction:column}
  .admin-actions .btn{width:100%;justify-content:center}
}

/* ---------- Responsive (mobile) ---------- */
@media(max-width:480px){
  #topbar{padding:10px 12px;gap:10px}
  .brand{gap:8px}
  .brand-om{width:34px;height:34px;font-size:18px}
  .brand-title{font-size:16px}
  .brand-sub{font-size:7.5px}
  #langBtn{font-size:11px;padding:6px 12px;gap:6px}
  #app{padding:clamp(14px,4vw,32px) 12px calc(70px + env(safe-area-inset-bottom,0px))}

  .deity-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
  .deity-card{padding:20px 10px 16px;border-radius:18px}
  .deity-img{width:48px;height:48px}
  .deity-name{font-size:15px}
  .deity-native{font-size:11.5px}
  .deity-count{font-size:9px;padding:3px 10px}
  .text-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .content-tabs{margin-bottom:14px}
  .content-tab{padding:10px 8px;font-size:12px}
  .text-item{padding:15px 14px;gap:10px;border-radius:14px}
  .text-type{width:38px;height:38px;font-size:17px;border-radius:10px}
  .text-title{font-size:14.5px}
  .text-desc{font-size:11px}
  .view-head{margin-bottom:28px}
  .kicker{font-size:9.5px;gap:8px;margin-bottom:10px}
  .kicker::before,.kicker::after{width:28px}
  h1.page-title{font-size:clamp(22px,6vw,28px);margin-bottom:14px}
  .page-sub{font-size:12px}
  .divider-om{font-size:11px;letter-spacing:.4em}
  .verse{margin-bottom:20px;padding:20px 12px;border-radius:16px}
  .verse::before{top:8px;right:14px;font-size:22px}
  .verse.whole{padding:26px 12px}
  .verse.whole .line-deva{font-size:clamp(15px,4.8vw,18px);line-height:1.25}
  .line-deva{font-size:clamp(15px,4.5vw,17px);line-height:1.25}
  .line-trans{font-size:12.5px;line-height:1.8}
  .benefits{font-size:11.5px}
  .benefits span{font-size:11.5px}
  .reader-toolbar{margin-bottom:24px;gap:6px}
  .reader-toolbar .tool-chip{font-size:11px;padding:6px 12px}
  .btn{padding:10px 20px;font-size:12px}
  .reader-actions{flex-direction:column;gap:10px}
  .reader-actions .btn{width:100%;justify-content:center}
  .modal{padding:24px 16px;border-radius:20px}
  .modal h2{font-size:20px}
  .lang-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .action-card{padding:14px;border-radius:14px}
  .ac-title{font-size:13px}
  .ac-desc{font-size:11px}
  .modal-go{font-size:13.5px}
  .modal-close{width:30px;height:30px;font-size:14px}
}