@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--navy:#111f38;--blue:#315efb;--ink:#19263d;--muted:#758196;--line:#e6eaf1;--bg:#f5f7fb;--green:#14845a;--amber:#ad741b;--red:#bd4352}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',sans-serif}.top{height:68px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);font:800 19px Manrope}.brand small{display:block;font:700 8px 'DM Sans';letter-spacing:2px;color:#8993a4}.logo{width:38px;height:38px;border-radius:11px;background:var(--navy);color:white;display:grid;place-items:center;font:800 22px Manrope}.signout,.smallbtn{border:1px solid var(--line);border-radius:9px;background:white;padding:9px 13px;color:var(--ink);cursor:pointer}.layout{max-width:1450px;margin:auto;display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 120px)}.nav{background:white;border-right:1px solid var(--line);padding:25px 16px}.nav>small,.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#8994a5}.nav a{display:block;padding:12px;border-radius:9px;margin:6px 0;color:#5e6b7e;text-decoration:none;font-weight:600}.nav a.active,.nav a:hover{background:#eef2ff;color:var(--blue)}.navfoot{border-top:1px solid var(--line);margin-top:25px;padding:16px 7px;color:var(--muted);font-size:11px;line-height:1.7}.main{padding:30px;min-width:0}.head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:23px}.head h1{font:800 clamp(24px,3vw,34px) Manrope;margin:7px 0}.head p{margin:0;color:var(--muted)}.primary{border:0;border-radius:9px;background:var(--blue);color:white;padding:12px 17px;font:700 13px 'DM Sans';text-decoration:none;cursor:pointer;display:inline-block}.primary:hover{background:#244bd5}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.metric,.panel{background:white;border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 15px rgba(23,40,70,.035)}.metric{padding:19px}.metric span,.metric small{display:block;color:var(--muted);font-size:12px}.metric strong{display:block;font:800 24px Manrope;margin:12px 0 7px}.red{color:var(--red)}.amber{color:var(--amber)}.green{color:var(--green)}.blue{color:var(--blue)}.panel{padding:20px;margin-bottom:17px}.panel h2{font:700 17px Manrope;margin:0 0 16px}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px}.actions{display:grid;gap:9px}.actions a{border:1px solid var(--line);padding:12px;border-radius:9px;text-decoration:none;color:var(--blue);font-weight:600}.due,.taskrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #edf0f5}.due:last-child,.taskrow:last-child{border-bottom:0}.due small,.taskrow small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.formgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.formgrid label,.authform label{display:grid;gap:6px;color:#586579;font-size:12px;font-weight:700}.formgrid input,.formgrid select,.authform input{width:100%;padding:11px;border:1px solid #dce2ec;border-radius:8px;background:white;color:var(--ink);font:14px 'DM Sans';min-width:0}.formgrid input:focus,.formgrid select:focus,.authform input:focus{outline:2px solid #dce5ff;border-color:#9db1ff}.wide{grid-column:1/-1}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:690px}th,td{text-align:left;padding:12px;border-bottom:1px solid #edf0f5;font-size:12px;white-space:nowrap}th{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:#8792a4}.tag{background:#f0f3f8;border-radius:20px;padding:5px 8px;color:#586579;font-size:10px}.empty,.muted{color:var(--muted)}.notice{max-width:1000px;margin:14px auto;padding:12px 16px;border-radius:9px}.bad{background:#fff0f1;color:#a32b3b}.good{background:#eaf8f1;color:#18764f}.auth{max-width:1080px;margin:8vh auto;padding:22px;display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:center}.auth h1{font:800 clamp(38px,6vw,64px)/1.1 Manrope;letter-spacing:-2px;margin:16px 0}.auth h1 em{font-style:normal;color:var(--blue)}.auth p{color:var(--muted);line-height:1.7}.authform{display:grid;gap:15px;padding:26px}.authform h2{margin:0;font:700 19px Manrope}.authform a{color:var(--blue)}footer{text-align:center;color:#98a2b1;font-size:11px;padding:20px}
@media(max-width:1000px){.metrics{grid-template-columns:repeat(2,1fr)}.layout{grid-template-columns:190px 1fr}.main{padding:22px}}
@media(max-width:700px){.top{height:60px;padding:0 14px}.layout{display:block}.nav{display:flex;gap:4px;overflow:auto;position:sticky;top:60px;z-index:4;padding:8px;border-right:0;border-bottom:1px solid var(--line)}.nav>small,.navfoot{display:none}.nav a{white-space:nowrap;font-size:11px;padding:10px;margin:0}.main{padding:17px 12px 70px}.head{align-items:flex-start;flex-direction:column}.head .primary{width:100%;text-align:center}.metrics{gap:8px}.metric{padding:13px}.metric strong{font-size:19px}.metric span,.metric small{font-size:10px}.twocol{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr 1fr;gap:10px}.auth{grid-template-columns:1fr;gap:18px;margin:20px auto;padding:14px}.auth h1{font-size:39px}.authform{padding:20px}}
@media(max-width:420px){.formgrid{grid-template-columns:1fr}.wide{grid-column:1}}
@media print{.top,.nav,.primary,.formgrid,footer{display:none!important}.layout{display:block}.main{padding:0}.panel,.metric{box-shadow:none}}

