:root {
  --bg: #f4f6fa;
  --panel: #edf2f8;
  --card: #fff;
  --accent: #1857b2;
  --accent-2: #174f9e;
  --accent-soft: #e6efff;
  --accent-border: #99b9e6;
  --text: #15243c;
  --muted: #53627a;
  --border: #d9e1ed;
  --control-border: #aebcd0;
  --button-text: #fff;
  --success: #167047;
  --success-soft: #e9f5ed;
  --warning: #805400;
  --warning-soft: #fff4d9;
  --error: #ab2943;
  --error-soft: #fcecf0;
  --chart-fill: #3272ca;
  --chart-selection: #2558a233;
  --shadow: 0 2px 6px rgba(23, 40, 68, .04);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0d1525;
  --panel: #172338;
  --card: #121d30;
  --accent: #8bb8fc;
  --accent-2: #a4c7ff;
  --accent-soft: #1c355b;
  --accent-border: #506f9d;
  --text: #ebf1fc;
  --muted: #acbbd2;
  --border: #2b3a54;
  --control-border: #576b8b;
  --button-text: #0b172a;
  --success: #88dfb4;
  --success-soft: #173329;
  --warning: #f4cd84;
  --warning-soft: #372c1b;
  --error: #f8a1b2;
  --error-soft: #3d2532;
  --chart-fill: #73a9f7;
  --chart-selection: #a1c7ff40;
  --shadow: none;
  color-scheme: dark;
}

.violations-page { display: grid; gap: 16px; margin-top: 20px; }
.exports-page { display: grid; gap: 18px; margin-top: 24px; }
.specialists-page { display: grid; gap: 16px; margin-top: 24px; min-width: 0; }
.specialist-card { min-width: 0; overflow-wrap: anywhere; }
.specialist-card h3 { margin-top: 0; }
.specialist-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; margin-top: 18px; }
.specialist-controls .field { flex: 1 1 240px; min-width: 0; }
.specialist-controls input, .specialist-controls select { max-width: 100%; }
.specialist-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; }
.export-heading h2 { font-size: 26px; margin: 0 0 8px; }
.export-heading p { margin: 0; }
.export-form { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin: 0; min-width: 0; }
.export-form label { display: grid; gap: 8px; font-size: 14px; color: var(--muted); min-width: 0; }
.export-form input, .export-form select { width: 100%; min-width: 0; min-height: 44px; }
.export-form button { align-self: start; }
.export-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.export-hint { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }
.export-error { color: var(--error); line-height: 1.6; }
.export-notice { color: var(--success); line-height: 1.6; }
.export-planned { line-height:1.65; min-width:0; overflow-wrap:anywhere; }
.export-planned summary { cursor: pointer; font-weight: 600; }
.export-planned-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 30px; padding-top: 12px; }
.export-planned-grid h4 { margin: 16px 0 6px; }
.export-planned-grid p { margin: 0; font-size: 13px; }
.exports-page button:disabled { opacity: .5; cursor: default; }
@media (max-width: 900px) {
  .export-planned-grid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) { .export-dates { grid-template-columns: 1fr; } }
