/* Dima minimal product interface */
:root {
  --bg-primary: #E2E4DE;
  --bg-secondary: #F7F7F2;
  --bg-tertiary: #ECEFE8;
  --accent-primary: #3F6656;
  --accent-secondary: #628474;
  --accent-tertiary: #8C6F4E;
  --text-primary: #202622;
  --text-secondary: #56615A;
  --text-muted: #7A847D;
  --border-color: #C9CEC5;
  --success-color: #3F6656;
  --warning-color: #B98B2D;
  --error-color: #A15A4A;
  --openser-content-max: none;
  --openser-content-pad: 0.875rem;
  --openser-readable-max: 58rem;
  --openser-research-card-max: none;

  /* RGB variants for use with rgba() */
  --bg-primary-rgb: 226, 228, 222;
  --bg-secondary-rgb: 247, 247, 242;
  --bg-tertiary-rgb: 236, 239, 232;
  --accent-primary-rgb: 63, 102, 86;
  --accent-secondary-rgb: 98, 132, 116;
  --accent-tertiary-rgb: 140, 111, 78;
  --text-primary-rgb: 32, 38, 34;
  --text-secondary-rgb: 86, 97, 90;
  --text-muted-rgb: 122, 132, 125;
  --border-color-rgb: 201, 206, 197;
  --success-color-rgb: 63, 102, 86;
  --warning-color-rgb: 185, 139, 45;
  --error-color-rgb: 161, 90, 74;
  --shadow-color-rgb: 38, 45, 39;
  --highlight-color-rgb: 255, 255, 255;
  --primary-color-rgb: var(--accent-primary-rgb);

  /* Shadows and effects */
  --card-shadow: 0 18px 44px rgba(var(--shadow-color-rgb), 0.08);
  --glow-effect: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.12);
  --gradient-bg: linear-gradient(135deg, #F7F7F2 0%, #ECEFE8 100%);

  /* Enhanced shadow scale for visual depth */
  --card-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --card-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --card-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */

  /* Typography scale */
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 2rem;     /* 32px */

  /* Overlay colors for modals/sheets */
  --overlay-color: rgba(var(--shadow-color-rgb), 0.5);
  --backdrop-blur: blur(10px);

  /* Aliases for commonly used variables */
  --primary-color: var(--accent-primary);
  --card-bg: var(--bg-secondary);
  /* Aliased to --text-muted for backward compat; theme authors can override */
  --btn-secondary-bg: var(--text-muted);
  --text-on-accent: #ffffff;

  /* Sidebar widths (Mist Graphite "island" shell).
     The sidebar itself is transparent so the dusty page background
     shows through. The active item is the only "island" inside the
     rail. The 64px collapsed rail keeps the desktop shell usable
     while exposing more of the main surface island. */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --shell-inset: 10px;
  --shell-radius: 22px;
  --topbar-h: 62px;
  --topbar-gap: 10px;
  --workspace-inline-offset: calc(var(--sidebar-w) + (var(--openser-content-pad, 0.875rem) * 2) + 4px);
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-color)) color-mix(in srgb, var(--bg-primary) 70%, transparent);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
}

*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent-primary) 38%, var(--border-color));
  border: 2px solid color-mix(in srgb, var(--bg-primary) 72%, transparent);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent-primary) 56%, var(--border-color));
}


body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 14%, rgba(var(--accent-primary-rgb), 0.14), transparent 26rem),
    radial-gradient(circle at 86% 12%, rgba(var(--accent-tertiary-rgb), 0.10), transparent 22rem),
    linear-gradient(180deg, rgba(var(--highlight-color-rgb), 0.42), transparent 34rem);
}

a {
  color: var(--accent-tertiary);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--accent-secondary);
}

/* Skip to content link - accessibility feature for keyboard users */
.ldr-skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 12px 24px;
  background-color: var(--accent-primary);
  color: var(--text-primary);
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s ease-in-out;
}

.ldr-skip-link:focus {
  top: 0;
  outline: 2px solid var(--accent-secondary);
  outline-offset: 2px;
}

/* Badge Styles */
.ldr-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ldr-badge-success {
  background: var(--success-color);
  color: white;
}

.ldr-badge-warning {
  background: var(--warning-color);
  color: #1a1a00;
}

.ldr-badge-danger {
  background: var(--error-color);
  color: white;
}

.ldr-badge-info {
  background: var(--accent-tertiary);
  color: white;
}

.ldr-badge-secondary {
  background: var(--text-muted);
  color: white;
}

/* Screen reader only - visually hidden but accessible */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Layout */
.ldr-app-container {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.ldr-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  max-width: var(--sidebar-w);
  flex-shrink: 0;
  flex-grow: 0;
  /* Transparent rail — the dusty page background shows through.
     The active item is the only "island" inside the rail. */
  background-color: transparent;
  border-right: none;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 10;
  padding: var(--shell-inset) calc(var(--shell-inset) / 2);
  box-sizing: border-box;
  transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease;
}

.ldr-sidebar-header {
  padding: 0.5rem 0.75rem;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 40px;
}

.ldr-sidebar-header h2 {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 1.125rem;
  gap: 0.5rem;
  color: var(--accent-secondary);
  white-space: nowrap;
  overflow: hidden;
}

.ldr-sidebar-header h2 i {
  color: var(--accent-primary);
}

/* Sidebar collapse/expand toggle. Lives inside the rail header. */
.ldr-sidebar-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--space-2);
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ldr-sidebar-toggle:hover,
.ldr-sidebar-toggle:focus-visible {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.ldr-sidebar-toggle .ldr-sidebar-toggle__expand {
  display: none;
}

/* In the collapsed state, swap the icon direction. */
body.ldr-sidebar-collapsed .ldr-sidebar-toggle .ldr-sidebar-toggle__collapse {
  display: none;
}

body.ldr-sidebar-collapsed .ldr-sidebar-toggle .ldr-sidebar-toggle__expand {
  display: inline;
}

body.ldr-sidebar-collapsed .ldr-sidebar-header {
  justify-content: center;
}

.ldr-sidebar-nav {
  flex: 1;
  padding: 0.5rem 0;
  overflow-y: auto;
  /* Smooth scrolling */
  scroll-behavior: smooth;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.ldr-sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.ldr-sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.ldr-sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

.ldr-sidebar-nav ul {
  list-style: none;
  position: relative;
}

.ldr-sidebar-nav li {
  margin-bottom: 0;
  cursor: pointer;
  color: var(--text-secondary);
  border-left: 3px solid transparent;
  transition: all 0.2s;
  position: relative;
  min-height: 28px; /* Compact */
}

.ldr-sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  min-height: 28px;
  line-height: 24px;
  color: inherit;
  text-decoration: none;
  width: 100%;
  border-radius: 0;
}

.ldr-sidebar-nav li a .ldr-nav-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ldr-sidebar-nav li i {
  width: 20px;
  color: inherit;
  flex-shrink: 0;
}

.ldr-sidebar-nav li:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.ldr-sidebar-nav li:has(a:focus) {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.ldr-sidebar-nav li a:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
}

.ldr-sidebar-nav li a:focus .ldr-nav-shortcut {
  background-color: var(--accent-primary);
  color: var(--text-primary);
}

.ldr-sidebar-nav li.active {
  color: var(--accent-primary);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md, 12px);
  margin: 2px 0;
  /* Preserve the historical `.active` border-left API contract for
     external CSS without contributing any visible pixels, since
     border-left-width is 0 here. The design relies on the surface
     pill, not on a left accent strip. */
  border-left-color: transparent;
}

.ldr-sidebar-nav li.active a {
  border-radius: var(--radius-md, 12px);
  margin: 0;
}

.ldr-sidebar-nav li.active i,
.ldr-sidebar-nav li.active a {
  color: inherit;
}

/* Navigation shortcuts */
.ldr-nav-shortcut {
  margin-left: auto;
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 1.5rem;
  text-align: center;
  transition: all 0.2s;
}

.ldr-sidebar-nav li:hover .ldr-nav-shortcut {
  background-color: var(--accent-primary);
  color: var(--text-primary);
}

.ldr-sidebar-nav li.active .ldr-nav-shortcut {
  background-color: var(--accent-primary);
  color: var(--text-primary);
}

/* Sidebar brand (logo + name) and toggle row. ChatGPT-style: name + icon on
   the left, single icon-only toggle on the right, separated from nav by a
   thin hairline. */
.ldr-sidebar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  min-width: 0;
  flex: 1;
}

.ldr-sidebar-brand:hover,
.ldr-sidebar-brand:focus-visible {
  color: var(--accent-primary);
  outline: none;
}

.ldr-sidebar-brand__icon {
  color: var(--accent-primary);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.ldr-sidebar-brand__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quick actions block — no section header, sits directly below the brand
   row, separated from the categorised sections by a hairline divider. */
.ldr-sidebar-actions {
  list-style: none;
  margin: 0.25rem 0 0 0;
  padding: 0;
}

.ldr-sidebar-actions li a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.55rem 0.625rem;
  min-height: 32px;
  line-height: 1.2;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 400;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.ldr-sidebar-actions li a i {
  width: 18px;
  text-align: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  font-size: 0.9rem;
  transition: color 0.12s ease;
}

.ldr-sidebar-actions li:hover a,
.ldr-sidebar-actions li:has(a:focus) a {
  background-color: rgba(var(--bg-tertiary-rgb), 0.7);
}

.ldr-sidebar-actions li:hover a i,
.ldr-sidebar-actions li:has(a:focus) a i {
  color: var(--text-primary);
}

.ldr-sidebar-actions li.active a {
  background-color: var(--bg-secondary);
  color: var(--accent-primary);
  font-weight: 500;
}

.ldr-sidebar-actions li.active a i {
  color: var(--accent-primary);
}

/* Hairline divider between the action group and the categorised sections. */
.ldr-sidebar-divider {
  height: 1px;
  background-color: rgba(var(--border-color-rgb), 0.5);
  margin: 0.625rem 0.5rem 0.25rem 0.5rem;
}

/* User block pinned to the bottom of the rail. Mirrors the ChatGPT
   bottom-left user pill + chevron: avatar | name+plan | settings. */
.ldr-sidebar-userblock {
  position: relative;
  margin-top: auto;
  padding: 0.5rem 0.5rem 0.625rem 0.5rem;
  border-top: 1px solid rgba(var(--border-color-rgb), 0.5);
  background-color: transparent;
  box-sizing: border-box;
}

.ldr-sidebar-userblock__main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.375rem;
  border-radius: 10px;
  cursor: default;
  transition: background-color 0.12s ease;
}

.ldr-sidebar-userblock__main:hover,
.ldr-sidebar-userblock.is-menu-open .ldr-sidebar-userblock__main {
  background-color: rgba(var(--bg-tertiary-rgb), 0.7);
}

.ldr-sidebar-userblock__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  color: var(--text-on-accent, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.78rem;
  flex-shrink: 0;
  user-select: none;
}

