/* Base da interface: tema (tokens de cor e de profundidade), tipografia, cabeçalho com menus,
   gaveta, home, botões, ícones e controles das opções. A página de ferramenta fica em
   shell/toolpage.css. Tokens, níveis de elevação e a tabela de contraste: docs/TEMA.md. */

/* O atributo hidden sempre vence (.btn e afins definem display). */
[hidden] { display: none !important; }

/* ---------- Tema ----------
   Claro é o padrão, independente do sistema. O escuro vale com <html data-theme="dark">,
   aplicado antes da primeira pintura por shell/theme-init.js (a escolha fica no localStorage;
   o botão do cabeçalho é o shell/theme.js). Os nomes antigos (--surface-2, --shadow…)
   continuam valendo. Camadas translúcidas (--surface-2, --surface-3, --state-*, --*-soft,
   --border, --border-mid) funcionam sobre QUALQUER nível: a mesma regra serve no cartão, na
   barra lateral e no menu. Cores com razão de contraste medida em docs/TEMA.md. */

:root {
  color-scheme: light;
  /* Superfícies, do nível 0 ao 4 */
  --bg: #f5f5fa;                          /* 0 · fundo da página */
  --surface: #ffffff;                     /* 1 · cartões, painéis, cabeçalho (reescopado: ver abaixo) */
  --surface-raised: #ffffff;              /* 2 · barra lateral de opções, cabeçalho ao rolar */
  --surface-overlay: #ffffff;             /* 3–4 · menus, gaveta, camada de soltar */
  --surface-sunken: rgb(40 50 110 / .055); /* afundado: miniaturas, quadros de prévia */
  --surface-2: rgb(40 50 110 / .045);     /* preenchimento sutil: etiquetas, caixas neutras */
  --surface-3: rgb(40 50 110 / .11);      /* preenchimento forte: trilha da barra, xadrez, desativado */
  --checker: var(--surface-3);            /* quadrados do xadrez (transparência de imagem), sobre o afundado */
  --field-bg: #ffffff;                    /* campos (com sombra interna: afundados) */
  /* Estados (camadas translúcidas por cima de qualquer superfície) */
  --state-hover: rgb(40 50 110 / .05);
  --state-press: rgb(40 50 110 / .09);
  /* Bordas */
  --border: rgb(30 40 90 / .11);          /* hairline, decorativa */
  --border-mid: rgb(30 40 90 / .2);       /* visível sem carregar informação (botões com texto, pílulas) */
  --border-strong: #7a8296;               /* ≥ 3:1 — campos, caixas, rádios, controles sem texto */
  /* Texto */
  --text: #151827;
  --muted: #566075;
  --placeholder: #667085;
  /* Acento (índigo) */
  --accent: #4f46e5;       /* texto/links, borda e marca de selecionado, anel de foco, barra de progresso */
  --accent-fill: #4f46e5;  /* botões cheios */
  --accent-hover: #4338ca; /* botão cheio com o mouse */
  --accent-soft: rgb(79 70 229 / .085);
  --on-accent: #ffffff;    /* texto/ícone sobre --accent-fill */
  --on-mark: #ffffff;      /* ✓ sobre --accent (marcas de selecionado) */
  --focus: var(--accent);
  /* Situações */
  --good: #08703d;
  --good-soft: rgb(8 140 70 / .1);
  --bad: #b42318;
  --bad-fill: #b42318;     /* fundo de botão destrutivo (texto --on-accent) */
  --bad-soft: rgb(210 40 30 / .08);
  --warn: #8a4b00;
  --warn-soft: rgb(230 150 20 / .13);
  --info: #475467;
  --info-soft: rgb(60 80 120 / .07);
  /* Profundidade: sombra de contato + sombra difusa, em azul-ardósia (nada de cinza sujo) */
  --elev-0: none;
  --elev-1: 0 1px 2px rgb(22 28 60 / .05), 0 1px 3px rgb(22 28 60 / .05);
  --elev-2: 0 1px 2px rgb(22 28 60 / .06), 0 4px 12px -2px rgb(22 28 60 / .1);
  --elev-3: 0 2px 4px -1px rgb(22 28 60 / .07), 0 12px 28px -6px rgb(22 28 60 / .18);
  --elev-4: 0 4px 10px -2px rgb(22 28 60 / .1), 0 24px 60px -12px rgb(22 28 60 / .32);
  --elev-up: 0 -1px 2px rgb(22 28 60 / .04), 0 -8px 24px -8px rgb(22 28 60 / .16); /* barra fixa no rodapé */
  --elev-side: -12px 0 32px -24px rgb(22 28 60 / .22);                              /* barra lateral sobre a área */
  --inset: inset 0 1px 2px rgb(22 28 60 / .07);                                    /* afundado (campos, trilhas) */
  --page-shadow: 0 1px 2px rgb(22 28 60 / .14), 0 3px 10px rgb(22 28 60 / .1);   /* folha de PDF na miniatura */
  --shadow-btn: 0 1px 2px rgb(49 46 129 / .2), 0 6px 16px -4px rgb(79 70 229 / .45);
  --backdrop: rgb(15 18 35 / .42);
  /* Nomes antigos (mantidos) */
  --shadow-sm: var(--elev-1);
  --shadow: var(--elev-2);
  --shadow-lg: var(--elev-3);
  --radius: 14px;
  --radius-sm: 10px;
  --header-h: 64px;                       /* altura do cabeçalho, com a linha de baixo */
  --sticky-top: var(--header-h);          /* o que gruda no topo (scroll-padding do foco) */
  /* Ladrilhos das ferramentas: traço ≥ 3:1 sobre o fundo do ladrilho */
  --t-green: #15803d; --t-green-soft: #e2f5e9;
  --t-orange: #d9480f; --t-orange-soft: #fdece2;
  --t-violet: #7c3aed; --t-violet-soft: #f0e9fe;
  --t-pink: #c81e63; --t-pink-soft: #fce7f1;
  --t-blue: #2563eb; --t-blue-soft: #e6eefe;
  --t-navy: #1e3a8a; --t-navy-soft: #e4e9f7;
  --t-teal: #0f766e; --t-teal-soft: #dff3f0;
  --t-slate: #475569; --t-slate-soft: #edf0f5;
  /* Tipos de arquivo: corpo ≥ 3:1 sobre as superfícies; emblema (--f-on) ≥ 4,5:1 sobre o corpo.
     O JPG é amarelo de propósito: emblema escuro e contorno (--f-jpg-line) para os 3:1. */
  --f-on: #ffffff; --f-fold: rgb(255 255 255 / .45);
  --f-pdf: #d92d20; --f-jpg: #f5b50a; --f-jpg-on: #3d2a00; --f-jpg-line: #9a6a00;
  --f-word: #2b5cb8; --f-ppt: #c4441a; --f-excel: #1a7a45; --f-html: #9a6a00; --f-pdfa: #1f2f66;
  --f-webp: #0b7a6f; --f-png: #6d4bd8; --f-img: #7c3aed; --f-vid: #c81e63; --f-zip: #5f6776;
  --f-doc: #5b6b82; --f-txt: #5b6b82;
  /* Ícone de ✓ para as marcas de selecionado (máscara; a cor vem do background) */
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.5 4.5 8.5-9.5'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* No escuro a profundidade vem das superfícies, cada nível um pouco mais claro */
  --bg: #0e1016;
  --surface: #161920;
  --surface-raised: #1b1f28;
  --surface-overlay: #222733;
  --surface-sunken: rgb(0 0 0 / .28);
  --surface-2: rgb(200 210 255 / .055);
  --surface-3: rgb(200 210 255 / .11);
  --checker: var(--surface-2);
  --field-bg: #0f1117;
  --state-hover: rgb(200 210 255 / .06);
  --state-press: rgb(200 210 255 / .1);
  --border: rgb(210 220 255 / .085);
  --border-mid: rgb(210 220 255 / .15);
  --border-strong: #7a8296;
  --text: #e9ebf2;
  --muted: #a0a8b9;
  --placeholder: #8d95a8;
  --accent: #aba6ff;
  --accent-fill: #645cec;
  --accent-hover: #675fee;
  --accent-soft: rgb(165 160 255 / .14);
  --on-accent: #ffffff;
  --on-mark: #0e1016;
  --good: #4ade80;
  --good-soft: rgb(74 222 128 / .12);
  --bad: #ff8a80;
  --bad-fill: #d92d20;
  --bad-soft: rgb(255 120 110 / .13);
  --warn: #f5b95f;
  --warn-soft: rgb(245 185 95 / .13);
  --info: #bcc4d4;
  --info-soft: rgb(200 210 255 / .07);
  /* Sombras discretas + brilho de 1 px no topo das superfícies elevadas */
  --elev-1: 0 1px 2px rgb(0 0 0 / .4);
  --elev-2: inset 0 1px 0 rgb(255 255 255 / .03), 0 1px 2px rgb(0 0 0 / .4), 0 6px 16px -4px rgb(0 0 0 / .45);
  --elev-3: inset 0 1px 0 rgb(255 255 255 / .04), 0 2px 6px rgb(0 0 0 / .4), 0 16px 36px -8px rgb(0 0 0 / .6);
  --elev-4: inset 0 1px 0 rgb(255 255 255 / .05), 0 4px 12px rgb(0 0 0 / .45), 0 28px 64px -12px rgb(0 0 0 / .75);
  --elev-up: 0 -8px 24px -8px rgb(0 0 0 / .6);
  --elev-side: -12px 0 32px -24px rgb(0 0 0 / .7);
  --inset: inset 0 1px 2px rgb(0 0 0 / .35);
  --page-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 3px 10px rgb(0 0 0 / .35);
  --shadow-btn: 0 1px 2px rgb(0 0 0 / .4), 0 8px 20px -6px rgb(100 92 236 / .55);
  --backdrop: rgb(0 0 0 / .6);
  --t-green: #4ade80; --t-green-soft: #132d1e;
  --t-orange: #fb923c; --t-orange-soft: #35210f;
  --t-violet: #b69cff; --t-violet-soft: #271f44;
  --t-pink: #f472b6; --t-pink-soft: #361829;
  --t-blue: #8ab4f8; --t-blue-soft: #19263d;
  --t-navy: #a5b8f7; --t-navy-soft: #1c2340;
  --t-teal: #5eead4; --t-teal-soft: #112c29;
  --t-slate: #cbd5e1; --t-slate-soft: #242a35;
  /* No escuro os corpos ficam claros e o emblema escuro (≥ 4,5:1 dos dois lados) */
  --f-on: #0e1016; --f-fold: rgb(14 16 22 / .22);
  --f-pdf: #ff7a70; --f-jpg: #f7c233; --f-jpg-on: #2b1d00; --f-jpg-line: #f7c233;
  --f-word: #7fa7f5; --f-ppt: #ff9366; --f-excel: #4fd18b; --f-html: #e8b949; --f-pdfa: #93a8f6;
  --f-webp: #3fd6c3; --f-png: #b19bff; --f-img: #c4a7ff; --f-vid: #f68cc4; --f-zip: #b3bac6;
  --f-doc: #aeb8c8; --f-txt: #aeb8c8;
}

