:root {
  --void: #050310;
  --void2: #0c0818;
  --void3: #140c24;
  --mauve: #caacea;
  --mauve-glow: rgba(202, 172, 234, .34);
  --rose: #f4b4cc;
  --rose-d: #da649e;
  --rose-glow: rgba(244, 180, 204, .28);
  --peach: #f8d0aa;
  --lime: #86f2aa;
  --amber: #f9da62;
  --red: #f89292;
  --glass: rgba(255, 255, 255, .038);
  --glass2: rgba(255, 255, 255, .065);
  --glass3: rgba(255, 255, 255, .1);
  --glass4: rgba(255, 255, 255, .15);
  --border: rgba(255, 255, 255, .055);
  --border2: rgba(202, 172, 234, .26);
  --border3: rgba(244, 180, 204, .42);
  --t1: #f8f2ff;
  --t2: #d4c0ec;
  --t3: #8e7cb0;
  --r1: 10px;
  --r2: 16px;
  --r3: 22px;
  --r4: 32px;
  --shc: 0 6px 36px rgba(0, 0, 0, .5);
  --shf: 0 32px 90px rgba(0, 0, 0, .7);
  --shr: 0 8px 36px rgba(218, 100, 158, .56);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --bounce: cubic-bezier(.68, -.55, .27, 1.55)
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: scroll
}

html::-webkit-scrollbar {
  width: 3px
}

html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--mauve), var(--rose), var(--peach), var(--rose-d));
  border-radius: 3px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--rose) 50%, transparent);
}

html::-webkit-scrollbar-track {
  background: transparent
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--void);
  color: var(--t1);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.58
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 80% at 0% -10%, rgba(202, 172, 234, .26) 0%, transparent 50%),
    radial-gradient(ellipse 70% 65% at 100% 110%, rgba(218, 100, 158, .22) 0%, transparent 50%),
    radial-gradient(ellipse 55% 48% at 50% 60%, rgba(244, 180, 204, .11) 0%, transparent 58%),
    radial-gradient(ellipse 35% 30% at 15% 90%, rgba(134, 242, 170, .08) 0%, transparent 55%),
    radial-gradient(ellipse 28% 24% at 85% 10%, rgba(249, 218, 98, .06) 0%, transparent 60%),
    radial-gradient(ellipse 20% 18% at 40% 20%, rgba(202, 172, 234, .06) 0%, transparent 55%);
  animation: nebula6 22s ease-in-out infinite alternate
}

@keyframes nebula6 {
  0% {
    transform: scale(1) rotate(0) translateX(0);
    opacity: .95
  }

  25% {
    transform: scale(1.04) rotate(.5deg) translateX(4px);
    opacity: .75
  }

  55% {
    transform: scale(.97) rotate(-.4deg) translateX(-3px);
    opacity: .9
  }

  80% {
    transform: scale(1.02) rotate(.3deg) translateX(2px);
    opacity: .82
  }

  100% {
    transform: scale(1) rotate(-.2deg) translateX(0);
    opacity: .95
  }
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(202, 172, 234, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(202, 172, 234, .022) 1px, transparent 1px),
    linear-gradient(rgba(202, 172, 234, .01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(202, 172, 234, .01) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 18%, transparent 100%)
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  overflow-x: hidden
}

.screen {
  display: none;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  animation: screenIn .44s var(--ease) both
}

.screen.active {
  display: flex;
}

@keyframes screenIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.986)
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

.header {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 0 20px;
  height: 66px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: color-mix(in srgb, var(--void) 74%, transparent);
  backdrop-filter: blur(40px) saturate(2.2) brightness(.9);
  -webkit-backdrop-filter: blur(40px) saturate(2.2) brightness(.9);
  border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(202, 172, 234, .5) 20%,
      rgba(244, 180, 204, 1) 48%,
      rgba(248, 208, 170, .8) 65%,
      rgba(202, 172, 234, .5) 80%,
      transparent 100%);
  opacity: .7
}

.header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 2%, var(--border2) 28%, var(--border2) 72%, transparent 98%);
  opacity: .35
}

.hbk {
  width: 42px;
  height: 42px;
  background: var(--glass2);
  border: 1px solid var(--border);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--mauve);
  transition: all .26s var(--ease);
  flex-shrink: 0;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08)
}

.hbk:hover {
  background: var(--glass3);
  border-color: var(--border2);
  transform: translateX(-4px) scale(1.08);
  color: var(--rose);
  box-shadow: 0 0 28px color-mix(in srgb, var(--mauve) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .14)
}

.htitle {
  font-family: 'Tenor Sans', serif;
  font-size: 20px;
  letter-spacing: .05em;
  color: var(--t1);
  line-height: 1.2
}

.hsub {
  font-size: 11px;
  color: var(--t3);
  letter-spacing: .1em;
  font-weight: 500
}

.sb {
  flex: 1;
  overflow-x: hidden;
  padding: 24px 16px 120px;
  max-width: 500px;
  width: 100%;
  margin: 0 auto
}

.sb::-webkit-scrollbar {
  width: 2px
}

.sb::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--mauve), var(--rose), var(--peach), var(--rose));
  border-radius: 2px
}

.sb::-webkit-scrollbar-track {
  background: transparent
}

.hero {
  position: relative;
  background: linear-gradient(152deg, var(--void2) 0%, var(--void3) 100%);
  border: 1px solid var(--border2);
  border-radius: 42px;
  padding: 36px 28px 32px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--sh-hero),
    0 2px 0 rgba(255, 255, 255, .08) inset,
    0 -2px 0 rgba(0, 0, 0, .35) inset,
    0 0 100px rgba(202, 172, 234, .07) inset
}

.hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, rgba(202, 172, 234, .2), rgba(218, 100, 158, .15), rgba(244, 180, 204, .18), rgba(202, 172, 234, .2));
  filter: blur(40px);
  animation: heroOrbeRotate 12s linear infinite
}

@keyframes heroOrbeRotate {
  0% {
    transform: rotate(0) scale(1)
  }

  50% {
    transform: rotate(180deg) scale(1.12)
  }

  100% {
    transform: rotate(360deg) scale(1)
  }
}

.hero-stats::before {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -40px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rose) 20%, transparent) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  animation: heroOrb2 10s ease-in-out infinite reverse
}

@keyframes heroOrb2 {

  0%,
  100% {
    transform: translate(0, 0) scale(1)
  }

  50% {
    transform: translate(16px, -10px) scale(1.18)
  }
}

/* Linha de luz */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 4%;
  right: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent)
}

.hero-ey {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 20px;
  position: relative;
  z-index: 1
}

.hero-ey span {
  width: 26px;
  height: 1px;
  background: currentColor;
  display: block;
  opacity: .5
}

.hero-nm {
  font-family: 'Tenor Sans', serif;
  font-size: 38px;
  letter-spacing: .01em;
  color: var(--t1);
  line-height: 1.03;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .5)
}

.hero-nm em {
  color: var(--rose);
  font-style: normal
}

.hero-dt {
  font-size: 12px;
  color: var(--t3);
  font-weight: 300;
  margin-bottom: 30px;
  letter-spacing: .07em;
  position: relative;
  z-index: 1
}

.hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
  z-index: 1
}

.hst {
  background: var(--hst-bg, rgba(255, 255, 255, .032));
  border: 1px solid var(--hst-border, rgba(255, 255, 255, .065));
  border-radius: 24px;
  padding: 17px 18px;
  transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .1)
}

.hst::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, .04) 0%, transparent 60%);
  pointer-events: none
}

.hst::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent)
}

.hst:hover {
  border-color: var(--border2);
  background: rgba(255, 255, 255, .062);
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .14)
}

.hst-v {
  font-family: 'Tenor Sans', serif;
  font-size: 32px;
  line-height: 1;
  margin-bottom: 5px;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--t1), var(--mauve));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hst-l {
  font-size: 9px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700
}

.ngrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px
}

.nc {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 26px 20px;
  cursor: pointer;
  transition: all .32s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 22px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06)
}

/* Gradiente de luz topo */
.nc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent)
}

/* Glow fill hover */
.nc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 80% at 30% 30%, var(--rose-glow), transparent 65%);
  opacity: 0;
  transition: opacity .35s
}

.nc:hover {
  border-color: var(--border2);
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 22px 56px rgba(0, 0, 0, .48), 0 0 0 1px var(--border2), inset 0 1px 0 rgba(255, 255, 255, .1)
}

.nc:hover::after {
  opacity: 1
}

.nc:active {
  transform: scale(.94);
  box-shadow: none
}

