* { box-sizing: border-box;
    margin: 0; padding: 0;
    font-family: -apple-system, sans-serif; }
  body { background:whitesmoke;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px; }
  .card {background: rgb(30, 41, 59);
         color: white;
         border-radius: 16px; padding: 32px;
         max-width: 420px; width: 100%;
         box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
  h1 { font-size: 22px;
      margin-bottom: 6px; }
  p.sub { color: #64748b;
         font-size: 14px;
         margin-bottom: 24px; }
  input { width: 100%; 
         padding: 12px;
         border: 1px solid #e2e8f0;
         border-radius: 8px; font-size: 15px;
         margin-bottom: 12px; }
  button { width: 100%; padding: 12px;
          border: none; border-radius: 8px;
          font-size: 15px; font-weight: 600;
          cursor: pointer; }
  #signupBtn { background: #4f46e5;
              color: white; }
  #signupBtn:disabled { opacity: 0.6; }
  .error { color: #dc2626; 
          font-size: 13px;
          margin-top: 8px; 
          display: none; }
  .key-box { display: none;
            margin-top: 20px; padding: 20px;
            background: #eef2ff; border-radius: 10px;
            text-align: center; }
  .key-box .key { font-size: 22px;
                 font-weight: 700;
                 letter-spacing: 1px;
                 color: #4338ca; margin: 10px 0;
                 word-break: break-all; }
  .key-box .warning { font-size: 12px;
                     color: #b45309;
                     margin-bottom: 14px; }
  .key-actions { display: flex; gap: 8px;
                margin-top: 10px; }
  .key-actions button { font-size: 13px;
                       padding: 10px; }
  #copyBtn { background: #4f46e5;
            color: white; }
  #downloadBtn { background: white;
                color: #4f46e5;
                border: 1px solid #4f46e5; }
  #continueBtn { margin-top: 14px;
                background: #16a34a;
                color: white; }
  a.link { display: block; 
          text-align: center;
          margin-top: 16px; 
          font-size: 13px;
          color: #4f46e5; text-decoration: none; }