:root{
  --paper:#ffffff;
  --ink:#111827;
  --muted:#4b5563;
  --line:#d1d5db;
  --soft:#f3f4f6;
  --accent:#0f172a;
  --radius:12px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:#eef2f7;
  line-height:1.35;
}

.wrap{
  max-width:980px;
  margin:28px auto;
  padding:0 16px;
}

.sheet{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 12px 34px rgba(0,0,0,.08);
  overflow:hidden;
}

/* Header */
.masthead{
  display:flex;
  gap:16px;
  padding:20px 22px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff,#fbfdff);
}

.brandmark{
  width:70px;
  height:70px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--soft);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.headtext{ min-width:0; }

.org{
  font-size:13px;
  color:var(--muted);
  margin:2px 0 6px;
}

.title{
  font-size:20px;
  font-weight:800;
  margin:0 0 6px;
  letter-spacing:.2px;
}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  font-size:13px;
  color:var(--muted);
}

.meta strong{ color:var(--ink); }

/* Body */
.content{
  padding:18px 22px 22px;
}

.note{
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  font-size:13px;
  color:var(--muted);
  margin:0 0 16px;
}

/* Fieldsets */
fieldset{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  margin:14px 0 0;
  background:#fff;
}

legend{
  padding:0 8px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--accent);
}

/* Grid */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
  margin-top:10px;
}

.col-12{ grid-column:span 12; }
.col-8{ grid-column:span 8; }
.col-6{ grid-column:span 6; }
.col-4{ grid-column:span 4; }

@media (max-width:820px){
  .col-8,
  .col-6,
  .col-4{
    grid-column:span 12;
  }
}

/* Labels & inputs */
label{
  display:block;
  font-size:13px;
  margin:0 0 6px;
  font-weight:650;
}

.req{
  color:#b91c1c;
  font-weight:800;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select{
  width:100%;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  background:#fff;
  outline:none;
}

input:focus,
textarea:focus,
select:focus{
  border-color:#94a3b8;
  box-shadow:0 0 0 3px rgba(148,163,184,.35);
}

textarea{
  min-height:96px;
  resize:vertical;
}

/* Choices (radio / checkbox blocks) */
.choices{
  display:grid;
  gap:10px;
  margin-top:6px;
}

.choice{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fafafa;
}

.choice input{ margin-top:2px; }

.help{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

/* Actions */
.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

button{
  border:1px solid var(--line);
  background:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-size:14px;
  cursor:pointer;
}

button.primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

button:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Link styled as button */
a.button-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:10px;
  font-size:14px;
  text-decoration:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
}

a.button-link.primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

a.button-link:hover{
  filter:brightness(0.95);
}

/* Footer */
.footer{
  padding:14px 22px 18px;
  border-top:1px solid var(--line);
  background:#fbfdff;
  color:var(--muted);
  font-size:12px;
}

.footer a{
  color:inherit;
  text-decoration:underline;
}

/* Helpers */
.hidden{ display:none; }

.status{
  margin-top:10px;
  font-size:13px;
  color:var(--muted);
}

/* Print */
@media print{
  body{ background:#fff; }
  .wrap{
    margin:0;
    padding:0;
    max-width:none;
  }
  .sheet{
    box-shadow:none;
    border:0;
    border-radius:0;
  }
  button,
  a.button-link{
    display:none;
  }
  .note{
    border:1px solid #999;
  }
  input,
  textarea,
  select{
    border:1px solid #999;
  }
}