.postcode-input-row { display: flex; gap: 10px; margin-bottom: 16px; }
.postcode-input-row .input { flex: 1; }

.postcode-result { margin-top: 16px; }
.postcode-result-header {
  padding: 10px 0; font-size: 14px; color: var(--text-muted);
  border-bottom: 1px solid var(--border); margin-bottom: 12px;
}

.postcode-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }

.postcode-card {
  padding: 14px 16px; background: var(--bg); border-radius: var(--radius);
  border: 1px solid var(--border); transition: border-color 0.2s;
  box-sizing: border-box; min-width: 0; overflow: hidden;
}
.postcode-card:hover { border-color: #0066ff; }

.postcode-card-row {
  display: flex; align-items: center; padding: 4px 0; min-width: 0;
}
.postcode-card-row + .postcode-card-row { border-top: 1px solid var(--border); }

.postcode-label {
  display: inline-block; width: 48px; font-size: 12px; color: var(--text-muted);
  font-weight: 600; flex-shrink: 0;
}
.postcode-value {
  font-size: 14px; font-weight: 600; color: var(--text); word-break: break-all;
  overflow-wrap: break-word; min-width: 0; flex: 1;
}
.postcode-highlight { color: #0066ff; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; }

.postcode-card mark {
  background: rgba(0, 102, 255, 0.12); color: #0066ff;
  padding: 1px 2px; border-radius: 2px;
}

.postcode-empty {
  margin-top: 16px; padding: 40px 16px; text-align: center;
  color: var(--text-muted); font-size: 14px;
  background: var(--bg); border-radius: var(--radius);
  border: 1px solid var(--border);
}

.postcode-error {
  margin-top: 16px; padding: 14px 16px; background: #fff3f3;
  border: 1px solid #ffcccc; border-radius: var(--radius);
  color: #cc3333; font-size: 14px;
}

@media (max-width: 480px) {
  .postcode-input-row { flex-wrap: wrap; }
}