/* style.css — base */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--cyan-8);
  background: #fff;
}

.container{
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Topbar */
.topbar{
  padding-top: 16px;
  border-bottom: 1.41px solid rgba(229,231,235,.5);
  background: #fff;
}
.topbar__inner{
  display: flex;
  align-items: center;
  min-height: 42px;
}
.topbar__cta{
  display: inline-flex;
  align-items: center;
  gap: 12.52px;
}
.topbar__text{
  font-size: 21.92px;
  line-height: 20px;
  font-weight: 400;
}

/* Hero */
.page{ padding: 30px 0 0; }
.hero__card{
  background: rgba(245,247,248,.8);
  border: 1px solid var(--azure-84);
  border-radius: var(--radius-8);
  backdrop-filter: blur(2px);
  padding: 10px 16px;
  box-shadow: var(--shadow);
}
.hero__title{
  margin: 0;
  font-size: 29px;
  line-height: 35px;
  font-weight: 700;
}
.hero__subtitle{
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 20px;
  color: var(--gray-46);
}

/* Card/Form */
.card{
  padding: 12px 16px 16px;
  border-radius: 14px;
  border: 1px solid rgba(229,231,235,.8);
  background: #fff;
  box-shadow: var(--shadow);
}
.grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}
.field{ display: flex; flex-direction: column; gap: 8px; }

.label{
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
}
.label-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hint{
  font-size: 14px;
  line-height: 16px;
  color: #9CA3AF;
}

.input{
  height: 42px;
  width: 100%;
  padding: 10px 10px;
  border-radius: var(--radius-8);
  border: 1px solid var(--azure-84);
  background: var(--gray-97);
  color: var(--cyan-8);
  font-size: 16px;
  outline: none;
}
.input::placeholder{ color: #9CA3AF; }
.input:focus{
  border-color: rgba(53,158,255,.65);
  box-shadow: 0 0 0 4px rgba(53,158,255,.18);
}
.input:disabled{
  opacity: .75;
  cursor: not-allowed;
  background: rgba(241,245,249,.7);
}
.select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #1E1E1E 50%),
    linear-gradient(135deg, #1E1E1E 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.divider{
  margin: 10px 0 10px;
  border-top: 1px solid rgba(229,231,235,.8);
}
.section-title{
  font-size: 20px;
  line-height: 22px;
  font-weight: 700;
  margin: 0 0 10px;
}

/* Ações */
.actions{
  margin-top: 10px;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.w-full{ width: 100%; }

.safe{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--gray-46);
  font-size: 12px;
  line-height: 14px;
}
.safe__icon{ display: inline-flex; }
.safe__icon img{ width: 16px; height: 16px; display:block; }

/* Botões */
.btn{
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background: transparent;
  color: var(--cyan-8);
  font-weight: 700;
  user-select: none;
}
.btn:disabled{
  opacity: .6;
  cursor: not-allowed;
}
.btn--primary{ background: var(--primary); color: #fff; }
.btn--primary:hover{ filter: brightness(.98); }

.btn--md{
  height: 40px;
  padding: 0 24px;
  font-size: 16px;
  line-height: 20px;
}
.btn--lg{
  height: 44px;
  padding: 0 24px;
  font-size: 18px;
  line-height: 22px;
}

/* Footer */
.footer{ padding: 22px 0 18px; }
.footer__inner{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.footer__copy{
  color: var(--gray-46);
  font-size: 14px;
  line-height: 18px;
}
.footer__links{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 11.25px;
  line-height: 16px;
}
.link{ color: var(--cyan-45); text-decoration: underline; }
.dot{ color: var(--cyan-45); }

/* Responsivo */
@media (max-width: 1100px){
  .page{ padding-top: 28px; }
  .topbar__inner{ justify-content: flex-start; }
}
@media (max-width: 520px){
  .topbar__text{ font-size: 18px; line-height: 22px; }
  .btn--lg{ font-size: 16px; }
}