/* Fence Watch — componentes. Gerado por build-bundle.py a partir de src/css/ — não edite à mão. Prefixo fw-. */
.fw-root, .fw-root * { box-sizing: border-box; }
.fw-root { font-family: var(--font-sans); color: var(--ink); font-size: 15px; line-height: 22px; }
.fw-focus:focus-visible, .fw-btn:focus-visible, .fw-input:focus-visible, .fw-check input:focus-visible + .fw-check-box, .fw-switch input:focus-visible + .fw-switch-track, .fw-tab:focus-visible, .fw-link:focus-visible, .fw-nav a:focus-visible, .fw-page:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* hidden sempre esconde: o display das classes fw-* (flex, grid…) venceria o display:none do navegador */
[class*="fw-"][hidden] { display: none !important; }

/* Mark */
.fw-mark { display: inline-block; vertical-align: middle; flex: none; }

/* Icon */
.fw-icon { display: inline-block; vertical-align: middle; flex: none; }

/* Button */
.fw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: 600; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.fw-btn--md { height: 40px; padding: 0 var(--space-3); font-size: 15px; }
.fw-btn--sm { height: 32px; padding: 0 var(--space-2); font-size: 13px; gap: var(--space-1); }
.fw-btn--lg { height: 48px; padding: 0 var(--space-4); font-size: 16px; }
.fw-btn--full { width: 100%; }
.fw-btn--primary { background: var(--brand); color: var(--on-brand); }
.fw-btn--primary:hover { filter: brightness(1.08); }
.fw-btn--secondary { background: transparent; color: var(--ink); border-color: var(--hairline); }
.fw-btn--secondary:hover { background: var(--surface-2); }
.fw-btn--ghost { background: transparent; color: var(--ink); }
.fw-btn--ghost:hover { background: var(--surface-2); }
.fw-btn--danger { background: var(--danger); color: var(--on-danger); }
.fw-btn--danger:hover { filter: brightness(1.08); }
.fw-btn[disabled], .fw-btn--disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.fw-btn--icon { padding: 0; width: 40px; }
.fw-btn--icon.fw-btn--sm { width: 32px; } .fw-btn--icon.fw-btn--lg { width: 48px; }
.fw-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fw-spin .7s linear infinite; }
@keyframes fw-spin { to { transform: rotate(360deg); } }

/* Link */
.fw-link { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; border-radius: 2px; }
.fw-link:hover { text-decoration-thickness: 2px; }
.fw-link--quiet { color: var(--ink); text-decoration-color: var(--hairline); }
.fw-link--quiet:hover { text-decoration-color: var(--ink); }

/* Field & inputs */
.fw-field { display: flex; flex-direction: column; gap: var(--space-1); }
.fw-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.fw-label b { color: var(--danger); font-weight: 600; }
.fw-hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.fw-error { font-size: 13px; line-height: 18px; color: var(--danger); display: flex; gap: var(--space-1); align-items: center; }
.fw-inputwrap { position: relative; display: flex; align-items: center; }
.fw-input { width: 100%; height: 40px; padding: 0 var(--space-3); background: var(--surface-2); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 15px; line-height: 22px; }
.fw-input::placeholder { color: var(--ink-muted); }
.fw-input:hover { border-color: var(--ink-muted); }
.fw-input--mono { font-family: var(--font-mono); font-size: 13px; }
.fw-input--invalid { border-color: var(--danger); }
.fw-input--sm { height: 32px; font-size: 13px; padding: 0 var(--space-2); }
.fw-input[disabled] { opacity: .45; cursor: not-allowed; }
.fw-inputwrap--lead .fw-input { padding-left: 40px; }
.fw-inputwrap--trail .fw-input { padding-right: 40px; }
.fw-input-lead, .fw-input-trail { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; color: var(--ink-muted); pointer-events: none; }
.fw-input-lead { left: 12px; } .fw-input-trail { right: 12px; }
.fw-input-action { all: unset; box-sizing: border-box; position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--ink-muted); cursor: pointer; }
.fw-input-action:hover { color: var(--ink); background: var(--hairline); }
.fw-input-action:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }
.fw-input-action[aria-pressed="true"] { color: var(--ink); }
.fw-input-action[disabled] { opacity: .45; cursor: not-allowed; }
@media (pointer: coarse) { .fw-input-action { width: 40px; height: 40px; right: 2px; } }
textarea.fw-input { height: auto; min-height: 96px; padding: var(--space-2) var(--space-3); resize: vertical; }
select.fw-input { appearance: none; padding-right: 40px; cursor: pointer; }
.fw-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: 15px; line-height: 22px; position: relative; }
.fw-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fw-check-box { width: 18px; height: 18px; border: 1.5px solid var(--ink-muted); border-radius: 4px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--on-brand); flex: none; }
.fw-check--radio .fw-check-box { border-radius: 50%; }
.fw-check input:checked + .fw-check-box { background: var(--brand); border-color: var(--brand); }
.fw-check--radio input:checked + .fw-check-box::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-brand); }
.fw-check input:disabled ~ * { opacity: .45; }
.fw-switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; position: relative; }
.fw-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fw-switch-track { width: 36px; height: 20px; border-radius: 10px; background: var(--hairline); position: relative; transition: background .12s; flex: none; }
.fw-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform .12s; }
.fw-switch input:checked + .fw-switch-track { background: var(--brand); }
.fw-switch input:checked + .fw-switch-track::after { transform: translateX(16px); background: var(--on-brand); }

/* Badge, Tag */
.fw-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent; }
.fw-badge--neutral { background: var(--surface-2); color: var(--ink); border-color: var(--hairline); }
.fw-badge--brand { background: var(--brand); color: var(--on-brand); }
.fw-badge--warning { background: var(--warning); color: var(--on-warning); }
.fw-badge--danger { background: var(--danger); color: var(--on-danger); }
.fw-badge--outline { background: transparent; border-color: currentColor; }
.fw-badge--outline.fw-badge--brand { color: var(--brand); } .fw-badge--outline.fw-badge--warning { color: var(--warning); } .fw-badge--outline.fw-badge--danger { color: var(--danger); }
.fw-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fw-tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px 0 8px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--hairline); font-size: 13px; line-height: 18px; font-family: var(--font-mono); }
.fw-tag button { all: unset; cursor: pointer; display: inline-flex; padding: 2px; border-radius: 3px; color: var(--ink-muted); }
.fw-tag button:hover { color: var(--ink); background: var(--hairline); }

/* Stat, Progress, Avatar */
.fw-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.fw-stat-value { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 38px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fw-stat-delta { font-size: 13px; line-height: 18px; display: inline-flex; gap: 4px; align-items: center; }
.fw-tone--brand { color: var(--brand); } .fw-tone--warning { color: var(--warning); } .fw-tone--danger { color: var(--danger); } .fw-tone--muted { color: var(--ink-muted); }
.fw-progress { height: 6px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 3px; overflow: hidden; }
.fw-progress > span { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.fw-progress--warning > span { background: var(--warning); } .fw-progress--danger > span { background: var(--danger); }
.fw-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--hairline); color: var(--ink); font-weight: 600; overflow: hidden; flex: none; font-family: var(--font-display); }
.fw-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Card, Divider, KeyValue */
.fw-card { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-md); display: flex; flex-direction: column; }
.fw-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) 0; }
.fw-card-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 22px; }
.fw-card-body { padding: var(--space-3); }
.fw-card--flush .fw-card-body { padding: 0; }
.fw-divider { border: 0; border-top: 1px solid var(--hairline); margin: var(--space-3) 0; }
.fw-kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); font-size: 13px; line-height: 18px; }
.fw-kv dt { color: var(--ink-muted); margin: 0; } .fw-kv dd { margin: 0; }
.fw-mono { font-family: var(--font-mono); font-size: 13px; line-height: 20px; }

/* Table */
.fw-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.fw-table th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); padding: 0 var(--space-3); height: 40px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.fw-table td { padding: 0 var(--space-3); height: 40px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.fw-table tr:last-child td { border-bottom: 0; }
.fw-table tbody tr:hover td { background: var(--surface-2); }
.fw-table .fw-right { text-align: right; font-variant-numeric: tabular-nums; }
.fw-table--dense th, .fw-table--dense td { height: 32px; }

/* Alert, Toast */
.fw-alert { display: flex; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-1); align-items: flex-start; }
.fw-alert-icon { flex: none; margin-top: 1px; }
.fw-alert-title { font-weight: 600; }
.fw-alert-body { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.fw-alert--brand { border-color: var(--brand); } .fw-alert--brand .fw-alert-icon { color: var(--brand); }
.fw-alert--warning { border-color: var(--warning); } .fw-alert--warning .fw-alert-icon { color: var(--warning); }
.fw-alert--danger { border-color: var(--danger); } .fw-alert--danger .fw-alert-icon { color: var(--danger); }
.fw-alert-close { all: unset; cursor: pointer; margin-left: auto; color: var(--ink-muted); display: inline-flex; padding: 2px; border-radius: 4px; }
.fw-alert-close:hover { color: var(--ink); background: var(--surface-2); }
.fw-toast { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--ink); color: var(--surface-0); border-radius: var(--radius-md); font-size: 13px; line-height: 18px; box-shadow: var(--shadow-md); }
.fw-toast .fw-toast-icon--brand { color: var(--brand); } .fw-toast .fw-toast-icon--warning { color: var(--warning); } .fw-toast .fw-toast-icon--danger { color: var(--danger); }
.fw-toast .fw-btn { color: var(--surface-0); }