.ldr-sidebar-userblock__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.15;
}

.ldr-sidebar-userblock__name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ldr-sidebar-userblock__plan {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ldr-sidebar-userblock__settings {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.ldr-sidebar-userblock__settings:hover,
.ldr-sidebar-userblock__settings:focus-visible {
  background-color: rgba(var(--bg-tertiary-rgb), 0.9);
  color: var(--text-primary);
  outline: none;
}

.ldr-sidebar-userblock__settings i {
  font-size: 0.95rem;
}

/* Dropdown menu. Positioned above the pill so it grows into the rail. */
.ldr-sidebar-userblock__menu {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: calc(100% + 0.25rem);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 50;
  max-height: 70vh;
  overflow-y: auto;
}

.ldr-sidebar-userblock__menu[hidden] {
  display: none !important;
}

.ldr-sidebar-userblock__menuitem {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.ldr-sidebar-userblock__menuitem:hover,
.ldr-sidebar-userblock__menuitem:focus-visible {
  background-color: rgba(var(--bg-tertiary-rgb), 0.85);
  color: var(--text-primary);
  outline: none;
}

.ldr-sidebar-userblock__menuitem i {
  width: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.ldr-sidebar-userblock__menuitem:hover i {
  color: var(--accent-primary);
}

.ldr-sidebar-userblock__menuversion {
  margin: 0.25rem 0.625rem 0.125rem 0.625rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(var(--border-color-rgb), 0.5);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.ldr-sidebar-userblock__logout {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(var(--border-color-rgb), 0.5);
  border-radius: 0;
}

.ldr-sidebar-userblock__logoutbtn {
  appearance: none;
  background: transparent;
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.ldr-sidebar-userblock__logoutbtn i {
  width: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.ldr-sidebar-userblock__logoutbtn:hover {
  background-color: rgba(var(--bg-tertiary-rgb), 0.85);
  color: var(--accent-primary);
}

.ldr-sidebar-userblock__logoutbtn:hover i {
  color: var(--accent-primary);
}

/* Hide user block in collapsed state — there is no room for name + avatar
   + chevron at 64px. The user gets the toggle button only. */
body.ldr-sidebar-collapsed .ldr-sidebar-userblock {
  display: none;
}

.ldr-nav-hint {
  font-size: 0.75rem;
  opacity: 0.7;
  margin: 0;
}

.ldr-nav-hint kbd {
  background-color: var(--bg-tertiary);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  /* 0.7rem (~11.2px) → --text-xs (12px). Readability floor enforced by
     test_responsive_ui_comprehensive.js. */
  font-size: var(--text-xs);
  border: 1px solid var(--border-color);
}

/* Sidebar Sections */
.ldr-sidebar-section {
  margin-bottom: 0.5rem;
}

.ldr-sidebar-section-label {
  padding: 0.25rem 1rem 0.125rem 1rem;
  /* 0.65rem (~10.4px) → --text-xs (12px). Sidebar dividers stay
     visually compact at 12px uppercase + letter-spacing. */
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.ldr-sidebar-section ul {
  margin-top: 0.125rem;
}

/* Nested sidebar items */
.ldr-sidebar-item--nested a {
  padding-left: 2.75rem;
}

/* Navigation text wrapper */
.ldr-nav-text {
  flex: 1;
}

/* Main Content */
.ldr-main-content {
  padding: calc(var(--shell-inset) + var(--topbar-h) + var(--topbar-gap)) var(--openser-content-pad, 2rem) var(--openser-content-pad, 2rem);
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  transition: margin-left 0.2s ease;
}

/* Top Bar with User Info and Logout */
.ldr-top-bar {
  position: fixed;
  top: var(--shell-inset);
  left: var(--workspace-inline-offset);
  right: calc(var(--openser-content-pad, 0.875rem) * 2 + 4px);
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  width: auto;
  max-width: none;
  margin: 0;
  background: color-mix(in srgb, var(--bg-secondary) 92%, white 8%);
  border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
  border-radius: var(--radius-xl, 22px);
  box-shadow: 0 12px 34px rgba(31, 42, 36, 0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4, 1rem);
  padding: 0.65rem 0.85rem;
  z-index: 9;
  transition: left 0.2s ease, right 0.2s ease;
}

.ldr-top-bar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ldr-top-bar-right {
  display: flex;
  align-items: center;
}

/* Theme Selector Dropdown */
.ldr-theme-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
  transition: all 0.2s ease;
}

.ldr-theme-selector:hover {
  border-color: var(--accent-primary);
}

.ldr-theme-selector:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.2);
}

.ldr-theme-icon {
  color: var(--accent-primary);
  font-size: 0.9rem;
}

.ldr-theme-dropdown {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem 0.25rem 0;
  cursor: pointer;
  min-width: 120px;
  max-width: 160px;
}

.ldr-theme-dropdown:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ldr-theme-dropdown option,
.ldr-theme-dropdown optgroup {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.ldr-theme-dropdown optgroup {
  font-weight: 600;
  color: var(--text-muted);
}

/* Legacy theme toggle button (kept for compatibility) */
.ldr-theme-toggle {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.ldr-theme-toggle:hover {
  background: var(--bg-tertiary);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.ldr-theme-toggle:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.ldr-theme-toggle i {
  font-size: 1rem;
}

.ldr-user-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ldr-user-info {
  color: var(--text-secondary);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ldr-logout-form {
  display: inline;
}

.ldr-logout-btn {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.ldr-logout-btn:hover {
  background-color: var(--error-color);
  color: white;
  border-color: var(--error-color);
  text-decoration: none;
}

/* Add padding to bottom of main content when log panel is visible */
.ldr-page#research-progress.active ~ .ldr-main-content,
.ldr-page#research-results.active ~ .ldr-main-content {
  padding-bottom: 42vh; /* Log panel max height + some extra */
}

.ldr-page {
  display: none;
}

.ldr-page.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ldr-page-header {
  margin-bottom: var(--space-5, 1.5rem);
}

.ldr-page-header h1 {
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--text-primary);
}

/* Typography Hierarchy */
.ldr-page-title {
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-4, 1rem);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.ldr-section-title {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-3, 0.75rem);
  line-height: 1.4;
}

.ldr-subsection-title {
  font-size: var(--text-base, 1rem);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-2, 0.5rem);
  line-height: 1.4;
}

.ldr-label-text {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ldr-helper-text {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-muted);
  line-height: 1.5;
}

/* Cards */
.ldr-card {
  background-color: var(--bg-secondary);
  border-radius: 12px;
  box-shadow: var(--card-shadow-sm, var(--card-shadow));
  margin-bottom: var(--space-5, 1.5rem);
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ldr-card:hover {
  box-shadow: var(--card-shadow-md, var(--card-shadow));
}

/* Elevated cards for important sections */
.ldr-card--elevated {
  box-shadow: var(--card-shadow-md, var(--card-shadow));
}

.ldr-card--elevated:hover {
  box-shadow: var(--card-shadow-lg);
  transform: translateY(-1px);
}

/* Interactive cards that link somewhere */
.ldr-card--interactive {
  cursor: pointer;
}

.ldr-card--interactive:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--card-shadow-md), 0 0 0 1px var(--accent-primary);
}

.ldr-card-content {
  padding: var(--space-5, 1.5rem);
}

/* Form Elements */
.ldr-form-group {
  margin-bottom: 1.5rem;
}

.ldr-form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-secondary);
}

textarea, input[type="text"] {
  width: 100%;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}

textarea:focus, input[type="text"]:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.2);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.btn-primary {
  background-color: var(--accent-primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--accent-secondary);
  box-shadow: var(--glow-effect);
  color: white;
}

.ldr-btn-outline {
  background-color: transparent;
  color: var(--accent-tertiary);
  border: 1px solid var(--accent-tertiary);
}

.ldr-btn-outline:hover {
  background-color: rgba(var(--accent-tertiary-rgb), 0.1);
}

.ldr-delete-btn {
  color: var(--error-color);
  border-color: var(--error-color);
}

.ldr-delete-btn:hover {
  background-color: rgba(var(--error-color-rgb), 0.1);
}

.ldr-terminate-btn {
  color: var(--error-color);
  border-color: var(--error-color);
}

.ldr-terminate-btn:hover {
  background-color: rgba(var(--error-color-rgb), 0.1);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

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

/* Metrics Navigation Links (colored button grid) */
.ldr-metrics-nav-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  align-items: center;
}

.ldr-nav-link-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  color: white;
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border-radius: 8px;
  text-decoration: none;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow: var(--card-shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
}

.ldr-nav-link-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-md, 0 4px 12px rgba(0,0,0,0.15));
  color: white;
  text-decoration: none;
}

.ldr-nav-link-btn:active {
  transform: translateY(0);
}

.ldr-nav-link-btn.ldr-nav-accent {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
}

.ldr-nav-link-btn.ldr-nav-success {
  background: var(--success-color);
}

.ldr-nav-link-btn.ldr-nav-warning {
  background: linear-gradient(135deg, var(--warning-color) 0%, var(--error-color) 100%);
}

.ldr-nav-link-btn.ldr-nav-info {
  background: linear-gradient(135deg, var(--accent-tertiary) 0%, var(--accent-primary) 100%);
}

/* Mode Selection */
.ldr-mode-selection {
  display: flex;
  gap: 1rem;
}

