/* ui.css — v8 redesign. Palette from Assamese gamosa (white cloth, red woven border) and muga silk gold. Overrides the base tokens in index.html. */
:root{--paper:#f6f6f3;--card:#fff;--ink:#1c1d26;--mut:#5f6270;--line:#e2e2dc;--red:#b4121b;--maroon:#b4121b;--gold:#c79a1c;--boy:#2f55b8;--girl:#b8338a;--gr:#1f8a5b;--ac:#b4121b;--chart-line:#6b6f80;--r:14px}
[data-theme=dark]{--paper:#101216;--card:#181b22;--ink:#eceae4;--mut:#a3a7b3;--line:#ffffff1f;--red:#e0414b;--maroon:#ff8d93;--gold:#e3b84a;--boy:#93aaff;--girl:#f08fcb;--ac:#ff8d93;--chart-line:#aab0c4}
body{font:16px/1.65 "Anek Bangla","Noto Sans Bengali","Noto Sans Assamese",system-ui,sans-serif;background:var(--paper)}body:before{display:none}
h1,h2,h3,h4,.rh,.pf h2,.hero h3,details.sec>summary,.cta{font-family:"Anek Bangla","Noto Sans Bengali",system-ui,sans-serif}
.gam{height:12px;border-block:3px solid var(--red);background:linear-gradient(135deg,var(--red) 25%,#0000 25%) -6px 0,linear-gradient(225deg,var(--red) 25%,#0000 25%) -6px 0,linear-gradient(315deg,var(--red) 25%,#0000 25%),linear-gradient(45deg,var(--red) 25%,#0000 25%);background-size:12px 12px;box-sizing:content-box;height:6px}
.mast{padding-top:16px;align-items:center}.brand{display:flex;gap:12px;align-items:center;min-width:0}.brand svg{flex:none}
.mast h1{font-weight:700;font-size:clamp(20px,4.6vw,28px);color:var(--ink);letter-spacing:0}.orn{display:none}
.chip,.ib{border-radius:12px;background:var(--card);font-weight:500}.chip:hover,.ib:hover{border-color:var(--ink)}
.lead{font-size:clamp(17px,2.6vw,20px);color:var(--ink);max-width:36em;margin:10px 0 22px}
.duo{gap:16px}.pf{border-radius:var(--r);outline:0;padding:0;overflow:hidden;box-shadow:0 1px 2px #0000000d}
.pf>*{margin-inline:20px}.pf>h2:first-child{margin:0 0 4px;padding:14px 20px;font-size:19px;background:color-mix(in srgb,currentColor 9%,var(--card));border-bottom:3px solid currentColor}
.pf>:last-child{margin-bottom:20px}.boy h2{color:var(--boy)}.girl h2{color:var(--girl)}
label{color:var(--ink);font-size:14px;font-weight:500}label span{margin-bottom:5px}
.pf input{border-radius:12px;background:var(--card);min-height:50px;border-color:#9a9eac66}.pf input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 45%,transparent)}
.qc{border-style:solid;background:var(--paper)}
.bar2{background:linear-gradient(#0000,var(--paper) 35%);z-index:5}
.cta{background:var(--red);border-radius:14px;min-height:56px;font-size:18px;font-weight:700;box-shadow:0 6px 18px color-mix(in srgb,var(--red) 35%,transparent)}.cta:hover{filter:brightness(1.08)}[data-theme=dark] .cta{background:var(--red)}
.link{color:var(--ink)}
.top2{background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px)}
.spill{color:var(--ink)}
.card{border-radius:var(--r)}
.hero{outline:0;border-radius:18px;padding:26px;position:relative;overflow:hidden;gap:26px}
.hero:before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--red),var(--gold))}
.ring{width:132px;height:132px}.ring i{width:102px;height:102px;font-weight:800;font-size:30px}
.hero h3{font-size:22px;color:var(--ink);font-weight:700}
.fl{font-weight:600;padding:4px 11px}.ok1{background:#d9f2e4;color:#0f5132}.mid{background:#fcefc2;color:#5e4600}.bad{background:#fcdcdc;color:#8a1a1a}
[data-theme=dark] .ok1{background:#17402d;color:#b8f0d2}[data-theme=dark] .mid{background:#4a3b0c;color:#ffe9a3}[data-theme=dark] .bad{background:#4d1c20;color:#ffc9cc}
.snav{position:sticky;top:57px;z-index:15;display:flex;gap:8px;overflow-x:auto;padding:10px 0;margin:14px 0 4px;background:var(--paper);scrollbar-width:none}.snav::-webkit-scrollbar{display:none}
.snav button{flex:none;border:1px solid var(--line);background:var(--card);border-radius:99px;padding:7px 14px;font-size:14px;font-weight:500;min-height:38px;white-space:nowrap}
.snav button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
details.sec{border-left:1px solid var(--line);border-radius:var(--r);scroll-margin-top:112px;overflow:hidden}
details.sec>summary{font-size:16.5px;font-weight:700;color:var(--ink);padding:14px 18px}
details.sec>summary:after{content:"";width:9px;height:9px;border:solid var(--mut);border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 4px 4px 8px;flex:none}details.sec[open]>summary:after{content:"";transform:rotate(-135deg);margin-bottom:-2px}
details.sec[open]>summary{border-bottom:1px solid var(--line)}
th{font-size:13px}td,th{padding:10px 8px}table{font-size:15px}.note{font-size:13.5px}
.ctl .chip{font-size:14px}
dialog{border-radius:var(--r)}.rw{border-radius:12px}
@media(max-width:560px){.mast,main{padding-inline:14px}.snav{top:53px}.hero{padding:20px}.pf>*{margin-inline:16px}.pf>h2:first-child{padding-inline:16px}}
@media print{.gam,.snav{display:none}}
/* v9 visuals */
.as,.en{display:inline}html[lang=as] .en,html:not([lang=as]) .as{display:none}
.steps{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.steps li{display:flex;gap:10px;align-items:center;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;font-size:14px;font-weight:500;line-height:1.3}
.steps svg{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;background:color-mix(in srgb,var(--gold) 22%,var(--card));stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){.steps{grid-template-columns:1fr}.steps li{padding:10px 12px}}
.viz{margin-top:14px;display:grid;gap:18px}.viz h3{font-size:16px;margin:0 0 8px}
.vtop{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}@media(max-width:700px){.vtop{grid-template-columns:1fr}}
.venn{width:100%;max-width:340px;margin:auto;display:block}.venn circle{mix-blend-mode:multiply;fill-opacity:.62}[data-theme=dark] .venn circle{mix-blend-mode:screen;fill-opacity:.5}
.venn text{fill:var(--ink);text-anchor:middle;font-family:"Anek Bangla",system-ui}
.vnames{display:flex;justify-content:space-between;gap:10px;font-weight:700;font-size:15px;max-width:340px;margin:2px auto 0}.vnames small{display:block;font-weight:400;color:var(--mut);font-size:12.5px}
.vnames div:first-child{color:var(--boy)}.vnames div:last-child{color:var(--girl);text-align:right}
.radar{width:100%;max-width:320px;margin:auto;display:block}.radar .gr{fill:none;stroke:var(--line)}.radar .ax{stroke:var(--line)}.radar text{fill:var(--mut);font-size:11.5px;text-anchor:middle;font-family:"Anek Bangla",system-ui}
.radar .pl{fill:color-mix(in srgb,var(--gold) 38%,transparent);stroke:var(--red);stroke-width:2.2;stroke-linejoin:round;transform-origin:150px 125px;animation:grow .9s cubic-bezier(.2,.7,.2,1) both}
.radar circle{fill:var(--red)}
.kb{display:grid;grid-template-columns:76px 1fr 44px;gap:10px;align-items:center;font-size:14px;margin:7px 0}.kb b{font-weight:500}.kb em{font-style:normal;text-align:right;color:var(--mut);font-variant-numeric:tabular-nums}
.kb span{height:9px;background:var(--line);border-radius:9px;overflow:hidden}.kb i{display:block;height:100%;border-radius:9px;transform-origin:left;animation:fill .8s cubic-bezier(.2,.7,.2,1) both}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}@media(max-width:700px){.tiles{grid-template-columns:1fr 1fr}}
.tile{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center;background:var(--card)}.tile svg{width:32px;height:32px;flex:none}.tile b{display:block;font-size:14.5px}.tile small{color:var(--mut);font-size:12.5px;line-height:1.3;display:block}
.tile.ok{border-color:#1f8a5b55}.tile.warn{border-color:#c79a1c88}.tile.bad{border-color:#b4121b66}
.vact{display:flex;gap:8px;flex-wrap:wrap}
@keyframes grow{from{transform:scale(.05);opacity:0}}@keyframes fill{from{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.radar .pl,.kb i{animation:none}}
@media print{.steps{display:none}}