.number-catalog-page { background: #edf3ef; }
.number-catalog-shell { min-height: 700px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 72px; align-items: start; padding-block: 82px 94px; }
.number-catalog-intro { padding-top: 38px; }
.number-catalog-intro h1 { max-width: 570px; margin: 18px 0 22px; color: var(--ink); font-size: clamp(44px,5.2vw,72px); line-height: .98; letter-spacing: -3.8px; }
.number-catalog-intro > p { max-width: 550px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.number-catalog-steps { display: grid; gap: 0; margin: 42px 0 0; padding: 0; list-style: none; border-top: 1px solid #cddbd5; }
.number-catalog-steps li { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 13px; padding: 15px 0; border-bottom: 1px solid #cddbd5; }
.number-catalog-steps li > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--ink); background: var(--lime); font-size: 11px; font-weight: 900; }
.number-catalog-steps b { font-size: 13px; }

.number-picker { min-width: 0; padding: 34px; border: 1px solid #d4e0dc; border-radius: 26px; background: white; box-shadow: 0 28px 80px rgba(7,27,41,.11); }
.number-picker-heading > span, .number-selection-bar span, .number-card span { color: #648f11; font-size: 9px; font-weight: 900; letter-spacing: 1.4px; }
.number-picker-heading h2 { margin: 9px 0 7px; font-size: 28px; letter-spacing: -1.2px; }
.number-picker-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.number-search-stage { margin-top: 27px; }
.number-search-field, .number-filter-field { display: block; }
.number-search-field > span, .number-filter-field > span { display: block; margin-bottom: 8px; color: #52666f; font-size: 11px; font-weight: 800; }
.number-search-field > div { min-height: 57px; display: flex; align-items: center; gap: 11px; padding: 0 16px; border: 1px solid #b9ccc5; border-radius: 14px; background: #fbfdfc; }
.number-search-field > div:focus-within, .number-filter-field input:focus { border-color: var(--teal); outline: 4px solid rgba(22,165,140,.11); }
.number-search-field svg { flex: 0 0 auto; width: 20px; fill: none; stroke: #6f858e; stroke-width: 1.8; stroke-linecap: round; }
.number-search-field input, .number-filter-field input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }
.number-search-field input { min-width: 0; font-size: 15px; }
.number-search-field input::placeholder, .number-filter-field input::placeholder { color: #92a29f; }
.number-localities { display: grid; gap: 7px; margin-top: 10px; }
.number-locality-option { width: 100%; min-height: 64px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid #e0e8e5; border-radius: 13px; color: var(--ink); background: white; text-align: left; cursor: pointer; }
.number-locality-option:hover, .number-locality-option:focus-visible { border-color: #99c93d; background: #f7fce9; outline: 0; }
.number-locality-pin { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--ink); font-size: 12px; font-weight: 850; }
.number-locality-option > span:nth-child(2) { min-width: 0; }
.number-locality-option strong, .number-locality-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.number-locality-option strong { font-size: 13px; }
.number-locality-option small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.number-locality-option i { color: #6a8088; font-style: normal; }

.number-results-stage { margin-top: 25px; }
.number-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px; border-radius: 14px; background: #eef5f1; }
.number-selection-bar > div { min-width: 0; }
.number-selection-bar span, .number-selection-bar strong { display: block; }
.number-selection-bar strong { margin-top: 4px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.number-selection-bar button { flex: 0 0 auto; border: 0; color: #347300; background: transparent; font-size: 11px; font-weight: 850; cursor: pointer; }
.number-filter-field { margin-top: 19px; }
.number-filter-field input { height: 46px; padding: 0 13px; border: 1px solid #cbd8d3; border-radius: 11px; }
.number-results-head { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 11px; }
.number-results-head strong { font-size: 13px; }
.number-results-head span { color: var(--muted); font-size: 10px; }
.number-results { max-height: 420px; display: grid; gap: 8px; overflow: auto; padding-right: 3px; scrollbar-color: #a9bbb4 transparent; scrollbar-width: thin; }
.number-card { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 13px 12px 17px; border: 1px solid #dde7e3; border-radius: 14px; background: #fff; }
.number-card > div { min-width: 0; }
.number-card span, .number-card strong { display: block; }
.number-card strong { margin-top: 5px; font-size: 18px; letter-spacing: -.5px; }
.number-card .button { min-height: 40px; padding-inline: 16px; font-size: 11px; }
.number-status { min-height: 18px; margin: 18px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.number-status.loading { color: #3e6800; }
.number-status.success { color: #13735f; }
.number-status.error { color: var(--danger); }
.number-catalog-note { padding: 27px 0; border-top: 1px solid #d7e2de; background: white; }
.number-catalog-note .section-shell { display: grid; grid-template-columns: 230px 1fr; gap: 35px; align-items: start; }
.number-catalog-note b { font-size: 14px; }
.number-catalog-note p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.number-catalog-note a { color: #347300; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .number-catalog-shell { grid-template-columns: 1fr; gap: 34px; padding-block: 58px 70px; }
  .number-catalog-intro { padding-top: 0; }
  .number-catalog-intro h1 { max-width: 680px; }
  .number-catalog-steps { grid-template-columns: repeat(3,1fr); gap: 9px; border: 0; }
  .number-catalog-steps li { grid-template-columns: 30px 1fr; padding: 12px; border: 1px solid #cddbd5; border-radius: 12px; }
}

@media (max-width: 680px) {
  .number-catalog-shell { width: min(100% - 28px,1180px); padding-block: 43px 52px; }
  .number-catalog-intro h1 { font-size: 42px; letter-spacing: -2.5px; }
  .number-catalog-intro > p { font-size: 14px; }
  .number-catalog-steps { grid-template-columns: 1fr; }
  .number-picker { padding: 22px 17px; border-radius: 20px; }
  .number-picker-heading h2 { font-size: 24px; }
  .number-selection-bar { align-items: flex-start; }
  .number-selection-bar strong { max-width: 210px; white-space: normal; }
  .number-card { min-height: 72px; padding-left: 13px; }
  .number-card strong { font-size: 16px; }
  .number-card .button { padding-inline: 13px; }
  .number-catalog-note .section-shell { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 430px) {
  .number-card { align-items: stretch; flex-direction: column; gap: 11px; }
  .number-card .button { width: 100%; }
}