/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; touch-action: manipulation; }
.hidden { display: none !important; }

/* ── Role-based visibility ───────────────────────────────────────────────── */
/* Elements only admins see — hidden for analyst and viewer */
body:not([data-role="admin"]) .admin-only { display: none !important; }
/* Elements analysts and admins see — hidden for viewer */
body[data-role="viewer"] .analyst-plus { display: none !important; }
html { overflow-y: scroll; background: #0d1117; color-scheme: dark; }
html:has(body.light) { background: #f6f8fa; color-scheme: light; }

/* ── Register color variables so they interpolate during theme transitions ── */
@property --bg                { syntax: '<color>'; inherits: true; initial-value: #0d1117; }
@property --bg-surface        { syntax: '<color>'; inherits: true; initial-value: #161b22; }
@property --bg-elevated       { syntax: '<color>'; inherits: true; initial-value: #21262d; }
@property --bg-elevated-hover { syntax: '<color>'; inherits: true; initial-value: #2d333b; }
@property --surface-raised    { syntax: '<color>'; inherits: true; initial-value: #1c2128; }
@property --surface-hover     { syntax: '<color>'; inherits: true; initial-value: #21262d; }
@property --border            { syntax: '<color>'; inherits: true; initial-value: #30363d; }
@property --border-soft       { syntax: '<color>'; inherits: true; initial-value: #21262d; }
@property --text              { syntax: '<color>'; inherits: true; initial-value: #e6edf3; }
@property --text-muted        { syntax: '<color>'; inherits: true; initial-value: #8b949e; }
@property --text-dim          { syntax: '<color>'; inherits: true; initial-value: #484f58; }
@property --accent            { syntax: '<color>'; inherits: true; initial-value: #60a5fa; }
@property --accent-fg         { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --accent-dim        { syntax: '<color>'; inherits: true; initial-value: rgba(96, 165, 250, 0.12); }
@property --ok                { syntax: '<color>'; inherits: true; initial-value: #3fb950; }
@property --warn              { syntax: '<color>'; inherits: true; initial-value: #d29922; }
@property --error             { syntax: '<color>'; inherits: true; initial-value: #f85149; }
@property --info              { syntax: '<color>'; inherits: true; initial-value: #388bfd; }

/* ── Dark theme (default) ─────────────────────────────────────────────────── */
:root {
  --bg:               #0d1117;
  --bg-surface:       #161b22;
  --bg-elevated:      #21262d;
  --bg-elevated-hover:#2d333b;
  --surface-raised:   #1c2128;
  --surface-hover:    #21262d;
  --border:           #30363d;
  --border-soft:      #21262d;
  --text:             #e6edf3;
  --text-muted:       #8b949e;
  --text-dim:         #484f58;
  --accent:           #60a5fa;
  --accent-fg:        #ffffff;
  --accent-dim:       rgba(96, 165, 250, 0.12);

  --ok:               #3fb950;
  --warn:             #d29922;
  --error:            #f85149;
  --info:             #388bfd;

  --radius:           8px;
  --radius-sm:        4px;
  --shadow:           0 8px 24px rgba(0,0,0,0.4);
  --card-shadow:      none;
  --card-hover-shadow:0 4px 16px rgba(0,0,0,0.3);
}

/* ── Light theme ──────────────────────────────────────────────────────────── */
body.light {
  --bg:               #f6f8fa;
  --bg-surface:       #ffffff;
  --bg-elevated:      #eaeef2;
  --bg-elevated-hover:#dde1e6;
  --surface-raised:   #ffffff;
  --surface-hover:    #eaeef2;
  --border:           #d0d7de;
  --border-soft:      #e8ecf0;
  --text:             #1f2328;
  --text-muted:       #656d76;
  --text-dim:         #9ba3ad;
  --accent:           #2563eb;
  --accent-fg:        #ffffff;
  --accent-dim:       rgba(37, 99, 235, 0.08);

  --ok:               #1a7f37;
  --warn:             #9a6700;
  --error:            #cf222e;
  --info:             #0969da;

  --shadow:           0 8px 24px rgba(0,0,0,0.1);
  --card-shadow:      none;
  --card-hover-shadow:0 4px 16px rgba(0,0,0,0.1);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.6;
}


*:not(.spinner):not(.status-dot):not(.modal):not(.modal-overlay):not(body::before) {
  transition: box-shadow 0.3s ease;
}

/* ── Scrollbars ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar                    { width: 8px; height: 8px; }
body::-webkit-scrollbar-track         { background: var(--bg); }
body::-webkit-scrollbar-thumb         { background: var(--bg-elevated-hover); border-radius: 4px; border: 2px solid var(--bg); }
body::-webkit-scrollbar-thumb:hover   { background: var(--text-dim); }
body::-webkit-scrollbar-corner        { background: var(--bg); }
/* Firefox */
body { scrollbar-width: thin; scrollbar-color: var(--bg-elevated-hover) var(--bg); }

/* ── Header ───────────────────────────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: env(safe-area-inset-top) 1.5rem 0;
  height: calc(56px + env(safe-area-inset-top));
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.header-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}


/* ── Header icon group (theme toggle + bell) ──────────────────────────────── */
.header-icon-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ── Theme toggle ─────────────────────────────────────────────────────────── */
.theme-icon-sun  { display: block; }
.theme-icon-moon { display: none; }
body.light .theme-icon-sun  { display: none; }
body.light .theme-icon-moon { display: block; }


/* ── Nav Tabs ─────────────────────────────────────────────────────────────── */
.app-nav {
  display: flex;
  gap: 0.15rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px;
  position: relative;
}

.nav-slider {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  background: var(--bg-surface);
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  pointer-events: none;
  transition: transform 0.22s ease, width 0.22s ease;
  will-change: transform;
}

.nav-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  cursor: pointer;
  transition: color 0.12s;
  white-space: nowrap;
  position: relative; /* sit above the slider */
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.nav-tab:hover  { color: var(--text); }
.nav-tab.active { color: var(--text); }

/* ── Stats Bar ────────────────────────────────────────────────────────────── */
.stats-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.5rem;
}
.stats-bar .search-input {
  flex: 1;
  max-width: 480px;
  border-radius: var(--radius);
}

.profile-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.profile-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.profile-search-toggle:hover { border-color: var(--accent); color: var(--text); }
.profile-search-toggle.active { border-color: var(--accent); color: var(--accent); }
.profile-search-toggle svg { width: 13px; height: 13px; }

.profile-search-slider {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, width 0.2s ease;
  flex-shrink: 0;
  width: 0;
  overflow: hidden;
}
.profile-search-slider.open {
  opacity: 1;
  pointer-events: auto;
  width: 220px;
}
.search-input.profile-search-input {
  width: 220px;
  border-radius: var(--radius);
  height: 1.9rem;
  font-size: 0.78rem;
  padding: 0 0.75rem;
}

/* ── Victim Insights ─────────────────────────────────────────────────────── */
#victims-insights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 20.9rem; /* exactly 10 top-group items + panel chrome at 14px base */
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.vi-panel {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.vi-panel:last-child { border-right: none; }
.vi-panel-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.vi-donut-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  min-width: 0;
  flex: 1;
  min-height: 0;
}
.vi-donut-wrap {
  flex-shrink: 0;
  height: 100%;
  aspect-ratio: 1 / 1;
  max-width: calc(100% - 90px - 2rem);
  min-height: 0;
  position: relative;
}
.vi-donut-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.vi-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 90px;
  flex: 1;
}
.vi-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
}
.vi-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vi-legend-label {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.vi-legend-pct {
  color: var(--text-muted);
}
@media (min-width: 769px) and (max-width: 1024px) {
  .vi-donut-wrap {
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    max-width: calc(100% - 80px - 1rem);
  }
}
@media (max-width: 768px) {
  #victims-insights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
    overflow: visible;
  }
  /* Tighter panel padding on mobile */
  .vi-panel {
    padding: 0.75rem 0.875rem;
  }
  /* Fixed donut size — no longer inherits a definite parent height */
  .vi-donut-wrap {
    width: 80px;
    height: 80px;
    max-width: 80px;
    flex-shrink: 0;
    aspect-ratio: unset;
  }
  /* Smaller legend text */
  .vi-legend-item {
    font-size: 0.75rem;
  }
  /* Top 5 only on mobile */
  .vi-legend-item:nth-child(n+6) {
    display: none;
  }
}
@media (max-width: 480px) {
  #victims-insights {
    grid-template-columns: 1fr;
  }
  /* Bigger donut on phone since it has the full width */
  .vi-donut-wrap {
    width: 100px;
    height: 100px;
    max-width: 100px;
  }
  .vi-panel {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .vi-panel:last-child {
    border-bottom: none;
  }
}

.profile-count-bar {
  display: flex;
  gap: 1rem;
  padding: 0.4rem 1.5rem 0.3rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.victim-source-legend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: auto;
  text-transform: none;
  letter-spacing: normal;
}
.victim-source-legend-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 2px 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color 0.15s, background 0.15s;
}
.victim-source-legend-btn:hover {
  border-color: var(--border);
  background: var(--bg-secondary);
}
.victim-source-legend-btn.active {
  border-color: var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.victim-source-legend-btn.active .victim-source-badge {
  opacity: 1;
}

/* ── Main / Grid ──────────────────────────────────────────────────────────── */
.app-main { padding: 0; }

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  padding: 0 1.5rem 1.25rem;
  transition: opacity 0.15s ease;
}
.profile-grid.is-filtering {
  opacity: 0;
  pointer-events: none;
}
.profile-grid.was-filtering .profile-card {
  animation: victimCardEnter 0.22s ease forwards;
}

.profiles-body {
  display: block;
}

/* ── Builds overlay button ────────────────────────────────────────────────── */
#btn-builds {
  position: relative;
}
#btn-builds.builds-active::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
  pointer-events: none;
}

/* ── Settings page ────────────────────────────────────────────────────────── */
#view-settings {
  height: calc(100vh - 60px);
  overflow: hidden;
}

#btn-settings.settings-active {
  color: var(--accent);
  background: var(--bg-elevated);
}

.settings-page {
  display: flex;
  height: 100%;
  min-height: 0;
}

.settings-sidebar {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 1.25rem 0;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0 0.75rem;
}

.settings-nav-item {
  background: none;
  border: none;
  text-align: left;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
}

.settings-nav-item:hover { background: var(--bg-elevated); color: var(--text); }
.settings-nav-item.active { background: var(--bg-elevated); color: var(--text); font-weight: 500; }

.settings-content {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
  padding: 1.5rem 2rem;
}

.settings-section-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.settings-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.settings-section-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── Builds overlay ───────────────────────────────────────────────────────── */
.builds-overlay {
  position: fixed;
  top: calc(56px + env(safe-area-inset-top));
  right: 1rem;
  width: 300px;
  max-height: 520px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.builds-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.builds-overlay-title {
  font-weight: 600;
  font-size: 0.875rem;
}
.builds-overlay-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.builds-overlay-body {
  padding: 0.75rem 1rem 0;
}
.builds-overlay-history-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border-soft);
}
.builds-overlay-history {
  padding: 0 1rem 0.75rem;
}
.sidebar-count {
  font-size: 0.68rem;
  color: var(--text-dim);
}
.sidebar-build-item + .sidebar-build-item {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}
.sidebar-build-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.build-partial-label {
  font-weight: 400;
  color: var(--text-muted);
}
.sidebar-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
}
.step-pending  .step-label { color: var(--text-dim); }
.step-running  .step-label { color: var(--text); font-weight: 500; }
.step-done     .step-label { color: var(--ok); }
.step-error    .step-label { color: var(--error); }

/* Step dot indicators */
.step-dot {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  border-radius: 50%;
  transition: none !important;
}
.step-dot-pending {
  border: 1.5px solid var(--border);
  background: transparent;
}
.step-dot-running {
  border: 2px solid var(--bg-elevated);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}
.step-dot-done,
.step-dot-error {
  /* SVG handles rendering — no extra styles needed */
}

.sidebar-idle {
  font-size: 0.72rem;
  color: var(--text-dim);
  padding: 0.25rem 0;
  font-style: italic;
}
.sidebar-idle-history {
  margin-top: 0.25rem;
}

.sidebar-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-top: 1.1rem;
  margin-bottom: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-soft);
}

.sidebar-history-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
}
.sidebar-history-item + .sidebar-history-item {
  border-top: 1px solid var(--border-soft);
}

.hist-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.sidebar-history-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sidebar-history-name {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-history-time {
  font-size: 0.66rem;
  color: var(--text-dim);
}

.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 4rem 2rem;
  color: var(--text-muted);
  text-align: center;
}
.empty-state svg { opacity: 0.2; margin-bottom: 0.5rem; }
.empty-state strong { color: var(--text); }

/* ── Profile Card ─────────────────────────────────────────────────────────── */
.profile-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem 0.6rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s,
              padding 0.25s ease, gap 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  box-shadow: var(--card-shadow);
}
.profile-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--card-hover-shadow);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.card-field {
  margin-top: 0.5rem;
}
.card-field-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.15rem;
}
.card-aliases {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.card-preview {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-preview-status {
  margin-top: 0.5rem;
  font-style: italic;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.68rem;
  color: var(--text-dim);
}
.card-timestamps {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}

.monitor-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--info);
  font-size: 0.7rem;
}
.monitor-badge svg { flex-shrink: 0; }

/* ── Category Badge ───────────────────────────────────────────────────────── */
.category-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-apt        { background: var(--apt-bg);        color: var(--apt); }
.badge-ransomware { background: var(--ransomware-bg); color: var(--ransomware); }
.badge-other      { background: var(--other-bg);      color: var(--accent); }
.category-badge-secondary { }

/* ── Secondary category controls ─────────────────────────────────────────── */
.secondary-cat-dropdown,
.cat-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.secondary-cat-add-btn {
  background: rgba(139,148,158,0.08);
  border: 1px solid rgba(139,148,158,0.3);
  color: var(--fg-muted);
  border-radius: var(--radius-sm);
  padding: 0;
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.1em;
}
.secondary-cat-add-btn:hover { background: rgba(139,148,158,0.18); }

.secondary-cat-clear-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 0.1rem;
  cursor: pointer;
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
}
.secondary-cat-clear-btn:hover { opacity: 1; color: var(--error); }

.secondary-cat-panel {
  min-width: 160px;
  max-height: 220px;
  top: calc(100% + 4px);
  left: 0;
}
.secondary-cat-item {
  padding: 0.42rem 0.75rem;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.secondary-cat-item:hover { background: var(--bg-elevated); }
.secondary-cat-item.selected { color: var(--accent); font-weight: 600; }

.secondary-cat-remove-wrap {
  display: inline-flex;
  align-items: center;
}
.secondary-cat-remove-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  border: none;
  white-space: nowrap;
  background: rgba(248,81,73,0.1);
  color: var(--error);
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  font-weight: 400;
  cursor: pointer;
  font-family: inherit;
  vertical-align: middle;
  transition: max-width 0.2s ease, opacity 0.2s ease, padding 0.2s ease, margin 0.2s ease;
}
.secondary-cat-remove-wrap.active .secondary-cat-remove-btn {
  max-width: 120px;
  opacity: 1;
  padding: 2px 8px;
  margin-left: 0.3rem;
  outline: 1px solid rgba(248,81,73,0.4);
}
.secondary-cat-remove-btn:hover { background: rgba(248,81,73,0.2); }

/* ── Country Tag ──────────────────────────────────────────────────────────── */
.card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}
.country-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}
.country-unknown {
  font-style: italic;
  opacity: 0.6;
}
.confidence-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.confidence-dot.confidence-high   { background: var(--ok); }
.confidence-dot.confidence-medium { background: var(--warn); }
.confidence-dot.confidence-low    { background: var(--error); opacity: 0.7; }
.confidence-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 10px;
}
.confidence-badge.confidence-high   { background: rgba(63,185,80,0.15); color: var(--ok);   border: 1px solid rgba(63,185,80,0.3); }
.confidence-badge.confidence-medium { background: rgba(210,153,34,0.15); color: var(--warn); border: 1px solid rgba(210,153,34,0.3); }
.confidence-badge.confidence-low    { background: rgba(248,81,73,0.12);  color: var(--error); border: 1px solid rgba(248,81,73,0.25); }
#view-country-display {
  display: inline-flex;
}
#view-country-display:has(.confidence-badge) {
  padding-right: 2px;
}
#view-country-display .confidence-badge {
  margin-left: 0.3rem;
  align-self: stretch;
  display: flex;
  align-items: center;
  border-radius: 18px;
  padding-left: 6px;
  padding-right: 6px;
}

