:root {
  --mare-turquesa: #12616a;
  --mare-turquesa-claro: #38b9a5;
  --mare-verde-agua: #79cfc1;
  --mare-espuma: #f8fbf2;
  --mare-coral: #bc4b39;
  --mare-coral-claro: #c24f3d;
  --mare-areia: #eadfc5;
  --mare-creme: #fbf2df;
  --mare-sol: #f0c16f;
  --mare-ceu: #ccecf0;
  --mare-noite: #18384f;
  --mare-noite-luz: #aecbd2;
  --mare-texto: #173f43;
  --mare-foco: #147c79;
  --mare-sombra: rgba(24, 93, 82, .11);
  --mare-perigo: #a54f42;
  --mare-papel: #edf7f2;
  --mare-linha: #d5e8df;
  --mare-raio: 14px;
  --mare-sombra-cartao: 0 12px 32px rgba(25, 59, 64, .07);
  --ink: var(--mare-texto);
  --sea: var(--mare-turquesa);
  --sea-2: var(--mare-turquesa-claro);
  --paper: var(--mare-papel);
  --line: var(--mare-linha);
  --sand: var(--mare-sol);
  --muted: #607c78;
  --danger: var(--mare-perigo);
  --shadow: var(--mare-sombra-cartao);
  --radius: var(--mare-raio);
}

.app main::before,
.app main::after {
  animation-duration: 54s;
}

.sidebar {
  background: linear-gradient(180deg, #0d4851, #115b56 58%, #14675b);
}

nav button {
  min-height: 44px;
}

nav button:hover .nav-icon {
  transform:translateY(-2px) rotate(-5deg);
}

nav .nav-icon {
  transition:transform .18s ease;
}

.summary-bar {
  gap:13px;
}

.summary-item {
  position:relative;
  min-width:0;
  min-height:122px;
  display:grid;
  grid-template-columns:42px minmax(0, 1fr);
  align-content:center;
  align-items:center;
  gap:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.82);
  border-radius:18px;
  background:rgba(255,255,249,.7);
  box-shadow:0 12px 34px var(--mare-sombra), inset 0 1px rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
}

.summary-item .summary-icon {
  display:grid;
  width:42px;
  height:42px;
  margin:0;
  background:linear-gradient(145deg, var(--mare-turquesa-claro), var(--mare-turquesa));
}

.summary-item .summary-icon.sand-icon {
  background:linear-gradient(145deg, #e6b46a, #b97856);
}

.summary-copy {
  display:grid;
  gap:8px;
  min-width:0;
}

.summary-copy .summary-label {
  min-height:0;
  margin:0;
  color:#54736e;
  font-size:11px;
  line-height:1.35;
  letter-spacing:.035em;
  text-transform:none;
}

.summary-copy strong {
  display:block;
  color:var(--mare-turquesa);
  font:700 clamp(21px, 2vw, 29px)/1.1 Georgia, "Times New Roman", serif;
  white-space:nowrap;
}

.summary-wave {
  width:min(100%, 150px);
  height:20px;
  margin-top:1px;
  overflow:visible;
}

.summary-wave path {
  fill:none;
  stroke:var(--mare-turquesa-claro);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:3 5;
}

.chat-heading-actions button,
.chat-heading-actions .guided-trigger {
  min-height:44px;
  border-radius:999px;
}

.chat-heading-actions #toggle-guided-booking {
  border-color:var(--mare-coral);
  background:linear-gradient(135deg, var(--mare-coral-claro), var(--mare-coral));
  color:white;
}

.chat-heading-actions #toggle-guided-booking:hover {
  background:linear-gradient(135deg, #c24f3d, #bc4b39);
}

.composer {
  border-top-color:rgba(56,185,165,.25);
}

.composer textarea {
  border-color:rgba(56,185,165,.32);
  background:rgba(255,255,250,.88);
}

