/* =========================================================
   TOKENS
========================================================= */
:root {
  --ink: #1a1a22;
  --muted: #5d5d72;

  --pink: #ff78b6;
  --pinkSoft: #ffd6ea;

  --noteA: #fff3a8;
  --noteB: #c6ffbf;
  --noteC: #bfe6ff;
  --noteD: #ffc7e7;

  --envBg1: #141424;
  --envBg2: #0f0f18;

  --envText: rgba(255, 255, 255, .86);
  --envTextMuted: rgba(255, 255, 255, .58);
}

/* =========================================================
   RESET / BASE
========================================================= */
* { box-sizing: border-box }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--ink);

  background:
    radial-gradient(900px 520px at 50% 12%, rgba(255, 120, 182, .22), transparent 60%),
    radial-gradient(820px 520px at 15% 30%, rgba(184, 92, 255, .14), transparent 62%),
    radial-gradient(820px 520px at 85% 35%, rgba(255, 200, 225, .18), transparent 62%),
    linear-gradient(180deg, #f7f4ff 0%, #fff6fb 45%, #f7fbff 100%);
  min-height: 100svh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(20, 20, 30, .04) 0 2px, transparent 2px 7px),
    radial-gradient(1200px 520px at 30% 0%, rgba(255, 255, 255, .8), transparent 60%);
  opacity: .35;
  mix-blend-mode: multiply;
}

/* quando estiver logado e a barra aparecer */
body.hasUserBar{
  padding-top: 56px; /* ajusta se precisar (52~64) */
}

/* =========================================================
   ENVELOPE (BASE - NEON / ORIGINAL)
========================================================= */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10;

  background:
    radial-gradient(900px 520px at 50% 18%, rgba(255, 120, 182, .18), transparent 62%),
    radial-gradient(820px 520px at 20% 70%, rgba(184, 92, 255, .12), transparent 65%),
    linear-gradient(180deg, rgba(12, 10, 24, .62), rgba(12, 10, 24, .72));
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.stage::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 45%,
      transparent 58%,
      rgba(0, 0, 0, .38) 78%,
      rgba(0, 0, 0, .58) 100%);
  opacity: .75;
}

.stage::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background:
    radial-gradient(40% 28% at 50% 52%, rgba(255, 120, 182, .18), transparent 70%),
    radial-gradient(40% 28% at 50% 86%, rgba(255, 120, 182, .12), transparent 72%);
  filter: blur(8px);
  opacity: .7;
}

.envWrap {
  width: min(860px, 94vw);
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
}

.env {
  position: relative;
  height: min(420px, 52vw);
  min-height: 260px;

  background:
    radial-gradient(900px 420px at 50% 15%, rgba(255, 255, 255, .08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)),
    linear-gradient(180deg, var(--envBg1), var(--envBg2));

  border-radius: 22px;
  border: 1.5px solid rgba(255, 120, 182, .55);
  box-shadow:
    0 0 0 1px rgba(255, 120, 182, .10) inset,
    0 26px 90px rgba(0, 0, 0, .45);
  overflow: hidden;
}

.env .neonBorder {
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(255, 120, 182, .85),
      rgba(255, 120, 182, .25),
      rgba(184, 92, 255, .22));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  filter: blur(2px);
  opacity: .95;
}

.env .neonHalo {
  position: absolute;
  inset: -10px;
  border-radius: 30px;
  pointer-events: none;
  border: 1px solid rgba(255, 120, 182, .10);
  box-shadow:
    0 0 26px rgba(255, 120, 182, .22),
    0 0 66px rgba(255, 120, 182, .16);
  opacity: .95;
}

.env::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom right,
      transparent 49.82%,
      rgba(255, 120, 182, .18) 50%,
      transparent 50.18%),
    linear-gradient(to top right,
      transparent 49.82%,
      rgba(255, 120, 182, .18) 50%,
      transparent 50.18%);
  opacity: .78;
  pointer-events: none;
}

.env::after {
  content: "";
  position: absolute;
  left: -18%;
  right: -18%;
  bottom: -40%;
  height: 85%;
  background: radial-gradient(60% 70% at 50% 0%, rgba(255, 120, 182, .30), transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}

.flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 58%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
    linear-gradient(135deg, transparent 49%, rgba(255, 120, 182, .22) 50%, transparent 51%),
    linear-gradient(225deg, transparent 49%, rgba(255, 120, 182, .22) 50%, transparent 51%);
  transform-origin: 50% 0%;
  transition: .85s cubic-bezier(.2, .9, .2, 1);
  z-index: 3;
}

.seal {
  position: absolute;
  left: 50%;
  top: 27%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 120, 182, .18);
  border: 2px solid rgba(255, 120, 182, .72);
  display: grid;
  place-items: center;
  font-size: 22px;
  box-shadow:
    0 0 0 10px rgba(255, 120, 182, .08),
    0 0 35px rgba(255, 120, 182, .30);
  z-index: 5;
  transition: .6s;
}

/* ---------- CARTA ---------- */
.paper {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  height: 240px;

  background:
    radial-gradient(700px 280px at 50% 0%, rgba(255, 120, 182, .10), transparent 62%),
    repeating-linear-gradient(to bottom,
      rgba(120, 130, 170, .12) 0px,
      rgba(120, 130, 170, .12) 1px,
      transparent 1px,
      transparent 22px),
    linear-gradient(180deg, #ffffff, #fff8fc);

  border: 1px solid rgba(255, 120, 182, .18);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .35);

  transform: translateY(150px);
  opacity: 0;
  transition: .85s cubic-bezier(.2, .9, .2, 1);
  z-index: 2;
  padding: 18px 18px 18px 26px;
  color: #1f1f2a;
  overflow: hidden;
}

.paper::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 120, 182, .55), rgba(255, 120, 182, .15));
  opacity: .9;
}

.paper::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 64px;
  height: 64px;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 49%,
      rgba(255, 235, 245, .95) 50%,
      rgba(255, 255, 255, .92) 100%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  box-shadow: -8px 10px 20px rgba(0, 0, 0, .10);
  opacity: .95;
}

.paper h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #1a1a22
}

.paper p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #2f2f3b
}

.paper .paperHint {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(60, 60, 80, .7);
}

/* ---------- TEXTOS / META ---------- */
.meta {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.metaLeft {
  position: absolute;
  left: 88px;
  top: 56%;
  transform: translateY(-50%);
  display: flex;
  gap: 10px;
  align-items: flex-end;
  opacity: .96;
}

.metaRight {
  position: absolute;
  right: 88px;
  bottom: 78px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  opacity: .86;
  max-width: min(320px, 42vw);
}

.metaLabel {
  font-size: 16px;
  color: var(--envTextMuted);
  letter-spacing: .2px;
  white-space: nowrap;
}

.sig {
  font-family: ui-rounded, "Segoe Script", "Bradley Hand", cursive;
  font-size: 28px;
  color: rgba(255, 120, 182, .92);
  text-shadow: 0 0 22px rgba(255, 120, 182, .25);
  transform: translateY(2px);
  white-space: nowrap;
}

.sig.smallSig {
  font-size: 18px;
  opacity: .88;
  white-space: normal;
  line-height: 1.15;
}

.line {
  height: 1px;
  width: 220px;
  background: linear-gradient(90deg, rgba(255, 120, 182, .32), rgba(255, 120, 182, .02));
  border-radius: 999px;
  margin-left: 8px;
  opacity: .65;
}

/* ---------- HINT ---------- */
.hint {
  position: absolute;
  left: 88px;
  bottom: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--envText);
  z-index: 6;
  pointer-events: none;
}

