:root { color: #10283c; background: linear-gradient(145deg, #eaf4fa 0%, #f7fafc 44%, #ffffff 100%); font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; min-height: 100vh; background: inherit; background-attachment: fixed; } main { max-width: 960px; margin: 0 auto; padding: 36px 24px 72px; }
header, .record-summary, .actions, .feedback-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
h1 { margin: 0; font-size: clamp(30px, 5vw, 48px); } h2 { margin: 4px 0 0; font-size: 20px; } .eyebrow { margin: 0 0 6px; color: #087c5a; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.intro { color: #4d6477; max-width: 680px; line-height: 1.5; } a, button { color: #075e96; font: inherit; font-weight: 700; } .actions a, button { padding: 10px 14px; border-radius: 10px; } .primary, button { background: #1085be; color: white; border: 0; text-decoration: none; cursor: pointer; }
.record { margin-top: 18px; padding: 22px; border: 1px solid #c9d9e4; border-radius: 16px; background: white; } .timestamp, .result { margin: 0; color: #526b7d; } .result { font-weight: 800; color: #087c5a; }
dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } dt { color: #667f91; font-size: 12px; font-weight: 700; text-transform: uppercase; } dd { margin: 4px 0 0; overflow-wrap: anywhere; }
label { display: block; margin-top: 18px; font-weight: 700; } textarea { box-sizing: border-box; display: block; width: 100%; margin-top: 7px; padding: 10px; border: 1px solid #adc6d7; border-radius: 10px; color: inherit; font: inherit; } .feedback-actions { justify-content: flex-start; margin-top: 10px; min-height: 36px; color: #087c5a; }
details { margin-top: 14px; } summary { cursor: pointer; font-weight: 700; } pre { overflow: auto; max-height: 360px; padding: 12px; border-radius: 10px; background: #10283c; color: #edf6fa; font-size: 12px; }
@media (max-width: 680px) { header, .record-summary { align-items: flex-start; flex-direction: column; } .actions { width: 100%; } dl { grid-template-columns: repeat(2, 1fr); } }