.country-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.country-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-xs {
  padding: 1px 5px;
  font-size: 0.8rem;
  line-height: 1.4;
}
.form-input-sm {
  padding: 2px 8px;
  font-size: 0.8rem;
  width: 160px;
}

/* ── Status Dot ───────────────────────────────────────────────────────────── */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.status-dot.pending  { background: var(--text-dim); }
.status-dot.building { background: var(--info);  animation: pulse 1.4s ease-in-out infinite; }
.status-dot.ready    { background: var(--ok); }
.status-dot.error    { background: var(--error); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.12s;
  white-space: nowrap;
  background: transparent;
  color: var(--text);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary   { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: #3b82f6; border-color: #3b82f6; }
#btn-add { border-radius: var(--radius); }
.profile-add-btn { margin-left: auto; }
.btn-secondary { background: var(--bg-elevated); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-elevated-hover); }
.btn-danger    { background: rgba(248, 81, 73, 0.1); border-color: var(--error); color: var(--error); }
.btn-danger:hover:not(:disabled) { background: rgba(248, 81, 73, 0.2); }
.btn-icon      { background: transparent; border: none; color: var(--text-muted); font-size: 1rem; padding: 0.3rem; }
.btn-icon:hover { color: var(--text); }

/* ── Form elements ────────────────────────────────────────────────────────── */
.search-input, .form-input, .form-select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
  padding: 0.4rem 0.7rem;
  outline: none;
  width: 100%;
}
.search-input { flex: 1; }
.search-input:focus, .form-input:focus, .form-select:focus { border-color: var(--accent); }
.form-select { cursor: pointer; }
.form-select-sm { width: auto; font-size: 0.78rem; padding: 0.25rem 0.5rem; }

.form-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.form-label .required { color: var(--error); }
.form-label .hint { color: var(--text-dim); font-size: 0.75rem; font-style: italic; }

.form-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.toggle-label { font-size: 0.82rem; color: var(--text-muted); }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 38px; height: 20px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 2px; top: 2px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.15s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); border-color: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); background: #000; }

/* ── Modals ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transition: background 0.25s ease, backdrop-filter 0.25s ease;
}
.modal-overlay.modal-visible { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); }
.modal-overlay.hidden { display: none; }
/* Modal card fades in independently so backdrop-filter doesn't block the tint transition */
.modal-overlay .modal {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.modal-overlay.modal-visible .modal { opacity: 1; }

.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.15s ease;
}
.modal-wide { max-width: 940px; height: 90vh; }

@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem 0.9rem;
  border-bottom: 1px solid var(--border-soft);
}
.modal-header h2 { font-size: 1rem; font-weight: 600; }

.modal-body {
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.modal-scroll { overflow-y: auto; flex: 1; min-height: 0; scrollbar-gutter: stable; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--border-soft);
}

/* View modal specifics */
.view-header-left { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 0; }
.view-title-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.view-title-row h2 { font-size: 1.1rem; }

/* ── Edit mode gating ─────────────────────────────────────────────────────── */
#modal-view:not(.modal--edit-mode) #btn-edit-profile-name,
#modal-view:not(.modal--edit-mode) #btn-primary-cat-edit,
#modal-view:not(.modal--edit-mode) #btn-primary-cat-clear,
#modal-view:not(.modal--edit-mode) #btn-secondary-cat-edit,
#modal-view:not(.modal--edit-mode) #btn-secondary-cat-clear,
#modal-view:not(.modal--edit-mode) #btn-country-edit,
#modal-view:not(.modal--edit-mode) .alias-add-btn,
#modal-view:not(.modal--edit-mode) .alias-remove-btn { display: none !important; }
.modal--edit-mode #view-category,
.modal--edit-mode #view-secondary-category { cursor: pointer; }

.profile-name-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 3px;
  display: flex;
  align-items: center;
  opacity: 0.6;
  flex-shrink: 0;
}
.profile-name-edit-btn:hover { opacity: 1; color: var(--text); }
.profile-name-edit-btn svg { width: 13px; height: 13px; display: block; }

.profile-name-edit-row { display: flex; align-items: center; gap: 0.4rem; }
.profile-name-edit-row .form-input-sm { min-width: 180px; }

.aliases-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ── View modal meta row (country + aliases) ──────────────────────────────── */
.view-meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.view-meta-row .country-row { margin-top: 0; }

/* Compact: country and aliases on one line */
.view-meta-row.compact {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.view-meta-row.compact .country-row { flex: 0 0 auto; flex-wrap: nowrap; }
.view-meta-row.compact .aliases-row {
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent 100%);
}
.view-meta-row.compact .aliases-row .alias-tag,
.view-meta-row.compact .aliases-row .alias-tag-custom { white-space: nowrap; flex-shrink: 0; }
.view-meta-row.compact #view-aliases .alias-add-btn,
.view-meta-row.compact #view-aliases .alias-inline-input-wrap { display: none; }
.alias-tag {
  background: rgba(56,139,253,0.08);
  border: 1px solid rgba(56,139,253,0.25);
  border-radius: 3px;
  padding: 1px 7px;
  font-size: 0.72rem;
  color: var(--info);
  font-family: ui-monospace, 'Cascadia Code', monospace;
  display: inline-flex;
  align-items: center;
}
.alias-tag-discovered {
  /* same as base — keep class for semantic clarity */
}
.alias-tag-custom {
  background: rgba(63,185,80,0.08);
  border-color: rgba(63,185,80,0.3);
  color: var(--ok);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.alias-remove-btn {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
  font-size: 0.65rem;
  line-height: 1;
}
.alias-remove-btn:hover { opacity: 1; }

.alias-add-btn {
  background: rgba(63,185,80,0.08);
  border: 1px solid rgba(63,185,80,0.3);
  color: var(--ok);
  border-radius: var(--radius-sm);
  padding: 0;
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.1em;
}
.alias-add-btn:hover { background: rgba(63,185,80,0.18); }

.alias-inline-input-wrap {
  padding: 1px 7px;
  min-height: 1.4rem;
}
.alias-inline-input {
  background: none;
  border: none;
  outline: none;
  color: var(--ok);
  font-size: 0.72rem;
  font-family: ui-monospace, 'Cascadia Code', monospace;
  width: 220px;
  padding: 0;
  height: 1em;
  line-height: 1;
  display: block;
}

@media (max-width: 768px) {
  .alias-inline-input-wrap {
    width: 70%;
    min-height: 31px;
    padding: 0 0.75rem;
    border-radius: var(--radius-sm);
  }
  .alias-inline-input {
    font-size: 16px;
    transform: none;
    width: 100%;
    height: 100%;
    line-height: 1.4;
  }
}

/* Known aliases block in profile cards (directly under card-badges) */
.card-aliases-block {
  margin-top: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Alias chips inside profile cards */
.card-aliases { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.alias-chip {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: ui-monospace, 'Cascadia Code', monospace;
  white-space: nowrap;
}
.alias-chip-overflow {
  border-style: dashed;
  color: var(--text-dim);
}

/* ── Compact card view ────────────────────────────────────────────────────── */

/* Base transition setup — scoped to profile cards so these don't bleed elsewhere */
.profile-card .card-field-recent {
  overflow: hidden;
  max-height: 12rem;
  opacity: 1;
  transition: max-height 0.28s ease, opacity 0.22s ease, margin-top 0.25s ease;
}
.profile-card .card-field-label {
  overflow: hidden;
  max-height: 2rem;
  opacity: 1;
  transition: max-height 0.22s ease, opacity 0.18s ease, margin-bottom 0.2s ease;
}
.profile-card .card-timestamps {
  overflow: hidden;
  max-height: 2rem;
  opacity: 1;
  transition: max-height 0.22s ease, opacity 0.18s ease;
}
.profile-card .card-footer {
  overflow: hidden;
  max-height: 2rem;
  transition: max-height 0.22s ease, margin-top 0.25s ease, padding-top 0.25s ease, opacity 0.2s ease;
}
.profile-card .card-aliases-block {
  transition: max-height 0.28s ease, opacity 0.22s ease, margin-top 0.25s ease;
}
.profile-card .card-field {
  overflow: hidden;
  max-height: 12rem;
  opacity: 1;
  transition: max-height 0.28s ease, opacity 0.22s ease, margin-top 0.25s ease, margin-bottom 0.25s ease;
}
.profile-card .card-badges {
  transition: margin-bottom 0.22s ease;
}

/* Compact mode overrides */
#profile-grid.compact-view .profile-card {
  padding: 0.65rem 0.9rem;
  gap: 0.2rem;
}
#profile-grid.compact-view .card-badges {
  margin-bottom: 0.1rem;
}
#profile-grid.compact-view .card-field-label {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
}
#profile-grid.compact-view .card-aliases-block {
  margin-top: 0.15rem;
}
#profile-grid.compact-view .card-field {
  margin-top: 0.2rem;
}
#profile-grid.compact-view .card-field-recent {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}
#profile-grid.compact-view .card-timestamps {
  max-height: 0;
  opacity: 0;
}
#profile-grid.compact-view .card-footer {
  margin-top: 0.2rem;
  padding-top: 0;
  border-top-color: transparent;
}
#profile-grid.compact-view .card-preview {
  -webkit-line-clamp: 4;
}

