/* ==========================================================================
   NostalgiaTrack — Design system (Brand Kit "Música, Memória e Cultura Retrô")
   Mobile-first. Em telas largas o app vira um "aparelho" centralizado;
   o Painel dev usa layout largo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fontes (locais — funcionam offline)
   -------------------------------------------------------------------------- */
@font-face { font-family: "Merriweather"; font-weight: 700; font-display: swap; src: url("assets/fonts/merriweather-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Merriweather"; font-weight: 900; font-display: swap; src: url("assets/fonts/merriweather-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("assets/fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("assets/fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("assets/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --indigo: #1B1F4B;  --indigo-700: #14173A;  --indigo-500: #2A2F66;  --indigo-100: #E4E5F0;
  --orange: #E36C2A;  --orange-600: #C9581B;  --orange-100: #FBE3D4;
  --green:  #0B8F58;  --green-600:  #087648;  --green-100:  #D5EEE2;
  --cream:  #F5E9D6;  --cream-50:   #FFFBF4;  --cream-200:  #EADBC2;
  --graphite: #333333; --graphite-60: #6B6458;
  --ink: var(--indigo);      /* títulos e textos de destaque */
  --on-dark: var(--cream);   /* texto sobre faixas escuras (topo, barra inferior) */
  --surface: #fff;           /* campos, listas e cartões internos */
  --page: var(--cream);      /* fundo da página */
  --danger: #B3261E;  --danger-100: #F7DEDC;

  /* mídia e raridade (gráficos) */
  --m-vinil: var(--indigo); --m-k7: var(--orange); --m-vhs: #333; --m-cartucho: var(--green);
  --r-comum: #B9AE9C; --r-incomum: var(--green); --r-raro: var(--orange); --r-lendario: var(--indigo);

  --font-title: "Merriweather", Georgia, serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 8px; --radius: 14px; --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(27,31,75,.08), 0 1px 1px rgba(27,31,75,.04);
  --shadow:    0 6px 18px -6px rgba(27,31,75,.22), 0 2px 4px rgba(27,31,75,.06);
  --shadow-lg: 0 18px 40px -12px rgba(27,31,75,.45);

  --app-max: 560px; --app-wide: 1180px;
  --appbar-h: 64px; --nav-h: 66px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 16px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  color: var(--graphite); background: var(--indigo-700);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
body.is-locked { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
svg { width: 1.25em; height: 1.25em; flex: none; }
.leaflet-pane svg { width: auto; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--orange-600); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

@media (min-width: 600px) {
  body {
    background:
      radial-gradient(circle at 12% 8%, rgba(227,108,42,.18), transparent 40%),
      radial-gradient(circle at 88% 92%, rgba(11,143,88,.16), transparent 40%),
      var(--indigo-700);
    background-attachment: fixed;
  }
}

/* --------------------------------------------------------------------------
   3. Splash animada
   -------------------------------------------------------------------------- */
.splash {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, var(--indigo-500), var(--indigo) 55%, var(--indigo-700));
  transition: opacity .6s var(--ease), visibility .6s;
}
.splash.is-leaving { opacity: 0; visibility: hidden; }
.splash.is-leaving .splash__center { transform: scale(1.06); }
.splash__center { display: flex; flex-direction: column; align-items: center; transition: transform .6s var(--ease); z-index: 1; }

.splash__logo { width: 150px; height: auto; overflow: visible; }
.splash__pin { transform-origin: 100px 190px; animation: pinDrop .9s cubic-bezier(.3,1.5,.5,1) both; }
.splash__shadow { transform-origin: 100px 214px; animation: shadowIn .9s var(--ease) both; }
.splash__reel { animation: reel 1.1s linear .7s infinite; }
.splash__reel--l { transform-origin: 72px 96px; }
.splash__reel--r { transform-origin: 128px 96px; }
.splash__arch { transform-origin: 100px 70px; animation: archPop .5s var(--ease) .55s both; }

.splash__title {
  margin: 22px 0 6px; color: var(--on-dark);
  font-family: var(--font-title); font-weight: 900; font-size: 34px; letter-spacing: -.01em;
  animation: rise .6s var(--ease) .75s both;
}
.splash__tagline {
  display: flex; align-items: center; gap: 10px; margin: 0;
  color: var(--orange); font-size: 13px; font-weight: 600; letter-spacing: .04em;
  animation: rise .6s var(--ease) .95s both;
}
.splash__tagline span { width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.splash__progress { width: 140px; height: 4px; margin-top: 30px; border-radius: 4px; background: rgba(245,233,214,.12); overflow: hidden; animation: rise .4s var(--ease) 1.1s both; }
.splash__progress i { display: block; height: 100%; width: 40%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--green)); animation: progress 1.2s ease-in-out 1.1s infinite; }

.splash__waves { position: absolute; left: -10%; right: -10%; bottom: -60px; height: 220px; }
.splash__wave { position: absolute; inset: 0; border-radius: 50% 50% 0 0; transform: translateY(100%) rotate(-5deg); animation: waveIn 1s var(--ease) both; }
.splash__wave--green  { background: var(--green);  animation-delay: .15s; }
.splash__wave--cream  { background: var(--cream);  top: 22px; animation-delay: .25s; }
.splash__wave--orange { background: var(--orange); top: 44px; animation-delay: .35s; }

@keyframes pinDrop  { 0% { transform: translateY(-140px) scale(.85); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes shadowIn { 0% { transform: scaleX(.2); opacity: 0; } 100% { transform: none; opacity: .55; } }
@keyframes archPop  { from { transform: scale(.6); } to { transform: none; } }
@keyframes reel     { to { transform: rotate(360deg); } }
@keyframes rise     { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes waveIn   { to { transform: translateY(0) rotate(-5deg); } }

/* --------------------------------------------------------------------------
   4. Autenticação
   -------------------------------------------------------------------------- */
.auth { max-width: var(--app-max); min-height: 100dvh; margin: 0 auto; background: var(--cream); display: flex; flex-direction: column; }
.auth__hero {
  position: relative; overflow: hidden;
  padding: calc(40px + var(--safe-top)) 24px 86px; text-align: center; color: var(--on-dark);
  background: radial-gradient(circle at 50% 20%, var(--indigo-500), var(--indigo) 60%);
}
.auth__logo { margin: 0 auto 12px; border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,.35); animation: rise .5s var(--ease) both; }
.auth__brand { margin: 0; font-family: var(--font-title); font-weight: 900; font-size: 28px; }
.auth__tagline { margin: 4px 0 0; color: var(--orange); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; }
.auth__waves { position: absolute; left: -10%; right: -10%; bottom: -24px; height: 70px; }
.auth__waves i { position: absolute; inset: 0; border-radius: 50% 50% 0 0; transform: rotate(-3deg); }
.auth__waves i:nth-child(1) { background: var(--green); }
.auth__waves i:nth-child(2) { background: var(--cream-50); top: 10px; opacity: .9; }
.auth__waves i:nth-child(3) { background: var(--orange); top: 18px; }

.auth__card {
  position: relative; z-index: 1;
  margin: -34px 16px 24px; padding: 26px 22px 22px;
  border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow-lg);
}
.auth__card.is-entering { animation: rise .45s var(--ease) both; }
.auth__title { margin: 0; font-family: var(--font-title); font-size: 22px; color: var(--ink); }
.auth__subtitle { margin: 4px 0 20px; color: var(--graphite-60); font-size: 13.5px; }
.auth__switch { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--graphite-60); }
.auth__switch a { font-weight: 700; text-decoration: none; }

/* --------------------------------------------------------------------------
   5. Shell do app
   -------------------------------------------------------------------------- */
.app {
  position: relative; max-width: var(--app-max); min-height: 100dvh; margin: 0 auto;
  background: var(--cream) radial-gradient(rgba(27,31,75,.035) 1px, transparent 1px) 0 0 / 14px 14px;
  transition: max-width .3s var(--ease);
}
body.is-wide .app { max-width: var(--app-wide); }
@media (min-width: 600px) { .app, .auth { box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 30px 80px rgba(0,0,0,.45); } }

.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  height: calc(var(--appbar-h) + var(--safe-top)); padding: var(--safe-top) var(--gutter) 0;
  background: var(--indigo); color: var(--on-dark);
}
.appbar__brand { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.appbar__logo { border-radius: 9px; }
.appbar__name { display: block; font-family: var(--font-title); font-weight: 900; font-size: 17px; line-height: 1.15; }
.appbar__section { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar__stripe { position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: linear-gradient(var(--orange) 0 33%, var(--cream) 33% 50%, var(--green) 50%); }
.appbar__back { margin-left: -6px; }

.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border: 0; border-radius: 50%; background: rgba(245,233,214,.1); color: var(--on-dark);
  transition: background .2s, transform .2s var(--ease);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: rgba(245,233,214,.2); }
.icon-btn:active { transform: scale(.92); }
.icon-btn--dark { background: rgba(27,31,75,.07); color: var(--ink); }
.icon-btn--dark:hover { background: rgba(27,31,75,.14); }
.icon-btn--accent { background: var(--orange); color: #fff; }
.icon-btn--accent:hover { background: var(--orange-600); }
.icon-btn--danger { background: var(--danger-100); color: var(--danger); }
.icon-btn--danger:hover { background: #F0C9C5; }
.icon-btn--sm { width: 34px; height: 34px; }
.icon-btn--sm svg { width: 17px; height: 17px; }

/* Avatar */
.avatar {
  --av: var(--orange);
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--av); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.avatar--xs { width: 28px; height: 28px; font-size: 11px; }
.avatar--sm { width: 34px; height: 34px; font-size: 12.5px; }
.avatar--lg { width: 56px; height: 56px; font-size: 19px; }
.avatar--xl { width: 76px; height: 76px; font-size: 26px; box-shadow: 0 0 0 4px var(--cream-50), var(--shadow); }
.avatar-btn { display: block; flex: none; padding: 2px; border-radius: 50%; background: var(--orange); text-decoration: none; transition: transform .2s var(--ease); }
.avatar-btn .avatar { display: grid; box-shadow: 0 0 0 2px var(--indigo); }
.avatar-btn:active { transform: scale(.92); }

/* Views */
.views { padding: 22px var(--gutter) calc(var(--nav-h) + var(--safe-bottom) + 96px); }
.view { animation: viewIn .35s var(--ease); }
.view__head { margin-bottom: 16px; }
.view__title { margin: 0; font-family: var(--font-title); font-weight: 900; font-size: 25px; line-height: 1.2; color: var(--ink); }
.view__subtitle { margin: 4px 0 0; font-size: 13.5px; color: var(--graphite-60); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 10px; }
.section-head h2 { margin: 0; font-family: var(--font-title); font-size: 17px; color: var(--ink); }
.section-head span { font-size: 12.5px; color: var(--graphite-60); font-weight: 600; }

/* --------------------------------------------------------------------------
   6. Indicadores
   -------------------------------------------------------------------------- */
.stats { display: flex; gap: 1px; margin-bottom: 16px; overflow: hidden; border-radius: var(--radius); background: rgba(245,233,214,.14); box-shadow: var(--shadow); }
.stat { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 12px 4px; background: var(--indigo); color: var(--on-dark); }
.stat__value { font-family: var(--font-title); font-weight: 900; font-size: 22px; line-height: 1.1; }
.stat:first-child .stat__value { color: var(--orange); }
.stat__label { margin-top: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.stats--light { background: var(--cream-200); box-shadow: var(--shadow-sm); }
.stats--light .stat { background: var(--cream-50); color: var(--ink); }

/* --------------------------------------------------------------------------
   7. Toolbar, busca, chips
   -------------------------------------------------------------------------- */
.toolbar { display: grid; gap: 12px; margin-bottom: 18px; }
.toolbar__row { display: flex; gap: 8px; }
.search {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: 46px; padding: 0 14px;
  border: 1px solid var(--cream-200); border-radius: 999px; background: var(--cream-50); box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(227,108,42,.18); }
.search svg { width: 18px; height: 18px; color: var(--graphite-60); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; }

.select-pill { position: relative; flex: none; }
.select-pill select {
  height: 46px; padding: 0 34px 0 14px; border: 1px solid var(--cream-200); border-radius: 999px;
  background: var(--cream-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231B1F4B' stroke-width='2' stroke-linecap='round' d='M7 10l5 5 5-5'/%3E%3C/svg%3E") right 10px center / 16px no-repeat;
  appearance: none; font-size: 13px; font-weight: 600; color: var(--ink); box-shadow: var(--shadow-sm);
}

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips--wrap { flex-wrap: wrap; }
.chips--scroll { margin: 14px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 14px;
  border: 1px solid var(--cream-200); border-radius: 999px; background: var(--cream-50);
  font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: all .2s var(--ease);
}
.chip svg { width: 15px; height: 15px; }
.chip:hover { border-color: var(--indigo); }
.chip.is-active { border-color: var(--indigo); background: var(--indigo); color: var(--on-dark); box-shadow: var(--shadow-sm); }
.chip--light { height: 32px; background: rgba(255,255,255,.92); border-color: transparent; box-shadow: var(--shadow-sm); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--orange)); }
.dot--vinil { --c: var(--m-vinil); } .dot--k7 { --c: var(--m-k7); } .dot--vhs { --c: var(--m-vhs); } .dot--cartucho { --c: var(--m-cartucho); }

.link-btn { padding: 0; border: 0; background: none; color: var(--orange-600); font-size: 12.5px; font-weight: 700; cursor: pointer; }

/* --------------------------------------------------------------------------
   8. Capas, cards e grid
   -------------------------------------------------------------------------- */
.cover { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 1; }
.cover > svg { width: 76%; height: auto; }
.cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fundo da capa = cor do tipo de mídia (definida pelo dev em "Tipos de mídia"). */
.cover { background-color: var(--cv, var(--indigo)); background-image: linear-gradient(150deg, rgba(255,255,255,.2), rgba(0,0,0,.18)); }
.cover > svg, .cover > img.cover__art { position: static; width: 76%; height: auto; object-fit: contain; }
.cover--hero  { border-radius: var(--radius); aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.cover--hero > svg { width: 46%; }
.cover--thumb { width: 52px; border-radius: 10px; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 520px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 340px) { .grid { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column; overflow: hidden; padding: 0; text-align: left;
  border: 1px solid rgba(27,31,75,.06); border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow);
  animation: cardIn .4s var(--ease) both; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
button.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card__media { position: relative; }
.card__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--orange) 50%, var(--green) 50%); }
.card__type { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(245,233,214,.94); color: var(--ink); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.card__body { display: flex; flex-direction: column; gap: 3px; flex: 1; width: 100%; padding: 12px 12px 14px; }
.card__title { margin: 0; font-family: var(--font-title); font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__meta { margin: 0; font-size: 12px; color: var(--graphite-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 8px; }
.card__year { font-size: 12px; font-weight: 600; color: var(--graphite-60); }

.rarity { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.rarity::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rarity--comum    { background: #ECE6DC; color: var(--graphite-60); }
.rarity--incomum  { background: var(--green-100); color: var(--green-600); }
.rarity--raro     { background: var(--orange-100); color: var(--orange-600); }
.rarity--lendario { background: var(--indigo); color: var(--orange); }

.card--skeleton { animation: none; pointer-events: none; }
.card--skeleton .cover, .sk-line { background: linear-gradient(90deg, var(--cream-200) 25%, #F3E8D6 50%, var(--cream-200) 75%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
.sk-line { height: 10px; border-radius: 5px; margin-top: 6px; }
.sk-line--lg { height: 14px; width: 85%; } .sk-line--sm { width: 55%; }

/* --------------------------------------------------------------------------
   9. Estados, loading, badges
   -------------------------------------------------------------------------- */
.state { display: flex; flex-direction: column; align-items: center; padding: 34px 20px; border: 1.5px dashed var(--cream-200); border-radius: var(--radius-lg); background: var(--cream-50); text-align: center; }
.state__icon { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 12px; border-radius: 50%; background: var(--orange-100); color: var(--orange-600); }
.state__icon svg { width: 28px; height: 28px; }
.state--error .state__icon { background: var(--danger-100); color: var(--danger); }
.state__title { margin: 0 0 6px; font-family: var(--font-title); font-size: 18px; color: var(--ink); }
.state__text { margin: 0 0 16px; font-size: 13.5px; color: var(--graphite-60); max-width: 320px; }
.state__text:last-child { margin-bottom: 0; }

.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 30px 0; color: var(--graphite-60); font-size: 14px; font-weight: 500; }
.spinner { width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; flex: none; }
.spinner--dark { border-color: var(--cream-200); border-top-color: var(--orange); width: 20px; height: 20px; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; background: color-mix(in srgb, var(--c, var(--orange)) 14%, white); color: var(--c, var(--orange-600)); }
.badge svg { width: 13px; height: 13px; }
.badge--green  { --c: var(--green-600); }
.badge--orange { --c: var(--orange-600); }
.badge--indigo { --c: var(--indigo); }
.badge--danger { --c: var(--danger); }
.badge--soft   { --c: var(--graphite-60); }
.tag { padding: 3px 8px; border-radius: 6px; background: var(--indigo-100); color: var(--ink); font-size: 11px; font-weight: 700; }

/* --------------------------------------------------------------------------
   10. Botões e FAB
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border: 0; border-radius: 12px;
  font-size: 14px; font-weight: 700; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: background .2s, transform .15s var(--ease), box-shadow .2s;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .65; cursor: progress; }
.btn--primary { background: var(--orange); color: #fff; box-shadow: 0 6px 14px -6px rgba(227,108,42,.7); }
.btn--primary:hover { background: var(--orange-600); }
.btn--success { background: var(--green); color: #fff; box-shadow: 0 6px 14px -6px rgba(11,143,88,.6); }
.btn--success:hover { background: var(--green-600); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #951F18; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--cream-200); }
.btn--ghost:hover { background: rgba(27,31,75,.05); }
.btn--text-danger { background: none; color: var(--danger); height: 40px; }
.btn--text-danger:hover { background: var(--danger-100); }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.btn--block { width: 100%; }

.fab {
  position: fixed; z-index: 25;
  right: max(var(--gutter), calc((100vw - var(--app-max)) / 2 + var(--gutter)));
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 18px);
  display: grid; place-items: center; width: 58px; height: 58px;
  border: 0; border-radius: 18px; background: var(--orange); color: #fff;
  box-shadow: 0 12px 24px -8px rgba(227,108,42,.8), 0 0 0 4px var(--cream);
  transition: transform .2s var(--ease), background .2s; animation: fabIn .35s var(--ease);
}
body.is-wide .fab { right: max(var(--gutter), calc((100vw - var(--app-wide)) / 2 + var(--gutter))); }
.fab svg { width: 26px; height: 26px; }
.fab:hover { background: var(--orange-600); }
.fab:active { transform: scale(.92); }

/* --------------------------------------------------------------------------
   11. Bottom navigation
   -------------------------------------------------------------------------- */
.bottom-nav {
  position: fixed; z-index: 30; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: var(--app-max);
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--nav-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  background: var(--indigo); box-shadow: 0 -8px 24px -10px rgba(0,0,0,.35);
  transition: max-width .3s var(--ease);
}
body.is-wide .bottom-nav { max-width: var(--app-wide); }
.bottom-nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--orange) 50%, var(--green) 50%); }
.bottom-nav__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: rgba(245,233,214,.6); font-size: 11px; font-weight: 600; text-decoration: none; transition: color .2s; }
.bottom-nav__item svg { width: 24px; height: 24px; transition: transform .25s var(--ease); }
.bottom-nav__item:hover { color: var(--on-dark); }
.bottom-nav__item.is-active { color: var(--orange); }
.bottom-nav__item.is-active svg { transform: translateY(-2px); }
.bottom-nav__item.is-active::after { content: ""; position: absolute; top: 3px; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--cream); }

/* --------------------------------------------------------------------------
   12. Sheet e diálogo
   -------------------------------------------------------------------------- */
.sheet { position: fixed; inset: 0; z-index: 50; visibility: hidden; pointer-events: none; }
.sheet.is-open { visibility: visible; pointer-events: auto; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(20,23,58,.55); backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s var(--ease); }
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet__panel {
  position: absolute; left: 50%; bottom: 0; width: 100%; max-width: var(--app-max); max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 20px calc(22px + var(--safe-bottom)); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--cream-50); box-shadow: var(--shadow-lg);
  transform: translate(-50%, 100%); transition: transform .35s var(--ease);
}
.sheet.is-open .sheet__panel { transform: translate(-50%, 0); }
.sheet__handle { width: 40px; height: 5px; margin: 4px auto 10px; border-radius: 3px; background: var(--cream-200); }
.sheet__header { position: sticky; top: -8px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -20px 14px; padding: 6px 20px; background: var(--cream-50); }
.sheet__title { margin: 0; font-family: var(--font-title); font-size: 20px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dialog { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(20,23,58,.6); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.dialog.is-open { opacity: 1; visibility: visible; }
.dialog__box { width: 100%; max-width: 380px; padding: 24px 22px 20px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow-lg); text-align: center; transform: scale(.94); transition: transform .25s var(--ease); }
.dialog.is-open .dialog__box { transform: none; }
.dialog__icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; background: var(--orange-100); color: var(--orange-600); }
.dialog__icon svg { width: 26px; height: 26px; }
.dialog__icon--danger { background: var(--danger-100); color: var(--danger); }
.dialog__title { margin: 0 0 6px; font-family: var(--font-title); font-size: 19px; color: var(--ink); }
.dialog__text { color: var(--graphite-60); font-size: 14px; }
.dialog__text p { margin: 0 0 6px; }
.dialog__actions { display: flex; gap: 10px; margin-top: 18px; }
.dialog__actions .btn { flex: 1; }
.secret { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--indigo); }
.secret code { color: var(--orange); font-size: 17px; font-weight: 700; letter-spacing: .05em; }

/* --------------------------------------------------------------------------
   13. Formulários
   -------------------------------------------------------------------------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.form--stack { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field--full { grid-column: 1 / -1; }
.form--stack .field, .form--stack > * { grid-column: 1 / -1; }
.field__label { padding: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.req { color: var(--orange); }
.field__input {
  width: 100%; min-height: 46px; padding: 11px 13px;
  border: 1.5px solid var(--cream-200); border-radius: 10px; background: var(--surface); font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}
textarea.field__input { resize: vertical; min-height: 84px; }
select.field__input { appearance: none; padding-right: 36px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231B1F4B' stroke-width='2' stroke-linecap='round' d='M7 10l5 5 5-5'/%3E%3C/svg%3E") right 10px center / 18px no-repeat; }
.field__input:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(227,108,42,.18); }
.field.has-error .field__input { border-color: var(--danger); }
.field__error { font-size: 12px; font-weight: 600; color: var(--danger); }
.field__error:empty { display: none; }
.field__hint { font-size: 12px; color: var(--graphite-60); }
.form__alert { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--danger-100); color: var(--danger); font-size: 13.5px; font-weight: 600; }
.form__actions { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 4px; }

.input-icon { position: relative; }
.input-icon > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--graphite-60); pointer-events: none; }
.input-icon .field__input { padding-left: 42px; }
.input-icon--plain .field__input { padding-left: 13px; }
.input-icon .field__input:has(+ .input-icon__toggle) { padding-right: 46px; }
.input-icon__toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 8px; background: none; color: var(--graphite-60); }
.input-icon__toggle svg { width: 19px; height: 19px; }

.strength { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 4px; align-items: center; }
.strength i { height: 4px; border-radius: 2px; background: var(--cream-200); transition: background .2s; }
.strength span { min-width: 60px; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--graphite-60); }
.strength[data-score="1"] i:nth-child(-n+1) { background: var(--danger); }
.strength[data-score="2"] i:nth-child(-n+2) { background: var(--orange); }
.strength[data-score="3"] i:nth-child(-n+3) { background: #7FB43A; }
.strength[data-score="4"] i { background: var(--green); }

.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--cream); }
.segmented--inline { display: inline-grid; margin-bottom: 14px; background: var(--cream-200); }
.segmented input, .chip-select input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: grid; place-items: center; height: 40px; padding: 0 14px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--graphite-60); cursor: pointer; transition: all .2s var(--ease); white-space: nowrap; }
.segmented input:checked + span { background: var(--indigo); color: var(--on-dark); box-shadow: var(--shadow-sm); }
.segmented input:focus-visible + span, .chip-select input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 1px; }

.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-select span { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 1.5px solid var(--cream-200); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: all .2s; }
.chip-select input:checked + span { border-color: var(--indigo); background: var(--indigo); color: var(--on-dark); }

/* Foto */
.photo-picker { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 9; background: var(--cream); }
.photo-picker__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.photo-picker.has-photo .photo-picker__preview { display: block; }
.photo-picker__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed var(--cream-200); border-radius: inherit; color: var(--ink); cursor: pointer; transition: background .2s; }
.photo-picker__empty:hover { background: var(--cream-200); }
.photo-picker__empty svg { width: 30px; height: 30px; color: var(--orange); }
.photo-picker__empty span { font-weight: 700; font-size: 14px; }
.photo-picker__empty small { font-size: 12px; color: var(--graphite-60); }
.photo-picker.has-photo .photo-picker__empty { display: none; }
.photo-picker__actions { position: absolute; right: 10px; bottom: 10px; display: none; gap: 8px; }
.photo-picker.has-photo .photo-picker__actions { display: flex; }

/* --------------------------------------------------------------------------
   14. Detalhes e listas de informação
   -------------------------------------------------------------------------- */
.detail { display: grid; gap: 16px; }
.detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.detail__title { margin: 0; font-family: var(--font-title); font-size: 21px; line-height: 1.25; color: var(--ink); }
.detail__sub { margin: 2px 0 0; color: var(--graphite-60); font-weight: 500; }
.detail__notes { margin: 0; padding: 12px 14px; border-left: 3px solid var(--orange); border-radius: 0 10px 10px 0; background: var(--cream); font-size: 14px; white-space: pre-line; }
.detail__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-list { display: grid; margin: 0; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.info-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; border-bottom: 1px solid var(--cream); }
.info-list > div:last-child { border-bottom: 0; }
.info-list dt { color: var(--graphite-60); font-size: 13px; }
.info-list dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: right; }

.panel { padding: 18px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow); }
.panel + .panel { margin-top: 14px; }
.panel__title { margin: 0 0 12px; font-family: var(--font-title); font-size: 16px; color: var(--ink); }
.panel__title--spaced { margin-top: 20px; }
.panel__text { margin: 0 0 14px; font-size: 13.5px; color: var(--graphite-60); }

