/* ==========================================
   Edgar Proxy — Front-end styles
   Figma-based layout (Ngn42 design system)
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

:root {
  --sidebar-bg: #1e2640;
  --sidebar-w: 200px;
  --sidebar-collapsed-w: 56px;
  --sidebar-text: rgba(255, 255, 255, 0.65);
  --sidebar-text-active: #fff;
  --sidebar-hover: rgba(255, 255, 255, 0.08);
  --sidebar-active: rgba(255, 255, 255, 0.12);
  --header-bg: #fff;
  --page-bg: #f4f7fc;
  --card-bg: #fff;
  --table-header-bg: #f6faff;
  --table-header-text: #3a5ba2;
  --text-primary: #394463;
  --text-secondary: #969dad;
  --border: #d9e3f0;
  --chip-bg: #f2f7ff;
  --status-active-bg: #e8f9f2;
  --status-active-text: #1ecb85;
  --status-inactive-bg: #fff3e8;
  --status-inactive-text: #f5a623;
  --status-warn-bg: #fff0f0;
  --status-warn-text: #e74c3c;
  --primary: #3a7cee;
  --primary-hover: #2d6ad8;
  /* Chart-pattern overlay colors (cup&handle, H&S, …). Meaning-bearing:
     bull=green, bear=red, neutral=amber, pivots=muted. Deliberately identical
     across light/dark because the overlay sits on a chart canvas whose
     background differs from the page (the Chart page chart is always dark). */
  --pattern-bull: #1ecb85;
  --pattern-bear: #e74c3c;
  --pattern-neutral: #f5a623;
  --pattern-pivot: #9aa4b2;
  --search-bg: #f4f7fc;
  --font: 'Open Sans', sans-serif;
  --radius: 6px;
  --transition: 0.2s ease;
}

/* ─── Reset ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── Material Symbols base — defined locally so icons render even when
   Google Fonts CDN is slow or unavailable (font-face still comes from CDN,
   but the class properties are always applied).
   Note: kept hidden until the Font Loading API confirms the font is
   actually available (see the document.fonts.load() block in
   frontEnd/index.html). Otherwise on slow / CDN-blocked networks the
   browser's fallback font would render the icon ligature names
   ("flag", "group", "share") as literal text — discovered when a mobile
   beta user saw "Peter Lynch flag" / "Current group" instead of icon
   glyphs. The visibility:hidden default is overridden by the
   html.material-symbols-loaded rule below. ─── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  visibility: hidden;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
/* Reveal Material Symbols only after the Font Loading API confirms the
   font has loaded. Toggled by the inline script in frontEnd/index.html. */
html.material-symbols-loaded .material-symbols-outlined { visibility: visible; }

body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  background: var(--page-bg);
  color: var(--text-primary);
  height: 100vh;
  display: flex;
  overflow: hidden;
}

/* ─── Sidebar ─── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100vh;
  transition: width var(--transition);
  overflow: hidden;
}

.sidebar.collapsed { width: var(--sidebar-collapsed-w); }

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.sidebar-logo .hamburger {
  font-size: 18px;
  cursor: pointer;
  opacity: 0.7;
  flex-shrink: 0;
  transition: opacity 0.15s;
  touch-action: manipulation;
}

.sidebar-logo .hamburger:hover { opacity: 1; }

.sidebar.collapsed .logo-text { display: none; }

.sidebar-nav {
  padding: 8px 0;
  flex: 1;
  overflow-y: auto;
}

/* The main nav also carries .sidebar-panel (which sets overflow:hidden so
   the local-sidebar can manage its own inner scroll). On short viewports
   that was clipping the last nav items — raise specificity to keep the
   whole main nav scrollable. */
.sidebar-nav.sidebar-panel { overflow-y: auto; }

.sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--sidebar-text);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}

.nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.nav-item.active { color: var(--sidebar-text-active); background: var(--sidebar-active); }

.nav-item .icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; }

/* ─── Main area ─── */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
}

/* ─── Top header ─── */
.top-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  /* Respect iOS safe area (Dynamic Island + notch). The env() values are 0
     outside standalone PWAs and on non-notched devices, so this is a no-op
     for everyone else. viewport-fit=cover in the meta tag is required. */
  padding: calc(10px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) 10px calc(24px + env(safe-area-inset-left));
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--search-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 14px;
  width: 320px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.header-search .search-icon { color: var(--text-secondary); font-size: 18px; }

.header-search input {
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  width: 100%;
}

.header-search input::placeholder { color: var(--text-secondary); }
.header-search input::-webkit-search-cancel-button,
.header-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.header-search-clear {
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-secondary); padding: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.header-search-clear:hover { color: var(--text-primary); background: rgba(0,0,0,0.05); }
.header-search-clear .material-symbols-outlined { font-size: 16px; }
html.theme-dark .header-search-clear:hover { background: rgba(255,255,255,0.06); }

@keyframes gSearchAutofill { from {} to {} }
input#globalSearch:-webkit-autofill { animation-name: gSearchAutofill; animation-duration: 0.001s; }

.header-search-filter {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  color: var(--table-header-text);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.dropdown-arrow { font-size: 10px; margin-left: 2px; }

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.health-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: background var(--transition);
}

.health-dot.online { background: var(--status-active-text); }
.health-dot.offline { background: var(--status-warn-text); }

.notification-icon {
  cursor: pointer;
  font-size: 20px;
  color: var(--text-secondary);
  transition: color 0.15s;
}

.notification-icon:hover { color: var(--text-primary); }

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ─── User menu dropdown ─── */
.user-menu-wrapper { position: relative; }
.user-menu {
  display: none; position: absolute; right: 0; top: 40px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 220px; z-index: 1000;
  overflow: hidden;
}
.user-menu.open { display: block; }
.user-menu-info { padding: 12px 16px; }
.user-menu-info .um-name { font-weight: 600; font-size: 14px; }
.user-menu-info .um-email { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.user-menu-sep { height: 1px; background: var(--border); }
.user-menu-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  font-size: 13px; color: var(--text-primary); cursor: pointer; text-decoration: none;
  transition: background 0.12s;
}
.user-menu-item:hover { background: var(--search-bg); }
.user-menu-item .material-symbols-outlined { font-size: 18px; color: var(--text-secondary); }
.user-menu-logout { color: var(--status-warn-text); }
.user-menu-logout .material-symbols-outlined { color: var(--status-warn-text); }

/* ─── Account settings page ─── */
.account-page { max-width: 800px; }
.account-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 24px; }
.account-tab {
  padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--text-secondary); border: none; background: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: color 0.15s, border-color 0.15s;
}
.account-tab:hover { color: var(--text-primary); }
.account-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.account-panel { display: none; }
.account-panel.active { display: block; }

.account-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.account-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.account-card-header {
  display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; margin-bottom: 8px;
}
.account-card-header .material-symbols-outlined { font-size: 20px; color: var(--text-secondary); }
.account-card-value { font-size: 14px; color: var(--text-secondary); }
.account-card-actions { margin-top: 12px; }

