:root{
  --color-primary:#16213D;
  --color-secondary:#4A6FA4;
  --color-accent:#DC8D00;
  --surface:#F1F4FA;
  --ink:#212529;
  --muted:#6B6469;
  --line:rgba(0,0,0,0.05);
  --danger:#B43C3C;
  --shadow-soft:0px 1px 5px 0px rgba(0,0,0,0.15);
  --shadow-def:0px 0.125rem 0.375rem 0px rgba(0,0,0,0.05),0px 0.5rem 1.2rem 0px rgba(0,0,0,0.1);
  --shadow-hover:0px 0.125rem 0.375rem 0px rgba(0,0,0,0.05),0px 0.625rem 1.5rem 0px rgba(0,0,0,0.15);
  --shadow-pop:0px 0.25rem 0.5rem 0px rgba(0,0,0,0.05),0px 1.5rem 2.2rem 0px rgba(0,0,0,0.1);
}

html,body{font-family:'Manrope',Arial,Helvetica,sans-serif;color:var(--ink);background:var(--surface);}
h1,h2,h3,h4,.font-heading{font-family:'Google Sans',Arial,Helvetica,sans-serif;font-weight:500;letter-spacing:-0.16px;}
.tabular{font-variant-numeric:tabular-nums;}
[x-cloak]{display:none!important;}

.card{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-def);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-family:'Manrope',Arial,Helvetica,sans-serif;font-weight:600;font-size:14px;padding:10px 18px;transition:box-shadow .15s ease,transform .12s ease,opacity .15s ease;cursor:pointer;border:1px solid transparent;line-height:1.1;white-space:nowrap;}
.btn:hover{box-shadow:var(--shadow-hover);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
.btn:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px;}
.btn-gold{background:var(--color-accent);color:#fff;}
.btn-navy{background:var(--color-primary);color:#fff;}
.btn-steel{background:var(--color-secondary);color:#fff;}
.btn-ghost{background:#fff;border-color:rgba(22,33,61,0.2);color:var(--color-primary);}
.btn-danger{background:#fff;border-color:rgba(180,60,60,0.35);color:var(--danger);}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:8px;}

.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-family:'Manrope',Arial,Helvetica,sans-serif;font-weight:600;font-size:12px;white-space:nowrap;line-height:1.3;}
.badge .dot{width:6px;height:6px;border-radius:999px;background:currentColor;flex:none;}
.badge-pending,.badge-in-progress,.badge-inprogress,.badge-inbound,.badge-sending{color:#4A6FA4;background:rgba(74,111,164,0.12);}
.badge-approved,.badge-paid,.badge-verified,.badge-synced,.badge-active,.badge-upcoming{color:#16213D;background:rgba(22,33,61,0.08);}
.badge-complete,.badge-overdue,.badge-onboarding{color:#DC8D00;background:rgba(220,141,0,0.14);}
.badge-rejected,.badge-flagged,.badge-failed{color:#B43C3C;background:rgba(180,60,60,0.10);}
.badge-received,.badge-not-started,.badge-cancelled,.badge-system{color:#6B6469;background:rgba(107,100,105,0.12);}
.badge-pixie{color:#16213D;background:rgba(22,33,61,0.08);}
.badge-portal{color:#4A6FA4;background:rgba(74,111,164,0.12);}
.badge-high{color:#DC8D00;background:rgba(220,141,0,0.14);}
.badge-medium{color:#4A6FA4;background:rgba(74,111,164,0.12);}
.badge-low{color:#6B6469;background:rgba(107,100,105,0.12);}

.input{width:100%;border:1px solid rgba(22,33,61,0.15);border-radius:10px;padding:10px 12px;font-family:'Manrope',Arial,Helvetica,sans-serif;font-size:14px;color:var(--ink);background:#fff;outline:none;transition:border-color .15s ease,box-shadow .15s ease;}
.input:focus{border-color:#4A6FA4;box-shadow:0 0 0 3px rgba(74,111,164,0.15);}
select.input{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6469' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.lbl{display:block;font-family:'Manrope',Arial,Helvetica,sans-serif;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:0.06em;text-transform:uppercase;}

.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--color-primary);color:#fff;font-family:'Google Sans',Arial,Helvetica,sans-serif;font-weight:600;letter-spacing:-0.16px;flex:none;}

.nav-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-family:'Manrope',Arial,Helvetica,sans-serif;font-size:14px;font-weight:600;color:rgba(255,255,255,0.62);cursor:pointer;transition:background .15s ease,color .15s ease;border-left:3px solid transparent;width:100%;text-align:left;background:none;border-top:none;border-right:none;border-bottom:none;}
.nav-link:hover{color:#fff;background:rgba(255,255,255,0.06);}
.nav-link.active{color:#fff;background:rgba(255,255,255,0.10);}

.table-base{width:100%;border-collapse:collapse;font-family:'Manrope',Arial,Helvetica,sans-serif;font-size:14px;}
.table-base th{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);}
.table-base td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
.table-base tbody tr:last-child td{border-bottom:none;}
.table-base tr.clickable{cursor:pointer;transition:background .12s ease;}
.table-base tr.clickable:hover{background:#F1F4FA;}

.bar{height:8px;border-radius:999px;background:rgba(22,33,61,0.08);overflow:hidden;width:100%;}
.bar>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4A6FA4,#DC8D00);transition:width .4s ease;}

.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:1px solid rgba(22,33,61,0.15);background:#fff;color:var(--color-primary);cursor:pointer;transition:all .15s ease;flex:none;}
.iconbtn:hover{background:#F1F4FA;box-shadow:var(--shadow-soft);}
.iconbtn:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px;}

.divider{height:1px;background:var(--line);margin:20px 0;}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(22,33,61,0.22);border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:rgba(22,33,61,0.35);}
.sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);}

.spin{animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.fade-in{animation:fadein .25s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}