.banner { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--radius); background: var(--orange-100); color: var(--orange-600); }
.banner > svg { width: 24px; height: 24px; }
.banner div { flex: 1; min-width: 0; }
.banner strong { display: block; color: var(--ink); font-size: 14px; }
.banner p { margin: 0; font-size: 12.5px; color: var(--graphite-60); }

/* --------------------------------------------------------------------------
   15. Explorar (mapa)
   -------------------------------------------------------------------------- */
.map-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); background: var(--indigo-100); scroll-margin-top: calc(var(--appbar-h) + 16px); }
.map { height: min(48vh, 380px); z-index: 0; }
.map__fallback { display: grid; place-items: center; height: 100%; margin: 0; color: var(--graphite-60); }
.map-btn { position: absolute; z-index: 5; right: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--cream-50); color: var(--ink); box-shadow: var(--shadow); }
.map-btn svg { width: 22px; height: 22px; }
.map-btn:hover { background: var(--surface); }
.map-btn.is-on { background: var(--orange); color: #fff; }
.map-btn--sm { width: 38px; height: 38px; right: 10px; bottom: 10px; }
.leaflet-container { font-family: var(--font-body); background: var(--indigo-100); }
.leaflet-control-zoom a { color: var(--ink) !important; }
.leaflet-control-attribution { font-size: 10px; background: rgba(255,251,244,.8) !important; }

.map-pin { position: relative; display: block; width: 30px; height: 40px; }
.map-pin::before { content: ""; position: absolute; left: 3px; top: 0; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); transform-origin: center; background: var(--c); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.35); top: 4px; }
.map-pin i { position: absolute; left: 11px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); }
.me-dot { display: block; width: 20px; height: 20px; border-radius: 50%; background: #2F7DF6; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(47,125,246,.25); }

.place-list { display: grid; gap: 10px; }
.place-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); text-align: left; transition: transform .2s var(--ease), box-shadow .2s; }
.place-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.place-row__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: color-mix(in srgb, var(--c) 15%, white); color: var(--c); }
.place-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.place-row__body strong { color: var(--ink); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-row__body small, .place-row__meta small { color: var(--graphite-60); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-row__meta { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.place-row__meta b { color: var(--green-600); font-size: 13px; }
.place-row__chev { width: 18px; height: 18px; color: var(--cream-200); }

.place-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--c) 12%, white); }
.place-hero > svg { width: 38px; height: 38px; color: var(--c); }
.place-hero div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.place-hero__dist { color: var(--green-600); font-size: 13px; font-weight: 700; }

.picker-map { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--cream-200); }
.picker-map__map { height: 220px; z-index: 0; }
.picker-map__hint { position: absolute; z-index: 5; left: 10px; top: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(27,31,75,.88); color: var(--on-dark); font-size: 12px; font-weight: 600; pointer-events: none; }
.field.has-error .picker-map { box-shadow: inset 0 0 0 2px var(--danger); }

/* --------------------------------------------------------------------------
   16. Scan
   -------------------------------------------------------------------------- */
.scanner { position: relative; height: 270px; overflow: hidden; border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 45%, var(--indigo-500), var(--indigo-700)); box-shadow: var(--shadow); }
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.scanner.is-live video { opacity: 1; }
.scanner__corner { position: absolute; z-index: 2; width: 34px; height: 34px; border: 4px solid var(--orange); }
.scanner__corner--tl { top: 26px; left: 26px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.scanner__corner--tr { top: 26px; right: 26px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.scanner__corner--bl { bottom: 26px; left: 26px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.scanner__corner--br { bottom: 26px; right: 26px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.scanner__line { position: absolute; z-index: 2; left: 40px; right: 40px; height: 2px; background: var(--green); box-shadow: 0 0 12px 2px rgba(11,143,88,.8); animation: scan 2.4s ease-in-out infinite; }
.scanner--off .scanner__line, .scanner:not(.is-live) .scanner__line { display: none; }
.scanner__idle { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px; text-align: center; color: var(--on-dark); }
.scanner__idle > svg { width: 40px; height: 40px; color: rgba(245,233,214,.5); }
.scanner__idle p { margin: 0; max-width: 260px; font-size: 14px; opacity: .85; }
.scanner__tools { position: absolute; z-index: 4; right: 12px; top: 12px; display: flex; gap: 8px; }
.scanner__tools .map-btn { position: static; }

.manual { display: flex; gap: 8px; margin: 14px 0; }
.manual .btn { flex: none; }

.result-card { display: grid; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow); animation: rise .35s var(--ease); }
.result-card--error { display: flex; align-items: center; color: var(--danger); }
.result-card--error p { margin: 0; }
.result-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.result-card__code { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.result-card__label, .result-card__owned, .result-card__empty { margin: 0; font-size: 13.5px; color: var(--graphite-60); }
.result-list { display: grid; gap: 8px; }
.result-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 1.5px solid var(--cream-200); border-radius: 12px; background: var(--surface); text-align: left; transition: border-color .2s; }
.result-row:hover { border-color: var(--orange); }
.result-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.result-row__body strong { color: var(--ink); }
.result-row__body small { color: var(--graphite); font-size: 12.5px; }
.result-row__body em { color: var(--graphite-60); font-size: 11.5px; font-style: normal; }

/* --------------------------------------------------------------------------
   17. Comunidade
   -------------------------------------------------------------------------- */
.composer-trigger { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 16px; padding: 12px 14px; border: 0; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); color: var(--graphite-60); font-size: 14px; text-align: left; }
.composer-trigger span:not(.avatar) { flex: 1; }
.composer-trigger > svg { color: var(--orange); }
.composer-head { display: flex; align-items: center; gap: 12px; }
.composer-head strong { display: block; color: var(--ink); }
.composer-head small { color: var(--graphite-60); font-size: 12px; }
.composer-text { font-size: 16px; }

.feed { display: grid; gap: 14px; }
.post { overflow: hidden; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow); animation: cardIn .35s var(--ease) both; }
.post__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 0; }
.post__author { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.post__author strong { display: block; color: var(--ink); font-size: 14.5px; }
.post__author small { display: block; color: var(--graphite-60); font-size: 12px; }
.post__text { margin: 12px 14px 0; font-size: 14.5px; white-space: pre-line; overflow-wrap: anywhere; }
.post__photo { width: 100%; max-height: 520px; margin-top: 12px; object-fit: cover; background: var(--cream); }
.post__item { display: flex; align-items: center; gap: 12px; margin: 12px 14px 0; padding: 10px; border-radius: 12px; background: var(--cream); }
.post__item > div:not(.cover) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.post__item strong { color: var(--ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post__item small { color: var(--graphite-60); font-size: 12px; }
.post__item--preview { margin: 8px 0 0; }
.post__actions { display: flex; gap: 4px; padding: 8px 8px 10px; }
.post__btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--graphite-60); font-weight: 700; font-size: 13.5px; transition: background .2s, color .2s; }
.post__btn:hover { background: var(--cream); }
.post__btn svg { width: 20px; height: 20px; }
.post__btn.is-liked { color: #D94040; }
.post__btn.is-liked svg { animation: pop .3s var(--ease); }
.comments { padding: 0 14px 14px; border-top: 1px solid var(--cream); }
.comment { display: flex; gap: 10px; padding-top: 12px; }
.comment__body { flex: 1; min-width: 0; }
.comment__body p { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.comment__body a { color: var(--ink); font-weight: 700; text-decoration: none; }
.comment__body small { color: var(--graphite-60); font-size: 11.5px; }
.comment__body .link-btn { font-size: 11.5px; }
.comment-form { display: flex; gap: 8px; margin-top: 12px; }
.comment-form input { flex: 1; min-width: 0; height: 38px; padding: 0 14px; border: 1.5px solid var(--cream-200); border-radius: 999px; background: var(--surface); font-size: 14px; outline: 0; }
.comment-form input:focus { border-color: var(--orange); }

/* --------------------------------------------------------------------------
   18. Perfil
   -------------------------------------------------------------------------- */
.profile-hero { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.profile-hero__body { flex: 1; min-width: 0; }
.profile-hero__name .badge { font-family: var(--font-body); }
.profile-hero__name { display: block; margin: 4px 0 0; line-height: 1.25; font-family: var(--font-title); font-size: 22px; color: var(--ink); }
.profile-hero__user { margin: 2px 0 0; color: var(--graphite-60); font-weight: 600; font-size: 13.5px; }
.profile-hero__bio { margin: 8px 0 0; font-size: 14px; }
.profile-hero__since { margin: 6px 0 10px; color: var(--graphite-60); font-size: 12px; }

.media-bar { display: flex; height: 8px; gap: 2px; margin: -4px 0 8px; overflow: hidden; border-radius: 4px; }
.media-bar__seg { background: var(--c, var(--indigo)); }
.profile-hero__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.media-legend { display: flex; gap: 14px; margin-bottom: 18px; color: var(--graphite-60); font-size: 12px; font-weight: 600; }
.media-legend span { display: inline-flex; align-items: center; gap: 6px; }

.menu-list { overflow: hidden; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow); }
.menu-list--flat { box-shadow: inset 0 0 0 1px var(--cream-200); border-radius: var(--radius); }
.menu-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--cream); background: none; text-align: left; text-decoration: none; color: var(--ink); transition: background .2s; }
.menu-item:last-child { border-bottom: 0; }
.menu-item:hover { background: var(--cream); }
.menu-item > svg:first-child { width: 22px; height: 22px; color: var(--orange); }
.menu-item > svg:last-child:not(:first-child) { width: 18px; height: 18px; color: var(--cream-200); }
.menu-item span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-item strong { font-size: 14.5px; }
.menu-item small { color: var(--graphite-60); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.menu-item--accent { background: var(--indigo); color: var(--on-dark); }
.menu-item--accent:hover { background: var(--indigo-500); }
.menu-item--accent small { color: rgba(245,233,214,.7); }
.menu-item--danger, .menu-item--danger > svg:first-child { color: var(--danger); }

.tabs { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 12px; background: var(--cream-200); }
.tab { flex: 1; height: 40px; border: 0; border-radius: 9px; background: none; color: var(--graphite-60); font-weight: 700; font-size: 14px; }
.tab span { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: rgba(27,31,75,.08); font-size: 12px; }
.tab.is-active { background: var(--cream-50); color: var(--ink); box-shadow: var(--shadow-sm); }
.card--static { animation: none; }
.user-card { display: flex; align-items: center; gap: 14px; }
.user-card div { display: flex; flex-direction: column; }
.user-card strong { color: var(--ink); font-size: 17px; }
.user-card small { color: var(--graphite-60); font-size: 13px; }

/* --------------------------------------------------------------------------
   19. Painel dev
   -------------------------------------------------------------------------- */
.dev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dev-tabs { display: flex; gap: 6px; margin: 0 calc(var(--gutter) * -1) 18px; padding: 0 var(--gutter) 2px; overflow-x: auto; scrollbar-width: none; }
.dev-tabs::-webkit-scrollbar { display: none; }
.dev-tab { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 14px; border: 1px solid var(--cream-200); border-radius: 10px; background: var(--cream-50); color: var(--ink); font-weight: 700; font-size: 13.5px; transition: all .2s; }
.dev-tab svg { width: 18px; height: 18px; color: var(--orange); }
.dev-tab.is-active { background: var(--indigo); border-color: var(--indigo); color: var(--on-dark); }
.dev-body { animation: viewIn .3s var(--ease); }
.dev-cols { display: grid; gap: 14px; margin-top: 14px; }
.dev-cols .panel + .panel { margin-top: 0; }
@media (min-width: 860px) { .dev-cols { grid-template-columns: 1fr 1fr; } }
.dev-count { margin: 0 0 10px; color: var(--graphite-60); font-size: 13px; font-weight: 600; }

.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px) { .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); border-top: 3px solid var(--indigo); }
.kpi--green { border-top-color: var(--green); } .kpi--orange { border-top-color: var(--orange); } .kpi--danger { border-top-color: var(--danger); }
.kpi__icon svg { width: 20px; height: 20px; color: var(--graphite-60); }
.kpi__value { margin-top: 6px; font-family: var(--font-title); font-weight: 900; font-size: 28px; line-height: 1; color: var(--ink); }
.kpi__label { color: var(--graphite-60); font-size: 12px; font-weight: 600; }

.bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; height: 170px; }
.bars__col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.bars__col i { display: block; width: 100%; min-height: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(var(--orange), var(--orange-600)); transition: height .5s var(--ease); }
.bars__val { font-size: 10.5px; font-weight: 700; color: var(--ink); min-height: 14px; }
.bars__lbl { font-size: 10px; color: var(--graphite-60); }
.hbar { display: grid; grid-template-columns: 76px 1fr 32px; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.hbar__label { font-weight: 600; color: var(--ink); }
.hbar__track { height: 10px; border-radius: 5px; background: var(--cream); overflow: hidden; }
.hbar__track i { display: block; height: 100%; border-radius: inherit; transition: width .5s var(--ease); }
.hbar__val { text-align: right; font-weight: 700; color: var(--ink); }

.dev-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.dev-toolbar .search { flex: 1 1 240px; }

.table { overflow: hidden; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow); }
.table__head { display: none; }
.table__row { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--cream); background: none; text-align: left; font-size: 13px; color: var(--graphite); transition: background .2s; }
.table__row:last-child { border-bottom: 0; }
.table__row:hover { background: var(--cream); }
.table__row > span[data-label] { display: none; }
.table__row > span[data-label="Status"] { display: block; align-self: center; }
.table__user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.table__user > span:not(.avatar) { min-width: 0; display: flex; flex-direction: column; }
.table__user strong { color: var(--ink); font-size: 14px; }
.table__user em { color: var(--graphite-60); font-style: normal; font-weight: 500; }
.table__user small { color: var(--graphite-60); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 860px) {
  .table__head, .table__row { display: grid; grid-template-columns: minmax(0, 2.6fr) 1fr 1fr .6fr 1.1fr; align-items: center; }
  .table__head { padding: 12px 16px; background: var(--indigo); color: var(--on-dark); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .table__row > span[data-label] { display: block; }
}

.mod-list { display: grid; gap: 8px; }
.mod-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); }
.mod-row__thumb { display: grid; place-items: center; width: 46px; height: 46px; flex: none; overflow: hidden; border-radius: 10px; background: var(--cream); color: var(--orange); }
.mod-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mod-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mod-row__body strong { color: var(--ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-row__body small { color: var(--graphite-60); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.log-list { display: grid; gap: 1px; margin-top: 14px; overflow: hidden; border-radius: var(--radius-lg); background: var(--cream-200); box-shadow: var(--shadow-sm); }
.log { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--cream-50); }
.log__type { flex: none; width: 122px; padding: 3px 8px; border-radius: 6px; background: var(--indigo-100); color: var(--ink); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: center; }
.log__type--security { background: var(--danger-100); color: var(--danger); }
.log__type--auth { background: var(--green-100); color: var(--green-600); }
.log__type--admin { background: var(--indigo); color: var(--on-dark); }
.log__type--collection, .log__type--places, .log__type--community { background: var(--orange-100); color: var(--orange-600); }
.log__body { min-width: 0; }
.log__body p { margin: 0; font-size: 13.5px; }
.log__body small { color: var(--graphite-60); font-size: 12px; }

.check { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--cream); }
.check:last-child { border-bottom: 0; }
.check > svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; }
.check.is-ok > svg { background: var(--green-100); color: var(--green-600); }
.check.is-bad > svg { background: var(--danger-100); color: var(--danger); }
.check span { display: flex; flex-direction: column; }
.check strong { color: var(--ink); font-size: 14px; }
.check small { color: var(--graphite-60); font-size: 12.5px; }

/* --------------------------------------------------------------------------
   20. Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed; z-index: 80; left: 50%; bottom: calc(var(--nav-h) + var(--safe-bottom) + 90px);
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(min(100vw, var(--app-max)) - 32px);
  padding: 12px 16px; border-radius: 12px; background: var(--indigo); color: var(--on-dark);
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast svg { width: 20px; height: 20px; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast--success svg { color: #5FD39C; }
.toast--error { background: var(--danger); color: #fff; }
#auth:not([hidden]) ~ .toast { bottom: calc(24px + var(--safe-bottom)); }

/* --------------------------------------------------------------------------
   21. Animações
   -------------------------------------------------------------------------- */