.chev {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 18px rgba(255, 120, 182, .12);
}

/* ---------- BOTÃO SPOTIFY ---------- */
.spotifyBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-top: 6px;

  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;

  color: #fff;
  background: linear-gradient(135deg, #ff78b6, #ff5ca8);
  box-shadow:
    0 6px 18px rgba(255, 120, 182, .35),
    0 0 12px rgba(255, 120, 182, .25);

  transition: all .25s ease;
}

.spotifyBtn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 26px rgba(255, 120, 182, .45),
    0 0 18px rgba(255, 120, 182, .35);
}

.spotifyBtn:active { transform: scale(.98); }

/* ---------- OPEN STATE ---------- */
.envWrap.open .flap { transform: rotateX(170deg) }

.envWrap.open .seal {
  opacity: .25;
  transform: translate(-50%, -50%) scale(.92)
}

.envWrap.open .paper {
  transform: translateY(-20px);
  opacity: 1
}

.paper { z-index: 6; }

.meta { transition: opacity .6s ease, filter .6s ease; }

.envWrap.open .meta {
  opacity: .12;
  filter: blur(6px);
}

.envWrap.open .hint {
  opacity: 0;
  transition: opacity .35s ease;
}

.envWrap.open .hintText::after { content: " (toque de novo)" }

.stage.hidden {
  opacity: 0;
  visibility: hidden;
  transition: .6s
}

/* ---------- RESPONSIVO (ENVELOPE BASE) ---------- */
@media (max-width:520px) {
  .metaLeft { left: 22px }
  .metaRight { right: 22px; bottom: 68px; max-width: 55vw; }
  .hint { left: 22px }
  .line { width: 160px }
  .sig { font-size: 24px }
  .sig.smallSig { font-size: 14px }
}

/* =========================================================
   APP (POST-ITS)
========================================================= */
.wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 16px 30px;
  display: none;
}

.wrap.show { display: block }

header {
  margin-bottom: 15px;
  position: relative;
  padding-right: 150px;
}

h1 {
  margin: 0;
  font-size: 22px;
  text-shadow: 0 6px 26px rgba(255, 120, 182, .12);
}

.sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.pill {
  margin-top: 8px;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 120, 182, .12);
  border: 1px solid rgba(255, 120, 182, .2);
  font-size: 13px;
  color: #555;
}

.saveBtn {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 120, 182, .28);
  background: rgba(255, 255, 255, .65);
  color: #333;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(255, 120, 182, .12);
}

.saveBtn:active { transform: translateY(1px) }

.saveBtn .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 120, 182, .75);
  box-shadow: 0 0 12px rgba(255, 120, 182, .35);
}

/* botão do potinho */
.jarBtn {
  position: absolute;
  top: 44px;
  right: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,120,182,.35);
  background: linear-gradient(135deg,#ffe4f3,#ffd1ea);
  color: #5a3a4a;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255,120,182,.25);
  transition: all .25s ease;
}

.jarBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255,120,182,.35);
}

/* board */
.board {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media(min-width:520px) {
  .board { grid-template-columns: 1fr 1fr; }
}

/* note */
.note {
  padding: 14px;
  border-radius: 16px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .18);
  transform: rotate(var(--rot));
  position: relative;
  cursor: pointer;

  filter: none;
  transition:
    filter 700ms cubic-bezier(.2, .9, .2, 1),
    transform 240ms ease;
}

.note:active { transform: rotate(var(--rot)) scale(.99) }

.note h2 { margin: 0 0 6px; font-size: 15px }
.note p { margin: 0; font-size: 14px; line-height: 1.5 }

.noteHead {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
  font-size: 12px;
  opacity: .9;
}

.note.locked {
  filter: blur(14px) saturate(.90) brightness(1.02);
  transform: rotate(var(--rot)) scale(.985);
}

.note.locked::after {
  content: "toque pra revelar 🤍";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: rgba(20, 20, 30, .52);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
  pointer-events: none;
  filter: none !important;
}

.note.revealed {
  filter: none;
  animation: revealPop 260ms ease-out;
}

@keyframes revealPop {
  from { transform: rotate(var(--rot)) scale(.985) }
  to { transform: rotate(var(--rot)) scale(1) }
}

/* =========================================================
   PARTÍCULAS
========================================================= */
.sparkleLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%,
      rgba(255, 255, 255, .95),
      rgba(255, 120, 182, .75) 45%,
      rgba(255, 120, 182, 0) 72%);
  filter: blur(.2px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  animation: spark 520ms ease-out forwards;
  mix-blend-mode: screen;
}

.spark.star {
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: radial-gradient(circle,
      rgba(255, 255, 255, .95),
      rgba(255, 120, 182, .65) 55%,
      rgba(255, 120, 182, 0) 78%);
  clip-path: polygon(50% 0%,
      62% 36%,
      100% 50%,
      62% 64%,
      50% 100%,
      38% 64%,
      0% 50%,
      38% 36%);
  filter: blur(.1px);
}

@keyframes spark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55) }
  15% { opacity: .95 }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.95) }
}

/* =========================================================
   FOOTER / REDUCED MOTION
========================================================= */
footer {
  margin-top: 25px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .flap, .seal, .paper, .stage.hidden { transition: none !important; }
  .note { transform: none !important; transition: none !important; }
  .note.revealed { animation: none !important; }
  .spark { animation: none !important; display: none !important; }
}

/* =========================================================
   POTINHO (MODAL)
========================================================= */
.jarModal{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(20,10,30,.55);
  backdrop-filter: blur(8px);
  z-index: 200;
  padding: 18px;
}

.jarModal.show{ display:grid; }

.jarContent{
  width: min(560px, 92vw);
  max-height: 75vh;
  background: rgba(255,255,255,.92);
  border-radius: 20px;
  border: 1px solid rgba(255,120,182,.25);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.jarHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,120,182,.15);
}

.jarTitle{
  display:flex;
  gap: 10px;
  align-items:center;
}

.jarEmoji{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(255,120,182,.12);
  border: 1px solid rgba(255,120,182,.18);
}

.jarH{ font-size: 14px; font-weight: 800; color:#5a3a4a; }
.jarSub{ font-size: 12px; opacity:.7; margin-top:2px; }

.closeJar{
  padding: 6px 12px;
  border-radius: 999px;
  border: none;
  background: rgba(255,120,182,.15);
  cursor: pointer;
  font-size: 12px;
}

.jarList{
  padding: 16px;
  overflow-y: auto;
  display: grid;
  gap: 10px;
}

.jarDay{
  width: 100%;
  text-align: left;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,120,182,.08);
  border: 1px solid rgba(255,120,182,.2);
  cursor: pointer;
  transition: .2s ease;
  font-size: 13px;
}

.jarDay:hover{ background: rgba(255,120,182,.15); }

