:root {

  --gipa-gold: #c5a04d;

  --gipa-gold-dark: #a8843a;

  --gipa-action: #6a9fd4;

  --gipa-action-dark: #5588bd;

  --gipa-action-soft: #e8f1fa;

  --gipa-ink: #2c2c2c;

  --gipa-muted: #7a7a7a;

  --gipa-line: #e0e0e0;

  --gipa-bg: #f5f5f5;

  --gipa-white: #ffffff;

  --font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html,

body {

  margin: 0;

  min-height: 100%;

}



body.public-body {

  font-family: var(--font);

  color: var(--gipa-ink);

  min-height: 100vh;

  min-height: 100dvh;

  background: var(--gipa-bg);

}



.material-symbols-outlined {

  font-family: "Material Symbols Outlined";

  font-weight: normal;

  font-style: normal;

  font-size: 1.2rem;

  line-height: 1;

  letter-spacing: normal;

  text-transform: none;

  display: inline-block;

  white-space: nowrap;

  word-wrap: normal;

  direction: ltr;

  font-feature-settings: "liga";

  -webkit-font-smoothing: antialiased;

  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;

  user-select: none;

  vertical-align: middle;

}



.public-wrap {

  min-height: 100vh;

  min-height: 100dvh;

  display: grid;

  place-items: center;

  padding: 1.5rem 1rem;

}



.public-card {

  width: min(420px, 100%);

  background: var(--gipa-white);

  border: 1px solid var(--gipa-line);

  border-radius: 10px;

  padding: 2.25rem 1.75rem 1.85rem;

  box-shadow: none;

}



.public-brand {

  text-align: center;

  margin-bottom: 1.85rem;

}



.public-logo {

  margin: 0;

  font-size: clamp(2.5rem, 8vw, 3.25rem);

  font-weight: 500;

  letter-spacing: 0.12em;

  color: var(--gipa-gold);

  line-height: 1;

}



.public-tagline {

  margin: 0.85rem auto 0;

  max-width: 19rem;

  font-size: 0.92rem;

  font-weight: 500;

  letter-spacing: 0.05em;

  line-height: 1.45;

  color: #4a4a4a;

  text-transform: uppercase;

}



.public-error {

  margin: 0 0 1rem;

  padding: 0.65rem 0.75rem;

  background: #faf0f0;

  border: 1px solid #efd0d0;

  border-radius: 6px;

  color: #8a2f2f;

  font-size: 0.88rem;

}



.public-ok {

  margin: 0 0 1rem;

  padding: 0.65rem 0.75rem;

  background: #f3f8ef;

  border: 1px solid #d5e6c8;

  border-radius: 6px;

  color: #3f6b28;

  font-size: 0.88rem;

}



.public-panel[hidden] {

  display: none !important;

}



.public-switch {

  margin: 1.15rem 0 0;

  text-align: center;

  font-size: 0.88rem;

  color: var(--gipa-muted);

}



.public-switch__btn {

  appearance: none;

  border: 0;

  background: transparent;

  color: var(--gipa-action-dark);

  font: inherit;

  font-weight: 700;

  cursor: pointer;

  padding: 0;

  text-decoration: underline;

  text-underline-offset: 2px;

}



.public-switch__btn:hover {

  color: var(--gipa-action);

}



.public-callback-msg {

  margin: 0;

  font-size: 0.95rem;

  line-height: 1.45;

  color: var(--gipa-ink);

  text-align: center;

}



a.public-switch__btn {

  display: inline-block;

  text-decoration: underline;

  text-underline-offset: 2px;

  color: var(--gipa-action-dark);

  font-weight: 700;

}



.public-form {

  display: grid;

  gap: 1rem;

}



.public-field {

  display: grid;

  gap: 0.4rem;

}



.public-field__label {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  font-size: 0.86rem;

  font-weight: 600;

  color: #555;

}



.public-field__label .material-symbols-outlined {

  font-size: 1.15rem;

  color: var(--gipa-gold);

}



.public-form input {

  width: 100%;

  height: 2.55rem;

  border: 1px solid var(--gipa-line);

  border-radius: 6px;

  padding: 0 0.85rem;

  font: inherit;

  font-weight: 400;

  color: var(--gipa-ink);

  background: #fafafa;

  transition: border-color 0.12s ease, background-color 0.12s ease;

}



.public-form input::placeholder {

  color: #b0b0b0;

}



.public-form input:hover {

  border-color: #cfcfcf;

}



.public-form input:focus {

  outline: none;

  border-color: var(--gipa-action);

  background: var(--gipa-white);

}



.public-form input:-webkit-autofill,

.public-form input:-webkit-autofill:hover,

.public-form input:-webkit-autofill:focus {

  -webkit-text-fill-color: var(--gipa-ink);

  box-shadow: 0 0 0 1000px #fafafa inset;

  transition: background-color 9999s ease-out;

}



.public-submit {

  margin-top: 0.35rem;

  height: 2.7rem;

  border: 0;

  border-radius: 6px;

  background: var(--gipa-action);

  color: var(--gipa-white);

  font: inherit;

  font-weight: 700;

  font-size: 0.95rem;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.45rem;

  width: 100%;

}



.public-submit .material-symbols-outlined {

  font-size: 1.25rem;

  color: inherit;

}



.public-submit:hover {

  background: var(--gipa-action-dark);

}



.public-submit:active {

  transform: translateY(1px);

}



@media (max-width: 420px) {

  .public-wrap {

    padding: 0.85rem 0.65rem;

    align-items: flex-start;

    padding-top: max(0.85rem, env(safe-area-inset-top));

  }



  .public-card {

    padding: 1.5rem 1.1rem 1.35rem;

    border-radius: 8px;

  }



  .public-logo {

    font-size: clamp(2.1rem, 12vw, 2.75rem);

    letter-spacing: 0.1em;

  }



  .public-tagline {

    font-size: 0.78rem;

    max-width: 100%;

  }



  .public-form input {

    font-size: 1rem;

  }

}