/* ===== DISCOVER TAB (full-width search + cards, Scope-style header/toolbar) ===== */
/* Shared container: Discover, Trending, Keywords - full width, no blank space */
.discover-container,
.trending-container,
.keywords-container {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

.trending-container,
.keywords-container {
  padding: var(--spacing-md);
  padding-left: max(var(--spacing-md), env(safe-area-inset-left));
  padding-right: max(var(--spacing-md), env(safe-area-inset-right));
  animation: fadeIn 0.3s var(--ease-out);
}

/* Discover: minimal padding, bar uses full width like Saved/other tabs */
.discover-container {
  padding: var(--spacing-sm) var(--spacing-md);
  padding-left: max(var(--spacing-md), env(safe-area-inset-left));
  padding-right: max(var(--spacing-md), env(safe-area-inset-right));
  animation: fadeIn 0.3s var(--ease-out);
  max-width: 100%;
}

/* Container padding for Discover: see discover-overrides.css (loads last) */

/* Section header: matches Track-mode page-header look */
.discover-header,
.trending-header,
.keywords-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-tertiary);
}

/* Shared section header: Discover, Trending, Keywords, Saved */
.section-title,
.discover-title,
.trending-title,
.keywords-title,
.saved-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}

.section-title i[data-lucide],
.discover-title i[data-lucide],
.trending-title i[data-lucide],
.keywords-title i[data-lucide],
.saved-title i[data-lucide] {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Shared section subtitle */
.section-subtitle,
.discover-subtitle,
.trending-subtitle,
.keywords-subtitle,
.saved-subtitle {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Shared toolbar: Discover, Trending, Keywords, Scope */
.discover-container .top-controls-card.discover-toolbar,
.trending-container .top-controls-card.discover-toolbar,
.keywords-container .top-controls-card.discover-toolbar,
.trends-toolbar.top-controls-card.discover-toolbar {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md) var(--spacing-xl);
  margin: 0;
  box-shadow: none;
  display: block;
  max-width: none;
}

/* Trending toolbar: full width, search grows to fill (like Discover) */
.trending-toolbar .top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-md);
  width: 100%;
}

.trending-search-wrap {
  flex: 1 1 200px;
  min-width: 120px;
}

.trending-toolbar .control-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.trending-toolbar .control-group label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
  align-self: center;
}

.trending-toolbar select {
  padding: var(--spacing-sm) var(--spacing-3xl) var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  min-width: 90px;
  width: auto;
}

.discover-container #results {
  min-width: 0;
  margin-top: 0;
}

@media (max-width: 768px) {
  .discover-container {
    padding: var(--spacing-md) var(--spacing-lg);
    padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
    padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
  }
  .trending-container,
  .keywords-container {
    padding: var(--spacing-lg);
    padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
    padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
  }
}

@media (max-width: 480px) {
  .discover-container {
    padding: var(--spacing-sm) var(--spacing-md);
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
  }
  .trending-container,
  .keywords-container {
    padding: var(--spacing-md);
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
  }

  .discover-container .top-controls-card.discover-toolbar,
  .trending-container .top-controls-card.discover-toolbar,
  .keywords-container .top-controls-card.discover-toolbar {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .section-title,
  .discover-title,
  .trending-title,
  .keywords-title,
  .saved-title {
    font-size: var(--font-size-xl);
  }
}

@media (max-width: 360px) {
  .discover-container,
  .trending-container,
  .keywords-container {
    padding: var(--spacing-sm);
    padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
    padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
  }
}

/* ===== TOP CONTROLS TOOLBAR ===== */
#topBar {
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: var(--spacing-md);
  width: 100%;
  background: var(--bg-primary);
  /* solid background when sticky so content doesn’t show through */
}

@media (max-width: 480px) {
  #topBar {
    top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    margin-bottom: var(--spacing-md);
  }

  .top-controls-card {
    padding: 4px 0;
  }
}

.top-controls-card {
  background: transparent;
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  box-shadow: none;
  border: none;
  width: 100%;
  overflow: hidden;
}

