:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172033; background: #f4f8fa; }
* { box-sizing: border-box; }
body { min-height: 100dvh; margin: 0; display: grid; place-items: center; padding: 20px; }
.card { width: min(100%, 460px); background: #fff; border-radius: 24px; padding: 34px 24px 28px; box-shadow: 0 12px 32px #16354b1a; text-align: center; }
.eyebrow { margin: 0 0 10px; color: #0e7490; font-weight: 700; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.55rem, 6vw, 2rem); line-height: 1.22; }
.intro, .notice { color: #4b5563; line-height: 1.55; margin: 18px 0; }
.stars { display: flex; justify-content: center; gap: 7px; margin: 28px 0 10px; }
.star { appearance: none; border: 0; background: transparent; color: #f59e0b; font-size: clamp(3rem, 13vw, 4.2rem); line-height: 1; padding: 3px; cursor: pointer; min-width: 52px; min-height: 60px; touch-action: manipulation; }
.star:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #0284c7; outline-offset: 3px; }
.star:active { transform: scale(.93); }
form { text-align: left; margin-top: 22px; }
label { display: block; font-weight: 650; margin: 15px 0 7px; }
input, textarea { width: 100%; border: 1px solid #b9c7d0; border-radius: 10px; padding: 12px; font: inherit; }
textarea { min-height: 120px; resize: vertical; }
.primary { width: 100%; margin-top: 20px; padding: 14px; border: 0; border-radius: 10px; color: #fff; font: inherit; font-weight: 700; background: #0e7490; cursor: pointer; }
.primary[disabled] { opacity: .55; cursor: not-allowed; }
.error { color: #b42318; font-weight: 600; }
.small { font-size: .86rem; color: #667085; line-height: 1.45; }
.loading { color: #4b5563; }