:root { --ink:#403044; --muted:#756779; --primary:#a13c6c; --primary-dark:#793052; --bg:#faf7f5; --line:#ebe4e9; --shadow:0 8px 32px #4e294309; }
body { background:var(--bg); font-size:14px; -webkit-font-smoothing:antialiased; }
.ui-icon { width:21px; height:21px; flex-shrink:0; vertical-align:middle; }
.button { gap:12px; border-radius:13px; min-height:45px; padding:12px 20px; box-shadow:0 6px 16px #a13c6c20; }
.button .ui-icon { width:18px; height:18px; }
.button.secondary { box-shadow:none; }
aside { width:260px; background:#45334b; color:#fff; border:0; padding:30px 22px; }
.brand { color:#fff; gap:13px; }
.brand img { width:47px; height:47px; }
.brand b { color:#f2bcd6; font-size:21px; letter-spacing:4px; }
.brand span { font-size:13px; }
.tagline { color:#d8cbdc; font-size:11px; padding-bottom:23px; border-bottom:1px solid #ffffff17; margin:20px 0 18px; }
nav { gap:5px; }
nav a { display:flex; align-items:center; gap:12px; padding:12px 13px; color:#e2d7e6; font-size:13px; font-weight:500; border-radius:12px; }
nav a .ui-icon { width:18px; height:18px; opacity:.8; }
nav a:hover { background:#ffffff0c; color:#fff; }
nav a.selected { background:#f4dce9; color:#693e60; font-weight:650; box-shadow:0 5px 15px #1b102217; }
nav a.selected::before { display:none; }
.aside-bottom { color:#c7b6ce; border-color:#ffffff20; padding-top:18px; }
.aside-bottom .text-button { color:#f4dce9; }
main { margin-left:260px; padding:24px 4% 36px; }
.page-topbar { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:0 0 24px; margin-bottom:6px; font-size:12px; color:var(--muted); }
.page-topbar>span { display:flex; align-items:center; gap:9px; }
.page-topbar>span .ui-icon { color:#bb7195; width:17px; height:17px; }
.page-topbar>div { display:flex; gap:12px; align-items:center; }
.today-pill { padding:7px 11px; font-variant-numeric:tabular-nums; }
.account-pill { display:flex; align-items:center; gap:7px; padding:8px 12px; background:#fff; border:1px solid var(--line); border-radius:20px; }
.account-pill .ui-icon { width:15px; height:15px; }
h1 { font-size:34px; font-weight:650; letter-spacing:-1.2px; }
h2 { letter-spacing:-.4px; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:2px; display:flex; align-items:center; gap:8px; }
.eyebrow .ui-icon { width:15px; height:15px; }
.welcome { background:linear-gradient(115deg,#f8e4eb,#eee6f5 70%,#f8eddf); border:1px solid #f1e4eb; border-radius:25px; padding:32px; box-shadow:var(--shadow); }
.panel,.stats article { border-radius:20px; border-color:var(--line); box-shadow:var(--shadow); }
.panel h2 { font-size:18px; }
.stats strong { font-size:34px; }
.stats article { position:relative; overflow:hidden; }
.stats article::after { content:'✳'; position:absolute; right:20px; top:35px; font-size:64px; color:#a13c6c0a; pointer-events:none; }
.pet-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.pet-card { background:#fff; border-radius:22px; transition:transform .18s,box-shadow .18s; }
.pet-card:hover { transform:translateY(-3px); box-shadow:0 12px 35px #6c3b5110; }
.pet-symbol { border-radius:50%; background:linear-gradient(135deg,#f2dce7,#ece2f3); }
.form-section-title { border-bottom:1px solid var(--line); padding-bottom:14px; }
input,textarea,select { border-color:#e1d8e0; background:#fffeff; border-radius:11px; padding:13px; }
label { font-size:13px; }
th { background:#f7f1f5; }
.timeline-dot { border-radius:50%; }
.boutique-hero { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; min-height:310px; padding:38px 36px; border-radius:28px; background:#f6e9ef; border:1px solid #efdee8; position:relative; overflow:hidden; margin-bottom:32px; }
.boutique-hero::before { content:''; width:300px; height:300px; background:#ede1f2; position:absolute; right:-80px; top:-90px; border-radius:50%; }
.hero-copy,.hero-art { position:relative; z-index:1; }
.hero-copy h1 { font-size:clamp(34px,3.2vw,49px); line-height:1.13; margin:18px 0; letter-spacing:-1.8px; }
.hero-copy h1 em { font-family:Georgia,'Times New Roman',serif; font-weight:400; color:var(--primary); letter-spacing:-1.5px; }
.hero-copy>p:not(.eyebrow) { font-size:14px; max-width:390px; line-height:1.8; }
.hero-copy .button { margin-top:9px; }
.hero-art img { display:block; width:100%; height:auto; max-height:330px; object-fit:contain; }
.hero-note { display:flex; align-items:center; gap:8px; color:#816674; font-size:11px; margin-top:20px; }
.hero-note .ui-icon { width:14px; height:14px; }
.shop-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; scroll-margin-top:20px; }
.shop-heading h2 { font-size:23px; margin:7px 0; }
.shop-heading p:last-child { font-size:13px; margin-bottom:0; }
.count-pill { white-space:nowrap; font-size:11px; color:#79647d; background:#eee5f1; border-radius:20px; padding:9px 13px; }
.service-grid { grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:22px; }
.service-card,.service-card:nth-child(n) { padding:0; overflow:hidden; background:#fff; border:1px solid #ece2e8; border-radius:22px; transition:transform .18s,box-shadow .18s; }
.service-card:hover { transform:translateY(-4px); box-shadow:0 15px 30px #673b5512; }
.service-cover { position:relative; height:140px; background:#f5dfe7; overflow:hidden; padding:24px; display:flex; align-items:center; justify-content:space-between; }
.service-card:nth-child(3n+2) .service-cover { background:#eae0f4; }
.service-card:nth-child(3n+3) .service-cover { background:#f8ead5; }
.service-cover::after { content:''; position:absolute; width:165px; height:165px; border:25px solid #ffffff2b; border-radius:50%; top:-70px; right:-20px; }
.cover-flower { position:absolute; right:26px; top:22px; font-size:105px; line-height:1; color:#a13c6c13; transform:rotate(10deg); }
.cover-heart { position:absolute; right:58px; bottom:2px; font-size:50px; color:#fff8; transform:rotate(-15deg); }
.service-symbol { position:relative; z-index:1; width:68px; height:68px; display:grid; place-items:center; border-radius:22px; background:#ffffffba; color:#9b5a7c; margin:0; box-shadow:0 5px 15px #74435b06; }
.service-symbol .ui-icon { width:33px; height:33px; stroke-width:1.5; }
.service-duration { position:absolute; top:17px; right:17px; background:#fff9; border:1px solid #fff9; padding:6px 9px; border-radius:18px; color:#6d5367; font-size:10px; z-index:2; display:flex; gap:5px; align-items:center; }
.service-duration .ui-icon { width:12px; height:12px; }
.service-content { padding:24px; display:flex; flex:1; flex-direction:column; }
.service-card h2 { font-size:19px; margin:0 0 10px; line-height:1.4; }
.service-card p { font-size:13px; margin:0; line-height:1.8; }
.service-bottom { margin-top:auto; padding-top:24px; }
.price-row { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #f1e8ed; padding-top:17px; margin-bottom:18px; }
.service-bottom .price-row span { margin:0 0 5px; font-size:10px; }
.service-bottom strong { font-size:25px; }
.price-paw { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#faf2f6; color:#b87898; }
.price-paw .ui-icon { width:17px; height:17px; }
.service-bottom .button { font-size:12px; justify-content:space-between; padding:12px 15px; }
.how-it-works { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:30px 0 10px; margin-top:16px; }
.how-it-works>div { border-top:1px solid #e5dbe3; padding-top:20px; }
.how-it-works span { display:inline-grid; place-items:center; width:29px; height:29px; color:var(--primary); background:#f3e3eb; font-size:10px; border-radius:50%; }
.how-it-works h3 { font-size:14px; margin:13px 0 8px; }
.how-it-works p { font-size:12px; margin:0; }
.login-main { margin:0; padding:40px; background:radial-gradient(ellipse at 15% 20%,#f2dce7,transparent 60%),radial-gradient(ellipse at 95% 90%,#e6ddf1,transparent 55%),#fbf6f3; }
.login-shell { display:grid; grid-template-columns:1.05fr 1fr; width:100%; max-width:960px; background:#fffbfc; border:1px solid #fff; border-radius:32px; overflow:hidden; box-shadow:0 25px 75px #71395b14; }
.login-story { padding:40px; background:linear-gradient(150deg,#f5dfe8,#ede2f1 70%,#f9e8d7); display:flex; flex-direction:column; justify-content:center; }
.login-story .eyebrow { margin-top:0; }
.login-story h2 { font-family:Georgia,'Times New Roman',serif; font-size:38px; font-weight:400; line-height:1.18; letter-spacing:-1px; max-width:310px; }
.login-story h2 em { color:var(--primary); }
.login-story p { font-size:13px; }
.login-story img { width:100%; height:auto; margin:20px 0 0; }
.login-shell .login-card { max-width:none; border:0; border-radius:0; background:#fff; box-shadow:none; padding:42px; align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.login-card h1 { font-size:30px; }
.login-shell .logo-heart img { width:54px; height:54px; margin-bottom:5px; }
.login-shell .login-card form { margin-top:20px; }
.login-card>p { font-size:13px; }
.login-card .login-links { font-size:12px; }
.registration-card { border-radius:26px; }
@media(max-width:1150px) {
  aside { width:225px; padding:27px 17px; } main { margin-left:225px; padding:22px 28px; }
  .boutique-hero { padding:30px 25px; grid-template-columns:1.2fr 1fr; }
  .hero-copy h1 { font-size:36px; }
}
@media(max-width:700px) {
  aside { position:static; width:auto; padding:16px; background:#fff; color:var(--ink); border-bottom:1px solid var(--line); overflow:visible; }
  .brand { color:var(--ink); gap:9px; } .brand b { color:var(--primary); display:inline; font-size:15px; letter-spacing:1px; } .brand span { font-size:12px; letter-spacing:1px; } .brand img { width:38px; height:38px; }
  nav { gap:6px; margin-top:17px; } nav a { font-size:11px; padding:9px 10px; gap:6px; color:var(--muted); background:#faf5f8; }
  nav a .ui-icon { width:14px; height:14px; } nav a.selected { background:#f2dfe9; color:#733e60; box-shadow:none; } nav a:hover { background:#f4eaf0; color:var(--primary); }
  .aside-bottom { position:absolute; top:17px; right:16px; margin:0; padding:0; border:0; } .aside-bottom .text-button { color:var(--primary); font-size:11px; }
  main { margin-left:0; padding:18px 16px 26px; }
  .page-topbar { padding:0 0 16px; font-size:10px; gap:10px; } .page-topbar>span { font-size:10px; gap:5px; } .today-pill { display:none; } .account-pill { padding:6px 9px; font-size:10px; }
  .boutique-hero { padding:25px; border-radius:23px; display:flex; flex-direction:column; align-items:stretch; min-height:0; margin-bottom:25px; }
  .hero-copy h1 { font-size:36px; letter-spacing:-1.5px; margin:15px 0; } .hero-copy>p:not(.eyebrow) { font-size:12px; line-height:1.8; }
  .hero-copy>p br { display:none; } .hero-note { font-size:10px; margin-top:16px; }
  .hero-art { margin-top:5px; max-height:160px; } .hero-art img { max-height:170px; }
  .hero-copy .button { font-size:12px; padding:11px 14px; min-height:42px; }
  .shop-heading { align-items:flex-start; flex-direction:column; gap:12px; } .shop-heading h2 { font-size:21px; } .shop-heading p:last-child { font-size:12px; }
  .count-pill { padding:7px 11px; font-size:10px; }
  .service-grid { margin-top:20px; grid-template-columns:minmax(0,1fr); gap:20px; }
  .service-cover { height:130px; } .service-content { padding:23px; }
  .service-card h2 { font-size:20px; }
  .how-it-works { grid-template-columns:1fr; gap:18px; padding-top:18px; } .how-it-works>div { display:grid; grid-template-columns:29px 1fr; gap:0 12px; padding-top:18px; } .how-it-works h3 { margin:0 0 7px; } .how-it-works p { grid-column:2; } .how-it-works span { grid-row:1/3; }
  .login-main { padding:24px 16px; } .login-shell { max-width:450px; display:block; border-radius:26px; }
  .login-story { padding:22px 26px 0; position:relative; min-height:165px; }
  .login-story h2 { font-size:27px; max-width:195px; margin-bottom:15px; } .login-story .eyebrow { font-size:8px; margin-bottom:12px; } .login-story>p:last-of-type { display:none; }
  .login-story img { position:absolute; right:-10px; bottom:4px; width:150px; margin:0; }
  .login-shell .login-card { padding:28px; } .login-shell .logo-heart { display:none; } .login-shell .login-card>.eyebrow { display:none; }
  .login-card h1 { font-size:27px; } .registration-card { padding:26px; }
  .pet-grid { grid-template-columns:minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) { .service-card,.pet-card { transition:none; } .service-card:hover,.pet-card:hover { transform:none; } }