* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f6f7fb; color: #1b1f24; line-height: 1.6; }
a { color: #064f9e; text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1180px; margin: 0 auto; padding: 18px; }
.topbar { background: #10243e; color: #fff; }
.topbar a { color: #fff; margin-left: 16px; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; }
.brand { font-weight: bold; font-size: 20px; }
.user-name { opacity: .8; margin-left: 16px; }
h1 { margin-top: 18px; font-size: 28px; }
h2 { margin-top: 26px; font-size: 22px; }
.card { background: #fff; border: 1px solid #dde3ea; border-radius: 10px; padding: 18px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
label { display: block; font-weight: bold; margin-bottom: 5px; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid #c8d1dc; border-radius: 6px; font: inherit; background: #fff; }
textarea { min-height: 90px; }
button, .button { border: 0; border-radius: 6px; background: #0b5cad; color: #fff; padding: 10px 16px; font: inherit; cursor: pointer; display: inline-block; }
button.secondary, .button.secondary { background: #596579; }
button.danger, .button.danger { background: #a33; }
.actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.flash { padding: 12px 14px; border-radius: 8px; margin: 12px 0; }
.flash-success { background: #e8f6ec; border: 1px solid #bfe3ca; }
.flash-error { background: #fdeeee; border: 1px solid #f0c0c0; }
.flash-info { background: #eef5fd; border: 1px solid #c2dbf5; }
table { width: 100%; border-collapse: collapse; background: #fff; margin: 12px 0; }
th, td { border: 1px solid #dde3ea; padding: 9px 10px; text-align: right; vertical-align: top; }
th { background: #edf2f8; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; background: #edf2f8; font-size: 13px; }
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.summary .metric { background: #fff; border: 1px solid #dde3ea; border-radius: 10px; padding: 14px; }
.summary strong { display: block; font-size: 22px; }
.day-card { border: 1px solid #ccd5df; border-radius: 8px; padding: 14px; margin: 14px 0; background: #fbfcfe; }
.activity-row { border-top: 1px dashed #c8d1dc; padding-top: 12px; margin-top: 12px; }
.prompt { color: #505b6b; font-size: 14px; margin: 4px 0 8px; }
.required { color: #a33; }
.small { font-size: 13px; color: #667; }
@media (max-width: 760px) { .grid, .grid-3, .summary { grid-template-columns: 1fr; } .topbar-inner { display: block; } .topbar nav { margin-top: 10px; } }
.inline-form { margin-top: 12px; }
.prompt { display: none; background: #f1f5fb; border: 1px solid #d5e0ee; border-radius: 6px; padding: 8px 10px; color: #374151; }
.required { color: #c02626; font-weight: bold; margin-inline-start: 3px; }
.checkbox-label { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; }
.checkbox-label input { width: auto; margin-top: 6px; }
.footer-version { color: #778; font-size: 12px; padding-top: 0; }

/* v0.3.2 UI refinements */
button.success, .button.success { background: #15803d; }
button.success:hover, .button.success:hover { background: #166534; }
.otp-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; direction: rtl; align-items: center; }
.otp-actions button { direction: rtl; }
.day-action-row { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-submit-row { justify-content: flex-end; }
.privacy-box { background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 8px; padding: 12px 14px; margin-top: 18px; }
.privacy-box .checkbox-label { margin: 0; }
.footer-version a { color: #667; }

/* v0.3.4 form refinements */
.day-action-row { flex-wrap: nowrap; justify-content: flex-start; }
.day-action-row button { width: auto; }
.password-status { min-height: 22px; margin-top: 6px; }
.password-status.ok { color: #15803d; font-weight: bold; }
.password-status.error { color: #b91c1c; font-weight: bold; }
button:disabled { opacity: .55; cursor: not-allowed; }
.activity-row .prompt { margin-top: 10px; margin-bottom: 10px; }
@media (max-width: 760px) { .day-action-row { flex-wrap: wrap; } }

/* v0.3.4 activity prompt and validation */
.activity-prompt { display: none; background: #f1f5fb; border: 1px solid #d5e0ee; border-radius: 6px; padding: 8px 10px; color: #374151; font-size: 14px; margin: 4px 0 10px; }
input.is-valid, textarea.is-valid, select.is-valid { border-color: #16a34a; background: #f7fff9; }
input.is-invalid, textarea.is-invalid, select.is-invalid { border-color: #dc2626; background: #fff8f8; }
.submit-hint { margin: 8px 0 0; color: #b45309; font-size: 13px; }
.password-status.neutral { color: #667; font-weight: normal; }


/* v0.3.5 adjustments */
.otp-actions { justify-content: space-between; gap: 10px; margin-top: 14px; }
.checkbox-field-stacked label { display: block; margin-bottom: 6px; font-weight: 700; }
.checkbox-field-stacked .checkbox-input-row { display: flex; justify-content: flex-start; align-items: center; min-height: 42px; }
.checkbox-field-stacked input[type="checkbox"] { width: auto; min-width: 18px; height: 18px; }
.day-action-row { display: flex; justify-content: flex-start; gap: 8px; margin: 8px 0 16px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb; }
.activity-row + .day-action-row { margin-top: 6px; }
.day-card label + textarea[name$="[experiential_description]"] { margin-top: 6px; }

/* v0.4.0 registration verification and restrained secondary actions */
.narrow-card { max-width: 720px; margin-inline: auto; }
.verified-identity { background: #eef7f0; border: 1px solid #bfe0c7; border-radius: 8px; padding: 10px 12px; margin-bottom: 18px; }
.verified-identity a { margin-inline-start: 10px; }
.resend-form { margin-top: 14px; }
button.link-button { background: transparent; color: #064f9e; padding: 0; border: 0; text-decoration: underline; font-size: 13px; }
button.link-button:hover:not(:disabled) { color: #043d78; }
button.link-button:disabled { color: #778; text-decoration: none; opacity: 1; }
.day-action-row { justify-content: space-between; }
.day-action-row [data-add-activity] { margin-inline-start: auto; }
input[readonly] { background: #f3f5f7; color: #4b5563; }

/* v0.4.1 operator notice, registration reminder and system-check states */
.footer-version { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: center; }
.footer-separator { color: #a0a7b2; }
.registration-notice { margin-top: 14px; padding: 10px 12px; border-right: 3px solid #64748b; background: #f8fafc; color: #475569; font-size: 14px; }
.check-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.check-status > span[aria-hidden="true"] { font-size: 20px; line-height: 1; }
.check-status-ok { color: #15803d; }
.check-status-error { color: #b91c1c; }