.violation-heading, .violation-chart-heading, .violation-pagination, .violation-range-line {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.violation-heading h1 { font-size: 28px; margin: 0 0 4px; }
.violation-heading p { margin: 0; }
.violation-result-count { color: var(--accent-2); font-size: 20px; white-space: nowrap; }
.violation-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; margin: 0; }
.violation-filters label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; color: var(--muted); font-size: 13px; flex: 1 1 145px; min-width: 0; }
.violation-filters input, .violation-filters select { width: 100%; min-width: 0; min-height: 42px; }
.violation-range-line { color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.violation-range-line > span:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.violation-chart-heading h3, .violation-chart-heading h4 { margin: 0; }
.violation-chart-heading .muted { font-size: 12px; }
#violation-chart { height: 205px; width: 100%; }
.violation-placeholder { padding: 40px 16px; color: var(--muted); text-align: center; }
.activity-heading { align-items: flex-start; flex-wrap: wrap; }
.activity-heading h2 { margin: 0 0 6px; }
.activity-heading p { margin: 0; }
.activity-controls { display: flex; flex-wrap: wrap; gap: 12px; }
.activity-controls > div { display: grid; gap: 6px; }
.activity-controls label { font-size: 14px; color: var(--muted); }
.activity-controls select { min-height: 44px; }
.activity-controls select:disabled { cursor: default; }
.activity-totals { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 24px 0 8px; padding: 0; }
.activity-totals li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); border-radius: 8px; }
.activity-totals strong { font-variant-numeric: tabular-nums; }
.activity-line { width: 22px; border-top: 2px solid var(--chart-fill); }
.activity-line.dashed { border-top: 2px dashed var(--error); }
#activity-chart { width: 100%; height: 320px; }
.activity-status { padding: 58px 12px; margin: 0; color: var(--muted); text-align: center; }
.activity-timezone { margin: 0 0 12px; font-size: 13px; }
.activity-data { border-top: 1px solid var(--border); padding-top: 12px; }
.activity-data summary { cursor: pointer; margin-bottom: 10px; }
.activity-data th[scope="row"] { font-weight: 400; }
.violation-table-scroll { overflow-x: auto; }
.violation-list-card { min-width: 0; }
.violation-table { min-width: 365px; margin: 0; }
.violation-table th:first-child { width: 132px; }
.violation-table td { vertical-align: top; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; padding: 10px; }
.violation-table th { padding: 9px 10px; background: var(--panel); }
.violation-table .violation-selected td { background: var(--accent-soft); }
.violation-table small { display: block; font-size: 11px; margin-top: 5px; }
.violation-open { color: var(--accent-2); font-weight: 600; text-underline-offset: 3px; }
.violation-detail { min-width: 0; overflow-wrap: anywhere; }
@media (width > 900px) {
  .violation-detail {
    --violation-detail-top: 76px;
    position: sticky;
    top: var(--violation-detail-top);
    max-height: calc(100dvh - var(--violation-detail-top) - 16px);
    overflow: auto;
  }
}
.violation-detail p { margin: 0; }
.violation-detail-title { margin: 12px 0 6px; }
.violation-detail-title h2 { font-size: 17px; margin: 7px 0 3px; }
.violation-detail .violation-session-link { display: inline-block; margin: 12px 0 2px; text-decoration: none; }
.violation-detail > .violation-technical { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 6px; }
.violation-pagination { justify-content: center; padding-top: 18px; color: var(--muted); font-size: 13px; }
.violation-fields { margin: 0; }
.violation-fields > div { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 1.5fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.violation-fields dt { color: var(--muted); font-size: 13px; }
.violation-fields dd { margin: 0; min-width: 0; }
.violation-fields pre { margin: 0; font-family: inherit; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.violation-json { max-height: 540px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; border-radius: 10px; background: var(--bg); font-size: 12px; line-height: 1.6; }
.violation-technical summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.violation-back { width: fit-content; text-decoration: none; }
.violation-error { color: var(--error); }
.violations-page button:disabled { opacity: .45; cursor: default; }
@media (max-width: 700px) {
  .violation-heading, .violation-chart-heading { align-items: start; flex-direction: column; gap: 8px; }
  .violation-fields > div { grid-template-columns: 1fr; gap: 6px; }
  .violation-pagination { flex-wrap: wrap; }
  .violation-table { min-width: 0; }
  .violation-table th:first-child { width: 92px; }
  #violation-chart { height: 200px; }
}
@media (max-width: 480px) {
  .violation-filters label:has(input) { flex-basis: 100%; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

button {
  font-family: inherit;
}

a {
  color: inherit;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.top-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 11px 28px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .5px;
  text-decoration: none;
}

.brand-mark {
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 5px;
}

.user-chip {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-label {
  display: grid;
  gap: 2px;
  padding: 0 4px;
  min-width: 0;
  max-width: 170px;
  font-size: 13px;
}

.profile-label > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-label small { color: var(--muted); }
.user-chip .avatar {
  display:grid; place-items:center; width:34px; height:34px;
  border-radius:8px; background:var(--accent-soft); color:var(--accent-2); font-size:14px; font-weight:700;
}

.icon-button, .logout-button {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}

.icon-button:disabled { opacity: .5; cursor: default; }
.icon-button:hover:not(:disabled), .logout-button:hover { background: var(--panel); }
.button-glyph { display:block; width:18px; height:18px; background:currentColor; mask-size:contain; mask-repeat:no-repeat; }
.theme-glyph { mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.1A8.5 8.5 0 0 1 8.9 4 8.5 8.5 0 1 0 20 15.1Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-theme="dark"] .theme-glyph { mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4m0-14.2-1.4 1.4M6.3 17.7l-1.4 1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.refresh-glyph { mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7v5h-5M4 17v-5h5m10.2 2.6a7.5 7.5 0 0 1-12.4 3.1m-2-8.3a7.5 7.5 0 0 1 12.4-3.1L20 12M4 12l2.8 5.7'/%3E%3C/svg%3E"); }

.layout {
  padding: 0 28px 36px;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  min-width: 0;
}

.page-heading { margin: 24px 0 18px; }
.page-heading h1 { margin: 0 0 4px; font-size: 28px; line-height: 1.2; }
.page-heading p { margin: 0; color: var(--muted); }

.tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.tab {
  padding: 8px 10px;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
}

.tab:hover { color: var(--text); background: var(--panel); }
.tab.active { color: var(--accent-2); background: var(--accent-soft); }
.scan-tabs { margin-bottom: 12px; }
.scan-tabs .tab { text-decoration: none; }

:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 12px 0 20px;
}

.card {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 16px;
  box-shadow: var(--shadow);
}

.card h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--text);
}

.metric {
  font-size: 28px;
  font-weight: 700;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
}

.pill.success {
  color: var(--success);
  background: var(--success-soft);
}

.pill.warning {
  color: var(--warning);
  background: var(--warning-soft);
}

.pill.error {
  color: var(--error);
  background: var(--error-soft);
}

.pill.muted {
  color: var(--muted);
}

.table-scroll { overflow-x:auto; }
.scans-table { min-width:690px; }
.scans-table td:first-child { max-width:480px; overflow-wrap:anywhere; }

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}

.table th {
  text-align: left;
  padding: 10px 8px;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}

.table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}

.table tr:hover td {
  background: var(--panel);
}

.muted {
  color: var(--muted);
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

.overview-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.overview-page { display: grid; gap: 16px; }
.overview-page .metric { color: var(--accent-2); }
.overview-page .section-title { margin-top: 0; flex-wrap: wrap; }
.overview-page .section-title h3 { margin: 0; }
.overview-metrics .policy-version-link { display: inline-block; margin-top: 5px; }
.overview-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.overview-coverage, .overview-signals ul { list-style: none; padding: 0; margin: 6px 0; }
.overview-coverage li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, 1fr) max-content; align-items: center; gap: 12px; }
.overview-coverage li, .overview-signals li { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.overview-coverage button.link { padding: 3px 0; background: transparent; border: 0; text-align: left; overflow-wrap: anywhere; }
.overview-coverage progress { width: 100%; height: 6px; accent-color: var(--accent-2); }
.overview-signals li { display: flex; align-items: flex-start; gap: 10px; overflow-wrap: anywhere; }
.overview-signals li > div { min-width: 0; }
.overview-signals small, .session-table small { display: block; margin-top: 3px; }
.overview-signal-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.overview-signals .pill, .session-table .pill, .session-timeline .pill { border-radius: 5px; padding: 2px 6px; font-size: 11px; white-space: nowrap; }

.alert-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.alert-expand summary { cursor:pointer; display:grid; gap:6px; }
.alert-expand summary::-webkit-details-marker { display:none; }
.alert-expand summary .alert-title::before { content:'▸'; color:var(--muted); margin-right:8px; }
.alert-expand[open] summary .alert-title::before { content:'▾'; }
.alert-expand .alert-body { padding-left:16px; }


.alert-card {
  border-left: 3px solid var(--border);
  padding-left: 12px;
}

.alert-card.error {
  border-color: var(--error);
}

.alert-card.warning {
  border-color: var(--warning);
}

.alert-card .label {
  font-size: 12px;
  color: var(--muted);
}

.alert-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.alert-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.alert-body {
  margin-top: 6px;
}

.alert-title {
  font-weight: 700;
}

.alert-details {
  margin-top: 4px;
}

.alert-time {
  font-size: 13px;
}

.alert-error {
  margin-top: 6px;
}

.section-description {
  margin: 0 0 8px 0;
  font-size: 13px;
}

.filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 12px;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.filter-field input {
  min-width: 220px;
}

.record-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.session-counts, .session-breadcrumbs, .session-event-filters, .session-counter-row, .scripts-summary {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
}
.session-breadcrumbs { margin: 20px 0 12px; }
.session-counts { color: var(--muted); margin-bottom: 12px; }
.session-detail { display: grid; gap: 12px; }
.session-detail > .page-heading { margin: 0 0 4px; flex-wrap: wrap; overflow-wrap: anywhere; }
.session-page-meta { margin-top: 8px; font-size: 13px; }
.session-table { min-width: 650px; }
.session-table td:is(:first-child, :nth-child(2)) { overflow-wrap: anywhere; }
.session-table th { background: var(--panel); }
.session-timeline { padding: 0; min-width: 0; }
.session-timeline .section-title { margin: 0; padding: 12px 14px 0; }
.session-timeline .section-title h3 { margin: 0; }
.session-timeline .section-title .muted { font-size: 12px; }
.session-event-filters { gap: 3px; padding: 5px 9px 10px; }
.session-event-filters .tab { padding: 4px 8px; min-height: 32px; }
.session-event-filters [aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-2); }
.session-timeline h4 { margin: 0; padding: 5px 14px; background: var(--panel); color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.session-timeline ol { margin: 0; padding: 0; list-style: none; }
.session-timeline li + li { border-top: 1px solid var(--border); }
.session-timeline li button {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 35px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: start;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.session-timeline li button:focus-visible { outline-offset: -2px; }
.session-timeline li button:hover { background: var(--panel); }
.session-timeline li [aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
.session-event-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.session-timeline > p { margin: 10px 14px 14px; }
.session-event-card { min-width: 0; overflow-wrap: anywhere; position: sticky; top: 76px; }
.session-event-card h3 { margin: 7px 0 0; font-size: 16px; }
.session-event-card > p { margin: 0; }
.session-event-card details { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 8px; }
.session-event-card summary { cursor: pointer; color: var(--accent-2); font-weight: 600; font-size: 13px; }
.session-event-fields { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(0, 1.5fr); gap: 6px 10px; font-size: 13px; }
.session-event-fields dt { color: var(--muted); }
.session-event-fields dd { margin: 0; }
.pill.accent { color: var(--accent-2); background: var(--accent-soft); }

@media (max-width: 900px) {
  .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-panels, .record-layout { grid-template-columns: minmax(0, 1fr); }
  .session-event-card { position: static; }
}

.session-pages {
  display: grid;
  gap: 12px;
}

.page-alert-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.page-alert-list__item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--panel);
}

.page-alert-list__summary {
  margin-top: 6px;
}

.alert-flow {
  display: flex;
  align-items: stretch;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.alert-flow__page {
  min-width: 320px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.alert-flow__page--unmapped {
  border-style: dashed;
}

.alert-flow__page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.alert-flow__page-head h4 {
  margin: 4px 0 0;
  font-size: 18px;
}

.alert-flow__eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-2);
}

.alert-flow__page-meta {
  font-size: 13px;
}

.alert-flow__alerts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alert-flow__empty {
  border: 1px dashed var(--control-border);
  border-radius: 12px;
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
}

.alert-flow__transition {
  min-width: 170px;
  max-width: 170px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.alert-flow__arrow {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  font-size: 28px;
  color: var(--accent-2);
}

.alert-flow__transition-meta {
  font-size: 13px;
  line-height: 1.45;
}

.alert-node {
  border-radius: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.alert-node--warning {
  border-color: var(--warning);
}

.alert-node--error {
  border-color: var(--error);
}

.alert-node__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.alert-node__title {
  margin-top: 8px;
  font-weight: 700;
}

.alert-node__summary {
  margin-top: 6px;
  font-size: 13px;
}

.alert-node__footer {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.script-list,
.event-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.script-item,
.event-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--panel);
}

.event-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.event-row__title {
  margin-top: 8px;
  font-weight: 700;
}

.event-row__details {
  margin-top: 4px;
}

.code-block {
  margin-top: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.45;
}

.empty-state-inline {
  padding: 12px 0;
}

.details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.details-summary__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.details-summary::-webkit-details-marker {
  display: none;
}

.raw-events-card[open] .details-summary {
  margin-bottom: 10px;
}

.raw-events-dump {
  max-height: 560px;
  overflow: auto;
}

.table-subline {
  font-size: 12px;
}

.session-loader {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 32px 24px;
  text-align: center;
}

.session-loader__content {
  display: grid;
  justify-items: center;
}

.session-loader__visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 28px;
}

.session-loader__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--border);
  border-top-color: var(--accent-2);
  border-right-color: var(--accent);
  border-radius: 50%;
  animation: session-loader-spin 1.2s linear infinite;
}