/* Reescopo por nível: o que usa var(--surface) dentro da barra lateral e dos menus pinta na
   superfície do nível (cartões de opção, selos dos ícones, o anel das marcas ✓). */
.tp-side { --surface: var(--surface-raised); }
.nav-menu, .drawer-panel { --surface: var(--surface-overlay); }

/* Troca de tema sem transição (senão cada elemento muda num ritmo e a tela "pisca"). */
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

* { box-sizing: border-box; }

/* O foco (Tab) e as âncoras não param atrás do cabeçalho grudado (a barra fixa do celular
   entra pelo toolpage.css, com --tp-foot-h). scrollbar-gutter: a barra de rolagem do
   Windows não empurra o cabeçalho 15 px quando a página passa a rolar. */
html {
  -webkit-text-size-adjust: 100%; background: var(--bg);
  scroll-padding-top: calc(var(--sticky-top) + 12px); scrollbar-gutter: stable;
}
html.no-scroll { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Foco visível e consistente em todos os controles (teclado): anel de 2 px no acento,
   ≥ 3:1 sobre todas as superfícies dos dois temas. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
input:focus-visible, select:focus-visible { outline-offset: 0; }
h1:focus-visible, h2:focus-visible, main:focus-visible { outline: none; }

a { color: var(--accent); text-underline-offset: .18em; }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 200; padding: 10px 16px; border-radius: 10px;
  background: var(--accent-fill); color: var(--on-accent); font-weight: 700; text-decoration: none; transition: top .15s;
}
.skip:focus { top: 10px; box-shadow: var(--elev-3); } /* fora de foco, sem sombra: ela vazaria para dentro da tela */

