* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;min-height: 100vh;background: linear-gradient(135deg,#1e3a8a 0%,#0b203e 40%,#050c18 75%,#020617 100%);display: flex;align-items: center;justify-content: center;padding: 20px;position: relative;overflow-x: hidden;}body::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-image:radial-gradient(circle at 20% 80%, rgba(255,255,255,0.03) 0%, transparent 50%),radial-gradient(circle at 80% 20%, rgba(255,255,255,0.02) 0%, transparent 50%),radial-gradient(circle at 40% 40%, rgba(255,255,255,0.015) 0%, transparent 30%);pointer-events: none;}.login-card {display: flex;width: 100%;max-width: 820px;background: #ffffff;border-radius: 20px;overflow: hidden;box-shadow:0 25px 50px rgba(0, 0, 0, 0.4),0 0 0 1px rgba(255, 255, 255, 0.05);animation: cardEntrance 0.7s cubic-bezier(0.16, 1, 0.3, 1);position: relative;z-index: 1;}@keyframes cardEntrance {from {opacity: 0;transform: translateY(40px) scale(0.96);}to {opacity: 1;transform: translateY(0) scale(1);}}.brand-panel {flex: 0 0 42%;background: linear-gradient(160deg, #0b203e 0%, #071222 100%);padding: 45px 35px;display: flex;flex-direction: column;align-items: center;text-align: center;position: relative;overflow: hidden;}.brand-panel::before {content: '';position: absolute;width: 300px;height: 300px;background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);top: -100px;right: -100px;border-radius: 50%;animation: pulse 4s ease-in-out infinite;}.brand-panel::after {content: '';position: absolute;width: 200px;height: 200px;background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);bottom: -50px;left: -50px;border-radius: 50%;animation: pulse 4s ease-in-out infinite 2s;}@keyframes pulse {0%, 100% { transform: scale(1); opacity: 1; }50% { transform: scale(1.1); opacity: 0.7; }}.logo-wrapper {position: relative;z-index: 2;margin-bottom: 38px;}.logo-container {display: flex;align-items: center;justify-content: center;transition: transform 0.3s ease;}.logo-container img {width: 200px;height: 200px;object-fit: contain;}.logo-img {width: 200px;height: 200px;object-fit: contain;}.logo-container:hover .shark-icon {transform: translateX(3px);}.brand-content {position: relative;z-index: 2;}.brand-title {color: #ffffff;font-size: 20px;font-weight: 700;margin-bottom: 10px;letter-spacing: -0.3px;}.brand-subtitle {color: rgba(255, 255, 255, 0.55);font-size: 13px;line-height: 1.6;max-width: 200px;margin: 20 auto;}.sport-badge {margin-top: 28px;padding: 8px 18px;background: rgba(255, 255, 255, 0.06);border-radius: 50px;color: rgba(255, 255, 255, 0.65);font-size: 11px;font-weight: 500;letter-spacing: 1.5px;text-transform: uppercase;border: 1px solid rgba(255, 255, 255, 0.08);position: relative;z-index: 2;transition: all 0.3s ease;}.sport-badge:hover {background: rgba(255, 255, 255, 0.1);border-color: rgba(255, 255, 255, 0.15);}.form-panel {flex: 1;padding: 45px 40px;background: #ffffff;display: flex;flex-direction: column;justify-content: center;}.form-header {margin-bottom: 28px;}.form-header h2 {color: #0b203e;font-size: 24px;font-weight: 700;margin-bottom: 6px;letter-spacing: -0.5px;}.form-header p {color: #6b7280;font-size: 13px;}.alert {padding: 12px 16px;border-radius: 10px;margin-bottom: 20px;font-size: 13px;animation: shake 0.5s ease-in-out;}.alert-danger {background: #fef2f2;color: #dc2626;border: 1px solid #fecaca;}@keyframes shake {0%, 100% { transform: translateX(0); }20%, 60% { transform: translateX(-5px); }40%, 80% { transform: translateX(5px); }}.form-group {margin-bottom: 20px;}.form-label {display: block;color: #0b203e;font-size: 12px;font-weight: 600;margin-bottom: 7px;letter-spacing: 0.3px;text-transform: uppercase;}.form-control {width: 100%;padding: 13px 16px;font-size: 14px;font-family: 'Inter', sans-serif;border: 2px solid #e5e7eb;border-radius: 10px;background: #f9fafb;color: #0b203e;transition: all 0.25s ease;outline: none;}.form-control::placeholder {color: #9ca3af;}.form-control:hover {border-color: #d1d5db;background: #f3f4f6;}.form-control:focus {border-color: #0b203e;background: #ffffff;box-shadow: 0 0 0 4px rgba(11, 32, 62, 0.06);transform: translateY(-1px);}.btn-primary {width: 100%;padding: 14px 24px;font-size: 14px;font-weight: 600;font-family: 'Inter', sans-serif;color: #ffffff;background: linear-gradient(135deg, #0b203e 0%, #14305a 100%);border: none;border-radius: 10px;cursor: pointer;transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);margin-top: 8px;position: relative;overflow: hidden;}.btn-primary::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);transition: left 0.5s ease;}.btn-primary:hover {transform: translateY(-2px);box-shadow: 0 8px 25px rgba(11, 32, 62, 0.35);}.btn-primary:hover::before {left: 100%;}.btn-primary:active {transform: translateY(0);box-shadow: 0 4px 15px rgba(11, 32, 62, 0.25);}.form-links {margin-top: 28px;padding-top: 24px;border-top: 1px solid #f0f0f0;}.form-links a {color: #0b203e;font-weight: 600;text-decoration: none;font-size: 13px;transition: all 0.25s ease;position: relative;}.form-links a::after {content: '';position: absolute;bottom: -2px;left: 0;width: 0;height: 2px;background: #0b203e;transition: width 0.25s ease;}.form-links a:hover {color: #162d50;}.form-links a:hover::after {width: 100%;}.form-links p {color: #6b7280;font-size: 13px;margin-bottom: 8px;}.form-links p:last-child {margin-bottom: 0;}@media (max-width: 768px) {body {padding: 16px;align-items: flex-start;padding-top: 40px;}.login-card {flex-direction: column;max-width: 400px;}.brand-panel {padding: 35px 25px;}.logo-container {width: 70px;height: 70px;}.shark-icon {width: 38px;height: 38px;}.brand-title {font-size: 18px;}.brand-subtitle {font-size: 12px;}.form-panel {padding: 35px 28px;}.form-header h2 {font-size: 22px;}}@media (max-width: 400px) {.form-panel {padding: 30px 22px;}.brand-panel {padding: 30px 20px;}.sport-badge {font-size: 10px;padding: 7px 14px;}}.form-group {animation: fadeInUp 0.5s ease-out backwards;}.form-group:nth-child(1) { animation-delay: 0.1s; }.form-group:nth-child(2) { animation-delay: 0.2s; }.btn-primary { animation: fadeInUp 0.5s ease-out 0.3s backwards; }.form-links { animation: fadeInUp 0.5s ease-out 0.4s backwards; }@keyframes fadeInUp {from {opacity: 0;transform: translateY(15px);}to {opacity: 1;transform: translateY(0);}}