:root { color-scheme: light; --bg:#fff9f7; --paper:#fff; --ink:#281f25; --muted:#82747b; --line:#f0e2e5; --pink:#d85b86; --pink-dark:#bd3c6a; --soft:#fff0f4; --shadow:0 14px 36px rgba(117,50,75,.09); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(circle at 90% 0, #fde8ee 0, transparent 34%), var(--bg); color:var(--ink); }
button,input { font:inherit; } button { cursor:pointer; } #app { width:min(100%, 570px); margin:0 auto; padding:22px 17px calc(36px + env(safe-area-inset-bottom)); }
.loading { display:grid; min-height:70vh; place-items:center; color:var(--muted); }.hero { position:relative; overflow:hidden; padding:12px 0 27px; }.eyebrow { color:var(--pink-dark); font-size:12px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }.hero h1,.success h1 { margin:7px 0 7px; font-family:Georgia,serif; font-size:37px; line-height:1.02; letter-spacing:-.04em; }.hero p { max-width:250px; margin:0; color:var(--muted); line-height:1.45; }.hero-art { position:absolute; right:-2px; bottom:-2px; width:125px; height:94px; }.hero-art i { position:absolute; display:block; width:47px; height:70px; border-radius:31px 31px 20px 20px; background:linear-gradient(135deg,#ffbfd0,#dc5381); box-shadow:inset 7px 7px 12px rgba(255,255,255,.55), 0 8px 15px rgba(175,65,105,.18); transform:rotate(18deg); }.hero-art i:nth-child(1){left:9px;top:17px}.hero-art i:nth-child(2){left:47px;top:2px;transform:rotate(36deg);background:linear-gradient(135deg,#ffd6df,#d85b86)}.hero-art i:nth-child(3){right:0;top:28px;transform:rotate(51deg);background:linear-gradient(135deg,#fec7d7,#c64471)}
.steps { display:flex; align-items:center; gap:8px; margin:0 3px 24px; }.steps span { display:grid; place-items:center; width:24px; height:24px; border:1px solid #e6d4da; border-radius:50%; color:#ab969e; font-size:12px; font-weight:800; }.steps span.active,.steps span.done { color:white; border-color:var(--pink); background:var(--pink); }.steps b { display:block; flex:1; height:1px; background:#eadce0; }.section-title { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:24px 2px 11px; }.section-title h2 { margin:0; font-size:18px; letter-spacing:-.02em; }.section-title span { color:var(--muted); font-size:13px; }
.cards { display:grid; gap:9px; }.service { display:flex; align-items:center; gap:12px; width:100%; padding:14px; text-align:left; color:var(--ink); border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:0 3px 10px rgba(79,32,51,.025); transition:.16s ease; }.service:hover,.service.selected { border-color:#e997b1; background:#fff8fa; box-shadow:var(--shadow); }.service-icon { display:grid; flex:none; place-items:center; width:43px; height:43px; border-radius:14px; background:#ffe7ee; color:var(--pink-dark); font-size:20px; }.service>span:nth-child(2) { display:grid; flex:1; gap:3px; }.service strong { font-size:15px; }.service small { color:var(--muted); font-size:12px; line-height:1.3; }.service em { color:var(--pink-dark); font-size:13px; font-style:normal; font-weight:700; }.radio { width:18px; height:18px; border:1.5px solid #decbd2; border-radius:50%; }.selected .radio { border:5px solid var(--pink); }
.schedule,.form { position:relative; z-index:1; margin-top:25px; padding:1px 14px 15px; border:1px solid var(--line); border-radius:22px; background:rgba(255,255,255,.72); }.schedule .section-title,.form .section-title { margin-left:0; margin-right:0; }.dates { display:flex; gap:8px; overflow:auto; padding:1px 1px 8px; scrollbar-width:none; }.dates::-webkit-scrollbar { display:none; }.date { display:grid; flex:0 0 60px; gap:2px; padding:9px 5px; color:#786870; border:1px solid #eddee2; border-radius:14px; background:white; }.date b,.date small { font-size:11px; font-weight:600; }.date strong { font-size:20px; }.date.selected { color:white; border-color:var(--pink); background:var(--pink); box-shadow:0 7px 14px rgba(210,76,120,.25); }.times p,.hint { margin:10px 0 9px; color:var(--muted); font-size:13px; }.time-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.time { min-height:38px; color:#6e5c64; border:1px solid #eadadd; border-radius:11px; background:white; font-size:13px; font-weight:700; }.time.selected { color:white; border-color:var(--pink-dark); background:var(--pink-dark); }.form { padding-bottom:17px; }.form label { display:grid; gap:7px; margin:12px 0; color:#625158; font-size:13px; font-weight:650; }.form input { position:relative; z-index:2; width:100%; padding:13px 12px; color:var(--ink); outline:none; border:1px solid #e9dade; border-radius:12px; background:white; }.form input:focus { border-color:#df7799; box-shadow:0 0 0 3px #ffe5ec; }.summary { display:grid; gap:3px; margin:17px 0 12px; padding:13px; border-radius:14px; background:var(--soft); }.summary span { font-size:13px; color:#6d5660; }.summary b { font-size:14px; }.summary strong { color:var(--pink-dark); font-size:16px; }.book { width:100%; min-height:51px; color:white; border:0; border-radius:15px; background:linear-gradient(135deg,var(--pink),var(--pink-dark)); box-shadow:0 9px 18px rgba(188,60,105,.24); font-weight:800; }.book:disabled { opacity:.6; }.footer { margin:22px auto 0; max-width:260px; color:#95868c; font-size:12px; line-height:1.45; text-align:center; }.success { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.success p { color:var(--muted); line-height:1.55; }.success p b { color:var(--ink); }.check { display:grid; place-items:center; width:72px; height:72px; margin-bottom:20px; color:white; border-radius:50%; background:linear-gradient(135deg,#ef90af,#c74472); font-size:38px; box-shadow:0 15px 28px rgba(196,68,114,.28); }.success .book { max-width:280px; margin-top:12px; }
.form input.invalid { border-color:#c73562; box-shadow:0 0 0 3px #ffe5ec; }.form .field-error { min-height:15px; color:#b52b55; font-size:12px; font-weight:600; }
@media (max-width:360px) { .time-grid { grid-template-columns:repeat(3,1fr); } .hero h1 { font-size:33px; } }