/* Identidade visual e temas. Carregado por último: define os tokens de cada tema
   e substitui o acabamento antigo (gradientes, sombras, pílulas) por bordas finas. */

@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/atkinson-hyperlegible-next-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: Literata; font-weight: 400 700; font-style: normal; font-display: swap; src: url("fonts/literata-latin-wght-normal.woff2") format("woff2"); }

/* Tokens: --bg fundo, --paper superfície, --ink texto, --muted texto de apoio,
   --line divisória, --field borda de campo, --accent ação, --accent-ink texto sobre a ação. */
:root,
html[data-theme="papel"],
[data-theme-scope="papel"] {
  color-scheme: light;
  --bg: #f2f0eb; --paper: #fcfbf8; --ink: #1d1b17; --muted: #5c574e;
  --line: #d3cec4; --field: #8a8378; --accent: #13704a; --accent-ink: #ffffff; --danger: #b42318;
}
html[data-theme="grafite"],
[data-theme-scope="grafite"] {
  color-scheme: dark;
  --bg: #161719; --paper: #1f2124; --ink: #eceae5; --muted: #a6a39c;
  --line: #3a3d42; --field: #77746e; --accent: #f0a040; --accent-ink: #1a1206; --danger: #ff8a7a;
}
html[data-theme="lousa"],
[data-theme-scope="lousa"] {
  color-scheme: dark;
  --bg: #1d3a2f; --paper: #244537; --ink: #f2f0e6; --muted: #bcc9bf;
  --line: #45685a; --field: #86a596; --accent: #e9d26a; --accent-ink: #1d2a14; --danger: #ffb4a8;
}
html[data-theme="azul-tinta"],
[data-theme-scope="azul-tinta"] {
  color-scheme: light;
  --bg: #ecf0f6; --paper: #ffffff; --ink: #0f1a33; --muted: #475471;
  --line: #c6cedd; --field: #7a87a3; --accent: #1d3fbf; --accent-ink: #ffffff; --danger: #b42318;
}
html[data-theme="sepia"],
[data-theme-scope="sepia"] {
  color-scheme: light;
  --bg: #ece2cd; --paper: #f6eedc; --ink: #2a2015; --muted: #5d4c38;
  --line: #cbb896; --field: #8c7656; --accent: #7a3812; --accent-ink: #ffffff; --danger: #a0261a;
}
html[data-theme="alto-contraste"],
[data-theme-scope="alto-contraste"] {
  color-scheme: dark;
  --bg: #000000; --paper: #0a0a0a; --ink: #ffffff; --muted: #dadada;
  --line: #ffffff; --field: #ffffff; --accent: #ffe14d; --accent-ink: #000000; --danger: #ff6b6b;
}

/* Nomes antigos usados pelas folhas anteriores, ligados aos tokens novos */
:root, html[data-theme] {
  --teal: var(--accent);
  --teal-dark: var(--accent);
  --aqua: color-mix(in srgb, var(--accent) 11%, var(--paper));
  --violet: var(--accent);
  --glow: transparent;
  --topbar: var(--paper);
  --shadow: none;
  --sans: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: Literata, "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-family: var(--sans);
}

body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; -webkit-font-smoothing: antialiased; transition: none; }
h1, h2, h3, .brand strong, .auth-brand strong { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.view-head h1 { font-size: 34px; line-height: 1.1; letter-spacing: -.01em; }
.pane .card h2, .card h2 { font-size: 20px; letter-spacing: -.005em; }
a { color: var(--accent); }
a:hover { color: var(--ink); }
::selection { background: var(--accent); color: var(--accent-ink); }

/* Logo: contorno fixo e pictogramas vetoriais que acompanham a cor do tema */
.logo {
  --logo-color: var(--accent);
  position: relative;
  display: block;
  color: var(--logo-color);
  background: transparent;
  overflow: hidden;
}
.logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--logo-color);
  -webkit-mask: url("assets/icons/logo-contorno.svg") center / contain no-repeat;
  mask: url("assets/icons/logo-contorno.svg") center / contain no-repeat;
}
.logo-glyph {
  position: absolute;
  left: 27%;
  top: 20%;
  width: 43%;
  height: 33%;
  display: grid;
  place-items: center;
  color: var(--logo-color);
  opacity: 1;
  transition: opacity 320ms ease;
}
.logo-glyph svg { display: block; width: 100%; height: 100%; stroke-width: 2.35; }
.logo.is-changing .logo-glyph { opacity: 0; }
.brand-mark.logo { --logo-color: var(--ink); width: 30px; height: 34px; padding: 0; border: 0; border-radius: 0; }
.auth-brand .brand-mark.logo { width: 34px; height: 38px; }
.home-logo.logo { --logo-color: var(--accent); width: min(327px, 62vw); aspect-ratio: 897 / 1000; height: auto; }

