/* Layout exclusivo de Obras & Projetos. Fundação e marca vêm dos CSS compartilhados. */
:root {
  --navy: var(--brand-blue); --orange: var(--brand-orange); --sand: var(--brand-beige);
  --gray: var(--brand-gray-100); --white: var(--brand-white); --muted: var(--ink-muted);
  --border: var(--border-subtle); --paper: var(--surface-raised);
  --on-dark-muted: color-mix(in srgb, var(--brand-white) 80%, var(--brand-blue));
  --on-dark-border: color-mix(in srgb, var(--brand-white) 20%, var(--brand-blue));
  color-scheme: light;
}

body { color: var(--navy); background: var(--white); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3 { letter-spacing: var(--tracking-tight); }
.skip { z-index: 20; }

.topbar { display: flex; align-items: center; gap: var(--space-4); min-height: 72px; padding: 12px var(--page-gutter); border-bottom: 1px solid var(--border); background: var(--white); }
.brand-link { display: flex; align-items: center; gap: var(--space-3); margin-right: auto; min-width: 0; }
.logo { width: 160px; height: auto; flex: 0 1 160px; object-fit: contain; }
.brand-divider { height: 28px; border-left: 1px solid var(--border); }
.brand-product { max-width: 100px; font-size: var(--text-xs); font-weight: 600; line-height: 1.35; letter-spacing: var(--tracking-wide); }
.desktop-navigation { display: none; }
.desktop-navigation a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; }
.desktop-navigation a:hover, .desktop-navigation a:focus-visible { background: var(--gray); }
.site-nav { position: relative; }
.site-nav summary { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); cursor: pointer; font-size: var(--text-sm); font-weight: 600; list-style: none; }
.site-nav summary::-webkit-details-marker { display: none; }
.site-nav nav { position: absolute; z-index: 10; top: calc(100% + var(--space-2)); right: 0; display: none; min-width: 12rem; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); }
.site-nav[open] nav { display: grid; }
.site-nav nav a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; }
.site-nav nav a:hover, .site-nav nav a:focus-visible { background: var(--gray); }
.topbar form { margin: 0; }
.topbar .compact { min-height: 44px; white-space: nowrap; }
.text-button { min-height: 44px; border: 0; background: transparent; color: var(--muted); font-size: var(--text-sm); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--text-sm); font-weight: 600; }
.text-link:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.eyebrow { margin-bottom: var(--space-3); color: var(--navy); font-size: var(--text-xs); font-weight: 600; line-height: 1.35; letter-spacing: var(--tracking-wide); }
.orange-line { display: inline-block; width: 28px; margin-right: var(--space-2); border-top: 2px solid var(--orange); vertical-align: middle; }
.actions, .form-actions, .editorial-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* --- Herói editorial ------------------------------------------------------
   Sem fotografia (MEDIA.md). O impacto vem de três decisões, não de efeito:
   1. escala real do título — o display vai até 80px e ocupa a coluna larga;
   2. assimetria 1.35fr / 1fr, em vez de duas metades iguais;
   3. um painel de declaração em azul da marca ancorando a direita.
   A entrada é coordenada: palavras do título + itens da coluna (motion.js). */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-6), 5vw, var(--space-10));
  /* Presença de primeira dobra, sem empurrar o conteúdo para fora da tela em
     telas baixas: por isso min() com vh e um teto absoluto. */
  min-height: min(76vh, 700px);
  padding-block: var(--density-section);
  padding-inline: max(var(--page-gutter), calc((100% - var(--container-max)) / 2));
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hero-title {
  max-width: 14ch;
  margin-bottom: var(--space-5);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  overflow-wrap: break-word;
}
.hero-lead {
  max-width: 44ch;
  margin-bottom: var(--space-7);
  color: var(--ink-muted);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
}

/* Painel de declaração: a âncora visual da dobra. Superfície grande, então
   raio grande; o índice na base são as categorias reais do CMS. */
.hero-statement {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border-radius: var(--radius-media);
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-3);
}
.statement-mark { color: var(--sand); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); }
.statement-title {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 600;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.statement-index { display: grid; gap: 0; margin-top: auto; padding-inline-start: 0; list-style: none; }
.statement-index li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--on-dark-border);
}
.statement-index .idx-n { color: var(--orange); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.statement-index .idx-label { font-size: var(--text-sm); font-weight: 500; }
.statement-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--on-dark-border);
  color: var(--on-dark-muted);
  font-size: var(--text-xs);
}
.statement-foot svg { flex: none; }

.brand-strip { display: flex; justify-content: center; gap: clamp(var(--space-4), 6vw, var(--space-6)); padding: var(--space-4) var(--page-gutter); background: var(--navy); color: var(--white); font-size: var(--text-sm); text-align: center; }
.brand-strip span + span::before { content: "✦"; margin-right: clamp(var(--space-3), 3vw, var(--space-5)); color: var(--orange); }

.section, .about-section { padding: var(--section-space) var(--page-gutter); }
.section > *, .about-section > * { max-width: var(--container-max); margin-right: auto; margin-left: auto; }
.section-top-small { padding-top: var(--space-5); }
.section-heading, .page-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.section-heading h2 { max-width: 18ch; font-size: var(--text-heading); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.card-image { position: relative; overflow: hidden; aspect-ratio: 1.4; background: var(--sand); }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.work-card a:hover img, .project-card a:hover img { transform: scale(1.02); }
.card-arrow { position: absolute; right: var(--space-3); bottom: var(--space-3); display: grid; width: 44px; height: 44px; place-items: center; background: var(--white); font-size: 1.25rem; }
.image-tag { position: absolute; top: var(--space-3); left: var(--space-3); padding: var(--space-1) var(--space-3); background: var(--white); font-size: var(--text-xs); font-weight: 500; }
.card-body { padding: var(--space-4) 0; }
.card-body h3 { margin-bottom: var(--space-2); font-size: 1.25rem; }
.card-body > p:not(.eyebrow), .card-meta { font-size: var(--text-sm); }
.card-meta { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); color: var(--muted); }
.project-count { float: right; letter-spacing: normal; }
.about-section { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(var(--space-6), 8vw, 5rem); background: color-mix(in srgb, var(--sand) 24%, var(--white)); }
.large-copy { max-width: var(--measure); font-size: 1.0625rem; line-height: 1.75; }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.principles > div { padding-top: var(--space-3); border-top: 1px solid var(--sand); }
.principles h3 { margin: var(--space-3) 0 var(--space-2); font-size: 1rem; }
.principles p { font-size: var(--text-sm); }
.contact-section { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); max-width: var(--container-max); margin: 0 auto var(--section-space); padding: clamp(var(--space-6), 6vw, 4rem) var(--page-gutter); background: var(--navy); color: var(--white); }
.contact-section .eyebrow, .site-footer .eyebrow { color: var(--sand); }
.contact-section p, .site-footer p { color: var(--on-dark-muted); }

