/* SmartPay Premium UI v1 — preserves existing brand assets and brand palette */
:root{
  --sp-sidebar:272px;
  --sp-sidebar-collapsed:82px;
  --sp-radius:18px;
}
html{font-size:16px}
body{font-size:15px;letter-spacing:.005em}
.shell{grid-template-columns:var(--sp-sidebar) minmax(0,1fr);transition:grid-template-columns .22s ease}
.sidebar{width:var(--sp-sidebar);padding:20px 14px 18px;background:linear-gradient(180deg,#061522 0%,#081827 58%,#061421 100%);box-shadow:18px 0 60px rgba(0,0,0,.16);transition:width .22s ease,padding .22s ease}
.sidebar .brand{min-height:52px;padding:0 4px 14px;border-bottom:1px solid rgba(39,86,113,.5);position:relative}
.sidebar .smartpay-full-logo{height:36px!important;max-width:168px!important}
.sp-sidebar-toggle{margin-left:auto;width:38px;height:38px;display:grid;place-items:center;border:1px solid #28506b;background:#091b2b;color:#d7e8f4;border-radius:50%;cursor:pointer;font-size:18px;transition:.2s;flex:0 0 auto}
.sp-sidebar-toggle:hover{border-color:var(--teal);color:var(--teal);box-shadow:0 0 0 4px rgba(24,216,200,.06)}
.client-side{font-size:12px;line-height:1.5;margin:12px 8px;color:#8199ac}
#nav{padding-top:2px}
.nav-group-title{font-size:11px;line-height:1;letter-spacing:1.45px;color:#67849a;font-weight:800;margin:18px 8px 7px;padding:8px 4px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;border-radius:8px;transition:.18s}
.nav-group-title:hover{color:#9bb2c4;background:rgba(255,255,255,.025)}
.nav-group-title:after{content:'⌄';font-size:13px;color:#52758d;transition:transform .18s ease}
.nav-group-title.sp-closed:after{transform:rotate(-90deg)}
.nav-btn{font-size:14px;min-height:44px;padding:10px 12px;margin:2px 0;border:1px solid transparent;border-radius:11px;gap:11px;color:#a9bdcc;transition:.16s}
.nav-btn:hover{background:#0d2335;color:#fff;border-color:#183c55}
.nav-btn.active{background:linear-gradient(90deg,rgba(24,216,200,.13),rgba(75,141,255,.10));color:#fff;border-color:rgba(24,216,200,.42);box-shadow:inset 3px 0 0 var(--teal),0 8px 30px rgba(0,0,0,.12)}
.nav-icon{width:24px;font-size:16px;color:var(--teal)}
.nav-btn.sp-group-hidden{display:none!important}
.side-bottom{margin-top:22px;padding-top:16px}.side-bottom .ghost{font-size:13px;min-height:42px}
.topbar{height:76px;padding:0 26px}.pill{font-size:13px;padding:10px 13px}.search input{font-size:14px;padding:11px 13px}
.page{padding:28px;max-width:1800px;margin:0 auto;width:100%}
.page-head{margin-bottom:20px}.page-head h1{font-size:34px;letter-spacing:-1px;margin-bottom:7px}.page-head p{font-size:14px;line-height:1.55}.data-badge{font-size:11px;padding:8px 11px}
.card{border-radius:var(--sp-radius);padding:20px;border-color:#1b3d57;box-shadow:0 15px 45px rgba(0,0,0,.13)}
.chart-title h2,.chart-title h3{font-size:18px}.legend-note{font-size:11px}.klabel{font-size:11px}.kvalue{font-size:30px}.ksub{font-size:11px}
.eyebrow{font-size:10px}.decision-hero{padding:26px;border-radius:20px}.decision-hero h2{font-size:29px}.decision-hero p{font-size:13px;line-height:1.55}.decision-card{min-height:190px}.decision-card h3{font-size:17px}.decision-card p{font-size:12px;line-height:1.62}.decision-label{font-size:10px}.decision-value{font-size:28px}.decision-pill{font-size:10px;padding:6px 9px}.decision-metrics b{font-size:18px}.decision-metrics span{font-size:10px}
.goal-card h4{font-size:11px}.goal-val{font-size:25px}.goal-sub{font-size:10px}.opportunity h4{font-size:16px}.opportunity p{font-size:12px}.opportunity .impact{font-size:9px}.opportunity .value{font-size:21px}.alert-row h4{font-size:13px}.alert-row p{font-size:11px}.alert-badge{font-size:9px}.health-top{font-size:11px}.report-kpi b{font-size:21px}.report-kpi span{font-size:10px}.subtab{font-size:11px;padding:9px 12px}.empty{font-size:12px}
th,td{font-size:11px;padding:12px}.badge{font-size:10px;padding:5px 8px}
input,select,textarea{font-size:14px!important;min-height:44px}.field label{font-size:11px;margin-bottom:7px}.primary,.ghost,.action-btn{font-size:14px;min-height:42px}
/* Collapsed desktop sidebar */
.shell.sp-sidebar-collapsed{grid-template-columns:var(--sp-sidebar-collapsed) minmax(0,1fr)}
.shell.sp-sidebar-collapsed .sidebar{width:var(--sp-sidebar-collapsed);padding-left:10px;padding-right:10px;overflow-x:hidden}
.shell.sp-sidebar-collapsed .sidebar .smartpay-full-logo{width:0!important;opacity:0;max-width:0!important}
.shell.sp-sidebar-collapsed .sidebar .brand{justify-content:center;padding-left:0;padding-right:0}
.shell.sp-sidebar-collapsed .sp-sidebar-toggle{margin:0}
.shell.sp-sidebar-collapsed .client-side,.shell.sp-sidebar-collapsed .nav-group-title,.shell.sp-sidebar-collapsed .side-bottom{display:none}
.shell.sp-sidebar-collapsed .nav-btn{font-size:0;justify-content:center;padding:10px 0;min-height:46px}
.shell.sp-sidebar-collapsed .nav-icon,.shell.sp-sidebar-collapsed .xyz-matrix-icon{font-size:17px;margin:0}
.shell.sp-sidebar-collapsed .nav-btn.active{box-shadow:inset 0 0 0 1px rgba(24,216,200,.36)}
/* Premium mobile */
@media(max-width:980px){
  html{font-size:17px}
  body{font-size:16px}
  .shell,.shell.sp-sidebar-collapsed{grid-template-columns:1fr}
  .sidebar,.shell.sp-sidebar-collapsed .sidebar{position:fixed;left:-320px;top:0;width:min(86vw,320px);height:100dvh;padding:18px 16px;z-index:90;box-shadow:30px 0 80px rgba(0,0,0,.52);transition:left .22s ease;width:min(86vw,320px)}
  .sidebar.open{left:0}
  .sidebar:after{content:'';position:fixed;inset:0;background:rgba(2,9,15,.62);backdrop-filter:blur(3px);z-index:-1;opacity:0;pointer-events:none;transition:.2s}
  .sidebar.open:after{opacity:1}
  .sidebar .smartpay-full-logo,.shell.sp-sidebar-collapsed .sidebar .smartpay-full-logo{height:38px!important;width:auto!important;opacity:1;max-width:174px!important}
  .sidebar .brand,.shell.sp-sidebar-collapsed .sidebar .brand{justify-content:flex-start;display:flex}
  .sp-sidebar-toggle{display:none}
  .shell.sp-sidebar-collapsed .client-side,.shell.sp-sidebar-collapsed .nav-group-title,.shell.sp-sidebar-collapsed .side-bottom{display:block}
  .shell.sp-sidebar-collapsed .nav-btn{font-size:15px;justify-content:flex-start;padding:11px 12px}
  .topbar{height:72px;padding:0 14px}.mobile-menu{display:block;font-size:20px;padding:10px 13px}.top-left{gap:7px}.pill{font-size:12px;padding:9px 10px}.top-actions .avatar{display:none}
  .page{padding:18px 14px 96px}.page-head{align-items:flex-start;gap:12px}.page-head h1{font-size:31px;line-height:1.08}.page-head p{font-size:14px;line-height:1.5}.data-badge{font-size:10px;white-space:nowrap}
  .card{padding:18px;border-radius:17px}.decision-hero{padding:21px;align-items:flex-start}.decision-hero h2{font-size:26px;line-height:1.12}.decision-hero p{font-size:14px}.decision-score{width:72px;height:72px;flex:0 0 72px}.decision-score span{font-size:22px}
  .chart-title h2,.chart-title h3{font-size:17px}.klabel{font-size:11px}.kvalue{font-size:27px}.ksub{font-size:11px}.decision-card h3{font-size:17px}.decision-card p{font-size:13px}.goal-grid,.insights,.health-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.decision-metrics,.report-kpis{grid-template-columns:1fr 1fr}.grid{gap:12px}.c8,.c7,.c6,.c5,.c4,.c3{grid-column:span 12}.chart-box{height:250px}.chart-box.sm{height:210px}
  th,td{font-size:12px;padding:12px}.subtab{font-size:12px;min-height:40px}.toast{font-size:12px;left:14px;right:14px;bottom:16px}
  .nav-group-title{font-size:11px;margin-top:15px}.nav-btn{font-size:15px;min-height:48px}.nav-icon{font-size:18px;width:26px}
}
@media(min-width:981px) and (max-width:1366px){
  .page{padding:22px}.page-head h1{font-size:31px}.card{padding:17px}.nav-btn{font-size:13px;min-height:42px}.sidebar{padding-left:11px;padding-right:11px}.decision-hero h2{font-size:26px}.decision-card p{font-size:11px}
}