:root {
  color-scheme: light;
  --bg: #FAF9F6;
  --sidebar: #FAF9F6;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --text: #202124;
  --muted: #6f6a64;
  --line: #e3ded7;
  --line-strong: #d6dce5;
  --input-bg: #ffffff;
  --button-bg: #ffffff;
  --topbar-bg: rgba(255, 255, 255, 0.82);
  --table-head: #f9fbfd;
  --row-hover: #fffaf2;
  --accent: #ff9800;
  --accent-soft: #fff3df;
  --primary: #127c72;
  --primary-strong: #0d625a;
  --danger: #b42318;
  --warning: #b54708;
  --info: #175cd3;
  --ok: #07865f;
  --ink: #071426;
  --shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e21;
  --sidebar: #111329;
  --surface: #15182f;
  --surface-2: #1b1f3a;
  --surface-3: #232846;
  --text: rgba(255, 255, 255, 0.82);
  --muted: rgba(255, 255, 255, 0.58);
  --line: rgba(255, 255, 255, 0.105);
  --line-strong: rgba(255, 255, 255, 0.17);
  --input-bg: #10142a;
  --button-bg: #1a1e38;
  --topbar-bg: rgba(17, 19, 41, 0.94);
  --table-head: #202540;
  --row-hover: rgba(101, 207, 199, 0.09);
  --accent-soft: rgba(255, 152, 0, 0.14);
  --accent: #f5a536;
  --primary: #65cfc7;
  --primary-strong: #8edfd8;
  --ink: rgba(255, 255, 255, 0.96);
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, Segoe UI, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 750;
}

h2 {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 760;
}

h3 {
  font-size: 16px;
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

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

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  transition: grid-template-columns 220ms ease;
}

/* Dashboard fades in from black after the "entering the mind" wipe.
   0.75 s spring ease — matches the entrance animation character. */
.app-entrance {
  animation: appFadeIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes appFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--sidebar);
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.sidebar-toggle {
  width: 100%;
  min-height: 62px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  padding: 0;
}

.sidebar-toggle:hover {
  border-color: transparent;
  background: transparent;
}

.sidebar-toggle:focus-visible {
  outline: 3px solid rgba(255, 152, 0, 0.22);
  outline-offset: 3px;
}

.sidebar-brand img {
  width: 172px;
  max-height: 62px;
  object-fit: contain;
  object-position: center;
  transition: width 220ms ease, transform 220ms ease;
}

.sidebar-brand img[src$="aksk-logo.png"] {
  width: 70px;
  max-height: 70px;
}

.org-switcher {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  transition: padding 220ms ease, grid-template-columns 220ms ease;
}

.org-switcher strong,
.user-menu strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-switcher span,
.user-menu span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-switcher > div:last-child,
.nav-label,
.side-nav p {
  transition: opacity 180ms ease, transform 180ms ease;
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid #ffe4b8;
  background:
    radial-gradient(circle at 35% 25%, #fff7e8 0 38%, transparent 39%),
    linear-gradient(135deg, #fff8ea, #ffe8bd);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 8px 18px rgba(255, 152, 0, 0.12);
  font-weight: 800;
}

#topbarAvatar,
#dropdownAvatar,
#sidebarAvatar {
  display: inline-grid;
  place-items: center;
  width: 46px;
  min-width: 46px;
  height: 46px;
  border: 1px solid #ffe4b8;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 25%, #fffaf0 0 34%, transparent 35%),
    linear-gradient(135deg, #fff9ec 0%, #ffe8b8 100%);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 10px 22px rgba(255, 152, 0, 0.14);
  font-size: 18px;
  font-weight: 850;
  line-height: 1;
  overflow: visible;
}

.side-nav {
  display: grid;
  gap: 4px;
  padding: 12px 8px 24px;
}

.side-nav p {
  margin: 20px 12px 8px;
  color: #9a948d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.tab {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #5f5a55;
  padding: 8px 12px;
  font-weight: 650;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, padding 220ms ease, gap 220ms ease;
}

.tab:hover {
  background: #fff7ea;
  color: var(--text);
}

.tab.active {
  border-color: #ffe0ac;
  background: var(--accent-soft);
  color: var(--text);
}

.nav-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--accent);
  flex: 0 0 auto;
  transition: width 220ms ease, height 220ms ease, border-radius 220ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.nav-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@media (min-width: 761px) {
  .app-shell.sidebar-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .app-shell.sidebar-collapsed .sidebar-brand {
    padding: 12px 10px;
  }

  .app-shell.sidebar-collapsed .sidebar-brand img {
    width: 52px;
  }

  .app-shell.sidebar-collapsed .sidebar-brand img[src$="aksk-logo.png"] {
    width: 50px;
    max-height: 50px;
  }

  .app-shell.sidebar-collapsed .org-switcher {
    grid-template-columns: 46px;
    justify-content: center;
    padding: 14px;
  }

  .app-shell.sidebar-collapsed .org-switcher > div:last-child {
    width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-8px);
  }

  .app-shell.sidebar-collapsed .side-nav {
    justify-items: center;
    padding-inline: 10px;
  }

  .app-shell.sidebar-collapsed .side-nav p {
    height: 8px;
    margin: 10px 0 2px;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-8px);
  }

  .app-shell.sidebar-collapsed .tab {
    width: 52px;
    min-height: 52px;
    justify-content: center;
    gap: 0;
    border-radius: 12px;
    padding: 7px;
  }

  .app-shell.sidebar-collapsed .tab .nav-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #fff7ea;
  }

  .app-shell.sidebar-collapsed .tab .nav-icon svg {
    width: 20px;
    height: 20px;
  }

  .app-shell.sidebar-collapsed .tab.active .nav-icon {
    background: #fff0d1;
  }

  .app-shell.sidebar-collapsed .nav-label {
    width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-8px);
  }
}

.main-shell {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.topbar {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  padding: 10px 24px;
}

.topbar .eyebrow {
  margin-bottom: 2px;
  font-size: 11px;
}

.topbar-title {
  min-width: 0;
  flex: 1;
}

.topbar-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-title-row h1 {
  flex: 0 0 auto;
}

.topbar-osint-search {
  flex: 1;
  min-width: 260px;
  max-width: 860px;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.topbar-osint-search input {
  min-height: 42px;
  border-radius: 8px;
  background: var(--input-bg);
}

.topbar-osint-search button {
  min-width: 104px;
  min-height: 42px;
}

.topbar-osint-search.is-searching input {
  opacity: 0.72;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-menu,
.notification-menu {
  position: relative;
}

.notification-bell {
  position: relative;
  width: 46px;
  height: 46px;
  min-height: 46px;
  display: grid;
  place-items: center;
  border-color: #dce5ee;
  border-radius: 999px;
  background: var(--button-bg);
  padding: 0;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.notification-bell svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  min-height: 20px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #dc3545;
  color: #fff;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 900;
}

.message-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 32;
  width: min(380px, calc(100vw - 32px));
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  animation: menuIn 180ms ease-out;
}

.message-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.message-panel-head strong {
  color: var(--ink);
}

.message-panel-head span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 850;
}

.message-list {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
}

.user-menu-trigger {
  min-height: 58px;
  display: grid;
  grid-template-columns: 46px max-content;
  gap: 12px;
  align-items: center;
  border-color: transparent;
  background: transparent;
  padding: 6px 8px;
}

.user-menu-trigger:hover,
.user-menu-trigger[aria-expanded="true"] {
  border-color: transparent;
  background: transparent;
}

.user-menu-trigger > span:last-child,
.dropdown-profile > div {
  min-width: 0;
}

.user-menu-trigger > span:last-child {
  display: grid;
  justify-items: start;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: min(300px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.16);
  transform-origin: top right;
  animation: menuIn 180ms ease-out;
}

.dropdown-profile {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.user-dropdown button {
  width: 100%;
  justify-content: center;
  border-color: #ffe0ac;
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 750;
}

.theme-switch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 2px 0 12px;
  color: var(--text);
}

.theme-switch-row span {
  display: grid;
  gap: 3px;
}

.theme-switch-row strong {
  color: var(--ink);
  font-size: 14px;
}

.theme-switch-row small {
  color: var(--muted);
  font-size: 12px;
}

.theme-switch-row input {
  appearance: none;
  width: 52px;
  min-height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  padding: 3px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.theme-switch-row input::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
  transition: transform 180ms ease;
}

.theme-switch-row input:checked {
  border-color: var(--primary);
  background: var(--primary);
}

.theme-switch-row input:checked::before {
  transform: translateX(22px);
}

@keyframes menuIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.layout {
  min-width: 0;
  padding: 28px 24px 42px;
}

.workspace {
  min-width: 0;
  display: grid;
  gap: 24px;
}

.view {
  display: none;
  gap: 24px;
}

.view.active {
  display: grid;
}

.view-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#statusView > .view-heading {
  justify-content: flex-end;
}

.period-controls,
.toolbar,
.row-actions,
.export-actions,
.institution-actions,
.pagination,
.pagination-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.period-controls {
  justify-content: flex-end;
}

.period-controls select,
.period-controls input {
  width: 160px;
}

.period-controls button {
  width: auto;
}

.panel,
.metric,
.table-wrap,
.status-row,
.runtime-card,
.runtime-tool,
.account-form-panel,
.accounts-panel,
.credential-card,
.detail-card,
.detail-list {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel,
.account-form-panel,
.accounts-panel {
  padding: 22px;
}

.scan-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 18px;
}

.scope-panel {
  min-width: 0;
}

form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

label {
  display: grid;
  gap: 7px;
  color: #5a6574;
  font-size: 13px;
  font-weight: 700;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
}

.checkbox-row input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--primary);
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d7e0ea;
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--ink);
  padding: 10px 14px;
  outline: none;
}

textarea {
  min-height: 92px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(18, 124, 114, 0.14);
}

button,
.button {
  min-height: 40px;
  border: 1px solid #d8e1ec;
  border-radius: 7px;
  background: var(--button-bg);
  color: var(--ink);
  padding: 9px 14px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

button:hover,
.button:hover {
  border-color: var(--accent);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  font-weight: 750;
}

.primary:hover {
  background: var(--primary-strong);
}

.button.secondary {
  background: var(--surface-2);
}

.danger-button {
  border-color: var(--danger);
  background: #fff0ef;
  color: var(--danger);
  font-weight: 800;
  /* Lay the square + label out as one centered row so the square always sits
     directly before "Stop" (never wraps above it). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.stop-square {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: currentColor;
  flex: 0 0 auto;
}

.submit-wide {
  width: 100%;
  margin-top: 4px;
}

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

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.metric {
  padding: 22px;
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.metric strong {
  display: block;
  margin-top: 10px;
  color: var(--text);
  font-size: 34px;
  line-height: 1;
}

.metric::after {
  content: "";
  display: block;
  width: 78%;
  height: 7px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0 62%, #f4f1eb 62% 100%);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.section-heading span {
  min-width: 32px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 4px 10px;
  text-align: center;
  font-weight: 800;
}

.institution-list,
.status-list,
.runtime-logs,
.log-list {
  display: grid;
  gap: 12px;
}

.runtime-tools {
  display: grid;
  /* Fluid columns: sidebar-open ≈ 220px min, sidebar-closed ≈ 260px min.
     Both states handled by auto-fill — no hard row height here. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: auto; /* let each row grow to the tallest card in that row */
  gap: 14px;
}

.institution-list {
  margin-top: 16px;
}

.institution {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.institution strong,
.institution span,
.status-row strong,
.status-row span,
.log-entry strong,
.log-entry span {
  display: block;
}

.institution span,
.status-row span,
.status-meta span:last-child {
  color: var(--muted);
}

.institution span {
  margin-top: 4px;
  font-size: 13px;
}

.status-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
}

.status-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.status-detail {
  flex-basis: 100%;
  color: var(--muted);
  line-height: 1.35;
}

.toolbar {
  justify-content: space-between;
}

.toolbar input {
  flex: 1 1 320px;
}

.toolbar select {
  width: 180px;
}

.report-filters,
.account-toolbar {
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  padding: 20px;
  box-shadow: var(--shadow);
}

.account-toolbar {
  margin-bottom: 16px;
}

.account-toolbar input {
  max-width: 520px;
}

.account-toolbar select {
  max-width: 220px;
}

.table-wrap {
  overflow: auto;
}

.table-wrap.flat {
  box-shadow: none;
}

table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.accounts-table {
  min-width: 900px;
}

th,
td {
  border-bottom: 1px solid #e5ebf2;
  padding: 17px 18px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--table-head);
  color: #59667a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

tbody tr {
  transition: background 140ms ease;
}

tbody tr:hover {
  background: var(--row-hover);
}

tbody tr:last-child td {
  border-bottom: 0;
}

td .row-actions button,
td .row-actions .button {
  min-height: 36px;
  border-radius: 7px;
  background: #fff;
}

.account-actions {
  flex-wrap: nowrap;
  gap: 9px;
  min-width: 190px;
}

.account-action {
  width: 38px;
  min-height: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: #fff;
  padding: 0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transition: none;
}

.account-action svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-action:hover {
  background: #fff;
}

.account-action-edit {
  border-color: #b9dcff;
  color: #175cd3;
}

.account-action-reset {
  border-color: #abefc6;
  color: #079455;
}

.account-action-toggle {
  border-color: #d8e1ec;
  color: #98a2b3;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.account-action-toggle.is-on {
  border-color: #abefc6;
  color: #12b76a;
  box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.14), 0 8px 18px rgba(15, 23, 42, 0.08);
}

.account-action-toggle.is-off {
  color: #98a2b3;
}

.account-action-delete {
  border-color: #f3b9b5;
  color: var(--danger);
}

.account-action-delete:hover {
  border-color: #f3b9b5;
  background: #fff;
}

.account-action:disabled,
.account-action:disabled:hover {
  box-shadow: none;
  background: #fff;
}

.table-subtext {
  display: block;
  margin-top: 5px;
  font-size: 12px;
}

.pagination {
  justify-content: space-between;
  margin-top: 14px;
  color: #59667a;
  font-size: 13px;
}

.pagination-actions button {
  min-height: 34px;
  padding: 6px 11px;
}

.pagination-actions label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #59667a;
}

.pagination-actions select {
  width: 74px;
  min-height: 38px;
  padding: 6px 8px;
}

/* ── Universal pill — same frosted-glass style as the IOC badge ──────────────
   rgba background + border works in both light and dark themes without
   needing separate overrides.                                               */

.pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 22px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

/* CVE include/exclude selector list (scan evidence modal) */
.cve-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.cve-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.3;
  cursor: pointer;
}
.cve-item input.cve-toggle {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #1f9d8a;
  flex: 0 0 auto;
}
.cve-item.cve-item-off { opacity: 0.5; }
.cve-item.cve-item-off a { text-decoration: line-through; }
.cve-score {
  font-weight: 800;
  font-size: 11px;
  color: #b54708;
}
.cve-tag {
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cve-tag-affected {
  background: rgba(217, 45, 32, 0.12);
  color: #d92020;
  border-color: rgba(217, 45, 32, 0.28);
}
.cve-tag-patched {
  background: rgba(16, 122, 87, 0.12);
  color: #107a57;
  border-color: rgba(16, 122, 87, 0.28);
}
.cve-tag-review {
  background: rgba(181, 71, 8, 0.12);
  color: #b54708;
  border-color: rgba(181, 71, 8, 0.28);
}
.cve-src {
  font-size: 10px;
  color: #6c7886;
  white-space: nowrap;
}

/* Red — Critical / Failed / Disabled */
.risk-Critical,
.status-Failed,
.account-disabled {
  background: rgba(217, 45, 32, 0.12);
  color: #d92020;
  border-color: rgba(217, 45, 32, 0.30);
}

/* Amber — High risk */
.risk-High {
  background: rgba(181, 71, 8, 0.12);
  color: #b54708;
  border-color: rgba(181, 71, 8, 0.28);
}

/* Green — Low Signal (some activity, not conclusive) */
.risk-Low {
  background: rgba(5, 150, 105, 0.10);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.28);
}

/* Blue — Medium / Scanning */
.risk-Medium,
.status-Scanning {
  background: rgba(23, 92, 211, 0.12);
  color: #1849a9;
  border-color: rgba(23, 92, 211, 0.28);
}

/* Gray — OSINT "clean" / no-signal states */
.risk-Review,
.risk-Inventory,
.status-Finished {
  background: rgba(71, 84, 103, 0.10);
  color: #475467;
  border-color: rgba(71, 84, 103, 0.24);
}

/* ── Scan / Report view: risk pill colours are independent from OSINT ─────
   Inside .scan-detail (scan dialog body) and .scan-record-view (records list)
   the risk-* pills keep their original semantic meaning:
     Inventory → green  (known tech, no version concern)
     Review    → blue   (version outdated but no CVE)
     Medium    → amber
     High      → orange
     Critical  → red                                                        */
