:root{
    --navy:#0c1733; --navy2:#13234d; --navy3:#1c356e;
    --saffron:#e07a1f; --saffronD:#c2660f;
    --blue:#1d4ed8; --blueL:#3b82f6;
    --green:#16a34a; --greenBg:#dcfce7;
    --amber:#d97706; --amberBg:#fef3c7;
    --red:#dc2626; --redBg:#fee2e2;
    --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
    --bg:#f1f5f9; --card:#ffffff;
    --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.06);
    --shadowL:0 2px 6px rgba(12,23,51,.12),0 18px 40px rgba(12,23,51,.10);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:'Segoe UI','Nirmala UI',system-ui,-apple-system,'Noto Sans Devanagari',sans-serif;
    background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; font-size:14px;
  }
  .hi{font-weight:600}
  .en{font-size:.78em; color:var(--muted); font-style:italic; font-weight:500}
  /* ---------- layout ---------- */
  .app{display:grid; grid-template-columns:262px 1fr; min-height:100vh}
  /* ---------- sidebar ---------- */
  .side{background:linear-gradient(185deg,var(--navy),#091025); color:#c7d2e6; position:sticky; top:0; height:100vh; display:flex; flex-direction:column}
  .brand{display:flex; gap:12px; align-items:center; padding:18px 18px 16px; border-bottom:1px solid rgba(255,255,255,.08)}
  .crest{width:46px;height:46px;flex:0 0 46px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
  .brand h1{font-size:15px; color:#fff; line-height:1.25; font-weight:700}
  .brand small{display:block; color:#8aa0c7; font-size:10.5px; font-weight:500; letter-spacing:.3px; margin-top:2px}
  .nav{padding:12px 10px; overflow-y:auto; flex:1}
  .nav .grp{font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:#5e729a; padding:14px 12px 6px}
  .nav a{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; color:#c7d2e6; text-decoration:none; font-size:13.5px; cursor:pointer; transition:.15s; margin-bottom:2px}
  .nav a .ic{width:18px;height:18px;flex:0 0 18px; opacity:.85}
  .nav a:hover{background:rgba(255,255,255,.06); color:#fff}
  .nav a.active{background:linear-gradient(90deg,var(--saffron),var(--saffronD)); color:#fff; box-shadow:0 6px 16px rgba(224,122,31,.35)}
  .nav a.active .ic{opacity:1}
  .sidefoot{padding:12px 16px; border-top:1px solid rgba(255,255,255,.08); font-size:10.5px; color:#7d92ba}
  .sidefoot b{color:#e8b774}
  /* ---------- main ---------- */
  .main{display:flex; flex-direction:column; min-width:0}
  .top{background:var(--card); border-bottom:1px solid var(--line); padding:12px 24px; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:20}
  .pgtitle{flex:1}
  .pgtitle h2{font-size:17px; font-weight:700}
  .pgtitle p{font-size:12px; color:var(--muted); margin-top:1px}
  .search{display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 12px; width:240px}
  .search input{border:0; background:transparent; outline:0; width:100%; font-size:13px; font-family:inherit}
  .topbtn{display:flex;align-items:center;gap:7px; background:var(--navy2); color:#fff; border:0; padding:9px 14px; border-radius:10px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit}
  .topbtn.ghost{background:#fff; color:var(--navy2); border:1px solid var(--line)}
  .user{display:flex; align-items:center; gap:10px}
  .avatar{width:38px;height:38px;border-radius:50%; background:linear-gradient(135deg,var(--saffron),var(--blue)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px}
  .user .nm{font-size:12.5px; font-weight:700; line-height:1.2}
  .user .rl{font-size:10.5px; color:var(--muted)}
  .content{padding:22px 24px 40px; overflow-y:auto}
  .page{display:none; animation:fade .25s ease}
  .page.show{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  /* ---------- alert banner ---------- */
  .banner{display:flex; align-items:center; gap:12px; background:linear-gradient(90deg,#fff7ed,#fffbeb); border:1px solid #fcd9a8; border-left:4px solid var(--saffron); border-radius:12px; padding:13px 16px; margin-bottom:18px}
  .banner .dot{width:9px;height:9px;border-radius:50%; background:var(--saffron); box-shadow:0 0 0 4px rgba(224,122,31,.18); animation:pulse 1.8s infinite}
  @keyframes pulse{50%{box-shadow:0 0 0 8px rgba(224,122,31,0)}}
  .banner b{color:var(--saffronD)}
  /* ---------- KPI cards ---------- */
  .kpis{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:18px}
  .kpi{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:.18s}
  .kpi:hover{transform:translateY(-3px); box-shadow:var(--shadowL)}
  .kpi .kicon{width:34px;height:34px;border-radius:9px; display:grid;place-items:center; margin-bottom:10px}
  .kpi .kn{font-size:26px; font-weight:800; letter-spacing:-.5px}
  .kpi .kl{font-size:11.5px; font-weight:600; margin-top:2px}
  .kpi .ke{font-size:10px; color:var(--muted); font-style:italic}
  .kpi::after{content:''; position:absolute; right:-20px; top:-20px; width:80px;height:80px; border-radius:50%; opacity:.06}
  .c-blue .kicon{background:#dbeafe;color:var(--blue)} .c-blue::after{background:var(--blue)}
  .c-amber .kicon{background:var(--amberBg);color:var(--amber)} .c-amber::after{background:var(--amber)}
  .c-red .kicon{background:var(--redBg);color:var(--red)} .c-red::after{background:var(--red)}
  .c-green .kicon{background:var(--greenBg);color:var(--green)} .c-green::after{background:var(--green)}
  .c-navy .kicon{background:#e0e7ff;color:var(--navy3)} .c-navy::after{background:var(--navy3)}
  .c-saf .kicon{background:#ffedd5;color:var(--saffronD)} .c-saf::after{background:var(--saffron)}
  /* ---------- grid cards ---------- */
  .row{display:grid; gap:16px; margin-bottom:16px}
  .row.r2{grid-template-columns:1.6fr 1fr}
  .row.r2b{grid-template-columns:1fr 1.4fr}
  .panel{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow)}
  .panel .ph{display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line)}
  .panel .ph h3{font-size:14px; font-weight:700}
  .panel .ph .sub{font-size:11px;color:var(--muted)}
  .pb{padding:18px}
  .tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px}
  .tag.g{background:var(--greenBg);color:#15803d} .tag.a{background:var(--amberBg);color:#b45309} .tag.r{background:var(--redBg);color:#b91c1c} .tag.b{background:#dbeafe;color:#1e40af} .tag.gray{background:#f1f5f9;color:#475569}
  /* charts */
  .bars{display:flex; align-items:flex-end; gap:10px; height:190px; padding-top:10px}
  .bars .b{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end}
  .bars .b .bar{width:60%; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--blueL),var(--blue)); transition:.3s; position:relative}
  .bars .b .bar:hover{filter:brightness(1.1)}
  .bars .b .bar span{position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:700; color:var(--navy3)}
  .bars .b small{font-size:10px;color:var(--muted)}
  .donutwrap{display:flex; align-items:center; gap:20px}
  .legend{display:flex;flex-direction:column;gap:11px;font-size:12.5px}
  .legend .li{display:flex;align-items:center;gap:9px}
  .legend .sw{width:11px;height:11px;border-radius:3px}
  .legend b{margin-left:auto;font-weight:800}
  /* circle bars */
  .cbar{margin-bottom:15px}
  .cbar:last-child{margin-bottom:0}
  .cbar .ct{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px}
  .cbar .ct b{font-weight:800}
  .track{height:9px;background:#eef2f7;border-radius:6px;overflow:hidden}
  .track i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--saffron),var(--saffronD))}
  /* priority list */
  .plist .pit{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .plist .pit:last-child{border:0}
  .plist .pn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:12px;flex:0 0 40px}
  .plist .pi{flex:1;min-width:0}
  .plist .pi .t{font-size:13px;font-weight:700}
  .plist .pi .s{font-size:11px;color:var(--muted)}
  /* table */
  .tbl{width:100%; border-collapse:collapse; font-size:12.5px}
  .tbl th{background:#f8fafc; text-align:left; padding:11px 12px; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:#64748b; border-bottom:1px solid var(--line); white-space:nowrap}
  .tbl td{padding:11px 12px; border-bottom:1px solid #f1f5f9; vertical-align:middle}
  .tbl tr:hover td{background:#fafbff}
  .tbl .fir{font-weight:800;color:var(--navy3)}
  .days{font-weight:800}
  .days.neg{color:var(--red)} .days.low{color:var(--amber)} .days.ok{color:var(--green)}
  .act{display:inline-flex;gap:5px}
  .act button{border:0;border-radius:7px;padding:5px 9px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
  .act .e{background:#e0e7ff;color:#3730a3} .act .d{background:var(--redBg);color:#b91c1c} .act .v{background:var(--greenBg);color:#15803d}
  /* filters */
  .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
  .filters select,.filters input{padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:12.5px;font-family:inherit;background:#fff;outline:0}
  .filters select:focus,.filters input:focus{border-color:var(--blue)}
  /* form */
  .form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .fg{display:flex;flex-direction:column;gap:6px}
  .fg.full{grid-column:1/-1}
  .fg label{font-size:12px;font-weight:600}
  .fg label span{color:var(--muted);font-weight:500;font-style:italic;font-size:11px}
  .fg input,.fg select,.fg textarea{padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-family:inherit;outline:0}
  .fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,.1)}
  .savebar{grid-column:1/-1;display:flex;gap:10px;margin-top:4px}
  .btn{padding:11px 22px;border:0;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
  .btn.primary{background:linear-gradient(90deg,var(--navy3),var(--navy2));color:#fff}
  .btn.s2{background:linear-gradient(90deg,var(--saffron),var(--saffronD));color:#fff}
  .btn.ghost{background:#fff;color:var(--navy2);border:1px solid var(--line)}
  /* report cards */
  .reps{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .rep{border:1px solid var(--line);border-radius:13px;padding:18px;background:linear-gradient(180deg,#fff,#fafbff)}
  .rep h4{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
  .rep p{font-size:12px;color:var(--muted);margin:6px 0 13px}
  .rep .btns{display:flex;gap:8px}
  .rep .btns button{font-size:11.5px;padding:7px 12px;border-radius:8px;border:0;cursor:pointer;font-weight:600;font-family:inherit}
  .x-excel{background:#dcfce7;color:#15803d} .x-pdf{background:var(--redBg);color:#b91c1c} .x-csv{background:#dbeafe;color:#1e40af}
  /* notif preview */
  .wa{background:#0b141a;border-radius:16px;padding:16px;max-width:330px;color:#e9edef;font-size:12.5px;line-height:1.55;box-shadow:var(--shadowL)}
  .wa .h{display:flex;align-items:center;gap:9px;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.1)}
  .wa .h .lg{width:30px;height:30px;border-radius:50%;background:#25d366;display:grid;place-items:center;font-size:15px}
  .wa .bub{background:#005c4b;border-radius:10px;padding:11px 13px;position:relative}
  .wa .bub .tm{font-size:9.5px;color:#8aa9a0;text-align:right;margin-top:5px}
  .secnote{display:flex;gap:10px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:11px;padding:13px 15px;margin-top:16px;font-size:12.5px;color:#065f46}
  /* upload */
  .drop{border:2px dashed var(--line);border-radius:14px;padding:38px;text-align:center;background:#fafbff}
  .drop .ic{font-size:34px}
  .rules{background:#fafbff;border:1px solid var(--line);border-radius:13px;padding:18px}
  .rules li{font-size:12.5px;margin-bottom:9px;list-style:none;display:flex;gap:8px}
  .rules li::before{content:'✓';color:var(--green);font-weight:800}
  .ribbon{position:fixed;top:16px;right:-42px;transform:rotate(45deg);background:var(--saffron);color:#fff;font-size:11px;font-weight:800;padding:6px 50px;z-index:99;box-shadow:0 4px 12px rgba(0,0,0,.2);letter-spacing:1px}
  .pfoot{text-align:center;padding:18px;color:var(--muted);font-size:11.5px;border-top:1px solid var(--line);margin-top:8px}
  .pfoot b{color:var(--navy3)}
  @media(max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}.row.r2,.row.r2b{grid-template-columns:1fr}.reps{grid-template-columns:1fr}}
  @media(max-width:760px){
    .app{grid-template-columns:1fr}
    .side{position:static;height:auto;flex-direction:column}
    .nav{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:8px 8px;gap:4px}
    .nav .grp{display:none}
    .nav a{white-space:nowrap;margin-bottom:0;flex:0 0 auto}
    .sidefoot{display:none}
    .form{grid-template-columns:1fr}
    .kpis{grid-template-columns:repeat(2,1fr)}
    .top{flex-wrap:wrap}
    .search{width:100%;order:3}
  }

  .crest{object-fit:contain;border-radius:8px;background:rgba(255,255,255,.06);padding:2px}
  .uplogo{height:38px;width:auto;flex:0 0 auto}
  .hdiv{width:1px;height:34px;background:var(--line);flex:0 0 auto}
  /* ---------- login ---------- */
  .login{position:fixed;inset:0;z-index:200;background:linear-gradient(160deg,var(--navy),#091025);display:grid;place-items:center;padding:20px}
  .login .box{background:#fff;border-radius:18px;padding:34px 30px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.45);text-align:center}
  .login .lc{width:62px;height:62px;object-fit:contain;margin:0 auto 14px;display:block}
  .login h1{font-size:18px;color:var(--navy);font-weight:800;line-height:1.3}
  .login .sub{font-size:12px;color:var(--muted);margin:5px 0 22px}
  .login .fld{text-align:left;margin-bottom:14px}
  .login label{font-size:12px;font-weight:600;display:block;margin-bottom:5px;color:var(--ink)}
  .login input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:13px;font-family:inherit;outline:0}
  .login input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
  .login button{width:100%;padding:12px;border:0;border-radius:10px;background:linear-gradient(90deg,var(--saffron),var(--saffronD));color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:6px}
  .login .hint{font-size:10.5px;color:var(--muted);margin-top:14px}
  .login .sec{font-size:10px;color:#94a3b8;margin-top:16px}
  /* ---------- collapse + language ---------- */
  .iconbtn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--navy2);cursor:pointer;flex:0 0 auto;transition:.15s}
  .iconbtn:hover{background:var(--bg)}
  .langbtn{display:inline-flex;align-items:center;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:3px;cursor:pointer;font-family:inherit;flex:0 0 auto}
  .langbtn span{padding:4px 9px;border-radius:6px;color:var(--muted);font-size:12px;font-weight:700}
  .langbtn span.on{background:linear-gradient(90deg,var(--saffron),var(--saffronD));color:#fff}
  /* single-language view — default Hindi (body without .en) */
  .l-en{display:none}
  body.en .l-hi{display:none}
  body.en .l-en{display:revert}
  /* collapsed sidebar — icons only */
  .app.mini{grid-template-columns:74px 1fr}
  .app.mini .lbl,.app.mini .nav .grp,.app.mini .brand .btxt,.app.mini .sidefoot{display:none}
  .app.mini .brand{justify-content:center;padding:16px 0}
  .app.mini .nav a{justify-content:center;padding:11px 0}
  @media(max-width:760px){.app.mini{grid-template-columns:1fr}.app.mini .lbl{display:revert}}
  /* ---------- professional header ---------- */
  .top{position:relative}
  .top::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#FF9933 0 33.3%,#fff 33.3% 66.6%,#138808 66.6% 100%)}
  .uplogo{height:44px}
  .pgtitle{flex:1;min-width:0}
  .pgtitle .kicker{font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--saffronD);line-height:1.2;margin-bottom:3px}
  .pgtitle h2{font-size:18.5px;font-weight:800;letter-spacing:-.3px;color:var(--navy);line-height:1.15}
  .pgtitle p{font-size:12px;color:var(--muted);margin-top:2px}
  .top .hdiv{height:40px}
  .user .avatar{box-shadow:0 3px 10px rgba(29,78,216,.28)}
  @media(max-width:620px){.top .kicker{display:none}.uplogo{height:38px}}