/*
 * Swipe — arquivo de ofertas.
 * A ideia visual é um arquivo de pastas: cada seção tem a sua cor de "orelha" (aba)
 * e essa cor se repete em todo lugar onde a seção aparece.
 */

:root {
  --viewer-bg: rgb(11 15 23 / .95);
  --viewer-ink: #FFFFFF;
  --dialog-backdrop: rgb(11 15 23 / .55);
  --paper: #E8ECF1;
  --paper-2: #DCE2EA;
  --sheet: #FFFFFF;
  --ink: #131A27;
  --ink-2: #4A5468;
  --ink-3: #6E7889;
  --line: #D2D8E1;
  --line-2: #E5E9EF;
  --focus: #2457E6;
  --danger: #B42335;
  --ok: #17704A;
  --warn: #8A5A00;
  --warn-dot: #E5A000; /* bolinha de aviso (aba Computadores): amarelo que aparece no claro e no escuro */

  --sheet-2: #F7F9FB;
  --on-ink: #FFFFFF;
  --ink-hover: #2A3550;
  --line-strong: #BCC5D2;
  --glass: rgb(255 255 255 / .94);
  --focus-ring: rgb(36 87 230 / .15);
  --focus-bg: #EEF3FE;
  --checker-a: #EEF1F5;
  --checker-b: #FFFFFF;
  --ok-bg: #E6F4EC;
  --ok-line: #B7DFCB;
  --danger-bg: #FBEFF1;
  --danger-line: #EDC1C8;
  --warn-bg: #FFF4DE;
  --warn-line: #EBD6A6;
  --info-bg: #E8EFFD;
  --admin-bg: #ECE9FA;
  --admin-ink: #4B3BA8;
  /* Área de edição da oferta pela situação (admin): fundo, borda e faixa do topo. */
  --state-draft-bar: #8A93A3;
  --state-published-bg: #F3FAF6;
  --state-published-line: #B7DFCB;
  --state-published-bar: #17704A;
  --state-scheduled-bg: #FFFAEF;
  --state-scheduled-line: #EBD6A6;
  --state-scheduled-bar: #C98A1B;
  color-scheme: light;
  --s-entregavel: #D48E1F;
  --s-bonus: #C64B68;
  --s-anunciantes: #0C83A6; /* aba Anunciantes (não é uma seção das ofertas) */
  --s-referencia-visual: #6A57CC;
  --s-vendas: #1C8A76;
  --s-checkout: #2D6CD3;
  --s-criativos: #E2662B;
  --new-a: #E2662B; --new-b: #C64B68; --new-ink: #FFFFFF; /* selo Nova: laranja → rosa, como a logo */
  --ads-up: #D63A24; --ads-up-ink: #FFFFFF; --ads-ok: #17804F; --ads-ok-ink: #FFFFFF; /* etiquetas dos anúncios */
  --ads-down: #E8B10C; --ads-down-ink: #2B1F00; --ads-off: #687082; --ads-off-ink: #FFFFFF;
  --badge-ring: #FFFFFF; /* borda do Nova e das etiquetas: separa da capa (a mesma nos dois temas) */
  --help-main: #22A35C; --help-main-ink: #FFFFFF; /* Minha conta: o canal principal do suporte (verde do WhatsApp) */
  /* Linha do gráfico de anúncios: passa no contraste e na faixa de luminosidade nos dois modos (não muda no escuro). */
  --ads-line: #E2662B;

  --f-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --r: 10px;
  --gutter: clamp(16px, 3vw, 32px);
  --shadow: 0 1px 2px rgb(19 26 39 / .06), 0 10px 28px -14px rgb(19 26 39 / .28);
}

/* ---------- Modo escuro ----------
 * Sem escolha, segue o aparelho. data-theme="light" ou "dark" (cookie swipe_theme) força um dos dois.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0D1117;
    --paper-2: #171D26;
    --sheet: #141922;
    --sheet-2: #1A202A;
    --ink: #E6EAF1;
    --ink-2: #A9B2C1;
    --ink-3: #7F899A;
    --line: #283039;
    --line-2: #1F262F;
    --line-strong: #3A4452;
    --on-ink: #10141B;
    --ink-hover: #C8D0DD;
    --focus: #7A9DFF;
    --danger: #FF7D8C;
    --ok: #4CC38A;
    --warn: #E8B45A;
    --warn-dot: #E8B45A;
    --glass: rgb(20 25 34 / .92);
    --focus-ring: rgb(122 157 255 / .28);
    --focus-bg: rgb(122 157 255 / .12);
    --checker-a: #1E242E;
    --checker-b: #262D38;
    --ok-bg: rgb(76 195 138 / .14);
    --ok-line: rgb(76 195 138 / .35);
    --danger-bg: rgb(255 125 140 / .12);
    --danger-line: rgb(255 125 140 / .35);
    --warn-bg: rgb(232 180 90 / .14);
    --warn-line: rgb(232 180 90 / .35);
    --info-bg: rgb(122 157 255 / .14);
    --admin-bg: rgb(140 123 234 / .16);
    --admin-ink: #B9ADFF;
    --state-draft-bar: #7F899A;
    --state-published-bg: #182529;
    --state-published-line: #285446;
    --state-published-bar: #4CC38A;
    --state-scheduled-bg: #232426;
    --state-scheduled-line: #5E4F36;
    --state-scheduled-bar: #E8B45A;
    --s-entregavel: #E3A43C;
    --s-bonus: #E46E89;
    --s-anunciantes: #38B3D6;
    --s-referencia-visual: #9283EE;
    --s-vendas: #31B59C;
    --s-checkout: #5E90EE;
    --s-criativos: #F08348;
    --new-a: #F08348; --new-b: #E4577A; --new-ink: #FFFFFF; /* selo Nova */
  --ads-up: #EF5A3F; --ads-up-ink: #FFFFFF; --ads-ok: #2E9E68; --ads-ok-ink: #FFFFFF; /* etiquetas dos anúncios */
  --ads-down: #E8B45A; --ads-down-ink: #2B1F00; --ads-off: #5B6374; --ads-off-ink: #FFFFFF;
  --help-main: #4CC38A; --help-main-ink: #10141B;
    --ads-up: #EF5A3F; --ads-up-ink: #FFFFFF; --ads-ok: #2E9E68; --ads-ok-ink: #FFFFFF; /* etiquetas dos anúncios */
    --ads-down: #E8B45A; --ads-down-ink: #2B1F00; --ads-off: #5B6374; --ads-off-ink: #FFFFFF;
    --help-main: #4CC38A; --help-main-ink: #10141B;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -14px rgb(0 0 0 / .7);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23A9B2C1' stroke-width='1.6'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E"); }
}
:root[data-theme="dark"] {
  --paper: #0D1117;
  --paper-2: #171D26;
  --sheet: #141922;
  --sheet-2: #1A202A;
  --ink: #E6EAF1;
  --ink-2: #A9B2C1;
  --ink-3: #7F899A;
  --line: #283039;
  --line-2: #1F262F;
  --line-strong: #3A4452;
  --on-ink: #10141B;
  --ink-hover: #C8D0DD;
  --focus: #7A9DFF;
  --danger: #FF7D8C;
  --ok: #4CC38A;
  --warn: #E8B45A;
  --warn-dot: #E8B45A;
  --glass: rgb(20 25 34 / .92);
  --focus-ring: rgb(122 157 255 / .28);
  --focus-bg: rgb(122 157 255 / .12);
  --checker-a: #1E242E;
  --checker-b: #262D38;
  --ok-bg: rgb(76 195 138 / .14);
  --ok-line: rgb(76 195 138 / .35);
  --danger-bg: rgb(255 125 140 / .12);
  --danger-line: rgb(255 125 140 / .35);
  --warn-bg: rgb(232 180 90 / .14);
  --warn-line: rgb(232 180 90 / .35);
  --info-bg: rgb(122 157 255 / .14);
  --admin-bg: rgb(140 123 234 / .16);
  --admin-ink: #B9ADFF;
  --state-draft-bar: #7F899A;
  --state-published-bg: #182529;
  --state-published-line: #285446;
  --state-published-bar: #4CC38A;
  --state-scheduled-bg: #232426;
  --state-scheduled-line: #5E4F36;
  --state-scheduled-bar: #E8B45A;
  --s-entregavel: #E3A43C;
  --s-bonus: #E46E89;
  --s-anunciantes: #38B3D6;
  --s-referencia-visual: #9283EE;
  --s-vendas: #31B59C;
  --s-checkout: #5E90EE;
  --s-criativos: #F08348;
  --new-a: #F08348; --new-b: #E4577A; --new-ink: #FFFFFF; /* selo Nova */
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -14px rgb(0 0 0 / .7);
  color-scheme: dark;
}
:root[data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23A9B2C1' stroke-width='1.6'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E"); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html.lb-open { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--f-body); }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--on-ink); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.mono { font-family: var(--f-mono); font-size: 13px; }
.muted { color: var(--ink-3); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row--end { justify-content: flex-end; }
.phone-contact { display: flex; align-items: center; gap: 8px; }
.phone-contact .input { flex: 1; min-width: 0; }
.user-contact { display: flex; align-items: center; gap: 8px; }
.user-contact > a:first-child { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.t-right { text-align: right; }

/* ---------- Topo ---------- */

.topbar { display: flex; align-items: center; gap: 14px 24px; padding: 16px var(--gutter) 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
/* A logo tem o próprio disco escuro: fica igual no modo claro e no escuro. */
.brand__logo { width: 64px; height: auto; flex: none; margin: -6px 0; }
.brand__tag { font: 500 12px/1 var(--f-mono); color: var(--ink-3); }
.usernav { display: flex; align-items: center; gap: 18px; font-weight: 600; font-size: 14px; }
.usernav a, .linklike { color: var(--ink-2); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; }
.usernav a:hover, .linklike:hover, .usernav a[aria-current] { color: var(--ink); }
.usernav form { margin: 0; }
.usernav .area-switch {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--sheet); color: var(--ink); white-space: nowrap;
}
.usernav .area-switch:hover { border-color: var(--ink-3); }

/* ---------- Abas de pasta (assinatura do site) ---------- */

.tabs { display: flex; gap: 5px; padding: 6px var(--gutter) 0; overflow-x: auto; scrollbar-width: none; align-items: flex-end; }
.tabs::-webkit-scrollbar { display: none; }
/* A faixa só rola para os lados; evita o arraste elástico vertical no Safari do celular. */
.tabs, .jump:not(.jump--box), .lb__tools { overflow-y: hidden; overscroll-behavior-y: none; }
.scroll-hints { --scroll-hint-bg: var(--paper); position: relative; min-width: 0; }
.scroll-hints:has(> .table-wrap) { --scroll-hint-bg: var(--sheet); }
.scroll-hints:has(> .table-wrap) > .scroll-hints__arrow { top: 22px; height: 44px; }
.scroll-hints__arrow {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 100%; min-height: 44px; padding: 0;
  border: 0; border-radius: 0; color: var(--ink-2); cursor: pointer;
  background: linear-gradient(var(--scroll-hint-direction), var(--scroll-hint-bg) 15%, transparent);
}
.scroll-hints__arrow[hidden] { display: none; }
.scroll-hints__arrow--left { --scroll-hint-direction: to right; left: 0; justify-items: start; padding-left: 8px; }
.scroll-hints__arrow--right { --scroll-hint-direction: to left; right: 0; justify-items: end; padding-right: 8px; }
.scroll-hints__arrow:hover { color: var(--ink); }
.scroll-hints__arrow:focus-visible { outline-offset: -2px; }
.scroll-hints__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scroll-hints--jump { --scroll-hint-bg: var(--sheet); position: sticky; top: 0; z-index: 5; margin: 0 calc(var(--gutter) * -1) 8px; }
.scroll-hints--jump > .jump { position: relative; margin: 0; }
.scroll-hints--tools { min-width: 0; }
.scroll-hints--tools > .scroll-hints__arrow { --scroll-hint-bg: var(--viewer-bg); color: var(--viewer-ink); }
@media (max-width: 720px) {
  .scroll-hints--tools { order: 5; flex-basis: 100%; }
}
.tab {
  --tab: var(--ink);
  position: relative; flex: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 9px; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0;
  background: color-mix(in srgb, var(--tab) 8%, var(--paper-2)); color: var(--ink-2);
  font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s, color .15s, padding .15s;
}
.tab::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--tab); }
.tab:hover { color: var(--ink); background: color-mix(in srgb, var(--tab) 15%, var(--paper-2)); }
.tab[aria-current="page"] {
  background: var(--sheet); color: var(--ink); z-index: 1; margin-bottom: -1px; padding-bottom: 10px; padding-top: 12px;
  box-shadow: inset 0 3px 0 var(--tab);
}
.drawer { position: relative; background: var(--sheet); border-top: 1px solid var(--line); min-height: calc(100vh - 130px); padding: 28px var(--gutter) 72px; }

/* ---------- Cabeçalhos de página ---------- */

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.page-title { font: 750 clamp(28px, 3.4vw, 40px)/1.04 var(--f-display); letter-spacing: -0.03em; margin: 0; }
.page-sub { margin: 6px 0 0; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.eyebrow { margin: 0 0 6px; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.eyebrow--tab { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.eyebrow--tab::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tab); }
.count { font: 500 12px/1 var(--f-mono); color: var(--ink-3); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 12px; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Filtros ---------- */

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 24px; }
.input, .select, .textarea {
  height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); padding: 0 12px; color: var(--ink); max-width: 100%;
}
.input, .textarea { width: 100%; }
/* Olhinho dos campos de senha (ui.js): o botão fica dentro do campo, à direita. */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap .input { padding-right: 44px; }
.pw-eye {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 34px; height: 32px; padding: 0; border: 0; border-radius: 6px;
  display: grid; place-items: center; background: transparent; color: var(--ink-3); cursor: pointer;
}
.pw-eye:hover, .pw-eye[aria-pressed="true"] { color: var(--ink); }
.pw-eye:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pw-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
input::-ms-reveal { display: none; } /* o olho próprio do Edge */
.filters .input { width: auto; flex: 1 1 220px; }
/* Admin > Ofertas: quantas em cada situação, em cima da lista (clicar filtra; o atual fica marcado, com ×) */
.status-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.status-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--sheet); color: var(--ink-2); font-size: 13px; text-decoration: none; white-space: nowrap; }
.status-chip b { color: var(--ink); font-weight: 700; }
.status-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.status-chip.is-current { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.status-chip__x { color: var(--ink-3); font-size: 15px; line-height: 1; }
.status-chip:hover .status-chip__x { color: var(--danger); }
.status-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.status-chip--published .status-chip__dot { background: var(--state-published-bar); }
.status-chip--scheduled .status-chip__dot { background: var(--state-scheduled-bar); }
.status-chip--draft .status-chip__dot { background: var(--state-draft-bar); }
.status-chip--sem-anuncios .status-chip__dot { background: var(--danger); }
.filters__keep { margin-left: auto; color: var(--ink-2); white-space: nowrap; cursor: pointer; } /* Ofertas: "Manter filtros", no canto direito */
.search-input {
  flex: 1 1 170px; min-width: 170px; max-width: 320px; height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px 0 36px; color: var(--ink);
  background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236E7889' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5.5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") no-repeat 12px 50%;
}
.search-input:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.fav-filter {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--sheet); color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
}
.fav-filter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fav-filter:hover { border-color: var(--ink-3); color: var(--ink); }
.fav-filter[aria-pressed="true"] { color: var(--ink); border-color: var(--s-bonus); background: color-mix(in srgb, var(--s-bonus) 12%, var(--sheet)); }
.fav-filter[aria-pressed="true"] svg { fill: var(--s-bonus); stroke: var(--s-bonus); }
@media (max-width: 640px) { .search-input { flex: 1 1 100%; } }
.input--search { max-width: 360px; }
.input--path { max-width: 640px; }
.input--short { width: 110px !important; flex: none !important; }
.input--date { width: auto; height: 34px; margin-left: 6px; }
.select { padding-right: 32px; appearance: none; background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%234A5468' stroke-width='1.6'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center; cursor: pointer; }
.select--xs { height: 28px; font-size: 12px; padding: 0 24px 0 8px; background-position: right 8px center; flex: 1; min-width: 0; }
.textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.clear { font-size: 14px; color: var(--ink-2); }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 8px; border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink);
  font: 600 14px/1 var(--f-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
/* Admin da oferta com alterações não salvas (admin.js): o "Salvar alterações" fica azul, com um ponto. */
.btn.is-dirty, .btn.is-dirty:hover { background: var(--focus); border-color: var(--focus); color: var(--on-ink); }
.btn.is-dirty:hover { filter: brightness(1.08); }
.btn.is-dirty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.btn--ghost { background: var(--sheet); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--paper); border-color: var(--line-strong); }
.btn--danger { background: var(--sheet); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.btn--danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Cards ---------- */

.page-head__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.viewswitch { display: inline-flex; height: 40px; box-sizing: border-box; align-items: center; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet); }
.viewswitch button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink-2); font-weight: 600; font-size: 13px; cursor: pointer;
}
.viewswitch svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.viewswitch button:hover { color: var(--ink); }
.viewswitch button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
/* Formato (Criativos): o mesmo visual, com links (Todos | Vídeos | Imagens). */
.formatswitch a {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 7px;
  color: var(--ink-2); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap;
}
.formatswitch a:hover { color: var(--ink); }
.formatswitch a[aria-current="true"] { background: var(--ink); color: var(--on-ink); }
.formatswitch svg { stroke-linejoin: round; }