@keyframes viewIn  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cardIn  { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fabIn   { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes pop     { 50% { transform: scale(1.3); } }
@keyframes scan    { 0%, 100% { top: 40px; } 50% { top: calc(100% - 42px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   22. Scan — ações e status
   -------------------------------------------------------------------------- */
.scanner__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.btn--glass { background: rgba(245,233,214,.14); color: var(--on-dark); box-shadow: inset 0 0 0 1.5px rgba(245,233,214,.3); cursor: pointer; }
.btn--glass:hover { background: rgba(245,233,214,.24); }
.scanner__status { position: absolute; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(20,23,58,.82); color: var(--on-dark); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* --------------------------------------------------------------------------
   23. Mapa — busca de endereço e camada
   -------------------------------------------------------------------------- */
.map-search { position: relative; display: flex; gap: 8px; margin-bottom: 12px; }
.map-search .btn { flex: none; }
.map-search__results { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; overflow: hidden; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-lg); }
.map-search__results button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--cream); background: none; text-align: left; }
.map-search__results button:hover { background: var(--cream); }
.map-search__results button > svg { color: var(--orange); }
.map-search__results span { display: flex; flex-direction: column; min-width: 0; }
.map-search__results strong { color: var(--ink); font-size: 14px; }
.map-search__results small { color: var(--graphite-60); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-search__empty { margin: 0; padding: 14px; color: var(--graphite-60); font-size: 13.5px; }
.nt-tiles { filter: saturate(.9) sepia(.08); }
.input-action { display: flex; gap: 8px; align-items: stretch; }
.input-action .field__input { flex: 1; min-width: 0; }
.input-action .btn { height: auto; flex: none; }

/* --------------------------------------------------------------------------
   24. Atualizações
   -------------------------------------------------------------------------- */
.dev-cols--first { margin-top: 0; margin-bottom: 14px; }
@media (min-width: 860px) { .dev-cols--first { grid-template-columns: minmax(260px, .8fr) 1.2fr; align-items: start; } }
.version-card { background: var(--indigo); color: var(--on-dark); }
.version-card__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.version-card__value { display: block; margin: 4px 0 2px; font-family: var(--font-title); font-size: 30px; font-weight: 900; letter-spacing: -.01em; }
.version-card__date { display: block; font-size: 12.5px; opacity: .75; }
.version-card__checks { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(245,233,214,.14); }
.mini-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; }
.mini-check svg { width: 16px; height: 16px; margin-top: 1px; }
.mini-check.is-ok svg { color: #5FD39C; }
.mini-check.is-bad svg { color: #FF8A80; }

.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 26px 16px; border: 2px dashed var(--cream-200); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.dropzone > svg { width: 30px; height: 30px; color: var(--orange); }
.dropzone small { color: var(--graphite-60); }
.dropzone:hover, .dropzone.is-over { border-color: var(--orange); background: var(--orange-100); }
.dropzone.is-busy { pointer-events: none; opacity: .6; }
.progress { height: 8px; margin-top: 14px; overflow: hidden; border-radius: 4px; background: var(--cream); }
.progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--green)); transition: width .3s var(--ease); }
.progress__text { margin: 6px 0 0; color: var(--graphite-60); font-size: 12.5px; font-weight: 600; }

.preview { display: grid; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cream-200); animation: rise .35s var(--ease); }
.preview__versions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.preview__versions div { display: flex; flex-direction: column; }
.preview__versions small { color: var(--graphite-60); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.preview__versions strong { color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; }
.preview__versions > svg { color: var(--orange); }
.preview__counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.preview__counts span { padding: 10px 6px; border-radius: 10px; background: var(--cream); text-align: center; font-size: 12px; color: var(--graphite-60); }
.preview__counts b { display: block; color: var(--ink); font-size: 20px; font-family: var(--font-title); }
.preview__notes h4 { margin: 0 0 8px; color: var(--ink); font-size: 14px; }
.preview__confirm { display: grid; gap: 12px; }
.file-list summary { cursor: pointer; color: var(--ink); font-size: 13.5px; font-weight: 700; }
.file-list ul { max-height: 180px; overflow: auto; margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--cream); list-style: none; font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--graphite); }

.release { padding: 12px 0; border-bottom: 1px solid var(--cream); }
.release:last-child { border-bottom: 0; }
.release header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.release header strong { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.release header span { color: var(--graphite-60); font-size: 12px; }
.release header em { flex-basis: 100%; color: var(--graphite); font-style: normal; font-weight: 600; font-size: 13.5px; }
.release ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.release li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; }
.release li .badge { flex: none; width: 92px; justify-content: center; }

.history { display: grid; }
.history__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cream); }
.history__row:last-child { border-bottom: 0; }
.history__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--green-100); color: var(--green-600); }
.history__icon.is-rollback { background: var(--orange-100); color: var(--orange-600); }
.history__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.history__body strong { color: var(--ink); font-size: 14px; }
.history__body small { color: var(--graphite-60); font-size: 12px; }

.banner--error { background: var(--danger-100); color: var(--danger); }
.banner--success { background: var(--green-100); color: var(--green-600); }
.dialog__input { margin-top: 12px; text-align: left; }
.app-version { margin: 18px 0 0; text-align: center; color: var(--graphite-60); font-size: 12px; font-weight: 600; letter-spacing: .02em; }

/* ==========================================================================
   25. Versão 2026-11-02-c — componentes novos
   ========================================================================== */

/* ---------- Topo: ações, contadores e comunicados ---------- */
.appbar__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.appbar__icon { position: relative; width: 38px; height: 38px; text-decoration: none; }
.appbar__icon.is-active { background: rgba(227,108,42,.25); color: var(--orange); }
.dot-count { position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orange); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--indigo); }
@media (max-width: 360px) { .appbar__name { font-size: 15px; } .appbar__logo { display: none; } }

.announcements { display: grid; gap: 8px; padding: 0 var(--gutter); }
.announcements:not(:empty) { padding-top: 16px; }
.announcement { display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px 12px 14px; border-radius: var(--radius); background: var(--indigo-100); color: var(--ink); box-shadow: var(--shadow-sm); animation: rise .35s var(--ease); }
.announcement > svg { width: 20px; height: 20px; margin-top: 1px; }
.announcement > div { flex: 1; min-width: 0; }
.announcement strong { display: block; font-size: 14px; }
.announcement p { margin: 2px 0 0; font-size: 13px; color: var(--graphite); }
.announcement a { font-size: 13px; font-weight: 700; }
.announcement .icon-btn { background: transparent; color: inherit; }
.announcement--success { background: var(--green-100); color: var(--green-600); }
.announcement--warning { background: var(--orange-100); color: var(--orange-600); }

/* ---------- Manutenção ---------- */
.maintenance { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; text-align: center; color: var(--on-dark); background: radial-gradient(circle at 50% 35%, var(--indigo-500), var(--indigo) 60%, var(--indigo-700)); }
.maintenance img { border-radius: 22px; box-shadow: 0 16px 40px rgba(0,0,0,.4); animation: rise .5s var(--ease); }
.maintenance h1 { margin: 14px 0 0; font-family: var(--font-title); font-size: 30px; }
.maintenance p { max-width: 380px; margin: 0; opacity: .85; }
.maintenance__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }

/* ---------- Usuário: nome com selo e avatar com foto ---------- */
/* Selo de verificado — mesmo comportamento das redes sociais:
   segue o tamanho da fonte do nome, centralizado na altura das letras, colado à última palavra. */
.uname { display: inline; min-width: 0; }
.uname__tail { white-space: nowrap; }
.ubadge {
  display: inline-block; position: relative; flex: none;
  width: 1.08em; height: 1.08em; margin-left: .24em;
  vertical-align: -0.18em; line-height: 0; color: #1D9BF0;
}
.ubadge svg { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; overflow: visible; }
.ubadge--loja { color: #0B8F58; } .ubadge--curador { color: #E36C2A; }
.badge .ubadge { margin-left: 0; margin-right: .1em; vertical-align: -0.2em; }
.avatar--photo { overflow: hidden; background: var(--cream-200); }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; }
.avatar--xxl { width: 128px; height: 128px; font-size: 42px; box-shadow: 0 0 0 5px var(--cream-50), var(--shadow); }
.avatar-edit { position: relative; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; }
.avatar-edit__cam { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: #fff; box-shadow: 0 0 0 3px var(--cream); }
.avatar-edit__cam svg { width: 16px; height: 16px; }
.avatar-sheet { display: grid; justify-items: center; gap: 12px; padding: 6px 0 4px; }
.avatar-sheet .avatar { margin-bottom: 8px; }

/* ---------- Coleção ---------- */
.stats--5 .stat__label { font-size: 9.5px; letter-spacing: .06em; }
.stats--5 .stat__value { font-size: 20px; }
.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px; margin: -4px 0 14px; }
.quick-link { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; background: var(--cream-50); box-shadow: var(--shadow-sm); color: var(--ink); font-size: 11.5px; font-weight: 700; text-decoration: none; transition: transform .2s var(--ease); }
.quick-link svg { width: 20px; height: 20px; color: var(--orange); }
.quick-link:hover { transform: translateY(-2px); }
.card__trade { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 999px; background: var(--green); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; box-shadow: var(--shadow-sm); }
.trade-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; background: var(--green-100); color: var(--green-600); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.trade-badge svg { width: 13px; height: 13px; }
.detail__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.segmented--sm span { height: 34px; font-size: 13px; padding: 0 10px; }
.segmented--inline.segmented--sm { margin-bottom: 14px; }
.price { color: var(--green-600); font-weight: 800; font-size: 14px; }
.price--lg { font-size: 20px; font-family: var(--font-title); }
.card__owner .avatar { box-shadow: 0 0 0 2px var(--cream-50); }
.toast--warn { background: var(--orange-600); color: #fff; }

/* ---------- Explorar: localização, estrelas, avaliações ---------- */
.geo-hint { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: var(--indigo-100); color: var(--ink); font-size: 13px; font-weight: 600; }
.geo-hint > svg { width: 18px; height: 18px; flex: none; }
.geo-hint span { flex: 1; }
.geo-hint.is-ok { background: var(--green-100); color: var(--green-600); }
.stars { display: inline-flex; gap: 1px; vertical-align: -2px; color: var(--cream-200); }
.stars svg { width: 14px; height: 14px; }
.stars svg.is-on { color: #F2A900; }
.place-row__rating { display: flex; align-items: center; gap: 4px; color: var(--graphite) !important; font-weight: 600; }
.place-row__body .badge { margin-left: 4px; vertical-align: 1px; padding: 2px 7px; font-size: 9.5px; }
.map-pin--featured::before { box-shadow: 0 0 0 4px rgba(242,169,0,.55), 0 4px 10px rgba(0,0,0,.35); }
.detail__notes--accent { border-left-color: #F2A900; display: flex; align-items: center; gap: 8px; }
.detail__notes--accent svg { color: #F2A900; }
.btn--text-muted { background: none; color: var(--graphite-60); height: 38px; font-weight: 600; }
.btn--text-muted:hover { color: var(--danger); background: var(--danger-100); }
.link-btn--muted { color: var(--graphite-60); font-weight: 600; }
.reviews { padding-top: 6px; border-top: 1px solid var(--cream-200); }
.reviews__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.reviews__head h4 { margin: 0; font-family: var(--font-title); font-size: 16px; color: var(--ink); }
.reviews__head small { color: var(--graphite-60); font-size: 12px; }
.reviews__avg { display: flex; align-items: center; gap: 6px; }
.reviews__avg b { color: var(--ink); }
.review-form { display: grid; gap: 8px; margin-bottom: 14px; padding: 12px; border-radius: 12px; background: var(--cream); }
.review-form__label { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.review-form .btn { justify-self: start; }
.star-input { display: flex; gap: 4px; }
.star-input button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: var(--surface); color: #F2A900; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease); }
.star-input button:active { transform: scale(.9); }
.star-input svg { width: 24px; height: 24px; }
.review-list { display: grid; gap: 12px; }
.review { display: flex; gap: 10px; }
.review > div { flex: 1; min-width: 0; }
.review__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
.review__top small { color: var(--graphite-60); font-size: 11.5px; }
.review p { margin: 4px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }
.review__actions { display: flex; gap: 12px; margin-top: 2px; }

/* ---------- Abas com ícones ---------- */
.tabs--icons .tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.tabs--icons .tab svg { width: 17px; height: 17px; }

/* ---------- Comunidade: destaque, ferramentas ---------- */
.post--pinned { box-shadow: 0 0 0 2px #F2A900, var(--shadow); }
.post__pin { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: #FFF4D6; color: #9A6B00; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.post__pin svg { width: 14px; height: 14px; }
.post__tools { display: flex; gap: 6px; }
.icon-btn.is-on { background: #FFF4D6; color: #9A6B00; }

/* ---------- Trocas & Vendas ---------- */
.market-intro { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--radius); background: var(--green-100); color: var(--green-600); }
.market-intro svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.market-intro p { margin: 0; font-size: 13px; color: var(--graphite); }
.chips__sep { flex: none; width: 1px; margin: 4px 2px; background: var(--cream-200); }
.select-pill--full select { width: 100%; }
.owner-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); color: var(--ink); text-decoration: none; }
.owner-row > span:not(.avatar) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.owner-row small { color: var(--graphite-60); font-size: 12px; }
.owner-row > svg:last-child { color: var(--cream-200); }
.pick-list { display: grid; gap: 8px; }
.pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); color: var(--ink); text-align: left; text-decoration: none; }
.pick:hover { box-shadow: inset 0 0 0 1.5px var(--orange); }
.pick > span:not(.avatar) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pick small { color: var(--graphite-60); font-size: 12px; }
.pick > svg:last-child { color: var(--cream-200); }

/* ---------- Agenda ---------- */
.event-list { display: grid; gap: 10px; }
.event { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); text-align: left; transition: transform .2s var(--ease); }
.event:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.event.is-going { box-shadow: inset 4px 0 0 var(--green), var(--shadow-sm); }
.event__date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 58px; flex: none; border-radius: 12px; background: var(--indigo); color: var(--on-dark); }
.event__date b { font-family: var(--font-title); font-size: 22px; line-height: 1; }
.event__date small { color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.event__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.event__body strong { color: var(--ink); font-size: 15px; }
.event__body small { color: var(--graphite-60); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.event__cat { display: inline-flex; align-items: center; gap: 5px; color: var(--orange-600); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.event__cat svg, .event__meta svg { width: 13px; height: 13px; vertical-align: -2px; }
.event__meta b { color: var(--green-600); }
.event-photo { width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--radius); }

/* ---------- Lista de desejos ---------- */
.wish-list { display: grid; gap: 12px; }
.wish { padding: 14px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow-sm); }
.wish.is-found { opacity: .7; }
.wish__head { display: flex; align-items: center; gap: 12px; }
.wish__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--orange-100); color: var(--orange-600); }
.wish.is-found .wish__icon { background: var(--green-100); color: var(--green-600); }
.wish__title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wish__title strong { color: var(--ink); font-size: 15px; }
.wish__title small { color: var(--graphite-60); font-size: 12px; }
.wish__actions { display: flex; gap: 4px; }
.wish__notes { margin: 8px 0 0; font-size: 13px; color: var(--graphite-60); }
.wish__none { margin: 10px 0 0; font-size: 12.5px; color: var(--graphite-60); }
.wish__matches { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--cream-200); }
.wish__label { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--green-600); }
.match { display: flex; align-items: center; gap: 10px; }
.match__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.match__body strong { color: var(--ink); font-size: 13.5px; }
.match__body small { color: var(--graphite-60); font-size: 12px; }
.match__body a { color: inherit; text-decoration: none; }
.match__trade { color: var(--green-600) !important; font-weight: 700; }
.match__trade svg { width: 12px; height: 12px; vertical-align: -2px; }

/* ---------- Estatísticas ---------- */
.view__head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.money-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 420px) { .money-cards { grid-template-columns: 1fr 1fr; } .money-card--accent { grid-column: 1 / -1; order: -1; } }
.money-card { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); }
.money-card small { color: var(--graphite-60); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.money-card strong { color: var(--ink); font-family: var(--font-title); font-size: 20px; }
.money-card span { color: var(--graphite-60); font-size: 12px; }
.money-card--accent { background: var(--indigo); }
.money-card--accent small { color: var(--orange); }
.money-card--accent strong { color: var(--on-dark); font-size: 24px; }
.gain { font-weight: 700; color: var(--on-dark) !important; opacity: .85; }
.gain.is-up { color: #5FD39C !important; opacity: 1; }
.gain.is-down { color: #FF9A8F !important; opacity: 1; }
.stats-hint { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; }
.stats-hint svg { width: 14px; height: 14px; }
.bars--12 { grid-template-columns: repeat(12, 1fr); height: 150px; }
.bars--30 { grid-template-columns: repeat(30, 1fr); gap: 2px; height: 160px; }
.bars--30 .bars__val { font-size: 9px; }
.top-list { display: grid; gap: 10px; }
.top-row { display: flex; align-items: center; gap: 10px; }
.top-row__n { width: 22px; flex: none; text-align: center; color: var(--orange); font-family: var(--font-title); font-weight: 900; }
.top-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top-row__body strong { color: var(--ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-row__body small { color: var(--graphite-60); font-size: 12px; }
.top-row__val { display: flex; flex-direction: column; align-items: flex-end; color: var(--green-600); font-weight: 800; font-size: 14px; }
.top-row__val small { color: var(--graphite-60); font-weight: 500; font-size: 11px; }

/* ---------- Mensagens ---------- */
.conv-list { overflow: hidden; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow); }
.conv { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--cream); color: var(--ink); text-decoration: none; }
.conv:last-child { border-bottom: 0; }
.conv:hover { background: var(--cream); }
.conv__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conv__top { display: flex; justify-content: space-between; gap: 8px; }
.conv__top small { color: var(--graphite-60); font-size: 11.5px; white-space: nowrap; }
.conv__last { color: var(--graphite-60); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.is-unread .conv__last { color: var(--graphite); font-weight: 600; }
.conv__badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.chat { display: flex; flex-direction: column; min-height: calc(100dvh - var(--appbar-h) - var(--nav-h) - var(--safe-bottom) - 60px); margin: -6px 0 -70px; }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; }
.chat__head > span:not(.avatar) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat__head small { color: var(--graphite-60); font-size: 12px; }
.chat__head > svg:last-child { color: var(--cream-200); }
.online-dot { display: inline-block; width: 8px; height: 8px; margin-right: 2px; border-radius: 50%; background: var(--green); }
.chat__list { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 2px; }
.chat__empty { margin: auto 0; padding: 30px 10px; text-align: center; color: var(--graphite-60); font-size: 14px; }
.msg { align-self: flex-start; max-width: 82%; padding: 9px 12px 6px; border-radius: 16px 16px 16px 4px; background: var(--cream-50); box-shadow: var(--shadow-sm); animation: rise .25s var(--ease); }
.msg--mine { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--indigo); color: var(--on-dark); }
.msg p { margin: 0; font-size: 14.5px; white-space: pre-line; overflow-wrap: anywhere; }
.msg small { display: block; margin-top: 2px; text-align: right; font-size: 10.5px; opacity: .65; }
.msg__item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 6px; border-radius: 10px; background: rgba(27,31,75,.06); }
.msg--mine .msg__item { background: rgba(245,233,214,.12); }
.msg__item .cover--thumb { width: 40px; }
.msg__item span:last-child { display: flex; flex-direction: column; min-width: 0; }
.msg__item strong { font-size: 13px; }
.msg__item small { margin: 0; text-align: left; font-size: 11px; }
.chat__tip { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--graphite-60); font-size: 11.5px; }
.chat__tip svg { width: 14px; height: 14px; flex: none; }
.chat__form { position: sticky; bottom: calc(var(--nav-h) + var(--safe-bottom) + 8px); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 8px; border-radius: 22px; background: var(--cream-50); box-shadow: var(--shadow-lg); }
.chat__form textarea { flex: 1; min-height: 40px; max-height: 140px; padding: 9px 12px; border: 0; outline: 0; background: transparent; resize: none; font-size: 15px; }
.chat__attach { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 4px 8px; border-radius: 10px; background: var(--green-100); color: var(--green-600); font-size: 12px; font-weight: 600; }
.chat__attach svg { width: 13px; height: 13px; vertical-align: -2px; }

/* ---------- Notificações ---------- */
.ntf-readall { display: block; margin: -4px 0 10px auto; }
.ntf-list { display: grid; gap: 2px; }
.ntf { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 10px; border: 0; border-radius: 12px; background: none; text-align: left; }
.ntf:hover { background: var(--cream); }
.ntf.is-unread { background: var(--orange-100); }
.ntf__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--indigo); color: var(--orange); }
.ntf__icon svg { width: 17px; height: 17px; }
.ntf__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: var(--graphite); }
.ntf__body small { display: flex; align-items: center; gap: 4px; color: var(--graphite-60); font-size: 11.5px; }
.ntf__body small svg { width: 12px; height: 12px; }

/* ---------- Denúncia ---------- */
.report-target { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--cream); font-size: 13.5px; }
.report-target svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--danger); }
.radio-list { display: grid; gap: 6px; }
.radio-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); font-size: 14px; cursor: pointer; }
.radio-row input { margin-top: 3px; accent-color: var(--orange); }
.radio-row:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--orange); }