/* ── Mobile very compact: name + category badges + attribution only ─────── */
/* ── Desktop compact view (medium / very) ─────────────────────────────────── */
#btn-desktop-compact[data-level="1"],
#btn-desktop-compact[data-level="2"] {
  color: var(--accent);
  background: var(--accent-dim);
}

/* Gap set to 0 so that zero-height collapsed items don't contribute phantom
   gap space at the bottom of the card. Visible items use explicit margin-top. */
#profile-grid.compact-medium .profile-card {
  padding: 0.65rem 1.15rem 0.65rem;
  gap: 0;
}
#profile-grid.compact-very .profile-card {
  padding: 0.65rem 1.15rem 0.65rem;
  gap: 0;
}
#profile-grid.compact-medium .card-badges,
#profile-grid.compact-very .card-badges {
  margin-top: 0.2rem;   /* replaces the gap between card-header and badges */
  margin-bottom: 0;
}
#profile-grid.compact-medium .card-field-label,
#profile-grid.compact-very .card-field-label {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
}
/* Shared: tighten top margin */
#profile-grid.compact-medium .card-aliases-block,
#profile-grid.compact-very .card-aliases-block {
  margin-top: 0.35rem;  /* replaces gap(0.2) + original margin(0.15) */
}
/* Medium compact: single-line aliases with tight max-height for smooth animation */
#profile-grid.compact-medium .card-aliases-block {
  overflow: hidden;
  max-height: 1.8rem;
}
#profile-grid.compact-medium .card-aliases {
  flex-wrap: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, black 75%, transparent 100%);
  mask-image: linear-gradient(to right, black 75%, transparent 100%);
}
/* Very compact: collapse aliases entirely */
#profile-grid.compact-very .card-aliases-block {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}
#profile-grid.compact-medium .card-field-recent,
#profile-grid.compact-very .card-field-recent {
  display: none;
}
#profile-grid.compact-medium .card-timestamps,
#profile-grid.compact-very .card-timestamps {
  max-height: 0;
  opacity: 0;
}
#profile-grid.compact-medium .card-footer,
#profile-grid.compact-very .card-footer {
  display: none;
}
/* Medium compact: overview visible, clamped to 4 lines.
   margin-bottom provides the card's bottom spacing (card padding-bottom is 0).
   max-height tightly sized to actual content so medium→very animates smoothly. */
#profile-grid.compact-medium .card-field {
  margin-top: 0.4rem;   /* replaces gap(0.2) + original margin(0.2) */
  margin-bottom: 0;
  max-height: 4.85rem;  /* 4 lines × 1.5 line-height × 0.8rem font-size + tiny buffer */
}
#profile-grid.compact-medium .card-preview {
  -webkit-line-clamp: 4;
}
/* Very compact: same as medium but collapse overview */
#profile-grid.compact-very .card-field {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.view-footer {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.view-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.refresh-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Refresh dropdown */
.refresh-dropdown { position: relative; }
.refresh-dropdown .filter-dropdown-panel { top: auto; bottom: calc(100% + 4px); right: 0; left: auto; min-width: 180px; }
.refresh-dropdown #refresh-dropdown-trigger:disabled { opacity: 0.5; cursor: not-allowed; }

/* Profile content */
.profile-section { display: flex; flex-direction: column; gap: 0.5rem; }
.profile-section h3 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
}
.profile-text { font-size: 0.85rem; line-height: 1.7; color: var(--text); }
.profile-text p + p { margin-top: 0.75rem; }
.profile-text .placeholder { color: var(--text-muted); font-style: italic; }

/* Collapsible references */
.inline-refs { border: none; margin-top: 0.5rem; }
.inline-refs summary.refs-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.inline-refs summary.refs-summary::after {
  content: '▸';
  font-size: 0.6rem;
  opacity: 0.6;
  transition: transform 0.15s;
}
.inline-refs[open] summary.refs-summary::after {
  transform: rotate(90deg);
}
.inline-refs summary.refs-summary::-webkit-details-marker { display: none; }

.references-list {
  list-style: decimal;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
.references-list a { color: var(--info); text-decoration: none; word-break: break-all; }
.references-list a:hover { text-decoration: underline; }

.last-updated { font-size: 0.72rem; color: var(--text-dim); }

.building-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(56, 139, 253, 0.1);
  border: 1px solid rgba(56, 139, 253, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font-size: 0.82rem;
  color: var(--info);
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(56, 139, 253, 0.3);
  border-top-color: var(--info);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Category View ────────────────────────────────────────────────────────── */
.cat-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0 0.75rem;
  font-size: 0.85rem;
}
.cat-breadcrumb-name {
  font-weight: 600;
  color: var(--text);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
}

.category-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 4px solid transparent;
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: box-shadow 0.15s;
  box-shadow: var(--card-shadow);
}
.category-card:hover { box-shadow: var(--card-shadow), 0 0 0 1px var(--border); }

.cat-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.cat-card-name {
  font-size: 1rem;
  font-weight: 600;
  flex: 1;
  line-height: 1.3;
}

.cat-edit-btn {
  flex-shrink: 0;
  font-size: 0.85rem;
  margin-top: 0.05rem;
}

