.category-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 12px 0 7px;
}
.category-switch button {
  border: 1px solid #bcc4cf;
  border-radius: 12px;
  background: #fff;
  color: #435066;
  padding: 11px 8px;
  font-weight: 800;
}
.category-switch button.active {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}
.category-browser {
  padding: 9px;
  border: 1px solid #d6d9df;
  border-radius: 14px;
  background: #fff;
}
.folder-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 7px;
  white-space: nowrap;
}
.folder-breadcrumb button {
  border: 0;
  border-radius: 8px;
  background: #edf0f4;
  color: #425067;
  padding: 6px 8px;
  font-size: 12px;
}
.folder-breadcrumb button.active {
  background: #fff0db;
  color: #8a5200;
  font-weight: 800;
}
.folder-breadcrumb span { color: #9aa3af; }
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 6px;
  max-height: 225px;
  overflow: auto;
}
.category-grid button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-align: left;
  border: 1px solid #d9dde4;
  border-radius: 10px;
  background: #f8f9fb;
  color: #233249;
  padding: 8px;
}
.category-grid button.active {
  border-color: var(--orange);
  background: #fff4e4;
}
.category-grid button b {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.category-grid button small {
  flex: none;
  color: #748095;
  font-size: 10px;
}
.category-leaf {
  grid-column: 1 / -1;
  padding: 7px;
  color: #68758a;
  font-size: 12px;
}
.filters { grid-template-columns: 2fr 1fr; margin: 9px 0; }

@media (max-width: 650px) {
  .category-switch { margin: 4px 0 3px; gap: 3px; }
  .category-switch button { padding: 6px 3px; border-radius: 7px; font-size: 10px; }
  .category-browser { padding: 4px; border-radius: 7px; }
  .folder-breadcrumb { gap: 2px; padding-bottom: 3px; }
  .folder-breadcrumb button { padding: 4px 5px; border-radius: 5px; font-size: 9px; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; max-height: 145px; }
  .category-grid button { padding: 4px 5px; border-radius: 6px; }
  .category-grid button b { font-size: 9.5px; line-height: 1.15; }
  .category-grid button small { font-size: 8px; }
  .filters input { grid-column: auto; }
}