/* ---------- Perfil: vitrine, nível, conquistas ---------- */
.share-card { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: center; margin-bottom: 16px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow-sm); }
.share-card strong { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 14.5px; }
.share-card strong svg { width: 17px; height: 17px; color: var(--orange); }
.share-card p { margin: 2px 0 0; color: var(--graphite-60); font-size: 12.5px; }
.share-card__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 14px; background: var(--cream-200); transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.level-card { margin-bottom: 4px; padding: 16px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--indigo), var(--indigo-500)); color: var(--on-dark); box-shadow: var(--shadow); }
.level-card__top { display: flex; align-items: center; gap: 12px; }
.level-card__top div { flex: 1; display: flex; flex-direction: column; }
.level-card__top small { color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.level-card__top strong { font-family: var(--font-title); font-size: 19px; }
.level-card__badge { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--orange); color: #fff; font-family: var(--font-title); font-weight: 900; font-size: 20px; box-shadow: 0 6px 14px -4px rgba(227,108,42,.7); }
.level-card__xp { padding: 4px 10px; border-radius: 999px; background: rgba(245,233,214,.12); font-weight: 700; font-size: 12.5px; }
.level-card p { margin: 8px 0 0; font-size: 12.5px; opacity: .85; }
.progress--light { background: rgba(245,233,214,.15); margin-top: 12px; }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-bottom: 18px; }
.medal { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: var(--radius); background: var(--cream-50); text-align: center; box-shadow: var(--shadow-sm); opacity: .72; }
.medal.is-earned { opacity: 1; box-shadow: 0 0 0 1.5px #F2A900, var(--shadow-sm); }
.medal__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cream-200); color: var(--graphite-60); }
.medal.is-earned .medal__icon { background: linear-gradient(140deg, #FFD15C, #F2A900); color: #5A3E00; }
.medal__icon svg { width: 21px; height: 21px; }
.medal strong { color: var(--ink); font-size: 12px; line-height: 1.25; }
.medal small { color: var(--graphite-60); font-size: 10.5px; }
.medal__bar { width: 80%; height: 4px; border-radius: 2px; background: var(--cream-200); overflow: hidden; }
.medal__bar i { display: block; height: 100%; background: var(--orange); }
.medals--compact { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
.medals--compact .medal { padding: 10px 6px; }
.level-inline { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); }
.level-inline .level-card__badge { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
.level-inline > span:last-child { display: flex; flex-direction: column; }
.level-inline strong { color: var(--ink); font-size: 14px; }
.level-inline small { color: var(--graphite-60); font-size: 12px; }
.profile-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.follows-you { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 6px; background: var(--indigo-100); color: var(--ink); font-size: 11px; font-weight: 700; }
.stats--light a.stat { text-decoration: none; }
.stats--light a.stat:hover { background: var(--cream); }

/* ---------- Painel dev: gestão ---------- */
.dev-tab__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 11px; line-height: 20px; text-align: center; }
.panel--mt { margin-top: 14px; }
.panel__text--sm { margin-top: 12px; font-size: 12px; }
.dev-cols--flat { margin-top: 0; }
.trend { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cream); font-size: 13px; color: var(--graphite-60); }
.trend b { color: var(--ink); font-size: 18px; font-family: var(--font-title); margin-right: 4px; }
.spark { width: 100%; height: 42px; }
.funnel { display: grid; grid-template-columns: 1fr 1.1fr 64px; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--ink); font-weight: 600; }
.funnel__bar { height: 12px; border-radius: 6px; background: var(--cream); overflow: hidden; }
.funnel__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--green)); }
.funnel b { text-align: right; }
.funnel b small { display: block; color: var(--graphite-60); font-weight: 500; font-size: 11px; }
.rank { display: grid; gap: 4px; }
.rank__row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.rank__row:hover { background: var(--cream); }
.rank__n { width: 20px; text-align: center; color: var(--orange); font-family: var(--font-title); font-weight: 900; }
.rank__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rank__body small { color: var(--graphite-60); font-size: 11.5px; }
.rank b { font-size: 13px; }
.mini-list { display: grid; }
.mini-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--cream); font-size: 13px; }
.mini-row:last-child { border-bottom: 0; }
.mini-row > span:first-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mini-row strong { color: var(--ink); }
.mini-row small, .mini-row > span:last-child:not(.mini-row__actions) { color: var(--graphite-60); font-size: 12px; }
.mini-row__actions { display: flex; gap: 6px; flex: none; }
.report-list { display: grid; gap: 12px; }
.report-card { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow-sm); border-left: 4px solid var(--danger); }
.report-card.is-closed { border-left-color: var(--cream-200); opacity: .8; }
.report-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.report-card header small { margin-left: auto; color: var(--graphite-60); font-size: 12px; }
.report-card__target { margin: 0; color: var(--ink); font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.report-card__details { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--cream); font-size: 13px; }
.report-card__people, .report-card__result { margin: 0; color: var(--graphite-60); font-size: 12.5px; }
.report-card__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--graphite); cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--orange); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--cream); }
.setting:last-of-type { border-bottom: 0; }
.setting > span { display: flex; flex-direction: column; min-width: 0; }
.setting strong { color: var(--ink); font-size: 14px; }
.setting small { color: var(--graphite-60); font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.sticky-save { position: sticky; bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px); display: flex; justify-content: flex-end; margin-top: 14px; }
.sticky-save .btn { box-shadow: var(--shadow-lg); }
.export-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.export-btn { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); color: var(--ink); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.export-btn span { flex: 1; }
.export-btn svg { width: 18px; height: 18px; color: var(--orange); }
.export-btn svg:last-child { color: var(--graphite-60); }
.export-btn:hover { box-shadow: inset 0 0 0 1.5px var(--orange); }

/* ---------- Vitrine pública (perfil.php) ---------- */
.pub-body { background: var(--cream) radial-gradient(rgba(27,31,75,.035) 1px, transparent 1px) 0 0 / 14px 14px; }
.pub-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px max(16px, calc((100vw - 960px) / 2)); background: var(--indigo); box-shadow: 0 6px 0 -3px var(--orange), 0 9px 0 -3px var(--green); }
.pub-brand { display: flex; align-items: center; gap: 10px; color: var(--on-dark); font-family: var(--font-title); font-weight: 900; font-size: 18px; text-decoration: none; }
.pub-brand img { border-radius: 9px; }
.pub { max-width: 960px; margin: 0 auto; padding: 28px 16px 60px; }
.pub-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.pub-avatar { width: 108px; height: 108px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px var(--cream-50), var(--shadow); }
.pub-avatar--initials { display: grid; place-items: center; background: var(--orange); color: #fff; font-weight: 700; font-size: 36px; }
.pub-hero h1 { display: block; margin: 0; line-height: 1.2; font-family: var(--font-title); font-size: 28px; color: var(--ink); }
.pub-hero h1 .badge { font-family: var(--font-body); }
.pub-tags { margin: 6px 0 0; }
.pub-user { margin: 4px 0 0; color: var(--graphite-60); font-weight: 600; }
.pub-bio { margin: 8px 0 0; }
.pub-level { margin: 8px 0 0; color: var(--graphite-60); font-size: 13.5px; }
.pub-level strong { color: var(--orange-600); }
.pub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 1px; margin-bottom: 16px; overflow: hidden; border-radius: var(--radius); background: rgba(245,233,214,.14); box-shadow: var(--shadow); }
.pub-stats div { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; background: var(--indigo); color: var(--on-dark); }
.pub-stats b { font-family: var(--font-title); font-size: 22px; }
.pub-stats div:first-child b { color: var(--orange); }
.pub-stats span { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.pub-medals { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pub-medal { padding: 6px 12px; border-radius: 999px; background: linear-gradient(140deg, #FFE08A, #F2C14E); color: #5A3E00; font-size: 12.5px; font-weight: 700; }
.pub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 560px) { .pub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .pub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pub-empty { padding: 50px 20px; text-align: center; }
.pub-empty h1 { font-family: var(--font-title); color: var(--ink); }
.pub-cta { margin-top: 30px; padding: 26px 22px; border-radius: var(--radius-lg); background: var(--indigo); color: var(--on-dark); text-align: center; box-shadow: var(--shadow-lg); }
.pub-cta h2 { margin: 0 0 6px; font-family: var(--font-title); font-size: 22px; }
.pub-cta p { margin: 0 0 16px; opacity: .85; }
.pub-cta div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 520px) { .pub-hero { flex-direction: column; text-align: center; } .pub-hero h1 { justify-content: center; } .pub-stats span { font-size: 8.5px; letter-spacing: .03em; } }

/* Ajustes finos 2026-11-02-c */
.card__trade { top: auto; bottom: 14px; left: 10px; right: auto; }
.panel__title > svg, .match__trade svg, .event__meta svg, .event__cat svg { display: inline-block; vertical-align: -3px; margin-right: 4px; }
.panel__title > svg { width: 18px; height: 18px; color: var(--orange); margin-right: 6px; }
.medals-more { display: block; margin: -8px auto 18px; }

/* ==========================================================================
   VERSÃO D — recursos de usuário (propostas, reputação, prateleiras, empréstimos,
   importação) e ferramentas do painel dev (recursos, tipos de mídia, catálogo,
   erros, lixeira, restauração, personificação)
   ========================================================================== */

/* Selo: imune a regras genéricas de "span" dos componentes. */
.uname, .uname__tail { display: inline !important; flex: none !important; min-width: 0; }
.uname__tail { white-space: nowrap !important; }
.ubadge { display: inline-block !important; flex: none !important; }

.muted { color: var(--graphite-60); font-size: 13px; }
.sheet__lead { margin: 0 0 14px; color: var(--graphite-60); font-size: 14px; line-height: 1.5; }
.section-title { margin: 18px 0 10px; font-family: var(--font-title); font-size: 15px; color: var(--ink); }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; color: var(--orange-600); font-size: 13px; font-weight: 700; text-decoration: none; }
.back-link svg { width: 16px; height: 16px; }
.detail__label { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--graphite-60); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.detail__label svg { width: 15px; height: 15px; color: var(--orange); }
.detail__label--section { margin-top: 6px; }
.menu-item[disabled] { opacity: .55; cursor: not-allowed; }
.menu-item__count, .quick-link__count, .seg-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--orange); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
}
.menu-item__count[hidden], .quick-link__count[hidden], .seg-count[hidden] { display: none; }
.seg-count { display: inline-block; margin-left: 6px; }
.panel--link .btn { margin-top: 6px; }

/* Navegação inferior: colunas automáticas (recursos podem ser desligados) */
.bottom-nav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.bottom-nav__item[hidden] { display: none; }

/* Atalhos da coleção: rolagem horizontal quando há muitos */
.quick-links { display: flex; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; margin: -4px -2px 10px; }
.quick-links::-webkit-scrollbar { display: none; }
.quick-link { position: relative; flex: 1 0 74px; border: 0; cursor: pointer; font-family: inherit; }
.quick-link__count { position: absolute; top: 6px; right: 10px; }

/* Contadores por tipo de mídia: rolam quando há muitos tipos */
.stats--scroll { overflow-x: auto; scrollbar-width: none; }
.stats--scroll::-webkit-scrollbar { display: none; }
.stats--scroll .stat { flex: 1 0 70px; }
.stats--scroll .stat__label { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; letter-spacing: .06em; white-space: nowrap; }
.stats--scroll .stat__label .dot { width: 7px; height: 7px; background: var(--c); box-shadow: 0 0 0 1.5px rgba(245,233,214,.6); }
.stats--scroll .stat__value { font-size: 20px; }

/* Escolha do tipo de mídia no cadastro */
.type-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.type-pick input { position: absolute; opacity: 0; pointer-events: none; }
.type-pick span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1.5px solid var(--cream-200); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 700; text-align: center; cursor: pointer; transition: all .2s var(--ease); }
.type-pick__art { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background-color: var(--cv); background-image: linear-gradient(150deg, rgba(255,255,255,.2), rgba(0,0,0,.18)); }
.type-pick__art svg { width: 34px; height: auto; }
.type-pick input:checked + span { border-color: var(--indigo); box-shadow: 0 0 0 2px var(--indigo) inset; background: var(--indigo-100); }
.type-pick input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 1px; }

/* Prateleiras */
.shelf-bar { display: flex; align-items: center; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.shelf-bar::-webkit-scrollbar { display: none; }
.shelf-bar__label { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--graphite-60); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.shelf-bar__label svg { width: 14px; height: 14px; }
.shelf-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 11px; border: 1.5px dashed var(--cream-200); border-radius: 8px; background: var(--cream-50); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.shelf-chip i { width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--indigo)); }
.shelf-chip small { color: var(--graphite-60); font-weight: 700; }
.shelf-chip.is-active { border-style: solid; border-color: var(--c, var(--indigo)); background: color-mix(in srgb, var(--c, #1B1F4B) 12%, white); }
.shelf-chip--manage { border-style: solid; color: var(--orange-600); }
.shelf-chip--manage svg { width: 14px; height: 14px; }
.shelf-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.shelf-pick { position: relative; }
.shelf-pick input { position: absolute; opacity: 0; pointer-events: none; }
.shelf-pick span, .shelf-pick--new { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1.5px solid var(--cream-200); border-radius: 8px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.shelf-pick i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.shelf-pick input:checked + span { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, white); }
.shelf-pick input:checked + span::after { content: "✓"; color: var(--c); font-weight: 800; }
.shelf-pick--new { border-style: dashed; color: var(--orange-600); }
.shelf-pick--new svg { width: 14px; height: 14px; }
.detail__shelves { padding: 12px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.shelf-list { display: grid; gap: 8px; margin-bottom: 14px; }
.shelf-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.shelf-row > i { width: 14px; height: 32px; border-radius: 4px; background: var(--c); }
.shelf-row > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.shelf-row small { color: var(--graphite-60); font-size: 12px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; }
.swatch input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.swatch span { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); cursor: pointer; transition: transform .15s; }
.swatch input:checked + span { box-shadow: 0 0 0 3px var(--cream-50), 0 0 0 5px var(--c); transform: scale(.92); }
.swatch input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 3px; }
.swatch--custom input { width: 34px; height: 34px; padding: 0; border: 2px dashed var(--cream-200); border-radius: 50%; background: none; cursor: pointer; }
.swatch--custom input::-webkit-color-swatch-wrapper { padding: 3px; }
.swatch--custom input::-webkit-color-swatch { border: 0; border-radius: 50%; }

/* Empréstimos */
.card__trade--loan { background: var(--indigo); color: var(--on-dark); }
.card__trade--loan svg { width: 11px; height: 11px; vertical-align: -1px; }
.card__trade--loan.is-late { background: var(--danger); }
.loan-box { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--indigo-100); color: var(--ink); }
.loan-box > svg { width: 22px; height: 22px; flex: none; }
.loan-box > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.loan-box small { color: var(--graphite-60); font-size: 12px; }
.loan-box.is-late { background: var(--danger-100); color: var(--danger); }
.lend-item, .rate-who { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--cream); }
.lend-item > span, .rate-who > span { display: flex; flex-direction: column; min-width: 0; }
.lend-item small, .rate-who small { color: var(--graphite-60); font-size: 12px; }
.loan-group { display: grid; gap: 10px; }
.loan { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); border-left: 4px solid var(--green); }
.loan.is-late { border-left-color: var(--danger); }
.loan .cover--thumb { width: 56px; flex: none; }
.loan__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.loan__body > small { color: var(--graphite-60); font-size: 12px; }
.loan__who, .loan__due { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink); font-weight: 600; }
.loan__who svg, .loan__due svg { width: 14px; height: 14px; color: var(--orange); flex: none; }
.loan.is-late .loan__due { color: var(--danger); }
.loan.is-late .loan__due svg { color: var(--danger); }
.loan__note { color: var(--graphite-60); font-size: 12.5px; font-style: italic; }

/* Importação */
.import__rules { margin: 0 0 14px; padding-left: 18px; color: var(--graphite); font-size: 13.5px; line-height: 1.55; }
.import__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.import__actions label { cursor: pointer; }
.import__summary { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; padding: 12px; border-radius: 12px; background: var(--green-100); color: var(--green-600); }
.import__summary svg { width: 20px; height: 20px; flex: none; }
.import__summary div { display: flex; flex-direction: column; min-width: 0; }
.import__summary small { color: var(--graphite); font-size: 12px; }
.import__errors { margin: 10px 0; padding: 12px; border-radius: 12px; background: var(--orange-100); color: var(--orange-600); font-size: 13px; }
.import__errors ul { margin: 6px 0 0; padding-left: 18px; max-height: 160px; overflow: auto; color: var(--graphite); }
.table-wrap { overflow-x: auto; margin-bottom: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--cream-200); }
table.table--compact { width: 100%; border-collapse: collapse; border-radius: 0; box-shadow: none; background: var(--surface); font-size: 12.5px; }
table.table--compact th, table.table--compact td { padding: 8px 10px; border-bottom: 1px solid var(--cream); text-align: left; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
table.table--compact th { background: var(--cream); color: var(--graphite-60); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* Propostas */
.offer { margin-bottom: 12px; padding: 14px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow); animation: cardIn .35s var(--ease) both; }
.offer--declined, .offer--cancelled { opacity: .72; }
.offer__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.offer__head > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.offer__head small { color: var(--graphite-60); font-size: 12px; }
.status { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.status--warn { background: var(--orange-100); color: var(--orange-600); }
.status--ok { background: var(--green-100); color: var(--green-600); }
.status--muted { background: var(--cream-200); color: var(--graphite-60); }
.offer__deal { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; }
.offer__side { min-width: 0; }
.offer__label { display: block; margin-bottom: 6px; color: var(--graphite-60); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.offer__arrow { align-self: center; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #fff; }
.offer__arrow svg { width: 18px; height: 18px; }
.offer__target, .offer__items li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.offer__target > span, .offer__items li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.offer__target strong, .offer__items strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--ink); }
.offer__target small, .offer__items small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--graphite-60); font-size: 11.5px; }
.offer__target .cover--thumb, .offer__items .cover--thumb { width: 44px; flex: none; }
.offer__items { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.offer__money { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--green-100); color: var(--green-600); }
.offer__money svg { width: 20px; height: 20px; }
.offer__msg { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--cream); font-size: 13.5px; font-style: italic; }
.offer__note { display: flex; gap: 6px; margin: 8px 0 0; color: var(--graphite-60); font-size: 12.5px; }
.offer__note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.offer__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.offer__actions:empty { display: none; }
.form .offer__target { padding: 10px 12px; border-radius: 12px; background: var(--cream); }
@media (max-width: 420px) { .offer__deal { grid-template-columns: 1fr; } .offer__arrow { transform: rotate(90deg); justify-self: center; } }
.offer-pick { display: grid; gap: 6px; max-height: 260px; overflow: auto; padding: 2px; }
.offer-pick__item input { position: absolute; opacity: 0; pointer-events: none; }
.offer-pick__item > span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--cream-200); border-radius: 12px; background: var(--surface); cursor: pointer; }
.offer-pick__item > span > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.offer-pick__item strong { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer-pick__item small { color: var(--graphite-60); font-size: 12px; }
.offer-pick__item .cover--thumb { width: 40px; }
.offer-pick__tick { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border: 1.5px solid var(--cream-200); border-radius: 6px; color: transparent; }
.offer-pick__tick svg { width: 14px; height: 14px; }
.offer-pick__item input:checked + span { border-color: var(--orange); background: var(--orange-100); }
.offer-pick__item input:checked + span .offer-pick__tick { border-color: var(--orange); background: var(--orange); color: #fff; }
.offer-pick__item input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 1px; }

/* Estrelas de avaliação (entrada) */
.star-input__row { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-input__row input { position: absolute; opacity: 0; pointer-events: none; }
.star-input__row label { cursor: pointer; color: var(--cream-200); transition: transform .15s, color .15s; }
.star-input__row label svg { width: 34px; height: 34px; }
.star-input__row label:hover, .star-input__row label:hover ~ label, .star-input__row input:checked ~ label { color: #F2A93B; }
.star-input__row label:active { transform: scale(.9); }
.star-input__row input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }

/* Reputação */
.rep { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; color: #B7791F; font-size: 12.5px; font-weight: 800; }
.rep svg { width: 14px; height: 14px; color: #F2A93B; }
.rep small { color: var(--graphite-60); font-weight: 600; }
.rep--new { color: var(--green-600); font-weight: 700; }
.rep--new svg { color: var(--green); }
.rep-stars { display: inline-flex; gap: 2px; vertical-align: -1px; }
.rep-stars i { width: 12px; height: 12px; background: var(--cream-200); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.rep-stars i.on { background: #F2A93B; }
.rep-stars i.half { background: linear-gradient(90deg, #F2A93B 50%, var(--cream-200) 50%); }
.rep-panel { margin-bottom: 16px; }
.rep-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rep-head > b { font-family: var(--font-title); font-size: 34px; line-height: 1; color: var(--ink); }
.rep-head > div { display: flex; flex-direction: column; gap: 4px; }
.rep-head .rep-stars i { width: 16px; height: 16px; }
.rep-head small { color: var(--graphite-60); font-size: 12px; }
.rep-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rep-list li { display: flex; gap: 10px; }
.rep-list li > div { flex: 1; min-width: 0; }
.rep-list p { margin: 2px 0; font-size: 13.5px; }
.rep-list small { color: var(--graphite-60); font-size: 11.5px; }

/* Perfil */
.profile-hero__name .uname { font-family: var(--font-title); }

/* Personificação */
.imp-bar { position: relative; z-index: 21; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: repeating-linear-gradient(135deg, #E36C2A 0 14px, #D2601F 14px 28px); color: #fff; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.imp-bar > svg { width: 22px; height: 22px; flex: none; }
.imp-bar > span { flex: 1; min-width: 0; line-height: 1.35; }
.imp-bar small { display: block; opacity: .9; font-size: 11.5px; }
.imp-bar .btn { flex: none; background: var(--surface); color: var(--orange-600); border-color: #fff; }

/* Troca de senha obrigatória */
.pw-gate { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; overflow: auto; background: var(--indigo) radial-gradient(circle at 20% 10%, rgba(227,108,42,.25), transparent 50%); }
.pw-gate[hidden] { display: none; }
.pw-gate__card { width: 100%; max-width: 400px; padding: 26px 22px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow-lg); }
.pw-gate__card img { display: block; margin: 0 auto 10px; }
.pw-gate__card h1 { margin: 0 0 6px; font-family: var(--font-title); font-size: 21px; color: var(--ink); text-align: center; grid-column: 1 / -1; }
.pw-gate__card > p { margin: 0 0 6px; color: var(--graphite-60); font-size: 13.5px; text-align: center; grid-column: 1 / -1; }
.pw-gate__card > img { grid-column: 1 / -1; }

/* Scan: resultado do catálogo oficial */
.result-row--official { border-color: #1D9BF0 !important; background: #EEF7FE !important; }
.result-row em .ubadge { margin: 0 2px 0 0; }

/* -------- Painel dev: Central de Recursos -------- */
.feat-head { display: grid; gap: 10px; margin-bottom: 14px; }
.feat-head__meter { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; padding: 14px 16px; border-radius: var(--radius); background: var(--indigo); color: var(--on-dark); }
.feat-head__meter b { font-family: var(--font-title); font-size: 30px; color: var(--orange); }
.feat-head__meter i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(245,233,214,.18); overflow: hidden; }
.feat-head__meter em { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--orange), var(--green)); transition: width .4s var(--ease); }
.feat-groups { display: grid; gap: 14px; }
@media (min-width: 860px) { .feat-groups { grid-template-columns: 1fr 1fr; align-items: start; } }
.feat-group__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.feat-group__head .panel__title { margin: 0; }
.feat { transition: opacity .2s; }
.feat.is-off > span strong { color: var(--graphite-60); }
.feat__state { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--danger-100); color: var(--danger); font-size: 10.5px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.feat__warn { display: inline-flex; align-items: center; gap: 4px; color: var(--orange-600) !important; font-weight: 600; }
.feat__warn svg { width: 13px; height: 13px; }

/* -------- Painel dev: Tipos de mídia -------- */
.mt-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.mt-suggest > span { display: inline-flex; align-items: center; gap: 4px; color: var(--graphite-60); font-size: 12.5px; font-weight: 700; }
.mt-suggest > span svg { width: 14px; height: 14px; color: var(--orange); }
.mt-list { display: grid; gap: 10px; }
.mt { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); }
.mt.is-off { opacity: .65; }
.mt__cover { width: 58px; flex: none; border-radius: 12px; }
.mt__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mt__body strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink); }
.mt__body small { color: var(--graphite-60); font-size: 12px; }
.mt__actions { display: flex; align-items: center; gap: 4px; flex: none; }
.rot-up { transform: rotate(-90deg); } .rot-down { transform: rotate(90deg); }
@media (max-width: 520px) { .mt { flex-wrap: wrap; } .mt__actions { width: 100%; justify-content: flex-end; } }
.mt-preview { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--radius); background: var(--cream); }
.mt-preview .cover { width: 76px; flex: none; border-radius: 14px; box-shadow: var(--shadow-sm); }
.mt-preview > div { display: flex; flex-direction: column; }
.mt-preview strong { font-family: var(--font-title); color: var(--ink); font-size: 17px; }
.mt-preview small { color: var(--graphite-60); font-size: 12px; }
.art-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.art-pick input { position: absolute; opacity: 0; pointer-events: none; }
.art-pick span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1.5px solid var(--cream-200); border-radius: 12px; background: var(--surface); font-size: 11.5px; font-weight: 600; text-align: center; color: var(--ink); cursor: pointer; }
.art-pick i { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 10px; background: var(--indigo-100); }
.art-pick i svg { width: 42px; height: auto; }
.art-pick input:checked + span { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange) inset; }
.art-pick input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 1px; }

/* -------- Painel dev: Catálogo, Erros, Lixeira, Acessos, Restauração -------- */
.cat-list, .trash-list, .err-list, .login-list { display: grid; gap: 8px; }
.cat-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.cat-row .cover--thumb { width: 44px; flex: none; }
.cat-row > span:not(.rarity) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cat-row strong { color: var(--ink); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row small { color: var(--graphite-60); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row code { color: var(--orange-600); font-size: 11.5px; }
.kpi--alert { border-top-color: var(--danger); }
.kpi--alert .kpi__value { color: var(--danger); }
.err { border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.err summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.err summary::-webkit-details-marker { display: none; }
.err[open] summary { border-bottom: 1px solid var(--cream); }
.err .info-list { margin: 10px 12px 12px; }
.err__origin { flex: none; padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.err__origin--srv { background: var(--danger-100); color: var(--danger); }
.err__origin--web { background: var(--indigo-100); color: var(--ink); }
.err__msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.err[open] .err__msg { white-space: normal; word-break: break-word; }
.err__count { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--cream); font-size: 12px; font-weight: 800; color: var(--ink); }
.trash-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); }
.trash-row__img { width: 52px; height: 52px; flex: none; border-radius: 10px; object-fit: cover; background: var(--cream); }
.trash-row__img--icon { display: grid; place-items: center; color: var(--graphite-60); }
.trash-row__img--icon svg { width: 22px; height: 22px; }
.trash-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trash-row__body strong { color: var(--ink); font-size: 14px; }
.trash-row__body small { color: var(--graphite-60); font-size: 12px; }
.trash-row__exp { color: var(--orange-600) !important; font-weight: 600; }
.trash-row__actions { display: flex; align-items: center; gap: 4px; flex: none; }
@media (max-width: 520px) { .trash-row { flex-wrap: wrap; } .trash-row__actions { width: 100%; justify-content: flex-end; } }
.login-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.login-row > svg { width: 18px; height: 18px; color: var(--green); }
.login-row.is-fail > svg { color: var(--danger); }
.login-row > span { display: flex; flex-direction: column; min-width: 0; }
.login-row small { color: var(--graphite-60); font-size: 12px; }
.login-row time { color: var(--graphite-60); font-size: 11.5px; white-space: nowrap; }
.login-list { margin-bottom: 14px; }
.restore { display: grid; gap: 10px; margin-top: 14px; }
.restore--ok { grid-template-columns: auto 1fr; align-items: start; padding: 14px; border-radius: var(--radius); background: var(--green-100); color: var(--green-600); }
.restore--ok > svg { width: 24px; height: 24px; }
.restore--ok p { margin: 4px 0 10px; color: var(--graphite); font-size: 13.5px; }
.restore--ok .btn { margin: 0 6px 6px 0; }
.segmented span { grid-auto-flow: column; gap: 6px; }
.seg-count { margin-left: 0; }
.mt__actions .icon-btn { color: var(--ink); background: var(--cream); }
.mt__actions .icon-btn:disabled { opacity: .3; }
.mt__actions .icon-btn svg { width: 16px; height: 16px; }
.cat-row .icon-btn, .trash-row .icon-btn { color: var(--ink); background: var(--cream); }
.cat-row .icon-btn svg, .trash-row .icon-btn svg { width: 16px; height: 16px; }

/* ==========================================================================
   VERSÃO E — ondas vivas e tela de apresentação
   ========================================================================== */

/* ---------- Ondas laranja/verde com movimento leve ---------- */
@property --split { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@keyframes splitDrift { 0%, 100% { --split: 50%; } 25% { --split: 43%; } 75% { --split: 57%; } }
@keyframes sheen      { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(420%); } }
@keyframes waveSway   {
  0%, 100% { transform: translateX(0) rotate(var(--rot, -3deg)); }
  50%      { transform: translateX(var(--sway, -2.5%)) rotate(calc(var(--rot, -3deg) + 1.4deg)); }
}

.appbar__stripe { overflow: hidden; }
.appbar__stripe::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: sheen 9s ease-in-out 2s infinite;
}
.bottom-nav::before, .card__media::after {
  background: linear-gradient(90deg, var(--orange) var(--split, 50%), var(--green) var(--split, 50%));
}
.bottom-nav::before { animation: splitDrift 10s ease-in-out infinite; }
.card:hover .card__media::after, .card:focus-visible .card__media::after { animation: splitDrift 2.4s ease-in-out infinite; }

.auth__waves i { --rot: -3deg; animation: waveSway 9s ease-in-out infinite; }
.auth__waves i:nth-child(2) { --sway: 2%; animation-duration: 11s; animation-delay: -3s; }
.auth__waves i:nth-child(3) { --sway: -3%; animation-duration: 13s; animation-delay: -6s; }

.splash__wave { --rot: -5deg; animation: waveIn 1s var(--ease) both, waveSway 10s ease-in-out 1.4s infinite; }
.splash__wave--cream  { --sway: 2%; animation-delay: .25s, 1.6s; }
.splash__wave--orange { --sway: -3%; animation-delay: .35s, 1.8s; }
.splash__wave--green  { animation-delay: .15s, 1.4s; }

/* ---------- Tela de apresentação ---------- */
.landing { min-height: 100dvh; background: var(--cream) radial-gradient(rgba(27,31,75,.035) 1px, transparent 1px) 0 0 / 14px 14px; color: var(--graphite); overflow-x: hidden; }
.landing[hidden] { display: none; }
.lp-top {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(14px + var(--safe-top)) max(16px, calc((100vw - 1100px) / 2)) 14px;
}
.lp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--on-dark); font-family: var(--font-title); font-weight: 900; font-size: 18px; text-decoration: none; }
.lp-brand img { border-radius: 9px; }