.page-hero { padding: var(--section-space) var(--page-gutter); background: var(--paper); }
.page-hero > * { max-width: var(--measure); margin-right: auto; margin-left: auto; }
.page-hero h1 { margin-bottom: var(--space-4); font-size: var(--text-display); }
.page-hero > p:last-child, .prose { font-size: 1rem; line-height: 1.7; }
.breadcrumb { display: block; margin-bottom: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.project-cover { max-width: var(--container-max); height: clamp(280px, 42vw, 560px); margin: 0 auto; overflow: hidden; }
.project-cover img, .gallery img { width: 100%; height: 100%; object-fit: cover; }
.project-intro, .work-intro { display: grid; gap: clamp(var(--space-5), 6vw, 5rem); max-width: var(--container-max); margin: 0 auto var(--space-6); padding-bottom: var(--section-space); border-bottom: 1px solid var(--border); }
.project-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.work-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.gallery li:first-child { grid-column: 1 / -1; }
.gallery img { aspect-ratio: 1.5; }
.gallery li:first-child img { aspect-ratio: 2; }
.gallery figcaption { padding-top: var(--space-2); color: var(--muted); font-size: var(--text-sm); }
.work-details { display: grid; align-content: start; gap: var(--space-4); }
.work-details div { padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.work-details small { display: block; color: var(--muted); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
.work-details span { font-size: var(--text-sm); }
.prose p { margin-bottom: var(--space-4); }
.filter-bar { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--space-4); align-items: end; margin-top: var(--space-5); }
.pagination { display: flex; justify-content: center; gap: var(--space-5); margin-top: var(--space-6); }
.empty { grid-column: 1 / -1; padding: var(--space-6); border: 1px dashed var(--border); background: var(--paper); text-align: center; }

.site-footer { padding: var(--section-space) var(--page-gutter) var(--space-5); background: var(--navy); color: var(--white); }
.footer-top { display: grid; grid-template-columns: 1.3fr .7fr 1fr; gap: clamp(var(--space-5), 6vw, 4rem); max-width: var(--container-max); margin: auto; padding-bottom: var(--space-6); }
.footer-logo { width: 170px; margin-bottom: var(--space-4); }
.footer-top a { display: block; min-height: 32px; font-size: var(--text-sm); }
.site-footer .slogan { color: var(--white); font-size: 1rem; font-weight: 500; }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--space-4); max-width: var(--container-max); margin: auto; padding-top: var(--space-4); border-top: 1px solid var(--on-dark-border); color: var(--on-dark-muted); font-size: var(--text-xs); }

.admin { background: var(--paper); }
.admin .topbar { min-height: 64px; }
.admin .site-footer { padding: var(--space-4) var(--page-gutter); background: var(--paper); color: var(--muted); border-top: 1px solid var(--border); }
.admin .footer-top { display: none; }
.admin .footer-bottom { border: 0; color: var(--muted); }
.admin-section { max-width: var(--container-max); min-height: calc(100vh - 136px); margin: auto; padding: var(--space-6) var(--page-gutter) var(--section-space); }
.narrow { max-width: 1120px; }
.page-heading { align-items: center; }
.page-heading h1 { margin-bottom: var(--space-2); font-size: var(--text-title); }
.counts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.counts li, .panel, .form-panel, .admin-project-card, .table-wrap { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); }
.counts li { padding: var(--space-5); }
.counts span, .badge { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
.counts strong { display: block; font-size: clamp(2rem, 4vw, 2.5rem); font-variant-numeric: tabular-nums; }
.counts a { display: block; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--text-sm); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr); gap: var(--space-5); }
.panel, .form-panel { padding: var(--space-5); }
.recent-list { list-style: none; padding: 0; }
.recent-list > li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.recent-list > li:last-child { border-bottom: 0; }
.recent-list > li > * { min-width: 0; }
.recent-list img { width: 68px; height: 53px; border-radius: var(--radius-sm); object-fit: cover; }
.badge { display: inline-block; padding: var(--space-1) var(--space-2); border: 1px solid var(--sand); border-radius: var(--radius-sm); background: var(--gray); color: var(--navy); white-space: nowrap; }
.recent-list .badge { flex: 0 0 auto; max-width: 100%; white-space: nowrap; letter-spacing: normal; text-align: center; }
.editor-card { padding: var(--space-5); margin-bottom: var(--space-4); border-radius: var(--radius-lg); background: var(--navy); color: var(--white); }
.editor-card .eyebrow { color: var(--sand); }
.editor-card p { margin: var(--space-4) 0; color: var(--on-dark-muted); }
.steps { counter-reset: step; }
.steps li { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); color: var(--muted); font-size: var(--text-sm); counter-increment: step; }
.steps li::before { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; background: var(--gray); color: var(--navy); content: counter(step); }
.admin-project-card { overflow: hidden; }
.admin-project-card > img { width: 100%; aspect-ratio: 1.7; object-fit: cover; }
.admin-project-card .card-body { padding: var(--space-5); }
.table-wrap { overflow: auto; }
table { width: 100%; min-width: 620px; border-collapse: collapse; text-align: left; }
th { padding: var(--space-3) var(--space-4); background: var(--gray); color: var(--muted); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap; }
td { padding: var(--space-4); border-top: 1px solid var(--border); font-size: var(--text-sm); }
.table-work { display: flex; align-items: center; gap: var(--space-3); min-width: 235px; }
.table-work img { width: 62px; height: 49px; border-radius: var(--radius-sm); object-fit: cover; }
label { display: block; margin-bottom: var(--space-2); color: var(--navy); font-size: var(--text-sm); font-weight: 500; }
form p { margin-bottom: var(--space-4); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form-grid p { min-width: 0; margin: 0; }
.form-grid input:not([type="checkbox"]):not([type="radio"]), .form-grid select, .form-grid textarea { width: 100%; }
.full { grid-column: 1 / -1; }
.form-actions { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.form-panel fieldset { margin: 0 0 var(--space-5); padding: 0 0 var(--space-5); border: 0; border-bottom: 1px solid var(--border); }
.form-panel legend { margin-bottom: var(--space-3); font-size: 1.25rem; font-weight: 600; }
.media-upload { padding: var(--space-5); border: 1px dashed var(--sand); border-radius: var(--radius-lg); background: var(--paper); }
.admin-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.admin-media > li { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); }
.admin-media > li > img, .admin-media > li > label > img { width: 100%; aspect-ratio: 1.4; object-fit: cover; }
.admin-media .media-body, .admin-media details { padding: var(--space-3); }
.media-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.danger-zone { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.flash, .error { margin: var(--space-4) var(--page-gutter); padding: var(--space-3) var(--space-4); border: 1px solid var(--sand); border-radius: var(--radius-md); background: var(--white); color: var(--navy); }
.error { border-color: var(--orange); }
.login-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--space-6), 8vw, 5rem); max-width: var(--container-max); min-height: 620px; margin: auto; padding: var(--section-space) var(--page-gutter); }
.login-story { display: flex; flex-direction: column; justify-content: center; padding: clamp(var(--space-5), 5vw, 3.5rem); background: var(--navy); color: var(--white); }
.login-story h1 { margin-bottom: var(--space-4); font-size: var(--text-heading); }
.login-story p { color: var(--on-dark-muted); }
.login-story .eyebrow { color: var(--sand); }
.login-story .slogan { margin-top: auto; padding-top: var(--space-6); }
.login-panel { align-self: center; width: 100%; max-width: 30rem; }
.login-panel h2 { margin-bottom: var(--space-3); font-size: var(--text-title); }
.login-panel form { margin: var(--space-5) 0; }
.login-panel .btn { width: 100%; }