.ldr-mode-option {
  flex: 1;
  background-color: var(--bg-tertiary);
  border-radius: 8px;
  padding: 1.25rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ldr-mode-option:hover {
  background-color: var(--bg-primary);
}

.ldr-mode-option.active {
  border-color: var(--accent-primary);
  background-color: rgba(var(--accent-primary-rgb), 0.1);
}

.ldr-mode-icon {
  width: 40px;
  height: 40px;
  background-color: var(--accent-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.ldr-mode-option.active .ldr-mode-icon {
  background-color: var(--accent-secondary);
  box-shadow: var(--glow-effect);
}

.ldr-mode-info h3 {
  margin-bottom: 0.25rem;
  color: var(--text-primary);
}

.ldr-mode-info p {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.ldr-mode-badge {
  /* 0.65rem → --text-xs. Mode badge stays compact at 12px uppercase. */
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  background-color: var(--warning-color);
  color: #1a1a00;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Progress Page */
.ldr-progress-info {
  padding: 1rem 0;
}

.ldr-current-query-container {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.ldr-current-query-label {
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 0.5rem;
  min-width: 120px;
}

.ldr-current-query {
  flex: 1;
  color: var(--text-primary);
  padding: 0.5rem;
  background-color: var(--bg-tertiary);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.ldr-progress-container {
  margin: 1.5rem 0;
  position: relative;
}

.ldr-progress-bar {
  width: 100%;
  height: 10px;
  background-color: var(--bg-tertiary);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.ldr-progress-fill {
  height: 100%;
  background-color: var(--accent-primary);
  border-radius: 5px;
  transition: width 0.5s ease;
}

.ldr-progress-percentage {
  position: absolute;
  right: 0;
  top: -1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.ldr-status-container, .ldr-task-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.ldr-status-label, .ldr-task-label {
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 0.5rem;
  min-width: 120px;
}

.ldr-status-indicator {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
}

.ldr-status-indicator.ldr-status-completed {
  background-color: rgba(var(--success-color-rgb), 0.2);
  color: var(--success-color);
}

.ldr-status-indicator.ldr-status-failed,
.ldr-status-indicator.ldr-status-error {
  background-color: rgba(var(--error-color-rgb), 0.2);
  color: var(--error-color);
}

.ldr-status-indicator.ldr-status-in_progress {
  background-color: rgba(var(--accent-tertiary-rgb), 0.2);
  color: var(--accent-tertiary);
}

.ldr-task-text {
  flex: 1;
  color: var(--text-primary);
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Agent Thinking Panel - Shows ReAct reasoning for MCP strategy */
.ldr-agent-thinking-panel {
  margin-top: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  overflow: hidden;
}

.ldr-agent-thinking-header {
  padding: 0.75rem 1rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ldr-agent-thinking-content {
  padding: 1rem;
  max-height: 400px;
  overflow-y: auto;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

.ldr-agent-step {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-radius: 6px;
  background: var(--bg-primary);
  border-left: 3px solid var(--border-color);
}

.ldr-agent-step.ldr-thought {
  border-left-color: var(--accent-primary);
}

.ldr-agent-step.ldr-action {
  border-left-color: var(--warning-color);
}

.ldr-agent-step.ldr-result {
  border-left-color: var(--success-color);
}

.ldr-agent-step.ldr-error {
  border-left-color: var(--error-color);
}

.ldr-agent-step-label {
  font-weight: 700;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.ldr-agent-step.ldr-thought .ldr-agent-step-label {
  color: var(--accent-primary);
}

.ldr-agent-step.ldr-action .ldr-agent-step-label {
  color: var(--warning-color);
}

.ldr-agent-step.ldr-result .ldr-agent-step-label {
  color: var(--success-color);
}

.ldr-agent-step.ldr-error .ldr-agent-step-label {
  color: var(--error-color);
}

.ldr-agent-step-content {
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.ldr-progress-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
}

/* Notification settings and audio test button */
.ldr-notification-settings {
  margin: 15px 0;
  display: flex;
  justify-content: flex-end;
}

.ldr-audio-test {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ldr-audio-test .ldr-tooltip-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: 10px;
}

#test-audio-btn {
  padding: 5px 10px;
  font-size: 0.9rem;
}

/* Sound test dialog styling */
.ldr-sound-test-dialog {
  font-size: 0.9rem;
}

.ldr-sound-test-content {
  display: flex;
  flex-direction: column;
}

.ldr-sound-test-content h3 {
  margin-top: 0;
  margin-bottom: 15px;
}

.ldr-sound-test-content ul {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.ldr-sound-test-content li {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}

.ldr-sound-test-content .ldr-test-tip {
  background-color: rgba(var(--accent-tertiary-rgb), 0.1);
  border-radius: 6px;
  padding: 10px;
  margin: 10px 0;
  font-size: 0.85rem;
}

.ldr-sound-test-content button {
  margin-top: 10px;
  margin-right: 8px;
}

/* History List */
.ldr-history-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ldr-history-item {
  background-color: var(--bg-tertiary);
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid var(--border-color);
  transition: all 0.2s;
  cursor: pointer;
  position: relative;
}

.ldr-history-item:hover {
  border-color: var(--accent-tertiary);
  box-shadow: 0 2px 8px rgba(var(--shadow-color-rgb), 0.15);
}

.ldr-history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.ldr-history-item-title {
  font-weight: 500;
  color: var(--text-primary);
}

.ldr-history-item-status {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}

.ldr-status-completed {
  background-color: rgba(var(--success-color-rgb), 0.15);
  color: var(--success-color);
}

.ldr-status-in-progress {
  background-color: rgba(var(--accent-tertiary-rgb), 0.15);
  color: var(--accent-tertiary);
  animation: pulse 2s infinite;
}

.ldr-status-failed {
  background-color: rgba(var(--error-color-rgb), 0.15);
  color: var(--error-color);
}

.ldr-status-suspended {
  background-color: rgba(var(--warning-color-rgb), 0.15);
  color: var(--warning-color);
}

.ldr-status-terminating {
  background-color: rgba(var(--error-color-rgb), 0.15);
  color: var(--error-color);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

.ldr-history-item-meta {
  display: flex;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.ldr-history-item-date {
  margin-right: 1rem;
}

.ldr-history-item-mode {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.ldr-history-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  position: relative;
  z-index: 5;
}

.ldr-history-item-actions button {
  position: relative;
  z-index: 10;
}

/* Results Page */
.ldr-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ldr-results-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.ldr-metadata-item {
  display: flex;
  flex-direction: column;
}

.ldr-metadata-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  opacity: 1 !important;
}

.ldr-metadata-value {
  color: var(--text-primary);
  font-weight: 500;
}

.ldr-results-content {
  line-height: 1.7;
}

.ldr-results-content h1 {
  font-size: 1.75rem;
  margin: 1.5rem 0 1rem;
  color: var(--text-primary);
}

.ldr-results-content h2 {
  font-size: 1.5rem;
  margin: 1.25rem 0 0.75rem;
  color: var(--accent-tertiary);
}

.ldr-results-content h3 {
  font-size: 1.25rem;
  margin: 1rem 0 0.5rem;
  color: var(--accent-secondary);
}

.ldr-results-content p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

.ldr-results-content ul,
.ldr-results-content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  color: var(--text-secondary);
}

.ldr-results-content li {
  margin-bottom: 0.5rem;
}

.ldr-results-content code {
  background-color: var(--bg-tertiary);
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
}

.ldr-results-content pre {
  background-color: var(--bg-tertiary);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  overflow-x: auto;
}

.ldr-results-content blockquote {
  border-left: 3px solid var(--accent-primary);
  padding-left: 1rem;
  margin-left: 0;
  margin-bottom: 1rem;
  color: var(--text-muted);
}

.ldr-markdown-content .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 1em 0;
}

.ldr-markdown-content .katex-error {
  color: var(--error-color, #fa5c7c);
}

.ldr-results-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.ldr-results-content th {
  background-color: var(--bg-tertiary);
  text-align: left;
  padding: 0.75rem;
  border-bottom: 2px solid var(--border-color);
  color: var(--accent-tertiary);
}

.ldr-results-content td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
}

/* Research Details Page */
.ldr-research-metadata {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.ldr-detail-progress-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ldr-detail-progress-bar {
  flex: 1;
  height: 8px;
  background-color: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.ldr-detail-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 4px;
  transition: width 0.5s ease;
}

.ldr-research-log-container {
  margin-top: 1.5rem;
}

.ldr-research-log-container h3 {
  margin-bottom: 1rem;
  color: var(--text-secondary);
  font-size: 1.1rem;
  font-weight: 500;
}

.ldr-research-log {
  max-height: 500px;
  overflow-y: auto;
  padding: 1rem;
  background-color: var(--bg-tertiary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.ldr-log-entry {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: 1rem;
}

.ldr-log-entry:last-child {
  border-bottom: none;
}

.ldr-log-entry-time {
  font-size: 0.8rem;
  color: var(--text-muted);
  min-width: 80px;
}

.ldr-log-entry-content {
  flex: 1;
}

.ldr-log-entry-message {
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.ldr-log-entry-progress {
  font-size: 0.85rem;
  color: var(--accent-secondary);
  font-weight: 500;
}

.ldr-detail-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.ldr-phase-highlight {
  color: var(--accent-tertiary);
  font-weight: 500;
}

.ldr-phase-init {
  color: var(--accent-tertiary);
}

.ldr-phase-search {
  color: var(--accent-secondary);
}

.ldr-phase-analysis {
  color: var(--warning-color);
}

.ldr-phase-complete {
  color: var(--success-color);
}

.ldr-phase-error {
  color: var(--error-color);
}

.ldr-phase-termination {
  color: var(--error-color);
  font-weight: bold;
}

.ldr-empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

.ldr-error-message {
  padding: 1rem;
  background-color: rgba(var(--error-color-rgb), 0.1);
  border: 1px solid var(--error-color);
  border-radius: 8px;
  color: var(--error-color);
  margin: 1rem 0;
  font-size: 0.9rem;
}

/* Loading Spinner */
.ldr-loading-spinner {
  padding: 2rem 0;
}

.ldr-loading-spinner.ldr-centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ldr-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(var(--accent-primary-rgb), 0.2);
  border-left-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Mobile Tab Bar */
.ldr-mobile-tab-bar {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(var(--shadow-color-rgb), 0.2);
}

.ldr-mobile-tab-bar ul {
  display: flex;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.ldr-mobile-tab-bar li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s;
  padding: 0.5rem 0;
  min-width: 90px;
}

.ldr-mobile-tab-bar li i {
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.ldr-mobile-tab-bar li span {
  font-size: 0.75rem;
  text-align: center;
  width: 100%;
}

.ldr-mobile-tab-bar li.active {
  color: var(--accent-primary);
}

.ldr-mobile-tab-bar li:hover {
  color: var(--text-primary);
}

/* External link styling for sidebar and mobile navigation - more subtle */
.ldr-sidebar-nav ul li.ldr-external-link {
    color: var(--text-primary);
    border-left: 3px solid var(--text-muted);
    margin-bottom: 10px;
    padding-left: 17px;
    opacity: 0.75;
}

.ldr-sidebar-nav ul li.ldr-external-link:hover {
    background-color: rgba(var(--text-muted-rgb), 0.1);
    opacity: 1;
    cursor: pointer;
}

.ldr-mobile-tab-bar ul li.ldr-external-link {
    color: var(--text-primary);
    opacity: 0.75;
}

.ldr-mobile-tab-bar ul li.ldr-external-link i {
    color: var(--text-primary);
}

.ldr-mobile-tab-bar ul li.ldr-external-link:hover {
    opacity: 1;
}

/* Adaptive sidebar - compact when viewport height is limited */
@media (max-height: 800px) {
  .ldr-sidebar-header {
    padding: 0.5rem 1rem;
  }
  .ldr-sidebar-nav {
    padding: 0.25rem 0;
  }
  .ldr-sidebar-nav li {
    min-height: 26px;
  }
  .ldr-sidebar-nav li a {
    padding: 0.15rem 1rem;
    min-height: 24px;
    line-height: 24px;
  }
  .ldr-sidebar-section {
    margin-bottom: 0.35rem;
  }
  .ldr-sidebar-section-label {
    padding: 0.2rem 1rem 0.1rem 1rem;
    /* Was 0.6rem on short screens; bump to 12px floor. The padding is
       what saves vertical space, not the font-size. */
    font-size: var(--text-xs);
  }
}

@media (max-height: 700px) {
  .ldr-sidebar-header {
    padding: 0.35rem 0.75rem;
  }
  .ldr-sidebar-header h2 {
    font-size: 1rem;
  }
  .ldr-sidebar-nav li {
    min-height: 24px;
  }
  .ldr-sidebar-nav li a {
    padding: 0.1rem 0.75rem;
    min-height: 24px;
    line-height: 24px;
    font-size: 0.85rem;
  }
  .ldr-sidebar-section {
    margin-bottom: 0.25rem;
  }
  .ldr-sidebar-section-label {
    padding: 0.15rem 0.75rem 0.1rem 0.75rem;
    /* Was 0.55rem on very short screens; bump to 12px floor. */
    font-size: var(--text-xs);
  }
  .ldr-sidebar-footer {
    padding: 0.5rem 0.75rem;
  }
}

/* Responsive */
@media (max-width: 991px) {
  .ldr-sidebar {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    overflow: hidden;
  }

  /* Adjust top bar position for narrow sidebar */
  .ldr-top-bar {
    left: calc(60px + (var(--openser-content-pad, 0.875rem) * 2) + 4px);
  }

  /* Hide all text in the logo and center icon */
  .ldr-sidebar-header {
    padding: 1rem 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
  }

  .ldr-sidebar-header h2 {
    font-size: 0;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .ldr-sidebar-header h2 i {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hide all text in nav items and center icons */
  .ldr-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
  }

  .ldr-sidebar-nav ul {
    width: 100%;
  }

  .ldr-sidebar-nav li {
    text-indent: -9999px;
    white-space: nowrap;
    text-align: center;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ldr-sidebar-nav li a {
    padding: 1rem 0;
  }

  .ldr-sidebar-nav li i {
    text-indent: 0;
    margin: 0;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hide navigation shortcuts on small screens */
  .ldr-nav-shortcut {
    display: none;
  }

  /* Hide section labels in icon-only mode */
  .ldr-sidebar-section-label {
    display: none;
  }

  /* Reduce section spacing in icon-only mode */
  .ldr-sidebar-section {
    margin-bottom: 0.5rem;
  }

  /* Hide nav text in icon-only mode */
  .ldr-nav-text {
    display: none;
  }

  /* Active state fix for icon view */
  .ldr-sidebar-nav li.active {
    border-left-width: 3px;
  }

  /* Hide footer */
  .ldr-sidebar-footer {
    display: none;
  }

  /* Adjust main content */
  .ldr-main-content {
    margin-left: 60px;
    width: calc(100% - 60px);
  }

  .ldr-mode-selection {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  body {
    padding-bottom: var(--mobile-nav-clearance-standard); /* Standardized nav clearance */
  }

  /* Override flex container to not show sidebar */
  .ldr-app-container {
    display: block !important;
  }

  /* Hide desktop sidebar completely on mobile */
  aside.ldr-sidebar,
  .ldr-sidebar:not(.active) {
    display: none !important;
    visibility: hidden !important;
  }

  .ldr-main-content {
    margin-left: 0;
    width: 100%;
    padding: 5rem 1rem var(--mobile-nav-clearance-standard) 1rem;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Adjust top bar for mobile */
  .ldr-top-bar {
    left: 0;
    right: 0;
    max-width: 100vw;
    padding: 0 1rem;
    height: 50px;
    box-sizing: border-box;
  }

  .ldr-user-info {
    font-size: 0.85rem;
  }

  .ldr-logout-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }

  /* Adjust padding for mobile when log panel is visible */
  .ldr-page#research-progress.active ~ .ldr-main-content,
  .ldr-page#research-results.active ~ .ldr-main-content {
    padding-bottom: calc(42vh + var(--mobile-nav-clearance-standard)); /* Log panel + nav clearance */
  }

  /* Sidebar toggle for mobile menu (hamburger menu) - only show when explicitly activated */
  .ldr-sidebar.active {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
    z-index: 1100;
    background-color: var(--bg-secondary);
    box-shadow: 2px 0 10px rgba(var(--shadow-color-rgb), 0.3);
  }

  /* Overlay/backdrop for mobile sidebar */
  .ldr-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--shadow-color-rgb), 0.5);
    z-index: 1050;
    transition: opacity 0.3s ease-in-out;
  }

  .ldr-sidebar-overlay.active {
    display: block;
  }

  /* Restore text in logo when sidebar is active on mobile */
  .ldr-sidebar.active .ldr-sidebar-header h2 {
    font-size: 1.25rem;
  }

  /* Show section labels when sidebar is active on mobile */
  .ldr-sidebar.active .ldr-sidebar-section-label {
    display: block;
  }

  /* Show nav text when sidebar is active on mobile */
  .ldr-sidebar.active .ldr-nav-text {
    display: block;
  }

  /* Restore text in nav items when sidebar is active on mobile */
  .ldr-sidebar.active .ldr-sidebar-nav li {
    text-indent: 0;
    text-align: left;
  }

  .ldr-sidebar.active .ldr-sidebar-nav li a {
    padding: 0.75rem 1.5rem;
  }

  .ldr-sidebar.active .ldr-sidebar-nav li i {
    display: inline;
    width: 20px;
    margin-right: 0.75rem;
    font-size: 1rem;
  }

  .ldr-sidebar.active .ldr-sidebar-footer {
    display: flex;
  }

  /* Show mobile tab bar */
  .ldr-mobile-tab-bar {
    display: flex !important; /* Use !important to ensure it displays */
  }

  /* Ensure main content doesn't overlap with sidebar */
  .ldr-page {
    position: relative;
    z-index: 1;
  }

  /* Ensure forms and inputs are accessible */
  #research-form,
  #query {
    position: relative;
    z-index: 1;
  }
}

.ldr-progress-status {
  margin-bottom: 1.25rem;
  padding: 0.5rem 0;
  font-weight: 500;
}

.ldr-progress-actions {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/* File path styling from the first version */
.ldr-file-path {
  background-color: var(--bg-secondary);
  padding: 10px;
  border-radius: 4px;
  font-family: monospace;
  margin: 15px 0;
  word-break: break-all;
  border: 1px solid var(--border-color);
}

.ldr-config-example {
  background-color: var(--bg-primary);
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  margin: 15px 0;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.mt-4 {
  margin-top: 20px;
}

/* Try again button styling from the second version */
#try-again-btn {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

#try-again-btn:hover {
  background-color: var(--accent-secondary);
}

#try-again-btn i {
  margin-right: 5px;
}

/* Keep the progress page within the viewport so the log panel can fill the remaining space. */
#research-progress {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px - var(--space-6, 2rem) - var(--space-6, 2rem));
}

#research-progress-header,
#research-progress-card {
    flex: 0 0 auto;
}

#research-progress .ldr-collapsible-log-panel.ldr-expanded {
    flex: 1 1 0;
    min-height: 250px;
    overflow: auto;
}

#research-progress .ldr-collapsible-log-panel.ldr-expanded .ldr-log-panel-content,
#research-progress .ldr-collapsible-log-panel.ldr-expanded .ldr-console-log {
    flex: 1 1 auto;
    min-height: 0;
}

#research-progress .ldr-collapsible-log-panel.ldr-expanded .ldr-console-log {
    height: auto;
}

/* Collapsible Log Panel styles from the third version */
.ldr-collapsible-log-panel {
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-tertiary);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -2px 10px rgba(var(--shadow-color-rgb), 0.2);
    padding: 0;
    margin: 0;
    /* Instead of hiding, make it visible by default */
    display: flex;
}

/* Updated selector to ensure it's visible when needed */
.ldr-page#research-progress.active ~ .ldr-collapsible-log-panel,
.ldr-page#research-results.active ~ .ldr-collapsible-log-panel,
.ldr-page#research-progress .ldr-collapsible-log-panel,
.ldr-page#research-results .ldr-collapsible-log-panel {
    display: flex !important; /* Force display with !important */
}

/* Adjust for smaller screens */
@media (max-width: 991px) {
    .ldr-collapsible-log-panel {
        left: 60px; /* Adjust for collapsed sidebar */
    }
}

@media (max-width: 767px) {
    .ldr-collapsible-log-panel {
        left: 0; /* Full width on mobile */
        bottom: 60px; /* Account for mobile tab bar */
    }
}

.ldr-log-panel-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--gradient-bg);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
    z-index: 101;
    border-radius: 8px 8px 0 0;
}

.ldr-log-panel-header:hover {
    background-color: var(--bg-secondary);
}

.ldr-log-panel-header .ldr-toggle-icon {
    margin-right: 0.75rem;
    transition: transform 0.3s ease;
}

.ldr-log-panel-header.collapsed .ldr-toggle-icon {
    transform: rotate(-90deg);
}

.ldr-log-indicator {
    margin-left: auto;
    background-color: var(--accent-primary);
    color: white;
    border-radius: 12px;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    min-width: 1.5rem;
    text-align: center;
}

.ldr-log-panel-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: height 0.3s ease;
}

.ldr-log-panel-content.collapsed {
    height: 0 !important;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
}

.ldr-log-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(var(--shadow-color-rgb), 0.2);
}

.ldr-log-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ldr-log-filter select {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.ldr-console-log {
    padding: 0.5rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    overflow-y: auto;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
}

.ldr-console-log-entry {
    padding: 0.5rem;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid rgba(var(--highlight-color-rgb), 0.05);
}

.ldr-console-log-entry:hover {
    background-color: rgba(var(--shadow-color-rgb), 0.2);
}

.ldr-console-log-entry .ldr-log-timestamp {
    color: var(--text-muted);
    min-width: 4.5rem;
    margin-right: 0.5rem;
    font-size: 0.75rem;
}

.ldr-console-log-entry .ldr-log-badge {
    display: inline-block;
    padding: 0 0.4rem;
    margin-right: 0.5rem;
    border-radius: 3px;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.4;
}

.ldr-console-log-entry .ldr-log-message {
    flex: 1;
    word-break: break-word;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* Duplicate counter badge for logs */
.ldr-console-log-entry .ldr-duplicate-counter {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    background-color: rgba(var(--shadow-color-rgb), 0.15);
    border-radius: 10px;
    display: inline-block;
}

.ldr-console-log-entry.ldr-log-milestone .ldr-log-badge {
    background-color: var(--accent-primary);
    color: white;
}

.ldr-console-log-entry.ldr-log-error .ldr-log-badge {
    background-color: var(--error-color);
    color: white;
}

.ldr-console-log-entry.ldr-log-warning .ldr-log-badge {
  background-color: var(--warning-color);
  color: #1a1a00;
}

.ldr-console-log-entry.ldr-log-debug .ldr-log-badge {
  background-color: var(--btn-secondary-bg);
  color: var(--text-on-accent);
}

.ldr-console-log-entry.ldr-log-info .ldr-log-badge {
    background-color: var(--accent-tertiary);
    color: white;
}

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

/* Add warning message styling */
.ldr-warning-message {
    background-color: rgba(var(--warning-color-rgb), 0.1);
    color: var(--warning-color);
    border-color: rgba(var(--warning-color-rgb), 0.2);
}

/* Styling for search engine selection log entries */
.ldr-console-log-entry[data-log-type="info"][data-engine-selected="true"] {
    background-color: rgba(var(--accent-tertiary-rgb), 0.05);
    border-left: 2px solid var(--accent-tertiary);
    padding-left: calc(0.5rem - 2px);
    font-weight: 500;
}

.ldr-console-log-entry[data-log-type="info"][data-engine-selected="true"] .ldr-log-message {
    color: var(--accent-tertiary);
}

/* Update existing error message styling if needed */
.ldr-error-message {
    display: none;
    margin: 15px 0;
    padding: 10px 15px;
    border-radius: 4px;
    border-left: 4px solid;
    background-color: rgba(var(--error-color-rgb), 0.1);
    color: var(--error-color);
    border-color: rgba(var(--error-color-rgb), 0.2);
    font-weight: 500;
}

.ldr-filter-buttons {
    display: flex;
    gap: 4px;
    justify-content: flex-start;
    margin-top: 0;
}

.ldr-small-btn {
    font-size: 0.75rem;
    padding: 4px 8px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.ldr-small-btn:hover {
    background-color: rgba(var(--accent-primary-rgb), 0.2);
    color: var(--text-primary);
}

.ldr-small-btn.ldr-selected {
    background-color: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

/* Settings card styles */
.ldr-settings-card {
  background-color: var(--bg-secondary);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s;
  border: 1px solid var(--border-color);
}

.ldr-settings-card:hover {
  background-color: var(--bg-tertiary);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow);
}

.ldr-settings-card .btn {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.ldr-settings-card .btn:hover {
  background-color: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

/* Search Controls */
.ldr-search-controls {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.ldr-search-input {
  flex: 1;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 0.9rem;
}

.ldr-search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.2);
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ldr-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(var(--shadow-color-rgb), 0.15);
    max-width: 350px;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-left: 4px solid transparent;
}

.ldr-toast.visible {
    transform: translateX(0);
    opacity: 1;
}

.ldr-toast i {
    font-size: 1.2rem;
}

.ldr-toast-success {
    border-left-color: var(--success-color);
}

.ldr-toast-success i {
    color: var(--success-color);
}

.ldr-toast-error {
    border-left-color: var(--error-color);
}

.ldr-toast-error i {
    color: var(--error-color);
}

.ldr-toast-info {
    border-left-color: var(--accent-tertiary);
}

.ldr-toast-info i {
    color: var(--accent-tertiary);
}

.ldr-toast-warning {
    border-left-color: var(--warning-color);
}

.ldr-toast-warning i {
    color: var(--warning-color);
}

/* Research card: no overflow clipping — content grows dynamically when provider loads */
.ldr-card.ldr-research-card {
    overflow: visible;
}

/* Advanced Options */
.ldr-advanced-options-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 1.5rem 0 1rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: var(--accent-tertiary);
    font-weight: 600;
    transition: all 0.2s;
    border-radius: 8px;
    background-color: rgba(var(--accent-tertiary-rgb), 0.05);
    border: 1px solid rgba(var(--accent-tertiary-rgb), 0.1);
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
}

.ldr-advanced-options-toggle:hover {
    color: var(--accent-secondary);
    background-color: rgba(var(--accent-primary-rgb), 0.1);
    border-color: rgba(var(--accent-primary-rgb), 0.2);
}

.ldr-advanced-options-toggle .ldr-toggle-text {
    margin-right: 0.5rem;
}

.ldr-advanced-options-toggle i {
    transition: transform 0.3s ease;
    margin-left: auto;
}

.ldr-advanced-options-toggle.ldr-open i {
    transform: rotate(180deg);
}

.ldr-advanced-options-panel {
    display: none;
    background-color: rgba(var(--bg-tertiary-rgb), 0.5);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 2px 10px rgba(var(--shadow-color-rgb), 0.1);
}

.ldr-advanced-options-toggle.ldr-open + .ldr-advanced-options-panel,
.ldr-advanced-options-panel.ldr-expanded {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Form rows are transparent to layout — form groups become direct grid items */
.ldr-advanced-options-panel .ldr-form-row {
    display: contents !important;
}

/* Single column on small screens */
@media (max-width: 767px) {
    .ldr-advanced-options-toggle.ldr-open + .ldr-advanced-options-panel,
    .ldr-advanced-options-panel.ldr-expanded {
        grid-template-columns: 1fr;
    }
}

.ldr-form-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.ldr-form-group.ldr-half {
    flex: 1;
}

.ldr-form-options {
    margin: 1.5rem 0;
}

.ldr-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.ldr-checkbox-label:hover {
    background-color: rgba(var(--accent-tertiary-rgb), 0.05);
}

.ldr-checkbox-label input[type="checkbox"] {
    margin-right: 0.75rem;
}

/* Improved form controls for advanced options */
.ldr-form-control {
    width: 100%;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

select.ldr-form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8aa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

input[type="number"].ldr-form-control {
    appearance: textfield;
    -moz-appearance: textfield;
}

input[type="number"].ldr-form-control::-webkit-outer-spin-button,
input[type="number"].ldr-form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ldr-form-control:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15);
}

/* Notification Group Styles from app-refactoring */
.ldr-notification-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ldr-notification-group .ldr-checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.ldr-notification-group .btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.ldr-notification-group .btn-sm:hover {
  background-color: var(--accent-primary);
  color: white;
}

/* Custom Dropdown Component */
.ldr-custom-dropdown {
    position: relative;
    width: 100%;
    font-family: inherit;
    margin-bottom: 0.25rem;
}

.ldr-custom-dropdown-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
}

.ldr-custom-dropdown-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.2);
}

.ldr-custom-dropdown-list {
    position: absolute;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    display: none;
    z-index: 1000;
    margin-top: 4px;
    box-shadow: var(--card-shadow);
}

.ldr-custom-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.15s ease;
}

.ldr-custom-dropdown-item:hover {
    background-color: var(--bg-tertiary);
}

.ldr-custom-dropdown-item.active {
    background-color: rgba(var(--accent-primary-rgb), 0.2);
}

.ldr-custom-dropdown-item .ldr-highlight {
    color: var(--accent-primary);
    font-weight: 500;
}

.ldr-custom-dropdown-no-results {
    padding: 8px 12px;
    color: var(--text-muted);
    font-style: italic;
}

.ldr-custom-dropdown-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    color: var(--accent-tertiary);
    font-size: 0.9em;
    background-color: rgba(var(--accent-primary-rgb), 0.05);
}

.ldr-model-warning {
    color: var(--warning-color);
    font-size: 0.85rem;
    margin-top: 5px;
    display: none;
}

/* Form Layout Helpers */
.ldr-form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.ldr-form-group.ldr-half {
    flex: 1;
    min-width: 250px; /* Minimum width before wrapping */
}

/* Three-column layout on large screens for advanced options */
@media (min-width: 1200px) {
    .ldr-advanced-options-toggle.ldr-open + .ldr-advanced-options-panel,
    .ldr-advanced-options-panel.ldr-expanded {
        grid-template-columns: repeat(3, 1fr);
    }

    .ldr-advanced-options-panel .ldr-form-group.ldr-half {
        min-width: unset;
    }
}

.ldr-input-help {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ldr-input-help a,
.ldr-form-text a {
    text-decoration: underline;
}

/* Star Rating Component */
.ldr-star-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    font-size: 1.2rem;
}

.ldr-star-rating .ldr-star {
    color: var(--text-muted);
    transition: color 0.2s ease;
    user-select: none;
    cursor: pointer;
}

.ldr-star-rating .ldr-star.active {
    color: var(--warning-color);
}

.ldr-star-rating .ldr-star.ldr-hover {
    color: var(--warning-color);
}

.ldr-metadata-item .ldr-star-rating {
    margin-left: 0.5rem;
}

/* History Page Enhancements */
.ldr-news-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: var(--accent-primary);
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 0.5rem;
}

.ldr-news-indicator i {
    font-size: 0.875rem;
}

.ldr-chat-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: var(--accent-tertiary);
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 0.5rem;
}

.ldr-chat-indicator i {
    font-size: 0.875rem;
}

/* Chat history group (collapsible accordion) */
.ldr-history-group {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.ldr-history-group > .ldr-history-group-header {
    border-radius: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.ldr-group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    margin-right: 0.5rem;
    transition: transform 0.2s ease;
    cursor: pointer;
    color: var(--text-secondary);
}

.ldr-group-toggle[aria-expanded="true"] {
    transform: rotate(90deg);
}

.ldr-history-item-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ldr-history-child-count {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background-color: rgba(var(--accent-tertiary-rgb), 0.15);
    color: var(--accent-tertiary, #6496ff);
    font-weight: 500;
}

.ldr-history-group-children {
    display: none;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

.ldr-history-group-children--open {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem 0.75rem 1.5rem;
}

.ldr-history-child-item {
    border-left: 3px solid var(--accent-tertiary, #6496ff);
    border-radius: 0 8px 8px 0;
}

.ldr-history-child-item:hover {
    border-left-color: var(--accent-primary);
}

.ldr-subscribe-btn {
    background: transparent;
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
    transition: all 0.2s ease;
}

.ldr-subscribe-btn:hover {
    background: var(--accent-primary);
    color: white;
    transform: translateY(-1px);
}

.ldr-subscribe-btn.ldr-subscribed {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
    cursor: default;
}

.ldr-subscribe-btn.ldr-subscribed:hover {
    transform: none;
}

/* Feedback Modal Options */
.ldr-feedback-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ldr-feedback-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.ldr-feedback-option:hover {
    background: rgba(var(--accent-primary-rgb), 0.1);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    text-decoration: none;
}

.ldr-feedback-option i {
    font-size: 1.5rem;
    color: var(--accent-primary);
    width: 2rem;
    text-align: center;
}

.ldr-feedback-option strong {
    display: block;
    margin-bottom: 0.25rem;
}

.ldr-feedback-option small {
    color: var(--text-muted);
}

/* Sidebar Footer Links */
.ldr-sidebar-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.25rem;
}

.ldr-sidebar-links a {
    color: var(--text-muted);
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s;
}

.ldr-sidebar-links a:hover {
    color: var(--accent-tertiary);
    opacity: 1;
}

/* Version-link in the sidebar footer: muted, dotted underline as a subtle
   "this is clickable" cue, lights up on hover like the social icons above. */
.ldr-sidebar-footer a.ldr-sidebar-version-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    opacity: 0.75;
    transition: opacity 0.2s, color 0.2s;
}

.ldr-sidebar-footer a.ldr-sidebar-version-link:hover,
.ldr-sidebar-footer a.ldr-sidebar-version-link:focus-visible {
    color: var(--accent-tertiary);
    opacity: 1;
}

/* ============================================
   Global Alert Styles (Theme-aware)
   ============================================ */

.ldr-alert {
    padding: 12px 16px;
    margin-bottom: 15px;
    border-radius: 6px;
    border: 1px solid transparent;
}

.ldr-alert i {
    margin-right: 8px;
}

.ldr-alert-warning {
    background-color: rgba(var(--warning-color-rgb), 0.1);
    border-color: rgba(var(--warning-color-rgb), 0.3);
    color: var(--warning-color);
}

.ldr-alert-success {
    background-color: rgba(var(--success-color-rgb), 0.1);
    border-color: rgba(var(--success-color-rgb), 0.3);
    color: var(--success-color);
}

.ldr-alert-danger {
    background-color: rgba(var(--error-color-rgb), 0.1);
    border-color: rgba(var(--error-color-rgb), 0.3);
    color: var(--error-color);
}

.ldr-alert-info {
    background-color: rgba(var(--accent-tertiary-rgb), 0.1);
    border-color: rgba(var(--accent-tertiary-rgb), 0.3);
    color: var(--accent-tertiary);
}

.ldr-alert a,
.ldr-alert .ldr-alert-action {
    color: var(--text-primary);
    text-decoration: underline;
    font-weight: 500;
    display: inline-block;
    margin-top: 6px;
    font-size: 14px;
}

.ldr-alert a:hover,
.ldr-alert a:focus-visible,
.ldr-alert .ldr-alert-action:hover,
.ldr-alert .ldr-alert-action:focus-visible {
    color: #ffffff;
}

.ldr-alert a:focus-visible,
.ldr-alert .ldr-alert-action:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    border-radius: 2px;
}

@media (max-width: 480px) {
    .ldr-alert { flex-wrap: wrap; }
    .ldr-alert .ldr-alert-action { display: block; margin-top: 0.5rem; }
}

/* Metrics button — context-overflow state */
.ldr-metrics-btn-overflow {
    border-color: var(--warning-color) !important;
    color: var(--warning-color) !important;
    box-shadow: 0 0 0 1px rgba(var(--warning-color-rgb), 0.4);
}
.ldr-metrics-btn-overflow:hover {
    background-color: rgba(var(--warning-color-rgb), 0.12);
}
.ldr-metrics-btn-overflow .ldr-badge-overflow {
    display: inline-block;
    font-size: 0.65rem;
    padding: 1px 5px;
    margin-left: 6px;
    background: var(--warning-color);
    color: #000;
    border-radius: 3px;
    font-weight: 600;
    vertical-align: middle;
    line-height: 1.4;
}

/* Details page — context-overflow performance warning */
.ldr-co-performance-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: rgba(var(--warning-color-rgb), 0.12);
    border: 1px solid rgba(var(--warning-color-rgb), 0.35);
    border-radius: 0.5rem;
    color: var(--text-primary);
}
.ldr-co-performance-warning i {
    color: var(--warning-color);
    font-size: 1.25rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.ldr-co-performance-warning strong {
    color: var(--warning-color);
}

.ldr-provider-status-unavailable {
    color: var(--error-color);
}

/* Bootstrap alert overrides for theme support */
.alert-warning {
    background-color: rgba(var(--warning-color-rgb), 0.1);
    border-color: rgba(var(--warning-color-rgb), 0.3);
    color: var(--warning-color);
}

.alert-success {
    background-color: rgba(var(--success-color-rgb), 0.1);
    border-color: rgba(var(--success-color-rgb), 0.3);
    color: var(--success-color);
}

.alert-danger {
    background-color: rgba(var(--error-color-rgb), 0.1);
    border-color: rgba(var(--error-color-rgb), 0.3);
    color: var(--error-color);
}

.alert-info {
    background-color: rgba(var(--accent-tertiary-rgb), 0.1);
    border-color: rgba(var(--accent-tertiary-rgb), 0.3);
    color: var(--accent-tertiary);
}

/* Form validation styles */
.ldr-field-invalid {
    border-color: var(--error-color) !important;
    box-shadow: 0 0 0 2px rgba(var(--error-color-rgb), 0.2);
}

.ldr-field-invalid:focus {
    border-color: var(--error-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--error-color-rgb), 0.3);
}

.ldr-field-error {
    color: var(--error-color);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: none;
}

/* Inline Error Message */
.ldr-inline-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    background-color: rgba(var(--error-color-rgb), 0.1);
    border: 1px solid rgba(var(--error-color-rgb), 0.3);
    border-radius: 6px;
    color: var(--error-color);
    font-size: 0.9rem;
}