.nc-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: var(--glass3);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: all .32s var(--spring);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 14px rgba(0, 0, 0, .3)
}

.nc:hover .nc-icon {
  transform: scale(1.18) rotate(-7deg);
  border-color: var(--border3);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--rose) 36%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22)
}

.nc-lbl {
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
  position: relative;
  z-index: 1;
  letter-spacing: .02em
}

.nc-sub {
  font-size: 11px;
  color: var(--t3);
  position: relative;
  z-index: 1;
  font-weight: 300;
  margin-top: -9px
}

.stl {
  font-family: 'Tenor Sans', serif;
  font-size: 19px;
  color: var(--t1);
  letter-spacing: .06em;
  margin-bottom: 15px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.stl::before {
  content: '';
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--mauve), var(--rose));
  flex-shrink: 0
}

.stl::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border2) 0%, transparent 70%)
}

.card {
  background: var(--void2);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: 20px 22px;
  margin-bottom: 10px;
  box-shadow: var(--sh-card), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: cardIn .44s var(--ease) both;
  transition: border-color .26s, transform .18s, box-shadow .26s;
  position: relative
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: var(--r3) var(--r3) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent)
}

@keyframes cardIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(.993)
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

.card:hover {
  border-color: var(--border2);
  box-shadow: var(--sh-card-h), 0 0 0 1px rgba(202, 172, 234, .12), inset 0 1px 0 rgba(255, 255, 255, .09);
  transform: translateY(-3px)
}

.card:active {
  transform: scale(.985)
}

.crow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px
}

.cav {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--rose-d), var(--mauve));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Tenor Sans', serif;
  font-size: 20px;
  color: white;
  box-shadow: var(--shr), inset 0 1px 0 rgba(255, 255, 255, .38)
}

.cinf {
  flex: 1;
  min-width: 0
}

.cnm {
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px
}

.cmt {
  font-size: 12px;
  color: var(--t3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 300
}

.cobs {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r1);
  padding: 7px 12px;
  font-size: 12px;
  color: var(--t3);
  font-style: italic;
  margin-top: 8px
}

.cact {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border)
}

.nsbadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
  background: rgba(240, 128, 128, .13);
  color: var(--red);
  border: 1px solid rgba(240, 128, 128, .3)
}

.cbadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
  background: rgba(249, 218, 98, .11);
  color: var(--amber);
  border: 1px solid rgba(249, 218, 98, .3)
}

.acard {
  contain: layout style paint;
  will-change: transform;
  background: var(--void2);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--sh-card), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: cardIn .44s var(--ease) both;
  transition: border-color .26s, transform .18s, box-shadow .26s
}

.acard:hover {
  border-color: var(--border2);
  box-shadow: var(--sh-card-h, var(--sh-card-h));
  transform: translateY(-3px)
}

.ag-dense .acard {
  animation: none !important;
}

.ag-dense .acard:hover {
  transform: none !important;
  box-shadow: var(--sh-card), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.ag-dense .acard::after {
  display: none !important;
}

.ag-dense .astripe::after {
  display: none !important;
}

.ag-dense .pill .clock-min,
.ag-dense .pill .clock-hr {
  animation: none !important;
}

.ag-ph {
  background: transparent;
}

.acard:active {
  transform: scale(.985)
}

.astripe {
  height: 4px;
  background: linear-gradient(90deg, var(--rose-d), var(--mauve), var(--peach))
}

.acard.st-concluido .astripe {
  background: linear-gradient(90deg, #0b5230, #18a060, var(--lime))
}

.acard.st-cancelado .astripe {
  background: linear-gradient(90deg, #583808, #c08828, var(--amber))
}

.acard.st-nao_apareceu .astripe {
  background: linear-gradient(90deg, #720e1c, #c82038, var(--red))
}

.abody {
  padding: 18px 20px
}

.atop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 10px
}

.atime {
  font-family: 'Tenor Sans', serif;
  font-size: 40px;
  color: var(--rose);
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -.03em
}

.acard.st-concluido .atime {
  color: var(--lime)
}

.acard.st-cancelado .atime {
  color: var(--amber)
}

.acard.st-nao_apareceu .atime {
  color: var(--red)
}

.aclient {
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 3px
}

.aservice {
  font-size: 12px;
  color: var(--t3)
}

.aobs {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r1);
  padding: 7px 10px;
  font-size: 11px;
  color: var(--t3);
  font-style: italic;
  margin-top: 8px
}

.afoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--border)
}

.aprice {
  font-family: 'Tenor Sans', serif;
  font-size: 28px;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--t1), var(--t2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.aacts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px
}

.noshow-alert {
  background: rgba(240, 128, 128, .08);
  border: 1px solid rgba(240, 128, 128, .2);
  border-radius: var(--r2);
  padding: 11px 13px;
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 9px
}

.noshow-alert-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center
}

.noshow-alert-ico svg {
  width: 16px;
  height: 16px
}

.noshow-alert-txt {
  font-size: 12px;
  color: var(--red);
  font-weight: 600;
  line-height: 1.5
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap
}

.p-rose {
  background: color-mix(in srgb, var(--rose-d) 16%, transparent);
  color: var(--rose);
  border: 1px solid color-mix(in srgb, var(--rose-d) 34%, transparent)
}

/* ── Ponteiros do relógio — Agendado ── */
.p-rose .clock-min,
.p-orange .clock-min,
.p-rose .clock-hr,
.p-orange .clock-hr {
  transform-origin: 7px 7px
}

.p-rose .clock-min,
.p-orange .clock-min {
  animation: clockSpin 14s linear infinite
}

.p-rose .clock-hr,
.p-orange .clock-hr {
  animation: clockSpin 36s linear infinite
}

.p-orange .clock-min {
  animation-duration: 2.8s
}

.p-orange .clock-hr {
  animation-duration: 7.2s
}

@keyframes clockSpin {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

/* ── Concluído — check se desenha em loop ── */
.p-green svg path {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  animation: checkDraw 2.4s ease-in-out infinite
}

@keyframes checkDraw {
  0% {
    stroke-dashoffset: 18;
    opacity: .4
  }

  40%,
  75% {
    stroke-dashoffset: 0;
    opacity: 1
  }

  100% {
    stroke-dashoffset: 18;
    opacity: .4
  }
}

/* ── Cancelado — X balança ── */
.p-amber svg path {
  transform-origin: 7px 7px;
  animation: xShake 3s ease-in-out infinite
}

@keyframes xShake {

  0%,
  100% {
    transform: rotate(0) scale(1)
  }

  18% {
    transform: rotate(20deg) scale(1.12)
  }

  36% {
    transform: rotate(-18deg) scale(1.08)
  }

  52% {
    transform: rotate(12deg) scale(1.05)
  }

  66% {
    transform: rotate(-8deg) scale(1.02)
  }

  78% {
    transform: rotate(4deg) scale(1)
  }

  88% {
    transform: rotate(-2deg) scale(1)
  }
}

/* ── Não apareceu — boneco some e volta ── */
.p-red .ghost-head,
.p-red .ghost-body {
  transform-origin: 7px 7px;
  animation: ghostPulse 2.8s ease-in-out infinite
}

.p-red .ghost-body {
  animation-delay: .08s
}

@keyframes ghostPulse {

  0%,
  100% {
    transform: scale(1) translateY(0);
    opacity: 1
  }

  35% {
    transform: scale(1.18) translateY(-1px);
    opacity: .6
  }

  60% {
    transform: scale(.88) translateY(1px);
    opacity: .35
  }

  80% {
    transform: scale(1.06) translateY(0);
    opacity: .8
  }
}

.p-green {
  background: rgba(134, 242, 170, .14);
  color: var(--lime);
  border: 1px solid rgba(134, 242, 170, .32)
}

.p-gray {
  background: var(--glass);
  color: var(--t3);
  border: 1px solid var(--border)
}

.p-red {
  background: rgba(240, 128, 128, .14);
  color: var(--red);
  border: 1px solid rgba(240, 128, 128, .32)
}

.p-amber {
  background: rgba(249, 218, 98, .12);
  color: var(--amber);
  border: 1px solid rgba(249, 218, 98, .32)
}

.p-mauve {
  background: color-mix(in srgb, var(--mauve) 16%, transparent);
  color: var(--mauve);
  border: 1px solid color-mix(in srgb, var(--mauve) 34%, transparent)
}

.p-orange {
  background: rgba(255, 168, 64, .12);
  color: #ffba80;
  border: 1px solid rgba(255, 168, 64, .32)
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .24s var(--ease);
  letter-spacing: .05em;
  min-height: 38px;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent);
  border-radius: inherit;
  pointer-events: none
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background .18s;
  border-radius: inherit;
  pointer-events: none
}