.account-form { max-width: 400px; }
.account-form .form-group { margin-bottom: 16px; }
.account-form .form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--text-primary); }
.account-form .form-input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 14px; font-family: var(--font); transition: border-color 0.15s;
}
.account-form .form-input:focus { border-color: var(--primary); outline: none; }
.account-form .form-hint { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.account-form .form-msg { font-size: 13px; padding: 8px 12px; border-radius: var(--radius); margin-bottom: 12px; }
.account-form .form-msg.success { background: var(--status-active-bg); color: var(--status-active-text); }
.account-form .form-msg.error { background: var(--status-warn-bg); color: var(--status-warn-text); }

.tfa-status { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; }
.tfa-badge { padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.tfa-badge.on { background: var(--status-active-bg); color: var(--status-active-text); }
.tfa-badge.off { background: var(--status-warn-bg); color: var(--status-warn-text); }

/* Avatar display */
.um-avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.um-avatar-initials {
  width: 36px; height: 36px; border-radius: 50%; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; flex-shrink: 0;
}
.acct-avatar-preview {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--border);
}
.acct-avatar-empty {
  background: var(--primary); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 22px; font-weight: 600;
}

/* AI persona bio cards on the account Personal tab — one card per persona,
   sitting in the same grid as Name/Email/Role. Avatar replaces the icon
   in the card header so the persona is recognisable at a glance. */
.acct-bio-avatar-sm { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }

/* User-profile modal — opened by window.openUserProfile(userId).
   Visual vocabulary mirrors the existing account-card style for consistency. */
.up-header { display: flex; align-items: center; gap: 14px; padding: 4px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.up-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); flex-shrink: 0; }
.up-avatar-empty { background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; border-color: var(--primary); }
.up-header-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.up-name { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.up-role .admin-role-badge { font-size: 11px; }
.up-rows { display: flex; flex-direction: column; gap: 8px; }
.up-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.up-row-label { color: var(--text-secondary); }
.up-row-value { color: var(--text-primary); font-weight: 500; word-break: break-word; }
.up-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.up-action-btn { display: inline-flex; align-items: center; gap: 6px; }
.up-compose-input { width: 100%; resize: vertical; font-family: var(--font); padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.up-compose-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 8px; }
.up-compose-status { font-size: 12px; color: var(--text-secondary); }
.up-status-ok { color: var(--status-active-text); }
.up-status-warn { color: var(--status-warn-text); }

/* ────────────────────────────────────────────────────────────
   Messages page (MK Tools → Messages). Slack-style: peer rail
   + conversation thread + composer. Page lives inside the same
   #customContent host the account page uses.
   ──────────────────────────────────────────────────────────── */
.msg-page {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  height: calc(100vh - 200px);
  min-height: 480px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.msg-rail { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; background: var(--card-bg); }
.msg-rail-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.msg-rail-head h3 { margin: 0; font-size: 14px; }
.msg-rail-search { padding: 10px; border-bottom: 1px solid var(--border); background: var(--card-bg); }
.msg-rail-search .form-input { width: 100%; padding: 6px 10px; font-size: 13px; }
.msg-rail-search-results { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.msg-search-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: transparent; border: 1px solid transparent; border-radius: 6px; text-align: left; cursor: pointer; width: 100%; font-size: 13px; }
.msg-search-row:hover { border-color: var(--primary); background: var(--hover-bg, rgba(58,123,238,0.06)); }

.msg-peers { flex: 1; overflow-y: auto; padding: 6px; }
.msg-peer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: transparent; border: 1px solid transparent; border-radius: 8px; text-align: left; cursor: pointer; margin-bottom: 2px; }
.msg-peer:hover { background: var(--hover-bg, rgba(58,123,238,0.06)); }
.msg-peer.active { background: rgba(58,123,238,0.12); border-color: var(--primary); }
.msg-peer-text { min-width: 0; }
.msg-peer-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.msg-peer-name { font-weight: 600; font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-peer-time { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }
.msg-peer-preview { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-unread { background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center; }

.msg-thread { display: flex; flex-direction: column; min-width: 0; }
.msg-thread-head { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.msg-thread-peer { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.msg-thread-peer:hover .msg-thread-name { text-decoration: underline; }
.msg-thread-name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.msg-thread-meta { font-size: 11px; color: var(--text-secondary); }
.msg-thread-title { font-size: 13px; color: var(--text-secondary); }

.msg-feed { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg-bubble-row { display: flex; gap: 10px; align-items: flex-end; max-width: 78%; }
.msg-bubble-row.is-me { align-self: flex-end; flex-direction: row-reverse; }
.msg-bubble { background: var(--input-bg, rgba(0,0,0,0.04)); padding: 8px 12px; border-radius: 12px; border-top-left-radius: 4px; font-size: 13px; line-height: 1.45; word-break: break-word; }
.msg-bubble-row.is-me .msg-bubble { background: rgba(58,123,238,0.18); border-top-left-radius: 12px; border-top-right-radius: 4px; }
.msg-bubble-head { display: flex; gap: 8px; font-size: 11px; color: var(--text-secondary); margin-bottom: 2px; }
.msg-bubble-author { font-weight: 600; color: var(--text-primary); }
.msg-bubble-body { white-space: pre-wrap; }
.msg-bubble-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg-att-img { max-width: 240px; max-height: 240px; border-radius: 6px; border: 1px solid var(--border); display: block; }
.msg-att-img.msg-att-pending { width: 80px; height: 80px; background: var(--input-bg, rgba(0,0,0,0.04)); object-fit: cover; }
.msg-att-file { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; text-decoration: none; color: var(--text-primary); cursor: pointer; }
.msg-att-file:hover { border-color: var(--primary); }
.msg-link { color: var(--primary); text-decoration: underline; word-break: break-all; }

.msg-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.msg-avatar-empty { background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; }

.msg-composer { border-top: 1px solid var(--border); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--card-bg); }
.msg-attach-preview { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-attach-preview:empty { display: none; }
.msg-attach-thumb { position: relative; }
.msg-attach-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.msg-attach-remove { position: absolute; top: -4px; right: -4px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.msg-input { width: 100%; resize: vertical; min-height: 38px; max-height: 160px; font-family: var(--font); font-size: 13px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text-primary); }
.msg-composer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msg-composer-actions { display: flex; gap: 4px; }
.msg-icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; color: var(--text-secondary); }
.msg-icon-btn:hover { background: var(--hover-bg, rgba(58,123,238,0.06)); color: var(--text-primary); }
.msg-emoji-pop { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: 8px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; max-width: 320px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.msg-emoji-tile { background: transparent; border: none; cursor: pointer; padding: 4px; font-size: 18px; line-height: 1; border-radius: 4px; }
.msg-emoji-tile:hover { background: var(--hover-bg, rgba(58,123,238,0.06)); }

.msg-mention-menu { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.16); padding: 4px; max-height: 200px; overflow-y: auto; z-index: 9999; }
.msg-mention-item { padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.msg-mention-item.active { background: rgba(58,123,238,0.18); }
.msg-mention-row { display: flex; align-items: center; gap: 8px; }

.msg-empty { color: var(--text-secondary); font-size: 13px; }
.msg-error { color: var(--status-warn-text); }

@media (max-width: 768px) {
  .msg-page { grid-template-columns: 1fr; height: calc(100vh - 180px); }
  .msg-rail { display: none; }
  .msg-page.show-rail .msg-rail { display: flex; }
}

/* Lightbox for image attachments — clicking a thumbnail opens it full-
   viewport without leaving the SPA context (which `window.open` would). */
.msg-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0, 0, 0, 0.88);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.msg-lightbox img {
  max-width: 92vw; max-height: 92vh; object-fit: contain;
  border-radius: 4px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.msg-lightbox-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff; padding: 4px 6px; border-radius: 4px; cursor: pointer;
  display: inline-flex; align-items: center;
}
.msg-lightbox-close:hover { background: rgba(0, 0, 0, 0.8); }

/* ────────────────────────────────────────────────────────────
   Symbol modal → "Why?" tab. Renders the explain-move payload:
   header (direction + magnitude + confidence) → narrative summary
   → catalyst rows colour-coded by source. Cached server-side; the
   Refresh button POSTs again with ?force=true.
   ──────────────────────────────────────────────────────────── */
.sym-why { padding: 4px 2px; }
.sym-why-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--input-bg, rgba(0,0,0,0.04)); border-radius: 6px; margin-bottom: 12px; }
.sym-why-head-left { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sym-why-dir { font-size: 16px; font-weight: 700; }
.sym-why-up { color: var(--status-active-text, #2c8a4f); }
.sym-why-down { color: var(--status-warn-text, #d24330); }
.sym-why-flat { color: var(--text-secondary); }
.sym-why-mag { color: var(--text-secondary); font-size: 13px; }
.sym-why-conf { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.sym-why-conf-high { background: rgba(44, 138, 79, 0.18); color: var(--status-active-text, #2c8a4f); }
.sym-why-conf-medium { background: rgba(180, 140, 30, 0.18); color: #b48c1e; }
.sym-why-conf-low { background: rgba(150, 150, 150, 0.18); color: var(--text-secondary); }

.sym-why-summary { font-size: 14px; line-height: 1.5; color: var(--text-primary); padding: 4px 4px 12px; }
.sym-why-summary-empty { color: var(--text-secondary); font-style: italic; }
.sym-why-hint { font-size: 12px; color: var(--text-secondary); padding: 0 4px 12px; }

.sym-why-cats-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; padding: 8px 4px 6px; border-top: 1px solid var(--border); }
.sym-why-cats { display: flex; flex-direction: column; gap: 6px; }
.sym-why-cat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: inherit; transition: border-color 0.12s, background 0.12s; }
.sym-why-cat:hover { border-color: var(--primary); background: var(--hover-bg, rgba(58,123,238,0.06)); }
.sym-why-cat-static { cursor: default; }
.sym-why-cat-static:hover { border-color: var(--border); background: transparent; }
.sym-why-cat-text { flex: 1; min-width: 0; }
.sym-why-cat-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.sym-why-cat-detail { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
.sym-why-cat-arrow { color: var(--text-secondary); font-size: 16px; }

.sym-why-chip { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; border-radius: 4px; flex-shrink: 0; }
.sym-why-chip-news { background: rgba(58, 123, 238, 0.18); color: #3a7cee; }
.sym-why-chip-sec { background: rgba(140, 90, 200, 0.18); color: #8c5ac8; }
.sym-why-chip-calendar { background: rgba(220, 165, 35, 0.18); color: #b48c1e; }
.sym-why-chip-split { background: rgba(40, 165, 165, 0.18); color: #28a5a5; }
.sym-why-chip-signal { background: rgba(150, 150, 150, 0.18); color: var(--text-secondary); }
.sym-why-chip-context { background: rgba(120, 120, 120, 0.12); color: var(--text-secondary); }

.sym-why-empty { font-size: 13px; color: var(--text-secondary); font-style: italic; padding: 12px 4px; text-align: center; }

.sym-why-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-secondary); }
.sym-why-cached-chip { display: inline-block; padding: 1px 6px; margin-left: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; border-radius: 4px; background: rgba(58, 123, 238, 0.14); color: #3a7cee; }
.sym-why-running { padding: 32px 12px; }
/* Make share-owner avatar chips pointer-cursor when wired with user IDs. */
.owner-chip[data-uid] { cursor: pointer; }
.owner-chip[data-uid]:hover { opacity: 0.85; }
/* Admin user-list rows clickable cells (everything except the actions cell). */
.admin-users-table tr td:not(.admin-actions) { cursor: pointer; }
.admin-users-table tr:hover td { background: var(--hover-bg, rgba(58,123,238,0.04)); }

/* Avatar picker grid */
.avatar-grid { max-height: 400px; overflow-y: auto; }
.avatar-show-group { margin-bottom: 16px; }
.avatar-show-label {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.avatar-show-items { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-option {
  width: 72px; text-align: center; cursor: pointer; padding: 6px 4px;
  border-radius: var(--radius); border: 2px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.avatar-option:hover { background: var(--search-bg); border-color: var(--border); }
.avatar-option.selected { border-color: var(--primary); background: var(--chip-bg); }
.avatar-option img { width: 48px; height: 48px; border-radius: 50%; display: block; margin: 0 auto 4px; }
.avatar-option-label { font-size: 10px; color: var(--text-secondary); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-custom-group { padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.avatar-custom-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.avatar-custom-row .form-input { flex: 1; min-width: 200px; }

/* Account → Security: password show/hide */
.pw-reveal-wrap { position: relative; }
.pw-reveal-wrap .form-input { padding-right: 36px; }
.pw-reveal-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--text-secondary); cursor: pointer;
  user-select: none;
}
.pw-reveal-btn:hover { color: var(--primary); }

/* Account → Admin: invites */
.admin-invites-actions { display: flex; align-items: center; gap: 12px; }
.admin-section h3 { font-weight: 700; color: var(--text-primary); }

/* Feature Requests */
.fr-wrap { max-width: 820px; padding: 16px 8px; }
.fr-submit {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; margin-bottom: 20px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
}
.fr-submit .form-input { padding: 8px 10px; font-size: 13px; }
.fr-submit textarea.form-input { resize: vertical; min-height: 48px; }
.fr-submit .btn-primary { align-self: flex-start; }
.fr-list { display: flex; flex-direction: column; gap: 10px; }
.fr-empty { padding: 32px; text-align: center; color: var(--text-secondary); }
.fr-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
}
.fr-vote-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 48px; padding: 6px 8px;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; color: var(--text-secondary); transition: all 0.15s;
  font-family: var(--font);
}
.fr-vote-btn:hover { border-color: var(--primary); color: var(--primary); }
.fr-vote-btn.voted { background: var(--primary); color: #fff; border-color: var(--primary); }
.fr-vote-btn .material-symbols-outlined { font-size: 18px; }
.fr-vote-count { font-size: 13px; font-weight: 700; }
.fr-body { flex: 1; min-width: 0; }
.fr-header-row { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.fr-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.fr-description { font-size: 13px; color: var(--text-secondary); margin: 4px 0; white-space: pre-wrap; }
.fr-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.fr-author { font-weight: 600; color: var(--text-primary); }
.fr-avatar, .fr-avatar-img {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
}
.fr-avatar-img { object-fit: cover; background: transparent; }
.fr-actions { display: flex; gap: 6px; align-items: center; }
.fr-status-select { padding: 4px 6px; font-size: 12px; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--text-primary); }
.fr-del { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; }
.fr-del:hover { color: var(--status-warn-text); }
.fr-status {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
}
.fr-status-open        { background: #e3f2fd; color: #1565c0; }
.fr-status-planned     { background: #e8f5e9; color: #2e7d32; }
.fr-status-in_progress { background: #fff3e0; color: #ef6c00; }
.fr-status-done        { background: #e8eaf6; color: #303f9f; }
.fr-status-rejected    { background: #ffebee; color: #c62828; }

/* Share modal */
.sm-section { padding: 12px 0; }
.sm-section + .sm-section { border-top: 1px solid var(--border); }
.sm-section-title { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.4px; }
.sm-user-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.sm-user { display: flex; align-items: center; gap: 8px; }
.sm-user-name { font-size: 13px; }
.sm-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  overflow: hidden; flex-shrink: 0;
}
.sm-avatar.sm-avatar-img { object-fit: cover; background: transparent; }
.sm-add-row { display: flex; gap: 8px; align-items: center; }
.sm-add-row .form-input { flex: 1; padding: 6px 8px; font-size: 13px; }
.sm-empty { color: var(--text-secondary); font-size: 13px; }

/* "Make public" toggle in the share modal */
.sm-public-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.sm-public-row input[type=checkbox] { margin-top: 3px; flex-shrink: 0; }
.sm-public-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.sm-public-label .material-symbols-outlined { font-size: 18px; color: var(--primary); }
.sm-public-hint { flex-basis: 100%; font-weight: 400; font-size: 12px; color: var(--text-secondary); }

/* Owner chip — shown on list rows that are shared to the current user */
.owner-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 6px;
  padding: 1px 8px 1px 2px;
  border-radius: 10px;
  background: var(--chip-bg, rgba(58,123,238,0.08));
  color: var(--text-secondary);
  font-size: 11px; font-weight: 500;
  vertical-align: middle;
  line-height: 1.6;
}
.owner-chip .owner-avatar {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.owner-chip .owner-avatar-img { object-fit: cover; background: transparent; }
.owner-chip-name { color: var(--text-secondary); }

/* Outgoing-share indicator on the OWNER's row when the resource is shared
   with others. Single muted icon, no pill — full recipient list lives in
   the tooltip. Distinct from the recipient avatar chip ("came from") by
   not carrying an avatar. */
.material-symbols-outlined.shared-out-icon,
.shared-out-icon {
  font-size: 16px;
  line-height: 1;
  margin-left: 6px;
  vertical-align: middle;
  color: var(--text-secondary);
  opacity: 0.7;
  cursor: default;
  transition: opacity 120ms;
}
.shared-out-icon:hover { opacity: 1; }

/* Reference / benchmark portfolio marker. Same minimalist treatment as
   the shared-out icon so badges on the same row don't compete visually. */
.material-symbols-outlined.ref-icon,
.ref-icon {
  font-size: 16px;
  line-height: 1;
  margin-left: 6px;
  vertical-align: middle;
  color: var(--text-secondary);
  opacity: 0.7;
  cursor: default;
  transition: opacity 120ms;
}
.ref-icon:hover { opacity: 1; }

/* Stoploss settings modal — args + exceptions tables */
.sl-settings-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sl-settings-table th, .sl-settings-table td {
  text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.sl-settings-table th { font-weight: 600; color: var(--text-secondary); background: var(--table-header-bg); }
.sl-settings-table td code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--primary);
}
.sl-arg-label { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.sl-arg-help { font-size: 11px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; max-width: 48ch; }
.sl-arg-val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: nowrap; text-align: right; color: var(--text-primary); }
.sl-arg-pre { font-size: 11px; margin: 0; white-space: pre-wrap; }
.sm-section-sub { font-weight: 400; text-transform: none; color: var(--text-secondary); letter-spacing: 0; }
.sl-exc-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.sl-exc-table td { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.sl-exc-table td:first-child { font-family: var(--font); }

/* ── Stoploss settings modal — editable ── */
.sl-settings-tabs { padding: 0 24px; border-bottom: 1px solid var(--border); display: flex; gap: 0; }
.sl-settings-tabs .tab {
  padding: 10px 16px; background: none; border: none;
  border-bottom: 2px solid transparent;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.sl-settings-tabs .tab:hover { color: var(--text-primary); }
.sl-settings-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.sl-arg-col { max-width: 340px; }
.sl-arg-input-cell { width: 180px; text-align: right; vertical-align: middle; }
.sl-arg-input { max-width: 140px; padding: 6px 10px; font-size: 13px; text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* volLevels editor needs more room than a single numeric field */
.sl-arg-vl-cell { width: 260px; }

/* Paired input row — e.g. RS Positive { Mild, Strong } */
.sl-arg-pair { width: 220px; }
.sl-arg-pair-wrap { display: flex; gap: 8px; justify-content: flex-end; }
.sl-arg-pair-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sl-arg-pair-sub {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-secondary); font-weight: 600;
}
.sl-arg-pair-cell .sl-arg-input { max-width: 90px; }

/* volLevels editor */
.sl-vl-editor { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.sl-vl-row { display: inline-flex; align-items: center; gap: 6px; }
.sl-vl-threshold, .sl-vl-multiplier { width: 80px; padding: 4px 8px; font-size: 12px; text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sl-vl-le, .sl-vl-arrow, .sl-vl-pct, .sl-vl-x { color: var(--text-secondary); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sl-vl-del, .sl-exc-del {
  background: none; border: none; color: var(--text-secondary);
  font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.sl-vl-del:hover, .sl-exc-del:hover { color: var(--status-warn-text); }
.sl-vl-add { align-self: flex-end; margin-top: 4px; }

/* Exceptions edit table */
.sl-exc-edit td { padding: 4px 6px; }
.sl-exc-edit input[type="text"], .sl-exc-edit input[type="number"] {
  padding: 4px 8px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  width: 100%; min-width: 70px;
}
.sl-exc-edit .sl-exc-sym { text-transform: uppercase; font-weight: 600; }
.sl-exc-edit input[type="checkbox"] { cursor: pointer; }
#slExcAdd { margin-top: 8px; }

/* Sidebar item — shared/share icons */
.ls-item .ls-share-btn {
  margin-left: auto;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.ls-item:hover .ls-share-btn { opacity: 1; }
.ls-item .ls-share-btn:hover { color: var(--primary); background: rgba(58,123,238,0.08); }
.ls-item .ls-shared-badge {
  color: var(--primary);
  margin-left: 4px;
  vertical-align: middle;
}

/* Todos — reporter label on admin-visible bug cards */
.kanban-card-owner {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  background: var(--chip-bg, rgba(58,123,238,0.08));
  color: var(--primary);
  border-radius: 3px;
  font-size: 11px;
}

/* Done column — visually strike out so it reads as "complete" at a glance */
.kanban-col[data-status="done"] .kanban-card-title { text-decoration: line-through; opacity: 0.7; }
.kanban-col[data-status="done"] .kanban-card-body  { opacity: 0.6; }

/* "Bug" provenance tag — appears on a card that was originally in Bugs and
   has since been moved to Done. Includes the reporter's avatar. */
.kanban-bug-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 8px 2px 6px;
  background: rgba(201,106,90,0.12);
  color: #c96a5a;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.kanban-bug-icon { font-size: 13px !important; line-height: 1; }
.kanban-bug-avatar {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,106,90,0.2);
  color: #c96a5a;
  font-size: 10px;
  font-weight: 700;
  margin-left: 2px;
}
img.kanban-bug-avatar { object-fit: cover; }

/* ─── Mind-map editor (Xmind page) ─── */
.xm-overlay {
  position: fixed; inset: 0; background: var(--page-bg);
  display: none;
  z-index: 150;
}
.xm-overlay.visible { display: flex; }
/* Docked by default: left/top/right/bottom are set inline (see _xmSyncDock) so
   the sidebar + header stay visible. Fullscreen clears them and covers all. */
.xm-overlay.xm-fullscreen {
  left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 300;
}
.xm-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
  overflow: hidden;
  min-height: 0;
}
.xm-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.xm-toolbar-spacer { flex: 1; }
.xm-title-input {
  font-size: 15px; font-weight: 700;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 8px;
  color: var(--text-primary);
  min-width: 240px;
  outline: none;
}
.xm-title-input:focus { border-color: var(--border); background: var(--page-bg); }
.xm-dirty-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #f5a623; margin: 0 4px 0 -2px;
}
.xm-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.xm-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(127,127,127,.18) 1px, transparent 1px) 0 0/24px 24px,
    var(--page-bg);
  min-height: 0;
  display: flex;
}
.xm-canvas-focus {
  flex: 1;
  position: relative;
  outline: none;
  display: flex;
}
.xm-canvas-focus:focus { box-shadow: inset 0 0 0 2px rgba(245,166,35,.15); }
.xm-canvas {
  flex: 1;
  width: 100%;
  height: 100%;
  display: block;
}
.xm-edge { fill: none; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.xm-sel-halo { pointer-events: none; }
.xm-node { cursor: grab; pointer-events: all; touch-action: none; }
.xm-node.xm-selected { cursor: grab; }
.xm-node:active { cursor: grabbing; }
.xm-node rect { transition: stroke-width .1s, filter .1s; }
.xm-node:hover rect { filter: brightness(1.05); }

/* ─── Sharing: grid public badge + read-only editor chip ─── */
.xm-public-badge { font-size: 15px; vertical-align: middle; color: var(--text-secondary); }
.xm-ro-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-secondary); background: var(--chip-bg, rgba(127,127,127,.12));
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; margin-left: 6px;
}

/* ─── Toolbar: layout select + export menu ─── */
.xm-layout-select, .xm-mini-select {
  font-size: 12px; padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text-primary);
  outline: none; cursor: pointer; max-width: 170px;
}
.xm-export-menu { position: relative; display: inline-block; }
.xm-export-summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.xm-export-summary::-webkit-details-marker { display: none; }
.xm-export-dropdown {
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; z-index: 10;
  display: flex; flex-direction: column; min-width: 140px;
}
.xm-export-dropdown .xm-btn {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--text-primary); font-size: 13px;
}
.xm-export-dropdown .xm-btn:hover { background: var(--hover-bg, rgba(127,127,127,.12)); }

/* ─── Inspector: style controls ─── */
.xm-style-grid { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.xm-mini-select-wide { width: 100%; max-width: none; }
.xm-style-color, .xm-style-num { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); }
.xm-style-color input[type=color] {
  width: 28px; height: 24px; padding: 0; border: 1px solid var(--border);
  border-radius: 4px; background: none; cursor: pointer;
}
.xm-style-num input {
  width: 46px; padding: 3px 4px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--card-bg); color: var(--text-primary); outline: none;
}
.xm-style-toggle {
  min-width: 28px; height: 26px; border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text-primary); border-radius: 6px; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px;
}
.xm-style-toggle.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ─── Note preview modal ─── */
.xm-note-modal { width: min(640px, 92vw); }
.xm-note-preview-body { max-height: 60vh; overflow: auto; line-height: 1.55; }
.xm-note-preview-body img { max-width: 100%; }
.xm-note-pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; margin: 0; }
.xm-note-empty { color: var(--text-secondary); font-style: italic; }
.xm-chevron { cursor: pointer; }
.xm-chevron:hover circle { filter: brightness(1.2); }
.xm-note-glyph { pointer-events: none; }

/* Drag-ghost — a clone of the source node's pill that follows the cursor,
   plus a small hint underneath that reflects what dropping right now will do. */
.xm-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.92;
  transform: rotate(-1.5deg);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
.xm-ghost-pill {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #3a7cee;
  border-radius: 14px;
  background: #fff;
  color: #222;
  font-size: 13px;
  font-weight: 500;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.xm-ghost-hint {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 2px 8px;
  background: #1f2937;
  color: #fff;
  font-size: 11px;
  border-radius: 4px;
  white-space: nowrap;
}
.xm-drag-ghost.xm-drag-detach .xm-ghost-hint { background: #16a085; }
.xm-drag-ghost.xm-drag-bad    .xm-ghost-hint { background: #c96a5a; }
.xm-drag-ghost.xm-drag-bad    .xm-ghost-pill { border-color: #c96a5a; }
/* Source node fades while its clone is being dragged — visual cue that this
   is the topic on the move. */
.xm-source-dragging { opacity: 0.35; }
html.theme-dark .xm-ghost-hint { background: #221f19; }

/* Drop indicators during drag */
.xm-node.xm-drop-target rect { stroke-dasharray: 4 3; }
.xm-node.xm-drop-on rect     { stroke: #1ecb85 !important; stroke-width: 3 !important; }
.xm-node.xm-drop-before rect { stroke: #1ecb85 !important; stroke-width: 3 !important; transform: translateY(-2px); }
.xm-node.xm-drop-after rect  { stroke: #1ecb85 !important; stroke-width: 3 !important; transform: translateY(2px); }

.xm-edit-input {
  border: 2px solid #f5a623;
  border-radius: 14px;
  background: #fff;
  color: #222;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  outline: none;
  z-index: 5;
  padding: 0 8px;
  box-sizing: border-box;
}
.xm-hint {
  padding: 6px 14px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--surface, #fff);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.xm-hint b { color: var(--text-primary); font-weight: 600; }

/* Inspector — right-side editing panel for the selected topic. Notion-ish:
   neutral surface, generous spacing, no fussy borders, all editing in one
   place. Replaces the older notes-only side panel. */
.xm-inspector {
  width: 320px;
  background: var(--surface, #fff);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}
.xm-insp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.xm-insp-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.xm-insp-close { background: none; border: none; font-size: 20px; line-height: 1; color: var(--text-secondary); cursor: pointer; padding: 0 4px; }
.xm-insp-close:hover { color: var(--text-primary); }
.xm-insp-body { flex: 1; overflow-y: auto; padding: 12px 16px 24px; }
.xm-insp-section { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.04); }
.xm-insp-section:last-child { border-bottom: none; }
.xm-insp-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.xm-insp-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.xm-insp-progress-val { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.xm-insp-title-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  padding: 4px 0;
}
.xm-insp-input, .xm-insp-note {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(0,0,0,.03);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  resize: none;
}
.xm-insp-note { line-height: 1.5; min-height: 80px; }
.xm-insp-input:focus, .xm-insp-note:focus { background: rgba(0,0,0,.05); border-color: var(--border); }

.xm-insp-icon-row { display: flex; gap: 8px; align-items: center; }
.xm-insp-icon-btn {
  display: flex; align-items: center; gap: 8px;
  flex: 1;
  background: rgba(0,0,0,.03);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.xm-insp-icon-btn:hover { background: rgba(0,0,0,.05); }
.xm-insp-icon-btn .material-symbols-outlined { font-size: 18px; }
.xm-insp-clear { background: none; border: none; color: var(--text-secondary); font-size: 12px; cursor: pointer; }
.xm-insp-clear:hover { color: var(--text-primary); }

.xm-icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-top: 8px;
  padding: 8px;
  background: rgba(0,0,0,.03);
  border-radius: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.xm-icon-cell {
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  color: var(--text-primary);
}
.xm-icon-cell:hover { background: rgba(58,123,238,.08); }
.xm-icon-cell.active { border-color: var(--primary); background: rgba(58,123,238,.12); }
.xm-icon-cell .material-symbols-outlined { font-size: 18px; }

.xm-pill-row { display: flex; flex-wrap: wrap; gap: 4px; }
.xm-pill {
  --pill-color: #969dad;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.xm-pill:hover { border-color: var(--pill-color); color: var(--pill-color); }
.xm-status-pill.active {
  background: var(--pill-color);
  border-color: var(--pill-color);
  color: #fff;
}
.xm-pill-clear { color: var(--text-secondary); }

.xm-insp-progress { width: 100%; accent-color: var(--primary); }
.xm-insp-progress[data-off] { opacity: .35; pointer-events: none; }
.xm-insp-row { margin-top: 6px; }
.xm-insp-checkrow { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }

.xm-insp-actions { display: inline-flex; gap: 6px; align-items: center; }
.xm-insp-upload {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(58,123,238,.08);
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  font-family: inherit;
}
.xm-insp-upload:hover { background: rgba(58,123,238,.16); }
.xm-insp-hint { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
html.theme-dark .xm-insp-upload { color: #f5a623; background: rgba(245,166,35,.1); }
html.theme-dark .xm-insp-upload:hover { background: rgba(245,166,35,.2); }

/* ─── Admin: User Activity report ─── */
.aa-wrap { padding: 8px 12px 24px; }
.aa-summary-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.aa-summary-cards { display: flex; gap: 12px; }
.aa-stat {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 120px;
}
.aa-stat-l { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.aa-stat-v { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.aa-range { display: flex; gap: 4px; }
.aa-range-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.aa-range-btn:hover { color: var(--text-primary); }
.aa-range-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.aa-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.aa-table th, .aa-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  text-align: left;
  vertical-align: middle;
}
.aa-table thead th { background: var(--table-header-bg); font-weight: 700; color: var(--table-header-text); font-size: 12px; }
.aa-table tbody tr:last-child td { border-bottom: none; }
.aa-num { text-align: right; font-variant-numeric: tabular-nums; }
.aa-row { cursor: default; }
.aa-row-active td { background: rgba(58,123,238,.04); }
.aa-cell-toggle { width: 32px; }
.aa-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary); padding: 2px 4px; line-height: 0;
}
.aa-toggle .material-symbols-outlined { font-size: 18px; }
.aa-user { display: flex; align-items: center; gap: 10px; }
.aa-avatar-img, .aa-avatar-init {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(58,123,238,.12);
  color: var(--primary);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  object-fit: cover;
}
.aa-user-text { line-height: 1.3; }
.aa-user-name { font-weight: 600; color: var(--text-primary); }
.aa-user-sub { font-size: 11px; color: var(--text-secondary); }
.aa-pages { display: flex; flex-wrap: wrap; gap: 4px; }
.aa-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(58,123,238,.08);
  color: var(--primary);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}
.aa-chip-n { background: rgba(58,123,238,.16); border-radius: 8px; padding: 0 5px; font-size: 10px; }
.aa-blocked-badge {
  display: inline-block;
  background: rgba(201,106,90,.14);
  color: #c96a5a;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  text-transform: uppercase;
  margin-left: 4px;
}
.aa-when { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.aa-empty, .aa-dim { color: var(--text-secondary); }
.aa-empty { text-align: center; padding: 24px; }

.aa-row-detail td { padding: 0 !important; background: rgba(0,0,0,.02); }
.aa-detail { padding: 12px 16px 16px 50px; }
.aa-detail-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.aa-timeline { display: flex; flex-direction: column; gap: 6px; }
.aa-event { display: flex; gap: 12px; align-items: center; font-size: 12px; }
.aa-event-time { color: var(--text-secondary); width: 90px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.aa-event-body { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.aa-event-text { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-page-pill {
  display: inline-block;
  background: rgba(127,127,127,.1);
  color: var(--text-secondary);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}

/* Dark-mode polish */
html.theme-dark .aa-stat,
html.theme-dark .aa-table { background: #141412; border-color: #1f1d19; }
html.theme-dark .aa-table th,
html.theme-dark .aa-table td { border-bottom-color: #1f1d19; }
html.theme-dark .aa-row-active td { background: rgba(245,166,35,.05); }
html.theme-dark .aa-row-detail td { background: rgba(255,255,255,.02); }
html.theme-dark .aa-chip { background: rgba(245,166,35,.1); color: #f5a623; }
html.theme-dark .aa-chip-n { background: rgba(245,166,35,.18); }
html.theme-dark .aa-range-btn { border-color: #2a2620; }
html.theme-dark .aa-range-btn.active { background: #f5a623; border-color: #f5a623; color: #0b0b0b; }

/* ─── Admin Insights (product analytics) ─── */
.ui-wrap { padding: 8px 12px 24px; display: flex; flex-direction: column; gap: 14px; }
.ui-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ui-stat {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.ui-stat-l { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.ui-stat-v { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.ui-stat-hero .ui-stat-v { font-size: 28px; }

.ui-row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
@media (max-width: 900px) { .ui-row { grid-template-columns: 1fr; } }

.ui-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.ui-panel-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.ui-panel-body { padding: 14px; }
.ui-empty { color: var(--text-secondary); font-size: 12px; }

.ui-svg { width: 100%; height: auto; max-height: 200px; display: block; }
.ui-legend { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--text-secondary); }
.ui-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.ui-legend-swatch { display: inline-block; width: 10px; height: 4px; border-radius: 2px; }

.ui-bar-stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; }
.ui-bar-seg { height: 100%; }
.ui-action-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.ui-action-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ui-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.ui-action-name { flex: 1; color: var(--text-primary); text-transform: capitalize; }
.ui-action-count { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.ui-page-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-page-table th, .ui-page-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ui-page-table th { color: var(--text-secondary); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ui-page-name { font-weight: 600; color: var(--text-primary); width: 160px; }
.ui-page-bar { position: relative; background: rgba(127,127,127,.08); border-radius: 4px; height: 18px; min-width: 60px; }
.ui-page-bar-fill { position: absolute; inset: 0; border-radius: 4px; }
.ui-page-actions { background: rgba(58,123,238,.7); }
.ui-page-users   { background: rgba(30,203,133,.7); }
.ui-page-bar-val { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--text-primary); font-variant-numeric: tabular-nums; }

html.theme-dark .ui-stat,
html.theme-dark .ui-panel { background: #141412; border-color: #1f1d19; }
html.theme-dark .ui-page-table td,
html.theme-dark .ui-page-table th,
html.theme-dark .ui-panel-head { border-bottom-color: #1f1d19; }
html.theme-dark .ui-page-actions { background: rgba(245,166,35,.6); }
html.theme-dark .ui-page-users   { background: rgba(143,191,106,.6); }

/* User-filter chips on the Insights page */
.ui-user-filter-head { display: flex; justify-content: space-between; align-items: center; }
.ui-user-filter-meta { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.ui-user-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow-y: auto; }
.ui-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,.04);
  color: var(--text-primary);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.ui-user-chip:hover { background: rgba(58,123,238,.1); }
.ui-user-chip.active {
  background: rgba(58,123,238,.16);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.ui-user-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(127,127,127,.18);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.ui-user-chip.active .ui-user-mark { background: var(--primary); color: #fff; }
.ui-link {
  background: none; border: none;
  color: var(--primary); font-size: 12px;
  cursor: pointer; padding: 0; font-weight: 600;
}
.ui-link:hover { text-decoration: underline; }

html.theme-dark .ui-user-chip { background: rgba(255,255,255,.04); color: #e8e4d8; }
html.theme-dark .ui-user-chip:hover { background: rgba(245,166,35,.1); }
html.theme-dark .ui-user-chip.active { background: rgba(245,166,35,.16); border-color: #f5a623; color: #f5a623; }
html.theme-dark .ui-user-chip.active .ui-user-mark { background: #f5a623; color: #0b0b0b; }
html.theme-dark .ui-link { color: #f5a623; }

/* ─── Admin Background Jobs ─── */
.aj-wrap { padding: 8px 12px 24px; display: flex; flex-direction: column; gap: 14px; }
.aj-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.aj-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.aj-stat { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; min-width: 90px; }
.aj-stat-l { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.aj-stat-v { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.aj-range { display: flex; gap: 4px; }
.aj-range-btn { background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.aj-range-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.aj-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px; }
@media (max-width: 1100px) { .aj-row { grid-template-columns: 1fr; } }
.aj-panel { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.aj-panel-head { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text-primary); display: flex; justify-content: space-between; align-items: center; }
.aj-panel-body { padding: 12px 14px; }
.aj-empty { color: var(--text-secondary); font-size: 12px; padding: 6px 0; }
.aj-num { text-align: right; font-variant-numeric: tabular-nums; }

.aj-pool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.aj-job-table, .aj-lb-table, .aj-tl-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.aj-job-table th, .aj-job-table td,
.aj-lb-table th, .aj-lb-table td,
.aj-tl-table th, .aj-tl-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.aj-job-table thead th,
.aj-lb-table thead th,
.aj-tl-table thead th { color: var(--text-secondary); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.aj-job-table tbody tr { cursor: pointer; }
.aj-job-table tbody tr:hover { background: rgba(58,123,238,.05); }
.aj-row-active td { background: rgba(58,123,238,.08); }

.aj-run { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; cursor: pointer; color: var(--primary); }
.aj-run:hover { border-color: var(--primary); background: rgba(58,123,238,.08); }
.aj-run .material-symbols-outlined { font-size: 14px; vertical-align: middle; }

.aj-cat { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: rgba(127,127,127,.1); color: var(--text-secondary); }
.aj-cat-network { background: rgba(58,123,238,.14); color: #3a7cee; }
.aj-cat-timeout { background: rgba(245,166,35,.14); color: #f5a623; }
.aj-cat-llm     { background: rgba(155,89,182,.14); color: #9b59b6; }
.aj-cat-parse   { background: rgba(150,150,150,.14); color: #969dad; }
.aj-cat-auth    { background: rgba(201,106,90,.14); color: #c96a5a; }
.aj-cat-db      { background: rgba(201,106,90,.16); color: #c96a5a; }
.aj-cat-process { background: rgba(231,76,60,.16); color: #e74c3c; font-weight: 800; }
.aj-cat-off-window, .aj-cat-econ-blackout { background: rgba(150,150,150,.12); color: var(--text-secondary); }

.aj-sev-5 td:first-child { box-shadow: inset 3px 0 0 #e74c3c; }
.aj-sev-4 td:first-child { box-shadow: inset 3px 0 0 #c96a5a; }
.aj-sev-3 td:first-child { box-shadow: inset 3px 0 0 #f5a623; }
.aj-sev-2 td:first-child { box-shadow: inset 3px 0 0 #3a7cee; }
.aj-sev-1 td:first-child { box-shadow: inset 3px 0 0 #969dad; }

.aj-sample { color: var(--text-secondary); font-family: monospace; font-size: 11px; max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.aj-status { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.aj-status-success  { background: rgba(30,203,133,.14); color: #1ecb85; }
.aj-status-failed   { background: rgba(231,76,60,.14); color: #e74c3c; }
.aj-status-retrying { background: rgba(245,166,35,.14); color: #f5a623; }
.aj-status-skipped  { background: rgba(150,150,150,.14); color: var(--text-secondary); }
.aj-status-running  { background: rgba(58,123,238,.14); color: #3a7cee; }

.aj-console { max-height: 280px; overflow-y: auto; background: rgba(0,0,0,.04); border-radius: 6px; padding: 8px; font-family: monospace; font-size: 11px; }
.aj-log-line { display: grid; grid-template-columns: 60px 50px 1fr; gap: 8px; padding: 2px 0; border-bottom: 1px solid rgba(127,127,127,.08); }
.aj-log-ts  { color: var(--text-secondary); }
.aj-log-lvl { font-weight: 700; text-transform: uppercase; }
.aj-log-error .aj-log-lvl { color: #e74c3c; }
.aj-log-warn  .aj-log-lvl { color: #f5a623; }
.aj-log-msg { color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }

.aj-link { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 12px; padding: 0 6px; font-weight: 600; }
.aj-link.active { text-decoration: underline; }
.aj-console-filters { font-weight: 400; }

/* Backlogs panel */
.aj-bl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.aj-bl-tile { background: rgba(0,0,0,.03); border-radius: 6px; padding: 10px 12px; border: 1px solid transparent; }
.aj-bl-tile.aj-bl-warn { border-color: rgba(245,166,35,.3); }
.aj-bl-tile.aj-bl-ok   { border-color: rgba(30,203,133,.3); }
.aj-bl-sample { font-size: 11px; color: var(--text-secondary); margin-top: 4px; font-family: monospace; word-break: break-word; }
.aj-bl-sym { font-size: 11px; color: var(--text-secondary); margin-top: 2px; font-style: italic; }
.aj-bl-actions { display: flex; gap: 8px; margin-top: 12px; }
html.theme-dark .aj-bl-tile { background: rgba(255,255,255,.04); }

/* Task queue */
.aj-queue-actions { display: inline-flex; gap: 8px; font-weight: 400; }
.aj-queue-list { display: flex; flex-direction: column; gap: 4px; }
.aj-q-row {
  display: grid;
  grid-template-columns: 28px 36px 110px 1fr 50px 80px 110px 64px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(0,0,0,.02);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.aj-q-row[draggable="true"] { cursor: grab; }
.aj-q-row.aj-q-dragging { opacity: 0.4; }
.aj-q-row.aj-q-running { background: rgba(58,123,238,.05); border-left: 3px solid #3a7cee; }
.aj-q-row.aj-q-failed  { border-left: 3px solid #c96a5a; }
.aj-q-row.aj-q-done    { opacity: 0.55; }
.aj-q-handle { color: var(--text-secondary); text-align: center; user-select: none; }
.aj-q-pos { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.aj-q-target { font-family: monospace; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj-q-prio { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.aj-q-when { color: var(--text-secondary); white-space: nowrap; }
.aj-q-actions { display: flex; gap: 4px; justify-content: flex-end; }
.aj-q-err {
  grid-column: 3 / -1;
  font-family: monospace; font-size: 11px;
  color: #c96a5a; padding-top: 2px;
  white-space: pre-wrap; word-break: break-word;
}
@media (max-width: 760px) {
  .aj-q-row { grid-template-columns: 28px 1fr 80px 64px; }
  .aj-q-pos, .aj-q-prio, .aj-q-when, .aj-q-status { display: none; }
}
.aj-cat-price-history { background: rgba(58,123,238,.14); color: #3a7cee; }
.aj-cat-daily-cache   { background: rgba(30,203,133,.14); color: #1ecb85; }
.aj-cat-fundamentals  { background: rgba(245,166,35,.14); color: #f5a623; }
.aj-cat-news-batch    { background: rgba(155,89,182,.14); color: #9b59b6; }
html.theme-dark .aj-q-row { background: rgba(255,255,255,.02); border-color: #1f1d19; }
html.theme-dark .aj-q-row.aj-q-running { background: rgba(245,166,35,.05); border-left-color: #f5a623; }

/* ─── Reports picker modal ─── */
/* `.modal.rpt-picker-modal` (specificity 0,0,2,0) beats the generic
   `.modal { width: 420px }` rule that lives later in the file — without
   this the picker collapsed to 420 px and the preview pane was only
   ~140 px wide, which is what made the markdown look like 36 px text
   wrapping word-by-word. */
.modal.rpt-picker-modal { width: min(960px, 96vw) !important; max-width: 96vw !important; }
.rpt-picker-body {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 0;
  padding: 0;
  min-height: 420px;
  max-height: 75vh;
  overflow: hidden;
}
.rpt-picker-list { border-right: 1px solid var(--border); overflow-y: auto; padding: 8px; }
.rpt-picker-section-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); padding: 8px 6px 4px; }
.rpt-picker-card {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent;
  border-radius: 6px; padding: 8px 10px; margin-bottom: 4px;
  cursor: pointer; font-family: inherit;
}
.rpt-picker-card:hover { background: rgba(58,123,238,.06); }
.rpt-picker-card.active { background: rgba(58,123,238,.12); border-color: var(--primary); }
.rpt-picker-icon { font-size: 18px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.rpt-picker-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rpt-picker-card-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.rpt-picker-card-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rpt-picker-preview {
  padding: 16px 22px;
  overflow-y: auto;
  background: rgba(0,0,0,.02);
  min-width: 0; /* allow flex/grid item to shrink so word-wrap kicks in */
  font-size: 13px;
  line-height: 1.55;
}
/* High-specificity overrides — the global .rpt-markdown set was bumping
   headings and bullets to ~20–36px which made the preview unreadable.
   Force a compact, scannable size for everything inside the picker pane. */
.rpt-picker-modal .rpt-picker-preview .rpt-markdown,
.rpt-picker-modal .rpt-picker-preview .rpt-markdown p,
.rpt-picker-modal .rpt-picker-preview .rpt-markdown li {
  font-size: 13px !important;
  line-height: 1.55 !important;
  max-width: none !important;
  word-break: normal;
  overflow-wrap: anywhere;
}
.rpt-picker-modal .rpt-picker-preview .rpt-markdown h1 {
  font-size: 16px !important; font-weight: 700;
  margin: 0 0 8px !important; line-height: 1.3 !important;
}
.rpt-picker-modal .rpt-picker-preview .rpt-markdown h2 {
  font-size: 13px !important; font-weight: 700;
  margin: 12px 0 4px !important; line-height: 1.3 !important;
  color: var(--primary);
  text-transform: uppercase; letter-spacing: .04em;
}
.rpt-picker-modal .rpt-picker-preview .rpt-markdown h3 { font-size: 12px !important; margin: 8px 0 2px !important; }
.rpt-picker-modal .rpt-picker-preview .rpt-markdown ul,
.rpt-picker-modal .rpt-picker-preview .rpt-markdown ol { margin: 4px 0 8px 18px !important; padding: 0; }
.rpt-picker-modal .rpt-picker-preview .rpt-markdown li { margin: 2px 0 !important; }
.rpt-picker-modal .rpt-picker-preview .rpt-markdown p { margin: 4px 0 !important; }
.rpt-picker-modal .rpt-picker-preview .rpt-markdown strong { font-weight: 700; }
.rpt-picker-preview-empty { color: var(--text-secondary); font-size: 13px; font-style: italic; padding-top: 100px; text-align: center; }
.rpt-picker-empty { font-size: 11px; color: var(--text-secondary); padding: 6px 8px; }
.rpt-picker-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; }

/* Stack vertically on narrow viewports (mobile / split panes) so the
   preview gets the full width. The list collapses to a max-height list. */
@media (max-width: 760px) {
  .rpt-picker-body { grid-template-columns: 1fr; max-height: 80vh; }
  .rpt-picker-list { border-right: none; border-bottom: 1px solid var(--border); max-height: 220px; }
  .rpt-picker-preview { padding: 14px 16px; }
}

html.theme-dark .rpt-picker-list { border-right-color: #1f1d19; }
html.theme-dark .rpt-picker-list { border-bottom-color: #1f1d19; }
html.theme-dark .rpt-picker-card:hover { background: rgba(245,166,35,.08); }
html.theme-dark .rpt-picker-card.active { background: rgba(245,166,35,.12); border-color: #f5a623; }
html.theme-dark .rpt-picker-icon { color: #f5a623; }
html.theme-dark .rpt-picker-preview .rpt-markdown h2 { color: #f5a623; }
html.theme-dark .rpt-picker-preview { background: rgba(255,255,255,.02); }

/* ─── Report viewer modal (clicked from the Reports grid) ─── */
/* The default `.modal { width: 420px; }` is way too narrow for a full
   report. This subclass is applied via JS for the duration of the view. */
.modal.rpt-viewer-modal { width: min(1100px, 96vw) !important; max-width: 96vw !important; }
.modal.rpt-viewer-modal .modal-body { padding: 0; }
.rpt-viewer-content { max-height: 80vh; overflow-y: auto; padding: 20px 28px 28px; }
.rpt-viewer-md { max-width: none !important; line-height: 1.6; font-size: 14px; }
.rpt-viewer-md h1 { font-size: 22px; margin: 0 0 12px; }
.rpt-viewer-md h2 { font-size: 16px; margin: 18px 0 8px; }
.rpt-viewer-md ul { margin: 0 0 12px 24px; }
.rpt-viewer-md li { margin: 4px 0; }

.rpt-bench-block { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
.rpt-bench-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.rpt-bench-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpt-bench-table th, .rpt-bench-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.rpt-bench-table thead th { background: var(--table-header-bg); color: var(--text-secondary); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.rpt-bench-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rpt-bench-table tbody tr:last-child td { border-bottom: none; }

html.theme-dark .rpt-bench-block { border-top-color: #1f1d19; }
html.theme-dark .rpt-bench-table th,
html.theme-dark .rpt-bench-table td { border-bottom-color: #1f1d19; }

html.theme-dark .aj-stat,
html.theme-dark .aj-panel { background: #141412; border-color: #1f1d19; }
html.theme-dark .aj-job-table th, html.theme-dark .aj-job-table td,
html.theme-dark .aj-lb-table th, html.theme-dark .aj-lb-table td,
html.theme-dark .aj-tl-table th, html.theme-dark .aj-tl-table td,
html.theme-dark .aj-panel-head { border-bottom-color: #1f1d19; }
html.theme-dark .aj-job-table tbody tr:hover { background: rgba(245,166,35,.06); }
html.theme-dark .aj-row-active td { background: rgba(245,166,35,.08); }
html.theme-dark .aj-console { background: rgba(255,255,255,.03); }
html.theme-dark .aj-range-btn { border-color: #2a2620; }
html.theme-dark .aj-range-btn.active { background: #f5a623; border-color: #f5a623; color: #0b0b0b; }

.xm-img-preview {
  display: block;
  max-width: 100%;
  max-height: 140px;
  margin-top: 8px;
  border-radius: 6px;
  object-fit: cover;
}

.xm-insp-danger {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: #c96a5a;
  cursor: pointer;
  text-align: left;
  display: flex; align-items: center; gap: 6px;
}
.xm-insp-danger:hover { background: rgba(201,106,90,.08); border-color: #c96a5a; }

/* SVG glyph fonts inside nodes */
.xm-svg-icon { dominant-baseline: middle; }
.xm-svg-image { cursor: pointer; }
.xm-badge-link { cursor: pointer; }
.xm-badge-link:hover, .xm-svg-image:hover { filter: brightness(1.1); }

/* Dark mode polish */
html.theme-dark .xm-inspector { background: #141412; border-left-color: #1f1d19; }
html.theme-dark .xm-insp-section { border-bottom-color: rgba(255,255,255,.04); }
html.theme-dark .xm-insp-input,
html.theme-dark .xm-insp-note,
html.theme-dark .xm-insp-icon-btn,
html.theme-dark .xm-icon-grid { background: rgba(255,255,255,.04); color: #e8e4d8; }
html.theme-dark .xm-insp-input:focus,
html.theme-dark .xm-insp-note:focus { background: rgba(255,255,255,.06); border-color: #2a2620; }
html.theme-dark .xm-insp-icon-btn:hover { background: rgba(255,255,255,.06); }
html.theme-dark .xm-icon-cell:hover { background: rgba(245,166,35,.1); }
html.theme-dark .xm-icon-cell.active { background: rgba(245,166,35,.16); border-color: #f5a623; color: #f5a623; }
html.theme-dark .xm-pill { border-color: #2a2620; }
html.theme-dark .xm-status-pill.active { color: #0b0b0b; }
html.theme-dark .xm-insp-danger { border-color: #2a2620; }

/* Dark-mode polish */
html.theme-dark .xm-overlay { background: #0b0b0b; }
html.theme-dark .xm-editor { background: #0b0b0b; }
html.theme-dark .xm-toolbar { background: #141412; border-bottom-color: #1f1d19; }
html.theme-dark .xm-title-input { color: #e8e4d8; }
html.theme-dark .xm-title-input:focus { border-color: #2a2620; background: #0b0b0b; }
html.theme-dark .xm-sep { background: #1f1d19; }
html.theme-dark .xm-hint { background: #141412; border-top-color: #1f1d19; }
html.theme-dark .xm-canvas-wrap {
  background:
    radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/24px 24px,
    #0b0b0b;
}
html.theme-dark .xm-node:not(.xm-root) rect { fill: #1a1814 !important; }
html.theme-dark .xm-node:not(.xm-root) text { fill: #e8e4d8 !important; }
html.theme-dark .xm-node.xm-root rect { fill: #2a2620 !important; }
html.theme-dark .xm-node.xm-root text { fill: #f5a623 !important; }
html.theme-dark .xm-edit-input { background: #1a1814; color: #e8e4d8; border-color: #f5a623; }
html.theme-dark .xm-notes-panel { background: #141412; border-left-color: #1f1d19; }

/* ─── Mobile — sidebar becomes a slide-in drawer ─── */
.mobile-menu-btn {
  display: none; /* shown only on mobile via media query */
  touch-action: manipulation;
  position: fixed;
  /* Push below the iPhone Dynamic Island / notch in installed PWA mode.
     env() is 0 everywhere else so this doesn't affect other devices. */
  top:  calc(10px + env(safe-area-inset-top));
  left: calc(10px + env(safe-area-inset-left));
  z-index: 45;
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-primary);
  cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.mobile-menu-btn .material-symbols-outlined { font-size: 22px; }

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 48;
}
.sidebar-backdrop.visible { display: block; }

@media (max-width: 700px) {
  .mobile-menu-btn { display: inline-flex; }
  .sidebar.collapsed { width: 280px; } /* disable collapsed state on mobile */
  /* Main content uses the full width; no left gutter on mobile */
  .main-area { width: 100%; }
  /* Top header leaves room for the floating hamburger at (10, 10) */
  .top-header { padding-left: 60px !important; }
  /* Positioning + transform handled in responsive.css */
}

/* ─── Impersonation banner ─── */
.imp-banner {
  display: none; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: #fff8ee; color: #8a5c14;
  border-bottom: 1px solid #f5a623;
  font-size: 13px;
}
.imp-banner.visible { display: flex; }
.imp-banner-icon { font-size: 18px; color: #f5a623; }
.imp-banner-text { flex: 1; }
.imp-banner-text strong { color: #5c3d0e; }
.imp-banner-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; font-size: 12px; font-weight: 600;
  background: #f5a623; color: #fff; border: none; border-radius: 4px;
  cursor: pointer; font-family: var(--font);
  transition: background 0.15s;
}
.imp-banner-btn:hover { background: #d48914; }
.imp-banner-btn .material-symbols-outlined { font-size: 14px; }
html.theme-dark .imp-banner { background: rgba(245,166,35,.12); color: #f5a623; border-bottom-color: #8a5c14; }
html.theme-dark .imp-banner-text strong { color: #f5a623; }

/* ─── Mobile search button + overlay ─── */
.header-search-mobile-btn {
  display: none; /* shown via media query */
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  background: var(--card-bg); color: var(--text-secondary);
  border-radius: 8px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.header-search-mobile-btn:hover { color: var(--primary); border-color: var(--primary); }
.header-search-mobile-btn .material-symbols-outlined { font-size: 18px; }

.mobile-search-overlay {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--card-bg);
  padding: 10px 12px;
  align-items: center; gap: 8px;
  z-index: 90;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.mobile-search-overlay.visible { display: flex; }
.mobile-search-overlay .mobile-search-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: none; background: transparent; color: var(--text-secondary);
  cursor: pointer;
}
.mobile-search-overlay .mobile-search-close:hover { color: var(--text-primary); }
.mobile-search-overlay .mobile-search-input {
  flex: 1; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-family: var(--font); font-size: 14px;
  color: var(--text-primary); background: var(--search-bg); outline: none;
}
html.theme-dark .mobile-search-overlay { background: #141412; border-color: #1f1d19; }
html.theme-dark .header-search-mobile-btn { background: #141412; border-color: #2a2620; }

/* ─── Mobile card view — alternative to data-table on narrow screens ─── */
.mobile-cards {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
}
.mobile-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.mobile-card:active { background: var(--search-bg); }
.mobile-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.mobile-card-title {
  font-size: 16px; font-weight: 700; color: var(--text-primary);
  letter-spacing: 0.01em;
}
.mobile-card-lead { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.mobile-card-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: 12px; color: var(--text-secondary);
}
.mobile-card-meta .mc-k { color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; margin-right: 4px; }
.mobile-card-meta .mc-v { color: var(--text-primary); font-weight: 500; }
.mobile-card-empty {
  padding: 32px 16px; text-align: center; color: var(--text-secondary);
}
/* Full-width long-form note under the meta row. Used for the tradinglog
   "insight" field — needs to wrap, not truncate. */
.mobile-card-note {
  margin-top: 4px; padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 12px; color: var(--text-secondary); line-height: 1.45;
  white-space: pre-wrap;
}
html.theme-dark .mobile-card { background: #141412; border-color: #1f1d19; }
html.theme-dark .mobile-card:active { background: #1a1814; }

/* Admin users table */
.admin-users-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.admin-users-table th {
  text-align: left; padding: 8px 10px; font-weight: 600; font-size: 12px;
  color: var(--table-header-text); background: var(--table-header-bg);
  border-bottom: 2px solid var(--border);
}
.admin-users-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle;
}
.admin-users-table tr:hover td { background: var(--search-bg); }
.admin-row-blocked td { opacity: 0.5; }
.admin-avatar {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block;
}
.admin-avatar-initials {
  background: var(--primary); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 600;
}
.admin-role-badge {
  font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 600;
}
.admin-role-super_admin { background: #fef3c7; color: #92400e; }
.admin-role-admin { background: #dbeafe; color: #1e40af; }
.admin-role-user { background: var(--chip-bg); color: var(--text-secondary); }
.admin-actions { white-space: nowrap; }
.admin-actions .btn-sm { padding: 4px 6px; margin-left: 4px; }

/* ─── Graph / Chart page ─── */
.graph-page { display: flex; flex-direction: column; height: calc(100vh - 180px); }
.graph-controls {
  display: flex; align-items: center; gap: 16px; padding: 0 0 12px; flex-wrap: wrap;
}
.graph-symbol-wrap { display: flex; gap: 6px; align-items: center; }
.graph-symbol-input { font-size: 15px !important; padding: 6px 10px !important; }
.graph-btn-group {
  display: flex; gap: 1px; background: var(--border); border-radius: 4px; overflow: hidden;
}
.graph-toggle-btn {
  padding: 5px 10px; font-size: 12px; font-weight: 600; border: none;
  background: var(--card-bg); color: var(--text-secondary); cursor: pointer;
  transition: background 0.12s, color 0.12s; display: flex; align-items: center;
}
.graph-toggle-btn:hover { background: var(--search-bg); color: var(--text-primary); }
.graph-toggle-btn.active { background: var(--primary); color: #fff; }
.graph-range-btns { display: flex; gap: 2px; }
.graph-range-btn {
  padding: 5px 12px; font-size: 12px; font-weight: 600; border: none;
  background: transparent; color: var(--text-secondary); cursor: pointer;
  border-radius: 4px; transition: background 0.12s, color 0.12s;
}
.graph-range-btn:hover { background: rgba(58,124,238,0.08); color: var(--text-primary); }
.graph-range-btn.active { background: var(--primary); color: #fff; }
.graph-sma-toggles { display: flex; gap: 4px; }
.graph-sma-btn {
  padding: 3px 8px; font-size: 11px; font-weight: 600; border: 1px solid var(--border);
  background: transparent; color: var(--text-secondary); cursor: pointer;
  border-radius: 4px; transition: all 0.12s;
}
.graph-sma-btn.active { border-color: var(--sma-color); color: var(--sma-color); background: rgba(255,255,255,0.04); }
.graph-sma-btn:hover { border-color: var(--sma-color); }
.graph-sma-legend { display: flex; gap: 14px; font-size: 12px; font-weight: 600; margin-left: auto; }
.graph-sma-tag { white-space: nowrap; }

/* Detected-chart-pattern chip — toggles the overlay + opens its info modal. */
.graph-pattern-chip { display: inline-flex; align-items: center; gap: 2px; }
.graph-pattern-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.2px;
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
  cursor: pointer; border-radius: 4px; transition: all 0.12s; white-space: nowrap;
}
.graph-pattern-toggle.active { color: var(--text-primary); border-color: var(--text-secondary); }
.graph-pattern-toggle:not(.active) { opacity: 0.6; }
.graph-pattern-toggle .gpc-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); flex-shrink: 0;
}
.gpc-dot--bullish { background: var(--pattern-bull) !important; }
.gpc-dot--bearish { background: var(--pattern-bear) !important; }
.gpc-dot--neutral { background: var(--pattern-neutral) !important; }
.graph-pattern-info {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px; background: transparent; border: none; cursor: pointer; color: var(--text-secondary);
}
.graph-pattern-info:hover { color: var(--text-primary); }
.graph-pattern-info .material-symbols-outlined { font-size: 16px; }
.graph-title-bar {
  display: flex; align-items: center; gap: 12px; padding: 0 0 6px;
  font-size: 13px; color: var(--text-secondary);
}
.graph-symbol-label { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.graph-ohlc b { color: var(--text-primary); }
.graph-container { flex: 1; min-height: 400px; border-radius: var(--radius); overflow: hidden; }

/* ─── Content ─── */
/* This is the page-level scroll container. Sticky <th> elements use this
   as their scroll ancestor (top: 0 sticks to top of .content's scrollport).
   IMPORTANT: padding-top is 0 here — browsers stick sticky children at the
   top of the content-box (inside padding-top), so a non-zero padding-top
   creates a visible gap above the sticky header where scrolling rows can
   peek through. The top offset is applied via the first child instead. */
.content {
  flex: 1;
  overflow: auto;
  padding: 0 24px 20px 24px;
}
.content > :first-child { margin-top: 20px; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.breadcrumb a { color: var(--table-header-text); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Page title row */
.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.page-title { font-size: 20px; font-weight: 700; }

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

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

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-secondary:hover { background: var(--page-bg); }
.btn-link { background: none; border: none; color: #3a7cee; cursor: pointer; font-family: 'Open Sans', sans-serif; display: inline-flex; align-items: center; gap: 4px; }
.btn-link:hover { text-decoration: underline; }
.btn-loading { opacity: 0.6; pointer-events: none; }
.btn-loading .material-symbols-outlined { animation: btn-spin 0.8s linear infinite; }
@keyframes btn-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.btn-refresh { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: #969dad; cursor: pointer; transition: all 0.15s; margin-left: 4px; }
.btn-refresh:hover { color: var(--primary); border-color: var(--primary); background: #f0f5ff; }
.btn-refresh .material-symbols-outlined { font-size: 18px; }

/* Icon-only action button — same footprint as btn-refresh, used for
   secondary page actions (e.g. View Settings). Native title= provides hover tooltip. */
.btn-icon-only {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--card-bg); color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s; margin-left: 4px;
}
.btn-icon-only:hover { color: var(--primary); border-color: var(--primary); }
.btn-icon-only .material-symbols-outlined { font-size: 18px; }
html.theme-dark .btn-icon-only { background: #141412; border-color: #2a2620; color: #6e6b63; }
html.theme-dark .btn-icon-only:hover { color: #f5a623; border-color: #f5a623; background: rgba(245,166,35,.06); }

/* ─── Table toolbar ─── */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.table-search {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  background: #fff;
  width: 200px;
}

.table-search input {
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  width: 100%;
}

.table-search input::placeholder { color: var(--text-secondary); }

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.pagination select {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  background: #fff;
  outline: none;
}

.page-info { color: var(--text-primary); }

/* ─── Data table ─── */
/* IMPORTANT: the wrapper must NOT be a scroll container on desktop.
   If it sets overflow on EITHER axis (even overflow-x: auto), the CSS spec
   coerces the other axis to auto too — making the wrapper the scroll
   ancestor for sticky <th>, which then sticks to the wrapper's top (useless,
   since the wrapper doesn't scroll vertically in practice).
   Instead, we let .content handle both X and Y scrolling so sticky works. */
.data-table-wrapper {
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: visible;
  margin-top: 12px;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  /* fixed layout makes the per-column `width` style on <th> authoritative.
     Without it the browser reads widths as hints and content could push a
     column wider — which is why "Symbol = 80px" in column settings was
     showing up at the natural content width instead. Columns without an
     explicit width share the remainder equally. */
  table-layout: fixed;
}

.data-table thead th {
  background: var(--table-header-bg);
  color: var(--table-header-text);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  /* Solid background behind sticky header so content scrolling underneath doesn't show through */
  box-shadow: 0 1px 0 0 var(--border);
}

.data-table thead th:last-child { border-right: none; }
.data-table thead th.center { text-align: center; }

.data-table tbody tr {
  transition: background 0.1s;
  cursor: pointer;
  /* The wrapper has overflow:visible (so sticky thead works), which means
     a table wider than its container bleeds past the wrapper's background.
     Giving each row its own background keeps every column on the same
     surface color — otherwise the right-most columns land on --page-bg
     and visually drop off the grid. */
  background: var(--card-bg);
}

.data-table tbody tr:hover { background: #f8faff; }

.data-table tbody td {
  padding: 12px 8px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  /* Required companion to `table-layout: fixed`: clip values that don't
     fit the column instead of letting them wrap and break row height. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table tbody td:last-child { border-right: none; }
.data-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody td.center { text-align: center; }
.data-table thead th.num, .data-table tbody td.num { text-align: right; }
.data-table thead th.align-right, .data-table tbody td.align-right { text-align: right; }

/* Custom formula columns (Column Settings modal) */
.cs-cc-form { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--page-bg); border: 1px solid var(--border); border-radius: 6px; }
.cs-cc-row { display: flex; align-items: center; gap: 10px; }
.cs-cc-row > .form-label { width: 90px; font-size: 12px; color: var(--text-secondary); margin: 0; }
.cs-cc-vars-wrap { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cs-cc-var { display: flex; align-items: center; gap: 6px; }
.cs-cc-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 4px;
  background: var(--primary); color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700;
}
.cs-cc-var-select, .cs-cc-var-manual { font-size: 12px; padding: 4px 8px; }
.cs-cc-preview { font-size: 12px; color: var(--text-secondary); padding: 4px 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cs-cc-preview.ok { color: var(--status-active-text); }
.cs-cc-preview.err { color: var(--status-warn-text); }
.cs-section-subtitle { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); font-weight: 600; margin-bottom: 6px; }
/* Properties tab fields use a single horizontal label/input/info layout.
   Inputs flex to a consistent width across rows so the column of inputs
   aligns vertically; the info icon (when present) sits to the right of
   the input and reveals its hint via native title= on hover. */
.cs-field .form-input { flex: 1 1 auto; max-width: 320px; }
.cs-info {
  font-size: 16px;
  color: var(--text-secondary);
  cursor: help;
  user-select: none;
  flex-shrink: 0;
}
.cs-info:hover, .cs-info:focus { color: var(--text-primary); outline: none; }
.cs-icon-preview {
  font-size: 22px;
  color: var(--text-secondary);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.cs-cc-list { display: flex; flex-direction: column; gap: 4px; }
.cs-cc-item {
  display: grid; grid-template-columns: 1fr 1.2fr 1.2fr 24px; gap: 10px; align-items: center;
  padding: 6px 8px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 4px;
  font-size: 12px;
}
.cs-cc-item .cs-cc-label { font-weight: 600; color: var(--text-primary); }
.cs-cc-item .cs-cc-expr, .cs-cc-item .cs-cc-vars { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text-secondary); }
.cs-cc-item code { background: var(--chip-bg); padding: 1px 4px; border-radius: 3px; margin-right: 3px; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 40px 8px !important;
  color: var(--text-secondary);
  font-size: 14px;
}

/* ─── Cell styles ─── */

/* Symbol cell — bold symbol + secondary name */
.symbol-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Ticker pill — used everywhere a symbol is rendered (symH()). Matches the
   Figma Index-page chip design: subtle blue bg, ticker-blue text, rounded
   pill shape, hover brightens. Applies uniformly across watchlist,
   portfolio, cache, filings, news, trading, stoploss, calendar, etc. */
.symbol, .chip-sym {
  display: inline-flex;
  align-items: center;
  background: rgba(58, 124, 238, 0.12);
  color: #3a7cee;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 40px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s;
}
.symbol:hover, .chip-sym:hover { background: rgba(58, 124, 238, 0.22); }

/* Symbol-cell variant (table cells that stack symbol + company name below)
   keeps its layout but the pill styling above still applies to the inner span. */
.symbol-cell .symbol { font-weight: 700; }
html.theme-dark .symbol,
html.theme-dark .chip-sym { background: rgba(58, 124, 238, 0.18); color: #6ea6ff; }
html.theme-dark .symbol:hover,
html.theme-dark .chip-sym:hover { background: rgba(58, 124, 238, 0.28); }

.symbol-cell .company {
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Status badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 3px;
  font-size: 13px;
  line-height: 16px;
  white-space: nowrap;
}

.status-badge.active   { background: var(--status-active-bg);   color: var(--status-active-text); }
.status-badge.inactive { background: var(--status-inactive-bg); color: var(--status-inactive-text); }
.status-badge.warn     { background: var(--status-warn-bg);     color: var(--status-warn-text); }

/* Chip / tag */
.chip {
  display: inline-flex;
  align-items: center;
  background: var(--chip-bg);
  color: var(--text-primary);
  padding: 3px 8px;
  border-radius: 40px;
  font-size: 12px;
  white-space: nowrap;
}

.tags-cell { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* Multi-chip cell (news Symbols / Tags / etc.) — first 2 visible then +N.
   .chip-sym is already styled via the unified .symbol rule above; the
   rules here just handle spacing between siblings, tag styling, and the
   muted overflow badge. Figma Index-page reference. */
.chip-sym, .chip-tag, .chip-overflow { margin-right: 4px; }
.chip-tag {
  background: var(--chip-bg);
  color: var(--text-secondary);
  font-size: 11px;
}
.chip-overflow {
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  padding: 3px 6px;
  border: 1px dashed var(--border);
  cursor: help;
}
html.theme-dark .chip-overflow { border-color: #2a2620; }

/* Numeric cells */
.num-positive { color: var(--status-active-text); font-weight: 600; }
.num-negative { color: var(--status-warn-text); font-weight: 600; }
.num-yellow   { color: var(--status-inactive-text); font-weight: 600; }
.num-neutral  { color: var(--text-primary); }

/* Date cell */
.date-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
}

.date-cell .date { color: var(--text-primary); font-size: 13px; }
.date-cell .time { color: var(--text-secondary); font-size: 12px; }

/* Row actions */
.row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.data-table tbody tr:hover .row-actions { opacity: 1; }

.row-actions span {
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
}

.row-actions span:hover { color: var(--text-primary); }

/* ─── Modal ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-overlay.visible { display: flex; }

.modal {
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 420px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 16px;
}

.modal-close { cursor: pointer; color: var(--text-secondary); font-size: 20px; }
.modal-close:hover { color: var(--text-primary); }

.modal-body { padding: 20px; }

/* Shared info ("i") modal — see frontEnd/js/lib/info-modal.js */
.info-modal-body .im-text {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
}
.info-modal-body .im-text:last-child { margin-bottom: 0; }
.info-modal-body .im-meta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}
.info-modal-body .im-meta-label { font-weight: 600; color: var(--text-primary); }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}

.form-input:focus { border-color: var(--primary); }

.form-hint { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }

/* Buy/Sell action toggle inside the holding modal — segmented pill,
 * green when "Buy" is selected, red when "Sell" is selected. The hidden
 * radio input drives state via :has(input:checked). */
.bs-toggle-wrap { margin-bottom: 14px; }
.bs-toggle {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--page-bg);
  padding: 3px;
  gap: 3px;
}
.bs-toggle-opt {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: transparent;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  user-select: none;
}
.bs-toggle-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bs-toggle-opt::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.bs-toggle-opt:hover { color: var(--text-primary); }
.bs-toggle-buy:has(input:checked) {
  color: var(--status-active-text);
  background: var(--status-active-bg);
  box-shadow: inset 0 0 0 1px var(--status-active-text);
}
.bs-toggle-sell:has(input:checked) {
  color: var(--status-warn-text);
  background: var(--status-warn-bg);
  box-shadow: inset 0 0 0 1px var(--status-warn-text);
}
.bs-toggle-opt:has(input:checked)::before { opacity: 1; }

/* Confirm button mirrors the selected action's color */
.btn-buy { background: var(--status-active-text) !important; border-color: var(--status-active-text) !important; color: #fff !important; }
.btn-buy:hover { filter: brightness(0.95); }
.btn-sell { background: var(--status-warn-text) !important; border-color: var(--status-warn-text) !important; color: #fff !important; }
.btn-sell:hover { filter: brightness(0.95); }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }

/* ─── Toast ─── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--sidebar-bg);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  z-index: 200;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.toast.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ─── Global search results ─── */
.header-search { z-index: 60; }
.search-scope-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  min-width: 140px;
  z-index: 61;
  padding: 4px 0;
}
.search-scope-menu.open { display: block; }
.scope-item {
  display: block;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
}
.scope-item:hover { background: var(--page-bg); }
.scope-item.active { color: var(--primary); font-weight: 600; }

.search-results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 420px;
  overflow-y: auto;
  z-index: 62;
}
.search-results.open { display: block; }
.sr-section { padding: 4px 0; }
.sr-section + .sr-section { border-top: 1px solid var(--border); }
.sr-section-title {
  padding: 6px 14px 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}
.sr-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.1s;
}
.sr-item:hover { background: var(--page-bg); }
.sr-item .sr-sym { font-weight: 700; color: var(--table-header-text); min-width: 50px; }
.sr-item .sr-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-item .sr-meta { color: var(--text-secondary); font-size: 12px; flex-shrink: 0; }
.sr-empty { padding: 12px 14px; font-size: 13px; color: var(--text-secondary); text-align: center; }

/* ─── List / Portfolio selector ─── */
.title-with-selector { display: flex; align-items: center; gap: 12px; }
.list-selector { position: relative; }
.list-selector-hidden { display: none !important; }
.list-selector-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 10px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--table-header-text);
  cursor: pointer;
  transition: background 0.15s;
}
.list-selector-btn:hover { background: #e8eeff; }
.list-selector-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  min-width: 180px;
  z-index: 50;
  padding: 4px 0;
}
.list-selector-menu.open { display: block; }
.ls-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.1s;
}
.ls-item:hover { background: var(--page-bg); }
.ls-item.active { color: var(--primary); font-weight: 600; }
.ls-item .ls-count { color: var(--text-secondary); font-size: 12px; }

/* ─── Sidebar nesting (Item 2) ─── */
.nav-parent {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--sidebar-text);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
}
.nav-parent:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.nav-parent .icon { font-size: 20px; flex-shrink: 0; width: 24px; text-align: center; }
.nav-chevron { font-size: 18px !important; margin-left: auto; transition: transform 0.2s; }
.nav-group.collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-children { overflow: hidden; max-height: 500px; transition: max-height 0.25s ease; }
.nav-group.collapsed .nav-children { max-height: 0; }
.nav-item.l2 { padding-left: 50px; font-size: 13px; }
.nav-item.l3 { padding-left: 66px; font-size: 12px; }
.sidebar.collapsed .nav-chevron { display: none; }
.sidebar.collapsed .nav-children { max-height: 0; }
.sidebar.collapsed .nav-parent { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .nav-parent .nav-label { display: none; }
.sidebar.collapsed .nav-item.l2 { padding-left: 0; justify-content: center; }

/* ─── Pagination buttons (Item 3) ─── */
.toolbar-right { display: flex; align-items: center; gap: 8px; }
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  padding: 2px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.15s, background 0.15s;
}
.pg-btn:hover { color: var(--text-primary); background: var(--page-bg); }
.pg-btn:disabled { opacity: 0.35; cursor: default; background: #fff; }
.pg-btn .material-symbols-outlined { font-size: 18px; }

/* View selector (saved column configurations per grid) */
.view-selector { position: relative; margin-right: 6px; }
.view-selector-btn {
  display: inline-flex; align-items: center; gap: 6px; width: auto;
  padding: 0 10px; height: 30px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--card-bg); color: var(--text-primary);
  font-size: 12px; cursor: pointer; transition: border-color .15s, color .15s;
}
.view-selector-btn:hover { border-color: var(--primary); color: var(--primary); }
.view-selector-btn .material-symbols-outlined { font-size: 16px; }
.view-sel-caret { color: var(--text-secondary); }
.view-selector-btn #viewSelName {
  font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-selector-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 220px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 50; padding: 6px 0; font-size: 13px;
}
.view-selector-menu.open { display: block; }
.view-sel-list { max-height: 260px; overflow-y: auto; }
.view-sel-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  cursor: pointer; transition: background .12s;
}
.view-sel-item:hover { background: var(--search-bg); }
.view-sel-item.active { color: var(--primary); }
.view-sel-check { font-size: 16px; width: 18px; color: var(--primary); }
.view-sel-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-sel-del { font-size: 16px; color: var(--text-secondary); visibility: hidden; }
.view-sel-item:hover .view-sel-del { visibility: visible; }
.view-sel-del:hover { color: var(--status-warn-text); }
.view-sel-sep { height: 1px; background: var(--border); margin: 4px 0; }
.view-sel-action {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; cursor: pointer; color: var(--text-primary);
}
.view-sel-action:hover { background: var(--search-bg); }
.view-sel-action .material-symbols-outlined { font-size: 16px; color: var(--text-secondary); }
html.theme-dark .view-selector-menu { background: #141412; border-color: #1f1d19; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
html.theme-dark .view-sel-item:hover, html.theme-dark .view-sel-action:hover { background: #1a1814; }
html.theme-dark .view-sel-sep { background: #1f1d19; }

/* Toolbar tool group (columns / filter / activity icons) */
.toolbar-tools { display: inline-flex; align-items: center; gap: 4px; padding-left: 8px; border-left: 1px solid var(--border); margin-left: 4px; }
.toolbar-tools .pg-btn { opacity: 1; }
.toolbar-tools .pg-btn.has-filter { color: var(--primary); position: relative; }
.toolbar-tools .pg-btn.has-filter::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
}
html.theme-dark .toolbar-tools { border-left-color: #1f1d19; }

/* ─── More actions menu (Item 4) ─── */
.more-actions-wrapper { position: relative; }
.more-actions-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  min-width: 200px;
  z-index: 50;
  padding: 6px 0;
}
.more-actions-menu.open { display: block; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.1s;
}
.menu-item:hover { background: var(--page-bg); }
.menu-item .material-symbols-outlined { font-size: 16px; color: var(--text-secondary); }
.menu-sep { height: 1px; background: var(--border); margin: 4px 16px; }
.menu-label { padding: 6px 16px 2px; font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.menu-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.menu-toggle input { accent-color: var(--primary); }

/* ─── Table header action icons (Item 5) ─── */
.th-icon {
  font-size: 18px;
  color: var(--table-header-text);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  transition: background 0.15s;
  vertical-align: middle;
}
.th-icon:hover { background: rgba(58, 123, 238, 0.1); }
.data-table thead th .th-filter-active {
  font-size: 16px !important;
  color: var(--primary) !important;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
  font-variation-settings: 'FILL' 1;
}
.data-table thead th .th-filter-active:hover { filter: brightness(0.85); }

/* Column settings modal */
.modal-lg { width: 1041px; max-width: 95vw; max-height: 80vh; display: flex; flex-direction: column; }
.modal-md { width: 720px; max-width: 95vw; }
/* Phone-sized variant used by the news + SEC filings "Summary click → modal"
   flow. Narrow column, tall body, vertical scroll. Mobile collapses to the
   standard bottom-sheet treatment via the existing .modal-overlay rules. */
.modal-summary {
  width: 400px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.modal-summary .summary-modal-body { padding: 16px 20px; line-height: 1.55; }
.summary-modal-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; }

/* Daily Quote modal — narrow, generous padding, large serif blockquote
   so the moment feels distinct from the data-heavy table surfaces. */
.modal-quote {
  width: 520px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.modal-quote .quote-modal-body {
  padding: 28px 32px;
  text-align: center;
}
.modal-quote blockquote {
  margin: 0 0 16px 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-primary, #e8e4d8);
  font-style: italic;
}
.modal-quote blockquote::before { content: '“'; font-size: 34px; vertical-align: -8px; opacity: 0.5; margin-right: 4px; }
.modal-quote blockquote::after  { content: '”'; font-size: 34px; vertical-align: -8px; opacity: 0.5; margin-left: 4px; }
.modal-quote .quote-author {
  font-size: 13px;
  color: var(--text-secondary, #94a3b8);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.modal-quote .quote-author::before { content: '— '; opacity: 0.7; }
.modal-quote .quote-source {
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  opacity: 0.7;
  margin-top: 2px;
}
.modal-quote .quote-image {
  display: block;
  max-width: 100%;
  max-height: 50vh;
  margin: 16px auto 0 auto;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  background: rgba(0,0,0,0.18);
}
.modal-quote .quote-image[hidden] { display: none; }
.modal-quote .quote-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  gap: 12px;
}
.modal-quote .quote-nav-btn {
  background: transparent; border: 1px solid var(--border, rgba(255,255,255,0.08));
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 120ms, border-color 120ms;
}
.modal-quote .quote-nav-btn:hover { color: var(--text-primary, #e8e4d8); border-color: var(--text-secondary, #94a3b8); }
.modal-quote .quote-position {
  font-size: 11.5px;
  color: var(--text-secondary, #94a3b8);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.modal-body-scroll { overflow-y: auto; flex: 1; padding: 20px 24px; }
/* Lock the grid-settings modal to a fixed envelope so the modal doesn't
   resize when switching between Columns / Index Properties / Actions tabs.
   The body keeps its own scroll via .modal-body-scroll, so taller content
   scrolls inside instead of growing the modal. */
#colSettingsOverlay .modal {
  height: 80vh;
  min-height: 520px;
}
.modal-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 24px; }
/* Dual-label tabs: show full on desktop, short on mobile. Wrap the label
   inside <span class="tab-full"> / <span class="tab-short"> — CSS below
   toggles them. */
.tab-full { display: inline; }
.tab-short { display: none; }
.tab {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font);
  transition: color 0.15s;
}
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tab:hover { color: var(--primary); }
.settings-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.settings-table thead th {
  background: var(--table-header-bg);
  padding: 10px 8px;
  text-align: left;
  font-weight: 700;
  color: var(--table-header-text);
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.settings-table tbody td { padding: 8px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.settings-table tbody tr:nth-child(even) { background: var(--table-header-bg); }
.settings-table .form-input { padding: 4px 8px; font-size: 13px; }
.settings-table .toggle-switch { accent-color: var(--primary); width: 16px; height: 16px; }

/* Filter modal */
.filter-rows { display: flex; flex-direction: column; gap: 6px; }
.filter-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}
.filter-row select, .filter-row input {
  font-family: var(--font);
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  outline: none;
  background: #fff;
}
.filter-row select:focus, .filter-row input:focus { border-color: var(--primary); }
.filter-row .filter-logic { width: 68px; flex-shrink: 0; }
.filter-row .filter-logic-label {
  width: 68px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 6px 8px;
  text-align: left;
}
.filter-row .filter-field { flex: 1 1 0; min-width: 0; }
.filter-row .filter-op { width: 110px; flex-shrink: 0; }
.filter-row .filter-value-wrap { flex: 1.3 1 0; display: flex; gap: 6px; align-items: center; min-width: 0; }
.filter-row .filter-value, .filter-row .filter-value2 { flex: 1; min-width: 0; width: 100%; }
.filter-row .filter-value-wrap:empty { display: none; }
.filter-row .filter-and-sep {
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
  padding: 0 2px;
}
.filter-row .filter-del {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  flex-shrink: 0;
}
.filter-row .filter-del:hover { color: var(--status-warn-text); }
.btn-add-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-add-filter:hover { background: var(--chip-bg); }
.filter-row .filter-preset {
  flex-shrink: 0;
  width: 120px;
}
.cs-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.4;
}
.cs-default-filter .filter-row { margin-top: 4px; }

/* ─── Activity Log drawer ─── */
.activity-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 49;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.activity-backdrop.visible { opacity: 1; pointer-events: auto; }
.activity-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 400px; max-width: 92vw;
  background: var(--card-bg, #fff);
  box-shadow: -8px 0 24px rgba(0,0,0,0.08);
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  display: flex; flex-direction: column;
  font-family: var(--font);
}
.activity-drawer.visible { transform: translateX(0); }
.ad-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.ad-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--primary); }
.ad-icons { display: flex; gap: 6px; }
.ad-icon {
  font-size: 18px;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.15s;
}
.ad-icon:hover { background: var(--chip-bg, rgba(58,123,238,0.08)); color: var(--primary); }

/* ─── Notifications rail (reuses the .activity-drawer shell; no backdrop) ─── */
.notif-rail { width: 380px; }
/* On notched / status-bar phones (installed PWA, viewport-fit=cover) the rail
   sits under the OS status bar — pad by the safe-area insets so the header is
   visible and tappable. No-op (0px) on devices without insets. */
.notif-rail {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nr-header h3 { display: flex; align-items: center; gap: 8px; }
.nr-newpill {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  font-size: 11px; font-weight: 700; line-height: 1; border-radius: 99px; padding: 3px 7px;
}
.notif-rail .ad-icons { align-items: center; gap: 6px; }

.nr-filters {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.nr-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nr-filter-sep { width: 1px; height: 22px; flex-shrink: 0; background: color-mix(in srgb, var(--text-secondary) 35%, transparent); }
.nr-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.nr-seg-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 12px; color: var(--text-secondary); padding: 5px 13px;
}
.nr-seg-btn.is-active { background: var(--primary); color: #fff; }
.nr-chips { display: inline-flex; gap: 6px; }
.nr-chip {
  background: none; border: 1px solid var(--line-strong, var(--border)); border-radius: 8px; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 5px 12px;
}
.nr-chip:hover { color: var(--text-primary); border-color: var(--text-secondary); }
/* Active chip tints by its own signal colour (green Buy / amber Hold / red Sell). */
.nr-chip[data-action="BUY"].is-active  { color: var(--status-active-text);   background: var(--status-active-bg);   border-color: transparent; }
.nr-chip[data-action="HOLD"].is-active { color: var(--status-inactive-text); background: var(--status-inactive-bg); border-color: transparent; }
.nr-chip[data-action="SELL"].is-active { color: var(--status-warn-text);     background: var(--status-warn-bg);     border-color: transparent; }

/* Symbol search — bordered wrap with a leading search icon + the shared
   .header-search-clear button (shown only when there's text). */
.nr-symbol-wrap {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); padding: 2px 8px;
}
.nr-symbol-wrap:focus-within { border-color: var(--primary); }
.nr-symbol-search { font-size: 17px; color: var(--text-secondary); flex-shrink: 0; }
.nr-symbol {
  flex: 1; min-width: 0;
  border: none; background: transparent; outline: none;
  font-family: var(--font); font-size: 13px; color: var(--text-primary);
  text-transform: uppercase; padding: 6px 0;
}
.nr-symbol::placeholder { text-transform: none; color: var(--text-secondary); }

/* Notification-settings modal launched from the rail — reuses .modal-overlay /
   .modal + hosts the shared AccountNotifications panel. */
.nr-settings-modal { width: 520px; max-width: 94vw; }
.nr-settings-body { max-height: 70vh; overflow-y: auto; padding: 16px 18px; }
.nr-settings-body .account-cards { gap: 10px; }

/* Notification-settings cards: icon badge + title/desc/Fine-tune + top-right switch */
.acct-notif-list { display: flex; flex-direction: column; gap: 10px; }
.acct-notif-info {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg);
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}
.acct-notif-info > .material-symbols-outlined { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.acct-inline-icon { font-size: 14px; vertical-align: -2px; }

.acct-notif-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg);
}
.acct-notif-badge {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--chip-bg, rgba(0,0,0,0.05)); color: var(--text-secondary);
}
.acct-notif-badge .material-symbols-outlined { font-size: 20px; }
.acct-notif-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acct-notif-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.acct-notif-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.acct-notif-switch { flex-shrink: 0; margin-top: 2px; }
.acct-finetune {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 7px;
  padding: 5px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--chip-bg, rgba(0,0,0,0.04)); color: var(--text-secondary);
  font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.acct-finetune:hover { border-color: var(--primary); color: var(--primary); }
.acct-finetune .material-symbols-outlined { font-size: 16px; }

/* Per-category accent badges — tinted bg + solid icon (semi-transparent, both themes) */
.acct-badge-scope    { background: rgba(58,124,238,0.14); color: #3a7cee; }
.acct-badge-sec      { background: rgba(58,124,238,0.14); color: #3a7cee; }
.acct-badge-news     { background: rgba(245,166,35,0.16); color: #d98a14; }
.acct-badge-reports  { background: rgba(155,107,237,0.16); color: #9b6bed; }
.acct-badge-calendar { background: rgba(30,203,133,0.16); color: #13a268; }
.acct-badge-alerts   { background: rgba(231,76,60,0.15); color: #e74c3c; }
.acct-badge-messages { background: rgba(58,124,238,0.14); color: #3a7cee; }
html.theme-dark .acct-badge-news     { color: #f5a623; }
html.theme-dark .acct-badge-calendar { color: #1ecb85; }
html.theme-dark .acct-badge-reports  { color: #b18bf0; }

/* Scope combo — inline-expanding multi-select of own portfolios + watchlists */
.acct-scope-combo { position: relative; margin-top: 8px; }
.acct-scope-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 12px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-primary); font-family: var(--font); font-size: 13px; cursor: pointer;
}
.acct-scope-btn:hover { border-color: var(--primary); }
.acct-scope-caret { font-size: 18px; color: var(--text-secondary); transition: transform 0.15s; }
.acct-scope-combo.open .acct-scope-caret { transform: rotate(180deg); }
.acct-scope-menu {
  margin-top: 6px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card-bg); padding: 6px; max-height: 240px; overflow-y: auto;
}
.acct-scope-group {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary); padding: 6px 8px 2px;
}
.acct-scope-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 13px; color: var(--text-primary);
}
.acct-scope-item:hover { background: var(--chip-bg, rgba(0,0,0,0.05)); }
.acct-scope-item input { cursor: pointer; }
.acct-scope-empty { padding: 10px 8px; font-size: 12px; color: var(--text-secondary); }

.nr-feed { padding: 6px 8px 10px; }

/* Card — rounded, hover-highlight, no dividers (zen); unread = a small left dot */
.nr-card {
  position: relative; display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 12px 11px 16px; border-radius: 11px;
  cursor: pointer; transition: background 0.14s;
}
.nr-card:hover { background: var(--sidebar-hover, rgba(0,0,0,0.035)); }
.nr-dot { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }

.nr-badge {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--chip-bg, rgba(0,0,0,0.05)); color: var(--text-secondary);
}
.nr-badge .material-symbols-outlined { font-size: 18px; }

.nr-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nr-card-line1 { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.nr-ticker { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.nr-type { display: inline-flex; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.nr-outlets { font-size: 10px; font-weight: 600; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 0 6px; white-space: nowrap; }
.nr-time { margin-left: auto; font-size: 11px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; transition: opacity 0.12s; }
.nr-card:hover .nr-time { opacity: 0; }
.nr-dismiss { position: absolute; top: 10px; right: 10px; font-size: 16px; color: var(--text-secondary); cursor: pointer; opacity: 0; transition: opacity 0.12s; }
.nr-card:hover .nr-dismiss, .nr-card:focus-within .nr-dismiss { opacity: 0.55; }
.nr-dismiss:hover { opacity: 1; color: var(--status-warn-text); }

/* Palette — badge tint + icon colour + tag-part colour. The icon and detail
   parts use the constant kind colour; only the signal part (.nr-cat-buy/-sell/
   -hold) changes colour. News shows just the icon (no badge background). */
.nr-badge.nr-cat-news     { background: transparent; }
.nr-cat-news     .material-symbols-outlined, .nr-tpart.nr-cat-news     { color: #d98a14; }
.nr-badge.nr-cat-sec      { background: rgba(58,124,238,0.14); }
.nr-cat-sec      .material-symbols-outlined, .nr-tpart.nr-cat-sec      { color: #3a7cee; }
.nr-badge.nr-cat-calendar { background: rgba(30,203,133,0.16); }
.nr-cat-calendar .material-symbols-outlined, .nr-tpart.nr-cat-calendar { color: #13a268; }
.nr-badge.nr-cat-reports  { background: rgba(155,107,237,0.16); }
.nr-cat-reports  .material-symbols-outlined, .nr-tpart.nr-cat-reports  { color: #9b6bed; }
.nr-badge.nr-cat-messages { background: rgba(58,124,238,0.14); }
.nr-cat-messages .material-symbols-outlined, .nr-tpart.nr-cat-messages { color: #3a7cee; }
.nr-badge.nr-cat-buy      { background: rgba(30,203,133,0.16); }
.nr-cat-buy      .material-symbols-outlined, .nr-tpart.nr-cat-buy      { color: #14a86d; }
.nr-badge.nr-cat-sell     { background: rgba(231,76,60,0.15); }
.nr-cat-sell     .material-symbols-outlined, .nr-tpart.nr-cat-sell     { color: #e74c3c; }
.nr-badge.nr-cat-hold     { background: rgba(224,179,65,0.16); }
.nr-cat-hold     .material-symbols-outlined, .nr-tpart.nr-cat-hold     { color: #c79a2e; }
.nr-badge.nr-cat-muted, .nr-badge.nr-cat-generic { background: var(--chip-bg, rgba(0,0,0,0.05)); }
.nr-cat-muted .material-symbols-outlined,   .nr-tpart.nr-cat-muted,
.nr-cat-generic .material-symbols-outlined, .nr-tpart.nr-cat-generic { color: var(--text-secondary); }
.nr-badge--nobg { background: transparent; }

html.theme-dark .nr-cat-news .material-symbols-outlined,     html.theme-dark .nr-tpart.nr-cat-news     { color: #f5a623; }
html.theme-dark .nr-cat-hold .material-symbols-outlined,     html.theme-dark .nr-tpart.nr-cat-hold     { color: #e0b341; }
html.theme-dark .nr-cat-calendar .material-symbols-outlined, html.theme-dark .nr-tpart.nr-cat-calendar { color: #1ecb85; }
html.theme-dark .nr-cat-buy .material-symbols-outlined,      html.theme-dark .nr-tpart.nr-cat-buy      { color: #1ecb85; }
html.theme-dark .nr-cat-reports .material-symbols-outlined,  html.theme-dark .nr-tpart.nr-cat-reports  { color: #b18bf0; }
html.theme-dark .nr-cat-sell .material-symbols-outlined,     html.theme-dark .nr-tpart.nr-cat-sell     { color: #e0796b; }

.nr-summary {
  font-size: 12px; line-height: 1.45; color: var(--text-secondary); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.nr-card.expanded .nr-summary { -webkit-line-clamp: unset; display: block; }
.nr-open { display: none; font-size: 12px; color: var(--primary); text-decoration: none; margin-top: 6px; }
.nr-card.expanded .nr-open { display: inline-block; }

.nr-footer { padding: 8px 16px; border-top: 1px solid var(--border); text-align: center; flex-shrink: 0; }
.nr-footer a { font-size: 12px; color: var(--primary); text-decoration: none; }
.nr-loadmore, .nr-state { padding: 14px 16px; text-align: center; font-size: 12px; color: var(--text-secondary); }
.nr-error { color: var(--status-warn-text); }
.nr-link { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 12px; }
.nr-empty-title { font-weight: 600; color: var(--text-primary); }
.nr-empty-hint { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.nr-skel { height: 46px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, var(--card-bg), var(--border), var(--card-bg)); background-size: 200% 100%; animation: nrShimmer 1.2s infinite; }
@keyframes nrShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ad-filter-row, .ad-search-row {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
}
.ad-filter-row select, .ad-search-row input {
  flex: 1; min-width: 0;
  padding: 6px 8px;
  font-family: var(--font);
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--text-primary);
}
.ad-feed {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.ad-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

/* ── AI Reasoning drawer (#aiReasoningDrawer) — reuses .activity-drawer
   shell + .ad-feed scroll container. Each session group has a header
   (persona + session key + timestamp), a strategic-rationale paragraph,
   and a list of action cards beneath. Skipped actions render dimmed. */
.air-session {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.air-session:last-child { border-bottom: none; margin-bottom: 0; }
.air-session-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--text-secondary); margin-bottom: 6px;
}
.air-session-head .air-persona {
  font-weight: 700; color: var(--text-primary); font-size: 13px;
}
.air-session-head .air-session-key {
  background: var(--chip-bg, rgba(58,123,238,0.10));
  color: var(--primary, #3a7cee);
  padding: 1px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600;
}
.air-session-head .air-meta { margin-left: auto; }
.air-rationale {
  font-size: 12px; color: var(--text-secondary);
  font-style: italic;
  margin: 4px 0 10px 0;
  line-height: 1.45;
}
.air-actions { display: flex; flex-direction: column; gap: 8px; }
.air-action {
  border-left: 2px solid var(--primary, #3a7cee);
  padding: 4px 0 4px 10px;
}
.air-action-skipped {
  border-left-color: var(--text-secondary);
  opacity: 0.7;
}
.air-action-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-primary);
  flex-wrap: wrap;
}
.air-side-buy  { color: #2e7d32; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; }
.air-side-sell { color: #c62828; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; }
.air-qty       { font-size: 12px; color: var(--text-secondary); }
.air-skip-badge {
  margin-left: auto;
  background: rgba(198,40,40,0.10);
  color: #c62828;
  padding: 1px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600;
}
/* Detail line below the skip-reason chip — quotes the actual numbers
   (cap headroom, % usage, etc.) so the user can see WHY the trade was
   dropped instead of just a token. */
.air-skip-detail {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.45;
  padding: 6px 8px;
  background: rgba(198, 40, 40, 0.06);
  border-left: 2px solid rgba(198, 40, 40, 0.4);
  border-radius: 3px;
}
.air-reason {
  font-size: 12px; color: var(--text-primary);
  line-height: 1.45; margin-top: 4px;
}
.air-no-reason { color: var(--text-secondary); }
.ad-entry {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  position: relative;
}
.ad-entry + .ad-entry { border-top: 1px solid rgba(0,0,0,0.04); }
.ad-avatar {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary, #3a7bee);
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: uppercase;
  overflow: hidden;
}
.ad-avatar.ad-avatar-img { object-fit: cover; background: transparent; }
.ad-entry-body { flex: 1; min-width: 0; font-size: 13px; color: var(--text-primary); line-height: 1.45; }
.ad-user { font-weight: 700; color: var(--primary); }
.ad-field { font-weight: 700; color: var(--text-primary); }
.ad-meta { display: block; font-size: 11px; color: var(--text-secondary, #969dad); margin-top: 2px; }
.ad-edit-price, .ad-cancel-sale {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 4px; padding: 0;
  background: transparent; border: none; border-radius: 3px;
  color: var(--text-secondary, #969dad); font-size: 13px; cursor: pointer;
  opacity: 0.7; transition: opacity 0.15s, background 0.15s, color 0.15s;
  vertical-align: middle;
}
.ad-edit-price:hover { opacity: 1; background: rgba(0,0,0,0.06); color: var(--primary); }
.ad-cancel-sale:hover { opacity: 1; background: rgba(231,76,60,0.12); color: #e74c3c; }
.ad-edited {
  display: inline-block; margin-left: 4px; padding: 1px 6px;
  font-size: 10px; font-weight: 600; line-height: 1.4;
  border-radius: 8px; background: rgba(255, 165, 0, 0.15); color: #b06b00;
  vertical-align: middle;
}
.ad-canceled {
  display: inline-block; margin-left: 4px; padding: 1px 6px;
  font-size: 10px; font-weight: 600; line-height: 1.4;
  border-radius: 8px; background: rgba(231, 76, 60, 0.15); color: #c0392b;
  vertical-align: middle; text-transform: uppercase; letter-spacing: 0.05em;
}
.ad-entry-canceled .ad-entry-body { color: var(--text-secondary, #969dad); }
.ad-entry-canceled .ad-entry-body .ad-user { text-decoration: line-through; opacity: 0.6; }

/* Portfolio synthetic stopped-out rows */
.pf-stopped-sym { display: inline-flex; align-items: center; gap: 6px; opacity: 0.75; }
.pf-stopped-badge {
  display: inline-block; padding: 1px 6px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 6px; background: rgba(231,76,60,0.15); color: #c0392b;
}
.pf-stopped-qty { color: var(--text-secondary, #969dad); }
.pf-stopped-qty s { color: var(--text-secondary, #969dad); opacity: 0.6; margin-left: 4px; font-weight: normal; }

/* Edit-price modal */
.ad-edit-stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 10px 12px; background: var(--search-bg, rgba(0,0,0,0.04));
  border-radius: 6px; font-size: 13px;
}
.ad-edit-stat-row > div { line-height: 1.4; }
.ad-edit-stat-row > div > div { font-weight: 600; }
.ad-edit-stat-label {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-secondary, #969dad); margin-bottom: 2px;
}

/* Stoploss manual note + manual-stop modal */
.sl-manual-note {
  display: inline-block;
  margin-left: 4px; padding: 2px 8px;
  background: rgba(58, 124, 238, 0.12); color: #3a7cee;
  border-radius: 10px; font-size: 11px; font-style: italic;
  vertical-align: middle;
}
html.theme-dark .sl-manual-note { background: rgba(58, 124, 238, 0.2); color: #6fa6ff; }
.sl-manual-stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 10px 12px; background: var(--search-bg, rgba(0,0,0,0.04));
  border-radius: 6px; font-size: 13px;
}
.sl-manual-stat-row > div { line-height: 1.4; }
.sl-manual-stat-row > div > div { font-weight: 600; }
.sl-manual-stat-label {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-secondary, #969dad); margin-bottom: 2px;
}
.sl-manual-skip-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: center; margin-top: 14px;
}
.sl-manual-skip {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; color: var(--text-primary);
}
.sl-manual-skip input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.sl-manual-qty { display: flex; flex-direction: column; }
.sl-manual-qty input { padding-top: 6px; padding-bottom: 6px; }

/* Stoploss Test page (Research → Stoploss Test) */
.slt-page { padding: 16px 20px; max-width: 1200px; margin: 0 auto; }
.slt-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--border, #d9e3f0); padding-bottom: 8px; }
.slt-tab {
  background: transparent; border: 1px solid var(--border, #d9e3f0);
  border-radius: 6px 6px 0 0; padding: 6px 12px; cursor: pointer;
  color: var(--text-primary); font-size: 13px;
}
.slt-tab:hover { background: var(--search-bg, rgba(0,0,0,0.04)); }
.slt-tab-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.slt-stopped { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,0.06); color: var(--text-secondary); margin-left: 6px; }
.slt-summary-card { background: var(--card-bg, #fff); border: 1px solid var(--border, #d9e3f0); border-radius: 8px; padding: 14px 18px; margin-bottom: 18px; }
.slt-summary-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: end; }
.slt-summary-row > div { font-size: 14px; color: var(--text-primary); }
.slt-summary-actions { display: flex; justify-content: flex-end; }
.slt-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary, #969dad); margin-bottom: 4px; }
.slt-section-title { margin: 18px 0 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.slt-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--card-bg, #fff); border: 1px solid var(--border, #d9e3f0); border-radius: 6px; overflow: hidden; }
.slt-table th, .slt-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border, rgba(0,0,0,0.06)); }
.slt-table th { background: var(--search-bg, rgba(0,0,0,0.03)); font-weight: 600; }
.slt-table tr:last-child td { border-bottom: none; }
.slt-pos { color: var(--status-good-text, #1ecb85); }
.slt-neg { color: var(--status-warn-text, #e74c3c); }
.slt-empty { padding: 14px; color: var(--text-secondary); font-size: 13px; }
.slt-status { font-size: 11px; padding: 2px 8px; border-radius: 8px; text-transform: lowercase; }
.slt-status-held { background: rgba(30, 203, 133, 0.15); color: #1ecb85; }
.slt-status-stopped-out { background: rgba(231, 76, 60, 0.15); color: #e74c3c; }
.slt-nav-table tr.slt-nav-delta td { background: rgba(58,124,238,0.06); }
.slt-nav-table tr.slt-nav-delta td:last-child b { font-size: 14px; }
@media (max-width: 768px) {
  .slt-summary-row { grid-template-columns: 1fr 1fr; }
  .slt-summary-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.ad-badge {
  position: absolute;
  top: 14px; left: -2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--card-bg, #fff);
  display: none;
}

/* ─── Dashboard cards (Item 6) ─── */
.dashboard-cards { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.dashboard-cards:empty { display: none; }
.dash-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  padding: 12px 20px;
  min-width: 120px;
}
.dash-card .dash-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.dash-card .dash-value { font-size: 18px; font-weight: 700; color: var(--text-primary); }

/* ─── Session timeline card (Signals page) ─── */
.dash-card-wide {
  flex: 1 1 100%;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  padding: 14px 20px 12px;
}
.st-card-head { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-card-head .st-meta { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-primary); font-size: 12px; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.st-status { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.st-status .st-label { font-weight: 700; color: var(--text-primary); font-size: 14px; }
.st-status .st-sub { color: var(--text-secondary); }
.st-status .st-sub strong { color: var(--text-primary); font-weight: 700; }
.st-times { display: flex; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; }
.st-times .st-local { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.st-times .st-et { font-size: 12px; color: var(--text-secondary); }
.st-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
/* Track + segments */
.st-track { position: relative; height: 28px; border-radius: 6px; overflow: hidden; background: var(--border); }
.st-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.92); user-select: none; }
.st-seg.is-active { box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.st-seg.st-closed { background: #2c313c; color: rgba(255,255,255,.55); }
.st-seg.st-pre    { background: #b58a17; }
.st-seg.st-open   { background: #2f8a3e; }
.st-seg.st-after  { background: #2c5fb0; }
.st-dot.st-closed { background: #888d9a; }
.st-dot.st-pre    { background: #f0b933; }
.st-dot.st-open   { background: #2fc060; }
.st-dot.st-after  { background: #4d8be8; }
.st-now { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); pointer-events: none; }
.st-ticks { position: relative; height: 14px; margin-top: 4px; font-size: 10px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.st-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.st-ticks span:first-child { transform: translateX(0); }
.st-ticks span:last-child { transform: translateX(-100%); }

/* ─── Sector Heatmap (Signals page) ─── */
.sh-card .st-card-head { position: relative; justify-content: flex-start; }
.sh-card .st-card-head .st-meta { margin-left: auto; }
.sh-info-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 0 2px; margin-left: 4px; display: inline-flex; align-items: center; transition: color 0.15s; }
.sh-info-btn:hover { color: #3a7cee; }
.sh-info-btn .material-symbols-outlined { font-size: 16px; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.sh-tile { border-radius: 6px; padding: 8px 10px; min-height: 58px; display: flex; flex-direction: column; justify-content: center; gap: 2px; color: #fff; user-select: none; }
.sh-tile-name { font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .95; }
.sh-tile-pct { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sh-tile-breadth { font-size: 10px; font-weight: 600; opacity: .85; font-variant-numeric: tabular-nums; }
/* Direction × intensity. White text reads on every theme. */
.sh-pos-1 { background: #2c6e39; }
.sh-pos-2 { background: #2f8a3e; }
.sh-pos-3 { background: #23a64d; }
.sh-neg-1 { background: #8f3a33; }
.sh-neg-2 { background: #b23a30; }
.sh-neg-3 { background: #d63a2d; }
.sh-flat { background: var(--border); color: var(--text-primary); }
.sh-flat .sh-tile-breadth { opacity: .7; }
.sh-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sh-foot strong { color: var(--text-primary); font-weight: 700; }
.sh-empty { color: var(--text-secondary); font-size: 13px; padding: 10px 0 4px; }

/* ─── Page actions ─── */
.page-actions { display: flex; gap: 8px; align-items: center; }

/* ─── Modal autocomplete ─── */
.modal-ac-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #d9e3f0; border-top: none; border-radius: 0 0 6px 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-height: 240px; overflow-y: auto; z-index: 30; }
.modal-ac-dropdown.open { display: block; }
.modal-ac-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; transition: background 0.1s; }
.modal-ac-item:hover { background: #f4f7fc; }
.modal-ac-item.modal-ac-exists { opacity: 0.5; }
.modal-ac-sym { font-weight: 700; color: #394463; min-width: 50px; font-size: 13px; }
.modal-ac-name { font-size: 12px; color: #969dad; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.modal-ac-badge { font-size: 10px; color: #1ecb85; font-weight: 600; background: #e6fcf0; padding: 1px 6px; border-radius: 3px; flex-shrink: 0; }
.modal-ac-type { font-size: 9px; font-weight: 700; color: #f5a623; background: #fff8ee; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.modal-ac-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; min-height: 0; }
.modal-ac-tag { display: inline-flex; align-items: center; gap: 4px; background: #e8eeff; color: #3a5ba2; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 4px; }
.modal-ac-tag-x { cursor: pointer; font-size: 14px; color: #969dad; margin-left: 2px; }
.modal-ac-tag-x:hover { color: #e74c3c; }

/* ─── Search results page ─── */
.search-results-page {
  position: fixed; inset: 0; background: var(--page-bg); z-index: 90;
  display: flex; flex-direction: column; overflow: hidden;
}
.srp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border); background: var(--header-bg);
}
.srp-header h2 { font-size: 18px; font-weight: 700; }
.srp-body { flex: 1; overflow-y: auto; padding: 24px; }
.srp-section { margin-bottom: 24px; }
.srp-section-title { font-size: 14px; font-weight: 700; color: var(--table-header-text); margin-bottom: 8px; }
.srp-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }
.srp-table th { background: var(--table-header-bg); color: var(--table-header-text); font-weight: 700; padding: 8px; text-align: left; border-bottom: 1px solid var(--border); }
.srp-table td { padding: 8px; border-bottom: 1px solid var(--border); }
.srp-table tr:hover { background: #f8faff; cursor: pointer; }
.srp-none { color: var(--text-secondary); font-size: 13px; }

/* ─── News period filter ─── */
.period-filter { margin-left: 8px; }
.period-filter select { font-family: var(--font); font-size: 13px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-primary); background: #fff; outline: none; }

/* ─── Clickable row ─── */
.data-table tbody tr { cursor: pointer; }

/* ─── Btn small ─── */
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* ─── Report viewer ─── */
.rpt-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; }
.rpt-viewer-header { padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; }
.rpt-markdown { font-size: 14px; line-height: 1.7; color: var(--text-primary); max-width: 800px; }
.rpt-markdown h1 { font-size: 20px; font-weight: 700; color: #3a5ba2; margin: 20px 0 8px; }
.rpt-markdown h2 { font-size: 16px; font-weight: 700; color: #3a5ba2; margin: 16px 0 6px; }
.rpt-markdown h3 { font-size: 14px; font-weight: 700; color: #394463; margin: 12px 0 4px; }
.rpt-markdown p { margin: 6px 0; }
.rpt-markdown ul, .rpt-markdown ol { margin: 6px 0 6px 20px; }
.rpt-markdown li { margin: 3px 0; }
.rpt-markdown code { background: #f4f7fc; padding: 1px 5px; border-radius: 3px; font-size: 13px; }
.rpt-markdown strong { color: #394463; }
/* GFM elements the marked renderer now emits (tables, nested lists, fenced
   code, blockquotes, images). Tokenised colours so both themes work. */
.rpt-markdown ul ul, .rpt-markdown ol ol, .rpt-markdown ul ol, .rpt-markdown ol ul { margin: 2px 0 2px 20px; }
.rpt-markdown table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; }
.rpt-markdown th, .rpt-markdown td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.rpt-markdown th { background: var(--chip-bg, rgba(127,127,127,.10)); font-weight: 700; color: var(--text-primary); }
.rpt-markdown tr:nth-child(even) td { background: rgba(127,127,127,.05); }
.rpt-markdown pre { background: var(--chip-bg, rgba(127,127,127,.10)); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; overflow: auto; margin: 8px 0; }
.rpt-markdown pre code { background: none; padding: 0; font-size: 12.5px; }
.rpt-markdown blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--border); color: var(--text-secondary); }
.rpt-markdown img { max-width: 100%; height: auto; border-radius: 6px; }
.rpt-markdown a { color: var(--primary); }
html.theme-dark .rpt-markdown code { background: #1f1d19; }
/* v2 brief renderer (Telegram HTML) — section headers + bullet lists */
.rpt-markdown .rpt-tg-h { font-size: 14px; font-weight: 700; color: #3a5ba2; margin: 14px 0 4px; }
.rpt-markdown .rpt-tg-list { margin: 4px 0 10px 20px; padding: 0; }
.rpt-markdown .rpt-tg-list li { margin: 3px 0; line-height: 1.55; }
.rpt-markdown b { color: #394463; font-weight: 700; }

/* ==========================================
   Dark mode — landing page palette + fonts
   Activated by html.theme-dark. Overrides CSS
   variables so component styles follow along.
   ========================================== */

html.theme-dark {
  --sidebar-bg: #0b0b0b;
  --sidebar-text: #6e6b63;
  --sidebar-text-active: #e8e4d8;
  --sidebar-hover: rgba(245, 166, 35, 0.06);
  --sidebar-active: rgba(245, 166, 35, 0.14);

  --header-bg: #0b0b0b;
  --page-bg: #0b0b0b;
  --card-bg: #141412;
  --table-header-bg: #1a1814;
  --table-header-text: #e8e4d8;

  --text-primary: #e8e4d8;
  --text-secondary: #6e6b63;
  --border: #1f1d19;

  --chip-bg: #1a1814;
  --status-active-bg: rgba(143, 191, 106, 0.14);
  --status-active-text: #8fbf6a;
  --status-inactive-bg: rgba(245, 166, 35, 0.14);
  --status-inactive-text: #f5a623;
  --status-warn-bg: rgba(201, 106, 90, 0.14);
  --status-warn-text: #c96a5a;

  --primary: #f5a623;
  --primary-hover: #d4901e;
  --search-bg: #141412;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

html.theme-dark body { background: #0b0b0b; color: #e8e4d8; }

html.theme-dark .sidebar-logo { color: #e8e4d8; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 15px; letter-spacing: 0.04em; border-bottom-color: #1f1d19; }
html.theme-dark .sidebar-logo .logo-text { color: #e8e4d8; }

html.theme-dark .top-header { border-bottom-color: #1f1d19; }
html.theme-dark .breadcrumb,
html.theme-dark .breadcrumb a { color: #6e6b63; }
html.theme-dark .breadcrumb .current { color: #e8e4d8; }

html.theme-dark .page-title { color: #e8e4d8; }

html.theme-dark .card,
html.theme-dark .account-card,
html.theme-dark .fr-submit,
html.theme-dark .fr-item { background: #141412; border-color: #1f1d19; box-shadow: none; }

html.theme-dark .table-toolbar,
html.theme-dark .header-search { background: #141412; border-color: #1f1d19; }
html.theme-dark .header-search input { color: #e8e4d8; }

html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select {
  background: #141412; color: #e8e4d8; border-color: #2a2620;
}
html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder { color: #4a4842; }
html.theme-dark input:focus,
html.theme-dark textarea:focus,
html.theme-dark select:focus { border-color: #f5a623; outline: none; }

html.theme-dark .btn-primary {
  background: transparent; color: #f5a623; border: 1px solid #f5a623;
}
html.theme-dark .btn-primary:hover { background: #f5a623; color: #0b0b0b; }

html.theme-dark .user-menu { background: #221f19; border-color: #3a342a; box-shadow: 0 8px 24px rgba(0,0,0,.65); }
html.theme-dark .user-menu-item { color: #e8e4d8; }
html.theme-dark .user-menu-item:hover { background: #2d2922; }
html.theme-dark .user-menu-sep { background: #3a342a; }

/* Monospace labels echoing the landing page for small meta text */
html.theme-dark .nav-label,
html.theme-dark .account-tab,
html.theme-dark .breadcrumb,
html.theme-dark .chip,
html.theme-dark .avatar-show-label {
  font-family: 'Inter', sans-serif;
}
html.theme-dark .logo-text,
html.theme-dark .account-card-header .material-symbols-outlined ~ * { /* no-op, placeholder */ }

/* Tables */
html.theme-dark table thead th,
html.theme-dark .table-header { background: #1a1814; color: #e8e4d8; border-color: #1f1d19; }
html.theme-dark table tbody td,
html.theme-dark table tbody tr { border-color: #1f1d19; color: #e8e4d8; }
html.theme-dark table tbody tr:hover { background: #1a1814; }

/* Selection accent */
html.theme-dark ::selection { background: #f5a623; color: #0b0b0b; }

/* ── Dashboard cards & chips (hardcoded light colors → landing palette) ── */
html.theme-dark .dash-section,
html.theme-dark .dash-card,
html.theme-dark .ranking-card,
html.theme-dark .wk-card,
html.theme-dark .kanban-card,
html.theme-dark .churn-health,
html.theme-dark .churn-signal { background: #141412; border-color: #1f1d19; color: #e8e4d8; }
html.theme-dark .slx-modal { background: #141412; color: #e8e4d8; }
html.theme-dark .slx-table th, html.theme-dark .slx-table td { border-color: #2a2620; }
html.theme-dark .slx-help { color: #b3b0a8; }
html.theme-dark .slx-price { background: #1a1814; color: #e8e4d8; border-color: #2a2620; }
html.theme-dark .slx-actions { border-color: #2a2620; }

html.theme-dark .dash-section-hdr:hover,
html.theme-dark .dash-more-menu .menu-item:hover,
html.theme-dark .modal-ac-item:hover,
html.theme-dark .cfd-list label:hover { background: #1a1814; }

html.theme-dark .dash-mp-card,
html.theme-dark .dash-cal-day,
html.theme-dark .dash-stat-card,
html.theme-dark .dash-model-item,
html.theme-dark .ranking-stat,
html.theme-dark .churn-gauge,
html.theme-dark .gcr-editor,
html.theme-dark .wk-metrics span,
html.theme-dark .chat-step,
html.theme-dark .set-search-wrap { background: #1a1814; border-color: #2a2620; color: #e8e4d8; }

html.theme-dark .dash-action-btn,
html.theme-dark .jrnl-acc-btn,
html.theme-dark .pg-btn { background: #141412; border-color: #2a2620; color: #e8e4d8; }
html.theme-dark .dash-action-btn:hover,
html.theme-dark .jrnl-acc-btn:hover { background: #1a1814; border-color: #f5a623; color: #f5a623; }

html.theme-dark .dash-more-menu,
html.theme-dark .col-filter-drop,
html.theme-dark .cs-color-popover,
html.theme-dark .modal-ac-dropdown { background: #221f19; border-color: #3a342a; box-shadow: 0 8px 24px rgba(0,0,0,.65); color: #e8e4d8; }

html.theme-dark .kanban-col { background: #141412; }
html.theme-dark .kanban-col-header { background: #1a1814; border-bottom-color: #1f1d19; color: #e8e4d8; }

html.theme-dark .wk-swot-panel { background: #141412; box-shadow: -4px 0 20px rgba(0,0,0,.5); }

html.theme-dark .cfd-row select,
html.theme-dark .cfd-row input,
html.theme-dark .ba-weight-input,
html.theme-dark .ba-args-input,
html.theme-dark td.cell-editing input,
html.theme-dark td.cell-editing select,
html.theme-dark .fr-status-select,
html.theme-dark .period-filter select { background: #141412; border-color: #2a2620; color: #e8e4d8; }
html.theme-dark .ba-weight-input:hover { background: #1a1814; border-color: #2a2620; }
html.theme-dark .ba-weight-input:focus,
html.theme-dark td.cell-editing input:focus,
html.theme-dark td.cell-editing select:focus,
html.theme-dark .ba-args-input:focus { background: #141412; border-color: #f5a623; box-shadow: 0 0 0 3px rgba(245,166,35,.2); }

html.theme-dark .dash-cron-expr,
html.theme-dark .rpt-markdown code { background: #1a1814; color: #e8e4d8; }

/* Risk Regions / Geopolitics / Stock News (dashboard regime cards) */
html.theme-dark .rr-row { background: #1a1814; border-color: #2a2620; border-left-color: #f5a623; }
html.theme-dark .rr-scope { color: #b3b0a8; }
html.theme-dark .rr-conf { color: #e8e4d8; }
html.theme-dark .rr-bar { background: #2a2620; }
html.theme-dark .rr-desc { color: #b3b0a8; }
html.theme-dark .geo-tags { border-bottom-color: #2a2620; }
html.theme-dark .geo-chip { background: #1a1814; border-color: #2a2620; color: #b3b0a8; }
html.theme-dark .geo-chip:hover { border-color: #4d8dff; color: #4d8dff; }
html.theme-dark .geo-chip.active { background: #4d8dff; color: #0b0b0b; border-color: #4d8dff; }
html.theme-dark .geo-item { border-bottom-color: #211f19; }
html.theme-dark .geo-hl { color: #e8e4d8; }
html.theme-dark .geo-itag { background: #211f19; color: #b3b0a8; }
html.theme-dark .geo-src { color: #6e6b63; }
html.theme-dark .geo-empty { color: #b3b0a8; }
html.theme-dark .sn-brief { background: #1a1814; border-color: #2a2620; }
html.theme-dark .sn-tldr { color: #e8e4d8; }
html.theme-dark .sn-bline,
html.theme-dark .sn-body { color: #b3b0a8; }
html.theme-dark .sn-grp-h { border-bottom-color: #2a2620; }
html.theme-dark .sn-item { border-bottom-color: #211f19; }
html.theme-dark .sn-tick { background: #2a2620; color: #c8bfa0; }

/* Upcoming Events (redesigned) */
html.theme-dark .due-grid { background: #2a2620; }
html.theme-dark .due-day { background: #141412; }
html.theme-dark .due-day-quiet { background: #121110; }
html.theme-dark .due-dh { background: #1a1814; border-bottom-color: #2a2620; }
html.theme-dark .due-wd { color: #e8e4d8; }
html.theme-dark .due-eq { border-bottom-color: #2a2620; }
html.theme-dark .due-eqchip.split { color: #9aa4b2; background: rgba(154,164,178,0.12); border-color: rgba(154,164,178,0.28); }
html.theme-dark .due-ev:hover { background: #1a1814; }
html.theme-dark .due-name { color: #b3b0a8; }
html.theme-dark .due-ev.hi .due-name { color: #e8e4d8; }
html.theme-dark .due-cnt { background: #2a2620; color: #e8e4d8; }
html.theme-dark .due-date,
html.theme-dark .due-count,
html.theme-dark .due-tlabel,
html.theme-dark .due-empty { color: #6e6b63; }
html.theme-dark .due-tom { background: rgba(179,176,168,0.1); color: #b3b0a8; }
html.theme-dark .due-toggle { background: #141412; border-color: #2a2620; color: #b3b0a8; }
html.theme-dark .due-toggle:hover { border-color: #4a4842; color: #e8e4d8; }
html.theme-dark .due-toggle.on { color: #e07a6e; border-color: rgba(224,122,110,0.4); background: rgba(224,122,110,0.1); }

/* Market Health (redesigned) */
html.theme-dark .mh-metric { background: #1a1814; border-color: #2a2620; }
html.theme-dark .mh-track { stroke: #2a2620; }
html.theme-dark .mh-gscore { fill: #e8e4d8; }
html.theme-dark .mh-marker { fill: #141412; }
html.theme-dark .mh-metric-val { color: #e8e4d8; }
html.theme-dark .mh-score-line b { color: #e8e4d8; }
html.theme-dark .mh-metric-bar { background: #2a2620; }
html.theme-dark .mh-gauge-ends,
html.theme-dark .mh-metric-label,
html.theme-dark .mh-metric-sub,
html.theme-dark .mh-score-line,
html.theme-dark .mh-feeds,
html.theme-dark .mh-pending { color: #b3b0a8; }

/* Volume Confidence (redesigned) */
html.theme-dark .vc-segbar,
html.theme-dark .vc-meter { background: #221f19; }
html.theme-dark .vc-meter-base { background: rgba(255,255,255,.22); }
html.theme-dark .vc-sym { color: #e8e4d8; }
html.theme-dark .vc-pinned { color: #f0c869; }
html.theme-dark .vc-summary-detail,
html.theme-dark .vc-legend,
html.theme-dark .vc-new { color: #b3b0a8; }
html.theme-dark .vc-row { border-bottom-color: #2a2620; }

html.theme-dark .sym-table th { background: #1a1814; color: #e8e4d8; border-bottom-color: #1f1d19; }

/* Chat bubbles */
html.theme-dark .chat-bot { background: #1a1814; color: #e8e4d8; }

/* Modal surfaces */
html.theme-dark .modal,
html.theme-dark .modal-content { background: #141412; border-color: #1f1d19; color: #e8e4d8; box-shadow: 0 8px 32px rgba(0,0,0,.55); }
html.theme-dark .modal-header,
html.theme-dark .modal-footer { border-color: #1f1d19; }
html.theme-dark .modal-close { color: #6e6b63; }
html.theme-dark .modal-close:hover { color: #e8e4d8; }
html.theme-dark .modal-overlay { background: rgba(0,0,0,.65); }

/* Draggable modal header — grab cursor when idle, grabbing while active */
.modal-header { cursor: grab; user-select: none; }
.modal-header.dragging,
.modal.is-dragging .modal-header { cursor: grabbing; }
.modal-header .modal-close,
.modal-header button,
.modal-header input,
.modal-header select,
.modal-header a { cursor: pointer; }

/* Status pills — translucent landing accents */
html.theme-dark .gcr-tag.yellow { background: rgba(245,166,35,.14); color: #f5a623; }
html.theme-dark .gcr-tag.red,
html.theme-dark .kanban-col[data-status="bugs"] .kanban-count { background: rgba(201,106,90,.14); color: #c96a5a; }
html.theme-dark .set-restart-badge,
html.theme-dark .modal-ac-type { background: rgba(245,166,35,.14); color: #f5a623; }

/* Form inputs everywhere use landing variables */
html.theme-dark .acct-avatar-preview { border-color: #2a2620; }

/* Table search toolbar */
html.theme-dark .table-search { background: #141412; border-color: #1f1d19; }
html.theme-dark .table-search input { background: transparent; color: #e8e4d8; }
html.theme-dark .table-search input::placeholder { color: #4a4842; }

/* Header search input text */
html.theme-dark .header-search { background: #141412; border-color: #1f1d19; }
html.theme-dark .header-search input { background: transparent; color: #e8e4d8; }
html.theme-dark .header-search input::placeholder { color: #4a4842; }

/* Pagination / secondary buttons */
html.theme-dark .pg-btn:disabled { background: #141412; opacity: .3; }
html.theme-dark .pg-btn.active { background: #f5a623; color: #0b0b0b; border-color: #f5a623; }

/* ── Override hardcoded text colors (blue primary / navy headers / grey meta) ── */
html.theme-dark .dash-stat-label,
html.theme-dark .dash-stat-val,
html.theme-dark .dash-stat-detail,
html.theme-dark .dash-mp-label,
html.theme-dark .dash-mp-val,
html.theme-dark .dash-mp-chg,
html.theme-dark .dash-cal-day-label,
html.theme-dark .dash-cal-evt,
html.theme-dark .dash-cal-day-date,
html.theme-dark .dash-section-title,
html.theme-dark .dash-section-hdr,
html.theme-dark .kanban-card-title,
html.theme-dark .kanban-col-header,
html.theme-dark .ranking-name,
html.theme-dark .ranking-stat-value,
html.theme-dark .sym-val,
html.theme-dark .sym-news-title,
html.theme-dark .sym-md,
html.theme-dark .wk-card-title,
html.theme-dark .ad-entry-body { color: #e8e4d8; }

html.theme-dark .dash-mp-chg.pos,
html.theme-dark .pos { color: #8fbf6a; }
html.theme-dark .dash-mp-chg.neg,
html.theme-dark .neg { color: #c96a5a; }

/* section-title / table-header navy-blue text → landing accent */
html.theme-dark .sym-section-title,
html.theme-dark .sym-table th,
html.theme-dark .kanban-count { color: #f5a623; border-bottom-color: #1f1d19; }
html.theme-dark .kanban-count { background: rgba(245,166,35,.14); }

/* Muted/secondary grey → landing mute */
html.theme-dark .kanban-card-body,
html.theme-dark .ranking-meta,
html.theme-dark .ranking-stat-label,
html.theme-dark .ranking-legend,
html.theme-dark .sym-label,
html.theme-dark .sym-news-dt,
html.theme-dark .sym-loading,
html.theme-dark .th-col-icon,
html.theme-dark .row-act-btn,
html.theme-dark .cfd-list label,
html.theme-dark .cfd-btn-clear,
html.theme-dark .sym-chart-int,
html.theme-dark .sym-chart-sma-label,
html.theme-dark .dash-cron-expr { color: #6e6b63; }

html.theme-dark .th-col-icon:hover,
html.theme-dark .row-act-btn:hover,
html.theme-dark .cfd-btn-clear:hover,
html.theme-dark .sym-chart-int:hover { color: #e8e4d8; background: transparent; }
html.theme-dark .row-act-btn:hover { background: #1a1814; }

/* ── Signal chips (SEC Filings) ── */
html.theme-dark .chip.chip-buy { background: rgba(143,191,106,.16); color: #8fbf6a; }
html.theme-dark .chip.chip-sell { background: rgba(201,106,90,.16); color: #c96a5a; }
html.theme-dark .chip.chip-hold { background: rgba(245,166,35,.16); color: #f5a623; }
html.theme-dark .chip.chip-neutral { background: #1a1814; color: #6e6b63; }
/* Same colors in light mode — subtle, still readable */
.chip.chip-buy { background: #e8f9f2; color: #1ecb85; }
.chip.chip-sell { background: #fff0f0; color: #e74c3c; }
.chip.chip-hold { background: #fff3e8; color: #f5a623; }
.chip.chip-neutral { background: var(--chip-bg); color: var(--text-secondary); }

/* ── Weekly Top 10 pillars ── */
html.theme-dark .wk-pillar-bar { background: #1a1814; }
html.theme-dark .wk-bar { background: #1a1814; }
html.theme-dark .wk-sym,
html.theme-dark .wk-score,
html.theme-dark .wk-pillar-val { color: #e8e4d8; }
html.theme-dark .wk-pillar-label { color: #6e6b63; }
html.theme-dark .wk-swot-link { color: #f5a623; }
html.theme-dark .wk-swot-panel { background: #141412; }
html.theme-dark .wk-swot-hdr { color: #e8e4d8; border-bottom-color: #1f1d19; }
html.theme-dark .wk-swot-close { color: #6e6b63; }
html.theme-dark .wk-swot-close:hover { color: #e8e4d8; }

/* ── Table row hover — override hardcoded light blues ── */
html.theme-dark .data-table tbody tr:hover,
html.theme-dark .srp-table tr:hover,
html.theme-dark .chat-table tbody tr:hover,
html.theme-dark .admin-users-table tr:hover td { background: #1a1814; }

/* ── Sortable header hover / sorted — kill the hardcoded #edf2ff / #d4e1ff ── */
html.theme-dark .data-table thead th.sortable:hover,
html.theme-dark .chat-grid th:hover,
html.theme-dark .chat-grid th.sorted { background: rgba(245, 166, 35, 0.08); }

/* ── Global search results dropdown — was #fff in dark mode ── */
html.theme-dark .search-results { background: #141412; border-color: #1f1d19; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
html.theme-dark .sr-item { color: #e8e4d8; }
html.theme-dark .sr-item:hover { background: rgba(245, 166, 35, 0.08); }
html.theme-dark .sr-item .sr-sym { color: #e8e4d8; }
html.theme-dark .sr-item .sr-meta,
html.theme-dark .sr-section-title,
html.theme-dark .sr-empty { color: #6e6b63; }
html.theme-dark .sr-section + .sr-section { border-top-color: #1f1d19; }

/* ── Watchlist / portfolio "All" selector dropdown — also #fff ── */
html.theme-dark .list-selector-menu { background: #221f19; border-color: #3a342a; box-shadow: 0 8px 24px rgba(0,0,0,.65); }
html.theme-dark .list-selector-btn:hover { background: rgba(245, 166, 35, 0.08); }
html.theme-dark .list-selector-menu .ls-item { color: #e8e4d8; }
html.theme-dark .list-selector-menu .ls-item:hover { background: rgba(245, 166, 35, 0.08); }
html.theme-dark .list-selector-menu .ls-item.active { color: #f5a623; }

/* ── Header search scope menu (All / Watchlist / ... ) — also #fff ── */
html.theme-dark .search-scope-menu { background: #221f19; border-color: #3a342a; box-shadow: 0 8px 24px rgba(0,0,0,.65); }
html.theme-dark .scope-item { color: #e8e4d8; }
html.theme-dark .scope-item:hover { background: rgba(245, 166, 35, 0.08); }
html.theme-dark .scope-item.active { color: #f5a623; }

/* ── Kanban drag-over ── */
html.theme-dark .kanban-cards.drag-over { background: rgba(245,166,35,.06); }
html.theme-dark .kanban-add-btn { border-color: #2a2620; color: #6e6b63; }
html.theme-dark .kanban-add-btn:hover { background: rgba(245,166,35,.08); color: #f5a623; border-color: #f5a623; }

/* ── Secondary button ── */
html.theme-dark .btn-secondary { background: transparent; color: #e8e4d8; border-color: #2a2620; }
html.theme-dark .btn-secondary:hover { background: #1a1814; border-color: #6e6b63; }
html.theme-dark .btn-secondary:disabled { opacity: .45; }

html.theme-dark .btn-refresh:hover { color: #f5a623; border-color: #f5a623; background: rgba(245,166,35,.06); }

/* ── Feature Request status tags ── */
html.theme-dark .fr-status-open        { background: rgba(108,164,168,.16); color: #6ca4a8; }
html.theme-dark .fr-status-planned     { background: rgba(143,191,106,.16); color: #8fbf6a; }
html.theme-dark .fr-status-in_progress { background: rgba(245,166,35,.16); color: #f5a623; }
html.theme-dark .fr-status-done        { background: rgba(127,168,117,.16); color: #7fa875; }
html.theme-dark .fr-status-rejected    { background: rgba(201,106,90,.16); color: #c96a5a; }
html.theme-dark .fr-status-select { background: #141412; color: #e8e4d8; border-color: #2a2620; }

/* Misc hover harmonization */
html.theme-dark .set-cat-header { background: var(--surface-2, #181816); }
html.theme-dark .set-cat-header:hover { background: rgba(245,166,35,.06); }
html.theme-dark .set-cat-title { color: var(--text-primary); }
html.theme-dark .set-cat-desc,
html.theme-dark .set-cat-chevron { color: var(--text-secondary); }
html.theme-dark .dash-section-hdr:hover { background: transparent; }

/* Column color rules — match dark surfaces */
html.theme-dark .gcr-rule { border-bottom-color: var(--border); }
html.theme-dark .gcr-col-name { color: var(--text-primary); }
html.theme-dark .gcr-tag.green  { background: rgba(143,191,106,.16); color: #8fbf6a; }
html.theme-dark .gcr-tag.yellow { background: rgba(245,166,35,.16); color: #f5a623; }
html.theme-dark .gcr-tag.red    { background: rgba(201,106,90,.16); color: #c96a5a; }
html.theme-dark .gcr-edit, html.theme-dark .gcr-del { color: var(--text-secondary); }

/* Cs-switch toggle — dark track instead of light gray */
html.theme-dark .cs-slider { background: #2a2620; }
html.theme-dark .cs-slider::before { background: #e8e4d8; }
html.theme-dark .cs-switch input:checked + .cs-slider { background: #8fbf6a; }

/* Column-settings modal — full sweep so the white surfaces go away */
html.theme-dark .cs-type-badge { background: #1f1d19; color: var(--text-secondary); }
html.theme-dark .cs-section-title { color: var(--text-primary); border-bottom-color: var(--border); }
html.theme-dark .cs-field-label,
html.theme-dark .cs-toggle-row { color: var(--text-primary); }
html.theme-dark .cs-toggle-row { border-bottom-color: var(--border); }

/* Settings tables (column-settings + calc-tools) */
html.theme-dark .settings-table thead th,
html.theme-dark .sl-settings-table thead th { background: #1a1814; color: var(--text-secondary); border-bottom-color: var(--border); }
html.theme-dark .settings-table tbody td,
html.theme-dark .sl-settings-table tbody td { border-bottom-color: var(--border); color: var(--text-primary); }
html.theme-dark .settings-table tbody tr:nth-child(even),
html.theme-dark .sl-settings-table tbody tr:nth-child(even) { background: rgba(245,166,35,.03); }
html.theme-dark .settings-table .toggle-switch,
html.theme-dark .toggle-switch { accent-color: #f5a623; }

/* Color rule popover dark restyle */
html.theme-dark .cs-pop-title { color: var(--text-primary); }
html.theme-dark .cs-range-sep,
html.theme-dark .cs-pop-hint,
html.theme-dark .cs-pop-clear { color: var(--text-secondary); }
html.theme-dark .cs-pop-clear:hover { color: var(--text-primary); }
html.theme-dark .cs-pop-actions { border-top-color: var(--border); }
html.theme-dark .cs-color-btn { border-color: var(--border); color: var(--text-secondary); }
html.theme-dark .cs-color-btn:hover { border-color: #f5a623; color: #f5a623; }
html.theme-dark .cs-color-btn.active { border-color: #f5a623; color: #f5a623; background: rgba(245,166,35,.1); }

/* Search bar inside settings page */
html.theme-dark .set-search { color: var(--text-primary); }
html.theme-dark .set-search::placeholder { color: var(--text-secondary); }

/* Settings rows */
html.theme-dark .set-row { border-bottom-color: var(--border); }
html.theme-dark .set-label { color: var(--text-primary); }
html.theme-dark .set-desc,
html.theme-dark .set-default-hint,
html.theme-dark .set-unit { color: var(--text-secondary); }

/* Settings toggle (set-toggle) — match cs-slider treatment */
html.theme-dark .set-toggle-slider { background: #2a2620; }
html.theme-dark .set-toggle-slider::before { background: #e8e4d8; }
html.theme-dark .set-toggle input:checked + .set-toggle-slider { background: #8fbf6a; }

/* Tag editor inside settings */
html.theme-dark .set-tag { background: rgba(245,166,35,.12); color: #f5a623; }
html.theme-dark .set-tag-x { color: var(--text-secondary); }

/* GCR editor (number/text range editor) */
html.theme-dark .gcr-editor-title,
html.theme-dark .gcr-editor-row label { color: var(--text-primary); }
html.theme-dark .gcr-sep { color: var(--text-secondary); }
html.theme-dark .gcr-editor-actions { border-top-color: var(--border); }

/* More-actions menu (toolbar dropdown) — was hardcoded #fff */
html.theme-dark .more-actions-menu {
  background: #221f19;
  border-color: #3a342a;
  box-shadow: 0 8px 24px rgba(0,0,0,.65);
  color: var(--text-primary);
}
html.theme-dark .menu-item { color: var(--text-primary); }
html.theme-dark .menu-item:hover { background: #2d2922; }
html.theme-dark .menu-item .material-symbols-outlined { color: var(--text-secondary); }
html.theme-dark .menu-sep { background: #1f1d19; }
html.theme-dark .menu-label { color: var(--text-secondary); }
html.theme-dark .menu-toggle { color: var(--text-primary); }
html.theme-dark .menu-toggle input { accent-color: #f5a623; }

/* Other hardcoded #fff surfaces still visible in dark mode */
html.theme-dark .modal-ac-dropdown { background: #221f19; border-color: #3a342a; box-shadow: 0 8px 24px rgba(0,0,0,.65); }
html.theme-dark .pg-btn:disabled { background: #141412; }
html.theme-dark .fr-status-select { background: #141412; color: var(--text-primary); border-color: #2a2620; }
html.theme-dark .period-filter select { background: #141412; color: var(--text-primary); border-color: #2a2620; }
html.theme-dark .chip.chip-sell { background: rgba(201,106,90,.16); color: #c96a5a; }
html.theme-dark .chip.chip-hold { background: rgba(245,166,35,.16); color: #f5a623; }
html.theme-dark .fr-status-in_progress { background: rgba(245,166,35,.16); color: #f5a623; }

/* Filter modal rows + activity dropdown — were #fff */
html.theme-dark .filter-row select,
html.theme-dark .filter-row input,
html.theme-dark .ad-filter-row select,
html.theme-dark .ad-search-row input { background: #141412; color: var(--text-primary); border-color: #2a2620; }
html.theme-dark .filter-row select:focus,
html.theme-dark .filter-row input:focus,
html.theme-dark .ad-filter-row select:focus,
html.theme-dark .ad-search-row input:focus { border-color: #f5a623; box-shadow: 0 0 0 3px rgba(245,166,35,.2); }

/* Global search results panel */
html.theme-dark .global-search-results { background: #221f19; border-color: #3a342a; box-shadow: 0 8px 24px rgba(0,0,0,.65); }

/* Journal view-modal rows */
.jrnl-view-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.jrnl-view-row:last-child { border-bottom: none; }
.jrnl-view-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.jrnl-view-val { font-size: 14px; color: var(--text-primary); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.jrnl-cell-link:hover .status-badge { filter: brightness(1.15); }





/* ============================================================
 * Notes — shared input component used by every grid.
 * Visuals follow the design mockup: rest / hover / focus / error,
 * inline counter, save (▶) and trash icons, @user / #TICKER chips.
 * ============================================================ */

/* Cell renderer in grids */
.note-cell {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.3;
}
.note-cell-empty { color: var(--text-secondary); font-style: italic; }
.note-cell-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.note-cell-avatar {
  width: 18px; height: 18px; border-radius: 50%;
  object-fit: cover; flex: 0 0 18px;
  background: rgba(255,255,255,0.06); display: inline-block;
}
.note-cell-avatar-init {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--primary), #6c5ce7);
}
.note-cell-count {
  background: var(--chip-bg);
  color: var(--primary);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.note-cell:hover { color: var(--primary); }

/* Mention chips (in cells, popovers, and symbol-detail) */
.note-chip {
  display: inline-block;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.95em;
}
.note-chip-user {
  background: rgba(58, 124, 238, 0.10);
  color: var(--primary);
}
.note-chip-ticker {
  background: rgba(30, 203, 133, 0.12);
  color: #1ecb85;
  cursor: pointer;
}
.note-chip-ticker:hover { filter: brightness(0.92); }

/* Popover container */
.note-popover {
  position: absolute;
  z-index: 9000;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 12px;
}

/* Field — matches the mockup states */
.note-field {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px 8px;
  background: var(--card-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.note-field:hover { border-color: #adb6c9; }
.note-field.is-focused {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(58, 124, 238, 0.15);
}
.note-field.is-error {
  border-color: var(--status-warn-text);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.10);
}
.note-author {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-primary);
}
.note-author-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  object-fit: cover; flex: 0 0 24px;
  background: rgba(255,255,255,0.06); display: inline-block;
}
.note-author-avatar-init {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--primary), #6c5ce7);
}
.note-author-name { font-weight: 600; }
.note-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.note-field.is-focused .note-field-label { color: var(--primary); }
.note-field.is-error .note-field-label { color: var(--status-warn-text); }
.note-field-input {
  width: 100%;
  border: none;
  outline: none;
  resize: vertical;
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.45;
  min-height: 60px;
}
.note-field-input::placeholder { color: var(--text-secondary); }

/* Bottom bar with counter + icon actions */
.note-field-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  border-top: 1px dashed transparent;
  padding-top: 4px;
}
.note-field.is-focused .note-field-bar,
.note-field.is-error .note-field-bar { border-top-color: var(--border); }
.note-field-count {
  font-size: 11px;
  color: var(--text-secondary);
}
.note-field-count.over { color: var(--status-warn-text); font-weight: 600; }
.note-field-actions { display: flex; gap: 6px; }
.note-icon-btn {
  border: none;
  background: var(--primary);
  color: #fff;
  width: 24px; height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
.note-icon-btn:hover { background: var(--primary-hover); }
.note-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.note-icon-delete { background: transparent; color: var(--text-secondary); }
.note-icon-delete:hover { background: var(--status-warn-bg); color: var(--status-warn-text); }

.note-field-error {
  margin-top: 6px;
  font-size: 11px;
  color: var(--status-warn-text);
  min-height: 14px;
}

/* Mention autocomplete menu (lives on body so it can escape overflow) */
.note-mention-menu {
  position: absolute;
  z-index: 9100;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
}
.note-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
}
.note-mention-item.active,
.note-mention-item:hover { background: var(--chip-bg); }
.note-mention-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.note-mention-avatar img { width: 100%; height: 100%; object-fit: cover; }
.note-mention-label { font-weight: 600; }
.note-mention-sub { color: var(--text-secondary); margin-left: auto; font-size: 11px; }

/* ==========================================
   Tasks feature — list / kanban / mindmap / sprint
   ==========================================
*/

.tasks-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--border, #e2e8f0);
  background: var(--bg-secondary, #f8fafc);
}
.tasks-toolbar-spacer { flex: 1; }
.tasks-view-switcher { display: inline-flex; gap: 2px; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; padding: 2px; }
.tvs-btn { background: transparent; border: 0; padding: 6px 10px; cursor: pointer; border-radius: 6px; color: var(--text-secondary, #64748b); }
.tvs-btn .material-symbols-outlined { font-size: 18px; vertical-align: middle; }
.tvs-btn:hover { background: #f1f5f9; }
.tvs-btn.active { background: #3a5ba2; color: #fff; }

.tasks-view-host { padding: 12px; min-height: 60vh; }

/* List view */
.tasks-list-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; }
.tasks-list-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tasks-list-table thead th { text-align: left; padding: 10px 12px; background: #f8fafc; border-bottom: 1px solid var(--border, #e2e8f0); font-weight: 600; color: #475569; }
.tasks-list-table tbody tr { cursor: pointer; }
.tasks-list-table tbody tr:hover { background: #f8fafc; }
.tasks-list-table tbody td { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tasks-list-table .tasks-col-name { min-width: 280px; }
.tasks-tree-toggle { display: inline-block; width: 16px; cursor: pointer; color: #64748b; user-select: none; }
.tasks-tree-toggle-spacer { display: inline-block; width: 16px; }
.tasks-type-icon { font-size: 16px; vertical-align: middle; color: #64748b; margin: 0 4px; }
.tasks-type-icon-sm { font-size: 14px; vertical-align: middle; color: #64748b; }
.tasks-row-title { vertical-align: middle; }
.tasks-type-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: #eef2f7; color: #475569; text-transform: capitalize; }
.tasks-priority-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.tasks-status-pill { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.tasks-tag { display: inline-block; padding: 2px 8px; margin: 0 2px 2px 0; border-radius: 10px; font-size: 11px; background: #eef2f7; color: #475569; }
.tasks-tag-removable { cursor: pointer; }
.tasks-tag-x { color: #94a3b8; margin-left: 4px; }
.tasks-checklist-badge, .tasks-attach-badge { display: inline-block; margin-right: 6px; font-size: 11px; color: #64748b; padding: 2px 6px; background: #f1f5f9; border-radius: 8px; }
.tasks-no-assignee { color: #cbd5e0; }

/* Avatar stack */
.tasks-avatar-stack { display: inline-flex; align-items: center; }
.tasks-avatar { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-left: -6px; background: #cbd5e0; object-fit: cover; }
.tasks-avatar:first-child { margin-left: 0; }
.tasks-avatar-init { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; background: #3a5ba2; }
.tasks-avatar-more { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #475569; background: #e2e8f0; width: 24px; height: 24px; border-radius: 50%; margin-left: -6px; border: 2px solid #fff; }

/* Kanban view */
.tasks-kanban { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.tasks-kb-col { background: #f8fafc; border-radius: 8px; min-height: 200px; overflow: hidden; }
.tasks-kb-col-header { padding: 8px 12px; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.tasks-kb-col-count { background: rgba(0,0,0,0.08); padding: 1px 8px; border-radius: 10px; font-size: 11px; }
.tasks-kb-col-body { padding: 8px; min-height: 120px; }
.tasks-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; margin-bottom: 8px; cursor: pointer; transition: box-shadow 0.15s; }
.tasks-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.tasks-card.dragging { opacity: 0.4; }
.tasks-card-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; line-height: 1.3; }
.tasks-card-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #64748b; margin-bottom: 6px; }
.tasks-card-meta-item { display: inline-flex; gap: 2px; }
.tasks-card-tags { margin-bottom: 6px; }
.tasks-card-footer { display: flex; align-items: center; justify-content: space-between; }
.tasks-card-meta-right { font-size: 11px; color: #64748b; }

/* Sprint view */
.tasks-sprint { padding: 4px; }
.tasks-sprint-header { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.tasks-sprint-info { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.tasks-sprint-picker { padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; }
.tasks-sprint-meta { font-size: 12px; color: #64748b; }
.tasks-sprint-bar { width: 200px; height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; }
.tasks-sprint-bar-fill { height: 100%; background: #1f7a3a; }
.tasks-sprint-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tasks-sprint-col h3 { margin: 0 0 8px 0; font-size: 14px; }
.tasks-sprint-list { background: #f8fafc; border-radius: 8px; padding: 8px; min-height: 200px; }
.tasks-section-count { color: #94a3b8; font-weight: normal; }

/* Mindmap view */
.tasks-mindmap-host { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; }
.tasks-mindmap-scroll { overflow: auto; max-height: 75vh; }

/* Task modal */
.task-modal { width: min(1100px, 95vw); max-height: 90vh; display: flex; flex-direction: column; }
.task-modal-body { display: flex; flex-direction: column; padding: 16px; overflow: auto; flex: 1; }
.task-breadcrumb { font-size: 12px; color: #64748b; }
.task-bc-link { color: #3a5ba2; cursor: pointer; }
.task-bc-link:hover { text-decoration: underline; }
.task-bc-sep { margin: 0 4px; color: #cbd5e0; }
.task-bc-current { font-weight: 600; color: #1f2937; }
.task-header-row { margin-bottom: 12px; }
.task-title-input { font-size: 18px; font-weight: 600; padding: 8px 10px; width: 100%; }
.task-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.task-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 14px; font-size: 12px; cursor: pointer; }
.task-chip-select { padding: 4px 8px; }
.task-chip .material-symbols-outlined { font-size: 14px; }
.task-chip-status { font-weight: 600; }
.chip-input { border: none; background: transparent; font-size: 12px; outline: none; }
.task-assignees-stack { display: inline-flex; align-items: center; gap: 0; margin-left: auto; }
.task-assignee-add { width: 24px; height: 24px; border-radius: 50%; border: 2px dashed #cbd5e0; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 4px; }
.task-assignee-add .material-symbols-outlined { font-size: 14px; color: #64748b; }
.task-body-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; flex: 1; min-height: 400px; }
.task-rich-input { min-height: 100px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; }
.task-rich-input:empty:before { content: attr(data-placeholder); color: #94a3b8; }
.task-rich-input img { max-width: 100%; }
.task-tags-row { margin-top: 12px; }
.task-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.task-tags-input { font-size: 12px; padding: 6px; }
.task-tabs { display: flex; gap: 4px; border-bottom: 1px solid #e2e8f0; margin-bottom: 12px; }
.task-tab { background: transparent; border: 0; padding: 8px 12px; font-size: 13px; cursor: pointer; color: #64748b; border-bottom: 2px solid transparent; }
.task-tab.active { color: #3a5ba2; border-bottom-color: #3a5ba2; font-weight: 600; }
.task-tab-panel { padding: 4px 0; }
.task-section-title { display: flex; align-items: center; font-size: 13px; font-weight: 600; color: #475569; padding: 6px 0; border-bottom: 1px solid #f1f5f9; margin-bottom: 6px; gap: 6px; }
.task-section-add { background: transparent; border: 0; cursor: pointer; color: #3a5ba2; margin-left: auto; }
.task-section-add .material-symbols-outlined { font-size: 18px; }
.task-cl-row { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; padding: 4px 0; }
.task-cl-text { padding: 4px 6px; font-size: 13px; }
.task-cl-del { background: transparent; border: 0; color: #94a3b8; cursor: pointer; font-size: 16px; }
.task-child-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.task-child-row:hover { background: #f1f5f9; }
.task-child-icon { font-size: 14px; color: #64748b; }
.task-child-title { flex: 1; }
.task-child-status { font-size: 11px; padding: 1px 8px; border-radius: 8px; font-weight: 600; }
.task-child-status-todo { background: #fff7d6; color: #b58e00; }
.task-child-status-doing { background: #e7f0ff; color: #3a5ba2; }
.task-child-status-done { background: #dff5e3; color: #1f7a3a; }
.task-child-status-bugs { background: #ffe0e0; color: #a82020; }
.task-att-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f1f5f9; }
.task-att-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; }
.task-att-name { color: #3a5ba2; font-size: 13px; flex: 1; text-decoration: none; }
.task-att-del { background: transparent; border: 0; color: #94a3b8; cursor: pointer; font-size: 16px; }
.task-link-row { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 6px; padding: 4px 0; }
.task-link-del { background: transparent; border: 0; color: #94a3b8; cursor: pointer; font-size: 16px; }
.task-hint { color: #94a3b8; font-size: 12px; padding: 8px 4px; }
.task-chat-thread { max-height: 280px; overflow-y: auto; padding: 4px; }
.task-chat-msg { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.task-chat-author { font-weight: 600; }
.task-chat-time { color: #94a3b8; font-size: 11px; margin-left: 8px; }
.task-chat-body { margin-top: 2px; }
.task-chat-input-wrap { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding-top: 8px; border-top: 1px solid #e2e8f0; }

/* Popovers */
.popover { position: fixed; z-index: 10001; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 8px; min-width: 260px; max-width: 360px; }
.popover-header { font-weight: 600; padding: 4px 8px 8px; border-bottom: 1px solid #f1f5f9; margin-bottom: 8px; }
.popover-footer { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding-top: 8px; margin-top: 8px; border-top: 1px solid #f1f5f9; }
.task-sprint-item, .task-assignee-item { padding: 6px 8px; cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 8px; }
.task-sprint-item:hover, .task-assignee-item:hover { background: #f1f5f9; }

/* Mobile */
@media (max-width: 768px) {
  .tasks-kanban { grid-template-columns: 1fr; }
  .tasks-sprint-cols { grid-template-columns: 1fr; }
  .task-body-grid { grid-template-columns: 1fr; }
}


/* ── Tasks dark mode ── */
html.theme-dark .tasks-toolbar { background: #141412; border-bottom-color: #1f1d19; }
html.theme-dark .tasks-view-switcher { background: #1a1814; border-color: #2a2620; }
html.theme-dark .tvs-btn { color: #a3a39a; }
html.theme-dark .tvs-btn:hover { background: #2a2620; }
html.theme-dark .tvs-btn.active { background: #f5a623; color: #0b0b0b; }

html.theme-dark .tasks-list-wrap { background: #141412; border-color: #1f1d19; }
html.theme-dark .tasks-list-table thead th { background: #1a1814; border-bottom-color: #2a2620; color: #a3a39a; }
html.theme-dark .tasks-list-table tbody tr:hover { background: rgba(245,166,35,.05); }
html.theme-dark .tasks-list-table tbody td { border-bottom-color: #1f1d19; }
html.theme-dark .tasks-tree-toggle { color: #a3a39a; }
html.theme-dark .tasks-type-icon, html.theme-dark .tasks-type-icon-sm { color: #a3a39a; }
html.theme-dark .tasks-type-pill { background: #2a2620; color: #d4d4cc; }
html.theme-dark .tasks-tag { background: #2a2620; color: #d4d4cc; }
html.theme-dark .tasks-checklist-badge,
html.theme-dark .tasks-attach-badge { background: #2a2620; color: #a3a39a; }
html.theme-dark .tasks-no-assignee { color: #4a4742; }
html.theme-dark .tasks-avatar { border-color: #141412; }
html.theme-dark .tasks-avatar-init { background: #f5a623; color: #0b0b0b; }
html.theme-dark .tasks-avatar-more { background: #2a2620; color: #d4d4cc; border-color: #141412; }

html.theme-dark .tasks-kb-col { background: #1a1814; }
html.theme-dark .tasks-card { background: #141412; border-color: #2a2620; color: #d4d4cc; }
html.theme-dark .tasks-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
html.theme-dark .tasks-card-meta, html.theme-dark .tasks-card-meta-right { color: #a3a39a; }

html.theme-dark .tasks-sprint-header { background: #141412; border-color: #1f1d19; }
html.theme-dark .tasks-sprint-picker { background: #1a1814; border-color: #2a2620; color: #d4d4cc; }
html.theme-dark .tasks-sprint-meta { color: #a3a39a; }
html.theme-dark .tasks-sprint-bar { background: #2a2620; }
html.theme-dark .tasks-sprint-bar-fill { background: #4ade80; }
html.theme-dark .tasks-sprint-list { background: #1a1814; }
html.theme-dark .tasks-section-count { color: #4a4742; }

html.theme-dark .tasks-mindmap-host { background: #141412; border-color: #1f1d19; }
html.theme-dark .tasks-mindmap-host svg path { stroke: #2a2620 !important; }

/* Modal */
html.theme-dark .task-modal { background: #141412; color: #d4d4cc; }
html.theme-dark .task-breadcrumb { color: #a3a39a; }
html.theme-dark .task-bc-link { color: #f5a623; }
html.theme-dark .task-bc-current { color: #f4f4ee; }
html.theme-dark .task-bc-sep { color: #4a4742; }
html.theme-dark .task-chip { background: #1a1814; border-color: #2a2620; color: #d4d4cc; }
html.theme-dark .task-rich-input { background: #1a1814; border-color: #2a2620; color: #d4d4cc; }
html.theme-dark .task-rich-input:empty:before { color: #4a4742; }
html.theme-dark .task-tabs { border-bottom-color: #2a2620; }
html.theme-dark .task-tab { color: #a3a39a; }
html.theme-dark .task-tab.active { color: #f5a623; border-bottom-color: #f5a623; }
html.theme-dark .task-section-title { color: #d4d4cc; border-bottom-color: #1f1d19; }
html.theme-dark .task-section-add { color: #f5a623; }
html.theme-dark .task-child-row:hover { background: #1a1814; }
html.theme-dark .task-child-icon { color: #a3a39a; }
html.theme-dark .task-att-row { border-bottom-color: #1f1d19; }
html.theme-dark .task-att-name { color: #f5a623; }
html.theme-dark .task-att-del, html.theme-dark .task-cl-del, html.theme-dark .task-link-del { color: #4a4742; }
html.theme-dark .task-hint { color: #4a4742; }
html.theme-dark .task-assignee-add { background: #1a1814; border-color: #2a2620; }
html.theme-dark .task-assignee-add .material-symbols-outlined { color: #a3a39a; }
html.theme-dark .task-chat-thread { color: #d4d4cc; }
html.theme-dark .task-chat-msg { border-bottom-color: #1f1d19; }
html.theme-dark .task-chat-time { color: #4a4742; }
html.theme-dark .task-chat-input-wrap { border-top-color: #2a2620; }

html.theme-dark .popover { background: #141412; border-color: #2a2620; color: #d4d4cc; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
html.theme-dark .popover-header { border-bottom-color: #1f1d19; }
html.theme-dark .popover-footer { border-top-color: #1f1d19; }
html.theme-dark .task-sprint-item:hover, html.theme-dark .task-assignee-item:hover { background: #1a1814; }

/* btn-danger (used by Task modal Delete button) — defined globally so it
   reads correctly in both light and dark themes. */
.btn-danger { background: #fee2e2; color: #a82020; border: 1px solid #fca5a5; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.btn-danger:hover { background: #fecaca; }
.btn-danger .material-symbols-outlined { font-size: 16px; }
html.theme-dark .btn-danger { background: rgba(168,32,32,.18); color: #fca5a5; border-color: rgba(168,32,32,.4); }
html.theme-dark .btn-danger:hover { background: rgba(168,32,32,.28); }

/* Status pills: re-tone for dark mode (the inline bg/fg is light-palette only) */
html.theme-dark .tasks-status-pill { filter: brightness(0.55) saturate(1.3); }
html.theme-dark .tasks-status-pill[style*="#fff7d6"] { background: rgba(245,166,35,.18) !important; color: #f5a623 !important; }
html.theme-dark .tasks-status-pill[style*="#e7f0ff"] { background: rgba(58,91,162,.25) !important; color: #93c5fd !important; }
html.theme-dark .tasks-status-pill[style*="#dff5e3"] { background: rgba(31,122,58,.25) !important; color: #4ade80 !important; }
html.theme-dark .tasks-status-pill[style*="#ffe0e0"] { background: rgba(168,32,32,.25) !important; color: #fca5a5 !important; }
html.theme-dark .tasks-status-pill { filter: none; }

/* Kanban column headers — same overrides */
html.theme-dark .tasks-kb-col-header[style*="#fff7d6"] { background: rgba(245,166,35,.18) !important; color: #f5a623 !important; }
html.theme-dark .tasks-kb-col-header[style*="#e7f0ff"] { background: rgba(58,91,162,.25) !important; color: #93c5fd !important; }
html.theme-dark .tasks-kb-col-header[style*="#dff5e3"] { background: rgba(31,122,58,.25) !important; color: #4ade80 !important; }
html.theme-dark .tasks-kb-col-header[style*="#ffe0e0"] { background: rgba(168,32,32,.25) !important; color: #fca5a5 !important; }
html.theme-dark .tasks-kb-col-count { background: rgba(255,255,255,0.08); }

/* Mindmap nodes — recolor SVG fills based on data-status to avoid the inline
   light-palette fill. */
html.theme-dark .tmm-node rect { fill: #1a1814 !important; stroke: #2a2620 !important; }
html.theme-dark .tmm-node[data-status="todo"] rect  { fill: rgba(245,166,35,.12) !important; stroke: #f5a623 !important; }
html.theme-dark .tmm-node[data-status="doing"] rect { fill: rgba(58,91,162,.18) !important;  stroke: #93c5fd !important; }
html.theme-dark .tmm-node[data-status="done"] rect  { fill: rgba(31,122,58,.18) !important;  stroke: #4ade80 !important; }
html.theme-dark .tmm-node[data-status="bugs"] rect  { fill: rgba(168,32,32,.18) !important;  stroke: #fca5a5 !important; }
html.theme-dark .tmm-node[data-status="todo"] text  { fill: #f5a623 !important; }
html.theme-dark .tmm-node[data-status="doing"] text { fill: #93c5fd !important; }
html.theme-dark .tmm-node[data-status="done"] text   { fill: #4ade80 !important; }
html.theme-dark .tmm-node[data-status="bugs"] text   { fill: #fca5a5 !important; }
html.theme-dark .tmm-node text:nth-of-type(2),
html.theme-dark .tmm-node text:nth-of-type(3) { fill: #a3a39a !important; }

/* Tasks list row cell layout (used inside the standard data-table) */
.tasks-row-cell { display: inline-flex; align-items: center; gap: 4px; }
.tasks-row-title { font-weight: 500; }

/* Done cards in kanban: strike through to indicate completion */
.tasks-card[data-status="done"] .tasks-card-title { text-decoration: line-through; opacity: 0.65; }
.tasks-card[data-status="done"] { opacity: 0.85; }

/* Bug type pill — distinct color */
.tasks-type-pill.tasks-type-bug { background: rgba(168,32,32,0.12); color: #a82020; }
html.theme-dark .tasks-type-pill.tasks-type-bug { background: rgba(168,32,32,0.25); color: #fca5a5; }

/* Toolbar search clear (X) button */
.table-search { position: relative; }
.table-search-clear {
  background: transparent; border: 0; cursor: pointer;
  color: #94a3b8; padding: 2px; margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.table-search-clear:hover { color: #475569; background: rgba(0,0,0,0.05); }
.table-search-clear .material-symbols-outlined { font-size: 16px; }
html.theme-dark .table-search-clear { color: #6a6760; }
html.theme-dark .table-search-clear:hover { color: #d4d4cc; background: rgba(255,255,255,0.06); }

/* Smart-search hint + live match count.
   Both sit on a row BELOW the search input so the input keeps its full
   width. The hint reveals itself the moment the user types; the match
   count appears next to it and right-aligns within the row. */
.table-search-wrap { display: inline-flex; flex-direction: column; gap: 4px; min-width: 0; }
.table-search-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 14px; /* keep layout stable when both children are hidden */
}
.table-search-hint {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  letter-spacing: 0.02em;
  line-height: 1.5;
  flex: 1 1 auto;
  min-width: 0;
}
.table-search-hint code {
  font-family: inherit;
  background: rgba(127,127,127,0.10);
  border-radius: 3px;
  padding: 0 4px;
  color: inherit;
}
.table-search-hint[hidden] { display: none; }
.table-match-count {
  font-size: 11.5px;
  color: var(--text-secondary, #94a3b8);
  white-space: nowrap;
  flex-shrink: 0;
}
.table-match-count[hidden] { display: none; }
mark.search-hit {
  background: rgba(245,166,35,0.22);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
html.theme-dark mark.search-hit { background: rgba(245,166,35,0.28); }

/* Calendar Source cell — comma-separated tags with the `sec` tag
   styled as a navigable link (routes to SEC Filings page). */
.cal-src { color: var(--text-secondary, #94a3b8); }
a.cal-src-sec {
  color: var(--primary, #3a7cee);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dotted var(--primary, #3a7cee);
}
a.cal-src-sec:hover { color: var(--primary, #3a7cee); border-bottom-style: solid; }

/* Inline status picker (tasks list) */
.tasks-status-popover { padding: 4px; min-width: 140px; display: flex; flex-direction: column; gap: 4px; }
.tasks-status-popover-item {
  border: 0; cursor: pointer; padding: 6px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600; text-align: left;
  display: inline-flex; align-items: center; justify-content: space-between;
}
.tasks-status-popover-item:hover { filter: brightness(0.95); }
html.theme-dark .tasks-status-popover-item:hover { filter: brightness(1.15); }

/* Tasks modal — description (markdown) area */
.task-desc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.task-desc-tabs { display: inline-flex; gap: 2px; background: #f1f5f9; border-radius: 6px; padding: 2px; }
.task-desc-tab { background: transparent; border: 0; padding: 4px 10px; cursor: pointer; border-radius: 4px; color: #64748b; font-size: 12px; }
.task-desc-tab:hover { background: #e2e8f0; }
.task-desc-tab.active { background: #3a5ba2; color: #fff; }
.task-desc-hint { margin-left: auto; font-size: 11px; color: #94a3b8; padding: 2px 6px; background: #f1f5f9; border-radius: 4px; cursor: help; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.task-desc-input { width: 100%; min-height: 320px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; padding: 10px; }
.task-desc-preview { min-height: 320px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; line-height: 1.5; overflow-y: auto; max-height: 60vh; }
.task-desc-preview h1 { font-size: 18px; margin: 8px 0 6px; }
.task-desc-preview h2 { font-size: 16px; margin: 8px 0 6px; }
.task-desc-preview h3 { font-size: 14px; margin: 8px 0 6px; }
.task-desc-preview pre { background: #f8fafc; padding: 8px 10px; border-radius: 4px; overflow-x: auto; font-size: 12px; }
.task-desc-preview code { background: #f1f5f9; padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.task-desc-preview pre code { background: transparent; padding: 0; }
.task-desc-preview a { color: #3a5ba2; }
.task-desc-preview img { max-width: 100%; border-radius: 4px; margin: 6px 0; }
.task-desc-preview ul { padding-left: 20px; margin: 6px 0; }
.task-desc-preview p { margin: 6px 0; }

html.theme-dark .task-desc-tabs { background: #1a1814; }
html.theme-dark .task-desc-tab { color: #a3a39a; }
html.theme-dark .task-desc-tab:hover { background: #2a2620; }
html.theme-dark .task-desc-tab.active { background: #f5a623; color: #0b0b0b; }
html.theme-dark .task-desc-hint { background: #1a1814; color: #6a6760; }
html.theme-dark .task-desc-input { background: #1a1814; border-color: #2a2620; color: #d4d4cc; }
html.theme-dark .task-desc-preview { background: #1a1814; border-color: #2a2620; color: #d4d4cc; }
html.theme-dark .task-desc-preview pre { background: #0b0b0b; }
html.theme-dark .task-desc-preview code { background: #2a2620; color: #f5a623; }
html.theme-dark .task-desc-preview a { color: #f5a623; }

/* ── Changelog page ────────────────────────────────────────────────── */
.cl-page { max-width: 1080px; margin: 0 auto; padding: 12px 16px 48px; }

/* Stats row */
.cl-stats-section { margin-bottom: 16px; }
.cl-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 8px; }
.cl-stat-card { background: #f6faff; border: 1px solid #e8eeff; border-radius: 8px; padding: 10px 12px; }
.cl-stat-label { font-size: 10px; color: #969dad; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.cl-stat-val { font-size: 18px; font-weight: 700; color: #394463; margin-top: 2px; }
.cl-stat-sub { font-size: 11px; color: #969dad; margin-top: 1px; }
.cl-fun-line { font-size: 12px; color: #6b7484; padding: 6px 4px; }

/* Heatmap */
.cl-heatmap-wrap { background: #f6faff; border: 1px solid #e8eeff; border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
.cl-heat-months { display: grid; grid-template-columns: 24px repeat(12, 1fr); gap: 2px; font-size: 10px; color: #969dad; margin-bottom: 2px; padding-left: 26px; }
.cl-heat-month { text-align: left; }
.cl-heatmap { display: flex; gap: 4px; }
.cl-heat-labels { display: flex; flex-direction: column; gap: 2px; font-size: 9px; color: #969dad; padding-right: 2px; }
.cl-heat-day-label { height: 12px; line-height: 12px; }
.cl-heat-grid { display: flex; gap: 2px; flex: 1; }
.cl-heat-col { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cl-heat-cell { width: 100%; height: 12px; border-radius: 2px; background: #ebedf0; cursor: pointer; transition: outline 0.1s; }
.cl-heat-cell.b1 { background: #c6e48b; }
.cl-heat-cell.b2 { background: #7bc96f; }
.cl-heat-cell.b3 { background: #239a3b; }
.cl-heat-cell.b4 { background: #196127; }
.cl-heat-cell.selected { outline: 2px solid #3a7cee; outline-offset: 1px; }
.cl-heat-legend { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #969dad; justify-content: flex-end; margin-top: 6px; }
.cl-heat-legend .cl-heat-cell { width: 12px; height: 12px; cursor: default; }

/* Filter bar */
.cl-filter-bar { background: #fff; border: 1px solid #e8eeff; border-radius: 8px; padding: 10px 12px; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.cl-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-search-icon { font-size: 16px; color: #969dad; }
.cl-search { flex: 1; min-width: 180px; padding: 6px 10px; border: 1px solid #e8eeff; border-radius: 6px; font-family: inherit; font-size: 13px; color: #394463; background: #f6faff; }
.cl-search:focus { outline: none; border-color: #3a7cee; background: #fff; }
.cl-range-group, .cl-chip-group, .cl-effort-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 14px; border: 1px solid #e8eeff; background: #fff; color: #6b7484; font-family: inherit; font-size: 12px; cursor: pointer; transition: all 0.15s; }
.cl-chip:hover { border-color: #3a7cee; color: #3a7cee; }
.cl-chip.active { background: #3a7cee; border-color: #3a7cee; color: #fff; }
.cl-chip.active .material-symbols-outlined { color: #fff !important; }
.cl-area-filter.active { background: var(--cl-chip-c, #3a7cee); border-color: var(--cl-chip-c, #3a7cee); color: #fff; }
.cl-effort-label { font-size: 11px; color: #969dad; }
.cl-effort-input { width: 44px; padding: 3px 6px; border: 1px solid #e8eeff; border-radius: 4px; font-size: 12px; text-align: center; }
.cl-active-filter { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: #fff3cd; border-radius: 10px; font-size: 11px; color: #856404; }
.cl-active-filter button { background: none; border: none; cursor: pointer; font-size: 14px; color: #856404; padding: 0; }

/* Entry list */
.cl-list { display: flex; flex-direction: column; gap: 6px; }
.cl-empty { padding: 24px; text-align: center; color: #969dad; }

.cl-entry { background: #fff; border: 1px solid #e8eeff; border-radius: 8px; overflow: hidden; transition: box-shadow 0.15s; }
.cl-entry:hover { box-shadow: 0 2px 8px rgba(58,124,238,0.08); }
.cl-entry.open { box-shadow: 0 2px 12px rgba(58,124,238,0.12); }
.cl-entry.is-new { border-left: 3px solid #1ecb85; }
.cl-entry.pinned { background: #fffbe6; }

.cl-entry-hdr { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.cl-entry-hdr:hover { background: #f6faff; }
.cl-chevron { font-size: 18px; color: #969dad; flex-shrink: 0; }
.cl-ts { font-size: 12px; color: #394463; font-weight: 600; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cl-cat-icons { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.cl-cat-icon { font-size: 16px; }
.cl-cat-empty { color: #d9e3f0; font-size: 14px; }
.cl-area-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; border: 1px solid transparent; flex-shrink: 0; }
.cl-effort-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #e8eeff; color: #3a5ba2; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.cl-summary { flex: 1; font-size: 13px; color: #394463; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-new-pill { background: #1ecb85; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.4px; padding: 2px 6px; border-radius: 8px; flex-shrink: 0; }
.cl-entry-actions { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; opacity: 0.5; transition: opacity 0.15s; }
.cl-entry:hover .cl-entry-actions { opacity: 1; }
.cl-icon-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 4px; border-radius: 4px; cursor: pointer; color: #969dad; position: relative; text-decoration: none; }
.cl-icon-btn:hover { background: #e8eeff; color: #3a7cee; }
.cl-pin-btn.active { color: #f5a623; opacity: 1 !important; }
.cl-note-count { position: absolute; top: -2px; right: -2px; background: #3a7cee; color: #fff; font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 8px; min-width: 14px; text-align: center; }

.cl-entry-body { display: none; padding: 0 16px 12px 16px; border-top: 1px solid #f0f4fa; }
.cl-entry.open .cl-entry-body { display: block; }
.cl-entry-md { font-size: 13px; color: #394463; line-height: 1.5; padding-top: 8px; }
.cl-entry-md h3 { font-size: 12px; color: #6b7484; text-transform: uppercase; letter-spacing: 0.5px; margin: 12px 0 4px; }
.cl-entry-md ul { padding-left: 18px; margin: 4px 0; }
.cl-entry-md li { margin: 2px 0; }
.cl-entry-md strong { color: #1e2640; }
.cl-entry-md code { background: #f1f5f9; padding: 1px 4px; border-radius: 3px; font-size: 11px; }
.cl-entry-md a { color: #3a7cee; text-decoration: none; }
.cl-entry-md a:hover { text-decoration: underline; }

/* Notes panel */
.cl-notes-panel { margin-top: 10px; padding: 10px 12px; background: #f6faff; border-radius: 6px; border: 1px solid #e8eeff; }
.cl-notes-hdr { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #969dad; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.cl-note { padding: 6px 8px; background: #fff; border-radius: 4px; margin-bottom: 4px; }
.cl-note-meta { font-size: 10px; color: #969dad; display: flex; align-items: center; gap: 4px; }
.cl-note-meta b { color: #394463; font-weight: 600; }
.cl-note-del { margin-left: auto; }
.cl-note-body { font-size: 12px; color: #394463; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.cl-notes-empty { font-size: 12px; color: #969dad; padding: 4px 0; }
.cl-note-add { display: flex; gap: 6px; margin-top: 8px; align-items: flex-start; }
.cl-note-input { flex: 1; padding: 6px 8px; border: 1px solid #e8eeff; border-radius: 4px; font-family: inherit; font-size: 12px; resize: vertical; min-height: 32px; color: #394463; background: #fff; }
.cl-note-input:focus { outline: none; border-color: #3a7cee; }
.cl-note-post { padding: 6px 12px; background: #3a7cee; color: #fff; border: none; border-radius: 4px; font-family: inherit; font-size: 12px; cursor: pointer; }
.cl-note-post:hover { background: #2a6cde; }

/* Toast */
.cl-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #394463; color: #fff; padding: 10px 16px; border-radius: 6px; font-size: 12px; opacity: 0; transition: all 0.3s; z-index: 9999; pointer-events: none; }
.cl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Dark theme overrides */
html.theme-dark .cl-stat-card,
html.theme-dark .cl-heatmap-wrap,
html.theme-dark .cl-filter-bar,
html.theme-dark .cl-entry,
html.theme-dark .cl-notes-panel { background: #1a1814; border-color: #2a2620; }
html.theme-dark .cl-stat-val { color: #d4d4cc; }
html.theme-dark .cl-stat-label,
html.theme-dark .cl-stat-sub,
html.theme-dark .cl-fun-line,
html.theme-dark .cl-effort-label { color: #a3a39a; }
html.theme-dark .cl-ts,
html.theme-dark .cl-summary,
html.theme-dark .cl-note-meta b,
html.theme-dark .cl-note-body,
html.theme-dark .cl-entry-md { color: #d4d4cc; }
html.theme-dark .cl-entry-md strong { color: #f5a623; }
html.theme-dark .cl-entry-md h3 { color: #a3a39a; }
html.theme-dark .cl-entry-md code { background: #2a2620; color: #f5a623; }
html.theme-dark .cl-search { background: #0b0b0b; border-color: #2a2620; color: #d4d4cc; }
html.theme-dark .cl-search:focus { background: #1a1814; }
html.theme-dark .cl-chip { background: #0b0b0b; border-color: #2a2620; color: #a3a39a; }
html.theme-dark .cl-chip:hover { border-color: #f5a623; color: #f5a623; }
html.theme-dark .cl-chip.active { background: #f5a623; border-color: #f5a623; color: #0b0b0b; }
html.theme-dark .cl-effort-input { background: #0b0b0b; border-color: #2a2620; color: #d4d4cc; }
html.theme-dark .cl-entry:hover { background: #1f1c17; }
html.theme-dark .cl-entry-hdr:hover { background: #1f1c17; }
html.theme-dark .cl-icon-btn:hover { background: #2a2620; color: #f5a623; }
html.theme-dark .cl-entry.pinned { background: #2a2620; }
html.theme-dark .cl-heat-cell { background: #2a2620; }
html.theme-dark .cl-heat-cell.b1 { background: #4a3d20; }
html.theme-dark .cl-heat-cell.b2 { background: #8b6a30; }
html.theme-dark .cl-heat-cell.b3 { background: #c8851a; }
html.theme-dark .cl-heat-cell.b4 { background: #f5a623; }
html.theme-dark .cl-note { background: #0b0b0b; }
html.theme-dark .cl-note-input { background: #0b0b0b; border-color: #2a2620; color: #d4d4cc; }
html.theme-dark .cl-note-post { background: #f5a623; color: #0b0b0b; }

/* ─── Market State (Research) ─── */
.ms-page { padding: 4px 2px 24px; }
.ms-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ms-when { font-size: 12px; color: var(--text-secondary); }
.ms-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 13px;
  padding: 7px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text-primary); cursor: pointer; transition: var(--transition); }
.ms-btn:hover { border-color: var(--primary); }
.ms-btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.ms-btn--primary:hover { background: var(--primary-hover); }
.ms-btn:disabled { opacity: 0.6; cursor: default; }
.ms-btn .material-symbols-outlined { font-size: 18px; }

.ms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.ms-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.ms-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ms-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-sub { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }

.ms-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 15px; font-weight: 700; }
.ms-badge--pos { background: var(--status-active-bg); color: var(--status-active-text); }
.ms-badge--neg { background: var(--status-warn-bg); color: var(--status-warn-text); }
.ms-badge--neutral { background: var(--status-inactive-bg); color: var(--status-inactive-text); }
.ms-conf-chip { font-size: 11px; color: var(--text-secondary); background: var(--chip-bg); padding: 2px 8px; border-radius: 999px; }

.ms-conf-track { height: 6px; border-radius: 4px; background: var(--chip-bg); overflow: hidden; margin: 6px 0 10px; }
.ms-conf-fill { display: block; height: 100%; background: var(--primary); }
.ms-summary { font-size: 13px; line-height: 1.5; color: var(--text-primary); margin: 6px 0 10px; }

.ms-dist { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.ms-dist-row { display: grid; grid-template-columns: 90px 1fr 36px; align-items: center; gap: 8px; font-size: 12px; }
.ms-dist-label { color: var(--text-secondary); }
.ms-dist-track { height: 6px; border-radius: 4px; background: var(--chip-bg); overflow: hidden; }
.ms-dist-fill { display: block; height: 100%; background: var(--primary); }
.ms-dist-val { text-align: right; color: var(--text-secondary); }

.ms-drivers .ms-sub { display: block; margin: 6px 0 4px; }
.ms-drivers ul { margin: 0; padding-left: 18px; }
.ms-drivers li { font-size: 13px; color: var(--text-primary); line-height: 1.5; }

.ms-input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.ms-stat { background: var(--page-bg); border-radius: var(--radius); padding: 8px 10px; }
.ms-stat-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 3px; }
.ms-stat-val { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.ms-trend-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.ms-trend { font-size: 12px; color: var(--text-primary); }
.ms-muted { color: var(--text-secondary); }

.ms-info { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 2px; line-height: 0; border-radius: 4px; }
.ms-info:hover { color: var(--primary); }
.ms-info .material-symbols-outlined { font-size: 18px; }

.ms-degraded { font-size: 12px; color: var(--status-inactive-text); background: var(--status-inactive-bg); padding: 8px 10px; border-radius: var(--radius); margin: 4px 0 8px; }
.ms-loading, .ms-error { display: flex; align-items: center; gap: 8px; padding: 24px; color: var(--text-secondary); font-size: 13px; }
.ms-error { flex-direction: column; align-items: flex-start; }
.ms-empty { text-align: center; padding: 48px 24px; }
.ms-empty-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.ms-empty-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.ms-empty .ms-btn { margin: 0 auto; }
.ms-spin { animation: ms-spin 1s linear infinite; }
@keyframes ms-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Market State — enriched regime card + input groups */
.ms-card--regime { margin-bottom: 12px; }
.ms-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.ms-flag { font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--chip-bg); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; }
.ms-carry { background: var(--page-bg); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; }
.ms-carry .ms-sub { display: block; margin-bottom: 6px; }
.ms-carry-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-primary); padding: 2px 0; }
.ms-carry-row span { color: var(--text-secondary); }
.ms-sector-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ms-sector { font-size: 12px; color: var(--text-primary); background: var(--page-bg); border-radius: 999px; padding: 2px 8px; }
.ms-geo { margin: 0; padding-left: 18px; }
.ms-geo li { font-size: 13px; color: var(--text-primary); line-height: 1.5; margin-bottom: 4px; }
.ms-kw { font-size: 11px; color: var(--text-secondary); font-style: italic; }

/* Per-symbol basket grid */
.ms-sym-list { display: flex; flex-direction: column; gap: 8px; }
.ms-sym-row { background: var(--page-bg); border-radius: var(--radius); padding: 8px 10px; border-left: 3px solid transparent; }
.ms-sym-row--act { border-left-color: var(--status-inactive-text); }
.ms-sym-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ms-sym-tic { font-weight: 700; font-size: 14px; color: var(--text-primary); min-width: 52px; }
.ms-sym-px { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ms-sig { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ms-sig--pos { background: var(--status-active-bg); color: var(--status-active-text); }
.ms-sig--neg { background: var(--status-warn-bg); color: var(--status-warn-text); }
.ms-sig--neu { background: var(--chip-bg); color: var(--text-secondary); }
.ms-sig--act { background: var(--status-inactive-bg); color: var(--status-inactive-text); }
.ms-sym-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.ms-mini { font-size: 12px; color: var(--text-primary); }
.ms-sym-rat { font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.45; }
.ms-sym-drivers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Risk regions (occupancy) panel */
.ms-risk-list { display: flex; flex-direction: column; gap: 8px; }
.ms-risk-row { background: var(--page-bg); border-radius: var(--radius); padding: 8px 10px; border-left: 3px solid var(--status-inactive-text); }
.ms-risk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ms-risk-desc { font-size: 12px; color: var(--text-primary); line-height: 1.45; }

/* Regime history timeline */
.ms-tf { display: inline-flex; gap: 2px; background: var(--chip-bg); border-radius: 6px; padding: 2px; margin-right: 8px; }
.ms-tf-btn { font-size: 11px; padding: 2px 8px; border: none; background: none; color: var(--text-secondary); border-radius: 4px; cursor: pointer; }
.ms-tf-btn.active { background: var(--card-bg); color: var(--text-primary); font-weight: 600; }
.ms-legend { font-size: 12px; color: var(--text-primary); margin-bottom: 6px; min-height: 16px; }
.ms-tl-empty { font-size: 12px; color: var(--text-secondary); padding: 24px; text-align: center; }

/* Focus "next move" proxies */
.ms-focus-list { display: flex; flex-direction: column; gap: 6px; }
.ms-focus-row { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; background: var(--page-bg); border-radius: var(--radius); }
.ms-focus-main { display: grid; grid-template-columns: minmax(140px, 1.4fr) 1fr auto; align-items: center; gap: 10px; }
.ms-focus-tic { font-size: 13px; color: var(--text-primary); }
.ms-focus-px { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ms-focus-move { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.ms-focus-next { font-size: 12px; padding-left: 2px; border-top: 1px dashed var(--border); padding-top: 4px; }
.ms-ext { font-weight: 600; }
.ms-sess { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-right: 6px; }
.ms-sess--reg { background: var(--status-active-bg); color: var(--status-active-text); }
.ms-sess--ext { background: var(--status-inactive-bg); color: var(--status-inactive-text); }
.ms-sess--closed { background: var(--chip-bg); color: var(--text-secondary); }

/* Collapsible cards */
.ms-collapse { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 2px; line-height: 0; border-radius: 4px; margin-left: 6px; transition: transform var(--transition); }
.ms-collapse:hover { color: var(--text-primary); }
.ms-collapse .material-symbols-outlined { font-size: 20px; }
.ms-card.collapsed .ms-collapse { transform: rotate(-90deg); }
.ms-card.collapsed > :not(.ms-card-head) { display: none; }

/* History snapshot banner */
.ms-toolbar--hist { background: var(--status-inactive-bg); border: 1px solid var(--status-inactive-text); border-radius: var(--radius); padding: 8px 12px; }
.ms-hist-badge { font-size: 11px; font-weight: 700; color: var(--status-inactive-text); background: var(--card-bg); border-radius: 999px; padding: 2px 8px; margin-right: 6px; }

/* Recent snapshots list (clickable history) */
.ms-snap-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.ms-snap-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 8px; background: var(--page-bg); border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; font-family: var(--font); font-size: 12px; color: var(--text-primary); }
.ms-snap-row:hover { border-color: var(--primary); }
.ms-snap-when { min-width: 110px; color: var(--text-secondary); }
.ms-snap-badge { font-size: 11px; padding: 2px 8px; }
.ms-card-head { cursor: pointer; }
.ms-card-head .ms-info, .ms-card-head .ms-tf { cursor: default; }