.lp-hero {
  position: relative; overflow: hidden;
  display: grid; align-items: center; gap: 28px;
  padding: calc(92px + var(--safe-top)) max(20px, calc((100vw - 1100px) / 2)) 120px;
  background: radial-gradient(circle at 78% 30%, var(--indigo-500), var(--indigo) 62%);
  color: var(--on-dark);
}
@media (min-width: 860px) { .lp-hero { grid-template-columns: 1.1fr .9fr; padding-bottom: 150px; min-height: 640px; } }
.lp-hero__text { position: relative; z-index: 2; animation: rise .6s var(--ease) both; }
.lp-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--orange); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lp-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.lp-title { margin: 0; font-family: var(--font-title); font-weight: 900; font-size: clamp(30px, 6.4vw, 52px); line-height: 1.12; letter-spacing: -.01em; }
.lp-title span { color: var(--orange); }
.lp-lead { max-width: 540px; margin: 16px 0 0; color: rgba(245,233,214,.82); font-size: clamp(15px, 2.2vw, 17.5px); line-height: 1.6; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.lp-cta--center { justify-content: center; }
.btn--lg { height: 52px; padding: 0 24px; font-size: 15.5px; border-radius: 14px; }
.lp-note { margin: 12px 0 0; color: rgba(245,233,214,.6); font-size: 12.5px; }

/* Palco com as mídias: o vinil gira devagar, as outras flutuam */
.lp-stage { position: relative; z-index: 1; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; animation: rise .8s var(--ease) .15s both; }
.lp-stage::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(227,108,42,.28), transparent 65%); filter: blur(10px); }
.lp-disc { position: absolute; inset: 12%; filter: drop-shadow(0 24px 36px rgba(0,0,0,.45)); animation: reel 26s linear infinite; }
.lp-disc svg { width: 100%; height: 100%; }
.lp-float { position: absolute; width: 34%; filter: drop-shadow(0 14px 22px rgba(0,0,0,.4)); animation: floaty 7s ease-in-out infinite; }
.lp-float svg { width: 100%; height: auto; display: block; }
.lp-float--a { left: -4%; bottom: 8%; transform: rotate(-10deg); }
.lp-float--b { right: -2%; top: 2%; width: 26%; animation-delay: -2.4s; --r: 8deg; }
.lp-float--c { right: 0; bottom: -2%; width: 32%; animation-delay: -4.6s; --r: 6deg; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--r, -10deg)); } 50% { transform: translateY(-12px) rotate(calc(var(--r, -10deg) + 3deg)); } }

.lp-waves { position: absolute; z-index: 1; left: -10%; right: -10%; bottom: -40px; height: 120px; pointer-events: none; }
.lp-waves i { --rot: -3deg; position: absolute; inset: 0; border-radius: 50% 50% 0 0; transform: rotate(-3deg); animation: waveSway 10s ease-in-out infinite; }
.lp-waves i:nth-child(1) { background: var(--green); }
.lp-waves i:nth-child(2) { --sway: 2%; top: 16px; background: var(--cream-50); opacity: .92; animation-duration: 12s; animation-delay: -4s; }
.lp-waves i:nth-child(3) { --sway: -3%; top: 30px; background: var(--cream); animation-duration: 14s; animation-delay: -7s; }
.lp-waves--top { top: -40px; bottom: auto; transform: scaleY(-1); }
.lp-waves--top i:nth-child(1) { background: var(--orange); }
.lp-waves--top i:nth-child(2) { background: var(--green); opacity: 1; }
.lp-waves--top i:nth-child(3) { background: var(--cream); }

/* Números da comunidade */
.lp-stats {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px;
  max-width: 1100px; margin: -56px max(16px, calc((100vw - 1100px) / 2)) 0; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--cream-200); box-shadow: var(--shadow-lg);
}
.lp-stats[hidden] { display: none; }
.lp-stat { display: flex; flex-direction: column; align-items: center; padding: 18px 10px; background: var(--cream-50); text-align: center; }
.lp-stat b { font-family: var(--font-title); font-weight: 900; font-size: 30px; line-height: 1; color: var(--ink); }
.lp-stat:first-child b { color: var(--orange); }
.lp-stat span { margin-top: 6px; color: var(--graphite-60); font-size: 12px; font-weight: 600; }

.lp-section { max-width: 1100px; margin: 0 auto; padding: 56px max(16px, calc((100vw - 1100px) / 2)) 0; }
@media (min-width: 1132px) { .lp-section { padding-left: 0; padding-right: 0; } }
.lp-h2 { margin: 0 0 6px; font-family: var(--font-title); font-weight: 900; font-size: clamp(22px, 4vw, 30px); color: var(--ink); }
.lp-sub { margin: 0 0 18px; color: var(--graphite-60); font-size: 14.5px; }
.lp-h2 + .lp-steps, .lp-h2 + .lp-features, .lp-h2 + .lp-media { margin-top: 18px; }

.lp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.lp-reveal.is-in { opacity: 1; transform: none; }

.lp-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
.lp-steps li { display: flex; gap: 14px; padding: 18px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow); }
.lp-steps b { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--indigo); color: var(--orange); font-family: var(--font-title); font-size: 20px; }
.lp-steps li:nth-child(2) b { color: var(--green); background: var(--green-100); }
.lp-steps li:nth-child(3) b { color: #fff; background: var(--orange); }
.lp-steps strong { color: var(--ink); font-size: 16px; }
.lp-steps p { margin: 4px 0 0; color: var(--graphite-60); font-size: 14px; line-height: 1.5; }

.lp-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.lp-feature { padding: 18px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow-sm); border: 1px solid rgba(27,31,75,.05); transition: transform .25s var(--ease), box-shadow .25s; }
.lp-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lp-feature__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--orange-100); color: var(--orange-600); }
.lp-feature:nth-child(3n+2) .lp-feature__icon { background: var(--green-100); color: var(--green-600); }
.lp-feature:nth-child(3n) .lp-feature__icon { background: var(--indigo-100); color: var(--ink); }
.lp-feature__icon svg { width: 22px; height: 22px; }
.lp-feature h3 { margin: 12px 0 4px; color: var(--ink); font-size: 15.5px; }
.lp-feature p { margin: 0; color: var(--graphite-60); font-size: 13.5px; line-height: 1.5; }

.lp-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 12px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
@media (min-width: 860px) { .lp-shelf { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }
.lp-item { display: flex; flex-direction: column; gap: 3px; padding: 8px 8px 12px; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; scroll-snap-align: start; transition: transform .25s var(--ease), box-shadow .25s; }
.lp-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lp-item .cover { margin-bottom: 6px; border-radius: 10px; }
.lp-item strong { overflow: hidden; color: var(--ink); font-family: var(--font-title); font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.lp-item small { overflow: hidden; color: var(--graphite-60); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lp-item__owner { color: var(--orange-600); font-size: 11.5px; font-weight: 700; }

.lp-media { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-medium { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--cream-50); box-shadow: var(--shadow-sm); }
.lp-medium__art { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--cv); background-image: linear-gradient(150deg, rgba(255,255,255,.2), rgba(0,0,0,.18)); }
.lp-medium__art svg { width: 28px; height: auto; }
.lp-medium strong { color: var(--ink); font-size: 14px; }
.lp-medium small { color: var(--graphite-60); font-size: 12px; }

.lp-final { position: relative; overflow: hidden; margin-top: 72px; padding: 110px 20px 70px; background: var(--indigo); color: var(--on-dark); text-align: center; }
.lp-final h2 { position: relative; z-index: 2; margin: 0 auto; max-width: 640px; font-family: var(--font-title); font-weight: 900; font-size: clamp(24px, 4.6vw, 36px); }
.lp-final p { position: relative; z-index: 2; margin: 10px auto 0; max-width: 520px; color: rgba(245,233,214,.78); }
.lp-final .lp-cta { position: relative; z-index: 2; }
.lp-foot { padding: 18px 16px calc(18px + var(--safe-bottom)); background: var(--indigo-700); color: rgba(245,233,214,.55); font-size: 12px; text-align: center; }

.auth__about { display: inline-block; margin-top: 10px; color: rgba(245,233,214,.8); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Quem prefere menos movimento: tudo parado. */
@media (prefers-reduced-motion: reduce) {
  .appbar__stripe::after, .bottom-nav::before, .card__media::after, .auth__waves i, .splash__wave, .lp-waves i,
  .lp-disc, .lp-float { animation: none !important; }
  .lp-reveal { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 859px) { .lp-stage { width: min(78%, 300px); } }

/* ==========================================================================
   VERSÃO F — Temas (recurso "themes", liberado pelo dev)
   Cada tema troca apenas os tokens; os componentes usam sempre var(--…).
   ========================================================================== */
html[data-theme="dourado"] {
  --indigo: #1C1A17; --indigo-700: #0F0E0C; --indigo-500: #34302A; --indigo-100: #ECE6DA;
  --orange: #C9962B; --orange-600: #A87A1A; --orange-100: #F5EBD3;
  --green: #2F5D50;  --green-600: #244A40;  --green-100: #DCE8E3;
  --cream: #F4EFE6;  --cream-50: #FFFDF8;   --cream-200: #E3D9C6;
}
html[data-theme="bossa"] {
  --indigo: #0F4C5C; --indigo-700: #0A3540; --indigo-500: #1D6A7D; --indigo-100: #DCEBEE;
  --orange: #E39A2D; --orange-600: #B97814; --orange-100: #FBEBD0;
  --green: #3A8F5C;  --green-600: #2E7449;  --green-100: #D9EFE0;
  --cream: #EEF4EC;  --cream-50: #FBFDF9;   --cream-200: #D5E3D2;
}
html[data-theme="anos80"] {
  --indigo: #3B1F4A; --indigo-700: #2A1536; --indigo-500: #55306A; --indigo-100: #EFE3F2;
  --orange: #EE4B57; --orange-600: #D2343F; --orange-100: #FDE0E1;
  --green: #17998F;  --green-600: #117A72;  --green-100: #D3F0EC;
  --cream: #FBEFE9;  --cream-50: #FFFAF7;   --cream-200: #F0D9CF;
}
html[data-theme="locadora"] {
  --indigo: #0B2545; --indigo-700: #071A31; --indigo-500: #134074; --indigo-100: #DDE6F1;
  --orange: #E5383B; --orange-600: #C2252A; --orange-100: #FBDCDC;
  --green: #238A7E;  --green-600: #1B6F65;  --green-100: #D6EEEA;
  --cream: #EEF2F7;  --cream-50: #FBFCFE;   --cream-200: #D4DEEA;
}
html[data-theme="sebo"] {
  --indigo: #3E2C23; --indigo-700: #2B1E18; --indigo-500: #5A4134; --indigo-100: #EDE3DA;
  --orange: #B5651D; --orange-600: #95501A; --orange-100: #F3E1CC;
  --green: #6B7B3A;  --green-600: #55622D;  --green-100: #E5EAD3;
  --cream: #EFE6D2;  --cream-50: #FBF7EE;   --cream-200: #DFD1B5;
  --graphite: #3A322B; --graphite-60: #76685A;
}

/* Temas escuros: superfícies escuras e textos claros */
html[data-theme="noite"] {
  --indigo: #232861; --indigo-700: #0A0C1C; --indigo-500: #31377A; --indigo-100: #252A52;
  --orange: #E36C2A; --orange-600: #F28C52; --orange-100: #3B2618;
  --green: #19A96B;  --green-600: #43C58C;  --green-100: #12332A;
  --cream: #101226;  --cream-50: #191C38;   --cream-200: #2B2F57;
  --graphite: #E4E2F0; --graphite-60: #A3A1BC;
  --danger: #F06B62; --danger-100: #3A1A1A;
  --ink: #F1EEFF; --on-dark: #F5E9D6; --surface: #1F2342;
}
html[data-theme="fliperama"] {
  --indigo: #2A1B5C; --indigo-700: #08061A; --indigo-500: #3D2A82; --indigo-100: #261E4A;
  --orange: #FF3EA5; --orange-600: #FF6DBB; --orange-100: #3A1530;
  --green: #00BFB0;  --green-600: #3FE6D8;  --green-100: #0E3533;
  --cream: #0D0B1A;  --cream-50: #17132B;   --cream-200: #2E2650;
  --graphite: #EDE9FF; --graphite-60: #A79FCB;
  --danger: #FF5A5A; --danger-100: #3A1418;
  --ink: #FFFFFF; --on-dark: #F4EEFF; --surface: #1C1735;
}
html[data-theme="noite"], html[data-theme="fliperama"] {
  color-scheme: dark;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 8px 22px -8px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.3);
  --shadow-lg: 0 20px 44px -12px rgba(0,0,0,.75);
}
html[data-theme="noite"] .field__input::placeholder, html[data-theme="fliperama"] .field__input::placeholder { color: #8A88A6; }
html[data-theme="noite"] .chip--light, html[data-theme="fliperama"] .chip--light { background: rgba(25,28,56,.92); color: var(--ink); }
html[data-theme="fliperama"] .appbar__stripe, html[data-theme="fliperama"] .bottom-nav::before { box-shadow: 0 0 10px rgba(255,62,165,.6); }
html[data-theme="fliperama"] .lp-title span, html[data-theme="fliperama"] .view__title { text-shadow: 0 0 18px rgba(255,62,165,.35); }

/* Seletor de temas */
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.theme-opt input { position: absolute; opacity: 0; pointer-events: none; }
.theme-opt > span { display: block; overflow: hidden; border: 2px solid var(--cream-200); border-radius: 16px; background: var(--surface); cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.theme-opt:hover > span { transform: translateY(-2px); }
.theme-opt input:checked + span { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 30%, transparent); }
.theme-opt input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.theme-prev { position: relative; display: grid; grid-template-rows: 22px 1fr 6px; height: 92px; background: var(--p-page); }
.theme-prev__bar { background: var(--p-bar); box-shadow: 0 3px 0 -1px var(--p-acc); }
.theme-prev__body { display: flex; gap: 6px; padding: 10px 8px 0; }
.theme-prev__card { flex: 1; border-radius: 6px; background: var(--p-card); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.theme-prev__card i { display: block; height: 22px; margin: 4px; border-radius: 4px; background: var(--p-acc); }
.theme-prev__card:nth-child(2) i { background: var(--p-acc2); }
.theme-prev__nav { background: linear-gradient(90deg, var(--p-acc) 50%, var(--p-acc2) 50%); }
.theme-opt__name { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; color: var(--ink); font-size: 13px; font-weight: 700; }
.theme-opt__name small { color: var(--graphite-60); font-weight: 600; font-size: 11px; }
.feat__new { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--orange-100); color: var(--orange-600); font-size: 10.5px; font-style: normal; font-weight: 800; vertical-align: 1px; }

/* ---------- Destaques (engajamento) ---------- */
.quick-link--hot svg { color: #F2A93B; }
.hub { display: grid; gap: 14px; }
.hub-card { padding: 16px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow); animation: cardIn .35s var(--ease) both; }
.hub-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--ink); font-family: var(--font-title); font-size: 16px; }
.hub-title svg { width: 18px; height: 18px; color: var(--orange); flex: none; }
.hub-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hub-head .hub-title { margin: 0; }
.hub-head .segmented { margin: 0; }
.hub-pill { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--indigo-100); color: var(--ink); font-size: 12px; font-weight: 700; }
.hub-text { margin: 8px 0 0; color: var(--graphite-60); font-size: 13.5px; line-height: 1.5; }
.hub-text--ok { display: flex; align-items: center; gap: 6px; color: var(--green-600); font-weight: 700; }
.hub-text--ok svg { width: 16px; height: 16px; }

.hub-streak { display: flex; gap: 16px; align-items: center; background: var(--indigo); color: var(--on-dark); }
.hub-streak .hub-title { color: var(--on-dark); }
.hub-streak .hub-text { color: rgba(245,233,214,.75); }
.hub-streak__num { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #F2A93B, var(--orange) 70%); box-shadow: 0 0 0 5px rgba(227,108,42,.25), 0 10px 24px -8px rgba(227,108,42,.8); color: #fff; animation: pulseGlow 3s ease-in-out infinite; }
.hub-streak__num b { font-family: var(--font-title); font-size: 34px; line-height: 1; }
.hub-streak__num span { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 5px rgba(227,108,42,.25), 0 10px 24px -8px rgba(227,108,42,.8); } 50% { box-shadow: 0 0 0 9px rgba(227,108,42,.12), 0 10px 24px -8px rgba(227,108,42,.8); } }
.hub-streak__body { flex: 1; min-width: 0; }
.hub-week { display: flex; gap: 6px; }
.hub-week span { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; font-size: 10.5px; font-weight: 600; color: rgba(245,233,214,.6); }
.hub-week i { width: 100%; max-width: 26px; height: 8px; border-radius: 4px; background: rgba(245,233,214,.16); }
.hub-week .is-on i { background: linear-gradient(90deg, var(--orange), #F2A93B); }
.hub-week .is-on { color: var(--on-dark); }

.hub-spot__body { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: start; }
.hub-spot__cover { border-radius: 14px; box-shadow: var(--shadow); }
.hub-spot__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hub-spot__type { color: var(--orange-600); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.hub-spot__info > strong { color: var(--ink); font-family: var(--font-title); font-size: 18px; line-height: 1.2; }
.hub-spot__info > small { color: var(--graphite-60); font-size: 13px; }
.hub-spot__meta { margin: 2px 0 4px; }
.owner-row--compact { padding: 6px 0; background: none; box-shadow: none; }
.hub-spot .like-chip { align-self: flex-start; margin-top: 4px; }

.like-chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border: 1.5px solid var(--cream-200); border-radius: 999px; background: var(--surface); color: var(--graphite-60); font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s; }
.like-chip svg { width: 17px; height: 17px; }
.like-chip.is-on { border-color: #E5484D; color: #E5484D; background: color-mix(in srgb, #E5484D 10%, var(--surface)); }
.like-chip.is-pop svg { animation: likePop .4s var(--ease); }
.like-chip--sm { height: 26px; padding: 0 8px; font-size: 12px; margin-left: auto; }
.like-chip--sm svg { width: 14px; height: 14px; }
.like-count { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; color: #E5484D; font-size: 12px; font-weight: 700; }
.like-count svg { width: 13px; height: 13px; }
@keyframes likePop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

.chal-list { display: grid; gap: 8px; }
.chal { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); color: inherit; text-decoration: none; }
.chal__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--orange-100); color: var(--orange-600); }
.chal__icon svg { width: 18px; height: 18px; }
.chal.is-done .chal__icon { background: var(--green); color: #fff; }
.chal__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.chal__body strong { color: var(--ink); font-size: 13.5px; }
.chal.is-done .chal__body strong { text-decoration: line-through; text-decoration-color: var(--green); opacity: .8; }
.chal__bar { height: 6px; border-radius: 3px; background: var(--cream-200); overflow: hidden; }
.chal__bar em { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--orange), var(--green)); transition: width .6s var(--ease); }
.chal__num { flex: none; color: var(--graphite-60); font-size: 12.5px; font-weight: 800; }

.roul { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0; text-align: center; }
.roul__disc { width: 140px; }
.roul__disc .cover { border-radius: 16px; box-shadow: var(--shadow); }
.roul__disc.is-spinning { animation: wobble .25s linear infinite; }
.roul__disc.is-picked { animation: archPop .45s var(--ease); }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.roul__label { margin: 8px 0 0; color: var(--orange-600); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.roul__title { color: var(--ink); font-family: var(--font-title); font-size: 19px; }
.hub-roulette .chips { margin-top: 10px; }

.rank { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rank li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface); }
.rank li.is-me { box-shadow: inset 0 0 0 2px var(--orange); }
.rank__pos { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--cream-200); color: var(--ink); font-weight: 800; font-size: 13px; }
.rank__pos--1 { background: linear-gradient(135deg, #F7D774, #D9A93B); color: #5A3D00; }
.rank__pos--2 { background: linear-gradient(135deg, #E6E8EE, #AEB4C2); color: #333; }
.rank__pos--3 { background: linear-gradient(135deg, #F0B98A, #C07A43); color: #4A2508; }
.rank li > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.rank li > a > span:not(.avatar) { display: flex; flex-direction: column; min-width: 0; }
.rank li small { color: var(--graphite-60); font-size: 11.5px; }
.rank li > b { flex: none; color: var(--orange-600); font-size: 13px; }
.rank-me { margin: 10px 0 0; color: var(--graphite-60); font-size: 13px; }

.match-list { display: grid; gap: 8px; }
@media (min-width: 520px) { .match-list { grid-template-columns: 1fr 1fr; } }
.match-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); color: inherit; text-decoration: none; }
.match-card__head { display: flex; align-items: center; gap: 10px; }
.match-card__head > span:not(.avatar) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.match-card__head small { color: var(--graphite-60); font-size: 12px; }
.match-card__pct { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--cream-200) 0); color: var(--ink); font-size: 12px; position: relative; }
.match-card__pct::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.match-card__pct { isolation: isolate; }
.match-card__pct::before { z-index: -1; }
.match-card__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.match-card__tags span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 8px; border-radius: 999px; background: var(--green-100); color: var(--green-600); font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-card__tags svg { width: 12px; height: 12px; flex: none; }

.anniv { display: grid; gap: 8px; }
.anniv__item { display: flex; align-items: center; gap: 10px; }
.anniv__item .cover--thumb { width: 44px; flex: none; }
.anniv__item > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.anniv__item strong { color: var(--ink); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anniv__item small { color: var(--graphite-60); font-size: 12px; }
.anniv__item > b { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 12px; }

.invite-link { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.invite-link code { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.invite-progress { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; margin-top: 12px; }
.invite-progress b { font-family: var(--font-title); font-size: 28px; color: var(--orange); }
.invite-progress span { color: var(--graphite-60); font-size: 13px; }
.invite-progress i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--cream-200); overflow: hidden; }
.invite-progress em { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--green)); }
.invite-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }

