/* Daastan — premium reading theme: warm parchment + royal purple + gold */
:root{
  --bg:#f4eede; --bg2:#ece2cf; --card:#fffdf7; --ink:#2b2335; --muted:#6d6480;
  --line:#e7ddc8; --line2:#f0e8d7;
  --purple:#4a2d7a; --purple-d:#2a1a4a; --purple-2:#6e4bb6; --purple-soft:#efe9f8;
  --gold:#b0851f; --gold-2:#e2bf6c; --gold-soft:#fbf3da; --gold-line:#ecd9a2;
  --rose:#c2557a;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --dev:'Noto Serif Devanagari',var(--serif);
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --acc:#7a5cc6;
  --shadow:0 14px 40px rgba(42,26,74,.13); --shadow-sm:0 4px 16px rgba(42,26,74,.08);
  --r:18px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--ui); color:var(--ink); line-height:1.6;
  background:
    radial-gradient(1100px 520px at 82% -8%, #e9ddff 0%, transparent 55%),
    radial-gradient(900px 500px at 0% 0%, #f7eecf 0%, transparent 50%),
    var(--bg);
  background-attachment:fixed; -webkit-text-size-adjust:100%;
}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(1.4px 1.4px at 18% 22%, rgba(180,150,90,.5) 50%, transparent),
   radial-gradient(1.2px 1.2px at 67% 14%, rgba(150,120,200,.45) 50%, transparent),
   radial-gradient(1.6px 1.6px at 88% 30%, rgba(180,150,90,.4) 50%, transparent),
   radial-gradient(1.2px 1.2px at 40% 8%, rgba(150,120,200,.4) 50%, transparent);}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px;position:relative;z-index:1}
a{color:var(--purple-2);text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);margin:0;letter-spacing:-.01em;font-weight:600}
.dev,[lang="hi"]{font-family:var(--dev)}
svg{width:1em;height:1em;display:inline-block;vertical-align:-.14em}
i[data-i]{display:inline-flex}

/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(244,238,222,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--serif);font-weight:700;font-size:22px}
.logo .lm{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:18px;
  background:linear-gradient(140deg,var(--purple),var(--purple-d));box-shadow:inset 0 0 0 1.5px rgba(226,191,108,.5),var(--shadow-sm)}