/* Elevação: .fw-elev-sm/md/lg para menus, popovers e drawers construídos fora da biblioteca */
.fw-elev-sm { box-shadow: var(--shadow-sm); } .fw-elev-md { box-shadow: var(--shadow-md); } .fw-elev-lg { box-shadow: var(--shadow-lg); }

/* Modal */
.fw-modal-backdrop { position: fixed; inset: 0; background: rgba(11,18,32,.6); display: flex; align-items: center; justify-content: center; padding: var(--space-4); z-index: 50; }
.fw-modal { width: 100%; max-width: 480px; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-lg); display: flex; flex-direction: column; box-shadow: var(--shadow-md); }
.fw-modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); }
.fw-modal-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 24px; }
.fw-modal-body { padding: var(--space-4); }
.fw-modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--hairline); }

/* Tabs, Breadcrumb, Pagination */
.fw-tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--hairline); }
.fw-tab { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 40px; font-size: 15px; font-weight: 500; color: var(--ink-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fw-tab:hover { color: var(--ink); }
.fw-tab--active { color: var(--ink); border-bottom-color: var(--brand); }
.fw-tab-count { font-size: 12px; line-height: 16px; padding: 0 6px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--hairline); color: var(--ink-muted); }
.fw-crumbs { display: flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-muted); flex-wrap: wrap; }
.fw-crumbs a { color: var(--ink-muted); text-decoration: none; } .fw-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.fw-crumbs .fw-crumb--current { color: var(--ink); }
.fw-pages { display: flex; align-items: center; gap: var(--space-1); }
.fw-page { all: unset; cursor: pointer; min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-muted); }
.fw-page:hover { background: var(--surface-2); color: var(--ink); }
.fw-page--active { background: var(--surface-2); color: var(--ink); border: 1px solid var(--hairline); }
.fw-page[disabled], .fw-page--off { opacity: .4; cursor: not-allowed; }
a.fw-page { text-decoration: none; color: inherit; }
.fw-pages-info { font-size: 13px; color: var(--ink-muted); margin-right: var(--space-2); }

/* Header, Sidebar, PageHeader, Footer */
.fw-header { display: flex; align-items: center; gap: var(--space-5); height: 64px; padding: 0 var(--space-4); background: var(--surface-0); border-bottom: 1px solid var(--hairline); }
.fw-nav { display: flex; gap: var(--space-4); margin-left: var(--space-2); }
.fw-nav a { color: var(--ink-muted); text-decoration: none; font-weight: 500; font-size: 15px; height: 64px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fw-nav a:hover { color: var(--ink); } .fw-nav a.fw-nav--active { color: var(--ink); border-bottom-color: var(--brand); }
.fw-header-actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.fw-sidebar { width: 240px; background: var(--surface-1); border-right: 1px solid var(--hairline); display: flex; flex-direction: column; padding: var(--space-3) var(--space-2); gap: var(--space-1); }
.fw-sidebar-group { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); padding: var(--space-3) var(--space-2) var(--space-1); }
.fw-side-item { display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; font-size: 15px; font-weight: 500; }
.fw-side-item:hover { background: var(--surface-2); color: var(--ink); }
.fw-side-item--active { background: var(--surface-2); color: var(--ink); box-shadow: inset 2px 0 0 var(--brand); }
.fw-side-item .fw-badge { margin-left: auto; }
.fw-sidebar-foot { margin-top: auto; padding: var(--space-2); border-top: 1px solid var(--hairline); }
.fw-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--hairline); }
.fw-eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.fw-h1 { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 38px; letter-spacing: -.01em; margin: 0; }
.fw-h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 28px; margin: 0; }
.fw-lede { color: var(--ink-muted); margin: 0; }
.fw-footer { border-top: 1px solid var(--hairline); padding: var(--space-6) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); background: var(--surface-0); }
.fw-footer-cols { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--space-5); }
.fw-footer h4 { margin: 0 0 var(--space-2); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.fw-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fw-footer a { color: var(--ink); text-decoration: none; font-size: 13px; } .fw-footer a:hover { text-decoration: underline; }
.fw-footer-note { font-size: 13px; color: var(--ink-muted); display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* Empty, Skeleton */
.fw-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); border: 1px dashed var(--hairline); border-radius: var(--radius-md); color: var(--ink-muted); }
.fw-empty .fw-icon { color: var(--ink-muted); }
.fw-empty-title { color: var(--ink); font-weight: 600; }
.fw-skel { background: var(--surface-2); border-radius: var(--radius-sm); animation: fw-pulse 1.4s ease-in-out infinite; }
@keyframes fw-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .fw-skel { animation: none; } }
.fw-skel-lines { display: flex; flex-direction: column; gap: var(--space-2); }

/* Site: Hero, FeatureCard, PricingCard */
.fw-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-6); align-items: center; padding: var(--space-6) 0; }
.fw-hero-title { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 60px; letter-spacing: -.02em; margin: 0; }
.fw-hero-desc { font-size: 18px; line-height: 28px; color: var(--ink-muted); margin: 0; max-width: 52ch; }
.fw-hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.fw-hero > div { display: flex; flex-direction: column; gap: var(--space-4); }
.fw-feature { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-1); }
.fw-feature-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--hairline); display: inline-flex; align-items: center; justify-content: center; color: var(--brand); }
.fw-feature h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 24px; }
.fw-feature p { margin: 0; color: var(--ink-muted); font-size: 15px; }
.fw-pricing { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface-1); }
.fw-pricing--highlight { border-color: var(--brand); }
.fw-pricing-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.fw-pricing-price { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 44px; letter-spacing: -.02em; }
.fw-pricing-price small { font-family: var(--font-sans); font-weight: 400; font-size: 15px; color: var(--ink-muted); letter-spacing: 0; }
.fw-pricing ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.fw-pricing li { display: flex; gap: var(--space-2); align-items: flex-start; }
.fw-pricing li .fw-icon { color: var(--brand); margin-top: 2px; }

/* ---------- Sem style inline (CSP) ----------
   Tudo que antes dependia de style="" no HTML: barras em SVG (largura em atributo), escalas fixas por classe.
   As regras antigas (.fw-progress > span, .fw-pillar-bar i, .fw-catbar-track i) seguem no CSS para não quebrar
   HTML já escrito, mas estão depreciadas — o style="width:…" delas é bloqueado pela CSP. */
