* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; font-size: 13px; background: #f0f2f5; color: #1a1a2e; }
a { color: #16214d; }
.topbar { background: #16214d; color: white; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; }
.topbar h1 { font-size: 16px; }
.topbar-brand { display: flex; align-items: center; gap: 12px; }
.topbar-logo { height: 30px; background: #fff; padding: 4px 8px; border-radius: 5px; display: block; }
.login-logo { display: block; height: 46px; margin: 0 auto 16px; }
.topbar-nav { display: flex; align-items: center; gap: 18px; }
.topbar-nav a { color: #cfd6ee; font-size: 12px; text-decoration: none; }
.topbar-nav a:hover { color: white; text-decoration: underline; }
.topbar a.logout { color: #cfd6ee; font-size: 12px; text-decoration: none; }
.container { max-width: 1080px; margin: 0 auto; padding: 22px; }
.card { background: white; border: 1px solid #dde1e7; border-radius: 6px; margin-bottom: 18px; }
.card-head { padding: 12px 16px; border-bottom: 1px solid #eee; font-weight: bold; background: #f7f9fb; border-radius: 6px 6px 0 0; display: flex; justify-content: space-between; align-items: center; }
.card-body { padding: 16px; }
.card-body.collapsed { display: none; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 720px; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { background: #16214d; color: white; padding: 8px 10px; text-align: left; }
td { padding: 7px 10px; border-bottom: 1px solid #eee; vertical-align: middle; }
tr:hover td { background: #f8faff; }
.btn { display: inline-block; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: bold; text-decoration: none; }
.btn-primary { background: #16214d; color: white; }
.btn-primary:hover { background: #0f1836; }
.btn-secondary { background: white; border: 1px solid #16214d; color: #16214d; }
.btn-sm { padding: 5px 12px; font-size: 11.5px; }
input, select, textarea { padding: 7px 9px; border: 1px solid #ccd2dc; border-radius: 4px; font-size: 13px; width: 100%; font-family: inherit; }
label { display: block; font-weight: bold; margin: 10px 0 4px; font-size: 12px; color: #16214d; }
.form-row { margin-bottom: 10px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: bold; }
.badge-draft, .badge-pending { background: #eee; color: #777; }
.badge-active, .badge-sent { background: #cfe2ff; color: #084298; }
.badge-both_submitted { background: #fff3cd; color: #856404; }
.badge-l2_submitted { background: #d8c7f5; color: #4b2e83; }
.badge-consolidated, .badge-approved { background: #d1e7dd; color: #155724; }
.badge-signed { background: #16214d; color: white; }
.error { background: #fdecea; color: #b3261e; padding: 10px 14px; border-radius: 4px; margin-bottom: 12px; font-size: 12.5px; }
.hint { color: #888; font-size: 11.5px; margin-top: 4px; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-grid .col h3 { font-size: 12px; color: #16214d; margin-bottom: 8px; }
.row-grid { display: grid; gap: 10px 14px; align-items: end; }
.row-grid-3 { grid-template-columns: repeat(3, 1fr); }
.row-grid-4 { grid-template-columns: repeat(4, 1fr); }
.row-grid-5 { grid-template-columns: repeat(5, 1fr); }
/* Each cell is a flex column so labels sit at the top and inputs bottom-align
   across the row even when some labels wrap to two lines. */
.row-grid > .form-row { display: flex; flex-direction: column; margin-bottom: 0; }
.row-grid > .form-row > label { margin-top: 0; flex: 0 0 auto; }
.row-grid > .form-row > input,
.row-grid > .form-row > select,
.row-grid > .form-row > textarea { margin-top: auto; }
.bm { color: #9aa3b2; font-weight: normal; }
label .bm { font-weight: normal; }
/* Section headers inside the public form are bilingual title text only (no
   trailing button), so keep the BM part next to the English rather than
   letting the card-head's space-between push it to the far edge. */
.card-body .card-head { justify-content: flex-start; gap: 6px; }
.repeat-section { margin-bottom: 6px; }
.repeat-row { position: relative; border: 1px solid #eee; border-radius: 6px; padding: 10px 10px 8px; margin-bottom: 8px; background: #fafbfc; }
.repeat-remove { background: none; border: none; color: #b3261e; font-size: 11.5px; cursor: pointer; padding: 4px 0 0; margin-top: 6px; font-weight: bold; }
.repeat-remove:hover { text-decoration: underline; }
.add-row-btn { margin-top: 2px; }
.radio-group { display: flex; gap: 18px; align-items: center; }
.radio-group label { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; margin: 0; font-size: 13px; color: #1a1a2e; }
.radio-group input[type="radio"] { width: auto; }
.section-note { color: #555; font-size: 12px; margin-bottom: 10px; }
.consent-box { background: #f7f9fb; border: 1px solid #ccd2dc; border-radius: 6px; padding: 14px; font-size: 11.5px; line-height: 1.5; max-height: 220px; overflow-y: auto; }
.consent-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.consent-check input { width: auto; margin-top: 3px; }
.consent-check label { font-weight: bold; margin: 0; }
.qa { margin-bottom: 10px; font-size: 12.5px; }
.qa .q { font-weight: bold; color: #444; }
.qa .a { white-space: pre-wrap; }
.login-wrap { max-width: 340px; margin: 80px auto; }
.center { text-align: center; }
.letter-frame { border: 1px solid #ccc; width: 100%; height: 800px; }
.signoff-box { max-width: 640px; margin: 20px auto; background: white; border: 1px solid #ddd; border-radius: 6px; padding: 20px; }
.link-box { display: flex; gap: 8px; margin-top: 6px; }
.link-box input { font-family: monospace; font-size: 11.5px; background: #f7f9fb; color: #444; }
.link-box button { flex-shrink: 0; }
.progress-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.progress-steps .step { padding: 4px 10px; border-radius: 10px; font-size: 11px; font-weight: bold; background: #eee; color: #999; }
.progress-steps .step.done { background: #d1e7dd; color: #155724; }
.progress-steps .step.current { background: #16214d; color: white; }
.sig-pad-wrap { border: 1px solid #ccd2dc; border-radius: 6px; background: white; }
.sig-pad-wrap canvas { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; border-radius: 6px; }
.sig-pad-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.sig-error { color: #b3261e; font-size: 11.5px; margin-top: 4px; display: none; }