@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Noto+Serif+Devanagari:wght@600&family=Noto+Sans+Devanagari:wght@400;600&family=Noto+Sans+Gujarati:wght@400;600&family=Noto+Sans+Tamil:wght@400;600&family=Noto+Sans+Telugu:wght@400;600&family=Poppins:wght@400;500;600&display=swap');
:root{
 --maroon:#5a0f1b;--maroon2:#3b0910;--gold:#d4a017;--gold2:#f6d77a;--goldd:#a97c0b;
 --cream:#fffaf0;--paper:#fff;--ink:#33231b;--mut:#8a7766;--line:#ecdcb6;--ok:#2e7d4f;--bad:#b3392f;
 --goldgrad:linear-gradient(135deg,#8c6508,#f6d77a 35%,#d4a017 60%,#fff0b3 80%,#a97c0b);
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.5 'Poppins',system-ui,sans-serif;color:var(--ink);display:flex;min-height:100vh;
 background:var(--cream) radial-gradient(circle at 1px 1px,#e8d49a55 1px,transparent 1.5px) 0 0/22px 22px}
.gold-text{background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* sidebar */
nav{width:228px;flex-shrink:0;background:linear-gradient(180deg,var(--maroon),var(--maroon2));color:#f1dfae;display:flex;flex-direction:column;border-right:3px solid var(--gold);position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{padding:18px 14px 12px;text-align:center;border-bottom:1px solid #d4a01744}
.brand svg{width:74px;height:74px;filter:drop-shadow(0 0 8px #f6d77a88)}
.brand .om{font:600 15px 'Noto Serif Devanagari',serif;margin-top:4px}
.brand h1{margin:2px 0 0;font:700 19px var(--head);letter-spacing:2px}
.brand small{color:#e0c98a;font-size:10px;letter-spacing:2px}
nav a{display:flex;gap:10px;align-items:center;padding:10px 18px;cursor:pointer;color:#e7d3a0;border-left:4px solid transparent;transition:.15s}
nav a:hover{background:#ffffff12}
nav a.on{background:linear-gradient(90deg,#d4a01733,transparent);border-left-color:var(--gold2);color:#fff;font-weight:600}
nav .foot{margin-top:auto;padding:12px;text-align:center;font-size:11px;color:#c9b27a}

main{flex:1;min-width:0}
.hero{background:linear-gradient(100deg,var(--maroon2),var(--maroon) 60%,#7a1a28);color:#f6e7bd;padding:14px 26px;border-bottom:3px solid var(--gold);display:flex;align-items:center;gap:18px;flex-wrap:wrap;position:relative}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:5px;background:repeating-linear-gradient(90deg,var(--gold) 0 10px,transparent 10px 16px);opacity:.55}
.hero .shloka{font:600 22px 'Noto Serif Devanagari',serif}
.hero .sub{font-size:11px;letter-spacing:2px;color:#d9c590}
.rates{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rate{background:#ffffff14;border:1px solid #d4a01788;border-radius:10px;padding:4px 10px;font-size:11px;color:#f1dfae}
.rate input{width:84px;margin-left:4px;background:#2b070d;color:var(--gold2);border:1px solid var(--goldd);font-weight:600}
.hero button{background:transparent;color:var(--gold2);border-color:var(--goldd)}
#view{padding:26px}
h2.title{font:700 26px var(--head);color:var(--maroon);margin:0 0 4px}
.orn{height:14px;margin:0 0 16px;background:linear-gradient(90deg,var(--gold),transparent);clip-path:polygon(0 45%,100% 45%,100% 55%,0 55%);opacity:.8;width:240px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 3px 14px #a97c0b14;position:relative}
.card.stat{border-top:4px solid var(--gold);background:linear-gradient(180deg,#fffdf6,#fff)}
.card .n{font:700 24px var(--head);color:var(--maroon)}
.card .l{color:var(--mut);font-size:12px}
.card h3{margin:0 0 10px;font:700 15px var(--head);color:var(--maroon)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
ul.rem{list-style:none;margin:0;padding:0}ul.rem li{padding:7px 0;border-bottom:1px dashed var(--line)}.mut{color:var(--mut)}

/* tables */
.wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;box-shadow:0 3px 14px #a97c0b14;background:#fff}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #f3e8cc;vertical-align:middle}
th{background:linear-gradient(180deg,var(--maroon),var(--maroon2));color:var(--gold2);font:600 11px 'Poppins';letter-spacing:1px;text-transform:uppercase}
tr:hover td{background:#fff8e3}

/* controls */
button,input,select,textarea{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold2);border-color:var(--gold)}
button{cursor:pointer;transition:.15s}button:hover{border-color:var(--gold)}
button.p{background:var(--goldgrad);color:#3b0910;font-weight:600;border:none;box-shadow:0 2px 8px #a97c0b55}
button.p:hover{filter:brightness(1.07)}
button.d{color:var(--bad)}
.bar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}.bar input{flex:1;min-width:180px}
.tag{display:inline-block;padding:2px 10px;border-radius:99px;background:#f8ecc4;color:var(--goldd);font-size:12px;font-weight:500}
.tag.ok{background:#d9efe1;color:var(--ok)}.tag.bad{background:#f6dcd8;color:var(--bad)}

/* dialog */
dialog{border:2px solid var(--gold);border-radius:16px;padding:22px;width:min(580px,94vw);box-shadow:0 14px 50px #0007;background:var(--cream)}
dialog::backdrop{background:#2b070dbb}
dialog h3{font:700 19px var(--head);color:var(--maroon);margin-top:0}
.f{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f label,.calc label{display:flex;flex-direction:column;font-size:12px;color:var(--mut);gap:3px}
.f .full{grid-column:1/-1}
.items{max-height:170px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px;background:#fff}
.items label{flex-direction:row;align-items:center;gap:6px;color:var(--ink);font-size:13px;padding:2px 0}
.sum{background:linear-gradient(135deg,#fff3c9,#fbe5a0);border-radius:10px;padding:12px;margin-top:12px;border:1px solid var(--gold)}
.sum div{display:flex;justify-content:space-between;padding:1px 0}
.sum .t{font:700 17px var(--head);color:var(--maroon);border-top:1px solid var(--goldd);margin-top:5px;padding-top:5px}

/* calculator */
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px}
.calc .card{border-top:4px solid var(--gold)}
.calc .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.calc table{font-size:13px}
.calc td,.calc th{padding:5px 8px}

@media(max-width:800px){
 body{flex-direction:column}nav{width:auto;height:auto;position:static;flex-direction:row;overflow-x:auto}
 .brand,nav .foot{display:none}nav a{white-space:nowrap;border-left:none;border-bottom:3px solid transparent}
 nav a.on{border-bottom-color:var(--gold2)}.hero{padding:12px 16px}#view{padding:16px}.rates{margin-left:0}
}
@media print{nav,.hero,.bar{display:none}}

/* login */
#login{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:50;
 background:radial-gradient(circle at 50% 30%,#7a1a28,#3b0910 70%)}
.lgbox{width:min(360px,92vw);background:#fffaf0;border:2px solid var(--gold);border-radius:18px;padding:26px 24px;text-align:center;box-shadow:0 20px 60px #000a;display:flex;flex-direction:column;gap:12px}
.lgbox #lgart svg{width:96px;height:96px;filter:drop-shadow(0 0 8px #d4a01799)}
.lgbox h1{font:700 26px var(--head);margin:0}
.lgbox input{padding:11px 12px}.lgbox button{padding:11px;font-size:15px}
#lgerr{color:var(--bad);min-height:18px;font-size:13px}
.lgbox small{color:var(--mut)}

/* reports */
.bars{display:flex;align-items:flex-end;gap:12px;height:170px;padding-top:10px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:11px;color:var(--mut)}
.bars .b i{display:block;width:100%;max-width:56px;border-radius:6px 6px 0 0;background:var(--goldgrad);min-height:2px}
.bars .b b{color:var(--maroon);font-size:11px}
.hbar{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:13px}.hbar span{width:110px}.hbar i{height:12px;border-radius:6px;background:var(--goldgrad);display:block}
.warn{background:#fff3cd;border:1px solid #e0b400;border-radius:10px;padding:10px 14px;margin-bottom:14px}
.prof{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
#app{flex:1;min-width:0}
@media(max-width:800px){#app{flex-direction:column!important}}

/* ===== v4: languages, motion, polish ===== */
:root{--head:'Cinzel','Noto Serif Devanagari','Noto Sans Gujarati','Noto Sans Tamil','Noto Sans Telugu',serif;
 --body:'Poppins','Noto Sans Devanagari','Noto Sans Gujarati','Noto Sans Tamil','Noto Sans Telugu',system-ui,sans-serif}
body,button,input,select,textarea{font-family:var(--body)}
#fx{position:fixed;inset:0;pointer-events:none;z-index:60}
.langsel{background:#2b070d;color:var(--gold2);border:1px solid var(--goldd);padding:5px 8px}
.lgbox .langsel{background:#fff;color:var(--ink);border:1px solid var(--line)}
.lgbox label.keep{flex-direction:row;display:flex;gap:8px;align-items:center;font-size:13px;color:var(--mut);justify-content:center}

/* gold text shimmer */
.gold-text{background-size:250% 100%;animation:shimmer 5s linear infinite}
@keyframes shimmer{to{background-position:-250% 0}}

/* page change */
#view>*{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
#view>*:nth-child(2){animation-delay:.05s}#view>*:nth-child(3){animation-delay:.1s}#view>*:nth-child(4){animation-delay:.15s}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.98)}}
.grid .card{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.grid .card:nth-child(2){animation-delay:.07s}.grid .card:nth-child(3){animation-delay:.14s}.grid .card:nth-child(4){animation-delay:.21s}.grid .card:nth-child(5){animation-delay:.28s}.grid .card:nth-child(6){animation-delay:.35s}

/* cards glow and lift */
.card{transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-5px);box-shadow:0 12px 30px #d4a01744}
.card.stat{position:relative;overflow:hidden}
.card.stat:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#fff8,transparent);transform:skewX(-20deg);animation:sweep 5s infinite}
@keyframes sweep{0%,70%{left:-60%}100%{left:130%}}

/* buttons */
button.p{position:relative;overflow:hidden}
button.p:after{content:"";position:absolute;top:0;left:-70%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#fff9,transparent);transform:skewX(-20deg);animation:sweep 3.5s infinite}
button:active{transform:scale(.95)}

/* sidebar */
nav a{position:relative;overflow:hidden}
nav a:hover{padding-left:24px}
nav a.on{animation:glow 2.5s ease-in-out infinite}
@keyframes glow{50%{box-shadow:inset 0 0 18px #f6d77a55}}
.brand svg{animation:float 4s ease-in-out infinite,halo 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
@keyframes halo{50%{filter:drop-shadow(0 0 16px #ffe08acc)}}

/* login */
#login:before,#login:after{content:"";position:absolute;width:560px;height:560px;border-radius:50%;border:2px dashed #d4a01766;animation:spin 40s linear infinite}
#login:after{width:760px;height:760px;border-style:dotted;animation-direction:reverse;animation-duration:70s}
@keyframes spin{to{transform:rotate(360deg)}}
.lgbox{position:relative;z-index:2;animation:pop .8s cubic-bezier(.2,1.2,.3,1) both}
@keyframes pop{from{opacity:0;transform:scale(.7) translateY(40px)}}
.lgbox #lgart svg{animation:float 4s ease-in-out infinite,halo 3s ease-in-out infinite}
.lglang{position:absolute;top:14px;right:14px;z-index:3}

/* toast + loader */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:70;background:var(--goldgrad);color:#3b0910;font-weight:600;padding:10px 22px;border-radius:99px;box-shadow:0 8px 30px #0006;animation:pop .5s both}
.toast.out{opacity:0;transition:.5s}
#boot{position:fixed;inset:0;z-index:80;background:#3b0910;display:flex;align-items:center;justify-content:center;transition:opacity .6s}
#boot i{width:46px;height:46px;background:var(--goldgrad);clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);animation:gem 1.2s ease-in-out infinite}
@keyframes gem{50%{transform:rotateY(180deg) scale(1.2)}}
.rate input.flash{animation:flash 1s}
@keyframes flash{30%{background:var(--gold);color:#3b0910}}

/* quick actions */
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.quick button{padding:16px 10px;font-weight:600;font-size:15px;border:1px solid var(--gold);background:linear-gradient(180deg,#fff,#fff6d8);color:var(--maroon);border-radius:14px}
.quick button b{display:block;font-size:26px;margin-bottom:4px}
.quick button:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 10px 24px #d4a01755}
.welcome{font:600 18px var(--body);color:var(--maroon);margin:0 0 12px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#lgacc{display:flex;flex-direction:column;gap:8px}
.acct{display:flex;gap:6px}.acct .p{flex:1;text-align:left;padding:11px 14px;font-size:14px}.acct .p small{opacity:.7}
.acct .x{padding:0 12px;color:var(--bad)}

#lgacc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#lgacc:empty{display:none}
.role{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border:1px solid var(--gold);border-radius:12px;background:linear-gradient(180deg,#fff,#fff3cf);font-weight:600;color:var(--maroon)}
.role b{font-size:26px}.role small{color:var(--mut);font-weight:400;text-transform:capitalize}
.role:hover{transform:translateY(-3px);box-shadow:0 8px 18px #d4a01766}
.role:first-child{grid-column:1/-1}

/* rates box */
.ratesbox{border-top:4px solid var(--gold);margin-bottom:18px;background:linear-gradient(135deg,#fffdf5,#fff3d1)}
.rb-top{display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.clock{font:700 30px var(--head);color:var(--maroon);letter-spacing:1px}
.rb-t{text-align:right}.rb-t h3{margin:0 0 2px;font-size:18px}.rb-t .mut{font-size:12px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tile{border-radius:12px;padding:10px 12px;color:#fff;box-shadow:0 3px 10px #0002}
.tile.gold{background:linear-gradient(135deg,#8c6508,#d4a017 55%,#f6d77a);color:#2b1a00}
.tile.silver{background:linear-gradient(135deg,#6b7280,#c7cdd6 60%,#f1f3f6);color:#1c2430}
.tile.plat{background:linear-gradient(135deg,#3a4a5e,#8ea3bb 60%,#dfe8f3);color:#10202f}
.tile.dia{background:linear-gradient(135deg,#1e3a5f,#3f78b5 55%,#bfe3ff);color:#fff}
.tl{font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;opacity:.85}
.tv{font:700 22px var(--head)}.tv small{font-size:12px;opacity:.7}.ts{font-size:12px;opacity:.85}
.dr{display:flex;justify-content:space-between;font-size:12px;gap:8px;border-top:1px solid #fff4;padding:2px 0}
label.inl{flex-direction:row;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}

/* customer pages */
.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card.item{text-align:center}.card.item .ic{font-size:44px}.card.item h3{margin:4px 0}.card.item .n{margin:8px 0}
.steps{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0}
.steps span{flex:1;min-width:70px;text-align:center;font-size:11px;padding:5px 4px;border-radius:99px;background:#efe6cf;color:var(--mut)}
.steps span.on{background:var(--goldgrad);color:#3b0910;font-weight:600}
h3.sub{font:700 16px var(--head);color:var(--maroon);margin:18px 0 8px}

/* ===== v5: overflow fixes ===== */
input,select,textarea{max-width:100%;min-width:0}
.f,.calc .row{grid-template-columns:repeat(2,minmax(0,1fr))}
.f>*,.calc .row>*,.grid>*,.two>*,.calc>*,.tiles>*{min-width:0}
.f input,.f select,.f textarea,.calc input,.calc select{width:100%}
.calc{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.two{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.card{overflow-wrap:anywhere}
main{overflow-x:hidden}
.bar>*{min-width:0}
dialog.wide{width:min(980px,96vw)}
dialog{max-height:92vh;overflow:auto}
.wrap table{min-width:560px}
.bill{width:100%;font-size:13px}.bill td,.bill th{padding:5px 6px}.bill input,.bill select{width:78px;padding:4px 6px}.bill select{width:70px}
.chip{display:inline-block;padding:2px 10px;border-radius:99px;background:#f8ecc4;color:var(--goldd);font-size:12px}
.dbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}

/* ===== v6: simple navigation ===== */
body{font-size:15px}
button,input,select,textarea{font-size:15px}
nav a{padding:12px 18px;font-size:15px}
.tabs{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap;padding-bottom:10px;border-bottom:2px solid var(--line)}
.tabs button{border-radius:99px;padding:9px 18px;font-weight:600;background:#fff;border:1px solid var(--line);color:var(--maroon)}
.tabs button.on{background:var(--goldgrad);border-color:var(--gold);color:#3b0910;box-shadow:0 2px 8px #a97c0b55}
.gsearch{position:relative;flex:1;min-width:210px;max-width:380px}
.gsearch input{width:100%;background:#2b070d;color:#f6e7bd;border:1px solid var(--goldd);padding:9px 12px}
.gsearch input::placeholder{color:#c9b27a}
#gs{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 12px 34px #0007;z-index:45;overflow:hidden}
#gs:empty{display:none}
.hit{padding:9px 14px;cursor:pointer;border-bottom:1px solid var(--line)}.hit:hover{background:#fff3cf}.hit small{display:block;color:var(--mut)}
.quick button{padding:20px 10px;font-size:16px}

/* brand logo, bill design */
.lglogo{max-width:150px;max-height:96px;object-fit:contain}
.brand .lglogo{max-width:120px;max-height:80px;background:#fff;border-radius:10px;padding:4px}
.bd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
#bprev{width:100%;height:640px;border:1px solid var(--line);border-radius:12px;background:#fff}
.chks{display:flex;flex-wrap:wrap;gap:6px 14px}
@media(max-width:900px){.bd{grid-template-columns:1fr}}
.f input[type=checkbox],.calc input[type=checkbox]{width:auto}
.chks label{display:flex;flex-direction:row;align-items:center;gap:6px;white-space:nowrap;color:var(--ink);font-size:13px}
@media(max-width:1250px){.bd{grid-template-columns:1fr}}

/* ===== v7: compact, uses the whole screen ===== */
main{overflow-x:clip}
/* top bar: one slim row that stays on screen while you scroll */
.hero{position:sticky;top:0;z-index:35;padding:8px 18px;gap:14px;flex-wrap:nowrap;border-bottom-width:2px}
.hero:after{display:none}
.hero .shloka{font-size:17px;white-space:nowrap}
.hero .sub{display:none}
.hero .rates{gap:8px;flex-wrap:nowrap;margin-left:auto}
.hero .rate{padding:2px 8px;font-size:11px;white-space:nowrap}
.hero .rate input{width:74px;padding:4px 6px;margin-left:3px}
.hero button{padding:5px 10px;font-size:13px;white-space:nowrap}
.hero .langsel{padding:4px 6px;font-size:13px}
.gsearch{max-width:340px}.gsearch input{padding:7px 12px;font-size:14px}
/* menu */
nav{width:206px}
.brand{padding:12px 10px 8px}
.brand svg,.brand .lglogo{width:54px;height:54px;max-width:54px;max-height:54px}
.brand .om{font-size:12px;margin-top:2px}.brand h1{font-size:15px;letter-spacing:1px}.brand small{display:none}
nav a{padding:10px 16px}
/* pages */
#view{padding:14px 20px 28px}
h2.title{font-size:22px;margin:0}.orn{margin:0 0 10px;height:10px;width:180px}
.tabs{margin:0 0 12px;padding-bottom:8px}.tabs button{padding:7px 16px}
.grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.card{padding:12px 14px}
.card.stat{padding:9px 12px}.card.stat .n{font-size:20px}
th,td{padding:8px 10px}
.bar{margin-bottom:10px}
.two{gap:12px}
/* Home */
.homehead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}.welcome{margin:0}.homehead .warn{margin:0;padding:5px 12px}
.homegrid{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:16px;align-items:start}
.homegrid .quick{grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:8px;margin-bottom:12px}
.homegrid .quick button{display:flex;align-items:center;gap:8px;padding:11px 12px;font-size:14px;text-align:left}
.homegrid .quick button b{font-size:21px;margin:0}
.homegrid .rem2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.homegrid .side .ratesbox{margin:0;position:sticky;top:76px}
.side .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.side .tv{font-size:19px}.side .clock{font-size:25px}
.side .rb-top{margin-bottom:8px}.side .rb-t{text-align:left}
.clearline{margin:6px 2px}.clearline span{white-space:nowrap}.clearline>span:first-of-type{font-weight:600}
ul.rem li{padding:5px 0}
@media(max-width:1150px){.homegrid{grid-template-columns:1fr}.homegrid .side{order:-1}.homegrid .side .ratesbox{position:static}.side .tiles{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}
/* medium screens: icon-only menu gives the content more room */
@media(min-width:801px) and (max-width:1100px){
  nav{width:62px}nav a{justify-content:center;padding:12px 0;font-size:0}nav a span{font-size:21px}nav a:hover{padding-left:0}
  .brand h1,.brand .om,nav .foot{display:none}.brand{padding:10px 4px}.brand svg,.brand .lglogo{width:42px;height:42px}
  .hero .shloka{display:none}.hero #who{display:none}
}
@media(max-width:800px){
  .hero{flex-wrap:wrap;padding:8px 12px;position:static}.hero .rates{flex-wrap:wrap;margin-left:0}.hero .shloka{font-size:15px}
  #view{padding:12px}.gsearch{max-width:none;flex:1 1 100%}
}
/* v7b: tidy rows */
.homegrid .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.homegrid .tile.dia{grid-column:1/-1}
.homegrid .quick{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
.homegrid .quick button{padding:10px;font-size:13.5px}
@media(max-width:560px){.homegrid .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v7c: shortcut buttons share one row */
.homegrid .quick{grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:8px}
.homegrid .quick button{flex-direction:column;justify-content:center;text-align:center;gap:2px;padding:10px 4px;font-size:12.5px;line-height:1.2}
.homegrid .quick button b{font-size:24px}
@media(max-width:620px){.homegrid .quick{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* v7d: phone menu = one scrolling row of labelled buttons */
@media(max-width:800px){
  nav{width:100%!important;height:auto;position:static;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:3px solid var(--gold)}
  nav a{flex:0 0 auto;white-space:nowrap;padding:11px 14px;font-size:14px;border-left:none;border-bottom:3px solid transparent;gap:6px}
  nav a.on{border-bottom-color:var(--gold2)}
}
@media(max-width:620px){.hero .shloka,.hero #who,.hero #status{display:none}.hero{gap:8px}.hero .rate input{width:66px}}

.lgnamerow{display:flex;gap:8px;align-items:center;justify-content:center}
.pen{background:transparent;border:1px solid var(--goldd);color:var(--goldd);border-radius:50%;width:26px;height:26px;padding:0;font-size:13px;cursor:pointer;line-height:1}
.pen:hover{background:var(--gold2);color:#3b0910}
.brand h1 .pen{margin-left:4px;vertical-align:middle;color:#f0d98c;border-color:#d4a01788}

/* ===== v8: sign-in screen ===== */
#login{align-items:stretch;justify-content:stretch;background:#25060c;overflow:hidden}
#login:before,#login:after{display:none}
.lgscene{position:relative;flex:1 1 58%;min-width:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;
  background:radial-gradient(ellipse at 50% 38%,#9a2538 0%,#5a0f1b 48%,#2a070d 100%)}
.lgscene:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,#ffd97a33,transparent 55%);animation:glowpulse 6s ease-in-out infinite}
.lgscene:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 42%,#fff0be22 50%,transparent 58%);transform:translateX(-100%);animation:sweepx 10s ease-in-out infinite;pointer-events:none}
@keyframes glowpulse{50%{opacity:.55}}@keyframes sweepx{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
#lgdecor{position:absolute;inset:0;pointer-events:none}
.mandala{position:absolute;left:50%;top:42%;width:min(98vh,860px);aspect-ratio:1;transform:translate(-50%,-50%);animation:spin 140s linear infinite}
.jw{position:absolute;z-index:1;filter:drop-shadow(0 6px 10px #0006);animation:floaty 7s ease-in-out infinite}
.jw1{left:8%;top:12%;width:92px}.jw2{left:11%;bottom:19%;width:86px;animation-delay:-2.2s}.jw3{right:10%;top:13%;width:66px;animation-delay:-4s}.jw4{right:9%;bottom:20%;width:104px;animation-delay:-1s}
@keyframes floaty{50%{transform:translateY(-10px) rotate(3deg)}}
.gl{position:absolute;width:15px;height:15px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:twinkle 3.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}
.lgidol{position:relative;z-index:2;height:min(56vh,500px);display:flex;align-items:center;justify-content:center;animation:floaty 9s ease-in-out infinite}
.lgidol svg.gn{height:100%;width:auto;filter:drop-shadow(0 14px 22px #000a)}
.gn-halo{transform-origin:150px 150px;animation:glowpulse 4s ease-in-out infinite}
.gn-rays{transform-origin:150px 150px;animation:spin 70s linear infinite}
.lgphoto{height:100%;aspect-ratio:1;border-radius:50%;padding:6px;background:linear-gradient(135deg,#fff4b8,#d49a14,#8f5f08);box-shadow:0 0 44px #ffd97a88,0 14px 30px #000a}
.lgphoto img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.lgbrand{position:relative;z-index:3;text-align:center}
.lgbrand .shloka{font:600 21px 'Noto Serif Devanagari',serif}
.lgbrand h1{margin:2px 0;font:700 clamp(24px,3.2vw,40px) var(--head);letter-spacing:3px;text-transform:uppercase}
.lgbrand small{color:#e9d49a;letter-spacing:2px;font-size:12px}
.lgbrand .pen{color:#f0d98c;border-color:#d4a01799}
.lgpane{flex:0 0 min(470px,42%);position:relative;display:flex;align-items:center;justify-content:center;padding:28px;background:linear-gradient(180deg,#fffdf6,#f9eed2);box-shadow:-12px 0 40px #0006;z-index:4}
.lgbox{width:100%;max-width:350px;background:none;border:none;box-shadow:none;padding:0;border-radius:0;animation:none}
.lgwelcome{font:700 26px var(--head);color:var(--maroon);margin:4px 0 0}
.lgsub{margin:0 0 6px;color:var(--mut)}
#lgmark:empty{display:none}.lgbox .lglogo{max-height:64px}
.lglang{top:12px;right:14px;z-index:6}
.lglang .langsel{background:#fff;color:var(--ink);border:1px solid var(--line)}
@media(max-width:900px){
  #login{flex-direction:column;overflow-y:auto}
  .lgscene{flex:0 0 auto;padding:46px 12px 14px}
  .lgidol{height:150px}.jw,.gl{display:none}.mandala{width:420px;top:34%}
  .lgbrand .shloka{font-size:16px}.lgbrand h1{font-size:24px}
  .lgpane{flex:1 0 auto;box-shadow:none;padding:20px 16px}
}

.lgbrand{margin-top:16px}

/* ===== v9: real painting instead of the drawing ===== */
.lgidol{height:min(54vh,470px);animation:none}
.lgphoto{position:relative;height:100%;aspect-ratio:1;border-radius:50%;padding:7px;background:linear-gradient(135deg,#fff4b8,#d49a14,#8f5f08);box-shadow:0 0 54px #ffd97a99,0 16px 34px #000b}
.lgphoto:after{content:"";position:absolute;inset:-15px;border-radius:50%;border:2px dashed rgba(246,215,122,.65);animation:spin 50s linear infinite}
.lgphoto:before{content:"";position:absolute;inset:-30px;border-radius:50%;border:1px solid rgba(246,215,122,.3)}
.lgphoto .crop{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#e9dcc4;box-shadow:inset 0 0 0 2px #7a5205}
.lgphoto .crop img{position:absolute;width:177.78%;left:-42.59%;top:-18.52%;height:auto;max-width:none;border-radius:0;object-fit:fill}
.lgphoto>img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.facebadge{position:relative;width:56px;height:56px;margin:0 auto;border-radius:50%;overflow:hidden;border:2px solid #f6d77a;box-shadow:0 0 14px #f6d77a88;background:#e9dcc4}
.facebadge img{position:absolute;width:400%;left:-158%;top:-58%;height:auto;max-width:none}
@media(min-width:801px) and (max-width:1100px){.brand .facebadge{width:42px;height:42px}}
@media(max-width:900px){.lgidol{height:170px}}
.lgphoto .crop img{left:-40.74%;top:-9.5%}

/* ===== v10: logo made from the shop name ===== */
.lgidol{height:min(46vh,380px)}
.lgemblem{position:relative;height:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;animation:floaty 9s ease-in-out infinite}
.lgemblem svg{width:100%;height:100%;filter:drop-shadow(0 14px 24px #000b)}
.lgemblem:after{content:"";position:absolute;inset:-18px;border-radius:50%;border:2px dashed rgba(246,215,122,.55);animation:spin 50s linear infinite}
.lgemblem:before{content:"";position:absolute;inset:-34px;border-radius:50%;border:1px solid rgba(246,215,122,.28)}
.lgphoto .plain{width:100%;height:100%;border-radius:50%;background:#fffaf0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lgphoto .plain img{width:78%;height:78%;object-fit:contain;position:static;border-radius:0}
.brand .logosvg{width:58px;height:58px}.brand .lglogo{border-radius:10px}
.logoprev{margin:4px 0 12px}
@media(min-width:801px) and (max-width:1100px){.brand .logosvg,.brand .lglogo{width:42px!important;height:42px!important}}
@media(max-width:900px){.lgidol{height:150px}}
.srvdown{grid-column:1/-1;background:#fff3cd;border:1px solid #e0b400;border-radius:10px;padding:10px 12px;font-size:13px;text-align:left}

/* gold loans */
.chipsrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.chipb{border-radius:99px;padding:6px 16px;background:#fff;border:1px solid var(--line);color:var(--maroon);font-weight:600}
.chipb.on{background:var(--goldgrad);border-color:var(--gold);color:#3b0910}
td.acts{display:flex;gap:6px;flex-wrap:wrap;min-width:190px}td.acts button{padding:5px 9px;font-size:12.5px}

.linkbtn{background:none;border:none;color:var(--goldd);text-decoration:underline;font-size:13px;padding:4px;cursor:pointer;margin-top:2px}
#lgpw{display:flex;flex-direction:column;gap:12px;text-align:center}

/* ===== v11: phone view ===== */
@media(max-width:700px){
  /* top bar: smaller, tidier */
  .hero{padding:6px 10px;gap:6px}.hero .rates{gap:6px}.hero .rate{padding:2px 6px;font-size:10.5px}.hero .rate input{width:62px;padding:3px 5px}
  .hero button{padding:5px 9px;font-size:12px}.hero .langsel{padding:3px 4px;font-size:12px}.gsearch input{padding:7px 10px}
  /* list tables -> cards */
  #view > .wrap{border:none;box-shadow:none;background:none;overflow:visible}
  table.rt,table.rt tbody{display:block;min-width:0!important;width:100%}
  table.rt tr:first-child{display:none}
  table.rt tr{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;margin:0 0 10px;padding:6px 12px;box-shadow:0 2px 8px #a97c0b14}
  table.rt td{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:right;border:none;border-bottom:1px dashed #f0e4c2;padding:6px 0;min-width:0}
  table.rt td:last-child{border-bottom:none}
  table.rt td::before{content:attr(data-l);flex:0 0 38%;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--mut);text-align:left}
  table.rt td[data-l=""]::before{display:none}
  table.rt td[data-l=""],table.rt td.acts{justify-content:flex-start;flex-wrap:wrap;text-align:left}
  table.rt td[colspan]{display:block;text-align:left}
  table.rt tr:hover td{background:none}
  table.rt td input,table.rt td select{width:100%;max-width:150px}
  td.acts{min-width:0}
  /* bill lines inside the New bill window */
  .bill{font-size:13px}
  /* windows use the whole screen */
  dialog{width:96vw;padding:14px;max-height:94vh}
  .f{gap:10px}
}

@media(max-width:700px){
  table.rt td{display:block;overflow:hidden}
  table.rt td::before{float:left;width:38%;padding-right:10px}
  table.rt td[data-l=""],table.rt td.acts{display:flex}
}