/* Superfícies sem sombra, com borda fina e cantos retos */
.card, .pane .card, .out-panel, .auth-card, .project-card, .user-card, .improve-box, .byok-note, .temp-box,
.generated-file, .switch-row, .out-empty, .projects-empty {
  border-radius: 2px; box-shadow: none; border-color: var(--line); background: var(--paper);
}
.card { border-top: 1px solid var(--line); }
.card::after { display: none; }
.visual-card { border-top: 1px solid var(--line); }
.pane .card { padding: 26px; }
.card-head { border-bottom: 1px solid var(--line); }
.number { border-radius: 2px; background: transparent; color: var(--accent); border: 1px solid var(--line); font-family: var(--serif); }
.temp-box { border-color: var(--accent); background: var(--aqua); }

/* Campos */
label, legend, .ai-config-form label, .account-form label, .improve-box label { color: var(--ink); font-weight: 700; }
input, select, textarea {
  border: 1px solid var(--field); border-radius: 2px; background: var(--paper); color: var(--ink);
  transition: border-color .12s;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: none; outline: 2px solid var(--accent); outline-offset: 1px; }
button:focus-visible, a:focus-visible, .nav-item:focus-visible, .menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.option input:focus-visible + label, .improve-chip input:focus-visible + span, .resource input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.field-help, .field-status, .legal, .view-head p, .card-head p { color: var(--muted); }
.field-status.available { color: var(--accent); }
.field-status.unavailable, .auth-error, .project-buttons .danger, #ai-config-clear { color: var(--danger); }
.auth-error.ok { color: var(--accent); }

/* Botões: contorno em tinta; ao passar o mouse, invertem. Sem elevação. */
.ghost, .icon-button, .project-actions button, .resource-tools button, .project-buttons button, .ai-config-actions button,
.result-actions button, .menu-toggle, .modal-close {
  border: 1px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink);
  font-weight: 700; transition: background-color .12s, color .12s;
}
.ghost:hover, .icon-button:hover, .project-actions button:hover, .resource-tools button:hover, .project-buttons button:hover,
.ai-config-actions button:hover, .result-actions button:hover, .menu-toggle:hover, .modal-close:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.primary, .pane .primary, .out-panel .primary, .result-actions .pdf-action, .generated-file button {
  border: 1px solid var(--accent); border-radius: 2px; background: var(--accent); color: var(--accent-ink); font-weight: 700;
  transition: background-color .12s, color .12s;
}
.primary:hover:not(:disabled), .pane .primary:hover:not(:disabled), .out-panel .primary:hover:not(:disabled),
.result-actions .pdf-action:hover, .generated-file button:hover {
  background: var(--ink); border-color: var(--ink); color: var(--paper); transform: none; box-shadow: none;
}
.primary:disabled { opacity: .6; }
.result-actions button.active { background: var(--ink); color: var(--paper); }
.result-actions button.copied { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.project-buttons .danger.armed { background: var(--danger); border-color: var(--danger); color: var(--bg); }
.link { color: var(--accent); }
.button-spinner { border-color: color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; }
.ai-spinner { border-color: var(--line); border-top-color: var(--accent); }

/* Escolhas (tipo, estilo, recursos): retângulos de borda fina, sem subir no hover */
.option label, .resource label { border-radius: 2px; border-color: var(--line); background: var(--paper); transition: border-color .12s; }
.option label:hover, .resource label:hover { transform: none; box-shadow: none; border-color: var(--field); }
.option input:checked + label, .resource input:checked + label { border-color: var(--accent); background: var(--aqua); box-shadow: inset 0 0 0 1px var(--accent); }
.style-sample, .resource-demo { border-radius: 2px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.resource-icon { color: var(--ink); }
.improve-chip span { border-radius: 2px; border-color: var(--line); }
.improve-chip input:checked + span { border-color: var(--accent); background: var(--aqua); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }

/* Menu lateral */
.sidebar { background: var(--bg); border-right: 1px solid var(--line); box-shadow: none; }
.sidebar-head, .sidebar-foot { border-color: var(--line); }
.nav-group { color: var(--muted); letter-spacing: .08em; font-weight: 700; }
.nav-item { border-radius: 2px; color: var(--ink); font-weight: 500; font-size: 15px; transition: background-color .12s; }
.nav-item:hover { background: var(--paper); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--paper); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--line); }
.user-chip small { color: var(--muted); }
.mobile-bar { background: var(--bg); border-color: var(--line); }
.scrim { background: color-mix(in srgb, var(--ink) 55%, transparent); }

