/* ═══════════════════════════════════════════════════════════
   ILHA DA MARIA — 11ª Convenção Nacional de Franqueados
   Tema: DIA (claro, padrão) · NOITE (anoiteceu na ilha)
   Paleta tropical · ondas · pôr do sol
   ═══════════════════════════════════════════════════════════ */

/* ===== DIA (padrão) ===== */
:root, [data-theme='light'] {
    --bg:          #aedbff;
    --bg-grad:     linear-gradient(180deg,
                     #a8d8ff 0%,    /* céu */
                     #cdecff 24%,   /* céu claro no horizonte */
                     #6fbfe8 46%,   /* mar */
                     #2f9bd9 58%,   /* mar fundo */
                     #5ec9d4 70%,   /* água rasa (turquesa) */
                     #ecdcaf 85%,   /* areia molhada */
                     #f4e7bd 100%); /* areia */
    --bg-card:     #ffffff;              /* menções, gaveta: continuam opacas */
    --bg-card-glass: rgba(216,235,252,.68);  /* cards do feed: azul claro translúcido */
    --bg-card-2:   #f1f7fe;
    --bg-nav:      rgba(255,255,255,.97);
    --bg-input:    #ffffff;
    --popup-bg:    #ffffff;   /* menu do select: cor solida, translucido nao vale */
    --text:        #0a2742;
    --text-muted:  rgba(10,39,66,.64);
    --text-dim:    rgba(10,39,66,.45);
    --border:        rgba(10,39,66,.12);
    --border-strong: rgba(10,39,66,.22);
    --shadow: 0 6px 22px rgba(4,75,217,.10), 0 2px 6px rgba(10,39,66,.06);
    --card-text:   #0a2742;
    --nav-active:  #044bd9;
    --header-grad: linear-gradient(120deg,#0583f2 0%, #044bd9 100%);
    --hdr-art:     url('../img/fundo_dia.jpg');   /* o cabeçalho mostra a MESMA arte */
    --hdr-solid:   #a8d8ff;                       /* reserva se a imagem não carregar */
    --wave-fill:   rgba(255,255,255,.92);   /* espuma sobre a arte */
    --wave-crest:  rgba(255,255,255,.98);
    --hdr-btn-fg:   #123b5c;                 /* botão dia/noite: só contorno */
    --hdr-btn-bg-h: rgba(18,59,92,.14);      /* leve toque ao tocar */
    --hdr-btn-halo: 0 1px 2px rgba(255,255,255,.55);
    --pts-color:   #f29f05;
}

/* O navegador desenha o menu do <select>, o seletor de data e a barra de
   rolagem por conta propria. Sem declarar color-scheme ele pinta tudo no claro
   do sistema, mas o texto herda a cor do tema — no escuro dava cinza-claro
   sobre branco, ilegivel. Declarado, o menu nativo acompanha o tema. */
html[data-theme='light'] { color-scheme: light; }
html[data-theme='dark']  { color-scheme: dark; }
/* reforco pra quem ignora color-scheme no popup */
select option { background-color: var(--popup-bg); color: var(--text); }

/* ===== NOITE (anoiteceu na ilha) ===== */
[data-theme='dark'] {
    --bg:          #0a1f3f;
    --bg-grad:     linear-gradient(180deg,
                     #0a1d3c 0%,    /* céu noturno */
                     #0e2c54 28%,   /* céu/horizonte */
                     #15527f 47%,   /* mar enluarado */
                     #0e3a62 60%,   /* mar fundo */
                     #123a55 71%,   /* água rasa */
                     #1b2a3e 86%,   /* areia escura */
                     #0f1c2e 100%);
    --bg-card:     rgba(255,255,255,.07);
    --bg-card-glass: rgba(10,31,63,.25);     /* tinta escura: 75% da arte aparece */
    --bg-card-2:   rgba(255,255,255,.12);
    --bg-nav:      rgba(8,22,42,.93);
    --bg-input:    rgba(255,255,255,.08);
    --popup-bg:    #16305a;
    --text:        #e9f1fc;
    --text-muted:  rgba(233,241,252,.62);
    --text-dim:    rgba(233,241,252,.40);
    --border:        rgba(255,255,255,.14);
    --border-strong: rgba(255,255,255,.24);
    --shadow: 0 10px 30px rgba(0,0,0,.5);
    --card-text:   #e9f1fc;
    --nav-active:  #ffd84d;
    --header-grad: linear-gradient(120deg,#0c2a54 0%, #0a1b36 70%, #0c1d33 100%);
    --hdr-art:     url('../img/fundo_noite.jpg');
    --hdr-solid:   #0a1d3c;
    --wave-fill:   rgba(226,240,255,.82);   /* espuma enluarada */
    --wave-crest:  rgba(255,255,255,.92);
    --hdr-btn-fg:   #eaf3ff;
    --hdr-btn-bg-h: rgba(255,255,255,.18);
    --hdr-btn-halo: 0 1px 3px rgba(0,0,0,.55);
    --pts-color:   #ffd84d;
}

/* ===== Cores fixas da marca ===== */
:root {
    --c-blue:    #044bd9;
    --c-blue2:   #0583f2;
    --c-yellow:  #f2b705;
    --c-orange:  #f29f05;
    --c-red:     #f23322;
    --c-green:   #02733e;
    --c-white:   #ffffff;
    --sunset:    linear-gradient(95deg,#f2b705 0%,#f29f05 45%,#f23322 100%);
    --ocean:     linear-gradient(120deg,#0583f2,#044bd9);

    /* compat com classes existentes (remapeadas p/ a marca) */
    --gold:        #f2b705;
    --gold-dark:   #f29f05;
    --gold-light:  #ffd84d;
    --gold-bg:     rgba(242,183,5,.15);
    --gold-border: rgba(242,159,5,.42);
    --navy:        #044bd9;
    --navy-deep:   #022e6b;
    --green-mb:    #02733e;
    --red:         #f23322;
    --green-ok:    #02b357;

    --radius-sm:  12px;
    --radius-md:  16px;
    --radius-lg:  20px;
    --radius-xl:  26px;
    --nav-h:      64px;
    --hdr-h:      84px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { background: var(--bg); }
body {
    margin: 0;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    background-image: var(--bg-grad);
    background-attachment: fixed;
    background-size: cover;
    transition: background-color .3s, color .3s;
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}

/* ═══ FUNDO DO APP = ILUSTRAÇÃO (arte da Ilha da Maria) ═══════════════
   Camada FIXA em tela cheia (z-index:-1). Usa pseudo-elemento em vez de
   `background-attachment: fixed` porque no iOS/Safari o attachment fixed
   dimensiona pelo documento (não pela viewport) e a imagem sai ampliada.
   O degradê no `body` continua atrás, como reserva se a imagem não carregar.
   As nuvens/estrelas decorativas saíram: a própria arte já traz as duas. */
[data-theme='dark'] body::before,
[data-theme='light'] body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}
[data-theme='light'] body::before { background-image: url('../img/fundo_dia.jpg'); }
[data-theme='dark']  body::before { background-image: url('../img/fundo_noite.jpg'); }

/* WEBP quando o navegador souber escolher (57-61% mais leve que o JPEG acima).
   Quem não entender image-set() simplesmente fica no JPEG das duas linhas
   anteriores — nada quebra, só não economiza. */
@supports (background-image: image-set(url('../img/fundo_dia.webp') type('image/webp'))) {
    [data-theme='light'] {
        --hdr-art: image-set(url('../img/fundo_dia.webp') type('image/webp'),
                             url('../img/fundo_dia.jpg')  type('image/jpeg'));
    }
    [data-theme='dark'] {
        --hdr-art: image-set(url('../img/fundo_noite.webp') type('image/webp'),
                             url('../img/fundo_noite.jpg')  type('image/jpeg'));
    }
    [data-theme='light'] body::before {
        background-image: image-set(url('../img/fundo_dia.webp') type('image/webp'),
                                    url('../img/fundo_dia.jpg')  type('image/jpeg'));
    }
    [data-theme='dark'] body::before {
        background-image: image-set(url('../img/fundo_noite.webp') type('image/webp'),
                                    url('../img/fundo_noite.jpg')  type('image/jpeg'));
    }
}

h1, h2, h3, .serif, .display { font-family: "Fredoka", "Poppins", sans-serif; font-weight: 600; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
input, textarea, select, button { font-family: inherit; font-size: 15px; }

.eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--c-orange);
}
[data-theme='dark'] .eyebrow { color: var(--gold-light); }
.muted { color: var(--text-muted); }
.dim   { color: var(--text-dim); }

/* ── Top header (oceano + onda) ─────────────────────────── */
.topbar {
    position: sticky; top: 0; z-index: 200;
    min-height: calc(var(--hdr-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    display: flex; align-items: center; gap: 12px;
    padding-left: 16px; padding-right: 12px;
    /* O cabeçalho exibe a MESMA arte do fundo, dimensionada pela TELA (100vw x 100vh)
       e ancorada no topo — então a fatia que ele mostra é idêntica à da camada de fundo
       (`body::before`, que é fixa e usa cover). Resultado: parece continuação perfeita,
       MAS é opaco, então o conteúdo não passa atrás dele ao rolar.
       Funciona sem JS e sem backdrop-filter (antes dependia dos dois e era frágil).
       Só dá certo porque a proporção da arte (0.4615) ≈ a das telas de celular. */
    background-color: var(--hdr-solid);
    background-image: var(--hdr-art);
    background-size: 100vw 100vh;
    background-position: center top;
    background-repeat: no-repeat;
    color: #fff;
    box-shadow: 0 3px 14px rgba(4,75,217,.28);
}
/* ondas animadas do cabeçalho */
.topbar-waves {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 20px;
    overflow: hidden; pointer-events: none; z-index: 1;
}
.topbar-wave {
    position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; display: block;
}
.topbar-wave path { transition: fill .3s; }
.w-front .wf-fill { fill: var(--wave-fill); }
.w-back  path { fill: var(--wave-fill); opacity: .55; }
/* crista de luz na onda (brilho de luar — deixa a onda visível no escuro) */
.wf-crest { fill: none; stroke: var(--wave-crest); stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.w-front { animation: waveMove 6s linear infinite; }
.w-back  { animation: waveMove 9s linear infinite reverse; }
@keyframes waveMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* peixinho pulando */
/* Fonte das criaturas: GIF animado. Sob "reduzir movimento" o GIF não para por
   CSS, então a variável troca pelo quadro parado (PNG). */
:root {
    --gaivota-src:  url('../img/gaivota.gif');
    --golfinho-src: url('../img/golfinho.gif');
}

/* GOLFINHO — o pulo inteiro já vem dentro do GIF: 1,7s de pulo + 10,3s de mar
   quieto = um pulo a cada 12s (nada de animação no CSS). z-index 0 deixa a onda
   na frente, então ele parece sair de dentro da água. Pula no meio da tela. */
.topbar-fish {
    position: absolute; z-index: 0; bottom: 0;
    left: 50%; margin-left: -54px; width: 108px; height: 68px;
    background: var(--golfinho-src) center bottom / contain no-repeat;
    pointer-events: none;
}
[data-theme='light'] .topbar-fish {   /* arte clara pede silhueta escura */
    filter: brightness(.34) saturate(.18) drop-shadow(0 1px 3px rgba(255,255,255,.45));
}
[data-theme='dark'] .topbar-fish {    /* céu escuro: golfinho claro + contorno */
    filter: drop-shadow(0 0 4px rgba(0,0,0,.65));
}
@media (prefers-reduced-motion: reduce) {
    .w-front, .w-back { animation: none; }
    /* GIF não obedece animation:none — troco a fonte pelo quadro parado, assim
       o golfinho e as gaivotas continuam visíveis, só não se movem. */
    :root {
        --gaivota-src:  url('../img/gaivota_parada.png');
        --golfinho-src: url('../img/golfinho_parado.png');
    }
}
.topbar .back {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-left: -6px; border-radius: 50%;
    color: #fff; font-size: 24px; flex: none;
}
.topbar .ttl { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 20px; flex: 1; color: #fff; }
.hdr-logo { height: 60px; width: auto; position: relative; z-index: 2; }
.topbar .act {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 24px; flex: none;
    background: rgba(255,255,255,.18); font-weight: 300;
}
.topbar .act-ico { margin-right: 8px; }
.topbar .act svg { width: 21px; height: 21px; }

/* ── Container ──────────────────────────────────────────── */
.page { max-width: 640px; margin: 0 auto; padding: 18px 16px; }
.page-tight { max-width: 640px; margin: 0 auto; }

/* ── Cards ──────────────────────────────────────────────── */
/* Cards translúcidos: a arte do fundo aparece por trás, NÍTIDA (sem desfoque).
   É a tinta do card que garante a leitura — no dia um azul claro a 68%, na noite
   um azul escuro a 25% (o desfoque fazia esse papel apagando o detalhe da arte;
   sem ele, a água enluarada deixava o texto em 3,3 de contraste). */
.card {
    background: var(--bg-card-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
}

/* ── Botões ─────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 20px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong); background: var(--bg-card-2);
    color: var(--text); font-weight: 600; cursor: pointer; font-family: inherit;
    transition: all .2s; width: 100%;
}
.btn:hover { filter: brightness(.98); }
.btn-gold {
    background: var(--sunset); color: #fff; border: none; font-weight: 700;
    box-shadow: 0 6px 18px rgba(242,120,20,.35);
    text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.btn-gold:hover { filter: brightness(1.05); }
.btn-navy { background: var(--ocean); color: #fff; border: none; box-shadow: 0 5px 16px rgba(4,75,217,.3); }
.btn-wpp { background: #25D366; color: #fff; border: none; box-shadow: 0 5px 16px rgba(37,211,102,.35); }
.btn-wpp:hover { filter: brightness(1.05); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 9px 15px; font-size: 13px; width: auto; }

/* ── Inputs ─────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px;
}
input[type=text], input[type=email], input[type=date], input[type=time],
input[type=url], input[type=password], input[type=tel], input[type=number],
input[type=search], textarea, select {
    width: 100%; padding: 13px 14px; border-radius: var(--radius-sm);
    background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--c-blue2);
    box-shadow: 0 0 0 3px rgba(5,131,242,.2);
}
textarea { resize: vertical; min-height: 90px; }

/* ── Flash ──────────────────────────────────────────────── */
.flashes { padding: 12px 16px 0; max-width: 640px; margin: 0 auto; }
.flash {
    padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 8px;
    font-size: 14px; font-weight: 500; border: 1px solid;
}
.flash.ok  { background: rgba(2,179,87,.14);  color: #047a3a; border-color: rgba(2,179,87,.4); }
.flash.erro{ background: rgba(242,51,34,.12);  color: #c5281a; border-color: rgba(242,51,34,.4); }
[data-theme='dark'] .flash.ok  { color: #6ee7a8; background: rgba(2,179,87,.18); }
[data-theme='dark'] .flash.erro{ color: #ffb0a6; background: rgba(242,51,34,.18); }

/* ── Section heading ────────────────────────────────────── */
.sec-head { margin: 4px 0 16px; }
.sec-head h2 { margin: 2px 0; font-size: 27px; line-height: 1.05; }
.sec-head p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }

/* ── Avatar ─────────────────────────────────────────────── */
/* tamanho padrão (qualquer uso sem classe de contexto) — evita avatar gigante */
.avatar, .avatar-ph, .avatar-el { width: 44px; height: 44px; }
.avatar {
    border-radius: 50%; object-fit: cover; background: var(--bg-card-2);
    border: 1px solid var(--border); flex: none;
}
/* avatar de comentário */
.com-av.avatar, .com-av.avatar-ph, .com-av.avatar-el { width: 40px; height: 40px; font-size: 16px; flex: none; }
.avatar-ph {
    display: flex; align-items: center; justify-content: center;
    background: var(--ocean);
    color: #fff; font-family: "Fredoka", sans-serif; font-weight: 600;
}
.avatar-el {
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; background: #eaf4fe;
}
[data-theme='dark'] .avatar-el { background: rgba(255,255,255,.12); }
.avatar-el img { width: 74%; height: 74%; object-fit: contain; display: block; }

/* Seletor de avatar (perfil) */
.avatar-picker { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-top: 8px; }
.avatar-picker label { cursor: pointer; position: relative; display: block; }
.avatar-picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.av-opt {
    aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--border);
    background: #eaf4fe; display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
[data-theme='dark'] .av-opt { background: rgba(255,255,255,.1); }
.av-opt img { width: 72%; height: 72%; object-fit: contain; }
.av-opt.initial { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 13px; color: var(--text-muted); }
.avatar-picker input:checked + .av-opt {
    border-color: var(--c-yellow); box-shadow: 0 0 0 3px rgba(242,183,5,.3); transform: scale(1.06);
}

/* ── Badges ─────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
    background: var(--gold-bg); color: var(--c-orange); border: 1px solid var(--gold-border);
}
.badge-pts { background: var(--gold-bg); color: var(--pts-color); border-color: var(--gold-border); }

/* ═══ FEED ═══════════════════════════════════════════════ */
.post { margin-bottom: 18px; overflow: hidden; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.post-head .avatar, .post-head .avatar-ph { width: 44px; height: 44px; font-size: 18px; }
.post-head .who { flex: 1; min-width: 0; }
.post-head .who b { font-size: 14px; display: block; line-height: 1.2; }
.post-head .who span { font-size: 12px; color: var(--text-muted); }
.post-head .more { color: var(--text-dim); font-size: 22px; padding: 4px 8px; }
.post-img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg-card-2); }
.post-actions { display: flex; align-items: center; gap: 18px; padding: 11px 14px 4px; }
.act-btn {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: none; border: none; color: var(--text); font-weight: 600; font-size: 14px;
    padding: 0; transition: transform .15s;
}
.act-btn .ico { width: 27px; height: 27px; line-height: 1; transition: transform .2s; }
.act-btn:active .ico { transform: scale(1.3); }
/* coração e balão em SVG (contorno; coração enche de vermelho ao curtir) */
.ico-heart path, .ico-comment path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.like-btn.liked { color: var(--c-red); }
.like-btn.liked .ico-heart path { fill: var(--c-red); stroke: var(--c-red); }
.post-likes { padding: 2px 14px; font-weight: 700; font-size: 14px; }
.post-likes .pt { color: var(--pts-color); font-size: 12px; font-weight: 600; }
.post-cap { padding: 5px 14px 14px; font-size: 14px; }
.post-cap b { font-weight: 700; }
.post-cap .time { display: block; margin-top: 6px; color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }

/* FAB novo post */
.fab {
    position: fixed; right: 18px; z-index: 150;
    bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--sunset);
    color: #fff; font-size: 32px; border: none; cursor: pointer; font-weight: 300;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(242,120,20,.5);
}
.fab:active { transform: scale(.94); }

.empty { text-align: center; padding: 56px 24px; color: var(--text-muted); }
.empty .big { font-size: 56px; margin-bottom: 10px; }
.empty b { display:block; font-size: 17px; color: var(--text); margin-bottom: 6px; }

/* ═══ RANKING ════════════════════════════════════════════ */
.rk-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; }
.rk-pos { width: 30px; text-align: center; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 20px; color: var(--text-dim); flex: none; }
.rk-item .avatar, .rk-item .avatar-ph { width: 46px; height: 46px; font-size: 18px; }
.rk-info { flex: 1; min-width: 0; }
.rk-info b { display: block; font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-info span { font-size: 12px; color: var(--text-muted); }
.rk-pts { text-align: right; flex: none; }
.rk-pts .n { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 23px; color: var(--pts-color); line-height: 1; }
.rk-pts .l { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); }
.rk-top { border: 1.5px solid var(--gold-border); background: var(--gold-bg); }

.podium { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: 8px 0 24px; }
.pod { text-align: center; flex: 1; max-width: 110px; }
.pod .avatar, .pod .avatar-ph { margin: 0 auto 8px; border: 3px solid var(--c-yellow); }
.pod-1 .avatar, .pod-1 .avatar-ph { width: 80px; height: 80px; font-size: 30px; }
.pod-2 .avatar, .pod-2 .avatar-ph, .pod-3 .avatar, .pod-3 .avatar-ph { width: 62px; height: 62px; font-size: 24px; }
.pod .nm { font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod .pt { font-family: "Fredoka", sans-serif; font-weight: 600; color: var(--pts-color); font-size: 19px; }
.pod .crown { font-size: 26px; margin-bottom: -4px; }

/* ═══ AGENDA ═════════════════════════════════════════════ */
.day-head { display: flex; align-items: baseline; gap: 10px; margin: 20px 2px 10px; }
.day-head .dn { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 28px; color: var(--c-blue); }
[data-theme='dark'] .day-head .dn { color: #6db6ff; }
.day-head .ds { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: var(--c-orange); font-weight: 700; }
.ev { display: flex; gap: 12px; padding: 14px; margin-bottom: 10px; }
[data-theme='dark'] .ev { background: rgba(255,255,255,.20); }
.ev-time { flex: none; width: 56px; text-align: center; }
.ev-time b { display: block; font-size: 15px; }
.ev-time span { font-size: 11px; color: var(--text-dim); }
.ev-bar { width: 4px; border-radius: 3px; background: var(--sunset); flex: none; }
.ev-body { flex: 1; min-width: 0; }
.ev-body h3 { margin: 0 0 3px; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; }
.ev-body .meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.ev-body .meta .pin { color: var(--c-orange); }
.ev-body p { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }

/* ═══ DICAS ══════════════════════════════════════════════ */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
    flex: none; padding: 9px 16px; border-radius: 999px; cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--border); font-size: 13px; font-weight: 600;
    color: var(--text-muted); transition: all .2s; font-family: inherit;
}
.chip.active { background: var(--ocean); color: #fff; border-color: transparent; }
.dica { overflow: hidden; margin-bottom: 14px; }
.dica img { width: 100%; height: 168px; object-fit: cover; background: var(--bg-card-2); }
.dica .body { padding: 14px; }
.dica .cat { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-orange); }
.dica h3 { margin: 5px 0 6px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 19px; }
.dica p { margin: 0 0 8px; font-size: 13px; color: var(--text-muted); }
.dica .addr { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }

/* ═══ PARCEIROS ══════════════════════════════════════════ */
.parc-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.parc { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 14px; min-height: 130px; gap: 8px; }
.parc img { max-height: 64px; width: auto; object-fit: contain; }
.parc .ph { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 20px; color: var(--text-muted); }
.parc .nm { font-weight: 700; font-size: 14px; }
.parc .nv { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.parc .nv.Ouro  { color: var(--c-yellow); }
.parc .nv.Prata { color: #94a3b8; }
.parc .nv.Bronze{ color: var(--c-orange); }
.grp-title { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 21px; margin: 24px 2px 12px; }

/* ═══ MENU ═══════════════════════════════════════════════ */
.profile-row { display: flex; align-items: center; gap: 14px; padding: 8px 2px 18px; }
.profile-row .avatar, .profile-row .avatar-ph { width: 64px; height: 64px; font-size: 26px; }
.profile-row b { font-size: 18px; display: block; }
.profile-row span { font-size: 13px; color: var(--text-muted); }
.menu-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.menu-item { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; min-height: 94px; }
.menu-item .ico { font-size: 27px; }
.menu-item .lb { font-weight: 700; font-size: 15px; }

/* ═══ STARS ══════════════════════════════════════════════ */
.stars { display: flex; gap: 8px; justify-content: center; margin: 8px 0 18px; }
.star { font-size: 46px; cursor: pointer; color: var(--text-dim); transition: transform .12s, color .12s; background: none; border: none; padding: 0; line-height: 1; }
.star.on { color: var(--c-yellow); }
.star:active { transform: scale(1.2); }

/* ═══ BOTTOM NAV ═════════════════════════════════════════ */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex; background: var(--bg-nav);
    border-top: 1px solid var(--border);
}
.tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; color: var(--text-muted); font-size: 10px; font-weight: 600;
    transition: color .2s; position: relative;
}
.tabbar a .ico { font-size: 23px; line-height: 1; }
/* 6 abas: aperta texto/ícone p/ caber no celular */
.tabbar.tab6 a { font-size: 9.5px; gap: 2px; padding: 0 2px; }
.tabbar.tab6 .navico { width: 22px; height: 22px; }
.tabbar.tab6 a.on::before { width: 22px; }
.tabbar a.on { color: var(--nav-active); }
.tabbar a.on::before {
    content: ""; position: absolute; top: 0; width: 30px; height: 3px; border-radius: 0 0 3px 3px;
    background: var(--nav-active);
}

/* ── Avatar do usuário no cabeçalho (acesso rápido ao perfil) ── */
.hdr-me { flex: none; position: relative; z-index: 4; display: flex; align-items: center; }
.hdr-me .hdr-av { width: 36px; height: 36px; font-size: 14px;
    border: 2px solid rgba(255,255,255,.7); box-shadow: 0 2px 6px rgba(0,0,0,.25); }

/* ── Theme toggle (no cabeçalho, canto direito) ─────────── */
/* Um branco translúcido sobre a arte do cabeçalho dava contraste 1.35 no céu do
   DIA (invisível). Agora é só contorno, invertendo com o tema: traço escuro no
   dia, claro na noite. O halo é o que garante leitura sobre a arte. */
.hdr-toggle {
    flex: none; position: relative; z-index: 4;
    width: 38px; height: 38px; border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--hdr-btn-fg);
    color: var(--hdr-btn-fg);
    filter: drop-shadow(var(--hdr-btn-halo));
    font-size: 19px; cursor: pointer; transition: background .2s, transform .12s;
    display: flex; align-items: center; justify-content: center;
}
.hdr-toggle:hover { background: var(--hdr-btn-bg-h); }
.hdr-toggle:active { transform: scale(.92); }

.divider { height: 1px; background: var(--border); margin: 16px 0; border: none; }
.center { text-align: center; }
.mt { margin-top: 14px; } .mb { margin-bottom: 14px; }

/* ═══ ÍCONES ═════════════════════════════════════════════ */
.tabbar .navico { width: 25px; height: 25px; }
/* Agenda em DESTAQUE (botão central circular flutuante) */
.tabbar .tab-fab { position: relative; }
.tabbar .tab-fab .tab-fab-in {
    position: relative; margin-top: -22px; margin-bottom: 3px;
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f2b705, #f29f05);
    color: #3a2a00;
    box-shadow: 0 4px 14px rgba(242,159,5,.5), 0 0 0 4px var(--bg-nav);
}
.tabbar .tab-fab .tab-fab-in .navico { width: 28px; height: 28px; }
.tabbar .tab-fab.on { color: var(--pts-color,#f29f05); }
.tabbar .tab-fab.on::before { display: none; }
.tabbar .tab-fab.on .tab-fab-in { transform: scale(1.05); transition: transform .18s; }
.menu-item .ico { display: inline-flex; }
.menu-item .ico svg { width: 28px; height: 28px; }

/* ═══ DECORAÇÃO SOLTA (ícones de fundo) ══════════════════ */
.deco-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
main { position: relative; }

.deco { position: absolute; opacity: .4; }
[data-theme='dark'] .deco { opacity: .5; }
.deco img { width: 100%; height: auto; display: block;
            filter: drop-shadow(0 3px 7px rgba(0,0,0,.16)); }
/* espalhados alternando os lados (sem sobrepor) */
.deco.dk1 { top: 7%;   right: 1%; width: 62px; transform: rotate(-4deg); }   /* parrot */
.deco.dk7 { top: 19%;  left: 0%;  width: 44px; transform: rotate(10deg); }   /* surfboards */
.deco.dk2 { top: 31%;  right: 0%; width: 56px; transform: rotate(6deg); }    /* sailboat */
.deco.dk8 { top: 43%;  left: 1%;  width: 50px; transform: rotate(-8deg); }   /* fish */
.deco.dk3 { top: 55%;  right: 0%; width: 82px; }                             /* whales */
.deco.dk6 { top: 67%;  left: 2%;  width: 54px; transform: rotate(8deg); }    /* turtle */
.deco.dk9 { top: 79%;  right: 1%; width: 50px; transform: rotate(6deg); }    /* drink */
.deco.dk4 { bottom: 8%; left: 1%; width: 58px; transform: rotate(-6deg); }   /* crab */
.deco.dk5 { bottom: 1%; right: 4%; width: 52px; }                            /* palmtree */

/* ═══ MENU DE AÇÕES DO POST (action sheet) ═══════════════ */
.sheet-overlay { position: fixed; inset: 0; z-index: 5500; background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; animation: fadeIn .15s ease; }
.sheet-overlay[hidden] { display: none; }   /* o atributo hidden precisa vencer o display:flex */
.sheet { width: 100%; max-width: 640px; margin: 0 auto;
  background: var(--bg-card); border-radius: 20px 20px 0 0; padding: 8px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(0,0,0,.25);
  animation: sheetUp .2s ease; }
[data-theme='dark'] .sheet { background: #0c2a54; }
.sheet-item { display: block; width: 100%; text-align: center; padding: 15px;
  border: none; background: none; color: var(--text); font-size: 16px; font-weight: 600;
  cursor: pointer; border-radius: 12px; font-family: inherit; text-decoration: none; }
.sheet-item:active { background: var(--bg-card-2); }
.sheet-item.danger { color: var(--c-red); }
.sheet-item.cancel { margin-top: 6px; background: var(--bg-card-2); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ═══ FOTO DO POST (estilo Instagram: borda a borda, proporção limitada) ═══ */
.ph-box { position: relative; display: block; width: 100%; overflow: hidden; background: var(--bg-card-2); user-select: none; }
/* Foto inteira (tela de detalhe): a altura vem da imagem, nada e recortado. */
.ph-box.ph-full { aspect-ratio: auto; }
.ph-box.ph-full .post-img { height: auto; object-fit: contain; }
/* elemento da identidade no canto da foto (discreto) */
.ph-sticker { position: absolute; right: 8px; bottom: 8px; width: 42px; height: 42px; pointer-events: none; z-index: 2; }
.ph-sticker img { width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.45)); }
/* coração do duplo-toque */
.heart-pop { position: absolute; top: 50%; left: 50%; width: 96px; height: 96px;
  transform: translate(-50%,-50%); color: #fff; pointer-events: none; z-index: 5;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.45)); animation: heartPop .8s ease forwards; }
.heart-pop svg { width: 100%; height: 100%; }
@keyframes heartPop {
  0%   { transform: translate(-50%,-50%) scale(0);   opacity: 0; }
  15%  { transform: translate(-50%,-50%) scale(1.2); opacity: 1; }
  30%  { transform: translate(-50%,-50%) scale(.92); }
  45%  { transform: translate(-50%,-50%) scale(1); }
  75%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1);   opacity: 0; }
}

/* autor do post clicável (vai pro perfil) */
.post-author { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; }

/* ═══ PERFIL (estilo Instagram) ═══════════════════════════ */
.pf-top { display: flex; align-items: center; gap: 22px; padding: 8px 2px 14px; }
.avatar.pf-av, .avatar-ph.pf-av, .avatar-el.pf-av { width: 86px; height: 86px; font-size: 34px; flex: none; }
.pf-stats { display: flex; flex: 1; justify-content: space-around; }
.pf-stats div { text-align: center; }
.pf-stats b { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 21px; display: block; line-height: 1; }
.pf-stats span { font-size: 12px; color: var(--text-muted); }
.pf-info { padding: 0 2px; }
.pf-name { font-size: 16px; }
.pf-unit { font-size: 13px; }
.pf-bio { margin: 6px 0 4px; font-size: 14px; line-height: 1.5; }
.pf-link { display: inline-block; font-size: 13px; font-weight: 600; color: var(--c-blue); }
[data-theme='dark'] .pf-link { color: #6db6ff; }
.pf-actions { display: flex; gap: 10px; margin: 14px 0 4px; }
.pf-actions .btn { flex: 1; padding: 10px; }
.pf-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
.pf-grid a { aspect-ratio: 1; display: block; overflow: hidden; background: var(--bg-card-2); border-radius: 4px; }
.pf-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ═══ ATIVIDADE (sino) ═══════════════════════════════════ */
.hdr-bell { position: relative; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.hdr-bell svg { width: 24px; height: 24px; }
.bell-dot { position: absolute; top: -1px; right: -2px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--c-red); border: 2px solid #0a55c2; }
.ativ-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px; }
.ativ-av { flex: none; }
.ativ-av .avatar, .ativ-av .avatar-ph, .ativ-av .avatar-el { width: 46px; height: 46px; font-size: 18px; }
.ativ-txt { flex: 1; min-width: 0; color: inherit; display: flex; flex-direction: column; gap: 2px; }
.ativ-txt span { font-size: 14px; line-height: 1.35; }
.ativ-time { color: var(--text-dim); font-size: 12px; }
.ativ-thumb { flex: none; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: var(--bg-card-2); }
.ativ-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ═══ MENÇÃO + REPOST ══════════════════════════════════════ */
/* chips de menção no feed/detalhe */
.mencao-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mencionado { display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px;
  background: rgba(4,75,217,.10); color: var(--ocean); border-radius: 999px;
  font-size: 13px; font-weight: 600; text-decoration: none; }
[data-theme='dark'] .mencionado { background: rgba(5,131,242,.18); }

/* atribuição de repost no cabeçalho do post */
.repost-de { font-size: 12px; color: var(--text-dim);
  display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.repost-de a { color: var(--ocean); font-weight: 600; text-decoration: none; }

/* botão de repost na barra de ações */
.repost-btn svg { color: var(--text-dim); }
.repost-btn.reposted svg { color: var(--ocean); }

/* mention picker em post_novo */
.mention-toggle { background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.mention-search { width: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text);
  font-size: 14px; margin-top: 8px; box-sizing: border-box; }
.mention-results { background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-top: 4px; max-height: 180px;
  overflow-y: auto; }
.mention-result { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  cursor: pointer; border-bottom: 1px solid var(--border); }
.mention-result:last-child { border-bottom: none; }
.mention-result:active { background: var(--bg-card-2); }
.mention-chips-edit { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-sel { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  background: var(--ocean); color: #fff; border-radius: 999px; font-size: 13px; font-weight: 600; }
.chip-sel button { background: none; border: none; color: #fff; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0; opacity: .8; }

/* toast global */
.toast-msg { position: fixed; bottom: 84px; left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: rgba(10,30,60,.92); color: #fff; padding: 10px 22px;
  border-radius: 999px; font-size: 14px; font-weight: 600;
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s; white-space: nowrap; }
.toast-msg.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══ CÉU DO CABEÇALHO (sol/pássaros · lua/estrelas) ════════ */
.topbar-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.topbar .hdr-logo, .topbar .ttl, .topbar .act, .topbar .back { position: relative; z-index: 2; }
/* sombra suave: mantém logo/ícones legíveis tanto no céu claro quanto no escuro */
.topbar .hdr-logo { filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.topbar .ttl, .topbar .back { text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.topbar .hdr-bell svg, .topbar .act svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.topbar .hdr-me .hdr-av { box-shadow: 0 0 0 2px rgba(255,255,255,.75); }
/* (não há mais estado .scrolled: o cabeçalho já é opaco com a arte) */
.topbar-wave { z-index: 1; }
.topbar-sky .bird, .topbar-sky .star { display: none; position: absolute; }
/* gaivota aparece de DIA e de NOITE (antes era só de dia) */
.topbar-sky .bird { display: block; }
/* sol e lua saíram do cabeçalho: a arte já tem o céu, eles duplicavam a ideia
   (e o botão de trocar o tema já é um sol/uma lua) */
[data-theme='dark'] .topbar-sky .star { display: block; }
.topbar-sky .bird { background: var(--gaivota-src) center / contain no-repeat; }
/* O GIF é BRANCO: sobre o céu claro da arte o contraste é 1.45 (invisível).
   No tema dia escurecemos por filtro — GIF não permite recolorir de outro jeito. */
[data-theme='light'] .topbar-sky .bird { filter: brightness(.30) saturate(.15) drop-shadow(0 1px 2px rgba(255,255,255,.35)); }
/* À noite a gaivota é branca num céu cheio de estrelas brancas: sem contorno
   escuro ela lê como estrela. O halo separa a silhueta do céu. */
[data-theme='dark']  .topbar-sky .bird { filter: drop-shadow(0 0 3px rgba(0,0,0,.8)) drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.topbar-sky .bird.b1 { top: 7px;  width: 30px; height: 22px; opacity: 1;   animation: flyAcross 18s linear infinite; }
.topbar-sky .bird.b2 { top: 25px; width: 22px; height: 16px; opacity: .9;  animation: flyAcross 25s linear infinite; animation-delay: -9s; }
.topbar-sky .bird.b3 { top: 3px;  width: 18px; height: 13px; opacity: .82; animation: flyAcross 14s linear infinite; animation-delay: -5s; }
@keyframes flyAcross {
    0%   { left: -12%; transform: translateY(0); }
    25%  { transform: translateY(-5px); }
    50%  { transform: translateY(3px); }
    75%  { transform: translateY(-4px); }
    100% { left: 112%; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .topbar-sky .bird { animation: none; }
    .topbar-sky .bird.b1 { left: 42%; } .topbar-sky .bird.b2 { left: 54%; } .topbar-sky .bird.b3 { left: 64%; }
}
.topbar-sky .star {
    width: 3px; height: 3px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 4px rgba(255,255,255,.9); animation: twinkle 3s ease-in-out infinite;
}
.topbar-sky .star.s1 { top: 11px; left: 30%; animation-delay: 0s; }
.topbar-sky .star.s2 { top: 27px; left: 38%; animation-delay: .6s; }
.topbar-sky .star.s3 { top: 9px;  left: 47%; animation-delay: 1.1s; }
.topbar-sky .star.s4 { top: 30px; left: 55%; animation-delay: 1.6s; }
.topbar-sky .star.s5 { top: 14px; left: 66%; animation-delay: .3s; }
.topbar-sky .star.s6 { top: 33px; left: 72%; animation-delay: .9s; }
.topbar-sky .star.s7 { top: 12px; left: 80%; animation-delay: 1.3s; }
.topbar-sky .star.s8 { top: 28px; left: 84%; animation-delay: .5s; }
@keyframes twinkle  { 0%,100% { opacity: .95; } 50% { opacity: .2; } }

/* materiais p/ download no card do evento/mesa */
.ev-mats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mat-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 6px 11px; border-radius: 999px; background: var(--bg-card-2); color: var(--ocean,#0583f2);
  border: 1px solid var(--border); text-decoration: none; max-width: 100%; }
.mat-chip:active { background: var(--border); }

/* ═══ BANNER DE PATROCÍNIO (Ouro fixo / Prata intercalado) ══ */
.ban-ouro, .ban-prata {
    display: flex; align-items: center; gap: 10px; padding: 12px 13px; margin-bottom: 12px;
    border-radius: 14px; text-decoration: none; position: relative;
}
.ban-ouro { background: linear-gradient(120deg,#f2b705,#f29f05); color: #4a3400;
    box-shadow: 0 6px 16px -6px rgba(242,159,5,.5); }
.ban-prata { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid #c7d0d8; }
.ban-logo { width: 38px; height: 38px; border-radius: 10px; flex: none; object-fit: cover;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.ban-ouro .ban-logo-ph { background: rgba(255,255,255,.55); color: #4a3400; }
.ban-prata .ban-logo-ph { background: var(--bg-card-2); color: var(--text-muted); }
.ban-tx { flex: 1; min-width: 0; }
.ban-tx b { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; }
.ban-tx span { display: block; font-size: 11px; line-height: 1.3; margin-top: 1px; }
.ban-ouro .ban-tx span { opacity: .82; }
.ban-prata .ban-tx span { color: var(--text-muted); }
.ban-cta { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ban-cta svg { width: 16px; height: 16px; }
.ban-ouro .ban-cta { background: rgba(255,255,255,.55); }
.ban-prata .ban-cta { background: var(--bg-card-2); color: #3a4650; }
.tier-chip { position: absolute; top: -7px; left: 12px; font-size: 8.5px; font-weight: 700;
    letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
.tier-chip.ouro { background: #7a4e00; color: #ffe9ad; }
.tier-chip.prata { background: #48545e; color: #eef2f5; }

/* ═══ CARD NATIVO DO OURO (post/evento/linha, com selo de anúncio) ═══ */
.ouro-native { border: 1px solid rgba(242,159,5,.45) !important; }
.ads-tag { font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    background: #f2b705; color: #4a3400; padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
.ouro-cta { display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 10px 12px 12px; padding: 10px; border-radius: 10px; font-size: 13px; font-weight: 700;
    text-decoration: none; background: linear-gradient(120deg,#f2b705,#f29f05); color: #4a3400; }
.ouro-cta svg { width: 15px; height: 15px; }
.ouro-cta-sm { margin: 0; flex: none; padding: 7px 12px; font-size: 12px; }
.ev-ouro-logo { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; display: flex;
    align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.ev-ouro-logo.avatar-ph { background: var(--bg-card-2); color: var(--text-muted); }
.rk-item.ouro-native .ouro-cta-sm { margin-left: auto; }
.ban-cta { font-size: 18px; font-weight: 700; line-height: 1; }
.ban-ouro .ban-cta, .ban-prata .ban-cta { color: inherit; }
a.ouro-link, a.ouro-link:hover { text-decoration: none; color: inherit; }
a.rk-item.ouro-link { display: flex; }

/* ═══ PERFIL PÚBLICO DO PATROCINADOR ═══ */
.pp-head { position: relative; text-align: center; padding: 22px 16px 18px; margin-bottom: 12px; }
.pp-tier { position: absolute; top: 12px; right: 12px; left: auto; }
.pp-logo { width: 84px; height: 84px; border-radius: 20px; object-fit: cover; margin: 0 auto 12px;
    display: block; box-shadow: 0 6px 18px -6px rgba(0,0,0,.35); }
.pp-logo-ph { display: flex; align-items: center; justify-content: center; font-weight: 800;
    font-size: 34px; color: var(--text-muted); background: var(--bg-card-2); }
.pp-nome { font-family: "Fredoka", sans-serif; font-size: 22px; margin: 0; line-height: 1.2; }
.pp-tagline { color: var(--text-muted); font-size: 14px; margin: 6px 0 0; }
.pp-acoes { margin-top: 16px; }
.pp-btn-wa { max-width: 320px; margin: 0 auto; }
.pp-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.pp-link { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ocean);
    background: var(--bg-card-2); border: 1px solid var(--border); padding: 7px 14px; border-radius: 999px; }
.pp-sobre { padding: 16px; margin-bottom: 12px; }
.pp-sobre p { margin: 0; font-size: 14px; line-height: 1.5; }
.pp-sec { font-size: 15px; font-family: "Fredoka", sans-serif; margin: 0 0 8px; }
.pp-sec-g { margin: 16px 2px 10px; }
.pp-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pp-foto { margin: 0; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; overflow: hidden; position: relative; }
.pp-foto img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }
.pp-foto figcaption { font-size: 12px; padding: 8px 10px; color: var(--text-muted); }
.pp-ads { text-align: center; font-size: 11px; color: var(--text-muted); margin: 18px 0 4px; }

/* ═══ PORTAL DO PATROCINADOR ═══ */
.portal-bar { display: flex; align-items: center; gap: 10px;
    background: linear-gradient(120deg,#7a4e00,#b8860b); }
.portal-tag { color: #ffe9ad; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 15px; }
.portal-out { color: #fff; font-size: 13px; font-weight: 600; text-decoration: none;
    background: rgba(255,255,255,.18); padding: 6px 14px; border-radius: 999px; position: relative; z-index: 2; }
.pt-card { padding: 16px; margin-bottom: 12px; }
.pt-id { display: flex; align-items: center; gap: 12px; }
.pt-logo { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: none; }
.pt-logo-ph { display: flex; align-items: center; justify-content: center; font-weight: 800;
    font-size: 22px; color: var(--text-muted); background: var(--bg-card-2); }
.pt-id-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pt-id-tx b { font-size: 16px; }
.pt-id-tx .tier-chip { position: static; align-self: flex-start; }
.pt-acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pt-acts .btn { width: auto; flex: 1; min-width: 130px; }
.pt-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; }
.pt-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    padding: 14px 6px; text-align: center; }
.pt-stat b { display: block; font-size: 22px; font-family: "Fredoka", sans-serif; color: var(--ocean); }
.pt-stat span { font-size: 11px; color: var(--text-muted); }
.pt-upload { padding: 16px; margin-bottom: 12px; }
.pt-foto form { position: absolute; top: 6px; right: 6px; margin: 0; }
.pt-del { background: rgba(0,0,0,.55); border: none; color: #fff; width: 32px; height: 32px;
    border-radius: 50%; cursor: pointer; font-size: 14px; }

/* ═══ COTA DIAMANTE + VÍDEO + MARCAÇÃO PORTFÓLIO/DIVULGAÇÃO ═══ */
.tier-chip.diamante { background: #0a6e8c; color: #dff6ff; }
.nivel-tag.nivel-diamante { background: linear-gradient(120deg,#7ee8ff,#b9f2ff); color: #06485c; }
.diamante-native { border: 1px solid rgba(10,110,140,.5) !important;
    box-shadow: 0 6px 18px -8px rgba(10,110,140,.45); }
.ads-diamante { background: linear-gradient(120deg,#22b8dd,#8fe9ff); color: #06485c; }
.ph-box video.post-img { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.pp-foto.is-video video, .pt-foto.is-video video { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; background: #000; }
/* marcação no portal */
.pt-radio { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; margin-bottom: 6px;
    border: 1px solid var(--border); border-radius: 10px; font-size: 13px; cursor: pointer; }
.pt-radio input { margin-top: 3px; flex: none; }
.pt-radio b { font-weight: 700; }
.pt-badge { position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; z-index: 2; }
.pt-badge.b-div { background: #f2b705; color: #4a3400; }
.pt-badge.b-port { background: #48545e; color: #eef2f5; }
.pt-foto-acts { display: flex; gap: 6px; padding: 8px; }
.pt-mini { flex: 1; font-size: 11px; font-weight: 600; padding: 6px 8px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg-card-2); color: var(--text); cursor: pointer; }
.pt-mini.danger { flex: none; border-color: rgba(242,51,34,.4); }

/* selo de multi-unidade */
.multi-tag { font-size: 11px; background: var(--ocean,#0583f2); color: #fff; padding: 2px 8px;
  border-radius: 999px; vertical-align: middle; font-weight: 700; white-space: nowrap; }

/* ═══ ANEL + MEDALHA DE RANKING NO AVATAR (top 3) ══════════ */
.avatar.rk1, .avatar-ph.rk1, .avatar-el.rk1 { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px #f2b705; }  /* ouro */
.avatar.rk2, .avatar-ph.rk2, .avatar-el.rk2 { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px #c2ccd6; }  /* prata */
.avatar.rk3, .avatar-ph.rk3, .avatar-el.rk3 { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px #d98a43; }  /* bronze */
.av-wrap { position: relative; display: inline-flex; flex: none; vertical-align: middle; line-height: 0; }
.av-medal { position: absolute; top: -8px; right: -8px; font-size: 17px; line-height: 1; z-index: 4;
  pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
/* medalha maior nos avatares grandes (perfil / meu QR) */
.av-wrap:has(.pf-av) .av-medal, .av-wrap:has(.big) .av-medal { font-size: 26px; top: -10px; right: -10px; }

/* ═══ AVALIAÇÃO POR ESTRELAS (agenda + mesas) ═══════════════ */
.ev-rate { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.ev-avg { font-size: 13px; font-weight: 700; margin-right: 8px; }
.ev-stars { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.ev-lbl { font-size: 13px; color: var(--text-muted); margin-right: 6px; }
.ev-stars .star { background: none; border: none; cursor: pointer; font-size: 24px; line-height: 1;
  color: var(--border-strong,#bbb); padding: 0 1px; }
.ev-stars .star.on { color: #f2b705; }
.ev-cbox { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.ev-cbox input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-input); color: var(--text); font-size: 14px; }

/* ═══════════════════════════════════════════════════════════
   DESKTOP (≥900px): o app vira uma COLUNA CENTRAL, como um
   painel de aplicativo, em vez de esticar de ponta a ponta.
   Nada aqui afeta celular/tablet (media query).
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  :root { --app-w: 520px; }

  /* fora da coluna: fundo escuro e sóbrio, pra coluna do app se destacar
     (tom claro NÃO funciona: fica igual ao degradê do céu e a coluna desaparece).
     O <html> TAMBÉM precisa da cor: ele tem background próprio (linha ~101), então
     o fundo do body não se propaga e, em página curta, sobrava uma faixa clara. */
  /* A cor de fora vai SÓ no <html>. O body fica TRANSPARENTE porque, na ordem de
     pintura, o fundo do body (fluxo normal) cobre pseudo-elementos de z-index
     negativo — com fundo opaco no body, o degradê da coluna (::after) sumia.
     O data-theme fica no próprio <html> → html[data-theme=...], não [data-theme=...] html. */
  html { background-color: #050f1c; }
  html[data-theme='light'] { background-color: #123c5c; }
  body { background-image: none; background-color: transparent; }

  /* a coluna do app: recebe o degradê da praia + sombra que a separa do fundo */
  body::after {
    content: ""; position: fixed; top: 0; bottom: 0; left: 50%;
    transform: translateX(-50%); width: var(--app-w); z-index: -2;
    background-image: var(--bg-grad); background-size: cover; background-position: center;
    box-shadow: 0 0 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14);
  }
  /* a ilustração de fundo fica só dentro da coluna do app */
  [data-theme='light'] body::before,
  [data-theme='dark'] body::before {
    left: 50%; right: auto; transform: translateX(-50%); width: var(--app-w);
  }

  /* cabeçalho e conteúdo acompanham a largura da coluna */
  .topbar { max-width: var(--app-w); margin-left: auto; margin-right: auto;
    background-size: var(--app-w) 100vh; }   /* acompanha a coluna, não a tela toda */
  main { max-width: var(--app-w); margin-left: auto; margin-right: auto; }
  .page, .page-tight, .flashes { max-width: 100%; }

  /* barra de navegação centralizada na coluna (era left:0/right:0) */
  .tabbar {
    left: 50%; right: auto; transform: translateX(-50%);
    width: var(--app-w); max-width: var(--app-w);
    border-top-left-radius: 16px; border-top-right-radius: 16px;
  }

  /* o + de nova publicação acompanha a coluna, não a tela */
  /* 76px = largura do FAB (58) + o afastamento de 18px da borda */
  .fab { left: 50%; right: auto; margin-left: calc(var(--app-w) / 2 - 76px); }

  /* overlays de tela cheia (sheet, câmera, scanner) seguem centralizados */
  .sheet-overlay .sheet { max-width: var(--app-w); margin-left: auto; margin-right: auto; }
}

/* ═══ AGENDA EM ABAS POR DIA (Dia 11 · Dia 12 palestras · Dia 12 mesa redonda …) ═══ */
.ag-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; }
.ag-tabs::-webkit-scrollbar { display: none; }
.ag-tab { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 96px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-muted); font-family: inherit; cursor: pointer; line-height: 1.15;
    transition: background .15s, color .15s, border-color .15s; }
.ag-tab-dia { font-weight: 700; font-size: 14px; letter-spacing: .3px; }
.ag-tab-sub { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; opacity: .85; }
.ag-tab.on { background: var(--ocean, #0583f2); color: #fff; border-color: transparent;
    box-shadow: 0 6px 16px -8px rgba(5,131,242,.7); }
.ag-pane[hidden] { display: none; }

/* lugares da mesa redonda */
.m-vagas { display: inline-block; font-size: 12px; font-weight: 700; color: #02733e;
    background: rgba(2,115,62,.12); padding: 2px 9px; border-radius: 999px; margin-top: 4px; }
.m-vagas.cheia { color: #b3261e; background: rgba(242,51,34,.12); }
[data-theme='dark'] .m-vagas { color: #5fd39b; }
.mesa-card .m-btn:disabled { opacity: .55; cursor: not-allowed; }

/* lembrete "avalie a palestra" (feed + agenda) */
.lembrete { display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg,#fff6df,#fdeec2);
    border: 1px solid #f2c94c; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
[data-theme='dark'] .lembrete { background: rgba(242,183,5,.16); border-color: rgba(242,183,5,.4); }
.lembrete .lb-ico { font-size: 26px; flex: none; }
.lembrete .lb-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lembrete .lb-tx b { font-size: 14px; line-height: 1.3; }
.lembrete .lb-tx span { font-size: 12px; color: var(--text-muted); }
.lembrete .btn { width: auto; flex: none; }

/* seguir fornecedor (perfil do patrocinador) */
.pp-follow { font-family: inherit; cursor: pointer; font-size: 13px; }
.pp-follow.on { background: var(--ocean, #0583f2); color: #fff; border-color: transparent; }
.pt-stats { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); }