:root{
  /* SRA (sra.gov.in) palette: rose-red -> violet -> indigo hero, logo red/indigo, violet actions */
  --bg:#f4f8fc; --panel:#ffffff; --panel2:#f6f8fd; --line:#e3e8f2; --line2:#d0d7e6;
  --text:#26334a; --muted:#5f6c85; --accent:#613af5; --accent2:#4b28d9; --gold:#d84941;
  --ok:#0e8f62; --bad:#d63a4a; --warn:#b4690e;
  --navy:#2c2a6e; --navy2:#3e3da5;
  --hero:linear-gradient(155deg,#ac464f 0%,#97435d 22%,#74427a 52%,#4d3d97 78%,#3e3da5 100%);
  --shadow:0 1px 3px rgba(40,30,110,.08),0 6px 18px rgba(40,30,110,.07);
}
*{box-sizing:border-box;margin:0}
html{color-scheme:light}
body{font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;font-size:15px;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
.i{width:18px;height:18px;flex:none;vertical-align:-4px}
.glass{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}

/* ---------- buttons / inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--accent2);cursor:pointer;padding:9px 16px;border-radius:9px;background:var(--accent);color:#fff;font-weight:600;font-size:.9rem;transition:background .18s,box-shadow .18s,transform .18s;box-shadow:0 1px 2px rgba(20,60,160,.25);text-decoration:none}
.btn:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(31,95,214,.3);text-decoration:none}
.btn:active{transform:none}
.btn.big{width:100%;padding:12px;font-size:1rem;margin-top:8px}
.btn.ghost{background:#fff;border-color:var(--line2);color:var(--text);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:#f5f9ff;box-shadow:none}
.btn.danger{background:var(--bad);border-color:#b02a3c}
.btn.danger:hover{background:#b02a3c}
.btn[disabled]{opacity:.55;pointer-events:none}
.ico{border:1px solid var(--line2);background:#fff;border-radius:8px;width:30px;height:30px;cursor:pointer;display:inline-grid;place-items:center;transition:.18s;color:var(--muted)}
.ico:hover{color:var(--accent);border-color:var(--accent);background:#f2f7ff}
.ico .i{width:15px;height:15px;vertical-align:0}
.fld{display:block;margin:12px 0}
.fld span{display:block;font-size:.78rem;color:var(--muted);margin-bottom:6px;letter-spacing:.3px;font-weight:600}
.fld span b{color:var(--bad)}
input,select,textarea{width:100%;background:#fff;border:1px solid var(--line2);border-radius:9px;padding:10px 12px;outline:0;transition:border-color .18s,box-shadow .18s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,95,214,.15)}
input::placeholder,textarea::placeholder{color:#93a0b6}
textarea{min-height:80px;resize:vertical}

/* ---------- login ---------- */
.login-split{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.brand-panel{position:relative;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(155deg,#16305c 0%,#0f2142 65%,#0b1a35 100%);color:#fff;overflow:hidden}
.brand-panel::after{content:"";position:absolute;right:-180px;bottom:-180px;width:520px;height:520px;border-radius:50%;border:1px solid rgba(226,190,110,.3);box-shadow:0 0 0 60px rgba(226,190,110,.05),0 0 0 120px rgba(226,190,110,.03);pointer-events:none}
.brand-top{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.2rem;letter-spacing:.3px;animation:fade .7s both}
.brand-top .i{width:30px;height:30px;color:#e2be6e}
.brand-copy{max-width:520px;animation:rise .8s .1s both}
.brand-copy h1{font-size:2.5rem;line-height:1.15;font-weight:700;letter-spacing:-.5px;margin-bottom:14px}
.brand-copy h1 em{font-style:normal;color:#e2be6e}
.brand-copy p{color:#bccae4;font-size:1.05rem;margin-bottom:26px}
.brand-copy ul{list-style:none;padding:0;display:grid;gap:14px}
.brand-copy li{display:flex;gap:12px;align-items:center;color:#e3eaf8}
.brand-copy li .i{color:#9cc0ff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:7px;width:34px;height:34px}
.brand-foot{color:#8fa2c6;font-size:.8rem}
.form-panel{display:grid;place-items:center;padding:28px;background:#fff}
.login-card{width:min(400px,100%);animation:rise .7s .15s both}
.login-card h2{font-size:1.7rem;font-weight:700;letter-spacing:-.3px;color:var(--navy)}
.sub{color:var(--muted);margin:4px 0 22px}
.step{display:none}
.step.on{display:block;animation:slide .4s ease both}
.hint{color:var(--muted);margin-bottom:16px}
.hint b{color:var(--text)}
.otp{display:flex;gap:9px;margin-bottom:12px}
.otp input{width:100%;height:54px;text-align:center;font-size:1.5rem;font-weight:700;padding:0;border-radius:10px;font-variant-numeric:tabular-nums}
.otp.shake{animation:shake .4s}
.row-links{display:flex;justify-content:space-between;margin-top:16px;font-size:.88rem}
.msg{min-height:22px;margin-top:14px;font-size:.88rem;color:var(--bad)}
.msg.ok{color:var(--ok)}
.foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.foot .i{width:14px;height:14px}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@keyframes pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- app shell ---------- */
.shell{display:flex;min-height:100vh}
.side{width:244px;flex:none;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:20px 14px;background:linear-gradient(180deg,#16305c,#0f2142);border:0;border-radius:0;box-shadow:2px 0 14px rgba(15,33,66,.18);color:#fff}
.brand{display:flex;align-items:center;gap:10px;padding:2px 10px 22px;font-weight:700;font-size:1.12rem;letter-spacing:.3px}
.brand .i{width:26px;height:26px;color:#e2be6e}
.navlabel{font-size:.7rem;letter-spacing:1.4px;color:#7f93b8;text-transform:uppercase;padding:0 12px 8px;font-weight:600}
.nav{display:flex;flex-direction:column;gap:3px;flex:1}
.nav button{display:flex;align-items:center;gap:12px;background:none;border:0;color:#c3d0ea;padding:10px 12px;border-radius:9px;cursor:pointer;text-align:left;transition:.18s;position:relative;font-weight:500}
.nav button:hover{background:rgba(255,255,255,.08);color:#fff}
.nav button.on{color:#fff;background:rgba(255,255,255,.14)}
.nav button.on::before{content:"";position:absolute;left:-14px;top:18%;height:64%;width:3px;border-radius:0 3px 3px 0;background:#e2be6e}
.nav button.on .i{color:#e2be6e}
.side .btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.side .btn.ghost:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4)}
.side .logout{margin-top:auto;justify-content:flex-start}
.main{flex:1;min-width:0;padding:0 28px 28px}
.top{display:flex;align-items:center;gap:14px;padding:16px 0;margin-bottom:6px;border:0;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;background:rgba(242,245,250,.94);backdrop-filter:blur(8px);border-radius:0;box-shadow:none}
.top h2{flex:1;font-size:1.3rem;font-weight:650;letter-spacing:-.2px;color:var(--navy)}
.burger{display:none}
.who{display:flex;gap:10px;align-items:center}
.who b{font-size:.9rem}
.who small{display:block;color:var(--gold);font-size:.7rem;text-transform:uppercase;letter-spacing:1.2px;font-weight:700}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--navy);display:grid;place-items:center;font-weight:700;color:#fff}
.view{padding-top:18px;animation:fade .4s both}

/* ---------- dashboard ---------- */
.welcome{padding:24px 28px;margin-bottom:18px;position:relative;overflow:hidden;background:linear-gradient(120deg,#16305c,#1d4180);border:0;color:#fff}
.welcome::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#e2be6e}
.welcome h3{font-size:1.4rem;font-weight:650;margin-bottom:4px;letter-spacing:-.2px}
.welcome p{color:#c6d4ee}
.welcome .btn{background:#fff;color:var(--navy);border-color:#fff}
.welcome .btn:hover{background:#eaf1ff}
.quick{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}
.stat{padding:20px;position:relative;cursor:pointer;transition:.22s;animation:pop .55s both;display:flex;flex-direction:column;gap:2px}
.stat:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 26px rgba(20,60,140,.14)}
.stat .e{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px;background:#e8f0fe;color:var(--accent)}
.stat .e .i{width:21px;height:21px;vertical-align:0}
.stat.gold .e{background:#fbf3e0;color:var(--gold)}
.stat.warn .e{background:#fdeed9;color:var(--warn)}
.stat .n{font-size:2rem;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;order:2;color:var(--navy)}
.stat .l{color:var(--muted);font-size:.86rem;order:3}

/* ---------- tables ---------- */
.bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.bar .search{flex:1;min-width:220px;position:relative}
.bar .search input{padding-left:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6a84' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center;background-size:17px}
.count{color:var(--muted);font-size:.85rem}
.tw{overflow:auto;max-height:calc(100vh - 190px);padding:0}
table{width:100%;border-collapse:collapse;min-width:760px}
th{position:sticky;top:0;background:#e9eff8;z-index:2;text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.8px;color:#3a4d6e;padding:13px 14px;white-space:nowrap;font-weight:700;border-bottom:1px solid var(--line2)}
td{padding:13px 14px;font-size:.92rem;vertical-align:middle;max-width:280px;border-bottom:1px solid var(--line);background:#fff}
tbody tr{cursor:pointer;transition:background .15s;animation:rowin .45s both;animation-delay:calc(var(--i,0)*28ms)}
tbody tr:nth-child(even) td{background:#f8fafd}
tbody tr:hover td{background:#eaf2ff}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
td:first-child{color:var(--muted);font-variant-numeric:tabular-nums}
@keyframes rowin{from{opacity:0;transform:translateY(6px)}}
td .clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.acts{display:flex;gap:6px;white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:6px;font-size:.78rem;font-weight:650}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:#e2f6ee;color:var(--ok)}
.pill.bad{background:#fde8eb;color:var(--bad)}
.pill.warn{background:#fcefd9;color:var(--warn)}
.sec{display:inline-flex;gap:6px;align-items:center;font-family:ui-monospace,Consolas,monospace}
.sec .ico{width:26px;height:26px}
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
.empty .big{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;border-radius:14px;background:#e8f0fe;color:var(--accent)}
.empty .big .i{width:26px;height:26px;vertical-align:0}

/* ---------- toggle, cards, detail, import ---------- */
.seg{display:inline-flex;background:#e9eff8;border:1px solid var(--line2);border-radius:9px;padding:3px}
.seg button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:6px 12px;border-radius:7px;cursor:pointer;color:var(--muted);transition:.18s;font-size:.88rem;font-weight:500}
.seg button.on{background:#fff;color:var(--accent);box-shadow:0 1px 3px rgba(20,40,80,.15);font-weight:650}
.tw.cardwrap{background:none;border:0;box-shadow:none;padding:2px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;cursor:pointer;position:relative;transition:.22s;animation:pop .5s both;animation-delay:calc(var(--i,0)*40ms);box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 12px 28px rgba(20,60,140,.14)}
.ct{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ct h4{font-size:1.02rem;font-weight:650;word-break:break-word;color:var(--navy)}
.no{min-width:26px;height:26px;border-radius:7px;background:#fbf3e0;color:var(--gold);display:grid;place-items:center;font-size:.78rem;font-weight:700}
.kv{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:.88rem}
.kv>span{color:var(--muted);flex:none;max-width:45%}
.kv>div{text-align:right;min-width:0;word-break:break-word}
.dgrid .kv{display:block;background:var(--panel2);border:1px solid var(--line);padding:10px 14px;border-radius:9px;margin-bottom:10px;text-align:left}
.dgrid .kv>span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.9px;max-width:none;font-weight:600}
.dgrid .kv>div{text-align:left;margin-top:3px;font-size:.96rem}
.drop{border:1.5px dashed var(--line2);border-radius:12px;text-align:center;padding:26px;cursor:pointer;transition:.2s;margin-bottom:12px;color:var(--muted);background:var(--panel2)}
.drop:hover,.drop.hot{border-color:var(--accent);background:#eef4ff}
.drop .big{display:grid;place-items:center;color:var(--accent);margin-bottom:6px}
.drop .big .i{width:30px;height:30px;vertical-align:0}
.drop b{color:var(--text)}
.mapgrid .fld{margin:6px 0}

/* ---------- modal / toast ---------- */
.modal{position:fixed;inset:0;background:rgba(15,33,66,.5);backdrop-filter:blur(3px);display:none;place-items:center;z-index:50;padding:16px}
.modal.on{display:grid;animation:fade .2s}
.dlg{width:min(720px,100%);max-height:92vh;overflow:auto;padding:26px;background:#fff;animation:zoom .3s cubic-bezier(.2,.9,.3,1.1);box-shadow:0 30px 70px rgba(10,25,60,.35)}
@keyframes zoom{from{opacity:0;transform:scale(.96) translateY(14px)}}
.dlg h3{margin-bottom:4px;font-size:1.18rem;font-weight:650;display:flex;gap:10px;align-items:center;color:var(--navy)}
.dlg h3 .i{color:var(--accent)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.grid2 .full{grid-column:1/-1}
.dlg .foot-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pwrow{position:relative}.pwrow .ico{position:absolute;right:5px;top:5px;width:28px;height:28px}
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:99}
.toast{padding:12px 18px;border-radius:10px;background:var(--navy);color:#fff;box-shadow:0 10px 28px rgba(10,25,60,.35);animation:slide .3s both;border-left:4px solid #3ddc97;font-size:.9rem}
.toast.err{border-left-color:#ff7a8a}

@media (max-width:980px){
  .login-split{grid-template-columns:1fr}
  .brand-panel{display:none}
}
@media (max-width:900px){
  .side{position:fixed;z-index:40;left:0;top:0;transform:translateX(-105%);transition:transform .3s}
  .side.open{transform:none}
  .burger{display:inline-grid}
  .main{padding:0 14px 20px}
  .grid2{grid-template-columns:1fr}
  .who div{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* settings */
#sf{display:grid;gap:16px;max-width:900px}
.setcard{padding:24px}
.setcard h3{display:flex;gap:10px;align-items:center;font-size:1.05rem;color:var(--navy);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.setcard h3 .i{color:var(--accent)}
.setcard .fld span small{font-weight:400;text-transform:none;letter-spacing:0}
.presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.chip{border:1px solid var(--line2);background:#fff;border-radius:99px;padding:5px 14px;cursor:pointer;font-size:.85rem;color:var(--text);transition:.18s}
.chip:hover{border-color:var(--accent);color:var(--accent);background:#f2f7ff}
.testrow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.msgline{min-height:24px;margin-top:12px;font-size:.92rem;color:var(--muted);word-break:break-word}
.msgline.ok{color:var(--ok);font-weight:600}.msgline.bad{color:var(--bad);font-weight:600}

/* field manager */
.modhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.modhead h3{margin:0;padding:0;border:0}
.modhead small{font-weight:400;margin-left:6px}
.ftable{min-width:560px}
.ftable tbody tr{cursor:default}
.ftable .ico[disabled]{opacity:.35;pointer-events:none}
.pill.neu{background:#e8eef9;color:#3a4d6e}
.chk{display:flex;gap:10px;align-items:center;margin:14px 0;font-size:.92rem;cursor:pointer}
input[type=checkbox]{width:18px;height:18px;padding:0;accent-color:var(--accent)}

/* ===== attractive cards ===== */
.cards{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px}
.card{--ac:#1f5fd6;padding:0;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;box-shadow:0 2px 6px rgba(20,40,80,.06),0 10px 26px rgba(20,40,80,.07);transition:transform .25s,box-shadow .25s,border-color .25s}
.card::before{display:none}
.card:hover{transform:translateY(-6px);border-color:var(--ac);box-shadow:0 18px 40px color-mix(in srgb,var(--ac) 28%,transparent),0 4px 10px rgba(20,40,80,.08)}
.chead{display:flex;align-items:center;gap:12px;padding:16px 18px;color:#fff;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 45%,#0b1a35))}
.chead::after{content:"";position:absolute;right:-30px;top:-40px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.1)}
.chead::before{content:"";position:absolute;right:30px;bottom:-50px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.07)}
.cico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);position:relative;z-index:1}
.cico .i{width:21px;height:21px;vertical-align:0;color:#fff}
.ctitle{min-width:0;flex:1;position:relative;z-index:1}
.ctitle h4{font-size:1.06rem;font-weight:700;color:#fff;line-height:1.25;word-break:break-word}
.ctitle small{display:block;color:rgba(255,255,255,.8);font-size:.82rem;margin-top:2px;word-break:break-word}
.chead .no{position:relative;z-index:1;background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3);min-width:30px;height:30px;border-radius:9px}
.cbody{padding:14px 18px 6px;flex:1}
.cbadges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.ci{min-width:0}
.ci.wide{grid-column:1/-1}
.ci>span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:700;margin-bottom:2px}
.ci>div{font-size:.92rem;color:var(--text);font-weight:500;word-break:break-word}
.ci a{font-weight:500}
.cfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 18px;margin-top:10px;background:#f6f9fd;border-top:1px solid var(--line)}
.cfoot .more{font-size:.82rem;font-weight:650;color:var(--ac);transition:transform .2s}
.card:hover .cfoot .more{transform:translateX(4px)}
.cfoot .ico:hover{border-color:var(--ac);color:var(--ac)}
.cfoot a.ico{text-decoration:none}

/* ===== dashboard stat cards ===== */
.stat{overflow:hidden;border-radius:16px;padding:22px;background:linear-gradient(160deg,#fff 55%,#f1f6ff)}
.stat::after{content:"";position:absolute;right:-34px;top:-34px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(31,95,214,.16),transparent 70%);transition:.35s}
.stat:hover::after{transform:scale(1.4)}
.stat .e{width:46px;height:46px;border-radius:13px;color:#fff;background:linear-gradient(135deg,#2f6fe0,#5b92ff);box-shadow:0 8px 18px rgba(47,111,224,.35)}
.stat.gold .e{background:linear-gradient(135deg,#c8932b,#e6bd63);box-shadow:0 8px 18px rgba(200,147,43,.35)}
.stat.gold{background:linear-gradient(160deg,#fff 55%,#fff8e8)}
.stat.gold::after{background:radial-gradient(circle,rgba(200,147,43,.2),transparent 70%)}
.stat.warn .e{background:linear-gradient(135deg,#d9822b,#f0a65a);box-shadow:0 8px 18px rgba(217,130,43,.35)}
.stat.warn{background:linear-gradient(160deg,#fff 55%,#fff3e6)}
.stat.warn::after{background:radial-gradient(circle,rgba(217,130,43,.2),transparent 70%)}
.stat .n{font-size:2.15rem}
@media (max-width:520px){.cards{grid-template-columns:1fr}.cgrid{grid-template-columns:1fr}}
.ci a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== layout hardening ===== */
.main,.view,.glass,.card,.stat,.setcard,.dlg{min-width:0}
.tw.cardwrap{max-height:none;overflow:visible}
.cards{align-items:start}
.ctitle h4{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ctitle small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ci>div,.ci>span,.kv>div,.dgrid .kv>div{overflow-wrap:anywhere}
.ci>div.count{font-weight:400}
td .clamp,td a{overflow-wrap:anywhere;word-break:normal}
.dlg h3{overflow-wrap:anywhere}
.stat .l{overflow-wrap:anywhere}
.stat .n{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who{flex:none}
.bar>*{min-width:0}
#bd{position:fixed;inset:0;background:rgba(10,25,50,.5);z-index:35;display:none}
#bd.on{display:block;animation:fade .2s}
@media (min-width:900px){#bd{display:none!important}}
@media (max-width:700px){
  .seg{display:none}
  .bar .search{flex:1 1 100%}
  .bar .btn{flex:1 1 auto}
  .welcome{padding:20px}
  .stat .n{font-size:1.8rem}
  .dlg{padding:20px}
  .dlg .foot-btns{flex-wrap:wrap}
  .dlg .foot-btns .btn{flex:1 1 auto}
  .toasts{left:14px;right:14px;bottom:14px}
  .modhead{align-items:flex-start}
  .login-card h2{font-size:1.5rem}
  .otp{gap:6px}
  .otp input{height:48px;font-size:1.3rem}
  .form-panel{padding:20px 16px}
}

.ftype{display:none;margin-top:2px}
.m-brand{display:none;align-items:center;gap:10px;font-weight:700;font-size:1.1rem;color:var(--navy);margin-bottom:26px}
.m-brand .i{width:28px;height:28px;color:var(--gold)}
@media (max-width:980px){.m-brand{display:flex}}
@media (max-width:700px){
  .ftable{min-width:0}
  .ftable .c-no,.ftable .c-type{display:none}
  .ftype{display:block}
  .ftable td,.ftable th{padding:10px 8px}
  .ftable .acts{flex-wrap:wrap;max-width:76px}
}
@media (max-width:700px){.ftable .acts{display:grid;grid-template-columns:repeat(2,30px);gap:6px;max-width:none}}
@media (max-width:700px){.setcard{padding:16px 12px}.ftable .pill{font-size:.7rem;padding:2px 7px;gap:4px}.ftable td,.ftable th{padding:10px 5px}.ftable th{font-size:.66rem;letter-spacing:.4px}}

/* ===== compact animated cards ===== */
.cards{grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:18px;align-items:stretch}
.card.mini{--ac:#1f5fd6;padding:18px 18px 14px;display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden;border-radius:18px;background:#fff;border:1px solid var(--line);cursor:pointer;
  box-shadow:0 2px 6px rgba(20,40,80,.05),0 8px 22px rgba(20,40,80,.06);transition:transform .3s cubic-bezier(.2,.9,.3,1.3),box-shadow .3s,border-color .3s;animation:cardin .6s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i,0)*55ms)}
.card.mini::before{display:block;content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--ac),color-mix(in srgb,var(--ac) 40%,#e2be6e))}
.card.mini::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);transition:left .7s;pointer-events:none}
.card.mini:hover{transform:translateY(-8px) scale(1.02);border-color:var(--ac);box-shadow:0 22px 44px color-mix(in srgb,var(--ac) 30%,transparent),0 4px 10px rgba(20,40,80,.08)}
.card.mini:hover::after{left:130%}
.card.mini:focus-visible{outline:3px solid color-mix(in srgb,var(--ac) 50%,transparent);outline-offset:2px}
@keyframes cardin{from{opacity:0;transform:translateY(26px) scale(.92)}to{opacity:1;transform:none}}
.mtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card.mini .cico{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 50%,#0b1a35));border:0;box-shadow:0 8px 18px color-mix(in srgb,var(--ac) 40%,transparent);transition:transform .4s cubic-bezier(.2,.9,.3,1.5)}
.card.mini:hover .cico{transform:rotate(-8deg) scale(1.12)}
.card.mini .cico .i{width:23px;height:23px}
.card.mini .no{background:color-mix(in srgb,var(--ac) 10%,#fff);color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 25%,#fff)}
.card.mini h4{font-size:1.05rem;font-weight:700;line-height:1.3;color:var(--navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;min-height:2.6em}
.card.mini small{color:var(--muted);font-size:.84rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.mbadge{min-height:30px;margin:10px 0 4px;display:flex;align-items:center}
.mfoot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.mfoot .more{font-size:.82rem;font-weight:650;color:var(--ac)}
.mfoot .more i{font-style:normal;display:inline-block;transition:transform .25s}
.card.mini:hover .more i{transform:translateX(5px)}
.mact{opacity:0;transform:translateX(8px);transition:.25s}
.card.mini:hover .mact,.card.mini:focus-within .mact{opacity:1;transform:none}
@media (hover:none){.mact{opacity:1;transform:none}}
@media (max-width:520px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card.mini{padding:14px 12px 10px}.card.mini h4{font-size:.95rem}.mfoot .more{font-size:.74rem}}

/* ===== details popup ===== */
.dlg.detail{padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:92vh;width:min(680px,100%);border-radius:20px;animation:dzoom .45s cubic-bezier(.2,.9,.3,1.25)}
@keyframes dzoom{from{opacity:0;transform:translateY(40px) scale(.92)}to{opacity:1;transform:none}}
.dhead{--ac:#1f5fd6;position:relative;display:flex;gap:16px;align-items:flex-start;padding:24px 26px;color:#fff;overflow:hidden;flex:none;background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 40%,#0b1a35))}
.dhead::before{content:"";position:absolute;right:-50px;top:-60px;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.1)}
.dhead::after{content:"";position:absolute;right:80px;bottom:-70px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.07)}
.cico.big{width:58px;height:58px;border-radius:17px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;flex:none;position:relative;z-index:1;animation:dpop .6s .15s cubic-bezier(.2,.9,.3,1.6) both}
.cico.big .i{width:28px;height:28px;color:#fff;vertical-align:0}
@keyframes dpop{from{opacity:0;transform:scale(.4) rotate(-25deg)}to{opacity:1;transform:none}}
.dtitle{min-width:0;flex:1;position:relative;z-index:1;padding-right:34px}
.dtitle small{color:rgba(255,255,255,.75);font-size:.74rem;text-transform:uppercase;letter-spacing:1.2px;font-weight:600}
.dtitle h3{display:block;color:#fff;font-size:1.4rem;line-height:1.25;margin:2px 0 4px;overflow-wrap:anywhere}
.dsub{color:rgba(255,255,255,.88);overflow-wrap:anywhere}
.dtitle .cbadges{margin:10px 0 0}
.dtitle .pill{background:rgba(255,255,255,.95)}
.dclose{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.15);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;transition:.2s}
.dclose:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}
.dbody{overflow:auto;padding:22px 26px;flex:1;background:var(--panel2)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0;animation:tilein .5s both;animation-delay:calc(var(--d,0ms) + 250ms);transition:.2s}
.tile:hover{border-color:var(--line2);box-shadow:0 6px 16px rgba(20,40,80,.08);transform:translateY(-2px)}
.tile.wide{grid-column:1/-1}
@keyframes tilein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tile>span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.9px;color:var(--muted);font-weight:700;margin-bottom:3px}
.tile>div{font-size:.98rem;font-weight:500;overflow-wrap:anywhere}
.dfoot{display:flex;gap:10px;align-items:center;padding:14px 26px;background:#fff;border-top:1px solid var(--line);flex:none;flex-wrap:wrap}
@media (max-width:600px){.tiles{grid-template-columns:1fr}.dhead{padding:20px 18px}.dbody{padding:16px 18px}.dfoot{padding:12px 18px}.dtitle h3{font-size:1.2rem}}
.card.mini h4{min-height:0;margin-bottom:2px}

/* ===== mobile bottom navigation ===== */
#bnav{display:none}
@media (max-width:899px){
  .burger{display:none!important}
  .side,#bd{display:none!important}
  .main{padding-bottom:92px}
  .toasts{bottom:90px!important}
  #bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;justify-content:space-around;align-items:stretch;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -8px 28px rgba(15,33,66,.12);animation:bup .5s cubic-bezier(.2,.9,.3,1.2) both}
  @keyframes bup{from{transform:translateY(100%)}to{transform:none}}
  #bnav button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:0;padding:7px 2px;border-radius:14px;color:var(--muted);cursor:pointer;position:relative;font-size:.68rem;font-weight:600;transition:color .2s,background .2s,transform .15s;-webkit-tap-highlight-color:transparent}
  #bnav button .i{width:22px;height:22px;transition:transform .3s cubic-bezier(.2,.9,.3,1.6)}
  #bnav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #bnav button:active{transform:scale(.92)}
  #bnav button.on{color:var(--accent);background:rgba(31,95,214,.09)}
  #bnav button.on .i{transform:translateY(-2px) scale(1.12)}
  #bnav button.on::before{content:"";position:absolute;top:-7px;left:30%;right:30%;height:3px;border-radius:0 0 4px 4px;background:var(--accent);animation:fade .3s both}
}
/* bottom sheet */
.modal.bottom{place-items:end center;padding:0}
.dlg.sheet{width:100%;max-width:560px;border-radius:22px 22px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));animation:sheetup .35s cubic-bezier(.2,.9,.3,1.1)}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
.grab{width:42px;height:5px;border-radius:5px;background:var(--line2);margin:4px auto 12px}
.dlg.sheet h3{margin-bottom:12px}
.sheetlist{display:grid;gap:8px}
.sheetlist button{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;font-size:1rem;font-weight:600;color:var(--text);cursor:pointer;text-align:left;transition:.2s}
.sheetlist button .i{color:var(--accent);width:22px;height:22px}
.sheetlist button:active,.sheetlist button.on{background:#eef4ff;border-color:var(--accent)}
.sheetlist button.danger{color:var(--bad)}.sheetlist button.danger .i{color:var(--bad)}
.mbadge{flex-wrap:wrap;gap:6px}
/* wide tables: columns keep a natural width, the table scrolls sideways instead of breaking words */
.tw>table{width:max-content;min-width:100%}
.tw>table.ftable{width:100%}
td{min-width:84px}
td .clamp,td a{overflow-wrap:break-word;word-break:normal}
td:first-child,th:first-child{min-width:0}

/* ===== toggle view (e.g. SRA IT / Vendor VM) ===== */
.gtabs{display:inline-flex;gap:6px;padding:5px;margin-bottom:14px;background:#e6edf8;border:1px solid var(--line2);border-radius:16px;flex-wrap:wrap;max-width:100%}
.gtabs button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:10px 22px;border-radius:12px;cursor:pointer;font-weight:650;font-size:.96rem;color:var(--muted);transition:background .25s,color .25s,box-shadow .25s,transform .15s;-webkit-tap-highlight-color:transparent}
.gtabs button:hover{color:var(--accent)}
.gtabs button:active{transform:scale(.97)}
.gtabs button b{background:#fff;color:var(--muted);border:1px solid var(--line2);border-radius:99px;padding:1px 10px;font-size:.78rem;font-weight:700;transition:.25s}
.gtabs button.on{background:#fff;color:var(--accent);box-shadow:0 4px 14px rgba(20,60,140,.2)}
.gtabs button.on b{background:var(--accent);color:#fff;border-color:var(--accent)}
@media (max-width:700px){.gtabs{display:flex;width:100%}.gtabs button{flex:1;justify-content:center;padding:10px 8px;font-size:.9rem}}

/* ===================== SRA.GOV.IN THEME ===================== */
body{background:var(--bg)}
.logo-mark{width:34px;height:30px;flex:none;display:block}
.logo-tile{background:#fff;border-radius:11px;padding:6px 9px;display:grid;place-items:center;box-shadow:0 4px 14px rgba(20,10,60,.25)}
.logo-tile .logo-mark{width:30px;height:27px}

/* sidebar */
.side{background:linear-gradient(185deg,#4a3b9e 0%,#33307c 45%,#241f5c 100%);box-shadow:2px 0 16px rgba(36,31,92,.28)}
.side::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#d84941,#ac464f 35%,#74427a 70%,#3e3da5)}
.brand{gap:12px;padding-bottom:20px}
.brand .logo-tile{padding:5px 8px}
.brand span{letter-spacing:.2px}
.nav button.on{background:rgba(255,255,255,.15)}
.nav button.on::before{background:#ff7a6e}
.nav button.on .i{color:#ffb9b1}
.navlabel{color:#9d97d4}
.nav button{color:#d3d0f2}

/* login */
.brand-panel{background:var(--hero)}
.brand-panel::after{border-color:rgba(255,255,255,.28);box-shadow:0 0 0 60px rgba(255,255,255,.05),0 0 0 120px rgba(255,255,255,.03)}
.brand-top .logo-tile{padding:7px 12px;display:flex;gap:10px;align-items:center;color:#d84941;font-weight:700;font-size:1.1rem}
.brand-top{color:#fff}
.brand-copy h1 em{color:#ffd9d4}
.brand-copy p{color:#f1e7f7}
.brand-copy li{color:#fff}
.brand-copy li .i{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.brand-foot{color:#e3d6ee}
.m-brand{color:var(--navy)}
.m-brand .logo-mark{width:38px;height:34px}

/* buttons / focus / hovers */
.btn{box-shadow:0 1px 2px rgba(60,30,160,.3)}
.btn:hover{box-shadow:0 6px 16px rgba(97,58,245,.35)}
.btn.ghost:hover{background:#f4f1ff}
.btn.danger{background:#d63a4a;border-color:#b52a39}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(97,58,245,.18)}
.ico:hover{background:#f4f1ff}
.chip:hover{background:#f4f1ff}
.drop:hover,.drop.hot{background:#f4f1ff}
.sheetlist button:active,.sheetlist button.on{background:#f1eeff}
#bnav button.on{background:rgba(97,58,245,.1)}

/* top bar, banner, avatar */
.top h2{color:var(--navy)}
.avatar{background:linear-gradient(135deg,#d84941,#74427a 55%,#3e3da5);color:#fff;border:2px solid #fff;box-shadow:0 2px 8px rgba(60,30,120,.25)}
.who small{color:#d84941}
.welcome{background:var(--hero);color:#fff;border:0}
.welcome::before{background:#fff;opacity:.6}
.welcome h3,.welcome p{color:#fff}
.welcome p{opacity:.92}
.welcome .btn{background:#fff;color:#3e3da5;border-color:#fff}
.welcome .btn:hover{background:#f3eefc}

/* dashboard stat cards */
.stat{background:linear-gradient(160deg,#fff 55%,#f4f1ff)}
.stat::after{background:radial-gradient(circle,rgba(97,58,245,.16),transparent 70%)}
.stat .e{background:linear-gradient(135deg,#613af5,#8a6bff);box-shadow:0 8px 18px rgba(97,58,245,.35)}
.stat.gold{background:linear-gradient(160deg,#fff 55%,#fff1ef)}
.stat.gold::after{background:radial-gradient(circle,rgba(216,73,65,.2),transparent 70%)}
.stat.gold .e{background:linear-gradient(135deg,#d84941,#ef7d72);box-shadow:0 8px 18px rgba(216,73,65,.35)}
.stat.warn .e{background:linear-gradient(135deg,#d9822b,#f0a65a)}
.stat:hover{box-shadow:0 12px 28px rgba(60,40,150,.18)}
.stat .n,.stat .l{color:var(--navy)}
.stat .l{color:var(--muted)}

/* tables */
th{background:#efedfb;color:#3b3a7a;border-bottom-color:#d9d4f0}
tbody tr:nth-child(even) td{background:#faf9ff}
tbody tr:hover td{background:#f1eeff}
.pill.neu{background:#ebe8fa;color:#3b3a7a}
.seg{background:#ece9fa}
.gtabs{background:#ece9fa;border-color:#d9d4f0}
.gtabs button.on{box-shadow:0 4px 14px rgba(97,58,245,.22)}
.no{background:#fdeceb;color:#d84941}
.card.mini .no{background:color-mix(in srgb,var(--ac) 10%,#fff);color:var(--ac)}
.empty .big{background:#ede9fe;color:var(--accent)}
.cards .card.mini::before{background:linear-gradient(90deg,var(--ac),color-mix(in srgb,var(--ac) 40%,#ffb4ab))}

/* modal, toast, misc */
.modal{background:rgba(36,31,92,.5)}
.dlg h3 .i,.setcard h3 .i{color:var(--accent)}
.toast{background:#2c2a6e}
th:first-child{color:#3b3a7a}
.stat .e,.stat.gold .e,.stat.warn .e{color:#fff}

/* ===================== CONTRAST FIXES (text vs background, WCAG AA 4.5:1) ===================== */
:root{--muted:#55617a;--ok-text:#0b6e4b;--bad-text:#b0283a;--warn-text:#8a4f08;--brand-red:#c0352d}
input::placeholder,textarea::placeholder{color:#6f7b92;opacity:1}
.navlabel{color:#d6d2f5}
.nav button{color:#e6e3fb}
.who small{color:var(--brand-red)}
.brand-top .logo-tile,.brand-top .logo-tile span{color:var(--brand-red)}
.pill.ok{color:var(--ok-text)}
.pill.bad{color:var(--bad-text)}
.pill.warn{color:var(--warn-text)}
.pill.neu{color:#34336e}
.msg{color:#b0283a}.msg.ok{color:var(--ok-text)}
.msgline.ok{color:var(--ok-text)}.msgline.bad{color:var(--bad-text)}
.seg button,.gtabs button{color:#4d5873}
.gtabs button b{color:#4d5873}
.gtabs button.on b{color:#fff}
.count{color:#55617a}
.fld span{color:#4d5873}
th{color:#2e2d66}
.kv>span,.tile>span,.ci>span,.dgrid .kv>span{color:#4d5873}
.stat .l{color:#4d5873}
.card.mini small{color:#4d5873}
.foot{color:#4d5873}
.sub,.hint{color:#4d5873}
.row-links a,a{color:#4a2ad8}
.top h2,.stat .n{color:#262463}
/* white text on gradients: keep strong */
.welcome h3,.welcome p,.dhead,.dhead *,.chead,.brand-copy,.brand-copy *{text-shadow:none}
.welcome p{opacity:1;color:#fff}
.dtitle small{color:rgba(255,255,255,.92)}
.dsub{color:#fff}
.brand-foot{color:#f3ebf8}
.brand-copy p{color:#fff}
.dtitle .pill{background:#fff}
.dtitle .pill.ok{color:var(--ok-text)}.dtitle .pill.bad{color:var(--bad-text)}.dtitle .pill.warn{color:var(--warn-text)}

/* ===================== LANGUAGE (EN | मराठी) ===================== */
@font-face{font-family:"NotoDev";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/noto-sans-devanagari-400.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"NotoDev";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/noto-sans-devanagari-500.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"NotoDev";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/noto-sans-devanagari-600.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"NotoDev";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/noto-sans-devanagari-700.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
body,button,input,select,textarea{font-family:"NotoDev",Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
html[lang=mr] body{line-height:1.65}
html[lang=mr] .btn,html[lang=mr] .chip,html[lang=mr] .seg button,html[lang=mr] .gtabs button{line-height:1.5}
html.i18n-wait body{opacity:0}
.langsw{display:inline-flex;padding:3px;gap:2px;background:#ece9fa;border:1px solid #d9d4f0;border-radius:99px;flex:none}
.langsw button{border:0;background:none;padding:5px 13px;border-radius:99px;cursor:pointer;font-weight:650;font-size:.82rem;color:#4d5873;transition:background .2s,color .2s}
.langsw button.on{background:#fff;color:var(--accent);box-shadow:0 2px 8px rgba(60,40,150,.22)}
.langsw button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.form-panel{position:relative}
.login-lang{position:absolute;top:22px;right:24px}
@media (max-width:700px){.langsw button{padding:5px 10px}.top .langsw{order:2}.login-lang{top:14px;right:14px}}

/* ===================== PAGER + LANGUAGE ADMIN ===================== */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:12px 4px 2px;position:sticky;bottom:0;background:linear-gradient(180deg,rgba(244,248,252,0),var(--bg) 40%)}
.pg-info{color:var(--muted);font-size:.88rem}
.pg-ctl{display:flex;align-items:center;gap:6px}
.pg-n{min-width:34px;height:34px;padding:0 8px;border:1px solid var(--line2);background:#fff;border-radius:9px;cursor:pointer;font-weight:600;color:var(--text);transition:.18s}
.pg-n:hover{border-color:var(--accent);color:var(--accent)}
.pg-n.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pg-dots{padding:0 4px;color:var(--muted)}
.pg-b{width:34px;height:34px}
.pg-b[disabled]{opacity:.4;pointer-events:none}
.pg-mini{display:none;font-size:.88rem;color:var(--muted);padding:0 6px}
.pg-opt{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pg-opt label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}
.pg-opt input{width:68px;padding:6px 8px}
.pg-opt select{width:auto;padding:6px 8px}
.pg-opt .btn{padding:6px 12px}
@media (max-width:700px){.pg-nums,.pg-goto{display:none}.pg-mini{display:inline}.pager{justify-content:center}}
.langbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
.langbar select{width:auto;min-width:160px}
.ltable{min-width:760px}
.ltable td{vertical-align:middle}
.ltable .lk{max-width:340px;font-weight:600;color:var(--navy);overflow-wrap:anywhere;cursor:default}
.ltable tbody tr{cursor:default}
.lin{min-width:220px}
.lin.warn{border-color:#d9822b;background:#fff8ef}

.lin{min-width:150px}
.ltable{min-width:680px}

@media (max-width:700px){
  .ltable{min-width:0}
  .ltable thead{display:none}
  .ltable,.ltable tbody,.ltable tr,.ltable td{display:block;width:100%;max-width:none;min-width:0}
  .ltable tr{padding:12px 4px;border-bottom:1px solid var(--line)}
  .ltable td{border:0;background:transparent!important;padding:4px 0}
  .ltable .lin{width:100%;min-width:0}
}

/* ===================== sortable headers, skeleton, list pager ===================== */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{background:#e6e1fa}
th.sortable i{font-style:normal;font-size:.62rem;margin-left:6px;color:var(--accent);display:inline-block;min-width:10px}
th.sorted{color:var(--accent)}
.skel{padding:10px 14px}
.skel-row{display:grid;grid-template-columns:.4fr 1.4fr 1fr 1.6fr .8fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.skel-row i{height:14px;border-radius:7px;background:linear-gradient(90deg,#eceaf7 25%,#f7f6fd 50%,#eceaf7 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
#mpager{margin-top:6px}
#mpager .pager{background:linear-gradient(180deg,rgba(244,248,252,0),var(--bg) 35%);z-index:4}
@media (max-width:899px){#mpager .pager{bottom:78px}}
@media (max-width:700px){.pg-opt .pg-goto{display:none}.pg-opt{justify-content:center;width:100%}}

[data-install][hidden]{display:none!important}