.fw-barsvg { display: block; width: 100%; height: 100%; }
.fw-barsvg rect { fill: var(--ink-muted); }
.fw-progress > .fw-barsvg rect { fill: var(--brand); }
.fw-progress--warning > .fw-barsvg rect { fill: var(--warning); }
.fw-progress--danger > .fw-barsvg rect { fill: var(--danger); }
.fw-pillar-bar--a rect { fill: var(--grade-a); } .fw-pillar-bar--b rect { fill: var(--grade-b); } .fw-pillar-bar--c rect { fill: var(--grade-c); }
.fw-pillar-bar--d rect { fill: var(--grade-d); } .fw-pillar-bar--e rect { fill: var(--grade-e); } .fw-pillar-bar--f rect { fill: var(--grade-f); }
.fw-sevbar-track > .fw-barsvg rect { stroke: var(--surface-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fw-barsvg .fw-sevbar-seg--critical { fill: var(--sev-critical); } .fw-barsvg .fw-sevbar-seg--high { fill: var(--sev-high); }
.fw-barsvg .fw-sevbar-seg--medium { fill: var(--sev-medium); } .fw-barsvg .fw-sevbar-seg--low { fill: var(--sev-low); }
.fw-barsvg .fw-sevbar-seg--info { fill: var(--ink-muted); }
.fw-sevbar-track:has(> .fw-barsvg) { display: block; }

/* Avatar: escala fixa */
.fw-avatar--20 { width: 20px; height: 20px; font-size: 8px; } .fw-avatar--24 { width: 24px; height: 24px; font-size: 10px; }
.fw-avatar--32 { width: 32px; height: 32px; font-size: 13px; } .fw-avatar--40 { width: 40px; height: 40px; font-size: 16px; }
.fw-avatar--48 { width: 48px; height: 48px; font-size: 19px; } .fw-avatar--64 { width: 64px; height: 64px; font-size: 26px; }

/* Skeleton: variantes */
.fw-skel--text { width: 100%; height: 14px; }
.fw-skel--short { width: 60%; }
.fw-skel--title { width: 40%; height: 24px; }
.fw-skel--avatar { width: 32px; height: 32px; border-radius: 50%; }
.fw-skel--block { width: 100%; height: 96px; border-radius: var(--radius-md); }
.fw-skel--inline { display: inline-block; width: 120px; height: 12px; vertical-align: middle; }

/* Modal e Drawer: larguras por tamanho */
.fw-modal--sm { max-width: 400px; } .fw-modal--md { max-width: 480px; } .fw-modal--lg { max-width: 640px; } .fw-modal--xl { max-width: 800px; }
.fw-drawer--sm { width: 320px; } .fw-drawer--md { width: 400px; } .fw-drawer--lg { width: 560px; }
.fw-assignee .fw-pop-panel { width: 280px; }

/* Árvore: indentação por nível (0–6) */
.fw-tree-row--i0 { --fw-indent: 0; } .fw-tree-row--i1 { --fw-indent: 1; } .fw-tree-row--i2 { --fw-indent: 2; } .fw-tree-row--i3 { --fw-indent: 3; }
.fw-tree-row--i4 { --fw-indent: 4; } .fw-tree-row--i5 { --fw-indent: 5; } .fw-tree-row--i6 { --fw-indent: 6; }
.fw-tree-loading--i0 { --fw-indent: 0; } .fw-tree-loading--i1 { --fw-indent: 1; } .fw-tree-loading--i2 { --fw-indent: 2; } .fw-tree-loading--i3 { --fw-indent: 3; }
.fw-tree-loading--i4 { --fw-indent: 4; } .fw-tree-loading--i5 { --fw-indent: 5; } .fw-tree-loading--i6 { --fw-indent: 6; }

/* Utilitários pequenos */
.fw-link-ext { margin-left: 4px; }
.fw-lede--sm { font-size: 13px; line-height: 18px; }
.fw-m0 { margin: 0; }
.fw-pricing-head { display: flex; justify-content: space-between; align-items: center; }
.fw-queue-dot circle:not([fill]) { fill: var(--watch); }
.fw-ou-pop .fw-pop-panel { width: 360px; }

/* ---------- Componentes do produto (dados de exposição). Consome --watch, --on-watch, --watch-soft, --sev-*, --on-sev-*, --grade-*. ---------- */

/* Logo */
.fw-logo { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; }
.fw-logo-text { display: flex; flex-direction: column; line-height: 1; }
.fw-logo-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.fw-logo-tag { font-family: var(--font-sans); color: var(--ink-muted); font-weight: 400; }
.fw-logo--md .fw-logo-name { font-size: 18px; line-height: 20px; }
.fw-logo--md .fw-logo-tag { font-size: 11px; line-height: 14px; }
.fw-logo--lg .fw-logo-name { font-size: 28px; line-height: 30px; }
.fw-logo--lg .fw-logo-tag { font-size: 13px; line-height: 18px; }
.fw-logo--sm .fw-logo-name { font-size: 15px; line-height: 16px; }
.fw-logo--sm .fw-logo-tag { font-size: 11px; line-height: 14px; }
.fw-logo--inline .fw-logo-text { flex-direction: row; align-items: baseline; }
.fw-logo--inline .fw-logo-tag { white-space: pre; }
.fw-logo-mark { flex: none; }

/* SeverityBadge — palavra + barras: nível codificado em forma, não só em cor */
.fw-sev { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 6px; border-radius: 11px; border: 1px solid transparent; font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.fw-sev--compact { padding: 0 6px; }
.fw-sev-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.fw-sev-bars i { display: block; width: 2.5px; background: currentColor; opacity: .3; border-radius: 1px; }
.fw-sev-bars i:nth-child(1) { height: 4px; } .fw-sev-bars i:nth-child(2) { height: 6px; } .fw-sev-bars i:nth-child(3) { height: 8.5px; } .fw-sev-bars i:nth-child(4) { height: 11px; }
.fw-sev-bars i.on { opacity: 1; }
.fw-sev--critical { background: var(--sev-critical); color: var(--on-sev-critical); }
.fw-sev--high { background: var(--sev-high); color: var(--on-sev-high); }
.fw-sev--medium { background: var(--sev-medium); color: var(--on-sev-medium); }
.fw-sev--low { background: transparent; color: var(--sev-low); border-color: currentColor; }
.fw-sev--info { background: transparent; color: var(--sev-info); border-color: var(--hairline); }
.fw-sev-count { font-variant-numeric: tabular-nums; opacity: .85; }
.fw-sev-count::before { content: "·"; margin-right: 4px; }

/* StatusBadge — fluxo do finding, contorno + ponto */
.fw-status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 11px; border: 1px solid var(--hairline); background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.fw-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); flex: none; }
.fw-status--danger .fw-status-dot { background: var(--danger); }
.fw-status--warning .fw-status-dot { background: var(--warning); }
.fw-status--watch .fw-status-dot { background: var(--watch); }
.fw-status--brand .fw-status-dot { background: var(--brand); }
.fw-status--neutral { color: var(--ink-muted); }

/* GradeChip — letra do rating; contorno na cor do grade */
.fw-grade { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; border: 1.5px solid currentColor; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; flex: none; }
.fw-grade--sm { min-width: 20px; height: 20px; font-size: 12px; padding: 0 4px; border-radius: 4px; }
.fw-grade--md { min-width: 28px; height: 28px; font-size: 16px; padding: 0 6px; }
.fw-grade--lg { min-width: 44px; height: 44px; font-size: 26px; padding: 0 8px; border-radius: var(--radius-md); border-width: 2px; }
.fw-grade--a { color: var(--grade-a); } .fw-grade--b { color: var(--grade-b); } .fw-grade--c { color: var(--grade-c); }
.fw-grade--d { color: var(--grade-d); } .fw-grade--e { color: var(--grade-e); } .fw-grade--f { color: var(--grade-f); }
.fw-grade--none { color: var(--ink-muted); border-style: dashed; }

/* RiskScore */
.fw-score { display: flex; flex-direction: column; gap: var(--space-1); }
.fw-score-row { display: flex; align-items: baseline; gap: var(--space-2); }
.fw-score-value { font-family: var(--font-display); font-weight: 700; font-size: 72px; line-height: 72px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.fw-score-max { font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.fw-score-row .fw-grade { align-self: center; }
.fw-score--md .fw-score-value { font-size: 40px; line-height: 44px; letter-spacing: -0.02em; }
.fw-score-delta { font-size: 13px; line-height: 18px; display: inline-flex; gap: 4px; align-items: center; }

/* PillarBreakdown */
.fw-pillars { display: grid; grid-template-columns: max-content 1fr max-content max-content max-content; gap: var(--space-2) var(--space-2); align-items: center; font-size: 13px; line-height: 18px; }
.fw-pillar { display: contents; }
.fw-pillar-label { color: var(--ink); white-space: nowrap; }
.fw-pillar-bar { display: block; height: 6px; min-width: 56px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 3px; overflow: hidden; }
.fw-pillar-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ink-muted); }
.fw-pillar-bar--a i { background: var(--grade-a); } .fw-pillar-bar--b i { background: var(--grade-b); } .fw-pillar-bar--c i { background: var(--grade-c); }
.fw-pillar-bar--d i { background: var(--grade-d); } .fw-pillar-bar--e i { background: var(--grade-e); } .fw-pillar-bar--f i { background: var(--grade-f); }
.fw-pillar-value { font-family: var(--font-mono); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; min-width: 3ch; }
.fw-pillar-findings { color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ScoreHistory — linha em watch, área em watch-soft, ponto final em destaque */
.fw-history { display: block; max-width: 100%; overflow: visible; }
.fw-history-grid { stroke: var(--hairline); stroke-width: 1; }
.fw-history-area { fill: var(--watch-soft); stroke: none; }
.fw-history-line { fill: none; stroke: var(--watch); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fw-history-end { fill: var(--watch); stroke: var(--surface-0); stroke-width: 2; }
.fw-history-label { fill: var(--ink); font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }

/* SeverityBar — barra empilhada por severidade */
.fw-sevbar { display: flex; flex-direction: column; gap: var(--space-2); }
.fw-sevbar-track { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--hairline); gap: 1px; }
.fw-sevbar-seg { display: block; height: 100%; }
.fw-sevbar-seg--critical { background: var(--sev-critical); } .fw-sevbar-seg--high { background: var(--sev-high); } .fw-sevbar-seg--medium { background: var(--sev-medium); }
.fw-sevbar-seg--low { background: var(--sev-low); } .fw-sevbar-seg--info { background: var(--ink-muted); }
.fw-sevbar-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.fw-sevbar-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fw-sevbar-item b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fw-sevbar-swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.fw-sevbar-total { margin-left: auto; }

/* AssetRef — identificador de ativo, sempre em mono */
.fw-asset { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink); text-decoration: none; border-radius: 2px; max-width: 100%; }
.fw-asset-icon { color: var(--ink-muted); }
.fw-asset-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-asset--link:hover .fw-asset-value { text-decoration: underline; text-underline-offset: 3px; }
.fw-asset-new { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--watch); background: var(--watch-soft); padding: 1px 6px; border-radius: 8px; }
.fw-asset-conf { font-family: var(--font-sans); font-size: 12px; color: var(--ink-muted); }

