/* Header e navegação */
.site-header { position: sticky; top: 0; z-index: 100; min-height: var(--header-height); background: color-mix(in srgb, var(--pxf-ink-950) 92%, transparent); color: #FFFFFF; border-bottom: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(18px); }
.header-inner { min-height: var(--header-height); display: flex; align-items: center; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); margin-right: auto; text-decoration: none; }
.brand img { width: 44px; height: 44px; }
.brand-copy { display: grid; line-height: 1.08; }
.brand-copy strong { font-size: 1.05rem; letter-spacing: -.02em; }
.brand-copy small { margin-top: .25rem; color: #AAB9D0; font-size: .67rem; font-weight: 750; letter-spacing: .17em; }
.primary-nav { display: flex; align-items: center; gap: var(--space-5); }
.primary-nav a { position: relative; color: #DCE5F3; font-size: var(--font-size-14); font-weight: 650; text-decoration: none; }
.primary-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.5rem; height: 2px; background: var(--gradient-brand); transition: right var(--duration-base) var(--ease-standard); }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.icon-button, .menu-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-round); color: #FFFFFF; background: rgba(255,255,255,.04); cursor: pointer; transition: background var(--duration-fast), transform var(--duration-fast); }
.icon-button:hover, .menu-toggle:hover { background: rgba(255,255,255,.12); }
.icon-button:active, .menu-toggle:active { transform: scale(.96); }
.menu-toggle { display: none; width: auto; padding: 0 var(--space-4); font-weight: 750; }
.install-button { white-space: nowrap; }

/* Botões */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; border: 1px solid transparent; border-radius: var(--radius-round); padding: .72rem 1.15rem; background: var(--color-primary); color: #FFFFFF; font-weight: 750; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-xs); transition: transform var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast); }
.button:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.button-secondary:hover { background: var(--color-surface-muted); }
.button-ghost { background: transparent; color: var(--color-primary); border-color: transparent; box-shadow: none; }
.button-ghost:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); box-shadow: none; }
.button-danger { background: var(--pxf-danger-600); }
.button-sm { min-height: 36px; padding: .5rem .85rem; font-size: var(--font-size-14); }
.button-lg { min-height: 52px; padding: .9rem 1.4rem; font-size: var(--font-size-18); }
.button[disabled], .button.is-disabled { opacity: .48; pointer-events: none; }

/* Badges, tags, status */
.badge { display: inline-flex; align-items: center; gap: .35rem; min-height: 26px; padding: .25rem .65rem; border-radius: var(--radius-round); background: var(--color-surface-muted); color: var(--color-text-muted); border: 1px solid var(--color-border); font-size: var(--font-size-12); font-weight: 800; letter-spacing: .02em; }
.badge-primary { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent); border-color: color-mix(in srgb, var(--color-primary) 24%, transparent); }
.badge-success { color: var(--pxf-success-600); background: var(--pxf-success-100); border-color: transparent; }
.badge-warning { color: var(--pxf-warning-700); background: var(--pxf-warning-100); border-color: transparent; }
.badge-danger { color: var(--pxf-danger-600); background: var(--pxf-danger-100); border-color: transparent; }
[data-theme="dark"] .badge-success, [data-theme="dark"] .badge-warning, [data-theme="dark"] .badge-danger { filter: saturate(.8) brightness(.8); color: #FFFFFF; }

/* Cards */
.card { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-18); background: var(--color-surface); box-shadow: var(--shadow-xs); overflow: hidden; }
.card-body { padding: var(--space-6); }
.card-kicker { color: var(--color-primary); font-size: var(--font-size-12); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.card p { color: var(--color-text-muted); }
.card-interactive { transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base); }
.card-interactive:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); box-shadow: var(--shadow-md); }
.card-feature { min-height: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)), var(--color-surface)); }
.card-feature .card-index { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--space-5); border-radius: var(--radius-14); background: var(--gradient-brand); color: var(--pxf-ink-950); font-weight: 900; }
.metric-card { padding: var(--space-6); }
.metric-card strong { display: block; margin-bottom: var(--space-2); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.055em; }
.metric-card span { color: var(--color-text-muted); }

/* Formulários */
.field { display: grid; gap: var(--space-2); }
.field label, .field-label { font-size: var(--font-size-14); font-weight: 750; }
.field-hint { color: var(--color-text-subtle); font-size: var(--font-size-12); }
.input, .select, .textarea { width: 100%; border: 1px solid var(--color-border-strong); border-radius: var(--radius-10); background: var(--color-surface); color: var(--color-text); padding: .78rem .9rem; box-shadow: var(--shadow-xs); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border-strong)); }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.textarea { min-height: 120px; resize: vertical; }
.check { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--color-primary); }