/* Lista: imagem pequena à esquerda e as informações ao lado, uma oferta por linha. */
.grid.grid--list { grid-template-columns: 1fr; gap: 10px; }
.grid--list .card { flex-direction: row; align-items: stretch; }
.grid--list .card:hover { transform: none; }
.grid--list .card__thumb { width: 150px; flex: none; aspect-ratio: auto; min-height: 112px; border-bottom: 0; border-right: 1px solid var(--line-2); }
.grid--list .card__hover { display: none; }
.grid--list .card__body { padding: 14px 70px 14px 18px; gap: 6px; justify-content: center; }
.grid--list .card__title { font-size: 17px; -webkit-line-clamp: 1; }
.grid--list .card__domain--list { display: block; }
.grid--list .card__foot { margin-top: 2px; padding-top: 0; justify-content: flex-start; }
.grid--list .card__badges { top: 8px; left: 8px; gap: 4px; }
.grid--list .badge-new, .grid--list .ads-status { font-size: 10px; padding: 3px 5px; border-width: 1.5px; }
@media (max-width: 560px) {
  .grid--list .card__thumb { width: 96px; min-height: 96px; }
  .grid--list .card__body { padding: 10px 52px 10px 12px; }
  .grid--list .card__title { font-size: 15px; -webkit-line-clamp: 2; }
  .page-head__side { align-items: flex-start; }
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 24px 18px; }
.card {
  position: relative; display: flex; flex-direction: column; background: var(--sheet);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card__domain--list { display: none; }
.card__thumb { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--paper); overflow: hidden; border: 0; padding: 0; border-bottom: 1px solid var(--line-2); }
.card__thumb img, .card__thumb video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
button.card__thumb { cursor: zoom-in; }
.card--contain .card__thumb img { object-fit: contain; object-position: center; padding: 10px; }
.card__nothumb { position: absolute; inset: 0; display: grid; place-items: center; font: 700 34px/1 var(--f-display); color: var(--ink-3); letter-spacing: -0.03em; }
.card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card__domain { font: 500 12px/1.3 var(--f-mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__title { margin: 0; font: 650 16px/1.25 var(--f-display); letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Bolinhas sempre à esquerda e o selo dos anúncios à direita (decisão do dono); a altura do selo vale também sem ele,
   para as bolinhas ficarem na mesma linha em todos os cards. */
.card__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
/* Sem espaço para os dois, o selo fica acima, à direita, e as bolinhas descem à esquerda. */
.grid:not(.grid--list) .card__foot { flex-direction: row-reverse; flex-wrap: wrap; }
.grid:not(.grid--list) .card__foot > .ads-badge { order: -1; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; white-space: normal; }
.grid:not(.grid--list) .card__foot > .dots { margin-right: auto; }
.card__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 12px; color: var(--ink-2); }
.card__meta > * + *::before { content: "·"; margin: 0 6px; color: var(--ink-3); }
.card__meta time { font-family: var(--f-mono); font-size: 11.5px; }
/* Categoria sempre sozinha na primeira linha (cortada com … se não couber); idioma e data na de baixo. */
.card__meta .card__cat { flex-basis: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__meta .card__cat + *::before { content: none; margin: 0; }
.card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.card__tag { position: relative; z-index: 2; font-size: 11.5px; color: var(--ink-2); text-decoration: none; padding: 2px 7px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-2); }
.card__tag:hover { color: var(--ink); border-color: var(--line-strong); }
/* Valor do checkout: mesmo formato da tag, na cor da seção Checkout. */
.card__price {
  font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  color: color-mix(in srgb, var(--s-checkout) 70%, var(--ink)); background: color-mix(in srgb, var(--s-checkout) 12%, var(--sheet));
  border: 1px solid color-mix(in srgb, var(--s-checkout) 35%, var(--sheet));
}
.card__hover {
  position: absolute; inset: auto 0 0; padding: 40px 14px 12px; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(transparent, rgb(11 15 23 / .88) 45%); color: #fff;
  opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; pointer-events: none;
}
.card__hover strong { font: 650 15px/1.25 var(--f-display); }
.card__hover span { font: 500 12px/1.3 var(--f-mono); color: rgb(255 255 255 / .78); overflow-wrap: anywhere; }
.card:hover .card__hover, .card:focus-within .card__hover { opacity: 1; transform: none; }
@media (hover: none) { .card__hover { display: none; } }
.card__cat { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__count { position: absolute; right: 8px; bottom: 8px; font: 500 11px/1 var(--f-mono); background: rgb(19 26 39 / .82); color: #fff; padding: 5px 7px; border-radius: 5px; }
.card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.card--section { border-top: 3px solid var(--tab); }

.badge-new { position: absolute; top: 10px; left: 10px; font: 700 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--new-a), var(--new-b)) padding-box; color: var(--new-ink); padding: 4px 7px; border-radius: 6px;
  border: 2px solid var(--badge-ring);
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--new-b) 60%, transparent); }
.badge-new--inline { position: static; }
.card__badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.card__badges .badge-new { position: static; }
.ads-status { display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 6px; border: 2px solid var(--badge-ring); background: var(--ads-off); color: var(--ads-off-ink);
  box-shadow: 0 2px 8px -2px rgb(0 0 0 / .35); cursor: help; white-space: nowrap; }
.ads-status svg { width: 9px; height: 9px; flex: none; fill: currentColor; }
.ads-status--escalando { background: var(--ads-up); color: var(--ads-up-ink); }
.ads-status--validado { background: var(--ads-ok); color: var(--ads-ok-ink); }
.ads-status--queda { background: var(--ads-down); color: var(--ads-down-ink); }
.ads-status--inline { box-shadow: none; }

.fav {
  position: absolute; top: 8px; right: 8px; z-index: 2; min-width: 36px; height: 36px; padding: 0 9px; border-radius: 999px; border: 0;
  background: var(--glass); display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; box-shadow: 0 1px 4px rgb(19 26 39 / .18);
  color: var(--ink);
}
.fav svg { flex: none; }
.fav__count { font: 600 12px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.fav--label .fav__count { padding: 3px 6px; border-radius: 999px; background: var(--paper); color: var(--ink-2); }
.fav svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.8; transition: fill .15s, stroke .15s, transform .15s; }
.fav:hover svg { transform: scale(1.1); }
.fav[aria-pressed="true"] svg { fill: var(--s-bonus); stroke: var(--s-bonus); }
/* Balão do coração ao passar o mouse (ou focar pelo teclado): o que ele faz e quantas pessoas favoritaram. */
.fav__tip {
  position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: max-content; max-width: 220px;
  display: grid; gap: 2px; padding: 8px 11px; border-radius: 8px; background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow);
  font: 400 12.5px/1.4 var(--f-body); text-align: left; white-space: normal; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.fav:hover .fav__tip, .fav:focus-visible .fav__tip { opacity: 1; visibility: visible; transform: none; transition: opacity .15s .3s, transform .15s .3s, visibility 0s .3s; }
.fav__tip-title { font-weight: 700; }
.fav__tip-count { margin-top: 3px; padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--on-ink) 25%, transparent); opacity: .8; }
.fav__tip-count[hidden] { display: none; }
.fav--label .fav__tip { left: 0; right: auto; }
@media (hover: none) { .fav__tip { display: none; } }
.fav--label { position: relative; top: auto; right: auto; width: auto; height: 40px; border-radius: 8px; padding: 0 14px; gap: 8px; display: inline-flex; align-items: center; border: 1px solid var(--line); box-shadow: none; font-weight: 600; font-size: 14px; }

.dots { display: inline-flex; gap: 4px; flex: none; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--tab); background: transparent; }
.dot.is-on { background: var(--tab); }

/* ---------- Página da oferta ---------- */

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a { color: var(--ink-2); }
/* Página da oferta: caminho à esquerda, Anterior/Próxima (na última lista aberta) à direita. */
.offer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
.offer-top .crumbs { margin-bottom: 0; }
.offer-step { display: flex; gap: 6px; }
.offer-step .is-disabled { opacity: .45; pointer-events: none; }
/* Topo "Capa à direita" (offer_layout = capa, ou ?topo=novo): informações à esquerda, capa à direita, faixa de números. */
.offer-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 24px 40px; align-items: start; margin-bottom: 24px; }
.offer-hero--nocover { grid-template-columns: minmax(0, 1000px); }
.offer-hero__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.offer-hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; color: var(--ink-3); }
.offer-hero__eyebrow a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.offer-hero__eyebrow a:hover { color: var(--ink); text-decoration: underline; }
.offer-hero__eyebrow > * + *:not(.badge-new):not(.ads-status)::before { content: "·"; margin-right: 14px; color: var(--line-strong); }
.offer-hero__eyebrow .badge-new + *::before, .offer-hero__eyebrow .ads-status + *::before { content: none; }
.offer-hero__eyebrow .mono { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; } /* o domínio numa linha só dele */
.offer-hero__eyebrow .mono::before { content: none; }
.offer-hero h1 { margin: 0; font: 750 clamp(30px, 4.4vw, 50px)/1.02 var(--f-display); letter-spacing: -0.032em; }
.offer-hero__tags { margin-top: -2px; }
.offer-stats { display: flex; flex-wrap: wrap; margin: 4px 0 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
.offer-stats > div { flex: 1 1 130px; padding: 12px 16px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); margin: -1px 0 0 -1px; } /* divisórias também quando a faixa quebra a linha */
.offer-stats dt { font: 500 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.offer-stats dd { margin: 6px 0 0; display: grid; gap: 2px; }
.offer-stats b { font: 750 21px/1.15 var(--f-display); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.offer-stats small { font-size: 12.5px; color: var(--ink-3); }
.offer-stats small.is-up { color: var(--ok); font-weight: 600; }
.offer-stats small.is-down { color: var(--danger); font-weight: 600; }
.offer-hero .offer-links { margin-top: 0; }
.offer-hero__cover { margin: 0; display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tab) 22%, var(--sheet)), var(--sheet) 70%); }
.offer-hero__cover button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; }
.offer-hero__cover img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; border-radius: 10px; }
.offer-hero__cover figcaption { display: flex; align-items: center; gap: 8px; font: 500 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.offer-hero__cover figcaption::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tab); }
@media (max-width: 900px) {
  .offer-hero { grid-template-columns: minmax(0, 1fr); }
  .offer-hero__cover { order: -1; justify-self: center; width: min(100%, 360px); }
  .offer-hero__cover img { max-height: 340px; }
}
@media (max-width: 600px) {
  .offer-hero__cover { width: min(100%, 260px); padding: 10px; } /* no celular, a capa não toma a primeira tela inteira */
  .offer-hero__cover img { max-height: 220px; }
}
/* Topo "Lateral fixa" (offer_layout = lateral, ou ?topo=novo2): cabeçalho e conteúdo à esquerda, lateral fixa à direita (mídia, números, links). */
.offer-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); column-gap: 36px; align-items: start; }
.offer-lead { grid-column: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 24px; }
.offer-lead h1 { margin: 0; font: 750 clamp(30px, 4.4vw, 50px)/1.02 var(--f-display); letter-spacing: -0.032em; }
.offer-layout__content { grid-column: 1; min-width: 0; }
.offer-side { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 16px; display: grid; gap: 14px; max-height: calc(100vh - 32px); overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 64px; /* espaço para a barra fixa de baixo */ }
.offer-side .offer-hero__cover video { display: block; width: 100%; max-height: 420px; border-radius: 10px; background: var(--ink); }
.offer-side .offer-hero__cover img { max-height: 380px; }
.offer-side .offer-links { margin-top: 0; }
.offer-side .offer-links__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.offer-stats--side > div { flex-basis: 45%; }
.offer-proof { margin: -4px 0 0; font-size: 15px; color: var(--ink-2); }
.offer-proof a { color: inherit; text-decoration: none; }
.offer-proof b { color: var(--ink); }
.offer-proof a:hover b { text-decoration: underline; }
.offer-proof .is-up { color: var(--ok); font-weight: 600; }
.offer-proof .is-down { color: var(--danger); font-weight: 600; }
@media (max-width: 900px) {
  .offer-layout { grid-template-columns: minmax(0, 1fr); }
  .offer-side { grid-column: 1; grid-row: auto; position: static; max-height: none; overflow: visible; padding-bottom: 0; margin-bottom: 24px; }
  .offer-side .offer-hero__cover { justify-self: center; width: min(100%, 360px); }
}
@media (max-width: 600px) {
  .offer-side .offer-hero__cover { width: min(100%, 260px); }
  .offer-side .offer-hero__cover img, .offer-side .offer-hero__cover video { max-height: 240px; }
}
.offer-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 24px; }
.offer-head > .offer-head__desc { max-width: none; }
/* Botões do topo clássico numa faixa com o mesmo fundo dos quadros, centralizados. */
.offer-head > .offer-head__actions { justify-content: center; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.offer-head__eyebrow { display: flex; align-items: center; gap: 10px; color: var(--ink-3); }
.offer-head__eyebrow .mono { min-width: 0; overflow-wrap: anywhere; } /* domínio comprido quebra no celular */
.offer-head h1 { margin: 0; font: 750 clamp(30px, 4.4vw, 50px)/1.02 var(--f-display); letter-spacing: -0.032em; }
.offer-head__desc { margin: 0; font-size: 17px; color: var(--ink-2); max-width: 70ch; }
.offer-head__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
/* Categoria, idioma, data e tags num quadro com o mesmo fundo dos links logo abaixo; as tags ficam brancas para não se misturar. */
.facts { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 4px 0 0; padding: 14px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.facts .tag { background: var(--sheet); }
.facts dt { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 6px; }
.facts dd { margin: 0; font-weight: 600; }
.facts dd a { text-decoration: none; }
.facts dd a:hover { text-decoration: underline; }
.facts__tags dd { font-weight: 400; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); text-decoration: none; cursor: pointer; }
.tag:hover { color: var(--ink); border-color: var(--line-strong); }

.jump {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(var(--gutter) * -1) 8px; padding: 10px var(--gutter); background: var(--glass);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-2);
}
.jump::-webkit-scrollbar { display: none; }
/* Topo clássico: a barra fica entre as informações e os botões, num quadro como o deles, e continua grudando no topo. */
.offer-head:has(+ .jump--box) { margin-bottom: 12px; }
.jump--box { margin: 0 0 12px; padding: 10px; flex-wrap: wrap; justify-content: center; overflow: visible; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
@media (max-width: 720px) { .jump--box { position: static; } } /* em várias linhas, grudar no topo tomaria a tela do celular */
.jump > a, .jump > span {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink);
}
.jump > a::before, .jump > span::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--tab); }
.jump > a:hover { background: color-mix(in srgb, var(--tab) 10%, var(--sheet)); border-color: color-mix(in srgb, var(--tab) 45%, var(--line)); }
.jump .is-empty { color: var(--ink-3); border-style: dashed; font-weight: 500; }
.jump .is-empty::before { background: transparent; border: 1.5px solid var(--tab); }

