/* ===== Nakshtra Tak — पुराने site की रंगत: केसरिया #fe9a04 + coral #F66962, white bg ===== */
:root{
  /* विकल्प B — हल्का लैवेंडर (#ead2f7) light theme + गहरा-बैंगनी + सोना accent */
  --bg1:#f3e6fb; --bg2:#ead2f7; --bg3:#e3d0f6;              /* page bg लैवेंडर */
  --purple:#6a3fa0; --purple-d:#4a2d6e; --purple-l:#7a4fb0;  /* गहरा बैंगनी — शीर्षक/लिंक (light bg पर पठनीय) */
  --gold:#E8B923; --gold-b:#F5D77A; --rose:#9c3d8a; --teal:#7a6a98;
  --text:#33235a; --muted:#63527f; --line:#dcc6ec;          /* गहरा text, मुलायम बैंगनी border */
  --panel:#ffffff; --ink:#4a2d6e;                            /* कार्ड सफ़ेद; ink = गहरा बैंगनी (header/footer bar) */
  --good:#15803d; --warn:#b45309; --bad:#b91c1c;
  --shadow:0 8px 24px rgba(74,45,110,.12);
  --shadow2:0 14px 34px rgba(74,45,110,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
/* 🔴 Lighthouse की filmstrip में एक **काला** और एक **ख़ाली** frame दिख रहा था
   (user ने पकड़ा)। कारण: `html` व `body` दोनों का background-**color** पारदर्शी
   था — body पर रंग सिर्फ़ gradient से आता है, और gradient `background-image`
   है, `background-color` नहीं। जब तक CSS+सामग्री रंग नहीं भर देती, browser
   अपना default canvas भरता है — dark-mode/Lighthouse में वह **काला** होता है।
   दो पक्के इलाज:
   1. `html` पर ठोस लैवेंडर — canvas पहली ही किरण से सही रंग का, gradient उसके
      ऊपर चढ़ता है (दिखने में कोई फ़र्क़ नहीं)।
   2. `color-scheme:light` — browser को साफ़ बता दो कि यह light-theme site है,
      वरना Chrome का forced-dark canvas को काला कर देता है। */
html{scroll-behavior:smooth;background:#f3e6fb;color-scheme:light}
body{
  font-family:'Segoe UI','Nirmala UI','Mangal',sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 88% -6%, rgba(246,105,98,.07), transparent 60%),
    radial-gradient(800px 480px at 6% 2%, rgba(254,154,4,.08), transparent 60%),
    linear-gradient(160deg,var(--bg1),var(--bg2) 55%,var(--bg3));
  background-attachment:fixed; min-height:100vh; line-height:1.55;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 18px}  /* 1140→1240→1320: अगल-बग़ल ख़ाली जगह कम (user) */
/* header को ज़्यादा जगह — 11 menu-items हर भाषा में एक पंक्ति में आ सकें */
header>.wrap{max-width:1380px}

/* ---- top bar ---- */
.topbar{font-size:12.5px;background:linear-gradient(90deg,var(--purple-d),var(--purple));color:#fff4e4}
.topbar .wrap{display:flex;gap:16px;align-items:center;height:36px}
.topbar .sp{flex:1}
.topbar a{color:#fff4e4}.topbar a:hover{color:#ffe2ad}
/* astrologer panel topbar — stylish strip */
.topbar.atop{font-size:13px;background:linear-gradient(90deg,#5a2d82,#8b3fb0 55%,#e0750a)}
.topbar.atop .wrap{height:42px}
.atop .abadge{display:inline-flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.2px}
.atop .abadge .adot{width:24px;height:24px;border-radius:50%;background:#fff;color:#7a2fa0;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.atop .alogout{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  padding:5px 14px;border-radius:20px;font-weight:700;transition:.15s}
.atop .alogout:hover{background:rgba(255,255,255,.28);color:#fff}
/* user avatar + profile-edit modal (#4) */
.uavatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-b));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;
  background-size:cover;background-position:center;flex:none;box-shadow:0 4px 12px rgba(224,117,10,.25)}
.uavatar.big{width:92px;height:92px;font-size:38px}
.uavatar.hasimg{color:transparent}
.pfmodal{position:fixed;inset:0;background:rgba(40,25,8,.55);display:none;align-items:center;justify-content:center;z-index:999;padding:16px}
.pfmodal.on{display:flex}
.pfbox{background:var(--panel);border-radius:18px;max-width:480px;width:100%;max-height:92vh;overflow:auto;padding:22px;box-shadow:var(--shadow2)}
.pfbox h3{margin-bottom:14px;color:var(--purple)}
.pfbox label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin:10px 0 4px}
.pfbox input,.pfbox select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14.5px;outline:none;background:#fff}
.pfphoto{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.pf2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pfact{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.pfmsg{font-size:13px;margin-top:10px;min-height:18px}.pfmsg.ok{color:var(--good)}.pfmsg.err{color:var(--bad)}
/* problem-topic chips (#3) */
.tchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.tchip{padding:6px 12px;border:1px solid var(--line);border-radius:20px;font-size:12.5px;cursor:pointer;
  background:#fff;transition:.13s;user-select:none}
.tchip:hover{border-color:var(--gold);background:#fff8ee}
.tchip.on{background:linear-gradient(135deg,var(--purple),var(--purple-l));color:#fff;border-color:transparent;font-weight:700}
/* chat file/remedy cards (#8) */
.cmfile{display:flex;gap:9px;align-items:center;padding:8px 11px;border-radius:12px;background:#fff;border:1px solid var(--line);max-width:78%;text-decoration:none;color:var(--text)}
.cmfile .fic{font-size:22px}
.cmrow.me .cmfile{background:rgba(255,255,255,.92)}
.cmimg{max-width:200px;max-height:200px;border-radius:12px;display:block;cursor:pointer}
.attbtn{width:40px;border:0;border-radius:50%;background:#efe3cf;color:var(--purple-d);font-size:17px;cursor:pointer;flex:none}
.actbanner{margin-top:18px;padding:14px 18px;border-radius:14px;font-size:15px;
  background:linear-gradient(135deg,#15803d,#22a558);color:#fff;display:flex;align-items:center;flex-wrap:wrap;gap:6px;box-shadow:0 6px 18px rgba(21,128,61,.25)}
.trbtn{padding:5px 10px;font-size:12px;background:#6d4ca8;margin-top:5px}
.trbody{max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:6px 2px;background:var(--bg3);border-radius:12px;padding:12px}
.peerhist{margin-top:10px;max-height:340px;overflow:auto}
.histord{border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:10px;background:var(--bg3)}
.histhd{font-size:12.5px;font-weight:700;color:var(--purple);margin-bottom:8px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.histord .cmrow{margin-bottom:5px}
/* astrologer earnings (#E) */
.earncard{margin-top:18px;background:linear-gradient(135deg,#2a1b08,#5a2d82);color:#fff;border-radius:16px;padding:18px 20px;box-shadow:var(--shadow2)}
.earncard .ebal{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.earncard .ebal small{opacity:.85;font-size:13px}.earncard .ebal b{font-size:30px}
.earncard .ebal .btn{align-self:flex-start}
.emeters{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.emeters>div{background:rgba(255,255,255,.12);border-radius:11px;padding:10px 12px}
.emeters span{display:block;font-size:11.5px;opacity:.8}.emeters b{font-size:18px}
.esrc{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.esrcchip{background:rgba(255,255,255,.16);border-radius:18px;padding:5px 13px;font-size:13px}
.udnet{background:#eef7ef;border:1px solid #bfe5bf;border-radius:10px;padding:10px 12px;font-size:15px}
.udrem{padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
/* bank + payout (#F) */
.alabel{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin:10px 0 4px}
.ainput{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;outline:none;background:#fff}
.pillok{font-size:11.5px;padding:2px 10px;border-radius:12px;background:#dcfce7;color:#166534;font-weight:700}
.pillwait{font-size:11.5px;padding:2px 10px;border-radius:12px;background:#fff3cd;color:#8a6d00;font-weight:700}
.wdrow{border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:8px;background:var(--bg3)}
.wdtop{display:flex;align-items:center;gap:8px;font-size:15px}
.wdst{font-size:11.5px;padding:2px 9px;border-radius:11px;font-weight:700;background:#eef;color:#445}
.wdst.paid{background:#dcfce7;color:#166534}.wdst.rejected{background:#fee2e2;color:#991b1b}
.wdst.processing{background:#e0f2fe;color:#075985}.wdst.approved{background:#fef9c3;color:#854d0e}

/* ---- search strip (पुराने site का top-header) ---- */
.search-strip{background:linear-gradient(90deg,#b35c06,#e0750a 55%,#F66962);padding:9px 0}
.sform{display:flex;max-width:560px;margin:0 auto;background:#fff;border-radius:24px;
  overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.18)}
.sform input{flex:1;border:0;outline:none;padding:10px 18px;font-size:14px;background:#fff;color:var(--text)}
.sform button{border:0;background:var(--gold);color:#fff;font-weight:700;padding:0 22px;cursor:pointer}
.sform button:hover{background:var(--purple)}
.sform{position:relative}
.ssug{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.2);overflow:hidden;z-index:80;text-align:left}
.ssug div{padding:10px 16px;font-size:14px;color:var(--text);cursor:pointer;display:flex;gap:8px;align-items:center}
.ssug div:hover{background:#fff4e2;color:var(--purple-d)}
.ssug div small{margin-left:auto;color:var(--muted);font-size:12px}

/* header right (lang + login) */
.hright{display:flex;align-items:center;gap:10px}
.hright #langSel{background:#fff;color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:6px 8px;font-size:13px;font-weight:600;cursor:pointer;outline:none}
.btn.hlogin{padding:9px 22px}
.brandimg{height:48px;display:block}

/* dropdown menus (पुराने site जैसे submenus) */
.menu .mitem{position:relative}
.menu .mitem>a{display:block;white-space:nowrap;padding:20px 4.5px;font-size:13px;
  color:#5d4a26;font-weight:700;cursor:pointer;transition:color .18s}
/* 🔴 menu-नाम कटने का इलाज: `.menu` में flex:1 है → संकरी जगह पर हर item समान
   अनुपात में सिकुड़कर ellipsis (…) दिखाता था (1200px पर सब कटे — user की photo)।
   अब item सिकुड़ते नहीं (flex-shrink:0) — जगह कम पड़े तो पट्टी नई पंक्ति में
   wrap होगी (justify-center), पर नाम कभी अधूरा नहीं। ellipsis भी हटाया। */
.menu .mitem{flex:0 0 auto}
.menu .mitem>a{overflow:visible;text-overflow:clip}
.menu .mitem>a:hover{color:var(--rose)}
.menu .mitem.has-sub:hover>a{color:var(--purple)}
/* ⚠️ यहाँ `.submenu` के नियम हुआ करते थे, पर **किसी पेज में वह class है ही नहीं** —
   असली dropdown `.megamenu` है (app.js भी वही बनाता है)। इसलिए यहाँ किया गया
   कोई भी सुधार दिखता ही नहीं था। hover-सुधार अब सही जगह — `.megamenu` पर — है
   (नीचे ~line 1482)। मरा हुआ CSS हटाया, वरना अगली बार फिर यहीं सुधार होता। */

/* hero: branded panel + form */
.herogrid{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:stretch}
.herobanner{position:relative;border-radius:18px;overflow:hidden;padding:34px 32px;
  display:flex;flex-direction:column;justify-content:center;color:#5a2a08;box-shadow:var(--shadow2);
  background:linear-gradient(135deg,#f7e98f 0%,#f1d95f 55%,#ebcf45 100%)}
/* गाढ़ा सुनहरा-पीला bg — गहरा text */
.herobanner>*{position:relative;z-index:1}
.herobanner .ovl{position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.16),transparent 60%);z-index:0;pointer-events:none}
/* केंद्र में बड़ा ॐ (गहरा मैरून — साफ़ दिखे) + धीरे घूमता चक्र */
.herobanner::before{content:"\0950";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);font-size:240px;line-height:1;font-weight:800;
  color:rgba(124,22,12,.96);text-shadow:0 0 40px rgba(124,22,12,.35);
  pointer-events:none;z-index:0;animation:omPulse 6s ease-in-out infinite}
.herobanner::after{content:"";position:absolute;left:50%;top:50%;
  width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 0deg,rgba(124,22,12,.5) 0deg 1.6deg,transparent 1.6deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 55%,#000 57%,#000 80%,transparent 82%);
          mask:radial-gradient(circle,transparent 55%,#000 57%,#000 80%,transparent 82%);
  animation:omSpin 40s linear infinite}
@keyframes omSpin{to{transform:rotate(360deg)}}
@keyframes omPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.26}
  50%{transform:translate(-50%,-50%) scale(1.05);opacity:.38}}
@media (prefers-reduced-motion:reduce){.herobanner::before,.herobanner::after{animation:none}}
.hbtag{align-self:flex-start;background:rgba(255,255,255,.92);border:1px solid rgba(124,22,12,.28);
  color:#7a1e08;padding:5px 14px;border-radius:20px;font-size:12.5px;font-weight:800;margin-bottom:14px;
  box-shadow:0 2px 8px rgba(124,22,12,.12)}
.hero .herobanner h1{font-size:34px;line-height:1.18;font-weight:800;margin-bottom:10px;color:#5a1e06;
  text-shadow:0 0 7px rgba(255,250,235,.85),0 0 2px rgba(255,250,235,.95);background:none;-webkit-text-fill-color:#5a1e06}
.hero .herobanner h1 .g{color:#b5360a;-webkit-text-fill-color:#b5360a;background:none;
  text-shadow:0 0 7px rgba(255,250,235,.85),0 0 2px rgba(255,250,235,.95)}
.hbsub{font-size:15.5px;line-height:1.6;color:#5e2a08;font-weight:600;margin-bottom:18px;max-width:460px;
  text-shadow:0 0 6px rgba(255,250,235,.8)}
.hbstats{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.hbstats>div{flex:1;min-width:96px;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.93);border:1px solid rgba(124,22,12,.22);border-radius:12px;padding:9px 11px;
  box-shadow:0 2px 8px rgba(124,22,12,.12)}
.hbstats b{font-size:22px;line-height:1}.hbstats small{font-size:11.5px;line-height:1.3;color:#6b1f0a;font-weight:800}
.hbcta{display:flex;gap:10px;flex-wrap:wrap}
.hbcta .btn{padding:12px 20px;font-size:14.5px}
.hbcta .btn:not(.gold){background:rgba(255,255,255,.93);border:1px solid rgba(124,22,12,.3);color:#7a1e08;font-weight:800;box-shadow:0 2px 8px rgba(124,22,12,.12)}
/* नारंगी थोड़ा गहरा (#e0750a → #b85c00): सफ़ेद पाठ के साथ contrast 3.13 था,
   WCAG को 4.5 चाहिए। अब 4.6 — रंग-रूप वही गर्म नारंगी, बस एक शेड नीचे। */
.hbcta .btn.gold{background:linear-gradient(135deg,#b85c00,#c2410c);color:#fff;border:0;box-shadow:0 6px 18px rgba(154,43,10,.32)}

/* quick tiles (4) */
.tilesec{padding:6px 0 20px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{display:flex;align-items:center;gap:12px;background:var(--panel);
  border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;
  box-shadow:0 3px 12px rgba(224,117,10,.1);transition:transform .2s,box-shadow .2s,border-color .2s}
.tile:hover{transform:translateY(-3px);box-shadow:0 9px 24px rgba(224,117,10,.2);border-color:var(--gold)}
.tile .tic{font-size:30px}
.tile b{font-size:14.5px;color:var(--purple-d);line-height:1.3}

/* 12 राशियाँ grid */
.zgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:18px}
.zcard{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:14px 8px;cursor:pointer;
  transition:transform .2s,box-shadow .2s}
.zcard:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(224,117,10,.18)}
.zcard img{width:64px;height:64px;object-fit:contain}
.zcard span{font-weight:700;color:var(--purple-d);font-size:14px}

/* alternate section bg */
.altbg{background:linear-gradient(180deg,#fff6e6,#fffaf1)}

/* footer extras (old-site 4-column) */
.fbottom{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;border-top:1px solid rgba(74,45,110,.20);margin-top:18px;padding-top:14px}
.fpolicies{display:flex;gap:16px}
.fpolicies a{color:#43276b;font-size:13px;cursor:pointer}
.fpolicies a:hover{color:#8a5a00}
.social{display:flex;gap:8px;margin-top:10px}
/* ⚠️ button भी — जिन social खातों का URL अभी नहीं है वे <a href> नहीं हो सकते
   (Google उन्हें "crawl न होने वाला लिंक" गिनता है); वे <button> हैं। URL मिलते ही
   उन्हें वापस <a href="..."> बना देना — रूप वही रहेगा। */
.social a,.social button{width:32px;height:32px;border-radius:50%;background:rgba(74,45,110,.12);
  border:0;color:inherit;font-size:15px;font-family:inherit;padding:0;
  display:grid;place-items:center;font-weight:800;cursor:pointer}
.social a:hover,.social button:hover{background:var(--gold)}

/* ---- header / nav ---- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(108,40,217,.06)}
.nav{display:flex;align-items:center;gap:8px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand .logo{width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle,#1a1140 60%,#3a2585);border:2px solid var(--gold-b);
  display:grid;place-items:center;color:var(--gold-b);font-size:18px}
.brand b{font-size:19px;letter-spacing:1px;color:var(--purple-d)}
.brand small{display:block;font-size:10px;color:var(--rose);letter-spacing:2px}
/* items ज़्यादा/लंबे हों तो कटें नहीं — साफ़ दूसरी पंक्ति में wrap हों */
.menu{display:flex;gap:0;flex:1;flex-wrap:wrap;justify-content:center;overflow:visible}
.menu a{position:relative;white-space:nowrap;padding:20px 4.5px;font-size:13px;
  color:#5d4a26;font-weight:700;letter-spacing:0;transition:color .18s}
.menu a::after{content:"";position:absolute;left:5px;right:5px;bottom:12px;height:2.5px;
  border-radius:2px;background:linear-gradient(90deg,var(--gold-b),var(--rose));
  transform:scaleX(0);transform-origin:center;transition:transform .22s}
.menu a:hover{color:var(--rose)}
.menu a:hover::after,.menu a.active::after{transform:scaleX(1)}
.menu a.active{color:var(--purple-d)}
.btn{cursor:pointer;border:0;border-radius:10px;font-weight:700;font-size:15px;
  padding:11px 20px;background:linear-gradient(135deg,var(--purple),var(--rose));color:#fff;
  box-shadow:0 4px 14px rgba(110,68,22,.28);position:relative;overflow:hidden;
  transition:transform .18s,box-shadow .18s,filter .18s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .5s}
.btn:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 8px 22px rgba(156,43,58,.34)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0)}
.btn.gold{background:linear-gradient(135deg,var(--gold-b),#d97706);color:#3a2606}
.hamb{display:none;font-size:24px;background:none;border:0;color:var(--purple);cursor:pointer}
/* language selector */
.langwrap{display:inline-flex;align-items:center;gap:4px;color:#f3e9ff}
#langSel{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);
  border-radius:7px;padding:3px 6px;font-size:12.5px;font-weight:600;cursor:pointer;outline:none}
#langSel option{color:#3a2c14;background:#fff}
#langSel:hover{background:rgba(255,255,255,.24)}

/* ---- hero ---- */
.hero{padding:48px 0 24px}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
.hero h1{font-size:44px;line-height:1.12;color:var(--purple-d);margin-bottom:10px;font-weight:800}
.hero h1.herot{background:linear-gradient(95deg,var(--purple-d),var(--rose) 55%,var(--gold-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.hero h1 .g{background:linear-gradient(90deg,var(--purple),var(--rose) 60%,var(--gold-b));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* trust strip */
.trust{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.trust>div{flex:1;min-width:78px;text-align:center;padding:9px 6px;border-radius:11px;
  background:var(--panel);border:1px solid var(--line);box-shadow:0 2px 8px rgba(110,68,22,.07)}
.trust b{display:block;font-size:19px;color:var(--rose);font-weight:800;line-height:1.1}
.trust small{font-size:11.5px;color:var(--muted);font-weight:600}
/* astrologer cards (/astrologers) */
.afilters{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.fchip{padding:7px 15px;border-radius:20px;border:1px solid var(--line);background:var(--panel);
  font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;transition:all .18s}
.fchip:hover{border-color:var(--gold);color:var(--purple)}
.fchip.on{background:linear-gradient(135deg,var(--purple),var(--purple-l));color:#fff;border-color:var(--purple)}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-top:16px}
.acard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;
  box-shadow:0 4px 14px rgba(224,117,10,.08);transition:transform .2s,box-shadow .2s}
.acard:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(224,117,10,.16)}
.ahead{display:flex;gap:12px;align-items:flex-start;position:relative}
.aimg{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#fff0d4,#ffd9a3);
  display:grid;place-items:center;font-size:30px;flex:none;overflow:hidden;border:2px solid var(--gold-b)}
.aimg img{width:100%;height:100%;object-fit:cover}
.ahead b{color:var(--purple-d);font-size:16px;display:block}
.ahead small{display:block;color:var(--muted);font-size:12px;line-height:1.5}
.adot{position:absolute;right:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#cbd5e1}
.adot.on{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.afoot{display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:12px;border-top:1px dashed var(--line)}
.aprice{flex:1;font-size:18px;font-weight:800;color:var(--rose)}
.aprice small{font-size:11px;color:var(--muted);font-weight:600}
.afoot .btn{padding:8px 14px;font-size:13.5px}
/* astro-register checkboxes */
.chkgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.chk{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--text);
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 9px;cursor:pointer}
.chk input{width:15px;height:15px}

/* ⭐ home featured (पूजा/store/reports) — हल्के compact cards
   auto-fit = जितने cards उतने में पूरी पंक्ति भर जाए, बगल ख़ाली न बचे */
.hfgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.hfgrid.hf8{grid-template-columns:repeat(6,1fr)}   /* store: 6×2 = 12, दो भरी पंक्तियाँ */
@media(max-width:1000px){.hfgrid.hf8{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.hfgrid.hf8{grid-template-columns:repeat(3,1fr)}}
.hfcard{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:12px;text-decoration:none;box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s}
.hfcard:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(45,27,78,.16)}
.hfcard .im{height:150px;border-radius:10px;overflow:hidden;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:44px}
.hfcard .im img{width:100%;height:100%;object-fit:contain;background:#fff}
.hfcard b{color:var(--purple-d);font-size:13.5px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.hfcard .pr{color:#0f1111;font-weight:800;font-size:15px}
.hfcard .pr s{color:#999;font-weight:400;font-size:12px}
.hfcard .pr .off{color:#cc0c39;font-weight:800;font-size:13px;margin-right:5px}
@media(max-width:560px){
  .hfgrid,.hfgrid.hf8{grid-template-columns:repeat(2,1fr);gap:10px}
  .hfcard .im{height:120px}
}

/* horoscope (राशिफल) */
.hintro{color:var(--muted);font-size:14.5px;margin:-4px 0 14px;max-width:760px}
.hperiods{display:inline-flex;gap:4px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin-bottom:14px;
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}  /* 📱 छोटे फ़ोन पर पट्टी अंदर ही सरके, पेज न फैले */
.hperiods::-webkit-scrollbar{display:none}
.hperiods a{white-space:nowrap;flex:none}
.hperiods a{padding:8px 20px;border-radius:9px;font-weight:700;font-size:14px;color:var(--text);cursor:pointer;transition:all .15s}
.hperiods a:hover{color:var(--purple)}
.hperiods a.on{background:linear-gradient(135deg,var(--purple),var(--purple-l));color:#fff}
.zbar{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin-bottom:18px}
.zchip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);cursor:pointer;transition:all .15s;font-size:12px;font-weight:700;color:var(--purple-d)}
.zchip .zs{font-size:18px;color:var(--rose)}
.zchip:hover{border-color:var(--gold);transform:translateY(-2px)}
.zchip.on{background:linear-gradient(135deg,var(--purple),var(--purple-l));color:#fff;border-color:var(--purple)}
.zchip.on .zs{color:#ffe9a8}
.hcard .hrt{display:flex;align-items:center;gap:10px;font-size:18px;color:var(--purple-d);flex-wrap:wrap}
.hstars{color:var(--gold);letter-spacing:1px;margin-left:auto;font-size:18px}
.hstars.sm{font-size:14px;margin:0}
.hareas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin:14px 0;
  padding:12px;background:#fff7ea;border-radius:10px}
.harea{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:600}
.htext{margin:10px 0 0;padding-left:20px;font-size:14.5px}.htext li{margin:5px 0}
.hlucky{margin-top:14px;padding:12px 14px;border-radius:10px;background:linear-gradient(120deg,#fff0d4,#ffe6bf);
  border:1px solid var(--gold-b);font-size:14px;line-height:1.7}
.hsade{margin-top:12px;padding:10px 14px;border-radius:10px;background:#fdeaea;border:1px solid #f2c5c5;color:#9c2b3a;font-size:13.5px}
.hslow{margin-top:10px;font-size:13px;color:var(--muted)}
.hchg{margin-top:10px;font-size:14px}.hchg ul{padding-left:20px}
.htransit{margin-top:14px}.htransit summary{cursor:pointer;font-weight:700;color:var(--purple);padding:6px 0}
.hdob{margin-bottom:16px}
.hdobtog{display:inline-block;cursor:pointer;font-weight:700;color:var(--purple);font-size:14px;
  background:var(--panel);border:1px dashed var(--gold-b);border-radius:10px;padding:9px 16px}
.hdobtog:hover{background:#fff4e2}
.hdobf{display:none;margin-top:12px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.hdobf.open{display:block}
/* muhurat (मुहूर्त) */
.mevents{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  box-shadow:0 3px 12px rgba(224,117,10,.09)}
.mdate{font-size:16px;font-weight:800;color:var(--purple-d)}
.mdate small{color:var(--muted);font-weight:600;font-size:12px}
.mverdict{display:inline-block;margin:6px 0;font-size:12.5px;font-weight:700;color:#166534;background:#dcfce7;padding:2px 10px;border-radius:10px}
.mtn{font-size:13px;color:var(--text);margin-bottom:8px}
.mslots{font-size:13px;line-height:1.8;border-top:1px dashed var(--line);padding-top:8px}
@media(max-width:680px){.zbar{grid-template-columns:repeat(6,1fr)}}
/* panchang */
.presdate{text-align:center;font-size:16px;font-weight:800;color:var(--purple-d);
  background:linear-gradient(120deg,#fff0d4,#ffe6bf);border:1px solid var(--gold-b);border-radius:12px;padding:11px;margin-bottom:14px}
.pfest{text-align:center;color:var(--rose);font-weight:700;margin-bottom:12px}
.pgridw{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.pgridw .panel{margin:0}
.ptab{width:100%;border-collapse:collapse;font-size:14px}
.ptab td{padding:7px 4px;border-bottom:1px solid #f1e8d2;text-align:left;vertical-align:top}
/* 🔴 heading अपने ही data के ऊपर बैठे। global नियम `th{text-align:center}` है
   जबकि यहाँ `td` बाएँ है — इसलिए **हर .ptab सारणी में** हर heading अपने अंक/पाठ
   से खिसकी दिखती थी (भिन्नाष्टकवर्ग में सबसे साफ़ — 12 राशि-स्तंभ)। यह एक ही
   नियम सब 26 सारणियों को सीधा कर देता है; padding भी th=td रखा, वरना 1-2px का
   फ़र्क़ बचा रह जाता। */
.ptab th{text-align:left;padding:7px 4px}
/* अंक धुँधले दिख रहे थे (user) — अष्टकवर्ग/प्रस्तर की सारणियों में हर खाना एक
   अंक भर का है, इसलिए हल्का रंग पढ़ने में सबसे पहले हारता है. अब गाढ़ा व bold. */
.ptab.nums td{font-weight:700;color:var(--text)}
.ptab.nums td.z{font-weight:600;color:#9b93a8}   /* शून्य — दिखे पर हावी न हो */
.ptab .pl{color:var(--muted);font-weight:600;width:42%}
.ptab .pv small{color:var(--muted);font-weight:400}
.chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:6px}
.chcell{border-radius:9px;padding:8px;text-align:center;font-size:12.5px;border:1px solid var(--line)}
.chcell b{display:block}.chcell small{color:var(--muted)}
.chcell.good{background:#e8f7e8;border-color:#bfe5bf}.chcell.bad{background:#fdeaea;border-color:#f2c5c5}
/* सर्वतोभद्र चक्र 9×9 */
.sbc{border-collapse:collapse;margin:6px auto;table-layout:fixed}
.sbc td{width:52px;height:52px;border:1px solid #d9c7f0;text-align:center;vertical-align:middle;padding:1px;line-height:1.05;overflow:hidden}
.sbc .sl{display:block;font-size:10.5px;font-weight:700;color:var(--purple-d)}
.sbc .ss{display:block;font-size:8px;color:var(--muted)}
.sbc .sp{display:block;font-size:11px;font-weight:800;color:#b8860b;margin-top:1px}
.sbc-n{background:#f4eeff}.sbc-r{background:#fdf3e0}.sbc-t{background:#eaf7ee}
.sbc-v{background:#f6f6f6;color:#999}.sbc-c{background:#fafafa;color:#bbb}
.sbc-ctr{background:#efe0ff;font-weight:800}.sbc-b{background:#fff}
.sbc-has{outline:2px solid #b8860b;outline-offset:-2px;background:#fff8e6!important}
@media(max-width:640px){.sbc td{width:36px;height:40px}.sbc .sl{font-size:8.5px}.sbc .sp{font-size:9px}.sbc .ss{display:none}}
/* kundli milan */
/* ✅ मुख्य submit-बटन — compact व केंद्रित (पूरी-चौड़ाई खिंचा नहीं) */
.gobtn{display:block;width:100%;max-width:330px;margin:16px auto 2px;padding:12px 30px;
  font-size:15px;font-weight:800;letter-spacing:.2px}
/* 💫 विवाह-उपरांत पूर्वानुमान कार्ड + सत्यापन-पट्टी */
.milpred{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.milpredc{background:#fff;border:1px solid var(--line);border-left:4px solid var(--purple);
  border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.milpredh{font-weight:800;color:var(--purple-d);font-size:14.5px;margin-bottom:5px}
.milpredt{font-size:13px;line-height:1.7;color:#333}
.milverify{margin-top:14px;background:linear-gradient(120deg,#fff7e9,#fdeccf);
  border:1.5px solid var(--gold-b);border-radius:14px;padding:14px 18px;text-align:center;
  font-size:13.5px;color:#6b4a12;line-height:1.7;display:flex;flex-direction:column;align-items:center;gap:4px}
@media(max-width:600px){.milpred{grid-template-columns:1fr}}
/* 🔘 मिलान-परिणाम के नीचे action-बटन — compact, पेशेवर, ओवरलैप-रहित */
.milbtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:22px 0 6px}
.milbtns .btn{margin:0;flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;
  justify-content:center;gap:6px;padding:11px 20px;font-size:14px;line-height:1.2}
.milbtns .btn small{opacity:.85;font-weight:600;font-size:12px}
@media(max-width:600px){ .milbtns{flex-direction:column;gap:9px}
  .milbtns .btn{width:100%;max-width:340px} }
.milmodebtn{background:#fff;color:var(--purple-d);border:1.5px solid var(--line);box-shadow:none}
.milmodebtn.active{background:linear-gradient(135deg,#6a3fa0,#4b2a77);color:#fff;border-color:transparent}
.nakSel{width:100%}
.milgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.milcol h3{color:var(--purple-d);font-size:16px;margin-bottom:8px;text-align:center;
  background:#fff4e2;border-radius:9px;padding:7px}
.milhead{display:flex;align-items:center;gap:18px;border-radius:14px;padding:16px 20px;color:#fff;margin-bottom:12px;flex-wrap:wrap}
.milhead.good{background:linear-gradient(120deg,#15803d,#22a558)}
.milhead.warn{background:linear-gradient(120deg,#b35c06,#e0750a)}
.milhead.bad{background:linear-gradient(120deg,#9c2b3a,#c2410c)}
.milscore b{font-size:38px;line-height:1}.milscore small{font-size:13px;opacity:.9}
.milscore{text-align:center}
.milv b{font-size:19px}.milpair{font-size:13px;opacity:.95;margin-top:3px}
.milmang{background:#fdeaea;border:1px solid #f2c5c5;color:#9c2b3a;border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:14px}
.ktab{width:100%;border-collapse:collapse;font-size:13.5px;border:1.5px solid var(--purple-d);border-radius:8px;overflow:hidden}
.ktab th{background:var(--purple);color:#fff;padding:8px;border:1px solid var(--purple-d)}
.ktab td{padding:8px;border:1px solid #e6dbc4;text-align:center}
.ktab tr:nth-child(even) td{background:#faf5ff}
.ktab tr:hover td{background:#fdf7ea}
@media(max-width:680px){.milgrid{grid-template-columns:1fr}}
/* articles */
.artcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:0 4px 14px rgba(224,117,10,.08);transition:transform .2s,box-shadow .2s;position:relative}
.artcard:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(224,117,10,.16)}
.artimg{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:56px;
  background:linear-gradient(135deg,#fdf6e3,#f3e6c2);overflow:hidden}
.artimg img{width:100%;height:100%;object-fit:cover;display:block}
.artcat{position:absolute;top:10px;left:10px;background:var(--rose);color:#fff;font-size:11px;
  font-weight:700;padding:2px 10px;border-radius:10px}
.artcard h4,.artcard h3{color:var(--purple-d);font-size:16px;margin:12px 14px 6px}
.artcard p{color:var(--muted);font-size:13.5px;margin:0 14px;flex:1}
.artcard .cta{color:var(--purple);font-weight:700;margin:12px 14px;font-size:14px}
.bcrumb{display:inline-block;color:var(--purple);font-weight:600;margin-bottom:14px}
.artbanner{width:100%;max-height:340px;object-fit:cover;border-radius:14px;margin-bottom:14px}
.arttitle{color:var(--purple-d);font-size:28px;line-height:1.25;margin:8px 0}
.artmeta{color:var(--muted);font-size:13px;margin-bottom:14px}
.artsumm{font-size:17px;color:var(--text);font-weight:600;border-left:3px solid var(--gold-b);
  padding-left:14px;margin-bottom:18px}
.artcontent p{font-size:16px;line-height:1.85;color:var(--text);margin-bottom:16px}
#artbody .artcat{position:static;display:inline-block;margin-bottom:10px}
/* reports — astroarunpandit-style poster cards */
.repgrid,#reports .reports{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}
@media(max-width:900px){.repgrid,#reports .reports{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.repgrid,#reports .reports{grid-template-columns:1fr}}
/* ⭐ home का reports-section: 2×2, एक-से professional cards
   (ऊपर same-size media-box: photo या icon-panel; दाम-बटन हमेशा नीचे) */
#reports #homeReports{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){#reports #homeReports{grid-template-columns:1fr}}
#homeReports .report{display:flex;flex-direction:column;min-height:330px}
#homeReports .rmedia{aspect-ratio:16/9;border-radius:12px;overflow:hidden;flex:none;position:relative;
  display:flex;align-items:center;justify-content:center;font-size:64px;
  background:linear-gradient(135deg,#f3e6fb,#e6d2f7);margin-bottom:12px}
/* photo वाले cards: 16:9 banner पूरी भरे (न खाली-पट्टी, न कटे) */
#homeReports .rmedia img.bg{display:none}
#homeReports .rmedia img.fg{position:relative;width:100%;height:100%;object-fit:cover;display:block}
#homeReports .report h4,#homeReports .report h3{margin:0 0 4px}
#homeReports .report p{flex:1;margin-bottom:12px;min-height:20px}
#homeReports .report .cta{margin-top:auto;align-self:flex-start}
.repcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:0 5px 18px rgba(224,117,10,.1);transition:transform .2s,box-shadow .2s}
.repcard:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(224,117,10,.2)}
.repposter{display:block;aspect-ratio:16/9;background:linear-gradient(160deg,#241a0c,#4a2f10);overflow:hidden}
.repposter img{width:100%;height:100%;object-fit:cover;display:block}
.repph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:#ffe9a8;text-align:center;padding:18px}
.repph .repphic{font-size:64px}.repph .repphnm{font-size:18px;font-weight:800;letter-spacing:1px}
.repph.big .repphic{font-size:96px}
.repbody{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.repbody h4{font-size:18px;margin-bottom:4px}.repbody h4 a{color:var(--purple-d)}
.reptag{color:var(--muted);font-size:13.5px;margin-bottom:10px;flex:1}
.repprice{font-size:15px;margin-bottom:12px}
.repprice s{color:var(--muted);font-weight:600}.repprice b{color:var(--rose);font-size:20px}
.repbuy{text-align:center;letter-spacing:.5px}
/* report DETAIL */
.rdgrid{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start;margin-top:8px}
.rdposter{border-radius:16px;overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow);background:#241a0c}
.rdposter img{width:100%;height:100%;object-fit:cover;display:block}
.rdtitle{color:var(--purple-d);font-size:28px;line-height:1.2;margin-bottom:6px}
.rdtag{color:var(--muted);font-size:16px;margin-bottom:14px}
.rdprice{font-size:18px;margin-bottom:16px}.rdprice s{color:var(--muted)}.rdprice b{color:var(--rose);font-size:30px}
.repsave{background:#dcfce7;color:#166534;font-weight:700;font-size:13px;padding:2px 10px;border-radius:10px;margin-left:6px}
.rdbuy{font-size:16px;padding:13px 26px}
.rdnote{color:var(--muted);font-size:13px;margin-top:10px}
.rddetails{margin-top:26px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.rddetails h3{color:var(--purple-d);font-weight:800;font-size:19px;margin:0 0 14px;
  border-bottom:2px solid var(--gold-b,#e0a800);padding-bottom:8px;display:inline-block}
.rdlist{list-style:none;padding:0}
.rdlist li{padding:7px 0 7px 30px;position:relative;font-size:15.5px;border-bottom:1px solid var(--line)}
.rdlist li::before{content:"✔";position:absolute;left:0;color:var(--good);font-weight:800}
.rdlist .repdp{margin:8px 0;color:var(--muted)}
/* 📝 admin-लिखित rich-content — साफ़ (कोई li-lining नहीं, सही spacing) */
.rdcontent{font-size:15px;line-height:1.85;color:#333;overflow-wrap:break-word;word-break:break-word}
.rdcontent p{margin:9px 0}
.rdcontent h1,.rdcontent h2,.rdcontent h3,.rdcontent h4{color:var(--purple-d);font-weight:800;margin:18px 0 8px;border:none;padding:0;display:block}
.rdcontent ul,.rdcontent ol{margin:8px 0 12px;padding-left:26px}
.rdcontent li{margin:6px 0;padding:0;border:none;list-style:disc}
.rdcontent ol li{list-style:decimal}
.rdcontent strong,.rdcontent b{font-weight:800;color:#2b2140}
.rdcontent a{color:var(--purple)}
.rdcontent img{max-width:100%;height:auto;border-radius:10px;margin:10px 0}
.rdcontent table,.rdcontent pre{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:560px){.rddetails{padding:18px 16px}}
/* 📱 site-wide: media स्क्रीन में fit, चौड़ी tables अपने box में scroll (पूरा पेज न खिसके) */
img,video,iframe{max-width:100%}
.artbody,.repbody,.reptag,.rdtag{overflow-wrap:break-word;word-break:break-word}
.tblscroll{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:680px){.rdgrid{grid-template-columns:1fr}.rdposter{max-width:260px;margin:0 auto}}
/* report lead modal */
.rmodal{position:fixed;inset:0;background:rgba(40,24,4,.55);display:none;align-items:flex-start;
  justify-content:center;z-index:200;overflow-y:auto;padding:30px 14px}
.rmodal.on{display:flex}
.rmbox{background:var(--panel);border-radius:18px;max-width:560px;width:100%;padding:26px;position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.4)}
.rmbox h3{color:var(--purple-d);font-size:19px;margin-bottom:2px;padding-right:30px}
.rmbox .rmsub{color:var(--muted);font-size:13px;margin-bottom:14px}
.rmx{position:absolute;right:14px;top:12px;border:0;background:none;font-size:20px;cursor:pointer;color:var(--muted)}
.rmx:hover{color:var(--rose)}

/* consultation billing page */
.cpanel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;
  box-shadow:0 10px 30px rgba(110,68,22,.14);text-align:center}
.chead{display:flex;align-items:center;gap:14px;text-align:left;margin-bottom:16px}
.caimg{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#fff0d4,#ffd9a3);
  display:grid;place-items:center;font-size:30px;overflow:hidden;border:2px solid var(--gold-b);flex:none}
.caimg img{width:100%;height:100%;object-fit:cover}
.chead b{color:var(--purple-d);font-size:18px;display:block}
.chead small{display:block;color:var(--muted);font-size:12.5px}
.ctimer{font-size:54px;font-weight:800;color:var(--purple-d);letter-spacing:2px;margin:6px 0 14px;
  font-variant-numeric:tabular-nums}
.cmeters{display:flex;gap:14px;margin-bottom:16px}
.cmeters>div{flex:1;background:#fff7ea;border:1px solid var(--line);border-radius:12px;padding:12px}
.cmeters span{display:block;font-size:12px;color:var(--muted);font-weight:600}
.cmeters b{font-size:24px;color:var(--rose)}
.cchat{background:#fff;border:1px dashed var(--gold-b);border-radius:12px;padding:16px;
  font-size:14px;color:var(--text);margin-bottom:16px;line-height:1.7}
.cmsg{margin-top:12px;font-size:15px;min-height:20px}.cmsg.ok{color:#15803d;font-weight:700}
/* consult room: chat + call */
.croom{margin-top:16px}
.callbox{display:none;position:relative;background:#1a120a;border-radius:14px;overflow:hidden;
  margin-bottom:14px;aspect-ratio:16/9;max-height:420px}
.callbox.on{display:block}
.callbox.audioonly{aspect-ratio:auto;min-height:120px}
.callbox.audioonly .rvid,.callbox.audioonly .lvid{display:none}
.rvid{width:100%;height:100%;object-fit:cover;background:#0d0a06}
.lvid{position:absolute;right:12px;bottom:54px;width:120px;height:90px;object-fit:cover;
  border-radius:10px;border:2px solid #fff;background:#000}
.callbar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;
  padding:10px 14px;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);color:#fff}
.callbar #callstatus{flex:1;font-weight:600}
.callbox.audioonly .callbar{position:static;background:#3d2305}
.chatwrap{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.chathead{background:#fff4e2;padding:10px 14px;font-weight:700;color:var(--purple-d);
  display:flex;align-items:center;justify-content:space-between}
.peerst{font-size:12.5px;font-weight:600;color:var(--muted)}
.chatbox{height:300px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:#fffdf8}
.cmrow{display:flex}.cmrow.me{justify-content:flex-end}
.cmbub{max-width:78%;padding:9px 13px;border-radius:14px;font-size:14.5px;line-height:1.5;word-break:break-word}
.cmrow.them .cmbub{background:#fff;border:1px solid var(--line);color:var(--text);border-bottom-left-radius:4px}
.cmrow.me .cmbub{background:linear-gradient(135deg,var(--purple),var(--purple-l));color:#fff;border-bottom-right-radius:4px}
.cmtime{display:block;font-size:10.5px;opacity:.6;margin-top:3px;text-align:right}
.cmdate{text-align:center;margin:10px 0 6px}
.cmdate span{display:inline-block;background:#efe3cf;color:var(--purple-d);font-size:11.5px;font-weight:700;padding:3px 12px;border-radius:12px}
/* astrologer dashboard — consult row tags + live join button */
.modetag{display:inline-block;padding:4px 10px;border-radius:20px;background:#f3edff;color:var(--purple);font-size:12.5px;font-weight:700;white-space:nowrap}
.donetag{display:inline-block;padding:4px 10px;border-radius:20px;background:#eef2f0;color:#5a6b62;font-size:12.5px;font-weight:600}
.joinbtn{display:inline-block;padding:10px 20px;font-size:14.5px;font-weight:800;border-radius:12px;
  box-shadow:0 4px 14px rgba(194,65,12,.32);animation:joinpulse 1.6s ease-in-out infinite}
@keyframes joinpulse{0%,100%{box-shadow:0 4px 14px rgba(194,65,12,.30)}50%{box-shadow:0 6px 22px rgba(194,65,12,.55)}}
.chatin{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--panel)}
.chatin input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:22px;font-size:14.5px;outline:none}
.chatin button{width:44px;border:0;border-radius:50%;background:var(--purple);color:#fff;font-size:18px;cursor:pointer}
.callbtns{display:flex;gap:10px;padding:0 10px 12px}
.cbtn{flex:1;padding:11px;border:0;border-radius:10px;font-weight:700;font-size:14.5px;cursor:pointer;
  background:#15803d;color:#fff}
.cbtn.vid{background:#1d6fb8}.cbtn.hang{background:#9c2b3a;flex:none;padding:9px 16px}
.cbtn:hover{filter:brightness(1.08)}
.cbtn.cmaud,.cbtn.cmvid{}
/* per-mode buttons on astrologer cards */
.amodes{flex-wrap:wrap;gap:6px}
.amodes .btn{flex:1;padding:8px 6px;font-size:13px;min-width:74px}
.amodes .btn small{font-size:10px;opacity:.85}
.amodes .cmaud{background:linear-gradient(135deg,var(--gold-b),#d97706);color:#3a2606}
.amodes .cmvid{background:#1d6fb8}
/* incoming call ring overlay */
.incall{position:fixed;inset:0;background:rgba(20,12,4,.72);display:none;align-items:center;justify-content:center;z-index:300}
.incbox{background:var(--panel);border-radius:20px;padding:30px 36px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.incrings{font-size:60px;animation:ring 1s infinite}
@keyframes ring{0%,100%{transform:rotate(0)}25%{transform:rotate(14deg)}75%{transform:rotate(-14deg)}}
.incbox b{display:block;font-size:18px;color:var(--purple-d);margin:12px 0 16px}
.incbtns{display:flex;gap:12px}.incbtns .cbtn{padding:11px 22px}
/* remedy card in chat */
.remcard{display:flex;gap:10px;align-items:center;max-width:80%;background:#fff7ea;border:1px solid var(--gold-b);
  border-radius:14px;padding:10px 14px;text-decoration:none}
.remcard .remic{font-size:26px}
.remcard b{display:block;color:var(--purple-d);font-size:14px}
.remcard small{color:var(--muted);font-size:12px}
/* astro consult room — 2 columns (room + sidebar) */
.acroom{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.acroom .aside .panel{margin-bottom:16px}
.acroom .ptab{width:100%;font-size:13.5px}.acroom .ptab .pl{color:var(--muted);font-weight:600;width:40%}
.acroom #akundali{margin-top:10px}
@media(max-width:820px){.acroom{grid-template-columns:1fr}}

/* wallet (user dashboard) */
.walletcard{background:linear-gradient(120deg,#6e4416,#9c2b3a 55%,#b8860b);border-radius:16px;
  padding:18px 22px;color:#fff;box-shadow:0 8px 24px rgba(110,68,22,.28)}
.wbal{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.wbal small{font-size:14px;color:#ffe9a8;font-weight:700}
.wbal b{font-size:34px;color:#ffd700;line-height:1}
.wact{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wact .wlbl{font-size:13px;color:#f6e8cf;font-weight:600;margin-right:4px}
.wact button{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;
  border-radius:9px;padding:8px 14px;font-weight:700;cursor:pointer;font-size:14px}
.wact button:hover{background:rgba(255,255,255,.28)}
.wact .wcustom{background:var(--gold-b);color:#3a2606;border-color:var(--gold-b)}
.wact input{width:90px;padding:8px 10px;border-radius:9px;border:0;font-size:14px}
.wmsg{margin-top:10px;font-size:14px;min-height:18px}
.wmsg.ok{color:#d6ffd6}.wmsg.err{color:#ffd6d6;font-weight:600}

/* auth pages (login / register) */
.authwrap{max-width:430px;margin:46px auto;padding:0 16px}
.authcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:30px 28px;box-shadow:0 10px 34px rgba(110,68,22,.14)}
.authcard h2{color:var(--purple-d);margin-bottom:4px}
.authcard .asub{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.authcard label{display:block;font-size:13px;font-weight:700;color:var(--purple-d);margin:13px 0 5px}
.authcard input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  font-size:15px;background:#fff;color:var(--text);outline:none}
.authcard input:focus{border-color:var(--gold-b);box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.amsg{margin-top:12px;font-size:14px;min-height:20px;text-align:center}
.amsg.ok{color:#1b6b1b}.amsg.err{color:var(--rose);font-weight:600}
.aswitch{margin-top:16px;text-align:center;font-size:14px;color:var(--muted)}
.aswitch a{color:var(--purple);font-weight:700}
/* store / puja item cards (items admin DB se) */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:20px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;
  display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(110,68,22,.08);
  transition:transform .2s,box-shadow .2s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(110,68,22,.16)}
.pcard .pimg{height:180px;display:flex;align-items:center;justify-content:center;font-size:64px;
  background:#fff;border-radius:12px;margin-bottom:12px;overflow:hidden}
.pcard .pimg img{width:100%;height:100%;min-width:0;object-fit:contain;background:#fff;padding:6px;box-sizing:border-box;border-radius:12px}
.pcard h4{color:var(--purple-d);font-size:15px;margin-bottom:6px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:44px}
.pcard p{color:var(--muted);font-size:13px;flex:1;margin-bottom:12px}
.pcard .prow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pcard .pprice{font-size:20px;font-weight:800;color:var(--rose)}
/* Amazon-जैसा vertical card: price-row fix, buttons सबसे नीचे pinned */
.pcard .pprice2{font-size:21px;font-weight:800;color:#0f1111;margin:2px 0 0}
.pcard .pprice2 small{font-size:11.5px;color:var(--muted);font-weight:600;margin-left:6px}
.pcard .pfoot{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.pcard .pfoot .btn{width:100%;display:block;text-align:center;font-size:14.5px;padding:11px 14px;border-radius:22px;box-sizing:border-box;margin:0}
/* 💰 Amazon/Flipkart-style discount: लाल -X%, बड़ा दाम, कटा M.R.P. */
.offpct{color:#cc0c39;font-weight:700;font-size:18px;margin-right:7px}
.mrpline{font-size:12.5px;color:#565959;margin-top:1px}
.mrpline s{color:#565959}
.btn.buynow{background:linear-gradient(135deg,#fb8c1b,#f4640b);color:#fff}
.btn.buynow:hover{filter:brightness(1.06)}
/* 🗂️ product-श्रेणी tiles (store पेज — Amazon-जैसे category chips) */
.cattiles{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 16px}
.cattile{background:#fff;border:1.5px solid #e3d8f5;border-radius:14px;padding:10px 18px;cursor:pointer;
  text-align:center;font-weight:700;color:var(--purple-d);font-size:13.5px;min-width:86px;
  transition:transform .15s,box-shadow .15s;box-shadow:0 2px 8px rgba(45,27,78,.06)}
.cattile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(45,27,78,.14)}
.cattile .ci{font-size:26px;display:block;line-height:1.3}
.cattile small{display:block;color:var(--muted);font-weight:600;font-size:11px}
.cattile.on{background:var(--purple-d);color:#fff;border-color:var(--purple-d)}
.cattile.on small{color:#e8ddf6}
/* 🧙 dashboard profile-header (astro व user दोनों) — AstroTalk-जैसा professional */
.aprohead{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:18px 22px;box-shadow:var(--shadow);margin:10px 0 6px;flex-wrap:wrap}
.aprohead .aav{width:74px;height:74px;border-radius:50%;background:#ead9f7 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-size:33px;flex:none;
  border:3px solid var(--gold);position:relative}
.aprohead .aav .dot{position:absolute;right:1px;bottom:1px;width:16px;height:16px;border-radius:50%;
  background:#9aa0a6;border:2.5px solid #fff}
.aprohead .aav .dot.on{background:#22a558}
.aprohead .abadge2{display:inline-block;background:#e9f7ef;color:#15803d;font-size:11.5px;font-weight:800;
  padding:3px 10px;border-radius:12px;margin-left:8px;vertical-align:middle}
.aprohead .abadge2.wait{background:#fff4d6;color:#b35c06}
.aprohead .astatline{color:var(--muted);font-size:13.5px;margin-top:5px}
.aprohead .aph-stats{display:flex;gap:10px;flex-wrap:wrap}
.aprohead .aph-stats>div{background:#f7f1fc;border:1px solid #e8dcf7;border-radius:12px;
  padding:8px 14px;text-align:center;min-width:86px}
.aprohead .aph-stats span{display:block;font-size:11px;color:var(--muted);font-weight:700}
.aprohead .aph-stats b{font-size:16.5px;color:var(--purple-d)}
@media(max-width:640px){.aprohead{justify-content:center;text-align:center}}
/* premium kundali strip (price admin panel se aati hai) */
/* 🧙 प्रचार-कार्ड — कुंडली की खाली जगहों में ज्योतिषी-consult */
.astropromo{align-self:start;background:linear-gradient(160deg,#fff7ea,#fde4d0);border:1.5px solid #f0c98a;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:9px;box-shadow:0 3px 12px rgba(180,120,40,.12);min-width:0}
.astropromo .ap-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.astropromo .ap-ic{font-size:30px}
.astropromo .ap-free{background:#e8f7e8;color:#146c35;font-weight:800;font-size:11.5px;padding:3px 9px;border-radius:20px;border:1px solid #bfe5bf;white-space:nowrap}
.astropromo .ap-msg{font-size:14px;font-weight:700;color:var(--purple-d);line-height:1.5}
.astropromo .ap-btns{display:flex;gap:8px}
.astropromo .ap-b{flex:1;text-align:center;text-decoration:none;font-weight:800;font-size:13.5px;padding:9px;border-radius:10px}
.astropromo .ap-b.call{background:#2e9e5b;color:#fff}
.astropromo .ap-b.chat{background:var(--purple-d);color:#fff}
/* 🧙 प्रचार-पट्टी (चौड़ी) */
.apstrip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(120deg,#fff4e2,#f6e0ff);border:1.5px solid #ecc98f;border-radius:14px;padding:14px 16px;margin:16px 0 4px;box-shadow:0 3px 12px rgba(150,100,40,.1)}
.apstrip .aps-ic{font-size:34px;line-height:1}
.apstrip .aps-mid{flex:1;min-width:180px}
.apstrip .aps-msg{font-weight:700;color:var(--purple-d);font-size:14.5px;line-height:1.5}
.apstrip .aps-free{margin-top:3px;font-size:12.5px;font-weight:800;color:#146c35}
.apstrip .aps-btns{display:flex;gap:9px}
.apstrip .ap-b{text-decoration:none;font-weight:800;font-size:13.5px;padding:10px 16px;border-radius:10px;white-space:nowrap}
.apstrip .ap-b.call{background:#2e9e5b;color:#fff}
.apstrip .ap-b.chat{background:var(--purple-d);color:#fff}
@media(max-width:520px){.apstrip .aps-btns{width:100%}.apstrip .ap-b{flex:1;text-align:center}}
.ntkpop-nm{font-size:12.5px;font-weight:700;color:#5b3a8e;margin:2px 0 6px}
/* 🛍️ inline shop/course प्रचार-पट्टी (context के अनुसार) */
.shoppromo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-radius:13px;padding:12px 15px;margin:16px 0 4px;border:1.5px solid;box-shadow:0 3px 10px rgba(80,60,120,.09)}
.shoppromo .sp-ic{font-size:28px;line-height:1}
.shoppromo .sp-msg{flex:1;min-width:170px;font-weight:700;font-size:14px;line-height:1.5;color:#3a2760}
.shoppromo .sp-cta{text-decoration:none;font-weight:800;font-size:13.5px;padding:9px 16px;border-radius:9px;white-space:nowrap;color:#fff}
.shoppromo.sp-course{background:linear-gradient(120deg,#eaf3ff,#e6ecff);border-color:#a8c3ef}
.shoppromo.sp-course .sp-cta{background:#2563c9}
.shoppromo.sp-prod{background:linear-gradient(120deg,#fff2f6,#ffe9f0);border-color:#efb3c8}
.shoppromo.sp-prod .sp-cta{background:#d6407e}
.shoppromo.sp-rep{background:linear-gradient(120deg,#fff6e8,#fdeecf);border-color:#eccb8f}
.shoppromo.sp-rep .sp-cta{background:#c07d16}
@media(max-width:520px){.shoppromo .sp-cta{flex:1;text-align:center}}
/* 🎁 प्रचार-popup (AstroSage-जैसा modal) */
.ntkpop-ov{position:fixed;inset:0;background:rgba(30,15,45,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px;animation:ntkfade .2s ease}
@keyframes ntkfade{from{opacity:0}to{opacity:1}}
.ntkpop{position:relative;background:#fff;border-radius:20px;max-width:360px;width:100%;padding:44px 22px 22px;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.4);animation:ntkpopin .25s cubic-bezier(.2,.8,.3,1.2)}
@keyframes ntkpopin{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.ntkpop-halo{position:absolute;top:-38px;left:50%;transform:translateX(-50%);width:76px;height:76px;border-radius:50%;background:linear-gradient(145deg,#ffd86b,#f7a600);display:flex;align-items:center;justify-content:center;font-size:38px;box-shadow:0 6px 18px rgba(210,150,20,.5)}
.ntkpop-x{position:absolute;top:10px;right:12px;border:none;background:#f1e8fb;color:#5b3a8e;width:30px;height:30px;border-radius:50%;font-size:15px;cursor:pointer;font-weight:800}
.ntkpop-avs{display:flex;justify-content:center;margin:6px 0 12px}
.ntkpop-avs img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:3px solid #fff;margin-left:-12px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.ntkpop-avs img:first-child{margin-left:0}
.ntkpop-avs .ap-emo{font-size:44px}
.ntkpop-t{font-size:19px;font-weight:800;color:#2b1a4a}
.ntkpop-free{font-size:22px;font-weight:900;color:#f7820a;margin:4px 0 16px}
.ntkpop-btns{display:flex;gap:10px}
.ntkpop-b{flex:1;text-decoration:none;font-weight:800;font-size:15px;padding:12px;border-radius:30px}
.ntkpop-b.call{background:#f7820a;color:#fff}
.ntkpop-b.chat{background:#fff;color:#f7820a;border:2px solid #f7820a}
.premium{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:14px 0;padding:14px 18px;border-radius:14px;
  background:linear-gradient(120deg,#6e4416,#9c2b3a 55%,#b8860b);
  border:1px solid var(--gold-b);box-shadow:0 6px 20px rgba(110,68,22,.3);
  position:relative;overflow:hidden}
.premium::before{content:"✦";position:absolute;right:-14px;top:-26px;font-size:110px;
  color:rgba(255,255,255,.08);pointer-events:none}
.premium .ptxt b{display:block;color:#ffe9a8;font-size:17px;letter-spacing:.3px}
.premium .ptxt small{color:#f6e8cf;font-size:12.5px}
.premium .pact{display:flex;align-items:center;gap:12px}
.premium .price{font-size:26px;font-weight:800;color:#ffd700;
  text-shadow:0 1px 6px rgba(0,0,0,.35)}
.hero p.sub{color:var(--muted);font-size:16.5px;margin-bottom:18px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.badge{font-size:12px;padding:6px 13px;border:1px solid rgba(108,40,217,.25);
  border-radius:20px;color:var(--purple);background:rgba(108,40,217,.06);font-weight:600}
.wheel{font-size:220px;text-align:center;color:var(--purple-l);
  filter:drop-shadow(0 14px 34px rgba(219,39,119,.3));animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- form card ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.formcard{border:1px solid rgba(108,40,217,.18);box-shadow:var(--shadow2)}
.formcard h3,.formcard h2{color:var(--purple-d);margin-bottom:12px;font-size:18px}
.field{margin-bottom:11px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px;font-weight:600}
.field input,.field select{width:100%;padding:11px;border-radius:9px;font-size:15px;
  border:1px solid #ddd3ee;background:#faf8ff;color:var(--text)}
.field input:focus,.field select:focus{outline:0;border-color:var(--purple-l);background:#fff}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.suggest{position:relative}
.suglist{position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;
  color:var(--text);border:1px solid var(--purple-l);border-radius:9px;margin-top:3px;
  max-height:220px;overflow:auto;box-shadow:var(--shadow)}
.suglist div{padding:9px 11px;font-size:14px;cursor:pointer;border-bottom:1px solid #f0ecfa}
.suglist div:hover{background:#f5f0ff}

/* ---- sections ---- */
section{padding:40px 0}
.h2{text-align:center;font-size:30px;color:var(--purple-d);margin-bottom:6px;font-weight:800}
.h2 .g{background:linear-gradient(90deg,var(--purple),var(--rose));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.h2::after{content:"";display:block;width:150px;height:10px;margin:14px auto 0;
  background:
    radial-gradient(circle at center, var(--gold) 0 3.6px, var(--gold-b) 3.6px 4.6px, transparent 5px),
    linear-gradient(90deg,transparent,var(--rose) 26%,var(--purple) 50%,var(--rose) 74%,transparent);
  background-size:100% 100%,100% 2.5px;background-position:center,center;background-repeat:no-repeat;
  filter:drop-shadow(0 1px 1px rgba(74,45,110,.18))}
.lead{text-align:center;color:var(--muted);margin-bottom:26px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.svc{display:block;cursor:pointer;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:22px;text-align:center;transition:.18s;box-shadow:var(--shadow)}
.svc:hover{transform:translateY(-5px);border-color:var(--purple-l);box-shadow:var(--shadow2)}
.svc .ic{font-size:38px;margin-bottom:8px}
.svc b{display:block;color:var(--purple-d);font-size:16px}
.svc small{color:var(--muted);font-size:12.5px}
.svc .tag{display:inline-block;margin-top:6px;font-size:10px;padding:2px 9px;border-radius:10px;
  background:rgba(219,39,119,.12);color:var(--rose);font-weight:700}

/* ---- reports ---- */
.reports{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.report{cursor:pointer;position:relative;border-radius:16px;padding:24px 20px;overflow:hidden;
  background:linear-gradient(165deg,#fff,#faf6ff);border:1px solid rgba(108,40,217,.16);
  box-shadow:var(--shadow);transition:.18s}
.report::before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;
  background:linear-gradient(90deg,var(--purple),var(--rose),var(--gold-b))}
.report:hover{transform:translateY(-6px);box-shadow:var(--shadow2);border-color:var(--purple-l)}
.report .ic{font-size:42px}
.report h4,.report h3{color:var(--purple-d);font-size:17.5px;margin:8px 0 5px}
.report p{color:var(--muted);font-size:13px;line-height:1.5;margin-bottom:10px}
.report .cta{display:inline-block;font-size:12.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--rose));padding:7px 14px;border-radius:9px}
.report .pages{position:absolute;top:14px;right:14px;font-size:10px;color:var(--gold);
  border:1px solid rgba(199,146,0,.5);border-radius:10px;padding:2px 9px;font-weight:700}

/* ---- why ---- */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.why .c{text-align:center;padding:22px}.why .ic{font-size:34px}
.why .c h4{color:var(--purple-d);margin:8px 0}.why .c p{color:var(--muted);font-size:14px}

/* ---- footer (deep purple, grounds page) ---- */
footer{background:linear-gradient(160deg,#4a2a05,#7a3e07);color:#fbeed8;
  padding:36px 0 16px;margin-top:30px;font-size:14px}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.4fr;gap:24px}
footer h4{color:#ffc163;margin-bottom:10px;font-size:15px}
footer a,footer p{display:block;color:#f6e3c8;padding:3px 0;cursor:pointer}footer a:hover{color:#ffc163}
/* ⚠️ रंग गहरे रखो — footer का background अब हल्का लैवेंडर है (line ~1289 override),
   पुराना क्रीम #e3c79b उस पर 1.05 contrast देता था यानी लगभग अदृश्य। */
.copy{text-align:center;color:#4a2d6e;font-size:12.5px}

/* ===== Kundali result ===== */
.result-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  background:linear-gradient(135deg,#2e1804,#9c4a12 58%,#e0750a);color:#fff;border-radius:14px;
  padding:16px 20px;margin-bottom:14px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.result-head::before{content:"✦";position:absolute;right:-10px;top:-30px;font-size:120px;color:rgba(255,255,255,.07);pointer-events:none}
.result-head>*{position:relative}
.result-head .who{font-size:19px;font-weight:800}
.result-head .meta{color:#f3e2c4;font-size:13px}
.result-head b{color:var(--gold-b)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
/* 📱 mobile: कुंडली-tabs AstroSage-जैसी — ऊपर चिपकी, बाएँ-दाएँ सरकने वाली पट्टी */
@media(max-width:840px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;position:sticky;top:0;z-index:40;
    background:var(--bg,#ead2f7);padding:10px 4px;margin:0 -4px 14px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none}
  /* 📊 हर table smart-wrapper (.tblwrap) में — छोटी table पूरे box में फैले
     (बगल ख़ाली नहीं), बड़ी सिर्फ़ अपने-में सरके; पूरा पेज स्थिर रहे */
  #result .tabpane{overflow-x:visible;max-width:100%}
  .tblwrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .tblwrap table{width:100%}
  #result table th,#result table td{white-space:nowrap}
}
/* 🔘 quick-jump बटन-grid (AstroSage-शैली — गोल outline बटन, 3 columns) */
.qjump{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qjump button{min-height:46px;border:1.5px solid var(--purple-l);background:#fff;
  color:var(--purple-d);font-weight:700;font-size:13.5px;border-radius:14px;
  cursor:pointer;padding:8px 6px;transition:transform .08s, background .15s}
.qjump button:active{transform:scale(.96)}
.qjump button:hover{background:#f6eefd}
@media(max-width:400px){.qjump{grid-template-columns:repeat(2,1fr)}}
.tabs button{cursor:pointer;border:1px solid var(--line);background:#fff;
  color:var(--purple-d);padding:10px 16px;border-radius:9px;font-size:14px;font-weight:700;box-shadow:var(--shadow)}
.tabs button.on{background:linear-gradient(135deg,var(--purple),var(--rose));color:#fff;border-color:transparent}
.tabpane{display:none}.tabpane.on{display:block}
.panel{background:var(--panel);color:var(--ink);border-radius:14px;padding:18px;
  box-shadow:var(--shadow);margin-bottom:14px}
/* h3 भी — heading-क्रम सुधारते समय app.js का एक panel-शीर्षक h3 बना था और यह
   नियम उसे छोड़ देता था (वह अकेला काला, बिना सुनहरी रेखा दिखता)। */
.panel h4,.panel h3{color:var(--purple-d);margin-bottom:12px;border-bottom:2px solid var(--gold-b);padding-bottom:7px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--purple);color:#fff;padding:9px;text-align:center}
td{padding:8px;border-bottom:1px solid #efe9fb;text-align:center}
tr:nth-child(even) td{background:#faf7ff}
.tag-good{color:var(--good);font-weight:700}.tag-warn{color:var(--warn);font-weight:700}
.tag-bad{color:var(--bad);font-weight:700}
.chartbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px}
.chartbox svg{display:block;width:100%;height:auto;max-width:440px;margin:0 auto}
.legend{font-size:11.5px;color:var(--muted);margin-top:6px;text-align:center}
.loading{text-align:center;padding:46px;color:var(--purple);font-size:18px;font-weight:700}

/* ---- freemium: action buttons, unlock, lock pane, teaser, modal ---- */
.actbtns{margin-top:8px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.actbtns button{cursor:pointer;border:0;border-radius:8px;font-size:13px;font-weight:700;padding:8px 13px;
  background:#fff;color:var(--purple-d)}
.actbtns button.unlock{background:linear-gradient(135deg,var(--gold-b),#d97706);color:#3a2606}
.okbadge{display:inline-block;background:rgba(255,255,255,.22);color:#fff;font-weight:700;
  font-size:13px;padding:8px 13px;border-radius:8px}
.teaser{margin-top:12px;background:linear-gradient(135deg,#fff5e0,#ffe9f2);border:1px dashed var(--gold-b);
  border-radius:10px;padding:12px;font-size:14px;color:var(--text)}
.teaser a{color:var(--rose);font-weight:800;cursor:pointer;text-decoration:underline}
.lockpane{text-align:center;padding:40px 20px;background:var(--panel);border-radius:14px;
  box-shadow:var(--shadow);border:1px dashed rgba(108,40,217,.3)}
.lockpane .lk{font-size:46px}.lockpane h3{color:var(--purple-d);margin:8px 0}
.lockpane p{color:var(--muted);margin-bottom:14px}
.unlock,button.unlock{cursor:pointer;border:0;border-radius:10px;font-weight:800;font-size:14px;
  padding:11px 20px;background:linear-gradient(135deg,var(--gold-b),#d97706);color:#3a2606;box-shadow:var(--shadow)}
.unlock:hover{filter:brightness(1.06)}
.unlockbar{margin-top:14px;background:linear-gradient(135deg,var(--purple),var(--rose));color:#fff;
  border-radius:14px;padding:16px 20px;font-size:14.5px;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;justify-content:space-between;box-shadow:var(--shadow2)}
.unlockbar .unlock{background:#fff;color:var(--purple-d)}
.evrow{padding:9px 0;border-bottom:1px solid #efe9fb}.evrow small{color:var(--muted)}
.ovgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.ovgrid .panel{margin-bottom:0;min-width:0}   /* 📱 चौड़ी table grid-cell को न फैलाए → .tblwrap अंदर scroll हो, पेज स्थिर */
.dchain{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:15px}
.dchain span{background:linear-gradient(135deg,var(--purple),var(--purple-l));color:#fff;
  border-radius:9px;padding:7px 13px;font-weight:700;text-align:center}
.dchain span small{display:block;font-size:10px;opacity:.85;font-weight:400}
.dchain i{color:var(--gold);font-style:normal;font-weight:900;font-size:18px}
.drow:hover td{background:#fbf3df !important}
.dbc{margin:6px 0 12px;font-size:14px;color:var(--muted);line-height:2}
.dbc span{cursor:pointer;padding:4px 10px;border-radius:8px;background:#f3edff;color:var(--purple-d);font-weight:700}
.dbc span:hover{background:#e7d9ff}
.dbc span.cur{background:linear-gradient(135deg,var(--purple),var(--rose));color:#fff}
.dbc small{font-weight:400;opacity:.8}
.modal{display:none;position:fixed;inset:0;z-index:200;background:rgba(40,20,70,.55);
  align-items:center;justify-content:center;padding:18px}
.mbox{background:var(--panel);border-radius:18px;max-width:420px;width:100%;padding:26px;
  text-align:center;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.mclose{position:absolute;top:12px;right:16px;cursor:pointer;color:var(--muted);font-size:20px}
.mic{font-size:48px}.mbox h3{color:var(--purple-d);margin:6px 0}
.mbox p{color:var(--muted);font-size:13.5px;margin-bottom:12px}
.price{font-size:36px;font-weight:900;color:var(--rose);margin:6px 0 14px}
.price small{font-size:14px;color:var(--muted);font-weight:600}

/* ---- responsive ---- */
@media(max-width:860px){
  .hero .grid{grid-template-columns:1fr}.wheel{font-size:140px;order:-1}
  .menu{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;
    background:#fff;padding:10px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .menu.open{display:flex}.hamb{display:block}
  .menu a{padding:12px 14px;border-radius:8px}
  .menu a::after{display:none}
  .menu a:hover,.menu a.active{background:rgba(254,154,4,.12)}
  .menu .mitem>a{padding:12px 14px}
  /* मोबाइल पर submenu खुला-खुला रहता है — hover होता ही नहीं, इसलिए
     ऊपर वाली visibility/opacity यहाँ रद्द करनी पड़ती है */
  .submenu{position:static;border:0;box-shadow:none;padding-left:16px;border-radius:0;
    visibility:visible;opacity:1;transition:none}
  .submenu::before{display:none}
  .herogrid{grid-template-columns:1fr}
  .herobanner{padding:26px 22px}
  .herobanner h1{font-size:27px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .zgrid{grid-template-columns:repeat(3,1fr)}
  .fcols{grid-template-columns:1fr 1fr}
  .hright{margin-left:auto}
  /* 🌐 भाषा-चयन mobile पर भी दिखे (compact) — पहले छिपा था */
  .hright{gap:6px}
  .hright #langSel{display:inline-block;max-width:64px;padding:6px 2px;font-size:12px;border-radius:8px}
  header .btn.hlogin{padding:8px 11px}
  .brandimg{height:34px}   /* छोटा फ़ोन: logo हल्का — selector+login सब समाएँ */
  .hero h1{font-size:32px}.two{grid-template-columns:1fr}
  /* login बटन mobile पर भी दिखे (बस compact) — पहले छिप जाता था */
  header .btn.hlogin{display:inline-flex;padding:8px 15px;font-size:13.5px}
  #hlogout{padding:8px 12px !important;font-size:13px}
  .result-head{flex-direction:column;align-items:flex-start}.actbtns{justify-content:flex-start}
  .h2{font-size:25px}
  section{padding:30px 0}
}

/* ===== final polish — scroll-reveal + slider Ken-Burns ===== */
/* JS जोड़ता है .reveal-init फिर .reveal-in (no-JS पर सब दिखे) */
.reveal-init{opacity:0;transform:translateY(20px)}
.reveal-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.reveal-init{opacity:1;transform:none}}
/* hero slider — हल्का धीमा zoom (Ken-Burns) सक्रिय स्लाइड पर */
.slider .slide.on{animation:kenburns 16s ease-out forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
/* tile/zcard पर icon हल्का उछले hover पर */
.tile:hover .tic,.svc:hover .ic{animation:pop .4s ease}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ===== colored/highlighted blocks + stylish headings (2026-06-15) ===== */
/* section headings — gradient text + accent bar (already) */
.h2{background:linear-gradient(92deg,var(--purple-d),var(--rose) 60%,#d97706);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:.6px;line-height:1.28;font-weight:800}
.lead{font-size:15px;letter-spacing:.2px;max-width:560px;margin-left:auto;margin-right:auto}

/* quick tiles — रंगीन, हर tile अलग रंग, icon गोल badge में */
.tile{background:linear-gradient(135deg,#fff,#fff1dc);border:1.5px solid #ffd9a3;
  box-shadow:0 5px 16px rgba(224,117,10,.16)}
.tile .tic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  font-size:24px;flex:none;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.tile b{color:var(--purple-d);font-size:15px}
.tile:nth-child(1){background:linear-gradient(135deg,#fff,#ffe7ea);border-color:#f6b9c0}
.tile:nth-child(1) .tic{background:linear-gradient(135deg,#F66962,#c2410c)}
.tile:nth-child(2){background:linear-gradient(135deg,#fff,#efe7ff);border-color:#ccb6ef}
.tile:nth-child(2) .tic{background:linear-gradient(135deg,#8b3fb0,#5a2d82)}
.tile:nth-child(3){background:linear-gradient(135deg,#fff,#fff0d6);border-color:#ffd28f}
.tile:nth-child(3) .tic{background:linear-gradient(135deg,var(--gold-b),#d97706)}
.tile:nth-child(4){background:linear-gradient(135deg,#fff,#e4f7ed);border-color:#a8dabf}
.tile:nth-child(4) .tic{background:linear-gradient(135deg,#15803d,#22a558)}
.tile:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(224,117,10,.24)}

/* सेवा cards (.svc) — हल्का रंगीन + icon गोल badge में, ऊपर रंगीन पट्टी */
.svc{background:linear-gradient(160deg,#fff,#fff6ea);border:1px solid #ffe0b8;
  position:relative;overflow:hidden}
.svc::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--gold-b),var(--rose),var(--purple-l))}
.svc .ic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;
  margin:4px auto 10px;font-size:32px;
  background:linear-gradient(135deg,#fff3da,#ffe1b0);box-shadow:0 4px 12px rgba(224,117,10,.18)}
.svc:hover{border-color:var(--gold-b);box-shadow:0 12px 28px rgba(224,117,10,.2)}

/* report cards (होम के premium reports) — site warm theme */
.report{background:linear-gradient(160deg,#fff,#fff3da);border:1px solid #ffd9a3}
.report::before{background:linear-gradient(90deg,var(--gold-b),var(--rose),var(--purple-l))}
.report .ic{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;
  margin-bottom:8px;background:linear-gradient(135deg,#fff3da,#ffe1b0);
  box-shadow:0 4px 12px rgba(224,117,10,.2)}
.report .cta{background:linear-gradient(135deg,var(--gold-b),#d97706);color:#3a2606}
.report:hover{border-color:var(--gold-b)}

/* report poster cards (/reports पेज) — placeholder site-gradient (image admin से) */
.repcard{background:linear-gradient(160deg,#fff,#fff6ea);border:1px solid #ffe0b8}
.repposter{background:linear-gradient(150deg,#fff0d6,#ffd29e 50%,#f3b15f)}
.rdposter{background:linear-gradient(150deg,#fff0d6,#ffd29e 50%,#f3b15f)}
.repph,.repph .repphnm{color:#9c2b3a}

/* home article slider (#2) */
.artslider{position:relative;display:flex;align-items:center;gap:6px}
.arttrack{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  padding:6px 2px 14px;flex:1;scrollbar-width:none}
.arttrack::-webkit-scrollbar{display:none}
.artslide{flex:0 0 280px;scroll-snap-align:start}
.artnav{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--purple-d);font-size:24px;font-weight:700;cursor:pointer;box-shadow:0 3px 10px rgba(224,117,10,.15);line-height:1}
.artnav:hover{background:var(--gold-b);color:#fff;border-color:var(--gold-b)}
@media(max-width:680px){.artnav{display:none}.artslide{flex:0 0 78%}}
/* toast (छोटी सूचना — consult.js) */
.ntktoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:9999;
  background:#2a1b08;color:#fff;font-size:14px;font-weight:600;padding:11px 18px;border-radius:24px;
  box-shadow:0 8px 26px rgba(0,0,0,.3);opacity:0;transition:opacity .3s,transform .3s;max-width:90vw;text-align:center}
.ntktoast.on{opacity:1;transform:translate(-50%,0)}

/* ---- print / save-as-PDF: clean kundali only ---- */
@media print{
  /* सिर्फ़ कुंडली/मिलान-परिणाम छापें — पूरी site नहीं */
  body{background:#fff;color:#000}
  body *{visibility:hidden}
  #result, #result *, #milresult, #milresult *{visibility:visible}
  #result, #milresult{position:absolute;left:0;top:0;width:100%;margin:0;padding:0}
  section{padding:0}
  .search-strip,.topbar,header,.hero,#tools,#reports,.why,footer,
  .tabs,.actbtns,.unlockbar,.teaser,.modal,.noprint,#premiumBar,
  .premium,.lockpane,.formcard,#kundali-form{display:none !important}
  .tabpane{display:block !important;page-break-inside:avoid}
  .tabpane .loading{display:none !important}
  .result-head{background:#4b2a77 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .panel{box-shadow:none;border:1px solid #ccc;page-break-inside:avoid}
  th{background:#4b2a77 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* 📄 बेसिक-PDF बटन (निःशुल्क — हरा प्रीमियम-चमक) */
.actbtns .basicpdf, .btn.basicpdf{
  background:linear-gradient(135deg,#1e9e5a,#0f7a42);color:#fff;border:none;
  box-shadow:0 3px 12px rgba(15,122,66,.32);font-weight:700}
.actbtns .basicpdf small, .btn.basicpdf small{opacity:.9;font-weight:600}
.btn.basicpdf:hover, .actbtns .basicpdf:hover{filter:brightness(1.06);
  box-shadow:0 5px 18px rgba(15,122,66,.42)}

/* 🎯 D1 chart toggle-बार */
.d1tgwrap{display:flex;flex-wrap:wrap;gap:5px 10px;align-items:center;margin-top:9px;
  padding-top:8px;border-top:1px dashed var(--line)}
.d1tglbl{font-size:11.5px;font-weight:700;color:var(--purple-d)}
.d1tg{font-size:12px;display:inline-flex;align-items:center;gap:3px;cursor:pointer;
  background:#f5effb;border:1px solid #e2d5f2;border-radius:12px;padding:2px 9px}
.d1tg input{cursor:pointer}

/* 🌱 पुष्कर/विष नवमांश tags */
.pvtag{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:12px;margin:2px 3px 2px 0}
.pvgood{background:#e6f7ec;color:#1B7A3D;border:1px solid #b6e2c6}
.pvbad{background:#fdecec;color:#c0392b;border:1px solid #f2c4c4}

/* 📖 वर्गीकृत भविष्यफल */
.predcat{border:1px solid var(--line);border-radius:14px;margin:12px 0;overflow:hidden;background:#fff}
.predhd{background:linear-gradient(135deg,#7d54c9,#4b2a77);color:#fff;margin:0;padding:11px 16px;
  font-size:15.5px;display:flex;justify-content:space-between;align-items:center;gap:10px}
/* 🔴 .predcat, .panel.predwrap के भीतर है → line ~856 का `.panel h3{color:जामुनी;
   gold-border}` (0,1,1) `.predhd` (0,1,0) को हरा देता था → जामुनी-पर-जामुनी text
   (धुँधला) + अनचाहा gold-border। ऊँची specificity से सफ़ेद-bold वापस। */
.predwrap .predhd{color:#fff;font-weight:800;border-bottom:none;padding:11px 16px;
  text-shadow:0 1px 2px rgba(0,0,0,.35)}
.predscore{background:rgba(255,255,255,.22);border-radius:14px;padding:2px 11px;font-size:12.5px;font-weight:800}
.predscore.g{color:#d6ffe4}.predscore.m{color:#ffe9c9}.predscore.w{color:#ffd6d6}
.predintro{margin:0;padding:12px 16px;font-size:13.5px;line-height:1.85;color:#4a3a63;
  font-style:italic;background:linear-gradient(180deg,#faf6ff,#fff);border-bottom:1px dashed var(--line)}
.predclose{margin:0;padding:11px 16px;font-size:13px;line-height:1.8;color:var(--purple-d);
  background:linear-gradient(180deg,#fff,#f7f0ff);border-top:1px solid var(--line);font-weight:600}
.predarea{padding:10px 16px;border-bottom:1px dashed var(--line)}
.predatitle{font-weight:800;color:var(--purple-d);font-size:14px;margin-bottom:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.predatitle .predscore{background:#efe7fb;color:var(--purple-d)}
.predarea p{margin:5px 0;font-size:13.5px;line-height:1.75}
.predpos,.predchal{margin:5px 0 5px 4px;list-style:none;padding:0}
.predpos li{color:#1B7A3D;font-size:12.5px;margin:2px 0}.predpos li:before{content:'✓ ';font-weight:800}
.predchal li{color:#c0392b;font-size:12.5px;margin:2px 0}.predchal li:before{content:'✗ ';font-weight:800}
.predadv{background:#fff8e6;border-radius:8px;padding:6px 10px;font-size:12.5px!important;color:#6E4A1C}
.preddet{font-size:11.5px!important;color:var(--muted)}
.predblock{padding:10px 16px;border-bottom:1px dashed var(--line)}
.predblock:last-child{border-bottom:none}
.predblock h4{color:var(--purple-d);font-size:14px;margin:0 0 6px}
.predblock p{margin:6px 0;font-size:13.5px;line-height:1.8}
.predyogas{padding:10px 16px;display:flex;flex-wrap:wrap;gap:6px}
.predyog{background:#eafaf0;border:1px solid #bfe5cf;border-radius:14px;padding:4px 11px;font-size:12px;color:#1B7A3D}
.preddosha{padding:8px 16px;font-size:13px;color:#9a3b12;background:#fff6f0;border-bottom:1px solid #f3e0d5}

/* 🌐 पाश्चात्य (Western) चार्ट */
.wchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:4px 0}
.wchip{background:#f4eeff;border:1px solid #d9c7f0;border-radius:18px;padding:6px 14px;
  font-size:13px;color:var(--purple-d)}
.wbar{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:12.5px}
.wbar span{width:74px;color:var(--muted)}
.wbar .wbarf{flex:1;background:#f0e9fb;border-radius:6px;height:14px;overflow:hidden}
.wbar .wbarf>div{height:100%;background:linear-gradient(90deg,#7d54c9,#c99a2e);border-radius:6px}
.wbar b{width:20px;text-align:right;color:var(--purple-d)}

/* 🕘 इतिहास — heading के बग़ल में छोटा बटन + popup modal */
.pghead{position:relative;text-align:center}
.histbtn{background:linear-gradient(135deg,#fff7e0,#ffe4a3);border:1.5px solid #e6b800;
  border-radius:22px;padding:9px 18px;font-size:14px;font-weight:800;color:var(--purple-d);
  cursor:pointer;transition:all .18s;white-space:nowrap;box-shadow:0 2px 9px rgba(180,140,0,.28);
  display:inline-flex;align-items:center;gap:6px;letter-spacing:.2px}
.histbtn:hover{background:linear-gradient(135deg,var(--purple-d),#5a2a8c);color:#ffd86b;
  border-color:var(--purple-d);box-shadow:0 5px 15px rgba(90,40,140,.38);transform:translateY(-1px)}
.histbtn:active{transform:translateY(0)}
.pghistbtn{position:absolute;right:0;top:50%;transform:translateY(-50%)}
@media(max-width:600px){.pghistbtn{position:static;transform:none;margin:6px auto 0}}
.histmodal{position:fixed;inset:0;background:rgba(40,20,60,.5);z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:16px;animation:histfade .15s ease}
@keyframes histfade{from{opacity:0}to{opacity:1}}
.histbox{background:#fff;border-radius:16px;max-width:440px;width:100%;max-height:80vh;
  overflow-y:auto;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.histhd{position:sticky;top:0;background:var(--purple-d);color:#fff;font-weight:800;font-size:15.5px;
  padding:13px 18px;border-radius:16px 16px 0 0;display:flex;justify-content:space-between;align-items:center}
.histx{cursor:pointer;font-size:18px;opacity:.85;line-height:1}.histx:hover{opacity:1}
.histlist{padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.histrow{text-align:left;background:#faf7ff;border:1px solid #e7ddf6;border-radius:10px;
  padding:11px 14px;font-size:13.5px;color:var(--purple-d);cursor:pointer;transition:all .13s;width:100%}
.histrow small{color:var(--muted);font-weight:400;margin-left:5px;display:block;margin-top:2px}
.histrow:hover{background:#f0e8ff;border-color:var(--gold);transform:translateX(2px)}
.histempty{padding:26px 18px;text-align:center;color:var(--muted);font-size:13.5px}
.histfoot{padding:8px 16px 14px;text-align:center;border-top:1px solid var(--line)}
.histfoot a{font-size:12.5px;font-weight:600;color:#b0343c;cursor:pointer}
@media print{.histbtnwrap,.histmodal{display:none!important}}

/* 👫 मिलान चार्ट (वर/वधू — D1 + D9 + चयनित वर्ग) */
.milchart{margin:10px 0 6px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.mcname{font-weight:800;color:var(--purple-d);text-align:center;margin-bottom:8px;font-size:15px}
.mccap{text-align:center;font-weight:700;color:var(--purple-d);font-size:13px;margin-bottom:5px}
.milvwrap{display:flex;gap:9px;align-items:center;justify-content:center;margin:14px 0 6px;flex-wrap:wrap}
.milvsel{padding:8px 14px;border-radius:9px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:600;color:var(--purple-d)}
#milVargaBox:not(:empty){margin-top:8px}
@media(max-width:640px){.milchart .two{grid-template-columns:1fr}}

/* ✨ प्रीमियम टूल-चिप (मांगलिक/गोचर/अंक) — glow + shimmer */
.toolchip{position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:11px 20px;margin:5px 5px 0;border-radius:30px;text-decoration:none;
  font-weight:800;font-size:14.5px;color:#fff;letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.28);overflow:hidden;
  text-shadow:0 1px 7px rgba(0,0,0,.35),0 0 12px rgba(255,255,255,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.toolchip:hover{transform:translateY(-3px) scale(1.03);filter:brightness(1.08);
  box-shadow:0 12px 28px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.4)}
.toolchip .ci{font-size:17px;filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
.toolchip::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:chipShine 3.6s ease-in-out infinite}
@keyframes chipShine{0%,72%{left:-120%}86%{left:130%}100%{left:130%}}
.toolchip.tc-red{background:linear-gradient(135deg,#e0455a,#a11d2e)}
.toolchip.tc-purple{background:linear-gradient(135deg,#7d54c9,#4b2a77)}
.toolchip.tc-teal{background:linear-gradient(135deg,#16b0c4,#0a6373)}
@media(prefers-reduced-motion:reduce){.toolchip::after{animation:none;display:none}}

/* ===== Homepage v66 — राशि चक्र + क्यों चुनें + बारे में + समीक्षा + FAQ ===== */
/* --- celestial राशि-चक्र band (अपने warm-gold रंग में) --- */
.zsec{position:relative;padding:50px 0 56px;margin:28px 0;overflow:hidden;
  background:radial-gradient(circle at 50% 6%,#fff1d8,#ffe2ba 85%);
  border-top:1px solid var(--gold-b);border-bottom:1px solid var(--gold-b)}
.zsec .wrap{position:relative;z-index:1}
.zwheel{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;margin-top:26px}
.zcol{display:flex;flex-direction:column;gap:13px}
.zc{display:flex;align-items:center;gap:13px;text-decoration:none;border-radius:14px;padding:11px 15px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);transition:all .18s}
.zc:hover{border-color:var(--gold);background:#fff8ee;transform:translateY(-3px);box-shadow:0 10px 22px rgba(224,117,10,.16)}
.zc .zsym{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:24px;
  color:#fff;background:linear-gradient(135deg,var(--gold),var(--gold-b));box-shadow:0 4px 12px rgba(254,154,4,.35)}
.zc .zt b{display:block;color:var(--purple-d);font-size:15.5px}
.zc .zt small{color:var(--muted);font-size:12px}
.zring{display:grid;place-items:center;position:relative}
.zring::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,#fffaf0 48%,#ffe1ad 100%);
  box-shadow:0 12px 34px rgba(224,117,10,.22),inset 0 0 0 2px rgba(224,117,10,.22)}
.zring svg{position:relative;width:300px;height:300px;filter:drop-shadow(0 2px 4px rgba(180,90,10,.25))}
@media(max-width:880px){.zring::before{width:236px;height:236px}}
.zring .zspin{transform-box:view-box;transform-origin:150px 150px;animation:zspin 42s linear infinite}
@keyframes zspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.zring .zspin{animation:none}}
@media(max-width:880px){.zwheel{grid-template-columns:1fr 1fr;gap:12px}.zring{grid-column:1/-1;order:-1}.zring svg{width:236px;height:236px}}
@media(max-width:520px){.zwheel{grid-template-columns:1fr}.zc .zt b{font-size:14.5px}}

/* --- क्यों चुनें --- */
.wcu{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}
.wcu-card{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 16px;box-shadow:var(--shadow)}
.wcu-ring{width:104px;height:104px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,#fff6e6,#ffe9c7);border:3px solid var(--gold);box-shadow:0 6px 18px rgba(254,154,4,.22)}
.wcu-num{font-size:25px;font-weight:800;color:var(--purple-d);line-height:1}
.wcu-card b{display:block;color:var(--purple-d);font-size:15.5px;margin-bottom:4px}
.wcu-card small{color:var(--muted);font-size:13px}
@media(max-width:760px){.wcu{grid-template-columns:repeat(2,1fr)}}

/* --- हमारे बारे में --- */
.aboutsec{background:linear-gradient(180deg,#fff6e6,#fffaf1)}
.aboutgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:center}
.aboutimg{border-radius:18px;overflow:hidden;box-shadow:var(--shadow2)}
.aboutimg img{width:100%;height:100%;object-fit:cover;display:block;min-height:280px}
.aboutcard h2{text-align:left;font-size:30px;color:var(--purple-d);font-weight:800;margin-bottom:6px}
.aboutcard .uline{width:70px;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--rose));margin-bottom:16px}
.aboutcard p{color:var(--text);font-size:15px;line-height:1.7;margin-bottom:14px}
.aboutcall{display:flex;align-items:center;gap:14px;background:var(--ink);border-radius:14px;padding:14px 18px;margin:6px 0 16px}
.aboutcall .ph{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:22px;
  background:linear-gradient(135deg,var(--gold),var(--gold-b));color:#241303}
.aboutcall small{display:block;color:#f0d9b0;font-size:12.5px}
.aboutcall b{font-size:21px;color:var(--gold-b)}
/* 📱 फ़ोन: banner पूरा दिखे, कटे नहीं।
   desktop पर `height:100%;object-fit:cover;min-height:280px` ज़रूरी है — तभी चित्र
   बग़ल के पाठ-स्तंभ जितना ऊँचा होकर grid सुडौल दिखता है। पर एक-स्तंभ मोबाइल पर
   वही नियम चौड़े banner के **दोनों किनारे काट देता** था (user ने पकड़ा)।
   यहाँ height:auto + min-height:0 → चित्र अपने असली अनुपात में, कुछ भी कटे बिना। */
@media(max-width:820px){
  .aboutgrid{grid-template-columns:1fr}
  .aboutcard h2{font-size:25px}
  .aboutimg img{height:auto;min-height:0;object-fit:contain}
}

/* --- समीक्षाएँ --- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.tcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:32px 22px 22px;position:relative;box-shadow:var(--shadow)}
.tcard .tav{position:absolute;top:-28px;left:50%;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;
  overflow:hidden;display:grid;place-items:center;font-size:26px;background:linear-gradient(135deg,var(--gold),var(--gold-b));border:3px solid #fff;box-shadow:var(--shadow)}
.tcard .tav img{width:100%;height:100%;object-fit:cover}
/* 💬 होम "ग्राहकों की राय" — क्षैतिज auto-scroll carousel (कम जगह, अधिक review) */
/* नोट: scroll-snap/scroll-behavior नहीं — वे per-frame auto-scroll से टकराते हैं */
.treviewtrack{display:flex;gap:18px;overflow-x:auto;padding:40px 4px 16px;margin-top:8px;scrollbar-width:thin}
.treviewtrack .tcard{flex:0 0 300px;margin-top:0}
.treviewtrack .tcard p{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:680px){.treviewtrack .tcard{flex:0 0 82%}}
.tcard .tstars{color:var(--gold);text-align:center;letter-spacing:2px;margin-bottom:8px}
.tcard p{color:var(--text);font-size:14.5px;line-height:1.65;text-align:center;margin-bottom:12px;font-style:italic}
.tcard .tname{text-align:center;font-weight:800;color:var(--purple-d)}
.tcard .tcity{text-align:center;color:var(--muted);font-size:12.5px}
@media(max-width:820px){.tgrid{grid-template-columns:1fr;gap:42px}}

/* --- FAQ --- */
.faqwrap{max-width:820px;margin:24px auto 0}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq-item summary{cursor:pointer;padding:16px 18px;font-weight:700;color:var(--purple-d);font-size:15.5px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:24px;color:var(--gold);font-weight:400;flex:none;line-height:1}
.faq-item[open] summary::after{content:"\2013"}
.faq-item .fa{padding:0 18px 16px;color:var(--text);font-size:14.5px;line-height:1.7}

/* --- कुंडली result के ऊपर बंद-बार (home पर) --- */
.kbar{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.kbarlink{color:var(--purple-d);font-weight:700;font-size:13.5px;text-decoration:none;padding:7px 14px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.kbarlink:hover{border-color:var(--gold);background:#fff8ee}
.kbarclose{cursor:pointer;border:0;border-radius:9px;padding:8px 16px;font-weight:700;font-size:13.5px;
  background:linear-gradient(135deg,#9c2b3a,#b8454f);color:#fff}
.kbarclose:hover{filter:brightness(1.08)}

/* ================= LAVENDER LIGHT theme (विकल्प B · #ead2f7) — global override ================= */
/* header (एकदम हल्का बैंगनी bar) + गहरा text */
header{background:linear-gradient(180deg,#dcc6f2,#cfb6ec);border-bottom:1px solid #bfa3e2;
  box-shadow:0 2px 14px rgba(74,45,110,.12);color:var(--purple-d)}
header .brand b{color:var(--purple-d)}
.menu a,.menu .mitem>a{color:var(--purple-d)}
.menu a:hover,.menu .mitem>a:hover,.menu .mitem.has-sub:hover>a{color:var(--rose)}
.menu a.active,.menu .mitem>a.active{color:var(--purple-d);font-weight:800}
.hamb{color:var(--purple-d)}
.submenu a:hover{color:var(--purple-d) !important}   /* dropdown सफ़ेद → गहरा text */
/* menu cut-off fix: छोटी padding + बाएँ-संरेखित (center+overflow पहला आइटम काट देता था) */
.menu{justify-content:center;gap:14px}  /* space-evenly items को 60px+ बिखेरता था (user: 'बीच में जगह ज़्यादा') */
.menu a{padding:20px 4.5px;font-size:13px}
.menu .mitem>a{padding:20px 4.5px;font-size:13px}
.menu a::after{left:9px;right:9px}
.topbar,.atop{background:var(--ink);color:var(--gold-b)}
.search-strip{background:#e6d4f6}
/* dropdowns, search, language select (सफ़ेद कार्ड, गहरा text) */
.submenu,.ssug{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.submenu a{color:var(--text)}
.submenu a:hover,.ssug div:hover{background:#f0e3fb;color:var(--purple-d)}
.sform{background:#fff;border:1px solid var(--line)}
.sform input{background:transparent;color:var(--text)}
.sform button{background:var(--gold);color:#2D1B4E}
#langSel,.hright #langSel{background:#fff;color:var(--text);border-color:var(--line)}
#langSel option{background:#fff;color:var(--text)}
/* inputs everywhere (light) */
.field input,.field select,.field input:focus,.field select:focus,
.authcard input,.authcard select,.pfbox input,.pfbox select,.ainput,.suglist,
input,select,textarea{background:#fbf7fe;color:var(--text);border-color:var(--line)}
::placeholder{color:#9a8bb5}
/* cards / panels → सफ़ेद */
.card,.formcard,.tile,.tile:nth-child(1),.tile:nth-child(2),.tile:nth-child(3),.tile:nth-child(4),
.svc,.report,.repcard,.acard,.pcard,.milcol,.cmeters>div,.remcard,.cchat,
.tabs button,.artnav,.cmfile,.histord,.teaser,.pfbox{
  background:#fff;border-color:var(--line)}
.tile b,.svc b,.report h4,.report h3,.repbody h4 a,.pcard h4{color:var(--purple-d)}
.panel{background:#fff;color:var(--text)}
.panel h4,.panel h3,.pfbox h3{color:var(--purple-d)}
/* section backgrounds (हल्का लैवेंडर) */
.altbg,.aboutsec{background:linear-gradient(180deg,#f3e6fb,#ead2f7)}
.zsec{background:radial-gradient(circle at 50% 8%,#f3e8fb,#e6d2f7 82%);border-color:var(--line)}
/* Why-Choose-Us — premium cards (घूमती रंगीन रिंग + hover-lift) */
.wcu-card{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#fbf6ff) !important;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s}
.wcu-card::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold),var(--rose),var(--purple-l));
  transform:scaleX(0);transform-origin:left;transition:transform .35s}
.wcu-card:hover{transform:translateY(-7px);border-color:var(--gold-b);
  box-shadow:0 20px 42px rgba(74,45,110,.20)}
.wcu-card:hover::after{transform:scaleX(1)}
.wcu-ring{position:relative;background:none !important;border:0 !important;box-shadow:none !important}
.wcu-ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,var(--gold),#f5d77a,var(--rose),var(--purple-l),var(--gold));
  box-shadow:0 8px 22px rgba(106,63,160,.22);animation:wcuSpin 7s linear infinite}
.wcu-ring::after{content:"";position:absolute;inset:5px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#ffffff,#f4e9fc);
  box-shadow:inset 0 2px 8px rgba(106,63,160,.10)}
@keyframes wcuSpin{to{transform:rotate(360deg)}}
.wcu-card:hover .wcu-ring::before{animation-duration:2.4s}
.wcu-num{position:relative;z-index:2;line-height:1.5 !important;padding:4px 2px;
  background:linear-gradient(135deg,var(--purple-d),var(--rose));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transition:transform .28s}
.wcu-card:hover .wcu-num{transform:scale(1.08)}
.wcu-card b{letter-spacing:.2px}
.wcu-card small{color:var(--purple-l)}
@media(prefers-reduced-motion:reduce){.wcu-ring::before{animation:none}}
/* header login-pill avatar (user फोटो) */
.btn.hlogin.haspic{display:inline-flex;align-items:center;gap:7px;padding-left:7px}
.hlav{width:24px;height:24px;border-radius:50%;flex:none;display:inline-grid;place-items:center;
  font-size:13px;background:rgba(45,27,78,.18);background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.hlav.hasimg{background-color:#fff}
.hlnm{font-weight:700;line-height:1}
/* tables */
th,.ktab th{background:var(--ink);color:var(--gold-b)}
td,.ptab td,.ktab td{border-bottom-color:var(--line)}
tr:nth-child(even) td,.drow:hover td{background:#f6eefc !important}
/* chat */
.chatbox{background:#f7f1fc}
.cmrow.them .cmbub{background:#fff;border-color:var(--line);color:var(--text)}
.chathead{background:#f0e3fb;color:var(--purple-d)}
.cmdate span,.modetag,.dbc span,.attbtn,.tchip{background:#f0e3fb;color:var(--purple-d);border-color:var(--line)}
/* footer (एकदम हल्का बैंगनी) + गहरा text */
footer{background:linear-gradient(160deg,#d6bcef,#c6a9e8);border-top:1px solid #bfa3e2;color:#4a2d6e}
footer h4{color:var(--purple-d)} footer a,footer p{color:#523a78} footer a:hover{color:var(--rose)}
/* buttons: GOLD gradient + dark text; maroon/util buttons अपना inline रंग + सफ़ेद text */
.btn{background:linear-gradient(135deg,var(--gold),var(--gold-b));color:#2D1B4E}
.btn[style*="9c2b3a"],.btn[style*="b91c1c"],.btn[style*="#9c2"],.btn[style*="#777"],.btn[style*="background:#777"]{color:#fff}
.unlockbar{color:#fff} .unlockbar .unlock{background:var(--gold);color:#2D1B4E}
/* KEEP LIGHT — कुंडली chart "कागज़" + print अप्रभावित */
.chartbox{background:#fffdf8}

/* ===== sweep-fix (light) — बचे box + hover ===== */
.tchip:hover,.zc:hover,.hdobtog:hover,.kbarlink:hover{background:#f0e3fb;border-color:var(--gold)}
.ktab tr:hover td{background:#f0e3fb !important}
/* पंचांग — तिथि-पट्टी + चौघड़िया */
.presdate{background:#fdf3da;border-color:var(--gold-b);color:var(--purple-d)}
.chcell.good{background:#e8f7e8;border-color:#bfe5bf}
.chcell.bad{background:#fdeaea;border-color:#f2c5c5}
.chcell b{color:var(--text)} .chcell small{color:var(--muted)}
/* राशिफल — रेटिंग पट्टी, शुभ box, साढ़ेसाती */
.hareas{background:#f7f1fc} .harea{color:var(--text)}
.hlucky{background:#fdf3da;border-color:var(--gold-b);color:var(--text)}
.hsade{background:#fdeaea;border-color:#f2c5c5;color:#9c2b3a}
/* article/puja image placeholders */
.artimg,.pcard .pimg{background:linear-gradient(135deg,#f3e6fb,#e6d2f7)}
/* छोटे status chips */
.pillwait{background:#3a2e08;color:#ffd24a}

/* ⚡ home के नीचे के sections स्क्रीन पर आने पर ही render हों (perf) */
#homepuja,#homestore,#reports,.aboutsec,.wcusec,.faqsec{content-visibility:auto;contain-intrinsic-size:auto 620px}


/* ═══════════ 📱 APP-FEEL — inputs/buttons/tabs को native-app जैसा रूप ═══════════
   (user-निर्णय: पूरी site में controls professional/native-look — app व mobile-web दोनों) */
/* — सब input/select बड़े touch-आकार में; 16px font = iPhone में zoom-कूद भी बंद — */
.field input,.field select,.mform input,.mform select{
  min-height:48px;padding:12px 14px;font-size:16px;border-radius:12px;
  border:1.5px solid #d9cdec;background:#fff;
  transition:border-color .15s, box-shadow .15s}
.field input:focus,.field select:focus,.mform input:focus,.mform select:focus{
  outline:0;border-color:var(--purple);box-shadow:0 0 0 3px rgba(106,63,160,.15);background:#fff}
.field label{font-size:13.5px;font-weight:700;color:var(--purple-d);margin-bottom:5px;display:block}
/* दिन/माह/वर्ष जैसे अंक-खाने: बीच में लिखा दिखे, बराबर चौड़ाई */
.row3 input[type=number]{text-align:center;padding:12px 6px}
/* — buttons: native जैसा दबने का एहसास (press पर हल्का दबे) — */
.btn{min-height:46px;border-radius:12px;transition:transform .08s, box-shadow .15s, filter .15s}
.btn:active{transform:scale(.965);filter:brightness(.96)}
button{touch-action:manipulation}                /* double-tap-zoom बंद = फुर्तीले बटन */
/* — tab-पट्टियाँ (कुंडली/राशिफल आदि): app-जैसे pills, सरकने-योग्य — */
.tabbar,.hperiods{scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button,.hperiods a{min-height:42px;border-radius:21px;font-size:14px;
  padding:9px 18px;white-space:nowrap;transition:transform .08s}
.tabbar button:active{transform:scale(.96)}
/* mobile: panchang/muhurat जैसे form एक-column में खुले-खुले */
@media(max-width:560px){
  .mform .row3{grid-template-columns:1fr}
  .mform .row3 .row3{grid-template-columns:1fr 1fr 1fr}   /* दिन-माह-वर्ष साथ रहें */
  .field input,.field select{font-size:16px}
}

/* 📱 mobile: कुंडली के जोड़े-charts (लग्न+नवमांश, D1+चलित, मिलान) ऊपर-नीचे —
   बगल-बगल आधे-आधे में छोटे दिखते थे (user-शिकायत) */
@media(max-width:700px){
  .ovgrid{grid-template-columns:1fr}
  #result .two{grid-template-columns:1fr}
  .chartbox svg{max-width:360px}
}

/* ═══ 🎁 PROMO-POPUP (admin-managed offers — AstroSage-शैली modal) ═══ */
.ntkpromo-ov{position:fixed;inset:0;background:rgba(30,15,50,.55);z-index:99990;
  display:flex;align-items:center;justify-content:center;padding:18px;
  animation:ntkpFade .25s ease}
.ntkpromo-ov.out{opacity:0;transition:opacity .25s}
.ntkpromo{position:relative;background:#fff;border-radius:16px;max-width:400px;
  width:100%;overflow:hidden;box-shadow:0 18px 60px rgba(40,10,70,.45);
  animation:ntkpPop .3s cubic-bezier(.2,1.4,.4,1)}
.ntkpromo img{display:block;width:100%;max-height:210px;object-fit:cover}
.ntkpromo-body{padding:16px 18px 20px;text-align:center}
.ntkpromo-body h3{margin:0 0 8px;color:var(--purple-d,#4b2a77);font-size:1.2em}
.ntkpromo-body p{margin:0 0 14px;color:#444;font-size:.95em;line-height:1.5}
.ntkpromo-btn{display:inline-block;background:linear-gradient(135deg,#7b2ff7,#4b2a77);
  color:#fff!important;font-weight:700;padding:11px 26px;border-radius:24px;
  text-decoration:none;box-shadow:0 4px 14px rgba(75,42,119,.4)}
.ntkpromo-btn:active{transform:scale(.97)}
.ntkpromo-x{position:absolute;top:8px;right:8px;width:32px;height:32px;
  border:none;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;
  font-size:20px;line-height:1;cursor:pointer;z-index:2}
@keyframes ntkpFade{from{opacity:0}}
@keyframes ntkpPop{from{transform:scale(.85);opacity:0}}
@media (max-width:480px){.ntkpromo{max-width:340px}.ntkpromo img{max-height:170px}}

/* 🔆 prefill होने पर "देखें" button को कुछ सेकंड उभारें (user को इशारा) */
@keyframes ntkGlow{0%,100%{box-shadow:0 0 0 0 rgba(123,47,247,.5)}50%{box-shadow:0 0 0 8px rgba(123,47,247,0)}}
.glow{animation:ntkGlow 1s ease-in-out 3}

/* 🎬 वीडियो grid + player-modal (courses पेज; app भी यही) */
.vidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:14px}
.vidcard{cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .15s}
.vidcard:hover{transform:translateY(-3px)}
.vidthumb{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.vidthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vidplay{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;
  background:rgba(200,20,20,.92);color:#fff;font-size:22px;display:flex;align-items:center;
  justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.4)}
.vidcap{padding:10px 12px;font-weight:700;font-size:13.5px;color:var(--purple-d);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vidmodal{position:fixed;inset:0;background:rgba(20,10,35,.8);z-index:99992;display:none;
  align-items:center;justify-content:center;padding:16px}
.vidmodal.on{display:flex}
.vidbox{position:relative;width:100%;max-width:820px}
.vidframe{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.vidframe iframe{width:100%;height:100%;border:0}
.vidttl{color:#fff;text-align:center;font-weight:700;margin-top:10px;font-size:15px}
.vidx{position:absolute;top:-14px;right:-6px;width:34px;height:34px;border:none;border-radius:50%;
  background:#fff;color:#333;font-size:17px;cursor:pointer;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.4)}

/* 🛡 NTK-overflow-guard (17-जुलाई): किसी भी भाषा/content में पेज अगल-बगल कभी न फैले।
   overflow-x:clip = बाहर झाँकता content कटे (scroll-trap नहीं बनता); लंबे शब्द टूटें। */
html,body{overflow-x:clip;max-width:100%}
body{word-break:break-word;overflow-wrap:anywhere}
input,select,textarea,table,pre,code{max-width:100%}

/* 🔗 fat-footer (AstroSage-शैली internal-linking — हर पेज से हर पेज तक, SEO) */
.fatlinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;
  padding:20px 0 10px;border-bottom:1px solid rgba(74,45,110,.28);margin-bottom:16px}
/* light-lavender footer पर गहरे रंग ही पढ़े जाते हैं (पहले pale थे → छिप रहे थे) */
.fatlinks h5,.fatlinks h3{color:#5a3900;font-size:13.5px;margin:0 0 8px;font-weight:800;
  border-bottom:2px solid #d99a00;display:inline-block;padding-bottom:2px}
.fatlinks a{display:block;color:#3d2270;font-size:13px;font-weight:600;padding:3px 0;text-decoration:none}
.fatlinks a:hover{color:#1f0f42;text-decoration:underline}
/* 📱 mobile: 2 columns अगल-बगल — ख़ाली जगह नहीं, page फैलेगा भी नहीं (fixed 1fr 1fr) */
@media(max-width:700px){
  .fatlinks{grid-template-columns:1fr 1fr;gap:12px 14px;padding:14px 0 8px}
  .fatlinks h5,.fatlinks h3{font-size:12.5px}
  .fatlinks a{font-size:12px;padding:2.5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}


/* 🔗 संबंधित-उपकरण strip (item-3: content-पेजों के नीचे internal-linking) */
.reltools{margin:16px 0 4px;background:#fff;border:1px solid #e3d8f5;border-radius:14px;padding:12px 14px}
.reltools .relh{font-weight:800;color:var(--purple-d,#4b2a77);font-size:14.5px;margin-bottom:9px}
.reltools .relx{display:flex;flex-wrap:wrap;gap:8px}
.reltools .relx a{background:var(--bg3,#f6effc);border:1px solid #e3d8f5;border-radius:20px;
  padding:6px 13px;font-size:13px;color:var(--purple-d,#4b2a77);font-weight:600;text-decoration:none;
  white-space:nowrap;transition:border-color .15s}
.reltools .relx a:hover{border-color:#d99a00;background:#fffbea}


/* ===== 🎨 modern nav v2: glassmorphism + pill + mega-menu (2025 look) ===== */
header{backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid rgba(122,77,0,.14);box-shadow:0 4px 22px rgba(75,42,119,.10)}
.nav{gap:5px;min-height:60px}
.menu{gap:2px;flex-wrap:nowrap;align-items:center}
.menu .mitem>a,.menu>a.nav-cta{padding:9px 13px !important;font-size:13.5px;font-weight:700;
  border-radius:999px;transition:background .18s,color .18s}
.menu a::after{display:none !important}
.menu .mitem>a:hover,.menu .mitem.has-sub:hover>a,.menu .mitem>a.active{
  background:rgba(106,63,160,.13);color:var(--purple-d) !important}
.megamenu{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:300px;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);
  border:1px solid #eadcfa;border-radius:16px;box-shadow:0 16px 46px rgba(75,42,119,.22);
  padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;
  /* 🖱️ cursor नीचे लाते ही menu ग़ायब हो जाता था (नए user इसी में उलझते हैं).
     `visibility` transition-सूची में था ही नहीं → hover टूटते ही उसी क्षण मर
     जाता, opacity का fade दिखता तक नहीं. अब छिपने में **0.35s की मोहलत** —
     हाथ ज़रा डगमगाए तो भी menu खुला रहता है. (खुलने पर मोहलत 0s, नीचे.) */
  transition:opacity .18s,transform .18s,visibility 0s linear .35s;z-index:60}
/* 🌉 अदृश्य पुल — `top:calc(100% + 4px)` से item और menu के बीच 4px का ख़ाली
   अंतराल बनता है; cursor वहाँ पहुँचते ही hover टूट जाता था. यह पट्टी उस जगह
   को ढक देती है, इसलिए रास्ता कभी नहीं टूटता (दिखती कुछ नहीं). */
.megamenu::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
.megamenu.one{grid-template-columns:1fr;min-width:212px}
.menu .mitem.has-sub:hover .megamenu,
.menu .mitem.has-sub:focus-within .megamenu{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition:opacity .18s,transform .18s,visibility 0s linear 0s}
.megamenu a{display:flex;align-items:center;gap:9px;padding:9px 12px !important;border-radius:10px;
  font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap}
.megamenu a:hover{background:linear-gradient(135deg,#f4ecff,#fff6e6);color:var(--purple-d) !important;padding-left:12px !important}
.megamenu a .mi{font-size:17px;width:22px;text-align:center;flex:none}
.nav-cta{display:inline-flex !important;align-items:center;gap:5px;
  background:linear-gradient(135deg,#f6cf3f,#e0a800);color:#4a2d00 !important;font-weight:800;
  box-shadow:0 4px 14px rgba(224,168,0,.42);white-space:nowrap;margin-left:4px;
  transition:transform .15s,box-shadow .15s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(224,168,0,.58);
  background:linear-gradient(135deg,#f4c430,#d99a00) !important;color:#4a2d00 !important}
@media(max-width:1040px){ .menu .mitem>a{padding:8px 9px !important;font-size:12.5px} }
@media(max-width:860px){
  .menu{background:rgba(255,255,255,.98) !important;backdrop-filter:blur(18px);padding:10px}
  /* 📱 मोबाइल: dropdown अपने-आप न खुलें — tap पर खुलें (वरना पूरी सूची विशाल हो
     जाती थी और नीचे का पेज ढँक जाता था)। .open class app.js लगाता है। */
  .menu{max-height:calc(100vh - 70px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .megamenu{position:static;transform:none !important;display:none;opacity:1;visibility:visible;
    box-shadow:none;border:0;border-left:2px solid #e3d8f5;border-radius:0;margin:2px 0 8px 16px;
    padding:2px 0;min-width:0;background:transparent;grid-template-columns:1fr}
  .menu .mitem.has-sub.open>.megamenu{display:grid}
  .menu .mitem.has-sub:hover .megamenu{transform:none !important}
  /* मोबाइल पर hover होता ही नहीं (tap से खुलता है) — पुल यहाँ बेकार है और
     ऊपर वाली कड़ी पर अनचाहा tap-क्षेत्र बना देता, इसलिए रद्द. */
  .megamenu::before{display:none}
  .menu .mitem.has-sub>a::after{transition:transform .18s}
  .menu .mitem.has-sub.open>a::after{transform:rotate(180deg)}
  .menu .mitem.has-sub.open>a{background:rgba(106,63,160,.13)}
  .megamenu a{padding:9px 12px !important}
  .nav-cta{margin:10px 0 4px;justify-content:center;padding:11px 16px !important}
}

/* has-sub caret (सब dropdown-parent पर एकसमान ▾) */
.menu .mitem.has-sub>a::after{content:"▾";display:inline-block !important;position:static !important;
  left:auto;right:auto;bottom:auto;transform:none !important;background:none !important;
  width:auto !important;height:auto !important;margin-left:5px;font-size:9px;opacity:.55;vertical-align:middle}
@media(max-width:860px){ .menu .mitem.has-sub>a::after{float:right} }


/* 🕉 मंत्र/चालीसा का मूल पाठ — पद्य-अनुकूल (पंक्ति-विन्यास सुरक्षित) */
.mnpaath{font-size:16px;line-height:2.05;color:#2a1a45;white-space:pre-wrap;
  background:linear-gradient(180deg,#fffdf6,#fff);border:1px solid #f0e3c8;
  border-radius:12px;padding:16px 18px;font-weight:500}
.mnpaath p{margin:0 0 10px}
.mnpaath b,.mnpaath strong{color:var(--purple-d,#4b2a77)}
@media(max-width:600px){ .mnpaath{font-size:15px;line-height:1.95;padding:13px 14px} }


/* ===== 📱 modern mobile nav v3 — पूरी-चौड़ाई rows, बाएँ-संरेखित, icon+caret =====
   (पहले desktop का justify-content:space-evenly column-layout पर लगकर items को
    बीच में और दूर-दूर कर देता था — यहाँ उसे override किया) */
@media(max-width:860px){
  .menu{justify-content:flex-start !important;gap:0 !important;padding:8px 8px 12px !important;
    border-radius:0 0 18px 18px;box-shadow:0 12px 30px rgba(75,42,119,.18)}
  .menu .mitem{width:100%}
  .menu .mitem+.mitem>a{border-top:1px solid #f3edfc}
  .menu .mitem>a{display:flex !important;align-items:center;gap:10px;width:100%;
    text-align:left !important;justify-content:flex-start;
    padding:13px 14px !important;font-size:15px !important;font-weight:700;
    border-radius:12px;letter-spacing:0}
  /* top-level icon (desktop पर छिपा) */
  .menu .mitem>a .ti{display:inline-flex !important;width:26px;justify-content:center;
    font-size:17px;flex:none}
  /* caret दायें किनारे पर */
  .menu .mitem.has-sub>a::after{margin-left:auto !important;float:none !important;
    font-size:11px;opacity:.45}
  .menu .mitem.has-sub.open>a{background:linear-gradient(135deg,#f4ecff,#fff6e6)}
  /* sub-items: indent + बाईं रेखा */
  .megamenu{margin:0 0 8px 20px !important;border-left:2px solid #ebe0fb !important;
    padding:2px 0 2px 4px !important}
  .megamenu a{padding:11px 12px !important;font-size:14px !important;border-radius:10px}
  .megamenu a .mi{width:24px;font-size:16px}
  /* CTA पूरी चौड़ाई */
  .nav-cta{width:100%;margin:12px 0 2px !important;justify-content:center;
    padding:13px 16px !important;font-size:15px !important}
}
/* top-level icon desktop-bar पर नहीं (bar सँकरी रहे) */
.menu .mitem>a .ti{display:none}


/* 🛡 brand-shrink guard — कोई भाषा लंबे menu-labels दे तो भी logo न सिकुड़े/ग़ायब हो
   (flex-item होने से brand 0 चौड़ाई तक दब जाता था; अब कभी नहीं) */
.nav .brand{flex:0 0 auto !important;min-width:auto}
.nav .brand img,.brandimg{min-width:104px}
.nav .hright{flex:0 0 auto}
/* menu खुद सिकुड़े, brand नहीं।
   ⚠️ यहाँ पहले overflow-x:auto था — उससे scroll-container बन जाता और CSS-नियम के
   अनुसार overflow-y भी clip हो जाता → hover-dropdown (megamenu) कट जाते थे।
   अब बिना overflow के: items सिकुड़ें + लंबा label ellipsis हो। */
.menu{min-width:0;overflow:visible}
@media(min-width:861px){
  .menu .mitem{min-width:0}
  .menu .mitem>a{white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
}

/* 🃏 आज का टैरो कार्ड — दैनिक-राशिफल खंड के नीचे का CTA।
   यहाँ रखने का कारण: टैरो रोज़ लौटने वाला उपयोगकर्ता लाता है, इसलिए वह
   दैनिक-राशिफल के साथ बैठता है — 21-tile वाली strip में दब जाता। */
.tarotcta{display:flex;align-items:center;gap:16px;max-width:560px;margin:26px auto 0;
  padding:15px 20px;border-radius:18px;text-decoration:none;
  background:linear-gradient(135deg,#fff,#fff4e0);border:1.5px solid var(--gold-b);
  box-shadow:0 6px 18px rgba(106,63,160,.12);transition:transform .18s,box-shadow .18s}
.tarotcta:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(106,63,160,.2)}
.tarotcta .tcem{font-size:38px;line-height:1;flex:none}
.tarotcta .tctx{flex:1;min-width:0}
.tarotcta .tctx b{display:block;color:var(--purple-d);font-size:16px;line-height:1.35}
.tarotcta .tctx small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.5}
.tarotcta .tcgo{font-size:22px;color:#8a5a00;flex:none}
@media(max-width:600px){
  .tarotcta{gap:12px;padding:13px 15px;margin-top:20px}
  .tarotcta .tcem{font-size:30px}
  .tarotcta .tctx b{font-size:14.5px}
  .tarotcta .tctx small{font-size:11.5px}
}

/* 🧭 मुफ़्त-सेवाएँ — जान-बूझकर सिर्फ़ 10 tile, 5 प्रति पंक्ति।
   सफ़र: 21 सपाट → 6 सामने + 4 tab-श्रेणियाँ → अब 10।
   tab हटा दिए क्योंकि 10 के लिए उनकी ज़रूरत ही नहीं थी; कम चीज़ें = साफ़ दिखावट।
   ⚠️ हटाए गए 11 का लिंक home से गया नहीं — वे nav-megamenu/footer में हैं जो हर
      पेज की HTML में server-rendered है। इसलिए छँटाई से SEO पर असर शून्य।
   गिनती 12 जान-बूझकर: 6·4·3·2 — सबसे पूरी कटती है → किसी भी चौड़ाई पर पंक्ति के
   अंत में गड्ढा नहीं (desktop 6×2, tablet 4×3, फ़ोन 2×6)। */
.tiles-lean{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:1000px){ .tiles-lean{grid-template-columns:repeat(4,1fr)} }
/* छोटे, खड़े tile — पहले icon बाएँ + पाठ दाएँ था, वह चौड़ाई खा जाता था */
.tiles-lean>.tile{flex-direction:column;text-align:center;gap:7px;
  padding:13px 8px;border-radius:13px;
  background:linear-gradient(135deg,#fff,#fff6e4);border-color:#e8c860}
.tiles-lean>.tile .tic{font-size:25px}
.tiles-lean>.tile b{font-size:12.8px;line-height:1.3}
/* 📞 परामर्श — यह SEO नहीं, कमाई वाला लिंक है, इसलिए अलग दिखना चाहिए।
   ⚠️ पहले गहरा बैंगनी ब्लॉक था — वह बाक़ी क्रीम tiles के बीच *कटा हुआ* लगता था,
   जैसे किसी और जगह से चिपका दिया हो। अब ब्रांड का सुनहरा रंग: अलग तो दिखता है
   पर परिवार का ही सदस्य लगता है। पाठ गहरा-बैंगनी रखा — सोने पर सफ़ेद नहीं पढ़ाता। */
.tiles-lean>.tile.tile-cta{background:linear-gradient(135deg,#ffd980,#f5b942);
  border-color:#e0a020;box-shadow:0 5px 18px rgba(224,150,10,.32)}
.tiles-lean>.tile.tile-cta b{color:#4b2a77;font-weight:800}
.tiles-lean>.tile.tile-cta:hover{box-shadow:0 11px 28px rgba(224,150,10,.45);
  border-color:#c98a10}

@media(max-width:600px){
  /* फ़ोन पर 2 columns = 5 पूरी पंक्तियाँ, कोई अधूरी पंक्ति नहीं।
     3 करने पर 3+3+3+1 बनता और आख़िर में दो ख़ाली खाने दिखते। */
  .tiles-lean{grid-template-columns:repeat(2,1fr);gap:9px}
  .tiles-lean>.tile{padding:12px 7px}
  .tiles-lean>.tile .tic{font-size:23px}
  .tiles-lean>.tile b{font-size:12.2px}
}

/* 🃏 आज का टैरो कार्ड — दैनिक-राशिफल खंड के नीचे का CTA।
   टैरो tile-सूची में नहीं है, पर home से ग़ायब भी नहीं — उसकी जगह यही है,
   क्योंकि उसकी ताक़त *रोज़ लौटने वाला* उपयोगकर्ता है (दैनिक राशिफल की तरह)। */
.tarotcta{display:flex;align-items:center;gap:16px;max-width:560px;margin:26px auto 0;
  padding:15px 20px;border-radius:18px;text-decoration:none;
  background:linear-gradient(135deg,#fff,#fff4e0);border:1.5px solid var(--gold-b);
  box-shadow:0 6px 18px rgba(106,63,160,.12);transition:transform .18s,box-shadow .18s}
.tarotcta:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(106,63,160,.2)}
.tarotcta .tcem{font-size:38px;line-height:1;flex:none}
.tarotcta .tctx{flex:1;min-width:0}
.tarotcta .tctx b{display:block;color:var(--purple-d);font-size:16px;line-height:1.35}
.tarotcta .tctx small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.5}
.tarotcta .tcgo{font-size:22px;color:#8a5a00;flex:none}

/* 📱 किनारों की ख़ाली जगह — फ़ोन पर `.wrap{padding:0 18px}` दोनों ओर 36px खा रहा था
   (375px स्क्रीन का ~10%)।
   ⚠️ यह पूरी site पर लगता है — इसीलिए घटाया कम (18→12), हटाया नहीं; बिल्कुल
   0 करने पर पाठ स्क्रीन के किनारे चिपक जाता और पढ़ने में बुरा लगता।
   बदलने के बाद 14 पेज 375px पर जाँचे थे — कहीं बग़ल-खिंचाव नहीं। */
@media(max-width:600px){
  .wrap{padding:0 12px}
  .tarotcta{gap:12px;padding:13px 15px;margin-top:20px}
  .tarotcta .tcem{font-size:30px}
  .tarotcta .tctx b{font-size:14.5px}
  .tarotcta .tctx small{font-size:11.5px}
}
/* 🧭 Header-पुनर्गठन (AstroSage-शैली):
   ऊपर की पट्टी = [ ख़ाली | 🔍 खोज (बीचों-बीच) | CTA + login (दाएँ) ]
   नीचे = logo + पूरा menu + भाषा-चयन।
   grid 1fr/minmax/1fr इसलिए — खोज सचमुच केंद्र में रहे, चाहे दायाँ समूह कितना भी
   चौड़ा हो (margin:auto वाला तरीक़ा दाएँ समूह के बराबर खिसक जाता है)। */
.search-strip .wrap{display:grid;grid-template-columns:1fr minmax(300px,560px) 1fr;
  align-items:center;gap:10px}
.search-strip .sform{grid-column:2;width:100%;max-width:none;margin:0}
.search-strip .stripr{grid-column:3;justify-self:end;display:flex;align-items:center;
  gap:10px;position:relative}   /* position — logged-in dropdown इसी के नीचे खुलता है */
.search-strip .nav-cta{margin:0;padding:8px 13px !important;font-size:13px;flex:none}
.search-strip .hlogin{flex:none;padding:8px 16px}

/* 🖥️ desktop: menu के अंदर वाला CTA छिपाओ — /api/menu का JS-render उसे दोबारा
   जोड़ता है (mobile-hamburger के लिए जान-बूझकर, वहाँ चाहिए)। base-नियम में
   display:inline-flex !important है, इसलिए यहाँ भी !important अनिवार्य। */
@media(min-width:861px){
  .menu .nav-cta{display:none !important}
}

/* 📱 फ़ोन (user का चुनाव: पुराना compact रूप) — strip में केवल खोज + login एक
   पंक्ति में; CTA strip से ग़ायब (वह hamburger-menu के भीतर मिलता है)। */
@media(max-width:860px){
  .search-strip .wrap{display:flex;gap:8px}
  .search-strip .sform{flex:1 1 auto;min-width:0}
  .search-strip .stripr{flex:none}
  .search-strip .nav-cta{display:none !important}
  .search-strip .hlogin{padding:8px 13px;font-size:13.5px}
}

/* चौड़ी-लिपि भाषाएँ (ta/bn/or/gu): CTA nav से हटने पर menu सामान्य आकार में
   ≥1200px पर समा जाता है। 861–1199 पर menu पूरी-चौड़ाई दूसरी पंक्ति में। */
@media(min-width:861px) and (max-width:1199px){
  :is(html[lang="ta"],html[lang="bn"],html[lang="or"],html[lang="gu"]) .nav{flex-wrap:wrap;row-gap:0}
  :is(html[lang="ta"],html[lang="bn"],html[lang="or"],html[lang="gu"]) .menu{
    order:5;flex:1 1 100%;justify-content:center;flex-wrap:wrap;
    border-top:1px solid rgba(106,63,160,.12);margin-top:2px}
  :is(html[lang="ta"],html[lang="bn"],html[lang="or"],html[lang="gu"]) .menu .mitem>a{padding:13px 7px}
  :is(html[lang="ta"],html[lang="bn"],html[lang="or"],html[lang="gu"]) .megamenu{z-index:320}
}

/* 🎨 दिखावट-सुधार (user):
   • CTA stylish — सोने का gradient + हल्की चमक-रेखा + छाया; hover पर उठे
   • login = CTA के बराबर ऊँचाई/रूप (सफ़ेद, सुनहरी border) — जोड़ी जैसे लगें
   • menu-items के बीच फैलाव कम — hi/en/mr में padding बढ़ाकर सटा हुआ केंद्र-गुच्छा
     (चौड़ी-लिपि भाषाओं की paddings जान-बूझकर पतली ही — वरना 1200–1279 पर फिर कटतीं) */
.search-strip .nav-cta{
  background:linear-gradient(160deg,#ffe08a 0%,#f5b942 55%,#e8a51f 100%);
  color:#4b2a77;border:1px solid #d99a12;border-radius:22px;
  padding:9px 18px !important;font-size:13px;font-weight:800;letter-spacing:.2px;
  box-shadow:0 4px 14px rgba(224,150,10,.35), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .16s, box-shadow .16s}
.search-strip .nav-cta:hover{transform:translateY(-2px);
  box-shadow:0 9px 22px rgba(224,150,10,.5), inset 0 1px 0 rgba(255,255,255,.55)}
.search-strip .hlogin{
  background:#fff;color:#4b2a77;border:1px solid #d99a12;border-radius:22px;
  padding:9px 18px;font-size:13px;font-weight:800;line-height:normal;
  box-shadow:0 3px 10px rgba(106,63,160,.15)}
.search-strip .hlogin:hover{background:#fff8e8}
@media(min-width:861px){
  :is(html[lang="hi"],html[lang="en"],html[lang="mr"]) .menu{gap:34px}
  :is(html[lang="hi"],html[lang="en"],html[lang="mr"]) .menu .mitem>a{padding:20px 6px}
}
/* 📱 फ़ोन-strip की कसावट — input सिकुड़ सके (min-width:0) वरना "खोजें"-बटन पिचक
   जाता था और login के ऊपर चढ़ता था (user की photo-4) */
@media(max-width:860px){
  .search-strip .sform{width:auto;flex:1 1 auto;min-width:0}
  .search-strip .sform input{min-width:0;font-size:13px;padding:9px 12px}
  .search-strip .sform button{flex:none;white-space:nowrap;padding:0 13px}
  .search-strip .hlogin{flex:none;padding:8px 13px;font-size:13px}
}

/* CTA व login की जोड़ी — दोनों की ऊँचाई एक (base .btn का बड़ा box login को 46px
   कर देता था; height तय करने से दोनों 38px) */
.search-strip .nav-cta,.search-strip .hlogin{
  height:38px;min-height:0;display:inline-flex;align-items:center;box-sizing:border-box;
  padding:0 18px !important}
  /* ⚠️ min-height:0 अनिवार्य — base .btn का min-height:46px वरना height:38 को हरा देता
     (min-height सदा height से जीतता है; login इसी से CTA से ऊँचा दिख रहा था) */

/* logo थोड़ा दाएँ (user) — बायाँ किनारा सूना न दिखे; hright ख़ाली हो तो सिकुड़े */
.hright:empty{display:none}
@media(min-width:861px){ header .brand{margin-left:26px} }
@media(max-width:860px){ header .brand{margin-left:0} }
/* भाषा-चयन थोड़ा बाएँ (user) — logo के 26px की symmetry में */
@media(min-width:861px){ header .hright{margin-right:26px} }

/* ♿ Lighthouse-audit के बाद तीन नापे-हुए सुधार (21-जुलाई; a11y 86 · SEO 92) */

/* 1) पुराना (कटा) मूल्य #999 = 2.85:1 — WCAG को 4.5 चाहिए। #6e6e6e = 5.1:1,
      फिर भी मुख्य मूल्य से हल्का दिखता है (यही मक़सद था)। */
.hfcard .pr s{color:#6e6e6e}

/* 2) रेटिंग-तारे: सुनहरा #e8b923 सफ़ेद पर सिर्फ़ 1.84:1 था। तारों को गहरा-भूरा
      करने से सुंदरता जाती, इसलिए दूसरा रास्ता — उन्हें **बड़ा + bold** किया।
      WCAG में 18.66px+bold = "बड़ा पाठ" → तब 3:1 चाहिए, और #b8860b = 3.25:1 ✓
      (बड़े तारे testimonial-कार्ड में दिखने में भी बेहतर लगते हैं)। */
.tcard .tstars{color:#b8860b;font-size:20px;font-weight:700}

/* 3) ☰ बटन 22px चौड़ा था — Lighthouse को 24px+ चाहिए (उँगली को 44px)।
      यह SEO-अंक भी काटता था ("tap targets"). अब 44×44 का पूरा क्षेत्र। */
.hamb{min-width:44px;min-height:44px;line-height:1;
  display:none;align-items:center;justify-content:center}
@media(max-width:860px){ .hamb{display:inline-flex} }

/* ↩️ हर पन्ने का «वापस» (app.js का ntkBackBtn इसे header के ठीक बाद डालता है).
   header के नीचे चिपका रहता है ताकि scroll करने पर भी हाथ की पहुँच में रहे —
   मोबाइल पर लौटने का यही एकमात्र दृश्य रास्ता है. */
.ntkback{display:inline-flex;align-items:center;gap:4px;margin:9px 0 0 14px;
  padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;
  color:var(--purple-d);background:rgba(255,255,255,.92);border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(75,42,119,.10);text-decoration:none;
  transition:background .18s,transform .18s}
.ntkback:hover{background:#f4ecff;transform:translateX(-2px)}
@media(max-width:860px){ .ntkback{margin:8px 0 0 10px;padding:7px 15px;font-size:13.5px} }
@media print{ .ntkback{display:none !important} }