.hb{display:flex;gap:8px}
.ic{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:18px}
.ic:hover{border-color:var(--purple-2);color:var(--purple-2)}
#favTab:hover,.ic.on{color:var(--rose)}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;margin-bottom:8px;
  background:radial-gradient(120% 120% at 85% 0%, #5a36a0 0%, #3a2270 45%, #251642 100%)}
.hero::before{content:"";position:absolute;left:8%;top:16%;width:54px;height:54px;border-radius:50%;
  box-shadow:14px 6px 0 0 #e9c97a;background:transparent;filter:drop-shadow(0 0 18px rgba(233,201,122,.5));opacity:.9}
.hero::after{content:"";position:absolute;inset:0;background-image:
  radial-gradient(1.6px 1.6px at 30% 20%,rgba(255,240,200,.9),transparent),
  radial-gradient(1.4px 1.4px at 62% 12%,rgba(255,240,200,.7),transparent),
  radial-gradient(1.5px 1.5px at 80% 34%,rgba(255,240,200,.8),transparent),
  radial-gradient(1.2px 1.2px at 16% 44%,rgba(255,240,200,.6),transparent);pointer-events:none}
.hero-in{padding:46px 18px 50px;position:relative;z-index:2;text-align:center}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#f6e8c4;
  background:rgba(233,201,122,.14);border:1px solid rgba(233,201,122,.34);padding:7px 14px;border-radius:999px}
.hero h1{font-size:clamp(44px,9vw,76px);font-weight:700;margin:16px 0 6px;letter-spacing:.01em;
  background:linear-gradient(180deg,#fff6e4,#e9c97a 75%,#caa441);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 30px rgba(233,201,122,.25)}
.hero .tag{font-family:var(--serif);font-size:clamp(17px,3.4vw,22px);color:#f1e6cf;margin:0 0 10px;font-style:italic}
.hero .lede{max-width:600px;margin:0 auto 24px;color:#d8cdf0;font-size:15.5px;line-height:1.7}
.hero-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-weight:700;font-size:15px;cursor:pointer;
  border:1px solid transparent;padding:12px 20px;border-radius:13px;transition:transform .08s,box-shadow .2s,background .2s;
  background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(4px)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.gold{background:linear-gradient(135deg,#e9c97a,#caa441);color:#3a2a05;box-shadow:0 8px 22px rgba(202,164,65,.4);border:none}
.btn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28)}
.btn .heartfill,.btn [data-i="heart"]{color:#ffd0de}
.link{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--purple-2);font-weight:600;font-size:14px;cursor:pointer;font-family:var(--ui)}
.link.danger{color:var(--rose)}

/* sections */
.sec{margin:30px 0}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sechead h2{font-size:22px;font-weight:600;display:flex;align-items:center;gap:9px;color:var(--ink)}
.sechead h2 svg{color:var(--gold)}

/* daily */
.daily{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dtile{text-align:left;cursor:pointer;font-family:var(--ui);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  background:linear-gradient(160deg,#fffdf7,#fbf4e4);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px;transition:transform .12s,box-shadow .2s,border-color .2s;min-height:150px}
.dtile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold-line)}
.dtile .dl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gold)}
.dtile .dt{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);line-height:1.25}
.dtile.dev .dt,.dtile.dev .dx{font-family:var(--dev)}
.dtile .dx{font-size:13.5px;color:var(--muted);line-height:1.55;flex:1}
.dtile .da{font-size:12px;color:var(--purple-2);font-weight:600}

/* search + surprise */
.searchbar{display:flex;gap:10px;margin:8px 0 4px;align-items:stretch;flex-wrap:wrap}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 14px;box-shadow:var(--shadow-sm)}
.search svg{color:var(--muted)}
.search input{flex:1;border:none;background:transparent;font-family:var(--ui);font-size:15px;color:var(--ink);padding:13px 0;outline:none}
.surprise-wrap{position:relative}
.rnd{display:inline-flex;align-items:center;gap:8px;height:100%;padding:0 18px;border:none;border-radius:14px;cursor:pointer;font-family:var(--ui);font-weight:700;font-size:14.5px;
  background:linear-gradient(135deg,var(--purple-2),var(--purple));color:#fff;box-shadow:0 8px 20px rgba(74,45,122,.3);white-space:nowrap}
.rnd:hover{filter:brightness(1.06)}
.smenu{position:absolute;right:0;top:calc(100% + 8px);width:248px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;z-index:30;display:none}
.smenu.on{display:block;animation:pop .15s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.smitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--ui);font-size:14.5px;font-weight:600;color:var(--ink);padding:11px 12px;border-radius:10px}
.smitem:hover{background:var(--purple-soft);color:var(--purple)}
.smitem svg{color:var(--gold)}

/* category cards */
.catcards{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.catcard{cursor:pointer;font-family:var(--ui);border:1px solid var(--line);border-radius:16px;padding:16px 12px;
  background:var(--card);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:transform .12s,box-shadow .2s,border-color .2s}
.catcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--c,var(--gold-line))}
.catcard .ci{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:21px;color:#fff;background:linear-gradient(140deg,var(--c,#7a5cc6),var(--c2,#4a2d7a))}
.catcard .cn{font-family:var(--serif);font-weight:600;font-size:15px;color:var(--ink);line-height:1.2}
.catcard .cc{font-size:11.5px;color:var(--muted);font-weight:600}
.cat-stories{--c:#7a5cc6;--c2:#4a2d7a}.cat-shayari{--c:#c98a3a;--c2:#8a5a1a}.cat-poetry{--c:#5aa0a0;--c2:#2f6b6b}
.cat-quotes{--c:#c79a3b;--c2:#8a6a1a}.cat-hindi{--c:#c2557a;--c2:#8a2a52}.cat-urdu{--c:#6e6bd6;--c2:#3a38a0}
.cat-love{--c:#e06a8a;--c2:#b03a5a}.cat-life{--c:#5a9bd6;--c2:#2f5fa0}.cat-motivation{--c:#d98a3a;--c2:#a05a1a}
.cat-moral{--c:#7aab5a;--c2:#4a7b2a}.cat-kids{--c:#54b0c0;--c2:#2a7080}.cat-classic{--c:#a06ad0;--c2:#5a2a8a}

/* chips */
.clearfav{margin-left:auto}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);font-weight:600;font-size:13.5px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--muted);padding:9px 13px;border-radius:999px;white-space:nowrap}
.chip svg{color:var(--gold)}
.chip b{font-weight:700;font-size:11px;background:var(--bg2);color:var(--muted);padding:1px 7px;border-radius:999px}
.chip:hover{color:var(--ink);border-color:var(--gold-line)}
.chip.on{background:linear-gradient(135deg,var(--purple),var(--purple-d));color:#fff;border-color:transparent}
.chip.on svg{color:var(--gold-2)}.chip.on b{background:rgba(255,255,255,.18);color:#fff}
.langs{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 4px}
.fchip{font-family:var(--ui);font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--muted);padding:6px 12px;border-radius:999px}
.fchip:hover{color:var(--ink)}
.fchip.on{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)}
.rcount{font-size:12.5px;color:var(--muted);margin:12px 2px 14px;font-weight:600}

/* content grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;cursor:pointer;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:transform .12s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--gold-2),var(--purple-2));opacity:0;transition:opacity .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold-line)}
.card:hover::before{opacity:1}
.card:focus-visible{outline:2px solid var(--purple-2);outline-offset:2px}
.ct{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.type{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);
  background:var(--gold-soft);border:1px solid var(--gold-line);padding:4px 10px;border-radius:999px}
.fav{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:16px}
.fav:hover{color:var(--rose);border-color:#f0c4d2}
.fav.on{color:var(--rose);border-color:#f0c4d2;background:#fdeef2}
.card h3{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.25;margin:0 0 8px;color:var(--ink)}
.card.dev h3,.card.dev .ex{font-family:var(--dev)}
.ex{font-size:14px;color:var(--muted);line-height:1.6;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.cf{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.cf b{color:var(--ink);font-weight:700}
.dot{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.5;flex:none}

/* empty */
.empty{grid-column:1/-1;text-align:center;padding:48px 24px;background:var(--card);border:1px dashed var(--line);border-radius:22px;color:var(--muted)}
.empty svg{font-size:40px;color:var(--gold-2)}
.empty h4{font-family:var(--serif);font-size:21px;color:var(--ink);margin:14px 0 6px}
.empty p{max-width:380px;margin:0 auto 16px;font-size:14.5px}
.empty .btn{background:var(--purple);color:#fff}

/* ad + trust */
.ad{margin:30px 0 8px;min-height:90px;border:1px dashed var(--line);border-radius:16px;display:grid;place-items:center;color:#b9af98;font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.4)}
.trust{display:flex;align-items:center;gap:9px;justify-content:center;text-align:center;color:var(--muted);font-size:13px;margin:18px 0 6px}
.trust svg{color:var(--gold)}

/* footer */
footer{margin-top:30px;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(74,45,122,.04))}
footer .wrap{padding:26px 18px;text-align:center}
.fb{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink)}
.fb .lm{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:15px;background:linear-gradient(140deg,var(--purple),var(--purple-d))}
.ft{margin-top:8px;color:var(--muted);font-size:13.5px}
.fc{margin-top:8px;color:var(--muted);font-size:12px;opacity:.85}

/* ---------- READER ---------- */
.reader{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;
  --rsize:20px;--rlh:1.9;
  --rbg:#1a1330;--rink:#e9e2f5;--rmuted:#a99fc4;--rcard:#241a40;--rline:rgba(255,255,255,.1);--racc:#e9c97a}
.reader.open{display:flex}
.reader[data-mode="sepia"]{--rbg:#f3e7cf;--rink:#43361f;--rmuted:#8a795a;--rcard:#ecdcbd;--rline:rgba(67,54,31,.14);--racc:#a06a1a}
.reader[data-mode="light"]{--rbg:#fbf8f1;--rink:#2b2335;--rmuted:#6d6480;--rcard:#fff;--rline:#e7ddc8;--racc:#9a6f12}
.reader{background:var(--rbg);color:var(--rink)}
.rbar{flex:none;background:color-mix(in srgb,var(--rbg) 88%,#000 6%);border-bottom:1px solid var(--rline);backdrop-filter:blur(8px)}
.rbar-in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:6px;padding:10px 14px}
.rbar .ic{width:38px;height:38px;border-radius:10px;border:1px solid var(--rline);background:transparent;color:var(--rink);font-size:16px}
.rbar .ic:hover{border-color:var(--racc);color:var(--racc)}
.rbar .ic:disabled{opacity:.32;pointer-events:none}
.rbar .ic.on{color:var(--rose)}
.rnav{display:flex;gap:4px}
.sp{flex:1}
.fs{display:flex;gap:4px}
.fs button{display:inline-flex;align-items:center;gap:2px;height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--rline);background:transparent;color:var(--rink);cursor:pointer;font-family:var(--ui);font-weight:700;font-size:13px}
.fs button svg{font-size:13px}
.fs button:hover{border-color:var(--racc);color:var(--racc)}
.rprog{height:3px;background:var(--rline)}
.rprog span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--racc),var(--rose));transition:width .15s}
.rscroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.rdoc{max-width:680px;margin:0 auto;padding:34px 22px 150px}
.rtype{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--racc)}
.rdoc h1{font-family:var(--serif);font-size:clamp(28px,6vw,40px);font-weight:700;line-height:1.18;margin:14px 0 12px;color:var(--rink)}
.rdoc.dev h1,.rdoc.dev .rtext{font-family:var(--dev)}
.rmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--rmuted);font-size:13px;margin-bottom:26px;font-family:var(--ui)}
.rmeta .dot{background:var(--rmuted);opacity:.6}
.rtext{font-family:var(--serif);font-size:var(--rsize);line-height:var(--rlh);white-space:pre-wrap;color:var(--rink)}
.rtext .ck{transition:background .2s,color .2s;border-radius:4px;padding:0 1px}
.rtext .ck.on{background:linear-gradient(transparent 58%,rgba(233,201,122,.5) 0);color:var(--rink)}
.reader[data-mode="light"] .rtext .ck.on,.reader[data-mode="sepia"] .rtext .ck.on{background:linear-gradient(transparent 58%,rgba(160,106,26,.32) 0)}
.mean{margin-top:26px;background:var(--rcard);border:1px solid var(--rline);border-left:3px solid var(--racc);border-radius:14px;padding:15px 17px;font-family:var(--ui)}
.mean b{display:inline-flex;align-items:center;gap:7px;color:var(--racc);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.mean span{display:block;font-size:14.5px;color:var(--rmuted);line-height:1.6}
.rauthor{margin-top:22px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--racc)}
.racts{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--rline)}
.rbtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);font-weight:700;font-size:13.5px;cursor:pointer;
  border:1px solid var(--rline);background:transparent;color:var(--rink);padding:10px 15px;border-radius:12px}
