/* ===== Central de Dados — design system ===== */
:root {
  --ink:#1A1512; --ink-soft:#4A4038; --ink-faint:#706456;
  --paper:#F3EEE7; --surface:#FBF9F5; --surface-2:#EFE9E0; --line:#E2D9CC;
  --brass:#A9772A; --brass-soft:#C79A4E;
  --emerald:#2E7D5B; --emerald-ink:#1F5B41; --emerald-tint:#E4F0EA;
  --rose:#C0492F; --rose-tint:#F6E4DE;
  --amber-tint:#F5EBD6;
  --shadow:26px 40px 80px -40px rgba(26,21,18,.45);
  --shadow-soft:0 2px 10px -4px rgba(26,21,18,.25);
  --radius:18px;
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --font-ui:-apple-system,"SF Pro Text",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#F2EBE1; --ink-soft:#C4B8A8; --ink-faint:#8B7F70;
    --paper:#171310; --surface:#211B16; --surface-2:#2A231C; --line:#382E25;
    --brass:#D9A441; --brass-soft:#B5872F;
    --emerald:#4CB98A; --emerald-ink:#6FD0A5; --emerald-tint:#17362A;
    --rose:#E27A5F; --rose-tint:#3A211A; --amber-tint:#302612;
    --shadow:26px 40px 90px -40px rgba(0,0,0,.7); --shadow-soft:0 2px 12px -4px rgba(0,0,0,.5);
  }
}
:root[data-theme="light"]{--ink:#1A1512;--ink-soft:#4A4038;--ink-faint:#706456;--paper:#F3EEE7;--surface:#FBF9F5;--surface-2:#EFE9E0;--line:#E2D9CC;--brass:#A9772A;--brass-soft:#C79A4E;--emerald:#2E7D5B;--emerald-ink:#1F5B41;--emerald-tint:#E4F0EA;--rose:#C0492F;--rose-tint:#F6E4DE;--amber-tint:#F5EBD6;--shadow:26px 40px 80px -40px rgba(26,21,18,.45);--shadow-soft:0 2px 10px -4px rgba(26,21,18,.25);}
:root[data-theme="dark"]{--ink:#F2EBE1;--ink-soft:#C4B8A8;--ink-faint:#8B7F70;--paper:#171310;--surface:#211B16;--surface-2:#2A231C;--line:#382E25;--brass:#D9A441;--brass-soft:#B5872F;--emerald:#4CB98A;--emerald-ink:#6FD0A5;--emerald-tint:#17362A;--rose:#E27A5F;--rose-tint:#3A211A;--amber-tint:#302612;--shadow:26px 40px 90px -40px rgba(0,0,0,.7);--shadow-soft:0 2px 12px -4px rgba(0,0,0,.5);}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; padding:0; }
body { background:var(--paper); color:var(--ink); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; line-height:1.5; }
a { color:inherit; }

/* ===== puxar para atualizar =====
   Fica atrás do conteúdo e é revelado pelo próprio dedo. Só entra em cena no
   toque: no desktop o mouse não puxa nada. */
.ptr { position:fixed; top:0; left:0; right:0; z-index:10; pointer-events:none;
  height:56px; display:grid; place-items:center; opacity:0;
  transform:translateY(-56px); }
.ptr-seta { width:26px; height:26px; border-radius:50%; display:block;
  border:2px solid color-mix(in srgb, var(--brass) 30%, transparent);
  border-top-color:var(--brass); transform:rotate(0deg); transition:transform .18s ease; }
.ptr.pronto .ptr-seta { transform:rotate(180deg); }
.ptr.girando .ptr-seta { animation:ptr-girar .7s linear infinite; }
@keyframes ptr-girar { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .ptr.girando .ptr-seta{ animation:none; } }

/* ===== topbar ===== */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,44px); border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 84%, transparent); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:11px; min-width:0; flex:0 1 auto; }
.tabs { flex:0 0 auto; }
.top-right { flex:0 0 auto; }
.cs-name-txt { overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.brand-mark { width:34px; height:34px; border-radius:10px; flex:none;
  background:linear-gradient(145deg,var(--brass),var(--brass-soft)); display:grid; place-items:center;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:18px; box-shadow:var(--shadow-soft); }
.voltar { display:grid; place-items:center; flex:none; width:34px; height:34px; margin-left:-6px;
  border-radius:50%; color:var(--ink-soft); text-decoration:none; }
.voltar:hover { background:var(--surface-2); color:var(--ink); }
.voltar:active { background:var(--surface-2); transform:scale(.94); }
/* no celular a barra é apertada: o voltar entra no lugar do selo da marca */
@media (max-width:720px){ .topbar.com-voltar .brand-mark { display:none; } }
.brand-name { font-family:var(--font-display); font-size:18px; line-height:1.1; white-space:nowrap; }
.brand-sub { font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; }
@media (max-width:1320px){ .brand-name,.brand-sub{ display:none; } }

.client-switch { position:relative; }
.cs-btn { display:inline-flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:4px 10px 4px 4px; cursor:pointer;
  color:var(--ink); font-family:var(--font-ui); font-size:13.5px; font-weight:600; white-space:nowrap; }
.logout { white-space:nowrap; }
.push-btn { display:inline-flex; align-items:center; gap:5px; color:var(--brass); border-color:color-mix(in srgb, var(--brass) 35%, var(--line)); }
.push-btn:hover { background:color-mix(in srgb, var(--brass) 10%, transparent); }
.cs-btn:hover { border-color:var(--brass-soft); }
.avatar-chip { width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:11px; font-family:var(--font-display);
  background:radial-gradient(circle at 32% 28%,#E7C68B,#A9772A 62%,#6E4A16); }
.cs-menu { position:absolute; top:calc(100% + 8px); left:0; z-index:40; width:236px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:6px; display:none; flex-direction:column; gap:2px; }
.cs-menu.open { display:flex; }
.cs-menu .lbl { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); padding:8px 10px 4px; font-weight:600; }
.cs-item { display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; cursor:pointer;
  text-align:left; padding:8px 10px; border-radius:9px; color:var(--ink); font-family:var(--font-ui); font-size:13.5px; font-weight:500; text-decoration:none; }
.cs-item:hover { background:var(--surface-2); }
.cs-item.active { background:color-mix(in srgb,var(--brass) 12%, var(--surface)); }
.cs-item .mini { width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-size:10px; font-weight:700; font-family:var(--font-display); }
.cs-item .count { margin-left:auto; font-size:11.5px; color:var(--ink-faint); }

.tabs { display:flex; gap:3px; }
.tab { font-size:13px; font-weight:600; color:var(--ink-faint); padding:7px 12px; border-radius:9px; white-space:nowrap; text-decoration:none; }
.tab:hover { color:var(--ink-soft); }
.tab.active { color:var(--brass); background:color-mix(in srgb,var(--brass) 12%, transparent); }
@media (max-width:720px){ .tabs{ gap:0; } .tab{ padding:7px 9px; font-size:12.5px; } }
@media (max-width:440px){ .tab-perf{ display:none; } }

.top-right { display:flex; align-items:center; gap:10px; }
.who-mini { font-size:12.5px; color:var(--ink-faint); }
@media (max-width:600px){ .who-mini{ display:none; } }
.logout { font-size:12.5px; color:var(--ink-soft); text-decoration:none; border:1px solid var(--line); padding:5px 11px; border-radius:999px; }
.logout:hover { background:var(--surface-2); }

/* ===== generic ===== */
.wrap { max-width:1080px; margin:0 auto; padding:clamp(18px,4vw,40px) clamp(16px,4vw,44px) 64px; }
/* o calendário aproveita a largura da tela (estilo Google Calendar) em vez de travar em 1080 */
.wrap-calendario { max-width:1360px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.page-head h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(24px,3.4vw,31px); margin:0; letter-spacing:.2px; }
.page-head .kicker { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); font-weight:600; }
.subhead { font-size:14px; color:var(--ink-soft); margin:5px 0 0; max-width:56ch; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--ink-soft);
  background:var(--surface-2); border:1px solid var(--line); padding:5px 11px; border-radius:999px; }