.emptyJar{
  font-size: 13px;
  color: rgba(80,60,70,.7);
  padding: 10px 2px;
}

/* =========================================================
   DIA COMPLETO (MODAL)
========================================================= */
.dayModal{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(20,10,30,.55);
  backdrop-filter: blur(8px);
  z-index: 220;
  padding: 18px;
}
.dayModal.show{ display:grid; }

.dayContent{
  width: min(560px, 92vw);
  max-height: 75vh;
  background: rgba(255,255,255,.92);
  border-radius: 20px;
  border: 1px solid rgba(255,120,182,.25);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dayHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 16px;
  border-bottom: 1px solid rgba(255,120,182,.15);
}

.dayH{ font-size: 14px; font-weight: 800; color:#5a3a4a; }
.daySub{ font-size: 12px; opacity:.7; margin-top:2px; }

.closeDay{
  padding: 6px 12px;
  border-radius: 999px;
  border: none;
  background: rgba(255,120,182,.15);
  cursor: pointer;
  font-size: 12px;
}

.dayBoard{
  padding: 16px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* miniaturas e botão */
.jarMiniNote{
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,120,182,.08);
  border: 1px solid rgba(255,120,182,.18);
  font-size: 12px;
}
.jarMiniNote h4{ margin:0 0 4px; font-size:13px; }

.jarOpenFull{
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg,#ffb7dd,#ff8fc6);
  cursor: pointer;
  font-size: 12px;
  align-self:flex-start;
}

/* =========================================================
   FILTROS (POTINHO) + RESPONSIVO
========================================================= */
.jarFilters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,120,182,.12);
}

.jarSearch{
  flex: 1;
  min-width: 120px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,120,182,.25);
  font-size: 12px;
  outline: none;
}

.jarSearch:focus{
  border-color: rgba(255,120,182,.5);
  box-shadow: 0 0 0 3px rgba(255,120,182,.15);
}

.jarSelect{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,120,182,.25);
  font-size: 12px;
  background: white;
  cursor: pointer;
}

/* ====== POTINHO: RESPONSIVO MOBILE ====== */
@media (max-width: 520px){
  .jarModal{ padding: 12px; }

  .jarContent{
    width: calc(100vw - 24px);
    max-height: 78vh;
    border-radius: 18px;
  }

  .jarHeader{
    gap: 10px;
    align-items: flex-start;
  }

  .jarTitle{
    min-width: 0;
    max-width: 100%;
  }

  .jarH, .jarSub{ word-break: break-word; }

  .jarFilters{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .jarSearch,
  .jarSelect{ width: 100%; }

  .closeJar{
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 360px){
  .jarHeader{
    flex-direction: column;
    align-items: stretch;
  }

  .closeJar{
    width: 100%;
    justify-content: center;
  }
}

/* ===== topo do potinho ===== */
.jarTopBar{
  display:flex;
  justify-content:flex-end;
  padding: 12px 16px 0;
}

.jarHeader{
  padding: 10px 16px 14px;
  border-bottom: none;
}

.jarTitle{
  display:flex;
  gap: 10px;
  align-items:center;
}

.closeJar{
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  background: rgba(255,120,182,.15);
  cursor: pointer;
  font-size: 12px;
}

/* filtros ficam no meio */
.jarFilters{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0 16px 14px;
  border-bottom: 1px solid rgba(255,120,182,.12);
}

.jarSearch,
.jarSelect{ width: 100%; }

/* opcional: no desktop deixa 3 colunas */
@media (min-width: 560px){
  .jarFilters{
    grid-template-columns: 1.2fr .9fr .9fr;
    align-items: center;
  }
}

/* =========================================================
   DROPDOWN CUSTOM (POTINHO)
========================================================= */
.cSelect{
  position: relative;
  width: 100%;
}

.cSelectTrigger{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  padding: 10px 14px;

  border-radius: 999px;
  border: 1.5px solid rgba(255,120,182,.35);
  background: linear-gradient(135deg,#fff6fb,#ffeef7);

  font-size: 13px;
  color: #5a3a4a;
  cursor: pointer;
  transition: all .2s ease;
}

.cSelectTrigger:hover{ border-color: rgba(255,120,182,.6); }

.cSelectTrigger:focus{
  outline: none;
  border-color: rgba(255,120,182,.8);
  box-shadow: 0 0 0 3px rgba(255,120,182,.15);
}

.cSelectChevron{
  font-size: 16px;
  line-height: 1;
  color: rgba(255,120,182,.95);
  transform: translateY(-1px);
}

.cSelect.open .cSelectChevron{
  transform: rotate(180deg) translateY(1px);
}

/* painel */
.cSelectPanel{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);

  background: rgba(255,255,255,.98);
  border: 1px solid rgba(255,120,182,.22);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);

  padding: 6px;
  display: none;

  max-height: 220px;
  overflow: auto;
  z-index: 9999;

  -webkit-overflow-scrolling: touch;
}

.cSelect.open .cSelectPanel{ display: block; }

/* opções */
.cOption{
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: none;
  background: transparent;

  font-size: 13px;
  color: #5a3a4a;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}

.cOption:hover{ background: rgba(255,120,182,.10); }
.cOption:active{ transform: scale(.99); }

.cOption.selected{
  background: rgba(255,120,182,.16);
  font-weight: 700;
}

/* só pra garantir que no mobile não fica “torto” */
@media (max-width:520px){
  .cSelectPanel{ max-height: 42vh; }
}

/* dropdown abrindo pra cima quando precisar */
.cSelectPanel.up{
  top: auto;
  bottom: calc(100% + 8px);
}

/* =========================================================
   HEADER DIA - VOLTAR
========================================================= */
.dayHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  border-bottom:1px solid rgba(255,120,182,.12);
}

.dayHeaderLeft{
  display:flex;
  align-items:center;
  gap:12px;
}

.backToJar{
  border:none;
  background: rgba(255,120,182,.15);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
  transition:.2s;
}

.backToJar:hover{ background: rgba(255,120,182,.25); }


/* =========================================================
   =========================================================
   ENVELOPE VARIANTS / OVERRIDES
   (mantido no fim para preservar o cascade)
   =========================================================
========================================================= */

/* ================= ENVELOPE - VERSÃO B (ROMÂNTICO SUAVE) ================= */

/* fundo */
.stage{
  background:
    radial-gradient(900px 500px at 50% 18%, rgba(255,120,182,.22), transparent 60%),
    radial-gradient(800px 520px at 20% 75%, rgba(184,92,255,.15), transparent 70%),
    linear-gradient(180deg, #3f3344, #2a2330);
  backdrop-filter: blur(14px);
}

.stage::before,
.stage::after{
  opacity: 0;
}

/* envelope */
.env{
  position: relative;
  height: min(420px, 54vw);
  min-height: 270px;

  border-radius: 28px;
  border: 1px solid rgba(255,120,182,.28);

  background:
    radial-gradient(700px 400px at 50% 0%, rgba(255,120,182,.18), transparent 60%),
    linear-gradient(180deg, #403545, #2c2432);

  box-shadow:
    0 28px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,120,182,.15) inset;

  overflow: hidden;
}

/* brilho interno suave */
.env::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(800px 260px at 50% 0%, rgba(255,120,182,.22), transparent 65%);
  opacity:.6;
}

/* linhas do envelope */
.env::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom right, transparent 49.8%, rgba(255,120,182,.35) 50%, transparent 50.2%),
    linear-gradient(to top right, transparent 49.8%, rgba(255,120,182,.35) 50%, transparent 50.2%);
  opacity:.25;
}