.scan-detail .risk-Inventory,
.scan-record-view .risk-Inventory {
  background: rgba(7, 134, 95, 0.12);
  color: #067647;
  border-color: rgba(7, 134, 95, 0.28);
}

.scan-detail .risk-Review,
.scan-record-view .risk-Review {
  background: rgba(23, 92, 211, 0.10);
  color: #1849a9;
  border-color: rgba(23, 92, 211, 0.26);
}

.scan-detail .risk-Medium,
.scan-record-view .risk-Medium {
  background: rgba(181, 71, 8, 0.10);
  color: #b54708;
  border-color: rgba(181, 71, 8, 0.26);
}

.scan-detail .risk-High,
.scan-record-view .risk-High {
  background: rgba(217, 45, 32, 0.10);
  color: #c4320a;
  border-color: rgba(217, 45, 32, 0.26);
}

.scan-detail .risk-Critical,
.scan-record-view .risk-Critical {
  background: rgba(180, 35, 24, 0.12);
  color: #b42318;
  border-color: rgba(180, 35, 24, 0.30);
}

/* Green — Account active */
.account-active {
  background: rgba(7, 134, 95, 0.12);
  color: #067647;
  border-color: rgba(7, 134, 95, 0.28);
}

/* Amber — Setup required (action needed) */
.account-setup-required {
  background: rgba(181, 71, 8, 0.10);
  color: #b54708;
  border-color: rgba(181, 71, 8, 0.26);
}

/* Neutral — Pending / Queued / Stopped / Invited */
.status-Pending,
.status-Queued,
.status-Stopped,
.account-invited {
  background: rgba(71, 84, 103, 0.12);
  color: #475467;
  border-color: rgba(71, 84, 103, 0.28);
}

#statusView,
#reportsView {
  gap: 22px;
}

#statusView > .view-heading {
  padding: 18px 0 8px;
}

#statusView .period-controls {
  width: 100%;
}

#openInstitutionDialogBtn {
  border-color: rgba(18, 124, 114, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.28)),
    var(--surface);
  color: var(--primary-strong);
  font-weight: 850;
}

#statusView .period-controls select,
#statusView .period-controls input,
#reportsView .report-filters input,
#reportsView .report-filters select {
  min-height: 54px;
  border-color: var(--line-strong);
  background: var(--input-bg);
  font-size: 16px;
}

#statusView .period-controls button {
  min-height: 54px;
  padding-inline: 22px;
  font-weight: 800;
}

#statusView .summary-grid {
  gap: 20px;
}

#statusView .metric {
  position: relative;
  min-height: 148px;
  overflow: hidden;
  padding: 26px 28px;
  background:
    linear-gradient(180deg, rgba(18, 124, 114, 0.07), transparent 62%),
    var(--surface);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
  transform-style: preserve-3d;
}

#statusView .metric:hover {
  transform: translateY(-4px) perspective(900px) rotateX(1.4deg);
  border-color: rgba(18, 124, 114, 0.24);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

#statusView .metric span {
  color: var(--muted);
  font-size: 14px;
}

#statusView .metric strong {
  margin-top: 18px;
  font-size: 42px;
  font-variant-numeric: tabular-nums;
}

#statusView .metric::after {
  width: min(72%, 320px);
  height: 8px;
  margin-top: 18px;
  background: linear-gradient(90deg, var(--accent) 0 62%, rgba(15, 23, 42, 0.12) 62% 100%);
}

#statusView .scan-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

#statusView .panel,
#reportsView .report-filters,
#reportsView .table-wrap {
  border-radius: 10px;
}

#statusView .panel {
  padding: 28px;
}

#statusView .scope-panel {
  min-height: 360px;
}

#statusView .section-heading {
  margin-bottom: 8px;
}

#statusView form {
  gap: 16px;
  margin-top: 22px;
}

#statusView label {
  gap: 9px;
}

#statusView input,
#statusView textarea {
  border-color: var(--line-strong);
}

#statusView .institution-list {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 22px;
}

#statusView .institution {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 184px;
  overflow: hidden;
  padding: 24px;
  border-color: var(--line-strong);
  background:
    linear-gradient(180deg, rgba(18, 124, 114, 0.045), transparent 72%),
    var(--surface);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
  transform-style: preserve-3d;
  animation: targetRise 260ms ease-out both;
}

#statusView .institution::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 16%, rgba(18, 124, 114, 0.14), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 42%);
  opacity: 0;
  transition: opacity 180ms ease;
}

#statusView .institution > * {
  position: relative;
}

#statusView .institution:hover {
  transform: translateY(-6px) perspective(1000px) rotateX(1.5deg) rotateY(-0.8deg);
  border-color: rgba(18, 124, 114, 0.28);
  box-shadow:
    0 22px 54px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

#statusView .institution:hover::before {
  opacity: 1;
}

#statusView .institution strong {
  font-size: 20px;
}

#statusView .institution span {
  font-size: 15px;
}

#statusView .institution-actions {
  margin-top: auto;
}

#statusView .status-list {
  gap: 16px;
}

#statusView .status-row {
  position: relative;
  min-height: 92px;
  padding: 22px 24px;
  grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1.4fr) auto;
  background:
    linear-gradient(180deg, rgba(18, 124, 114, 0.05), transparent 60%),
    var(--surface);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
  animation: targetRise 240ms ease-out both;
}

#statusView .status-row:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 124, 114, 0.26);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
}

/* The whole card opens the scan view when a report exists. */
#statusView .status-row.clickable {
  cursor: pointer;
}
#statusView .status-row.clickable:hover {
  border-color: rgba(18, 124, 114, 0.4);
}
#statusView .status-row.clickable:focus-visible {
  outline: 2px solid rgba(18, 124, 114, 0.55);
  outline-offset: 2px;
}

#statusView .status-row strong {
  font-size: 17px;
}

#statusView .status-meta {
  align-items: center;
}

#statusView .pill.status-Finished {
  border: 1px solid rgba(6, 118, 71, 0.2);
  background: #dcfae6;
  color: #067647;
}

#statusView .pill.status-Pending,
#statusView .pill.status-Queued,
#statusView .pill.status-Stopped {
  border: 1px solid rgba(71, 84, 103, 0.18);
}

#reportsView .report-filters {
  display: grid;
  grid-template-columns: minmax(280px, 1.45fr) minmax(190px, 0.8fr) minmax(150px, 0.65fr) minmax(130px, 0.55fr) minmax(150px, 0.65fr);
  gap: 14px;
  padding: 18px;
  box-shadow: none;
}

#reportsView .table-wrap {
  background:
    linear-gradient(180deg, rgba(18, 124, 114, 0.045), transparent 58%),
    var(--surface);
}

#reportsView table {
  border-collapse: separate;
  border-spacing: 0;
}

#reportsView th {
  background: transparent;
  letter-spacing: 0;
}

#reportsView td {
  padding: 19px 18px;
}

#reportsView .report-row {
  transition:
    background 160ms ease,
    transform 160ms ease;
}

#reportsView .report-row:hover {
  background: var(--row-hover);
}

#reportsView .row-actions {
  justify-content: flex-start;
}

.accounts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
}

.runtime-card,
.runtime-tool {
  min-width: 0;
  padding: 18px;
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 18px;
  align-items: stretch;
  border: 1px solid #d6e3e0;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(6, 95, 70, 0.08), transparent 44%),
    #ffffff;
  box-shadow: var(--shadow);
  padding: 24px;
}

.dashboard-hero h2 {
  max-width: 880px;
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1.02;
}

.dashboard-hero p:not(.eyebrow) {
  max-width: 760px;
  margin: 12px 0 0;
  color: #475467;
  font-size: 16px;
  line-height: 1.55;
}

.dashboard-signal-card {
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #101828;
  color: #fff;
  padding: 20px;
}

.dashboard-signal-card span,
.dashboard-signal-card small {
  color: #a7b5cc;
}

.dashboard-signal-card strong {
  font-size: 28px;
  line-height: 1.05;
}

.dashboard-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-action-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(72px, 1fr) auto auto;
  gap: 10px;
  min-height: 238px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  padding: 18px;
  text-align: left;
  white-space: normal;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dashboard-action-card:hover:not(:disabled) {
  border-color: rgba(18, 124, 114, 0.42);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
  transform: translateY(-2px);
}

.dashboard-action-card:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.dashboard-action-card > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eefaf7;
  color: var(--primary);
}

.dashboard-action-card svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-action-card strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
}

.dashboard-action-card small {
  color: #475467;
  font-size: 13px;
  line-height: 1.45;
}

.dashboard-action-card em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.dashboard-action-card b {
  justify-self: start;
  border-radius: 999px;
  background: #fff7ea;
  color: #b54708;
  padding: 6px 10px;
  font-size: 12px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 14px;
}

.dashboard-panel {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px;
}

.dashboard-panel-wide {
  grid-column: 1 / -1;
}

.dashboard-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.dashboard-provider {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 10px;
}

.dashboard-provider.is-ready {
  border-color: #abefc6;
  background: #f0fdf4;
}

.dashboard-provider .tool-logo {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  border-radius: 10px;
}

.dashboard-provider .tool-logo img {
  max-width: 28px;
  max-height: 28px;
}

.dashboard-provider b,
.dashboard-provider small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dashboard-provider b {
  color: var(--ink);
  font-size: 13px;
}

.dashboard-provider small {
  color: #667085;
  font-size: 12px;
}

.dashboard-hint-list,
.dashboard-event-log {
  display: grid;
  gap: 10px;
}

.dashboard-hint-list article {
  border-left: 3px solid var(--primary);
  background: #f8fbfb;
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
}

.dashboard-hint-list strong,
.dashboard-event-log strong {
  color: var(--ink);
}

.dashboard-hint-list p,
.dashboard-event-log p {
  margin: 4px 0 0;
  color: #475467;
  line-height: 1.45;
}

.dashboard-event-log article {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding: 0 0 12px;
}

.dashboard-event-log article:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.dashboard-event-log article > span {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 5px #e6f7f3;
}

.runtime-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #f7fffc);
  box-shadow: var(--shadow);
  padding: 22px;
}

.runtime-intro h2 {
  font-size: 26px;
}

.runtime-intro p {
  max-width: 880px;
  margin: 8px 0 0;
  color: #59667a;
  line-height: 1.55;
}

.runtime-intro code {
  color: var(--primary-strong);
  font-weight: 850;
}

.runtime-intro > span {
  justify-self: end;
  border-radius: 999px;
  background: #ecfdf3;
  color: #067647;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 850;
}

.runtime-tool-card,
.osint-metric {
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.runtime-tool-card {
  width: 100%;
  /* No height: 100% — the grid container stretches cards to match row height.
     Internal layout: logo + body fill available space, status pill pinned bottom. */
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  /* Row 1: logo + body (grows with content).
     Row 2: status pill (auto = just tall enough). */
  grid-template-rows: 1fr auto;
  /* Space-between pushes the status row to the bottom of the card when the
     row is taller than the card's natural content (e.g. shorter cards in a row
     where another card is taller). */
  align-content: space-between;
  align-items: start;
  gap: 12px 14px;
  padding: 16px;
  overflow: hidden;
  text-align: left;
  white-space: normal;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  /* Minimum height so trivial cards (no key, no tags) don't look tiny */
  min-height: 140px;
}

.runtime-tool-card:hover {
  border-color: rgba(18, 124, 114, 0.42);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.11);
  transform: translateY(-2px);
}

.tool-logo,
.osint-metric > span {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #eefaf7;
  color: var(--primary);
  font-size: 14px;
  font-weight: 950;
}

.tool-logo {
  overflow: hidden;
}

.tool-logo img {
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}

.runtime-tool-card .tool-logo img {
  max-width: 38px;
  max-height: 38px;
}

.tool-logo b {
  display: none;
}

.metric-logo {
  background: #eefaf7;
}