.chip.brass { color:var(--brass); background:color-mix(in srgb,var(--brass) 13%, var(--surface)); border-color:color-mix(in srgb,var(--brass) 30%, var(--line)); font-weight:600; }
.chip.ok { color:var(--emerald); background:var(--emerald-tint); border-color:color-mix(in srgb,var(--emerald) 40%, var(--line)); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-ui);
  font-size:14.5px; font-weight:600; padding:11px 18px; border-radius:12px; cursor:pointer; border:1px solid transparent; text-decoration:none; }
.btn.primary { background:var(--emerald); color:#fff; }
.btn.primary:hover { filter:brightness(1.06); }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover { background:var(--surface-2); }
.btn.danger { background:var(--rose); color:#fff; }
.btn.danger:hover { filter:brightness(1.06); }
.btn.danger-outline { background:transparent; color:var(--rose); border-color:color-mix(in srgb, var(--rose) 40%, var(--line)); }
.btn.danger-outline:hover { background:var(--rose-tint); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid var(--brass); outline-offset:2px; }

/* ===== login ===== */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:22px; box-shadow:var(--shadow); padding:34px 30px; }
.login-card .brand-mark { width:44px; height:44px; font-size:22px; border-radius:13px; margin-bottom:18px; }
.login-card h1 { font-family:var(--font-display); font-weight:600; font-size:24px; margin:0 0 4px; }
.login-card p.sub { color:var(--ink-faint); font-size:13.5px; margin:0 0 22px; }
.field-lbl { display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px; }
.input { width:100%; font-family:var(--font-ui); font-size:15px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:11px; padding:12px 14px; margin-bottom:16px; }
.input::placeholder { color:var(--ink-faint); }
.login-card .btn.primary { width:100%; padding:13px; }
.err { background:var(--rose-tint); color:var(--rose); border:1px solid color-mix(in srgb,var(--rose) 30%, var(--line));
  font-size:13px; padding:10px 12px; border-radius:10px; margin-bottom:16px; }

/* ===== calendar ===== */
.cal-bar { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.cal-nav { display:flex; align-items:center; gap:6px; }
.cal-nav a { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; color:var(--ink-soft); text-decoration:none; }
.cal-nav a:hover { background:var(--surface-2); }
.cal-month { font-family:var(--font-display); font-size:20px; font-weight:600; text-transform:capitalize; min-width:180px; }
.legend { display:flex; gap:14px; margin-left:auto; font-size:12px; color:var(--ink-faint); flex-wrap:wrap; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
/* filtros de visualização (a legenda virou caixas seletoras por tipo) */
.cal-filtros { display:flex; gap:14px; margin-left:auto; flex-wrap:wrap; align-items:center; }
.cal-filtro { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); cursor:pointer; user-select:none; }
.cal-filtro input { accent-color:var(--brass); cursor:pointer; margin:0; }
.cal-grid.hide-pub .ev.pub, .cal-grid.hide-com .ev.com, .cal-grid.hide-reu .ev.reu, .cal-grid.hide-out .ev.out { display:none !important; }
.ldot { width:9px; height:9px; border-radius:3px; display:inline-block; }
.ldot.pub { background:var(--brass); } .ldot.com { background:var(--emerald); } .ldot.reu { background:#7C6BB0; } .ldot.out { background:#64748B; }

.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.cal-dow { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); text-align:center; font-weight:600; padding-bottom:2px; }
.cal-cell { background:var(--surface); border:1px solid var(--line); border-radius:12px; min-height:132px;
  padding:9px; display:flex; flex-direction:column; gap:5px; overflow:hidden; position:relative; }
.cal-cell[data-date] { cursor:pointer; }
.cal-cell.pad { background:transparent; border-color:transparent; }
.cal-cell.today { border-color:var(--brass); box-shadow:inset 0 0 0 1px var(--brass); }
.cal-daynum { font-size:12.5px; font-weight:600; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
/* no desktop o grid já tem o cabeçalho Dom/Seg/...: só o número basta */
.cd-dow, .cd-dm { display:none; }
.cal-cell.today .cal-daynum { color:var(--brass); }
.ev { font-size:12.5px; line-height:1.3; padding:5px 8px; border-radius:7px; color:#fff; text-decoration:none; display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border:0; width:100%; text-align:left; font-family:inherit; cursor:pointer; }
button.ev:hover { filter:brightness(1.07); }
.ev.more { cursor:pointer; }
.ev.pub { background:linear-gradient(180deg,var(--brass),var(--brass-soft)); }
.ev.com { background:var(--emerald); }
.ev.reu { background:#7C6BB0; }
.ev.out { background:#64748B; }
.ev.more { background:var(--surface-2); color:var(--ink-soft); }
.ev-extra { display:none; }
/* rascunho/planejado no calendário: publicação planejada, mídia ainda não pronta */
.ev-draft { opacity:.6; font-style:italic; }
.day-ev-tag { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:5px; padding:1px 6px; flex:none; }

/* botão + que surge ao passar o mouse no dia (desktop) */
.cell-add { position:absolute; top:6px; right:6px; width:22px; height:22px; padding:0; border:0;
  border-radius:6px; background:var(--brass); color:#fff; font-size:16px; line-height:1; z-index:2;
  display:none; align-items:center; justify-content:center; cursor:pointer; }
.cal-cell:hover .cell-add { display:flex; }
.cell-add:hover { filter:brightness(1.08); }

/* modal "agenda do dia": todos os eventos do dia */
.day-events { display:flex; flex-direction:column; gap:8px; margin-top:8px; max-height:56vh; overflow-y:auto; }
.day-ev { display:flex; align-items:center; gap:10px; width:100%; text-align:left; font-family:inherit;
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  cursor:pointer; font-size:14px; color:var(--ink); }
.day-ev:hover { border-color:var(--brass); }
.day-ev .ldot { flex:none; }
.day-ev-t { flex:1; }
.day-ev-time { color:var(--ink-soft); font-size:12.5px; font-variant-numeric:tabular-nums; }
.day-empty { color:var(--ink-soft); font-style:italic; margin:8px 0 4px; }
.modal-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line); }
/* editar data/horário da publicação (prévia e calendário) */
.reag-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.ev-reag { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
/* horário na frente do título do evento (estilo Google Calendar) */
.ev-hora { font-weight:700; font-variant-numeric:tabular-nums; }
/* cabeçalho do calendário: grupo de botões (Agendas + Novo evento) */
.head-actions { display:flex; gap:10px; align-items:center; }
.sync-flash-bar { background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:8px 14px; margin:0 0 16px; font-size:13px; font-weight:600; color:var(--emerald); }
.sync-flash-bar.aviso { color:var(--brass); }
/* modal "Agendas": importar / sincronizar / exportar */
.agendas-modal { max-width:560px; }
.agendas-sec { margin-top:18px; }
.agendas-sec:first-of-type { margin-top:6px; }
.agendas-sec h3 { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint);
  font-weight:700; margin:0 0 8px; }
.feed-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.feed-row .ics-url { flex:1; min-width:0; word-break:break-all; }

/* mobile: agenda list instead of tiny grid */
@media (max-width:640px){
  .cal-grid { grid-template-columns:1fr; gap:6px; }
  .cal-dow { display:none; }
  .cal-cell { flex-direction:row; align-items:flex-start; min-height:0; gap:10px; }
  .cal-cell.pad { display:none; }
  .cal-cell.empty-day { display:none; }
  /* Virou lista: o cabeçalho dos dias da semana sumiu com o grid, então a data
     precisa se explicar sozinha — "Sáb / 21/12" em vez de um "21" solto. */
  .cal-daynum { min-width:52px; padding-top:1px; display:flex; flex-direction:column; line-height:1.25; }
  .cd-num { display:none; }
  .cd-dow { display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em;
    text-transform:uppercase; color:var(--ink-faint); }
  .cd-dm { display:block; font-size:14px; font-weight:600; }
  .cal-cell.today .cd-dow { color:var(--brass); }
  .cal-cell .evs { display:flex; flex-direction:column; gap:5px; flex:1; }
  .ev { white-space:normal; }
  /* na lista do celular cabe tudo: mostra todos e dispensa o "+N mais" e o botão + de hover */
  .ev-extra { display:block; }
  .ev.more { display:none; }
  .cell-add { display:none !important; }
}

/* ===== approvals list ===== */
.appr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.appr-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-soft); text-decoration:none; color:inherit; transition:transform .12s ease; }
.appr-card:hover { transform:translateY(-3px); }
.appr-thumb { aspect-ratio:16/10; position:relative; color:#fff; }
.appr-thumb .fmt { position:absolute; top:10px; left:10px; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.3); padding:3px 8px; border-radius:999px; backdrop-filter:blur(3px); }
.appr-thumb .st { position:absolute; bottom:10px; left:10px; font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; }
.st-wait { background:var(--amber-tint); color:var(--brass); }
.st-approved { background:var(--emerald-tint); color:var(--emerald); }
.st-published { background:var(--surface-2); color:var(--ink-soft); }
.appr-body { padding:12px 14px; display:flex; flex-direction:column; gap:5px; }
.appr-body h3 { font-family:var(--font-display); font-weight:600; font-size:16px; margin:0; }
.appr-body .meta { font-size:12.5px; color:var(--ink-faint); }
.empty-state { text-align:center; color:var(--ink-faint); padding:60px 20px; }

/* ===== approval detail (phone preview) ===== */
.detail { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(24px,5vw,52px); align-items:start; }
@media (max-width:820px){ .detail{ grid-template-columns:1fr; justify-items:center; } }
.device-col { position:sticky; top:88px; }
@media (max-width:820px){ .device-col{ position:static; } }
.phone { width:320px; max-width:84vw; aspect-ratio:320/660; background:#000; border-radius:44px; padding:11px;
  box-shadow:var(--shadow),0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 2px #26201a; position:relative; }
.screen { position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden; background:#0c0a09; color:#fff; display:flex; flex-direction:column; }
.island { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:92px; height:24px; background:#000; border-radius:14px; z-index:12; }
.reel { position:absolute; inset:0; }
.reel::after { content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 50% 42%, transparent 40%, rgba(0,0,0,.55) 100%); }
.reel-badge { position:absolute; top:44px; right:14px; z-index:4; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.82); background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.28); padding:4px 9px; border-radius:999px; backdrop-filter:blur(3px); }
.play { position:absolute; top:42%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; z-index:4;
  background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.5); display:grid; place-items:center; }
.frame-tag { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:4; font-size:10px; color:rgba(255,255,255,.42); }
.ig-top { position:relative; z-index:5; display:flex; align-items:center; gap:9px; padding:40px 12px 0; }
.ig-av { width:32px; height:32px; border-radius:50%; flex:none; box-shadow:0 0 0 1.5px rgba(255,255,255,.85);
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px; font-family:var(--font-display);
  background:radial-gradient(circle at 32% 28%,#E7C68B,#A9772A 60%,#5c3d12); }
.ig-handle { font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:4px; }
.ig-bottom { position:relative; z-index:5; margin-top:auto; padding:0 14px 16px; display:flex; flex-direction:column; gap:8px; }
.ig-cap { font-size:12.5px; line-height:1.42; color:#f3f3f3; }
.ig-cap b { font-weight:600; }
.ig-audio { display:flex; align-items:center; gap:7px; font-size:12px; color:#fff; }
.device-caption { text-align:center; margin:14px auto 0; max-width:300px; font-size:12.5px; color:var(--ink-faint); }
.device-caption strong { color:var(--brass); font-weight:600; }

.panel { width:100%; max-width:560px; display:flex; flex-direction:column; gap:18px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft); overflow:hidden; }
.field { padding:15px 18px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:7px; }
.field:last-child { border-bottom:0; }
.field-label { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.field-value { font-size:14.5px; color:var(--ink); line-height:1.5; }
.field-value.muted { color:var(--ink-soft); }
.actions { display:flex; flex-direction:column; gap:12px; }
.btn-row { display:flex; gap:12px; flex-wrap:wrap; }
.btn-row .btn { flex:1 1 auto; min-width:150px; }
.comment { width:100%; resize:vertical; min-height:46px; max-height:160px; font-family:var(--font-ui); font-size:14px;
  color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.reassure { display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--ink-faint); line-height:1.45; }
.reassure svg { flex:none; margin-top:1px; color:var(--brass); }

/* toast */
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--paper);
  padding:12px 18px; border-radius:12px; font-size:13.5px; font-weight:500; display:flex; align-items:center; gap:9px; z-index:60;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== materiais: envio ===== */
.up-zone { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--surface); border:2px dashed var(--line); border-radius:16px; padding:20px 22px; cursor:pointer;
  transition:border-color .2s ease, background .2s ease; }
.up-zone:hover, .up-zone.over { border-color:var(--brass); background:color-mix(in srgb, var(--brass) 6%, var(--surface)); }
.up-ic { width:52px; height:52px; border-radius:14px; flex:none; display:grid; place-items:center;
  background:color-mix(in srgb, var(--brass) 14%, var(--surface)); color:var(--brass); }
.up-txt { display:flex; flex-direction:column; gap:3px; flex:1; min-width:180px; }
.up-txt b { font-size:15px; }
.up-txt span { font-size:12.5px; color:var(--ink-faint); }
.up-list { display:flex; flex-direction:column; gap:8px; margin-top:14px; max-width:520px; }
.up-item { display:flex; align-items:center; gap:10px; font-size:12.5px; }
.up-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft); }
.up-bar { width:110px; height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; flex:none; }
.up-bar i { display:block; height:100%; width:0; background:var(--brass); transition:width .2s ease; }
.up-pct { width:46px; text-align:right; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.up-item.ok .up-bar i { background:var(--emerald); }
.up-item.ok .up-pct { color:var(--emerald); }
.up-item.fail .up-bar i { background:var(--rose); width:100% !important; }
.up-item.fail .up-pct { color:var(--rose); }

/* ===== materiais: galeria ===== */
.mat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:16px; margin-top:22px; }
@media (max-width:520px){ .mat-grid { grid-template-columns:repeat(2, 1fr); gap:12px; } }
.mat { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow-soft); }
.mat-thumb { position:relative; aspect-ratio:1/1; border:0; padding:0; cursor:pointer; background:#0c0a09; display:block; width:100%; }
.mat-thumb img, .mat-thumb video { width:100%; height:100%; object-fit:cover; display:block; }
.mat-play { position:absolute; inset:0; display:grid; place-items:center; }
.mat-play svg { filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.mat-info { padding:9px 11px 6px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.mat-name { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mat-meta { font-size:11px; color:var(--ink-faint); }
.mat-note { font-size:11.5px; color:var(--ink-soft); font-style:italic; margin-top:2px; }
.mat-actions { display:flex; gap:6px; padding:0 11px 10px; margin-top:auto; }
.mat-btn { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--ink-soft);
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:5px 9px; cursor:pointer; text-decoration:none;
  font-family:var(--font-ui); }
.mat-btn:hover { background:var(--paper); color:var(--ink); }
.mat-btn.danger { color:var(--rose); }
.mat-btn.danger:hover { background:var(--rose-tint); }

/* seleção */
.mat { position:relative; }
.mat-check { position:absolute; top:8px; left:8px; z-index:3; display:grid; place-items:center;
  width:30px; height:30px; border-radius:9px; background:rgba(0,0,0,.35); backdrop-filter:blur(3px);
  cursor:pointer; transition:background .15s ease; }
.mat-check:hover { background:rgba(0,0,0,.5); }
.mat-check input { width:19px; height:19px; accent-color:var(--brass); cursor:pointer; margin:0; }
.mat.picked { outline:2px solid var(--brass); outline-offset:0; }
.mat.picked .mat-check { background:var(--brass); }
.sel-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:20px; }
.sel-all { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; }
.sel-all input { width:17px; height:17px; accent-color:var(--brass); cursor:pointer; }
.sel-row .hint-txt { margin:0; }

.sel-bar { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(14px); z-index:56;
  display:flex; align-items:center; gap:8px; background:var(--ink); color:var(--paper);
  padding:9px 10px 9px 16px; border-radius:14px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.sel-bar.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.sel-count { font-size:13.5px; font-weight:600; white-space:nowrap; margin-right:4px; font-variant-numeric:tabular-nums; }
.sel-act { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-ui); font-size:13px; font-weight:600;
  background:var(--paper); color:var(--ink); border:0; border-radius:9px; padding:7px 12px; cursor:pointer; }
.sel-act:hover { filter:brightness(.94); }
.sel-act.danger { background:var(--rose); color:#fff; }
.sel-act.ghost { background:transparent; color:var(--paper); border:1px solid color-mix(in srgb, var(--paper) 30%, transparent); }
.sel-act.ghost:hover { background:color-mix(in srgb, var(--paper) 12%, transparent); }
@media (max-width:720px){
  .sel-bar { left:12px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateY(14px); justify-content:center; }
  .sel-bar.show { transform:translateY(0); }
}

/* visualizador */
#lightbox { background:rgba(10,8,6,.9); flex-direction:column; gap:14px; }
.lb-stage { max-width:min(92vw, 1000px); max-height:76vh; display:grid; place-items:center; }
.lb-stage img, .lb-stage video { max-width:100%; max-height:76vh; border-radius:10px; display:block; }
.lb-close { position:fixed; top:16px; right:18px; background:rgba(255,255,255,.14); color:#fff; border:0;
  width:38px; height:38px; border-radius:50%; font-size:15px; cursor:pointer; }
.lb-close:hover { background:rgba(255,255,255,.24); }
.lb-dl { text-decoration:none; }

/* ===== painel do administrador ===== */
.admin-cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:clamp(20px, 4vw, 40px); align-items:start; }
.adm-h { font-family:var(--font-display); font-weight:600; font-size:17px; margin:0 0 10px; }
.admin-cols section > .card + .adm-h { margin-top:26px; }
.adm-row { display:flex; align-items:center; gap:11px; padding:11px 14px; border-bottom:1px solid var(--line); }
.adm-row:last-child { border-bottom:0; }
.adm-info { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.adm-info b { font-size:14px; }
.adm-meta { font-size:11.5px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; }
.adm-form { padding:4px 18px 18px; }

/* ===== histórico (timeline) ===== */
.hist-head { padding:14px 18px 2px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.timeline { list-style:none; margin:0; padding:6px 18px 14px; display:flex; flex-direction:column; }
.tl-item { display:flex; gap:12px; padding:8px 0; position:relative; }
.tl-item:not(:last-child)::before { content:""; position:absolute; left:5px; top:20px; bottom:-8px; width:2px; background:var(--line); }
.tl-dot { width:12px; height:12px; border-radius:50%; flex:none; margin-top:4px; background:var(--ink-faint); box-shadow:0 0 0 3px var(--surface); position:relative; z-index:1; }
.tl-aprovado .tl-dot { background:var(--emerald); }
.tl-revisado .tl-dot { background:var(--rose); }
.tl-ajuste .tl-dot { background:var(--brass); }
.tl-body { font-size:13.5px; line-height:1.45; }
.tl-line b { font-weight:600; }
.tl-role { font-size:10.5px; color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:1px 7px; margin:0 3px; text-transform:uppercase; letter-spacing:.04em; }
.tl-note { font-size:13px; color:var(--ink-soft); font-style:italic; margin-top:3px; }
.tl-when { font-size:12px; color:var(--ink-faint); margin-top:2px; font-variant-numeric:tabular-nums; }

/* ===== formulário de nova publicação ===== */
.post-form { max-width:620px; display:flex; flex-direction:column; gap:16px; }
.post-form .card { padding:6px 20px 18px; }
.ff { display:flex; flex-direction:column; gap:6px; padding-top:14px; }
.ff-row { display:flex; gap:16px; padding-top:0; }
.ff-row .ff { flex:1; }
.post-form .input { margin:0; }
select.input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A7D71' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
textarea.input { resize:vertical; line-height:1.5; }
.input.file { padding:10px 12px; font-size:13px; color:var(--ink-soft); background:var(--paper); }
.opt { text-transform:none; letter-spacing:0; color:var(--ink-faint); font-weight:400; }
.hint-txt { font-size:12.5px; color:var(--ink-faint); margin:2px 0 0; }
.form-actions { display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:560px){ .ff-row { flex-direction:column; gap:0; } }

/* ===== modal de evento (Notion-like) ===== */
.modal-overlay { position:fixed; inset:0; z-index:80; background:rgba(20,15,12,.42); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-overlay[hidden] { display:none; }
.modal { width:100%; max-width:440px; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); padding:22px 24px 24px; animation:pop .18s ease; }
@keyframes pop { from { transform:translateY(8px) scale(.98); opacity:0; } to { transform:none; opacity:1; } }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.modal-kind { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; color:#fff; }
.modal-kind.pub { background:var(--brass); }
.modal-kind.com { background:var(--emerald); }
.modal-kind.reu { background:#7C6BB0; }
.modal-close { background:none; border:0; font-size:16px; color:var(--ink-faint); cursor:pointer; line-height:1; padding:4px; }
.modal-close:hover { color:var(--ink); }
.modal-title { font-family:var(--font-display); font-weight:600; font-size:22px; margin:0 0 6px; line-height:1.2; text-wrap:balance; }
.modal-when { font-size:13.5px; color:var(--brass); font-weight:600; margin-bottom:14px; }
.modal-desc { font-size:14.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 18px; }
.modal .btn.primary { width:100%; }
@media (max-width:560px){
  .modal-overlay { align-items:flex-end; padding:0; }
  .modal { max-width:none; border-radius:20px 20px 0 0; padding-bottom:calc(24px + env(safe-area-inset-bottom)); animation:sheet .22s ease; }
  @keyframes sheet { from { transform:translateY(100%); } to { transform:none; } }
}

/* ===== media no reel / sync / upload ===== */
.reel-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; z-index:1; }
.sync-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.sync-bar .btn { padding:8px 14px; font-size:13.5px; }
.sync-hint { font-size:12.5px; color:var(--ink-faint); }
.ics-form { display:flex; gap:10px; flex:1; min-width:260px; flex-wrap:wrap; }
.ics-form .input { flex:1; }
.sync-flash { font-size:13px; font-weight:600; color:var(--emerald); }
/* lista de agendas conectadas (multi-agenda) */
.cal-list { display:flex; flex-direction:column; gap:10px; width:100%; }
.cal-list-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cal-items { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.cal-item { display:flex; align-items:center; gap:10px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:8px; padding:7px 10px; }
.cal-item-name { font-weight:600; font-size:13px; flex:none; }
.cal-item-url { color:var(--ink-soft); font-size:12px; font-family:ui-monospace,monospace;
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-rm { padding:4px 10px !important; font-size:12.5px !important; }
.feed-bar { align-items:flex-start; }
.feed-txt { display:flex; flex-direction:column; gap:3px; flex:1; min-width:220px; }
.feed-txt b { font-size:13.5px; }
.feed-txt em { font-style:normal; color:var(--ink-soft); font-weight:600; }
.ics-url { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:7px 10px;
  max-width:100%; overflow-x:auto; white-space:nowrap; }
.upload-form { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.upload-form input[type=file] { font-size:13px; color:var(--ink-soft); max-width:100%; }

/* ===== aviso "adicione à tela de início" (só iPhone, fora do modo app) ===== */
.ios-hint {
  position:fixed; left:12px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:55;
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:12px 14px; box-shadow:var(--shadow);
}
.ios-hint-icon { width:40px; height:40px; border-radius:10px; flex:none; }
.ios-hint-txt { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.ios-hint-txt b { font-size:13.5px; }
.ios-hint-txt span { font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.ios-share { width:14px; height:14px; vertical-align:-2px; margin:0 1px; color:var(--brass); }
.ios-hint-x { background:none; border:0; color:var(--ink-faint); font-size:14px; cursor:pointer; padding:4px; align-self:flex-start; }
@media (min-width:721px){ .ios-hint { display:none; } }

/* ===== bottom nav (mobile) ===== */
.bottomnav { display:none; }
@media (max-width:720px){
  .topbar .tabs { display:none; }
  .topbar { padding:12px 14px; }
  .wrap { padding-bottom:96px; }
  .bottomnav {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(12px);
    border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bn { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px;
    text-decoration:none; color:var(--ink-faint); font-size:10.5px; font-weight:600; }
  .bn.active { color:var(--brass); }
  .bn svg { display:block; }
  .bn-ic { position:relative; display:inline-flex; }
  .bn-badge { position:absolute; top:-5px; right:-8px; min-width:16px; height:16px; padding:0 4px;
    background:var(--brass); color:#fff; font-size:10px; font-weight:700; font-style:normal;
    border-radius:999px; display:grid; place-items:center; }
}

@media (prefers-reduced-motion: reduce){ * { transition:none !important; animation:none !important; } }

/* ===================================================================
   PRÉVIAS FIÉIS POR REDE
   O que o cliente precisa enxergar aqui não é "um post bonito": é o que a
   INTERFACE DA REDE COBRE do conteúdo dele. Botão, legenda e barra de baixo
   comem o vídeo — é por isso que cada moldura reproduz os overlays na posição
   real. Por isso também as verticais (Reels, Stories, TikTok, Shorts) não são
   a mesma tela com outra cor: cada uma tapa um pedaço diferente.
   =================================================================== */
.pv-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; z-index:1; }
.pv-ph { background-image:radial-gradient(120% 80% at 30% 12%, rgba(217,164,65,.32), transparent 55%); }
.pv-shade { position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 22%, transparent 58%, rgba(0,0,0,.62) 100%); }
.pv-badge { position:absolute; top:42px; right:12px; z-index:9; font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(0,0,0,.55); color:rgba(255,255,255,.86); padding:4px 8px; border-radius:999px; backdrop-filter:blur(4px); }

/* trilho de botões da direita (Reels, TikTok, Shorts): é ele que come a lateral */
.pv-rail { position:absolute; right:8px; bottom:78px; z-index:6; display:flex; flex-direction:column; align-items:center; gap:15px; }
.pv-rail-i { display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; font-size:10.5px; font-weight:600; }
.pv-rail-i svg { filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.pv-disc { width:30px; height:30px; border-radius:50%; background:linear-gradient(145deg,#3a3a3a,#111);
  border:4px solid #222; display:grid; place-items:center; animation:pv-girar 6s linear infinite; }
@media (prefers-reduced-motion:reduce){ .pv-disc{ animation:none; } }
@keyframes pv-girar { to { transform:rotate(360deg); } }

/* rodapé de legenda das verticais */
.pv-vbottom { position:absolute; left:0; right:52px; bottom:52px; z-index:6; padding:0 12px; display:flex; flex-direction:column; gap:6px; }
.pv-vuser { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#fff; }
.pv-vcap { font-size:12px; line-height:1.4; color:#f2f2f2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pv-audio { display:flex; align-items:center; gap:6px; font-size:11.5px; color:#fff; }
.pv-seguir { font-size:11px; font-weight:700; border:1px solid rgba(255,255,255,.7); border-radius:6px; padding:2px 7px; }
.pv-av { width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:11px;
  background:radial-gradient(circle at 32% 28%,#E7C68B,#A9772A 62%,#6E4A16); }

/* barra de navegação de baixo (existe em quase todos os apps e tapa o conteúdo) */
.pv-nav { position:absolute; left:0; right:0; bottom:0; z-index:7; height:46px; display:flex; align-items:center;
  justify-content:space-around; padding:0 14px 8px; background:linear-gradient(to top, rgba(0,0,0,.9), transparent); }
.pv-nav svg { opacity:.92; }

/* ---- Instagram Stories ---- */
.pv-st-bars { position:absolute; top:38px; left:8px; right:8px; z-index:7; display:flex; gap:3px; }
.pv-st-bar { flex:1; height:2.5px; border-radius:2px; background:rgba(255,255,255,.35); }
.pv-st-bar.on { background:#fff; }
.pv-st-bar.meio::after { content:""; display:block; height:100%; width:42%; background:#fff; border-radius:2px; }
.pv-st-top { position:absolute; top:48px; left:10px; right:10px; z-index:7; display:flex; align-items:center; gap:8px; color:#fff; }
.pv-st-nome { font-size:12.5px; font-weight:600; }
.pv-st-tempo { font-size:11.5px; color:rgba(255,255,255,.72); }
.pv-st-x { margin-left:auto; display:flex; gap:12px; align-items:center; }
.pv-st-bottom { position:absolute; left:10px; right:10px; bottom:12px; z-index:7; display:flex; align-items:center; gap:10px; }
.pv-st-campo { flex:1; border:1px solid rgba(255,255,255,.6); border-radius:999px; padding:8px 14px; font-size:12px; color:rgba(255,255,255,.85); }

/* ---- feed do Instagram (estático e carrossel) ---- */
.pv-app { position:absolute; inset:0; z-index:3; background:#000; color:#fff; display:flex; flex-direction:column; }
.pv-app-top { display:flex; align-items:center; justify-content:space-between; padding:40px 12px 8px; flex:none; }
.pv-logo { font-family:'Snell Roundhand','Segoe Script',cursive; font-size:19px; font-weight:600; letter-spacing:.3px; }
.pv-post-head { display:flex; align-items:center; gap:9px; padding:8px 11px; flex:none; }
.pv-post-nome { font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:4px; }
.pv-post-sub { font-size:10.5px; color:rgba(255,255,255,.6); }
.pv-quadro { position:relative; width:100%; flex:none; background:#0c0a09; overflow:hidden; }
.pv-quadro .pv-media { position:absolute; }
.pv-acoes { display:flex; align-items:center; gap:14px; padding:9px 12px 4px; flex:none; }
.pv-acoes .dir { margin-left:auto; display:flex; gap:12px; }
.pv-curtidas { padding:1px 12px; font-size:12px; font-weight:600; }
.pv-legenda { padding:3px 12px; font-size:12px; line-height:1.4; color:#eee;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pv-legenda b { font-weight:600; }
.pv-pontos { display:flex; justify-content:center; gap:4px; padding:6px 0 2px; }
.pv-ponto { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.3); }
.pv-ponto.on { background:#3897F0; }
.pv-carr-tag { position:absolute; top:9px; right:9px; z-index:5; background:rgba(0,0,0,.6); color:#fff;
  border-radius:999px; padding:2px 8px; font-size:10.5px; font-weight:600; }

/* ---- YouTube ---- */
.pv-yt { position:absolute; inset:0; z-index:3; background:#0F0F0F; color:#fff; display:flex; flex-direction:column; }
.pv-yt-top { display:flex; align-items:center; gap:8px; padding:40px 12px 8px; flex:none; }
.pv-yt-player { position:relative; width:100%; aspect-ratio:16/9; background:#000; flex:none; overflow:hidden; }
.pv-yt-barra { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.3); z-index:4; }
.pv-yt-barra i { display:block; height:100%; width:32%; background:#FF0000; }
.pv-yt-titulo { font-size:14px; font-weight:600; line-height:1.3; padding:11px 12px 3px; }
.pv-yt-meta { font-size:11.5px; color:#AAA; padding:0 12px 10px; }
.pv-yt-canal { display:flex; align-items:center; gap:9px; padding:9px 12px; border-top:1px solid #272727; border-bottom:1px solid #272727; }
.pv-yt-nome { font-size:12.5px; font-weight:600; }
.pv-yt-subs { font-size:10.5px; color:#AAA; }
.pv-inscrever { margin-left:auto; background:#fff; color:#0F0F0F; font-size:11.5px; font-weight:600; padding:6px 13px; border-radius:999px; }
.pv-yt-chips { display:flex; gap:7px; padding:10px 12px; overflow:hidden; }
.pv-chip-yt { background:#272727; border-radius:999px; padding:6px 11px; font-size:11px; white-space:nowrap; display:flex; align-items:center; gap:5px; }

/* ---- LinkedIn ---- */
.pv-li { position:absolute; inset:0; z-index:3; background:#F4F2EE; color:#000; display:flex; flex-direction:column; }
.pv-li-card { background:#fff; margin:40px 0 0; border-radius:8px; overflow:hidden; }
.pv-li-head { display:flex; gap:9px; padding:12px 12px 6px; }
.pv-li-nome { font-size:13px; font-weight:600; display:flex; align-items:center; gap:4px; }
.pv-li-grau { font-size:11px; color:#00000099; font-weight:400; }
.pv-li-cargo { font-size:11px; color:#00000099; line-height:1.35; }
.pv-li-tempo { font-size:11px; color:#00000099; display:flex; align-items:center; gap:4px; }
.pv-li-texto { padding:4px 12px 10px; font-size:12.5px; line-height:1.45; color:#000000E6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pv-li-mais { color:#00000099; }
.pv-li-reacoes { display:flex; align-items:center; gap:5px; padding:8px 12px; font-size:11px; color:#00000099; }
.pv-li-emoji { display:flex; }
.pv-li-emoji span { width:15px; height:15px; border-radius:50%; display:grid; place-items:center; font-size:8px; border:1.5px solid #fff; margin-left:-4px; }
.pv-li-emoji span:first-child { margin-left:0; }
.pv-li-barra { display:flex; border-top:1px solid #0000001a; }
.pv-li-b { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0; font-size:10px; color:#00000099; font-weight:600; }

/* ---- X ---- */
.pv-x { position:absolute; inset:0; z-index:3; background:#000; color:#E7E9EA; display:flex; flex-direction:column; }
.pv-x-post { display:flex; gap:10px; padding:44px 12px 0; }
.pv-x-corpo { flex:1; min-width:0; }
.pv-x-head { display:flex; align-items:center; gap:4px; font-size:13px; }
.pv-x-nome { font-weight:700; }
.pv-x-arroba { color:#71767B; font-weight:400; }
.pv-x-texto { font-size:13.5px; line-height:1.4; margin:2px 0 9px; white-space:pre-wrap;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.pv-x-midia { position:relative; width:100%; border-radius:16px; overflow:hidden; border:1px solid #2F3336; background:#000; }
.pv-x-acoes { display:flex; justify-content:space-between; align-items:center; padding:10px 2px 0; color:#71767B; font-size:11.5px; }
.pv-x-a { display:flex; align-items:center; gap:5px; }

/* abas de rede (quando a publicação vai pra mais de uma) */
.pv-abas { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:0 0 14px; }
.pv-aba { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-soft); border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer;
  font-family:var(--font-ui); }
.pv-aba:hover { border-color:var(--brass-soft); }
.pv-aba.on { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pv-aba .bolinha { width:8px; height:8px; border-radius:50%; flex:none; }
.pv-tela[hidden] { display:none !important; }
.pv-fmt { text-align:center; font-size:12px; color:var(--ink-faint); margin:10px 0 0; }
.pv-fmt b { color:var(--brass); font-weight:600; }
/* Em TikTok e Shorts a barra do app ocupa o topo inteiro (abas no centro, ícones
   à direita). A etiqueta de prévia desce pra não tapar justamente a interface
   que esta tela existe para mostrar. */
.pv-badge.baixo { top:70px; }

/* escolha de redes (cadastro do cliente e nova publicação) */
.redes-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:7px; }
.rede-op { display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--paper);
  border-radius:10px; padding:9px 11px; cursor:pointer; font-size:13.5px; font-weight:500; user-select:none; }
.rede-op:hover { border-color:var(--brass-soft); }
.rede-op:has(input:checked) { border-color:var(--brass); background:color-mix(in srgb, var(--brass) 9%, var(--paper)); }
.rede-op input { accent-color:var(--brass); width:15px; height:15px; flex:none; margin:0; }
.rede-op .bolinha { width:8px; height:8px; border-radius:50%; flex:none; }
.rede-op.mini { padding:5px 9px; font-size:12px; border-radius:999px; }
/* rede que não aceita o formato escolhido: some do caminho em vez de mentir */
.rede-op[hidden] { display:none !important; }
.adm-redes { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:0 0 14px 42px; margin-top:-6px; }
.adm-redes .mat-btn { margin-left:auto; }
.redes-vazio { font-size:12.5px; color:var(--rose); }
/* etiquetas de rede na lista de aprovações */
.rede-tags { display:inline-flex; gap:4px; align-items:center; }
.rede-tag { width:7px; height:7px; border-radius:50%; display:inline-block; }

/* entrar com Google */
.login-ou { display:flex; align-items:center; gap:12px; max-width:360px; margin:18px auto 14px; color:var(--ink-faint); font-size:12px; }
.login-ou::before, .login-ou::after { content:""; flex:1; height:1px; background:var(--line); }
.btn-google { display:flex; align-items:center; justify-content:center; gap:10px; max-width:360px; margin:0 auto;
  background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:12px;
  font-size:14.5px; font-weight:600; color:var(--ink); text-decoration:none; }
.btn-google:hover { border-color:var(--brass-soft); background:var(--surface-2); }
.login-nota { max-width:360px; margin:10px auto 0; text-align:center; font-size:12px; color:var(--ink-faint); }

/* ===== zoom do iPhone (fica no FIM de propósito) =====
   O Safari dá zoom sozinho ao focar campo com fonte < 16px e deixa a tela torta.
   Em tela de toque todo campo vai a 16px. Mora no fim porque .input.file e afins
   são definidos lá em cima e, com a mesma especificidade, quem vem depois vence
   — na primeira tentativa esta regra estava no meio e era atropelada.
   Nada de user-scalable=no: resolveria o zoom tirando do cliente a ampliação
   de que ele pode precisar para ler. */
@media (pointer:coarse) {
  .input, .input.file, select.input, textarea.input { font-size:16px; }
}

/* ===== gerenciador de cards do carrossel (agência) ===== */
.cr-topo { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.cr-qtd { width:auto; margin:0; padding:7px 30px 7px 11px; }
.cr-qtd-lbl { font-size:13px; color:var(--ink-soft); }
.cr-progresso { margin-left:auto; font-size:12px; font-weight:600; color:var(--brass);
  background:color-mix(in srgb, var(--brass) 12%, transparent); padding:4px 10px; border-radius:999px; }
.cr-progresso.ok { color:var(--emerald); background:var(--emerald-tint); }
.cr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; }
.cr-card { position:relative; aspect-ratio:4/5; border-radius:9px; overflow:hidden; background:#0c0a09;
  border:1px solid var(--line); cursor:grab; }
.cr-card img, .cr-card video { width:100%; height:100%; object-fit:cover; display:block; }
.cr-card.arrastando { opacity:.4; cursor:grabbing; }
.cr-num { position:absolute; top:4px; left:4px; z-index:2; background:rgba(0,0,0,.7); color:#fff;
  width:19px; height:19px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:700; }
.cr-acoes { position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; gap:1px;
  background:linear-gradient(to top, rgba(0,0,0,.8), transparent); padding:8px 3px 3px; }
.cr-b { flex:1; background:rgba(255,255,255,.14); border:0; color:#fff; font-size:13px; line-height:1;
  padding:5px 0; cursor:pointer; border-radius:5px; }
.cr-b:hover { background:rgba(255,255,255,.3); }
.cr-b.x { flex:0 0 26px; color:#FF8E7A; }
.cr-vazio { border:1px dashed var(--line); border-radius:10px; padding:20px; text-align:center;
  font-size:13px; color:var(--ink-faint); }
.cr-envio { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; }

/* ===== carrossel dentro da prévia ===== */
.pv-slides { position:absolute; inset:0; z-index:1; overflow:hidden; }
.pv-trilho { display:flex; height:100%; transition:transform .28s ease; }
@media (prefers-reduced-motion:reduce){ .pv-trilho{ transition:none; } }
.pv-slide { flex:0 0 100%; height:100%; position:relative; }
.pv-slide .pv-media { position:absolute; inset:0; }
.pv-seta { position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:26px; height:26px;
  border-radius:50%; border:0; background:rgba(0,0,0,.45); color:#fff; font-size:15px; line-height:1;
  cursor:pointer; display:grid; place-items:center; backdrop-filter:blur(3px); }
.pv-seta:hover { background:rgba(0,0,0,.7); }
.pv-seta.esq { left:6px; } .pv-seta.dir { right:6px; }
.pv-seta[hidden] { display:none !important; }
.pv-contador { position:absolute; top:9px; right:9px; z-index:6; background:rgba(0,0,0,.6); color:#fff;
  border-radius:999px; padding:2px 8px; font-size:10.5px; font-weight:600; }
.pv-pontinhos { position:absolute; left:0; right:0; bottom:7px; z-index:6; display:flex; justify-content:center; gap:4px; }
.pv-pontinhos i { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.45); }
.pv-pontinhos i.on { background:#fff; }

/* ===== aviso de "passou da data e não foi postado" (só a agência) ===== */
.atraso-modal { max-width:520px; }
.atraso-sub { font-size:13.5px; color:var(--ink-faint); margin:0 0 16px; }
.atraso-lista { display:flex; flex-direction:column; gap:10px; max-height:52vh; overflow-y:auto; }
.atraso-item { border:1px solid var(--line); border-radius:12px; padding:11px; background:var(--paper); }
.atraso-item.feito { opacity:.6; }
.atraso-topo { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.mini-chip { width:26px; height:26px; font-size:10px; }
.atraso-info { min-width:0; display:flex; flex-direction:column; }
.atraso-titulo { font-size:13.5px; font-weight:600; text-decoration:none; color:var(--ink); }
.atraso-titulo:hover { color:var(--brass); }
.atraso-meta { font-size:11.5px; color:var(--rose); }
.atraso-acoes { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.atraso-acoes[hidden] { display:none !important; }
.atraso-data, .atraso-hora { margin:0; padding:7px 9px; width:auto; flex:1 1 120px; min-width:0; }
.atraso-hora { flex:0 0 96px; }
.atraso-feito { font-size:12.5px; color:var(--emerald); font-weight:600; }
.postado-ok { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--emerald); font-weight:600; }
@media (max-width:520px){
  .atraso-acoes { display:grid; grid-template-columns:1fr 1fr; }
  .atraso-acoes .mat-btn { width:100%; }
}
/* mídia que já saiu do armazenamento pela regra dos 90 dias */
.pv-arquivada { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; padding:20px; background:#191512; color:rgba(255,255,255,.62); }
.pv-arquivada b { font-size:13px; color:rgba(255,255,255,.9); }
.pv-arquivada span { font-size:11.5px; line-height:1.4; max-width:200px; }

/* ===== swipe file ===== */
.vazio-swipe { max-width:460px; margin:40px auto; text-align:center; }
.vazio-swipe h2 { font-family:var(--font-display); font-weight:600; font-size:22px; margin:0 0 8px; }
.vazio-swipe p { color:var(--ink-faint); font-size:14px; margin:0 0 18px; }
.sw-av { width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none; background:var(--surface-2); }
.sw-av.grande { width:38px; height:38px; }

.swipe-area { max-width:340px; margin:0 auto; }
/* O baralho tem altura fixa: os cards são absolutos e, sem isso, o container
   colapsa e os botões sobem por cima da pilha. */
.swipe-baralho { position:relative; height:520px; touch-action:pan-y; }
.sw-card { position:absolute; inset:0; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transform-origin:center bottom; user-select:none;
  transition:transform .26s ease, opacity .26s ease; }
/* só os 3 de cima aparecem: o resto é peso de render à toa */
.sw-card { display:none; }
.sw-card:nth-last-child(-n+3) { display:flex; }
.sw-card:nth-last-child(2) { transform:scale(.96) translateY(9px); }
.sw-card:nth-last-child(3) { transform:scale(.92) translateY(18px); }
.sw-card.pegando { transition:none; cursor:grabbing; }
.sw-midia { position:relative; flex:1; min-height:0; background:#0c0a09; }
.sw-midia img { width:100%; height:100%; object-fit:cover; display:block; }
.sw-sem-midia { width:100%; height:100%; display:grid; place-items:center; color:var(--ink-faint); font-size:12px; background:var(--surface-2); }

/* ---- vídeo no card ---- */
.sw-video { width:100%; height:100%; object-fit:cover; display:block; background:#0c0a09; }
/* Antes do play o vídeo não recebe toque: o gesto atravessa e o card inteiro
   continua sendo área de arrasto pra julgar. Depois do play ele ganha os
   controles nativos e passa a receber (scrub, volume, tela cheia) — quem está
   assistindo não está arrastando, e os botões X/coração seguem ali embaixo. */
.sw-video { pointer-events:none; }
/* `cover` também tocando, igual à capa: o card não pode mudar de enquadramento
   no play. `contain` deixava o Reels 9:16 como um filete no meio de duas tarjas
   pretas — pra ver o quadro inteiro tem a tela cheia dos controles nativos. */
.sw-video[controls] { pointer-events:auto; }
.sw-play { position:absolute; inset:0; margin:auto; width:62px; height:62px; border-radius:50%;
  border:none; cursor:pointer; background:rgba(12,10,9,.52); backdrop-filter:blur(2px);
  box-shadow:0 2px 14px rgba(0,0,0,.35); transition:transform .12s ease, background .12s ease; }
/* triângulo em CSS: um ▶ de fonte desalinha e muda de forma conforme o sistema */
.sw-play::after { content:''; position:absolute; top:50%; left:52%; transform:translate(-50%,-50%);
  border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff; }
.sw-play:hover { transform:scale(1.06); background:rgba(12,10,9,.68); }

/* ---- carrossel: folhear na seta ---- */
/* `clip`, NÃO `hidden`: os 6 cards somam 2028px dentro de 338, e com `hidden`
   isso vira uma caixa ROLÁVEL. Aí o toque na seta dá foco no botão, o navegador
   "rola pra mostrar o elemento focado" e empurra a caixa 144px — as setas e o
   contador saem do lugar e dois cards aparecem ao mesmo tempo. `clip` recorta
   igual mas não cria rolagem, então não há o que rolar. Custou uma hora achar,
   porque o transform estava certo o tempo todo: quem se mexia era o container. */
.sw-carro { position:absolute; inset:0; overflow:clip; }
.sw-trilho { display:flex; height:100%; transition:transform .28s ease; }
.sw-slide { position:relative; flex:0 0 100%; height:100%; }
.sw-seta { position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%;
  border:none; cursor:pointer; display:grid; place-items:center; color:#fff; background:rgba(12,10,9,.5);
  backdrop-filter:blur(2px); transition:opacity .15s ease, background .15s ease; }
.sw-seta.esq { left:8px; } .sw-seta.dir { right:8px; }
.sw-seta:hover { background:rgba(12,10,9,.72); }
/* no primeiro/último card a seta some em vez de ficar clicável sem efeito */
.sw-seta:disabled { opacity:0; pointer-events:none; }
/* topo ao centro: a esquerda é do selo do formato e a direita, do "× a média" */
.sw-conta { position:absolute; top:10px; left:50%; transform:translateX(-50%); background:rgba(12,10,9,.6);
  color:#fff; font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px;
  backdrop-filter:blur(3px); font-variant-numeric:tabular-nums; }
.sw-tipo { position:absolute; top:10px; left:10px; background:rgba(0,0,0,.6); color:#fff; font-size:10.5px;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 9px; border-radius:999px; backdrop-filter:blur(3px); }
.sw-destaque { position:absolute; top:10px; right:10px; background:var(--brass); color:#fff; font-size:11px;
  font-weight:700; padding:4px 9px; border-radius:999px; }
/* carimbos que aparecem enquanto arrasta: dizem o que vai acontecer ANTES de soltar */
/* `pointer-events:none` é obrigatório: com opacity:0 eles somem da vista mas
   CONTINUAM recebendo toque, e ficam bem em cima da seta do carrossel. Sem isto,
   tocar na seta acerta um carimbo invisível e não acontece nada. */
.sw-carimbo { position:absolute; top:44%; font-size:19px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:7px 14px; border-radius:10px; opacity:0; transition:opacity .12s ease; border:3px solid; pointer-events:none; }
.sw-carimbo.sim { left:14px; color:var(--emerald); border-color:var(--emerald); transform:rotate(-14deg); }
.sw-carimbo.nao { right:14px; color:var(--rose); border-color:var(--rose); transform:rotate(14deg); }
.sw-card.quer-sim .sw-carimbo.sim, .sw-card.quer-nao .sw-carimbo.nao { opacity:1; }
.sw-info { flex:none; padding:11px 13px 13px; background:var(--surface); }
.sw-perfil { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.sw-user { font-size:13px; font-weight:700; }
.sw-nums { margin-left:auto; font-size:11.5px; color:var(--ink-faint); }
.sw-legenda { font-size:12.5px; line-height:1.4; color:var(--ink-soft); margin:0 0 6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sw-link { font-size:11.5px; color:var(--brass); text-decoration:none; font-weight:600; }

.sw-botoes { display:flex; justify-content:center; align-items:center; gap:16px; margin:20px 0 0; }
.sw-b { width:58px; height:58px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-soft); transition:transform .1s ease; }
.sw-b:active { transform:scale(.92); }
.sw-b.nao { color:var(--rose); }
.sw-b.sim { color:var(--emerald); }
.sw-b.seta { width:42px; height:42px; color:var(--ink-faint); }
.sw-b:disabled { opacity:.4; cursor:default; }
.sw-b.nao:hover { border-color:var(--rose); }
.sw-b.sim:hover { border-color:var(--emerald); }
.sw-dica { text-align:center; font-size:12px; color:var(--ink-faint); margin:14px 0 0; }

.mt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.mt-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  text-decoration:none; color:inherit; box-shadow:var(--shadow-soft); transition:transform .12s ease; }
.mt-card:hover { transform:translateY(-3px); }
.mt-thumb { position:relative; aspect-ratio:4/5; background:#0c0a09; }
.mt-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.mt-info { padding:10px 11px 12px; }
.mt-info .sw-perfil { margin:0; }
.mt-legenda { font-size:12px; line-height:1.4; color:var(--ink-faint); margin:6px 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:400px){ .swipe-baralho { height:64vh; } }

/* No celular a pilha não pode ter altura fixa: com 520px os botões caíam ATRÁS
   da barra de baixo, e eles são a ação principal da tela. A área se ajusta à
   altura real (svh acompanha a barra do Safari aparecendo e sumindo) e a pilha
   fica com o que sobra depois dos botões. */
@media (max-width:720px){
  .swipe-area { display:flex; flex-direction:column; height:calc(100svh - 250px); min-height:380px; }
  .swipe-baralho { flex:1; height:auto; min-height:0; }
  .sw-botoes { flex:none; margin:14px 0 0; }
  .sw-dica { flex:none; margin:8px 0 0; }
  .page-head .subhead { display:none; }   /* 40px que fazem falta pro card */
}
/* falar em "setas do teclado" num celular é ruído */
@media (pointer:coarse){ .so-mouse { display:none; } }
/* post vindo de hashtag: origem no lugar do índice (não sabemos a média de quem não conhecemos) */
.sw-destaque.novo { background:var(--emerald); }

/* ===== Performance (dashboard de conteúdo) ===== */
.perf-conta { display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:11px 14px; margin-bottom:18px; }
.perf-conta b { display:block; font-size:14px; }
.perf-periodo { width:auto; margin:0; padding:7px 30px 7px 11px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:14px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 15px;
  display:flex; flex-direction:column; gap:3px; }
.kpi.carregando { color:var(--ink-faint); font-size:13px; }
.kpi-lbl { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.kpi-num { font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:.2px; }
/* "sem dado" nunca pode parecer um número: num painel de cliente, alcance 0 é
   uma afirmação falsa, não um espaço vazio */
.kpi-num.sem { font-size:15px; color:var(--ink-faint); font-family:var(--font-ui); font-weight:500; font-style:italic; }
.kpi-extra { font-size:11px; color:var(--ink-faint); }
.perf-aviso { background:var(--amber-tint); color:var(--ink-soft); border:1px solid color-mix(in srgb, var(--brass) 26%, var(--line));
  border-radius:11px; padding:10px 13px; font-size:12.5px; line-height:1.5; margin-bottom:22px; }
.perf-aviso b { color:var(--brass); }

/* ===== fontes do swipe (perfis e hashtags) =====
   O card tem overflow:hidden e NENHUM padding próprio: quem põe conteúdo direto
   nele encosta na borda e é cortado. Foi o que aconteceu aqui. Estes blocos
   trazem o próprio respiro. */
.fontes { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; align-items:start; }
.fonte { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-soft); padding:18px; }
.fonte-topo h2 { font-family:var(--font-display); font-weight:600; font-size:17px; margin:0 0 4px; }
.fonte-topo p { font-size:12.5px; color:var(--ink-faint); line-height:1.5; margin:0 0 14px; }
.fonte-form { display:flex; gap:8px; }
.fonte-form .input { margin:0; flex:1; min-width:0; }
.fonte-form .btn { flex:none; }
.fonte-nota { font-size:11.5px; color:var(--ink-faint); margin:8px 0 0; }
.fonte-vazio { font-size:12.5px; color:var(--ink-faint); font-style:italic; margin:16px 0 0; }
.fonte-lista { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; }
.fonte-lista li { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.fonte-info { min-width:0; flex:1; display:flex; flex-direction:column; line-height:1.35; }
.fonte-info b { font-size:13.5px; }
.fonte-info span { font-size:11.5px; color:var(--ink-faint); }
.fonte-erro { color:var(--rose) !important; }
.tag-chip { width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--surface-2); color:var(--brass); font-weight:700; font-size:13px; }
.x-btn { background:none; border:0; color:var(--ink-faint); cursor:pointer; font-size:13px; padding:6px 4px; line-height:1; border-radius:6px; }
.x-btn:hover { color:var(--rose); background:var(--rose-tint); }

/* recados: título curto em negrito, explicação embaixo em cinza */
.alerta { border-radius:11px; padding:11px 14px; margin-bottom:16px; max-width:720px;
  display:flex; flex-direction:column; gap:3px; }
.alerta b { font-size:13.5px; font-weight:600; }
.alerta span { font-size:12.5px; line-height:1.5; opacity:.85; }
.alerta.ruim { background:var(--rose-tint); color:var(--rose); border:1px solid color-mix(in srgb,var(--rose) 28%, var(--line)); }
.alerta.bom { background:var(--emerald-tint); color:var(--emerald); border:1px solid color-mix(in srgb,var(--emerald) 28%, var(--line)); }