/* Layout: sticky top bar; hero pairs the birth form with a live animated zodiac wheel; results flow as full-width editorial sections. Light theme by request. */
:root {
  --bg: #F4F5FA; --surface: #FFFFFF; --ink: #16173B; --ink-2: #474A72; --ink-3: #7A7C9C; --line: #E3E4EF; --line-2: #CDD0E3;
  --gold: #D3971C; --gold-deep: #8C5E05; --gold-soft: #FBF0D8; --gold-softer: #FDF8EC; --indigo: #2A2E7C; --indigo-soft: #ECEDFB;
  --good: #11804E; --good-bg: #E2F4E9; --good-line: #A7DDBF; --bad: #C2352D; --bad-bg: #FCE8E5; --bad-line: #F0B7B1; --warn: #A2680A; --warn-bg: #FDF2DC;
  --c-Sun: #E8701A; --c-Moon: #6F7C99; --c-Mars: #D23A2A; --c-Mercury: #23955A; --c-Jupiter: #C38F0B; --c-Venus: #D2508A; --c-Saturn: #3554CF; --c-Rahu: #4A5267; --c-Ketu: #8B5A3A;
  --f-display: 'Marcellus', 'Iowan Old Style', Georgia, serif;
  --f-body: 'Hind', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --f-dev: 'Tiro Devanagari Sanskrit', 'Hind', serif;
  --shadow: 0 1px 2px rgba(22, 23, 59, .05), 0 10px 30px rgba(22, 23, 59, .07);
  --shadow-lg: 0 2px 4px rgba(22, 23, 59, .05), 0 24px 60px rgba(22, 23, 59, .12);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.6; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
.mono, .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 20px; }
a { color: inherit; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(244, 245, 250, .86); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 34px; height: 34px; }
.brand b { font-family: var(--f-display); font-weight: 400; font-size: 21px; letter-spacing: .01em; }
.brand small { font-family: var(--f-dev); color: var(--gold-deep); font-size: 14px; }
.topnav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.topnav a { text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--ink-2); padding: 6px 11px; border-radius: 8px; white-space: nowrap; }
.topnav a:hover { background: var(--indigo-soft); color: var(--ink); }
.btn-cta { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; background: linear-gradient(135deg, #2A2E7C, #16173B); color: #fff; font-weight: 600; font-size: 15px; padding: 10px 18px; border-radius: 10px; box-shadow: 0 6px 18px rgba(42, 46, 124, .28); transition: transform .2s, box-shadow .2s; white-space: nowrap; }
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(42, 46, 124, .34); }
@media (max-width: 980px) { .topnav { display: none; } .topbar .btn-cta { margin-left: auto; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: 48px 56px; background:
  radial-gradient(900px 500px at 85% 10%, rgba(211, 151, 28, .13), transparent 60%),
  radial-gradient(700px 500px at 0% 100%, rgba(42, 46, 124, .08), transparent 60%), var(--bg); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 40px; align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .wheel-col .wheel { max-width: 440px; margin-inline: auto; } }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.kicker::before { content: ''; width: 26px; height: 1.5px; background: var(--gold); }
.hero h1 { font-family: var(--f-display); font-size: clamp(36px, 5.2vw, 58px); line-height: 1.06; margin: 14px 0 14px; letter-spacing: -.005em; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--gold-deep), var(--gold) 60%, #E8701A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub { font-size: 18px; color: var(--ink-2); max-width: 54ch; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 26px; font-size: 14px; color: var(--ink-2); }
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 16px; height: 16px; color: var(--good); }

.formcard { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 22px; }
.formcard h2 { font-family: var(--f-display); font-size: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; margin-bottom: 14px; }
.formcard h2 small { font-family: var(--f-body); font-size: 13px; color: var(--ink-3); }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.field { display: grid; gap: 5px; position: relative; min-width: 0; }
.field.full { grid-column: 1 / -1; }
@media (max-width: 520px) { form { grid-template-columns: minmax(0, 1fr); } }
label { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
input { font-size: 16px; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 11px; padding: 11px 13px; width: 100%; min-width: 0; transition: border-color .2s, background .2s, box-shadow .2s; }
input:hover { border-color: var(--line-2); }
input:focus { outline: none; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 4px rgba(211, 151, 28, .15); }
.place-meta { font-size: 13px; color: var(--ink-3); min-height: 1.3em; }
.place-meta b { color: var(--good); font-weight: 600; }
.suggest { position: absolute; top: calc(100% - 18px); left: 0; right: 0; z-index: 30; margin: 4px 0 0; padding: 5px; list-style: none; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 290px; overflow: auto; }
.suggest li { padding: 8px 11px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.suggest li small { color: var(--ink-3); text-align: right; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--gold-softer); }
details.coords { grid-column: 1 / -1; border-top: 1px dashed var(--line-2); padding-top: 10px; }
details.coords summary { cursor: pointer; font-size: 14px; color: var(--gold-deep); font-weight: 600; }
details.coords .inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 10px; }
@media (max-width: 520px) { details.coords .inner { grid-template-columns: 1fr 1fr; } }
.small-note { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); }
.btn-ghost { grid-column: 1 / -1; justify-self: start; background: transparent; color: var(--gold-deep); border: 1px solid var(--line-2); font-size: 14px; padding: 7px 12px; border-radius: 9px; cursor: pointer; font-weight: 500; }
.err { grid-column: 1 / -1; color: var(--bad); font-size: 14px; min-height: 1.2em; }
.go { grid-column: 1 / -1; justify-content: center; padding: 14px; font-size: 16.5px; background: linear-gradient(135deg, #E0A425, #C27C08); color: #16173B; box-shadow: 0 8px 22px rgba(194, 124, 8, .32); }
.go:hover { box-shadow: 0 12px 28px rgba(194, 124, 8, .4); }

.wheel-col { position: relative; display: grid; place-items: center; }
.wheel-col::before { content: ''; position: absolute; width: 92%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(211, 151, 28, .18), transparent 65%); filter: blur(10px); }
.wheel { position: relative; width: 100%; max-width: 540px; height: auto; display: block; }
.wheel .halo { transform-origin: 270px 270px; transform-box: view-box; }
.wheel .spinner { transform-origin: 270px 270px; transform-box: view-box; animation: wheelIn 1.8s cubic-bezier(.2, .7, .2, 1) both; }
.wheel .pm { transform-origin: 270px 270px; transform-box: view-box; animation: pmIn .9s cubic-bezier(.2, .8, .3, 1.2) both; animation-delay: calc(900ms + var(--d, 0ms)); }
.wheel-legend { position: relative; margin-top: 8px; font-size: 13px; color: var(--ink-3); text-align: center; }
@keyframes wheelIn { from { transform: rotate(-110deg) scale(.92); } to { transform: none; } }
@keyframes pmIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) { .wheel .halo { animation: spin 140s linear infinite; } }