.cat-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.cat-card-count {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.btn-sm {
  font-size: 0.76rem;
  padding: 0.25rem 0.6rem;
}

.cat-view-btn {
  font-size: 0.78rem;
  color: var(--info);
  background: rgba(56,139,253,0.08);
  border: 1px solid rgba(56,139,253,0.25);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  white-space: nowrap;
}
.cat-view-btn:hover { background: rgba(56,139,253,0.16); }

/* Inline edit form inside category card */
.cat-edit-form {
  border-top: 1px solid var(--border-soft);
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cat-edit-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cat-edit-row label {
  font-size: 0.75rem;
  color: var(--text-muted);
  width: 44px;
  flex-shrink: 0;
}

.cat-name-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  outline: none;
}
.cat-name-input:focus { border-color: var(--accent); }

/* ── Category colour picker ───────────────────────────────────────────────── */
.cat-color-picker {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cp-gradient {
  width: 100%;
  height: 120px;
  border-radius: var(--radius-sm);
  position: relative;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
  background:
    linear-gradient(to bottom, transparent, #000),
    linear-gradient(to right, #fff, transparent),
    hsl(var(--cp-hue, 0), 100%, 50%);
}

.cp-cursor {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cp-hue-track {
  width: 100%;
  height: 12px;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.cp-hue-thumb {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cp-hex-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cp-swatch {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.cp-hex-input {
  width: 80px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.8rem;
  font-family: monospace;
  padding: 0.25rem 0.4rem;
  outline: none;
}
.cp-hex-input:focus { border-color: var(--accent); }

.cat-edit-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}


/* ── APAC Victims View ────────────────────────────────────────────────────── */

.victims-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.8rem 1.5rem 0.4rem;
  background: var(--bg);
}

.victims-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  background: var(--bg);
  overflow: hidden;
  max-height: 0;
  padding: 0 1.5rem;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
}
.victims-active-filters.has-chips {
  max-height: 200px;
  padding: 0 1.5rem 0.55rem;
  opacity: 1;
}

.victims-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.35rem 0.18rem 0.6rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid;
  cursor: pointer;
  user-select: none;
  animation: chip-appear 0.2s ease-out both;
}
@keyframes chip-appear {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Actor chips — purple */
.active-filter-chip--actor {
  background: rgba(139, 92, 246, 0.12);
  border-color: #8b5cf6;
  color: #8b5cf6;
}
.active-filter-chip--actor .active-filter-chip-remove { color: #8b5cf6; }

/* Category chips — green */
.active-filter-chip--category {
  background: rgba(63, 185, 80, 0.12);
  border-color: var(--ok);
  color: var(--ok);
}
.active-filter-chip--category .active-filter-chip-remove { color: var(--ok); }

/* Country chips — green (APAC victims) */
.active-filter-chip--country {
  background: rgba(63, 185, 80, 0.12);
  border-color: var(--ok);
  color: var(--ok);
}

.active-filter-chip--country .active-filter-chip-remove { color: var(--ok); }
.active-filter-chip--country .active-filter-chip-remove:hover { color: var(--ok); }

/* Country chips — orange (Profiles homepage) */
.active-filter-chip--profile-country {
  background: rgba(249, 115, 22, 0.12);
  border-color: #f97316;
  color: #f97316;
}
.active-filter-chip--profile-country .active-filter-chip-remove { color: #f97316; }
.active-filter-chip--profile-country .active-filter-chip-remove:hover { color: #f97316; }

/* Group chips — purple */
.active-filter-chip--group {
  background: rgba(139, 92, 246, 0.12);
  border-color: #8b5cf6;
  color: #8b5cf6;
}

.active-filter-chip--group .active-filter-chip-remove { color: #8b5cf6; }
.active-filter-chip--group .active-filter-chip-remove:hover { color: #8b5cf6; }

.active-filter-chip-remove {
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.7;
}

.btn-clear-all-filters {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.65rem;
  background: transparent;
  color: var(--error);
  border: 1px solid var(--error);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.8;
}

.btn-clear-all-filters:hover { opacity: 1; background: var(--error); color: #fff; }

/* ── Filter dropdown ─────────────────────────────────────────────────────── */
.filter-dropdown {
  position: relative;
}

.victim-search-pill {
  height: 1.9rem;
  padding: 0 0.7rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 500;
  font-family: inherit;
  outline: none;
  width: 160px;
  transition: border-color 0.2s ease, width 0.2s ease;
}
.victim-search-pill::placeholder { color: var(--text-muted); }
.victim-search-pill:focus {
  border-color: var(--accent);
  width: 220px;
}

.filter-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.7rem;
  height: 1.9rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) {
  .filter-dropdown-trigger:hover {
    border-color: var(--accent);
    color: var(--text);
  }
  [data-filter-id="group"] .filter-dropdown-trigger:hover { border-color: #8b5cf6; }
  [data-filter-id="actor"] .filter-dropdown-trigger:hover { border-color: #8b5cf6; }
  [data-filter-id="category"] .filter-dropdown-trigger:hover { border-color: var(--ok); }
  [data-filter-id="country"] .filter-dropdown-trigger:hover { border-color: var(--ok); }
  [data-filter-id="profile-country"] .filter-dropdown-trigger:hover { border-color: #f97316; }
}
.filter-dropdown-trigger.open,
.filter-dropdown-trigger.has-selection {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 0;
  height: 17px;
  padding: 0;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.25s ease, min-width 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
}
.filter-count-badge.visible {
  min-width: 17px;
  max-width: 30px;
  padding: 0 4px;
  opacity: 1;
}

.filter-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.15s;
}
.filter-dropdown-trigger.open .filter-chevron {
  transform: rotate(180deg);
}

.filter-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
  min-width: 210px;
  max-height: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.filter-panel-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.filter-panel-search input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.78rem;
  padding: 0.28rem 0.5rem;
  outline: none;
}
.filter-panel-search input:focus {
  border-color: var(--accent);
}
.filter-item.hidden { display: none; }

.filter-clear-btn {
  flex-shrink: 0;
  font-size: 0.71rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.filter-clear-btn:hover:not(:disabled) { color: var(--error); }
.filter-clear-btn:disabled { opacity: 0.35; cursor: default; text-decoration: none; }

.filter-panel-items {
  overflow-y: auto;
  padding: 0.3rem 0;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.75rem;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text);
  user-select: none;
}
.filter-item:hover { background: var(--bg-elevated); }
.filter-item:hover .filter-item-check { border-color: var(--accent); }
[data-filter-id="group"] .filter-item:hover .filter-item-check { border-color: var(--ok); }
[data-filter-id="actor"] .filter-item:hover .filter-item-check { border-color: #8b5cf6; }
[data-filter-id="category"] .filter-item:hover .filter-item-check { border-color: var(--ok); }
[data-filter-id="country"] .filter-item:hover .filter-item-check { border-color: #8b5cf6; }
[data-filter-id="profile-country"] .filter-item:hover .filter-item-check { border-color: #f97316; }
.filter-item.selected { color: var(--accent); }
[data-filter-id="group"] .filter-item.selected { color: #8b5cf6; }
[data-filter-id="group"] .filter-item.selected .filter-item-check { background: #8b5cf6; border-color: #8b5cf6; }
[data-filter-id="group"] .filter-dropdown-trigger.has-selection,
[data-filter-id="group"] .filter-dropdown-trigger.open { border-color: #8b5cf6; background: rgba(139,92,246,0.1); color: #8b5cf6; }
[data-filter-id="group"] .filter-count-badge { background: #8b5cf6; }

[data-filter-id="actor"] .filter-item.selected { color: #8b5cf6; }
[data-filter-id="actor"] .filter-item.selected .filter-item-check { background: #8b5cf6; border-color: #8b5cf6; }
[data-filter-id="actor"] .filter-dropdown-trigger.has-selection,
[data-filter-id="actor"] .filter-dropdown-trigger.open { border-color: #8b5cf6; background: rgba(139,92,246,0.1); color: #8b5cf6; }
[data-filter-id="actor"] .filter-count-badge { background: #8b5cf6; }

[data-filter-id="category"] .filter-item.selected { color: var(--ok); }
[data-filter-id="category"] .filter-item.selected .filter-item-check { background: var(--ok); border-color: var(--ok); }
[data-filter-id="category"] .filter-dropdown-trigger.has-selection,
[data-filter-id="category"] .filter-dropdown-trigger.open { border-color: var(--ok); background: rgba(63,185,80,0.1); color: var(--ok); }
[data-filter-id="category"] .filter-count-badge { background: var(--ok); }

[data-filter-id="country"] .filter-item.selected { color: var(--ok); }
[data-filter-id="country"] .filter-item.selected .filter-item-check { background: var(--ok); border-color: var(--ok); }
[data-filter-id="country"] .filter-dropdown-trigger.has-selection,
[data-filter-id="country"] .filter-dropdown-trigger.open { border-color: var(--ok); background: rgba(63,185,80,0.1); color: var(--ok); }
[data-filter-id="country"] .filter-count-badge { background: var(--ok); }

[data-filter-id="profile-country"] .filter-item.selected { color: #f97316; }
[data-filter-id="profile-country"] .filter-item.selected .filter-item-check { background: #f97316; border-color: #f97316; }
[data-filter-id="profile-country"] .filter-dropdown-trigger.has-selection,
[data-filter-id="profile-country"] .filter-dropdown-trigger.open { border-color: #f97316; background: rgba(249,115,22,0.1); color: #f97316; }
[data-filter-id="profile-country"] .filter-count-badge { background: #f97316; }

.filter-item-check {
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.filter-item-check svg {
  width: 9px;
  height: 9px;
  opacity: 0;
  color: #fff;
  transition: opacity 0.1s;
}
.filter-item.selected .filter-item-check {
  background: var(--accent);
  border-color: var(--accent);
}
.filter-item.selected .filter-item-check svg { opacity: 1; }

.filter-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.victims-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-export-csv {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.btn-export-csv:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-dim);
}
.btn-smart-export {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.btn-smart-export:hover { background: var(--accent); color: #fff; }

.sort-dropdown { position: relative; }
.sort-dropdown .filter-dropdown-panel { left: auto; right: 0; min-width: 130px; }
#chart-dimension-wrap .filter-dropdown-panel,
#profile-sort-field-dropdown .filter-dropdown-panel,
#victims-datefilter .filter-dropdown-panel,
#sort-field-dropdown .filter-dropdown-panel { left: 0; right: auto; }

/* ── Floating pagination group ────────────────────────────────────────────── */
.pg-float-group {
  position: fixed;
  bottom: 28px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none; /* children opt back in */
  opacity: 1;
  transition: opacity 0.25s ease;
}
.pg-float-group.faded {
  opacity: 0;
  pointer-events: none;
}

/* Shared pill style */
.victims-pagination,
.victims-perpage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 10px;

  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 40px;
  pointer-events: auto;

  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.07),
    0 10px 28px rgba(0, 0, 0, 0.13),
    0 2px 4px rgba(0, 0, 0, 0.05);
}
body:not(.light) .victims-pagination,
body:not(.light) .victims-perpage {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.3),
    0 10px 32px rgba(0, 0, 0, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

.victims-pagination {
  transition: width 0.2s ease;
  overflow: hidden;
  max-width: calc(100vw - 2rem);
}
.victims-pagination.hidden,
.victims-perpage.hidden {
  display: none;
}

/* Per-page switcher */
.victims-perpage { gap: 2px; }

.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pp-btn:hover:not(.active) {
  background: var(--bg);
  color: var(--text);
}
.pp-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: default;
}

.victims-perpage-select-wrap {
  position: relative;
  height: 54px;
  padding: 0 14px;
  border-radius: 27px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  pointer-events: auto;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.07),
    0 10px 28px rgba(0, 0, 0, 0.13),
    0 2px 4px rgba(0, 0, 0, 0.05);
}
.victims-perpage-select-wrap.hidden { display: none; }
body:not(.light) .victims-perpage-select-wrap {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.3),
    0 10px 32px rgba(0, 0, 0, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.2);
}
.pp-select-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  pointer-events: none;
}
.pp-select-chevron {
  width: 10px;
  height: 6px;
  color: var(--text-muted);
  pointer-events: none;
}
.victims-perpage-select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
}

/* Extra bottom padding so cards don't hide behind the bar */
.victim-grid { padding-bottom: 80px; }

.pg-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  padding-bottom: 2px;
  margin-right: -1px;
}
.pg-next {
  margin-right: 0;
  margin-left: -2px;
}
.pg-arrow:hover:not(:disabled) {
  background: var(--accent-dim);
  color: var(--accent);
}
.pg-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.pg-nums {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Every slot — number or ellipsis — is the same fixed width */
.pg-num,
.pg-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  flex-shrink: 0;
}

.pg-num {
  border: none;
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pg-num:hover {
  background: var(--bg);
  color: var(--text);
}
.pg-num.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: default;
}

.pg-ellipsis {
  color: var(--text-muted);
  font-size: 0.8rem;
  user-select: none;
  pointer-events: none;
}

.sort-option {
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.sort-option:hover { background: var(--bg-elevated); }
.sort-option.selected { color: var(--accent); font-weight: 500; }

.victim-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1.5rem 1.25rem;
  transition: opacity 0.15s ease;
}

.victim-grid.is-filtering {
  opacity: 0;
  pointer-events: none;
}

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

.victim-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.victim-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.victim-year-heading {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}

.victim-month-heading {
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.victim-grid.was-filtering .victim-card {
  animation: victimCardEnter 0.22s ease forwards;
}
.victim-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s ease;
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: auto 130px;
}
.victim-card:hover {
  border-color: var(--accent);
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-1px);
}

.victim-card-header {
  display: flex;
  align-items: center;
  position: relative;
}

.victim-org-name {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 2px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.victim-source-badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  opacity: 0.55;
  flex-shrink: 0;
}
.victim-source-rlv {
  background: rgba(56, 139, 253, 0.12);
  color: #388bfd;
  border: 1px solid rgba(56, 139, 253, 0.25);
}
.victim-source-rfd {
  background: rgba(240, 136, 62, 0.12);
  color: #f0883e;
  border: 1px solid rgba(240, 136, 62, 0.25);
}
.victim-source-rlk {
  background: rgba(63, 185, 80, 0.12);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.25);
}

.victim-group-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(137, 87, 229, 0.15);
  color: #8957e5;
  border: 1px solid rgba(137, 87, 229, 0.35);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
  cursor: pointer;
}
.victim-group-badge--active,
.victim-card--group-view .victim-card-header .victim-group-badge {
  background: rgba(137, 87, 229, 0.28);
  border-color: rgba(137, 87, 229, 0.6);
}
.victim-group-badge--active:hover {
  background: rgba(137, 87, 229, 0.28);
  border-color: rgba(137, 87, 229, 0.6);
}
.victim-group-badge:hover {
  background: rgba(137, 87, 229, 0.28);
  border-color: rgba(137, 87, 229, 0.6);
}

.victim-flag {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.victim-flag-right {
  margin-left: auto;
}
.victim-country-name {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.victim-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.victim-meta div {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.victim-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

.victim-description {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.victim-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.victim-link {
  font-size: 0.76rem;
  color: var(--accent);
  text-decoration: none;
}
.victim-link:hover { text-decoration: underline; }
.victim-website-link { color: var(--text-muted); text-decoration: none; }
.victim-website-link:hover { text-decoration: underline; color: var(--text); }

/* ── KEV View ─────────────────────────────────────────────────────────────── */
.kev-stats-bar {
  display: flex;
  gap: 0.6rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}

.kev-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  min-width: 80px;
}
.kev-stat-pill:hover { border-color: var(--accent); color: var(--text); }
.kev-stat-pill.active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}
.kev-stat-count {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}
.kev-stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kev-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.6rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
}

.kev-filter-strip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.kev-filter-chip {
  padding: 0.28rem 0.75rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}
.kev-filter-chip:hover { border-color: var(--accent); color: var(--text); }
.kev-filter-chip.active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

.kev-search-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.82rem;
  padding: 0.3rem 0.7rem;
  width: 220px;
  max-width: 100%;
  outline: none;
}
.kev-search-input:focus { border-color: var(--accent); }
.kev-search-input::placeholder { color: var(--text-dim); }

.kev-table-wrap {
  overflow-x: auto;
  padding: 0 1.5rem 1.5rem;
}

.kev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.kev-table th {
  text-align: left;
  padding: 0.55rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.kev-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}

.kev-table tr[data-cve] {
  cursor: pointer;
}
.kev-table tr[data-cve]:hover { background: var(--bg-elevated); }

.kev-cve-id {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 0.8rem;
  color: var(--accent);
  white-space: nowrap;
}

.kev-due-overdue { color: var(--error); font-weight: 600; }
.kev-due-soon    { color: var(--warn);  font-weight: 600; }

.kev-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.03em;
  margin-right: 3px;
}
.kev-badge-ot {
  background: rgba(63, 185, 80, 0.12);
  color: var(--ok);
  border: 1px solid rgba(63, 185, 80, 0.3);
}
.kev-badge-ransomware {
  background: rgba(248, 81, 73, 0.12);
  color: var(--error);
  border: 1px solid rgba(248, 81, 73, 0.3);
}
.kev-no-flags { color: var(--text-dim); }

.kev-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 3rem 1rem;
  font-style: italic;
}

.kev-detail-row { background: var(--bg-surface); }
.kev-detail-cell { padding: 0 0.75rem 0.75rem !important; }
.kev-detail-body {
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.kev-detail-body strong { color: var(--text); }
.kev-nvd-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.78rem;
  margin-top: 0.25rem;
  align-self: flex-start;
}
.kev-nvd-link:hover { text-decoration: underline; }

/* ── Mobile-only elements: hidden on desktop ──────────────────────────────── */
#btn-hamburger    { display: none; }
#btn-compact-view { display: none; }
#mobile-menu      { display: none; }
#mobile-backdrop  { display: none; }

/* ── Mobile filter collapsible — desktop: transparent wrappers ────────────── */
.mobile-filter-toggle { display: none; }
.mobile-controls-topbar,
.mobile-filter-collapsible,
.mobile-filter-inner { display: contents; }

/* With display:contents the wrappers vanish and their children become direct
   flex children of .victims-controls. Assign explicit order so layout is:
   filters → date → custom-range → sort → search  |  export-csv → smart-export → add-btn */
.victims-filters    { order: 1; }
#victims-datefilter { order: 2; }
#chart-custom-range { order: 3; }
.victims-sort       { order: 4; }
.victim-search-pill { order: 5; }
#btn-export-csv     { order: 6; margin-left: auto; }
#btn-smart-export   { order: 7; }
.profile-add-btn    { order: 8; }

/* ── Desktop-only elements: hidden on mobile ──────────────────────────────── */
@media (max-width: 768px) {
  #btn-desktop-compact { display: none !important; }
}

/* ── Mobile / Tablet (≤768px) ─────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Prevent window-level scrolling so iOS Safari never enters compact-bar mode.
     Uses flexbox (not dvh units) so it works on all iOS versions.
     Each view fills the remaining space and scrolls its own content. */
  html { height: 100%; overflow: hidden; }
  body { height: 100%; overflow: hidden; display: flex; flex-direction: column; }
  .app-header { flex-shrink: 0; }
  #view-profiles, #view-victims, #view-news, #view-kev {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  /* Controls bars stay pinned at the top of each scrollable view */
  #profile-controls,
  #victims-controls,
  #news-controls,
  #kev-controls {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
  }

  /* Header: hide desktop nav + controls, show hamburger */
  .app-nav                        { display: none; }
  .header-controls                { display: none; }
  .header-icon-group .btn-theme-toggle,
  .header-icon-group #btn-builds,
  .header-icon-group #btn-settings { display: none; }
  #btn-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
  }

  /* Mobile backdrop */
  #mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  #mobile-backdrop.mobile-menu-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Mobile menu overlay */
  #mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 70%;
    z-index: 300;
    background: var(--bg-surface);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
    /* Extend into safe area so no gap shows behind home indicator */
    padding-bottom: env(safe-area-inset-bottom);
  }
  #mobile-menu.mobile-menu-open {
    transform: translateX(0);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
  }

  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 56px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  .mobile-menu-nav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .mobile-menu-nav .nav-tab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
    min-height: 48px;
    font-size: 0.95rem;
    border-radius: 0;
    background: transparent;
    text-align: left;
    justify-content: flex-start;
  }
  .mobile-menu-nav .nav-tab svg { flex-shrink: 0; color: var(--text-muted); }
  .mobile-menu-nav .nav-tab:hover  { background: var(--bg-elevated); }
  .mobile-menu-nav .nav-tab.active { background: var(--accent-dim); color: var(--accent); box-shadow: none; }
  .mobile-menu-nav .nav-tab.active svg { color: var(--accent); }

  /* Shared nav item style (theme + builds) */
  .mobile-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 1.25rem;
    min-height: 48px;
    font-size: 0.95rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
    cursor: pointer;
    text-align: left;
  }
  .mobile-nav-item:hover { background: var(--bg-elevated); }
  .mobile-nav-icon-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .mobile-nav-icon-label svg { flex-shrink: 0; color: var(--text-muted); }
  .mobile-nav-label { font-size: 0.95rem; }


  /* Builds collapsible */
  .mobile-builds-wrap { border-bottom: 1px solid var(--border-soft); }
  .mobile-builds-wrap .mobile-nav-item { border-bottom: none; }
  .mobile-builds-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.2s; }
  .mobile-builds-wrap.open .mobile-builds-chevron { transform: rotate(180deg); }
  .mobile-builds-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .mobile-builds-wrap.open .mobile-builds-content { max-height: 600px; }


  /* View modal footer: stack controls vertically */
  .view-footer { flex-direction: column; align-items: stretch; }
  .view-actions { flex-direction: column; align-items: stretch; }
  .refresh-controls { flex-direction: row; align-items: stretch; }
  .refresh-controls .filter-dropdown-trigger,
  .refresh-controls .btn {
    height: auto;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.9rem;
    flex: 1;
    justify-content: center;
  }
  .refresh-dropdown .filter-dropdown-panel { left: 0; right: auto; }

  /* Profile / Victims controls: mobile collapsible filter layout */
  .victims-controls { flex-direction: column; align-items: stretch; gap: 0; }
  #profile-controls,
  #victims-controls { padding: 0; }

  /* Top bar: always visible row with toggle, search, and add button */
  .mobile-controls-topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    flex-wrap: nowrap;
  }

  /* Filter toggle button — touch-friendly height */
  .mobile-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 2.75rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 0 0.65rem;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .mobile-filter-chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease;
  }
  .mobile-filter-toggle.open .mobile-filter-chevron {
    transform: rotate(180deg);
  }

  /* Collapsible container */
  .mobile-filter-collapsible {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.3s ease;
  }
  .mobile-filter-collapsible.open {
    grid-template-rows: 1fr;
  }

  /* Inner wrapper: must have min-height: 0 for the grid trick.
     No vertical padding here — it bleeds through the 0fr clip.
     Bottom spacing comes from the padding-bottom on the last child instead. */
  .mobile-filter-inner {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0.75rem;
  }
  .mobile-filter-inner > :last-child { margin-bottom: 0.6rem; }

  .victims-filters  { flex-wrap: wrap; }
  .victims-sort { justify-content: flex-start; flex-wrap: wrap; }
  .victims-sort .sort-dropdown .filter-dropdown-panel { left: 0; right: auto; }
  .profile-add-btn {
    margin-left: 0;
    flex-shrink: 0;
    height: 2.75rem;
    padding: 0 0.65rem;
    border-radius: 20px;
    font-size: 0;
    gap: 0;
    justify-content: center;
  }
  .profile-add-btn::before {
    content: '+ New';
    font-size: 0.78rem;
    color: #fff;
  }
  /* Search pill: flex-grow to fill topbar, touch-friendly height */
  .mobile-controls-topbar .victim-search-pill { flex: 1; min-width: 0; width: auto; height: 2.75rem; }
  .mobile-controls-topbar .victim-search-pill:focus { width: auto; }


  /* APAC Victims: hide chart and export buttons on mobile */
  #chart-toggle-bar, #chart-collapsible-outer { display: none; }
  #insights-toggle-bar, #insights-collapsible-outer { display: none; }
  #btn-export-csv, #btn-smart-export { display: none; }

  /* Source legend: badges only, hide label text */
  .victim-source-legend-btn { font-size: 0; gap: 0; padding: 2px 4px; }
  .victim-source-legend-btn .victim-source-badge { font-size: 0.6rem; }

  /* Pagination pills: larger touch targets */
  .pg-num, .pg-ellipsis { width: 40px; height: 40px; font-size: 0.9rem; }
  .pg-arrow { width: 40px; height: 40px; font-size: 1.4rem; padding-bottom: 0; margin: 0; }
  .pg-prev { margin: 0; }
  .pg-next { margin: 0; }
  .pp-btn { height: 40px; min-width: 52px; font-size: 0.9rem; }

  /* Strip all shadow/lift from cards on mobile */
  .profile-card,
  .profile-card:hover,
  .profile-card:active,
  .profile-card:focus { box-shadow: none; transform: none; }
  .profile-card:hover { border-color: var(--border); }
  /* Override global transition so box-shadow never animates on mobile */
  .profile-card { transition: border-color 0.15s; }
  /* Hide timestamp footer on mobile */
  .profile-card .card-footer { display: none; }

  /* Touch targets */
  .btn-icon,
  .btn-xs { min-height: 44px; min-width: 44px; padding: 0.5rem; }
  #btn-close-view { font-size: 1.95rem; min-height: 48px; min-width: 48px; -webkit-tap-highlight-color: transparent; }
  .filter-dropdown-trigger { min-height: 40px; }

  /* Stats bar — empty on mobile, collapse it */
  #stats-bar { display: none; }
  .stats-bar .search-input { max-width: 100%; }
  .profile-count-bar { padding: 0.5rem 1rem 0; }

  /* Compact-view toggle: show on mobile, push the right-hand cluster to the far right */
  #btn-compact-view {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
    margin-left: auto;
  }
  #btn-compact-view.active {
    color: var(--accent);
    background: var(--accent-dim);
  }

  /* Notification bell: sits alongside compact-view toggle (no longer needs auto margin) */
  #btn-notifications {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
  }

  /* Notification/builds overlays: full-width on tablet/phone */
  .notification-overlay,
  .builds-overlay { right: 0.75rem; left: 0.75rem; width: auto; }

  /* News: on mobile hide the panel/divider, list becomes full scrollable feed */
  .news-layout    { height: auto; }
  .news-list      { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-y: visible; }
  .news-divider   { display: none !important; }
  .news-panel     { display: none !important; }
  .news-controls  { flex-wrap: wrap; gap: 0.5rem; }

  /* Mobile reader sheet: visible only on mobile */
  .mobile-reader-backdrop { display: block; }

  /* KEV: stack filter strip + search */
  .kev-controls { flex-direction: column; align-items: stretch; }
  .kev-search-input { width: 100%; }
}

/* ── Phone (≤480px) ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-wide {
    height: 95dvh;
    max-height: 100dvh;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .profile-grid { padding: 0.75rem; gap: 0.75rem; }
  .victim-grid  { padding: 0.75rem; gap: 0.75rem; }
  .notification-overlay,
  .builds-overlay { right: 0.5rem; left: 0.5rem; width: auto; }

  /* Add-profile modal: pinned to top */
  #modal-add { align-items: flex-start; padding: 1rem; padding-top: max(1rem, env(safe-area-inset-top)); }
  #modal-add .modal { border-radius: var(--radius); }
  #modal-add .modal-header { align-items: center; }
  /* Prevent iOS zoom on input focus */
  #new-name { font-size: 16px; }
  /* Match X button size to the profile view close button */
  #btn-cancel-add { font-size: 1.95rem; min-height: 48px; min-width: 48px; -webkit-tap-highlight-color: transparent; }
  /* Touch-friendly footer buttons */
  #modal-add .modal-footer { gap: 0.75rem; }
  #modal-add .modal-footer .btn { flex: 1; height: 2.75rem; font-size: 0.95rem; justify-content: center; }
}

/* ── Mobile very compact view (scoped to mobile so iPad/desktop unaffected) ── */
@media (max-width: 768px) {
  #profile-grid.compact-view-very {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  #profile-grid.compact-view-very .profile-card {
    padding: 0.55rem 0.5rem;
    gap: 0;
    min-width: 0;
  }
  #profile-grid.compact-view-very .card-name {
    white-space: nowrap;
    overflow: hidden;
  }
  #profile-grid.compact-view-very .card-name.name-overflows {
    -webkit-mask-image: linear-gradient(to right, black 78%, transparent 100%);
    mask-image: linear-gradient(to right, black 78%, transparent 100%);
  }
  #profile-grid.compact-view-very .card-badges {
    margin-top: 0.25rem;
    margin-bottom: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
    min-width: 0;
  }
  #profile-grid.compact-view-very .card-badges.badges-overflows {
    -webkit-mask-image: linear-gradient(to right, black 78%, transparent 100%);
    mask-image: linear-gradient(to right, black 78%, transparent 100%);
  }
  #profile-grid.compact-view-very .card-badges .category-badge {
    flex-shrink: 0;
    order: 0;
  }
  /* Zero-height line-break between category badges and country tag */
  #profile-grid.compact-view-very .card-badges::after {
    content: '';
    flex-basis: 100%;
    height: 0;
    order: 1;
  }
  #profile-grid.compact-view-very .card-badges .country-tag {
    order: 2;
    white-space: nowrap;
  }
  #profile-grid.compact-view-very .card-aliases-block {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
  }
  #profile-grid.compact-view-very .card-field,
  #profile-grid.compact-view-very .card-field-recent {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
  }
  #profile-grid.compact-view-very .card-timestamps {
    max-height: 0;
    opacity: 0;
  }
  #profile-grid.compact-view-very .card-footer {
    display: none;
  }
}

