/* BD Section Portal · Divisional Office, Gondal — design system
   Colours: India Post red, postal gold, slate neutrals. Font: Inter (falls back to system UI). */
:root{
  --red:#c8102e;--red2:#e0263f;--red3:#fdecef;--red4:#9e0b22;
  --gold:#f2a900;--goldb:#fff6dc;
  --navy:#0f1d3a;--navy2:#0a1428;
  --ink:#0f172a;--ink2:#334155;--mut:#64748b;--bg:#f4f6fa;--card:#fff;--line:#e3e8ef;--line2:#eef1f6;
  --ok:#15803d;--okb:#e7f6ec;--warn:#b45309;--warnb:#fff4e0;--bad:#c81e1e;--badb:#fdecec;--blue:#1d4ed8;--blueb:#e8efff;--grey:#5b6474;--greyb:#eef1f5;
  --r:14px;--r2:10px;
  --sh:0 1px 2px rgba(15,23,42,.04),0 2px 8px rgba(15,23,42,.05);
  --sh2:0 10px 30px rgba(15,23,42,.10);
  --side:264px;--topH:60px;
  --airmail:repeating-linear-gradient(135deg,var(--red) 0 14px,#fff 14px 22px,#1d4ed8 22px 36px,#fff 36px 44px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.55 Inter,"Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans Gujarati",sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue)}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.muted{color:var(--mut)}.small{font-size:12px}.err{color:var(--bad)}.nowrap{white-space:nowrap}.right{text-align:right}
.row{display:flex;align-items:center}.between{justify-content:space-between}.end{justify-content:flex-end}.wrap{flex-wrap:wrap}.gap{gap:8px}
:focus-visible{outline:2px solid #94a3ff;outline-offset:2px}

/* ================= shell ================= */
.shell{display:flex;min-height:100vh}
.side{width:var(--side);flex:none;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40}
.brand{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);position:relative}
.brand::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--airmail);opacity:.9}
.logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(140deg,var(--red2),var(--red4));color:#fff;display:grid;place-items:center;font-weight:800;letter-spacing:.4px;box-shadow:0 6px 14px rgba(200,16,46,.30);flex:none;font-size:15px}
.logo.big{width:64px;height:64px;font-size:22px;border-radius:18px;margin:0 auto 6px}
.t1{font-weight:750;color:var(--ink);font-size:15px;line-height:1.2}.t2{font-size:11.5px;color:var(--mut);line-height:1.3}
#tabs{flex:1;overflow:auto;padding:10px 12px 16px;display:flex;flex-direction:column;gap:1px}
.navgrp{font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:#94a3b8;padding:14px 10px 6px;font-weight:700}
#tabs button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:none;color:var(--ink2);padding:9px 11px;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:500;position:relative}
#tabs button:hover{background:var(--line2);color:var(--ink)}
#tabs button.on{background:var(--red3);color:var(--red4);font-weight:650}
#tabs button.on::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:4px;border-radius:0 4px 4px 0;background:var(--red)}
#tabs button .i{color:#94a3b8}#tabs button.on .i,#tabs button:hover .i{color:inherit}
#tabs .nb{margin-left:auto;background:var(--red);color:#fff;border-radius:99px;font-size:10.5px;padding:1px 7px;font-weight:700}
body:not(.admin) [data-admin]{display:none!important}
.sidefoot{padding:12px 16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:12.5px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.sidefoot .who{flex:1;min-width:0;line-height:1.25}.sidefoot .who b{display:block;font-size:13px}
.mainwrap{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;height:var(--topH);padding:0 26px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.pagetitle{flex:1;min-width:0;line-height:1.2}
.pagetitle .crumb{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pagetitle b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .burger{display:none}
.monthbar{display:flex;align-items:center;gap:2px;background:#fff;padding:3px;border-radius:11px;border:1px solid var(--line);box-shadow:var(--sh)}
.monthbar input{border:0;background:transparent;padding:6px 6px;font-weight:650;color:var(--red4);min-width:0;width:150px}
.monthbar .ml{font-size:11px;color:var(--mut);padding-left:8px;white-space:nowrap}
.ib{border:0;background:transparent;color:inherit;line-height:1;padding:7px;border-radius:8px;cursor:pointer;display:inline-grid;place-items:center}
.ib:hover{background:var(--line2)}
main{padding:24px 28px 48px;max-width:1440px;width:100%}
.bottomnav{display:none}

/* ================= basic components ================= */
h1{margin:0;font-size:24px;letter-spacing:-.3px;line-height:1.25}h2{margin:2px 0 8px;font-size:19px;letter-spacing:-.2px}h3{margin:18px 0 10px;font-size:15.5px;letter-spacing:-.1px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:16px;box-shadow:var(--sh)}
.card h3:first-child{margin-top:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--red);color:#fff;border:1px solid var(--red);border-radius:10px;padding:8px 15px;cursor:pointer;font-weight:600;text-decoration:none;white-space:nowrap;font-size:13.5px;line-height:1.3;transition:background .12s,box-shadow .12s}
.btn:hover{background:var(--red4);box-shadow:0 4px 12px rgba(200,16,46,.25)}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}.btn.ghost:hover{border-color:var(--red);color:var(--red);box-shadow:none}
.btn.dark{background:var(--navy);border-color:var(--navy)}.btn.dark:hover{background:#1b2c55}
.btn.sm{padding:5px 11px;font-size:12.5px;border-radius:8px}.btn.lg{padding:11px 20px;font-size:15px;border-radius:12px}
.btn.danger{color:var(--bad)}.btn.danger-fill{background:var(--bad);border-color:var(--bad)}
.mini{border:1px solid var(--line);background:#fff;border-radius:7px;padding:4px 10px;font-size:12px;cursor:pointer;white-space:nowrap;font-weight:500}.mini:hover{border-color:var(--red);color:var(--red)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:650;white-space:nowrap}
.chip.pending{background:var(--badb);color:var(--bad)}.chip.prepared{background:var(--warnb);color:var(--warn)}.chip.submitted{background:var(--okb);color:var(--ok)}
.chip.c-green{background:var(--okb);color:var(--ok)}.chip.c-amber{background:var(--warnb);color:var(--warn)}.chip.c-red{background:var(--badb);color:var(--bad)}.chip.c-blue{background:var(--blueb);color:var(--blue)}.chip.c-grey{background:var(--greyb);color:var(--grey)}
.badge{display:inline-block;background:var(--red);color:#fff;border-radius:99px;font-size:10.5px;padding:0 7px;margin-left:4px;font-weight:700;line-height:18px}
label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--mut);font-weight:500}
label.inl{flex-direction:row;align-items:center;gap:6px}
label input,label select,textarea,.row input,.row select,.form3 input,.form3 select,.field{padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-size:13.5px;min-width:0}
input:focus,select:focus,textarea:focus,.field:focus{outline:3px solid #fde2e6;border-color:var(--red)}
textarea{width:100%;resize:vertical}
.form3{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:8px 0}
.note{background:var(--blueb);color:#1e3a8a;padding:9px 13px;border-radius:10px}
.okmsg{background:var(--okb);color:var(--ok);border-radius:10px;padding:9px 13px}
.warnbox{background:var(--warnb);border:1px solid #f6d79a;border-radius:11px;padding:10px 13px;margin:8px 0;display:flex;flex-direction:column;gap:6px}.warnbox p{margin:0}
.emptybox{padding:30px 20px;text-align:center;color:var(--mut);background:#fafbfd;border:1px dashed #cfd6e2;border-radius:12px}.emptybox.ok{color:var(--ok);background:var(--okb);border-color:#bfe6cf}
.loading{padding:48px;text-align:center;color:var(--mut)}
.help{background:var(--goldb);border:1px solid #f5dc98;border-radius:12px;padding:9px 15px;margin-bottom:16px}.help summary{cursor:pointer;font-weight:650;color:#7a5200}.help div{padding:6px 0 2px;font-size:13px}.help ol,.help ul{margin:4px 0;padding-left:20px}.help li{margin:3px 0}
.savedot{font-size:12px;color:var(--warn)}.savedot.ok{color:var(--ok)}

/* ================= page head, sub tabs, KPIs ================= */
.pagehead{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pagehead>div:first-child{display:flex;gap:14px;align-items:center;min-width:0}
.pagehead p{margin:3px 0 0;font-size:13px}
.phic{width:46px;height:46px;border-radius:13px;background:var(--red3);color:var(--red);display:grid;place-items:center;flex:none}
.phic svg.i{width:24px;height:24px}
.subtabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtabs button{border:0;background:none;padding:10px 13px;cursor:pointer;color:var(--mut);border-bottom:2.5px solid transparent;margin-bottom:-1px;font-weight:550;white-space:nowrap;font-size:13.5px}
.subtabs button:hover{color:var(--ink)}
.subtabs button.on{color:var(--red);border-color:var(--red);font-weight:700}
.kpis,.kpis4{display:grid;gap:12px;margin:0 0 18px}.kpis{grid-template-columns:repeat(3,1fr)}.kpis4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;box-shadow:var(--sh);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grey)}
.kpi small{color:var(--mut);font-size:12px;font-weight:500}.kpi b{display:block;font-size:24px;line-height:1.25;letter-spacing:-.4px}
.kpi.ok::before{background:var(--ok)}.kpi.warn::before{background:var(--gold)}.kpi.bad::before{background:var(--bad)}.kpi.blue::before{background:var(--blue)}

/* ================= home (welcome) ================= */
.welcome{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(120deg,var(--navy2) 0%,var(--navy) 55%,#3a1430 100%);color:#fff;padding:28px 30px 26px;margin-bottom:18px;box-shadow:var(--sh2)}
.welcome::before{content:"";position:absolute;inset:0 0 auto 0;height:7px;background:var(--airmail)}
.welcome::after{content:"";position:absolute;right:-60px;top:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(242,169,0,.25),transparent 65%)}
.welcome .wgrid{position:relative;z-index:1;display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:center}
.welcome .org{font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:#fbd77a;font-weight:700}
.welcome h1{font-size:30px;margin:6px 0 4px;letter-spacing:-.6px}
.welcome .sub{color:#cbd5e1;font-size:14px}
.welcome .hello{margin-top:14px;font-size:15px;color:#e2e8f0}.welcome .hello b{color:#fff}
.welcome .wact{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.welcome .btn.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.25)}.welcome .btn.ghost:hover{background:rgba(255,255,255,.16);color:#fff}
.welcome .btn.gold{background:var(--gold);border-color:var(--gold);color:#1f1500}.welcome .btn.gold:hover{background:#ffbb1a;box-shadow:0 6px 16px rgba(242,169,0,.35)}
.mcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:16px 18px;display:flex;gap:16px;align-items:center;backdrop-filter:blur(4px)}
.mcard .ml{font-size:12px;color:#cbd5e1}.mcard .mm{font-size:20px;font-weight:750;margin:2px 0}.mcard .md{font-size:12.5px;color:#e2e8f0}
.mcard .ring>div{background:var(--navy)}.mcard .ring{background:conic-gradient(var(--gold) calc(var(--p)*1%),rgba(255,255,255,.15) 0)}
.mcard .ring b{color:#fff}.mcard .ring small{color:#cbd5e1}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.tile{display:flex;flex-direction:column;gap:6px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s,border-color .15s;position:relative}
.tile:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:#cfd6e2}
.tile .th{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tile .tic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center}
.tile .tl{font-size:12.5px;color:var(--mut);font-weight:600}
.tile .tv{font-size:26px;font-weight:750;letter-spacing:-.6px;line-height:1.15}
.tile .ts{font-size:12.5px;color:var(--mut)}
.tile .go{color:#cbd5e1}.tile:hover .go{color:var(--red)}
.ic-red{background:var(--red3);color:var(--red)}.ic-blue{background:var(--blueb);color:var(--blue)}.ic-green{background:var(--okb);color:var(--ok)}.ic-gold{background:var(--goldb);color:#a16207}.ic-navy{background:#e7ebf5;color:var(--navy)}
.home2{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.qa{display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;border:1px solid var(--line);background:#fbfcfe;border-radius:13px;padding:13px;cursor:pointer;font-weight:600;font-size:13px;color:var(--ink);transition:.12s;min-height:96px}
.qa:hover{border-color:var(--red);background:#fff;box-shadow:var(--sh)}
.qa .tic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.qa small{font-weight:450;color:var(--mut);font-size:11.5px;line-height:1.35}
.routine{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.routine li{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.routine li:last-child{border-bottom:0}
.routine .when{font-size:11.5px;font-weight:700;color:var(--red4);background:var(--red3);border-radius:8px;padding:4px 6px;text-align:center;align-self:start}
.routine b{font-size:13.5px}.routine p{margin:2px 0 0;font-size:12.5px;color:var(--mut)}
.routine li.now .when{background:var(--red);color:#fff}
.officebox{display:flex;gap:14px;align-items:flex-start}
.officebox p{margin:2px 0;font-size:13px}
.svc{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.svc span{font-size:12px;background:var(--line2);border:1px solid var(--line);border-radius:99px;padding:3px 10px;color:var(--ink2)}

/* ================= statements page ================= */
.hero{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 24px;margin-bottom:16px;box-shadow:var(--sh);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--airmail)}
.hero h1{font-size:28px}
.ring{--p:0;width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--ok) calc(var(--p)*1%),#e8ebf1 0);display:grid;place-items:center;flex:none}
.ring>div{width:86px;height:86px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;line-height:1.1}.ring b{font-size:21px}.ring small{color:var(--mut);font-size:11px}
.steps .stepgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.step{display:flex;gap:12px;padding:13px;border:1px solid var(--line);border-radius:13px;background:#fbfcfe}
.step p{margin:3px 0 9px;font-size:12.5px;color:var(--mut)}
.sn{width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.step.done{background:var(--okb);border-color:#c5e8d3}.step.done .sn{background:var(--ok)}
.alerts{margin-bottom:16px}.alerts h3{margin-top:0}
.alert{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:1px solid #cfdcf5;background:var(--blueb);color:#1e3a8a;border-radius:11px;padding:10px 14px;margin-bottom:8px;cursor:pointer;font-size:13px}
.alert.warn{background:var(--warnb);border-color:#f3d38f;color:#7a4800}.alert.bad{background:var(--badb);border-color:#f5c3c3;color:#8a1c1c}.alert:hover{filter:brightness(.98)}
.alert.okay{background:var(--okb);border-color:#bfe6cf;color:var(--ok);cursor:default}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.scard{text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;display:flex;flex-direction:column;gap:9px;transition:.15s;box-shadow:var(--sh)}
button.scard:hover{border-color:var(--red);transform:translateY(-1px);box-shadow:0 8px 20px rgba(200,16,46,.10)}
.scard.cl{cursor:default}.sname{font-weight:600}
.smeta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut);flex-wrap:wrap}.smeta select{padding:4px 7px;border:1px solid var(--line);border-radius:7px}
.sno{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;margin-right:8px;border-radius:8px;background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;vertical-align:middle}
h2 .sno{height:30px;min-width:30px;font-size:15px}
.card.inputs{border:2px dashed #c7d2fe;background:#f8faff}.card.inputs h3{margin:0}
.inlist{margin:6px 0 0;padding-left:4px;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:13px}
.inlist li.miss,.need li.miss{color:var(--bad)}.inlist li.ok,.need li.ok{color:var(--ok)}
.need{padding-left:20px;display:flex;flex-direction:column;gap:8px}.need .muted{color:var(--mut)}
.card.auto{border-color:#c7d2fe;background:linear-gradient(135deg,#fff,#eef2ff)}.card.auto h3{margin-top:0}

/* ================= tables ================= */
.tw{overflow:auto;border:1px solid var(--line);border-radius:12px;max-height:72vh;background:#fff;-webkit-overflow-scrolling:touch}
table.grid-t{border-collapse:separate;border-spacing:0;min-width:100%;font-size:13px}
.grid-t th{background:#f6f8fb;font-weight:650;font-size:12px;color:#475569;padding:9px 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line2);text-align:center;vertical-align:middle;min-width:84px;position:sticky;top:0;z-index:1}
.grid-t thead tr:nth-child(2) th{top:auto}
.grid-t th.grp{background:#fdf0f2;color:#7a0c1d}
.grid-t td{border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);padding:0;white-space:nowrap}
.grid-t.ro td{padding:8px 10px}
.grid-t tbody tr:hover td{background:#fafbff}
.grid-t td.sl{text-align:center;color:var(--mut);padding:0 6px;min-width:36px}
.grid-t td.calc{text-align:right;padding:6px 10px;background:#fbfbfd;font-variant-numeric:tabular-nums}
.grid-t td.calc.big{font-size:15px;font-weight:700;background:transparent}
.grid-t td.plus{color:var(--ok);font-weight:600}.grid-t td.minus{color:var(--bad);font-weight:600}
.grid-t td.lab{padding:8px 10px;white-space:normal;min-width:180px}.grid-t td.wrapcell{max-width:360px}
.grid-t td.empty{padding:18px;text-align:center;color:var(--mut)}
.grid-t input{border:0;background:transparent;padding:8px;width:100%;min-width:110px;outline:none;border-radius:0}
.grid-t input.num{text-align:right;min-width:90px;font-variant-numeric:tabular-nums}
.grid-t input:focus{background:#fff7e6;box-shadow:inset 0 0 0 2px #f59e0b}
.grid-t select{border:0;background:transparent;padding:6px}
.grid-t tr.tot td{font-weight:700;background:#f1f4f9;padding:7px 10px;text-align:right}
.grid-t td.x,.grid-t th.x{min-width:34px;width:34px;text-align:center}
.del{font-size:14px;color:var(--mut)}.del:hover{color:var(--bad)}
.tools{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.savebar{position:sticky;bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:0 -4px 18px rgba(0,0,0,.08);flex-wrap:wrap}

/* ================= Aadhaar centre cards ================= */
.ccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ccard{background:#fff;border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:12px;padding:13px 15px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh)}
.ccard.hasissue{border-left-color:var(--gold)}.ccard.down{border-left-color:var(--bad);background:#fffafa}.ccard.idle{border-left-color:var(--bad);background:linear-gradient(180deg,#fff,#fff6f6)}
.cnum b{font-size:20px}.cissue{font-size:12px;background:var(--warnb);color:#7a4800;border-radius:8px;padding:5px 8px}
.cact{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;letter-spacing:.3px}
.cact::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.cact.on{color:var(--ok)}.cact.off{color:var(--bad)}.cact.na{color:var(--mut)}
.loglist{background:#f8f9fc;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-top:10px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.segs{display:inline-flex;background:var(--line2);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.segs button{border:0;background:none;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--mut)}
.segs button.on{background:#fff;color:var(--ink);box-shadow:var(--sh)}

/* ================= native tools ================= */
.drop{border:2px dashed #cbd5e1;border-radius:16px;background:#fafbfd;padding:30px 20px;text-align:center;cursor:pointer;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:8px}
.drop:hover,.drop.hover{border-color:var(--red);background:var(--red3)}
.drop .tic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center}
.drop b{font-size:15px}
.flog{display:flex;flex-direction:column;gap:3px;font-size:12.5px;margin-top:10px}.flog .ok{color:var(--ok)}.flog .bad{color:var(--bad)}
.filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:12px}
.toolhead{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.toolhead>label{flex:1 1 220px}
.mailbox{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px;font-family:"Segoe UI",system-ui,sans-serif}
.mailbox textarea,.mailbox input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff}
.rpt{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;max-width:900px;margin:0 auto;font-family:"Times New Roman",serif;color:#000}
.rpt h1{text-align:center;font-size:20px}.rpt h2{text-align:center;font-size:15px;font-weight:600;margin:4px 0}.rpt .dl{text-align:center;font-size:13px;margin-bottom:12px}
.rpt h4{text-align:center;margin:18px 0 6px;font-size:14px;text-decoration:underline}
.rpt table{border-collapse:collapse;width:100%;font-size:13px}.rpt th,.rpt td{border:1px solid #333;padding:4px 8px}.rpt th{background:#eee}.rpt td.c{text-align:center}.rpt tr.t td{font-weight:700;background:#f4f4f4}
.rpt table.sm{max-width:480px;margin:0 auto}

/* ================= misc ================= */
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px}
label.ck{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
ol.order{padding-left:0;list-style:none;counter-reset:o;display:flex;flex-direction:column;gap:4px;margin:0}
ol.order li{counter-increment:o;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:9px;padding:4px 8px;background:#fff}
ol.order li span:first-child::before{content:counter(o,decimal-leading-zero) ". ";font-weight:700;color:var(--red)}
ol.order .ib{color:var(--ink);font-size:16px}
.chart{width:100%;height:auto;margin-top:8px}.chart .gl{stroke:#e8eaef}.chart .ax{font-size:11px;fill:var(--mut)}.chart .vl{font-size:10px;fill:var(--ink)}.chart .bar{fill:var(--red2)}.chart .bar:hover{fill:var(--red)}
.overlay{position:fixed;inset:0;background:rgba(10,20,40,.55);display:grid;place-items:center;z-index:60;padding:16px;backdrop-filter:blur(2px)}
.overlay[hidden]{display:none}
#login{background:radial-gradient(circle at 25% 15%,#2a3a6a,#0a1428 70%);place-items:center}
#login::before{content:"";position:fixed;left:0;right:0;top:0;height:8px;background:var(--airmail)}
.loginCard{width:min(400px,100%);text-align:center;display:flex;flex-direction:column;gap:12px;padding:32px 28px;border-radius:20px}
.loginCard .org{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--red);font-weight:700}
.loginCard h2{margin:0}
.loginCard input{padding:12px 13px;border:1px solid var(--line);border-radius:11px;font-size:15px}
.modalCard{width:min(920px,100%);max-height:90vh;overflow:auto;border-radius:18px;padding:20px 22px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:11px 18px;border-radius:12px;z-index:70;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100vw - 32px);font-size:13.5px}
.toast.bad{background:var(--bad)}
.scrim{display:none}

/* ================= tablet ================= */
@media (max-width:1180px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .home2{grid-template-columns:1fr}
}
/* ================= mobile ================= */
@media (max-width:900px){
  :root{--topH:56px}
  .side{position:fixed;left:0;top:0;bottom:0;height:100%;transform:translateX(-102%);transition:transform .22s ease;box-shadow:12px 0 40px rgba(0,0,0,.25);width:min(300px,86vw)}
  body.navopen .side{transform:none}
  body.navopen .scrim{display:block;position:fixed;inset:0;background:rgba(10,20,40,.45);z-index:35}
  .top .burger{display:inline-grid}
  .side{z-index:50}
  .top{padding:0 10px;gap:8px}
  .pagetitle b{font-size:15px}
  .monthbar .ml{display:none}.monthbar input{width:128px;font-size:13px;padding:5px 2px}.monthbar .ib{padding:5px}
  main{padding:14px 12px 96px}
  .welcome{padding:22px 18px 20px;border-radius:16px}.welcome .wgrid{grid-template-columns:1fr;gap:16px}.welcome h1{font-size:23px}
  .tiles{grid-template-columns:repeat(2,1fr);gap:10px}.tile{padding:13px}.tile .tv{font-size:21px}.tile .tic{width:32px;height:32px}
  .qgrid{grid-template-columns:repeat(2,1fr)}
  .hero{padding:16px}.hero h1{font-size:21px}.ring{width:84px;height:84px}.ring>div{width:66px;height:66px}.ring b{font-size:17px}
  .kpis{gap:8px}.kpi{padding:10px 12px}.kpi b{font-size:19px}
  .pagehead{gap:10px;margin-bottom:14px}.pagehead h1{font-size:19px}.phic{width:40px;height:40px}
  .pagehead>div:last-child{width:100%}
  .pagehead>div:last-child .btn{flex:1 1 auto}
  .card{padding:14px;border-radius:13px}
  .grid{grid-template-columns:1fr}
  .form3{grid-template-columns:1fr 1fr}
  .modalCard{max-height:94vh;padding:16px;border-radius:16px}
  .overlay{padding:8px;align-items:end}
  .bottomnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bottomnav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--mut);padding:4px 0;cursor:pointer}
  .bottomnav button.on{color:var(--red)}
  .bottomnav svg.i{width:22px;height:22px}
  .toast{bottom:84px}
  .savebar{bottom:76px}
}
@media (max-width:480px){
  .form3{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .welcome .wact .btn{flex:1 1 auto}
}
@media print{.side,.top,.tools,.savebar,.btn,.bottomnav{display:none!important}.card{border:0;box-shadow:none}}
/* upload progress */
.uplist{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.uplist li{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:8px 11px;background:#fff}
.uplist .us{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:700;flex:none;background:var(--greyb);color:var(--grey)}
.uplist li.run{border-color:#c7d2fe;background:#f8faff}.uplist li.run .us{background:var(--blueb);color:var(--blue);animation:spin 1.2s linear infinite}
.uplist li.ok{border-color:#bfe6cf;background:var(--okb)}.uplist li.ok .us{background:var(--ok);color:#fff}
.uplist li.bad{border-color:#f5c3c3;background:var(--badb)}.uplist li.bad .us{background:var(--bad);color:#fff}
.uplist b{word-break:break-all}
.uprog{height:8px;background:var(--line2);border-radius:99px;overflow:hidden;margin-top:6px}.uprog div{height:100%;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .3s}
@keyframes spin{to{transform:rotate(360deg)}}
.kclick .kpi{text-align:left;cursor:pointer;font:inherit;color:inherit;transition:transform .12s,box-shadow .12s}.kclick .kpi:hover{transform:translateY(-1px);box-shadow:var(--sh2)}
/* Drive checklist and templates */
.dchk{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:12px}
.dc{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fbfcfe}
.dc>div{flex:1;min-width:0;font-size:13px}.dc a{word-break:break-all}
.dc .us{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:700;flex:none;background:var(--greyb);color:var(--grey)}
.dc.ok{background:var(--okb);border-color:#bfe6cf}.dc.ok .us{background:var(--ok);color:#fff}
.tplgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.tplc{display:flex;gap:12px;border:1px solid var(--line);border-radius:13px;padding:14px;background:#fbfcfe}
.tplc .tic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none}.tplc p{margin:3px 0 10px}
.lprev{border:1px solid var(--line);border-radius:12px;padding:18px 22px;background:#fff;font:13px/1.45 "Times New Roman",serif;color:#000;max-height:52vh;overflow:auto}
.lprev table.lhT{width:100%;border-bottom:1.2px solid #000;margin-bottom:6px}.lprev table.lhT td{text-align:center;font-size:12px;border:0}.lprev .ct{font-size:9px;font-weight:bold}
.lprev .norow{display:flex;justify-content:space-between;border-top:2px solid #000;border-bottom:2px solid #000;padding:3px 0;margin:6px 0 10px}.lprev .norow span:nth-child(2){margin-left:auto;margin-right:50px}
.lprev p.sub{padding-left:28px;text-indent:-28px}.lprev p.para{text-align:justify;text-indent:44px}.lprev table{border-collapse:collapse;width:100%}.lprev th,.lprev td{border:1px solid #000;padding:3px 6px}.lprev th{background:#eee}.lprev td.n{text-align:right}
.lprev .sig{text-align:right;margin-top:26px}.lprev h3{text-align:center;text-decoration:underline}.lprev .row{display:flex;justify-content:space-between}

/* =================== v4 — Business Development Cell: motion & richer visuals =================== */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes stripe{to{background-position:88px 0}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes floaty{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,14px)}}
@keyframes grow{from{width:0}}
@keyframes pop{0%{transform:scale(.96);opacity:0}100%{transform:none;opacity:1}}
#app[data-anim]>*{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
#app[data-anim]>*:nth-child(2){animation-delay:.06s}#app[data-anim]>*:nth-child(3){animation-delay:.12s}#app[data-anim]>*:nth-child(4){animation-delay:.18s}#app[data-anim]>*:nth-child(5){animation-delay:.24s}#app[data-anim]>*:nth-child(n+6){animation-delay:.3s}
#app[data-anim] .tiles5>*,#app[data-anim] .kpis4>*,#app[data-anim] .qgrid>*{animation:pop .5s cubic-bezier(.2,.7,.2,1) both}
#app[data-anim] .tiles5>*:nth-child(2),#app[data-anim] .kpis4>*:nth-child(2),#app[data-anim] .qgrid>*:nth-child(2){animation-delay:.07s}
#app[data-anim] .tiles5>*:nth-child(3),#app[data-anim] .kpis4>*:nth-child(3),#app[data-anim] .qgrid>*:nth-child(3){animation-delay:.14s}
#app[data-anim] .tiles5>*:nth-child(4),#app[data-anim] .kpis4>*:nth-child(4),#app[data-anim] .qgrid>*:nth-child(4){animation-delay:.21s}
#app[data-anim] .tiles5>*:nth-child(n+5),#app[data-anim] .kpis4>*:nth-child(n+5),#app[data-anim] .qgrid>*:nth-child(n+5){animation-delay:.28s}
.modalCard{animation:pop .25s ease both}
.brand::after,.welcome::before,.hero::before{background-size:88px 100%;animation:stripe 2.6s linear infinite}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* welcome hero */
.welcome{background:radial-gradient(1200px 400px at 85% -20%,rgba(242,169,0,.25),transparent 60%),radial-gradient(700px 400px at -10% 120%,rgba(200,16,46,.45),transparent 60%),linear-gradient(120deg,#08122a 0%,#0f1d3a 55%,#311028 100%)}
.welcome::after{display:none}
.welcome .orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.35;animation:floaty 9s ease-in-out infinite}
.welcome .o1{width:220px;height:220px;right:6%;top:-70px;background:radial-gradient(circle,#f2a900,transparent 65%)}
.welcome .o2{width:180px;height:180px;left:38%;bottom:-90px;background:radial-gradient(circle,#e0263f,transparent 65%);animation-delay:-4s}
.welcome h1{background:linear-gradient(90deg,#fff,#ffe3a1);-webkit-background-clip:text;background-clip:text;color:transparent}
.glance{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:16px 18px;backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.gl-h{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:#fbd77a;font-weight:700;margin-bottom:8px;display:flex;gap:6px;align-items:center}
.gl-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.14);font-size:13.5px;color:#cbd5e1}.gl-row:last-child{border:0}.gl-row b{color:#fff;font-size:16px}

/* home tiles */
.tiles5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}
.tiles5 .tile{overflow:hidden}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);transition:transform .7s}
.tile:hover::after{transform:translateX(100%)}
.tile .tbar{height:5px;border-radius:99px;background:var(--line2);overflow:hidden;margin-top:4px}.tile .tbar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--red),var(--gold));transition:width 1s cubic-bezier(.2,.7,.2,1)}
.qa{flex-direction:row;align-items:center;min-height:72px;gap:11px}.qa span:last-child{display:flex;flex-direction:column;gap:2px}.qa .tic{flex:none}
.qa:hover .tic{transform:scale(1.08) rotate(-4deg)}.qa .tic{transition:transform .2s}
.glass{background:linear-gradient(180deg,#fff,#fbfcff)}
.hrow{display:grid;grid-template-columns:minmax(120px,40%) 1fr 44px;gap:10px;align-items:center;padding:6px 0;font-size:13px}.hrow b{text-align:right}
.hbar{height:9px;background:var(--line2);border-radius:99px;overflow:hidden}.hbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--red2),var(--gold));animation:grow 1s cubic-bezier(.2,.7,.2,1) both}
.hbar.pay i{background:linear-gradient(90deg,#64748b,#94a3b8)}.hbar+.hbar{margin-top:4px}
.llist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.llist li{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border-bottom:1px dashed var(--line);padding-bottom:7px}
.skel{display:inline-block;height:22px;width:90px;border-radius:6px;background:linear-gradient(90deg,#eef1f6 0,#f8fafc 50%,#eef1f6 100%);background-size:800px 100%;animation:shimmer 1.2s infinite linear}
.skel.w60{width:60%;height:12px}.skel.line{display:block;width:100%;height:38px;margin-bottom:8px;border-radius:10px}

/* tables that fit the screen */
.tw{max-height:none}
.tw.fit{overflow-x:auto}
table.grid-t.fit{width:100%;table-layout:fixed}
table.grid-t.fit th{min-width:0;white-space:normal}
table.grid-t.fit td{white-space:normal;word-break:break-word}
table.grid-t.fit td.lab{min-width:0}
table.grid-t.fit td.calc{white-space:nowrap}
.grid-t tr.click{cursor:pointer}.grid-t tr.click:hover td{background:#fff6f7}
.grid-t tr.rowbad td{background:#fff7f7}
.grid-t tr.selrow td{background:#f3f7ff}
.grid-t tr.grprow td{background:var(--navy);color:#fff;font-weight:700;padding:7px 10px}
.grid-t th.sortable{cursor:pointer}.grid-t th.sortable:hover{color:var(--red)}
.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12.5px;letter-spacing:.2px}
.ok-t{color:var(--ok);font-weight:600}
.idxno{display:inline-grid;place-items:center;min-width:48px;height:38px;padding:0 8px;border-radius:10px;background:linear-gradient(140deg,var(--navy),#28407a);color:#fff;font-weight:800;font-size:16px;box-shadow:0 4px 10px rgba(15,29,58,.25)}
.svcbar{display:flex;flex-wrap:wrap;gap:6px}.svcbar .chip{border:0;cursor:pointer;padding:5px 12px;font-size:12px}.svcbar .chip.on{outline:2px solid var(--ink)}
.kclick .kpi b{transition:color .2s}.kclick .kpi:hover b{color:var(--red)}
@media (max-width:1180px){.tiles5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .tiles5{grid-template-columns:repeat(2,1fr)}
  table.grid-t.fit{table-layout:auto;min-width:640px}
  .hrow{grid-template-columns:1fr 1fr 36px}
}

.grid-t input[type=checkbox]{width:18px;height:18px;min-width:0;padding:0;accent-color:var(--red);cursor:pointer}
.home2 .qgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* UIDAI operator creation */
.stagebar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:16px}
.stg{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:13px;padding:10px 11px;cursor:pointer;box-shadow:var(--sh);transition:.15s;font-size:12.5px;min-height:84px}
.stg:hover{border-color:var(--red);transform:translateY(-1px)}
.stg .sn{width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.stg .sc{position:absolute;right:10px;top:9px;font:800 20px Inter,sans-serif;color:var(--red)}
.stg.zero .sc{color:#cbd5e1}.stg.on{background:linear-gradient(140deg,var(--red),var(--red4));color:#fff;border-color:var(--red)}.stg.on .sn{background:#fff;color:var(--red)}.stg.on .sc{color:#fff}
.stg.done .sn{background:var(--ok)}
.stagebar.mini{grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 0 4px}.stagebar.mini .stg{min-height:0;padding:7px 8px;font-size:11px;box-shadow:none}
.stchip{display:inline-block;font-size:11.5px;font-weight:650;border-radius:99px;padding:2px 9px;background:var(--greyb);color:var(--ink2)}
.stchip.s1,.stchip.s2{background:#eef2ff;color:#3730a3}.stchip.s3,.stchip.s4{background:var(--warnb);color:var(--warn)}.stchip.s5,.stchip.s6{background:#fdf2f8;color:#9d174d}.stchip.s7{background:var(--okb);color:var(--ok)}
.uoprog{height:6px;background:var(--line2);border-radius:99px;overflow:hidden;margin-top:12px}.uoprog i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));animation:grow 1s both}
.bulkbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#f8faff;border:1px solid #c7d2fe;border-radius:12px;padding:8px 12px;margin-top:12px;font-size:13px}
.doclist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.docrow{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:8px 11px;background:#fbfcfe}.docrow>div:nth-child(2){flex:1}
.docrow .us{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--greyb);color:var(--grey);flex:none}.docrow.ok{background:var(--okb);border-color:#bfe6cf}.docrow.ok .us{background:var(--ok);color:#fff}
@media (max-width:900px){.stagebar{grid-template-columns:repeat(4,1fr)}.stagebar.mini{grid-template-columns:repeat(4,1fr)}}
@media (max-width:480px){.stagebar{grid-template-columns:repeat(2,1fr)}}
.stagebar.mini{grid-template-columns:repeat(7,minmax(0,1fr))}.stagebar.mini .stg{min-width:0;overflow:hidden}.stagebar.mini .stg b{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- login ---------- */
#login{padding:0;background:#06102a;place-items:stretch}
#login::before{z-index:2}
.lgwrap{display:grid;grid-template-columns:1.25fr 1fr;min-height:100vh;width:100%}
.lghero{position:relative;overflow:hidden;color:#fff;padding:64px 56px 40px;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(900px 500px at 90% -10%,rgba(242,169,0,.28),transparent 60%),radial-gradient(800px 600px at -10% 110%,rgba(200,16,46,.55),transparent 60%),linear-gradient(130deg,#06102a,#0f1d3a 55%,#2d0f26)}
.lgorb{position:absolute;border-radius:50%;filter:blur(1px);opacity:.35;animation:floaty 10s ease-in-out infinite}
.lgorb.a{width:320px;height:320px;right:-80px;top:-60px;background:radial-gradient(circle,#f2a900,transparent 65%)}
.lgorb.b{width:260px;height:260px;left:30%;bottom:-120px;background:radial-gradient(circle,#e0263f,transparent 65%);animation-delay:-3s}
.lgorb.c{width:140px;height:140px;left:-40px;top:30%;background:radial-gradient(circle,#4f7dff,transparent 65%);animation-delay:-6s}
.lglogos{position:relative;display:flex;align-items:center;gap:18px;margin-bottom:26px;animation:rise .7s both}
.lglogos img{background:#fff;border-radius:14px;padding:8px;height:72px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.lgdiv{width:1px;height:56px;background:rgba(255,255,255,.3)}
.lgorg{position:relative;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#fbd77a;font-weight:700;animation:rise .7s .1s both}
.lghero h1{position:relative;font-size:44px;line-height:1.1;margin:10px 0 8px;letter-spacing:-1px;background:linear-gradient(90deg,#fff,#ffe3a1);-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise .7s .18s both}
.lgsub{position:relative;color:#cbd5e1;margin:0 0 28px;font-size:15px;animation:rise .7s .26s both}
.lgfeat{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:640px}
.lgfeat li{display:flex;gap:11px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:11px 13px;backdrop-filter:blur(6px);animation:rise .6s both}
.lgfeat li:nth-child(1){animation-delay:.32s}.lgfeat li:nth-child(2){animation-delay:.38s}.lgfeat li:nth-child(3){animation-delay:.44s}.lgfeat li:nth-child(4){animation-delay:.5s}.lgfeat li:nth-child(5){animation-delay:.56s}.lgfeat li:nth-child(6){animation-delay:.62s}
.lgfeat span{font-size:22px}.lgfeat b{display:block;font-size:14px}.lgfeat small{color:#aeb9cc;font-size:12px}
.lgdate{position:relative;margin-top:26px;color:#94a3b8;font-size:13px}
.lgcard{background:#fff;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:56px clamp(28px,5vw,72px);animation:fadein .6s both}
.lgcard .logo.big{margin:0 0 6px}
.lgcard h2{font-size:28px;margin:0;letter-spacing:-.5px}
.lgfield{font-size:13px;color:var(--ink2);font-weight:600;gap:7px}
.pwbox{position:relative;display:block}.pwbox input{width:100%;padding:14px 46px 14px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;background:#f8fafc}
.pwbox input:focus{background:#fff}.pweye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;font-size:18px;cursor:pointer;opacity:.6}
.lgcard .btn.lg{padding:14px;font-size:16px;border-radius:12px;background:linear-gradient(135deg,var(--red2),var(--red4));box-shadow:0 10px 24px rgba(200,16,46,.3)}
.lgfoot{margin-top:6px}
@media (max-width:900px){.lgwrap{grid-template-columns:1fr}.lghero{padding:44px 22px 26px}.lghero h1{font-size:30px}.lgfeat{grid-template-columns:1fr 1fr}.lgfeat li{padding:9px}.lgfeat small{display:none}.lglogos img{height:54px}.lgcard{padding:30px 22px 40px}}
/* ---------- welcome after login ---------- */
.welcomefx{position:fixed;inset:0;z-index:90;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:radial-gradient(900px 500px at 50% 0%,rgba(242,169,0,.25),transparent 60%),radial-gradient(800px 600px at 50% 110%,rgba(200,16,46,.5),transparent 60%),linear-gradient(130deg,#06102a,#0f1d3a 55%,#2d0f26);animation:fadein .35s both;transition:opacity .6s,transform .6s}
.welcomefx[hidden]{display:none}.welcomefx.out{opacity:0;transform:scale(1.04)}
.wfx-stripe{position:absolute;left:0;right:0;top:0;height:10px;background:var(--airmail);background-size:88px 100%;animation:stripe 1.2s linear infinite}
.wfx-in{text-align:center;padding:20px}
.wfx-stamp{width:120px;height:120px;margin:0 auto 22px;background:#fff;border-radius:18px;display:grid;place-items:center;box-shadow:0 20px 50px rgba(0,0,0,.4);outline:6px dashed rgba(255,255,255,.35);outline-offset:6px;animation:stampin .9s cubic-bezier(.2,1.4,.4,1) both}
.wfx-stamp img{width:86px}
.wfx-hi{color:#fbd77a;letter-spacing:2px;text-transform:uppercase;font-size:13px;font-weight:700;animation:rise .6s .5s both}
.welcomefx h1{font-size:clamp(26px,5vw,48px);margin:10px 0 6px;letter-spacing:-1px;animation:rise .7s .65s both}
.welcomefx h1 span{background:linear-gradient(90deg,#fff,#ffd36b);-webkit-background-clip:text;background-clip:text;color:transparent}
.welcomefx p{color:#cbd5e1;margin:0;animation:rise .7s .8s both}
.wfx-bar{width:220px;height:5px;margin:26px auto 0;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}.wfx-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red2),var(--gold));animation:grow 2.4s .3s ease both}
@keyframes stampin{0%{transform:scale(2.2) rotate(-18deg);opacity:0}70%{transform:scale(.95) rotate(3deg);opacity:1}100%{transform:none}}

/* ---------- login = the welcome scene with a quiet code box ---------- */
#login{background:none;padding:0}
#login::before{display:none}
.lgsplash{position:fixed;inset:0;display:grid;place-items:center;color:#fff;overflow:hidden;
  background:radial-gradient(900px 500px at 50% 0%,rgba(242,169,0,.25),transparent 60%),radial-gradient(800px 600px at 50% 110%,rgba(200,16,46,.5),transparent 60%),linear-gradient(130deg,#06102a,#0f1d3a 55%,#2d0f26)}
.lgsplash .wfx-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px}
.lgsplash h1{font-size:clamp(26px,5vw,48px);margin:10px 0 6px;letter-spacing:-1px;animation:rise .7s .65s both}
.lgsplash h1 span{background:linear-gradient(90deg,#fff,#ffd36b);-webkit-background-clip:text;background-clip:text;color:transparent}
.lgsplash p{color:#cbd5e1;margin:0;animation:rise .7s .8s both}
.wfx-bar.idle i{width:100%;animation:none;background:linear-gradient(90deg,var(--red2),var(--gold),var(--red2));background-size:200% 100%;animation:barflow 3s linear infinite}
@keyframes barflow{to{background-position:200% 0}}
.lgcode{margin-top:26px;width:130px;padding:6px 4px;border:0;border-bottom:1px solid rgba(255,255,255,.12);background:transparent;color:#fff;text-align:center;font:14px Inter,system-ui;letter-spacing:5px;opacity:.28;outline:none;transition:opacity .3s,border-color .3s,width .3s;caret-color:#fbd77a}
.lgcode:hover{opacity:.5}.lgcode:focus{opacity:.9;border-bottom-color:rgba(251,215,122,.6);width:170px}
.lgcode.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.lgerr{min-height:18px;margin-top:8px!important;font-size:12px;color:#fca5a5!important;animation:none!important}

.lgclock{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:2px;animation:rise .7s .9s both}
.lgclock .cd{font-size:13px;color:#cbd5e1;letter-spacing:.5px}.lgclock .ct{font:700 30px/1.1 Inter,system-ui;letter-spacing:1px;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 24px rgba(242,169,0,.35)}
.topclock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;margin-right:4px}.topclock .cd{font-size:11px;color:var(--mut)}.topclock .ct{font:700 15px Inter,system-ui;font-variant-numeric:tabular-nums;color:var(--ink)}
@media (max-width:900px){.topclock .cd{display:none}.topclock .ct{font-size:13px}}
@media (max-width:420px){.topclock{display:none}}
#login .lgcode,#login .lgcode:focus,#login .lgcode:focus-visible{outline:none!important;box-shadow:none!important;border-top:0;border-left:0;border-right:0;border-radius:0}