/* Painel de resultado: o prompt vira uma folha */
.out-panel { border: 1px solid var(--line); }
.out-head h2 { font-size: 22px; }
.chip-badge { border-radius: 2px; background: transparent; color: var(--accent); border: 1px solid var(--accent); font-weight: 700; }
.project-kind { border-radius: 2px; background: transparent; border: 1px solid var(--line); color: var(--ink); font-weight: 700; }
pre, .out-panel .modal-content pre { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 2px; font-family: var(--serif); font-size: 15px; line-height: 1.7; }
.out-panel .modal-content iframe, .modal-content iframe { border-radius: 2px; border-color: var(--line); }
.status { color: var(--muted); font-weight: 500; }
.status.erro { color: var(--danger); }
.btn-icone-texto { display: inline-flex; align-items: center; gap: 6px; }
.file-icon { border-radius: 2px; background: transparent; border: 1px solid var(--line); color: var(--accent); }

/* Barra de ação do formulário */
.action-bar, .pane .action-bar { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 2px; box-shadow: none; }
.action-bar p span { color: var(--muted); }
.action-bar .ghost { color: var(--ink); border-color: var(--ink); }
.action-bar .ghost:hover { color: var(--paper); }

/* Login */
.auth-card { padding: 32px; }
.auth-art { background: var(--ink); border-left: 1px solid var(--line); }
.auth-art .logo { --logo-color: var(--paper); width: min(300px, 62%); aspect-ratio: 897 / 1000; }
@media (max-width: 860px) { .auth-art .logo { width: 72px; } }

/* Modal, aviso e restos do desenho antigo */
.result-modal { border-radius: 2px; box-shadow: none; border: 1px solid var(--ink); background: var(--paper); animation: none; }
.result-modal::backdrop { backdrop-filter: none; background: color-mix(in srgb, var(--ink) 60%, transparent); animation: none; }
.toast { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 2px; box-shadow: none; }
.hero-canvas { box-shadow: none; transform: none; border-radius: 2px; }
.completion-ring { background: conic-gradient(var(--accent) calc(var(--pct, 0) * 3.6deg), var(--line) 0); }
.progress-track i { background: var(--accent); }
.workflow-progress li.active span, .workflow-progress li.complete span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; }
.footer, footer { background: var(--bg); color: var(--muted); }

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

/* Numeração dos cartões removida */
.number { display: none; }
.resource-icon { color: var(--ink); opacity: .85; }
.resource input:checked + label .resource-icon { color: var(--accent); opacity: 1; }
input, select, textarea { font-weight: 400; font-family: var(--sans); }

/* Miniaturas dos estilos de ilustração */
.style-sample { display: block; height: auto; padding: 0; margin-bottom: 10px; letter-spacing: 0; }
.style-art { display: block; width: 100%; height: 84px; }