.tool-logo-gti { background: #e8f1ff; color: #175cd3; }
.tool-logo-virustotal { background: #eef4ff; color: #2563eb; }
.tool-logo-recordedfuture { background: #111827; color: #fff; }
.tool-logo-abuseipdb { background: #eefaf7; color: #07865f; }
.tool-logo-censys { background: #eef4ff; color: #1849a9; }
.tool-logo-shodan { background: #fff1f3; color: #c01048; }
.tool-logo-criminalip { background: #fff7ed; color: #c2410c; }
.tool-logo-otx { background: #ecfdf3; color: #067647; }
.tool-logo-urlscan { background: #f0f9ff; color: #026aa2; }
.tool-logo-threatfox { background: #fff1f0; color: #b42318; }
.tool-logo-internetdb { background: #f2f4f7; color: #344054; }
.tool-logo-httpx { background: #f5f3ff; color: #5925dc; }
.tool-logo-nvd { background: #ecfdf3; color: #067647; }
.tool-logo-portchecker { background: #f0f9ff; color: #026aa2; }
.tool-logo-fingerprints { background: #eefaf7; color: #0d625a; }
/* Phase 1 expansion vendor colours */
.tool-logo-greynoise { background: #f0fdf4; color: #15803d; }
.tool-logo-malwarebazaar { background: #fff1f3; color: #9a1239; }
.tool-logo-urlhaus { background: #fff1f3; color: #b42318; }
.tool-logo-threatminer { background: #1a1a2e; color: #e2e8f0; }
.tool-logo-circl-hashlookup,
.tool-logo-circl_hashlookup { background: #eff6ff; color: #1d4ed8; }
.tool-logo-robtex { background: #fefce8; color: #854d0e; }
.tool-logo-bgpview { background: #f0f9ff; color: #0369a1; }
.tool-logo-hybridanalysis { background: #fef3c7; color: #92400e; }
.tool-logo-googlesafebrowsing { background: #f0fdf4; color: #166534; }
.tool-logo-hibp { background: #faf5ff; color: #6b21a8; }
.tool-logo-pulsedive { background: #fff7ed; color: #9a3412; }
.tool-logo-leakix { background: #0f172a; color: #94a3b8; }
.tool-logo-ransomwatch { background: #fef2f2; color: #b91c1c; }
.tool-logo-securitytrails { background: #eff6ff; color: #1e40af; }
.tool-logo-intelx { background: #1e1b4b; color: #a5b4fc; }

/* ── Tool card name row (name + tier badge inline) ───────────────────────── */
.tool-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Tier badges ────────────────────────────────────────────────────────── */
.tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 18px;
  white-space: nowrap;
  flex-shrink: 0;
}

.tier-free {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.tier-community {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.tier-pro {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.tier-enterprise {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

/* ── Free-limit hint text ───────────────────────────────────────────────── */
.tool-free-limit {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Type tag chips (ip, domain, url, hash) ─────────────────────────────── */
.tool-type-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.tool-type-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  height: 18px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.06);
  color: var(--text-secondary);
  border: 1px solid var(--line);
}

/* ── Alert banner (e.g. ransomware victim warning) ─────────────────────── */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
}

.alert-malicious {
  background: rgba(185, 28, 28, 0.08);
  color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, 0.25);
}

.alert-suspicious {
  background: rgba(217, 119, 6, 0.08);
  color: #d97706;
  border: 1px solid rgba(217, 119, 6, 0.25);
}

/* ── Section vendor badge (source attribution inside a card) ────────────── */
.section-vendor-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-secondary);
}

.section-vendor-badge .tool-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 8px;
}

.section-vendor-badge .tool-logo img {
  max-width: 14px;
  max-height: 14px;
}

.flag-icon {
  border-radius: 999px !important;
  background: #fff7ed !important;
  color: #9a3412 !important;
  overflow: hidden;
}

.flag-icon img {
  width: 34px;
  height: 25px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.flag-icon b {
  font-size: 11px;
}

.geolocation-metric {
  align-items: center;
}

.geo-country,
.geo-asn {
  display: block;
  overflow-wrap: anywhere;
}

.geo-country {
  margin-top: 3px;
  color: var(--primary-strong) !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
}

.geo-asn {
  margin-top: 4px;
  color: #475467;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
}

.geo-country[title] {
  cursor: help;
}

/* In the OSINT metric card the RF pill lives below the score on its own line and wraps freely */
.osint-metric .rf-assessment-pill {
  display: block;
  white-space: normal;
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  font-size: 10.5px;
}

.tool-card-status svg,
.osint-metric svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-card-body {
  min-width: 0;
  min-height: 0;  /* allow grid row to shrink if needed */
  display: grid;
  gap: 5px;
  align-content: start;
  /* Body lives in row 1 — must not bleed into the status row */
  overflow: hidden;
}

.tool-card-body strong,
.osint-metric strong {
  color: var(--ink);
  font-weight: 850;
  line-height: 1.18;
}

.tool-card-body small,
.osint-metric small {
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;   /* 2 lines max keeps cards compact */
  -webkit-box-orient: vertical;
}

.tool-card-body code,
.key-preview code {
  display: block;
  /* Never let the key preview wrap onto a second line or push the status pill */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 800;
}

.tool-card-status {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 850;
}

.tool-card-status svg {
  width: 15px;
  height: 15px;
}

.messages-grid {
  display: grid;
  grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
  gap: 18px;
}

.message-compose-panel,
.message-preview-panel {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  padding: 22px;
  box-shadow: var(--shadow);
}

.message-preview-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.message-delete-frame {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.message-item {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 52px;
  align-items: start;
  gap: 14px;
  border: 1px solid #dce5ee;
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  text-align: left;
  white-space: normal;
  transition: transform 230ms ease, opacity 230ms ease;
}

.message-item.unread {
  border-color: #a8ddd6;
  background: #f0fffc;
}

.message-item.seen {
  background: #f6f7f9;
  color: #7a8492;
}

.message-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--primary);
}

.message-item.seen .message-dot {
  background: #c1c9d2;
}

.message-item span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.message-item strong {
  color: var(--ink);
  font-size: 13px;
}

.message-item.seen strong {
  color: #687385;
}

.message-item small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.message-item em {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  font-style: normal;
  font-weight: 650;
  line-height: 1.35;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.message-delete-x {
  width: 56px;
  min-height: 58px;
  height: 100%;
  display: grid;
  place-items: center;
  align-self: stretch;
  border-left: 1px solid #d5dbe3;
  color: #a4adba;
  font-size: 22px;
  font-style: normal;
  font-weight: 350;
  line-height: 1;
}

.message-delete-x:hover {
  background: transparent;
}

.message-trash-confirm {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: 78px;
  min-height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0 10px 10px 0;
  background: #ff3b30;
  color: #fff;
  padding: 0;
  transform: translateX(100%);
  transition: transform 230ms ease;
}

.message-trash-confirm svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-delete-frame.confirming-delete .message-item {
  transform: translateX(-78px);
}

.message-delete-frame.confirming-delete .message-trash-confirm {
  transform: translateX(0);
}

.message-delete-frame.deleting-message .message-item,
.message-delete-frame.deleting-message .message-trash-confirm {
  opacity: 0;
  transform: translateX(-110%);
}

.message-empty {
  padding: 28px 18px;
  color: #98a2b3;
  font-weight: 750;
  text-align: center;
}

.message-dialog {
  width: min(620px, calc(100vw - 32px));
  border: 0;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
}

.message-dialog::backdrop {
  background: rgba(7, 20, 38, 0.28);
}

.dialog-close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  min-height: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  padding: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.message-dialog-meta {
  margin-bottom: 8px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.message-dialog p {
  margin: 14px 0 0;
  color: #344054;
  line-height: 1.6;
  white-space: pre-wrap;
}

.runtime-hero {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  background: #101820;
  color: #d9fff7;
}

.runtime-logo {
  display: block;
  width: min(260px, 100%);
  max-height: 132px;
  object-fit: contain;
}

.runtime-card span,
.runtime-tool span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

/* ── Error log header row (label + Clear All button) ─────────────────────── */
.runtime-logs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.runtime-logs-header span {
  margin-bottom: 0;
}

.clear-errors-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
  white-space: nowrap;
}

.clear-errors-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.clear-errors-btn:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.06);
}

.clear-errors-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.runtime-hero span,
.runtime-hero .muted {
  color: #9ce3d4;
}

.runtime-card strong {
  display: block;
  margin-top: 6px;
  color: inherit;
  font-size: 22px;
  overflow-wrap: anywhere;
}

.runtime-card code,
.runtime-tool code,
.detail-list code {
  display: block;
  max-width: 100%;
  margin-top: 8px;
  border-radius: 7px;
  background: #101820;
  color: #d9fff7;
  padding: 10px;
  overflow: auto;
  font: 13px/1.4 Consolas, "Courier New", monospace;
}

.runtime-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.runtime-tool strong {
  display: block;
  margin-bottom: 4px;
}

.runtime-tool p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.log-entry {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.tool-enabled,
.tool-available {
  background: #d1fadf;
  color: var(--ok);
}

.tool-optional,
.tool-not-configured,
.tool-unauthorized {
  background: #fef0c7;
  color: var(--warning);
}

.tool-error,
.tool-failed {
  background: #fee4e2;
  color: var(--danger);
}

.osint-result-panel,
.integration-form {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.osint-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.osint-metric {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.osint-metric::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.72;
}

.osint-metric > * {
  position: relative;
}

.osint-metric.metric-none {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.08), var(--surface));
  border-color: rgba(148, 163, 184, 0.28);
}

.osint-metric.metric-low {
  background: linear-gradient(135deg, rgba(18, 183, 106, 0.10), var(--surface));
  border-color: rgba(18, 183, 106, 0.34);
}

.osint-metric.metric-medium,
.osint-metric.metric-Review,
.osint-metric.metric-Medium {
  background: linear-gradient(135deg, rgba(247, 144, 9, 0.12), var(--surface));
  border-color: rgba(247, 144, 9, 0.36);
}

.osint-metric.metric-high,
.osint-metric.metric-High,
.osint-metric.metric-Critical {
  background: linear-gradient(135deg, rgba(217, 45, 32, 0.13), var(--surface));
  border-color: rgba(217, 45, 32, 0.42);
}

.osint-metric strong {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: 24px;
  line-height: 1.1;
}

.osint-metric em {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.risk-text-High,
.risk-text-Critical {
  color: var(--danger) !important;
  font-weight: 850;
}

.risk-text-Medium,
.risk-text-Review {
  color: var(--warning) !important;
  font-weight: 850;
}

.osint-result-panel {
  min-height: 220px;
  padding: 14px;
}

.osint-landing-panel {
  display: grid;
  min-height: calc(100dvh - 190px);
  align-items: start;
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(18, 124, 114, 0.06), transparent 44%),
    var(--bg);
  color: var(--text);
  box-shadow: none;
  overflow: hidden;
}

.osint-landing {
  width: min(900px, 100%);
  display: grid;
  justify-self: center;
  align-content: start;
  gap: 18px;
  padding: clamp(18px, 4vw, 42px) 18px 42px;
  text-align: center;
}

.osint-brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
}

.osint-brand-lockup img {
  width: clamp(190px, 24vw, 318px);
  max-height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 16px 30px rgba(15, 23, 42, 0.09));
}

.osint-brand-lockup strong {
  display: none;
}

.osint-brand-copy {
  max-width: 720px;
  justify-self: center;
  margin: 0;
  color: #384252;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.osint-hero-mark {
  position: relative;
  width: 104px;
  height: 104px;
  justify-self: center;
  color: #10213f;
}

.osint-hero-mark::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 42px;
  height: 8px;
  background: #89a6ff;
  box-shadow: 0 0 28px rgba(137, 166, 255, 0.28);
  will-change: transform;
}

.osint-hero-mark.is-loading::before {
  animation: osintScanLine 1.25s ease-in-out infinite alternate;
}

.osint-hero-mark svg {
  position: absolute;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.osint-hero-mark svg:first-child {
  left: 21px;
  top: 24px;
  width: 46px;
  height: 46px;
  opacity: 0.46;
  stroke-width: 1.7;
}

.osint-hero-mark svg:last-child {
  right: 13px;
  bottom: 9px;
  width: 58px;
  height: 58px;
  stroke-width: 1.8;
}

.osint-hero-mark.is-loading svg:last-child {
  animation: osintSearchPulse 900ms ease-in-out infinite alternate;
}

body[data-theme="dark"] .osint-hero-mark {
  color: #f8fafc;
}

body[data-theme="dark"] .osint-hero-mark svg:first-child {
  opacity: 0.58;
}

.osint-landing h2 {
  max-width: 760px;
  justify-self: center;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
}

.osint-landing .muted {
  max-width: 680px;
  justify-self: center;
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.osint-landing-search {
  width: min(720px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
  justify-self: center;
  margin-top: 4px;
}

.osint-landing-search input {
  min-height: 54px;
  border-color: #cfd8e3;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.osint-landing-search input::placeholder {
  color: #758195;
}

.osint-landing-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(18, 124, 114, 0.14), 0 12px 28px rgba(15, 23, 42, 0.08);
}

.osint-landing-search button {
  min-height: 54px;
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.osint-landing-search button:hover {
  background: var(--primary-strong);
}

.osint-file-drop-inline {
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-self: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.osint-file-drop-inline button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border-color: #cfe8e3;
  background: #eefaf7;
  color: var(--primary-strong);
  font-weight: 700;
}

.osint-file-drop-inline svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.osint-search-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 760px;
  justify-self: center;
}

.osint-search-types span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #475467;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 800;
}

.osint-loading-state {
  align-content: center;
}

.osint-file-hashing {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 34px;
  text-align: center;
}

.osint-file-hashing h2,
.osint-file-hashing p {
  margin: 0;
}

.osint-file-icon,
.osint-drop-mark {
  position: relative;
  width: 86px;
  height: 86px;
  color: var(--primary);
}

.osint-file-icon svg,
.osint-drop-mark svg {
  position: absolute;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.osint-file-icon svg:first-child,
.osint-drop-mark svg:first-child {
  inset: 5px 18px 5px 12px;
  width: 58px;
  height: 72px;
  stroke-width: 1.9;
}

.osint-file-icon svg:last-child,
.osint-drop-mark svg:last-child {
  right: 2px;
  bottom: 6px;
  width: 44px;
  height: 44px;
  stroke-width: 1.9;
}

.osint-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(250, 249, 246, 0.86);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.osint-drop-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.osint-drop-card {
  width: min(520px, calc(100vw - 34px));
  display: grid;
  justify-items: center;
  gap: 14px;
  border: 1px dashed rgba(18, 124, 114, 0.56);
  border-radius: 14px;
  background: #fff;
  padding: 32px;
  text-align: center;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
}

.osint-drop-card img {
  width: 190px;
  max-width: 70vw;
}

.osint-drop-card h2,
.osint-drop-card p {
  margin: 0;
}

.osint-drop-card p {
  color: var(--muted);
  line-height: 1.55;
}

@keyframes osintSearchPulse {
  from { transform: scale(0.96); opacity: 0.78; }
  to { transform: scale(1.05); opacity: 1; }
}

@keyframes osintScanLine {
  from {
    transform: translateY(-22px);
    opacity: 0.7;
  }
  to {
    transform: translateY(28px);
    opacity: 1;
  }
}

.osint-empty-state {
  display: grid;
  gap: 8px;
  padding: 28px;
}

.osint-empty-state p {
  max-width: 760px;
  margin: 0;
}

.osint-report {
  display: grid;
  gap: 14px;
}

.osint-report-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 4px 4px;
  min-width: 0;
}

.osint-report-head > div {
  min-width: 0;
}

.osint-report-head p {
  margin: 5px 0 0;
}

.osint-report-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.osint-report-head h2 .pill {
  font-size: 12px;
  min-height: 28px;
  padding: 5px 12px;
}

.osint-tabs {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  color: #59667a;
  font-size: 13px;
  font-weight: 800;
}

.osint-tabs button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  min-height: 0;
  padding: 12px 0;
  white-space: nowrap;
  font-weight: 850;
}

.osint-tabs button.active {
  border-bottom: 2px solid var(--primary);
  color: var(--primary);
}

.osint-tabs button:hover {
  color: var(--primary);
}

.osint-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.osint-secondary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.osint-detail-card.wide {
  grid-column: 1 / -1;
}

.osint-detail-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  overflow: hidden;
}

.osint-detail-card p {
  color: #384252;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mini-facts {
  display: grid;
  grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
  gap: 8px 12px;
  margin: 14px 0 0;
  min-width: 0;
}

.mini-facts dt {
  color: var(--muted);
  font-weight: 800;
}

.mini-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mini-table {
  border-collapse: collapse;
  font-size: 0.78rem;
  width: 100%;
}
.mini-table th,
.mini-table td {
  padding: 0.25rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border, #e5e7eb);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.mini-table th {
  font-weight: 700;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mini-table tbody tr:hover {
  background: var(--surface-2, rgba(0,0,0,0.03));
}

.osint-source-list,
.related-ioc-list,
.ip-address-list {
  display: grid;
  gap: 8px;
}

.osint-source-list article,
.ip-address-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.osint-source-list article {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
}

.osint-source-list strong,
.osint-source-list small,
.ip-address-list strong,
.ip-address-list small {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ip-address-list article {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.ip-address-list .pill {
  justify-self: start;
}

.osint-source-list small {
  grid-column: 2 / -1;
}

.source-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 22px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

/* Gray — clean / no threat signal */
.source-clean,
.source-found,
.source-enabled,
.source-observed,
.source-available {
  background: rgba(71, 84, 103, 0.10);
  color: #475467;
  border-color: rgba(71, 84, 103, 0.24);
}

/* Green — low signal (some activity, not conclusive) */
.source-low-signal {
  background: rgba(5, 150, 105, 0.10);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.28);
}

.source-suspicious,
.source-not-configured {
  background: rgba(181, 71, 8, 0.12);
  color: #b54708;
  border-color: rgba(181, 71, 8, 0.28);
}

.source-malicious,
.source-error {
  background: rgba(217, 45, 32, 0.12);
  color: #d92020;
  border-color: rgba(217, 45, 32, 0.30);
}

.source-whitelisted,
.source-blocklisted {
  background: #dbeafe;
  color: #175cd3;
  border-color: rgba(23, 92, 211, 0.30);
}

body[data-theme="dark"] .source-whitelisted,
body[data-theme="dark"] .source-blocklisted {
  background: rgba(23, 92, 211, 0.18);
  color: #93c5fd;
  border-color: rgba(23, 92, 211, 0.35);
}

.otx-verdict {
  min-height: 24px;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1;
}

.otx-verdict-blocklist {
  background: #fee4e2;
  color: #b42318;
}

.otx-verdict-whitelist {
  background: #dbeafe;
  color: #175cd3;
}

.osint-source-list small { color: var(--muted); }

.ip-address-list small {
  color: var(--muted);
}

.ip-address-list em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.source-badge-row,
.tag-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.source-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.source-logo img {
  max-width: 20px;
  max-height: 20px;
}

.source-logo-compact {
  width: 24px;
  height: 24px;
  border-radius: 999px;
}

.source-logo-compact img {
  max-width: 17px;
  max-height: 17px;
}

.tag-pill {
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #eef4ff;
  color: #344054;
  min-height: 24px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 850;
}

.view-all-link {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: var(--primary);
  padding: 0;
  font-size: 12px;
  font-weight: 900;
}

.view-all-link:hover {
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
}

.related-ioc-list span {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f9fbfd;
  padding: 8px 10px;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.relation-list {
  display: grid;
  gap: 8px;
}

.relation-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.relation-list span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: capitalize;
}

.relation-list strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.relation-list em,
.relation-list a {
  justify-self: start;
}

.threatfox-records {
  margin-top: 14px;
}

.threatfox-records small {
  color: var(--muted);
}

.threatfox-records a {
  color: var(--primary);
  font-weight: 850;
  text-decoration: none;
}

.threatfox-records a:hover {
  text-decoration: underline;
}

.signal-chart,
.timeline-chart {
  display: grid;
  gap: 8px;
  /* default justify-items:stretch so labels and badge span full width */
}

.soc-verdict-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.soc-verdict-score strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.signal-chart svg,
.timeline-chart svg {
  width: 100%;
  min-height: 150px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 93, 93, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(217, 45, 32, 0.08), rgba(217, 45, 32, 0.01));
  color: #ff5d5d;
}

.signal-chart .axis,
.timeline-chart .axis {
  stroke: rgba(71, 84, 103, 0.25);
  stroke-width: 1;
}

.signal-chart text,
.timeline-chart text {
  fill: #667085;
  font-size: 10px;
}

.signal-chart polygon {
  fill: url(#signalAreaGradient);
}

.signal-chart polyline,
.timeline-chart polyline {
  fill: none;
  stroke: #ef4444;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.timeline-chart circle {
  fill: #fff;
  stroke: #ef4444;
  stroke-width: 2;
}

.signal-chart-labels,
.timeline-chart > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 2px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.signal-chart-labels span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signal-chart dl,
.timeline-chart dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 12px;
  margin: 8px 0 0;
}

.signal-chart dt,
.timeline-chart dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.signal-chart dd,
.timeline-chart dd {
  grid-row: 2;
  margin: 0;
  font-size: 18px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.urlscan-screenshot {
  display: grid;
  gap: 12px;
  margin: 0;
}

.urlscan-screenshot img {
  width: 100%;
  max-height: 620px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-2);
  object-fit: contain;
}

.urlscan-screenshot figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.osint-cert-list {
  display: grid;
  gap: 12px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.osint-cert-list li {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.osint-similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.osint-similar-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px;
  overflow: hidden;
}

.osint-similar-card img {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.osint-similar-body {
  display: grid;
  gap: 4px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.osint-similar-body .muted {
  font-size: 12px;
}

.osint-methodology {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #a6f4c5;
  border-radius: 8px;
  background: #ecfdf3;
  color: #05603a;
  padding: 12px 14px;
}

.osint-methodology span {
  display: grid;
  place-items: center;
}

.osint-methodology svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.osint-methodology p {
  margin: 0;
}

.osint-methodology button {
  border: 0;
  background: transparent;
  color: #067647;
  font-weight: 850;
}

.link-resolution-banner {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e3a8a;
  padding: 12px 14px;
  margin: 0 0 16px;
}

.link-resolution-banner--warn {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.link-resolution-icon {
  display: grid;
  place-items: center;
}

.link-resolution-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.link-resolution-body p {
  margin: 0;
  line-height: 1.5;
}

.link-resolution-body code {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.9em;
  word-break: break-all;
}

.link-resolution-chain {
  margin-top: 8px;
}

.link-resolution-chain summary {
  cursor: pointer;
  font-weight: 700;
  color: inherit;
}

.link-resolution-chain ol {
  margin: 8px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.link-resolution-chain li {
  word-break: break-all;
}

.link-resolution-arrow {
  display: inline-grid;
  place-items: center;
  margin-left: 6px;
  opacity: 0.6;
}

.link-resolution-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

body[data-theme="dark"] .link-resolution-banner {
  background: rgba(79, 214, 199, 0.08);
  color: var(--primary);
  border-color: rgba(79, 214, 199, 0.24);
}

body[data-theme="dark"] .link-resolution-banner--warn {
  background: rgba(250, 204, 21, 0.08);
  color: #fbbf24;
  border-color: rgba(250, 204, 21, 0.28);
}

body[data-theme="dark"] .link-resolution-body code {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Detailed Verdict modal ──────────────────────────────────────────────── */

/* ── One-time password reveal modal ───────────────────────────────────── */
.password-reveal-modal {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
}

.password-reveal-modal[open] {
  display: flex;
  flex-direction: column;
}

.prm-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--line);
}

.prm-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(7, 134, 95, 0.1);
  display: grid;
  place-items: center;
  color: #067647;
}

.prm-icon svg {
  width: 22px;
  height: 22px;
}

.prm-header h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.prm-header p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.prm-password-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 24px 10px;
}

.prm-masked {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  word-break: break-all;
  line-height: 1.4;
}

.prm-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.prm-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  /* flex centering is more reliable than grid for button elements */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.prm-icon-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prm-icon-btn:hover {
  color: var(--primary);
  border-color: rgba(18, 124, 114, 0.4);
  background: rgba(18, 124, 114, 0.06);
}

/* Countdown progress bar */
.prm-countdown-track {
  height: 4px;
  background: var(--line);
  margin: 8px 24px 0;
  border-radius: 99px;
  overflow: hidden;
}

.prm-countdown-bar {
  height: 100%;
  width: 100%;
  background-color: #22c9b7;  /* initial green — JS updates to amber/red */
  border-radius: 99px;
  /* width + color transitions applied via JS on open */
}

.prm-timer-label {
  padding: 6px 24px 0;
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}

.prm-dismiss-btn {
  margin: 14px 24px 20px;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  /* Force the primary teal regardless of dark/light mode */
  background: #127c72 !important;
  color: #fff !important;
  border: none;
  transition: opacity 140ms ease;
}

.prm-dismiss-btn:hover {
  opacity: 0.88;
}

/* ── Confirmation modal ────────────────────────────────────────────────── */
/* Hidden by default — only shown when [open] via .showModal() */
.confirm-modal {
  width: min(380px, calc(100vw - 32px));
  padding: 28px 24px 24px;
  border-radius: 16px;
}

.confirm-modal[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.confirm-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.confirm-modal-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.confirm-icon-danger  { background: rgba(217, 45, 32, 0.10); color: #d92020; }
.confirm-icon-warning { background: rgba(181, 71, 8, 0.10);  color: #b54708; }
.confirm-icon-primary { background: rgba(18, 124, 114, 0.10); color: #127c72; }

.confirm-modal h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.confirm-modal p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 300px;
}

.confirm-modal-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

.confirm-cancel-btn,
.confirm-confirm-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 140ms ease, background 140ms ease;
  border: none;
}

.confirm-cancel-btn {
  background: var(--surface-2, rgba(71,84,103,0.08));
  color: var(--text-secondary);
  border: 1px solid var(--line-strong);
}

.confirm-cancel-btn:hover { opacity: 0.8; }

.confirm-confirm-danger  { background: #d92020 !important; color: #fff !important; }
.confirm-confirm-warning { background: #b54708 !important; color: #fff !important; }
.confirm-confirm-primary { background: #127c72 !important; color: #fff !important; }

.confirm-confirm-btn:hover { opacity: 0.88; }

.verdict-modal {
  width: min(820px, calc(100vw - 32px));
  max-height: 88vh;
  overflow: hidden;
}

.verdict-modal[open] {
  display: flex;
  flex-direction: column;
}

.verdict-modal-body {
  overflow-y: auto;
  padding: 0 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.verdict-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--line);
}

.verdict-modal-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.verdict-modal-scores {
  display: flex;
  gap: 20px;
}

.verdict-modal-score-item {
  text-align: center;
  min-width: 64px;
}

.verdict-modal-score-item strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}

.verdict-modal-score-item strong span {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.6;
}

.verdict-modal-score-item em {
  display: block;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-top: 2px;
}

.verdict-modal-section h3 {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.verdict-modal-narrative {
  margin-top: 0;
}

/* Per-source evidence cards */
.verdict-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.verdict-source-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
}

.verdict-source-card.source-malicious {
  border-color: rgba(217, 45, 32, 0.28);
  background: rgba(217, 45, 32, 0.04);
}

.verdict-source-card.source-suspicious {
  border-color: rgba(181, 71, 8, 0.28);
  background: rgba(181, 71, 8, 0.04);
}

.verdict-source-card.source-low-signal {
  border-color: rgba(5, 150, 105, 0.24);
  background: rgba(5, 150, 105, 0.03);
}

.verdict-source-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.verdict-source-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 13.5px;
}

.verdict-source-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
}

.verdict-source-evidence {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.verdict-source-evidence li {
  font-size: 12.5px;
  color: var(--muted);
  padding-left: 10px;
  border-left: 2px solid var(--line);
}

.verdict-context-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  align-items: start;
  margin: 0;
}

.verdict-context-dl dt {
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

.verdict-context-dl dd {
  margin: 0;
  font-size: 13px;
}

/* Score vs Confidence explanation */
.verdict-score-explain {
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0;
}

/* Per-vendor IOC confidence breakdown */
.verdict-breakdown-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.verdict-breakdown-row {
  display: grid;
  grid-template-columns: 1fr 180px auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.verdict-breakdown-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.verdict-breakdown-meta strong {
  font-size: 13px;
}

.verdict-breakdown-signal {
  font-size: 12px;
  color: var(--muted);
}

.verdict-breakdown-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.verdict-breakdown-bar {
  height: 6px;
  border-radius: 999px;
  transition: width 0.4s ease;
  flex: 1;
  min-width: 2px;
}

.verdict-breakdown-tier1 { background: rgba(217, 45, 32, 0.70); }
.verdict-breakdown-tier2 { background: rgba(181, 71, 8, 0.70); }
.verdict-breakdown-tier3 { background: rgba(23, 92, 211, 0.55); }
.verdict-breakdown-tier0 { background: var(--line); }

.verdict-breakdown-pct {
  font-size: 12px;
  font-weight: 850;
  min-width: 32px;
  text-align: right;
}

.verdict-breakdown-label {
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.verdict-breakdown-label.tier-1 { color: #d92020; }
.verdict-breakdown-label.tier-2 { color: #b54708; }
.verdict-breakdown-label.tier-3 { color: #1849a9; }
.verdict-breakdown-label.tier-0 { color: var(--muted); }

.verdict-breakdown-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(18, 124, 114, 0.3);
  background: rgba(18, 124, 114, 0.06);
  font-size: 13px;
  font-weight: 750;
}

.verdict-breakdown-final strong {
  font-size: 18px;
  font-weight: 900;
  color: var(--primary);
}

.verdict-recommendation {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 16px 18px;
  border-left: 3px solid var(--primary);
}

.verdict-recommendation h3 {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 8px;
  color: var(--primary);
}

.verdict-recommendation p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
}

/* "View Detailed Verdict" button pill */
.verdict-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(18, 124, 114, 0.12);
  color: var(--primary);
  border: 1px solid rgba(18, 124, 114, 0.30);
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.verdict-detail-btn:hover {
  background: rgba(18, 124, 114, 0.20);
  box-shadow: 0 0 0 3px rgba(18, 124, 114, 0.10);
}

/* ── Relations "View All" modal ──────────────────────────────────────────── */

/* dialog:not([open]) has display:none in the UA stylesheet.
   Setting display:flex on the base class overrides that and shows the dialog
   even when closed. Only apply flex layout when it's actually open. */
.relations-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: 80vh;
  overflow: hidden;
}

.relations-modal[open] {
  display: flex;
  flex-direction: column;
}

.relations-modal-body {
  overflow-y: auto;
  padding: 0 20px 20px;
  flex: 1;
}

.relations-modal .relation-list {
  display: grid;
  gap: 8px;
}

/* ── Sources modal (View All providers) ──────────────────────────────────── */
.sources-modal {
  width: min(860px, calc(100vw - 32px));
}

.sources-modal-body {
  padding: 12px 20px 24px;
}

.sources-modal-group {
  margin-bottom: 20px;
}

.sources-modal-group-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sources-modal-group-count {
  background: var(--surface-2, rgba(255,255,255,0.07));
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--fg-2, #9ca3af);
}

.sources-modal-list {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ── Recorded Future AI Verdict block ────────────────────────────────────── */
.rf-ai-verdict {
  background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.06) 100%);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.rf-ai-verdict-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rf-ai-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(99,102,241,0.18);
  color: #a5b4fc;
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 999px;
  padding: 2px 10px;
}

.rf-ai-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--fg, #e2e8f0);
  margin: 0;
}

/* ── Create / Edit user modal ────────────────────────────────────────────── */
.create-user-modal {
  width: min(520px, calc(100vw - 32px));
}

.create-user-modal-body {
  padding: 8px 24px 28px;
  overflow-y: auto;
  flex: 1;
}

.create-user-modal-body form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.create-user-modal-body label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}

.create-user-modal-body label input,
.create-user-modal-body label select {
  margin-top: 2px;
}

.field-hint {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--fg-3, #6b7280);
  margin-left: 4px;
}

.modal-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}

.modal-form-actions button {
  min-width: 110px;
}

/* view-heading with right-side action button */
.view-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.view-heading .primary {
  margin-left: auto;
}

/* ── SOC+ Verdict narrative ──────────────────────────────────────────────── */

/* IOC verdict badge — full width of the card, text centred inside */
.verdict-ioc-badge {
  display: flex;             /* stretch to full grid cell width */
  align-items: center;
  justify-content: center;   /* text centred */
  gap: 6px;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 18px;
  border-radius: 999px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

.verdict-ioc-badge.is-ioc {
  background: rgba(217, 45, 32, 0.14);
  color: #d92020;
  border: 1px solid rgba(217, 45, 32, 0.3);
}

.verdict-ioc-badge.not-ioc {
  background: rgba(7, 134, 95, 0.14);
  color: #07865f;
  border: 1px solid rgba(7, 134, 95, 0.3);
}

.verdict-ioc-badge.uncertain {
  background: rgba(181, 71, 8, 0.12);
  color: #b54708;
  border: 1px solid rgba(181, 71, 8, 0.28);
}

.verdict-confidence {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  margin-bottom: 10px;
}

.verdict-narrative {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: 10px;
  border-left: 3px solid var(--primary);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
}

.verdict-narrative p {
  margin: 0 0 8px;
}

.verdict-narrative p:last-child {
  margin-bottom: 0;
}

.integration-dialog {
  width: min(680px, calc(100vw - 36px));
}

.integration-form {
  display: grid;
  gap: 16px;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 20px;
}

.integration-fields {
  display: grid;
  gap: 12px;
}

.key-preview {
  display: grid;
  gap: 6px;
  border: 1px solid #abefc6;
  border-radius: 8px;
  background: #f0fdf4;
  padding: 12px;
}

.key-preview span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.integration-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.credential-card {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 14px;
  background: #f0fdfa;
}

.credential-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.credential-card code {
  display: block;
  overflow-wrap: anywhere;
  color: var(--primary-strong);
  font-size: 15px;
  font-weight: 800;
}

.credential-card p {
  margin: 0;
}

.empty {
  color: var(--muted);
  padding: 28px;
  text-align: center;
}

dialog {
  width: min(1100px, calc(100vw - 36px));
  max-height: min(820px, calc(100vh - 36px));
  border: 1px solid rgba(18, 124, 114, 0.2);
  border-radius: 18px;
  padding: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(18, 124, 114, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.56)),
    var(--surface);
  color: var(--text);
  box-shadow:
    0 34px 90px rgba(15, 23, 42, 0.34),
    0 10px 30px rgba(18, 124, 114, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.66);
  transform-origin: 50% 46%;
}

dialog[open] {
  animation: dialogPop 220ms ease-out;
}

dialog::backdrop {
  background:
    radial-gradient(circle at 50% 32%, rgba(18, 124, 114, 0.16), transparent 34%),
    rgba(15, 23, 42, 0.54);
  backdrop-filter: blur(7px);
}

.dialog-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
  /* Opaque base so scrolling body content never bleeds through the sticky
     header (was translucent → caused the overlapping/"glitched" title). */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.18)),
    #ffffff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.icon-button {
  min-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  font-weight: 800;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  position: relative;
  z-index: 10;
}

.dialog-x-button {
  font-size: 26px;
  line-height: 1;
}

.small-icon-button {
  min-width: 34px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  line-height: 1;
}

.icon-button svg,
.small-icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scan-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
}

.scan-detail > * {
  flex: 0 0 auto;
}

#scanDialog[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#scanDialogBody {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.institution-dialog {
  width: min(640px, calc(100vw - 36px));
}

.institution-form {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 24px;
}

.institution-form p {
  margin: 0;
}

.institution-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 4px;
}

.institution-dialog-actions button {
  min-width: 140px;
}

@keyframes dialogPop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96) perspective(900px) rotateX(5deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1) perspective(900px) rotateX(0deg);
  }
}

@keyframes targetRise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog[open],
  #statusView .institution,
  #statusView .status-row {
    animation: none;
  }

  #statusView .metric,
  #statusView .institution,
  #statusView .status-row {
    transition: none;
  }
}

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

.detail-card {
  min-width: 0;
  padding: 14px;
  background: #f9fbfd;
}

.detail-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-card strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.detail-actions {
  display: flex;
  justify-content: flex-end;
}

.detail-list {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px 16px;
  margin: 0;
  padding: 16px;
  background: #f9fbfd;
}

.detail-list dt {
  color: var(--muted);
  font-weight: 800;
}

.detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Full-page dark + grid + layered ambient glows for depth. */
.login-view {
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(460px, 0.9fr);
  background:
    /* Grid lines */
    linear-gradient(rgba(37, 211, 179, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 211, 179, 0.055) 1px, transparent 1px),
    /* Teal floor-light under robot */
    radial-gradient(ellipse 68% 38% at 26% 92%, rgba(18, 124, 114, 0.58) 0%, transparent 100%),
    /* Teal lens flare left-centre */
    radial-gradient(ellipse 52% 52% at 20% 38%, rgba(14, 110, 110, 0.44) 0%, transparent 100%),
    /* Blue-purple top-right corner */
    radial-gradient(ellipse 58% 44% at 82% 6%, rgba(30, 60, 160, 0.46) 0%, transparent 100%),
    /* Teal horizon waist */
    radial-gradient(ellipse 62% 24% at 30% 68%, rgba(10, 90, 80, 0.40) 0%, transparent 100%),
    /* Deep base */
    radial-gradient(ellipse at 35% 50%, #0f2d3e 0%, #0a1e2c 35%, #071525 60%, #060d1e 100%);
  background-size: 42px 42px, 42px 42px, auto, auto, auto, auto, auto;
  overflow: hidden;
}

/* ── Full-viewport SOC+ watermark — static, no animation ───────────────── */

.login-bg-logo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

.login-bg-logo-wrapper {
  position: relative;
  width: clamp(55vw, 70vw, 88vw);
  max-width: 1200px;
}

/* Original logo colours at ghost opacity — no filter, no animation */
.login-bg-logo-img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.055;
}

/* Stack: brand (z:2) and panel (z:3) sit above the watermark (z:1) */
#loginBrand { z-index: 2; }
#loginPanel { z-index: 3; }

/* Remove old robot-stage logo — replaced by the full-screen watermark */
.login-brand-logo-bg { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────── */

/* Body: same base so there's no flash before login-view paints */
body:has(#loginView:not(.hidden)),
html:has(#loginView:not(.hidden)) {
  background:
    linear-gradient(rgba(37, 211, 179, 0.048) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 211, 179, 0.048) 1px, transparent 1px),
    #091c2a;
  background-size: 42px 42px, 42px 42px;
  overflow: hidden; /* prevent any scroll that reveals body background */
}

.login-brand {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
}

/* Small logo badge, top-left corner */
.login-brand-logo-wrap {
  position: absolute;
  top: clamp(20px, 3vh, 36px);
  left: clamp(20px, 3vw, 36px);
  z-index: 5;
  opacity: 0.9;
}

.login-brand img {
  position: relative;
  z-index: 4;
  width: min(140px, 28vw);
  height: auto;
  /* loginLogoFloat animation removed — img is hidden anyway but
     the compiled animation still costs a browser tick */
}

.login-brand > div:not(.login-grid-glow):not(.login-scanlines):not(.login-signal-stack):not(.spline-robot-stage):not(.login-brand-logo-wrap) {
  position: relative;
  z-index: 4;
}

.login-brand h1 {
  max-width: 620px;
  font-size: clamp(38px, 5vw, 70px);
  line-height: 0.98;
  text-shadow: 0 24px 48px rgba(0, 0, 0, 0.24);
}

.login-brand p:not(.eyebrow) {
  max-width: 470px;
  color: #a9bfce;
  font-size: 16px;
  line-height: 1.6;
}

.login-panel {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 44px);
  overflow-y: auto;
  /* Fully transparent — the login-view background (matched to Spline) shows through */
  background: transparent;
  /* opacity/transform driven by JS reveal sequence */
}

.login-panel-busy {
  opacity: 0.85;
}

.login-denied {
  animation: loginPanelDenied 560ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* Hidden lock kept for JS — completely offscreen */
.login-lock-offscreen {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Brand header inside panel ─────────────────────────────────────────── */

.lp-brand {
  /* reveal driven by JS word-animate */
}

.lp-brand-eyebrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(37, 211, 179, 0.85);
  margin-bottom: 10px;
}

/* Fix 2 — Title: drop background-clip so word-animate opacity works cleanly */
.lp-brand-title {
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 0 80px rgba(37, 211, 179, 0.18);
  margin: 0 0 12px;
}

.lp-brand-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(200, 220, 230, 0.6);
  max-width: 360px;
}

/* ── Divider ───────────────────────────────────────────────────────────── */

.lp-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(37, 211, 179, 0.35) 0%, rgba(60, 140, 255, 0.25) 50%, transparent 100%);
  margin: 26px 0;
  /* reveal driven by JS word-animate */
}

/* ── Form section ──────────────────────────────────────────────────────── */

.lp-form-section {
  /* reveal driven by JS word-animate */
}

.lp-form-eyebrow {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(37, 211, 179, 0.7);
  margin-bottom: 6px;
}

.lp-form-title {
  margin-top: 0;
  margin-bottom: 6px;
  color: #ffffff;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  font-weight: 900;
}

.lp-form-muted {
  color: rgba(180, 210, 225, 0.55);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 4px;
}

/* ── Inputs ────────────────────────────────────────────────────────────── */

.lp-label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  font-weight: 750;
  color: rgba(200, 225, 235, 0.7);
  letter-spacing: 0.01em;
}

.lp-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.lp-input-icon {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: rgba(37, 211, 179, 0.55);
  pointer-events: none;
  transition: color 170ms ease;
  flex-shrink: 0;
}

.lp-input-wrap:focus-within .lp-input-icon {
  color: rgba(37, 211, 179, 0.9);
}

.lp-input-wrap input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px 0 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #e8f8ff;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
  /* backdrop-filter on inputs removed — expensive even at 8px */
}

.lp-input-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.lp-input-wrap input:focus {
  outline: none;
  border-color: rgba(37, 211, 179, 0.65);
  background: rgba(37, 211, 179, 0.06);
  box-shadow: 0 0 0 3px rgba(37, 211, 179, 0.12), 0 0 24px rgba(37, 211, 179, 0.07);
  color: #ffffff;
}

/* ── Submit button ─────────────────────────────────────────────────────── */

.lp-submit {
  position: relative;
  overflow: hidden;
  min-height: 54px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.04em;
  background: linear-gradient(130deg, #1aab94 0%, #16967f 60%, #127869 100%);
  border-color: transparent;
  box-shadow: 0 4px 24px rgba(22, 150, 127, 0.35), 0 1px 0 rgba(255,255,255,0.12) inset;
  transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease;
}

.lp-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  background: linear-gradient(130deg, #1fc0a6 0%, #1aab94 60%, #169181 100%);
  box-shadow: 0 8px 34px rgba(22, 150, 127, 0.45), 0 1px 0 rgba(255,255,255,0.14) inset;
}

.lp-submit:active:not(:disabled) {
  transform: translateY(0);
}

.lp-btn-label {
  position: relative;
  z-index: 1;
}

.lp-btn-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  transform: translate3d(-210%, 0, 0);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  animation: lpBtnShimmer 2.8s ease-in-out infinite;
  animation-delay: 1.2s;
}

@keyframes lpBtnShimmer {
  0%        { transform: translate3d(-210%, 0, 0); }
  45%, 100% { transform: translate3d(220%, 0, 0); }
}

/* ── Help text ─────────────────────────────────────────────────────────── */

.lp-help {
  margin-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 16px;
  color: rgba(180, 210, 225, 0.45);
  font-size: 13px;
}

/* ── Error box ─────────────────────────────────────────────────────────── */

.login-panel .login-error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

/* ── login-form overrides for dark panel ──────────────────────────────── */

.login-panel .login-form {
  margin-top: 20px;
  gap: 14px;
}

/* ── Entrance animations ───────────────────────────────────────────────── */

/* ── Foggy ghost logo behind/above robot ───────────────────────────────── */

/* Logo: large, behind the head — positioned higher now that robot is dropped */
/* Logo is BEFORE the canvas in DOM — WebGL transparency lets it show
   through the empty space around the robot (head area, sides).
   With translateY(18%) the head sits around 20 % from stage top. */
.login-brand-logo-bg {
  position: absolute;
  width: 105%;
  max-width: 620px;
  height: auto;
  top: 8%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 0; /* behind the canvas (which is z-index auto, later in DOM) */
  opacity: 0;
  filter: blur(10px) brightness(5) saturate(0);
  pointer-events: none;
  transition: opacity 2.5s ease;
}

.login-brand-logo-bg.logo-ready {
  opacity: 0.22;
}

/* ── Card perspective wrapper ──────────────────────────────────────────── */

.lp-card-outer {
  width: 100%;
  max-width: 460px;
  perspective: 1100px;
}

/* ── Glass card (restored) ──────────────────────────────────────────────── */

.lp-card {
  position: relative;
  /* backdrop-filter REMOVED — it forces a GPU re-composite on every WebGL frame
     from the robot behind it, causing the choppiness. Higher opacity compensates. */
  background: rgba(7, 15, 28, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  transform-style: preserve-3d;
  transition: transform 0.12s ease, box-shadow 0.3s ease;
  will-change: transform;
  box-shadow:
    0 0 0 1px rgba(37, 211, 179, 0.06),
    0 24px 64px rgba(0, 0, 0, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.lp-card:hover {
  box-shadow:
    0 0 0 1px rgba(37, 211, 179, 0.10),
    0 28px 72px rgba(0, 0, 0, 0.65),
    0 0 80px rgba(37, 211, 179, 0.05) inset;
}

.lp-card-inner {
  padding: clamp(26px, 3.8vw, 44px);
  position: relative;
  z-index: 2;
}

/* Beam container hidden — 4 infinite CSS animations with filter:blur
   each force a composite layer; combined with WebGL they cause lag */
.lp-beam-container {
  display: none;
}

.lp-beam {
  display: none;
}

/* Top beam → left to right */
.lp-beam-top {
  top: 0;
  left: -55%;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: lp-beam-top 2.6s ease-in-out infinite;
}
@keyframes lp-beam-top {
  0%   { left: -55%; opacity: 0.3; }
  20%  { opacity: 0.85; }
  100% { left: 110%; opacity: 0.3; }
}

/* Right beam ↓ top to bottom */
.lp-beam-right {
  right: 0;
  top: -55%;
  width: 2px;
  height: 50%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: lp-beam-right 2.6s ease-in-out infinite;
  animation-delay: 0.65s;
}
@keyframes lp-beam-right {
  0%   { top: -55%; opacity: 0.3; }
  20%  { opacity: 0.85; }
  100% { top: 110%; opacity: 0.3; }
}

/* Bottom beam ← right to left */
.lp-beam-bottom {
  bottom: 0;
  right: -55%;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: lp-beam-bottom 2.6s ease-in-out infinite;
  animation-delay: 1.3s;
}
@keyframes lp-beam-bottom {
  0%   { right: -55%; opacity: 0.3; }
  20%  { opacity: 0.85; }
  100% { right: 110%; opacity: 0.3; }
}

/* Left beam ↑ bottom to top */
.lp-beam-left {
  left: 0;
  bottom: -55%;
  width: 2px;
  height: 50%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: lp-beam-left 2.6s ease-in-out infinite;
  animation-delay: 1.95s;
}
@keyframes lp-beam-left {
  0%   { bottom: -55%; opacity: 0.3; }
  20%  { opacity: 0.85; }
  100% { bottom: 110%; opacity: 0.3; }
}

/* ── Corner accent dots ─────────────────────────────────────────────────── */

/* Corner dots: static only — removed pulse animation and filter:blur */
.lp-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  z-index: 3;
  pointer-events: none;
}
.lp-dot-tl { top: -2px; left: -2px; }
.lp-dot-tr { top: -2px; right: -2px; }
.lp-dot-bl { bottom: -2px; left: -2px; }
.lp-dot-br { bottom: -2px; right: -2px; }

/* ── Word-appear animation ──────────────────────────────────────────────── */

/* Fix 2 — word-animate: no forced display change, clean block fade-up */

.word-animate {
  opacity: 0;
  /* do NOT set display — keep each element's natural display */
}

/* All word-animate targets are block-level here: use a clean fade-up */
.word-animate.is-visible {
  animation: blockFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes blockFadeUp {
  0%   { opacity: 0; transform: translateY(20px); }
  60%  { opacity: 0.9; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Keep the old word-appear for any future span usage */
@keyframes word-appear {
  0%   { opacity: 0; transform: translateY(20px) scale(0.88); filter: blur(8px); }
  55%  { opacity: 0.85; transform: translateY(3px) scale(0.98); filter: blur(1px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ── Adjust submit button to fit arrow icon ─────────────────────────────── */

.lp-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.lp-btn-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform 200ms ease;
}

.lp-submit:hover .lp-btn-arrow {
  transform: translateX(3px);
}

@keyframes lpFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-panel h2 {
  margin-top: 4px;
  color: #ffffff;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.login-form label {
  font-weight: 820;
}

/* Base input — light theme default */
.login-form input {
  min-height: 52px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}

.login-form input:focus {
  border-color: rgba(18, 124, 114, 0.7);
  box-shadow: 0 0 0 4px rgba(18, 124, 114, 0.12), 0 18px 34px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

/* Fix 5 — dark card inputs: higher specificity wins over light-theme rule above */
.lp-card .lp-input-wrap input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #e8f8ff;
  transform: none;
  min-height: 52px;
  border-radius: 12px;
}

.lp-card .lp-input-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.lp-card .lp-input-wrap input:focus {
  background: rgba(37, 211, 179, 0.07);
  border-color: rgba(37, 211, 179, 0.65);
  box-shadow: 0 0 0 3px rgba(37, 211, 179, 0.13), 0 0 24px rgba(37, 211, 179, 0.07);
  color: #ffffff;
  transform: none;
}

.login-error {
  border: 1px solid #fda29b;
  border-radius: 7px;
  background: #fff1f0;
  color: var(--danger);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 750;
}

.login-help {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  color: var(--muted);
  font-size: 14px;
}

.login-grid-glow,
.login-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* grid-glow and scanlines hidden — both were rendering ON TOP of the robot
   (scanlines at z-index:1 painted over the Spline canvas).
   The page-level grid in .login-view background now handles the grid uniformly. */
.login-grid-glow {
  display: none;
}

.login-scanlines {
  display: none;
}

.login-signal-stack {
  position: absolute;
  left: clamp(86px, 6vw, 128px);
  bottom: clamp(34px, 7vw, 96px);
  z-index: 2;
  display: grid;
  gap: 10px;
  width: min(220px, 22vw);
}

.login-signal-stack span {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(43, 114, 255, 0.2), rgba(37, 211, 179, 0.94), rgba(255, 152, 0, 0.8));
  box-shadow: 0 0 24px rgba(37, 211, 179, 0.28);
  transform-origin: left center;
  animation: signalSweep 2.8s ease-in-out infinite;
}

.login-signal-stack span:nth-child(2) {
  width: 78%;
  animation-delay: 220ms;
}

.login-signal-stack span:nth-child(3) {
  width: 54%;
  animation-delay: 440ms;
}

.login-lock-stage {
  display: none;
}

.lock-3d {
  position: relative;
  width: 190px;
  height: 190px;
  transform-style: preserve-3d;
}

.lock-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
}

.lock-art {
  object-fit: contain;
  transition: opacity 180ms ease;
}

.lock-denied {
  animation: lockDenied 620ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.lock-unlocked {
  animation: lockSuccess 980ms cubic-bezier(0.17, 0.9, 0.18, 1) both;
}

.auth-transition {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  background:
    radial-gradient(circle at 50% 48%, rgba(24, 148, 132, 0.22), transparent 25%),
    linear-gradient(135deg, #071018, #0e1f2a),
    linear-gradient(rgba(37, 211, 179, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 114, 255, 0.08) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  color: #e8fbff;
  opacity: 1;
}

.auth-transition::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(420px, 68vw);
  height: min(420px, 68vw);
  border: 1px solid rgba(37, 211, 179, 0.34);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  animation: accessRing 1.4s ease-out infinite;
}

.auth-transition-lock {
  position: relative;
  z-index: 1;
  perspective: 1000px;
  transform: scale(1.25);
}

.auth-transition p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #bdeee8;
  font-size: 14px;
  font-weight: 850;
  text-transform: uppercase;
}

.auth-transition-open {
  animation: none;
}

@keyframes loginLogoFloat {
  0%, 100% {
    transform: translateY(0) rotateX(0);
  }
  50% {
    transform: translateY(-12px) rotateX(4deg);
  }
}

@keyframes loginGridDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 42px 42px, 42px 42px, 0 0, 0 0, 0 0, 0 0, 0 0; }
}

@keyframes signalSweep {
  0%, 100% {
    transform: scaleX(0.45);
    opacity: 0.38;
  }
  45%, 60% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes loginPanelIn {
  from {
    opacity: 0;
    transform: translateX(36px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes loginPanelDenied {
  10%, 90% {
    transform: translateX(-2px);
  }
  20%, 80% {
    transform: translateX(5px);
  }
  30%, 50%, 70% {
    transform: translateX(-8px);
  }
  40%, 60% {
    transform: translateX(8px);
  }
}

/* ── Pre-reveal states — GPU-only transforms, no layout animation ──────── */

/* Brand section starts shifted right so robot appears centered on screen.
   translateX(21.5vw): left column is ~57 vw wide → center at 28.5 vw.
   Shift right 21.5 vw → center is at 50 vw (viewport center).
   overflow: visible lets the scaled robot stage bleed out of the column
   bounds → fills the FULL viewport → no "box sliding" visual artefact. */
.login-brand.pre-reveal {
  transform: translateX(22.5vw);
  overflow: visible !important;
}

/* Right panel hidden & slightly off-screen */
.login-panel.pre-reveal {
  opacity: 0;
  transform: translateX(48px);
  pointer-events: none;
}

/* Robot stage pre-reveal: translateY matches ROBOT_FINAL (10%) so only
   SCALE changes during entrance — no Y movement = no drop on start. */
.spline-robot-stage.pre-reveal {
  transform-origin: center 50%;
  transform: scale(2.5) translateY(10%);
}

/* ── Spline 3D Robot – login panel ──────────────────────────────────────── */

.spline-robot-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: transparent;
}

/* Ground fog: dark gradient at the bottom of the robot stage so the robot
   fades into the floor rather than floating with a sharp bottom edge.
   z-index 4 paints it on top of the transparent canvas → robot melts
   smoothly into the page background colour at the bottom. */
.spline-robot-stage::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 38%;
  background: linear-gradient(
    to top,
    #091c2a 0%,
    rgba(9, 28, 42, 0.75) 25%,
    rgba(9, 28, 42, 0.30) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 4;
}

.spline-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 700ms ease;
}

.spline-canvas.spline-ready {
  opacity: 1;
}

/* Very subtle edge vignette so the robot has depth */
/* ::after vignette removed — it was at z-index:2 and created a filter-like
   overlay on top of the 3D robot. No overlay needed now. */

.login-signal-stack {
  z-index: 4;
}

/* Loading spinner */
.spline-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 350ms ease;
}

.spline-loader-ring {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(37, 211, 179, 0.20);
  border-top-color: rgba(37, 211, 179, 0.80);
  border-radius: 50%;
  animation: splineRingSpin 0.85s linear infinite;
}

@keyframes splineRingSpin {
  to { transform: rotate(360deg); }
}

/* Hide the whole stage if Spline failed to load */
.spline-failed {
  display: none !important;
}

/* ── Mobile: robot header + dark card below ──────────────────────────── */

@media (max-width: 767px) {
  .login-brand {
    min-height: 280px;
    overflow: hidden;
  }

  .spline-robot-stage {
    position: relative;
    inset: auto;
    width: 100%;
    height: 240px;
    display: block !important;
  }

  /* login-brand::after removed — no overlay needed on mobile either */

  .login-brand-logo-wrap {
    top: 12px;
    left: 16px;
  }
}

/* ── end Spline robot ───────────────────────────────────────────────────── */

@keyframes lockIdle {
  0%, 100% {
    transform: rotateX(10deg) rotateY(-16deg) translateY(0);
  }
  50% {
    transform: rotateX(13deg) rotateY(16deg) translateY(-6px);
  }
}

@keyframes lockDenied {
  0%, 100% {
    transform: rotateX(10deg) rotateY(-16deg) translateX(0);
  }
  12%, 36%, 60%, 84% {
    transform: rotateX(10deg) rotateY(-20deg) translateX(-16px) rotateZ(-8deg);
  }
  24%, 48%, 72% {
    transform: rotateX(10deg) rotateY(20deg) translateX(16px) rotateZ(8deg);
  }
}

@keyframes lockSuccess {
  0% {
    transform: rotateX(10deg) rotateY(-16deg) scale(1);
  }
  45% {
    transform: rotateX(16deg) rotateY(26deg) scale(1.08);
  }
  100% {
    transform: rotateX(6deg) rotateY(0deg) scale(1.16);
  }
}

@keyframes accessRing {
  from {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(0.58);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08);
  }
}


.password-form {
  display: grid;
  gap: 14px;
  padding: 20px;
}

#toast {
  position: fixed;
  top: 76px;
  right: 24px;
  z-index: 40;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 16px;
  min-width: min(360px, calc(100vw - 48px));
  max-width: min(520px, calc(100vw - 48px));
  border: 1px solid rgba(238, 242, 246, 0.84);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  color: #4b5565;
  padding: 22px 18px;
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.18);
  opacity: 0;
  transform: translate(18px, -8px) scale(0.98);
  transition: opacity 190ms ease, transform 190ms ease;
  cursor: pointer;
  pointer-events: none;
}

#toastRail {
  width: 8px;
  min-height: 76px;
  border-radius: 999px;
  background: var(--ok);
}

#toastTitle {
  display: block;
  margin-bottom: 5px;
  color: var(--ok);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.1;
}

#toastMessage {
  margin: 0;
  color: #4b5565;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.45;
}

#toastClose {
  width: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  align-self: start;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #4b5565;
  padding: 0;
  font-size: 24px;
  font-weight: 650;
  line-height: 1;
  pointer-events: auto;
}

#toastClose:hover {
  border-color: transparent;
  background: transparent;
}

#toast.show {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  pointer-events: auto;
}

#toast.toast-success #toastRail,
#toast.toast-success #toastTitle {
  background: #12b76a;
  color: #067647;
}

#toast.toast-success #toastTitle {
  background: transparent;
}

#toast.toast-warning #toastRail {
  background: #fb8c23;
}

#toast.toast-warning #toastTitle {
  color: #f79009;
}

#toast.toast-error #toastRail {
  background: #d92d5b;
}

