*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#667eea0%,#764ba2100%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.container{background:#fffffff2;border-radius:20px;padding:40px;box-shadow:020px60px #0000004d;max-width:800px;width:100%;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}h1{text-align:center;color:#333;margin-bottom:40px;font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#667eea0%,#764ba2100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.buttons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin-bottom:40px}.btn{padding:12px24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all0.3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;text-transform:none;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:8px}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width0.6s,height0.6s}.btn:hover:before{width:300px;height:300px}.btn:hover{transform:translateY(-2px);box-shadow:010px25px #0003}.btn:active{transform:translateY(0);box-shadow:05px15px #0003}.btn-primary{background:linear-gradient(135deg,#667eea0%,#764ba2100%);color:#fff}.btn-secondary{background:linear-gradient(135deg,#f093fb0%,#f5576c100%);color:#fff}.btn-success{background:linear-gradient(135deg,#4facfe0%,#00f2fe100%);color:#fff}.btn-warning{background:linear-gradient(135deg,#fa709a0%,#fee140100%);color:#fff}.btn-danger{background:linear-gradient(135deg,#ff6b6b0%,#ee5a24100%);color:#fff}.btn-outline{background:transparent;border:2px solid #667eea;color:#667eea}.btn-outline:hover{background:#667eea;color:#fff}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn.loading{pointer-events:none}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin0.8s linear infinite;display:none}.btn.loading .spinner{display:inline-block}.btn.loading .btn-text{display:none}@keyframes spin{to{transform:rotate(360deg)}}.icon-buttons{display:flex;justify-content:center;gap:20px;margin-bottom:30px}.btn-icon{width:60px;height:60px;border-radius:50%;background:#fff;border:2px solid #e2e8f0;cursor:pointer;transition:all0.3s ease;display:flex;align-items:center;justify-content:center}.btn-icon:hover{border-color:#667eea;background:linear-gradient(135deg,#667eea0%,#764ba2100%);transform:scale(1.1) rotate(5deg)}.btn-icon:hover .icon{color:#fff}.icon{width:24px;height:24px;color:#667eea;transition:color0.3s ease}.message{text-align:center;padding:15px;border-radius:8px;margin-top:20px;font-weight:500;opacity:0;transform:translateY(10px);transition:all0.3s ease}.message.show{opacity:1;transform:translateY(0)}@media (max-width:768px){.container{padding:30px20px}h1{font-size:2rem}.buttons-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px}.btn{padding:10px20px;font-size:14px}.btn-icon{width:50px;height:50px}}