main { flex: 1; display: flex; flex-direction: column; }
#view-home, #view-tools { flex: 1; }

/* ---------- Cabeçalho (nível 1; ao rolar, nível 2) ---------- */

.topbar {
  position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--surface); border-bottom: 1px solid var(--border);
  transition: box-shadow .2s, background-color .2s;
}
.topbar.is-scrolled { background: var(--surface-raised); box-shadow: var(--elev-2); }
/* A linha de baixo conta dentro dos --header-h (antes o cabeçalho tinha 65 px e a área de
   trabalho, calc(100vh − 64 px), passava 1 px da janela: aparecia a barra de rolagem). */
.topbar-in { position: relative; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; flex: none; border-radius: 10px; }
.logo {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-fill); color: var(--on-accent);
  font-size: 19px; box-shadow: 0 1px 2px rgb(49 46 129 / .25), inset 0 1px 0 rgb(255 255 255 / .18);
}
.logo svg { stroke-width: 2.6; }
.brand-name { font-weight: 800; font-size: 19px; letter-spacing: -.025em; }

.nav { align-self: stretch; min-width: 0; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; gap: 2px; }
.nav-item { position: relative; display: flex; }
.nav-item.is-mega { position: static; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 5px; height: 100%; padding: 0 12px;
  border: 0; background: none; color: var(--text); font: inherit; font-weight: 650; font-size: 14.5px;
  text-decoration: none; white-space: nowrap; cursor: pointer; border-radius: 0;
}
.nav-link:hover, .nav-item.open > .nav-link { color: var(--accent); }
.nav-link:focus-visible { outline-offset: -6px; border-radius: 10px; }
.nav-caret { font-size: 15px; color: var(--muted); transition: transform .15s; }
.nav-item.open .nav-caret { transform: rotate(180deg); color: var(--accent); }
.nav-item.is-current > .nav-link { color: var(--accent); }
/* Aba atual: barra embaixo (marca de forma, não só cor). */
.nav-item.is-current > .nav-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent);
}

/* Botões do canto direito: tema e hambúrguer */
.topbar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.theme-toggle, .burger {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-mid); border-radius: 12px;
  background: var(--surface); color: var(--text); cursor: pointer; font-size: 20px;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.theme-toggle:hover, .burger:hover { background-image: linear-gradient(var(--state-hover), var(--state-hover)); border-color: var(--border-strong); box-shadow: var(--elev-1); }
.theme-toggle:active, .burger:active { background-image: linear-gradient(var(--state-press), var(--state-press)); box-shadow: none; }
.theme-toggle:focus-visible, .burger:focus-visible { border-radius: 12px; }
.theme-toggle svg { stroke-width: 1.9; }
.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; }
.burger { display: none; font-size: 22px; }
/* As 6 abas não couberam inteiras a ≥ 12 px do botão do tema (fonte do sistema mais larga,
   por exemplo — nav.js mede): o hambúrguer fica no lugar delas, como no celular. */
.topbar-in.nav-fold .nav { display: none; }
.topbar-in.nav-fold .burger { display: grid; }

/* Menus suspensos (nível 3) */
.nav-menu {
  position: absolute; top: 100%; left: -8px; z-index: 60; margin-top: 1px;
  background: var(--surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 18px 18px;
  box-shadow: var(--elev-3); padding: 22px 22px 18px;
}
.nav-menu.simple { min-width: 520px; }
/* Menu "Converter" em três colunas (em PDF, de PDF, imagem). O nav.js (fitMenu) puxa o menu
   para a esquerda quando ele passaria da borda da tela. */
.nav-menu.convert { width: max-content; max-width: calc(100vw - 32px); }
.nav-menu.convert .menu-cols { grid-template-columns: repeat(3, minmax(190px, auto)); }
/* O menu grande é posicionado pelo nav.js: alinhado ao botão, sem sair da tela. */
.nav-menu.mega {
  left: auto; right: 24px; width: min(1040px, calc(100vw - 48px));
  border-radius: 0 0 20px 20px; padding: 26px 28px 20px;
}
.menu-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.nav-menu.mega .menu-cols { display: block; column-count: 4; column-gap: 28px; }
.menu-group { break-inside: avoid; margin-bottom: 14px; }
.menu-title {
  margin: 0 0 6px 8px; color: var(--muted); font-size: 11.5px; font-weight: 750;
  letter-spacing: .08em; text-transform: uppercase;
}
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.menu-link {
  display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-weight: 650; font-size: 14.5px; line-height: 1.25;
  transition: background-color .12s;
}
.menu-link:hover { background: var(--state-hover); }
.menu-link:active { background: var(--state-press); }
/* Página atual: fundo de acento + filete à esquerda (marca de forma, não só cor). */
.menu-link[aria-current=page] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.menu-label small { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted); }
/* Ferramenta desligada no servidor: esmaecida sem perder contraste (ícone em cinza, texto
   secundário) e o motivo no title (nav.markAvailability). */
