/* =====================================================================
   Tema "Glass" — inspirado no iOS e no sistema Aurora
   Vidro translúcido sobre fundo suave, fonte do sistema da Apple, cantos
   contínuos, barra de abas flutuante e folhas (sheets) no celular.
   Sempre no modo escuro.
   Carregado depois de style.css: só muda aparência, não a estrutura.
   ===================================================================== */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;

  /* superfícies (iOS "system colors") */
  --surface: #ffffff;
  --surface-2: #f2f2f7;
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .88);
  --glass-bar: rgba(249, 249, 251, .86);
  --glass-blur: saturate(180%) blur(22px);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 0 0 .5px rgba(0, 0, 0, .06), 0 8px 28px -12px rgba(31, 38, 64, .22);
  --fill: rgba(118, 118, 128, .12);
  --fill-strong: rgba(118, 118, 128, .2);
  --input: rgba(118, 118, 128, .12);
  --hover: rgba(118, 118, 128, .08);
  --shadow-lg: 0 24px 60px -12px rgba(31, 38, 64, .35), 0 0 0 .5px rgba(0, 0, 0, .06);

  /* texto e linhas */
  --ink: #1c1c1e; --ink2: #48484a; --muted: #6e6e73;
  --line: rgba(60, 60, 67, .12); --line2: rgba(60, 60, 67, .2);

  /* destaque: verde Native */
  --green: #15803d;                 /* texto/ícones (contraste AA no claro) */
  --accent: #22a34f;
  --accent-grad: linear-gradient(135deg, #34c759, #179447);
  --green-ink: #ffffff;
  --green-soft: rgba(52, 199, 89, .14);
  --yellow-text: #a15c07; --red-text: #c0262f;

  /* tokens antigos apontando para os novos */
  --bg: #eef2ef; --bg2: var(--surface-2); --card: var(--glass); --card2: var(--glass-strong);

  --radius: 14px; --radius-lg: 20px;
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  --wallpaper:
    radial-gradient(60vmax 50vmax at 8% -10%, rgba(140, 230, 170, .45), transparent 60%),
    radial-gradient(55vmax 45vmax at 105% 8%, rgba(173, 196, 255, .45), transparent 60%),
    radial-gradient(60vmax 55vmax at 88% 110%, rgba(255, 214, 160, .38), transparent 60%),
    radial-gradient(50vmax 45vmax at -5% 95%, rgba(160, 230, 210, .40), transparent 60%),
    linear-gradient(180deg, #f4f6f3, #eef0f6);
}

/* sempre escuro */
:root {
  --surface: #1c1c1e; --surface-2: #2c2c2e;
  --glass: rgba(30, 30, 34, .64);
  --glass-strong: rgba(38, 38, 42, .86);
  --glass-bar: rgba(22, 22, 26, .84);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 0 0 .5px rgba(255, 255, 255, .08), 0 10px 30px -10px rgba(0, 0, 0, .6);
  --fill: rgba(118, 118, 128, .24); --fill-strong: rgba(118, 118, 128, .36);
  --input: rgba(118, 118, 128, .24); --hover: rgba(118, 118, 128, .14);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .75), 0 0 0 .5px rgba(255, 255, 255, .08);
  --ink: #f5f5f7; --ink2: #c7c7cc; --muted: #9a9aa1;
  --line: rgba(84, 84, 88, .45); --line2: rgba(120, 120, 128, .5);
  --green: #30d158; --accent: #30d158;
  --accent-grad: linear-gradient(135deg, #30d158, #1f9d48);
  --green-soft: rgba(48, 209, 88, .16);
  --yellow-text: #f5c518; --red-text: #ff6b75;
  --bg: #0b0c0e;
  --wallpaper:
    radial-gradient(60vmax 50vmax at 5% -10%, rgba(30, 160, 80, .30), transparent 60%),
    radial-gradient(55vmax 45vmax at 105% 5%, rgba(70, 90, 200, .26), transparent 60%),
    radial-gradient(60vmax 55vmax at 90% 110%, rgba(30, 140, 120, .22), transparent 60%),
    linear-gradient(180deg, #0b0b0f, #0f1113);
}


/* ---------------- base ---------------- */
html { background: var(--bg); }
body { background: transparent; font-family: var(--font); font-size: 15px; line-height: 1.47; letter-spacing: -.01em;
  color: var(--ink); -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--wallpaper); pointer-events: none; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.022em; text-wrap: balance; }
a { color: var(--green); }
.muted { color: var(--muted); }
::selection { background: var(--green-soft); }
td, .num, .kpi-card b, .fin-item b, .pcard-stats b, .ccard-stats b, .foot-box b { font-variant-numeric: tabular-nums; }

/* superfícies de vidro */
.sidebar, .notif-pop, .modal, .tabbar, .kpi-card, .ptable-wrap, .fin-panel, .fin-item, .hero, .pcard, .ccard, .top5,
.grid2 > .panel, .wide-left > section, .wide-left > div > .panel, .form-narrow, .page-card, .ig-card, .backup-card,
.month-only-note, .user-row, .empty, .auth-card {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.grid2 > .panel, .wide-left > section, .wide-left > div > .panel, .form-narrow, .fin-panel, .page-card, .ig-card,
.backup-card, .month-only-note {
  background: var(--glass); border: 0; border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); padding: 18px;
}
.fin-panel { box-shadow: var(--glass-shadow), 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---------------- estrutura ---------------- */
.sidebar { width: 248px; padding: 18px 12px; background: var(--glass-bar); border-right: .5px solid var(--line); }
.side-brand { padding: 2px 8px 16px; margin-bottom: 12px; border-bottom: .5px solid var(--line); gap: 10px; }
.side-brand b { font-size: 1.3rem; }
.side-brand small { font-size: .85rem; color: var(--muted); }
.al-md { width: 44px; height: 44px; font-size: 2rem; }
.side-nav { gap: 2px; }
.side-nav a { gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--ink); font-size: .93rem; font-weight: 500;
  transition: background .2s, transform .15s var(--ease-out); }
.side-nav a .ic { width: 19px; height: 19px; color: var(--green); }
.side-nav a:hover { background: var(--fill); color: var(--ink); }
.side-nav a:active { transform: scale(.98); }
.side-nav a.active { background: var(--accent-grad); color: #fff; font-weight: 600; box-shadow: 0 8px 18px -10px rgba(23, 148, 71, .8); }
.side-nav a.active .ic { color: #fff; }
.side-user { padding-top: 12px; border-top: .5px solid var(--line); }
.su-av { width: 38px; height: 38px; border: 0; background: var(--fill-strong); font-size: .95rem; }
.su-main b { font-size: .9rem; } .su-main small { font-size: .76rem; color: var(--muted); }
.su-av .online { border-color: var(--surface); }

.main { padding: 16px 28px 40px; }
.top { margin-bottom: 16px; gap: 12px; }
.top-title h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.15; }
.top-title p { font-size: .95rem; color: var(--muted); margin-top: 2px; }
.who-lg h1 { font-size: 1.6rem; }
.av-lg { width: 52px; height: 52px; font-size: 1.45rem; border-radius: 14px; }

/* ---------------- botões e campos ---------------- */
.btn { border: 0; border-radius: 12px; background: var(--fill); color: var(--green); font-weight: 600; padding: 9px 15px; font-size: .92rem;
  box-shadow: none; transition: transform .15s var(--ease-out), background .2s, filter .2s; }
.btn:hover { background: var(--fill-strong); border: 0; }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn .ic { width: 17px; height: 17px; }
.btn.primary { background: var(--accent-grad); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px -10px rgba(23,148,71,.85); }
.btn.primary:hover { filter: brightness(1.05); background: var(--accent-grad); }
.btn.danger { background: rgba(255, 59, 48, .12); color: var(--red-text); border: 0; }
.btn.danger.solid { background: #ff3b30; color: #fff; }
.btn.icon-only { width: 40px; height: 40px; color: var(--ink); }
.btn.sm { padding: 6px 11px; font-size: .82rem; border-radius: 10px; }
.icon-btn { color: var(--muted); }
.icon-btn:hover { color: var(--red-text); background: rgba(255, 59, 48, .1); }

input, select, textarea { border: 0; border-radius: 11px; background: var(--input); color: var(--ink); padding: 9px 12px; font-size: .95rem; color-scheme: dark; }
input:focus, select:focus, textarea:focus { background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); border: 0; }
input::placeholder, textarea::placeholder { color: var(--muted); }
label { font-size: .82rem; color: var(--ink2); font-weight: 600; }
label.check { font-weight: 500; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
fieldset { border: .5px solid var(--line2); border-radius: 14px; }

/* seletores (período, ordenar, mês) */
.period select, .month-nav input { background: var(--glass); border: 0; box-shadow: var(--glass-shadow); border-radius: 12px; height: 40px; font-size: .9rem; font-weight: 500; }
.period select { min-width: 200px; padding: 0 38px 0 44px; }
.period > .ic { left: 14px; color: var(--green); width: 18px; height: 18px; }
.dash-toolbar .period select, .dash-toolbar .report-btn { height: 40px; }
.month-nav input { height: 40px; }
.notif summary.btn { background: var(--glass); box-shadow: var(--glass-shadow); }
.notif .dot { box-shadow: none; }
.notif-pop { background: var(--glass-strong); border: 0; box-shadow: var(--shadow-lg); border-radius: 16px; }
.notif-pop a { color: var(--ink2); }
.notif-pop a:hover { background: var(--fill); }

/* mensagens */
.flash { border: 0; border-radius: 14px; padding: 11px 14px; font-size: .9rem; background: rgba(52, 199, 89, .14); color: var(--green); }
.flash.error { background: rgba(255, 59, 48, .12); color: var(--red-text); }
.flash.warn { background: rgba(255, 159, 10, .14); color: var(--yellow-text); }

/* ---------------- hero (agência) ---------------- */
.hero { background: var(--glass); border: 0; box-shadow: var(--glass-shadow); min-height: 112px; padding: 16px 20px; gap: 18px; border-radius: var(--radius-lg); margin-bottom: 16px; }
.hero-txt h2 { font-size: 1.45rem; } .hero-txt p { color: var(--muted); font-size: .92rem; margin-bottom: 8px; }
.hero-pill, .hero-btn { padding: 5px 11px; border-radius: 99px; font-size: .82rem; }
.hero-pill { background: var(--green-soft); color: var(--green); border: 0; }
.hero-btn { background: var(--fill); border: 0; color: var(--ink); }
.hero-btn:hover { background: var(--fill-strong); }
.hero-sep { background: var(--line2); }
.hero-art { opacity: .55; } .hero-art span { font-size: 11rem; }
.al-lg { width: 76px; height: 76px; font-size: 3rem; border-radius: 18px; border: 0; }

/* ---------------- indicadores ---------------- */
.kpi-row { gap: 12px; margin-bottom: 18px; }
.kpi-card { background: var(--glass); border: 0; border-radius: 18px; box-shadow: var(--glass-shadow); padding: 14px 16px; gap: 12px; }
.kpi-card.glow { box-shadow: var(--glass-shadow), 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); border: 0; }
.kpi-card small { font-size: .78rem; color: var(--muted); font-weight: 500; }
.kpi-card b { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.kpi-ic { width: 44px; height: 44px; border-radius: 12px; }
.kpi-ic .ic { width: 22px; height: 22px; }
.kpi-row.six .kpi-card.sm { padding: 12px; gap: 8px; }
.kpi-row.six .kpi-card.sm .kpi-ic { width: 32px; height: 32px; border-radius: 9px; }
.kpi-row.six .kpi-card.sm .kpi-ic .ic { width: 17px; height: 17px; }
.kpi-row.six .kpi-card.sm b { font-size: clamp(1rem, 1.3vw, 1.25rem); }
.kpi-ic.g { background: rgba(52, 199, 89, .14); color: var(--green); }
.kpi-ic.y { background: rgba(255, 159, 10, .15); color: var(--yellow-text); }
.kpi-ic.r { background: rgba(255, 59, 48, .12); color: #ff3b30; }
.kpi-ic.b { background: rgba(0, 122, 255, .12); color: #0a84ff; }
.kpi-ic.p { background: rgba(175, 82, 222, .14); color: #af52de; }
.kpi-ic.o { background: rgba(255, 149, 0, .14); color: #ff9500; }

/* ---------------- painéis e listas ---------------- */
.dash-grid { gap: 16px; }
.panel { margin-bottom: 16px; }
.panel-head { gap: 12px; margin-bottom: 12px; }
.panel-head h3 { font-size: 1.12rem; font-weight: 700; }
.panel-head p { font-size: .86rem; color: var(--muted); }
.panel-ic .ic { width: 24px; height: 24px; color: var(--green); }
.fin-item { background: var(--fill); border: 0; border-radius: 14px; padding: 11px 12px; gap: 12px; margin-bottom: 8px; box-shadow: none; }
.fin-item .kpi-ic { width: 40px; height: 40px; }
.fin-item small { font-size: .8rem; color: var(--muted); } .fin-item b { font-size: 1.25rem; }
.search input { width: 200px; height: 38px; background: var(--glass); box-shadow: var(--glass-shadow); }
.search .ic { color: var(--muted); }

/* chips = controle segmentado do iOS */
.chips, .month-chips { gap: 6px; }
.chip { border: 0; background: var(--fill); color: var(--ink); padding: 6px 13px; border-radius: 99px; font-size: .86rem; font-weight: 500; }
.chip:hover { background: var(--fill-strong); border: 0; }
.chip.active { background: var(--accent-grad); color: #fff; font-weight: 600; }

/* tabela de perfis e tabelas gerais */
.ptable-wrap { background: var(--glass); border: 0; border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); }
.ptable thead th { background: transparent; color: var(--muted); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; padding: 12px 14px 8px; border-bottom: .5px solid var(--line); }
.ptable td { padding: 9px 14px; border-top: 0; border-bottom: .5px solid var(--line); }
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptable tbody tr:hover { background: var(--hover); }
.ptable td.num { font-size: .95rem; }
.who b { font-size: .95rem; } .who small { font-size: .8rem; color: var(--muted); }
.av-md { width: 40px; height: 40px; font-size: 1.1rem; border-radius: 11px; }
.dtable th, .edit-table th { color: var(--muted); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; border-bottom: .5px solid var(--line); }
.dtable td, .edit-table td, .simple td { border-bottom: .5px solid var(--line); }
.dtable td { padding: 9px 10px; }
.edit-table input, .edit-table select { background: var(--input); }
.badge { border-radius: 99px; font-size: .78rem; padding: 3px 10px; }
.status { font-size: .74rem; }
.status.off { background: rgba(255, 59, 48, .12); color: var(--red-text); }
.status.wait { background: rgba(255, 159, 10, .15); color: var(--yellow-text); }
.tag { background: var(--fill); color: var(--ink2); }
.empty { background: var(--glass); border: 0; box-shadow: var(--glass-shadow); border-radius: var(--radius-lg); }

/* abas (Dashboard / Gerenciar) = segmentado */
.tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 14px; border: 0; background: var(--fill); border-radius: 12px; }
.tabs a { padding: 7px 14px; border-radius: 9px; border: 0; margin: 0; color: var(--ink); font-size: .9rem; font-weight: 500; }
.tabs a .ic { width: 16px; height: 16px; }
.tabs a.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }

.toolbar, .dash-toolbar { gap: 8px; margin-bottom: 14px; }
.link-box { background: var(--fill); border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 16px; }
.add-box summary { color: var(--green); }
.private-banner { background: rgba(255, 59, 48, .1); color: var(--red-text); border: 0; border-radius: 99px; }
.calc-example, .bstatus { background: var(--fill); border: 0; }
.radio-card { border: 0; background: var(--fill); }
.user-row { background: var(--glass); border: 0; box-shadow: var(--glass-shadow); border-radius: 16px; }
.save-state.wait, .dirty { color: var(--yellow-text); }
.spend-mode.manual { background: rgba(255, 159, 10, .15); color: var(--yellow-text); }

/* ---------------- cartões de post ---------------- */
.post-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 14px; }
.pcard { background: var(--glass); border: 0; border-radius: 18px; box-shadow: var(--glass-shadow); }
.pcard:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow), 0 14px 30px -14px rgba(0,0,0,.35); }
.pcard.heat-low { box-shadow: var(--glass-shadow), 0 0 0 2px rgba(10, 132, 255, .75); border: 0; }
.pcard.heat-mid { box-shadow: var(--glass-shadow), 0 0 0 2px rgba(255, 196, 0, .85); border: 0; }
.pcard.heat-high { box-shadow: var(--glass-shadow), 0 0 0 2px #ff5a1f, 0 8px 24px -8px rgba(255, 90, 31, .45); border: 0; }
.pcard.heat-none { box-shadow: var(--glass-shadow), 0 0 0 1.5px var(--line2); border: 0; }
.pcard-cover { aspect-ratio: 4 / 5; background: var(--fill); }
.pcard-body { padding: 11px 12px 10px; gap: 8px; }
.pcard-date { font-size: .75rem; color: var(--muted); }
.pcard-title { font-size: .86rem; color: var(--ink); }
.pcard-stats { border-color: var(--line); padding: 8px 2px; }
.pcard-stats b { font-size: .98rem; } .pcard-stats small { font-size: .66rem; color: var(--muted); }
.foot-box { border-radius: 10px; padding: 6px 8px; }
.foot-box.eng { background: rgba(255, 159, 10, .12); border: 0; } .foot-box.eng b { color: var(--yellow-text); }
.foot-box.ad { background: rgba(52, 199, 89, .12); border: 0; } .foot-box.ad b { color: var(--ink); }
.foot-box span { color: var(--muted); }
.top5 { background: var(--glass); border: 0; border-radius: 22px; box-shadow: var(--glass-shadow), 0 0 0 1.5px rgba(255, 140, 40, .35); padding: 16px; }
.grid-head h3 { font-size: 1.15rem; }
.heat-legend .muted { color: var(--muted); }

/* clientes (início do relatório) */
.ccard { background: var(--glass); border: 0; border-radius: 20px; box-shadow: var(--glass-shadow); }
.ccard-cover { background: var(--fill); height: 132px; }
.ccard-cover::after { background: linear-gradient(transparent 25%, rgba(0, 0, 0, .7)); }
.ccard-who b, .ccard-who small { color: #fff; }
.ccard-stats { border-color: var(--line); }
.ccard-stats small { color: var(--muted); }
.share-bar { background: var(--fill); }
.share-bar i { background: var(--accent-grad); }

/* janelas (editar post): cartão no computador, folha no celular */
.modal { background: var(--glass-strong); border: 0; border-radius: 22px; box-shadow: var(--shadow-lg); animation: g-pop .38s var(--spring); }
.modal::backdrop { background: rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.del-confirm { background: rgba(255, 59, 48, .08); border: 0; }

/* compactação: tabela de perfis cabe ao lado do financeiro */
.dash-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.ptable { min-width: 620px; }
.ptable thead th, .ptable td { padding-left: 12px; padding-right: 12px; }
.ptable td.num .ic { width: 15px; height: 15px; }
@media (max-width: 1200px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
.cat-inline { display: none; }
@media (max-width: 1600px) {
  .ptable th:nth-child(2), .ptable td:nth-child(2) { display: none; }
  .cat-inline { display: inline; }
}

/* ---------------- barra de abas (celular) ---------------- */
.tabbar { display: none; }
@media (max-width: 980px) {
  .menu-btn { display: none !important; }
  .main { padding: 12px 16px calc(104px + env(safe-area-inset-bottom)); }
  .sidebar { border-radius: 0 22px 22px 0; border-right: 0; box-shadow: var(--shadow-lg); width: 270px; }
  .tabbar {
    display: flex; position: fixed; z-index: 35; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 6px; gap: 4px; border-radius: 28px; background: var(--glass-bar);
    box-shadow: var(--glass-shadow), 0 12px 30px -12px rgba(0, 0, 0, .35);
  }
  .tabbar a, .tabbar button {
    flex: 1; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; border-radius: 22px; color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 600;
    cursor: pointer; transition: color .2s, transform .2s var(--spring), background .2s;
  }
  .tabbar a:active, .tabbar button:active { transform: scale(.9); }
  .tabbar a.active, .tabbar button.active { color: var(--green); background: var(--green-soft); }
  .tabbar .ic { width: 22px; height: 22px; }
  .top { flex-wrap: wrap; }
  .top-title { order: 3; flex-basis: 100%; }
  .top-title h1 { font-size: 1.9rem; }
  .top-actions { margin-left: auto; }
}
@media (max-width: 700px) {
  .main { padding: 10px 14px calc(100px + env(safe-area-inset-bottom)); }
  .top-title h1 { font-size: 1.75rem; }
  .kpi-row, .kpi-row.six { gap: 8px; }
  .kpi-card { padding: 12px; border-radius: 16px; }
  .kpi-card b { font-size: 1.2rem; }
  .grid2 > .panel, .wide-left > section, .form-narrow, .page-card, .ig-card { padding: 14px; border-radius: 18px; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pcard { border-radius: 16px; }
  .hero { padding: 14px; }
  .hero-txt h2 { font-size: 1.25rem; }
  .ptable-wrap { border-radius: 18px; }
  .search input { width: 100%; }
  /* agência compacta: logo ao lado do nome, sem a arte de fundo */
  .hero { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 0; gap: 12px; }
  .hero .al-lg { width: 52px; height: 52px; font-size: 2rem; border-radius: 14px; }
  .hero-art { display: none; }
  .hero-txt { flex: 1; min-width: 0; }
  .hero-row { gap: 6px; }
  .kpi-ic, .kpi-card .kpi-ic { width: 32px; height: 32px; border-radius: 9px; }
  .kpi-ic .ic { width: 17px; height: 17px; }
  .kpi-card small { font-size: .72rem; }
  .fin-item b { font-size: 1.1rem; }
  .fin-item .kpi-ic { width: 34px; height: 34px; }
  .panel-head h3 { font-size: 1.05rem; }
  /* janela de edição vira folha que sobe de baixo, com a "alça" do iOS */
  .modal { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 26px 26px 0 0; animation: g-sheet .45s var(--ease-out);
    padding-bottom: env(safe-area-inset-bottom); }
  .modal::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--fill-strong); margin: 8px auto 0; }
  .modal-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------- telas de acesso (login) ---------------- */
.auth-page { background: transparent; }
.auth-brand { background: var(--glass); border-right: .5px solid var(--line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.auth-brand-art span { opacity: .4; }
.auth-pitch h2 em { color: var(--green); text-shadow: none; }
.auth-pitch p { color: var(--ink2); }
.auth-pitch li span { background: var(--green-soft); border: 0; color: var(--green); }
.auth-card { background: var(--glass-strong); border: 0; box-shadow: var(--shadow-lg); border-radius: 24px; }
.auth-kicker { background: var(--green-soft); border: 0; color: var(--green); }
.auth-sub { color: var(--muted); }
.field input { background: var(--input); border: 0; height: 48px; }
.field input:focus { background: var(--surface); border: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.field input::placeholder { color: var(--muted); }
.switch .track { background: var(--fill-strong); border: 0; width: 51px; height: 31px; }
.switch .knob { width: 27px; height: 27px; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: left .3s var(--spring); }
.switch input:checked + .track { background: #34c759; border: 0; }
.switch input:checked + .track .knob { left: 22px; background: #fff; }
.auth-btn { background: var(--accent-grad); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px -12px rgba(23,148,71,.9); border-radius: 14px; }
.auth-btn.ghost { background: var(--fill); color: var(--green); border: 0; }
.auth-flash { border: 0; background: rgba(52, 199, 89, .14); color: var(--green); }
.auth-flash.error { background: rgba(255, 59, 48, .12); color: var(--red-text); }
.auth-steps { color: var(--ink2); } .auth-steps b { color: var(--ink); }
.auth-foot { color: var(--muted); }
@media (max-width: 900px) { .auth-side { background: transparent; } }

/* relatório (folha clara de impressão): sem papel de parede */
.report-body::before { display: none; }
.report-body { background: #1c1c1e; }

/* ---------------- animações ---------------- */
@keyframes g-pop { from { opacity: 0; transform: scale(.94) translateY(8px); } }
@keyframes g-sheet { from { transform: translateY(100%); } }
@keyframes g-rise { from { opacity: 0; transform: translateY(8px); } }
.main > *:not(.top) { animation: g-rise .4s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .sidebar, .tabbar, .modal, .kpi-card, .pcard, .ccard, .hero, .ptable-wrap, .auth-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
}
@media print { body::before { display: none; } .tabbar { display: none !important; } }

/* ================= Top 5: pódio (#1 em destaque + lista #2–#5) ================= */
.top5 { padding: 16px; overflow: visible; }
.top5 .grid-head { margin-bottom: 12px; }
.podium { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.podium .pcard:hover { transform: none; }

.top-feature { display: grid; grid-template-columns: minmax(150px, 42%) minmax(0, 1fr); border-radius: 18px; overflow: hidden;
  box-shadow: var(--glass-shadow), 0 0 0 2px #ff7a1a; background: var(--glass); }
.top-feature .tf-cover { aspect-ratio: auto; height: 100%; min-height: 260px; position: relative; }
.top-feature .tf-cover img { position: absolute; inset: 0; }
.tf-rank { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 11px; border-radius: 10px; font-weight: 900; font-size: 1.05rem;
  background: linear-gradient(135deg, #ffd54a, #ff9d00); color: #1a1000; box-shadow: 0 6px 16px rgba(255, 157, 0, .45); }
.top-feature .pcard-edit { left: 10px; bottom: 10px; }
.tf-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; min-width: 0; }
.tf-kicker { font-size: .74rem; font-weight: 700; color: #ff9f0a; letter-spacing: .01em; }
.tf-title { margin: 0; font-weight: 650; font-size: .98rem; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tf-meta { font-size: .76rem; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tf-ig { margin-left: auto; color: var(--green); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.tf-views { display: flex; align-items: baseline; gap: 6px; margin-top: auto; }
.tf-views b { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tf-views span { color: var(--muted); font-size: .8rem; }
.tf-stats { display: flex; gap: 14px; font-size: .86rem; color: var(--ink2); }
.tf-stats span { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.tf-stats .ic { color: var(--muted); }
.top-feature .pcard-foot { margin-top: 2px; }

.top-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.top-row { display: grid; grid-template-columns: 26px 46px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 14px; background: var(--fill); box-shadow: none; flex: 1; min-height: 64px; }
.top-row:hover { background: var(--fill-strong); box-shadow: none; transform: none; }
.tr-rank { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: .85rem;
  background: rgba(255, 159, 10, .16); color: #ff9f0a; }
.tr-thumb { width: 46px; height: 56px; border-radius: 9px; overflow: hidden; aspect-ratio: auto; position: relative; flex: none; }
.tr-thumb::after { display: none; }
.tr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tr-info { min-width: 0; }
.tr-title { margin: 0; font-size: .86rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-meta { font-size: .72rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-meta .ic { vertical-align: -1px; }
.tr-views { text-align: right; line-height: 1.15; }
.tr-views b { display: block; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tr-views span { font-size: .66rem; color: var(--muted); }
.tr-chev { color: var(--muted); display: grid; }
.top-row.editable { cursor: pointer; }

@media (max-width: 1100px) {
  .podium { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .top5 { padding: 12px; border-radius: 18px; }
  .top-feature { grid-template-columns: 112px minmax(0, 1fr); }
  .top-feature .tf-cover { min-height: 0; }
  .tf-body { padding: 10px 10px 10px; gap: 6px; }
  .tf-title { font-size: .88rem; }
  .tf-views b { font-size: 1.35rem; }
  .tf-stats { gap: 10px; font-size: .8rem; }
  .tf-rank { font-size: .9rem; padding: 3px 8px; }
  .top-feature .pcard-edit { display: none; }
  .top-feature .pcard-foot { grid-template-columns: 1fr; }
  .tr-small { display: none; }
  .top-row { grid-template-columns: 24px 40px minmax(0, 1fr) auto; gap: 8px; padding: 7px 8px; min-height: 58px; }
  .tr-chev { display: none; }
  .tr-thumb { width: 40px; height: 50px; }
}

/* Top 1 com imagem maior */
.podium { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.top-feature { grid-template-columns: minmax(220px, 55%) minmax(0, 1fr); }
.top-feature .tf-cover { min-height: 380px; }
.tf-rank { font-size: 1.2rem; padding: 6px 13px; top: 12px; left: 12px; }
.tf-views b { font-size: 2rem; }
@media (max-width: 1100px) {
  .top-feature { grid-template-columns: minmax(240px, 50%) minmax(0, 1fr); }
  .top-feature .tf-cover { min-height: 360px; }
}
@media (max-width: 700px) {
  .top-feature { grid-template-columns: minmax(0, 1fr); }
  .top-feature .tf-cover { aspect-ratio: 4 / 5; min-height: 0; max-height: 440px; height: auto; }
  .top-feature .tf-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .tf-body { padding: 12px 12px 12px; gap: 7px; }
  .tf-title { font-size: .95rem; }
  .tf-views b { font-size: 1.6rem; }
  .top-feature .pcard-foot { grid-template-columns: 1fr 1fr; }
  .tf-rank { font-size: 1.05rem; }
}
@media (max-width: 1100px) { .podium { grid-template-columns: minmax(0, 1fr); } }

/* Top 1 equilibrado: capa visível sem exagero */
.podium { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.top-feature { grid-template-columns: minmax(190px, 46%) minmax(0, 1fr); }
.top-feature .tf-cover { min-height: 300px; }
.tf-views b { font-size: 1.8rem; }
@media (max-width: 1100px) {
  .podium { grid-template-columns: minmax(0, 1fr); }
  .top-feature { grid-template-columns: minmax(200px, 40%) minmax(0, 1fr); }
  .top-feature .tf-cover { min-height: 280px; }
}
@media (max-width: 700px) {
  .top-feature { grid-template-columns: 44% minmax(0, 1fr); }
  .top-feature .tf-cover { aspect-ratio: 4 / 5; min-height: 0; max-height: none; height: auto; align-self: start; }
  .tf-body { padding: 10px; gap: 6px; }
  .tf-kicker { font-size: .68rem; }
  .tf-title { font-size: .86rem; }
  .tf-meta .tf-ig { display: none; }
  .tf-views b { font-size: 1.3rem; }
  .tf-views span { font-size: .72rem; }
  .tf-stats { font-size: .78rem; gap: 10px; }
  .top-feature .pcard-foot { grid-template-columns: 1fr; gap: 6px; }
  .top-feature .foot-box { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 5px 8px; }
  .top-feature .foot-box b { font-size: .85rem; }
  .tf-rank { font-size: .9rem; padding: 3px 9px; top: 8px; left: 8px; }
}

/* posição do post no ranking de visualizações do perfil (discreto, sob a tag) */
.view-pos { position: absolute; left: 11px; top: 64px; z-index: 1; font-size: .62rem; font-weight: 600; letter-spacing: .01em;
  color: rgba(255,255,255,.82); background: rgba(0,0,0,.42); padding: 1px 6px; border-radius: 5px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .view-pos { top: 61px; font-size: .58rem; } }