/* FindingRow — uma linha de achado; empilhe com hairline entre elas */
.fw-finding { display: grid; grid-template-columns: max-content 1fr max-content max-content max-content; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font-size: 13px; line-height: 18px; }
.fw-finding:last-child { border-bottom: 0; }
.fw-finding--link { cursor: pointer; }
.fw-finding--link:hover { background: var(--surface-2); }
.fw-finding--selected { background: var(--watch-soft); box-shadow: inset 2px 0 0 var(--watch); }
.fw-finding:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fw-finding-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fw-finding-title { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-finding-cat { color: var(--ink-muted); white-space: nowrap; }
.fw-finding-age { color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 3ch; text-align: right; }

/* Telas do produto: dentro de .fw-app, o item ativo da navegação é marcado em watch (README: cor do produto) */
.fw-app .fw-side-item--active { box-shadow: inset 2px 0 0 var(--watch); }
.fw-app .fw-nav a.fw-nav--active { border-bottom-color: var(--watch); }

/* Pagination — info à esquerda, páginas e "por página" à direita; quebra em telas estreitas */
.fw-pages { flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; }
.fw-pages-info { margin-right: auto; font-variant-numeric: tabular-nums; }
.fw-pages-list { display: flex; align-items: center; gap: var(--space-1); }
.fw-page { font-variant-numeric: tabular-nums; }
.fw-page--gap, .fw-page--gap:hover { cursor: default; background: none; color: var(--ink-muted); }
.fw-pages-of { font-size: 13px; color: var(--ink); padding: 0 var(--space-2); font-variant-numeric: tabular-nums; }
.fw-pages-limit { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--ink-muted); }
.fw-pages-limit .fw-inputwrap { width: 76px; }

/* Header: o Logo é o link para o início */
.fw-header-home { display: inline-flex; text-decoration: none; color: inherit; }

/* ---------- Utilitários ---------- */
.fw-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fw-alert-content { min-width: 0; }
.fw-alert-action { margin-top: var(--space-2); }
.fw-empty-desc { font-size: 13px; line-height: 18px; max-width: 40ch; }
.fw-empty-action { margin-top: var(--space-2); }

/* ---------- FindingRow: flex em vez de grade fixa (seleção e ações são opcionais) ---------- */
.fw-finding { display: flex; flex-wrap: nowrap; }
.fw-finding-main { flex: 1 1 auto; }
.fw-finding-select { display: inline-flex; align-items: center; }
.fw-finding-actions { display: inline-flex; align-items: center; margin-left: calc(var(--space-2) * -1); }

/* ---------- Table: rolagem própria, seleção, barra de ações em massa ---------- */
.fw-table-wrap { display: flex; flex-direction: column; min-width: 0; }
.fw-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fw-table-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fw-table-check { width: 40px; padding-right: 0 !important; }
.fw-table-row--link { cursor: pointer; }
.fw-table tbody tr.fw-table-row--selected td { background: var(--watch-soft); }
.fw-table th, .fw-table td { white-space: nowrap; }
.fw-table td.fw-table-wrapcell { white-space: normal; }
.fw-bulk { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-3); background: var(--watch-soft); border-bottom: 1px solid var(--hairline); font-size: 13px; }
.fw-bulk-count { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.fw-bulk-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.fw-bulk > .fw-btn:last-child { margin-left: auto; }

/* ---------- Drawer ---------- */
.fw-drawer-backdrop { position: fixed; inset: 0; background: rgba(11,18,32,.6); z-index: 50; display: flex; }
.fw-drawer { position: relative; display: flex; flex-direction: column; width: 400px; max-width: 100%; height: 100%; background: var(--surface-1); border-left: 1px solid var(--hairline); box-shadow: var(--shadow-lg); outline: none; margin-left: auto; animation: fw-slide-in-r .16s ease-out; }
.fw-drawer--left { margin-left: 0; margin-right: auto; border-left: 0; border-right: 1px solid var(--hairline); animation-name: fw-slide-in-l; }
.fw-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-4); border-bottom: 1px solid var(--hairline); }
.fw-drawer-body { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.fw-drawer-body--flush { padding: 0; gap: 0; }
/* em coluna, selos e chips mantêm a própria largura */
.fw-drawer-body > .fw-sev, .fw-drawer-body > .fw-status, .fw-drawer-body > .fw-badge, .fw-drawer-body > .fw-grade, .fw-drawer-body > .fw-asset, .fw-drawer-body > .fw-tag, .fw-modal-body > .fw-sev, .fw-modal-body > .fw-status, .fw-modal-body > .fw-badge { align-self: flex-start; }
.fw-drawer .fw-modal-foot { margin-top: auto; }
.fw-drawer-logo { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); }
.fw-sidebar--drawer { width: 100%; border-right: 0; background: transparent; }
.fw-sidebar--drawer + .fw-sidebar--drawer { border-top: 1px solid var(--hairline); }
.fw-modal { outline: none; max-height: calc(100vh - 2 * var(--space-4)); }
.fw-modal-body { overflow-y: auto; }
@keyframes fw-slide-in-r { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fw-slide-in-l { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fw-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fw-drawer, .fw-modal, .fw-pop-panel { animation: none !important; } }

/* ---------- Menu, Popover ---------- */
.fw-menu, .fw-pop { position: relative; display: inline-flex; }
.fw-menu-list, .fw-pop-panel { position: absolute; top: calc(100% + 4px); z-index: 40; min-width: 200px; max-width: min(360px, calc(100vw - 32px)); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-1); display: flex; flex-direction: column; }
.fw-menu-list--end, .fw-pop-panel--end { right: 0; }
.fw-menu-list--start, .fw-pop-panel--start { left: 0; }
.fw-pop-panel { padding: var(--space-2); gap: var(--space-2); }
.fw-menu-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: 15px; color: var(--ink); cursor: pointer; }
.fw-menu-item:hover, .fw-menu-item:focus-visible { background: var(--surface-2); }
.fw-menu-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fw-menu-item[disabled] { opacity: .45; cursor: not-allowed; }
.fw-menu-item--danger { color: var(--danger); }
.fw-menu-item--on { background: var(--surface-2); }
.fw-menu-item .fw-icon { color: var(--ink-muted); flex: none; }
.fw-menu-item--danger .fw-icon { color: var(--danger); }
.fw-menu-hint { margin-left: auto; font-size: 12px; color: var(--ink-muted); }
.fw-menu-divider { height: 1px; background: var(--hairline); margin: var(--space-1) 0; }
.fw-menu-empty { padding: var(--space-2); font-size: 13px; color: var(--ink-muted); }

/* ---------- Tooltip ---------- */
.fw-tip { position: relative; display: inline-flex; }
.fw-tip-box { position: absolute; z-index: 45; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); width: max-content; max-width: 260px; padding: 6px var(--space-2); border-radius: var(--radius-sm); background: var(--ink); color: var(--surface-0); font-size: 12px; line-height: 16px; font-weight: 500; text-align: left; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; }
.fw-tip-box--bottom { bottom: auto; top: calc(100% + 6px); }
.fw-tip-box--open { opacity: 1; visibility: visible; }

/* ---------- CopyButton ---------- */
.fw-copy { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-1); min-width: 24px; height: 24px; padding: 0 4px; border-radius: var(--radius-sm); color: var(--ink-muted); cursor: pointer; }
.fw-copy:hover { color: var(--ink); background: var(--surface-2); }
.fw-copy:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fw-copy--done, .fw-copy--done:hover { color: var(--brand); }
.fw-copy .fw-mono { color: var(--ink); }

/* ---------- ScopeNotice ---------- */
.fw-scope { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-1); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.fw-scope .fw-icon { color: var(--ink-muted); flex: none; }
.fw-scope-text { flex: 1 1 240px; }
.fw-scope--critical { border-color: var(--sev-critical); }
.fw-scope--critical .fw-icon { color: var(--sev-critical); }

/* ---------- FilterBar ---------- */
.fw-filterbar { display: flex; flex-direction: column; gap: var(--space-2); }
.fw-filterbar-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.fw-filterbar-search { flex: 1 1 240px; max-width: 360px; }
.fw-filterbar-filters { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.fw-filterbar-actions { margin-left: auto; display: flex; gap: var(--space-2); }
.fw-filterbar-mobile { display: none; }
.fw-filterbar-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.fw-filter-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: var(--on-brand); font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.fw-filter-options { display: flex; flex-direction: column; gap: var(--space-1); }
.fw-filter-options .fw-check { min-height: 32px; padding: 0 var(--space-1); border-radius: var(--radius-sm); }
.fw-filter-options .fw-check:hover { background: var(--surface-2); }
.fw-filter-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fw-filter-group legend { padding: 0; margin-bottom: var(--space-2); }
.fw-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 28px; padding: 0 4px 0 var(--space-2); border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface-2); font-size: 13px; line-height: 18px; color: var(--ink-muted); max-width: 100%; }
.fw-chip b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-chip-remove { all: unset; cursor: pointer; display: inline-flex; padding: 4px; border-radius: 50%; color: var(--ink-muted); }
.fw-chip-remove:hover { color: var(--ink); background: var(--hairline); }
.fw-chip-remove:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------- StatusChange ---------- */
.fw-status-subject { font-size: 13px; color: var(--ink-muted); margin-bottom: var(--space-3); }
.fw-status-options { border: 0; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2); }
.fw-status-options legend { grid-column: 1 / -1; padding: 0; margin-bottom: var(--space-2); }
.fw-status-option { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); cursor: pointer; }
.fw-status-option input { accent-color: var(--brand); margin: 0; }
.fw-status-option--on { border-color: var(--brand); background: var(--surface-2); }

