#denied { background: linear-gradient(135deg, var(--color-soft-cream) 0%, var(--color-light-gray) 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; .container { text-align: center; max-width: 600px; } .lock-container { position: relative; margin-bottom: 2rem; animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .lock { width: 120px; height: 140px; margin: 0 auto; position: relative; } .lock-body { width: 120px; height: 80px; background: var(--color-primary); border-radius: 12px; position: absolute; bottom: 0; box-shadow: 0 10px 30px rgba(122, 155, 142, 0.3); } .lock-shackle { width: 60px; height: 60px; border: 12px solid var(--color-primary); border-radius: 50% 50% 0 0; border-bottom: none; position: absolute; top: 0; left: 30px; animation: shake 0.5s ease-in-out; } @keyframes shake { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } } .lock-keyhole { width: 8px; height: 20px; background: var(--color-soft-cream); border-radius: 4px 4px 0 0; position: absolute; bottom: 25px; left: 56px; } .lock-keyhole::after { content: ''; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid var(--color-soft-cream); position: absolute; top: 20px; left: -4px; } .error-code { font-size: 6rem; font-weight: 700; color: var(--color-primary); line-height: 1; margin-bottom: 1rem; letter-spacing: -0.02em; opacity: 0; animation: fadeIn 0.5s ease forwards 0.3s; } @keyframes fadeIn { to { opacity: 1; } } .error-title { font-size: 2rem; color: var(--color-text-primary); margin-bottom: 1rem; font-weight: 600; letter-spacing: -0.02em; opacity: 0; animation: fadeIn 0.5s ease forwards 0.5s; } .error-message { font-size: 1.1rem; color: var(--color-text-secondary); margin-bottom: 2.5rem; line-height: 1.6; opacity: 0; animation: fadeIn 0.5s ease forwards 0.7s; } .button-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeIn 0.5s ease forwards 0.9s; } .btn { padding: 0.875rem 2rem; border-radius: 12px; font-size: 1rem; font-weight: 600; text-decoration: none; transition: all 0.2s ease; display: inline-block; cursor: pointer; border: none; } .btn-primary { background: var(--color-primary); color: white; } .btn-primary:hover { background: #6b8a7e; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(122, 155, 142, 0.3); } .btn-secondary { background: white; color: var(--color-primary); border: 2px solid var(--color-primary); } .btn-secondary:hover { background: var(--color-primary); color: white; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(122, 155, 142, 0.2); } .fun-fact { margin-top: 3rem; padding: 1.5rem; background: white; border-radius: 16px; border-left: 4px solid var(--color-accent); box-shadow: 0 4px 12px rgba(74, 74, 72, 0.08); opacity: 0; animation: fadeIn 0.5s ease forwards 1.1s; } .fun-fact-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent); margin-bottom: 0.5rem; font-weight: 600; } .fun-fact-text { color: var(--color-text-secondary); font-size: 0.95rem; line-height: 1.5; } @media (max-width: 640px) { .error-code { font-size: 4rem; } .error-title { font-size: 1.5rem; } .error-message { font-size: 1rem; } .button-group { flex-direction: column; width: 100%; } .btn { width: 100%; } } }