* {{ margin: 0; padding: 0; box-sizing: border-box; }} body {{ font-family: 'Inter', sans-serif; background: radial-gradient(circle at top, #2C2F33, #23272A); color: #ffffff; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; }} .container {{ width: 100%; max-width: 480px; text-align: center; background: rgba(64, 68, 75, 0.95); padding: 40px; border-radius: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 50px rgba(114, 137, 218, 0.1); backdrop-filter: blur(10px); animation: slideUp 0.6s ease-out; }} h1 {{ font-size: 2.5em; font-weight: 700; margin-bottom: 24px; background: linear-gradient(135deg, #fff 0%, #d7d9db 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; }} .greeting {{ font-size: 1.8em; color: #7289DA; margin-bottom: 24px; font-weight: 600; animation: pulse 2s infinite; text-shadow: 0 0 20px rgba(114, 137, 218, 0.3); }} .greeting.owner {{ color: #FFD700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.4); }} .user-info {{ background: rgba(35, 39, 42, 0.5); padding: 20px; border-radius: 12px; margin: 20px 0; backdrop-filter: blur(5px); }} .user-info p {{ font-size: 1.1em; margin: 10px 0; color: #B9BBBE; }} .user-info strong {{ color: #ffffff; font-weight: 500; }} .roles {{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 24px 0; }} .role-tag {{ background: linear-gradient(135deg, #7289DA 0%, #5B6EAE 100%); padding: 8px 16px; border-radius: 20px; font-size: 0.9em; font-weight: 500; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: all 0.2s ease; }} .role-tag:hover {{ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); }} .message {{ color: #B9BBBE; margin: 24px 0; font-size: 1.1em; padding: 10px; background: rgba(35, 39, 42, 0.3); border-radius: 8px; }} .button {{ display: inline-block; background: linear-gradient(135deg, #7289DA 0%, #5B6EAE 100%); color: white; border: none; border-radius: 12px; padding: 16px 32px; text-decoration: none; font-size: 1.1em; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }} .button:hover {{ transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); background: linear-gradient(135deg, #5B6EAE 0%, #4E5D9C 100%); }} .button:active {{ transform: translateY(1px); }} @keyframes slideUp {{ from {{ opacity: 0; transform: translateY(20px); }} to {{ opacity: 1; transform: translateY(0); }} }} @keyframes pulse {{ 0% {{ opacity: 1; }} 50% {{ opacity: 0.8; }} 100% {{ opacity: 1; }} }} @media (max-width: 480px) {{ .container {{ padding: 24px; margin: 16px; }} h1 {{ font-size: 2em; }} .greeting {{ font-size: 1.5em; }} }}