.security-audit {
    --sa-blue: #255ec7;
    --sa-border: #dce3ec;
    container-type: inline-size;
    min-width: 0;
    color: var(--ink, #172033);
    font-size: 12px;
    line-height: 1.65;
}

.security-audit h3,
.security-audit h4,
.security-audit h5,
.security-audit p,
.security-audit dl { margin: 0; }
.security-audit button,
.security-audit input,
.security-audit select { font: inherit; }
.security-audit button:focus-visible,
.security-audit input:focus-visible,
.security-audit select:focus-visible,
.security-audit summary:focus-visible { outline: 3px solid #8dafee; outline-offset: 2px; }
.security-audit button:disabled { opacity: .5; cursor: not-allowed; }
.sa-header,
.sa-section-head,
.sa-incident-top,
.sa-incident-bottom,
.sa-event-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sa-header { margin-bottom: 12px; }
.security-audit .sa-eyebrow { color: #597394; font-size: 10px; letter-spacing: 1.2px; font-weight: 800; }
.security-audit .sa-title { margin-top: 2px; font-size: 19px; line-height: 1.5; }
.sa-button { min-height: 32px; border: 1px solid #ccd6e5; border-radius: 6px; padding: 5px 10px; background: #fff; color: #35455e; font-weight: 600; }
.sa-button:hover:not(:disabled) { background: #f0f5fd; border-color: #9bb7df; }
.sa-button-primary { background: #255ec7; border-color: #255ec7; color: #fff; }
.sa-button-primary:hover:not(:disabled) { background: #17489f; color: #fff; }
.sa-button-chat { color: #2455a3; background: #f2f6fd; border-color: #d4e0f3; }
.sa-refresh { flex: 0 0 auto; font-size: 11px !important; }
.sa-demo-notice { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid #cbdcf5; border-radius: 8px; background: #f0f6ff; color: #455f85; font-size: 11px; }
.sa-demo-notice .sa-pill { margin-top: 1px; flex: 0 0 auto; }
.sa-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; padding: 1px 6px; background: #edf1f7; color: #58677b; font-size: 10px; font-weight: 700; white-space: nowrap; }
.sa-pill-danger { background: #fff0ef; color: #b42318; }
.sa-pill-amber { background: #fff4df; color: #92610d; }
.sa-pill-green { background: #e8f6ef; color: #16754c; }
.sa-pill-blue { background: #e2edfe; color: #2555a3; }
.sa-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sa-metric { padding: 10px 12px; border: 1px solid var(--sa-border); border-radius: 8px; background: #fff; }
.sa-metric span { display: block; color: #68778c; font-size: 10px; white-space: nowrap; }
.sa-metric strong { display: block; margin-top: 2px; font-size: 24px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.sa-metric-danger strong { color: #b42318; }
.sa-metric-green strong { color: #16754c; }
.sa-metric-amber strong { color: #92610d; }
.sa-metric-blue strong { color: #255ec7; }
.security-audit .sa-source-note { margin: 7px 0 16px; color: #718096; font-size: 10px; }
.security-audit .sa-filter-selection-note { margin-top: 10px; padding: 7px 9px; border-radius: 6px; background: #eaf0f8; color: #61728a; font-size: 10px; }
.sa-section-head { margin-bottom: 8px; }
.sa-section-head h4,
.sa-selected h4 { font-size: 13px; }
.sa-section-head h5,
.security-audit h5 { font-size: 12px; }
.sa-muted { color: #6c7a8d; font-size: 11px; }
.sa-search-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-bottom: 9px; }
.sa-input,
.sa-select { width: 100%; min-width: 0; min-height: 34px; border: 1px solid #d2dae5; border-radius: 6px; padding: 6px 9px; background: #fff; color: #26364c; }
.sa-select { width: auto; max-width: 125px; padding-right: 6px; }
.sa-input::placeholder { color: #8792a3; }
.sa-incident-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.sa-incident { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 104px; border: 1px solid #d6dfeb; border-radius: 8px; padding: 10px; background: #fff; color: #26364c; text-align: left; }
.sa-incident:hover { background: #f8fbff; border-color: #9ebce7; }
.sa-incident.is-selected { border-color: #427bd2; background: #f1f6ff; box-shadow: inset 0 0 0 1px #427bd2; }
.sa-incident-top,
.sa-incident-bottom { width: 100%; }
.sa-id,
.sa-mono { font-family: var(--mono, monospace); font-size: 10px; overflow-wrap: anywhere; }
.sa-incident .sa-id { color: #587095; }
.sa-incident-title { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.sa-incident-bottom { margin-top: auto; color: #6e7e93; font-size: 10px; flex-wrap: wrap; gap: 1px 6px; }
.sa-selected { margin-top: 14px; border: 1px solid var(--sa-border); border-radius: 9px; background: #fff; overflow: hidden; }
.sa-global-overview { padding: 13px; }
.sa-global-overview .sa-description { margin: 7px 0 12px; }
.sa-selected-heading { display: flex; align-items: baseline; gap: 8px; padding: 12px 13px 10px; }
.sa-selected-heading .sa-id { color: #255ec7; flex: 0 0 auto; }
.sa-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid #e0e6ef; padding: 0 10px; }
.sa-tab { min-width: 0; min-height: 38px; padding: 7px 3px; border: 0; border-bottom: 2px solid transparent; background: #fff; color: #6a788c; font-size: 12px !important; font-weight: 600; }
.sa-tab:hover { color: #255ec7; background: #f8faff; }
.sa-tab.is-active { color: #255ec7; border-bottom-color: #255ec7; }
.sa-tab-panel { padding: 13px; }
.sa-description { color: #44546b; line-height: 1.8; overflow-wrap: anywhere; }
.sa-links { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.sa-link-chip,
.sa-filter-chip { max-width: 100%; padding: 3px 7px; border: 1px solid #d8e2f1; border-radius: 5px; background: #f4f7fc; color: #38639d; font-size: 10px !important; text-align: left; overflow-wrap: anywhere; }
.sa-link-chip:hover,
.sa-filter-chip:hover { background: #e7effb; border-color: #acc3e5; }
.sa-filter-chip { background: #eaf1fc; border-color: #c1d3ef; }
.security-audit .sa-match-note { margin-top: 9px; }
.sa-finding-block { margin-top: 12px; padding: 11px 12px; border: 1px solid #e1e7ec; border-radius: 7px; }
.sa-finding-confirmed { border-left: 3px solid #43a17a; background: #fbfefc; }
.sa-finding-risk { border-left: 3px solid #dba644; background: #fffef9; }
.sa-finding-confirmed h5 { color: #246b50; }
.sa-finding-risk h5 { color: #946a21; }
.sa-finding-block > .sa-muted { margin-top: 3px; font-size: 10px; }
.sa-findings { margin: 8px 0 0; padding-left: 16px; color: #4d5a6c; font-size: 11px; }
.sa-findings li + li { margin-top: 5px; }
.sa-prompt-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.sa-trace-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.sa-trace-tools .sa-input { flex: 1 1 180px; }
.sa-trace-tools .sa-button { font-size: 10px !important; }
.sa-db-section { margin-top: 12px; margin-bottom: 16px; }
.sa-db-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 7px; }
.sa-db-record { min-width: 0; border: 1px solid #e0e6ef; border-radius: 6px; padding: 8px 9px; background: #f8fafd; }
.sa-db-record summary { color: #42638d; font-size: 10px; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.sa-db-record .sa-link-chip { margin-top: 7px; }
.sa-request-records { margin-top: 7px; }
.sa-request-record + .sa-request-record { border-top: 1px solid #e1e7ef; margin-top: 8px; padding-top: 4px; }
.sa-details { margin-top: 8px !important; }
.sa-detail-row { display: grid; grid-template-columns: minmax(50px, 30%) minmax(0, 1fr); gap: 5px; padding: 3px 0; font-size: 10px; }
.sa-detail-row dt { color: #758197; }
.sa-detail-row dd { margin: 0; color: #42516a; overflow-wrap: anywhere; }
.sa-timeline { list-style: none; margin: 0 0 14px 5px; padding: 0 0 0 16px; border-left: 2px solid #dce6f5; }
.sa-event { position: relative; padding: 0 0 18px; min-width: 0; }
.sa-event:last-child { padding-bottom: 0; }
.sa-event::before { position: absolute; top: 6px; left: -22px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #6692d2; box-shadow: 0 0 0 1px #c8d9ef; content: ""; }
.sa-event-top { color: #7a8799; font-size: 10px; font-variant-numeric: tabular-nums; }
.sa-event-title { display: block; margin-top: 4px; color: #334864; font-size: 11px; overflow-wrap: anywhere; }
.security-audit .sa-event-description { margin-top: 3px; font-size: 11px; color: #65738a; overflow-wrap: anywhere; }
.sa-event-details { margin-top: 6px; padding: 6px 8px; border-radius: 5px; background: #f5f7fa; }
.sa-event-details summary { color: #607899; font-family: var(--mono, monospace); font-size: 9px; cursor: pointer; overflow-wrap: anywhere; }
.sa-event-details .sa-links { margin-top: 5px; }
.sa-evidence-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 12px 0 8px; }
.sa-evidence-actions strong { margin-right: auto; color: #3e5678; font-size: 11px; }
.sa-evidence-actions .sa-button { font-size: 10px !important; }
.sa-evidence-list { border: 1px solid #e0e6ee; border-radius: 7px; overflow: hidden; }
.sa-evidence-item { display: flex; align-items: flex-start; gap: 9px; padding: 10px; cursor: pointer; background: #fff; }
.sa-evidence-item + .sa-evidence-item { border-top: 1px solid #e8edf4; }
.sa-evidence-item:hover { background: #f8fbff; }
.sa-evidence-item input { margin: 3px 0 0; flex: 0 0 auto; accent-color: #255ec7; width: 15px; height: 15px; }
.sa-evidence-item > div { min-width: 0; }
.sa-evidence-item strong { display: block; font-size: 11px; color: #40587a; overflow-wrap: anywhere; }
.sa-evidence-item span { display: block; font-size: 10px; }
.sa-evidence-item p { margin-top: 3px; color: #69778b; font-size: 10px; overflow-wrap: anywhere; }
.sa-evidence-controls { margin-top: 13px; }
.sa-control-record { margin-top: 7px; padding: 8px 10px; border: 1px solid #e0e7ee; border-radius: 6px; background: #fafcfd; }
.sa-control-record strong { font-size: 11px; color: #425b76; }
.sa-control-record .sa-mono { margin-top: 3px; color: #5e7da5; }
.security-audit .sa-export-note { margin: 11px 0; font-size: 10px; color: #7d8797; }
.security-audit .sa-download-notice { margin: 10px 0; color: #16754c; font-size: 11px; }
.sa-loading,
.sa-empty { padding: 22px 12px; color: #7a8799; text-align: center; font-size: 11px; }
.sa-incident-list > .sa-empty { grid-column: 1 / -1; border: 1px dashed #cfd8e5; border-radius: 7px; }
.sa-error { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 12px; border: 1px solid #f3c6c2; border-radius: 7px; background: #fff6f5; color: #a2352c; }
.security-audit .sa-action-notice { margin-top: 10px; padding: 9px 11px; border-radius: 7px; background: #fff7e8; color: #95641c; font-size: 11px; }

@container (max-width: 420px) {
    .sa-incident-list { grid-template-columns: 1fr; }
    .sa-incident { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 0; gap: 4px 9px; padding: 9px 10px; }
    .sa-incident-top { width: auto; justify-content: flex-start; gap: 5px; }
    .sa-incident-title { align-self: center; font-size: 11px; }
    .sa-incident-bottom { grid-column: 1 / -1; flex-wrap: nowrap; }
    .sa-metrics { gap: 5px; }
    .sa-metric { padding: 8px; }
    .sa-metric strong { font-size: 21px; }
    .sa-metric span { font-size: 9px; }
    .sa-tab-panel { padding: 11px; }
    .sa-db-grid { grid-template-columns: 1fr; }
    .sa-demo-notice { flex-wrap: wrap; gap: 4px; }
    .sa-selected-heading { flex-wrap: wrap; gap: 2px 7px; }
    .sa-evidence-actions .sa-button-primary { flex-basis: 100%; }
}

@media (max-width: 600px) {
    .security-audit .sa-title { font-size: 17px; }
    .sa-button,
    .sa-input,
    .sa-select,
    .sa-tab { min-height: 38px; }
}