.register-container { max-width: 700px; margin: 10px auto; padding:5px; width:97%; background: var(--background); } .welcome-header { text-align: center; margin-bottom: 1rem; } .welcome-header h1 { color: var(--branding); font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; } .welcome-header p { color: var(--light-text); font-size: 1rem; opacity:0.5; margin:8px; } .step-card { background: var(--card-bg); border-left: 2px dashed var(--branding); border-radius: 0px 10px 10px 0px; padding:8px; margin-bottom:16px; transition: all 0.3s ease; } .step-card:hover { transform: translateX(10px) translateY(-10px); box-shadow: 0 5px 15px rgba(0, 255, 224, 0.1); } .step-header { display: flex; align-items: center; margin-bottom: 1rem; } .pad-field { margin-left:17px; } .step-number { background: var(--card-bg); border:3px solid var(--simple-color); color: var(--branding); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 0.5rem; flex-shrink: 0; } .step-title { font-size: 18px; font-weight: 500; color: var(--light-text); margin: 0; } .r-btn-primary { background: var(--branding); color: #121212; border: none; border-radius: var(--radius); padding: 0.75rem; font-weight: 600; width: 100%; transition: all 0.3s ease; } .r-btn-primary:hover { background: #00e5cc; transform: translateY(-2px); } .r-btn-primary:active { transform: translateY(0); } .alert { border-radius: var(--radius); padding: 1rem; width:100%; height:100%; margin-bottom: 1.5rem; font-size: 0.9rem; } .alert-danger { background: rgba(255, 77, 77, 0.2); border: 2px dashed var(--danger); color: var(--light-text); padding: 1rem 1rem 2rem ; border-radius: 8px; max-width: 320px; margin:0 auto; } .alert-success { background: var(--background); border: 2px dashed var(--success); color: var(--light-text); padding: 1rem 1rem 2rem ; border-radius: 8px; max-width: 320px; margin:0 auto; backdrop-filter: blur(4px); } .policy-note { font-size: 0.8rem; color: rgba(224, 255, 255, 0.6); margin-top: 1rem; text-align: center; } .emoji { font-size: 1.2em; margin-right: 0.3em; vertical-align: middle; } #responseMessage { display: none; } .loading-spinner { display: none; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: var(--branding); animation: spin 1s ease-in-out infinite; margin-right: 10px; } @keyframes spin { to { transform: rotate(360deg); } } .account-warning { background-color:var(--card-bg); color: var(--light-text); opacity:0.7; border-left:3px solid var(--branding); padding:7px 15px; margin: 0.8rem 0; font-size: 0.7rem; border-radius: 8px; line-height: 1.4; } .account-warning strong { color: var(--branding); font-size: 0.95rem; } .account-warning .highlight { display: inline-block; margin-top: 0.5rem; font-weight: 500; color:var(--branding); }