:root{
  --navy:#0d2b52;
  --navy-dark:#0a2140;
  --gold:#f0a93a;
  --red:#c0392b;
  --border:#d8dfe8;
  --text:#26313f;
  --muted:#5b6b7c;
  --bg:#eef1f5;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
header{
  background:var(--navy);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand .logo{
  width:46px;height:46px;border-radius:50%;
  background:#fff;
  object-fit:cover;
  flex-shrink:0;
}
.brand .titles h1{
  margin:0;font-size:19px;font-weight:600;letter-spacing:.3px;
}
.brand .titles p{
  margin:2px 0 0;font-size:13px;color:#d7e0ec;
}
.logout{
  background:var(--gold);
  color:#3a2c00;
  border:none;
  padding:8px 18px;
  border-radius:4px;
  font-weight:600;
  cursor:pointer;
}
main{
  max-width:1100px;
  margin:24px auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:2px;
}
.panel-head{
  display:flex;
  align-items:center;
  gap:10px;
  background:#f5f7fa;
  border-left:4px solid var(--gold);
  padding:14px 20px;
  font-weight:700;
  letter-spacing:.4px;
}
form{
  padding:24px 28px 8px;
}
.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px 40px;
  margin-bottom:14px;
}
.field{
  display:flex;
  align-items:center;
  gap:14px;
}
.field label{
  width:110px;
  flex-shrink:0;
  font-size:14px;
  color:var(--text);
}
.field .colon{
  width:10px;
  color:var(--muted);
}
.field select, .field input{
  flex:1;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:4px;
  font-size:14px;
  background:#fff;
  color:var(--text);
  min-width:0;
}
.field select:disabled, .field input:disabled{
  background:#f2f4f7;
  color:#9aa5b1;
}
.req{color:var(--red);margin-left:4px;}
.notes{
  padding:6px 20px 0;
  font-size:13.5px;
  color:var(--red);
  line-height:1.6;
}
.actions{
  display:flex;
  gap:12px;
  padding:20px;
}
button.primary, button.secondary{
  border:none;
  padding:10px 26px;
  border-radius:4px;
  font-weight:700;
  letter-spacing:.4px;
  cursor:pointer;
  font-size:13.5px;
}
button.primary{background:var(--navy);color:#fff;}
button.primary:hover{background:var(--navy-dark);}
button.secondary{background:var(--navy);color:#fff;opacity:.9;}
button.secondary:hover{opacity:1;}
.status{
  margin:0 20px 20px;
  padding:14px 16px;
  border-radius:4px;
  font-size:14px;
  display:none;
}
.status.show{display:block;}
.status.success{background:#e7f6ec;color:#1e6b3a;border:1px solid #b7e4c4;}
.status.error{background:#fdecea;color:#a4322a;border:1px solid #f5c6c2;}
.status.pending{background:#fff6e0;color:#8a6300;border:1px solid #ffe6a3;}
footer{
  text-align:center;
  color:var(--muted);
  font-size:12.5px;
  padding:18px 0 30px;
}
.demo-banner{
  background:#3a2c00;
  color:#ffe6a3;
  text-align:center;
  font-size:12.5px;
  padding:6px 10px;
  letter-spacing:.3px;
}
@media (max-width:720px){
  .row{grid-template-columns:1fr;gap:14px;}
  .field label{width:95px;font-size:13px;}
  main{margin:0;border-radius:0;}
  header{flex-wrap:wrap;gap:10px;}
}