.sec { --tab-line: color-mix(in srgb, var(--tab) 38%, var(--line)); margin-top: 40px; scroll-margin-top: 64px; }
.sec__label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 18px 9px;
  background: color-mix(in srgb, var(--tab) 13%, var(--sheet)); border: 1px solid var(--tab-line); border-bottom: 0;
  border-radius: 12px 12px 0 0; font: 700 16px/1 var(--f-display); letter-spacing: -0.01em; position: relative; top: 1px;
}
.sec__head { display: flex; align-items: flex-end; gap: 10px; }
.fav--sec { height: 32px; padding: 0 12px; font-size: 13px; margin-bottom: 6px; gap: 6px; }
.fav--sec svg { width: 16px; height: 16px; }
.sec__label::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tab); }
.sec__panel {
  border: 1px solid var(--tab-line); border-radius: 0 var(--r) var(--r) var(--r); padding: 18px;
  background: linear-gradient(color-mix(in srgb, var(--tab) 5%, var(--sheet)), var(--sheet) 160px);
}

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.thumbs--cover { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: var(--paper); cursor: zoom-in;
}
.thumb__meta { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; justify-content: flex-end; align-items: center; gap: 6px; pointer-events: none; }
.thumb__meta .thumb__n { position: static; }
.thumb__name { min-width: 0; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 600; line-height: 1; background: rgb(19 26 39 / .82); color: #fff; padding: 5px 7px; border-radius: 5px; }
/* Ideias com IA (página da oferta): botão que abre um menu com a IA, a base e as ideias. */
.ai-spark { width: 16px; height: 16px; flex: none; fill: currentColor; }
.ai-menu { position: relative; }
.ai-menu > summary { list-style: none; }
.ai-menu > summary::-webkit-details-marker { display: none; }
.ai-menu > summary .ai-spark, .ai-locked .ai-spark { color: var(--s-referencia-visual); }
.ai-menu[open] > summary { border-color: var(--ink); }
.ai-menu__panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 320px; max-width: calc(100vw - 32px);
  display: grid; gap: 10px; padding: 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.ai-menu__tools { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.ai-menu__tools label { position: relative; cursor: pointer; }
.ai-menu__tools input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ai-menu__tools span { display: block; padding: 7px 0; border-radius: 7px; text-align: center; font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
.ai-menu__tools input:checked + span { background: var(--ink); color: var(--on-ink); }
.ai-menu__tools input:focus-visible + span { box-shadow: 0 0 0 3px var(--focus-ring); }
.ai-menu__base { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ai-menu__base .select { height: 34px; font-size: 13px; }
.ai-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ai-menu__list button, .ai-menu__list a {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font: 600 14px/1.2 var(--f-body); text-align: left; cursor: pointer;
}
.ai-menu__list button .ai-spark, .ai-menu__list a .ai-spark { width: 14px; height: 14px; color: var(--s-referencia-visual); }
.ai-menu__list button:hover, .ai-menu__list button:focus-visible, .ai-menu__list a:hover, .ai-menu__list a:focus-visible { background: var(--paper); outline: none; }
.ai-menu__list a { text-decoration: none; }
.ai-menu__list a .ai-locked__tag { margin-left: auto; padding-left: 10px; white-space: nowrap; }
.ai-menu--locked .ai-menu__list a > span:not(.ai-locked__tag) { color: var(--ink-2); }
.ai-menu--locked .ai-menu__panel { width: 380px; } /* nome da ideia e o selo na mesma linha */
.ai-menu__note { margin: 0; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.ai-menu__note.is-done { color: var(--ok); }
.ai-usage__sum { margin: 0 0 8px; font-size: 14px; }
.ai-locked__tag { font-size: 12px; font-weight: 600; color: var(--ink-3); }

/* Links da oferta: uma linha por tipo (página, checkout, anúncios), com o rótulo na cor da seção. */
.offer-links { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.offer-links__row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 14px; align-items: center; padding: 10px 14px; }
.offer-links__row + .offer-links__row { border-top: 1px solid var(--line); }
.offer-links__label { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.offer-links__label::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--tab); }
.offer-links__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.offer-links .btn { height: 36px; }
.offer-links .btn strong { font-weight: 700; }
/* Página da Biblioteca com o perfil público: o botão dela, Perfil e Google colados (quebram linha juntos). */
.btn-join { display: inline-flex; max-width: 100%; }
.btn-join > .btn { border-radius: 0; margin-left: -1px; }
.btn-join > .btn:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.btn-join > .btn:last-child { border-radius: 0 8px 8px 0; }
.btn-join > .btn:hover { position: relative; z-index: 1; }
.btn--sub { padding: 0 11px; font-weight: 500; color: var(--ink-2); }
.btn--search { border-style: dashed; color: var(--ink-2); }
.btn--search svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 560px) { .offer-links__row { grid-template-columns: 1fr; } }
.checkouts { border: 0; padding: 0; margin: 0; min-width: 0; }
.checkouts legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.checkouts__list { display: grid; gap: 8px; }
.checkout-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; grid-template-areas: "cur amount remove" "url url open";
  gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--paper);
}
.checkout-row__cur { grid-area: cur; width: 100%; }
.checkout-row__amount { grid-area: amount; }
.checkout-row__url { grid-area: url; }
.checkout-row [data-open-link] { grid-area: open; }
.checkout-row__actions { grid-area: open; display: flex; gap: 6px; }
/* Botões "Capturar": só aparecem com a extensão do Low Swipe instalada (ela avisa a página: classe ext-captura). */
[data-capture] { display: none; }
.ext-captura [data-capture] { display: inline-flex; }
.ext-captura [data-capture-hint] { display: none; }
.ext-captura [data-capture].is-captured { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
/* Títulos das abas (decisão do dono): Capturar ainda não feito em laranja; feito, verde como acima. */
.asec__actions [data-capture]:not(.is-captured):not(:disabled), .asec__actions [data-adlib-ads]:not(.is-captured):not(:disabled) {
  color: var(--s-criativos); border-color: color-mix(in srgb, var(--s-criativos) 45%, var(--line)); background: color-mix(in srgb, var(--s-criativos) 10%, var(--sheet)); }
.asec__actions [data-adlib-ads].is-captured { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
.capture-hint { margin: 8px 0 0; }
.checkout-row [data-row-remove] { grid-area: remove; justify-self: end; }
.checkout-row--lib { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "url" "acts" "hint"; }
.checkout-row__hint { grid-area: hint; font-size: 12.5px; line-height: 1.45; color: var(--danger); }
.checkout-row__hint[hidden] { display: none; }
.checkout-row__name { grid-area: name; }
.checkout-row .iconbtn[hidden] { display: block !important; visibility: hidden; }
.checkouts__foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-top: 8px; }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .3s ease; }
.thumb:hover img, .thumb:hover video { transform: scale(1.03); }
.thumbs--cover .thumb { aspect-ratio: 1; }
.thumbs--cover .thumb img { object-fit: contain; object-position: center; padding: 8px; }
.thumbs--media .thumb { aspect-ratio: 9 / 16; }
.thumb__n { position: absolute; right: 6px; bottom: 6px; font: 500 11px/1 var(--f-mono); background: rgb(19 26 39 / .82); color: #fff; padding: 4px 6px; border-radius: 4px; }
.thumb__play {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgb(19 26 39 / .72); pointer-events: none;
}
.thumb__play::after { content: ""; position: absolute; left: 18px; top: 14px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff; }

/* Só os formatos que existem aparecem e dividem a largura (o print ganha um pouco mais). */
.page-assets { display: flex; flex-wrap: wrap; gap: 14px; }
.page-assets > .asset { flex: 1 1 260px; min-width: 0; }
.page-assets > .asset--print { flex-grow: 1.2; }
.asset { background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.asset__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.asset__kind { font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.asset__none { margin: 0; color: var(--ink-3); font-size: 14px; padding: 18px 0; border: 1.5px dashed var(--line); border-radius: 8px; text-align: center; }
.asset .thumbs--print { grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); }
.asset .thumbs--print .thumb:only-child { aspect-ratio: 4 / 5; }
.doc { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.doc + .doc { padding-top: 12px; border-top: 1px solid var(--line-2); }
.doc { min-width: 0; max-width: 100%; }
.doc__excerpt { margin: 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Visualizador (modal) ---------- */

.lb { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--viewer-bg); color: #fff; animation: lb-in .16s ease-out; }
.lb[hidden] { display: none; }
@keyframes lb-in { from { opacity: 0; } }
.lb__bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid rgb(255 255 255 / .09); }
.lb__meta { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.lb__kind { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--f-mono); color: rgb(255 255 255 / .78); }
.lb__kind::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tab, #fff); }
.lb__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lb__tools { display: flex; gap: 6px; flex: none; }
.lb__tool { height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid rgb(255 255 255 / .18); background: transparent; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
.lb__tool:hover { background: rgb(255 255 255 / .1); }
.lb__count { flex: none; font: 500 13px/1 var(--f-mono); color: rgb(255 255 255 / .7); min-width: 44px; text-align: right; }
.lb__close { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .1); color: #fff; font-size: 18px; cursor: pointer; }
.lb__close:hover { background: rgb(255 255 255 / .2); }
.lb__body { position: relative; flex: 1; min-height: 0; display: flex; }
.lb__stage { flex: 1; min-width: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 18px 76px; outline: none; overscroll-behavior: contain; }
.lb__stage > img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; background: #fff; }
.lb__stage.is-tall { align-items: flex-start; }
/* Print alto: rola na vertical, na largura original (print de celular não estica no computador), até 1100 px. */
.lb__stage.is-tall > img { max-height: none; width: auto; max-width: min(100%, 1100px); }
.lb__stage > video { max-width: 100%; max-height: 100%; border-radius: 6px; background: #000; }
.lb__stage--md { align-items: flex-start; }
/* Vídeo com transcrição: texto numa coluna ao lado. */
.lb__stage.has-transcript { gap: 18px; align-items: stretch; }
.lb__stage.has-transcript > video { flex: 1 1 auto; min-width: 0; max-height: 100%; align-self: center; }
.lb__transcript {
  flex: 0 0 340px; max-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); border-radius: 10px; color: rgb(255 255 255 / .9);
}
.lb__transcript[hidden] { display: none; }
.lb__transcript-title { margin: 0; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .6); }
.lb__transcript-text { flex: 1; min-height: 0; overflow: auto; white-space: pre-wrap; font-size: 14.5px; line-height: 1.6; overscroll-behavior: contain; }
.lb__transcript .lb__tool { align-self: flex-start; }
.thumb__tx { position: absolute; left: 6px; top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; background: rgb(19 26 39 / .82); color: #fff; padding: 4px 6px; border-radius: 4px; }
.lb__loading { color: rgb(255 255 255 / .7); }
.lb__nav {
  position: absolute; top: 50%; z-index: 2; width: 54px; height: 54px; margin-top: -27px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .2); background: rgb(22 29 42 / .78); color: #fff; cursor: pointer; backdrop-filter: blur(6px);
  display: grid; place-items: center;
}
.lb__nav:hover { background: rgb(40 50 70 / .9); }
.lb__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.lb__nav--prev { left: 12px; }
.lb__nav--next { right: 12px; }

.md-wrap { width: min(100%, 860px); }
.md-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 12px; font: 12px/1.5 var(--f-mono); color: rgb(255 255 255 / .7); }
.md-meta dt { color: rgb(255 255 255 / .45); }
.md-meta dd { margin: 0; overflow-wrap: anywhere; }
.md-meta a { color: #fff; }
.md { background: var(--sheet); color: var(--ink); border-radius: 10px; padding: 34px clamp(18px, 5vw, 56px); font-size: 16px; line-height: 1.65; overflow-wrap: break-word; }
.md h1, .md h2, .md h3, .md h4 { font-family: var(--f-display); line-height: 1.15; letter-spacing: -0.015em; margin: 1.4em 0 .5em; }
.md h1:first-child, .md h2:first-child { margin-top: 0; }
.md img { max-width: 100%; height: auto; border-radius: 6px; margin: 12px 0; display: inline-block; }
.md a { color: var(--focus); }
.md table { border-collapse: collapse; width: 100%; font-size: 14px; }
.md td, .md th { border: 1px solid var(--line); padding: 6px 8px; }
.md blockquote { margin: 1em 0; padding-left: 14px; border-left: 3px solid var(--line); color: var(--ink-2); }
.md-raw { margin: 0; white-space: pre-wrap; word-break: break-word; font: 13px/1.6 var(--f-mono); background: #0F1520; color: #D6DDE9; padding: 24px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .1); }

/* ---------- Página HTML salva ---------- */

.page-preview { background: var(--paper-2); }
.pv { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.pv__nav { display: inline-flex; gap: 6px; }
.pv__bar { flex: none; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px var(--gutter); background: var(--sheet); border-bottom: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--tab); }
.pv__title { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 3px; }
.pv__title strong { font: 650 15px/1.2 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv__kind { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.pv__devices { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pv__devices button { height: 32px; padding: 0 12px; border: 0; background: var(--sheet); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.pv__devices button + button { border-left: 1px solid var(--line); }
.pv__devices button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.pv__stage { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 14px; }
.pv__stage iframe { width: 100%; height: 100%; border: 0; background: #fff; border-radius: 6px; box-shadow: var(--shadow); transition: width .25s ease; }
.pv[data-device="tablet"] iframe { width: min(100%, 820px); }
.pv[data-device="mobile"] iframe { width: min(100%, 390px); }

/* ---------- Mensagens e vazios ---------- */

.flash { padding: 12px 16px; border-radius: 8px; margin: 0 0 18px; font-size: 14px; border: 1px solid; }
.flash--auto { display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: opacity .35s, transform .35s; }
.flash--auto.is-leaving { opacity: 0; transform: translateY(-6px); }
/* Avisos do cabeçalho (show_flashes(true)): presos embaixo da tela, por cima do conteúdo e acima da barra escura fixa. */
.toasts { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
  width: min(560px, calc(100vw - 32px)); display: grid; gap: 8px; pointer-events: none; }
.toasts .flash { margin: 0; pointer-events: auto; box-shadow: 0 10px 28px -8px rgb(0 0 0 / .35); }
.toasts .flash--auto.is-leaving { transform: translateY(8px); }
.flash__close { flex: none; border: 0; background: transparent; color: inherit; opacity: .6; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; }
.flash__close:hover { opacity: 1; }
.flash--ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.flash--error { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.flash--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.empty { padding: 56px 24px; text-align: center; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--ink-2); display: grid; justify-items: center; gap: 4px; }
.empty p { margin: 0 0 8px; }
.empty__title { font: 700 20px/1.2 var(--f-display); color: var(--ink); }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 36px; }
.pager__info { font: 500 13px var(--f-mono); color: var(--ink-3); }

/* ---------- Login e páginas simples ---------- */

.page-login, .page-plain { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login { width: min(100%, 410px); }
.login--wide { width: min(100%, 520px); }

/* Página de status (/vps-swipe-status?ver=completo): um item por linha, bolinha na cor do estado. */
.health__summary { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; border: 1px solid; font-weight: 700; }
.health__summary.is-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.health__summary.is-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.health__summary.is-fail { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.health__group { margin: 18px 0 8px; font: 500 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.health__group span { margin-left: 4px; font: 400 12.5px/1.3 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.health__summary + .health__group { margin-top: 0; }
.health__mode { margin: 16px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--paper); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.health__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; }
.health__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 14px; }
.health__item + .health__item { border-top: 1px solid var(--line-2); }
.health__dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.health__item .health__dot { color: var(--ink-3); }
.health__item.is-ok .health__dot, .health__item.is-ok .health__state { color: var(--ok); }
.health__item.is-warn .health__dot, .health__item.is-warn .health__state { color: var(--warn); }
.health__item.is-fail .health__dot, .health__item.is-fail .health__state { color: var(--danger); }
.health__name { font-weight: 600; font-size: 14px; }
.health__state { font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.health__detail { grid-column: 2 / -1; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.health__info { margin: 0; border: 1px solid var(--line); border-radius: 10px; }
.health__info div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; padding: 8px 14px; font-size: 13px; }
.health__info div + div { border-top: 1px solid var(--line-2); }
.health__info dt { color: var(--ink-3); }
.health__info dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 480px) { .health__info div { grid-template-columns: 1fr; gap: 2px; } }
.health__foot { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.login__tabs { display: flex; gap: 4px; padding-left: 16px; }
.login__tabs span { width: 40px; height: 12px; border-radius: 7px 7px 0 0; background: var(--tab); }
.login__card { background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; padding: 32px 28px 28px; box-shadow: var(--shadow); }
.login__brand { margin: 0; line-height: 0; }
/* A imagem é display: block (regra geral): centraliza pela margem. Na página de espera do redirecionador também. */
.login__brand--center .login__logo, .redirect-wait .login__logo { margin-inline: auto; }
.login__logo { width: 112px; height: auto; }
.login__tag { margin: 8px 0 26px; color: var(--ink-2); font-size: 14px; }
.login__tag--center { text-align: center; }
.login__title { margin: 0 0 6px; font: 700 20px/1.2 var(--f-display); }
.login__forgot { margin: 12px 0 0; text-align: center; font-size: 14px; }
.login__switch { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--ink-2); }
.login__hint { margin: 0 0 14px; color: var(--ink-2); font-size: 14px; }
.plain-card { width: min(100%, 520px); background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; padding: 32px; box-shadow: var(--shadow); }
.plain-card h1 { margin: 0 0 10px; font: 750 28px/1.1 var(--f-display); letter-spacing: -0.02em; }
.plain-card p { color: var(--ink-2); }

/* ---------- Formulários ---------- */

.field { display: grid; gap: 6px; margin: 0; min-width: 0; align-content: start; } /* numa linha com outro campo mais alto, o título e o campo ficam no topo, alinhados */
.field label, .field legend { font-weight: 600; font-size: 13px; }
fieldset.field { border: 0; padding: 0; gap: 8px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; }
.field-row--half { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* campo sozinho fica com meia linha (Capturada em) */
@media (max-width: 480px) { .field-row--half { grid-template-columns: minmax(0, 1fr); } }
.hint { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.public-access-hint { display: none; margin: 0; }
.field:has(input[name="audience"][value="public"]:checked) > .public-access-hint { display: block; }
.public-access-hint--waiting { color: var(--danger); }
.public-access-hint--released { color: var(--ok); }
.radio, .check { display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.radio input, .check input { width: 16px; height: 16px; accent-color: var(--ink); }

/* ---------- Admin ---------- */

.admin { background: var(--paper); }
.topbar--admin { border-bottom: 1px solid var(--line); background: var(--paper); }
.topbar--admin .brand { margin-right: 0; }
.adminnav { display: flex; gap: 2px; flex-wrap: wrap; margin-right: auto; }
.adminnav a { padding: 8px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.adminnav a:hover { color: var(--ink); background: rgb(255 255 255 / .55); }
.adminnav a[aria-current] { background: var(--sheet); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.navmenu { position: relative; }
.navmenu > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px;
  font-weight: 600; font-size: 14px; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary:hover, .navmenu[open] > summary { color: var(--ink); background: rgb(255 255 255 / .55); }
.navmenu > summary.is-current { background: var(--sheet); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.navmenu[open] .usermenu__chev { transform: rotate(180deg); }
.navmenu__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 180px; padding: 6px; display: grid; gap: 2px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.adminnav .navmenu__panel a { display: block; }
/* Grupo dentro de um menu (Ofertas > Classificação): título pequeno e os itens recuados. */
.navmenu__group { display: grid; gap: 2px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line-2); }.navmenu__heading { padding: 2px 12px 2px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.adminnav .navmenu__panel .navmenu__sub { padding-left: 22px; }
.admin-main { max-width: 1360px; margin: 0 auto; padding: 26px var(--gutter) 72px; }
.admin-breadcrumb { margin-bottom: 16px; color: var(--ink-2); font-size: 14px; }
.admin-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 0; }
.admin-breadcrumb li { min-width: 0; overflow-wrap: anywhere; }
.admin-breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--ink-3); }
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.admin-head .page-sub { max-width: 80ch; }
.back { display: inline-block; font-size: 14px; color: var(--ink-2); text-decoration: none; margin-bottom: 8px; }
.back:hover { color: var(--ink); }
/* Barra fixa embaixo no centro quando o topo da página sai da tela (admin da oferta e página da oferta): escura, em
   grupos separados; só "Ofertas"/"Lista" têm o nome escrito, os outros mostram o nome num balão ao passar o mouse. */
.back-float { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--ink); color: var(--on-ink);
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / .55); }
.back-float[hidden] { display: none; }
/* Admin da oferta: com "Imagens da página (HTML)" aberto, a barra some (decisão do dono: confundia com as imagens). */
body:has(#html-images > details[open]) .back-float { display: none; }
.back-float > a, .back-float > button, .back-float > span:not(.back-float__sep) { position: relative; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; height: 36px; min-width: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: none;
  font: 600 13px/1 var(--f-body); color: inherit; text-decoration: none; cursor: pointer; }
.back-float > a:hover, .back-float > button:hover, .back-float > :focus-visible { background: color-mix(in srgb, var(--on-ink) 16%, transparent); }
.back-float > .is-disabled, .back-float > :disabled { opacity: .35; cursor: default; }
.back-float__sep { flex: none; width: 1px; height: 20px; margin: 0 4px; background: color-mix(in srgb, var(--on-ink) 28%, transparent); }
.back-float__icon { flex: none; width: 14px; text-align: center; font-size: 16px; line-height: 1; }
.back-float svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.back-float [aria-pressed="true"] svg { fill: var(--s-bonus); stroke: var(--s-bonus); }
.back-float .fav__count { display: none; }
/* Balão com o nome acima do botão. */
.back-float__text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--on-ink);
  font: 500 12.5px/1.3 var(--f-body); box-shadow: var(--shadow); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s, visibility 0s .15s; }
.back-float > :hover .back-float__text, .back-float > :focus-visible .back-float__text { opacity: 1; visibility: visible; transition: opacity .15s .15s, visibility 0s .15s; }
.back-float__text--show, .back-float > * .back-float__text--show { position: static; transform: none; max-width: none; overflow: visible;
  text-overflow: clip; padding: 0 2px 0 0; background: none; box-shadow: none; font: inherit; opacity: 1; visibility: visible; }
/* Admin numa coluna só: a faixa do Salvar ocupa o pé da tela, a barra fica logo acima dela. */
@media (max-width: 1100px) {
  .back-float--admin { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 720px) {
  .back-float { bottom: calc(12px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
  .back-float--admin { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .back-float > a, .back-float > button, .back-float > span:not(.back-float__sep) { height: 40px; min-width: 40px; }
}
.panel { background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
/* Formulário da oferta (admin) com a cor da situação salva: Rascunho neutro, Publicada verde, Agendada âmbar. */
.offer-state { --offer-bg: var(--sheet); box-shadow: inset 0 4px 0 var(--state-draft-bar); padding-top: 22px; }
.offer-state--published { --offer-bg: var(--state-published-bg); background: var(--state-published-bg); border-color: var(--state-published-line); box-shadow: inset 0 4px 0 var(--state-published-bar); }
.offer-state--scheduled { --offer-bg: var(--state-scheduled-bg); background: var(--state-scheduled-bg); border-color: var(--state-scheduled-line); box-shadow: inset 0 4px 0 var(--state-scheduled-bar); }
.offer-state__tag { margin: 0; }
/* Cada campo do formulário da oferta num bloco próprio. Tom tirado da cor do texto: funciona sobre o fundo de qualquer
   situação e nos dois temas. A legenda dos fieldsets vira conteúdo normal (float) para ficar dentro do bloco. */
.offer-state > .field, .offer-state > .field-row { padding: 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 3.5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.offer-state > fieldset.field > legend { float: left; width: 100%; }
.offer-state > .field-row .field { padding: 0; background: none; box-shadow: none; }
.panel__title { margin: 0 0 12px; font: 700 17px/1.2 var(--f-display); }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); align-items: center; }
.list li:last-child { border-bottom: 0; }
.list a { font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list a:hover { text-decoration: underline; }
.list__meta { display: flex; gap: 8px; align-items: center; flex: none; color: var(--ink-3); }

/* Painel do admin: duas colunas (Membros e Ofertas), cada uma com os números em cima e os quadros embaixo. */
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 22px 28px; align-items: start; }
.dash__col { display: grid; gap: 14px; min-width: 0; }
.dash__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--tab); }
.dash__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 750 22px/1 var(--f-display); letter-spacing: -0.02em; }
.dash__title::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--tab); }
.dash__head a { font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.dash__head a:hover { color: var(--ink); text-decoration: underline; }
.dash .panel__title { font-size: 16px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { display: grid; gap: 6px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); text-decoration: none; }
.tile:hover { border-color: var(--line-strong); }
.tile__value { display: inline-flex; align-items: center; gap: 8px; font: 750 28px/1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); }
.tile__label { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.tile.is-zero .tile__value { color: var(--ink-3); }
.tile.is-warn { border-color: var(--warn-line); background: var(--warn-bg); }
.tile.is-warn .tile__value, .tile.is-warn .tile__label { color: var(--warn); }
.list__stack { display: grid; gap: 2px; min-width: 0; }
.list__stack a { min-width: 0; }
@media (max-width: 520px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Atividade dos membros no admin (app/activity.php). */
.two-col + .two-col { margin-top: 18px; }
.panel__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.panel__hint { font: 400 12.5px/1.3 var(--f-body); color: var(--ink-3); }
.panel__tabs { margin-left: auto; display: inline-flex; gap: 2px; font: 600 12.5px/1 var(--f-body); }
.panel__tabs a { padding: 6px 9px; border-radius: 7px; color: var(--ink-2); text-decoration: none; }
.panel__tabs a[aria-current] { background: var(--ink); color: var(--on-ink); }
.list__main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; min-width: 0; }
.list__main .list__sub { grid-column: 2; }
.list__sub { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-3); }
.list--ranked { counter-reset: rank; }
.list--ranked li::before { counter-increment: rank; content: counter(rank); flex: none; width: 22px; font: 600 12px/1 var(--f-mono); color: var(--ink-3); }
.list--ranked li a, .list--ranked li > span:not(.list__meta) { margin-right: auto; }
.online-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); flex: none; }
.offline-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: none; }
.table .seen { white-space: nowrap; }
/* Títulos de coluna que ordenam a tabela (Admin > Ofertas). */
.table th a.sort { display: inline-flex; align-items: center; gap: 5px; color: inherit; font-weight: inherit; text-decoration: none; }
.table th a.sort:hover, .table th a.sort.is-current { color: var(--ink); }
.sort__icon { font-size: 10px; opacity: .55; }
.sort.is-current .sort__icon { opacity: 1; }
.views-cell { white-space: nowrap; }
/* Visualizações no topo da edição da oferta (admin). */
.offer-views { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.offer-views__who { position: relative; }
.offer-views__who summary { cursor: pointer; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.offer-views__who[open] .list { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 300px; padding: 4px 14px; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.table .offer-cell .mono { white-space: normal; overflow-wrap: anywhere; } /* domínio comprido quebra em vez de alargar a tabela */
/* Tela Segurança do admin: liga/desliga com explicação embaixo. */
.switch { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet-2); cursor: pointer; }
.switch input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); }
.switch .hint { display: block; margin-top: 4px; font-weight: 400; line-height: 1.5; }
.setting-select { width: auto; min-width: 180px; }
.security-alerts { margin-top: 18px; }
.sessions-list li { flex-wrap: wrap; }
/* Navegadores com o painel liberado (Admin > Segurança): o texto quebra a linha em vez de cortar. */
.admin-devices li { flex-wrap: wrap; }
.admin-devices .list__main { display: block; flex: 1 1 280px; }
.admin-devices .list__sub { white-space: normal; margin-top: 2px; }
.sessions-all { margin-top: 10px; align-items: center; }
.sessions-all .hint { flex: 1 1 260px; }
.share-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.activity { margin-bottom: 18px; }
.danger-zone + .activity, .panel + .activity { margin-top: 28px; } /* no fim da página do usuário, depois do Excluir (decisão do dono) */
.activity__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 18px; margin: 0 0 18px; }
.activity__facts dt { margin-bottom: 4px; font: 500 11px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.activity__facts dd { margin: 0; font-weight: 600; font-size: 14px; }
.activity__page { display: block; margin-top: 2px; font-weight: 400; font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
/* Gráfico de barras: uma por dia, altura proporcional às páginas vistas (--h). */
.activity__chart { display: flex; align-items: flex-end; gap: 3px; height: 90px; border-bottom: 1px solid var(--line); }
.activity__chart span { flex: 1; height: max(var(--h), 3px); border-radius: 3px 3px 0 0; background: var(--s-checkout); }
.activity__chart .is-zero { background: var(--line); }
.activity__chart .is-today { background: var(--ink); }
.activity__axis { display: flex; justify-content: space-between; margin: 5px 0 0; font: 500 11px/1.2 var(--f-mono); color: var(--ink-3); }
.activity__sub { margin: 22px 0 10px; font: 700 15px/1.2 var(--f-display); }
.share-flag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 5px; background: var(--warn-bg); color: var(--warn); font: 600 11.5px/1.2 var(--f-body); white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; text-decoration: none; display: grid; gap: 6px; }
.stat:hover { border-color: var(--line-strong); }
.stat__value { font: 750 34px/1 var(--f-display); letter-spacing: -0.03em; }
.stat__label { font-size: 13px; color: var(--ink-2); }

.table-wrap { overflow-x: auto; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table th { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); background: var(--sheet-2); white-space: nowrap; }
.table td a { font-weight: 600; text-decoration: none; }
.table td a:hover { text-decoration: underline; }
.table .mono { white-space: nowrap; }
.w-check { width: 36px; }
.offer-cell { display: flex; align-items: center; gap: 12px; min-width: 280px; }
.offer-cell > span:last-child { display: grid; gap: 2px; min-width: 0; }
.offer-cell__thumb { flex: none; width: 44px; height: 54px; border-radius: 6px; overflow: hidden; background: var(--paper); border: 1px solid var(--line-2); }
.offer-cell__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.offer-cell__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cell-title { display: block; font-weight: 600; max-width: 520px; }
.inline-form { display: flex; gap: 8px; align-items: center; max-width: 460px; }

.status { display: inline-flex; align-items: center; font: 500 12px/1 var(--f-mono); padding: 5px 8px; border-radius: 5px; white-space: nowrap; }
td.status { display: table-cell; }
.status--published { background: var(--ok-bg); color: var(--ok); }
.status--draft { background: var(--paper); color: var(--ink-2); }
.status--busy { background: var(--info-bg); color: var(--focus); }
.status--error { background: var(--danger-bg); color: var(--danger); white-space: normal; }
.access { display: inline-flex; font: 500 12px/1 var(--f-mono); padding: 5px 8px; border-radius: 5px; white-space: nowrap; background: var(--paper); color: var(--ink-2); }
.access--lifetime, .access--active { background: var(--ok-bg); color: var(--ok); }
.access--expired, .access--blocked { background: var(--danger-bg); color: var(--danger); }
.access--admin, .access--team { background: var(--admin-bg); color: var(--admin-ink); }
.access--team { border: 1px dashed var(--admin-ink); } /* Equipe: a cor do admin, tracejada */

.bulkbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 12px; }
.bulkbar__form { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.bulkbar--stack .bulkbar__info { flex-basis: 100%; margin-right: 0; } /* a seleção embaixo da quantidade, como em Importar ofertas */
.bulkbar__info { margin: 0; margin-right: auto; color: var(--ink-2); }
/* Importar ofertas: a contagem numa linha; embaixo a seleção e as ações, e "Excluir importadas e cadastradas" no canto direito. */
.bulkbar--import .bulkbar__info { flex-basis: 100%; margin-right: 0; }
/* Importar ofertas: a barra (contagem, selecionar, importar, excluir) fica presa no topo ao rolar a lista. */
.bulkbar--import { position: sticky; top: 0; z-index: 5; margin: 0 -12px 12px; padding: 10px 12px; background: var(--paper);
  border-bottom: 1px solid transparent; }
.bulkbar--import.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 12px -10px rgb(0 0 0 / .35); }
.bulkbar__end { margin-left: auto; }
.ignored { margin-top: 18px; color: var(--ink-2); }
.ignored ul { font-size: 12px; }

.form-narrow { max-width: 760px; }
.danger-zone { margin-top: 14px; }
.save-log { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-2); }
.save-log__last { margin: 0; }
.save-log__changes { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; }
.save-log__more { margin-top: 8px; }
.save-log__more summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.save-log__list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }

/* Edição de oferta */
.edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
/* A caixa lateral fica parada na tela e rola por dentro; o botão Salvar fica sempre à vista no pé dela. */
.edit-aside { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 2px;
  overflow-anchor: none; } /* sem compensar a rolagem: o resultado do "Capturar Páginas" cresce sem empurrar o título para cima */
/* Print da Página de vendas aberto na lateral ("Ver print da PV"): o formulário só fica escondido. */
.edit-aside.is-pv > :not([data-pv-panel]) { display: none; }
.pv-panel { display: grid; gap: 10px; }
.pv-panel[hidden] { display: none; }
.pv-panel__bar { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.pv-panel__title { flex: 1 1 100%; display: grid; gap: 2px; font-size: 14px; }
.pv-panel__bar .select { flex: 1; min-width: 0; }
.pv-panel__images { display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--sheet); }
.pv-panel__images button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pv-panel__images img { display: block; width: 100%; height: auto; }
.edit-aside__save { position: sticky; bottom: -1px; z-index: 2; margin: 0 -20px -20px; padding: 12px 20px 20px; background: linear-gradient(transparent, var(--offer-bg, var(--sheet)) 14px); } /* a cor do fundo da situação */
.edit-main .sec__panel { padding: 14px; }
.asec { --tab-line: color-mix(in srgb, var(--tab) 38%, var(--line)); margin-top: 26px; scroll-margin-top: 16px; } /* botões do título levam a aba ao topo */
.asec .sec__label { font-size: 15px; padding: 9px 16px 8px; }

.dropzone {
  position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 18px; border-radius: 10px;
  border: 2px dashed var(--line); background: var(--sheet); color: var(--ink-2); cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--line-strong); }
.dropzone.is-over { border-color: var(--focus); background: var(--focus-bg); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropzone:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.dropzone--main { padding: 34px 24px; background: var(--sheet); border-color: var(--line-strong); }
.dropzone--main strong { font: 700 18px/1.2 var(--f-display); color: var(--ink); }
.dropzone--sm { padding: 12px; font-size: 14px; }
.files + .dropzone--sm { margin-top: 12px; } /* depois dos arquivos da aba */
/* Admin da oferta: a área do topo e as das abas com arquivos ficam escondidas; aparecem com "Mostrar áreas de envio"
   (show-drops) ou enquanto um arquivo é arrastado sobre a página (is-dragging). */
.drops-toggle { display: flex; width: fit-content; margin: 0 0 10px auto; font-size: 13px; color: var(--ink-2); }
.edit-layout:not(.show-drops):not(.is-dragging) :is(.dropzone--main, .files + .dropzone--sm) { display: none; }
.asec .sec__panel > .files:first-child { margin-top: 0; }
.import-drop { margin-top: 16px; }
/* Importar ofertas: "Adicionar arquivos" abre as instruções, a pasta e a área de arrastar (começam fechadas). */
.import-setup { margin: -8px 0 24px; }
.import-setup .page-sub { max-width: 80ch; margin: 0 0 16px; }
.import-setup .filters { margin-bottom: 0; }
.setup-toggle .usermenu__chev { stroke: currentColor; }
.setup-toggle[aria-expanded="true"] .usermenu__chev { transform: rotate(180deg); }
.import-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.import-links .btn { height: 26px; padding: 0 9px; font-size: 12px; }

.queue { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.queue li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; font-size: 13px; padding: 9px 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; }
.queue .q__name { font-family: var(--f-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue .q__status { font-weight: 600; color: var(--ink-2); }
.queue--sec { margin: 10px 0 0; } /* embaixo da área de arrastar da aba */
.queue--sec:empty { display: none; }
.queue progress { grid-column: 1 / -1; width: 100%; height: 4px; appearance: none; border: 0; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.queue progress::-webkit-progress-bar { background: var(--line-2); }
.queue progress::-webkit-progress-value { background: var(--focus); }
.queue progress::-moz-progress-bar { background: var(--focus); }
.queue .is-done .q__status { color: var(--ok); }
/* Captura ou envio trabalhando (admin.js workingStatus): bolinha girando antes do texto, mesmo com "reduzir movimento". */
.queue li.is-working .q__status::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite !important; }
.queue .is-done progress::-webkit-progress-value { background: var(--ok); }
/* Saída do aviso concluído (admin.js dismissDone): some aos poucos e fecha o espaço (o -6px do margin come o gap).
 * O !important ganha da regra de "reduzir movimento", como no .wait-loader (decisão do dono: sumir aos poucos). */
.queue li.is-leaving { opacity: 0; overflow: hidden; transition: opacity .3s ease, height .4s ease, padding .4s ease, border-width .4s ease, margin .4s ease !important; }
.queue .is-error { border-color: var(--danger-line); background: var(--danger-bg); }
.queue .is-error .q__status { color: var(--danger); white-space: normal; }

.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; margin-top: 12px; }
.file { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--sheet); display: flex; flex-direction: column; }
.file__thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--paper); overflow: hidden; text-decoration: none; }
.file__thumb img, .file__thumb video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.file__icon { font: 700 18px/1 var(--f-mono); color: var(--ink-2); padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--sheet); }
.file__body { padding: 9px 10px 10px; display: grid; gap: 6px; font-size: 12px; min-width: 0; }
.file__kind { color: var(--ink-2); font-weight: 600; }
.transcript-state { display: grid; gap: 4px; padding: 6px 9px; border-radius: 8px; font-size: 11.5px; background: var(--paper); border: 1px solid var(--line-2); }
.transcript-state--completed { background: var(--ok-bg); border-color: var(--ok-line); }
.transcript-state--error { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.transcript-state__actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
/* "Ver" é link e "Refazer" é botão: o mesmo desenho para os dois (fonte, cor e sublinhado iguais, visitado ou não). */
.transcript-state__actions .linklike, .transcript-state__actions .linklike:visited {
  font: 600 11.5px/1.5 var(--f-body); color: var(--ink-2); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.transcript-state__actions .linklike:hover { color: var(--ink); }
.transcript-state__label { font-weight: 600; color: var(--ink-3); }
.transcript-state--completed .transcript-state__label { color: var(--ok); }
.transcript-state--error .transcript-state__label { color: var(--danger); }
.transcript-state--queued .transcript-state__label, .transcript-state--submitting .transcript-state__label, .transcript-state--processing .transcript-state__label { color: var(--ink-2); }
.transcript-state--submitting .transcript-state__label::before, .transcript-state--processing .transcript-state__label::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin 1s linear infinite; vertical-align: -1px;
}
.transcript-state .linklike { font-size: 11.5px; text-decoration: underline; }
.transcript-state__error { font-size: 11px; color: var(--danger); overflow-wrap: anywhere; }
.asec__tools { display: flex; justify-content: flex-end; margin: -6px 0 10px; }
/* Título das abas Página de vendas e Checkout: Abrir e Capturar dos links (admin.js, renderSectionActions). */
.asec__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 12px; }
.asec__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
/* Cada par (Abrir + Capturar) é um botão dividido: uma peça só, as metades dividem a borda do meio e cada uma tem
   o seu clique, a sua cor (Capturado ✓ só na metade da direita) e o seu hover. */
.asec__pair { display: inline-flex; }
.asec__pair > .btn { border-radius: 0; }
.asec__pair > .btn:first-child { border-radius: 8px 0 0 8px; }
.asec__pair > .btn + .btn { border-radius: 0 8px 8px 0; margin-left: -1px; }
.asec__pair > .btn + .btn:not(:last-child) { border-radius: 0; } /* Copiar, no meio do par do checkout */
.asec__pair > .btn:hover, .asec__pair > .btn:focus-visible, .asec__pair > .btn.is-captured { position: relative; z-index: 1; }
/* Sem a extensão o Capturar some: a metade que sobra fica com os cantos inteiros. */
:root:not(.ext-captura) .asec__pair:has(> [data-capture]) > .btn:first-child,
:root:not(.ext-anuncios) .asec__pair:has(> [data-adlib-ads]) > .btn:first-child { border-radius: 8px; }
:root:not(.ext-captura) .asec__pair:has(> .btn:nth-child(3)) > .btn:first-child { border-radius: 8px 0 0 8px; }
:root:not(.ext-captura) .asec__pair > .btn:nth-child(2):has(+ [data-capture]) { border-radius: 0 8px 8px 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.file__label { height: 30px; font-size: 12px; padding: 0 8px; transition: border-color .2s, box-shadow .2s; }
.file__label.is-saved { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.file__label.is-error { border-color: var(--danger); }
.file__name { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-state { font-size: 11.5px; color: var(--ink-3); }
.video-state.is-busy { color: var(--focus); font-weight: 600; }
.video-state.is-error { color: var(--danger); }
.file__when { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file__actions { display: grid; gap: 6px; min-width: 0; }
.file__original { display: flex; flex-wrap: wrap; gap: 6px; }
.file__original > .btn { flex: 1; justify-content: center; white-space: nowrap; }
.file__move { width: 100%; }
.file__buttons { display: flex; gap: 4px; align-items: center; }
.file__delete { margin-left: auto; }
.iconbtn { flex: none; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); background: var(--sheet); cursor: pointer; display: grid; place-items: center; font-size: 13px; padding: 0; }
.iconbtn:hover:not([disabled]) { background: var(--paper); }
.iconbtn[disabled] { opacity: .35; cursor: default; }
.iconbtn--danger { color: var(--danger); }
.iconbtn.whatsapp-contact { width: 40px; height: 40px; color: var(--ok); text-decoration: none; }
.whatsapp-contact .usermenu__icon { width: 21px; height: 21px; margin: 0; color: inherit; }
.iconbtn.whatsapp-contact[aria-disabled="true"] { opacity: .4; cursor: default; color: var(--ink-3); }
.tagpick { position: relative; display: flex; flex-wrap: wrap; gap: 4px; }
.tagpick .tag { height: 24px; font-size: 12px; padding: 0 8px; }
/* Recolhida: 3 linhas de tags (24px cada + 4px entre elas). */
.tagpick.is-collapsed { max-height: 80px; overflow: hidden; }
.tagpick__more { justify-self: start; padding: 2px 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tagpick__more:hover { color: var(--ink); }

/* ---------- Responsivo ---------- */

@media (max-width: 1100px) {
  .edit-layout { grid-template-columns: 1fr; }
  .edit-aside { position: static; order: -1; max-height: none; overflow: visible; }
}
@media (max-width: 720px) {
  .topbar { padding-top: 12px; }
  .brand__tag { display: none; }
  .brand__logo { width: 54px; margin: -4px 0; }
  .tab { padding: 9px 12px 8px; font-size: 13px; }
  .drawer { padding-top: 22px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .card__body { padding: 10px 10px 12px; }
  .card__title { font-size: 15px; }
  .legend { display: none; }
  .sec__panel { padding: 12px; }
  .lb__bar { padding: 8px 8px 8px 12px; gap: 8px; flex-wrap: wrap; }
  .lb__meta { flex-basis: calc(100% - 100px); }
  .lb__tools { order: 5; flex-basis: 100%; overflow-x: auto; }
  .lb__stage { padding: 10px 10px 80px; }
  .lb__stage.has-transcript { flex-direction: column; overflow: auto; }
  .lb__stage.has-transcript > video { max-height: 55vh; flex: none; }
  .lb__transcript { flex: none; max-height: none; }
  .lb__nav { top: auto; bottom: 14px; margin-top: 0; width: 48px; height: 48px; }
  .lb__nav--prev { left: calc(50% - 60px); }
  .lb__nav--next { right: calc(50% - 60px); }
  .pv__stage { padding: 0; }
  .pv__stage iframe { border-radius: 0; }
  .adminnav { order: 3; flex-basis: 100%; }
}
@media (max-width: 380px) {
  .grid { grid-template-columns: 1fr; }
}

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

/* Importador */
.table .path { display: block; white-space: normal; overflow-wrap: anywhere; }
#importer .chips { flex-wrap: nowrap; }
#importer tbody tr { cursor: pointer; } /* clicar na linha (fora dos botões) marca a linha */
#importer tbody tr :is(button, a, input, select, summary) { cursor: revert; }
#importer tbody tr:has(input[name="group"]:checked) td { background: var(--focus-bg); } /* linha marcada */
#importer td.status { white-space: nowrap; }

/* Compartilhar */
.share { position: relative; }
.share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn.share svg { width: 15px; height: 15px; }
.share[data-feedback]::after {
  content: attr(data-feedback); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  background: var(--ink); color: var(--on-ink); font: 600 12px/1 var(--f-body); padding: 7px 9px; border-radius: 6px;
  white-space: nowrap; pointer-events: none; z-index: 20; animation: lb-in .12s ease-out;
}
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.share-row .mono { color: var(--ink-2); }
.admin-head__side { display: grid; gap: 6px; justify-items: end; }
.share-note { margin: 0; font-size: 12px; color: var(--ink-3); text-align: right; }
.row-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.row-actions .iconbtn { width: 32px; height: 32px; }
@media (max-width: 720px) {
  .admin-head__side { justify-items: start; }
  .share-note { text-align: left; }
}

/* Prévia pública (link compartilhado aberto por quem não é assinante) */
.page-teaser { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.teaser { width: min(100%, 960px); }
.teaser__tabs { display: flex; gap: 4px; padding-left: 20px; }
.teaser__tabs span { width: 48px; height: 12px; border-radius: 7px 7px 0 0; background: var(--tab); }
.teaser__card {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--sheet);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow);
}
.teaser__media { position: relative; min-height: 340px; background: var(--paper-2); }
.teaser__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.teaser__media--open img { inset: 18px 18px 64px; width: calc(100% - 36px); height: calc(100% - 82px); object-fit: contain; } /* capa inteira, acima do selo */
.teaser__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(19 26 39 / 0) 45%, rgb(19 26 39 / .5)); }
.teaser__placeholder { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--paper) 0 14px, var(--paper-2) 14px 28px); }
.teaser__lock {
  position: absolute; left: 16px; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 999px; background: var(--glass); font-weight: 600; font-size: 13px;
}
.teaser__lock svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.teaser__body { padding: 32px clamp(20px, 4vw, 44px) 30px; display: flex; flex-direction: column; gap: 14px; }
.teaser__body > * { margin: 0; }
.teaser__brand { display: flex; align-items: center; gap: 9px; }
.teaser__logo { width: 44px; height: auto; }
.teaser__brand span { font: 500 12px/1 var(--f-mono); color: var(--ink-3); }
.teaser__body .eyebrow { margin: 6px 0 -4px; }
.teaser h1 { font: 750 clamp(26px, 3.4vw, 36px)/1.06 var(--f-display); letter-spacing: -0.025em; }
.teaser__meta { font-size: 14px; color: var(--ink-3); }
.teaser__meta b { color: var(--ink); font-weight: 600; margin-left: 4px; }
.teaser__desc { color: var(--ink-2); font-size: 16px; }
.teaser__h2 { margin-top: 4px; font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.teaser__list { list-style: none; padding: 0; display: grid; gap: 9px; }
.teaser__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; }
.teaser__list li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--tab); transform: translateY(1px); }
.teaser__list b { font-weight: 600; }
.teaser__list span { color: var(--ink-2); }
.teaser__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.teaser__cta form { margin: 0; }
.teaser__note { font-size: 13px; color: var(--ink-3); }
@media (max-width: 760px) {
  .teaser__card { grid-template-columns: 1fr; }
  .teaser__media { min-height: 0; aspect-ratio: 4 / 3; }
  .teaser__cta .btn { flex: 1 1 auto; }
}