.ldr-inline-error i {
    flex-shrink: 0;
}

.ldr-inline-error span {
    flex: 1;
}

.ldr-inline-error-close {
    background: none;
    border: none;
    color: var(--error-color);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.ldr-inline-error-close:hover {
    opacity: 1;
}

.ldr-inline-error-close:focus-visible {
    outline: 2px solid var(--error-color);
    outline-offset: 2px;
    opacity: 1;
    border-radius: 2px;
}

/* =============================================
   Desktop Layout Optimization (Large Screens)
   ============================================= */

/* Large desktop (1200px+) */
@media (min-width: 1200px) {
    .ldr-main-content {
        /* Keep margin-left for sidebar, use max-width for content centering */
        max-width: calc(1400px + 240px);
        padding: var(--space-6, 2rem);
        padding-top: calc(60px + var(--space-6, 2rem)); /* Account for fixed header */
        /* Note: margin-left: 240px is inherited from base styles for sidebar offset */
    }

    /* Two-column layout for metrics on desktop */
    .ldr-metrics-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5, 1.5rem);
    }

    /* Better use of horizontal space for settings */
    .ldr-settings-container {
        max-width: 1000px;
        margin: 0 auto;
    }

    /* Wider cards on large screens */
    .ldr-card-content {
        padding: var(--space-6, 2rem);
    }
}