/* remove neon antigo */
.env .neonBorder,
.env .neonHalo{
  display:none;
}

/* flap */
.flap{
  height: 56%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(255,120,182,.25), rgba(255,120,182,0));
  border-bottom: 1px solid rgba(255,120,182,.22);
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  transform-origin: 50% 0%;
  transition: .85s cubic-bezier(.2,.9,.2,1);
}

/* selo */
.seal{
  width: 84px;
  height: 84px;
  border-radius: 999px;

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 45%),
    linear-gradient(135deg, #ff78b6, #ff4fa3);

  border: 2px solid rgba(255,255,255,.25);

  box-shadow:
    0 18px 40px rgba(255,120,182,.45),
    0 0 40px rgba(255,120,182,.25);

  color: #fff;
  font-size: 24px;
}

/* textos */
.metaLabel{ color: rgba(255,255,255,.65); }

.sig{
  color: #ff9fd2;
  text-shadow: 0 0 12px rgba(255,120,182,.35);
}

.line{
  background: linear-gradient(90deg, rgba(255,120,182,.6), rgba(255,120,182,0));
}

/* hint */
.hint{ color: rgba(255,255,255,.85); }

.chev{
  border: 1px solid rgba(255,120,182,.3);
  background: rgba(255,120,182,.18);
}

/* carta interna */
.paper{
  background:
    radial-gradient(600px 250px at 50% 0%, rgba(255,120,182,.18), transparent 60%),
    linear-gradient(180deg, #fff7fb, #fff1f8);

  border: 1px solid rgba(255,120,182,.25);
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
}

/* animação */
.envWrap.open .seal{
  opacity:.15;
  transform: translate(-50%, -50%) scale(.92);
}

.envWrap.open .flap{ transform: rotateX(170deg); }

.envWrap.open .meta{
  opacity:.12;
  filter: blur(6px);
}

/* mobile */
@media (max-width:520px){
  .env{ border-radius:22px; }
  .seal{ width:74px; height:74px; }
}

/* ================= ENVELOPE PASTEL (REAL) ================= */

/* overlay mais claro */
.stage{
  background:
    radial-gradient(900px 520px at 50% 12%, rgba(255,120,182,.14), transparent 60%),
    radial-gradient(820px 520px at 15% 30%, rgba(184,92,255,.10), transparent 62%),
    radial-gradient(820px 520px at 85% 35%, rgba(255,200,225,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45));
  backdrop-filter: blur(12px);
}

.stage::before,
.stage::after{
  opacity: 0;
}

/* envelope base: papel */
.env{
  position: relative;
  height: min(420px, 54vw);
  min-height: 270px;

  border-radius: 26px;
  border: 1px solid rgba(255,120,182,.18);

  background:
    radial-gradient(700px 320px at 50% 0%, rgba(255,120,182,.10), transparent 62%),
    linear-gradient(180deg, #fffafc, #fff1f6);

  box-shadow:
    0 18px 55px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,120,182,.06) inset;

  overflow: hidden;
}

/* remove neon antigo */
.env .neonBorder,
.env .neonHalo{
  display:none;
}

/* textura suave */
.env::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,
      rgba(120,130,170,.06) 0px,
      rgba(120,130,170,.06) 1px,
      transparent 1px,
      transparent 18px),
    radial-gradient(900px 380px at 50% 10%, rgba(255,120,182,.08), transparent 65%);
  opacity:.55;
}

/* “V” */
.env::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,
      transparent 49.85%,
      rgba(255,120,182,.18) 50%,
      transparent 50.15%),
    linear-gradient(225deg,
      transparent 49.85%,
      rgba(255,120,182,.18) 50%,
      transparent 50.15%);
  opacity:.55;
}

/* flap */
.flap{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height: 58%;

  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.52)),
    radial-gradient(700px 260px at 50% 0%, rgba(255,120,182,.10), transparent 70%);

  border-bottom: 1px solid rgba(255,120,182,.16);

  border-top-left-radius: 26px;
  border-top-right-radius: 26px;

  transform-origin: 50% 0%;
  transition: .85s cubic-bezier(.2,.9,.2,1);
  z-index: 3;
}

/* sombra flap */
.flap::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 22px;
  background: linear-gradient(180deg, rgba(0,0,0,.10), transparent);
  opacity:.25;
  pointer-events:none;
}

/* selo pastel */
.seal{
  position:absolute;
  left:50%;
  top:27%;
  transform: translate(-50%, -50%);

  width: 78px;
  height: 78px;
  border-radius: 999px;

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), transparent 45%),
    linear-gradient(135deg, #ff97c8, #ff78b6);

  border: 2px solid rgba(255,255,255,.60);

  box-shadow:
    0 16px 34px rgba(255,120,182,.22),
    0 0 0 10px rgba(255,120,182,.08);

  color: #fff;
  font-size: 22px;
  z-index: 5;
  transition: .6s;
}

/* textos pastel */
.metaLabel{
  color: rgba(50,50,65,.55);
  font-weight: 600;
}

.sig{
  color: rgba(255,120,182,.95);
  text-shadow: none;
}

.line{
  background: linear-gradient(90deg, rgba(255,120,182,.28), rgba(255,120,182,0));
  opacity: .85;
}

.hint{ color: rgba(30,30,45,.72); }

.chev{
  border: 1px solid rgba(255,120,182,.20);
  background: rgba(255,120,182,.08);
  box-shadow: none;
}

/* cartinha interna */
.paper{
  background:
    radial-gradient(700px 280px at 50% 0%, rgba(255,120,182,.12), transparent 62%),
    repeating-linear-gradient(to bottom,
      rgba(120,130,170,.10) 0px,
      rgba(120,130,170,.10) 1px,
      transparent 1px,
      transparent 22px),
    linear-gradient(180deg, #ffffff, #fff8fc);

  border: 1px solid rgba(255,120,182,.18);
  box-shadow: 0 22px 55px rgba(0,0,0,.18);
}

/* abrir */
.envWrap.open .flap{ transform: rotateX(170deg); }

.envWrap.open .seal{
  opacity: .20;
  transform: translate(-50%, -50%) scale(.92);
}

.envWrap.open .meta{
  opacity: .10;
  filter: blur(6px);
}

/* mobile */
@media (max-width:520px){
  .env{ border-radius: 22px; }
  .flap{
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
  }
  .seal{ width: 70px; height: 70px; }
}

/* ================= ENVELOPE REAL - RELEVO + ETIQUETA ================= */

/* borda interna */
.env{
  box-shadow:
    0 18px 55px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,120,182,.06) inset,
    0 0 0 10px rgba(255,255,255,.35) inset;
}