.btn:hover::after {
  background: rgba(255, 255, 255, .04)
}

.btn:active {
  transform: scale(.91)
}

.btn-p {
  background: linear-gradient(150deg, var(--rose-d), color-mix(in srgb, var(--rose-d) 55%, var(--mauve)));
  color: white;
  box-shadow: var(--shr), inset 0 1px 0 rgba(255, 255, 255, .26)
}

.btn-p:hover {
  filter: brightness(1.16);
  transform: translateY(-3px);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--rose-d) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28)
}

.btn-g {
  background: var(--glass2);
  color: var(--t2);
  border-color: var(--border)
}

.btn-g:hover {
  background: var(--glass3);
  border-color: var(--border2);
  color: var(--t1);
  transform: translateY(-1px)
}

.btn-d {
  background: rgba(240, 128, 128, .1);
  color: var(--red);
  border-color: rgba(240, 128, 128, .24)
}

.btn-d:hover {
  background: rgba(240, 128, 128, .22);
  border-color: rgba(240, 128, 128, .42)
}

.btn-wa {
  background: linear-gradient(135deg, #26d96a, #0e9848);
  color: white;
  box-shadow: 0 6px 26px rgba(38, 217, 106, .42), inset 0 1px 0 rgba(255, 255, 255, .24)
}

.btn-wa:hover {
  filter: brightness(1.12);
  transform: translateY(-2px)
}

.btn-pix {
  background: linear-gradient(135deg, #30d0c0, #128878);
  color: white;
  box-shadow: 0 6px 26px rgba(48, 208, 192, .4), inset 0 1px 0 rgba(255, 255, 255, .24)
}

.btn-pix:hover {
  filter: brightness(1.12);
  transform: translateY(-2px)
}

.btn-pix svg {
  fill: #fff;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .3))
}

.btn-sm {
  padding: 7px 13px;
  font-size: 11px;
  min-height: 30px;
  border-radius: 11px
}

.btn-ico {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 11px
}

.fab {
  position: fixed;
  bottom: 28px;
  right: 18px;
  width: 62px;
  height: 62px;
  border-radius: 22px;
  border: none;
  background: linear-gradient(148deg, var(--rose-d), var(--mauve));
  color: white;
  font-size: 26px;
  cursor: pointer;
  box-shadow: var(--shf), inset 0 1px 0 rgba(255, 255, 255, .32);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .32s var(--spring)
}

.fab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), transparent);
  border-radius: inherit;
  pointer-events: none
}

.fab:hover {
  transform: scale(1.16) rotate(90deg);
  box-shadow: 0 28px 80px color-mix(in srgb, var(--rose-d) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35)
}

.fab:active {
  transform: scale(.87)
}

.fg {
  margin-bottom: 18px
}

.fl {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 8px
}

.fi {
  width: 100%;
  padding: 14px 17px;
  background: var(--glass);
  border: 1.5px solid var(--border);
  border-radius: var(--r2);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  color: var(--t1);
  transition: border-color .24s, box-shadow .24s, background .24s;
  -webkit-appearance: none;
  appearance: none;
  outline: none
}

.fi:focus {
  border-color: var(--mauve);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mauve) 20%, transparent), 0 6px 24px rgba(0, 0, 0, .28);
  background: var(--glass2)
}

.fi::placeholder {
  color: var(--t3);
  font-weight: 300
}

.fi option {
  background: var(--void2);
  color: var(--t1)
}

select.fi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e7cb0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 38px
}

.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.fhint {
  font-size: 11px;
  color: var(--t3);
  margin-top: 5px;
  font-style: italic;
  font-weight: 300
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .86);
  backdrop-filter: blur(18px) saturate(.65);
  -webkit-backdrop-filter: blur(18px) saturate(.65);
  z-index: 100;
  overflow-x: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .34s var(--ease)
}

.overlay.open {
  opacity: 1;
  pointer-events: all
}

.drawer {
  background: linear-gradient(192deg, var(--void2) 0%, color-mix(in srgb, var(--void) 78%, var(--void2)) 100%);
  border: 1px solid var(--border2);
  border-top: 2px solid color-mix(in srgb, var(--mauve) 52%, transparent);
  border-radius: 48px 48px 0 0;
  padding: 8px 24px 60px;
  width: 100%;
  max-width: 500px;
  max-height: 93vh;
  overflow-x: hidden;
  overflow-y: hidden;
  transform: translateY(100%);
  transition: transform .44s var(--spring);
  box-shadow: 0 -22px 80px rgba(0, 0, 0, .62), inset 0 2px 0 rgba(202, 172, 234, .12)
}

.overlay.open .drawer {
  transform: translateY(0)
}

.drawer::-webkit-scrollbar {
  width: 2px
}

.drawer::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--mauve), var(--rose));
  border-radius: 2px;
  margin-top: 48px
}

.drawer::-webkit-scrollbar-track {
  background: transparent;
  margin-top: 48px
}

.dhandle {
  width: 52px;
  height: 5px;
  background: linear-gradient(90deg, var(--mauve), var(--rose), var(--peach), var(--rose), var(--mauve));
  border-radius: 3px;
  margin: 15px auto 30px;
  opacity: .5;
  animation: handlePulse 3.5s ease-in-out infinite
}

@keyframes handlePulse {

  0%,
  100% {
    opacity: .35;
    transform: scaleX(1)
  }

  50% {
    opacity: .7;
    transform: scaleX(1.06)
  }
}

.dtitle {
  font-family: 'Tenor Sans', serif;
  font-size: 25px;
  letter-spacing: .04em;
  margin-bottom: 26px;
  background: linear-gradient(135deg, var(--t1), var(--mauve));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.dfoot {
  display: flex;
  gap: 10px;
  margin-top: 28px
}

.dfoot .btn {
  flex: 1;
  padding: 16px;
  font-size: 14px;
  border-radius: 20px;
  min-height: 52px
}

.asheet {
  background: linear-gradient(192deg, var(--void2) 0%, color-mix(in srgb, var(--void) 78%, var(--void2)) 100%);
  border: 1px solid var(--border2);
  border-top: 2px solid color-mix(in srgb, var(--mauve) 52%, transparent);
  border-radius: 48px 48px 0 0;
  padding: 8px 24px 60px;
  width: 100%;
  max-width: 500px;
  transform: translateY(100%);
  transition: transform .44s var(--spring);
  box-shadow: 0 -22px 80px rgba(0, 0, 0, .62), inset 0 2px 0 rgba(202, 172, 234, .12)
}

.overlay.open .asheet {
  transform: translateY(0)
}

.as-title {
  font-family: 'Tenor Sans', serif;
  font-size: 22px;
  color: var(--t1);
  letter-spacing: .04em;
  margin-bottom: 7px
}

.as-sub {
  font-size: 13px;
  color: var(--t3);
  font-weight: 300;
  margin-bottom: 26px;
  line-height: 1.65
}

.aso {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--glass);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 16px 19px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all .28s var(--ease);
  position: relative;
  overflow: hidden
}

.aso::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent)
}

.aso::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 70% at 20% 50%, var(--rose-glow), transparent 65%);
  opacity: 0;
  transition: opacity .28s
}

.aso:hover {
  border-color: var(--border2);
  transform: translateX(7px);
  box-shadow: 4px 0 18px rgba(0, 0, 0, .2)
}

.aso:hover::after {
  opacity: 1
}

.aso:active {
  transform: scale(.97)
}

.aso-ico {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12)
}

.ico-g {
  background: rgba(134, 242, 170, .12)
}

.ico-r {
  background: rgba(240, 128, 128, .12)
}

.ico-a {
  background: rgba(249, 218, 98, .1)
}

.ico-ro {
  background: color-mix(in srgb, var(--rose-d) 14%, transparent)
}

.ico-m {
  background: color-mix(in srgb, var(--mauve) 14%, transparent)
}

.ico-mv {
  background: color-mix(in srgb, var(--mauve) 18%, transparent)
}

.aso-lbl {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 3px
}

.aso-desc {
  font-size: 12px;
  color: var(--t3);
  font-weight: 300
}