/* Extra large desktop (1600px+) */
@media (min-width: 1600px) {
    .ldr-main-content {
        max-width: calc(1600px + 240px);
    }

    /* Three-column layout for metrics on extra large screens */
    .ldr-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Charts can use more space */
    .ldr-chart-container {
        min-height: 400px;
    }
}

/* Ultra-wide screens (1920px+) */
@media (min-width: 1920px) {
    .ldr-main-content {
        max-width: calc(1800px + 240px);
    }

    /* Even larger padding for comfortable reading */
    .ldr-card-content {
        padding: var(--space-8, 3rem) var(--space-6, 2rem);
    }
}

/* Reduced Motion Support - WCAG 2.1 AA Requirement */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* Dima post-login product shell overrides */
html,
body {
  min-height: 100dvh;
  background: var(--bg-primary);
}

.ldr-app-container,
.ldr-main-content {
  min-height: 100dvh;
}

/* The sidebar rail is fully transparent on the dusty page
   background. The active item is the only "island" inside it. */
.ldr-sidebar {
  background: transparent;
  backdrop-filter: none;
}

.ldr-sidebar-header h2 {
  color: var(--text-primary);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* No right-side curvature — the active item carries its own pill. */
.ldr-sidebar-nav li {
  border-radius: 0;
}

.ldr-sidebar-nav li:hover {
  background-color: rgba(var(--bg-tertiary-rgb), 0.6);
}

.ldr-sidebar-nav li.active {
  color: var(--accent-primary);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md, 12px);
  margin: 2px 0;
  /* Preserve the historical `.active` border-left API contract for
     external CSS without contributing any visible pixels, since
     border-left-width is 0 here. The design relies on the surface
     pill, not on a left accent strip. */
  border-left-color: transparent;
}

