@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

    :root {
      font-family: 'DM Sans', Arial, sans-serif;
      color: #101317;
      background: #fff;
      font-size: 16px
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column
    }

    a {
      color: inherit;
      text-decoration: none
    }

    a:focus-visible {
      outline: 2px solid #bd2732;
      outline-offset: 5px
    }

    header {
      border-bottom: 1px solid #d5d9dc
    }

    .wrap {
      max-width: 1440px;
      margin: auto;
      padding: 0 clamp(24px, 5vw, 88px)
    }

    .nav {
      min-height: 88px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 13px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -.07em
    }

    .brand-logo {
      width: 49px;
      height: 49px;
      border-radius: 6px;
      overflow: hidden;
      flex: none
    }

    .brand-logo img {
      display: block;
      width: 66px;
      transform: translate(-8px, -1px)
    }

    .brand small {
      display: block;
      font-family: 'DM Sans', sans-serif;
      font-size: 10px;
      letter-spacing: .19em;
      text-transform: uppercase;
      font-weight: 600;
      color: #525b61;
      margin-left: 3px
    }

    .back {
      font-size: 14px;
      font-weight: 700;
      border: 1px solid #aeb5b9;
      padding: 12px 20px;
      border-radius: 100px
    }

    .back:hover {
      border-color: #bd2732;
      color: #bd2732
    }

    main {
      flex: 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 90px 24px;
      background: radial-gradient(circle at 85% 15%, rgba(189, 39, 50, .07), transparent 33%)
    }

    .panel {
      width: min(100%, 650px);
      border: 1px solid #d5d9dc;
      border-radius: 6px;
      padding: clamp(32px, 6vw, 64px);
      background: #fff;
      box-shadow: 0 24px 65px rgba(13, 19, 23, .06)
    }

    .eyebrow {
      text-align: center;
      display: block;
      color: #bd2732;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: .16em;
      text-transform: uppercase

    }

    .panel h1 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(44px, 7vw, 70px);
      font-weight: 500;
      letter-spacing: -.065em;
      line-height: 1.02;
      margin: 25px 0
    }

    .panel p {
      color: #525b61;
      font-size: 17px;
      line-height: 1.65;
      margin: 0 0 26px
    }

    .notice {
      border-left: 3px solid #bd2732;
      background: #f6f7f8;
      padding: 18px 20px;
      color: #293136;
      line-height: 1.55
    }

    .home {
      display: inline-block;
      margin-top: 30px;
      color: #bd2732;
      font-weight: 700
    }

    .home:hover {
      text-decoration: underline
    }

    footer {
      border-top: 1px solid #d5d9dc;
      padding: 24px;
      text-align: center;
      color: #586167;
      font-size: 13px
    }

    @media(max-width:600px) {
      .nav {
        min-height: 72px
      }

      .brand {
        font-size: 19px
      }

      .brand small {
        display: none
      }

      .back {
        padding: 10px 13px;
        font-size: 13px
      }

      main {
        padding: 55px 24px
      }
    }

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

    .theme-toggle {
      font: 700 13px 'DM Sans', Arial, sans-serif;
      border: 1px solid #aeb5b9;
      border-radius: 100px;
      background: transparent;
      color: inherit;
      padding: 12px 15px;
      cursor: pointer
    }

    .theme-toggle:hover {
      border-color: #bd2732;
      color: #bd2732
    }

    html[data-theme="dark"] {
      color-scheme: dark;
      color: #f0f2ef;
      background: #0b0d12
    }

    html[data-theme="dark"] header,
    html[data-theme="dark"] footer {
      border-color: #323842
    }

    html[data-theme="dark"] main {
      background: radial-gradient(circle at 85% 15%, rgba(189, 39, 50, .14), transparent 33%)
    }

    html[data-theme="dark"] .panel {
      background: #141820;
      border-color: #323842;
      box-shadow: none
    }

    html[data-theme="dark"] .panel p,
    html[data-theme="dark"] .brand small,
    html[data-theme="dark"] footer {
      color: #a5abb0
    }

    html[data-theme="dark"] .notice {
      background: #1d2229;
      color: #d9ddde
    }

    html[data-theme="dark"] .back,
    html[data-theme="dark"] .theme-toggle {
      border-color: #5b626b
    }

    @media(max-width:600px) {
      .nav-actions {
        gap: 7px
      }

      .theme-toggle {
        padding: 10px 11px
      }
    }

    a:focus-visible,
    .field-group input:focus-visible,
    .login-button:focus-visible {
      outline-color: #ed4b55
    }

    .back:hover,
    .theme-toggle:hover {
      border-color: #ed4b55;
      color: #ed4b55
    }

    .eyebrow,
    .home,
    .forgot-password a {
      color: #ed4b55
    }

    .login-form {
      margin-top: 30px
    }

    .field-group {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-bottom: 20px
    }

    .field-group label {
      font-size: 14px;
      font-weight: 700
    }

    .field-group input {
      width: 100%;
      min-height: 50px;
      border: 1px solid #d5d9dc;
      border-radius: 6px;
      padding: 12px 14px;
      background: #fff;
      color: #101317;
      font: inherit
    }

    .field-group input:focus-visible {
      outline: 2px solid rgba(237, 75, 85, .35);
      outline-offset: 2px;
      border-color: #ed4b55
    }

    .login-button {
      width: 50%;
      min-height: 50px;
      margin-top: 4px;
      margin-left: auto;  /* Centraliza na horizontal */
      margin-right: auto; /* Centraliza na horizontal */
      display: block;      /* Necessário para aplicar as margens auto em elementos de bloco */
      border: 1px solid #ed4b55;
      border-radius: 100px;
      background: #ed4b55;
      color: #ffffff;
      font-weight: 700;
}

    .login-button:hover {
      filter: brightness(1.08)
    }

    .forgot-password {
      margin-top: 20px;
      text-align: center
    }

    .forgot-password a {
      font-size: 14px;
      font-weight: 700
    }

    .forgot-password a:hover {
      text-decoration: underline
    }

    html[data-theme="dark"] .field-group input {
      border-color: #323842;
      background: #0b0d12;
      color: #f0f2ef
    }

    html[data-theme="dark"] .panel h1,
    html[data-theme="dark"] .field-group label {
      color: #f0f2ef
    }

  .panel-subtitle {
  text-align: center; /* Centraliza apenas este texto */
  display: block;      /* Garante que o elemento ocupe a largura total para poder centralizar */
  margin-top: 8px;     /* Espaçamento opcional acima do texto */
  margin-bottom: 20px; /* Espaçamento opcional abaixo do texto */
 
}