:root{
  --navy:#262a3c;        /* dark header bars */
  --border:#d6d8e0;
  --muted:#6b7280;
  --text:#111827;
  --bg:#f3f4f6;
  --card:#ffffff;

  --radius:18px;
  --radius-sm:14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}

.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 14px 60px;
}

/* Top header */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}

/* Card + section header bar like screenshots */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}

.section-bar{
  background:var(--navy);
  color:#fff;
  padding:14px 18px;
  font-weight:800;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.section-body{
  padding:18px;
}

/* Forms */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

@media (max-width: 820px){
  .form-grid{ grid-template-columns:1fr; }
}

label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:#111827;
}

input, select, textarea{
  width:100%;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid #bfc4d0;
  outline:none;
  font-size:16px;
  background:#fff;
  color:var(--text);
}

input::placeholder{ color:#9aa0aa; }
input:focus, select:focus, textarea:focus{
  border-color:#8a90a3;
  box-shadow: 0 0 0 4px rgba(38,42,60,.10);
}

input[readonly]{
  background:#f2f3f7;
  color:#5b6272;
  cursor:not-allowed;
}

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

button{
  border:0;
  cursor:pointer;
  padding:14px 18px;
  border-radius:16px;
  font-weight:800;
  font-size:16px;
  background: var(--navy);
  color:#fff;
}

button:active{ transform: translateY(1px); }

.status{
  margin-top:14px;
  white-space:pre-wrap;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#f8f9fb;
  color:#444;
}

/* Small helper */
.mt-16{ margin-top:16px; }
.mt-20{ margin-top:20px; }

.brand-logo{
  height: 80px;
  width: auto;
  display: block;
}
/* Button loading state */
button.is-loading{
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}

button.is-loading .btn-text{
  opacity: 0.85;
}

.btn-spinner{
  display: none;
  width: 16px;
  height: 16px;
  margin-left: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: rgba(255,255,255,0.95);
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

button.is-loading .btn-spinner{
  display: inline-block;
}

@keyframes spin{
  to { transform: rotate(360deg); }
}

/* Make disabled obvious */
button:disabled{
  cursor: not-allowed;
  opacity: 0.75;
}