.ldr-sidebar-nav li.active a {
  border-radius: var(--radius-md, 12px);
}


/* Research Brief: new research configuration flow */
.ldr-research-card .ldr-card-content {
  padding: clamp(1rem, 2vw, 1.5rem);
}

.ldr-research-brief {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4, 1rem);
  align-items: stretch;
}

.ldr-brief-main {
  display: grid;
  gap: var(--space-4, 1rem);
  min-width: 0;
}

.ldr-brief-section,
.ldr-brief-summary-card,
.ldr-advanced-group {
  background: color-mix(in srgb, var(--bg-secondary) 86%, white 14%);
  border: 1px solid color-mix(in srgb, var(--border-color) 74%, transparent);
  border-radius: var(--radius-xl, 22px);
  box-shadow: 0 14px 34px rgba(var(--shadow-color-rgb), 0.06);
}

.ldr-brief-section {
  padding: clamp(1rem, 2vw, 1.35rem);
}

.ldr-brief-section-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-4, 1rem);
}

.ldr-brief-step {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-tertiary));
  color: var(--accent-primary);
  font-weight: 800;
  flex: 0 0 auto;
}

.ldr-brief-eyebrow {
  margin: 0 0 0.15rem;
  color: var(--text-muted);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ldr-brief-section h2,
.ldr-brief-summary-card h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.2;
}

.ldr-query-group textarea#query {
  min-height: 10rem;
  resize: vertical;
  font-size: 1rem;
  line-height: 1.55;
}

.ldr-prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-3, 0.75rem);
}

.ldr-prompt-chip {
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, var(--border-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-tertiary) 78%, white 22%);
  color: var(--text-secondary);
  padding: 0.45rem 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.ldr-prompt-chip:hover,
.ldr-prompt-chip:focus-visible {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary));
  color: var(--text-primary);
  outline: none;
  transform: translateY(-1px);
}

.ldr-brief-mode-selection {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3, 0.75rem);
}

.ldr-mode-option {
  position: relative;
  min-height: 148px;
}

.ldr-mode-check {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  place-items: center;
  font-size: 0.72rem;
}

.ldr-mode-option.active .ldr-mode-check {
  display: grid;
}

.ldr-mode-meta {
  display: inline-flex;
  margin-top: var(--space-2, 0.5rem);
  color: var(--text-muted);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
}

.ldr-brief-summary {
  position: static;
}

.ldr-brief-summary-card {
  padding: var(--space-4, 1rem);
}

.ldr-brief-summary-list {
  display: grid;
  gap: var(--space-3, 0.75rem);
  margin: var(--space-4, 1rem) 0;
}

.ldr-brief-summary-list div {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem;
  border-radius: var(--radius-lg, 16px);
  background: color-mix(in srgb, var(--bg-tertiary) 70%, white 30%);
}

.ldr-brief-summary-list dt {
  color: var(--text-muted);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ldr-brief-summary-list dd {
  margin: 0;
  color: var(--text-primary);
  font-weight: 750;
  line-height: 1.35;
}

.ldr-brief-launch-bar {
  display: grid;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-4, 1rem);
}

.ldr-brief-launch-bar .btn {
  width: 100%;
  min-height: 48px;
}