/* EXLI responsive navigation + install experience */
html,body{max-width:100%;overflow-x:hidden}body{min-width:320px}.top{min-height:68px;height:auto;gap:12px}.top-actions{display:flex;align-items:center;gap:10px}.install-btn{border:1px solid #dce5ff;background:#eef2ff;color:var(--blue);border-radius:10px;padding:10px 13px;font:700 12px 'DM Sans';white-space:nowrap;cursor:pointer}.install-btn[hidden]{display:none!important}.menu-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;width:42px;height:40px;padding:10px;cursor:pointer}.menu-toggle span{display:block;height:2px;background:var(--navy);margin:4px 0;border-radius:2px}.nav{min-width:0}.main{min-width:0;overflow-x:clip}.panel,.metric{min-width:0}.tablewrap{max-width:100%;overscroll-behavior-x:contain}
@media(max-width:700px){
 .top{height:64px;min-height:64px;padding:0 12px;position:sticky;top:0;z-index:30}.brand{gap:8px;font-size:18px;flex-shrink:0}.logo{width:38px;height:38px}.brand small{font-size:7px;letter-spacing:1.5px}.top-actions{gap:7px}.top-actions form{margin:0}.signout{padding:8px 10px;font-size:12px}.install-btn{padding:9px 10px;font-size:11px}.menu-toggle{display:block;flex:0 0 40px;width:40px;height:38px}.layout{display:block;max-width:100%;min-height:calc(100vh - 64px)}
 .nav{display:none;position:fixed;top:64px;left:0;right:0;z-index:25;background:#fff;border:0;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(17,31,56,.12);padding:12px;max-height:calc(100dvh - 80px);overflow-y:auto;overflow-x:hidden;grid-template-columns:1fr 1fr;gap:6px}.nav.open{display:grid}.nav>small{display:block;grid-column:1/-1;padding:5px 8px}.nav a{display:flex;align-items:center;min-height:44px;margin:0;padding:10px 11px;border:1px solid #edf0f5;border-radius:10px;white-space:normal;line-height:1.25;font-size:12px}.navfoot{display:block;grid-column:1/-1;margin-top:5px;padding:10px 8px}.main{padding:20px 14px 84px;overflow-x:clip}.head{gap:12px}.head h1{overflow-wrap:anywhere}.head p{line-height:1.5}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.metric{padding:14px 12px}.metric strong{font-size:clamp(17px,5vw,22px);overflow-wrap:anywhere}.metric span,.metric small{font-size:11px;line-height:1.4}.panel{padding:16px;border-radius:13px}.formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.formgrid label{min-width:0}.formgrid input,.formgrid select{min-width:0;font-size:14px}.twocol{grid-template-columns:1fr}.auth{margin:18px auto;padding:14px;gap:16px}.auth h1{font-size:clamp(34px,9vw,43px);letter-spacing:-1.5px}.authform{padding:19px}.tablewrap{overflow-x:auto;max-width:calc(100vw - 28px)}table{min-width:620px}footer{padding:18px 14px 28px;line-height:1.5}
}
@media(max-width:420px){.top{padding:0 9px}.brand{font-size:16px}.brand small{letter-spacing:1.1px;font-size:6.5px}.logo{width:35px;height:35px}.top-actions{gap:5px}.install-btn{padding:8px;font-size:10px}.signout{padding:7px 8px;font-size:11px}.menu-toggle{width:36px;flex-basis:36px;height:36px;padding:8px}.main{padding-left:11px;padding-right:11px}.metrics{gap:7px}.metric{padding:12px 10px}.formgrid{grid-template-columns:1fr}.wide{grid-column:1}.nav{grid-template-columns:1fr 1fr}.auth{padding:11px}.authform{padding:16px}}
@media(min-width:701px){.nav{position:sticky;top:68px;align-self:start;height:calc(100vh - 68px);overflow-y:auto}.menu-toggle{display:none}}


/* EXLI V2.4 — interaction polish */
:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid rgba(49,94,251,.28);
  outline-offset:2px;
}
.primary,.smallbtn,.install-btn,.menu-toggle,.actions a,.nav a{
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,
             box-shadow .18s ease,transform .18s ease;
}
.primary:active,.smallbtn:active,.install-btn:active,.actions a:active{transform:translateY(1px)}
button:disabled{opacity:.68;cursor:wait}
.table-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.table-search{width:min(100%,330px);min-width:0;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink);font:13px 'DM Sans',sans-serif}
.table-count{font-size:11px;color:var(--muted);white-space:nowrap}
.password-wrap{display:flex;align-items:center;position:relative;width:100%}
.password-wrap input{padding-right:66px!important}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:0;background:#eef2ff;color:var(--blue);border-radius:7px;padding:6px 9px;
  font:700 11px 'DM Sans';cursor:pointer}