/* Edição de oferta: links com "Abrir", publicação agendada, colar print */
.input-group { display: flex; gap: 6px; align-items: center; }
.input-group .input { flex: 1; min-width: 0; }
.input-group .btn { flex: none; height: 40px; }
.publish-when { display: grid; gap: 8px; margin: 2px 0 0 24px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.publish-when .input[disabled] { opacity: .5; }
.publish-count { font-size: 13px; font-weight: 600; color: var(--ink); } /* quantas outras entram no ar no dia escolhido */
.status--scheduled { background: var(--warn-bg); color: var(--warn); }
/* Lista de ofertas: data e horário embaixo de "Agendada", e "Pública" embaixo da situação (coluna estreita). */
.status--stack { flex-direction: column; align-items: flex-start; gap: 3px; }
.status--stack small { font-size: 11px; }
.status-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.status-stack .status--public { margin-left: 0; }
.status--public { background: var(--info-bg); color: var(--s-checkout); margin-left: 4px; }
/* Captura automática (app/autocapture.php): situação embaixo da Situação, os botões dos números e o andamento. */
.autocap { display: inline-block; margin-top: 5px; padding: 3px 7px; border-radius: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--paper); color: var(--ink-3); }
.autocap--fila, .autocap--agora { background: var(--info-bg); color: var(--s-checkout); }
.autocap--falhou { background: var(--warn-bg); color: var(--warn); }
.autocap--desistiu { background: var(--danger-bg); color: var(--danger); }
.autocap__why { display: block; max-width: 220px; margin-top: 3px; font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-chip--sem-pagina .status-chip__dot { background: var(--state-draft-bar); }
.status-chip--captura-falhou .status-chip__dot { background: var(--warn); }
.status-chip--captura-auto .status-chip__dot { background: var(--ok); }
.autocap--ia { background: var(--ok-bg); color: var(--ok); }
.status-chip--ia-carregada .status-chip__dot { background: var(--ok); }
.autocap-status { margin: 8px 0 0; font-size: 13px; color: var(--ok); font-weight: 600; }
/* Preenchimento com IA (app/ai_auto.php): estado no título do assistente e a frase do detalhe. */
.ai-state { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--paper); color: var(--ink-3); }
.ai-state--disponivel { background: var(--info-bg); color: var(--s-checkout); }
.ai-state--carregado { background: var(--warn-bg); color: var(--warn); }
.ai-state--aplicado { background: var(--ok-bg); color: var(--ok); }
.ai-state-note { margin: 0; font-size: 13px; color: var(--ink-2); }
.ai-state-note--carregado { padding: 10px 12px; border: 1px solid var(--warn-line); border-radius: 10px; background: var(--warn-bg); color: var(--ink); }
.autocap-status.is-error { color: var(--danger); }
.autocap-status__close { margin-left: 8px; padding: 0 6px; border: 0; border-radius: 5px; background: none; color: var(--ink-3); font: inherit; cursor: pointer; }
.autocap-status__close:hover { background: var(--paper); color: var(--ink); }
kbd { font: 500 11px/1 var(--f-mono); padding: 2px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--sheet); color: var(--ink-2); }