.ldr-brief-launch-bar p,
.ldr-brief-notification {
  color: var(--text-muted);
  font-size: var(--text-sm, 0.875rem);
}

.ldr-brief-notification {
  display: flex;
  margin-top: var(--space-3, 0.75rem);
}

.ldr-advanced-options-panel:not(.ldr-expanded) {
  display: none;
}

.ldr-advanced-options-panel.ldr-expanded {
  display: grid;
  gap: var(--space-4, 1rem);
  margin-top: var(--space-3, 0.75rem);
}

.ldr-advanced-group {
  padding: var(--space-4, 1rem);
}

.ldr-advanced-group-heading {
  margin-bottom: var(--space-3, 0.75rem);
}

.ldr-advanced-group-heading h3 {
  margin: 0 0 0.15rem;
  font-size: 1rem;
}

.ldr-advanced-group-heading p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm, 0.875rem);
}

@media (max-width: 980px) {
  .ldr-research-brief {
    grid-template-columns: 1fr;
  }

  .ldr-brief-summary {
    position: static;
  }

  .ldr-brief-mode-selection {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ldr-research-card .ldr-card-content {
    padding: 0.75rem;
  }

  .ldr-brief-section,
  .ldr-brief-summary-card,
  .ldr-advanced-group {
    border-radius: var(--radius-lg, 16px);
  }

  .ldr-brief-section-heading {
    gap: var(--space-2, 0.5rem);
  }

  .ldr-prompt-chip {
    min-height: 44px;
    flex: 1 1 calc(50% - var(--space-2, 0.5rem));
  }
}


/* Desktop topbar is a fixed workspace header aligned to the KupiGPT sidebar. */
.ldr-top-bar {
  backdrop-filter: none;
}

/* The right side of the page is a single surface "island" on top
   of the dusty page background. We add an internal wrapper that
   paints the surface, gives it the shell radius, and floats above
   the background with a soft shadow. */
.ldr-main-content {
  background-color: transparent;
}

.ldr-top-context {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.ldr-top-context-kicker,
.ldr-page-kicker {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ldr-top-context strong {
  color: var(--text-primary);
  font-size: var(--text-base, 1rem);
  line-height: 1.2;
}

.ldr-theme-label {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 650;
}

.ldr-page-header h1 {
  font-size: clamp(2rem, 4vw, 3.35rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.ldr-page-subtitle {
  max-width: 760px;
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.55;
}

.ldr-card {
  background-color: rgba(var(--bg-secondary-rgb), 0.6);
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(var(--shadow-color-rgb), 0.06);
}

.ldr-page#new-research {
  max-width: var(--openser-research-card-max, 72rem);
  margin-inline: auto;
}

.ldr-research-hero {
  max-width: var(--openser-readable-max, 58rem);
}

.ldr-research-card {
  max-width: var(--openser-research-card-max, 72rem);
  margin-inline: auto;
  border-color: rgba(var(--border-color-rgb), 0.86);
}

.ldr-mode-selection {
  gap: var(--space-4);
}

.ldr-mode-option {
  border-radius: 20px;
  border-color: rgba(var(--border-color-rgb), 0.9);
  background: rgba(var(--bg-tertiary-rgb), 0.72);
}

.ldr-mode-option.active,
.ldr-mode-option:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.45);
  box-shadow: 0 16px 36px rgba(var(--shadow-color-rgb), 0.08);
}

.ldr-form-control,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select {
  border-radius: var(--radius-md, 12px);
  border-color: color-mix(in srgb, var(--text-secondary) 48%, var(--border-color));
  background-color: color-mix(in srgb, var(--bg-secondary) 94%, white 6%);
  color: var(--text-primary);
}

.ldr-form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--text-secondary) 82%, var(--bg-secondary));
  opacity: 1;
}

.ldr-form-control:hover,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
textarea:hover,
select:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 46%, var(--border-color));
}

.ldr-form-control:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
  border-color: var(--accent-primary);
  outline: 3px solid rgba(var(--accent-primary-rgb), 0.18);
  outline-offset: 1px;
}

.btn.btn-primary,
button.btn-primary {
  border-radius: 14px;
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
  box-shadow: 0 12px 26px rgba(var(--accent-primary-rgb), 0.22);
}

@media (max-width: 767px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .ldr-main-content {
    padding: calc(env(safe-area-inset-top) + 4.25rem) 1rem calc(env(safe-area-inset-bottom) + 5rem) 1rem !important;
  }

  .ldr-top-context {
    min-width: 0;
  }

  .ldr-top-context strong {
    font-size: 0.82rem;
  }

  .ldr-page#new-research,
  .ldr-research-hero,
  .ldr-research-card {
    max-width: none;
  }

  .ldr-page-header h1 {
    font-size: clamp(2rem, 12vw, 2.75rem);
  }

  .ldr-card {
    border-radius: 20px;
  }
}

/* ------------------------------------------------------------------
   Surface "island" wrapper.

   The dusty page background (--bg-primary) shows through everything
   except the main shell. .ldr-shell-island is the only big painted
   block on the right side; it gives the page a clear foreground/
   background relationship, and the active sidebar item echoes the
   same surface token so the eye reads them as the same family of
   "stuff that floats on the background".
*/
.ldr-shell-island {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid rgba(var(--highlight-color-rgb), 0.62);
  border-radius: var(--shell-radius, 28px);
  box-shadow: var(--shell-shadow, 0 18px 44px rgba(var(--shadow-color-rgb), 0.08));
  padding: 1.25rem 1.5rem;
  margin: 0 auto 1rem;
  width: 100%;
  max-width: var(--openser-content-max, 86.4rem);
  min-height: calc(100vh - 4rem);
  box-sizing: border-box;
}

/* The toggle is the only "thing" in the sidebar that has a fill
   even when the rail is transparent — it's how you reach the rail
   back. It uses the same surface family as the shell island. */
.ldr-sidebar-toggle {
  appearance: none;
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-md, 12px);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.ldr-sidebar-toggle:hover {
  color: var(--accent-primary);
}
.ldr-sidebar-toggle:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}
.ldr-sidebar-toggle .ldr-sidebar-toggle__expand {
  display: none;
}
body.ldr-sidebar-collapsed .ldr-sidebar-toggle .ldr-sidebar-toggle__collapse {
  display: none;
}
body.ldr-sidebar-collapsed .ldr-sidebar-toggle .ldr-sidebar-toggle__expand {
  display: inline-flex;
}
body.ldr-sidebar-collapsed .ldr-sidebar-toggle {
  margin-left: auto;
  margin-right: auto;
}

/* Sidebar collapse state (desktop). On mobile the sidebar is hidden
   by the existing responsive rules; the collapsed body class is a
   no-op below 768px and never escapes the rail's padding, so the
   mobile shell stays untouched. */
body.ldr-sidebar-collapsed {
  --sidebar-w: var(--sidebar-w-collapsed);
}

body.ldr-sidebar-collapsed [data-collapsible] {
  display: none !important;
}

body.ldr-sidebar-collapsed .ldr-sidebar-header h2 {
  display: none;
}

body.ldr-sidebar-collapsed .ldr-sidebar-nav li a {
  justify-content: center;
  padding: 0.6rem 0;
}

body.ldr-sidebar-collapsed .ldr-sidebar-nav li.active {
  margin: 4px 8px;
}

body.ldr-sidebar-collapsed .ldr-sidebar-nav li.active a {
  padding: 0.6rem 0;
}

body.ldr-sidebar-collapsed .ldr-sidebar-footer {
  display: none;
}


/* === KupiGPT-style LDR sidebar ========================================== */
.ldr-sidebar[data-variant="kupigpt"] {
  --kupi-sidebar-surface: color-mix(in srgb, var(--bg-secondary) 92%, white 8%);
  --kupi-sidebar-hover: color-mix(in srgb, var(--bg-tertiary) 78%, transparent);
  --kupi-sidebar-active: color-mix(in srgb, var(--accent-primary) 13%, var(--bg-secondary));
  --kupi-sidebar-active-border: color-mix(in srgb, var(--accent-primary) 30%, transparent);
  --kupi-sidebar-shadow: 0 12px 34px rgba(31, 42, 36, 0.07);
  background: var(--kupi-sidebar-surface);
  border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
  border-radius: var(--radius-xl, 22px);
  box-shadow: var(--kupi-sidebar-shadow);
  margin: 0.625rem 0 0.625rem 0.625rem;
  height: calc(100vh - 1.25rem);
  overflow: hidden;
}

.ldr-kupi-sidebar-header {
  min-height: 72px;
  padding: 0.75rem 0.75rem 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
  gap: 0.5rem;
}

.ldr-sidebar[data-variant="kupigpt"] .ldr-sidebar-brand {
  gap: 0.65rem;
  min-width: 0;
}

.ldr-kupi-brand__mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-accent, #fff);
  background: linear-gradient(145deg, var(--accent-primary), var(--accent-secondary));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-primary) 26%, transparent);
}

.ldr-kupi-brand__mark i { font-size: 1rem; }

.ldr-kupi-brand__copy,
.ldr-kupi-nav-item__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.15;
}

.ldr-kupi-brand__title {
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ldr-kupi-brand__subtitle {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ldr-sidebar[data-variant="kupigpt"] .ldr-sidebar-toggle {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
}

.ldr-sidebar[data-variant="kupigpt"] .ldr-sidebar-toggle:hover,
.ldr-sidebar[data-variant="kupigpt"] .ldr-sidebar-toggle:focus-visible {
  color: var(--text-primary);
  background: var(--kupi-sidebar-hover);
  border-color: color-mix(in srgb, var(--accent-primary) 25%, var(--border-color));
}

.ldr-kupi-nav {
  padding: 0.6rem;
  gap: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--border-color) 75%, transparent) transparent;
}

.ldr-kupi-nav__section,
.ldr-kupi-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ldr-kupi-nav-item,
.ldr-kupi-group__trigger {
  appearance: none;
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.6rem;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--text-secondary);
  text-decoration: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.ldr-kupi-nav-item:hover,
.ldr-kupi-nav-item:focus-visible,
.ldr-kupi-group__trigger:hover,
.ldr-kupi-group__trigger:focus-visible {
  color: var(--text-primary);
  background: var(--kupi-sidebar-hover);
  outline: none;
}

.ldr-kupi-nav-item:focus-visible,
.ldr-kupi-group__trigger:focus-visible {
  border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
}