.menu-link.is-off { color: var(--muted); }
.menu-link.is-off .tico { filter: grayscale(1); }
.menu-label small.menu-off { color: var(--warn); }

/* Gaveta (celular, nível 4) */
.drawer { position: fixed; inset: 0; z-index: 120; }
.drawer-backdrop { position: absolute; inset: 0; background: var(--backdrop); opacity: 0; transition: opacity .2s; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 100%); display: flex; flex-direction: column;
  background: var(--surface); box-shadow: var(--elev-4); transform: translateX(100%); transition: transform .22s ease;
}
.drawer.in .drawer-backdrop { opacity: 1; }
.drawer.in .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--border); }
.drawer-title { margin: 0; font-weight: 800; font-size: 18px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 12px 32px; }
.drawer-home { margin-bottom: 14px; }
.drawer-body .menu-group { margin-bottom: 18px; }

/* ---------- Faixa de aviso ---------- */

.banner {
  display: flex; gap: 10px; align-items: center; max-width: 1200px; width: calc(100% - 32px);
  margin: 16px auto 0; padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--warn-soft); color: var(--warn); font-weight: 550; font-size: 14px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 22%, transparent);
}
.banner.restricted { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.banner svg { font-size: 18px; }

.notice { margin: 24px auto; max-width: 640px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); }

.foot { text-align: center; color: var(--muted); font-size: 12.5px; padding: 8px 16px 28px; }
.foot p { margin: 4px 0; }
body.tp-full .foot { display: none; }

/* ---------- Ícones ---------- */

.tico { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; font-size: 21px; }
.tico.sm { width: 32px; height: 32px; border-radius: 9px; font-size: 17px; }
.tico.lg { width: 50px; height: 50px; border-radius: 13px; font-size: 25px; }
.tico.is-file { background: none; }
.tico.is-file .ficon { width: 34px; height: 38px; }
.tico.sm.is-file .ficon { width: 28px; height: 32px; }
.tico.lg.is-file .ficon { width: 44px; height: 50px; }
.t-green { background: var(--t-green-soft); color: var(--t-green); }
.t-orange { background: var(--t-orange-soft); color: var(--t-orange); }
.t-violet { background: var(--t-violet-soft); color: var(--t-violet); }
.t-pink { background: var(--t-pink-soft); color: var(--t-pink); }
.t-blue { background: var(--t-blue-soft); color: var(--t-blue); }
.t-navy { background: var(--t-navy-soft); color: var(--t-navy); }
.t-teal { background: var(--t-teal-soft); color: var(--t-teal); }
.t-slate { background: var(--t-slate-soft); color: var(--t-slate); }

/* Documento com emblema: o corpo usa a cor do tipo; a seta, a mesma cor num selo da superfície. */
.ficon { width: 32px; height: 36px; fill: none; stroke: none; overflow: visible; }
.ficon .fi-body { fill: currentColor; }
.ficon .fi-fold { fill: var(--f-fold); }
.ficon .fi-label { fill: var(--f-on); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 800; letter-spacing: -.02em; }
.ficon .fi-glyph { fill: var(--f-on); }
.ficon .fi-badge { fill: var(--surface); stroke: currentColor; stroke-width: 1.5; }
.ficon .fi-arrow { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fi-pdf { color: var(--f-pdf); }
.fi-jpg { color: var(--f-jpg); }
.fi-jpg .fi-body { stroke: var(--f-jpg-line); stroke-width: 1.2px; }
.fi-jpg .fi-label { fill: var(--f-jpg-on); }
.fi-jpg .fi-fold { fill: rgb(255 255 255 / .55); }
.fi-jpg .fi-badge, .fi-jpg .fi-arrow { stroke: var(--f-jpg-line); }
.fi-word { color: var(--f-word); }
.fi-ppt { color: var(--f-ppt); }
.fi-excel { color: var(--f-excel); }
.fi-html { color: var(--f-html); }
.fi-pdfa { color: var(--f-pdfa); }
.fi-webp { color: var(--f-webp); }
.fi-png { color: var(--f-png); }
.fi-img { color: var(--f-img); }
.fi-vid { color: var(--f-vid); }
.fi-zip { color: var(--f-zip); }
.fi-doc, .fi-txt { color: var(--f-doc); }

/* ---------- Home ---------- */

.home { width: 100%; max-width: 1320px; margin: 0 auto; padding: 56px 24px 64px; }
.home-head { text-align: center; max-width: 840px; margin: 0 auto 30px; }
.home-title { margin: 0 0 14px; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.home-lead { margin: 0; font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 32px; }
.filter {
  border: 1px solid var(--border-mid); background: var(--surface); color: var(--text); padding: 8px 18px;
  border-radius: 99px; font: inherit; font-weight: 650; font-size: 14.5px; cursor: pointer;
  box-shadow: var(--elev-1); transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.filter:hover { background: var(--surface-raised); border-color: var(--border-strong); box-shadow: var(--elev-2); }
.filter:active { box-shadow: none; }
/* Filtro ativo: pílula cheia (preenchida × contorno: diferença de forma, visível em escala de cinza). */
.filter[aria-pressed=true] { background: var(--text); color: var(--surface); border-color: var(--text); box-shadow: var(--elev-1); }
.home-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.home-item { display: flex; min-width: 0; }
/* Cartão da home: nível 1; com o mouse sobe para o 2 (sombra maior, 2 px acima). */
.tool-card {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elev-1);
  color: var(--text); text-decoration: none; transition: box-shadow .18s, transform .18s, border-color .18s;
}
.tool-card:hover { background: var(--surface-raised); box-shadow: var(--elev-3); transform: translateY(-2px); border-color: var(--border-mid); }
.tool-card:active { box-shadow: var(--elev-1); transform: translateY(0); }
.tool-card:focus-visible { border-radius: var(--radius); }
.tool-card .tico { margin-bottom: 6px; }
.tool-card-title { font-weight: 750; font-size: 18px; letter-spacing: -.01em; line-height: 1.25; }
.tool-card-desc { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
/* Desligada no servidor: ícone em cinza e título secundário, sem opacidade (o contraste fica). */
.tool-card.is-off .tico { filter: grayscale(1); }
.tool-card.is-off .tool-card-title { color: var(--muted); }
.tag { position: absolute; top: 16px; right: 16px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.tag.off { background: var(--warn-soft); color: var(--warn); }
.home-empty { text-align: center; color: var(--muted); }
.home-privacy { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 40px auto 0; max-width: 720px; color: var(--muted); font-size: 13.5px; text-align: left; }
.home-privacy svg { font-size: 20px; color: var(--good); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px;
  border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-weight: 650; cursor: pointer;
  text-decoration: none; transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s;
}
.btn.primary { background: var(--accent-fill); color: var(--on-accent); box-shadow: var(--elev-1); }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: var(--elev-2); }
.btn.primary:active:not(:disabled) { box-shadow: none; }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--border-mid); box-shadow: var(--elev-1); }
.btn.ghost:hover:not(:disabled, [aria-disabled=true]) { border-color: var(--accent); color: var(--accent); box-shadow: var(--elev-2); }
.btn[aria-disabled=true] { color: var(--muted); cursor: default; }
.btn.ghost:active:not(:disabled) { background-image: linear-gradient(var(--state-press), var(--state-press)); box-shadow: none; }
/* Desativado: cinza de verdade (e legível), não o índigo lavado. */
.btn:disabled { background: var(--surface-3); color: var(--muted); border-color: transparent; box-shadow: none; cursor: default; }
.btn.small { padding: 6px 12px; font-size: 13.5px; border-radius: 9px; }
.btn svg { font-size: 1.15em; }

/* Botão principal grande (herói e download) */
.btn-hero {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 72px; padding: 0 44px;
  min-width: min(380px, 100%); max-width: 100%; border: 0; border-radius: 12px; background: var(--accent-fill); color: var(--on-accent);
  font: inherit; font-size: 21px; font-weight: 750; letter-spacing: -.01em; line-height: 1.2; cursor: pointer;
  text-decoration: none; box-shadow: var(--shadow-btn); transition: background-color .15s, transform .15s, box-shadow .15s;
}
.btn-hero:hover:not(:disabled, [aria-disabled=true]) { background: var(--accent-hover); transform: translateY(-1px); }
.btn-hero:active:not(:disabled, [aria-disabled=true]) { transform: translateY(1px); box-shadow: var(--elev-1); }
.btn-hero:disabled, .btn-hero[aria-disabled=true] { background: var(--surface-3); color: var(--muted); box-shadow: none; cursor: default; transform: none; }
.btn-hero svg { font-size: 25px; stroke-width: 2.4; }
.btn-hero:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 14px; }

