:root {
  --blue: #1f5c8b;
  --blue-dark: #123f61;
  --bg: #f4f6f8;
  --border: #d7dde3;
  --text: #22303c;
  --muted: #64748b;
  --danger: #b3261e;
  --warning: #8a5a00;
  --success: #14663d;
  --info: #1f5c8b;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { background: var(--blue-dark); color: #fff; }
.topbar-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; padding: 10px 20px; gap: 24px; flex-wrap: wrap;}
.brand { display: flex; flex-direction: column; margin-right: 12px;}
.study-id { font-weight: 700; font-size: 16px; letter-spacing: .03em; }
.study-title { font-size: 11px; color: #b8cde0; }
.mainnav { display: flex; gap: 16px; flex: 1; }
.mainnav a { color: #dbe9f5; font-weight: 500; }
.mainnav a:hover { color: #fff; text-decoration: none; }
.usermenu { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #cfe0ee;}
.logout { color: #fff; background: rgba(255,255,255,.15); padding: 5px 10px; border-radius: 4px; }

.content { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.footer { text-align: center; color: var(--muted); font-size: 11px; padding: 20px; }

h1 { font-size: 22px; margin: 0 0 6px; }
h2 { font-size: 17px; margin: 24px 0 10px; color: var(--blue-dark); }
h3 { font-size: 14px; margin: 18px 0 8px; color: var(--blue-dark); }
.subtitle { color: var(--muted); margin: 0 0 20px; }

.card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; margin-bottom: 18px; }
.card-row { display: flex; gap: 16px; flex-wrap: wrap; }
.stat { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; min-width: 140px;
        display: block; text-decoration: none; color: inherit; }
a.stat:hover { border-color: var(--blue); text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.stat .num { font-size: 26px; font-weight: 700; color: var(--blue-dark); }
.stat .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em;}

table { border-collapse: collapse; width: 100%; background: #fff; }
table.soa th, table.soa td { border: 1px solid var(--border); padding: 5px 6px; text-align: center; font-size: 12px; }
table.soa th { background: #eef2f5; }
table.soa td.rowlabel, table.soa th.rowlabel { text-align: left; font-weight: 600; }
table.plain th, table.plain td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; font-size: 13px;}
table.plain th { background: #eef2f5; }
tr.dose-esc { background: #fbf3e0; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-NOT_STARTED { background: #e6e9ec; color: #667; }
.badge-DRAFT { background: #fde9c8; color: #8a5a00; }
.badge-COMPLETE { background: #d4ecff; color: #0a5a9c; }
.badge-SIGNED { background: #d7f5df; color: #14663d; }
.badge-LOCKED { background: #2c2f33; color: #fff; }
.badge-OPEN { background: #fde0e0; color: var(--danger); }
.badge-ANSWERED { background: #fde9c8; color: var(--warning); }
.badge-CLOSED { background: #d7f5df; color: var(--success); }

.btn { display: inline-block; background: var(--blue); color: #fff; border: none; padding: 8px 16px;
  border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: 600; }
.btn:hover { background: var(--blue-dark); text-decoration: none; }
.btn-secondary { background: #6b7684; }
.btn-secondary:hover { background: #4d5661; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #7f1c16; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn[disabled] { background: #b8c0c8; cursor: not-allowed; }

form.inline { display: inline; }

.flashes { margin-bottom: 16px; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 8px; font-size: 13px; }
.flash-success { background: #e5f7ea; color: var(--success); border: 1px solid #b7e6c3; }
.flash-danger { background: #fbe6e5; color: var(--danger); border: 1px solid #f2c1bd; }
.flash-warning { background: #fdf1d8; color: var(--warning); border: 1px solid #f0d99a; }
.flash-info { background: #e3f0fa; color: var(--info); border: 1px solid #bcdcf2; }

.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 12.5px; }
.field .help { color: var(--muted); font-size: 11px; margin-top: 2px; }
.field input[type=text], .field input[type=number], .field input[type=date],
.field input[type=password], .field select, .field textarea {
  width: 100%; max-width: 420px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 5px; font-size: 13px;
  font-family: inherit;
}
.field textarea { max-width: 620px; min-height: 60px; }
.field.checkbox label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.field.required label::after { content: " *"; color: var(--danger); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 4px 10px; align-items: end;}

.locked-banner { background: #2c2f33; color: #fff; padding: 10px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 13px;}
.computed-box { background: #eef7ee; border: 1px solid #c7e6c7; border-radius: 6px; padding: 10px 14px; margin: 10px 0; font-size: 13px;}
.audit-hash { font-family: monospace; font-size: 11px; color: var(--muted); word-break: break-all; }

.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;}
.breadcrumb { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.breadcrumb a { color: var(--muted); }