/* relevo diagonais */
.env::before{
  opacity: 1;
  background:
    linear-gradient(135deg,
      transparent 49.55%,
      rgba(0,0,0,.08) 50%,
      transparent 50.45%),
    linear-gradient(225deg,
      transparent 49.55%,
      rgba(0,0,0,.08) 50%,
      transparent 50.45%),

    linear-gradient(135deg,
      transparent 49.85%,
      rgba(255,255,255,.55) 50%,
      transparent 50.15%),
    linear-gradient(225deg,
      transparent 49.85%,
      rgba(255,255,255,.55) 50%,
      transparent 50.15%),

    linear-gradient(135deg,
      transparent 49.95%,
      rgba(255,120,182,.16) 50%,
      transparent 50.05%),
    linear-gradient(225deg,
      transparent 49.95%,
      rgba(255,120,182,.16) 50%,
      transparent 50.05%);
}

/* etiqueta (tipo carta) */
.env::after{ opacity:.55; }

.env .meta::before{
  content:"";
  position:absolute;
  left: 64px;
  top: 58%;
  width: min(360px, 60vw);
  height: 110px;
  border-radius: 16px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.52));
  border: 1px solid rgba(255,120,182,.16);

  box-shadow:
    0 10px 26px rgba(0,0,0,.08);

  opacity: .55;
}

/* pontilhado */
.env .meta::after{
  content:"";
  position:absolute;
  left: 82px;
  top: calc(58% + 18px);
  width: min(320px, 52vw);
  height: 74px;
  border-radius: 12px;
  border: 1px dashed rgba(255,120,182,.22);
  opacity: .65;
}

.meta{ z-index: 6; }

/* ajusta texto */
.metaLeft{ left: 88px; top: 62%; }
.hint{ left: 88px; bottom: 44px; }

/* selo textura */
.seal{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 45%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,.08), transparent 55%),
    linear-gradient(135deg, #ff9fd2, #ff78b6);
}

/* mobile etiqueta */
@media (max-width:520px){
  .env .meta::before{
    left: 18px;
    width: calc(100% - 36px);
    top: 60%;
    height: 118px;
  }
  .env .meta::after{
    left: 32px;
    width: calc(100% - 64px);
    top: calc(60% + 18px);
  }
  .metaLeft{ left: 32px; top: 63%; }
  .metaRight{ right: 32px; }
  .hint{ left: 32px; }
}

/* ================= ENVELOPE - MÍSTICO SOLAR ================= */

/* paleta solar (pastel) */
:root{
  --sunGold: #ffc86b;
  --sunGoldSoft: rgba(255, 200, 107, .35);
  --sunGlow: rgba(255, 200, 107, .22);
  --sunPink: rgba(255, 120, 182, .18);
}

/* overlay amanhecer */
.stage{
  background:
    radial-gradient(950px 520px at 50% 14%, rgba(255, 200, 107, .20), transparent 62%),
    radial-gradient(820px 520px at 20% 32%, rgba(255, 120, 182, .14), transparent 62%),
    radial-gradient(820px 520px at 82% 42%, rgba(184, 92, 255, .10), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.46));
  backdrop-filter: blur(12px);
}

.stage::before,
.stage::after{ opacity: 0; }

/* envelope base (papel + sol) */
.env{
  border: 1px solid rgba(255, 190, 95, .22);
  border-radius: 26px;

  background:
    radial-gradient(760px 340px at 50% 0%, rgba(255, 200, 107, .16), transparent 65%),
    radial-gradient(640px 280px at 78% 15%, rgba(255, 120, 182, .10), transparent 68%),
    linear-gradient(180deg, #fffaf6, #fff3f8);

  box-shadow:
    0 18px 55px rgba(0,0,0,.16),
    0 0 0 1px rgba(255, 200, 107, .06) inset,
    0 0 0 10px rgba(255,255,255,.35) inset;
}

/* remove neon antigo */
.env .neonBorder,
.env .neonHalo{ display:none; }

/* textura + poeirinha */
.env::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(2px 2px at 14% 22%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(2px 2px at 38% 12%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.6px 1.6px at 62% 18%, rgba(255,255,255,.40), transparent 60%),
    radial-gradient(2px 2px at 84% 28%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.6px 1.6px at 72% 52%, rgba(255,255,255,.35), transparent 60%),

    repeating-linear-gradient(0deg,
      rgba(120,130,170,.05) 0px,
      rgba(120,130,170,.05) 1px,
      transparent 1px,
      transparent 18px),

    radial-gradient(900px 380px at 50% 12%, rgba(255, 200, 107, .14), transparent 65%);

  opacity:.65;
}

/* dobra do envelope douradinha */
.env::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 1;

  background:
    linear-gradient(135deg, transparent 49.55%, rgba(0,0,0,.07) 50%, transparent 50.45%),
    linear-gradient(225deg, transparent 49.55%, rgba(0,0,0,.07) 50%, transparent 50.45%),

    linear-gradient(135deg, transparent 49.85%, rgba(255,255,255,.55) 50%, transparent 50.15%),
    linear-gradient(225deg, transparent 49.85%, rgba(255,255,255,.55) 50%, transparent 50.15%),

    linear-gradient(135deg, transparent 49.95%, rgba(255,200,107,.20) 50%, transparent 50.05%),
    linear-gradient(225deg, transparent 49.95%, rgba(255,200,107,.20) 50%, transparent 50.05%);
}

/* flap quente */
.flap{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.52)),
    radial-gradient(700px 260px at 50% 0%, rgba(255,200,107,.18), transparent 70%);
  border-bottom: 1px solid rgba(255, 200, 107, .18);
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
}

.flap::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 22px;
  background: linear-gradient(180deg, rgba(0,0,0,.10), transparent);
  opacity:.22;
  pointer-events:none;
}

/* selo “solzinho” */
.seal{
  width: 80px;
  height: 80px;
  border-radius: 999px;

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 45%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,.08), transparent 55%),
    linear-gradient(135deg, #ffd79a, #ffc86b);

  border: 2px solid rgba(255,255,255,.62);

  box-shadow:
    0 16px 34px rgba(255, 200, 107, .22),
    0 0 0 10px rgba(255, 200, 107, .10);

  color: rgba(255,255,255,.95);
  font-size: 22px;
}

/* troca coração por sol */
.seal{ font-size: 0; }
.seal::before{
  content:"☀";
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(255, 200, 107, .25));
}

/* etiqueta dourada */
.env .meta::before{
  content:"";
  position:absolute;
  left: 64px;
  top: 58%;
  width: min(360px, 60vw);
  height: 110px;
  border-radius: 16px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.52));
  border: 1px solid rgba(255, 200, 107, .18);

  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  opacity: .60;
}

.env .meta::after{
  content:"";
  position:absolute;
  left: 82px;
  top: calc(58% + 18px);
  width: min(320px, 52vw);
  height: 74px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 200, 107, .28);
  opacity: .70;
}

.meta{ z-index: 6; }

/* textos quentinhos */
.metaLabel{
  color: rgba(50,50,65,.55);
  font-weight: 600;
}

.sig{
  color: rgba(255, 146, 196, .96);
  text-shadow: none;
}

.line{
  background: linear-gradient(90deg, rgba(255, 200, 107, .30), rgba(255, 200, 107, 0));
  opacity: .9;
}

.hint{ color: rgba(30,30,45,.72); }

.chev{
  border: 1px solid rgba(255, 200, 107, .22);
  background: rgba(255, 200, 107, .10);
  box-shadow: none;
}