/* Botão de ação da barra lateral */
.btn-action {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 64px; padding: 0 20px;
  border: 0; border-radius: 12px; background: var(--accent-fill); color: var(--on-accent); font: inherit; font-size: 19px;
  font-weight: 750; letter-spacing: -.01em; cursor: pointer; box-shadow: var(--shadow-btn); transition: background-color .15s, box-shadow .15s, transform .15s;
}
.btn-action:hover:not(:disabled, [aria-disabled=true]) { background: var(--accent-hover); }
.btn-action:active:not(:disabled, [aria-disabled=true]) { transform: translateY(1px); box-shadow: var(--elev-1); }
.btn-action:disabled, .btn-action[aria-disabled=true] { background: var(--surface-3); color: var(--muted); cursor: not-allowed; box-shadow: none; transform: none; }
.btn-action svg { font-size: 22px; stroke-width: 2.4; }
.btn-action:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 14px; }

/* Botão redondo (+, voltar, fechar) */
.btn-round {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: var(--accent-fill); color: var(--on-accent); font-size: 22px; cursor: pointer; box-shadow: var(--shadow-btn);
  transition: background-color .15s, transform .15s, box-shadow .15s;
}
.btn-round:hover:not(:disabled) { background: var(--accent-hover); transform: scale(1.04); }
.btn-round:active:not(:disabled) { transform: scale(.98); box-shadow: var(--elev-1); }
.btn-round:disabled { background: var(--surface-3); color: var(--muted); box-shadow: none; cursor: default; }
.btn-round svg { stroke-width: 2.4; }
.btn-round.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border-mid); box-shadow: var(--elev-1); }
.btn-round.ghost:hover:not(:disabled) { background-image: linear-gradient(var(--state-hover), var(--state-hover)); border-color: var(--border-strong); box-shadow: var(--elev-2); }
.btn-round:focus-visible { outline-offset: 3px; border-radius: 50%; }

.link { border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; padding: 0; text-underline-offset: .18em; }
.link:hover { text-decoration: underline; }
.link:disabled { color: var(--muted); cursor: default; text-decoration: none; }
/* Link no meio de uma frase: sublinhado (a cor sozinha não basta). */
:is(p, li, .hint, .opt-note, .dv-help, .tp-done-msg) > .link { text-decoration: underline; }

.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border-mid);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
.chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed=true] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.chip:disabled { color: var(--muted); background: var(--surface-2); border-color: transparent; cursor: default; }
.chip svg { font-size: 15px; }