.composer textarea:focus-visible {
  border-color:var(--mare-turquesa-claro);
  box-shadow:0 0 0 4px rgba(56,185,165,.2);
}

.composer .primary {
  min-height:44px;
  background:linear-gradient(135deg, var(--mare-coral-claro), var(--mare-coral));
  color:#fff;
}

.composer .primary:hover {
  background:linear-gradient(135deg, #c24f3d, #bc4b39);
}

.messages {
  background:linear-gradient(180deg, var(--mare-ceu), var(--mare-creme) 72%, var(--mare-areia));
}

.messages::before,
#layla-stage::before {
  will-change:background-position;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 100'%3E%3Cpath fill='%2379cfc1' d='M0 35Q80 0 160 35t160 0 160 0 160 0v65H0z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 80'%3E%3Cpath fill='%2338b9a5' d='M0 30Q60 0 120 30t120 0 120 0 120 0v50H0z'/%3E%3C/svg%3E");
}

.messages::after,
#layla-stage::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 45'%3E%3Cpath fill='%23f8fbf2' fill-opacity='.78' d='M0 18q35-16 70 0t70 0 70 0 70 0 70 0 70 0 70 0v27H0z'/%3E%3C/svg%3E") repeat-x bottom/520px 42px,
    linear-gradient(180deg, transparent 0%, rgba(246,232,204,.2) 35%, rgba(232,216,185,.62) 100%);
}

#layla-stage {
  background:linear-gradient(180deg, var(--mare-ceu), var(--mare-creme) 72%, var(--mare-areia));
}

#layla-stage[data-sky="manha"] {
  background:linear-gradient(180deg, #bcecf5 0%, #edf5e6 68%, var(--mare-areia));
}

#layla-stage[data-sky="tarde"] {
  background:linear-gradient(180deg, #aee4f1 0%, #e6f4e8 61%, var(--mare-areia));
}

#layla-stage[data-sky="por-do-sol"] {
  background:linear-gradient(180deg, #f4c18d 0%, #f5d9bb 48%, var(--mare-areia));
}

.messages[data-sky="noite"],
#layla-stage[data-sky="noite"] {
  background-image:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 27%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 51% 12%, rgba(255,255,255,.72) 0 1px, transparent 2px),
    linear-gradient(180deg, var(--mare-noite) 0%, #466e80 58%, #bcc9b9 100%);
}

.messages[data-sky="noite"]::before,
#layla-stage[data-sky="noite"]::before {
  background-image:
    radial-gradient(ellipse at 78% 53%, rgba(245,248,207,.38), transparent 30%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 100'%3E%3Cpath fill='%2379cfc1' d='M0 35Q80 0 160 35t160 0 160 0 160 0v65H0z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 80'%3E%3Cpath fill='%2338b9a5' d='M0 30Q60 0 120 30t120 0 120 0 120 0v50H0z'/%3E%3C/svg%3E");
  background-repeat:no-repeat, repeat-x, repeat-x;
  background-position:78% bottom, 0 bottom, 220px bottom;
  background-size:150px 100%, 640px 76px, 480px 56px;
  animation-name:layla-night-wave-drift;
}

@keyframes layla-night-wave-drift {
  to { background-position:78% bottom, 640px bottom, -260px bottom; }
}

.layla-figure,
.layla-seagull,
.layla-crab {
  will-change:transform;
}

.layla-bubble {
  border-color:rgba(56,185,165,.4);
  color:var(--mare-texto);
}

.layla-you {
  border-color:rgba(223,112,89,.3);
  background:rgba(255,239,222,.95);
}

.composer .primary:focus-visible,
.chat-heading-actions button:focus-visible,
nav button:focus-visible,
.layla-avatar:focus-visible {
  outline:3px solid var(--mare-foco);
  outline-offset:3px;
}