#toast.toast-error #toastTitle {
  color: var(--danger);
}

#toast.toast-info #toastRail {
  background: #1687d9;
}

#toast.toast-info #toastTitle {
  color: var(--info);
}

body[data-theme="dark"] .sidebar,
body[data-theme="dark"] .topbar,
body[data-theme="dark"] .message-panel,
body[data-theme="dark"] .user-dropdown,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .metric,
body[data-theme="dark"] .table-wrap,
body[data-theme="dark"] .status-row,
body[data-theme="dark"] .runtime-card,
body[data-theme="dark"] .runtime-tool,
body[data-theme="dark"] .institution,
body[data-theme="dark"] .log-entry,
body[data-theme="dark"] .account-form-panel,
body[data-theme="dark"] .accounts-panel,
body[data-theme="dark"] .credential-card,
body[data-theme="dark"] .detail-card,
body[data-theme="dark"] .detail-list,
body[data-theme="dark"] .osint-result-panel,
body[data-theme="dark"] .osint-detail-card,
body[data-theme="dark"] .runtime-tool-card,
body[data-theme="dark"] .dashboard-action-card,
body[data-theme="dark"] .dashboard-panel,
body[data-theme="dark"] .dashboard-provider,
body[data-theme="dark"] .dashboard-hint-list article,
body[data-theme="dark"] .runtime-intro,
body[data-theme="dark"] .message-compose-panel,
body[data-theme="dark"] .message-preview-panel,
body[data-theme="dark"] .message-item,
body[data-theme="dark"] .message-dialog,
body[data-theme="dark"] dialog {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0) 38%),
    var(--surface);
  color: var(--text);
  border-color: var(--line-strong);
}

