:root{
  --client-primary:#1675d1;
  --client-primary-dark:#105ea9;
  --client-navy:#0f172a;
  --client-navy-soft:#172033;
  --client-ink:#172033;
  --client-muted:#64748b;
  --client-line:#e5eaf0;
  --client-canvas:#f4f7fb;
  --client-surface:#ffffff;
  --client-success:#18794e;
  --client-warning:#8a5a00;
  --client-danger:#b42318;
  --client-radius:16px;
  --client-shadow:0 16px 42px rgba(15,23,42,.10);
}
*{box-sizing:border-box}
.arco-client-access-panel,.arco-client-auth-body,.arco-client-portal-body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--client-ink);
}
#loginArea.arco-client-access-panel{
  width:auto!important;max-width:680px!important;margin:18px auto 28px!important;padding:0!important;
  border:1px solid var(--client-line)!important;border-radius:18px!important;background:#fff!important;
  text-align:left!important;overflow:hidden;box-shadow:var(--client-shadow);
}
.arco-access-head{padding:26px 28px 20px;background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 100%);border-bottom:1px solid var(--client-line)}
.arco-access-eyebrow,.arco-auth-eyebrow{display:inline-block;color:var(--client-primary);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.arco-access-head h2{font-size:25px;line-height:1.15;margin:7px 0 8px;color:var(--client-ink)}
.arco-access-head p{margin:0;color:var(--client-muted);font-size:14px;line-height:1.6}
.arco-access-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px}
.arco-access-card{border:1px solid var(--client-line);border-radius:14px;padding:20px;background:#fff}
.arco-access-card.primary{background:#fbfdff;border-color:#cfe1f7}
.arco-access-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#eaf3ff;color:var(--client-primary);font-weight:900;margin-bottom:13px}
.arco-access-card h3{font-size:17px;margin:0 0 7px;color:var(--client-ink)}
.arco-access-card p{font-size:13px;line-height:1.55;color:var(--client-muted);margin:0 0 15px}
.arco-client-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 14px;border-radius:9px;border:1px solid transparent;font-weight:800;font-size:13px;text-decoration:none!important;cursor:pointer}
.arco-client-button.primary{background:var(--client-primary);color:#fff!important}
.arco-client-button.primary:hover{background:var(--client-primary-dark);text-decoration:none}
.arco-client-button.secondary{background:#fff;border-color:#d5dee9;color:var(--client-ink)!important}
.arco-card-actions{display:flex;gap:8px;flex-wrap:wrap}
.arco-track-form label{display:block;font-size:12px;font-weight:800;color:#526273;margin-bottom:7px}
.arco-track-row{display:flex;gap:8px}
.arco-track-row input{min-width:0;flex:1;border:1px solid #cfd8e3;border-radius:9px;padding:10px 11px;font:13px Arial,sans-serif;background:#fff}
.arco-track-row button{white-space:nowrap}
.arco-access-staff{display:flex;justify-content:space-between;gap:15px;align-items:center;margin:0 20px 20px;padding:13px 15px;border-radius:11px;background:#f8fafc;border:1px solid var(--client-line);font-size:12px;color:var(--client-muted)}
.arco-access-staff>span{flex:1;min-width:0}.arco-access-staff a{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:0 0 auto;font-weight:800;color:var(--client-primary)!important;text-decoration:none!important}.arco-staff-arrow{display:inline-block;line-height:1}
.arco-access-trust{display:flex;gap:16px;flex-wrap:wrap;padding:0 20px 20px;color:#718096;font-size:11px}
.arco-access-trust span:before{content:"\2713";color:var(--client-success);font-weight:900;margin-right:5px}

/* Modernize the existing tracking popup without changing its contract. */
#popupbox{left:50%!important;right:auto!important;top:145px!important;transform:translateX(-50%);margin:0!important;padding:0!important;width:min(560px,92vw)!important;height:auto!important;min-height:0!important;background:#fff!important;border:1px solid var(--client-line)!important;border-radius:18px!important;box-shadow:0 25px 70px rgba(15,23,42,.30);overflow:hidden;color:var(--client-ink)}
#popupbox>center:first-child{display:block;background:var(--client-navy);padding:15px 18px;text-align:left}
#popupbox>center:first-child span{font:800 11px Inter,Arial,sans-serif!important;letter-spacing:.12em;text-transform:uppercase}
#popupInnerBG{margin:0!important;width:100%!important;height:auto!important;background:#fff!important;padding:22px!important}
#popupInnerBG>div[style*="background-color"]{display:none}
#popupbox #newtext{font:700 18px Inter,Arial,sans-serif!important;color:var(--client-ink)!important;text-align:left!important;padding:0!important;margin:0 0 16px!important}
#Tracklogin{margin:0!important;padding:0!important;width:100%!important;height:auto!important;background:#fff!important}
#Tracklogin form{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:end}
#Tracklogin form center:first-child{grid-column:1/-1;text-align:left}
#Tracklogin #gentxt{margin:0!important;font:700 12px Inter,Arial,sans-serif!important;color:#526273!important}
#Tracklogin #trackinput{float:none!important;display:block!important;margin:0!important}
#Tracklogin input[name="Consignment"]{width:100%;min-height:42px;border:1px solid #cfd8e3;border-radius:9px;padding:10px 11px}
#Tracklogin #popButton{width:auto!important;min-height:42px;margin:0!important;border:0;border-radius:9px;background:var(--client-primary);color:#fff;font-weight:800;padding:9px 17px}
#Tracklogin>p{display:none}
#popupbox>center:last-child{padding:0 22px 20px;text-align:right}
#popupbox>center:last-child button{border:1px solid #d5dee9!important;background:#fff!important;border-radius:9px!important;padding:8px 12px!important}
#popupbox>center:last-child a,#popupbox>center:last-child span{color:var(--client-ink)!important;text-decoration:none!important}

/* Customer authentication */
body.arco-client-auth-body{margin:0;min-height:100vh;background:linear-gradient(135deg,#0f172a 0%,#172033 55%,#24344c 100%);display:grid;place-items:center;padding:24px}
.arco-client-auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.08fr .92fr;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.28)}
.arco-client-auth-brand{padding:54px;background:#f5f8fc;display:flex;flex-direction:column;justify-content:space-between;min-height:520px}
.arco-client-auth-brand img{display:block;max-width:235px;max-height:76px;object-fit:contain;object-position:left center}
.arco-client-auth-brand h1{font-size:38px;line-height:1.08;margin:10px 0 16px;letter-spacing:-.04em}
.arco-client-auth-brand p{max-width:430px;color:var(--client-muted);font-size:15px;line-height:1.7}
.arco-client-auth-points{display:grid;gap:10px;color:#526273;font-size:13px}
.arco-client-auth-points span:before{content:"\2713";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e7f6ee;color:var(--client-success);font-weight:900;margin-right:8px}
.arco-client-auth-card{padding:52px 46px;display:flex;flex-direction:column;justify-content:center}
.arco-client-auth-card h2{font-size:29px;margin:6px 0 8px}
.arco-client-auth-card .lead{margin:0 0 22px;color:var(--client-muted);line-height:1.6}
.arco-client-notice{border-radius:10px;padding:12px 14px;margin-bottom:16px;border:1px solid #f6c8c4;background:#fff0ef;color:#9f251b;font-size:13px}
.arco-client-login-form{display:flex;flex-direction:column;gap:15px}
.arco-client-login-form label span{display:block;font-size:12px;font-weight:800;color:#526273;margin-bottom:6px}
.arco-client-login-form input{width:100%;border:1px solid #cfd8e3;border-radius:9px;padding:11px 12px;color:var(--client-ink);font:14px Inter,Arial,sans-serif}
.arco-client-login-form input:focus{outline:3px solid #d8eafd;border-color:#8fb3d9}
.arco-client-login-form button{width:100%;min-height:43px;border:0;border-radius:9px;background:var(--client-primary);color:#fff;font-weight:800;cursor:pointer}
.arco-client-auth-links{display:flex;justify-content:center;gap:8px 14px;flex-wrap:wrap;margin-top:20px;font-size:12px}
.arco-client-auth-links a{color:var(--client-primary);font-weight:700;text-decoration:none}
.arco-client-auth-card small{display:block;text-align:center;color:#8a98aa;margin-top:18px;font-size:11px}

/* Customer portal */
body.arco-client-portal-body{margin:0;min-height:100vh;background:var(--client-canvas);color:var(--client-ink)}
.arco-portal-top{height:76px;background:#fff;border-bottom:1px solid var(--client-line);display:flex;align-items:center;padding:0 28px;position:sticky;top:0;z-index:10}
.arco-portal-brand{display:flex;align-items:center;gap:14px;flex:1}
.arco-portal-brand img{display:block;max-width:160px;max-height:48px;object-fit:contain}
.arco-portal-brand div span{display:block;color:var(--client-muted);text-transform:uppercase;letter-spacing:.11em;font-size:10px}
.arco-portal-brand div strong{display:block;font-size:16px;margin-top:2px}
.arco-portal-actions{display:flex;align-items:center;gap:8px}
.arco-portal-actions a,.arco-portal-actions button{min-height:38px;border-radius:9px;padding:8px 12px;font:700 12px Inter,Arial,sans-serif;text-decoration:none;white-space:nowrap}
.arco-portal-actions a{border:1px solid #d8e0e9;color:var(--client-ink);background:#fff}
.arco-portal-actions button{border:0;background:var(--client-navy);color:#fff;cursor:pointer}
.arco-portal-wrap{max-width:1180px;margin:0 auto;padding:30px 22px 42px}
.arco-portal-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}
.arco-portal-hero span{color:var(--client-muted);font-size:12px}
.arco-portal-hero h1{font-size:29px;margin:5px 0 0;letter-spacing:-.03em}
.arco-portal-account{display:flex;align-items:center;gap:8px}
.arco-portal-status{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#e7f6ee;color:var(--client-success);font-size:11px;font-weight:800}
.arco-portal-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.arco-portal-metric{background:#fff;border:1px solid var(--client-line);border-radius:14px;padding:18px;box-shadow:0 4px 16px rgba(15,23,42,.035)}
.arco-portal-metric span{display:block;color:var(--client-muted);font-size:12px}
.arco-portal-metric strong{display:block;font-size:30px;margin-top:6px}
.arco-portal-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-bottom:20px}
.arco-portal-panel{background:#fff;border:1px solid var(--client-line);border-radius:14px;padding:20px;box-shadow:0 7px 24px rgba(15,23,42,.045);margin-bottom:18px}
.arco-portal-panel h2{font-size:18px;margin:0 0 5px}
.arco-portal-panel .panel-sub{color:var(--client-muted);font-size:12px;margin:0 0 16px}
.arco-profile-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.arco-profile-item{padding:11px 0;border-bottom:1px solid #edf1f5}
.arco-profile-item span{display:block;color:var(--client-muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.arco-profile-item strong{display:block;margin-top:4px;font-size:13px}
.arco-quick-links{display:grid;gap:9px}
.arco-quick-link{border:1px solid var(--client-line);border-radius:10px;padding:13px 14px;text-decoration:none;color:var(--client-ink);background:#fbfdff}
.arco-quick-link strong,.arco-quick-link span{display:block}
.arco-quick-link span{color:var(--client-muted);font-size:11px;margin-top:3px}
.arco-portal-table-wrap{overflow-x:auto;overflow-y:hidden;max-width:100%;-webkit-overflow-scrolling:touch;border:1px solid var(--client-line);border-radius:11px}
.arco-portal-table{border-collapse:collapse;width:100%;min-width:700px}
.arco-portal-table th,.arco-portal-table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--client-line);font-size:12px;vertical-align:middle}
.arco-portal-table th{background:#f8fafc;color:#526273;text-transform:uppercase;letter-spacing:.06em;font-size:10px}
.arco-portal-table tbody tr:last-child td{border-bottom:0}
.arco-portal-table a{font-weight:800;color:var(--client-primary);text-decoration:none}
.arco-status-pill{display:inline-flex;padding:5px 8px;border-radius:999px;background:#eef2f6;color:#415268;font-size:10px;font-weight:800;white-space:nowrap}
.arco-status-active,.arco-status-approved,.arco-status-delivered,.arco-status-paid{background:#e7f6ee;color:var(--client-success)}
.arco-status-pending,.arco-status-submitted,.arco-status-in_transit,.arco-status-issued,.arco-status-partially_paid{background:#fff4d6;color:var(--client-warning)}
.arco-status-rejected,.arco-status-cancelled,.arco-status-failed,.arco-status-void{background:#ffebe9;color:var(--client-danger)}
.arco-portal-empty{text-align:center;color:var(--client-muted);padding:25px!important}
.arco-portal-footer{padding:18px 22px;text-align:center;color:#8a98aa;font-size:11px}
@media(max-width:900px){
  .arco-client-auth-shell{grid-template-columns:1fr;max-width:540px}
  .arco-client-auth-brand{display:none}
  .arco-portal-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .arco-clients-mobile-body #loginArea.arco-client-access-panel{width:100%!important;max-width:none!important;margin:8px auto 22px!important;padding:0!important}
  .arco-access-grid{grid-template-columns:1fr}
  #popupbox{top:90px!important}
}
@media(max-width:640px){
  body.arco-client-auth-body{padding:14px}
  .arco-client-auth-card{padding:34px 24px}
  .arco-client-auth-card h2{font-size:26px}
  .arco-access-head{padding:22px 20px 17px}
  .arco-access-grid{padding:14px}
  .arco-access-staff{align-items:flex-start;flex-direction:column;margin:0 14px 14px}
  .arco-access-trust{padding:0 14px 16px}
  .arco-track-row{flex-direction:column}
  .arco-track-row button{width:100%}
  .arco-portal-top{height:auto;min-height:72px;padding:12px 14px;display:grid;grid-template-columns:1fr;gap:10px;align-items:start}
  .arco-portal-brand{width:100%}
  .arco-portal-brand img{max-width:120px}
  .arco-portal-brand div{display:none}
  .arco-portal-actions{margin:0;width:100%;display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:8px;justify-content:stretch}
  .arco-portal-actions a,.arco-portal-actions button{width:100%;display:flex;align-items:center;justify-content:center;padding:8px 9px}
  .arco-portal-actions form{display:flex;min-width:0}
  .arco-portal-wrap{padding:22px 14px 34px}
  .arco-portal-table{min-width:620px}
  .arco-portal-hero{align-items:flex-start;flex-direction:column}
  .arco-portal-metrics{grid-template-columns:1fr}
  .arco-profile-list{grid-template-columns:1fr}
}