/* ---------- AssigneePicker ---------- */
.fw-assignee-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-2) 0 4px; border: 1px solid var(--hairline); border-radius: var(--radius-md); cursor: pointer; font-size: 13px; color: var(--ink); max-width: 100%; }
.fw-assignee-btn:hover { background: var(--surface-2); }
.fw-assignee-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fw-assignee-btn[disabled] { opacity: .45; cursor: not-allowed; }
.fw-assignee-btn .fw-icon { color: var(--ink-muted); }
.fw-assignee-empty { width: 24px; height: 24px; border-radius: 50%; border: 1px dashed var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; }
.fw-assignee-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-assignee-name--empty { color: var(--ink-muted); }
.fw-assignee-list { display: flex; flex-direction: column; max-height: 280px; overflow-y: auto; }
.fw-assignee-who { display: flex; flex-direction: column; min-width: 0; line-height: 18px; }
.fw-assignee-who small { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; }
.fw-assignee-list .fw-menu-item { min-height: 44px; }
.fw-assignee-list .fw-menu-item > .fw-icon:last-child { margin-left: auto; color: var(--brand); }

/* ---------- Timeline, Comment ---------- */
.fw-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fw-tl-item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-2); padding-bottom: var(--space-3); }
.fw-tl-item::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--hairline); }
.fw-tl-item:last-child::before { display: none; }
.fw-tl-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--hairline); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-muted); }
.fw-tl-item--status .fw-tl-dot { color: var(--watch); }
.fw-tl-item--detected .fw-tl-dot, .fw-tl-item--reopened .fw-tl-dot { color: var(--danger); }
.fw-tl-content { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; font-size: 13px; line-height: 18px; }
.fw-tl-text { display: flex; align-items: center; gap: var(--space-1) var(--space-2); flex-wrap: wrap; color: var(--ink); }
.fw-tl-arrow { color: var(--ink-muted); }
.fw-tl-note { color: var(--ink-muted); border-left: 2px solid var(--hairline); padding-left: var(--space-2); }
.fw-tl-time { color: var(--ink-muted); font-size: 12px; }
.fw-comment { border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-1); padding: var(--space-2) var(--space-3); font-size: 13px; line-height: 18px; min-width: 0; }
.fw-comment-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-1); }
.fw-comment-head time, .fw-comment-edited { color: var(--ink-muted); font-size: 12px; }
.fw-comment-actions { margin-left: auto; }
.fw-comment-body { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.fw-commentbox { display: flex; flex-direction: column; gap: var(--space-2); }
.fw-commentbox-foot { display: flex; justify-content: flex-end; }

/* ---------- DateRange ---------- */
.fw-daterange { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; }
.fw-daterange > .fw-inputwrap { width: 200px; }
.fw-daterange-custom { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.fw-daterange-custom label { display: flex; flex-direction: column; gap: var(--space-1); }
.fw-daterange-custom .fw-input { width: 160px; color-scheme: dark; }
[data-theme="light"] .fw-daterange-custom .fw-input { color-scheme: light; }

/* ---------- AppShell ---------- */
.fw-shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--surface-0); }
.fw-shell > .fw-header { position: sticky; top: 0; z-index: 30; }
.fw-shell-body { display: flex; flex: 1; min-height: 0; }
.fw-shell-side { position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; flex: none; }
.fw-shell-main { flex: 1; min-width: 0; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.fw-header-menu { display: none; }
.fw-pagehead-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fw-pagehead-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.fw-footer-tagline { font-size: 13px; margin-top: var(--space-3); max-width: 36ch; }

/* Pagination: "3 / 25" só aparece no modo compacto (ou no celular) */
.fw-pages-of { display: none; }
.fw-pages--compact .fw-page--num, .fw-pages--compact .fw-page--gap { display: none; }
.fw-pages--compact .fw-pages-of { display: inline-flex; }

/* Na lista, o selo de severidade tem largura fixa para os títulos alinharem */
.fw-finding > .fw-sev:not(.fw-sev--compact) { min-width: 92px; }

/* ==================================================================================
   Responsivo. Três larguras (README › Responsivo):
   - lg  ≥ 960px  desktop: Header com navegação, Sidebar fixa, tabelas completas.
   - md  640–959  tablet:  Sidebar e navegação vão para o menu do Header; grades de 2 colunas.
   - sm  < 640px  celular: uma coluna; tabelas com `stack` viram cartões; Modal e Drawer em tela cheia;
                           paginação "3 / 25"; filtros num Drawer.
   Toque (pointer: coarse): todo alvo clicável com pelo menos 44×44px.
   ================================================================================== */

/* ---------- md: < 960px ---------- */
@media (max-width: 959px) {
  .fw-header { gap: var(--space-3); padding: 0 var(--space-3); }
  .fw-header .fw-nav { display: none; }
  .fw-header-menu { display: inline-flex; margin-left: calc(var(--space-1) * -1); }
  .fw-shell-side { display: none; }
  .fw-shell-main { padding: var(--space-4); }
  .fw-hero { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5) 0; }
  .fw-hero-title { font-size: 44px; line-height: 48px; }
  .fw-footer-cols { grid-template-columns: 1fr 1fr; }
  .fw-footer-brand { grid-column: 1 / -1; }
  .fw-pagehead { flex-wrap: wrap; align-items: flex-start; }
}

/* ---------- sm: < 640px ---------- */
@media (max-width: 639px) {
  .fw-header { height: 56px; }
  .fw-shell-side { top: 56px; }
  .fw-header .fw-logo-tag { display: none; }
  .fw-shell-main { padding: var(--space-3); gap: var(--space-3); }
  .fw-h1 { font-size: 24px; line-height: 30px; }
  .fw-hero-title { font-size: 34px; line-height: 40px; }
  .fw-hero-desc { font-size: 16px; line-height: 24px; }
  .fw-hero-actions .fw-btn { flex: 1 1 100%; }
  .fw-footer { padding: var(--space-5) var(--space-3) var(--space-3); }
  .fw-footer-cols { grid-template-columns: 1fr; gap: var(--space-4); }
  .fw-pagehead-actions { width: 100%; }
  .fw-pagehead-actions .fw-btn { flex: 1 1 auto; }
  .fw-tabs { overflow-x: auto; scrollbar-width: none; gap: var(--space-3); }
  .fw-tabs::-webkit-scrollbar { display: none; }
  .fw-tab { flex: none; }
  .fw-crumb--far { display: none; }
  .fw-card-head { flex-wrap: wrap; }

  /* Modal e Drawer: tela cheia, folha que sobe da base */
  .fw-modal-backdrop { padding: 0; align-items: flex-end; }
  .fw-modal { max-width: none !important; max-height: 100%; height: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation: fw-rise .16s ease-out; }
  .fw-modal-foot { flex-wrap: wrap; }
  .fw-modal-foot .fw-btn { flex: 1 1 auto; }
  .fw-drawer { width: 100% !important; border: 0; }
  .fw-drawer--left { width: min(320px, 88vw) !important; }

  /* Popover e Menu: folha presa à base da tela */
  .fw-pop-panel, .fw-menu-list { position: fixed; left: var(--space-2) !important; right: var(--space-2) !important; top: auto; bottom: var(--space-2); width: auto !important; max-width: none; max-height: 70vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: fw-rise .16s ease-out; }

  /* Paginação: "3 / 25" entre as setas; intervalo em linha própria */
  .fw-pages { justify-content: space-between; }
  .fw-pages-info { flex: 1 1 100%; margin-right: 0; }
  .fw-page--num, .fw-page--gap { display: none; }
  .fw-pages-of { display: inline-flex; }
  .fw-pages-limit span { display: none; }

  /* Filtros num Drawer */
  .fw-filterbar-filters { display: none; }
  .fw-filterbar-mobile { display: inline-flex; }
  .fw-filterbar-search { flex: 1 1 100%; max-width: none; order: -1; }
  .fw-filterbar-actions { margin-left: 0; }

  /* Tabela em cartões (stack) */
  .fw-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fw-table--stack, .fw-table--stack tbody, .fw-table--stack tr, .fw-table--stack td { display: block; width: 100%; }
  .fw-table--stack tr { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--hairline); position: relative; }
  .fw-table--stack tr:last-child { border-bottom: 0; }
  .fw-table--stack td { height: auto; padding: 2px 0; border: 0; white-space: normal; display: flex; gap: var(--space-2); justify-content: space-between; text-align: right; }
  .fw-table--stack td::before { content: attr(data-label); color: var(--ink-muted); font-size: 12px; text-align: left; flex: none; }
  .fw-table--stack td.fw-table-primary { display: block; text-align: left; font-size: 15px; line-height: 20px; font-weight: 500; padding-bottom: var(--space-1); }
  .fw-table--stack td.fw-table-primary::before { display: none; }
  .fw-table--stack td.fw-table-check { position: absolute; right: var(--space-3); top: var(--space-2); width: auto; padding: 0; }
  .fw-table--stack td.fw-table-check::before { display: none; }
  .fw-table--stack.fw-table--select td.fw-table-primary { padding-right: 40px; }

  /* FindingRow: duas linhas — título e ativo em cima, severidade/idade/status embaixo */
  .fw-finding { flex-wrap: wrap; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3); }
  .fw-finding-main { flex: 1 1 100%; order: -1; }
  .fw-finding-title { white-space: normal; }
  .fw-finding-cat { display: none; }
  .fw-finding-age { margin-left: auto; }
  .fw-finding { position: relative; }
  .fw-finding-select { position: absolute; right: var(--space-2); top: var(--space-1); }
  .fw-finding:has(.fw-finding-select) .fw-finding-main { padding-right: 44px; }
  .fw-finding-actions { margin-left: 0; }

  /* Produto */
  .fw-score-value { font-size: 56px; line-height: 56px; }
  .fw-pillars { grid-template-columns: minmax(0, 1fr) 64px max-content max-content; }
  .fw-pillar-findings { display: none; }
  .fw-pillar-label { white-space: normal; }
  .fw-asset { max-width: 100%; }
  .fw-status-options { grid-template-columns: 1fr 1fr; }
  .fw-daterange, .fw-daterange > .fw-inputwrap, .fw-daterange-custom, .fw-daterange-custom label, .fw-daterange-custom .fw-input { width: 100%; }
  .fw-daterange-custom label { flex: 1 1 0; }
  .fw-scope .fw-btn { margin-left: auto; }
}