.notice{transition:opacity .3s ease,transform .3s ease}
.notice-dismissed{opacity:0;transform:translateY(-5px)}
.metric,.panel{transition:box-shadow .2s ease,border-color .2s ease}
.metric:hover,.panel:hover{border-color:#dbe3f2;box-shadow:0 8px 24px rgba(23,40,70,.06)}
@media(max-width:700px){
  /* Tables become readable stacked records instead of forcing page-wide sideways scrolling. */
  .tablewrap{overflow:visible;max-width:100%}
  .tablewrap table,.tablewrap tbody{display:block;width:100%;min-width:0}
  .tablewrap thead{display:none}
  .tablewrap tbody tr{display:block;margin:0 0 10px;padding:7px 12px;border:1px solid var(--line);
    border-radius:11px;background:#fff;box-shadow:0 2px 8px rgba(23,40,70,.035)}
  .tablewrap tbody tr:last-child{margin-bottom:0}
  .tablewrap td{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    width:100%;padding:9px 2px;border-bottom:1px solid #f0f2f6;white-space:normal;
    overflow-wrap:anywhere;text-align:right;font-size:12px}
  .tablewrap td:last-child{border-bottom:0}
  .tablewrap td::before{content:attr(data-label);flex:0 0 38%;max-width:38%;text-align:left;
    color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.35px}
  .tablewrap td.empty{display:block;text-align:center;padding:14px}
  .tablewrap td.empty::before{content:none}
  .table-tools{align-items:stretch;flex-direction:column;gap:6px}
  .table-search{width:100%}
  .table-count{text-align:right}
  .metric:hover,.panel:hover{box-shadow:0 4px 15px rgba(23,40,70,.035)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}