.reservation-row {
  border-color:rgba(255,255,255,.76);
  background:rgba(255,255,255,.42) !important;
  box-shadow:0 5px 16px rgba(24,93,82,.07);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.reservation-row::before,
.reservation-row::after {
  background:#edf7f2;
}

.agenda-panel {
  background:rgba(255,255,249,.68);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
}

.chat-heading-actions #toggle-beach-settings {
  width:44px;
  padding:0;
  font-size:17px;
}

.beach-settings {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  margin-top:12px;
  padding:10px 13px;
  border:1px solid rgba(56,185,165,.2);
  border-radius:14px;
  background:rgba(255,255,250,.86);
  color:var(--mare-texto);
  font-size:12px;
}

.beach-settings[hidden] {
  display:none;
}

.beach-settings strong {
  color:var(--mare-turquesa);
}

.beach-settings label {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  gap:7px;
  cursor:pointer;
}

.beach-settings input {
  width:18px;
  height:18px;
  accent-color:var(--mare-turquesa);
}

.beach-settings input:focus-visible {
  outline:3px solid var(--mare-foco);
  outline-offset:3px;
}

#layla-stage:not([data-seagull="on"]) .layla-seagull,
#layla-stage:not([data-crab="on"]) .layla-crab {
  display:none;
  animation:none;
}

.layla-seagull,
.layla-crab {
  animation-play-state:paused;
}

#layla-stage[data-seagull="on"] .layla-seagull,
#layla-stage[data-crab="on"] .layla-crab {
  animation-play-state:running;
}

body.page-hidden *,
body.page-hidden *::before,
body.page-hidden *::after {
  animation-play-state:paused !important;
}

.layla-option-label {
  overflow-wrap:normal;
  hyphens:auto;
}

.layla-option.layla-answer-option {
  min-height:48px;
  overflow-wrap:normal;
  hyphens:auto;
}

.layla-options.awaiting-question .layla-answer-option {
  pointer-events:none;
  animation-play-state:paused;
}

.layla-date-suggestions {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}

.layla-date-suggestions-label {
  grid-column:1 / -1;
  color:#54736e;
  font-size:10px;
  font-weight:700;
}

.layla-option.layla-date-suggestion {
  min-height:44px;
  padding:7px;
  border-color:rgba(207,179,128,.5);
  background:linear-gradient(145deg,#fffdf5,#f1e4c9);
  font-size:11px;
}

.layla-money-pad-keys [data-layla-money-key="backspace"] {
  grid-area:4 / 2;
}

.layla-money-pad-keys [data-layla-money-key="0"] {
  grid-area:4 / 3;
}

.layla-money-pad-keys [data-layla-money-key="decimal"] {
  grid-area:4 / 4;
}

.layla-money-pad-keys .layla-money-key {
  min-height:44px;
}

.layla-money-shortcut {
  min-height:40px;
}

.layla-money-use {
  min-height:48px;
}

.layla-skip-option {
  min-height:44px;
  border-style:dashed;
  font-size:10px;
}

@media (max-width: 560px) {
  #layla-stage:has(> .layla-conversation > .layla-options:not([hidden])) {
    grid-template-columns:minmax(0,1fr) minmax(84px,27%);
    grid-template-rows:minmax(0,1fr) auto;
    gap:4px 8px;
  }

  #layla-stage:has(> .layla-conversation > .layla-options:not([hidden])) .layla-conversation {
    grid-column:1 / -1;
    grid-row:1;
    flex-direction:column;
    align-items:stretch;
    align-self:stretch;
    gap:7px;
  }

  #layla-stage:has(> .layla-conversation > .layla-options:not([hidden])) .layla-bubble {
    flex:none;
    width:100%;
    padding:9px 12px;
  }

  #layla-stage:has(> .layla-conversation > .layla-options:not([hidden])) .layla-bubble::after {
    top:auto;
    right:22%;
    bottom:-7px;
    left:auto;
    transform:rotate(45deg);
  }

  #layla-stage:has(> .layla-conversation > .layla-options:not([hidden])) .layla-scroll {
    max-height:14vh;
    font-size:13px;
  }

  #layla-stage:has(> .layla-conversation > .layla-options:not([hidden])) .layla-options {
    width:100%;
    max-height:min(58vh,430px);
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }

  #layla-stage:has(> .layla-conversation > .layla-options:not([hidden])) .layla-option {
    min-height:58px;
    font-size:10px;
  }

  #layla-stage:has(> .layla-conversation > .layla-options:not([hidden])) .layla-option.layla-answer-option {
    min-height:48px;
  }

  #layla-stage:has(> .layla-conversation > .layla-options:not([hidden])) .layla-figure {
    grid-column:2;
    grid-row:2;
    width:100%;
    min-height:88px;
    max-height:130px;
  }

  #layla-stage:has(> .layla-conversation > .layla-options:not([hidden])) .layla-you {
    grid-column:1;
    grid-row:2;
    align-self:end;
    max-width:100%;
    padding:7px 10px;
    border:1px solid rgba(220,154,122,.35);
    border-radius:14px;
    background:rgba(255,244,228,.88);
  }
}

