/* App do cliente */
#appbar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
#appbar .logo { width: 132px; }
#appbar:not(.hide) + #view { padding-top: 18px; }
@media print { #appbar { display: none !important; } }
#view { max-width: 560px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 16px calc(100px + env(safe-area-inset-bottom)); }
#tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: space-around; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
#tabs a[data-tab] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--faint); font-size: 10.5px; letter-spacing: .04em; padding: 4px 0; }
#tabs a[data-tab] svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#tabs a[data-tab].on { color: var(--gold); }
.top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; min-height: 40px; }
.top h1, .top h2 { margin: 0; flex: 1; font-size: 22px; }
.back { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--text); font-size: 18px; background: none; cursor: pointer; flex: none; }
.iconbtn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--text); background: none; cursor: pointer; flex: none; }
.iconbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn .n { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--gold); color: var(--on-accent); font: 700 10px/17px var(--sans); text-align: center; padding: 0 4px; }
.section-t { display: flex; justify-content: space-between; align-items: baseline; margin: 28px 0 12px; }
.section-t h3 { margin: 0; }

/* login */
.login { min-height: calc(100dvh - 40px); display: flex; flex-direction: column; margin: calc(-16px - env(safe-area-inset-top)) -16px 0; }
.login .hero { position: relative; flex: 1; min-height: 44dvh; background: url(/assets/img/H1.webp) center/cover; }
.login .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,16,.2) 0%, rgba(13,14,16,.55) 55%, var(--bg) 100%); }
.login .hero .logo { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 28px; max-width: 300px; }
.login .form { padding: 8px 24px 32px; }
.login .tag { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; }
.otp { font-size: 26px !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.devcode { border: 1px dashed var(--gold); color: var(--gold); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }

/* início */
.herocard { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); }
.herocard .ph { height: 190px; background: center/cover; position: relative; }
.herocard .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, var(--photo-fade)); }
.herocard .bd { position: relative; margin-top: -26px; padding: 4px 22px 22px; }
.herocard h1 { font: 600 24px/1.15 var(--display); letter-spacing: -.02em; margin: 0 0 12px; }
.herocard .grad { background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.herocard p { color: var(--muted); font-size: 14.5px; font-weight: 300; margin: 0 0 20px; }
.herocard .btn.primary { background: var(--accent-grad); border: 0; box-shadow: 0 10px 30px rgba(91,143,208,.18); }
.herocard .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.herocard .btn.alt { margin-top: 10px; border-color: var(--line-strong); }

.hello { margin-bottom: 20px; }
.hello .eyebrow { margin-bottom: 6px; }
.hello h1 { font-size: 26px; margin: 0; }
.next { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.next .ph { height: 150px; background: center/cover; position: relative; }
.next .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--surface)); }
.next .bd { padding: 0 18px 18px; margin-top: -30px; position: relative; }
.progress { display: flex; gap: 4px; margin: 14px 0 8px; }
.progress i { flex: 1; height: 3px; border-radius: 2px; background: var(--line-strong); }
.progress i.on { background: var(--gold); }
.action { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius); background: var(--gold-soft); border: 1px solid rgba(91,143,208,.25); cursor: pointer; margin-top: 10px; }
.action .ic { width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; flex: none; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.quick a { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.25; }
.quick .qi { width: 54px; height: 54px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--gold); }
.quick svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pointscard { background: var(--card-dark); border: 1px solid rgba(91,143,208,.25); border-radius: 18px; padding: 20px; cursor: pointer; }
.pointscard .big { font: 600 34px/1 var(--display); color: var(--gold); margin: 6px 0 4px; }
.banner { border-radius: 18px; overflow: hidden; position: relative; min-height: 150px; background: center/cover; display: flex; align-items: flex-end; cursor: pointer; }
.banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,14,16,.95) 0%, rgba(13,14,16,.5) 70%, transparent); }
.banner > div { position: relative; padding: 20px; max-width: 78%; }

