.catalog-screen {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
}

.catalog-header {
  min-height: var(--size-header);
  box-sizing: border-box;
  padding: var(--space-sm) var(--size-gutter) var(--space-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.catalog-header h2 { margin: 0; font-size: var(--font-size-screen-title); line-height: 1.4; font-weight: var(--font-weight-bold); }
.catalog-header p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-label); line-height: 1.33; }

.catalog-close {
  flex: none;
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  border: var(--size-line-width) solid var(--color-line);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--size-icon-nav);
  cursor: pointer;
}

.catalog-mini-plan {
  flex: none;
  box-sizing: border-box;
  padding: var(--space-md) var(--size-gutter) var(--space-sm);
  background: var(--color-surface);
  border-top: var(--size-line-width) solid var(--color-line);
  border-bottom: var(--size-line-width) solid var(--color-line);
}

.mini-plan-content { width: min(100%, var(--size-catalog-mini-width)); margin: 0 auto; }
.mini-row { margin: 0 0 var(--space-sm); }
.mini-row:last-of-type { margin-bottom: var(--space-xs); }
.mini-row-label { min-height: var(--space-lg); color: var(--color-text-muted); font-size: var(--font-size-caption); line-height: 1.45; }
.mini-track { position: relative; display: flex; align-items: stretch; width: 100%; height: var(--size-catalog-mini-upper); overflow: hidden; }
.mini-row--lower .mini-track { height: var(--size-catalog-mini-lower); }
.mini-place, .mini-rest, .mini-insertion {
  box-sizing: border-box;
  flex: none;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: var(--size-line-width) solid var(--color-line);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: 1.2;
}
.mini-place + .mini-place, .mini-rest { margin-left: calc(-1 * var(--size-line-width)); }
.mini-place.kind-cabinet { background: var(--color-tile-cabinet); }
.mini-place.kind-appliance { background: var(--color-tile-appliance); }
.mini-place.kind-filler { background: var(--color-tile-filler); }
.mini-place.kind-gap { border: var(--pattern-remainder-border); background: transparent; }
.mini-rest { background: var(--color-bg); }
.mini-insertion {
  min-width: var(--size-border-selected);
  flex-direction: column;
  gap: var(--space-xs);
  border: var(--size-border-selected) dashed var(--color-accent);
  background: var(--color-surface);
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}
.mini-insertion strong { font-weight: inherit; }
.mini-insertion small { font-size: var(--font-size-catalog-status); line-height: 1.2; }
.mini-insertion.is-unmeasured { color: var(--color-disabled-text); border-color: var(--color-disabled-text); }
.mini-plan-ruler { text-align: right; color: var(--color-text-muted); font-size: var(--font-size-caption); line-height: 1.3; }
.catalog-insertion-note { margin: var(--space-sm) auto 0; max-width: 100%; color: var(--color-text-muted); font-size: var(--font-size-label); line-height: 1.33; }
.catalog-mini-plan.is-unmeasured p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-label); }

.catalog-tools { flex: none; padding: var(--space-sm) var(--size-gutter) var(--space-xs); display: flex; flex-direction: column; gap: var(--space-sm); }
.catalog-legend { min-height: var(--size-worktop-band); display: flex; align-items: center; gap: var(--space-md); overflow-x: auto; white-space: nowrap; }
.catalog-legend span { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-text-muted); font-size: var(--font-size-caption); line-height: 1.27; }
.catalog-legend i { width: var(--size-legend-width); height: var(--size-legend-height); box-sizing: border-box; border: var(--size-line-width) solid var(--color-line); }
.legend-cabinet { background: var(--color-tile-cabinet); }
.legend-appliance { background: var(--color-tile-appliance); }
.legend-filler { background: var(--color-tile-filler); }
.legend-gap { border: var(--pattern-remainder-border) !important; background: transparent; }
.catalog-groups { display: flex; gap: var(--space-sm); overflow-x: auto; padding: 0 0 var(--space-xs); scrollbar-width: thin; }
.catalog-group {
  flex: none;
  min-height: var(--size-touch-min);
  padding: 0 var(--space-md);
  border: var(--size-line-width) solid var(--color-line);
  border-radius: var(--size-radius-field);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-body);
  cursor: pointer;
}
.catalog-group.is-active { border: var(--size-border-selected) solid var(--color-accent); font-weight: var(--font-weight-bold); }
.catalog-group:disabled { color: var(--color-disabled-text); background: var(--color-disabled-bg); cursor: not-allowed; }
.catalog-width { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-text-muted); font-size: var(--font-size-label); }
.catalog-width input, .catalog-custom select {
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--size-touch-min);
  padding: var(--space-sm);
  border: var(--size-line-width) solid var(--color-line);
  border-radius: var(--size-radius-field);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-body);
}
.catalog-width input { width: clamp(5em, 28vw, 8em); }

.catalog-grid {
  flex: 1 0 auto;
  min-height: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, var(--size-catalog-card-width));
  grid-auto-rows: var(--size-catalog-card-height);
  gap: var(--space-sm);
  justify-content: center;
  align-content: start;
  padding: var(--space-sm) var(--size-gutter) var(--space-md);
  border-top: var(--size-line-width) solid var(--color-line);
}

.catalog-card {
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border: var(--size-line-width) solid var(--color-line);
  border-radius: var(--size-radius-field);
  background: var(--color-tile-cabinet);
  color: var(--color-text);
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
}
.catalog-card.kind-filler { background: var(--color-tile-filler); }
.catalog-card.kind-gap { border: var(--pattern-remainder-border); background: var(--color-surface); }
.catalog-card:disabled { border: var(--size-line-width) solid var(--color-disabled-line); background: var(--color-disabled-bg); color: var(--color-disabled-text); cursor: not-allowed; }
.catalog-card-name { width: 100%; max-height: calc(var(--size-touch-min) / 2 + var(--space-xs)); overflow: hidden; font-size: var(--font-size-caption); line-height: 1.18; color: var(--color-text-muted); }
.catalog-card-width { max-width: 100%; overflow: hidden; font-size: var(--font-size-catalog-number); line-height: 1.17; font-weight: var(--font-weight-bold); }
.catalog-card-status { width: 100%; max-height: calc(var(--size-touch-min) / 2 + var(--space-xs)); overflow: hidden; font-size: var(--font-size-catalog-status); line-height: 1.2; color: var(--color-text-muted); }
.catalog-card:disabled .catalog-card-name, .catalog-card:disabled .catalog-card-status { color: var(--color-disabled-text); }
.catalog-more { align-items: center; justify-content: center; gap: var(--space-xs); background: var(--color-surface); }
.catalog-more-arrow { font-size: var(--size-icon-nav); line-height: 1; }
.catalog-more span:last-child { font-size: var(--font-size-body); line-height: 1.23; }

.catalog-custom { flex: 1 0 auto; padding: var(--space-md) var(--size-gutter); display: flex; flex-direction: column; gap: var(--space-sm); align-items: stretch; border-top: var(--size-line-width) solid var(--color-line); }
.catalog-custom > label { color: var(--color-text-muted); font-size: var(--font-size-label); }
.catalog-custom select { width: 100%; }
.catalog-custom .catalog-card { width: min(100%, var(--size-catalog-card-width)); height: var(--size-catalog-card-height); }
.catalog-empty-group { margin: var(--space-sm) var(--size-gutter); color: var(--color-text-muted); font-size: var(--font-size-label); }