:root{
  --green:#1E8449;
  --green-deep:#166339;
  --green-mist:#E7F3EC;
  --navy:#0B2036;
  --navy-2:#0F2A44;
  --navy-soft:#16324E;
  --ink:#15222E;
  --paper:#FBFAF6;
  --paper-2:#F3F1EA;
  --muted:#5E6B76;
  --muted-2:#8A96A0;
  --border:#E4E0D5;
  --line-on-dark:rgba(255,255,255,.14);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper-2);color:var(--ink);font-family:'Poppins',sans-serif;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.serif{font-family:'Lora',serif;}
a{text-decoration:none;color:inherit;}

.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;font-size:13.5px;font-weight:600;letter-spacing:.02em;cursor:pointer;border:1.5px solid transparent;border-radius:3px;transition:opacity .2s;}
.btn:hover{opacity:.88;}
.btn-primary{background:var(--green);color:#fff;}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy);}
.btn-text{color:var(--navy);font-size:13px;font-weight:600;border-bottom:1px solid var(--navy);padding-bottom:3px;}

.form-alert{background:var(--green-mist);color:var(--green-deep);border:1px solid #BFE3CD;border-radius:4px;padding:12px 16px;font-size:12.5px;margin-bottom:16px;}

/* app shell */
.app-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh;}

.sidebar{background:var(--navy);color:#fff;padding:28px 22px;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.sidebar .veinmark{position:absolute;bottom:-40px;left:-50px;width:260px;height:380px;opacity:.05;color:#fff;}
.sb-logo{display:flex;align-items:center;gap:10px;font-family:'Lora',serif;font-size:18px;font-weight:600;color:#fff;margin-bottom:6px;padding:6px 10px;position:relative;z-index:1;}
.sb-logo svg{width:22px;height:22px;}
.sb-org{font-size:11px;color:#8FA0B3;padding:0 10px 26px;border-bottom:1px solid var(--line-on-dark);margin-bottom:22px;position:relative;z-index:1;}
.sb-org b{display:block;color:#D7DEE5;font-size:12.5px;font-weight:600;margin-top:2px;}

.sb-nav{display:flex;flex-direction:column;gap:2px;position:relative;z-index:1;}
.sb-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:5px;font-size:13px;font-weight:500;color:#AEBECD;}
.sb-link svg{flex:0 0 auto;width:17px;height:17px;}
.sb-link.active{background:rgba(255,255,255,.08);color:#fff;font-weight:600;}
.sb-link.active svg{color:#8FE0B4;}

.sb-bottom{margin-top:auto;padding-top:20px;border-top:1px solid var(--line-on-dark);position:relative;z-index:1;}

.app-main{display:flex;flex-direction:column;}
.topbar{background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:20px 40px;}
.topbar h1{font-family:'Lora',serif;font-size:19px;font-weight:600;color:var(--navy);margin:0;}
.topbar-right{display:flex;align-items:center;gap:22px;}
.bell{position:relative;color:var(--muted);}
.bell .dot{position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--green);border:1.5px solid #fff;}
.avatar-block{display:flex;align-items:center;gap:10px;}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--green-mist);color:var(--green-deep);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-family:'Lora',serif;}
.avatar-name{font-size:12.5px;}
.avatar-name b{display:block;color:var(--navy);font-weight:600;}
.avatar-name span{color:var(--muted-2);font-size:11px;}

.content{padding:40px;flex:1;}
.greet h2{font-family:'Lora',serif;font-size:26px;font-weight:600;color:var(--navy);margin:0 0 4px;}
.greet p{margin:0 0 34px;font-size:13.5px;color:var(--muted);}

.card{background:#fff;border:1px solid var(--border);border-radius:6px;}
.status-card{padding:32px 34px;margin-bottom:24px;}
.status-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px;flex-wrap:wrap;gap:14px;}
.status-card-head h3{font-family:'Lora',serif;font-size:17px;font-weight:600;color:var(--navy);margin:0 0 5px;}
.status-card-head p{margin:0;font-size:12.5px;color:var(--muted);}
.status-pill{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 13px;border-radius:20px;white-space:nowrap;}
.status-pill.review{background:#FFF3DA;color:#8A6100;}
.status-pill.approved{background:var(--green-mist);color:var(--green-deep);}
.status-pill.declined{background:#FBE4E1;color:#8A2E20;}
.status-pill.pending{background:var(--paper-2);color:var(--muted-2);}

.stepper{display:flex;align-items:center;overflow-x:auto;}
.step-item{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;min-width:90px;}
.step-item .sdot{width:11px;height:11px;border-radius:50%;background:var(--border);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--border);z-index:1;}
.step-item.done .sdot{background:var(--green);box-shadow:0 0 0 1.5px var(--green);}
.step-item.current .sdot{background:#fff;box-shadow:0 0 0 2px #C98A00;width:13px;height:13px;}
.step-item .sline{position:absolute;top:5px;left:50%;width:100%;height:2px;background:var(--border);z-index:0;}
.step-item.done .sline{background:var(--green);}
.step-item:last-child .sline{display:none;}
.step-item .slabel{margin-top:12px;font-size:11px;text-align:center;color:var(--muted-2);font-weight:600;max-width:90px;}
.step-item.current .slabel{color:#8A6100;}
.step-item.done .slabel{color:var(--navy);}

.row2{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;}
.panel{padding:28px 30px;}
.panel h4{font-family:'Lora',serif;font-size:15.5px;font-weight:600;color:var(--navy);margin:0 0 20px;}

.doc-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--border);gap:14px;}
.doc-row:last-child{border-bottom:none;padding-bottom:0;}
.doc-left{display:flex;align-items:center;gap:12px;}
.doc-left svg{color:var(--muted-2);flex:0 0 auto;}
.doc-name{font-size:13px;color:var(--navy);font-weight:500;}
.doc-right{display:flex;align-items:center;gap:10px;}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:4px 10px;border-radius:20px;}
.tag.verified{background:var(--green-mist);color:var(--green-deep);}
.tag.pending,.tag.in_review{background:#FFF3DA;color:#8A6100;}
.tag.required,.tag.requested{background:var(--paper-2);color:var(--muted-2);border:1px solid var(--border);}
.doc-upload-form{display:inline-flex;align-items:center;gap:6px;}
.doc-upload-form input[type=file]{font-size:10.5px;max-width:110px;}
.doc-upload-form button{border:none;background:var(--navy);color:#fff;font-size:10.5px;font-weight:600;padding:5px 9px;border-radius:3px;cursor:pointer;}

.summary-line{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);font-size:12.5px;gap:14px;}
.summary-line:last-child{border-bottom:none;}
.summary-line .k{color:var(--muted-2);}
.summary-line .v{color:var(--navy);font-weight:600;text-align:right;}

.helpbar{margin-top:24px;display:flex;justify-content:space-between;align-items:center;padding:20px 30px;background:var(--green-mist);border-radius:6px;flex-wrap:wrap;gap:12px;}
.helpbar p{margin:0;font-size:12.5px;color:var(--green-deep);font-weight:500;}

.empty-state{background:#fff;border:1px dashed var(--border);border-radius:6px;padding:50px;text-align:center;color:var(--muted);}
.empty-state h3{color:var(--navy);margin:0 0 10px;}

/* login page */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy);padding:24px;}
.login-card{background:#fff;border-radius:8px;max-width:420px;width:100%;padding:48px 44px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);}
.login-logo{display:flex;align-items:center;gap:10px;font-family:'Lora',serif;font-size:20px;font-weight:600;color:var(--navy);margin-bottom:8px;}
.login-logo svg{width:24px;height:24px;}
.login-card h1{font-size:22px;font-weight:600;color:var(--navy);margin:18px 0 8px;}
.login-card p.sub{font-size:13px;color:var(--muted);margin:0 0 30px;}
.login-field{margin-bottom:18px;display:flex;flex-direction:column;gap:8px;}
.login-field label{font-size:12px;font-weight:600;color:var(--navy);}
.login-field input,.login-field select,.login-field textarea{font-family:'Poppins',sans-serif;font-size:13.5px;border:1.5px solid var(--border);border-radius:3px;padding:12px 14px;background:var(--paper-2);outline:none;width:100%;}
.login-field textarea{resize:vertical;}
.login-note{margin-top:22px;font-size:11.5px;color:var(--muted-2);line-height:1.6;text-align:center;}