* { margin: 0; padding: 0; box-sizing: border-box; }

          :root {
            --glass-bg: rgba(255, 255, 255, 0.08);
            --glass-border: rgba(255, 255, 255, 0.15);
            --border-radius-lg: 24px;
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            --border-radius: 16px;
            --border-radius-lg: 24px;
            --accent-color: #06b6d4;
          }

       
        
          body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
               background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
               background-attachment: fixed;
               min-height: 100vh;
               color: var(--text-primary);
               line-height: 1.6;
               overflow-x: hidden;
               }
        
/* Animated background particles */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 200, 255, 0.2) 0%, transparent 50%);
  animation: float 20s ease-in-out infinite;
  z-index: -1;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-30px) rotate(120deg); }
  66% { transform: translateY(20px) rotate(240deg); }
}
        
        
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .header { text-align: center; color: white; margin-bottom: 30px; }
        .header h1 { font-size: 2.5rem; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
        .header p { font-size: 1.1rem; opacity: 0.9; }
        

        
.tabs {
  display: flex;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  position: relative;
}

.tabs::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
} 
        
        .tab-button { flex: 1; padding: 20px; background: #f8f9fa; border: none; cursor: pointer; font-size: 1.1rem; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px; }
        .tab-button.active { background: white; color: #667eea; transform: translateY(-2px); }
        .tab-button:hover { background: #e9ecef; }
        
        
        .tab-content { background: white; border-radius: 0 0 15px 15px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); min-height: 600px; }
        
        .tab-pane { display: none; animation: fadeIn 0.5s ease-in-out; }
        .tab-pane.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        
        
        .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 30px; }
        
        
        
        .form-section { background: #f8f9fa; padding: 25px; border-radius: 12px; border-left: 4px solid #667eea; }
        
        .form-section h3 { color: #667eea; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
        .form-section p { margin-bottom: 20px; font-size: 0.9rem; color: #6c757d; line-height: 1.5; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #495057; }
        .form-group input, .form-group select { width: 100%; padding: 12px 15px; border: 2px solid #e9ecef; border-radius: 8px; font-size: 1rem; transition: all 0.3s ease; }
        .form-group input:focus, .form-group select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
        .checkbox-group { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
        .checkbox-group input[type="checkbox"] { width: auto; }
        .button-group { display: flex; gap: 15px; justify-content: center; margin: 30px 0; }
        .btn { padding: 15px 30px; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 10px; }
        .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); }
        .btn-secondary { background: #6c757d; color: white; }
        .btn-secondary:hover { background: #5a6268; transform: translateY(-2px); }
        .results { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 12px; margin-top: 30px; display: none; }
        .results.show { display: block; animation: slideIn 0.5s ease-out; }
        @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
        .results h3 { margin-bottom: 20px; text-align: center; font-size: 1.5rem; }
        .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
        .result-item { background: rgba(255,255,255,0.1); padding: 20px; border-radius: 8px; text-align: center; backdrop-filter: blur(10px); }
        .result-item h4 { font-size: 0.9rem; opacity: 0.9; margin-bottom: 10px; text-transform: uppercase; }
        .result-item .amount { font-size: 1.8rem; font-weight: bold; }
        .net-salary { grid-column: 1 / -1; background: rgba(255,255,255,0.2); font-size: 1.2rem; }
        .net-salary .amount { font-size: 2.2rem; color: #ffeb3b; }
        .info-section { background: white; margin: 30px 0; padding: 40px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
        .info-section h2 { color: #667eea; margin-bottom: 25px; text-align: center; }
        .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
        .info-card { padding: 25px; background: #f8f9fa; border-radius: 10px; border-left: 4px solid #667eea; }
        .info-card h3 { color: #667eea; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
        .footer { text-align: center; padding: 30px; background: rgba(255,255,255,0.1); color: white; border-radius: 15px; margin-top: 30px; }
        .footer a { color: #ffeb3b; text-decoration: none; font-weight: 600; }
        .footer a:hover { text-decoration: underline; }
        @media (max-width: 768px) {
            .container { padding: 15px; }
            .header h1 { font-size: 2rem; }
            .tabs { flex-direction: column; }
            .tab-button { padding: 15px; }
            .form-grid { grid-template-columns: 1fr; gap: 20px; }
            .button-group { flex-direction: column; }
        }