/* ---------- Toque: alvos de pelo menos 44px ---------- */
@media (pointer: coarse) {
  .fw-btn--sm { height: 44px; padding: 0 var(--space-3); }
  .fw-btn--icon, .fw-btn--icon.fw-btn--sm { width: 44px; height: 44px; }
  .fw-input, .fw-input--sm { height: 44px; font-size: 16px; } /* 16px evita o zoom automático do iOS */
  textarea.fw-input { font-size: 16px; }
  .fw-page { min-width: 44px; height: 44px; }
  .fw-check, .fw-switch { min-height: 44px; }
  .fw-side-item, .fw-menu-item { min-height: 44px; }
  .fw-tab { height: 44px; }
  .fw-nav a { min-height: 44px; }
  .fw-chip { min-height: 36px; }
  .fw-chip-remove { padding: 10px; margin: -6px -2px -6px 0; }
  .fw-copy { min-width: 44px; height: 44px; justify-content: center; }
  .fw-alert-close { padding: 12px; margin: -10px -10px -10px auto; }
  .fw-assignee-btn { min-height: 44px; }
  .fw-status-option { min-height: 48px; }
  .fw-finding { min-height: 64px; }
  .fw-table td { height: 48px; }
}

/* ---------- Tree ---------- */
.fw-tree { --fw-indent-step: 20px; font-size: 13px; line-height: 18px; }
.fw-tree ul { list-style: none; margin: 0; padding: 0; }
.fw-tree-row { display: flex; align-items: center; gap: var(--space-1); min-height: 36px; padding: 0 var(--space-2) 0 calc(var(--fw-indent, 0) * var(--fw-indent-step) + 4px); border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; outline: none; position: relative; }
.fw-tree-row:hover { background: var(--surface-2); }
.fw-tree-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fw-tree-row--sel { background: var(--watch-soft); box-shadow: inset 2px 0 0 var(--watch); }
.fw-tree-row--disabled { color: var(--ink-muted); cursor: default; }
.fw-tree-toggle { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--ink-muted); }
.fw-tree-toggle:hover { color: var(--ink); background: var(--hairline); }
.fw-tree-toggle--leaf, .fw-tree-toggle--leaf:hover { background: none; }
.fw-tree-icon { color: var(--ink-muted); flex: none; }
.fw-tree-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-tree-depth { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.fw-tree-meta { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.fw-tree-loading { padding: var(--space-2) 0 var(--space-2) calc(var(--fw-indent, 0) * var(--fw-indent-step) + 32px); }
.fw-tree--compact .fw-tree-row { min-height: 32px; }

/* ---------- Unidades organizacionais ---------- */
.fw-ou-path { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.fw-ou-path b { color: var(--ink); font-weight: 600; }
.fw-ou-path .fw-ou-ellipsis { padding: 0 2px; }
.fw-ou-meta-count { min-width: 3ch; text-align: right; }
.fw-ou-crit { color: var(--sev-critical); font-weight: 600; }
.fw-ou-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; max-width: 100%; padding: 0 var(--space-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); cursor: pointer; font-size: 13px; color: var(--ink); background: var(--surface-1); }
.fw-ou-btn:hover { background: var(--surface-2); }
.fw-ou-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fw-ou-btn > .fw-icon { color: var(--ink-muted); flex: none; }
.fw-ou-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fw-ou-picker { display: flex; flex-direction: column; gap: var(--space-2); }
.fw-ou-picker .fw-tree { max-height: 320px; overflow-y: auto; }
.fw-ou-rollup { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 12px; color: var(--ink-muted); padding-top: var(--space-1); border-top: 1px solid var(--hairline); }

@media (max-width: 639px) {
  .fw-tree { --fw-indent-step: 12px; }
  .fw-tree-meta .fw-ou-hide-sm { display: none; }
  .fw-ou-picker .fw-tree { max-height: none; }
}
@media (pointer: coarse) {
  .fw-tree-row { min-height: 44px; }
  .fw-tree-toggle { width: 36px; height: 36px; }
  .fw-ou-btn { min-height: 44px; }
}

/* ---------- Utilitários de texto ---------- */
.fw-stack-sm { display: flex; flex-direction: column; gap: var(--space-3); }
.fw-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.fw-kbd { font-family: var(--font-mono); font-size: 11px; line-height: 16px; padding: 0 5px; border: 1px solid var(--hairline); border-bottom-width: 2px; border-radius: 4px; color: var(--ink-muted); background: var(--surface-2); }

/* ---------- CommandSearch ---------- */
.fw-cmd-trigger { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; min-width: 220px; max-width: 360px; padding: 0 var(--space-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink-muted); font-size: 13px; cursor: pointer; }
.fw-cmd-trigger:hover { color: var(--ink); }
.fw-cmd-trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fw-cmd-trigger-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-modal.fw-cmd { max-width: 640px; align-self: flex-start; margin-top: 10vh; }
.fw-cmd .fw-modal-body { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); }
.fw-cmd-results { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-1); }
.fw-cmd-group .fw-sidebar-group { padding-left: var(--space-1); }
.fw-cmd-item { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--ink); }
.fw-cmd-item > .fw-icon { color: var(--ink-muted); flex: none; }
.fw-cmd-item--on { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--brand); }
.fw-cmd-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-cmd-foot { font-size: 12px; color: var(--ink-muted); text-align: right; }

/* ---------- CategoryBreakdown ---------- */
.fw-catbars { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 18px; }
.fw-catbar { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(96px, 140px) 1fr 5ch 4ch; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-1); border-radius: var(--radius-sm); color: var(--ink); }
.fw-catbar--link { cursor: pointer; }
.fw-catbar--link:hover { background: var(--surface-2); }
.fw-catbar--link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fw-catbar-track { height: 8px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; }
.fw-catbar-track i { display: block; height: 100%; background: var(--ink-muted); border-radius: 4px; }
.fw-catbar-value { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.fw-catbar-pct { text-align: right; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- AssetTree ---------- */
.fw-tree .fw-asset { max-width: 100%; }

/* ---------- QueueCard ---------- */
.fw-queue-title { display: inline-flex; align-items: center; gap: var(--space-2); }
.fw-queue-dot { width: 10px; height: 10px; flex: none; }
.fw-queue-desc { font-size: 13px; margin: 0 0 var(--space-3); }
.fw-queue-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.fw-queue-stats .fw-stat-value { font-size: 24px; line-height: 30px; }
.fw-queue-foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hairline); font-size: 13px; color: var(--ink-muted); }
.fw-queue-meta { display: inline-flex; align-items: center; gap: 4px; }
.fw-queue-claim { margin-left: auto; }

