:root{
  --blue-50:#eef4ff; --blue-100:#dbe6fe; --blue-500:#2f5fe0; --blue-600:#254bc4; --blue-700:#1b399a;
  --navy-900:#0d1b3d; --navy-800:#142451;
  --green-50:#eafaf1; --green-500:#1a9e5c; --green-600:#158049;
  --orange-50:#fff6ea; --orange-500:#e08a1e; --orange-600:#b96f11;
  --red-50:#fdeeee; --red-500:#d5433a; --red-600:#b2352d;
  --gray-25:#fafbfc; --gray-50:#f5f7fb; --gray-100:#eef1f6; --gray-200:#e3e7ef; --gray-300:#cdd3e0;
  --gray-400:#a6aec2; --gray-500:#7c8499; --gray-600:#5b6379; --gray-700:#3d4459; --gray-800:#252b3d; --gray-900:#161a26;
  --white:#ffffff;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --shadow-sm: 0 1px 2px rgba(13,27,61,0.06);
  --shadow-md: 0 4px 14px rgba(13,27,61,0.08);
  --shadow-lg: 0 16px 40px rgba(13,27,61,0.12);
  --font-display:'Plus Jakarta Sans', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:var(--font-body); color:var(--gray-800); background:var(--gray-50); -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5{font-family:var(--font-display); color:var(--navy-900); letter-spacing:-0.02em;}
a{color:inherit; text-decoration:none;}
button{font-family:var(--font-body); cursor:pointer;}
svg{display:block;}
img{max-width:100%;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:14px; padding:11px 20px; border-radius:10px; border:1px solid transparent; transition:.15s; line-height:1;}
.btn-primary{background:var(--blue-500); color:#fff; box-shadow:0 1px 2px rgba(47,95,224,.3);}
.btn-primary:hover{background:var(--blue-600);}
.btn-secondary{background:#fff; color:var(--navy-900); border-color:var(--gray-300);}
.btn-secondary:hover{border-color:var(--gray-400); background:var(--gray-50);}
.btn-ghost{background:transparent; color:var(--gray-600);}
.btn-ghost:hover{background:var(--gray-100); color:var(--navy-900);}
.btn-danger{background:#fff; color:var(--red-500); border-color:var(--red-500);}
.btn-danger:hover{background:var(--red-50);}
.btn-sm{padding:7px 13px; font-size:13px; border-radius:8px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

.card{background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);}
.input-group{display:flex; flex-direction:column; gap:6px;}
.input-group label{font-size:13px; font-weight:600; color:var(--gray-700);}
.input, select.input, textarea.input{font-family:var(--font-body); font-size:14px; padding:11px 14px; border-radius:9px; border:1.5px solid var(--gray-200); background:#fff; color:var(--navy-900); transition:.15s; outline:none; width:100%;}
.input:focus{border-color:var(--blue-500); box-shadow:0 0 0 3.5px var(--blue-100);}
.input::placeholder{color:var(--gray-400);}
.hint{font-size:12.5px; color:var(--gray-500);}

.badge{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px;}
.badge-blue{background:var(--blue-50); color:var(--blue-600);}
.badge-green{background:var(--green-50); color:var(--green-600);}
.badge-orange{background:var(--orange-50); color:var(--orange-600);}
.badge-red{background:var(--red-50); color:var(--red-600);}
.badge-gray{background:var(--gray-100); color:var(--gray-600);}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

.icon{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.progress-track{height:8px; background:var(--gray-100); border-radius:20px; overflow:hidden;}
.progress-fill{height:100%; border-radius:20px; background:var(--blue-500); transition:width .3s;}

.alert{display:flex; gap:12px; padding:14px 16px; border-radius:12px; font-size:13.5px; border:1px solid;}
.alert-info{background:var(--blue-50); border-color:var(--blue-100); color:var(--blue-700);}
.alert-success{background:var(--green-50); border-color:#c8ecd9; color:var(--green-600);}
.alert-warning{background:var(--orange-50); border-color:#f6dfb8; color:var(--orange-600);}
.alert-error{background:var(--red-50); border-color:#f6c9c6; color:var(--red-600);}

.toast-wrap{position:fixed; top:20px; right:20px; z-index:999; display:flex; flex-direction:column; gap:10px;}
.toast{background:var(--navy-900); color:#fff; padding:13px 18px; border-radius:10px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; animation:slidein .2s ease;}
.toast.error{background:var(--red-600);}
.toast.success{background:var(--green-600);}
@keyframes slidein{from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);}}

/* ---------- Landing / public ---------- */
.lp-nav{display:flex; align-items:center; justify-content:space-between; padding:18px 6%; position:sticky; top:0; background:rgba(250,251,252,.9); backdrop-filter:blur(10px); z-index:50; border-bottom:1px solid var(--gray-200);}
.lp-logo{font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--navy-900); display:flex; align-items:center; gap:8px;}
.lp-logo .dot{width:10px;height:10px;border-radius:3px;background:var(--blue-500);}
.lp-links{display:flex; gap:32px; font-size:14px; font-weight:600; color:var(--gray-600);}
.lp-links a:hover{color:var(--navy-900);}
.lp-actions{display:flex; gap:10px;}

.hero{padding:70px 6%; display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; max-width:1400px; margin:0 auto;}
.hero-eyebrow{display:inline-flex; align-items:center; gap:8px; background:var(--blue-50); color:var(--blue-600); font-size:13px; font-weight:700; padding:6px 14px; border-radius:20px; margin-bottom:22px;}
.hero h1{font-size:48px; line-height:1.1; font-weight:800; margin-bottom:20px;}
.hero h1 span{color:var(--blue-500);}
.hero p{font-size:17px; color:var(--gray-600); line-height:1.6; max-width:480px; margin-bottom:32px;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap;}

.section{padding:70px 6%; max-width:1400px; margin:0 auto;}
.section-head{text-align:center; max-width:640px; margin:0 auto 44px;}
.section-eyebrow{color:var(--blue-600); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px;}
.section-head h2{font-size:32px; margin-bottom:12px;}
.section-head p{color:var(--gray-600); font-size:15px;}

.pkg-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.pkg-card{padding:26px 22px; display:flex; flex-direction:column; position:relative;}
.pkg-card.featured{border-color:var(--blue-500); box-shadow:0 10px 30px rgba(47,95,224,.16); transform:translateY(-6px);}
.pkg-tag{position:absolute; top:-13px; left:22px; background:var(--blue-500); color:#fff; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:20px;}
.pkg-price{font-family:var(--font-display); font-size:28px; font-weight:800; color:var(--navy-900); margin:8px 0 4px;}
.pkg-feats{list-style:none; margin:18px 0 22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.pkg-feats li{display:flex; gap:9px; font-size:13.5px; color:var(--gray-600); align-items:flex-start;}
.pkg-feats .icon{width:15px;height:15px; color:var(--green-500); flex-shrink:0; margin-top:2px;}

.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.svc-card{padding:22px; display:flex; flex-direction:column; gap:10px;}
.svc-card h4{font-size:14.5px;}
.svc-card p{font-size:12.5px; color:var(--gray-500); line-height:1.5; flex:1;}

.footer{background:var(--navy-900); color:#b7bede; padding:50px 6% 26px; margin-top:40px;}
.footer-bottom{max-width:1400px; margin:0 auto; padding-top:20px; font-size:12.5px; color:#7783ab; text-align:center;}

/* ---------- Auth ---------- */
.auth-wrap{min-height:100vh; display:grid; grid-template-columns:1fr 1fr;}
.auth-side{background:linear-gradient(160deg,var(--navy-900),#1c2f66); padding:60px; display:flex; flex-direction:column; justify-content:space-between; color:#fff;}
.auth-side .quote{font-size:22px; line-height:1.5; font-weight:600; font-family:var(--font-display); max-width:400px;}
.auth-side .quote-by{margin-top:20px; font-size:13px; color:#aab3d6;}
.auth-form-col{display:flex; align-items:center; justify-content:center; padding:40px;}
.auth-box{width:100%; max-width:400px;}
.auth-box h2{font-size:28px; margin-bottom:8px;}
.auth-box .sub{color:var(--gray-500); font-size:14px; margin-bottom:26px;}
.auth-box form{display:flex; flex-direction:column; gap:16px;}
.auth-row-between{display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-top:2px;}
.checkbox-row{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gray-600);}
.auth-switch{text-align:center; font-size:13.5px; color:var(--gray-600); margin-top:22px;}
.auth-switch a{color:var(--blue-600); font-weight:700;}
.otp-boxes{display:flex; gap:10px; justify-content:center; margin:6px 0 4px;}
.otp-box{width:52px;height:58px;border:1.5px solid var(--gray-200); border-radius:10px; text-align:center; font-size:22px; font-weight:700; font-family:var(--font-mono);}
.otp-box:focus{outline:none;border-color:var(--blue-500); box-shadow:0 0 0 3.5px var(--blue-100);}
.dev-otp-hint{background:var(--orange-50); border:1px dashed var(--orange-500); color:var(--orange-600); font-size:12.5px; padding:10px 12px; border-radius:9px; margin-bottom:16px; font-family:var(--font-mono); text-align:center;}

/* ---------- App shell ---------- */
.app-shell{display:grid; grid-template-columns:250px 1fr; min-height:100vh;}
.app-sidebar{background:var(--navy-900); color:#c7cde3; padding:22px 14px; display:flex; flex-direction:column;}
.app-logo{display:flex; align-items:center; gap:9px; padding:8px 10px 24px; font-family:var(--font-display); font-weight:800; color:#fff; font-size:17px;}
.app-logo .dot{width:9px;height:9px;border-radius:3px;background:var(--blue-500);}
.nav-section-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:#5f6a95; padding:14px 12px 8px;}
.nav-item{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; font-size:13.5px; font-weight:600; margin-bottom:2px; transition:.15s; cursor:pointer;}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{background:var(--blue-500); color:#fff;}
.nav-item .icon{width:17px;height:17px;}
.sidebar-foot{margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.08);}

.app-main{display:flex; flex-direction:column; min-width:0;}
.app-topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; background:#fff; border-bottom:1px solid var(--gray-200); position:sticky; top:0; z-index:20;}
.topbar-search{display:flex; align-items:center; gap:9px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:9px; padding:9px 14px; width:300px; color:var(--gray-400); font-size:13.5px;}
.topbar-right{display:flex; align-items:center; gap:18px;}
.topbar-icon-btn{position:relative; width:36px;height:36px;border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--gray-50); border:1px solid var(--gray-200); color:var(--gray-600); cursor:pointer;}
.topbar-icon-btn .dot-badge{position:absolute; top:-3px;right:-3px; width:9px;height:9px;background:var(--red-500); border:2px solid #fff; border-radius:50%;}
.topbar-user{display:flex; align-items:center; gap:10px;}
.avatar{width:36px;height:36px;border-radius:50%; background:var(--blue-500); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display); font-size:14px;}
.app-content{padding:28px; flex:1;}

.page-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; flex-wrap:wrap; gap:12px;}
.page-head h2{font-size:24px; margin-bottom:4px;}
.page-head p{color:var(--gray-500); font-size:13.5px;}
.greeting-banner{background:linear-gradient(120deg,var(--navy-900),#1c2f66); border-radius:var(--radius-lg); padding:26px 30px; color:#fff; margin-bottom:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
.greeting-banner h2{color:#fff; font-size:22px; margin-bottom:6px;}
.greeting-banner p{color:#aab3d6; font-size:13.5px;}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;}
.stat-card{padding:20px; display:flex; flex-direction:column; gap:10px;}
.stat-top{display:flex; justify-content:space-between; align-items:flex-start;}
.stat-icon{width:38px;height:38px;border-radius:10px; display:flex; align-items:center; justify-content:center;}
.stat-val{font-family:var(--font-display); font-size:28px; font-weight:800; color:var(--navy-900);}
.stat-label{font-size:13px; color:var(--gray-500); font-weight:600;}

.dash-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:20px;}
.panel{padding:22px;}
.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.panel-head h3{font-size:15.5px;}
.activity-item{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--gray-100);}
.activity-item:last-child{border:none;}
.activity-dot{width:32px;height:32px;border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.activity-item b{font-size:13.5px; display:block; margin-bottom:2px;}
.activity-item span{font-size:12px; color:var(--gray-500);}
.quick-action{display:flex; align-items:center; gap:12px; padding:12px; border-radius:10px; border:1px solid var(--gray-200); margin-bottom:10px; font-size:13.5px; font-weight:600; cursor:pointer;}
.quick-action:hover{border-color:var(--blue-500); background:var(--blue-50);}
.quick-action .icon{color:var(--blue-500);}

.table-wrap{overflow-x:auto;}
table.data-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.data-table th{text-align:left; padding:12px 16px; color:var(--gray-500); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--gray-200); background:var(--gray-25);}
.data-table td{padding:15px 16px; border-bottom:1px solid var(--gray-100); color:var(--gray-700);}
.data-table tr:hover td{background:var(--gray-25);}
.req-no{font-family:var(--font-mono); font-weight:600; color:var(--navy-900); font-size:12.5px;}
.officer-cell{display:flex; align-items:center; gap:8px;}
.mini-avatar{width:26px;height:26px;border-radius:50%; background:var(--gray-700); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0;}
.table-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap;}
.mini-progress{width:90px;}

.wizard-wrap{display:grid; grid-template-columns:1fr 320px; gap:24px;}
.stepper{display:flex; align-items:center; margin-bottom:28px; flex-wrap:wrap;}
.step-node{display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; flex:1; min-width:90px;}
.step-circle{width:32px;height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; font-family:var(--font-display); border:2px solid var(--gray-300); color:var(--gray-400); background:#fff; z-index:2;}
.step-node.done .step-circle{background:var(--green-500); border-color:var(--green-500); color:#fff;}
.step-node.now .step-circle{background:var(--blue-500); border-color:var(--blue-500); color:#fff; box-shadow:0 0 0 5px var(--blue-100);}
.step-node span{font-size:11px; font-weight:600; color:var(--gray-500); text-align:center;}
.step-node.now span{color:var(--navy-900);}
.step-line{position:absolute; top:16px; left:-50%; width:100%; height:2px; background:var(--gray-200); z-index:1;}
.step-node:first-child .step-line{display:none;}
.step-node.done .step-line, .step-node.now .step-line{background:var(--green-500);}

.form-section-title{font-size:14px; font-weight:700; color:var(--navy-900); margin:26px 0 14px;}
.form-section-title:first-child{margin-top:0;}
.form-grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}

.success-card{text-align:center; padding:44px 36px; max-width:520px; margin:0 auto;}
.success-icon{width:66px;height:66px; border-radius:50%; background:var(--green-50); color:var(--green-500); display:flex; align-items:center; justify-content:center; margin:0 auto 20px;}
.success-name-box{background:var(--gray-50); border:1px solid var(--gray-200); border-radius:10px; padding:16px; margin:20px 0; font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--navy-900);}

.bank-card{background:linear-gradient(135deg,var(--navy-900),#1c2f66); color:#fff; border-radius:var(--radius-lg); padding:24px;}
.bank-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:13.5px; gap:12px;}
.bank-row:last-child{border:none;}
.bank-row span:first-child{color:#9aa4cc; flex-shrink:0;}
.bank-row span:last-child{font-weight:700; font-family:var(--font-mono); text-align:right;}

.dropzone{border:2px dashed var(--gray-300); border-radius:14px; padding:30px; text-align:center; background:var(--gray-25); cursor:pointer; transition:.15s;}
.dropzone:hover, .dropzone.drag-over{border-color:var(--blue-500); background:var(--blue-50);}
.dropzone .icon{width:30px;height:30px; color:var(--gray-400); margin:0 auto 10px;}
.upload-item{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--gray-200); border-radius:10px; margin-top:10px;}
.upload-item .fico{width:36px;height:36px;border-radius:8px; background:var(--blue-50); color:var(--blue-600); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.upload-item .meta{flex:1; min-width:0;}
.upload-item .meta b{font-size:13px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.upload-item .meta span{font-size:11.5px; color:var(--gray-500);}

.track-wrap{max-width:640px; margin:0 auto;}
.track-item{display:flex; gap:16px; position:relative; padding-bottom:26px;}
.track-item:last-child{padding-bottom:0;}
.track-line{position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--gray-200);}
.track-item.done .track-line{background:var(--green-500);}
.track-dot{width:32px;height:32px;border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; z-index:2; font-size:12px; font-weight:700;}
.track-item.done .track-dot{background:var(--green-500); color:#fff;}
.track-item.now .track-dot{background:var(--blue-500); color:#fff; box-shadow:0 0 0 5px var(--blue-100);}
.track-item.pending .track-dot{background:#fff; color:var(--gray-400); border:2px solid var(--gray-200);}
.track-text{padding-top:4px;}
.track-text b{font-size:14px; color:var(--navy-900); display:block;}
.track-text span{font-size:12.5px; color:var(--gray-500);}
.track-item.now .track-text b{color:var(--blue-600);}

.two-col{display:grid; grid-template-columns:2fr 1fr; gap:20px;}
.center-page{max-width:640px; margin:0 auto;}

.segment{display:inline-flex; background:var(--gray-100); border-radius:10px; padding:4px; gap:2px;}
.segment button{padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; color:var(--gray-600); background:transparent; border:none;}
.segment button.active{background:#fff; color:var(--navy-900); box-shadow:var(--shadow-sm);}

.toggle{position:relative; width:40px; height:22px; border-radius:20px; background:var(--gray-300); flex-shrink:0; cursor:pointer; transition:.15s; border:none;}
.toggle.on{background:var(--green-500);}
.toggle::after{content:'';position:absolute; top:2px; left:2px; width:18px;height:18px; background:#fff; border-radius:50%; transition:.15s; box-shadow:0 1px 3px rgba(0,0,0,.2);}
.toggle.on::after{left:20px;}

.editable-pkg{padding:18px; display:flex; flex-direction:column; gap:10px; position:relative;}
.field-row{display:flex; align-items:center; gap:10px;}
.field-row label{font-size:12px; font-weight:700; color:var(--gray-500); width:56px; flex-shrink:0;}
.mini-input{border:1.5px solid var(--gray-200); border-radius:8px; padding:8px 10px; font-size:13px; width:100%; font-family:inherit;}
.mini-input:focus{outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px var(--blue-100);}
.feat-edit-row{display:flex; align-items:center; gap:8px;}
.feat-edit-row .icon{width:14px;height:14px; color:var(--green-500); flex-shrink:0;}
.feat-edit-row .rm{color:var(--gray-300); cursor:pointer; font-size:16px; flex-shrink:0;}
.add-feat-link{font-size:12.5px; color:var(--blue-600); font-weight:700; cursor:pointer;}

.doc-flow-card{padding:16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.doc-flow-card .fico{width:38px;height:38px;border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.doc-flow-meta{flex:1; min-width:160px;}
.doc-flow-meta b{font-size:13.5px; display:block;}
.doc-flow-meta span{font-size:11.5px; color:var(--gray-500);}
.doc-flow-dir{display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 9px; border-radius:14px; white-space:nowrap;}
.dir-in{background:var(--blue-50); color:var(--blue-600);}
.dir-out{background:var(--green-50); color:var(--green-600);}

.builder-field{display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid var(--gray-200); border-radius:10px; margin-bottom:8px; background:#fff;}
.builder-field .fname{flex:1; font-size:13.5px; font-weight:600;}
.builder-field .ftype{font-size:11.5px; color:var(--gray-500); background:var(--gray-100); padding:3px 9px; border-radius:12px; white-space:nowrap;}
.builder-section{margin-bottom:22px;}
.builder-section-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.builder-section-head h4{font-size:14px;}

.stage-select-item{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1.5px solid var(--gray-200); border-radius:10px; margin-bottom:8px; cursor:pointer;}
.stage-select-item.picked{border-color:var(--blue-500); background:var(--blue-50);}
.stage-select-item .num{width:24px;height:24px;border-radius:50%; background:var(--gray-100); color:var(--gray-500); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.stage-select-item.picked .num{background:var(--blue-500); color:#fff;}
.ref-code-box{background:var(--navy-900); color:#fff; border-radius:12px; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:10px; flex-wrap:wrap;}
.ref-code-box b{font-family:var(--font-mono); font-size:18px; letter-spacing:1px;}
.ref-code-box span{font-size:11.5px; color:#9aa4cc; display:block; margin-bottom:4px;}

.loading-spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--gray-200);border-top-color:var(--blue-500);animation:spin .7s linear infinite;margin:30px auto;}
@keyframes spin{to{transform:rotate(360deg);}}
.empty-state{text-align:center; padding:50px 20px; color:var(--gray-500);}
.empty-state .icon{width:36px;height:36px;margin:0 auto 12px;color:var(--gray-300);}

@media (max-width: 900px){
  .app-shell{grid-template-columns:1fr;}
  .app-sidebar{display:none;}
  .hero{grid-template-columns:1fr;}
  .pkg-grid, .svc-grid, .stat-grid{grid-template-columns:repeat(2,1fr);}
  .two-col, .wizard-wrap, .dash-grid{grid-template-columns:1fr;}
}