.session-loader__emblem {
  width: 40px;
  height: 44px;
  color: var(--accent-2);
  filter: drop-shadow(0 0 14px rgba(13, 110, 253, 0.32));
}

.session-loader h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
}

.session-loader p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.loading-card > h3 { margin: 0 0 10px; }
.loading-block {
  --loading-fill: color-mix(in srgb, var(--panel) 52%, var(--border));
  display: grid;
  place-items: center;
  position: relative;
  min-width: 0;
}
.loading-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.loading-shapes {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  gap: 12px;
  width: 100%;
  min-height: 134px;
}
.loading-shapes span {
  display: block;
  height: 14px;
  border-radius: 4px;
  background: var(--loading-fill);
}
.loading-rows .loading-shapes span:nth-child(odd) { width: 86%; }
.loading-rows .loading-shapes span:nth-child(4) { width: 62%; }
.loading-metric .loading-shapes { min-height: 68px; gap: 8px; }
.loading-metric .loading-shapes span:first-child { width: 55px; height: 30px; }
.loading-metric .loading-shapes span:nth-child(2) { width: 66%; height: 12px; }
.loading-metric .loading-shapes span:nth-child(n+3) { display: none; }
.loading-table .loading-shapes { gap: 8px; }
.loading-table .loading-shapes span {
  height: 26px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: linear-gradient(to right, var(--loading-fill) 0 27%, transparent 27% 32%,
    var(--loading-fill) 32% 50%, transparent 50% 55%, var(--loading-fill) 55% 71%,
    transparent 71% 76%, var(--loading-fill) 76% 93%, transparent 93%);
  background-size: 100% 12px;
  background-repeat: no-repeat;
  background-position: left center;
}
.loading-form .loading-shapes { min-height: 264px; }
.loading-form .loading-shapes span { height: 40px; }
.loading-form .loading-shapes span:last-child { width: 140px; }
.loading-chart .loading-shapes {
  height: var(--loading-chart-height, 205px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: stretch;
  align-items: end;
  gap: 9%;
  padding: 16px 8%;
  background: repeating-linear-gradient(to top, var(--panel) 0 1px, transparent 1px 25%);
}
.loading-chart .loading-shapes span { height: 34%; }
.loading-chart .loading-shapes span:nth-child(2) { height: 52%; }
.loading-chart .loading-shapes span:nth-child(3) { height: 43%; }
.loading-chart .loading-shapes span:nth-child(4) { height: 61%; }
.activity-card { --loading-chart-height: 320px; }
.loading-spinner {
  grid-area: 1 / 1;
  z-index: 1;
  width: 24px;
  height: 24px;
  border: 2px solid var(--accent-border);
  border-top-color: var(--accent-2);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 0 0 5px var(--card);
  animation: session-loader-spin .85s linear infinite;
}
.loading-inline { display: inline-grid; vertical-align: middle; padding: 0 4px; }
.loading-inline .loading-shapes { display: none; }
.loading-inline .loading-spinner { width: 16px; height: 16px; box-shadow: none; }
@media (max-width: 900px) {
  .violation-chart-card { --loading-chart-height: 200px; }
}

@keyframes session-loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .session-loader__ring, .loading-spinner { animation: none; }
}