/* animação ao abrir */
.envWrap.open .flap{ transform: rotateX(170deg); }

.envWrap.open .seal{
  opacity: .20;
  transform: translate(-50%, -50%) scale(.92);
}

.envWrap.open .meta{
  opacity: .10;
  filter: blur(6px);
}

/* mobile refinado */
@media (max-width:520px){
  .env{ border-radius: 22px; }
  .flap{
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
  }
  .seal{ width: 72px; height: 72px; }

  .env .meta::before{
    left: 18px;
    width: calc(100% - 36px);
    top: 60%;
    height: 118px;
  }
  .env .meta::after{
    left: 32px;
    width: calc(100% - 64px);
    top: calc(60% + 18px);
  }
  .metaLeft{ left: 32px; top: 63%; }
  .metaRight{ right: 32px; }
  .hint{ left: 32px; }
}

/* ================= CARIMBO MÍSTICO SOLAR  ================= */
/* adiciona um “sigilo” no canto do envelope */

.env{ position: relative; }

.env::marker{ content:""; } /* ignora */

.env .meta{ position: absolute; inset:0; } /* garante referência */

/* carimbo no canto */
.env .meta::before{
  content:"";
  position:absolute;
  right: 46px;
  bottom: 46px;

  width: 118px;
  height: 118px;
  border-radius: 999px;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.00) 53%,
      rgba(255,200,107,.22) 54%,
      rgba(255,200,107,.22) 56%,
      rgba(255,255,255,.00) 57%),

    radial-gradient(circle at 50% 50%,
      rgba(255,200,107,.10),
      rgba(255,200,107,0) 70%);

  box-shadow:
    0 10px 24px rgba(0,0,0,.10);

  opacity: .55;
  pointer-events:none;
}

/* raios e pontinhos */
.env .meta::after{
  content:"";
  position:absolute;
  right: 46px;
  bottom: 46px;

  width: 118px;
  height: 118px;
  border-radius: 999px;

  background:
    conic-gradient(
      from 0deg,
      rgba(255,200,107,.0) 0 8deg,
      rgba(255,200,107,.28) 8deg 10deg,
      rgba(255,200,107,.0) 10deg 18deg,
      rgba(255,200,107,.22) 18deg 20deg,
      rgba(255,200,107,.0) 20deg 28deg,
      rgba(255,200,107,.28) 28deg 30deg,
      rgba(255,200,107,.0) 30deg 360deg
    ),

    radial-gradient(2px 2px at 25% 30%, rgba(255,200,107,.55), transparent 60%),
    radial-gradient(2px 2px at 70% 26%, rgba(255,200,107,.45), transparent 60%),
    radial-gradient(2px 2px at 78% 68%, rgba(255,200,107,.40), transparent 60%),
    radial-gradient(2px 2px at 34% 76%, rgba(255,200,107,.35), transparent 60%);

  opacity: .45;
  filter: blur(.1px);
  pointer-events:none;
}

/* mobile */
@media (max-width:520px){
  .env .meta::before,
  .env .meta::after{
    right: 18px;
    bottom: 18px;
    width: 96px;
    height: 96px;
  }
}

/* ================= CARIMBO SOL + LUA  ================= */

.env{ position: relative; }

/* círculo base */
.env .meta::before{
  content:"";
  position:absolute;
  right: 46px;
  bottom: 46px;

  width: 118px;
  height: 118px;
  border-radius: 999px;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0) 52%,
      rgba(255,200,107,.22) 53%,
      rgba(255,200,107,.22) 55%,
      rgba(255,255,255,0) 56%),

    radial-gradient(circle at 50% 50%,
      rgba(255,120,182,.12),
      rgba(255,120,182,0) 70%);

  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  opacity: .55;
  pointer-events:none;
}

/* símbolos + pontinhos */
.env .meta::after{
  content:"";
  position:absolute;
  right: 46px;
  bottom: 46px;

  width: 118px;
  height: 118px;
  border-radius: 999px;

  background:
    radial-gradient(10px 10px at 38% 50%, rgba(255,200,107,.55), transparent 65%),
    radial-gradient(18px 18px at 38% 50%, rgba(255,200,107,.18), transparent 70%),

    radial-gradient(12px 12px at 66% 50%, rgba(184,92,255,.30), transparent 65%),
    radial-gradient(12px 12px at 69% 50%, rgba(255,255,255,.80), transparent 66%),

    conic-gradient(
      from 0deg at 38% 50%,
      rgba(255,200,107,0) 0 12deg,
      rgba(255,200,107,.30) 12deg 14deg,
      rgba(255,200,107,0) 14deg 24deg,
      rgba(255,200,107,.22) 24deg 26deg,
      rgba(255,200,107,0) 26deg 360deg
    ),

    radial-gradient(2px 2px at 22% 30%, rgba(255,200,107,.45), transparent 60%),
    radial-gradient(2px 2px at 76% 26%, rgba(184,92,255,.35), transparent 60%),
    radial-gradient(2px 2px at 78% 74%, rgba(255,120,182,.32), transparent 60%),
    radial-gradient(2px 2px at 30% 78%, rgba(255,200,107,.32), transparent 60%);

  opacity: .48;
  filter: blur(.1px);
  pointer-events:none;
}

/* mobile */
@media (max-width:520px){
  .env .meta::before,
  .env .meta::after{
    right: 18px;
    bottom: 18px;
    width: 96px;
    height: 96px;
  }
}

/* ================= AUTH GATE ================= */
.authGate{
  position: fixed;
  inset: 0;
  display: none;                 /* escondido */
  align-items: center;
  justify-content: center;
  z-index: 999;

  /* fundo mais “carta/noite” com glow */
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(255,120,182,.18), transparent 62%),
    radial-gradient(820px 520px at 20% 78%, rgba(184,92,255,.14), transparent 70%),
    radial-gradient(820px 520px at 85% 20%, rgba(255,255,255,.10), transparent 70%),
    linear-gradient(180deg, rgba(10,10,18,.68), rgba(10,10,18,.78));

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.authGate::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events:none;

  /* vinheta suave + “film grain” bem leve */
  background:
    radial-gradient(120% 120% at 50% 45%,
      transparent 58%,
      rgba(0, 0, 0, .38) 78%,
      rgba(0, 0, 0, .58) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px);
  opacity: .42;
  mix-blend-mode: overlay;
}

.authGate.show{
  display: flex;                  /* abre e centraliza */
}

.authCard{
  width: min(360px, 92vw);
  border-radius: 26px;
  padding: 22px 20px 18px;

  /* glass bonitinho */
  background:
    radial-gradient(700px 260px at 30% 0%, rgba(255,120,182,.20), transparent 60%),
    linear-gradient(180deg, rgba(28,28,38,.78), rgba(18,18,26,.78));
  border: 1px solid rgba(255,255,255,.12);

  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,120,182,.10) inset,
    0 0 36px rgba(255,120,182,.22);

  color: rgba(255,255,255,.92);
  position: relative;
  overflow: hidden;
}

.authCard::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  border-radius: 28px;

  /* borda “neon” bem suave */
  background: linear-gradient(180deg,
      rgba(255,120,182,.55),
      rgba(255,120,182,.18),
      rgba(184,92,255,.16));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  filter: blur(1.6px);
  opacity: .9;
}

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

