:root {
        --bg: #000000;
        --bg-card: #141414;
        --border: #2a2a2a;
        --text: #f2f2f2;
        --text-dim: #9a9a9a;
        --accent: #0a84ff;
        --danger: #ff453a;
        --success: #32d74b;
      }

      * { box-sizing: border-box; }

      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        line-height: 1.5;
      }

      .page {
        max-width: 480px;
        margin: 0 auto;
        padding: 60px 20px 80px;
      }

      .card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 32px;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 20px;
      }

      .logo {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 10px;
        font-size: 18px;
      }

      .eyebrow {
        display: block;
        color: var(--text-dim);
        font-size: 13px;
        margin-bottom: 2px;
      }

      h1 {
        font-size: 22px;
        letter-spacing: -0.02em;
        margin: 0;
      }

      .intro {
        color: var(--text-dim);
        font-size: 15px;
        margin: 0 0 24px;
      }

      .message {
        border-radius: 10px;
        padding: 14px 16px;
        font-size: 14px;
        margin-bottom: 20px;
        border: 1px solid var(--border);
      }

      .message.success {
        border-color: var(--success);
        color: var(--success);
      }

      .message.error {
        border-color: var(--danger);
        color: var(--danger);
      }

      .message ul {
        margin: 8px 0 0;
        padding-left: 18px;
      }

      .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .field small {
          display: block;
          color: var(--text-dim);
          font-size: 12px;
          margin-top: 6px;
      }

      .field .field-warning {
          color: var(--danger);
          font-size: 12px;
          font-weight: 600;
      }

      .field-warning[hidden] {
          display: none;
      }

      input.invalid {
          border: 2px solid var(--danger);
          background: #2a1010;
      }

      label {
        display: block;
        font-size: 14px;
        margin-bottom: 6px;
      }

      input[type="text"],
      input[type="email"] {
        width: 100%;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 11px 12px;
        color: var(--text);
        font-size: 15px;
        font-family: inherit;
      }

      input[type="text"]:focus,
      input[type="email"]:focus {
        outline: none;
        border-color: var(--accent);
      }

      .honeypot {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }

      .checkbox {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13px;
        color: var(--text-dim);
        margin-bottom: 24px;
      }

      .checkbox input {
        margin-top: 3px;
        flex-shrink: 0;
      }

      .checkbox a {
        color: var(--accent);
        text-decoration: none;
      }

      .checkbox a:hover { text-decoration: underline; }

      button {
        width: 100%;
        background: var(--accent);
        color: #fff;
        border: none;
        margin-top: 10px;
        border-radius: 10px;
        padding: 13px 20px;
        font-size: 15px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
      }

      button:hover { background: #3395ff; }

      .footer-note {
        text-align: center;
        color: var(--text-dim);
        font-size: 13px;
        margin-top: 20px;
      }

      @media (max-width: 480px) {
        .row { grid-template-columns: 1fr; }
        .card { padding: 24px; }
      }