/* ---------- FraudRow ---------- */
.fw-fraud { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--hairline); font-size: 13px; line-height: 18px; }
.fw-fraud:last-child { border-bottom: 0; }
.fw-fraud-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fw-fraud-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink); font-size: 15px; }
.fw-fraud-name > .fw-icon { color: var(--ink-muted); flex: none; }
.fw-fraud-name .fw-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.fw-fraud-src { color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-fraud-date { color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fw-fraud-actions { display: inline-flex; gap: var(--space-1); }
.fw-fraud--dismissed .fw-fraud-name { color: var(--ink-muted); }

@media (max-width: 639px) {
  .fw-cmd-trigger { min-width: 0; width: 100%; }
  .fw-cmd-trigger .fw-kbd { display: none; }
  .fw-modal.fw-cmd { margin-top: 0; align-self: stretch; height: 100%; border-radius: 0; }
  .fw-cmd-results { max-height: none; }
  .fw-catbar { grid-template-columns: minmax(84px, 1fr) 1.2fr 5ch; }
  .fw-catbar-pct { display: none; }
  .fw-queue-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .fw-queue-claim { margin-left: 0; flex: 1 1 100%; }
  .fw-fraud { flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
  .fw-fraud-main { flex: 1 1 100%; }
  .fw-fraud-actions { margin-left: auto; }
}

/* ---------- AssetCriticalityBadge (importância do ativo — monocromático, nunca sev-*) ---------- */
.fw-crit { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--hairline); border-radius: 11px; background: var(--surface-1); color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.fw-crit--compact { padding: 0 6px; }
.fw-crit-pips { display: inline-flex; align-items: center; gap: 2px; }
.fw-crit-pips i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; box-sizing: border-box; }
.fw-crit-pips i.on { background: currentColor; }
.fw-crit--none { color: var(--ink-muted); font-weight: 500; }
.fw-crit-src { display: inline-flex; align-items: center; gap: 3px; padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--hairline); color: var(--ink-muted); font-weight: 500; }

/* ---------- Selos de inteligência: KEV · CVSS · EPSS · N CVEs ---------- */
.fw-intel-row { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.fw-intel { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 2px 0 7px; border: 1px solid var(--hairline); border-radius: 11px; background: var(--surface-1); color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fw-intel b { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 8px; font-family: var(--font-mono); font-weight: 600; background: var(--surface-2); color: var(--ink); }
.fw-intel-k { color: var(--ink-muted); font-weight: 600; letter-spacing: .04em; }
.fw-intel-band { padding-right: 5px; color: var(--ink-muted); }
.fw-intel--cvss-critical b { background: var(--sev-critical); color: var(--on-sev-critical); }
.fw-intel--cvss-high b { background: var(--sev-high); color: var(--on-sev-high); }
.fw-intel--cvss-medium b { background: var(--sev-medium); color: var(--on-sev-medium); }
.fw-intel--cvss-low b { background: transparent; color: var(--sev-low); box-shadow: inset 0 0 0 1px currentColor; }
.fw-intel--epss-high b { background: var(--warning); color: var(--on-warning); }
.fw-intel--epss-very_high b { background: var(--danger); color: var(--on-danger); }
.fw-intel--kev { padding: 0 8px 0 6px; gap: 4px; background: var(--danger); border-color: var(--danger); color: var(--on-danger); font-weight: 700; letter-spacing: .04em; }
.fw-intel--cves { padding: 0 8px 0 6px; gap: 4px; color: var(--ink); }
.fw-intel--cves > .fw-icon { color: var(--ink-muted); }
.fw-intel--link { cursor: pointer; text-decoration: none; font: inherit; font-size: 12px; }
button.fw-intel--link { appearance: none; }
.fw-intel--link:hover { background: var(--surface-2); }
.fw-intel--link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- SortHeader ---------- */
.fw-table th.fw-th-sort { padding: 0 var(--space-2); }
.fw-sort { all: unset; box-sizing: border-box; position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 var(--space-1); border-radius: var(--radius-sm); cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.fw-sort:hover { color: var(--ink); background: var(--surface-2); }
.fw-sort:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }
.fw-sort-icon { opacity: .45; }
.fw-th-sort--on { color: var(--ink); }
.fw-th-sort--on .fw-sort-icon { opacity: 1; color: var(--watch); }
.fw-th-sort.fw-right .fw-sort { flex-direction: row-reverse; }
@media (pointer: coarse) { .fw-sort { min-height: 44px; } }

/* ---------- Sidebar: grupos recolhíveis e itens bloqueados ---------- */
.fw-side-toggle { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); width: 100%; height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--ink-muted); font-size: 15px; font-weight: 500; cursor: pointer; }
.fw-side-toggle:hover { background: var(--surface-2); color: var(--ink); }
.fw-side-toggle:focus-visible, .fw-side-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fw-side-toggle .fw-badge { margin-left: auto; }
.fw-side-chevron { margin-left: auto; transition: transform .12s ease; }
.fw-side-toggle .fw-badge + .fw-side-chevron { margin-left: 0; }
.fw-side-group--open > .fw-side-toggle .fw-side-chevron { transform: rotate(180deg); }
.fw-side-group--current > .fw-side-toggle { color: var(--ink); }
.fw-side-children { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 var(--space-1); }
.fw-side-children[hidden] { display: none; }
.fw-side-item--child { padding-left: calc(var(--space-2) + 18px + var(--space-2)); font-size: 14px; }
.fw-side-item--locked { height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; cursor: not-allowed; color: var(--ink-muted); align-items: flex-start; }
.fw-side-item--locked:hover { background: transparent; color: var(--ink-muted); }
.fw-side-item--locked > .fw-icon:first-child { margin-top: 2px; }
.fw-side-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fw-side-reason { font-size: 12px; line-height: 16px; color: var(--ink-muted); font-weight: 400; white-space: normal; }
.fw-side-lock { margin-left: auto; margin-top: 3px; flex: none; }
@media (prefers-reduced-motion: reduce) { .fw-side-chevron { transition: none; } }
@media (pointer: coarse) { .fw-side-toggle { min-height: 44px; } }

/* ---------- Header: contexto e conta ---------- */
.fw-header-context { display: flex; align-items: center; min-width: 0; margin-left: auto; }
.fw-header-context + .fw-header-actions { margin-left: var(--space-2); }
.fw-header-ctx { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.fw-ctx { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-md); color: var(--ink-muted); font-size: 13px; line-height: 16px; }
.fw-ctx > .fw-icon { flex: none; }
.fw-ctx--btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; height: 36px; padding: 0 var(--space-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); color: var(--ink-muted); font-size: 13px; line-height: 16px; cursor: pointer; max-width: 280px; }
.fw-ctx--btn:hover { background: var(--surface-2); }
.fw-ctx--btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fw-ctx-text { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.fw-ctx-k { font-size: 11px; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.fw-ctx-v { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-ctx-chev { flex: none; }
.fw-ctx-switch .fw-pop-panel { width: 320px; }
.fw-account-btn { all: unset; box-sizing: border-box; display: inline-flex; border-radius: 50%; cursor: pointer; }
.fw-account-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fw-menu-head { padding: var(--space-2); margin-bottom: var(--space-1); border-bottom: 1px solid var(--hairline); }
.fw-account-head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.fw-drawer-context { padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--hairline); }
.fw-drawer-context .fw-header-ctx { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.fw-drawer-context .fw-ctx--btn { max-width: none; width: 100%; }
.fw-drawer-context .fw-ctx-chev { margin-left: auto; }
@media (max-width: 959px) {
  .fw-header .fw-header-context { display: none; }
  .fw-header-actions { margin-left: auto; }
}
@media (pointer: coarse) { .fw-ctx--btn { min-height: 44px; } .fw-account-btn { padding: 6px; } }
/* Itens não encolhem quando a Sidebar é mais baixa que o conteúdo: ela rola. */
.fw-sidebar { overflow-y: auto; }
.fw-sidebar > .fw-side-item, .fw-sidebar > .fw-side-group, .fw-sidebar > .fw-sidebar-group, .fw-sidebar > .fw-sidebar-foot { flex: none; }
.fw-header-home, .fw-header .fw-nav, .fw-header-actions { flex: none; }
.fw-header .fw-nav a, .fw-header .fw-logo-text { white-space: nowrap; }
/* O Header mede a si mesmo (container query), não a janela: dentro de um painel estreito ele também recolhe. */
.fw-header--ctx { container: fw-header / inline-size; }
.fw-header-context { overflow: hidden; padding: 4px; margin-top: -4px; margin-bottom: -4px; }
@container fw-header (max-width: 1279px) {
  .fw-logo-tag, .fw-header-context .fw-ctx--cycle { display: none; }
}
@container fw-header (max-width: 1099px) {
  .fw-header-context .fw-ctx--btn { max-width: 200px; }
  .fw-header-context .fw-ctx-k { display: none; }
  .fw-header-actions .fw-cmd-trigger { min-width: 0; width: 36px; padding: 0; justify-content: center; }
  .fw-header-actions .fw-cmd-trigger-text, .fw-header-actions .fw-cmd-trigger .fw-kbd { display: none; }
}
.fw-header-context { flex: 0 1 auto; min-width: 0; }
.fw-header-context .fw-ctx--btn { flex: none; }

/* ---------- TimeSeriesChart ---------- */
.fw-ts { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; font-size: 12px; line-height: 16px; }
.fw-ts-plot { position: relative; }
.fw-ts-svg { display: block; overflow: visible; outline: none; }
.fw-ts-svg:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius-sm); }
.fw-ts-grid { stroke: var(--hairline); stroke-width: 1; }
.fw-ts-axis { fill: var(--ink-muted); font-family: var(--font-sans); font-size: 12px; font-variant-numeric: tabular-nums; }
.fw-ts-cross { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.fw-ts-band { fill: var(--surface-2); }
/* data sem dado (v: null) em barras: faixa tracejada, sem preenchimento — diferente de zero */
.fw-ts-missing { fill: none; stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 3 3; }
.fw-ts-tip-none { color: var(--ink-muted); font-style: italic; }
.fw-ts-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fw-ts-dot { fill: currentColor; stroke: var(--surface-1); stroke-width: 2; }
.fw-ts-value { fill: var(--ink); font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.fw-ts--watch { --fw-ts-c: var(--watch); }
.fw-ts--c1 { --fw-ts-c: var(--cat-1); } .fw-ts--c2 { --fw-ts-c: var(--cat-2); } .fw-ts--c3 { --fw-ts-c: var(--cat-3); }
.fw-ts--c4 { --fw-ts-c: var(--cat-4); } .fw-ts--c5 { --fw-ts-c: var(--cat-5); } .fw-ts--c6 { --fw-ts-c: var(--cat-6); }
.fw-ts--other { --fw-ts-c: var(--ink-muted); }
/* tone: série que é ESTADO (pass/fail…), não identidade — usa as cores de estado, sempre com a palavra na legenda */
.fw-ts--t-brand { --fw-ts-c: var(--brand); } .fw-ts--t-warning { --fw-ts-c: var(--warning); } .fw-ts--t-danger { --fw-ts-c: var(--danger); }
.fw-ts--t-muted { --fw-ts-c: var(--ink-muted); } .fw-ts--t-watch { --fw-ts-c: var(--watch); }
.fw-ts-series { color: var(--fw-ts-c, var(--ink-muted)); }
.fw-ts-series.fw-ts--other .fw-ts-line { stroke-width: 1.25; opacity: .7; }
.fw-ts-bar { fill: currentColor; }
.fw-ts-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; color: var(--ink); }
.fw-ts-legend li { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.fw-ts-legend li > svg { flex: none; color: var(--fw-ts-c, var(--ink-muted)); }
.fw-ts-legend line { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.fw-ts-legend rect { fill: currentColor; }
.fw-ts-tip { position: absolute; top: 0; left: 0; z-index: 5; min-width: min(140px, 100%); max-width: min(240px, 100%); box-sizing: border-box; padding: var(--space-2); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); pointer-events: none; color: var(--ink); }
.fw-ts-tip-date { color: var(--ink-muted); margin-bottom: 4px; }
.fw-ts-tip-row { display: flex; align-items: center; gap: 6px; color: var(--ink); }
.fw-ts-tip-row > svg { flex: none; }
.fw-ts-tip-row circle { fill: var(--fw-ts-c, var(--ink-muted)); }
.fw-ts-tip-total { display: flex; justify-content: space-between; gap: 6px; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--hairline); color: var(--ink); }
.fw-ts-tip-total b { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.fw-ts-tip-row { align-items: flex-start; }
.fw-ts-tip-row > svg { margin-top: 3px; }
/* nome da série quebra linha (não corta); o valor fica inteiro */
.fw-ts-tip-row span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fw-ts-tip-row b { white-space: nowrap; }
.fw-ts-tip-row b { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.fw-ts-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 160px; border: 1px dashed var(--hairline); border-radius: var(--radius-md); color: var(--ink-muted); font-size: 13px; }
.fw-ts-note { margin: 0; color: var(--ink-muted); font-size: 12px; }

/* ---------- Stepper ---------- */
.fw-stepper { font-size: 13px; line-height: 18px; }
.fw-stepper ol { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.fw-stepper-count { display: none; color: var(--ink-muted); font-size: 12px; margin-bottom: var(--space-1); }
.fw-step { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.fw-step:not(:last-child)::after { content: ""; flex: 1 1 auto; min-width: 12px; height: 1px; background: var(--hairline); }
.fw-step--done:not(:last-child)::after { background: var(--brand); }
.fw-step-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; border-radius: var(--radius-sm); }
button.fw-step-btn { cursor: pointer; }
button.fw-step-btn:hover .fw-step-label { text-decoration: underline; }
button.fw-step-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fw-step-marker { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--hairline); color: var(--ink-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.fw-step--done .fw-step-marker { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.fw-step--current .fw-step-marker { border: 2px solid var(--brand); color: var(--ink); }
.fw-step--error .fw-step-marker { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.fw-step-text { display: flex; flex-direction: column; min-width: 0; }
.fw-step-label { color: var(--ink-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-step--current .fw-step-label, .fw-step--done .fw-step-label { color: var(--ink); }
.fw-step--current .fw-step-label { font-weight: 600; }
.fw-step--error .fw-step-label { color: var(--danger); font-weight: 600; }
.fw-step-desc { color: var(--ink-muted); font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-stepper--vertical ol { flex-direction: column; gap: 0; }
.fw-stepper--vertical .fw-step { align-items: flex-start; flex-direction: column; gap: 0; }
.fw-stepper--vertical .fw-step::after { width: 1px; height: 16px; min-width: 0; flex: none; margin-left: 12px; }
.fw-stepper--vertical .fw-step-label, .fw-stepper--vertical .fw-step-desc { white-space: normal; }

/* ---------- CookieConsent ---------- */
.fw-cookie { position: fixed; z-index: 60; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface-1); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); font-size: 14px; line-height: 20px; }
.fw-cookie--inline { position: static; }
.fw-cookie-main { display: flex; flex-direction: column; gap: var(--space-1); }
.fw-cookie-title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 600; }
.fw-cookie-title .fw-icon { color: var(--ink-muted); }
.fw-cookie-body { margin: 0; color: var(--ink-muted); }
.fw-cookie-cats { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.fw-cookie-cat { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); }
.fw-cookie-cat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 18px; }
.fw-cookie-cat-text span { color: var(--ink-muted); }
.fw-cookie-always { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.fw-cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fw-cookie-actions .fw-btn--ghost { margin-left: auto; }

/* ---------- CodeBlock ---------- */
.fw-code { margin: 0; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-2); min-width: 0; }
.fw-code-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-1) 0 var(--space-3); border-bottom: 1px solid var(--hairline); }
.fw-code-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.fw-code-actions { display: inline-flex; align-items: center; gap: var(--space-1); }
.fw-code-pre { margin: 0; padding: var(--space-3); overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink); white-space: pre; outline: none; }
.fw-code-pre:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fw-code--wrap .fw-code-pre { white-space: pre-wrap; word-break: break-all; }
.fw-code-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--hairline); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.fw-code--secret .fw-code-note { color: var(--ink); }
.fw-code--secret .fw-code-note .fw-icon { color: var(--warning); flex: none; margin-top: 1px; }

/* ---------- AuthLayout ---------- */
.fw-auth { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--surface-0); color: var(--ink); font-family: var(--font-sans); }
.fw-auth-lang { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); }
.fw-auth-lang .fw-inputwrap { width: 140px; }
.fw-auth-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); padding: 72px var(--space-4) var(--space-6); }
.fw-auth-logo .fw-logo { flex-direction: column; text-align: center; }
.fw-auth-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.fw-auth-title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; }
.fw-auth-body { display: flex; flex-direction: column; gap: var(--space-3); }
.fw-auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); font-size: 13px; color: var(--ink-muted); }
.fw-auth-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 13px; }

@media (max-width: 639px) {
  .fw-stepper-count { display: block; }
  .fw-step:not(.fw-step--current):not(.fw-step--error) .fw-step-text { display: none; }
  .fw-step:not(.fw-step--current):not(.fw-step--error) { flex: 0 1 auto; }
  .fw-step--current, .fw-step--error { flex: 1 1 auto; }
  .fw-step-desc { display: none; }
  .fw-stepper--vertical .fw-step:not(.fw-step--current):not(.fw-step--error) .fw-step-text { display: flex; }
  .fw-stepper--vertical .fw-stepper-count { display: none; }
  .fw-cookie { left: var(--space-2); right: var(--space-2); bottom: var(--space-2); padding: var(--space-3); }
  .fw-cookie-actions .fw-btn { flex: 1 1 100%; }
  .fw-cookie-actions .fw-btn--ghost { margin-left: 0; }
  .fw-auth-card { padding: var(--space-4); }
  .fw-auth-main { justify-content: flex-start; }
}
@media (pointer: coarse) { button.fw-step-btn { min-height: 44px; } }