@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --blue:#0A84FF; --blue-l:#5AC8FA; --blue-d:#0056CC;
  --green:#30D158; --orange:#FF9F0A; --red:#FF453A;
  --purple:#BF5AF2; --teal:#40CBE0; --pink:#FF375F;
  --g-bg:rgba(255,255,255,0.72);
  --g-deep:rgba(255,255,255,0.88);
  --g-border:rgba(255,255,255,0.9);
  --g-border2:rgba(255,255,255,0.55);
  --shadow:0 8px 32px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.07);
  --shadow-lg:0 20px 60px rgba(0,0,0,.14),0 4px 16px rgba(0,0,0,.09);
  --shadow-xl:0 36px 80px rgba(0,0,0,.18),0 8px 28px rgba(0,0,0,.11);
  --surf:#F2F2F7;
  --t1:#1C1C1E; --t2:#48484A; --t3:#8E8E93; --t4:#C7C7CC;
  --r:16px; --rs:12px; --rl:22px; --rll:28px; --rf:999px;
  --spring:.38s cubic-bezier(.34,1.56,.64,1);
  --ease:.24s cubic-bezier(.25,.46,.45,.94);
}

html{scroll-behavior:smooth}
body{
  font-family:'Outfit',system-ui,-apple-system,sans-serif;
  background:var(--surf); color:var(--t1);
  min-height:100vh; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Mesh background */
body::before{
  content:''; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 80% 55% at 15% -5%, rgba(10,132,255,.18) 0%,transparent 58%),
    radial-gradient(ellipse 55% 45% at 90% 10%, rgba(191,90,242,.14) 0%,transparent 55%),
    radial-gradient(ellipse 50% 40% at 65% 90%, rgba(48,209,88,.12) 0%,transparent 50%),
    radial-gradient(ellipse 60% 45% at 0% 80%, rgba(255,159,10,.10) 0%,transparent 55%),
    #F2F2F7;
  pointer-events:none;
}

/* Glass helpers */
.glass{
  background:var(--g-bg);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid var(--g-border); box-shadow:var(--shadow);
}