/* Marca de selecionado: ✓ num círculo no canto — a seleção nunca fica só na cor. */
.chip[aria-pressed=true]::before, .chip[aria-pressed=true]::after,
.opt-choice-item input:checked + span::before, .opt-choice-item input:checked + span::after {
  content: ""; position: absolute; top: -6px; right: -6px; width: 17px; height: 17px; border-radius: 50%; pointer-events: none;
}
.chip[aria-pressed=true]::before, .chip[aria-pressed=true]::after { top: -5px; right: -5px; width: 15px; height: 15px; }
.chip[aria-pressed=true]::before, .opt-choice-item input:checked + span::before { background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.chip[aria-pressed=true]::after, .opt-choice-item input:checked + span::after {
  background: var(--on-mark); -webkit-mask: var(--i-check) center / 11px no-repeat; mask: var(--i-check) center / 11px no-repeat;
}
.chip[aria-pressed=true]::after { -webkit-mask-size: 10px; mask-size: 10px; }

.pill { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 750; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.kept { background: var(--info-soft); color: var(--info); font-weight: 650; }
.pill.warn { background: var(--warn-soft); color: var(--warn); }

.hint { margin: 0; color: var(--muted); font-size: 13px; }

/* ---------- Campos e controles das opções (shell/controls.js) ---------- */

/* Campos afundados: fundo próprio, sombra interna e borda ≥ 3:1. */
input[type=text], input[type=number], input[type=password], input[type=search], select, textarea {
  font: inherit; font-size: 14.5px; color: var(--text); background: var(--field-bg); box-shadow: var(--inset);
  border: 1px solid var(--border-strong); border-radius: 9px; padding: 8px 11px; min-width: 0; max-width: 100%;
  transition: border-color .15s;
}
input[type=text]:hover, input[type=number]:hover, input[type=password]:hover, input[type=search]:hover, select:hover, textarea:hover { border-color: var(--text); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); outline: 2px solid var(--focus); }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; font-weight: 400; }
.check { display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 14.5px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 1px 0 0; flex: none; }

.opt-legend, .opt-title {
  display: block; padding: 0; margin: 0 0 10px; font-size: 12px; font-weight: 750; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.opt-section { display: flex; flex-direction: column; gap: 10px; }
.opt-section .opt-title { margin-bottom: 0; }

.opt-levels, .opt-choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.opt-levels { display: flex; flex-direction: column; gap: 10px; }
.opt-levels .opt-legend { margin-bottom: 0; }
.opt-level { position: relative; cursor: pointer; }
.opt-level input, .opt-choice-item input { position: absolute; opacity: 0; pointer-events: none; }
.opt-level-body {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 44px; position: relative;
  background: var(--surface); border: 1.5px solid var(--border-mid); border-radius: 12px;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
/* Rádio: círculo com borda ≥ 3:1; marcado, cheio com anel interno. */
.opt-level-body::before {
  content: ""; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--field-bg);
}
.opt-level:hover .opt-level-body { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-mid)); box-shadow: var(--elev-1); }
.opt-level input:checked + .opt-level-body { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--elev-1); }
.opt-level input:checked + .opt-level-body::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--field-bg); }
.opt-level input:focus-visible + .opt-level-body { outline: 2px solid var(--focus); outline-offset: 2px; }
.opt-level-head { display: flex; align-items: center; gap: 10px; }
.opt-level-title { font-weight: 700; }
.opt-level input:checked + .opt-level-body .opt-level-title { color: var(--accent); }
/* Força da compressão: três barras (as mesmas do Comprimir PDF), no fim da linha do título. */
.opt-meter { display: flex; align-items: flex-end; gap: 3px; height: 17px; margin-left: auto; }
.opt-meter i { display: block; width: 5px; border-radius: 2px; background: var(--surface-3); }
.opt-meter i:nth-child(1) { height: 7px; }
.opt-meter i:nth-child(2) { height: 11px; }
.opt-meter i:nth-child(3) { height: 16px; }
.opt-meter i.on { background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.opt-level input:checked + .opt-level-body .opt-meter i.on { background: var(--accent); }
.opt-level-desc { color: var(--muted); font-size: 13px; }

.opt-choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-choice-item { position: relative; cursor: pointer; }
.opt-choice-item > span {
  position: relative; display: inline-flex; flex-direction: column; gap: 1px; padding: 8px 15px; border: 1.5px solid var(--border-mid);
  border-radius: 99px; background: var(--surface); font-size: 14px; transition: border-color .15s, background-color .15s;
}
.opt-choice-item b { font-weight: 650; }
.opt-choice.cards .opt-choice-list { flex-direction: column; }
.opt-choice.cards .opt-choice-item > span { display: flex; width: 100%; padding: 12px 14px; border-radius: 12px; }
.opt-choice-item small { color: var(--muted); font-size: 13px; }
.opt-choice-item:hover > span { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-mid)); }
.opt-choice-item input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.opt-choice-item input:checked + span small { color: var(--text); }
.opt-choice-item input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.opt-toggle { display: flex; flex-direction: column; gap: 4px; }
.opt-toggle .hint { padding-left: 27px; }
.opt-field { display: flex; flex-direction: column; gap: 6px; }
.opt-field > label { font-size: 13.5px; font-weight: 650; }
.opt-field select, .opt-field > input { width: 100%; }
.opt-input { display: flex; align-items: center; gap: 8px; }
.opt-input input { flex: 1; }
.opt-suffix { color: var(--muted); font-size: 13.5px; }
.opt-note { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; background: var(--info-soft); color: var(--info); }
.opt-note.warn { background: var(--warn-soft); color: var(--warn); }
.opt-note.plain { padding: 0; background: none; color: var(--muted); font-size: 13px; margin-top: -8px; }

/* Editor de recorte (crop.js, para a ferramenta Recortar): o palco vai na área de
   trabalho; proporção e números (.crop-controls), na barra de opções. */