/* serviços */
.cat { margin: 26px 0 10px; }
.svc { display: flex; gap: 14px; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); cursor: pointer; margin-bottom: 8px; align-items: center; }
.svc .th { width: 76px; height: 76px; border-radius: 10px; background: center/cover var(--raised); flex: none; }
.svc .nm { font-weight: 600; margin-bottom: 3px; }
.svc .pr { color: var(--gold); font-size: 14px; }
.svchero { height: 220px; margin: -22px -20px 18px; background: center/cover; border-radius: 22px 22px 0 0; position: relative; }
.svchero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--surface)); }
.tabsel { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.tabsel button { flex: 1; border: 0; background: none; color: var(--muted); padding: 9px; border-radius: 999px; font: 500 13px var(--sans); cursor: pointer; }
.tabsel button.on { background: var(--raised); color: var(--text); }

/* agendar */
.step { margin-bottom: 26px; }
.step > .lbl { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.vpick { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.vpick::-webkit-scrollbar, .days::-webkit-scrollbar { display: none; }
.vpick button { flex: none; min-width: 150px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; color: var(--text); cursor: pointer; font-family: var(--sans); }
.vpick button.on { border-color: var(--gold); background: var(--gold-soft); }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.modes button { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 8px; color: var(--text); cursor: pointer; font: 500 13px var(--sans); text-align: center; }
.modes button small { display: block; margin-top: 3px; font-size: 11px; }
.modes button.on { border-color: var(--gold); background: var(--gold-soft); }
.modes button:disabled { opacity: .35; }
.days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.days button { flex: none; width: 58px; padding: 10px 0; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font-family: var(--sans); }
.days button b { display: block; font-size: 19px; font-weight: 600; }
.days button small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.days button.on { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.days button.on small { color: var(--on-accent); }
.days button:disabled { opacity: .3; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slots button { padding: 11px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font: 500 14px var(--sans); font-variant-numeric: tabular-nums; }
.slots button.on { background: var(--gold); border-color: var(--gold); color: var(--on-accent); font-weight: 600; }
.sticky { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); margin-top: 20px; background: var(--glass-2); backdrop-filter: blur(12px); border: 1px solid var(--line-strong); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); }

/* detalhe */
.status-hero { text-align: center; padding: 8px 0 20px; }
.status-hero h2 { margin: 10px 0 4px; }
#map { height: 220px; border-radius: var(--radius); overflow: hidden; margin-top: 12px; background: var(--raised); }
.vcard { display: flex; gap: 14px; align-items: center; }
.vcard .vph { width: 64px; height: 64px; border-radius: 12px; background: center/cover var(--raised); flex: none; display: grid; place-items: center; color: var(--faint); }
.vcard .vph svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.plate { display: inline-block; font: 600 11px/1 var(--sans); letter-spacing: .12em; border: 1px solid var(--line-strong); border-radius: 4px; padding: 4px 6px; color: var(--muted); }
.nps { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.nps button { aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font: 600 13px var(--sans); padding: 0; }
.nps button.on { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }

/* chat */
.chat { display: flex; flex-direction: column; gap: 8px; min-height: 50dvh; }
.msg { max-width: 80%; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; }
.msg.me { align-self: flex-end; background: var(--gold); color: var(--on-accent); border-bottom-right-radius: 6px; }
.msg.them { align-self: flex-start; background: var(--raised); border-bottom-left-radius: 6px; }
.msg small { display: block; font-size: 11px; opacity: .65; margin-top: 3px; }
.composer { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); display: flex; gap: 8px; margin-top: 14px; background: var(--bg); padding: 8px 0; }
.composer textarea { min-height: 46px; height: 46px; border-radius: 23px; padding: 12px 16px; }
.composer .btn { flex: none; width: 46px; padding: 0; }

/* certificado (impressão) */
.cert { background: #f7f4ee; color: #1b1a17; border-radius: 12px; padding: 34px 28px; }
.cert .logo { color: #1c4d7d; max-width: 220px; margin: 0 auto 18px; }
.cert h2 { color: #1b1a17; text-align: center; font-size: 22px; }
.cert .kv > :first-child { color: #6a665e; }
.cert .kv { border-bottom: 1px solid #e3ded3; }
@media print {
  body { background: #fff; } #tabs, .noprint { display: none !important; } #view { padding: 0; max-width: none; }
  .cert { border-radius: 0; }
}

/* consultora, motorista e próximo passo */
.consultant { margin-top: 18px; }
.consultant .who small:first-child { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.nextbar { position: fixed; left: 0; right: 0; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 45; padding: 10px 16px; background: linear-gradient(180deg, transparent, var(--bg) 30%); }
.nextbar .btn { max-width: 528px; margin: 0 auto; display: flex; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#view:has(.nextbar) { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
.flash { animation: flash 1.2s ease; }
@keyframes flash { 30% { box-shadow: 0 0 0 3px var(--gold); } }
.msgfrom { align-self: flex-start; margin-bottom: -4px; }
/* horários agrupados */
.slotgrp + .slotgrp { margin-top: 14px; }
.slotgrp .sl { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.note { background: var(--gold-soft); border: 1px solid rgba(91,143,208,.25); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; color: var(--text); margin: 8px 0 12px; }
/* serviços por categoria no agendamento */
.picked { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.optlist { display: grid; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text); cursor: pointer; font-family: var(--sans); }
.opt b { display: block; font-weight: 600; font-size: 14.5px; } .opt small { color: var(--muted); font-size: 12.5px; }
.opt .pr { color: var(--gold); font-weight: 600; white-space: nowrap; }
.opt .ck { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-strong); flex: none; display: grid; place-items: center; }
.opt.on { border-color: var(--gold); background: var(--gold-soft); }
.opt.on .ck { background: var(--gold); border-color: var(--gold); }
.opt.on .ck::after { content: ''; width: 9px; height: 5px; border: 2px solid var(--on-accent); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
/* busca e filtros do catálogo */
.search { position: relative; margin: 6px 0 12px; }
.search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.search input { padding-left: 42px; border-radius: 999px; }
.filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 6px; padding: 0 16px 4px; }
.filters::-webkit-scrollbar { display: none; }
.filters .chip { flex: none; }
.filters .chip .n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: var(--on-accent); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
.filters .chip.on .n { background: var(--on-accent); color: var(--gold); }

/* aba Agenda sempre em destaque */
#tabs a[data-tab="agenda"] { color: var(--gold); }
#tabs a[data-tab="agenda"] svg { background: var(--gold); color: var(--on-accent); border: 1px solid var(--gold); border-radius: 12px; padding: 5px; width: 38px; height: 30px; margin-top: -4px; }
#tabs a[data-tab="agenda"].on svg { background: #a9c8ee; border-color: #a9c8ee; box-shadow: 0 0 0 3px var(--gold-soft); }
#tabs a[data-tab="agenda"] span { font-weight: 600; }

/* menu rápido (+) */
#fab { position: fixed; right: max(16px, calc(50vw - 264px)); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 62; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent-grad-d); color: var(--on-accent); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
#fab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
#fab:active { transform: scale(.94); }
#quick.open #fab svg { transform: rotate(45deg); }
.qback { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.qmenu { position: fixed; right: max(16px, calc(50vw - 264px)); bottom: calc(152px + env(safe-area-inset-bottom)); z-index: 61; width: min(300px, calc(100vw - 32px)); display: grid; gap: 8px;
  opacity: 0; transform: translateY(12px) scale(.98); transform-origin: bottom right; pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1); }
#quick.open .qback { opacity: 1; pointer-events: auto; }
#quick.open .qmenu { opacity: 1; transform: none; pointer-events: auto; }
.qmenu a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); box-shadow: var(--shadow); }
.qmenu a:hover { border-color: rgba(91,143,208,.4); }
.qmenu .qi { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--gold); background: var(--gold-soft); border: 1px solid rgba(91,143,208,.28); flex: none; }
.qmenu .qi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.qmenu b { display: block; font-weight: 600; font-size: 14.5px; } .qmenu small { color: var(--muted); font-size: 12.5px; }
/* com a barra de próximo passo, o + sobe para não cobrir o botão */
body:has(.nextbar) #fab { bottom: calc(150px + env(safe-area-inset-bottom)); }
body:has(.nextbar) .qmenu { bottom: calc(218px + env(safe-area-inset-bottom)); }
@media print { #quick { display: none !important; } }

/* garagem: cartão do veículo */
.vcard2 { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; margin-bottom: 12px; }
.vcard2 .vhead { display: flex; gap: 14px; align-items: flex-start; }
.vcard2 .paint { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; flex: none; box-shadow: 0 0 0 3px rgba(255,255,255,.06), inset 0 -3px 5px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.25); }
.vcard2 h2 { margin: 2px 0 2px; font-size: 21px; }
.vcard2.full h2 { font-size: 26px; }
.vcard2 .vhead small { color: var(--muted); }
.vstats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 6px; border: 1px solid var(--line); border-radius: 14px; }
.vstats > div { text-align: center; padding: 12px 4px; }
.vstats > div + div { border-left: 1px solid var(--line); }
.vstats b { display: block; font: 600 18px var(--display); color: var(--gold); }
.vstats small { color: var(--muted); font-size: 11.5px; }
.vrows { margin-top: 4px; }
.vrow { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.vrow:last-child { border-bottom: 0; }
.vrow .k { width: 96px; flex: none; font-size: 12px; color: var(--muted); line-height: 1.3; }
.vrow .v { flex: 1; min-width: 0; font-size: 14px; }
.vrow .v small { display: block; color: var(--muted); font-size: 12.5px; }

/* ícones dos serviços no prontuário */
.svcicons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.svcicon { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(91,143,208,.22); background: var(--raised); display: grid; place-items: center; color: var(--gold); }
.svcicon img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }
.svcicon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; }
/* miniaturas do catálogo: aproxima o ícone (a arte tem margem para o cabeçalho do detalhe) */
.svc .th { background-size: auto 125%; background-position: center; }

/* agenda */
.calico { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--on-accent); background: var(--accent-grad-d); }
.calico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* barra lateral e ações rápidas só aparecem no computador */
.side-brand, .side-quick { display: none; }
.home-grid, .detail-grid, .vsingle { display: block; }
.svcgrid, .vgrid { display: grid; gap: 0; }
.vgrid { gap: 0; }

/* ---------- versão web (telas grandes) ---------- */
@media (min-width: 1024px) {
  body { --side: 256px; }
  #view { max-width: 1180px; margin: 0 0 0 max(var(--side), calc(var(--side) + (100vw - var(--side) - 1180px) / 2)); padding: 40px 56px 80px; }

  /* navegação vira barra lateral */
  #tabs { top: 0; bottom: 0; right: auto; width: var(--side); flex-direction: column; justify-content: flex-start; gap: 4px; padding: 28px 18px 24px;
    border-top: 0; border-right: 1px solid var(--line); background: var(--side-bg); backdrop-filter: none; -webkit-backdrop-filter: none; overflow-y: auto; }
  #tabs .side-brand { display: block; width: 150px; margin: 0 10px 30px; }
  #tabs a[data-tab] { flex: none; flex-direction: row; gap: 14px; padding: 11px 12px; border-radius: 12px; font-size: 14.5px; letter-spacing: 0; color: var(--muted); }
  #tabs a[data-tab]:hover { background: rgba(255,255,255,.03); color: var(--text); }
  #tabs a[data-tab].on { background: var(--raised); color: var(--text); }
  #tabs a[data-tab] svg { width: 21px; height: 21px; }
  #tabs a[data-tab="agenda"] { color: var(--gold); }
  #tabs a[data-tab="agenda"] svg { width: 30px; height: 26px; margin: -3px -4px -3px -4px; padding: 4px; }
  .side-quick { display: grid; gap: 4px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); }
  .side-lbl { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 0 12px 6px; }
  .side-quick .btn { margin-bottom: 6px; }
  .side-link { padding: 9px 12px; border-radius: 10px; color: var(--muted); font-size: 14px; }
  .side-link:hover { color: var(--text); background: rgba(255,255,255,.03); }
  #quick { display: none !important; }

  .top h2 { font-size: 26px; }
  .hello h1 { font-size: 32px; }

  /* home: principal + lateral */
  .herocard { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 300px; }
  .herocard .ph { height: auto; }
  .herocard .ph::after { background: linear-gradient(90deg, transparent 40%, var(--photo-fade)); }
  .herocard .bd { margin: 0; padding: 34px 32px; display: flex; flex-direction: column; justify-content: center; }
  .herocard h1 { font-size: 28px; }
  .col-side .section-t:first-child { margin-top: 0; }

  /* catálogo e garagem em grade */
  .search, .filters { max-width: 760px; }
  .svcgrid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
  .svcgrid .svc { margin: 0; }
  .vgrid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
  .vgrid .vcard2 { margin: 0; }
  .vsingle { display: grid; grid-template-columns: minmax(360px, 440px) 1fr; gap: 32px; align-items: start; }
  .vsingle > :first-child { position: sticky; top: 32px; }
  .vsingle .section-t:first-child { margin-top: 0; }

  /* detalhe do serviço: acompanhamento + resumo */
  .detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 32px; align-items: start; }
  .detail-grid .d-side { position: sticky; top: 32px; }
  .detail-grid .d-side > .section-t:first-child { margin-top: 0; }
  .status-hero { text-align: left; padding-top: 0; }
  .nextbar { left: var(--side); bottom: 24px; background: none; padding: 0 56px; pointer-events: none; }
  .nextbar .btn { pointer-events: auto; max-width: 420px; margin: 0 0 0 auto; }
  #view:has(.nextbar) { padding-bottom: 120px; }

  /* formulários e listas não ficam largos demais */
  .step, .sticky, #view > .list, #view > .tabsel, .chat, .composer { max-width: 760px; }
  .sticky { bottom: 24px; }
  .composer { bottom: 0; }
  .toast, #toast { bottom: 32px; }

  /* login em tela dividida */
  .login { flex-direction: row; min-height: 100vh; margin: -40px -56px -80px; }
  #view:has(.login) { max-width: none; margin: 0; padding: 40px 56px 80px; }
  .login .hero { min-height: 100vh; }
  .login .hero::after { background: linear-gradient(90deg, rgba(13,14,16,.1) 0%, rgba(13,14,16,.45) 60%, var(--bg) 100%); }
  .login .hero .logo { max-width: 340px; left: 56px; bottom: 56px; }
  .login .form { width: 460px; flex: none; display: flex; flex-direction: column; justify-content: center; padding: 48px 56px; }
}

/* DommoClube */
.clubhero { padding: 6px 0 4px; max-width: 640px; }
.clubhero h1 { font-size: 26px; margin: 8px 0 8px; }
.plans { display: grid; gap: 12px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px 20px; position: relative; overflow: hidden; }
.plan.hl { background: radial-gradient(420px 220px at 80% -10%, rgba(91,143,208,.16), transparent 70%), var(--card-dark); }
.plan .ribbon { position: absolute; top: 16px; right: 16px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-accent); background: linear-gradient(90deg, #cadef4, var(--gold-strong)); padding: 5px 9px; border-radius: 999px; font-weight: 700; }
.pname { font: 600 20px var(--display); }
.pprice { margin: 10px 0 2px; } .pprice b { font: 600 34px var(--display); color: var(--gold); } .pprice span { color: var(--muted); font-size: 13px; margin-left: 4px; }
.pdays { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.plan ul, .plist { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 9px; }
.plan li, .plist li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; }
.plan li svg, .plist li svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plist { margin-top: 16px; }
.mgrid { display: grid; gap: 14px; }
/* carteirinha */
.mcard { position: relative; border-radius: 20px; padding: 20px; aspect-ratio: 1.586; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  background: radial-gradient(520px 260px at 110% -20%, rgba(243,233,210,.22), transparent 60%), linear-gradient(135deg, #17263a 0%, #17181a 55%, var(--side-bg) 100%); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.mcard::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px); pointer-events: none; }
.mcard.pendente, .mcard.vencida { filter: saturate(.4); opacity: .85; }
.mc-top { display: flex; justify-content: space-between; align-items: center; }
.mc-brand { width: 104px; color: var(--gold); } .mc-brand svg { width: 100%; height: auto; display: block; }
.mc-plan { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.mc-plan b { color: var(--gold); font-weight: 700; }
.mc-car { font: 600 20px var(--display); }
.mc-foot { display: flex; justify-content: space-between; gap: 12px; }
.mc-foot small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.mc-foot b { font-size: 13.5px; font-weight: 600; }
.mc-code { position: absolute; right: 20px; top: 52%; font-size: 12px; letter-spacing: .3em; color: rgba(91,143,208,.45); }
.usage { margin-top: 12px; }
.ug { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; }
.ug > div { text-align: center; } .ug > div + div { border-left: 1px solid var(--line); }
.ug b { display: block; font: 600 22px var(--display); color: var(--gold); } .ug small { color: var(--muted); font-size: 11.5px; }
/* chamada na home */
.clubmini { display: grid; gap: 4px; padding: 18px; border-radius: 18px; margin-top: 12px; color: var(--text); background: var(--card-dark); border: 1px solid var(--line); }
.clubmini b { font: 600 18px var(--display); } .clubmini small { color: var(--muted); font-size: 13px; }
.clubmini .btn { justify-self: start; margin-top: 10px; }
@media (min-width: 1024px) {
  .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .plan { display: flex; flex-direction: column; } .plan ul { flex: 1; }
  .mgrid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; }
}

/* aba Club com o D do logotipo */
#tabs a[data-tab] svg.dm { fill: currentColor; stroke: none; width: 27px; height: 21px; margin-top: 1px; }
#tabs a.clubtab { color: var(--gold); }
#tabs a.clubtab.on svg.dm { filter: drop-shadow(0 0 6px rgba(91,143,208,.45)); }
#tabs a.clubtab span { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 9.5px; }
@media (min-width: 1024px) { #tabs a.clubtab span { text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 500; } #tabs a.clubtab svg.dm { width: 22px; height: 17px; } }
/* selo do plano ao lado do nome */
.hname { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hname .planbadge { flex: none; }
.planbadge { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; color: var(--on-accent);
  background: linear-gradient(135deg, #d3e3f6, var(--gold) 55%, #1c4d7d); font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(91,143,208,.18); }
.planbadge svg { width: 18px; height: 14px; fill: currentColor; }
.planbadge.warn { background: transparent; color: var(--warn); border: 1px solid rgba(224,180,106,.45); box-shadow: none; }
/* painel do clube */
.clubmark { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; color: var(--gold); width: 44px; }
.clubmark svg { width: 32px; height: 25px; fill: currentColor; }
.clubmark small { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
.cdash { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ct { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 2px; }
.ct small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ct b { font: 600 22px var(--display); color: var(--gold); }
.ct span { font-size: 12.5px; color: var(--muted); }
.ct.alert b { color: var(--warn); }
.cactions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.cactions .btn { flex: 1 1 auto; }
@media (min-width: 1024px) { .cdash { grid-template-columns: repeat(4, 1fr); } .cactions .btn { flex: none; } }

/* topo: logo à esquerda, conversa e notificações à direita */
#appbar .barbtns { display: flex; gap: 8px; }
#appbar .iconbtn { width: 38px; height: 38px; }
@media (min-width: 1024px) {
  #appbar { display: flex !important; position: fixed; top: 20px; right: 28px; left: auto; padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #appbar.hide { display: none !important; }
  #appbar .logo { display: none; }
  #appbar .iconbtn { background: var(--surface); }
}

/* sugestões (marca/modelo) e amostras de cor */
.combo { position: relative; }
.combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow: auto; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); padding: 4px; }
.combo-opt { padding: 10px 12px; border-radius: 8px; font-size: 14.5px; cursor: pointer; }
.combo-opt:hover, .combo-opt.on { background: var(--gold-soft); color: var(--gold); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-bottom: 8px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 500 11.5px var(--sans); cursor: pointer; }
.sw i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 -4px 8px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.25), 0 0 0 1px rgba(255,255,255,.12); }
.sw.other i { background: conic-gradient(#9c2a26, #d9b23a, #3c5a45, #2f4f7f, #5b1f2a, #9c2a26); }
.sw.on { border-color: var(--gold); color: var(--text); background: var(--gold-soft); }

/* vitrine: só no computador (no celular fica o cartão de destaque) */
.vitrine { display: none; }
@media (min-width: 1024px) {
  .vitrine { display: block; position: relative; height: 380px; border-radius: 24px; overflow: hidden; margin-bottom: 28px; border: 1px solid var(--line); background: #111; }
  .vitrine::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 5; background: var(--metal);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  .vtrack { position: absolute; inset: 0; }
  .vslide { position: absolute; inset: 0; background: center 40%/cover; opacity: 0; transform: scale(1.03); transition: opacity .9s ease, transform 6s ease; pointer-events: none; }
  .vslide.on { opacity: 1; transform: scale(1); pointer-events: auto; }
  .vslide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,14,16,.96) 0%, rgba(13,14,16,.82) 38%, rgba(13,14,16,.2) 72%, rgba(13,14,16,.05) 100%); }
  .vtext { position: relative; z-index: 1; height: 100%; max-width: 560px; padding: 56px 60px; display: flex; flex-direction: column; justify-content: center; }
  .vtext h2 { font: 600 38px/1.1 var(--display); letter-spacing: -.02em; margin: 12px 0 14px; }
  .vtext .grad { background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .vtext p { color: #c9c5bd; font-size: 16px; font-weight: 300; margin: 0 0 26px; max-width: 460px; }
  .vbtns { display: flex; gap: 10px; }
  .vbtns .btn { min-height: 48px; padding: 0 22px; }
  .vbtns .btn.primary { background: var(--accent-grad); border: 0; box-shadow: 0 10px 30px rgba(91,143,208,.2); }
  .vbtns .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .vbtns .btn:not(.primary) { background: rgba(13,14,16,.4); backdrop-filter: blur(8px); border-color: rgba(255,255,255,.18); }
  .vnav { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(13,14,16,.45);
    backdrop-filter: blur(8px); color: var(--text); font-size: 22px; cursor: pointer; opacity: 0; transition: opacity .25s; }
  .vitrine:hover .vnav, .vnav:focus-visible { opacity: 1; }
  .vnav.prev { left: 16px; } .vnav.next { right: 16px; }
  .vdots { position: absolute; z-index: 4; left: 60px; bottom: 26px; display: flex; gap: 8px; }
  .vdots button { width: 34px; height: 14px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; align-items: center; }
  .vdots i { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.22); transition: background .3s; }
  .vdots button.on i { background: var(--gold); }
}
@media (min-width: 1024px) { #view > .top:first-child { padding-right: 150px; } }
.combo-list { max-height: 300px; }
.combo-h { position: sticky; top: -4px; z-index: 1; padding: 8px 12px 6px; margin: 0 -4px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); background: var(--raised); }

/* selo no título das telas: fundo preto, contorno fino champanhe metálico, texto branco */
.top h2 { flex: 0 1 auto; margin-right: auto !important; position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 7px 18px 8px;
  border-radius: 999px; background: var(--pill-bg); color: #fff; font-size: 19px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); }
.top h2::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, #e6f0fb 0%, #4a82c4 30%, #12304f 52%, #1c4d7d 72%, #c2d8f2 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (min-width: 1024px) { .top h2 { font-size: 21px; padding: 8px 22px 9px; } }

/* home: blocos (no celular seguem a ordem do código; no computador, grade em faixas) */
@media (max-width: 1023px) { .desk-only { display: none !important; } }
.hb-actions .actgrid { display: grid; }
.hb-points .pointscard, .hb-club .clubmini, .hb-consult .consultant { margin-top: 12px; }
.hb-indique { margin-top: 28px; }
.hb-welcome { margin-top: 12px; }
@media (min-width: 1024px) {
  .mobile-only { display: none !important; }
  .home-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch;
    grid-template-areas: "next next club points" "act act act act" "mtitle mtitle rtitle rtitle" "maint maint consult consult" "maint maint indique indique" "welcome welcome welcome welcome"; }
  .hb-mtitle { grid-area: mtitle; } .hb-rtitle { grid-area: rtitle; }
  .hb-mtitle, .hb-rtitle { margin: 14px 0 -4px !important; align-self: end; }
  .hb-maint { display: flex; flex-direction: column; }
  .hb-maint .list, .hb-maint .card { flex: 1; margin: 0; }
  .hb-maint .list { display: flex; flex-direction: column; }
  .hb-maint .list > .item { flex: 1; }
  .hb-maint .card { display: flex; flex-direction: column; justify-content: center; }
  .hb-actions .actgrid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important; }
  .home-grid > .hb-hero, .home-grid > .quick { display: none; }
  .hb-next { grid-area: next; margin: 0; } .hb-club { grid-area: club; } .hb-points { grid-area: points; } .hb-actions { grid-area: act; }
  .hb-maint { grid-area: maint; } .hb-consult { grid-area: consult; } .hb-indique { grid-area: indique; margin: 0; } .hb-welcome { grid-area: welcome; margin: 0; }
  .hb-club, .hb-points, .hb-consult { display: flex; flex-direction: column; }
  .hb-club .clubmini, .hb-points .pointscard, .hb-consult .consultant { margin: 0; flex: 1; }
  .hb-next.next { display: flex; flex-direction: column; justify-content: center; }
  .hb-next .bd { padding: 22px 24px !important; }
  .hb-next h2 { font-size: 24px; }
  .empty-next { display: flex !important; flex-direction: column; justify-content: center; gap: 2px; color: var(--text); padding: 22px 24px; }
  .empty-next .btn { align-self: flex-start; margin-top: 12px; }
  .pointscard { display: flex; flex-direction: column; justify-content: space-between; }
  .pointscard .big { font-size: 38px; }
  .clubmini { justify-content: center; }
  .hb-actions .section-t { margin: 10px 0 10px; }
  .hb-actions .actgrid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
  .hb-actions .action { margin: 0; }
  .hb-consult .consultant { justify-content: center; }
  .hb-indique { min-height: 150px; }
}

/* áreas com foto continuam escuras nos dois temas */
.banner, .vitrine, .login .hero, .mcard { color: #edf1f6; }
.banner .muted, .vitrine .muted, .mcard .muted { color: rgba(237,241,246,.72); }
.vitrine .vtext p { color: #c9cfd8; }
.mcard { background: radial-gradient(520px 260px at 110% -20%, rgba(220,233,248,.22), transparent 60%), linear-gradient(135deg, #17263a 0%, #17181a 55%, #0f1012 100%); }
.mc-plan { color: rgba(237,241,246,.6); } .mc-foot small { color: rgba(237,241,246,.45); }
:root[data-theme="light"] .login .form { background: var(--bg); }
:root[data-theme="light"] .herocard .ph::after { background: linear-gradient(180deg, transparent 35%, var(--photo-fade)); }
@media (min-width: 1024px) { :root[data-theme="light"] .herocard .ph::after { background: linear-gradient(90deg, transparent 40%, var(--photo-fade)); } }
:root[data-theme="light"] .sw i { box-shadow: inset 0 -4px 8px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.12); }
:root[data-theme="light"] .qback { background: rgba(15,23,34,.35); }
.vitrine .vtext .grad, .login .grad { background: linear-gradient(90deg, #dce9f8, #5b8fd0 55%, #2f6aa8); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* botão de tema no topo */
#themeBtn svg { width: 18px; height: 18px; }
#themeBtn .sun { display: none; }
:root[data-theme="light"] #themeBtn .sun { display: block; }
:root[data-theme="light"] #themeBtn .moon { display: none; }
.mcard .mc-brand, .mcard .mc-plan b { color: #5b8fd0; }
/* logo do topo: branco no tema escuro, azul institucional no claro */
#appbar .logo, #tabs .side-brand { color: #ffffff; }
:root[data-theme="light"] #appbar .logo, :root[data-theme="light"] #tabs .side-brand { color: var(--gold); }

/* login */
.login .tabsel { margin-bottom: 16px; }
.gbtn { display: flex; justify-content: center; min-height: 44px; margin-bottom: 6px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; margin: 14px 0 16px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pw { position: relative; } .pw input { padding-right: 84px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--gold); font: 500 13px var(--sans); padding: 8px 10px; cursor: pointer; }
.lerr { color: var(--bad); font-size: 14px; margin: 10px 0 0; }
.complete { max-width: 420px; margin: 12dvh auto 0; }
.complete h1 { margin: 8px 0 10px; }

/* pagamento do clube */
.pixbox { display: flex; gap: 14px; align-items: center; }
.pixbox .qr { width: 144px; height: 144px; flex: none; background: #fff; border-radius: 12px; padding: 6px; display: grid; place-items: center; }
.pixbox .qr img, .pixbox .qr canvas { width: 132px !important; height: 132px !important; }
.billing { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 6px 0 2px; }
@media (max-width: 380px) { .pixbox { flex-direction: column; align-items: stretch; } .pixbox .qr { align-self: center; } }

/* tablet em pé: coluna mais larga */
@media (min-width: 700px) and (max-width: 1023px) {
  #view { max-width: 720px; padding-left: 24px; padding-right: 24px; }
  .nextbar .btn { max-width: 672px; }
  #fab, .qmenu { right: max(16px, calc(50vw - 336px)); }
}
/* celular deitado: barras mais baixas para sobrar tela */
@media (max-height: 500px) and (orientation: landscape) {
  #appbar { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
  #appbar:not(.hide) + #view { padding-top: 12px; }
  #tabs { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  #tabs a span { display: none; }
  #view { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  #fab { bottom: calc(60px + env(safe-area-inset-bottom)); }
  .qmenu { bottom: calc(126px + env(safe-area-inset-bottom)); }
  .sticky, .composer { bottom: calc(52px + env(safe-area-inset-bottom)); }
  .nextbar { bottom: calc(46px + env(safe-area-inset-bottom)); }
}

/* menu de baixo preso ao pé da tela (a variável --pin corrige o iPhone depois do teclado; ver pinBottom no app.js) */
#tabs, #fab, .nextbar, .qmenu { translate: 0 var(--pin, 0px); }
#tabs { transform: translateZ(0); will-change: transform; }
/* digitando: o teclado ocupa o pé da tela, então o menu e o botão + saem do caminho */
@media (max-width: 1023px) {
  body.typing #tabs, body.typing #fab { opacity: 0; pointer-events: none; transition: opacity .15s; }
  body.typing .sticky, body.typing .composer { bottom: 0; }
}

/* botão + não cobre o fim das listas e sai do caminho ao rolar para baixo */
@media (max-width: 1023px) {
  body:has(#quick:not(.hide)) #view { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  #fab { transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s; }
  body.scrolling-down:not(:has(#quick.open)) #fab { transform: translateY(24px) scale(.85); opacity: 0; pointer-events: none; }
  /* 5 itens no menu de baixo: o Clube fica no Início e no Perfil */
  #tabs a[data-tab="clube"] { display: none; }
}
/* resumo do agendamento só aparece quando há serviço escolhido */
.sticky.hide { display: none; }
.forwho { font-size: 13px; margin: 2px 0 12px; }
.forwho b { color: var(--text); font-weight: 600; }
.hb-maint .item .badge { flex: none; }
.hb-maint .gain { display: block; color: var(--gold); font-size: 12px; font-weight: 500; margin-top: 2px; }

/* Perfil: atalhos em grade de ícones com legenda (mesmo desenho dos ícones de serviço) */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; margin: 6px 0 22px; }
.pgrid a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; color: var(--text); min-width: 0; }
.pgrid .pi { position: relative; width: 76px; height: 76px; border-radius: 14px; background: var(--raised); display: grid; place-items: center; color: var(--gold); margin-bottom: 9px; transition: transform .15s; }
.pgrid a:active .pi { transform: scale(.95); }
.pgrid .pi::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--metal); opacity: .85;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.pgrid .pi > svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pgrid .pi > svg.dm { width: 36px; height: 28px; fill: currentColor; stroke: none; }
.pgrid .pi .n { position: absolute; top: -5px; right: -5px; z-index: 2; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gold); color: var(--on-accent); font: 700 11px/20px var(--sans); }
.pgrid b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.pgrid small { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pgrid small.val { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .pgrid { grid-template-columns: repeat(6, 1fr); max-width: 760px; } }
/* Ícones com volume (3D): luz de cima, brilho suave no topo, sombra embaixo e ícone em relevo.
   Vale para o Perfil, os atalhos do Início, o menu do +, os serviços, o prontuário e os botões do topo. */
.pgrid .pi, .quick .qi, .qmenu .qi, .svc .th, .svcicon, .iconbtn, .action .ic, .calico { position: relative; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -3px 6px rgba(0,0,0,.45), 0 10px 18px -6px rgba(0,0,0,.65), 0 2px 4px rgba(0,0,0,.4); }
.pgrid .pi, .quick .qi, .qmenu .qi, .iconbtn { background: radial-gradient(120% 90% at 30% 0%, #2a2e36 0%, #1a1c21 55%, #111216 100%); }
.iconbtn { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.4), 0 6px 12px -5px rgba(0,0,0,.6); }
.action .ic { background: radial-gradient(120% 100% at 30% 0%, #8fb6e6 0%, #5b8fd0 45%, #2f6aa8 100%); }
.action .ic::before { background: linear-gradient(180deg, rgba(255,255,255,.35), transparent); }
.calico, .action .ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.25), 0 8px 16px -6px rgba(28,77,125,.7); }
.pgrid .pi::before, .quick .qi::before, .qmenu .qi::before, .svc .th::before, .svcicon::before, .iconbtn::before, .action .ic::before, .calico::before {
  content: ''; position: absolute; inset: 1px 1px 45% 1px; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 55%, transparent 100%); }
.svc .th::before, .svcicon::before { background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.025) 55%, transparent 100%); }
.svc .th::after, .svcicon::after { z-index: 2; }
.pgrid .pi > svg, .quick .qi > svg, .qmenu .qi > svg, .iconbtn > svg, .svcicon > svg { filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(91,143,208,.35)); }
.svc .th, .svcicon img { filter: saturate(1.08) contrast(1.05); }
.pgrid a:active .pi, .quick a:active .qi, .qmenu a:active .qi, .svc:active .th, .iconbtn:active {
  transform: translateY(1px) scale(.97); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 3px rgba(0,0,0,.4), 0 4px 8px -4px rgba(0,0,0,.6); }
.quick .qi, .qmenu .qi, .svc .th, .iconbtn { transition: transform .15s, box-shadow .15s; }

:root[data-theme="light"] .pgrid .pi, :root[data-theme="light"] .quick .qi, :root[data-theme="light"] .qmenu .qi, :root[data-theme="light"] .iconbtn {
  background: radial-gradient(120% 90% at 30% 0%, #ffffff 0%, #eef2f7 60%, #e2e8f0 100%); }
:root[data-theme="light"] .pgrid .pi, :root[data-theme="light"] .quick .qi, :root[data-theme="light"] .qmenu .qi, :root[data-theme="light"] .svc .th, :root[data-theme="light"] .svcicon {
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 6px rgba(28,77,125,.10), 0 10px 18px -8px rgba(15,23,34,.28), 0 2px 4px rgba(15,23,34,.10); }
:root[data-theme="light"] .iconbtn { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(28,77,125,.08), 0 6px 12px -6px rgba(15,23,34,.25); }
:root[data-theme="light"] .pgrid .pi::before, :root[data-theme="light"] .quick .qi::before, :root[data-theme="light"] .qmenu .qi::before, :root[data-theme="light"] .iconbtn::before {
  background: linear-gradient(180deg, rgba(255,255,255,.8), transparent); }
:root[data-theme="light"] .pgrid .pi > svg, :root[data-theme="light"] .quick .qi > svg, :root[data-theme="light"] .qmenu .qi > svg, :root[data-theme="light"] .iconbtn > svg { filter: drop-shadow(0 2px 2px rgba(28,77,125,.22)); }

/* Menu de baixo flutuante (estilo Instagram): cápsula de vidro solta das bordas, presa ao pé da tela */
@media (max-width: 1023px) {
  #tabs { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); height: 64px; padding: 6px; gap: 2px; align-items: stretch;
    border: 0; border-radius: 32px;
    background: linear-gradient(180deg, rgba(40,44,52,.72), rgba(20,22,26,.78));
    backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.35), 0 14px 34px -8px rgba(0,0,0,.7), 0 3px 10px rgba(0,0,0,.35); }
  #tabs::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--metal); opacity: .9;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  #tabs a[data-tab] { position: relative; justify-content: center; gap: 2px; padding: 0; border-radius: 26px; font-size: 10px; letter-spacing: .02em; transition: background .2s, color .2s; }
  #tabs a[data-tab] svg { width: 24px; height: 24px; }
  /* item ativo: pílula de vidro atrás do ícone */
  #tabs a[data-tab].on { background: rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
  #tabs a[data-tab="agenda"] svg { width: 36px; height: 28px; margin-top: 0; }
  #tabs a[data-tab="agenda"].on { background: none; box-shadow: none; }
  /* conteúdo rola por baixo da cápsula; botões flutuantes ficam acima dela */
  #view { padding-bottom: calc(96px + max(12px, env(safe-area-inset-bottom))); }
  body:has(#quick:not(.hide)) #view { padding-bottom: calc(160px + max(12px, env(safe-area-inset-bottom))); }
  #fab { bottom: calc(76px + max(12px, env(safe-area-inset-bottom))); }
  .qmenu { bottom: calc(144px + max(12px, env(safe-area-inset-bottom))); }
  .sticky, .composer { bottom: calc(76px + max(12px, env(safe-area-inset-bottom))); }
  .nextbar { bottom: calc(66px + max(12px, env(safe-area-inset-bottom))); background: none; }
  body:has(.nextbar) #fab { bottom: calc(142px + max(12px, env(safe-area-inset-bottom))); }
  body:has(.nextbar) .qmenu { bottom: calc(210px + max(12px, env(safe-area-inset-bottom))); }
  body.typing .sticky, body.typing .composer { bottom: 0; }
}
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  #tabs { height: 52px; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); }
  #fab { bottom: calc(64px + max(8px, env(safe-area-inset-bottom))); }
}
:root[data-theme="light"] #tabs { background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(240,244,249,.82)); }
@media (max-width: 1023px) {
  :root[data-theme="light"] #tabs { box-shadow: inset 0 1px 0 #fff, 0 14px 30px -10px rgba(15,23,34,.35), 0 2px 8px rgba(15,23,34,.10); }
  :root[data-theme="light"] #tabs a[data-tab].on { background: rgba(28,77,125,.08); }
}