:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #182032;
  background: #f4f6fb;
}

* { box-sizing: border-box; }

body { margin: 0; }

.page-shell {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
  padding: 40px 0 64px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.page-head a { color: #3558d4; text-decoration: none; }
.page-head h1 { margin: 8px 0; font-size: clamp(28px, 4vw, 42px); }
.page-head p { margin: 0; color: #667085; }
.page-head .eyebrow { margin-top: 24px; color: #3558d4; font-size: 12px; font-weight: 700; letter-spacing: .12em; }

.status-pill {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid #d6daea;
  border-radius: 999px;
  background: #fff;
  color: #596174;
  font-size: 13px;
}

.status-pill.is-ready { border-color: #8fd2ad; background: #ecf9f1; color: #167246; }
.status-pill.is-blocked { border-color: #f1c58f; background: #fff7eb; color: #9a5b0b; }

.notice,
.catalog-panel,
.match-card,
.result-panel {
  border: 1px solid #e1e5ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(38, 50, 82, .06);
}

.notice {
  display: flex;
  gap: 12px;
  padding: 15px 18px;
  margin-bottom: 18px;
  color: #596174;
}

.notice strong { color: #293b80; white-space: nowrap; }
.catalog-panel { margin-bottom: 18px; padding: 22px; }
.catalog-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.catalog-panel h2 { margin: 4px 0 0; font-size: 22px; }
.catalog-panel .eyebrow { margin: 0; color: #3558d4; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.catalog-panel > header > p { margin: 0; color: #667085; text-align: right; }
.catalog-countries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.catalog-country { padding: 18px; border: 1px solid #e1e5ef; border-radius: 14px; background: #f8f9fc; }
.catalog-country h3 { margin: 0 0 4px; font-size: 18px; }
.catalog-country > small { color: #667085; }
.catalog-country ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.catalog-country li { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid #e5e8f0; }
.catalog-country li strong { font-size: 14px; }
.catalog-country li span { flex: 0 0 auto; color: #667085; font-size: 13px; }
.match-card { padding: 24px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.field { display: grid; gap: 8px; align-content: start; }
.field > span { font-size: 14px; font-weight: 700; }
.field small { color: #7a8294; line-height: 1.5; }

input,
select,
button {
  min-height: 44px;
  border-radius: 10px;
  font: inherit;
}

input,
select {
  width: 100%;
  border: 1px solid #cfd5e2;
  padding: 0 12px;
  background: #fff;
  color: #182032;
}

input:focus,
select:focus { outline: 3px solid rgba(53, 88, 212, .15); border-color: #3558d4; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 24px;
}

button {
  border: 0;
  padding: 0 20px;
  background: #3558d4;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

button.secondary { border: 1px solid #cfd5e2; background: #fff; color: #364152; }
button:disabled { cursor: not-allowed; opacity: .55; }

.result-panel { margin-top: 18px; padding: 22px; }
.result-panel > p { margin: 0; color: #667085; }
.result-group + .result-group { margin-top: 18px; }
.result-group h2 { margin: 0 0 10px; font-size: 18px; }
.result-item { padding: 12px 0; border-top: 1px solid #edf0f5; }
.result-item strong { display: block; }
.result-item small { color: #747d90; }
.error { color: #b42318 !important; }
.compatibility-link { display: inline-block; margin-top: 12px; color: #3558d4; }

@media (max-width: 820px) {
  .page-head { display: grid; }
  .form-grid { grid-template-columns: 1fr; }
  .notice { display: grid; }
  .catalog-panel > header { display: grid; }
  .catalog-panel > header > p { text-align: left; }
  .catalog-countries { grid-template-columns: 1fr; }
}