.conf {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  backdrop-filter: blur(24px) saturate(.55);
  -webkit-backdrop-filter: blur(24px) saturate(.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s
}

.conf.open {
  opacity: 1;
  pointer-events: all
}

.cbox {
  background: linear-gradient(155deg, var(--void2), var(--void3));
  border: 1px solid var(--border2);
  border-radius: 42px;
  padding: 36px 28px;
  width: 100%;
  max-width: 320px;
  transform: scale(.82) translateY(32px);
  transition: transform .36s var(--spring);
  box-shadow: var(--shf), inset 0 1px 0 rgba(255, 255, 255, .09)
}

.conf.open .cbox {
  transform: scale(1) translateY(0)
}

.cbox h3 {
  font-family: 'Tenor Sans', serif;
  font-size: 24px;
  color: var(--t1);
  margin-bottom: 11px;
  letter-spacing: .03em
}

.cbox p {
  font-size: 13px;
  color: var(--t3);
  margin-bottom: 28px;
  line-height: 1.75;
  font-weight: 300
}

.cbtns {
  display: flex;
  gap: 10px
}

.cbtns .btn {
  flex: 1;
  border-radius: 18px;
  min-height: 48px
}

#toasts {
  position: fixed;
  bottom: 100px;
  left: 0;
  right: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none
}

.toast {
  background: color-mix(in srgb, var(--void2) 84%, white);
  border: 1px solid var(--border2);
  color: var(--t1);
  padding: 14px 28px;
  border-radius: 34px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .03em;
  box-shadow: var(--shf), inset 0 1px 0 rgba(255, 255, 255, .09);
  backdrop-filter: blur(28px) saturate(1.6);
  animation: tPop .38s var(--spring) both
}

.toast.ok {
  background: rgba(5, 52, 28, .72);
  border-color: rgba(134, 242, 170, .4);
  color: var(--lime)
}

.toast.err {
  background: rgba(72, 5, 16, .72);
  border-color: rgba(240, 128, 128, .4);
  color: var(--red)
}

@keyframes tPop {
  from {
    opacity: 0;
    transform: scale(.7) translateY(22px);
    filter: blur(4px)
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0)
  }
}

@keyframes tOut {
  to {
    opacity: 0;
    transform: scale(.82) translateY(-18px);
    filter: blur(3px)
  }
}

.sw {
  position: relative;
  margin-bottom: 16px
}

.si {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--t3)
}

.sw .fi {
  padding-left: 42px
}

.dnav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 9px 13px;
  margin-bottom: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04)
}

.db {
  width: 36px;
  height: 36px;
  background: var(--glass2);
  border: 1px solid var(--border);
  border-radius: 13px;
  cursor: pointer;
  color: var(--mauve);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .22s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06)
}

.db:hover {
  background: var(--glass3);
  border-color: var(--border2);
  color: var(--rose);
  transform: scale(1.14)
}

input[type="date"].fid {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
  outline: none;
  cursor: pointer
}

.dtdy {
  background: color-mix(in srgb, var(--mauve) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--mauve) 32%, transparent);
  border-radius: 12px;
  padding: 6px 13px;
  font-size: 10px;
  font-weight: 700;
  color: var(--mauve);
  cursor: pointer;
  letter-spacing: .08em;
  flex-shrink: 0;
  transition: all .22s
}

.dtdy:hover {
  background: color-mix(in srgb, var(--mauve) 30%, transparent);
  color: var(--t1)
}

.fhero {
  background: linear-gradient(152deg, var(--void2), var(--void3));
  border: 1px solid var(--border2);
  border-radius: 42px;
  padding: 32px 28px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-hero, var(--sh-hero)), inset 0 1px 0 rgba(255, 255, 255, .08)
}

.fhero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, rgba(202, 172, 234, .18), rgba(218, 100, 158, .14), rgba(244, 180, 204, .16), rgba(202, 172, 234, .18));
  filter: blur(35px);
  animation: heroOrbeRotate 14s linear infinite
}

.fhero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 4%;
  right: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent)
}

.ftag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 10px
}

.fval {
  font-family: 'Tenor Sans', serif;
  font-size: 50px;
  color: var(--t1);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -.03em
}

.fsub {
  font-size: 12px;
  color: var(--t3);
  font-weight: 300
}

.fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px
}

.fmini {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 18px 16px;
  text-align: center;
  transition: all .26s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06)
}

.fmini:hover {
  border-color: var(--border2);
  background: var(--glass2);
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .09)
}

.fmv {
  font-family: 'Tenor Sans', serif;
  font-size: 32px;
  color: var(--rose);
  line-height: 1;
  margin-bottom: 5px;
  letter-spacing: -.01em
}

.fml {
  font-size: 9px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700
}

.mnav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 9px 13px;
  margin-bottom: 18px
}

.mnb {
  width: 36px;
  height: 36px;
  background: var(--glass2);
  border: 1px solid var(--border);
  border-radius: 13px;
  cursor: pointer;
  color: var(--mauve);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .22s
}

.mnb:hover {
  background: var(--glass3);
  border-color: var(--border2);
  color: var(--rose);
  transform: scale(1.14)
}

.mnl {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--t1)
}

.svbar {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 14px 17px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  transition: all .24s
}

.svbar:hover {
  border-color: var(--border2);
  background: var(--glass2);
  transform: translateX(6px);
  box-shadow: 3px 0 18px rgba(0, 0, 0, .2)
}

.svbn {
  font-size: 14px;
  font-weight: 600;
  color: var(--t1)
}

.svbc {
  font-size: 11px;
  color: var(--t3);
  margin-top: 2px;
  font-weight: 300
}

.svbv {
  font-family: 'Tenor Sans', serif;
  font-size: 23px;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--rose), var(--peach));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.fitem {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 13px 17px;
  margin-bottom: 7px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  border-left: 3px solid var(--rose-d);
  transition: all .22s
}

.fitem:hover {
  background: var(--glass2);
  transform: translateX(5px);
  box-shadow: 3px 0 16px rgba(0, 0, 0, .2)
}

.fitem.st-concluido {
  border-left-color: var(--lime)
}

.fitem.st-cancelado {
  border-left-color: var(--amber);
  opacity: .72
}

.fitem.st-nao_apareceu {
  border-left-color: var(--red);
  opacity: .78
}

.fin {
  font-size: 13px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 2px
}

.fis {
  font-size: 11px;
  color: var(--t3);
  font-weight: 300
}

.fiv {
  font-family: 'Tenor Sans', serif;
  font-size: 23px;
  color: var(--t1);
  white-space: nowrap;
  text-align: right
}

.empty {
  text-align: center;
  padding: 62px 20px
}

.emj {
  width: 76px;
  height: 76px;
  margin: 0 auto 24px;
  opacity: .36;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rose);
  filter: drop-shadow(0 0 28px color-mix(in srgb, var(--rose) 42%, transparent));
  animation: emjOrbit 4s ease-in-out infinite
}

@keyframes emjOrbit {

  0%,
  100% {
    transform: translateY(0) rotate(0) scale(1)
  }

  30% {
    transform: translateY(-10px) rotate(4deg) scale(1.04)
  }

  65% {
    transform: translateY(-5px) rotate(-2deg) scale(.98)
  }
}

.emj svg {
  width: 76px;
  height: 76px
}

.et {
  font-family: 'Tenor Sans', serif;
  font-size: 20px;
  color: var(--t3);
  margin-bottom: 8px;
  letter-spacing: .05em
}

.es {
  font-size: 13px;
  color: var(--t3);
  font-weight: 300;
  opacity: .58
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px
}

.spin {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--mauve);
  border-right-color: color-mix(in srgb, var(--rose) 75%, transparent);
  border-bottom-color: color-mix(in srgb, var(--peach) 30%, transparent);
  animation: spinning .58s linear infinite
}

@keyframes spinning {
  to {
    transform: rotate(360deg)
  }
}

@media (min-width:500px) {
  .sb {
    padding: 26px 22px 120px
  }
}

.logout-btn {
  margin-left: auto;
  position: relative;
  z-index: 10;
  background: color-mix(in srgb, var(--rose) 13%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--rose) 46%, transparent);
  border-radius: 14px;
  color: var(--rose);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  padding: 9px 17px;
  cursor: pointer !important;
  pointer-events: all !important;
  transition: all .26s var(--ease);
  white-space: nowrap;
  gap: 7px;
  display: inline-flex;
  align-items: center;
  box-shadow: var(--shr), inset 0 1px 0 rgba(255, 255, 255, .11)
}

.logout-btn svg {
  width: 14px;
  height: 14px;
  transition: transform .28s var(--spring)
}

.logout-btn:hover {
  background: color-mix(in srgb, var(--rose) 26%, transparent);
  border-color: var(--rose);
  box-shadow: 0 10px 38px color-mix(in srgb, var(--rose) 48%, transparent), inset 0 1px 0 rgba(255, 255, 255, .16)
}

.logout-btn:hover svg {
  transform: translateX(6px)
}

.logout-btn:active {
  transform: scale(.89)
}