body[data-theme="dark"] .geo-asn {
  color: rgba(255, 255, 255, 0.72);
}

body[data-theme="dark"] .sidebar {
  background:
    radial-gradient(circle at 42% 0%, rgba(101, 207, 199, 0.06), transparent 34%),
    var(--sidebar);
}

body[data-theme="dark"] .topbar {
  background: var(--topbar-bg);
}

body[data-theme="dark"] .runtime-tool-card,
body[data-theme="dark"] .dashboard-action-card,
body[data-theme="dark"] .status-row,
body[data-theme="dark"] .osint-detail-card,
body[data-theme="dark"] .metric,
body[data-theme="dark"] .detail-card,
body[data-theme="dark"] .institution,
body[data-theme="dark"] .log-entry {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0) 44%),
    var(--surface-2);
}

body[data-theme="dark"] .dashboard-hero,
body[data-theme="dark"] .osint-landing-panel {
  background:
    radial-gradient(circle at 50% 0%, rgba(101, 207, 199, 0.075), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 42%),
    var(--bg);
  border-color: var(--line-strong);
}

body[data-theme="dark"] .dashboard-signal-card {
  background: #10112a;
  border-color: var(--line-strong);
}

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] .dashboard-action-card strong,
body[data-theme="dark"] .message-panel-head strong,
body[data-theme="dark"] .osint-report-head h2,
body[data-theme="dark"] .osint-landing h2,
body[data-theme="dark"] .osint-brand-copy,
body[data-theme="dark"] .dropdown-profile strong,
body[data-theme="dark"] .org-switcher strong,
body[data-theme="dark"] .user-menu strong,
body[data-theme="dark"] td,
body[data-theme="dark"] th,
body[data-theme="dark"] .dashboard-provider b {
  color: var(--ink);
}