/* ---------- Sections ---------- */
main section { padding-block: 64px 8px; scroll-margin-top: 72px; }
.sec-head { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: end; margin-bottom: 26px; }
.sec-head .eyebrow { font-family: var(--f-dev); color: var(--gold-deep); font-size: 15px; margin-bottom: 2px; }
.sec-head h2 { font-family: var(--f-display); font-size: clamp(28px, 3.6vw, 38px); line-height: 1.12; }
.sec-head p.lede { color: var(--ink-2); max-width: 62ch; margin-top: 8px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); min-width: 0; }
.example-note { display: flex; gap: 10px; align-items: center; background: var(--gold-softer); border: 1px solid #F0DDB0; border-radius: 12px; padding: 12px 16px; font-size: 15px; margin-top: 28px; }
.example-note svg { width: 20px; height: 20px; color: var(--gold-deep); flex: none; }

/* Profile */
.profile { padding: 28px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; margin-top: 28px; position: relative; overflow: hidden; }
.profile::after { content: ''; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; border: 1px dashed var(--line-2); }
@media (max-width: 860px) { .profile { grid-template-columns: minmax(0, 1fr); } }
.profile .who .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.profile h2 { font-family: var(--f-display); font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin: 6px 0 8px; }
.birthline { color: var(--ink-2); font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.birthline span { display: inline-flex; gap: 6px; align-items: center; }
.birthline svg { width: 15px; height: 15px; color: var(--ink-3); }
.lagna-trait { margin-top: 18px; display: flex; gap: 14px; align-items: center; padding: 14px; background: var(--indigo-soft); border-radius: 12px; }
.lagna-trait .glyph { width: 46px; height: 46px; flex: none; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--indigo); }
.lagna-trait .glyph svg { width: 28px; height: 28px; }
.lagna-trait p { font-size: 15px; color: var(--ink-2); }
.lagna-trait b { color: var(--ink); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; z-index: 1; }
.fact { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; gap: 12px; align-items: flex-start; background: #fff; }
.fact .ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--gold-softer); color: var(--gold-deep); }
.fact .ic svg { width: 26px; height: 26px; }
.fact .ic svg.gimg { width: 36px; height: 36px; }
.fact dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.fact dd { margin: 1px 0 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.fact dd span { display: block; font-weight: 400; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 460px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* Highlights */
.balance { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.balance .bar { flex: 1; min-width: 200px; height: 12px; border-radius: 6px; background: var(--bad-bg); overflow: hidden; display: flex; }
.balance .bar i { display: block; height: 100%; background: linear-gradient(90deg, #17A262, #11804E); border-radius: 6px 0 0 6px; }
.balance .lbl { font-size: 14px; font-weight: 600; }
.balance .lbl.g { color: var(--good); } .balance .lbl.b { color: var(--bad); }
.hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
@media (max-width: 860px) { .hl-grid { grid-template-columns: minmax(0, 1fr); } }
.hl-col { padding: 22px; }
.hl-col.good { background: linear-gradient(180deg, var(--good-bg), #fff 140px); border-color: var(--good-line); }
.hl-col.bad { background: linear-gradient(180deg, var(--bad-bg), #fff 140px); border-color: var(--bad-line); }
.hl-col h3 { font-family: var(--f-display); font-size: 24px; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hl-col h3 .badge { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.hl-col.good h3 .badge { background: var(--good); } .hl-col.bad h3 .badge { background: var(--bad); }
.hl-col h3 .badge svg { width: 18px; height: 18px; }
.hl-col h3 small { font-family: var(--f-mono); font-size: 14px; color: var(--ink-3); margin-left: auto; }
.hl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hl-list li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; transition: transform .2s, box-shadow .2s; }
.hl-list li:hover { transform: translateX(3px); box-shadow: var(--shadow); }
.hl-list .ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; }
.hl-col.good .hl-list .ic { background: var(--good-bg); color: var(--good); }
.hl-col.bad .hl-list .ic { background: var(--bad-bg); color: var(--bad); }
.hl-list .ic svg { width: 22px; height: 22px; }
.hl-list .ic svg.gimg { width: 34px; height: 34px; }
.hl-list b { display: block; font-size: 15.5px; }
.hl-list p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.empty { color: var(--ink-3); font-size: 15px; padding: 10px 0; }

/* Charts */
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 4px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.seg button { border: 0; background: transparent; color: var(--ink-2); padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 14.5px; font-weight: 500; transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .charts { grid-template-columns: minmax(0, 1fr); } }
.chart { padding: 14px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart h3 { font-family: var(--f-display); font-size: 20px; margin: 12px 4px 2px; }
.chart p { font-size: 14px; color: var(--ink-2); margin: 0 4px 4px; }
svg .ch-bg { fill: var(--gold-softer); }
svg .frame { fill: none; stroke: var(--gold-deep); stroke-width: 2; }
svg .ln { fill: none; stroke: #D9B66B; stroke-width: 1.2; }
svg .draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.drawing svg .draw { animation: draw 1.4s cubic-bezier(.4, 0, .2, 1) both; }
.drawing svg .fadein { animation: fadein .6s ease both; animation-delay: calc(700ms + var(--d, 0ms)); }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
svg .lagna-fill { fill: #F7E1AE; }
svg .cell { fill: #fff; stroke: #D9B66B; stroke-width: 1.2; }
svg .sn { fill: var(--ink-3); font-family: var(--f-mono); font-size: 11px; }
svg .pl { font-family: var(--f-body); font-size: 13px; font-weight: 700; }
svg .pl .r { font-size: 9.5px; fill: var(--bad); }
svg .asc { fill: var(--bad); font-family: var(--f-body); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
svg .ascline { stroke: var(--bad); stroke-width: 1.8; }
svg .ctitle { fill: var(--ink); font-family: var(--f-display); font-size: 21px; }
svg .csub { fill: var(--ink-3); font-family: var(--f-body); font-size: 12.5px; }
.chart-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; font-size: 13.5px; color: var(--ink-2); }
.chart-key span { display: inline-flex; align-items: center; gap: 5px; }
.chart-key b { font-weight: 700; }

/* Graha cards */
.graha-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .graha-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .graha-grid { grid-template-columns: minmax(0, 1fr); } }
.graha { padding: 18px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.graha:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.graha::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gc); }
.graha .top { display: flex; gap: 14px; align-items: center; }
.graha .art { width: 72px; height: 72px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--gc) 16%, #fff), #fff 70%); }
.graha .art svg { width: 64px; height: 64px; }
@media (prefers-reduced-motion: no-preference) { .graha .art svg { animation: float 6s ease-in-out infinite; animation-delay: var(--d, 0s); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.graha h3 { font-family: var(--f-display); font-size: 23px; line-height: 1.1; }
.graha h3 small { display: block; font-family: var(--f-body); font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.graha .verdict { margin-left: auto; align-self: flex-start; }
.pos { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 11px; padding: 9px 12px; }
.pos .rg { width: 30px; height: 30px; color: var(--gc); flex: none; }
.pos b { font-size: 16px; }
.pos .deg { font-family: var(--f-mono); font-size: 14px; color: var(--ink-2); margin-left: auto; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); }
.tag.good { background: var(--good-bg); color: var(--good); border-color: transparent; }
.tag.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.tag.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.tag.gold { background: var(--gold-soft); color: var(--gold-deep); border-color: transparent; }
.strength { display: grid; gap: 5px; }
.strength .row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.strength .row b { font-family: var(--f-mono); font-size: 14px; letter-spacing: 0; }
.meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 4px; transform-origin: left; }
.meter i.good { background: linear-gradient(90deg, #36B57A, #11804E); }
.meter i.mixed { background: linear-gradient(90deg, #E6B04A, #C98A10); }
.meter i.bad { background: linear-gradient(90deg, #EB7268, #C2352D); }
.in .meter i { animation: grow 1.1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .15s; }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }
.graha .read { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.verdict { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.verdict.good { background: var(--good-bg); color: var(--good); }
.verdict.bad { background: var(--bad-bg); color: var(--bad); }
.verdict.mixed { background: var(--warn-bg); color: var(--warn); }

/* Belt */
.belt-card { padding: 10px; overflow-x: auto; }
.belt { display: block; min-width: 780px; width: 100%; height: auto; }

/* Yogas */
.yoga-filter { margin-bottom: 18px; }
.yoga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.yoga { padding: 16px; display: grid; gap: 8px; align-content: start; transition: transform .2s; }
.yoga:hover { transform: translateY(-2px); }
.yoga.on.good { border-color: var(--good-line); background: linear-gradient(180deg, var(--good-bg), #fff 90px); }
.yoga.on.bad { border-color: var(--bad-line); background: linear-gradient(180deg, var(--bad-bg), #fff 90px); }
.yoga.off { opacity: .78; }
.yoga .yh { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.yoga h3 { font-family: var(--f-display); font-size: 19px; line-height: 1.2; }
.yoga .rule { font-size: 13px; color: var(--ink-3); }
.yoga p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }

/* Dasha */
.now-card { padding: 22px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; margin-bottom: 18px; background: linear-gradient(120deg, #fff, var(--gold-softer)); border-color: #F0DDB0; }
@media (max-width: 720px) { .now-card { grid-template-columns: minmax(0, 1fr); } }
.now-card .pair { display: flex; align-items: center; }
.now-card .pair svg { width: 70px; height: 70px; filter: drop-shadow(0 6px 10px rgba(22, 23, 59, .15)); }
.now-card .pair svg + svg { width: 50px; height: 50px; margin-left: -14px; }
.now-card .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.now-card h3 { font-family: var(--f-display); font-size: 28px; line-height: 1.15; }
.now-card p { color: var(--ink-2); font-size: 15px; }
.ring { width: 96px; height: 96px; }
.ring circle { fill: none; stroke-width: 9; }
.ring .bg { stroke: var(--line); }
.ring .fg { stroke: var(--gold); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1); }
.ring text { font-family: var(--f-mono); font-size: 17px; fill: var(--ink); }
.ribbon-card { padding: 14px; overflow-x: auto; margin-bottom: 18px; }
.ribbon { display: block; min-width: 720px; width: 100%; height: auto; }
.dasha-list { display: grid; gap: 10px; }
.dasha-list details { background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: box-shadow .2s; }
.dasha-list details[open] { box-shadow: var(--shadow); }
.dasha-list details.now { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(211, 151, 28, .15); }
.dasha-list summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px minmax(120px, 1fr) minmax(0, 2fr) auto 20px; gap: 14px; align-items: center; padding: 12px 16px; }
.dasha-list summary::-webkit-details-marker { display: none; }
.dasha-list summary svg.gimg { width: 40px; height: 40px; }
.dasha-list .lord { font-weight: 600; font-size: 16.5px; }
.dasha-list .lord span { display: block; font-weight: 400; font-size: 13px; color: var(--ink-3); }
.dasha-list .when { font-size: 14px; color: var(--ink-2); font-family: var(--f-mono); }
.dasha-list .chev { width: 18px; height: 18px; color: var(--ink-3); transition: transform .2s; }
.dasha-list details[open] .chev { transform: rotate(180deg); }
.pill { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--gold); color: #16173B; }
.pill.past { background: var(--line); color: var(--ink-3); }
.pill.fut { background: var(--indigo-soft); color: var(--indigo); }
@media (max-width: 640px) { .dasha-list summary { grid-template-columns: 40px minmax(0, 1fr) auto; } .dasha-list .when { grid-column: 2 / -1; grid-row: 2; } .dasha-list .chev { display: none; } }
.sub { padding: 0 16px 16px; }
.subgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.subgrid div { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; display: flex; gap: 10px; align-items: center; font-size: 14px; }
.subgrid div.now { border-color: var(--gold); background: var(--gold-softer); }
.subgrid svg.gimg { width: 28px; height: 28px; flex: none; }
.subgrid b { display: block; font-size: 14.5px; }
.subgrid span { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }

/* Panchang */
.pan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .pan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .pan-grid { grid-template-columns: minmax(0, 1fr); } }
.pan { padding: 16px; display: flex; gap: 12px; align-items: center; }
.pan .ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--indigo-soft); color: var(--indigo); }
.pan .ic svg { width: 30px; height: 30px; }
.pan .ic.moonph { background: #1E2150; }
.pan .ic.moonph svg { width: 40px; height: 40px; }
.pan dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.pan dd { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.3; }
.pan dd span { display: block; font-weight: 400; font-size: 13.5px; color: var(--ink-2); }
.ava { margin-top: 20px; padding: 20px; }
.ava h3 { font-family: var(--f-display); font-size: 22px; margin-bottom: 12px; }
.ava-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ava-grid div { background: #fff; padding: 11px 14px; }
.ava-grid dt { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.ava-grid dd { margin: 0; font-weight: 600; }

/* Bhavas */
.bhava-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .bhava-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .bhava-grid { grid-template-columns: minmax(0, 1fr); } }
.bhava { padding: 15px; display: grid; gap: 8px; align-content: start; }
.bhava .bh { display: flex; align-items: center; gap: 10px; }
.bhava .no { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: var(--f-display); font-size: 19px; background: var(--ink); color: #fff; flex: none; }
.bhava.lagna .no { background: linear-gradient(135deg, #E0A425, #C27C08); color: var(--ink); }
.bhava h3 { font-size: 16px; font-weight: 600; line-height: 1.2; }
.bhava h3 small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.bhava .rg { width: 26px; height: 26px; color: var(--indigo); margin-left: auto; flex: none; }
.bhava .means { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.bhava .occ { display: flex; gap: 4px; flex-wrap: wrap; min-height: 30px; align-items: center; }
.bhava .occ svg { width: 28px; height: 28px; }
.bhava .occ .none { font-size: 13px; color: var(--ink-3); }
.bhava .lordline { font-size: 13px; color: var(--ink-3); }
.bhava .lordline b { color: var(--ink); font-weight: 600; }
.savbar { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.savbar .meter { flex: 1; }
.savbar b { font-family: var(--f-mono); min-width: 2ch; text-align: right; }

/* Ashtakavarga */
.tbl-card { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { padding: 9px 10px; text-align: center; white-space: nowrap; }
th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; background: var(--bg); }
th:first-child, td:first-child { text-align: left; padding-left: 16px; }
td.hm { font-family: var(--f-mono); font-weight: 500; }
tbody tr + tr td { border-top: 1px solid var(--line); }
tr.sav td { font-weight: 700; border-top: 2px solid var(--ink) !important; }
th.lg { color: var(--gold-deep); }
.th-glyph { display: block; width: 18px; height: 18px; margin: 0 auto 2px; color: var(--indigo); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13.5px; color: var(--ink-2); margin-top: 12px; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 5px; }

/* Gochar */
.gochar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.goc { padding: 14px; display: flex; gap: 12px; align-items: center; }
.goc svg.gimg { width: 46px; height: 46px; flex: none; }
.goc b { display: block; font-size: 15.5px; }
.goc span { font-size: 13.5px; color: var(--ink-2); display: block; }
.goc .tag { margin-top: 4px; }

/* Method */
.method { padding: 22px; display: grid; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.method .mono { font-size: 13px; color: var(--ink); background: var(--bg); padding: 10px 12px; border-radius: 10px; line-height: 1.7; }
footer { padding-block: 50px 40px; color: var(--ink-3); font-size: 14px; text-align: center; }
footer .brand { justify-content: center; margin-bottom: 8px; }

/* Reveal: elements are visible at rest; .in only adds a lift */
@media (prefers-reduced-motion: no-preference) {
  .reveal.in { animation: lift .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms); }
}
@keyframes lift { from { transform: translateY(18px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===== Added for the hosted site: auth, gate, saved charts, language, FAQ ===== */
.topbar .actions { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
@media (max-width: 980px) { .topbar .actions { margin-left: auto; } }
.lang { position: relative; }
.lang select { appearance: none; -webkit-appearance: none; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23474A72' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 28px 8px 11px; cursor: pointer; }
.btn-line { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14.5px; padding: 8px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.btn-line:hover { border-color: var(--gold); }
.user { position: relative; }
.user > button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink); max-width: 200px; }
.user > button span.av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #E0A425, #C27C08); color: var(--ink); font-family: var(--f-display); font-size: 15px; flex: none; }
.user > button span.nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 40; }
.menu .who { padding: 8px 10px; font-size: 13px; color: var(--ink-3); border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
.menu button { display: flex; width: 100%; align-items: center; gap: 8px; background: transparent; border: 0; padding: 9px 10px; border-radius: 8px; text-align: left; cursor: pointer; font-size: 14.5px; color: var(--ink); }
.menu button:hover { background: var(--bg); }
@media (max-width: 560px) { .user > button span.nm { display: none; } .user > button { padding: 4px; } .btn-cta.newk { display: none; } }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(22, 23, 59, .45); backdrop-filter: blur(4px); }
.modal .box { width: min(440px, 100%); max-height: calc(100% - 32px); overflow: auto; background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); padding: 26px; position: relative; animation: pop .25s cubic-bezier(.2, .8, .3, 1.2) both; }
.modal .box.wide { width: min(640px, 100%); }
@keyframes pop { from { transform: translateY(10px) scale(.98); } to { transform: none; } }
.modal .x { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--bg); cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink-2); }
.modal h2 { font-family: var(--f-display); font-size: 26px; margin: 4px 0 6px; padding-right: 30px; }
.modal .muted { color: var(--ink-2); font-size: 14.5px; }
.modal form { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
.modal .google { width: 100%; justify-content: center; margin-top: 16px; padding: 11px; }
.modal .google svg { width: 18px; height: 18px; }
.modal .or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; margin: 14px 0 0; }
.modal .or::before, .modal .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.modal .links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; margin-top: 12px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--gold-deep); font-weight: 600; cursor: pointer; font-size: inherit; }
.ok { color: var(--good); font-size: 14px; }
.modal .go { margin-top: 2px; }

/* Saved charts */
.saved-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.saved-list li { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.saved-list li .rgic { width: 38px; height: 38px; border-radius: 10px; background: var(--indigo-soft); color: var(--indigo); display: grid; place-items: center; flex: none; font-family: var(--f-display); font-size: 18px; }
.saved-list li div { flex: 1; min-width: 0; }
.saved-list li b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-list li span { font-size: 13px; color: var(--ink-3); }
.saved-list .del { background: none; border: 0; color: var(--bad); cursor: pointer; font-size: 13.5px; font-weight: 600; }

/* Gate */
.gate { margin-top: 22px; position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.gate .mock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 22px; filter: blur(5px) saturate(.9); opacity: .75; pointer-events: none; user-select: none; }
@media (max-width: 720px) { .gate .mock { grid-template-columns: minmax(0, 1fr); } }
.gate .mock .m { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
.gate .mock .m svg.gimg { width: 48px; height: 48px; }
.gate .mock .ln { height: 10px; border-radius: 5px; background: var(--line); }
.gate .mock .ln.s { width: 60%; } .gate .mock .ln.g { background: var(--good-bg); } .gate .mock .ln.b { background: var(--bad-bg); width: 75%; }
.gate .over { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.92)); }
.gate .panel { max-width: 520px; text-align: center; background: #fff; border: 1px solid #F0DDB0; border-radius: 18px; padding: 24px; box-shadow: var(--shadow-lg); }
.gate .lock { width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-deep); }
.gate .lock svg { width: 26px; height: 26px; }
.gate h3 { font-family: var(--f-display); font-size: 26px; }
.gate p { color: var(--ink-2); margin: 6px 0 10px; }
.gate ul { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 5px; text-align: left; }
.gate li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; }
.gate li svg { width: 18px; height: 18px; color: var(--good); flex: none; margin-top: 2px; }
.gate .btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gate small { display: block; margin-top: 10px; color: var(--ink-3); font-size: 13px; }
@media (max-width: 720px) { .gate .over { position: relative; background: none; } .gate .mock { position: absolute; inset: 0; } }
.preview-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); background: var(--indigo-soft); padding: 4px 10px; border-radius: 999px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 70; background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 14.5px; box-shadow: var(--shadow-lg); animation: pop .25s both; }

/* Busy state */
.go[aria-busy="true"] { opacity: .8; cursor: progress; }
.go .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(22,23,59,.25); border-top-color: var(--ink); animation: spin .8s linear infinite; }

/* Static SEO content: features, about, FAQ */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .features { grid-template-columns: minmax(0, 1fr); } }
.feature { padding: 18px; display: grid; gap: 8px; align-content: start; }
.feature .fi { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--gold-softer); }
.feature .fi svg { width: 40px; height: 40px; }
.feature .fi svg.ui { width: 26px; height: 26px; color: var(--gold-deep); }
.feature h3 { font-size: 17px; font-weight: 600; }
.feature p { font-size: 14.5px; color: var(--ink-2); }
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 860px) { .about { grid-template-columns: minmax(0, 1fr); } }
.about .card { padding: 22px; }
.about h3 { font-family: var(--f-display); font-size: 22px; margin-bottom: 8px; }
.about p { color: var(--ink-2); font-size: 15.5px; }
.about p + p { margin-top: 10px; }
.faq { display: grid; gap: 10px; max-width: 880px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 15px 18px; font-weight: 600; font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; color: var(--gold-deep); flex: none; transition: transform .2s; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details[open] { box-shadow: var(--shadow); border-color: #F0DDB0; }
.faq .ans { padding: 0 18px 16px; color: var(--ink-2); font-size: 15.5px; }
.static-sec { padding-block: 64px 8px; scroll-margin-top: 72px; }

/* Admin panel */
.modal .box.admin { width: min(1040px, 100%); }
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
@media (max-width: 620px) { .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admin-stats div { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg); }
.admin-stats b { display: block; font-family: var(--f-mono); font-size: 24px; font-variant-numeric: tabular-nums; }
.admin-stats span { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.admin-body { max-height: 52vh; overflow: auto; }
.admin-body table th, .admin-body table td { text-align: left; }
.admin-body input[type=search] { width: 100%; }

/* Free-trial banner */
.trial-banner { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 16px 20px; border-radius: 16px; background: linear-gradient(120deg, var(--gold-softer), #fff); border: 1px solid #F0DDB0; box-shadow: var(--shadow); }
.trial-banner .ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--gold-soft); color: var(--gold-deep); }
.trial-banner .ic svg { width: 22px; height: 22px; }
.trial-banner div { flex: 1; min-width: 220px; }
.trial-banner b { font-size: 16.5px; }
.trial-banner p { color: var(--ink-2); font-size: 14.5px; }

/* History */
.histbtn svg { width: 17px; height: 17px; color: var(--gold-deep); }
@media (max-width: 720px) { .histbtn span { display: none; } .histbtn { padding: 8px 10px; } }
.hist-list { max-height: 56vh; overflow: auto; }
.hist-list li { align-items: flex-start; }
.hist-list .hs { display: block; color: var(--indigo); font-size: 13px; margin-top: 2px; }
.hist-list .hw { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.hist-list .hw svg { width: 13px; height: 13px; }
.hist-list .hw em { font-style: normal; color: var(--warn); font-weight: 600; }
.hist-list .btn-line, .hist-list .del { align-self: center; }
@media (max-width: 520px) { .hist-list li { flex-wrap: wrap; } .hist-list li > div { flex-basis: calc(100% - 52px); } }
.admin-stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

/* Account menu: fixed icon size, single-line labels */
.menu button svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
.menu button { white-space: nowrap; font-weight: 500; }
.menu button[data-menu="logout"] { color: var(--bad); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; }
.menu button[data-menu="logout"] svg { color: var(--bad); }
.menu button[data-menu="admin"] svg { color: var(--gold-deep); }

/* ===== Responsive pass (phones, tablets) ===== */
.brand { min-width: 0; flex-shrink: 1; }
.brand > span { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.brand b { overflow: hidden; text-overflow: ellipsis; }
.topbar .actions { flex-shrink: 0; }
footer a { display: inline-block; }
@media (max-width: 1100px) { .brand small { display: none; } }
@media (max-width: 720px) {
  .topbar .wrap { gap: 10px; height: 58px; }
  .brand b { font-size: 18px; }
  .lang select { padding: 7px 24px 7px 9px; font-size: 13.5px; background-position: right 6px center; }
  .btn-line { padding: 7px 11px; font-size: 14px; }
  .hero { padding-block: 24px 36px; }
  .hero-grid { gap: 28px; }
  .trust { margin: 14px 0 18px; }
  .formcard { padding: 18px 16px; border-radius: 16px; }
  main section, .static-sec { padding-block: 48px 4px; }
  .sec-head { margin-bottom: 18px; }
  .profile { padding: 20px 16px; }
  .graha, .hl-col { padding: 16px; }
  .modal .box { padding: 22px 18px; border-radius: 18px; }
  .admin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .admin-stats div { padding: 9px 10px; }
  .admin-stats b { font-size: 20px; }
  .admin-stats span { font-size: 11px; letter-spacing: .03em; }
}
@media (max-width: 440px) {
  .brand > span { display: none; }
  .actions { margin-left: auto; gap: 6px; }
  .user > button { padding: 3px; }
  .hero h1 { font-size: 34px; }
}
@media (max-width: 360px) { .lang select { max-width: 92px; } }
/* The wheel's glow must never catch taps meant for the form above it */
.wheel-col { isolation: isolate; }
.wheel-col::before { pointer-events: none; z-index: -1; max-height: 100%; }
.formcard { position: relative; z-index: 1; }

/* iOS Safari: native date/time inputs ignore width:100% (intrinsic min-width) and centre their text */
input[type="date"], input[type="time"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; max-width: 100%; min-width: 0;
  min-height: 46px; line-height: 1.3; text-align: left;
}
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { margin-left: auto; }
.field, form > * { min-width: 0; }

/* ===== v3: navigation, tools pages, members features ===== */
.spin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(22,23,59,.18); border-top-color: var(--gold); animation: spin .8s linear infinite; vertical-align: middle; }
select { font: inherit; font-size: 16px; color: var(--ink); background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23474A72' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; border: 1.5px solid var(--line); border-radius: 11px; padding: 10px 32px 10px 12px; width: 100%; min-width: 0; appearance: none; -webkit-appearance: none; cursor: pointer; }
select:focus { outline: none; border-color: var(--gold); background-color: #fff; box-shadow: 0 0 0 4px rgba(211, 151, 28, .15); }
.lang select { width: auto; }
.anchor { scroll-margin-top: 70px; }
.muted { color: var(--ink-2); }
.small, p.small { font-size: 13.5px; }
.h3 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.sub-h { font-family: var(--f-display); font-size: 24px; margin: 34px 0 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gimg.sm { width: 22px; height: 22px; vertical-align: -5px; margin-right: 6px; }
.gimg.xl, .rg.xl { width: 84px; height: 84px; flex: none; }
.rg.xl { color: var(--indigo); padding: 14px; background: var(--indigo-soft); border-radius: 22px; }
.rg.sm { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; color: var(--indigo); }
.rg.big { width: 40px; height: 40px; color: var(--indigo); flex: none; }

/* Top navigation + mobile drawer */
.topnav a { display: inline-flex; align-items: center; gap: 6px; }
.topnav a svg { width: 16px; height: 16px; color: var(--gold-deep); }
.topnav a[aria-current="page"] { background: var(--indigo-soft); color: var(--ink); }
.navbtn { display: none; flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; place-items: center; padding: 0; }
.navbtn svg { width: 22px; height: 22px; }
@media (max-width: 980px) { .navbtn { display: grid; } }
@media (max-width: 380px) { .navbtn { width: 36px; height: 36px; } .histbtn { display: none; } }
.drawer { position: fixed; inset: 58px 0 0; z-index: 19; background: rgba(22, 23, 59, .32); animation: fade .2s both; }
.drawer-in { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 10px 16px 16px; display: grid; gap: 2px; }
.drawer-in a { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 10px; text-decoration: none; font-weight: 600; color: var(--ink); }
.drawer-in a svg { width: 20px; height: 20px; color: var(--gold-deep); }
.drawer-in a[aria-current="page"] { background: var(--indigo-soft); }
@media (min-width: 981px) { .drawer { display: none !important; } }
body.nav-open { overflow: hidden; }
@keyframes fade { from { opacity: 0; } }
.footnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 6px 0 12px; }
.footnav a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.footnav a svg { width: 15px; height: 15px; color: var(--gold-deep); }
.menu .menu-link { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 9px 10px; border-radius: 8px; font-size: 14.5px; color: var(--ink); }
.menu .menu-link:hover { background: var(--bg); }
.menu .menu-link svg { width: 18px; height: 18px; color: var(--gold-deep); }

/* Home tools */
.tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .tools { grid-template-columns: minmax(0, 1fr); } }
.tool { padding: 18px; display: grid; gap: 8px; align-content: start; text-decoration: none; position: relative; transition: transform .2s, box-shadow .2s; }
.tool:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tool .fi { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--gold-softer); }
.tool .fi svg { width: 24px; height: 24px; color: var(--gold-deep); }
.tool h3 { font-size: 17px; font-weight: 600; }
.tool p { font-size: 14px; color: var(--ink-2); }
.tool .go-arrow { position: absolute; top: 18px; right: 18px; color: var(--gold-deep); font-weight: 700; }

/* Generic page layout */
.page { padding-bottom: 40px; }
.page-hero { padding: 40px 0 22px; }
.page-hero .eyebrow, .article-head .eyebrow { font-family: var(--f-dev); color: var(--gold-deep); font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-hero h1, .article h1 { font-family: var(--f-display); font-size: clamp(32px, 5vw, 48px); line-height: 1.1; margin: 4px 0 8px; }
.page-hero .lede, .article-head .lede { color: var(--ink-2); max-width: 70ch; }
.toolbar { padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; margin-bottom: 22px; position: relative; z-index: 5; }
.toolbar .field { flex: 1 1 220px; }
.toolbar .seg { align-self: flex-end; }
.cityfield .suggest { top: 74px; }
.cityfield .linkbtn { justify-self: start; font-size: 13px; }
.cityfield .err { min-height: 0; }
.datebar { display: flex; gap: 6px; align-items: stretch; }
.datebar input { flex: 1; }
.datebar .btn-line { padding: 0 12px; font-size: 18px; }
.r-when { flex: 1 1 100%; color: var(--ink-2); }

/* Panchang page */
.pday { padding: 20px 22px; display: flex; gap: 18px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pday h2 { font-family: var(--f-display); font-size: clamp(24px, 3vw, 32px); }
.pday .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
.pday p { color: var(--ink-2); margin-top: 4px; }
.moonph.big { flex: none; width: 74px; height: 74px; border-radius: 50%; background: #1E2150; display: grid; place-items: center; }
.moonph.big svg { width: 62px; height: 62px; }
.pan dd b { display: block; }
.pseq + .pseq { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.pseq b { display: block; font-weight: 600; }
.pseq span { font-size: 13px; color: var(--ink-2); font-weight: 400; }
.pseq.next b { font-weight: 500; color: var(--ink-2); }
.ptimes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .ptimes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .ptimes { grid-template-columns: minmax(0, 1fr); } }
.ptime { padding: 14px 16px; display: grid; gap: 2px; border-left: 4px solid var(--line-2); }
.ptime.good { border-left-color: var(--good); }
.ptime.bad { border-left-color: var(--bad); }
.ptime > span { font-weight: 600; font-size: 14.5px; }
.ptime b { font-size: 20px; font-weight: 500; }
.ptime small { color: var(--ink-3); font-size: 13px; }
.ptime.live { box-shadow: 0 0 0 2px var(--gold), var(--shadow); }
.chogh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .chogh-grid { grid-template-columns: minmax(0, 1fr); } }
.chogh-grid .card { padding: 16px; }
.chogh-grid h4 { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
.chogh-grid h4 svg { width: 20px; height: 20px; color: var(--gold-deep); }
.chogh { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chogh li { display: grid; grid-template-columns: minmax(70px, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--bg); font-size: 14.5px; }
.chogh li .q { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; min-width: 64px; text-align: right; }
.chogh li.good { background: var(--good-bg); } .chogh li.good .q { color: var(--good); }
.chogh li.bad { background: var(--bad-bg); } .chogh li.bad .q { color: var(--bad); }
.chogh li.neutral { background: var(--warn-bg); } .chogh li.neutral .q { color: var(--warn); }
.chogh li.live { box-shadow: 0 0 0 2px var(--gold); }

/* Calendar page */
.next-fest { padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-bottom: 20px; background: linear-gradient(120deg, var(--gold-softer), #fff); }
.next-fest .ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--gold-soft); color: var(--gold-deep); flex: none; }
.next-fest .ic svg { width: 24px; height: 24px; }
.next-fest > div { flex: 1; min-width: 200px; }
.next-fest .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.next-fest h3 { font-family: var(--f-display); font-size: 26px; }
.cal-month { margin-bottom: 22px; }
.cal-month h3 { font-family: var(--f-display); font-size: 22px; margin-bottom: 10px; }
.cal-month ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 720px) { .cal-month ul { grid-template-columns: minmax(0, 1fr); } }
.cal-month li a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; transition: border-color .2s; }
.cal-month li a:hover { border-color: var(--gold); }
.cal-month li.festival a { border-left: 4px solid var(--gold); }
.cal-month li.today a { box-shadow: 0 0 0 2px var(--gold); }
.cal-month li.past { opacity: .6; }
.cal-month .d { width: 46px; flex: none; text-align: center; line-height: 1.1; }
.cal-month .d b { display: block; font-family: var(--f-display); font-size: 22px; }
.cal-month .d small { font-size: 12px; color: var(--ink-3); text-transform: uppercase; }
.cal-month .n { flex: 1; min-width: 0; font-weight: 600; }

/* Rashifal page */
.r-pos { padding: 14px 16px; margin-bottom: 16px; display: grid; gap: 8px; }
.r-pos .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
@media (max-width: 980px) { .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rgrid { grid-template-columns: minmax(0, 1fr); } }
.rcard { padding: 18px; display: grid; gap: 10px; align-content: start; }
.rcard.mine { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft), var(--shadow); grid-column: 1 / -1; }
.rcard.warn { background: linear-gradient(180deg, #FFF8F6, #fff); }
.rh { display: flex; gap: 12px; align-items: center; }
.rh h3 { font-family: var(--f-display); font-size: 22px; }
.rh small { color: var(--ink-3); font-size: 13px; }
.rh .stars { margin-left: auto; }
.stars { color: var(--gold); letter-spacing: 1px; white-space: nowrap; font-size: 15px; }
.stars i { font-style: normal; color: var(--line-2); }
.rmoon { color: var(--ink); }
.areas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 0; }
.areas div { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; border-bottom: 1px dashed var(--line); padding: 3px 0; }
.areas dt { color: var(--ink-2); } .areas dd { margin: 0; }
.areas .stars { font-size: 13px; }
.rsupport { font-size: 14px; color: var(--ink-2); }
.rsupport b.good { color: var(--good); } .rsupport b.bad { color: var(--bad); }
.rcard .tag { justify-self: start; white-space: normal; }

/* Matching page */
#mform { display: block; }
.mforms { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
@media (max-width: 760px) { .mforms { grid-template-columns: minmax(0, 1fr); } }
.mperson-form { margin: 0; padding: 18px; display: grid; gap: 12px; border: 1px solid var(--line); }
.mperson-form legend { float: left; width: 100%; padding: 0; display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 22px; }
.mperson-form legend svg { width: 22px; height: 22px; color: var(--gold-deep); }
.mperson-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 400px) { .mperson-form .row2 { grid-template-columns: minmax(0, 1fr); } }
.mperson-form .linkbtn { justify-self: start; font-size: 13px; }
.mperson-form .suggest { top: 74px; }
#m-go { width: 100%; justify-content: center; padding: 14px; font-size: 16px; }
.premium-why { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--gold-softer); border: 1px solid #F0DDB0; margin: 12px 0 16px; font-size: 14.5px; color: var(--ink-2); }
.premium-why svg { width: 20px; height: 20px; flex: none; color: var(--gold-deep); margin-top: 2px; }
.premium-why b { display: block; color: var(--ink); }
.premium-why[hidden] { display: none; }
.mres { margin-top: 26px; }
.mscore { padding: 22px; display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; }
.mscore > div:last-child { flex: 1; min-width: 240px; }
.mscore .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.mscore h2 { font-family: var(--f-display); font-size: 30px; }
.mscore h2.good { color: var(--good); } .mscore h2.warn { color: var(--warn); } .mscore h2.bad { color: var(--bad); }
.gauge { position: relative; width: 150px; height: 150px; flex: none; }
.gauge svg { width: 100%; height: 100%; }
.gauge circle { fill: none; stroke-width: 11; }
.gauge .bg { stroke: var(--line); }
.gauge .fg { stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.6s cubic-bezier(.2, .7, .2, 1); }
.gauge .fg.good { stroke: var(--good); } .gauge .fg.warn { stroke: var(--gold); } .gauge .fg.bad { stroke: var(--bad); }
.gnum { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.gnum b { font-family: var(--f-display); font-size: 44px; }
.gnum span { color: var(--ink-3); font-size: 14px; }
.mpair { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.mperson { display: grid; font-size: 13.5px; color: var(--ink-2); }
.mperson b { font-size: 16px; color: var(--ink); }
.mperson .eyebrow { font-size: 11px; }
.heart svg { width: 26px; height: 26px; color: var(--bad); }
.manglik { padding: 16px 20px; margin-top: 14px; display: grid; gap: 4px; border-left: 4px solid var(--good); }
.manglik.warn { border-left-color: var(--gold); }
.manglik h3 { font-weight: 600; font-size: 17px; }
.koota-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .koota-grid { grid-template-columns: minmax(0, 1fr); } }
.koota { padding: 16px; display: grid; gap: 8px; align-content: start; }
.kh { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.kh h3 { font-weight: 600; font-size: 17px; }
.kh small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-3); }
.kscore { font-family: var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.kscore b { font-size: 22px; color: var(--ink); }
.koota.good .kscore b { color: var(--good); } .koota.bad .kscore b { color: var(--bad); } .koota.warn .kscore b { color: var(--warn); }
.kv { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--ink-2); }
.koota .rule { font-size: 13px; color: var(--ink-3); }
.koota .tag { justify-self: start; white-space: normal; }

/* Learn pages */
.crumbs { font-size: 13.5px; color: var(--ink-3); padding-top: 22px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); }
.article-head { display: flex; gap: 20px; align-items: center; padding: 20px 0 22px; }
@media (max-width: 520px) { .article-head { flex-direction: column; align-items: flex-start; } }
.prose { padding: 22px 24px; display: grid; gap: 12px; max-width: 860px; }
.prose p { color: var(--ink); font-size: 16.5px; line-height: 1.75; }
.prose h2 { font-family: var(--f-display); font-size: 22px; margin-top: 10px; }
.prose p.muted { color: var(--ink-3); }
.cta-card { padding: 18px 20px; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; max-width: 860px; background: linear-gradient(120deg, var(--gold-softer), #fff); }
.linkrow { display: flex; flex-wrap: wrap; gap: 8px; }
.linkrow a.tag { text-decoration: none; }
.linkrow a.tag:hover { border-color: var(--gold); color: var(--gold-deep); }
.learn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .learn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .learn-grid { grid-template-columns: minmax(0, 1fr); } }
.learn-p { padding: 16px; }
.learn-p .h3 { display: flex; align-items: center; }
.learn-p .gimg.sm { width: 30px; height: 30px; }
.learn-p .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.learn-p .meta a { text-decoration: none; }
.lagna-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .lagna-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lagna-link { padding: 14px; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lagna-link .rg { width: 30px; height: 30px; color: var(--indigo); flex: none; }
.learn-link { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--gold-deep); text-decoration: none; }
.learn-link:hover { text-decoration: underline; }

/* Report: members features */
.report-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.report-actions .btn-line svg { width: 17px; height: 17px; color: var(--gold-deep); }
.report-actions .btn-line svg.lk { width: 13px; height: 13px; color: var(--ink-3); }
.report-actions a.btn-line { text-decoration: none; }
.jump-nav { position: sticky; top: 62px; z-index: 10; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; margin-top: 8px; background: linear-gradient(var(--bg) 80%, rgba(244,245,250,0)); }
.jump-nav::-webkit-scrollbar { display: none; }
.jump-nav a { text-decoration: none; white-space: nowrap; }
.jump-nav a:hover { border-color: var(--gold); }
@media (max-width: 720px) { .jump-nav { top: 58px; } }
.lock-card { padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; border-style: dashed; border-color: #E6CF95; background: linear-gradient(120deg, var(--gold-softer), #fff); }
.lock-card .lock { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--gold-soft); color: var(--gold-deep); }
.lock-card .lock svg { width: 22px; height: 22px; }
.lock-card > div { flex: 1; min-width: 200px; }
.lock-card p { color: var(--ink-2); font-size: 14.5px; }
.varga-wrap { margin-top: 26px; }
.varga-wrap .lede { color: var(--ink-2); margin: -6px 0 14px; }
.varga-tabs { margin-bottom: 14px; }
.varga-tabs button small { display: block; font-size: 11px; font-weight: 500; opacity: .8; }
.varga-view { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .varga-view { grid-template-columns: minmax(0, 1fr); } }
.varga-info { display: grid; gap: 10px; }
.varga-info h3 { font-family: var(--f-display); font-size: 22px; }
.varga-info p { color: var(--ink-2); }
table.mini td { padding: 6px 12px; font-size: 14.5px; }
.ad { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; color: var(--ink); }
.ad:hover { border-color: var(--gold); }
.ad.now { border-color: var(--gold); background: var(--gold-softer); }
.ad > span { flex: 1; min-width: 0; display: grid; font-size: 13.5px; }
.ad > span span { color: var(--ink-3); font-size: 12.5px; }
.ad .gimg { width: 28px; height: 28px; flex: none; }
.ad .chev { width: 16px; height: 16px; color: var(--ink-3); transition: transform .2s; }
.ad.open .chev { transform: rotate(180deg); }
.pd { grid-column: 1 / -1; display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); animation: fade .2s both; }
.pd-h { font-size: 13.5px; margin-bottom: 4px; }
.pd div { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pd div span:nth-child(2) { flex: 1; }
.pd div.now { font-weight: 700; color: var(--gold-deep); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 0; position: relative; }
.timeline li { display: grid; grid-template-columns: 110px 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; position: relative; }
.timeline li::before { content: ''; position: absolute; left: 141px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.timeline .when { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); padding-top: 8px; text-align: right; }
.timeline .dot { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-2); display: grid; place-items: center; position: relative; z-index: 1; }
.timeline .dot svg { width: 28px; height: 28px; }
.timeline li.good .dot { border-color: var(--good); } .timeline li.bad .dot { border-color: var(--bad); } .timeline li.gold .dot { border-color: var(--gold); }
.timeline li > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); }
.timeline li > div p { color: var(--ink-2); font-size: 14px; }
@media (max-width: 560px) { .timeline li { grid-template-columns: 40px minmax(0, 1fr); } .timeline .when { grid-column: 2; grid-row: 1; text-align: left; padding: 0; } .timeline li > div { grid-column: 2; } .timeline .dot { grid-row: 1 / 3; } .timeline li::before { left: 23px; } }
table.rect tr.cur td { background: var(--gold-softer); font-weight: 600; }
.sharelink { display: flex; gap: 8px; margin: 14px 0 10px; }
.sharelink input { flex: 1; font-size: 14px; }
.share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.share-actions .btn-line { text-decoration: none; }
.share-actions svg { width: 18px; height: 18px; color: #1C9D58; }
h3.grp { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); margin-top: 16px; }
h3.grp small { color: var(--ink-3); font-weight: 500; }
.relsel { margin-top: 6px; font-size: 13.5px; padding: 5px 28px 5px 9px; width: auto; max-width: 100%; }
.print-head { display: none; }

/* Print / PDF */
@media print {
  @page { margin: 12mm; }
  body { background: #fff; font-size: 12px; }
  .topbar, .drawer, footer, .hero, .no-print, #modal, .toast, .trial-banner, .lock-card, .static-sec, .learn-link, .seg, .jump-nav, #tools { display: none !important; }
  .print-head { display: block; font-size: 12px; color: #555; margin: 0 0 8px; }
  .card { box-shadow: none !important; break-inside: avoid; }
  main section { padding-block: 18px 0; }
  .reveal, .graha, .bhava { opacity: 1 !important; transform: none !important; }
  .graha-grid, .bhava-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .charts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  a { text-decoration: none; }
}
/* Header fit: icons go first, then the history label, then the whole nav moves into the drawer */
@media (max-width: 1440px) { .topbar .user > button span.nm { display: none; } .topbar .user > button { padding: 4px; } }
/* Antardasha buttons + pratyantar list inside the dasha grid */
.subgrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.subgrid .ad > span { font-family: var(--f-body); }
.subgrid .ad > span b { font-size: 14.5px; }
.subgrid .ad > span span { font-family: var(--f-mono); font-size: 12px; }
.subgrid .pd { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; padding: 10px; }
.subgrid .pd .pd-h { grid-column: 1 / -1; }
.subgrid .pd div { display: flex; border: 1px solid var(--line); background: #fff; padding: 6px 10px; font-size: 13.5px; }
.subgrid .pd div span { font-family: var(--f-body); color: var(--ink); font-size: 13.5px; }
.subgrid .pd div span.num { font-family: var(--f-mono); color: var(--ink-3); font-size: 12px; margin-left: auto; text-align: right; }
.subgrid .pd div.now { border-color: var(--gold); background: var(--gold-softer); }
.subgrid .pd .gimg.sm { width: 22px; height: 22px; margin: 0; }
.datebar input { flex: 1 1 0; min-width: 0; width: auto; }
.datebar .btn-line { flex: none; }
@media (max-width: 420px) { .datebar #p-today { padding: 0 9px; font-size: 14px; } .pday { padding: 16px; } .moonph.big { width: 56px; height: 56px; } .moonph.big svg { width: 46px; height: 46px; } }
.toolbar .field, .mperson-form .field { grid-template-columns: minmax(0, 1fr); }
.datebar { min-width: 0; }

/* ===== v4: personal reports, remedies, notes, names, muhurta, family, settings ===== */
.today-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 860px) { .today-grid { grid-template-columns: minmax(0, 1fr); } }
.today-main, .today-week { padding: 18px 20px; display: grid; gap: 12px; align-content: start; }
.today-main .th { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between; align-items: center; }
.today-main .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.today-main h3, .today-week h3 { font-family: var(--f-display); font-size: 22px; }
.big-stars { display: flex; align-items: center; gap: 10px; }
.big-stars .stars { font-size: 22px; }
.big-stars b { font-family: var(--f-mono); color: var(--ink-2); }
.today-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.today-notes li { padding: 9px 12px; border-radius: 10px; background: var(--bg); font-size: 14.5px; border-left: 3px solid var(--line-2); }
.today-notes li.good { border-left-color: var(--good); background: var(--good-bg); }
.today-notes li.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.week { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.week li { display: grid; grid-template-columns: 70px 70px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--bg); font-size: 14px; }
.week li small { color: var(--ink-3); }
.week li em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--bad); }
.week li.good { background: var(--good-bg); } .week li.bad { background: var(--bad-bg); }
.today-tr { margin-top: 14px; }
.today-tr summary { padding: 14px 16px; cursor: pointer; font-weight: 600; }
.today-tr tr.g td:first-child { box-shadow: inset 3px 0 var(--good); } .today-tr tr.b td:first-child { box-shadow: inset 3px 0 var(--bad); }
.area-tabs { margin-bottom: 14px; }
.area-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.area-tabs button svg { width: 16px; height: 16px; }
.area-tabs button small { font-family: var(--f-mono); font-size: 11.5px; opacity: .75; }
.area-card, .cp-sum, .cp-side { padding: 20px; display: grid; gap: 12px; align-content: start; }
.area-head { display: flex; gap: 16px; align-items: center; }
.area-head h3 { font-family: var(--f-display); font-size: 24px; }
.area-head p { color: var(--ink-2); margin-top: 4px; }
.area-score { width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1; border: 5px solid var(--line); }
.area-score b { font-family: var(--f-display); font-size: 28px; } .area-score span { font-size: 11px; color: var(--ink-3); }
.area-score.strong { border-color: var(--good); } .area-score.moderate { border-color: var(--gold); } .area-score.care { border-color: var(--bad); }
.factor-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.factor-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; padding: 7px 10px; border-radius: 10px; background: var(--bg); }
.factor-list li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.factor-list li.good svg { color: var(--good); } .factor-list li.bad svg { color: var(--bad); } .factor-list li.mixed svg { color: var(--warn); }
.area-card h4, .cp-sum h4, .fam h4 { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); margin-top: 6px; }
.when-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.when-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.when-list li .num { color: var(--ink-3); font-size: 12.5px; margin-left: auto; }
.when-list li.now { border-color: var(--gold); background: var(--gold-softer); }
.print-only { display: none; }
.rem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .rem-grid { grid-template-columns: minmax(0, 1fr); } }
.rem { padding: 18px; display: grid; gap: 10px; align-content: start; border-top: 4px solid var(--gc); }
.rem .rh { display: flex; gap: 12px; align-items: center; }
.rem .rh svg.gimg { width: 46px; height: 46px; }
.rem .rh h3 { font-family: var(--f-display); font-size: 22px; } .rem .rh small { color: var(--ink-3); }
.rem .why { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rem .why li { display: flex; gap: 8px; font-size: 14px; color: var(--ink-2); }
.rem .why svg { width: 16px; height: 16px; color: var(--bad); flex: none; margin-top: 3px; }
.rem-dl { margin: 0; display: grid; gap: 8px; }
.rem-dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.rem-dl dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rem-dl dd { margin: 0; font-size: 14.5px; }
.rem-dl dd small { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 3px; }
.mantra { display: block; font-family: var(--f-dev); font-size: 17px; color: var(--indigo); }
.mantra.dev { font-size: 15px; color: var(--ink-2); }
@media (max-width: 420px) { .rem-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.rem-note { display: flex; gap: 8px; margin-top: 12px; }
.rem-note svg { width: 16px; height: 16px; flex: none; color: var(--gold-deep); }
.noteform { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.noteform textarea, .notes textarea { flex: 1; width: 100%; font: inherit; font-size: 15px; border: 1.5px solid var(--line); border-radius: 11px; padding: 10px 12px; background: var(--surface); resize: vertical; }
@media (max-width: 520px) { .noteform { flex-direction: column; align-items: stretch; } }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.notes li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.notes li p { white-space: pre-wrap; }
.notes .hw { font-size: 12.5px; color: var(--ink-3); display: inline-flex; gap: 5px; align-items: center; }
.notes .hw svg { width: 13px; height: 13px; }
.notes .na { display: flex; gap: 14px; justify-content: flex-end; }
.notes .del { background: none; border: 0; color: var(--bad); cursor: pointer; font-weight: 600; font-size: 13.5px; }
.print-head.branded { display: none; }
.print-foot { display: none; }
.name-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
@media (max-width: 980px) { .name-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .name-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .name-grid { grid-template-columns: minmax(0, 1fr); } }
.name { padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.name.lucky { border-color: var(--good-line); background: linear-gradient(180deg, #F4FBF7, #fff); }
.name .nh { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.name .nh b { font-family: var(--f-display); font-size: 20px; font-weight: 400; }
.name p { font-size: 13.5px; color: var(--ink-2); }
.name .nf { display: flex; flex-wrap: wrap; gap: 4px; }
.name .nf svg { width: 12px; height: 12px; }
.numcard { padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; margin-top: 10px; }
.numcard > div { display: grid; text-align: center; }
.numcard .eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
.numcard b { font-family: var(--f-display); font-size: 32px; line-height: 1.1; }
.numcard small { color: var(--ink-3); }
.numcard p { flex: 1; min-width: 220px; font-size: 14px; color: var(--ink-2); }
.check-card { padding: 12px 16px; margin-top: 10px; border-left: 4px solid var(--gold); }
.check-card.good { border-left-color: var(--good); }
.nm-head p { color: var(--ink-2); }
.mu-sum { padding: 18px 20px; margin-bottom: 16px; background: linear-gradient(120deg, var(--gold-softer), #fff); display: grid; gap: 6px; }
.mu-sum .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.mu-sum h3 { font-family: var(--f-display); font-size: 26px; }
.mu-day { margin-bottom: 16px; }
.mu-day h3 { font-family: var(--f-display); font-size: 20px; margin-bottom: 8px; }
.mu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mu-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 48px; gap: 6px 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.mu-list li.best { border-color: var(--good); box-shadow: 0 0 0 2px var(--good-bg); }
.mu-list .tm { font-weight: 600; } .mu-list .tm small { color: var(--ink-3); }
.mu-list .el { font-size: 14px; color: var(--ink-2); }
.mu-list .sc { text-align: right; } .mu-list .sc b { font-family: var(--f-mono); font-size: 18px; color: var(--good); }
.mu-list .pers { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 560px) { .mu-list li { grid-template-columns: minmax(0, 1fr) 44px; } .mu-list .el { grid-column: 1 / -1; grid-row: 2; } }
.fam-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 820px) { .fam-grid { grid-template-columns: minmax(0, 1fr); } }
.fam { padding: 16px 18px; display: grid; gap: 10px; align-content: start; }
.fam.ss { border-color: var(--bad-line); }
.fam .fh { display: flex; gap: 12px; align-items: center; }
.fam .fh .rgic { width: 44px; height: 44px; border-radius: 12px; background: var(--indigo-soft); color: var(--indigo); display: grid; place-items: center; flex: none; font-family: var(--f-display); font-size: 20px; }
.fam .fh > div:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.fam .fh b { font-size: 17px; } .fam .fh span { font-size: 13.5px; color: var(--ink-2); }
.fam .fs { display: grid; text-align: right; } .fam .fs small { font-size: 11.5px; color: var(--ink-3); }
.fam-dl { margin: 0; display: grid; gap: 6px; }
.fam-dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; font-size: 14.5px; }
.fam-dl dt { color: var(--ink-3); font-size: 13px; } .fam-dl dd { margin: 0; } .fam-dl dd small { color: var(--ink-3); margin-left: 6px; } .fam-dl dd.bad { color: var(--bad); font-weight: 600; }
.fam-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.fam-ev li { display: flex; gap: 8px; align-items: center; } .fam-ev li span:nth-child(2) { flex: 1; } .fam-ev .num { color: var(--ink-3); font-size: 12px; }
.fam .fa { display: flex; flex-wrap: wrap; gap: 8px; }
.fam .fa a { text-decoration: none; } .fam .fa svg { width: 16px; height: 16px; color: var(--bad); }
.st-sec { padding: 20px 22px; margin-bottom: 16px; display: grid; gap: 10px; }
.st-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 720px; }
.st-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .st-form .row2 { grid-template-columns: minmax(0, 1fr); } }
.st-form .btn-cta { justify-self: start; }
.st-form .cityfield .suggest { top: 74px; }
.chk { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--indigo); }
.kinds { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0; }
.kinds legend { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 0 4px; }
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 14px; }
.logo-prev img { max-width: 200px; max-height: 90px; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: #fff; }
.mt-tabs { margin: 18px 0 4px; }
.pr-sum { padding: 18px 20px; display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.pr-sum .gnum { position: static; width: 84px; height: 84px; border-radius: 50%; border: 6px solid var(--good); flex: none; }
.pr-sum.bad .gnum { border-color: var(--bad); }
.pr-sum h3 { font-family: var(--f-display); font-size: 24px; } .pr-sum p { color: var(--ink-2); }
.cp-sum { margin-bottom: 14px; }
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 820px) { .cp-grid { grid-template-columns: minmax(0, 1fr); } }
.cp-side .eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(211, 151, 28, .15); }
@media print {
  .print-only { display: block; }
  .print-only .area-card { margin-top: 12px; }
  .print-head.branded { display: flex !important; align-items: center; gap: 14px; border-bottom: 2px solid #D3971C; padding-bottom: 10px; margin-bottom: 14px; }
  .print-head.branded img { max-height: 60px; max-width: 160px; }
  .print-head.branded b { display: block; font-size: 18px; color: #16173B; }
  .print-head.branded span { display: block; font-size: 11px; color: #555; }
  .print-head.branded + * { margin-top: 0; }
  .print-foot { display: block; position: fixed; bottom: 0; left: 0; right: 0; text-align: center; font-size: 10px; color: #777; }
  #notes, .today-tr { display: none !important; }
}
.fam .fs .stars, .fam .fh .stars { color: var(--gold); }
.fam .fh .stars i { color: var(--line-2); }
.st-form .field .linkbtn { justify-self: start; font-size: 13.5px; }
.week li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.week li b { min-width: 64px; } .week li small { min-width: 54px; } .week li .stars { margin-right: auto; }
.today-week, .today-main { min-width: 0; }

/* ===== Header: full width; the menu never scrolls. core.js switches to the menu button when it would not fit. ===== */
.topbar .wrap { max-width: none; padding-inline: clamp(16px, 2.4vw, 36px); }
.topnav { overflow: visible; flex-wrap: nowrap; margin-inline: auto; }
.brand { flex-shrink: 0; }
.brand b { overflow: visible; text-overflow: clip; white-space: nowrap; }
body.nav-tight .topnav a svg { display: none; }
body.nav-tight .topnav a { padding: 6px 8px; }
body.nav-tight .histbtn span { display: none; }
body.nav-tight .histbtn { padding: 8px 10px; }
body.nav-tight .topbar .user > button span.nm { display: none; }
body.nav-tight .topbar .user > button { padding: 4px; }
body.nav-collapsed .topnav { display: none; }
body.nav-collapsed .navbtn { display: grid; }
body.nav-collapsed .topbar .actions { margin-left: auto; }
@media (max-width: 1440px) { .topbar .user > button span.nm { display: inline; } .topbar .user > button { padding: 4px 12px 4px 4px; } }
@media (max-width: 560px) { .topbar .user > button span.nm { display: none; } .topbar .user > button { padding: 4px; } }
@media (max-width: 440px) { .brand > span { display: none; } }
.pushbox { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.pushbox .btn-cta { justify-self: start; } .pushbox .btn-cta svg { width: 18px; height: 18px; }
.pushbox p { display: flex; gap: 8px; align-items: flex-start; } .pushbox p svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.push-on { color: var(--good); font-weight: 600; }
/* Brand with tagline under the name */
.topbar .brand .brand-text { display: grid; gap: 1px; line-height: 1.05; align-items: start; }
.topbar .brand .brand-text b { line-height: 1.05; }
.topbar .brand .brand-text small { display: block; font-family: var(--f-body); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; }
body.nav-tight .topbar .brand .brand-text small { letter-spacing: .04em; }
@media (max-width: 720px) { .topbar .brand .brand-text small { font-size: 10.5px; letter-spacing: .04em; } }
html:not([lang="en"]) .topbar .brand .brand-text small { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
@media (max-width: 440px) { .topbar .brand .brand-text { display: none; } }

/* Live wheel: twinkling stars, a slow radar sweep, breathing graha glows, an orbiting dot on the halo and a pulsing core */
.wheel .stars .star { fill: #C9A24A; opacity: .25; }
.wheel .orbit { transform-box: view-box; transform-origin: 270px 270px; }
.wheel .sweep, .wheel .pg, .wheel .orbit-dot, .wheel .core-pulse, .wheel .lg-line { transform-box: view-box; }
.wheel .sweep { transform-origin: 270px 270px; opacity: 0; }
.wheel .core-pulse { transform-origin: 270px 270px; opacity: 0; stroke-width: 1.5; }
.wheel .orbit-dot { opacity: 0; }
.wheel .glow { opacity: .55; }
.wheel.no-intro .spinner, .wheel.no-intro .pm { animation: none; }
.live-legend { display: grid; gap: 4px; justify-items: center; }
.live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; border-radius: 999px; background: #fff; border: 1px solid #F0D7D4; color: #B02A23; font-weight: 600; font-size: 12.5px; letter-spacing: .02em; box-shadow: 0 2px 8px rgba(176, 42, 35, .08); }
.live-badge i { width: 8px; height: 8px; border-radius: 50%; background: #D93A30; box-shadow: 0 0 0 0 rgba(217, 58, 48, .5); }
@media (prefers-reduced-motion: no-preference) {
  .wheel .stars .star { animation: twinkle var(--t, 3s) ease-in-out var(--w, 0s) infinite; }
  .wheel .sweep { opacity: 1; animation: spin 14s linear infinite reverse; }
  .wheel .core-pulse { animation: corePulse 3.2s ease-out infinite; }
  .wheel .orbit-dot { opacity: 1; }
  .wheel .orbit { animation: spin 26s linear infinite; }
  .wheel .pg { animation: breathe 4.6s ease-in-out var(--b, 0s) infinite; }
  .wheel .glow { animation: glow 4.6s ease-in-out var(--b, 0s) infinite; }
  .wheel .lg-line { animation: lagnaGlow 2.6s ease-in-out infinite; }
  .wheel .lg-seg { animation: lagnaSeg 2.6s ease-in-out infinite; }
  .live-badge i { animation: liveDot 1.6s ease-out infinite; }
}
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .85; } }
@keyframes corePulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes glow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes lagnaGlow { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .45; } }
@keyframes lagnaSeg { 0%, 100% { fill: #F7E1AE; } 50% { fill: #FBEDCB; } }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(217, 58, 48, .55); } 100% { box-shadow: 0 0 0 9px rgba(217, 58, 48, 0); } }

/* ---------- Remedies v2: lucky factors, dosha remedies, more upaya ---------- */
.rem-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; align-items: start; margin-bottom: 18px; }
@media (max-width: 900px) { .rem-top { grid-template-columns: minmax(0, 1fr); } }
.lucky { padding: 18px; display: grid; gap: 12px; border-top: 4px solid var(--gc); background: linear-gradient(180deg, var(--gold-softer), #fff 55%); }
.lucky .rh { display: flex; gap: 12px; align-items: center; } .lucky .rh svg.gimg { width: 46px; height: 46px; flex: none; }
.lucky .rh h3 { font-family: var(--f-display); font-size: 21px; } .lucky .rh small { color: var(--ink-3); font-size: 13.5px; }
.lucky-dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.lucky-dl dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
html:not([lang="en"]) .lucky-dl dt { letter-spacing: 0; text-transform: none; font-size: 13px; }
.lucky-dl dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.lucky-dl dd.num { font-family: var(--f-mono, 'IBM Plex Mono', monospace); font-size: 17px; color: var(--gold-deep); }
.dosha-col .sub-h { font-family: var(--f-display); font-size: 21px; }
.dosha-col > p { margin: 2px 0 10px; }
.dosha-grid { display: grid; gap: 10px; }
details.dosha { padding: 0; overflow: hidden; border-left: 4px solid var(--bad); }
details.dosha summary { list-style: none; cursor: pointer; padding: 13px 44px 13px 16px; display: grid; gap: 3px; position: relative; }
details.dosha summary::-webkit-details-marker { display: none; }
details.dosha summary::after { content: '+'; position: absolute; right: 16px; top: 12px; font-size: 22px; line-height: 1; color: var(--gold-deep); transition: transform .2s; }
details.dosha[open] summary::after { transform: rotate(45deg); }
details.dosha .dn { font-weight: 700; color: var(--ink); font-size: 15.5px; }
details.dosha .dw { font-size: 14px; color: var(--ink-2); }
details.dosha ol { margin: 0; padding: 2px 18px 14px 36px; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink); }
details.dosha ol li::marker { color: var(--gold-deep); font-weight: 700; }
.rem-more { border-top: 1px dashed var(--line-2); padding-top: 8px; }
.rem-more summary { cursor: pointer; color: var(--gold-deep); font-weight: 600; font-size: 14px; }
.rem-more .rem-dl { margin-top: 10px; }
.rem-act { display: flex; justify-content: flex-end; }
.rem-act .btn-line svg { width: 16px; height: 16px; color: var(--good); }

/* ---------- Sadhana tracker ---------- */
.sd-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 18px; }
.sd-bar a { display: inline-flex; gap: 6px; align-items: center; color: var(--gold-deep); }
.sd-bar a svg { width: 16px; height: 16px; }
.sd-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
@media (max-width: 860px) { .sd-list { grid-template-columns: minmax(0, 1fr); } }
.sd-mini .sd-list { margin-bottom: 16px; }
.sd-card { padding: 16px 18px; display: grid; gap: 12px; border-top: 4px solid var(--gc); align-content: start; }
.sd-card.complete { background: linear-gradient(180deg, var(--good-bg), #fff 60%); }
.sd-head { display: flex; gap: 12px; align-items: center; min-width: 0; }
.sd-head svg.gimg { width: 42px; height: 42px; flex: none; }
.sd-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--gold-softer); color: var(--gold-deep); } .sd-ic svg { width: 20px; height: 20px; }
.sd-tt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sd-tt b { font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.sd-tt small { color: var(--ink-3); font-size: 13px; }
.sd-ring { --p: 0; width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, #fff 76%, transparent 78% 100%), conic-gradient(var(--gc) calc(var(--p) * 1%), var(--line) 0); }
.sd-ring b { font-size: 17px; line-height: 1; } .sd-ring small { font-size: 11px; color: var(--ink-3); }
.sd-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.sd-meta .bad { color: var(--bad); font-weight: 600; }
.sd-meta .tag svg { width: 13px; height: 13px; }
.sd-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.sd-grid.dense { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.sd-cell { aspect-ratio: 1; min-width: 0; border-radius: 7px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-3); font: 600 11px/1 var(--f-mono, 'IBM Plex Mono', monospace); cursor: pointer; padding: 0; transition: transform .15s, background .2s; }
.sd-cell:not(:disabled):hover { transform: scale(1.08); border-color: var(--gold); }
.sd-cell.done { background: var(--gc); border-color: var(--gc); color: #fff; }
.sd-cell.miss { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.sd-cell.today { border: 2px solid var(--gold); color: var(--gold-deep); background: #fff; }
.sd-cell.done.today { border-color: var(--gc); color: #fff; background: var(--gc); }
.sd-cell.future { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: no-preference) { .sd-cell.today:not(.done) { animation: sdPulse 1.8s ease-in-out infinite; } }
@keyframes sdPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(211, 151, 28, .45); } 50% { box-shadow: 0 0 0 5px rgba(211, 151, 28, 0); } }
.sd-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.sd-actions .linkbtn { display: inline-flex; gap: 5px; align-items: center; font-size: 13.5px; } .sd-actions .linkbtn svg { width: 14px; height: 14px; }
.sd-actions .del { background: none; border: 0; color: var(--bad); cursor: pointer; font-size: 13.5px; font-weight: 600; margin-left: auto; }
.sd-today svg { width: 16px; height: 16px; }
.sd-rule { display: flex; gap: 8px; align-items: flex-start; } .sd-rule svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--gold-deep); }
#sd .sub-h { font-family: var(--f-display); font-size: 22px; margin: 6px 0 12px; }
.modal form.sd-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; display: grid; }
.sd-form .full { grid-column: 1 / -1; }
.sd-form .field[hidden] { display: none; }
@media (max-width: 520px) { .modal form.sd-form { grid-template-columns: minmax(0, 1fr); } }
@media print { .sd-mini, .rem-act { display: none !important; } .rem-more { display: block; } .rem-more > * { display: block; } details.dosha ol { display: grid; } }

/* Notch / status bar (Android app, iPhone with viewport-fit=cover): the header itself covers the safe area,
   so page content can never show between the status bar and the header. */
:root { --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); }
.topbar { top: 0; padding-top: var(--sat); background: rgba(244, 245, 250, .96); }
.drawer { top: calc(58px + var(--sat)); }
.jump-nav { top: calc(62px + var(--sat)); }
main section, .static-sec { scroll-margin-top: calc(72px + var(--sat)); }
.anchor { scroll-margin-top: calc(70px + var(--sat)); }
.modal { padding-top: calc(16px + var(--sat)); padding-bottom: calc(16px + var(--sab)); }
body { padding-bottom: var(--sab); }
@media (max-width: 720px) { .jump-nav { top: calc(58px + var(--sat)); } }

/* ---------- Today (app home) and Me screens — Design C "Living Wheel" ---------- */
.today-page, .me-page { max-width: 560px; padding-top: 12px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 12px; }
.t-card { background: #fff; border-radius: 24px; box-shadow: 0 1px 2px rgba(22,23,59,.04), 0 12px 32px rgba(22,23,59,.07); border: 0; }
.t-head { display: flex; align-items: center; gap: 12px; padding: 4px 2px 2px; }
.t-date { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--gold-deep); }
.t-greet { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.15; }
.t-sky { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.t-sky-top, .t-sky-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 4px; }
.t-sky .live-badge { background: #FDEEEC; border-color: #FDEEEC; color: #A3261F; }
.t-city { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid #E8DFC9; background: #fff; color: var(--ink); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.t-city svg { width: 14px; height: 14px; color: var(--gold-deep); }
.t-sky #wheel { display: grid; place-items: center; }
.t-sky .wheel { max-width: 300px; }
.t-sky .wheel-legend { display: none; }
.t-sky-foot small { display: block; font-size: 12px; color: var(--ink-3); }
.t-sky-foot b { font-weight: 700; font-size: 15px; }
.t-sky-foot .r { text-align: right; }
.t-tithi { background: var(--ink); color: #fff; border-radius: 24px; padding: 16px; display: flex; gap: 14px; align-items: center; min-height: 86px; }
.t-tithi .spin { margin: auto; }
.t-moonph { width: 54px; height: 54px; flex: none; }
.t-tithi small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #F2D27A; }
.t-tithi b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 23px; line-height: 1.15; }
.t-tithi span { display: block; font-size: 14px; color: #CBCDEA; }
.t-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.t-times:empty { display: none; }
.t-time { background: #fff; border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.t-time small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
html:not([lang="en"]) .t-time small { text-transform: none; letter-spacing: 0; }
.t-time small svg { width: 15px; height: 15px; }
.t-time.good small { color: #0B6B41; } .t-time.bad small { color: #A3261F; }
.t-time b { font-weight: 700; }
.t-time .num { font-family: var(--f-mono); font-size: 14px; }
.t-time em { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.t-time.now.good { background: #E2F4E9; } .t-time.now.bad { background: #FDEEEC; }
.t-time.past { opacity: .6; }
.t-row { width: 100%; display: flex; gap: 12px; align-items: center; padding: 14px 16px; text-align: left; font: inherit; color: var(--ink); text-decoration: none; cursor: pointer; }
.t-row > svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.t-row b { display: block; } .t-row small { display: block; color: var(--ink-3); font-size: 13.5px; }
.t-dayc { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.t-dayc > svg { width: 18px; height: 18px; color: #9A98B2; flex: none; }
.t-ring { --p: 0; width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, #fff 76%, transparent 78% 100%), conic-gradient(var(--gold) calc(var(--p) * 1%), #F1EBDD 0); }
.t-ring b { font-size: 19px; line-height: 1; } .t-ring small { font-size: 11px; color: var(--ink-3); }
.t-dayt { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.t-areas { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ink-2); }
.t-areas i { font-style: normal; color: var(--gold-deep); font-weight: 700; }
.t-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 4px; }
.t-tools a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); font-size: 12.5px; font-weight: 600; text-align: center; }
.ti { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; flex: none; }
.ti svg { width: 23px; height: 23px; }
.c-pink { background: #FCE8EF; color: #B83C74; } .c-gold { background: #FBF0D8; color: #8C5E05; } .c-green { background: #E2F4E9; color: #11804E; }
.c-indigo { background: #ECEDFB; color: #2A2E7C; } .c-blue { background: #E8ECFB; color: #3554CF; } .c-gray { background: #F1EFF8; color: #474A72; }
.me-head { display: flex; align-items: center; gap: 14px; padding: 6px 2px; }
.me-av { width: 62px; height: 62px; border-radius: 50%; background: var(--ink); color: #F2D27A; display: grid; place-items: center; font-family: var(--f-display); font-size: 26px; flex: none; }
.me-head > div { flex-grow: 1; min-width: 0; }
.me-head b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 22px; overflow-wrap: anywhere; }
.me-head small { display: block; color: var(--ink-3); font-size: 13.5px; overflow-wrap: anywhere; }
.me-list { display: flex; flex-direction: column; overflow: hidden; }
.me-list > a, .me-list > label, .me-list > button { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 0; border-bottom: 1px solid #F1ECDF; background: none; color: var(--ink); text-decoration: none; font: inherit; text-align: left; }
.me-list > :last-child { border-bottom: 0; }
.me-list .ti { width: 38px; height: 38px; border-radius: 12px; } .me-list .ti svg { width: 19px; height: 19px; }
.me-list b { flex-grow: 1; font-weight: 600; }
.me-list .chev { width: 16px; height: 16px; color: #9A98B2; }
.me-lang select { width: auto; min-width: 130px; }
.me-out { color: var(--bad) !important; font-weight: 600; cursor: pointer; }
.me-list .chev, .t-dayc > svg { transform: rotate(-90deg); }
.t-sky-top .live-badge, .t-city { white-space: nowrap; }
.t-sky-top .live-badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.t-city { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.t-time .num { font-size: 13px; white-space: nowrap; letter-spacing: -.02em; }

/* ===== Varshaphal, transit timeline, KP, Lal Kitab, chart card ===== */
.vp-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.vp-nav b { font-family: var(--f-display); font-size: 22px; min-width: 64px; text-align: center; }
.vp-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 820px) { .vp-grid { grid-template-columns: minmax(0, 1fr); } }
.vp-main { padding: 18px 20px; display: grid; gap: 10px; }
.vp-main h3 { font-family: var(--f-display); font-size: 24px; }
.vp-main p { color: var(--ink-2); font-size: 15px; }
.vp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 4px 0; }
.vp-facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.vp-facts dd { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.vp-facts .gimg.sm, .pq-facts .gimg.sm { width: 22px; height: 22px; }
.vp-mudda { margin-top: 14px; padding: 16px 18px; }
.vp-mudda h3 { font-size: 18px; font-weight: 600; }
.when-list li.past { opacity: .55; }
.tl-filter { margin-bottom: 12px; }
.tl-list li.cur > div { border-color: var(--gold); background: var(--gold-softer); }
.tl-list li > div p .tag { margin-left: 4px; vertical-align: middle; }
.kp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; }
@media (max-width: 900px) { .kp-grid { grid-template-columns: minmax(0, 1fr); } }
.kp-grid .tbl-card, .kp-sig { overflow-x: auto; }
.tbl-h { font-size: 16px; font-weight: 600; padding: 12px 14px 4px; }
.kp-sig { margin-top: 14px; }
.kp-sig summary { cursor: pointer; padding: 12px 14px; font-weight: 600; }
.kp-sp { padding: 10px 14px 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.kp-grid table td b { color: var(--indigo); }
.lk-wrap { margin-top: 26px; }
.lk-map { padding: 12px 14px; }
.lk-map .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-steps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.lk-rules { margin-top: 14px; padding: 14px 18px; background: var(--gold-softer); border-color: var(--gold-soft); }
.lk-rules h4 { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.lk-rules h4 svg { width: 18px; height: 18px; color: var(--gold-deep); }
.lk-rules ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }

/* ===== Hora / choghadiya now, regional calendars ===== */
.t-hora { padding: 14px 16px; display: grid; gap: 10px; }
.t-hora:empty { display: none; }
.t-sub { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
.hz-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.hz-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); }
.hz-ic svg { width: 26px; height: 26px; color: var(--indigo); }
.hz-row.good .hz-ic { background: var(--good-bg); } .hz-row.bad .hz-ic { background: var(--bad-bg); }
.hz-t { display: grid; min-width: 0; }
.hz-t small { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.hz-t b { font-weight: 600; }
.hz-t span { font-size: 13.5px; color: var(--ink-2); }
.hz-next { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--good); }
.hz-next svg { width: 18px; height: 18px; flex: none; }
.hz-nudge { font-size: 14px; color: var(--ink-2); }
.t-reg { font-size: 13.5px; color: var(--gold-deep); margin-top: 2px; }
.t-reg:empty { display: none; }
.hora-grid .chogh li { grid-template-columns: 26px minmax(60px, 1fr) auto auto; }
.hora-grid .gimg.sm { width: 24px; height: 24px; }
.reg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.reg { padding: 14px 16px; display: grid; gap: 4px; }
.reg b { font-weight: 600; font-size: 15.5px; }

/* ===== Listen (Rashifal) ===== */
.listen { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--indigo); border-radius: 999px; padding: 4px 12px 4px 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; margin: 6px 0 2px; }
.listen svg { width: 18px; height: 18px; }
.listen.on { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.listen-mine { margin-left: 10px; font-size: 14px; }
.listen-mine.on { background: var(--indigo); color: #fff; }

/* ===== Japa counter ===== */
.jp-setup { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 16px; }
.jp-stage { display: grid; justify-items: center; gap: 12px; padding: 18px 0 8px; }
.jp-text { font-family: var(--f-dev); font-size: 19px; color: var(--gold-deep); text-align: center; max-width: 560px; min-height: 1.6em; }
.jp-bead { position: relative; width: min(78vw, 320px); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; background: radial-gradient(circle at 50% 42%, #FFFDF7, #FBF0D8 70%, #F2DDAA); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(184, 134, 43, .25); touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; transition: transform .08s; }
.jp-bead:active { transform: scale(.985); }
.jp-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.jp-ring circle { fill: #E6D3A6; transition: fill .15s; }
.jp-ring circle.on { fill: #B8862B; }
.jp-ring circle.meru { fill: #8C5E05; }
.jp-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.jp-count { font-size: clamp(56px, 16vw, 84px); line-height: 1; color: var(--ink); font-weight: 600; }
.jp-count.bump { animation: jpBump .18s ease-out; }
@keyframes jpBump { from { transform: scale(1.08); } to { transform: none; } }
.jp-mid small { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.jp-hint { font-size: 13px; color: var(--ink-3); }
.jp-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.jp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; margin-top: 10px; }
.jp-stats dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.jp-stats dd { margin: 0; font-size: 20px; font-weight: 600; display: grid; }
.jp-stats dd small { font-size: 12.5px; font-weight: 400; color: var(--ink-3); font-family: var(--f-body); }

/* ===== Tithi dates ===== */
.td-sec { margin-top: 22px; }
.td-sec .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.td-sec h2 { font-family: var(--f-display); font-size: 24px; }
.td-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; margin-bottom: 8px; }
.td-row.anc { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
@media (max-width: 640px) { .td-row, .td-row.anc { grid-template-columns: minmax(0, 1fr) auto; } .td-row .td-when { grid-column: 1; } }
.td-who { display: grid; min-width: 0; }
.td-who b { font-weight: 600; }
.td-who small, .td-when small { color: var(--ink-3); font-size: 13px; }
.td-when { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 14.5px; }
.td-when .eyebrow { width: 100%; font-size: 11px; }
.td-row .del { border: 0; background: none; font-size: 22px; color: var(--ink-3); cursor: pointer; padding: 0 6px; }
.td-remind { margin-top: 18px; padding: 14px 16px; display: grid; gap: 8px; }

/* ===== Prashna ===== */
.pq-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 16px; }
.pq-form .full { grid-column: 1 / -1; }
.pq-topics { border: 0; padding: 0; margin: 0; }
.pq-topics legend { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 14px; cursor: pointer; color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.pq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 16px; margin-top: 18px; align-items: start; scroll-margin-top: 90px; }
@media (max-width: 820px) { .pq-grid { grid-template-columns: minmax(0, 1fr); } }
.pq-verdict { padding: 18px 20px; display: grid; gap: 8px; border-top: 4px solid var(--line-2); }
.pq-verdict.good { border-top-color: var(--good); } .pq-verdict.bad { border-top-color: var(--bad); } .pq-verdict.warn { border-top-color: var(--gold); }
.pq-verdict h2 { font-family: var(--f-display); font-size: 30px; }
.pq-verdict.good h2 { color: var(--good); } .pq-verdict.bad h2 { color: var(--bad); } .pq-verdict.warn h2 { color: var(--warn); }
.pq-qtext { font-style: italic; color: var(--ink-2); }
.pq-timing { display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: 14.5px; }
.pq-timing svg { width: 18px; height: 18px; flex: none; color: var(--gold-deep); }
.pq-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 6px; }
.pq-facts dt { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.pq-facts dd { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.pq-why { margin-top: 14px; padding: 16px 18px; display: grid; gap: 10px; }
.pq-why h3 { font-weight: 600; }
.pq-hlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pq-h { text-align: left; padding: 10px 12px; display: grid; gap: 4px; cursor: pointer; border: 1px solid var(--line); font: inherit; }
.pq-h small { color: var(--ink-3); font-size: 12.5px; }
.pq-hist { margin-top: 20px; }

/* ===== Biodata ===== */
.bd-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 960px) { .bd-layout { grid-template-columns: minmax(0, 1fr); } }
.bd-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 16px; }
.bd-form .full, .bd-form .sub-h { grid-column: 1 / -1; }
.bd-form textarea { width: 100%; font: inherit; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; }
.bd-birth { border: 1px dashed var(--line-2); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.bd-preview { position: sticky; top: 80px; display: grid; gap: 12px; }
.bd-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bd-sheet { background: #fff; color: #222; padding: 34px 36px; border-radius: 6px; box-shadow: var(--shadow-lg); font-size: 14px; line-height: 1.5; aspect-ratio: 210 / 297; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.bd-inv { text-align: center; font-family: var(--f-dev); font-size: 15px; color: #8C5E05; }
.bd-h { text-align: center; font-family: var(--f-display); font-size: 28px; letter-spacing: .06em; }
.bd-top { display: flex; gap: 16px; align-items: center; }
.bd-top h3 { font-family: var(--f-display); font-size: 24px; }
.bd-top p { color: #555; }
.bd-ph { width: 110px; height: 136px; object-fit: cover; border-radius: 8px; flex: none; }
.bd-sheet section h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px solid currentColor; }
.bd-sheet dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 18px; margin: 0; }
.bd-sheet dl div { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 6px; }
.bd-sheet dt { color: #666; } .bd-sheet dd { margin: 0; font-weight: 600; }
.bd-about { color: #333; white-space: pre-wrap; }
.bd-foot { margin-top: auto; text-align: center; font-size: 10.5px; color: #999; }
.bd-sheet.classic { border: 10px double #D3971C; background: linear-gradient(#FFFDF7, #FFFDF7) padding-box; }
.bd-sheet.classic section h4 { color: #8C5E05; }
.bd-sheet.royal { border: 3px solid #7A1E2C; box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 8px #C9A44A, var(--shadow-lg); background: #FFFBF5; }
.bd-sheet.royal .bd-h, .bd-sheet.royal section h4 { color: #7A1E2C; } .bd-sheet.royal .bd-inv { color: #A07A1F; }
.bd-sheet.minimal { border-top: 6px solid #2A2E7C; }
.bd-sheet.minimal .bd-inv { color: #888; } .bd-sheet.minimal section h4 { color: #2A2E7C; border-bottom-color: #E3E4EF; }
@media (max-width: 560px) { .bd-sheet { padding: 20px 18px; aspect-ratio: auto; font-size: 13px; } .bd-sheet dl { grid-template-columns: minmax(0, 1fr); } .bd-ph { width: 84px; height: 104px; } }
@media print {
  body.bd-printing .page-hero, body.bd-printing .bd-form, body.bd-printing .bd-actions, body.bd-printing .app-bar, body.bd-printing .app-tabs { display: none !important; }
  body.bd-printing .bd-layout { display: block; }
  body.bd-printing .bd-sheet { box-shadow: none !important; aspect-ratio: auto; min-height: 270mm; border-radius: 0; }
  @page { size: A4; }
}
.bd-sheet section { padding: 0; margin: 0; }
.dl-card { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 22px; }
.dl-card img { border-radius: 22px; box-shadow: var(--shadow); }
.dl-card h2 { font-family: var(--f-display); font-size: 26px; }
.dl-card .btn-cta { margin-left: auto; font-size: 17px; padding: 13px 22px; }
.dl-card .btn-cta svg { width: 20px; height: 20px; }
.dl-steps { margin-top: 14px; padding: 18px 22px; }
.dl-steps h3 { font-weight: 600; margin-bottom: 6px; }
.dl-steps ol { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 6px; }
@media (max-width: 560px) { .dl-card .btn-cta { margin-left: 0; width: 100%; justify-content: center; } }
/* App download badges (website only) */
.app-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.app-badge { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; background: #16173B; color: #fff; border-radius: 12px; padding: 8px 16px 8px 12px; min-width: 150px; box-shadow: 0 6px 16px rgba(22, 23, 59, .18); transition: transform .2s, box-shadow .2s; }
.app-badge:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(22, 23, 59, .26); }
.app-badge svg { width: 28px; height: 28px; flex: none; color: #3DDC84; }
.app-badge span { display: grid; line-height: 1.15; }
.app-badge small { font-size: 11px; opacity: .8; }
.app-badge b { font-size: 17px; font-weight: 600; }
.app-badge.soon { background: #fff; color: var(--ink); border: 1px solid var(--line-2); box-shadow: none; }
.app-badge.soon svg { color: var(--ink-2); }
footer .app-badges { justify-content: center; margin: 14px 0; }
.dl-card .app-badges { margin: 0 0 0 auto; }
@media (max-width: 560px) { .dl-card .app-badges { margin: 0; width: 100%; } .dl-card .app-badge { flex: 1; } }
.trust .trust-app { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--gold-deep); font-weight: 600; border-bottom: 1px dashed currentColor; line-height: 1.3; }
.trust .trust-app svg { color: #2DB56B; }
.trust .trust-app:hover { color: var(--ink); }
.is-app .trust-app { display: none; }

/* ===== Shadbala, Bhava Bala, extra dashas, Navamsa, gems ===== */
.sb-card { padding: 16px 18px; margin-bottom: 14px; }
.sb-card h3 { font-weight: 600; }
.sb-list { display: grid; gap: 8px; margin-top: 10px; }
.sb-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 84px auto; gap: 10px; align-items: center; font-size: 14px; }
@media (max-width: 560px) { .sb-row { grid-template-columns: 96px minmax(0, 1fr) 70px; } .sb-row .tag { display: none; } }
.sb-n { display: flex; align-items: center; gap: 6px; } .sb-n .gimg.sm { width: 22px; height: 22px; }
.sb-bar { position: relative; height: 12px; border-radius: 6px; background: var(--bg); }
.sb-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--bad); }
.sb-row.good .sb-bar i { background: var(--good); }
.sb-bar em { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.sb-v small { color: var(--ink-3); }
.sb-rank { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.sb-more { margin-top: 10px; } .sb-more summary { cursor: pointer; font-weight: 600; font-size: 14px; } .sb-more .tbl-card { overflow-x: auto; }
.bb-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 170px; margin-top: 12px; }
.bb { display: grid; grid-template-rows: 1fr auto auto; height: 100%; text-align: center; font-size: 12px; }
.bb-bar { position: relative; } .bb-bar i { position: absolute; left: 15%; right: 15%; bottom: 0; height: var(--h); background: linear-gradient(var(--gold), #B8862B); border-radius: 6px 6px 2px 2px; }
.bb small { color: var(--ink-3); }
.dz-tabs { margin-bottom: 10px; } .dz-card { padding: 14px 16px; } .dz-card .when-list li .muted { font-size: 13px; }
.nav9 { padding: 14px 18px; margin: 6px 0 14px; } .nav9 h3 { font-weight: 600; margin-bottom: 4px; }
.gem-in { padding: 12px 16px; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.gem-in .field { display: flex; align-items: center; gap: 10px; margin: 0; } .gem-in input { width: 110px; }
.gem.avoid { opacity: .85; } .gem .gem-why { font-size: 14px; color: var(--ink-2); margin: 6px 0; }
.rud { padding: 16px 18px; margin-top: 14px; } .rud h3 { font-weight: 600; } .rud h4 { margin-top: 12px; font-weight: 600; }
.rud-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.rud-list li { display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; } .rud-list .gimg.sm { width: 24px; height: 24px; }

/* ===== Puja guides ===== */
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 14px 0; }
.pj-card { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); cursor: pointer; font: inherit; }
.pj-card.on { border-color: var(--gold); background: var(--gold-softer); }
.pj-card .pj-ic svg { width: 22px; height: 22px; color: var(--gold-deep); } .pj-card small { color: var(--ink-3); font-size: 12.5px; }
.pj-detail { scroll-margin-top: 90px; }
.pj-main { padding: 18px 20px; } .pj-main h2 { font-family: var(--f-display); font-size: 30px; } .pj-date { font-weight: 600; color: var(--gold-deep); }
.pj-mu { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; margin: 12px 0; }
.pj-mu dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); } .pj-mu dd { margin: 0; font-weight: 700; }
.pj-about { color: var(--ink-2); }
.pj-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; margin-top: 14px; }
@media (max-width: 760px) { .pj-cols { grid-template-columns: minmax(0, 1fr); } }
.pj-sec { padding: 16px 18px; } .pj-sec h3 { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; } .pj-sec h3 svg { width: 20px; height: 20px; color: var(--gold-deep); }
.pj-sec ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.pj-katha { margin-top: 14px; } .pj-katha p + p { margin-top: 8px; } .pj-kh { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* ===== Vrat tracker ===== */
.vt-kinds { border: 0; padding: 0; margin: 0; } .vt-kinds legend { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.vt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.vt-stats .card { padding: 12px 14px; } .vt-stats dt { font-size: 12px; text-transform: uppercase; color: var(--ink-3); } .vt-stats dd { margin: 0; font-size: 26px; font-weight: 700; }
.vt-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; margin-bottom: 8px; }
.vt-row.today { border-color: var(--gold); } .vt-row.done { background: var(--good-bg); border-color: var(--good-line); }
.vt-d { display: grid; } .vt-d b { font-size: 15px; } .vt-d small, .vt-t small { color: var(--ink-3); font-size: 13px; } .vt-t { display: grid; min-width: 0; }
.vt-tick { padding: 6px 12px; font-size: 13.5px; }

/* ===== Eclipses ===== */
.ecl { padding: 16px 18px; margin-bottom: 12px; } .ecl.past { opacity: .6; } .ecl.vis { border-color: var(--gold); }
.ecl-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ecl-h > div { display: grid; margin-right: auto; } .ecl-h small { color: var(--ink-3); }
.ecl-ic { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.ecl-ic.solar { background: radial-gradient(circle at 60% 45%, #16173B 46%, #F2A93B 48%, #F7E7B8 70%); }
.ecl-ic.lunar { background: radial-gradient(circle at 35% 40%, #E9C2A6, #A0412D 70%); }
.ecl-t { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; margin: 12px 0 4px; }
.ecl-t dt { font-size: 12px; text-transform: uppercase; color: var(--ink-3); } .ecl-t dd { margin: 0; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.ecl-fam { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ecl-fam p { width: 100%; }

/* ===== Family timeline, muhurta packs, ranking, today extras ===== */
.fam-tabs { margin-bottom: 14px; } .ft-people { margin-bottom: 12px; } .ft-month .timeline { margin-top: 4px; }
.mu-packs { margin-bottom: 18px; } .mu-pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.mu-pack { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 12px 14px; cursor: pointer; border: 1px solid var(--line); font: inherit; }
.mu-pack.on { border-color: var(--gold); background: var(--gold-softer); } .mu-pack small { color: var(--ink-3); font-size: 12.5px; }
.mu-top, .nk-card { padding: 14px 18px; margin-top: 10px; } .mu-top h3, .nk-card h3 { font-weight: 600; display: flex; gap: 8px; align-items: center; } .nk-card h3 svg { width: 20px; height: 20px; color: var(--gold-deep); }
.mu-top ol, .mu-top-list { margin: 8px 0; padding-left: 20px; display: grid; gap: 8px; }
.mu-top li, .mu-top-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.mrank { padding: 16px 18px; margin-top: 20px; } .mrank-f { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 10px 0; }
.mr-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mr-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.mr-list li.best { border-color: var(--gold); background: var(--gold-softer); }
.mr-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo); color: #fff; font-size: 13px; font-weight: 700; }
.mr-g { margin-left: auto; } .mr-g b { font-size: 18px; }
.t-share { margin: -4px 0 12px; font-size: 13.5px; padding: 6px 12px; } .t-share svg, .p-share svg { width: 18px; height: 18px; }
.p-share { margin-top: 10px; font-size: 13.5px; }
.t-soonc { padding: 14px 16px; display: grid; gap: 10px; margin-bottom: 12px; }
.t-soon-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; } .t-soon-row .gimg { width: 32px; height: 32px; }
.t-soon-row span { display: grid; } .t-soon-row small { color: var(--ink-3); font-size: 13px; }
.t-brief { margin: 14px 0; font-size: 14px; color: var(--ink-2); }
.gem .rh > svg:first-child, .gem .rh > img:first-child, .gem .rh > .gl:first-child { width: 64px; height: 64px; flex: 0 0 64px; }
.gem .rh { align-items: center; }
@media (max-width: 560px) { .gem .rh > svg:first-child, .gem .rh > img:first-child, .gem .rh > .gl:first-child { width: 48px; height: 48px; flex-basis: 48px; } }

/* ---- Search pages: city panchang, festivals, date lists, muhurat, learn articles ---- */
.seo-page .card { margin-bottom: 14px; }
.seo-page .sub-h { margin-top: 26px; }
.seo-sum { padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: space-between; }
.seo-big { font-family: var(--f-display); font-size: 22px; color: var(--ink); margin: 4px 0 2px; }
.seo-kv { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 0; }
.seo-kv > div { min-width: 0; }
.seo-kv dt { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.seo-kv dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.seo-tablewrap { padding: 4px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.seo-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.seo-table th, .seo-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.seo-table thead th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.seo-table tbody tr:last-child td, .seo-table tbody tr:last-child th { border-bottom: 0; }
.seo-table tr.live { background: var(--gold-softer); }
.seo-table td.bad { color: var(--bad); font-weight: 600; }
.seo-table td .stars, .seo-table td small { white-space: nowrap; }
.seo-table.facts th { width: 38%; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.seo-table a { color: var(--indigo); }
.seo-list { list-style: none; margin: 0; padding: 6px 4px; }
.seo-list li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.seo-list li:last-child { border-bottom: 0; }
.seo-list li > .num { min-width: 112px; color: var(--ink-2); }
.seo-list a { color: var(--indigo); font-weight: 500; }
.seo-page .card > .muted.small { padding: 0 18px 12px; margin: 0; }
.seo-links { gap: 8px; }
.seo-links .tag { text-decoration: none; }
.seo-hub { margin-top: 18px; }
.seo-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .seo-two { grid-template-columns: minmax(0, 1fr); } }
.seo-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 14px; text-align: center; }
.seo-week > div { display: grid; gap: 3px; justify-items: center; font-size: 14px; }
.seo-week small { color: var(--ink-3); }
.seo-week .stars { font-size: 12px; }
@media (max-width: 620px) { .seo-week { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; } }
.seo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.seo-cards .card { padding: 18px; margin: 0; }
.seo-cards .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mu-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .mu-months { grid-template-columns: minmax(0, 1fr); } }
.mu-month { padding: 16px 4px 6px; margin: 0 !important; }
.mu-month h2 { padding: 0 14px; display: flex; gap: 8px; align-items: center; }
.mu-month > p { padding: 0 14px; }
.mu-month .seo-list li { padding: 8px 14px; }
.ecl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .ecl-list { grid-template-columns: minmax(0, 1fr); } }
.ecl-list .ecl { padding: 18px; margin: 0; display: grid; gap: 8px; align-content: start; }
.seo-tr { list-style: none; padding: 0; }
.seo-tr li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.seo-tr li:last-child { border-bottom: 0; }
.seo-page .ptimes { margin-bottom: 8px; }
.seo-hero-t b { font-size: 26px; }
.cm-grid { font-size: 13px; }
.cm-grid th, .cm-grid td { padding: 6px 7px; text-align: center; }
.cm-grid tbody th { text-align: left; white-space: nowrap; }
.cm-grid td a { display: block; text-decoration: none; color: inherit; border-radius: 6px; padding: 3px 0; }
.cm-grid .cm-excellent a { background: var(--good-bg); color: var(--good); font-weight: 700; }
.cm-grid .cm-good a { background: #EEF8F2; color: var(--good); }
.cm-grid .cm-average a { background: var(--bg); color: var(--ink-2); }
.cm-grid .cm-low a { background: var(--bad-bg); color: var(--bad); }
.foot-seo { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin: 4px 0 14px; font-size: 13.5px; }
.foot-seo a { color: var(--ink-3); text-decoration: none; }
.foot-seo a:hover { color: var(--ink); text-decoration: underline; }
.article .seo-table.facts { margin: 0; }
.seo-table thead th { white-space: normal; }
@media (max-width: 520px) {
  .seo-table { font-size: 14px; }
  .seo-table th, .seo-table td { padding: 9px 10px; }
  .seo-table.facts th { width: 42%; }
}
.pday { flex-wrap: wrap; }
.pday .p-share { flex-basis: 100%; justify-self: start; width: max-content; max-width: 100%; }
.ry-table td .stars { font-size: 13px; letter-spacing: -1px; }
@media (max-width: 560px) {
  .ry-table th, .ry-table td { padding: 8px 5px; }
  .ry-table th { font-size: 10.5px; letter-spacing: .02em; }
  .ry-table td .stars { font-size: 10px; letter-spacing: -1.5px; }
  .ry-table td:first-child { font-size: 13px; }
}
.seo-table.facts th { white-space: normal; text-transform: none; letter-spacing: 0; font-size: 14px; }
.seo-table td { overflow-wrap: anywhere; }
.seo-table.facts { table-layout: fixed; }
/* transit effect lines, month calendar cards, puja lists, tool FAQ */
.gt-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 0; white-space: normal; }
.gt-line + .gt-line { border-top: 1px dashed var(--line, #e5e7f0); }
.gt-when { flex-basis: 100%; color: var(--ink-3, #7a7f99); font-size: 12px; }
.seo-table td { white-space: normal; }
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 8px 0 20px; }
.mc-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; text-decoration: none; color: inherit; }
.mc-card b { font-size: 18px; } .mc-card small { color: var(--ink-2); line-height: 1.5; }
.pv-list { columns: 2; column-gap: 24px; } @media (max-width: 560px) { .pv-list { columns: 1; } }
.tool-faq { margin: 28px 0 8px; }
.rp-month tr.warn td { background: rgba(200, 60, 60, .06); }

/* ---- Numerology ---- */
.nu-form { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.nu-form .field { flex: 1 1 220px; margin: 0; }
.nu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 16px 0 14px; }
.nu-num { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.nu-num .eyebrow { margin: 0; }
.nu-big { display: flex; align-items: center; gap: 10px; }
.nu-big b { font-family: var(--f-display); font-size: 44px; line-height: 1; color: var(--ink); }
.nu-big small { color: var(--ink-2); font-weight: 600; }
.nu-num p { margin: 0; font-size: 14px; color: var(--ink-2); flex: 1; }
.nu-num .linkbtn { align-self: flex-start; padding: 0; }
.nu-page .card { margin-bottom: 14px; }
.nu-dl { display: grid; gap: 10px; margin: 6px 0 4px; }
.nu-dl dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); }
.nu-dl dd { margin: 2px 0 0; }
.nu-checks { align-items: start; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.nu-check { padding: 16px 18px; display: block; }
form.nu-check { margin: 0; }
.nu-check h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 10px; }
.nu-check h3 svg { width: 18px; height: 18px; color: var(--gold-deep); flex: none; }
.nu-check h4 { font-size: 14px; margin: 12px 0 6px; }
.nu-check.warn { border-left: 4px solid var(--bad); }
.nu-check.good { border-left: 4px solid var(--good); }
.nu-check p { margin: 6px 0 0; }
.nu-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.nu-row input { flex: 1 1 150px; min-width: 0; height: auto; }
.nu-row .btn-line { flex: none; }
.nu-out:empty { display: none; }
.nu-out { margin-top: 6px; }
.nu-badge { flex: none; display: inline-grid; place-items: center; min-width: 64px; height: 64px; padding: 0 10px; border-radius: 18px; background: linear-gradient(140deg, var(--gold-softer), #fff); border: 1px solid var(--line); font-family: var(--f-display); font-size: 30px; color: var(--gold-deep); }
.nu-badge svg { width: 30px; height: 30px; }
.nu-grid-t { font-size: 14px; }
.nu-grid-t th, .nu-grid-t td { padding: 6px 7px; text-align: center; }
.nu-grid-t td a { display: block; text-decoration: none; color: inherit; border-radius: 6px; padding: 3px 0; }
.nu-grid-t .nu-excellent a { background: var(--good-bg); color: var(--good); font-weight: 700; }
.nu-grid-t .nu-good a { background: #EEF8F2; color: var(--good); }
.nu-grid-t .nu-average a { background: var(--bg); color: var(--ink-2); }
.nu-grid-t .nu-mixed a { background: var(--gold-softer); color: var(--gold-deep); }
.nu-grid-t .nu-difficult a { background: var(--bad-bg); color: var(--bad); }

/* ---- Admin: activity log ---- */
.act-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 12px; }
.act-controls select { width: auto; min-width: 150px; }
.act-self { text-transform: none; letter-spacing: 0; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }
.act-self input { width: auto; }
.act-days { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 12px 14px 8px; margin: 12px 0; overflow-x: auto; }
.act-bar { flex: 1 0 14px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.act-bar i { display: block; width: 100%; max-width: 26px; background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border-radius: 4px 4px 0 0; }
.act-bar span { font-size: 10px; color: var(--ink-3); }
.act-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
.act-top { padding: 12px 14px; }
.act-top h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-deep); }
.act-top ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.act-top li { display: flex; justify-content: space-between; gap: 10px; }
.act-top li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.act-table td { vertical-align: top; font-size: 13px; white-space: nowrap; }
.act-table .act-when { font-size: 12px; }
.act-table .act-page { white-space: normal; min-width: 90px; max-width: 200px; word-break: break-all; }
.act-table .act-detail { white-space: normal; }
.act-table .act-where small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.act-table .act-d { width: 250px; overflow-wrap: anywhere; line-height: 1.45; }
.act-table .kv { display: inline; margin-right: 8px; }
.act-table .kv i { font-style: normal; color: var(--ink-3); }

.act-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin: 2px 0 12px; border-radius: 12px; background: var(--good-bg); color: var(--ink-2); font-size: 13.5px; }
.act-note svg { width: 18px; height: 18px; flex: none; color: var(--good); margin-top: 2px; }
.act-note ul { margin: 0; padding-left: 16px; display: grid; gap: 2px; }
.act-note a { color: var(--good); }

/* ---------- Kundali report tabs ---------- */
.rtabs { position: sticky; top: calc(62px + var(--sat)); z-index: 10; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0 12px; margin: 10px 0 4px; background: linear-gradient(var(--bg) 82%, rgba(244,245,250,0)); scroll-padding-inline: 16px; }
.rtabs::-webkit-scrollbar { display: none; }
.rtabs button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font: inherit; font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.rtabs button svg { width: 17px; height: 17px; flex: none; color: var(--gold-deep); }
.rtabs button:hover { border-color: var(--gold); color: var(--ink); }
.rtabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 6px 16px rgba(22,23,59,.18); }
.rtabs button[aria-selected="true"] svg { color: var(--gold); }
.rtabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 720px) { .rtabs { top: calc(58px + var(--sat)); margin-inline: -16px; padding-inline: 16px; } .rtabs button { padding: 8px 13px; font-size: 14px; } }
.rtab-panel > section:first-child { margin-top: 8px; }
.rtab-panel > section:first-child .sec-head { padding-top: 0; }
.rtab-next { display: flex; justify-content: flex-end; margin: 22px 0 6px; }
.rtab-next .btn-line { font-weight: 600; }
@media print { .rtabs, .rtab-next { display: none !important; } .rtab-panel, .rtab-panel[hidden] { display: block !important; } }

/* Gemstone and Rudraksha guide */
.gem .rh .tag { margin-left: auto; flex: none; align-self: flex-start; }
.gem .rh > div { min-width: 0; }
.gem .rh small { display: block; line-height: 1.4; }
.gem .gem-why { margin: 0; }
.gem .rem-act { margin-top: 2px; }
.gem .rem-act .btn-line { max-width: 100%; white-space: normal; text-align: left; }
.gem-in { padding: 14px 18px; }
.gem-in .field span { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.gem-in .muted.small { margin: 0; flex: 1 1 260px; }
@media (max-width: 560px) {
  .gem .rh h3 { font-size: 20px; }
  .gem-in .field { width: 100%; justify-content: space-between; }
  .rud-list li { grid-template-columns: 24px minmax(0, 1fr) auto; row-gap: 2px; }
  .rud-list li > span { grid-column: 2 / 4; grid-row: 2; color: var(--ink-2); font-size: 13.5px; }
}

/* ---------- Nadi life timeline ---------- */
.nd-intro { padding: 16px 18px; display: grid; gap: 10px; }
.nd-intro p { margin: 0; }
.nd-bb { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.nd-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; color: var(--ink-3); }
.nd-filter { margin: 14px 0 10px; }
.nd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nd-list[data-f="future"] .nd-year.past, .nd-list[data-f="past"] .nd-year:not(.past):not(.now) { display: none; }
.nd-year { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; border-left: 4px solid var(--line-2); overflow: hidden; }
.nd-year.good { border-left-color: var(--good); } .nd-year.bad { border-left-color: var(--bad); } .nd-year.mixed { border-left-color: var(--gold); }
.nd-year.now { box-shadow: 0 0 0 2px var(--gold-soft); }
.nd-year.past .nd-yr b { color: var(--ink-3); }
.nd-head { width: 100%; display: grid; grid-template-columns: 74px 150px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.nd-yr { display: grid; line-height: 1.15; } .nd-yr b { font-size: 17px; } .nd-yr small { color: var(--ink-3); font-size: 12px; }
.nd-md { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); min-width: 0; } .nd-md small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-chips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.nd-tone { justify-self: end; }
.nd-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; }
.nd-chip i { font-style: normal; color: var(--ink-3); font-size: 11px; }
.nd-chip .gimg.sm { width: 18px; height: 18px; }
.nd-chip.j { background: #FFF8E6; border-color: #EBD49A; } .nd-chip.s { background: #EEF1FB; border-color: #C9D2F0; }
.nd-chip b { font-size: 11px; color: var(--indigo, var(--ink)); }
.nd-body { padding: 4px 14px 14px; border-top: 1px dashed var(--line); }
.nd-dasha { display: flex; gap: 8px; align-items: center; font-weight: 600; margin: 10px 0 6px; }
.nd-flag { text-align: left; margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--gold-softer); font-size: 14px; }
.nd-flag.nf-sadeSati { background: var(--bad-bg); }
.nd-acts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.nd-acts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.nd-acts b { font-size: 14.5px; } .nd-acts p { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.nd-soft { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; } .nd-soft small { color: var(--ink-3); margin-right: 4px; }
.nd-check { padding: 16px 18px; margin-top: 16px; }
.nd-check h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 17px; } .nd-check h3 svg { width: 18px; height: 18px; color: var(--good); }
.nd-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.nd-form select { flex: 2 1 200px; width: auto; } .nd-form input { flex: 1 1 90px; width: auto; } .nd-form .btn-line { flex: none; }
.nd-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nd-results li { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.nd-results li p { margin: 6px 0 0; font-size: 13.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nd-r-h { display: flex; gap: 8px; align-items: center; } .nd-r-h b { flex: 1; } .nd-r-h .linkbtn { font-size: 18px; padding: 0 4px; text-decoration: none; }
.nd-score { margin: 10px 0 0; }
@media (max-width: 620px) {
  .nd-head { grid-template-columns: 62px minmax(0, 1fr) auto; row-gap: 6px; padding: 10px 12px; }
  .nd-md { grid-column: 2; grid-row: 1; }
  .nd-tone { grid-column: 3; grid-row: 1; }
  .nd-chips { grid-column: 1 / -1; grid-row: 2; }
}
@media print { .nd-filter, .nd-check { display: none !important; } .nd-list .nd-year { display: block !important; } }
.act-table .act-in { display: block; margin-top: 3px; color: var(--ink); }
/* Nadi: month, track, birth-time correction, proof */
.nd-form select.nd-mon { flex: 1 1 130px; }
.nd-track { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.nd-track svg { width: 14px; height: 14px; }
.nd-track.on { background: var(--good-bg); border-color: var(--good-line); color: var(--good); font-weight: 600; }
.nd-rect { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.nd-rect h4, .nd-comm h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 16px; } .nd-rect h4 svg { width: 17px; height: 17px; color: var(--gold-deep); }
.nd-rect-go { margin-top: 6px; } .nd-rect-go:disabled { opacity: .5; cursor: not-allowed; }
.nd-rect-need { margin: 6px 0 0; }
.nd-prog { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 12px; } .nd-prog span { display: block; height: 100%; background: var(--gold); transition: width .15s; }
.nd-rbars { display: flex; align-items: flex-end; gap: 1px; height: 84px; margin-top: 14px; padding: 0 2px; border-bottom: 1px solid var(--line-2); }
.nd-rbars span { flex: 1 1 0; min-width: 0; background: var(--line-2); border-radius: 2px 2px 0 0; }
.nd-rbars span.best { background: var(--good); } .nd-rbars span.cur { background: var(--gold); outline: 1px solid var(--gold-deep); }
.nd-raxis { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-top: 4px; font-variant-numeric: tabular-nums; }
.nd-rcur { margin: 10px 0 4px; font-size: 14.5px; }
.nd-rwins { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.nd-rwins li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--good-line); background: var(--good-bg); }
.nd-rwins li > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .nd-rwins b { font-size: 16px; font-variant-numeric: tabular-nums; }
.nd-proof { padding: 16px 18px; margin-top: 16px; }
.nd-proof h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 17px; } .nd-proof h3 svg { width: 18px; height: 18px; color: var(--indigo); }
.nd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.nd-stats > div { padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); display: grid; gap: 2px; }
.nd-stats b { font-size: 22px; font-family: var(--f-display); } .nd-stats small { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.nd-preds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nd-preds li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.nd-preds li p { margin: 2px 0 0; } .nd-preds .linkbtn { font-size: 18px; text-decoration: none; padding: 0 4px; }
.nd-out { margin-top: 6px; } .nd-out button { font-size: 13px; padding: 5px 10px; }
.nd-comm { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); } .nd-comm p { margin: 4px 0; }
.nd-ctbl { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13.5px; } .nd-ctbl th, .nd-ctbl td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); } .nd-ctbl .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .nd-stats { grid-template-columns: 1fr; } .nd-stats > div { grid-template-columns: 64px 1fr; align-items: center; } }
@media print { .nd-proof, .nd-track { display: none !important; } }
/* Ask my chart */
.ask-sec { margin-top: 8px; }
.ask-card { padding: 18px 20px; display: grid; gap: 12px; border-color: #E6D6AE; background: linear-gradient(180deg, var(--gold-softer), var(--surface) 70%); }
.ask-card > .lock-card { box-shadow: none; }
.ask-head { display: flex; gap: 12px; align-items: flex-start; } .ask-head h2 { margin: 0; font-size: 22px; } .ask-head .eyebrow { margin: 0; color: var(--gold-deep); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; } .ask-head p { margin: 2px 0 0; }
.ask-head .badge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-deep); } .ask-head .badge svg { width: 22px; height: 22px; }
.ask-form { display: flex; gap: 8px; align-items: stretch; }
.ask-form textarea { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 10px 12px; resize: vertical; min-height: 48px; }
.ask-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(211, 151, 28, .15); }
.ask-form .btn-cta { flex: none; } .ask-form .btn-cta:disabled { opacity: .6; }
.ask-ex { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-ex .chip { font: inherit; font-size: 13px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; text-align: left; }
.ask-ex .chip:hover { border-color: var(--gold); color: var(--ink); }
.ask-left, .ask-card > p.muted.small { margin: 0; }
.ask-thread { display: grid; gap: 12px; } .ask-thread:empty { display: none; }
.ask-item { display: grid; gap: 6px; }
.ask-q { justify-self: end; max-width: 85%; margin: 0; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--indigo); color: #fff; font-size: 15px; }
.ask-a { padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; line-height: 1.55; }
.ask-a p { margin: 0 0 8px; } .ask-a p:last-of-type { margin-bottom: 0; } .ask-a.err { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-line); }
.ask-cite { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; margin: 0 1px; border-radius: 6px; background: var(--gold-soft); color: var(--gold-deep); font-size: 11.5px; font-weight: 700; text-decoration: none; vertical-align: 2px; }
.ask-cite:hover { background: var(--gold); color: #fff; }
.ask-src { margin-top: 8px; font-size: 13px; color: var(--ink-2); } .ask-src summary { cursor: pointer; color: var(--gold-deep); font-weight: 600; }
.ask-src ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; } .ask-src li a { display: inline-grid; place-items: center; min-width: 20px; padding: 0 4px; border-radius: 5px; background: var(--bg); border: 1px solid var(--line); font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-decoration: none; margin-right: 4px; }
@media (max-width: 520px) { .ask-form { flex-direction: column; } .ask-card { padding: 16px; } }
.ask-card > p.muted.small { display: flex; gap: 6px; align-items: flex-start; } .ask-card > p.muted.small svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
@media (max-width: 520px) {
  .nd-preds li { grid-template-columns: minmax(0, 1fr) auto; }
  .nd-preds li > .nd-chip { grid-column: 1; grid-row: 1; justify-self: start; }
  .nd-preds li > div { grid-column: 1 / -1; grid-row: 2; }
  .nd-preds li > .linkbtn { grid-column: 2; grid-row: 1; }
}