:root { --purple:#5c20ff; --ink:#292929; --muted:#747583; --line:#e7e7e7; --group:#e9eaf2; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { min-width:320px; }
body { margin:0; min-height:100vh; overflow:hidden; color:var(--ink); background:#e5dfa1; font-family:Roboto,Arial,sans-serif; }
body::before { content:""; position:fixed; inset:0; z-index:-2; opacity:.38; background:repeating-linear-gradient(135deg,transparent 0 185px,rgba(157,150,80,.22) 186px 188px,transparent 189px 365px); }
body::after { content:""; position:fixed; z-index:-1; top:-27px; left:35px; width:42px; height:145px; border-radius:24px; background:rgba(166,156,84,.28); transform:rotate(43deg); box-shadow:365px 338px rgba(166,156,84,.28),730px 676px rgba(166,156,84,.28),365px -338px rgba(166,156,84,.28),730px 0 rgba(166,156,84,.28),1095px 338px rgba(166,156,84,.28),1095px -338px rgba(166,156,84,.28),145px 250px rgba(166,156,84,.28),510px 588px rgba(166,156,84,.28),875px 250px rgba(166,156,84,.28),1240px 588px rgba(166,156,84,.28); }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.topbar { height:89px; display:grid; place-items:center; }
.wordmark { display:flex; align-items:center; gap:8px; color:var(--purple); text-decoration:none; }
.wordmark>i,.wordmark>svg { width:44px; height:38px; stroke-width:1.8; }
.wordmark span { display:block; }
.wordmark b { font-size:27px; font-weight:700; }
.wordmark small { display:none; }
.shell { width:1080px; height:592px; margin:0 auto; display:grid; grid-template-columns:504px 576px; overflow:hidden; background:#fff; border:1px solid #d5d5d5; border-radius:8px; box-shadow:0 2px 2px rgba(0,0,0,.18); }
.studio { position:relative; border-right:1px solid #dedede; }
.login { position:absolute; top:31px; left:38px; display:inline-flex; align-items:center; gap:8px; color:#9827ee; font-size:16px; font-weight:500; text-decoration:none; }
.login i,.login svg { width:21px; height:21px; stroke-width:3; }
.profile-content { position:absolute; top:84px; right:28px; left:28px; text-align:center; }
.identity { margin:0; text-align:center; }
.logo-ring { width:174px; height:174px; margin:0 auto 24px; display:grid; place-items:center; overflow:hidden; border:4px solid #bd9216; border-radius:50%; background:#fffbea; box-shadow:0 6px 0 #a27a12; }
.logo-ring img { width:151px; height:151px; object-fit:contain; }
.identity h1 { margin:0; color:#858695; font-size:24px; font-weight:400; }
.identity p { display:none; }
.quick-links { position:relative; left:-7px; width:460px; margin:59px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.quick-links a,.quick-links button { display:flex; min-width:0; flex-direction:column; align-items:center; gap:3px; padding:0; border:0; color:#737482; background:none; text-decoration:none; cursor:pointer; }
.quick-links small { max-width:68px; font-size:12px; line-height:18px; }
.quick-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:var(--purple); background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.quick-icon i,.quick-icon img { width:26px; height:26px; }
.quick-icon.whatsapp { color:#fff; background:#10c969; }
.quick-icon.instagram { color:#fff; background:linear-gradient(145deg,#7439d7,#e13378 55%,#f3a329); }
.quick-icon.whatsapp img,.quick-icon.instagram img { filter:brightness(0) invert(1); }
.catalog { position:relative; min-width:0; display:flex; flex-direction:column; padding:16px 24px 15px 16px; }
.catalog-head { height:55px; display:block; padding:0; }
.catalog-head>div { display:none; }
.search { position:relative; width:270px; height:56px; display:flex; align-items:center; padding:10px 14px 4px 40px; border:1px solid #cfcfcf; border-radius:28px; }
.search span { position:absolute; top:-8px; left:36px; padding:0 6px; color:#727272; background:#fff; font-size:12px; }
.search i { position:absolute; left:13px; width:23px; height:23px; color:#777; stroke-width:3; }
.search input { width:100%; min-width:0; border:0; outline:0; color:#444; background:transparent; font-size:16px; }
.search input[type="search"] { appearance:none; -webkit-appearance:none; }
.search input::-webkit-search-cancel-button { display:none; -webkit-appearance:none; }
.search input::placeholder { color:#aaa; }
.category-bar { position:relative; z-index:2; width:100%; height:40px; min-height:40px; display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding:0 16px; border:0; border-radius:4px 4px 0 0; background:var(--group); font-size:16px; font-weight:400; }
.category-bar::after { content:"⌃"; color:#777b8d; font-size:19px; }
.category-bar span:last-child { display:none; }
.service-list { position:relative; z-index:1; height:450px; min-height:0; flex:none; margin-top:0; padding-top:0; overflow-y:scroll; scrollbar-color:#999 #e8e8e8; scrollbar-width:thin; }
.service-list::-webkit-scrollbar { width:8px; }
.service-list::-webkit-scrollbar-track { background:#e8e8e8; border-radius:6px; }
.service-list::-webkit-scrollbar-thumb { background:#999; border-radius:6px; }
.service-list::-webkit-scrollbar-button { display:none; width:0; height:0; }
.service-item { width:100%; height:64px; display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:8px; padding:7px 19px 7px 9px; border:0; border-bottom:1px solid var(--line); color:var(--ink); background:#fff; text-align:left; cursor:pointer; }
.service-item:hover,.service-item:focus-visible { background:#fafafa; outline:0; }
.service-item.selected { background:#e7e1f5; }
.radio { position:relative; width:20px; height:20px; border:2px solid var(--purple); border-radius:50%; }
.selected .radio { border-color:var(--purple); background:var(--purple); }
.selected .radio::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700; line-height:1; }
.service-copy { min-width:0; }
.service-copy strong { display:block; overflow:hidden; font-size:14px; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.service-copy small { color:var(--purple); font-size:12px; }
.select-label { color:#222; font-size:14px; font-weight:500; }
.selected .select-label { width:92px; height:44px; display:grid; place-items:center; border-radius:3px; color:#fff; background:var(--purple); box-shadow:0 2px 3px rgba(47,20,112,.35); font-weight:700; }
.empty { flex:1; display:grid; place-content:center; justify-items:center; gap:8px; color:var(--muted); text-align:center; }
.mobile-brand { display:none; }
.selection { position:absolute; z-index:4; right:auto; bottom:22px; left:50%; width:auto; min-height:0; display:block; padding:0; border:0; background:transparent; box-shadow:none; transform:translateX(-50%); }
.selection div { min-width:0; }
.selection>div { display:none; }
.selection small,.selection strong { display:block; }
.selection small { color:#777; font-size:11px; }
.selection strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.selection button,.dialog-ok { min-height:40px; display:inline-flex; align-items:center; gap:7px; padding:0 17px; border:0; border-radius:4px; color:#fff; background:var(--purple); font-weight:500; cursor:pointer; }
.selection button { width:150px; height:53px; flex-direction:column; justify-content:center; gap:0; border-radius:28px; box-shadow:0 3px 7px rgba(47,20,112,.35); font-size:13px; line-height:15px; }
.selection button span { font-weight:500; }
.selection button small { color:#fff; font-size:9px; font-weight:600; }
.selection button i { width:17px; }
dialog { width:min(390px,calc(100% - 32px)); padding:34px; border:0; border-radius:8px; color:#222; text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(0,0,0,.4); }
.dialog-close { position:absolute; top:12px; right:12px; width:34px; height:34px; display:grid; place-items:center; border:0; background:transparent; cursor:pointer; }
.dialog-icon { width:38px; height:38px; color:var(--purple); }
dialog h2 { margin:12px 0 8px; }
dialog p { margin:0 0 22px; color:#777; line-height:1.55; }
.toast { position:fixed; z-index:10; left:50%; bottom:24px; max-width:calc(100% - 32px); padding:11px 17px; border-radius:4px; color:#fff; background:#292929; opacity:0; transform:translate(-50%,18px); transition:.2s; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:760px) {
  body { overflow:auto; background:#e8e3ad; }
  body::before,body::after { display:none; }
  .topbar { display:none; }
  .shell { width:100%; height:auto; min-height:100vh; grid-template-columns:1fr; margin:0; overflow:visible; border:1px solid #d0d0d0; border-radius:0; background:#e8e3ad; box-shadow:none; }
  .studio { min-height:338px; border:0; }
  .login { top:17px; right:auto; left:19px; gap:9px; font-size:16px; }
  .login i,.login svg { width:20px; height:20px; }
  .profile-content { position:static; padding:0; text-align:center; }
  .identity { display:block; padding:0; text-align:center; }
  .logo-ring { width:153px; height:153px; margin:59px auto 19px; border-width:4px; box-shadow:0 5px 0 #a27a12; }
  .logo-ring img { width:134px; height:134px; }
  .identity h1 { color:#222; font-size:26px; line-height:30px; }
  .quick-links { position:static; left:auto; width:260px; margin:27px auto 0; gap:0; }
  .quick-links small { display:none; }
  .quick-icon { width:43px; height:43px; }
  .quick-icon i,.quick-icon img { width:28px; height:28px; }
  .catalog { min-height:calc(100vh - 338px); padding:0; background:#fff; }
  .catalog-head { height:75px; padding:8px; background:#e8e3ad; }
  .search { width:100%; height:55px; padding:10px 14px 4px 46px; border-radius:29px; background:#fff; }
  .search span { left:42px; font-size:10px; }
  .search i,.search svg { left:14px; width:22px; height:22px; }
  .search input { font-size:14px; }
  .category-bar { width:100%; height:42px; min-height:42px; margin:0; padding:0 13px; border-radius:0; font-size:13px; }
  .category-bar::after { font-size:15px; }
  .service-list { width:100%; height:auto; margin:0; padding:0; overflow:visible; background:#fff; }
  .service-item { height:64px; grid-template-columns:24px minmax(0,1fr) auto; gap:8px; padding:7px 19px 7px 9px; }
  .radio { width:20px; height:20px; border-width:2px; box-shadow:none; }
  .service-copy strong { font-size:14px; }
  .service-copy small { font-size:12px; }
  .select-label { display:none; }
  .mobile-brand { height:58px; display:flex; align-items:center; justify-content:center; gap:6px; border-top:1px solid #eee; color:var(--purple); background:#fff; }
  .mobile-brand svg { width:24px; height:20px; stroke-width:1.8; }
  .mobile-brand strong { font-size:14px; font-weight:600; }
  .selection { position:fixed; right:auto; bottom:10px; left:50%; z-index:20; width:auto; min-height:0; margin:0; padding:0; border:0; background:transparent; box-shadow:none; transform:translateX(-50%); }
  .selection>div { display:none; }
  .selection button { width:112px; height:42px; min-height:42px; display:flex; flex-direction:column; justify-content:center; gap:0; padding:0 12px; border-radius:24px; box-shadow:0 2px 5px rgba(50,20,120,.35); font-size:11px; line-height:13px; }
  .selection button span { font-weight:700; }
  .selection button small { color:#fff; font-size:8px; font-weight:500; }
}