:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4f6f8;
  color: #17202a;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

html { background:#f4f6f8; }

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  background:
    radial-gradient(circle at 10% 0%, rgba(60, 116, 255, .12), transparent 28rem),
    #f4f6f8;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.shell {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 72px 0 36px;
}

.hero { max-width: 760px; }

.eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4d67a8;
}

h1 {
  margin: 10px 0 14px;
  font-size: clamp(36px, 6vw, 64px);
  line-height: .98;
  letter-spacing: -.04em;
}

h2 {
  margin: 5px 0 0;
  font-size: 26px;
  letter-spacing: -.02em;
}

.lead {
  max-width: 700px;
  margin: 0 0 30px;
  font-size: 18px;
  line-height: 1.55;
  color: #5b6470;
}

.search-card,
.panel,
.summary-card,
.permit-card {
  background: rgba(255,255,255,.96);
  border: 1px solid #e3e7ec;
  box-shadow: 0 16px 50px rgba(26, 39, 55, .07);
  border-radius: 22px;
}

.search-card { padding: 22px; }

.search-card label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 800;
}

.search-row {
  display: flex;
  gap: 10px;
}

input {
  min-width: 0;
  min-height: 52px;
  flex: 1;
  border: 1px solid #cbd2da;
  border-radius: 14px;
  padding: 15px 16px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  outline: none;
  background:#fff;
  color:#17202a;
}

input:focus {
  border-color: #5879d8;
  box-shadow: 0 0 0 4px rgba(88, 121, 216, .12);
}

button {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  padding: 0 24px;
  background: #17202a;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

button:hover { opacity: .9; }
button:disabled { opacity: .5; cursor: wait; }

.hint,
.muted {
  color: #7a8490;
  font-size: 13px;
}

.hint { margin-top: 10px; }

.panel {
  margin-top: 22px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.panel.error {
  border-color: #f0c7c7;
  color: #9c2e2e;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #dce2ea;
  border-top-color: #17202a;
  border-radius: 50%;
  animation: spin .85s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }

#result { margin-top: 28px; }

.summary-card { padding: 24px; }

.summary-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.plate {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .04em;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
}

.badge.ok { background: #e8f7ef; color: #21734c; }
.badge.no { background: #fff0f0; color: #a23a3a; }

.active-grid,
.permit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.cell {
  padding: 14px;
  background: #f7f9fb;
  border-radius: 14px;
}

.cell .label {
  margin-bottom: 6px;
  font-size: 12px;
  color: #7a8490;
}

.cell .value {
  font-size: 15px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin: 34px 0 15px;
}

.history {
  display: grid;
  gap: 12px;
}

.permit-card {
  padding: 18px;
  box-shadow: none;
}

.permit-card .topline {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.permit-number {
  font-size: 18px;
  font-weight: 900;
}

.status {
  font-weight: 800;
  font-size: 13px;
}

footer {
  padding: 34px 4px calc(8px + env(safe-area-inset-bottom));
  color: #8a939e;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .shell {
    width:100%;
    padding: 28px 12px calc(24px + env(safe-area-inset-bottom));
  }

  .hero { max-width:none; }

  h1 {
    font-size: 38px;
    line-height: 1.02;
    margin-top:8px;
  }

  .lead {
    font-size:16px;
    margin-bottom:20px;
  }

  .search-card {
    padding:16px;
    border-radius:18px;
  }

  .search-row { flex-direction: column; }

  input, button {
    width:100%;
    min-height:54px;
  }

  .active-grid,
  .permit-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:8px;
    margin-top:14px;
  }

  .summary-top,
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .summary-card {
    padding:16px;
    border-radius:18px;
  }

  .plate { font-size:28px; }

  .badge {
    width:100%;
    justify-content:center;
    min-height:44px;
  }

  .permit-card {
    padding:14px;
    border-radius:16px;
  }

  .permit-card .topline {
    align-items:flex-start;
    flex-direction:column;
  }

  .cell { padding:12px; }

  .section-head {
    gap:6px;
    margin-top:26px;
  }

  .panel {
    padding:16px;
    border-radius:18px;
  }
}

@media (max-width: 430px) {
  h1 { font-size:32px; }

  .active-grid,
  .permit-grid { grid-template-columns: 1fr; }

  .eyebrow { font-size:11px; }

  input { font-size:20px; }
}