/* Feedback */
.alert { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-14); background: var(--color-surface); }
.alert-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-round); font-weight: 900; }
.alert-info { border-color: color-mix(in srgb, var(--pxf-info-600) 30%, var(--color-border)); background: color-mix(in srgb, var(--pxf-info-100) 55%, var(--color-surface)); }
.alert-success { border-color: color-mix(in srgb, var(--pxf-success-600) 30%, var(--color-border)); background: color-mix(in srgb, var(--pxf-success-100) 55%, var(--color-surface)); }
.alert-warning { border-color: color-mix(in srgb, var(--pxf-warning-700) 30%, var(--color-border)); background: color-mix(in srgb, var(--pxf-warning-100) 55%, var(--color-surface)); }
.alert-danger { border-color: color-mix(in srgb, var(--pxf-danger-600) 30%, var(--color-border)); background: color-mix(in srgb, var(--pxf-danger-100) 55%, var(--color-surface)); }
.progress { height: 10px; overflow: hidden; border-radius: var(--radius-round); background: var(--color-surface-muted); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--gradient-brand); }

/* Tabs */
.tabs { border-bottom: 1px solid var(--color-border); }
.tab-list { display: flex; gap: var(--space-2); overflow-x: auto; }
.tab-button { border: 0; border-bottom: 3px solid transparent; padding: .8rem .9rem; background: transparent; color: var(--color-text-muted); font-weight: 750; cursor: pointer; }
.tab-button[aria-selected="true"] { border-color: var(--color-primary); color: var(--color-text); }
.tab-panel { padding: var(--space-6) 0; }

/* Accordion */
.accordion { border: 1px solid var(--color-border); border-radius: var(--radius-14); background: var(--color-surface); overflow: hidden; }
.accordion-item + .accordion-item { border-top: 1px solid var(--color-border); }
.accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border: 0; padding: var(--space-5); background: transparent; color: var(--color-text); text-align: left; font-weight: 780; cursor: pointer; }
.accordion-trigger span:last-child { transition: transform var(--duration-base); }
.accordion-trigger[aria-expanded="true"] span:last-child { transform: rotate(45deg); }
.accordion-panel { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-muted); }

/* Data display */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-14); background: var(--color-surface); }
.table { width: 100%; border-collapse: collapse; min-width: 680px; }
.table th, .table td { padding: .9rem 1rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
.table th { background: var(--color-surface-muted); font-size: var(--font-size-12); letter-spacing: .06em; text-transform: uppercase; }
.table tr:last-child td { border-bottom: 0; }
.avatar { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--gradient-brand); color: var(--pxf-ink-950); font-weight: 900; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--color-text-muted); font-size: var(--font-size-14); }
.breadcrumb a { color: var(--color-primary); text-decoration: none; }
.breadcrumb span[aria-current] { color: var(--color-text); font-weight: 700; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; padding: var(--space-4); background: rgba(5, 9, 18, .72); backdrop-filter: blur(6px); }
.modal-backdrop.is-open { display: grid; }
.modal { width: min(100%, 620px); max-height: min(90vh, 760px); overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-18); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.modal-header, .modal-body, .modal-footer { padding: var(--space-5); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-border); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-3); border-top: 1px solid var(--color-border); }
.modal-close { border: 0; background: transparent; font-size: 1.5rem; cursor: pointer; }

/* Toast */
.toast-region { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 1200; display: grid; gap: var(--space-3); width: min(calc(100% - 2rem), 380px); }
.toast { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-14); background: var(--color-surface); box-shadow: var(--shadow-lg); animation: toast-in var(--duration-slow) var(--ease-standard); }
.toast button { border: 0; background: transparent; cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Footer */
.site-footer { background: var(--pxf-ink-950); color: #FFFFFF; padding: var(--space-12) 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-8); align-items: start; }
.footer-brand { display: flex; gap: var(--space-3); align-items: center; }
.footer-brand img { width: 48px; height: 48px; }
.site-footer p, .site-footer span { color: #AAB8CC; }
.footer-meta { display: grid; gap: var(--space-2); }
.footer-meta strong { font-size: var(--font-size-14); }

@media (max-width: 980px) {
  .primary-nav { display: none; position: absolute; top: var(--header-height); left: 0; right: 0; padding: var(--space-5); background: var(--pxf-ink-950); border-bottom: 1px solid rgba(255,255,255,.1); flex-direction: column; align-items: stretch; }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { padding: .6rem 0; }
  .menu-toggle { display: inline-flex; }
  .install-button { display: none !important; }
}
@media (max-width: 720px) {
  .brand-copy small { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .header-actions .button { display: none; }
}