.paste-dialog { width: min(100% - 32px, 560px); border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); color: var(--ink); }
.paste-dialog::backdrop { background: rgb(11 15 23 / .55); }
.paste-dialog form { display: grid; gap: 16px; }
.paste-dialog__title { margin: 0; font: 700 20px/1.2 var(--f-display); }
.paste-dialog__preview { display: flex; gap: 8px; overflow-x: auto; }
.paste-dialog__preview img { height: 140px; width: auto; max-width: 100%; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.paste-dialog__sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.paste-choice {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; cursor: pointer; text-align: left;
  border: 1px solid color-mix(in srgb, var(--tab) 40%, var(--line)); background: color-mix(in srgb, var(--tab) 8%, var(--sheet));
  font: 600 14px/1.2 var(--f-body); color: var(--ink);
}
.paste-choice::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 3px; background: var(--tab); }
.paste-choice:hover, .paste-choice:focus-visible { background: color-mix(in srgb, var(--tab) 18%, var(--sheet)); border-color: var(--tab); }
.confirm-dialog { width: min(100% - 32px, 420px); background: var(--sheet); }
.confirm-dialog__text { margin: 0; color: var(--ink-2); line-height: 1.5; }
.confirm-dialog__foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.paste-dialog__foot { display: flex; justify-content: flex-end; }
.paste-choice[hidden], .paste-dialog__more[hidden] { display: none; }
.paste-dialog__more { justify-self: start; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.tag-hash { font: 600 15px/1 var(--f-mono); color: var(--ink-3); }
.cell-sub { display: block; font-size: 12px; margin-top: 2px; }
.teaser__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* Imagens das páginas HTML salvas (edição da oferta, só admin) */
.html-images { margin-top: 30px; }
.html-images:empty { display: none; }
.html-images details { background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 16px; } /* abrir rola até aqui */
.html-images summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 16px 18px; cursor: pointer; list-style: none; }
.html-images summary::-webkit-details-marker { display: none; }
.html-images summary::before { content: "▸"; color: var(--ink-3); transition: transform .15s; }
.html-images details[open] summary::before { transform: rotate(90deg); }
/* Aberto, o título fica preso no topo para fechar de qualquer altura (a barra dos filtros vai logo embaixo dele). */
.html-images details[open] > summary { position: sticky; top: 0; z-index: 4; background: var(--sheet); border-radius: 12px 12px 0 0; }
.html-images__title { font: 700 16px/1.2 var(--f-display); }
.html-images__toolbar { position: sticky; top: var(--himg-head, 54px); z-index: 3; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 18px; background: var(--sheet); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.html-images__toolbar .check { margin-right: auto; font-weight: 600; align-self: flex-start; min-height: 34px; display: inline-flex; align-items: center; }
.html-images__toolbar .select { height: 34px; font-size: 13px; }
.html-images__tools { flex: 1 1 360px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
/* Folgas um pouco menores para tudo caber numa linha só (seleção, filtros, Usar e Ver/Fechar print da PV). */
.html-images__toolbar { padding-left: 14px; padding-right: 14px; column-gap: 6px; }
.html-images__toolbar .select { padding: 0 24px 0 8px; background-position: right 7px center; }
.html-images__tools .btn--sm { padding: 0 10px; }
.html-images__tools [data-pv-open] { min-width: 10.4em; } /* a largura de "Fechar print da PV": a barra não pula ao alternar */
.html-images__note { flex-basis: 100%; font-size: 13px; color: var(--ok); }
.html-images__group { padding: 16px 18px 4px; }
.html-images__from { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 14px/1 var(--f-display); }
.html-images__from::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tab); }
.html-images__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 150px), calc((100% - 30px) / 4)), 1fr)); gap: 10px; } /* até 4 por linha (cada card tem pelo menos 1/4 da largura); em tela estreita, menos */
.html-images__empty { margin: 0; padding: 24px 18px; color: var(--ink-3); }
/* Fechar o bloco: fixo embaixo no centro, no lugar da barra escura (que some com o bloco aberto). */
.html-images__close { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40;
  height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--danger); color: var(--on-ink);
  font: 700 14px/1 var(--f-body); cursor: pointer; box-shadow: 0 12px 30px -10px rgb(0 0 0 / .55); }
