/* Divya Granth Panchang: green and gold, Devanagari first, phone first. */
:root{--pg-bg:#0c231d;--pg-card:#143a2f;--pg-card2:#1b4a3c;--pg-line:#e3c28a33;--pg-gold:#e9c88c;--pg-gold2:#c99d5c;--pg-cream:#f8ecd2;--pg-ink:#f3e9d2;--pg-mute:#b9c9bc;--pg-red:#e07a5f;--pg-amber:#e9b44c;--pg-green:#7fcf9a;--pg-sky:#7fb3d5}
*{box-sizing:border-box}
html{background:var(--pg-bg)}
body.pgBody{margin:0;min-height:100vh;color:var(--pg-ink);font-family:'Noto Sans Devanagari','DM Sans',system-ui,-apple-system,sans-serif;
 background:radial-gradient(ellipse 120% 60% at 50% -10%,#2f6150 0%,#163a30 45%,#0b211b 100%) fixed;padding-bottom:calc(30px + env(safe-area-inset-bottom))}
a{color:var(--pg-gold)}
button,select,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}

.pgHeader{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;
 padding:calc(10px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));
 background:linear-gradient(180deg,#0f2b23f2,#0f2b23d9);border-bottom:1px solid var(--pg-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pgBack{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--pg-line);border-radius:14px;text-decoration:none;font-size:22px;color:var(--pg-gold);background:#ffffff08}
.pgBrand{text-align:center}.pgBrand strong{display:block;font:500 22px Georgia,'Noto Serif Devanagari',serif;color:var(--pg-gold)}
.pgBrand small{font-size:12px;letter-spacing:1px;color:var(--pg-mute)}
.pgListen{border:1px solid #e9c88c66;background:#e9c88c1a;color:var(--pg-cream);border-radius:999px;padding:10px 14px;min-height:44px;font-weight:700}

.pgMain{max-width:980px;margin:0 auto;padding:16px}
.pgH2{margin:28px 4px 12px;font:600 20px 'Noto Serif Devanagari',Georgia,serif;color:var(--pg-gold);display:flex;align-items:center;gap:10px}
.pgH2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--pg-line),transparent)}

/* ---------- hero ---------- */
.pgHero{position:relative;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:24px 20px;border-radius:26px;overflow:hidden;
 background:radial-gradient(circle at 85% 30%,#3c7a62 0%,#1d4a3c 40%,#123329 100%);border:1px solid var(--pg-line);
 box-shadow:0 2px 0 #ffffff14 inset,0 30px 50px -20px #000c,0 0 0 1px #00000040}
.pgHero::before{content:'ॐ';position:absolute;right:-10px;bottom:-40px;font:200px 'Noto Serif Devanagari',serif;color:#ffffff07;pointer-events:none}
.pgKicker{margin:0;font-size:13px;letter-spacing:.5px;color:var(--pg-gold)}
.pgHero h1{margin:6px 0 2px;font:600 clamp(34px,8vw,54px)/1.15 'Noto Serif Devanagari',Georgia,serif;color:var(--pg-cream);text-shadow:0 2px 10px #0006}
.pgPaksha{margin:0;font-size:17px;color:#f1d9a8}
.pgDate{margin:8px 0 0;font-size:15px;color:var(--pg-mute)}
.pgFest{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pgFest span{padding:6px 11px;border-radius:999px;background:linear-gradient(135deg,#f3d79f,#cf9f5b);color:#33240f;font-weight:700;font-size:13.5px;box-shadow:0 3px 0 #8d6630,0 6px 14px -6px #000a}
.pgMoonWrap{text-align:center;color:var(--pg-mute);font-size:12.5px}
.pgMoon{width:clamp(92px,24vw,128px);height:auto;filter:drop-shadow(0 0 22px #f5e6b855) drop-shadow(0 8px 16px #000a)}

/* ---------- controls ---------- */
.pgControls{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:end;margin:16px 0 4px}
.pgDateNav,.pgPlace{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.pgDateNav>button:not(.pgChip){width:44px;height:44px;border-radius:14px;border:1px solid var(--pg-line);background:var(--pg-card);color:var(--pg-gold);font-size:24px;line-height:1}
.pgDateNav input,.pgPlace select{height:44px;border-radius:14px;border:1px solid var(--pg-line);background:var(--pg-cream);color:#1d3b30;padding:0 12px;font-weight:600;max-width:100%}
.pgPlace label{display:grid;gap:4px;font-size:12px;color:var(--pg-mute)}
.pgChip{height:44px;padding:0 14px;border-radius:14px;border:1px solid #e9c88c66;background:#e9c88c1a;color:var(--pg-cream);font-weight:700}

/* ---------- sky arc ---------- */
.pgSky{margin-top:14px;padding:16px;border-radius:24px;background:linear-gradient(180deg,#173f33,#10302a);border:1px solid var(--pg-line);box-shadow:0 20px 40px -24px #000c}
.pgArc{display:block;width:100%;max-width:520px;margin:0 auto}
.pgSkyTimes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.pgSkyTimes div{text-align:center;padding:10px 4px;border-radius:14px;background:#ffffff08}
.pgSkyTimes span{display:block;font-size:12px;color:var(--pg-mute)}
.pgSkyTimes b{display:block;margin-top:3px;font-size:19px;color:var(--pg-cream)}

/* ---------- five limbs ---------- */
.pgAngas{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.pgAnga{position:relative;padding:16px 16px 14px;border-radius:20px;background:linear-gradient(160deg,#fbf0d6,#ecd6a8);color:#2a2316;
 box-shadow:0 2px 0 #fff8 inset,0 -3px 0 #c6a465 inset,0 16px 28px -16px #000c;overflow:hidden}
.pgAnga small{display:block;font-size:12px;letter-spacing:1px;color:#8a6a3a}
.pgAnga b{display:block;margin:4px 0 2px;font:600 23px 'Noto Serif Devanagari',Georgia,serif;color:#25402f}
.pgAnga em{font-style:normal;font-size:13px;color:#5d4c30}
.pgAnga .pgIcon{position:absolute;right:12px;top:10px;font-size:26px;opacity:.85}
.pgBar{height:7px;margin-top:10px;border-radius:9px;background:#00000014;overflow:hidden}
.pgBar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#2f7a57,#c99d5c)}

/* ---------- facts ---------- */
.pgFacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pgFact{padding:13px 14px;border-radius:16px;background:var(--pg-card);border:1px solid var(--pg-line)}
.pgFact span{display:block;font-size:12px;color:var(--pg-mute)}
.pgFact b{display:block;margin-top:3px;font-size:17px;color:var(--pg-cream)}

/* ---------- muhurat ---------- */
.pgMuhurat{padding:16px;border-radius:24px;background:var(--pg-card);border:1px solid var(--pg-line)}
.pgTimeline{position:relative;height:30px;border-radius:12px;background:linear-gradient(90deg,#f2c46b33,#f7e2a855 50%,#f2c46b33);overflow:hidden;box-shadow:0 2px 6px #0006 inset}
.pgTimeline i{position:absolute;top:0;bottom:0;border-radius:6px}
.pgTimeline i.rahu{background:#e07a5fcc}.pgTimeline i.yama{background:#e9b44cb3}.pgTimeline i.gulika{background:#b08bd9b3}.pgTimeline i.abhijit{background:#7fcf9acc}
.pgTimeline i.now{width:3px;background:#fff;box-shadow:0 0 8px #fff}
.pgTimelineLabels{display:flex;justify-content:space-between;font-size:12px;color:var(--pg-mute);margin-top:4px}
.pgMuhuratList{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:12px}
.pgMuhuratList div{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 12px;border-radius:14px;background:#ffffff08;border-left:5px solid var(--c)}
.pgMuhuratList span{font-size:14px;color:var(--pg-ink)}.pgMuhuratList b{font-size:15px;color:var(--pg-cream);white-space:nowrap}
.pgMuhuratList small{display:block;font-size:11.5px;color:var(--pg-mute)}

/* ---------- calendar ---------- */
.pgCalendar{padding:14px;border-radius:24px;background:linear-gradient(180deg,#f9eed6,#eedbb3);color:#2a2316;box-shadow:0 22px 40px -22px #000c}
.pgCalNav{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pgCalNav button{width:42px;height:42px;border-radius:13px;border:0;background:#1f4a3a;color:var(--pg-gold);font-size:22px}
.pgCalNav b{font:600 18px 'Noto Serif Devanagari',serif;color:#24402f;text-align:center}
.pgWeek,.pgGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.pgWeek span{text-align:center;font-size:12px;font-weight:700;color:#8a6a3a;padding:4px 0}
.pgGrid button{position:relative;min-height:64px;padding:5px 2px 4px;border-radius:12px;border:1px solid #c9a76a55;background:#fffaf0;color:#2a2316;display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;overflow:hidden}
.pgGrid button.empty{visibility:hidden}
.pgGrid button b{font-size:15px}
.pgGrid button small{font-size:10px;line-height:1.15;color:#6b5636}
.pgGrid button svg{width:15px;height:15px}
.pgGrid button.today{outline:2px solid #2f7a57;outline-offset:1px}
.pgGrid button.sel{background:#1f4a3a;color:#f8ecd2}.pgGrid button.sel small{color:#e9d5aa}
.pgGrid button.fest::after{content:'';position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:#d9573b;box-shadow:0 0 0 2px #fffaf0}
.pgGrid button.vrat::before{content:'';position:absolute;top:5px;left:5px;width:6px;height:6px;border-radius:50%;background:#2f7a57}
.pgGrid button.loading{opacity:.55}

.pgNote{margin:24px 4px 0;font-size:12.5px;line-height:1.8;color:var(--pg-mute)}
.pgFooter{text-align:center;padding:24px 16px 10px;color:#d9b983;font:16px 'Noto Serif Devanagari',serif}

@media (max-width:560px){
 .pgHero{grid-template-columns:1fr;text-align:left}.pgMoonWrap{position:absolute;right:12px;top:14px;width:84px;font-size:11px;line-height:1.3}
 .pgMoon{width:76px}
 .pgHeroText{padding-right:92px}
 .pgSkyTimes{grid-template-columns:repeat(2,1fr)}
 .pgControls{flex-direction:column;align-items:stretch}.pgDateNav input{flex:1}.pgPlace select{flex:1;width:100%}.pgPlace label{flex:1}
 .pgGrid button{min-height:58px}.pgGrid button small{font-size:9px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.pgYearLink{display:flex;align-items:center;justify-content:center;min-height:48px;margin:0 0 12px;border-radius:16px;background:linear-gradient(135deg,#f3d79f,#cf9f5b);color:#2c2010;font-weight:800;text-decoration:none;box-shadow:0 4px 0 #8d6630}
@media (max-width:900px){input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}}
.pgShare{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin:12px 0 0;border:0;border-radius:16px;background:#25d366;color:#05351a;font:800 17px 'Noto Sans Devanagari',sans-serif;cursor:pointer;box-shadow:0 4px 0 #128c4a}
/* Date and time boxes: iOS Safari gives them a fixed minimum width (they spill off the screen) and
   shows nothing while empty. Keep them inside their column, align the text left, and add an icon. */
html input[type=date],html input[type=time]{-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-width:0;max-width:100%;text-align:left;
 background-repeat:no-repeat;background-position:right 12px center;background-size:22px 22px;padding-right:42px}
html input[type=date]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5a2b' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
html input[type=time]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5a2b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left;min-height:1.4em}
html input[type=date],html input[type=time]{position:relative}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;right:0;top:0;width:44px;height:100%;margin:0;padding:0;cursor:pointer}

/* The day in plain words */
.pgLangRow{display:flex;justify-content:flex-end;margin:0 0 8px}
.pgPlain{margin:12px 0;padding:14px 16px;border-radius:20px;background:linear-gradient(160deg,#fff4dc,#f5dfb3);color:#2c2010;border-left:6px solid #e9b44c}
.pgPlain.good{border-left-color:#3f9a64}.pgPlain.care{border-left-color:#c0573e}
.pgPlain h3{margin:0 0 4px;font-size:19px;color:#5a3a12}
.pgVerdict{margin:0 0 6px;font-weight:800;font-size:17px;line-height:1.5}
.pgPlainFest{margin:0 0 6px;font-weight:700}
.pgPlain ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.pgPlain li{display:flex;gap:10px}.pgPlain li>span{flex:none;font-size:20px}
.pgPlain li b{display:block;font-size:16px}.pgPlain li p{margin:2px 0 0;font-size:15px;line-height:1.55}
.pgReport{background:linear-gradient(135deg,#f3d79f,#cf9f5b)!important;color:#2c2010!important;margin-top:8px}