.top-row {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.top-row>.control-group.inline:first-child,
.search-group {
  flex: 1;
  min-width: 0;
}

/* Toolbar: secondary controls use --bg-hover to stand out from --bg-tertiary toolbar */
:is(.discover-toolbar, .trending-toolbar, .keywords-toolbar, .trends-toolbar) .top-row select,
:is(.discover-toolbar, .trending-toolbar, .keywords-toolbar, .trends-toolbar) .top-row input[type="number"] {
  background: var(--bg-hover);
}

/* Search group specific styles */
.search-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.search-group input {
  flex: 1;
  min-width: 0;
}

/* search-btn, #advancedToggle: see shared-search.css */

/* ===== CONTROL GROUPS ===== */
.control-group label {
  font-size: var(--font-size-base);
  margin-bottom: 0;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

/* Hide search label - placeholder text is sufficient */
.top-row>.control-group.inline:first-child .search-label,
.top-row>.control-group.inline:first-child label {
  display: none;
}

.control-group.inline {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
  flex-shrink: 1;
  margin: 0;
  padding: 0;
}

/* ===== FORM INPUTS ===== */
/* Exclude checkbox, radio, range so they keep usable defaults */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  border: 1px solid var(--border-secondary);
  outline: none;
  transition: all 0.2s ease;
  font-size: var(--font-size-base);
  font-family: inherit;
  width: 100%;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus {
  background: var(--bg-primary);
  border-color: var(--color-primary);
  box-shadow: none;
}

/* Search input pill: now on container (.search-group) - see shared-search.css */

/* search-btn, #advancedToggle: shared-search.css */

/* ===== CHECKBOX (single source for all checkboxes: scope, settings, revenue, etc.) ===== */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  vertical-align: middle;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    transform 0.22s var(--ease-spring);
}

input[type="checkbox"]:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
  transform: scale(1.05);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: none;
}

input[type="checkbox"]:active {
  transform: scale(0.97);
  transition: transform 0.1s var(--ease-in);
}

input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l4 4 6-8' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

input[type="checkbox"]:checked:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Prevent mobile browser auto-sizing */
input[type="text"],
input[type="number"] {
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius-lg);
}

/* Toolbar inputs: rounded (search wrappers handle their own radius via shared-search.css) */
.twitter-input-group input,
.top-controls-card input[type="number"],
.trending-toolbar input[type="number"],
.keywords-toolbar input[type="number"],
.trends-toolbar input[type="number"] {
  border-radius: var(--radius-lg) !important;
}

input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
  background: var(--bg-primary);
  box-shadow: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-tertiary);
}

/* ===== ADVANCED SETTINGS DROPDOWN ===== */
/* Open: smooth reveal. Close: longer duration + delay so fade finishes before collapse. */
.dropdown-accordion {
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  /* Close: opacity fades first, then height collapses - delay makes close feel smoother */
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.12s;
}