.html-images details:not([open]) .html-images__close { display: none; }
.html-images__close:hover { filter: brightness(1.08); }
.html-images__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.himg { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--sheet); }
.himg.is-selected { border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus-ring); }
.himg:not([data-unusable]) { cursor: pointer; } /* clicar fora dos botões marca o card */
.himg__top { display: flex; align-items: center; gap: 5px; padding: 8px; flex-wrap: wrap; }
.himg__check { width: 16px; height: 16px; accent-color: var(--focus); margin: 0 2px 0 0; }
.himg__badge { font: 500 11px/1 var(--f-mono); padding: 4px 6px; border-radius: 5px; background: var(--paper); color: var(--ink-2); white-space: nowrap; }
.himg__tools { display: inline-flex; gap: 2px; margin-left: auto; }
.himg__tool { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; border: 0; background: none; color: var(--ink-2); font-size: 14px; text-decoration: none; cursor: pointer; }
.himg__tool:hover { background: var(--paper); color: var(--ink); }
.himg__view {
  display: block; width: 100%; aspect-ratio: 1; padding: 6px; border: 0; cursor: zoom-in;
  background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 50% / 16px 16px; /* xadrez: mostra transparência */
}
.himg__view img { width: 100%; height: 100%; object-fit: contain; }
.is-selecting .himg:not([data-unusable]) .himg__view { cursor: pointer; } /* modo seleção: a imagem marca o card */
.himg__foot { display: grid; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--line-2); }
.himg__name { font: 11px/1.3 var(--f-mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.himg__used { justify-self: start; font: 600 11px/1 var(--f-body); padding: 5px 7px; border-radius: 5px; background: var(--ok-bg); color: var(--ok); }
.himg__foot .btn { justify-self: stretch; }

.zoom-dialog { width: min(100% - 32px, 1100px); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 12px; background: #0F1520; color: #fff; overflow: hidden; }
.zoom-dialog::backdrop { background: rgb(11 15 23 / .8); }
.zoom-dialog__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid rgb(255 255 255 / .1); }
.zoom-dialog__meta { flex: 1; min-width: 0; font: 12px/1.3 var(--f-mono); color: rgb(255 255 255 / .75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoom-dialog__bar .btn--ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / .25); }
.zoom-dialog__stage { max-height: calc(100vh - 100px); overflow: auto; display: grid; place-items: center; padding: 14px; }
.zoom-dialog__stage img { max-width: 100%; height: auto; background: repeating-conic-gradient(#e9edf2 0% 25%, #fff 0% 50%) 50% / 16px 16px; }

/* Filtros com várias opções (menu com caixinhas) */
.ms { position: relative; }
.ms > summary { list-style: none; display: inline-flex; align-items: center; min-width: 180px; max-width: 260px; line-height: 38px; cursor: pointer; user-select: none; }
.ms > summary::-webkit-details-marker { display: none; }
.ms__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms.is-active > summary { border-color: var(--ink); font-weight: 600; }
.ms[open] > summary { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.ms__panel {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: max-content; min-width: 290px; max-width: min(360px, calc(100vw - 32px));
  display: grid; gap: 8px; padding: 8px; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.ms__search { height: 34px; font-size: 14px; }
.ms__title { margin: 2px 8px 4px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ms__opt input[type="radio"] { accent-color: var(--ink); }
.datefilter > summary { min-width: 150px; }
.datefilter__range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 8px 10px; }
.datefilter__range[hidden] { display: none; }
.datefilter__range label { display: grid; gap: 4px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.datefilter__range .input { height: 34px; padding: 0 8px; font-size: 13px; }
@media (max-width: 480px) {
  /* No celular, Cards/Lista ficam só com o ícone para caber na linha da ordem. */
  .filterbox .viewswitch button { width: 34px; padding: 0; justify-content: center; }
  .filterbox .viewswitch button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 641px) {
  .filters .ms > summary { min-width: 150px; }
  .filters .datefilter > summary { min-width: 130px; }
}
.sortby .select { min-width: 150px; }
.filters__end { display: flex; align-items: center; gap: 8px 12px; margin-left: auto; flex-wrap: wrap; }
.sortby { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }

.ms__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; max-height: 300px; overflow: hidden auto; overscroll-behavior: contain; }
.ms__opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.ms__opt:hover { background: var(--paper); }
.ms__opt[hidden] { display: none; }
.ms__opt input { flex: none; width: 16px; height: 16px; accent-color: var(--ink); }
.ms__name { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; } /* nome longo quebra a linha (sem rolagem para o lado) */
.ms__opt .count { margin-left: auto; }
.ms__foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px 0; border-top: 1px solid var(--line-2); }
.ms__foot .linklike { font-size: 13px; }
.ms__foot .linklike:disabled { opacity: .4; cursor: default; color: var(--ink-2); }

/* Quadro de filtros das abas do site: os controles em cima e, numa faixa embaixo, a contagem em destaque,
   os filtros ligados, Cards/Lista e a ordem. */
.filterbox { margin: 0 0 26px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.filterbox .filters { margin: 0; padding: 14px; }
.filterbox .filters[hidden], .filterbox__toggle[hidden] { display: none; }
.filterbox__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 14px 14px 0 0;
  background: transparent; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.filterbox__toggle small { color: var(--ink-2); font-size: 12px; }
.filterbox__toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.filterbox__toggle:focus-visible { outline-offset: -3px; }
@media (max-width: 720px) {
  .filterbox .filters__end, .filterbox .sortby { max-width: 100%; min-width: 0; }
  .filterbox .sortby .select { flex: 1; min-width: 0; max-width: 100%; }
}
.filterbox__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 14px 12px 18px; border-top: 1px solid var(--line); }
.results { margin: 0; display: inline-flex; align-items: baseline; gap: 7px; font-size: 15px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.results b { font: 750 28px/1 var(--f-display); letter-spacing: -0.02em; color: var(--ink); }
.filterbox .active-filters { margin: 0; }
.filterbox .filters__end { margin-left: auto; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: -12px 0 22px; }
.chip--x { text-decoration: none; color: var(--ink); background: var(--sheet); gap: 6px; }
.import-state__run { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.chip--open { font: inherit; font-size: 12px; cursor: pointer; } /* abre o arquivo no visualizador (Importar pasta) */
.chip--open:hover { border-color: var(--ink-3); color: var(--ink); background: var(--sheet); }
.chip--x span { color: var(--ink-3); font-size: 14px; line-height: 1; }
.chip--x:hover { border-color: var(--ink-3); }
.chip--x:hover span { color: var(--danger); }
@media (max-width: 720px) {
  .ms { flex: 1 1 140px; }
  .ms > summary { min-width: 0; max-width: none; width: 100%; }
}
.import-state { min-width: 220px; }
.import-state > * + * { margin-top: 6px; }
.import-state__offer { display: block; font-size: 12px; color: var(--ink-2); }
.import-state .select { display: block; width: 100%; max-width: 220px; }
.queue .is-warning { border-color: var(--warn-line); background: var(--warn-bg); }
.queue .is-warning .q__status a { color: var(--warn); font-weight: 600; }
.queue .is-warning .q__status .linklike { color: var(--warn); text-decoration: underline; text-underline-offset: 3px; }

/* Topo: botão de tema e menu do usuário */
.theme-toggle { width: 38px; height: 38px; border-radius: 10px; color: var(--ink-2); }
.theme-toggle:hover { color: var(--ink); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}

/* Desfoque para gravar a tela (botão do olho, só admin; data-blur no <html>). Leve: dá para ver o que é, sem os
   detalhes. Telas grandes (visualizador, capa do topo, prévia do HTML) desfocam mais, para valer o mesmo. */
.blur-toggle .i-eye-off { display: none; }
:root[data-blur] .blur-toggle, .viewas-toggle[aria-pressed="true"] { color: var(--focus); border-color: var(--focus); background: var(--focus-bg); }
.viewas { display: contents; } /* "ver como gratuito" (só admin): formulário em volta do botão, ao lado do olho */
/* Gravando (desfoque ligado): somem as coisas de admin no site (Painel admin, Editar, aviso de rascunho/agendada). */
:root[data-blur] .admin-only { display: none; }
:root[data-blur] .blur-toggle .i-eye { display: none; }
:root[data-blur] .blur-toggle .i-eye-off { display: block; }
:root[data-blur] :is(img, video, iframe):not(.brand__logo, .redirect-wait__img) { filter: blur(var(--rec-blur, 6px)); }
:root[data-blur] :is(.lb__stage, .zoom-dialog__stage, .pv__stage, .offer-hero__cover) :is(img, video, iframe) { --rec-blur: 12px; }

.usermenu { position: relative; }
.usermenu > summary {
  list-style: none; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 4px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); color: var(--ink); font-weight: 600; font-size: 14px;
}
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover, .usermenu[open] > summary { border-color: var(--line-strong); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); font: 700 12px/1 var(--f-body); letter-spacing: .02em; }
.usermenu__chev { width: 10px; height: 6px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; transition: transform .15s; }
.usermenu[open] .usermenu__chev { transform: rotate(180deg); }
.usermenu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 250px; padding: 6px; display: grid;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.usermenu__who { margin: 0 0 4px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line-2); display: grid; gap: 2px; }
.usermenu__who strong { font-size: 14px; color: var(--ink); }
.usermenu__who span { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.usermenu__panel form { margin: 0; }
.usermenu .usermenu__item { display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; align-items: start; width: 100%; padding: 9px 10px; border-radius: 8px; border: 0; background: none; text-align: left; font: 600 14px/1.2 var(--f-body); color: var(--ink-2); text-decoration: none; cursor: pointer; }
.usermenu .usermenu__item:hover { background: var(--paper); color: var(--ink); }
.usermenu .usermenu__item--out { color: var(--danger); }
.usermenu__icon { width: 18px; height: 18px; margin-top: -1px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-3); }
.usermenu .usermenu__item:hover .usermenu__icon, .usermenu .usermenu__item--out .usermenu__icon { color: inherit; }
.usermenu__note { display: block; margin-top: 3px; font: 400 11.5px/1.2 var(--f-body); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu .usermenu__item > span { min-width: 0; } /* link comprido embaixo corta com reticências */
.usermenu__panel .usermenu__out { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-2); }
.usernav { gap: 12px; }
@media (max-width: 720px) { .usermenu__name { display: none; } .usermenu > summary { padding-right: 8px; } }

/* Minha conta */
.account { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 18px; align-items: start; max-width: 1100px; }
.account__col { display: grid; gap: 18px; align-content: start; min-width: 0; }
.account__head { display: flex; align-items: center; gap: 12px; margin: -20px -20px 14px; padding: 12px 20px;
  background: var(--paper); border-bottom: 1px solid var(--line); border-radius: 11px 11px 0 0; } /* faixa do título */
.account__head .panel__title { margin: 0; }
.account__card--danger .account__head { background: var(--danger-bg); border-bottom-color: color-mix(in srgb, var(--danger) 25%, var(--line)); }
.account__sub { margin: 0 0 16px; font-size: 13px; color: var(--ink-3); }
.account__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px;
  background: color-mix(in srgb, var(--new-a) 14%, var(--sheet)); color: var(--new-a); }
.account__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account__icon--danger { background: var(--danger-bg); color: var(--danger); }
/* Informações pessoais em modo leitura: rótulo pequeno, valor e o lápis; editando, o campo com Salvar e Cancelar. */
.profile-list { display: grid; margin: 0; }
.profile-row { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.profile-row:first-child { border-top: 0; padding-top: 0; }
.profile-row dt { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.profile-row dd { margin: 0; display: grid; gap: 4px; min-width: 0; }
.profile-row__show { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.profile-row__value { font-weight: 600; overflow-wrap: anywhere; }
.profile-row__value.is-empty { font-weight: 400; color: var(--ink-3); font-style: italic; }
.profile-row__dots { letter-spacing: .12em; }
.profile-row__show .btn { margin-left: auto; }
.profile-row__hint { font-size: 12px; color: var(--ink-3); }
.profile-row__edit { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--ink-3); cursor: pointer; }
.profile-row__edit:hover, .profile-row__edit:focus-visible { border-color: var(--line); background: var(--paper); color: var(--ink); }
.profile-row__edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profile-row__form { display: none; flex-wrap: wrap; gap: 8px; align-items: center; }
.profile-row__form .input { flex: 1 1 220px; min-width: 0; }
.profile-row.is-editing .profile-row__form { display: flex; }
.profile-row.is-editing .profile-row__show { display: none; }
.account__head--back { align-items: center; }
.profile-back { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid var(--line); border-radius: 10px;
  background: var(--sheet); color: var(--ink); font-size: 18px; cursor: pointer; }
.profile-back:hover { background: var(--paper); border-color: var(--line-strong); }
/* Uso do plano gratuito no cartão Assinatura. */
.usage { display: grid; gap: 5px; }
.usage__top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.usage__top b { font-family: var(--f-mono); font-weight: 600; }
.usage__bar { display: block; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.usage__bar span { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.usage__bar span.is-full { background: var(--warn); }
.usage small { font-size: 12px; color: var(--ink-3); }
/* Plano em destaque (Minha conta > Assinatura). */
.plan-hero { display: grid; gap: 10px; margin: 0 0 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.plan-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-hero__name { font: 700 20px/1.15 var(--f-display); }
.plan-hero__price { margin: 0; font: 600 15px/1.2 var(--f-mono); color: var(--ink-2); }
.plan-hero__when { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--ink-2); }
.plan-offer { display: grid; gap: 12px; margin: 0 0 4px; padding: 16px; border: 1.5px solid color-mix(in srgb, var(--new-a) 55%, var(--line)); border-radius: 14px;
  background: color-mix(in srgb, var(--new-a) 6%, var(--sheet)); }
.plan-offer__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.plan-offer__name { font: 700 18px/1.15 var(--f-display); }
.plan-offer__price { font: 700 18px/1 var(--f-mono); color: var(--new-a); }
.plan-offer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px; }
.plan-offer__list li { display: flex; gap: 8px; align-items: baseline; }
.plan-offer__list li::before { content: "✓"; color: var(--ok); font-weight: 700; }
.account__card .flash { margin-bottom: 12px; }
.account__meta { margin: 0; font-size: 13px; color: var(--ink-3); }
.account__facts { display: grid; gap: 14px; margin: 0 0 18px; }
.account__facts dt { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 6px; }
.account__facts dd { margin: 0; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.input[readonly] { background: var(--sheet-2); color: var(--ink-2); cursor: default; }
.access--none { background: var(--paper); color: var(--ink-2); }
.days { font: 600 11px/1 var(--f-mono); padding: 5px 7px; border-radius: 5px; background: var(--ok-bg); color: var(--ok); }
.days--soon { background: var(--warn-bg); color: var(--warn); }
.days--over { background: var(--danger-bg); color: var(--danger); }

/* Regras da senha: só aparece o que falta */
.pw-rules { display: grid; gap: 4px; font-size: 13px; }
.pw-rules[hidden] { display: none; }
.pw-rules__title { color: var(--ink-3); }
.pw-rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.pw-rules li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.pw-rules li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); flex: none; }
.pw-rules__ok { color: var(--ok); font-weight: 600; }

/* ---------- Assistente de preenchimento (IA) ---------- */
.assistant { margin: 0 0 18px; padding: 0; }
.assistant__summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 18px; }
.assistant__summary::-webkit-details-marker { display: none; }
.assistant__summary::before { content: "▸"; color: var(--ink-3); transition: transform .15s; }
.assistant[open] > .assistant__summary::before { transform: rotate(90deg); }
.assistant__title { font-weight: 700; }
.assistant__body { display: grid; gap: 10px; padding: 0 18px 18px; }
.assistant__steps { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 4px; }
.assistant__label { font-weight: 600; font-size: 14px; margin-top: 4px; scroll-margin-top: 16px; } /* "Aplicar resposta" rola até "Resposta da IA" */
/* Sem texto capturado: só o aviso para capturar e salvar (o prompt aparece quando houver texto). */
.assistant__empty { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--warn-line); border-radius: 10px; background: var(--warn-bg); font-size: 13.5px; color: var(--ink-2); }
.assistant__empty p, .assistant__empty ul { margin: 0; }
.assistant__empty ul { padding-left: 18px; display: grid; gap: 4px; }
.assistant__empty b { color: var(--ink); }
/* Biblioteca de anúncios do admin da oferta: busca do Link básico e Capturar (páginas que anunciam, extensão 1.2+). */
.adlib-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; min-width: 0; }
.adlib-tools[hidden] { display: none; }
.adlib-domain { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
[data-adlib-capture], [data-adlib-capture-here] { display: none; }
.ext-paginas [data-adlib-capture], .ext-paginas [data-adlib-capture-here] { display: inline-flex; }
.adlib-old { display: none; margin: 0 0 8px; }
.ext-captura:not(.ext-paginas) .adlib-old { display: block; }
.adlib-found { display: grid; gap: 6px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); font-size: 13px; color: var(--ink-2); }
.adlib-found[hidden] { display: none; }
.adlib-found.is-error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--danger-bg); }
.adlib-found p { margin: 0; }
.adlib-found ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.adlib-found b { color: var(--ink); }
.adlib-found .is-new { color: var(--ok); font-weight: 600; }
/* Frase que se copia com um clique (pedido para a extensão do Claude/ChatGPT). */
.copy-chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 1px; padding: 2px 4px 2px 8px; vertical-align: baseline;
  border: 1px solid var(--line-strong); border-radius: 7px; background: var(--sheet-2); color: var(--ink);
  font: 600 13px/1.4 var(--f-body); cursor: pointer; text-align: left; user-select: text;
}
.copy-chip:hover { border-color: var(--ink-3); background: var(--sheet); }
.copy-chip__icon { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; color: var(--ink-3); }
.copy-chip__state { padding: 1px 6px; border-radius: 5px; background: var(--paper); font: 500 11px/1.4 var(--f-mono); color: var(--ink-3); }
.copy-chip.is-copied { border-color: var(--ok); }
.copy-chip.is-copied .copy-chip__state { background: var(--ok-bg); color: var(--ok); }
.assistant__prompt { font-size: 12px; line-height: 1.5; }
.assistant__toggle { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; border: 0; background: none; color: var(--ink); font-family: inherit; cursor: pointer; }
.assistant__toggle:hover { color: var(--s-checkout); }
.assistant__pm { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 5px; font: 600 15px/1 var(--f-mono); color: var(--ink-2); }
.assistant__toggle:hover .assistant__pm { border-color: currentColor; color: inherit; }
/* Escondido só da vista: continua na página (as extensões do Claude/ChatGPT leem o prompt). */
.assistant .is-collapsed { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; resize: none; }
.btn--ai-carregado { background: var(--new-a); border-color: var(--new-a); color: var(--new-ink); }
.btn--ai-aplicado { background: var(--ads-ok); border-color: var(--ads-ok); color: var(--ads-ok-ink); }
.btn--ai-carregado:hover, .btn--ai-aplicado:hover { filter: brightness(1.08); }
.assistant__result { display: grid; gap: 10px; }
.assistant__result .flash { margin: 0; }
.ai-suggestion { border: 1px solid color-mix(in srgb, #C9A227 45%, var(--line)); background: color-mix(in srgb, #C9A227 8%, var(--sheet)); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; font-size: 14px; }
.ai-suggestion__field { margin: 0; font-weight: 700; }
.ai-suggestion dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.ai-suggestion dt { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.ai-suggestion dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-suggestion__new { font-weight: 600; }
.ai-suggestion__reason { margin: 0; color: var(--ink-2); font-size: 13px; }
.ai-suggestion__reason:empty { display: none; }
.ai-filled { border-color: var(--ok) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent) !important; }
.ai-changed { border-color: #C9A227 !important; box-shadow: 0 0 0 3px rgb(201 162 39 / .22) !important; }

/* ---------- Faixa do administrador sem o painel liberado neste navegador (admin_gate_bar) ---------- */
.adminbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 18px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--admin-ink) 35%, var(--line)); border-radius: 10px; background: var(--admin-bg);
  font-size: 13.5px; color: var(--ink-2);
}
.adminbar__text { flex: 1 1 320px; }
.adminbar__text p { margin: 0; }
.adminbar__text b { color: var(--ink); }
.adminbar__title { margin: 0 0 3px; font: 700 15px/1.3 var(--f-body); color: var(--admin-ink); }
.adminbar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.adminbar__actions form { margin: 0; }
.adminbar__form { display: flex; gap: 8px; }
.adminbar__code { width: 118px; height: 32px; text-align: center; font: 600 16px/1 var(--f-mono); letter-spacing: .12em; }
.adminbar__resend { font-size: 13px; }

/* ---------- Plano gratuito: cadeados, desfoque e faixa do plano ---------- */
.planbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 13.5px; color: var(--ink-2);
}
.planbar__tag { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--sheet); border: 1px solid var(--line); padding: 5px 7px; border-radius: 5px; }
.planbar__text { flex: 1 1 260px; }
.planbar__text b { color: var(--ink); }
.lock-badge {
  position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; background: rgb(19 26 39 / .85); color: #fff; padding: 5px 8px; border-radius: 6px;
}
.card--section .lock-badge { top: 10px; bottom: auto; }
.thumb--locked { position: relative; display: block; cursor: pointer; overflow: hidden; }
.thumb--locked img { filter: saturate(.85); }
.thumb__ph { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--paper) 0 12px, var(--sheet) 12px 24px); }
.thumb__lock {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12px; font-weight: 700; background: rgb(19 26 39 / .85); color: #fff; padding: 6px 10px; border-radius: 999px;
}
.doc__excerpt--fade { -webkit-line-clamp: unset; display: block; max-height: 10.5em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.lock-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.lock-note:hover { color: var(--ink); text-decoration: underline; }
.lockbox {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; padding: 16px 18px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); scroll-margin-top: 80px;
}
.lockbox__text { flex: 1 1 340px; }
.lockbox__text p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.lockbox__text .lockbox__title { margin-bottom: 4px; color: var(--ink); font-weight: 700; font-size: 15.5px; }
.lockbox__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lockbox__actions form { margin: 0; }
.lockbox__credits { font-weight: 500; color: var(--ink-3); }

/* ---------- Termos e privacidade ---------- */
.plain-card.legal { width: min(100%, 760px); line-height: 1.65; font-size: 15px; }
.legal h2 { margin: 26px 0 8px; font: 700 18px/1.3 var(--f-display); }
.legal ul { padding-left: 20px; margin: 8px 0; display: grid; gap: 6px; }
.legal p { margin: 8px 0; color: var(--ink-2); }
.legal li { color: var(--ink-2); }
.legal .eyebrow a { text-decoration: none; }
.legal__date { font-size: 13px; color: var(--ink-3) !important; }
.legal__foot { margin-top: 28px !important; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 13px; }
.legal .support-channels { list-style: none; padding: 0; margin: 24px 0 0; gap: 0; }
.support-channels li + li { border-top: 1px solid var(--line-2); }
.support-channel { display: flex; align-items: center; gap: 14px; padding: 18px 0; color: var(--ink); text-decoration: none; }
.support-channel:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.support-channel > span { min-width: 0; overflow-wrap: anywhere; }
.support-channel .usermenu__icon { width: 24px; height: 24px; flex: 0 0 24px; color: var(--ink-2); }
.support-channel__note { display: block; color: var(--ink-2); font-size: 14px; margin-top: 3px; }
.site-foot { padding: 28px var(--gutter) 36px; text-align: center; font-size: 13px; color: var(--ink-3); }
.site-foot a { color: var(--ink-3); }
.site-foot a:hover { color: var(--ink); }
.login__legal { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.login__legal a { color: var(--ink-3); }
.check--terms { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.check--terms input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--ink); }
.account__card--danger { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.account__card--danger .panel__title { color: var(--danger); }
/* Minha conta > Ajuda e comunidade: linhas com ícone, o contato embaixo e ↗; o primeiro canal em destaque. */
.help-links { display: grid; gap: 8px; }
.help-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
.help-link:hover { border-color: var(--line-strong); background: var(--paper); }
.help-link__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--paper); color: var(--ink-2); }
.help-link__icon .usermenu__icon { width: 20px; height: 20px; margin: 0; }
.help-link__text { display: grid; gap: 2px; min-width: 0; }
.help-link__text b { font-weight: 600; font-size: 14px; }
.help-link__text small { color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-link__go { margin-left: auto; color: var(--ink-3); }
.help-link--main { border-color: var(--ok-line); background: var(--ok-bg); }
.help-link--main:hover { border-color: var(--ok); background: var(--ok-bg); }
.help-link--main .help-link__icon { background: var(--help-main); color: var(--help-main-ink); }
.help-link__icon .usermenu__icon { color: inherit; } /* o ícone segue a cor do quadrado (o do menu é cinza) */
.help-link--main .help-link__go { color: var(--ok); }
.turnstile { min-height: 65px; }
.resend-form { display: grid; gap: 10px; }
.pw-match { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--danger); }
.pw-match::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pw-match.is-ok { color: var(--ok); font-weight: 600; }
.pw-match.is-ok::before { display: none; }
.pw-match[hidden] { display: none; }

