* {
  box-sizing: border-box;
}

:root {
  --bg: #eff4ee;
  --panel: #ffffff;
  --ink: #18201a;
  --muted: #5d6d60;
  --line: #d7dfd8;
  --brand: #1f7a57;
  --accent: #c44f46;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code,
pre {
  font-family: Consolas, "Courier New", monospace;
}

input {
  font: inherit;
}

.flash {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--panel);
}

.flash.error {
  background: #f9ecea;
  border-color: #efc7c2;
}

.search-shell {
  padding: 24px 16px 10px;
}

.search-frame,
.results-shell {
  width: min(980px, 100%);
  margin: 0 auto;
}

.search-frame {
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.search-frame h1 {
  margin: 0 0 12px;
  font-size: 32px;
}

.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 12px;
}

.search-form input {
  min-width: 0;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 16px;
  background: #f9fbf9;
}

.search-form button {
  height: 52px;
  border: 0;
  border-radius: 8px;
  background: var(--brand);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.search-form button:hover {
  background: #186445;
}

.results-shell {
  padding: 0 16px 20px;
}

.result-count {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 14px;
}

.result-stack {
  display: grid;
  gap: 14px;
}

.result-card {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.result-media,
.result-media img,
.media-fallback {
  width: 156px;
  height: 156px;
}

.result-media img {
  display: block;
  object-fit: cover;
  border-radius: 8px;
  background: #e6ece7;
}

.media-fallback {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #edf1ee;
  color: var(--muted);
  border: 1px dashed var(--line);
}

.result-main {
  min-width: 0;
}

.card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #edf4ee;
  border-color: #cfe2d5;
  color: #15533b;
}

.result-main h3 {
  margin: 12px 0 0;
  font-size: 22px;
  line-height: 1.3;
}

.price-line {
  margin: 12px 0 0;
  color: var(--accent);
  font-weight: 700;
}

.number-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.number-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid #edf0ec;
}

.number-factory {
  color: var(--muted);
}

.number-value,
.uri-line {
  word-break: break-all;
}

.param-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.param-strip span {
  padding: 6px 10px;
  border-radius: 8px;
  background: #f3f6f3;
  border: 1px solid #dde5de;
}

.uri-line {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.empty-state {
  padding: 28px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.empty-state h2 {
  margin: 0 0 8px;
}

.empty-state p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 960px) {
  .result-card,
  .number-row {
    grid-template-columns: 1fr;
  }

  .result-media,
  .result-media img,
  .media-fallback {
    width: 100%;
    height: 240px;
  }
}

@media (max-width: 640px) {
  .search-shell {
    padding: 16px 12px 8px;
  }

  .search-frame {
    padding: 16px;
  }

  .search-form {
    grid-template-columns: 1fr;
  }
}