/* ── Touch devices: disable stuck hover shadow/lift on cards ─────────────── */
@media (hover: none) {
  .profile-card:hover {
    border-color: var(--border);
    transform: none;
    box-shadow: none;
  }
}

/* ── Very small phones (≤360px) ──────────────────────────────────────────── */
@media (max-width: 360px) {
  .profile-grid { grid-template-columns: 1fr; }
  .victim-grid  { grid-template-columns: 1fr; }
  .app-header   { padding: env(safe-area-inset-top) 0.75rem 0; gap: 0.5rem; }
}

/* ── Notification Bell ────────────────────────────────────────────────────── */
.notification-bell {
  position: relative;
  flex-shrink: 0;
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--error);
  color: #fff;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 3px;
  pointer-events: none;
}

/* ── Notification Overlay ─────────────────────────────────────────────────── */
.notification-overlay {
  position: fixed;
  top: calc(56px + env(safe-area-inset-top));
  right: 1rem;
  width: 380px;
  max-height: 480px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.notification-title {
  font-weight: 600;
  font-size: 0.875rem;
}

.notification-list {
  flex: 1;
  overflow-y: auto;
}

.notification-empty {
  padding: 1.5rem 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.notification-item {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.notification-item.unread {
  border-left: 3px solid var(--accent);
  background: var(--accent-dim);
}

.notification-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.notification-actor {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.notification-item-title {
  display: block;
  font-size: 0.82rem;
  color: var(--text);
  text-decoration: none;
  line-height: 1.4;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.notification-item-title:hover { color: var(--accent); text-decoration: underline; }

.notification-footer {
  display: block;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
  text-align: right;
  flex-shrink: 0;
}

.notification-footer:hover { text-decoration: underline; }

/* ── News View ────────────────────────────────────────────────────────────── */
.news-controls {
  border-bottom: 1px solid var(--border-soft);
}

/* ── News layout: resizable split ────────────────────────────────────────── */
.news-layout {
  display: flex;
  height: calc(100vh - 56px - 49px); /* viewport minus header minus controls bar */
  overflow: hidden;
}

.news-list {
  width: 30%;
  min-width: 220px;
  max-width: 75%;
  flex-shrink: 0;
  overflow-y: auto;
}

/* Drag divider */
.news-divider {
  width: 28px;
  flex-shrink: 0;
  background: transparent;
  cursor: col-resize;
  position: relative;
  user-select: none;
  touch-action: none;
}
.news-divider::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 5px;
  background: var(--border);
}
.news-divider:hover::after,
.news-divider.dragging::after { background: var(--accent); }

.news-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: var(--bg);
}

.news-panel-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.news-panel-bar-url {
  font-size: 0.72rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-reader {
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.3rem;
}
.btn-reader:hover { color: var(--text); background: var(--surface-hover); }
.btn-reader.active { color: var(--accent); }

.news-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 0.75rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.news-iframe {
  width: 100%;
  flex: 1;
  min-height: 0;
  border: none;
  background: #fff;
}

.news-panel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.news-fallback {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 2rem;
  gap: 1rem;
  overflow-y: auto;
}
.news-fallback-reason {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.news-fallback-reason::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
  flex-shrink: 0;
}
.news-fallback-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.news-fallback-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.news-fallback-link {
  align-self: flex-start;
  margin-top: 0.5rem;
  text-decoration: none;
}

.reader-unavailable-toast {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  color: var(--text);
  white-space: nowrap;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  pointer-events: none;
}

/* ── Mobile Reader Bottom Sheet ──────────────────────────────────────────── */
.mobile-reader-backdrop {
  display: none; /* shown inside @media ≤768px */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.mobile-reader-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-reader-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(100% - 56px);
  background: var(--bg);
  border-radius: 14px 14px 0 0;
  display: flex;
  flex-direction: column;
  z-index: 301;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  will-change: transform;
}
.mobile-reader-sheet.open {
  transform: translateY(0);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}


.mobile-reader-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mobile-reader-bar-url {
  flex: 1;
  font-size: 0.73rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-reader-iframe {
  width: 100%;
  flex: 1;
  min-height: 0;
  border: none;
  background: #fff;
}
.mobile-reader-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.mobile-reader-fallback {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.5rem;
  gap: 1rem;
  overflow-y: auto;
}
.mobile-reader-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 1.25rem 1rem 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  font-size: 1rem;
}
.mobile-reader-content .reader-title {
  font-size: 1.3rem; line-height: 1.3; margin: 0 0 0.5rem; font-weight: 600;
}
.mobile-reader-content .reader-byline {
  font-size: 0.8rem; color: var(--text-muted);
  margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border);
}
.mobile-reader-content .reader-body h1,
.mobile-reader-content .reader-body h2,
.mobile-reader-content .reader-body h3,
.mobile-reader-content .reader-body h4 { margin: 1.25rem 0 0.4rem; line-height: 1.3; }
.mobile-reader-content .reader-body p  { margin-bottom: 0.9rem; }
.mobile-reader-content .reader-body a  { color: var(--accent); }
.mobile-reader-content .reader-body img { max-width: 100%; height: auto; border-radius: 4px; margin: 0.75rem 0; display: block; }
.mobile-reader-content .reader-body ul,
.mobile-reader-content .reader-body ol { padding-left: 1.25rem; margin-bottom: 0.9rem; }
.mobile-reader-content .reader-body li { margin-bottom: 0.25rem; }
.mobile-reader-content .reader-body blockquote { border-left: 3px solid var(--border); padding-left: 0.9rem; color: var(--text-muted); margin: 0.9rem 0; font-style: italic; }
.mobile-reader-content .reader-body pre,
.mobile-reader-content .reader-body code { background: var(--surface-raised); border-radius: 3px; font-family: monospace; font-size: 0.85rem; }
.mobile-reader-content .reader-body pre  { padding: 0.75rem; overflow-x: auto; margin-bottom: 0.9rem; }
.mobile-reader-content .reader-body code { padding: 0.1em 0.3em; }
.mobile-reader-content .reader-source {
  margin-top: 2rem; padding-top: 0.75rem; border-top: 1px solid var(--border);
  font-size: 0.75rem; color: var(--text-muted);
}
.mobile-reader-content .reader-source a { color: var(--accent); }

/* ── Article list items ───────────────────────────────────────────────────── */
.news-article {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  height: 157px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.news-article:hover { background: var(--bg-elevated); }

.news-article.selected {
  background: var(--accent-dim);
  border-left: 3px solid var(--accent);
  padding-left: calc(1rem - 3px);
}

.news-article-unread { border-left: 3px solid var(--accent); padding-left: calc(1rem - 3px); }

.news-article-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.news-source-badge {
  display: inline-block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  color: var(--text-muted);
  white-space: nowrap;
}

.news-actor-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

.news-actor-link:hover { text-decoration: underline; }

.news-article-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.news-article-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 0.3rem;
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
  mask-image: linear-gradient(to right, black 80%, transparent 100%);
}

.news-article-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-article-url {
  display: block;
  font-size: 0.7rem;
  color: var(--info);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-article-url:hover { text-decoration: underline; }

/* ── Profile Modal News Section ───────────────────────────────────────────── */
.profile-news-item {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.profile-news-item:last-child { border-bottom: none; }

.profile-news-title {
  display: block;
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
  line-height: 1.4;
  margin-top: 0.25rem;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.profile-news-title:hover { color: var(--accent); text-decoration: underline; }

/* ── Profile Modal Two-Column Layout ─────────────────────────────────────── */
.profile-view-body {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.profile-col-main { flex: 6; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.profile-col-side  { flex: 4; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }

/* Victims panel in sidebar */
.profile-victims-item { padding: 0.5rem 0; border-bottom: 1px solid var(--border-soft); font-size: 0.8rem; }
.profile-victims-item:last-child { border-bottom: none; }
.profile-victims-name { font-weight: 500; color: var(--text); }
.profile-victims-meta { color: var(--text-muted); font-size: 0.75rem; margin-top: 0.15rem; }
.profile-victims-more { padding: 0.5rem 0 0; font-size: 0.78rem; }
.profile-victims-more a { color: var(--accent); text-decoration: none; }
.profile-victims-more a:hover { text-decoration: underline; }

/* Collapsible section headers */
.profile-section > details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.profile-section > details > summary::-webkit-details-marker { display: none; }
.profile-section > details > summary h3 {
  margin: 0;
  flex: 1;
  position: relative;
}
.profile-section > details > summary h3::after {
  content: '';
  position: absolute;
  right: calc(0.45rem + 2px);
  top: 50%;
  width: 0;
  height: 0;
  border-top: 0.3rem solid transparent;
  border-bottom: 0.3rem solid transparent;
  border-left: 0.42rem solid var(--text-muted);
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center center;
  transition: transform 0.15s ease;
}
.profile-section > details.section-open > summary h3::after { transform: translateY(-50%) rotate(90deg); }
.profile-section > details > .section-body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  overflow: hidden;
  margin-top: 0.6rem;
}
.profile-section > details > .section-body.animating {
  transition: grid-template-rows 0.28s ease, opacity 0.28s ease;
}
.profile-section > details > .section-body > * { min-height: 0; overflow: hidden; }
.profile-section > details.collapsing > .section-body {
  grid-template-rows: 0fr;
  opacity: 0;
}

/* Mobile: collapse to single column */
@media (max-width: 700px) {
  .profile-view-body { flex-direction: column; }
}

/* ── Victim card delete button ───────────────────────────────────────────── */
.victim-card-footer-right {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.victim-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.victim-card:hover .victim-delete-btn {
  opacity: 1;
}
.victim-delete-btn:hover {
  color: var(--error);
  background: rgba(248, 81, 73, 0.1);
}

/* ── Confirm modal sizing ────────────────────────────────────────────────── */
.modal-sm {
  max-width: 400px;
}
.confirm-body-text {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.confirm-body-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ── Settings section extras ─────────────────────────────────────────────── */
.settings-section-hint {
  font-size: 0.83rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.settings-loading,
.settings-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 1rem 0;
}

/* ── Feed status ─────────────────────────────────────────────────────────── */
.feed-status-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.feed-status-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.feed-status-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.feed-status-filters {
  display: flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}

.feed-filter-btn {
  background: none;
  border: none;
  padding: 0.25rem 0.65rem;
  border-radius: calc(var(--radius-sm) - 1px);
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, color 0.1s;
}

.feed-filter-btn:hover { color: var(--text); }
.feed-filter-btn.active { background: var(--bg-surface); color: var(--text); font-weight: 500; }

.feed-status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.feed-status-table thead th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 0 0.75rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

.feed-status-table thead th:first-child { padding-left: 0; }

.feed-status-row td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}

.feed-status-row:last-child td { border-bottom: none; }

.feed-status-row td:first-child { padding-left: 0; }

.feed-status-name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 500;
  color: var(--text);
}

.feed-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.feed-dot-ok       { background: var(--ok); }
.feed-dot-redirect { background: var(--warn); }
.feed-dot-blocked  { background: var(--warn); }
.feed-dot-timeout  { background: var(--error); opacity: 0.7; }
.feed-dot-error    { background: var(--error); }
.feed-dot-unknown  { background: var(--text-muted); opacity: 0.5; }

.feed-status-pill {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  font-weight: 500;
  white-space: nowrap;
}

.feed-pill-ok       { background: rgba(63,185,80,0.12);  color: var(--ok);    border: 1px solid rgba(63,185,80,0.25); }
.feed-pill-redirect { background: rgba(210,153,34,0.12); color: var(--warn);  border: 1px solid rgba(210,153,34,0.25); }
.feed-pill-blocked  { background: rgba(210,153,34,0.12); color: var(--warn);  border: 1px solid rgba(210,153,34,0.25); }
.feed-pill-timeout  { background: rgba(248,81,73,0.08);  color: var(--error); border: 1px solid rgba(248,81,73,0.2); }
.feed-pill-error    { background: rgba(248,81,73,0.10);  color: var(--error); border: 1px solid rgba(248,81,73,0.2); }
.feed-pill-unknown  { background: var(--bg-elevated);    color: var(--text-muted); border: 1px solid var(--border); }

.feed-status-url {
  font-size: 0.75rem;
  max-width: 260px;
}
.feed-status-url a {
  color: var(--text-muted);
  text-decoration: none;
  word-break: break-all;
}
.feed-status-url a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.feed-status-ms,
.feed-status-when {
  color: var(--text-secondary);
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ── Feed row action buttons ─────────────────────────────────────────────── */
.feed-row-actions {
  white-space: nowrap;
  text-align: right;
  padding-right: 0 !important;
  width: 1%;
}

.feed-status-row .feed-row-actions { opacity: 0; transition: opacity 0.15s; }
.feed-status-row:hover .feed-row-actions { opacity: 1; }

.feed-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  font-size: 0.75rem;
  line-height: 1;
  transition: color 0.1s, background 0.1s, border-color 0.1s;
}
.feed-action-btn:hover {
  color: var(--text);
  background: var(--bg-elevated-hover);
  border-color: var(--border);
}
.feed-action-delete:hover { color: var(--error); }
.feed-action-save:hover   { color: var(--ok); }


.feed-edit-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
  outline: none;
  width: 100%;
  min-width: 0;
}
.feed-edit-input:focus { border-color: var(--accent); }
.feed-edit-url { font-size: 0.75rem; }

.feed-edit-saving { font-size: 0.75rem; color: var(--text-muted); }
.feed-edit-error  { font-size: 0.75rem; color: var(--error); }

@keyframes feed-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.feed-check-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid var(--border);
  border-top-color: var(--text-secondary);
  border-radius: 50%;
  animation: feed-spin 0.7s linear infinite;
  vertical-align: middle;
}

@media (max-width: 768px) {
  /* Settings page: stack sidebar above content */
  #view-settings { height: calc(100dvh - 60px); overflow: hidden; }
  .settings-page { flex-direction: column; }
  .settings-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 0.75rem 0;
  }
  .settings-nav {
    flex-direction: row;
    gap: 0.25rem;
    padding: 0 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .settings-nav-item {
    white-space: nowrap;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: 2px solid transparent;
    flex-shrink: 0;
  }
  .settings-nav-item.active {
    background: transparent;
    border-bottom-color: var(--accent);
    color: var(--accent);
  }
  .settings-content { padding: 1rem; }

  .feed-status-toolbar { flex-direction: column; align-items: flex-start; }
  .feed-status-table thead th:nth-child(2),
  .feed-status-table thead th:nth-child(4),
  .feed-status-table .feed-status-url,
  .feed-status-table .feed-status-ms { display: none; }
  .feed-status-row .feed-row-actions { opacity: 1; }
}

/* ── Add feeds panel ─────────────────────────────────────────────────────── */
.feed-add-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
}

.feed-add-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.feed-add-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.feed-add-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: color 0.1s;
}
.feed-add-close:hover { color: var(--text); }

.feed-add-hint {
  font-size: 0.79rem;
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.feed-add-textarea {
  width: 100%;
  min-height: 80px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.8rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  padding: 0.5rem 0.65rem;
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.55;
  transition: border-color 0.15s;
}
.feed-add-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.feed-add-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.65rem;
}

/* Validation results */
.feed-add-results {
  margin-top: 1rem;
  border-top: 1px solid var(--border-soft);
  padding-top: 0.5rem;
}

.feed-val-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.feed-val-row:last-child { border-bottom: none; }

.feed-val-left {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}

.feed-val-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.feed-val-checking {
  background: var(--border) !important;
  animation: feed-val-pulse 1.1s ease-in-out infinite;
}
@keyframes feed-val-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

.feed-val-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.feed-val-url {
  font-size: 0.78rem;
  color: var(--text-secondary);
  word-break: break-all;
}

.feed-val-error {
  font-size: 0.74rem;
  color: var(--error);
}

.feed-val-name {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.8rem;
  font-family: inherit;
  padding: 0.22rem 0.45rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.feed-val-name:focus {
  outline: none;
  border-color: var(--accent);
}

.feed-val-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  padding-top: 1px;
}

.feed-val-ms {
  font-size: 0.71rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Confirm row */
.feed-add-confirm {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-soft);
}

.feed-add-confirm-count {
  font-size: 0.79rem;
  color: var(--text-secondary);
}

.feed-add-success {
  font-size: 0.8rem;
  color: var(--ok);
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* ── Deleted victims list ────────────────────────────────────────────────── */
.deleted-victims-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.deleted-victim-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.deleted-victim-row:last-child {
  border-bottom: none;
}
.deleted-victim-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.deleted-victim-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deleted-victim-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ── Victim Chart ─────────────────────────────────────────────────────────── */
#victim-chart-container {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem 1rem;
}

#victim-chart-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.6rem 0;
}

.chart-tb-btn {
  display: inline-flex;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0 0.7rem;
  height: 1.9rem;
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  font-family: inherit;
  user-select: none;
}
.chart-tb-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.chart-tb-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}


.chart-tb-sep {
  width: 1px;
  height: 1rem;
  background: var(--border);
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.chart-tb-spacer { flex: 1; }

#chart-custom-range {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
#chart-custom-range.collapsed {
  display: none;
}

.chart-date-sep {
  color: var(--text-muted);
  font-size: 0.85rem;
  user-select: none;
}

.datepicker-wrap {
  position: relative;
}
.datepicker-trigger {
  min-width: 7rem;
}
.datepicker-popup {
  position: fixed;
  z-index: 300;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 0.6rem;
  min-width: 230px;
  user-select: none;
}
.datepicker-popup.hidden { display: none; }

.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  gap: 0.25rem;
}
.dp-nav {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
  flex-shrink: 0;
}
.dp-nav:hover {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text);
}
.dp-month-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  text-align: center;
}
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dp-dow {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-dim);
  text-align: center;
  padding: 0.15rem 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dp-day {
  font-size: 0.78rem;
  text-align: center;
  padding: 0.3rem 0;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.1s, color 0.1s;
  border: 1px solid transparent;
}
.dp-day:hover {
  background: var(--bg-elevated);
  color: var(--text);
}
.dp-day.today {
  border-color: var(--border);
  color: var(--text);
}
.dp-day.selected {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}
.dp-day.selected:hover {
  background: var(--accent);
}
.dp-day.other-month {
  color: var(--text-dim);
}
.dp-day.other-month:hover {
  color: var(--text-muted);
}
.dp-day.disabled {
  pointer-events: none;
  opacity: 0.3;
}
.dp-clear {
  margin-top: 0.5rem;
  width: 100%;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: inherit;
  padding: 0.3rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.dp-clear:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

#insights-toggle-bar {
  display: flex;
  align-items: center;
  padding: 0.6rem 1.5rem 0.1rem;
}
#insights-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  user-select: none;
  transition: color 0.15s;
}
#insights-collapse-btn:hover { color: var(--text); }
#insights-collapse-chevron {
  transition: transform 0.35s ease;
}
#insights-collapsible-outer {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  overflow: hidden;
  transition: grid-template-rows 0.35s ease, opacity 0.3s ease;
}
#insights-collapsible-outer.collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
#insights-collapsible-outer.no-transition {
  transition: none;
}
#insights-collapsible-outer > * {
  min-height: 0;
  overflow: hidden;
}
.insights-collapsible-inner {
  /* No explicit height — allows the grid track to collapse to 0 */
}

