:root {
  font: 16px/1.5 Arial, Helvetica, sans-serif;
  color: #fff;
  background: #08131c;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: #08131c;
}

button,
input { font: inherit; }

button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .72; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 32px;
  border-bottom: 1px solid #2e4757;
  background: #0d1d28;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand img {
  width: 39px;
  filter: brightness(0) invert(1);
}

.brand div { display: grid; }
.brand strong { font-size: 18px; }
.brand span,
.local-page { color: #b9cbd6; font-size: 13px; }

main {
  display: grid;
  place-items: start center;
  padding: 54px 20px;
}

.import-panel,
.success-panel {
  width: min(100%, 500px);
  padding: 34px;
  border: 1px solid #385666;
  background: #10222e;
}

.eyebrow {
  color: #58d5e7;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

h1 {
  margin: 7px 0 10px;
  font-size: 31px;
  line-height: 1.15;
  letter-spacing: 0;
}

.intro,
.success-panel p { margin: 0 0 26px; color: #c8d6de; }

form { display: grid; }

label {
  margin: 21px 0 8px;
  font-size: 13px;
  font-weight: 700;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.file-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  margin-top: 8px;
  padding: 13px;
  border: 1px solid #5ac9de;
  background: #132d3b;
  cursor: pointer;
}

.file-picker > span:last-child { display: grid; gap: 3px; }
.file-picker small { color: #afc6d1; font-weight: 400; }

.file-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #62d7e9;
  color: #62d7e9;
  font-size: 25px;
}

.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
}

.input-row input {
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  border: 1px solid #5a7180;
  border-right: 0;
  background: #08151e;
  color: white;
}

.input-row button {
  width: 68px;
  border: 1px solid #5a7180;
  background: #173345;
  color: white;
}

.security-note,
.address-result {
  display: grid;
  gap: 4px;
  margin-top: 20px;
  padding: 13px 14px;
  border-left: 3px solid #57d0df;
  background: #0a1922;
}

.security-note span,
.address-result span { color: #b7cad4; font-size: 13px; }

.address-result strong { overflow-wrap: anywhere; }

.primary {
  min-height: 50px;
  margin-top: 24px;
  border: 1px solid #67d5e4;
  background: #236eaa;
  color: white;
  font-weight: 700;
}

#notice {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #ff7168;
  background: #321c20;
  color: #ffc0bb;
  font-size: 13px;
}

#notice:empty { display: none; }

.success-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 25px;
  border: 2px solid #62d7e9;
  border-radius: 50%;
  color: #62d7e9;
  font-size: 31px;
  font-weight: 700;
}

.completion-message { margin-top: 24px !important; }

@media (max-width: 560px) {
  .site-header { padding: 0 18px; }
  .local-page { display: none; }
  main { padding: 24px 12px; }
  .import-panel,
  .success-panel { padding: 24px 20px; }
  h1 { font-size: 27px; }
}