.authTitle{
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .2px;
}

.authSub{
  margin: 6px 0 0;
  font-size: 13px;
  opacity: .78;
  line-height: 1.4;
}

.authBtn{
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: 16px;

  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .18s ease;

  background: linear-gradient(135deg, rgba(255,120,182,1), rgba(255,79,163,1));
  box-shadow:
    0 16px 40px rgba(255,120,182,.28),
    0 0 18px rgba(255,120,182,.18);
}

.authBtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow:
    0 22px 54px rgba(255,120,182,.34),
    0 0 22px rgba(255,120,182,.22);
}

.authBtn:active{
  transform: translateY(0);
}

.authBtn[disabled]{
  opacity: .65;
  cursor: not-allowed;
  filter: grayscale(.15);
}

/* “ícone” do google simplificado */
.gIcon{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      #4285F4 0 25%,
      #34A853 25% 50%,
      #FBBC05 50% 75%,
      #EA4335 75% 100%);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.12),
    0 10px 18px rgba(0,0,0,.25);
}

.authHint{
  margin: 14px 0 0;
  font-size: 12px;
  opacity: .62;
  text-align: center;
  letter-spacing: .15px;
}

/* opcional: esconder scroll enquanto o gate tá aberto */
body.authLock{
  overflow: hidden;
}

.userBar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  height: 52px;

  display: none;
  align-items: center;
  justify-content: space-between;

  padding: 0 18px;

  background: rgba(18,18,22,.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);

  z-index: 9999;
}

.userBar.show{
  display: flex;
}

.userEmail{
  font-size: 13px;
  color: #fff;
  opacity: .85;
  font-weight: 600;
}

.logoutBtn{
  border: none;
  background: rgba(255,120,182,.25);
  color: #fff;
  padding: 6px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s ease;
}

.logoutBtn:hover{
  background: rgba(255,120,182,.4);
}

/* =========================================================
   CRIAR POST-IT (BOTÃO + MODAL) + "CRIADO POR"
========================================================= */

.createBtn{
  position: absolute;
  top: 88px;
  right: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,120,182,.35);
  background: linear-gradient(135deg,#fff6fb,#ffe1f2);
  color: #5a3a4a;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255,120,182,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}

.createBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255,120,182,.32);
}

.createBtn:active{ transform: translateY(0); }

.createBtn[disabled]{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.createModal{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(20,10,30,.55);
  backdrop-filter: blur(8px);
  z-index: 230;
  padding: 18px;
}

.createModal.show{ display: grid; }

.createCard{
  width: min(560px, 92vw);
  background: rgba(255,255,255,.94);
  border-radius: 20px;
  border: 1px solid rgba(255,120,182,.25);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  overflow: hidden;
}

.createTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,120,182,.14);
}

.createH{
  font-size: 14px;
  font-weight: 900;
  color: #5a3a4a;
}

.createClose{
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  background: rgba(255,120,182,.15);
  cursor: pointer;
  font-size: 12px;
}

.createBody{
  padding: 14px 16px 16px;
  display: grid;
  gap: 10px;
}

.createRow{ display:grid; gap: 6px; }

.createLabel{
  font-size: 12px;
  color: rgba(90,58,74,.75);
  font-weight: 700;
}

.createInput,
.createTextarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,120,182,.25);
  background: #fff;
  font-size: 13px;
  outline: none;
}

.createTextarea{
  min-height: 110px;
  resize: none;
  line-height: 1.45;
}

.createInput:focus,
.createTextarea:focus{
  border-color: rgba(255,120,182,.55);
  box-shadow: 0 0 0 3px rgba(255,120,182,.15);
}

.createActions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 6px;
}

.createSave{
  padding: 10px 14px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg,#ff9fd2,#ff78b6);
  box-shadow: 0 10px 22px rgba(255,120,182,.28);
}

.createCancel{
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,120,182,.22);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #5a3a4a;
  background: rgba(255,255,255,.75);
}

/* "feito por ..." no post-it */
.noteBy{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(40,40,55,.65);
}

.noteBy .dotBy{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,120,182,.75);
  box-shadow: 0 0 10px rgba(255,120,182,.25);
}

.note .noteFoot{
  margin-top: 10px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  opacity: .92;
}

.musicRow{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.checkLine{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(80,60,70,.85);
  font-weight: 600;
}

.checkLine input{
  width: 16px;
  height: 16px;
  accent-color: #ff78b6;
}

.musicUrl{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,120,182,.25);
  outline: none;
  font-size: 13px;
  background: rgba(255,255,255,.75);
}

.musicUrl:focus{
  border-color: rgba(255,120,182,.55);
  box-shadow: 0 0 0 3px rgba(255,120,182,.15);
}

.musicUrl:disabled{
  opacity: .55;
}

.noteFoot{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.noteDel{
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  color: #333;
  padding: 6px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  opacity: .9;
  transition: transform .12s ease, opacity .12s ease, background .12s ease;
}

.noteDel:hover{
  opacity: 1;
  background: rgba(255,255,255,.75);
  transform: translateY(-1px);
}

.noteDel:active{
  transform: translateY(0);
}

/* =========================================================
   CONFIRM MODAL (apagar)
========================================================= */
.confirmModal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}

.confirmModal.show{ display:flex; }

.confirmCard{
  width: min(420px, 96vw);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  border: 1px solid rgba(255,120,182,.25);
  overflow: hidden;
}

.confirmTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.confirmH{
  font-weight: 900;
  letter-spacing: .2px;
}

.confirmClose{
  border: none;
  background: rgba(255,120,182,.15);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.confirmBody{ padding: 14px 16px 16px; }

.confirmText{
  margin: 0;
  color: rgba(0,0,0,.75);
  line-height: 1.35;
}

.confirmActions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  justify-content:flex-end;
}

.confirmCancel{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.7);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.confirmOk{
  border: none;
  background: linear-gradient(135deg, rgba(255,120,182,.95), rgba(255,150,210,.95));
  color: white;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
}

.confirmOk:disabled{
  opacity: .7;
  cursor: not-allowed;
}

/* =========================================================
   CONFIRM MODAL (animado)
========================================================= */

.confirmModal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  animation: fadeIn .25s ease;
}

.confirmModal.show{
  display:flex;
}

.confirmCard{
  width: min(420px, 96vw);
  border-radius: 22px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 25px 70px rgba(0,0,0,.3);
  border: 1px solid rgba(255,120,182,.25);
  overflow: hidden;
  animation: popIn .28s cubic-bezier(.2,.9,.3,1.2);
}

/* entrada suave */
@keyframes fadeIn{
  from{ opacity:0 }
  to{ opacity:1 }
}

@keyframes popIn{
  0%{
    transform: scale(.85) translateY(10px);
    opacity:0;
  }
  100%{
    transform: scale(1) translateY(0);
    opacity:1;
  }
}

/* micro bounce */
.confirmCard.bounce{
  animation: popIn .28s cubic-bezier(.2,.9,.3,1.2),
             subtleBounce .6s ease .25s;
}