.st-em_atraso .astripe {
  background: linear-gradient(90deg, #882e00, #dd6e10, var(--amber))
}

.st-reagendado .astripe {
  background: linear-gradient(90deg, var(--mauve), #7040c8, #a868f8)
}

.swal-popup {
  border-radius: 36px !important;
  border: 1px solid var(--border2) !important;
  font-family: 'Outfit', sans-serif !important;
  box-shadow: 0 6px 32px rgba(0, 0, 0, .22), 0 1px 6px rgba(0, 0, 0, .12) !important;
  background: var(--void2) !important;
  color: var(--t1) !important
}

/* ── Toast Swal: sombra ainda mais discreta + cor herdada ── */
.swal2-toast.swal-popup {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .18), 0 1px 4px rgba(0, 0, 0, .1) !important
}

.swal2-toast.swal-popup .swal2-title {
  color: var(--t1) !important
}

.swal2-toast.swal-popup .swal2-icon {
  border-color: inherit
}

.swal-btn-confirm,
.swal-btn-cancel {
  border-radius: 14px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 13px 30px !important
}

.btn-booking-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: color-mix(in srgb, var(--rose) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--rose) 34%, transparent);
  border-radius: var(--r2);
  padding: 14px 19px;
  margin-bottom: 14px;
  color: var(--rose);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .05em;
  transition: all .28s var(--ease);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07)
}

.btn-booking-link svg {
  flex-shrink: 0;
  opacity: .8
}

.btn-booking-link:hover {
  background: color-mix(in srgb, var(--rose) 24%, transparent);
  border-color: color-mix(in srgb, var(--rose) 62%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 12px 38px color-mix(in srgb, var(--rose) 30%, transparent)
}

/* ── Gradiente de texto nos títulos de tela ── */
.htitle {
  background: linear-gradient(135deg, var(--t1) 30%, var(--mauve) 70%, var(--rose) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* ── Nome do herói com gradiente vivo ── */
.hero-nm em {
  background: linear-gradient(135deg, var(--rose) 0%, var(--peach) 50%, var(--rose-d) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 4s ease-in-out infinite;
  background-size: 200% auto;
  background-size: 200% auto
}

@keyframes shimmerText {
  0% {
    background-position: 0% center
  }

  50% {
    background-position: 100% center
  }

  100% {
    background-position: 0% center
  }
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 120px at 50% 0%, rgba(255, 255, 255, .06), transparent 70%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none
}

.card:hover::after {
  opacity: 1
}

.acard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 120px at 50% 0%, rgba(255, 255, 255, .05), transparent 70%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none
}

.acard:hover::after {
  opacity: 1
}

/* ── Astripe com shimmer animado ── */
.astripe {
  position: relative;
  overflow: hidden
}

.astripe::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  animation: stripeShimmer 3s ease-in-out infinite
}

@keyframes stripeShimmer {
  0% {
    left: -60%
  }

  60%,
  100% {
    left: 120%
  }
}

/* ── Avatar com anel de luz girando ── */
.cav {
  position: relative
}

.cav::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0, transparent 60%, var(--rose-d) 75%, var(--mauve) 85%, transparent 100%);
  animation: avatarRing 4s linear infinite;
  opacity: .7
}

@keyframes avatarRing {
  to {
    transform: rotate(360deg)
  }
}

/* ── Stagger nos cards ao entrar ── */
.card:nth-child(1),
.acard:nth-child(1) {
  animation-delay: .04s
}

.card:nth-child(2),
.acard:nth-child(2) {
  animation-delay: .08s
}

.card:nth-child(3),
.acard:nth-child(3) {
  animation-delay: .12s
}

.card:nth-child(4),
.acard:nth-child(4) {
  animation-delay: .16s
}

.card:nth-child(5),
.acard:nth-child(5) {
  animation-delay: .20s
}

.card:nth-child(6),
.acard:nth-child(6) {
  animation-delay: .24s
}

.card:nth-child(7),
.acard:nth-child(7) {
  animation-delay: .28s
}

.card:nth-child(8),
.acard:nth-child(8) {
  animation-delay: .32s
}

/* ── Valor financeiro com gradiente ── */
.fval {
  background: linear-gradient(135deg, var(--t1) 0%, var(--peach) 50%, var(--rose) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.fmv {
  background: linear-gradient(135deg, var(--rose) 0%, var(--peach) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* ── Horário do agendamento com gradiente ── */
.atime {
  background: linear-gradient(150deg, var(--rose) 0%, var(--peach) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.acard.st-concluido .atime {
  background: linear-gradient(150deg, var(--lime), #c0fad8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.acard.st-cancelado .atime {
  background: linear-gradient(150deg, var(--amber), #fdf0a0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.acard.st-nao_apareceu .atime {
  background: linear-gradient(150deg, var(--red), #ffc8c8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* ── Preço com gradiente sutil ── */
.aprice {
  background: linear-gradient(135deg, var(--t1) 0%, var(--t2) 100%);
}

/* ── Pill com micro-pulse ao aparecer ── */
.pill {
  animation: pillPop .35s var(--spring) both
}

@keyframes pillPop {
  from {
    transform: scale(.7);
    opacity: 0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

/* ── FAB com anel pulsante ── */
.fab::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid color-mix(in srgb, var(--rose-d) 40%, transparent);
  animation: fabRing 2.5s ease-out infinite;
  pointer-events: none
}

@keyframes fabRing {
  0% {
    transform: scale(1);
    opacity: .7
  }

  70% {
    transform: scale(1.22);
    opacity: 0
  }

  100% {
    transform: scale(1.22);
    opacity: 0
  }
}

/* ── Input com linha de progresso no foco ── */
.fi {
  background-image: linear-gradient(var(--mauve), var(--rose));
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  background-position: 50% calc(100% + 1px);
  transition: border-color .24s, box-shadow .24s, background-color .24s, background-size .3s var(--ease)
}

.fi:focus {
  background-size: 100% 1.5px
}

/* ── Botão com shimmer sweep ── */
.btn-p::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  transition: left .55s var(--ease);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1
}

.btn-p:hover::after {
  left: 150%
}

/* ── hst-v número com gradiente ── */
.hst-v {
  background: linear-gradient(135deg, var(--t1) 0%, var(--mauve) 100%);
}

/* Manter pseudo-elements do .stl visíveis */
.stl::before,
.stl::after {
  -webkit-text-fill-color: initial
}

/* ── Borda inferior do header com animação sweep ── */
.header::before {
  animation: headerBeam 6s ease-in-out infinite
}

@keyframes headerBeam {

  0%,
  100% {
    opacity: .5;
    background-position: 0% center
  }

  50% {
    opacity: .9;
    background-position: 100% center
  }
}

/* ── Valor SVB com gradiente ── */
.svbv {
  background: linear-gradient(135deg, var(--rose) 0%, var(--peach) 100%);
}

/* ── Loading spinner triplo ── */
.loading::before {
  content: '';
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--mauve) 20%, transparent);
  animation: spinnerRing 1.8s ease-in-out infinite
}

@keyframes spinnerRing {

  0%,
  100% {
    transform: scale(1);
    opacity: .4
  }

  50% {
    transform: scale(1.4);
    opacity: 0
  }
}

.loading {
  position: relative
}

/* ── Drawer handle brilha no load ── */
.dhandle::after {
  content: '';
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .6) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: handleBeam 3.5s ease-in-out infinite 1s
}

@keyframes handleBeam {

  0%,
  100% {
    background-position: 200% center;
    opacity: 0
  }

  40%,
  60% {
    background-position: 0% center;
    opacity: 1
  }
}

/* ── Toast com borda luminosa ── */
.toast::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  border-radius: inherit
}

.toast {
  position: relative;
  overflow: hidden
}

#app::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0, transparent, transparent 2px, rgba(0, 0, 0, .03) 2px, rgba(0, 0, 0, .03) 4px);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 100%)
}

/* ── Header: glow lateral nos botões extremos ── */
.hbk:first-child::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border2), transparent);
  opacity: .5
}

/* ── htitle com barra lateral pulsante ── */
.header>div {
  position: relative
}

.header>div::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 55%;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--mauve), var(--rose));
  opacity: .5;
  animation: titlePulse 3s ease-in-out infinite
}

@keyframes titlePulse {

  0%,
  100% {
    opacity: .4;
    height: 50%
  }

  50% {
    opacity: .9;
    height: 75%
  }
}

/* ── Hero stats: números com glow ── */
.hst-v {
  text-shadow: 0 0 30px color-mix(in srgb, var(--mauve) 40%, transparent)
}