@media (min-width: 1024px) {
  .desktop-navigation { display: flex; align-items: center; gap: var(--space-1); }
  .site-nav summary { display: none; }
  .site-nav { display: none; }
}
@media (max-width: 767px) {
  .topbar { gap: var(--space-2); }
  .logo { width: 140px; flex-basis: 140px; }
  .brand-divider, .brand-product { display: none; }
  .topbar .compact { display: none; }
  .topbar .text-button { padding: 0 var(--space-2); }
  .hero, .about-section, .login-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-title { max-width: 100%; }
  .brand-strip { flex-wrap: wrap; }
  .brand-strip span + span::before { display: none; }
  .section-heading, .page-heading { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .cards, .principles, .footer-top, .dashboard-grid, .form-grid, .admin-media { grid-template-columns: minmax(0, 1fr); }
  .project-intro, .work-intro { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery li:first-child { grid-column: auto; }
  .gallery li:first-child img { aspect-ratio: 1.5; }
  .filter-bar { grid-template-columns: minmax(0, 1fr); }
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-section { display: block; }
  .contact-section .btn { width: 100%; margin-top: var(--space-4); }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .admin-section { padding-top: var(--space-5); }
  .full { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.site-footer :focus-visible, .contact-section :focus-visible, .login-story :focus-visible { outline-color: var(--orange); }

@media (max-width: 767px) {
  .recent-list > li { flex-wrap: wrap; }
  .recent-list > li > div { flex: 1 1 160px; }
  .recent-list .badge { margin-left: auto; }
}

/* ==========================================================================
   Camada premium — reconcilia este produto com o contrato compartilhado.
   Fica no fim do arquivo porque precisa vencer as regras legadas acima.
   Decisões: docs/ui-premium/CONTRACT.md.
   ========================================================================== */

/* A eyebrow do produto passa a ser a do contrato: traço laranja + caixa alta.
   O .orange-line legado deixa de ser necessário no markup. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-soft);
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: var(--space-5); height: 2px; background: var(--orange); flex: none; }
.orange-line { display: none; }
.contact-section .eyebrow::before, .site-footer .eyebrow::before, .login-story .eyebrow::before,
.editor-card .eyebrow::before { background: var(--sand); }
.contact-section .eyebrow, .site-footer .eyebrow, .login-story .eyebrow, .editor-card .eyebrow { color: var(--sand); }
/* A eyebrow dentro de card volta a ser inline: ali ela é metadado, não rótulo
   de seção, e o traço competiria com a localização. */
.card-body .eyebrow { display: block; color: var(--muted); }
.card-body .eyebrow::before { content: none; }
.media-fallback .fb-top .fb-index::before { content: none; }
/* A variante quente segue a mesma decisão da fundação: campo de cor, sem
   listra. O bege entra como banho tonal sobre o azul, não como padrão. */
.media-fallback.is-warm {
  background-image:
    linear-gradient(to top, var(--brand-orange) 0 3px, transparent 3px),
    radial-gradient(120% 90% at 82% 8%, color-mix(in srgb, var(--brand-beige) 26%, transparent) 0%, transparent 64%);
}
/* Rodapé da capa: o ícone não encolhe nem desalinha quando a frase quebra. */
.media-fallback .fb-foot { align-items: flex-start; }
.media-fallback .fb-foot svg { flex: none; margin-top: 2px; }

/* --- Grade editorial: o layout responde à quantidade real de itens --------
   Com 1 item, a obra ocupa a faixa inteira em composição horizontal, em vez
   de deixar duas colunas vazias. Com 2, divide ao meio. Sem :has, sem JS. */
.editorial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.editorial-grid > li:only-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .editorial-grid > li:only-child:not(.empty) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .editorial-grid > li:only-child:not(.empty) .card-image { aspect-ratio: auto; height: 100%; min-height: 340px; }
  .editorial-grid > li:only-child:not(.empty) .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    padding: clamp(var(--space-5), 3vw, var(--space-7));
  }
  .editorial-grid > li:only-child:not(.empty) .card-body h3 { font-size: clamp(1.5rem, 2vw, 2rem); }
  .editorial-grid > li:only-child:not(.empty) .card-body > p:not(.eyebrow) { font-size: 1rem; max-width: 46ch; }
  .editorial-grid > li:first-child:nth-last-child(2),
  .editorial-grid > li:first-child:nth-last-child(2) ~ li { grid-column: span 1; }
  .editorial-grid:has(> li:first-child:nth-last-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Cartões -------------------------------------------------------------- */
.work-card, .project-card { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--white); }
.card-image { aspect-ratio: 3 / 2; border-radius: 0; background: var(--gray); }
.card-body { padding: var(--space-5); }
.card-arrow {
  right: var(--space-4); bottom: var(--space-4);
  width: 40px; height: 40px;
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-state) var(--ease-standard);
}
.card-editorial:hover .card-arrow { transform: translate(2px, -2px); }
.image-tag { top: var(--space-4); left: var(--space-4); border-radius: var(--radius-badge); background: var(--white); box-shadow: var(--shadow-1); }
.card-meta { align-items: center; }
.card-meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
/* Aproximação mínima da imagem, só onde há hover real e foto real. */
@media (hover: hover) {
  .card-editorial:hover .card-image img { transform: scale(1.03); }
}
.card-image img { transition: transform var(--dur-enter) var(--ease-editorial); }

.meta-none { color: var(--muted); font-style: normal; }

/* --- Seções --------------------------------------------------------------- */
.section, .about-section { padding-block: var(--density-section); }

/* O herói de página passa a dividir a mesma margem esquerda das seções: título,
   filtros e cards alinham na mesma coluna, em vez de três recuos diferentes. */
.page-hero { padding-inline: max(var(--page-gutter), calc((100% - var(--container-max)) / 2)); }
section.page-hero > * { margin-inline: 0; max-width: var(--measure); }

/* Listas de cards e galeria são grades, não listas com marcador: sem recuo
   padrão do <ul>, senão os cards ficam 40px à direita do título da seção. */
/* `margin-inline: 0` aqui anulava o `margin: auto` de `.section > *`: a grade
   de cards ficava 44px à esquerda do cabeçalho da própria seção. Só o recuo
   padrão do <ul> precisa cair. */
.cards, .gallery, .projects-grid, .editorial-grid { list-style: none; padding-inline-start: 0; }
.page-hero h1 { font-size: var(--text-title); }
.page-hero > p { max-width: var(--measure-narrow); color: var(--ink-muted); font-size: var(--text-lead); }
.breadcrumb { min-height: 40px; }
.result-count { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); font-weight: 600; }
.page-status { align-content: center; color: var(--ink-muted); font-size: var(--text-sm); }

/* Barra de filtros: rótulo junto do controle, ação alinhada pela base. */
.filter-bar { max-width: none; margin-top: var(--space-6); }
.filter-bar .field { margin-bottom: 0; }
.filter-bar .filter-submit { align-self: end; }
.filter-bar .filter-submit .btn { min-height: 48px; }
.about-section { border-radius: var(--radius-media); }
/* A seção "sobre" é grid: ali o `margin: auto` herdado de `.section > *` vira
   margem automática de item de grade — encolhe a coluna ao conteúdo e a
   centraliza no track. As colunas voltam a ocupar o track e a seção passa a
   compartilhar o eixo das demais. */
.about-section { padding-inline: max(var(--page-gutter), calc((100% - var(--container-max)) / 2)); }
.about-section > * { max-width: none; margin-inline: 0; }
.contact-section { border-radius: var(--radius-media); }
.brand-strip span + span::before { content: "✦"; }

/* --- Vazio ---------------------------------------------------------------- */
.empty {
  text-align: left;
  border-radius: var(--radius-card);
  border-color: var(--border-strong);
  padding: var(--space-7) var(--space-6);
}

/* --- Ações e navegação ---------------------------------------------------- */
.text-link:hover { text-decoration: none; }
/* 44px é o mínimo de alvo de toque do contrato. Estava em 40 e era o único
   controle abaixo do piso em 320/390/768 — medido, não presumido. */
.link-action { min-height: 44px; }
.desktop-navigation a { border-radius: var(--radius-control); }
.desktop-navigation a[aria-current="page"] { background: var(--gray); font-weight: 600; }
.site-nav nav { border-radius: var(--radius-card); box-shadow: var(--shadow-2); }
/* A barra superior divide o mesmo eixo do conteúdo: logo e menu param na
   coluna onde começam títulos e cards, em vez de 37px mais à esquerda. */
.topbar { box-shadow: var(--shadow-1); padding-inline: max(var(--page-gutter), calc((100% - var(--container-max)) / 2)); }
.text-button { display: inline-flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-control); }

