:root {
        --green: #15803d;
        --green-dark: #0f5f2e;
        --text: #102018;
        --muted: #5d6f65;
        --line: #cfded4;
        --white: #ffffff;
      }

      * {
        box-sizing: border-box;
      }

      body {
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        color: var(--text);
        font-family: Arial, Helvetica, sans-serif;
        background-color: var(--white);
        background-image:
          linear-gradient(rgba(21, 128, 61, 0.09) 1px, transparent 1px),
          linear-gradient(90deg, rgba(21, 128, 61, 0.09) 1px, transparent 1px);
        background-size: 34px 34px;
      }

      main {
        width: min(100%, 420px);
      }

      .login-panel {
        width: 100%;
        padding: 36px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 18px 48px rgba(15, 95, 46, 0.14);
      }

      form {
        display: grid;
        gap: 18px;
      }

      input[type="password"],
      input[type="text"] {
        width: 100%;
        min-height: 48px;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 0 14px;
        color: var(--text);
        font: inherit;
        background: var(--white);
        outline: none;
        transition: border-color 160ms ease, box-shadow 160ms ease;
      }

      input:focus {
        border-color: var(--green);
        box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.16);
      }

      button {
        min-height: 50px;
        border: 0;
        border-radius: 8px;
        color: var(--white);
        background: var(--green);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
        transition: background 160ms ease, transform 160ms ease;
      }

      button:hover {
        background: var(--green-dark);
      }

      button:active {
        transform: translateY(1px);
      }

      .login-message {
        min-height: 34px;
        display: flex;
        align-items: center;
        margin: -4px 0 0;
        border: 0;
        border-radius: 8px;
        padding: 0 12px;
        color: #8a1f1f;
        background: rgba(184, 74, 74, 0.14);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
      }

      .login-message:empty {
        display: none;
      }

      @media (max-width: 460px) {
        body {
          padding: 16px;
          background-size: 28px 28px;
        }

        .login-panel {
          padding: 28px 22px;
        }
      }