/* ---------- Enquetes ---------- */
.poll { display: grid; gap: 6px; margin: 0 16px 12px; }
.poll__opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 0 14px; overflow: hidden; border: 1.5px solid var(--cream-200); border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px; text-align: left; cursor: pointer; isolation: isolate; }
.poll__opt::before { content: ""; position: absolute; inset: 0; z-index: -1; width: var(--pct); background: var(--orange-100); transition: width .6s var(--ease); }
.poll__opt.is-mine { border-color: var(--orange); }
.poll__opt.is-mine::before { background: color-mix(in srgb, var(--orange) 26%, var(--surface)); }
.poll:not(.is-result) .poll__opt:hover { border-color: var(--orange); }
.poll__opt:disabled { cursor: default; }
.poll__txt { display: inline-flex; align-items: center; gap: 6px; }
.poll__txt svg { width: 15px; height: 15px; color: var(--orange-600); }
.poll__opt b { color: var(--ink); font-size: 13px; }
.poll__meta { display: flex; align-items: center; gap: 5px; color: var(--graphite-60); font-size: 12px; }
.poll__meta svg { width: 13px; height: 13px; }
.poll-edit { display: grid; gap: 6px; }

@media (prefers-reduced-motion: reduce) { .hub-streak__num, .roul__disc { animation: none !important; } }
/* Ajustes dos temas escuros */
html[data-theme="noite"] .card__type, html[data-theme="fliperama"] .card__type { background: rgba(10,12,28,.82); color: #F5E9D6; }
html[data-theme="noite"] .shelf-chip.is-active, html[data-theme="fliperama"] .shelf-chip.is-active,
html[data-theme="noite"] .shelf-pick input:checked + span, html[data-theme="fliperama"] .shelf-pick input:checked + span { background: color-mix(in srgb, var(--c, #6B6FD8) 28%, var(--cream-50)); color: var(--ink); }
html[data-theme="noite"] .type-pick input:checked + span, html[data-theme="fliperama"] .type-pick input:checked + span { background: var(--indigo-500); }
html[data-theme="noite"] .icon-btn--dark, html[data-theme="fliperama"] .icon-btn--dark { color: var(--ink); background: rgba(255,255,255,.08); }

/* ==========================================================================
   VERSÃO G — Monetização (Colecionador+, Loja Parceira, Destaque de anúncio)
   ========================================================================== */
.banner--info { background: var(--indigo-100); color: var(--ink); }
.badge--plus { background: linear-gradient(135deg, #F7D774, #E9A23B); color: #4A3000; }
.badge--partner { background: var(--green-100); color: var(--green-600); }
.badge--plus svg, .badge--partner svg { width: 12px; height: 12px; vertical-align: -1px; }
.menu-item--plans > svg:first-child { color: #E9A23B; }

.plans { display: grid; gap: 14px; }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; align-items: start; } .plan--boost { grid-column: 1 / -1; } }
.plan { position: relative; padding: 18px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow); border-top: 4px solid var(--orange); }
.plan--plus { border-top-color: #E9A23B; background: linear-gradient(180deg, color-mix(in srgb, #F7D774 14%, var(--cream-50)), var(--cream-50) 40%); }
.plan--partner { border-top-color: var(--green); }
.plan header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.plan__tag { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-family: var(--font-title); font-weight: 900; font-size: 19px; }
.plan__tag svg { width: 20px; height: 20px; color: #E9A23B; }
.plan--partner .plan__tag svg { color: var(--green); }
.plan--boost .plan__tag svg { color: var(--orange); }
.plan__active { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--green-100); color: var(--green-600); font-size: 12px; font-weight: 700; }
.plan__active svg { width: 13px; height: 13px; }
.plan__lead { margin: 6px 0 12px; color: var(--graphite-60); font-size: 13.5px; }
.plan__note { margin: 10px 0; color: var(--graphite-60); font-size: 12.5px; }
.perks { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.perks li { display: flex; gap: 10px; }
.perks li > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--orange); }
.perks li > span { display: flex; flex-direction: column; }
.perks strong { color: var(--ink); font-size: 14px; }
.perks small { color: var(--graphite-60); font-size: 12.5px; }
.plan__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.price-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border: 2px solid var(--cream-200); border-radius: 14px; background: var(--surface); color: var(--ink); cursor: pointer; transition: transform .2s var(--ease), border-color .2s; }
.price-opt:hover { transform: translateY(-2px); border-color: var(--orange); }
.price-opt b { font-family: var(--font-title); font-size: 20px; }
.price-opt span { color: var(--graphite-60); font-size: 12px; font-weight: 600; }
.price-opt--best { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, var(--surface)); }
.price-opt--best i { position: absolute; top: -10px; right: 10px; padding: 2px 8px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.price-opt--wide { grid-column: 1 / -1; }
.plans__foot { display: flex; gap: 8px; margin: 14px 0; color: var(--graphite-60); font-size: 12.5px; line-height: 1.5; }
.plans__foot svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.pix { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pix__what { margin: 0; color: var(--graphite-60); font-size: 13.5px; font-weight: 600; }
.pix__amount { color: var(--ink); font-family: var(--font-title); font-size: 30px; }
.pix__qr { width: 220px; height: 220px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); image-rendering: pixelated; }
.pix__hint { margin: 0; color: var(--graphite-60); font-size: 13px; }
.pix__code { width: 100%; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.pix__code code { display: block; max-height: 64px; overflow: auto; color: var(--ink); font-size: 11.5px; word-break: break-all; text-align: left; }
.pix__status { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--graphite-60); font-size: 13px; }
.pix__status svg { width: 16px; height: 16px; color: var(--danger); }
.pix__done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; }
.pix__done > svg { width: 56px; height: 56px; padding: 12px; border-radius: 50%; background: var(--green); color: #fff; animation: archPop .45s var(--ease); }
.pix__done strong { color: var(--ink); font-family: var(--font-title); font-size: 20px; }
.pix__done p { margin: 0 0 8px; color: var(--graphite-60); }

.pay-list { display: grid; gap: 6px; }
.pay-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.pay-row > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pay-row__user { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.pay-row__user > span:not(.avatar) { display: flex; flex-direction: column; min-width: 0; }
.pay-row small { color: var(--graphite-60); font-size: 12px; }
.pay-row > b { flex: none; color: var(--ink); font-size: 13.5px; }
.pay-row__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mp-status { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 12px; border-radius: 12px; background: var(--orange-100); color: var(--orange-600); }
.mp-status.is-ok { background: var(--green-100); color: var(--green-600); }
.mp-status > svg { width: 22px; height: 22px; flex: none; }
.mp-status > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-status strong { color: var(--ink); }
.mp-status em { font-style: normal; margin-left: 4px; }
.mp-status small { color: var(--graphite-60); font-size: 12px; overflow-wrap: anywhere; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.card--boosted { box-shadow: 0 0 0 2px #E9A23B, var(--shadow); }
.card__ribbon { position: absolute; z-index: 2; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: linear-gradient(135deg, #F7D774, #E9A23B); color: #4A3000; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; box-shadow: var(--shadow-sm); }
.card__ribbon--partner { background: var(--green); color: #fff; }
.card__ribbon svg { width: 12px; height: 12px; }
.card { position: relative; }
.boost-box { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: color-mix(in srgb, #F7D774 22%, var(--cream-50)); }
.boost-box > svg { width: 22px; height: 22px; flex: none; color: #C48A12; }
.boost-box > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.boost-box strong { color: var(--ink); font-size: 13.5px; }
.boost-box small { color: var(--graphite-60); font-size: 12px; }
.event--partner { box-shadow: inset 4px 0 0 var(--green), var(--shadow-sm); }
.tag-partner { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--green-100); color: var(--green-600); font-size: 10.5px; font-style: normal; font-weight: 700; }
.tag-partner svg { width: 11px; height: 11px; }
.card__ribbon { top: auto; bottom: 14px; right: 10px; }

.secret-input { position: relative; }
.secret-input .field__input { padding-right: 46px; }
.secret-input .input-icon__toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); }
.field__input.is-masked { -webkit-text-security: disc; text-security: disc; }

/* ==========================================================================
   VERSÃO I — coleção+, clubes, roteiro, stories, push, LGPD e ferramentas do dev
   ========================================================================== */
.tabs--icons .tab { min-width: 0; padding: 0 6px; font-size: 13px; gap: 4px; }
.tabs--icons .tab svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 380px) { .tabs--icons .tab svg { display: none; } }

.offline-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: var(--orange-100); color: var(--orange-600); font-size: 13px; }
.offline-bar[hidden] { display: none; }
.offline-bar svg { width: 18px; height: 18px; flex: none; }
.offline-bar strong { color: var(--ink); }

.ref-box, .diary-box, .prov { padding: 12px 14px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.ref-box { display: flex; gap: 10px; align-items: center; }
.ref-box[hidden] { display: none; }
.ref-box > svg { width: 22px; height: 22px; flex: none; color: var(--green); }
.ref-box > span { display: flex; flex-direction: column; }
.ref-box strong { color: var(--ink); font-size: 14px; }
.ref-box small, .diary-box small { color: var(--graphite-60); font-size: 12px; }
.diary-box { display: grid; gap: 6px; text-align: center; }
.prov { display: grid; gap: 4px; }
.prov__row { color: var(--graphite); font-size: 13px; }
.cover-btn { margin-top: 8px; }
.diary-list { display: grid; gap: 8px; }
.diary-row { display: flex; align-items: center; gap: 10px; }
.diary-row .cover--thumb { width: 40px; }
.diary-row > span { display: flex; flex-direction: column; }
.diary-row small { color: var(--graphite-60); font-size: 12px; }
.offer__done { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--green-100); color: var(--green-600); font-size: 13px; font-weight: 700; }
.offer__done svg { width: 16px; height: 16px; }

/* Busca de capas */
.cover-search { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(10,12,28,.6); backdrop-filter: blur(3px); animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } }
.cover-search__panel { display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: 88dvh; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow-lg); overflow: hidden; }
.cover-search__panel > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--cream-200); }
.cover-search__panel > header strong { display: flex; align-items: center; gap: 8px; color: var(--ink); font-family: var(--font-title); }
.cover-search__panel > header svg { width: 18px; height: 18px; }
.cover-search__form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; padding: 12px 16px; }
@media (max-width: 520px) { .cover-search__form { grid-template-columns: 1fr; } }
.cover-search__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 4px 16px 16px; overflow: auto; }
.cover-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 2px solid transparent; border-radius: 12px; background: var(--surface); text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .2s, transform .2s var(--ease); }
.cover-opt:hover { border-color: var(--orange); transform: translateY(-2px); }
.cover-opt img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--cream); }
.cover-opt span { overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cover-opt small { color: var(--graphite-60); font-size: 11px; }
.cover-opt.is-loading { opacity: .5; pointer-events: none; }
.cover-search__foot { margin: 0; padding: 10px 16px 14px; color: var(--graphite-60); font-size: 11.5px; border-top: 1px solid var(--cream-200); }

.story-preview { display: grid; place-items: center; margin-bottom: 12px; }
.story-preview img { width: min(100%, 260px); border-radius: 18px; box-shadow: var(--shadow-lg); }

/* Metas */
.goal-list { display: grid; gap: 12px; }
.goal { padding: 16px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow); }
.goal.is-complete { box-shadow: 0 0 0 2px var(--green), var(--shadow); }
.goal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.goal__head > div { display: flex; flex-direction: column; min-width: 0; }
.goal__head strong { color: var(--ink); font-family: var(--font-title); font-size: 16px; }
.goal__head small { color: var(--graphite-60); font-size: 12px; }
.goal__pct { display: grid; place-items: center; min-width: 52px; height: 52px; border-radius: 50%; background: var(--orange-100); color: var(--orange-600); font-weight: 800; font-size: 14px; }
.goal.is-complete .goal__pct { background: var(--green); color: #fff; }
.goal__pct svg { width: 22px; height: 22px; }
.goal__bar { display: block; height: 8px; margin: 12px 0 6px; border-radius: 4px; background: var(--cream-200); overflow: hidden; }
.goal__bar em { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--green)); transition: width .6s var(--ease); }
.goal__count { margin: 0; color: var(--graphite-60); font-size: 12.5px; }
.goal__list { margin-top: 8px; }
.goal__list summary { color: var(--orange-600); font-size: 13px; font-weight: 700; cursor: pointer; }
.goal__list ul { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; max-height: 260px; overflow: auto; }
.goal__list li { display: flex; align-items: center; gap: 8px; color: var(--graphite-60); font-size: 13px; }
.goal__list li svg { width: 14px; height: 14px; flex: none; color: var(--danger); opacity: .6; }
.goal__list li.is-owned { color: var(--ink); }
.goal__list li.is-owned svg { color: var(--green); opacity: 1; }
.goal__list li.is-wished svg { color: var(--orange); opacity: 1; }
.goal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.goal__actions .icon-btn { margin-left: auto; color: var(--ink); }

/* Clubes */
.club-list { display: grid; gap: 8px; }
.club { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); color: inherit; text-align: left; cursor: pointer; border-left: 4px solid var(--c); }
.club__badge { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--c); color: #fff; font-family: var(--font-title); font-weight: 900; font-size: 20px; }
.club__badge--lg { width: 60px; height: 60px; font-size: 28px; }
.club__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.club__body strong { color: var(--ink); }
.club__body small { color: var(--graphite-60); font-size: 12px; }
.club__body em { overflow: hidden; color: var(--graphite); font-size: 12.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.club__joined { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; }
.club__joined svg { width: 15px; height: 15px; }
.club-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 8px 0 14px; padding: 16px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--c) 14%, var(--cream-50)); }
.club-hero > div:nth-child(2) { flex: 1; min-width: 180px; }
.club-hero h2 { margin: 0; color: var(--ink); font-family: var(--font-title); font-size: 20px; }
.club-hero p { margin: 2px 0 0; color: var(--graphite-60); font-size: 13px; }
.club-hero__desc { color: var(--graphite) !important; }
.club-hero__actions { display: flex; gap: 6px; }

/* Roteiro */
.section-head .btn { margin-left: auto; }
.route-box { margin-bottom: 14px; padding: 14px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow); }
.route-box[hidden] { display: none; }
.route-box header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--ink); }
.route-box header strong { display: inline-flex; align-items: center; gap: 6px; }
.route-box header svg { width: 18px; height: 18px; color: var(--orange); }
.route-box ol { margin: 0 0 12px; padding-left: 22px; }
.route-box li { margin: 4px 0; }
.route-box li small { display: block; color: var(--graphite-60); font-size: 12px; }
.route-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(0,0,0,.35); }
.route-pick { display: grid; gap: 6px; max-height: 50dvh; overflow: auto; margin-bottom: 12px; }
.route-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); cursor: pointer; }
.route-opt input { width: 18px; height: 18px; accent-color: var(--orange); }
.route-opt span { display: flex; flex-direction: column; }
.route-opt small { color: var(--graphite-60); font-size: 12px; }

/* Conta */
.acc-state { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; padding: 14px; border-radius: var(--radius); background: var(--indigo-100); }
.acc-state--on { background: var(--green-100); }
.acc-state > svg { width: 24px; height: 24px; flex: none; color: var(--orange); }
.acc-state--on > svg { color: var(--green-600); }
.acc-state > span { display: flex; flex-direction: column; }
.acc-state strong { color: var(--ink); }
.acc-state small { color: var(--graphite-60); font-size: 12.5px; }
.setting--pad { padding: 12px 16px; }
.terms-row { align-items: flex-start; line-height: 1.4; }
.terms-row[hidden] { display: none; }
.coupon-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.coupon-box > span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 700; font-size: 13.5px; }
.coupon-box svg { width: 16px; height: 16px; color: var(--orange); }
.coupon-box .field__input { flex: 1; min-width: 120px; height: 38px; text-transform: uppercase; }
.price-opt s { color: var(--graphite-60); font-size: 13px; font-weight: 600; }
.pix__disc { display: inline-flex; align-items: center; gap: 4px; color: var(--green-600); font-weight: 700; font-size: 13px; }
.pix__disc svg { width: 14px; height: 14px; }

