:root{--ink:#1e1a4d;--gold:#c9a227;--cream:#fbf6ea;--paper:#fff;--muted:#6b6785;--line:#e6dfcc;--red:#b3261e}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI","Noto Sans Malayalam","Noto Sans Tamil",sans-serif;background:var(--cream);color:var(--ink)}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--ink);color:var(--cream);flex-wrap:wrap;gap:8px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:22px;letter-spacing:.5px}
.langs button{background:none;border:1px solid #fff4;color:var(--cream);padding:6px 10px;margin-left:4px;border-radius:999px;cursor:pointer;font:inherit;font-size:14px}
.langs button.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
main{max-width:1040px;margin:0 auto;padding:16px}
.hero h1{font-size:clamp(24px,4vw,34px);margin:16px 0 4px}
.hero p{color:var(--muted);margin:0 0 16px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px;box-shadow:0 1px 2px #1e1a4d0d}
.card h2{margin:0 0 12px;font-size:19px}
form.card{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end}
label span{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
input,select{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--ink)}
button[type=submit],.ghost{padding:11px 18px;border-radius:10px;border:0;background:var(--ink);color:var(--cream);font:inherit;font-weight:600;cursor:pointer}
.ghost{background:none;color:var(--ink);border:1px solid var(--line);padding:6px 12px}
.err{color:var(--red);grid-column:1/-1;margin:0;min-height:0}
.place{position:relative}
#sugg{position:absolute;z-index:5;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px #0002;max-height:260px;overflow:auto}
#sugg li{padding:8px;border-radius:8px;cursor:pointer}
#sugg li[aria-selected=true],#sugg li:hover{background:var(--cream)}
#sugg small{color:var(--muted)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.si{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,minmax(74px,auto));border:2px solid var(--ink);border-radius:6px;overflow:hidden}
[hidden]{display:none!important}
.si .cell{border:1px solid var(--line);padding:4px 6px;font-size:13px;position:relative}
.si .cell.anim{opacity:0;animation:pop .4s forwards}
.si .cell .rn{font-size:10px;color:var(--muted);display:block}
.si .cell b{display:inline-block;margin-right:5px;font-weight:600}
.si .cell b.lagna{color:var(--red)}
.si .cell b sup{color:var(--red);font-size:9px}
.si .mid{grid-column:2/4;grid-row:2/4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--cream);font-size:13px;color:var(--muted);padding:8px}
.si .mid strong{color:var(--ink);font-size:15px}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
#wheel{width:100%;max-width:380px;display:block;margin:0 auto}
#wheel .pl{transition:transform 2.2s cubic-bezier(.6,0,.3,1)}
.hint{font-size:13px;color:var(--muted)}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:12px;color:var(--muted);font-weight:600}
td.r{color:var(--red);font-weight:700}
.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{position:relative;padding:0 0 18px 44px;opacity:0;transform:translateY(6px);transition:all .5s}
.steps li.show{opacity:1;transform:none}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font-weight:700}
.steps li:not(:last-child)::after{content:"";position:absolute;left:14px;top:32px;bottom:2px;width:2px;background:var(--line)}
.steps h3{margin:2px 0;font-size:16px}
.steps p{margin:2px 0 6px;color:var(--muted);font-size:14px}
.kv{display:flex;flex-wrap:wrap;gap:6px}
.kv span{background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:3px 8px;font-size:13px;font-variant-numeric:tabular-nums}
footer{max-width:1040px;margin:0 auto;padding:8px 16px 32px;font-size:13px;color:var(--muted)}
footer a{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.si .cell,.steps li{opacity:1;transform:none}}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}
.tabs button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.si .cell button{border:0;background:none;font:inherit;font-weight:600;padding:1px 3px;margin-right:2px;border-radius:5px;cursor:pointer}
.si .cell button.lagna{color:var(--red)}
.si .cell .vg::after{content:"★";color:var(--gold);font-size:10px;margin-left:1px}
.si .cell button.picked{outline:2px solid var(--gold);background:var(--cream)}
.vgnote{color:#8a6d00;font-size:13px}
.derive{margin-top:12px;padding:12px;border:1px dashed var(--line);border-radius:12px;background:#fffdf7}
.derive p{margin:6px 0 0;font-size:14px}
.derive .bar{width:100%;max-width:440px;display:block}
#bhavaView td b.shift{text-decoration:underline wavy var(--gold)}
#bhavaView td{white-space:normal;vertical-align:top}
#bhavaView small{color:var(--muted);font-variant-numeric:tabular-nums}
.dnow{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin-bottom:12px}
.dnow .lbl{width:100%;font-size:13px;color:var(--muted)}
.dnow .chip{border:2px solid;border-radius:12px;padding:6px 12px;display:flex;flex-direction:column;min-width:96px;background:#fff}
.dnow .chip small{color:var(--muted);font-size:12px}
.dnow .chip b{font-size:17px}
.tl{width:100%;display:block;margin:6px 0 10px}
.tl .seg{cursor:pointer}
.tl .seg:focus{outline:none}
.tl .seg:focus rect,.tl .seg.picked rect{stroke:#1e1a4d;stroke-width:1.5}
#dashaTimeline h3{font-size:15px;margin:8px 0 2px}
#dashaTimeline tr.now td{background:var(--cream);font-weight:600}