:root{
  --navy:#0b2a55;
  --navy2:#083060;
  --accent:#1b66ff;
  --border:#e6edf5;
  --soft:#f6f9fd;
  --muted:#5b6b7a;
  --shadow:0 18px 55px rgba(10,30,70,.12);
  --radius:18px;
  --radius2:24px;
  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font);
  color:#0b1c33;
  background:linear-gradient(180deg,#fff 0%, #f7fbff 70%, #fff 100%);
}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:24px}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-pad{padding:22px}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1.2fr .8fr}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}

.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 24px;
}
.brand{
  display:flex;align-items:center;gap:10px;font-weight:900;
  color:var(--navy);letter-spacing:.2px;
}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.navlinks{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{
  padding:10px 12px;border-radius:999px;
  border:1px solid var(--border);
  background:#fff;font-weight:800;font-size:13px;
}
.pill:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(11,42,85,.10)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;padding:12px 14px;border-radius:14px;
  border:1px solid var(--border);
  background:var(--navy);
  color:#fff;font-weight:900;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn.secondary{
  background:#fff;color:var(--navy);border:1px solid var(--border);
}
.btn.danger{background:#b42318}

.h1{font-size:34px;line-height:1.1;margin:0;color:var(--navy)}
.sub{color:var(--muted);font-weight:700;margin:10px 0 0}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:rgba(27,102,255,.10);
  border:1px solid rgba(27,102,255,.20);
  color:var(--navy);font-weight:900;font-size:12px;
}
hr.sep{border:none;border-top:1px solid var(--border);margin:16px 0}

.field label{display:block;font-weight:900;color:var(--navy);margin:0 0 6px}
.field input,.field select,.field textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  outline:none;
  font-weight:700;
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(27,102,255,.45);
  box-shadow:0 0 0 4px rgba(27,102,255,.12);
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:18px;
}
.table th, .table td{
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size:14px;
}
.table th{background:var(--soft);color:var(--navy);font-weight:900}
.table tr:last-child td{border-bottom:none}

.alert{
  padding:12px 14px;border-radius:16px;
  border:1px solid var(--border);
  background:var(--soft);
  font-weight:800;
}
.alert.success{background:#ecfdf3;border-color:#abefc6}
.alert.error{background:#fef3f2;border-color:#fecdca}

.footer{
  padding:22px 0;color:var(--muted);
  text-align:center;font-weight:800;
}
small.muted{color:var(--muted);font-weight:800}