*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:            #0d1117;
      --bg-2:          #161b22;
      --bg-3:          #1c2128;
      --accent:        #21d4a0;
      --accent-dim:    rgba(33, 212, 160, 0.10);
      --accent-border: rgba(33, 212, 160, 0.28);
      --text:          #c9d1d9;
      --text-muted:    #8b949e;
      --text-dim:      #484f58;
      --border:        #21262d;
      --error:         #f85149;
      --radius-sm:     8px;
      --radius:        12px;
      --radius-lg:     18px;
      --font-display:  "Space Grotesk", sans-serif;
      --font-body:     "Inter", sans-serif;
      --font-mono:     "JetBrains Mono", monospace;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 16px 72px;
    }

    /* ── Header ── */
    header {
      text-align: center;
      padding: 40px 20px 28px;
      max-width: 480px;
      width: 100%;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      border-radius: 999px;
      padding: 4px 12px 4px 9px;
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--accent);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 28px;
    }

    .badge-dot {
      width: 6px; height: 6px;
      background: var(--accent);
      border-radius: 50%;
      box-shadow: 0 0 6px var(--accent);
      animation: blink 2.4s ease-in-out infinite;
    }

    @keyframes blink {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.25; }
    }

    h1 {
      font-family: var(--font-display);
      font-size: clamp(24px, 5vw, 34px);
      font-weight: 700;
      color: #e6edf3;
      letter-spacing: -0.025em;
      line-height: 1.2;
      margin-bottom: 12px;
    }

    h1 em {
      font-style: normal;
      color: var(--accent);
    }

    .sub {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.8;
      font-weight: 400;
    }

    /* ── Separator ── */
    .sep {
      width: 1px;
      height: 32px;
      background: linear-gradient(to bottom, transparent, var(--border), transparent);
      margin: 28px auto;
    }

    /* ── Card ── */
    .card {
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px 24px;
      width: 100%;
      max-width: 480px;
    }

    /* ── Form ── */
    .form-group { margin-bottom: 14px; }

    label {
      display: block;
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-dim);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .input-wrap { position: relative; }

    .input-icon {
      position: absolute;
      left: 11px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 13px;
      pointer-events: none;
      opacity: 0.45;
      line-height: 1;
    }

    input {
      width: 100%;
      background: var(--bg-3);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 13px;
      padding: 10px 12px 10px 34px;
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    input::placeholder { color: var(--text-dim); }

    input:focus {
      border-color: var(--accent-border);
      box-shadow: 0 0 0 3px rgba(33,212,160,0.07);
    }

    input.error {
      border-color: rgba(248,81,73,0.5);
    }

    .field-err {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--error);
      margin-top: 4px;
      display: none;
      letter-spacing: 0.04em;
    }

    .field-err.show { display: block; }

    /* ── Button ── */
    .btn {
      margin-top: 6px;
      width: 100%;
      background: var(--accent);
      color: #0d1117;
      border: none;
      border-radius: var(--radius-sm);
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 700;
      padding: 12px;
      cursor: pointer;
      letter-spacing: -0.01em;
      transition: opacity 0.15s, transform 0.12s;
      box-shadow: 0 0 18px rgba(33,212,160,0.18);
    }

    .btn:hover   { opacity: 0.88; transform: translateY(-1px); }
    .btn:active  { transform: translateY(0); opacity: 1; }

    /* ── Trust ── */
    .trust {
      display: flex;
      justify-content: center;
      gap: 18px;
      flex-wrap: wrap;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }

    .trust-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--text-dim);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .t-dot {
      width: 4px; height: 4px;
      background: var(--accent);
      border-radius: 50%;
      opacity: 0.55;
    }

    /* ── Footer ── */
    footer {
      margin-top: 44px;
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-dim);
      letter-spacing: 0.05em;
      text-align: center;
    }

    @media (max-width: 440px) {
      .card { padding: 22px 16px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .badge-dot { animation: none; }
    }