/* ── Layout ── */
.page-center{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.auth-card{
  width:100%; max-width:420px; border-radius:var(--rll);
  padding:42px 36px;
  background:var(--g-deep);
  backdrop-filter:blur(60px) saturate(200%);
  -webkit-backdrop-filter:blur(60px) saturate(200%);
  border:1.5px solid var(--g-border);
  box-shadow:var(--shadow-xl);
  animation:slideUp .5s cubic-bezier(.34,1.2,.64,1);
}
@keyframes slideUp{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── Brand ── */
.brand{text-align:center;margin-bottom:32px}
.brand-orb{
  width:78px; height:78px;
  background:linear-gradient(135deg,var(--blue),var(--blue-l));
  border-radius:22px; margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 28px rgba(10,132,255,.38),0 2px 8px rgba(10,132,255,.22),
             inset 0 1px 0 rgba(255,255,255,.4);
  animation:orbFloat 5s ease-in-out infinite;
}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.brand-orb svg{width:38px;height:38px}
.brand h1{font-size:22px;font-weight:900;letter-spacing:-.5px}
.brand p{font-size:14px;color:var(--t3);margin-top:4px}

/* ── Form elements ── */
.fg{margin-bottom:14px}
.fg label{
  display:block;font-size:11px;font-weight:800;color:var(--t3);
  margin-bottom:7px;text-transform:uppercase;letter-spacing:.7px;
}
.fg input:not([type=checkbox]):not([type=file]),
.fg textarea, .fg select{
  width:100%;
  background:rgba(118,118,128,.10);
  border:1.5px solid transparent; border-radius:var(--rs);
  padding:13px 16px; font-size:15px; font-weight:500;
  color:var(--t1); font-family:'Outfit',system-ui,sans-serif;
  transition:var(--ease); outline:none;
  -webkit-appearance:none; appearance:none;
}
.fg input:focus,.fg textarea:focus,.fg select:focus{
  background:rgba(10,132,255,.07);
  border-color:rgba(10,132,255,.5);
  box-shadow:0 0 0 4px rgba(10,132,255,.1);
}
.fg input[disabled]{opacity:.45;cursor:not-allowed}
.fg textarea{resize:vertical;min-height:82px;line-height:1.5}
.fg select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238E8E93' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  background-color:rgba(118,118,128,.10);padding-right:40px;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Checkbox */
.chk{display:flex;align-items:center;gap:10px;margin-bottom:14px;cursor:pointer}
.chk input[type=checkbox]{width:20px;height:20px;accent-color:var(--blue);cursor:pointer;flex-shrink:0}
.chk label{font-size:14px;color:var(--t2);cursor:pointer;font-weight:500}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px; border-radius:var(--rs);
  font-size:15px; font-weight:800; letter-spacing:.1px;
  font-family:'Outfit',system-ui,sans-serif;
  border:none; cursor:pointer; transition:var(--spring);
  text-decoration:none; width:100%;
  position:relative; overflow:hidden;
}
.btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,transparent 55%);
  pointer-events:none;
}
.btn-primary{
  background:linear-gradient(145deg,#1A91FF 0%,var(--blue) 45%,var(--blue-d) 100%);
  color:#fff;
  box-shadow:0 5px 18px rgba(10,132,255,.42),0 1px 4px rgba(10,132,255,.3),
             inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 10px 32px rgba(10,132,255,.52)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{background:rgba(118,118,128,.12);color:var(--blue)}
.btn-ghost:hover{background:rgba(10,132,255,.1);transform:translateY(-1px)}
.btn-success{
  background:linear-gradient(145deg,#3FE06A,var(--green),#24B84A);
  color:#fff;
  box-shadow:0 5px 18px rgba(48,209,88,.38);
}
.btn-success:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(48,209,88,.48)}
.btn-danger{
  background:linear-gradient(145deg,#FF6058,var(--red),#D42B22);
  color:#fff; box-shadow:0 4px 14px rgba(255,69,58,.32);
}
.btn-danger:hover{transform:translateY(-1px)}
.btn-dark{
  background:linear-gradient(145deg,#3A3A3C,#1C1C1E);
  color:#fff; box-shadow:0 5px 18px rgba(0,0,0,.3);
}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.4)}
.btn-sm{padding:8px 16px;font-size:13px;width:auto;border-radius:10px}
.btn-auto{width:auto}

/* ── Alerts ── */
.alert{
  padding:13px 16px;border-radius:var(--rs);font-size:14px;
  margin-bottom:14px;line-height:1.55;font-weight:500;
  display:flex;align-items:flex-start;gap:10px;
}
.ai{font-size:16px;flex-shrink:0;margin-top:1px}
.alert-error{background:rgba(255,69,58,.09);color:#CC2222;border:1px solid rgba(255,69,58,.2)}
.alert-success{background:rgba(48,209,88,.09);color:#1A8A38;border:1px solid rgba(48,209,88,.2)}
.alert-info{background:rgba(10,132,255,.07);color:#0056CC;border:1px solid rgba(10,132,255,.18)}
.alert-warn{background:rgba(255,159,10,.09);color:#9A6000;border:1px solid rgba(255,159,10,.2)}

/* ── Navbar ── */
.navbar{
  background:rgba(242,242,247,.78);
  backdrop-filter:blur(32px) saturate(180%);
  -webkit-backdrop-filter:blur(32px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.75);
  padding:0 20px; height:58px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.nav-brand{
  font-size:16px;font-weight:900;
  background:linear-gradient(135deg,var(--blue),var(--blue-l));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  display:flex;align-items:center;gap:9px;text-decoration:none;
}
.nav-dot{
  width:28px;height:28px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--blue-l));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(10,132,255,.32);
}
.nav-dot svg{width:16px;height:16px}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-user{
  font-size:12px;font-weight:700;color:var(--t3);
  background:rgba(118,118,128,.1);padding:5px 12px;border-radius:var(--rf);
}

/* ── Main ── */
.main{max-width:880px;margin:0 auto;padding:22px 16px}

/* ── Section card ── */
.sc{
  background:var(--g-bg);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid var(--g-border2);
  border-radius:var(--rl); box-shadow:var(--shadow);
  padding:22px; margin-bottom:16px;
  animation:fadeIn .4s var(--ease);
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sc-title{
  font-size:16px;font-weight:900;letter-spacing:-.3px;
  margin-bottom:18px;display:flex;align-items:center;gap:8px;
}

/* ── Welcome ── */
.welcome{
  background:linear-gradient(145deg,rgba(10,132,255,.88),rgba(64,160,240,.92));
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid rgba(255,255,255,.4);
  border-radius:var(--rll); padding:28px 24px; color:#fff;
  margin-bottom:16px;
  box-shadow:0 14px 44px rgba(10,132,255,.32),0 4px 16px rgba(10,132,255,.2),
             inset 0 1px 0 rgba(255,255,255,.35);
  position:relative;overflow:hidden;
}
.welcome::before{
  content:'';position:absolute;top:-50px;right:-40px;
  width:180px;height:180px;
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,transparent 65%);
  pointer-events:none;
}
.welcome h2{font-size:22px;font-weight:900;letter-spacing:-.3px}
.welcome p{opacity:.88;margin-top:5px;font-size:14px}
.w-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.32);
  padding:5px 14px;border-radius:var(--rf);
  font-size:12px;font-weight:800;margin-top:14px;letter-spacing:.2px;
}

/* ── Steps ── */
.steps{
  display:flex; background:var(--g-bg);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid var(--g-border2); border-radius:var(--rl);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:16px;
}
.step{flex:1;padding:14px 6px;text-align:center;position:relative;transition:var(--ease)}
.step::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;
  border-left:6px solid rgba(255,255,255,.7);z-index:1;
}
.step:last-child::after{display:none}
.step .si{font-size:18px;margin-bottom:4px;display:block}
.step .sl{font-size:9px;font-weight:900;color:var(--t4);text-transform:uppercase;letter-spacing:.6px}
.step.done{background:rgba(48,209,88,.09)}
.step.done .sl{color:var(--green)}
.step.done::after{border-left-color:rgba(48,209,88,.15)}
.step.active{background:linear-gradient(135deg,rgba(10,132,255,.13),rgba(90,200,250,.08))}
.step.active .sl{color:var(--blue);font-weight:900}
.step.active::after{border-left-color:rgba(10,132,255,.12)}

/* ── Action grid ── */
.ag{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.ac{
  background:var(--g-bg);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid var(--g-border2); border-radius:var(--rl);
  box-shadow:var(--shadow); padding:18px 16px;
  text-decoration:none;display:flex;align-items:center;gap:13px;
  transition:var(--spring);
}
.ac:hover{transform:translateY(-3px) scale(1.01);box-shadow:var(--shadow-lg);border-color:rgba(10,132,255,.28)}
.ac:active{transform:scale(.98)}
.ac.off{opacity:.38;pointer-events:none;filter:grayscale(.3)}
.ac-orb{
  width:48px;height:48px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.orb-b{background:linear-gradient(135deg,rgba(10,132,255,.18),rgba(90,200,250,.12))}
.orb-o{background:linear-gradient(135deg,rgba(255,159,10,.18),rgba(255,204,0,.12))}
.orb-p{background:linear-gradient(135deg,rgba(191,90,242,.18),rgba(175,82,222,.12))}
.orb-g{background:linear-gradient(135deg,rgba(48,209,88,.18),rgba(40,194,80,.12))}
.ac h3{font-size:14px;font-weight:800;letter-spacing:-.1px}
.ac p{font-size:12px;color:var(--t3);margin-top:2px}

/* ── Upload ── */
.upload-box{
  border:2px dashed rgba(10,132,255,.22);
  border-radius:var(--rs); padding:20px 16px;
  text-align:center; cursor:pointer; transition:var(--ease);
  background:rgba(10,132,255,.03); position:relative;
}
.upload-box:hover{border-color:var(--blue);background:rgba(10,132,255,.07)}
.upload-box input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-box .ui{font-size:26px;margin-bottom:6px;display:block}
.upload-box p{font-size:12px;color:var(--t3);font-weight:500}
.upload-box .fn{font-size:12px;color:var(--blue);font-weight:700;margin-top:6px;min-height:16px;word-break:break-all}
.done-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(48,209,88,.12);border:1px solid rgba(48,209,88,.25);
  color:#1A8A38;padding:4px 10px;border-radius:var(--rf);
  font-size:11px;font-weight:800;
}

/* ── Doc grid ── */
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.doc-card{
  background:rgba(118,118,128,.06);border:1px solid rgba(255,255,255,.65);
  border-radius:var(--r);padding:14px;transition:var(--ease);
}
.doc-card.done{background:rgba(48,209,88,.07);border-color:rgba(48,209,88,.25)}
.doc-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.doc-head .di{font-size:20px}
.doc-head h4{font-size:13px;font-weight:800}

/* ── Admin table ── */
.tbl-wrap{border-radius:var(--rl);overflow:hidden;box-shadow:var(--shadow)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  text-align:left;padding:12px 16px;font-size:10px;font-weight:900;
  color:var(--t3);text-transform:uppercase;letter-spacing:.8px;
  background:rgba(118,118,128,.07);border-bottom:1px solid rgba(255,255,255,.7);
}
.tbl td{
  padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.55);
  font-size:14px;font-weight:500;background:var(--g-bg);
  transition:var(--ease);
}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(10,132,255,.04)}

/* ── Badge ── */
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--rf);font-size:11px;font-weight:800;letter-spacing:.2px}
.b-new{background:rgba(255,159,10,.12);color:#9A6000;border:1px solid rgba(255,159,10,.2)}
.b-processing{background:rgba(10,132,255,.1);color:#0056CC;border:1px solid rgba(10,132,255,.2)}
.b-documentation{background:rgba(191,90,242,.1);color:#7A2FB8;border:1px solid rgba(191,90,242,.2)}
.b-onboarding{background:rgba(64,203,224,.1);color:#0A7A8A;border:1px solid rgba(64,203,224,.2)}
.b-completed{background:rgba(48,209,88,.1);color:#1A6A30;border:1px solid rgba(48,209,88,.2)}

/* ── Modal ── */
.overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  z-index:999;align-items:center;justify-content:center;padding:20px;
}
.overlay.open{display:flex}
.modal{
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(60px) saturate(200%);
  -webkit-backdrop-filter:blur(60px) saturate(200%);
  border:1.5px solid var(--g-border); border-radius:var(--rll);
  padding:30px 28px; width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  box-shadow:var(--shadow-xl);
  animation:mIn .32s cubic-bezier(.34,1.3,.64,1);
}
@keyframes mIn{from{opacity:0;transform:scale(.92) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal h3{font-size:18px;font-weight:900;margin-bottom:18px;letter-spacing:-.2px}
.modal-x{
  float:right;cursor:pointer;font-size:17px;color:var(--t3);
  width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;background:rgba(118,118,128,.1);transition:var(--ease);
}
.modal-x:hover{background:rgba(118,118,128,.2);color:var(--t1)}

/* ── Admin gate ── */
#admin-gate{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
}
#admin-gate-card{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(60px);-webkit-backdrop-filter:blur(60px);
  border:1.5px solid var(--g-border); border-radius:var(--rll);
  padding:44px 38px; width:100%;max-width:380px;
  box-shadow:var(--shadow-xl); text-align:center;
  animation:slideUp .45s cubic-bezier(.34,1.2,.64,1);
}
.gate-orb{
  width:72px;height:72px;
  background:linear-gradient(145deg,#2C2C2E,#1C1C1E);
  border-radius:20px;margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;font-size:30px;
  box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.1);
}
#admin-gate h2{font-size:21px;font-weight:900;letter-spacing:-.3px;margin-bottom:6px}
#admin-gate p{font-size:14px;color:var(--t3);margin-bottom:24px}
#gate-err{color:var(--red);font-size:13px;font-weight:700;margin-top:10px;min-height:18px;display:block}

/* ── Offer ── */
.offer-body{
  background:rgba(255,255,255,.95); border:1px solid rgba(255,255,255,.8);
  border-radius:var(--rl); padding:40px;
  font-family:Georgia,serif; line-height:1.85; color:var(--t1); font-size:15px;
  box-shadow:var(--shadow);
}
.offer-body h2{font-family:'Outfit',sans-serif;color:var(--blue);margin-bottom:20px;font-size:22px;font-weight:900}

/* ── Job item ── */
.job-item{
  background:rgba(118,118,128,.06);border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r);padding:14px 16px;margin-bottom:10px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
  transition:var(--ease);
}
.job-item:hover{background:rgba(10,132,255,.04);border-color:rgba(10,132,255,.15)}
.job-item h4{font-size:14px;font-weight:800}
.job-item p{font-size:12px;color:var(--t3);margin-top:2px}

/* ── Info grid ── */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.info-item .il{font-size:10px;color:var(--t3);text-transform:uppercase;font-weight:800;letter-spacing:.7px}
.info-item .iv{margin-top:4px;font-size:15px;font-weight:700}

/* ── Tabs ── */
.tabs{
  display:flex;gap:4px;margin-bottom:20px;
  background:rgba(118,118,128,.1);border-radius:var(--rs);padding:4px;width:fit-content;
}
.tab{
  padding:8px 18px;border-radius:10px;border:none;cursor:pointer;
  font-weight:800;font-size:13px;transition:var(--ease);
  background:transparent;color:var(--t3);font-family:'Outfit',system-ui,sans-serif;
}
.tab.on{background:#fff;color:var(--t1);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.tc-block{display:none}.tc-block.on{display:block}

/* ── Progress ── */
.prog-wrap{background:rgba(118,118,128,.12);border-radius:4px;height:5px;overflow:hidden}
.prog-bar{height:100%;border-radius:4px;transition:width .6s var(--ease)}
.prog-b{background:linear-gradient(90deg,var(--blue),var(--blue-l))}
.prog-g{background:linear-gradient(90deg,var(--green),#28C251)}

/* ── Misc ── */
.div{height:1px;background:rgba(118,118,128,.13);margin:18px 0}
.tc{text-align:center} .tsm{font-size:14px}
.tlink{color:var(--blue);text-decoration:none;font-weight:700}
.tlink:hover{text-decoration:underline}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.fw9{font-weight:900} .txt3{color:var(--t3)}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(118,118,128,.3);border-radius:3px}

@media(max-width:640px){
  .form-row,.ag,.doc-grid,.info-grid{grid-template-columns:1fr}
  .auth-card{padding:30px 22px}
  .main{padding:14px 12px}
  .steps{overflow-x:auto}
  .step{min-width:68px}
  .navbar{padding:0 14px}
  .offer-body{padding:24px 18px}
}