* { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: "Plus Jakarta Sans", sans-serif;
      background:
        radial-gradient(circle at 12% 10%, rgba(255, 173, 173, 0.34) 0%, transparent 31%),
        radial-gradient(circle at 88% 10%, rgba(255, 210, 194, 0.3) 0%, transparent 31%),
        linear-gradient(180deg, #fffafa 0%, #fff2f2 54%, #ffefef 100%);
      color: #2f2323;
      overflow-x: hidden;
      background-attachment: fixed;
      scroll-padding-top: 112px;
    }
    .shell {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 112px clamp(16px, 3.5vw, 48px) 0;
      min-height: 100vh;
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
    }
    .topbar { --menu-accent: #cf3f3f; --menu-panel-bg: #fff5f6; --menu-panel-border: #e4aaaa; --menu-panel-text: #3a2627; --menu-drawer-bg: #ffeef0; --menu-drawer-text: #3a2426; --menu-drawer-subtext: #5a3a3d; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 12px; border: 1px solid #e4aaaa; border-bottom: 2px solid #cf3f3f; background: linear-gradient(135deg, #fff6f6 0%, #ffecec 52%, #fff2f2 100%); position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1200; }
    .top-left { display: flex; align-items: center; gap: 112px; min-width: 0; flex: 1; }
    .brand { display: flex; align-items: center; gap: 6px; text-decoration: none; }
    .brand img { width: 74px; height: 46px; display: block; object-fit: contain; }
    .brand-text { font-family: "Space Grotesk", sans-serif; font-size: 1.16rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; color: #b02f2f; text-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 2px 8px rgba(108, 35, 35, 0.2); white-space: nowrap; }
    nav { display: flex; align-items: center; }
    .menu-list { list-style: none; display: flex; align-items: center; gap: 16px; }
    .menu-item { position: relative; }
    .menu-link { text-decoration: none; color: #232c34; font-size: .68rem; font-weight: 700; display: inline-block; padding: 4px 0; }
    .menu-link::after { content: " \25BE"; font-size: .54rem; color: #49535c; }
    .submenu { list-style: none; position: absolute; top: 100%; left: 0; min-width: 250px; background: linear-gradient(180deg, #fff7f7 0%, #ffeaea 100%); border-top: 2px solid #cf3f3f; box-shadow: 0 14px 24px rgba(96, 35, 35, .16); display: none; z-index: 50; }
    .submenu a { display: block; padding: 14px 16px; text-decoration: none; font-weight: 700; color: #1d2630; font-size: .92rem; }
    .submenu a:hover { background: linear-gradient(180deg, #ffeeee 0%, #ffdede 100%); }
    .menu-item:hover .submenu, .menu-item:focus-within .submenu { display: block; }
    .top-actions { display: flex; align-items: center; gap: 8px; }
    .divider { width: 1px; height: 20px; background: #a75b5b; opacity: .65; }
    .menu-btn { border: 0; background: transparent; padding: 2px 4px; display: inline-flex; align-items: center; justify-content: center; }
    .menu-btn { border: 1px solid #c77a7a; border-radius: 2px; padding: 6px; }
    .icon { width: 16px; height: 16px; stroke: #2d353c; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    .login-wrap {
      width: min(520px, 100%);
      margin: auto;
      background: linear-gradient(160deg, rgba(255,255,255,0.95), rgba(255,240,240,0.88));
      border: 1px solid #e8b7b7;
      border-radius: 16px;
      box-shadow: 0 20px 34px rgba(112, 46, 46, 0.14);
      padding: clamp(20px, 3vw, 34px);
    }
    .login-wrap h1 {
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(1.7rem, 3vw, 2.4rem);
      color: #9a2d2d;
      margin-bottom: 8px;
    }
    .login-wrap p {
      color: #5f4747;
      margin-bottom: 18px;
      line-height: 1.5;
    }
    .field { margin-bottom: 14px; }
    .field label {
      display: block;
      font-weight: 700;
      margin-bottom: 6px;
      color: #412e2e;
      font-size: 0.95rem;
    }
    .field input {
      width: 100%;
      border: 1px solid #d9a9a9;
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 1rem;
      color: #2f2323;
      background: #fff;
      outline: none;
    }
    .field input:focus {
      border-color: #cf3f3f;
      box-shadow: 0 0 0 3px rgba(207,63,63,0.14);
    }
    .password-wrap {
      position: relative;
    }
    .password-wrap input {
      padding-right: 50px;
    }
    .password-toggle {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #8c6060;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 180ms ease, color 180ms ease;
    }
    .password-toggle:hover {
      background: #fff1f1;
      color: #b02f2f;
    }
    .password-toggle:focus-visible {
      outline: 2px solid rgba(207, 63, 63, 0.35);
      outline-offset: 2px;
    }
    .password-toggle svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .password-toggle .icon-eye-off {
      display: none;
    }
    .password-toggle.is-visible .icon-eye {
      display: none;
    }
    .password-toggle.is-visible .icon-eye-off {
      display: block;
    }
    .field[hidden] { display: none; }
    .login-row {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      margin: 8px 0 18px;
      font-size: 0.92rem;
    }
    .login-row a { color: #9f2d2d; text-decoration: none; font-weight: 700; }
    .login-row a:hover { text-decoration: underline; }
    .btn-login {
      width: 100%;
      border: 0;
      border-radius: 10px;
      background: linear-gradient(135deg, #cf3f3f 0%, #a92828 100%);
      color: #fff;
      font-weight: 800;
      font-size: 1rem;
      padding: 12px 16px;
      cursor: pointer;
      box-shadow: 0 10px 18px rgba(140, 32, 32, 0.28);
    }
    .btn-login:hover { filter: brightness(1.03); }
    .auth-actions {
      display: block;
      margin-top: 10px;
    }
    .btn-register {
      border: 0;
      background: transparent;
      color: #9f2d2d;
      font-weight: 700;
      font-size: 0.88rem;
      padding: 0;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .btn-register:hover { color: #7f2222; }
    .auth-note {
      margin: 0 0 18px;
      font-size: 0.9rem;
      color: #5f4747;
    }
    /* The note now sits above the fields, so it must take no space at all
       when empty - otherwise every visit shows a permanent gap. */
    .auth-note:empty { display: none; }
    /* With a message present it becomes a card instead of a thin line of small
       text, which was easy to miss. */
    .auth-note.is-error,
    .auth-note.is-success {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      padding: 15px 17px;
      border-radius: 14px;
      font-size: 1.02rem;
      font-weight: 700;
      line-height: 1.55;
      text-align: center;
    }
    /* The icon is a ::before so setNote() can keep using textContent. */
    .auth-note.is-error::before,
    .auth-note.is-success::before {
      content: "";
      flex: 0 0 auto;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
    .auth-note.is-error {
      background: #fff3f3;
      border: 1px solid #eeb4b4;
      box-shadow: 0 10px 24px rgba(150, 40, 40, 0.12);
    }
    .auth-note.is-error::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23c0392b'/%3E%3Cpath d='M12 6.2v7.1' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.4' r='1.5' fill='%23fff'/%3E%3C/svg%3E");
    }
    .auth-note.is-success {
      background: #f0faf3;
      border: 1px solid #b4ddc2;
      box-shadow: 0 10px 24px rgba(31, 106, 58, 0.10);
    }
    .auth-note.is-success::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232c6e3f'/%3E%3Cpath d='M7.6 12.4l3 3 5.8-6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    /* setNote('') clears the class before every action, so re-adding it on the
       next message restarts these animations without any JS help. */
    @media (prefers-reduced-motion: no-preference) {
      .auth-note.is-error,
      .auth-note.is-success {
        animation: authNoteIn 280ms ease-out;
      }
      .auth-note.is-error::before {
        animation: authNoteGlow 1500ms ease-out 150ms 2;
      }
    }
    @keyframes authNoteIn {
      from { opacity: 0; transform: translateY(-7px) scale(0.98); }
      to { opacity: 1; transform: none; }
    }
    @keyframes authNoteGlow {
      from { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.55); }
      to { box-shadow: 0 0 0 14px rgba(192, 57, 43, 0); }
    }
    body.login-blocked-lock {
      overflow: hidden;
    }
    body.login-blocked-lock > *:not(.login-blocked-overlay) {
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
    }
    .login-blocked-overlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(35, 14, 14, 0.58);
      backdrop-filter: blur(5px);
      z-index: 3000;
    }
    .login-blocked-overlay.is-visible {
      display: flex;
    }
    .login-blocked-card {
      width: min(540px, 100%);
      padding: 30px;
      border-radius: 24px;
      background: linear-gradient(180deg, #fffdfd 0%, #fff2f2 100%);
      border: 1px solid #efc3c3;
      box-shadow: 0 30px 80px rgba(113, 33, 33, 0.26);
      text-align: center;
    }
    .login-blocked-card h2 {
      margin-bottom: 12px;
      color: #8e2b2b;
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(1.5rem, 2.8vw, 2rem);
    }
    .login-blocked-card p {
      margin: 0;
      color: #654949;
      line-height: 1.7;
      font-size: 1rem;
    }
    .password-hint {
      margin-top: 8px;
      display: grid;
      gap: 6px;
      padding: 8px 10px;
      border: 1px solid rgba(231, 201, 201, 0.7);
      border-radius: 10px;
      background: rgba(255, 250, 250, 0.78);
    }
    .password-hint[hidden] {
      display: none;
    }
    .password-strength {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 6px;
    }
    .password-strength-bar {
      height: 5px;
      border-radius: 999px;
      background: linear-gradient(180deg, #efe3e3 0%, #e3d3d3 100%);
      border: 1px solid rgba(153, 111, 111, 0.12);
      transform-origin: center;
      transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }
    .password-strength-bar.is-on {
      transform: translateY(-0.5px) scaleY(1.04);
      border-color: transparent;
      box-shadow: 0 3px 8px rgba(120, 53, 53, 0.12);
    }
    .password-strength-bar.tone-red {
      background: linear-gradient(90deg, #c62828 0%, #ef5350 100%);
    }
    .password-strength-bar.tone-amber {
      background: linear-gradient(90deg, #d98208 0%, #f2b94b 100%);
    }
    .password-strength-bar.tone-green {
      background: linear-gradient(90deg, #0d8a52 0%, #2ec97f 100%);
    }
    .password-strength-label {
      color: #705757;
      font-size: 0.76rem;
      font-weight: 700;
      line-height: 1.3;
      transition: color 180ms ease;
    }
    .password-strength-label.tone-red {
      color: #b13434;
    }
    .password-strength-label.tone-amber {
      color: #a45d00;
    }
    .password-strength-label.tone-green {
      color: #157446;
    }
    .auth-mode-note {
      margin: 0 0 14px;
      color: #7a5b5b;
      font-size: 0.9rem;
      line-height: 1.5;
    }
    .auth-secondary {
      margin-top: 12px;
      text-align: center;
      color: #7a5b5b;
      font-size: 0.84rem;
      line-height: 1.5;
    }
    .auth-secondary[hidden] {
      display: none;
    }
    .auth-secondary-text {
      margin-right: 6px;
    }
    .auth-divider {
      display: none;
      align-items: center;
      gap: 14px;
      margin: 22px 0 14px;
      color: #8d7a7a;
      font-size: 0.84rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .auth-divider.is-visible {
      display: flex;
    }
    .auth-divider::before,
    .auth-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #e4d4d4;
    }
    .google-wrap {
      display: none;
      justify-content: center;
    }
    .google-wrap.is-visible {
      display: flex;
    }
    /* The Google button sits in a frame of ours; the button itself is left
     * alone.
     *
     * Not a stylistic choice. Google's branding guidelines allow three
     * background colours - #FFFFFF, #F2F2F2 and #131314 - and forbid a brand
     * colour, so this site's red is not available. The artwork is out of
     * reach anyway: renderButton draws into an iframe, and no rule here
     * crosses that boundary.
     *
     * What is ours is the box around it. It carries the form's border colour,
     * its 10px radius and a shadow in the same family as the Sign In button,
     * so the row reads as part of the form rather than as something pasted
     * into it.
     */
    .google-button-host {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Google renders the large button at 40px and the Sign In button above
         measures 46.4px, so 2px each side plus the border lands on 46 - close
         enough that the two read as one column. Measured in the browser, not
         guessed. */
      padding: 2px 0;
      border: 1px solid #d9a9a9;
      border-radius: 10px;
      background: #fff;
      overflow: hidden;
      box-shadow: 0 6px 14px rgba(140, 32, 32, 0.10);
      transition: border-color 120ms ease;
    }
    .google-button-host:hover {
      border-color: #cf3f3f;
    }
    /* The same frame, for the browser where the library never loaded. */
    .google-fallback {
      display: none;
      width: 100%;
      border: 1px solid #d9a9a9;
      border-radius: 10px;
      background: #fff;
      color: #413535;
      font-weight: 700;
      font-size: 0.95rem;
      padding: 13px 14px;
      cursor: pointer;
      box-shadow: 0 6px 14px rgba(140, 32, 32, 0.10);
    }
    .google-fallback.is-visible {
      display: block;
    }

    .site-footer {
      margin: auto calc(-1 * clamp(16px, 3.5vw, 48px)) 0;
      padding: 22px 20px;
      border-top: 1px solid #334764;
      background: linear-gradient(180deg, #1d2b42 0%, #1a2639 100%);
      color: #97a8bd;
      text-align: center;
      font-size: 0.96rem;
    }

    @media (max-width: 760px) {
      .shell { padding-top: 104px; }
      .top-left { flex-direction: column; align-items: flex-start; gap: 8px; }
      .brand img { width: 88px; height: auto; }
      .brand-text { font-size: 0.98rem; }
      .menu-list { gap: 12px; }
      .menu-link::after { content: ""; }
      .submenu { position: static; display: none; box-shadow: none; border: 1px solid #c5d3dc; margin-top: 6px; }
      .login-wrap { border-radius: 12px; }
    }
    /* The reset code, as six boxes.
     *
     * It was one input with "Enter the 6-digit code from email" as its
     * placeholder - a sentence telling the reader what the shape of the field
     * already says once the field has that shape. Six boxes need no
     * instruction, and they are what every other site that mails a code
     * looks like.
     *
     * A box turns green when it holds a digit. That is all it means: the page
     * cannot know whether a digit is the RIGHT one, and must not - a per-digit
     * answer would turn a million possibilities into sixty tries. The whole
     * code is checked in one request once all six are in.
     */
    .code-label {
      display: block;
      font-weight: 700;
      margin-bottom: 6px;
      color: #412e2e;
      font-size: 0.95rem;
    }
    .code-boxes {
      display: flex;
      gap: 8px;
    }
    .code-box {
      /* width:auto beats the width:100% that .field input sets, so the six
         share the row rather than each claiming all of it. */
      width: auto;
      flex: 1 1 0;
      min-width: 0;
      text-align: center;
      font-size: 1.35rem;
      font-weight: 800;
      padding: 12px 0;
      border: 1px solid #d9a9a9;
      border-radius: 10px;
      background: #fff;
      color: #2f2323;
      outline: none;
      transition: border-color 120ms ease, background-color 120ms ease;
    }
    .code-box:focus {
      border-color: #cf3f3f;
      box-shadow: 0 0 0 3px rgba(207, 63, 63, 0.14);
    }
    .code-box.is-filled {
      border-color: #2e9e5b;
      background: #f2fbf6;
      color: #1f6f41;
    }
    /* Every box at once, because the answer is about the code and not about
       any one digit. */
    .code-box.is-error {
      border-color: #cf3f3f;
      background: #fff2f2;
      color: #9f2d2d;
    }
    @media (max-width: 420px) {
      .code-boxes { gap: 6px; }
      .code-box { font-size: 1.15rem; padding: 10px 0; }
    }