#chart-toggle-bar {
  display: flex;
  align-items: center;
  padding: 0.45rem 1.5rem 0.4rem;
}
#chart-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  user-select: none;
  transition: color 0.15s;
}
#chart-collapse-btn:hover { color: var(--text); }
#chart-collapse-chevron {
  transition: transform 0.35s ease;
}

#chart-collapsible-outer {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  overflow: hidden;
  transition: grid-template-rows 0.35s ease, opacity 0.3s ease;
}
#chart-collapsible-outer.collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
#chart-collapsible-outer.no-transition {
  transition: none;
}
#chart-collapsible-outer > * {
  min-height: 0;
  overflow: hidden;
}
/* Tighten gap between the two toggle bars only when chart is collapsed */
#chart-toggle-bar:has(+ #chart-collapsible-outer.collapsed) { padding-bottom: 0; }
#chart-collapsible-outer.collapsed + #insights-toggle-bar { padding-top: 0; }
#insights-toggle-bar:has(+ #insights-collapsible-outer.collapsed) { padding-bottom: 0; }

#victim-chart-wrap {
  height: 200px;
  position: relative;
}

#victim-chart-resize-handle {
  height: 28px;
  margin: 0 -1.5rem;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
}
#victim-chart-resize-handle::before {
  content: '';
  display: block;
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  transition: background 0.15s;
  pointer-events: none;
  margin-top: 5px;
}
#victim-chart-resize-handle:hover::before,
#victim-chart-resize-handle.dragging::before {
  background: var(--accent);
}