/* ── hero-ey: linha da esquerda cresce ao entrar ── */
.hero-ey span:first-child {
  animation: lineGrow .8s var(--ease) both .3s
}

@keyframes lineGrow {
  from {
    width: 0;
    opacity: 0
  }

  to {
    width: 26px;
    opacity: .5
  }
}

/* ── Nav cards: número de sub com contador visual ── */
.nc-sub {
  transition: color .3s, opacity .3s
}

.nc:hover .nc-sub {
  color: var(--rose);
  opacity: 1
}

.nc:hover .nc-lbl {
  background: linear-gradient(135deg, var(--t1), var(--mauve));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* ── Acard: stripe glow colorido ── */
.acard[class*="st-"] {
  box-shadow: var(--sh-card, var(--sh-card)), inset 0 1px 0 rgba(255, 255, 255, .06)
}

.acard.st-agendado {
  box-shadow: 0 0 0 1px rgba(244, 180, 204, .08), var(--sh-card), inset 0 1px 0 rgba(255, 255, 255, .06)
}

.acard.st-concluido {
  box-shadow: 0 0 0 1px rgba(134, 242, 170, .08), var(--sh-card), inset 0 1px 0 rgba(255, 255, 255, .06)
}

.acard.st-cancelado {
  box-shadow: 0 0 0 1px rgba(249, 218, 98, .08), var(--sh-card), inset 0 1px 0 rgba(255, 255, 255, .06)
}

.acard.st-nao_apareceu {
  box-shadow: 0 0 0 1px rgba(248, 146, 146, .08), var(--sh-card), inset 0 1px 0 rgba(255, 255, 255, .06)
}

.acard.st-em_atraso {
  box-shadow: 0 0 0 1px rgba(255, 180, 96, .08), var(--sh-card), inset 0 1px 0 rgba(255, 255, 255, .06)
}

.acard.st-reagendado {
  box-shadow: 0 0 0 1px rgba(202, 172, 234, .1), var(--sh-card), inset 0 1px 0 rgba(255, 255, 255, .06)
}

/* ── atime com glow do status ── */
.acard.st-agendado .atime {
  text-shadow: 0 0 24px color-mix(in srgb, var(--rose) 50%, transparent)
}

.acard.st-concluido .atime {
  text-shadow: 0 0 24px color-mix(in srgb, var(--lime) 50%, transparent)
}

.acard.st-cancelado .atime {
  text-shadow: 0 0 24px color-mix(in srgb, var(--amber) 50%, transparent)
}

.acard.st-nao_apareceu .atime {
  text-shadow: 0 0 24px color-mix(in srgb, var(--red) 50%, transparent)
}

.acard.st-em_atraso .atime {
  text-shadow: 0 0 24px rgba(255, 160, 64, .5)
}

/* ── Clientes: avatar pulse ao hover do card ── */
.card:hover .cav {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose-d) 30%, transparent), var(--shr);
  transform: scale(1.06);
  transition: transform .26s var(--spring), box-shadow .26s
}

/* ── Nome do cliente em destaque no hover ── */
.card:hover .cnm {
  background: linear-gradient(135deg, var(--t1), var(--mauve));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* ── Badge com micro-pulse ── */
.nsbadge {
  animation: badgePulse 3s ease-in-out infinite
}

.cbadge {
  animation: badgePulse 3s ease-in-out infinite .5s
}

@keyframes badgePulse {

  0%,
  100% {
    box-shadow: none
  }

  50% {
    box-shadow: 0 0 8px currentColor;
    opacity: .9
  }
}

/* ── dnav: efeito de cristal aprimorado ── */
.dnav {
  background: linear-gradient(135deg, var(--glass), var(--glass2));
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .07);
  backdrop-filter: blur(12px)
}

/* ── Botões db/mnb com glow no click ── */
.db:active,
.mnb:active {
  box-shadow: 0 0 16px color-mix(in srgb, var(--rose) 40%, transparent);
  transform: scale(.9)
}

/* ── dtdy com shimmer ── */
.dtdy {
  position: relative;
  overflow: hidden
}

.dtdy::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  animation: dtdyShimmer 4s ease-in-out infinite
}

@keyframes dtdyShimmer {

  0%,
  100% {
    left: -100%
  }

  50% {
    left: 150%
  }
}

/* ── fhero: tag com gradiente de texto ── */
.ftag {
  background: linear-gradient(135deg, var(--peach), var(--rose));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .2em
}

/* ── fmini: borda luminosa top nos mini-cards ── */
.fmini {
  position: relative
}

.fmini::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent)
}

.fmini::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 60% at 50% 120%, var(--rose-glow), transparent);
  opacity: 0;
  transition: opacity .3s
}

.fmini:hover::after {
  opacity: 1
}

/* ── Valor fmv com glow ── */
.fmv {
  text-shadow: 0 0 20px color-mix(in srgb, var(--rose) 35%, transparent)
}

/* ── svbar: indicador lateral de cor ── */
.svbar {
  position: relative;
  border-left: 3px solid var(--border2);
  transition: border-left-color .3s, all .24s
}

.svbar:hover {
  border-left-color: var(--rose-d)
}

/* ── svbv com glow ── */
.svbv {
  text-shadow: 0 0 16px color-mix(in srgb, var(--rose) 30%, transparent)
}

/* ── fitem: glow lateral no hover ── */
.fitem::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, currentColor, transparent);
  border-radius: 2px 0 0 2px;
  opacity: .6;
  transition: opacity .2s
}

.fitem {
  position: relative
}

.fitem:hover::before {
  opacity: 1
}

/* ── fin com gradiente no hover ── */
.fitem:hover .fin {
  background: linear-gradient(135deg, var(--t1), var(--t2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* ── Drawers: luz direcional vinda do topo ── */
.drawer::after,
.asheet::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--mauve) 6%, transparent) 0%,
      transparent 100%);
  pointer-events: none;
  border-radius: inherit
}

/* ── dtitle com gradiente ── */
.dtitle {
  background: linear-gradient(135deg, var(--t1) 40%, var(--mauve) 100%);
}

/* ── as-title com gradiente ── */
.as-title {
  background: linear-gradient(135deg, var(--t1) 40%, var(--rose) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* ── aso: ícone com pulse no hover ── */
.aso:hover .aso-ico {
  transform: scale(1.1) rotate(-4deg);
  transition: transform .26s var(--spring)
}

/* ── Dialog: títulos com gradiente ── */
.cbox h3 {
  background: linear-gradient(135deg, var(--t1) 30%, var(--mauve) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* ── Empty state: texto com fade in sequencial ── */
.et {
  animation: fadeInUp .5s var(--ease) both .2s
}

.es {
  animation: fadeInUp .5s var(--ease) both .35s
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ── Formulário: label com transição de cor ── */
.fi:focus~.fl,
.fg:focus-within .fl {
  color: var(--mauve);
  letter-spacing: .2em;
  transition: color .24s, letter-spacing .24s
}

/* ── Overlays: vinheta animada ── */
.overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 50% 100%,
      color-mix(in srgb, var(--mauve) 8%, transparent), transparent);
  animation: overlayBreath 4s ease-in-out infinite
}

@keyframes overlayBreath {

  0%,
  100% {
    opacity: .6
  }

  50% {
    opacity: 1
  }
}

/* ── cbtns: botão confirmação com micro-delay ── */
.cbtns .btn:first-child {
  animation: btnEntry .3s var(--spring) both .05s
}

.cbtns .btn:last-child {
  animation: btnEntry .3s var(--spring) both .12s
}

@keyframes btnEntry {
  from {
    opacity: 0;
    transform: scale(.88)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

/* ── pill: glow sutil permanente por status ── */
.p-rose {
  box-shadow: 0 2px 10px color-mix(in srgb, var(--rose-d) 20%, transparent)
}

.p-green {
  box-shadow: 0 2px 10px rgba(134, 242, 170, .18)
}

.p-amber {
  box-shadow: 0 2px 10px rgba(249, 218, 98, .15)
}

.p-red {
  box-shadow: 0 2px 10px rgba(248, 146, 146, .18)
}

.p-orange {
  box-shadow: 0 2px 10px rgba(255, 168, 64, .15)
}

.p-mauve {
  box-shadow: 0 2px 10px color-mix(in srgb, var(--mauve) 20%, transparent)
}

/* ── Scrollbar cromática visível ── */
.sb::-webkit-scrollbar {
  width: 3px
}

.sb::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--mauve), var(--rose), var(--peach), var(--rose-d));
  border-radius: 3px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--rose) 40%, transparent)
}