.rbtn:hover{border-color:var(--racc);color:var(--racc)}
.rbtn.gold{background:linear-gradient(135deg,#e9c97a,#caa441);color:#3a2a05;border:none}
.rbtn.wa{background:#1faa59;color:#fff;border:none}
.rbtn svg{font-size:15px}

/* audio player */
.player{position:absolute;left:0;right:0;bottom:0;transform:translateY(120%);transition:transform .25s;z-index:5;
  background:color-mix(in srgb,var(--rbg) 80%,#000 10%);border-top:1px solid var(--rline);backdrop-filter:blur(10px);
  display:flex;align-items:center;gap:12px;padding:12px 16px}
.player.on{transform:translateY(0)}
.player>*{flex:none}
.pbtn{width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;font-size:18px;
  background:linear-gradient(135deg,var(--racc),#caa441);color:#3a2a05}
.pinfo{flex:1;min-width:0;max-width:760px;margin:0 auto}
.pprog{height:4px;background:var(--rline);border-radius:99px;overflow:hidden}
.pprog span{display:block;height:100%;width:0;background:var(--racc);transition:width .2s}
.pmeta{font-size:12px;color:var(--rmuted);margin-top:5px;font-family:var(--ui)}
.pmeta b{color:var(--rink)}
.pspeed{border:1px solid var(--rline);background:transparent;color:var(--rink);font-family:var(--ui);font-weight:800;font-size:13px;padding:8px 11px;border-radius:10px;cursor:pointer;min-width:48px}
.pspeed:hover{border-color:var(--racc);color:var(--racc)}
.pclose{width:40px;height:40px;border-radius:10px;border:1px solid var(--rline);background:transparent;color:var(--rmuted);cursor:pointer;display:grid;place-items:center;font-size:16px}
.pclose:hover{color:var(--rink);border-color:var(--rink)}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(40px);z-index:90;display:flex;align-items:center;gap:9px;
  background:#241a40;color:#fff;padding:12px 18px;border-radius:13px;font-weight:600;font-size:14px;box-shadow:0 14px 40px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.3s;max-width:90vw}
.toast svg{color:var(--gold-2)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* responsive */
@media(max-width:860px){
  .catcards{grid-template-columns:repeat(4,1fr)}
  .daily{grid-template-columns:1fr}
}
@media(max-width:560px){
  .catcards{grid-template-columns:repeat(3,1fr)}
  .hero-in{padding:36px 18px 40px}
  .sechead h2{font-size:19px}
  .grid{grid-template-columns:1fr}
  .rnd{padding:0 14px}
  .search input{font-size:16px}
  .rdoc{padding:24px 18px 160px}
}
@media(max-width:420px){
  .catcards{grid-template-columns:repeat(2,1fr)}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}