:root { --pink-dark:#a74568; --pink-deep:#c86788; --ink:#252329; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); font-family:Arial,Helvetica,sans-serif; background:#fff7fa; }
.app-shell { width:min(100%,1120px); margin:auto; padding:18px 20px 70px; }
.card-stage { display:grid; place-items:center; padding:0 0 42px; }
.phase-image-frame { position:relative; width:min(100%,739px); line-height:0; }
.phase-image { display:block; width:100%; height:auto; border-radius:4px; box-shadow:0 18px 45px rgba(136,72,91,.22); }
.phase-overlay { position:absolute; left:18%; top:32.5%; width:64%; height:24%; color:#a74568; text-align:center; line-height:1.2; pointer-events:none; }
.phase-overlay > span:first-child { position:absolute; top:0; left:5%; width:90%; overflow:hidden; font-family:Georgia,serif; font-size:clamp(.85rem,2.4vw,1.35rem); font-weight:700; white-space:nowrap; text-overflow:ellipsis; }
.overlay-folio { position:absolute; top:16%; left:5%; width:90%; font-size:clamp(.5rem,1.2vw,.72rem); }
.overlay-stamps { position:absolute; top:25%; left:11%; display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(6px,1.5vw,14px); width:78%; }
.overlay-stamp { display:grid; place-items:center; aspect-ratio:1; border:2px solid #d17996; border-radius:50%; color:#d17996; font-size:clamp(.7rem,2vw,1.35rem); line-height:1; }
.overlay-stamp.filled { color:#fff; background:#d17996; }
.eyebrow { margin:0 0 8px; color:var(--pink-dark); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:700; }
.panel-copy { color:#6d5961; }
.registration-panel { display:grid; grid-template-columns:.9fr 1.1fr; gap:30px; margin:0 auto; padding:clamp(22px,5vw,42px); max-width:800px; background:rgba(255,255,255,.9); border:1px solid rgba(200,103,136,.2); border-radius:22px; box-shadow:0 12px 36px rgba(125,65,84,.1); }
.registration-panel h1 { margin:0 0 10px; font-family:Georgia,serif; font-size:2rem; font-weight:500; }
form { display:grid; gap:8px; } label { margin-top:4px; color:#684a56; font-size:.78rem; font-weight:700; }
input { width:100%; padding:13px 14px; border:1px solid #e6bdc9; border-radius:10px; outline:none; font:inherit; background:#fffafd; }
input:focus { border-color:var(--pink-deep); box-shadow:0 0 0 3px rgba(200,103,136,.14); }
button { margin-top:8px; padding:14px 18px; border:0; border-radius:10px; color:#fff; background:var(--pink-dark); font:inherit; font-weight:700; cursor:pointer; }
button:hover { background:#913b5c; } .form-message { min-height:20px; margin:4px 0 0; color:#5c7a54; font-size:.82rem; }
@media (max-width:680px) { .app-shell { padding:10px 10px 50px; } .registration-panel { grid-template-columns:1fr; } }