/* ---------- Biblioteca de Anúncios (app/ads.php) ---------- */
.ads-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); padding: 2px 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-2); white-space: nowrap; }
.ads-badge b { color: var(--ink); font-weight: 700; }
.ads-badge--dead { color: var(--ink-3); border-style: dashed; }
/* Com anúncios ativos (decisão do dono): verde claro com a bolinha de "anunciando agora"; zerado e "Sem anúncios" ficam cinza. */
.ads-badge--on { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.ads-badge--on b { color: var(--ok); }
.ads-badge--on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.ads-trend { font-weight: 600; white-space: nowrap; color: var(--ink-3); }
.ads-trend--up { color: var(--ok); }
.ads-badge .ads-trend { font-size: 11px; }

.ads-panel { margin: 18px 0 6px; padding: 18px 20px 14px; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; }
/* Faixa baixa no lugar do gráfico: ainda não lida, nenhum anúncio ou oferta encerrada. */
.ads-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 18px 0 6px; padding: 12px 20px; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; }
.ads-strip .ads-panel__label { margin: 0; }
.ads-strip__status { margin: 0; font-size: 14px; color: var(--ink-2); }
.ads-strip__status b { margin-right: 6px; color: var(--ink); }
.ads-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 20px; }
.ads-panel__label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 500 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ads-panel__label::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tab); }
.ads-panel__value { margin: 0; font: 700 34px/1 var(--f-body); letter-spacing: -0.02em; color: var(--ink); }
.ads-panel__value span { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.ads-panel__value--dead { font-size: 24px; color: var(--ink-2); }
.ads-panel__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
.ads-range { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ads-range__btn { height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink-2); font: 600 12.5px/1 var(--f-body); cursor: pointer; }
.ads-range__btn:hover { background: var(--paper); }
.ads-range__btn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.ads-range__custom { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-3); }
.input--sm { height: 30px; width: auto; padding: 0 6px; font-size: 12.5px; }
.ads-chart { position: relative; margin-top: 14px; height: 220px; }
.ads-chart.is-empty { display: grid; place-items: center; color: var(--ink-3); font-size: 14px; border: 1.5px dashed var(--line); border-radius: 10px; }
.ads-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ads-chart svg:focus { outline: none; }
.ads-chart svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.ads-chart__grid { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.ads-chart__base { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.ads-chart__tick { fill: var(--ink-3); font: 400 11px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.ads-chart__area { fill: var(--ads-line); fill-opacity: .1; stroke: none; }
.ads-chart__line { fill: none; stroke: var(--ads-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ads-chart__dot { fill: var(--ads-line); stroke: var(--sheet); stroke-width: 2; }
.ads-chart__cross { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; }
.ads-chart__label { fill: var(--ink); font: 700 12px/1 var(--f-body); }
.ads-tip { position: absolute; top: 0; z-index: 2; min-width: 120px; padding: 8px 10px; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); pointer-events: none; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.ads-tip b { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink); }
.ads-tip b::before { content: ""; width: 12px; height: 2px; border-radius: 1px; background: var(--ads-line); }
.ads-tip[hidden] { display: none; }
.ads-panel__note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }
.ads-panel__table { margin-top: 6px; font-size: 13px; }
.ads-panel__table summary { cursor: pointer; color: var(--ink-2); width: fit-content; }
.ads-panel__table .table-wrap { margin-top: 8px; max-height: 260px; overflow-y: auto; }
.ads-panel__table td:last-child, .ads-panel__table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ads-day-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; border: 0; background: transparent;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ads-day-toggle:hover { color: var(--s-criativos); }
.ads-day-toggle__sign { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--sheet); font: 600 18px/1 var(--f-display); }
.ads-panel__table .ads-reading-row > td { padding: 0; text-align: left; background: var(--sheet-2); }
.ads-readings { padding: 8px 14px 12px; }
.ads-readings__message { margin: 8px 0; color: var(--ink-2); font: 400 13px/1.5 var(--f-body); }
.ads-readings__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ads-readings__table .mono { font-size: inherit; }
.ads-panel__table .ads-readings__table td, .ads-panel__table .ads-readings__table th { padding: 8px; text-align: left; }
.ads-panel__table .ads-readings__table th:last-child { text-align: right; }
.ads-readings__page { overflow-wrap: anywhere; }
.ads-panel__table .ads-readings__table .ads-readings__count { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .ads-readings { padding: 6px; }
  :is([data-readings-offer], [data-readings-page]) .ads-panel__table > .table-wrap > .table { table-layout: fixed; }
  :is([data-readings-offer], [data-readings-page]) .ads-panel__table > .table-wrap > .table > thead th:first-child { width: 70%; }
  :is([data-readings-offer], [data-readings-page]) .ads-panel__table > .table-wrap > .table > thead th { padding: 8px 6px; font-size: 10px; letter-spacing: 0; white-space: normal; }
  :is([data-readings-offer], [data-readings-page]) .ads-panel__table > .table-wrap > .table > tbody > tr:not(.ads-reading-row) > td { padding: 8px 6px; }
  .ads-day-toggle { font-size: 11px; gap: 6px; }
  .ads-readings__table { font-size: 12px; table-layout: fixed; }
  .ads-readings__table .mono { font-size: 11px; }
  .ads-panel__table .ads-readings__table td, .ads-panel__table .ads-readings__table th { padding: 8px 5px; }
  .ads-panel__table .ads-readings__table th { font-size: 10px; letter-spacing: .04em; white-space: normal; overflow-wrap: anywhere; }
  .ads-readings__table th:first-child { width: 30%; }
  .ads-readings__table th:last-child { width: 25%; }
  .ads-readings__table--named th:nth-child(2) { width: 45%; }
}
.ads-pages { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); }
.ads-pages li { display: inline-flex; gap: 6px; }
.ads-pages b { color: var(--ink); }
@media (max-width: 560px) {
  .ads-panel { padding: 16px 14px 12px; }
  .ads-range__custom { margin-left: 0; padding-left: 0; border-left: 0; }
  .ads-chart { height: 190px; }
}

/* Admin: leitura da biblioteca e novas ofertas */
.ads-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
@media (max-width: 760px) { .ads-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ads-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; align-items: start; }
.ads-admin p { margin: 0; color: var(--ink-2); font-size: 14px; }
.ads-key { display: grid; gap: 8px; margin: 0; }
.ads-key__row { display: flex; gap: 8px; align-items: stretch; }
.ads-key__row .btn { flex: none; height: auto; }
.ads-key__value { flex: 1; min-width: 0; cursor: copy; display: block; padding: 8px 10px; border-radius: 6px; background: var(--sheet); color: var(--ink); font: 500 13px/1.4 var(--f-mono); overflow-wrap: anywhere; user-select: all; }
.ads-downloads { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; }
.ads-downloads__label { font-weight: 600; font-size: 14px; text-align: right; }
.ads-downloads__help { grid-column: 1 / -1; min-width: 0; }
.ads-downloads__help:not(:last-child) { margin-bottom: 8px; }
@media (max-width: 560px) { .ads-downloads { grid-template-columns: 1fr; gap: 6px; } .ads-downloads__label { text-align: left; } }
.ads-help summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.ads-help__content { max-width: 72ch; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; overflow-wrap: anywhere; }
.ads-help__content p { margin: 12px 0 0; }
.ads-help__content ol, .ads-help__content ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.ads-section { margin-top: 26px; }
.ads-section__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ads-offers a { display: block; }
.ads-tabs { margin: 0 0 14px; }
.ads-tabs .count { margin-left: 4px; opacity: .7; font-weight: 500; }
.ads-tabs a[aria-current] .count { color: inherit; } /* na aba escura, o cinza do número sumia no tema claro */
/* Abas das listas da Leitura da biblioteca: maiores, embaixo dos cartões; a âncora #abas desce até elas. */
.ads-lists-toolbar { margin-top: 30px; scroll-margin-top: 16px; }
.ads-lists-toolbar.admin-refresh-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; border-bottom: 1px solid var(--line); }
.ads-lists-toolbar > .admin-refresh { margin-bottom: 10px; }
.ads-lists-tabs { display: flex; gap: 6px; margin: 0 0 -1px; font-size: 14px; min-width: 0; align-self: end; }
.ads-lists-tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 13px 18px; border: 1px solid var(--line); border-top: 3px solid transparent; border-radius: 10px 10px 0 0; background: var(--sheet-2); color: var(--ink-2); line-height: 1.3; text-align: center; }
.ads-lists-tabs a:hover { background: var(--sheet); color: var(--ink); }
.ads-lists-tabs a[aria-current] { background: var(--sheet); color: var(--ink); border-top-color: var(--focus); border-bottom-color: var(--sheet); }
.ads-lists-tabs .count { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; min-height: 23px; margin: 0; padding: 2px 6px; border-radius: 5px; background: var(--paper); color: var(--ink-2); opacity: 1; font-size: 12px; font-variant-numeric: tabular-nums; }
.ads-lists-tabs a[aria-current] .count { background: var(--ink); color: var(--on-ink); }
.links-results { padding: 20px; background: var(--sheet); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; }
.links-results > .filters { margin-top: 0; }
.ads-lists-toolbar + .biblioteca-filters { margin: 0; padding: 22px 20px 16px; background: var(--sheet); border-inline: 1px solid var(--line); }
.ads-settings { padding-top: 20px; }
#biblioteca-lista { padding: 0 20px 20px; background: var(--sheet); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; }
#biblioteca-lista > .biblioteca-results { margin-top: 0; padding-top: 3px; }
@media (max-width: 700px) {
  .ads-lists-toolbar.admin-refresh-toolbar { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ads-lists-toolbar > .admin-refresh { grid-row: 1; justify-self: end; margin-bottom: 0; }
  .ads-lists-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .ads-lists-tabs a { flex-direction: column; gap: 7px; min-height: 94px; padding: 10px 7px; font-size: 12px; }
  .ads-lists-toolbar + .biblioteca-filters { padding: 18px 14px 14px; }
  #biblioteca-lista { padding: 0 14px 16px; }
  .links-results { padding: 16px 14px; }
}
#biblioteca-lista .ads-section { margin-top: 14px; }
.admin-refresh-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.admin-refresh { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-refresh button { min-height: 36px; }
.admin-refresh__status { max-width: 42ch; }
.admin-refresh__status:empty { display: none; }
.biblioteca-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin: 20px 0 16px; }
.biblioteca-filters > .field { flex: 1 1 170px; min-width: 0; }
.biblioteca-filters > .biblioteca-filters__search { flex: 2 1 240px; }
.biblioteca-filters__dates { display: flex; flex-wrap: wrap; gap: 14px; }
.biblioteca-filters__dates[hidden] { display: none; }
.biblioteca-filters__dates .field { flex: 1 1 145px; min-width: 0; }
.biblioteca-filters__actions { min-height: 40px; flex-wrap: wrap; }
.biblioteca-results { margin: 12px 0; }
#biblioteca-lista .table-wrap { position: relative; }
.biblioteca-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; }
.biblioteca-selection [data-selection-count] { font-size: 13px; color: var(--ink-2); }
.ads-tabs__dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--warn-dot); vertical-align: 1px; }
.ads-section__hint { margin: 0 0 12px; font-size: 13px; }
.ads-section__head .ads-section__hint { margin: 0; }
.ads-section__head + .table-wrap, .ads-section__head + .empty { margin-top: 12px; }
.ads-actions { flex-wrap: wrap; }
.ads-actions form { margin: 0; }
.ads-attach { position: relative; }
.ads-attach summary { list-style: none; }
.ads-attach summary::-webkit-details-marker { display: none; }
.ads-attach__form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; gap: 6px; width: min(80vw, 380px); padding: 10px; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.ads-links td:first-child { max-width: 420px; }
/* Página da Biblioteca: nome e ID na largura toda; Abrir, Capturar ADS e o ✕ (à direita) embaixo. */
/* Decisão do dono: nome na largura toda; o ID com Abrir (e o ✕) na frente, como no checkout; embaixo o perfil e, na
   linha de baixo dele, Facebook ↗ e Google ↗. */
.checkout-row--lib { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "url acts" "profile profile" "hint hint" "read read"; }
.checkout-row__lib-actions [data-row-remove] { height: 32px; width: 32px; }
.checkout-row__lib-actions [data-row-remove][hidden] { display: none !important; } /* 1ª linha: sem ✕, o ID fica mais largo */
.checkout-row__profile { grid-area: profile; display: grid; gap: 2px; }
.checkout-row__profile[hidden] { display: none; }
.checkout-row__profile b { color: var(--ink); }
.checkout-row__profile.ai-filled b { color: var(--ok); }
.checkout-row__profile-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.checkout-row__lib-actions { grid-area: acts; display: flex; align-items: center; gap: 6px; }
/* "Capturar" de cada página (anúncios para Criativos): só com a extensão 1.3+ (classe ext-anuncios). */
[data-adlib-ads] { display: none; }
.ext-anuncios [data-adlib-ads] { display: inline-flex; }
.checkout-row__read { grid-area: read; }
.ads-host td { background: var(--sheet-2); padding-top: 8px; padding-bottom: 8px; }
/* Grupo do domínio: um bloco com a linha à esquerda e fundo levemente tingido; espaço antes e depois (ads-host__gap). */
.ads-host__item td { background: color-mix(in srgb, var(--s-checkout) 4%, var(--sheet)); }
.ads-host td { background: color-mix(in srgb, var(--s-checkout) 10%, var(--sheet)); }
.ads-host td:first-child, .ads-host__item td:first-child { box-shadow: inset 3px 0 0 var(--s-checkout); }
.ads-host__item td:first-child { padding-left: 28px; }
.ads-host__item .path { font-family: var(--f-mono); font-size: 13px; }
.ads-host__dots { color: var(--ink-3); }
.ads-host__gap td { height: 12px; padding: 0; background: var(--paper); border: 0; }

/* Redirecionador (Admin > Links e a página de espera /r/...) */
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.link-tiles { margin-bottom: 18px; }
.link-attention { margin-bottom: 18px; border-color: var(--warn-line); }
.link-head { gap: 8px; margin-top: 10px; }
.link-url { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); font: 500 14px/1.2 var(--f-mono); color: var(--ink); overflow-wrap: anywhere; }
.link-kind-tag { display: inline-block; padding: 3px 7px; border-radius: 5px; background: var(--paper); font: 500 11px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.link-list td:first-child { min-width: 180px; }
.link-list .path { overflow-wrap: anywhere; }
.link-list__cap { display: flex; align-items: center; gap: 8px; color: var(--ink-3); margin-top: 6px; }

/* Barra de ocupação: --pct de 0 a 100%; a cor segue a situação (ok, warn, full/empty, off). */
.meter { width: 100%; min-width: 90px; height: 7px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.meter > span { display: block; width: var(--pct); height: 100%; border-radius: 4px; background: var(--ok); }
.meter--warn > span { background: var(--warn); }
.meter--full > span, .meter--empty > span { background: var(--danger); }
.meter--off > span { background: var(--ink-3); }
.meter--sm { display: inline-block; width: 90px; height: 6px; vertical-align: middle; }

.link-groups, .link-chart, .link-form { margin-bottom: 18px; }
.link-capacity { display: grid; gap: 8px; margin: 0 0 16px; font-size: 14px; color: var(--ink-2); }
.link-capacity__text { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.link-capacity__text b { color: var(--ink); }
.link-capacity .meter { height: 9px; }
.link-targets td { vertical-align: top; }
.link-targets tr.is-current td { background: var(--info-bg); }
.link-target b { font-weight: 650; }
.link-target .path { max-width: 380px; }
.link-count { min-width: 130px; }
.link-count .meter { margin-top: 6px; }
.link-actions { flex-wrap: wrap; justify-content: flex-start; }
.link-actions form { margin: 0; }
.link-actions .btn--sm { padding: 0 10px; }
/* Editar grupo: janela no meio da tela (a tabela rola de lado e cortaria um balão preso à linha). */
.link-edit[open]::before { content: ""; position: fixed; inset: 0; z-index: 90; background: rgb(11 15 23 / .55); } /* como o .paste-dialog */
.link-edit .link-edit__form { position: fixed; left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); z-index: 91;
  flex-direction: column; gap: 12px; width: min(calc(100vw - 32px), 460px); max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px; text-align: left; }
.link-add { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.link-add__title { margin: 0; font: 700 15px/1.2 var(--f-display); }
.link-add [hidden] { display: none; }
.link-add__multi { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--info-bg); color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.link-add__multi code { font: 600 13px/1 var(--f-mono); color: var(--ink); }
.link-add__multi .mono { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.link-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px 24px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.link-bars__title { margin: 0 0 8px; font: 500 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.link-bars ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.link-bars li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; border-radius: 6px; font-size: 13px; color: var(--ink-2); isolation: isolate; }
.link-bars li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 6px; background: var(--ok-bg); z-index: -1; }
.link-bars li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-bars li b { color: var(--ink); font-variant-numeric: tabular-nums; }
.link-bars__empty { margin: 0; font-size: 13px; }
.link-form { max-width: 980px; }
.link-form .select { width: 100%; }
.link-kind { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.link-kind legend { padding: 0; margin-bottom: 6px; }
.link-form fieldset.link-fallback { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin: 0; display: grid; gap: 12px; }
.link-fallback legend { padding: 0 6px; }
.link-fallback > p { margin: 0; }
.link-slug span { flex: none; font-size: 13px; }
.link-delete { margin: 0 0 24px; }
[data-kind-only][hidden] { display: none; }

.redirect-wait .login__card { text-align: center; }
.redirect-wait .login__tag { margin-bottom: 22px; }
.redirect-wait__img { display: block; width: 100%; max-width: 240px; margin: 0 auto 18px; border-radius: 14px; }
/*
 * Animações da página de espera (escolhidas na edição do link) e os pontinhos do título.
 * Andam mesmo com "reduzir movimento" ligado no aparelho: a regra geral lá em cima encurta toda animação
 * para .01ms, o que fazia o círculo girar desesperado ou parar. Decisão do dono: a página precisa mostrar
 * que algo está acontecendo; por isso os !important (ganham da regra geral) e o ritmo lento e suave.
 */
.wait-loader { display: flex; justify-content: center; align-items: center; height: 48px; margin: 4px auto 22px; }
.wait-loader--wave { gap: 6px; align-items: flex-end; height: 40px; }
.wait-loader--wave span { width: 12px; height: 100%; border-radius: 6px 6px 3px 3px; background: var(--tab); transform-origin: bottom;
  transform: scaleY(.35); opacity: .6; animation: wait-wave 1.6s ease-in-out calc(var(--i) * .13s) infinite !important; }
@keyframes wait-wave { 0%, 100% { transform: scaleY(.35); opacity: .6; } 50% { transform: scaleY(1); opacity: 1; } }
.wait-loader--tabs { gap: 5px; align-items: flex-end; height: 40px; }
.wait-loader--tabs span { width: 26px; height: 11px; border-radius: 6px 6px 0 0; background: var(--tab); opacity: .2;
  animation: wait-tabs 2.4s ease-in-out calc(var(--i) * .2s) infinite !important; }
@keyframes wait-tabs { 0%, 8% { opacity: .2; } 20%, 60% { opacity: 1; } 80%, 100% { opacity: .2; } }
.wait-loader--ring span { width: 46px; height: 46px; border-radius: 50%; border: 6px solid var(--line-2); border-top-color: var(--s-vendas);
  animation: wait-ring 1.6s cubic-bezier(.5, .15, .5, .85) infinite !important; }
@keyframes wait-ring { to { transform: rotate(360deg); } }
.wait-loader--bar span { position: relative; display: block; width: min(100%, 220px); height: 10px; border-radius: 5px; background: var(--line-2); overflow: hidden; }
.wait-loader--bar span::before { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--s-vendas), var(--s-checkout), var(--s-criativos), var(--s-entregavel), var(--s-referencia-visual), var(--s-bonus));
  animation: wait-bar var(--secs, 4s) linear forwards !important; }
.wait-loader--bar.is-loop span::before { animation: wait-bar-loop 4s linear infinite !important; }
@keyframes wait-bar { to { transform: scaleX(1); } }
@keyframes wait-bar-loop { 0% { transform: scaleX(0); } 90%, 100% { transform: scaleX(1); } }
.wait-dots { display: inline-flex; gap: .12em; margin-left: .08em; }
.wait-dots span { width: .17em; height: .17em; border-radius: 50%; background: currentColor; animation: wait-dot 1.4s ease-in-out infinite !important; }
.wait-dots span:nth-child(2) { animation-delay: .18s !important; }
.wait-dots span:nth-child(3) { animation-delay: .36s !important; }
@keyframes wait-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-.28em); opacity: 1; } }
.redirect-wait__btn { height: 50px; font-size: 16px; }
.redirect-wait__count { margin: 12px 0 0; font-size: 14px; color: var(--ink-3); min-height: 1.4em; }
.redirect-wait__help { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.redirect-wait__test { margin: 18px 0 0; text-align: left; line-height: 1.5; }
.link-loader { border: 0; padding: 0; margin: 0; }
.link-loader legend { padding: 0; margin-bottom: 6px; }
.link-loader__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.link-loader__opt { display: grid; justify-items: center; gap: 4px; padding: 12px 10px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet-2); cursor: pointer; text-align: center; font-size: 13px; }
.link-loader__opt:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--sheet); }
.link-loader__opt input { position: absolute; opacity: 0; pointer-events: none; }
.link-loader__opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.link-loader__opt .wait-loader { width: 100%; margin: 0 0 4px; }
.link-loader__opt .hint { line-height: 1.35; }