@media (max-width: 700px) {
  #victim-chart-wrap { height: 160px; }
  #victim-chart-toolbar { gap: 0.25rem; }
  .chart-tb-sep { display: none; }
}

/* ── Group Info Card (inline victim card expansion) ──────────────────────── */
@keyframes gvFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes gvFadeOut { from { opacity: 1; } to { opacity: 0; } }

.victim-card--group-view {
  border-color: rgba(137, 87, 229, 0.35);
}
.victim-card-gv {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  background-color: var(--bg-surface);
  background-image: linear-gradient(rgba(137, 87, 229, 0.07), rgba(137, 87, 229, 0.07));
  display: flex;
  flex-direction: column;
  opacity: 0; /* applied before animation starts, prevents 1-frame flash */
  animation: gvFadeIn 0.27s ease forwards;
}
.victim-card-gv.fading-out { animation: gvFadeOut 0.23s ease forwards; }

.victim-card-gv-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.6rem;
  gap: 0.4rem;
}
.victim-card-gv-header .victim-card-gv-refresh { margin-left: auto; }

.victim-card-gv-refresh {
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.victim-card-gv-refresh:hover { color: var(--text); }
.victim-card-gv-refresh.spinning .gv-refresh-icon { animation: spin 0.8s linear infinite; }
.gv-refresh-icon { width: 13px; height: 13px; display: block; }

.victim-card-gv-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 2px 5px;
  border-radius: 3px;
  line-height: 1;
  flex-shrink: 0;
}
.victim-card-gv-close:hover { color: var(--text); }