/* --- Admin: superfícies e mídia ------------------------------------------- */
/* Miniatura sem foto real: mantém o ritmo da lista sem quadrado vazio. */
.thumb-fallback {
  display: grid;
  place-items: center;
  width: 68px; height: 53px;
  flex: none;
  border-radius: var(--radius-badge);
  background: var(--surface-sunken);
  color: var(--ink-soft);
}
.thumb-fallback.thumb-sm { width: 62px; height: 49px; }
.recent-list { padding-inline-start: 0; list-style: none; }
/* O card de projeto no admin agora usa o componente de mídia compartilhado. */
.admin-project-card .media { border-radius: 0; }
.table-work { text-decoration: none; }
.table-work span { display: grid; }
.table-work small { color: var(--muted); }
.counts { list-style: none; padding-inline-start: 0; }
.page-heading h1 { margin-bottom: var(--space-2); }
.page-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.counts span { display: block; color: var(--muted); text-transform: uppercase; }
.steps { padding-inline-start: 0; list-style: none; }
.counts li, .panel, .form-panel, .admin-project-card, .table-wrap { border-radius: var(--radius-card); }
.panel, .form-panel, .counts li { box-shadow: var(--shadow-1); }
.admin-media > li { border-radius: var(--radius-card); }
.media-upload { border-radius: var(--radius-card); border-color: var(--border-strong); }
.editor-card { border-radius: var(--radius-card); }
.flash, .error { border-radius: var(--radius-control); }
/* O badge do admin já existia com borda; mantém a forma do contrato. */
.badge { border-radius: var(--radius-badge); }

/* --- "Sobre": segundo momento editorial ----------------------------------- */
.about-head { align-self: start; }
/* A coluna da esquerda precisa sustentar o peso da coluna de texto, senão a
   assimetria vira coluna vazia. O título sobe para a escala de título. */
.about-title {
  font-size: var(--text-title);
  font-weight: 600;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

@media (max-width: 767px) {
  .editorial-grid, .cards { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-inline: var(--page-gutter); gap: var(--space-7); }
  /* No mobile o painel vem depois da chamada: a tarefa é ler e clicar, não
     admirar a composição. O índice continua visível, sem virar acordeão. */
  .hero-statement { padding: var(--space-6) var(--space-5); }
}

/* --- Rotas públicas: listagem e detalhe ----------------------------------
   /obras, /obras/{slug}, /projetos e /projetos/{slug} passam a falar a mesma
   língua da home: escala real de título, assimetria de grid e campo de cor da
   marca. Sem fotografia (docs/ui-premium/MEDIA.md) e sem matiz novo — tudo
   sai das cinco cores de tokens.css via var(--brand-*), nada de hex cru.
   O cabeçalho antigo era uma faixa cinza com tudo empilhado à esquerda e
   metade da largura vazia; aqui a metade direita vira informação real.
   ------------------------------------------------------------------------ */

.page-hero.route-head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-6), 3vw, var(--space-8)) clamp(var(--space-6), 5vw, var(--space-10));
  padding-block: var(--density-section);
}
/* O cabeçalho de rota é grade: as colunas precisam ocupar o track inteiro,
   senão o `margin: auto` + `max-width: measure` herdados encolhem cada coluna
   e centralizam o conteúdo no meio do vão. */
.page-hero.route-head > * { max-width: none; margin-inline: 0; }
.route-head-copy { min-width: 0; }
.route-head .breadcrumb { margin-bottom: var(--space-5); }
.route-head .route-title {
  max-width: 16ch;
  margin-bottom: var(--space-5);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.route-head .route-lead {
  max-width: 46ch;
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

/* Painel azul da coluna direita — mesma peça do herói da home (índice de
   categorias / ficha técnica), reusada em vez de um segundo componente. */
.route-index, .route-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
  padding: clamp(var(--space-5), 2.4vw, var(--space-7));
  border-radius: var(--radius-media);
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-3);
}
.route-index-mark {
  margin: 0;
  color: var(--sand);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.route-index ul { display: grid; margin: 0; padding-inline-start: 0; list-style: none; }
.route-index li { border-top: 1px solid var(--on-dark-border); }
.route-index li:last-child { border-bottom: 1px solid var(--on-dark-border); }
.route-index .idx-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 48px;
  padding-block: var(--space-2);
}
.route-index .idx-n { flex: none; color: var(--orange); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.route-index .idx-label { margin-right: auto; font-size: var(--text-sm); font-weight: 500; line-height: 1.35; }
.route-index .idx-row .ico { flex: none; opacity: 0.45; transition: transform var(--dur-state) var(--ease-standard), opacity var(--dur-state) var(--ease-standard); }
.route-index a[aria-current="page"] .idx-label { font-weight: 600; }
.route-index a[aria-current="page"] .idx-n { color: var(--white); }
.route-index a[aria-current="page"] .ico { opacity: 1; }
@media (hover: hover) {
  .route-index a:hover .ico { transform: translateX(3px); opacity: 1; }
  .route-index a:hover .idx-label { color: var(--sand); }
}
.route-index :focus-visible, .route-facts :focus-visible { outline-color: var(--orange); }
.route-index-foot {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--on-dark-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.route-index-foot .ico { flex: none; margin-top: 1px; }

/* Ficha técnica no painel: rótulo pequeno em bege, valor em branco. Nenhuma
   informação depende só de cor — todas têm rótulo. */
.route-facts .work-details { display: grid; gap: 0; }
.route-facts .work-details > div {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--on-dark-border);
}
.route-facts .work-details > div:first-child { padding-top: 0; }
.route-facts .work-details > div:last-child { padding-bottom: 0; border-bottom: 0; }
.route-facts .work-details small { color: var(--sand); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.route-facts .work-details span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 500;
}
.route-facts .work-details .ico { flex: none; color: var(--sand); }
.route-facts .badge {
  justify-self: start;
  border: 0;
  background: color-mix(in srgb, var(--brand-white) 16%, var(--brand-blue));
  color: var(--white);
}
.route-facts .fact-strong { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }

/* Barra de filtros: ocupa a largura inteira do cabeçalho, numa superfície
   própria, alinhada ao mesmo eixo do título e dos cards. */
.route-head .filter-bar {
  grid-column: 1 / -1;
  align-items: end;
  margin-top: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-1);
}