/* ── Btn-g com shimmer sweep mais suave ── */
.btn-g::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  transition: left .5s var(--ease);
  border-radius: inherit;
  pointer-events: none
}

.btn-g:hover::after {
  left: 150%
}

/* ── Botão WA com pulse de glow ── */
.btn-wa {
  animation: waPulse 4s ease-in-out infinite
}

@keyframes waPulse {

  0%,
  100% {
    box-shadow: 0 6px 26px rgba(38, 217, 106, .42), inset 0 1px 0 rgba(255, 255, 255, .24)
  }

  50% {
    box-shadow: 0 6px 36px rgba(38, 217, 106, .62), inset 0 1px 0 rgba(255, 255, 255, .28)
  }
}

/* ── Skeleton loader aprimorado ── */
.spin {
  box-shadow: 0 0 20px color-mix(in srgb, var(--mauve) 30%, transparent)
}

/* ── Noshow alert com borda animada ── */
.noshow-alert {
  position: relative;
  overflow: hidden
}

.noshow-alert::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(248, 146, 146, .4), transparent);
  animation: alertBeam 2s ease-in-out infinite
}

@keyframes alertBeam {

  0%,
  100% {
    opacity: .4
  }

  50% {
    opacity: 1
  }
}

/* ── Garantir gradient-text funciona em todos os temas ── */
.htitle,
.hst-v,
.fval,
.fmv,
.atime,
.aprice,
.svbv,
.dtitle,
.as-title,
.cbox h3,
.ftag,
.nc:hover .nc-lbl,
.card:hover .cnm,
.fitem:hover .fin,
.acard.st-concluido .atime,
.acard.st-cancelado .atime,
.acard.st-nao_apareceu .atime {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.hero-nm em {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 200% auto;
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT RESPONSIVO — Sidebar + Breakpoints
   ══════════════════════════════════════════════════════════════ */

/* ── Variáveis de layout ── */
:root {
  --sb-w: 240px;
  /* largura sidebar expandida */
  --sb-w-slim: 72px;
  /* largura sidebar slim (tablet) */
  --header-h: 66px;
}

/* ── Estrutura base: app-content empurra para a direita ── */
.app-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left .32s var(--ease);
}

/* ── Sidebar ── */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sb-w);
  background: var(--sb-bg, color-mix(in srgb, var(--void2) 96%, white));
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 90;
  transition: transform .34s var(--spring), width .3s var(--ease);
  overflow: hidden;
  box-shadow: 4px 0 40px rgba(0, 0, 0, .3), inset -1px 0 0 var(--border);
}

/* Linha cromática topo sidebar */
.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--mauve), var(--rose), var(--peach), var(--rose), var(--mauve));
  opacity: .6;
}

/* ── Logo da sidebar ── */
.sb-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sb-logo-img {
  width: 160px;
  max-height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 3px 14px color-mix(in srgb, var(--rose-d) 45%, transparent));
  transition: filter .3s;
}

.sb-logo-img:hover {
  filter: drop-shadow(0 4px 20px color-mix(in srgb, var(--rose-d) 65%, transparent));
}

.sb-logo-txt {
  display: none;
}

/* ── Nav items ── */
.sb-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sb-nav::-webkit-scrollbar {
  width: 2px;
}

.sb-nav::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 2px;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  border: none;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: all .22s var(--ease);
  position: relative;
  overflow: hidden;
  text-align: left;
  width: 100%;
}

.sb-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--rose-glow), transparent);
  opacity: 0;
  transition: opacity .22s;
}

.sb-item:hover {
  color: var(--t1);
  background: var(--glass2);
}

.sb-item:hover::before {
  opacity: 1;
}

.sb-item.active {
  color: var(--rose);
  background: color-mix(in srgb, var(--rose-d) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rose-d) 28%, transparent);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--rose-d) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

.sb-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--mauve), var(--rose));
}

.sb-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass2);
  border: 1px solid var(--border);
  transition: all .22s var(--spring);
  position: relative;
  z-index: 1;
}

.sb-item.active .sb-icon {
  background: color-mix(in srgb, var(--rose-d) 18%, transparent);
  border-color: color-mix(in srgb, var(--rose-d) 35%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--rose-d) 25%, transparent);
}

.sb-item:hover .sb-icon {
  transform: scale(1.08) rotate(-3deg);
}

.sb-lbl {
  position: relative;
  z-index: 1;
}

/* Badge de contagem */
.sb-badge {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  background: color-mix(in srgb, var(--rose-d) 20%, transparent);
  color: var(--rose);
  border: 1px solid color-mix(in srgb, var(--rose-d) 35%, transparent);
  position: relative;
  z-index: 1;
}

/* ── Footer sidebar ── */
.sb-footer {
  padding: 14px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.sb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  overflow: hidden;
}

.sb-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--rose-d), var(--mauve));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Tenor Sans', serif;
  font-size: 14px;
  color: white;
  box-shadow: var(--shr);
}

.sb-user-info {
  overflow: hidden;
  min-width: 0;
}

.sb-user-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-user-role {
  font-size: 10px;
  color: var(--t3);
  letter-spacing: .06em;
}

.sb-actions {
  display: flex;
  gap: 6px;
}

.sb-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--t3);
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  transition: all .2s;
  flex: 1;
  justify-content: center;
}

.sb-action-btn:hover {
  border-color: var(--border2);
  color: var(--t1);
  background: var(--glass2);
}

.sb-logout:hover {
  border-color: color-mix(in srgb, var(--rose) 40%, transparent);
  color: var(--rose);
}

.sb-logout svg {
  transition: transform .24s var(--spring);
}

.sb-logout:hover svg {
  transform: translateX(3px);
}

/* ── Overlay mobile ── */
.sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .3s;
}

.sb-overlay.open {
  opacity: 1;
}

/* ── Hamburger mobile ── */
.sb-hamburger {
  display: none;
  position: fixed;
  top: 14px;
  left: 16px;
  z-index: 95;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--void2) 90%, transparent);
  backdrop-filter: blur(16px);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
}

.sb-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--t2);
  border-radius: 2px;
  transition: all .25s var(--ease);
}

/* ══════════════════════════════════════════════════════════════
   BREAKPOINTS
   ══════════════════════════════════════════════════════════════ */

/* ── Desktop largo (≥ 1024px) — sidebar expandida ── */
@media (min-width:1024px) {
  .sidebar {
    transform: none;
    width: var(--sb-w);
  }

  .app-content {
    margin-left: var(--sb-w);
  }

  .sb-overlay,
  .sb-hamburger {
    display: none !important;
  }

  /* Telas ocupam a área toda */
  .screen {
    min-height: 100vh;
  }


  /* Desktop: ocultar ngrid (navegação já na sidebar) */
  .ngrid {
    display: none !important;
  }

  /* Desktop: ocultar botões sair/funcionários do hero (já na sidebar) */
  .hero-ey-btns {
    display: none !important;
  }

  /* Desktop: ocultar botão voltar e config dos headers */
  .header .hbk:first-child {
    display: none;
  }

  #btn-config {
    display: none !important;
  }

  /* Scroll body mais largo + scroll interno */
  .sb {
    max-width: 780px;
    padding: 28px 32px 120px;
    overflow-y: visible;
  }

  /* App-content ocupa viewport */
  .app-content {
    min-height: 100vh;
  }

  .screen.active {
    min-height: 100vh;
  }

  /* Hero: layout horizontal mais rico */
  .hero {
    padding: 36px 36px 32px;
    border-radius: 48px;
  }

  .hero-nm {
    font-size: 44px;
  }

  .hero-stats {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  /* Nav grid: 4 colunas */
  .ngrid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  /* Financeiro grid mais largo */
  .fgrid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  /* Cards mais largos */
  .card,
  .acard {
    border-radius: 26px;
  }

  /* Drawer mais largo */
  .drawer,
  .asheet {
    max-width: 640px;
    border-radius: 48px 48px 0 0;
  }

  .cbox {
    max-width: 380px;
  }

  /* Atime maior no desktop */
  .atime {
    font-size: 48px;
  }

  .fval {
    font-size: 58px;
  }

  .hst-v {
    font-size: 38px;
  }
}

/* ── Widescreen (≥ 1440px) — mais espaço ── */
@media (min-width:1440px) {
  :root {
    --sb-w: 280px;
  }

  .sb {
    max-width: 960px;
    padding: 32px 48px 120px;
  }

  .hero-nm {
    font-size: 52px;
  }

  .ngrid {
    gap: 16px;
  }

  .hero-stats {
    gap: 14px;
  }

  .hst {
    border-radius: 28px;
    padding: 20px 22px;
  }

  .hst-v {
    font-size: 44px;
  }

  .fval {
    font-size: 68px;
  }

  .nc {
    padding: 30px 24px;
    border-radius: 34px;
  }

  .nc-icon {
    width: 58px;
    height: 58px;
    border-radius: 20px;
  }

  .fab {
    bottom: 36px;
    right: 18px;
    width: 68px;
    height: 68px;
    font-size: 28px;
  }
}