.ldr-kupi-nav-item.active,
.ldr-kupi-group.is-active > .ldr-kupi-group__trigger {
  color: var(--accent-primary);
  background: var(--kupi-sidebar-active);
  border-color: var(--kupi-sidebar-active-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

.ldr-kupi-nav-item__icon {
  width: 18px;
  flex: 0 0 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: color 0.18s ease, transform 0.18s ease;
}

.ldr-kupi-nav-item:hover .ldr-kupi-nav-item__icon,
.ldr-kupi-group__trigger:hover .ldr-kupi-nav-item__icon,
.ldr-kupi-nav-item.active .ldr-kupi-nav-item__icon,
.ldr-kupi-group.is-active > .ldr-kupi-group__trigger .ldr-kupi-nav-item__icon {
  color: var(--accent-primary);
}

.ldr-kupi-nav-item__copy { flex: 1; }

.ldr-kupi-nav-item__label {
  color: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ldr-kupi-nav-item__desc {
  display: none;
}

.ldr-kupi-divider {
  margin: 0.4rem 0.35rem;
  background: color-mix(in srgb, var(--border-color) 65%, transparent);
}

.ldr-kupi-group__chevron {
  width: 14px;
  color: var(--text-muted);
  font-size: 0.7rem;
  transition: transform 0.22s ease;
}

.ldr-kupi-group.is-open > .ldr-kupi-group__trigger .ldr-kupi-group__chevron {
  transform: rotate(180deg);
}

.ldr-kupi-group__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.24s ease, opacity 0.18s ease;
}

.ldr-kupi-group.is-open > .ldr-kupi-group__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.ldr-kupi-group__items {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 0.75rem;
  margin-left: 1.15rem;
  border-left: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.ldr-kupi-nav-item--child {
  min-height: 42px;
  padding: 0.4rem 0.55rem;
  border-radius: 11px;
}

.ldr-kupi-userblock {
  padding: 0.6rem;
  border-top: 1px solid color-mix(in srgb, var(--border-color) 62%, transparent);
  background: transparent;
}

.ldr-kupi-userblock__main {
  padding: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
  border-radius: var(--radius-md, 12px);
  background: color-mix(in srgb, var(--kupi-sidebar-surface) 82%, transparent);
}

.ldr-kupi-userblock__main:hover,
.ldr-kupi-userblock.is-menu-open .ldr-kupi-userblock__main {
  border-color: color-mix(in srgb, var(--accent-primary) 24%, var(--border-color));
  background: var(--kupi-sidebar-hover);
}

.ldr-kupi-userblock__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm, 10px);
  background: color-mix(in srgb, var(--accent-primary) 76%, var(--bg-secondary));
  box-shadow: none;
}

.ldr-kupi-userblock__name { font-weight: 650; }
.ldr-kupi-userblock__plan { display: none; }
.ldr-kupi-userblock__settings { border-radius: 10px; }
.ldr-kupi-userblock__menu { border-radius: 16px; box-shadow: 0 20px 50px rgba(24, 35, 29, 0.15); }

body.ldr-sidebar-collapsed .ldr-sidebar[data-variant="kupigpt"] {
  margin-left: 0.5rem;
  border-radius: 16px;
}

body.ldr-sidebar-collapsed .ldr-kupi-sidebar-header {
  padding: 0.65rem 0.45rem;
  flex-direction: column;
  min-height: auto;
}

body.ldr-sidebar-collapsed .ldr-sidebar[data-variant="kupigpt"] .ldr-sidebar-brand { justify-content: center; flex: none; }
body.ldr-sidebar-collapsed .ldr-sidebar[data-variant="kupigpt"] .ldr-kupi-brand__mark { width: 34px; height: 34px; flex-basis: 34px; }
body.ldr-sidebar-collapsed .ldr-kupi-nav { padding: 0.45rem; }
body.ldr-sidebar-collapsed .ldr-kupi-nav-item,
body.ldr-sidebar-collapsed .ldr-kupi-group__trigger {
  min-height: 42px;
  justify-content: center;
  padding: 0.45rem;
}
body.ldr-sidebar-collapsed .ldr-kupi-group__panel { display: none; }
body.ldr-sidebar-collapsed .ldr-kupi-divider { margin-inline: 0.15rem; }
body.ldr-sidebar-collapsed .ldr-kupi-nav-item__icon { width: 20px; flex-basis: 20px; }

@media (max-width: 767px) {
  .ldr-sidebar[data-variant="kupigpt"] {
    margin: 0;
    height: 100dvh;
    border-radius: 0 20px 20px 0;
    border-left: 0;
  }
  .ldr-kupi-sidebar-header { padding-top: max(0.75rem, env(safe-area-inset-top)); }
}


/* Project Workspaces: Russian UX polish */
.ldr-projects-page,
.ldr-project-detail-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 1.5rem);
}

.ldr-projects-hero {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5, 1.5rem);
  align-items: flex-end;
  padding: clamp(1.25rem, 2vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-color));
  border-radius: var(--radius-xl, 22px);
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--accent-primary-rgb), 0.16), transparent 18rem),
    linear-gradient(135deg, var(--bg-secondary), color-mix(in srgb, var(--bg-tertiary) 82%, white));
  box-shadow: var(--card-shadow-sm, var(--card-shadow));
}

.ldr-projects-hero__copy {
  max-width: 48rem;
}

.ldr-projects-kicker,
.ldr-section-eyebrow {
  display: inline-flex;
  margin-bottom: .45rem;
  color: var(--accent-primary);
  font-size: var(--text-sm, .875rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ldr-projects-hero h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.ldr-projects-hero p,
.ldr-section-heading p {
  margin: .75rem 0 0;
  color: var(--text-secondary);
  font-size: var(--text-base, 1rem);
  max-width: 46rem;
}

.ldr-projects-hero__actions,
.ldr-project-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, .75rem);
  flex-wrap: wrap;
}

.ldr-projects-grid {
  display: grid;
  grid-template-columns: minmax(19rem, .9fr) minmax(24rem, 1.25fr);
  gap: var(--space-5, 1.5rem);
  align-items: start;
}

.ldr-project-create-card,
.ldr-project-list-card,
.ldr-project-detail-card {
  border-color: color-mix(in srgb, var(--border-color) 80%, var(--accent-primary));
}

.ldr-section-heading {
  margin-bottom: var(--space-5, 1.5rem);
}

.ldr-section-heading h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.35rem, 2vw, 2rem);
  letter-spacing: -0.025em;
}

.ldr-section-heading--inline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
}

.ldr-project-count {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .35rem .7rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  font-size: var(--text-sm, .875rem);
  white-space: nowrap;
}

.ldr-project-form {
  display: grid;
  gap: var(--space-4, 1rem);
}

.ldr-project-form__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3, .75rem);
}

.ldr-project-form .ldr-form-group {
  margin-bottom: 0;
}

.ldr-project-form label,
.ldr-context-preview-form label {
  color: var(--text-primary);
  font-weight: 650;
}

.ldr-project-form input,
.ldr-project-form textarea,
.ldr-context-preview-form textarea {
  min-height: 46px;
  background: color-mix(in srgb, var(--bg-secondary) 78%, white);
  border-color: color-mix(in srgb, var(--border-color) 78%, var(--text-secondary));
  color: var(--text-primary);
}

.ldr-project-form input::placeholder,
.ldr-project-form textarea::placeholder,
.ldr-context-preview-form textarea::placeholder {
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text-primary));
}

.ldr-project-form__status {
  min-height: 1.25rem;
  color: var(--success-color);
  font-size: var(--text-sm, .875rem);
  font-weight: 600;
}

.ldr-project-form__error {
  color: var(--error-color);
}

.ldr-project-list {
  display: grid;
  gap: var(--space-3, .75rem);
}

.ldr-project-card {
  display: grid;
  gap: var(--space-3, .75rem);
  padding: var(--space-4, 1rem);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 16px);
  background: color-mix(in srgb, var(--bg-secondary) 86%, white);
  box-shadow: var(--card-shadow-sm, var(--card-shadow));
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ldr-project-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent-primary);
  box-shadow: var(--card-shadow-md, var(--card-shadow));
}

.ldr-project-card__main {
  display: block;
  color: inherit;
}

.ldr-project-card__main:hover h3 {
  color: var(--accent-primary);
}

.ldr-project-card__status {
  display: inline-flex;
  margin-bottom: .45rem;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: rgba(var(--accent-primary-rgb), .12);
  color: var(--accent-primary);
  font-size: var(--text-xs, .75rem);
  font-weight: 750;
}

.ldr-project-card h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-xl, 1.25rem);
  letter-spacing: -0.02em;
}

.ldr-project-card p {
  margin: .4rem 0 0;
  color: var(--text-secondary);
}

.ldr-project-card__meta,
.ldr-project-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ldr-project-card__meta span,
.ldr-project-metric {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--text-sm, .875rem);
}

.ldr-project-metric strong {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.ldr-project-empty-state,
.ldr-project-loading {
  padding: var(--space-5, 1.5rem);
  border: 1px dashed color-mix(in srgb, var(--border-color) 80%, var(--accent-primary));
  border-radius: var(--radius-lg, 16px);
  background: color-mix(in srgb, var(--bg-tertiary) 76%, transparent);
  color: var(--text-secondary);
}

.ldr-project-empty-state strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--text-lg, 1.125rem);
  margin-bottom: .35rem;
}

.ldr-project-empty-state p {
  margin: 0 0 1rem;
}

.ldr-project-empty-state--error {
  border-color: var(--error-color);
  background: rgba(var(--error-color-rgb), .08);
}

.ldr-project-tabs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .35rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
}

.ldr-project-tab {
  border: 0;
  border-radius: 999px;
  padding: .65rem 1rem;
  min-height: 44px;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.ldr-project-tab.active,
.ldr-project-tab:hover,
.ldr-project-tab:focus-visible {
  background: var(--accent-primary);
  color: var(--text-on-accent, #fff);
  outline: none;
}

.ldr-project-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3, .75rem);
  margin: 0 0 var(--space-5, 1.5rem);
}

.ldr-project-overview > div {
  padding: var(--space-4, 1rem);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 12px);
  background: var(--bg-tertiary);
}

.ldr-project-overview dt {
  color: var(--text-secondary);
  font-size: var(--text-sm, .875rem);
  font-weight: 700;
}

.ldr-project-overview dd {
  margin: .25rem 0 0;
  color: var(--text-primary);
  font-weight: 700;
}

.ldr-context-preview-form {
  margin-top: var(--space-5, 1.5rem);
}

.ldr-context-preview {
  margin-top: var(--space-4, 1rem);
  padding: var(--space-4, 1rem);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 12px);
  background: color-mix(in srgb, var(--text-primary) 92%, black);
  color: #f8fafc;
  white-space: pre-wrap;
  overflow-x: auto;
  min-height: 0;
}

@media (max-width: 980px) {
  .ldr-projects-hero,
  .ldr-section-heading--inline {
    align-items: stretch;
    flex-direction: column;
  }

  .ldr-projects-grid,
  .ldr-project-form__row,
  .ldr-project-overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ldr-projects-hero,
  .ldr-card-content {
    padding: var(--space-4, 1rem);
  }

  .ldr-projects-hero__actions,
  .ldr-project-form__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .ldr-projects-hero__actions .btn,
  .ldr-project-form__footer .btn {
    width: 100%;
  }
}