/* --- Resultados ----------------------------------------------------------- */
.route-results { display: grid; gap: var(--space-6); }
.route-results-head { margin-bottom: 0; }
.result-summary { display: grid; gap: var(--space-3); min-width: 0; }
.result-summary .section-title { margin-bottom: 0; }
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
.filter-chips .badge { background: var(--surface-warm); }
.filter-chips .link-action { min-height: 32px; font-size: var(--text-sm); }

.pagination { justify-content: space-between; align-items: center; margin-top: 0; padding-top: var(--space-5); border-top: 1px solid var(--border); }
.pagination .page-prev, .pagination .page-next { display: flex; min-width: 0; }
.pagination .page-next { justify-content: flex-end; }

/* --- Sem resultados: orienta, não decora ---------------------------------- */
/* A caixa tracejada some: vira um cartão com duas leituras — o que aconteceu
   e o que foi pedido. O `.empty` continua existindo (contrato dos e2e). */
.empty.route-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-style: solid;
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-1);
}
.route-empty:has(> .route-empty-field) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
.route-empty-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
}
.route-empty-copy h2, .route-empty-copy h3 { margin: 0; font-size: var(--text-section); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--leading-title); }
.route-empty-copy > p { max-width: 52ch; margin: 0; color: var(--ink-muted); line-height: var(--leading-body); }
.route-empty-copy .btn { margin-top: var(--space-2); }
.route-empty-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  background: var(--navy);
  color: var(--white);
}
.route-empty-field .fb-index { margin: 0; color: var(--sand); font-size: var(--text-caption); font-weight: 700; letter-spacing: var(--tracking-wide); }
.route-empty-field dl { display: grid; gap: 0; margin: 0; }
.route-empty-field dl > div { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-bottom: 1px solid var(--on-dark-border); }
.route-empty-field dl > div:last-child { border-bottom: 0; }
.route-empty-field small { color: var(--sand); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.route-empty-field dl span { font-size: var(--text-sm); font-weight: 500; overflow-wrap: anywhere; }
.route-empty-field .fb-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; margin-top: auto; color: var(--on-dark-muted); font-size: var(--text-xs); line-height: 1.45; }
.route-empty-field .fb-note .ico { flex: none; margin-top: 2px; }

/* --- /projetos sem projeto: o vazio é o caminho principal ----------------- */
.route-void {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(var(--space-5), 3vw, var(--space-7));
}
.route-void-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  padding: clamp(var(--space-6), 4vw, var(--space-9));
  border-radius: var(--radius-media);
  background: var(--surface-warm);
}
.route-void-title {
  margin: 0;
  font-size: var(--text-title);
  font-weight: 600;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.route-void-copy > p { max-width: 52ch; margin: 0; color: var(--ink-muted); font-size: var(--text-lead); line-height: var(--leading-body); }
.route-void-copy .actions { margin-top: var(--space-3); }
.route-void-field {
  /* Abraça o próprio conteúdo em vez de esticar até a altura da coluna ao
     lado: esticado, o `margin-top: auto` da nota abria ~280px de vazio dentro
     do painel — o "espaço esperando dado que não existe" que o contrato veta.
     Colunas de alturas diferentes são intencionais aqui. */
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(var(--space-5), 2.4vw, var(--space-7));
  border-radius: var(--radius-media);
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-3);
}
.route-void-field .fb-index { margin: 0; color: var(--sand); font-size: var(--text-caption); font-weight: 700; letter-spacing: var(--tracking-wide); }
.route-void-field ol { display: grid; margin: 0; padding-inline-start: 0; list-style: none; }
.route-void-field li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--on-dark-border);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.route-void-field li:last-child { border-bottom: 1px solid var(--on-dark-border); }
.route-void-field .idx-n { flex: none; color: var(--orange); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
/* `margin-top: auto` empurrava a nota para a base de um painel esticado,
   abrindo um vazio interno. O painel agora abraça o conteúdo (align-self:
   start), então a nota segue o fluxo. */
.route-void-field .fb-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--on-dark-muted); font-size: var(--text-xs); line-height: 1.45; }
.route-void-field .fb-note .ico { flex: none; margin-top: 2px; }

/* --- Detalhe da obra: texto na largura de leitura ------------------------- */
.work-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: clamp(var(--space-5), 5vw, var(--space-10));
  margin-bottom: var(--density-section);
  padding-bottom: var(--density-section);
  border-bottom: 1px solid var(--border);
}
.work-story-head { align-self: start; }
.work-story-head .section-title { margin-bottom: 0; }
.work-prose { max-width: var(--measure-narrow); font-size: var(--text-lead); line-height: var(--leading-body); }
.work-prose p { margin-bottom: var(--space-5); }
.work-prose p:last-child { margin-bottom: 0; }
.no-media {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: var(--measure-narrow);
  margin: 0;
  padding: var(--space-5) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.no-media .ico { flex: none; color: var(--ink-soft); }

/* --- Galeria: a grade responde à quantidade real de itens ----------------- */
.gallery-block { display: grid; gap: var(--space-6); }
.gallery { gap: clamp(var(--space-4), 2vw, var(--space-5)); margin: 0; }
.gallery figure { margin: 0; }
.gallery .media { aspect-ratio: 3 / 2; border-radius: var(--radius-media); }
/* Um item só: faixa única, proporção calma — não uma coluna com buraco ao lado. */
.gallery > li:first-child { grid-column: auto; }
.gallery > li:only-child { grid-column: 1 / -1; }
.gallery > li:only-child .media { aspect-ratio: 16 / 9; }
/* Contagem ímpar: a primeira abre a composição em faixa inteira e o resto
   fecha em pares. Contagem par: todas em duas colunas, sem sobra. */
.gallery > li:first-child:nth-last-child(odd):not(:only-child) { grid-column: 1 / -1; }
.gallery > li:first-child:nth-last-child(odd):not(:only-child) .media { aspect-ratio: 21 / 9; }
.gallery .media > a { position: absolute; inset: 0; display: block; }
.gallery .media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
/* Dentro da galeria o campo de cor é suporte, não manchete: o título do
   fallback não pode competir com o título da obra. */
.gallery .media-fallback .fb-title { font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.5rem); }
.gallery figcaption { padding-top: var(--space-3); }