.crop-editor { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--elev-1); }
.crop-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.crop-title { margin: 0; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.crop-stage {
  display: flex; justify-content: center; width: 100%; border-radius: 8px; overflow: hidden; box-shadow: var(--inset);
  background: repeating-conic-gradient(var(--checker) 0 25%, transparent 0 50%) 0 0 / 16px 16px, var(--surface-sunken);
}
.crop-canvas { display: block; touch-action: none; cursor: crosshair; max-width: 100%; }
.crop-canvas:focus-visible { outline-offset: -2px; }
.crop-status:empty { display: none; }
.crop-status { margin-top: 8px; }
.crop-controls { display: flex; flex-direction: column; gap: 20px; }
.crop-group { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.crop-group .opt-legend { margin-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.crop-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: 100%; }
.crop-fields .num input { width: 100%; }
.num { display: inline-flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 650; min-width: 0; }
.num input { width: 110px; }

/* Grade de botões com ícone (ex.: Girar todas) */
.opt-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opt-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 6px;
  border: 1.5px solid var(--border-mid); border-radius: 12px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; box-shadow: var(--elev-1);
  transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
}
.opt-btn svg { font-size: 22px; }
.opt-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.opt-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.opt-btn:disabled { color: var(--muted); background: var(--surface-2); border-color: transparent; box-shadow: none; cursor: default; }
.gi-summary { margin: 0; font-size: 14px; font-weight: 600; }
.gi-summary:empty { display: none; }

/* Redimensionar: largura, cadeado e altura na mesma linha */
.rs-box { display: flex; flex-direction: column; gap: 10px; }
.rs-px { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.rs-px .num { flex: 1 1 96px; }
.rs-px .num input { width: 100%; }
.rs-unit { padding-bottom: 10px; }
.rs-lock {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 1px; flex: none; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); font-size: 18px; cursor: pointer;
}
.rs-lock:hover { color: var(--text); background-image: linear-gradient(var(--state-hover), var(--state-hover)); }
.rs-lock[aria-pressed=true] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }

/* Comparador antes/depois (shell/compare.js) */
.cmp { max-width: 700px; margin: 24px auto 0; }
.cmp-stage {
  --cmp: 50%; position: relative; display: grid; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border);
  background: repeating-conic-gradient(var(--checker) 0 25%, transparent 0 50%) 0 0 / 16px 16px, var(--surface-sunken); user-select: none;
  box-shadow: var(--elev-1);
}
.cmp-img { grid-area: 1 / 1; display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.cmp-after { clip-path: inset(0 0 0 var(--cmp)); }
/* Divisória e botão de arrastar ficam claros nos dois temas: estão sempre sobre a foto. */
.cmp-line { position: absolute; top: 0; bottom: 0; left: var(--cmp); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .3); pointer-events: none; }
.cmp-knob { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .12), 0 2px 8px rgb(0 0 0 / .35); }
.cmp-knob::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; color: #151827; font-weight: 800; font-size: 14px; letter-spacing: 2px; }
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp-stage:focus-within .cmp-knob { outline: 3px solid var(--focus); outline-offset: 2px; }
.cmp-tag { position: absolute; top: 10px; padding: 3px 10px; border-radius: 99px; background: rgb(15 17 23 / .78); color: #fff; font-size: 12px; font-weight: 700; pointer-events: none; }
.cmp-tag.left { left: 10px; }
.cmp-tag.right { right: 10px; }
.cmp figcaption { margin-top: 8px; text-align: center; }

/* Player do resultado (Comprimir vídeo) */
.cv-player { max-width: 700px; margin: 24px auto 0; }
.cv-player video { display: block; width: 100%; max-height: 60vh; border-radius: var(--radius); background: #000; box-shadow: var(--elev-2); }
.cv-player figcaption { margin-top: 8px; text-align: center; }

/* ---------- Andamento em segundo plano (nav.markStatus) e avisos "pronto" (app.js) ----------
   Anel girando = processando; ✓ = pronto (até a pessoa abrir); ! = terminou com erro. O
   estado também vai em texto (sr-only) junto do nome do link. */

.status-mark { position: relative; display: inline-block; flex: none; width: 14px; height: 14px; margin-left: 6px; border-radius: 50%; vertical-align: -2px; }
.status-mark.is-busy { border: 2px solid var(--surface-3); border-top-color: var(--accent); animation: status-spin .9s linear infinite; }
.status-mark.is-ready { background: var(--good); }
.status-mark.is-ready::after {
  content: ""; position: absolute; inset: 0; background: var(--on-mark);
  -webkit-mask: var(--i-check) center / 10px no-repeat; mask: var(--i-check) center / 10px no-repeat;
}
.status-mark.is-error { background: var(--warn); }
.status-mark.is-error::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-mark); font-size: 10px; font-weight: 900; line-height: 1; }
@keyframes status-spin { to { transform: rotate(360deg); } }
.burger { position: relative; }
.burger .status-mark { position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; margin: 0; }
/* Nas abas do cabeçalho a marca é um selo no canto, como no hambúrguer: a aba não fica mais
   larga (eram 25 px a mais por aba marcada, e com várias as 6 abas passavam do botão do tema).
   A 3 px da borda, o anel girando (11 px; a caixa girada chega a 15,6) não passa da aba. */
.nav-link > .status-mark { position: absolute; top: 13px; right: 3px; width: 11px; height: 11px; margin: 0; }

/* Aviso de quem terminou fora da vista (nível 3): fica até ser aberto ou fechado; no celular,
   acima da barra fixa do botão de ação (--tp-foot-h, do toolpage.js). */
.toasts {
  position: fixed; right: 16px; bottom: calc(16px + var(--tp-foot-h, 0px) + env(safe-area-inset-bottom)); z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none;
}
.toasts:empty { display: none; }
.toast {
  --surface: var(--surface-overlay);
  pointer-events: auto; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px 10px 14px;
  background: var(--surface-overlay); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--good);
  border-radius: 12px; box-shadow: var(--elev-3); font-size: 14px;
}
.toast.warn { border-left-color: var(--warn); }
.toast-ico { flex: none; font-size: 20px; color: var(--good); }
.toast.warn .toast-ico { color: var(--warn); }
.toast-text { flex: 1; min-width: 0; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.toast-text a { font-weight: 750; text-decoration: underline; }
.toast-close {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); font-size: 16px; cursor: pointer;
}
.toast-close:hover { background: var(--state-hover); color: var(--text); }