@keyframes subtleBounce{
  0%{ transform: scale(1) }
  50%{ transform: scale(1.02) }
  100%{ transform: scale(1) }
}

/* shake quando cancelar */
.confirmCard.shake{
  animation: shake .4s ease;
}

@keyframes shake{
  0%{ transform: translateX(0) }
  20%{ transform: translateX(-6px) }
  40%{ transform: translateX(6px) }
  60%{ transform: translateX(-4px) }
  80%{ transform: translateX(4px) }
  100%{ transform: translateX(0) }
}


/* =========================================================
   NOTE FOCUS (destacar post-it revelado)
========================================================= */
.noteFocusOverlay{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 18px;
  z-index: 260;

  background: rgba(12, 10, 24, .55);
  backdrop-filter: blur(10px);
}

.noteFocusOverlay.show{ display: grid; }

.noteFocusCard{
  width: min(560px, 92vw);
  max-height: 78vh;
  overflow: auto;

  border-radius: 22px;
  border: 1px solid rgba(255,120,182,.25);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);

  padding: 16px 16px 18px;
  transform: translateY(6px) scale(.98);
  animation: focusPop .22s ease-out forwards;
}

@keyframes focusPop{
  to{ transform: translateY(0) scale(1); }
}

.noteFocusClose{
  position: sticky;
  top: 0;
  margin-left: auto;
  display: block;

  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,120,182,.22);
  font-size: 12px;
}

.noteFocusHead{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.noteFocusPin{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(0,0,0,.06);
}

.noteFocusMeta{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.noteFocusBy{
  font-size: 12px;
  font-weight: 800;
  color: rgba(40,40,55,.75);
  text-transform: lowercase;
}

.noteFocusWhen{
  font-size: 11px;
  color: rgba(40,40,55,.55);
}

.noteFocusTitle{
  margin: 12px 0 8px;
  font-size: 18px;
}

.noteFocusText{
  font-size: 15px;
  line-height: 1.55;
}

.noteFocusText a.spotifyBtn{ display: inline-flex; }

.noteFocusActions{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.noteFocusDel{
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 12px;

  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,120,182,.25);
}
.noteFocusDel:active{ transform: scale(.99); }


/* =========================================================
   CRIAR POST-IT - ESCOLHER COR
========================================================= */
.colorPickRow{
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.colorPickLabel{
  font-size: 12px;
  font-weight: 800;
  color: rgba(70,50,65,.75);
}

.colorPickSwatches{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.colorSwatch{
  width: 28px;
  height: 28px;
  border-radius: 12px;
  border: 2px solid rgba(255,120,182,.22);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.colorSwatch:hover{ transform: translateY(-1px); border-color: rgba(255,120,182,.55); }
.colorSwatch:active{ transform: scale(.98); }

.colorSwatch.selected{
  border-color: rgba(255,120,182,.95);
  box-shadow: 0 0 0 4px rgba(255,120,182,.18), 0 12px 26px rgba(0,0,0,.14);
}

.colorCustomWrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,120,182,.25);
  background: rgba(255,255,255,.65);
  cursor: pointer;
}

.colorCustomIcon{ font-size: 14px; opacity: .85; }

.colorCustom{
  width: 34px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* =========================================================
   EMPTY STATE (tela vazia - layout melhorado)
========================================================= */

.boardEmpty {
  min-height: 46vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emptyCard {
  width: 100%;
  border-radius: 22px;
  padding: 18px 16px;

  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(255, 120, 182, 0.10) inset;

  position: relative;
  overflow: hidden;
}

.emptyCard::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background:
    radial-gradient(600px 220px at 18% 10%, rgba(255, 120, 182, 0.22), transparent 60%),
    radial-gradient(520px 240px at 85% 15%, rgba(184, 92, 255, 0.14), transparent 60%),
    radial-gradient(520px 260px at 40% 120%, rgba(255, 200, 225, 0.16), transparent 65%);
  opacity: 0.9;
}

.emptyTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.emptyBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;

  border: 1px solid rgba(255, 120, 182, 0.22);
  background: rgba(255, 120, 182, 0.10);

  font-size: 12px;
  color: rgba(60, 60, 80, 0.85);
}

.emptyTitle {
  margin: 8px 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: rgba(25, 25, 34, 0.92);
  position: relative;
  z-index: 1;
}

.emptyText {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(60, 60, 80, 0.78);
  position: relative;
  z-index: 1;
  white-space: pre-line;
}

.emptyActions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.emptyPrimaryBtn {
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  font-weight: 800;
  font-size: 13px;
  color: #5a3a4a;

  background: linear-gradient(135deg, #ffb7dd, #ff8fc6);
  box-shadow:
    0 14px 34px rgba(255, 120, 182, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.50) inset;

  transition: transform 180ms ease, box-shadow 180ms ease;
}

.emptyPrimaryBtn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 44px rgba(255, 120, 182, 0.40),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.emptyPrimaryBtn:active {
  transform: translateY(0px) scale(0.99);
}

.emptyHint {
  font-size: 12px;
  color: rgba(60, 60, 80, 0.62);
}

@media (max-width: 520px) {
  .boardEmpty { min-height: 44vh; }
  .emptyCard { padding: 16px 14px; border-radius: 20px; }
  .emptyTitle { font-size: 15px; }
}


/* =========================================================
   BUTTON REFINEMENT (Mobile Slim Version)
   ========================================================= */

/* General buttons */
button {
  padding: 9px 14px !important;
  border-radius: 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

/* Pill style buttons */
.pill,
.pillBtn,
.jarDay,
.jarOpenFull,
.emptyPrimaryBtn {
  padding: 8px 14px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
}

/* Top action buttons (potinho / escrever / fechar envelope) */
#jarBtn,
#createBtn,
#backBtn {
  padding: 10px 16px !important;
  border-radius: 18px !important;
}

/* Reduce heavy shadows if present */
button,
.pill,
.jarDay {
  box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
}

/* Press effect (more app-like) */
button:active {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

/* =========================================================
   AJUSTE DE ESPAÇAMENTO + BOTÕES MAIS FINOS
========================================================= */

/* espaço entre botões e primeiro post-it */
.board {
  margin-top: 32px;
}

/* botões mais finos e elegantes */
.saveBtn,
.jarBtn,
.jarDay,
.jarOpenFull,
.closeJar,
.closeDay,
.backToJar,
.authBtn {
  padding: 8px 14px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
  font-weight: 600;
}

/* efeito toque mais app */
.saveBtn:active,
.jarBtn:active,
.jarDay:active,
.jarOpenFull:active,
.authBtn:active {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

/* iOS não dar zoom ao focar */
input,
textarea,
select {
  font-size: 16px !important;
}

/* =========================================================
   APP VERSION (sutil no rodapé)
========================================================= */
.appVersion{
  position: fixed;
  right: 10px;
  bottom: calc(6px + env(safe-area-inset-bottom));
  font-size: 11px;
  letter-spacing: .2px;
  opacity: .35;
  color: rgba(30,30,45,.75);
  pointer-events: none;
  z-index: 9999;
}

/* 🔥 Mobile: sempre um post-it por linha */
@media (max-width: 768px) {
  #board {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
    align-items: center;
  }

  .note {
    width: 100%;
    max-width: 420px;
  }
}