/* --- Adaptação por largura ------------------------------------------------ */
@media (max-width: 1023px) {
  .page-hero.route-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .route-head .route-title { max-width: 100%; }
  .route-head .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-head .filter-bar .field:first-child { grid-column: 1 / -1; }
  .route-void { grid-template-columns: minmax(0, 1fr); }
  .work-story { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 767px) {
  .route-empty:has(> .route-empty-field) { grid-template-columns: minmax(0, 1fr); }
  .route-head .filter-bar { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .route-head .filter-bar .field:first-child { grid-column: auto; }
  .route-head .filter-bar .filter-submit .btn { width: 100%; }
  .gallery > li:first-child:nth-last-child(odd):not(:only-child) .media,
  .gallery > li:only-child .media { aspect-ratio: 3 / 2; }
  .pagination { flex-wrap: wrap; gap: var(--space-3); }
  .route-void-copy .actions .btn { width: 100%; }
}

/* ==========================================================================
   Admin: shell operacional
   --------------------------------------------------------------------------
   O público do Portfólio é vitrine; o /admin é software. Este bloco separa as
   duas linguagens sem criar um segundo design system: mesmos tokens, mesma
   paleta, mesmos Hugeicons — outra densidade e outra escala.

   Três causas concretas foram corrigidas aqui, não maquiadas:
   1. `.btn-light` era usada em 14 lugares do admin e **não existia no CSS**.
      Todo botão secundário caía em `.btn` e virava pílula laranja: o formulário
      de obra tinha dez ações primárias competindo. Agora há hierarquia real
      (primária laranja única · secundária de contorno · ícone quieto · azul
      sólido para destrutivo).
   2. `/admin/config` renderizava inputs com a largura padrão do navegador
      (~180px) dentro de um painel de 1100px, cortando o texto digitado.
   3. O título das telas usava `--text-title` (até 44px). Painel operacional
      pede `--text-op-title` (24→32), que é o que o contrato define.

   Movimento: só microinteração, nas durações `--dur-press` / `--dur-state`.
   Nada de entrada narrativa, nada de `data-reveal` — aqui o conteúdo precisa
   estar legível no primeiro frame.
   ========================================================================== */

/* --- Utilidades ----------------------------------------------------------- */
.a11y-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* `code` sem família própria: a marca é Poppins em todos os pesos. */
.admin .hint code, .admin .group-hint code {
  font-family: inherit;
  padding: 1px 5px;
  border-radius: var(--radius-badge);
  background: var(--surface-sunken);
  font-weight: 600;
}

/* --- Hierarquia de ação ---------------------------------------------------
   Uma primária laranja por contexto. Tudo o mais é contorno ou quieto. */
.btn-light {
  background: var(--white);
  color: var(--navy);
  border-color: var(--border-strong);
  box-shadow: none;
}
.btn-light:hover { background: var(--surface-sunken); border-color: var(--ink-soft); }
.btn.compact { min-height: 40px; padding: var(--space-2) var(--space-4); }
/* 40px preserva a densidade da tabela no desktop com mouse, mas fica abaixo do
   piso de toque. Em ponteiro grosso o botão volta a 44px — medido em
   /admin/obras a 390px, onde os dois "Editar" saíam com 40. */
@media (pointer: coarse) {
  .btn.compact { min-height: 44px; }
}
.editor-card .btn-light { border-color: transparent; }
.editor-card .btn-light:hover { background: var(--sand); }

/* Ação de linha só-ícone: alvo de 44px e rótulo obrigatório no markup. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  min-height: 44px;
  padding: 0;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--white);
  color: var(--ink-muted);
  cursor: pointer;
  transition:
    background-color var(--dur-state) var(--ease-standard),
    border-color var(--dur-state) var(--ease-standard),
    color var(--dur-state) var(--ease-standard),
    transform var(--dur-press) var(--ease-standard);
}
.btn-icon:hover { background: var(--surface-sunken); border-color: var(--ink-soft); color: var(--navy); }
.btn-icon:active { transform: translateY(1px); }

/* Destrutivo: azul sólido da marca. Não usa o laranja, que é a cor da ação
   desejada — e não depende de cor: vem com ícone de alerta e confirmação. */
.btn-danger { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-danger:hover { background: color-mix(in srgb, var(--brand-blue) 86%, var(--brand-white)); color: var(--white); }

/* Desabilitado: legível, sem borda tracejada e sem reagir ao ponteiro. */
.admin button:disabled, .admin .btn:disabled, .admin .btn-icon:disabled {
  background: var(--surface-sunken);
  color: var(--ink-soft);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.admin button:disabled:hover, .admin .btn:disabled:hover { background: var(--surface-sunken); }
.text-button.danger { color: var(--navy); font-weight: 600; }
.text-button.danger:hover { background: var(--surface-sunken); }

/* --- Navegação: estado ativo real -----------------------------------------
   `aria-current` viria do layout compartilhado, que está fora deste escopo.
   A rota é declarada pela própria página em `#hx-fragment[data-admin-route]`
   e `:has()` a alcança a partir do body — o marcador tem consumidor verificado
   em todas as quatro rotas de menu. */
.admin .desktop-navigation a, .admin .site-nav nav a { position: relative; }
.admin .desktop-navigation a::after {
  content: "";
  position: absolute;
  left: var(--space-3); right: var(--space-3); bottom: 6px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-state) var(--ease-standard);
}
.admin .desktop-navigation a:hover::after,
.admin .desktop-navigation a:focus-visible::after { transform: scaleX(1); }

body.admin:has(#hx-fragment[data-admin-route="home"]) :is(.desktop-navigation, .site-nav nav) a[href="/admin"],
body.admin:has(#hx-fragment[data-admin-route="obras"]) :is(.desktop-navigation, .site-nav nav) a[href="/admin/obras"],
body.admin:has(#hx-fragment[data-admin-route="projetos"]) :is(.desktop-navigation, .site-nav nav) a[href="/admin/projetos"],
body.admin:has(#hx-fragment[data-admin-route="config"]) :is(.desktop-navigation, .site-nav nav) a[href="/admin/config"] {
  background: var(--gray);
  font-weight: 600;
}
body.admin:has(#hx-fragment[data-admin-route="home"]) .desktop-navigation a[href="/admin"]::after,
body.admin:has(#hx-fragment[data-admin-route="obras"]) .desktop-navigation a[href="/admin/obras"]::after,
body.admin:has(#hx-fragment[data-admin-route="projetos"]) .desktop-navigation a[href="/admin/projetos"]::after,
body.admin:has(#hx-fragment[data-admin-route="config"]) .desktop-navigation a[href="/admin/config"]::after { transform: scaleX(1); }

/* --- Cabeçalho de tela ----------------------------------------------------- */
.admin .page-heading {
  align-items: flex-end;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-strong);
}
.admin .page-heading h1 {
  margin-bottom: var(--space-1);
  font-size: var(--text-op-title);
  line-height: var(--leading-title);
}
.admin .page-heading .eyebrow { margin-bottom: var(--space-2); font-size: var(--text-xs); }
.admin .page-heading .eyebrow::before { width: var(--space-4); }
.admin .page-heading > div > p:last-child { max-width: var(--measure-narrow); }
.heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.heading-user {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
}
.heading-user .ico { color: var(--ink-soft); }
.admin .breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-control);
  font-weight: 500;
  transition: color var(--dur-state) var(--ease-standard);
}
.admin .breadcrumb:hover { color: var(--navy); }
.admin .breadcrumb .ico { transition: transform var(--dur-state) var(--ease-standard); }
.admin .breadcrumb:hover .ico { transform: translateX(-2px); }

/* Barra de contexto da lista: contagem e legenda dos estados. */
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-4);
}
.toolbar-count { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.toolbar-note { margin: 0; color: var(--muted); font-size: var(--text-xs); }

/* --- Situação: forma antes de cor ------------------------------------------
   Publicado = ponto cheio · Rascunho = anel vazado · Arquivado = traço.
   O rótulo continua escrito; a cor é reforço, nunca o único portador. */
.admin .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge[data-status]::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; }
.badge[data-status="publicado"] { background: var(--surface-warm); border-color: var(--sand); color: var(--navy); }
.badge[data-status="publicado"]::before { background: var(--orange); }
.badge[data-status="rascunho"] { background: var(--white); border-color: var(--border-strong); color: var(--muted); }
.badge[data-status="rascunho"]::before { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-soft); }
.badge[data-status="arquivado"] { background: var(--surface-sunken); border-color: var(--border-subtle); color: var(--ink-soft); }
.badge[data-status="arquivado"]::before { width: 10px; height: 2px; border-radius: 0; background: var(--ink-soft); }

/* --- Indicadores ----------------------------------------------------------- */
.admin .counts { gap: var(--space-4); margin-bottom: var(--space-6); }
.admin .counts li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  transition:
    box-shadow var(--dur-state) var(--ease-standard),
    border-color var(--dur-state) var(--ease-standard);
}
.admin .counts li:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.counts .count-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.counts .count-label .ico { color: var(--ink-soft); }
.admin .counts strong {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
  line-height: 1.05;
  font-weight: 600;
}
.counts .count-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 500;
}
.counts .count-link .ico { transition: transform var(--dur-state) var(--ease-standard); }
.admin .counts li:hover .count-link .ico { transform: translate(2px, -2px); }

/* --- Painéis --------------------------------------------------------------- */
.admin .panel, .admin .form-panel { padding: var(--space-6); }
.admin .dashboard-grid { align-items: start; }
.dashboard-aside { display: grid; gap: var(--space-5); }
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.panel-head > div { min-width: 0; }
.panel-head h2, .panel-head h3 { margin: 0 0 var(--space-1); font-size: 1.125rem; }
.panel-hint { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.admin .panel h3 { font-size: 1.0625rem; }
.admin .steps li { margin-top: var(--space-4); }

/* Lista de linhas: hover e foco marcam a linha inteira, não só o link. */
.admin .recent-list > li {
  gap: var(--space-4);
  padding: var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur-state) var(--ease-standard);
}
.admin .recent-list > li:hover, .admin .recent-list > li:focus-within { background: var(--surface-raised); }
.admin .recent-list > li.empty:hover { background: none; }
.admin .recent-list p { margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); }
.row-title { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; }
.row-title:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* --- Tabela ---------------------------------------------------------------- */
.admin .table-wrap { max-height: min(72vh, 760px); overflow: auto; }
.admin thead th { position: sticky; top: 0; z-index: 1; }
.admin td { vertical-align: middle; }
.admin td.num, .admin th.num { text-align: right; font-variant-numeric: tabular-nums; }
.admin tbody tr {
  transition:
    background-color var(--dur-state) var(--ease-standard),
    box-shadow var(--dur-state) var(--ease-standard);
}
.admin tbody tr:hover, .admin tbody tr:focus-within { background: var(--surface-raised); box-shadow: inset 3px 0 0 var(--orange); }
.admin tbody tr:has(td.empty):hover { background: none; box-shadow: none; }
.admin .table-work { gap: var(--space-4); padding-block: var(--space-1); }
.admin .table-work strong { font-weight: 600; }
.admin .table-work small { color: var(--muted); font-size: var(--text-xs); }
.admin .table-work:hover strong { text-decoration: underline; text-underline-offset: 0.25em; }
.admin .row-actions { white-space: nowrap; text-align: right; }
.meta-none { color: var(--ink-soft); font-style: normal; }
.cell-label { display: none; }

/* --- Vazio ----------------------------------------------------------------- */
.admin .empty-state {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  max-width: 52ch;
}
.admin .empty-state .ico { color: var(--ink-soft); }
.admin .empty-state h3 { margin: 0; }
.admin .empty-state p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
/* O vazio já vive dentro de um painel: uma moldura só. A tracejada de
   `.empty-state` existe para quando ele aparece solto na página. */
.admin .panel > .empty-state,
.admin .form-panel > .empty-state,
.admin .recent-list > li.empty-state {
  padding-inline: 0;
  border: 0;
  background: none;
}
.admin .panel.empty { padding: var(--space-6); }
.admin .panel.empty > .empty-state { padding-block: var(--space-4); }
.admin .form-panel > .empty-state { padding-block: var(--space-6); }

/* --- Formulários ----------------------------------------------------------- */
.admin .form-panel fieldset {
  margin: 0 0 var(--space-6);
  padding: 0 0 var(--space-6);
  border: 0;
  border-bottom: 1px solid var(--border);
}
.admin .form-panel fieldset:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.admin .form-panel legend {
  display: block;
  width: 100%;
  margin-bottom: var(--space-3);
  padding: 0;
  color: var(--navy);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.group-hint { margin: calc(var(--space-2) * -1) 0 var(--space-4); max-width: var(--measure-narrow); color: var(--muted); font-size: var(--text-sm); }
.admin .form-grid { gap: var(--space-5); }
.admin .form-panel .field { margin-bottom: 0; }
.admin .form-panel .field > label { margin-bottom: 0; font-weight: 600; }
.admin .form-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.admin .form-panel select,
.admin .form-panel textarea { width: 100%; }
/* `max-width` e não `width`: a regra de largura cheia acima ganha em
   especificidade por causa da cadeia de `:not()`, e brigar com ela só geraria
   um `!important`. O teto resolve os dois casos. */
.admin .form-panel .input-short { max-width: 12rem; }
.admin .form-panel textarea { min-height: 4.5rem; resize: vertical; line-height: var(--leading-body); }
.admin .hint { display: block; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.admin .form-panel input[type="file"] { max-width: 100%; }

/* Barra de ação do painel: a primária tem lugar fixo e previsível. Só vira
   barra rente ao rodapé quando é mesmo o último bloco — no painel de
   publicação a zona de risco vem depois, e ali a faixa seria um degrau. */
.admin .form-panel > .form-actions:last-child {
  gap: var(--space-3);
  margin: var(--space-6) calc(var(--space-6) * -1) calc(var(--space-6) * -1);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--surface-raised);
}
.admin .form-panel > .form-actions { gap: var(--space-3); }
.admin .form-panel > .form-actions form { margin: 0; }
.admin .form-panel > .form-actions p { margin: 0; }
.admin .form-panel > .form-actions:not(:last-child) {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
/* Logo abaixo do cabeçalho do painel o filete seria o segundo em 16px. */
.admin .form-panel > .panel-head + .form-actions:not(:last-child) {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.admin .filter-panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.admin .filter-panel .field { flex: 1 1 18rem; }

/* Linha selecionável: alvo grande, estado marcado evidente por borda + fundo. */
.choice-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  min-height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--white);
  cursor: pointer;
  transition:
    background-color var(--dur-state) var(--ease-standard),
    border-color var(--dur-state) var(--ease-standard);
}
.choice:hover { background: var(--surface-raised); border-color: var(--border-strong); }
.choice:has(input:checked) { border-color: var(--orange); background: var(--surface-warm); }
.choice:has(input:focus-visible) { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.choice:has(input:focus-visible) input { outline: none; }
.choice input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--navy); }
.choice-body { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.choice-title { font-weight: 600; font-size: var(--text-sm); }
.choice-meta { color: var(--muted); font-size: var(--text-xs); }

/* --- Mídia ----------------------------------------------------------------- */
.admin .admin-media { grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.admin .admin-media > li {
  display: flex;
  flex-direction: column;
  padding: 0;
  transition: box-shadow var(--dur-state) var(--ease-standard), border-color var(--dur-state) var(--ease-standard);
}
.admin .admin-media > li:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.admin .admin-media .media-body { display: grid; gap: var(--space-3); padding: var(--space-3); }
.media-flag { margin: 0; }
/* Uma linha só: a ação nomeada cresce, os dois ícones de ordem ficam fixos.
   Antes o conjunto quebrava em três linhas dentro do cartão. */
.admin .media-controls { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); }
.admin .media-controls form { margin: 0; min-width: 0; }
.admin .media-controls > form:first-child { flex: 1 1 auto; }
.admin .media-controls > form:first-child .btn { width: 100%; padding-inline: var(--space-3); }
.admin .media-controls .btn-icon { width: 40px; height: 40px; min-height: 40px; }
.admin .media-upload input[type="file"] {
  padding: var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-field);
  background: var(--white);
  font-size: var(--text-sm);
  cursor: pointer;
}
.admin .admin-media > li > details { padding: 0; margin-top: auto; }
.admin .admin-media > li > details > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard);
}
.admin .admin-media > li > details > summary::-webkit-details-marker { display: none; }
.admin .admin-media > li > details > summary:hover { background: var(--surface-sunken); color: var(--navy); }
.admin .admin-media > li > details[open] > summary { color: var(--navy); }
.admin .admin-media > li > details > form { display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-3); }
.admin .admin-media > li > details > form + form { padding-top: 0; }
.admin .media-upload { display: grid; gap: var(--space-5); }
.admin .media-upload > .form-actions { margin: 0; padding: 0; border: 0; }
.library-pick label { display: block; margin: 0; cursor: pointer; }
.library-pick .pick-row { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.library-pick .pick-row input { width: 18px; height: 18px; accent-color: var(--navy); }
.library-pick > li { transition: border-color var(--dur-state) var(--ease-standard); }
.library-pick > li:has(input:checked) { border-color: var(--orange); }

/* --- Zona de risco ---------------------------------------------------------
   Escondida atrás de um disclosure, com confirmação digitada e aviso do que
   é apagado. O ícone de alerta carrega o significado junto do texto. */
.admin .danger-zone { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.admin .danger-zone > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard);
}
.admin .danger-zone > summary::-webkit-details-marker { display: none; }
.admin .danger-zone > summary:hover { background: var(--surface-sunken); color: var(--navy); }
.admin .danger-zone > summary .ico { color: var(--orange); }
.admin .danger-zone > form {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--sand);
  border-radius: var(--radius-control);
  background: var(--surface-warm);
}
.danger-note { margin: 0 0 var(--space-4); max-width: var(--measure-narrow); font-size: var(--text-sm); font-weight: 500; }