body[data-theme="dark"] .muted,
body[data-theme="dark"] label,
body[data-theme="dark"] .dashboard-hero p:not(.eyebrow),
body[data-theme="dark"] .dashboard-action-card small,
body[data-theme="dark"] .dashboard-action-card em,
body[data-theme="dark"] .osint-landing .muted,
body[data-theme="dark"] .osint-file-drop-inline,
body[data-theme="dark"] .osint-detail-card p,
body[data-theme="dark"] .table-subtext,
body[data-theme="dark"] .org-switcher span,
body[data-theme="dark"] .user-menu span,
body[data-theme="dark"] .dashboard-provider small,
body[data-theme="dark"] .runtime-intro p,
body[data-theme="dark"] .dashboard-hint-list p,
body[data-theme="dark"] .dashboard-event-log p {
  color: var(--muted);
}

body[data-theme="dark"] .dashboard-event-log strong,
body[data-theme="dark"] .dashboard-hint-list strong,
body[data-theme="dark"] .institution strong,
body[data-theme="dark"] .log-entry strong,
body[data-theme="dark"] .status-row strong {
  color: var(--ink);
}

body[data-theme="dark"] .institution span,
body[data-theme="dark"] .log-entry span,
body[data-theme="dark"] .status-row span,
body[data-theme="dark"] .status-detail,
body[data-theme="dark"] .pagination {
  color: var(--muted);
}

body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea,
body[data-theme="dark"] button,
body[data-theme="dark"] .button,
body[data-theme="dark"] .notification-bell,
body[data-theme="dark"] .account-action,
body[data-theme="dark"] .osint-tabs button,
body[data-theme="dark"] .related-ioc-list span,
body[data-theme="dark"] .tag-pill,
body[data-theme="dark"] .osint-search-types span {
  background: var(--button-bg);
  color: var(--ink);
  border-color: var(--line-strong);
}

body[data-theme="dark"] .dashboard-action-card > span {
  background: rgba(79, 214, 199, 0.13);
  color: var(--primary);
}

body[data-theme="dark"] .dashboard-action-card b {
  background: rgba(255, 152, 0, 0.16);
  color: #ffd9a1;
}

body[data-theme="dark"] .dashboard-action-card:hover:not(:disabled),
body[data-theme="dark"] .runtime-tool-card:hover,
body[data-theme="dark"] .credential-card:hover,
body[data-theme="dark"] .account-action:hover {
  border-color: rgba(101, 207, 199, 0.34);
  box-shadow:
    0 0 0 1px rgba(101, 207, 199, 0.08),
    0 18px 46px rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"] tr:hover td,
body[data-theme="dark"] .institution:hover,
body[data-theme="dark"] .log-entry:hover {
  background: var(--row-hover);
}

body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
  background: var(--input-bg);
}

body[data-theme="dark"] .sidebar-toggle,
body[data-theme="dark"] .sidebar-toggle:hover,
body[data-theme="dark"] .user-menu-trigger,
body[data-theme="dark"] .user-menu-trigger:hover,
body[data-theme="dark"] .user-menu-trigger[aria-expanded="true"],
body[data-theme="dark"] .tab,
body[data-theme="dark"] .tab:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body[data-theme="dark"] .notification-bell {
  background: rgba(20, 21, 46, 0.72);
  border-color: rgba(165, 180, 252, 0.18);
  box-shadow: none;
}

body[data-theme="dark"] button:hover,
body[data-theme="dark"] .button:hover,
body[data-theme="dark"] .account-action:hover {
  border-color: rgba(101, 207, 199, 0.46);
  box-shadow:
    0 0 0 3px rgba(101, 207, 199, 0.08),
    0 10px 26px rgba(0, 0, 0, 0.18);
}

body[data-theme="dark"] button:active,
body[data-theme="dark"] .button:active,
body[data-theme="dark"] .account-action:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 2px rgba(101, 207, 199, 0.1);
}

body[data-theme="dark"] .primary:hover {
  box-shadow:
    0 0 0 4px rgba(101, 207, 199, 0.14),
    0 14px 28px rgba(101, 207, 199, 0.12);
}

body[data-theme="dark"] .sidebar-toggle:hover,
body[data-theme="dark"] .user-menu-trigger:hover,
body[data-theme="dark"] .user-menu-trigger[aria-expanded="true"],
body[data-theme="dark"] .tab:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

body[data-theme="dark"] .sidebar-toggle:focus,
body[data-theme="dark"] .user-menu-trigger:focus,
body[data-theme="dark"] .tab:focus {
  outline: none;
}

body[data-theme="dark"] .sidebar-toggle:focus-visible,
body[data-theme="dark"] .user-menu-trigger:focus-visible,
body[data-theme="dark"] .tab:focus-visible,
body[data-theme="dark"] button:focus-visible,
body[data-theme="dark"] .button:focus-visible {
  outline: 2px solid rgba(79, 214, 199, 0.38);
  outline-offset: 3px;
}

body[data-theme="dark"] .osint-landing-search input {
  background: var(--input-bg);
  border-color: var(--line-strong);
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
  color: #8993ad;
}

body[data-theme="dark"] .primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #010013;
}

body[data-theme="dark"] .primary:hover {
  background: var(--primary-strong);
}

body[data-theme="dark"] .danger-button {
  background: rgba(180, 35, 24, 0.16);
  border-color: rgba(248, 113, 113, 0.48);
  color: #ffaaa4;
}

body[data-theme="dark"] .danger-button:hover {
  background: rgba(180, 35, 24, 0.24);
  border-color: rgba(248, 113, 113, 0.62);
}

body[data-theme="dark"] td,
body[data-theme="dark"] th {
  border-bottom-color: var(--line-strong);
}

body[data-theme="dark"] th {
  color: #c3cbe0;
}

body[data-theme="dark"] td .row-actions button,
body[data-theme="dark"] td .row-actions .button,
body[data-theme="dark"] .account-action,
body[data-theme="dark"] .account-action:hover,
body[data-theme="dark"] .account-action:disabled,
body[data-theme="dark"] .account-action:disabled:hover {
  background: var(--button-bg);
  border-color: var(--line-strong);
}

body[data-theme="dark"] .account-action-edit {
  border-color: rgba(132, 188, 255, 0.45);
  color: #8bbcff;
}

body[data-theme="dark"] .account-action-reset,
body[data-theme="dark"] .account-action-toggle.is-on {
  border-color: rgba(171, 239, 198, 0.42);
  color: #8ee6b2;
}

body[data-theme="dark"] .account-action-delete {
  border-color: rgba(248, 113, 113, 0.48);
  color: #ffaaa4;
}

body[data-theme="dark"] .tool-enabled,
body[data-theme="dark"] .tool-available,
body[data-theme="dark"] .tool-card-status.tool-enabled,
body[data-theme="dark"] .tool-card-status.tool-available,
body[data-theme="dark"] .tool-card-status.tool-ready {
  background: rgba(171, 239, 198, 0.18);
  border-color: rgba(171, 239, 198, 0.28);
  color: #8ee6b2;
}

body[data-theme="dark"] .tool-optional,
body[data-theme="dark"] .tool-not-configured,
body[data-theme="dark"] .tool-unauthorized,
body[data-theme="dark"] .tool-card-status.tool-not-configured {
  background: rgba(254, 176, 25, 0.16);
  border-color: rgba(254, 176, 25, 0.28);
  color: #ffd08a;
}

/* Dark-theme pill overrides removed — the rgba + border design works
   in both light and dark themes without needing separate overrides. */

body[data-theme="dark"] #statusView .metric,
body[data-theme="dark"] #statusView .panel,
body[data-theme="dark"] #statusView .status-row,
body[data-theme="dark"] #reportsView .report-filters,
body[data-theme="dark"] #reportsView .table-wrap {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 50%),
    #1b1f3a;
  border-color: rgba(166, 176, 214, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

body[data-theme="dark"] #statusView .metric::after {
  background: linear-gradient(90deg, #f4a33a 0 62%, rgba(255, 255, 255, 0.82) 62% 100%);
}

body[data-theme="dark"] #statusView .institution {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 56%),
    #202443;
  border-color: rgba(166, 176, 214, 0.22);
}

body[data-theme="dark"] #statusView .institution:hover,
body[data-theme="dark"] #statusView .status-row:hover,
body[data-theme="dark"] #reportsView .report-row:hover {
  background:
    linear-gradient(180deg, rgba(101, 207, 199, 0.07), rgba(255, 255, 255, 0) 62%),
    #222847;
  border-color: rgba(101, 207, 199, 0.34);
}

body[data-theme="dark"] #statusView .pill.status-Finished {
  background: rgba(109, 217, 151, 0.22);
  border-color: rgba(109, 217, 151, 0.42);
  color: #a9f5c6;
}

body[data-theme="dark"] #statusView .pill.status-Pending,
body[data-theme="dark"] #statusView .pill.status-Queued,
body[data-theme="dark"] #statusView .pill.status-Stopped {
  background: rgba(166, 176, 214, 0.13);
  border-color: rgba(166, 176, 214, 0.24);
  color: #c6cde0;
}

body[data-theme="dark"] #statusView .pill.status-Scanning {
  background: rgba(132, 188, 255, 0.17);
  border-color: rgba(132, 188, 255, 0.32);
  color: #a8ceff;
}