.victim-card-gv-desc-area {
  flex: 1;
  min-height: 1.5rem;
}

.victim-card-gv-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  height: 100%;
}

.victim-card-gv-desc {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 0.6rem;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.victim-card-gv-no-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 0.6rem;
  flex: 1;
}

.victim-card-gv-footer {
  border-top: 1px solid var(--border);
  padding-top: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.victim-card-gv-profile-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.victim-card-gv-edit-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.victim-card-gv-edit-row.hidden { display: none; }
.victim-card-gv-edit-row .form-input-sm { flex: 1; min-width: 0; }

/* ── Victims flex layout (with AI review sidebar) ────────────────────────── */
#view-victims {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  overflow: hidden;
}
.victims-controls   { flex-shrink: 0; }
.victims-layout {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.victims-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding-bottom: calc(4rem + 5px);
}

@media (max-width: 768px) {
  /* The unguarded desktop rule above sets overflow:hidden and a fixed height on
     #view-victims, which overrides the mobile overflow-y:auto set earlier in
     the sheet (cascade order). Re-apply the correct values here, after the
     desktop rule, so mobile scrolling works. */
  #view-victims { height: auto; overflow-y: auto; overflow-x: hidden; }
  /* victims-layout must NOT use flex:1 — that would fill the container exactly
     and prevent #view-victims from ever having overflow to scroll. */
  .victims-layout { flex: none; overflow: visible; height: auto; min-height: 0; }
  .victims-main { overflow-y: visible; padding-bottom: 5rem; }
  .pg-float-group { bottom: calc(20px + env(safe-area-inset-bottom)); }
  /* Scale down shadows so their downward extent matches the bottom offset (no iOS toolbar clip) */
  .victims-pagination,
  .victims-perpage,
  .victims-perpage-select-wrap {
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.07),
      0 5px 15px rgba(0, 0, 0, 0.13),
      0 2px 4px rgba(0, 0, 0, 0.05);
  }
  body:not(.light) .victims-pagination,
  body:not(.light) .victims-perpage,
  body:not(.light) .victims-perpage-select-wrap {
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.3),
      0 5px 15px rgba(0, 0, 0, 0.5),
      0 1px 3px rgba(0, 0, 0, 0.2);
  }
}

/* Drag divider — mirrors .news-divider */
.victims-review-divider {
  width: 28px;
  flex-shrink: 0;
  background: transparent;
  cursor: col-resize;
  position: relative;
  user-select: none;
  touch-action: none;
}
.victims-review-divider::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 5px;
  background: var(--border);
}
.victims-review-divider:hover::after,
.victims-review-divider.dragging::after { background: var(--accent); }

/* ── AI Review Sidebar ───────────────────────────────────────────────────── */
.victims-review-sidebar {
  width: 0;
  min-width: 0;
  max-width: 640px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.victims-review-sidebar.open {
  width: 400px;
  border-left: 1px solid var(--border);
}

/* Header pill */
.vrs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem 0.55rem 1rem;
  flex-shrink: 0;

  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.vrs-title {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text);
  white-space: nowrap;
}
.vrs-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  font-size: 0.9rem;
  line-height: 1;
  border-radius: 40px;
  flex-shrink: 0;
}
.vrs-close:hover { background: var(--bg-elevated); color: var(--text); }

/* Progress */
.vrs-progress {
  padding: 0.5rem 0.75rem 0.3rem;
  flex-shrink: 0;
}
.vrs-progress-bar-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.3rem;
}
.vrs-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}
.vrs-progress.thinking .vrs-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.45) 50%,
    transparent 100%
  );
  animation: vrs-shimmer 1.4s ease-in-out infinite;
}
@keyframes vrs-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
.vrs-progress-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.vrs-progress-sub {
  display: block;
  font-size: 0.66rem;
  color: var(--text-muted);
  opacity: 0.65;
  margin-top: 0.1rem;
  min-height: 0;
}
.vrs-progress-sub:empty {
  display: none;
}

/* Scrollable body */
.vrs-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}

/* Finding groups */
.vrs-group { margin-bottom: 0.75rem; }
.vrs-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.25rem 0;
  user-select: none;
  margin-bottom: 0.4rem;
}
.vrs-group-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vrs-group-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.vrs-group-accept-all {
  margin-left: auto;
  font-size: 0.7rem;
  font-family: inherit;
  font-weight: 500;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  user-select: none;
}
.vrs-group-accept-all:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.vrs-group-accept-all:disabled {
  opacity: 0.35;
  cursor: default;
  border-color: var(--border);
  color: var(--text-muted);
}
.vrs-group-chevron {
  font-size: 0.65rem;
  color: var(--text-muted);
  transition: transform 0.15s;
}
.vrs-group.collapsed .vrs-group-chevron { transform: rotate(-90deg); }
.vrs-group.collapsed .vrs-group-items   { display: none; }

/* Badge colours */
.vrs-badge-duplicate           { background: #fef3c7; color: #92400e; }
.vrs-badge-country_mismatch    { background: #fee2e2; color: #991b1b; }
.vrs-badge-url_issue           { background: #e0f2fe; color: #075985; }
.vrs-badge-name_clarification  { background: #f3e8ff; color: #6b21a8; }
.vrs-badge-multiple_posts      { background: #d1fae5; color: #065f46; }
.vrs-badge-other               { background: var(--bg-elevated); color: var(--text-muted); }

[data-theme="dark"] .vrs-badge-duplicate           { background: #451a03; color: #fbbf24; }
[data-theme="dark"] .vrs-badge-country_mismatch    { background: #450a0a; color: #f87171; }
[data-theme="dark"] .vrs-badge-url_issue           { background: #082f49; color: #38bdf8; }
[data-theme="dark"] .vrs-badge-name_clarification  { background: #2e1065; color: #c084fc; }
[data-theme="dark"] .vrs-badge-multiple_posts      { background: #022c22; color: #34d399; }
[data-theme="dark"] .vrs-badge-other               { background: var(--bg-elevated); color: var(--text-muted); }

/* Finding card */
.vrs-finding {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.4rem;
  background: var(--bg);
  transition: opacity 0.2s, border-color 0.2s;
}
.vrs-finding.rejected  { opacity: 0.38; }
.vrs-finding.accepted  { border-color: var(--accent); }
.vrs-finding-severity-high   { border-left: 3px solid #ef4444; }
.vrs-finding-severity-medium { border-left: 3px solid #f59e0b; }
.vrs-finding-severity-low    { border-left: 3px solid var(--border); }
.vrs-finding-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.vrs-finding-keys {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  font-family: monospace;
  line-height: 1.4;
}
.vrs-finding-explanation {
  font-size: 0.79rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 0.25rem;
}
.vrs-finding-suggestion {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
  line-height: 1.4;
}
.vrs-finding-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.vrs-btn-accept {
  font-size: 0.73rem;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.vrs-btn-accept:hover  { background: var(--accent); color: #fff; }
.vrs-btn-accept.active { background: var(--accent); color: #fff; }
.vrs-btn-reject {
  font-size: 0.73rem;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.vrs-btn-reject:hover  { background: var(--bg-elevated); color: var(--text); }
.vrs-btn-reject.active { background: var(--bg-elevated); color: var(--text); }

/* Question UI */
.vrs-question {
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
}
.vrs-question-text {
  font-size: 0.79rem;
  color: var(--text);
  margin-bottom: 0.35rem;
  line-height: 1.45;
}
.vrs-question-btns {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.vrs-question-input-wrap {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.3rem;
}
.vrs-question-input {
  flex: 1;
  font-size: 0.78rem;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}
.vrs-question-input:focus { outline: none; border-color: var(--accent); }
.vrs-question-send {
  font-size: 0.73rem;
  padding: 0.28rem 0.6rem;
  border-radius: 4px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.vrs-q-back {
  font-size: 0.73rem;
  padding: 0.28rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.vrs-q-back:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* Warning */
.vrs-warning {
  padding: 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 7px;
  margin-bottom: 0.75rem;
}
.vrs-warning p {
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 0.6rem;
  line-height: 1.5;
}
.vrs-warning-btns { display: flex; gap: 0.4rem; }

/* Error notice */
.vrs-batch-error {
  font-size: 0.78rem;
  color: var(--error, #ef4444);
  padding: 0.4rem 0.5rem;
  border-radius: 5px;
  background: rgba(239,68,68,0.08);
  margin-bottom: 0.4rem;
}

/* Footer */
.vrs-footer {
  padding: 0.5rem 0.75rem 0.75rem;
  flex-shrink: 0;
}
.vrs-download-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: box-shadow 0.2s, outline 0.2s;
}
.vrs-download-btn.vrs-download-stale {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  animation: vrs-stale-pulse 1.4s ease-in-out 2;
}
@keyframes vrs-stale-pulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 0 4px var(--accent-dim); }
}

/* Mobile: hide sidebar */
@media (max-width: 768px) {
  .victims-review-divider { display: none !important; }
  .victims-review-sidebar { display: none !important; }
}

/* ── Profile settings section ─────────────────────────────────────────────── */
.profile-info { margin-bottom: 1.5rem; }

.profile-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.profile-meta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
}
.profile-meta-label {
  width: 4rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  flex-shrink: 0;
}
.profile-role-badge {
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.pw-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  max-width: 420px;
}
.pw-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.profile-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
}
.auth-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}
.profile-fields .auth-field { margin-bottom: 0; }
.profile-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.profile-status {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── Users settings section ────────────────────────────────────────────────── */
.users-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.user-invite-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
}

.user-invite-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.user-invite-fields input:nth-child(3),
.user-invite-fields select { grid-column: span 2; }

.user-invite-status {
  font-size: 0.8rem;
  color: var(--text-secondary, var(--text-muted));
}

.settings-input {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.8rem;
  padding: 0.35rem 0.55rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.settings-input:focus { outline: none; border-color: var(--accent); }

.settings-input-sm {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.78rem;
  padding: 0.2rem 0.4rem;
  transition: border-color 0.15s;
}
.settings-input-sm:focus { outline: none; border-color: var(--accent); }

.users-list { margin-top: 0.5rem; }

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.users-table thead th {
  background: var(--bg-elevated);
  padding: 0.6rem 0.8rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.users-table tbody td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.users-table tbody tr:last-child td { border-bottom: none; }
.users-table tbody tr:hover { background: var(--bg-elevated); }
.users-date { font-size: 0.75rem; color: var(--text-muted); }

/* ── User menu (avatar + dropdown) ──────────────────────────────────────── */
.user-menu {
  position: relative;
}

.user-avatar-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.user-avatar-btn:hover { opacity: 0.85; }

.user-avatar-initials {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1;
  pointer-events: none;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 200;
  overflow: hidden;
}

.user-dropdown-header {
  padding: 0.75rem 1rem;
}
.user-dropdown-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-dropdown-email {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border);
}

.user-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.user-dropdown-item:hover { background: var(--bg-elevated); }
.user-dropdown-item--danger { color: var(--danger, #f85149); }
.user-dropdown-item--danger:hover { background: rgba(248,81,73,0.1); }