/* --- Aviso e erro ----------------------------------------------------------
   Alinhados ao mesmo eixo do conteúdo, com filete lateral. Erro tem filete
   mais grosso e o texto sempre diz o que houve — não é só cor. */
.admin #hx-fragment > .flash, .admin #hx-fragment > .error {
  max-width: var(--container-max);
  margin: var(--space-5) max(var(--page-gutter), calc((100% - var(--container-max)) / 2)) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--sand);
  font-size: var(--text-sm);
  font-weight: 500;
}
.admin #hx-fragment > .error { border-left-width: 5px; border-left-color: var(--orange); }
.admin .admin-section .flash {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--sand);
  border-left: 3px solid var(--orange);
  background: var(--surface-warm);
  font-size: var(--text-sm);
  font-weight: 500;
}
.admin .admin-section .flash .ico { flex: none; color: var(--orange); }

/* --- Entrada no painel -----------------------------------------------------
   Login ainda é a porta da marca, mas a coluna da direita já é software: um
   cartão, campos de largura cheia e uma única ação. */
.login-grid { align-items: center; min-height: 0; }
.login-story { border-radius: var(--radius-card); }
.login-story h1 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }
.login-facts { display: grid; gap: var(--space-3); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.login-facts li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--on-dark-muted); font-size: var(--text-sm); }
.login-facts .ico { flex: none; margin-top: 2px; color: var(--sand); }
.login-card {
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-2);
}
.login-card h2 { margin-bottom: var(--space-2); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
.login-lead { margin-bottom: 0; color: var(--muted); font-size: var(--text-sm); }
.login-card form { margin: var(--space-5) 0 0; }
.login-card .field { margin-bottom: var(--space-5); }
.login-card .field > label { margin-bottom: 0; font-weight: 600; }
.login-card input { width: 100%; }
.login-card .hint { display: block; color: var(--muted); font-size: var(--text-xs); }
.login-card .flash, .login-card .error {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  font-size: var(--text-sm);
}
.login-panel > .text-link { margin-top: var(--space-3); }

/* --- Adaptação por largura -------------------------------------------------
   Abaixo de 768px a tabela deixa de rolar na horizontal e vira uma pilha de
   cartões: cada célula carrega o próprio rótulo (`.cell-label`), que existe no
   markup e não em `::before` — o nome da coluna continua real, não decorativo. */
@media (max-width: 1023px) {
  .admin .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .admin .page-heading { align-items: stretch; gap: var(--space-4); }
  .admin .heading-actions { justify-content: flex-start; }
  .admin .heading-actions .btn { flex: 1 1 12rem; }
  .admin .panel, .admin .form-panel { padding: var(--space-5); }
  .admin .form-panel > .form-actions:last-child {
    margin: var(--space-5) calc(var(--space-5) * -1) calc(var(--space-5) * -1);
    padding: var(--space-4) var(--space-5);
  }
  .admin .form-panel > .form-actions > .btn,
  .admin .form-panel > .form-actions > form { flex: 1 1 100%; }
  .admin .form-panel > .form-actions > form .btn,
  .admin .form-panel > .form-actions > form button { width: 100%; }
  .admin .form-panel .input-short { max-width: none; }

  .admin .table-wrap { max-height: none; overflow: visible; border: 0; background: none; box-shadow: none; }
  .admin table { display: block; min-width: 0; }
  .admin thead { display: none; }
  .admin tbody { display: block; }
  .admin tbody tr {
    display: block;
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--white);
    box-shadow: var(--shadow-1);
  }
  .admin tbody tr:hover, .admin tbody tr:focus-within { box-shadow: inset 3px 0 0 var(--orange), var(--shadow-1); }
  .admin tbody tr:has(td.empty) { padding: 0; border: 0; background: none; box-shadow: none; }
  .admin td { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 0; }
  .admin td.num { justify-content: flex-start; text-align: left; }
  .admin td:first-child { padding-top: 0; }
  .admin td.row-actions { display: block; padding-top: var(--space-4); }
  .admin td.row-actions .btn { width: 100%; }
  .admin .table-work { min-width: 0; }
  .cell-label {
    display: block;
    flex: 0 0 8rem;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .admin .admin-media { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .admin .empty-state { padding: var(--space-6) 0; }
  .login-story { order: 2; }
  .login-facts { margin-top: var(--space-5); }
}
@media (max-width: 479px) {
  .cell-label { flex: 0 0 6.5rem; }
}
@media (max-width: 379px) {
  .admin .counts { grid-template-columns: minmax(0, 1fr); }
}

/* Movimento reduzido: nada de deslizar marcador, ícone ou linha. A regra
   global acima já zera `transition`; aqui os estados finais são fixados para
   que o marcador de rota continue visível sem depender de transform animado. */
@media (prefers-reduced-motion: reduce) {
  .admin .desktop-navigation a::after { transition: none; }
  .admin .counts li:hover .count-link .ico,
  .admin .breadcrumb:hover .ico,
  .btn-icon:active { transform: none; }
}