:root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f5f6f1;
    color: #121a2a;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.installer-shell { display: grid; grid-template-columns: minmax(300px, 31vw) 1fr; min-height: 100vh; }
.installer-aside { position: sticky; top: 0; display: flex; flex-direction: column; gap: 48px; height: 100vh; padding: 36px; color: #f9fafb; background: #111827; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 44px; }
.brand img { display: block; box-sizing: content-box; width: 112px; height: auto; padding: 8px; border-radius: 8px; background: #fff; }
.brand span { margin-left: 8px; padding: 3px 6px; border: 1px solid #516047; border-radius: 4px; color: #dffbb1; font-size: .625rem; letter-spacing: .08em; }
.installer-aside h2 { max-width: 11ch; margin: 0; font-size: clamp(2rem, 3.1vw, 3.25rem); line-height: 1.05; letter-spacing: -.055em; }
.aside-copy { max-width: 32ch; margin: 16px 0 0; color: #bac2d1; line-height: 1.6; }
.steps { display: grid; gap: 22px; margin: auto 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; color: #8a94a8; }
.steps li[hidden] { display: none !important; }
.steps span { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; font-size: .8rem; }
.steps strong { align-self: end; color: inherit; font-size: .9rem; }
.steps small { margin-top: 2px; font-size: .75rem; }
.steps li.active { color: #f9fafb; }
.steps li.active span { border-color: #b7f34a; background: #b7f34a; color: #111827; font-weight: 800; }
.steps li.complete { color: #f9fafb; }
.steps li.complete span { border-color: #b7f34a; background: #b7f34a; color: #111827; font-weight: 800; }
.security-note { margin: 0; padding-top: 18px; border-top: 1px solid #30394a; color: #aab4c6; font-size: .75rem; }
.installer-main { min-width: 0; background: #f5f6f1; }
.installer-heading { position: sticky; top: 0; z-index: 1; display: grid; gap: 8px; padding: 36px clamp(24px, 6vw, 88px) 22px; border-bottom: 1px solid #d9ddd3; background: #f5f6f1; }
.eyebrow { margin: 0; color: #517013; font-size: .75rem; font-weight: 800; letter-spacing: .1em; }
.heading-kicker { margin: 0; font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 800; letter-spacing: -.045em; }
.status { width: min(760px, calc(100% - 48px)); margin: 0 auto; padding: clamp(32px, 5vw, 72px) 0; }
.status > h1 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; }
.status > p:not(.eyebrow) { max-width: 62ch; margin: 10px 0 30px; color: #5f6775; line-height: 1.6; }
.completion { display: grid; justify-items: start; gap: 14px; max-width: 620px; padding: clamp(12px, 2vw, 24px) 0; }
.completion-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0; border-radius: 50%; background: #b7f34a; color: #111827; font-size: 1.5rem; font-weight: 900; }
.completion h1 { margin: 0; font-size: 2rem; letter-spacing: -.04em; }
.completion > p:not(.step-label):not(.completion-mark) { margin: 0; color: #5f6775; line-height: 1.6; }
.completion-next { display: grid; gap: 4px; width: 100%; margin-top: 12px; padding: 16px; border: 1px solid #d9ddd3; border-radius: 10px; background: #fbfcf8; color: #5f6775; line-height: 1.5; }
.completion-next strong { color: #283246; }
.section-title { margin: 34px 0 14px; font-size: 1rem; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.checks > div { display: grid; grid-template-columns: 28px 1fr; gap: 1px 8px; align-items: center; min-height: 68px; border: 1px solid #d9ddd3; border-radius: 10px; background: #fbfcf8; padding: 12px; }
.checks span { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e6f7c9; color: #527117; font-size: .75rem; font-weight: 800; }
.checks strong { font-size: .8rem; }
.checks small { color: #687181; font-size: .75rem; }
form { display: grid; gap: 18px; }
.install-step { display: grid; gap: 18px; }
form[data-wizard-ready="true"] .install-step { display: none; }
form[data-wizard-ready="true"] .install-step.active { display: grid; }
.install-step[hidden] { display: none !important; }
.step-copy { margin: -4px 0 4px; color: #5f6775; line-height: 1.55; }
.step-intro { display: grid; gap: 6px; }
.step-intro .section-title { margin: 0; font-size: 1.35rem; }
.step-label { margin: 0; color: #517013; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.db-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.identity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.identity-grid input[type="color"] { padding: 6px; cursor: pointer; }
.db-grid label { grid-template-rows: auto 48px; align-content: start; }
.db-block { gap: 16px; padding: 20px; background: #fbfcf8; }
.db-block legend { color: #283246; font-size: .8rem; font-weight: 800; }
.table-preview { margin: 0; color: #5f6775; font-size: .825rem; line-height: 1.5; }
.table-preview code { display: inline-block; padding: 2px 6px; border-radius: 4px; background: #e6f7c9; color: #355107; font-weight: 800; }
.db-note { margin: -8px 0 2px; color: #687181; font-size: .75rem; line-height: 1.5; }
.access-note { margin: -2px 0 0; color: #5f6775; font-size: .825rem; line-height: 1.5; }
.password-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.password-tools button { min-width: auto; margin: 0; }
.password-strength { display: grid; grid-template-columns: 116px 1fr; gap: 10px; align-items: center; margin: 0; color: #5f6775; font-size: .75rem; }
.strength-track { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: #d9ddd3; }
.strength-track span { display: block; width: 0; height: 100%; background: #c2410c; transition: background 160ms ease; }
.password-strength.medium .strength-track span { background: #b7791f; }
.password-strength.strong .strength-track span { background: #517013; }
.password-suggestion { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 8px; background: #e6f7c9; color: #355107; font-size: .75rem; }
.password-suggestion code { overflow-wrap: anywhere; color: #243b08; font-size: .825rem; font-weight: 800; }
.password-suggestion button { min-width: auto; margin: 0; border-color: #91bc45; background: #f8fff0; color: #355107; }
.step-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.step-actions button { min-width: 124px; }
button.secondary { border: 1px solid #cfd5c8; background: transparent; color: #283246; }
button.secondary:hover { background: #e9ede3; }
.review { display: grid; gap: 16px; margin: 0; }
.review section { border: 1px solid #d9ddd3; border-radius: 10px; overflow: hidden; background: #fbfcf8; }
.review h3 { margin: 0; padding: 12px 16px; border-bottom: 1px solid #d9ddd3; color: #283246; font-size: .825rem; }
.review dl { margin: 0; }
.review div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #d9ddd3; }
.review div:last-child { border-bottom: 0; }
.review dt { color: #687181; }
.review dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.field-help { color: #687181; font-size: .75rem; font-weight: 400; }
label, fieldset { display: grid; gap: 8px; color: #283246; font-size: .875rem; font-weight: 700; }
fieldset { margin: 4px 0; border: 1px solid #cfd5c8; border-radius: 10px; padding: 18px; }
legend { padding: 0 6px; color: #5f6775; }
input, select, button { height: 48px; min-height: 48px; border-radius: 8px; font: inherit; }
input, select { width: 100%; border: 1px solid #cfd5c8; background: #fff; color: #121a2a; padding: 0 12px; }
select {
    appearance: none;
    padding-right: 40px;
    background-image: url("/assets/select-chevron.svg");
    background-position: right 12px center;
    background-repeat: no-repeat;
}
input:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid #b7f34a; outline-offset: 3px; }
button { margin-top: 10px; border: 0; background: #111827; color: #f9fafb; cursor: pointer; font-weight: 800; padding: 0 18px; transition: transform 160ms ease, background 160ms ease; }
button:hover { background: #26334b; transform: translateY(-1px); }
button:active { transform: translateY(0); }
.errors { margin: 0 0 8px; border: 1px solid #f0b6a0; background: #fff1e8; color: #7c2d12; padding: 14px; line-height: 1.5; }
.connection-result { display: none; margin: -4px 0 0; padding: 12px; border-radius: 8px; font-size: .825rem; font-weight: 700; line-height: 1.45; }
.connection-result.visible { display: block; }
.connection-result.success { background: #e6f7c9; color: #355107; }
.connection-result.error { background: #fff1e8; color: #7c2d12; }

@media (max-width: 780px) {
    .installer-shell { grid-template-columns: 1fr; }
    .installer-aside { position: static; gap: 22px; height: auto; min-height: auto; padding: 24px; }
    .installer-heading { position: static; }
    .brand { margin-bottom: 22px; }
    .installer-aside h2 { max-width: 18ch; font-size: 2rem; }
    .steps { grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0; }
    .steps li { display: block; text-align: center; }
    .steps span { margin: auto; }
    .steps strong, .steps small { display: none; }
    .security-note { display: none; }
    .status { width: min(100% - 32px, 760px); }
    .checks { grid-template-columns: 1fr; }
    .db-grid { grid-template-columns: 1fr; }
    .identity-grid { grid-template-columns: 1fr; }
    .password-tools { align-items: flex-start; flex-direction: column; }
    .password-strength { width: 100%; }
    .password-suggestion { grid-template-columns: 1fr; }
    .password-suggestion button { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.auth-page { min-height:100vh; background:color-mix(in srgb,var(--auth-primary,#111827) 5%,#f5f6f1); }
.login-shell { display:grid; grid-template-columns:minmax(320px,42vw) 1fr; min-height:100vh; background:color-mix(in srgb,var(--auth-primary,#111827) 7%,#f5f6f1); }
.login-aside { display:flex; flex-direction:column; align-items:flex-start; padding:clamp(32px,6vw,88px); color:var(--auth-on-primary,#f9fafb); background:var(--auth-primary,#111827); }
.login-aside img { box-sizing:content-box; width:144px; padding:8px; border-radius:8px; background:#fff; }.login-product{margin:18px 0 auto;font-size:1.1rem;font-weight:800}.login-aside h2{max-width:10ch;margin:0;font-size:clamp(2rem,4vw,4rem);line-height:1.02;letter-spacing:-.05em}.login-aside>p:not(.login-product){max-width:34ch;color:color-mix(in srgb,var(--auth-on-primary,#fff) 72%,transparent);line-height:1.6}.login-aside small{margin-top:36px;color:var(--auth-accent,#b7f34a)}
.auth-card { display:grid; align-content:center; gap:16px; width:min(100% - 48px,520px); margin:auto; padding:48px; border:1px solid color-mix(in srgb,var(--auth-primary,#111827) 32%,#fff); border-radius:16px; background:#fff; box-shadow:0 2px 8px color-mix(in srgb,var(--auth-primary,#111827) 8%,transparent),0 24px 48px color-mix(in srgb,var(--auth-primary,#111827) 10%,transparent); color:var(--auth-font,#121a2a); }.auth-card h1,.auth-card p,.auth-card label{color:var(--auth-font,#121a2a);}
.auth-card h1,.auth-card p { margin:0; }.auth-card form { display:grid; gap:16px; }.auth-error,.auth-success,.auth-notice{padding:12px;border-radius:8px;line-height:1.5}.auth-error{background:#fff1e8;color:#7c2d12}.auth-success{background:#e6f7c9;color:#355107}.auth-notice{background:#e9ede3;color:#283246}.auth-link{color:#355107;font-weight:800}
.auth-forgot-link{justify-self:start;margin-top:-8px;color:var(--auth-primary,#517013);font-size:.825rem;font-weight:500;text-decoration:underline;text-underline-offset:3px}.auth-forgot-link:hover{color:var(--auth-font,#283246)}.auth-forgot-link:focus-visible{outline:3px solid var(--auth-accent,#b7f34a);outline-offset:3px}
.auth-outline-link{display:grid;place-items:center;width:100%;min-height:48px;border:1px solid #cfd5c8;border-radius:8px;color:#283246;font-weight:700;text-decoration:none;transition:background 160ms ease,border-color 160ms ease}.auth-outline-link:hover{border-color:#aab4a0;background:#e9ede3}.auth-outline-link:focus-visible{outline:3px solid #b7f34a;outline-offset:3px}
.auth-outline-button{width:100%;margin:0;border:1px solid #cfd5c8;background:transparent;color:#283246}.auth-outline-button:hover{background:#e9ede3}.auth-outline-button:disabled{cursor:not-allowed;border-color:#d9ddd3;background:#f5f6f1;color:#8a94a8;transform:none}.recovery-cooldown{font-size:.825rem;color:#5f6775}.recovery-complete form{margin:0}
.recovery-flow,.recovery-complete{display:grid;gap:20px}.recovery-flow h1,.recovery-complete h1{font-size:2rem;letter-spacing:-.035em;text-wrap:balance}.recovery-lead{max-width:43ch;color:#5f6775;line-height:1.6}.recovery-steps{display:grid;gap:12px;margin:4px 0 2px;padding:0;list-style:none}.recovery-steps li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start}.recovery-steps span,.recovery-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e6f7c9;color:#355107;font-size:.75rem;font-weight:900}.recovery-steps strong,.recovery-steps small{display:block}.recovery-steps strong{color:#283246;font-size:.875rem}.recovery-steps small{margin-top:3px;color:#687181;font-size:.8rem;line-height:1.45}.recovery-flow form{margin-top:6px}.recovery-flow .field-help{margin-top:-8px}.recovery-back{width:100%;margin-top:2px}.recovery-complete{max-width:45ch}.recovery-complete .recovery-mark{width:52px;height:52px;font-size:1.35rem}.recovery-complete>p:not(.step-label){color:#5f6775;line-height:1.6}.recovery-note{padding:12px;border-radius:8px;background:#e9ede3;color:#4b5563!important;font-size:.825rem}.auth-button-link{display:grid;place-items:center;min-height:48px;border-radius:8px;background:#111827;color:#f9fafb;font-weight:800;text-decoration:none}.auth-button-link:hover{background:#26334b}
@media(max-width:780px){.login-shell{grid-template-columns:1fr}.login-aside{min-height:260px;padding:32px}.login-aside h2{font-size:2rem}.login-aside small{margin-top:auto}.auth-card{padding:32px 24px}}

.app-page { min-height: 100vh; background: #f5f6f1; }
.app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.app-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 24px 14px 16px; border-right: 1px solid #d9ddd3; background: #fbfcf8; }
.app-brand { display: flex; align-items: center; gap: 10px; padding: 8px 10px 24px; color: #121a2a; font-weight: 800; text-decoration: none; }
.app-brand img { width: 34px; height: auto; }
.app-site { display: grid; gap: 4px; margin: 0 10px 24px; padding: 12px; border: 1px solid #d9ddd3; border-radius: 8px; background: #fff; }
.app-site small, .app-nav-group > p { margin: 0; color: #687181; font-size: .65rem; font-weight: 800; letter-spacing: .09em; }
.app-site strong { overflow: hidden; color: #283246; font-size: .825rem; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar nav { display: grid; gap: 20px; overflow-y: auto; }
.app-nav-group { display: grid; gap: 3px; }
.app-nav-group > p { padding: 0 10px 6px; }
.app-nav-group a { min-height: 38px; padding: 10px; border-radius: 6px; color: #5f6775; font-size: .825rem; font-weight: 650; text-decoration: none; transition: background 160ms ease, color 160ms ease; }
.app-nav-group a:hover { background: #e9ede3; color: #283246; }
.app-nav-group a[aria-current="page"] { background: #e6f7c9; color: #355107; }
.app-nav-group a:focus-visible, .app-account a:focus-visible, .app-primary-action:focus-visible, .app-outline-action:focus-visible, .section-heading a:focus-visible { outline: 3px solid #b7f34a; outline-offset: 3px; }
.app-account { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: auto; padding: 16px 10px 4px; border-top: 1px solid #d9ddd3; color: #5f6775; font-size: .75rem; }
.app-account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-account a { color: #355107; font-weight: 800; text-decoration: none; }
.app-main { min-width: 0; }
.app-header { padding: 38px clamp(24px, 5vw, 72px) 28px; border-bottom: 1px solid #d9ddd3; background: #f5f6f1; }
.app-header h1 { margin: 7px 0 8px; font-size: 2rem; letter-spacing: -.045em; }
.app-header > div > p:last-child { max-width: 58ch; margin: 0; color: #5f6775; line-height: 1.55; }
.app-content { width: min(calc(100% - 48px), 1060px); margin: 0 auto; padding: 36px 0 64px; }
.dashboard-welcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .42fr); gap: 32px; padding: clamp(24px, 4vw, 44px); border: 1px solid #d9ddd3; border-radius: 12px; background: #fff; }
.dashboard-welcome h2, .dashboard-section h2, .empty-panel h2 { margin: 8px 0 10px; color: #121a2a; font-size: 1.5rem; letter-spacing: -.035em; }
.dashboard-welcome p:not(.step-label), .empty-panel > p:not(.step-label):not(.empty-panel-mark) { max-width: 52ch; margin: 0; color: #5f6775; line-height: 1.6; }
.app-primary-action, .app-outline-action { display: inline-grid; place-items: center; min-height: 44px; margin-top: 24px; padding: 0 16px; border-radius: 7px; font-size: .825rem; font-weight: 800; text-decoration: none; transition: background 160ms ease, transform 160ms ease; }
.app-primary-action { background: #111827; color: #f9fafb; }.app-primary-action:hover { background: #26334b; transform: translateY(-1px); }
.dashboard-welcome aside { display: grid; align-content: end; gap: 8px; padding: 18px; border-radius: 8px; background: #111827; color: #f9fafb; }
.dashboard-welcome aside span { color: #b7f34a; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.dashboard-welcome aside strong { font-size: 1.05rem; }.dashboard-welcome aside small { color: #bac2d1; }
.dashboard-section { margin-top: 42px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }.section-heading h2 { margin-bottom: 0; }.section-heading a { color: #355107; font-size: .825rem; font-weight: 800; text-decoration: none; }
.shortcut-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.shortcut-grid a { position: relative; display: grid; gap: 10px; min-height: 174px; padding: 20px; border: 1px solid #d9ddd3; border-radius: 10px; background: #fbfcf8; color: #283246; text-decoration: none; transition: border-color 160ms ease, transform 160ms ease, background 160ms ease; }.shortcut-grid a:hover { border-color: #aab4a0; background: #fff; transform: translateY(-2px); }.shortcut-grid a:focus-visible { outline: 3px solid #b7f34a; outline-offset: 3px; }.shortcut-grid strong { font-size: .95rem; }.shortcut-grid span { color: #687181; font-size: .825rem; line-height: 1.5; }.shortcut-grid b { align-self: end; color: #517013; font-size: 1.1rem; }
.dashboard-status { padding-top: 6px; }.status-metrics { display: flex; gap: 0; overflow: hidden; border: 1px solid #d9ddd3; border-radius: 10px; background: #fff; }.status-metrics div { display: grid; flex: 1; gap: 5px; padding: 18px 20px; border-right: 1px solid #d9ddd3; }.status-metrics div:last-child { border-right: 0; }.status-metrics strong { color: #283246; font-size: 1.25rem; }.status-metrics span { color: #687181; font-size: .8rem; }
.empty-panel { display: grid; justify-items: start; gap: 8px; max-width: 650px; padding: 52px 0; }.empty-panel-mark { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 0 10px; border: 1px solid #b7d785; border-radius: 50%; color: #517013; font-size: 1.5rem; }.empty-panel h2 { margin: 0; }.app-outline-action { border: 1px solid #cfd5c8; color: #283246; }.app-outline-action:hover { background: #e9ede3; }
@media (max-width: 780px) { .app-shell { grid-template-columns: 1fr; }.app-sidebar { position: static; height: auto; padding: 16px; border-right: 0; border-bottom: 1px solid #d9ddd3; }.app-brand { padding-bottom: 14px; }.app-site { margin-bottom: 16px; }.app-sidebar nav { display: flex; gap: 18px; overflow-x: auto; }.app-nav-group { min-width: max-content; }.app-account { display: none; }.app-header { padding: 28px 24px 22px; }.app-content { width: min(calc(100% - 32px), 1060px); padding-top: 24px; }.dashboard-welcome { grid-template-columns: 1fr; gap: 20px; }.shortcut-grid { grid-template-columns: 1fr; }.shortcut-grid a { min-height: 132px; }.status-metrics { display: grid; grid-template-columns: 1fr; }.status-metrics div { border-right: 0; border-bottom: 1px solid #d9ddd3; }.status-metrics div:last-child { border-bottom: 0; } }

/* Painel: estrutura alinhada ao CMS de referência. */
.app-shell { grid-template-columns: 246px minmax(0, 1fr); background: #fff; }
.app-sidebar { z-index: 2; padding: 14px 10px 12px; border-right-color: #e7e9ed; background: #fff; }
.app-brand { justify-content: space-between; padding: 8px 12px 20px; }.app-brand img { width: 128px; }.app-brand span { padding: 4px 7px; border-radius: 5px; background: #eef0f3; color: #283246; font-size: .6rem; letter-spacing: .07em; }
.app-create-action { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; margin: 0 2px 12px; border-radius: 7px; background: #111827; color: #fff; font-size: .8rem; font-weight: 800; text-decoration: none; }.app-create-action:hover { background: #26334b; }.app-create-action:focus-visible { outline: 3px solid #b7f34a; outline-offset: 3px; }.app-create-action b { font-size: 1.1rem; font-weight: 400; }
.app-sidebar nav { display: grid; gap: 12px; padding: 0 2px; }.app-nav-group { gap: 5px; }.app-nav-group > p { padding: 0 14px 3px; color: #7c8491; }.app-nav-group > div { display: grid; gap: 1px; padding: 7px; border: 1px solid #edf0f2; border-radius: 10px; }.app-nav-group a { display: flex; align-items: center; gap: 10px; min-height: 37px; padding: 8px; border-radius: 6px; color: #505966; font-weight: 550; }.app-nav-group a .fa-solid { width: 15px; flex: 0 0 15px; color: currentColor; font-size: .85rem; opacity: .78; text-align: center; }.app-nav-group a:hover { background: #f4f6f8; color: #202938; }.app-nav-group a[aria-current="page"] { background: #f0f9e3; color: #3d6611; }
.app-account { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; min-height: 58px; margin: 12px 2px 0; padding: 10px; border: 1px solid #edf0f2; border-radius: 9px; color: #202938; }.app-account strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }.app-account a { color: #687181; font-size: 1rem; }.app-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #111827; color: #fff; font-size: .65rem; font-weight: 800; }
.app-main { background: #fafbfc; }.app-topbar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 10px 28px; border-bottom: 1px solid #e7e9ed; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }.app-search { display: flex; align-items: center; gap: 9px; width: min(440px, 55vw); min-height: 36px; margin: 0; padding: 0 11px; border: 1px solid #e2e5e9; border-radius: 7px; background: #fff; color: #8a94a0; font-size: .78rem; font-weight: 500; text-align: left; cursor: default; transform: none; }.app-search:hover { background: #fff; transform: none; }.app-search .fa-solid { color: #687181; font-size: .85rem; }.app-search kbd { margin-left: auto; padding: 2px 5px; border: 1px solid #e0e3e7; border-radius: 4px; color: #78818e; font: inherit; font-size: .65rem; }.app-top-actions { display: flex; align-items: center; gap: 8px; }.app-top-actions button { display: grid; place-items: center; width: 36px; min-width: 36px; height: 36px; min-height: 36px; margin: 0; padding: 0; border: 1px solid #e2e5e9; border-radius: 7px; background: #fff; color: #505966; font-size: .95rem; }.app-top-actions button:disabled { cursor: default; opacity: 1; }.app-top-actions .app-avatar { margin-left: 6px; }
.app-header { padding: 28px 0 22px; border-bottom: 0; background: transparent; }.app-header > div { width: min(calc(100% - 48px), 1060px); margin: 0 auto; }.app-header h1 { margin:0; font-size:1.8rem; }.app-header-inner > div:first-child { display:grid; gap:8px; }.app-header-inner > div:first-child > p { margin:0; }.app-content { padding-top: 16px; }
.app-header-inner { display:flex; align-items:end; justify-content:space-between; gap:24px; }.app-header-inner .app-primary-action { margin:0; white-space:nowrap; }
@media (max-width: 780px) { .app-sidebar { padding: 12px; }.app-brand img { width: 100px; }.app-sidebar nav { display: block; max-height: 250px; overflow: auto; }.app-nav-group { margin-bottom: 10px; }.app-account { display: none; }.app-topbar { padding: 10px 16px; }.app-search { width: calc(100vw - 150px); }.app-search kbd { display: none; }.app-header { padding: 22px 0 14px; }.app-header > div { width: calc(100% - 32px); } }
.content-list-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }.content-list-heading h2 { margin:7px 0 8px; font-size:1.5rem; letter-spacing:-.035em; }.page-form h2 { margin:0; font-size:1.5rem; letter-spacing:-.035em; }.content-list-heading p:not(.step-label),.page-form>p:not(.step-label) { margin:0; color:#5f6775; line-height:1.55; }.content-list-heading .app-primary-action { margin:0; white-space:nowrap; }.content-table-wrap { overflow-x:auto; border:1px solid #d9ddd3; border-radius:10px; background:#fff; }.content-table { width:100%; border-collapse:collapse; text-align:left; }.content-table th,.content-table td { padding:20px 24px; border-bottom:1px solid #e8ebe6; font-size:.825rem; }.content-table th { color:#687181; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; }.content-table tr:last-child td { border-bottom:0; }.content-table td strong,.content-table td small { display:block; }.content-table td small { margin-top:4px; color:#687181; }.content-status { display:inline-flex; padding:5px 8px; border-radius:999px; background:#edf0f2; color:#505966; font-size:.72rem; font-weight:800; }.content-status.published { background:#e6f7c9; color:#355107; }.content-status.review { background:#fff1d6; color:#875b0b; }.page-form { display:grid; gap:18px; width:100%; }.page-form form { width:100%; padding:24px; border:1px solid #d9ddd3; border-radius:10px; background:#fff; }.page-form form button { margin:0; }.page-form-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.page-form-actions .app-outline-action { margin:0; }.page-form-actions button { width:100%; }.post-content-fields { display:grid; gap:16px; padding:24px; border:1px solid #d9ddd3; border-radius:10px; background:#fff; }.post-content-fields .field-form-section-heading { margin:0; }.post-content-fields > label { margin:0; }
.content-list-heading:has(> .app-primary-action:only-child) { justify-content:flex-end; }.content-list-heading-actions { display:flex; align-items:center; gap:var(--space-2); }.content-list-heading-actions .app-primary-action,.content-list-heading-actions .app-outline-action { margin:0; }
.permission-reference { display:grid; gap:var(--space-4); margin-top:var(--space-5); padding:var(--space-5); border:1px solid #d9ddd3; border-radius:var(--radius-md); background:#fff; }.permission-reference > div { display:grid; gap:var(--space-2); max-width:760px; }.permission-reference h2,.permission-reference p { margin:0; }.permission-reference h2 { color:#202938; font-size:var(--text-md); letter-spacing:-.03em; }.permission-reference p:not(.step-label) { color:#5f6775; line-height:1.65; }.permission-reference .step-label { margin-bottom:var(--space-1); }
.user-form { display:grid; gap:var(--space-4); padding:0 !important; border:0 !important; background:transparent !important; }.user-page-form { max-width:820px; }.user-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:var(--space-4); }.user-form-grid label { min-width:0; align-content:start; }.user-form .field-form-section { gap:var(--space-4); padding:var(--space-5); }.user-form .field-form-section-heading { padding-bottom:var(--space-1); border-bottom:1px solid #e3e7e1; }.user-form .password-tools { align-items:end; }.user-form .password-tools button { white-space:nowrap; }.user-form .password-strength { flex:1; }.user-form .password-suggestion { margin:0; }.user-form .page-form-actions { margin-top:0; }
.role-help-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3) var(--space-4); width:100%; box-sizing:border-box; margin:var(--space-1) 0 0; padding:var(--space-3); border:1px solid #dfe4dc; border-radius:var(--radius-sm); background:#f8faf6; list-style:none; }.role-help-list li { display:grid; gap:2px; }.role-help-list strong { color:#283246; font-size:var(--text-xs); }.role-help-list span { color:#687181; font-size:var(--text-xs); font-weight:400; line-height:1.4; }
.user-page-form { width:100%; max-width:none; }.user-form .field-form-section { width:100%; box-sizing:border-box; }
.app-content:has(.user-page-form),.app-header:has(+ .app-content .user-page-form) > div { width:calc(100% - 48px); max-width:none; }
@media (max-width:780px) { .user-form-grid { grid-template-columns:1fr; gap:var(--space-3); }.user-form .field-form-section { padding:var(--space-4); }.user-form .password-tools { align-items:stretch; flex-direction:column; }.user-form .password-tools button { width:100%; }.user-form .password-strength { width:100%; }.user-form .password-suggestion { grid-template-columns:1fr; }.user-form .password-suggestion button { width:100%; }.role-help-list { grid-template-columns:1fr; } }
.content-title-link { color:#283246; text-decoration:none; }.content-title-link:hover strong { color:#517013; text-decoration:underline; text-underline-offset:3px; }.content-title-link:focus-visible { outline:3px solid #b7f34a; outline-offset:3px; }
.table-icon-action { display:grid; place-items:center; width:34px; height:34px; border:1px solid #d9ddd3; border-radius:7px; color:#505966; text-decoration:none; }.table-icon-action:hover { border-color:#aab4a0; background:#f4f6f8; color:#283246; }.table-icon-action:focus-visible { outline:3px solid #b7f34a; outline-offset:3px; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.sections-panel { display:grid; gap:16px; margin-top:26px; padding-top:26px; border-top:1px solid #d9ddd3; }.sections-panel h2 { margin:7px 0; font-size:1.2rem; }.sections-panel p:not(.step-label) { margin:0; color:#5f6775; }.add-section { grid-template-columns:minmax(0,1fr) auto; align-items:end; }.add-section button { margin:0; }.section-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }.section-list li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px; border:1px solid #d9ddd3; border-radius:8px; background:#fbfcf8; }.section-list span { display:flex; gap:8px; }.section-list form { display:block; margin:0; padding:0; border:0; background:transparent; }.section-icon { width:48px; min-width:48px; height:48px; min-height:48px; margin:0; padding:0; background:#fff; }.section-icon.danger { color:#a13c21; }.section-empty { color:#687181; }
.section-list li[draggable="true"] { cursor:grab; }.section-list li.is-dragging { opacity:.5; }.section-list li.is-drop-target { border-color:#91bc45; background:#f5fce9; }.section-handle { color:#8a94a0; }
.section-list li { justify-content:flex-start; text-align:left; }.section-list li > span:last-child { margin-left:auto; }
@media(max-width:780px){.add-section{grid-template-columns:1fr}.add-section button{width:100%}}
.content-table th:last-child,.content-table td:last-child { width:80px; padding-left:0; text-align:right; }.content-table .table-icon-action { margin-left:auto; }
.content-table-actions { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); }.content-table-actions form { display:contents; }.content-table-actions .table-icon-action { margin:0; }.content-table-actions .table-icon-action > i { display:block; line-height:1; }.field-blocks-table th:last-child,.field-blocks-table td:last-child { width:112px; }.table-icon-action.danger { color:#a13c21; }
.table-icon-action.is-disabled { border-color:#e2e5df; background:#f5f6f3; color:#a8afa5; cursor:not-allowed; }
.app-modal { width:min(520px,calc(100% - 32px)); margin:auto; padding:0; border:1px solid #d9ddd3; border-top:4px solid #b7f34a; border-radius:var(--radius-md); background:#fff; color:#202938; box-shadow:0 16px 48px rgba(18,26,42,.2); }.app-modal::backdrop { background:rgba(18,26,42,.42); }.app-modal-card { display:grid; gap:var(--space-5); padding:var(--space-5); }.app-modal-header { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:start; gap:var(--space-3); }.app-modal-header > div { display:grid; gap:var(--space-1); }.app-modal-header .step-label,.app-modal-header h2,.app-modal-header p { margin:0; }.app-modal-header h2 { font-size:var(--text-md); letter-spacing:-.03em; }.app-modal-header p:not(.step-label) { color:#687181; font-size:var(--text-xs); line-height:1.5; }.app-modal-icon { display:grid; place-items:center; width:48px; height:48px; border:1px solid #e6d28b; border-radius:var(--radius-sm); background:#fff7d6; color:#875b0b; }.app-modal-header > .table-icon-action { margin:0; background:#fff; }.app-modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }.app-modal-actions button { width:100%; margin:0; }.app-modal-actions .app-outline-action { border-color:#687181; background:#fff; color:#202938; }.app-modal-actions .app-outline-action:hover { border-color:#283246; background:#f4f6f8; color:#111827; }.app-danger-action { border:1px solid #111827; background:#111827; color:#fff; }.app-danger-action:hover { border-color:#26334b; background:#26334b; }
@media (max-width:780px) { .app-modal-card { gap:var(--space-4); padding:var(--space-4); }.app-modal-header { grid-template-columns:40px minmax(0,1fr) 40px; gap:var(--space-2); }.app-modal-icon,.app-modal-header > .table-icon-action { width:40px; height:40px; }.app-modal-actions { grid-template-columns:1fr; } }
.field-optional { color:#687181; font-size:var(--text-xs); font-weight:400; }
.field-blocks-table th:last-child,.field-blocks-table td:last-child { width:32%; min-width:260px; padding-left:24px; text-align:left; }
.checkbox-list { display:grid; gap:8px; }.checkbox-row { grid-template-columns:20px 1fr; align-items:center; padding:12px; border:1px solid #d9ddd3; border-radius:8px; background:#fbfcf8; font-weight:400; }.checkbox-row input { width:18px; height:18px; min-height:18px; }.checkbox-row strong,.checkbox-row small { display:block; }.checkbox-row small { margin-top:3px; color:#687181; }

/* Tokens do painel: escala Perfect Fourth e grid de 8 pontos. */
:root { --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:40px; --space-7:48px; --radius-sm:8px; --radius-md:12px; --control-size:48px; --text-xs:12px; --text-sm:16px; --text-md:21px; --text-lg:28px; --text-xl:37px; }
.app-sidebar { padding:var(--space-3) var(--space-2); }.app-brand { gap:var(--space-2); padding:var(--space-2) var(--space-3) var(--space-4); }.app-create-action { min-height:var(--control-size); margin:0 0 var(--space-3); border-radius:var(--radius-sm); }.app-sidebar nav { gap:var(--space-3); }.app-nav-group { gap:var(--space-2); }.app-nav-group > p { padding:0 var(--space-3) var(--space-1); font-size:var(--text-xs); }.app-nav-group > div { gap:var(--space-1); padding:var(--space-2); border-radius:var(--radius-md); }.app-nav-group a { gap:var(--space-2); min-height:var(--control-size); padding:var(--space-2); font-size:var(--text-xs); }.app-account { gap:var(--space-2); min-height:64px; margin:var(--space-3) 0 0; padding:var(--space-2); border-radius:var(--radius-md); }.app-topbar { min-height:64px; padding:var(--space-2) var(--space-4); }.app-search { gap:var(--space-2); min-height:var(--control-size); padding:0 var(--space-3); border-radius:var(--radius-sm); font-size:var(--text-xs); }.app-top-actions { gap:var(--space-2); }.app-top-actions button { width:var(--control-size); min-width:var(--control-size); height:var(--control-size); min-height:var(--control-size); border-radius:var(--radius-sm); }.app-header { padding:var(--space-5) 0 var(--space-4); }.app-header h1 { font-size:var(--text-lg); }.app-header-inner > div:first-child { gap:var(--space-2); }.app-header > div > p:last-child { font-size:var(--text-sm); }.app-header-inner { gap:var(--space-3); }.app-content { padding-top:var(--space-3); }.content-table-wrap,.page-form form { border-radius:var(--radius-md); }.content-table th,.content-table td { padding:var(--space-3) var(--space-4); font-size:var(--text-xs); }.content-table th { font-size:var(--text-xs); }.table-icon-action { width:var(--control-size); height:var(--control-size); border-radius:var(--radius-sm); }.page-form { gap:var(--space-4); }.page-form h2 { font-size:var(--text-md); }.page-form form { padding:var(--space-4); }.page-form-actions { gap:var(--space-2); }.sections-panel { gap:var(--space-3); margin-top:var(--space-4); padding-top:var(--space-4); }.section-list { gap:var(--space-2); }.section-list li { gap:var(--space-3); padding:var(--space-4); border-radius:var(--radius-sm); }.section-list span { gap:var(--space-2); }.checkbox-list { gap:var(--space-2); }.checkbox-row { grid-template-columns:24px 1fr; padding:var(--space-3); border-radius:var(--radius-sm); font-size:var(--text-xs); }.checkbox-row input { width:24px; height:24px; min-height:24px; }
/* Controles, cartões e painel inicial usam os mesmos múltiplos do grid. */
.app-primary-action,.app-outline-action { min-height:var(--control-size); margin-top:var(--space-3); padding:0 var(--space-3); border-radius:var(--radius-sm); font-size:var(--text-xs); }
.page-form > .step-label + h2 { margin-top:calc(var(--space-4) * -1); }
.page-form > h2 + p:not(.step-label) { margin-top:calc(var(--space-4) * -1); }
.app-top-actions .app-avatar { margin-left:var(--space-2); }
.app-search kbd { padding:var(--space-1) var(--space-2); border-radius:var(--space-1); }
.dashboard-welcome { gap:var(--space-5); padding:var(--space-5); border-radius:var(--radius-md); }
.dashboard-welcome + .field-form-section { margin-top:var(--space-5); }
.appearance-color-input { padding:0; overflow:hidden; cursor:pointer; }.appearance-color-input::-webkit-color-swatch-wrapper { padding:0; }.appearance-color-input::-webkit-color-swatch { border:0; }.logo-previews { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }.logo-previews figure { display:grid; gap:var(--space-2); margin:0; }.logo-previews figure:has(img[src=""]) { display:none; }.logo-previews figcaption { color:#687181; font-size:var(--text-xs); font-weight:700; }.logo-previews figure > div { display:grid; place-items:center; min-height:112px; padding:var(--space-4); border:1px solid #dfe4dc; border-radius:var(--radius-sm); background:#fff; }.logo-previews img { max-width:180px; max-height:56px; }.logo-preview-dark > div { background:#111827 !important; }@media(max-width:780px){.logo-previews{grid-template-columns:1fr}}
.appearance-color-row { display:flex; align-items:center; gap:var(--space-2); width:100%; margin-top:0; }.appearance-color-input { width:64px; flex:0 0 64px; }.appearance-hex-input { flex:1; min-width:0; margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; }
.site-logo-upload { align-self:start; display:grid; grid-template-rows:21px 48px minmax(20px,auto); gap:var(--space-2); }.site-logo-upload .file-upload-control { box-sizing:border-box; height:48px; min-height:48px; margin:0; }.site-logo-upload input[type="file"] { min-height:48px; padding:var(--space-2); display:flex; align-items:center; }.site-logo-upload .field-help { min-height:20px; margin:0; }.site-logo-preview { display:block; width:100%; height:80px; object-fit:contain; padding:var(--space-2); border:1px solid var(--line,#dfe4dc); border-radius:var(--radius-sm); background:#fff; }
.site-logo-preview-dark { background:#111827; }
.site-logo-preview[hidden] { display:none; }
.media-upload-form { width:100%; box-sizing:border-box; }.media-library { gap:var(--space-5); }.media-gallery-heading { align-items:end; margin:0; padding-bottom:var(--space-4); border-bottom:1px solid var(--line); }.media-gallery-heading .app-primary-action { display:inline-flex; align-items:center; gap:var(--space-2); width:max-content; margin:0; white-space:nowrap; }.media-gallery-group { display:grid; gap:var(--space-3); }.media-gallery-group-heading { display:flex; align-items:end; justify-content:space-between; gap:var(--space-3); }.media-gallery-group-heading h3,.media-gallery-group-heading p { margin:0; }.media-gallery-group-heading h3 { color:var(--ink); font-size:var(--text-sm); letter-spacing:-.015em; }.media-gallery-group-heading p { margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); line-height:1.5; }.media-gallery-count { display:inline-flex; align-items:center; min-height:28px; padding:0 var(--space-2); border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:var(--text-xs); font-weight:700; white-space:nowrap; }.media-gallery-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:var(--space-3); margin:0; padding:0; list-style:none; }.media-gallery-identity-list { grid-template-columns:repeat(auto-fit,minmax(220px,320px)); }.media-gallery-item { display:grid; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-raised); transition:border-color .18s ease, box-shadow .18s ease; }.media-gallery-item:hover { border-color:color-mix(in srgb,var(--hub-primary,#517013) 36%,var(--line)); box-shadow:0 4px 8px color-mix(in oklch,var(--ink) 10%,transparent); }.media-gallery-thumbnail { position:relative; display:grid; place-items:center; width:100%; min-width:0; min-height:0; aspect-ratio:4 / 3; margin:0; padding:var(--space-3); border:0; border-radius:0; background:var(--surface-subtle); color:var(--ink); overflow:hidden; }.media-gallery-thumbnail:hover { background:var(--surface-subtle); transform:none; }.media-gallery-thumbnail img { width:100%; height:100%; object-fit:contain; }.media-gallery-thumbnail > i { color:var(--muted); font-size:32px; }.media-gallery-zoom { position:absolute; inset:auto var(--space-2) var(--space-2); display:flex; align-items:center; justify-content:center; gap:6px; min-height:32px; padding:0 var(--space-2); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--ink) 88%,transparent); color:#fff; font-size:var(--text-xs); font-weight:700; opacity:0; transform:translateY(4px); transition:opacity .18s ease,transform .18s ease; }.media-gallery-thumbnail:hover .media-gallery-zoom,.media-gallery-thumbnail:focus-visible .media-gallery-zoom { opacity:1; transform:translateY(0); }.media-gallery-meta { display:grid; gap:var(--space-1); min-width:0; padding:var(--space-3) var(--space-3) var(--space-2); }.media-gallery-meta strong,.media-gallery-meta small { overflow:hidden; display:block; text-overflow:ellipsis; white-space:nowrap; }.media-gallery-meta strong { color:var(--ink); font-size:var(--text-sm); }.media-gallery-meta small { color:var(--muted); font-size:var(--text-xs); }.media-gallery-actions { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); min-height:48px; padding:0 var(--space-3) var(--space-3); }.media-gallery-actions form { width:auto; margin:0; padding:0; border:0; background:transparent; }.media-gallery-view,.media-gallery-delete { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; margin:0; padding:0 var(--space-2); border:0; border-radius:var(--radius-sm); background:transparent; font-size:var(--text-xs); font-weight:800; }.media-gallery-view { color:var(--hub-primary,#517013); }.media-gallery-view:hover { background:color-mix(in srgb,var(--hub-primary,#517013) 10%,transparent); color:var(--hub-primary,#517013); transform:none; }.media-gallery-delete { color:var(--critical); }.media-gallery-delete:hover { background:var(--danger-50); color:var(--danger-700); transform:none; }.media-gallery-identity .media-gallery-meta { padding-bottom:var(--space-3); }.media-gallery-empty { display:grid; grid-column:1 / -1; justify-items:center; gap:var(--space-2); min-height:220px; padding:var(--space-5); border:1px dashed var(--line); border-radius:var(--radius-md); background:var(--surface-subtle); color:var(--muted); text-align:center; }.media-gallery-empty > i { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--surface-raised); color:var(--hub-primary,#517013); font-size:20px; }.media-gallery-empty strong { color:var(--ink); font-size:var(--text-sm); }.media-gallery-empty p { max-width:44ch; margin:0; font-size:var(--text-xs); line-height:1.55; }.media-gallery-empty .app-primary-action { display:inline-flex; align-items:center; gap:var(--space-2); width:max-content; margin:var(--space-2) 0 0; }.media-dialog { width:min(640px,calc(100vw - 32px)); max-width:640px; }.media-preview-dialog { width:min(880px,calc(100vw - 32px)); max-width:880px; }.media-preview-dialog [data-media-preview-image] { display:block; width:100%; max-height:min(62vh,560px); margin:0; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-subtle); object-fit:contain; }.media-dialog .app-modal-actions { margin-top:var(--space-2); }@media(max-width:780px){.media-gallery-heading{align-items:start}.media-gallery-heading .app-primary-action{width:100%}.media-gallery-group-heading{align-items:start;flex-direction:column;gap:var(--space-2)}.media-gallery-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.media-gallery-identity-list{grid-template-columns:1fr}.media-gallery-actions{padding:0 var(--space-2) var(--space-2)}.media-gallery-meta{padding:var(--space-2)}.media-gallery-zoom{display:none}}
.user-form input[type=file] { min-height:var(--control-size); padding:var(--space-1); border:1px dashed #aeb8a4; background:#f8faf6; cursor:pointer; }.user-form input[type=file]:hover { border-color:#517013; background:#f2f8e8; }.user-form input[type=file]:focus-visible { outline:3px solid #b7f34a; outline-offset:3px; }.user-form input[type=file]::file-selector-button { height:32px; margin-right:var(--space-2); padding:0 var(--space-3); border:0; border-radius:var(--radius-sm); background:#283246; color:#fff; font:inherit; font-size:var(--text-xs); font-weight:700; cursor:pointer; }.user-form input[type=file]::file-selector-button:hover { background:#111827; }
.user-form input[type=file] { display:flex; align-items:center; }
.user-form input[type=file] { height:var(--control-size); line-height:32px; }.user-form input[type=file]::file-selector-button { vertical-align:middle; }
.file-upload-control { position:relative; display:flex; align-items:center; gap:var(--space-2); min-height:var(--control-size); padding:var(--space-1); border:1px dashed #aeb8a4; border-radius:var(--radius-sm); background:#f8faf6; }.file-upload-control:hover { border-color:#517013; background:#f2f8e8; }.file-upload-control:has(.file-upload-native:focus-visible) { border-color:var(--hub-primary,#517013); box-shadow:0 0 0 2px color-mix(in srgb,var(--hub-primary,#517013) 30%,transparent); }.file-upload-native { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }.file-upload-button { display:flex; align-items:center; height:32px; padding:0 var(--space-3); border-radius:var(--radius-sm); background:#283246; color:#fff; font-size:var(--text-xs); font-weight:700; }.file-upload-name { overflow:hidden; color:#687181; font-size:var(--text-xs); text-overflow:ellipsis; white-space:nowrap; }.file-upload-native:focus-visible + .file-upload-button { outline:0; }
.dashboard-welcome h2,.dashboard-section h2,.empty-panel h2 { margin:var(--space-2) 0; font-size:var(--text-md); }
.dashboard-welcome aside { gap:var(--space-2); padding:var(--space-3); border-radius:var(--radius-sm); }
.dashboard-section { margin-top:var(--space-7); }.section-heading { gap:var(--space-3); margin-bottom:var(--space-3); }
.shortcut-grid { gap:var(--space-3); }.shortcut-grid a { gap:var(--space-2); min-height:176px; padding:var(--space-4); border-radius:var(--radius-md); }.shortcut-grid strong { font-size:var(--text-sm); }.shortcut-grid span { font-size:var(--text-xs); }
.dashboard-status { padding-top:var(--space-2); }.status-metrics { border-radius:var(--radius-md); }.status-metrics div { gap:var(--space-1); padding:var(--space-3) var(--space-4); }.status-metrics strong { font-size:var(--text-md); }.status-metrics span { font-size:var(--text-xs); }
.empty-panel { gap:var(--space-2); padding:var(--space-7) 0; }.empty-panel-mark { width:48px; height:48px; margin:0 0 var(--space-2); }.content-list-heading { gap:var(--space-3); margin-bottom:var(--space-4); }.content-list-heading h2 { margin:var(--space-2) 0; font-size:var(--text-md); }
@media(max-width:780px){.app-topbar{padding:var(--space-2) var(--space-3)}.app-header{padding:var(--space-4) 0 var(--space-3)}.app-header-inner{align-items:flex-start;flex-direction:column}.dashboard-welcome{gap:var(--space-3);padding:var(--space-4)}.content-list-heading{align-items:start;flex-direction:column}.content-table th,.content-table td{padding:var(--space-3)}.page-form-actions{grid-template-columns:1fr}}
.section-list li { display:flex; align-items:center; justify-content:initial; flex-wrap:nowrap; }
.sections-panel .add-section { gap:var(--space-2); }
.section-list .section-handle { display:block; flex:0 0 24px; }.section-list .section-copy { display:grid; flex:1 1 auto; min-width:0; gap:var(--space-1); }.section-copy small { color:#687181; font-size:var(--text-xs); }.section-list .section-actions { display:flex; flex:0 0 auto; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:var(--space-2); margin-left:0; }.section-fields { display:grid; gap:var(--space-3); }
textarea { width:100%; min-height:144px; resize:vertical; border:1px solid #cfd5c8; border-radius:var(--radius-sm); background:#fff; color:#121a2a; padding:var(--space-3); font:inherit; line-height:1.55; }
textarea:focus-visible { outline:3px solid #b7f34a; outline-offset:3px; }
.section-list li { padding:var(--space-4); }

/* Biblioteca e área de montagem da seção. */
.content-builder { display:grid; grid-template-columns:272px minmax(0,1fr); align-items:start; gap:var(--space-4); }
.content-builder .component-library { position:sticky; top:calc(64px + var(--space-4)); display:grid; gap:var(--space-3); width:auto; margin:0; padding:var(--space-3); border:1px solid #d9ddd3; border-radius:var(--radius-md); background:#fff; }
.component-library > div:first-child { display:grid; gap:var(--space-1); }.component-library > div:first-child strong { color:#202938; font-size:var(--text-sm); }.component-library > div:first-child small,.component-canvas-heading small { color:#687181; font-size:var(--text-xs); }
.component-library-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:112px; gap:var(--space-2); max-height:calc(100vh - 176px); overflow:auto; }
.component-library-list button { display:grid; grid-template-rows:24px minmax(0,1fr) 16px; align-items:start; gap:var(--space-2); width:100%; min-height:0; height:112px; margin:0; padding:var(--space-2); border:1px solid #e1e5dc; border-radius:var(--radius-sm); background:#fbfcf8; color:#283246; text-align:left; }
.component-library-list button:hover { border-color:#aab4a0; background:#fff; }.component-library-list button:focus-visible { outline:3px solid #b7f34a; outline-offset:3px; }.component-library-list button > i:first-child { color:#517013; text-align:left; }.component-library-list button > span { display:grid; align-content:center; min-width:0; gap:var(--space-1); }.component-library-list button strong { overflow:hidden; font-size:var(--text-xs); text-overflow:ellipsis; white-space:nowrap; }.component-library-list button small { color:#687181; font-size:var(--text-xs); }.component-library-list button > i:last-child { color:#687181; font-size:.75rem; text-align:right; }
.component-library-list button:disabled { border-color:#d9ddd3; background:#f3f5f1; color:#687181; cursor:default; opacity:1; }.component-library-list button:disabled > i:first-child,.component-library-list button:disabled > i:last-child { color:#6d8a3a; }
.component-canvas { display:grid; gap:var(--space-3); min-width:0; }.component-canvas-heading { display:flex; align-items:end; justify-content:space-between; gap:var(--space-3); }.component-canvas-heading strong { color:#202938; font-size:var(--text-sm); }
.component-list { display:grid; min-height:168px; margin:0; padding:var(--space-2); border:1px dashed #bdc7b2; border-radius:var(--radius-md); background:#f8faf6; list-style:none; }.component-list:has(.content-component) { min-height:0; gap:var(--space-2); }
.content-component { display:flex; align-items:center; gap:var(--space-3); min-width:0; padding:var(--space-3); border:1px solid #d9ddd3; border-radius:var(--radius-sm); background:#fff; }.content-component[draggable="true"] { cursor:grab; }.content-component.is-dragging { opacity:.48; }.component-drop-placeholder { min-height:48px; border:2px dashed #91bc45; border-radius:var(--radius-sm); background:#f5fce9; }.component-handle { flex:0 0 24px; color:#8a94a0; text-align:center; }.content-component .section-copy { display:grid; flex:1 1 auto; min-width:0; gap:var(--space-1); }.content-component .section-actions { display:flex; flex:0 0 auto; gap:var(--space-2); }.component-empty { display:grid; place-items:center; min-height:150px; padding:var(--space-4); color:#687181; font-size:var(--text-xs); text-align:center; }
@media (max-width:780px) { .content-builder { grid-template-columns:1fr; }.content-builder .component-library { position:static; }.component-library-list { max-height:none; }.component-canvas-heading { align-items:flex-start; flex-direction:column; } }

/* Configuração de blocos: grupos curtos e escaneáveis, sem um cartão dentro de outro. */
.page-form form.field-block-form { display:grid; gap:var(--space-4); padding:0; border:0; background:transparent; }
.field-form-section { display:grid; gap:var(--space-4); padding:var(--space-4); border:1px solid #dfe4dc; border-radius:var(--radius-md); background:#fff; }
.field-form-section-heading { display:flex; align-items:flex-start; gap:var(--space-3); }
.field-form-section-icon { display:grid; place-items:center; flex:0 0 var(--control-size); width:var(--control-size); height:var(--control-size); border-radius:var(--radius-sm); background:#eef6e4; color:#3d6611; }
.field-form-section-heading > div { display:grid; gap:var(--space-1); }
.field-form-section h3,.field-form-section p { margin:0; }.field-form-section h3 { color:#202938; font-size:var(--text-sm); }.field-form-section p { color:#687181; font-size:var(--text-xs); line-height:1.5; }
.new-site-admin-content { display:grid; gap:var(--space-4); margin-top:0; }
.new-site-admin-group { display:grid; gap:var(--space-3); padding-top:var(--space-4); border-top:1px solid var(--line); }
.new-site-admin-group h4 { display:flex; align-items:center; gap:var(--space-2); margin:0; color:var(--ink); font-size:var(--text-xs); font-weight:800; }
.new-site-admin-group h4 i { color:var(--accent-strong); }
.new-site-admin-group > p { margin:0; color:var(--muted); font-size:var(--text-xs); line-height:1.5; }
.new-site-admin-group .access-note { color:var(--ink); }
.new-site-admin-role { display:flex; align-items:center; min-height:var(--control-size); gap:var(--space-2); padding:0 var(--space-3); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-subtle); color:var(--ink); font-weight:700; }
.new-site-admin-role i { color:var(--accent-strong); }
.field-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
.field-form-grid label { min-width:0; }.field-span-full { grid-column:1 / -1; }
.field-label-row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-2); }
.field-block-form .field-help { color:#687181; font-size:var(--text-xs); font-weight:400; line-height:1.45; }
.field-base-identifier { display:grid; grid-template-rows:20px var(--control-size) minmax(36px,auto); gap:var(--space-2); align-content:start; color:#202938; font-size:var(--text-xs); }.field-base-identifier strong { align-self:center; }.field-base-identifier span { display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-3); border:1px solid #cfd5c8; border-radius:var(--radius-sm); background:#fff; color:#283246; font-weight:650; }.field-base-identifier span i { color:#517013; }.field-base-identifier small { color:#687181; font-size:var(--text-xs); line-height:1.45; }
.field-guidance-control { grid-template-rows:20px var(--control-size) minmax(36px,auto); align-content:start; }
.field-block-form [data-custom-mask][hidden] { display:none; }
.field-block-form .checkbox-row { grid-template-columns:24px minmax(0,1fr); column-gap:var(--space-3); margin:0; padding:var(--space-3); border-color:#dfe4dc; background:#f8faf6; }
.field-block-form .page-form-actions { margin-top:0; }
@media (max-width:780px) { .field-form-section { gap:var(--space-3); padding:var(--space-3); }.field-form-grid { grid-template-columns:1fr; }.field-span-full { grid-column:auto; } }

/* Campo obrigatório: switch nativo, com área de toque e leitura mais claras. */
.checkbox-row,.field-block-form .checkbox-row,.component-settings-grid .component-settings-required { grid-template-columns:48px minmax(0,1fr); column-gap:var(--space-3); align-items:center; padding:var(--space-3); }
.checkbox-row input[type="checkbox"] { position:relative; width:48px; height:28px; min-height:28px; margin:0; border:1px solid #b8c0b2; border-radius:999px; appearance:none; background:#dfe4dc; cursor:pointer; transition:background 160ms ease,border-color 160ms ease; }
.checkbox-row input[type="checkbox"]::after { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(18,26,42,.18); content:""; transition:transform 160ms ease; }
.checkbox-row input[type="checkbox"]:checked { border-color:#517013; background:#517013; }.checkbox-row input[type="checkbox"]:checked::after { transform:translateX(20px); }.checkbox-row input[type="checkbox"]:focus-visible { outline:3px solid #b7f34a; outline-offset:3px; }

/* Montagem de módulos: a estrutura permanece no foco e os detalhes abrem no próprio item. */
.module-builder.content-builder { display:block; }
.page-template-builder.content-builder { display:block; }
.page-template-builder .component-canvas { width:100%; }
.page-template-builder .component-canvas-heading > div { display:grid; gap:var(--space-1); }
.page-template-builder .component-kind { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:var(--radius-sm); background:#eef6e4; color:#517013; }
.page-template-builder .component-kind i { font-size:var(--text-xs); }
.module-builder .component-canvas-heading > div { display:grid; gap:var(--space-1); }
.app-header-inner > button.app-primary-action { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); margin:0; white-space:nowrap; }
.component-add-inline { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); margin:0; border:1px solid #cfd5c8; background:#fff; color:#283246; white-space:nowrap; }
.component-add-inline:hover { border-color:#aab4a0; background:#e9ede3; color:#283246; }
.module-builder .content-component { display:block; padding:0; }
.page-template-builder .content-component { display:block; padding:0; }
.module-builder .component-row { display:flex; align-items:center; gap:var(--space-3); min-width:0; padding:var(--space-3); }
.page-template-builder .component-row { display:flex; align-items:center; gap:var(--space-3); min-width:0; padding:var(--space-3); }
.module-builder .component-settings { display:grid; gap:var(--space-3); margin:0; padding:var(--space-3); border:0; border-top:1px solid #e3e7e1; border-radius:0; background:#f8faf6; }
.page-template-builder .component-settings { display:grid; gap:var(--space-3); margin:0; padding:var(--space-3); border:0; border-top:1px solid #e3e7e1; border-radius:0; background:#f8faf6; }
.module-builder .component-settings[hidden],.page-template-builder .component-settings[hidden] { display:none; }
.component-settings-heading { display:grid; gap:var(--space-1); }.component-settings-heading strong { color:#202938; font-size:var(--text-xs); }.component-settings-heading small { color:#687181; font-size:var(--text-xs); }
.component-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
.component-settings-grid label { min-width:0; }.component-settings-grid label > span { display:flex; justify-content:space-between; gap:var(--space-2); color:#283246; font-size:var(--text-xs); font-weight:700; }.component-settings-grid label > span small { color:#687181; font-weight:400; }
.component-settings-grid label[data-custom-mask][hidden] { display:none; }
.component-settings-grid .field-help { color:#687181; font-size:var(--text-xs); font-weight:400; line-height:1.4; }
.component-settings-grid .component-settings-required { grid-template-columns:24px minmax(0,1fr); align-items:center; padding:var(--space-3); border:1px solid #dfe4dc; border-radius:var(--radius-sm); background:#fff; }.component-settings-required strong,.component-settings-required small { display:block; }.component-settings-required small { margin-top:var(--space-1); color:#687181; font-size:var(--text-xs); font-weight:400; }
.component-settings-note,.field-validation-note { display:flex; align-items:center; gap:var(--space-2); margin:0; padding:var(--space-3); border:1px solid #dfe4dc; border-radius:var(--radius-sm); background:#fff; color:#5f6775; font-size:var(--text-xs); line-height:1.45; }.component-settings-note i,.field-validation-note i { color:#517013; }.component-settings-note a,.field-validation-note a { margin-left:auto; color:#355107; font-weight:800; text-decoration:none; white-space:nowrap; }.component-settings-note a:hover,.field-validation-note a:hover { text-decoration:underline; text-underline-offset:3px; }
.component-settings-note > span { display:grid; min-width:0; gap:var(--space-1); }.component-settings-note > span strong { color:#283246; }.component-settings-note > span small { color:#687181; font-size:var(--text-xs); }
.template-module-fields { display:grid; gap:var(--space-3); }
.template-module-field { display:grid; gap:var(--space-3); padding:var(--space-3); border:1px solid #dfe4dc; border-radius:var(--radius-sm); background:#fff; }
.template-module-field-heading { display:flex; align-items:center; gap:var(--space-2); min-width:0; }
.template-module-field-heading > i { flex:0 0 24px; color:#517013; text-align:center; }
.template-module-field-heading > div { display:grid; min-width:0; gap:var(--space-1); }
.template-module-field-heading strong { overflow:hidden; color:#202938; font-size:var(--text-xs); text-overflow:ellipsis; white-space:nowrap; }
.template-module-field-heading small { overflow:hidden; color:#687181; font-size:var(--text-xs); text-overflow:ellipsis; white-space:nowrap; }
.component-validation-settings { display:grid; gap:var(--space-2); padding:var(--space-3); border:1px solid #dfe4dc; border-radius:var(--radius-sm); background:#fff; }.component-validation-settings[hidden] { display:none; }.component-validation-settings [data-custom-mask][hidden] { display:none; }.component-validation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }.component-validation-grid label { min-width:0; }.component-validation-grid label > span { display:flex; color:#283246; font-size:var(--text-xs); font-weight:700; }.component-validation-toggle { align-self:start; width:max-content; margin:0; padding:0; border:0; background:transparent; color:#355107; font-size:var(--text-xs); font-weight:800; }.component-validation-toggle:hover { background:transparent; color:#517013; text-decoration:underline; transform:none; }
.component-settings-actions { display:flex; justify-content:flex-end; }.component-settings-actions button { width:auto; min-width:144px; }
.component-picker { width:min(760px,calc(100% - 32px)); max-height:min(760px,calc(100vh - 32px)); margin:auto; padding:0; border:1px solid #d9ddd3; border-radius:var(--radius-md); background:#fff; color:#202938; box-shadow:0 8px 24px rgba(18,26,42,.16); }.component-picker::backdrop { background:rgba(18,26,42,.42); }
.component-picker-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); padding:var(--space-4); border-bottom:1px solid #e3e7e1; }.component-picker-header > div { display:grid; gap:var(--space-1); }.component-picker-header .step-label,.component-picker-header h2,.component-picker-header p { margin:0; }.component-picker-header h2 { font-size:var(--text-md); letter-spacing:-.03em; }.component-picker-header p:not(.step-label) { color:#687181; font-size:var(--text-xs); line-height:1.5; }.component-picker-header form { width:auto; margin:0; padding:0; border:0; background:transparent; }.component-picker-header .table-icon-action { border-color:#111827; background:#111827; color:#fff; }.component-picker-header .table-icon-action:hover { border-color:#26334b; background:#26334b; color:#fff; }
.component-picker-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2); max-height:456px; overflow:auto; padding:var(--space-4); }.component-picker-list button { display:grid; grid-template-rows:24px minmax(0,1fr) 16px; align-items:start; gap:var(--space-2); min-height:128px; margin:0; padding:var(--space-3); border:1px solid #e1e5dc; border-radius:var(--radius-sm); background:#fbfcf8; color:#283246; text-align:left; }.component-picker-list button:hover { border-color:#aab4a0; background:#fff; }.component-picker-list button > i:first-child { color:#517013; }.component-picker-list button > span { display:grid; align-content:center; min-width:0; gap:var(--space-1); }.component-picker-list button strong { overflow:hidden; font-size:var(--text-xs); text-overflow:ellipsis; white-space:nowrap; }.component-picker-list button small { color:#687181; font-size:var(--text-xs); }.component-picker-list button > i:last-child { color:#687181; font-size:var(--text-xs); text-align:right; }.component-picker-create { display:flex; align-items:center; justify-content:center; gap:var(--space-2); width:calc(100% - 48px); margin:0 var(--space-4) var(--space-4); }
.component-picker-groups { display:grid; gap:var(--space-4); max-height:520px; overflow:auto; padding:var(--space-4); }.component-picker-group { display:grid; gap:var(--space-2); }.component-picker-group-heading { display:grid; gap:var(--space-1); }.component-picker-group-heading strong { color:#202938; font-size:var(--text-sm); }.component-picker-group-heading small { color:#687181; font-size:var(--text-xs); }.component-picker-group .component-picker-list { max-height:none; overflow:visible; padding:0; }.component-picker-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); padding:0 var(--space-4) var(--space-4); }.component-picker-actions .component-picker-create { width:100%; margin:0; }
.component-settings-grid .component-settings-required { grid-template-columns:48px minmax(0,1fr); column-gap:var(--space-3); padding:var(--space-3); }
.component-settings-grid .component-settings-required > span:last-child { display:grid; justify-content:normal; align-self:center; gap:var(--space-1); }
.page-form-actions > .app-outline-action,.page-form-actions > button { display:flex; align-items:center; justify-content:center; width:100%; height:var(--control-size); min-height:var(--control-size); margin:0; padding:0 var(--space-3); line-height:1; }
@media (max-width:780px) { .component-canvas-heading { gap:var(--space-3); }.component-add-inline { width:100%; }.module-builder .component-row { align-items:flex-start; flex-wrap:wrap; }.module-builder .component-row .section-copy { min-width:calc(100% - 40px); }.module-builder .component-row .section-actions { margin-left:auto; }.component-settings-grid,.component-validation-grid { grid-template-columns:1fr; }.component-picker { width:calc(100% - 32px); }.component-picker-header { padding:var(--space-3); }.component-picker-list { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:calc(100vh - 272px); padding:var(--space-3); }.component-picker-groups { max-height:calc(100vh - 272px); padding:var(--space-3); }.component-picker-actions { grid-template-columns:1fr; padding:0 var(--space-3) var(--space-3); }.component-picker-create { width:100%; margin:0; } }

/* A versão compacta do painel não mantém a coluna fixa do menu. */
@media (max-width:780px) { .app-shell { grid-template-columns:1fr; } }

/* Espaçamento final: todos os agrupamentos respeitam a escala de 8 pontos. */
.installer-aside { gap:var(--space-7); }
.brand,.app-brand { gap:var(--space-2); }
.steps { gap:var(--space-4); }
.steps li { column-gap:var(--space-2); }
.installer-heading { gap:var(--space-2); }
.completion { gap:var(--space-3); }
.completion-next { gap:var(--space-1); }
.checks { gap:var(--space-2); }
.checks > div { gap:var(--space-1) var(--space-2); }
form,.install-step { gap:var(--space-3); }
.step-intro { gap:var(--space-2); }
.password-tools { gap:var(--space-3); }
.password-strength { gap:var(--space-2); }
.password-suggestion { gap:var(--space-2); }
.step-actions { gap:var(--space-2); }
.review { gap:var(--space-3); }
.review div { gap:var(--space-2); }
label,fieldset { gap:var(--space-2); }
.auth-card,.auth-card form { gap:var(--space-3); }
.recovery-flow,.recovery-complete { gap:var(--space-4); }
.recovery-steps,.recovery-steps li { gap:var(--space-2); }
.app-sidebar nav { gap:var(--space-4); }
.app-nav-group { gap:var(--space-1); }
.app-nav-group a,.app-account { gap:var(--space-2); }
.app-topbar,.app-top-actions,.app-search { gap:var(--space-2); }
.app-header-inner,.content-list-heading { gap:var(--space-4); }
.dashboard-welcome { gap:var(--space-5); }
.dashboard-welcome aside,.status-metrics div { gap:var(--space-2); }
.section-heading,.shortcut-grid,.section-list,.checkbox-list { gap:var(--space-3); }
.shortcut-grid a { gap:var(--space-2); }
.content-builder { gap:var(--space-4); }
.component-canvas { gap:var(--space-3); }
.content-component,.section-list li { gap:var(--space-3); }
.section-list span,.component-library-list,.component-picker-list { gap:var(--space-2); }
.field-form-section,.field-block-form,.component-settings-grid,.component-validation-grid { gap:var(--space-3); }
.field-form-section-heading,.field-label-row,.field-base-identifier span { gap:var(--space-2); }
.component-settings-note,.field-validation-note,.component-picker-actions { gap:var(--space-2); }
.component-picker-groups { gap:var(--space-4); }

/* Fundação visual do CMS: tokens semânticos, escala de 8 pontos e Perfect Fourth. */
:root {
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 40px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;
    --space-10: 96px;
    --space-11: 128px;
    --radius-none: 0;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-md: 21px;
    --text-lg: 28px;
    --text-xl: 38px;
    --text-2xl: 51px;
    --text-3xl: 68px;
    --text-4xl: 90px;
    --control-size: 48px;
    --duration-ui: 200ms;
    --ease-ui: cubic-bezier(.2, .8, .2, 1);
    --z-sticky: 10;
    --z-dropdown: 20;
    --z-modal: 40;

    --primary-50: oklch(.97 .018 145);
    --primary-100: oklch(.93 .045 145);
    --primary-200: oklch(.86 .082 145);
    --primary-300: oklch(.78 .115 145);
    --primary-400: oklch(.69 .145 145);
    --primary-500: oklch(.59 .15 145);
    --primary-600: oklch(.49 .13 145);
    --primary-700: oklch(.40 .105 145);
    --primary-800: oklch(.32 .08 145);
    --primary-900: oklch(.25 .055 145);
    --primary-950: oklch(.17 .03 145);
    --gray-50: oklch(.985 .003 255);
    --gray-100: oklch(.96 .006 255);
    --gray-200: oklch(.91 .01 255);
    --gray-300: oklch(.83 .014 255);
    --gray-400: oklch(.70 .018 255);
    --gray-500: oklch(.56 .02 255);
    --gray-600: oklch(.45 .022 255);
    --gray-700: oklch(.36 .022 255);
    --gray-800: oklch(.27 .02 255);
    --gray-900: oklch(.20 .017 255);
    --gray-950: oklch(.13 .014 255);
    --success-50: oklch(.97 .02 150); --success-100: oklch(.93 .05 150); --success-200: oklch(.86 .09 150); --success-300: oklch(.78 .13 150); --success-400: oklch(.69 .16 150); --success-500: oklch(.59 .16 150); --success-600: oklch(.49 .14 150); --success-700: oklch(.40 .11 150); --success-800: oklch(.32 .08 150); --success-900: oklch(.25 .055 150); --success-950: oklch(.17 .03 150);
    --danger-50: oklch(.97 .018 28); --danger-100: oklch(.93 .05 28); --danger-200: oklch(.86 .09 28); --danger-300: oklch(.77 .14 28); --danger-400: oklch(.68 .18 28); --danger-500: oklch(.58 .20 28); --danger-600: oklch(.49 .18 28); --danger-700: oklch(.40 .14 28); --danger-800: oklch(.32 .10 28); --danger-900: oklch(.25 .07 28); --danger-950: oklch(.17 .04 28);
    --warning-50: oklch(.98 .02 82); --warning-100: oklch(.95 .05 82); --warning-200: oklch(.89 .10 82); --warning-300: oklch(.82 .14 82); --warning-400: oklch(.74 .16 82); --warning-500: oklch(.66 .16 82); --warning-600: oklch(.55 .14 82); --warning-700: oklch(.45 .11 82); --warning-800: oklch(.36 .08 82); --warning-900: oklch(.28 .055 82); --warning-950: oklch(.19 .03 82);
    --info-50: oklch(.97 .018 250); --info-100: oklch(.93 .045 250); --info-200: oklch(.86 .08 250); --info-300: oklch(.77 .12 250); --info-400: oklch(.68 .15 250); --info-500: oklch(.58 .16 250); --info-600: oklch(.49 .14 250); --info-700: oklch(.40 .11 250); --info-800: oklch(.32 .08 250); --info-900: oklch(.25 .055 250); --info-950: oklch(.17 .03 250);

    --surface: var(--gray-50);
    --surface-raised: #fff;
    --surface-subtle: var(--gray-100);
    --ink: var(--gray-950);
    --muted: var(--gray-600);
    --line: var(--gray-200);
    --accent: var(--primary-600);
    --accent-strong: var(--primary-700);
    --accent-subtle: var(--primary-100);
    --critical: var(--danger-600);
    --warning: var(--warning-600);
    --success: var(--success-600);
    --info: var(--info-600);
}

body { min-width: 320px; overflow-x: hidden; background: var(--surface); color: var(--ink); font-size: var(--text-base); line-height: 1.5; }
button, input, select, textarea { font-size: var(--text-base); }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -.03em; }
h2 { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -.025em; }
h3 { font-size: var(--text-lg); line-height: 1.2; letter-spacing: -.02em; }
p { text-wrap: pretty; }
input, select, textarea { border-color: var(--line); color: var(--ink); }
textarea { min-height: 128px; padding: var(--space-3); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--gray-600); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button, .app-primary-action, .app-outline-action, .app-create-action, .table-icon-action, .component-add-inline {
    transition: background-color var(--duration-ui) var(--ease-ui), border-color var(--duration-ui) var(--ease-ui), color var(--duration-ui) var(--ease-ui), transform var(--duration-ui) var(--ease-ui), box-shadow var(--duration-ui) var(--ease-ui);
}
button:active, .app-primary-action:active, .app-outline-action:active, .app-create-action:active, .table-icon-action:active { transform: scale(.98); }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .58; transform: none; }

.app-page, .app-main { background: var(--surface); }
.app-shell { grid-template-columns: 256px minmax(0, 1fr); }
.app-sidebar { z-index: var(--z-sticky); border-color: var(--line); background: var(--surface-raised); }
.app-sidebar nav { gap: var(--space-4); }
.app-nav-group > div, .app-account, .app-site { border-color: var(--line); background: var(--surface-raised); }
.app-nav-group a { min-height: var(--control-size); padding-inline: var(--space-3); color: var(--muted); }
.app-nav-group a:hover { background: var(--surface-subtle); color: var(--ink); }
.app-nav-group a[aria-current="page"] { background: var(--accent-subtle); color: var(--accent-strong); }
.app-topbar { z-index: var(--z-sticky); min-height: 64px; padding: var(--space-2) var(--space-4); border-color: var(--line); background: color-mix(in oklch, var(--surface-raised) 94%, transparent); }
.app-top-actions button { width: var(--control-size); height: var(--control-size); border-color: var(--accent); background: transparent; color: var(--accent-strong); }
.app-top-actions button:hover { background: var(--accent-subtle); color: var(--accent-strong); }
.app-search, .app-search:hover { border-color: var(--line); background: var(--surface-raised); color: var(--muted); transform: none; }
.app-search .fa-solid, .app-search kbd { color: var(--muted); }
.app-header, .app-content { width: min(100% - clamp(32px, 6vw, 64px), 1280px); margin-inline: auto; }
.app-header { padding-block: var(--space-6) var(--space-4); }
.app-header h1 { font-size: var(--text-xl); }
.app-content { padding-block: var(--space-4) var(--space-8); }
.app-header-inner, .content-list-heading, .component-canvas-heading { gap: var(--space-3); }
.app-primary-action, .app-create-action, button:not(.component-validation-toggle) { background: var(--accent); }
.app-primary-action:hover, .app-create-action:hover, button:not(.component-validation-toggle):hover { background: var(--accent-strong); }
.secondary, .auth-outline-button, .app-outline-action, .component-add-inline { background: transparent !important; }
.secondary:hover, .auth-outline-button:hover { background: var(--surface-subtle) !important; }
.app-outline-action, .component-add-inline, .table-icon-action { border-color: var(--accent); background: transparent; color: var(--accent-strong); }
.app-outline-action:hover, .component-add-inline:hover, .table-icon-action:hover { border-color: var(--accent-strong); background: var(--accent-subtle); color: var(--accent-strong); }
.table-icon-action.danger, .app-danger-action { border-color: var(--critical); color: var(--critical); }
.table-icon-action.danger { background:var(--critical); color:#fff; }
.table-icon-action.danger:hover { border-color:var(--danger-700); background:var(--danger-700); color:#fff; }
.table-icon-action.danger:hover * { color:#fff; }
.app-modal-header > .table-icon-action:hover { border-color:var(--accent-strong); background:var(--accent-strong); color:#fff; }
.app-modal-header > .table-icon-action:hover * { color:#fff; }
.content-table-actions button.table-icon-action { display:grid; flex:0 0 var(--control-size); place-items:center; width:var(--control-size); min-width:var(--control-size); height:var(--control-size); min-height:var(--control-size); padding:0; line-height:1; }
.app-danger-action { background: var(--critical); color: #fff; }
.app-danger-action:hover { background: var(--danger-700); }

.dashboard-welcome, .field-form-section, .permission-reference, .content-table-wrap, .page-form form, .post-content-fields, .component-library, .component-list, .content-component, .section-list li { border-color: var(--line); }
.dashboard-welcome, .field-form-section, .permission-reference, .content-table-wrap, .page-form form, .post-content-fields, .content-component, .section-list li { background: var(--surface-raised); }
.dashboard-welcome { gap: var(--space-5); padding: var(--space-5); }
.dashboard-welcome aside { background: var(--accent-strong); }
.content-table th, .content-table td { padding: var(--space-3) var(--space-4); border-color: var(--line); font-size: var(--text-sm); }
.content-table th { color: var(--muted); }
.content-status { padding: var(--space-1) var(--space-2); border-radius: var(--radius-lg); font-size: var(--text-xs); }
.content-status.published { background: var(--success-100); color: var(--success-700); }
.content-status.review { background: var(--warning-100); color: var(--warning-800); }
.page-form, .field-form-section, .component-canvas, .content-builder { gap: var(--space-4); }
.page-form > .step-label + h2, .page-form > h2 + p:not(.step-label) { margin-top: 0; }
.field-form-grid, .component-settings-grid, .component-validation-grid { gap: var(--space-4); }
.component-list { gap: var(--space-2); padding: var(--space-2); background: var(--surface-subtle); }
.component-drop-placeholder { min-height: var(--space-7); border-color: var(--accent); background: var(--accent-subtle); }
.component-library-list button, .component-picker-list button { border-color: var(--line); background: var(--surface-raised); color: var(--ink); }
.component-library-list button:hover, .component-picker-list button:hover { border-color: var(--accent); background: var(--accent-subtle); }
.app-nav-group a, .shortcut-grid a, .component-library-list button, .component-picker-list button, .section-list li, .content-component, .file-upload-control {
    transition: background-color var(--duration-ui) var(--ease-ui), border-color var(--duration-ui) var(--ease-ui), color var(--duration-ui) var(--ease-ui), transform var(--duration-ui) var(--ease-ui), box-shadow var(--duration-ui) var(--ease-ui);
}
.app-primary-action:hover, .app-create-action:hover, .app-main .page-form form button:not(.app-outline-action):not(.app-danger-action):hover, .app-danger-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px color-mix(in oklch, var(--ink) 16%, transparent);
}
.app-outline-action:hover, .component-add-inline:hover, .table-icon-action:hover, .app-top-actions button:hover, .auth-outline-link:hover, .auth-outline-button:hover {
    transform: translateY(-1px);
}
.shortcut-grid a:hover, .component-library-list button:hover, .component-picker-list button:hover { transform: translateY(-1px); }
.app-search:hover { transform: none; box-shadow: none; }
.app-modal, .component-picker { z-index: var(--z-modal); border-color: var(--line); border-radius: var(--radius-md); box-shadow: 0 8px 8px color-mix(in oklch, var(--ink) 12%, transparent); }
.app-modal::backdrop, .component-picker::backdrop { background: color-mix(in oklch, var(--ink) 38%, transparent); }

@media (max-width: 1199px) {
    .app-shell { grid-template-columns: 240px minmax(0, 1fr); }
    .shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar { position: static; height: auto; }
    .app-sidebar nav { max-height: none; }
    .app-header, .app-content { width: min(100% - 32px, 1280px); }
    .app-header { padding-block: var(--space-4) var(--space-3); }
    .app-header h1 { font-size: var(--text-lg); }
    .app-header-inner, .content-list-heading { align-items: flex-start; flex-direction: column; }
    .app-header-inner > .app-primary-action, .content-list-heading .app-primary-action { width: 100%; }
    .content-builder, .user-form-grid, .field-form-grid, .component-settings-grid, .component-validation-grid { grid-template-columns: 1fr; }
    .shortcut-grid { grid-template-columns: 1fr; }
    .section-list li, .content-component { align-items: flex-start; flex-wrap: wrap; }
    .section-list .section-actions, .content-component .section-actions { width: 100%; justify-content: flex-end; }
}

.api-reference { width: 100%; max-width: none; }
.api-base-url { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.api-base-url code { overflow: hidden; flex: 1; color: var(--ink); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.api-base-url .app-outline-action { flex: 0 0 auto; margin: 0; }
.api-method { display: inline-flex; padding: var(--space-1) var(--space-2); border-radius: var(--radius-lg); background: var(--success-100); color: var(--success-700); font-size: var(--text-xs); font-weight: 800; }
.api-endpoints th:first-child, .api-endpoints td:first-child { width: 96px; }
.api-endpoints th:nth-child(2), .api-endpoints td:nth-child(2) { width: 36%; }
.api-endpoints th:last-child, .api-endpoints td:last-child { width: auto; padding-left: var(--space-4); text-align: left; }
.api-endpoints code { color: var(--accent-strong); font-size: var(--text-sm); }
.api-code { overflow-x: auto; margin: 0; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--gray-950); color: var(--gray-100); font: 400 var(--text-sm)/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.api-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--warning-200); border-radius: var(--radius-sm); background: var(--warning-50); color: var(--warning-900); }
.api-notice i { color: var(--warning-700); }
.api-notice p { margin: 0; max-width: 75ch; }
.api-token-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(224px, .42fr) auto; gap: var(--space-3); align-items: end; margin-top: var(--space-4); }
.api-token-form label { display: grid; gap: var(--space-2); }
.api-token-form button { min-height: var(--control-size); white-space: nowrap; }
.api-token-reveal { display: grid; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--success-200); border-radius: var(--radius-sm); background: var(--success-50); }
.api-token-reveal h3 { margin: 0; }
.api-token-reveal p { margin: 0; }
.api-token-reveal .step-label { color: var(--success-700); }
.api-tokens-table td:first-child strong, .api-tokens-table td:first-child small { display: block; }
.api-tokens-table td:last-child { width: var(--control-size); }
.api-tokens-table form { display: inline-flex; margin: 0; }
.backup-page { max-width: none; }
.backup-page > .field-form-section { display: grid; gap: var(--space-4); }
.backup-page > .field-form-section > form { width: auto; padding: 0; border: 0; background: transparent; }
.backup-page button { display: inline-flex; align-items: center; gap: var(--space-2); }
.backup-restore { border-color: var(--warning-200); background: var(--warning-50); }
.backup-restore-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.backup-restore-form label { display: grid; gap: var(--space-2); }
.backup-restore-form button { min-height: var(--control-size); white-space: nowrap; }
.backup-page .app-danger-action { border-color: var(--critical); background: var(--critical); color: #fff; }
.backup-page .app-danger-action:hover { border-color: var(--danger-700); background: var(--danger-700); }
.backup-page .app-outline-action { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.backup-migrations { margin-top: var(--space-4); }
.api-how-it-works ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.api-how-it-works li { display: flex; gap: var(--space-3); min-width: 0; }
.api-how-it-works li > span { display: grid; flex: 0 0 var(--space-5); width: var(--space-5); height: var(--space-5); place-items: center; border-radius: 50%; background: var(--accent-subtle); color: var(--accent-strong); font-size: var(--text-sm); font-weight: 800; }
.api-how-it-works strong, .api-examples h4 { color: var(--ink); }
.api-how-it-works p, .api-examples p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.api-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.api-examples h4 { margin: 0; font-size: var(--text-sm); }
.api-examples .api-code { margin-top: var(--space-3); }
@media (max-width: 767px) { .api-base-url { align-items: stretch; flex-direction: column; }.api-base-url .app-outline-action { width: 100%; }.api-endpoints th:nth-child(3), .api-endpoints td:nth-child(3) { display: none; } }
@media (max-width: 767px) { .api-token-form, .api-how-it-works ol, .api-examples, .backup-restore-form { grid-template-columns: 1fr; }.api-token-form button, .backup-restore-form button { width: 100%; }.api-tokens-table th:nth-child(3), .api-tokens-table td:nth-child(3) { display: none; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

.color-support-families { display: grid; gap: var(--space-4); }
.color-support-family { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.color-support-family > div { display: grid; gap: var(--space-1); }
.color-support-family > div strong { color: var(--ink); font-size: var(--text-sm); }
.color-support-family > div small { color: var(--muted); font-size: var(--text-xs); }
.color-support-swatches { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.color-support-swatches li { display: grid; gap: var(--space-1); min-width: 0; }
.color-support-swatch { display: block; width: 100%; aspect-ratio: 1; min-height: 24px; border: 1px solid color-mix(in oklch, var(--ink) 12%, transparent); border-radius: var(--radius-sm); background: var(--gray-200); }
.color-support-swatches small { color: var(--muted); font-size: var(--text-xs); text-align: center; }
@media (max-width: 767px) {
    .color-support-family { grid-template-columns: 1fr; gap: var(--space-2); }
    .color-support-swatches { gap: var(--space-1); }
    .color-support-swatches small { font-size: var(--text-xs); }
}

/* Ações da biblioteca são discretas: a mídia continua sendo o foco do card. */
.app-main .page-form .media-gallery-thumbnail { background:var(--surface-subtle); color:var(--ink); }
.app-main .page-form .media-gallery-thumbnail:hover { background:var(--surface-subtle); color:var(--ink); transform:none; }
.app-main .page-form .media-gallery-actions .media-gallery-view { background:transparent; color:var(--hub-primary,#517013); }
.app-main .page-form .media-gallery-actions .media-gallery-view:hover { background:color-mix(in srgb,var(--hub-primary,#517013) 10%,transparent); color:var(--hub-primary,#517013); }
.app-main .page-form .media-gallery-actions .media-gallery-delete { background:transparent; color:var(--critical); }
.app-main .page-form .media-gallery-actions .media-gallery-delete:hover { background:var(--danger-50); color:var(--danger-700); }

/* Logos são ativos de marca: a prévia ocupa o foco e usa o fundo para o qual foi cadastrada. */
.media-gallery-identity-list { gap:var(--space-4); }
.media-gallery-identity { border-radius:var(--radius-md); }
.media-gallery-identity .media-gallery-thumbnail { aspect-ratio:16 / 7; padding:var(--space-5); }
.media-gallery-identity .media-gallery-thumbnail img { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; }
.media-gallery-logo-light .media-gallery-thumbnail { background:#fff; }
.media-gallery-logo-dark .media-gallery-thumbnail { background:#121a2a; }
.media-gallery-identity .media-gallery-zoom { inset:auto 50% var(--space-2) auto; width:max-content; transform:translate(50%,4px); }
.media-gallery-identity .media-gallery-thumbnail:hover .media-gallery-zoom,.media-gallery-identity .media-gallery-thumbnail:focus-visible .media-gallery-zoom { transform:translate(50%,0); }
.media-gallery-identity .media-gallery-meta { gap:var(--space-1); padding:var(--space-3) var(--space-4) var(--space-4); }
.media-gallery-identity .media-gallery-meta strong { font-size:var(--text-xs); }
.app-main .page-form .media-gallery-logo-light .media-gallery-thumbnail { background:#fff; }
.app-main .page-form .media-gallery-logo-dark .media-gallery-thumbnail { background:#121a2a; }
.app-main .page-form .media-gallery-identity .media-gallery-thumbnail { height:auto; min-height:0; }

/* A galeria usa o mesmo cartão para logos e arquivos enviados. */
.media-gallery-list { grid-template-columns:repeat(auto-fill,minmax(260px,320px)); }
.media-gallery-identity-list { grid-template-columns:repeat(auto-fill,minmax(260px,320px)); }
.media-gallery-thumbnail { aspect-ratio:16 / 7; padding:var(--space-5); }
.media-gallery-zoom { inset:auto 50% var(--space-2) auto; width:max-content; transform:translate(50%,4px); }
.media-gallery-thumbnail:hover .media-gallery-zoom,.media-gallery-thumbnail:focus-visible .media-gallery-zoom { transform:translate(50%,0); }
.media-gallery-identity .media-gallery-meta { padding-bottom:var(--space-2); }
@media(max-width:780px){.media-gallery-list,.media-gallery-identity-list{grid-template-columns:1fr}}

/* Arquivos de conteúdo recebem uma prévia maior; excluir permanece acessível sem ocupar a área do card. */
.media-gallery-item { position:relative; }
.media-gallery-item:not(.media-gallery-identity) .media-gallery-thumbnail { aspect-ratio:4 / 3; padding:var(--space-3); }
.media-gallery-floating-remove { position:absolute; z-index:2; top:var(--space-2); right:var(--space-2); width:auto; margin:0; padding:0; border:0; background:transparent; }
.media-gallery-floating-remove button { display:grid; place-items:center; width:36px; min-width:36px; height:36px; min-height:36px; margin:0; padding:0; border:1px solid color-mix(in srgb,#fff 78%,transparent); border-radius:50%; background:color-mix(in srgb,var(--danger-700) 94%,#000); color:#fff; box-shadow:0 2px 6px color-mix(in srgb,#000 24%,transparent); }
.media-gallery-floating-remove button:hover { background:var(--danger-700); color:#fff; transform:none; }
.media-gallery-floating-remove button:focus-visible { outline:3px solid color-mix(in srgb,var(--hub-primary,#517013) 55%,#fff); outline-offset:2px; }

/* O card reúne imagem e informações; a ação flutua sem criar um segundo bloco. */
.media-gallery-item { overflow:visible; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-raised); box-shadow:none; }
.media-gallery-item:hover { border-color:color-mix(in srgb,var(--hub-primary,#517013) 36%,var(--line)); box-shadow:0 4px 8px color-mix(in oklch,var(--ink) 10%,transparent); }
.media-gallery-thumbnail,
.media-gallery-item:not(.media-gallery-identity) .media-gallery-thumbnail { height:180px; aspect-ratio:auto; padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius-md); }
.media-gallery-identity .media-gallery-thumbnail { padding:var(--space-4); }
.media-gallery-floating-remove { top:var(--space-3); right:var(--space-3); left:auto; }
.media-gallery-floating-remove button { border:0; }
.page-form form.media-gallery-floating-remove { display:block; width:36px; padding:0; border:0; border-radius:0; background:transparent; }
.app-main .page-form form.media-gallery-floating-remove button { width:36px; min-width:36px; height:36px; min-height:36px; padding:0; border:0; border-radius:50%; background:color-mix(in srgb,var(--danger-700) 94%,#000); color:#fff; }
.media-gallery-meta,
.media-gallery-identity .media-gallery-meta { padding:var(--space-3) var(--space-4); }

/* Cartão de mídia: uma prévia bem delimitada, dados legíveis e ação sem disputar atenção. */
.media-gallery-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); }
.media-gallery-item { display:flex; flex-direction:column; min-height:0; border-radius:var(--radius-md); background:var(--surface-raised); }
.media-gallery-thumbnail,
.media-gallery-item:not(.media-gallery-identity) .media-gallery-thumbnail { box-sizing:border-box; width:calc(100% - (var(--space-3) * 2)); height:180px; margin:var(--space-3) var(--space-3) 0; padding:var(--space-3); border-radius:var(--radius-sm); background:var(--surface-subtle); }
.media-gallery-item:not(.media-gallery-identity) .media-gallery-thumbnail { padding:0; }
.media-gallery-item:not(.media-gallery-identity) .media-gallery-thumbnail img { object-fit:cover; }
.app-main .page-form .media-gallery-identity .media-gallery-thumbnail { height:180px; min-height:180px; }
.media-gallery-identity .media-gallery-thumbnail { padding:var(--space-4); }
.media-gallery-meta,
.media-gallery-identity .media-gallery-meta { gap:var(--space-1); padding:var(--space-3) var(--space-4) var(--space-4); }
.media-gallery-floating-remove { top:calc(var(--space-3) + 8px); right:calc(var(--space-3) + 8px); }
.media-gallery-floating-remove button { box-shadow:0 2px 6px color-mix(in srgb,#000 28%,transparent); }
@media(max-width:1080px){.media-gallery-list,.media-gallery-identity-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){.media-gallery-list,.media-gallery-identity-list{grid-template-columns:1fr}}

/* Escolha da estrutura do site: duas alternativas comparáveis e fáceis de revisar. */
.site-structure-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
.site-structure-picker { display:grid; gap:var(--space-2); }
.site-structure-picker > strong { color:var(--ink); font-size:var(--text-sm); }
.site-structure-picker > small { color:var(--muted); font-size:var(--text-xs); }
.site-structure-option { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:var(--space-3); min-height:132px; padding:var(--space-4); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-raised); cursor:pointer; transition:border-color .18s ease,background .18s ease; }
.site-structure-option:hover { border-color:var(--hub-primary,#517013); background:color-mix(in srgb,var(--hub-primary,#517013) 4%,var(--surface-raised)); }
.site-structure-option:has(input:checked) { border-color:var(--hub-primary,#517013); background:color-mix(in srgb,var(--hub-primary,#517013) 8%,var(--surface-raised)); box-shadow:inset 0 0 0 1px var(--hub-primary,#517013); }
.site-structure-option input { width:20px; height:20px; min-height:20px; margin:2px 0 0; accent-color:var(--hub-primary,#517013); }
.site-structure-option > span:last-child { display:grid; gap:var(--space-1); }
.site-structure-option strong { color:var(--ink); font-size:var(--text-sm); }
.site-structure-option small { color:var(--muted); font-size:var(--text-xs); line-height:1.5; }
.site-structure-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:var(--radius-sm); background:color-mix(in srgb,var(--hub-primary,#517013) 12%,var(--surface-raised)); color:var(--hub-primary,#517013); }
.site-status-picker { display:grid; gap:var(--space-2); }
.site-status-picker > strong { color:var(--ink); font-size:var(--text-sm); }
.site-status-picker > small { color:var(--muted); font-size:var(--text-xs); }
.site-status-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); }
.site-status-option { position:relative; display:block; min-width:0; padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-raised); cursor:pointer; }
.site-status-option:has(input:checked) { border-color:var(--hub-primary,#517013); background:color-mix(in srgb,var(--hub-primary,#517013) 7%,var(--surface-raised)); box-shadow:inset 0 0 0 1px var(--hub-primary,#517013); }
.site-status-option input { position:absolute; width:1px; height:1px; opacity:0; }
.site-status-option > span { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:var(--space-2); }
.site-status-option i { grid-row:span 2; color:var(--hub-primary,#517013); font-size:18px; }
.site-status-option:nth-child(2) i { color:var(--critical); }
.site-status-option strong { color:var(--ink); font-size:var(--text-xs); }
.site-status-option small { color:var(--muted); font-size:var(--text-xs); }
@media(max-width:780px){.site-structure-options,.site-status-options{grid-template-columns:1fr}.site-structure-option{min-height:0}}

/* O modal tem controles próprios; não herda a cor sólida dos botões de formulário da página. */
.media-dialog .app-modal-header > .table-icon-action { display:grid; place-items:center; width:var(--control-size); min-width:var(--control-size); height:var(--control-size); min-height:var(--control-size); margin:0; padding:0; border:1px solid var(--line); background:var(--surface-raised); color:var(--ink); }
.media-dialog .app-modal-header > .table-icon-action:hover { border-color:var(--ink); background:var(--surface-subtle); color:var(--ink); transform:none; }
.media-dialog .app-modal-header > .table-icon-action > i { display:block; line-height:1; }
.media-dialog .app-modal-actions .app-outline-action { display:flex; align-items:center; justify-content:center; min-height:var(--control-size); margin:0; border:1px solid var(--line); background:var(--surface-raised); color:var(--ink); font-weight:800; text-decoration:none; }
.media-dialog .app-modal-actions .app-outline-action:hover { border-color:var(--ink); background:var(--surface-subtle); color:var(--ink); transform:none; }
.media-dialog .app-modal-header > .table-icon-action { background:var(--surface-raised) !important; color:var(--ink) !important; }
.media-dialog .app-modal-actions .app-outline-action { background:var(--surface-raised) !important; color:var(--ink) !important; }
.app-content #media-upload-dialog .app-modal-header > .table-icon-action { background:var(--surface-raised) !important; color:var(--ink) !important; }

/* Base única para diálogos: cabeçalho, fechamento e ação secundária usam o mesmo vocabulário visual. */
:is(.app-modal,.component-picker) { color:var(--ink); }
:is(.app-modal,.component-picker) :is(.app-modal-header,.component-picker-header) > .table-icon-action,
:is(.app-modal,.component-picker) :is(.app-modal-header,.component-picker-header) > form .table-icon-action { display:grid; place-items:center; width:var(--control-size); min-width:var(--control-size); height:var(--control-size); min-height:var(--control-size); margin:0; padding:0; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-raised) !important; color:var(--ink) !important; }
:is(.app-modal,.component-picker) :is(.app-modal-header,.component-picker-header) > .table-icon-action:hover,
:is(.app-modal,.component-picker) :is(.app-modal-header,.component-picker-header) > form .table-icon-action:hover { border-color:var(--ink); background:var(--surface-subtle) !important; color:var(--ink) !important; transform:none; }
:is(.app-modal,.component-picker) :is(.app-modal-header,.component-picker-header) .table-icon-action i { display:block; line-height:1; }
:is(.app-modal,.component-picker) .app-modal-actions .app-outline-action,
:is(.app-modal,.component-picker) .component-picker-actions .app-outline-action { display:flex; align-items:center; justify-content:center; min-height:var(--control-size); margin:0; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-raised) !important; color:var(--ink) !important; font-weight:800; text-decoration:none; }
:is(.app-modal,.component-picker) .app-modal-actions .app-outline-action:hover,
:is(.app-modal,.component-picker) .component-picker-actions .app-outline-action:hover { border-color:var(--ink); background:var(--surface-subtle) !important; color:var(--ink) !important; transform:none; }
.app-modal .app-modal-actions .app-modal-primary { display:flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:var(--control-size); margin:0; border:1px solid var(--hub-primary); border-radius:var(--radius-sm); background:var(--hub-primary) !important; color:#fff !important; font-weight:800; }
.app-modal .app-modal-actions .app-modal-primary:hover { border-color:var(--hub-primary-700,var(--hub-primary)); background:var(--hub-primary-700,var(--hub-primary)) !important; color:#fff !important; transform:none; }

/* Retorno único para ações do painel; usa os papéis semânticos e não a cor do tema. */
.app-feedback { display:flex; align-items:flex-start; gap:var(--space-2); margin:0 auto var(--space-4); padding:var(--space-3) var(--space-4); border:1px solid transparent; border-radius:var(--radius-sm); font-size:var(--text-xs); font-weight:700; line-height:1.45; }
.app-feedback > i { margin-top:2px; font-size:16px; }
.app-feedback--success { border-color:color-mix(in srgb,var(--success,#2f855a) 35%,#fff); background:color-mix(in srgb,var(--success,#2f855a) 11%,#fff); color:var(--success-ink,#1f5d3b); }
.app-feedback--error { border-color:color-mix(in srgb,var(--critical,#b91c1c) 35%,#fff); background:color-mix(in srgb,var(--critical,#b91c1c) 9%,#fff); color:var(--danger-700,#991b1b); }
.app-feedback--notice { border-color:color-mix(in srgb,var(--hub-primary,#111827) 24%,#fff); background:color-mix(in srgb,var(--hub-primary,#111827) 7%,#fff); color:var(--ink,#202938); }

/* Ações de formulário seguem sempre a cor primária configurada para o site. */
.app-main .page-form-actions > button:not(.app-outline-action) { border-color:var(--hub-primary,#111827) !important; background:var(--hub-primary,#111827) !important; color:var(--hub-on-primary,#fff) !important; }
.app-main .page-form-actions > button:not(.app-outline-action):hover { border-color:var(--hub-primary-700,var(--hub-primary,#111827)) !important; background:var(--hub-primary-700,var(--hub-primary,#111827)) !important; color:var(--hub-on-primary,#fff) !important; }

/* Preenchimento de conteúdo: o template dita os campos; metadados não disputam espaço com a escrita. */
.page-form:has(> form > .post-content-fields) > form > fieldset { display:none; }
.rich-text-source { display:none; }
.rich-text-editor { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-raised); }
.rich-text-toolbar { display:flex; flex-wrap:wrap; gap:var(--space-1); padding:var(--space-2); border-bottom:1px solid var(--line); background:var(--surface-subtle); }
.rich-text-toolbar button { display:grid; place-items:center; width:32px; min-width:32px; height:32px; min-height:32px; margin:0; padding:0; border:0; border-radius:6px; background:transparent !important; color:var(--ink) !important; font-size:13px; }
.rich-text-toolbar button:hover { background:color-mix(in srgb,var(--hub-primary,#111827) 10%,#fff) !important; color:var(--hub-primary,#111827) !important; transform:none; }
.rich-text-area { min-height:180px; padding:var(--space-3); outline:0; color:var(--ink); line-height:1.65; }
.rich-text-editor--compact .rich-text-area { min-height:112px; }
.rich-text-area:empty::before { content:attr(data-placeholder); color:var(--muted); pointer-events:none; }
.rich-text-area:focus-visible { box-shadow:inset 0 0 0 2px var(--hub-primary,#111827); }