/* ---------- "O que fazer com …?" (shell/escolher.js; diálogo, nível 4) ---------- */

.pick {
  --surface: var(--surface-overlay);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--border);
  border-radius: 18px; background: var(--surface-overlay); color: var(--text); box-shadow: var(--elev-4);
}
.pick::backdrop { background: var(--backdrop, rgb(15 18 35 / .42)); }
.pick-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 14px 4px 22px; }
.pick-title { flex: 1; min-width: 0; margin: 6px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; overflow-wrap: anywhere; }
.pick-close { width: 40px; height: 40px; }
.pick-sub { margin: 0; padding: 0 22px 10px; color: var(--muted); font-size: 14px; }
.pick-list { list-style: none; margin: 0; padding: 4px 12px 16px; display: grid; gap: 2px; }
.pick-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color .12s;
}
.pick-btn:hover { background: var(--state-hover); }
.pick-btn:active { background: var(--state-press); }
.pick-label { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pick-label b { font-weight: 700; font-size: 15px; }
.pick-label small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.pick-go { flex: none; color: var(--muted); }
.pick-btn:hover .pick-go { color: var(--accent); }
.pick-none { margin: 0; padding: 4px 22px 22px; color: var(--muted); }

/* ---------- Telas menores ---------- */

/* Cabeçalho de 1080 a 1279 px: as 6 abas e o botão do tema cabem com ≥ 12 px de folga (a
   1080 px, 31 px; medido de 1024 a 1920 px, de 8 em 8). Abaixo de 1080, o hambúrguer. */
@media (max-width: 1279px) {
  .nav-link { padding: 0 9px; font-size: 14px; }
  .nav-item.is-current > .nav-link::after { left: 9px; right: 9px; }
  .topbar-in { gap: 16px; }
}
@media (max-width: 1179px) {
  .nav-list { gap: 0; }
  .nav-link { padding: 0 8px; }
  .nav-item.is-current > .nav-link::after { left: 8px; right: 8px; }
  .topbar-in { gap: 12px; }
}

/* Pouca altura em tela estreita (celular deitado, zoom de 200 a 400%): nada grudado — o
   cabeçalho e a barra fixa do botão chegavam a cobrir de 46% a 92% da altura (WCAG 1.4.10).
   No computador (≥ 900 px) a barra lateral grudada continua: opções rolam, o botão fica à vista. */
@media (max-width: 899px) and (max-height: 560px) {
  :root { --sticky-top: 0px; }
  .topbar { position: static; }
}

@media (max-width: 1079px) {
  .nav { display: none; }
  .burger { display: grid; }
  .topbar-in { padding: 0 16px; }
  .theme-toggle, .burger { width: 44px; height: 44px; }
}

@media (max-width: 640px) {
  :root { --header-h: 58px; }
  .brand-name { font-size: 18px; }
  .home { padding: 32px 16px 48px; }
  .filters { gap: 6px; margin-bottom: 22px; }
  .filter { padding: 7px 14px; font-size: 14px; }
  .btn-hero { min-height: 64px; padding: 0 24px; font-size: 18.5px; width: 100%; }
  .btn-action { min-height: 56px; font-size: 17px; }
}

@media (max-width: 559px) {
  .home-grid { grid-template-columns: 1fr; gap: 10px; }
  .tool-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px; align-items: center; }
  .tool-card .tico { grid-row: span 2; margin: 0; }
  .tool-card-title { font-size: 16px; padding-right: 64px; }
  .tool-card-desc { font-size: 13.5px; }
  .tag { top: 10px; right: 10px; }
}

@media (max-width: 640px) {
  .toasts { left: 16px; right: 16px; width: auto; align-items: stretch; }
}

/* ---------- Alto contraste do Windows (forced-colors) ----------
   O sistema troca as cores da página: o que era só fundo ou sombra some (seleção, aba atual,
   botão cheio). Aqui voltam, em cores do sistema, as marcas que dizem o estado. */
@media (forced-colors: active) {
  .btn-hero, .btn-action, .btn-round, .btn.primary, .filter, .card-btn { border: 2px solid ButtonText; }
  .btn-hero:disabled, .btn-hero[aria-disabled=true], .btn-action:disabled, .btn-action[aria-disabled=true] { color: GrayText; border-color: GrayText; }
  .opt-level input:checked + .opt-level-body, .opt-choice-item input:checked + span,
  .chip[aria-pressed=true], .filter[aria-pressed=true], .rs-lock[aria-pressed=true] { outline: 3px solid Highlight; outline-offset: 1px; }
  .opt-level input:checked + .opt-level-body::before { forced-color-adjust: none; background: Highlight; border-color: Highlight; box-shadow: inset 0 0 0 3px Canvas; }
  .chip[aria-pressed=true]::before, .opt-choice-item input:checked + span::before { forced-color-adjust: none; background: Highlight; box-shadow: 0 0 0 2px Canvas; }
  .chip[aria-pressed=true]::after, .opt-choice-item input:checked + span::after { forced-color-adjust: none; background: HighlightText; }
  .nav-item.is-current > .nav-link::after { forced-color-adjust: none; background: Highlight; }
  .menu-link[aria-current=page] { border-left: 3px solid Highlight; }
  .opt-meter i { forced-color-adjust: none; background: GrayText; }
  .opt-meter i.on, .opt-level input:checked + .opt-level-body .opt-meter i.on { background: Highlight; }
  .status-mark { forced-color-adjust: none; }
  .status-mark.is-busy { border-color: GrayText; border-top-color: Highlight; }
  .status-mark.is-ready, .status-mark.is-error { background: Highlight; }
  .status-mark.is-ready::after { background: HighlightText; }
  .status-mark.is-error::after { color: HighlightText; }
  .toast { border: 2px solid CanvasText; }
  .pick { border: 2px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .tool-card:hover, .btn-hero:hover, .btn-round:hover:not(:disabled) { transform: none; }
}