:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.10);
  --text:#F3F5FF;
  --muted:rgba(243,245,255,.72);
  --error:#FF6B7D;

  --primary:#7C5CFF;
  --primary2:#49D3FF;
  --ghost:rgba(255,255,255,.08);

  --radius:18px;
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --shadow2:0 10px 30px rgba(0,0,0,.22);

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% 20%, rgba(124,92,255,.20), transparent 55%),
    radial-gradient(900px 600px at 80% 25%, rgba(73,211,255,.18), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

.bg-orb{
  position:fixed;
  width:520px;height:520px;
  border-radius:50%;
  filter:blur(60px);
  opacity:.40;
  pointer-events:none;
  z-index:-1;
}
.orb-1{
  left:-160px; top:80px;
  background:radial-gradient(circle at 30% 30%, rgba(124,92,255,.95), rgba(124,92,255,0) 60%);
}
.orb-2{
  right:-180px; top:260px;
  background:radial-gradient(circle at 30% 30%, rgba(73,211,255,.95), rgba(73,211,255,0) 60%);
}

.app{
  max-width:1050px;
  margin:34px auto;
  padding:0 18px 30px;
}

.app-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:14px;
}

.brand{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.brand-mark{
  width:42px;height:42px;
  border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(124,92,255,.35), rgba(73,211,255,.20));
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
}
.brand-text h1{
  margin:0;
  font-size:20px;
  letter-spacing:.2px;
}
.brand-text p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
}

.header-right{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}

.stepper{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
}
.step{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(243,245,255,.55);
  font-size:12px;
  white-space:nowrap;
}
.step .dot{
  width:22px;height:22px;
  border-radius:999px;
  display:grid;place-items:center;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  font-weight:700;
  font-size:12px;
}
.step.active{
  color:var(--text);
}
.step.active .dot{
  border-color:rgba(124,92,255,.55);
  background:rgba(124,92,255,.20);
}
.step.done{
  color:rgba(243,245,255,.85);
}
.step.done .dot{
  border-color:rgba(73,211,255,.55);
  background:rgba(73,211,255,.16);
}
.line{
  width:26px;height:1px;
  background:rgba(255,255,255,.10);
}

.who{
  display:flex;
  gap:10px;
  align-items:center;
}
.whoami{
  color:var(--muted);
  font-size:12px;
}

.card{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--card);
  backdrop-filter: blur(10px);
  box-shadow:var(--shadow);
  padding:18px;
  animation:fadeIn .22s ease-out;
}
@keyframes fadeIn{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}

.card-hero{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:16px;
  padding:22px;
}
@media (max-width: 900px){
  .card-hero{grid-template-columns:1fr}
  .header-right{align-items:flex-start}
  .app-header{flex-direction:column; align-items:flex-start}
}

.card-hero-left h2{
  margin:0 0 8px;
  font-size:22px;
  letter-spacing:.2px;
}
.muted{color:var(--muted)}
.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.pill{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-size:12px;
  color:rgba(243,245,255,.82);
}

.form{
  display:grid;
  gap:12px;
}
.form-grid{
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.field-wide{grid-column: 1 / -1;}

.field{
  display:grid;
  gap:6px;
}
.field span{
  font-size:12px;
  color:rgba(243,245,255,.75);
}
input, select, textarea{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,12,22,.65);
  color:var(--text);
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(124,92,255,.65);
  box-shadow: 0 0 0 3px rgba(124,92,255,.18);
}
textarea{resize:vertical}
.hint{color:rgba(243,245,255,.55); font-size:12px}

.btn{
  border:0;
  border-radius:12px;
  padding:11px 14px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition: transform .08s ease, filter .2s ease, background .2s ease;
  user-select:none;
}
.btn:active{transform: translateY(1px)}
.btn-primary{
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(73,211,255,.70));
  color:#0A0C12;
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{
  background:var(--ghost);
  color:rgba(243,245,255,.90);
  border:1px solid rgba(255,255,255,.10);
}
.btn-ghost:hover{filter:brightness(1.06)}
.btn-arrow{font-size:16px}

.hidden{display:none !important}
.error{color:var(--error); font-size:13px}

.card-title-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.card-title-row h2{
  margin:0 0 4px;
  font-size:18px;
}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.table-wrap{
  overflow-x:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
}
.table th, .table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
}
.table th{
  font-size:12px;
  color:rgba(243,245,255,.65);
  font-weight:700;
}
.table tr:hover td{
  background:rgba(255,255,255,.03);
}

.divider{
  height:1px;
  background:rgba(255,255,255,.10);
  margin:4px 0;
}

.checklist{
  border:1px dashed rgba(255,255,255,.16);
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.03);
}
.checklist-title h3{
  margin:0 0 4px;
  font-size:14px;
}
.checklist-title p{margin:0 0 10px}
.checklist-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 720px){
  .form-grid{grid-template-columns:1fr}
  .checklist-grid{grid-template-columns:1fr}
}

.actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.details{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.details summary{
  cursor:pointer;
  color:rgba(243,245,255,.80);
  font-weight:700;
}
.footer{
  margin-top:18px;
  font-size:12px;
  display:flex;
  justify-content:center;
  gap:10px;
  opacity:.75;
}
.dot-sep{opacity:.5}

input[type="file"]{
  padding: 12px;
}

button:disabled,
button.disabled {
  background-color: #ccc; /* Light gray background */
  color: #666; /* Darker gray text */
  cursor: not-allowed; /* Show a "not-allowed" cursor */
  opacity: 0.6; /* Reduce opacity */
}

button.disabled:hover {
  background-color: #ccc; /* Prevent hover effect */
}