.dropdown-accordion.show {
  max-height: 70vh;
  margin-top: 6px;
  /* Open: same smooth timing */
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-accordion > .dropdown-content {
  background: var(--bg-secondary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 10px 12px;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 50vh;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateZ(0);
  /* Close: longer fade so it matches the open feel */
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-accordion.show > .dropdown-content {
  opacity: 1;
  /* Open: fade in with height */
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Standalone dropdown */
.top-controls-card > .dropdown-content {
  visibility: hidden;
  background: var(--bg-secondary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 10px 12px;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transform: translateZ(0);
  /* Close: fade first, then collapse. Delay on max-height makes close match open smoothness. */
  transition:
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
    visibility 0s linear 0.6s,
    margin 0s;
}

.top-controls-card > .dropdown-content.show {
  visibility: visible;
  opacity: 1;
  max-height: 50vh;
  margin-top: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Open: same smooth timing */
  transition:
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s,
    margin 0s;
}

@media (prefers-reduced-motion: reduce) {
  .dropdown-accordion,
  .dropdown-accordion > .dropdown-content,
  .top-controls-card > .dropdown-content {
    transition-duration: 0.08s !important;
  }
}

@media (max-width: 768px) {
  .dropdown-accordion.show > .dropdown-content,
  .top-controls-card > .dropdown-content.show {
    max-height: min(70vh, 400px);
  }
}

/* ===== SETTINGS DROPDOWN (search) ===== */
.settings-dropdown {
  padding: var(--spacing-lg);
  width: 100%;
  max-width: none;
}

/* Compact discover settings: 3 tight rows, full width, minimal height */
.settings-dropdown-compact {
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.settings-compact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-md);
  width: 100%;
}

.settings-compact-row-last {
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-tertiary);
  gap: var(--spacing-lg);
  justify-content: flex-start;
}

.settings-compact-row-last .settings-compact-item {
  flex: 0 1 auto;
}

.settings-compact-row-last .settings-compact-item.settings-compact-toggle {
  flex: 0 0 auto;
}

.settings-compact-row-last .settings-compact-item:not(.settings-compact-toggle) {
  min-width: 80px;
  max-width: 100px;
}

.settings-compact-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 80px;
}

.settings-compact-item label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
  margin: 0;
}

.settings-compact-item input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.settings-compact-item select {
  width: 100%;
  min-width: 70px;
  padding: 4px 8px;
  font-size: var(--font-size-xs);
  height: 28px;
  min-height: 28px;
}

.settings-compact-item input[type="number"] {
  max-width: 72px;
}

.settings-compact-toggle {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.settings-compact-toggle label {
  margin: 0;
  cursor: pointer;
}

.settings-dropdown-compact input[type="range"] {
  width: 100%;
  min-width: 60px;
}

.settings-dropdown-compact .slider-value {
  font-size: 0.65rem;
  padding: 0 3px;
}

/* Discover toolbar: compact dropdown, fixed height to fit 3 rows */
.discover-toolbar .dropdown-accordion.show {
  max-height: 260px;
}

.discover-toolbar .dropdown-accordion > .dropdown-content.settings-dropdown {
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .discover-toolbar .dropdown-accordion.show {
    max-height: 320px;
  }
}

@media (max-width: 480px) {
  .discover-toolbar .dropdown-accordion.show {
    max-height: 360px;
  }
  .settings-compact-item {
    flex: 1 1 45%;
  }
}

/* ===== SETTINGS SECTIONS ===== */
.settings-section {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border-tertiary);
}

.settings-section:first-child {
  padding-top: 0;
}

.settings-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.settings-section-title {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: var(--spacing-xs);
}

/* ===== SETTINGS GRID ===== */
.settings-grid {
  display: grid;
  gap: var(--spacing-md) var(--spacing-lg);
  align-items: end;
}

.settings-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.settings-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.settings-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Settings sliders inherit global range style (toolbar.css) */
.settings-dropdown input[type="range"] {
  width: 100%;
  min-width: 0;
}

/* Legacy row (for other dropdowns that use settings-row) */
.settings-row {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-end;
  flex-wrap: wrap;
}

.settings-section .settings-row {
  padding: 0;
}

.settings-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.settings-grid .settings-item {
  flex: none;
}

.settings-row .settings-item {
  flex: 1;
  min-width: 100px;
}

.settings-item label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}

.settings-item input,
.settings-item select {
  width: 100%;
  padding: 6px 10px;
  font-size: var(--font-size-sm);
  height: 32px;
  min-height: 32px;
}

.settings-item input[type="number"] {
  max-width: 90px;
}

.settings-hint {
  font-size: 0.65rem;
  color: var(--color-text-tertiary);
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
}

.settings-item-toggle {
  justify-content: flex-end;
}


.settings-item-toggle .toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-item-toggle .toggle-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  margin: 0;
}

.slider-value {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  font-size: 0.6rem;
  background: var(--color-primary-subtle);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  min-width: 24px;
  text-align: center;
}

/* ===== RANGE INPUTS (unified slider style site-wide) ===== */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  outline: none;
  width: 100%;
  margin: 4px 0 4px 0;
  cursor: pointer;
  border: none;
  accent-color: var(--color-primary);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-circle);
  background: var(--color-primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    transform 0.3s var(--ease-spring),
    background 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--color-primary-hover);
  transform: scale(1.15);
  box-shadow: var(--shadow-md);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-circle);
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border: none;
}

