:root {
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:#213d43;
  background:#f3f8f8;
  font-synthesis:none;
  --accent:#0faaaa;
  --bright:#20d2d2;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

.topbar {
  height:88px;
  background:white;
  border-bottom:1px solid #e0ecec;
  padding:0 max(24px,calc((100% - 1080px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand {
  text-decoration:none;
  color:#087e80;
  font-size:34px;
  font-weight:800;
  letter-spacing:-1.8px;
  line-height:.9;
}

.brand span {
  display:block;
  font-size:9px;
  letter-spacing:4px;
  margin-top:9px;
}

.environment {
  font-size:12px;
  color:#48666b;
}

.environment span {
  color:var(--accent);
  margin-right:6px;
}

main {
  max-width:800px;
  margin:52px auto 0;
  padding:0 24px;
}

.eyebrow {
  font-size:11px;
  font-weight:750;
  letter-spacing:1.8px;
  color:#087d80;
  margin:0 0 12px;
}

h1 {
  font-size:36px;
  letter-spacing:-1.2px;
  margin:0 0 12px;
  line-height:1.2;
}

.subtitle {
  font-size:16px;
  color:#587177;
  margin:0;
}

.notice {
  display:flex;
  gap:14px;
  background:#e3f6f5;
  border:1px solid #bde7e5;
  border-radius:12px;
  padding:18px 20px;
  margin:28px 0;
  color:#285b5e;
  font-size:13px;
  line-height:1.6;
}

.notice-icon {
  flex-shrink:0;
  border:1.5px solid #138a8e;
  border-radius:50%;
  width:21px;
  height:21px;
  text-align:center;
  font-weight:700;
  line-height:19px;
  margin-top:2px;
}

.notice p {
  margin:3px 0 0;
}

.card {
  background:white;
  border:1px solid #dfebeb;
  border-radius:18px;
  box-shadow:0 10px 35px #153c4307;
  overflow:hidden;
}

.card-heading {
  padding:28px 32px;
  border-bottom:1px solid #edf2f2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}

.card-heading .eyebrow {
  margin-bottom:7px;
  font-size:10px;
}

h2 {
  font-size:23px;
  letter-spacing:-.5px;
  margin:0;
}

.pill {
  font-size:11px;
  border:1px solid #dae7e7;
  border-radius:30px;
  padding:7px 11px;
  color:#587177;
  white-space:nowrap;
}

form {
  padding:28px 32px;
}

.fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.field {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}

.full {
  grid-column:1/-1;
}

label {
  font-size:13px;
  font-weight:650;
}

label span {
  color:#087d80;
}

.optional {
  color:#697e83;
  font-weight:400;
}

input,textarea {
  font:inherit;
  font-size:14px;
  width:100%;
  min-width:0;
  border:1px solid #cadbde;
  background:#fff;
  border-radius:8px;
  padding:13px 14px;
  color:#213d43;
  outline:none;
}

input {
  min-height:48px;
}

input::placeholder,textarea::placeholder {
  color:#72868b;
}

textarea {
  resize:vertical;
}

input:focus,textarea:focus {
  border-color:#0faaaa;
  box-shadow:0 0 0 3px #20d2d226;
}

.money-input {
  position:relative;
}

.money-input>span {
  position:absolute;
  left:15px;
  top:15px;
  color:#527076;
  font-size:14px;
}

.money-input input {
  padding-left:46px;
  font-size:18px;
  font-weight:600;
}

small {
  font-size:12px;
  color:#647b80;
  line-height:1.5;
}

.form-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-top:1px solid #edf2f2;
  margin-top:26px;
  padding-top:24px;
}

button {
  border:0;
  border-radius:8px;
  background:var(--bright);
  color:#103c41;
  min-height:48px;
  padding:0 23px;
  font:inherit;
  font-size:14px;
  font-weight:750;
  cursor:pointer;
}

button span {
  margin-left:25px;
}

button:hover {
  background:#16c2c2;
}

button:focus-visible {
  outline:3px solid #087d80;
  outline-offset:3px;
}

button:disabled {
  opacity:.5;
  cursor:not-allowed;
}

.form-message {
  border-radius:8px;
  background:#e3f6f5;
  color:#285b5e;
  padding:15px;
  line-height:1.6;
  font-size:14px;
  margin:20px 0 0;
}

footer {
  text-align:center;
  color:#647b80;
  font-size:12px;
  padding:25px 0 32px;
}

footer span {
  margin:0 8px;
}

@media(max-width:560px) {
  .topbar {
    height:76px;
    padding:0 20px;
  }
  .brand {
    font-size:29px;
  }
  .environment {
    font-size:10px;
    max-width:120px;
    line-height:1.5;
  }
  main {
    margin-top:32px;
    padding:0 16px;
  }
  h1 {
    font-size:29px;
  }
  .subtitle {
    font-size:14px;
    line-height:1.6;
  }
  .notice {
    padding:15px;
    gap:10px;
  }
  .card-heading {
    padding:22px 20px;
  }
  .pill {
    font-size:10px;
    padding:6px 8px;
  }
  form {
    padding:22px 20px;
  }
  .fields {
    grid-template-columns:1fr;
    gap:20px;
  }
  input,textarea {
    font-size:16px;
  }
  .form-footer {
    align-items:stretch;
    flex-direction:column;
  }
  button {
    width:100%;
    min-height:50px;
  }
  .card-heading .eyebrow {
    letter-spacing:1px;
  }
}

/* Payment result: long provider identifiers must not widen the page. */
[hidden] { display: none !important; }
.result-card { margin-top: 24px; }
.result-content { padding: 24px 32px; }
.result-note { color: #587177; font-size: 14px; line-height: 1.6; }
.result-details { margin: 24px 0 0; }
.result-details > div { padding: 12px 0; border-top: 1px solid #edf2f2; }
.result-details dt { color: #587177; font-size: 12px; }
.result-details dd { margin: 6px 0 0; font-size: 14px; overflow-wrap: anywhere; }
#pix-code { overflow-wrap: anywhere; word-break: break-all; min-height: 110px; }
#pix-qr { display: block; max-width: 100%; width: 260px; height: auto; margin: 16px auto; }
#copy-message { margin: 0; font-size: 13px; line-height: 1.5; color: #285b5e; }
.form-message.error { background: #fff0ef; color: #8c2923; border: 1px solid #f2ceca; }
.result-card:focus-visible { outline: 2px solid #0faaaa; outline-offset: 3px; }
@media (max-width: 560px) {
  .result-content { padding: 20px; }
  #copy-pix { min-height: 50px; }
}