:root {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #674750;
    background: #fff0f5;
    --accent: #ff80a4;
    --accent-dark: #a82d59;
    --border: #ffb6cf;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 28px 18px; }
main { width: 100%; max-width: 460px; margin: auto; }
.card, form {
    position: relative;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 6px 20px #e97b9b12;
}
.card::before, form::before, .card::after, form::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background: #fac5d6;
    pointer-events: none;
}
.card::before, form::before { top: 0; left: 0; border-radius: 21px 0 17px 0; }
.card::after, form::after { bottom: 0; right: 0; border-radius: 17px 0 21px 0; }
.brand { color: var(--accent-dark); font-size: 24px; font-weight: 750; text-decoration: none; }
h1 { font-size: 24px; line-height: 1.35; margin: 12px 0; }
p { line-height: 1.65; }
header p { margin-bottom: 0; font-size: 14px; }
form { margin-top: 0; }
label { display: flex; align-items: center; font-size: 17px; color: #8c606b; font-weight: 700; margin: 26px 0 14px; }
.sparkle { width: 19px; height: 22px; flex: 0 0 auto; }
form > label:first-child { margin-top: 0; }
input, select, button, .button { font: inherit; width: 100%; min-height: 52px; border-radius: 30px; }
input, select { padding: 13px 20px; border: 1.5px solid var(--border); background: #fff; color: #563a43; box-shadow: 0 4px 12px #e97b9b12; }
input::placeholder { color: #777; opacity: 1; }
button, .button { display: block; text-align: center; padding: 13px 16px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 #f9dce6; transition: background-color .16s, transform .16s; }
button:hover, .button:hover { background: #f96d98; }
button:active, .button:active { transform: translateY(1px); }
button:disabled { opacity: .6; cursor: wait; }
.udid-row { display: flex; align-items: stretch; }
.udid-row input { min-width: 0; flex: 1; border-radius: 30px 0 0 30px; border-right: 0; }
.udid-row button { display: flex; align-items: center; justify-content: center; gap: 3px; width: auto; flex: 0 0 auto; padding: 12px 18px; border-radius: 0 30px 30px 0; box-shadow: none; white-space: nowrap; }
.hint { font-size: 13px; line-height: 1.7; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.7; font-weight: 400; margin: 24px 0; }
.consent input { width: 20px; min-height: 20px; flex-shrink: 0; margin: 1px 0 0; accent-color: var(--accent-dark); box-shadow: none; }
#status { overflow-wrap: anywhere; padding: 0 8px; }
#status.error { color: #ad2047; }
main > .hint { padding: 4px 12px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
dialog { width: min(340px, calc(100% - 40px)); border: 2px solid var(--border); border-radius: 24px; padding: 28px 24px 24px; color: #674750; background: #fff; text-align: center; box-shadow: 0 16px 60px #73354f30; }
dialog::backdrop { background: #542d414f; backdrop-filter: blur(4px); }
dialog h2 { margin: 0 0 14px; font-size: 20px; color: var(--accent-dark); }
dialog p { margin: 0 0 24px; line-height: 1.7; overflow-wrap: anywhere; }
dialog button { min-height: 48px; }
@media (max-width: 400px) { body { padding: 18px 12px 28px; } .card, form { padding: 24px 20px; } }
@media (prefers-reduced-motion: reduce) { button, .button { transition: none; } }

header .brand { margin: 0 0 12px; }
header .tagline { font-size: 18px; font-weight: 700; margin: 0 0 8px; }

.reviews { margin-top: 30px; }
.reviews h2 { margin: 0 0 16px; text-align: center; font-size: 20px; color: #8c606b; }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.review-card { overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: #fff; padding: 8px; }
.review-photo { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; background: #faf8f9; }
.review-card p { margin: 10px 4px 8px; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }

.review-photo { position: relative; overflow: hidden; }
.review-photo img { position: absolute; width: 235.5%; height: auto; max-width: none; }

.review-card:nth-child(1) img { left: -10.0%; top: -167.5%; }
.review-card:nth-child(2) img { left: -125.0%; top: -167.5%; }
.review-card:nth-child(3) img { left: -10.0%; top: -337.5%; }
.review-card:nth-child(4) img { left: -125.0%; top: -337.5%; }
.review-card:nth-child(5) img { left: -10.0%; top: -175.0%; }
.review-card:nth-child(6) img { left: -125.0%; top: -175.0%; }
.review-card:nth-child(7) img { left: -10.0%; top: -355.0%; }
.review-card:nth-child(8) img { left: -125.0%; top: -350.0%; }
.review-card:nth-child(9) img { left: -10.0%; top: -187.5%; }
.review-card:nth-child(10) img { left: -125.0%; top: -175.0%; }
.review-card:nth-child(11) img { left: -10.0%; top: -352.5%; }

.install-guide { margin: 0 0 24px; padding: 22px 24px; background: #fff; border: 1px solid var(--border); border-radius: 20px; }
.install-guide h2 { margin: 0 0 12px; font-size: 18px; color: #8c606b; }
.install-guide ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.9; }
.install-guide li::marker { color: var(--accent); }

#submit { margin-top: 22px; }