:root {
    --border: #444;
    --accent: #0f9ed5;
    --bg-body: #000;
    --bg-card: #1a1a1a;
    --text: #e6e6e6;
    --text-dim: #999;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg-body);
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
  }
  /* The empty space above the group is 1 part and below it 6 parts, so the group sits well above
     the vertical center, close to the top of the page. */
  body::before { content: ''; flex: 1 1 0; }
  body::after  { content: ''; flex: 6 1 0; }
  .hero {
    display: block;
    width: 180px;            /* the picture's own size (180 x 76) */
    height: auto;
    margin: 0 auto 28px;
  }
  form {
    position: relative;
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  input {
    width: 100%;
    height: 40px;
    padding: 8px 10px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0;
  }
  input::placeholder { color: var(--text-dim); }
  input:focus { border-color: var(--accent); outline: none; }
  button {
    height: 40px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0;
    cursor: pointer;
  }
  button:hover:not(:disabled) { border-color: var(--accent); }
  button:disabled { opacity: 0.5; cursor: default; }
  .pw-wrap { position: relative; }
  .pw-wrap input { padding-right: 44px; }
  .pw-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 40px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pw-toggle:hover:not(:disabled) { color: var(--text); }
  .pw-toggle svg { width: 20px; height: 20px; }
  /* the message hangs below the button without taking space, so the visible group stays exactly centered */
  .error { position: absolute; top: 100%; left: 0; right: 0; margin-top: 10px; font-size: 13px; color: #f44336; text-align: center; }
  .pw-slash { display: none; }
  .pw-toggle.shown .pw-slash { display: block; }