/* Admin > Sistema > Configurações (app/settings.php) */
.settings { display: grid; gap: 18px; max-width: 980px; }
.payments-settings { grid-template-columns: minmax(0, 1fr); }
.payments-settings > section, .payments-settings > details, .payments-settings .field { min-width: 0; }
.payments-settings .table-wrap { max-width: 100%; }
.payment-connection-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.settings-nav { flex-wrap: wrap; margin-left: 0; }
.settings-section { scroll-margin-top: 90px; }
.settings-about { margin: -4px 0 0; color: var(--ink-2); font-size: 14px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px 18px; align-items: start; }
.settings-grid .switch { grid-column: 1 / -1; }
.settings-grid .field--num .input { max-width: 160px; }
.settings-changed { display: block; margin-top: 4px; font-size: 12px; color: var(--warn); }
.settings-file { display: grid; gap: 0; margin: 12px 0 0; }
.settings-file div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 16px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.settings-file div:last-child { border-bottom: 0; }
.settings-file dt { font-weight: 600; font-size: 14px; }
.settings-file dd { margin: 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.settings-file dd .mono { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
@media (max-width: 560px) { .settings-file div { grid-template-columns: 1fr; } }
.security-limits { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin: 0; display: grid; gap: 10px; }
.security-limits legend { padding: 0 6px; font-weight: 600; font-size: 13px; }
.security-hint { margin-top: -8px; }

/* Janela de confirmação e de aviso (ui.js: LowSwipe.confirm / LowSwipe.alert e formulários com data-confirm) */
/* Problemas reportados no admin: número no menu, tabela e a faixa do admin da oferta. */
.nav-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 999px;
  background: var(--danger); color: var(--on-ink); font: 700 11px/1 var(--f-body); vertical-align: 1px; }
.reports__msg { max-width: 420px; white-space: normal; overflow-wrap: anywhere; }
.reports-box__list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.reports-box__list li { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 14px; padding-top: 8px; border-top: 1px solid var(--warn-line); }
.reports-box__list li > div:first-child { flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; }
/* Reportar problema (página da oferta). */
.report-dialog { width: min(100% - 32px, 500px); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); }
.report-dialog::backdrop { background: rgb(11 15 23 / .55); }
.report-dialog__box { display: grid; gap: 14px; padding: 20px 22px; }
.report-dialog__box[hidden] { display: none; }
.report-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report-dialog__title { margin: 0; font: 700 19px/1.25 var(--f-display); }
.report-dialog__title span { color: var(--s-criativos); }
.report-dialog__x { border: 0; background: none; color: var(--ink-3); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.report-dialog__x:hover { color: var(--ink); background: var(--paper); }
.report-dialog__offer { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--paper); font-size: 14px; color: var(--ink-2); }
.report-dialog__offer b { color: var(--ink); }
.report-dialog__field { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; }
.report-dialog__field .select, .report-dialog__field textarea { width: 100%; font-weight: 400; }
.report-dialog__field textarea { min-height: 110px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.report-dialog__hint { display: flex; justify-content: space-between; gap: 10px; margin: -6px 0 0; font-size: 12.5px; color: var(--ink-3); }
.report-dialog__error { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--danger); }
.report-dialog__done p { margin: 0; color: var(--ink-2); }
.report-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; }
.ask-dialog { width: min(100% - 32px, 440px); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); }
.ask-dialog::backdrop { background: rgb(11 15 23 / .55); } /* como o .paste-dialog */
.ask-dialog[open] { animation: ask-in .16s ease-out; }
@keyframes ask-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.ask-dialog__box { display: grid; gap: 10px; padding: 22px 22px 18px; }
.ask-dialog__title { margin: 0; font: 700 19px/1.25 var(--f-display); }
.ask-dialog__text { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; white-space: pre-line; }
.ask-dialog__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.btn--danger-solid { background: var(--danger); border-color: var(--danger); color: var(--on-ink); }
.btn--danger-solid:hover { background: var(--danger); border-color: var(--danger); filter: brightness(1.08); }
@media (max-width: 420px) { .ask-dialog__actions .btn { flex: 1; } }

/* Admin > Leitura da biblioteca > Computadores (programa de automação). */
/* Computadores da Leitura da biblioteca, em tabela: com aviso em amarelo, sem sinal mais apagado. */
.machines-table tr.machine-row--alert td { background: var(--warn-bg); }
.machines-table tr.machine-row--off td { opacity: .75; }
.machines-table .status--busy { margin-left: 6px; }
.machine__alert { font-weight: 600; color: var(--warn); }

/* Admin > Usuário: o formulário trava inteiro (fieldset) quando a Equipe abre uma conta de admin ou da Equipe, e a caixa
   das páginas do painel da Equipe (caixinha, nome e ↗ para abrir em outra aba). */
.form-lock { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }
.team-pages { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet-2); }
.team-pages legend { padding: 0 6px; }
.team-pages__groups { display: grid; gap: 18px; margin-top: 16px; }
.team-pages__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.team-pages__group > legend { padding: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.team-pages__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 4px 18px; margin-top: 6px; }
.team-pages__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line-2); }
.team-pages__item .check { display: flex; flex-wrap: nowrap; min-width: 0; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.team-pages__item input { flex: none; width: 16px; height: 16px; accent-color: var(--ink); }
.team-pages__open { flex: none; text-decoration: none; color: var(--ink-3); padding: 0 4px; }
.team-pages__open:hover { color: var(--focus); }
.team-perms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.team-perms__title { font-weight: 700; font-size: 13.5px; }
.team-perms .check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.team-perms .check input { width: 16px; height: 16px; accent-color: var(--ink); }
.team-perms .hint { flex-basis: 100%; }
/* Equipe só para ver (admin.js): botões que alteram ficam desligados; a faixa no topo explica. */
.readonly-bar { margin: 0 0 14px; }
/* Equipe sem "incluir e editar" / sem "excluir" (data-admin-perms no <html>, admin_perm_attr()): somem as áreas de envio,
   os Capturar e os botões dos arquivos; os formulários o admin.js desliga. O servidor recusa do mesmo jeito. */
html[data-admin-perms]:not([data-admin-perms~="editar"]) :is([data-dropzone], [data-import-drop], .drops-toggle, [data-capture], [data-act="move"], [data-act="up"], [data-act="down"], [data-act="transcribe"]) { display: none !important; }
html[data-admin-perms]:not([data-admin-perms~="excluir"]) [data-act="delete"] { display: none !important; }
.hint--warn { color: var(--warn); font-weight: 600; }

/* Mais ofertas deste anunciante (oferta.php, advertiser_others()): os cards das outras ofertas da mesma página da
   Biblioteca, o "Ver todas" (listagem com ?anunciante=) e, para o plano gratuito, quantas ficam só para assinantes. */
.more-adv { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.more-adv__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.more-adv__title { margin: 0; font: 700 20px/1.2 var(--f-display); }
.more-adv__all { font-weight: 600; white-space: nowrap; }
.more-adv__locked { margin: 12px 0 0; color: var(--ink-2); font-size: 14px; }
.more-adv--locked p { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--sheet); border: 1px dashed var(--line-strong); color: var(--ink-2); }

/* Aba Anunciantes (anunciantes.php): um card por página da Biblioteca, com as capas de até 3 ofertas, os números e os
   botões; trancado no plano gratuito (sem nome, capas nem links). A aba fica um pouco separada das seções. */
.tab--adv { margin-left: 10px; }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 18px; }
.adv { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); overflow: hidden;
  box-shadow: inset 0 3px 0 var(--s-anunciantes); }
.adv__covers { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); /* com menos de 3 ofertas, as capas ocupam a largura */ gap: 2px; aspect-ratio: 3 / 1.25; background: var(--paper-2); }
.adv__cover { position: relative; overflow: hidden; background: color-mix(in srgb, var(--s-anunciantes) 10%, var(--paper-2)); }
.adv__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.adv__cover--lock { display: grid; place-items: center; font-size: 28px; }
.adv__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.adv__name { margin: 0; font: 700 17px/1.25 var(--f-display); overflow-wrap: anywhere; }
.adv__name, .adv-band__name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adv__name > span:last-child, .adv-band__name > span:last-child { min-width: 0; }
.adv-avatar { position: relative; display: inline-grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px;
  overflow: hidden; border-radius: 50%; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); font: 600 16px/1 var(--f-display); }
.adv-avatar--large { flex-basis: 56px; width: 56px; height: 56px; font-size: 24px; }
.adv-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adv__stats { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--ink-2); }
.adv__stats b { color: var(--ink); }
.adv__note { margin: 0; font-size: 13px; color: var(--ink-2); }
/* Botões no fim do card e no centro: na mesma altura em todos os cards da linha (decisão do dono). */
.adv__actions { display: grid; justify-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.adv__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.adv--locked .adv__name { color: var(--ink-2); }
.adv__share { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.adv__share b { color: var(--ink); }
.adv__bar { flex: 0 0 64px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.adv__bar > span { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: var(--s-anunciantes); }
.adv__cats { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; }

/* Faixa do anunciante embaixo do título da listagem (advertiser_band(), com ?anunciante=). */
.adv-band { margin: -6px 0 18px; padding: 14px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--s-anunciantes) 35%, var(--line));
  background: color-mix(in srgb, var(--s-anunciantes) 9%, var(--sheet)); box-shadow: inset 4px 0 0 var(--s-anunciantes); display: grid; gap: 4px; }
.adv-band__eyebrow { margin: 0; font: 600 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-anunciantes); }
.adv-band__name { margin: 2px 0 0; font: 700 24px/1.15 var(--f-display); overflow-wrap: anywhere; }
.adv-band__stats { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--ink-2); }
.adv-band__stats b { color: var(--ink); }
.adv-band__links { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 600; font-size: 14px; }
.adv-band--locked .adv-band__name { color: var(--ink-2); font-size: 20px; }

/* No lugar do título de "Todas as ofertas": o nome maior e a legenda das seções no canto de cima, à direita. */
.adv-band--title { margin-top: 0; position: relative; }
.adv-band--title .adv-band__name { font-size: clamp(26px, 4vw, 34px); }
.adv-band--title > .legend { position: absolute; top: 14px; right: 18px; margin: 0; }
@media (max-width: 900px) { .adv-band--title > .legend { display: none; } }
.adv { position: relative; } /* o coração (.fav) fica no canto de cima, como nos cards das ofertas */
.card__tag--lang::before { content: "🌐"; margin-right: 4px; font-size: 10px; } /* idioma no card do anunciante */
.adv__tags .card__tag { background: transparent; }
.adv__more { align-self: center; font: 600 11.5px/1 var(--f-mono); color: var(--ink-3); }

/* Central de notificações: herda tipografia, painéis, campos e cores do app. */
.notification-tabs { display:flex; flex-wrap:wrap; gap:8px 24px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.notification-tabs a { padding:12px 0; color:var(--ink-2); text-decoration:none; border-bottom:2px solid transparent; }
.notification-tabs a[aria-current] { color:var(--ink); border-bottom-color:var(--focus); font-weight:700; }
.notification-form { max-width:760px; margin-top:20px; }
.notification-form fieldset { min-width:0; border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.notification-form legend { padding:0 8px; font-weight:700; }
.notification-form .input { max-width:100%; }
.notification-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.notification-preview { padding:20px; background:var(--sheet-2); border:1px solid var(--line); border-radius:var(--r); overflow-wrap:anywhere; }
.notification-preview p { margin:8px 0 0; }
.notification-setup { margin-top:24px; max-width:760px; }
.notification-setup summary,.notification-devices summary { cursor:pointer; font-weight:600; padding-block:12px; }
.notification-setup code { overflow-wrap:anywhere; white-space:normal; }
.notification-history { display:grid; gap:20px; }
.notification-history-filters { display:grid; grid-template-columns:minmax(200px,2fr) repeat(4,minmax(140px,1fr)); gap:16px; margin-block:24px; align-items:end; }
.notification-history-filters .field { min-width:0; margin:0; }
.notification-history-filter-actions { grid-column:1/-1; }
#notificacoes-historico > .results { display:block; white-space:normal; margin-block:20px 12px; line-height:1.7; }
.notification-history-table { min-width:980px; font-variant-numeric:tabular-nums; }
.notification-history-table td { vertical-align:top; }
.notification-history-table td:first-child { width:32%; min-width:260px; max-width:460px; overflow-wrap:anywhere; }
.notification-history-table td:last-child { width:190px; min-width:190px; }
.notification-history-table td > :is(small,span) { display:block; }
.notification-history-table time { white-space:nowrap; }
.notification-history-details { margin-top:8px; }
.notification-history-details summary { cursor:pointer; color:var(--ink-2); padding-block:6px; }
.notification-history-details > .stack { padding-block:12px; gap:12px; }
.notification-history-details p { margin:0; }
.notification-history-message { white-space:pre-wrap; }
.notification-history-actions { display:grid; gap:4px; }
.notification-history-actions a { padding-block:6px; }
.notification-history-actions .btn { white-space:normal; }
@media(max-width:1100px) { .notification-history-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .notification-history-search { grid-column:1/-1; } }
@media(max-width:600px) { .notification-history-filters { grid-template-columns:minmax(0,1fr); } }
.notification-history-head,.notification-device { display:flex; justify-content:space-between; align-items:start; gap:16px; }
.notification-device { padding:16px 0; border-bottom:1px solid var(--line); }
.notification-device b,.notification-history p { overflow-wrap:anywhere; }
.notification-preferences { margin-block:24px; }
.notification-user { display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.notification-user button { flex-shrink:0; }
@media(max-width:600px) { .notification-fields { grid-template-columns:1fr; } .notification-history-head,.notification-device { flex-direction:column; } }

/* Regras de resumo: leitura por prioridade, público e faixa de envio. */
.notification-rules { margin-top:32px; max-width:1000px; }
.notification-rules h2 { margin:0 0 8px; }
.notification-rule-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:24px; align-items:start; padding:20px 0; border-bottom:1px solid var(--line); }
.notification-rule-row h3 { font-size:16px; margin:0 0 6px; overflow-wrap:anywhere; }
.notification-rule-row p { margin:6px 0 0; }
#editar-regra { scroll-margin-top:24px; }
#editar-regra select[multiple] { min-height:110px; }
@media(max-width:760px) { .notification-rule-row { grid-template-columns:1fr; gap:12px; } }

/* Relatórios operacionais de notificações: controles compactos, dados em tabela rolável. */
.notification-report-filters { display:flex; flex-wrap:wrap; align-items:end; gap:16px; margin-block:24px; }
.notification-report-filters .field { flex:1 1 190px; min-width:0; }
.notification-report-table { table-layout:auto; min-width:1550px; width:100%; }
.notification-report-table td { white-space:normal; overflow-wrap:anywhere; min-width:140px; max-width:280px; }
.notification-report-table td:first-child { min-width:220px; }
.notification-rule-row > .row { max-width:300px; flex-wrap:wrap; }
@media(max-width:600px) { .notification-report-filters > div { width:100%; } }

/* Identificação e nome administrativo das instalações. */
.machine-id { overflow-wrap: anywhere; user-select: all; }
/* Edição no próprio lugar do nome, com ações compactas. */
.machine-name { min-width: 0; }
.machine-name__show { display: flex; align-items: center; gap: 6px; min-height: 34px; }
.machine-name__show > b { overflow-wrap: anywhere; }
.machine-name__form { display: flex; align-items: center; gap: 6px; }
.machine-name__form[hidden], .machine-name__show[hidden] { display: none; }
.machine-name__form .input { flex: 1 1 auto; width: 0; min-width: 0; height: 36px; }
.machine-name__form .btn { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; }
.machine-name__form svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.machine-remove { margin-top: 6px; }

.machines-table td:nth-child(2) .status { white-space: normal; }
.machines-table { table-layout: fixed; }
.machines-table th, .machines-table td { padding: 10px 8px; overflow-wrap: anywhere; }
.machines-table th { white-space: normal; line-height: 1.4; letter-spacing: .04em; }
.machines-table th:nth-child(1) { width: 21%; }
.machines-table th:nth-child(2) { width: 9%; }
.machines-table th:nth-child(3) { width: 5%; }
.machines-table th:nth-child(4) { width: 10%; }
.machines-table th:nth-child(5) { width: 13%; }
.machines-table th:nth-child(6) { width: 10%; }
.machines-table th:nth-child(7) { width: 10%; }
.machines-table th:nth-child(8) { width: 6%; }
.machines-table th:nth-child(9) { width: 7%; }
.machines-table th:nth-child(10) { width: 9%; }
.machines-table .mono { white-space: normal; }
.machines-table .btn { max-width: 100%; white-space: normal; }
.machines-table .machine-name__form .btn { max-width: none; }
@media (max-width: 900px) { .machines-table { min-width: 1100px; } }

.activation-key-dialog { box-sizing: border-box; width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); overflow: auto; }
.activation-key-dialog::backdrop { background: var(--dialog-backdrop); }
.activation-key-dialog__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.activation-key-dialog__head .panel__title { margin: 0; }
.activation-key-dialog__head .iconbtn { flex: none; }
.activation-key-dialog__identity { display: grid; gap: 5px; margin: 18px 0; }
.activation-key-dialog .ads-key__value { background: var(--sheet-2); border: 1px solid var(--line); }
.activation-key-dialog__footer { display: flex; justify-content: flex-end; margin-top: 22px; }
.payment-email-settings .check, .payment-password-setup .check--terms { flex-wrap: nowrap; align-items: flex-start; }
.payment-email-settings .check > input { flex: none; margin-top: 3px; }
.payment-email-settings .check > span, .payment-password-setup .check--terms > span { min-width: 0; }
.email-option-row { display: flex; align-items: flex-start; gap: 12px; }
.email-option-row > .check { flex: 1; min-width: 0; }
.email-preview-link { flex: none; padding-block: 2px; font-size: 13px; text-underline-offset: 3px; }
.email-model-category { background: var(--sheet-2); }
.email-preview-dialog { width: min(960px, calc(100vw - 32px)); height: min(840px, calc(100dvh - 32px)); }
.email-preview-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
.email-preview-dialog p, .email-preview-dialog .activation-key-dialog__footer { margin: 0; }
.email-preview-subject { overflow-wrap: anywhere; }
.email-preview-controls { flex-shrink: 0; }
.email-preview-controls [aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.email-preview-body { flex: 1; min-height: 160px; display: flex; justify-content: center; overflow: hidden; }
.email-preview-body iframe, .email-preview-text { box-sizing: border-box; width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet-2); }
.email-preview-dialog[data-view="mobile"] iframe { width: min(390px, 100%); }
.email-preview-text { margin: 0; padding: 16px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .email-models-table th:nth-child(2), .email-models-table td:nth-child(2) { display: none; }
  .email-models-table td:first-child { white-space: normal; }
}
.payment-product-dialog { width: min(780px, calc(100vw - 32px)); }
.payment-product-dialog form { margin-top: 18px; }
.payment-product-dialog .settings-grid > .field:last-child { grid-column: 1 / -1; }
.payment-event-dialog { width: min(860px, calc(100vw - 32px)); }
.payment-event-json { max-height: 55dvh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet-2); color: var(--ink); font-size: 13px; line-height: 1.6; }
@media (max-width: 480px) { .activation-key-dialog { padding: 18px; } }

/* Controle geral acima da navegação; abas seguem a Leitura da biblioteca. */
.notification-global { margin:20px 0 24px; padding:16px 20px; background:var(--sheet); border:1px solid var(--line); border-radius:var(--r); }
.notification-global > .row { justify-content:space-between; }
.notification-global .check { margin:0; }
.notification-global .hint { margin:8px 0 0; }
.notification-management-tabs { margin:0 0 20px; border-bottom:1px solid var(--line); }
.notification-rules-table { margin-top:20px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--sheet); }
.notification-rules-table .notification-rule-row { padding:20px; }
.notification-rules-table .notification-rule-row:nth-child(even) { background:var(--sheet-2); }
.notification-rules-table .notification-rule-row:last-child { border-bottom:0; }

.notification-char-count { font-variant-numeric:tabular-nums; }
.notification-visibility { display:block; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--sheet-2); color:var(--ink-2); }
.notification-visibility:empty { display:none; }
.notification-visibility.is-caution { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); font-weight:600; }

/* Seções de pagamento: resumo acessível e conteúdo recolhido por padrão. */
.payment-section__summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; }
.payment-section__summary::-webkit-details-marker { display: none; }
.payment-section__summary > svg { width: 18px; height: 18px; flex-shrink: 0; }
.payment-section[open] > .payment-section__summary > svg { transform: rotate(90deg); }
.payment-section__summary > .panel__title { margin: 0; }
.payment-section__summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 3px; }
.payment-section__body { margin-top: 18px; }

.payment-checkout-priority { display: inline-block; margin-top: 8px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--sheet-2); color: var(--ink); font-size: 12px; font-weight: 600; }