:root {
      --primary: #b91c1c;
      --primary-dark: #991b1b;
      --primary-light: #dc2626;
      --gradient-primary: linear-gradient(135deg, #b91c1c 0%, #dc2626 50%, #ef4444 100%);
      --shadow-soft: 0 4px 20px rgba(0,0,0,0.08);
      --shadow-hover: 0 12px 40px rgba(185, 28, 28, 0.2);
    }
    
    body {
      font-family: 'Poppins', sans-serif;
    }
    
    h1, h2, h3, h4 {
      font-family: 'Playfair Display', serif;
    }
    
    .modern-header {
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    
    .nav-link {
      position: relative;
      padding: 8px 0;
      font-weight: 500;
      transition: color 0.3s ease;
    }
    
    .login-container {
      background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 50%, #fecaca 100%);
      min-height: calc(100vh - 200px);
    }
    
    .gemstone-bg {
      background: linear-gradient(135deg, #fff5f5 0%, #ffe4e6 50%, #ffd4d6 100%);
      position: relative;
      overflow: hidden;
    }
    
    .gemstone-bg::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 70%;
      height: 200%;
      background: radial-gradient(circle, rgba(185, 28, 28, 0.05) 0%, transparent 70%);
    }
    
    .input-group {
      position: relative;
    }
    
    .input-group i:first-child {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: #9ca3af;
      transition: color 0.3s ease;
    }
    
    .input-group input:focus + label,
    .input-group input:not(:placeholder-shown) + label {
      top: -10px;
      left: 12px;
      font-size: 12px;
      background: white;
      padding: 0 4px;
      color: var(--primary);
    }
    
    .input-group input:focus ~ i:first-child {
      color: var(--primary);
    }
    
    .floating-label {
      position: absolute;
      left: 48px;
      top: 50%;
      transform: translateY(-50%);
      color: #9ca3af;
      transition: all 0.3s ease;
      pointer-events: none;
      font-size: 14px;
    }
    
    .password-toggle {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: #9ca3af;
      transition: color 0.3s ease;
    }
    
    .password-toggle:hover {
      color: var(--primary);
    }
    
    .tab-btn {
      position: relative;
      transition: all 0.3s ease;
    }
    
    .tab-btn::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 0;
      height: 3px;
      background: var(--gradient-primary);
      transition: width 0.3s ease;
    }
    
    .tab-btn.active {
      color: var(--primary);
    }
    
    .tab-btn.active::after {
      width: 100%;
    }
    
    .btn-primary {
      background: var(--gradient-primary);
      color: white;
      padding: 16px 32px;
      border-radius: 12px;
      font-weight: 600;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(185, 28, 28, 0.3);
    }
    
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(185, 28, 28, 0.4);
    }
    
    .social-login-btn {
      transition: all 0.3s ease;
      border-radius: 12px;
    }
    
    .social-login-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-soft);
    }
    
    .benefit-item {
      transition: all 0.3s ease;
    }
    
    .benefit-item:hover {
      transform: translateX(8px);
    }
    
    .remember-checkbox {
      accent-color: var(--primary);
    }
    
    .faq-question {
      transition: all 0.3s ease;
    }
    
    .faq-question:hover {
      background: #fef2f2;
    }
    
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .animate-in {
      animation: fadeInUp 0.5s ease forwards;
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
    }
    
    .float-animation {
      animation: float 3s ease-in-out infinite;
    }
    
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: #fef2f2; }
    ::-webkit-scrollbar-thumb { background: var(--gradient-primary); border-radius: 5px; }