/* Painel dev */
.feat__roll { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; }
.feat__roll svg { width: 13px; height: 13px; }
.funnel-v { display: grid; gap: 10px; }
.funnel__row { display: grid; grid-template-columns: minmax(130px, 220px) 1fr auto; align-items: center; gap: 12px; }
@media (max-width: 620px) { .funnel__row { grid-template-columns: 1fr; gap: 4px; } }
.funnel__label { color: var(--ink); font-size: 13px; font-weight: 700; }
.funnel__bar { position: relative; display: block; height: 30px; border-radius: 8px; background: var(--cream-200); overflow: hidden; }
.funnel__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--indigo), var(--indigo-500)); transition: width .6s var(--ease); }
.funnel__bar b { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: #fff; font-size: 13px; mix-blend-mode: difference; }
.funnel__pct { color: var(--graphite-60); font-size: 12px; }
.cohort__cell { background: color-mix(in srgb, var(--green) calc(var(--p) * 1%), var(--surface)) !important; font-weight: 700; }
.task-list { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.task-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.task-list svg { width: 15px; height: 15px; color: var(--green); }
.ver-list { display: grid; gap: 10px; }
.ver { display: flex; gap: 12px; padding: 10px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.ver--pending { box-shadow: inset 0 0 0 2px var(--orange); }
.ver img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; }
.ver > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ver strong { color: var(--ink); }
.ver small { color: var(--graphite-60); font-size: 12px; }
.ver em { color: var(--graphite); font-size: 12.5px; }
.ver__actions { display: flex; gap: 6px; margin-top: 6px; }
.ver .status { align-self: flex-start; margin-top: 4px; }
.osm-form { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin: 12px 0; }
@media (max-width: 620px) { .osm-form { grid-template-columns: 1fr 1fr; } .osm-form .search { grid-column: 1 / -1; } }
.osm-list { display: grid; gap: 6px; max-height: 60dvh; overflow: auto; margin-bottom: 12px; }
.osm-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); cursor: pointer; }
.osm-row input { width: 18px; height: 18px; accent-color: var(--orange); flex: none; }
.osm-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.osm-row strong { color: var(--ink); font-size: 14px; }
.osm-row small { overflow: hidden; color: var(--graphite-60); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.cover-search__grid > :not(.cover-opt) { grid-column: 1 / -1; }
.coupon-box { flex-wrap: nowrap; }
.coupon-box .field__input { width: auto; }
@media (max-width: 420px) { .coupon-box { flex-wrap: wrap; } .coupon-box > span { width: 100%; } }
.chips--scroll .chip-select span, .chips--scroll .chip { white-space: nowrap; }

/* ==========================================================================
   AJUSTE PARA TELAS PEQUENAS — nada ultrapassa a largura do celular
   ========================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
.views, .view { min-width: 0; max-width: 100%; }
/* Itens de grid/flex não podem crescer além do contêiner por causa de conteúdo sem quebra */
.toolbar > *, .hub > *, .hub-card > *, .form > *, .panel > *, .view > *, .sheet__body > *, .sheet__panel > *,
.grid > *, .stats > *, .dev-grid > *, .goal-list > *, .club-list > *, .feed > * { min-width: 0; }
.chips, .shelf-bar, .tabs { max-width: 100%; }
img, video, canvas, svg { max-width: 100%; }
.section-head, .panel__title, .feat-group__head { flex-wrap: wrap; }
@media (max-width: 480px) {
  .toolbar__row { flex-wrap: wrap; }
  .toolbar__row > .search { flex: 1 1 100%; }
  .toolbar__row > .select-pill { flex: 1 1 0; min-width: 0; }
  .toolbar__row > .select-pill select { width: 100%; text-overflow: ellipsis; }
  .select-pill--full, .select-pill--full select { width: 100%; }
}
.segmented--inline { display: grid; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented--inline::-webkit-scrollbar { display: none; }
.form__actions > * { min-width: 0; }
.btn { max-width: 100%; }
.mod-row, .pay-row { min-width: 0; flex-wrap: wrap; }
.mod-row > *, .pay-row > * { min-width: 0; }
@media (max-width: 480px) {
  .form__actions { grid-template-columns: 1fr; }
  .form__actions .btn--primary { order: -1; }
  label.btn, .btn--block { white-space: normal; height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; text-align: center; }
  .segmented:not(.segmented--inline) span { padding: 0 6px; font-size: 13px; }
  .pay-row > span:first-child { flex-basis: 60%; }
}
.hub-week span { min-width: 0; }
.stat { min-width: 0; }
.stat__label { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 400px) {
  .hub-streak { gap: 12px; padding: 14px; }
  .hub-streak__num { width: 72px; height: 72px; }
  .hub-streak__num b { font-size: 26px; }
  .hub-streak__num span { font-size: 9px; text-align: center; }
  .hub-week { gap: 3px; }
  .hub-week span { font-size: 9px; }
  .hub-spot__body { grid-template-columns: 96px 1fr; gap: 10px; }
  .stat__label { font-size: 9px; letter-spacing: 0; }
  .stat__value { font-size: 20px; }
}

/* Lista do Explorar: nada passa da tela; nome quebra em até 2 linhas em vez de cortar */
.place-list { min-width: 0; max-width: 100%; }
.place-list > * { min-width: 0; max-width: 100%; }
.place-row { min-width: 0; max-width: 100%; overflow: hidden; }
.place-row__body strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.3; }
.place-row__body small { overflow-wrap: anywhere; }
.place-row__meta { max-width: 30%; text-align: right; }
@media (max-width: 400px) {
  .place-row { gap: 10px; padding: 10px 12px; }
  .place-row__icon { width: 34px; height: 34px; border-radius: 10px; }
  .place-row__chev { display: none; }
  .place-row__body strong { font-size: 14px; }
  .place-row__body .badge { display: inline-flex; margin: 3px 0 0; }
}
/* Resultado da importação de locais */
.osm-result { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--green-100); color: var(--green-600); font-size: 14px; }
.osm-result[hidden] { display: none; }
.osm-result svg { width: 20px; height: 20px; flex: none; }
.osm-result strong { color: var(--ink); }
.osm-result--error { background: #FBE3E1; color: var(--danger); }
.osm-row.is-saved { opacity: .55; }
.osm-row.is-saved strong::after { content: ' · salvo'; color: var(--green-600); font-weight: 700; font-size: 12px; }
.osm-row { min-width: 0; }
.osm-row > span { min-width: 0; }
.osm-row strong { overflow-wrap: anywhere; }

/* Esqueci / redefinir senha */
.auth__forgot { display: block; margin: 2px auto 0; color: var(--orange-600); font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; }
.auth__forgot:hover { text-decoration: underline; }
.auth__done { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--green-100); color: var(--green-600); font-size: 14px; line-height: 1.45; }
.auth__done[hidden] { display: none; }
.auth__done svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.auth__done span { color: var(--ink); }
#resetForm[hidden] { display: none; }

/* Modelos de e-mail */
.tpl-list { display: grid; gap: 8px; }
.tpl { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); min-width: 0; }
.tpl.is-off { opacity: .6; }
.tpl__main { display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.tpl__main:hover { background: var(--cream-50); }
.tpl__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--orange-100); color: var(--orange-600); }
.tpl__icon svg { width: 20px; height: 20px; }
.tpl__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tpl__body strong { color: var(--ink); font-size: 14.5px; }
.tpl__body small { color: var(--graphite-60); font-size: 12px; }
.tpl__body em { overflow: hidden; color: var(--graphite); font-size: 12.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.tpl__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag--orange { background: var(--orange-100); color: var(--orange-600); }
.tag--green { background: var(--green-100); color: var(--green-600); }
.tpl__chev { width: 18px; height: 18px; flex: none; color: var(--graphite-60); }
@media (max-width: 480px) { .tpl { flex-wrap: wrap; } .tpl > .btn { margin-left: 56px; } .tpl__chev { display: none; } }
.chip--accent { border-color: var(--orange); color: var(--orange-600); font-weight: 800; }
.chip--sm { height: 30px; padding: 0 10px; font-size: 12px; }
.titan-tip { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--indigo-100); font-size: 13px; line-height: 1.5; color: var(--graphite); }
.titan-tip[hidden] { display: none; }
.titan-tip > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--indigo); }
.titan-tip strong { display: block; color: var(--ink); }
.titan-tip code { padding: 1px 5px; border-radius: 5px; background: var(--surface); font-size: 12px; }
.sheet--wide .sheet__panel { max-width: 1100px; }
.tpl-editor { display: grid; gap: 18px; }
@media (min-width: 900px) { .tpl-editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } .tpl-preview { position: sticky; top: 0; } }
.tpl-editor textarea { min-height: 170px; resize: vertical; font-family: inherit; line-height: 1.5; }
.tpl-editor__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tpl-editor__actions .btn--primary { flex: 1 1 100%; }
.tpl-preview { display: grid; gap: 8px; min-width: 0; }
.tpl-preview__subject { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); font-size: 13px; overflow-wrap: anywhere; }
.tpl-preview__subject:empty { display: none; }
.tpl-preview__subject svg { width: 16px; height: 16px; flex: none; color: var(--orange); }
.tpl-preview iframe { width: 100%; height: 560px; border: 0; border-radius: 14px; background: #F5E9D6; box-shadow: var(--shadow); }
@media (max-width: 480px) { .tpl-preview iframe { height: 480px; } }

/* E-mails: teste e diagnóstico */
.mail-warn { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--orange-100); color: var(--graphite); font-size: 13.5px; line-height: 1.45; }
.mail-warn > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--orange-600); }
.mail-warn strong { color: var(--ink); }
.mail-adv summary { cursor: pointer; color: var(--orange-600); font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.mail-test { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.mail-test__row { display: flex; gap: 8px; min-width: 0; }
.mail-test__row .field__input { flex: 1; min-width: 0; }
.mail-test__row .btn { flex: none; }
.mail-result { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; min-width: 0; }
.mail-result[hidden] { display: none; }
.mail-result.is-ok { background: var(--green-100); }
.mail-result.is-warn { background: var(--orange-100); }
.mail-result.is-error { background: #FBE3E1; }
.mail-result__head { display: flex; gap: 8px; align-items: flex-start; color: var(--ink); }
.mail-result__head svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.mail-result.is-ok .mail-result__head svg { color: var(--green-600); }
.mail-result.is-warn .mail-result__head svg { color: var(--orange-600); }
.mail-result.is-error .mail-result__head svg { color: var(--danger); }
.mail-result__err { margin: 0; color: var(--graphite); overflow-wrap: anywhere; }
.mail-result summary { cursor: pointer; font-weight: 700; font-size: 12.5px; color: var(--graphite); }
.mail-result pre { margin: 6px 0 0; padding: 10px; max-height: 260px; overflow: auto; border-radius: 8px; background: #14173A; color: #E9E2D2; font: 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Pessoas e privacidade (seguir como no Instagram) */
.avatar--md { width: 46px; height: 46px; font-size: 15px; }
.search--block { display: flex; width: 100%; margin-bottom: 10px; }
.people-scope { margin-bottom: 12px; }
.people-list { display: grid; gap: 8px; }
.person { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); min-width: 0; }
.person--compact { padding: 8px 10px; box-shadow: inset 0 0 0 1px var(--cream-200); background: var(--surface); }
.person__main { display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.person__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.person__name { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--ink); font-size: 14.5px; }
.person__name .uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__body small { overflow: hidden; color: var(--graphite-60); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.person__body em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; color: var(--graphite); font-size: 12.5px; font-style: normal; line-height: 1.35; }
.person__meta b { color: var(--green-600); font-weight: 700; }
.person__mutual { display: inline-flex !important; align-items: center; gap: 4px; color: var(--indigo) !important; }
.person__mutual svg { width: 12px; height: 12px; flex: none; }
.person__actions { display: flex; gap: 6px; flex: none; }
.follow-btn { flex: none; min-width: 96px; justify-content: center; }
.follow-btn svg { width: 14px; height: 14px; }
.lock-tag { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--graphite-60); }
.lock-tag svg { width: 12px; height: 12px; }
@media (max-width: 400px) {
  .person { flex-wrap: wrap; }
  .person > .follow-btn, .person > .btn, .person__actions { margin-left: 58px; }
  .person--compact > .follow-btn, .person--compact > .btn { margin-left: auto; }
  .person--compact { flex-wrap: nowrap; }
  .follow-btn { min-width: 0; }
}
.privacy-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 14px 0; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow); }
.privacy-card__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--indigo-100); color: var(--indigo); }
.privacy-card__icon svg { width: 20px; height: 20px; }
.privacy-card strong { color: var(--ink); }
.privacy-card p { margin: 2px 0 0; color: var(--graphite-60); font-size: 12.5px; line-height: 1.45; }
.privacy-card__req { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--orange-100); color: var(--orange-600); font-weight: 800; font-size: 13.5px; cursor: pointer; }
.privacy-card__req svg { width: 16px; height: 16px; }
.privacy-card__req svg:last-child { margin-left: auto; }
.private-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -4px 0 10px; color: var(--graphite-60); font-size: 12.5px; font-weight: 700; }
.private-note svg { width: 14px; height: 14px; }
.private-lock { display: grid; justify-items: center; gap: 6px; margin: 16px 0; padding: 28px 20px; border-radius: var(--radius-lg); background: var(--cream-50); box-shadow: var(--shadow); text-align: center; }
.private-lock__icon { display: grid; place-items: center; width: 64px; height: 64px; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); }
.private-lock__icon svg { width: 28px; height: 28px; }
.private-lock strong { margin-top: 6px; color: var(--ink); font-family: var(--font-title); font-size: 18px; }
.private-lock p { max-width: 320px; margin: 0; color: var(--graphite-60); font-size: 14px; line-height: 1.5; }
.tabs[hidden], [data-pane][hidden] { display: none !important; }
.person__body small { white-space: normal; overflow-wrap: anywhere; }
.person__body small:first-of-type { white-space: nowrap; }
@media (max-width: 420px) {
  .person--req { flex-wrap: wrap; }
  .person--req .person__actions { width: 100%; margin-left: 58px; }
  .person__body small:first-of-type { white-space: normal; }
}
@media (max-width: 420px) {
  .person:not(.person--compact) { flex-wrap: wrap; row-gap: 8px; }
  .person:not(.person--compact) > .person__main { flex: 1 1 100%; }
  .person:not(.person--compact) > .follow-btn { margin-left: 58px; min-width: 120px; }
  .person__mutual { display: flex !important; }
}

/* ==========================================================================
   VERSÃO N — recursos de coleção, sociais e ferramentas do dev
   ========================================================================== */