body[data-theme="dark"] #statusView .pill.status-Failed {
  background: rgba(248, 113, 113, 0.17);
  border-color: rgba(248, 113, 113, 0.36);
  color: #ffb4ae;
}

body[data-theme="dark"] #reportsView th {
  color: #aeb8d2;
}

body[data-theme="dark"] #reportsView td {
  color: #eef3ff;
}

body[data-theme="dark"] #reportsView td .row-actions button,
body[data-theme="dark"] #reportsView td .row-actions .button,
body[data-theme="dark"] #statusView .row-actions button,
body[data-theme="dark"] #statusView .institution-actions button {
  background: rgba(20, 23, 43, 0.82);
  border-color: rgba(166, 176, 214, 0.25);
  color: #f5f7ff;
}

/* The per-card Stop button must stay red in EVERY theme. These selectors are
   deliberately more specific than the generic action-button styling above so
   the danger styling isn't washed out to grey in dark mode. */
#statusView .row-actions .danger-button,
#statusView .institution-actions .danger-button,
.institution-actions .danger-button,
.row-actions .danger-button {
  background: #fff0ef;
  border-color: var(--danger);
  color: var(--danger);
}
body[data-theme="dark"] #statusView .row-actions .danger-button,
body[data-theme="dark"] #statusView .institution-actions .danger-button,
body[data-theme="dark"] .institution-actions .danger-button,
body[data-theme="dark"] .row-actions .danger-button {
  background: rgba(180, 35, 24, 0.2);
  border-color: rgba(248, 113, 113, 0.6);
  color: #ffb4ae;
}
body[data-theme="dark"] #statusView .row-actions .danger-button:hover,
body[data-theme="dark"] #statusView .institution-actions .danger-button:hover,
body[data-theme="dark"] .institution-actions .danger-button:hover,
body[data-theme="dark"] .row-actions .danger-button:hover {
  background: rgba(180, 35, 24, 0.3);
  border-color: rgba(248, 113, 113, 0.75);
}

body[data-theme="dark"] #openInstitutionDialogBtn {
  background:
    linear-gradient(180deg, rgba(101, 207, 199, 0.16), rgba(101, 207, 199, 0.06)),
    #171b34;
  border-color: rgba(101, 207, 199, 0.3);
  color: #a9f5ef;
}