.login-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  max-width: 420px;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--control-border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.login-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.login-title h1 { margin: 0; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}

.field label {
  color: var(--muted);
  font-size: 13px;
}

.field input { padding: 12px; }

input, textarea, select {
  background: var(--card);
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

select { cursor: pointer; }

textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.45;
  font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  accent-color: var(--accent-2);
}

.btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 9px 13px;
  color: var(--button-text);
  font-weight: 700;
  cursor: pointer;
}

.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn:hover:not(:disabled) { filter: brightness(.93); }

button.link {
  background: var(--card);
  border: 1px solid var(--control-border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 11px;
  white-space: nowrap;
}

button.link:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

button.link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(420px, 1fr);
  gap: 16px;
  align-items: start;
}

.settings-list-card {
  position: sticky;
  top: 96px;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-row {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  padding: 12px;
}

.settings-row.selected {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.settings-row__top,
.settings-row__meta,
.settings-actions,
.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-row__top {
  justify-content: space-between;
}

.settings-row__url {
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.settings-row__meta {
  margin-top: 8px;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.toggle-row {
  color: var(--muted);
  font-size: 14px;
}

.settings-actions {
  justify-content: flex-start;
}

.danger-link {
  border-color: var(--error);
  color: var(--error) !important;
}

.settings-allowed-card {
  grid-column: 1 / -1;
}

.policy-status { display:flex; align-items:center; gap:32px; margin-bottom:18px; flex-wrap:wrap; }
.policy-status h2 { margin:4px 0; }
.policy-status-count { display:flex; flex-direction:column; gap:4px; color:var(--muted); }
.policy-status-count strong { font-size:28px; color:var(--text); }
.policy-layout { display:grid; grid-template-columns:290px minmax(0,1fr); gap:18px; align-items:start; }
.policy-nav { display:grid; gap:10px; }
.policy-nav .settings-row { display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; text-align:left; }
.policy-nav .section-title h3 { margin:10px 0 0; }
.policy-main { display:grid; gap:18px; min-width:0; }
.policy-main h2,.policy-main h3 { margin:0 0 12px; }
.policy-rule { display:flex; flex-direction:column; gap:9px; padding:14px 0; border-bottom:1px solid var(--border); min-width:0; }
.policy-rule > div { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.policy-rule strong,.policy-rule code,.policy-url,.policy-history code { overflow-wrap:anywhere; word-break:break-word; }
.policy-rule code { font-size:12px; line-height:1.6; color:var(--text); }
.policy-overridden { opacity:.62; }
.policy-scripts { display:grid; gap:12px; }
.policy-script { display:grid; grid-template-columns:minmax(0,2fr) minmax(150px,1fr); gap:12px; padding:16px; border:1px solid var(--border); border-radius:12px; }
.policy-script-hash { grid-column:1 / -1; }
.policy-script input,.policy-script select { min-width:0; width:100%; }
.policy-warning { padding:14px 16px; border:1px solid var(--warning); border-radius:12px; background:var(--warning-soft); color:var(--warning); margin:12px 0; line-height:1.6; }
.policy-success { padding:12px 16px; border:1px solid var(--success); border-radius:12px; color:var(--success); }
.policy-diff { margin:18px 0; }
.policy-diff-row { display:grid; grid-template-columns:minmax(100px,1fr) minmax(0,2fr) minmax(0,2fr); gap:14px; padding:14px 0; border-bottom:1px solid var(--border); }
.policy-diff-row pre { white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; margin:8px 0; font-size:12px; line-height:1.65; }
.policy-diff-row > div:first-of-type { background:var(--error-soft); padding:10px; border-radius:8px; }
.policy-diff-row > div:last-of-type { background:var(--success-soft); padding:10px; border-radius:8px; }
.policy-history { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); }
.policy-history > div { display:flex; flex-direction:column; gap:7px; min-width:0; }
.policy-history .muted { font-size:13px; }
.policy-details { margin-top:20px; }
.policy-probe { display:flex; align-items:end; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.policy-probe .field { flex:1 1 260px; }
.policy-main summary { cursor:pointer; color:var(--accent-2); padding:10px 0; }
.policy-main .settings-actions { flex-wrap:wrap; gap:12px; margin-top:18px; }
.policy-workspace { display:grid; gap:18px; scroll-margin-top:100px; }
.policy-workspace h2,.policy-workspace h3 { margin:0 0 10px; }
.policy-workspace :is(a,button,input,select,textarea,summary):focus-visible { outline:2px solid var(--accent-2); outline-offset:3px; scroll-margin-block:100px 24px; }
.policy-workspace .section-title > div { min-width:0; }
.policy-workspace .chip,.policy-workspace .pill { white-space:nowrap; flex-shrink:0; }
.policy-workspace .btn { text-decoration:none; }
.policy-navigation { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.policy-navigation nav { display:flex; gap:8px; flex-wrap:wrap; }
.policy-navigation nav a { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; }
.policy-navigation nav a.active { background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent-2); }
.policy-tab-count { background:var(--warning-soft); color:var(--warning); border-radius:5px; padding:1px 5px; font-size:12px; }
.policy-version-link { color:var(--accent-2); font-size:13px; text-decoration:none; display:inline-block; padding:4px 0; }
.policy-version-link:hover,.policy-back:hover { text-decoration:underline; }
.policy-back { display:inline-block; color:var(--muted); text-decoration:none; font-size:13px; margin-bottom:14px; }
.policy-page-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px; }
.policy-page-card { display:grid; align-content:start; gap:10px; min-width:0; transition:border-color .15s ease; }
.policy-page-card > a[data-policy-select] { display:flex; flex-direction:column; gap:8px; text-decoration:none; }
.policy-page-card > a[data-policy-select]:hover h3 { color:var(--accent-2); }
.policy-page-card > a[data-policy-select] h3 { margin:0; overflow-wrap:anywhere; }
.policy-page-card:hover { border-color:var(--accent-border); }
.policy-page-card .chip { align-self:flex-start; }
.policy-page-card .policy-url { color:var(--muted); font-size:13px; }
.policy-pending-label { width:fit-content; background:var(--warning-soft); color:var(--warning); border-color:transparent; text-decoration:none; }
a.policy-pending-label:hover { text-decoration:underline; }
.policy-configuration-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0 18px; }
.policy-configuration-links { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; margin-top:18px; }
.policy-permission-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.policy-permission-group { border:1px solid var(--border); background:var(--panel); border-radius:12px; min-width:0; align-self:start; }
.policy-permission-group[data-permission-type="scripts"] { grid-column:1 / -1; }
.policy-permission-group > summary { display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; list-style:none; min-height:48px; }
.policy-permission-group > summary::before { content:'▸'; color:var(--muted); }
.policy-permission-group[open] > summary::before { transform:rotate(90deg); }
.policy-permission-group > summary .chip { margin-left:auto; }
.policy-permission-group > summary::-webkit-details-marker { display:none; }
.policy-permission-body { padding:0 16px 14px; }
.policy-empty { margin:8px 0; font-size:13px; }
.policy-workspace .policy-rule { padding:9px 0; gap:5px; }
.policy-rule-heading { display:flex; justify-content:space-between; gap:12px; min-width:0; }
.policy-rule-heading strong { flex:1 1 250px; min-width:0; overflow-wrap:anywhere; font-size:14px; }
.policy-rule-type { color:var(--muted); font-size:12px; }
.policy-rule-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:28px; font-size:12px; }
.policy-hash { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.policy-hash code { color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.policy-copy.link { border:0; background:transparent; padding:4px 6px; min-width:28px; min-height:28px; color:var(--muted); }
.copy-glyph { width:15px; height:15px; mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V4H4v12h4'/%3E%3C/svg%3E"); }
.copy-glyph.copied { mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E"); }
.policy-copy.link:hover { color:var(--text); background:var(--card); }
.policy-copy.link:active { background:var(--panel); }
.policy-resource-list { padding-left:18px; margin:10px 0; overflow-wrap:anywhere; font-size:13px; line-height:1.7; }
.policy-resource-row { display:flex; flex-direction:column; gap:6px; padding:10px 0; border-bottom:1px solid var(--border); overflow-wrap:anywhere; font-size:13px; }
.policy-match-check { margin-top:14px; }
.policy-match-check > summary { cursor:pointer; color:var(--muted); font-size:13px; padding:7px 0; }
.policy-priority-note { margin:0 0 14px; font-size:13px; }
.policy-workspace .policy-script { grid-template-columns:minmax(0,2fr) minmax(150px,1fr); padding:12px; gap:10px; }
.policy-hash-editor { grid-column:1 / -1; min-width:0; }
.policy-hash-editor summary { cursor:pointer; color:var(--muted); font-size:12px; }
.policy-hash-editor summary code { margin:0 10px; color:var(--muted); }
.policy-workspace .settings-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
.policy-history-page .policy-history {
  display:grid; grid-template-columns:minmax(130px,.85fr) minmax(210px,2fr) minmax(165px,1.4fr) max-content;
  align-items:start; gap:8px 16px; padding:12px 0; font-size:13px;
}
.policy-history-subject,.policy-history-actors { overflow-wrap:anywhere; }
.policy-history-time { font-variant-numeric:tabular-nums; }
.policy-history .policy-version-link { padding:0; }
.policy-review-actors { display:grid; grid-template-columns:max-content max-content; gap:6px 14px; margin-top:12px; font-size:13px; }
.policy-chips { display:flex; gap:5px; flex-wrap:wrap; }
.policy-chip.chip { padding:3px 7px; border-radius:5px; border:0; font-weight:600; }
.policy-chip--scripts { background:var(--accent-soft); color:var(--accent-2); }
.policy-chip--headers { background:var(--warning-soft); color:var(--warning); }
.policy-chip--network { background:var(--success-soft); color:var(--success); }
.policy-chip--page { background:var(--panel); color:var(--muted); }
.policy-history-versions { display:flex; gap:16px; flex-wrap:wrap; }
.policy-history-error { font-size:12px; color:var(--warning); overflow-wrap:anywhere; }
.policy-history-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:16px; max-width:800px; }
.policy-load-more { margin-top:18px; }
.policy-workspace .policy-diff-row { grid-template-columns:minmax(130px,1fr) minmax(0,2fr) minmax(0,2fr); }
.policy-workspace .policy-diff-row > div:first-child { background:transparent; padding:10px 0; }
.policy-workspace .policy-diff-row > div:nth-child(2) { background:var(--error-soft); padding:10px; border-radius:8px; }
.policy-diff-value { margin-top:8px; font-size:13px; overflow-wrap:anywhere; line-height:1.65; }
.policy-diff-resource { display:block; color:var(--muted); font-weight:400; margin-top:6px; font-size:12px; overflow-wrap:anywhere; }
.policy-workspace .policy-review summary,.policy-affected summary { cursor:pointer; color:var(--accent-2); padding:10px 0; }
.policy-version-change { border-top:1px solid var(--border); padding:16px 0; }
.policy-version-change > summary { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; cursor:pointer; }
.policy-version-change > summary .muted { font-size:13px; }
.policy-version-pager { display:flex; justify-content:space-between; gap:12px; margin-top:22px; flex-wrap:wrap; }
@media (prefers-reduced-motion:reduce) { .policy-workspace * { transition:none !important; } }
@media (max-width:700px) {
  .policy-workspace .section-title { align-items:flex-start; flex-wrap:wrap; }
  .policy-permission-groups,.policy-history-filters { grid-template-columns:1fr; }
  .policy-history-page .policy-history { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .policy-review-actors { grid-template-columns:minmax(0,1fr) minmax(0,1fr); overflow-wrap:anywhere; }
  .policy-workspace .policy-diff-row { grid-template-columns:1fr; }
  .policy-rule-heading { flex-wrap:wrap; gap:4px; }
  .policy-rule-heading strong { flex-basis:100%; }
  .policy-page-grid { grid-template-columns:minmax(0,1fr); }
  .policy-copy.link { min-height:40px; min-width:40px; }
  .policy-workspace .policy-script { grid-template-columns:1fr; }
  .policy-hash-editor { grid-column:auto; }
}
@media (max-width:900px) {
  .policy-layout { grid-template-columns:1fr; }
  .policy-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .policy-nav .section-title { grid-column:1 / -1; }
}
@media (max-width:600px) {
  .policy-nav,.policy-script,.policy-diff-row { grid-template-columns:1fr; }
  .policy-diff-row { gap:8px; }
  .policy-status { gap:18px; }
  .policy-main .section-title { align-items:flex-start; flex-wrap:wrap; }
}

.json-editor {
  min-height: 420px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.settings-notice {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (max-width: 768px) {
  .top-bar { position: static; flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .tabs { order: 3; flex-basis: 100%; }
  .profile-label { max-width: 115px; }
  .user-chip .avatar { display:none; }

  .settings-layout,
  .settings-form-grid {
    grid-template-columns: 1fr;
  }

  .settings-list-card {
    position: static;
  }

  .layout {
    padding: 0 16px 28px;
  }

  .alert-flow__page,
  .alert-flow__transition {
    min-width: 280px;
  }
}