@media (prefers-color-scheme: dark) {
  .messages:not([data-sky]),
  #layla-stage:not([data-sky]) {
    background-image:
      radial-gradient(circle at 18% 18%, rgba(255,255,255,.8) 0 1px, transparent 2px),
      radial-gradient(circle at 73% 27%, rgba(255,255,255,.7) 0 1px, transparent 2px),
      radial-gradient(circle at 51% 12%, rgba(255,255,255,.72) 0 1px, transparent 2px),
      linear-gradient(180deg, var(--mare-noite) 0%, #466e80 58%, #bcc9b9 100%);
  }
}

@media (max-width: 900px) {
  .summary-bar {
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .summary-item {
    min-height:100px;
    grid-template-columns:1fr;
    align-content:start;
    gap:7px;
    padding:12px;
  }

  .summary-item .summary-icon {
    width:32px;
    height:32px;
  }

  .summary-item .summary-icon svg {
    width:17px;
    height:17px;
  }

  .summary-copy {
    gap:4px;
  }

  .summary-copy strong {
    font-size:clamp(16px, 3.2vw, 22px);
  }

  .summary-wave {
    display:none;
  }

  nav button {
    min-height:44px;
  }
}

@media (max-width: 480px) {
  .summary-item {
    padding:9px 7px;
  }

  .summary-copy .summary-label {
    font-size:9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation:none !important;
    scroll-behavior:auto !important;
    transition:none !important;
  }
}

.layla-memory-suggestion {
  grid-column:1 / -1;
  padding:9px 11px;
  border:1px solid rgba(226,178,98,.38);
  border-radius:12px;
  background:rgba(255,249,226,.86);
  color:#66522d;
  font-size:11px;
  line-height:1.45;
}

.layla-shell-confetti {
  position:absolute;
  z-index:5;
  inset:10% 12%;
  display:flex;
  justify-content:space-around;
  pointer-events:none;
}

.layla-shell-confetti span {
  align-self:flex-end;
  color:#d5a847;
  font-size:18px;
  animation:layla-shell-rise 1.2s ease-out both;
  animation-delay:calc(var(--shell-index) * 55ms);
}

@keyframes layla-shell-rise {
  to { opacity:0;transform:translateY(-120px) rotate(25deg); }
}

.layla-avatar.dancing .layla-avatar-figure {
  animation:layla-dance .48s ease-in-out 6 alternate;
}

.chat.modo-layla {
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctext y='19' font-size='18'%3E%F0%9F%90%9A%3C/text%3E%3C/svg%3E") 5 5,auto;
}

.chat.modo-layla button,
.chat.modo-layla input,
.chat.modo-layla textarea {
  cursor:auto;
}

.daily-tip::before {
  content:"✦";
  margin-right:6px;
  color:#c58c42;
}

body[data-humor="seria"] .layla-bubble {
  border-radius:14px;
}

body[data-humor="seria"] .layla-bubble::after {
  border-radius:2px;
}

body[data-theme="por-do-sol"] .sidebar {
  background:linear-gradient(180deg,#754653,#945e5b 58%,#a86d5c);
}

body[data-theme="recife"] .sidebar {
  background:linear-gradient(180deg,#124b68,#126b78 58%,#14828a);
}

body[data-theme="coqueiral"] .sidebar {
  background:linear-gradient(180deg,#295b47,#34765a 58%,#4b805b);
}

body[data-theme="por-do-sol"] .messages,
body[data-theme="por-do-sol"] #layla-stage:not([data-sky="noite"]) {
  background:linear-gradient(180deg,#f4c18d 0%,#f5d9bb 62%,#eadfc5 100%);
}

body[data-theme="recife"] .messages,
body[data-theme="recife"] #layla-stage:not([data-sky="noite"]) {
  background:linear-gradient(180deg,#bcecf5 0%,#dff4e8 62%,#eadfc5 100%);
}

body[data-theme="coqueiral"] .messages,
body[data-theme="coqueiral"] #layla-stage:not([data-sky="noite"]) {
  background:linear-gradient(180deg,#d9edcc 0%,#eef1d9 62%,#eadfc5 100%);
}

body[data-theme="por-do-sol"] .login-screen {
  background:linear-gradient(180deg,#f3d2c0 0%,#fbf2df 72%,#eadfc5 100%);
}

body[data-theme="recife"] .login-screen {
  background:linear-gradient(180deg,#bcecf5 0%,#e0f5ee 72%,#eadfc5 100%);
}

body[data-theme="coqueiral"] .login-screen {
  background:linear-gradient(180deg,#d5ebcc 0%,#f0f0d7 72%,#eadfc5 100%);
}

@media (max-width: 700px) {
  .layla-shell-confetti {
    inset:6% 3%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .layla-shell-confetti span,
  .layla-avatar.dancing .layla-avatar-figure {
    animation:none !important;
  }
}

body[data-theme="por-do-sol"] {
  --mare-turquesa:#8d525a;
  --mare-turquesa-claro:#d68b79;
  --mare-verde-agua:#e8b28e;
  --mare-ceu:#f5d6be;
  --mare-coral:#ab554b;
  --mare-coral-claro:#d27760;
  --mare-foco:#9f5d5a;
  --mare-papel:#fff4ea;
  --mare-linha:#ead1c1;
  --mare-texto:#593e43;
}

body[data-theme="recife"] {
  --mare-turquesa:#17677c;
  --mare-turquesa-claro:#38b9c3;
  --mare-verde-agua:#8bd8d1;
  --mare-ceu:#d4f1f0;
  --mare-coral:#c2544b;
  --mare-coral-claro:#db7862;
  --mare-foco:#147c91;
  --mare-papel:#eff9f7;
  --mare-linha:#cce5e4;
  --mare-texto:#173f4a;
}

body[data-theme="coqueiral"] {
  --mare-turquesa:#327258;
  --mare-turquesa-claro:#74b88a;
  --mare-verde-agua:#a4d3a6;
  --mare-ceu:#e1f1dc;
  --mare-coral:#bc6549;
  --mare-coral-claro:#d58b61;
  --mare-foco:#286f52;
  --mare-papel:#f5f6e9;
  --mare-linha:#d9e3cb;
  --mare-texto:#304c3e;
}

.login-screen {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg,#c9eef1 0%,#f8f2df 72%,#eadfc5 100%);
}

.login-screen::before,
.login-screen::after {
  content:"";
  position:absolute;
  z-index:-1;
  right:-4%;
  bottom:-5%;
  left:-4%;
  height:30%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 100'%3E%3Cpath fill='%2379cfc1' d='M0 35Q80 0 160 35t160 0 160 0 160 0v65H0z'/%3E%3C/svg%3E") repeat-x bottom/640px 100%;
  animation:login-wave 16s linear infinite;
}

.login-screen::after {
  bottom:-10%;
  height:25%;
  opacity:.75;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 80'%3E%3Cpath fill='%2338b9a5' d='M0 30Q60 0 120 30t120 0 120 0 120 0v50H0z'/%3E%3C/svg%3E");
  background-size:480px 100%;
  animation-direction:reverse;
}

@keyframes login-wave {
  to { background-position:640px bottom; }
}

.login-layla {
  position:relative;
  display:grid;
  width:82px;
  height:82px;
  place-items:center;
  margin:0 auto 10px;
  overflow:hidden;
  border:3px solid rgba(255,255,255,.82);
  border-radius:50%;
  background:linear-gradient(145deg,#fff9e8,#b8e4dc);
  box-shadow:0 8px 22px rgba(20,91,98,.15);
}

.login-layla img {
  width:100%;
  height:100%;
  object-fit:cover;
  animation:login-wave-hello 1.8s ease-in-out infinite;
}

@keyframes login-wave-hello {
  50% { transform:rotate(3deg) translateY(-2px); }
}

.login-card {
  position:relative;
  border-radius:22px;
  background:rgba(255,255,250,.88);
  box-shadow:0 20px 55px rgba(27,76,77,.14);
  backdrop-filter:blur(15px);
}

.login-card .brand-mark {
  display:none;
}

.login-card h1,
.login-card p {
  text-align:center;
}

.login-card .primary {
  border-radius:999px;
  background:linear-gradient(135deg,var(--mare-coral-claro),var(--mare-coral));
}

.loading::before {
  content:"🌊";
  display:inline-block;
  margin-right:8px;
  animation:mare-loading-wave 1.1s ease-in-out infinite alternate;
}

@keyframes mare-loading-wave {
  to { transform:translateY(-4px) rotate(8deg); }
}

.calendar .day.today {
  background:#fff8e4;
  box-shadow:inset 0 0 0 2px var(--mare-sol);
}

.day-number {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.day.today .day-number::after {
  content:"☀";
  color:#b77835;
  font-size:12px;
}

.booking {
  border-radius:999px;
  background:linear-gradient(90deg,rgba(56,185,165,.25),rgba(121,207,193,.12));
}

.booking.checkin {
  border-left:3px solid var(--mare-turquesa);
}

.booking.checkout {
  border-right:3px solid var(--mare-turquesa);
}

.booking::before {
  content:"🐚 ";
  font-size:10px;
}

.booking.negotiation::before {
  content:"☀ ";
}

.agenda-empty,
.view-empty {
  display:grid;
  justify-items:center;
  gap:8px;
  padding:28px 18px;
  border:1px dashed rgba(18,97,106,.22);
  border-radius:18px;
  background:rgba(255,255,250,.56);
  color:var(--mare-texto);
  text-align:center;
}

.agenda-empty svg {
  width:88px;
  height:64px;
  fill:none;
  stroke:var(--mare-turquesa-claro);
  stroke-width:2;
  stroke-linecap:round;
}

.view-empty p,
.agenda-empty p {
  margin:0;
  color:#607c78;
  font-size:13px;
}

.empty-icon {
  font-size:28px;
}

.negotiation-card {
  border-left:4px solid var(--mare-sol);
  background:linear-gradient(145deg,rgba(255,254,245,.94),rgba(255,247,218,.7));
}

.status {
  background:#d8eee4;
  color:#266b58;
}

.status.negotiation {
  background:#fff0bd;
  color:#795b20;
}

.receipt-row {
  position:relative;
  margin:7px 3px;
  padding:14px 14px 14px 18px;
  border:1px solid rgba(172,145,99,.25);
  border-radius:5px;
  background:#fffdf6;
  box-shadow:0 5px 13px rgba(91,74,43,.07);
}

.receipt-row::before,
.receipt-row::after {
  content:"";
  position:absolute;
  top:50%;
  width:12px;
  height:12px;
  border:1px solid var(--mare-linha);
  border-radius:50%;
  background:var(--mare-papel);
  transform:translateY(-50%);
}

.receipt-row::before { left:-7px; }
.receipt-row::after { right:-7px; }

.receipt-paid-seal {
  flex:none;
  padding:5px 8px;
  border:2px solid #5b9b79;
  border-radius:999px;
  color:#397856;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  transform:rotate(-8deg);
}

.group-person {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.group-avatar {
  display:grid;
  flex:none;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#f3aa83,#d56f5a);
  color:white;
  font-size:10px;
  font-weight:800;
}

.group-avatar-sea {
  background:linear-gradient(145deg,#76cabb,#278c83);
}

.group-guide {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
  padding:12px;
  border:1px solid rgba(56,185,165,.22);
  border-radius:14px;
  background:rgba(255,255,250,.72);
}

.group-guide > span:first-child {
  display:grid;
  flex:none;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:50%;
  background:#f7e9c9;
  font-size:19px;
}

.group-guide span:last-child {
  display:grid;
  gap:3px;
}

.group-guide small {
  color:#607c78;
}

.layla-figure {
  transform-origin:50% 88%;
}

#layla-stage.thinking .layla-figure {
  animation:layla-thinking 1.2s ease-in-out infinite alternate;
}

#layla-stage.confused .layla-figure {
  animation:layla-confused .4s ease-in-out 2;
}

#layla-stage.happy .layla-figure {
  animation:layla-happy .45s ease-out 2;
}

#layla-stage.dancing .layla-figure,
#layla-stage.dancing .layla-avatar-figure {
  animation:layla-dance .48s ease-in-out 6 alternate;
}

#layla-stage.sleeping .layla-figure,
.layla-avatar.sleeping .layla-avatar-figure {
  filter:grayscale(.4) brightness(.85);
}

#layla-stage.sleeping::before,
#layla-stage.sleeping::after {
  opacity:.45;
}

@keyframes layla-thinking {
  to { transform:rotate(-2deg) translateY(-4px); }
}

@keyframes layla-confused {
  50% { transform:rotate(5deg); }
}

@keyframes layla-happy {
  45% { transform:translateY(-9px); }
}

@keyframes layla-dance {
  to { transform:rotate(7deg) translateY(-7px); }
}

#layla-stage[data-skin="sunglasses"] .layla-figure::after,
.layla-avatar[data-skin="sunglasses"]::after {
  content:"🕶️";
  position:absolute;
  z-index:4;
  top:31%;
  left:49%;
  font-size:clamp(17px,3vw,30px);
  pointer-events:none;
  transform:translateX(-50%) rotate(-5deg);
}

#layla-stage[data-skin="straw-hat"] .layla-figure::before,
.layla-avatar[data-skin="straw-hat"]::after {
  content:"👒";
  position:absolute;
  z-index:4;
  top:-3%;
  left:50%;
  font-size:clamp(25px,4vw,48px);
  pointer-events:none;
  transform:translateX(-50%) rotate(-5deg);
}

#layla-stage[data-skin="party"] .layla-figure::before,
.layla-avatar[data-skin="party"]::after {
  content:"🎉";
  position:absolute;
  z-index:4;
  top:0;
  right:24%;
  font-size:clamp(20px,3vw,34px);
  pointer-events:none;
}

.layla-speak {
  position:absolute;
  z-index:3;
  right:7px;
  bottom:7px;
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border:1px solid rgba(56,185,165,.3);
  border-radius:50%;
  background:rgba(255,255,255,.84);
  color:var(--mare-turquesa);
}

.layla-speak:focus-visible,
.layla-preferences :focus-visible,
.onboarding-actions :focus-visible {
  outline:3px solid var(--mare-foco);
  outline-offset:2px;
}

.layla-preferences {
  display:grid;
  grid-template-columns:minmax(130px,1fr) minmax(150px,1.3fr);
  align-items:center;
  gap:8px 12px;
  width:100%;
  padding-top:7px;
  border-top:1px solid rgba(56,185,165,.18);
}

.layla-preferences > label:not(.layla-preference-check) {
  min-height:auto;
  font-weight:700;
}

.layla-preferences select {
  min-height:40px;
  border:1px solid var(--mare-linha);
  border-radius:10px;
  background:#fffefa;
  color:var(--mare-texto);
  padding:7px 10px;
}

.layla-preferences .layla-preference-check,
.layla-preferences small,
.layla-preferences button {
  grid-column:1 / -1;
}

.layla-preferences small {
  color:#607c78;
  line-height:1.45;
}

.layla-preferences .layla-preference-check {
  display:flex;
  gap:8px;
  min-height:36px;
}

.layla-preferences .layla-preference-check input {
  flex:none;
}

.daily-tip {
  grid-column:2;
  justify-self:start;
  margin:0 0 12px 28px;
  color:#52746f;
  font-size:11px;
}

.mare-dialog {
  width:min(520px,calc(100% - 28px));
  max-height:min(86vh,760px);
  padding:24px;
  border:1px solid rgba(255,255,255,.86);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,250,.97),rgba(226,245,237,.96));
  color:var(--mare-texto);
  box-shadow:0 24px 70px rgba(15,61,62,.25);
}

.mare-dialog::backdrop {
  background:rgba(16,54,59,.48);
  backdrop-filter:blur(5px);
}

.mare-dialog h2 {
  margin:3px 0 10px;
  font:700 26px/1.2 Georgia,"Times New Roman",serif;
}

.mare-dialog .eyebrow {
  color:#52746f;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.onboarding-art {
  margin-bottom:12px;
  font-size:30px;
}

.onboarding-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:20px;
}

.component-gallery {
  width:min(720px,calc(100% - 28px));
}

.component-gallery-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.component-preview-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:15px;
}

.component-sample {
  display:grid;
  justify-items:start;
  align-content:start;
  gap:10px;
  min-width:0;
  min-height:130px;
  padding:14px;
  border:1px solid rgba(56,185,165,.22);
  border-radius:15px;
  background:rgba(255,255,250,.7);
}

.sample-label {
  color:#607c78;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.sample-bubble {
  padding:11px 14px;
  border:1px solid rgba(56,185,165,.3);
  border-radius:18px 18px 18px 5px;
  background:#fff;
}

.sample-card {
  display:grid;
  gap:7px;
  width:100%;
  padding:12px;
  border:1px solid var(--mare-linha);
  border-radius:12px;
  background:rgba(255,255,255,.8);
}

.sample-card small {
  color:#607c78;
}

.theme-swatches {
  display:flex;
  gap:8px;
}

.theme-swatches i {
  width:28px;
  height:28px;
  border-radius:50%;
  background:#12616a;
}

.theme-swatches i:nth-child(2) { background:#bc4b39; }
.theme-swatches i:nth-child(3) { background:#eadfc5; }
.theme-swatches i:nth-child(4) { background:#f0c16f; }

#layla-onboarding {
  position:fixed;
}

@media (max-width: 700px) {
  .layla-preferences {
    grid-template-columns:1fr;
  }

  .layla-preferences > label:not(.layla-preference-check),
  .layla-preferences .layla-preference-check,
  .layla-preferences small,
  .layla-preferences button {
    grid-column:1;
  }

  .daily-tip {
    grid-column:1;
    margin:0 14px 10px;
  }

  .component-preview-grid {
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-screen::before,
  .login-screen::after,
  .login-layla img,
  .loading::before,
  #layla-stage .layla-figure,
  .layla-avatar .layla-avatar-figure,
  #layla-stage[data-skin] .layla-figure::before,
  #layla-stage[data-skin] .layla-figure::after {
    animation:none !important;
  }
}