body[data-theme="dark"] dialog {
  background:
    radial-gradient(circle at 20% 0%, rgba(101, 207, 199, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 42%),
    #171a33;
  border-color: rgba(166, 176, 214, 0.22);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(101, 207, 199, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body[data-theme="dark"] .dialog-head {
  /* Opaque dark base (matches the dialog surface) so body rows don't show
     through the sticky header. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 62%),
    #171a33;
  border-bottom-color: rgba(166, 176, 214, 0.22);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

body[data-theme="dark"] .tab.active {
  background: rgba(79, 214, 199, 0.11);
  color: var(--primary);
  border-color: rgba(79, 214, 199, 0.32);
}

body[data-theme="dark"] .osint-tabs {
  gap: 20px;
  color: #aeb8d2;
}

body[data-theme="dark"] .osint-tabs button,
body[data-theme="dark"] .osint-tabs button:hover,
body[data-theme="dark"] .osint-tabs button.active,
body[data-theme="dark"] .view-all-link,
body[data-theme="dark"] .view-all-link:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body[data-theme="dark"] .osint-tabs button {
  color: inherit;
  padding-inline: 0;
}

body[data-theme="dark"] .osint-tabs button:hover {
  color: var(--primary);
}

body[data-theme="dark"] .osint-tabs button.active {
  border-bottom: 2px solid var(--primary);
  color: var(--primary);
}

body[data-theme="dark"] .view-all-link {
  color: var(--primary);
}

body[data-theme="dark"] .side-nav .tab.active {
  background: rgba(79, 214, 199, 0.08);
  border-color: rgba(79, 214, 199, 0.22);
}

body[data-theme="dark"] .app-shell.sidebar-collapsed .tab,
body[data-theme="dark"] .app-shell.sidebar-collapsed .tab:hover,
body[data-theme="dark"] .app-shell.sidebar-collapsed .tab.active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body[data-theme="dark"] .side-nav p {
  color: #8790aa;
}

body[data-theme="dark"] .app-shell.sidebar-collapsed .tab .nav-icon,
body[data-theme="dark"] .nav-icon {
  background: rgba(79, 214, 199, 0.11);
  border: 1px solid rgba(79, 214, 199, 0.18);
  color: var(--accent);
}

body[data-theme="dark"] .app-shell.sidebar-collapsed .tab.active .nav-icon {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 152, 0, 0.18), transparent 54%),
    rgba(79, 214, 199, 0.24);
  border-color: rgba(79, 214, 199, 0.62);
  box-shadow:
    0 0 0 5px rgba(79, 214, 199, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--accent);
  transform: scale(1.08);
}

body[data-theme="dark"] .avatar,
body[data-theme="dark"] #topbarAvatar,
body[data-theme="dark"] #dropdownAvatar,
body[data-theme="dark"] #sidebarAvatar {
  border-color: rgba(255, 152, 0, 0.28);
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 248, 236, 0.2) 0 34%, transparent 35%),
    linear-gradient(135deg, rgba(255, 152, 0, 0.22), rgba(255, 232, 184, 0.1));
}

body[data-theme="dark"] .osint-file-drop-inline button,
body[data-theme="dark"] .osint-methodology,
body[data-theme="dark"] .key-preview {
  background: rgba(79, 214, 199, 0.1);
  color: var(--primary);
  border-color: rgba(79, 214, 199, 0.24);
}

body[data-theme="dark"] .dashboard-provider.is-ready {
  background: rgba(79, 214, 199, 0.1);
  border-color: rgba(171, 239, 198, 0.36);
}

body[data-theme="dark"] .dashboard-provider:not(.is-ready) {
  background: var(--surface-2);
}

body[data-theme="dark"] .dashboard-hint-list article {
  background: var(--surface-2);
}

body[data-theme="dark"] .runtime-intro,
body[data-theme="dark"] .dashboard-panel {
  background: #121128;
}

body[data-theme="dark"] .dashboard-event-log article > span {
  box-shadow: 0 0 0 5px rgba(79, 214, 199, 0.12);
}

body[data-theme="dark"] .message-item.unread {
  background: rgba(79, 214, 199, 0.12);
  border-color: rgba(79, 214, 199, 0.36);
  color: var(--text);
}

body[data-theme="dark"] .message-item.seen {
  background: var(--surface-2);
  color: var(--muted);
}

body[data-theme="dark"] .message-item.seen strong {
  color: #c2c9dc;
}

body[data-theme="dark"] .osint-metric.metric-none {
  background:
    linear-gradient(135deg, rgba(148, 163, 184, 0.09), transparent 54%),
    var(--surface-2);
  border-color: rgba(148, 163, 184, 0.20);
}

body[data-theme="dark"] .osint-metric.metric-low {
  background:
    linear-gradient(135deg, rgba(113, 216, 153, 0.15), transparent 58%),
    var(--surface-2);
  border-color: rgba(113, 216, 153, 0.34);
}

body[data-theme="dark"] .osint-metric.metric-medium,
body[data-theme="dark"] .osint-metric.metric-Review,
body[data-theme="dark"] .osint-metric.metric-Medium {
  background:
    linear-gradient(135deg, rgba(242, 177, 92, 0.17), transparent 58%),
    var(--surface-2);
  border-color: rgba(242, 177, 92, 0.42);
}

body[data-theme="dark"] .osint-metric.metric-high,
body[data-theme="dark"] .osint-metric.metric-High,
body[data-theme="dark"] .osint-metric.metric-Critical {
  background:
    linear-gradient(135deg, rgba(255, 112, 102, 0.18), transparent 58%),
    var(--surface-2);
  border-color: rgba(255, 112, 102, 0.48);
}

body[data-theme="dark"] .dialog-close-button {
  background: var(--surface-3);
  color: var(--ink);
}

body[data-theme="dark"] dialog::backdrop,
body[data-theme="dark"] .message-dialog::backdrop {
  background: rgba(1, 0, 19, 0.64);
}

body[data-theme="dark"] .osint-drop-overlay {
  background: rgba(1, 0, 19, 0.86);
}

body[data-theme="dark"] .osint-drop-card {
  background: var(--surface);
  color: var(--text);
  border-color: rgba(79, 214, 199, 0.5);
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .scan-grid,
  .accounts-grid,
  .messages-grid,
  .dashboard-hero,
  .dashboard-grid,
  .runtime-grid,
  .runtime-hero {
    grid-template-columns: 1fr;
  }

  .summary-grid,
  .dashboard-action-grid,
  .detail-grid,
  .osint-summary-grid,
  .osint-detail-grid,
  .osint-secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #reportsView .report-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-shell {
    display: block;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .sidebar {
    position: fixed !important;
    top: auto !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    width: 100vw;
    max-width: 100vw;
    height: calc(74px + env(safe-area-inset-bottom, 0px));
    display: block;
    border-top: 1px solid var(--line);
    border-right: 0;
    background: rgba(251, 250, 247, 0.96);
    box-shadow: 0 -14px 34px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transform: translateZ(0);
  }

  .sidebar-brand,
  .org-switcher {
    display: none;
  }

  .side-nav {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    scrollbar-width: none;
  }

  .side-nav::-webkit-scrollbar {
    display: none;
  }

  .side-nav p {
    display: none;
  }

  .tab {
    min-width: 78px;
    min-height: 56px;
    flex: 0 0 78px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    border-radius: 12px;
    padding: 6px 4px;
    text-align: center;
    font-size: 11px;
  }

  #statusView .period-controls,
  #reportsView .report-filters {
    display: grid;
    grid-template-columns: 1fr;
  }

  #statusView .period-controls select,
  #statusView .period-controls input,
  #statusView .period-controls button,
  #reportsView .report-filters input,
  #reportsView .report-filters select {
    width: 100%;
  }

  .nav-icon {
    width: 24px;
    height: 24px;
  }

  .nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .main-shell {
    display: block;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }

  .topbar,
  .view-heading {
    align-items: center;
    flex-direction: row;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 66px;
    padding: 10px 14px;
    backdrop-filter: blur(12px);
  }

  .topbar h1 {
    max-width: 48vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-menu {
    width: auto;
  }

  .topbar-actions {
    gap: 6px;
  }

  .notification-bell {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .user-menu-trigger {
    width: auto;
    min-height: 48px;
    grid-template-columns: 46px;
    gap: 0;
    padding: 3px;
  }

  .user-menu-trigger > span:last-child {
    display: none;
  }

  .user-dropdown {
    position: fixed;
    top: 70px;
    right: 12px;
    width: min(330px, calc(100vw - 24px));
  }

  .message-panel {
    position: fixed;
    top: 70px;
    right: 12px;
    width: min(360px, calc(100vw - 24px));
  }

  #toast {
    right: 12px;
    top: 78px;
    min-width: min(330px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }

  .layout {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    padding: 18px 12px calc(112px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }

  .summary-grid,
  .dashboard-hero,
  .dashboard-action-grid,
  .dashboard-grid,
  .detail-grid,
  .form-row,
  .detail-list,
  .status-row,
  .runtime-tool,
  .osint-summary-grid,
  .osint-detail-grid,
  .osint-secondary-grid,
  .osint-metric,
  .osint-methodology {
    grid-template-columns: 1fr;
  }

  .topbar-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-osint-search {
    min-width: 0;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar-osint-search button {
    width: 100%;
  }

  .dashboard-hero,
  .dashboard-panel,
  .dashboard-action-card {
    padding: 16px;
  }

  .dashboard-hero h2 {
    font-size: 30px;
    line-height: 1.05;
  }

  .dashboard-action-card {
    min-height: 210px;
  }

  .dashboard-provider-grid {
    grid-template-columns: 1fr;
  }

  .osint-report-head,
  .integration-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .osint-tabs {
    display: flex;
    gap: 8px;
    margin-inline: -14px;
    padding: 0 14px 10px;
    border-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .osint-tabs button {
    flex: 0 0 auto;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    padding: 9px 14px;
    scroll-snap-align: start;
  }

  .osint-tabs button.active {
    border-color: #99d8cc;
    background: #eefaf7;
    box-shadow: inset 0 -2px 0 var(--primary);
  }

  .osint-landing-panel {
    min-height: calc(100dvh - 180px);
  }

  .osint-landing {
    gap: 18px;
    padding: 28px 8px 34px;
  }

  .osint-brand-lockup img {
    width: 190px;
  }

  .osint-landing-search {
    grid-template-columns: 1fr;
  }

  .osint-landing-search button {
    width: 100%;
  }

  .view,
  .workspace {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 16px;
  }

  .accounts-grid,
  .messages-grid,
  .scan-grid,
  .runtime-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  #statusView > .view-heading {
    justify-content: stretch;
  }

  .period-controls,
  .toolbar,
  .row-actions,
  .export-actions,
  .pagination,
  .pagination-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .period-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .period-controls button,
  .period-controls .danger-button {
    grid-column: 1 / -1;
  }

  .toolbar select,
  .toolbar input,
  .account-toolbar input,
  .account-toolbar select,
  .export-actions > * {
    width: 100%;
    max-width: none;
  }

  .period-controls > * {
    width: 100%;
  }

  input,
  select,
  textarea,
  button,
  .button {
    max-width: 100%;
    min-width: 0;
  }

  button,
  .button {
    white-space: normal;
  }

  .panel,
  .metric,
  .table-wrap,
  .status-row,
  .runtime-card,
  .runtime-tool,
  .account-form-panel,
  .accounts-panel,
  .credential-card,
  .detail-card,
  .detail-list {
    border-radius: 8px;
  }

  .panel,
  .account-form-panel,
  .accounts-panel,
  .metric {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 18px;
  }

  .account-form-panel form,
  .account-form-panel label,
  .accounts-panel,
  .account-toolbar {
    min-width: 0;
    max-width: 100%;
  }

  .submit-wide {
    width: 100%;
  }

  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 680px;
  }

  .accounts-table {
    min-width: 680px;
  }

  /* ── Mobile layout: flex-column so the form sits IMMEDIATELY below the robot
     with zero gap. Grid was creating alignment space we couldn't easily override.
     position:relative + overflow:hidden maintained for the robot animation.     */
  .login-view {
    min-height: 100svh;
    height: auto;            /* let content define height — no forced 100svh gap */
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: linear-gradient(180deg, #060d14 0%, #091520 100%);
  }

  /* ── Mobile login animation states ────────────────────────────────────────
     The brand section never does the horizontal slide (single column).
     JS controls all transforms; CSS just sets the starting frozen state.     */

  /* Brand section: overflow visible so the scaled robot stage bleeds
     beyond the 55svh banner and fills the ENTIRE phone screen.
     Same technique as desktop but without the translateX shift. */
  .login-brand.pre-reveal {
    transform: none;
    overflow: visible !important;
  }

  /* Panel is fully invisible at the start — JS reveals it AFTER robot zoom-out */
  .login-panel.pre-reveal {
    opacity: 0 !important;
    transform: translateY(28px) !important;
    pointer-events: none !important;
    transition: none !important;
  }

  /* Robot starts near the bottom of the screen.
     translateY(75%) pushes the robot center to ~81 svh from top of the
     65svh brand section, which (with overflow:visible) places the robot's
     head at roughly 97 svh — near the very bottom of the 100svh viewport.
     The animation then rises to the top banner while zooming out. */
  .spline-robot-stage.pre-reveal {
    transform-origin: center 50%;
    transform: scale(2.5) translateY(75%);
  }

  /* Taller banner — flex-shrink:0 so it never collapses in the flex column */
  .login-brand {
    min-height: 65svh;
    flex-shrink: 0;       /* brand always keeps its height */
    position: relative;
    overflow: hidden;
  }

  .login-brand img {
    width: min(120px, 38vw);
  }

  .login-brand > div:not(.login-grid-glow):not(.login-scanlines):not(.login-signal-stack):not(.spline-robot-stage):not(.login-brand-logo-wrap) {
    display: none;
  }

  .login-grid-glow,
  .login-scanlines,
  .login-signal-stack {
    display: none;
  }

  /* Panel is now a flex item — drops immediately below the brand with no gap */
  .login-panel {
    flex-shrink: 0;           /* don't compress */
    /* override ALL desktop positioning/centering */
    align-self: auto !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    display: block !important; /* plain block — no flex centering magic */
    padding: 20px 16px 24px;
    border: none;
    background: transparent;
    overflow-y: visible;
    position: relative;
  }

  .lp-card-outer {
    max-width: 100%;
    width: 100%;
    perspective: none;
    /* Pull card up to sit immediately below the robot banner.
       -20svh ≈ -149 px on a 740px screen, matching what the user verified. */
    margin-top: -20svh;
  }

  /* Disable 3D tilt on mobile (no mouse) */
  .lp-card {
    transform: none !important;
  }

  .lp-brand-title {
    font-size: clamp(26px, 7vw, 36px);
  }

  .lp-form-title {
    font-size: 28px;
  }

  .login-panel h2 {
    font-size: 28px;
  }

  .login-panel .muted {
    line-height: 1.45;
  }

  /* ── CRITICAL: fix display:flex !important preventing .hidden from working.
     The mobile login-view uses display:flex !important which beats the normal
     .hidden { display:none } rule. An ID selector (#loginView) has higher
     specificity than any class selector, so this always wins and ensures
     the login page is truly removed from layout after authentication.        */
  #loginView.hidden {
    display: none !important;
  }

  /* ── Mobile login: hide everything except the form inputs ───────────────
     The robot fills the top banner; the card shows only the essential form.
     No background watermark, no branding block, no helper text.            */

  /* Background SOC+ logo watermark */
  .login-bg-logo {
    display: none;
  }

  /* Branding block ("SOC+ Recon Platform", description) and divider */
  .lp-brand,
  .lp-divider {
    display: none;
  }

  /* Inside the form section: hide "SECURE ACCESS" eyebrow, the subtitle
     paragraph, and the "Need access?" footer — keep only title + inputs + button */
  .lp-form-eyebrow,
  .lp-form-muted,
  .lp-help {
    display: none;
  }

  /* Keep "Unlock SOC+" title but make it compact */
  .lp-form-title {
    font-size: 20px;
    margin: 0 0 14px;
  }

  /* Tighter card padding — less content so less breathing room needed */
  .lp-card-inner {
    padding: 18px 18px 22px;
  }

  /* Tighter form spacing */
  .login-panel .login-form {
    gap: 10px;
    margin-top: 0;
  }

  /* ── Fix 1: Account search toolbar — keep as horizontal row ───────────────
     The generic .toolbar rule sets flex-direction: column on mobile, which
     turns the search input into a full-screen-width block. Override it here
     so the search bar stays compact and horizontal.                          */
  .account-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .account-toolbar input {
    flex: 1 1 0;
    min-width: 120px;
    width: auto;
  }

  .account-toolbar select {
    flex: 0 0 auto;
    width: auto;
  }

  /* ── Fix 2 (mobile): Create User modal — constrain height so the submit
     button is always reachable when the role selector expands              */
  .create-user-modal {
    max-height: 90dvh;
  }

  /* ── Fix 3: SOC+ verdict — prevent score chips from overflowing           */
  .verdict-modal-scores {
    flex-wrap: wrap;
    gap: 12px;
  }

  .soc-verdict-score {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Fix 4: Scan view status rows — collapse 3-column grid to 1 column.
     #statusView .status-row has higher specificity than the generic
     .status-row { grid-template-columns: 1fr } rule, so we need an
     equally-specific override here.                                         */
  #statusView .status-row {
    grid-template-columns: 1fr;
    min-height: unset;
    padding: 16px 18px;
    gap: 10px;
  }

  #statusView .status-row .row-actions {
    flex-direction: row;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* ── "Logs" live audit terminal ──────────────────────────────────────────── */

.nav-alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e2483a;
  margin-left: auto;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(226, 72, 58, 0.6);
  animation: logsAlertPulse 1.6s ease-out 3;
}

@keyframes logsAlertPulse {
  0%   { box-shadow: 0 0 0 0 rgba(226, 72, 58, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(226, 72, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 72, 58, 0); }
}

#logsView {
  display: none;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
}

#logsView.active {
  display: flex;
}

.logs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.logs-toolbar-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.logs-toolbar-head h2 {
  margin: 0;
}

.logs-stream-status {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.logs-stream-status--connecting {
  color: #9a7b1f;
  background: rgba(245, 197, 66, 0.16);
}

.logs-stream-status--live {
  color: #1f8f5a;
  background: rgba(46, 184, 124, 0.14);
}

.logs-stream-status--live::before {
  content: "● ";
}

.logs-stream-status--error {
  color: #c0392b;
  background: rgba(224, 76, 60, 0.14);
}

.logs-toolbar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.logs-toolbar-controls input[type="search"] {
  min-width: 220px;
}

.logs-autoscroll-toggle {
  margin: 0;
  white-space: nowrap;
}

.logs-scope-note {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted, #6b6560);
}

.logs-terminal {
  flex: 1;
  min-height: 360px;
  overflow-y: auto;
  background: #0c1014;
  border: 1px solid #1c242c;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: "SFMono-Regular", "JetBrains Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: #c9d6df;
}

.logs-empty {
  margin: 0;
  color: #6c7886;
  font-style: italic;
}

.logs-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.logs-line--new {
  animation: logsLineIn 420ms ease-out;
}

@keyframes logsLineIn {
  from { background: rgba(110, 168, 254, 0.16); }
  to   { background: transparent; }
}

.logs-line-time {
  flex: 0 0 auto;
  color: #6c7886;
}

.logs-line-tag {
  flex: 0 0 auto;
  color: #6ea8fe;
  font-weight: 700;
}

.logs-line-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.logs-line-message {
  color: #dfe7ee;
  word-break: break-word;
}

.logs-line-meta {
  color: #8a96a3;
  font-size: 11.5px;
}

.logs-line-detail {
  margin: 4px 0 2px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid #344150;
  border-radius: 4px;
  color: #aab6c2;
  font-size: 11.5px;
  white-space: pre-wrap;
  word-break: break-word;
}

.logs-line-detail--stack {
  border-left-color: #e0584c;
  color: #f0c6c1;
}

.logs-line-detail--alert {
  border-left-color: #e2483a;
  color: #f3b8b1;
  background: rgba(226, 72, 58, 0.08);
}

/* Severity accents on the timestamp rail */
.logs-line--info .logs-line-time      { color: #6c7886; }
.logs-line--warn .logs-line-time,
.logs-line--warning .logs-line-time   { color: #e3b341; }
.logs-line--error .logs-line-time     { color: #e0584c; }
.logs-line--alert .logs-line-time     { color: #ff6b5e; }

.logs-line--warn .logs-line-tag,
.logs-line--warning .logs-line-tag {
  color: #e3b341;
}

.logs-line--error .logs-line-tag,
.logs-line--alert .logs-line-tag {
  color: #ff6b5e;
}

.logs-line--alert {
  background: rgba(226, 72, 58, 0.06);
  border-bottom-color: rgba(226, 72, 58, 0.16);
}

.logs-line--alert .logs-line-message {
  color: #ffd9d4;
  font-weight: 650;
}

body[data-theme="dark"] .logs-terminal {
  background: #06090c;
  border-color: #141a20;
}

body[data-theme="dark"] .logs-scope-note {
  color: #9aa6b2;
}

@media (max-width: 720px) {
  .logs-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .logs-toolbar-controls input[type="search"] {
    min-width: 0;
    flex: 1;
  }
}

/* ── Live VM Sandbox ──────────────────────────────────────────────────────── */
#sandboxView { flex-direction: column; gap: 0; }
#sandboxView.active { display: flex; }

@media (min-width: 761px) {
  .app-shell.sandbox-active {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .app-shell.sandbox-active .main-shell,
  .app-shell.sandbox-active .layout,
  .app-shell.sandbox-active .workspace {
    min-height: 0;
    height: 100%;
  }

  .app-shell.sandbox-active .layout {
    overflow: hidden;
    padding: 10px 16px 14px;
  }

  .app-shell.sandbox-active .workspace {
    gap: 0;
  }

  #sandboxView.active {
    height: 100%;
    min-height: 0;
  }

  .app-shell.sandbox-active .sandbox-stage {
    min-height: 0;
  }
}

.sandbox-engine-badge {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.sandbox-engine-badge--ok   { color: #0c8b6f; background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.4); }
.sandbox-engine-badge--bad  { color: #d92020; background: rgba(217,45,32,0.12); border-color: rgba(217,45,32,0.4); }
.sandbox-engine-badge--warn { color: #b54708; background: rgba(181,71,8,0.12); border-color: rgba(181,71,8,0.4); }

.sandbox-panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 22px;
}

.sandbox-unavailable {
  border: 1px solid rgba(217,45,32,0.35);
  background: rgba(217,45,32,0.06);
  border-radius: 16px;
  padding: 20px 22px;
}
.sandbox-unavailable h3 { margin: 0 0 6px; color: #d92020; }
.sandbox-unavailable ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sandbox-unavailable li { font-size: 13.5px; padding-left: 4px; }
.sandbox-unavailable li.ok span  { color: #0c8b6f; font-weight: 800; }
.sandbox-unavailable li.bad span { color: #d92020; font-weight: 800; }
.sandbox-unavailable li em { color: var(--muted); font-style: normal; font-size: 12.5px; }
.sandbox-unavailable code { font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; }

.sandbox-form {
  width: min(720px, 100%);
  display: grid;
  gap: 18px;
  margin: auto;
  align-self: center;
}
.sandbox-mode-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(127,127,127,0.08);
  border: 1px solid var(--line);
  width: max-content;
}
.sandbox-mode {
  min-height: 36px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  padding: 6px 18px;
  font-weight: 700;
  color: var(--muted);
}
.sandbox-mode.active { background: var(--primary); color: #04201c; }

.sandbox-pane { display: grid; gap: 8px; }
.sandbox-pane label { font-weight: 700; font-size: 13px; }
.sandbox-pane input[type="url"] { width: 100%; }
.sandbox-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.sandbox-hint code { font-family: "SFMono-Regular", Consolas, monospace; font-size: 11.5px; }

.sandbox-dropzone {
  border: 2px dashed var(--line-strong, var(--line));
  border-radius: 12px;
  padding: 28px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.sandbox-dropzone:hover, .sandbox-dropzone:focus-visible { border-color: var(--primary); outline: none; }
.sandbox-dropzone.dragover { border-color: var(--primary); background: rgba(18,124,114,0.06); }
.sandbox-dropzone-text { margin: 0; color: var(--muted); }
.sandbox-browse { color: var(--primary); font-weight: 700; text-decoration: underline; }
.sandbox-file-chosen { margin: 8px 0 0; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12.5px; color: var(--text); }

.sandbox-launch { width: max-content; min-width: 180px; }
.sandbox-error { margin: 0; color: #d92020; font-size: 13px; font-weight: 600; }

/* Live session */
.sandbox-session {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
}
.sandbox-session-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.sandbox-session-id { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.05em; }
.sandbox-session-id code { font-family: "SFMono-Regular", Consolas, monospace; color: var(--primary); font-weight: 700; }
.sandbox-target { color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sandbox-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255,77,77,0.7); animation: sbLivePulse 1.6s infinite; }
@keyframes sbLivePulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,77,0.6); } 70% { box-shadow: 0 0 0 8px rgba(255,77,77,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,77,0); } }

.sandbox-stage {
  position: relative;
  min-height: 360px;
  background: #0d1117;
  border: 1px solid #1f2733;
  border-radius: 12px;
  overflow: hidden;
}
.sandbox-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0d1117; }
.sandbox-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  color: #7fe7d5; font-family: "SFMono-Regular", Consolas, monospace;
}
.sandbox-spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid rgba(127,231,213,0.2); border-top-color: #2ee6c5;
  animation: sbSpin 0.9s linear infinite;
}
@keyframes sbSpin { to { transform: rotate(360deg); } }

.sandbox-expired-overlay {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,10,15,0.92); backdrop-filter: blur(3px);
}
.sandbox-expired-card { text-align: center; color: #e6edf3; max-width: 360px; }
.sandbox-expired-icon { font-size: 44px; color: #ff5d5d; }
.sandbox-expired-card h3 { margin: 8px 0 4px; }
.sandbox-expired-card p { margin: 0 0 18px; color: #8b97a7; }

.sandbox-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sandbox-timer-wrap { display: inline-flex; align-items: center; gap: 10px; }
.sandbox-timer-icon { font-size: 18px; }
.sandbox-timer-label { color: var(--muted); font-size: 13px; }
.sandbox-timer {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 26px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--primary);
}
.sandbox-timer--danger { color: #ff4d4d; animation: sbTimerPulse 1s infinite; }
@keyframes sbTimerPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.sandbox-addtime { min-width: 160px; }
body[data-theme="dark"] .sandbox-panel { background: #141a2e; border-color: rgba(166,176,214,0.2); }
body[data-theme="dark"] .sandbox-mode.active { color: #04201c; }
body[data-theme="dark"] .sandbox-stage { border-color: #20283a; }

/* ── Recorded Future: Assessment + Risk Rules ─────────────────────────────── */
.rf-assessment-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
  cursor: help;
}

.rf-assessment-malicious  { background: rgba(217,45,32,0.14);  color: #d92020; border-color: rgba(217,45,32,0.34); }
.rf-assessment-suspicious { background: rgba(181,71,8,0.14);   color: #b54708; border-color: rgba(181,71,8,0.32); }
.rf-assessment-unusual    { background: rgba(202,138,4,0.16); color: #a16207; border-color: rgba(202,138,4,0.4); }
.rf-assessment-none       { background: rgba(127,127,127,0.12); color: #6c7886; border-color: rgba(127,127,127,0.25); }

.rf-assessment-block {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(127,127,127,0.05);
  margin-bottom: 12px;
}
.rf-assessment-block-malicious  { border-color: rgba(217,45,32,0.3);  background: rgba(217,45,32,0.05); }
.rf-assessment-block-suspicious { border-color: rgba(181,71,8,0.28);  background: rgba(181,71,8,0.05); }
.rf-assessment-block-unusual    { border-color: rgba(202,138,4,0.28); background: rgba(202,138,4,0.05); }
.rf-assessment-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rf-assessment-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rf-assessment-risk { font-size: 12px; color: var(--muted); font-weight: 600; }
.rf-assessment-summary { margin: 0; font-size: 13px; color: var(--text); }

.rf-risk-rules { margin-top: 12px; }
.rf-risk-rules > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 4px 0;
}
.rf-rule-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.rf-rule {
  border: 1px solid var(--line);
  border-left: 3px solid rgba(127,127,127,0.4);
  border-radius: 8px;
  padding: 9px 12px;
  background: rgba(127,127,127,0.04);
}
.rf-rule-malicious  { border-left-color: #d92020; }
.rf-rule-suspicious { border-left-color: #b54708; }
.rf-rule-unusual    { border-left-color: #ca8a04; }
.rf-rule-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rf-rule-head strong { font-size: 13px; }
.rf-rule-when { margin-left: auto; font-size: 11.5px; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; }
.rf-rule-evidence { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

body[data-theme="dark"] .rf-assessment-block { background: rgba(255,255,255,0.03); border-color: rgba(166,176,214,0.18); }
body[data-theme="dark"] .rf-rule { background: rgba(255,255,255,0.025); border-color: rgba(166,176,214,0.16); }

/* ── Records: clickable row ─────────────────────────────────────────────── */
#reportsView .report-row.clickable { cursor: pointer; }
#reportsView .report-row.clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ── Modern export button ───────────────────────────────────────────────── */
.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 150ms, color 150ms, box-shadow 150ms;
  white-space: nowrap;
}
.btn-export:hover {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(18,124,114,0.3);
}
body[data-theme="dark"] .btn-export { border-color: var(--primary-strong); color: var(--primary-strong); }
body[data-theme="dark"] .btn-export:hover { background: var(--primary-strong); color: #fff; }

/* ── Institution card IP truncation ────────────────────────────────────── */
.institution-ip-line { overflow-wrap: anywhere; }
.ip-more { font-style: italic; opacity: 0.65; }

/* ── Expandable detail cards in scan dialog ─────────────────────────────── */
.detail-card-clickable {
  cursor: pointer;
  transition: background 140ms, box-shadow 140ms;
  position: relative;
}
.detail-card-clickable:hover { background: var(--row-hover); box-shadow: 0 0 0 2px var(--primary) inset; }
.detail-card-clickable strong::after { content: " ▾"; font-size: 0.78em; opacity: 0.55; }

/* ── Expand detail dialog (nested) ──────────────────────────────────────── */
.expand-detail-dialog { max-width: 500px; width: 90vw; }
.expand-detail-body { padding: 4px 0 8px; }
.expand-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 55vh;
  overflow-y: auto;
}
.expand-list li {
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--surface-raised, rgba(127,127,127,0.06));
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
}
.expand-list-ports li { display: flex; flex-direction: column; gap: 2px; }
.expand-list-ports li strong { font-size: 12px; opacity: 0.7; }
.expand-list-ports li span { font-size: 13.5px; }

/* ── Filter bar uniform sizing ──────────────────────────────────────────── */
#reportsView .report-filters {
  grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(140px, 1fr));
}