/* Ferramentas da coleção */
.col-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--cream-200); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s; }
.tool-chip svg { width: 15px; height: 15px; color: var(--orange); }
.tool-chip b { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--orange); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.tool-chip b[hidden], .tool-chip b:empty { display: none; }
.tool-chip.is-active { border-color: var(--indigo); background: var(--indigo); color: var(--on-dark); }
.tool-chip.is-active svg { color: #F2A93B; }
.chips--tags { align-items: center; }
.chips--tags[hidden] { display: none; }
.card__gem { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #F2A93B; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.card__gem svg { width: 14px; height: 14px; }
.grid.grid--timeline { display: block; }
.tl-decade + .tl-decade { margin-top: 26px; }
.tl-decade__title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--cream-200); }
.tl-decade__title span { color: var(--ink); font-family: var(--font-title); font-size: 20px; }
.tl-decade__title small { color: var(--graphite-60); font-size: 12.5px; font-weight: 600; }
.detail__quick { display: flex; flex-wrap: wrap; gap: 8px; }
.tags-box { display: grid; gap: 8px; }
.tag-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag-pill { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--indigo-100); color: var(--ink); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tag-pill svg { width: 12px; height: 12px; opacity: .6; }
.tag-add { display: inline-flex; align-items: center; gap: 4px; }
.tag-add input { width: 130px; height: 32px; padding: 0 10px; border: 1px dashed var(--cream-200); border-radius: 999px; background: var(--surface); font-size: 13px; }
.tag-add--wide { display: flex; margin: 10px 0; }
.tag-add--wide input { flex: 1; width: auto; }
/* Joias, tocando agora */
.gems { margin: 18px 0; }
.section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ink); font-family: var(--font-title); font-size: 17px; }
.section-title svg { width: 18px; height: 18px; color: #F2A93B; }
.gems__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.gem { display: grid; gap: 4px; min-width: 0; }
.gem strong { overflow: hidden; color: var(--ink); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.gem small { overflow: hidden; color: var(--graphite-60); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.cover--gem { border-radius: 12px; box-shadow: 0 0 0 2px #F2A93B, var(--shadow-sm); }
.gems-empty { display: flex; align-items: center; gap: 8px; margin: 16px 0; padding: 12px 14px; border-radius: 12px; background: var(--surface); color: var(--graphite-60); font-size: 13px; line-height: 1.45; box-shadow: inset 0 0 0 1px var(--cream-200); }
.gems-empty svg { width: 16px; height: 16px; flex: none; color: #F2A93B; }
.now-playing { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 10px 12px; border-radius: var(--radius); background: linear-gradient(120deg, var(--indigo), #2B3170); color: var(--on-dark); box-shadow: var(--shadow); }
.now-playing .cover--thumb { width: 48px; flex: none; }
.now-playing > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.now-playing small { display: flex; align-items: center; gap: 5px; color: #F2A93B; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.now-playing small svg { width: 13px; height: 13px; animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.now-playing strong { overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.now-playing em { overflow: hidden; color: rgba(245,233,214,.7); font-size: 12.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.now-playing .icon-btn { color: var(--on-dark); }
/* Repetidos, comparar, procuro, novidades */
.dup-list, .cmp-list, .wish-public, .news-list { display: grid; gap: 10px; margin: 12px 0 16px; }
.dup { padding: 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.dup__head, .cmp-item, .wish-row, .news-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dup__head > span:nth-child(2), .cmp-item > span:nth-child(2), .wish-row > span:nth-child(2), .news-item > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dup__head small, .cmp-item small, .wish-row small, .news-item small, .news-item em { color: var(--graphite-60); font-size: 12px; font-style: normal; }
.dup__head strong, .cmp-item strong, .wish-row strong, .news-item strong { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.dup__copy { display: flex; align-items: center; gap: 10px; margin: 8px 0 0 4px; font-size: 13.5px; }
.dup__copy input { width: 18px; height: 18px; accent-color: var(--orange); }
.cmp-score { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--green-100); }
.cmp-score b { color: var(--green-600); font-family: var(--font-title); font-size: 34px; line-height: 1; }
.cmp-score span { display: flex; flex-direction: column; color: var(--ink); font-weight: 700; }
.cmp-score small { color: var(--graphite-60); font-size: 12px; font-weight: 500; }
.cmp-item, .wish-row { padding: 8px 10px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.wish-row > svg { width: 18px; height: 18px; flex: none; color: var(--orange); }
.wish-row .btn { flex: none; }
.news-item { padding: 10px 12px; border-radius: var(--radius); background: var(--cream-50); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; }
.news-item small { display: flex; align-items: center; gap: 6px; }
.news-item .avatar--xs { width: 18px; height: 18px; font-size: 8px; }
/* Feed */
.feed-scopes { margin: 14px 0 16px; }
.feed-scopes .chip svg { width: 14px; height: 14px; }
.tag-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 16px; padding: 12px 14px; border-radius: var(--radius); background: var(--indigo-100); color: var(--ink); }
.tag-head > span { display: inline-flex; align-items: center; gap: 6px; }
.tag-head svg { width: 16px; height: 16px; }
.frozen-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: var(--indigo); color: var(--on-dark); font-size: 13.5px; }
.frozen-bar svg { width: 18px; height: 18px; flex: none; color: #F2A93B; }
.mention, .hashtag { color: var(--orange-600); font-weight: 700; text-decoration: none; }
.mention:hover, .hashtag:hover { text-decoration: underline; }
.post__ask { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 5px 10px; border-radius: 999px; background: var(--orange-100); color: var(--orange-600); font-size: 12px; font-weight: 800; }
.post__ask svg { width: 14px; height: 14px; }
.post__ask.is-solved { background: var(--green-100); color: var(--green-600); }
.post__btn--end { margin-left: auto; }
.post__btn.is-saved { color: var(--orange); }
.post__btn--text span { font-size: 12.5px; font-weight: 700; }
.ask-row { padding: 10px 12px; border-radius: 12px; background: var(--orange-100); line-height: 1.4; }
.composer-tip { margin: -4px 0 0; }
.private-note--warn { color: var(--danger); }
.privacy-card__opt { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--cream-200); cursor: pointer; }
.privacy-card__opt > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.privacy-card__opt b { color: var(--ink); font-size: 14px; }
.privacy-card__opt small { color: var(--graphite-60); font-size: 12.5px; line-height: 1.4; }
.sheet__sub { margin: 18px 0 10px; color: var(--graphite-60); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* Modo vitrine */
.slideshow { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: 1fr auto; background: radial-gradient(circle at 50% 30%, #2B3170, #0E1030 70%); color: var(--on-dark); animation: fadeIn .3s; }
.slideshow__stage { display: grid; place-items: center; padding: 24px 16px 8px; overflow: hidden; }
.slide { display: grid; justify-items: center; gap: 18px; width: min(86vw, 440px); margin: 0; animation: slideIn .5s var(--ease); }
@keyframes slideIn { from { opacity: 0; transform: scale(.94); } }
.cover--slide { width: 100%; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.slide figcaption { display: grid; justify-items: center; gap: 6px; text-align: center; }
.slide figcaption strong { font-family: var(--font-title); font-size: clamp(20px, 5vw, 28px); line-height: 1.2; }
.slide figcaption span { color: rgba(245,233,214,.75); font-size: 14px; }
.slideshow__bar { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 16px calc(14px + var(--safe-bottom)); }
.slideshow__bar span { min-width: 64px; font-size: 13px; font-weight: 700; text-align: center; }
.slideshow__bar .icon-btn { color: var(--on-dark); background: rgba(255,255,255,.1); }
/* Dev: ficha do usuário */
.uf-notify { margin: 4px 0 6px; }
.uf-list { display: grid; gap: 8px; }
.uf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); cursor: pointer; }
.uf-row > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uf-row strong { color: var(--ink); font-size: 14px; }
.uf-row small { color: var(--graphite-60); font-size: 12px; line-height: 1.4; }
[data-uf] > .btn, [data-us] .form__actions, .note-list + .btn { margin-top: 18px; }
.note-list { display: grid; gap: 10px; margin: 16px 0; }
.note { padding: 12px 14px; border-left: 3px solid var(--orange); border-radius: 0 12px 12px 0; background: var(--surface); }
.note p { margin: 0 0 6px; color: var(--ink); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.note small { color: var(--graphite-60); font-size: 12px; }
.pick-results { display: grid; gap: 6px; margin: 10px 0 14px; max-height: 260px; overflow: auto; }
.pick-results:empty { display: none; }
.pick-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--cream-200); }
.pick-row > span:not(.avatar) { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.pick-row small { color: var(--graphite-60); font-weight: 500; }
.pick-row > svg { width: 16px; height: 16px; flex: none; color: var(--orange); }
.pick-row.is-on { box-shadow: inset 0 0 0 2px var(--green); }
.pick-row.is-on > svg { color: var(--green); }
[data-picker] .field__label { display: block; margin-bottom: 8px; }
/* Dev: aba Ferramentas */
.tool-tabs { margin-bottom: 16px; }
.tool-tabs .chip svg { width: 14px; height: 14px; }
.seg-days { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.gs-title { display: flex; align-items: center; gap: 6px; margin: 20px 0 10px; color: var(--ink); font-size: 14px; }
.gs-title svg { width: 16px; height: 16px; color: var(--orange); }
.gs-title small { color: var(--graphite-60); font-weight: 600; }
.gs-list { display: grid; gap: 6px; }
.gs-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface); color: inherit; text-decoration: none; box-shadow: inset 0 0 0 1px var(--cream-200); }
.gs-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gs-row strong { overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.gs-row small { overflow: hidden; color: var(--graphite-60); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.spark-row { display: grid; grid-template-columns: 150px 1fr; align-items: end; gap: 14px; margin-bottom: 18px; }
@media (max-width: 620px) { .spark-row { grid-template-columns: 1fr; gap: 6px; } }
.spark-row > span { color: var(--ink); font-size: 13px; font-weight: 700; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 64px; padding: 4px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.spark i { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--c); opacity: .85; }
.spark i:hover { opacity: 1; }
.city-list { display: grid; gap: 14px; }
.city-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; align-items: center; gap: 6px 14px; }
.city-row strong { color: var(--ink); font-size: 14px; }
.city-row small { grid-column: 2; color: var(--graphite-60); font-size: 12px; }
@media (max-width: 620px) { .city-row { grid-template-columns: 1fr; } .city-row small { grid-column: 1; } }
.city-row__bar { height: 12px; border-radius: 6px; background: var(--cream-200); overflow: hidden; }
.city-row__bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--orange), var(--green)); }
.rank-list { display: grid; gap: 10px; margin: 0; padding-left: 22px; }
.rank-list li { padding-left: 4px; }
.rank-list li::marker { color: var(--orange); font-weight: 800; }
.rank-list li > span, .rank-list li > a { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.rank-list li > a { flex-direction: row; align-items: center; gap: 8px; }
.rank-list li > a > span:not(.avatar) { display: flex; flex-direction: column; }
.rank-list strong { color: var(--ink); font-size: 13.5px; line-height: 1.35; }
.rank-list small { display: inline-flex; align-items: center; gap: 4px; color: var(--graphite-60); font-size: 12px; }
.rank-list small svg { width: 12px; height: 12px; }
.dupe-group { display: grid; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.dupe-group .btn { justify-self: start; margin-top: 4px; }
.dupe-row, .inact-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.dupe-row input, .inact-row input { width: 18px; height: 18px; flex: none; accent-color: var(--orange); }
.dupe-row > span:not(.avatar), .inact-row > span:not(.avatar) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dupe-row strong, .inact-row strong { color: var(--ink); font-size: 14px; }
.dupe-row small, .inact-row small { color: var(--graphite-60); font-size: 12px; overflow-wrap: anywhere; }
.inact-list { display: grid; gap: 10px; max-height: 50vh; margin: 12px 0 16px; padding-right: 4px; overflow: auto; }
.health-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 14px; border-radius: 12px; }
.health-head.is-ok { background: var(--green-100); }
.health-head.is-warn { background: var(--orange-100); }
.health-head > svg { width: 22px; height: 22px; flex: none; }
.health-head span { display: flex; flex-direction: column; gap: 2px; }
.health-head strong { color: var(--ink); }
.health-head small { color: var(--graphite-60); font-size: 12.5px; }
.health-list { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.health-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.health-list li svg { width: 15px; height: 15px; flex: none; color: var(--green); }
.health-list li.is-bad svg { color: var(--orange); }
.health-list li b { margin-left: auto; }

/* ==========================================================================
   RESPIRO ENTRE ELEMENTOS (versão n) — medido tela a tela
   ========================================================================== */
.radio-list { gap: 10px; }
.pay-list, .cat-list, .trash-list, .err-list, .login-list, .tpl-list, .ver-list, .osm-list, .route-pick { gap: 10px; }
.rank { gap: 8px; }
.wish__actions, .mt__actions { gap: 8px; }
.detail__badges { gap: 8px; }
.tag-add { gap: 6px; }
.tpl__tags, .match-card__tags { gap: 6px; }
.err, .err-list { min-width: 0; }
.err summary { min-width: 0; }
.panel + .panel, .dev-cols + .panel, .panel + .dev-cols, .kpi-grid + .panel, .kpi-grid + .dev-cols, .mail-warn + .panel { margin-top: 16px; }
.panel__title + .panel__text { margin-top: 6px; }
.panel__text + .form, .panel__text + .pay-list, .panel__text + .search, .panel__text + .setting { margin-top: 12px; }
.form__actions { margin-top: 8px; }
.sheet__lead { margin-bottom: 16px; }
.menu-list + .menu-list, .detail__label--section { margin-top: 18px; }
.detail__label--section { margin-bottom: 10px; }
.profile-actions { gap: 8px; row-gap: 8px; }
.follows-you { display: inline-block; margin-top: 8px; }
.post__ask { margin-bottom: 12px; }
.composer-trigger { margin-bottom: 4px; }
.quick-links { margin-bottom: 4px; }
.toolbar { gap: 14px; }
.col-tools { margin-top: 2px; }
.stats + .media-bar, .media-bar + .media-legend { margin-top: 10px; }
/* Abas com ícones: com 5 ou mais abas, rolam de lado e escondem os ícones em telas pequenas */
.tabs--icons { overflow-x: auto; scrollbar-width: none; }
.tabs--icons::-webkit-scrollbar { display: none; }
.tabs--icons .tab { flex: 1 0 auto; padding: 0 12px; white-space: nowrap; }
@media (max-width: 520px) { .tabs--icons .tab svg { display: none; } .tabs--icons .tab { padding: 0 10px; } }
.mt-suggest { row-gap: 10px; }

.pick-row .avatar, .inact-row .avatar, .gs-row .avatar, .rank-list .avatar { flex: none; }
.cmp-item > .tag, .news-item > .tag, .news-item > .rarity { flex: none; }
.slide .rarity { background: rgba(255,255,255,.14); color: var(--on-dark); }

/* Itens de uma prateleira */
.shelf-chip--add { border-style: dashed; color: var(--orange-600); }
.shelf-items { display: grid; gap: 8px; max-height: 55dvh; margin: 12px 0 16px; overflow: auto; }
.shelf-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); cursor: pointer; }
.shelf-item input { width: 20px; height: 20px; flex: none; accent-color: var(--orange); }
.shelf-item .cover--thumb { width: 42px; flex: none; }
.shelf-item > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shelf-item strong { overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.shelf-item small { color: var(--graphite-60); font-size: 12px; }
.shelf-item:has(input:checked) { box-shadow: inset 0 0 0 2px var(--orange); }
.shelf-row .btn { flex: none; }

/* ---------- Sons e “Chamar atenção” (versão p) ---------- */
@keyframes nudgeShake {
  0%, 100% { transform: none; }
  8%  { transform: translate(-9px, 3px) rotate(-.6deg); }
  16% { transform: translate(8px, -4px) rotate(.6deg); }
  24% { transform: translate(-10px, -2px); }
  32% { transform: translate(9px, 4px) rotate(.4deg); }
  40% { transform: translate(-7px, 2px) rotate(-.4deg); }
  48% { transform: translate(8px, -3px); }
  56% { transform: translate(-6px, 3px); }
  64% { transform: translate(5px, -2px); }
  72% { transform: translate(-4px, 1px); }
  80% { transform: translate(3px, -1px); }
  90% { transform: translate(-1px, 0); }
}
@keyframes nudgeFlash { 0%, 100% { box-shadow: none; } 30%, 70% { box-shadow: 0 0 0 4px var(--orange), 0 0 32px rgba(227,108,42,.45); } }
.is-nudged { animation: nudgeShake .7s cubic-bezier(.36,.07,.19,.97) both; }
@media (prefers-reduced-motion: reduce) { .is-nudged { animation: nudgeFlash .9s ease both !important; border-radius: 16px; } }
.chat.is-nudged .chat__list { background: linear-gradient(rgba(227,108,42,.07), transparent); border-radius: 16px; }

.msg-nudge { align-self: center; display: flex; align-items: center; gap: 10px; max-width: 92%; margin: 4px 0; padding: 8px 14px; border-radius: 999px; background: var(--orange-100); color: var(--orange-600); animation: rise .25s var(--ease); }
.msg-nudge svg { width: 18px; height: 18px; flex: none; }
.msg-nudge > span { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.msg-nudge b { font-size: 13px; }
.msg-nudge small { color: var(--graphite-60); font-size: 11px; }
.chat__nudge { flex: none; color: var(--orange); }
.chat__nudge:disabled { opacity: .45; }
.conv__last svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--orange); }

.menu-item--switch { cursor: pointer; }
.menu-item--switch .switch { flex: none; margin-left: auto; }

/* Recursos incluídos nos planos */
.feat__plan { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--green-600) !important; font-size: 12px; font-weight: 600; }
.feat__plan svg { width: 13px; height: 13px; }
.plan-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 14px; }
.plan-feats__card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.plan-feats__card--plus { box-shadow: inset 0 0 0 1px var(--cream-200), inset 4px 0 0 var(--orange); }
.plan-feats__card--partner { box-shadow: inset 0 0 0 1px var(--cream-200), inset 4px 0 0 var(--green); }
.plan-feats__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.plan-feats__head strong { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; }
.plan-feats__head strong svg { width: 18px; height: 18px; color: var(--orange); }
.plan-feats__list { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-feats__chip { padding: 6px 12px; border-radius: 999px; background: var(--cream-50); box-shadow: inset 0 0 0 1px var(--cream-200); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.plan-feats__chip em { color: var(--graphite-60); font-style: normal; font-weight: 500; }
.form__actions--sticky { position: sticky; bottom: calc(-22px - var(--safe-bottom)); z-index: 2; margin: 16px -20px 0; padding: 12px 20px calc(22px + var(--safe-bottom)); background: var(--cream-50); box-shadow: 0 -10px 18px -14px rgba(27,31,75,.35); }

/* App aberto durante uma atualização */
.update-bar { position: fixed; left: 50%; top: calc(var(--appbar-h, 64px) + 10px); z-index: 80; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 12px 18px; border: 0; border-radius: 16px; background: var(--indigo); color: var(--cream); box-shadow: var(--shadow-lg); transform: translateX(-50%); cursor: pointer; text-align: left; animation: rise .3s var(--ease); }
.update-bar svg { width: 20px; height: 20px; flex: none; color: var(--orange); }
.update-bar span { display: flex; flex-direction: column; }
.update-bar strong { font-size: 14px; }
.update-bar small { color: rgba(245,233,214,.75); font-size: 12px; }

.plan-feats__card--boost { box-shadow: inset 0 0 0 1px var(--cream-200), inset 4px 0 0 var(--indigo-500); }
.plan-feats__label { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--graphite-60); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.plan-feats__label svg { width: 13px; height: 13px; }
.plan-feats__label small { font-size: 11px; letter-spacing: 0; }
.plan-feats__fixed { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plan-feats__fixed li { display: flex; align-items: flex-start; gap: 10px; }
.plan-feats__fixed li > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--orange); }
.plan-feats__fixed span { display: flex; flex-direction: column; gap: 1px; }
.plan-feats__fixed b { color: var(--ink); font-size: 13.5px; }
.plan-feats__fixed small { color: var(--graphite-60); font-size: 12px; line-height: 1.4; }
.sheet .plan-feats__fixed { margin-bottom: 8px; padding: 12px 14px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); }
.sheet__sub svg { width: 13px; height: 13px; vertical-align: -2px; }

/* ======================================================================
   Chat completo (versão s): tiques, edição, temporárias, fotos e visualização única
   ====================================================================== */
.chat__top { display: flex; align-items: center; gap: 10px; }
.chat__top .chat__head { flex: 1; min-width: 0; }
.chat__menu { flex: none; background: var(--cream-50); box-shadow: var(--shadow-sm); }
.chat__menu svg { color: var(--graphite); }
.chat__bars { display: grid; gap: 6px; width: 100%; }
.chat__bars[hidden] { display: none; }
.chat__bar { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); animation: rise .2s var(--ease); }
.chat__bar > svg { width: 17px; height: 17px; flex: none; color: var(--graphite-60); }
.chat__bar > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat__bar strong { color: var(--ink); font-size: 13px; }
.chat__bar small { overflow: hidden; color: var(--graphite-60); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.chat__bar img { width: 46px; height: 46px; flex: none; border-radius: 10px; object-fit: cover; }
.chat__bar--edit { box-shadow: inset 0 0 0 1px var(--cream-200), inset 3px 0 0 var(--orange); }
.chat__bar--edit > svg, .chat__bar--ttl > svg { color: var(--orange); }
.chat__bar--item > svg { color: var(--green); }
.chat__bar .link-btn { flex: none; font-size: 12.5px; }
.chat__tool { flex: none; color: var(--graphite-60); }
.chat__tool:hover { color: var(--ink); }

.once-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.once-toggle { display: grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--cream); color: var(--graphite); cursor: pointer; transition: background .2s, color .2s; }
.once-toggle.is-on { background: var(--indigo); color: var(--cream); }

/* Balões */
.msg { position: relative; }
.msg.no-anim { animation: none; }
.msg__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 3px; }
.msg__meta { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; line-height: 1; opacity: .7; white-space: nowrap; }
.msg > .msg__meta { display: flex; justify-content: flex-end; margin-top: 3px; }
.msg__meta em { margin-right: 2px; font-style: italic; }
.ticks { width: 16px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.msg--mine .msg__meta { opacity: .8; }
.ticks--read { color: #53BDEB; opacity: 1; }
.msg--mine .ticks--read { color: #6CCBF5; }
.conv__last .ticks { width: 15px; height: 10px; margin-right: 3px; vertical-align: -1px; color: var(--graphite-60); }
.conv__last .ticks--read { color: #2E9FD3; }

.msg--temp { box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(227,108,42,.35); }
.msg__timer { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; opacity: .85; }
.msg__timer svg { width: 13px; height: 13px; flex: none; transform: rotate(-90deg); }
.msg__timer.is-idle svg { transform: none; }
.msg__timer circle { fill: none; stroke-width: 2.4; }
.msg__timer .bg { stroke: currentColor; opacity: .22; }
.msg__timer .fg { stroke: var(--orange); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 100)); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.msg__timer.is-ending b { color: var(--orange); }
.msg--mine .msg__timer.is-ending b { color: #FFB27F; }

.msg--photo { padding: 4px; }
.msg--photo > p { padding: 6px 8px 0; }
.msg--photo .msg__foot { padding: 0 8px 4px; }
.msg__img { display: block; width: min(260px, 66vw); max-height: 340px; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: var(--cream-200); cursor: zoom-in; }
.msg__img img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.msg--photo:not(:has(p)) .msg__foot { position: absolute; right: 10px; bottom: 9px; padding: 3px 7px; border-radius: 999px; background: rgba(20,23,58,.55); color: #fff; }

.msg--once { padding: 8px 12px 6px; }
.once { display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 2px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.once:disabled { cursor: default; }
.once > span { display: flex; flex-direction: column; }
.once strong { font-size: 13.5px; }
.once small { margin: 0; text-align: left; font-size: 11px; opacity: .7; }
.msg--once:not(.msg--mine) .once:not(:disabled) .once-ico { color: var(--orange); }
.msg--once.is-opened .once { opacity: .65; }

.msg--ghost { box-shadow: none; background: transparent; outline: 1px dashed var(--cream-200); }
.msg--ghost.msg--mine { background: transparent; color: var(--graphite-60); outline-color: rgba(27,31,75,.18); }
.msg--ghost p { display: flex; align-items: center; gap: 6px; color: var(--graphite-60); font-size: 13px; font-style: italic; }
.msg--ghost p svg { width: 14px; height: 14px; flex: none; }
.msg--ghost .msg__meta { color: var(--graphite-60); }

.msg__more { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(20,23,58,.08); color: inherit; opacity: 0; cursor: pointer; transition: opacity .15s; }
.msg--mine .msg__more { background: rgba(245,233,214,.16); }
.msg__more svg { width: 13px; height: 13px; transform: rotate(90deg); }
.msg:hover .msg__more { opacity: 1; }

/* “Explosão” da mensagem temporária */
@keyframes msgExplode { 0% { transform: none; } 25% { transform: scale(1.05); } 100% { transform: scale(.35); opacity: 0; filter: blur(5px); } }
@keyframes burstFly { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(var(--s)); opacity: 0; } }
.msg.is-exploding { animation: msgExplode .62s cubic-bezier(.5,0,.75,0) forwards; pointer-events: none; }
.msg-burst { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.msg-burst i { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: burstFly .7s cubic-bezier(.2,.7,.3,1) forwards; }
.msg-burst i:nth-child(3n) { background: var(--green); }
.msg-burst i:nth-child(3n+1) { width: 4px; height: 4px; background: var(--indigo-500); }
@media (prefers-reduced-motion: reduce) { .msg.is-exploding { animation: msgExplode .4s ease forwards !important; } .msg-burst { display: none; } }

/* Visualizador de fotos */
.viewer { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 64px 12px 24px; background: rgba(10,12,30,.94); opacity: 0; transition: opacity .2s; user-select: none; -webkit-user-select: none; }
.viewer.is-open { opacity: 1; }
.viewer img { max-width: 100%; max-height: calc(100dvh - 100px); border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); -webkit-user-drag: none; pointer-events: none; }
.viewer--once img { pointer-events: none; }
.viewer__bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 14px 12px; }
.viewer__tag { display: inline-flex; align-items: center; gap: 8px; color: var(--cream); font-size: 13px; font-weight: 600; }
.viewer__tag .once-ico { width: 20px; height: 20px; color: var(--orange); }
.viewer__close { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(245,233,214,.12); color: var(--cream); cursor: pointer; }
.viewer__close svg { width: 20px; height: 20px; }

/* Ações e menu da conversa */
.msg-preview { margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.msg-preview svg { width: 15px; height: 15px; vertical-align: -2px; color: var(--graphite-60); }
.msg-preview small { display: block; margin-top: 4px; color: var(--graphite-60); font-size: 12px; }
.menu-list--spaced { margin-top: 18px; }
.ttl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ttl-opt { padding: 11px 6px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-200); color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s, box-shadow .15s; }
.ttl-opt:hover { box-shadow: inset 0 0 0 1px var(--orange); }
.ttl-opt.is-on { background: var(--indigo); box-shadow: none; color: var(--cream); }
@media (max-width: 380px) { .ttl-grid { grid-template-columns: repeat(3, 1fr); } }
.conv__last svg, .msg-preview svg { display: inline-block; }
.conv__last svg:not(.ticks) { margin-right: 3px; }
.msg__more { top: 50%; right: -30px; width: 24px; height: 24px; margin-top: -12px; background: var(--cream-50); box-shadow: var(--shadow-sm); color: var(--graphite-60); }
.msg--mine .msg__more { right: auto; left: -30px; background: var(--cream-50); }
.msg::after { content: ''; position: absolute; top: 0; bottom: 0; width: 34px; right: -34px; }
.msg--mine::after { right: auto; left: -34px; }

/* Sessão expirada: recarregando */
.session-veil { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(27,31,75,.92); color: var(--cream); text-align: center; animation: viewIn .2s var(--ease); }
.session-veil .spinner { width: 34px; height: 34px; margin-bottom: 6px; }
.session-veil strong { font-family: var(--font-title); font-size: 20px; }
.session-veil small { color: rgba(245,233,214,.75); font-size: 13.5px; }

/* ======================================================================
   Fundo do chat (estilo WhatsApp/Telegram): desenhos retrô bem discretos.
   O desenho é uma máscara; a cor vem do tema, então funciona em todos.
   ====================================================================== */
:root { --chat-wall: color-mix(in srgb, var(--page) 88%, var(--orange) 5%); --chat-doodle: color-mix(in srgb, var(--ink) 9%, transparent); }
html[data-theme="noite"], html[data-theme="fliperama"] { --chat-wall: color-mix(in srgb, var(--page) 94%, #000); --chat-doodle: rgba(245,233,214,.055); }
.chat { position: relative; isolation: isolate; }
.chat::before, .chat::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.chat::before { background: var(--chat-wall); }
.chat::after {
  background: var(--chat-doodle);
  -webkit-mask: url("assets/img/chat-doodles.svg") 0 0 / 440px 440px repeat;
          mask: url("assets/img/chat-doodles.svg") 0 0 / 440px 440px repeat;
}
.chat__tip { width: fit-content; max-width: 100%; margin-inline: auto; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--cream-50) 82%, transparent); backdrop-filter: blur(4px); }
.chat__empty { width: fit-content; max-width: 86%; margin-inline: auto; padding: 14px 18px; border-radius: 14px; background: color-mix(in srgb, var(--cream-50) 85%, transparent); }
.msg-nudge { backdrop-filter: blur(3px); }
@media print { .chat::before, .chat::after { display: none; } }
.msg--ghost, .msg--ghost.msg--mine { background: color-mix(in srgb, var(--cream-50) 72%, transparent); }