:root{
  --bg:#080c12;
  --panel:#111823;
  --panel2:#172131;
  --text:#f4f7fb;
  --muted:#aab5c4;
  --accent:#7c4dff;
  --accent2:#26b8ff;
  --danger:#ff4d6d;
  --success:#24c78e;
  --border:#263347;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(circle at top right,#15213a 0,#080c12 40%);
  color:var(--text);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
.container{width:min(1100px,92%);margin:auto}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 0;border-bottom:1px solid rgba(255,255,255,.07)
}
.brand{font-weight:800;letter-spacing:.5px;font-size:1.2rem}
.brand span{color:var(--accent2)}
.hero{padding:72px 0 44px;text-align:center}
.hero h1{font-size:clamp(2.2rem,7vw,4.8rem);margin:0 0 14px}
.hero p{color:var(--muted);font-size:1.1rem;max-width:700px;margin:0 auto 30px}
.actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{
  border:0;border-radius:12px;padding:14px 20px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center
}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:white}
.btn-secondary{background:var(--panel2);border:1px solid var(--border);color:white}
.btn-danger{background:var(--danger);color:white}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0}
.card{
  background:rgba(17,24,35,.92);border:1px solid var(--border);
  border-radius:18px;padding:22px;box-shadow:0 20px 45px rgba(0,0,0,.18)
}
.card h3{margin-top:0}
.muted{color:var(--muted)}
.form-wrap{max-width:780px;margin:40px auto}
label{display:block;font-weight:700;margin:14px 0 7px}
input,select,textarea{
  width:100%;background:#0d141f;color:white;border:1px solid var(--border);
  border-radius:10px;padding:13px 14px;outline:none
}
input:focus,select:focus,textarea:focus{border-color:var(--accent2)}
textarea{min-height:140px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.alert{padding:14px 16px;border-radius:10px;margin:18px 0}
.alert-success{background:rgba(36,199,142,.12);border:1px solid rgba(36,199,142,.45)}
.alert-error{background:rgba(255,77,109,.12);border:1px solid rgba(255,77,109,.45)}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:13px;border-bottom:1px solid var(--border);white-space:nowrap}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--panel2);font-size:.84rem}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:28px 0}
.stat{font-size:2rem;font-weight:800;margin-top:6px}
.footer{padding:38px 0;color:var(--muted);text-align:center}
@media(max-width:760px){
  .grid{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .hero{padding-top:50px}
  .nav{align-items:flex-start;gap:14px}
}

.critical-row{background:rgba(255,77,109,.08)}
.critical-row td:first-child{border-left:4px solid var(--danger)}

.status-flow{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin:22px 0 28px;
}
.status-step{
  position:relative;
  text-align:center;
  color:var(--muted);
  font-size:.84rem;
}
.status-step span{
  display:block;
  width:16px;
  height:16px;
  margin:0 auto 8px;
  border-radius:50%;
  background:var(--panel2);
  border:2px solid var(--border);
}
.status-step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:7px;
  left:calc(50% + 10px);
  width:calc(100% - 20px);
  height:2px;
  background:var(--border);
}
.status-step.active{
  color:var(--text);
}
.status-step.active span{
  background:var(--accent2);
  border-color:var(--accent2);
}
.status-step.active:not(:last-child)::after{
  background:var(--accent2);
}
@media(max-width:760px){
  .status-flow{
    grid-template-columns:1fr;
    text-align:left;
  }
  .status-step{
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left;
  }
  .status-step span{
    margin:0;
    flex:0 0 16px;
  }
  .status-step::after{
    display:none;
  }
}