body {
        margin: 2rem auto;
        max-width: 780px;
      }
      header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem 2rem;
        border-radius: 18px;
        background: linear-gradient(135deg, #edf1ff, #fdf7ff);
        box-shadow: 0 12px 40px rgb(15 23 42 / 8%);
      }
      header div strong {
        font-size: 1.1rem;
        letter-spacing: 0.02em;
      }
      header nav {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
      }
      header nav a {
        text-decoration: none;
        padding: 0.45rem 0.9rem;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.08);
        color: #0f172a;
        font-weight: 600;
        transition: background 0.2s ease, transform 0.2s ease;
      }
      header nav a:hover {
        background: rgba(37, 99, 235, 0.2);
        transform: translateY(-1px);
      }
      header nav a:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
      }
      .messages {
        margin: 1.5rem 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .message {
        padding: 0.75rem 1rem;
        border-radius: 10px;
        background: #e0f2fe;
        color: #0c4a6e;
      }
      .message.success {
        background: #dcfce7;
        color: #14532d;
      }
      .message.error {
        background: #fee2e2;
        color: #7f1d1d;
      }
      @media (prefers-color-scheme: dark) {
        body {
          color: #e2e8f0;
        }
        header {
          background: linear-gradient(135deg, #111827, #1f2937);
          box-shadow: 0 25px 50px rgb(0 0 0 / 0.35);
        }
        header nav a {
          background: rgba(148, 163, 184, 0.2);
          color: #f8fafc;
        }
        header nav a:hover {
          background: rgba(99, 102, 241, 0.3);
        }
      }