/* ── Tablet (640px – 1023px) — sidebar slim com ícones ── */
@media (min-width:640px) and (max-width:1023px) {
  .sidebar {
    width: var(--sb-w-slim);
    transform: none;
  }

  .app-content {
    margin-left: var(--sb-w-slim);
  }

  .sb-hamburger,
  .sb-overlay {
    display: none !important;
  }

  /* Esconder textos, mostrar só ícones */
  .sb-lbl,
  .sb-logo-txt,
  .sb-user-info,
  .sb-user-name,
  .sb-user-role,
  .sb-badge,
  .sb-logout-lbl {
    display: none;
  }

  .sb-logo {
    justify-content: center;
    padding: 14px 0;
  }

  .sb-logo-img {
    width: 44px;
    max-height: 44px;
  }

  .sb-nav {
    padding: 10px 8px;
  }

  .sb-item {
    justify-content: center;
    padding: 10px;
    border-radius: 14px;
  }

  .sb-item.active::after {
    display: none;
  }

  .sb-item.active {
    border-radius: 14px;
  }

  .sb-icon {
    width: 40px;
    height: 40px;
  }

  .sb-footer {
    padding: 10px 8px;
    align-items: center;
  }

  .sb-user {
    justify-content: center;
  }

  .sb-actions {
    flex-direction: column;
    width: 100%;
  }

  .sb-action-btn {
    justify-content: center;
    padding: 8px;
  }


  /* Tablet: ocultar ngrid e botões duplicados */
  .ngrid {
    display: none !important;
  }

  .hero-ey-btns {
    display: none !important;
  }

  .header .hbk:first-child {
    display: none;
  }

  #btn-config {
    display: none !important;
  }

  .sb {
    max-width: 640px;
    padding: 22px 20px 110px;
    overflow-y: visible;
  }

  .app-content {
    min-height: 100vh;
  }

  .screen.active {
    min-height: 100vh;
  }

  .hero-nm {
    font-size: 32px;
  }

  .ngrid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Mobile (< 640px) — sem sidebar ── */
@media (max-width:639px) {

  .sidebar,
  .sb-overlay,
  .sb-hamburger {
    display: none !important;
  }

  .app-content {
    margin-left: 0;
  }

  .sb {
    padding: 20px 14px 100px;
  }

  /* Restaurar botões mobile */
  .ngrid {
    display: grid !important;
  }

  .hero-ey-btns {
    display: flex !important;
  }

  .header .hbk:first-child {
    display: flex !important;
  }

  #btn-config {
    display: flex !important;
  }
}

/* ── Telas escondidas corretamente dentro do app-content ── */
@media (min-width:640px) {
  .screen {
    flex: 1;
  }

  .app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}



/* ══════════════════════════════════════════════════════════════
   PERFORMANCE — GPU & Mobile
   ══════════════════════════════════════════════════════════════ */

/* Promover animações contínuas para GPU */
.hero::before,
.hero-stats::before,
.fhero::before,
.fab,
.dhandle,
.astripe::after,
.cav::before {
  will-change: transform;
}

.hero-nm em {
  will-change: background-position;
}

/* Conter repaints nos cards de lista */
.card,
.acard,
.nc,
.fitem,
.svbar {
  contain: layout style;
}

/* ── Mobile: desativar animações decorativas pesadas ── */
@media (max-width:768px) {

  /* Parar nebulosa — maior causador de jank */
  body::before {
    animation: none !important;
  }

  body::after {
    animation: none !important;
  }

  /* Parar orbes e shimmer decorativo */
  .hero::before {
    animation: none !important;
    will-change: auto;
  }

  .hero-stats::before {
    animation: none !important;
    will-change: auto;
  }

  .fhero::before {
    animation: none !important;
    will-change: auto;
  }

  .hero-nm em {
    animation: none !important;
    background-position: 0% center;
  }

  .astripe::after {
    animation: none !important;
  }

  .dhandle {
    animation: none !important;
  }

  .dhandle::after {
    animation: none !important;
  }

  .header::before {
    animation: none !important;
  }

  .hst::after {
    display: none;
  }

  .avatarRing,
  .cav::before {
    animation: none !important;
  }

  .fab::after {
    animation: none !important;
  }

  .dtdy::after {
    animation: none !important;
  }

  .loading::before {
    animation: none !important;
  }

  .spinnerRing {
    animation: none !important;
  }

  /* Manter apenas animações funcionais (relógio, check, ghost, xShake) */

  /* Reduzir transições para resposta mais rápida ao toque */
  .nc,
  .card,
  .acard,
  .btn,
  .hbk,
  .fi,
  .sb-item {
    transition-duration: 0.12s !important;
  }

  /* Desativar hover effects no touch (não existem hover real no mobile) */
  .nc:hover,
  .card:hover,
  .acard:hover {
    transform: none !important;
  }

  /* Scroll suave — usar auto no mobile para performance */
  html {
    scroll-behavior: auto;
  }

  /* Evitar repaint ao scrollar */
  .header {
    will-change: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* Respeitar preferência do sistema por menos animações */
@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE PERFORMANCE — Eliminar operações caras
   ══════════════════════════════════════════════════════════════ */
@media (max-width:768px) {

  /* ── backdrop-filter é o maior causador de jank ── */
  .header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--void) !important;
  }

  .overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .conf {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .toast {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ── filter:blur em pseudo-elements — muito caro ── */
  .hero::before {
    display: none !important;
  }

  .hero-stats::before {
    display: none !important;
  }

  .fhero::before {
    display: none !important;
  }

  /* ── screenIn: remover blur e saturate do filter ── */
  .screen {
    animation: screenInMobile .25s ease both !important;
  }

  @keyframes screenInMobile {
    from {
      opacity: 0;
      transform: translateY(12px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── cardIn: simplificar ── */
  .card,
  .acard {
    animation: cardInMobile .2s ease both !important;
  }

  @keyframes cardInMobile {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── box-shadow: simplificar para 1 camada ── */
  .card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3) !important;
  }

  .acard {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3) !important;
  }

  .hero {
    box-shadow: 0 4px 24px rgba(0, 0, 0, .4) !important;
  }

  .nc {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25) !important;
  }

  .fab {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .4) !important;
  }

  /* ── conic-gradient — substituir por solid color ── */
  .cav {
    background: linear-gradient(135deg, var(--rose-d), var(--mauve)) !important;
  }

  .cav::before {
    display: none !important;
  }

  /* ── Desativar todos os ::after decorativos dos cards ── */
  .card::after,
  .acard::after,
  .nc::after,
  .hst::before,
  .hst::after,
  .nc::before {
    display: none !important;
  }

  /* ── Remover inset box-shadows (causam repaint) ── */
  .hst {
    box-shadow: none !important;
  }

  .fmini {
    box-shadow: none !important;
  }

  /* ── Scroll: forçar compositing ── */
  .sb,
  .screen.active {
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
  }

  /* ── Reduzir qualidade de sombras dos drawers ── */
  .drawer,
  .asheet {
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .5) !important;
  }

  /* ── Desativar color-mix em tempo real ── */
  .sb-item.active {
    background: rgba(196, 95, 130, .14) !important;
  }
}

/* ── Config overlay: sem backdrop-filter no mobile ── */
@media (max-width:768px) {

  /* Overlay de configurações — o mais pesado */
  #ov-config {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, .82) !important;
  }

  /* Drawer de configurações */
  #ov-config .drawer {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .5) !important;
    /* Promover para GPU antecipadamente */
    will-change: transform;
    transform: translateZ(0);
  }

  /* cfg-section: sem pseudo-elements animados */
  .cfg-section::before {
    display: none !important;
  }

  .cfg-section::after {
    display: none !important;
  }

  /* Sem gradiente de texto nas cfg-sections no mobile */
  .cfg-section-hd {
    -webkit-text-fill-color: var(--t1) !important;
    background: none !important;
  }

  /* Textarea e inputs na config: sem transições */
  #ov-config .fi,
  #ov-config textarea {
    transition: border-color .15s !important;
  }

  /* Botões de ação na sidebar: sem sombra */
  .sb-action-btn {
    box-shadow: none !important;
    transition: background .1s, color .1s !important;
  }
}