/* Tabela de usuários */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.table-tools input, .table-tools select { width: auto; margin: 0; min-width: 220px; }
.table-tools .field-status { margin: 0 0 0 auto; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--paper); }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.data-table thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.data-table tbody:last-child tr:last-child > * { border-bottom: 0; }
.data-table tbody.user-group:hover .user-row { background: var(--bg); }
.data-table .user-row th { font-weight: 700; }
.data-table .user-row th small { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.data-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .wrap { overflow-wrap: anywhere; }
.data-table .row-actions { white-space: nowrap; text-align: right; }
.data-table .row-actions button { margin-left: 6px; padding: 7px 10px; border: 1px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.data-table .row-actions button:hover { background: var(--ink); color: var(--paper); }
.data-table .row-actions .danger { color: var(--danger); border-color: var(--danger); }
.data-table .row-actions .danger:hover { background: var(--danger); color: var(--bg); }
.data-table .row-actions .danger.armed { background: var(--danger); color: var(--bg); }
.data-table .user-edit-row > td { background: var(--bg); padding: 16px 14px; }
.data-table .user-edit-row .user-card { border: 0; padding: 0; background: transparent; }
.data-table .table-empty { padding: 28px 14px; text-align: center; color: var(--muted); }
@media (max-width: 900px) { .data-table { min-width: 760px; } }
.workspace[data-view="config"] { grid-template-columns: minmax(0, 1180px); }

/* Tela de tema: galeria com miniatura de cada tema e tabela de cores */
.theme-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.theme-pick { display: grid; gap: 16px; }
.theme-pick-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
.theme-pick-head h2 { margin: 0; font-size: 22px; }
.theme-follow { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; }
.theme-follow input { width: 18px; height: 18px; margin: 0; }
.theme-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.theme-card { display: flex; flex-direction: column; align-items: stretch; padding: 0; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.theme-card:hover strong { text-decoration: underline; }
.theme-card[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.theme-mini { display: flex; gap: 10px; height: 132px; padding: 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.mini-rail { display: flex; flex-direction: column; gap: 6px; width: 24px; padding-top: 2px; }
.mini-rail i { display: block; height: 6px; background: var(--muted); }
.mini-rail i:first-child { background: var(--ink); }
.mini-sheet { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 12px; background: var(--paper); border: 1px solid var(--line); }
.mini-sheet b { font-family: var(--serif); font-weight: 600; font-size: 16px; line-height: 1; color: var(--ink); }
.mini-field { display: block; align-self: stretch; height: 16px; border: 1px solid var(--field); }
.mini-sheet em { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; background: var(--accent); color: var(--accent-ink); }
.theme-meta { display: grid; gap: 2px; padding: 12px 14px 14px; }
.theme-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.theme-line strong { font-size: 15.5px; }
.theme-mark { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.theme-meta .field-help { margin: 0; }
.workspace[data-view="tema"] { grid-template-columns: minmax(0, 1180px); }

/* ====================================================================
   Estrutura das telas, conforme as pranchas de docs/design
   ==================================================================== */

/* Área de trabalho */
.workspace { grid-template-columns: minmax(0, 1.5fr) minmax(380px, 1fr); gap: 32px; padding: 32px; }
.workspace[data-view="projetos"], .workspace[data-view="ia"], .workspace[data-view="conta"] { grid-template-columns: minmax(0, 880px); }
.pane { gap: 24px; }
.view-head { display: grid; gap: 6px; }
.view-head h1 { margin: 0; }
.view-head p { max-width: 70ch; }

/* Campos: rótulo em cima, altura fixa, seta própria nos menus */
:where(.view) label:where(:not(.opt):not(.user-active):not(.theme-follow)) { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 700; min-width: 0; }
.view input, .view select, .view textarea { margin: 0; font-size: 15px; }
.view input:not([type="checkbox"]):not([type="radio"]), .view select { height: 40px; padding: 0 12px; }
.view textarea { padding: 10px 12px; line-height: 1.5; resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 36px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.help, small.help { font-size: 13px; font-weight: 400; color: var(--muted); }
.grid { gap: 16px 20px; }
.pane .grid.two { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.pane .grid.three { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.full { grid-column: 1 / -1; }

/* Formulários: seções planas separadas por linha (sem cartões) */
#formulario, #form-capa { display: flex; flex-direction: column; gap: 32px; }
.sec { display: flex; flex-direction: column; gap: 18px; min-width: 0; margin: 0; padding: 28px 0 0; border: 0; border-top: 1px solid var(--line); }
.sec-head { display: flex; flex-direction: column; gap: 2px; }
.sec-head h2 { margin: 0; font-size: 20px; }
.sec > legend { float: left; width: 100%; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sec > legend + * { clear: both; }
.sec-title { font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: -.005em; }
.resource-head { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.resource-head h2 { margin-bottom: 2px; }
.view .card { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 28px 0 0; }
.view-head + .card { border-top: 0; padding-top: 0; }

/* Tipo de material: lista de opções */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 0 20px; }
.opt { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 14.5px; font-weight: 400; cursor: pointer; }
.opt:has(input:checked) { font-weight: 700; }
.opt input { flex: none; width: 18px; height: 18px; margin: 0; }
.opt-top { align-items: flex-start; padding-top: 22px; }
.opt-top input { margin-top: 3px; }
.opt-top span { display: flex; flex-direction: column; }
.opt-top strong { font-size: 14.5px; }

/* Estilos de ilustração e recursos: retângulos retos, selecionado com borda de tinta */
.style-grid { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 8px; }
.pane .style-grid { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.option label { padding: 10px 12px; border-radius: 2px; }
.option label strong { font-size: 14.5px; }
.option label small { font-size: 13px; color: var(--muted); }
.option input:checked + label, .resource input:checked + label { border: 2px solid var(--ink); padding: 9px 11px; background: var(--paper); box-shadow: none; }
.option input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.pane .resource-grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.resource label { min-height: 64px; display: flex; flex-direction: row; text-align: left; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 12px; background: var(--paper); }
.resource label > strong, .resource label > small { display: block; }
.resource-demo { flex: none; width: 44px; height: 44px; border: 0; background: transparent; }
.resource-icon { width: 32px; height: 32px; }
.resource label small { display: block; font-size: 12.5px; }
.resource input:checked + label { padding: 9px 11px; }
.resource-tools button { height: 34px; padding: 0 12px; border-radius: 2px; border: 1px solid var(--field); background: transparent; color: var(--ink); font-size: 13.5px; font-weight: 700; }
.resource-tools button:hover { background: var(--ink); color: var(--paper); }
.pane .resource-tools { flex-wrap: wrap; }

/* Rodapé do formulário */
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 20px; border-top: 2px solid var(--ink); }
.primary.big { height: 44px; padding: 0 22px; font-size: 15.5px; }
.textbtn { height: 40px; padding: 0 10px; border: 0; border-radius: 2px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.textbtn:hover { background: var(--line); }
.form-note { margin-left: auto; max-width: 46ch; }
.form-note strong { color: var(--ink); }

/* Painel de resultado: folha com borda de tinta */
.out-panel { gap: 0; padding: 0; border: 1px solid var(--ink); border-radius: 2px; background: var(--paper); top: 24px; max-height: calc(100vh - 48px); }
.out-head { padding: 16px 20px 0; align-items: baseline; }
.out-head h2 { font-size: 20px; }
.out-meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.out-empty { margin: 16px 20px 20px; border-radius: 2px; }
#out-body { gap: 0; }
.out-tabs { display: flex; gap: 20px; padding: 10px 20px 0; border-bottom: 1px solid var(--line); }
.out-tabs button { padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-weight: 500; cursor: pointer; }
.out-tabs button.active { border-bottom-color: var(--accent); color: var(--ink); font-weight: 700; }
.out-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.seg { display: flex; border: 1px solid var(--field); border-radius: 2px; }
.seg button, .outline { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button:hover, .outline:hover { background: var(--ink); color: var(--paper); }
.seg button.copied { background: var(--accent); color: var(--accent-ink); }
.outline { border: 1px solid var(--ink); border-radius: 2px; }
.improve-box { margin: 16px 20px 0; border-radius: 2px; background: var(--bg); }
.out-panel .modal-content { padding: 20px; }
.out-panel .modal-content pre { padding: 0; border: 0; background: transparent; min-height: 0; max-height: none; font-size: 15px; line-height: 1.65; max-width: 62ch; }
.out-panel .modal-content iframe { border: 1px solid var(--line); }
.out-panel .generated-files { padding: 0; }
.save-row { margin: 0; padding: 14px 20px; border-top: 1px solid var(--line); }
#status.status { padding: 0 20px 14px; margin: 0; min-height: 0; }
.ai-block { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; border-top: 1px solid var(--ink); background: var(--bg); }
.ai-block[hidden] { display: none; }
.ai-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ai-block h3 { margin: 0; font-size: 17px; }
.ai-block .field-status { margin: 0; color: var(--ink); font-weight: 400; }
.ai-block-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ai-block-row label { flex: 1 1 180px; }

/* Menu lateral, como na prancha */
.sidebar .brand small { display: none; }
.sidebar .brand-mark.logo { width: 24px; height: 27px; }
.sidebar .brand strong { font-size: 19px; letter-spacing: -.02em; }
.nav-item { min-height: 40px; padding: 0 10px; }
.sidebar-foot { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 12px; }
.sidebar-foot .nav-item { justify-content: flex-start; }
.theme-current { margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 400; }
.user-chip { padding: 12px 10px 0; font-size: 13.5px; }
.shell.collapsed .theme-current { display: none; }

/* Login dividido */
.auth-screen { display: flex; flex-wrap: wrap; min-height: 100vh; background: var(--bg); }
.auth-main { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 40px max(24px, 5vw); }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand .brand-mark.logo { width: 28px; height: 32px; }
.auth-name { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: -.02em; }
.auth-card { width: 100%; max-width: 400px; align-self: center; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; display: grid; gap: 20px; }
.auth-panel { gap: 20px; }
.auth-title { display: grid; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.auth-panel h1 { font-size: 36px; line-height: 1.1; }
.auth-panel label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 700; }
.auth-panel input { margin: 0; height: 40px; padding: 0 12px; }
.field-block { display: grid; gap: 6px; }
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field-row label { display: block; }
.field-row .link { padding: 0; font-size: 13.5px; }
.input-join { display: flex; }
.input-join input { flex: 1; min-width: 0; border-right: 0; border-radius: 2px 0 0 2px; }
.input-join .ghost { height: 40px; padding: 0 14px; border-color: var(--field); border-radius: 0 2px 2px 0; font-weight: 500; font-size: 14px; }
.auth-panel .primary { width: 100%; justify-content: center; height: 40px; }
.auth-art { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 40px; padding: 56px max(24px, 6vw); background: var(--bg); color: var(--ink); border: 0; }
.auth-art .logo { --logo-color: var(--ink); width: min(300px, 60%); max-width: 100%; aspect-ratio: 327 / 365; }
.auth-pitch { display: flex; flex-direction: column; gap: 12px; max-width: 34ch; }
.auth-pitch p { margin: 0; color: var(--muted); font-size: 15px; }
.auth-pitch .pitch-title { font-family: var(--serif); font-size: 26px; line-height: 1.3; font-weight: 600; color: var(--ink); }
@media (max-width: 860px) {
  .auth-art { flex-basis: auto; flex-direction: row; align-items: center; gap: 16px; padding: 18px 24px; order: -1; }
  .auth-art .logo { width: 48px; }
  .auth-pitch { display: none; }
  .auth-main { padding: 24px 20px 32px; }
}

/* Telas estreitas: barra de gerar fixa no rodapé */
@media (max-width: 900px) {
  .workspace { padding: 20px 16px 28px; gap: 24px; }
  .form-foot { position: sticky; bottom: 0; z-index: 6; margin: 0 -16px; padding: 12px 16px; background: var(--bg); border-top: 2px solid var(--ink); }
  .form-note { display: none; }
  .form-foot { flex-wrap: nowrap; }
  .form-foot .primary.big { flex: 1; justify-content: center; }
  .out-panel { position: static; max-height: none; }
}
@media (max-width: 1180px) { .workspace { grid-template-columns: minmax(0, 1fr); } }

.resource label > strong { font-size: 14px; }
.resource-text { display: flex; flex-direction: column; min-width: 0; }
.sec-head p, .view-head p, .ai-block p { margin: 0; }
.ai-config-form input { border-radius: 2px; font-weight: 400; height: 40px; padding: 0 12px; margin: 0; }
.ai-config-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.ai-config-actions button { border-radius: 2px; }

/* Linha de caminho do projeto, no topo da Apostila e da Capa */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 32px; border-bottom: 1px solid var(--line); font-size: 14px; }
.crumbs[hidden] { display: none; }
.crumb-path { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; min-width: 0; }
.crumb-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.crumb-link:hover { color: var(--ink); }
.crumb-path strong { overflow-wrap: anywhere; }
.crumb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumb-rename { display: block; }
.crumb-rename input { width: min(320px, 70vw); height: 34px; padding: 0 10px; margin: 0; font-size: 14px; }
.textbtn.small { height: 34px; font-size: 13.5px; }
.crumbs .outline { height: 34px; }
@media (max-width: 900px) { .crumbs { padding: 10px 16px; } }
.sidebar .menu-toggle { border-color: transparent; }
.sidebar .menu-toggle:hover { border-color: var(--ink); }

/* Celular: cabeçalho, abas Dados/Resultado e botão de gerar fixo (prancha Mobile) */
.mobile-steps { display: none; }
.mobile-note { display: none; }
@media (max-width: 900px) {
  .mobile-bar { height: 60px; gap: 6px; padding: 0 8px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .mobile-bar .menu-toggle { width: 44px; height: 44px; border-color: transparent; }
  .mobile-bar .brand-mark.logo { width: 22px; height: 25px; }
  .mobile-bar strong { flex: 1; font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
  .mobile-steps:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--field); border-radius: 2px; overflow: hidden; }
  .mobile-steps button { height: 44px; border: 0; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
  .mobile-steps button + button { border-left: 1px solid var(--field); }
  .mobile-steps button[aria-pressed="true"] { background: var(--ink); color: var(--paper); font-weight: 700; }
  .workspace[data-step="resultado"] .pane { display: none; }
  .workspace[data-step="dados"] .out-panel { display: none; }
  .workspace[data-view="inicio"] .mobile-steps, .workspace[data-view="projetos"] .mobile-steps { display: none; }
  .view-head h1 { font-size: 30px; }
  .crumbs { padding: 10px 16px; }
  .crumb-actions { width: 100%; }
  .form-foot { flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 12px 16px 16px; border-top: 1px solid var(--ink); }
  .form-foot .primary.big { flex: 1 1 100%; height: 48px; font-size: 16px; }
  .form-foot .textbtn { height: 28px; padding: 0; font-size: 13px; }
  .mobile-note { display: block; margin: 0; text-align: right; }
  .out-panel { margin: 0; }
}

/* FAQ: caixa explicativa, tabela Categoria/Pergunta e resposta aberta na própria linha */
.faq-intro { border: 1px solid var(--line); background: var(--paper); padding: 0 16px; }
.faq-intro summary { padding: 12px 0; font-weight: 700; color: var(--ink); cursor: pointer; }
.faq-intro[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.faq-intro p, .faq-intro ul { margin: 0 0 12px; color: var(--muted); line-height: 1.6; }
.faq-intro ul { padding-left: 1.3em; }
.faq-table .faq-cat { width: 220px; color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.faq-table .faq-q { padding: 0; }
.faq-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.faq-toggle::after { content: "+"; flex: none; color: var(--muted); font-weight: 700; }
.faq-toggle[aria-expanded="true"]::after { content: "\2212"; }
.faq-cat-inline { display: none; }
.faq-row:hover, .faq-row.open { background: var(--bg); }
.faq-row.open > td { border-bottom: 0; }
.faq-answer-row > td { padding: 0 14px 16px; background: var(--bg); }
.faq-answer { max-width: 72ch; color: var(--ink); line-height: 1.65; overflow-wrap: anywhere; }
.faq-answer p { margin: .6em 0; }
.faq-answer ul, .faq-answer ol { margin: .6em 0; padding-left: 1.4em; }
.faq-answer li { margin: .25em 0; }
.faq-answer a { color: var(--accent); text-decoration: underline; }
@media (max-width: 900px) {
  .faq-table { min-width: 0; }
  .faq-table, .faq-table tbody, .faq-table tr, .faq-table td { display: block; }
  .faq-table thead, .faq-table .faq-cat { display: none; }
  .faq-cat-inline { display: block; flex: 1; font-size: 12px; font-weight: 700; color: var(--muted); }
  .faq-toggle { flex-wrap: wrap; }
  .faq-q-text { flex: 1 1 100%; order: 2; }
  .faq-toggle::after { order: 1; }
  .table-tools input, .table-tools select { width: 100%; min-width: 0; }
}

/* Ícone do menu repetido na frente do título de cada tela */
.view-head h1 { display: flex; align-items: center; gap: 12px; }
.view-head h1 .title-icon { flex: none; width: .8em; height: .8em; min-width: 22px; min-height: 22px; color: var(--ink); }

/* Início: título, selos, texto e licença abaixo do logotipo */
.home { gap: 14px; }
.home-title { margin: 8px 0 0; font-size: 40px; line-height: 1.1; text-align: center; }
.home-tagline { margin: 0; max-width: 56ch; text-align: center; font-size: 18px; color: var(--muted); }
.home-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 8px; padding: 0; list-style: none; }
.home-badges li { display: inline-flex; border: 1px solid var(--ink); font-size: 12.5px; line-height: 1; }
.home-badges span { padding: 6px 8px; background: var(--paper); color: var(--muted); }
.home-badges b { padding: 6px 8px; background: var(--ink); color: var(--paper); font-weight: 700; }
.home-text { display: grid; gap: 12px; max-width: 64ch; line-height: 1.65; color: var(--ink); }
.home-text p { margin: 0; }
.home-text a { color: var(--accent); text-decoration: underline; overflow-wrap: anywhere; }
@media (max-width: 900px) { .home-title { font-size: 32px; } .home-tagline { font-size: 16px; } }

/* Rodapé "O gerador não valida..." : maior e centralizado */
.legal { margin: 24px 0 0; font-size: 15px; line-height: 1.5; text-align: center; }

/* Excluir minha conta: cartão com borda de perigo; o botão só muda de cor (sem mover) */
.danger-zone { border-color: var(--danger); }
.danger-zone h2 { color: var(--danger); }
.danger-zone .field-help { margin: 0; }
.danger-zone .danger { padding: 12px 16px; border: 1px solid var(--danger); border-radius: 2px; background: transparent; color: var(--danger); font: inherit; font-weight: 700; cursor: pointer; }
.danger-zone .danger:hover:not(:disabled), .danger-zone .danger.armed { background: var(--danger); color: var(--bg); }
.danger-zone .danger:disabled { opacity: .6; cursor: progress; }

/* Seletor de habilidades da BNCC (Apostila) */
.bncc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.bncc-actions .field-status { margin: 0; }
.bncc-picker { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); background: var(--paper); }
.bncc-picker[hidden] { display: none; }
.bncc-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.bncc-filters label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.bncc-filters select, .bncc-filters input { width: 100%; margin: 0; min-width: 0; }
.bncc-picker .field-status { margin: 0; }
.bncc-list { max-height: 380px; margin: 0; padding: 0; overflow: auto; list-style: none; border: 1px solid var(--line); background: var(--bg); }
.bncc-list li { border-bottom: 1px solid var(--line); }
.bncc-list li:last-child { border-bottom: 0; }
.bncc-item { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; padding: 10px 12px; font-size: 14px; font-weight: 400; cursor: pointer; }
.bncc-item:hover { background: var(--paper); }
.bncc-item input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; }
.bncc-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 14px; color: var(--ink); }
.bncc-meta { color: var(--muted); font-size: 12.5px; }
.bncc-text { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.bncc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.bncc-foot .field-status { margin-right: auto; }
.bncc-credit { margin: 0; font-size: 12.5px; }
@media (max-width: 520px) { .bncc-filters { grid-template-columns: minmax(0, 1fr); } .bncc-list { max-height: 320px; } }

/* Fale com o suporte */
.support-types { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.support-types legend { margin: 0 0 8px; padding: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.support-types label { position: relative; display: inline-flex; flex-direction: row; margin: 0; font-weight: 600; }
.support-types input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.support-types span { display: inline-block; padding: 8px 16px; border: 1px solid var(--field); background: var(--paper); color: var(--ink); cursor: pointer; }
.support-types input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); font-weight: 700; }
.support-types input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.support-attach { display: grid; gap: 10px; padding: 14px; border: 1px dashed var(--field); }
.support-attach.dragging { border-style: solid; border-color: var(--accent); background: var(--bg); }
.support-attach .outline { justify-self: start; }
.support-attach .field-status { margin: 0; font-weight: 400; line-height: 1.5; }
.support-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.support-files li { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 4px 8px 4px 4px; border: 1px solid var(--line); background: var(--bg); }
.support-thumb { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); font-size: 11px; font-weight: 700; color: var(--muted); }
.support-thumb img { width: 100%; height: 100%; object-fit: cover; }
.support-file-name { display: grid; min-width: 0; font-size: 13px; }
.support-file-name strong { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.support-file-name small { color: var(--muted); }
.support-remove { flex: none; padding: 2px 8px; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.support-remove:hover { color: var(--danger); }
.support-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#support-form .ai-config-actions { align-items: center; }
#support-form .ai-config-actions .field-status { margin: 0 auto 0 0; }
#support-status.ok { color: var(--accent); font-weight: 700; }
#support-status.error { color: var(--danger); font-weight: 700; }

/* Aceite dos Termos e da Política (cadastro e tela de aceite) */
.auth-panel .terms-check, .terms-check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 400; line-height: 1.45; }
.terms-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; }
.terms-check span { font-weight: 400; }
.terms-check a, .terms-links a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.terms-links { margin: 0; }

/* Configurações: abas por assunto (Usuários, E-mail, Backup) e painel de situação do backup. */
.config-tabs { display: flex; gap: 22px; margin: 0 0 20px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.config-tab { padding: 10px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; }
.config-tab[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink); font-weight: 700; }
.pane-intro { margin: 0 0 16px; color: var(--muted); }
.backup-alert { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--paper); }
.backup-alert.erro { border-left-color: var(--danger); }
.backup-alert strong { display: block; }
.backup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 22px; }
.backup-stat { padding: 14px 16px; border: 1px solid var(--line); background: var(--paper); }
.backup-stat span { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.backup-stat strong { display: block; margin: 4px 0 2px; font-size: 22px; }
.backup-stat small { color: var(--muted); }
.backup-stat.atrasada strong { color: var(--danger); }
.backup-section { margin: 0 0 22px; }
.backup-section h3 { margin: 0 0 8px; font-size: 15px; }
.backup-log { max-height: 260px; margin: 0; padding: 12px 14px; overflow: auto; border: 1px solid var(--line); background: var(--paper); font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1180px) { .workspace[data-view="config"] { grid-template-columns: minmax(0, 1fr); } }
.view[data-view="config"], .config-pane { min-width: 0; max-width: 100%; }
.table-wrap { position: relative; }

/* Senha do login: olho aberto/fechado dentro do campo (substitui o botão "Mostrar"). */
.input-join { position: relative; }
.input-join input { border-right: 1px solid var(--field); border-radius: 2px; padding-right: 46px; }
.eye-toggle { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 100%; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.eye-toggle:hover, .eye-toggle:focus-visible { color: var(--ink); }
.eye-toggle svg[hidden] { display: none; }

/* Botões de ação das listas no padrão do LeadONE: ícone Feather 16 px, caixa 30x30 tonal (borda e fundo 30% e 9% da cor da ação). */
.data-table .row-actions .act, .project-buttons .act { --act: var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 30px; height: 30px; margin-left: 6px; padding: 0; border: 1px solid color-mix(in srgb, var(--act) 30%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--act) 9%, transparent); color: var(--act); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.project-buttons .act { margin-left: 0; }
.data-table .row-actions .act:hover, .project-buttons .act:hover { background: color-mix(in srgb, var(--act) 18%, transparent); color: var(--act); }
/* Cor por natureza da ação (só tokens do tema): --accent edita, abre, cria, ativa, exporta e atualiza; --ink só vê; --danger exclui. */
.act-neutral, .act-view, .act-off { --act: var(--ink) !important; }
.act-edit, .act-add, .act-on, .act-sync, .act-exp { --act: var(--accent) !important; }
.act-del { --act: var(--danger) !important; }
.act .act-label { display: none; }
.data-table .row-actions .act.armed, .project-buttons .act.armed { padding: 0 10px; border-color: var(--danger); background: var(--danger); color: var(--bg); }
.act.armed .act-label { display: inline; white-space: nowrap; }

/* CPF (só no comercial): o rótulo nasce escondido e o app o mostra quando o servidor exige o CPF. */
label[data-cpf][hidden] { display: none; }
label[data-cpf] .field-help { margin: 0; font-weight: 400; }