input[type="range"]::-moz-range-thumb:hover {
  background: var(--color-primary-hover);
  transform: scale(1.15);
  box-shadow: var(--shadow-md);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {

  /* Search bar scrolls away on mobile (no sticky) */
  #topBar {
    position: static;
  }

  .top-controls-card {
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-sm);
  }

  /* 2-row grid for search toolbars: search full width, filters aligned on row 2 */
  .discover-toolbar .top-row,
  .trending-toolbar .top-row,
  .keywords-toolbar .top-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--spacing-sm);
    align-items: center;
  }

  .discover-toolbar .search-group,
  .discover-toolbar .top-row > .control-group.inline:first-child,
  .trending-toolbar .trending-search-wrap,
  .trending-toolbar .top-row > .control-group.inline:first-child,
  .keywords-toolbar .keywords-search-wrap,
  .keywords-toolbar .top-row > .control-group.inline:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
  }

  .discover-toolbar .top-row > .control-group.inline:nth-child(2),
  .trending-toolbar .top-row > .control-group.inline:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .discover-toolbar .top-row > .control-group.inline:nth-child(3),
  .trending-toolbar .top-row > .control-group.inline:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .discover-toolbar .top-row > .control-group.inline:nth-child(4),
  .trending-toolbar .top-row > .control-group.inline:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }

  /* Keywords: search row 1, options row 2 full width */
  .keywords-toolbar .top-row > .control-group.inline:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .top-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
  }

  .search-group,
  .top-row>.control-group.inline:first-child {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    order: -1;
  }

  .search-group input,
  .top-row>.control-group.inline:first-child input {
    flex: 1;
    min-width: 0;
    max-width: none;
    min-height: var(--touch-target);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
  }

  .search-btn,
  .top-row>.control-group.inline:first-child .btn {
    height: 36px;
    width: 36px;
    min-width: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .search-btn svg {
    width: 18px;
    height: 18px;
  }

  .control-group.inline {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 0 1 auto;
  }

  .control-group label {
    font-size: var(--font-size-sm);
    min-width: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }

  input,
  select {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    min-width: 0;
    height: 32px;
    min-height: 32px;
    font-size: 16px;
    /* Prevent iOS zoom */
  }

  .control-group.inline input,
  .control-group.inline select {
    width: auto;
    flex: 0 1 auto;
    max-width: 100px;
    min-width: 60px;
  }

  .control-group.inline input[type="number"] {
    max-width: 55px;
    min-width: 45px;
  }

  .control-group.inline .btn {
    width: auto;
    min-width: auto;
    flex-shrink: 0;
    white-space: nowrap;
    height: 32px;
    padding: 4px 8px;
  }

  /* Settings dropdown responsive */
  .settings-section {
    padding: var(--spacing-sm) 0;
  }

  .settings-section-title {
    margin-bottom: var(--spacing-xs);
  }

  .settings-grid-2,
  .settings-grid-3,
  .settings-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .settings-row {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .settings-item {
    flex: 1 1 calc(50% - 4px);
    min-width: 100px;
  }

  .settings-item-toggle {
    flex: 1 1 100%;
  }

  .dropdown-accordion.show > .dropdown-content,
  .dropdown-content.show {
    padding: 8px;
    max-height: 60vh;
  }

  #galleryToggle {
    font-size: var(--font-size-sm);
    padding: 6px 10px;
    height: 32px;
    min-width: 44px;
    flex-shrink: 0;
  }

  #reverseSortBtn,
  #advancedToggle {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 6px;
    flex-shrink: 0;
  }

  #advancedToggle.btn-dropdown-trigger,
  #trendingSettingsToggle.btn-dropdown-trigger,
  #trendsScopeSettingsToggle.btn-dropdown-trigger {
    width: auto;
    min-width: var(--touch-target);
    padding: var(--spacing-sm) var(--spacing-md);
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .top-controls-card {
    padding: var(--spacing-sm);
    border-radius: var(--radius-lg);
    gap: var(--spacing-sm);
  }

  /* Keep 2-row grid on small screens - prevent 3+ rows */
  .discover-toolbar .top-row,
  .trending-toolbar .top-row,
  .keywords-toolbar .top-row {
    display: grid;
  }

  .top-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    align-items: center;
  }

  .search-group,
  .top-row>.control-group.inline:first-child {
    flex: 1 1 100%;
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    order: -1;
  }

  .search-group input,
  .top-row>.control-group.inline:first-child input {
    flex: 1;
    min-width: 0;
    max-width: none;
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: var(--touch-target);
    height: auto;
    margin: 0;
    font-size: 16px;
    /* Prevent iOS zoom */
    -webkit-appearance: none;
    appearance: none;
  }

  .search-btn,
  .top-row>.control-group.inline:first-child .btn {
    flex-shrink: 0;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-btn svg {
    width: 16px;
    height: 16px;
  }

  .control-group.inline {
    gap: var(--spacing-xs);
    align-items: center;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }

  .control-group label {
    font-size: var(--font-size-sm);
    min-width: auto;
  }

  input,
  select {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 16px;
    /* Prevent iOS zoom */
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
  }

  .control-group.inline input,
  .control-group.inline select {
    max-width: 85px;
    min-width: 50px;
  }

  .control-group.inline input[type="number"] {
    max-width: 50px;
    min-width: 40px;
  }

  .control-group.inline select {
    max-width: 85px;
    min-width: 60px;
  }

  .control-group.inline .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    min-width: auto;
    height: 30px;
  }

  #galleryToggle {
    font-size: 0.65rem;
    padding: 5px 6px;
    min-width: auto;
    height: 30px;
  }

  #reverseSortBtn,
  #advancedToggle {
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 5px;
  }

  #advancedToggle.btn-dropdown-trigger,
  #trendingSettingsToggle.btn-dropdown-trigger,
  #trendsScopeSettingsToggle.btn-dropdown-trigger {
    width: auto;
    min-width: 42px;
    padding: 5px 6px;
  }

  /* Settings dropdown mobile */
  .settings-dropdown {
    max-width: 100%;
    padding: var(--spacing-sm);
  }

  .settings-section {
    padding: var(--spacing-sm) 0;
  }

  .settings-grid-2,
  .settings-grid-3,
  .settings-grid-4 {
    grid-template-columns: 1fr;
  }

  .settings-row {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .settings-item {
    flex: 1 1 100%;
  }

  .dropdown-accordion.show > .dropdown-content,
  .dropdown-content.show {
    padding: 8px;
    max-height: 70vh;
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  input[type="range"] {
    margin: 4px 0;
  }
}

@media (max-width: 360px) {
  .top-controls-card {
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
  }

  .top-row {
    gap: var(--spacing-sm);
  }

  .search-group,
  .top-row>.control-group.inline:first-child {
    gap: var(--spacing-sm);
  }

  .search-group input,
  .top-row>.control-group.inline:first-child input {
    padding: var(--spacing-sm) var(--spacing-lg);
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    font-size: 16px;
    /* Prevent iOS zoom */
  }

  .search-btn,
  .top-row>.control-group.inline:first-child .btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0;
  }

  .search-btn svg {
    width: 16px;
    height: 16px;
  }

  .control-group label {
    font-size: 0.6rem;
    min-width: auto;
  }

  input,
  select {
    padding: 4px 6px;
    font-size: 16px;
    /* Prevent iOS zoom */
    height: 26px;
    min-height: 26px;
    max-height: 26px;
  }

  .control-group.inline .btn {
    padding: 4px 6px;
    font-size: 0.65rem;
    height: 26px;
    min-height: 26px;
  }

  #galleryToggle {
    padding: 4px 5px;
    min-width: auto;
    font-size: 0.6rem;
    height: 26px;
  }

  #reverseSortBtn,
  #advancedToggle {
    width: 26px;
    min-width: 26px;
    height: 26px;
    padding: 4px;
  }
}